Avatars

ADMIN PANEL

Avatar Sizes

Use the .w-[size] class to add custom size for avatar.

Preview Html
avatar
avatar
avatar
avatar
  <div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
   <div class="avatar">
    <div class="rounded w-28">
      <img src="../../image.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar">
     <div class="w-24 rounded">
       <img src="../../image.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar">
     <div class="w-20 rounded">
      <img src="../../image.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar">
     <div class="w-16 rounded">
       <img src="../../image.jpg" alt="avatar"/>
     </div>
   </div>
</div>

Avatar Shapes

Use the .rounded-* utility class to create avatar shapes.

Preview Html
avatar
avatar
avatar
avatar
  <div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
   <div class="rounded-none avatar">
    <div class="w-28 ">
      <img src="../../image.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar rounded-xl">
     <div class="w-24">
      <img src="../../image.jpg" alt="avatar"/>
     </div>
   </div>
   <div class="avatar rounded-3xl">
     <div class="w-20">
       <img src="../../image.jpg" alt="avatar"/>
     </div>
   </div> 
   <div class="rounded-full avatar">
     <div class="w-16">
       <img src="../../image.jpg" alt="avatar"/>
     </div>
   </div>
</div>

Avatar Groups

Use the .avatar-group class to create the group of avatars with the size.

Preview Html
avatar
avatar
avatar
avatar
avatar
avatar
avatar
avatar
avatar
                       <div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
   <div class="items-center justify-center avatar-group">
    <div class="border-white avatar rounded-xl">
     <div class="w-24">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar rounded-xl">
     <div class="w-20">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar rounded-xl">
     <div class="w-16">
        <span class="text-xs font-bold text-dark"/> 26+
      </div>
    </div>
    <div class="items-center justify-center avatar-group">
    <div class="border-white avatar">
     <div class="w-20">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar">
     <div class="w-16">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar">
     <div class="w-12">
        <span class="text-xs font-bold text-dark"/> 26+
      </div>
    </div>
    <div class="items-center justify-center avatar-group">
    <div class="border-white avatar">
     <div class="w-12">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
    <div class="border-white avatar">
     <div class="w-12">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
    <div class="border-white avatar">
     <div class="w-12">
       <span class="text-xs font-bold text-dark"/> 26+
     </div>
    </div>
   </div>
</div>

Avatar With Counter

Use the .avatar-group class to create the group of avatars with the counter.

Preview Html
avatar
avatar
26+
avatar
avatar
26+
avatar
avatar
26+
  <div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
   <div class="items-center justify-center avatar-group">
    <div class="border-white rounded-none avatar">
     <div class="w-24">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar rounded-3xl">
     <div class="w-20">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar">
     <div class="w-16">
        <span class="text-xs font-bold text-dark"/> 26+
      </div>
    </div> 
    <div class="items-center justify-center avatar-group">
    <div class="border-white avatar">
     <div class="w-20">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar">
     <div class="w-16">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
     <div class="border-white avatar">
     <div class="w-12">
        <span class="text-xs font-bold text-dark"/> 26+
      </div>
    </div>
    <div class="items-center justify-center avatar-group">
    <div class="border-white avatar">
     <div class="w-12">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
    <div class="border-white avatar">
     <div class="w-12">
       <img src="../../image.jpg" alt="avatar"/>
      </div>
    </div>
    <div class="border-white avatar">
     <div class="w-12">
       <span class="text-xs font-bold text-dark"/> 26+
      </div>
    </div>
   </div>
</div>

Avatar Status

Use the .status-* class to indicate the status of avatar.

Preview Html
avatar
avatar
avatar
avatar 
  <div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
   <div class="avatar">
    <div class="relative overflow-visible rounded w-14">
      <img src="../../image.jpg" alt="avatar"/>
      <div class="status-offline"></div>
     </div>
   </div>
   <div class="avatar">
     <div class="relative overflow-visible rounded w-14">
       <img src="../../image.jpg" alt="avatar"/>
      <div class="status-online"></div>
     </div>
   </div>
   <div class="avatar">
     <div class="relative overflow-visible rounded w-14">
      <img src="../../image.jpg" alt="avatar"/>
      <div class="status-online"></div>
     </div>
   </div>
   <div class="avatar">
     <div class="relative overflow-visible rounded w-14">
       <img src="../../image.jpg" alt="avatar"/>
      <div class="status-dnd"></div>
     </div>
   </div>
</div>

Avatar Ping

Use the .animate-ping utility class to indicate important message.

Preview Html
avatar
avatar
avatar
avatar 
  <div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
   <div class="avatar">
     <div class="relative overflow-visible rounded w-14">
      <img src="../../image.jpg" alt="avatar"/>
      <div class="status-online animate-ping"></div>
     </div>
   </div>
   <div class="avatar">
     <div class="relative overflow-visible rounded w-14">
       <img src="../../image.jpg" alt="avatar"/>
      <div class="status-dnd animate-ping"></div>
     </div>
   </div> 
   <div class="avatar">
     <div class="relative overflow-visible rounded w-14">
       <img src="../../image.jpg" alt="avatar"/>
      <div class="status-offline"></div>
     </div>
   </div>
   <div class="avatar">
    <div class="relative overflow-visible rounded w-14">
      <img src="../../image.jpg" alt="avatar"/>
      <div class="status-offline animate-ping"></div>
     </div>
   </div>
</div>

Avatar Initial

Use initial letter as a avatar.

Preview Html
R
O
X
O
  <div class="flex flex-wrap items-center gap-[8px] 2xl:gap-[6px]">
   <div class="inline-flex avatar">
    <div class="flex items-center justify-center bg-gray-300 rounded w-14">
      <span class="text-3xl"> R </span>
     </div>
   </div>
   <div class="inline-flex avatar">
     <div class="flex items-center justify-center bg-gray-300 rounded w-14">
       <span class="text-2xl"> O </span>
     </div>
   </div>
   <div class="inline-flex avatar">
     <div class="flex items-center justify-center bg-gray-300 rounded w-14">
      <span class="text-xl"> X </span>
     </div>
   </div>
   <div class="inline-flex avatar">
     <div class="flex items-center justify-center bg-gray-300 rounded w-14">
       <span class="text-lg"> O </span>
     </div>
   </div> 
</div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now