Features

• 🐥 Small: 0.75 KB gzipped.
• 💥 Fast: 3.5x faster than the second fastest solution (performance from original blo).
• 🔍 Optimized: Leverages SVG to generate compact and sharp images at any size.
• 💆 Simple: Focuses on Ethereum identicons only, allowing for a simpler API.
• 🗂 Typed: Ships with types included.
• 👫 Works everywhere: browsers, Bun, Node.js.
• ☁️ Zero dependencies.

Library Comparison

| Library | Renders/sec[^1] | Size | Types | Environment[^2] | Rendering | | ------------------------------------- | ---------------------------: | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------- | --------: | | blo | 💥 8,197 | | | | SVG | | ethereum-blockies-base64 | 807 | | | | PNG | | blockies-react-svg | 1,749 | | | | SVG | | @download/blockies | 334 | | | | Canvas | | blockies-ts | 342 | | | | Canvas | | react-blockies | 2,361 | | | | Canvas |

[^1]: The number of renders per second. It was measured on Chrome 117 Linux with an AMD Ryzen 7 PRO 4750U. See ./benchmark for the methodology.

[^2]: The term “all” refers to libraries that are framework agnostic and that run in browsers, Bun and Node.js.

Getting Started

npm i -S loogie-blo
pnpm add loogie-blo
yarn add loogie-blo

import { loogieBlo } from "loogie-blo";

img.src = loogieBlo("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");

React / Vue / Others

loogie-blo is fast enough to not require memoization or async rendering for common use cases.

function AddressIcon({ address }: { address: `0x${string}` }) {
  return (
    <img
      alt={address}
      src={loogieBlo(address)}
    />
  );
}

API

Get a data URI string representing the identicon as an SVG image.

The size paramater shouldn’t usually be needed, as the image will stay sharp no matter what the size of the img element is.

Example:

import { loogieBlo } from "loogie-blo";

img.src = loogieBlo(address); // size inside the SVG defaults to 400px
img2.src = loogieBlo(address, 24); // set it to 24px

Same as above except it returns the SVG code instead of a data URI string.

Types

The library ships with TypeScript types included.

// A color in the HSL color space.
// [0]: 0-360 (hue)
// [1]: 0-100 (saturation)
// [2]: 0-100 (lightness)
export type Hsl = Uint16Array;

// An Ethereum address.
export type Address = `0x${string}`;

Acknowledgements

• blo is a modernized version of ethereum-blockies-base64, which I think was based on ethereum/blockies.
• This README style was heavily inspired by colord.
• The visual was made in collaboration with @dizzypaty 💖.

FAQ

Does it follow the exact same algorithm as Etherscan, MetaMask and others?

Yes.

Does it work with ENS names?

No it only works with Ethereum addresses, but you can resolve the ENS name to an address (e.g. with wagmi) and pass the result to blo.

Can it be used to generate other types of identicons?

blo only focuses on the Ethereum identicons algorithm but you can use it with any data, just prefix it with 0x to fulfill the expected Address type if you are using TypeScript.

Why is it named blo?

blo is short for blockies, which is the name of the original library it is based on.

License

MIT