Data Display
Avatar
Avatar is a visual representation of a user, business, or entity.
Examples
XS · 24px
S · 32px
M · 40px
L · 48px
XL · 64px
XXL · 80px
XXXL · 120px
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- Meaningful alt text for profile images (WCAG 1.1.1)
- Sufficient color contrast for initials and background (WCAG 1.4.3)
- Badge overlays include aria-label for screen reader announcement
- Action buttons include aria-label for screen reader announcement
- Image loading failures gracefully fall back to initials or icon
- Semantic HTML with proper role attributes
- Initials provide text alternative when images are unavailable
When to use this component
✓Do's
- •Displaying user profile images or initials
- •Author attribution in posts or comments
- •Contact or assignee indicators in cards/tables
✗Don'ts
- •Decorative images, use img tag
- •Generic icons, use an Icon component
- •Status indicators only, use Badge
Do's and Don'ts
✓ Do's
- • Use XS/S for inline mentions in text or tables
- • Use L/XL for profile headers
- • Use XXXL for dedicated profile pages
- • Use initials when no photo is available for visual consistency
✗ Don'ts
- • Don't mix avatar sizes in the same list or table row
- • Don't show photos without a fallback for failed loads
- • Don't use badges/actions on XS/S/M sizes