You've taken a peek at the human interface guidelines' icon section and are psyched to create a new app icon. But what is the best approach? While there are numerous paths leading to success, here's one that we found works for us. We hope that you find inspiration from it and will help you find one that works for you.

Sketching

Even if the style is simple and geometric, it makes sense to sketch out some metaphor ideas before diving into your favorite vector editor.

To help you out with the proportions, we've prepared a few templates for the sketching phase.

• Download Pencil & Paper Template (Prints decent on a laser B/W printer).

• Download Mypaint Template (includes layers you can toggle)

• Download Procreate Template (While not Free software, the form factor and quick access puts the iPad app with Apple Pencil on the same level as a pencil and paper).

This stage is also great to start the discussion with the project maintainer. It's easier to throw away concepts at this stage before spending time on executing an idea that the maintainer isn't fond of. Involving maintainers early lower the possibility of not having interest or outright opposing the change. Here's how the process usually looks like.

Vectors

Icon Preview

The primary workflow is supported by a new tool called Icon Preview. Icon Preview allows you to create an app icon from scratch and check that looks good in all contexts.

It provides a template and works in tandem with illustration packages such as Inkscape to view an icon you're designing in multiple sizes, backgrounds and neighboring app icons. Every time you save the document, Icon Preview updates the preview.

It is a great assistant to nail down the amount of detail that will still be visible at the smaller sizes and makes sure the icon is legible in the most common light conditions.

The template consists of the fullcolor canvas (128x128px) and a 16x16px symbolic canvas. If you choose to use Icon Preview, the template will include some sample icons to help you nail the style providing some inspiration for incorporating similar geometric elements in your work.

Export / Submission

In the future, Icon Preview will assist you in exporting the icon -- making sure to split the master SVG sheet into a fullcolor SVG and the symbolic. In addition it will clean up the document using svgo. The resulting SVG for fullcolor is between 5-10kB and renders quicker. We are considering converting some advanced SVG features such as masks into simple shapes at this point to be renderable with toolkits such as Qt that only support SVG tiny.

Currenly all this work has to be done manually. In inkscape, this usually means cretaing a copy of the icon, deleting the template and guideline layers and all the components and varinats outside of the canvas, saving. The next step would be to run svgo manually to compress the file size and clean up. Anothe rcopy needs to be created for the symbolic, selecting the 16x16 rectangle in the template layer, setting the document size to selection in the document properties and saving the file without all the other fullcolor related elements.

For GNOME hosted projects, making it super easy for developers to merge your work in pretty much guarantees the icon being updated. If all a developer needs to do is accepting a merge request, 99% of them will be happy to do so. We have launched an initiative that includes templates for commit messages and lists examples of those merge requests that can help you assist in producing appropriate meson and automake adjustments along with the image assets themselves.

FIXME: general Builder>merge request workflow.