Skip to main content

Avatar

OVERVIEW​

Definition​

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

Live demo​

Avatar

Anatomy​

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

Variants​

Acronym (initials)​

This is the default variant. All users will have this by default when their account is created, using their initials from their first and last name.

Image​

When an employee uploads a profile picture, this variant will automatically replace the initials variant.

Placeholder (icon)​

this variant exists for if no other data is available (image or initials). But it is unlikely to occur and as such is rarely used.

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.

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.

Layout guidance​

Modifiers​

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

States​

Interactions​

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.