Avatar stack
A compact row of overlapping profile pictures that shows group members, with a '+N' circle for everyone who does not fit.
See it
What it is
An avatar stack is a compact row of overlapping profile pictures that shows who belongs to a group or is present in a document. When the group is larger than the available space, the last circle becomes an overflow count such as '+4'. Collaborative products such as Figma and Google Docs use this pattern to make active participants visible without spending a whole row on names. Facebook's old Facepile plugin gave the pattern one of its nicknames.
Use one for project members, collaborators, assignees, or recent participants when recognition matters more than a complete roster. Show only a stable handful, then let the overflow count open a named list. Initials or a neutral fallback should cover missing and broken images.
Gotcha: overlap must not erase identity or accessibility. Keep enough of each face visible, add a contrasting ring between images, and expose the full names in reading order rather than making a screen reader announce image filenames. Do not reveal private membership through photos or tooltips unless the viewer is allowed to see the roster.
Ask AI for it
Build an avatar stack that shows at most five people, followed by a button labelled '+N' for the remaining count. Render it as a semantic list, use 32px circular images with object-fit: cover, overlap each item with margin-inline-start: -8px, and add a 2px ring matching the page background so faces stay distinct. Preserve logical DOM order, provide useful alt text or visually hidden names, and fall back to initials when an image fails. Open the overflow roster in a Floating UI popover from the '+N' button, support keyboard navigation and Escape, and return focus to the button when it closes.