Avatar

Display a person's picture or initials

Overview #

Use the avatar component to display a person’s picture or initials with a rounded border.

Avatars are often used on people directories and profile pages. They also appear alongside quotations and in web application headers to show the identity of the logged-in user.

Examples #

Choose an example

Open in new window Copy link to example

<div class="rvt-avatar rvt-avatar--xs">
  <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
</div>

<div class="rvt-avatar rvt-avatar--sm">
  <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
</div>

<div class="rvt-avatar">
  <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
</div>

<div class="rvt-avatar rvt-avatar--md">
  <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
</div>

<div class="rvt-avatar rvt-avatar--lg">
  <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
</div>

<div class="rvt-avatar rvt-avatar--xl">
  <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
</div>

Open in new window Copy link to example

<div class="rvt-avatar rvt-avatar--xs">
  <span class="rvt-avatar__text">XS</span>
</div>

<div class="rvt-avatar rvt-avatar--sm">
  <span class="rvt-avatar__text">SM</span>
</div>

<div class="rvt-avatar">
  <span class="rvt-avatar__text">RG</span>
</div>

<div class="rvt-avatar rvt-avatar--md">
  <span class="rvt-avatar__text">MD</span>
</div>

<div class="rvt-avatar rvt-avatar--lg">
  <span class="rvt-avatar__text">LG</span>
</div>

<div class="rvt-avatar rvt-avatar--xl">
  <span class="rvt-avatar__text">XL</span>
</div>

Open in new window Copy link to example

<div class="rvt-avatar rvt-avatar--xl-md-up">
  <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
</div>

Usage #

Do

Use to show someone's picture as part of a profile, quotation, or header identity module
Use with .jpg, .png, or .webp images

Don't

Use a non-square avatar image
Use different avatar sizes in the same list of people

Accessibility #

Use an empty alt attribute. You do not need to use the person’s name or initials as the value of the avatar’s alt attribute.