Skip to content
<1k library that generates blocky identicons
JavaScript
Branch: master
Clone or download
Latest commit 55518d3 Aug 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Latest build and bump version Aug 14, 2018
examples Deleted redundant example Aug 12, 2018
src Use new array feature instead of for loop to zero Aug 14, 2018
.gitignore 1.0! Aug 12, 2018
README.md Actual registry paths Aug 12, 2018
package-lock.json 1.0.3 Aug 14, 2018
package.json 1.0.3 Aug 14, 2018

README.md

Blockies

A tiny library for generating blocky identicons.

Sample blockies image

Demo page

Browser

import { createIcon } from '@download/blockies';

var icon = createIcon({ // All options are optional
    seed: 'randstring', // seed used to generate icon data, default: random
    color: '#dfe', // to manually specify the icon color, default: random
    bgcolor: '#aaa', // choose a different background color, default: white
    size: 15, // width/height of the icon in blocks, default: 10
    scale: 3 // width/height of each block in pixels, default: 5
});

document.body.appendChild(icon); // icon is a canvas element

In the above example the icon will be 15x15 blocks, and each block will be 3x3 pixels. The icon canvas will be 45x45 pixels.

Node

import { createCanvas } from 'canvas'; 
import { renderIcon } from '@download/blockies';

const canvas = createCanvas(50, 50);

var icon = renderIcon(
    { // All options are optional
        seed: 'randstring', // seed used to generate icon data, default: random
        color: '#dfe', // to manually specify the icon color, default: random
        bgcolor: '#aaa', // choose a different background color, default: white
        size: 15, // width/height of the icon in blocks, default: 10
        scale: 3 // width/height of each block in pixels, default: 5
    },
    canvas
);

Notes

The defaults of size 10 and scale 5 generate 50x50 pixel icons. Below are some standard sizes that work well. A size larger than 10 will start generating more noisy icons that don't ressemble much.

  • 24x24 {size: 8, scale: 3}
  • 32x32 {size: 8, scale: 4}
  • 48x48 {size: 12, scale: 4}

Alternative Styles

Build

npm run build

License

WTFPL

You can’t perform that action at this time.