Avatar

The Avatar component is used to represent a user with an image, icon, or text.

Props

Prop	Type	Default	Description
image	string	-	URL of the avatar image
label	string	-	Text to display when no image is provided
icon	string	-	Icon class to display when no image or label is provided
size	string	'md'	Size of the avatar. Options: 'xs', 'sm', 'md', 'lg', 'xl', '2xl'

Basic Usage

<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />

Sizes

Avatar supports 6 different sizes: xs, sm, md, lg, xl, and 2xl.

<Avatar size="xs" label="XS" />
<Avatar size="sm" label="SM" />
<Avatar size="md" label="MD" />
<Avatar size="lg" label="LG" />
<Avatar size="xl" label="XL" />
<Avatar size="2xl" label="2XL" />

XS

SM

MD

LG

XL

2XL

Online Status

Add an online indicator by wrapping the avatar in a relative positioned div with an online indicator child:

  <div class="flex gap-4">
    <div class="relative inline-block">
      <Avatar
        size="2xl"
        image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
      />
      <div
        style="position: absolute; bottom: -1px; right: 0px; width: 16px; height: 16px; border-radius: 9999px; border: 1.5px solid white; background-color: #22c55e; z-index: 10;"
      ></div>
    </div>
  </div>
</div>

Image with Different Sizes

<Avatar size="xs" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
<Avatar size="sm" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
<Avatar size="md" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
<Avatar size="lg" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
<Avatar size="xl" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
<Avatar size="2xl" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />