How to install and use custom icons

WireframeSketcher lets you use custom icons. Custom icons must be vector files in SVG format. For more details see working with icons section in the User Guide.

Installing icons from Mockups Gallery

Several icon packs are available in Mockups Gallery. WireframeSketcher integrates directly with Mockups Gallery and makes it easy to install new icons. Here’s how to install an icon pack:

Selected icons will be automatically downloaded and placed in the assets folder of your target project. Now for any screens in this project you’ll have access to extra icons.

Installing icons from other sources

If you have custom icons in SVG format of your own then you can add them manually as icon assets. To do so you must follow a naming convention for icon files. Either name the file as icon_something.svg or create a folder with a name that starts of ends with icons.

Here’s how to install icons from the Noun Project:

Creating custom icons

There are different tools that you can use to create icons in SVG format. Inkscape, Sketch and Adobe Illustrator are some of them. Here are a few guidelines that you should respect to make sure that icons work properly with WireframeSketcher.

Exporting SVG icons with Adobe Illustrator

When exporting SVG icons using Adobe Illustrator make sure that in SVG Options dialog you set the CSS Properties option to Presentation Attributes. This will ensure that the resulting SVG will be using regular SVG attributes for styling instead of CSS:

Adobe Illustrator SVG Options

Using custom icons

Once installed, custom icons become available everywhere built-in icons are. They appear in Icon Chooser dialog and in wiki auto-completion popup (Ctrl+Space). This means you can use them in Icon, Button, Label and Shape widgets or include them in any text via ${icon-name} wiki syntax.