Twitter Bootstrap Icons

Lots of designers are still confused about the situation with Bootstrap Icons. This site is here to make it clear. There are lots of questions out there about sizes, colors and vector versions. The answer is not so easy, it depends on a lots of stuff.

Glaphicons

Twitter Bootstrap comes with the halfings from Glyphicons. Halfings are a smaller 12x12 version of Glyphicons and they are normally not available for free, but their creator Jan Kovařík has made them available for Bootstrap free of cost. The circumstances for Glyphicons are totaly different for each version of Twitter Bootstrap. There is a free version of 520 Glyphicons available for download.

Bootstrap version 2.3.2

This version has exactly 140 Glyph Icons in a sprite form (one big PNG image with all icons), available in dark gray (default) and white. The downside of this sprite version is that you are bound to the selection of 140 icons, 12x12 size and these 2 colours. If you want something more, than you would have to buy a different licence of Glyphicons and generate new sprite for it. There is also a nice project on GitHub which could help you with the size of icons. The upside of it is that it works in almost every browser out there.

Bootstrap Icons List for version 2.3.2

All classes need to have this name .icon.icon-*. For example .icon.icon-glass.

  • glass
  • music
  • search
  • envelope
  • heart
  • star
  • star-empty
  • user
  • film
  • th-large
  • th
  • th-list
  • ok
  • remove
  • zoom-in
  • zoom-out
  • off
  • signal
  • cog
  • trash
  • home
  • file
  • time
  • road
  • download-alt
  • download
  • upload
  • inbox
  • play-circle
  • repeat
  • refresh
  • list-alt
  • lock
  • flag
  • headphones
  • volume-off
  • volume-down
  • volume-up
  • qrcode
  • barcode
  • tag
  • tags
  • book
  • bookmark
  • print
  • camera
  • font
  • bold
  • italic
  • text-height
  • text-width
  • align-left
  • align-center
  • align-right
  • align-justify
  • list
  • indent-left
  • indent-right
  • facetime-video
  • picture
  • pencil
  • map-marker
  • adjust
  • tint
  • edit
  • share
  • check
  • move
  • step-backward
  • fast-backward
  • backward
  • play
  • pause
  • stop
  • forward
  • fast-forward
  • step-forward
  • eject
  • chevron-left
  • chevron-right
  • plus-sign
  • minus-sign
  • remove-sign
  • ok-sign
  • question-sign
  • info-sign
  • screenshot
  • remove-circle
  • ok-circle
  • ban-circle
  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-down
  • share-alt
  • resize-full
  • resize-small
  • plus
  • minus
  • asterisk
  • exclamation-sign
  • gift
  • leaf
  • fire
  • eye-open
  • eye-close
  • warning-sign
  • plane
  • calendar
  • random
  • comment
  • magnet
  • chevron-up
  • chevron-down
  • retweet
  • shopping-cart
  • folder-close
  • folder-open
  • resize-vertical
  • resize-horizontal
  • hdd
  • bullhorn
  • bell
  • certificate
  • thumbs-up
  • thumbs-down
  • hand-right
  • hand-left
  • hand-up
  • hand-down
  • circle-arrow-right
  • circle-arrow-left
  • circle-arrow-up
  • circle-arrow-down
  • globe
  • wrench
  • tasks
  • filter
  • briefcase
  • fullscreen

Bootstrap version 3

This version includes 180 glyphs in font format from the Glyphicon Halflings set. So you can have now any size and color you would like. You could say it's retina ready, because it will look perfect in every size on every screen. The only downside I can think of is IE 7 and even older browsers, but Bootstrap 3 doesn't support it anyway.

Bootstrap Icons List for version 3

