Icons
There are a number of icons that can be used by including the icon font. To use the icons, create an element with the following markup:
<span class="lui-icon lui-icon--play" aria-hidden="true"></span>
Standard icons
lui-icon
lui-icon--image
lui-icon
lui-icon--back
lui-icon
lui-icon--forward
lui-icon
lui-icon--history
lui-icon
lui-icon--help
lui-icon
lui-icon--info
lui-icon
lui-icon--toggle-left
lui-icon
lui-icon--toggle-right
lui-icon
lui-icon--text
lui-icon
lui-icon--group
lui-icon
lui-icon--search
lui-icon
lui-icon--zoom-in
lui-icon
lui-icon--zoom-out
lui-icon
lui-icon--export
lui-icon
lui-icon--import
lui-icon
lui-icon--field
lui-icon
lui-icon--lock
lui-icon
lui-icon--unlock
lui-icon
lui-icon--database
lui-icon
lui-icon--calendar
lui-icon
lui-icon--bookmark
lui-icon
lui-icon--library
lui-icon
lui-icon--star
lui-icon
lui-icon--print
lui-icon
lui-icon--remove
lui-icon
lui-icon--handle
lui-icon
lui-icon--handle-horizontal
lui-icon
lui-icon--menu
lui-icon
lui-icon--list
lui-icon
lui-icon--unordered-list
lui-icon
lui-icon--clock
lui-icon
lui-icon--puzzle
lui-icon
lui-icon--table
lui-icon
lui-icon--filterpane
lui-icon
lui-icon--plus
lui-icon
lui-icon--minus
lui-icon
lui-icon--triangle-top
lui-icon
lui-icon--triangle-bottom
lui-icon
lui-icon--triangle-left
lui-icon
lui-icon--triangle-right
lui-icon
lui-icon--tick
lui-icon
lui-icon--cogwheel
lui-icon
lui-icon--settings
lui-icon
lui-icon--cut
lui-icon
lui-icon--copy
lui-icon
lui-icon--paste
lui-icon
lui-icon--align-left
lui-icon
lui-icon--align-center
lui-icon
lui-icon--align-right
lui-icon
lui-icon--bold
lui-icon
lui-icon--italic
lui-icon
lui-icon--underline
lui-icon
lui-icon--camera
lui-icon
lui-icon--slide-show
lui-icon
lui-icon--palette
lui-icon
lui-icon--shapes
lui-icon
lui-icon--effects
lui-icon
lui-icon--file
lui-icon
lui-icon--expand
lui-icon
lui-icon--collapse
lui-icon
lui-icon--bin
lui-icon
lui-icon--link
lui-icon
lui-icon--pivot
lui-icon
lui-icon--reload
lui-icon
lui-icon--add
lui-icon
lui-icon--edit
lui-icon
lui-icon--lasso
lui-icon
lui-icon--key
lui-icon
lui-icon--box
lui-icon
lui-icon--home
lui-icon
lui-icon--person
lui-icon
lui-icon--stream
lui-icon
lui-icon--grid
lui-icon
lui-icon--cloud
lui-icon
lui-icon--more
lui-icon
lui-icon--folder
lui-icon
lui-icon--toggle-bottom
lui-icon
lui-icon--drop
lui-icon
lui-icon--play
lui-icon
lui-icon--tag
lui-icon
lui-icon--close
lui-icon
lui-icon--warning
lui-icon
lui-icon--warning-triangle
lui-icon
lui-icon--share
lui-icon
lui-icon--top
lui-icon
lui-icon--low-resolution
lui-icon
lui-icon--high-resolution
lui-icon
lui-icon--view
lui-icon
lui-icon--control
lui-icon
lui-icon--code
lui-icon
lui-icon--upload
lui-icon
lui-icon--repair
lui-icon
lui-icon--split
lui-icon
lui-icon--up-down
lui-icon
lui-icon--disconnect
lui-icon
lui-icon--photo-library
lui-icon
lui-icon--application
lui-icon
lui-icon--new-tab
lui-icon
lui-icon--ascending
lui-icon
lui-icon--descending
lui-icon
lui-icon--arrow-up
lui-icon
lui-icon--arrow-down
lui-icon
lui-icon--arrow-right
lui-icon
lui-icon--arrow-left
lui-icon
lui-icon--sync
lui-icon
lui-icon--draggable
lui-icon
lui-icon--book
lui-icon
lui-icon--measure
lui-icon
lui-icon--download
lui-icon
lui-icon--more-rounded
lui-icon
lui-icon--align-object-left
lui-icon
lui-icon--align-object-center
lui-icon
lui-icon--align-object-right
lui-icon
lui-icon--submit
lui-icon
lui-icon--operators
lui-icon
lui-icon--general-data-class
lui-icon
lui-icon--building
lui-icon
lui-icon--bell
lui-icon
lui-icon--unlink
lui-icon
lui-icon--lightbulb
lui-icon
lui-icon--log-in
lui-icon
lui-icon--log-out
lui-icon
lui-icon--previous
lui-icon
lui-icon--goto
lui-icon
lui-icon--save
lui-icon
lui-icon--run
lui-icon
lui-icon--pause
lui-icon
lui-icon--stop
lui-icon
lui-icon--step-in
lui-icon
lui-icon--comment
lui-icon
lui-icon--indent
lui-icon
lui-icon--undent
lui-icon
lui-icon--filter
lui-icon
lui-icon--clear-filter
lui-icon
lui-icon--insert
lui-icon
lui-icon--direction-left
lui-icon
lui-icon--swap
lui-icon
lui-icon--bubbles
Analytics icons
lui-icon
lui-icon--sheet
lui-icon
lui-icon--object
lui-icon
lui-icon--clear-selections
lui-icon
lui-icon--selections-tool
lui-icon
lui-icon--selections-reload
lui-icon
lui-icon--selections-back
lui-icon
lui-icon--selections-forward
lui-icon
lui-icon--expression
lui-icon
lui-icon--select-alternative
lui-icon
lui-icon--select-possible
lui-icon
lui-icon--select-excluded
lui-icon
lui-icon--select-all
lui-icon
lui-icon--bar-chart
lui-icon
lui-icon--bar-chart-horizontal
lui-icon
lui-icon--clock
lui-icon
lui-icon--line-chart
lui-icon
lui-icon--pie-chart
lui-icon
lui-icon--gauge-chart
lui-icon
lui-icon--kpi
lui-icon
lui-icon--scatter-chart
lui-icon
lui-icon--map
lui-icon
lui-icon--table
lui-icon
lui-icon--pivot-table
lui-icon
lui-icon--filterpane
lui-icon
lui-icon--treemap
lui-icon
lui-icon--combo-chart
lui-icon
lui-icon--boxplot
lui-icon
lui-icon--distributionplot
lui-icon
lui-icon--histogram
lui-icon
lui-icon--direct-discovery
lui-icon
lui-icon--data-model
lui-icon
lui-icon--script
lui-icon
lui-icon--run-script
lui-icon
lui-icon--script-ok
lui-icon
lui-icon--debug
lui-icon
lui-icon--associate
lui-icon
lui-icon--break-association
lui-icon
lui-icon--auto-layout
Icon sizing
Control the size of icons by adding a class. The following sizing options are available:
- small - 12px
- (default) - 16px
- large - 20px
<span class="lui-icon lui-icon--large lui-icon--play"></span>
<span class="lui-icon lui-icon--play"></span>
<span class="lui-icon lui-icon--small lui-icon--play"></span>
Using another icon font
You can use other icon fonts, like for example Font Awsome, where icons are used. Just replace the "lui-icon" classes. Note that some components like search and checkbox will need additional overrides.
For example:
<button class="lui-button">
<span class="lui-button__icon lui-icon lui-icon--play"></span>
</button>
with:
<button class="lui-button">
<span class="lui-button__icon fa fa-camera-retro fa-lg"></span>
</button>