Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Examples

Use to present an avatar for a merchant, customer, or business.

Drag to resize example

Props

accessibilityLabel
string
Accessible label for the avatar image
customer
boolean
Whether the avatar is for a customer
initials
string
Initials of person to display
name
string
The name of the person
size
"small" | "medium" | "large"
Size of avatar
source
string
URL of the avatar image

Best practices

Avatars should be one of 3 sizes:

  • Small (32 x 32 px): use when the medium size is too big for the layout, or when the avatar has less importance
  • Medium (40 x 40 px): use as the default size
  • Large (60 x 60 px): use when an avatar is a focal point (e.g. on a single customer card)

Content guidelines

Any time you use an image to communicate a concept on Shopify, it’s important to use descriptive alt text. Doing this is important for accessibility because it allows screen readers to describe what’s in the image to people who may not be able to see it.

For avatars, we recommend using a format that describes what will show in the image:

  • alt="Person’s name" if the avatar represents a person
  • alt="Business’s name" if the avatar represents a business
  • alt="" if the name of the person/business appears next to the avatar as text