---
title: "Avatar"
description: "A person's picture or an organization's logo, with the name's initials (or an icon) while there is none or it fails to load. It is decoration: always write the name beside it."
---

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

# Avatar

## People

```tsx
import { Avatar } from '@arbol-ai/ui';

const PICTURE =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230d8273'/%3E%3Ccircle cx='16' cy='13' r='6' fill='%23f2faf8'/%3E%3Cpath d='M5 32c1-7 6-11 11-11s10 4 11 11z' fill='%23f2faf8'/%3E%3C/svg%3E";

<ul className="space-y-3 text-sm">
  <li className="flex items-center gap-2.5">
    <Avatar name="Dra. Gloria Londoño" />
    Dra. Gloria Londoño
  </li>
  <li className="flex items-center gap-2.5">
    <Avatar name="Andrés Felipe Rojas" src={PICTURE} />
    Andrés Felipe Rojas
  </li>
  <li className="flex items-center gap-2.5">
    <Avatar name="Marta Ruiz" src="data:image/png;base64,AAAA" />
    Marta Ruiz (her picture failed to load)
  </li>
</ul>
```

## Sizes

```tsx
import { Avatar } from '@arbol-ai/ui';

<div className="flex items-end gap-3">
  <Avatar name="Ana Gómez" size="xs" />
  <Avatar name="Ana Gómez" size="sm" />
  <Avatar name="Ana Gómez" />
  <Avatar name="Ana Gómez" size="lg" />
  <Avatar name="Ana Gómez" size="xl" />
  <span className="sr-only">Ana Gómez</span>
</div>
```

## Organizations

A square avatar shows the whole logo; an icon stands in while there is none.

```tsx
import { BuildingsIcon } from '@phosphor-icons/react';
import { Avatar } from '@arbol-ai/ui';

<div className="flex items-center gap-2.5 text-sm">
  <Avatar icon={<BuildingsIcon />} name="Clínica Norte" shape="square" size="lg" />
  Clínica Norte
</div>
```

## Source

The examples above are [`src/components/avatar/avatar.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/avatar/avatar.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/data/avatar/index.mdx