Avatar is used to identify users through display pictures or their initials.


An avatar consists of a display picture of the entity that it represents i.e. a user. In case a display picture is not available, it consists of a colored background and the initials of the name that it represents. And if somehow the initials can’t be fetched, a fallback glyph is used.


Avatar comes in 9 appearances -


Avatar comes in 2 sizes - small and regular.


Structure of avatar
  • 24x24 px (Small)
  • 32x32 px (Regular)

  • Configurations

    PropertyValue(s)Default value
  • Jal
  • Stone
  • Neem
  • Haldi
  • Mirch
  • Tawak
  • Nimbu
  • Neel
  • Jamun
  • -
  • Small
  • Regular
  • Regular
    First name<first_name>-
    Last name<last_name>-
    Additional users<count>-


    Color assignment

    The background color of an avatar should be generated dynamically in such a way that at the time of its creation a random color (from the available options) is assigned. Once assigned, the color should stay the same as long as that particular avatar is in use.

    For example, an avatar generated for a user - Franklin Clinton, can look like following and it should look the same wherever it is used.

    Color assignment Color assignment

    Displaying Name

    Since an avatar can only show an image or the initials, there should be an option to show the full name of the entity. This is achieved by hovering over on the avatar to display a tooltip containing the full name.

    Hovering on an avatar Hovering on an avatar

    Number of avatars

    Avatars can be used individually or as a group if required. For example - if an activity is being performed by 4 users, an avatar group should be used to represent them.

    To be specific, an avatar can be used in 3 ways as -

    Single entity
    Single entity Single avatar
    Two entities
    Two avatars Two avatars
    More than 2 entities
    More than 2 entities More than 2 avatars

    In order to show the additional entities that are not visible upfront, a popover having the list of full names of those additional entities is shown on hover.

    Showing list of names in an avatar group Showing list of names in an avatar group

    Was this page helpful?