← Back to Blog

How to Add Custom SVG Icons to Power Apps (Complete Guide)

2024-11-05

Adding custom SVG icons to Power Apps isn't hard, but it's not obvious either. Microsoft doesn't exactly make it straightforward, and most tutorials either skip steps or assume you already know what you're doing. So here's the complete process, start to finish, with all the details that usually get left out.

What you're actually doing here

Before we jump into steps, let me explain what's happening behind the scenes. Power Apps can't just load an SVG file like a regular image. Instead, you need to embed the SVG code directly into an Image control using a special data URI format. The SVG markup gets encoded and stuffed into a string that starts with data:image/svg+xml.

It sounds complicated, but tools like PowerIcons handle all the encoding for you. You just copy and paste. The real work is understanding what you're copying and where it goes.

Step 1: Find or create your icon

First, you need an SVG icon. You have a few options here.

You can use PowerIcons.dev, which is what I built specifically for this purpose. It has thousands of icons from Lucide, Fluent, Material, and Bootstrap libraries, all ready to use in Power Apps. The big advantage is that everything is already optimized and formatted correctly.

Or you can grab icons from other sources like Heroicons, Font Awesome, or any SVG icon library. Just make sure you're getting actual SVG files, not PNG or JPG images. The whole point of using SVG is that it scales perfectly and stays crisp at any size.

If you're pulling icons from random websites, be careful about licensing. Most icon libraries are either free for commercial use or require attribution. Check the license before you use anything in a production app.

Step 2: Customize the icon (if needed)

This is where most people skip ahead and then regret it later. Before you add the icon to Power Apps, customize it to match your app's design. Specifically, set the color to match your theme.

If you're using PowerIcons, there's a color picker right in the interface. Click it, enter your hex color code, and the icon updates instantly. Make sure you're using the exact color from your app's theme. Don't eyeball it. If your primary blue is #0078D4, use exactly that. Even small differences in color look wrong when the icon sits next to other UI elements.

You can also adjust the size, though you'll probably tweak this again in Power Apps. The stroke width setting (if available) controls how thick the icon lines are. Thicker strokes work better for primary actions, thinner strokes for secondary elements.

If you're using an icon from somewhere else, you'll need to edit the SVG code manually. Open the SVG file in a text editor and look for the stroke or fill attribute. Change the color value to your hex code. This is annoying, which is why I built PowerIcons to do it visually.

Step 3: Get the Power Apps code

Now you need to convert your SVG into the format Power Apps expects. If you're using PowerIcons, just click the copy button. You'll get something that looks like this:

Image:
  Image: ="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230078D4' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"
  Width: =64
  Height: =64
OnSelect: |-
  =// Your action here

This is YAML format, which Power Apps understands. It includes the encoded SVG data, the dimensions, and even an OnSelect handler if you want to make the icon clickable.

If you're doing this manually without PowerIcons, you need to URL-encode your SVG code. Every < becomes %3C, every > becomes %3E, spaces become %20, and so on. Then wrap it in data:image/svg+xml, at the start. Or just use an online URL encoder and do it in two minutes.

Step 4: Add an Image control to your Power App

Open your Power App in edit mode. Go to the screen where you want to add the icon. In the left sidebar, click Insert, then Media, then Image. An image control appears on your canvas.

Position it roughly where you want the icon. Don't worry about exact placement yet. Just get it on the screen.

Step 5: Paste the code

Here's where it gets slightly tricky. Select the image control you just added. With the control selected, paste the YAML code you copied from PowerIcons.

Power Apps will parse the YAML and automatically set all the properties. The Image property gets the SVG data URI. The Width and Height properties get set. The OnSelect property gets populated if you want clickable functionality.

If you're doing this manually without the YAML format, you'll need to set the Image property yourself. Click on the Image property in the right panel, delete whatever's there, and paste your data:image/svg+xml string. Make sure you start the formula with = so Power Apps treats it as a formula, not literal text.

Step 6: Size and position the icon

Your icon is now on the canvas, but it's probably not sized or positioned correctly. Click the icon to select it, then adjust the Width and Height properties.

Start with equal values to keep the icon proportional. Common sizes are 32x32 for small icons, 48x48 for standard buttons, 64x64 for larger elements, and 80x80 or bigger for hero sections.

Use the alignment tools or manually drag the icon to position it exactly where you want it. If you're putting the icon inside a button or container, make sure it's properly nested in the component tree.

Step 7: Make it clickable (optional)

If you want users to click the icon and have something happen, you need to set up the OnSelect property. Select the icon, click on OnSelect in the right panel, and write your Power Apps formula.

Common actions include navigating to another screen, updating a variable, submitting a form, or opening a popup. For example:

Navigate(HomeScreen, ScreenTransition.Fade)

Or:

Set(ShowMenu, true)

If you copied YAML code from PowerIcons, there's already a placeholder comment in OnSelect. Just replace it with your actual logic.

Common mistakes and how to avoid them

Here's where people typically mess up, based on way too many hours debugging other people's Power Apps.

Mistake one: Wrong color code format. Power Apps expects hex colors in the SVG to be URL-encoded. So #0078D4 becomes %230078D4. If you manually edit SVG code and forget the %23 prefix, the color won't work. PowerIcons handles this automatically, but if you're doing it manually, don't forget.

