Components
Avatar

Components

Tailwind CSS Avatar

Use Tailwind Avatars as placeholders for user profile images, initials, or SVG icons. Choose from circled, rounded, with status indicators, badges, and more.

Circular avatars

Use the .rounded-full utility class to make avatars circular.

Theme:

<div class="inline-block space-x-3">
                        <img class="inline-block size-8 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                        <img class="inline-block size-9.5 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                        <img class="inline-block size-11 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                        <img class="inline-block size-15.5 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                      </div>

Rounded avatars

Use the border radius utility classes to make avatars more rounded.

Theme:

<div class="inline-block space-x-3">
                        <img class="inline-block size-8 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                        <img class="inline-block size-9.5 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                        <img class="inline-block size-11 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                        <img class="inline-block size-15.5 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                      </div>

Status

Circular avatars with top status

Circular avatars with all kinds of status indicators.

Theme:

<div class="inline-block space-x-3">
                        <div class="relative inline-block">
                          <img class="inline-block size-8 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute top-0 end-0 block size-1.5 rounded-full ring-2 ring-layer bg-surface-3"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-9.5 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute top-0 end-0 block size-2.5 rounded-full ring-2 ring-layer bg-red-400"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-11 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute top-0 end-0 block size-3 rounded-full ring-2 ring-layer bg-teal-400"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-15.5 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute top-0 end-0 block size-3.5 rounded-full ring-2 ring-layer bg-yellow-400"></span>
                        </div>
                      </div>

Rounded avatars with top status

Rounded avatars with all kinds of status indicators.

Theme:

<div class="inline-block space-x-3">
                        <div class="relative inline-block">
                          <img class="inline-block size-8 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute top-0 end-0 block size-1.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-layer bg-surface-3"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-9.5 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute top-0 end-0 block size-2.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-layer bg-red-400"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-11 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute top-0 end-0 block size-3 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-layer bg-teal-400"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-15.5 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute top-0 end-0 block size-3.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-layer bg-yellow-400"></span>
                        </div>
                      </div>

Circular avatars with bottom status

Circular avatars with all kinds of status indicators.

Theme:

<div class="inline-block space-x-3">
                        <div class="relative inline-block">
                          <img class="inline-block size-8 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block size-1.5 rounded-full ring-2 ring-layer bg-surface-3"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-9.5 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block size-2.5 rounded-full ring-2 ring-layer bg-red-400"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-11 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block size-3 rounded-full ring-2 ring-layer bg-teal-400"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-15.5 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block size-3.5 rounded-full ring-2 ring-layer bg-yellow-400"></span>
                        </div>
                      </div>

Rounded avatars with bottom status

Rounded avatars with all kinds of status indicators.

Theme:

<div class="inline-block space-x-3">
                        <div class="relative inline-block">
                          <img class="inline-block size-8 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block size-1.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-layer bg-surface-3"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-9.5 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block size-2.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-layer bg-red-400"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-11 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block size-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-layer bg-teal-400"></span>
                        </div>
                        <div class="relative inline-block">
                          <img class="inline-block size-15.5 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block size-3.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-layer bg-yellow-400"></span>
                        </div>
                      </div>

Avatar with brand icons

Avatars with brand icons overlaid at the bottom corner, perfect for showing user profiles with associated platform or service indicators.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-10 flex justify-center">
                      <div class="inline-block space-x-6">
                        
                        <div class="relative inline-block">
                          <img class="inline-block size-11 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block p-2 rounded-full transform translate-y-1/2 translate-x-1/2 bg-layer">
                            <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/>
                              <path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/>
                            </svg>
                          </span>
                        </div>

