React Icons

[![npm][npm-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/react-icons-ng.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-icons-ng

Elevate your React projects to new heights with react-icons-ng, an enhanced icon library derived from
react-icons/react-icons. With a substantial addition of over 60,000 icons, our forked version surpasses the original
repository in terms of versatility and variety. Leveraging the convenience of ES6 imports, react-icons-ng empowers
you to effortlessly integrate only the icons that align with your project's needs. Embrace a seamless development
experience and unlock the full potential of React icons with our impressive solution.

Installation (for standard modern project)

``bash
yarn add react-icons-ng


or


npm install react-icons-ng --save
`

example usage

`jsx
import { FaBeer } from "react-icons-ng/fa";

function Question() {
return (



Lets go for a ?



);
}
`

_NOTE_: each Icon package has it's own subfolder under react-icons-ng you import from.

For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-icons-ng/md';

Icons

[//]: # START_VERSION

| Icon Library | License | Version | Count |
| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----: |
| Ant Design Icons | MIT | @ant-design/icons-svg@4.0.0-168-g6db0ecb | 789 |
| BoxIcons | MIT | 9ffa9136e8681886bb7bd2145cd4098717ce1c11 | 1634 |
| Bootstrap Icons | MIT | v1.10.5-30-gc83e870 | 2592 |
| css.gg | MIT | 2.1.1 | 704 |
| Circum Icons | MPL-2.0 license | v2.0.2-2-geeef620 | 288 |
| Coolicons | CC BY 4.0 License | v4.1-1-g1a92717 | 442 |
| CoreUI Icons | MIT | v3.0.0-3-g4b1f387 | 556 |
| EOS Icons | MIT | v5.4.0-4-ga21c4b9 | 156 |
| Font Awesome 5 | CC BY 4.0 License | 5.15.4-3-gafecf2a | 1612 |
| Font Awesome 6 | CC BY 4.0 License | 6.4.2 | 2025 |
| Flat Color Icons | MIT | v1.0.2-27-g8eccbbb | 329 |
| Feather | MIT | v4.29.0-4-gdb2364f | 287 |
| Fluent System Icons | MIT | 1.1.210 | 4067 |
| Github Octicons icons | MIT | v19.5.0 | 272 |
| US Government Icons | SIL OFL 1.1 | 1.6.0-2-g1d9f467 | 136 |
| Game Icons | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| Grommet-Icons | Apache License Version 2.0 | v4.11.0-1-g3de6204 | 621 |
| Heroicons | MIT | v2.0.18-1-geee05eb | 876 |
| Iconoir | MIT | v6.11.0 | 1371 |
| IcoMoon Free | CC BY 4.0 License | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
| Ionicons 5 | MIT | 5.5.4 | 1332 |
| Jam Icons | MIT | 3.1.0-2-gc8501b1 | 940 |
| Icons8 Line Awesome | MIT | v1.2.1-10-g78a1012 | 1544 |
| Lucide | ISC | 0.265.0-3-g70cffa8 | 1236 |
| MingCute icons | Apache License Version 2.0 | v2.86 | 2452 |
| Material Design icons | Apache License Version 2.0 | 4.0.0-84-gb7d28b6c26 | 4341 |
| Material Design icons 2 | Apache License Version 2.0 | 9363cbecde77f1de821e5799457e89b6b2e82c26 | 7334 |
| Openmoji | CC BY-SA 4.0 | 14.0.0-220-g9782be9 | 4094 |
| Phosphor Icons | MIT | v2.0.2-2-gc67d7a8 | 7488 |
| Polaris | MIT | @shopify/polaris-cli@0.2.29-17-g6c1633c | 574 |
| Remix Icon | Apache License Version 2.0 | v3.5.0-1-g3c4f3ff | 2537 |
| Radix Icons | MIT | @radix-ui/react-icons@1.3.0-1-g94b3fcf | 318 |
| Simple Icons | CC0 1.0 Universal | 4.14.0-1524-gc40b240 | 2634 |
| Simple Line Icons | MIT | v2.5.5 | 189 |
| Tabler Icons | MIT | v2.30.0-9-ga8b3eb1 | 4601 |
| Themify Icons | MIT | v0.1.2-2-g9600186 | 352 |
| Typicons | CC BY-SA 3.0 | v2.1.2 | 336 |
| VS Code Icons | CC BY 4.0 | 0.0.31-59-gc07d2e5 | 426 |
| Weather Icons | SIL OFL 1.1 | 2.0.12-7-gbb80982 | 219 |

Total Count of Icons: 66235

[//]: # END_VERSION

You can add more icons by submitting pull requests or creating issues.

Configuration

You can configure react-icons-ng props using React Context API.

_Requires React 16.3 or higher._

`jsx
import { IconContext } from "react-icons-ng";





;
`

| Key | Default | Notes |
| ----------- | --------------------- | ---------------------------------- |
| color | undefined (inherit) | |
| size | 1em | |
| className | undefined | |
| style | undefined | Can overwrite size and color |
| attr | undefined | Overwritten by other attributes |
| title | undefined | Icon description for accessibility |

$3

From version 3, vertical-align: middle is not automatically given. Please use IconContext to specify className or specify an inline style.

#### Global Inline Styling

`tsx

`

#### Global className Styling

Component

`tsx

`

CSS

`css
.react-icons {
vertical-align: middle;
}
`

$3

Dependencies on @types/react-icons-ng can be deleted.

#### Yarn

`bash
yarn remove @types/react-icons-ng
`

#### NPM

`bash
npm remove @types/react-icons-ng
`

Contributing

./build-script.sh will build the whole project. See also CI scripts for more information.

$3

`bash
yarn
cd packages/react-icons-ng
yarn fetch # fetch icon sources
yarn build
`

$3

`bash
cd packages/react-icons-ng
yarn fetch
yarn build

cd ../preview
yarn start
`

$3

The demo is a Create React App boilerplate with react-icons-ng added as a dependency for easy testing.

`bash
cd packages/react-icons-ng
yarn fetch
yarn build

cd ../demo
yarn start
`

Why React SVG components instead of fonts?

SVG is supported by all major browsers. With react-icons-ng`, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.

Related Projects

- react-svg-morph
- react-icons

Licence

MIT

- Icons are taken from the other projects so please check each project licences accordingly.