Icons

Most apps include icons that are commonly recognized, such as the floppy disk icon for "Save" or the back arrow for "Back". The advantages of using an icon versus a label or a button are that icons don't require text and can usually fit into areas where text doesn't.

Microsoft Power Apps includes the Icon control and provides many out-of-the-box icons that you can use throughout your app. Since icons are controls, they all have customizable properties including OnSelect and Color. You can insert an icon into your app by selecting the Insert button from the command bar. If you expand the Icons field, you can scroll through the complete list of available icons.

Adding an icon

If you've been building on our Contoso Coffee Machines app, then you've already dabbled a bit with the icon control (we changed a right arrow to an edit pencil). If you want to follow along with us, we'll use our Contoso Coffee Machines app to add a couple of icons. If you don't have this app, you can open any app and follow along.

1. Open the Contoso Coffee Machines app and select the "Catalog Screen".

2. Insert a "Back arrow" icon in the Header, by selecting the Header (in this example, Rectangle1) and then select Insert from the command bar. You can find the Back arrow by expanding the Icons option or by entering "back" in the Insert search field.

   Note

   When you insert the new icon, it picks up the selected Theme color scheme.

   

3. Reposition the new Back arrow icon in the top left corner of your header rectangle.

4. Change the icon's color to white by selecting the icon, choosing the Color button from the command bar, and selecting the white circle under Standard colors in the lower-left corner.

5. Update the OnSelect property to:

   Back()

6. Copy the Back arrow icon and paste it onto your "Admin Screen". This lets you reuse the icon with its configured Color and OnSelect properties.

Changing an icon

You can change an icon type by updating the Icon property of the Icon control. In this example, you’ll change a back arrow icon to a home icon.

1. Copy and paste another Back arrow icon onto the "Admin Screen".

2. Position it in the upper right corner of the header rectangle.

3. Select the Icon property button in the command bar and choose the Home icon. You can type "home" in the search field to locate it quickly. The Back arrow will immediately change to a Home icon. This method works for any icon in Microsoft Power Apps.

   

4. Update the OnSelect property to return to the home screen:

   Navigate('Home Screen')

   

Even though the app includes only three screens, the Home icon provides a consistent way to return to the home screen, which can be especially helpful in apps with many screens where the Back arrow might not return the user to the intended starting point.

Icons are a flexible control that can enhance the user interface of your app. In the next unit, you’ll learn about the Image control.