Skip to main content

Avatar

An avatar represents a unique entity, like a person or group.

Structure​

  • Image
  • Icon
  • Initials
  • Border (true/false)
  • Presence Icon: An icon to represent the current status of the employee (In, Out, Absent)
FB

Avatar

Guidelines​

When to use​

  • Use an avatar to consistently represent a person or group where the visual or semantic relationship provides context to the content it's in proximity to.

When not to use​

  • An avatar only represents a user or group. Consider an icon to visually represent interactive elements or other metaphors.

Variants​

Placeholder​

Placeholder

Initials only​
FB

Initials

Image​
FB

Image

Sizes​

  • The size of an avatar varies depending upon its context.
  • Available sizes (in pixels): 32, 48, 64, 80.
FB
FB
FB
FB

Example of avatar sizes

📱 Mobile considerations

Avatar sizes for mobile are: 24, 40, 64, 96dp.

If an avatar is to be made tappable on it's own, make sure to use 64dp variant. Otherwise, ensure the correct padding to using the 40dp variant to ensure the tappable area is at least 48dp.

Behaviour​

Single​

A standalone avatar without adjacent descriptive text must use a tooltip clarifying what it represents.

Avatar Groups​

A collection of avatars without labels can be grouped.

  • Use a badge after the last avatar to display the number of avatars that aren't visible. It can optionally be an action that leads a user to more context for all associated avatars. The badge and avatar sizes should be the same.
  • Use "+# more" to expand the group. Replace "#" with the number of avatars that aren't visible.
  • Use "- show less" to collapse the group.
AE
LG
GG
GG
+5

Avatar Grouping

Accessibility​

  • A standalone avatar image should use a descriptive alt tag where the content matches that of the avatar.
  • If an avatar image is adjacent to descriptive text, like a user or project name, it should use an empty alt tag so it can be ignored by a screen reader.