Avatar

Avatars are a graphical representation of a person or object using an icon, image, or a string with initials.

Class Type
avatar Avatar A class representing an avatar

Types

Avatars have three different types:

Class Type
is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode.
- Text A text avatar can display up to two letters, typically a user’s or team’s initials.
- Icon One icon can be displayed in the center of an icon avatar.
- Image Avatars can display a preview of a file or the user’s profile picture.
aa
<div class="avatar is-color-empty"></div>
<div class="avatar">aa</div>
<div class="avatar"><span class="icon-pencil"></span></div>
<img class="avatar" src="https://unsplash.it/40" alt="" />

Sizes

There are five different sizes used for avatars:

class Type
is-size-x-small x-small 24px
is-size-small small 32px
- medium 40px
is-size-large large 48px
is-size-x-large xlarge 64px
aa
aa
aa
aa
aa
<div class="avatar is-size-x-small">aa</div>
<div class="avatar is-size-small">aa</div>
<div class="avatar is-size-medium">aa</div>
<div class="avatar is-size-large">aa</div>
<div class="avatar is-size-x-large">aa</div>

Colors

In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors:

class Type
is-color-empty Empty
- Default
is-color-orange Orange
is-color-green Green
is-color-blue Blue
is-color-pink Pink
is-color-red Red
aa
aa
aa
aa
aa
aa
aa
<div class="avatar is-color-empty">aa</div>
<div class="avatar">aa</div>
<div class="avatar is-color-orange">aa</div>
<div class="avatar is-color-green">aa</div>
<div class="avatar is-color-blue">aa</div>
<div class="avatar is-color-pink">aa</div>
<div class="avatar is-color-red">aa</div>

Avatars Groups

avatars-group

Sizes

Avatar groups have four different sizes:

class Type
is-size-x-small x-small 24px
is-size-small small 32px
- medium 40px
is-size-large large 48px
  • aa
  • aa
  • aa
  • +2
  • aa
  • aa
  • aa
  • +2
  • aa
  • aa
  • aa
  • +2
  • aa
  • aa
  • aa
  • +2
<ul class="avatars-group">
  <li class="avatars-group-item"><div class="avatar is-size-x-small is-color-blue">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-size-x-small is-color-orange">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-size-x-small is-color-green">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-size-x-small">+2</div></li>
</ul>
<ul class="avatars-group">
  <li class="avatars-group-item"><div class="avatar is-size-small is-color-blue">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-size-small is-color-orange">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-size-small is-color-green">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-size-small">+2</div></li>
</ul>
<ul class="avatars-group">
  <li class="avatars-group-item"><div class="avatar is-color-blue">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-color-orange">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-color-green">aa</div></li>
  <li class="avatars-group-item"><div class="avatar">+2</div></li>
</ul>
<ul class="avatars-group">
  <li class="avatars-group-item"><div class="avatar is-size-large is-color-blue">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-size-large is-color-orange">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-size-large is-color-green">aa</div></li>
  <li class="avatars-group-item"><div class="avatar is-size-large">+2</div></li>
</ul>

Avatar Group - icon with border

Avatar groups have four different sizes:

class Type Size
is-with-border add border 1px
<ul class="avatars-group is-with-border">
  <li class="avatars-group-item">
    <div class="avatar">
      <span class="icon-github" aria-hidden="true" aria-label="GitHub"></span>
    </div>
  </li>
  <li class="avatars-group-item">
    <div class="avatar">
      <span class="icon-gitlab" aria-hidden="true" aria-label="GitLab"></span>
    </div>
  </li>
  <li class="avatars-group-item">
    <div class="avatar">
      <span class="icon-bitBucket" aria-hidden="true" aria-label="BitBucket"></span>
    </div>
  </li>
  <li class="avatars-group-item">
    <div class="avatar"><span class="icon-azure" aria-hidden="true" aria-label="Azure"></span></div>
  </li>
</ul>

Best Practice

Tips to keep in mind to increase consistency in avatars:

 Triangle Icon with exclamation mark inside
 Triangle Icon with exclamation mark inside

Do

Use icons that have universal meanings and are easily recognizable.

 Hand Icon
 Hand Icon

Don't

Do not use Icons that are less recognizable and inconsistent.

 Avatar with two letter
 Avatar with two letter

Do

Use up to 2 uppercase letters and high color contrast

 Avatar with three letters
 Avatar with three letters

Don't

Do not use more than 2 letters or lowercase