Overview

This is a small selection of our icons. If you don't find what you're looking for, go to the icon library.

Now we have 2 types of icons: standard and dynamic (new). Check out the code/classes you need to use to use this 2 types of icons in your product.

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

Standard - .vismaicon

  • vismaicon vismaicon-user-placeholder
  • vismaicon vismaicon-new
  • vismaicon vismaicon-note
  • vismaicon vismaicon-note-blank
  • vismaicon vismaicon-note-filled

Dynamic - .vismaicon-dynamic

  • vismaicon vismaicon-dynamic vismaicon-user-placeholder
  • vismaicon vismaicon-dynamic vismaicon-new
  • vismaicon vismaicon-dynamic vismaicon-note
  • vismaicon vismaicon-dynamic vismaicon-note-blank
  • vismaicon vismaicon-dynamic vismaicon-note-filled

Action icons

Standard

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

Dynamic

  • vismaicon vismaicon-dynamic vismaicon-menu-circle
  • vismaicon vismaicon-dynamic vismaicon-add-circle
  • vismaicon vismaicon-dynamic vismaicon-other-circle
  • vismaicon vismaicon-dynamic vismaicon-remove-circle
  • vismaicon vismaicon-dynamic vismaicon-ok-circle

Informative filled icons

Standard

  • 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

Dynamic

  • vismaicon vismaicon-dynamic vismaicon-filled vismaicon-success
  • vismaicon vismaicon-dynamic vismaicon-filled vismaicon-error
  • vismaicon vismaicon-dynamic vismaicon-filled vismaicon-warning
  • vismaicon vismaicon-dynamic vismaicon-filled vismaicon-info
  • vismaicon vismaicon-dynamic 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

Standard

  • 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

Dynamic

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

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

Standard

  • 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

Dynamic

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

Selected state

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

Standard

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

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

Disabled state

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

Standard

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

Dynamic

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

Examples

Standard


Dynamic


				
// Standard icons - .vismaicon.vismaicon-print 
<span class="vismaicon vismaicon-print"></span>

// Dynamic icons - .vismaicon.vismaicon-dynamic.vismaicon-print 
<span class="vismaicon vismaicon-dynamic vismaicon-print"></span>


// Standard informative icons - .vismaicon.vismaicon-filled.vismaicon-success 
<span class="vismaicon vismaicon-filled vismaicon-success" aria-hidden="true"></span>

// Dynamic informative icons - .vismaicon.vismaicon-dynamic.vismaicon-filled.vismaicon-success 
<span class="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-success" aria-hidden="true"></span>


// Standard small icons - .vismaicon.vismaicon-sm.vismaicon-print 
<span class="vismaicon vismaicon-print"></span>

// Dynamic small icons - .vismaicon.vismaicon-sm.vismaicon-print
<span class="vismaicon vismaicon-dynamic vismaicon-print"></span>


// Standard large icons - .vismaicon.vismaicon-filled.vismaicon-lg.vismaicon-success (only for informative icons)
<span class="vismaicon  vismaicon-lg vismaicon-filled vismaicon-success"></span>

// Dynamic large icons - .vismaicon.vismaicon-dynamic.vismaicon-filled.vismaicon-lg.vismaicon-success (only for informative icons)
<span class="vismaicon vismaicon-dynamic vismaicon-lg vismaicon-filled vismaicon-success"></span>


// Standard selected state
<a class="selected">
   <span class="vismaicon vismaicon-copy"></span>
</a>

// Dynamic selected state
<a class="selected">
   <span class="vismaicon vismaicon-dynamic 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-add-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-download" aria-hidden="true"></span> 
  Download
</button>

<button type="button" class="btn btn-primary btn-lg">
  <span class="vismaicon vismaicon-download" aria-hidden="true"></span> 
  Download
</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-download" aria-hidden="true"></span>
</button>