October provides an icon library with icons of various descriptions, based on the popular Font Awesome collection.

Inline icons

Place icons just about anywhere with the <i> tag or to an existing element using the oc- prefix.

<i class="icon-camera-retro"></i> icon-camera-retro

<span class="oc-icon-flag-checkered">oc-icon-flag-checkered</span>
icon-camera-retro
oc-icon-flag-checkered

Icon sizes

To increase icon sizes relative to their container, use the icon-lg (33% increase), icon-2x, icon-3x, icon-4x, or icon-5x classes.

<i class="icon-camera-retro icon-5x"></i> icon-5x
<i class="icon-camera-retro icon-4x"></i> icon-4x
<i class="icon-camera-retro icon-3x"></i> icon-3x
<i class="icon-camera-retro icon-2x"></i> icon-2x
<i class="icon-camera-retro icon-lg"></i> icon-lg

Icon buttons

Feel free to use them alongside your buttons.

<a class="btn btn-default oc-icon-refresh" href="#">
    Refresh
</a>
<a class="btn btn-success oc-icon-shopping" href="#">
    Checkout
</a>
<a class="btn btn-primary oc-icon-comment" href="#">
    Comment
</a>
<a class="btn btn-danger oc-icon-trash" href="#">
    Delete
</a>
<a class="btn btn-default oc-icon-cog" href="#">
    Settings
</a>
<a class="btn btn-info oc-icon-info" href="#">
    More Info
</a>

Available icons

