We've started using icon fonts as a way to display simple images that can be treated as fonts in our CSS. These icons can be styled using the usual font attributes and crucially they stay sharp on high definition screens. That means it’s quick and easy to change their size, weight and colour.

Stock libraries of icons are available from several sources. Some of the best sites are:

These are great for icons you might need all the time, like an envelope to indicate email or a trash can for ‘delete’. Also available are the myriad of social media icons that are now used on most websites.

Custom Fonts

To make custom font icons and font sets we use the IcoMoon App. It’s a straightforward process. Just go to Import Icons and select your vector graphic files.

Vector Graphics

Scalable vector graphics or .svg files are files that don’t lose quality if they’re resized and can be printed at any resolution while retaining a high quality. We use Illustrator to create them but a good open source option is inkscape.org.

Here’s how our designer makes our svg files:

In Photoshop:

Create a vector image in black and white (white background, black icon)
Remove the background
Save as png

In Illustrator:

Open the file that was created
Go to the Artboard tool and in the Presets dropdown, select ‘Fit to artwork bounds’
Go to main File menu and select Object > Image Trace > Make and Expand
In the Layers palette, expand the dropdowns, in the delete, the Empty and
Go to File > Save As
Select ‘Save as Type’ SVG (*.SVG)

@font-face

When you’ve uploaded your svg file to IcoMoon you’ll see your icon appear at the top above the IcoMoon – Free options. You can select it, and click Font at the bottom of the screen.

When you click Download on the next screen you get a kit containing the font files and a style sheet containing the @font-face properties you’ll need. I usually copy these into my main CSS sheet.

Styling Custom Fonts

Css tricks has a good demo of what can be done with font icons.

Websites where we’ve used icon fonts

This website - in the menu

Courier Direct - circles under the slideshow

Westcountry Waterjet - rectangles below the slideshow