Javascript Library for Generating Identicons | Jdenticon

Jdenticon is a JavaScript library for creating highly recognizable identities using HTML5 canvas or SVG. It works with both the browser and node.js. Perfect for creating unique avatars as you see them on GitHub.

Must Read: [Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

Generating Identicons Javascript Library

Post NameIdenticon Generator Jdenticon
Author Namedmester
Official PageClick Here
Publish DateDecember 14, 2020
Last UpdateJuly 25, 2023
DownloadLink Below

How to make use of it:

1. Load the Jdenticon library.

<script src="/path/to/dist/jdenticon.min.js"></script>

2. Create a canvas or SVG based mostly on a placeholder for the identical.

<canvas width="64" height="64" data-jdenticon-value="webcodeflow"></canvas>
<svg width="64" height="64" data-jdenticon-value="webcodeflow"></svg>

3. The library additionally helps hash values which will be specified within the ‘data-identical-hash’ attribute.

<canvas width="64" height="64" data-jdenticon-hash="hash-value-here"></canvas>
<svg width="64" height="64" data-jdenticon-hash="hash-value-here"></svg>

4. API.

// updates all identicon avatars

// renders an indenticon avatar

// render as a PNG image
// NOT available in the browser.

// render as a SVG image 

// jQuery wrapper

// update configs
// or
window.jdenticon_config = { };

5. All configurations.

  // Limits the possible hues in generated icons
  // The hues are specified as an array of hues in degrees.
  hues: null,
  // The lightness range of colored/grayscal shapes of an icon.
  lightness: {
    color: [0.4, 0.8],
    grayscale: [0.3, 0.9]
  // Specifies the saturation of the originally colored/grayscale shapes of an icon.
  saturation: {
    color: 0.5,
    grayscale: 0.0
  // Background color
  backColor "#000000",
  // Padding
  padding 0.08,
  // "never" – icons are never rendered automatically. You need to call jdenticon.update() manually to render identicons.
  // "once" – icons are rendered once the page has loaded. Any dynamically inserted or modified icons will not be rendered unless jdenticon.update() is manually called.
  // "observe" – icons are rendered upon page load, and the DOM is monitored for new icons using a MutationObserver. Use this if icons are inserted dynamically, e.g. by using Angular, React or VanillaJS. This option behaves as "once" in IE<11.
  replaceMode: "once"

JavaScript API

Below is the Jdenticon interface described. In most cases, the HTML attributes are enough for using Jdenticon. Check them out before reading the rest of the API.

Html attributes

data-jdenticon-valueSpecified on a <canvas> or <svg> element to declare that an identicon should be rendered for this value within the element.
data-jdenticon-hashSpecified on a <canvas> or <svg> element to declare that an identicon should be rendered for this hexadecimal hash string within the element.


jdenticon()Updates all <canvas> or <svg> elements with the data-jdenticon-value or data-jdenticon-hash attribute.
jdenticon.update()Updates the identicon in a specific DOM element or for all elements matching a CSS selector.
jdenticon.updateCanvas()Updates the identicon in a specific <canvas> element or for all elements matching a CSS selector.
jdenticon.updateSvg()Updates the identicon in a specific <svg> element or for all elements matching a CSS selector.
jdenticon.drawIcon()Renders an indenticon on an HTML canvas.
jdenticon.toPng()Renders an identicon as a PNG image. Not available in the browser.
jdenticon.toSvg()Renders an identicon as an SVG image.
jdenticon.configure()Configures the appearance of generated icons and the behavior of Jdenticon.
$.fn.jdenticon()jQuery wrapper plugin for updating all identicons in a query element collection.

See Demo And Download


Official Website(dmester): Click Here

This superior jQuery/javascript plugin is developed by dmester. For extra Advanced Usage, please go to the official website.

Related Posts


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *