Lucide
lucide.dev › icons › x
x icon details – Lucide
June 18, 2023 - import { X } from 'lucide-react'; const App = () => { return ( <X /> ); }; export default App; vue · <script setup> import { X } from '@lucide/vue'; </script> <template> <X /> </template> svelte · <script> import { X } from 'lucide-svelte'; </script> <X /> tsx ·
Icons
Beautiful & consistent icon toolkit made by the community.
Guide
An introduction to Lucide, an open-source icon library that provides 1600+ vector (svg) files for displaying icons and symbols in digital and non-digital projects.
Packages
Beautiful & consistent icon toolkit made by the community.
Categories
Beautiful & consistent icon toolkit made by the community.
Lucide
lucide.dev › guide › packages › lucide-react
Lucide for React – Lucide
Lucide provides a React component library for using icons in your applications.
Videos
r/react on Reddit: Animated lucide icons for react
Lucide Icons in React / Next.js project with lucide-react
01:31
How to Create a React Component Wrapper for Icons with lucide-react ...
Add Icons in React App | Lucide React. Add beautiful Icons in ...
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 ...
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
npm
npmjs.com › package › lucide-react
lucide-react - npm
4 days ago - A Lucide icon library package for React applications.. Latest version: 1.7.0, last published: a day ago. Start using lucide-react in your project by running `npm i lucide-react`. There are 11221 other projects in the npm registry using lucide-react.
» npm install lucide-react
Published Mar 25, 2026
Version 1.7.0
Author Eric Fennis
Repository https://github.com/lucide-icons/lucide
Homepage https://lucide.dev
Lucide
lucide.dev › icons › circle-x
circle-x icon details – Lucide
March 8, 2024 - <script> import { createIcons, circleX } from 'lucide'; createIcons({ icons: { circleX } }); </script> <i data-lucide="circle-x"></i> ... import { CircleX } from 'lucide-react'; const App = () => { return ( <CircleX /> ); }; export default App;
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;
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.8K users
Forked by 1.3K users
Languages TypeScript 88.5% | JavaScript 10.3%
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.
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; ```
npm
npmjs.com › package › lucide-react-native
lucide-react-native - npm
4 days ago - Implementation of the Lucide icon library for React Native applications.
» npm install lucide-react-native
Published Mar 25, 2026
Version 1.7.0
Author Eric Fennis
Repository https://github.com/lucide-icons/lucide
Homepage https://lucide.dev
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.
React Icons
react-icons.github.io › react-icons › icons › lu
React icons preview for lu
https://lucide.dev/ import { IconName } from "react-icons/lu"; x
Lucide
lucide.dev › guide › react › getting-started
Getting started - 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. ... import { Camera } from 'lucide-react'; // Usage const App = () => { return <Camera />; }; export default App;
Lucide
lucide.dev › icons
Icons – Lucide
Lucide v1 is out!🚀 You're looking at the site for v1, for v0 go to v0 siteSkip to content
Lucide
lucide.dev › icons › volume-x
volume-x icon details – Lucide
August 23, 2024 - <script> import { createIcons, volumeX } from 'lucide'; createIcons({ icons: { volumeX } }); </script> <i data-lucide="volume-x"></i> ... import { VolumeX } from 'lucide-react'; const App = () => { return ( <VolumeX /> ); }; export default App;
Lucide
lucide.dev › icons › search-x
Lucide – Lucide
<script> import { createIcons, searchX } from 'lucide'; createIcons({ icons: { searchX } }); </script> <i data-lucide="search-x"></i> ... import { SearchX } from 'lucide-react'; const App = () => { return ( <SearchX /> ); }; export default App;
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 - Let’s learn the steps to get started with Lucide in a React or Next project.
Lucide
lucide.dev › guide › installation
Installation – Lucide
Implementation of the Lucide icon library 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
Tamagui
tamagui.dev › ui › lucide-icons
Lucide Icons | Tamagui — React Native UI kit with copy-paste composable components
XSquare · Youtube · Zap · ZapOff · ZoomIn · ZoomOut · yarn add react-native-svg @tamagui/lucide-icons-2 Copy · Use them as regular React components: import { Button } from 'tamagui' import { Plus } from '@tamagui/lucide-icons-2' // Button will automatically pass size/theme to icon ·
Lucide
lucide.dev
Lucide Icons
Lucide has a lot of customization options to match the icons with your UI.