Digital pattern library

Glyphicons (deprecated)

This pattern is depreciated. Do not attempt to use this pattern for any new website development. It will be removed in a future update.

Use glyphicon icons to accent elements on web pages and web applications. See below for examples and the list of approved icons.

Rules for glyphicons

You may use any of the approved icons with <span class="glyphicon glyphicon-search" aria-hidden="true"></span>. See the Bootstrap glyphicon section for more ways to configure the icons.

Use of non-approved icons

If you would like to use an icon that is not on the approved list (below) please contact the digital communications team.

Options available


Examples

Examples of how we are using some of these icons.

Code
<div class="row">
    <div class="col-md-4">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
</div>

Approved icons

To use as a class name, prefix the icon name with glyphicon-, e.g. glyphicon-search.

  • glyphicon-asterisk
  • glyphicon-plus
  • glyphicon-euro
  • glyphicon-minus
  • glyphicon-cloud
  • glyphicon-envelope
  • glyphicon-pencil
  • glyphicon-music
  • glyphicon-search
  • glyphicon-heart
  • glyphicon-star
  • glyphicon-user
  • glyphicon-film
  • glyphicon-th-large
  • glyphicon-th
  • glyphicon-th-list
  • glyphicon-ok
  • glyphicon-remove
  • glyphicon-zoom-in
  • glyphicon-zoom-out
  • glyphicon-off
  • glyphicon-signal
  • glyphicon-cog
  • glyphicon-trash
  • glyphicon-home
  • glyphicon-file
  • glyphicon-time
  • glyphicon-download-alt
  • glyphicon-download
  • glyphicon-upload
  • glyphicon-inbox
  • glyphicon-play-circle
  • glyphicon-repeat
  • glyphicon-refresh
  • glyphicon-list-alt
  • glyphicon-lock
  • glyphicon-flag
  • glyphicon-headphones
  • glyphicon-volume-off
  • glyphicon-volume-down
  • glyphicon-volume-up
  • glyphicon-qrcode
  • glyphicon-barcode
  • glyphicon-tag
  • glyphicon-tags
  • glyphicon-book
  • glyphicon-bookmark
  • glyphicon-print
  • glyphicon-camera
  • glyphicon-font
  • glyphicon-bold
  • glyphicon-italic
  • glyphicon-text-height
  • glyphicon-text-width
  • glyphicon-align-left
  • glyphicon-align-center
  • glyphicon-align-right
  • glyphicon-align-justify
  • glyphicon-list
  • glyphicon-indent-left
  • glyphicon-indent-right
  • glyphicon-facetime-video
  • glyphicon-picture
  • glyphicon-map-marker
  • glyphicon-edit
  • glyphicon-share
  • glyphicon-check
  • glyphicon-move
  • glyphicon-chevron-left
  • glyphicon-chevron-right
  • glyphicon-plus-sign
  • glyphicon-minus-sign
  • glyphicon-remove-sign
  • glyphicon-ok-sign
  • glyphicon-question-sign
  • glyphicon-info-sign
  • glyphicon-remove-circle
  • glyphicon-ok-circle
  • glyphicon-ban-circle
  • glyphicon-arrow-left
  • glyphicon-arrow-right
  • glyphicon-arrow-up
  • glyphicon-arrow-down
  • glyphicon-share-alt
  • glyphicon-resize-full
  • glyphicon-resize-small
  • glyphicon-exclamation-sign
  • glyphicon-calendar
  • glyphicon-random
  • glyphicon-comment
  • glyphicon-magnet
  • glyphicon-chevron-up
  • glyphicon-chevron-down
  • glyphicon-retweet
  • glyphicon-shopping-cart
  • glyphicon-folder-open
  • glyphicon-resize-vertical
  • glyphicon-resize-horizontal
  • glyphicon-bell
  • glyphicon-tasks
  • glyphicon-filter
  • glyphicon-fullscreen
  • glyphicon-dashboard
  • glyphicon-paperclip
  • glyphicon-heart-empty
  • glyphicon-link
  • glyphicon-phone
  • glyphicon-pushpin
  • glyphicon-usd
  • glyphicon-gbp
  • glyphicon-sort
  • glyphicon-sort-by-alphabet
  • glyphicon-sort-by-alphabet-alt
  • glyphicon-sort-by-order
  • glyphicon-sort-by-order-alt
  • glyphicon-sort-by-attributes
  • glyphicon-sort-by-attributes-alt
  • glyphicon-log-in
  • glyphicon-log-out
  • glyphicon-new-window
  • glyphicon-record
  • glyphicon-send
  • glyphicon-floppy-disk
  • glyphicon-floppy-saved
  • glyphicon-floppy-remove
  • glyphicon-stats
  • glyphicon-subtitles
  • glyphicon-cloud-download
  • glyphicon-cloud-upload
Code
<div class="bs-glyphicons">
    <div class="row">
        <ul class="bs-glyphicons-list">
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-asterisk</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-plus</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-euro</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-minus</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-cloud</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-envelope</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-pencil</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-music" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-music</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-search</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-heart</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-star</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-user</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-film" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-film</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-th-large</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-th</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-th-list</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-ok</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-remove</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-zoom-in</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-zoom-out</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-off</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-signal</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-cog</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-trash</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-home</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-file</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-time</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-download-alt</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-download</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-upload</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-inbox</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-play-circle</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-repeat</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-refresh</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-list-alt</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-lock</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-flag</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-headphones</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-volume-off</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-volume-down" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-volume-down</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-volume-up</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-qrcode</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-barcode</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-tag</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-tags</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-book</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-bookmark</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-print" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-print</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-camera</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-font" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-font</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-bold" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-bold</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-italic" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-italic</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-text-height" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-text-height</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-text-width</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-align-left</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-align-center</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-align-right</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-align-justify</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-list</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-indent-left" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-indent-left</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-indent-right" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-indent-right</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-facetime-video</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-picture</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-map-marker</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-edit</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-share" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-share</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-check" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-check</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-move</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-chevron-left</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-chevron-right</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-plus-sign</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-minus-sign</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-remove-sign</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-ok-sign</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-question-sign</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-info-sign</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-remove-circle</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-ok-circle</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-ban-circle</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-arrow-left</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-arrow-right</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-arrow-up</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-arrow-down</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-share-alt</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-resize-full</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-resize-small</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-exclamation-sign</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-calendar</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-random" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-random</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-comment</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-magnet" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-magnet</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-chevron-up</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-chevron-down</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-retweet" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-retweet</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-shopping-cart</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-folder-open</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-resize-vertical</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-resize-horizontal</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-bell</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-tasks</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-filter</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-fullscreen</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-dashboard</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-paperclip</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-heart-empty</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-link</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-phone</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-pushpin</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-usd" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-usd</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-gbp" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-gbp</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-sort" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-sort</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-sort-by-alphabet" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-sort-by-alphabet</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-sort-by-alphabet-alt</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-sort-by-order" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-sort-by-order</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-sort-by-order-alt" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-sort-by-order-alt</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-sort-by-attributes</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-sort-by-attributes-alt</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-log-in</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-log-out</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-new-window</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-record</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-send" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-send</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-floppy-disk</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-floppy-saved" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-floppy-saved</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-floppy-remove</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-stats</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-subtitles" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-subtitles</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-cloud-download</span>
            </li>
            <li class="col-md-3 col-sm-4">
                <span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>
                <span class="glyphicon-class">glyphicon-cloud-upload</span>
            </li>
        </ul>
    </div>
</div>