Jdenticon doesn't render my icons


There are multiple error descriptions for this issue:


If you are using the UMD build of Jdenticon (jdenticon.js or jdenticon.min.js) the library will schedule a call to jdenticon() once your page has finished loading. This function will find all icon placeholders on the page and render them. This won't work if:

Solution 1

There are ready to use libraries or code snippets for the frameworks listed below.

Solution 2

If the used framework is not listed above, or if plain JavaScript is used, you need to update the icon on demand. Here are some possibilities:

Solution 3

Since version 2.1.0 Jdenticon can detect when <svg> and <canvas> elements are inserted onto the page dynamically and then trigger a render without manually calling jdenticon.update().

To enable this feature, set replaceMode to observe before the Jdenticon library is loaded. See the example below how this is done in vanilla JavaScript. Please note that this feature is not supported in IE10 and earlier.

Enable observe mode

    window.jdenticon_config = {
        replaceMode: "observe"
<script src="https://cdn.jsdelivr.net/npm/jdenticon@3.1.0"></script>

If you use Webpack or Browserify you need to ensure jdenticon_config is set before loading Jdenticon.

This feature utilizes mutation observers. If you notice any slowdown using this approch, consider using solution 1 instead.