#PowerPlatformTip 86: 'Free Power Apps Icons'

TL;DR: Copy the SVG code of a free icon (Matthew Devaney’s set of about 2,000 Fluent icons or SVGRepo), replace its double quotes with single quotes and put it into an Image control: "data:image/svg+xml;utf8," & EncodeUrl("<svg ...>...</svg>"). Any size, any colour, even dynamic.

💡 Challenge

The built-in icon set of Power Apps is small. Uploading PNG files for every icon and colour bloats the app and makes recolouring a chore.

✅ Solution

Use SVG code instead of image files. An Image control accepts a data URI, so the SVG lives in the formula, scales without blur and can take its colour from a variable. Two free sources:

🔸 Matthew Devaney’s Power Apps icon set: about 2,000 icons from Microsoft’s Fluent UI System Icons, which Microsoft publishes under the MIT licence.

🔸 SVGRepo (svgrepo.com): a large library of SVG icons. The licence differs per icon and is shown on each icon’s page, so check it before you use an icon in a company app.

🔧 How It’s Done

1. Copy the SVG code

🔸 Pick an icon and copy its SVG code (on SVGRepo, for example, via the copy or “view SVG” option).

🔸 Make sure the <svg> tag contains xmlns='http://www.w3.org/2000/svg'. Without it the Image control stays empty.

2. Turn the double quotes into single quotes

🔸 The formula wraps the SVG in double quotes, so every " inside the SVG must become '. Any text editor’s search and replace does this in one step.

3. Put it into the Image property

🔸 Add an Image control and set Image to:

"data:image/svg+xml;utf8," & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
        <path fill='#0F766E' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z'/>
    </svg>"
)

🔸 EncodeUrl() encodes characters such as # and spaces, so the data URI stays valid. This is the same pattern for both icon sources.

4. Make the colour dynamic (optional)

🔸 Store a hex colour as text, for example Set(varIconColor, "#0F766E") in App.OnStart, and concatenate it into the SVG:

"data:image/svg+xml;utf8," & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
        <path fill='" & varIconColor & "' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z'/>
    </svg>"
)

🔸 Changing varIconColor recolours every icon that uses it, for example for a hover state or a dark theme.

5. Reuse it

🔸 Used in many places? Put the icon string into a named formula in App.Formulas, for example IconCircle = "data:image/svg+xml;utf8," & EncodeUrl("...");, and set the Image property to IconCircle.

🎉 Result

Your app gets sharp icons in any size and colour, without uploaded image files, and a colour change is one variable away.

🌟 Key Advantages

🔸 Large free choice: thousands of icons beyond the built-in set.

🔸 Sharp at any size: SVG is vector graphics, so icons don’t blur on large screens.

🔸 Easy recolouring: one variable or one fill value changes the colour.

🔸 No media files: the icon is part of the formula, nothing to upload or maintain.

🛠️ FAQ

1. Where can I find free Power Apps icons?

Matthew Devaney’s Power Apps icon set offers about 2,000 Fluent icons, and SVGRepo hosts a large collection of SVG icons with the licence shown per icon.

2. Why does my Image control stay empty?

Usually one of three things: a double quote is still inside the SVG, the xmlns attribute is missing, or the SVG isn’t wrapped in EncodeUrl().

3. How do I change the colour of SVG icons?

Change the fill (or stroke) value in the SVG code, or concatenate a colour variable as shown in step 4.

🔗 Related Tips

🔸 #PowerPlatformTip 55: ‘Picking Colors’ - grab a brand color palette to recolor these SVG icons with.

🔸 #PowerPlatformTip 50: ‘Use TemplateApp’ - a Material Design template that already ships with 5000+ SVG icons.