##### Recently Browses

- Apps Api
- Dashboard Marketing

##### Memebers

- Ethan Smith Backend Developer
- Isabella Garcia Digital Marketer
- Noah Walker Full Stack Developer

##### Filters

- customers:
  All customers list
- products:
  Bestselling products
- events:
  All upcoming events

## Avatar

1. Home
3. Components
5. Avatar

##### Mask Avatars

squircle

triangle

diamond

hexagon

    <img alt="" src="images/avatars/thumb-1.jpg" class="size-16 mask squircle">
    <img alt="" src="images/avatars/thumb-1.jpg" class="size-16 mask triangle">
    <img alt="" src="images/avatars/thumb-1.jpg" class="size-16 mask diamond">
    <img alt="" src="images/avatars/thumb-1.jpg" class="size-16 mask hexagon">

##### Sizing

    <img alt="" src="images/avatars/thumb-1.jpg" class="size-6 rounded-full">
    <img alt="" src="images/avatars/thumb-1.jpg" class="size-8 rounded-full">
    <img alt="" src="images/avatars/thumb-1.jpg" class="size-10 rounded-full">

##### Type

P

    <span class="size-8 flex items-center justify-center rounded-full bg-zinc-400 text-white text-sm font-semibold shrink-0 leading-none">
       P
    </span>
    <span class="size-8 flex items-center justify-center rounded-full bg-zinc-400 text-white text-xs font-semibold shrink-0 leading-none">
       <span class="icon-[solar--shield-user-linear] text-lg"></span>
    </span>
    <img alt="" src="images/avatars/thumb-1.jpg" class="size-8 rounded-full">

##### Group

3+
+20k users

    <div class="flex flex-wrap items-center -space-x-2">
       <img alt="" src="images/avatars/thumb-1.jpg" class="size-8 border-2 border-white dark:border-zinc-900 rounded-full">
       <img alt="" src="images/avatars/thumb-2.jpg" class="size-8 border-2 border-white dark:border-zinc-900 rounded-full">
       <img alt="" src="images/avatars/thumb-3.jpg" class="size-8 border-2 border-white dark:border-zinc-900 rounded-full">
    </div>
    <div class="flex flex-wrap items-center -space-x-2">
       <img alt="" src="images/avatars/thumb-1.jpg" class="size-8 border-2 border-white dark:border-zinc-900 rounded-full">
       <img alt="" src="images/avatars/thumb-2.jpg" class="size-8 border-2 border-white dark:border-zinc-900 rounded-full">
       <img alt="" src="images/avatars/thumb-3.jpg" class="size-8 border-2 border-white dark:border-zinc-900 rounded-full">
       <span class="size-8 flex items-center justify-center bg-zinc-400 border-2 border-white dark:border-zinc-900 rounded-full text-white text-xs font-semibold">
       3+
       </span>
    </div>
    <div class="flex flex-wrap items-center -space-x-2">
       <img alt="" src="images/avatars/thumb-7.jpg" class="size-10 border-2 border-white dark:border-zinc-900 rounded-full">
       <img alt="" src="images/avatars/thumb-8.jpg" class="size-10 border-2 border-white dark:border-zinc-900 rounded-full">
       <img alt="" src="images/avatars/thumb-9.jpg" class="size-10 border-2 border-white dark:border-zinc-900 rounded-full">
       <span class="h-10 px-3 flex items-center justify-center bg-zinc-400 border-2 border-white dark:border-zinc-900 rounded-full text-white text-xs font-semibold">
       +20k users
       </span>
    </div>

##### Status

    <span class="size-8 rounded-full block relative">
       <img alt="" src="images/avatars/thumb-4.jpg" class="size-8 rounded-full">
       <!--:Status:-->
       <span class="size-2.5 rounded-full border-2 border-white dark:border-zinc-900 bg-green-500 block absolute right-0 bottom-0"></span>
    </span>
    <span class="size-8 rounded-full block relative">
       <img alt="" src="images/avatars/thumb-4.jpg" class="size-8 rounded-full">
       <!--:Status:-->
       <span class="size-2.5 rounded-full border-2 border-white dark:border-zinc-900 bg-yellow-500 block absolute right-0 bottom-0"></span>
    </span>
    <span class="size-8 rounded-full block relative">
       <img alt="" src="images/avatars/thumb-4.jpg" class="size-8 rounded-full">
       <!--:Status:-->
       <span class="size-2.5 rounded-full border-2 border-white dark:border-zinc-900 bg-red-500 block absolute right-0 bottom-0"></span>
    </span>
    <span class="size-8 rounded-full block relative">
       <img alt="" src="images/avatars/thumb-4.jpg" class="size-8 rounded-full">
       <!--:Status:-->
       <span class="size-2.5 rounded-full border-2 border-white dark:border-zinc-900 bg-zinc-300 block absolute right-0 bottom-0"></span>
    </span>