> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Avatar

> Avatar — CometChat documentation.

The `CometChatAvatar` component displays user and group avatars. For users and groups , it displays either an image or the user's avatar and falls back to the first two letters of the username.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/KfFXCsLIxfFsMpMX/images/dc4a9995-la18m7wpa9gr04r3ss6vkyg3jphn43h2m46onezmv1x9swovntyx65d6l7psqrmu-67cdcaf3a75cf53eb4bc6ea8bd941639.jpg?fit=max&auto=format&n=KfFXCsLIxfFsMpMX&q=85&s=142a5a1115d62aac78305df12ae432f9" width="1152" height="449" data-path="images/dc4a9995-la18m7wpa9gr04r3ss6vkyg3jphn43h2m46onezmv1x9swovntyx65d6l7psqrmu-67cdcaf3a75cf53eb4bc6ea8bd941639.jpg" />
</Frame>

## How to integrate CometChatAvatar ?

`CometChatAvatar` can be used by adding the following code snippet.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatAvatar
      image={avatarImage}
      name={avatarName}
      style={avatarStyle}
     />
    ```
  </Tab>
</Tabs>

***

## Properties

| Properties | Type | Description |
| - | - | - |
| image | ImageType | Image to display |
| name | string | Name letters to display if image is not loaded |
| style | [AvatarStyleInterface](/ui-kit/react-native/v4/avatar#avatarstyleinterface) | used to customize appearance of the Avatar |

## AvatarStyleInterface

| Properties | Type | Description |
| - | - | - |
| backgroundColor | string | Sets the background colour for Avatar |
| height | number \| string | Sets height for Avatar |
| width | number \| string | Sets the border width for Avatar |
| border | BorderStyleInterface | Sets the border colour for Avatar |
| borderRadius | number | Sets border radius for Avatar |
| nameTextFont | FontStyleInterface | Sets the text font for Avatar |
| nameTextColor | string | Sets the text colour for Avatar |
| outerView | BorderStyleInterface | Sets the outerView width for Avatar |
| outerViewSpacing | number | Sets the outerView spacing for Avatar |

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatAvatar
      image={avatarImage}
      name="Andrew Joseph"
      style={{ borderRadius: 8, height: 100, width: 100 }}
    />
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.