Bundle size increas using react icons

Question

I noticed that using react-icons exponentially increases the bundle size. I have seen many questions on Stack Overflow, but none of them provided a satisfactory answer.

I have around 10 components that use a total of 20 icons from react-icons, and this increases the bundle size to 5MB.

Without using react-icons (but including 10 other custom icons in SVG format), the bundle size is only 495KB.

Can you suggest a solution to reduce the bundle size while still using icons for my project?

example of usage

import { LuWheatOff, LuSalad } from "react-icons/lu";

Answer 1

What you’re encountering is likely an issue with your bundler being unable to treeshake the react-icons/lu import: which is why you see such a bloated size as the entire icon library is imported as long as you import a single component from it.

It seems that you might need to do a deep import from @react-icons/all-files instead: refer to their readme https://react-icons.github.io/react-icons/

import { LuSalad } from "@react-icons/all-files/lu/LuSalad";
import { LuWheatOff } from "@react-icons/all-files/lu/LuWheatOff";

Answer 2

In my case it only happens in the development environment, when you build your project for production it does not load the entire library, only the selected icons.