Importing SVG icons for conditional formatting Power BI

[Earth-2000GMT]

Hi,

I am trying to import my own theme into power bi so that I can have my own icons in the conditional format option.

I having error within the svg code.  The code is below, and i got the svg from icons from power point. I also wondering if there is a better way to import your own icons.

Sample json with svg.
{
"name": "WO Icons Theme",
"dataColors": ["#1F77B4", "#FF7F0E", "#2CA02C", "#D62728", "#9467BD", "#8C564B", "#E377C2", "#7F7F7F", "#BCBD22", "#17BECF"],
"icons": [
{
"url": "data&colon;image/svg+xml;utf8,<svg width='1280' height='720' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='hidden'><g><g><g><g><path d='M631.2 341.2C632 340.4 632.5 339.3 632.5 338.1 632.5 336.9 632 335.8 631.2 335L617.4 321.3C616.6 320.5 615.5 320 614.4 320 613.3 320 612.1 320.5 611.3 321.3L609.8 322.8 629.7 342.7 631.2 341.2Z'/><path d='M651.3 376.5C650.9 376.9 650.3 377.1 649.8 377.1 649.3 377.1 648.7 376.9 648.3 376.5L623.5 351.8C623.1 351.4 622.9 350.8 622.9 350.3 622.9 349.8 623.1 349.2 623.5 348.8L626.6 345.8 606.7 325.9C605.4 327.2 604.2 328.4 603.4 329.2 601.4 331.1 600.2 333.6 600.1 336.3 599.8 340.8 600.9 345.1 602.4 349.3 604 353 606.1 356.5 608.4 359.8 616.6 372.1 626.9 382.8 638.9 391.3 640.9 392.8 643 394.1 645.2 395.3 650.2 397.8 655.5 399.6 661.2 400 665 400.3 668.8 398.8 671.4 396L674.1 393.3 654.3 373.4 651.3 376.5Z'/><path d='M678.7 382.6 664.9 368.8C664.1 368 663 367.5 661.8 367.5 660.6 367.5 659.5 368 658.7 368.8L657.2 370.4 677.1 390.3 678.6 388.8C679.4 388 679.9 386.9 679.9 385.7 679.9 384.5 679.5 383.4 678.7 382.6Z'/></g></g></g></g></svg>",
"description": "Icon 1"
},
{
"url": "data&colon;image/svg+xml;utf8,<svg width='1280' height='720' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='hidden'><g><path d='M569 360C569 321.34 600.788 290 640 290 679.212 290 711 321.34 711 360 711 398.66 679.212 430 640 430 600.788 430 569 398.66 569 360Z' fill='%23215F9A' fill-rule='evenodd'/></g></svg>",
"description": "Icon 2"
},
 {
"url": "data&colon;image/svg+xml;utf8,<svg width='1280' height='720' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='hidden'><g><rect x='526' y='316' width='155' height='44' stroke='%23042433' stroke-width='2' stroke-miterlimit='8' fill='%23156082'/></g></svg>",
"description": "Icon 4"
 }
]
}

Thank you

[rajendraongole1 · Accepted solution]

Hi @Earth-2000GMT  - In your JSON, you are using data&colon;image/svg+xml;utf8, instead of the correct syntax data&colon;image/svg+xml;utf8,. The &colon; should be replaced with a simple.Avoid complex SVGs with scripts, styles, or external links. Simple shapes, paths, and fills are generally more reliable.

i have attached json script, Go to View > Themes > Browse for themes and select your updated JSON file.

Hope this helps.