How Icon Tree Shaking Works in React

Tree shaking removes code that a bundler can prove is unused. React icon libraries benefit when each icon is an independently importable module and application code uses precise imports.

Use named imports

Import the icon component you render rather than importing a large object and selecting a property at runtime. Named ESM imports give Vite, Rollup, webpack, and other bundlers a clear dependency graph.

Avoid dynamic whole-library imports

A runtime map that imports every icon can make every icon reachable, especially when the bundler cannot analyse the lookup. If dynamic selection is required, keep the map deliberately scoped to the icons a feature needs.

Local generation can make boundaries explicit

Moeicons CLI-generated components place selected icons in the project. This makes the feature's icon set visible in source control and gives the bundler a small, direct module graph.