The same string always renders the same avatar — every time. Fast, tiny, and dead simple to use: ~6.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 ~6.8 KB gzipped (with comments); a single avatar SVG is only 0.3–0.5 KB.
Snowflake, plant, pixel, line, low-poly, robot, emoji, silhouette — 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" | "snowflake" | 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, ~6.8 KB gzipped, 8 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.
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 ~6.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.