blo is a small and fast library to generate Blockchain identicons.

• 🐥 Small: 0.665 KB gzipped.
• 💥 Fast: 3.5x faster than the second fastest solution.
• 🔍 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	Renders/sec1	Size	Types	Environment2	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

npm i -S @blockchainhub/blo

pnpm add @blockchainhub/blo

yarn add @blockchainhub/blo

import { blo } from "@blockchainhub/blo";

img.src = blo("cb7147879011ea207df5b35a24ca6f0859dcfb145999");

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

function AddressIcon(address: string) {
  return (
    <img
      alt={address}
      src={blo(address)}
    />
  );
}

import { blo } from "@blockchainhub/blo";

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

The library ships with TypeScript types included.

// BloImage contains the data needed to render an icon.
export type BloImage = [BloImageData, Palette];

// 4x8 grid of the image left side, as 32 PaletteIndex items.
// The right side is omitted as it's a mirror of the left side.
export type BloImageData = Uint8Array;

// Colors used by a given icon.
export type Palette = [
  Hsl, // background
  Hsl, // color
  Hsl, // spot
];

// Points to one of the three Palette colors.
export type PaletteIndex =
  | 0 // background
  | 1 // color
  | 2; // spot

// 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 = string;

• 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 💖.

Yes.

Yes. You can use the ENS name directly as the address parameter.

You can render to any format you want by using the bloImage() function, which returns a data structure (see API above). Check out the Bun and Node demos for examples of rendering an identicon in the terminal.

blo focuses on the blockchain algorithm but you can use it with any data. Hexadecimal values prefix it with 0x to fulfill the expected Address otherwise prefix is not needed.

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

CORE