Creating your own custom icons inside of Adobe Illustrator allows for greater flexibility in design. You may also want to adjust something inside of an icon you downloaded from a third party. Whatever the case, you’ll want to export your SVG icons in an appropriate manner. This will help limit the number of conflicts you encounter and prevent icons from conflicting with one another.

This tutorial is also helpful if you’ve downloaded a set of icons from a third party and they cause styling issues with each other. Open up your third-party icons in Adobe Illustrator, or the program of your choice, and re-export the SVG icons using the settings listed below.

Export Settings

Exporting your icons out of Adobe Illustrator as an SVG file is easy. When your icon is ready, from within Adobe Illustrator, select File ⇨ Save As

From within Adobe Illustrator select File ⇨ Save As.

When the ‘Save As’ window appears, give your icon a name and change the ‘Format’ option at the bottom to SVG (svg).

Give your icon a descriptive name and set the format as SVG.

SVG Options

When the next window pops up you want to make sure the following settings are used:

  • SVG Profiles: SVG 1.1
  • Font Type: SVG
  • Font Subsettings: None (Use System Fonts)
  • Image Locations: Link

Next click on the More Options button in the bottom left hand corner.

Click on the ‘More Options’ button in the lower right hand corner of the SVG options window.

When the Advanced Options display you’ll want to change the CSS Properties option to Style Attributes. This is a very important.

Change the ‘CSS Properties’ option to ‘Style Attributes’ to ensure inline styles are used when generating the SVG icon.

Setting the ‘CSS Properties’ option to be ‘Style Attributes’ will export the SVG icon with inline styles applied to your SVG icon. Otherwise the icons will export with CDATA strings inside of style tags, possibly causing a number of issues on your site. Icons with inline styles will prevent conflicts with class names or mistakenly inheriting styles from other icons you have installed on your site.

Important Considerations

If your icon contains any text you’re going to want to set the Type option at the top of the SVG Options window to ‘Convert to outline’. Converting your fonts to outlines allows browsers to properly render fonts. Browsers such as Firefox and Internet Explorer have trouble rendering SVG fonts without having the Font Family installed on the site. To ensure the icon with text works cross-browser you must make sure the fonts are converted to outlines.

Icons containing text should convert type to outlines before exporting the icon.

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: Yesterday at 3:04 pm EST

    View Changes