Neo-Brutal Avatar
Photo or initials in an ink-outlined circle; the initials (display face, bold) sit on a volt, lilac, tomato or cobalt-100 tint picked from the name, behind the photo, so a broken image still reads.
Avatar
Photo or initials on a square tile; the initials' look (ink, haze or outline, never lime: lime means selected) is picked from the name, or set with the kit look prop, and they sit behind the photo so a broken image still reads.
Live, interactive React component · light themeResponsive
About the Swiss Tech Mono Avatar
Photo or initials on a square tile; the initials' look (ink, haze or outline, never lime: lime means selected) is picked from the name, or set with the kit look prop, and they sit behind the photo so a broken image still reads. AvatarGroup sets the tiles side by side with a 3 px gap, the first one lime and the rest ink and outline (one lime square per group), and ends with "+N".
It is part of Swiss Tech Mono. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
Noir Aurora Avatar
Photo or initials in a circle; the initials sit on a night tint picked from the name, lit from the top left with a ring in that tint's sky colour, and behind the photo so a broken image still reads.
Soft Bento Avatar
Photo or initials in a clay circle; the initials' candy tint is picked from the name, and they sit behind the photo so a broken image still reads.