- π₯ Small: 0.67 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 TypeScript definitions.
- π« Universal: Compatible with browsers, Bun, and Node.js.
- βοΈ Standalone: 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 blo
pnpm add blo
yarn add blo
import { blo } from "blo";
img.src = blo("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
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={blo(address)}
/>
);
}
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(address); // size inside the SVG defaults to 64px
img2.src = blo(address, 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.
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 = `0x${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.
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.
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.
![Ethereum identicon rendered in the terminal](https://private-user-images.githubusercontent.com/36158/270120765-a7c86d01-f003-49d7-8f9e-93097b502872.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNDkyNjcsIm5iZiI6MTcyNjE0ODk2NywicGF0aCI6Ii8zNjE1OC8yNzAxMjA3NjUtYTdjODZkMDEtZjAwMy00OWQ3LThmOWUtOTMwOTdiNTAyODcyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDEzNDkyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTExNTNjMDgwNTRhMjcyY2M1OWFlNjY1NGM4ODE1ZGMwYzMzZTRiNWU1ZGYyNWNlZWNlOTg0OTRkYTk2MzQ4YzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Ox9S-QQxh1hpw0d0bopopbFrEqxrhKPHOP-ycU--Wkw)
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.
blo is short for blockies, which is the name of the original library it is based on.
Footnotes
-
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. β©
-
The term βallβ refers to libraries that are framework agnostic and that run in browsers, Bun and Node.js. β©