Icons

##### Icon Library

gd-agenda

gd-alarm-clock

gd-alert

gd-align-center

gd-align-justify

gd-align-left

gd-align-right

gd-anchor

gd-android

gd-angle-double-down

gd-angle-double-left

gd-angle-double-right

gd-angle-double-up

gd-angle-down

gd-angle-left

gd-angle-right

gd-angle-up

gd-announcement

gd-apple

gd-archive

gd-arrow-circle-down

gd-arrow-circle-left

gd-arrow-circle-right

gd-arrow-circle-up

gd-arrow-down

gd-arrow-left

gd-arrow-right

gd-arrow-top-left

gd-arrow-top-right

gd-arrow-up

gd-arrow

gd-arrows-corner

gd-arrows-horizontal

gd-arrows-vertical

gd-back-left

gd-back-right

gd-bag

gd-bar-chart-alt

gd-bar-chart

gd-basketball

gd-bell

gd-blackboard

gd-bolt-alt

gd-bolt

gd-book

gd-bookmark-alt

gd-bookmark

gd-briefcase

gd-brush-alt

gd-brush

gd-calendar

gd-camera

gd-car

gd-check-box

gd-check

gd-clip

gd-clipboard

gd-close

gd-cloud-down

gd-cloud-up

gd-cloud

gd-comment-alt

gd-comment

gd-comments-smiley

gd-comments

gd-control-backward

gd-control-eject

gd-control-forward

gd-control-pause

gd-control-play

gd-control-record

gd-control-shuffle

gd-control-skip-backward

gd-control-skip-forward

gd-control-stop

gd-credit-card

gd-crown

gd-css-3

gd-cup

gd-cut

gd-dashboard

gd-desktop

gd-direction-alt

gd-direction

gd-download

gd-dribbble

gd-dropbox-alt

gd-dropbox

gd-drupal

gd-email

gd-envelope

gd-eraser

gd-exchange-vertical

gd-export

gd-eye

gd-face-sad

gd-face-smile

gd-facebook

gd-file

gd-files

gd-filter

gd-flag-alt-2

gd-flag-alt

gd-flag

gd-flickr-alt

gd-flickr

gd-folder

gd-fullscreen

gd-gallery

gd-game

gd-gift

gd-github

gd-google

gd-hand-drag

gd-hand-open

gd-hand-point-down

gd-hand-point-left

gd-hand-point-right

gd-hand-point-up

gd-hand-stop

gd-harddrive

gd-harddrives

gd-headphone-alt

gd-headphone

gd-heart-broken

gd-heart

gd-help-alt

gd-help

gd-home

gd-html-5

gd-hummer

gd-id-badge

gd-image

gd-import

gd-infinite

gd-info-alt

gd-info

gd-ink-pen

gd-instagram

gd-italic

gd-joomla

gd-jsfiddle

gd-key

gd-layers-alt

gd-layers

gd-layout-accordion-list

gd-layout-accordion-merged

gd-layout-accordion-separated

gd-layout-column-2-alt

gd-layout-column-2

gd-layout-column-3-alt

gd-layout-column-3

gd-layout-column-4-alt

gd-layout-column-4

gd-layout-cta-btn-left

gd-layout-cta-btn-right

gd-layout-cta-center

gd-layout-cta-left

gd-layout-cta-right

gd-layout-grid-2-alt

gd-layout-grid-2

gd-layout-grid-3-alt

gd-layout-grid-3

gd-layout-grid-4-alt

gd-layout-grid-4

gd-layout-line-solid

gd-layout-list-large-image

gd-layout-list-post

gd-layout-list-thumb-alt

gd-layout-list-thumb

gd-layout-media-center-alt

gd-layout-media-center

gd-layout-media-left-alt

gd-layout-media-left

gd-layout-media-overlay-alt-2

gd-layout-media-overlay-alt

gd-layout-media-overlay

gd-layout-media-right-alt

gd-layout-media-right

gd-layout-menu-full

gd-layout-menu-separated

gd-layout-menu-v

gd-layout-menu

gd-layout-placeholder

gd-layout-sidebar-2

gd-layout-sidebar-left

gd-layout-sidebar-none

gd-layout-sidebar-right

gd-layout-slider-alt

gd-layout-slider

gd-layout-tab-min

gd-layout-tab-v

gd-layout-tab-window

gd-layout-tab

gd-layout-width-default-alt

gd-layout-width-default

gd-layout-width-full

gd-layout

gd-light-bulb

gd-line-dashed

gd-line-dotted

gd-line-double

gd-link

gd-linkedin

gd-linux

gd-list-ol

gd-list

gd-location-arrow

gd-location-pin

gd-lock

gd-loop

gd-magnet

gd-map-alt

gd-map

gd-marker-alt

gd-marker

gd-medall-alt

gd-medall

gd-menu-alt

gd-menu

gd-microphone-alt

gd-microphone

gd-microsoft-alt

gd-microsoft

gd-minus

gd-mobile

gd-money

gd-more-alt

gd-more

gd-mouse-alt

gd-mouse

gd-music-alt

gd-music

gd-na

gd-new-window

gd-notepad

gd-package

gd-paint-bucket

gd-paint-roller

gd-palette

gd-panel

gd-paragraph

gd-pencil-alt-2

gd-pencil-alt

