Avatar Group

A row of overlapping avatars that shows who is involved — members, assignees, viewers — and folds the rest into a "+N" count at the end.

Preview

Visible

345

Size

mediumsmall

Maya ChenOmar HaddadLina ParkTheo Martin+4

When to use

• On cards, rows and headers, to show a set of people in the space of one or two avatars.
• Where the faces matter more than the exact list, which can open on click.

Reach for something else

• Where space is very tight or the count is the point: that is an Avatar Compact Group.

Anatomy

1. 1

   Avatars

   Each overlaps the previous one, with a white ring to separate them.

2. 2

   Overflow count

   A last circle reading +N for the people not shown.

States

Accessibility

• The group is a list, or carries an aria-label such as "8 members", so the total is announced once.
• Each avatar names its person; the overflow count reads as "and 5 more", not "+5".
• If the count opens a list, it is a <button> with aria-expanded.

Source

The Avatar Group is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.

See it in a block