Avatars
People and companies, as pictures or initials
Sizes
Extra small to extra large.
ML
TO
IC
RM
HS
LM
Code
<span class="avatar avatar-xs" style="background: linear-gradient(135deg, #8E9AFF, #4645BB)" title="Maya Lindqvist">ML</span>
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #5EC8F8, #1C64C8)" title="Theo Okafor">TO</span>
<span class="avatar" style="background: linear-gradient(135deg, #4ADEB5, #0E7A62)" title="Ines Carvalho">IC</span>
<span class="avatar avatar-lg" style="background: linear-gradient(135deg, #FDBA5C, #D9480F)" title="Rahul Mehta">RM</span>
<span class="avatar avatar-xl" style="background: linear-gradient(135deg, #FF8FA8, #C2185B)" title="Hana Sato">HS</span>
<span class="avatar avatar-2xl" style="background: linear-gradient(135deg, #C9A2FF, #7A3FD1)" title="Lucas Moreau">LM</span>Presence
Online, away, busy and offline.
HS
LM
AN
EP
Code
<span class="avatar avatar-lg" style="background: linear-gradient(135deg, #FF8FA8, #C2185B)">HS<span class="presence" role="img" aria-label="online"></span></span>
<span class="avatar avatar-lg" style="background: linear-gradient(135deg, #C9A2FF, #7A3FD1)">LM<span class="presence away" role="img" aria-label="away"></span></span>
<span class="avatar avatar-lg" style="background: linear-gradient(135deg, #7DD3C0, #2F6F8F)">AN<span class="presence busy" role="img" aria-label="busy"></span></span>
<span class="avatar avatar-lg" style="background: linear-gradient(135deg, #F9A8D4, #A21CAF)">EP<span class="presence offline" role="img" aria-label="offline"></span></span>Square
For companies and teams.
HL
NT
BS
QF
Code
<span class="avatar avatar-lg avatar-square" style="background: linear-gradient(135deg, #8E9AFF, #4645BB)">HL</span>
<span class="avatar avatar-lg avatar-square" style="background: linear-gradient(135deg, #4ADEB5, #0E7A62)">NT</span>
<span class="avatar avatar-lg avatar-square" style="background: linear-gradient(135deg, #FF8FA8, #C2185B)">BS</span>
<span class="avatar avatar-lg avatar-square" style="background: linear-gradient(135deg, #7DD3C0, #2F6F8F)">QF</span>Group
Overlapping, with a count.
ML
TO
IC
RM
HS
+12
LM
AN
EP
Code
<div class="avatars">
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #8E9AFF, #4645BB)" title="Maya Lindqvist">ML</span>
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #5EC8F8, #1C64C8)" title="Theo Okafor">TO</span>
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #4ADEB5, #0E7A62)" title="Ines Carvalho">IC</span>
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #FDBA5C, #D9480F)" title="Rahul Mehta">RM</span>
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #FF8FA8, #C2185B)" title="Hana Sato">HS</span>
<span class="avatar more">+12</span>
</div>
<div class="avatars">
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #C9A2FF, #7A3FD1)" title="Lucas Moreau">LM</span>
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #7DD3C0, #2F6F8F)" title="Amara Nwosu">AN</span>
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #F9A8D4, #A21CAF)" title="Elena Petrova">EP</span>
</div>