Lucide 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. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official packages to make it easier to use these icons in your project.

Installation

Package Managers

Install the lucide icon library from command prompt from the root directory of the project.

npm i lucide-react

Usage

Here is a complete example with unpkg

import { Search } from 'lucide-react'
    
    <button className="absolute inset-y-0 flex items-center text-gray-500 dark:text-dark-500 ltr:left-3 rtl:right-3 ltr:group-[&.right]/form:right-3 rtl:group-[&.right]/form:left-3 ltr:group-[&.right]/form:left-auto rtl:group-[&.right]/form:right-auto focus:outline-none">
         <Search className="size-4" />
    </button>
    

For more icons, see the documentation.