Intro

The avatar group displays a number of avatars, which act as a digital representation of a user. This control is useful for visualizing a team, project team members, or a group of employees, for example.

Avatar group

When to Use

Use the avatar group if:

You want to display a group of at least 2 people.
You want to display several people who have something in common (for example, people who are in the same team, project, or company).

Don't

Don’t use the avatar group if:

You want to display a gallery for simple images. Use the carousel instead.
You want to display a single avatar.
You want to show visual content other than avatars.

Anatomy

Anatomy of an avatar group (type: group)

Anatomy of an avatar group (type: individual)

Avatar group (type: group or individual)
Overflow button
Avatar

Types

There are two types of avatar groups: group or individual.

Group Type – Focus on the Sum of People

The group type displays overlapping avatars. Use this type if it’s important to display the sum of people at first sight, rather than the individuals. Examples for the group type include overviews in cards and organization charts, as well as cases where you need to display a large number of people (100+).

This is the default type.

Variants for the group type (user's image, initials, placeholders)

Individual Type – Focus on Each Person

The avatars are displayed next to each other and don’t overlap. Use this type if each person is as important as the group as a whole, and the user’s main focus is to get more information about some individuals in the group. The user can find out more about a person by interacting with the avatar to access secondary information, such as a business card.

This type is useful for a smaller group of avatars, such as a project team or teams in a line organization.

Variants for the individual type (user's image, initials, placeholders)

guideline

For both types, always provide a distinct description, such as a label.

Components

Avatars

The avatar group consists of at least two avatars and can display as many avatars as you need.

Order

You can set the order of the avatars in the group freely. For example, the order can be alphabetical, history-based, or random.

Avatar groups

guideline

Once you’ve decided on the order that best fits your use case, use it consistently within your app.

Content

The avatar group reuses the avatar control and its logic: if a person’s image is available, the avatar displays the image. If no image is available, it displays the person’s initials on a colored background. If there are more than 3 initials or the language system doesn’t support initials, the avatar displays a gender-neutral person icon. [external_only]You can also adapt this placeholder icon to meet your own requirements.[/external_only]

Size

The avatar group supports the different sizes of the avatar control.

guideline

Use size S as a default. If the avatar group is the main element in your app, consider using a bigger size such as M or L to better support the user.

Overflow Button

If an avatar group has too many members to display, an overflow button is displayed at the end of the group.

Overflow button with 8 "overflowed" avatars

When users interact with the overflow shape, they expect information about the “overflowed” avatars. By default, an overview of all “overflowed” avatars is displayed directly in a popover. Adapt the content in the popover to your individual app needs.

Minimum and recommended (with context-specific information) versions of overflow popover

guideline

If the group contains less than 100 avatars, ensure that all overflowed avatars are visible in the popover. This is the minimum visualization for overflowed avatars.
Recommended: Provide primary or secondary information in the overflow popover to offer additional value to the user. Carefully select which details should be primary and which should be secondary for display in the avatars, based on your user research findings.
If you have more than 100 “overflowed” avatars, we recommend navigating to another page that displays all avatars properly. For example, you can display them in a grid list together with primary or even secondary information. Ensure that the avatars in the list display in the same order as in the avatar group control on the page before.

Behavior and Interaction

The group and individual types have different behavior and interactions.

Group Type

The group type is one big active area. In other words, the entire control is basically the active area. When the user interacts with the avatar group, an overview of all visible and “overflowed” avatars appears. You can display the full avatar group in an overflow popover, or on a details page.

Group type with overflow popover using the grid list control

guideline

[internal_only]If you display the avatar group on a card, always navigate to another page that displays primary or secondary information about the avatars in the group. Do not open a popover.[/internal_only]

Individual Type

Each avatar and the overflow button is individually interactive. When a user selects an avatar, a popover appears with more details about the person it represents. The content of the popover depends on what information needs to be shown about the person.

Possible content for a popover (the content depends on the specific use case)

When an avatar is in the overflow popover, the user should have the access to the same detailed information as for avatars displayed in the visible group outside the overflow. Choosing the avatar either triggers navigation within the popover or navigation to another page (for example, with a person’s profile).

Navigation within popover to avatar's details

guideline

To show the details for an avatar in the overflow popover, use the same method as you are using for avatars in the visible group (outside of the overflow popover).

Open Full List

You can add an optional Open Full List link to the overflow popover. The link should lead to a page that displays the full set people of the group. An example might be a page with a grid list and simple filtering options.

Popover with 'overflowed' avatars and 'Open Full List' link

Responsiveness

The avatar group is responsive. If there is not sufficient space to display all the avatars in a group, the overflow button appears and one or more avatars move into the overflow popover. The circular overflow button indicates the exact number of avatars that can’t be displayed on the screen. The size of the overflow button supports up to 3 symbols before truncation.