Icon Best Practices for Power Apps

2024-10-22

I've reviewed probably hundreds of Power Apps at this point, and the icon usage is almost always a mess. People either use way too many icons, or they pick random icons that don't match, or they use icons that nobody understands. It's not because they're bad designers. It's because nobody teaches you how to actually use icons in Power Apps effectively.

So here's what I've learned from building and fixing a ton of Power Apps. These aren't theoretical "best practices" from a design book. This is practical advice from seeing what works and what doesn't in real applications that real people use.

The biggest icon mistake everyone makes

You know what kills most Power Apps visually? Mixing icon styles. Someone grabs a rounded icon from one library, a sharp outlined icon from another, and maybe throws in a filled icon for good measure. The result looks like a Frankenstein app where nothing fits together.

I get why it happens. You're searching for a "settings" icon, you find one you like, and you paste it in. Later you need a "home" icon, and you grab whatever looks good in the moment. Over time, your app becomes this mishmash of different styles, and it looks amateur even if everything works perfectly.

The fix is simple but requires discipline: pick one icon library and stick with it. If you start with Lucide icons, use Lucide for everything. If you like Bootstrap icons, great, but then all your icons should be Bootstrap. Don't mix them unless you have a really good reason.

The only exception I'd make is if you're deliberately using different styles to show hierarchy. Like maybe all your primary navigation uses one style, and all your secondary actions use another. But even then, you need to be consistent within each category. Most people should just stick to one library though. It's easier and looks better.

Size matters more than you think

This is another thing people mess up constantly. They'll have a 64-pixel icon next to a 48-pixel icon next to a 32-pixel icon, and they wonder why their app looks chaotic. Your eyes pick up on these inconsistencies even if you're not consciously aware of it, and it makes everything feel off.

Here's what I do: I define three or four standard sizes at the start of a project and never deviate from them. Usually something like 24px for small indicators, 40px for standard action buttons, 64px for feature cards, and maybe 80px for hero sections. These specific numbers aren't magic, but having defined sizes is what matters.

The key is that the same type of element always uses the same icon size. If all your navigation buttons have 40px icons, users develop a mental model. They know what to expect. When you randomly make one button's icon bigger or smaller, it breaks that pattern and creates confusion.

Also, don't make icons too small. I see this all the time on mobile Power Apps. Someone designs on their desktop with tiny icons, and then on a phone, those icons are basically invisible. If your app needs to work on mobile, test on an actual phone and make sure the icons are still clearly visible and tappable. Generally that means nothing smaller than 32px for touch targets.

When icons need labels and when they don't

There's this myth that icons alone are always better because they're cleaner and save space. That's wrong. Some icons are universally understood, and some aren't. The problem is that developers often can't tell the difference because they know their own app too well.

Icons like search (magnifying glass), home (house), menu (three lines), and close (X) are pretty universal. Most people recognize these instantly. You can usually get away with using these icons without labels, though labels never hurt.

But then there are icons that are ambiguous or context-dependent. A gear could mean settings, configuration, tools, or admin functions. A bell could be notifications, alarms, or reminders. A star could be favorites, ratings, or featured items. If there's any ambiguity, add a label.

The test I use: show the icon to someone who's never seen your app before and ask them what they think it does. If they hesitate or guess wrong, add a label. It's that simple. Your goal isn't to make the cleanest possible UI. Your goal is to make an app that people can actually use without getting confused.

When you do add labels, put them below the icon for vertical layouts or to the right for horizontal layouts. Keep the text short. One or two words max. And make sure the label is always the same color as the icon so they're clearly associated.

Color actually communicates meaning

This is something most people get wrong. They pick colors for icons based on what looks pretty, not what makes sense. Then users get confused because the visual language doesn't match their expectations.

Red should almost always mean something destructive, dangerous, or wrong. Delete actions, error states, critical warnings. Don't make your "save" button red because you think it looks bold. People will hesitate before clicking it because red triggers a "wait, is this going to break something?" response.

Green is for positive actions, success states, or adding things. Create, confirm, success messages. It feels safe and encouraging. Blue is neutral and works well for navigation and information. Yellow or orange is for warnings or important notices that aren't quite errors. Gray is for disabled or secondary actions.

You don't have to follow these exactly, but you should have a consistent color system. The same action type should always use the same color. All delete actions should be the same red. All create actions should be the same green. Users learn these patterns quickly, and then they can navigate your app faster because the colors give them instant context.

One mistake I see often: making every icon a different color just to add visual interest. Don't do this. It looks like a kindergarten app and it removes the communicative value of color. Most icons should probably be the same neutral color, with accent colors reserved for specific meanings.

