Overview
A selection of SVG icons are available here in the design system and you can use them by adding the helper class of the icon you need. Check below how you can install the icons in your project and also some examples/code snippets.
Install
NPM
Install the Design System icons via NPM.
npm install @visma-spcs-registry/designsystem-icons
**$vud-icons-path - You need to change this value to match the folder structure you have (eg. '~node_modules/@visma-spcs-registry/designsystem-icons/dist/img/spirisicons' !default;)
CDN
Icons are currently NOT available through CDN.
How to
Styles
You can include in your interface any icon from our icon library. All you need to do is to add <span> .spirisicon class and another class that represents the icon that you need, example .spirisicon-edit. You can find more examples below.
Regular icon
spirisicon spirisicon-handshake
Informative icon
spirisicon spirisicon-filled spirisicon-error
Functions
spirisicon spirisicon-filled spirisicon-payroll-functional
Flags
spirisicon spirisicon-flags spirisicon-sweden
<ul class ="doc-spirisicons-list" >
<li >
<p class ="bold" > Regular icon</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-handshake" > </span >
<span > spirisicon spirisicon-handshake</span >
</li >
<li >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-filled spirisicon-error" > </span >
<span > spirisicon spirisicon-filled spirisicon-error</span >
</li >
<li >
<p class ="bold" > Functions</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-filled spirisicon-payroll-functional" > </span >
<span > spirisicon spirisicon-filled spirisicon-payroll-functional</span >
</li >
<li >
<p class ="bold" > Flags</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-flags spirisicon-sweden" > </span >
<span > spirisicon spirisicon-flags spirisicon-sweden</span >
</li >
</ul >
Color variant
By adding icon color helper clases, to .spirisicon wrapper, You can change the default spiris-icon color.
.icon-neutral
spirisicon spirisicon-handshake icon-neutral
.icon-info
spirisicon spirisicon-handshake icon-info
.icon-success
spirisicon spirisicon-handshake icon-success
.icon-warning
spirisicon spirisicon-handshake icon-warning
.icon-error
spirisicon spirisicon-handshake icon-error
<ul class ="doc-spirisicons-list" >
<li >
<p > <code class ="font-14" > .icon-neutral</code > </p >
<span aria-hidden ="true" class ="spirisicon spirisicon-handshake icon-neutral" > </span >
<span class ="spirisicon-class" > spirisicon spirisicon-handshake icon-neutral</span >
</li >
<li >
<p > <code class ="font-14" > .icon-info</code > </p >
<span aria-hidden ="true" class ="spirisicon spirisicon-handshake icon-info" > </span >
<span class ="spirisicon-class" > spirisicon spirisicon-handshake icon-info</span >
</li >
<li >
<p > <code class ="font-14" > .icon-success</code > </p >
<span aria-hidden ="true" class ="spirisicon spirisicon-handshake icon-success" > </span >
<span class ="spirisicon-class" > spirisicon spirisicon-handshake icon-success</span >
</li >
<li >
<p > <code class ="font-14" > .icon-warning</code > </p >
<span aria-hidden ="true" class ="spirisicon spirisicon-handshake icon-warning" > </span >
<span class ="spirisicon-class" > spirisicon spirisicon-handshake icon-warning</span >
</li >
<li >
<p > <code class ="font-14" > .icon-error</code > </p >
<span aria-hidden ="true" class ="spirisicon spirisicon-handshake icon-error" > </span >
<span class ="spirisicon-class" > spirisicon spirisicon-handshake icon-error</span >
</li >
</ul >
Sizes
The small size of the icons is 16px X 16px. For this you need to add an additional class: .spirisicon-sm
There are also larger sizes, 32px, 48px, 64px for all icons.
Small - .spirisicon-sm
Regular icon
spirisicon spirisicon-sm spirisicon-handshake
Informative icon
spirisicon spirisicon-filled spirisicon-sm spirisicon-error
Functions
spirisicon spirisicon-filled spirisicon-sm spirisicon-payroll-functional
Flags
spirisicon spirisicon-flags spirisicon-sm spirisicon-sweden
<ul class ="doc-spirisicons-list" >
<li >
<p class ="bold" > Regular icon</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-sm spirisicon-handshake" > </span >
<span > spirisicon spirisicon-sm spirisicon-handshake</span >
</li >
<li >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-filled spirisicon-sm spirisicon-error" > </span >
<span > spirisicon spirisicon-filled spirisicon-sm spirisicon-error</span >
</li >
<li >
<p class ="bold" > Functions</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-filled spirisicon-sm spirisicon-payroll-functional" > </span >
<span > spirisicon spirisicon-filled spirisicon-sm spirisicon-payroll-functional</span >
</li >
<li >
<p class ="bold" > Flags</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-flags spirisicon-sm spirisicon-sweden" > </span >
<span > spirisicon spirisicon-flags spirisicon-sm spirisicon-sweden</span >
</li >
</ul >
Default size
Large - .spirisicon-lg
X-Large - .spirisicon-xl
XX-Large - .spirisicon-xxl
Informative icons in all sizes
Informative icon sm
spirisicon
Informative icon
spirisicon
Informative icon lg
spirisicon
Informative icon xl
spirisicon
Informative icon xxl
spirisicon
<ul class ="doc-spirisicons-list" >
<li style ="max-width: 25%" >
<p class ="bold" > Informative icon sm</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-sm spirisicon-filled spirisicon-error" > </span >
<span > spirisicon<br > spirisicon-sm<br > spirisicon-filled<br > spirisicon-error</span >
</li >
<li style ="max-width: 25%" >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-filled spirisicon-error" > </span >
<span > spirisicon<br > spirisicon-filled<br > spirisicon-error</span >
</li >
<li style ="max-width: 25%" >
<p class ="bold" > Informative icon lg</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-lg spirisicon-filled spirisicon-error" > </span >
<span > spirisicon<br > spirisicon-lg<br > spirisicon-filled<br > spirisicon-error</span >
</li >
<li style ="max-width: 25%" >
<p class ="bold" > Informative icon xl</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-xl spirisicon-filled spirisicon-error" > </span >
<span > spirisicon<br > spirisicon-xl<br > spirisicon-filled<br > spirisicon-error</span >
</li >
<li style ="max-width: 25%" >
<p class ="bold" > Informative icon xxl</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-xxl spirisicon-filled spirisicon-error" > </span >
<span > spirisicon<br > spirisicon-xxl<br > spirisicon-filled<br > spirisicon-error</span >
</li >
</ul >
States
Disabled state
For the disabled version of the icons, simply use .disabled class, like in the examples below.
Note that only regular icons can have a disabled state. All other icons will look the same regardless of the disabled class.
Regular icon
spirisicon spirisicon-handshake disabled
Informative icon
spirisicon spirisicon-filled spirisicon-error disabled
Functions
spirisicon spirisicon-filled spirisicon-payroll-functional disabled
Flags
spirisicon spirisicon-flags spirisicon-sweden disabled
<ul class ="doc-spirisicons-list" >
<li >
<p class ="bold" > Regular icon</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-handshake disabled" > </span >
<span > spirisicon spirisicon-handshake disabled</span >
</li >
<li >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-filled spirisicon-error disabled" > </span >
<span > spirisicon spirisicon-filled spirisicon-error disabled</span >
</li >
<li >
<p class ="bold" > Functions</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-filled spirisicon-payroll-functional disabled" > </span >
<span > spirisicon spirisicon-filled spirisicon-payroll-functional disabled</span >
</li >
<li >
<p class ="bold" > Flags</p >
<span aria-hidden ="true" class ="spirisicon spirisicon-flags spirisicon-sweden disabled" > </span >
<span > spirisicon spirisicon-flags spirisicon-sweden disabled</span >
</li >
</ul >
