📄 primeng/avatar

File: avatar.md | Updated: 11/15/2025

Source: https://primeng.org/avatar

PassThrough Attributes just landed ✅Learn More

  • SearchK

  • Primary

    Surface

    PresetsAuraMaterialLaraNora

    Ripple

    RTL

  • v20

  • FEATURES

  • API

  • THEMING

  • PASSTHROUGH

Avatar

Avatar represents people using icons, labels and images.

Import #

import { AvatarModule } from 'primeng/avatar'; import { AvatarGroupModule } from 'primeng/avatargroup';

Label #

A letter Avatar is defined with the label property.

Label

PVU

Circle

PVU

Badge

U4

<p-avatar label="P" class="mr-2" size="xlarge" /> <p-avatar label="V" class="mr-2" size="large" [style]="{ 'background-color': '#ece9fc', color: '#2a1261' }" /> <p-avatar label="U" class="mr-2" [style]="{ 'background-color': '#dee9fc', color: '#1a2551' }" /> <p-avatar label="P" class="mr-2" size="xlarge" shape="circle" /> <p-avatar label="V" class="mr-2" size="large" [style]="{ 'background-color': '#ece9fc', color: '#2a1261' }" shape="circle" /> <p-avatar label="U" class="mr-2" [style]="{ 'background-color': '#dee9fc', color: '#1a2551' }" shape="circle" /> 
<p-overlay-badge value="4" severity="danger" class="inline-flex">
    <p-avatar label="U" size="xlarge" />
</p-overlay-badge>

Icon #

A font icon is displayed as an Avatar with the icon property.

Icon
Circle
Badge

4

<p-avatar icon="pi pi-user" class="mr-2" size="xlarge" /> <p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" /> <p-avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" /> <p-avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" /> <p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" /> <p-avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" /> 
<p-overlay-badge value="4" severity="danger" class="inline-flex">
    <p-avatar icon="pi pi-user" size="xlarge" />
</p-overlay-badge>

Image #

Use the image property to display an image as an Avatar.

Image

Badge

4

Gravatar

<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" /> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" /> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" shape="circle" /> 
<p-overlay-badge value="4" severity="danger" class="inline-flex">
    <p-avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg" size="xlarge" />
</p-overlay-badge>

<p-avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />

AvatarGroup #

Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.

+2

<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" size="large" shape="circle" /> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" size="large" shape="circle" /> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" size="large" shape="circle" /> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" size="large" shape="circle" /> <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" size="large" shape="circle" /> <p-avatar label="+2" shape="circle" size="large" />

Size #

size property defines the size of the Avatar with large and xlarge as possible values.

PT

<p-avatar label="P" size="large" /> <p-avatar label="T" size="xlarge" />

Shape #

Avatar comes in two different styles specified with the shape property, square is the default and circle is the alternative.

PT

<p-avatar label="P" shape="circle" /> <p-avatar label="T" />

Badge #

A badge can be added to an Avatar with the Badge directive.

<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" pBadge value="4" severity="danger" />

Template #

Content can easily be customized with the dynamic content instead of using the built-in modes.

Content

<p-avatar size="xlarge"> <span class="text-base">Content</span> </p-avatar>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

| Name | Element | | --- | --- | | p-avatar | Container element. | | p-avatar-image | Container element in image mode. | | p-avatar-circle | Container element with a circle shape. | | p-avatar-text | Text of the Avatar. | | p-avatar-icon | Icon of the Avatar. | | p-avatar-lg | Container element with a large size. | | p-avatar-xl | Container element with an xlarge size. |

AvatarGroup Style #

| Name | Element | | --- | --- | | p-avatar-group | Container element. |

Accessibility #

Screen Reader

Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like img along with aria-labelledby or aria-label to describe the component. In case avatars need to be tabbable, tabIndex can be added as well to implement custom key handlers.

Keyboard Support

Component does not include any interactive elements.

  • Import

  • Label

  • Icon

  • Image

  • AvatarGroup

  • Size

  • Shape

  • Badge

  • Template

  • Style

  • AvatarGroup Style

  • Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

Learn More

PrimeNG 20.3.0 by PrimeTek