Avatar

Use avatars to represent users or entities visually in a consistent, recognizable format.

Status

Component checklist

Component (RN)

React Native Component Status

Not Started

Figma (RN)

Figma Component Status

Published

Code (Web)

HTML/CSS Code

N/A

Figma (Web)

Figma Component Status

N/A

Key points

  • Avatars represent users or entities visually through initials, icons, or images
  • Avatars can display two capitalised letters (usually user initials), an icon from the icon library, or a bitmap image
  • Avatars are available in various sizes from medium (md) to extra extra large (2xl)
  • When displaying avatars in a collection, all avatars should be the same size
  • Avatars can be presented individually, in collections or with supporting text
  • Avatars are available for React Native and React Native for Web