Prototype faster with icon fonts

Femke van Schoonhoven
femke@atomic.io
@femkesvs

icons-weekly.png

Icon fonts give you access to entire library of icons, right from your font picker. They make it easy to use icons in your design without having to fuss around with pngs, svgs or any other image format.

Icon fonts are especially great for rapid prototyping as you can quickly add fidelity to your concept without getting caught up in detail too early.

Here are some ways icon fonts can speed up your prototyping in Atomic:

Animate font in Atomic

Icon fonts can be animated in Atomic

You can animate the transition an icon makes between two pages in your design. The transition can change the color, size, position and opacity of your icon font. You could even add or remove a shadow!

Scale icon fonts in Atomic

Icon fonts scale easily

Whether you’re prototyping for high-resolution mobile or desktop screens, icon fonts always remain crisp, there’s no need to create separate SVGs or 2x PNGs.

Icon fonts in Atomic

They’re already available in Atomic

Atomic already has two icon fonts available for you to use: Font Awesome or Material Design. In fact, we’ve just updated Font Awesome in Atomic to the latest version (4.6). Atomic also lets you easily upload your own icon fonts to use in your Projects.

Using an icon font in Atomic

Font awesome at Atomic

Font Awesome and Material Icons are both great icon fonts that are already built in to Atomic – just select them from the font dropdown by following these steps.

It’s also easy to add your own icon font to Atomic – just make sure the icon set also include unicodes, as you’ll need these when it comes to placing the icon you’d like to use in Atomic.

To get started, locate an icon font pack you’d like to upload into Atomic. For starters, you may want to try IcoMoon or Icon-Works free font packs. Make sure you check the licenses of any fonts you upload to Atomic to ensure they’re suitable for use in this way.

Download the font pack and open the Zip file. Within the zip file there’s usually a font folder – locate that and then inside there should be a WOFF font file.

Go back into Atomic, and with a text box selected, click ‘Add Fonts’ from the drop down. Drag and drop the WOFF font file into the font uploader and give it a few seconds to upload.

Navigate back to the zip file. Inside you should find an html file, usually called ‘demo.html’. Double click on this file to open it in your browser. You’ll now see all the icons you can use in your design, displayed as unicodes in your browser.

To use the icon front in your design, make sure you have created a text element and selected the icon font from the font dropdown. Then, navigating to the html file, copy the icon you’d like to use by selecting it and using Cmd + C, then navigate to your Atomic design and paste it into the text element by pressing Cmd + V.

As the icon is a font, you’ll be able to treat it as such. This lets you easily change the color and size from the properties panel.

Note that if the icon isn’t appearing in your design at first, you may need to refresh the page.

Dive into the details

Looking to learn more about icon fonts, or maybe even make your own? Here’s some handy resources to help you get started:

Got any tips for learning how to use icon fonts to share with other Atomic users? Share them with us on Twitter or in our Facebook Group - we’d love to hear them!

Not using Atomic yet? Try Atomic free for 30 days.

Posted 26 April 2016

Cloud prototyping for teams