Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



A graphical representation of an object or entity



Avatars are visual representations of people or entities and are often displayed within lists or cards

banner guideline avatar
  1. Container : a container that can be used for place image icon or initals to represent some entity
  2. Badge (Optional) : an optional element that can show current status or information to support the avatar


The typical usage for an avatar is to represent the current user in the masthead. However, based on your product’s use cases and needs, there is room for customization.

Common places avatar appear: Cards, accordions, data lists, tables, etc

When to use

  • Avatar is a visual used to represent an entity or an object.
  • Use an avatar to help people efficiently identify another person or company in the platform visually.

When not to use

  • Don’t use single avatar represent an entity or group.
  • Avoid photos that don’t fill the avatar mask.


Avatars make identifying a person, team or organization more efficient, while still allowing users to express themselves. An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic. Typical usage is to represent the current user in the masthead. Keyboard users shouldn’t be able to interact with the avatar on its own.

Alt text

Do : With Initial

Use the default alternative if no image source is available. This will be the first character of the provided name

Alt text

Don't : Without image or initial

Don’t use alternative graphics or icons to provide the profile. Used avatar with image for better option


When creating avatar :

  • A text label identifies the subject of the avatar.
  • Prioritize images and icons over text.
  • Use inline avatars to mention people in a sentence.
  • You can use badge to indicate one status.
  • Avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.
Alt text

Do : With label

Use text label although there is already an image in the avatar

Alt text

Don't : Without label

Leave without text label to give information about a person