It is not possible to build a good app without the right icons. This is an example where I have copied the App Store design for my Apps.

Check this post for the final Microsoft App Store CLONE

(Example of PowerApp using SVGs adapting to Colour Design).

Introduction

Imagine you have 5-6 icons to test and you don't know which one to choose....

The problem is that it's a slow process. Maybe 1 minute per icon, if you also want to use variables to use your own Color Schema.

Here is my downloadable conversion application with option to use variants/parameters github

Requirements

The best way to implement any icon in power apps is by using SVG and converting it to an image.

This is explained very well by Matthew Devaney on his blog. It is important to understand how to convert it manually, so that you can then manipulate it safely.

Hand On

The process is quick and once you understand it, we will automate icon creation forever:

1. Get an SVG icon
2. Using a Variant (optional)
3. Convert to Image
4. Image as an icon

Get an SVG icon

I have found no better resource than yesicon for FREE selection of virtually any icon. It's a wonderful resource. You can also find them by category such as Lucide, Bootstrap Icons.

Let's look for a bell

Once selected without modifying anything. Simply click on copy

This way we won't select any particular colour. In fact the fill or stroke property will be filled with currentColor.

This way it will be easy to identify and rename it by our variable if necessary.

Using a Variant (opcional)

One of the main advantages of using SVG is being able to change the colour programmatically. So depending on the ThemeColor or if the DarkMode is active the icon will adapt.

In my case the variable I'm going to use is XMyThemeX.Colors.Hex.Primary. The detail of how I use my own colour Theme is in CustomTheme But most importantly, SVGs must have Colors in Hexadecimal format i.e. "#FFFFFFFF" for White.

For this reason I always have all my Colours calculated in both RGB and Hex.

Convert to Image

If you did not choose a colour or variant in your SVG, the conversion will be set to Black.

(click on the icon image to copy the new Image to the clipboard)

Before the conversion:

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 256 256"><g fill="currentColor"><path d="M208 192H48a8 8 0 0 1-6.88-12C47.71 168.6 56 139.81 56 104a72 72 0 0 1 144 0c0 35.82 8.3 64.6 14.9 76a8 8 0 0 1-6.9 12" opacity=".2"/><path d="M221.8 175.94c-5.55-9.56-13.8-36.61-13.8-71.94a80 80 0 1 0-160 0c0 35.34-8.26 62.38-13.81 71.94A16 16 0 0 0 48 200h40.81a40 40 0 0 0 78.38 0H208a16 16 0 0 0 13.8-24.06M128 216a24 24 0 0 1-22.62-16h45.24A24 24 0 0 1 128 216m-80-32c7.7-13.24 16-43.92 16-80a64 64 0 1 1 128 0c0 36.05 8.28 66.73 16 80Z"/></g></svg>

After conversion:

"data:image/svg+xml;utf8, " & EncodeUrl("<svg  xmlns='http://www.w3.org/2000/svg' width='60px' height='60px' viewBox='0 0 24 24'><path fill='"&XMyThemeX.Colors.Hex.Primary&"' d='M21 19v1H3v-1l2-2v-6c0-3.1 2.03-5.83 5-6.71V4a2 2 0 0 1 2-2a2 2 0 0 1 2 2v.29c2.97.88 5 3.61 5 6.71v6zm-7 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2'/></svg>")

The application convertn SVG to Images is in github. I will also explain how I do it at the end of the article.

Image as an Icon

We could paste the generated content inside the Image property of an Image object. But it would lack the hover experience of a button.

1. We will create a container (without Layout like the one in the image). This allows us to stack the object and leave the button on top.
2. Add a button inside the container

• Remove any colour you have in its properties or leave it transparent RGBA(0,0,0,0,0). Colour, Fill, Hover, etc...
• Heigh Parent.Heigh
• Width: Parent.Width

3. Add an image object to the back of the container

• We add the generated image to the Image property
• Heigh Parent.Heigh
• Width: Parent.Width

Now you have a button with hover experience on the mouse...

Extra

If you are interested in how I do the conversion, you can check out the SVG Icon App on github

I still leave here the steps:

1. SVG String Preparation

//Clean up. From the TextInput I Remove everything outside <svg> </svg>
//And also substitute double quotes " for single quotes ' 
UpdateContext({varCTXSVGCPrepare:
    Substitute(Concatenate("<svg ",First(Split(Last(Split(TextInputSVG.Text,"<svg") ).Value,"</svg>")).Value,"</svg>"),"""","'" )
});

2. Color Substitution for a Variant

//replacing fill & stroke with variant names
UpdateContext({varCTXColorString:"fill='""&"&textInputVariant_1.Text&"&""'"});
UpdateContext({varCTXColorStroke:"stroke='""&"&textInputVariant_1.Text&"&""'"});

UpdateContext({varCTXSVGCPrepare:Substitute(varCTXSVGCPrepare, "fill='currentColor'",varCTXColorString)});
UpdateContext({varCTXSVGCSubstitute:Substitute(varCTXSVGCPrepare, "stroke='currentColor'",varCTXColorStroke)});

3. Build the Image

UpdateContext({varCTXImageInitString:Substitute("'data:image/svg+xml;utf8, ' & EncodeUrl('", "'","""")});
UpdateContext({varCTXSVGImage:Concatenate(varCTXImageInitString,varCTXSVGCSubstitute,""")")});

The new Image can be retrived from varCTXSVGImage

Conclusion

If I had to recommend where an app can be improved with as little effort as possible it would be like this.

Happy Icons Happy App 🥳

The tedious task of converting icons is now a thing of the past.

This will make us more productive and result in better experiences for our users.

Next Step

If you don't use a SplashScreen for the initial loading of your app, I recommend you to do it as soon as possible.

Applying a Color system would be my next step. Check on:

DarkMode CustomTheme