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.

UIkit icon is available as stand-alone stack and also implemented in buttons, text and various navigation stacks.
Note Enable the icons at the UIkit theme page styles.

Library

Here is an overview of all currently available icons. Over time new icons will be added to the list.
App
   home
   code
   link
   sign-in
   paint-bucket
   question
   sign-out
   camera
info
   user
   video-camera
   warning
users
   bell
   image
   lock
   microphone
   thumbnails
   unlock
   bolt
   table
   settings
   star
   list
   cog
   heart
   menu
   nut
   happy
   grid
  comment
   life-saver
   more
  commenting
rss
   more-vertical
  comments
social
plus
  hashtag
git-branch
plus-circle
 tag
git-fork
minus
 cart
world
minus-circle
 credit-cart
calendar
close
mail
clock
check
receiver
history
ban
print
future
refresh
search
pencil
play
location
trash
play-circle
bookmark
move
Devices
tv
tablet
tablet-landscape
desktop
phone
phone-landscape
desktop
Storage
file
folder
database
file-text
album
cloud-upload
file-pdf
Direction
reply
arrow-left
chevron-double-left
forward
arrow-right
chevron-double-right
expand
chevron-up
triangle-up
shrink
chevron-down
triangle-down
arrow-up
chevron-left
triangle-left
arrow-down
chevron-right
triangle-right
Editor
bold
strikethrough
quote-right
italic
Brands
500px
google-plus
tumblr
behance
instagram
twitter
dribbble
joomla
uikit
facebook
linkedin
vimeo
flickr
pagekit
whatsapp
foursquare
pinterest
wordpress
github
reddit
xing
github-alt
soundcloud
yelp
gitter
tripadvisor
youtube
google

Ratio



Button modifier


Background image

You can also make any background image scale to the size of an icon.

Manual programming

To apply the icon component manually 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.
<span uk-icon="icon: check"></span>

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