Avatar
Flat by default for nested UIs. Use default variant sparingly when the avatar is standalone.
Elevation
Three elevation levels for different contexts. Avatar is a small component, so strong shadow + lift is not available.
Default
Medium shadow. For standalone profile heroes.
Outlined
Border only, no shadow. Most common use for general UIs.
Flat
No shadow. For nesting inside elevated containers.
Sizes
Small
Default
Large
Extra Large
Animated Entrance
Avatars appear with a spring animation on load.
Special Hover Effects
Scale
Rotate
Ring
Colorize
Brighten
Circular Avatars
Add rounded-full for classic circular profiles.
Default
Outlined
Flat
Status Indicators
Online
Busy
Away
Offline
Verified
With Badges
Notifications
Premium
Featured
Avatar Groups
Overlapping Stack
With Add Button
Team Members
5 team members
Working on this project
Fallback States
Colored fallbacks for when images fail to load or aren't provided.
User Card Examples
Sarah Miller
5 min agoThis looks amazing! Love the paper-cut aesthetic you've created here.
James Wilson
Wants to connect