SVG Avatar Generator for JavaScript

Install it

npm install @avatar-generator/core @avatar-generator/style-initials — then call createAvatar(initials, {seed} ). Installation

Pick a style

Eleven styles, each its own tree-shakeable package, from letter initials to anime faces. Style Gallery

Use your framework

React, Vue, Svelte, Angular and a framework-agnostic custom element. React · Vue · Svelte · Angular · Web Component

Upgrading?

v3.0.0 is the current release and the only supported one. Migration Guide · Versions & Support

Generate an avatar from any seed

@avatar-generator is an open-source JavaScript and TypeScript library that turns any string, such as a username, an email address or a user ID, into an SVG avatar. The same seed always produces byte-identical SVG, so you don’t need to store avatar images, and a user’s avatar looks the same on the server, in the browser and across deploys.

import { createAvatar } from "@avatar-generator/core";
import { initials } from "@avatar-generator/style-initials";

const avatar = createAvatar(initials, { seed: "john.doe@example.com", size: 64 });

img.src = avatar.toDataUri(); // or use avatar.svg directly

Why use a deterministic avatar generator?

• Nothing to store: the avatar is computed from the seed, so there are no uploads or image hosting to manage.
• Small bundles: each style is its own tree-shakeable package, so you only ship the styles you import.
• No runtime dependencies: the core package ships ESM and CommonJS and depends on nothing.
• Safe for server-side rendering: createAvatar returns a string and needs no DOM or browser globals.

Eleven avatar styles

Compare them in the Style Gallery, or adjust their options in the Configurator.

Style	What it generates
Initials	Letter initials on colored backgrounds
Geometric	GitHub-style symmetrical identicon grids
Pixels	8-bit retro pixel faces
Rings	Concentric rings, segmented and dashed variants
Faces	Minimal flat geometric faces
Illustrated	Detailed cartoon faces with accessories
Anime	Anime and manga-inspired faces with expressive eyes
Abstract	Mondrian, Kandinsky and Bauhaus-inspired compositions
Emoji	Yellow emoji-style expressive faces
Animals	Cute animal avatars, such as a cat, dog, fox or panda
Gradient	Smooth gradients with pattern overlays

Avatar components for your framework

• React avatar component for React 18 and 19
• Vue avatar component for Vue 3
• Svelte avatar component for Svelte 4 and 5
• Angular avatar component for Angular 17 through 21
• Avatar web component for any framework, or none
• Plain JavaScript and TypeScript with the core package

Frequently asked questions

What is a deterministic avatar?

A deterministic avatar is generated from an input, called a seed, so the same seed always gives the same image. With @avatar-generator, the output is byte-identical SVG, which means you can regenerate an avatar whenever you need it instead of storing it.

How do I generate an avatar from a username or email in JavaScript?

Install @avatar-generator/core and a style package, then call createAvatar with the username or email as the seed. It returns an object with the SVG string in svg and a data URI from toDataUri(). The installation guide has the full steps.

Does it work with server-side rendering?

Yes. createAvatar returns a string and doesn’t use the DOM or browser globals, so it runs in Node.js 18 or newer and produces the same result on the server and in the browser.

Is it free for commercial use?

Yes. Every package is MIT licensed.

How does it compare with DiceBear or Boring Avatars?

DiceBear has more styles and a hosted API, and Boring Avatars is a small React component with gradient styles. @avatar-generator offers official components for several frameworks and one MIT license across all its styles. See the full comparison.

Can AI coding assistants read these docs?

Yes. The docs are available as plain text at /llms.txt for an index and /llms-full.txt for everything in one file.