<div class="relative inline-block">
                          <img class="inline-block size-11 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block p-2 rounded-full transform translate-y-1/2 translate-x-1/2 bg-layer">
                            <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7326 0C9.96372 0.00130479 8.53211 1.43397 8.53342 3.19935C8.53211 4.96473 9.96503 6.39739 11.7339 6.39869H14.9345V3.20065C14.9358 1.43527 13.5029 0.00260958 11.7326 0C11.7339 0 11.7339 0 11.7326 0M11.7326 8.53333H3.20053C1.43161 8.53464 -0.00130383 9.9673 3.57297e-06 11.7327C-0.00261123 13.4981 1.4303 14.9307 3.19922 14.9333H11.7326C13.5016 14.932 14.9345 13.4994 14.9332 11.734C14.9345 9.9673 13.5016 8.53464 11.7326 8.53333V8.53333Z" fill="#36C5F0"/>
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M32 11.7327C32.0013 9.9673 30.5684 8.53464 28.7995 8.53333C27.0306 8.53464 25.5976 9.9673 25.5989 11.7327V14.9333H28.7995C30.5684 14.932 32.0013 13.4994 32 11.7327ZM23.4666 11.7327V3.19935C23.4679 1.43527 22.0363 0.00260958 20.2674 0C18.4984 0.00130479 17.0655 1.43397 17.0668 3.19935V11.7327C17.0642 13.4981 18.4971 14.9307 20.2661 14.9333C22.035 14.932 23.4679 13.4994 23.4666 11.7327Z" fill="#2EB67D"/>
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2661 32C22.035 31.9987 23.4679 30.566 23.4666 28.8007C23.4679 27.0353 22.035 25.6026 20.2661 25.6013H17.0656V28.8007C17.0642 30.5647 18.4972 31.9974 20.2661 32ZM20.2661 23.4654H28.7995C30.5684 23.4641 32.0013 22.0314 32 20.266C32.0026 18.5006 30.5697 17.068 28.8008 17.0654H20.2674C18.4985 17.0667 17.0656 18.4993 17.0669 20.2647C17.0656 22.0314 18.4972 23.4641 20.2661 23.4654V23.4654Z" fill="#ECB22E"/>
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.93953e-07 20.266C-0.00130651 22.0314 1.43161 23.4641 3.20052 23.4654C4.96944 23.4641 6.40235 22.0314 6.40105 20.266V17.0667H3.20052C1.43161 17.068 -0.00130651 18.5006 8.93953e-07 20.266ZM8.53342 20.266V28.7993C8.53081 30.5647 9.96372 31.9974 11.7326 32C13.5016 31.9987 14.9345 30.566 14.9332 28.8007V20.2686C14.9358 18.5032 13.5029 17.0706 11.7339 17.068C9.96372 17.068 8.53211 18.5006 8.53342 20.266C8.53342 20.2673 8.53342 20.266 8.53342 20.266Z" fill="#E01E5A"/>
                            </svg>
                          </span>
                        </div>
                        
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="inline-block space-x-6">
                        
                        <div class="relative inline-block">
                          <img class="inline-block size-11 rounded-lg" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block p-2 rounded-full transform translate-y-1/2 translate-x-1/2 bg-layer">
                            <svg class="shrink-0 size-5" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/>
                              <path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/>
                            </svg>
                          </span>
                        </div>

Placeholder

Placeholder icon

Avatar placeholders featuring user icons for empty or loading states.

Theme:

<div class="inline-block space-x-3">
                        <span class="inline-block size-6 bg-surface rounded-full overflow-hidden">
                          <svg class="size-full text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="0.62854" y="0.359985" width="15" height="15" rx="7.5" fill="currentColor" class="fill-layer"/>
                            <path d="M8.12421 7.20374C9.21151 7.20374 10.093 6.32229 10.093 5.23499C10.093 4.14767 9.21151 3.26624 8.12421 3.26624C7.0369 3.26624 6.15546 4.14767 6.15546 5.23499C6.15546 6.32229 7.0369 7.20374 8.12421 7.20374Z" fill="currentColor"/>
                            <path d="M11.818 10.5975C10.2992 12.6412 7.42106 13.0631 5.37731 11.5537C5.01171 11.2818 4.69296 10.9631 4.42107 10.5975C4.28982 10.4006 4.27107 10.1475 4.37419 9.94123L4.51482 9.65059C4.84296 8.95684 5.53671 8.51624 6.30546 8.51624H9.95231C10.7023 8.51624 11.3867 8.94749 11.7242 9.62249L11.8742 9.93184C11.968 10.1475 11.9586 10.4006 11.818 10.5975Z" fill="currentColor"/>
                          </svg>
                        </span>

