Convert SVG to Power Apps & Power Fx

1. Provide your SVG

2. Copy your Power Fx formula

How this works

To convert SVG to Power Apps, the markup has to reach a control's property as a Power Fx string — Power Apps doesn't accept raw SVG directly. This tool minifies your SVG to one line, swaps its double-quoted attributes for single quotes (so the whole thing can sit inside a Power Fx double-quoted string literal without escaping every attribute), and wraps it in one of three formats depending on which control you're targeting.

Which output should I use?

Image control (EncodeUrl) — recommended for most cases. Paste it into an Image control's Image property, or into Set(varIcon, ...). The SVG stays readable inside the formula, which matters if you ever need to tweak a color or path by hand, or interpolate a variable into it later. EncodeUrl() is a real Power Fx function that percent-encodes the string when the app runs, so no encoding happens in this tool. Image control (Base64) — also goes into an Image control's Image property, and is what you'll see in most older Power Apps tutorials. It's compact but the formula itself becomes an opaque blob you can't edit afterward. HTML Text control — paste into an HTML Text control's HtmlText property, which renders the SVG markup directly as HTML with no data-URI wrapper at all. This is the best option if you want to build the color or a path point dynamically with Power Fx string concatenation (&), since the markup isn't hidden inside an encoded string.

Why single quotes instead of double quotes?

SVG and HTML both treat single and double quotes as equivalent attribute delimiters, but a Power Fx string literal is itself delimited by double quotes — so an SVG's normal width="24" attributes would end the Fx string early unless every one was escaped as width=""24"". Converting them to width='24' instead sidesteps that entirely and keeps the formula far more readable.

Frequently asked questions

Why did fetching my SVG URL fail?

Most likely CORS (Cross-Origin Resource Sharing): browsers block a page from reading the contents of a file hosted on a different domain unless that server explicitly allows it. This is a browser security rule, not a bug in this tool — download the SVG and paste its contents, or drag the file in, instead.

Will this work with any SVG?

It handles standard SVG markup (paths, shapes, groups, gradients, etc.) fine. Very large or highly complex SVGs (embedded raster images, filters, animations) will still convert, but the resulting formula can get long enough to be unwieldy in the Power Apps formula bar — simplifying the SVG first (fewer anchor points, no embedded raster images) keeps the formula manageable.

Can I change the SVG's color dynamically in Power Apps?

Yes, most easily with the HTML Text control output: since the markup isn't hidden inside a data URI, you can split the formula around a fill color and rebuild it with &, substituting a variable or a ColorValue() result for the hex code. This is much harder with the two Image-control formats, since encoding the whole string obscures the individual attribute values.

Is my SVG uploaded anywhere?

No — pasting, dropping a file, and the conversion itself all happen locally in your browser. Fetching a URL does make a direct request from your browser to that URL (not through this site's server), the same as opening the link yourself.