Tutorial: Adding Custom Icons to Signals

Created On
Last Updated On
byMarta Garcia
You are here:

The SMART KPI List visual now supports the use of custom icons. This functionality allows report authors to provide additional clarity.

By adding icons that align with your organization’s branding and visual standards, users can create KPI reports that are both more intuitive to interpret and visually engaging and consistent with corporate guidelines.

The following step-by-step guide shows you how to add and format custom icons in the SMART KPI List for Power BI.

1. Add a Table with the image/icon URLs

  1. Prepare your icon.
    • Download or design your own icon (supported formats include: SVG, PNG, JPG and GIF).
    • Make sure the image is small in size and has a transparent background for best results.
  2. Convert the Icon to Base64. Icons need to be provided as Base64-encoded images, including the necessary Meta-Data header. For SVGs, you can use currentColor for fill and border. This allows icons to dynamically adapt to the Signal color settings.
    • You can do the Base64 conversion directly in Power BI by using the Binary.ToText function with the BinaryEncoding.Base64 option in Power Query.
    • or use external tools (search for “Base64 image encoder”) to convert your icons or images into Base64 strings.
  3. Create a separate “Icons” Table with an ID, a Name/ Category and a URL or SVG string column.
    • Copy the generated Base64 code to your “Icons” table and import it into Power BI.
  4. Set the Data Category.
    • Change the Data category of the “URL” column to Image URL to display the image.

2. Link Tables

Connect the “Icons” table with your main dataset.

  1. Click Model view from the left menu.
  2. Click on the Manage relationships from the top menu.
  3. Click + New relationship.
  4. From the first drop-down, select your Dataset table and click the column with the IDs (Icon column).
  5. On the next drop-down, select the “Icons” table you just added and select the column with the Icon IDs (IconID column). This ensures the right icon is pulled in dynamically for each row.
  6. By default Cardinality is set to Many to one (*:1).
  7. By default the Cross filter direction is Single.
  8. Press OK and Close buttons.

Your “Icons” table is now linked to your dataset.

3. Build & Format visual

Add a SMART KPI List to your report and map the “URL” category from the “Icons” table to the Signal icon, Additional columns and/ or Items wells.

  1. In Power BI, open or locate the report with the SMART KPI List visual.
  2. Add at least the following categories: Items, Date, Values and Signal.
  3. Add the “URL” category into the Signal icon (for the Signals), Additional columns and/ or Items wells.

Take advantage of the additional formatting features available for the Additional columns and Items in the formatting pane and customize it according to your preferences.

Go to Format visual pane and expand the Signal card, for all SVGs (added to the Signal icon), where currentColor was used for fill and border; you can change the Size, Color and Alignment. Expand the Additional columns and/ or Items cards to change the Color and Alignment of the icons.

Save your Power BI report and publish it to the Power BI service.

Considerations

If your images appear cropped or only partially displayed when using Base64 URLs, it’s likely due to Power BI’s character limit for text fields. The Power Query engine supports a maximum of 32,766 characters per text cell. Any text exceeding this limit will be truncated, resulting in incomplete image rendering.
To avoid this issue: Use SVGs where possible (smaller for icons/logos). Reduce the image resolution to minimize file size. For images, use compressed JPG format rather than PNG, since JPG files are smaller. Compress images to around 20–25 KB to stay within the Power BI character limit.

Tags:
Table of Contents