Avatar Group

A stack of avatars to represent a collection of users or entities in a compact way.

Usage

Avatar groups are ideal for representing teams, collaborators on a project, or members of a chat. The group handles overlapping and provides a count for additional members not shown.

Content

Stacked Group

Multiple avatars overlapping in a horizontal stack.

CNMLER
+5

Spec

  • Overlap: -12px horizontal offset for each subsequent avatar.
  • Border: Each avatar in the group has a 2px stroke matching the background.
  • Maximum Visible: Typically 3-5 avatars before showing a group count.

Anatomy

12
+x
Group containerAvatar itemCount indicator