Using SVGs and Icon Fonts for responsive design

You should be using icon fonts and SVGs in your Websites and Web Apps if you’re not currently doing so. This really shouldn’t be a debate anymore, in my opinion; there’s no reasonable excuse not to. Plus, there’s an advantage for Web Developers — it makes your life much easier! Let me explain.

SVGs

If you haven’t heard of SVGs yet, here’s the skinny. An SVG (Scalable Vector Graphic) is an XML-based image format that supports animation, interactivity, and scalability. Prior to SVGs coming on the scene, Web developers (like us) used PNGs and GIFs for icons and graphics when building a Website or Web Application. To deal with scaling issues on retina devices (in recent years), we would create each PNG image at 2X the size and deliver that to the retina device — so icons would appear crisp when looking at them on an iPhone or iPad.

But things have gotten much easier. We now have a new format called SVG. To use SVG, you need to create icons, logos, or other graphics in Illustrator (or another Vector-based software application) so they are Vector images instead of Photoshop, which creates Raster images. Vector images scale, so SVGs look beautiful on all devices, retina displays, and when users zoom in with their Browsers. We now have one format that eliminates the need to create the same graphic twice — which saves the Developer / Designer time and makes the Website or App a tad bit faster and more efficient. I call that a win-win!

You can (and should) be using an SVG for your logo as well. I’m sure you want your brand identity nice and crisp on every device at all times with a single image, right?

Icon Fonts

Icon fonts have also come on the scene recently. Icon fonts use SVGs (e.g. Vector images) to create a Web font that can be controlled using CSS. One of the more popular (and free) Icon fonts is Font Awesome. Font Awesome describes icon fonts like this:

Scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

To see this in action, CSS-Tricks created a nifty little Webpage that demonstrates the power of icon fonts: http://css-tricks.com/examples/IconFont/.

Creating SVGs and Icons

Font Awesome is a great resource if you want a large, free library for a project that doesn’t require you to create your own icons. But for custom Websites or Apps where you need to design custom icons, you’ll need a way to create your own icon set. One of our favorite apps for creating your own custom icon font set is Fontastic.me. The process is simple; in theory it works like this:

1. Create a new Icon set in your account
2. Save your icons or images as SVGs from Illustrator
3. Upload them to Fontastic.me and add them to your new set
4. Download your new set, add the files to your project, and use CSS to adjust sizes, colors, shadows and anything else for each icon. It’s much easier and faster than using background images in your CSS every time you need an icon.

To create an SVG, you would use Illustrator or another Vector-based software application. We use Illustrator — here are the correct settings to use when you are exporting your image to an SVG (go to File > Save a Copy…)

Fontastic.me has a nice explanation on their FAQ page as well with further details.

All in all, SVGs and Icon Fonts are a nice step forward. Once you start using them, you’ll be hooked. There’s really no reason not to use them, except maybe if you need to support older Microsoft browsers. However, there’s a simple solution for that too — SVG Magic.