Avatar

<span class="avatar">
  <img class="avatar-image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%236366f1'/%3E%3C/svg%3E" alt="Ada Lovelace" />
</span>

<span class="avatar">
  <span class="avatar-fallback">AL</span>
</span>

Usage

<span class="avatar">
  <img class="avatar-image" src="…" alt="Ada Lovelace" />
</span>

Class	Part
`.avatar`	The round frame
`.avatar-image`	The photo
`.avatar-fallback`	Initials or an icon when there is no photo
`.avatar-badge`	A dot pinned to the corner
`.avatar-group`	Overlapping avatars
`.avatar-group-count`	The “+3” at the end of a group

Attribute	Meaning
`data-size="sm"`	24px
`data-size="lg"`	40px

Sizes

SM MD LG

<span class="avatar" data-size="sm"><span class="avatar-fallback">SM</span></span>
<span class="avatar"><span class="avatar-fallback">MD</span></span>
<span class="avatar" data-size="lg"><span class="avatar-fallback">LG</span></span>

Badge

Group

AL GH MC +3

<div class="avatar-group">
  <span class="avatar"><span class="avatar-fallback">AL</span></span>
  <span class="avatar"><span class="avatar-fallback">GH</span></span>
  <span class="avatar"><span class="avatar-fallback">MC</span></span>
  <span class="avatar-group-count">+3</span>
</div>

RTL

Set dir="rtl" on the page or on any subtree — the badge moves to the other corner on its own. See the button page for a live example.

Accessibility

The photo carries the name. alt="Ada Lovelace", not alt="avatar".
Initials are not a name. A fallback showing “AL” needs the full name somewhere — visible text beside it, or .sr-only inside the fallback.
A status dot needs words. A green circle says nothing on its own, so put .sr-only text in the badge saying what it means.
In a group, the count is text and is announced. Whether that is enough depends on whether the names matter — if they do, list them.