Documentation
Everything you need to get started
Quick Start
jsximport { PixelPerson, PixelCrowd } from 'pixelpeople';
// One random person
<PixelPerson />
// A crowd of 12 random people
<PixelCrowd count={12} />
// A soccer team — same red shirt, everything else random
<PixelCrowd count={11} shirt="#FF0000" pants="white" size={48} />
<PixelPerson />
Renders a single pixel art person as inline SVG
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 32 | Rendered height in px. Width scales proportionally. |
| hair | string | Random | Any CSS color. |
| shirt | string | Random | Any CSS color. |
| pants | string | Random | Any CSS color. |
| shoes | string | Random | Any CSS color. |
| tone | 1-5 | string | Random | Skin tone preset or any CSS color. |
<PixelCrowd />
Renders a crowd of pixel people side by side
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | Required | Number of people to render. |
| size | number | 32 | Size of each person. |
| gap | number | 4 | Spacing between people in px. |
| hair | string | Random/person | Set to apply to all. |
| shirt | string | Random/person | Set to apply to all. |
| pants | string | Random/person | Set to apply to all. |
| shoes | string | Random/person | Set to apply to all. |
| tone | 1-5 | string | Random/person | Set to apply to all. |
Skin Tone Presets
Showcase
See what you can build
One Person
<PixelPerson />
Customize Colors
<PixelPerson hair="#FF69B4" shirt="#0F3460" />
Skin Tones
<PixelPerson tone={1} /> ... tone={5}
Scalable
SVG scales perfectly at any size
The Crowd
<PixelCrowd count={40} size={48} />
Infinite Possibilities
Hand-picked color combos