Avatar

An avatar shows a user's picture, initials or an icon in a fixed-size circle or square, with sizes, statuses and stacked lists.

Default markup

Add the avatar class to a span. Fill it with a picture as a background-image, or with initials as text.

<div class="avatar-list">
  <span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span>
  <span class="avatar">JL</span>
  <span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span>
</div>

Avatar image

Set the picture as a background-image on the avatar. It's cropped to the avatar's shape and size.

<div class="avatar-list">
  <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
  <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span>
  <span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span>
</div>

Initials

When there is no picture, put the initials as text inside the avatar.

ABCDEFGHIJ

<div class="avatar-list">
  <span class="avatar">AB</span>
  <span class="avatar">CD</span>
  <span class="avatar">EF</span>
  <span class="avatar">GH</span>
  <span class="avatar">IJ</span>
</div>

Avatar icons

An icon inside the avatar works as a placeholder, or for an account that isn't a person, such as a system user.

<div class="avatar-list">
  <span class="avatar">
    <!-- Download SVG icon from http://tabler.io/icons/icon/user -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
      <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
    </svg>
  </span>
  <span class="avatar">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>
  </span>
  <span class="avatar">
    <!-- Download SVG icon from http://tabler.io/icons/icon/settings -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" />
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
    </svg>
  </span>
</div>

Avatar initials color

Set the background with a bg-* class from the color palette. It's most useful with initials.

ABCDEFGHIJ

<div class="avatar-list">
  <span class="avatar bg-green-lt">AB</span>
  <span class="avatar bg-red-lt">CD</span>
  <span class="avatar bg-yellow-lt">EF</span>
  <span class="avatar bg-primary-lt">GH</span>
  <span class="avatar bg-purple-lt">IJ</span>
</div>

Avatar size

Add a size class from avatar-xxs to avatar-2xl. The names follow the usual Bootstrap pattern.

<div class="avatar-list">
  <span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span>
  <span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span>
  <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span>
  <span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span>
  <span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span>
</div>

Avatar status

Add a status indicator to show whether a user is online, or a small count such as unread messages.

SA 5

<div class="avatar-list">
  <span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span>
  <span class="avatar" style="background-image: url(/static/avatars/015m.jpg)">
    <span class="badge bg-danger"></span>
  </span>
  <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)">
    <span class="badge bg-success"></span>
  </span>
  <span class="avatar">
    <span class="badge bg-warning"></span> SA
  </span>
  <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)">
    <span class="badge bg-info"></span>
  </span>
  <span class="avatar" style="background-image: url(/static/avatars/048m.jpg)">
    <span class="badge bg-gray-500">5</span>
  </span>
</div>

Avatar shape

An avatar is a circle by default. Add avatar-square to give it the same rounded corners as the rest of the interface - the usual choice when the avatar stands for a company, a project or an app rather than a person.

TBAA

<div class="avatar-list">
  <span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span>
  <span class="avatar avatar-square" style="background-image: url(/static/avatars/039f.jpg)"></span>
  <span class="avatar avatar-square bg-primary text-white">TB</span>
  <span class="avatar avatar-square bg-green-lt">AA</span>
</div>

For any other radius use the Bootstrap utilities. rounded-0 gives sharp corners, and rounded-3 a larger radius than avatar-square.

<div class="avatar-list">
  <span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span>
  <span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span>
</div>

Avatar brand

Add a avatar-brand element inside an avatar to mark where the account comes from. It sits in the bottom corner and keeps its own background, so a brand logo stays readable over any photo.

<div class="avatar-list">
  <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)">
    <span class="avatar-brand" style="background-image: url(/static/brands/github.svg)"></span>
  </span>
  <span class="avatar" style="background-image: url(/static/avatars/002m.jpg)">
    <span class="avatar-brand" style="background-image: url(/static/brands/google.svg)"></span>
  </span>
</div>

Avatar on a cover

Add avatar-cover to pull an avatar halfway over the element above it and draw a ring in the card background color. Use it for a profile picture that overlaps a cover image.

Paweł Kuna

UI Designer

