> For the complete documentation index, see [llms.txt](https://hinahirani.gitbook.io/ui-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hinahirani.gitbook.io/ui-guide/components/avatar.md).

# 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.

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MA_rOhKqJXQ2-HscM1D%2F-MAavp2A7lIL4tGUn6y9%2FAvatar.png?alt=media\&token=2ae6966e-3e5b-41ac-bca3-382b6b445617)

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

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MA_rOhKqJXQ2-HscM1D%2F-MAavsfz1TY8dRZg8ZqL%2FAvatar%20-%20Do's%20and%20dont's.png?alt=media\&token=629edcfc-a7e0-4118-bc50-2fc9b25dc9a1)