lucide-icons
0Lucide icons provide a set of scalable vector icons for web projects. They are ideal for developers looking for customizable icons that enhance the visual appeal of their applications.
100Updated Today
Icons
Quick InstallView Source
$ npx skills add https://github.com/aksuharun/skills --skill lucide-iconsOverview
About This Skill
Lucide icons is a framework-agnostic SVG icon library offering 1000+ individually importable icons with full tree-shaking support. It provides framework-specific packages for React, Vue, Svelte, Solid, Preact, Angular, Astro, React Native, Vanilla JS, and static environments. Each icon renders as an inline SVG and accepts universal props like size, color, and strokeWidth. The skill helps developers implement icons correctly by enforcing best practices such as direct imports, dynamic icon handling via DynamicIcon components, and proper accessibility patterns with aria-label attributes.
How to Use
Install via the command line using the provided npx command.
Use Cases
Integrate Lucide icons into a web application
Use icons in mobile application development
Enhance user interface with customizable icons
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/aksuharun/skills --skill lucide-iconsAlternative Install (Git Clone)
git clone https://github.com/aksuharun/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a set of Lucide icons for a [COMPANY]'s [INDUSTRY] project. Focus on icons that represent [SPECIFIC FEATURES OR FUNCTIONS] and provide their SVG code, names, and usage examples. Prioritize icons that are clean, modern, and scalable for web applications.
Example Output
# Lucide Icons for Acme Corp's E-Commerce Dashboard
Here are 10 Lucide icons tailored for Acme Corp’s e-commerce dashboard, optimized for scalability and modern UI design:
## **Recommended Icons**
### **🛒 Core E-Commerce Icons**
- **`ShoppingCart`** (SVG Code: `<ShoppingCart size={24} color="#1f2937" />`)
- *Usage*: Primary CTA button for "Add to Cart" actions.
- **`CreditCard`** (SVG Code: `<CreditCard size={24} color="#059669" />`)
- *Usage*: Payment method selection in checkout flow.
### **📊 Analytics & Insights**
- **`BarChart3`** (SVG Code: `<BarChart3 size={24} color="#0ea5e9" />`)
- *Usage*: Visualizing sales trends in the analytics dashboard.
- **`TrendingUp`** (SVG Code: `<TrendingUp size={24} color="#10b981" />`)
- *Usage*: Highlighting revenue growth metrics.
### **🔧 Utility & Navigation**
- **`Search`** (SVG Code: `<Search size={24} color="#6b7280" />`)
- *Usage*: Product search bar in the navbar.
- **`Settings`** (SVG Code: `<Settings size={24} color="#f59e0b" />`)
- *Usage*: Link to user account settings.
### **📦 Product & Inventory**
- **`Package`** (SVG Code: `<Package size={24} color="#8b5cf6" />`)
- *Usage*: Indicating shipped orders in the order history.
- **`Box`** (SVG Code: `<Box size={24} color="#ec4899" />`)
- *Usage*: Representing inventory items in stock management.
### **🚀 Performance & Speed**
- **`Zap`** (SVG Code: `<Zap size={24} color="#f97316" />`)
- *Usage*: Highlighting fast-loading product pages.
### **📌 Customization Tips**
- Adjust `size` prop (e.g., `size={20}`) for smaller UI elements.
- Use `strokeWidth={1.5}` for a lighter, more modern look.
- Pair icons with consistent colors (e.g., `#1f2937` for dark mode).
## **How to Implement**
1. Install Lucide in your project:
```bash
npm install lucide-react
```
2. Import icons dynamically:
```jsx
import { ShoppingCart } from 'lucide-react';
```
3. Use in JSX:
```jsx
<button>
<ShoppingCart size={20} /> Add to Cart
</button>
```
All icons are optimized for React, but Lucide supports Vue, Svelte, and vanilla JS as well.Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan