Figma
Component Status
Up to date
Status
Stable
HTML
Up to date
React
Up to date
Design Usage
An Avatar represents a user or entity visually, typically using a profile picture, icon, or initials. It helps identify people, organisations, or accounts in interfaces like headers, lists, or comments.
When to Use
- To represent a user profile in navigation bars, cards, or lists.
- As part of a comment, message, or activity feed to show who is involved.
- To display an entity icon (organisation, group, team) when an image isn’t available.
- When quick visual identification improves scanning.
When Not to Use
- For decorative images with no semantic meaning – use image or Icon instead.
- As a replacement for user’s full name – always pair Avatar with a text label in most contexts.
- For complex representations (e.g., badges, roles, or statuses) – consider combining Avatar with Tag, Tooltip, or some form of status indicator.
Best Practices
There are general recommendations which doesn’t have to be tightly coupled to our implementation. If you find that some features are missing, please contact the Spirit team.
- Always provide a fallback:
- Image if available.
- Initials if no image.
- Generic icon if neither is available.
- Ensure consistent sizing across the product – don’t mix too many sizes in one context.
- Use circle or square shapes consistently as defined in Spirit.
- Place Avatars next to the associated name or content for clarity.
- Avoid using Avatars as the only identifying element – always provide accompanying text for accessibility and clarity.