Code Loader mode lets one Lucide stack replace short codes with local SVG icons throughout the same page. Use it when icons need to appear inside existing text, headings, buttons, links, cards, lists, or labels.

Activate Code Loader mode

  1. Add Lucide to the page.

  2. Set Use As to Code Loader.

  3. Preview the page in Stacks App so the loader can process the icon codes.

Start with the shortest code

The basic syntax contains the Lucide keyword and an icon name inside double parentheses:

((lucide heart))

Keep the spaces and parentheses intact. Use a name that appears in the Lucide icon catalog.

Add settings to an inline icon

The Lucide demo includes this configured example:

((lucide star size="32px" color="#ca8a04" stroke="2.5" rotate="15"))

Inline codes can carry settings for size, color, stroke width, transforms, hover behavior, links, alignment, and list bullets. Use the Code Helper when you are unsure of an option name or value.

Find an icon in the catalog

Enable Show Icon Catalog, search for the visual you need, and select an icon name from the results. The catalog avoids guessing and makes it easier to use the exact supported name. Common aliases such as home and house use the same SVG file.

Generate Ready Code

Enable Show Code Helper, select the icon and settings, then copy the generated Ready Code. Selecting an icon in the catalog updates the helper automatically. Lucide can provide ready-to-use icon code together with the active settings, including HTML and Macro output.

Keep the page efficient

Lucide uses local SVG assets and loads only the icon files used on the page. Inactive settings and unchanged default values are omitted from generated code. Keep one Code Loader on the page and reuse short icon codes where needed.

Related guides

See Getting started with Lucide, Styling, linking, and aligning Lucide icons, and Troubleshooting Lucide icons and accessibility.