Balsamiq Community Discussion

Adding custom icons to Balsamiq Desktop

#1

Hi,

I am trying to add some images that I would like to use as icons for my Mockup. I am flexible on the format (currently I have .svg and .png) and would like them to behave as icons (ideally). My minimum requirement is to add these images and be able to change the color. Currently when I drag the .png into Mockups I cant change the colour. Is this functionality possible?

Thanks!

0 Likes

#2

Hey @misterjtc,

You can change color for the built-in icons only. Balsamiq has quite a big set of icons, which covers 99.9% needs at the stage of wireframing. Please note, the wireframes are not the final design. The goal of the wireframes it to explore the possible solutions and move to the next stage ASAP. I always say this to customers, so we are on the same page and discuss interaction level only.

And for the rest 0.01% cases, I have good news for you. To re-color your custom PNG icon, follow the steps:

  1. Make sure your PNG is bi-tonal (black icon on a white background or vice versa for filled icon). For best results, use at least 48×48 image size, or bigger
  2. Insert your PNG into Balsamiq as an image
  3. Transform your image to icon with CTRL + T shortcut ot Transform to... item in context menu
  4. Change the color of the icon! The color applies to black parts only
    image

It’s up to you, whether you want to spent the time on custom icons, or move your project faster to design and implementation phases.

2 Likes

#3

It would be great to have the ability to import a custom icon from SVG. (Although the PNG hack is nice!)

My experience is that if there isn’t a nicely matching icon from the built in set it can be distracting when sharing and presenting mock-ups.

1 Like