Power Apps Icons Not Working? Here's How to Fix Them

2024-11-12

You added an icon to your Power App and it's not working. Maybe it's not showing up at all, maybe it's the wrong color, maybe it's weirdly sized or positioned. You've checked the formula three times, you've restarted Power Apps, and you're about five minutes from giving up and just using text instead.

I've debugged this exact problem probably a hundred times. The frustrating thing about Power Apps icons is that when they break, the error messages are useless or nonexistent. The icon just doesn't work, and you're left guessing why.

Here are the eight most common icon problems in Power Apps and how to actually fix them. One of these is probably your issue.

Problem 1: The icon isn't showing up at all

You paste your SVG code into the Image property, and nothing appears. The Image control is there, but it's just blank. This is the most common problem and it usually has one of three causes.

Cause one: The formula doesn't start with an equals sign. Power Apps treats the Image property as a formula. If you don't start with =, Power Apps thinks you're trying to use a literal string, which doesn't work. The formula needs to be ="data:image/svg+xml,..." with the equals sign at the start.

Fix: Click on the Image property, make sure the entire value starts with =, and that the SVG data URI follows immediately after.

Cause two: The SVG code isn't URL-encoded. If your SVG has unencoded special characters like <, >, #, or spaces, Power Apps can't parse it. The characters need to be encoded (< becomes %3C, > becomes %3E, # becomes %23, space becomes %20).

Fix: Run your SVG through a URL encoder or use PowerIcons which handles encoding automatically. If you're doing it manually, make sure every special character is properly encoded.

Cause three: There's a syntax error in your SVG code. Maybe a tag isn't closed properly, or there's a misplaced quote, or some attribute is malformed. Power Apps just fails silently when the SVG is invalid.

Fix: Copy your SVG code (before encoding) and paste it into an online SVG validator. It'll tell you exactly what's wrong. Fix the errors, then re-encode and paste into Power Apps.

Problem 2: The icon is the wrong color

Your icon shows up but it's black, or gray, or some random color that definitely isn't what you wanted. You set the color in the SVG code but Power Apps is ignoring it.

Cause one: The hex code isn't URL-encoded. Color codes in SVG use # like #0078D4. But in a URL-encoded string, that # needs to be %23. If you have stroke='#0078D4' in your encoded SVG, it won't work. It needs to be stroke='%230078D4'.

Fix: Find the color code in your Image property value. Change # to %23. So #FF0000 becomes %23FF0000.

Cause two: You're setting fill instead of stroke or vice versa. Some icons use stroke for color, some use fill. If your icon is outlined, it probably uses stroke. If it's solid/filled, it uses fill. Setting the wrong one does nothing.

Fix: Look at your SVG code and see which attribute controls color. If the icon should be outlined, make sure you're setting stroke not fill. If it should be solid, set fill.

Cause three: There are multiple color attributes and you only changed one. Sometimes SVG icons have color defined in multiple places, or there's a default color set on the SVG tag itself that overrides individual elements.

Fix: Search your SVG code for all instances of stroke= and fill=. Make sure they're all set to your desired color (URL-encoded). If you see stroke='currentColor' or fill='currentColor', change those to your actual hex code.

Problem 3: The icon is too small or too large

The icon appears but it's ridiculously tiny, or it's huge and covers half your screen. You set Width and Height but something's still wrong.

Cause one: Width and Height aren't set at all. If you manually paste just the SVG data URI without setting dimensions, Power Apps might default to weird sizes.

Fix: Select the image control. In the properties panel, explicitly set Width and Height. Start with equal values like 48 and 48.

Cause two: Only one dimension is set. If you set Width but not Height (or vice versa), Power Apps might stretch the icon strangely.

Fix: Set both Width and Height to the same value. Most icons are designed to be square, so matching dimensions keeps them proportional.

Cause three: The viewBox in the SVG doesn't match typical dimensions. Most icons have a viewBox of 0 0 24 24, but some might be 0 0 100 100 or other values. This affects how the icon scales.

Fix: Check the viewBox attribute in your SVG code. If it's something weird, you might need to find a different version of the icon or manually adjust the viewBox to 0 0 24 24.

Problem 4: The icon has invisible parts or looks incomplete

The icon shows up but parts of it are missing, or it looks cut off, or elements that should be there are invisible.

Cause one: Some paths are using a color that matches the background. If part of your icon is white and your background is white, that part will be invisible.

Fix: Make sure all parts of your icon use colors with good contrast against your background. Check both stroke and fill attributes on all paths in the SVG.

Cause two: The icon uses multiple colors and you only set one. Complex icons might have different colors for different elements. If you set the main color but there are other elements with their own color attributes, those might not match.

Fix: Search your SVG for all color attributes and make sure they're all set appropriately. For most use cases, you want monochrome icons, so set everything to the same color.

Cause three: The viewBox is cropping the icon. If the viewBox dimensions don't encompass the entire icon path, parts get cut off.

Fix: This is tricky to fix manually. Either find a different version of the icon or use an SVG editor to fix the viewBox. PowerIcons handles this automatically by using well-formed icons.

Problem 5: The icon doesn't work on mobile but works on desktop

Your icon looks perfect when you test in the browser, but when users open the app on their phones, the icon is broken or invisible.

Cause one: The icon is too small to render properly on mobile. Some complex icons with thin strokes don't render well at small sizes on mobile devices.

Fix: Increase the icon size for mobile. Use responsive properties or conditional logic to show larger icons on mobile. Generally, icons should be at least 40px on mobile, preferably 48px or larger for touch targets.

Cause two: There's a mobile-specific rendering issue with the SVG. Some browsers on mobile handle SVG differently than desktop browsers.

Fix: Test with simplified icons. If complex icons fail on mobile, use simpler, bolder icons with thicker strokes and fewer paths. PowerIcons' libraries are all designed to work well on mobile.

Cause three: The color doesn't have enough contrast on mobile screens. Mobile screens, especially in bright sunlight, need higher contrast than desktop monitors.

Fix: Increase color contrast. Use darker colors for icons on light backgrounds, lighter colors for icons on dark backgrounds. Test your app on a real phone outside to see how it looks in sunlight.

Problem 6: Icons work in edit mode but not when published

This is super frustrating. Everything looks perfect when you're editing the app, but when you publish it and users open it, icons are broken.

Cause one: The SVG contains relative URLs or references that don't work in published mode. Some SVGs reference external resources or use relative paths that work in one context but not another.

Fix: Make sure your SVG is completely self-contained. No external references, no linked stylesheets, no font imports. Just pure SVG markup with inline styles.

Cause two: There's a character encoding issue that only appears in production. Sometimes copy-paste introduces invisible characters that work in edit mode but break in published apps.

Fix: Delete the icon and re-add it from scratch. If you're using PowerIcons, copy fresh code. If you're doing it manually, make sure you're using UTF-8 encoding everywhere.

Cause three: The app is hitting some size or complexity limit in production. Power Apps has various limits that only apply to published apps, not edit mode.

Fix: Simplify your icons. Use optimized SVGs with minimal paths and no unnecessary metadata. Remove any icons you're not actually using.

Problem 7: Icon loads slowly or causes performance issues

The icon works but it takes forever to appear, or it causes your app to stutter and lag.

Cause one: The SVG is bloated with unnecessary code. Unoptimized SVGs can be 10x larger than they need to be, full of metadata, comments, and unused elements.

Fix: Run your SVG through an optimizer like SVGO before using it. Or use PowerIcons which provides pre-optimized icons. The difference can be dramatic – a 5KB SVG might optimize down to 500 bytes.

Cause two: You have too many icons on one screen. Every icon has a rendering cost. If you have 50+ icons on a single screen, it's going to be slow.

Fix: Reduce icon count. Do you really need an icon for everything? Can some elements just use text? Can you split content across multiple screens?

Cause three: The icon has complex paths with lots of curves and calculations. Some icons are just computationally expensive to render.

Fix: Use simpler icons. Geometric shapes render faster than organic, curvy designs. Stick with clean, simple icon libraries like Lucide or Fluent.

Problem 8: The icon doesn't respond to clicks

You set up OnSelect logic, but clicking the icon doesn't do anything.

Cause one: The Image control's DisplayMode is set to Disabled or View. If DisplayMode isn't "Edit", OnSelect won't fire.

Fix: Select the image control, go to properties, and set DisplayMode to Edit (or use a formula that evaluates to Edit).

Cause two: There's another control on top of the icon blocking clicks. Maybe a transparent container or another element is catching the click events before they reach your icon.

Fix: Check your component tree. Make sure the icon isn't buried under other controls. Reorder elements so the icon is on top, or check that parent containers aren't blocking interactions.

Cause three: The OnSelect formula has an error. If your OnSelect code is broken, it fails silently and nothing happens.

Fix: Check your OnSelect formula for errors. Test it with something simple like Set(TestVar, "clicked") to verify that clicks are registering. Then add your actual logic back piece by piece.

Debugging strategy

When an icon breaks, here's my systematic approach to figuring out what's wrong.

Start by checking if the Image control exists and is visible. Set a colored background on the control so you can see exactly where it is. If the background shows up but the icon doesn't, the problem is with the SVG code. If the background doesn't show up, the control itself is the issue.

Check the Image property formula. Make sure it starts with =. Make sure the SVG data URI is properly formatted. Copy just the data URI part and paste it into a browser address bar. If the browser can render it, Power Apps should be able to as well.

Test with a known-good icon. Go to PowerIcons, copy any simple icon, and paste it into your Image control. If that works, your control is fine and the problem is with your specific icon code. If that doesn't work, something's wrong with how your control is configured.

Check parent containers. Sometimes icons don't show because a parent container has Visible set to false, or Height set to zero, or some other property that hides everything inside it.

Test in different contexts. Does the icon work on other screens? Does it work in a different app? This helps isolate whether the problem is specific to that one control or a broader issue.

Prevention is easier than debugging

Once you've fixed your icon issues, here's how to avoid them in the future.

Use a consistent source for icons. If PowerIcons works for you, keep using it. If you're manually crafting SVGs, document your process so you do it the same way every time. Consistency prevents errors.

Test immediately after adding icons. Don't add ten icons and then test. Add one, verify it works, then add the next. This way if something breaks, you know exactly which change caused it.

Keep a library of working icons. When you get an icon working perfectly, save the formula somewhere. Next time you need that icon, copy from your library instead of starting from scratch.

Use optimized, well-formed icons from reputable libraries. Random SVGs from the internet might have quirks or errors. Stick with established libraries like Lucide, Fluent, or Material that are maintained and tested.

When to just use a different approach

Sometimes icons in Power Apps are more trouble than they're worth. If you're fighting with icons for hours and nothing works, consider alternatives.

Text labels are always reliable. They might not look as sleek as icons, but they're crystal clear and never break. If your icon keeps failing, maybe just use text.

Power Apps' built-in icons work without SVG code. They're limited and kind of ugly, but they're guaranteed to work. Sometimes good enough is better than perfect but broken.

Images stored as media assets are another option. Export your icon as a PNG, add it to your app's media, and use that. You lose the scalability of SVG, but you gain reliability.

The PowerIcons advantage for troubleshooting

Most icon problems in Power Apps come from malformed or unoptimized SVG code. PowerIcons eliminates this entire class of problems by providing clean, tested, optimized icons that just work.

Every icon on PowerIcons has been used successfully in real Power Apps. The encoding is correct, the colors work, the sizing is consistent. You're not debugging weird SVG quirks, you're just building your app.

If an icon from PowerIcons doesn't work, it's almost certainly a problem with your app configuration (like DisplayMode or visibility), not the icon itself. That makes troubleshooting way faster because you know where to look.

Most icon problems are fixable

The good news is that almost every icon problem has a solution. It's just a matter of systematically checking the common issues until you find the one affecting you.

Start with the basics: equals sign, URL encoding, proper color codes. Then check sizing and visibility. Then look at parent containers and app configuration. Work through the list and you'll find the problem.

And next time, use tools that make icons easier. PowerIcons exists specifically to eliminate these problems. Clean code, proper formatting, tested icons. It's free, it's fast, and it means you spend less time debugging and more time building.