We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.
If you like it or have questions, do share your feedback in the comments section below.
In this blog, I’ll show you how you can use rich icons in Power Apps that will not only make your app look better but also will not impact your app’s performance. We’ll know the use of Scalable Vector Graphics (SVG).
After completing this article, you will understand –
Scalability: The SVG images are resolution independent and can be scaled to any dimension without losing their quality. On other hand, Other pictures like jpg, png, etc. lose their resolution when enlarged because their small pixels are forced to expand beyond their original size.
Feasible Editing: SVG images are very easy to edit. It’s some code that you need to change using any code editor whether you want to change the color of the icon or the background as per your app’s theme. There is popular graphics editing software available where you can edit an SVG file.
File Size: Pixels-based image size varies from small to large based on use and that can cause performance issues in the application while loading any screen. Since SVGs are scalable so they can be saved at a minimal file size.
The most popular SVG icon/files sites are:
For Demo, we will use the Bootstrap icon sets –
1. Go to https://icons.getbootstrap.com/ and select any SVG icon that you want to use in your app. E.g. I am selecting the info fill icon.
2. Copy the SVG HTML code
3. Paste the code in VS Code or any code editor.
4. Replace all the double quotes (“) with a single quote (‘). Following will be the SVG that we will use in power apps –
5. Now, in the above SVG code, you can see various properties like height, width, and You can adjust height and width as per your need. And if you want to change the icon color you can use the HEX color code in the fill property and remove the currentColor which is by default. For e.g., Fill = ‘#0392d1’
6. After all these changes now our SVG code is ready to use in our app. Head back to the Power Apps canvas app screen where you want to add the icon and follow the below steps –
"data:image/svg+xml;utf8," & EncodeUrl("
Note: You can get SVG code from a SVG file by opening it in a notepad or any text/code editor.
There are the following ways we can use these icons –
1. Clickable Icons: To make any icon clickable and show a hand whenever the user hovers on it like a button. We just have to add a button above the icon with the following properties –
Height: Same as the image control’s height
Width: Same as the image control’s width
BorderRadius: As per icon shape.
2. Gradient Icon: To make any icon gradient we need to add some extra lines of codes inside the SVG tag. Following are the steps to create a gradient fill-in SVG icon –
Here, lgrad is the id of the defs tag so whatever your defs tag has you have to use the same.
The final SVG code will look like the below –
Well, this is the end of this post. Using the above trick, you can enhance your Power Apps UI with a bunch of rich icons.
Let me know if you have any queries or suggestions in the comment below. I will see you next time, till then, Happy Learning!
Euro Systems Headquarters, Glasgow
7000 Academy ParkGower StreetGlasgow, G51 1PRT: 0800 334 5238
Hybrid Analytica Consulting
112 Robinson Road #03-04, Robinson 112, Singapore 068902
Copyright © 2024 Evolvous. All Rights Reserved.