Get started

In the browser

Include the Jdenticon library somewhere on your page. Below is Jdenticon served from jsDelivr, but you can download and host it yourself as well.

<script src="" async></script>

Add a canvas element where you want to render an identicon. Use the data-jdenticon-value attribute to specify that an identicon should be rendered on the canvas. user127 below is just an example of a value.

<canvas width="80" height="80" data-jdenticon-value="user127"></canvas>

You may also opt for rendering vector icons. Use in this case svg elements instead of canvas elements.

<svg width="80" height="80" data-jdenticon-value="user127"></svg>

That's it!


To use Jdenticon on Node.js, start by installing the Jdenticon NPM package. Create an empty directory and run the following command in that directory.

npm install jdenticon

The following code illustrates how to generate an identicon and save it as a PNG file. Save it as 'test.js' in the directory you created above.

var jdenticon = require("jdenticon"),
    fs = require("fs"),
    size = 200,
    value = "icon value",
    png = jdenticon.toPng(value, size);
fs.writeFileSync("./testicon.png", png);

Run the test file and open testicon.png in the working directory.

node ./test.js