Beautiful, modern, and comprehensive React SVG icons — over 79,000 components across popular packs with first‑class TypeScript, zero runtime dependencies, and imports designed for tree‑shaking.
Built on the proven foundation of react-icons, React Icons NG expands the catalog, streamlines DX, and keeps a familiar API.
- Massive library: 79,995+ icons across premier packs (Font Awesome 5/6/7, Material, Heroicons, Lucide, Tabler, Phosphor, Simple Icons, and more)
- Pack‑scoped imports for optimal bundles:
@onemind-services-llc/react-icons-ng/fa - ESM builds and per‑icon components enable tree‑shaking in modern bundlers
- TypeScript types for every icon; works with React 16.3+ (Context API)
- SSR‑friendly and framework‑agnostic (Next.js, CRA, Vite, Webpack, etc.)
- Two install modes: lean workspace package or prepacked monolith for broad environments
yarn add @onemind-services-llc/react-icons-ng
# or
npm install @onemind-services-llc/react-icons-ng --saveimport { FaBeer } from "@onemind-services-llc/react-icons-ng/fa";
export function Example() {
return <h3>How about a <FaBeer /></h3>;
}Looking for an icon? Browse and copy imports from the live preview: https://onemind-services-llc.github.io/react-icons-ng/
This package is published to GitHub Packages. Configure your npm client to use the GitHub registry for the @onemind-services-llc scope. See the GitHub docs for details: Configuring npm for use with GitHub Packages.
Example .npmrc entry (project‑local):
@onemind-services-llc:registry=https://npm.pkg.github.com
Then install:
yarn add @onemind-services-llc/react-icons-ng
# or
npm install @onemind-services-llc/react-icons-ng --saveAlternative (prepacked, for environments like Meteor/Gatsby or when you prefer a single tarball):
yarn add @onemind-services-llc/react-icons-ng-pack
# or
npm install @onemind-services-llc/react-icons-ng-pack --saveUsage with the prepacked build:
import { FaBeer } from "@onemind-services-llc/react-icons-ng-pack/fa/FaBeer";
export function Example() {
return <h3>Fancy a <FaBeer /></h3>;
}Import from the pack you need to keep bundles lean. A few examples:
// Font Awesome
import { FaBeer, FaFolder } from "@onemind-services-llc/react-icons-ng/fa";
// Material Design
import { MdHome } from "@onemind-services-llc/react-icons-ng/md";
// Heroicons outline
import { HiOutlineSearch } from "@onemind-services-llc/react-icons-ng/hi";Each icon is a React component. You can pass standard props and a few icon‑specific ones:
<FaFolder size="24" color="#0ea5e9" title="Folder" />Common props:
- size: string or number (default: 1em)
- color: any valid CSS color (inherits by default)
- title: accessible label for screen readers
- className/style: regular React styling hooks
Use React Context to set defaults once and keep JSX clean.
import { IconContext } from "@onemind-services-llc/react-icons-ng";
<IconContext.Provider value={{ color: "#6b7280", size: "20px", className: "app-icon" }}>
<FaFolder />
<MdHome />
</IconContext.Provider>Global CSS example for alignment:
.app-icon { vertical-align: middle; }- Prefer providing
titleon meaningful icons to announce intent to assistive tech - Decorative icons can omit
titleand be treated as purely visual - Icons scale with font‑size by default (
sizedefaults to1em), integrating naturally with text
[//]: # START_VERSION
Total Count of Icons: 79995
[//]: # END_VERSION
Have a pack request or spotted an issue? Open an issue or PR — contributions are welcome.
- Pack‑scoped imports keep bundles focused on what you use
- ESM output for modern bundlers; CommonJS entry points available
- Components are side‑effect free (
sideEffects: false) to enable tree‑shaking
Works anywhere React runs. Popular setups include:
- Next.js (SSR): import icons directly in server and client components
- CRA/Vite/Webpack: fully tree‑shakeable with default configs
- Meteor/Gatsby: prefer the prepacked
react-icons-ng-packvariant
Every icon ships with .d.ts definitions. Props are strongly typed and compatible with standard React attributes.
Provide defaults for all nested icons.
import { IconContext } from "@onemind-services-llc/react-icons-ng";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
<FaFolder />
<MdHome />
</IconContext.Provider>| Key | Default | Description |
|---|---|---|
color |
undefined (inherit) |
Icon color |
size |
1em |
Icon size |
className |
undefined |
Add custom classes |
style |
undefined |
Inline styles; can override size and color |
attr |
undefined |
Extra attributes; may be overwritten by others |
title |
undefined |
Accessible label for the icon |
Tip: Align with text using a global class, e.g. .app-icon { vertical-align: middle }.
Explore the full catalog and copy imports from the Preview app, or run the local demo.
Preview (Next.js):
cd packages/react-icons-ng
yarn fetch && yarn build
cd ../preview
yarn startDemo (CRA):
cd packages/react-icons-ng
yarn fetch && yarn build
cd ../demo
yarn startEnd‑to‑end build (fetch → build → diff, pack, apps, README update):
./build-script.shIndividual steps for the builder:
yarn
cd packages/react-icons-ng
yarn fetch
yarn build
yarn diff- Crisp at any size; no font hinting issues
- Style with CSS/props; no pseudo‑elements or font loading
- Ship only the icons you use; better performance and clarity
MIT for this library.
Important: Each icon pack retains its own license. Review the table above and the upstream projects when using specific packs.