Icons are used in large buttonbars, smaller toolbars, lists and, rarely, panels. This means there are 6 often used size/color combinations:

Naming convention

SVG files can be optimized for color and size, and this is reflected in the name.


WebHare will always try to display a requested icon, even if the ideal size or color is not available. For missing sizes the image is scaled. For missing specific color files all items in “black” or “white” will be inverted (#4a4a4a is set to #f0f0f0 and vice versa). Preferably a .b or .w is used for inverting since these contain no other colors.

IXO (Icon XML) files

You can use .IXO xml files to create icons by referring to SVG files or other IXO files. This allows you to work with backgrounds and overlays.

<icon xmlns="http://www.webhare.net/xmlns/tollium/icons">

Available layers


A regular layer creates a 1px larger cutout in the underlying normal layer. A backgroundlayer does not get this cutout.

Layer properties

src="~URL" <!-- URL to image, for example "tollium:backgrounds/file" -->
size="##px" <!-- size in pixels, usually 16 or24. Layer only displayed for this icon size. -->
color="w|b|c" <!-- color version of icon: white, black, color version. Layer is only displayed when this color version is asked for. -->

translatex="#px" <!-- depricated ? -->
translatey="#px" <!-- depricated ? -->

Example IXO

<icon xmlns="http://www.webhare.net/xmlns/tollium/icons">
  <backgroundlayer src="tollium:backgrounds/file" color="c"/> <!-- Is 'b' ATOW but should be "c" as soon as available! -->
  <layer src="tollium:objects/file"/>
  <layer src="tollium:overlays/filetypes/rtd"/>

This backgroundlayers is only shown when a color version is asked for, for example in lists. The backgroundlayers consists of white/very light gray gradient that is mostly needed when the line is selected. Since it is a backgroundlayer, the layer drawn above it (file icon) does not cause a cutout. The top layer (rtd overlay) does cause a cutout in the file icon.

Best practices for drawing

Ideally every icon should be optimised for both sizes and colors, which usually means creating at least 2 SVG’s - one for each size.

Best practices for naming and choosing