Avatar

Avatars in WeedorUI are visual components used to represent users or entities in your application. Typically displayed as images, icons, or initials, avatars help identify individuals in user profiles, comment sections, and lists. These components are fully customizable, allowing you to adjust their size, shape, and appearance to match your design needs.

Avatar

<div class="space-x-4 w-32 h-32 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    class="w-full h-full object-cover"
  />
</div>

<div className="space-x-4 w-32 h-32 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    className="w-full h-full object-cover"
  />
</div>

Avatar In Custon Sizes

<div class="space-x-4 w-28 h-28 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    class="w-full h-full object-cover"
  />
</div>

<div class="space-x-4 w-24 h-24 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    class="w-full h-full object-cover"
  />
</div>

<div class="space-x-4 w-16 h-16 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    class="w-full h-full object-cover"
  />
</div>

<div class="space-x-4 w-12 h-12 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    class="w-full h-full object-cover"
  />
</div>

<div className="space-x-4 w-28 h-28 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    className="w-full h-full object-cover"
  />
</div>

<div className="space-x-4 w-24 h-24 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    className="w-full h-full object-cover"
  />
</div>

<div className="space-x-4 w-16 h-16 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    className="w-full h-full object-cover"
  />
</div>

<div className="space-x-4 w-12 h-12 overflow-hidden rounded-md">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    className="w-full h-full object-cover"
  />
</div>

Avatar Rounded

<div class="space-x-4 w-28 h-28 overflow-hidden rounded-3xl group">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    class="w-full h-full object-cover group-hover:scale-110 transition duration-300"
  />
</div>

<div class="space-x-4 w-28 h-28 overflow-hidden rounded-full group">
  <img
    src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    alt="Avatar"
    class="w-full h-full object-cover group-hover:scale-110 transition duration-300"
  />
</div>

  <div className="space-x-4 w-28 h-28 overflow-hidden rounded-3xl group">
    <img
      src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
      alt="Avatar"
      className="w-full h-full object-cover group-hover:scale-110 transition duration-300"
    />
  </div>

  <div className="space-x-4 w-28 h-28 overflow-hidden rounded-full group">
    <img
      src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
      alt="Avatar"
      className="w-full h-full object-cover group-hover:scale-110 transition duration-300"
    />
  </div>

Avatar With Ring

  <div class="space-x-4 w-24 h-24 overflow-hidden rounded-full group ring-4 ring-red-500">
      <img
          src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt="Avatar"
          class="w-full h-full object-cover group-hover:scale-110 transition duration-300"
          />
  </div>

  <div class="space-x-4 w-16 h-16 overflow-hidden rounded-full group ring-4 ring-red-500">
      <img
          src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt="Avatar"
          class="w-full h-full object-cover group-hover:scale-110 transition duration-300"
          />
  </div>

  <div class="space-x-4 w-12 h-12 overflow-hidden rounded-full group ring-4 ring-red-500">
      <img
          src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt="Avatar"
          class="w-full h-full object-cover group-hover:scale-110 transition duration-300"
          />
  </div>

<div className="space-x-4 w-24 h-24 overflow-hidden rounded-full group ring-4 ring-red-500">
    <img
        src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
        alt="Avatar"
        className="w-full h-full object-cover group-hover:scale-110 transition duration-300"
        />
</div>

<div className="space-x-4 w-16 h-16 overflow-hidden rounded-full group ring-4 ring-red-500">
    <img
        src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
        alt="Avatar"
        className="w-full h-full object-cover group-hover:scale-110 transition duration-300"
        />
</div>

<div className="space-x-4 w-12 h-12 overflow-hidden rounded-full group ring-4 ring-red-500">
    <img
        src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
        alt="Avatar"
        className="w-full h-full object-cover group-hover:scale-110 transition duration-300"
        />
</div>

Icon Avatar

    <div class="space-x-4 w-12 h-12 bg-slate-400 overflow-hidden rounded-full bg-slate-300 flex items-center justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="size-6"
      >
        <path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" />
      </svg>
    </div>

    <div class="space-x-4 w-12 h-12 bg-blue-400 overflow-hidden rounded-full bg-slate-300 flex items-center justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="size-6"
      >
        <path d="M4.913 2.658c2.075-.27 4.19-.408 6.337-.408 2.147 0 4.262.139 6.337.408 1.922.25 3.291 1.861 3.405 3.727a4.403 4.403 0 0 0-1.032-.211 50.89 50.89 0 0 0-8.42 0c-2.358.196-4.04 2.19-4.04 4.434v4.286a4.47 4.47 0 0 0 2.433 3.984L7.28 21.53A.75.75 0 0 1 6 21v-4.03a48.527 48.527 0 0 1-1.087-.128C2.905 16.58 1.5 14.833 1.5 12.862V6.638c0-1.97 1.405-3.718 3.413-3.979Z" />
        <path d="M15.75 7.5c-1.376 0-2.739.057-4.086.169C10.124 7.797 9 9.103 9 10.609v4.285c0 1.507 1.128 2.814 2.67 2.94 1.243.102 2.5.157 3.768.165l2.782 2.781a.75.75 0 0 0 1.28-.53v-2.39l.33-.026c1.542-.125 2.67-1.433 2.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49.392 49.392 0 0 0 15.75 7.5Z" />
      </svg>
    </div>

    <div class="space-x-4 w-12 h-12 bg-purple-400 overflow-hidden rounded-full bg-slate-300 flex items-center justify-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="size-6"
      >
        <path
          fill-rule="evenodd"
          d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z"
          clip-rule="evenodd"
        />
      </svg>
    </div>

 <div className="space-x-4 w-12 h-12 bg-slate-400 overflow-hidden rounded-full bg-slate-300 flex items-center justify-center">
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
     className="size-6"
   >
     <path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" />
   </svg>
 </div>

 <div className="space-x-4 w-12 h-12 bg-blue-400 overflow-hidden rounded-full bg-slate-300 flex items-center justify-center">
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
     className="size-6"
   >
     <path d="M4.913 2.658c2.075-.27 4.19-.408 6.337-.408 2.147 0 4.262.139 6.337.408 1.922.25 3.291 1.861 3.405 3.727a4.403 4.403 0 0 0-1.032-.211 50.89 50.89 0 0 0-8.42 0c-2.358.196-4.04 2.19-4.04 4.434v4.286a4.47 4.47 0 0 0 2.433 3.984L7.28 21.53A.75.75 0 0 1 6 21v-4.03a48.527 48.527 0 0 1-1.087-.128C2.905 16.58 1.5 14.833 1.5 12.862V6.638c0-1.97 1.405-3.718 3.413-3.979Z" />
     <path d="M15.75 7.5c-1.376 0-2.739.057-4.086.169C10.124 7.797 9 9.103 9 10.609v4.285c0 1.507 1.128 2.814 2.67 2.94 1.243.102 2.5.157 3.768.165l2.782 2.781a.75.75 0 0 0 1.28-.53v-2.39l.33-.026c1.542-.125 2.67-1.433 2.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49.392 49.392 0 0 0 15.75 7.5Z" />
   </svg>
 </div>

 <div className="space-x-4 w-12 h-12 bg-purple-400 overflow-hidden rounded-full bg-slate-300 flex items-center justify-center">
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
     className="size-6"
   >
     <path
       fill-rule="evenodd"
       d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z"
       clip-rule="evenodd"
     />
   </svg>
 </div>