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? ·

WPIcons Pro Changelog

2.0.3 - March 29th, 2020

  • Fix number format on output of icon count.
  • Remove rogue alert from modal popup.
  • Fix ‘View Shortcode’ background width.
  • Fix ‘View Shortcode’ .markup-container width back to 50%.
  • Remove reference to $ in all scripts.
  • Remove down arrow in icon browser titles.
  • Add period to ‘Select an animation to add to this icon’ sentence.
  • Update PHPCS standards to ignore shorthand syntax errors.
  • Add --ignore-externals flag to svn checkout.
  • Add PHPUnit testsuite name.
  • Add minimum PHP version/WP Version to plugin header.
  • Update unit tests with new plugin header info.

  • 2.0.2 - August 20th, 2019

  • Fix remote updater not passing license key, causing updates to not work.
  • Fix .zip archives generated during the build.
  • Update remote plugin updater class.

  • 2.0.1 - August 14th, 2019

  • Clean up minor bugs in the Icon Browser/Icon Builder windows.
  • Confirm working with Beaver Builder.
  • Tweak conditional login in Icon Builder windows for easier reading.

  • 2.0.0 - March 1st, 2019

  • Initial release of WPIcons Pro v2.0.0.
  • Complete rewrite of WP SVG Icons Pro.
  • Rebranded to WPIcons Pro.
  • Tons of new features, performance improvements and improvements (See for full feature list)
  • Version v2.0.3 Released

    Released: Today at 3:04 pm EST

    View Changes