Avatar represents people using icons, labels and images.
<div class="grid">
<div class="col-12 md:col-4">
<div class="card">
<h5>Label</h5>
<p:avatar label="P" styleClass="mr-2" size="xlarge" />
<p:avatar label="V" styleClass="mr-2" size="large" style="background-color:#2196F3; color:#fff"/>
<p:avatar label="U" styleClass="mr-2" style="background-color:#9c27b0; color:#fff" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Label - Circle</h5>
<p:avatar label="P" styleClass="mr-2" size="xlarge" shape="circle" />
<p:avatar label="V" styleClass="mr-2" size="large" style="background-color:#2196F3; color:#fff" shape="circle" />
<p:avatar label="U" styleClass="mr-2" style="background-color:#9c27b0; color:#fff" shape="circle" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Label - Badge and Dynamic</h5>
<p:badge value="4">
<p:avatar label="U" size="xlarge" />
</p:badge>
<p:avatar label="PrimeFaces Rocks" dynamicColor="true" styleClass="ml-2" size="large"/>
<p:avatar label="Johann Chrysostom Wolfgang Amadeus Mozart" dynamicColor="true" lightness="80"
styleClass="ml-2" title="Wolfgang Amadeus Mozart"/>
</div>
</div>
</div>
<div class="grid">
<div class="col-12 md:col-4">
<div class="card">
<h5>Icon</h5>
<p:avatar icon="pi pi-user" styleClass="mr-2" size="xlarge" />
<p:avatar icon="pi pi-user" styleClass="mr-2" size="large" style="background-color:#2196F3; color:#fff"/>
<p:avatar icon="pi pi-user" styleClass="mr-2" style="background-color:#9c27b0; color:#fff" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Icon - Circle</h5>
<p:avatar icon="pi pi-user" styleClass="mr-2" size="xlarge" shape="circle" />
<p:avatar icon="pi pi-user" styleClass="mr-2" size="large" style="background-color:#2196F3; color:#fff" shape="circle" />
<p:avatar icon="pi pi-user" styleClass="mr-2" style="background-color:#9c27b0; color:#fff" shape="circle" />
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Icon - Badge</h5>
<p:badge value="4">
<p:avatar icon="pi pi-user" size="xlarge"/>
</p:badge>
</div>
</div>
</div>
<div class="grid">
<div class="col-12 md:col-4">
<div class="card">
<h5>Image</h5>
<p:avatar styleClass="mr-2" size="xlarge" shape="circle">
<p:graphicImage name="demo/images/avatar/amyelsner.png"/>
</p:avatar>
<p:avatar styleClass="mr-2" size="large" shape="circle">
<p:graphicImage name="demo/images/avatar/asiyajavayant.png"/>
</p:avatar>
<p:avatar styleClass="mr-2" shape="circle">
<p:graphicImage name="demo/images/avatar/onyamalimba.png"/>
</p:avatar>
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Avatar Group</h5>
<p:avatarGroup styleClass="mb-3">
<p:avatar size="large" shape="circle">
<p:graphicImage name="demo/images/avatar/amyelsner.png"/>
</p:avatar>
<p:avatar size="large" shape="circle">
<p:graphicImage name="demo/images/avatar/asiyajavayant.png"/>
</p:avatar>
<p:avatar size="large" shape="circle">
<p:graphicImage name="demo/images/avatar/onyamalimba.png"/>
</p:avatar>
<p:avatar size="large" shape="circle">
<p:graphicImage name="demo/images/avatar/ionibowcher.png"/>
</p:avatar>
<p:avatar size="large" shape="circle">
<p:graphicImage name="demo/images/avatar/xuxuefeng.png"/>
</p:avatar>
<p:avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color:#fff" />
</p:avatarGroup>
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<h5>Gravatar and fallback</h5>
<p:avatar styleClass="mr-2" size="xlarge" label="Walter">
<p:graphicImage name="demo/images/organization/walter.jpg"/>
</p:avatar>
<p:avatar gravatar="contact@primetek.com.tr" gravatarConfig="d=mp" size="large" styleClass="mr-2" />
<p:avatar gravatar="notfound@avatar.com" label="Not Found" styleClass="mr-2" />
<p:avatar icon="pi pi-user" styleClass="mr-2">
<p:graphicImage name="demo/images/organization/walter.jpg" rendered="false"/>
</p:avatar>
</div>
</div>
</div>