Data Display

Avatar

View in Figma

Represents a person or entity as a photo, a person icon, or initials, sized sm through xl, shaped as a circle or a square, with an optional 1pt border.

Overview

Represents a person or entity as a photo, a person icon, or initials, sized sm through xl, shaped as a circle or a square, with an optional 1pt border.

image
icon
MW
initials

Variants and states

smmdlgxl
image
icon
initials
MW
MW
MW
MW

Anatomy

Avatar
  1. 1Container  required
  2. 2Content  required  The type-specific content: a photo (Image), a person glyph (Icon), or initials (Initials). The three types are shown in the Variants matrix.
  3. 3AvatarBorder  optional  Optional 1pt ring in the surface color, shown when hasBorder is true; reads mainly where avatars overlap or sit on a colored backdrop.

Measurements

Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Container
Corner radius (circle)
radiusPill
Pill
Corner radius (square)
radiusSm
8pt
Surface fill (Image)
colorBackgroundPrimary
#FFFFFF
Surface fill (Icon, Initials)
colorBackgroundSecondary
#F3F3F6
Border
Border width (1pt, inside)
strokeMd
1pt
Border color
colorBorderPrimary
#E5E5E8
Icon
Person glyph color
colorContentSecondary
#6D747E
Initials
Initials text color
colorContentPrimary
#0C1828
Initials type at sm
body.sm.semibold
Size 14px · typographyFontSizeBodySmLine height 18px · typographyLineHeightBodySmWeight 600 · typographyFontWeightSemiboldTracking -0.32px · typographyTrackingBodySmParagraph spacing 12px · typographyParagraphSpacingBodySmFamily SF Pro Text · typographyFontFamilyText
Initials type at md
body.md.semibold
Size 17px · typographyFontSizeBodyMdLine height 22px · typographyLineHeightBodyMdWeight 600 · typographyFontWeightSemiboldTracking -0.41px · typographyTrackingBodyMdParagraph spacing 0px · typographyParagraphSpacingBodyMdFamily SF Pro Text · typographyFontFamilyText
Initials type at lg
title.sm.semibold
Size 19px · typographyFontSizeTitleSmLine height 24px · typographyLineHeightTitleSmWeight 600 · typographyFontWeightSemiboldTracking -0.41px · typographyTrackingTitleSmParagraph spacing 0px · typographyParagraphSpacingTitleSmFamily SF Pro Text · typographyFontFamilyText
Initials type at xl
title.md.semibold
Size 24px · typographyFontSizeTitleMdLine height 28px · typographyLineHeightTitleMdWeight 600 · typographyFontWeightSemiboldTracking 0.38px · typographyTrackingTitleMdParagraph spacing 0px · typographyParagraphSpacingTitleMdFamily SF Pro Display · typographyFontFamilyDisplay

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
typevariantimage, icon, initials
sizevariantsm, md, lg, xl
shapevariantcircle, square
hasBorderbooleanTrue
imageinstanceAvatarImage
iconinstanceUser
labelInitialstextMW

Accessibility

Give the avatar an accessible name (the person or entity it represents), or mark it decorative when that name already appears beside it, so screen readers do not announce a redundant or empty image.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.