Some icon sets downloaded from third parties have been exported in such a way that causes issues when displayed on your site alongside other icons from the same set. We have a list of icon sets with known issues and a few solutions listed there, but if your icon set is not listed there and you are experiencing issues there is one thing you’ll want to check.

When viewing the icon set from the icon sets page in the, preview window, you may see something like the following:

Example of the Gradient Round Icons icon set not rendering properly.

At first glance, it appears as though no icons have rendered at all, but a closer look reveals the icons have rendered but incorrectly.

If you’ve tried to view the icon set from the custom icon block you might find that the colors just look off, and not the way that the icons should.

Example of the Gradient Round Icons icon set rendering colors incorrectly.

Check the SVG File

The best way to check if your SVG file was exported correctly is to open the SVG file in a text editor, such as Atom, Sublime, PhpStorm etc. If you open up the SVG file in question and see a bunch of .cls-1 .cls-2 etc at the top of the file inside of style tags, then you know that your SVG file was exported incorrectly.

Example of an incorrectly exported SVG file

In the screenshot above we can confirm the file was exported incorrectly because of all of the styles defined inside of style tags. When the SVG file is exported we want to ensure the style attributes are exported inline so there are no style tags in the document.

For specific instructions on re-exporting the invalid SVG files you can follow our documentation article What is the best way to export my SVG icons from Illustrator?

Was this article helpful? ·

×
Code Parrots