Adding your own icons

You can also add your own icons for use in your wireframes by selecting any of your imported images, and using them as an icon. They will automatically show up in the icon library, under the Images category at the bottom.

Best practices for creating or preparing custom icons

The editor recognizes color and transparency, but icons you add may not turn out looking as you want them to if they're not prepared the way we expect. Below are some tips to get the most out of your custom icons.

Color

  • Balsamiq uses black as a color for replacement at 100% opacity.
  • Icons that aren't created with black can have undesirable effects when colorized.
  • We recommend using black as the color for your icons.

Transparent areas

  • Balsamiq colorizes the entire opaque area of the icon.
  • For best results, we recommend knocking out "white" areas of your icon using transparency. Transparent PNG works best.

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.


Our monthly emails will make you better at your job

Get our inside stories on product design, making things people love, and running a business built to last. Delivered once a month to your inbox.