Document toolboxDocument toolbox

Vector Icons (SVG)

SVG (Scalable Vector Graphics) icons can be uploaded and used just like other type of icons.

The process of adding new icon, using it on the drawing is the same as for all other icon types. 

 SVG icons offer many advantages, e.g.:

  • they scale well to any size without any quality loss

  • the offer sharp look and feel with possible transparency



SVG based icons have an additional settings for default width and height set in pixels (max 512) that is set at the time icon is added.

This value cannot be greater than Max Icon Height and Width parameter value.

Tips on obtaining and using SVG icons

Large online repository of both free and paid icons can be browsed on https://fontawesome.com/

Font Awesome name might be misleading, as formerly these project was based on "font" design.

Currently, this project is based on SVG graphics and is a good source of SVG icons. 



Steps to obtain an icon:

  1. Find an appropriate icon using search function on Font Awesome page

  2. Use Download SVG button to get the SVG file:

  3. Save the file and upload it to your application for further use



Modifying the icon (please check your license and make sure you can create derivative works first)

It is hard for an inexperienced user without dedicated software to alter shape of the SVG icon. Nevertheless, simple changes like colour are relatively easy to make.

Take a moment to look at whats "inside" of our sample icon:

This icon will be rendered as black in a browser:

To change the colour of the icon, lets try this modification:

The icon is rendered with different colour now:

Icon colour cannot be changed once it is uploaded into the system. It is treated and used as other files, e.g. PNG or GIF icons. 

Summary

Icons can also be obtained from other sources or made to order.

It is recommended to:

  • use simple shapes as uploading very complex SVG documents might lead to unexpected results

  • test new icons within a Draft. Should the icon cause any problems, the draft can be discarded and the icon removed from the system.


Disclaimer

Font Awesome icons are used here as an example only.

We cannot transfer PRO license to end users (content creators) so please make sure that you follow license requirements from Font Awesome.

https://fontawesome.com/license