Icons

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

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>
In dark themes (Cyborg and Slate) normal icons become white and icon-white become black.

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

  • As visuals for your sidebar navigation
  • For a purely icon-driven navigation
  • For buttons to help convey the meaning of an action
  • With links to share context on a user's destination

Essentially, anywhere you can put an <i> tag, you can put an icon.

Examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Icon sets

Default icon set has gray style suitable for white and light backgrounds, but a number of functional classes can be applied for different icon color styles. These classes include a 5-color (blue, green, red, yellow and gray) .icon-color class, a black .icon-black class, a white .icon-white class, and a dark-gray .icon-darkgray class.

Note: place your cursor on the chosen icon image to see its class.

Default Icon Sets

Default icon classes .icon or .icon32 are best suitable for white and light backgrounds.

16x16 pixels icon set

Set .icon class for 16x16 pixels icon followed by a class corresponding to the chosen image.

<span class="icon icon-home"/>

32x32 pixels icon set

Set .icon32 class for 32x32 pixels icon followed by a class corresponding to the chosen image.

<span class="icon32 icon-user"/>

Special class for the whole section

To use gray icon set for the whole section set .icons-gray class on the parent element.

<div class="icons-gray">
	<span class="icon icon-add"/>
	<span class="icon icon-remove"/>
</div>
											

Dark-gray Icon Sets

Dark-gray icon sets are used for default :hover effect. The .icon-darkgray class should be used for the icons on light and middle gray backgrounds.

16x16 pixels icon set

Set .icon class for 16x16 pixels icon, then .icon-darkgray class for color and a class corresponding to the chosen image.

<span class="icon icon-darkgray icon-add"/>

32x32 pixels icon set

Set .icon32 class for 32x32 pixels icon, then .icon-darkgray class for color and a class corresponding to the chosen image.

<span class="icon32 icon-darkgray icon-remove"/>

Special class for the whole section

To use dark-gray icon set for the whole section set .icons-darkgray class on the parent element.

<div class="icons-darkgray">
	<span class="icon icon-add"/>
	<span class="icon icon-remove"/>
</div>

Color Icon Sets

Color icon sets are used for default .active icon effect. The .icon-color class should be used for the icons on white and light backgrounds.

16x16 pixels icon set

Set .icon class for 16x16 pixels icon, then .icon-color class for color and a class corresponding to the chosen image.

<span class="icon icon-color icon-triangle-n"/>

32x32 pixels icon set

Set .icon32 class for 32x32 pixels icon, then .icon-color class for color and a class corresponding to the chosen image.

<span class="icon32 icon-color icon-triangle-s"/>

Special class for the whole section

To use color icon set for the whole section set .icons-color class on the parent element.

<div class="icons-color">
	<span class="icon icon-triangle-n"/>
	<span class="icon icon-triangle-s"/>
</div>

Black Icon Sets

The .icon-black class could be used for the icons on light and middle gray backgrounds.

16x16 pixels icon set

Set .icon class for 16x16 pixels icon, then .icon-black class for color and a class corresponding to the chosen image.

<span class="icon icon-black icon-folder-open"/>

32x32 pixels icon set

Set .icon32 class for 32x32 pixels icon, then .icon-black class for color and a class corresponding to the chosen image.

<span class="icon32 icon-black icon-folder-collapsed"/>

Special class for the whole section

To use black icon set for the whole section set .icons-black class on the parent element.

<div class="icons-black">
	<span class="icon icon-folder-open"/>
	<span class="icon icon-folder-collapsed"/>
</div>

White Icon Sets

The .icon-white class should be used for the icons on vivid and dark backgrounds.

16x16 pixels icon set

Set .icon class for 16x16 pixels icon, then .icon-white class for color and a class corresponding to the chosen image.

<span class="icon icon-white icon-bullet-on"/>

32x32 pixels icon set

Set .icon32 class for 32x32 pixels icon, then .icon-white class for color and a class corresponding to the chosen image.

<span class="icon32 icon-white icon-bullet-off"/>

Special class for the whole section

To use white icon set for the whole section set .icons-white class on the parent element.

<div class="icons-white">
	<span class="icon icon-bullet-on"/>
	<span class="icon icon-bullet-off"/>
</div>

Blue Icon Sets

The .icon-blue class could be used for the icons on light or dark backgrounds.

16x16 pixels icon set

Set .icon class for 16x16 pixels icon, then .icon-blue class for color and a class corresponding to the chosen image.

<span class="icon icon-blue icon-carat-1-n"/>

32x32 pixels icon set

Set .icon32 class for 32x32 pixels icon, then .icon-blue class for color and a class corresponding to the chosen image.

<span class="icon32 icon-blue icon-carat-1-s"/>

Special class for the whole section

To use blue icon set for the whole section set .icons-blue class on the parent element.

<div class="icons-blue">
	<span class="icon icon-carat-1-n"/>
	<span class="icon icon-carat-1-s"/>
</div>

Green Icon Sets

The .icon-green class could be used for the icons on light or dark backgrounds.

16x16 pixels icon set

Set .icon class for 16x16 pixels icon, then .icon-green class for color and a class corresponding to the chosen image.

<span class="icon icon-green icon-arrow-e"/>

32x32 pixels icon set

Set .icon32 class for 32x32 pixels icon, then .icon-green class for color and a class corresponding to the chosen image.

<span class="icon32 icon-green icon-arrow-w"/>

Special class for the whole section

To use green icon set for the whole section set .icons-green class on the parent element.

<div class="icons-green">
	<span class="icon icon-arrow-e"/>
	<span class="icon icon-arrow-w"/>
</div>

Red Icon Sets

The .icon-red class could be used for the icons on light or dark backgrounds.

16x16 pixels icon set

Set .icon class for 16x16 pixels icon, then .icon-red class for color and a class corresponding to the chosen image.

<span class="icon icon-red icon-arrowthick-ne"/>

32x32 pixels icon set

Set .icon32 class for 32x32 pixels icon, then .icon-red class for color and a class corresponding to the chosen image.

<span class="icon32 icon-red icon-arrowthick-sw"/>

Special class for the whole section

To use red icon set for the whole section set .icons-red class on the parent element.

<div class="icons-red">
	<span class="icon icon-arrowthick-ne"/>
	<span class="icon icon-arrowthick-sw"/>
</div>

Orange Icon Sets

The .icon-orange class could be used for the icons on light or dark backgrounds.

16x16 pixels icon set

Set .icon class for 16x16 pixels icon, then .icon-orange class for color and a class corresponding to the chosen image.

<span class="icon icon-orange icon-undo"/>

32x32 pixels icon set

Set .icon32 class for 32x32 pixels icon, then .icon-orange class for color and a class corresponding to the chosen image.

<span class="icon32 icon-orange icon-redo"/>

Special class for the whole section

To use orange icon set for the whole section set .icons-orange class on the parent element.

<div class="icons-orange">
	<span class="icon icon-undo"/>
	<span class="icon icon-redo"/>
</div>