Avatar
Avatar
Section titled “Avatar”Avatars represent users or entities with images or initials. Common in SaaS dashboards for team members, assignees, and profile menus.
Variants
Section titled “Variants”| Variant | Description |
|---|---|
| Image | User photo, fallback to initials |
| Initials | Generated from name (e.g., “KN” for Kien Nguyen) |
| Icon | Generic user icon for unknown users |
| Size | Dimensions | Use |
|---|---|---|
| xs | 24px | Table cells, inline |
| sm | 32px | Lists, comments |
| md | 40px | Navbar, cards |
| lg | 56px | Profile header |
| xl | 80px | Settings, large displays |
Avatar Group
Section titled “Avatar Group”Stack multiple avatars with overlap for team displays:
- Max visible: 4–5 avatars
- Overflow: “+N” indicator for remaining
- Hover: Full avatar list in tooltip
Best Practices
Section titled “Best Practices”- Consistent fallback — generate consistent colors from name hash
- Alt text — always provide accessible name
- Lazy load — defer image loading for long lists