Creating Icons for Juju Charms

Introduction

This document provides guidelines and a brief step-by-step tutorial on how to design a Charm icon suitable for the Juju Charm Store.

Charm icon design specifications

A charm icon is an SVG where the canvas size is 96x96 pixels. It consists of a squircle which looks ‘embossed’ in the UI. A unique pictogram (usually monochromatic) is displayed in the middle of the squircle.

The squircle can be filled with either a flat color or a vertical gradient. In case of a gradient, the darker colour should correspond to the bottom of the shape, because of the light source located above the icon.

There is no specification to design the pictogram: it can be a white (or black) monochromatic symbol, a colored logo, or whatever is best. However, remember to respect a 16-pixels padding between the edges of the canvas and the pictogram.

Note that if you do not provide an icon for your charm, the icon of the category associated with your charm will be used as placeholder:

Charm icon template

Canonical has provided designers and developers with a SVG template which will help you to design your own charm icon: it contains the basic squircle and its inner shadow, and includes some guides to design the pictogram at the right place and size.

We recommend that you use Inkscape (www.inkscape.org) to edit Scalable Vector Graphics. Inkscape is an Open Source vector graphics editor, with capabilities similar to Illustrator, and available for Linux, Windows and Mac OS X.

Step by step charm icon creation

In this tutorial, we are going to learn how to design a Charm icon using the SVG template file in Inkscape. Some examples of ‘what you should do and what you should not’ are below.

1. Open the Juju_charm_icon_template.svg file in Inkscape and select the squircle object in the BACKGROUND layer.

2. Apply a flat colour to the shape or edit the gradient colours with the gradient tool and Fill and Stroke window.

3. Select the PICTOGRAM layer and display the guides by clicking on the View > Guides menu.

4. Draw the symbol for your charm within the space bounded by the guides. Inkscape provides lots of tools to create and manipulate shapes and lines and combine them into complex objects. You can also import some existing bitmaps (then vectorize them) or SVGs.

5. If you need to apply a drop shadow to the pictogram, simply group all of its components once it is finished, display the Filter Editor window (click on the Filters > Filter Editor menu) and check Drop shadow in the filter list.

6. You can check how your icon might look with the ‘reviewed’ badge by making the BADGE layer visible.

7. Do not forget to hide (or delete) the BADGE layer and save the SVG file. Congratulations! You charm icon is now ready.


Do’s and Don’ts

  • Icons should not be overly complicated. Charm icons are displayed in various sizes (from 160x160 to 32x32 pixels) and they should be always legible. In Inkscape, the ‘Icon preview’ tool can help you to check the sharpness of your icons at small sizes.

  • Do not invert or rotate the background gradient.

  • Symbols should have a similar weight on all icons: avoid too thin strokes and use the whole space available to draw the symbol within the limits defined by the padding. However, if the symbol is much wider than it is high, it may overflow onto the horizontal padding area to ensure its weight is consistent.

  • Do not use glossy materials unless they are parts of a logo that you are not allowed to modify.