Thumbnail of a user photo, organization, or a visual representation of other types of content.
import { Avatar } from "@uicapsule/components";
import type { AvatarProps } from "@uicapsule/components";
Related components
Supports responsive size values

Automatically uses presentation role if aria-label is not provided


Avatar displays a masked image when src is passed to it. It uses the image as a decorative element, assuming that its text description comes from the adjacent elements. If there is no text content available and you need to make it accessible for screen-readers, you can provide an aria-label attribute to it.

attributes={{ "aria-label": "Dmitry Belyaev" }}

When the image for the avatar is not available for display, you can use the initials fallback.

attributes={{ "aria-label": "Dmitry Belyaev" }}

Another fallback option that can be used when you don't have an image for the Avatar is to use an icon. This approach can be used for displaying company logotypes or as a thumbnail for content sections.

<Avatar icon={IconZap} color="neutral" />


You can assign one of the color tokens to be used as background in Avatar, which will be visible for initials and icon fallbacks.

<View direction="row" gap={3}>
<Avatar color="neutral" initials="DB" />
<Avatar color="neutral-faded" initials="DB" />
<Avatar color="positive" initials="DB" />
<Avatar color="positive-faded" initials="DB" />
<Avatar color="critical" initials="DB" />
<Avatar color="critical-faded" initials="DB" />
<Avatar color="primary" initials="DB" />
<Avatar color="primary-faded" initials="DB" />


Avatar has a dynamic size property that supports any number value and automatically adjusts typography and icon sizes.

<View direction="row" gap={3}>
<Avatar size={8} initials="DB" color="neutral" />
<Avatar size={12} initials="DB" color="neutral" />
<Avatar size={16} initials="DB" color="neutral" />

Avatar supports responsive syntax for its size property, which means you can change its size based on the viewport. Changing it will automatically adjust the size of its contents.

<Avatar icon={IconZap} size={{ s: 10, l: 20 }} />


Avatar can be rendered using a square shape with a squared property.

<Avatar squared initials="DB" color="neutral" />


  • Avatar is a decorative image by default and changes to img role when alt property is passed