Index / Special pages / Tango Desktop Project

Tango Desktop Project

The Tango Desktop Project represents an initiative to help create a consistent graphical user interface experience for free and open-source software. It was launched in the year 2005 as a collaborative effort between several desktop environments to create a unified visual language for applications, allowing them to use the same graphics across platforms without appearing inconsistent or out-of-place. As such, Tango icons take on what may perhaps best be described as a non-partisan interoperability with the overbearing user interface designs that have seemingly become all the rage these days.

Tango’s original home at freedesktop.org was taken down sometime around the end of 2023. Since I continue to use Tango icons in a number of my own projects, I have taken the liberty of copying over much of the documentation to this website of mine, as is permitted by the Project’s Terms of Use. Knowing this, you are therefore permitted to use the following documentation as well as the base icon theme (including the pallette) as you so desire, however, if you do indeed choose to do so, I kindly ask that you please attribute the Tango Desktop Project for all the hard work they’ve done. Thanks.

Introduction to Tango

While the look and feel of an application is determined by many individual components, some organization is necessary in order to unify the appearance and structure of individual icon sets used within those components. A user running a multiplatform application should not have the impression that the look is unpolished and inconsistent with what he or she is used to.

The Tango icon theme’s goal is to make applications not seem alien on any desktop. While this isn’t about merging styles of all desktop systems, we do aim to not be drastically different on each platform. Along with a generic type fallback, having a similar style will help in the transition phase with some legacy icons which may still remain on a user’s particular desktop.

Icon Theme Guidelines

The Tango Desktop Project defines an icon theme guideline to which artists and designers can adhere. A sample implementation of the style is available as an icon theme based upon a standardized icon naming specification. In addition, the project provides transitional utilities to assist in creating icon themes for existing desktop environments, such as GNOME and KDE.

Color Palette

Having a common color palette is required to have a consistent look across all icons. Visual style is heavily influenced by the colors used.

The Tango color palette consists of 27 RGB colors, as shown on the image above. Most desktops allow for 24-bit RGB icons (+8-bit Alpha channel).

The common practice when drawing icons is to use the palette as a base, applying it on large areas. Shading with gradients, creating highlight and shadows by changing value, and minor changes of saturation are also allowed and endorsed. Colors do not have to come exclusively from this set, as additional colors may be used. Starting from the base color and changing value, saturation or even hue slightly gives more consistent results than starting from arbitrary colors.

For your convenience, we prepared the palette for use in the following formats:

Defining Tango Style Elements

There are many attributes of an icon that define it as part of Tango, including ones such as perspective and lighting (which are outlined below).

Let’s examine at the key visual aspects that define the style:

  1. Object Outline: All Tango icons are stroked with a thin outline to improve contrast. At low resolutions the stroke size is 1px. The stroke should not scale along with the icon, it should remain 1px. The color of the outline is a dark variant of the key color of the icon. This is done by retaining the hue and saturation of the dominant fill color and lowering the value to approximately 20%). In the example above, the trashcan is green, so the stroke will be green as well.
  2. Highlights: The edges of objects tend to reflect light more due to the fact the position of the observer relative to the light source is almost always ideal for the reflection. In terms of highlights, the theme inherits the style of Firefox/Thunderbird Pinstripe/Winstripe designed by Kevin Gerich & Stephen Horlander (Pinstripe, Winstripe) which shift away from reality by creating a second inner outline of the object. This stroke is very subtle and may not be apparent on some matte objects.
  3. Glossy reflections: Use glossy reflection only on objects that have a reflective surface in real life (plastic, glass, some metal, et cetera). A sheet of paper certainly doesn’t have such attribute.

Various elements have been picked from existing icon styles: Similar perspective as GNOME icons, a colored object stroke from KDE, an Aqua-like highlight influenced by Mac OS X, and edge highlights and overall lightness from the Firefox Pinstripe theme.

Style Attributes

To better understand the style of Tango, consider the following adjectives:

Perspective

There are three types of perspective defined for Tango.

  1. Flat/On the Shelf Perspective: This style resembles looking at an object on a shelf at eye level, looking at an object from above, or laying on surface. This is the most common perspective for toolbar icons and document mime type icons.
  2. On the Table: This type of perspective is the most common for application icons. Action/Toolbar icons also utilize this perspective from time to time.
  3. Tilted Table: In cases where the object’s appearance is more evident from an angle, you are free to use the tilted table perspective—but this is the least common perspective of the three and should be used only in cases where the other two do not provide a clearly distinctive silhouette of the object.

Lighting

Having homogenous lighting across all icons also is important for visual consistency. Tango icons are lit from above, with the light source slightly to the left. Icons with on the table perspective may cast a fuzzy shadow on the surface as if the light source came from the position of the observer.

Icon Naming Guidelines

One of the major components in establishing a look & feel for the desktop is the icon theme. This page describes the proposed standardisation of icon names to use when creating icon themes for desktops and applications which implement the Freedesktop Icon Naming Specification. This proposed Icon Naming Specification complements the existing Icon Theme Specification. (docbook2html can be used to convert the xml to a more readable form).

To help with the transition to the new naming scheme, Icon Naming Utilities are available. This utility maps the icon names used by the GNOME and KDE desktops to the icon names proposed in the Icon Naming Specification linked above.

Icon Library

We have designed a basic set of desktop icons that follow the style guidelines. The set has been created as a proof of concept for the style, but works rather well as a replacement for the base theme under GNOME and KDE.

Download

(Download information). Alternatively, you can check out the tango-icon-theme module from freedesktop.org cvs:

cvs -d:pserver:[email protected]:/cvs/tango login
cvs -d:pserver:[email protected]:/cvs/tango co tango-icon-theme

