Icons

Place vector icons anywhere using an icon font.
This stack is using the Font Awesome icon font, by Dave Gandy. Altogether Font Awesome provides more than 300 icons as scalable vector graphics, meaning that they look great in all displays resolutions.

Usage

Use a Text or HTML stack with the uk-icon-* class as shown in the example below. The icons behave just like text, you can change the colors and sizes in the Customizer stack.


<i class="uk-icon-cog"></i>
<i class="uk-icon-user"></i>
<i class="uk-icon-home"></i>

Icons with links

Add links as the example below, replacing the # with your link.
<a href="#" class="uk-icon-github"></a>

Size modifiers

Add the classes uk-icon-small, uk-icon-medium and uk-icon-large to make the icon bigger.
<a href="#" class="uk-icon-github"></a>
<a href="#" class="uk-icon-small uk-icon-github"></a>
<a href="#" class="uk-icon-medium uk-icon-github"></a>
<a href="#" class="uk-icon-large uk-icon-github"></a>

Icon button

Use the modifier uk-icon-button class to create an icon button, which works perfectly for social icons.
<a href="#" class="uk-icon-button uk-icon-github"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-dribbble"></a>
<a href="#" class="uk-icon-button uk-icon-pinterest"></a>

Spin modifier

Use the modifier uk-icon-spin class to create animated spin icons.
    Spinner icon for loading content
    Refresh icon for refreshing content
<i class="uk-icon-spin uk-icon-spinner"></i>
<i class="uk-icon-spin uk-icon-refresh"></i>

Justify icon

To add a fixed width to the icon and center it, add the uk-icon-justify class. This is useful when using different icons in a list.
  • Justified icon
  • Justified icon
  • Justified icon
  • Justified icon
<a href="#" class="uk-icon-justify uk-icon-github"></a>
<a href="#" class="uk-icon-justify uk-icon-bolt"></a>
<a href="#" class="uk-icon-justify uk-icon-folder"></a>
<a href="#" class="uk-icon-justify uk-icon-user"></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)
  • balance-scale
  • ban
  • bank (alias)
  • bar-chart
  • bar-chart-o (alias)
  • barcode
  • bars
  • battery-empty (alias)
  • battery-0
  • battery-quarter (alias)
  • battery-1
  • battery-half (alias)
  • battery-2
  • battery-three-quarters (alias)
  • battery-3
  • battery-full (alias)
  • battery-4
  • bed
  • beer
  • bell
  • bell-o
  • bell-slash
  • bell-slash-o
  • bicycle
  • binoculars
  • birthday-cake
  • bluetooth
  • bluetooth-b
  • bolt
  • bomb
  • book
  • bookmark
  • bookmark-o
  • briefcase
  • bug
  • building
  • building-o
  • bullhorn
  • bullseye
  • bus
  • cab (alias)
  • calculator
  • calendar
  • calendar-check-o
  • calendar-minus-o
  • calendar-o
  • calendar-plus-o
  • calendar-times-o
  • camera
  • camera-retro
  • car
  • caret-square-o-down
  • caret-square-o-left
  • caret-square-o-right
  • caret-square-o-up
  • cart-arrow-down
  • cart-plus
  • cc
  • certificate
  • check
  • check-circle
  • check-circle-o
  • check-square
  • check-square-o
  • child
  • circle
  • circle-o
  • circle-o-notch
  • circle-thin
  • clock-o
  • clone
  • cloud
  • cloud-download
  • cloud-upload
  • code
  • code-fork
  • coffee
  • cog
  • cogs
  • comment
  • comment-o
  • commenting
  • commenting-o
  • comments
  • comments-o
  • compass
  • copyright
  • creative-commons
  • credit-card
  • credit-card-alt
  • crop
  • crosshairs
  • cube
  • cubes
  • cutlery
  • dashboard (alias)
  • database
  • desktop
  • diamond
  • 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)
  • genderless (alias)
  • gift
  • glass
  • globe
  • graduation-cap
  • group (alias)
  • hand-lizard-o
  • hand-stop-o (alias)
  • hand-paper-o
  • hand-peace-o
  • hand-pointer-o
  • hand-grab-o (alias)
  • hand-rock-o
  • hand-scissors-o
  • hand-spock-o
  • hdd-o
  • hashtag
  • headphones
  • heart
  • heart-o
  • heartbeat
  • history
  • home
  • hotel (alias)
  • hourglass
  • hourglass-o
  • hourglass-1 (alias)
  • hourglass-start
  • hourglass-2 (alias)
  • hourglass-half
  • hourglass-3 (alias)
  • hourglass-end
  • i-cursor
  • image (alias)
  • inbox
  • industry
  • 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
  • map-marker
  • map-o
  • map-pin
  • map-signs
  • meh-o
  • microphone
  • microphone-slash
  • minus
  • minus-circle
  • minus-square
  • minus-square-o
  • mobile
  • mobile-phone (alias)
  • money
  • moon-o
  • mortar-board (alias)
  • motorcycle
  • mouse-pointer
  • music
  • navicon (alias)
  • newspaper-o
  • object-group
  • object-ungroup
  • paint-brush
  • paper-plane
  • paper-plane-o
  • paw
  • pencil
  • pencil-square
  • pencil-square-o
  • percent
  • 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
  • registered
  • remove (alias)
  • reorder (alias)
  • reply
  • reply-all
  • retweet
  • road
  • rocket
  • rss
  • rss-square
  • search
  • search-minus
  • search-plus
  • send (alias)
  • send-o (alias)
  • server
  • share
  • share-alt
  • share-alt-square
  • share-square
  • share-square-o
  • shield
  • ship
  • shopping-bag
  • shopping-basket
  • 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
  • sticky-note
  • sticky-note-o
  • street-view
  • suitcase
  • sun-o
  • support (alias)
  • tablet
  • tachometer
  • tag
  • tags
  • tasks
  • taxi
  • television
  • 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)
  • trademark
  • trash
  • trash-o
  • tree
  • trophy
  • truck
  • tty
  • tv (alias)
  • umbrella
  • university
  • unlock
  • unlock-alt
  • unsorted (alias)
  • upload
  • usb
  • user
  • user-plus
  • user-secret
  • user-times
  • users
  • video-camera
  • volume-down
  • volume-off
  • volume-up
  • warning (alias)
  • wheelchair
  • wifi
  • wrench

