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  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 which 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
pencil
trash
move

link
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
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
behance
discord
dribbble
etsy
facebook
flickr
foursquare
github
github-alt
gitter

google
instagram
joomla
linkedin
pagekit
pinterest
reddit
soundcloud
tiktok
tripadvisor

tumblr
twitch
twitter
uikit
vimeo
whatsapp
wordpress
xing
yelp
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 you 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>

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

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="twitter"></a>

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

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'; })

Prev： Height

Next： Iconnav

# 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](installation.md). ```html <script src="uikit/dist/js/uikit-icons.min.js"></script> ``` To apply this component, add the `uk-icon` attribute to a `` 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 which inherits color just like your text does. ```html <a href="" uk-icon="icon: heart"></a> ``` If `icon` is the only option in the attribute value, you can also use `uk-icon="NAME"` ```html ``` ```example <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. <h4 class="uk-heading-line">App</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> home</li> <li> sign-in</li> <li> sign-out</li> <li> user</li> <li> users</li> <li> lock</li> <li> unlock</li> <li> settings</li> <li> cog</li> <li> nut</li> <li> comment</li> <li> commenting</li> <li> comments</li> <li> hashtag</li> <li> tag</li> <li> cart</li> <li> bag</li> <li> credit-card</li> <li> mail</li> <li> receiver</li> <li> print</li> <li> search</li> <li> location</li> <li> bookmark</li> </ul> </div> <div> <ul class="uk-list"> <li> code</li> <li> paint-bucket</li> <li> camera</li> <li> video-camera</li> <li> bell</li> <li> microphone</li> <li> bolt</li> <li> star</li> <li> heart</li> <li> happy</li> <li> lifesaver</li> <li> rss</li> <li> social</li> <li> git-branch</li> <li> git-fork</li> <li> world</li> <li> calendar</li> <li> clock</li> <li> history</li> <li> future</li> <li> pencil</li> <li> trash</li> <li> move</li> </ul> </div> <div> <ul class="uk-list"> <li> link</li> <li> question</li> <li> info</li> <li> warning</li> <li> image</li> <li> thumbnails</li> <li> table</li> <li> list</li> <li> menu</li> <li> grid</li> <li> more</li> <li> more-vertical</li> <li> plus</li> <li> plus-circle</li> <li> minus</li> <li> minus-circle</li> <li> close</li> <li> check</li> <li> ban</li> <li> refresh</li> <li> play</li> <li> play-circle</li> </ul> </div> </div> <h4 class="uk-heading-line">Devices</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> tv</li> <li> desktop</li> <li> laptop</li> </ul> </div> <div> <ul class="uk-list"> <li> tablet</li> <li> phone</li> </ul> </div> <div> <ul class="uk-list"> <li> tablet-landscape</li> <li> phone-landscape</li> </ul> </div> </div> <h4 class="uk-heading-line">Storage</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> file</li> <li> file-text</li> <li> file-pdf</li> <li> copy</li> <li> file-edit</li> </ul> </div> <div> <ul class="uk-list"> <li> folder</li> <li> album</li> <li> push</li> <li> pull</li> <li> server</li> </ul> </div> <div> <ul class="uk-list"> <li> database</li> <li> cloud-upload</li> <li> cloud-download</li> <li> download</li> <li> upload</li> </ul> </div> </div> <h4 class="uk-heading-line">Direction</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> reply</li> <li> forward</li> <li> expand</li> <li> shrink</li> <li> arrow-up</li> <li> arrow-down</li> </ul> </div> <div> <ul class="uk-list"> <li> arrow-left</li> <li> arrow-right</li> <li> chevron-up</li> <li> chevron-down</li> <li> chevron-left</li> <li> chevron-right</li> </ul> </div> <div> <ul class="uk-list"> <li> chevron-double-left</li> <li> chevron-double-right</li> <li> triangle-up</li> <li> triangle-down</li> <li> triangle-left</li> <li> triangle-right</li> </ul> </div> </div> <h4 class="uk-heading-line">Editor</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> bold</li> <li> italic</li> </ul> </div> <div> <ul class="uk-list"> <li> strikethrough</li> </ul> </div> <div> <ul class="uk-list"> <li> quote-right</li> </ul> </div> </div> <h4 class="uk-heading-line">Brands</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> 500px</li> <li> behance</li> <li> discord</li> <li> dribbble</li> <li> etsy</li> <li> facebook</li> <li> flickr</li> <li> foursquare</li> <li> github</li> <li> github-alt</li> <li> gitter</li> </ul> </div> <div> <ul class="uk-list"> <li> google</li> <li> instagram</li> <li> joomla</li> <li> linkedin</li> <li> pagekit</li> <li> pinterest</li> <li> reddit</li> <li> soundcloud</li> <li> tiktok</li> <li> tripadvisor</li> </ul> </div> <div> <ul class="uk-list"> <li> tumblr</li> <li> twitch</li> <li> twitter</li> <li> uikit</li> <li> vimeo</li> <li> whatsapp</li> <li> wordpress</li> <li> xing</li> <li> yelp</li> <li> youtube</li> </ul> </div> </div> *** ## 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 you icon to be. ```html ``` ```example ``` *** ## 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. ```html <a href="" class="uk-icon-link" uk-icon="heart"></a> ``` ```example <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> ``` *** ## 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. ```html <a href="" class="uk-icon-button" uk-icon="twitter"></a> ``` ```example <a href="" class="uk-icon-button uk-margin-small-right" uk-icon="twitter"></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> ``` *** ## 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. ```example ``` *** ## Component options Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. [Learn more](javascript.md#component-configuration) | 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. ```html ``` *** ## JavaScript Learn more about [JavaScript components](javascript.md#programmatic-use). ### Initialization ```js UIkit.icon(element, options); ``` ### Properties #### svg A JavaScript Promise that will resolve with the added SVG Node. ```js UIkit.icon(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; }) ```

Documentation