Skip To Content

Use custom icons

When configuring an indicator, you have the option to use a Scalable Vector Graphics (SVG) icon, which is not included in the element by default. This functionality ensures that dashboards can align with industry-specific requirements or the look and feel of your organization's corporate branding. The SVG format is an XML-based vector image format. Icons can be created in any text editor or using drawing software. At run time, custom icons will scale to the same height as the Middle Text content in the indicator.

The following example shows SVG content that displays as a counter-clockwise series of three arrows. This could be used to indicate a work in progress.

Custom icon

You can try out this functionality by copying and pasting the following SVG code into the blank box under Custom in the Select an icon screen:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="icons"> 
    <path d="M13.91 9a6.003 6.003 0 0 1-5.658 4.987l-.347-1.992c.032.001.063.005.095.005a3.996 3.996 0 0 0 3.858-3h-1.749l2.75-3.912L15.61 9zm-8.668 1.877l-.002.002a3.945 3.945 0 0 1-.688-4.884l-1.809-.848a5.923 5.923 0 0 0 1.08 7.148L2.59 13.529l4.71.822-.82-4.711zm1.425-6.576l-.011-.067a3.97 3.97 0 0 1 4.575 1.43l1.194-1.697a5.941 5.941 0 0 0-6.119-1.718L6.018.607 2.64 3.994l4.33 2.03z" />
</svg>

The following image shows how the indicator could look with the custom icon:

Custom icon with fill

The following tips may be helpful when you create your own icon:

  • If you don't define a stroke or fill in your SVG icon, these items can be adjusted when authoring the indicator in your dashboard.
  • If you don't define a stroke in your icon, you can add one at configuration time. It will be 1 pixel.
  • Drawings in SVG format can be dynamic and interactive; however, script-based animations are not supported and will be stripped out.