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.

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

Download

Download the latest ZIP with all the icons and CSS.

Download latest ZIP

** Latest version

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.

  • .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 
					


<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

  • vismaicon vismaicon-add-user
  • vismaicon vismaicon-alarm
  • vismaicon vismaicon-alert
  • vismaicon vismaicon-comment
  • vismaicon vismaicon-encrypted-pdf
  • vismaicon vismaicon-export
  • vismaicon vismaicon-favourite 
					


<a class="selected">
   <span class="vismaicon vismaicon-add-user" aria-hidden="true"></span>
</a>

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 
					


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