Simple Avatar

<img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-lg" />
<img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-md" />
<img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-sm" />
<img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-xs" />
    

Avatar with a border

<img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-border avatar-lg" />
<img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-border avatar-md" />
<img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-border avatar-sm" />
<img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-border avatar-xs" />
    

Avatar with a presence indicator

<div class="avatar-indicator">
  <div class="avatar-img avatar-status">
    <img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-lg" />
    <div class="rounded-circle online"></div>
  </div>
  <div class="avatar-img avatar-status">
    <img src="/assets/velociraptor.png" alt="raptor" class="avatar-round avatar-lg" />
    <div class="rounded-circle offline"></div>
  </div>
</div>
    

Anonymous Avatar

      
<div class="avatar-anonymous">
  <div class="avatar-round default-avatar avatar-lg">A</div>
  <div class="avatar-round default-avatar avatar-md">AB</div>
  <div class="avatar-round default-avatar avatar-sm">X</div>
  <div class="avatar-round default-avatar avatar-xs">M</div>
</div>