6.3. The Standard KDE Icons

KDE provides its own set of original themable icons, as well as possibly one of the best icon engines of its kind. Using these icons makes theming them possible; it allows the user to select a set of icons that all programs use. Using your own icons would make your application appear out-of-place if the user uses nondefault icons. At times, however, it will become absolutely necessary to design your own icons—for example, application icons and special-function toolbar icons.

First, a word of note by Torsten Rahn, KDE's lead artist:

Did you ever see a traffic sign showing a photo-realistic train? Certainly not: traffic-signs were designed to make it easy to recognize them and get their meaning very fast. Therefore they are kept simple: They are very plain, symbolic, and consist of very few colors. Icons used in desktop environments have a similar aim: They should be designed in a way that makes it easy to get their message fast. On the other side the typical user wants to have a desktop that doesn't look ugly or too technical.

You will need several icons for your application. These must be in the PNG (Portable Network Graphics) format.

For application icons, you should draw the following icon resolutions and color depths:

  • 16×16 pixels, low color: required

  • 32×32 pixels, low color: required

  • 32×32 pixels, high color: recommended

  • 48×48 pixels, high color: optional

For your toolbars, you should use the following types:

  • 16×16 pixels, low color: required

  • 22×22 pixels, high color: required

  • 32×32 pixels, high color: highly recommended

Toolbar icons appear in three states: active, disabled, and default. Active is when they are highlighted, with a cursor over them. Disabled is "grayed out," and default is just the standard icon. Be sure that these icons look good in all these states; the icons are generated by the libraries.

Note that low color consists of 40 colors in a 6×7 table, with black appearing three times. In the following table, the colors are listed in their hexadecimal equivalents, and the same colors are shown in Figure 6.1:


   1 
   2 #303030 #585858 #808080 #a0a0a0 #c0c0c0 #dcdcdc
   3 #400000 #004000 #000000 #404000 #004040 #000000
   4 #800000 #008000 #000080 #808000 #008080 #800080
   5 #c00000 #00c000 #0000c0 #c0c000 #00c0c0 #c000c0
   6 #ff0000 #00ff00 #0000ff #ffff00 #00ffff #ff00ff
   7 #ffc0c0 #c0ffc0 #c0c0ff #ffffc0 #c0ffff #ffc0ff
   8 #ff8000 #c05800 #ffa858 #ffdca8 #ffffff #000000
   9 


Figure 6.1. High color should remain consistent with the low-color version, perhaps with a loss of dithering and smoother gradients.


When installing icons, the Makefile will place them according to their name. There's a trick to naming your icons: ColordepthSize-Type-Name.png.

Colordepth may be "lo" or "hi."

Type may be app, device, action, filesystem, or mimetype. app is an application icon; device is most of those icons you find when you browse the /dev/ directory; action is toolbar and menubar icons (KAction icons); filesystem is for the folder icons and such; and mimetype is the icon for file types.

Name, of course, is just a short description of your icon.

For example, KEdit's 16×16 low-color icon can be named lo16-app-kedit.png, and the name for a 32×32 pixel icon for a text document that Kedit opens may be lo32-mimetype-textdocument.png.

You should use only lowercase in these filenames.