Accessibility isn't optional

Here's something most Power Apps developers ignore: not everyone can see your icons clearly. Some people have color blindness, some have low vision, some are using your app in bright sunlight where contrast is terrible. If your app relies entirely on icons with no text alternatives, you're locking out a chunk of your users.

The fix is straightforward. Always provide a text alternative, even if it's just in a tooltip or screen reader label. Power Apps has an AccessibleLabel property for exactly this reason. Use it. When you add an icon button, set the AccessibleLabel to describe what it does. "Open menu", "Search", "Delete item", whatever.

Also test your app with poor contrast. Put your phone in the sun and see if you can still distinguish the icons from the background. Or use a color blindness simulator to check if your red and green icons are still distinguishable for colorblind users. These tests take five minutes and can reveal serious usability problems.

The general rule: never rely on color alone to communicate something important. If you use red for errors, also use an icon or text that says "error". If you use green to show a field is valid, also show a checkmark. Redundancy in UI is usually good.

Context is everything for icon placement

An icon that works perfectly in one part of your app might be confusing in another. Context matters. A plus icon on a blank screen could mean anything. But a plus icon at the bottom of a list? Obviously it's "add new item". Same icon, totally different clarity based on where it appears.

When you place icons, think about what's around them. Icons work best when they're next to or inside related elements. A search icon inside a search bar makes instant sense. A search icon floating in a corner? Less clear. Put icons where users expect them based on what they're trying to do.

Also consider the user's mental state when they encounter each icon. On your home screen, users are exploring and figuring out what to do, so icons need to be super clear with labels. Deep in a workflow, users know what they're doing, so you can be more minimal. Someone who just filled out a form knows that the green checkmark icon means "submit". You don't need a big button that says "Submit Form Now".

When to use filled vs outlined icons

Most icon libraries offer both filled and outlined versions. Outlined icons are usually better for most situations because they're lighter and less visually heavy. They work well for navigation, secondary actions, and anywhere you want a clean, minimal look.

Filled icons are heavier and draw more attention. Use them for primary actions or to indicate selected states. If you have a navigation menu and one tab is active, you might show that with a filled icon while the others are outlined. Or if you want to really highlight a primary action button, a filled icon makes it more prominent.

The mistake is using filled icons everywhere because you think they look bolder or more modern. They do, but they also create visual clutter if overused. The whole point of filled vs outlined is to create hierarchy and guide attention. If everything is filled, nothing stands out.

Icons in mobile vs desktop Power Apps

What works on desktop doesn't always work on mobile. On desktop, you have space, precision mouse control, and usually better lighting conditions. On mobile, you have limited space, fat fingers, and users who might be walking around or in bright sunlight.

For mobile, make icons bigger and give them more touch area. A 24px icon might be fine on desktop, but on mobile it's too small to accurately tap. Bump it to at least 40px and make sure the entire button hitbox is at least 44px square, which is the minimum recommended touch target size.

Also reduce the number of icons on mobile screens. What looks fine with ten icons on desktop feels cramped and overwhelming on mobile. Pick the most important actions and only show those. The rest can go in a menu or secondary screen.

And test on actual devices, not just the emulator. The emulator lies. What looks great on your desktop monitor might be completely illegible on a real phone in real conditions. I learned this the hard way after shipping an app that looked perfect in testing but was basically unusable on actual phones.

The PowerIcons advantage

This is why I built PowerIcons to support multiple libraries with consistent output. You can stay within one icon family easily because you're not jumping between different websites and tools. Everything uses the same customization interface, the same export format, the same workflow. It's much easier to maintain consistency when your tooling supports it.

The color picker lets you match your exact brand colors, so all your icons are perfectly consistent. The size controls are standardized, so you're not guessing at dimensions. And the code output is always clean and optimized, which helps with performance and maintainability.

Just ship it and learn

Here's my final piece of advice: don't overthink this. Yes, follow these practices. Yes, be consistent. But don't spend weeks perfecting your icons before you ship. Get your app in front of users, watch how they interact with it, and adjust based on real feedback.

Users will tell you pretty quickly if an icon is confusing. They'll click the wrong things, they'll ask questions, they'll hesitate before taking actions. That's your signal to add labels, change colors, or swap icons. The best icon system is the one that your actual users understand, not the one that looks best in theory.

Start with consistency and clarity, ship it, iterate based on feedback. That's the workflow. Your first version doesn't have to be perfect. It just has to be good enough to learn from.