Lucide adds local SVG icons to a page in two ways. Use Icon mode for one configurable icon, or use Code Loader mode when you want to place inline icon codes throughout the same page.
Before you begin
Install Lucide and add the stack to a test page. If an update is available, install it through the built-in updater in Stacks App. The Lucide demo shows single icons, inline icons, links, list bullets, transforms, and the searchable icon catalog.
Use Lucide as a single icon
Add Lucide where the icon should appear.
Set Use As to Icon.
Enter the icon name.
Adjust size, color, stroke width, linecap, linejoin, and alignment as needed.
Preview the page and confirm that the icon fits the surrounding content.
Icon mode is the simplest choice when you need one independently configured icon and do not need inline codes elsewhere on the page.
Use Lucide as a Code Loader
Add one Lucide stack to the page.
Set Use As to Code Loader.
Preview the page in Stacks App.
Place a code such as
((lucide heart))in text, headings, buttons, links, cards, or lists.
The loader makes Lucide icons available across that page. SVG assets are served locally, so no external icon CDN is required.
Use the built-in tools
Enable Show Icon Catalog to search the available icon names. Enable Show Code Helper when you want Lucide to assemble a configured code instead of writing every option manually.
Choose the right mode
Use Icon mode for a single visual element with sidebar settings. Use Code Loader mode for repeated inline icons or when icons need to sit inside existing content. You can keep the first test simple and move to inline codes after the loader works.
Next steps
Continue with Using inline Lucide icons and the Code Helper and Styling, linking, and aligning Lucide icons. For installation help, see Installing and updating a Stack in Stacks App.