Icons
The CSS library includes the planet DS icon set by default. The icon set is generated using fontello and follows the same icon conventions as the fontawesome
The class names for the icons are organised into a number of icon sets. These classes are aliases for the core icon names as some of the icons are reused accross the icon sub-sets. It is important that the developer uses the alias instead of the core class name for the icon while doing development in case the design team wishes to swap out an icon for a particular button type at a later stage.
Icon Usage
Icons should be used with the classic font-awesome style with a fa class followed by the icon alias from the list below.
<button type="button" class="btn btn-primary"><i class="fa fa-lg function-save"></i> icon button</button>Icon Sets
Functional icons
function-save
function-apply
function-disable
function-reset
function-cancel
function-add
function-search
function-filter
function-activate
function-reactivate
function-deactivate
function-issue-a-form
function-merge-tags
function-merge-tags
function-export-validation
function-print
function-reassign
function-add-comment
function-move-back
function-move-next
function-close
function-decline
function-export
function-import
function-valid
function-void
function-delete
function-refresh
function-sum
function-helpline
function-download
function-upload
function-user
function-user-add
function-scan-code
function-scan
function-options
function-edit
function-resend
function-history
function-login
function-logout
function-suspend
function-brand
function-change
function-product-add
function-advenced-search
function-external-link
function-copy
function-settings
function-drag-and-drop
function-add-square
function-sub-field
function-collapse
function-expand
function-relocate-up
function-relocate-down
function-preview
function-message
function-message
function-calendar
function-calendar-clock
function-clock
function-clear
function-globe
function-locked
function-unlocked
function-share
function-file-upload
function-point
function-language
function-help
function-zoom-in
function-zoom-out
function-notification
function-inbox
function-inbox-in
function-inbox-out
function-link
function-move
function-yes
function-no
function-cash
function-gift-card
function-keyboard-delete
function-keyboard-shift
function-keyboard-caps
function-keyboard-space
function-view-list
function-document
function-devices
function-add-new-contract
function-details
function-manager
function-terminate
function-location
function-contract
function-invoice
function-port
function-airport-airside
function-airport-landside
function-hotel
function-in-store
function-shopping-center
function-add-inline
function-credit-card
function-scanner
function-discount
function-layout
function-retail-group
function-head-office
function-store
function-contact-user
function-exit
function-editable-by-user
Status icons
status-active
status-inactive
status-suspended
status-terminated
status-paid
status-error
status-blocked
Mood icons
mood-vsad
mood-sad
mood-neutral
mood-fine
mood-happy
Notification icons
notification-success
notification-warning
notification-info
notification-error
notification-neutral
notification-question
Animated icons
Should be used with the fa-spin class as per fontawesome documentation.
animation-loader-arc
animation-loader-circle
Combine icons with icon stacking
In certain cases, two color icons can be created with icon stacking as per fontawesome documentation.
Flag icons
The design system includes a set of country and currency flags that can be used by specifying the country/currency code at the end of the icon class.
Countries
Curencies