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
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.
Next 15 and Lucide React load and render icons dynamically
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. More on reddit.com
3
2
December 15, 2024BEST icon library?
lucide-react More on reddit.com
53
47
December 10, 2024What's the most complete and consistent icon library that you have used?
I use Lucide Icons, I personally really like that it has a lot of icons and it is incredibly visually consistent. Lucide Icons More on reddit.com
51
42
September 18, 2024I built a zero-config tool to optimize Lucide icons using SVG sprites (saves bundle size & requests)
10kb of savings. Wow. What will I do with all my free time now ๐ jk. This is cool but feels like a super micro micro optimization? More on reddit.com
6
14
November 20, 2025Videos
01:31
How to Create a React Component Wrapper for Icons with 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
r/reactjs on Reddit: React Native Animated tabs - Reanimated, Moti ...
03:47
10 - React - React icons / Lucide #react #js #icons - YouTube
npm
npmjs.com โบ package โบ lucide-react
lucide-react - npm
3 weeks ago - A Lucide icon library package for React applications.. Latest version: 1.6.0, last published: 21 hours ago. Start using lucide-react in your project by running `npm i lucide-react`. There are 11172 other projects in the npm registry using lucide-react.
ยป npm install lucide-react
Published ย Mar 24, 2026
Version ย 1.6.0
Author ย Eric Fennis
Repository ย https://github.com/lucide-icons/lucide
Homepage ย https://lucide.dev
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 โบ 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 โบ packages โบ lucide-react-native
Lucide React Native โ Lucide
import * as icons from 'lucide-react-native/icons'; interface IconProps { name: keyof typeof icons; color?: string; size?: number; } const Icon = ({ name, color, size }: IconProps) => { const LucideIcon = icons[name]; return <LucideIcon color={color} size={size} />; }; export default Icon;
GitHub
github.com โบ topics โบ lucide-react
lucide-react ยท GitHub Topics ยท GitHub
javascript typescript postgresql tailwindcss lucide-react clerk-auth ... A responsive, aesthetic portfolio website built using Next.js with advanced animations and a clean layout. nodejs node typescript jsx nextjs tailwindcss framer-motion lucide-react tailwindcss-v4
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 is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects.
Starred by 21.7K users
Forked by 1.3K users
Languages ย TypeScript 88.8% | JavaScript 10.0%
Lucide
lucide.dev โบ guide โบ version-1
Lucide Version 1
15 hours ago - A modern, standalone implementation for Angular, @lucide/angular ยท Support for context providers in React, Vue, Svelte, and Solid.
CodeSandbox
codesandbox.io โบ s โบ lucide-react-render-children-moi0vp
Lucide React, render children - CodeSandbox
February 22, 2022 - Lucide React, render children by ericfennis using lucide-react, prop-types, react, react-dom, react-scripts
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 - As someone constantly working with frontend projects, finding the perfect icon library has always been a challenge. Most options out there are either overly complex, lack modern features, or just donโt fit seamlessly into React workflows. But then I found Lucide-React โ and itโs a whole different story.
Lucide
lucide.dev โบ guide โบ react โบ advanced โบ typescript
Typescript - 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/advanced/typescript.md for this page in Markdown format
OneCompiler
onecompiler.com โบ react
ReactJS Online Editor & Compiler
The editor shows sample boilerplate code when you choose language as 'React' and start writing code to learn and test online without worrying about tedious process of installation.
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 - Lightweight: With minimal dependencies and a small bundle size, Lucide React keeps your project lightweight and fast.
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, ...
YouTube
youtube.com โบ watch
YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
NextLeap
nextleap.app โบ online-compiler โบ reactjs-programming
React Online Compiler | Code, Compile, and Debug React Apps - NextLeap
Experience the power of React with NextLeap's Online Compiler. Write, compile, and debug React applications online in real-time. Boost your productivity and enhance your React development workflow with our intuitive platform.
Lucide
lucide.dev โบ icons โบ code
code icon details โ Lucide
May 16, 2025 - import { Code } from 'lucide-react'; const App = () => { return ( <Code /> ); }; export default App;
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; ```
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