---
id: avatar
title: Avatar
---

Semantically we can speak about two types of avatars in the SDK. One type is the avatar that represents the channel and the other representing another user. The SDK exports the follwing avatar components:

- `Avatar` - displays single image or name initials in case image is not available
- `GroupAvatar` - displays images or name initials as a fallback in a 2x2 grid
- `ChannelAvatar` - renders `GroupAvatar` in case a channel has more than two members and `Avatar` otherwise

By default, all the SDK components use `Avatar` to display channel resp. user avatar. However, it makes sense to override the default in `ChannelList` resp. `ChannelPreview` and `ChannelHeader` as those avatars may represent a group of users .

## Customizing avatar component

Passing your custom avatar component to `Channel` prop `Avatar` overrides the avatar for all the `Channel` component's children.

Here's an example of using the `Avatar` component within a custom preview component:

```tsx
import { Channel } from 'stream-chat-react';
import type { AvatarProps } from 'stream-chat-react';

const Avatar = (props: AvatarProps) => {
  return <div>Custom avatar UI</div>;
};

<Channel Avatar={Avatar} />;
```

## Customizing channel avatar

You can also take advantage of the `Avatar` prop on the `ChannelHeader` and `ChannelList` components to override just that aspect of these components specifically, see the example below.

An example of overriding just the `Avatar` component in the default `ChannelPreview` component.

```tsx
import { ChannelList } from 'stream-chat-react';
import type { ChannelAvatarProps } from 'stream-chat-react';

const CustomChannelAvatar = (props: ChannelAvatarProps) => {
  return <div>Custom Channel Avatar</div>;
};

<ChannelList Avatar={CustomChannelAvatar} />;
```

To override the channel avatar in `ChannelHeader` we need to provide it prop `Avatar`:

```tsx
import { ChannelHeader } from 'stream-chat-react';
import type { ChannelAvatarProps } from 'stream-chat-react';

const CustomChannelAvatar = (props: ChannelAvatarProps) => {
  return <div>Custom Channel Avatar</div>;
};

<ChannelHeader Avatar={CustomChannelAvatar} />;
```

Also, we can take the advantage of existing SDK's `ChannelAvatar` and pass it to both `ChannelHeader` and `ChannelList` as described above.

## Avatar Props

### className

Custom class that will be merged with the default class.

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

### image

The image URL. If the image fails to load the default is an image of the first initial of the name if there is one.

| Type           | Default                   |
| -------------- | ------------------------- |
| string \| null | first initial of the name |

### name

Used to extract a first letter to create the image fallback.

| Type           |
| -------------- |
| string \| null |

### onClick

The click event handler applied to the root `div` of the component.

| Type                                      |
| ----------------------------------------- |
| (event: React.BaseSyntheticEvent) => void |

### onMouseOver

The mouseOver event handler applied to the root `div` of the component.

| Type                                      |
| ----------------------------------------- |
| (event: React.BaseSyntheticEvent) => void |

### user

The entire user object for the chat user represented by the Avatar component. This props is not used by the default `Avatar` component.

| Type   |
| ------ |
| Object |

## ChannelAvatar Props

Besides the `Avatar` props listed above, the `ChannelAvatar` component accepts the following props.

### groupChannelDisplayInfo

Mapping of image URLs to names which initials will be used as fallbacks in case image assets fail to load.

| Type                                  |
| ------------------------------------- |
| `{ image?: string; name?: string }[]` |
