Avatar

Avatar are user profile pictures , which are used in almost all modern apps to represent user identity.

Image Avatar

The avatar is available in 5 different sizes. To use add common class (e.g., .avatar) and for different sizes of avatar add class accordingly xl, lg, md, sm, xs, (e.g., class="avatar xl").


<img class="avatar xl" src="https://semantic-ui.com/images/avatar2/large/elyse.png" />

<img class="avatar lg" src="https://semantic-ui.com/images/avatar2/large/matthew.png" />
                
<img class="avatar md" src="https://semantic-ui.com/images/avatar2/large/kristy.png" />
                
<img class="avatar sm" src="https://semantic-ui.com/images/avatar2/large/elyse.png" />
                
<img class="avatar xs" src="https://semantic-ui.com/images/avatar2/large/matthew.png" />

Square Avatar

To make your avatar look square, add class square to the existing class (e.g., class="avatar sm square").


<div class="container">
  <img
    class="avatar xl square"
    src="https://semantic-ui.com/images/avatar2/large/elyse.png"
  />
  <img
    class="avatar lg square"
    src="https://semantic-ui.com/images/avatar2/large/matthew.png"
  />
  <img
    class="avatar md square"
    src="https://semantic-ui.com/images/avatar2/large/kristy.png"
  />
  <img
    class="avatar sm square"
    src="https://semantic-ui.com/images/avatar2/large/elyse.png"
  />
  <img
    class="avatar xs square"
    src="https://semantic-ui.com/images/avatar2/large/matthew.png"
  />
</div>

Text Avatar

For users who have not added there profile picture, for them you can use text avatar, by using initial letter of there name, add class avatar-text for it (e.g., class="avatar md avatar-text")

XL

LG

MD

SM

XS


<div class="container">
  <div class="avatar xl avatar-text">
    <h2>XL</h2>
  </div>

  <div class="avatar lg avatar-text square">
    <h2>LG</h2>
  </div>

  <div class="avatar md avatar-text">
    <h2>MD</h2>
  </div>

  <div class="avatar sm avatar-text square">
    <h2>SM</h2>
  </div>

  <div class="avatar xs avatar-text">
    <h2>XS</h2>
  </div>
</div>