blo

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

Features

• 🐥 Small: 0.67 KB gzipped.
• ☄️ Fast: 4.7x 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: Supports browsers, Bun and Node.js.
• ☁️ Zero dependencies.

Library Comparison

Library	Renders/s [1]	Size	Types	Environment [2]	Rendering
blo	☄️ 7,862				SVG
ethereum-blockies-base64	948				PNG
@download/blockies	361				Canvas
blockies-react-svg	1,675				SVG (React)
blockies-ts	381				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 blo
pnpm add blo
yarn add blo

import { blo } from "blo";

img.src = blo("0x…");

With React

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

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

API

blo(address: Address, size = 64): string

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 { blo } from "blo";

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

bloSvg(address: Address, size = 64): string

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

bloImage(address: Address): BloImage

Get a BloImage data structure that can be used to render the image in different formats.

See src/svg.ts for an example of how to use it.

Types

The library ships with TypeScript types included.

// The data structure 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 = `0x${string}`;

Acknowledgements

• blo is a modernized version of ethereum-blockies-base64, which in turn was based on ethereum/blockies.
• This README style was heavily inspired by colord.

FAQ

Why is it called blo?

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

License

MIT