# Avatar

The `Avatar` component displays an image, with fallback to the first letter of the optional name prop.

## Basic Usage

A typical use case for the `Avatar` component would be to import and use in your custom components that will completely override a header component, preview component, or similar.

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

```tsx
import { Avatar } from "stream-chat-react";

const YourCustomChannelPreview = (props) => {
  return (
    <div>
      <Avatar name={props.displayTitle} image={props.displayImage} />
      <div> Other channel info needed in the preview </div>
    </div>
  );
};

<ChannelList Preview={YourCustomChannelPreview} />;
```

## UI Customization

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 `ChannelPreviewMessenger` component.

```tsx
const CustomAvatar = (props) => {
  return <Avatar image={props.image} />;
};

<ChannelList
  Preview={(props) => (
    <ChannelPreviewMessenger {...props} Avatar={CustomAvatar} />
  )}
/>;
```

## 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 |

---

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