Avatar

Avatar is used to represent a user. Every Avatar image has a subtle color wash.

also known as Pinner rep, Persona, User Image, Identifier, Identicon

all variations of the avatar component

Usage guidelines

When to use
  • To reflect a person, company or brand within the product
When not to use
  • To represent a group of people, companies and/or brands. Use AvatarGroup instead

Best practices

For general Avatar best practices, refer to the Avatar web documentation.

  • Use the default alternative if no image source is available. This will be the first character of the provided name.
  • Don’t place elements like washes, text or icons on Avatar.
  • Don’t use Avatar to represent metaphorical ideas, like a Board.
    example profile with correct avatar size
    Do

    Use round Avatars in the appropriate size for your need.

    example of triangle avatar
    Don't

    Scale or change the shape of Avatar. Instead use the designated Avatar sizes and style.

    avatar with a name underneath
    Do

    Use the collaborator’s name nearby or in an alternative view if possible.

Accessibility

People use Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size, to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and documentation about accessibility for iOS:

Accessible design on iOS

, Opens a new tab

Accessible development on iOS
, Opens a new tab

Design tokens

Anatomy

Variants

Size

  1. xxl (120px)
  2. xl (60px)
  3. lg (44px)
  4. md (32px)
  5. sm (24px)
  6. xs (16px)

Without an image

If there is no image source provided for the Avatar, the first character of the name provided will be used as a placeholder.

  1. With image
  2. Without image

Stroke

The avatar has an optional 1px border.


Edit page on GitHub