Avatar

User profile picture components with shapes, sizes, states and groups

1. Avatar with Shadow
Depth effect using layered box-shadows
SC
48px
MJ
56px
PN
64px
DK
80px

Coloured glow shadow variants:

2. Avatar with Subtle Color
Soft background tints derived from the accent palette
SC
Blue
MJ
Green
PN
Red
DK
Amber
ER
Purple
TN
Sky
SC
Pink
MJ
Slate

Rounded square variants:

SC
MJ
PN
DK
3. Avatar with Text
Paired with name, role, and additional metadata
SC
Sarah Chen
UX Designer
MJ
Marcus J.
Backend Dev
PN
Priya Nair
Product Mgr
DK
David Kim
Data Analyst
ER
Emily R.
HR Specialist
TN
Tom Nakamura
DevOps
SC
Sarah Chen
UX Designer
MJ
Marcus J.
Backend Dev
PN
Priya Nair
Product Mgr
4. Avatar with Status
Real-time presence indicators — online, busy, away, offline
SC
Online
MJ
Busy
PN
Away
DK
Offline
ER
Online
TN
Busy

Status label row:

SC
Sarah Chen
Online
MJ
Marcus J.
Busy
PN
Priya Nair
Away
DK
David Kim
Offline
ER
Emily R.
Online
TN
Tom Nakamura
Busy
5. Avatar Group
Stacked group with overflow count

Default stacked (5 visible):

SC
MJ
PN
DK
ER
+12
17 team members

Bordered group (large):

SC
MJ
PN
DK
+9
Engineering Team
6. Avatar Sizes
All supported size variants — xs to 2xl
SC
xs
MJ
sm
PN
md
DK
lg
ER
xl
TN
2xl