Icon

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.

Usage

Make sure to include the icon library script, for more details see the installation instructions.

Library

To view the list of all currently available icons. Please see the Lucide website for the complete list of icons.

Preventing layout shift

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.

<div class="size-4">
  <uk-icon icon="smile"></uk-icon>
</div>

Attributes