Skip to main content
Github repo

Theme config

Theme mode
Color palette
Grays
Border radii/radiuses/radiopedes/you know
Border radius
Field border radius
Button border radius
Get CSS
All
Components
Guides
API
Recent
↑↓ Navigate
←→ Category
↵ Select
esc Close

Components

Avatar

Full support Supported since v105. Full support Supported since v121. Full support Supported since v15.4.

Image

Avatar
Avatar
Avatar 
---
import { Avatar } from "@opui/astro"
---


<Avatar
  src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?q=80&w=1827&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="Avatar"
/>


<Avatar
  src="https://images.unsplash.com/photo-1672714413950-c9f7c5a45fa1?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="Avatar"
/>


<Avatar
  src="https://plus.unsplash.com/premium_photo-1675674458649-0c667500f3cc?q=80&w=1885&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="Avatar"
/>
<div class="avatar">
  <img
    src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?q=80&#38;w=1827&#38;auto=format&#38;fit=crop&#38;ixlib=rb-4.0.3&#38;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>
<div class="avatar">
  <img
    src="https://images.unsplash.com/photo-1672714413950-c9f7c5a45fa1?q=80&#38;w=1887&#38;auto=format&#38;fit=crop&#38;ixlib=rb-4.0.3&#38;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>
<div class="avatar">
  <img
    src="https://plus.unsplash.com/premium_photo-1675674458649-0c667500f3cc?q=80&#38;w=1885&#38;auto=format&#38;fit=crop&#38;ixlib=rb-4.0.3&#38;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>

Letter

LE
TT
ER
---
import { Avatar } from "@opui/astro"
---


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

Icon

---
import { Avatar } from "@opui/astro"
---


<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
  >
</Avatar>


<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
  >
</Avatar>


<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
  >
</Avatar>
<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 variant prop.

SQ
Avatar
Avatar 
---
import { Avatar } from "@opui/astro"
---


<Avatar variant="squared">SQ</Avatar>


<Avatar
  variant="rounded"
  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"
/>


<Avatar
  variant="squircle"
  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 class="avatar squared">SQ</div>
<div class="avatar rounded">
  <img
    src="https://images.unsplash.com/photo-1616286608358-0e1b143f7d2f?q=80&#38;w=1740&#38;auto=format&#38;fit=crop&#38;ixlib=rb-4.0.3&#38;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>
<div class="avatar squircle">
  <img
    src="https://plus.unsplash.com/premium_photo-1770631651199-d92007477b6f?q=80&#38;w=1740&#38;auto=format&#38;fit=crop&#38;ixlib=rb-4.1.0&#38;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Avatar"
  />
</div>

Grouped

Group multiple avatars by setting the isGroup prop on a parent container.

AB
CD
IJKL 
---
import { Avatar } from "@opui/astro"
---


<Avatar isGroup>
  <Avatar>AB</Avatar>
  <Avatar>CD</Avatar>
  <Avatar as="button">EF</Avatar>
  <Avatar as="button">GH</Avatar>
  <Avatar href="#">IJ</Avatar>
  <Avatar href="#">KL</Avatar>
</Avatar>
<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

Prop Type Default Description
as any - The element or component to render as.
href string - The link to use if the avatar is an anchor.
variant "squared" | "rounded" | "squircle" "default" The visual style of the avatar.
isGroup boolean false Renders the avatar as a group.
src string - The image source for the avatar.
alt string - The alternative text for the avatar image.

Browser support

Full support Supported since v105. Full support Supported since v121. Full support Supported since v15.4.

See also the full browser support guide.

Installation

@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));
    }
  }
}