Avatar group

The Avatar group is a collection of Avatars stacked one over the other to cover cases where more than one avatar needs to be displayed.

Component checklist


Up to date


Up to date


For cases when more than one avatar is needed, Soul defines an Avata group. Avatar group is a horizontal stack of Avatar with a 1px border to separate them. Each avatar contains a hover interaction to populate a tooltip with information about the user or profile.

Avatar group
Avatar group - tooltip



We display a maximum of up to five avatars at a time. If there are six or more, we use a numbered avatar to represent the additional ones. For more information, see the documentation on overflow.

On hover of that number, the rest of the hidden elements are displayed in a tooltip.

Avatar group - Overflow
Avatar group - Overflow tooltip



Avatar group can be displayed in five different sizes. The size should be responsibly chosen by context and space. As a default size, Soul defines Medium.

Avatar group - Sizes