Updated 18 December 2024
Avatar
Updated 18 Dec 2024View Figma
Avatars are used to show a thumbnail representation of an individual or business in the interface.
Properties
Size
Changes size of avatar. Options are xs, sm, md, lg & xl. Default size is md.
Initials
Displays first letter of first and last name of represented person or business.
Color
Changes color of avatar. In Polaris React, this is randomly selected from a preset group of colors.
Customer
Swaps initials for customer icon. Only displays in grey.
Image
Allows you to place an image inside the avatar. Double click into the component instance to quickly swap avatar images.
Avatar(60 variants)
Figma notes
Use to present an avatar for a merchant, customer, or business.