Use icons

When configuring an indicator, header, or selectors, you have the option to include a Scalable Vector Graphics (SVG) icon. Adding an icon allows you to give your elements a more unique identity, align your dashboard with any specific branding standards, or provide additional context. The SVG icons are an XML-based vector image format and can be created in any text editor or using drawing software. When viewing and configuring a dashboard, custom icons scale with the size of the element.

ArcGIS Dashboards includes a library of SVG icons to choose from.

Icon library

You can also choose to use a custom SVG icon. When selecting an icon, click the Custom tab in the Select an icon screen. For example, using the following SVG code, you can create an SVG icon that displays as a counter-clockwise series of three arrows. This could be used to indicate a work in progress.

Custom icon

<?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 an indicator looks with the custom icon:

Custom icon with fill

Tip:

The following are tips for creating a custom icon:

  • For an indicator, if you don't define a stroke or fill in your SVG code, you can configure them when authoring the indicator in your dashboard.
  • Images in SVG format can be dynamic and interactive; however, script-based animations are not supported and are stripped out in the dashboard.