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.
NoteEnable 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
eye
eye-slash
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
 bag
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
bluesky
google
tumblr
behance
instagram
twitch
discord
joomla
dribbble
linkedin
uikit
etsy
pagekit
vimeo
facebook
pinterest
whatsapp
flickr
reddit
wordpress
foursquare
soundcloud
x
xing
github
tiktok
yelp
github-alt
mastodon
telegram
threads
tripadvisor
youtube
gitter
signal
yootheme

Ratio

Link modifier

Button modifier

Adjust colours and sizes.

Background image

We are not restricted to the icons list! Use the background-image option and make any image to perform just like icons.

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.

For the icon background simply add the image URL or RapidWeaver Macro to the background-image url as shown below.
<span uk-icon="icon: check; ratio: 1.0"></span>

<a href="#" uk-icon="icon: heart; ratio: 1.0"></a>

<a href="#" class="uk-icon uk-icon-image" style="background-image: url(IMAGE_URL);"></a>
Add spacing between text and icons (Use at HTML Code > CSS):
.uikit-text > span {margin-left: 10px}