How to Use Lucide Icons in Your Projects ?

What is Lucide ?

Lucide is an open-source icon library that provides a set of simple and customizable icons for use in web and application projects. It is a popular choice for developers who need lightweight, scalable icons that can be easily customized through CSS, making it suitable for a wide range of applications.

Installation

First, you need to install the required package:

npm

npm install lucide

CDN

<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

<!-- Production version -->
<script src="https://unpkg.com/lucide@latest"></script>

Basic Usages

Here's a simple example of how to use a Lucide icon in your projects:

Basic Usage for Vanilla

vanilla

import { createIcons, icons } from 'lucide';

createIcons({ icons });

document.body.append('<i data-lucide="search"></i>');

Basic Usage for React

react

import { Search } from 'lucide-react';

const App = () => {
  return (
    <Search />
  );
};

export default App;