Icons

Place vector icons anywhere using an icon font.

This component is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 300 symbols and glyphs for web-related actions. Icon fonts are great, because they enable you to easily change color, size and more via CSS. They are scalable vector graphics, which means that they look great on high-resolution displays.

Usage

To apply this component, add any .uk-icon-* class to an <i> or <span> element. Et voilà, you have a vector icon, which inherits size and color just like your text does.

Examples

Uses the .uk-icon-cog class
Uses the .uk-icon-user class
Uses the .uk-icon-home class
An icon in a link

A button with an icon

Markup

<!-- This is an icon -->
<i class="uk-icon-cog"></i>

<!-- This is an icon in a link -->
<a href=""><i class="uk-icon-cog"></i> ...</a>

More examples

Button group

This example shows a group of buttons from the Button component with icons inside each button.

Example

Button dropdown

This example shows a button which is split into a standard action to the left and a dropdown toggle on the right, using the Dropdown component.

Example

Blockquotes

This example shows a blockquote from the Base component with a large quote icon. It also uses the .uk-align-left class from the Utility component.

Example

The <blockquote> element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element.

Size modifiers

Add the .uk-icon-small, .uk-icon-medium or .uk-icon-large class to an icon to make the it larger.

This is the default size.
This icon uses the .uk-icon-small class.
This icon uses the .uk-icon-medium class.
This icon uses the .uk-icon-large class.

Spin modifier

Add the .uk-icon-spin class to create animated spinning icons.

Spinner icon for loading content ...
Refresh icon for refreshing content ...

Icon button

Use the modifier .uk-icon-button class to create an icon button, which can be used perfectly for social icons.

Example

Markup

<a href="" class="uk-icon-button uk-icon-github"></a>

Icon mapping

Here is an overview of all available .uk-icon-* classes provided by Font Awesome.

Web Application Icons

adjust
anchor
archive
area-chart
arrows
arrows-h
arrows-v
asterisk
at
automobile (alias)
ban
bank (alias)
bar-chart
bar-chart-o (alias)
barcode
bars
beer
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bolt
bomb
book
bookmark
bookmark-o
briefcase
bug
building
building-o
bullhorn
bullseye
bus
cab (alias)
calculator
calendar
calendar-o
camera
camera-retro
car
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
cc
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
circle
circle-o
circle-o-notch
circle-thin
clock-o
close (alias)
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
comments
comments-o
compass
copyright
credit-card
crop
crosshairs
cube
cubes
cutlery
dashboard (alias)
database
desktop
dot-circle-o
download
edit (alias)
ellipsis-h
ellipsis-v
envelope
envelope-o
envelope-square
eraser
exchange
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eye
eye-slash
eyedropper
fax
female
fighter-jet
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-video-o
file-word-o
file-zip-o (alias)
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
futbol-o
gamepad
gavel
gear (alias)
gears (alias)
gift
glass
globe
graduation-cap
group (alias)
hdd-o
headphones
heart
heart-o
history
home
image (alias)
inbox
info
info-circle
institution (alias)
key
keyboard-o
language
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
life-bouy (alias)
life-buoy (alias)
life-ring
life-saver (alias)
lightbulb-o
line-chart
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all (alias)
male
map-marker
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
mortar-board (alias)
music
navicon (alias)
newspaper-o
paint-brush
paper-plane
paper-plane-o
paw
pencil
pencil-square
pencil-square-o
phone
phone-square
photo (alias)
picture-o
pie-chart
plane
plug
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left
quote-right
random
recycle
refresh
remove (alias)
reorder (alias)
reply
reply-all
retweet
road
rocket
rss
rss-square
search
search-minus
search-plus
send (alias)
send-o (alias)
share
share-alt
share-alt-square
share-square
share-square-o
shield
shopping-cart
sign-in
sign-out
signal
sitemap
sliders
smile-o
soccer-ball-o (alias)
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (alias)
sort-numeric-asc
sort-numeric-desc
sort-up (alias)
space-shuttle
spinner
spoon
square
square-o
star
star-half
star-half-empty (alias)
star-half-full (alias)
star-half-o
star-o
suitcase
sun-o
support (alias)
tablet
tachometer
tag
tags
tasks
taxi
terminal
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-down (alias)
toggle-left (alias)
toggle-off
toggle-on
toggle-right (alias)
toggle-up (alias)
trash
trash-o
tree
trophy
truck
tty
umbrella
university
unlock
unlock-alt
unsorted (alias)
upload
user
users
video-camera
volume-down
volume-off
volume-up
warning (alias)
wheelchair
wifi
wrench

