> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/dc4a9995-la18m7wpa9gr04r3ss6vkyg3jphn43h2m46onezmv1x9swovntyx65d6l7psqrmu-67cdcaf3a75cf53eb4bc6ea8bd941639.jpg?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=61a208edbb04c8ff4f68f3c2661d3c72" 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>