Tool · Power Apps · Icons and images

SVG to Power Apps

Turn any SVG icon into an Image formula for Power Apps: cleaned, minified and ready to paste, with colors you can drive from Power Fx.

Works with
  • Power Apps
Formula
Numbers

Your SVG

Preview

Paste an SVG to see it here.

Questions

FAQ

Why use a formula instead of uploading the SVG as media?
A media file is fixed. A formula can change colors with Power Fx, for example by status or theme, and it travels with a component or a copied control, with no media files to bring along.
Why are the quotes in my SVG changed?
The formula is Power Fx text inside double quotes, so the SVG’s attributes are rewritten with single quotes, which SVG treats the same. Any other double quotes are doubled, the way Power Fx expects.
Why does the formula use EncodeUrl?
Characters such as # and % have a special meaning in a data URI, so a color like #0F6CBD would cut the image short. EncodeUrl makes the whole SVG safe when the app runs.
How do I make a color change with my data?
Set that color to “From Power Fx” and type an expression that gives color text, such as If(ThisItem.Status = "Done", "#107C10", "#C50F1F"). For a color value, use Mid(JSON(Color.Red), 2, 7).
My icon shows up black. Why?
Icons made for websites often use currentColor, which means “the text color” on a web page but black inside an image. Pick a new color for it, or drive it from Power Fx.
Is my SVG uploaded anywhere?
No. Reading, cleaning and converting all happen in your browser, and the file never leaves your device.

↑ ↓ moveEnter open