On our Warp Framework powered templates we use UIkit Framework's icons. These icons are the same icons from FontAwesome but the only difference is the class names. You can see all available icons' usage, class names and types below:
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-cogclass - Uses the
.uk-icon-userclass - Uses the
.uk-icon-homeclass - An icon in a link
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>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-smallclass. - This icon uses the
.uk-icon-mediumclass. - This icon uses the
.uk-icon-largeclass.
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
- bed
- 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
- 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
- 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
- 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)
- hdd-o
- headphones
- heart
- heart-o
- heartbeat
- history
- home
- hotel (alias)
- 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)
- motorcycle
- 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
- 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)
- server
- share
- share-alt
- share-alt-square
- share-square
- share-square-o
- shield
- ship
- 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
- street-view
- 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
- 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
Gender Icons
- circle-thin
- 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-discover
- 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
- 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
- buysellads
- cc-amex
- cc-discover
- cc-mastercard
- cc-paypal
- cc-stripe
- cc-visa
- codepen
- connectdevelop
- css3
- dashcube
- delicious
- deviantart
- digg
- dribbble
- dropbox
- drupal
- empire
- facebook-f (alias)
- facebook-official
- facebook-square
- flickr
- forumbee
- foursquare
- ge (alias)
- git
- git-square
- github
- github-alt
- github-square
- gittip (alias)
- google-plus
- google-plus-square
- google-wallet
- gratipay
- hacker-news
- html5
- ioxhost
- joomla
- jsfiddle
- lastfm
- lastfm-square
- leanpub
- linkedin-square
- linux
- maxcdn
- meanpath
- medium
- openid
- pagelines
- paypal
- pied-piper
- pied-piper-alt
- pinterest-p
- pinterest-square
- ra (alias)
- rebel
- reddit-square
- renren
- 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
- tumblr
- tumblr-square
- twitch
- twitter-square
- viacoin
- vimeo-square
- vine
- vk
- wechat (alias)
- weixin
- windows
- wordpress
- xing-square
- yahoo
- yelp
- youtube
- youtube-play
- youtube-square
