https://framer.com/m/IconProLucide-D48s.js
IconProLucide
IconProLucide is the Lucide counterpart to IconsPro. Lucide glyphs are stroke-based, so strokeWidth replaces the weight scale — pick one library per surface and stay with it.
Examples
Live specimens for every control the component exposes.
Default
A glyph is addressed by its Lucide name in PascalCase, at 24px with a 2px stroke.
Glyph
iconName accepts any name from the Lucide set.
Star
Search
Trash2
ArrowRight
Check
Settings
Size
size is a pixel value. Lucide glyphs are drawn on a 24px grid, so multiples of 4 stay crisp.
16px
20px
24px
32px
Stroke width
strokeWidth is the Lucide equivalent of a weight scale — it thickens the path rather than swapping the glyph.
1px
1.5px
2px
3px
Colour
color takes a theme token, the same as every other component.
Core/primary
Text/text-color
Text/text-secondary
Semantic/warning
Click to cycle
clickChangeIcons advances through the name list on click, with a slide or rotate transition.
slide
rotate
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for IconProLucide
The surface is standardised on Lucide rather than Phosphor.
A stroke-based glyph needs its weight tuned continuously.
An icon should advance through states on click.
Glyph colour and size must follow the theme.
Reach for something else
The rest of the surface uses Phosphor — use IconsPro.
The glyph is bespoke artwork — use SVGPro.
The icon is the whole control — use Button with iconButton.
Io — UI Basics
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.