Skip to content
Early Access

Avatar Groups

Avatar groups are used to group related avatars together.

Basic Avatar Group

PreviewCode
<div class="flex -space-x-3">
  <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 ring ring-white">
    <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 ring ring-white">
    <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 ring ring-white">
    <span>M</span>
  </div>
</div>
M
M
M

Reverse Order

PreviewCode
<div class="flex flex-row-reverse justify-end -space-x-3 space-x-reverse">
  <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 ring ring-white">
    <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 ring ring-white">
    <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 ring ring-white">
    <span>M</span>
  </div>
</div>
M
M
M

Sizes

PreviewCode
<div class="flex -space-x-1">
  <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 ring ring-white">
    <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-6 w-6 text-xs rounded-full ring ring-white">
    <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-6 w-6 text-xs rounded-full ring ring-white">
    <span>M</span>
  </div>
</div>
<div class="flex -space-x-3">
  <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 ring ring-white">
    <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 ring ring-white">
    <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 ring ring-white">
    <span>M</span>
  </div>
</div>
<div class="flex -space-x-4">
  <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 ring ring-white">
    <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 ring ring-white">
    <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 ring ring-white">
    <span>M</span>
  </div>
</div>
M
M
M
M
M
M
M
M
M

Images

PreviewCode
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/405"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/703"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/818"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/617"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/162"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/454"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/37"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/732"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/87"/>
<div class="flex -space-x-1">
  <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 ring ring-white">
    <img src="https://source.boringavatars.com/beam/405" 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-6 w-6 text-xs rounded-full ring ring-white">
    <img src="https://source.boringavatars.com/beam/703" 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-6 w-6 text-xs rounded-full ring ring-white">
    <img src="https://source.boringavatars.com/beam/818" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
  </div>
</div>
<div class="flex -space-x-3">
  <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 ring ring-white">
    <img src="https://source.boringavatars.com/beam/617" 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 ring ring-white">
    <img src="https://source.boringavatars.com/beam/162" 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 ring ring-white">
    <img src="https://source.boringavatars.com/beam/454" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
  </div>
</div>
<div class="flex -space-x-4">
  <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 ring ring-white">
    <img src="https://source.boringavatars.com/beam/37" 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 ring ring-white">
    <img src="https://source.boringavatars.com/beam/732" 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 ring ring-white">
    <img src="https://source.boringavatars.com/beam/87" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
  </div>
</div>
avatar
avatar
avatar
avatar
avatar
avatar
avatar
avatar
avatar

Centered

PreviewCode
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/951"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/54"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/597"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/958"/>
<link rel="preload" as="image" href="https://source.boringavatars.com/beam/190"/>
<div class="z-0 flex items-center -space-x-2">
  <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 ring ring-white z-0">
    <img src="https://source.boringavatars.com/beam/951" 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 ring ring-white z-10">
    <img src="https://source.boringavatars.com/beam/54" 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 ring ring-white z-20">
    <img src="https://source.boringavatars.com/beam/597" 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 ring ring-white z-10">
    <img src="https://source.boringavatars.com/beam/958" 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 ring ring-white z-0">
    <img src="https://source.boringavatars.com/beam/190" alt="avatar" class="rounded-full h-full w-full object-cover object-center"/>
  </div>
</div>
avatar
avatar
avatar
avatar
avatar