Icon library

Winter 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 wn- prefix.

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

<span class="wn-icon-flag-checkered">wn-icon-flag-checkered</span>
icon-camera-retro
wn-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 wn-icon-refresh" href="#">
    Refresh
</a>
<a class="btn btn-success wn-icon-shopping" href="#">
    Checkout
</a>
<a class="btn btn-primary wn-icon-comment" href="#">
    Comment
</a>
<a class="btn btn-danger wn-icon-trash" href="#">
    Delete
</a>
<a class="btn btn-default wn-icon-cog" href="#">
    Settings
</a>
<a class="btn btn-info wn-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

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

The Winter CMS Web Installer is now available!

Published June 17, 2021
We are super excited to announce that our new Web-based Installer is finally available for download, to make it super easy to get your next Winter CMS project started!

View this post Read all posts

Latest Winter CMS release

v1.1.3

Released April 26, 2021
3 UX/UI Improvements, 19 API Changes, 23 Bug Fixes, 3 Security Improvements, 4 Translation Improvements, 1 Community Improvement, 2 Dependencies

View details View all releases