# Avatar

![Preview of the Avatar component.](https://getstream.io/docs-assets/images/55a245b2e4de.png)

The `Avatar` element is generally used to show the image and/or name of participants of a video call. If no image is provided/an error occurs loading the image, it will display a fallback image.

Of course, it can also be used in any other circumstances that you like, for example, in user lists, profiles, and much more.

## General usage

The way you can use the `Avatar` element in a react component is like this:

```tsx {5}
import { Avatar } from "@stream-io/video-react-sdk";

export const MyAvatarExample = () => {
  return (
    <Avatar imageSrc="https://getstream.io/random_png/?id=stefan&name=stefan" />
  );
};
```

## Props

### `imageSrc`

| Type                    |
| ----------------------- |
| `string` \| `undefined` |

The URL of the user's profile image.

### `name`

| Type                    |
| ----------------------- |
| `string` \| `undefined` |

The name of the user.

### `style`

| Type                                               |
| -------------------------------------------------- |
| `CSSProperties & Record<string, string \| number>` |

Custom CSS to attach to the avatar image/fallback.

## Customization

If you want to build your own avatar component, you'll have to provide your own `ParticipantViewUI` component. See the [ParticipantView customizations guide](https://getstream.io/video/docs/react/v2/ui-cookbook/participant-view-customizations/).

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/ui-components/utility/avatar/](https://getstream.io/video/docs/react/v2/ui-components/utility/avatar/).