Deterministic pixel-style avatars from any name
- 13 Style Variants – Band, Crescent, Wave, Ring & more
- Facial Customization – 6 eye shapes, 5 mouth styles, glasses, hats
- 100+ Color Palettes – Beautiful built-in combinations
- Deterministic – Same name always produces identical avatars
- Zero Dependencies – Lightweight React component
- SVG Output – Perfect scaling at any size
npm install pixelpeeps
import Avatar from 'pixelpeeps';
<Avatar name="user@example.com" size={128} /><Avatar
name="Ada Lovelace"
size={180}
colors={["#06b6a4", "#73a9ff"]}
bg={["#f0f9ff", "#e0f2fe"]}
variant="crescent"
eyeShape="surprised"
mouthShape="smile"
glasses="round"
hat="beanie"
eyebrows={true}
blush={true}
/>
| Prop | Type | Default | Description |
|---|---|---|---|
name |
string |
required | Seed for generation |
size |
number |
128 |
Avatar size (px) |
variant |
string |
"auto" |
Style: band, crescent, wave, etc. |
headShape |
string |
"circle" |
circle or square |
eyeShape |
string |
"random" |
circle, wink, sleepy, etc. |
mouthShape |
string |
"random" |
smile, frown, open, etc. |
glasses |
string |
"random" |
none, round, square |
hat |
string |
"random" |
none, beanie, cap |
colors |
string | array |
"random" |
Character colors |
bg |
string | array |
"random" |
Background colors |
Full API: See all props in playground
How It Works
PixelPeeps uses deterministic hashing (CYRB128) to ensure identical avatars from the same input:
Input Name → Hash → Deterministic RNG → Avatar Features → SVG
Same name = Same avatar, every time. Perfect for user profiles!
Contributions welcome! Fork, create a branch, commit changes, and open a PR.
git clone https://github.com/TheCHARITH/PixelPeeps.git
npm install
npm run dev
MIT © Charith Pramodya
🚀 Try Playground • 📦 View onnpm • ⭐ Star on GitHub
Made with 
and too much 
by TheCHARITH