Displaying the full name of a person in an interface can take up way more space than needed and can disrupt rhythm. Use avatars in place of a user’s name (but include the name in content readable by assistive technology).
Fixed sizes are available to provide consistency across layouts.
|Extra small||24 px|
|Extra large||96 px|
When part of the page hierarchy, give the avatar a visual boost by adding a shadow.
Sometimes you need to dress up an avatar with a little bling. Common examples would be an online/offline indicator or a descriptive icon.
To display a horizontal row of avatars, use the stacked avatar component.
Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.
The following table lists the theme properties used to style this component and any variations as well as a sample value.
A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.
Examples of each theme property may be referenced by clicking a property name in the “property” column.