DocumentationResourcesMarketplaceCommunity
Documentation
Build your app

SVG app icon optimization guidelines

Guidelines and recommendations to optimize SVG files to be correctly displayed in apps and metadata.

Problem

Sometimes SVG files are uploaded correctly, but they don't render as expected. This can occur when uploading non-optimized SVG files.

Uploads can fail if the SVG file is malformed.

Use the following recommendations as guidelines to produce optimized SVG files that upload successfully and render correctly in your apps.

Solution

Fix outline (monochromatic) icon

📘

This solution applies only to outline (monochromatic) SVG files that render incorrectly.

  1. Open the SVG file in a text editor, such as Microsoft Visual Studio Code, or a vector editor, such as Boxy SVG.
  2. Remove all filland stroke* attributes from the SVG markup: the shape color defaults to black.

Set width and height

Explicitly set width and height of the SVG.

Merge paths

  1. Open the SVG file in a text editor, such as Microsoft Visual Studio Code, or a vector editor, such as Boxy SVG.
  2. In the editor, merge all shapes to one single shape: in the SVG, merge the multiple <path></path> elements into a single <path></path> one.

Declutter

  • Remove vendor-specific and unnecessary attributes from the SVG markup.
  • Avoid the foreignObject element.

Optimize

Optimize the SVG markup by running it through SVGOMG or SVG Viewer.

Validate

Validate the SVG file before uploading it.

Example

In this example, an SVG is uploaded as the outlined (monochromatic) icon for an app, but it renders as a solid black-filled icon.

Original icon for the outlined app icon:

Original icon for the outlined app icon

Rendered SVG icon after uploading it as the outlined icon for the app:

Rendered SVG icon after uploading it as the outlined icon for the app

Original SVG file:

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M126.75 112.745V55C126.75 54.5858 126.414 54.25 126 54.25H60C59.5858 54.25 59.25 54.5858 59.25 55V96.8969C59.25 97.3112 59.5858 97.6469 60 97.6469H110.1C111.027 97.6469 111.91 98.0433 112.527 98.7362L125.44 113.243C125.898 113.758 126.75 113.434 126.75 112.745Z" stroke="black" stroke-width="2.5"/>
  <path d="M1.25 84.7448V27C1.25 26.5858 1.58579 26.25 2 26.25H68C68.4142 26.25 68.75 26.5858 68.75 27V68.8969C68.75 69.3112 68.4142 69.6469 68 69.6469H17.9005C16.9729 69.6469 16.0895 70.0433 15.4728 70.7362L2.56023 85.2435C2.10188 85.7584 1.25 85.4342 1.25 84.7448Z" stroke="black" stroke-width="2.5"/>
  <path d="M100.227 87H103.182L94.6364 63.7273H91.7273L83.1818 87H86.1364L93.0909 67.4091H93.2727L100.227 87ZM99.1364 77.9091H87.2273V80.4091H99.1364V77.9091Z" fill="black"/>
  <path d="M39.64 34.304V36.448H21.432V34.304H39.64ZM40.76 46.496V48.704H20.376V46.496H40.76ZM38.104 51.328V62.56H35.832V53.472H24.888V62.464H22.52V51.328H38.104ZM36.984 59.2V61.312H23.928V59.2H36.984ZM32.952 35.136C33.624 39.072 34.84 44.512 35.8 47.744H33.304C32.504 44.672 31.288 39.392 30.52 35.392L32.952 35.136ZM38.52 40.032V42.144H25.24V40.032H38.52ZM25.784 40.032V40.32C25.912 42.016 26.232 45.184 26.552 47.488L24.28 47.648C23.992 45.408 23.672 42.496 23.512 40.064L25.176 39.904L25.56 40.032H25.784ZM47.896 35.488C46.168 36.992 44.056 39.104 43.032 40.48L41.432 38.784C42.424 37.472 44.632 35.424 46.328 34.016L47.896 35.488ZM49.592 43.168V45.472H43.864V43.168H49.592ZM45.048 61.6C44.6 61.024 43.736 60.384 38.392 56.672C38.616 56.192 38.936 55.264 39.064 54.624L44.728 58.4L45.432 59.392L45.048 61.6ZM45.048 61.6C45.048 60.736 42.872 59.232 42.872 59.232V43.168H45.144V57.12C45.144 58.432 45.816 59.136 46.296 59.456C45.88 59.968 45.272 61.024 45.048 61.6Z" fill="black"/>
</svg>

Optimized SVG outline icon renders as expected:

Optimized SVG outline icon renders as expected

Optimized SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <path d="M58 49a2 2 0 0 1 2-2h66a2 2 0 0 1 2 2v57.745c0 1.839-2.272 2.702-3.494 1.329m0 0-12.913-14.507a1.999 1.999 0 0 0-1.493-.67H60a2 2 0 0 1-2-2V49m2.5.5v40.897h49.6c1.284 0 2.507.549 3.361 1.508L125.5 105.43V49.5h-65Zm-58-28v55.931l12.04-13.526a4.5 4.5 0 0 1 3.36-1.508h49.6V21.5h-65ZM0 21a2 2 0 0 1 2-2h66a2 2 0 0 1 2 2v41.897a2 2 0 0 1-2 2H17.9a2 2 0 0 0-1.493.67L3.494 80.075C2.272 81.448 0 80.583 0 78.745V21Zm100.227 60h2.955l-8.546-23.273h-2.909L83.182 81h2.954l6.955-19.59h.182L100.227 81Zm-1.09-9.09h-11.91v2.5h11.91v-2.5ZM39.64 28.303v2.144H21.432v-2.144H39.64Zm1.12 12.192v2.208H20.376v-2.208H40.76Zm-2.656 4.832V56.56h-2.272v-9.088H24.888v8.992H22.52V45.328h15.584Zm-1.12 7.872v2.112H23.928V53.2h13.056Zm-4.032-24.064c.672 3.936 1.888 9.376 2.848 12.608h-2.496c-.8-3.072-2.016-8.352-2.784-12.352l2.432-.256Zm5.568 4.896v2.112H25.24v-2.112h13.28Zm-12.736 0v.288c.128 1.696.448 4.864.768 7.168l-2.272.16c-.288-2.24-.608-5.152-.768-7.584l1.664-.16.384.128h.224Zm22.112-4.544c-1.728 1.504-3.84 3.616-4.864 4.992l-1.6-1.696c.992-1.312 3.2-3.36 4.896-4.768l1.568 1.472Zm1.696 7.68v2.304h-5.728v-2.304h5.728ZM45.048 55.6c-.448-.576-1.312-1.216-6.656-4.928.224-.48.544-1.408.672-2.048l5.664 3.776.704.992-.384 2.208Zm0 0c0-.864-2.176-2.368-2.176-2.368V37.168h2.272V51.12c0 1.312.672 2.016 1.152 2.336-.416.512-1.024 1.568-1.248 2.144Z"/>
</svg>

Discussion

SVG files can sometimes contain more information than needed to render as expected, or they may be malformed.

Clean up and simplify the SVG file before uploading it to reduce size, and to remove unnecessary elements.

Before uploading an SVG file, go at least through these steps:

See also

Updated about 1 year ago

What's next

Add an app icon to your app.