Avatars from
a string.
seedicon turns any string — a UUID, a user id, a wallet address — into a deterministic SVG avatar. Same seed in, same avatar out, forever. Nothing is uploaded, stored, resized or moderated: the only thing you keep is the id you already had.
Playground
This runs the real package in your browser. Type a seed, pick a style, copy the code.
import { Avatar } from "seedicon/react";
<Avatar
seed="550e8400-e29b-41d4-a716-446655440000"
style="ring"
size={96}
radius={24}
/>Styles
Nine styles, all rendered on the server here — seedicon has no canvas and no window access, so it works during SSR in Next.js, Remix or anything else. Three of them are output-compatible with an existing library, so you can swap it out without changing anyone's avatar.
pixels
Mirrored pixel grid. Output-compatible with blockies.
identicon
Five symmetric rows — the classic dev-tool identicon.
jdenticon
Geometric shapes, four-fold symmetry. Compatible with Jdenticon.
stellar
7×7 mirrored bit grid. Compatible with Stellar addresses.
ring
Concentric rings; the seed picks colors, count and thickness.
lifehash
A pattern grown with a Game of Life automaton.
marble
Two blurred organic blobs over a flat color.
waves
Layered wave bands in shades of a single hue.
gradient
A soft two or three stop diagonal gradient.
Usage
Two functions and one optional React component. That is the whole API — plus one entry point per style, if you only use one and care about bundle size.
// Anywhere: returns raw <svg> markup as a string import { generateAvatar } from "seedicon"; const svg = generateAvatar({ seed: user.id, style: "ring" }); // Or a data URI, ready for <img src> or CSS import { generateAvatarDataUri } from "seedicon"; const src = generateAvatarDataUri({ seed: user.id }); // Or the React component import { Avatar } from "seedicon/react"; <Avatar seed={user.id} size={40} radius={20} /> // Or one style alone — pulls in nothing else import { ring } from "seedicon/ring"; const svg = ring({ seed: user.id, size: 40 });
Why
Letting users upload a profile picture means storing it, resizing it, moderating it and serving it. Most products do not need any of that — they need something consistent in the avatar slot that does not look like a broken image. seedicon is that something, derived from an id you already have, with no randomness and no I/O: the same options always produce byte-for-byte identical markup, on every platform.