HTML
To add an icon, insert a <span> tag element with the class .vismaicon along with an additional class corresponding to the desired icon, such as .vismaicon-home for instance:
<span aria-hidden="true" class="vismaicon vismaicon-home"></span>
Primary style
The icons are divided into two main icon sets of minified CSS variations.
Initial set
Standard: To incorporate the standard style icon into the HTML code, simply include the initial .vismaicon class to create the icon framework, along with an additional class corresponding to the preferred icon.
<span aria-hidden="true" class="vismaicon vismaicon-home"></span>
Dynamic: For the dynamic icon, an extra class, .vismaicon-dynamicis required to modify the style to dynamic.
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-home"></span>
Second set
Dynamic: To integrate the dynamic style icon into the HTML code, simply include the .vismaicon class without the .vismaicon-dynamic as used previously. Additionally, add the corresponding class for the preferred icon.
<span aria-hidden="true" class="vismaicon vismaicon-home"></span>
Standard: To apply the standard style to the icon, you need to include an additional class: either .vismaicon-standard or .vismaicon-classic.
<span aria-hidden="true" class="vismaicon vismaicon-standard vismaicon-home"></span>
<!-- or -->
<span aria-hidden="true" class="vismaicon vismaicon-clasic vismaicon-home"></span>
Sizes
The standard dimensions are 24x24 px. Icons can also be rendered in a smaller format 16x16 px by applying the extra class: .vismaicon-sm. Larger 48x48 px are exclusive to informative icons, using the .vismaicon-lg class.
<span aria-hidden="true" class="vismaicon vismaicon-sm vismaicon-home"></span>
<span aria-hidden="true" class="vismaicon vismaicon-lg vismaicon-filled vismaicon-success"></span>
Informative
To incorporate the informative icons alongside the main classes for both standard and dynamic style groups on the page, an additional class, .vismaicon-filled, needs to be included.
<span aria-hidden="true" class="vismaicon vismaicon-filled vismaicon-success"></span>
Social media
To include social media icons, you'll need to utilise the base icon class .vismaicon along with the social media class group .vismaicon-media and their respective class names.
<span aria-hidden="true" class="vismaicon vismaicon-media vismaicon-google"></span>
Flags
To incorporate flag icons, you will need to add the base icon class .vismaicon and the .vismaicon-flag class, alongside their corresponding class names, available under the flags tab.
<span aria-hidden="true" class="vismaicon vismaicon-flags vismaicon-sweden"></span>
States
Disabled
To enable the disabled version of the icons, just apply the .disabled class, as demonstrated in the examples provided below.
<span aria-hidden="true" class="vismaicon vismaicon-delete disabled"></span>
Colour variant
By incorporating the icon colour helper class into the .vismaicon (icon main) wrapper, you can alter the default icon colour according to the situation:
- .icon-neutral ( dark grey )
- .icon-info ( blue )
- .icon-success ( green )
- .icon-warning ( orange )
- .icon-error ( red )
<span aria-hidden="true" class="vismaicon vismaicon-agreement icon-neutral"></span>