Avatar
A person or a team as a photo or initials, alone or stacked.
On this page
An avatar stands for a person or a team: a photo when there is one, initials when there is not, in a circle that keeps the same size either way. A faint inward stroke finishes the edge, so a pale photo does not dissolve into a pale surface.
Avatar
<span class="avatar"> <img class="avatar-image" src="/demo/portrait-1.svg" alt="Ada Lovelace"></span><span class="avatar" role="img" aria-label="Grace Hopper">GH</span>#Sizes
The default is 32px. Initials scale with the circle. Use one or two letters.
Sizes
<span class="avatar avatar-xs" role="img" aria-label="Ada Lovelace">A</span><span class="avatar avatar-sm" role="img" aria-label="Ada Lovelace">AL</span><span class="avatar" role="img" aria-label="Ada Lovelace">AL</span><span class="avatar avatar-lg"> <img class="avatar-image" src="/demo/portrait-2.svg" alt="Alan Turing"></span><span class="avatar avatar-xl"> <img class="avatar-image" src="/demo/portrait-3.svg" alt="Katherine Johnson"></span>| Class | Size |
|---|---|
avatar-xs | 20px |
avatar-sm | 24px |
avatar | 32px |
avatar-lg | 40px |
avatar-xl | 56px |
#Square
avatar-square is a rounded square with a corner a quarter of its size. Use it for a team, a project or an organization, so people and groups can be told apart by shape.
Square
<span class="avatar avatar-square" role="img" aria-label="Master">M</span><span class="avatar avatar-square avatar-lg" role="img" aria-label="Atlas">AT</span>#Status
avatar-status puts a presence dot on the lower end of the circle, cut out by a ring of the surface behind it. It is green by default; set --avatar-status, or add a background utility such as bg-warning, for another status. A dot alone is not a message: say the status in the accessible name.
Status
<span class="avatar avatar-lg"> <img class="avatar-image" src="/demo/portrait-1.svg" alt="Ada Lovelace, online"> <span class="avatar-status"></span></span><span class="avatar avatar-lg" role="img" aria-label="Grace Hopper, away">GH <span class="avatar-status bg-warning"></span></span>#Stack
avatar-group overlaps avatars by a quarter of their size. Each paints in front of the one before it and is separated from it by a 2px ring in the color of the surface behind the stack. The order follows the markup in both writing directions. Count the people who are not shown in a last avatar, and name the whole group once.
Stack
<div class="avatar-group" role="group" aria-label="Ada Lovelace, Alan Turing, Katherine Johnson and 4 others"> <span class="avatar"> <img class="avatar-image" src="/demo/portrait-1.svg" alt> </span> <span class="avatar"> <img class="avatar-image" src="/demo/portrait-2.svg" alt> </span> <span class="avatar"> <img class="avatar-image" src="/demo/portrait-3.svg" alt> </span> <span class="avatar" aria-hidden="true">+4</span></div>The ring must match the surface the stack sits on. Inside a sheet, a tray, a card or a dialog it does so by itself, because each surface publishes its color as --surface-color. On a custom background, set --avatar-ring to that background's color.
On a surface
<div class="tray"> <div class="sheet flex items-center justify-between gap-md p-lg"> <span class="text-sm fg-text-strong">Reviewers</span> <div class="avatar-group" role="group" aria-label="Ada Lovelace and Alan Turing"> <span class="avatar avatar-sm"> <img class="avatar-image" src="/demo/portrait-1.svg" alt> </span> <span class="avatar avatar-sm"> <img class="avatar-image" src="/demo/portrait-2.svg" alt> </span> </div> </div></div>#Accessibility
- A photo needs
altwith the person's name. Initials are not a name: give the avatarrole="img"andaria-label. - When the name is written next to the avatar, the avatar is decoration: use
alt=""oraria-hidden="true". - In a stack, name the group once on the container and leave the images empty, so a name is not read twice.
#Classes
| Class | Description |
|---|---|
avatar | The circle, 32px; it holds initials or an avatar-image. Initials need role="img" and aria-label with the name |
avatar-image | The photo, cropped to the circle; its alt is the person's name |
avatar-xs | 20px; the default is 32px. With avatar |
avatar-sm | 24px; the default is 32px. With avatar |
avatar-lg | 40px; the default is 32px. With avatar |
avatar-xl | 56px; the default is 32px. With avatar |
avatar-square | A rounded square with a corner a quarter of its size, for a team, a project or an organization. With avatar |
avatar-status | A presence dot on the lower end of the circle, cut out by a ring of the surface behind it; say the status in the accessible name as well |
avatar-group | A stack: each avatar overlaps the one before it by a quarter of its size, separated by a 2px ring of the surface color |
#Custom properties
| Property | Default | Description |
|---|---|---|
--avatar-size | 2rem | Diameter |
--avatar-ring | Color of the ring around a stacked avatar and a status dot. It is not declared: it falls back to --surface-color, then to --color-surface-base | |
--avatar-status | Color of the status dot. It is not declared: it falls back to --color-success. On avatar-status |