Open-source SVG avatars

Expressive default avatars for React and shadcn apps.

Generate SVG avatars from user IDs, customize your brand colors, and ship with React components, shadcn blocks, or a hosted API.

Add to your app Try the playground

MIT licensed
Custom brand colors
Free React & shadcn toolkit

Blobz for

From preview to production

Add Blobz to your app.

A React component, source you own with shadcn, or an image URL for any stack. Pick what fits your project.

React and shadcn are free and open source.
No account or API key needed.

react · npm

npm i @blobz/react

your-component.tsx

import { Avatar } from "@blobz/react";

<Avatar
  name={user.id}
  palette={["#eef9ff", "#38bdf8"]}
  size={48}
/>

React 19+ · Renders locally · No global stylesheet

React docs

Made for your interface

Your app.
Your colors.

Drop avatars into profiles, teams, and account menus. Try a palette or bring your own brand colors to see how they fit.

Name or seed

Palette

Custom

Profile

Saksham

Designing friendly things for the internet.

248 posts12.8k friends

Social card

Say hello to

Saksham's tiny internet face.

Made to match your palette.1200 × 630

Recent activity

Saksham shipped a new profile
now
Kalpana joined the tiny-wins channel
12m
Vikram remixed a new palette
28m

Team chat# tiny-wins

Saksham

These colors fit right in.

Message the team

Predictable by design

Stable by default.

Use a stable user ID with the same palette and settings to get the same avatar across sessions and surfaces. Render it on demand, with no uploaded images to store.

Pricing

Pay for the URL,
not the avatar.

Plus

Hosted API

$49.90/ year

A hosted image URL for every user. No file storage needed.

5Mrequests / month

Choose Plus

Pro

Hosted API

$99.90/ year

A hosted image URL for every user. No file storage needed.

10Mrequests / month

Choose Pro

Free toolkit

Free forever

Generate unlimited avatars in your app. No account or image requests.

React package Ready-to-use shadcn components

Start for free

Hosted plans include 5 approved origins and no overage charges.

Back the project

Help keep Blobz open source.

Your support helps keep Blobz open, playful, and growing.

Give your app a little character.

Start with the free React package or add a shadcn component. Make it yours from there.

Add to your app