Avatar — uicraft

Sizes

Available in small, default, and large sizes.

html

S

sm

JD

md

JD

lg

JD

xl

<!-- Small 24px -->
<div class="uc-avatar uc-avatar-sm">
  <span>S</span>
</div>

<!-- Default 40px -->
<div class="uc-avatar uc-avatar-md">
  <span>JD</span>
</div>

<!-- Large 56px -->
<div class="uc-avatar uc-avatar-lg">...</div>

<!-- XL 80px -->
<div class="uc-avatar uc-avatar-xl">...</div>

With Image

Avatar with a user photo.

html

<div class="uc-avatar uc-avatar-md">
  <img src="https://i.pravatar.cc/80?img=1" alt="User" />
</div>

Fallback

Initials or icon when no image is available.

html

AB

CD

<!-- Initials -->
<div class="uc-avatar uc-avatar-md">
  <span class="uc-text-sm uc-font-medium uc-text-fg-disabled">AB</span>
</div>

<!-- Icon -->
<div class="uc-avatar uc-avatar-md">
  <svg class="uc-w-5 uc-h-5 uc-text-fg-disabled">...</svg>
</div>

With Status

Online/offline indicator on the avatar.

html

EF

GH

<div class="uc-relative uc-inline-flex">
  <div class="uc-avatar uc-avatar-md">
    <img src="..." alt="User" />
  </div>
  <span class="uc-absolute uc-bottom-0 uc-right-0 uc-w-3 uc-h-3
    uc-rounded-full uc-bg-accents-blue
    uc-border-2 uc-border-neutrals-background"></span>
</div>

Avatar Group

Stack multiple avatars together.

html

+5

<div class="uc-flex uc--space-x-3">
  <div class="uc-avatar uc-avatar-md uc-ring-2 uc-ring-neutrals-background">
    <img src="..." alt="User" />
  </div>
  <!-- ...more avatars -->
  <div class="uc-avatar uc-avatar-md uc-ring-2 uc-ring-neutrals-background">
    <span class="uc-text-xs uc-font-medium">+5</span>
  </div>
</div>

API Reference

All CSS classes available for the Avatar component.

Class	Type	Description
`uc-avatar`	Base	Base avatar — rounded, centered, overflow hidden, muted background
`uc-avatar-sm`	Size	Small avatar (24px)
`uc-avatar-md`	Size	Default avatar (40px)
`uc-avatar-lg`	Size	Large avatar (56px)
`uc-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