Avatars are used to show a thumbnail of a user photo, organisation or a visual representation of other types of content.


By default, avatars are used to display an image complemented by an accessibility label.

When the image for the avatar is not available for display, you can use initials fallback.

Another type of fallback that can be used when you don't have an image for the Avatar is to use an icon. This approach works well for styling sections of content when you need to make content recognizable.


Avatar comes in 4 sizes: smaller, small, medium (default) and large.


Avatar can represented as a square shape with a squared property when you need to adapt it to the format of the content.


When using Avatar with initials or an icon, you can assign a color to its background.


Avatar component requires an ariaLabel property to be used to make it accessible for assistive technologies.


srcstring-falseImage src
initialsstring-falseFallback initials when image is not available
sizesmaller, small, medium, largemediumfalse
colorpositive, critical-falseBackground color
squaredboolean-falseShape of the avatar
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element