Web Application Icons

  • icon-address-book
  • icon-address-book-o
  • icon-address-card
  • icon-address-card-o
  • icon-adjust
  • icon-american-sign-language-interpreting
  • icon-anchor
  • icon-archive
  • icon-area-chart
  • icon-arrows
  • icon-arrows-h
  • icon-arrows-v
  • icon-assistive-listening-systems
  • icon-asterisk
  • icon-at
  • icon-audio-description
  • icon-balance-scale
  • icon-ban
  • icon-bar-chart
  • icon-barcode
  • icon-bars
  • icon-bath
  • icon-battery-empty
  • icon-battery-full
  • icon-battery-half
  • icon-battery-quarter
  • icon-battery-three-quarters
  • icon-bed
  • icon-beer
  • icon-bell
  • icon-bell-o
  • icon-bell-slash
  • icon-bell-slash-o
  • icon-bicycle
  • icon-binoculars
  • icon-birthday-cake
  • icon-blind
  • icon-bluetooth
  • icon-bluetooth-b
  • icon-bolt
  • icon-bomb
  • icon-book
  • icon-bookmark
  • icon-bookmark-o
  • icon-braille
  • icon-briefcase
  • icon-bug
  • icon-building
  • icon-building-o
  • icon-bullhorn
  • icon-bullseye
  • icon-bus
  • icon-calculator
  • icon-calendar
  • icon-calendar-check-o
  • icon-calendar-minus-o
  • icon-calendar-o
  • icon-calendar-plus-o
  • icon-calendar-times-o
  • icon-camera
  • icon-camera-retro
  • icon-car
  • icon-caret-square-o-down
  • icon-caret-square-o-left
  • icon-caret-square-o-right
  • icon-caret-square-o-up
  • icon-cart-arrow-down
  • icon-cart-plus
  • icon-cc
  • icon-certificate
  • icon-check
  • icon-check-circle
  • icon-check-circle-o
  • icon-check-square
  • icon-check-square-o
  • icon-child
  • icon-circle
  • icon-circle-o
  • icon-circle-o-notch
  • icon-circle-thin
  • icon-clock-o
  • icon-clone
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-code
  • icon-code-fork
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-o
  • icon-commenting
  • icon-commenting-o
  • icon-comments
  • icon-comments-o
  • icon-compass
  • icon-copyright
  • icon-creative-commons
  • icon-credit-card
  • icon-credit-card-alt
  • icon-crop
  • icon-crosshairs
  • icon-cube
  • icon-cubes
  • icon-cutlery
  • icon-database
  • icon-deaf
  • icon-desktop
  • icon-diamond
  • icon-dot-circle-o
  • icon-download
  • icon-ellipsis-h
  • icon-ellipsis-v
  • icon-envelope
  • icon-envelope-o
  • icon-envelope-open
  • icon-envelope-open-o
  • icon-envelope-square
  • icon-eraser
  • icon-exchange
  • icon-exclamation
  • icon-exclamation-circle
  • icon-exclamation-triangle
  • icon-external-link
  • icon-external-link-square
  • icon-eye
  • icon-eye-slash
  • icon-eyedropper
  • icon-fax
  • icon-female
  • icon-fighter-jet
  • icon-file-archive-o
  • icon-file-audio-o
  • icon-file-code-o
  • icon-file-excel-o
  • icon-file-image-o
  • icon-file-pdf-o
  • icon-file-powerpoint-o
  • icon-file-video-o
  • icon-file-word-o
  • icon-film
  • icon-filter
  • icon-fire
  • icon-fire-extinguisher
  • icon-flag
  • icon-flag-checkered
  • icon-flag-o
  • icon-flask
  • icon-folder
  • icon-folder-o
  • icon-folder-open
  • icon-folder-open-o
  • icon-frown-o
  • icon-futbol-o
  • icon-gamepad
  • icon-gavel
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-graduation-cap
  • icon-hand-lizard-o
  • icon-hand-paper-o
  • icon-hand-peace-o
  • icon-hand-pointer-o
  • icon-hand-rock-o
  • icon-hand-scissors-o
  • icon-hand-spock-o
  • icon-handshake-o
  • icon-hashtag
  • icon-hdd-o
  • icon-headphones
  • icon-heart
  • icon-heart-o
  • icon-heartbeat
  • icon-history
  • icon-home
  • icon-hourglass
  • icon-hourglass-end
  • icon-hourglass-half
  • icon-hourglass-o
  • icon-hourglass-start
  • icon-i-cursor
  • icon-id-badge
  • icon-id-card
  • icon-id-card-o
  • icon-inbox
  • icon-industry
  • icon-info
  • icon-info-circle
  • icon-key
  • icon-keyboard-o
  • icon-language
  • icon-laptop
  • icon-leaf
  • icon-lemon-o
  • icon-level-down
  • icon-level-up
  • icon-life-ring
  • icon-lightbulb-o
  • icon-line-chart
  • icon-location-arrow
  • icon-lock
  • icon-low-vision
  • icon-magic
  • icon-magnet
  • icon-male
  • icon-map
  • icon-map-marker
  • icon-map-o
  • icon-map-pin
  • icon-map-signs
  • icon-meh-o
  • icon-microchip
  • icon-microphone
  • icon-microphone-slash
  • icon-minus
  • icon-minus-circle
  • icon-minus-square
  • icon-minus-square-o
  • icon-mobile
  • icon-money
  • icon-moon-o
  • icon-motorcycle
  • icon-mouse-pointer
  • icon-music
  • icon-newspaper-o
  • icon-object-group
  • icon-object-ungroup
  • icon-paint-brush
  • icon-paper-plane
  • icon-paper-plane-o
  • icon-paw
  • icon-pencil
  • icon-pencil-square
  • icon-pencil-square-o
  • icon-percent
  • icon-phone
  • icon-phone-square
  • icon-picture-o
  • icon-pie-chart
  • icon-plane
  • icon-plug
  • icon-plus
  • icon-plus-circle
  • icon-plus-square
  • icon-plus-square-o
  • icon-podcast
  • icon-power-off
  • icon-print
  • icon-puzzle-piece
  • icon-qrcode
  • icon-question
  • icon-question-circle
  • icon-question-circle-o
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-recycle
  • icon-refresh
  • icon-registered
  • icon-reply
  • icon-reply-all
  • icon-retweet
  • icon-road
  • icon-rocket
  • icon-rss
  • icon-rss-square
  • icon-search
  • icon-search-minus
  • icon-search-plus
  • icon-server
  • icon-share
  • icon-share-alt
  • icon-share-alt-square
  • icon-share-square
  • icon-share-square-o
  • icon-shield
  • icon-ship
  • icon-shopping-bag
  • icon-shopping-basket
  • icon-shopping-cart
  • icon-shower
  • icon-sign-in
  • icon-sign-language
  • icon-sign-out
  • icon-signal
  • icon-sitemap
  • icon-sliders
  • icon-smile-o
  • icon-snowflake-o
  • icon-sort
  • icon-sort-alpha-asc
  • icon-sort-alpha-desc
  • icon-sort-amount-asc
  • icon-sort-amount-desc
  • icon-sort-asc
  • icon-sort-desc
  • icon-sort-numeric-asc
  • icon-sort-numeric-desc
  • icon-space-shuttle
  • icon-spinner
  • icon-spoon
  • icon-square
  • icon-square-o
  • icon-star
  • icon-star-half
  • icon-star-half-o
  • icon-star-o
  • icon-sticky-note
  • icon-sticky-note-o
  • icon-street-view
  • icon-suitcase
  • icon-sun-o
  • icon-tablet
  • icon-tachometer
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-taxi
  • icon-television
  • icon-terminal
  • icon-thermometer-empty
  • icon-thermometer-full
  • icon-thermometer-half
  • icon-thermometer-quarter
  • icon-thermometer-three-quarters
  • icon-thumb-tack
  • icon-thumbs-down
  • icon-thumbs-o-down
  • icon-thumbs-o-up
  • icon-thumbs-up
  • icon-ticket
  • icon-times
  • icon-times-circle
  • icon-times-circle-o
  • icon-tint
  • icon-toggle-off
  • icon-toggle-on
  • icon-trademark
  • icon-trash
  • icon-trash-o
  • icon-tree
  • icon-trophy
  • icon-truck
  • icon-tty
  • icon-umbrella
  • icon-universal-access
  • icon-university
  • icon-unlock
  • icon-unlock-alt
  • icon-upload
  • icon-user
  • icon-user-circle
  • icon-user-circle-o
  • icon-user-o
  • icon-user-plus
  • icon-user-secret
  • icon-user-times
  • icon-users
  • icon-video-camera
  • icon-volume-control-phone
  • icon-volume-down
  • icon-volume-off
  • icon-volume-up
  • icon-wheelchair
  • icon-wheelchair-alt
  • icon-wifi
  • icon-window-close
  • icon-window-close-o
  • icon-window-maximize
  • icon-window-minimize
  • icon-window-restore
  • icon-wrench