<div class="card" style="max-width: 20rem">
  <div class="card-body p-0">
    <div class="bg-primary-lt" style="height: 5rem"></div>
    <div class="text-center p-3">
      <span class="avatar avatar-xl avatar-cover rounded-circle mb-3" style="background-image: url(/static/avatars/039f.jpg)"></span>
      <div class="fw-medium">Paweł Kuna</div>
      <div class="text-secondary">UI Designer</div>
    </div>
  </div>
</div>

Avatar upload

Use the avatar-upload class together with avatar to show an empty avatar slot. It has a dashed border and no image, so users can see that the picture is still missing. On hover the border and the icon turn to the primary color.

Put an icon inside to show the action. The variant is often used as a link or a button.

<div class="avatar-list">
  <a href="#" class="avatar avatar-upload" aria-label="Upload photo">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>
  </a>
  <a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>
  </a>
  <a href="#" class="avatar avatar-upload rounded-0" aria-label="Take photo">
    <!-- Download SVG icon from http://tabler.io/icons/icon/camera -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
      <path d="M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
    </svg>
  </a>
</div>

Avatar upload size

The upload avatar uses the same size classes as a normal avatar, from avatar-xxs to avatar-2xl.

<div class="avatar-list">
  <a href="#" class="avatar avatar-upload avatar-2xl rounded" aria-label="Upload photo">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>
  </a>
  <a href="#" class="avatar avatar-upload avatar-xl rounded" aria-label="Upload photo">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>
  </a>
  <a href="#" class="avatar avatar-upload avatar-lg rounded" aria-label="Upload photo">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>
  </a>
  <a href="#" class="avatar avatar-upload rounded" aria-label="Upload photo">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>
  </a>
  <a href="#" class="avatar avatar-upload avatar-sm rounded" aria-label="Upload photo">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>
  </a>
</div>

Avatar upload text

Add a short label under the icon with the avatar-upload-text class. The content is stacked in a column, so use this only in the larger sizes. The text is shown in uppercase, like all avatar text.

Upload Add photo

<div class="avatar-list">
  <a href="#" class="avatar avatar-upload avatar-xl rounded">
    <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M12 5l0 14" />
      <path d="M5 12l14 0" />
    </svg>
    <span class="avatar-upload-text">Upload</span>
  </a>
  <a href="#" class="avatar avatar-upload avatar-2xl rounded">
    <!-- Download SVG icon from http://tabler.io/icons/icon/camera -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
      <path d="M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
    </svg>
    <span class="avatar-upload-text">Add photo</span>
  </a>
</div>

Avatar upload in a form

To pick a real file, use a label with the upload classes and connect it to a hidden file input. Add cursor-pointer, because the pointer cursor is only set for links.

Avatar

Click to upload a new avatar

<div class="row align-items-end" style="width: 100%;">
  <div class="col-auto">
    <label for="avatar-file" class="avatar avatar-upload avatar-lg rounded cursor-pointer">
      <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
        <path d="M12 5l0 14" />
        <path d="M5 12l14 0" />
      </svg>
    </label>
    <input type="file" id="avatar-file" class="visually-hidden" accept="image/*" />
  </div>
  <div class="col">
    <label class="form-label" for="avatar-file">Avatar</label>
    <div class="text-secondary">Click to upload a new avatar</div>
  </div>
</div>

Avatar list

Put several avatars in an .avatar-list container. It keeps consistent spacing between them and wraps them when there isn't enough space.

<div class="avatar-list">
  <span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span>
  <span class="avatar rounded">JL</span>
  <span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span>
  <span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span>
  <span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span>
</div>

Stacked list

Add avatar-list-stacked to overlap the avatars, which fits a long list of participants into a small space.

EB +8

<div class="avatar-list avatar-list-stacked">
  <span class="avatar">EB</span>
  <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span>
  <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
  <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span>
  <span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span>
  <span class="avatar">+8</span>
</div>

<div class="avatar-list avatar-list-stacked">
  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)"></span>
  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)"></span>
  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)"></span>
  <span class="avatar avatar-sm rounded-circle">SA</span>
  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)"></span>
  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)"></span>
  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)"></span>
  <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)"></span>
