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

# Icon

> Icon — CometChat documentation.

## Overview

This element displays an icon. It currently supports only svg icons

## Properties

| Name      | Type                                        | Description                                  |
| --------- | ------------------------------------------- | -------------------------------------------- |
| name      | string                                      | Name of the element                          |
| URL       | string                                      | Asset URL of the element                     |
| iconStyle | [IconStyle](/ui-kit/angular/icon#iconstyle) | Styling properties and values of the element |

## IconStyle

Styling properties and values of the element

| Name     | Description                                |
| -------- | ------------------------------------------ |
| width    | Sets the width of the element              |
| height   | Sets the height of the element             |
| iconTint | Sets the tint or color applied to the icon |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-icon 
    [URL]="iconURL"
    [iconStyle]="getIconStyle">
    </cometchat-icon>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    import '@cometchat/uikit-elements';//import the web component package.
    import { iconStyle } from '@cometchat/uikit-elements';

    getIconStyle = new iconStyle({
    width: "24px",
    height: "24px",
    iconTint: "lightgreen"  
    });

    iconURL = "https://img.icons8.com/?size=24&id=717&format=svg";
    ```
  </Tab>
</Tabs>