Skip To Content

Use icons

When configuring an indicator, header, selectors, or table (using advanced formatting), 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.

You can also choose to use a custom SVG icon. When selecting an icon, expand the Custom section in the Select an icon pane, and enter your custom SVG code. 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 removed in the dashboard.