Lucide
Knowledge base from the Lucide (lucide-react, lucide-vue-next, lucide-svelte, and other framework packages) icon library documentation. Use when adding icons to a project, choosing between the vanilla JS, static, or a framework-specific package, customizing icon color/size/stroke-width, or migrating from Feather Icons or an older Lucide version.
Lucide
Package: lucide (+ per-framework wrappers) | Guide pages: 147 | Generated: 2026-08-24
How to Use This Skill
- Without arguments — load the core patterns and package-choice cheatsheet below
- With a framework name — ask about
react,vue,svelte,angular, etc.; I find and read the matching chapters - With a topic — ask about
sizing,color,accessibility,tree-shaking, or another indexed topic - With a chapter — ask for
ch014; I load that specific chapter - Browse — ask "what chapters do you have?" to see the full index below, grouped by framework
Core Patterns & Conventions
Lucide ships as a per-icon component library: every icon is its own named export (import { Smile } from 'lucide-react'), so only the icons a project actually imports end up in the production bundle. This tree-shaking behavior is the library's central design choice and shapes almost every other pattern — dynamic-icon-by-name helpers exist for when the icon name is truly data-driven, but static named imports are the default and the tree-shakeable path.
Every icon defaults to color="currentColor", inheriting its color from the computed CSS color of the element or its nearest ancestor. This is standard SVG/CSS behavior, not a Lucide-specific mechanism — icons placed inside a styled button or link pick up that element's text color automatically, with no icon-specific CSS needed.
Three props recur across every framework wrapper: size (rendered width/height), color (stroke/fill color, defaults to currentColor), and strokeWidth (SVG stroke thickness). A fourth, absoluteStrokeWidth, keeps the visual stroke thickness constant across different size values instead of letting it scale proportionally — relevant any time icons of different sizes need to look visually consistent.
The library ships ten distribution targets: a vanilla JS package (data-lucide attribute + createIcons() DOM scan, or createElement() for a single icon), a static package (SVG files, sprite, or webfont for zero-JS contexts), and per-framework packages for React, Vue, Svelte, Solid, Astro, Preact, React Native, and Angular. Each framework package follows the same documentation shape: getting started, migration, the three sizing/color/stroke-width basics, then advanced pages (TypeScript, accessibility, global styling, combining icons, aliased names, filled icons, lucide-lab) — not every framework has every advanced page, but the ones that exist follow the same pattern across frameworks.
React Native is the one wrapper with an external peer dependency (react-native-svg) — icons render as SVG through that library rather than through a platform-native primitive.
Chapter Index
See the full per-framework tables below — 147 chapters grouped into: Vanilla JS (core), React, Vue, Svelte, Solid, Astro, Preact, React Native, Angular, Static/Font/JS Modules, VS Code Extension, Package Reference, Contributing & Design Guides, and General & Meta.
Vanilla JS (core)
| # | Title | Chapter |
|---|---|---|
| ch001 | Lucide for Vanilla JavaScript | chapters/ch001-guide-lucide.md |
| ch002 | Getting started | chapters/ch002-guide-lucide-getting-started.md |
| ch003 | Migration from v0 | chapters/ch003-guide-lucide-migration.md |
| ch004 | Color | chapters/ch004-guide-lucide-basics-color.md |
| ch005 | Sizing | chapters/ch005-guide-lucide-basics-sizing.md |
| ch006 | Stroke width | chapters/ch006-guide-lucide-basics-stroke-width.md |
| ch007 | Global Styling | chapters/ch007-guide-lucide-advanced-global-styling.md |
| ch008 | Shadow DOM | chapters/ch008-guide-lucide-advanced-shadow-dom.md |
| ch009 | Content Template element | chapters/ch009-guide-lucide-advanced-content-template-element.md |
| ch010 | Accessibility | chapters/ch010-guide-lucide-advanced-accessibility.md |
| ch011 | With Lucide Lab or custom icons | chapters/ch011-guide-lucide-advanced-with-lucide-lab.md |
| ch012 | Filled Icons | chapters/ch012-guide-lucide-advanced-filled-icons.md |
React
Vue
| # | Title | Chapter |
|---|---|---|
| ch028 | Lucide for Vue | chapters/ch028-guide-vue.md |
| ch029 | Getting started | chapters/ch029-guide-vue-getting-started.md |
| ch030 | Migration from v0 | chapters/ch030-guide-vue-migration.md |
| ch031 | Color | chapters/ch031-guide-vue-basics-color.md |
| ch032 | Sizing | chapters/ch032-guide-vue-basics-sizing.md |
| ch033 | Stroke width | chapters/ch033-guide-vue-basics-stroke-width.md |
| ch034 | TypeScript Support | chapters/ch034-guide-vue-advanced-typescript.md |
| ch035 | Accessibility | chapters/ch035-guide-vue-advanced-accessibility.md |
| ch036 | Global Styling | chapters/ch036-guide-vue-advanced-global-styling.md |
| ch037 | With Lucide Lab or custom icons | chapters/ch037-guide-vue-advanced-with-lucide-lab.md |
| ch038 | Filled Icons | chapters/ch038-guide-vue-advanced-filled-icons.md |
| ch039 | Aliased Names | chapters/ch039-guide-vue-advanced-aliased-names.md |
| ch040 | Combining icons | chapters/ch040-guide-vue-advanced-combining-icons.md |
Svelte
| # | Title | Chapter |
|---|---|---|
| ch041 | Lucide for Svelte | chapters/ch041-guide-svelte.md |
| ch042 | Getting started | chapters/ch042-guide-svelte-getting-started.md |
| ch043 | Migration from v0 | chapters/ch043-guide-svelte-migration.md |
| ch044 | Color | chapters/ch044-guide-svelte-basics-color.md |
| ch045 | Sizing | chapters/ch045-guide-svelte-basics-sizing.md |
| ch046 | Stroke width | chapters/ch046-guide-svelte-basics-stroke-width.md |
| ch047 | TypeScript Support | chapters/ch047-guide-svelte-advanced-typescript.md |
| ch048 | Accessibility | chapters/ch048-guide-svelte-advanced-accessibility.md |
| ch049 | Global Styling | chapters/ch049-guide-svelte-advanced-global-styling.md |
| ch050 | With Lucide Lab or custom icons | chapters/ch050-guide-svelte-advanced-with-lucide-lab.md |
| ch051 | Filled Icons | chapters/ch051-guide-svelte-advanced-filled-icons.md |
| ch052 | Combining icons | chapters/ch052-guide-svelte-advanced-combining-icons.md |
Solid
| # | Title | Chapter |
|---|---|---|
| ch053 | Lucide for Solid | chapters/ch053-guide-solid.md |
| ch054 | Getting started | chapters/ch054-guide-solid-getting-started.md |
| ch055 | Migration from v0 | chapters/ch055-guide-solid-migration.md |
| ch056 | Color | chapters/ch056-guide-solid-basics-color.md |
| ch057 | Sizing | chapters/ch057-guide-solid-basics-sizing.md |
| ch058 | Stroke width | chapters/ch058-guide-solid-basics-stroke-width.md |
| ch059 | TypeScript Support | chapters/ch059-guide-solid-advanced-typescript.md |
| ch060 | Accessibility | chapters/ch060-guide-solid-advanced-accessibility.md |
| ch061 | Global Styling | chapters/ch061-guide-solid-advanced-global-styling.md |
| ch062 | With Lucide Lab or custom icons | chapters/ch062-guide-solid-advanced-with-lucide-lab.md |
| ch063 | Filled Icons | chapters/ch063-guide-solid-advanced-filled-icons.md |
| ch064 | Aliased Names | chapters/ch064-guide-solid-advanced-aliased-names.md |
| ch065 | Combining icons | chapters/ch065-guide-solid-advanced-combining-icons.md |
Astro
| # | Title | Chapter |
|---|---|---|
| ch066 | Lucide for Astro | chapters/ch066-guide-astro.md |
| ch067 | Getting started | chapters/ch067-guide-astro-getting-started.md |
| ch068 | Migration from v0 | chapters/ch068-guide-astro-migration.md |
| ch069 | Color | chapters/ch069-guide-astro-basics-color.md |
| ch070 | Sizing | chapters/ch070-guide-astro-basics-sizing.md |
| ch071 | Stroke width | chapters/ch071-guide-astro-basics-stroke-width.md |
| ch072 | TypeScript Support | chapters/ch072-guide-astro-advanced-typescript.md |
| ch073 | Accessibility | chapters/ch073-guide-astro-advanced-accessibility.md |
| ch074 | Global Styling | chapters/ch074-guide-astro-advanced-global-styling.md |
| ch075 | With Lucide Lab or custom icons | chapters/ch075-guide-astro-advanced-with-lucide-lab.md |
Preact
| # | Title | Chapter |
|---|---|---|
| ch076 | Lucide for Preact | chapters/ch076-guide-preact.md |
| ch077 | Getting started | chapters/ch077-guide-preact-getting-started.md |
| ch078 | Migration from v0 | chapters/ch078-guide-preact-migration.md |
| ch079 | Color | chapters/ch079-guide-preact-basics-color.md |
| ch080 | Sizing | chapters/ch080-guide-preact-basics-sizing.md |
| ch081 | Stroke width | chapters/ch081-guide-preact-basics-stroke-width.md |
| ch082 | TypeScript | chapters/ch082-guide-preact-advanced-typescript.md |
| ch083 | Accessibility | chapters/ch083-guide-preact-advanced-accessibility.md |
| ch084 | Global Styling | chapters/ch084-guide-preact-advanced-global-styling.md |
| ch085 | With Lucide Lab or custom icons | chapters/ch085-guide-preact-advanced-with-lucide-lab.md |
| ch086 | Filled Icons | chapters/ch086-guide-preact-advanced-filled-icons.md |
| ch087 | Aliased Names | chapters/ch087-guide-preact-advanced-aliased-names.md |
| ch088 | Combining icons | chapters/ch088-guide-preact-advanced-combining-icons.md |
React Native
| # | Title | Chapter |
|---|---|---|
| ch089 | Lucide for React Native | chapters/ch089-guide-react-native.md |
| ch090 | Getting started | chapters/ch090-guide-react-native-getting-started.md |
| ch091 | Migration from v0 | chapters/ch091-guide-react-native-migration.md |
| ch092 | Color | chapters/ch092-guide-react-native-basics-color.md |
| ch093 | Sizing | chapters/ch093-guide-react-native-basics-sizing.md |
| ch094 | Stroke width | chapters/ch094-guide-react-native-basics-stroke-width.md |
| ch095 | TypeScript Support | chapters/ch095-guide-react-native-advanced-typescript.md |
| ch096 | Global Styling | chapters/ch096-guide-react-native-advanced-global-styling.md |
| ch097 | With Lucide Lab or custom icons | chapters/ch097-guide-react-native-advanced-with-lucide-lab.md |
| ch098 | Filled Icons | chapters/ch098-guide-react-native-advanced-filled-icons.md |
| ch099 | Aliased Names | chapters/ch099-guide-react-native-advanced-aliased-names.md |
| ch100 | Combining icons | chapters/ch100-guide-react-native-advanced-combining-icons.md |
| ch101 | Optimizations | chapters/ch101-guide-react-native-advanced-optimizations.md |
Angular
| # | Title | Chapter |
|---|---|---|
| ch102 | Lucide for Angular | chapters/ch102-guide-angular.md |
| ch103 | Getting started | chapters/ch103-guide-angular-getting-started.md |
| ch104 | Migrating from lucide-angular to @lucide/angular | chapters/ch104-guide-angular-migration.md |
| ch105 | Color | chapters/ch105-guide-angular-basics-color.md |
| ch106 | Sizing | chapters/ch106-guide-angular-basics-sizing.md |
| ch107 | Stroke width | chapters/ch107-guide-angular-basics-stroke-width.md |
| ch108 | TypeScript | chapters/ch108-guide-angular-advanced-typescript.md |
| ch109 | Accessibility | chapters/ch109-guide-angular-advanced-accessibility.md |
| ch110 | Global Styling | chapters/ch110-guide-angular-advanced-global-styling.md |
| ch111 | With Lucide Lab or custom icons | chapters/ch111-guide-angular-advanced-with-lucide-lab.md |
| ch112 | Filled Icons | chapters/ch112-guide-angular-advanced-filled-icons.md |
| ch113 | Combining icons | chapters/ch113-guide-angular-advanced-combining-icons.md |
| ch114 | Icon provider | chapters/ch114-guide-angular-advanced-icon-provider.md |
Static / Font / JS Modules
| # | Title | Chapter |
|---|---|---|
| ch115 | Lucide Static Assets | chapters/ch115-guide-static.md |
| ch116 | Getting started | chapters/ch116-guide-static-getting-started.md |
| ch117 | Migration from v0 | chapters/ch117-guide-static-migration.md |
| ch118 | Link as Image | chapters/ch118-guide-static-link-as-image.md |
| ch119 | Using the SVG sprite | chapters/ch119-guide-static-svg-sprite.md |
| ch120 | Icon Font | chapters/ch120-guide-static-font.md |
| ch121 | Color the font | chapters/ch121-guide-static-font-color.md |
| ch122 | Size the font | chapters/ch122-guide-static-font-sizing.md |
| ch123 | Use Lucide in Node.js | chapters/ch123-guide-static-js-modules-node.md |
| ch124 | Use Lucide in Web | chapters/ch124-guide-static-js-modules-web.md |
VS Code Extension
| # | Title | Chapter |
|---|---|---|
| ch125 | Visual Studio Code | chapters/ch125-guide-vscode.md |
Package Reference
| # | Title | Chapter |
|---|---|---|
| ch126 | @lucide/icons | chapters/ch126-guide-packages-icons.md |
| ch127 | @lucide/angular | chapters/ch127-guide-packages-angular.md |
| ch128 | Lucide Astro | chapters/ch128-guide-packages-lucide-astro.md |
| ch129 | Lucide Preact | chapters/ch129-guide-packages-lucide-preact.md |
| ch130 | Lucide React Native | chapters/ch130-guide-packages-lucide-react-native.md |
| ch131 | Lucide Solid | chapters/ch131-guide-packages-lucide-solid.md |
| ch132 | Lucide Static | chapters/ch132-guide-packages-lucide-static.md |
| ch133 | Lucide Svelte | chapters/ch133-guide-packages-lucide-svelte.md |
| ch134 | Lucide Vue | chapters/ch134-guide-packages-lucide-vue.md |
Contributing & Design Guides
| # | Title | Chapter |
|---|---|---|
| ch135 | Contribution Guide | chapters/ch135-contribute.md |
| ch136 | Icon Design Guide | chapters/ch136-contribute-icon-design-guide.md |
| ch137 | Illustrator Template Guide | chapters/ch137-contribute-illustrator-guide.md |
| ch138 | Inkscape Setup Guide | chapters/ch138-contribute-inkscape-guide.md |
| ch139 | Figma Template Guide | chapters/ch139-contribute-figma-guide.md |
| ch140 | Affinity Designer Template Guide | chapters/ch140-contribute-affinity-designer-guide.md |
General & Meta
| # | Title | Chapter |
|---|---|---|
| ch141 | Accessibility in depth | chapters/ch141-guide-accessibility.md |
| ch142 | Lucide License | chapters/ch142-license.md |
| ch143 | Community Guide | chapters/ch143-community.md |
| ch144 | Comparison | chapters/ch144-guide-comparison.md |
| ch145 | Installation | chapters/ch145-guide-installation.md |
| ch146 | Lucide Version 1 | chapters/ch146-guide-version-1.md |
| ch147 | What is Lucide? | chapters/ch147-guide.md |
Topic Index
- absoluteStrokeWidth → ch006, ch019, ch033, ch046, ch058, ch071, ch081, ch094, ch107
- Accessibility → ch010, ch021, ch035, ch048, ch060, ch073, ch083, ch109, ch141
- Aliased Names → ch025, ch039, ch064, ch087, ch099
- Angular → ch102–ch114, ch127
- Astro → ch066–ch075, ch128
- Color / currentColor → ch004, ch017, ch031, ch044, ch056, ch069, ch079, ch092, ch105, ch121
- Combining icons → ch026, ch040, ch052, ch065, ch088, ch100, ch113
- createIcons / data-lucide → ch001, ch002
- Dynamic Icon Component → ch027
- Filled Icons → ch012, ch024, ch038, ch051, ch063, ch086, ch098, ch112
- Global Styling → ch007, ch022, ch036, ch049, ch061, ch074, ch084, ch096, ch110
- Icon design/contribution → ch135–ch140
- Migration (from v0 / from Feather / to @lucide/angular) → ch003, ch015, ch016, ch030, ch043, ch055, ch068, ch078, ch091, ch104, ch117
- Preact → ch076–ch088, ch129
- React → ch013–ch027
- React Native → ch089–ch101, ch130
- Sizing → ch005, ch018, ch032, ch045, ch057, ch070, ch080, ch093, ch106, ch122
- Solid → ch053–ch065, ch131
- Static / SVG sprite / icon font → ch115–ch124, ch132
- Stroke width → ch006, ch019, ch033, ch046, ch058, ch071, ch081, ch094, ch107
- Svelte → ch041–ch052, ch133
- Tree-shaking → ch001, ch147
- TypeScript support → ch020, ch034, ch047, ch059, ch072, ch082, ch108
- Vue → ch028–ch040, ch134
- VS Code extension → ch125
Supporting Files
- glossary.md — key terms with definitions
- patterns.md — composition/usage patterns
- cheatsheet.md — package-choice table and decision rules
Scope & Limits
This skill covers the Lucide guide documentation only (as of the fetch date in the source, 2026-08-22), not the full icon catalog (1000+ individual icons and their exact names/shapes) — for a specific icon's availability, check the Lucide website or the installed package directly. For implementation details specific to a given codebase, combine with project-specific tools.