Skip to main content
Pricing

Avatar Stack

Free

A horizontal group of overlapping avatars showing multiple users compactly. Displays a limited number of avatars with a "+N" overflow indicator when the group exceeds the visible limit. Used for showing team members, collaborators, or participants without taking up excessive space.

4 variants

JB
AP
MK
SC
+3

Variants

VariantDescriptionWhen to use
DefaultStandard overlapping avatar stack with +N overflow.Use to show a group of users in a compact layout — team members, assignees, participants.
With Count

Usage Guidelines

Do

Limit visible avatars to 3–5 and show "+N" for the rest.

Don't

Show more than 5 visible avatars — the overlap becomes unreadable.

Do

Order avatars consistently — most recently active first or alphabetical.

Don't

Use different avatar sizes within the same stack.

Do

Provide a group-level aria-label like "Team members: Jane, John, and 3 others".

Don't

Omit the +N indicator when there are hidden members.

Do

Use consistent avatar sizes within the stack.

Don't

Overlap avatars so much that they become unrecognisable.

Code

HTML
<div class="lex-avatar-stack" aria-label="Team members: Jane, John, Sarah, and 3 others">
  <div class="lex-avatar lex-avatar--sm">
    <img src="/avatars/jane.jpg" alt="Jane Doe" class="lex-avatar__image" />
  </div>
  <div class="lex-avatar lex-avatar--sm">
    <img src="/avatars/john.jpg" alt="John Smith" class="lex-avatar__image" />
  </div>
  <div class="lex-avatar lex-avatar--sm">
    <img src="/avatars/sarah.jpg" alt="Sarah Lee" class="lex-avatar__image" />
  </div>
  <div class="lex-avatar-stack__overflow">
    <span>+3</span>
  </div>
</div>
CSS Custom Properties
.lex-avatar-stack {
  display: inline-flex;
  align-items: center;
}

.lex-avatar-stack > .lex-avatar {
  margin-left: var(--lex-avatar-stack-overlap, -8px);
  border: 2px solid var(--lex-avatar-stack-ring, var(--lex-bg-surface));
  box-sizing: content-box;
}

.lex-avatar-stack > .lex-avatar:first-child {
  margin-left: 0;
}

.lex-avatar-stack__overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lex-avatar-size-sm, 32px);
  height: var(--lex-avatar-size-sm, 32px);
  border-radius: 50%;
  background: var(--lex-avatar-stack-overflow-bg, var(--lex-bg-surface-subtle));
  color: var(--lex-avatar-stack-overflow-text, var(--lex-text-secondary));
  font-size: var(--lex-avatar-stack-overflow-font, 12px);
  font-weight: 600;
  margin-left: var(--lex-avatar-stack-overlap, -8px);
  border: 2px solid var(--lex-avatar-stack-ring, var(--lex-bg-surface));
  box-sizing: content-box;
}
React
// Using Lexicon CSS classes with React

export function TeamMembers({ members }: { members: User[] }) {
  return (
    <AvatarStack
      max={3}
      size="sm"
      aria-label={`Team members: ${members.map(m => m.name).join(', ')}`}
    >
      {members.map(member => (
        <Avatar
          key={member.id}
          src={member.avatar}
          alt={member.name}
          fallback={member.initials}
        />
      ))}
    </AvatarStack>
  );
}

Design Tokens

TokenValue (dark)Value (light)CSS property
--lex-avatar-size——size
--lex-avatar-stack-overlap——overlap
--lex-avatar-stack-border——border

Accessibility

  • The stack container needs aria-label listing all members, including hidden ones.
  • Individual avatars within the stack still need alt text.
  • The +N overflow indicator should be included in the group aria-label.
  • If the stack is clickable (e.g., to open a member list), it must be keyboard focusable.

Keyboard Interactions

N/AAvatar stacks are not focusable unless interactive. If clickable, standard button keyboard behaviour applies.