Skip to main content
Rivet Design System Indiana University

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 #


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>

Elements #

Element Description Usage Required Multiple
Image Avatar image Use a square image. Use only JPG, PNG, or WEBP.

Image is required

Component may contain only one Image

Usage #

Do

  • Use to show someone's picture as part of a profile, quotation, or account page

Don't

  • 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.