Flat icons are black and aren't rendered?

[brycesnyder]

When compiling icons, they look correct in our Figma and SVG files, but when we parse them they come out looking black.

Some instances do work, others don't; has anyone experienced this and know a potential workaround?

Namely, Asm-Ad where its completely black and should be a plus in the middle, and the top of the envelope on Asm-AddSafeEm etc.

[Mirta91]

Same thing is happening to my icons. Anybody with more insight about this subject?

[Mirta91]

The solution is preparing properly svg icons in editing tool like Illustrator.

For example on the first image you can see that the Clipping path is hiding all the paths - so remove it.

Then select all the paths and unite them in pathfinder tool.

[Thibaut-Lalanne]

Thanks @Mirta91 for the tips, but it still doesn't work for me... All my icons are already "Flatten" on Figma, it's the equivalent of Illustrator's "Unite" action.

On the other hand, I have found something that is still mind-boggling and incomprehensible: In my case, it looks like it's linked to the color of my icons…

Mine are all in #03080f, and if I change this color by another one it works! But I'm obliged to keep #03080f so I'm trying to understand what link there might be between the icon colour and this problem.

[5310]

After having manually fixed a small bunch of icons from Figma which were exhibiting this issue I am now convinced this bug happens with icons whose shapes touch the outermost pixels of their canvas. (At least icons that get exported from Figma. I never tried to make any changes with Inkscape etc.)

This included both icons that touched the boundaries fully (16px wide on 16×16 canvas) or ones that were exactly 1px short on each side, and even icons that were small enough to not touch the outer ring of pixels by themselves, but whose AABB still touched the boundary when rotated!

I have no idea why this happens, but this is definitely what was the case with me. I shrunk all of my culprits by a tiny amount (and flattened the rotated ones in Figma and making new AABBs not touch the boundary again), and immediately they started to render properly again.

I'd rather not have to do that though as it messes with the pixel alignment a lot. So still hoping for a fix!

[tharindulak]

I am also facing the above issue using this library, Any update on the above issue?

[coolof]

This is not a problem with either Figma or fantasticon directly. In most cases is has to do with svg fill rules. Figma saves svg with fill-rule="evenodd" while fonts only support nonzero. Just replacing this in all the svg files will not fix the issue however. There's a great Figma plugin called Fill Rule Editor that let you control this manually. I've found that it's easier to use the exported svg's to fix this. Basically:

1. Export your icons from Figma as svg
2. Import these svg's in Figma (preferably on a new page)
3. Open Fill Rule Editor plugin
4. Select a "broken" icon (from the font) in and make sure that all paths are nonzero (blue) and change the direction of "broken" paths so that the icon looks right. Change direction by clicking on a path, represented with arrows in the plugin.
5. Export the fixed icons and use these with fantasticon.

[retyui]

This is not a problem with either Figma or fantasticon directly. In most cases is has to do with svg fill rules. Figma saves svg with fill-rule="evenodd" while fonts only support nonzero. Just replacing this in all the svg files will not fix the issue however. There's a great Figma plugin called Fill Rule Editor that let you control this manually. I've found that it's easier to use the exported svg's to fix this. Basically:

1. Export your icons from Figma as svg
2. Import these svg's in Figma (preferably on a new page)
3. Open Fill Rule Editor plugin
4. Select a "broken" icon (from the font) in and make sure that all paths are nonzero (blue) and change the direction of "broken" paths so that the icon looks right. Change direction by clicking on a path, represented with arrows in the plugin.
5. Export the fixed icons and use these with fantasticon.

@coolof Thank you so much; I appreciate it very lot.

It really works

[Bistard]

@coolof You saved my day. Appreciate it.