<info> <name>Allan Day</name> <email>aday@gnome.org</email> <name>Jakub Steiner</name> <desc>Selecting and creating icons.</desc> </info>

Icons play an important role in user interfaces: selecting the correct icon is therefore vital to making sure that your application is usable. An identifying icon is also an essential part of any application, and is a crucial part of its identity.

Using Icons in Your User Interface

There are many situations when it is necessary to decide between using an icon and a text label, particularly for buttons. Icons have the advantage of being smaller, and not requiring translation. At the same time, the incorrect use of an icon can make your interface hard - or even impossible - to understand.

<list> <item>

Only use icons whose meaning is commonly recognized. If a commonly recognized icon is not available, it might be better to use a text label instead.

<list> <item>

Convention establishes which icons will be recognized. If you are in doubt, stick to icons which are frequently used in other applications.

</item> <item>

Consider which icons will be meaningful in the specific context of your application - users of specialist tools will often be familiar with domain-specific symbols.

</item> </list></item> <item>

Remember that some icons are only meaningful alongside other icons of the same type. For example, a media icon for stop is simply a square, and may not be identified as a stop icon without other media controls (like play, pause, or skip) being visible close by. Likewise, the icon to remove an item from a list is a subtract symbol (ie. a single line), and will not be recognizable without a corresponding “plus” add icon.

</item> </list>

Choosing Stock GNOME Icons

GNOME provides a full set of standard icons. These should be used where ever appropriate; try to avoid creating custom icons unless they are absolutely necessary.

Follow the icon naming specification when selecting which icons to use - the name of the icon should reflect what the icon is intended to communicate. This is important for those using a screen reader.

You can use the GTK+ icon browser to find recommended icons.

Color vs. Symbolic Icons

GNOME 3 provides two types of icon: full-color and monochrome symbolic icons. The guidelines in this HIG indicate when to use which type of icon. The following is a a general guide.

Full-color icons should be used for:

<list> <item>

devices

</item> <item>

filetypes/mimetypes

</item> <item>

application (launcher) icons

</item> </list>

All other icons should use the symbolic icon style. In addition, symbolic icons should always be used inside:

<list> <item>

buttons

</item> <item>

lists

</item> <item>

entry fields

</item> <item>

when the background is semi-transparent (such as overlaid media or fullscreen controls)

</item> </list>

Application Icons

Every application should have a unique and beautiful application icon. It is the face of the application, and the first visual element a user sees when browsing for new applications. The application basics page includes details on what an application is, and when to provide an application icon.

Because application icons are presented at larger sizes, legacy Tango styled 48x48px or SVG icons no longer suffice (lacking detail). It is essential your application has a 256x256px icon. With the advent of high-DPI displays, a 512x512px variant is recommended.

While not as critical, there are still areas where application icons are presented at a small size. To keep the icon sharp and well defined, a specific rendering is required to sizes of 48x48px, 32x32px, 24x24px and 16x16px. Many GNOME icons also ship a 22x22px size for legacy reasons, but that isn’t required.

To maintain crispness, a lot of detail is discarded for the low resolution variants and a 1px stroke is used to outline the silhouette of the object.

More information on designing an application icon can be found below, in the custom full-color icon section.

Custom Symbolic Icons

Symbolic icons have a simple form and are drawn within a 16x16 pixel grid. They are then programmatically scaled and colored within the user interface itself.

<list> <item>

Identify a single property when looking for an appropriate metaphor for an icon, and focus on what distinguishes the idea you want to communicate. For example, when describing an action to be performed on an image, it isn’t necessary to repeat the idea of an image in every icon. Instead, focus on what is distinct about each action (for example: rotate, tag, align).

</item> <item>

Avoid using any perspective in symbolic icons, stick to a simple orthogonal view.

</item> <item>

Filled shapes are generally faster to process by the human visual system than wireframe outlines.

</item> <item>

Symbolic icons are recolored at runtime to match the context, very much like a piece of text. While there are ways to “shade” parts of an icon by using opacity or creating duotone/pattern dithering, try avoiding these as much as possible.

</item> <item>

When a metaphor relies on the negative space, make sure it will work with the colors inverted. For example a camera lens spec/highlight will only work if lighter than the lens itself.

</item> </list>

Size and grid

While the icons are scalable and should work in any size, the basic canvas size is 16x16 grid units. You have the whole canvas to fill, but note that a filled rectangular object will appear stronger/larger when placed next to items that only use thinner strokes. Try to keep the contrast of your whole set.

Custom Full-Color Icons

Full-color icons are drawn and rendered at a variety of preset sizes.

Perspective

Most icons can be executed best by using the “on the table” perspective, as if the observer was standing in front of the object and looking slightly down on it. Many icons can be rendered with a simple “straight on” or “on the shelf” perspective, with the observer looking directly at the object at eye level.

Palette

Use the Tango color palette when designing full color application or device icons.

Butter |  | Plum |
Orange |  | Scarlet Red |
Chocolate |  | Aluminium |
Chameleon |  |  |
Sky Blue |

You are free to use different shades of these colors depending on the desired material effect. However, these primary colors are a good baseline to start from. All major libre graphics packages come with the Tango palette pre-installed.

See Also

Tango Icon Guidelines