Lars Damgaard
strategic user experience designer
October 8th 2013

Productivity tip: use font awesome for prototyping in Axure

When working with rapid prototyping it’s important not to indulge yourself in details in the beginning of a project.

However, as you move along you often want to increase the fidelity of your prototype and as a part of that process, you might sometimes want to use icons.

Earlier, I would usually look for prototype icons on Iconfinder, but too often, I would be annoyed with the lack of design consistency in such icons. When using Font awesome you don’t have to worry about that, because its vast library of icons all have the same visual style.

But what’s even more important than visual consistency is that you don’t have to spend your valuable time looking for icons, which gives you more time to focus on the overall user experience design, which is what most of us want to do.

How to use Font Awesome for prototyping in Axure 6.5

Axure 6.5 (or earlier) does not support webfonts, so this procedure requires you to install the font on your computer. If you are handing over your prototype to clients or colleagues, you might want to use the feature “render text panels as images” because they won’t see your icons otherwise.

  1. Download the font
  2. Make sure you download this file

  3. Install the font
  4. Once you extract the file, navigate to the /font folder and install the available fonts on your machine.

  5. Open Axure
  6. When opening Axure, you should now have the option to choose Fontawesome in the Axure font chooser dropdown. If Axure was running on your machine already, you might have to restart it before you can see the font in the list.

  7. Use the cheatsheat to find your icon
  8. Once you find the icon that you want to use, you select the icon (with your mouse) from the cheatsheat and copy it to your clipboard.

  9. Paste the icon into Axure and style it for your purpose
  10. Switch back to Axure and create a text panel and paste the icon into that text panel. Make sure the text panel is selected and choose Fontawesome from the font dropdown in the top. Voila: you now have a nice icon that you can style as any other text panel.

How to use Font Awesome for prototyping in Axure 7

When I first published this tip, I didn’t think about using Fontawesome as a webfont because I discovered the technique that I described above before Axure 7 was available, but the Axure team responded here with a link to the axure forums presenting a solution based on the combination of the new webfonts feature and a library.

This might be a better option because it allows the text to be rendered in the browser as a proper webfont.

Thanks for reading and feel free to share it if you found it useful.

Related to what you were just reading
March 7th 2016

Working in teams with atomic design using a Sketch template file, symbolic links and Dropbox

I work in a department with two multidisciplinary scrum teams, each team with two designers. We’re currently working on a big project using atomic design. That’s all good.

Sketch is a good tool for atomic design, especially when using a…

Read more

July 3rd 2013

Axure 7: my favorite features so far

A new version of one of my most frequently used tools has been beta-released: the much awaited Axure 7.


One of the main features, which I guess is also one of the main reasons why the release is somewhat delayed is the ability to work…

Read more

January 12th 2014

Lightweight team projects: Axure custom libraries and Dropbox

When designing in Axure, I often need to collaborate with other designers. Until recently I would achieve this by creating a team project in Axure and place the working file on a shared drive or in a cloud based repository. In my…

Read more

November 28th 2012

Jesse James Garret on the maturing of user experience design

In an interview with Brian SolisJesse James Garrett, the founder of Adaptive Path and author of The Elements of User Experience talks about user experience design and the way it has shifted from simple interface design towards a more…

Read more