Icon designer

This designer lets you create an indenticon theme with custom colors to fit the style of your application.

Preview
See code for usage below

Icon hue

155°

Colored shapes

Saturation
12% - 44%
Lightness
12% - 44%

Grayscale shapes

Saturation
12% - 44%
Lightness
12% - 44%

Background color

#ffffff00

Code for usage

In the browser

<svg width="100" height="100" data-jdenticon-value="icon">
</svg>

<script>

// Custom identicon style
// https://jdenticon.com/icon-designer.html
window.jdenticon_config = {
    hues: [128],
    lightness: {
        color: [0.4, 0.4],
        grayscale: [0.4, 0.4]
    },
    saturation: {
        color: 0.4,
        grayscale: 0.4
    },
    backColor: "0.4"
};

</script>

<script src="https://cdn.jsdelivr.net/npm/jdenticon@3.1.1/dist/jdenticon.min.js" async
        integrity="sha384-l0/0sn63N3mskDgRYJZA6Mogihu0VY3CusdLMiwpJ9LFPklOARUcOiWEIGGmFELx" crossorigin="anonymous">
</script>

Node.js

const jdenticon = require("jdenticon");
const fs = require("fs");

// Custom identicon style
// https://jdenticon.com/icon-designer.html
jdenticon.configure({
    hues: [128],
    lightness: {
        color: [0.4, 0.4],
        grayscale: [0.4, 0.4]
    },
    saturation: {
        color: 0.4,
        grayscale: 0.4
    },
    backColor: "#ffffffff"
});

const png = jdenticon.toPng("value to hash", 100);
fs.writeFileSync("./testicon.png", png);

Angular

import { NgxJdenticonModule, JDENTICON_CONFIG } from 'ngx-jdenticon';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxJdenticonModule],
  providers: [
    { 
      // Custom identicon style
      // https://jdenticon.com/icon-designer.html
      provide: JDENTICON_CONFIG,
      useValue: {
        hues: [128],
        lightness: {
          color: [0.4, 0.4],
          grayscale: [0.4, 0.4],
        },
        saturation: {
          color: 0.4,
          grayscale: 0.4,
        },
        backColor: '#ffffffff',
      },
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

PHP

<?php
include_once("vendor/autoload.php");

use Jdenticon\Identicon;

$icon = new Identicon(array(
    'value' => 'Value to hash',
    'size' => 100,
    // Custom identicon style
    // https://jdenticon.com/icon-designer.html
    'style' => array(
        'hues' => array(125),
        'backgroundColor' => '#ffffffff',
        'colorLightness' => array(0.4, 0.4),
        'grayscaleLightness' => array(0.4, 0.4),
        'colorSaturation' => 0.4,
        'grayscaleSaturation' => 0.4,
    )));
$icon->displayImage();

ASP.NET Core

// Startup.cs
using Jdenticon;
using Jdenticon.AspNetCore;
using Jdenticon.Rendering;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;

namespace MyWebApplication
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseJdenticon(defaultStyle =>
            {
                // Custom identicon style
                // https://jdenticon.com/icon-designer.html
                defaultStyle.Hues = new HueCollection { { 125, HueUnit.Degrees } };
                defaultStyle.BackColor = Color.FromRgba(0, 0, 0, 0);
                defaultStyle.ColorLightness = Range.Create(0.4f, 0.4f);
                defaultStyle.GrayscaleLightness = Range.Create(0.4f, 0.4f);
                defaultStyle.ColorSaturation = 0.4f;
                defaultStyle.GrayscaleSaturation = 0.4f;
            });
            app.UseStaticFiles();
            app.UseMvc();
        }
    }
}

ASP.NET MVC

// Global.asax
using Jdenticon;
using Jdenticon.Rendering;
using System.Web;
using System.Web.Optimization;
using System.Web.Routing;

namespace MyWebApplication
{
    public class MvcApplication : HttpApplication
    {
        protected void Application_Start()
        {
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);

            // Custom identicon style
            // https://jdenticon.com/icon-designer.html
            Identicon.DefaultStyle = new IdenticonStyle 
            {
                Hues = new HueCollection { { 125, HueUnit.Degrees } },
                BackColor = Color.FromRgba(0, 0, 0, 0),
                ColorLightness = Range.Create(0.4f, 0.4f),
                GrayscaleLightness = Range.Create(0.4f, 0.4f),
                ColorSaturation = 0.4f,
                GrayscaleSaturation = 0.4f
            };
        }
    }
}

WPF

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:jd="clr-namespace:Jdenticon.Wpf;assembly=Jdenticon.Wpf">
    <Window.Resources>
        <!-- Custom identicon style -->
        <!-- https://jdenticon.com/icon-designer.html -->
        <Style TargetType="jd:IdenticonElement">
            <Setter Property="Hues" Value="125deg"/>
            <Setter Property="Background" Value="#ffffffff"/>
            <Setter Property="ColorLightness" Value="0.4, 0.4"/>
            <Setter Property="GrayscaleLightness" Value="0.4, 0.4"/>
            <Setter Property="ColorSaturation" Value="0.4"/>
            <Setter Property="GrayscaleSaturation" Value="0.4"/>
        </Style>
    </Window.Resources>
    <WrapPanel ItemWidth="140">
        <jd:IdenticonElement Value="icon1"/>
        <jd:IdenticonElement Value="icon2"/>
        <jd:IdenticonElement Value="icon3"/>
        <jd:IdenticonElement Value="icon4"/>
    </WrapPanel>
</Window>

.NET general usage

using Jdenticon;
using Jdenticon.Rendering;

class Program
{
    static void Main() 
    {
        // Custom identicon style
        // https://jdenticon.com/icon-designer.html
        var style = new IdenticonStyle 
        {
            Hues = new HueCollection { { 125, HueUnit.Degrees } },
            BackColor = Color.FromRgba(0, 0, 0, 0),
            ColorLightness = Range.Create(0.4f, 0.4f),
            GrayscaleLightness = Range.Create(0.4f, 0.4f),
            ColorSaturation = 0.4f,
            GrayscaleSaturation = 0.4f
        };
        
        var icon = Identicon.FromValue("string to hash", size: 100);
        icon.Style = style;
        icon.SaveAsPng("test.png");
    }
}

Gallery

Here are some examples of custom icon designs. Click an image to open the icon design in the design editor.

The default Jdenticon icon design
Identicon design suitable for a blue website design
Single colored identicons
A military green identicon design
Single color identicons
Identicon design using a darker background