Identicon component for React

Usage no npm install needed!

<script type="module">
  import reactIdenticons from '';



React component for generating and displaying github-style identicons.

Live demo (old) (storybook)


npm install react-identicons --save

Basic usage

import React from 'react';
import Identicon from 'react-identicons';

const App = () => {
  return <Identicon string="randomness" />;
export default App;

Code above should result in the following identicon:



Note: all color values should use hexadecimal notation (i.e. #ebebeb)

  • string: (String) Value used for identicon pattern generation.
  • size: (Number) Single number to represent width and height of identicon image. Defaults to 400.
  • padding (Number) Padding around blocks. Defaults to 0.
  • bg (String) Override color for background blocks. Transparent by default.
  • fg (String) Override color for foreground blocks. Generated randomly from hash by default.
  • palette (Array) Provide an array of colors to be used as foreground block colors.
  • count (Number) Block count, can't be higher than 5. Useful for generating smaller (i.e. 3x3 identicons).
  • getColor (Function) Callback function which returns current foreground color value.