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.
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:
- Include the badge when you need to display a flag to represent a currency — for example, the currency of a transfer.
- Don’t use the badge if you’re using a flag avatar.
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.