👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Why We Switched to Font Awesome for Balsamiq Mockups 3

It was with mixed feelings that we switched to the Font Awesome icon set with Balsamiq Mockups 3.

Our original icons were hand-drawn by Peldi's wife Mariah so they had special meaning to us.

But creating new ones and keeping them updated as logos changed (our Twitter icon was three generations old, for example) was time consuming and didn't provide as much value to our customers as adding new features and fixing bugs.

And then Font Awesome came along and it was free and, well, awesome. We used it internally and added it as an easy-to-install icon pack on our Extensions page and our customers loved it too.

In our Beta feedback forums our users started talking about integrating Font Awesome when we decided to remove the Account Assets feature. So Peldi contacted Dave Gandy, creator of Font Awesome, and asked him if we could use them in our tool.


From: Giacomo Guilizzoni peldi@balsamiq.com
Date: Tue, Feb 17, 2015 at 6:28 PM
Subject: Hello from Peldi from Balsamiq!
To: Dave Gandy

Hello Dave!
This is Peldi from Balsamiq. We make a wireframing tool called Balsamiq Mockups, maybe you've heard of it?
We have noticed that quite a few of our customers use your awesome Font Awesome set of icons in conjunction with our tool. There's even a github repo of someone who made it easy to do.
We are working on a new version of Mockups, and were wondering if it would be possible to include your Font Awesome set as a built-in set, replacing our homegrown (and much inferior to yours) set.
I looked at your licensing page and it looked feasible, but I thought it'd be worth maybe having a quick chat first?
What do you think? I am excited about the idea, as it would give our users a standard set of icons that their developers would understand immediately...and probably also help cement Font Awesome as "the standard" for app and web design, even more than it is today. :)
I am in CET, and happy to meet any time.
Peldi

His response was delightfully straightforward.


From: Dave Gandy
Date: Tue, Feb 17, 2015 at 6:34 PM
Subject: Re: Hello from Peldi from Balsamiq!
To: Giacomo Guilizzoni peldi@balsamiq.com

Heck yeah. Go ahead and throw them in. It’s as open source as I can get it. :)

A few days later Peldi had swapped out the old ones for Font Awesome and remapped the labels so that existing projects with icons wouldn't break.

We were a bit giddy here when we used the first Beta build with the new icons. Getting so many great icons all at once felt like Christmas to us.

We'll also be updating our icon set whenever Dave updates Font Awesome. So, now, if you want us to add icons to Balsamiq Mockups, request them in Font Awesome and they'll make their way into our product!

We hope you're enjoying the new icons. And, if you're nostalgic for the old ones, we've made them available for download as custom icons.

Leon for the Balsamiq Team

Leave a Comment

Comments (17)

  1. Hillarious!

    I appreciate the thoughtfulness in this post.

    Including actual emails was just precious, lol.

    Using your product is a delight.

    Thanks for being awesome!

    • Hi Alex! I assume that’s another vote for adding the latest FA update. Thanks for taking the time to share your need with us. Anything else, we’re here! 🙂

  2. Feature Update Request: Any chance of updating the FA icons for the latest version? The FA5 is a massive update in terms of awesomeness. 🙂

    • Hi Jan! This is definitely something we are considering for the future and we’ve added your vote for this request. Let us know if you have any other questions, we’re here to help! 🙂

  3. While I’m very happy FontAwesome is now default in Balsamiq, users have lost the ability to select the font size for the icons now that they are icons.
    the smallest size for an asterisk (which I use to identify that an entry field is required, for example, is far too large for my uses.

    Just wanted to add to the conversation.

    Otherwise, very excited to have Font Awesome available in Balsamiq.

    Thanks,
    Nick

    Nick Morgan
    • I can see how that would be a pain, Nick, and I’m sorry about that. If you’d like, shoot us an email at support@balsamiq.com and we can talk about alternate ways to accomplish what you’re looking for. With more information, we can also see if there is anything that we can do from our side. 🙂

      No pressure, my friend.

  4. Just remembered (long time not used Balsamiq) – You have “sketch it” for images, so why not use it on icons?

  5. Re Alex’s “The FontAwesome icons just don’t feel sketchy enough” – makes sense. Maybe a conversion software can be written that makes them more “sketchy”? This way, as the FontAuesome set evolves, so could the “sketched” one….

  6. Dave Gandy sounds like a cool guy.

  7. Thanks for the reply Leon. I certainly look forward to seeing myBalsamiq become as powerful as v3, and sooner the Icons are implemented the better. Power of an icon is huge in the land of wireframes.

    as an interim fix I would add FA as custom icons, however the process to upload each is tedious. Would love if you could import a .zip. Actually I would really like to see Assets be split into Icons and Images. My Assets library is full and now difficult to navigate. The ability to have a place where Icons only reside would be useful and logical.

    I am working on a pretty cool project for a major industry application and the features you are building in mybalsamiq my team has appreciated. Continue the great work.

    Would be happy to give further feedback from a real world project POV.

  8. Hi Alex, yes we still have to swap out some old icons with the new set.

    We are not planning on making sketchy icons any more. The new ones are a bit too polished for the sketch skin, but we got used to them by now (usually icons are small enough that the look mismatch doesn’t bother us much).

    If the new icons don’t grow on you, as a workaround, as Ben said, custom icons still work, and there are sets of sketch-quality icons you could import.

    Peldi Guilizzoni
  9. Small addition: the dialog window has icons that still have the old look, this looks a bit weird together: http://gyazo.com/279aa2b08ef8cc60725b860f9f27c625

  10. For me, The FontAwesome icons just don’t feel sketchy enough.

    It’s a good thing the set is bigger now, B2 tended to lack icons that went beyond the basics, but they’re way too polished for the Sketch skin, aside from some not-quite-matching metaphors (this broke a couple of my old wires from B2)

    Do you guys think of having the sketch/wireframe setting apply to the icons look as well? Understand this would be keep Mariah busy for a while, but would definitely be worth it.

  11. Love FontAwesome but also appreciate the story behind the hand drawn Icons.

    My question is when will FA icons be supported and implemented for those who are using myBalsamiq.com?

    Would love this to be ASAP? Any time frames?

  12. This is great guys 🙂

    I think this icon set is really Awesome and this change was pretty much the most refreshing in B3 🙂

    Keep up the good work guys!