@ootc/avatars

Deterministic, frontend-only SVG avatars for React. Each avatar is a pure function of a seed string — no image storage, no network, and identical output on server and client (SSR-safe). Three geometric styles (never a face):

• identicon — GitHub-style 5×5 mirrored pixel grid, OKLCH color.
• gradient — vivid two-tone gradient overlaid with a white pixel pattern.
• face — a friendly cartoon-emoji face composed from curated part sets (eyes, mouth, blush) picked deterministically from the seed.

Install

pnpm add @ootc/avatars

react >= 17 is a peer dependency.

Usage

import { Avatar, Identicon, Face, Gradient } from "@ootc/avatars"

// Unified entry point — pick a style with `variant`
<Avatar seed="[email protected]" variant="face" size={48} />

// Or import a single style directly
<Gradient seed="agent-42" size={40} />
<Identicon seed="agent-42" background="#fff" />

Props

All components take:

| prop | type | default | description | | ------- | -------- | --------- | --------------------------------------- | | seed | string | required | value the avatar is derived from | | size | number | 40 | rendered width/height in px | | label | string | seed | accessible aria-label |

Identicon additionally accepts background (string, default #f1f3f5). Avatar additionally accepts variant ("identicon" | "gradient" | "face", default "gradient").

Utilities

The seed→bits core is exported too, if you want to build your own mark:

import { createRng, hashSeed, mirroredPattern } from "@ootc/avatars"

const rng = createRng("seed")
rng.next()          // stable uint32 stream
rng.range(0, 360)   // inclusive integer in range

License

MIT