Register

Avatars

People shown by their initials, in five sizes and six tones

Sizes

Small for tables, large for profiles: 24, 32, 40, 56 and 96 pixels.

Show the code
<span class="avatar sm tone-pink" aria-hidden="true">LP</span>
<span class="avatar tone-pink" aria-hidden="true">LP</span>
<span class="avatar lg tone-pink" aria-hidden="true">LP</span>
<span class="avatar xl tone-pink" aria-hidden="true">LP</span>
<span class="avatar xxl tone-pink" aria-hidden="true">LP</span>

Tones

The tone comes from the name, so a person always has the same colour.

Show the code
<span class="avatar lg tone-amber" aria-hidden="true">GO</span>
<span class="avatar lg tone-violet" aria-hidden="true">DR</span>
<span class="avatar lg tone-green" aria-hidden="true">MC</span>
<span class="avatar lg tone-gray" aria-hidden="true">OL</span>
<span class="avatar lg" aria-hidden="true">AM</span>
<span class="avatar lg tone-violet" aria-hidden="true">OM</span>

With a status

Online, away, busy or offline; the words say it too, so the colour is not the only sign.

Leo ParkOnline · On Till 2
Grace OkaforAway · On a break
Omar LopezBusy · Counting stock
Mia ChenOffline · Off today
Show the code
<div class="stack w-100">
<div class="cluster gap-2">
<span class="avatar lg tone-pink" aria-hidden="true">LP<span class="status online" aria-hidden="true">
</span>
</span>
<span>
<b class="fw-500 d-block">Leo Park</b>
<span class="muted fs-sm">Online · On Till 2</span>
</span>
</div>
<div class="cluster gap-2">
<span class="avatar lg tone-amber" aria-hidden="true">GO<span class="status away" aria-hidden="true">
</span>
</span>
<span>
<b class="fw-500 d-block">Grace Okafor</b>
<span class="muted fs-sm">Away · On a break</span>
</span>
</div>
<div class="cluster gap-2">
<span class="avatar lg tone-gray" aria-hidden="true">OL<span class="status busy" aria-hidden="true">
</span>
</span>
<span>
<b class="fw-500 d-block">Omar Lopez</b>
<span class="muted fs-sm">Busy · Counting stock</span>
</span>
</div>
<div class="cluster gap-2">
<span class="avatar lg tone-green" aria-hidden="true">MC<span class="status offline" aria-hidden="true">
</span>
</span>
<span>
<b class="fw-500 d-block">Mia Chen</b>
<span class="muted fs-sm">Offline · Off today</span>
</span>
</div>
</div>

A group

A team at a glance, ending in a count of the rest; the full names are in the label.

Show the code
<span class="avatar-group" role="img" aria-label="Grace Okafor, Ben Lopez, Leo Park, Diego Reyes, Mia Chen, Omar Lopez and Ana Martins">
<span class="avatar tone-amber" aria-hidden="true">GO</span>
<span class="avatar tone-green" aria-hidden="true">BL</span>
<span class="avatar tone-pink" aria-hidden="true">LP</span>
<span class="avatar tone-amber" aria-hidden="true">DR</span>
<span class="avatar more" aria-hidden="true">+3</span>
</span>

Square, with an icon

For a store, a device or a channel.

Show the code
<span class="avatar square lg" aria-hidden="true">
<i class="ti ti-building-store">
</i>
</span>
<span class="avatar square lg tone-green" aria-hidden="true">
<i class="ti ti-cash-register">
</i>
</span>
<span class="avatar square lg tone-violet" aria-hidden="true">
<i class="ti ti-world">
</i>
</span>