Avatars
User profile pictures with multiple sizes, status indicators, and group layouts.
Avatar Sizes
Avatars come in four sizes: small, medium (default), large, and extra large.
Avatar with Image
Use an <img> tag inside the avatar for profile pictures.
Status Indicators
Add avatar-status with online, busy, or away modifiers to show user presence.
Avatar with Status
Avatar Groups
Use avatar-group to stack avatars with overlap.
Common Patterns
User Profile
Profile Header
Sarah Johnson
Product Designer
ProVerified
Comment Thread
Comment with Avatar
Alex Chen2 hours ago
This looks great! I really like the new design direction.
Team List
Best Practices
✓ Do
- Use consistent sizes across context
- Provide meaningful alt text for images
- Use initials for text-only avatars
- Keep avatar groups to 5-7 items max
✗ Don't
- Use low-quality or pixelated images
- Mix different shapes (circles/squares)
- Show too many in a group
- Use avatars for non-user content
Accessibility
Best Practices:- Always provide
alt text for image avatars - Use
aria-label to describe user status - Ensure sufficient color contrast for initials
- Don't rely solely on color for status (use icons too)
- Make clickable avatars keyboard accessible
