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