Toolbar icons

This is an internal document

While making small fixes to this page like fixing typos and dead-links is encouraged, any changes which significantly modify the information of this page should be suggested on the discussion page instead, as this is an internal document.

This is a tutorial on how to create icons for our toolbar. Take a look at icons that have already been created before you start to create one yourself. When you have succeeded to create a new icon please contribute it to Wikimedia Commons.
Textformatting icons are treated seperatly, read how to create Texformatting icons here.

Icons

Wishlist

Style

The vector toolbar icons make use of the free GNOME Desktop Icons. Any of these icons can easily be turned into an icon for our toolbar by following the guidelines: Turning GNOME Icons into a vector icon.

If you need to create a new icon, which is not in the GNOME Icon-set, please follow the Tango Icon Style Guide Lines.

Turning GNOME Icons into a vector icon

If you want to use a GNOME Icon in the vector toolbar you have to do some graphical adjustments. Please follow these steps:

Download the icon of your choice from Wikimedia Commons as a 200px PNG file.
Open the file in a programm like Adobe Photoshop or Gimp.
Delete all shadows (that the icon-object casts on the virtual platform).
Crop the file to be excactly as hight and wide as the icon is (no white space around it).
Change the image size to be not more than 20px high and wide. The perfect size may be a bit smaller than 20px, this depends on the characteristics of the specific icon. Make sure "Constrain Proportions" and "Resample Image" are checked. Choose "Bicubic (sharper)".
Often it is necessary to add dark outlines. Depending in the complexity of the logo there are many ways to do that. If you have a simple icon you can do it as follows:

Duplicate the Layer
Turn layer Opacity to 0%
Open the layer properties (right click on the Layer)
Add a 1px innern stroke, with black and 20% Opacity. (You can vary with the opacity until you get a nice looking result).

Go to "Canvas Size" (not "Image Size"!) and edit the size to be 22*22px.
Save this file as a png(-24). Please note the Namings Guide Lines and upload your Icon to Wikimedia Commons.

Specifications

size
file
color

Recommendations

Do	Don't t
aprox. 1px thick lines	thiner, thicker lines
visible icon-elements	thin, small icon-elements
metaphors, anologies to real life	abstract icons
intuitivly understandable	insider

Naming Guide Lines

Please upload your Icon to Wikimedia Commons and name your file like this:
"toolbaricon_" + description of the icon + fileformat (".png")
Please describe what the icon symbolizes rather than what function it represents.

Example: For the lock icon, which can be used to switch to a readonly mode, the file would be named:
"toolbaricon_lock.png"