Medical Icons

  • icon-ambulance
  • icon-h-square
  • icon-heart
  • icon-heart-o
  • icon-heartbeat
  • icon-hospital-o
  • icon-medkit
  • icon-plus-square
  • icon-stethoscope
  • icon-user-md
  • icon-wheelchair
  • icon-wheelchair-alt

Text Editor Icons

  • icon-align-center
  • icon-align-justify
  • icon-align-left
  • icon-align-right
  • icon-bold
  • icon-chain-broken
  • icon-clipboard
  • icon-columns
  • icon-eraser
  • icon-file
  • icon-file-o
  • icon-file-text
  • icon-file-text-o
  • icon-files-o
  • icon-floppy-o
  • icon-font
  • icon-header
  • icon-indent
  • icon-italic
  • icon-link
  • icon-list
  • icon-list-alt
  • icon-list-ol
  • icon-list-ul
  • icon-outdent
  • icon-paperclip
  • icon-paragraph
  • icon-repeat
  • icon-scissors
  • icon-strikethrough
  • icon-subscript
  • icon-superscript
  • icon-table
  • icon-text-height
  • icon-text-width
  • icon-th
  • icon-th-large
  • icon-th-list
  • icon-underline
  • icon-undo

Spinner Icons

  • icon-circle-o-notch
  • icon-cog
  • icon-refresh
  • icon-spinner

    File Type Icons

    • icon-file
    • icon-file-archive-o
    • icon-file-audio-o
    • icon-file-code-o
    • icon-file-excel-o
    • icon-file-image-o
    • icon-file-o
    • icon-file-pdf-o
    • icon-file-powerpoint-o
    • icon-file-text
    • icon-file-text-o
    • icon-file-video-o
    • icon-file-word-o

    Directional Icons

    • icon-angle-double-down
    • icon-angle-double-left
    • icon-angle-double-right
    • icon-angle-double-up
    • icon-angle-down
    • icon-angle-left
    • icon-angle-right
    • icon-angle-up
    • icon-arrow-circle-down
    • icon-arrow-circle-left
    • icon-arrow-circle-o-down
    • icon-arrow-circle-o-left
    • icon-arrow-circle-o-right
    • icon-arrow-circle-o-up
    • icon-arrow-circle-right
    • icon-arrow-circle-up
    • icon-arrow-down
    • icon-arrow-left
    • icon-arrow-right
    • icon-arrow-up
    • icon-arrows
    • icon-arrows-alt
    • icon-arrows-h
    • icon-arrows-v
    • icon-caret-down
    • icon-caret-left
    • icon-caret-right
    • icon-caret-square-o-down
    • icon-caret-square-o-left
    • icon-caret-square-o-right
    • icon-caret-square-o-up
    • icon-caret-up
    • icon-chevron-circle-down
    • icon-chevron-circle-left
    • icon-chevron-circle-right
    • icon-chevron-circle-up
    • icon-chevron-down
    • icon-chevron-left
    • icon-chevron-right
    • icon-chevron-up
    • icon-exchange
    • icon-hand-o-down
    • icon-hand-o-left
    • icon-hand-o-right
    • icon-hand-o-up
    • icon-long-arrow-down
    • icon-long-arrow-left
    • icon-long-arrow-right
    • icon-long-arrow-up

    Video Player Icons

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

    Form Control Icons

    • icon-check-square
    • icon-check-square-o
    • icon-circle
    • icon-circle-o
    • icon-dot-circle-o
    • icon-minus-square
    • icon-minus-square-o
    • icon-plus-square
    • icon-plus-square-o
    • icon-square
    • icon-square-o

    Transportation Icons

    • icon-ambulance
    • icon-bicycle
    • icon-bus
    • icon-car
    • icon-fighter-jet
    • icon-motorcycle
    • icon-plane
    • icon-rocket
    • icon-ship
    • icon-space-shuttle
    • icon-subway
    • icon-taxi
    • icon-train
    • icon-truck
    • icon-wheelchair
    • icon-wheelchair-alt

    Chart Icons

    • icon-area-chart
    • icon-bar-chart
    • icon-line-chart
    • icon-pie-chart

      Brand Icons

      • icon-500px
      • icon-adn
      • icon-amazon
      • icon-android
      • icon-angellist
      • icon-apple
      • icon-bandcamp
      • icon-behance
      • icon-behance-square
      • icon-bitbucket
      • icon-bitbucket-square
      • icon-black-tie
      • icon-bluetooth
      • icon-bluetooth-b
      • icon-btc
      • icon-buysellads
      • icon-cc-amex
      • icon-cc-diners-club
      • icon-cc-discover
      • icon-cc-jcb
      • icon-cc-mastercard
      • icon-cc-paypal
      • icon-cc-stripe
      • icon-cc-visa
      • icon-chrome
      • icon-codepen
      • icon-codiepie
      • icon-connectdevelop
      • icon-contao
      • icon-css3
      • icon-dashcube
      • icon-delicious
      • icon-deviantart
      • icon-digg
      • icon-dribbble
      • icon-dropbox
      • icon-drupal
      • icon-edge
      • icon-eercast
      • icon-empire
      • icon-envira
      • icon-etsy
      • icon-expeditedssl
      • icon-facebook
      • icon-facebook-official
      • icon-facebook-square
      • icon-firefox
      • icon-first-order
      • icon-flickr
      • icon-font-awesome
      • icon-fonticons
      • icon-fort-awesome
      • icon-forumbee
      • icon-foursquare
      • icon-free-code-camp
      • icon-get-pocket
      • icon-gg
      • icon-gg-circle
      • icon-git
      • icon-git-square
      • icon-github
      • icon-github-alt
      • icon-github-square
      • icon-gitlab
      • icon-glide
      • icon-glide-g
      • icon-google
      • icon-google-plus
      • icon-google-plus-official
      • icon-google-plus-square
      • icon-google-wallet
      • icon-gratipay
      • icon-grav
      • icon-hacker-news
      • icon-houzz
      • icon-html5
      • icon-imdb
      • icon-instagram
      • icon-internet-explorer
      • icon-ioxhost
      • icon-joomla
      • icon-jsfiddle
      • icon-lastfm
      • icon-lastfm-square
      • icon-leanpub
      • icon-linkedin
      • icon-linkedin-square
      • icon-linode
      • icon-linux
      • icon-maxcdn
      • icon-meanpath
      • icon-medium
      • icon-meetup
      • icon-mixcloud
      • icon-modx
      • icon-odnoklassniki
      • icon-odnoklassniki-square
      • icon-opencart
      • icon-openid
      • icon-opera
      • icon-optin-monster
      • icon-pagelines
      • icon-paypal
      • icon-pied-piper
      • icon-pied-piper-alt
      • icon-pied-piper-pp
      • icon-pinterest
      • icon-pinterest-p
      • icon-pinterest-square
      • icon-product-hunt
      • icon-qq
      • icon-quora
      • icon-ravelry
      • icon-rebel
      • icon-reddit
      • icon-reddit-alien
      • icon-reddit-square
      • icon-renren
      • icon-safari
      • icon-scribd
      • icon-sellsy
      • icon-share-alt
      • icon-share-alt-square
      • icon-shirtsinbulk
      • icon-simplybuilt
      • icon-skyatlas
      • icon-skype
      • icon-slack
      • icon-slideshare
      • icon-snapchat
      • icon-snapchat-ghost
      • icon-snapchat-square
      • icon-soundcloud
      • icon-spotify
      • icon-stack-exchange
      • icon-stack-overflow
      • icon-steam
      • icon-steam-square
      • icon-stumbleupon
      • icon-stumbleupon-circle
      • icon-superpowers
      • icon-telegram
      • icon-tencent-weibo
      • icon-themeisle
      • icon-trello
      • icon-tripadvisor
      • icon-tumblr
      • icon-tumblr-square
      • icon-twitch
      • icon-twitter
      • icon-twitter-square
      • icon-usb
      • icon-viacoin
      • icon-viadeo
      • icon-viadeo-square
      • icon-vimeo
      • icon-vimeo-square
      • icon-vine
      • icon-vk
      • icon-weibo
      • icon-weixin
      • icon-whatsapp
      • icon-wikipedia-w
      • icon-windows
      • icon-wordpress
      • icon-wpbeginner
      • icon-wpexplorer
      • icon-wpforms
      • icon-xing
      • icon-xing-square
      • icon-y-combinator
      • icon-yahoo
      • icon-yelp
      • icon-yoast
      • icon-youtube
      • icon-youtube-play
      • icon-youtube-square

      Hand Icons

      • icon-hand-lizard-o
      • icon-hand-o-down
      • icon-hand-o-left
      • icon-hand-o-right
      • icon-hand-o-up
      • icon-hand-paper-o
      • icon-hand-peace-o
      • icon-hand-pointer-o
      • icon-hand-rock-o
      • icon-hand-scissors-o
      • icon-hand-spock-o
      • icon-thumbs-down
      • icon-thumbs-o-down
      • icon-thumbs-o-up
      • icon-thumbs-up

      Payment Icons

      • icon-cc-amex
      • icon-cc-diners-club
      • icon-cc-discover
      • icon-cc-jcb
      • icon-cc-mastercard
      • icon-cc-paypal
      • icon-cc-stripe
      • icon-cc-visa
      • icon-credit-card
      • icon-credit-card-alt
      • icon-google-wallet
      • icon-paypal

      Currency Icons

      • icon-btc
      • icon-eur
      • icon-gbp
      • icon-gg
      • icon-gg-circle
      • icon-ils
      • icon-inr
      • icon-jpy
      • icon-krw
      • icon-money
      • icon-rub
      • icon-try
      • icon-usd

      Accessibility Icons

      • icon-american-sign-language-interpreting
      • icon-assistive-listening-systems
      • icon-audio-description
      • icon-blind
      • icon-braille
      • icon-cc
      • icon-deaf
      • icon-low-vision
      • icon-question-circle-o
      • icon-sign-language
      • icon-tty
      • icon-universal-access
      • icon-volume-control-phone
      • icon-wheelchair
      • icon-wheelchair-alt

      Gender Icons

      • icon-genderless
      • icon-mars
      • icon-mars-double
      • icon-mars-stroke
      • icon-mars-stroke-h
      • icon-mars-stroke-v
      • icon-mercury
      • icon-neuter
      • icon-transgender
      • icon-transgender-alt
      • icon-venus
      • icon-venus-double
      • icon-venus-mars