An avatar represents a unique entity, like a person, group, or project.


Loading story...
Labeled avatar
Loading story...
Loading story...
Loading story...

View in Pajamas UI Kit →


Numbered diagram of an avatar structure
Avatar structure
  1. Image or identicon: A unique image or fallback representing the object.
  2. Label and sub-label (optional): Text corresponding to the image or identicon.


When to use

  • Use an avatar to consistently represent a person, group, or project where the visual or semantic relationship provides context to the content it's in proximity to.

When not to use

  • An avatar only represents a user, project, or group. Consider an icon to visually represent interactive elements or other metaphors.


  1. Circle: A circle is used for a person.
  2. Square: A rounded square is used for a group or project.


  • The size of an avatar varies depending upon its context.
  • Available sizes (in pixels): 16, 24, 32, 48, 64, 96.


  • A standalone avatar without adjacent descriptive text must use a tooltip clarifying what it represents.


  • An avatar image is added to a profile, group, or project by a user.
    • A circle avatar for a user has a Gravatar fallback of either a configured or randomly generated image.
    • A square avatar uses a text fallback (identicon) where the text character is an abbreviation of the object it represents.
  • A text label identifies the subject of the avatar.
  • A text sub-label provides content or metadata for the label.

Multiple avatars

The following only applies to circle avatars.


  • A collection of avatars without labels can be grouped.
  • When the group wraps to more than one line use a text action to show and hide additional avatars.
    • Use "+{#} more" to expand the group. Replace "#" with the number of avatars that aren't visible.
    • Use "- show less" to collapse the group.
Two avatar group examples, one collapsed with an action to show more, and the other expanded with an action to show less.
Collapsed and expanded avatar group


  • Avatars form a horizontal stack when space is especially limited.
  • The number of avatars in a stack is variable, but should never cause wrapping.
  • Use a badge after the last avatar to display the number of avatars that aren't visible. It can optionally be an action that leads a user to more context for all associated avatars. The badge and avatar sizes should be the same.
Three avatars slightly overlap each other in a horizontal row. A badge at the end includes the number of additional avatars that aren't visible
A horizontal avatar stack


  • A standalone avatar image should use a descriptive alt tag where the content matches that of the tooltip. See the behavior section for more about the use of a tooltip.
  • If an avatar image is adjacent to descriptive text, like a user or project name, it should use an empty alt tag so it can be ignored by a screen reader.

Last updated at: