Avvvatars

React component that derives a deterministic placeholder avatar from a string

Tier B · UsefulComponent LibraryGeneratoravvvatars.com

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.

Install

npm install avvvatars-react

For an agent

Prefer 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.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React
Styling: CSS-in-JS
Distribution: npm package, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Readable open source, CLI installable
Accessibility: Unknown
Maturity: Stable
GitHub stars: 1,958
Package: avvvatars-react

Components it ships

1 total

Avatar

Helps you build

Public Profile Account Web App Comments Feed

Notable for

40 colours, 60 shapes
deterministic from any string
under 20kB gzipped
MIT, ~2k stars
no commits since 2022

Provenance

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)

Also in Component Libraries

avvvatars.comTier B