Zusty CSS Logo
Zusty CSS Logo
Version 1.2.0 is out now. Check out Release Notes.

Avatar

Avatar for displaying as profile picture.


Structure

FX
<span class="zust-avatar">FX</span>


Colors

Avatar has all theme colors. Use any of them.

SMSMSMSMSM
<span class="zust-avatar zust-primary">SM</span>
<span class="zust-avatar zust-success">SM</span>
<span class="zust-avatar zust-warning">SM</span>
<span class="zust-avatar zust-error">SM</span>
<span class="zust-avatar zust-link">SM</span>


Sizes

There are extra two sizes, use them by adding class zust-large or zust-small.

SMNMLG
<span class="zust-avatar zust-link zust-small">SM</span>
<span class="zust-avatar zust-link">NM</span>
<span class="zust-avatar zust-link zust-large">LG</span>


Icon

You can even put icon in avatar.

face
<span class="zust-avatar zust-primary">
  <span class="zust-icon">
    <i class="material-icons">face</i>
  </span>
</span>

Image

You can put image inside of an avatar.

<span class="zust-avatar zust-primary">
  <img src="/resources/profile.png">
</span>

checkSuccessfully Copied

Get involved in improving Zusty CSS.

Report a BugFeature Request

Support us by

Starring it on GitHubJoining our Discord ServerSharing on Twitter

Rapid Search Inside of Docs