Release: Custom Icons!

Hello friends!

Today's big feature is the ability to extend our icon selection with your own icon image files.

Custom Icons!

Starting with today's version, you can now add your own icons to use in your wireframes.

If you want to share icons between your projects, set up your Account Assets folder first.

Adding via Icons dialog

There are two ways to add custom icons to Balsamiq Mockups. The easiest way is via the Icon Library. If you're working on a saved file, you'll see a  Project Assets folder as below.

Just select Project Assets or Account Assets, then click the little plus button, select an image file and voila', your image will be resized down to fit in a 48x48 pixels square and copied to either the project assets or account assets folder for you.

Adding to assets folder on file system

The second way is to place icon files manually inside your project assets or account assets folders. Just add the "icon_" prefix to each file name and they'll show up in the icon library.

The words you use in your filename after icon_ are used as the searchable keywords in the icon dialog. So the example below shows airplane because the filename is icon_airplane.png. You can string together a few labels to get synonyms in there, e.g. if the file is named icon_bag briefcase portfolio.png, all of those words after icon_ will be searchable.

Here's an example showing how we added custom icons to a Mac by downloading the free 32x32px Doodlekit icons, ran them through the free NameChanger app to prepend files with icon_, and moved them to the ~/Documents/Balsamiq Mockups/assets folder. They now appear in the icon dialog like this:

We used the Steedicons above. This blog entry at tipsblogger lists some more hand drawn icon sets that might be useful for this feature.

Many many thanks go out to everyone who's asked for this feature in the past on GetSatisfaction and to those who helped us design it on this myBalsamiq mockup.

We also need to give mad props to our new friend and awesome Actionscript independent contractor Mims Wright who worked on the Custom Icons development. Thanks Mims! :)

Other bug fixes

  • All versions: added smoothing to small images so that they look better.
  • All versions: fixed size of checkmark icon in iPhone menu. Thanks halshura for reporting it!
  • Mockups for FogBugz: updated a few links to our website.

How do I update?

Easy! Just install from our download page on top of your current installation. You won't have to re-register.

As always, if you hit any snags with the new build let us know immediately and we'll fix it right up! :)

For posterity, these are the version numbers of today's release:

  • Mockups for Desktop: version 2.1.7
  • Mockups for Confluence: version 2.1.6
  • Mockups for FogBugz: version 2.1.6
  • Mockups for JIRA: version 2.1.6
  • Mockups for XWiki: version 2.1.6
  • Web Demo: version 2.1.6 launch it

What else is going on?

Onward!
Peldi for the Balsamiq Team

Comments (12)

  1. Pingback: Release: new and custom icons, new iPhone, slanted text - Napkee - make your mockups come alive

  2. Can .ico files be imported as icon files?

  3. Hi, Mike. Only PNG, JPG, and GIF images can be added. You can run your ico files through a batch ico converter. There are several free options you can find if you search.

  4. Hi Peldi,

    I’m a huge fan of Mockups.

    question regarding the BoS conference: do you have any slides/takeaways that you can provide on your workshop? I’d like to hear how you release frequently.

    [Peldi: Hi Mark, I have some slides but they won't make much sense unless you hear the audio that goes with them, which sadly was not recorded. Maybe I can turn it into a talk one day.]
    thanks!
    Mark

  5. hi this does not seem to be available from my account right now.

  6. Hello umun. If you’re using myBalsamiq, custom icons aren’t fully supported there yet. Right now we support showing custom icons if you used them in Mockups for Desktop and uploaded your bmml to myBalsamiq, but we don’t yet give you an option to upload custom icons directly from the myBalsamiq editor. We’ll get there, hang tight! :)

  7. Am I right to say that myBalsamiq still LACKS this functionality ? I have not a single button in “Project Assets” :(

    Build #3986 – 2013-07-24_12-16-17
    3/3 Active Projects

  8. Hi, Kirill. Sorry, but myBalsamiq doesn’t support custom icons yet, but we hope to support the feature in the future.

  9. Hi good people,

    My imported icons become very low quality when importing, especially when usin XL or XXL. Can this be improved?

    Many thanks!

  10. Hi, Klaas. Thanks for reporting the issue. I’ll add a bug report describing the problem so we can try to improve the resizing of the icons. Thanks again.

  11. Hey Guys,

    Just following up with this thread about adding custom icons to myBalsamiq.

    I started with the PC version, and now am moving to myBalsamic, but I have a ton of custom icons. How can I keep using my current custom Icons? If the feature is still not in myBalsamiq, is there a work around?

    Thanks
    Matt

    Matt Walters
  12. Hey Matt, thanks for following up. You can definitely use your custom icons. If your project is set up as we expected (http://help.balsamiq.com/projects), you can just zip it and upload it to myBalsamiq, and all of your project icons will work in your mockups. If you need to add more, you’ll need to use the asset manager. Read more here: http://support.balsamiq.com/customer/portal/articles/112403. Thanks!

Leave a Comment

Your email is never published nor shared.