Overview
A selection of SVG icons are available here in the web library (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.
- Worksurface icons: standard and dynamic
- Action icons: standard and dynamic
- Informative icons: standard and dynamic
- Social media icons
Install
NPM
Install the VUD icons via NPM.
npm i @vismaux/vud-icons
**$vud-icons-path
- You need to change this value to match the folder structure you have (eg. '~node_modules/@vismaux/vud-icons/dist/img/vismaicons' !default;
)
CDN
Everything is also available through CDN. Here you can see all versions available.
<!-- Light and dark mode - latest -->
<link rel="stylesheet" href="https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.light-dark.mode.min.css">@import url("https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.light-dark.mode.min.css");
<!-- Light mode only - latest -->
<link rel="stylesheet" href="https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.min.css">@import url("https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.min.css");
How to
Styles
You can include in your interface any icon from our icon library. All you need to do is to add <span>
with a .vismaicon
class and another class that represents the icon that you need, example .vismaicon-edit
. You can find more examples below.
Standard - .vismaicon
-
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
<span class="vismaicon vismaicon-agreement" aria-hidden="true"></span>
<span class="vismaicon vismaicon-menu-circle" aria-hidden="true"></span>
<span class="vismaicon vismaicon-filled vismaicon-error" aria-hidden="true"></span>
<span class="vismaicon vismaicon-media vismaicon-google" aria-hidden="true"></span>
Dynamic - .vismaicon.vismaicon-dynamic
-
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
<span class="vismaicon vismaicon-dynamic vismaicon-agreement" aria-hidden="true"></span>
<span class="vismaicon vismaicon-dynamic vismaicon-menu-circle" aria-hidden="true"></span>
<span class="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error" aria-hidden="true"></span>
<span class="vismaicon vismaicon-dynamic vismaicon-media vismaicon-google" aria-hidden="true"></span>
Color variant
By adding icon color helper clases, to .vismaicon
wrapper, You can change the default visma-icon color.
-
vismaicon vismaicon-agreement icon-neutral.icon-neutral
-
vismaicon vismaicon-agreement icon-info.icon-info
-
vismaicon vismaicon-agreement icon-success.icon-success
-
vismaicon vismaicon-agreement icon-warning.icon-warning
-
vismaicon vismaicon-agreement icon-error.icon-error
<span class="vismaicon vismaicon-agreement icon-neutral" aria-hidden="true"></span>
<span class="vismaicon vismaicon-agreement icon-info" aria-hidden="true"></span>
<span class="vismaicon vismaicon-agreement icon-success" aria-hidden="true"></span>
<span class="vismaicon vismaicon-agreement icon-warning" aria-hidden="true"></span>
<span class="vismaicon vismaicon-agreement icon-error" aria-hidden="true"></span>
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
<span class="vismaicon vismaicon-sm vismaicon-agreement" aria-hidden="true"></span>
<span class="vismaicon vismaicon-sm vismaicon-menu-circle" aria-hidden="true"></span>
<span class="vismaicon vismaicon-sm vismaicon-filled vismaicon-error" aria-hidden="true"></span>
<span class="vismaicon vismaicon-sm vismaicon-media vismaicon-google" aria-hidden="true"></span>
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
<span class="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-agreement" aria-hidden="true"></span>
<span class="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-menu-circle" aria-hidden="true"></span>
<span class="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-filled vismaicon-error" aria-hidden="true"></span>
<span class="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-media vismaicon-google" aria-hidden="true"></span>
Large - .vismaicon-lg
(large version available only for informative icons)
Standard and dynamic
-
Informative icon
Standard
vismaicon
vismaicon-lg
vismaicon-filled
vismaicon-error -
Informative icon
Dynamic
vismaicon
vismaicon-lg
vismaicon-filled
vismaicon-dynamic
vismaicon-error
<span class="vismaicon vismaicon-lg vismaicon-filled vismaicon-error" aria-hidden="true"></span>
<span class="vismaicon vismaicon-lg vismaicon-filled vismaicons-dynamic vismaicon-error" aria-hidden="true"></span>
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.
To have the selected state just add .selected
class on the parent.
Standard
<a class="selected">
<span class="vismaicon vismaicon-add-user" aria-hidden="true"></span>
</a>
Dynamic
<a class="selected">
<span class="vismaicon vismaicon-dynamic vismaicon-comment" aria-hidden="true"></span>
</a>
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
<span class="vismaicon vismaicon-agreement disabled" aria-hidden="true"></span>
<span class="vismaicon vismaicon-menu-circle disabled" aria-hidden="true"></span>
<span class="vismaicon vismaicon-filled vismaicon-error disabled" aria-hidden="true"></span>
<span class="vismaicon vismaicon-media vismaicon-google disabled" aria-hidden="true"></span>
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
<span class="vismaicon vismaicon-dynamic vismaicon-agreement disabled" aria-hidden="true"></span>
<span class="vismaicon vismaicon-dynamic vismaicon-menu-circle disabled" aria-hidden="true"></span>
<span class="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error disabled" aria-hidden="true"></span>
<span class="vismaicon vismaicon-dynamic vismaicon-media vismaicon-google disabled" aria-hidden="true"></span>