Icon Guidelines

This document explains the artistic subtleties of Haiku icons. If it leaves something unclear to you, that is, what rules to follow when designing an icon for Haiku, please bring the issue to our attention. Existing icons should give you a pretty good idea what directions to follow. This document is meant to define the distinctive look in further detail and to be a useful resource in case of doubt. Also, this document will hopefully provide you with help on what you should change if you have designed an icon and feel it doesn't seamlessly fit in with the rest of the system.

Please be aware that Haiku users feel very strongly about a consistent look. The more you make your icon fit into the rest of the system, the more it is appreciated by your users.

Perspective

Haiku icons inherit the perspective of the BeOS icons and add some of their own. If a cube were sitting on the floor, the angles of its edges would be defined as follows: the line where the left front side and the floor meet would have an angle such that for every two pixels it goes to the right, it goes one pixel down, and the line of the right side meeting the floor goes one pixel up for every pixel going right. Vertical lines are straight without any angle to help make the icons crisper (realistically, icons should be wider at the top but they aren't). The change in perspective that Haiku icons add to the original BeOS look comes from changing non-vertical lines that do not touch the floor to add a somewhat more dramatic perspective. Edges coming from the corners closest to the viewer and on the floor still follow the isometric BeOS perspective with the angles described above, all other edges are slightly tweaked to break free of the strict isometric look. The most important thing is still crispness, that's why there is no strictly defined perspective. Don't exaggerate too much -- try to make it fit with the rest of the icons. It is sometimes easiest to first design an icon with an isometric look and modify for perspective as the last step of work. Keeping the perspective consistent and correct-looking throughout the icon is also desirable.

Lighting

There are two light sources illuminating a Haiku icon. The main light source casts a bright neutral light from the top left. A second light source shines from the opposite side with an ambient light that can be slightly colored (for example, a warmer tone). Its effects are not seen on surfaces the main light source directly shines upon.

Gradients

Gradients used on the icon should result from the effects of the lightsources as described above. You do not need to use gradients on every surface -- they obviously use more storage space than solid colors, but without gradients, icons would look too stiff. You should use enough of them to give your icon a modern look.
As a general rule, surfaces facing towards the viewer should be lighter at the top and the top surfaces should be lighter on the left side. Surfaces on the right which are not directly lit by the main light source should get the darkest colors. They are lit from the ambient lightsource and from the reflection of the floor, but the effects should be very subtle and only seen on closer examination. These surfaces get the darkest colors where they touch the directly lit surfaces. Overall, colors should be bright and tweaked to help the contrast within the icon. Gradient directions don't have to line up with a specific angle to make icons look less stiff. Instead, you should tweak the gradient directions to help improve contrast.

Colors

Colors are obviously a tough subject. At the moment, there is no color palette defined from which you should pick the dominant colors of your icon. In the existing icons, clean colors are almost completely avoided, with the exception of grays, which are not toned in any way. Most dominant colors appear quite saturated somewhere in the icon, but the colors are always a mixture, never pure red, green, or blue. Where they fade into a lighter tone, they are mostly desaturated and pastel-like. In the shade, the colors are mostly still saturated, aiming for believable lighting, but colors can vary in tone to give the appearance of a warmer or colder light condition in the shadow, which mostly depends on the overall coloring of the icon and gut feeling.

Shadows

First of all, a shadow is the projection of a body's silhouette as seen from the light source. Cast onto the flat floor, the shadow is subject to further distortion because of the viewer's perspective.

Self-shadowing on the icon objects is encouraged, because it can improve contrast. Sometimes gradients work well for these. A naturalistic shadow is preferable unless it gets too complicated and would distract from the main icon. The people icon is one example for a simplified shadow shape. Avoid making shadows that are cut off at the right edge of the icon by leaving enough room for them. It is not so important that the shadows have approximately the same length throughout all icons, but they all need to be the same direction: straight to the right. Just like shadows created by the sun, they also do not become wider with more distance from the object.

Each of the four icons shown above has something interesting to be said about their shadows:

• In the Fonts icon, the shadow does not have straight horizontal lines, but this is because the A shape doesn't have edges pointing straight up. The direction of the shadow is still towards the right.
• The Person icon's shadow is simplified with the help of curves.
• The shadow in the ShowImage icon is lower than the body of the projector