Overview

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

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

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.

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 
					


<span class="vismaicon vismaicon-print" aria-hidden="true"></span>

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 
					


<span class="vismaicon vismaicon-dynamic vismaicon-print" aria-hidden="true"></span>

Here you can find more worksurface icons with predefined classes.

Action icons

Standard

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


<span class="vismaicon vismaicon-menu-circle" aria-hidden="true"></span>

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 
					


<span class="vismaicon vismaicon-dynamic vismaicon-menu-circle" aria-hidden="true"></span>

Here you can find more action icons with predefined classes.

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 
					


<span class="vismaicon vismaicon-filled vismaicon-success" aria-hidden="true"></span>

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 
					


<span class="vismaicon vismaicon-dynamic vismaicon-filled vismaicon-success" aria-hidden="true"></span>

Here you can find more informatove icons with predefined classes.

Social media icons

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


<span class="vismaicon vismaicon-google" aria-hidden="true"></span>

Here you can find more social media icons with predefined classes.

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 
					


<span class="vismaicon vismaicon-sm vismaicon-print" aria-hidden="true"></span>

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 
					


<span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-print" aria-hidden="true"></span>

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 
					


<span class="vismaicon vismaicon-lg vismaicon-filled vismaicon-info" aria-hidden="true"></span>

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 
					


<span class="vismaicon vismaicon-lg vismaicon-dynamic vismaicon-filled vismaicon-info" aria-hidden="true"></span>

States

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 
					


<a class="selected">
   <span class="vismaicon vismaicon-copy" 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-copy" aria-hidden="true"></span>
</a>

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 
					


<span class="vismaicon vismaicon-copy disabled" aria-hidden="true"></span>

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 
					


<span class="vismaicon vismaicon-dynamic vismaicon-copy disabled" aria-hidden="true"></span>

Examples

Standard 


					


<button type="button" class="btn btn-lg">
  <span class="vismaicon vismaicon-download" aria-hidden="true"></span>
</button>




<button type="button" class="btn btn-lg btn-primary">
  <span class="vismaicon vismaicon-upload" aria-hidden="true"></span>
</button>




<button type="button" class="btn">
  <span class="vismaicon vismaicon-sm vismaicon-download" aria-hidden="true"></span>
</button>




<button type="button" class="btn btn-primary">
  <span class="vismaicon vismaicon-sm vismaicon-upload" aria-hidden="true"></span>
</button>



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

Dynamic 


					


<button type="button" class="btn btn-lg">
  <span class="vismaicon vismaicon-dynamic vismaicon-download" aria-hidden="true"></span>
</button>




<button type="button" class="btn btn-lg btn-primary">
  <span class="vismaicon vismaicon-dynamic vismaicon-upload" aria-hidden="true"></span>
</button>




<button type="button" class="btn">
  <span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-download" aria-hidden="true"></span>
</button>




<button type="button" class="btn btn-primary">
  <span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-upload" aria-hidden="true"></span>
</button>