Tutorials/Power Apps/Enhance Your Apps with Over 2,000 Free Fluent UI Icons
Power Appsintermediate

Enhance Your Apps with Over 2,000 Free Fluent UI Icons

A practical guide to using Microsoft's free Fluent Design System icons in Power Apps, including an interactive gallery for browsing over 2,000 icons in multiple colors.

NA
Narmer Abader
@narmer · Published June 3, 2026

Icons are a simple yet powerful way to improve the usability and aesthetics of your Power Apps. They guide users, represent actions, and make interfaces feel professional. Microsoft's Fluent Design System provides a massive library of over 2,000 free icons, each available in multiple colors. In this article, you'll learn how to easily find, download, and integrate these icons into your own apps, using an interactive gallery built by the Power Platform community.

Building a Product Catalog App with Meaningful Icons

Imagine you are creating a catalog app to manage inventory for a retail store. Your app will display products in a gallery filtered by category. To make the categories visually distinct, you decide to assign a unique icon to each category: a smartphone icon for Electronics, a shirt icon for Clothing, an apple icon for Groceries, etc. Using the Fluent UI icons, you can find all these symbols in consistent style and color.

We'll follow these steps:

  • Find and download icons using the community icon browser.
  • Upload the SVG files as app resources.
  • Use images in controls and galleries.
  • Dynamically switch icons based on data.

Step 1: Browse the Icon Gallery

Several community members have packaged the entire Fluent UI System Icons set into an interactive Power Apps canvas app. You can download the app from the Power Platform Community Blog or directly from the author's site (see References). Once opened, the gallery displays all 2,000+ icons and lets you filter by name and choose from 30+ color variations.

Select an icon like Box for shipping, Heart for wish list, or Settings for configuration. Export the SVG file to your local machine. Keep the file name meaningful, e.g., icon_box.svg.

Step 2: Import SVG Icons as Resources

In your product catalog app, open the Resources pane (View > Resources). Click Import and select the .svg files. For better organization, prefix them with icon_. Power Apps supports SVG natively, so the image control can display them without conversion.

Step 3: Add an Image Control

Drag an Image control onto your screen (or inside a gallery). Set its Image property to the resource you added:

powerfxReferencing an imported icon
Image = icon_box

Adjust ImagePosition to ImagePosition.Fit for best appearance. The SVG scales cleanly to any size.

Step 4: Use Icons in a Gallery

If your gallery displays products, you can show the category icon alongside the product name. Add an Image control inside the gallery template. Then use a formula to pick the correct icon based on the category field.

Assume your data source has a column Category with values like "Electronics", "Clothing", "Groceries". You have imported icons icon_phone, icon_tshirt, icon_apple. The Image property of the icon control could be:

powerfxDynamic icon selection in a gallery
Switch(
  ThisItem.Category,
  "Electronics", icon_phone,
  "Clothing", icon_tshirt,
  "Groceries", icon_apple,
  icon_default
)

Make sure you also import a default icon for any unmapped categories.

Step 5 (Optional): Let Users Choose Icons

You could enhance the app by letting users pick an icon for each category from the gallery. Use a dropdown to select the category, then a button that opens the icon gallery (navigate to a separate screen where the user can browse and select). When selected, store the icon name in a collection or variable, and update the resource reference accordingly.

Performance Considerations

SVG icons stored as resources are lightweight and load quickly. For apps with many icons (e.g., 50+), they are still efficient because each resource is loaded once. However, avoid using hundreds of separate image controls if you only need a few at a time; consider reusing controls and swapping the Image property dynamically to reduce app memory.

Power Apps processes SVG files well because they are XML-based, but ensure they do not contain embedded scripts or external references (which Microsoft normally strips out). No delegation concerns apply to image controls.

Common Mistakes and Troubleshooting

  • Icon not displaying: Check that the resource name is typed exactly, including underscores. Resource names are case-insensitive but spelling matters.
  • Icon appears stretched: Set ImagePosition to Fit to maintain aspect ratio.
  • Can't find the right icon: The Fluent UI icon set is huge; use the search feature in the gallery app. If it's not there, consider combining two icons or creating a custom SVG.

Final Recommendation

The free Fluent UI icon library is a goldmine for Power Apps developers. By embedding them as resources, you can achieve a polished, Microsoft-consistent look without licensing restrictions. The community icon gallery tool makes exploration effortless. Give it a try in your next project.

References