Using Lucide React Icons in Nextjs | React js

Lucide offers a sleek and versatile icon library that seamlessly integrates with your Next.js or React applications. Let’s explore how to leverage Lucide for beautiful, customizable icons:

Lucide is an open-source icon library that provides 1000+ vector (SVG) files for displaying icons and symbols in digital and non-digital projects.

Lucide can be used in any app, it has an npm package, especially for React i.e, lucide-react that can be used in React applications as well as Nextjs apps.

Let’s see how we can use Lucide Icons in our Nextjs app ( you can follow this tutorial for React also ).

#Step 1: Installation

Let’s start by installing lucide-react it in our project.

npm install lucide-react

#Step 2: Using icons

Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. Any other icons that you don’t use will be removed automatically.

Below is the basic example of using an icon component from Lucide icons.

import { Home} from 'lucide-react';

// Usage
const App = () => {
  return <Home color="red" size={48} />;
};

export default App;

The following categories of icons are available

Accessibility
Accounts & access
Animals
Arrows
Brands
Buildings
Charts
Communication
Connectivity
Currency
Cursors
Design
Coding & development
Devices
Emoji
File icons
Food & beverage
Furniture
Gaming
Home
Layout
Mail
Maps
Maths
Medical
Money
Multimedia
Nature
Navigation
Notifications
People
Photography
Science
Seasons
Security
Shapes
Shopping
Social
Sports
Sustainability
Text formatting
Time & calendar
Tools
Transportation
Travel
Weather

#Step 3: Customization

We can change size, color, and stroke width by passing props to Icon components

Like here, I am passing the green color to Home icon we used earlier.

import { Home} from 'lucide-react';

// Usage
const App = () => {
  return <Home color="green" size={48} />;3
};

export default App;

Following are all the available props for lucid icons.

#Conclusion

Hope this quick tutorial helped you get started with lucide icons in your React or Nextjs application, If you want to explore the depth of it visit the official documentation.