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

Testimonials

  • P Dave

    Reliable tenants made being landlord stress free. Besides being professional they are also well versed with nitty-gritties of Landlord tenant issue. As a first time landlord they helped me understand the the importance of choosing a right tenant. I always recommend Reliabletenants to my colleagues & friends.

  • Preet A

    My investment properties keep on changing but Reliabletenants are constant. With them at the helm I go about my work / travel abroad / go on vacations with a complete peace of mind. For all those investors out there, I strongly recommend reliabletenants.ca.

  • Robert Polski

    "You guys are so good! You guys actually exceeded my expectations from a Realtor!"

  • B & J smith

    I am thankful to my friend for recommending reliabletenants.ca and I in turn referred them to everyone I know. The reason is obvious. They are one of the finest, most knowledgeable and most respected agents I have ever met. They provide an excellent service. But don’t just read this, try them out for yourself. You’ll see.”

  • SAAD ABDO

    I want to let you know that we were really happy with reliabletenants.ca for sheltering us from all the unpleasent issues of being a landlord. we would definitely keep you in our mind for our next project

  • A & F Sultan

    "It is our pleasure to express thanks to reliabletenants.ca for giving us peace of mind. I was tired & overwhelmed with various issues arising & was ready to sell my property. I am more than happy to have retained my investment property. I would recommend reliabletenants without any reservations or second thoughts to our friends and family."

  • Odombo P.

    Reliabletenants are reliables themselves – Take it from me. They are looking after Mine & my relatives properties. So far no issues. Hopefully it continues in future too.

  • LE NGUYEN

    Reliabletenants are reliables themselves – Take it from me. They are looking after Mine & my relatives properties. So far no issues. Hopefully it continues in future too.

  • T PIETOWSKI

    I wish I had listened to reliabletenants.ca when they told me to transfer all utility bills to tenant, I didn't follow their advice & had to suffer because of the same. From then on I follow their suggestions to T.

  • Rajiv

    Reliabletenants.ca are a group of good folks. Everyone knows their role which in turn makes things very present for Landlord. Happy:)

Social

Logout