Using SVG Images in PowerApps: Scalable Icons, Dynamic Data, and Animations

Why Consider SVG in PowerApps?

SVG (Scalable Vector Graphics) images offer several advantages over standard image formats like PNG or JPEG, making them ideal for PowerApps:

Infinite Scalability: SVGs are vector-based, so they remain crisp at any size. You can resize an icon or graphic without any loss of quality – no more blurry images on high-resolution displays[1]. This is perfect for apps that need to look good on everything from phones to large monitors.
Small File Sizes: SVGs are essentially XML instructions for drawing shapes, not pixel-by-pixel data. This typically leads to smaller file sizes and faster load times compared to bitmap images[2]. A lighter app means better performance for your users.
Transparency and Styling: SVG supports transparent backgrounds (unlike JPEG)[3], so your icons can blend seamlessly with any theme or color. Moreover, because SVGs are code, you can edit their colors or shapes via that code – even dynamically in PowerApps formulas.
Interactivity & Animation: Unlike static images, SVGs can be animated or made interactive, which opens up creative possibilities. You can add hover effects, smooth transitions, or other dynamic changes to SVG icons to enhance user experience[4]. We’ll explore how to leverage this in PowerApps, from color changes on hover to animated charts.

In short, SVG images are flexible, high-quality, and dynamic – a perfect combo for creating modern, responsive PowerApps UI.

Embedding SVGs in PowerApps (Image Control vs. HTML)

To use an SVG in PowerApps, you won't simply upload the .svg file as an image. Instead, you'll embed the SVG code as a data URI. The most common method is using an Image control with a special formula:

Add an Image control to your app (this will serve as a container for the SVG).
Copy the SVG's XML code – you can get this by downloading the SVG file and opening it in a text editor, or by using your browser’s Inspect Tool if the icon is on a webpage. (For example, right-click an SVG image file and “Open with Notepad” to see the markup[5].)
Set the Image control’s Image property to a string that contains the SVG code. This string must start with the SVG MIME type and be URL-encoded. A typical formula looks like:

Image.Image =
"data:image/svg+xml;utf8," & EncodeUrl("<svg ...> ... </svg>")

Begin with "data:image/svg+xml;utf8," to tell PowerApps this is SVG content[6].
Wrap the raw SVG markup inside an EncodeUrl() function. This encodes special characters properly so the SVG renders. For example:

"data:image/svg+xml;utf8," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' ...> ... </svg>")
Make sure to replace any double quotes " inside the SVG code with single quotes ' to avoid breaking the string[6].

Once set, the SVG image will appear in the app[7].
(Optional) Use an HTML Text control: In older versions, creators sometimes used an HTML Text control to directly embed <svg> markup. However, recent updates stopped rendering raw <svg> tags in HTML controls[8]. The workaround is essentially the same as the Image control: embed the SVG via an <img> tag with a data URI source[9]. For example:

HtmlText = "<img src='data:image/svg+xml;charset=utf-8," & EncodeUrl("<svg ...</svg>") & "' />"
This will display the SVG in the HTML frame[9]. In general, using the Image control is simpler and more performant for SVGs, especially since the Image control supports features like hover fill and is more flexible with animations.

Tip: If hand-coding the data URI sounds tedious, there are tools to help. For instance, the PowerApps SVG converter by Charles Sexton allows you to paste SVG code and it generates the data:image/svg+xml;...EncodeUrl("...") format for you[10]. This saves time in preparing the SVG string.

With the SVG embedded, you can move/resize the Image control as needed. It behaves like any image in PowerApps – but now you have the power to modify the SVG via formulas!

Where to Find SVG Icons and Images

One of the great things about SVGs is the vast amount of icons and graphics available online. Here are some excellent sources:

Microsoft Fluent UI Icons: Microsoft’s own icon set (formerly Office UI Fabric icons) is available in SVG format[11]. These can help your app feel native to the Office/Teams ecosystem.
Font Awesome and Material Design Icons: Popular icon libraries that offer free SVG downloads[12]. Font Awesome, for example, has thousands of icons. Material Design by Google is another huge collection.
Bootstrap Icons: A rich set of open-source icons in SVG form[13] (Matthew Devaney’s blog uses a Bootstrap icon in his SVG example).
Flaticon, IconFinder, Noun Project: These platforms aggregate icons (some free, some paid). You can often filter for SVG format.
SVGBox or SVGRepo: Online repositories of SVG graphics and illustrations.

