Lucide is the icon library specified for this project (configured in components.json). The codebase currently uses FontAwesome but is migrating to lucide-react per the implementation plan. All new components MUST use lucide-react. shadcn/ui CLI generates Lucide imports by default.
Quick Start
Install
pnpm add lucide-react
Basic Usage
import { FileText, ChevronDown, Plus } from "lucide-react";
function Toolbar() {
return (
<button className="text-muted-foreground flex items-center gap-1.5">
<Plus className="size-4" />
<span>Add Item</span>
</button>
);
}
With Tailwind Sizing (Project Convention)
// GOOD — Use Tailwind size classes
<Camera className="size-4" />
<Camera className="size-3" />
<Camera className="h-4 w-4" />
// BAD — Don't use size/color props when Tailwind works
<Camera size={16} color="#58a6ff" />
Key Concepts
Concept
Usage
Example
Named imports
Tree-shakable, one per icon
import { Search } from "lucide-react"
Tailwind sizing
Use size-* or h-* w-* classes
className="size-4"
Color inheritance
Icons inherit currentColor
Parent text-accent colors the icon
strokeWidth
Prop for line thickness (default 2)
strokeWidth={1.5}
Dynamic icons
Use DynamicIcon for name-based loading
Avoid in static UI — hurts tree-shaking
FontAwesome to Lucide Migration Map
FontAwesome
Lucide
Context
faXmark
X
Dialog close
faSearch
Search
Command palette
faCheck
Check
Select checkmarks
faSpinner
Loader2
Loading (use animate-spin)
faChevronUp
ChevronUp
Select, number input
faChevronDown
ChevronDown
Select, tree expand
faCalendar
Calendar
Date picker
faHome
Home
Navigation
faSun / faMoon
Sun / Moon
Theme toggle
faRocket
Rocket
Quick start
faTerminal
Terminal
Scripts
faCode
Code
Features
faPalette
Palette
Customization
faPlug
Plug
Integrations
faCog
Settings
Settings
faCircleCheck
CircleCheck
Toast success
faCircleXmark
CircleX
Toast error
faTriangleExclamation
TriangleAlert
Toast warning
faCircleInfo
Info
Toast info
EFIS Editor Icons (New Components)
Icons needed for the editor panels per UI/UX spec:
Purpose
Lucide Icon
Component
Drag handle
GripVertical
checklist-item-row.tsx
Expand/Collapse
ChevronRight / ChevronDown
Tree groups, collapsible items
File icon
FileText
Files sidebar
Import
Upload
Toolbar
Export
Download
Toolbar
Undo / Redo
Undo2 / Redo2
Toolbar
Add item
Plus
Toolbar, editor
Delete
Trash2
Context menus
Edit
Pencil
Inline edit trigger
Properties
SlidersHorizontal
Toolbar toggle
Keyboard
Keyboard
Status bar shortcuts
Warning
TriangleAlert
Warning items
New file
FilePlus
Sidebar header
See Also
hooks — Icon wrapper hooks
components — Icon component patterns
data-fetching — N/A (icons are static)
state — Icon state patterns
forms — Icons in form fields
performance — Tree-shaking, bundle size
Related Skills
See the shadcn-ui skill — shadcn components expect Lucide icons by default
See the tailwind skill — icon sizing/coloring via Tailwind classes
See the react skill — component patterns for icon wrappers
Documentation Resources
Fetch latest lucide-react documentation with Context7.
How to use Context7:
Use mcp__context7__resolve-library-id to search for "lucide-react"
Prefer website documentation (IDs starting with /websites/)
Query with mcp__context7__query-docs using the resolved library ID
Library ID:/websites/lucide_dev_guide_packages
Recommended Queries:
"lucide-react icon props customization"
"lucide-react dynamic icon loading"
"lucide-react tree-shaking best practices"
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: cperuffo3-efis-checklist-editor-lucide-react3description: Lucide React4---56# Lucide React78Lucide is the icon library specified for this project (configured in `components.json`). The codebase currently uses FontAwesome but is migrating to lucide-react per the implementation plan. All new components MUST use lucide-react. shadcn/ui CLI generates Lucide imports by default.910## Quick Start1112### Install1314```bash15pnpm add lucide-react16```1718### Basic Usage1920```tsx21import { FileText, ChevronDown, Plus } from "lucide-react";2223function Toolbar() {24 return (25 <button className="text-muted-foreground flex items-center gap-1.5">26 <Plus className="size-4" />27 <span>Add Item</span>28 </button>29 );30}31```3233### With Tailwind Sizing (Project Convention)3435```tsx36// GOOD — Use Tailwind size classes37<Camera className="size-4" />38<Camera className="size-3" />39<Camera className="h-4 w-4" />4041// BAD — Don't use size/color props when Tailwind works42<Camera size={16} color="#58a6ff" />43```4445## Key Concepts4647| Concept | Usage | Example |48| ----------------- | ---------------------------------------- | --------------------------------------- |49| Named imports | Tree-shakable, one per icon | `import { Search } from "lucide-react"` |50| Tailwind sizing | Use `size-*` or `h-* w-*` classes | `className="size-4"` |51| Color inheritance | Icons inherit `currentColor` | Parent `text-accent` colors the icon |52| strokeWidth | Prop for line thickness (default 2) | `strokeWidth={1.5}` |53| Dynamic icons | Use `DynamicIcon` for name-based loading | Avoid in static UI — hurts tree-shaking |5455## FontAwesome to Lucide Migration Map5657| FontAwesome | Lucide | Context |58| ----------------------- | --------------- | ---------------------------- |59| `faXmark` | `X` | Dialog close |60| `faSearch` | `Search` | Command palette |61| `faCheck` | `Check` | Select checkmarks |62| `faSpinner` | `Loader2` | Loading (use `animate-spin`) |63| `faChevronUp` | `ChevronUp` | Select, number input |64| `faChevronDown` | `ChevronDown` | Select, tree expand |65| `faCalendar` | `Calendar` | Date picker |66| `faHome` | `Home` | Navigation |67| `faSun` / `faMoon` | `Sun` / `Moon` | Theme toggle |68| `faRocket` | `Rocket` | Quick start |69| `faTerminal` | `Terminal` | Scripts |70| `faCode` | `Code` | Features |71| `faPalette` | `Palette` | Customization |72| `faPlug` | `Plug` | Integrations |73| `faCog` | `Settings` | Settings |74| `faCircleCheck` | `CircleCheck` | Toast success |75| `faCircleXmark` | `CircleX` | Toast error |76| `faTriangleExclamation` | `TriangleAlert` | Toast warning |77| `faCircleInfo` | `Info` | Toast info |7879## EFIS Editor Icons (New Components)8081Icons needed for the editor panels per UI/UX spec:8283| Purpose | Lucide Icon | Component |84| --------------- | ------------------------------ | ------------------------------ |85| Drag handle | `GripVertical` | `checklist-item-row.tsx` |86| Expand/Collapse | `ChevronRight` / `ChevronDown` | Tree groups, collapsible items |87| File icon | `FileText` | Files sidebar |88| Import | `Upload` | Toolbar |89| Export | `Download` | Toolbar |90| Undo / Redo | `Undo2` / `Redo2` | Toolbar |91| Add item | `Plus` | Toolbar, editor |92| Delete | `Trash2` | Context menus |93| Edit | `Pencil` | Inline edit trigger |94| Properties | `SlidersHorizontal` | Toolbar toggle |95| Keyboard | `Keyboard` | Status bar shortcuts |96| Warning | `TriangleAlert` | Warning items |97| New file | `FilePlus` | Sidebar header |9899## See Also100101- [hooks](references/hooks.md) — Icon wrapper hooks102- [components](references/components.md) — Icon component patterns103- [data-fetching](references/data-fetching.md) — N/A (icons are static)104- [state](references/state.md) — Icon state patterns105- [forms](references/forms.md) — Icons in form fields106- [performance](references/performance.md) — Tree-shaking, bundle size107108## Related Skills109110- See the **shadcn-ui** skill — shadcn components expect Lucide icons by default111- See the **tailwind** skill — icon sizing/coloring via Tailwind classes112- See the **react** skill — component patterns for icon wrappers113114## Documentation Resources115116> Fetch latest lucide-react documentation with Context7.117118**How to use Context7:**1191201. Use `mcp__context7__resolve-library-id` to search for "lucide-react"1212. Prefer website documentation (IDs starting with `/websites/`)1223. Query with `mcp__context7__query-docs` using the resolved library ID123124**Library ID:** `/websites/lucide_dev_guide_packages`125126**Recommended Queries:**127128- "lucide-react icon props customization"129- "lucide-react dynamic icon loading"130- "lucide-react tree-shaking best practices"131132---133> Converted and distributed by [TomeVault](https://tomevault.io/claim/cperuffo3) — claim your Tome and manage your conversions.134<!-- tomevault:4.0:skill_md:2026-04-15 -->
Run npx skillmds@latest add tomevault-io/cperuffo3-efis-checklist-editor-lucide-react in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Lucide React It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io