File Type Icons

file
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-o
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-text
file-text-o
file-video-o
file-word-o
file-zip-o (alias)

Spinner Icons

circle-o-notch
cog
gear (alias)
refresh
spinner

Form Control Icons

check-square
check-square-o
circle
circle-o
dot-circle-o
minus-square
minus-square-o
plus-square
plus-square-o
square
square-o

Payment Icons

cc-amex
cc-discover
cc-mastercard
cc-paypal
cc-stripe
cc-visa
credit-card
google-wallet
paypal

Chart Icons

area-chart
bar-chart
bar-chart-o (alias)
line-chart
pie-chart

Currency Icons

bitcoin (alias)
btc
cny (alias)
dollar (alias)
eur
euro (alias)
gbp
ils
inr
jpy
krw
money
rmb (alias)
rouble (alias)
rub
ruble (alias)
rupee (alias)
shekel (alias)
sheqel (alias)
try
turkish-lira (alias)
usd
won (alias)
yen (alias)

Text Editor Icons

align-center
align-justify
align-left
align-right
bold
chain (alias)
chain-broken
clipboard
columns
copy (alias)
cut (alias)
dedent (alias)
eraser
file
file-o
file-text
file-text-o
files-o
floppy-o
font
header
indent
italic
link
list
list-alt
list-ol
list-ul
outdent
paperclip
paragraph
paste (alias)
repeat
rotate-left (alias)
rotate-right (alias)
save (alias)
scissors
strikethrough
subscript
superscript
table
text-height
text-width
th
th-large
th-list
underline
undo
unlink (alias)

Directional Icons

angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
arrow-circle-down
arrow-circle-left
arrow-circle-o-down
arrow-circle-o-left
arrow-circle-o-right
arrow-circle-o-up
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows
arrows-alt
arrows-h
arrows-v
caret-down
caret-left
caret-right
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
caret-up
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
hand-o-down
hand-o-left
hand-o-right
hand-o-up
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
toggle-down (alias)
toggle-left (alias)
toggle-right (alias)
toggle-up (alias)

Video Player Icons

arrows-alt
backward
compress
eject
expand
fast-backward
fast-forward
forward
pause
play
play-circle
play-circle-o
step-backward
step-forward
stop
youtube-play

Brand Icons

adn
android
angellist
apple
behance
behance-square
bitbucket
bitbucket-square
bitcoin (alias)
btc
cc-amex
cc-discover
cc-mastercard
cc-paypal
cc-stripe
cc-visa
codepen
css3
delicious
deviantart
digg
dribbble
dropbox
drupal
empire
facebook
facebook-square
flickr
foursquare
ge (alias)
git
git-square
github
github-alt
github-square
gittip
google
google-plus
google-plus-square
google-wallet
hacker-news
html5
instagram
ioxhost
joomla
jsfiddle
lastfm
lastfm-square
linkedin
linkedin-square
linux
maxcdn
meanpath
openid
pagelines
paypal
pied-piper
pied-piper-alt
pinterest
pinterest-square
qq
ra (alias)
rebel
reddit
reddit-square
renren
share-alt
share-alt-square
skype
slack
slideshare
soundcloud
spotify
stack-exchange
stack-overflow
stea
steam-square
stumbleupon
stumbleupon-circle
tencent-weibo
trello
tumblr
tumblr-square
twitch
twitter
twitter-square
vimeo-square
vine
vk
wechat (alias)
weibo
weixin
windows
wordpress
xing
xing-square
yahoo
yelp
youtube
youtube-play
youtube-square

Medical Icons

ambulance
h-square
hospital-o
medkit
plus-square
stethoscope
user-md
wheelchair