SVG Icons


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


plus checkmark cross grilling-kebab hamburger kebab redo refresh search

Text formatting

bold bullet-point clippie italic ordered-list


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>
Icon Font Old
-user -user-add -user-accept -user-remove -user-promote -user-assigned -group -add -checkmark -close -search -filter -flag -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>

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);