Creattie.com – My Go-To Library: Personally, I use Creattie as a source for high-quality SVG icons and even Lottie animations. Creattie offers a curated library of static and animated icons in SVG (and Lottie JSON) format. It’s a premium resource, but they do have some free assets as well[14][15]. Insider tip: try to catch their lifetime membership deal around Black Friday – I did, and I love it! Having unlimited access to thousands of icons and animations has been a game-changer for quickly spicing up my apps.

When you find an icon you like, download the SVG (or copy its XML code if provided). Many sites have a “Copy SVG” button or let you tweak the icon color before downloading. Once you have the SVG code, you can incorporate it into PowerApps using the method described above.

Example: SVG Icon (Creattie) with a Hover Color Change

Let’s walk through a simple example: adding an SVG icon from Creattie and changing its color on hover in the app.

1. Get the SVG Icon Code: Suppose we want to use a "heart" icon from Creattie. After finding the icon on Creattie, download it as an SVG or copy its code via the browser’s dev tools (some icon sites provide the raw code directly). For this example, assume we have the SVG markup for a heart icon.

2. Embed the SVG in an Image control: Add an Image control in PowerApps and set its Image property using the data URI formula. For example:

ImageHeart.Image =
"data:image/svg+xml;utf8," & EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24'>
<path fill='#FF0000' d='M12 21.35l-1.45-1.32C5...Z' />
</svg>"
)

This would render a red heart icon (the fill='#FF0000' in the path sets it to red). In practice, you'd paste the full <path d='...'/> from the icon.

3. Implement a Hover color change: Out of the box, the SVG itself cannot directly have CSS :hover effects inside an Image control – PowerApps only allows inline SVG/CSS, and pseudo-classes like :hover are not supported in that context[16]. However, we can achieve a hover effect through PowerApps controls. Here are two approaches:

Overlay a transparent control: Place a transparent Button or Label over the image (or group them in a container). That overlay can use its HoverFill or HoverColor properties to create a visual effect. For example, you could set the overlay Label’s HoverFill to a semi-transparent white, giving the icon a "highlight" glow on hover[17]. This doesn't change the icon's color itself, but can simulate a highlighted icon (e.g. making a dark icon appear lighter when hovered)[18].

Hover effect achieved by overlaying a transparent label: when the user hovers, the label's HoverFill makes the icon appear highlighted (lightened).[17][18]

Swap or modify the SVG via variables: If you want the icon color to change on hover (say from red to blue), one simple trick is to use two Image controls – one with the default color, one with the hover color – and toggle their visibility based on a context variable. For example, on the overlay control’s OnHover, set a variable varHover=true and OnUnHover set varHover=false, then show/hide the appropriate colored icon. This is a bit clunky but effective for small cases.
Advanced – Invert the SVG for HoverFill: A clever solution is to pre-process the SVG icon to create an inverted mask of the icon, as detailed by PowerApps experts[19]. Essentially, you make an SVG where the icon shape is cut out of a solid background. Then you use the Image control’s Fill and HoverFill properties to control color. The icon’s shape will appear in the Fill color (because the shape itself is transparent in the SVG). On hover, the HoverFill color kicks in, and since the background changes, the icon appears to change color[19]. This approach requires editing the SVG (e.g. using a tool like Inkscape to subtract the shape from a rectangle), but it lets you achieve true icon color swap on hover using a single Image control with no overlay.

In our heart icon example, the simpler overlay method might suffice: you could overlay a label that on hover displays a different colored heart behind the original, or just gives a glow. The key point is that while SVG code alone can't do :hover in PowerApps, we can combine SVG with PowerFX logic to get the interactivity we want.

Binding Dynamic Data to SVGs

One of the superpowers of using SVGs in PowerApps is that you can inject dynamic data into the SVG code. Since the SVG is just a text string, you can concatenate Power FX formulas and variables right into it. This allows your graphics to respond to app data in real-time.

Changing properties via variables: For example, say you have an SVG icon and you want its color to reflect a user-selected theme color. You might have a Color variable (e.g. varIconColor). In the SVG string, set the fill attribute to that variable. You can do this by breaking the string and concatenating the variable’s value. One technique is converting the color to a hex string. A Reddit solution suggests using the JSON() function to get a color in hex form and then slicing it, for instance: fill='" & Mid(JSON(varIconColor), 2, 7) & "'"[20]. This inserts a color like#FF5733` into the SVG code at runtime. As the variable changes (say the user picks a different color), the SVG will update to that new color.

Dynamic sizes and coordinates: You can also drive dimensions or positions from data. For example, if you are displaying a value as a bar length, you could insert the numeric value into the width of a <rect> element. If varValue = 75, your SVG string could include width='" & varValue & "' (assuming some scale) so the bar renders 75 units long. Whenever varValue updates, the bar length updates.