Placeholder initials

Avatar placeholders displaying user initials in a circular format, perfect for when profile images are unavailable.

Theme:

<div class="inline-block space-x-3">
                        <span class="inline-flex items-center justify-center size-8 rounded-full text-xs font-semibold bg-surface-4 text-foreground-inverse">
                          AC
                        </span>

Color variants

Solid color variants

Predefined solid color avatar styles.

Theme:

<div class="flex flex-wrap gap-3">
                        <span class="inline-flex items-center justify-center size-11 rounded-full font-semibold bg-secondary text-secondary-foreground">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 rounded-full font-semibold bg-surface-4 text-foreground-inverse">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 rounded-full font-semibold bg-green-500 text-foreground-inverse">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 rounded-full font-semibold bg-primary text-primary-foreground">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 rounded-full font-semibold bg-red-500 text-foreground-inverse">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 rounded-full font-semibold bg-yellow-500 text-foreground-inverse">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 rounded-full font-semibold bg-plain text-inverse">
                          AC
                        </span>
                      </div>

Soft color variants

Predefined soft color avatar styles.

Theme:

<div class="flex flex-wrap gap-3">
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full bg-surface text-surface-foreground">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full bg-muted text-muted-foreground-1">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full bg-teal-100 text-teal-800 dark:bg-teal-500/20 dark:text-teal-400">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full bg-primary-100 text-primary-800 dark:bg-primary-500/20 dark:text-primary-400">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-400">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-400">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full bg-plain/10 text-foreground-inverse">
                          AC
                        </span>
                      </div>

Outline color variants

Predefined outline color avatar styles.

Theme:

<div class="flex flex-wrap gap-3">
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full border border-line-8 text-foreground">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full border border-line-5 text-muted-foreground-1">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full border border-teal-500 text-teal-500">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full border border-primary text-primary">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full border border-red-500 text-red-500">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full border border-yellow-500 text-yellow-500">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full border border-line-inverse text-foreground-inverse">
                          AC
                        </span>
                      </div>

White color variants

Predefined white color avatar styles.

Theme:

<div class="inline-block space-x-3">
                        <span class="inline-flex items-center justify-center size-8 text-xs font-semibold rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-9.5 text-sm font-semibold rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-11 text-sm font-semibold rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs">
                          AC
                        </span>
                        <span class="inline-flex items-center justify-center size-15.5 font-semibold rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs">
                          AC
                        </span>
                      </div>

A tooltip can be used with an avatar to be displayed on focus or hover.

<div class="hs-tooltip inline-block">
                        <a class="hs-tooltip-toggle relative inline-block" href="#">
                          <img class="inline-block size-11 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                          <span class="absolute bottom-0 end-0 block size-3 rounded-full ring-2 ring-layer bg-teal-400"></span>
                          <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-lg shadow-2xs" role="tooltip">
                            Mark Wanner is online
                          </div>
                        </a>
                      </div>

Media

A media object component featuring an avatar image alongside text content.

Theme:

Tailwind CSS Avatar

Shape

Circular avatars

Rounded avatars

Status

Circular avatars with top status

Rounded avatars with top status

Circular avatars with bottom status

Rounded avatars with bottom status

Avatar with brand icons

Placeholder

Placeholder icon

Placeholder initials

Color variants

Solid color variants

Soft color variants

Outline color variants

White color variants

Displaying a tooltip

Media

On this page