Mistake two: Setting Height without Width or vice versa. If you only set one dimension, Power Apps might stretch the icon weird. Always set both Width and Height to the same value unless you specifically want a stretched icon, which you probably don't.

Mistake three: Using PNG or JPG instead of SVG. I've seen people try to use raster images and wonder why they look pixelated. Make sure you're actually using SVG code, not an image file. The Image property should start with data:image/svg+xml, not a URL or file path.

Mistake four: Not testing on the target device. An icon that looks perfect on your desktop monitor might be too small or poorly contrasted on a phone. Always test on the actual devices your users will use. Open the app on a phone and check if the icons are visible and tappable.

Mistake five: Ignoring performance. If you paste 50 unoptimized SVG icons on one screen, your app will load slowly. Use optimized icons (PowerIcons automatically optimizes them), and don't go crazy with icon count. Every icon has a rendering cost.

Making icons work with your design system

Once you've added a few icons, you'll want consistency across your app. Here's how to keep things organized.

Define standard sizes before you start adding icons everywhere. Maybe 40px for all navigation icons, 48px for action buttons, 32px for small indicators. Write these down and stick to them. Inconsistent sizing makes your app look sloppy.

Use the same icon library throughout your app. Don't mix Lucide icons on one screen and Material icons on another. Pick a library that matches your design aesthetic and use it exclusively. If you're building for Microsoft 365, use Fluent icons. For modern, minimal apps, Lucide works great. For Google-style apps, Material icons fit better.

Create a color system. Not every icon needs to be a different color. Most icons should probably be your neutral text color, with accent colors reserved for specific states or actions. Red for delete, green for success, blue for navigation, that kind of thing.

Updating icons later

What if you need to change an icon after you've added it? Easy. Select the icon control, copy the Image property value if you want to save it as a backup, then paste in the new SVG data URI. Everything else (size, position, OnSelect logic) stays the same.

If you just want to change the color, you can either go back to PowerIcons and generate a new version with the updated color, or manually edit the hex code in the Image property. Find the part that says stroke='%23XXXXXX' or fill='%23XXXXXX' and change the six-digit hex code. Remember to keep the %23 prefix.

Testing your icons

Before you publish your app, test everything. Click every icon and make sure it does what you expect. Check that colors have enough contrast against backgrounds. Verify that sizes are consistent across similar elements.

Test on mobile if your app runs on phones. Icons that look fine on desktop can be too small or hard to see on mobile. Open the app on a real device, not just the mobile preview in the browser.

Have someone unfamiliar with your app try using it. Watch where they hesitate or click the wrong thing. If icons are confusing, add text labels or pick more intuitive icons.

When to use icon fonts vs SVG

Sometimes people ask if they should use icon fonts instead of SVG. For Power Apps, SVG is almost always better. Icon fonts can have rendering issues, especially on different devices or browsers. SVG scales perfectly and renders consistently everywhere.

The only time icon fonts might make sense is if you're using the exact same icon hundreds of times. But even then, Power Apps might optimize SVG rendering anyway, so it's not a huge difference.

Advanced: Creating custom SVG icons

If you can't find the icon you need in any library, you can create your own SVG. Use a tool like Figma, Adobe Illustrator, or Inkscape to design your icon. Export it as SVG, then run it through an optimizer like SVGO to strip out unnecessary code.

Open the optimized SVG in a text editor. You'll see the SVG markup. Customize the stroke or fill colors to match your app. Then URL-encode the entire thing and wrap it in the data:image/svg+xml, prefix.

Or just use PowerIcons' external SVG feature, which lets you paste any SVG code and it handles all the optimization and encoding automatically. Way faster than doing it manually.

Maintaining your icon system

As your app grows, keep track of which icons you're using and why. It helps to document your icon choices somewhere, even if it's just a simple note. "Home icon: Lucide house, 48px, neutral color. Delete icon: Lucide trash, 40px, red."

When you add new features, reference this documentation to stay consistent. Don't just grab whatever icon looks good in the moment. Check what you've already used for similar functions and match that style.

The PowerIcons advantage

Look, you can do all of this manually. Find icons, edit SVG files, URL-encode everything, paste it into Power Apps, tweak colors in a text editor. It works, but it's slow and error-prone.

That's why I built PowerIcons. Find an icon, pick your color, copy the code, paste it into Power Apps. Done. Everything is already optimized, formatted, and encoded correctly. You spend 30 seconds instead of 10 minutes, and you don't have to think about URL encoding or color codes or any of that technical stuff.

The entire library is free. No account required, no paywalls, no annoying popups asking you to subscribe. Just tools that work for people building Power Apps.

Wrapping up

Adding custom SVG icons to Power Apps is one of those things that seems harder than it is. Once you've done it a few times, it becomes second nature. Find an icon, customize it, copy the code, paste it into an Image control. That's the whole process.

The key is using optimized, properly formatted SVG code and staying consistent with your design system. Don't mix icon styles, keep sizes consistent, use color purposefully, and test on real devices.

If you're serious about making your Power Apps look professional, start with the icons. It's the fastest way to upgrade from "internal tool" to "app people actually want to use." Head to PowerIcons.dev, pick some icons, and make your app look like it was designed by someone who cares.