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>