Avatars

Image-based user identification with round and square variants.

Sizes

Avatars come in four sizes using --line-* spacing tokens.

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

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

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

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

.avatar--small — 1.5 lines
.avatar — 2 lines (default)
.avatar--large — 3 lines
.avatar--xlarge — 8 lines

Shapes

Round by default, with a square variant for logos or icons.

Code

<!-- Round (default) -->
<span class="avatar">
  <img src="photo.jpg" alt="Name">
</span>

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

Avatar group

Overlapping avatars for showing multiple users.

Code

<div class="avatar-group">
  <span class="avatar"><img src="user1.jpg" alt="User 1"></span>
  <span class="avatar"><img src="user2.jpg" alt="User 2"></span>
  <span class="avatar"><img src="user3.jpg" alt="User 3"></span>
</div>