gd-pencil

gd-pie-chart

gd-pin-2

gd-pin-alt

gd-pin

gd-pinterest-alt

gd-pinterest

gd-plug

gd-plus

gd-power-off

gd-printer

gd-pulse

gd-quote-left

gd-quote-right

gd-receipt

gd-reddit

gd-reload

gd-rocket

gd-rss-alt

gd-rss

gd-ruler-alt-2

gd-ruler-alt

gd-ruler-pencil

gd-ruler

gd-save-alt

gd-save

gd-search

gd-server

gd-settings

gd-share-alt

gd-share

gd-sharethis-alt

gd-sharethis

gd-shield

gd-shift-left-alt

gd-shift-left

gd-shift-right-alt

gd-shift-right

gd-shine

gd-shopping-cart-full

gd-shopping-cart

gd-shortcode

gd-signal

gd-skype

gd-slice

gd-smallcap

gd-soundcloud

gd-split-h

gd-split-v-alt

gd-split-v

gd-spray

gd-stack-overflow

gd-stamp

gd-star

gd-stats-down

gd-stats-up

gd-support

gd-tablet

gd-tag

gd-target

gd-text

gd-themify-favgd-alt

gd-themify-favicon

gd-themify-logo

gd-thought

gd-thumb-down

gd-ticket

gd-time

gd-timer

gd-trash

gd-trello

gd-truck

gd-tumblr-alt

gd-tumblr

gd-twitter-alt

gd-twitter

gd-underline

gd-unlink

gd-unlock

gd-upload

gd-uppercase

gd-user

gd-vector

gd-video-camera

gd-video-clapper

gd-view-grid

gd-view-list-alt

gd-view-list

gd-vimeo-alt

gd-vimeo

gd-volume

gd-wallet

gd-wand

gd-wheelchair

gd-widget-alt

gd-widget

gd-widgetized

gd-window

gd-wordpress

gd-world

gd-write

gd-yahoo

gd-youtube

gd-zip

gd-zoom-in

gd-zoom-out

##### Icon Styles

Use custom icon styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

## Examples

Graindashboard includes several predefined button styles, each serving its own semantic purpose.

    <i class="gd-bag text-primary"></i>
    <i class="gd-android text-secondary"></i>
    <i class="gd-bar-chart text-primary-darker"></i>
    <i class="gd-bell text-success"></i>
    <i class="gd-comment text-danger"></i>
    <i class="gd-flickr-alt text-light"></i>

    <div class="icon icon-lg bg-primary rounded-circle d-inline-block">
    <i class="gd-bag icon-text d-inline-block text-white"></i>
    </div>
    <div class="icon icon-lg bg-secondary rounded-circle d-inline-block">
    <i class="gd-android icon-text d-inline-block text-white"></i>
    </div>
    <div class="icon icon-lg bg-primary-darker rounded-circle d-inline-block">
    <i class="gd-bar-chart icon-text d-inline-block text-white"></i>
    </div>
    <div class="icon icon-lg bg-success rounded-circle d-inline-block">
    <i class="gd-bell icon-text d-inline-block text-white"></i>
    </div>
    <div class="icon icon-lg bg-danger rounded-circle d-inline-block">
    <i class="gd-comment icon-text d-inline-block text-white"></i>
    </div>
    <div class="icon icon-lg bg-light rounded-circle d-inline-block">
    <i class="gd-flickr-alt icon-text d-inline-block text-white"></i>
    </div>

## Soft icons

    <div class="icon icon-lg bg-soft-primary rounded-circle d-inline-block">
    <i class="gd-bag icon-text d-inline-block text-primary"></i>
    </div>
    <div class="icon icon-lg bg-soft-secondary rounded-circle d-inline-block">
    <i class="gd-android icon-text d-inline-block text-secondary"></i>
    </div>
    <div class="icon icon-lg bg-soft-primary-darker rounded-circle d-inline-block">
    <i class="gd-bar-chart icon-text d-inline-block text-primary-darker"></i>
    </div>
    <div class="icon icon-lg bg-soft-success rounded-circle d-inline-block">
    <i class="gd-bell icon-text d-inline-block text-success"></i>
    </div>
    <div class="icon icon-lg bg-soft-danger rounded-circle d-inline-block">
    <i class="gd-comment icon-text d-inline-block text-danger"></i>
    </div>
    <div class="icon icon-lg bg-soft-light rounded-circle d-inline-block">
    <i class="gd-flickr-alt icon-text d-inline-block text-light"></i>
    </div>

## Sizes

Fancy larger or smaller buttons? Add `.icon-xs`, `.icon-sm` or `.icon-lg` for additional sizes.

    <div class="icon icon-xs bg-primary rounded-circle d-inline-block">
    <i class="gd-bag icon-text icon-text-xs d-inline-block text-white"></i>
    </div>

    <div class="icon icon-sm bg-primary rounded-circle d-inline-block">
    <i class="gd-bag icon-text icon-text-sm d-inline-block text-white"></i>
    </div>

    <div class="icon bg-primary rounded-circle d-inline-block">
    <i class="gd-bag icon-text d-inline-block text-white"></i>
    </div>

    <div class="icon icon-lg bg-primary rounded-circle d-inline-block">
    <i class="gd-bag icon-text d-inline-block text-white"></i>
    </div>