Mastering Lucide in Your React Project

A stylish and functional icon library, Lucide is ideal for React developers. It provides a wide range of editable SVG icons that blend in perfectly with the layout of your application. With an emphasis on working with colors via the currentColor property, we'll examine how to incorporate and modify Lucide in your React projects in this tutorial.

1. Why Choose Lucide?

Lucide is a modern icon library that developers love for its:

• Extensive Icon Library: Hundreds of lightweight, scalable icons.
• React Optimization: Works seamlessly with React components.
• Customizability: Easily adjust size, color, and other properties.
• Tailwind CSS Compatibility: Ideal for utility-first styling.

2. Installing Lucide in React

Begin by installing the library in your project:

npm install lucide        

3. Using Lucide Icons

Here’s how to add Lucide icons to your components:

import { Home, Search } from "lucide-react";  

function App() {  
  return (  
    <div className="app">  
      <Home size={32} />  
      <Search size={32} />  
    </div>  
  );  
}  

export default App;          

4. Working with Colors

Because Lucide icons by default employ the CSS term currentColor, their color is dynamic and depends on the parent element's calculated color. With this functionality, icons will automatically adjust to your app's appearance.

4.1 Adjusting Color with the color Prop

You can override the default color by passing the color prop directly to the icon component:

import { Smile } from "lucide-react";  

function App() {  
  return (  
    <div className="app">  
      <Smile color="#3e9392" />  
    </div>  
  );  
}  

export default App;          

4.2 Using Parent Element’s Text Color

When no explicit color is passed, Lucide icons inherit their color from the computed color of their parent element.

For example, in this button component, the ThumbsUp icon will inherit the parent button's color:

import { ThumbsUp } from "lucide-react";  

function LikeButton() {  
  return (  
    <button style={{ color: "#fff", backgroundColor: "#3e9392", padding: "10px", border: "none" }}>  
      <ThumbsUp />  
      Like  
    </button>  
  );  
}  

export default LikeButton;          

This behavior is browser-native and works seamlessly with CSS classes, inline styles, or styled-components.

5. Customizing Icons

Lucide icons are SVG-based, making them highly customizable.

• Size: Adjust using the size prop (default is 24).

<Home size={48} />          

• Stroke Width: Modify the line thickness with the strokeWidth prop.

<Search strokeWidth={1.5} />          

• Tailwind CSS Integration: Combine Lucide icons with Tailwind for utility-first styling

<Smile className="text-red-500 w-8 h-8" />          

6. Advanced Tips

6.1 Dynamic Icon Rendering

Use Lucide’s flexibility to render icons dynamically:

import * as LucideIcons from "lucide-react";  

const DynamicIcon = ({ name, color }) => {  
  const Icon = LucideIcons[name];  
  return Icon ? <Icon color={color} size={32} /> : <span>Icon not found</span>;  
};  

function App() {  
  return <DynamicIcon name="Home" color="blue" />;  
}  

export default App;          

6.2 Create an Icon Wrapper

Build a reusable icon component for consistent styles:

const CustomIcon = ({ Icon, color = "black", size = 24 }) => (  
  <Icon size={size} color={color} />  
);  

export default CustomIcon;          

Conclusion

Lucide’s use of currentColor and customizable properties makes it a versatile and powerful icon library for React developers. Whether you’re styling icons to match a theme or dynamically rendering them, Lucide ensures flexibility and ease of use.

?? Pro Tip: Use the color prop for precise control or let Lucide icons inherit the parent’s text color for a natural, seamless design.

Which Lucide feature are you most excited about? Share your thoughts in the comments and stay tuned for more React tips in our next newsletter! ??