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 hover

Use the modifier .uk-icon-hover class to use an anchor as an icon, applying a hover effect and removing the link underline.

Example

Markup

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

---

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>

---

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.

Example

• Justified icon
• Justified icon
• Justified icon
• Justified icon

Markup

<a href="/" class="uk-icon-justify 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)
• 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
• close (alias)
• 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

---

Transportation Icons

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

---

Accessibility Icons

• american-sign-language-interpreting
• asl-interpreting (alias)
• assistive-listening-systems
• audio-description
• blind
• braille
• cc
• deaf
• deafness (alias)
• hard-of-hearing (alias)
• low-vision
• question-circle-o
• sign-language
• signing (alias)
• tty
• universal-access
• volume-control-phone
• wheelchair
• wheelchair-alt

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

---

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
• glide
• glide-g
• snapchat
• snapchat-ghost
• snapchat-square
• viadeo
• viadeo-square

---

Medical Icons

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

Badge HOT Success Warning Danger 1

Badge notification 1 2 10 100 Text

Legend

Option 01 Option 02 Button Button Checkbox

Rows

Option 01 Option 02

Checkbox

Button

States

Sizes and styles

Option 01 Option 02 Button

Option 01 Option 02 Button

Option 01 Option 02 Button

Widths

form-width-large form-width-medium form-width-small form-width-mini

width-100

Form icon

Date

Form stacked

Text input

Add the class .uk-form-help-inline for inline help text.

Password input

Select field

Option 01 Option 02

Textarea

Add the class .uk-form-help-block for help text in block elements.

Radio input

Radio input
1 2 3

Checkbox input

Checkbox input
1 2 3

Mixed controls

Checkbox input Number input Option 01 Option 02 Select field

Checkbox input Number input Option 01 Option 02 Select field

Form horizontal

Text input

Add the class .uk-form-help-inline for inline help text.

Password input

Email input

Search input

Tel input

URL input

File input

Select field

Option 01 Option 02

Select field

Option 01 Option 02 Option 03 Option 04

Textarea

Add the class .uk-form-help-block for help text in block elements.

Radio input

Radio input
1 2 3

Checkbox input

Checkbox input
1 2 3

Mixed controls

Checkbox input Number input Option 01 Option 02 Select field

Checkbox input Number input Option 01 Option 02 Select field

Color input

Number input

Range input

Date input

Month input

Week input

Time input

Datetime input

Datetime-local input

Disabled input

Required input

Form grid

Label

Label

Form stacked grid

Address

Label

Label