Building an SVG Icon Font

For most projects grabbing SVGs is enough, but that just doesn’t cut it when you want something unique and customisable – This is were icon fonts come in.

If you don’t know what they are (as I suspect you do seeing as you’re on this post) then think of them as a collection of images combined in a structured format, each assigned with an ID that can be called within code.

Let’s dive right into what they are, how they can help, and how to create your own icon font.

What’s an Icon Font?

An icon font is a collection of SVGs packed into one file, such as TTF or EOT. The point in using an icon font is to replace the need for rendering images, instead adopting scalable vector graphics that dynamically work in web pages. The advantages of SVG icon fonts are undeniably beneficial:

• Grouping: Icon fonts are grouped into one file which means only one http request.
• Scaling: Vectors can be resized without losing image quality.
• Colouring: Manipulating image colours is as easy as changing CSS style “color”.
• Positioning: Alignment and wrapping are easy to accomplish as icon fonts are treated like text.
• Compatibility: Icon fonts are supported by all modern browsers, like Chrome, Firefox, and Safari, but also support legacy browsers too like IE6 and earlier versions.

1. Creating an SVG

As SVG files are vector images you will need to use a vector editing tool. We recommend Adobe Illustrator, or if you want to use a free alternative try Inkscape, but for this example we’ll go with Illustrator.

For this example we’ll grab existing some existing SVGs and modify them for our icon font. There are lots of great sites like Icon Melon and Icon Monstr that have thousands of icons you can use for free in your project.

Firstly, open your editor and modify each SVG to remove redundant spacing around the edges and make the icon black on a white background, it doesn’t matter if you don’t as vectors will be modified when uploaded, but it makes it easier to manage and it makes things more consistent in the long run.

2. Importing into IcoMoon

Once you’re happy with your SVGs head on over to IcoMoon. Click on “Import Icons” and grab all the SVGs you want to include in your icon font.

If you prefer to use an alternative icon font creator try Fontastic or Fontello.

Once your SVGs have been uploaded be sure to change the metadata to reflect the icon font you’re building, then hit “Font”. You want to grab the icon font from IcoMoon, so hit “Download”, then unzip the file. You should now have your icon font pack ready to implement into your site.

3. Integrating the Icon Font

Copy the “fonts” folder and add it into your site’s “public_html” directory. Copy the contents of “style.css” from your icon font pack and paste it in your CSS stylesheet, alternatively you can rename it to “fonts.css” and keep it as a separate CSS file.

Files implementing the icon fonts need to add a link:

<link rel="stylesheet" href="style.css" />

Or if you’re using a font CSS file:

<link rel="stylesheet" href="fonts.css" />

Modify your @font-face element in the CSS file so paths are relative to the location of the fonts, or just drop the fonts folder in your style sheet folder.

4. Calling Fonts

You should now have your icon font within your site’s file structure, looking something like this:

Within your style sheet you should have classes for each font, for example:

.icon-developers:before {
content: "\e600";
}
.icon-start-ups:before {
content: "\e601";
}
.icon-agencies:before {
content: "\e602";
}

There are multiple methods to calling an icon font like using HTML5 data-icons and span elements, but we’ll keep it simple by using classes. I’ve gone ahead and called one of the icons:

<div class="icon-start-ups"></div>

Producing the following:

Now that we’ve successfully called a font we can modify it to our liking by applying style; for example we can easily modify it’s colour, size, and behavioural effects with CSS and JavaScript goodness, having the freedom to manipulate vectors to our liking.

Conclusion

As we discovered, icon fonts are the best at grouping vectors together, making them easily accessible and controllable. Only one http request is needed to call on an icon font, resulting in reduced page load times. Vectors alone have a heap of good qualities like scalability, positioning, and compatibility.

Some browsers don’t support vectors, that’s why you will need to checkout “5 Best SVG Converters for Web Development” to make sure you have accessible graphics for legacy browser compatibility.

If you’re in need of some cool SVGs then there are plenty of libraries out there if you’re looking for that quick vector fix. Checkout: “SVG Libraries: Vector Heaven for Website Optimisation“.