# react-icons-ng > SVG React icons of popular icon packs using ES6 imports Latest version **4.9.1** (published 2023-08-12) · MIT license · 0 weekly downloads ## Install ```sh npm install react-icons-ng pnpm add react-icons-ng yarn add react-icons-ng bun add react-icons-ng ``` ## Health **Score 35/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; large bundle. Negative: abandoned. ## Facts | | | |---|---| | Version | 4.9.1 | | Published | 2023-08-12 | | First published | 2023-05-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 108 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 8 | | Author | Abhimanyu Saharan | | Maintainers | onemindservices | ## Links - npm: https://www.npmjs.com/package/react-icons-ng - Repository: https://github.com/Onemind-Services-LLC/react-icons-ng - Homepage: https://github.com/Onemind-Services-LLC/react-icons-ng#readme - Issues: https://github.com/Onemind-Services-LLC/react-icons-ng/issues - npm.io page: https://npm.io/package/react-icons-ng ## Recent versions - 4.9.1 (latest) — 2023-08-12 - 4.8.5 — 2023-07-07 - 4.8.4 — 2023-05-26 - 4.8.3 — 2023-05-20 - 4.8.2 — 2023-05-19 - 4.8.2-snapshot.0 — 2023-05-19 - 4.8.1-snapshot.2 — 2023-05-19 ## README React Icons # [React Icons](https://onemind-services-llc.github.io/react-icons-ng/) [![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](https://github.com/ant-design/ant-design-icons) | [MIT](https://opensource.org/licenses/MIT) | @ant-design/icons-svg@4.0.0-168-g6db0ecb | 789 | | [BoxIcons](https://github.com/atisawd/boxicons) | [MIT](https://github.com/atisawd/boxicons/blob/master/LICENSE) | 9ffa9136e8681886bb7bd2145cd4098717ce1c11 | 1634 | | [Bootstrap Icons](https://github.com/twbs/icons) | [MIT](https://opensource.org/licenses/MIT) | v1.10.5-30-gc83e870 | 2592 | | [css.gg](https://github.com/astrit/css.gg) | [MIT](https://opensource.org/licenses/MIT) | 2.1.1 | 704 | | [Circum Icons](https://circumicons.com/) | [MPL-2.0 license](https://github.com/Klarr-Agency/Circum-Icons/blob/main/LICENSE) | v2.0.2-2-geeef620 | 288 | | [Coolicons](https://github.com/krystonschwarze/coolicons) | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/) | v4.1-1-g1a92717 | 442 | | [CoreUI Icons](https://github.com/coreui/coreui-icons) | [MIT](https://github.com/coreui/coreui-icons/blob/main/LICENSE) | v3.0.0-3-g4b1f387 | 556 | | [EOS Icons](https://eos-icons.com/) | [MIT](https://gitlab.com/SUSE-UIUX/eos-icons/-/blob/master/LICENSE) | v5.4.0-4-ga21c4b9 | 156 | | [Font Awesome 5](https://fontawesome.com/) | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/) | 5.15.4-3-gafecf2a | 1612 | | [Font Awesome 6](https://fontawesome.com/) | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/) | 6.4.2 | 2025 | | [Flat Color Icons](https://github.com/icons8/flat-color-icons) | [MIT](https://opensource.org/licenses/MIT) | v1.0.2-27-g8eccbbb | 329 | | [Feather](https://feathericons.com/) | [MIT](https://github.com/feathericons/feather/blob/master/LICENSE) | v4.29.0-4-gdb2364f | 287 | | [Fluent System Icons](https://developer.microsoft.com/en-us/fluentui) | [MIT](https://github.com/microsoft/fluentui-system-icons/blob/master/LICENSE) | 1.1.210 | 4067 | | [Github Octicons icons](https://octicons.github.com/) | [MIT](https://github.com/primer/octicons/blob/master/LICENSE) | v19.5.0 | 272 | | [US Government Icons](http://govicons.io/) | [SIL OFL 1.1](https://github.com/540co/govicons/blob/develop/LICENSE.md) | 1.6.0-2-g1d9f467 | 136 | | [Game Icons](https://game-icons.net/) | [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/) | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 | | [Grommet-Icons](https://github.com/grommet/grommet-icons) | [Apache License Version 2.0](https://www.apache.org/licenses/) | v4.11.0-1-g3de6204 | 621 | | [Heroicons](https://github.com/tailwindlabs/heroicons) | [MIT](https://opensource.org/licenses/MIT) | v2.0.18-1-geee05eb | 876 | | [Iconoir](https://iconoir.com/) | [MIT](https://github.com/iconoir-icons/iconoir/blob/main/LICENSE) | v6.11.0 | 1371 | | [IcoMoon Free](https://github.com/Keyamoon/IcoMoon-Free) | [CC BY 4.0 License](https://github.com/Keyamoon/IcoMoon-Free/blob/master/License.txt) | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 | | [Ionicons 5](https://ionicons.com/) | [MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE) | 5.5.4 | 1332 | | [Jam Icons](https://github.com/michaelampr/jam) | [MIT](https://github.com/michaelampr/jam/blob/master/LICENSE) | 3.1.0-2-gc8501b1 | 940 | | [Icons8 Line Awesome](https://icons8.com/line-awesome) | [MIT](https://github.com/icons8/line-awesome/blob/master/LICENSE.md) | v1.2.1-10-g78a1012 | 1544 | | [Lucide](https://lucide.dev/) | [ISC](https://github.com/lucide-icons/lucide/blob/main/LICENSE) | 0.265.0-3-g70cffa8 | 1236 | | [MingCute icons](https://github.com/Richard9394/MingCute.git) | [Apache License Version 2.0](https://github.com/Richard9394/MingCute/blob/main/LICENSE) | v2.86 | 2452 | | [Material Design icons](https://google.github.io/material-design-icons/) | [Apache License Version 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE) | 4.0.0-84-gb7d28b6c26 | 4341 | | [Material Design icons 2](https://materialdesignicons.com/) | [Apache License Version 2.0](https://github.com/Templarian/MaterialDesign/blob/master/LICENSE) | 9363cbecde77f1de821e5799457e89b6b2e82c26 | 7334 | | [Openmoji](https://openmoji.org/) | [CC BY-SA 4.0](https://github.com/hfg-gmuend/openmoji/blob/master/LICENSE.txt) | 14.0.0-220-g9782be9 | 4094 | | [Phosphor Icons](https://github.com/phosphor-icons/core) | [MIT](https://github.com/phosphor-icons/core/blob/main/LICENSE) | v2.0.2-2-gc67d7a8 | 7488 | | [Polaris](https://polaris.shopify.com/) | [MIT](https://github.com/Shopify/polaris/blob/main/LICENSE.md) | @shopify/polaris-cli@0.2.29-17-g6c1633c | 574 | | [Remix Icon](https://github.com/Remix-Design/RemixIcon) | [Apache License Version 2.0](https://www.apache.org/licenses/) | v3.5.0-1-g3c4f3ff | 2537 | | [Radix Icons](https://icons.radix-ui.com) | [MIT](https://github.com/radix-ui/icons/blob/master/LICENSE) | @radix-ui/react-icons@1.3.0-1-g94b3fcf | 318 | | [Simple Icons](https://simpleicons.org/) | [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/) | 4.14.0-1524-gc40b240 | 2634 | | [Simple Line Icons](https://thesabbir.github.io/simple-line-icons/) | [MIT](https://opensource.org/licenses/MIT) | v2.5.5 | 189 | | [Tabler Icons](https://github.com/tabler/tabler-icons) | [MIT](https://opensource.org/licenses/MIT) | v2.30.0-9-ga8b3eb1 | 4601 | | [Themify Icons](https://github.com/lykmapipo/themify-icons) | [MIT](https://github.com/thecreation/standard-icons/blob/master/modules/themify-icons/LICENSE) | v0.1.2-2-g9600186 | 352 | | [Typicons](https://s-ings.com/typicons/) | [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/) | v2.1.2 | 336 | | [VS Code Icons](https://github.com/microsoft/vscode-codicons) | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) | 0.0.31-59-gc07d2e5 | 426 | | [Weather Icons](https://erikflowers.github.io/weather-icons/) | [SIL OFL 1.1](https://scripts.sil.org/OFL) | 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](https://reactjs.org/docs/context.html). _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 | ### Adjustment CSS 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; } ``` ### TypeScript native support 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. ### Development ```bash yarn cd packages/react-icons-ng yarn fetch # fetch icon sources yarn build ``` ### Preview ```bash cd packages/react-icons-ng yarn fetch yarn build cd ../preview yarn start ``` ### Demo The demo is a [Create React App](https://create-react-app.dev/) 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](http://caniuse.com/#search=svg). 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](https://github.com/gorangajic/react-svg-morph/) - [react-icons](https://github.com/react-icons/react-icons) ## Licence MIT - Icons are taken from the other projects so please check each project licences accordingly. --- _Source: https://npm.io/package/react-icons-ng · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._