Avatars
Sizes, status indicators, rings, groups with overflow, and shapes — all powered by deterministic gradients.
Sizes
Five standard sizes from xs (24px) to xl (64px)
AC
xsAC
smAC
mdAC
lgAC
xlInitials
Deterministic gradient background per name
AC
AriaMP
MayaJL
JordanSR
SamTP
TheoNO
NinaWith Ring
White/dark ring for stacking and emphasis
AC
AC
AC
AC
AC
On tinted background
MP
JL
SR
Status Indicator
Online, away, busy, offline — corner dot
AC
AC
AC
AC
AC
Aria Chen
Online
MP
Maya Patel
Do not disturb
JL
Jordan Lee
Away
SR
Sam Rivera
Online
Avatar Group
Stacked with +N overflow indicator
max = 3 (8 users)
AC
MP
JL
+5
max = 5 (8 users)
AC
MP
JL
SR
TP
+3
max = 4, large size
AC
MP
JL
SR
+4
AC
MP
JL
SR
+4
Design team
8 members · 4 online
Shapes
Round (default) and square via className override
AC
RoundAC
Rounded squareAC
Softer squareAC
SquareAC
AriaMP
MayaJL
JordanSR
Sam