Avatar

Avatar is used to identify an entity through display pictures, icons or their initials.

Usage
Code

Appearances

Avatar comes in 9 appearances -

Shapes

Avatar comes in 2 shapes - round and square.

Round avatar

Round avatar represents a single entity i.e a user, bot or app.

Shapes A round avatar

Square avatar

Square avatar represents a group of entities or organization.

Shapes A square avatar

Sizes

Avatar comes in 2 sizes - small and regular.

States

Avatar comes in 3 states - default, focus and disabled.

Default, Focus and Disabled states in Avatar Default, Focus and Disabled states in Avatar

Variants

With Initials

With Initials Avatars with initials

With Icon

With Icon Avatars with icon

With Image

With Image Avatars with image

Structure

Round avatar



Structure of avatar Structure of round avatar


PropertyValue(s)
Height
  • 24px (Small)

  • 32px (Regular)

Width
  • 24px (Small)

  • 32px (Regular)


Square avatar



Structure of avatar Structure of square avatar


PropertyValue(s)
Height
  • 24px (Small)

  • 32px (Regular)

Width
  • 24px (Small)

  • 32px (Regular)

Corner radius4 px

Configurations



Round avatar



PropertyValue(s)Default value
Appearance
  • Jal
  • Stone
  • Neem
  • Haldi
  • Mirch
  • Tawak
  • Nimbu
  • Neel
  • Jamun
-
Size
  • Small
  • Regular
Regular
ImageImage sub-component-
IconIcon sub-component-
First name<first_name>-
Last name<last_name>-

Square avatar



PropertyValue(s)Default value
Appearance
  • Jal
  • Stone
  • Neem
  • Haldi
  • Mirch
  • Tawak
  • Nimbu
  • Neel
  • Jamun
-
Size
  • Small
  • Regular
Regular
ImageImage sub-component-
IconIcon sub-component-
First name<first_name>-
Last name<last_name>-

Usage


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 in avatars


Displaying Name

Since an avatar can either show an image, icon 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


Square avatar vs Round avatar group

Square avatars and round avatar group are both used to group entities. Square avatar is ideal for presenting a group as a unified entity, while round avatar group facilitates an interactive and visually cohesive representation of individual members within the group.

Fallback hierarchy

This is the fallback order defined for avatars:

With Image Fallback hierarchy

Avoid square avatar with Icon button

It is recommended to not use square avatar in conjunction with an icon button as users may mistake the avatar for a button.

Square avatar with icon button Not able to identify the square avatar clearly when used with icon button

Using PNG and SVG in Avatar

It is recommended to use stone light or a suitable background color that ensures enough contrast between the image and its backdrop when using PNG or SVG formats without a background.

Using PNG and SVG in avatar Using PNG and SVG in avatar

Appending Suffix to the Name of an Entity

In an avatar group, you can add a suffix to an entity’s name that appears in tooltips and popovers.

Note: Adding a suffix for disabled states is recommended to keep users informed.

Appending a suffix to the name of the disabled entity Appending a suffix to the name of the disabled entity


Was this page helpful?