How to Use Custom Icons in Power Apps

2024-10-15

Let's be honest: most Power Apps look like they were designed in 2005. The default icons are bland, the UI feels clunky, and everything just screams "internal tool that nobody wants to use." I've seen so many Power Apps that work perfectly fine but look so bad that people avoid using them.

The funny thing is, one of the easiest ways to make your Power App look professional is just adding better icons. Not fancy animations or complex UI components, just good icons. It sounds simple, but the difference is massive. A well-placed icon can make your app go from "IT department special" to something people actually want to open.

Why default Power Apps icons suck

Power Apps gives you some built-in icons, and they're... fine. They work. But they're limited, inconsistent, and honestly pretty ugly. You get a small selection of generic icons that everyone uses, so your app ends up looking like every other Power App out there. There's nothing wrong with that if you're building an internal tool for five people, but if you want your app to stand out, you need custom icons.

The problem is that Power Apps doesn't make it easy to add custom icons. You can't just upload an SVG file and call it a day. You need to convert your icons into a format that Power Apps understands, which usually means turning them into embedded images or using YAML code. Most people don't bother because it seems complicated, so they stick with the default icons and their app continues to look mediocre.

Enter SVG icons and YAML

This is where PowerIcons comes in. The whole point of building this tool was to solve this exact problem. You pick an icon, customize the color and size, and get clean YAML code that you can paste directly into Power Apps. No complicated conversions, no image uploads, just copy and paste.

Here's how it actually works. Power Apps can render SVG icons using the Image control with SVG code embedded directly in the Image property. Instead of pointing to an image URL, you use a special format that starts with data:image/svg+xml and includes the entire SVG code.

A basic example looks like this:

"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"

Yeah, it looks like a mess. That's because all the special characters need to be URL encoded so Power Apps can read it properly. The %3C is a <, the %3E is a >, and so on. You could do this manually, but that's insane. PowerIcons does all of this encoding automatically, so you get clean, working code every time.

How to actually implement custom icons

Let me walk you through the real process of adding a custom icon to your Power App. This is what I do every time, and it takes maybe 30 seconds once you know what you're doing.

First, you head to PowerIcons.dev and find an icon you like. Let's say you want a search icon. You search for "search" and you'll see dozens of options from different icon libraries like Lucide, Bootstrap, Fluent, and Material. Pick the style that matches your app's design. If your app is clean and minimal, go with Lucide icons. If you're building something for Microsoft 365, Fluent icons are perfect because they match the Microsoft design language.

Once you've picked your icon, you customize it. Change the color to match your app's theme. If your primary color is blue, make the icon blue. Adjust the size if needed, though you can also control this directly in Power Apps. The key is getting the color right because that's harder to change later.

Hit the copy button, and PowerIcons gives you the full YAML code. It looks something like this for a component that users can click:

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='%232563eb' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"
  Width: =64
  Height: =64
OnSelect: |-
  =// Your action here

Now you go into Power Apps, add an Image control to your screen, and paste this code. Power Apps will parse the YAML and set all the properties automatically. The SVG code goes into the Image property, the dimensions are set, and you even get an OnSelect property if you want to make the icon clickable.

The icon appears instantly, and it looks clean. No pixelation, no weird artifacts, just a crisp vector icon that scales perfectly. If you need to change the size, just adjust the Width and Height properties. The SVG scales without losing quality.

Real problems you'll run into

Here's the stuff that nobody tells you about custom icons in Power Apps, and this is where most people mess up.

First problem: color codes. When you customize your icon color in PowerIcons, make sure you're using the exact hex code from your app's theme. Don't eyeball it. If your primary blue is #2563eb, use exactly that. Even a slight difference looks wrong when the icon sits next to other UI elements. I've seen apps where every icon is a slightly different shade of blue because someone was just guessing the colors.

Second problem: sizing consistency. You need to use the same icon sizes throughout your app. Don't make one icon 64x64 and another 48x48 unless there's a good reason. Pick a size and stick with it. I usually go with 48x48 for action icons, 32x32 for smaller indicators, and 64x64 for feature cards. Whatever you choose, be consistent.

Third problem: stroke width. Some icon libraries like Lucide and Bootstrap let you adjust stroke width. This changes how thick the icon lines are. Thicker strokes (2px or more) work better for primary actions, while thinner strokes (1px) are good for secondary elements. But again, be consistent. If you use stroke width 2 for one icon, use it for all icons in that category.

Fourth problem: performance. SVG icons are generally lightweight, but if you're loading dozens of icons on a single screen, it can slow things down. Power Apps has to render each SVG individually, and that takes processing power. If you notice your app loading slowly, you might have too many icons. The solution is either reducing the icon count or using PowerIcons' optimized SVGs, which are already stripped of unnecessary metadata.

Making icons actually useful

Adding pretty icons is pointless if they don't improve usability. Here's how to use icons the right way.

Icons should clarify actions, not confuse them. A search icon next to a search bar makes sense because everyone knows what that magnifying glass means. But some icons are ambiguous. A gear icon could mean settings, configuration, tools, or processing. If there's any doubt, add a text label next to the icon. I know it takes up more space, but clarity beats minimalism every time.

Color should mean something. Don't just make icons colorful because it looks nice. Use color to communicate meaning. Red for delete or error actions, green for success or add actions, blue for navigation, yellow for warnings. Users already have these associations in their heads, so use them.

Icons work best in context. A standalone icon on an empty screen is confusing. But the same icon next to related text or within a button makes perfect sense. Think about where the icon lives in your layout and what's around it.

The PowerIcons workflow

The reason I built PowerIcons was to make this entire process faster. Before, I was manually finding icons, editing them in a design tool, converting them to the right format, and then hoping they worked in Power Apps. It was tedious and slow.

Now the workflow is dead simple. Search for an icon, customize it visually, copy the code, paste it into Power Apps. Done. The icon is already optimized, the code is already formatted correctly, and it just works. You can update icons in seconds if you need to change colors or swap out a different style.

The tool supports multiple icon libraries, so you're not locked into one style. Lucide icons are my go-to for modern, minimal apps. Bootstrap icons are great for classic, clean designs. Fluent icons are perfect if you're building something that integrates with Microsoft 365. Material icons work well for apps with a Google-ish design language. Pick what fits your app and your audience.

Why this matters for your Power App

I keep coming back to this point: users judge your app by how it looks, not just how it works. You can build the most functional Power App in the world, but if it looks like garbage, people won't use it. They'll find excuses, they'll avoid it, they'll complain that it's "too complicated" when really they just don't want to look at something ugly.

Good icons fix this. They make your app feel polished and professional. They guide users through workflows without needing walls of text. They make your app memorable instead of forgettable.

And the best part? It takes almost no effort. You're not rebuilding your entire app or learning a new framework. You're just swapping out some icons. Five minutes of work, massive improvement in perception.

If you're building Power Apps and you want them to actually get used, start with the icons. Get them right, keep them consistent, and watch how much better your app feels. It's the easiest win you can get.

Head to PowerIcons.dev, pick some icons, and upgrade your app. Your users will thank you, even if they don't know why.