🎨 PixelPeeps

Generate unique, deterministic pixel-style avatars from any name

Installation

npm install pixelpeeps

Quick Start

import Avatar from 'pixelpeeps';

function UserProfile() {
  return <Avatar name="[email protected]" size={128} />;
}

Features

• 🎯 Deterministic - Same input always generates the same avatar
• 🎨 13 Style Variants - Band, Crescent, Half, Wave, Split, and more
• 🌈 Beautiful Palettes - 100+ built-in color combinations
• ⚡ Zero Dependencies - Lightweight and fast
• 📱 Perfect Scaling - Crisp SVG output at any size

Basic Usage

// Simple usage
<Avatar name="[email protected]" />

// Custom styling
<Avatar 
  name="Ada Lovelace"
  size={180}
  colors={["#06b6a4", "#73a9ff"]}
  variant="crescent"
  headShape="circle"
  pixelSize={8}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | required | Seed for avatar generation | | size | number | 128 | Avatar size in pixels | | colors | string \| string[] | "random" | Character colors | | bg | string \| string[] | "random" | Background colors | | variant | string | "auto" | Style variant | | headShape | "circle" \| "square" | "circle" | Head shape | | pixelSize | number | 12 | Background pixel size | | mirrored | boolean | true | Mirror background pattern |

Variants

• plain, band, crescent, half, split
• swoop, diagonal, cap, ring, corner
• arc, wave, auto (random)

Live Demo

pixelpeeps.thecharith.com

Try the interactive playground to experiment with all options!

Why PixelPeeps?

Perfect for user profiles, comment systems, team avatars, and anywhere you need consistent, friendly avatars. Same input = same output, every time.

License

MIT © Charith Pramodya