[{"data":1,"prerenderedAt":12},["ShallowReactive",2],{"guide-power-bi-icons":3},{"slug":4,"path":5,"title":6,"seoTitle":7,"description":8,"date":9,"updated":9,"order":10,"html":11},"power-bi-icons","\u002Fguides\u002Fpower-bi-icons","Power BI icons: adding Fluent icons to reports","Power BI Icons — Free Fluent Icons for Buttons, Images & DAX SVG","Free icons for Power BI reports. Add Fluent icons to buttons and images, draw them with a DAX SVG measure that changes color with your data, or use them for conditional formatting.","2026-10-11",99,"\u003Cp>Power BI's own interface is built with Microsoft's Fluent design, so \u003Ca href=\"\u002F\">Fluent UI System Icons\u003C\u002Fa> look at home in a report: the same line weight, corners and proportions as the icons in the ribbon and panes. They're free under the MIT License, including in reports you sell or publish. There are four ways to get one into a report, depending on whether the icon is fixed or should react to your data.\u003C\u002Fp>\n\u003Ch2>1. A button icon\u003C\u002Fh2>\n\u003Cp>For navigation, bookmarks and drill-through, use a button with a custom icon:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Find the icon on Fluenticons and click \u003Cstrong>PNG\u003C\u002Fstrong> on its page (a 512 px image with a transparent background).\u003C\u002Fli>\n\u003Cli>In Power BI Desktop, choose \u003Cstrong>Insert > Buttons > Blank\u003C\u002Fstrong>.\u003C\u002Fli>\n\u003Cli>In the \u003Cstrong>Format button\u003C\u002Fstrong> pane, open \u003Cstrong>Style > Icon\u003C\u002Fstrong>, set \u003Cstrong>Icon type\u003C\u002Fstrong> to \u003Cstrong>Custom\u003C\u002Fstrong> and select \u003Cstrong>Browse\u003C\u002Fstrong> to pick the PNG.\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Image fit\u003C\u002Fstrong> and \u003Cstrong>Icon placement\u003C\u002Fstrong>, and give the button a tooltip or text label so it's clear what it does.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Microsoft doesn't list which image types the custom icon accepts, so PNG is the safe choice. Download the icon in the color you want: the editor on the homepage recolors any icon before you download it.\u003C\u002Fp>\n\u003Ch2>2. An image\u003C\u002Fh2>\n\u003Cp>For a fixed icon next to a title or KPI card, use \u003Cstrong>Insert > Image\u003C\u002Fstrong> with the same PNG. Images don't change with the data, and they're scaled as pictures, so download a size at least as large as you'll show it.\u003C\u002Fp>\n\u003Ch2>3. A DAX measure that draws the icon (SVG)\u003C\u002Fh2>\n\u003Cp>To show an icon that changes color with a value, such as a red or green status icon in every table row, return the icon's SVG from a measure:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-dax\">Status Icon =\nVAR Color = IF ( [Sales vs Target] >= 0, "#107C10", "#C50F1F" )\nRETURN\n    "data:image\u002Fsvg+xml;utf8," &\n    "<svg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='24' height='24' viewBox='0 0 24 24'>" &\n    "<path fill='" & Color & "' d='PASTE THE PATH DATA HERE'\u002F><\u002Fsvg>"\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Then select the measure and, in \u003Cstrong>Measure tools\u003C\u002Fstrong>, set \u003Cstrong>Data category\u003C\u002Fstrong> to \u003Cstrong>Image URL\u003C\u002Fstrong>. Add it to a table or matrix (and set the image size under \u003Cstrong>Image size\u003C\u002Fstrong> in the formatting pane).\u003C\u002Fp>\n\u003Cp>To get the path data, open an icon here, click \u003Cstrong>Copy SVG\u003C\u002Fstrong> and copy what's inside \u003Ccode>d="…"\u003C\u002Fcode>. Some icons have more than one \u003Ccode><path>\u003C\u002Fcode>; copy each one. Two things trip people up:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Quotes.\u003C\u002Fstrong> DAX strings use double quotes, so the SVG inside must use single quotes, as above.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Desktop vs. the service.\u003C\u002Fstrong> A few SVG features render in one but not the other. Simple paths with plain fills, like Fluent icons, work in both; test the published report anyway.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>4. Icons for conditional formatting\u003C\u002Fh2>\n\u003Cp>Power BI's built-in icon sets for conditional formatting are small. A report theme can add your own: put an \u003Ccode>icons\u003C\u002Fcode> section in the theme JSON, with each icon as a data URI.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">{\n  "name": "My theme",\n  "icons": {\n    "Checkmark": {\n      "description": "On target",\n      "url": "data:image\u002Fsvg+xml;utf8,<svg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24'><path fill='%23107C10' d='…'\u002F><\u002Fsvg>"\n    }\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Import the theme with \u003Cstrong>View > Themes > Browse for themes\u003C\u002Fstrong>, then pick the icons under conditional formatting \u003Cstrong>Icons\u003C\u002Fstrong> for a table or matrix. Inside a URL, write \u003Ccode>#\u003C\u002Fcode> in colors as \u003Ccode>%23\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Which Fluent icons work well in Power BI\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> \u003Ca href=\"\u002Ficon\u002Fcheckmark-circle\u002F\">Checkmark Circle\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Fwarning\u002F\">Warning\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Ferror-circle\u002F\">Error Circle\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Finfo\u002F\">Info\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Trends:\u003C\u002Fstrong> \u003Ca href=\"\u002Ficon\u002Farrow-trending\u002F\">Arrow Trending\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Farrow-up\u002F\">Arrow Up\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Farrow-down\u002F\">Arrow Down\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Fdata-trending\u002F\">Data Trending\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Navigation:\u003C\u002Fstrong> \u003Ca href=\"\u002Ficon\u002Fhome\u002F\">Home\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Farrow-left\u002F\">Arrow Left\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Ffilter\u002F\">Filter\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Finfo\u002F\">Info\u003C\u002Fa>, \u003Ca href=\"\u002Ficon\u002Fnavigation\u002F\">Navigation\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Charts:\u003C\u002Fstrong> browse the \u003Ca href=\"\u002Ftag\u002Fchart\u002F\">chart topic\u003C\u002Fa> for bar, pie and line icons.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Use the regular (outlined) style for most icons and the filled style for a selected or active state; \u003Ca href=\"\u002Fguides\u002Ffilled-vs-regular-icons\u002F\">filled vs. regular icons\u003C\u002Fa> explains the pattern.\u003C\u002Fp>\n\u003Ch2>Power Apps and the rest of the Power Platform\u003C\u002Fh2>\n\u003Cp>Every icon page also has a \u003Cstrong>Power Apps\u003C\u002Fstrong> button, which copies a formula for an Image control's Image property, so canvas apps and Power BI reports can share one icon set.\u003C\u002Fp>\n",1791690003793]