</div>

Accessibility

An avatar with a background image has no text of its own. Show the user name next to it, or add an aria-label to the avatar.
Give the upload avatar a clear name. Use the avatar-upload-text label, an aria-label, or a form-label linked with for.
Use a label with a file input, or a button, when the upload avatar does something. A link with href="#" is only good for a static demo.
Keep the hidden file input in the markup with the visually-hidden class. Do not use display: none, because then keyboard users cannot reach it.

SCSS variables

Use these SCSS variables to customize avatars. The default values are:

$avatar-size: 2.5rem;
$avatar-status-size: 0.75rem;
$avatar-icon-size: 1.5rem;
$avatar-brand-size: 1.25rem;
$avatar-upload-icon-size: 1.5rem;
$avatar-upload-text-margin-top: 0.25rem;
$avatar-cover-ring-width: 0.25rem;
$avatar-brand-offset: -2px;
$avatar-bg: var(--bg-surface-secondary);
$avatar-sizes: (
  'xxs': (
    size: 1rem,
    font-size: 0.5rem,
    icon-size: 0.5rem,
    status-size: 0.25rem,
    brand-size: 0.5rem,
  ),
  'xs': (
    size: 1.25rem,
    font-size: $h6-font-size,
    icon-size: 0.75rem,
    status-size: 0.375rem,
    brand-size: 0.75rem,
    border-radius: $border-radius-xs,
  ),
  'sm': (
    size: 2rem,
    font-size: $h5-font-size,
    icon-size: 1.5rem,
    status-size: 0.5rem,
    brand-size: 1rem,
  ),
  'md': (
    size: 2.5rem,
    font-size: $h4-font-size,
    icon-size: 1.5rem,
    status-size: 0.75rem,
    brand-size: 1.25rem,
  ),
  'lg': (
    size: 3rem,
    font-size: $h2-font-size,
    icon-size: 2rem,
    status-size: 0.75rem,
    brand-size: 1.25rem,
  ),
  'xl': (
    size: 5rem,
    font-size: 2rem,
    icon-size: 3rem,
    status-size: 1rem,
    brand-size: 1.25rem,
  ),
  '2xl': (
    size: 7rem,
    font-size: 3rem,
    icon-size: 5rem,
    status-size: 1rem,
    brand-size: 2rem,
  ),
);
$avatar-border-radius: var(--border-radius-pill);
$avatar-font-size: $h4-font-size;
$avatar-list-spacing: -0.5;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`avatar`	component	Container element
`avatar-brand`	part	Small brand mark in the bottom corner
`avatar-cover`	part	Pulls the avatar over the element above it, with a ring
`avatar-upload-text`	part	Label inside an empty upload slot
`avatar-list`	part	Wrapper that spaces several avatars in a row
`avatar-square`	style	Rounded corners instead of a circle
`avatar-rounded`	style	Fully round, the default shape
`avatar-upload`	style	Dashed empty slot for a picture that is not set yet
`avatar-list-stacked`	modifier	Overlaps the avatars in the list
`bg-{color}`	color	Any base color for an avatar with initials, for example bg-azure-lt
`avatar-{size}`	size	From avatar-xxs to avatar-2xl; avatar-list-{size} sizes a whole list

Menu

Avatar

Default markup

Avatar image

Initials

Avatar icons

Avatar initials color

Avatar size

Avatar status

Avatar shape

Avatar brand

Avatar on a cover

Avatar upload

Avatar upload size

Avatar upload text

Avatar upload in a form

Avatar list

Stacked list

Accessibility

SCSS variables

Class reference

On this page

130 sleek illustrations for your startup's visual identity.

Menu

Avatar

Default markup

Avatar image

Initials

Avatar icons

Avatar initials color

Avatar size

Avatar status

Avatar shape

Avatar brand

Avatar on a cover

Avatar upload

Avatar upload size

Avatar upload text

Avatar upload in a form

Avatar list

Stacked list

Accessibility

SCSS variables

Class reference

Related

On this page

130 sleek illustrations for your startup's visual identity.