Icons
SVG Icons
Directional
arrow-down
arrow-left
arrow-right
arrow-up
arrow-up-down
arrow-left-right
chevron-down
chevron-left
chevron-right
chevron-up
chevron-up-down
chevron-left-right
triangle-down
triangle-left
triangle-right
triangle-up
triangle-up-down
triangle-left-right
Functional
plus
checkmark
cross
grilling-kebab
hamburger
kebab
redo
refresh
search
Text formatting
bold
bullet-point
clippie
italic
ordered-list
Graphs
bar-chart
dot-graph
gantt-chart
line-chart
pie-chart
activity
add
archive
attention
bell
briefcase
calendar
clipboard
clock
cloud
cog
discussion
document
documents
download
edit
expand
eye
filter
flag
folder
folders
info
invalid
lock
mail-in
mail-out
mail-read
mail
minus
new-message
pause
phone
receipt
rocket
sand-clock
send
share
sign-in
sign-out
speech-bubble
tag
trash
upload
user-accept
user-add
user-assign
user-group
user-promote
user-remove
user
valid
zoom-in
zoom-out
How to use
All SVG icons are unified under one single SVG sprite called stis-master.svg. To render an icon, we use the HTML tag use. Default CSS class for these icons is icon-svg, which renders a 16px icon. Add class medium or large for bigger sizes (32px and 48px respectively). Example below:
<svg class="icon-svg">
<use xlink:href="/icons/stis-master.svg#icon-..."></use>
</svg>
Icon Font Old
-user
-user-add
-user-accept
-user-remove
-user-promote
-user-assigned
-group
-add
-checkmark
-close
-search
-filter
-flag
-sign-in
-sign-out
-speech-bubble
-clock
-calendar
-cloud
-download
-upload
-hamburger
-kebab
-grilling-kebab
-attention
-trash
-tag
-share
-edit
-send
-mail
-valid
-activity
-discussion
-document
-folder
-multi-folder
-task
-bell
-cog
-info
-bar-chart
-gantt-chart
-line-chart
-pie-chart
-down-pointer
-left-pointer
-right-pointer
-up-pointer
-lock
-receipt
-waiting
-attachment
-bold
-italic
-bullet-point
-ordered-list
-expand
-indent
-outdent
-redo
-refresh
How to use
<i class="icon -lock"></i>
Notice:
For icons to be crisp, it is recommended (but not mandatory) to display icons at either 17px or 34px
Also the @mixin icon takes a font-weight as a parameter. If no weight is specified, the default one will be normal
.icon {
@include icon(bold);
}