Settings

Mode

Direction

Contrast

Layout

Stretch

Presets

Avatar

Image

<div class="flex gap-3 ">
  <img class="size-10 rounded-full" src="./assets/images/avatar/avatar-1.png" alt="" />
  <img class="size-10 rounded-full" src="./assets/images/avatar/avatar-2.png" alt="" />
  <img class="size-10 rounded-full" src="./assets/images/avatar/avatar-3.png" alt="" />
</div>
Icons

<div  class="flex gap-3 md:gap-4 flex-wrap ">
  <div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-primary-300">
    <i class="las la-user-circle text-2xl"></i>
  </div>
  <div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-secondary-300">
    <i class="las la-user-circle text-2xl"></i>
  </div>
  <div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-info-300">
    <i class="las la-user-circle text-2xl"></i>
  </div>
</div>
Grouped
9+
9+
9+
9+
9+

<div class="flex flex-col gap-4 md:gap-6 justify-center items-center">
<div class="f-center ">
  <img class="size-6 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2" src="./assets/images/avatar/avatar-1.png" alt="" />
  <img class="size-6 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2" src="./assets/images/avatar/avatar-2.png" alt="" />
  <img class="size-6 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2" src="./assets/images/avatar/avatar-3.png" alt="" />
  <img class="size-6 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2" src="./assets/images/avatar/avatar-4.png" alt="" />
  <div class="size-6 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2 bg-primary-300 font-semibold text-neutral-0 text-xs f-center">9+</div>
</div>
<div class="f-center ">
  <img class="size-8 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2.5" src="./assets/images/avatar/avatar-1.png" alt="" />
  <img class="size-8 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2.5" src="./assets/images/avatar/avatar-2.png" alt="" />
  <img class="size-8 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2.5" src="./assets/images/avatar/avatar-3.png" alt="" />
  <img class="size-8 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2.5" src="./assets/images/avatar/avatar-4.png" alt="" />
  <div class="size-8 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-2.5 bg-primary-300 font-semibold text-neutral-0 text-xs f-center">9+</div>
</div>
<div class="f-center ">
  <img class="size-10 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3" src="./assets/images/avatar/avatar-1.png" alt="" />
  <img class="size-10 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3" src="./assets/images/avatar/avatar-2.png" alt="" />
  <img class="size-10 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3" src="./assets/images/avatar/avatar-3.png" alt="" />
  <img class="size-10 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3" src="./assets/images/avatar/avatar-4.png" alt="" />
  <div class="size-10 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3 bg-primary-300 font-semibold text-neutral-0 m-text f-center">9+</div>
</div>
<div class="f-center ">
  <img class="size-12 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3.5" src="./assets/images/avatar/avatar-1.png" alt="" />
  <img class="size-12 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3.5" src="./assets/images/avatar/avatar-2.png" alt="" />
  <img class="size-12 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3.5" src="./assets/images/avatar/avatar-3.png" alt="" />
  <img class="size-12 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3.5" src="./assets/images/avatar/avatar-4.png" alt="" />
  <div class="size-12 rounded-full border border-neutral-0 dark:border-neutral-500 -mr-3.5 bg-primary-300 font-semibold text-neutral-0 m-text f-center">9+</div>
</div>
<div class="f-center ">
  <img class="size-[60px] rounded-full border border-neutral-0 dark:border-neutral-500 -mr-4" src="./assets/images/avatar/avatar-1.png" alt="" />
  <img class="size-[60px] rounded-full border border-neutral-0 dark:border-neutral-500 -mr-4" src="./assets/images/avatar/avatar-2.png" alt="" />
  <img class="size-[60px] rounded-full border border-neutral-0 dark:border-neutral-500 -mr-4" src="./assets/images/avatar/avatar-3.png" alt="" />
  <img class="size-[60px] rounded-full border border-neutral-0 dark:border-neutral-500 -mr-4" src="./assets/images/avatar/avatar-4.png" alt="" />
  <div class="size-[60px] rounded-full border border-neutral-0 dark:border-neutral-500 -mr-4 bg-primary-300 font-semibold text-neutral-0 l-text f-center">9+</div>
</div>
</div>
Letter
A
B
C
D
E

<div class="flex gap-3 md:gap-4 flex-wrap justify-center">               
  <div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-primary-300">
    <h5 class="text-neutral-0">A</h5>
  </div>
  <div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-secondary-300">
    <h5 class="text-neutral-0">B</h5>
  </div>
  <div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-info-300">
    <h5 class="text-neutral-0">C</h5>
  </div>
  <div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-warning-300">
    <h5 class="text-neutral-0">D</h5>
  </div>
  <div class="size-8 lg:size-10 rounded-full f-center text-neutral-0 bg-error-300">
    <h5 class="text-neutral-0">E</h5>
  </div>              
</div>
Variant

<div class="flex gap-3 md:gap-4 flex-wrap justify-center">
  <div class="size-8 lg:size-10 rounded-full f-center bg-primary-300 text-neutral-0">
    <i class="las la-wallet text-2xl"></i>
  </div>
  <div class="size-8 lg:size-10 rounded-2xl f-center bg-primary-300 text-neutral-0">
    <i class="las la-wallet text-2xl"></i>
  </div>
  <div class="size-8 lg:size-10 rounded-xl f-center bg-primary-300 text-neutral-0">
    <i class="las la-wallet text-2xl"></i>
  </div>
  <div class="size-8 lg:size-10 rounded-lg f-center bg-primary-300 text-neutral-0">
    <i class="las la-wallet text-2xl"></i>
  </div>
  <div class="size-8 lg:size-10 rounded f-center bg-primary-300 text-neutral-0">
    <i class="las la-wallet text-2xl"></i>
  </div>
  <div class="size-8 lg:size-10 f-center bg-primary-300 text-neutral-0">
    <i class="las la-wallet text-2xl"></i>
  </div>
</div>
Sizes

              
<div class="flex gap-3 md:gap-4 lg:gap-6 xl:gap-8 flex-wrap justify-center">
  <div class="flex gap-3 sm:gap-4 lg:gap-6 xxl:gap-8 items-center flex-wrap justify-center">
    <img class="size-6 rounded-full" src="./assets/images/avatar/avatar-1.png" alt="" />
    <img class="size-8 rounded-full" src="./assets/images/avatar/avatar-big-2.png" alt="" />
    <img class="size-10 rounded-full" src="./assets/images/avatar/avatar-big-3.png" alt="" />
    <img class="size-12 rounded-full" src="./assets/images/avatar/avatar-big-4.png" alt="" />
    <img class="size-[60px] rounded-full" src="./assets/images/avatar/avatar-big-5.png" alt="" />
    <img class="size-20 rounded-full" src="./assets/images/avatar/avatar-big-6.png" alt="" />
  </div>
  <div class="flex gap-3 sm:gap-4 lg:gap-6 xxl:gap-8 items-center flex-wrap justify-center">
    <img class="size-[100px] rounded-full" src="./assets/images/avatar/avatar-big-4.png" alt="" />
    <img class="size-[120px] rounded-full" src="./assets/images/avatar/avatar-big-5.png" alt="" />
    <img class="size-[140px] rounded-full" src="./assets/images/avatar/avatar-big-6.png" alt="" />
  </div>
  <div class="flex gap-3 sm:gap-4 lg:gap-6 xxl:gap-8 items-center flex-wrap justify-center">
    <img class="size-[160px] rounded-full" src="./assets/images/avatar/avatar-big-5.png" alt="" />
  </div>
</div>