Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.
When to use
- When visual identification for a user or entity is optimal or required.
When not to use
- Avoid clustering Avatars together in a disorganized group. Instead, use Avatar Stack to display multiple Avatars.
- Don’t display an Avatar that is broken or has no content. The default fallback initials (for users) or icon (for entities) should be displayed when customized images are unavailable.
Best practices
Use the pre-defined shapes for a user or entity.
Don't change the shape.
Use the pre-defined color palette for backgrounds.
Don't change the text color or use a background color outside the pre-defined colour palette.
Use the pre-defined sizes for a user or entity.
Don't create new, bespoke Avatar sizes.
The user Avatar shows initials or a custom image.
Don't show a user Avatar with an icon.
Avoid lining up or grouping large numbers of Avatars where space is limited.