<page xmlns="http://projectmallard.org/1.0/"
type="topic"
id="icons-and-artwork">
<info>
<credit type="author">
<name>Allan Day</name>
<email>aday@gnome.org</email>
</credit>
<credit type="author">
<name>Jakub Steiner</name>
</credit>
<include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>
<desc>Selecting and creating icons.</desc>
</info>
<title>Icons and artwork</title>
<p>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.</p>
<section id="using-icons">
<title>Using icons in your user interface</title>
<p>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.</p>
<list>
<item><p>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.</p>
<list>
<item><p>Convention establishes which icons will be recognized. If you are in doubt, stick to icons which are frequently used in other applications.</p></item>
<item><p>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.</p></item>
</list></item>
<item><p>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.</p></item>
</list>
</section>
<section id="stock-icons">
<title>Choosing stock GNOME icons</title>
<p>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.</p>
<p>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.</p>
<p>You can use the GTK+ icon browser to find recommended icons.</p>
<section id="color-vs-symbolic">
<title>Color vs. symbolic icons</title>
<p>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.</p>
<p>Full-color icons should be used for:</p>
<list>
<item><p>devices</p></item>
<item><p>filetypes/mimetypes</p></item>
<item><p>application (launcher) icons</p></item>
</list>
<p>All other icons should use the symbolic icon style. In addition, symbolic icons should always be used inside:</p>
<list>
<item><p>buttons</p></item>
<item><p>lists</p></item>
<item><p>entry fields</p></item>
<item><p>when the background is semi-transparent (such as overlaid media or fullscreen controls)</p></item>
</list>
</section>
</section>
<section id="application-icons">
<title>Application icons</title>
<p>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 <link xref="application-basics">application basics page</link> includes details on what an application is, and when to provide an application icon.</p>
<p>Because application icons are presented at larger sizes, legacy Tango styled 48x48 px or SVG icons no longer suffice (lacking detail). It is essential your application has a 256x256 px icon. With the advent of high-DPI displays, a 512x512 px variant is recommended.</p>
<media type="image" mime="image/png" src="figures/icons/sizes.png"/>
<p>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 48x48 px, 32x32 px, 24x24 px and 16x16 px. Many GNOME icons also ship a 22x22 px size for legacy reasons, but that isn’t required.</p>
<media type="image" mime="image/png" src="figures/icons/sizes-small-24.png"/>
<p>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.</p>
<p>More information on designing an application icon can be found below, in the custom full-color icon section.</p>
</section>
<section id="custom-symbolic-icons">
<title>Custom symbolic icons</title>
<p>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.</p>
<list>
<item><p>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).</p></item>
<item><p>Avoid using any perspective in symbolic icons, stick to a simple orthogonal view.</p></item>
<item><p>Filled shapes are generally faster to process by the human visual system than wireframe outlines.</p></item>
<item><p>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.</p></item>
<item><p>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.</p></item>
</list>
<media type="image" mime="image/svg" src="figures/icons/inverting.svg"/>
<section id="size-and-grid">
<title>Size and grid</title>
<p>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.</p>
</section>
</section>
<section id="custom-full-color-icons">
<title>Custom full-color icons</title>
<p>Full-color icons are drawn and rendered at a variety of preset sizes.</p>
<section id="perspective">
<title>Perspective</title>
<p>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.</p>
</section>
<section id="palette">
<title>Palette</title>
<p>Use the Tango color palette when designing full color application or device icons.</p>
<table>
<tr>
<td><p>Butter</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/butter.svg"/></td>
<td><p>Plum</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/plum.svg"/></td>
</tr>
<tr>
<td><p>Orange</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/orange.svg"/></td>
<td><p>Scarlet Red</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/scarlet-red.svg"/></td>
</tr>
<tr>
<td><p>Chocolate</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/chocolate.svg"/></td>
<td><p>Aluminium</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/aluminium1.svg"/></td>
</tr>
<tr>
<td><p>Chameleon</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/chameleon.svg"/></td>
<td></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/aluminium2.svg"/></td>
</tr>
<tr>
<td><p>Sky Blue</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/sky-blue.svg"/></td>
</tr>
</table>
<p>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.</p>
</section>
</section>
<section id="see-also">
<title>See also</title>
<p><link href="http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines">Tango Icon Guidelines</link></p>
</section>
</page>