A mark for anything with a name
Projects, workspaces and accounts have a name long before they have a logo. The pixel avatar draws a small character and picks one of 6 inks from that name alone, so the same name is always the same character and nothing has to be designed, uploaded or stored.
Type a name
The name is the only input. Change a letter and a different character answers; type the old name back and the first one returns.
In a list
6 inks cannot keep 12 names apart on their own, so a list spreads them: each character keeps its own ink where it can, and never follows its own colour or the hue beside it.
Sizes
The four sizes are steps of the icon scale, so a character sits in any seat an icon does and lines up with the glyphs around it.
Tile
The tile seats the character on a wash of its own ink, for a larger mark that stands alone: a page header, a card, a picker.
Beside its name
Next to the name it was drawn from, the character is decoration and stays out of the accessibility tree. On its own it needs a label, which makes it an image with that name. The app sidebar offers it as an option on any row, and the thread panel draws it as every project’s default mark. Both spread the inks across their rows, so neighbours in a list differ in colour as well as shape.
// From the npm package
import { PixelAvatar } from 'rift-ds/components/PixelAvatar/PixelAvatar';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/pixel-avatar.json