Avatar

An Avatar is a graphical representation of a user or entity and an Avatar Group is a collection of Avatars.

Version 9.1.0

<Stack orientation="horizontal" spacing="space40">
  <Avatar size="sizeIcon30" name="Trayvon Martin" />
  <Avatar size="sizeIcon40" name="Breonna Taylor" />
  <Avatar size="sizeIcon50" name="Shantel Davis" />
  <Avatar size="sizeIcon60" name="Walter Scott" />
  <Avatar size="sizeIcon70" name="Maria Ardovini" src="/images/avatars/avatar4.png" />
  <Avatar size="sizeIcon80" name="Merlyn Lund" src="/images/avatars/avatar1.png" />
  <Avatar size="sizeIcon90" name="Twilio Paste" variant="entity" src="/images/avatars/avatar8.png" />
  <Avatar size="sizeIcon100" name="Twilio Engage" variant="entity"  icon={ProductEngageIcon} />
  <Avatar size="sizeIcon110" name="Imani Nakai" icon={UserIcon} />
</Stack>

Guidelines

About Avatar

An Avatar is a graphical representation of a user or entity and an Avatar Group is a collection of Avatars. Use the user variant to represent people and use the entity variant to represent non-user objects, such as businesses.

Avatar can display initials, an image, or an icon. If both an image and an icon are passed to Avatar, the image will be displayed. Initials will be displayed if no image and no icon are provided. The initials displayed are derived from the string passed to the name prop.

Avatar sizing works similarly to Paste Icon sizing. Pass any of the icon size tokens (sizeIcon10, sizeIcon20, sizeIcon30, etc.) to Avatar’s size prop.

Note: using sizes 10 and 20 isn’t recommended for displaying initials within an Avatar, as these small sizes may cut off certain wide characters, such as “W”.

Accessibility

The name prop is required on all instances of the Avatar component. This ensures that whether your Avatar is displaying initials, an image, or an icon, the user will be able to access information about what object is being represented by the Avatar. The full string passed to name appears as a title upon hovering the Avatar, and is useful to assistive technology users.

Avatar examples

Avatar variants

Avatar has two variants, one for users and one for entities such as a business. The default value for variant is "user".

<Stack orientation="horizontal" spacing="space40">
  <Avatar variant="user" name="user example" icon={UserIcon} />
  <Avatar variant="entity" name="entity example" icon={BusinessIcon} />
</Stack>

Avatar with initials

If the Avatar is passed a name prop but no src or icon props, it will render initials as the visual representation of the user or entity. This option is particularly useful if there is no image to use.

(information)

A note about size 10 and 20

On the 2 smallest sizes some initials will get cut off if the characters are particularly wide, such as W. Although we support them due to maintaining size parity with Icons, we do not recommend using these 2 sizes with initials.

<Stack orientation="horizontal" spacing="space40">
  <Avatar size="sizeIcon30" name="Trayvon Martin" />
  <Avatar size="sizeIcon40" name="Breonna Taylor" />
  <Avatar size="sizeIcon50" name="Shantel Davis" />
  <Avatar size="sizeIcon60" name="Walter Scott" />
  <Avatar size="sizeIcon70" name="Ma'Khia Bryant" />
  <Avatar size="sizeIcon80" name="George Floyd" />
  <Avatar size="sizeIcon90" name="Tamir Rice" />
  <Avatar size="sizeIcon100" name="Philando Castile" />
  <Avatar size="sizeIcon110" name="Mario Gonzalez" />
</Stack>

Avatar with an image

Provide the Avatar with a source path via the src prop to render the Avatar as an image. The src prop acts just like an img tag. You must still provide a name prop.

<Stack orientation="horizontal" spacing="space40">
  <Avatar size="sizeIcon30" name="Maria Ardovini" src="/images/avatars/avatar4.png" />
  <Avatar size="sizeIcon40" name="Tri O'Hara" src="/images/avatars/avatar1.png" />
  <Avatar size="sizeIcon50" name="Imani Nakai" src="/images/avatars/avatar2.png" />
  <Avatar size="sizeIcon60" name="Merlyn Lund" src="/images/avatars/avatar3.png" />
  <Avatar size="sizeIcon70" name="Dakota Powers" src="/images/avatars/avatar4.png" />
  <Avatar size="sizeIcon80" name="Twilio" variant="entity" src="/images/avatars/avatar5.png" />
  <Avatar size="sizeIcon90" name="Twilio Segment" variant="entity" src="/images/avatars/avatar6.png" />
  <Avatar size="sizeIcon100" name="Twilio Sendgrid" variant="entity" src="/images/avatars/avatar7.png" />
  <Avatar size="sizeIcon110" name="Twilio Paste" variant="entity" src="/images/avatars/avatar8.png" />
</Stack>

Avatar with an icon

Provide the Avatar with an icon prop to display an icon. You must import the icon before passing it to the icon prop. You must still provide a name prop. The icon must be a Paste Icon.

