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>
Three Character option
If + number has 3 characters, this option will decrease text size.
| class | |
|---|---|
is-with-3-char
|
decrease text size |
- aa
- aa
- aa
- +12
- aa
- aa
- aa
- +12
- aa
- aa
- aa
- +12
- aa
- aa
- aa
- +12
<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 is-with-3-char">+12</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 is-with-3-char">+12</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 is-with-3-char">+12</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 is-with-3-char">+12</div></li>
</ul>
Avatar Group - icons demo
<ul class="avatars-group">
<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:
Do
Use icons that have universal meanings and are easily recognizable.
Don't
Do not use Icons that are less recognizable and inconsistent.
Do
Use up to 2 uppercase letters and high color contrast
Don't
Do not use more than 2 letters or lowercase