Balsamiq for Desktop Docs > Working with Icons
Balsamiq Mockups 3 includes the amazing Font Awesome icon set. It contains over 500 icons in a wide range of categories that can be sized from very small to very large. It is also updated frequently and we plan to keep up with the updates whenever we release a new version of our product (more about why we switched here).
Icons from previous versions of Balsamiq Mockups have been remapped to the new icons.
Also new in Balsamiq 3, icons now have their own category in the UI Library so you can drag and drop them just like any other control.
Not only that, they show up in the Quick Add results, saving you time when searching by name or keyword.
Icon search results are shown below any UI controls that match the text you enter.
Some controls allow you to add icons to them (buttons, for example). You can do this from the Property Inspector in one of two ways: the icon search and the icon library dialog.
If the control you selected support icons, you will see the icon search box in the property inspector. This works much like the Quick Add tool, just type a few letters from the name of the icon you are looking for and a list of suggestions will pop up as a grid of icons to choose from. Just click on the one you want to select it.
You can then size the icon from "XS" (16px) to "XXL" (128px). You can also rotate icons in 90 degree increments using the button next to the search box.
If you'd like to explore all the icons that are available, click on the icon to the right of the icon search box.
This will bring up the icon library dialog, where you can browse the icons by category and preview them at different sizes. You can double-click an icon to select it immediately or click once to select and then click the "Select" button to add it.
Once you have selected an icon, you can resize it, rotate it or remove it via the Property Inspector.
You can also easily add your own icons for use in your wireframes.
You can pick any of your imported image assets and use it as an icon. They will automatically show up in the icon library, under the Assets category at the bottom.
You can also add your own icons from the icon library dialog.
Select the Assets category, then click the little plus button, select an image file and your image will be resized down to fit an existing icon size and copied to your assets.
Mockups works with color and transparency, but icons you add may not turn out looking as you want them to if they're not prepared to work the way Mockups expects them to. Below are some tips to get the most out of your custom icons.
The example below shows regular icons in the left column, a custom icon properly prepared with black fills in the middle column, and a custom icon that doesn't work as well in the right column. To fix the icon in the right column, the exclamation point should be made transparent, and the icon color should be black.