Overview

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.

Work surface + Toolbar icons

  • vismaicon vismaicon-briefcase
  • vismaicon vismaicon-new
  • vismaicon vismaicon-note
  • vismaicon vismaicon-note-blank
  • vismaicon vismaicon-note-filled

Action icons

  • vismaicon vismaicon-menu-circle
  • vismaicon vismaicon-add-circle
  • vismaicon vismaicon-add2-circle
  • vismaicon vismaicon-remove-circle
  • vismaicon vismaicon-ok-circle

Informative filled icons

  • vismaicon vismaicon-filled vismaicon-success
  • vismaicon vismaicon-filled vismaicon-error
  • vismaicon vismaicon-filled vismaicon-warning
  • vismaicon vismaicon-filled vismaicon-info
  • vismaicon vismaicon-filled vismaicon-help

Social Media icons

  • vismaicon vismaicon-facebook
  • vismaicon vismaicon-flickr
  • vismaicon vismaicon-google
  • vismaicon vismaicon-linkedin
  • vismaicon vismaicon-pinterest

Sizes

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

  • vismaicon vismaicon-sm vismaicon-copy
  • vismaicon vismaicon-sm vismaicon-new
  • vismaicon vismaicon-sm vismaicon-note
  • vismaicon vismaicon-sm vismaicon-paste
  • vismaicon vismaicon-sm vismaicon-delete

Large - .vismaicon-lg (large version only for informative icons)

  • vismaicon vismaicon-lg vismaicon-filled vismaicon-success
  • vismaicon vismaicon-lg vismaicon-filled vismaicon-error
  • vismaicon vismaicon-lg vismaicon-filled vismaicon-warning
  • vismaicon vismaicon-lg vismaicon-filled vismaicon-info
  • vismaicon vismaicon-lg vismaicon-filled vismaicon-help

Selected state

There are a few icons that have the selected state. Just add .selected on the parent.

  • vismaicon vismaicon-comment
  • vismaicon vismaicon-add-user
  • vismaicon vismaicon-alert
  • vismaicon vismaicon-export
  • vismaicon vismaicon-favourite

Disabled state

For the disabled version of the icons, simply use .disabled class, like in the example below.

  • vismaicon vismaicon-copy disabled
  • vismaicon vismaicon-new disabled
  • vismaicon vismaicon-note disabled
  • vismaicon vismaicon-paste disabled
  • vismaicon vismaicon-delete disabled

Examples



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