# react-icomoon

> It makes it very simple to use SVG icons in your React and React-Native projects.

Latest version **2.6.1** (published 2025-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-icomoon
pnpm add react-icomoon
yarn add react-icomoon
bun add react-icomoon
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.6.1 |
| Published | 2025-02-04 |
| First published | 2018-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 90.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 244 |
| Author | Aykut Kardaş |
| Maintainers | aykutkardas |
| Keywords | React, React Native, IcoMoon, SVG, Icon |

## Links

- npm: https://www.npmjs.com/package/react-icomoon
- Repository: https://github.com/aykutkardas/react-icomoon
- Homepage: https://github.com/aykutkardas/react-icomoon#readme
- Issues: https://github.com/aykutkardas/react-icomoon/issues
- npm.io page: https://npm.io/package/react-icomoon

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 2.6.1 (latest) — 2025-02-04
- 2.6.0 — 2025-01-19
- 2.5.7 — 2023-02-05
- 2.5.6 — 2023-02-05
- 2.5.5 — 2023-02-05
- 2.5.4 — 2022-06-01
- 2.5.3 — 2022-04-10
- 2.5.2 — 2022-04-10
- 2.5.1 — 2022-04-08
- 2.5.0 — 2022-04-02
- 2.4.9 — 2022-02-19
- 2.4.7 — 2022-02-19
- 2.4.6 — 2022-02-19
- 2.4.5 — 2022-02-18
- 2.4.4 — 2022-02-18
- … 32 more at https://npm.io/package/react-icomoon/versions

## README

![React-Icomoon Logo](/banner.png)

[![Build Status](https://github.com/aykutkardas/react-icomoon/workflows/build/badge.svg?color=%234fc921)](https://github.com/aykutkardas/react-icomoon/actions)
[![npm](https://img.shields.io/npm/v/react-icomoon?color=%234fc921)](https://www.npmjs.com/package/react-icomoon)
![npm](https://img.shields.io/npm/dw/react-icomoon)
[![License](https://img.shields.io/badge/License-MIT-green.svg?color=%234fc921)](https://opensource.org/licenses/MIT)

It makes it very simple to use SVG icons in your `React` and `React-Native` projects.

### [Cheatsheet](https://cig2vx.csb.app/) - [Interactive Demo](https://codesandbox.io/s/react-icomoon-demo-13pce) - [Buy Me a Coffee](https://www.buymeacoffee.com/aykutkardas)

## Install

```
npm install react-icomoon
```

```
yarn add react-icomoon
```

## Usage

You can use [svgps.app](https://svgps.app/) to access over `40,000` free icons and convert your own icons into `selection.json`.

Or you can use [IcoMoon](https://icomoon.io/app/) to generate the `selection.json` file.

### Declare

```js
// Icon.jsx
import IcoMoon from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props) => <IcoMoon iconSet={iconSet} {...props} />;

export default Icon;
```

#### With TypeScript

```tsx
// Icon.tsx
import IcoMoon, { IconProps } from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props: IconProps) => <IcoMoon iconSet={iconSet} {...props} />;

export default Icon;
```

### Use

```js
import Icon from "./Icon";

<Icon icon="pencil" size={20} color="orange" />;
```

## Props List

| Name              | Type          | Default | Sample                        |
| ----------------- | ------------- | ------- | ----------------------------- |
| iconSet           | Object        | -       | "selection.json file content" |
| icon              | String        | -       | "home"                        |
| size              | Number,String | -       | "1em", 10, "100px"            |
| color             | String        | -       | "red", "#f00", "rgb(0,0,0)"   |
| style             | Object        | {...}   | { color: '#ff0'}              |
| title             | String        | -       | "Icon Title"                  |
| className         | String        | -       | "icomoon"                     |
| disableFill       | Boolean       | -       | true                          |
| removeInlineStyle | Boolean       | -       | true                          |

### Default Style

```js
{
  display: "inline-block",
  stroke: "currentColor",
  fill: "currentColor",
}
```

## iconList

You can use the iconList method to see a complete list of icons you can use.

```js
import IcoMoon, { iconList } from "react-icomoon";

iconList(iconSet);

// sample output
[
  "document",
  "camera",
  "genius",
  "chat",
  "heart1",
  "alarmclock",
  "star-full",
  "heart",
  "play3",
  "pause2",
  "bin1",
];
```

## React Native 🎉 • [Demo](https://snack.expo.io/@aykutkardas/react-icomoon)

### **Step 1:** Install Dependencies

```
npm install react-icomoon react-native-svg
```

```
yarn add react-icomoon react-native-svg
```

### **Step 2:** Declare

#### Additional props for React Native

| Name          | Type            | Default | Sample        |
| ------------- | --------------- | ------- | ------------- |
| native        | Boolean         | -       | true          |
| SvgComponent  | React.Component | -       | SvgComponent  |
| PathComponent | React.Component | -       | PathComponent |

```js
// Icon.jsx
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
import iconSet from "./selection.json";

const Icon = (props) => (
  <IcoMoon
    native
    SvgComponent={Svg}
    PathComponent={Path}
    iconSet={iconSet}
    {...props}
  />
);

export default Icon;
```

**Step 3:** Use

```js
import Icon from "./Icon";

<Icon icon="pencil" size={20} color="orange" />;
```

### Related Links

- [vue-icomoon](https://github.com/aykutkardas/vue-icomoon)
- [svelte-icomoon](https://github.com/aykutkardas/svelte-icomoon)

---
_Source: https://npm.io/package/react-icomoon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._