You can check out the icon-naming-utils modile from freedesktop.org cvs:

cvs -d:pserver:[email protected]:/cvs/icon-theme login
cvs -d:pserver:[email protected]:/cvs/icon-theme co icon-naming-utils

Refer to the installation instructions for information on how to install Tango.

Lookup

The Tango icon library contains a basic set of icons for the most common usage. To make it easier for a developer to find an appropriate icon for their application a number of aids are there to help.

The SVG versions of the icons contain useful meta information such as keywords which enable searching. The naming specification defines structured naming scheme that also helps.

In future we also plan to provide a web-based searching facility for finding icons easily.

How to Participate

Users may file bugs in our Bugzilla (no longer available). The icon-naming-utils may be missing links to existing names. Patches are welcome on the tango mailing list. Artists:

Additional Sets

While the base set aims to fulfill the core icon needs, we are working on additional icon sets for used in specialized applications.

(The rest of this section has been removed due to its contents now consisting mainly of dead links. Archived source)

Installation

Installing Tango is intended to be straight forward, however this guide will help if you have any difficulties.

Requirements

You will need the following packages for a successful installation:

A recent version of librsvg or kdelibs is also suggested for generating PNGs. For now, rsvg from librsvg is the preferred method as it produces much higher quality PNGs when compared to ksvgtopng.

Both release tarballs and cvs checkouts are available in the downloads.

When prompted for a password at CVS, just press enter. This will give you an anonymous login.

Icon Naming Utilities

First, we need to install icon-naming-utils. The naming utilities generate the icon files appropriate to the desktop environment you use. It should be noted, when icon-naming-utils is updated, tango-icon-theme should also be updated.

Build and install icon-naming-utils:

./autogen.sh  (if using CVS)
./configure --prefix=/usr  (or /opt or whatever is useful)
make
make install  (may require administrator privileges)

Note that in this case icon-naming-utils places its pkgconfig file in /usr/share/pkgconfig/. As a default, the auto* tools use /usr/local if no prefix has been set. Adjust PKG_CONFIG_PATH to reflect this as necessary. For example: export PKG_CONFIG_PATH="$PKG_CONFIG_PATH:/usr/share/pkgconfig"

Tango Icon Theme

Now, onto installing Tango. This is generally similar to installing icon-naming-utils, except you may want to pay closer attention to ./configure’s flags if installing for use in desktop environments that support only the PNG image format (such as KDE). First, we need to review what flags are available:

./autogen.sh (if using CVS)
./configure --help

If you use KDE, you will want to generate PNG images. For GNOME, a standard ./configure should suffice.

Note that the chosen –prefix needs to point to a location that allows your chosen desktop environment to find the icon theme (usually /usr or /opt, depending on how you or your distribution have installed a given desktop environment).

./autogen.sh  (if using CVS)
./configure --prefix=/usr  (or /opt or whatever is useful)
make
make install  (may require administrator privileges)

Using KDE, Tango can also be installed with user privileges, by doing ./configure –prefix=$HOME/.kde , providing the icon naming utilities are also installed in $HOME. Just adjust PKG_CONFIG_PATH accordingly. For example: export PKG_CONFIG_PATH="$PKG_CONFIG_PATH:/home/joe/apps/share/pkgconfig"

Tango Icon Theme Extras

Optionally, you can also install Tango Extras. This is almost identical to installing tango-icon-theme. Again, you may want to pay close attention to ./configure’s flags if installing for use in desktop environments that support only the PNG image format (such as KDE). First, we need to review what flags are available:

./autogen.sh (if using CVS)
./configure --help

If you use KDE, you will want to generate PNG images. For GNOME, a standard ./configure should suffice.

Note that the chosen –prefix needs to point to a location that allows your chosen desktop environment to find the icon theme (usually /usr or /opt, depending on how you or your distribution have installed a given desktop environment).

./autogen.sh  (if using CVS)
./configure --prefix=/usr  (or /opt or whatever is useful)
make
make install  (may require administrator privileges)

Using KDE, Tango Extras can also be installed with user privileges, by doing ./configure –prefix=$HOME/.kde , providing the icon naming utilities are also installed in $HOME. Just adjust PKG_CONFIG_PATH accordingly. For example: export PKG_CONFIG_PATH="$PKG_CONFIG_PATH:/home/joe/apps/share/pkgconfig"

Patches to KDE

Please note, KDE does not currently look in some of the icon contexts described in the Icon Naming Specification and used by the Tango Icon Library. Linked below are some rudimentary patches which allow KDE to use the proposed new icon contexts. Without these patches, a number of icons will be missing from the UI.

To apply the KDE patches, get recent copies of kdebase and kdelibs and untar each. Copy the corresponding patch to the top-level source directory and apply it:

cd kdelibs-3.5.0 patch -p0 < kdelibs-new-icon-theme-contexts.diff cd ..

cd kdebase-3.5.0 patch -p0 < kdebase-new-icon-theme-contexts.diff cd..

Then, follow the build instructions provided by the KDE Developer Documentation. Please note, when installing KDE from a source build, it’s best to set an install prefix that won’t overwrite packages installed by your distribution. Building as a user other than your regular login is also recommended.

Using these patches is not absolutely necessary, however any icons residing in the icon contexts not currently used by KDE will not be available or visible in the UI.

Finally, you should now be able to choose Tango from your desktop environment’s theme manager. Enjoy!

For instructions on how to get a quick and dirty copy of the Tango Icon Theme working in KDE, check out this Forum Post (no longer available). Keep in mind that this BREAKS the Tango naming scheme, and is not recommended for general use!