Icon

Place vector icons anywhere using an icon font.


Usage

To apply this component, add any .icon-* class to any inline element.

Usage

  • Class Description
    .icon-* This class creates a basic icon component.

    Sub Objects

    Class Description
    .icon-hover Use the modifier .icon-hover class to use an anchor as an icon, applying a hover effect and removing any text decoration.
    .icon-button Use the modifier .icon-button class to create an icon button, which can be used perfectly for social icons.

    Modifiers

    Class Description
    .icon-small Increased the size of the icon by 150%
    .icon-medium Increased the size of the icon by 200%
    .icon-large Increased the size of the icon by 250%
    .icon-spin Adds a infinite, rotating animation to the icon
  • Default
    .icon-hover
    .icon-button
    .icon-small
    .icon-medium
    .icon-large
    .icon-spin
    Button A button with an icon
  • <i class="icon-cog"></i>
    <i class="icon-cog icon-hover"></i>
    <i class="icon-cog icon-button"></i>
    <i class="icon-cog icon-small"></i>
    <i class="icon-cog icon-medium"></i>
    <i class="icon-cog icon-large"></i>
    <i class="icon-cog icon-spin"></i>
    <a href="#" class="button"><i class="icon-envelop"></i> Button</a>

Icon Hover

Use the modifier .icon-hover class to use an anchor as an icon, applying a hover effect and removing any text decoration.

Usage

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

Icon Button

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

Usage

  • <a href="#" class="icon-button icon-github"></a>

Modifiers

Size Modifiers

Add the following classes to an icon component to alter the size.

Usage

  • Size Example
    Default
    .icon-small
    .icon-medium
    .icon-large
  • <i class="icon-headphones icon-small"></i>
    <i class="icon-headphones icon-medium"></i>
    <i class="icon-headphones icon-large"></i>

Icon Spin

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

Usage

  • <i class="icon-spinner2 icon-spin"></i>

List of all icons

Below is a list of all .icon-* classes provided by IcoMoon.

Arrows

.icon-chevron-down
.icon-chevron-left
.icon-chevron-right
.icon-chevron-up
.icon-arrow-up-left
.icon-arrow-up
.icon-arrow-up-right
.icon-arrow-right
.icon-arrow-down-right
.icon-arrow-down
.icon-arrow-down-left
.icon-arrow-left
.icon-arrow-up-left2
.icon-arrow-up2
.icon-arrow-up-right2
.icon-arrow-right2
.icon-arrow-down-right2
.icon-arrow-down2
.icon-arrow-down-left2
.icon-arrow-left2
.icon-circle-up
.icon-circle-right
.icon-circle-down
.icon-circle-left
.icon-point-up
.icon-point-right
.icon-point-down
.icon-point-left

Locations

.icon-home
.icon-home2
.icon-home3
.icon-office
.icon-library

Writing/Blogging

.icon-newspaper
.icon-pencil
.icon-pencil2
.icon-quill
.icon-pen
.icon-blog

Images & Image Editing

.icon-eyedropper
.icon-droplet
.icon-paint-format
.icon-image
.icon-images
.icon-camera
.icon-sun
.icon-contrast
.icon-brightness-contrast
.icon-crop
.icon-make-group
.icon-ungroup
.icon-scissors

Media

.icon-headphones
.icon-music
.icon-play
.icon-film
.icon-video-camera

Games

.icon-dice
.icon-pacman
.icon-spades
.icon-clubs
.icon-diamonds

Communication

.icon-bullhorn
.icon-connection
.icon-podcast
.icon-feed
.icon-mic
.icon-book
.icon-books
.icon-phone
.icon-phone-hang-up
.icon-address-book
.icon-envelop
.icon-bubble
.icon-bubbles
.icon-bubbles2
.icon-bubble2
.icon-bubbles3
.icon-bubbles4
.icon-quotes-left
.icon-quotes-right

File Types

.icon-file-text
.icon-profile
.icon-file-empty
.icon-files-empty
.icon-file-text2
.icon-file-picture
.icon-file-music
.icon-file-play
.icon-file-video
.icon-file-zip
.icon-file-pdf
.icon-file-openoffice
.icon-file-word
.icon-file-excel

Text Editor

