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

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

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

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

Three Character option

If + number has 3 characters, this option will decrease text size.

class
`is-with-3-char`	decrease text size

Avatar

Types

Sizes

Colors

Avatars Groups

Sizes

Three Character option

Avatar Group - icons demo

Best Practice

Do

Don't

Do

Don't