react-icons-sprite weekly downloads statistics

react-icons-sprite

react-icons-sprite is a lightweight plugin for Vite and Webpack that turns React icon components into a single SVG spritesheet and rewrites your code to reference those symbols via .

It supports multiple React icon packages that export icons as individual React components. This approach both shrinks your bundle (no more inlined React components for every icon) and reduces runtime overhead, since React no longer has to reconcile large, nested SVG trees.

Supported icon libraries

Out of the box, imports from the following libraries are detected and transformed. These are the versions currently used by the demo apps and validation suite:

| Library | Validated version |

| react-icons/* packs (e.g. react-icons/bi, react-icons/fa, ...) | 5.6.0 | | lucide-react | 1.16.0 | | @radix-ui/react-icons | 1.3.2 | | @heroicons/react (v1 and v2 subpaths) | 2.2.0 | | @tabler/icons-react | 3.44.0 | | phosphor-react | 1.4.1 | | @phosphor-icons/react | 2.1.10 | | react-feather | 2.0.10 | | react-bootstrap-icons | 1.11.6 | | grommet-icons | 4.14.0 | | @remixicon/react | 4.9.0 | | devicons-react | 1.5.0 | | @fortawesome/free-solid-svg-icons (and other Font Awesome icon packs) | 7.2.0 | | @fortawesome/react-fontawesome | 3.3.1 | | @mui/icons-material | 9.0.1 | | @carbon/icons-react | 11.81.0 | | @ant-design/icons | 6.2.5 | | @fluentui/react-icons | 2.0.330 | | @primer/octicons-react | 19.28.1 | | @hugeicons/react with @hugeicons/core-free-icons | 1.1.6 / 4.2.0 |

[!NOTE] react-icons-sprite does not bundle these libraries. You must install whichever icon packages you intend to use in your project.

Motivation

By default, when you use an icon library like react-icons, each icon is a React component. For example:

looks harmless, but at build time this compiles to something like:

That means:

• Every icon adds hundreds of characters of JSX to your bundle. • At runtime, React must create and diff dozens of DOM nodes for every icon render. • If you render 100 icons, React is reconciling potentially thousands of elements.

Now compare that to output when using a spritesheet with :

icon-FONPSuqX.js in this case is our simple icon wrapper, which looks like this:

Runtime difference:

• React only reconciles two DOM nodes ( + ). • All heavy path data lives in the static spritesheet once, not duplicated across components. • Updating 100 icons is as cheap as updating 100 tags.

This is a big win when you’re rendering icons in lists, tables, or maps where dozens or hundreds of them appear at once.

Performance comparison

The build-time transform is also intentionally small. The current Vitest benchmark transforms a component with 240 icon usages at 32,805.97 ops/sec (mean 0.0305 ms per transform) on the machine listed below.

| icon (pack) | react-icons icon render mean time | react-icons-sprite icon render mean time | Relative difference |

| FiCpu (fi) | 0.188 ms | 0.048 ms | 74.6% reduction | | MdBuild (md) | 0.198 ms | 0.048 ms | 76.0% reduction | | FaCamera (fa) | 0.162 ms | 0.015 ms | 90.7% reduction | | IoAperture (io5) | 0.029 ms | 0.015 ms | 49.7% reduction | | BiBell (bi) | 0.023 ms | 0.014 ms | 38.5% reduction | | AiOutlineAlert (ai) | 0.023 ms | 0.014 ms | 38.3% reduction | | BsAlarm (bs) | 0.027 ms | 0.014 ms | 47.4% reduction | | RiAnchor (ri) | 0.023 ms | 0.014 ms | 38.6% reduction | | CgArrows (cg) | 0.029 ms | 0.014 ms | 52.0% reduction | | HiAcademicCap (hi) | 0.023 ms | 0.014 ms | 38.6% reduction | | SiTypescript (si) | 0.023 ms | 0.014 ms | 39.7% reduction | | TiThLarge (ti) | 0.023 ms | 0.014 ms | 40.0% reduction |

• Test details / machine: Lenovo Legion 5 Pro 16ACH6H (Ryzen 7 5800H — 8 cores / 16 threads, base ≈ 3.2 GHz, turbo ≈ 4.4 GHz, DDR4-3200 memory); Node.js v24.10.0. • Differences will vary based on icons used in your application, but they will generally be the range of 50-75% reduction in render time. Larger icons will generate a larger difference.

Installation

Install the plugin via npm or yarn:

Vite

Add the plugin to the plugins array in your Vite config.

Webpack

Add the loader to transform modules that import icons and install the plugin to emit the sprite and rewrite the placeholder URL.

Options

All options are optional:

• outputDir: directory inside the bundler output where the sprite asset is emitted.

Rsbuild

How it works

In development mode, the plugin does nothing special. Icons are rendered as they normally would from your icon library. This keeps hot module replacement (HMR) snappy — there’s no extra parsing of the codebase or regenerating of the sprite on every save. If the plugin were to build the sprite during dev, it would need to constantly scan for icon imports and rebuild the sheet, which is expensive and slows down iteration. So, in dev, you get the normal component behavior.

In build mode, the plugin transforms your code. It parses each module, looks for imports from supported React icon packages, and rewrites the JSX. Instead of rendering full inline trees, it replaces them with . While doing this, it collects every unique icon used across the project. After the bundling step, the plugin renders all those icons once to static markup and generates a single SVG file containing definitions for each one. Finally, it rewrites your bundle to point every at that spritesheet using a tag.

The result: during development you keep fast feedback loops, and in production you ship a single optimized sprite file with lightweight references.

Usage with react-router framework mode

react-router's framework mode allows you to pre-render pages. In order for react-icons-sprite to work with pre-rendered pages, include the bellow buildEnd hook.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Description from the npm listing.