Edit on GitHub

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

Winter: 16 Months Later

Published July 14, 2022
With the first year of Winter behind us, let's take a look at what we were able to achieve in 2021.

View this post Read all posts

Latest Winter CMS release

v1.2.1

Released October 20, 2022
14 UX/UI Improvements, 25 API Changes, 33 Bug Fixes, 4 Security Improvements, 5 Translation Improvements, 1 Performance Improvement, 2 Community Improvements, 2 Dependencies, 0 New Contributors * @cstorus made their first contribution in https://github.com/wintercms/winter/pull/616 * @simonmannsfeld made their first contribution in https://github.com/wintercms/winter/pull/623 * @quangtrongonline made their first contribution in https://github.com/wintercms/winter/pull/636 * @nathanlesage made their first contribution in https://github.com/wintercms/winter/pull/665 * @vllvll made their first contribution in https://github.com/wintercms/winter/pull/669 * @robertalexa made their first contribution in https://github.com/wintercms/winter/pull/668 * @iamyigitkoc made their first contribution in https://github.com/wintercms/winter/pull/624 * @hecc127 made their first contribution in https://github.com/wintercms/winter/pull/682 * @prsuhas made their first contribution in https://github.com/wintercms/winter/pull/723

View details View all releases