Place scalable vector icons anywhere in your content.
Under the hood, FrankenstyleKit uses Lucide, a collection of open-source icons known for their beautiful and consistent design. With built-in options for size, stroke width, color, and accessibility 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.
Once included, you can use the <uk-icon> tag and place any icon you like, for example:
Using the built-in icon is completely optional. If you prefer to use a different icon library, place the code below right before loading any components. This suppresses errors and prevents missing object issues.
To view the list of all currently available icons, please visit the Lucide website for the complete catalog of 1000+ icons.
The icon component provides robust accessibility support with three modes:
Use the label attribute for icons that convey meaning:
When a label is provided, the icon receives role="img" and aria-label automatically.
Use the decorative attribute for purely visual icons:
Decorative icons are hidden from screen readers with aria-hidden="true".
Icons without labels or the decorative attribute are accessible but don’t have specific semantic meaning.
The Icon component supports internationalization for icon labels through multiple methods with the following priority order (highest to lowest):
i18n attribute or script tag)<script id="uk-i18n">)Place this in your document <head> or before any icon components:
| Key | Default | Description |
|---|---|---|
label | Accessible label for the icon (used with role=“img”) |
The Icon component supports custom CSS classes through the cls attribute.
| Target | Description |
|---|---|
svg | The SVG element itself |
The Icon component supports custom inline styles through the stl attribute.
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 |
|---|---|---|---|
icon | String | Name of the Lucide icon to display (kebab-case format, e.g., “arrow-right”) | |
label | String | Accessible label for semantic icons (automatically adds role=“img”) | |
decorative | Boolean | false | Marks icon as decorative, hiding it from screen readers |
role | String | ARIA role for the icon (defaults to “img” when label is provided) | |
size | String | Uniform size for both width and height (overrides width/height attributes) | |
width | String | 16 | Icon width in pixels |
height | String | 16 | Icon height in pixels |
stroke-width | String | 2 | SVG stroke width |
color | String | Icon color (any valid CSS color value) | |
fill | String | none | Fill color for the icon (use with stroke-width=“0” for solid icons) |
cls | String | Custom CSS classes for the SVG element | |
stl | String | Custom inline styles for the SVG element | |
i18n | String | Internationalization strings as JSON object or via configuration script | |
force-prevent-rerender | Boolean | false | Prevents component rerendering (useful for HTMX or SPA scenarios) |