Overview
An avatar shows who or what something belongs to: the author of a comment, the members of a project, a workspace. It displays a picture when there is one and the initials of the name otherwise, in a circle for people or a rounded square for entities. Assistive technology reads it as an image named by the person, unless the name is written right next to it, in which case the avatar is decoration.
This page applies to every platform. Where a platform differs, the difference sits under a sub-heading named after it (Web, iOS, Android, Desktop); everything else holds everywhere.
When to use
- Identifying the author or owner of something: comments, assignments, activity.
- Representing a member, a team or a workspace in lists and headers.
When not to use
- Illustration or product images. An avatar is an identity, not a picture.
- Status alone. A presence dot or a badge is another part, not specified here.
Sizes and shapes
| Size | Use for |
|---|---|
| Small | Lists and comments: 24 px. |
| Medium | Most places, the default: 32 px. |
| Large | Profile headers and cards: 40 px. |
Circle for people, square for entities (teams, organizations, bots).
Name and picture
The name is the full name as the person wrote it; it is the accessible name of the avatar and the source of the initials (first letters of the first and last words). The picture, when given, covers the whole shape. When the name is written next to the avatar, mark the avatar decorative so the name is not read twice.
Accessibility
The Specification tab lists the full accessibility contract. Each statement there links the source it comes from. This section explains the decisions behind it.
- One image, named by the person. An avatar is non-text content that identifies someone; its text alternative is the full name, whether it shows a picture or initials. Initials alone are never the name (WCAG 1.1.1 Non-text Content, WCAG 1.3.1 Info and Relationships, WAI tutorial: Informative images, WAI-ARIA: img role).
- Decorative next to the name. When the name is visible beside the avatar, the avatar is decoration and is hidden, so screen readers do not read the name twice (WAI tutorial: Decorative images, WAI-ARIA: aria-hidden).
- Contrast and color. Initials contrast with the brand tint behind them; the tint is the same for everyone, so nothing is conveyed by color (WCAG 1.4.3 Contrast (Minimum), WCAG 1.4.11 Non-text Contrast, WCAG 1.4.1 Use of Color).
Web
- The implementation renders a
<span role="img" aria-label="Full name">; the picture inside is an<img alt="">(the span already carries the name) and the initials carryaria-hidden="true"; a decorative avatar is a span witharia-hidden="true"and no role (MDN: img role, ARIA in HTML: img, ARIA in HTML: img with an empty alt, HTML-AAM: img, HTML: text alternatives for images, H37, H67, WAI-ARIA: aria-label).
iOS
- Provide alternative text labels for custom interface images so VoiceOver can describe them (Apple HIG: Icons).
Android
- Give the avatar the name as its content description, or
nullwhen the name is written next to it (Android accessibility: describe each UI element, Jetpack Compose: graphic elements).
Related
- Icon (a glyph, named or decorative)
- Badge (a status next to an item)