A better icon will not rescue a confusing app. Start by making the action clear, then choose the simplest icon that supports it. In many cases, Power Apps' built-in Icon control is the safest option because it is easy to colour, size and label without managing another asset licence.
Choose the icon source deliberately
You have three practical routes:
- Built-in classic icons and shapes. Good for familiar actions such as edit, delete, add and navigation. Microsoft documents their behaviour and accessibility properties in the Shape and Icon control reference.
- Modern Icon control. Useful when your app already uses modern controls, but check the control's current limitations and theme behaviour before standardising on it.
- Imported SVG or raster media. Useful for brand or domain-specific symbols, provided you have the right to use and redistribute them.
Do not copy an icon merely because a website calls it free. Check whether attribution is required, whether commercial use is allowed, and whether redistribution inside an app package is permitted. Keep a licence record with the solution.
Build an accessible icon button
For an interactive icon:
- set
OnSelectto the action - set
AccessibleLabelto the action, not the icon's appearance - provide an accessible tooltip where supported
- keep a visible focus indication
- ensure the hit area is large enough to use on touch
- do not use colour as the only status signal
For example, a delete icon might use:
AccessibleLabel = "Delete " & ThisItem.Title
The nearby text and confirmation should identify what will be deleted. A bin symbol on its own is ambiguous to a screen reader and risky in a repeated gallery.
Microsoft's accessible canvas app guidance covers labels, keyboard access, contrast and control order. Test with keyboard navigation and the screen readers used by your organisation rather than treating property settings as proof of accessibility.
Add an imported SVG
Optimise the SVG before import:
- remove editor metadata and unused groups
- keep a valid
viewBox - remove scripts and external references
- use a simple path structure
- retain enough contrast at the smallest intended size
Import the file through the Media pane and use it in an Image control. Set ImagePosition to fit the intended layout. If the image is decorative, mark it appropriately; if it performs an action, give the interactive control an accessible label.
Avoid downloading thousands of assets into the app. Every extra media item adds ownership and maintenance work. Create a small approved set that covers recurring actions.
Use a component for repeated icon buttons
When the same icon, label, hover state and action pattern appears across several screens, wrap the presentation in a local component. For reuse across apps, use a component library, which Microsoft recommends for shared components. Component libraries notify app makers when updates are available, but consuming apps still need review and an update.
Expose properties such as:
- icon or image
- accessible label
- visible label text
- colour and disabled colour
- action behaviour
Keep business permissions outside the component. Hiding or disabling a delete icon is not a substitute for enforcing delete permission at the data source.
Test the states people actually see
Check default, hover, pressed, selected, disabled, high-contrast and error states. Test the component inside a gallery because repeated controls can affect keyboard order and accessible naming.
Also check the app on each supported screen size. A sharp SVG can still be unusable if the target is too small or the icon meaning changes without its label.
There is no defensible universal percentage by which better icons improve engagement. The proof is whether users can identify and complete the intended action in your app's usability and accessibility checks.
For more practical interface patterns that remain usable and maintainable, join the Power Apps Builders Space.