Avatar Group
also known asavatar stack · user pile · people picker · collaborator stack
A row of slightly-overlapping circular avatars showing multiple people associated with an item, often with a +N overflow chip.
An avatar group is a horizontal cluster of 3–5 circular profile images that overlap by ~30%, with a final `+N` chip if more people exist beyond the visible avatars. Each avatar has a small border (usually matching the parent surface color) so the overlap creates a clean cutout silhouette.
The pattern signals collaboration, ownership, or attendance at a glance — it's everywhere in project management, calendar invites, document sharing, and team rosters. It's also where the typography-based avatar (initials on a colored background) thrives, because each gets a unique gradient that makes the group feel like a real team rather than identical placeholders.
Good avatar groups: 4 visible avatars max, `+N` chip uses the same size/shape, hovering an avatar reveals a tooltip with the full name, and the whole group is clickable to open a member list.
- Showing project / document collaborators
- Meeting attendees and calendar invites
- Comment threads (who's participating)
- Team rosters and assignment indicators
- Lists that need to identify each person clearly — show full names instead
- Single-user contexts — just show one avatar
- +Overlap avatars by ~30% with a 2px border in the parent surface color
- +Cap visible avatars at 4–5 and use a `+N` chip for overflow
- +Use generated gradient backgrounds for initial-only avatars
- +Wire each avatar to a tooltip with the full name
- −Don't show more than 5 avatars in the visible row — stack the rest
- −Don't use the same color for all initial-only avatars — looks like duplicates
- −Don't make the avatars too small to be recognizable (≤24px = unreadable)
People also ask
What size should avatars in a group be?
32–40px for default UI rows, 24–28px for compact lists, and 48–56px when the group is the focal element. Below 24px, faces and initials become unreadable.