Power BI is turning 10, and we’re marking the occasion with a special community challenge. Use your creativity to tell a story, uncover trends, or highlight something unexpected.
Get startedJoin us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.
Hi,
I struck with adding new icon set so that i can use them for conditional formatting,
i came across couple of resources where it is said that it can be achived by adding icons in theme file
https://exceleratorbi.com.au/conditional-formatting-using-icons-in-power-bi/ (By Matt Allington / July 19, 2019)
https://hatfullofdata.blog/svg-in-power-bi-part-7-using-theme-svg-icons/ (12TH OCTOBER 2019)
following the above weblink created icons theme file , upon uploading they dont throw any error , but i dont see the new icons added in my conditional formatting Iconset.
MyIcons theme.Json file
{ "name":"TestIconTheme",
"icons": {
"RedUpArrow": {
"description": "Red Up Arrow",
"url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23FF0066' d='M 16 4.09375 L 9.28125 10.8125 L 10.71875 12.21875 L 15 7.9375 L 15 28 L 17 28 L 17 7.9375 L 21.28125 12.21875 L 22.71875 10.8125 Z' /></svg>"
},
"BlueDownArrow": {
"description": "Blue Down Arrow",
"url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'> <path fill='%233F9FEC' d='M 15 4 L 15 24.0625 L 10.71875 19.78125 L 9.28125 21.1875 L 16 27.90625 L 22.71875 21.1875 L 21.28125 19.78125 L 17 24.0625 L 17 4 Z'/> </svg>"
}
}
}
Not sure why the icons are not showing up,
Can any one please help me on this.
Thank you
Sunil
Solved! Go to Solution.
Hi @Anonymous ,
Try this
{ "name":"TestIconTheme",
"icons": {
"RedUpArrow": {
"description": "Red Up Arrow",
"url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23FF0066' d='M 16 4.09375 L 9.28125 10.8125 L 10.71875 12.21875 L 15 7.9375 L 15 28 L 17 28 L 17 7.9375 L 21.28125 12.21875 L 22.71875 10.8125 Z' /></svg>"
},
"BlueDownArrow": {
"description": "Blue Down Arrow",
"url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'> <path fill='%233F9FEC' d='M 15 4 L 15 24.0625 L 10.71875 19.78125 L 9.28125 21.1875 L 16 27.90625 L 22.71875 21.1875 L 21.28125 19.78125 L 17 24.0625 L 17 4 Z'/> </svg>"
}
}
}
Regards,
Harsh Nathani
Hi @Anonymous ,
Try this
{ "name":"TestIconTheme",
"icons": {
"RedUpArrow": {
"description": "Red Up Arrow",
"url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23FF0066' d='M 16 4.09375 L 9.28125 10.8125 L 10.71875 12.21875 L 15 7.9375 L 15 28 L 17 28 L 17 7.9375 L 21.28125 12.21875 L 22.71875 10.8125 Z' /></svg>"
},
"BlueDownArrow": {
"description": "Blue Down Arrow",
"url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'> <path fill='%233F9FEC' d='M 15 4 L 15 24.0625 L 10.71875 19.78125 L 9.28125 21.1875 L 16 27.90625 L 22.71875 21.1875 L 21.28125 19.78125 L 17 24.0625 L 17 4 Z'/> </svg>"
}
}
}
Regards,
Harsh Nathani
Hi Harsh Nathani,
I would like to know where can I find the second screenshot you posted on this post on Power BI Desktop? I'm looking for conditional format and I can't find it.
Thanks
Hi @harshnathani ,
Thanks for the solution, that fixed my issue Thanks a lot!
Really appreciate your help.
Thank you.
Sunil
Hi @Anonymous ,
Try this:
{ "name": "Percent Icons", "icons": { "complete025": { "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,50 L50,0 A50,50 1 0,1 100,50 z' fill='#ED003C' /></svg> ", "description": "25% Complete" }, "complete050": { "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,50 L50,0 A50,50 1 0,1 50,100 z' fill='#E49B13' /></svg> ", "description": "50% Complete" }, "complete075": { "url":"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,50 L50,0 A50,50 1 1,1 0,50 z' fill='#E49B13' /> </svg>", "description":"75% Complete" }, "complete100": { "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='#008A00' /> </svg>", "description": "100% Complete" } } }
This adds the icon here:
Regards,
Harsh Nathani
Hi @amitchandak ,
Thanks for your reply, yes the solution you suggested is great, but as per my current requirement, we need to add few set of custom icons, and we are any how using a theme for our client, so once we get them in the Icon set we can use across all the reports and tie it to the measure.
Thank you.
Sunil
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Check out the June 2025 Power BI update to learn about new features.
User | Count |
---|---|
81 | |
79 | |
58 | |
35 | |
34 |
User | Count |
---|---|
99 | |
59 | |
56 | |
46 | |
40 |