This is a small selection of our icons. If you don't find what you're looking for, go to the icon library.
You can include in your interface any of the below icons. Include them by adding a <span> with a .vismaicon class and another class that represents the icon that you need, example .vismaicon-edit. Check out the example code from the right panel.
You can find below the all classes that you need to add in you code to display the icon you need.
The small size of the icons is 16x16. Just use .vismaicon-sm class for the smaller version.
There is also a larger sizes, 50x50, but just for the Informative filled icons. For this case use .vismaicon-lg class.
Small - .vismaicon-sm
Large - .vismaicon-lg (large version only for informative icons)
There are a few icons that have the selected state. Just add .selected on the parent.
For the disabled version of the icons, simply use .disabled class, like in the example below.
<!-- Icons - .vismaicon.vismaicon-print -->
<span class="vismaicon vismaicon-print"></span>
<!-- Informative icons - .vismaicon.vismaicon-filled.vismaicon-success -->
<span class="vismaicon vismaicon-filled vismaicon-success" aria-hidden="true"></span>
<!-- Small icons - .vismaicon.vismaicon-sm.vismaicon-print -->
<span class="vismaicon vismaicon-print"></span>
<!-- Large icons - .vismaicon.vismaicon-filled.vismaicon-success (only for informative icons) -->
<span class="vismaicon vismaicon-filled vismaicon-success"></span>
<!-- Selected state -->
<a class="selected">
<span class="vismaicon vismaicon-copy"></span>
</a>
<!-- Disabled state -->
<span class="vismaicon vismaicon-copy disabled"></span>
<!-- Icons in button toolbar -->
<div role="toolbar" class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default" aria-label="Left">
<span class="vismaicon vismaicon-sm vismaicon-menu-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default" aria-label="Center">
<span class="vismaicon vismaicon-sm vismaicon-add2-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default" aria-label="Right">
<span class="vismaicon vismaicon-sm vismaicon-arrow-down-circle" aria-hidden="true"></span>
</button>
</div>
</div>
<!-- Icons in buttons -->
<button type="button" class="btn btn-lg">
<span class="vismaicon vismaicon-favourite" aria-hidden="true"></span>
Star
</button>
<button type="button" class="btn btn-primary btn-lg">
<span class="vismaicon vismaicon-favourite" aria-hidden="true"></span>
Star
</button>
<button type="button" class="btn">
<span class="vismaicon vismaicon-sm vismaicon-favourite" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-primary">
<span class="vismaicon vismaicon-sm vismaicon-favourite" aria-hidden="true"></span>
</button>