Convert a PowerPoint icon to a svg image

Using svg images for icons has a big advantage over jpg and png images because it allows to scall the image without losing quality. That’s why I prefer to use svg images in the canvas apps I create.

PowerPoint has a very rich set of icons. Much richer than the default icon set available in canvas apps.

Below, the steps are given on how to convert a PowerPoint icon to a svg icon to use in your canvas apps.

  1. Open PowerPoint
    • The “Microsoft 365 Apps for business” version of PowerPoint is used while creating the steps.
  2. Insert the icon you want to convert.
  3. Right-click on the image and select “Save as Picture…”
  4. Save the image on a local disk and make sure the type is: Scalable Vector Graphics (*.svg)
  5. Close PowerPoint.
  6. Open Windows Explorer and go to the folder you saved the image in.
  7. Right-click on the image and open the file with Notepad.
  8. Replace all double-quotes with single quotes.
  9. Replace width=’96’ height=’96’ with viewBox = ‘0 0 96 96’.
  10. Add the following code to all <path> elements: fill='{{FILL}}’
    • {{FILL}} will be replaced in your canvas app with the color you want to use. You can use your own replacement tag.
    • Do not skip the extra space at the beginning (before “fill”)..
  11. Open a canvas app.
  12. Add an image control. Add the following logic to its property “Image”:
    • “data:image/svg+xml;utf8, ” & EncodeUrl(Substitute(“<<SVG>>”, “{{FILL}}” , “#FF7700”))
      • <<SVG>> is all the text from Notepad.
      • “#FF7700” is a color code example.


Please enable JavaScript in your browser to complete this form.

You can use the form below to submit feedback if you think that content on this page:

  • is wrong. Please then also provide what is wrong and why.
  • could be more comprehensive. Please then also provide which content should be added/updated.

Thank you!