Skip to main content

Avatar

An avatar is a visual representation used to identify and personalise a user or entity within a user interface.

Do's and don'ts

Do
  • Prioritise initials avatar over user icon avatar for individuals.
  • Make sure you use the correct size for its placement, whether it's in a list, stand-alone, or any other context.
  • Always maintain equal width and height dimensions.
Don't
  • Don't use the initials avatar for a non-individual entity (e.g. a company).

Anatomy

Example of an avatar component anatomy.
  1. Container: Background container that organises the information.
  2. Initials: Displays the user's first and last name initials.
  3. User Icon: It can represent any entity, such as a user or a business.
  4. Photo: Displays a picture of the user.

Variants

Initials

Use the initials avatar variation when you want to represent an individual user. Use it only when the name is known.

Example of the avatar in the initials variant.

User Icon

Use the user icon avatar variation when you want to represent an individual user whose name has not been specified, or for non-individual entities such as companies, teams or groups.

Example of the avatar in the user icon variant.

Photo

Use the Photo avatar variation when you want to display a picture of the user.

Example of the avatar in the photo variant.

Unauthenticated

Use the unauthenticated variation when the user hasn't logged in or authenticated their session yet.

Example of the avatar in the unauthenticated variant.

Modifiers

Emphasis

Depending on the level of visual prominence you want to give to your avatar, you can choose between strong or subtle emphasis.

Strong

Example of the avatar with strong emphasis.

Subtle

Example of the avatar with subtle emphasis.

Colours

Select from a palette of distinct brand colours for your avatar.

Neutral

Example of the avatar in the neutral colour variant.

01 Orange

Example of the avatar in the 01 Orange colour variant.

02 Orange Subtle

Example of the avatar in the 02 Orange Subtle colour variant.

03 Cupcake

Example of the avatar in the 03 Cupcake colour variant.

04 Berry

Example of the avatar in the 04 Berry colour variant.

05 Turmeric

Example of the avatar in the 05 Turmeric colour variant.

06 Aubergine

Example of the avatar in the 06 Aubergine colour variant.

08 Latte

Example of the avatar in the 08 Latte colour variant.

Outline

You can apply an outline to the Photo variant, which helps with clarity and gives a good contrast to the avatar.

Example of an avatar component in the outline colour variant.

Interaction

Interactive

An avatar should be interactive when it serves a specific purpose or action within the user interface.

Example of an interactive avatar.

Non-interactive

Use the avatar in a static form, if you want the avatar to retain its original appearance without any interactive features tied with the content or context.

Example of a non-interactive avatar.

Sizes

Small (S)

Height and width of 24px.

Example of a small avatar.

Medium (M)

Height and width of 32px.

Example of a medium avatar.

Large (L)

Height and width of 40px.

Example of a large avatar.

X Large (XL)

Height and width of 56px.

Example of an extra large avatar.

Content

Initials

Use the first letter of the user's first and last name as the initials in the avatar, limited to a maximum of two capital letters. The letters should always be centre-aligned.

However, in cases where the concept of first and last name doesn't apply or when there is no specific individual identified, the user icon variant should be used instead.
Do
Example of an avatar with initials.
Don't
Example of an avatar with more than two initials, which is not supported.

Interactive states

Default

Example of an avatar component in the default state.

Active

Example of an avatar component in the active state.

Disabled

Example of an avatar component in the disabled state.

Examples

Here are some examples of Avatar in context:

Example of the avatar component in the accounts section of an application.
Example of the avatar component as it appears in the profile in a navigation bar.
Back to top