Class name has to be like this .glyphicon.glyphicon-*. For example .glyphicon.glyphicon-adjust.

  • adjust
  • align-center
  • align-justify
  • align-left
  • align-right
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • asterisk
  • backward
  • ban-circle
  • barcode
  • bell
  • bold
  • book
  • bookmark
  • briefcase
  • bullhorn
  • calendar
  • camera
  • certificate
  • check
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • circle-arrow-down
  • circle-arrow-left
  • circle-arrow-right
  • circle-arrow-up
  • cloud
  • cloud-download
  • cloud-upload
  • cog
  • collapse-down
  • collapse-up
  • comment
  • compressed
  • copyright-mark
  • credit-card
  • cutlery
  • dashboard
  • download
  • download-alt
  • earphone
  • edit
  • eject
  • envelope
  • euro
  • exclamation-sign
  • expand
  • export
  • eye-close
  • eye-open
  • facetime-video
  • fast-backward
  • fast-forward
  • file
  • film
  • filter
  • fire
  • flag
  • flash
  • floppy-disk
  • floppy-open
  • floppy-remove
  • floppy-save
  • floppy-saved
  • folder-close
  • folder-open
  • font
  • forward
  • fullscreen
  • gbp
  • gift
  • glass
  • globe
  • hand-down
  • hand-left
  • hand-right
  • hand-up
  • hd-video
  • hdd
  • header
  • headphones
  • heart
  • heart-empty
  • home
  • import
  • inbox
  • indent-left
  • indent-right
  • info-sign
  • italic
  • leaf
  • link
  • list
  • list-alt
  • lock
  • log-in
  • log-out
  • magnet
  • map-marker
  • minus
  • minus-sign
  • move
  • music
  • new-window
  • off
  • ok
  • ok-circle
  • ok-sign
  • open
  • paperclip
  • pause
  • pencil
  • phone
  • phone-alt
  • picture
  • plane
  • play
  • play-circle
  • plus
  • plus-sign
  • print
  • pushpin
  • qrcode
  • question-sign
  • random
  • record
  • refresh
  • registration-mark
  • remove
  • remove-circle
  • remove-sign
  • repeat
  • resize-full
  • resize-horizontal
  • resize-small
  • resize-vertical
  • retweet
  • road
  • save
  • saved
  • screenshot
  • sd-video
  • search
  • send
  • share
  • share-alt
  • shopping-cart
  • signal
  • sort
  • sort-by-alphabet
  • sort-by-alphabet-alt
  • sort-by-attributes
  • sort-by-attributes-alt
  • sort-by-order
  • sort-by-order-alt
  • sound-5-1
  • sound-6-1
  • sound-7-1
  • sound-dolby
  • sound-stereo
  • star
  • star-empty
  • stats
  • step-backward
  • step-forward
  • stop
  • subtitles
  • tag
  • tags
  • tasks
  • text-height
  • text-width
  • th
  • th-large
  • th-list
  • thumbs-down
  • thumbs-up
  • time
  • tint
  • tower
  • transfer
  • trash
  • tree-conifer
  • tree-deciduous
  • unchecked
  • upload
  • usd
  • user
  • volume-down
  • volume-off
  • volume-up
  • warning-sign
  • wrench
  • zoom-in
  • zoom-out

Icon Alternatives

It is very kind of Glyphicons creator that he has made them available for Twitter Bootstrap free of cost and it is also very useful that Bootstrap already includes them out of box. But that doesn't mean we have no other choices to get some very nice free icons.

Font Awesome

This iconic font was designed from scratch exclusively for Twitter Bootstrap and works perfectly with it. Font Awesomes includes 361 icons and supports IE7. It was created by Dave Gandy. Font Awesome is my favorite one.

Entypo

Entypo is a set of 250+ carefully crafted pictograms. The package contains all possible formats like: icon-font, OpenType, TrueType, EPS, PDF & PSD. Entypo was created by Daniel Bruce.

Iconic

Iconic is an open source icon set consisting of 171 marks in raster, vector and font formats. Iconic aims to be the most forward-thinking icon set around based on its support of forward facing display/deployment methods.

Foundation Icons 2

This icons are built by the awesome folks at ZURB, it's a part of their wonderfull Foundation Framework, but can be used separately.

Fontello

Last but not least is a very useful tool that lets you easily piece together your own icon font based on icons from a number of sources.

Others

Here is a list of other icon resources:

Bootstrap Themes