Oreo Avatar

Deterministic soft-gradient SVG avatars, 6 shapes x 40 palettes

Tier B · UsefulGeneratorComponent Libraryoreo-design-avatar.vercel.app

(Visit oreo-design-avatar.vercel.app ↗)(Repository)

Preview image from oreo-design-avatar.vercel.app

Oreo Avatar generates soft gradient placeholder avatars as dependency-free SVG. It ships six shape families — Bloom, Silk, Flare, Nova, Void and Jade — across 40 colour presets, with OKLCH tone controls for hue, chroma and lightness, light/dark appearance, and a drift parameter. Passing a variantId makes output deterministic, so the same user id always renders the same avatar. The linked site is a live studio; the library is an npm package with both a createAvatar() function and a React entry point, and it can export SVG, PNG or JPG at 64/128/256/512 px.

Install

npm i @oreo-design/avatar

For an agent

Reach for this instead of Boring Avatars or DiceBear when the brief is a calm gradient blob rather than a geometric or illustrated identicon, and when you need the output to be plain SVG with no runtime dependency you can inline or server-render. The variantId seed is the important detail: hash a user id into it so avatars stay stable across sessions without storing an image. Use the /react entry only if you need reactivity — for lists, call createAvatar() once and cache the SVG string, because regenerating per render wastes work. It gives you a placeholder, not an upload flow, so pair it with your own avatar-upload component.

Why it is here. Most default-avatar libraries look like identicons; this one looks like a design decision, and the OKLCH tone controls let you pull the whole set toward an existing brand hue instead of accepting the library's taste.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React, Vanilla JS
Styling: Not applicable
Distribution: npm package, GitHub repository, Web app / online tool
Platform: Web
Content type: Code, Images / textures / backgrounds
Agent readiness: Readable open source, Copy-paste ready code
Accessibility: Unknown
Maturity: Actively maintained
GitHub stars: 51
Package: @oreo-design/avatar

Components it ships

1 total

Avatar Placeholder Image

Helps you build

Public Profile Account Web App Comments Feed

Notable for

6 named shape families
40 palettes with OKLCH tone controls
deterministic per-user variants
zero-dependency SVG output
SVG/PNG/JPG export up to 512 px

Provenance

Verified 2026-08-15. HTTP 200. https://oreo-design-avatar.vercel.app/ (200), https://github.com/BIAsia/oreo-design-avatar (README: shape names, createAvatar API, React entry), GitHub API repos/BIAsia/oreo-design-avatar (stars 51, MIT, pushed_at 2026-07-31), https://oreo-design-avatar.vercel.app/llms.txt (404)

Also in Component Libraries

oreo-design-avatar.vercel.appTier B