Exported SVGs code is causing problems

Hello everyone,

Sorry if the title doesn’t seem very explicit, I’ll explain myself here.
I work for a startup company that makes a medical application, and in this context we of course use icons. So we created a design system on figma with icons that sometimes have extra strokes to have some uniformity of our icons (icons come from several different libraries).

Sometimes the developers need new exports of these icons and so we re-export them as svg from the design system, from Figma. However we noticed two things:

  1. Very often we have to remove the following code from SVG exports because otherwise the icons do not appear in the app:
<clipPath id="clip0_6874_17829">
<rect width="512" height="512" fill="white"/>
</clipPath>
  1. And more problematically, exporting an svg with strokes adds a new tag inside the code (exemple : <mask id="path-1-outside-1_6874_17786" maskUnits="userSpaceOnUse" x="-0.800781" y="-0.800049" width="19" height="19" fill="black">). Because of this tag, the SVG does not appear in the final app.

What to do?
As mentioned, some of our icons in the design system have strokes, and we can’t do anything about that, so we need to be able to export them cleanly.

This problem is specific to Figma, because we tried to download icons made purely from strokes without going through figma and the problem did not arise.

Thanks for your help :slight_smile:

2 Likes

Just upping the topic, not sure if it is okay to do it or not, in case delete it please.

Hi @Julien_Schmitt,

Would it be possible to share the figma file with the icons you had problems with? Feel free to submit a support request here https://help.figma.com/hc/en-us/requests/new

I am facing the same challenge. Our devs are asking for “ID-free” SVGs. I managed to export icon SVGs as cleanly as possible, just the following paragraphs could not be removed or transformed: