The Avatar component represents users or entities using visual identifiers such as icons, initials, or images.
It ensures consistency across the interface and supports various states, color variants, and contextual information like user roles or availability.
Avatars are typically used in headers, navigation bars, profile cards, chat interfaces, and user lists.
- 1.Base shape: defines the visual form of the avatar.
- 2.Content area: displays the main visual content.
- 3.Status indicator (Optional): a small color light that communicates user presence or status.
- 4.Label & sublabel (Optional): textual information placed next to or below the avatar, providing context such as name, role, or email.
The Avatar component is designed to be highly versatile, adapting to a wide range of use cases and interface needs.
Through its different shapes, content types, sizes, and color options, it can seamlessly represent users, teams, or entities across various contexts, from compact tables to rich profile sections.
Each variant ensures visual consistency while providing the flexibility to match the tone and hierarchy of the experience.
- 1.Round: the default option, best for personal profiles and chat contexts.
- 2.Square: ideal for products, organizations, or abstract entities.
- 1.Default icon: generic placeholder when no data is available.
- 2.Custom icon: allows brand-specific or role-specific icons.
- 3.Initials: displays user initials.
- 4.Image: uses a user or entity photo.
If an image or custom icon fails to load, a fallback (initials or default icon) is automatically displayed.
By default, the first avatar uses the primary brand color as its background. However, the component supports multiple color variants, which is especially useful when differentiating between several avatars displayed together on screen, such as in team lists, conversation threads, or collaborative views.
The Avatar component is available in six size variants, each designed to fit specific interface contexts, from compact data tables to prominent profile headers. Choosing the right size ensures that avatars maintain visual balance and hierarchy across different layouts and use cases.
| Variant | Size (px) | Typical usage |
|---|---|---|
| xsmall | 24px | Tables, dense lists. |
| small | 32px | Headers, compact cards. |
| medium | 40px | Sidenav bars, user previews, chat threads. |
| large | 56px | Medium cards, profile sections... |
| xlarge | 72px | Modals, profile headers, featured content. |
| xxlarge | 80px | Large cards or highlight sections. |
- Use avatars to support recognition, not decoration: Place avatars where they help users identify people, entities, or actions (such as in chat lists, comments, or team overviews) rather than as purely decorative elements.
- Keep visual hierarchy clear: Use avatar sizes consistently according to layout importance (e.g., small in lists, large in profile headers). Avoid mixing different sizes in the same view unless contextually justified.
- Maintain alignment and spacing: Ensure consistent padding and alignment between avatars, labels, and sublabels to preserve visual rhythm and readability.
- Show status indicators only when relevant: Use status lights to communicate meaningful information (e.g., online/offline) and avoid visual clutter in contexts where status is not needed.
- Use color purposefully: Choose avatar background colors that align with brand or semantic meaning, and avoid overusing color variants within a single view.