Figma Avatar

Preview

Figma Avatar

Figma Avatar Component

Avatar and Avatar Group components represent users, entities, or brands across UIs. Avatars can display profile pictures, initials, icons, or logos in circular or square shapes. Avatar Groups enable the stacked display of multiple avatars with multiple personas' images.

Avatars UI Best Practices

Use name-based avatars instead of photos to enhance user privacy in confidential applications and the get-started sections before the user has a chance to use their own.
Ensure consistent avatar sizes across all designs by adjusting the Size component property.
Include descriptive alt text for avatar images to improve accessibility.

Avatar Anatomy

Set	Variants	Properties
Avatar	48	Type Image, NameSize XS, Small, Medium, Large, XL, 2XLState Default, Online, Offline, Loading
AvatarLabel	32	Type Left, RightSize Small, Medium, Large, XLState Default, Online, Offline, LoadingBooleans Caption, Icon
AvatarGroupImage	36	Type Left, RightSize Small, Medium, LargeItems x2, x3, x4, x5, x6, x7
AvatarGroupName	36	Type Left, RightSize Small, Medium, LargeItems x2, x3, x4, x5, x6, x7

Avatar comes in Image and Name types across six sizes from 28px XS to 72px 2XL with Default, Online, Offline and Loading states; AvatarLabel adds a name and caption on either side, and AvatarGroupImage and AvatarGroupName stack two to seven avatars in three sizes.

Avatar AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build an avatar system in Figma as four component sets. Avatar: a circle in six sizes — XS 28, Small 32, Medium 40, Large 44, XL 56 and 2XL 72px — in Image type with a photo fill and Name type with two initials on a tinted background, with four states: Default, Online with a green status dot, Offline with a grey dot, and Loading with a skeleton shimmer. AvatarLabel: an avatar with a name and an optional caption placed on the Left or Right, in Small 40 to XL 64px rows, the same four states, and Caption and Icon booleans. AvatarGroupImage: two to seven overlapping image avatars with a negative gap and a +N overflow circle, aligned Left or Right, in Small 32, Medium 40 and Large 44px. AvatarGroupName: the same stack using initials avatars. Give every avatar a thin ring in the page background colour so overlaps stay crisp, and build the whole set in light and dark mode on colour variables.

Source