Skip To Content

Use custom icons

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

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

Custom icon

Try out this functionality yourself by copying and pasting the below 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>

Below is how the indicator could look with the custom icon.

Custom icon with fill

Tips for when you will create your own icon:

  • If you don't define a stroke or fill in your SVG icon, these 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.
  • SVG drawings can be dynamic and interactive. Note, however, that script-based animations are not supported and will be stripped out.