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.

To reset the default link styling to a more muted color when using an icon inside an anchor, add the .uk-icon-link class.

<a href="" class="uk-icon-link">
  <uk-icon icon="trash"></uk-icon>
</a>
Copy to clipboard 
  • <div class="uk-flex">
  <a class="uk-icon-link uk-margin-small-right size-4">
    <uk-icon icon="copy"></uk-icon>
  </a>
  <a class="uk-icon-link uk-margin-small-right size-4">
    <uk-icon icon="file"></uk-icon>
  </a>
  <a class="uk-icon-link size-4">
    <uk-icon icon="trash"></uk-icon>
  </a>
</div>

Button modifier

Use the modifier .uk-icon-button class on an <a> element to create an icon button, which can be used for social icons.

<a href="" class="uk-icon-button">
  <uk-icon icon="instagram"></uk-icon>
</a>
Copy to clipboard 
  • <div class="uk-flex">
  <a class="uk-icon-button uk-margin-small-right">
    <uk-icon icon="instagram"></uk-icon>
  </a>
  <a class="uk-icon-button uk-margin-small-right">
    <uk-icon icon="facebook"></uk-icon>
  </a>
  <a class="uk-icon-button">
    <uk-icon icon="youtube"></uk-icon>
  </a>
</div>

Small modifier

Copy to clipboard 
  • <div>
  <button class="uk-icon-button uk-icon-button-small">
    <uk-icon icon="trash"></uk-icon>
  </button>
</div>

Extra small modifier

Copy to clipboard 
  • <div>
  <button class="uk-icon-button uk-icon-button-xsmall uk-margin-small-right">
    <uk-icon icon="chevron-left"></uk-icon>
  </button>
  <button class="uk-icon-button uk-icon-button-xsmall">
    <uk-icon icon="chevron-right"></uk-icon>
  </button>
</div>

Outline modifier

Copy to clipboard 
  • <div>
  <button class="uk-icon-button uk-icon-button-outline">
    <uk-icon icon="instagram"></uk-icon>
  </button>
</div>

Disabled

Copy to clipboard 
  • <div class="uk-flex">
  <button class="uk-icon-button uk-margin-small-right">
    <uk-icon icon="instagram"></uk-icon>
  </button>
  <button disabled class="uk-icon-button uk-margin-small-right">
    <uk-icon icon="facebook"></uk-icon>
  </button>
  <button class="uk-icon-button">
    <uk-icon icon="youtube"></uk-icon>
  </button>
</div>

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, add the uk-cloak attribute to hide the entire element until the JS has fully loaded on the page. For an even more polished experience, 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-cloak></uk-icon>
</div>

Attributes

NameTypeDefaultDescription
custom-classStringAllows you to add custom CSS classes, which will be attached to the <svg> tag.
iconStringSpecifies the icon you want to display.
stroke-widthString2Customizes the stroke width of the icon.
heightString16Customizes the height of the icon.
widthString16Customizes the width of the icon.
Customize