Myna UI

Avatars

Basic

Last Edited on January 25, 2022

P
<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>

<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  P
</div>

<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/1?square" />
</div>

<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/2?square" /><span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 ring ring-white"></span>
</div>

Basic Rounded

Last Edited on January 25, 2022

P
<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>

<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded bg-gray-100 text-sm font-bold uppercase text-gray-800">
  P
</div>

<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded object-cover object-center"
    src="https://source.boringavatars.com/beam/3?square" />
</div>

<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded object-cover object-center"
    src="https://source.boringavatars.com/beam/4?square" /><span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-2 w-2 rounded bg-green-500 ring ring-white"></span>
</div>

Sizes

Last Edited on January 25, 2022

<div
  class="relative flex h-6 w-6 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/1?square" />
</div>
<div
  class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/2?square" />
</div>
<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/3?square" />
</div>
<div
  class="relative flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/4?square" />
</div>
<div
  class="relative flex h-14 w-14 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-base font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/5?square" />
</div>
<div
  class="relative flex h-16 w-16 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-lg font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/6?square" />
</div>
<div
  class="relative flex h-20 w-20 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xl font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/7?square" />
</div>
<div
  class="relative flex h-24 w-24 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-2xl font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/8?square" />
</div>
<div
  class="relative flex h-28 w-28 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-3xl font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/9?square" />
</div>

Placeholder Sizes

Last Edited on January 25, 2022

<div
  class="relative flex h-6 w-6 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-14 w-14 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-base font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-16 w-16 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-lg font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-20 w-20 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xl font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-24 w-24 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-2xl font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-28 w-28 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-3xl font-bold uppercase text-gray-800">
  <svg
    class="h-1/2 w-1/2 text-gray-400"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>

With Indicator

Last Edited on January 25, 2022

M
M
M
M
M
M
M
M
M
<div
  class="relative flex h-6 w-6 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-1.5 w-1.5 rounded-full bg-gray-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-red-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-10 w-10 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-yellow-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-14 w-14 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-base font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-blue-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-16 w-16 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-lg font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full bg-indigo-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-20 w-20 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xl font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-4 w-4 rounded-full bg-purple-500 ring-4 ring-white"></span>
</div>

<div
  class="relative flex h-24 w-24 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-2xl font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-5 w-5 rounded-full bg-pink-500 ring-4 ring-white"></span>
</div>

<div
  class="relative flex h-28 w-28 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-3xl font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-6 w-6 rounded-full bg-gray-500 ring-4 ring-white"></span>
</div>