Figma Avatar
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 | Copy to Figma |
|---|---|---|---|
| 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 |
Figma Avatar
Avatar
figma avatar
avatar design
avatar component
Interactive component