.icon-copy
.icon-paste
.icon-stack
.icon-folder
.icon-folder-open
.icon-folder-plus
.icon-folder-minus
.icon-folder-download
.icon-folder-upload
.icon-undo
.icon-redo
.icon-undo2
.icon-redo2
.icon-forward
.icon-reply
.icon-search
.icon-zoom-in
.icon-zoom-out
.icon-enlarge
.icon-shrink
.icon-enlarge2
.icon-shrink2
.icon-bin
.icon-bin2
.icon-clipboard
.icon-list-numbered
.icon-list
.icon-list2
.icon-link
.icon-attachment
.icon-font
.icon-ligature
.icon-ligature2
.icon-text-height
.icon-text-width
.icon-font-size
.icon-bold
.icon-underline
.icon-italic
.icon-strikethrough
.icon-page-break
.icon-superscript
.icon-subscript
.icon-superscript2
.icon-subscript2
.icon-text-color
.icon-pagebreak
.icon-clear-formatting
.icon-pilcrow
.icon-ltr
.icon-rtl
.icon-section
.icon-paragraph-left
.icon-paragraph-center
.icon-paragraph-right
.icon-paragraph-justify
.icon-indent-increase
.icon-indent-decrease

Currency & Commerce

.icon-price-tag
.icon-price-tags
.icon-barcode
.icon-qrcode
.icon-ticket
.icon-cart
.icon-coin-dollar
.icon-coin-euro
.icon-coin-pound
.icon-coin-yen
.icon-credit-card
.icon-calculator

Map & Location

.icon-pushpin
.icon-location
.icon-location2
.icon-compass
.icon-compass2
.icon-map
.icon-map2

Date & Time

.icon-history
.icon-clock
.icon-clock2
.icon-alarm
.icon-bell
.icon-stopwatch
.icon-calendar
.icon-hour-glass

Technology

.icon-printer
.icon-keyboard
.icon-display
.icon-laptop
.icon-mobile
.icon-mobile2
.icon-tablet
.icon-tv
.icon-drawer
.icon-drawer2
.icon-box-add
.icon-box-remove
.icon-download
.icon-upload
.icon-floppy-disk
.icon-drive
.icon-database
.icon-cloud
.icon-cloud-download
.icon-cloud-upload
.icon-cloud-check
.icon-download2
.icon-upload2
.icon-download3
.icon-upload3
.icon-terminal
.icon-embed
.icon-embed2

People & Users

.icon-user
.icon-users
.icon-user-plus
.icon-user-minus
.icon-user-check
.icon-user-tie
.icon-accessibility
.icon-man
.icon-woman
.icon-man-woman

Loading

.icon-spinner
.icon-spinner2
.icon-spinner3
.icon-spinner4
.icon-spinner5
.icon-spinner6
.icon-spinner7
.icon-spinner8
.icon-spinner9
.icon-spinner10
.icon-spinner11

Charts

.icon-pie-chart
.icon-stats-dots
.icon-stats-bars
.icon-stats-bars2
.icon-meter
.icon-meter2

Transportation

.icon-briefcase
.icon-airplane
.icon-truck
.icon-road

User Interface

.icon-menu
.icon-menu2
.icon-menu3
.icon-menu4
.icon-eye
.icon-eye-plus
.icon-eye-minus
.icon-eye-blocked
.icon-bookmark
.icon-bookmarks
.icon-star-empty
.icon-star-half
.icon-star-full
.icon-warning
.icon-notification
.icon-question
.icon-plus
.icon-minus
.icon-info
.icon-cancel-circle
.icon-blocked
.icon-cross
.icon-checkmark
.icon-checkmark2
.icon-spell-check
.icon-enter
.icon-exit
.icon-move-up
.icon-move-down
.icon-sort-alpha-asc
.icon-sort-alpha-desc
.icon-sort-numeric-asc
.icon-sort-numberic-desc
.icon-sort-amount-asc
.icon-sort-amount-desc
.icon-table
.icon-table2
.icon-insert-template
.icon-share
.icon-new-tab
.icon-share2
.icon-mail
.icon-mail2
.icon-mail3
.icon-mail4

Emoticons

