An avatar is a visual element used to display user profiles, initials, placeholders, icons, or business-related images, such as logos and product pictures.

Usage

Consider using round avatars to represent user profiles and square avatars for objects.

• Don’t use avatars as interactive icons. Instead, use an icon button.
• Don’t display more than one letter in an initial.

Anatomy

A. Avatar

The avatar is a round or square container that contains an image, an icon, or an initial. One alphabetical character is supported for an initial.

B. Badge (Optional)

An optional badge can be placed in the bottom right corner on top of the avatar to display a status.

C. Avatar Group

Multiple avatars can be grouped horizontally in an avatar group. To avoid clutter, we recommend displaying no more than six avatars. The last avatar can indicate the number of additional avatars when there are too many avatars to display.

The avatar group supports round avatars with a size of 16dp (default) or 24dp.

D. Label (Optional)

A short label can be displayed together with the avatar group to provide descriptive information.

Behavior and Interaction

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

Wrapping Behavior

The avatar group label should be short and concise. In cases where the label is longer than the allocated space, it wraps to a new line by default. As a nested component, the wrapping behavior can be overridden by the parent component. If the label gets truncated, the user should still be able to view the full label, for example, by navigating to a detail page or by displaying a tooltip on long press.

Variations

Size

The size of an avatar is customizable, preferably in increments of 8dp. The avatar group can display avatars with a size of 16dp or 24dp.

Shape

Depending on the context, the avatar can be round or square with rounded corners.

Color

By default, the avatar uses the SAP Fiori accent color palette. If required, the color theme can be customized or branded colors can be introduced.

Layout

Depending on the use case, one label can be placed before, after, below, or above the avatar group.

Resources

Development: Avatar, Avatar Stack

SAP Fiori for iOS: Avatars and Images 

SAP Fiori for Web: Avatar