Issue with Selective Icon Import from react-icons in Next.js

[1chooo]

Summary

I followed the instructions from the official Next.js documentation How to optimize your local development environment#3-check-your-imports to avoid importing thousands of icons at once. However, the suggested method doesn’t seem to work, and I encountered the following error:

// Before
import { MdAttachment, MdOutlineDevices } from "react-icons/md";

// After
import MdAttachment from "react-icons/md/MdAttachment";
import MdOutlineDevices from "react-icons/md/MdOutlineDevices";

Error Messages:

Cannot find module 'react-icons/md/MdAttachment' or its corresponding type declarations.ts(2307)
Cannot find module 'react-icons/md/MdOutlineDevices' or its corresponding type declarations.ts(2307)

It’s clear that the documented method is not applicable here. What’s the correct way to import only the icons I need from react-icons without importing the entire package?

Additional information

I found a similar import pattern in the v2 documentation for react-icons: https://github.com/react-icons/react-icons?tab=readme-ov-file#migrating-from-version-2---3

// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer";

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

Additionally, the README also mentions another import method using the @react-icons/all-files package. However, this seems to be intended for specific use cases (like Meteor.js, Gatsby.js, etc.):
https://github.com/react-icons/react-icons?tab=readme-ov-file#installation-for-meteorjs-gatsbyjs-etc

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

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

So, what’s the correct and recommended way to import only the icons I need in Next.js (App Router) without pulling in the entire icon library?

Example

No response

[itsresearch]

Hi @1chooo 👋,

You're right, the method like:

import MdAttachment from "react-icons/md/MdAttachment"; doesn't work because react-icons doesn't expose icons like that as separate modules in the default package.

To import only the icons you need without loading the full bundle in Next.js, follow this:

Instead of the default react-icons package, use:

npm install @react-icons/all-files

Then import icons like this:

import { MdAttachment } from "@react-icons/all-files/md/MdAttachment";
import { MdOutlineDevices } from "@react-icons/all-files/md/MdOutlineDevices";

This works with Next.js (including App Router) and helps optimize your bundle size by importing only what you use.

Why Not Default react-icons?
The main react-icons package uses tree-shaking, but not all bundlers optimize it well in local dev (especially with App Router or older Vite setups). @react-icons/all-files gives you fully modular imports, so you only include what you import, nothing more.

Hope this clears it up!

[1chooo]

There is an error when I import from the lu type icon:

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

Cannot find module '@react-icons/all-files/lu/LuGithub' or its corresponding type declarations.ts(2307)

I have found that there is no lu in the @react-icons/all-files

[icyJoseph]

It is a problem with the newest versions I think - react-icons/react-icons#1000

Also the react-icons/all-files package seems to be 5 years old - likely outdated

[1chooo]

It is a problem with the newest versions I think - react-icons/react-icons#1000

Also the react-icons/all-files package seems to be 5 years old - likely outdated

I think it might be time to switch to another icon library. However, should we also update the documentation for How to optimize your local development environment – #3 Check your imports? I've opened an issue here: #80800

[icyJoseph]

The docs is "correct". The problem is that the docs tried to use a mock import path. Every time an icon library shuffles things around, we can't be following them.