Use an avatar:

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

Avatars can contain one of the following:

• Initials

• Image

• Icon

• Flag

• Emoji

Always place avatars to the left of content.

You can use multiple avatars across a screen where relevant.

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.

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.