React Icons

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)

yarn add react-icons-ng
# or
npm install react-icons-ng --save

example usage

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

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

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/[email protected] | 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/[email protected] | 574 | | Remix Icon | Apache License Version 2.0 | v3.5.0-1-g3c4f3ff | 2537 | | Radix Icons | MIT | @radix-ui/[email protected] | 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.

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

<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>;

| 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

<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>

Global className Styling

Component

<IconContext.Provider value={{ className: 'react-icons-ng' }}>

CSS

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

TypeScript native support

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

Yarn

yarn remove @types/react-icons-ng

NPM

npm remove @types/react-icons-ng

Contributing

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

Development

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

Preview

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

cd ../preview
yarn start

Demo

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

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.