An avatar is a round or square element used to display images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.

Usage

• Use a round avatar to represent a user or profile within table view cells, collection views, or cards.
• Use a round avatar to display user initials or generic icons.
• Use an indicator on the avatar to display a status, for example.
• Use a square avatar (also called thumbnail) to display an image of an object, such as a product within table view cells, collection views, or cards.
• Use a square avatar (also called thumbnail) to display an icon or a photo of an object.

• Don’t use a round avatar to display an image of an object, such as a product.
• Don’t use a square avatar to represent a user or profile.
• Don’t use the avatar for interactive icons. Instead, use a button with an icon inside.

Anatomy

A. Avatar

The avatar is a round container that contains a profile image, an icon, or initials.

B. Thumbnail

The thumbnail is a square container that contains a business-related image, such as a product or an icon.

C. Avatar with Indicator

An optional indicator can be placed in the bottom right corner on top of the avatar to display a status, for example.

D. Avatar Stack

Multiple avatars can be grouped horizontally in an avatar stack. To avoid clutter, we recommend displaying no more than six avatars. The sixth avatar can indicate the number of additional avatars.

The avatar stack only supports round avatars with a size of 16pt.

E. Avatar Stack with Leading Label

An optional label can be displayed in front of the avatar stack to provide descriptive information.

F. Avatar Stack with Trailing Label

An optional label can be displayed after the avatar stack to provide descriptive information. Avoid using both the leading and trailing labels together.

Behavior and Interaction

Since an avatar is typically part of a specific component, such as a card or collection view, it is not interactive and serves a decorative or informational purpose.

By default, the label of the avatar stack is truncated after one line. However, truncation can be disabled, allowing the text to wrap across multiple lines.

Variations

Depending on the context, the avatar can be round or rectangular and display either an image, icons, or initials. It is up to you to choose the appropriate avatar variant for your app. 

Avatar stacks can only display round avatars with a size of 16pt.

Resources

Development: FUIImageView, groupedAvatarsViews

SAP Fiori for Web: Avatar

Related Components/Patterns: Object Cell