Avatars

Copy-paste ready avatar components for user profiles

← Back to Home

Avatar Sizes

Different avatar sizes for various use cases

HTML

<!-- Extra Small (24px) -->
<img src="avatar.jpg" alt="Avatar" class="w-6 h-6 rounded-full">

<!-- Small (32px) -->
<img src="avatar.jpg" alt="Avatar" class="w-8 h-8 rounded-full">

<!-- Medium (40px) -->
<img src="avatar.jpg" alt="Avatar" class="w-10 h-10 rounded-full">

<!-- Large (48px) -->
<img src="avatar.jpg" alt="Avatar" class="w-12 h-12 rounded-full">

<!-- Extra Large (64px) -->
<img src="avatar.jpg" alt="Avatar" class="w-16 h-16 rounded-full">

Avatar with Initials

Text-based avatars when no image is available

HTML

<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
  <span class="text-sm font-medium text-blue-600">JD</span>
</div>

<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
  <span class="text-sm font-medium text-green-600">AS</span>
</div>

Avatar with Status Indicator

Show online/offline status with a badge

HTML

<!-- Online -->
<div class="relative">
  <img src="avatar.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
  <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-400 ring-2 ring-white"></span>
</div>

<!-- Online with Pulse Animation -->
<div class="relative">
  <img src="avatar.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
  <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-400 ring-2 ring-white">
    <span class="absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75 animate-ping"></span>
  </span>
</div>

Avatar Shapes

Different avatar shapes and styles

Circular

Rounded

Square

Sharp

HTML

<!-- Circular -->
<img src="avatar.jpg" alt="Avatar" class="w-12 h-12 rounded-full">

<!-- Rounded -->
<img src="avatar.jpg" alt="Avatar" class="w-12 h-12 rounded-lg">

<!-- Square -->
<img src="avatar.jpg" alt="Avatar" class="w-12 h-12 rounded">

Avatar with Border

Add borders for emphasis

HTML

<!-- Ring Border -->
<img src="avatar.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white ring-2 ring-gray-300">

<!-- Colored Border -->
<img src="avatar.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-blue-500">

<!-- White Border with Shadow -->
<img src="avatar.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-lg">

Avatar Group

Multiple overlapping avatars

Basic Stack

With Counter

Larger Size

+12

HTML

<!-- Basic Stack -->
<div class="flex -space-x-2">
  <img src="avatar1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
  <img src="avatar2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
  <img src="avatar3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
</div>

<!-- With Counter -->
<div class="flex -space-x-2">
  <img src="avatar1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
  <img src="avatar2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
  <img src="avatar3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
  <div class="w-10 h-10 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center">
    <span class="text-xs font-medium text-gray-600">+5</span>
  </div>
</div>

Avatar with Text

Avatar combined with user information

John Doe

[email protected]

Jane Smith

Online

Mike Johnson

Pro

Designer

Sarah Williams

Product Manager

Last seen 2 hours ago

HTML

<!-- Basic -->
<div class="flex items-center">
  <img src="avatar.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
  <div class="ml-3">
    <p class="text-sm font-medium text-gray-900">John Doe</p>
    <p class="text-sm text-gray-500">[email protected]</p>
  </div>
</div>

<!-- With Status -->
<div class="flex items-center">
  <div class="relative">
    <img src="avatar.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
    <span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white"></span>
  </div>
  <div class="ml-3">
    <p class="text-sm font-medium text-gray-900">Jane Smith</p>
    <p class="text-xs text-green-600">Online</p>
  </div>
</div>

Avatar Placeholders

Placeholder avatars with icons

HTML

<div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
  <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
  </svg>
</div>