Avatar
Avatars are used to represent a user or a system entity.
Basic Avatar
PreviewCode
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/427"/>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full false">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full false">
<img src="https://source.boringavatars.com/beam/427" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
</div>
M
Named / Sizes
PreviewCode
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-6 w-6 text-xs rounded-full false">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-8 w-8 text-xs rounded-full false">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full false">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-12 w-12 text-sm rounded-full false">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-14 w-14 text-base rounded-full false">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-16 w-16 text-lg rounded-full false">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-20 w-20 text-xl rounded-full false">
<span>M</span>
</div>
M
M
M
M
M
M
M
Image / Sizes
PreviewCode
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/662"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/646"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/453"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/565"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/331"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/544"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/104"/>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-6 w-6 text-xs rounded-full false">
<img src="https://source.boringavatars.com/beam/662" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-8 w-8 text-xs rounded-full false">
<img src="https://source.boringavatars.com/beam/646" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full false">
<img src="https://source.boringavatars.com/beam/453" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-12 w-12 text-sm rounded-full false">
<img src="https://source.boringavatars.com/beam/565" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-14 w-14 text-base rounded-full false">
<img src="https://source.boringavatars.com/beam/331" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-16 w-16 text-lg rounded-full false">
<img src="https://source.boringavatars.com/beam/544" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-20 w-20 text-xl rounded-full false">
<img src="https://source.boringavatars.com/beam/104" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
</div>
Icon / Sizes
PreviewCode
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-6 w-6 text-xs rounded-full false">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-8 w-8 text-xs rounded-full false">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full false">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-12 w-12 text-sm rounded-full false">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-14 w-14 text-base rounded-full false">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-16 w-16 text-lg rounded-full false">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-20 w-20 text-xl rounded-full false">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
Indicator / Sizes
PreviewCode
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/802"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/839"/>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-6 w-6 text-xs rounded-full false">
<span>M</span>
<span aria-hidden="true" class="bg-slate-500 h-1.5 w-1.5 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-8 w-8 text-xs rounded-full false">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
<span aria-hidden="true" class="bg-emerald-500 h-2 w-2 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full false">
<img src="https://source.boringavatars.com/beam/802" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
<span aria-hidden="true" class="bg-emerald-500 h-2 w-2 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-12 w-12 text-sm rounded-full false">
<span>M</span>
<span aria-hidden="true" class="bg-red-500 h-2.5 w-2.5 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-14 w-14 text-base rounded-full false">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
<span aria-hidden="true" class="bg-emerald-500 h-3 w-3 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-16 w-16 text-lg rounded-full false">
<img src="https://source.boringavatars.com/beam/839" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
<span aria-hidden="true" class="bg-red-500 h-3.5 w-3.5 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-20 w-20 text-xl rounded-full false">
<span>M</span>
<span aria-hidden="true" class="bg-red-500 h-4 w-4 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
M
M
M