Skip to main content
  • Guidelines
  • React API Reference
  • Blazor API Reference
Avatars are visual representations of users or entities, typically displayed as a profile image or, when unavailable, a fallback such as initials or an icon. They help users quickly identify people or objects in lists, comments, navigation, and more.

​
Guidance

AspectBest Practice
UsageUse avatars to represent users, teams, or entities. Always provide a fallback for missing images.
ContentUse clear, accessible alternate text for images. Fallbacks should be meaningful, such as initials or icons.
BehaviorShow the image if available; otherwise, display the fallback.
SizingChoose sizes appropriate for the context (e.g., small for lists, large for profiles).
FeedbackEnsure avatars load quickly and fallback gracefully if the image fails.
ExamplesUser profile pictures, team icons, entity representations in lists or cards.

​
Best Practices

  • Always Provide a Fallback: Ensure that if the image fails to load, a fallback (such as initials or an icon) is displayed.
  • Accessible Alternate Text: Use descriptive alt text for images to support screen readers.
  • Consistent Sizing: Use consistent avatar sizes within the same context for a harmonious UI.
  • Meaningful Fallbacks: Fallback content should be easily associated with the user or entity (e.g., initials, not just a generic icon).
  • Not for Decoration: Use avatars for representation, not for purely decorative images.

​
Do’s and Don’ts

Do

  • Use avatars to represent users or entities.
  • Provide a fallback for missing or broken images.
  • Use accessible and descriptive alternate text.
  • Keep avatar sizes consistent within a context.

Don't

  • Use avatars for decorative images only.
  • Omit fallback content.
  • Use ambiguous or missing alternate text.
  • Use inconsistent sizing for avatars in the same context.

​
Additional Guidance

  • Accessibility: Always provide alt text for images. Fallbacks should be meaningful and not empty.
  • Performance: Optimize avatar images for fast loading.
  • Visual Clarity: Ensure avatars are visually distinct and easy to recognize, especially in dense lists.
⌘I