react-icons-ng

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/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.

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.