Avatar Group

Overlapping avatars with an overflow count — a compact way to show several people at once.

Install

Examples

Sizes

The group size applies to every child avatar.

Overflow count

Set max to cap visible avatars; the remainder collapse into a “+N” chip. Click the chip to open a dropdown of the hidden people — each row shows their avatar and name (read from each avatar’s alt).

Guidelines

Usage

team rosters, shared-document viewers, multi-user presence, and collaborator lists.

Do

  • Give every avatar a meaningful alt — the names drive the overflow dropdown.
  • Set max so the row stays compact in its container.
  • Keep the group size consistent with the surrounding UI density.

Don’t

  • Don’t show a long unbroken row — cap it with max and let the rest overflow.
  • Don’t rely on the photos alone to identify people; surface names in the overflow menu.
  • Don’t use it for a single person — use Avatar.

Accessibility

Properties

Related