Overview
Foundations
Brand
Colors
Typography
Spacing & Layout
Semantic Tokens
Icons
Shadows
Components
Patterns
Design System
Avatar
Avatars represent users with their initials in a circular badge. They provide visual identity and improve recognition throughout the interface.
Basic Usage
Sizes
Avatars come in three sizes to accommodate different UI contexts.
MD
32×32px
LG
40×40px
XL
56×56px
Examples
In a list
John Doe
john@example.com
Alice Brown
alice@example.com
Mike Kim
mike@example.com
Avatar group
Theming
Customize avatar appearance using these design tokens.
Token
Value
Usage
avatar.bg
Primary 100 / Primary 700
Background color
avatar.text
Primary 700 / Primary 100
Text color
borderRadius
50%
Circular shape
fontWeight
500 (Medium)
Text weight
Best Practices
Do
✓ Use 2 characters for initials (first + last name)
✓ Maintain consistent size within the same context
✓ Use MD size for compact spaces (tables, lists)
✓ Include aria-label for accessibility
Don't
✗ Don't use more than 2 characters
✗ Don't mix different sizes in the same row
✗ Don't use special characters or numbers
✗ Don't use lowercase letters
Accessibility
WCAG AA Compliant
Avatar colors meet WCAG AA contrast requirements for normal text.
Screen Reader Support
Always include aria-label with the user's full name for screen readers.
Keyboard Navigation
When avatars are interactive, ensure they are focusable and have visible focus states.