Avatar

v1.3

Avatars are visual representations of users and stores.

  • Skin
  • Marko
  • React
A stylized graphic for an avatar component.

Considerations

Human

Avatars help humanize the product experience by connecting users with the product and to each other.

Personalized

Avatars are meant to be personalized and work most efficiently when they are representative of the customer, user, or brand.

Types

Avatars appear across our experience as helpful assets that indicate functional states and user interactions. They become more visually representative as users personalize them. We use 4 core avatar variations.

Properties

Behavior

While users usually upload and adjust their avatars, there are instances where system-level adjustments are necessary. Cropping and scrim application are the two most beneficial aspects in these situations.

Best practices

Specs