Generating multiple SVG elements from data: Power FX allows you to construct strings by iterating over tables or collections. Using functions like Concat() or ForAll(), you can dynamically create multiple SVG elements. For instance, imagine a simple bar chart with a collection of scores. You could do something like:

"data:image/svg+xml;utf8," & EncodeUrl(
"<svg width='100%' height='120' xmlns='http://www.w3.org/2000/svg'>" &
Concat(
colScores,
"<rect x='10' y='" & (10 + 30 * ID) & "' width='" & Score & "' height='20' fill='#4caf50' />"
) &
"</svg>"
)

Here colScores might be a collection with fields ID (index 0,1,2,...) and Score. The formula concatenates a <rect> for each item, spacing them vertically by 30 and setting width based on the Score value. The result is an SVG with multiple bars rendered. This technique was used by a PowerApps maker to dynamically draw a grid of rectangles (like a mini chart or warehouse map) inside a gallery – they used nested Concat( Sequence(...) ) calls to generate dozens of <rect> elements based on their item’s data[21][22].

Because the SVG is re-rendered on-the-fly, it can reflect whatever data is passed in. You can get creative: dynamically highlight certain parts of an SVG (by changing their fill via conditions), display text by inserting it into <text> elements, etc. If you can compute it in PowerApps, you can inject it into the SVG.

