This designer lets you create an indenticon theme with custom colors to fit the style of your application.
<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.2.0/dist/jdenticon.min.js" async integrity="sha384-yBhgDqxM50qJV5JPdayci8wCfooqvhFYbIKhv0hTtLvfeeyJMJCscRfFNKIxt43M" crossorigin="anonymous"> </script>
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);
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 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();
// 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(); } } }
// 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 }; } } }
<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>
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"); } }
Here are some examples of custom icon designs. Click an image to open the icon design in the design editor.