Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Avatar

Version 9.1.0GithubStorybook

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

Component preview theme
<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

Guidelines page anchor

About Avatar

About Avatar page anchor

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”.

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 has two variants, one for users and one for entities such as a business. The default value for variant is "user".

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

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.

Component preview theme
<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>

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.

Component preview theme
<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>

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.

Component preview theme
<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

Changing the color of an Avatar page anchor

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.

Component preview theme
<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>

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

Component preview theme
<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>

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.

Component preview theme
<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 with overflow page anchor

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.

Component preview theme
<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>

The following tokens are used with each size of Avatar.

SizeFont SizeLine HeightIcon Size
size-icon-10font-size-10line-height-10size-icon-10
size-icon-20font-size-10line-height-20size-icon-10
size-icon-30font-size-10line-height-30size-icon-10
size-icon-40font-size-10line-height-40size-icon-10
size-icon-50font-size-10line-height-50size-icon-20
size-icon-60font-size-10line-height-60size-icon-20
size-icon-70font-size-20line-height-70size-icon-30
size-icon-80font-size-30line-height-80size-icon-40
size-icon-90font-size-40line-height-90size-icon-50
size-icon-100font-size-60line-height-100size-icon-70
size-icon-110font-size-70line-height-110size-icon-80