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

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.