Avatars

Image-based user identification in eight sizes with round and square variants.

Sizes (round)

Eight sizes from --xs to --4xl, following the typography naming convention.

<span class="avatar avatar--xs">
  <img src="photo.jpg" alt="Name">
</span>

<span class="avatar avatar--sm">
  <img src="photo.jpg" alt="Name">
</span>

<span class="avatar">
  <img src="photo.jpg" alt="Name">
</span>

<span class="avatar avatar--lg">
  <img src="photo.jpg" alt="Name">
</span>

<span class="avatar avatar--xl">
  <img src="photo.jpg" alt="Name">
</span>

<span class="avatar avatar--2xl">
  <img src="photo.jpg" alt="Name">
</span>

<span class="avatar avatar--3xl">
  <img src="photo.jpg" alt="Name">
</span>

<span class="avatar avatar--4xl">
  <img src="photo.jpg" alt="Name">
</span>

.avatar--xs — 0.5 lines
.avatar--sm — 0.75 lines
.avatar — 1 line (default)
.avatar--lg — 1.5 lines
.avatar--xl — 2 lines
.avatar--2xl — 4 lines
.avatar--3xl — 6 lines
.avatar--4xl — 8 lines

Sizes (square)

Add .avatar--square to any size for a rounded-corner square. Useful for logos and icons.

Code

<span class="avatar avatar--xs avatar--square">
  <img src="logo.png" alt="Company">
</span>

<span class="avatar avatar--square">
  <img src="logo.png" alt="Company">
</span>

<!-- ... works with any size -->

<span class="avatar avatar--4xl avatar--square">
  <img src="logo.png" alt="Company">
</span>

Initials

When no image is available, show initials as a fallback. Use single characters at --xs and --sm sizes for readability.

Code

<!-- Use aria-label for accessible name -->
<span class="avatar" role="img" aria-label="Jane Doe">
  <span class="initials" aria-hidden="true">JD</span>
</span>

<!-- Single character at xs/sm for readability -->
<span class="avatar avatar--xs" role="img" aria-label="Jane Doe">
  <span class="initials" aria-hidden="true">J</span>
</span>

With name

Pair an avatar with a name using a .cluster layout. Works at any size.

Code

<div class="cluster items-center">
  <span class="avatar avatar--sm">
    <img src="photo.jpg" alt="">
  </span>
  <span>Jane Doe</span>
</div>

<!-- With initials -->
<div class="cluster items-center">
  <span class="avatar avatar--sm" role="img" aria-label="Jane Doe">
    <span class="initials" aria-hidden="true">J</span>
  </span>
  <span>Jane Doe</span>
</div>

Jane Doe

As link

Wrap an avatar in an <a> to make it clickable. The link text provides the accessible name, so the image alt can be empty.

Code

<!-- Image avatar as link -->
<a href="/profile/jane">
  <span class="avatar avatar--sm">
    <img src="photo.jpg" alt="">
  </span>
  Jane Doe
</a>

<!-- Initials avatar as link -->
<a href="/profile/jane" class="cluster items-center">
  <span class="avatar avatar--sm" role="img" aria-label="">
    <span class="initials" aria-hidden="true">J</span>
  </span>
  Jane Doe
</a>

Jane Doe

Groups (round)

Overlapping avatars for showing multiple users. Overlap scales proportionally with size.

Code

<div class="avatar-group">
  <span class="avatar"><img src="u1.jpg" alt="User 1"></span>
  <span class="avatar"><img src="u2.jpg" alt="User 2"></span>
  <span class="avatar"><img src="u3.jpg" alt="User 3"></span>
</div>

<!-- Works at any size -->
<div class="avatar-group">
  <span class="avatar avatar--xs">...</span>
  <span class="avatar avatar--xs">...</span>
  <span class="avatar avatar--xs">...</span>
</div>

Groups (square)

Square avatars in groups work the same way.

Code

<div class="avatar-group">
  <span class="avatar avatar--sm avatar--square">
    <img src="logo1.png" alt="Company 1">
  </span>
  <span class="avatar avatar--sm avatar--square">
    <img src="logo2.png" alt="Company 2">
  </span>
  <span class="avatar avatar--sm avatar--square">
    <img src="logo3.png" alt="Company 3">
  </span>
</div>