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.

<script src="uikit/dist/js/uikit-icons.min.js"></script>

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>

<span class="uk-margin-small-right" uk-icon="check"></span>

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

Library

Here is an overview of all currently available icons. Over time, we will keep adding new icons to the list.

App

Devices

Storage

Direction

Editor

Brands

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>

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

Link modifier

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>

<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>

<div>
    <a href="" class="uk-icon-button uk-margin-small-right" uk-icon="instagram"></a>
    <a href="" class="uk-icon-button  uk-margin-small-right" uk-icon="facebook"></a>
    <a href="" class="uk-icon-button" uk-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.

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

Component options

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

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>