Glyphicons

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

• 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

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. 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. We will specifically enforce this class on hover and active states for nav and dropdown links.

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

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.

Icon examples

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

Buttons

Button group in a button toolbar

<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>

Dropdown in a button group

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

Button sizes

<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

Navigation

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Form fields

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>