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 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.
Live, interactive React component · light themeResponsive
About the 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. AvatarGroup overlaps avatars, cycles the tints in order (peach, mint, lilac, butter) so neighbours always differ, and ends with "+N".
It is part of Soft Bento. 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.
See it on a full page
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.
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.