Overview
A selection of SVG icons are available here in the design system (2 styles of icons: standard and dynamic ) 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/vismaicons' !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> .vismaicon class and another class that represents the icon that you need, example .vismaicon-edit. You can find more examples below.
Worksurface icon
vismaicon vismaicon-agreement
Action icon
vismaicon vismaicon-menu-circle
Informative icon
vismaicon vismaicon-filled vismaicon-error
Social media icon
vismaicon vismaicon-media vismaicon-google
<ul class ="doc-vismaicons-list" >
<li >
<p class ="bold" > Worksurface icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-agreement" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-agreement</span >
</li >
<li >
<p class ="bold" > Action icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-menu-circle" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-menu-circle</span >
</li >
<li >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-filled vismaicon-error" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-filled vismaicon-error</span >
</li >
<li >
<p class ="bold" > Social media icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-media vismaicon-google" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-media vismaicon-google</span >
</li >
</ul >
Worksurface icon
vismaicon vismaicon-dynamic vismaicon-agreement
Action icon
vismaicon vismaicon-dynamic vismaicon-menu-circle
Informative icon
vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error
Social media icon
vismaicon vismaicon-media vismaicon-google
<ul class ="doc-vismaicons-list" >
<li >
<p class ="bold" > Worksurface icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-agreement" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-agreement</span >
</li >
<li >
<p class ="bold" > Action icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-menu-circle" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-menu-circle</span >
</li >
<li >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error</span >
</li >
<li >
<p class ="bold" > Social media icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-media vismaicon-google" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-media vismaicon-google</span >
</li >
</ul >
Color variant
By adding icon color helper clases, to .vismaicon wrapper, You can change the default visma-icon color.
.icon-neutral
vismaicon vismaicon-agreement icon-neutral
.icon-info
vismaicon vismaicon-agreement icon-info
.icon-success
vismaicon vismaicon-agreement icon-success
.icon-warning
vismaicon vismaicon-agreement icon-warning
.icon-error
vismaicon vismaicon-agreement icon-error
<ul class ="doc-vismaicons-list" >
<li >
<p > <code class ="font-14" > .icon-neutral</code > </p >
<span aria-hidden ="true" class ="vismaicon vismaicon-agreement icon-neutral" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-agreement icon-neutral</span >
</li >
<li >
<p > <code class ="font-14" > .icon-info</code > </p >
<span aria-hidden ="true" class ="vismaicon vismaicon-agreement icon-info" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-agreement icon-info</span >
</li >
<li >
<p > <code class ="font-14" > .icon-success</code > </p >
<span aria-hidden ="true" class ="vismaicon vismaicon-agreement icon-success" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-agreement icon-success</span >
</li >
<li >
<p > <code class ="font-14" > .icon-warning</code > </p >
<span aria-hidden ="true" class ="vismaicon vismaicon-agreement icon-warning" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-agreement icon-warning</span >
</li >
<li >
<p > <code class ="font-14" > .icon-error</code > </p >
<span aria-hidden ="true" class ="vismaicon vismaicon-agreement icon-error" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-agreement 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: .vismaicon-sm
There is also a larger sizes, 50px X 50px, but it's available only for informative icons. For this size you need to add this class: .vismaicon-lg
Small - .vismaicon-sm
Standard
Worksurface icon
vismaicon vismaicon-sm vismaicon-agreement
Action icon
vismaicon vismaicon-sm vismaicon-menu-circle
Informative icon
vismaicon vismaicon-sm vismaicon-filled vismaicon-error
Social media icon
vismaicon vismaicon-sm vismaicon-media vismaicon-google
<ul class ="doc-vismaicons-list" >
<li >
<p class ="bold" > Worksurface icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-sm vismaicon-agreement" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-sm vismaicon-agreement</span >
</li >
<li >
<p class ="bold" > Action icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-sm vismaicon-menu-circle" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-sm vismaicon-menu-circle</span >
</li >
<li >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-sm vismaicon-filled vismaicon-error" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-sm vismaicon-filled vismaicon-error</span >
</li >
<li >
<p class ="bold" > Social media icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-sm vismaicon-media vismaicon-google" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-sm vismaicon-media vismaicon-google</span >
</li >
</ul >
Dynamic
Worksurface icon
vismaicon vismaicon-dynamic vismaicon-sm vismaicon-agreement
Action icon
vismaicon vismaicon-dynamic vismaicon-sm vismaicon-menu-circle
Informative icon
vismaicon vismaicon-dynamic vismaicon-sm vismaicon-filled vismaicon-error
Social media icon
vismaicon vismaicon-media vismaicon-sm vismaicon-google
<ul class ="doc-vismaicons-list" >
<li >
<p class ="bold" > Worksurface icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-agreement" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-sm vismaicon-agreement</span >
</li >
<li >
<p class ="bold" > Action icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-menu-circle" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-sm vismaicon-menu-circle</span >
</li >
<li >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-filled vismaicon-error" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-sm vismaicon-filled vismaicon-error</span >
</li >
<li >
<p class ="bold" > Social media icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-media vismaicon-sm vismaicon-google" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-media vismaicon-sm vismaicon-google</span >
</li >
</ul >
Large - .vismaicon-lg (large version available only for informative icons)
Standard and dynamic
Informative icon
Standard
vismaicon
Informative icon
Dynamic
vismaicon
<ul class ="doc-vismaicons-list" >
<li style ="max-width: 25%" >
<p class ="bold" > Informative icon</p >
<p > <b > Standard</b > </p >
<span aria-hidden ="true" class ="vismaicon vismaicon-lg vismaicon-filled vismaicon-error" > </span >
<span class ="vismaicon-class" > vismaicon<br > vismaicon-lg<br > vismaicon-filled<br > vismaicon-error</span >
</li >
<li style ="max-width: 25%" >
<p class ="bold" > Informative icon</p >
<p > <b > Dynamic</b > </p >
<span aria-hidden ="true" class ="vismaicon vismaicon-lg vismaicon-dynamic vismaicon-filled vismaicon-error" > </span >
<span class ="vismaicon-class" > vismaicon<br > vismaicon-lg<br > vismaicon-filled<br > vismaicon-dynamic<br > vismaicon-error</span >
</li >
</ul >
States
Selected state
There are a few icons that have the selected state (you can see all below). If you need an icon and you can't find it, just make a request for it here . .selected class on the parent.
Standard
vismaicon vismaicon-add-user
vismaicon vismaicon-alarm
vismaicon vismaicon-alert
vismaicon vismaicon-comment
vismaicon vismaicon-encrypted-pdf
vismaicon vismaicon-export
vismaicon vismaicon-favourite
<ul class ="doc-vismaicons-list" >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-add-user" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-add-user</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-alarm" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-alarm</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-alert" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-alert</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-comment" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-comment</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-encrypted-pdf" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-encrypted-pdf</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-export" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-export</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-favourite" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-favourite</span >
</li >
</ul >
Dynamic
vismaicon vismaicon-dynamic vismaicon-comment
vismaicon vismaicon-dynamic vismaicon-add-user
vismaicon vismaicon-dynamic vismaicon-alert
vismaicon vismaicon-dynamic vismaicon-export
vismaicon vismaicon-dynamic vismaicon-favourite
<ul class ="doc-vismaicons-list" >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-comment" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-comment</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-add-user" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-add-user</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-alert" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-alert</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-export" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-export</span >
</li >
<li class ="selected" >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-favourite" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-favourite</span >
</li >
</ul >
Disabled state
For the disabled version of the icons, simply use .disabled class, like in the examples below.
Standard
Worksurface icon
vismaicon vismaicon-agreement disabled
Action icon
vismaicon vismaicon-menu-circle disabled
Informative icon
vismaicon vismaicon-filled vismaicon-error disabled
Social media icon
vismaicon vismaicon-media vismaicon-google disabled
<ul class ="doc-vismaicons-list" >
<li >
<p class ="bold" > Worksurface icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-agreement disabled" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-agreement disabled</span >
</li >
<li >
<p class ="bold" > Action icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-menu-circle disabled" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-menu-circle disabled</span >
</li >
<li >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-filled vismaicon-error disabled" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-filled vismaicon-error disabled</span >
</li >
<li >
<p class ="bold" > Social media icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-media vismaicon-google disabled" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-media vismaicon-google disabled</span >
</li >
</ul >
Dynamic
Worksurface icon
vismaicon vismaicon-dynamic vismaicon-agreement disabled
Action icon
vismaicon vismaicon-dynamic vismaicon-menu-circle disabled
Informative icon
vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error disabled
Social media icon
vismaicon vismaicon-media vismaicon-google disabled
<ul class ="doc-vismaicons-list" >
<li >
<p class ="bold" > Worksurface icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-agreement disabled" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-agreement disabled</span >
</li >
<li >
<p class ="bold" > Action icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-menu-circle disabled" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-menu-circle disabled</span >
</li >
<li >
<p class ="bold" > Informative icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error disabled" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error disabled</span >
</li >
<li >
<p class ="bold" > Social media icon</p >
<span aria-hidden ="true" class ="vismaicon vismaicon-media vismaicon-google disabled" > </span >
<span class ="vismaicon-class" > vismaicon vismaicon-media vismaicon-google disabled</span >
</li >
</ul >
Design System