Lucide
lucide.dev › guide › packages › lucide-react
Lucide for React – Lucide
Lucide v1 is out!🚀 You're looking at the site for v1, for v0 go to v0 siteSkip to content ... Are you an LLM? You can read better optimized documentation at /guide/react.md for this page in Markdown format
npm
npmjs.com › package › lucide-react
lucide-react - npm
3 weeks ago - A Lucide icon library package for React applications.. Latest version: 1.0.1, last published: 21 hours ago. Start using lucide-react in your project by running `npm i lucide-react`. There are 11136 other projects in the npm registry using lucide-react.
» npm install lucide-react
Published Mar 23, 2026
Version 1.0.1
Author Eric Fennis
Repository https://github.com/lucide-icons/lucide
Homepage https://lucide.dev
Videos
YouTube
01:31
How to Create a React Component Wrapper for Icons with lucide-react ...
r/react on Reddit: Animated lucide icons for react
Adding Lucide Icons to the React app. #react #reactjs #app #icons #webdevelopment #webdevelopmenttips #coding #programming #fry #frypgシ #frypage #fryyyyyyyyyyy | TikTok
Adding Lucide Icons to the React app. #javascript #coding ...
r/reactjs on Reddit: React Native Animated tabs - Reanimated, Moti ...
What is lucide-animated?
lucide-animated is a free, open-source library of 350+ beautifully crafted animated React icons. Built with Motion library and based on Lucide icons.
lucide-animated.com
lucide-animated.com
lucide-animated | Free Animated React Icons Library
Is lucide-animated free to use?
Yes! lucide-animated is completely free and open-source under the MIT license. You can use it for personal and commercial projects.
lucide-animated.com
lucide-animated.com
lucide-animated | Free Animated React Icons Library
What technologies are used in lucide-animated?
lucide-animated icons are React components written in TypeScript. Animations are powered by Motion (formerly Framer Motion), and the icons are based on Lucide.
lucide-animated.com
lucide-animated.com
lucide-animated | Free Animated React Icons Library
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.7K users
Forked by 1.3K users
Languages TypeScript 88.8% | JavaScript 10.0%
Lucide
lucide.dev › guide › react › getting-started
Getting started - React – Lucide
Lucide v1 is out!🚀 You're looking at the site for v1, for v0 go to v0 siteSkip to content ... Are you an LLM? You can read better optimized documentation at /guide/react/getting-started.md for this page in Markdown format
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.
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;
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.
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 v1 is out!🚀 You're looking at the site for v1, for v0 go to v0 siteSkip to content
Lucide
lucide.dev › guide › version-1
Lucide Version 1
8 hours ago - A modern, standalone implementation for Angular, @lucide/angular · Support for context providers in React, Vue, Svelte, and Solid.
Shadcn
shadcn.io › home › icons › lucide
Free Lucide Icons for React
1,655 free React icons. Copy components or download SVG, PNG, ICO & WebP.
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.
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.
Lucide
lucide.dev › packages
Packages – Lucide
A Lucide icon library package for React applications.
GitHub
github.com › lucide-icons › lucide › tree › main › packages › lucide-react
lucide/packages/lucide-react at main · lucide-icons/lucide
Implementation of the Lucide icon library for React applications.
Author lucide-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.
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 .
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; ```