Skip to content
Early Access

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
avatar

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

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