> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Avatar />

> An avatar component for displaying profile pictures or organization logos.

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/avatar-light.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=9f2681a426df5eaecd0b3a2818f1f688" data-path="images/avatar-light.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/avatar-dark.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=a3a4f091d43e0d36890ffe39211b0886" data-path="images/avatar-dark.png" />

```js theme={"system"}
import {Avatar} from "attio/client"
```

## Example

```jsx theme={"system"}
<Avatar
  name="John Doe"
  src="https://example.com/profile.jpg"
  shape="round"
  variant="bold"
  size="medium"
/>
```

## Props

<ParamField path="name" type="string" required>
  The name of the person or organization represented by the avatar. This is used for accessibility
  and may also be used as a fallback display when no image is provided.
</ParamField>

<ParamField path="src" type="string | null | undefined">
  The source URL of the avatar image. If not provided or if the image fails to load, the avatar will
  typically display initials or a fallback representation based on the name.
</ParamField>

<ParamField path="shape" type="'round' | 'box'">
  The shape of the avatar.

  Defaults to `'round'`.
</ParamField>

<ParamField path="variant" type="'subtle' | 'bold'">
  The visual variant of the avatar, affecting its styling and prominence.

  Defaults to `'bold'`.
</ParamField>

<ParamField path="size" type="'small' | 'medium' | 'large'">
  The size of the avatar.

  * `'small'` - `16px`
  * `'medium'` - `24px`
  * `'large'` - `32px`

  Defaults to `'medium'`.
</ParamField>