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

Note If you are not using Tailwind CSS, you can skip this step. On your tailwind.config.js file, add the Icon component within the ui() plugin.

import ui from "franken-ui";
 
ui({
    components: {
        icon: {
            hooks: {}
        }
    }
}),

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

home
sign-in
sign-out
user
users
lock
unlock
settings
cog
nut
comment
commenting
comments
hashtag
tag
cart
bag
credit-card
mail
receiver
print
search
location
bookmark
code

paint-bucket
camera
video-camera
bell
microphone
bolt
star
heart
happy
lifesaver
rss
social
git-branch
git-fork
world
calendar
clock
history
future
crosshairs
pencil
trash
move
link
link-external

eye
eye-slash
question
info
warning
image
thumbnails
table
list
menu
grid
more
more-vertical
plus
plus-circle
minus
minus-circle
close
check
ban
refresh
play
play-circle

Devices

tv
desktop
laptop

tablet
phone

tablet-landscape
phone-landscape

Storage

file
file-text
file-pdf
copy
file-edit

folder
album
push
pull
server

database
cloud-upload
cloud-download
download
upload

Direction

reply
forward
expand
shrink
arrow-up-right
arrow-up
arrow-down

arrow-left
arrow-right
chevron-up
chevron-down
chevron-left
chevron-right

chevron-double-left
chevron-double-right
triangle-up
triangle-down
triangle-left
triangle-right

Editor

bold
italic

strikethrough

quote-right

Brands

500px
android
android-robot
apple
behance
bluesky
discord
dribbble
etsy
facebook
flickr
foursquare
github
github-alt

gitter
google
instagram
joomla
linkedin
mastodon
microsoft
pinterest
reddit
signal
soundcloud
telegram
threads

tiktok
tripadvisor
tumblr
twitch
uikit
vimeo
whatsapp
wordpress
x
xing
yelp
yootheme
youtube

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="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.

<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

Option	Value	Default	Description
`icon`	String		The icon to display.
`ratio`	Number	`1`	The 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>