Avatar

User avatar with support for images, initials, or fallback icon.

Sizes

Avatar in different sizes

JD
JD
JD

With Image

Avatar displaying an image

User avatar
User avatar
User avatar

Initials

Avatar with initials from name

J
JD
JS

Fallback Icon

Avatar with different fallback icons

person
group
business
PropTypeDefaultDescription
srcstringundefinedImage source URL
altstringundefinedAlt text for the image
namestringundefinedName to generate initials from (used as fallback)
size'small' | 'medium' | 'large''medium'Size of the avatar
fallbackIconstring'person'Fallback icon name (Material Symbols)

check_circleWhen to use

  • Use to represent users in profiles, comments, and lists
  • Provide a name for initials fallback when image may fail
  • Use consistent sizes across similar UI elements

cancelWhen not to use

  • Don't use for non-user imagery (use Image component instead)
  • Don't use oversized avatars in compact layouts
  • Don't mix different avatar sizes in the same context