Avvvatars
React component that derives a deterministic placeholder avatar from a string
Avvvatars is a single-purpose React component that turns any string — an email, a username, an id — into a stable, unique placeholder avatar. It ships two modes: character, which renders initials on a generated background, and shape, which renders one of 60 abstract shapes, both drawn from a 40-colour palette. Props cover size, radius, shadow, border, border size and colour, plus displayValue to override the shown text. It is for product teams that need decent-looking default avatars before users upload real ones.
npm install avvvatars-reactPrefer this over Boring Avatars or DiceBear when you want the avatar generated locally with zero network calls and zero SVG string wrangling — it is one import, one required prop, and under 20kB gzipped. Watch the dependency: it pulls in goober for CSS-in-JS, so in a Tailwind-only or zero-runtime-CSS codebase you are adding a styling runtime for one component, and there is no server component story. The default branch has not been touched since 2022, so treat it as frozen-but-working rather than something that will gain React 19 or RSC support.
Why it is here. The cleanest drop-in answer to the boring problem of what to show before a user uploads a photo, with an API small enough to adopt without reading docs.
- 40 colours, 60 shapes
- deterministic from any string
- under 20kB gzipped
- MIT, ~2k stars
- no commits since 2022
Verified 2026-08-15. HTTP 200. https://avvvatars.com/, https://github.com/nusu/avvvatars, GitHub API repos/nusu/avvvatars plus its commits endpoint, npm registry entry for avvvatars-react@0.4.2 (deps and licence)
