Avatar

A .avatar shows a person or account as a circle. It is an <img>, or a <span> holding initials or an icon on a secondary-container fill.

GH person

<img class="avatar" src="ada.jpg" alt="Ada Lovelace">
<span class="avatar" role="img" aria-label="Grace Hopper">GH</span>
<span class="avatar" role="img" aria-label="Guest">
  <span class="material-symbols" aria-hidden="true">person</span>
</span>

Sizes

Add small for 32px or large for 56px. The default is 40px. Initials and icons scale with the circle.

<span class="avatar small" role="img" aria-label="Grace Hopper">GH</span>
<span class="avatar" role="img" aria-label="Grace Hopper">GH</span>
<span class="avatar large" role="img" aria-label="Grace Hopper">GH</span>

Group

An .avatar-group overlaps its avatars by 8px and rings each one in the surface color. End with a count avatar for the people not shown, and say what the group is in the text around it.

GH +3

6 people are editing

<div class="avatar-group">
  <img class="avatar small" src="ada.jpg" alt="Ada Lovelace">
  <span class="avatar small" role="img" aria-label="Grace Hopper">GH</span>
  <img class="avatar small" src="alan.jpg" alt="Alan Turing">
  <span class="avatar small" role="img" aria-label="3 more people">+3</span>
</div>
<span>6 people are editing</span>

Accessibility

Give an image avatar alt text that names the person. Use alt="" when the name is already next to it. Initials read as separate letters, and an icon reads as its ligature name. Give a <span> avatar role="img" and an aria-label instead. When the person is named beside it, use aria-hidden="true".

<span class="avatar" aria-hidden="true">GH</span>
<span>Grace Hopper</span>

Tokens

Override these on the .avatar, or on .avatar-group for the overlap and ring.