For example, consider a progress percentage displayed visually. We could have an SVG circular progress graphic where a variable varProgress (0–100) controls the arc length and text. In the SVG string, we insert varProgress in a couple of places – once for the text content (e.g. "& varProgress &"%) and once in a shape attribute (perhaps stroke-dasharray for the circle's fill). This is exactly what an animated progress circle example does: it defines an SVG with a text node showing varProgress and a circle whose stroke is partially filled based on varProgress[23]. As that variable changes (when a user clicks +10% for instance), the graphic updates to show the new percentage.

The ability to bind SVGs to data means you’re not limited to static icons. You can create data-driven visuals – gauges, charts, indicators – all within an image control, without relying on external chart controls. This gives you a lot of flexibility to craft custom visuals that match your app’s needs and style.

Adding Animations to SVGs in PowerApps

Static SVGs are great, but adding animation can make your app feel more alive and responsive. There are a couple of ways to animate SVG content:

SMIL Animations (SVG <animate> tags): SVG has a built-in animation capability via <animate> and related elements. You can animate attributes of SVG elements (like a rectangle’s width or a circle’s radius) over a duration. For example, to animate a bar growing from zero to full width, you might include:

<rect width="0" ...>
<animate attributeName="width" from="0" to="100" dur="1s" fill="freeze" />
</rect>
This snippet would smoothly increase the <rect>’s width from 0 to 100 over 1 second[24][25]. The fill="freeze" keeps the final state. (Note: In a vertical bar scenario, you might animate the height and adjust the y position to make it grow upward.) SMIL animations run automatically once the SVG loads, so they can be great for entrance effects or loading animations.

CSS Animations within SVG: You can embed CSS inside an SVG’s <style> tag and define @keyframes animations or transitions. When the SVG is rendered, those animations will play. The advantage of CSS animations is you can get more complex easing functions and even trigger animations on state changes. In PowerApps, the SVG is re-rendered when variables change, which can retrigger CSS animations if they are defined accordingly.

For example, the animated progress circle we mentioned uses a CSS keyframe to animate the stroke of a circle from 0% to the target percentage[26]. The SVG’s <style> includes: @keyframes progressbar { from { stroke-dasharray: 0,100; } to { stroke-dasharray: varProgress, 100 - varProgress; } } and the circle has animation: progressbar 2s; applied[27][26]. When the app updates varProgress and effectively reloads that SVG, the circle animates to the new value. This approach yields a smooth tweening of the arc with a predefined duration (2 seconds here).

You can also use CSS animation-timing-function (e.g. ease-in-out, cubic-bezier curves) to control the easing of these animations for a polished feel. Tools like EasingWizard can help you generate keyframes or bezier curves for custom easing – you can then plug those into the CSS inside your SVG to get, say, a bouncing or elastic effect as an animation plays.

Animated SVG Icons (pre-made): Some libraries (like Lottie or Animated SVG icon sets) offer icons that are already animated (e.g., a loading spinner or a heart that pulses). If they are pure SVG (or Lottie JSON via a web viewer), you could integrate them. Creattie, for instance, provides Lottie animations – while not directly SVG, they can be used in PowerApps via the HTML control or as video/GIF. However, sticking to SVG, you might find animated SVG files (which use the above techniques under the hood). Embedding those would also work in the Image control, since the image control will honor the SVG’s internal animation directives.

When adding animations, be mindful of performance – but simple SVG animations (tweens, rotations, etc.) are usually very lightweight. They run on the client side and do not require any PowerApps timer or repeated updates, which is a huge plus. The animations defined in SVG/CSS run independent of the PowerApps logic once triggered, resulting in smooth visual effects without taxing PowerApps’ processing.

Example: Dynamically Animated Bar Chart with Easing

To bring it all together, let's consider a final example: a dynamic bar chart whose bars animate into view with an easing effect. This showcases dynamic SVG generation, data binding, and animation:

Scenario: Suppose we have a list of sales figures for different products, and we want to display a horizontal bar chart of their values when the screen opens. Instead of bars just appearing at full length, we want them to slide in from zero width with a nice easing (like an "ease-out" so they decelerate).
SVG Construction: We use an Image control and set its Image property to an SVG string. We Concat through our data (e.g., a collection of products) to output a <rect> for each bar. The width of each <rect> will be based on the sales value (perhaps scaled down to fit, e.g., value * 5 pixels per unit).
Animation via CSS: In the SVG’s <style>, we define a keyframe animation for the bars. For instance:

@keyframes growWidth { from { width: 0; } to { width: VAR_WIDTH; } }
.bar { animation: growWidth 1s ease-out forwards; }
We can dynamically insert the target width (VAR_WIDTH) for each bar if needed, or more simply, use CSS transitions. Alternatively, we might not even need separate keyframes per bar – we can set each <rect> with a width="0" initially and then use a single keyframe that grows to 100% width, if we set each rect's width as a percentage of its target. However, for clarity, let's say we use individual animations.

Animation via SMIL: As another approach, we could attach an <animate> element to each rect:

<rect width="0" x="0" y="..." fill="#4caf50">
<animate attributeName="width" from="0" to="200" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.25 0.1 0.25 1" />
</rect>
In this example, the calcMode="spline" with keySplines="0.25 0.1 0.25 1" is an ease-in-out cubic-bezier (this is an example of using a custom easing curve similar to CSS ease-out). Each bar’s <animate> can have the to value set to that bar’s target width. The result: when the SVG loads, each bar grows from 0 to its full length in 1.2 seconds with a smooth easing. Using fill="freeze" makes sure the bars stay at their final width after the animation[25].

The dynamic part comes if these values can change (say the user filters data and the chart should update). If the width values or the number of bars is tied to variables or collections, the Image control will get a new SVG string on change, and the animations will replay for the new data. This means whenever the data updates, the bars animate to their new widths automatically – a very slick effect for data that might fluctuate.

Putting it in PowerApps: You might have something like:

"data:image/svg+xml;utf8," & EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='200'>" &
"<style>
.bar { fill:#4caf50; }
.bar.animate { animation: grow 0.8s ease-out forwards; }
@keyframes grow { from { width:0; } to { width:100%; } }
</style>" &
Concat(colSales,
"<g transform='translate(0," & (10 + 30 * Index) & ")'>" &
"<rect class='bar' width='0' height='20'></rect>" &
"<text x='5' y='15' fill='#000'>" & ProductName & "</text>" &
"<rect class='bar animate' width='" & (Sales*5) & "' height='20'></rect>" &
"</g>"
) &
"</svg>"
)

In this pseudo-code, each data item produces two rects: one static (0 width) and one with class 'animate' and full target width. The CSS .bar.animate animation grows from 0 to 100% of that rect’s specified width. The result is each bar (the green rectangle) animates from nothing to its full length. (We also included a text label for the product name on each bar for clarity.)

While the exact implementation can vary, the takeaway is that PowerApps + SVG allows complex visuals with animations that would otherwise require external chart controls or JavaScript libraries. And all of this is done with just a single Image control in a canvas app!

By considering SVG images in your PowerApps, you unlock a world of customizable, high-resolution, and even animated visuals. We covered why SVG is worth it (quality, performance, flexibility), how to get them into PowerApps, where to find great SVG assets (don’t forget to check out Creattie and other libraries), and how to push them further with dynamic data and animations. With modern Power FX formula capabilities and responsive containers, these techniques integrate smoothly into your app designs. So go ahead – experiment with SVG icons for your buttons, create that animated progress indicator, or build a dynamic chart. Your apps will not only look sharper, but also feel more interactive and alive, all thanks to the power of SVG in PowerApps!

[1] [2] [3] [5] [6] [7] [11] [12] [13] [16] [17] [18] SVG Images in Power Apps - Matthew Devaney