The same string always renders the same avatar — every time. Fast, tiny, and dead simple to use: ~8 KB gzipped, ~5 µs per avatar, one file, zero dependencies. TappyAvatar turns any username, email, or ID into a unique SVG avatar right in the browser.
No database, no stored images, no backend. A string goes in, an SVG comes out — server and client render byte-identical results.
Same name, same style, byte-identical output. No reliance on time, randomness, or network — it looks the same every single time.
One file is all you need. Everything runs in the browser — no npm dependencies, no network calls, no backend.
The whole library is ~8 KB gzipped (with comments); a single avatar SVG is only 0.3–0.5 KB.
Pixel faces, robots, emojis, wireframes, neon waves, flower petals, waveforms, prism halos, hex grids, explosions, starfields, and energy portals — each with plenty of random detail baked in.
Lock a style, or let the name pick for you (style: "auto"). Each card below renders three different names.
Every option in the library, live: style, hue, background, dark mode, size. Type, tweak, and watch the avatar update instantly.
Works with the browser, Node, React, and mini apps alike. Install from npm or drop in the single tappy-avatar.js — either way you are done.
hue locks the palette, dark flips to dark mode, overrides pins any detail, style: "auto" lets the name choose. The full API is in the table below and in the GitHub docs.| Option | Type | Default | Description |
|---|---|---|---|
style | key or "auto" | "pixel" | Visual style; unknown values fall back to the default |
size | number | CSS decides | Sets the width/height attribute (px); geometry is unaffected |
hue | number | Name decides | Locks the hue to 0–360°; the name only drives the shape |
background | circle / square / squircle | None (transparent) | Background shape behind the avatar |
dark | boolean | false | Dark mode (deeper fills and strokes) |
pixel | number | Name decides | Locks the pixel grid to 9 or 11 |
overrides | object | — | Pin any trait to a specific 0–1 position |
title | string | — | Accessible <title> for the SVG |
Quick answers on determinism, privacy, and how to plug it in.
TappyAvatar is a fast, tiny, easy-to-use deterministic SVG avatar generator. It turns any username, email, or ID string into a unique SVG avatar right in the browser — frontend-only, zero dependencies, ~8 KB gzipped, 12 styles.
Two ways: npm install tappy-avatar for Node, React, and bundler projects, or drop the single tappy-avatar.js file into your page and use the global tappyAvatar. Zero dependencies either way.
Identicons are deterministic too, but they are abstract geometric blocks with no visual personality. TappyAvatar renders recognizable, character-like avatars — pixel faces, robots, emojis, wireframe heads, cyberpunk neon waves, flower petals, layered waveforms, prism halos, hex grids, explosions, starfields, and energy portals — so every user gets a friendly, distinctive avatar instead of a generic blob. One file, ~8 KB gzipped, and you can lock a hue or background to match your brand.
No. TappyAvatar is deterministic: the same name and style always render a byte-identical SVG — no dependence on time, randomness, or the network, and server and client renders match exactly.
No. Everything runs locally in the browser. The single tappy-avatar.js file is all you need — no network requests, and usernames never leave the page.
Fast and tiny: ~5 µs per avatar. The whole library is ~8 KB gzipped (comments included), and a single avatar SVG is only 0.3–0.5 KB.
The output is a plain SVG string, so it is framework-agnostic. Include the script and call tappyAvatar(name, { style }), or use tappyAvatar.uri() to get a data URI for an <img>. Works with React, Vue, mini apps, and SSR.
Yes. It is fully open source under the MIT license — use, modify, and ship it commercially with no attribution required. Source lives at github.com/tappypotato/TappyAvatar.
MIT licensed, so just use it. Forks, stars, and issues are all welcome — or simply copy the one file and you are live in ten seconds.