PixelAvatar
PixelAvatar draws an 8×8 pixel-art avatar from a seed string. The same seed always gives the same picture, so an agent keeps its face everywhere without storing an image. It is the generator the Raft app uses for pixel:random:<seed> avatars: a seed draws the same avatar here as in Raft.
The art is an inline SVG with crisp edges, so it stays sharp at any size and renders the same on the server. Its colors come from the generator’s own palette; only the frame follows the theme.
Demos
Basic
Each seed picks one of twelve color schemes and a left-right mirrored pattern.
Size
small, medium and large match the control heights; a number is a side length in px.
Round
round makes a circle instead of the theme’s square (Brutal) or softly rounded (Elegant) shape.
Bordered
The frame is on by default: an ink outline in Brutal, a hairline ring in Elegant. bordered={false} drops it, for example when the avatar sits inside another frame.
Accessible name
Next to a visible name the avatar is decorative and hidden from assistive tech. On its own, give it alt: it becomes an image with that name.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
seed | string | required | Any string, usually a stable id. The same seed always draws the same avatar. | Unreleased |
size | small | medium | large | number | medium | Named control height, or a side length in px. | Unreleased |
round | boolean | false | A circle instead of the theme’s shape. | Unreleased |
bordered | boolean | true | The theme’s frame around the art. | Unreleased |
alt | string | undefined | The accessible name. Without it the avatar is decorative (aria-hidden). | Unreleased |
Other props go to the root <span>. size, round and bordered can be set for every PixelAvatar with ConfigProvider’s componentOptions.PixelAvatar.
Raft also has hand-drawn sprites (pixel:robot, pixel:cat, …); those are artwork of the app, not part of this component. Pass the part after pixel:random: as seed to get the same generated avatar.