Tutorial: Adding Custom Icons

You can now add any icon to your PowerGantt visual to represent milestones—bringing even more clarity and customization to your project timelines. Whether you’re highlighting key deliverables, risks, or approval points, custom icons make it easier to tell your story briefly.

These icons also support conditional formatting, enabling dynamic styling based on status, category, or any field in your data. For example, you can automatically display a red warning icon for delayed tasks or a green checkmark for completed milestones.

Custom icons give you the flexibility to match your visual to your organization’s language and branding, making project tracking more intuitive and visually engaging than ever before.

1. Add a Table with the image/icon URLs

Supported formats include: SVG, PNG, JPG and GIF

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 milestone color settings.

You can either convert the images or icons to Base 64 in Power BI using Power Query or by using external tools that convert your images to Base64.

After converting your images set the Data category of the Icon column to Image URL.

2. Link Tables

Connect the “Icons” table with your existing 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 Icon IDs.
5. On the next drop-down, select the “Icons” table you just added and select for ex. the column with the MilestoneIcon IDs.
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 PowerGantt Chart to your report and add the Icon category to the Milestone icon, Additional columns and/or Item Name wells.

1. In Power BI, open or locate the report with the PowerGantt visual.
2. Add at least the following categories: Item, Item Name, Start date and End date.
3. Add the Icon category to the Milestone icon, Additional columns and/ or Item Name wells.
4. Optionally add a category to the Milestone legend.

Take advantage of the additional formatting features available for the Columns and Milestones in the formatting pane and customize it according to your preferences.

Go to Format visual pane and expand the Columns and/ or Milestone cards.

For all SVGs (added to the Item Name or Additional columns), where currentColor was used for fill and border; you can change the color in the Text color option under Columns.

For all SVGs (added to the Milestone icon), where currentColor was used for fill and border; you can change the Shape size and Color under Milestones. If you’ve assigned a category in the Milestone legend, the icons will automatically adopt the corresponding legend color. You can override this behavior for individual items by selecting the desired category from the Apply settings to dropdown list.

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 allows a maximum of 32,766 characters per text cell. Any text exceeding this limit will be truncated, resulting in incomplete image rendering.