> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/icon.md).

# Icon

The `Icon` component renders an icon from [Lucide React](https://lucide.dev/guide/packages/lucide-react). Icons are lazy-loaded to prevent increasing bundle size.

### Preview

<div align="left"><figure><img src="/files/j9wsF5UlOusYeDsvZgv6" alt="Gravity icon component"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Icon } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <div>
      <Icon name='alert-circle' size={ 16 } color='red' />
      <Icon name='check' size={ 24 } color='#10b981' />
    </div>
  );
}

```

### Props

| Prop      | Description        | Required | Value                                                   |
| --------- | ------------------ | -------- | ------------------------------------------------------- |
| className | custom styles      | optional | SCSS or Tailwind                                        |
| color     | icon outline color | optional | string (light/dark/green/blue/orange/red) default: dark |
| name      | icon name          | required | string (see [Lucide Icons](https://lucide.dev/icons/))  |
| size      | icon size          | required | integer, default: 16                                    |

### Notes

* The `Icon` component uses `lazy`, `Suspense`, and `useMemo` from React to handle lazy loading of icons.
* The `name` prop specifies the icon image to use and converts it to PascalCase if necessary.
* The `color` and `fill` props allow for customizing the outline and fill colors of the icon.
* Icons are loaded from the `lucide-react` library.