Hand Icons

  • hand-lizard-o
  • hand-stop-o (alias)
  • hand-paper-o
  • hand-peace-o
  • hand-pointer-o
  • hand-grab-o (alias)
  • hand-rock-o
  • hand-scissors-o
  • hand-spock-o
  • thumb-tack
  • thumbs-down
  • thumbs-o-down
  • thumbs-o-up
  • thumbs-up

Transportation Icons

  • ambulance
  • automobile (alias)
  • bicycle
  • bus
  • cab (alias)
  • car
  • fighter-jet
  • motorcycle
  • plane
  • rocket
  • ship
  • space-shuttle
  • subway
  • taxi
  • train
  • truck
  • wheelchair

Gender Icons

  • genderless (alias)
  • mars
  • mars-double
  • mars-stroke
  • mars-stroke-h
  • mars-stroke-v
  • mercury
  • neuter
  • transgender
  • transgender-alt
  • venus
  • venus-double
  • venus-mars

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-diners-club
  • cc-discover
  • cc-jcb
  • cc-mastercard
  • cc-paypal
  • cc-stripe
  • cc-visa
  • credit-card
  • google-wallet
  • paypal

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
  • pause-circle
  • pause-circle-o
  • play
  • play-circle
  • play-circle-o
  • step-backward
  • step-forward
  • stop
  • stop-circle
  • stop-circle-o
  • youtube-play

Brand Icons

  • 500px
  • adn
  • amazon
  • android
  • angellist
  • apple
  • behance
  • behance-square
  • bitbucket
  • bitbucket-square
  • bitcoin (alias)
  • black-tie
  • bluetooth
  • bluetooth-b
  • btc
  • buysellads
  • cc-amex
  • cc-diners-club
  • cc-discover
  • cc-jcb
  • cc-mastercard
  • cc-paypal
  • cc-stripe
  • cc-visa
  • chrome
  • codepen
  • codiepie
  • connectdevelop
  • contao
  • css3
  • dashcube
  • delicious
  • deviantart
  • digg
  • dribbble
  • dropbox
  • drupal
  • edge
  • empire
  • expeditedssl
  • facebook
  • facebook-f (alias)
  • facebook-official
  • facebook-square
  • firefox
  • flickr
  • fonticons
  • fort-awesome
  • forumbee
  • foursquare
  • ge (alias)
  • get-pocket
  • gg
  • gg-circle
  • git
  • git-square
  • github
  • github-alt
  • github-square
  • gittip (alias)
  • google
  • google-plus
  • google-plus-square
  • google-wallet
  • gratipay
  • hacker-news
  • houzz
  • html5
  • instagram
  • internet-explorer
  • ioxhost
  • joomla
  • jsfiddle
  • lastfm
  • lastfm-square
  • leanpub
  • linkedin
  • linkedin-square
  • linux
  • maxcdn
  • meanpath
  • medium-logo
  • mixcloud
  • modx
  • odnoklassniki
  • odnoklassniki-square
  • opencart
  • openid
  • opera
  • optin-monster
  • pagelines
  • paypal
  • pied-piper
  • pied-piper-alt
  • pinterest
  • pinterest-p
  • pinterest-square
  • product-hunt
  • qq
  • ra (alias)
  • rebel
  • reddit
  • reddit-alien
  • reddit-square
  • renren
  • safari
  • scribd
  • sellsy
  • share-alt
  • share-alt-square
  • shirtsinbulk
  • simplybuilt
  • skyatlas
  • skype
  • slack
  • slideshare
  • soundcloud
  • spotify
  • stack-exchange
  • stack-overflow
  • steam
  • steam-square
  • stumbleupon
  • stumbleupon-circle
  • tencent-weibo
  • trello
  • tripadvisor
  • tumblr
  • tumblr-square
  • twitch
  • twitter
  • twitter-square
  • usb
  • viacoin
  • vimeo
  • vimeo-square
  • vine
  • vk
  • wechat (alias)
  • weibo
  • weixin
  • whatsapp
  • wikipedia-w
  • windows
  • wordpress
  • xing
  • xing-square
  • y-combinator
  • y-combinator-square
  • yahoo
  • yc (alias)
  • yc-square (alias)
  • yelp
  • youtube
  • youtube-play
  • youtube-square

Medical Icons

  • ambulance
  • h-square
  • hospital-o
  • medkit
  • plus-square
  • stethoscope
  • user-md
  • wheelchair
UIkit Framework developed by YOOtheme
Stacks interface by Weavers Kingdom
RapidWeaver is a trademark of Realmac Software