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

Balsamiq

Toggle navigation

Test the Custom Icons Feature

We've had a lot of people request a custom icons feature in the past. People want to add their own icons to the app and have them appear when placing icons on the canvas.

With Mims Wright stepping in for some Mockups development, we've added this feature to the pre-release version of Mockups and are looking for some users to give it a try. We've updated the Icons Documentation to reflect this coming change.

Note: This feature is only available in pre-release version at the moment, and requires you that you use the pre-release to test this out.

Quick Start

Now when you add an icon, you'll see 2 new tabs for Account Assets and Project Assets (if you're working on a saved file).

If you select one of the tabs, you'll see an Add (+) icon. Click it and an image dialog will open so you can add icons individually.

Now when you add an icon, you'll see your custom icons in the tab you've added them to.

Front-Loading Your Icons

There's a method for power-users who want to front-load the app with all of their custom icons, by saving filenames starting with icon_ to either the account assets or project assets folders.

I did this on my Mac by downloading the free 32x32px Doodlekit icons, ran them through the free NameChanger app to prepend files with icon_, and moved them to my Balsamiq Mockups/assets folder. They now appear in my icon dialog like this:

vector-doodle-icons-mockups

The words you use in your filename after icon_ are used as the searchable keywords in the icon dialog. So the example above 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.

The Steedicons also look like a perfect complement to the rough, thick style of Mockups. This blog entry at tipsblogger lists some more hand drawn icon sets that might be useful for this feature.

Send Us Your Feedback!

We're looking for your feedback and any bug reports. Play with it and let us know what you think.

If you want to try the pre-release, you can install it here:

http://balsamiq.com/products/mockups/next

After you've played with it, if you want to roll back to the stable release, simply go to the download page and re-install using the Update button here:

http://balsamiq.com/download

Thanks!

Mike for the Balsamiq Team

Leave a Comment

Comments (7)

  1. Pierre-Luc,

    Our developers are using the icon_ prefix for the time being. We don’t plan on support for importing vector files in the near term. All of the files the app can deal with presently are bitmaps.

    I’ll file both of your requests so we can consider them for future releases of the app.

    Thanks!

  2. Also, would it be possible to link vector files ? I don’t know a thing about the Air platform, but I assume it is somewhat related to Flash and could possibly link SWF files ?

    Pierre-Luc
  3. How about a subfolder named Icons where there is no need to rename files ? This would seem like a simpler solution ?

    Pierre-Luc
  4. Thanks for the feedback, Juan. I’ll pass along the info. I agree that would be an unobtrusive addition.

  5. Hi Mike,
    This is a suggestion related to the icon search action within the Icon Library dialog.
    It happens that when I enter text, an excellent search is performed on all the icon subsets.
    This produces a set of selected images, which have just lost part of their identity, because it is not possible to tell anymore the subset they came from.
    This is not a great issue when there are a few dozens of icons, but in bigger projects where there are many icons from different sources then this might be an issue.
    I suggest that the BalsamiQ icon search should report the sources of the selected icons, in some of these ways:
    1- Graying the names of the tabs that don´t have any icons selected, and
    2- Adding the source tab(s) name after the icon name when hovered.
    This information is useful in the following use case: a user does not know the name of an icon, but she knows that it´s near another one with a known name.
    This does not interfere with the interaction as it is today: very streamlined and error-free.

    Juan Lanus
  6. Just install the pre-release to test, Jon. http://balsamiq.com/products/mockups/next

  7. Count me in, I would love to test this.