Avatar

Circular portraits with size and stack variants.

A circular portrait, used for people, accounts, or any other identity. Supports an image or initials fallback, four sizes, and a stack layout for groups.

Image

John Peart 
<span class="avatar">
  <img src="/path/to/avatar.webp" alt="Name">
</span>

Initials fallback

JP 
<span class="avatar" aria-label="John Peart">JP</span>

Sizes

JP JP JP JP 
<span class="avatar avatar--sm">JP</span>  <!-- 32px -->
<span class="avatar avatar--md">JP</span>  <!-- 48px (default) -->
<span class="avatar avatar--lg">JP</span>  <!-- 72px -->
<span class="avatar avatar--xl">JP</span>  <!-- 120px -->

Stack

Overlap avatars for a group — each tile gets a 3px background-coloured ring so it reads as distinct.

JP AL SM ZW 
<span class="avatar-stack">
  <span class="avatar">JP</span>
  <span class="avatar">AL</span>
  <span class="avatar">SM</span>
  <span class="avatar">ZW</span>
</span>