Avatar

A circular user image, or a text-initials fallback. Size with data-size.

Initials & sizes

AL GH AT

<div class="row">
  <span class="re-avatar" data-size="sm" role="img" aria-label="Ada Lovelace">AL</span>
  <span class="re-avatar" role="img" aria-label="Grace Hopper">GH</span>
  <span class="re-avatar" data-size="lg" role="img" aria-label="Alan Turing">AT</span>
</div>

Image

<span class="re-avatar" data-size="lg">
  <img
    alt="Sample avatar"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Crect%20width='44'%20height='44'%20fill='%232563eb'/%3E%3Ccircle%20cx='22'%20cy='17'%20r='8'%20fill='white'/%3E%3Crect%20x='9'%20y='29'%20width='26'%20height='15'%20rx='7.5'%20fill='white'/%3E%3C/svg%3E"
  />
</span>

Accessibility

Avatar is presentational — a <span> with no keyboard interaction or focus ring.

Semantics — give every avatar an accessible name. The image variant relies on the native <img alt="…">; the initials variant adds role="img" with aria-label so assistive tech announces the person’s name rather than spelling out the letters. Decorative-only avatars can be omitted from the tree (aria-hidden) where context already names the user.
Notes — the rendered initials are uppercased and unselectable (user-select: none) for presentation; they carry no semantics, which is why the aria-label provides the real name. The muted fallback background meets text contrast for the initials.

See the accessibility guide for the project-wide approach.