Components

Avatar

Image

HTML

<div class="avatar">
  <img src="https://picsum.photos/100" alt="Avatar" />
</div>

<div class="avatar">
  <img src="https://picsum.photos/101" alt="Avatar" />
</div>

<div class="avatar">
  <img src="https://picsum.photos/102" alt="Avatar" />
</div>

Letter

HTML

<div class="avatar">LE</div>
<div class="avatar">TT</div>
<div class="avatar">ER</div>

Icon

HTML

<div class="avatar">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <path fill="currentColor"
      d="M3 7.5A4.5 4.5 0 0 1 7.5 3h17A4.5 4.5 0 0 1 29 7.5v17a4.5 4.5 0 0 1-4.5 4.5h-17A4.5 4.5 0 0 1 3 24.5zm10.707 2.793a1 1 0 0 0-1.414 0l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414L9.414 16l4.293-4.293a1 1 0 0 0 0-1.414m4.586 1.414L22.586 16l-4.293 4.293a1 1 0 0 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414l-5-5a1 1 0 1 0-1.414 1.414">
    </path>
  </svg>
</div>

<div class="avatar">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <path fill="currentColor"
      d="M5.25 4A3.25 3.25 0 0 0 2 7.25v17.5A3.25 3.25 0 0 0 5.25 28h21.5A3.25 3.25 0 0 0 30 24.75V7.25A3.25 3.25 0 0 0 26.75 4zM18 13a1 1 0 0 1 1-1h6a1 1 0 0 1 0 2h-6a1 1 0 0 1-1-1m1 4h6a1 1 0 0 1 0 2h-6a1 1 0 1 1 0-2m-6-4a2 2 0 1 1-4 0a2 2 0 0 1 4 0m-6 4.5A1.5 1.5 0 0 1 8.5 16h5a1.5 1.5 0 0 1 1.5 1.5s0 3.5-4 3.5s-4-3.5-4-3.5">
    </path>
  </svg>
</div>

<div class="avatar">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <path fill="currentColor"
      d="M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14s14-6.268 14-14S23.732 2 16 2m0 22.5c-3.866 0-7-2.429-7-6.071A2.43 2.43 0 0 1 11.429 16h9.142A2.43 2.43 0 0 1 23 18.429c0 3.642-3.134 6.071-7 6.071m0-10A3.75 3.75 0 1 1 16 7a3.75 3.75 0 0 1 0 7.5">
    </path>
  </svg>
</div>

Variants

Change the shape of the avatar with the .squared, .rounded and .squircle classes.

HTML

<div class="avatar squared">SQ</div>

<div class="avatar rounded">
  <img
    src="https://images.unsplash.com/photo-1616286608358-0e1b143f7d2f?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar" />
</div>

<div class="avatar squircle">
  <img
    src="https://plus.unsplash.com/premium_photo-1770631651199-d92007477b6f?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar" />
</div>

Grouped

Group multiple avatars by adding role="group" to a parent container.

IJ KL

HTML

<div role="group">
  <div class="avatar">AB</div>
  <div class="avatar">CD</div>
  <button class="avatar">EF</button>
  <button class="avatar">GH</button>
  <a href="#" class="avatar">IJ</a>
  <a href="#" class="avatar">KL</a>
</div>

API

Type	Modifiers	Default	Description
Variants	`.squared`, `.rounded`, `.squircle`	-	Sets the shape of the avatar.

Avatar group

Type	Modifiers	Default	Description
Container	`[role="group"]`	-	Required for grouped avatars.

Browser support

See also the full browser support guide.

Installation

avatar.css

@layer components.root {
  :where(.avatar) {
    --_bg-color: var(--primary);
    --_color: var(--color-1);
    --_width: 40px;

    align-items: center;
    aspect-ratio: 1;
    background-color: var(--_bg-color);
    border-radius: var(--radius-round);
    color: var(--_color);
    display: inline-flex;
    inline-size: var(--_width);
    justify-content: center;
    overflow: clip;
    position: relative;
    text-align: center;
    text-decoration: none;

    &:has(img) {
      background-color: transparent;
    }

    svg {
      max-inline-size: var(--size-5);
    }

    img {
      block-size: 100%;
      inline-size: 100%;
      inset: 0;
      object-fit: cover;
      position: absolute;
    }

    &.squared {
      border-radius: 0;
    }

    &.rounded {
      border-radius: var(--radius-2);
    }

    &.squircle {
      border-radius: var(--radius-3);

      @supports (corner-shape: squircle) {
        border-radius: var(--radius-round);
        corner-shape: squircle;
      }
    }
  }

  :where([role="group"]) {
    --_margin: var(--size-3);
    --_outline-color: var(--surface-default);

    display: flex;

    .avatar {
      box-shadow: 0 0 0 2px var(--_outline-color);
      margin-inline-end: calc(-1 * var(--_margin));
    }
  }
}