Place vector icons anywhere using an icon font.

\n\n

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.

\n\n
\n\n

Usage

\n\n

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.

\n\n

Examples

\n\n
    \n
  • Uses the .uk-icon-cog class
  • \n
  • Uses the .uk-icon-user class
  • \n
  • Uses the .uk-icon-home class
  • \n
  • An icon in a link
  • \n
\n\n A button with an icon\n\n

Markup

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

More examples

\n\n

Button group

\n\n

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

\n\n

Example

\n\n
\n \n \n \n \n
\n\n
\n\n

Button dropdown

\n\n

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.

\n\n

Example

\n\n
\n \n
\n \n
\n \n
\n
\n
\n\n
\n\n

Blockquotes

\n\n

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.

\n\n

Example

\n\n
\n

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

\n
\n\n
\n\n

Size modifiers

\n\n

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

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

Spin modifier

\n\n

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

\n\n
    \n
  • Spinner icon for loading content …
  • \n
  • Refresh icon for refreshing content …
  • \n
\n\n
\n\n

Icon button

\n\n

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

\n\n

Example

\n\n \n \n \n \n\n

Markup

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

Icon mapping

\n\n

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

\n\n

Web Application Icons

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

File Type Icons

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

Spinner Icons

\n\n
    \n\n
  • circle-o-notch
  • \n
  • cog
  • \n
  • gear (alias)
  • \n
  • refresh
  • \n
  • spinner
  • \n\n
\n\n
\n\n

Form Control Icons

\n\n
    \n\n
  • check-square
  • \n
  • check-square-o
  • \n
  • circle
  • \n
  • circle-o
  • \n
  • dot-circle-o
  • \n
  • minus-square
  • \n
  • minus-square-o
  • \n
  • plus-square
  • \n
  • plus-square-o
  • \n
  • square
  • \n
  • square-o
  • \n\n
\n\n
\n\n

Payment Icons

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

Chart Icons

\n\n
    \n\n
  • area-chart
  • \n
  • bar-chart
  • \n
  • bar-chart-o (alias)
  • \n
  • line-chart
  • \n
  • pie-chart
  • \n\n
\n\n
\n\n

Currency Icons

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

Text Editor Icons

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

Directional Icons

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

Video Player Icons

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

Brand Icons

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

Medical Icons

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