Tailwind CSS Avatar

Use our Tailwind CSS Avatar to portray people or objects. It can be used as a visual identifier for a user profile on your website.

See below our avatar components examples.

Avatar Variants

Use the following example to create rounded and circular avatar components for you Tailwind CSS project.

<img
  class="relative inline-block h-12 w-12 rounded-lg object-cover object-center"
  alt="Image placeholder"
  src="/img/face-2.jpg"
/>
<img
  class="relative inline-block h-12 w-12 rounded-full object-cover object-center"
  alt="Image placeholder"
  src="/img/face-2.jpg"
/>

Avatar Sizes

Use the following example to create avatars with different sizes, from small sized to large sized.

<img
  class="relative mr-4 inline-block h-6 w-6 rounded-md object-cover object-center"
  alt="Image placeholder"
  src="/img/face-2.jpg"
/>
<img
  class="relative mr-4 inline-block h-9 w-9 rounded-md object-cover object-center"
  alt="Image placeholder"
  src="/img/face-2.jpg"
/>
<img
  class="relative mr-4 inline-block h-12 w-12 rounded-lg object-cover object-center"
  alt="Image placeholder"
  src="/img/face-2.jpg"
/>
<img
  class="relative mr-4 inline-block h-16 w-16 rounded-lg object-cover object-center"
  alt="Image placeholder"
  src="/img/face-2.jpg"
/>
<img
  class="relative mr-4 inline-block h-20 w-20 rounded-xl object-cover object-center"
  alt="Image placeholder"
  src="/img/face-2.jpg"
/>
<img
  class="relative inline-block h-24 w-24 rounded-2xl object-cover object-center"
  alt="Image placeholder"
  src="/img/face-2.jpg"
/>

Avatar Stack

<div class="flex items-center -space-x-4">
  <img
    alt="user 1"
    src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
    class="relative inline-block h-12 w-12 rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
  />
  <img
    alt="user 2"
    src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1061&amp;q=80"
    class="relative inline-block h-12 w-12 rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
  />
  <img
    alt="user 3"
    src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1288&amp;q=80"
    class="relative inline-block h-12 w-12 rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
  />
  <img
    alt="user 4"
    src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1287&amp;q=80"
    class="relative inline-block h-12 w-12 rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
  />
  <img
    alt="user 5"
    src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1760&amp;q=80"
    class="relative inline-block h-12 w-12 rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
  />
</div>

alert

breadcrumbs

Edit this page on Github