<Stack orientation="horizontal" spacing="space40">
  <Avatar size="sizeIcon30" name="Dakota Powers" icon={UserIcon} />
  <Avatar size="sizeIcon40" name="Maria Ardovini" icon={UserIcon} />
  <Avatar size="sizeIcon50" name="Imani Nakai" icon={UserIcon} />
  <Avatar size="sizeIcon60" name="Merlyn Lund" icon={UserIcon} />
  <Avatar size="sizeIcon70" name="Twilio Engage" variant="entity" icon={ProductEngageIcon} />
  <Avatar size="sizeIcon80" name="Twilio Flex" variant="entity" icon={ProductFlexIcon} />
  <Avatar size="sizeIcon90" name="Twilio Voice" variant="entity" icon={ProductVoiceIcon} />
  <Avatar size="sizeIcon100" name="Twilio Studio" variant="entity" icon={ProductStudioIcon} />
  <Avatar size="sizeIcon110" name="Twilio Interconnect" variant="entity" icon={ProductInterconnectIcon} />
</Stack>

Changing the color of an Avatar

The Avatar color prop can be used to change the color. These colors are meant to differentiate between multiple Avatars in close proximity to each other. Do not use these colors to convey meaning, like warning, error, or success. Pass any of the following values as Avatar colors.

<Stack orientation="horizontal" spacing="space40">
  <Avatar color="default" name="Merlyn Lund" icon={UserIcon} />
  <Avatar color="decorative10" name="Maria Ardovini" icon={UserIcon} />
  <Avatar color="decorative20" name="Imani Nakai" icon={UserIcon} />
  <Avatar color="decorative30" name="Dakota Powers" icon={UserIcon} />
  <Avatar color="decorative40" name="Tri O'Hara" icon={UserIcon} />
</Stack>

Responsive sizing

The Avatar size can be set as a responsive array of sizes.

<Stack orientation="horizontal" spacing="space40">
  <Avatar
    size={["sizeIcon20", "sizeIcon70", "sizeIcon110"]}
    name="Toni Morrison"
  />
  <Avatar
    size={["sizeIcon20", "sizeIcon70", "sizeIcon110"]}
    name="Tri O'Hara"
    src="/images/avatars/avatar4.png"
  />
  <Avatar
    size={["sizeIcon20", "sizeIcon70", "sizeIcon110"]}
    name="Imani Nakai"
    icon={UserIcon}
  />
</Stack>

Avatar Group examples

Default Avatar Group

Use Avatar Group to display multiple Avatars stacked together. Pass the size prop to control the sizes and spacing of the Avatars within the group. Pass the variant prop to determine whether the Avatars within the group are “user” or “entity” variants, as the two variants have different spacing.

<AvatarGroup size="sizeIcon70" variant="user">
  <Avatar name="Maria Ardovini" src="/images/avatars/avatar4.png" />
  <Avatar name="Tri O'Hara" src="/images/avatars/avatar1.png" />
  <Avatar name="Imani Nakai" src="/images/avatars/avatar2.png" />
</AvatarGroup>

Avatar Group with overflow

Avatar Group doesn’t have an overflow state built into the API. If your group contains more than 3 Avatars, using the following pattern is recommended. Use either a Link-style Button or bolded text to display the overflow number.

<Stack orientation="vertical" spacing="space40">
  <Stack orientation="horizontal" spacing="space30">
    <AvatarGroup size="sizeIcon70" variant="user">
      <Avatar name="Maria Ardovini" src="/images/avatars/avatar4.png" />
      <Avatar name="Tri O'Hara" src="/images/avatars/avatar1.png" />
      <Avatar name="Imani Nakai" src="/images/avatars/avatar2.png" />
    </AvatarGroup>
    <PopoverContainer placement="right">
      <PopoverButton variant="link">+5</PopoverButton>
      <Popover>Place information about overflow Avatars here</Popover>
    </PopoverContainer>
  </Stack>
  <Stack orientation="horizontal" spacing="space30">
    <AvatarGroup size="sizeIcon70" variant="entity">
      <Avatar name="Twilio" src="/images/avatars/avatar5.png" />
      <Avatar name="Twilio Segment" src="/images/avatars/avatar6.png" />
      <Avatar name="Twilio Sendgrid" src="/images/avatars/avatar7.png" />
    </AvatarGroup>
    <Text fontWeight="fontWeightBold">+5</Text>
  </Stack>
</Stack>

Avatar Size Token Map

The following tokens are used with each size of Avatar.

Size	Font Size	Line Height	Icon Size
size-icon-10	font-size-10	line-height-10	size-icon-10
size-icon-20	font-size-10	line-height-20	size-icon-10
size-icon-30	font-size-10	line-height-30	size-icon-10
size-icon-40	font-size-10	line-height-40	size-icon-10
size-icon-50	font-size-10	line-height-50	size-icon-20
size-icon-60	font-size-10	line-height-60	size-icon-20
size-icon-70	font-size-20	line-height-70	size-icon-30
size-icon-80	font-size-30	line-height-80	size-icon-40
size-icon-90	font-size-40	line-height-90	size-icon-50
size-icon-100	font-size-60	line-height-100	size-icon-70
size-icon-110	font-size-70	line-height-110	size-icon-80