React Avatar

React Avatar represents people using icons, labels and images.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Avatar } from 'primereact/avatar';
import { AvatarGroup } from 'primereact/avatargroup';

Getting Started

Avatar has three built-in display modes; "label", "icon" and "image".

<Avatar label="P" />
<Avatar icon="pi pi-search" />
<Avatar image="user.png" />

Sizes

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

<Avatar label="P" size="large"/>

AvatarGroup

A set of Avatars can be displayed together using the AvatarGroup component.

<AvatarGroup>
    <Avatar label="P" />
    <Avatar icon="pi pi-search" />
    <Avatar image="user.png" />
    <Avatar label="+2" />
</AvatarGroup>

Shape

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

<Avatar label="P" shape="circle"/>

Badge

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

<Avatar image="user.png" size="xlarge">
    <Badge value="4" severity="danger" />
</Avatar>

Templating

Content can easily be customized with the default slot instead of using the built-in modes.

<Avatar>
   Content
</Avatar>

Theming

Avatar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Avatar showcase for demos and documentation.