Avatar

An image element with a fallback for representing the user.

Sizes

Available in small, default, and large sizes.

html

<div class="vt-text-center">
  <div class="vt-avatar vt-avatar-sm vt-relative">
    <span class="vt-font-medium vt-text-foreground-muted">S</span>
  </div>
  <p class="vt-text-xs vt-text-foreground-muted vt-mt-2">sm</p>
</div>

<div class="vt-text-center">
  <div class="vt-avatar vt-avatar-md vt-relative">
    <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">JD</span>
  </div>
  <p class="vt-text-xs vt-text-foreground-muted vt-mt-2">md</p>
</div>

<div class="vt-text-center">
  <div class="vt-avatar vt-avatar-lg vt-relative">
    <span class="vt-text-lg vt-font-medium vt-text-foreground-muted">JD</span>
  </div>
  <p class="vt-text-xs vt-text-foreground-muted vt-mt-2">lg</p>
</div>

<div class="vt-text-center">
  <div class="vt-avatar vt-avatar-xl vt-relative">
    <span class="vt-text-2xl vt-font-medium vt-text-foreground-muted">JD</span>
  </div>
  <p class="vt-text-xs vt-text-foreground-muted vt-mt-2">xl</p>
</div>

With Image

Avatar with a user photo.

html

<div class="vt-avatar vt-avatar-md vt-relative">
  <img src="https://i.pravatar.cc/80?img=1" alt="User" class="vt-w-full vt-h-full vt-object-cover">
</div>
<div class="vt-avatar vt-avatar-md vt-relative">
  <img src="https://i.pravatar.cc/80?img=2" alt="User" class="vt-w-full vt-h-full vt-object-cover">
</div>
<div class="vt-avatar vt-avatar-md vt-relative">
  <img src="https://i.pravatar.cc/80?img=3" alt="User" class="vt-w-full vt-h-full vt-object-cover">
</div>
<div class="vt-avatar vt-avatar-md vt-relative">
  <img src="https://i.pravatar.cc/80?img=4" alt="User" class="vt-w-full vt-h-full vt-object-cover">
</div>

Fallback

Initials or icon when no image is available.

html

<div class="vt-avatar vt-avatar-md vt-relative">
  <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">AB</span>
</div>
<div class="vt-avatar vt-avatar-md vt-relative">
  <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">CD</span>
</div>

<div class="vt-avatar vt-avatar-md vt-relative">
  <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" class="lucide lucide-user vt-w-5 vt-h-5 vt-text-foreground-muted">
    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
  </svg>
</div>

With Status

Online/offline indicator on the avatar.

html

<div class="vt-relative vt-inline-flex">
  <div class="vt-avatar vt-avatar-md">
    <img src="https://i.pravatar.cc/80?img=5" alt="User" class="vt-w-full vt-h-full vt-object-cover">
  </div>
  <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3 vt-rounded-full vt-bg-info-fill vt-border-2 vt-border-surface-page"></span>
</div>

<div class="vt-relative vt-inline-flex">
  <div class="vt-avatar vt-avatar-md">
    <img src="https://i.pravatar.cc/80?img=6" alt="User" class="vt-w-full vt-h-full vt-object-cover">
  </div>
  <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3 vt-rounded-full vt-bg-warning-fill vt-border-2 vt-border-surface-page"></span>
</div>

<div class="vt-relative vt-inline-flex">
  <div class="vt-avatar vt-avatar-md">
    <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">EF</span>
  </div>
  <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3 vt-rounded-full vt-bg-foreground-muted vt-border-2 vt-border-surface-page"></span>
</div>

<div class="vt-relative vt-inline-flex">
  <div class="vt-avatar vt-avatar-md">
    <span class="vt-text-sm vt-font-medium vt-text-foreground-muted">GH</span>
  </div>
  <span class="vt-absolute vt-bottom-0 vt-right-0 vt-w-3 vt-h-3 vt-rounded-full vt-bg-error-fill vt-border-2 vt-border-surface-page"></span>
</div>

Avatar Group

Stack multiple avatars together.

html

<div class="vt-flex vt--space-x-3">
  <div class="vt-avatar vt-avatar-md vt-relative vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=10" alt="User" class="vt-w-full vt-h-full vt-object-cover">
  </div>
  <div class="vt-avatar vt-avatar-md vt-relative vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=11" alt="User" class="vt-w-full vt-h-full vt-object-cover">
  </div>
  <div class="vt-avatar vt-avatar-md vt-relative vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=12" alt="User" class="vt-w-full vt-h-full vt-object-cover">
  </div>
  <div class="vt-avatar vt-avatar-md vt-relative vt-ring-2 vt-ring-surface-page">
    <img src="https://i.pravatar.cc/80?img=13" alt="User" class="vt-w-full vt-h-full vt-object-cover">
  </div>
  <div class="vt-avatar vt-avatar-md vt-relative vt-ring-2 vt-ring-surface-page">
    <span class="vt-text-xs vt-font-medium vt-text-foreground-muted">+5</span>
  </div>
</div>

<div class="vt-flex vt-items-center vt-gap-3">
  <div class="vt-flex vt--space-x-2">
    <div class="vt-avatar vt-avatar-sm vt-relative vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=14" alt="User" class="vt-w-full vt-h-full vt-object-cover">
    </div>
    <div class="vt-avatar vt-avatar-sm vt-relative vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=15" alt="User" class="vt-w-full vt-h-full vt-object-cover">
    </div>
    <div class="vt-avatar vt-avatar-sm vt-relative vt-ring-2 vt-ring-surface-page">
      <img src="https://i.pravatar.cc/80?img=16" alt="User" class="vt-w-full vt-h-full vt-object-cover">
    </div>
  </div>
  <span class="vt-text-sm vt-text-foreground-muted">3 members online</span>
</div>

Guidelines

User/entity identity: photo or initials; sizes sm/md/lg/xl carry built-in text sizing. Decorative icon tiles → icon-badge.

Provide an initials fallback for when the photo is unavailable.

Use the size classes so text scales with the avatar.

Don't

Don't override the built-in text sizing — it should scale with the avatar.

API Reference

All CSS classes available for the Avatar component.

Class	Type	Description
`vt-avatar`	Base	Base avatar — rounded, centered, overflow hidden, muted background
`vt-avatar-sm`	Size	Small avatar (24px)
`vt-avatar-md`	Size	Default avatar (40px)
`vt-avatar-lg`	Size	Large avatar (56px)
`vt-avatar-xl`	Size	Extra large avatar (80px)

Accessibility

Keyboard and screen reader support.

Feature	Details
Alt text	Always provide meaningful alt text for user images
Fallback	Initials or icon fallback when image is unavailable
Status	Status indicators should have sr-only text describing the status
Decorative	If avatar is next to username, use alt="" to avoid redundancy

Built with:

Icons

Used in:

Avatar Group