Lucide
lucide.dev › guide › packages › lucide-react
Lucide React – Lucide
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. The rest of the icons are tree-shaken away. Additional props can be passed to adjust the icon: ... import { Camera } from 'lucide-react'; // Usage const App = () => { return <Camera color="red" size={48} />; }; export default App;
npm
npmjs.com › package › lucide-react
lucide-react - npm
2 weeks ago - A Lucide icon library package for React applications.. Latest version: 0.577.0, last published: 10 days ago. Start using lucide-react in your project by running `npm i lucide-react`. There are 10835 other projects in the npm registry using lucide-react.
» npm install lucide-react
Published Mar 04, 2026
Version 0.577.0
Author Eric Fennis
Repository https://github.com/lucide-icons/lucide
Homepage https://lucide.dev
Videos
Lucide Icons in React / Next.js project with lucide-react
00:56
Tema de icons free: Lucide Icons. - YouTube
02:19
[001] Aula 09 - Instalando biblioteca de Icones - lucide-react ...
Adding Lucide Icons to the React app. #react #reactjs #app #icons #webdevelopment #webdevelopmenttips #coding #programming #fry #frypgシ #frypage #fryyyyyyyyyyy | TikTok
r/react on Reddit: Animated lucide icons for react
01:31
How to Create a React Component Wrapper for Icons with lucide-react ...
Do I need to install lucide-react?
No! Unlike the npm package, here you copy SVG code directly. Zero dependencies, smaller bundle, full control. Works with React, Vue, Svelte, Angular, or plain HTML.
shadcn.io
shadcn.io › home › icons › lucide
Free Lucide Icons for React
How do I use Lucide in React or Next.js?
Copy the SVG code directly from this page - no lucide-react package needed. The SVG embeds inline with zero dependencies. Customize color, size, stroke width before copying.
shadcn.io
shadcn.io › home › icons › lucide
Free Lucide Icons for React
What is Lucide?
Lucide is a beautiful, consistent open-source icon library and community-driven fork of Feather Icons. Actively maintained with hundreds of additional icons beyond the original Feather set.
shadcn.io
shadcn.io › home › icons › lucide
Free Lucide Icons for React
lucide-animated
lucide-animated.com
lucide-animated | Free Animated React Icons Library
Free open-source library of 350+ beautifully crafted animated React icons. Built with Motion and Lucide. Copy-paste ready, MIT licensed, fully customizable SVG icons with smooth animations.
Lucide
lucide.dev › guide › packages › lucide-react-native
Lucide React Native – Lucide
Each icon can be imported as a React component. Additional props can be passed to adjust the icon: ... import { Camera } from 'lucide-react-native'; // Usage const App = () => { return <Camera color="red" size={48} />; }; export default App;
CodeSandbox
codesandbox.io › examples › package › lucide-react
lucide-react examples - CodeSandbox
Use this online lucide-react playground to view and fork lucide-react example apps and templates on CodeSandbox.
Lucide
lucide.dev
Lucide Icons
Lucide has active community on GitHub and Discord.
Lucide
lucide.dev › guide
What is Lucide? – Lucide
Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including Web (Vanilla), React, React Native, Vue, Vue 3, Svelte, Preact, Solid, Angular, Astro, and NodeJS.
GitHub
github.com › lucide-icons › lucide
GitHub - lucide-icons/lucide: Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons. · GitHub
lucide-react · Docs · Source · lucide-vue-next · Docs · Source · lucide-svelte · Docs · Source · lucide-solid · Docs · Source · lucide-preact · Docs · Source · lucide-react-native · Docs · Source · lucide-angular · Docs · Source · @lucide/astro ·
Starred by 21.6K users
Forked by 1.2K users
Languages TypeScript 87.2% | JavaScript 11.6%
DEV Community
dev.to › aniruddhaadak › lucide-react-high-quality-open-source-icons-for-your-react-projects-k9c
🚀 Lucide React: High-Quality, Open-Source Icons for Your React Projects - DEV Community
January 27, 2025 - Lucide React is a modern, high-quality icon library for React, offering customizable, scalable, and easy-to-use icons for your projects.
Shadcn
shadcn.io › home › icons › lucide
Free Lucide Icons for React
1,655 free React icons. Copy components or download SVG, PNG, ICO & WebP.
Lucide
lucide.dev › guide › installation
Installation – Lucide
Implementation of the lucide icon library for React applications.
DEV Community
dev.to › sheraz4194 › unleashing-the-power-of-lucide-the-ultimate-icon-library-for-modern-web-development-2kmi
Unleashing the Power of Lucide: The Ultimate Icon Library for Modern Web Development - DEV Community
July 9, 2024 - Easy Integration: Integrating Lucide into your project is a breeze. Whether you’re using React, Vue, Angular, or plain HTML/CSS, Lucide provides simple integration options.
Tutorend
tutorend.com › tutorials › using-lucide-icons-in-nextjs-react-js
Using Lucide React Icons in Nextjs | React js
September 7, 2024 - 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.
npm
npmjs.com › package › lucide-react-native
lucide-react-native - npm
2 weeks ago - Lucide icon library for React Native applications.
» npm install lucide-react-native
Published Mar 04, 2026
Version 0.577.0
Author Eric Fennis
Repository https://github.com/lucide-icons/lucide
Homepage https://lucide.dev
GitHub
github.com › lucide-icons › lucide › tree › main › packages › lucide-react
lucide/packages/lucide-react at main · lucide-icons/lucide
Lucide icon library for React applications.
Author lucide-icons
Lucide
lucide.dev › packages
Packages – Lucide
A Lucide icon library package for React applications.
Tamagui
tamagui.dev › ui › lucide-icons
Lucide Icons | Tamagui — React Native UI kit with copy-paste composable components
The great Lucide Icons , a superset of the wonderful Feather Icons .
Medium
medium.com › @thegitside › i-found-lucide-react-and-its-a-game-changer-for-developers-6189c82e09d4
I Found Lucide-React, and It’s a Game-Changer for Developers | by Gitanjali | Medium
December 17, 2024 - Community-Driven Evolution Lucide-React isn’t a one-and-done library. It’s open-source and actively maintained by a community that genuinely cares about keeping it fresh and relevant.
jsDelivr
jsdelivr.com › package › npm › lucide-react
lucide-react CDN by jsDelivr - A CDN for npm and GitHub
October 19, 2020 - A free, fast, and reliable CDN for lucide-react. A Lucide icon library package for React applications.
Published Oct 19, 2020
Repository https://github.com/lucide-icons/lucide
Reddit
reddit.com › r/nextjs › next 15 and lucide react load and render icons dynamically
r/nextjs on Reddit: Next 15 and Lucide React load and render icons dynamically
December 15, 2024 -
Problem:
I am working on a project where we have to generate a sidebar menu dynamically. So we store all the menu items in a DB, load then when component renders and construct the sidebar. Until this point its working correctly. I am using Lucide react icons, I want to load the icon dynamically and display it in the sidebar. This functionality has two problems:
-
The icons loads properly but there is a delay. The menu items load first and then all icons pop in after a small delay.(Delay is small but clearly noticeable)
-
We are showing the preview for the Sidebar to the user. So he can open/close and test the placement of items in the menubar. Here also the icons load/pop-in with a small delay and this repeats whenever the user clicks on a menubar item.
What is the potential solution ? I don't want to load all the icons in the component at once.
Top answer 1 of 3
1
Display a skeleton loading effect until the menu icon and the menu title has been fully loaded. This will prevent the flickering effect during the delay.
2 of 3
1
https://github.com/lucide-icons/lucide/issues/2081 Lucide "dynamicIconImports" "use client"; import dynamicIconImports from "lucide-react/dynamicIconImports"; import dynamic from "next/dynamic"; import { FC, memo } from "react"; type IconName = keyof typeof dynamicIconImports; const icons = Object.keys(dynamicIconImports) as IconName[]; type ReactComponent = FC<{ className?: string }>; const icons_components = {} as Record; for (const name of icons) { const NewIcon = dynamic(dynamicIconImports[name], { ssr: false, }) as ReactComponent; icons_components[name] = NewIcon; } type DynamicIconProps = { name: IconName; className?: string; }; const DynamicIcon = memo(({ name, ...props }: DynamicIconProps) => { const Icon = icons_components[name]; if (!Icon) return null; return ; }); DynamicIcon.displayName = "DynamicIcon"; export default DynamicIcon; ```