Icon

Place scalable vector icons anywhere in your content.

UIkit comes with its own SVG icon system and a comprehensive library, which comprises a growing number of elegant outline icons. This component injects SVGs into the site, so that they adopt color and can be styled with CSS.

Usage

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

To apply this component, add the uk-icon attribute to a <span> or <a> element. To display the actual icon, you need to append the icon: NAME parameter to the attribute. Et voilà, you have a vector icon that inherits color just like your text does.

<span uk-icon="icon: check"></span>

<a href="" uk-icon="icon: heart"></a>

If icon is the only option in the attribute value, you can also use uk-icon="NAME"

<span uk-icon="heart"></span>
Copy to clipboard
  • <span class="uk-margin-small-right" uk-icon="check"></span>
    
    <a href="" uk-icon="heart"></a>

Library

To view the list of all currently available icons. Please go to this documentation.

Ratio

Add the ratio: 2 parameter to the uk-icon attribute to double its size – or any other number, depending on how big you want your icon to be.

<span uk-icon="icon: check; ratio: 2"></span>
Copy to clipboard
  • <span class="uk-margin-small-right" uk-icon="icon: check; ratio: 2"></span>
    <span uk-icon="icon: check; ratio: 3.5"></span>

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="heart"></a>
Copy to clipboard
  • <div>
      <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="copy"></a>
      <a
        href="#"
        class="uk-icon-link uk-margin-small-right"
        uk-icon="file-edit"
      ></a>
      <a href="#" class="uk-icon-link" uk-icon="trash"></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="instagram"></a>
Copy to clipboard
  • <div>
      <a
        href=""
        class="uk-icon-button uk-margin-small-right"
        uk-icon="ratio: 0.8; icon: instagram"
      ></a>
      <a
        href=""
        class="uk-icon-button uk-margin-small-right"
        uk-icon="ratio: 0.8; icon: facebook"
      ></a>
      <a href="" class="uk-icon-button" uk-icon="ratio: 0.8; icon: youtube"></a>
    </div>

Image modifier

You can also make any background image scale to the size of an icon. Just add the .uk-icon-image class and a background image path.

Copy to clipboard
  • <span
      class="uk-icon uk-icon-image"
      style="background-image: url(/images/dark.jpg)"
    ></span>

Small modifier

Copy to clipboard
  • <button
      class="uk-icon-button uk-icon-button-small"
      uk-icon="ratio: 0.8; icon: thumbnails"
    ></button>

Extra small modifier

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

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
iconStringThe icon to display.
ratioNumber1The icon size ratio.

icon is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

<span uk-icon="heart"></span>

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.icon(element, options);

Properties

svg

A JavaScript Promise that will resolve with the added SVG Node.

UIkit.icon(element).svg.then(function (svg) {
  svg.querySelector("path").style.stroke = "red";
});

Accessibility

Set the appropriate WAI-ARIA roles, states and properties to the Icon component.

  • If an <a> element is used, set the aria-label property to the <a> element to describe its meaning.
<a href="" uk-icon="icon: heart" aria-label="…"></a>

Theme development

On your tailwind.config.js file, add the Icon component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        icon: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-icon.uk-icon
hook-link.uk-icon-link
hook-link-hover.uk-icon-link:hover
hook-link-active.uk-icon-link:active, .uk-active > .uk-icon-link
hook-button.uk-icon-button
hook-button-hover.uk-icon-button:hover
hook-button-active.uk-icon-button:active, .uk-active > .uk-icon-button
hook-misc*