Avatar

An avatar is a representation of a unique entity — like a person, a business, or an object. It can contain initials, images, icons, or emojis.

Avatar
When to use

Use an avatar:

  • when you need to make it easier for a user to identify content, like a recipient or currency

Types

Avatars can contain one of the following:

  • Initials

  • Image

  • Icon

  • Flag

  • Emoji

Placement

Always place avatars to the left of content.

You can use multiple avatars across a screen where relevant.

Interaction

Avatar is used as supporting information, and can be interactive depending on the content it’s paired with or the context it’s in.

For example, a profile avatar could be paired with a chevron and open a dropdown, whereas a navigation option would open a new screen.

Accessibility

Never use an avatar in isolation without copy or interaction cues (such as a chevron icon). This is so that they are clearly identifiable, and aid comprehension and interaction.

Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation