Avatar — uicraft

Sizes

Available in small, default, and large sizes.

html

S

sm

JD

md

JD

lg

JD

xl

<!-- Small 24px -->
<div class="uc-w-6 uc-h-6 uc-rounded-full uc-bg-neutrals-muted uc-inline-flex uc-items-center uc-justify-center">
  <span class="uc-text-[10px]">S</span>
</div>

<!-- Default 40px -->
<div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted uc-inline-flex uc-items-center uc-justify-center">
  <span class="uc-text-sm">JD</span>
</div>

<!-- Large 56px -->
<div class="uc-w-14 uc-h-14 uc-rounded-full uc-bg-neutrals-muted ...">...</div>

<!-- XL 80px -->
<div class="uc-w-20 uc-h-20 uc-rounded-full uc-bg-neutrals-muted ...">...</div>

With Image

Avatar with a user photo.

html

<div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted uc-overflow-hidden">
  <img src="https://i.pravatar.cc/80?img=1" alt="User"
    class="uc-w-full uc-h-full uc-object-cover" />
</div>

Fallback

Initials or icon when no image is available.

html

AB

CD

<!-- Initials -->
<div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted
  uc-inline-flex uc-items-center uc-justify-center">
  <span class="uc-text-sm uc-font-medium uc-text-fg-disabled">AB</span>
</div>

<!-- Icon -->
<div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted
  uc-inline-flex uc-items-center uc-justify-center">
  <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-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted uc-overflow-hidden">
    <img src="..." alt="User" class="uc-w-full uc-h-full uc-object-cover" />
  </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-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted
    uc-overflow-hidden uc-ring-2 uc-ring-neutrals-background">
    <img src="..." alt="User" />
  </div>
  <!-- ...more avatars -->
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted
    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-w-6 uc-h-6`	Size	Small avatar (24px)
`uc-w-10 uc-h-10`	Size	Default avatar (40px)
`uc-w-14 uc-h-14`	Size	Large avatar (56px)
`uc-w-20 uc-h-20`	Size	Extra large avatar (80px)
`uc-rounded-full`	Base	Circular shape for the avatar
`uc-bg-neutrals-muted`	Base	Muted background for fallback state
`uc-object-cover`	Modifier	Image fills the avatar without distortion

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