Avatar

Face or initials for a person, team, or org. Stack two or more with AvatarGroup.

Group

Pass members and a pixel size. limit shows a +N count for the rest.


        
          1
          
          <AvatarGroup :members="trio" :size="32" />
        

          2
          
          <AvatarGroup :limit="4" :members="overflowMembers" :size="32" />

Stacking order

First member sits on top. reverse puts the last member on top. Left-to-right order stays the same.


        
          1
          
          <AvatarGroup :members="trio" :size="32" />
        

          2
          
          <AvatarGroup :members="trio" reverse :size="32" />

Overlap

overlap auto scales with size. A number is pixels of overlap — higher packs tighter.


        
          1
          
          <AvatarGroup :members="trio" overlap="auto" :size="16" />
        

          2
          
          <AvatarGroup :members="trio" overlap="auto" :size="24" />
        

          3
          
          <AvatarGroup :members="trio" overlap="auto" :size="32" />
        

          4
          
          <AvatarGroup :members="trio" overlap="auto" :size="48" />

Fixed overlap


        
          1
          
          <AvatarGroup :members="trio" :overlap="10" :size="24" />
        

          2
          
          <AvatarGroup :members="trio" :overlap="6" :size="24" />
        

          3
          
          <AvatarGroup :members="trio" :overlap="0" :size="24" />

Size

Pixel size is the Hesoyam API. Token aliases sm (24), default (32), and lg (48) still work.


        
          1
          
          <Avatar :size="24" username="evilrabbit" />
        

          2
          
          <Avatar :size="32" username="evilrabbit" />
        

          3
          
          <Avatar :size="48" username="evilrabbit" />

Git

GitHubAvatar, GitLabAvatar, and BitbucketAvatar resolve the host avatar from username.


        
          1
          
          <GitHubAvatar :size="32" username="rauchg" />
        

          2
          
          <GitLabAvatar :size="32" username="severinlandolt" />
        

          3
          
          <BitbucketAvatar :size="32" username="evilrabbit" />

With custom icon

Overlay a status glyph. Use the icon slot; keep icon-background when the mark needs a disc.


        
          1
          
          <AvatarWithIcon :size="32" icon-background>
        

          2
          
            <template #icon>
        

          3
          
              <Icon :icon="CircleArrowDown01Icon" :size="10" />
        

          4
          
            </template>
        

          5
          
          </AvatarWithIcon>

Letter

1–2 uppercase initials when there is no photo. This port renders letter only when placeholder is off.

SLEKCK


        
          1
          
          <Avatar letter="SL" :size="32" />
        

          2
          
          <Avatar letter="EK" :size="32" />
        

          3
          
          <Avatar letter="CK" :size="32" />

Placeholder

Loading shell. Not a permanent fallback — switch to src, username, or letter once you know the entity.


        
          1
          
          <Avatar placeholder :size="90" />

Badge

AvatarBadge sits on the corner. Empty it is a presence dot; slot an icon at 32px and up.


        
          1
          
          <Avatar username="evilrabbit" :size="32">
        

          2
          
            <AvatarBadge />
        

          3
          
          </Avatar>

Image and fallback

Compound slots when you already have a URL and do not want the username resolver.


        
          1
          
          <Avatar :size="32">
        

          2
          
            <AvatarImage src="https://vercel.com/api/www/avatar?u=evilrabbit&s=64" alt="evilrabbit" />
        

          3
          
            <AvatarFallback>ER</AvatarFallback>
        

          4
          
          </Avatar>

Best practices

One person, team, or org is Avatar. Two or more stacked faces is AvatarGroup so overlap, size, and the overflow count stay consistent.
Resolve a photo with src or username first. Fall back to letter (1–2 uppercase chars). Keep placeholder for the loading shell.
title is the entity name. Letter avatars already announce Avatar with initials — do not prefix "Avatar of".
Match adjacent type: 20–24px next to 13px meta, 32px next to 14px body, 48px and up in headers.
Status lives on AvatarWithIcon or AvatarBadge, not a second overlapping Avatar.