Avatar

Usage

An avatar is used to show a thumbnail representation of a user, client, or business in the user interface. It can contain letters over a coloured background or an image uploaded by the user.

It's defined in two (36px or 56px) sizes and can be applied to the user interface in places such as tables or lists, or primary navigation.

Best practices

• If the user image is not defined, use the following as a fallback:

  • User’s first name and last name initials

  • Initial letter of the user email or initial letter

  • Any other available user identifier on the interface

  • Use consistent colour-coding to always represent the user the same way across the UI

  • Apply colour-coding as defined in the accessibility guidelines for colour contrast when dark text is placed on a light background, and make sure that the colour contrast between the text and background passes the AA level accessibility check

• Avoid using icons or words to represent single user

• An icon with a plus can be used in tables to express multiple users