How to tell whether your SVG file can be used as an icon font

Scalable Vector Graphics, or SVGs, are a generally a good choice for use as icons on your website, because they are vector graphics. Vector graphics can be scaled to any size without losing quality. The files are small and compress well, so they won’t make your website slow to load. They look sharp even on retina displays.

SVGs are technically bits of code (XML files), so please do make sure your website is using SVGs securely before you get started.

Often an SVG file will appear to be one layer in PhotoShop, but it is actually several layers or multi-colored. In order to render correctly as an icon font, the SVG needs to be one layer, and one color.

Why use icon fonts instead of images?

SVG files are scalable vector images already, so why would we use an icon font instead of using the SVG files directly? Here are a few reasons:

• SVG files are code, not images. As such, we must take extra steps to be sure our website remains secure when using SVGs.
• Icon fonts are faster to style, change, and tweak than SVGs.
• Icon fonts can be imported and integrated with many third party plugins and libraries, like Beaver Builder and Elementor.
• Icon fonts can be added in the content property of CSS pseudo elements, making it easier to integrate them with third party styling.
• Icomoon custom font icon sets don’t take up any extra space because we aren’t loading fonts that we don’t need.
• Icon fonts can be cached, while inline SVGs can’t. This means speed savings for page loading times.
• Font icons are compatible on major and current browsers as well as Internet Explorer 11 and 10. See FontAwesome compatibility here as an example.

Here’s how you can tell whether an SVG file is ready for use as an icon.

First, navigate to Icomoon. Then follow these steps to ensure the SVG’s are not multicolor. 

1. Import the icons.
2. Select the icons by clicking on them to highlight them.
3. Click “Generate Font” to start the process.

If an icon is multicolored, Icomoon will show you a warning, as shown below, with a “multicolor” note.

An icon with no warnings will render properly.

What to do if you see the “multicolor” warning

1. Open the SVG file with your image editing program.
2. Merge the layers.
3. Re-save your image, and retest with Icomoon.

If there are no more multicolor warnings, then your SVG file can be used as an icon font, and you can send the SVG files to your developer.