<h1>🔥 Dynamic Lucide Icons in React</h1>
Stop importing every icon individually. Here’s a cleaner approach.
<hr>
<h2>The Problem</h2>
<pre><code class="language-tsx">import { Home, Settings, User, Mail, Bell } from &#x27;lucide-react&#x27;;

// Ugly switch statements everywhere 🤮
function getIcon(name) {
 switch(name) {
 case &#x27;home&#x27;: return &lt;Home /&gt;;
 case &#x27;settings&#x27;: return &lt;Settings /&gt;;
 // ... 50 more cases
 }
}
</code></pre>
<h2>The Solution</h2>
<pre><code class="language-tsx">import { icons } from &#x27;lucide-react&#x27;;

export function LucideIcon({ name }: { name: string }) {
 const normalizedName = name
 .toLowerCase()
 .split(/[-_\s]/)
 .map(word =&gt; word.charAt(0).toUpperCase() + word.slice(1))
 .join(&#x27;&#x27;);
 
 const IconComponent = icons[normalizedName as keyof typeof icons];
 
 return IconComponent ? 
 &lt;IconComponent size={22} strokeWidth={1.75} /&gt; : 
 &lt;icons.Share2 size={22} strokeWidth={1.75} /&gt;;
}
</code></pre>
<h2>Usage</h2>
<pre><code class="language-tsx">// All of these work
&lt;LucideIcon name=&quot;user-circle&quot; /&gt;
&lt;LucideIcon name=&quot;arrow_right&quot; /&gt;
&lt;LucideIcon name=&quot;home icon&quot; /&gt;

// Perfect for dynamic content
const features = [
 { name: &#x27;Dashboard&#x27;, icon: &#x27;layout-dashboard&#x27; },
 { name: &#x27;Profile&#x27;, icon: &#x27;user-circle&#x27; }
];

{features.map(item =&gt; (
 &lt;div className=&quot;flex items-center gap-2&quot;&gt;
 &lt;LucideIcon name={item.icon} /&gt;
 &lt;span&gt;{item.name}&lt;/span&gt;
 &lt;/div&gt;
))}
</code></pre>
<h2>Why It’s Better</h2>
✅ One import instead of dozens 
✅ Any naming convention (kebab-case, snake_case, etc) 
✅ Bulletproof fallbacks - never breaks 
✅ Perfect for APIs and dynamic content

The official daily.dev web development community. Led by thought leaders and webdev experts. Join the Squad!

WebDev

Learn how to dynamically render Lucide icons in React without importing each icon individually. The solution uses a reusable component that normalizes icon names and dynamically selects the appropriate icon from the Lucide icons object, supporting multiple naming conventions and providing fallback handling.

Dynamic Lucide Icons in React - Stop importing every icon individually. Here’s a cleaner approach.

While it save you some characters, I believe this code break tree-shaking and you will ends up with the whole content of the <code>icons</code> file in you final bundle

Lucide react has buildin component for dynamic loading <a href="https://lucide.dev/guide/packages/lucide-react#dynamic-icon-component" target="_blank" rel="noopener nofollow">docs here</a>.
This doesn’t solve problems with big bundle size ~3000 more modules and atrocious compile times +3.5s (on empty project with one dynamic icon).
I’m actually working on lib that will solve this. When it’s ready I will make post about it.
Basic Idea is that, since many icons share common path data (<code>d</code> attributes), I can improve performance by caching these frequently used paths and representing most icons as lightweight JSON blobs built from those cached parts. Moreover JSON doesn’t need to be compiled, so no more waiting 3s-10s for webpack. Additionally most apps will use several icons of same type on same page e.g. chevron-left chevron-right so I can partition icons into pages/groups that share prefix to reduce amount of network requests needed to dynamically load those. Disadvantage to this approach is that more data than needed will be requested. But it will work really well in icon heavy components e.g. icon picker.