AvatarGroup

AvatarGroup is used to both display a group of user avatars and, optionally, control actions related to the users group.

also known as Pinner reps, Personas, Facepile, User Images, Identification Group, Identicons

some variations of the AvatarGroup component

Usage guidelines

When to use
  • For the general display of groups of people, companies and/or brands in a limited space
  • In cases where an affordance for adding collaborators is needed
When not to use
  • To reflect a single person, company or brand within the product. Use Avatar instead

Best practices

example of AvatarGroup representing a profile with no image provided
Do

Use the default alternative if no image source is available. This should be the first character of the provided name.

example of graphics inside an avatargroup
Don't

Use alternative icons or graphics.

avatargroup representing people and organizations
Do

Use AvatarGroup when representing a group of people and/or organizations.

example of pins inside an avatargroup
Don't

Use AvatarGroup to represent metaphorical ideas, like multiple Boards or trends. Instead, consider an image or, if there's sufficient space, a Card.

Accessibility

Ensure AvatarGroup have labels describing both the data presented and the call to action in case of icon buttons.

People use Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size, to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and documentation about accessibility for iOS:

Accessible design on iOS

, Opens a new tab

Accessible development on iOS
, Opens a new tab

Design tokens

Anatomy

Variants

Sizes

AvatarGroup is available in 4 fixed height sizes, and displays up to 3 user avatars.

  1. XS (16px)
  2. SM (24px)
  3. MD (32px)
  4. LG (44px)


LG (44px)
This size displays up to 3 user avatars + an IconButton if AvatarGroup is interactive and user can add more collaborators. More users, if present, will be displayed as a numerical count.


  • Avatar
    , Opens a new tab

    Avatar is the ideal component in cases where only one person or brand needs to be displayed.
Edit page on GitHub