Avatar

<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>