Place scalable vector icons anywhere in your content.
Under the hood, Franken UI use Lucide, a collection of open-source icons known for their beautiful and consistent design. With built-in options for size, stroke width, and other attributes, this component simplifies the process of incorporating iconography into your web applications.
Make sure to include the icon library script, for more details see the installation instructions.
To view the list of all currently available icons. Please see the Lucide website for the complete list of icons.
When loading Web Components, there may be a brief delay before the content is fully rendered. This can result in a flash of unstyled content or unprocessed templates. To mitigate this issue, consider setting a predefined height on the parent element to prevent layout shift and ensure a smooth user experience.
| Name | Type | Default | Description |
|---|---|---|---|
force-prevent-rerender | Boolean | false | Forcefully prevents component rerendering. |
cls-custom | String | Allows you to add custom CSS classes, which will be attached to the <svg> tag. | |
icon | String | Specifies the icon you want to display. | |
stroke-width | String | 2 | Customizes the stroke width of the icon. |
height | String | 16 | Customizes the height of the icon. |
width | String | 16 | Customizes the width of the icon. |