Avatar

How to use it

Use to identify a person next to their name or content, for example in comment headers or member lists, when no photo is available. Change the aria-label to the person's name and the initials to match; size it by adding a single class, dcl-avatar--sm or dcl-avatar--lg, to the default. When the full name is already printed right beside the avatar, set aria-hidden="true" on the avatar and drop its role and label so the name is not read twice; for several overlapping people use the avatar group.

Accessibility

Each avatar is a <span role="img"> whose aria-label carries the person's full name, so it is announced once as an image named "Priya Natarajan" while the visible initials are aria-hidden; the fallback is an inline SVG silhouette, also aria-hidden, under the label "Unknown user". It is not focusable or interactive on its own -- wrap it in a link or button when it should do something. White initials on the blue (#1d4ed8), teal (#0f766e) and slate (#475569) fills are 6.7:1, 5.5:1 and 7.6:1.

Source (copy-ready)

Copy code

<div class="dcl-avatar-demo">
  <span class="dcl-avatar dcl-avatar--sm" role="img" aria-label="Priya Natarajan"><span class="dcl-avatar__initials" aria-hidden="true">PN</span></span>
  <span class="dcl-avatar dcl-avatar--teal" role="img" aria-label="Marcus Bell"><span class="dcl-avatar__initials" aria-hidden="true">MB</span></span>
  <span class="dcl-avatar dcl-avatar--lg dcl-avatar--slate" role="img" aria-label="Unknown user">
    <svg class="dcl-avatar__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="9" r="4" fill="#ffffff"/><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z" fill="#ffffff"/></svg>
  </span>
</div>
<style>
.dcl-avatar-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.dcl-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; font: inherit; font-size: 1rem; font-weight: 600; line-height: 1; color: #ffffff; background-color: #1d4ed8; }
.dcl-avatar--sm { width: 2rem; height: 2rem; font-size: 0.8125rem; }
.dcl-avatar--lg { width: 3.5rem; height: 3.5rem; font-size: 1.375rem; }
.dcl-avatar--teal { color: #ffffff; background-color: #0f766e; }
.dcl-avatar--slate { color: #ffffff; background-color: #475569; }
.dcl-avatar__initials { color: #ffffff; letter-spacing: 0.02em; }
.dcl-avatar__icon { width: 70%; height: 70%; }
</style>