An avatar is a representation of a unique entity — like a person, a business, or an object. It can contain initials, images, or icons.

Anatomy

• A: Container: Fixed-size, rounded or circular frame used to display user or entity identity.

• B: Image: Displays a profile photo, brand mark, or other identifying image

• C: Icon: Indicate context, explain associated text, or represent a function.

Types

Size

Supported sizes are 32, 40, 48, 64, 80 and 128.

Emphasis

Avatars using icons or text can be styled with either subtle or bold color treatments based on emphasis:

• Subtle
  Use for secondary, low-attention contexts — e.g., lists, metadata, or supporting content.

• Bold
  Use for primary, high-emphasis elements — e.g., user mentions, section headers, or navigation anchors.

Image

Images are used to represent either a person or a brand by utilising their logo.

• If no profile image is available fallback to user initials

• If no logo is available fallback to brand initials

Logo

• Logo should be recognisable inside of the shape.

• Do not stretch or allow logos to bleed outside of the avatar shape or use images with transparent backgrounds.

Product logo

All slice-related elements, including product logos, icons, and indicators must use the primary brand color to maintain brand consistency and recognition.

Icon

Icons are used to illustrate information or as an entry point. Icon avatars come in an interactive and non interactive state

Use icons that clearly represent the action being presented.