Avatars are used to enable users to quickly identify an object, whether that be a specific user, account, or other entity.

Avatars are always paired with additional information, such as a user's name, for better clarity. If possible, use an image or logo over initials.

The consistent dimensions of an avatar ensure that readability and scanability of content surrounding the avatar is not compromised. For example, when scanning a data table column that contains an avatar of a company’s logo and the company name, the company name stays aligned from one row to the next.

Avatars are not the only components that provide visual representation. When applicable, use these over Avatars:

• Use Icons when representing objects, actions, programs, or other communicative symbols.
• Use an image when the context of the visual does not need to have equal height and width to maintain alignment of its surrounding content.

Avatars can be displayed as an image, initials, or a logo. They come in three different sizes:

The container of an avatar can be circular or a rounded square based on the use case.

• Use a circular avatar when representing a person by an image or their initials.
• Use a rounded square avatar when representing a company’s or entity’s logo. This can be achieved by applying round='medium' to the Avatar.
• Always round the edges of a square container when using an avatar.

Inform users of assistive technologies what the avatar represents by including an a11yTitle. This text will be read out by a screen reader when the user reaches the avatar.

If the avatar acts as a button, the a11yTitle should also inform the user of what action will occur if clicked.

When possible, provide both a light and dark mode version of a company logo. If a dark mode version of the logo is not available, apply background={{ color: ‘background’, dark: false }} to the avatar.

Avatars are not always necessary when presenting a company logo, and in some cases an image is an appropriate choice. For example, when presenting a company’s logo within a grid of cards, an image can be used so that only the height is fixed and the width can grow to fit the logo’s proportions.

In this case, the variable width of the logo does not affect the alignment of text from one card to the next.

Avatars are always used over images within DataTables to maintain visual alignment with paired content. Use size=small avatars in DataTables.

When using avatars in a DataTable, always accompany the avatar with another piece of identifying information such as the user or company's name or email. If an image is not available provide an avatar with initials instead. Use avatar with size=small in DataTables.

When applicable, an avatar is aligned to the left of the title within a PageHeader. Use large-sized avatars within PageHeaders.