.icon-happy
.icon-happy2
.icon-smile
.icon-smile2
.icon-tongue
.icon-tongue2
.icon-sad
.icon-sad2
.icon-wink
.icon-wink2
.icon-grin
.icon-grin2
.icon-cool
.icon-cool2
.icon-angry
.icon-angry2
.icon-evil
.icon-evil2
.icon-shocked
.icon-shocked2
.icon-baffled
.icon-baffled2
.icon-confused
.icon-confused2
.icon-neutral
.icon-neutral2
.icon-hipster
.icon-hipster2
.icon-wondering
.icon-wondering2
.icon-sleepy
.icon-sleepy2
.icon-frustrated
.icon-frustrated2
.icon-crying
.icon-crying2

Media Controls

.icon-play2
.icon-pause
.icon-stop
.icon-previous
.icon-next
.icon-backward
.icon-forward2
.icon-play3
.icon-pause2
.icon-stop2
.icon-backward2
.icon-forward3
.icon-first
.icon-last
.icon-previous2
.icon-next2
.icon-eject
.icon-volume-high
.icon-volume-medium
.icon-volume-low
.icon-volume-mute
.icon-volume-mute2
.icon-volume-increase
.icon-volume-decrease
.icon-loop
.icon-loop2
.icon-infinite
.icon-shuffle

Keyboard Controls

.icon-tab
.icon-command
.icon-shift
.icon-ctrl
.icon-opt

Form Elements

.icon-checkbox-checked
.icon-checkbox-unchecked
.icon-radio-checked
.icon-radio-checked2
.icon-radio-unchecked

Math

.icon-filter
.icon-omega
.icon-sigma

Social Media & Brand Icons

.icon-google
.icon-google-plus
.icon-google-plus2
.icon-google-plus3
.icon-google-drive
.icon-facebook
.icon-facebook2
.icon-facebook3
.icon-ello
.icon-instagram
.icon-twitter
.icon-twitter2
.icon-twitter3
.icon-feed2
.icon-feed3
.icon-feed4
.icon-youtube
.icon-youtube2
.icon-youtube3
.icon-youtube4
.icon-twitch
.icon-vimeo
.icon-vimeo2
.icon-vimeo3
.icon-lanyrd
.icon-flickr
.icon-flickr2
.icon-flickr3
.icon-flickr4
.icon-picassa
.icon-picassa2
.icon-dribbble
.icon-dribbble2
.icon-dribbble3
.icon-forrst
.icon-forrst2
.icon-deviantart
.icon-deviantart2
.icon-steam
.icon-steam2
.icon-dropbox
.icon-onedrive
.icon-github
.icon-github2
.icon-github3
.icon-github4
.icon-github5
.icon-wordpress
.icon-wordpress2
.icon-joomla
.icon-blogger
.icon-blogger2
.icon-tumblr
.icon-tumblr2
.icon-yahoo
.icon-tux
.icon-apple
.icon-finder
.icon-android
.icon-windows
.icon-windows8
.icon-soundcloud
.icon-soundcloud2
.icon-skype
.icon-reddit
.icon-linkedin
.icon-linkedin2
.icon-lastfm
.icon-lastfm2
.icon-delicious
.icon-stumbleupon
.icon-stumbleupon2
.icon-stackoverflow
.icon-pinterest
.icon-pinterest2
.icon-xing
.icon-xing2
.icon-flattr
.icon-foursquare
.icon-paypal
.icon-paypal2
.icon-paypal3
.icon-yelp
.icon-libreoffice
.icon-html5
.icon-html52
.icon-css3
.icon-git
.icon-svg
.icon-codepen
.icon-chrome
.icon-firefox
.icon-IE
.icon-opera
.icon-safari
.icon-IcoMoon

Miscellaneous

.icon-lifebuoy
.icon-binoculars
.icon-key
.icon-key2
.icon-lock
.icon-unlocked
.icon-wrench
.icon-equalizer
.icon-equalizer2
.icon-cog
.icon-cogs
.icon-hammer
.icon-magic-wand
.icon-aid-kit
.icon-bug
.icon-trophy
.icon-gift
.icon-glass
.icon-glass2
.icon-mug
.icon-spoon-knife
.icon-leaf
.icon-rocket
.icon-hammer2
.icon-fire
.icon-lab
.icon-magnet
.icon-target
.icon-shield
.icon-power
.icon-switch
.icon-power-cord
.icon-sphere
.icon-earth
.icon-flag
.icon-tree
.icon-heart
.icon-heart-broken