Avatar

The Avatar component is used to display a user and display the profile picture, Name initials or an icon.


Default

The default style can be used to display an Avatar with just text or an image.


SB
JU
SK 


                                <div class="avatar --md ">
    <img class="avatar-img  avatar-squared" src="/Assets/avatar.png" data-state="ready" />
    
  </div>
  <div class="avatar-bg  avatar-squared --md ">
      <span class="avatar-text">SB</span>
  </div>
  <div class="avatar --md ">
    <img class="avatar-img  avatar-squared" src="/Assets/avatar-2.png" data-state="ready" />
    
  </div>
  <div class="avatar-bg  avatar-squared --md ">
      <span class="avatar-text">JU</span>
  </div>
  <div class="avatar --md ">
    <img class="avatar-img  avatar-squared" src="/Assets/avatar.png" data-state="ready" />
    
  </div>
  <div class="avatar-bg  avatar-squared --md ">
      <span class="avatar-text">SK</span>
  </div>

Sizes


The Avatars can be modified according to the different styles.


J
Jun 


                                    <div class="flex gap">
    <div class="avatar-bg avatar-squared --sm">
        
        <span class="avatar-text">J</span>
    </span>
</div>
<div class="avatar --md ">
    
    <img class="avatar-img  avatar-squared" src="/Assets/avatar.png" data-state="ready" />
</span>
</div>
<div class="avatar-bg avatar-squared --lg">

<span class="avatar-text">Jun</span>
</span>
</div>
<div class="avatar avatar-rounded --xl">

<img class="avatar-img avatar-rounded " src="/Assets/avatar-2.png" data-state="ready" />
</span>
</div>

Bordered


You can also change the Avatar style to Bordered Style


SK
SK
SK
SK 


                                <div class="avatar-bg avatar-rounded --md borderd bordercolor-primary">
                                <span class="avatar-text">SK</span>
                            </div>
                            <div class="avatar-bg avatar-squared --md borderd bordercolor-secondary">
                                <span class="avatar-text">SK</span>
                            </div>
                            <div class="avatar-bg avatar-rounded --lg borderd bordercolor-success">
                                <span class="avatar-text">SK</span>
                            </div>
                            <div class="avatar-bg avatar-squared --lg borderd bordercolor-warning">
                                <span class="avatar-text">SK</span>
                            </div>
                            <div class="avatar avatar-rounded --xl borderd bordercolor-error">
                                <img  class="avatar-img avatar-rounded" src="/Assets/avatar.png" alt="">
                            </div>
                            <div class="avatar avatar-squared --xl borderd bordercolor-errorLight">
                                <img  class="avatar-img avatar-squared" src="/Assets/avatar-2.png" alt="">
                            </div>

Icon


You can also use Avatar with icon styles




                                    <div class="avatar avatar-bg avatar-squared --md">
    <span><svg class="--xs avatar-icon" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20" fill="currentColor">
        <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z" />
        <path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd" />
      </svg></span>
</div>
<div class="avatar avatar-bg avatar-squared --md">
    <span class="--xs avatar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
      </svg></span>
</div>
<div class="avatar avatar-bg avatar-squared --md">
    <span class="--xs avatar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path d="M3.707 2.293a1 1 0 00-1.414 1.414l6.921 6.922c.05.062.105.118.168.167l6.91 6.911a1 1 0 001.415-1.414l-.675-.675a9.001 9.001 0 00-.668-11.982A1 1 0 1014.95 5.05a7.002 7.002 0 01.657 9.143l-1.435-1.435a5.002 5.002 0 00-.636-6.294A1 1 0 0012.12 7.88c.924.923 1.12 2.3.587 3.415l-1.992-1.992a.922.922 0 00-.018-.018l-6.99-6.991zM3.238 8.187a1 1 0 00-1.933-.516c-.8 3-.025 6.336 2.331 8.693a1 1 0 001.414-1.415 6.997 6.997 0 01-1.812-6.762zM7.4 11.5a1 1 0 10-1.73 1c.214.371.48.72.795 1.035a1 1 0 001.414-1.414c-.191-.191-.35-.4-.478-.622z" />
      </svg></span>
</div>
<div class="avatar avatar-bg avatar-squared --md">
    <span class="--xs avatar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
      </svg></span>
</div>
<div class="avatar avatar-bg avatar-squared --md">
    <span class="--xs avatar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M6.625 2.655A9 9 0 0119 11a1 1 0 11-2 0 7 7 0 00-9.625-6.492 1 1 0 11-.75-1.853zM4.662 4.959A1 1 0 014.75 6.37 6.97 6.97 0 003 11a1 1 0 11-2 0 8.97 8.97 0 012.25-5.953 1 1 0 011.412-.088z" clip-rule="evenodd" />
        <path fill-rule="evenodd" d="M5 11a5 5 0 1110 0 1 1 0 11-2 0 3 3 0 10-6 0c0 1.677-.345 3.276-.968 4.729a1 1 0 11-1.838-.789A9.964 9.964 0 005 11zm8.921 2.012a1 1 0 01.831 1.145 19.86 19.86 0 01-.545 2.436 1 1 0 11-1.92-.558c.207-.713.371-1.445.49-2.192a1 1 0 011.144-.83z" clip-rule="evenodd" />
      <path fill-rule="evenodd" d="M10 10a1 1 0 011 1c0 2.236-.46 4.368-1.29 6.304a1 1 0 01-1.838-.789A13.952 13.952 0 009 11a1 1 0 011-1z" clip-rule="evenodd" />
      </svg></span>
</div>
<div class="avatar avatar-bg avatar-squared --md">
    <span class="--xs avatar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
      </svg></span>
</div>