By Veronique LengelleIcons play a big part in user experience (UX). We’re so familiar with them that, most of the time we know what an action is doing by only recognising them.
In this blog post, I’ll show you that you’re not just limited to the out-of-the-box icons in Power Apps. Of course, you can still use SVGs from external sites for customising even more, but FLUENT UI icons will be another tool in your toolbox 😉
Resources
Before we get started, it’s important to understand best practices. This documentation from Microsoft will help you grasp what to do and not to do: Iconography.
Another resource provides you a list of different icons, whether Microsoft specific or not: Fluent UI – Available icons.
And finally, you can still use the Fabric Icons that can be found here: Office UI Fabric Icons.
Creator Kit
To use the Fluent UI icons, we’re going to use the Creator Kit. I like the Creator Kit because it offers so many modern components and is definitely a time saver.
And there’s a particular component just for that!
Add the Fluent UI Icon component
Open your app (or create a new one) in the environment where the Creator Kit is installed, and add the component by doing the following:
- Click on the “+” sign
- Click on Get more components (folder icon)
- Click on Code
- Search for Icon (or scroll down the list)
- Click on Fluent Icon
- Click on Import
Then we need to add the component to the screen. Back into the Insert panel, expand Code components and click on Fluent Icon. A default icon will we added to the screen!
Customise the component
Now if you select the component and look on the properties panel (right hand side), you can customise the icon, the type (buttons or icon only), the colors, the size, add some text, and so on.
So let’s grab an icon from the resources above 🙂 When you hover over an icon, a logical name will appear. Copy that name, go back to Power Apps, and select the Icon name property.
You can then change the color but note that this will be a text value 😉
Conclusion
Don’t be limited with only the out-of-the-box icons. You can create great apps, make them modern looking, and use the resources already built for you, by others! It only takes a couple of clicks!
Thanks for reading 🙂