Sample Page for the Oxygen Directory Tree Icons

Welcome to the Oxygen Directory Tree Icons Project: a distribution of 221 icons in PNG image format. Each icon comes in five sizes (for square icons: 20×20, 26×26, 36×36, 52×52 and 68×68 pixels); they can be used by web authors to create “directory tree listings”, as shown in the examples in this document.

Although you can use any directory tree icon in your web pages (by using the standard HTML <img> element), the icons look best when used for directory tree listings in a table. You may wish to use the Oxygen File-type Icons (particularly of size 16×16 and 22×22) for icons within ordinary text.

There are essentially two ways to use the directory tree icons as part of a table:

1. (Deprecated) You can use HTML Transitional markup such as the following (this very much depends on browsers’ “quirks mode” to be displayed correctly):

   <table border="0" cellspacing="0" cellpadding="0" rules="none">
     <tr><td nowrap>
       <a href="root-link"
         ><img src="world.png alt="[Root]" width="NN" height="NN"
         border="0" align="top"></a
         >&nbsp;<a href="root-link">Root link</a>
     </td></tr>
   
     <tr><td nowrap>
       <img src="tree-Tn.png" alt="" width="NN" height="NN" align="top"
         ><a href="level-1-link"><img src="file-url.png" alt="[URL]"
         width="NN" height="NN" border="0" align="top"></a
         >&nbsp;<a href="level-1-link">Level 1 Link</a>
     </td></tr>
   
     ...
   </table>
   

   The essential points to note are:

   • The variable NN refers to the icon size: 20, 26, 36, 52 or 68. An icon size of 20 or 26 is recommended.
   • The table must not insert any unwanted spaces (hence the need for the border, cellspacing and cellpadding attributes, as well as for “quirks mode”),
   • The table rows (and single columns) must not be allowed to wrap,
   • The directory tree icons are specified with align="top". This is a bit of a compromise, as it strongly depends on the fonts being used to display the rest of the line. The font size (and line height) should be less than NN pixels in height to prevent gaps appearing between rows.

   Please beware of adding spaces where none should exist, such as between tags! (Some browsers are picky about such details and will happily misalign your images).

2. (Preferred) You can use XHTML Strict markup with a suitable CSS stylesheet:

   <table class="dirtreeNN">
     <tr><td>
       <a href="root-link"
         ><img src="world.png alt="[Root]" width="NN" height="NN"
         class="dirtreeNN" /></a
         >&nbsp;<a href="root-link">Root link</a>
     </td></tr>
   
     <tr><td>
       <img src="tree-Tn.png" alt="" width="NN" height="NN" class="dirtreeNN"
         /><a href="level-1-link"><img src="file-url.png" alt="[URL]"
         width="NN" height="NN" class="dirtreeNN" /></a
         >&nbsp;<a href="level-1-link">Level 1 Link</a>
     </td></tr>
   
     ...
   </table>
   

   At a minimum, the CSS definition should include, for each icon of size NN×NN:

   img {
     vertical-align: baseline;
     margin: 0;
     padding: 0;
     border: none;
   }
   table.dirtreeNN {
     border-collapse: collapse;
     border-spacing: 0;
     margin: 0;
     padding: 0;
     border: none;
   }
   table.dirtreeNN td {
     height: NNpx;
     font-size: SIZE;     /* Dependant on font-family, line-height and NN */
     padding: 0;
     border: none;
     white-space: nowrap;
   }
   table.dirtreeNN td.s {
     height: short-NNpx;
     font-size: 1px;
   }
   table.dirtreeNN img.dirtreeNN {
     float: left;         /* Prevent unwanted gaps */
   }
   

   The variable short-NN is the height of the short-height icons: 5 for 20×20 pixel icons, 7 for 26×26 pixel icons, 9 for 36×36 pixel icons, 13 for 52×52 pixel icons or 17 for 68×68 pixel icons.

   Finding the correct value of SIZE is a matter of trial and error as it depends on the font-family and line-height selected. Try values of 14px, 16px, 26px, 40px and 48px as starting points for 20×20, 26×26, 36×36, 52×52 and 68×68 pixel icons respectively.

   Please note that the directory tree icons are floated left in the dirtreeNN table. This is to prevent unwanted gaps from appearing between rows when rendered in standards-compliant browsers.

   If you wish to use smaller fonts for SIZE, you may wish to use the following CSS definition (the differences are highlighted in bold):

   img {
     vertical-align: baseline;
     margin: 0;
     padding: 0;
     border: none;
   }
   table.dirtreeNN {
     border-collapse: collapse;
     border-spacing: 0;
     margin: 0;
     padding: 0;
     border: none;
   }
   table.dirtreeNN td {
     height: NNpx;
     font-size: SIZE;     /* May be something like “100%” */
     vertical-align: middle;
     padding: 0;
     border: none;
     white-space: nowrap;
   }
   table.dirtreeNN td.s {
     height: short-NNpx;
     font-size: 1px;
   }
   table.dirtreeNN td.s img {
     float: left;
   }
   table.dirtreeNN img.dirtreeNN {
     vertical-align: middle;
   }
   

   The alternative to displaying everything in a single table data element, <td>, is to use multiple table data elements, one per image, with the images declared display: block and any text occupying the remaining column(s). This may be more trouble than it is worth, particularly since some (optional) icons do not have the same width.

   You should consult the source code of this sample document to look at the markup being used for the examples; you will need to search for id="examples" to do so.

These icons were derived from the Oxygen File-type Icons Project from The ZAP Group; those, in turn, were derived from the Oxygen icons available in KDE 4.0 and later. They are distributed under the terms of the GNU Lesser General Public License, version 3 or later. Each icon has been hand-optimised for use on web pages.

File Types

The following icons may be used to represent file types (although you would normally use the equivalent 16×16 pixel Oxygen File-type Icons to do so in ordinary text):

 file-addressbook.png: Address book
 file-archive.png: Archive or package
 file-archive-compressed.png: Compressed archive
 file-archive-deb.png: Debian package archive
 file-archive-jar.png: Java archive
 file-archive-rpm.png: RPM package archive
 file-archive-tgz.png: Gzipped-TAR archive
 file-audio.png: Full-quality (raw) audio file
 file-audio-midi.png: MIDI audio file
 file-audio-sampled.png: Sampled (compressed) audio file
 file-audio-voice.png: Voice-quality compressed audio file
 file-binary.png: Binary file
 file-blender.png: Blender document
 file-broken.png: Broken or incomplete file
 file-cad-design.png: Computer Aided Design (CAD) design
 file-cad-drawing.png: Computer Aided Design (CAD) drawing
 file-calendar.png: Calendar
 file-cdaudio.png: Compact Disc audio file
 file-cdimage.png: CD-ROM or other optical media image
 file-chm.png: Compiled HTML Help file
 file-compressed.png: Compressed file
 file-contact.png: Contact resource
 file-css.png: Cascading style sheet (CSS) file
 file-csv.png: Comma-separated values (CSV) file
 file-cue.png: CD-ROM mastering cue file
 file-designer.png: Designer document
 file-digital-certificate.png: Digital certificate
 file-digital-encrypted.png: Encrypted file
 file-digital-keys.png: Digital encryption/decryption keys
 file-digital-pgp.png: PGP encrypted file
 file-digital-signature.png: Digital signature
 file-dneg.png: Digital negative or raw image
 file-document.png: Generic document
 file-download.png: Download list
 file-dtd.png: Document Type Definition (DTD) file
 file-ebook.png: Electronic book
 file-electronics.png: Electronics design file
 file-electronics-part.png: Electronics component (part) file
 file-empty.png: Empty file
 file-enriched.png: Enriched text file
 file-eps.png: Encapsulated PostScript file
 file-exec.png: Executable application
 file-exec-dos.png: MS-DOS executable application
 file-exec-java.png: Java application
 file-exec-java-applet.png: Java applet
 file-exec-script.png: Executable script
 file-flashcards.png: Open KVTML flashcards
 file-font-bitmap.png: Bitmap font
 file-font-otf.png: OpenType scalable font
 file-font-ttf.png: TrueType scalable font
 file-font-type1.png: Type 1 PostScript font
 file-generic.png: Generic file
 file-googleearth.png: Google Earth KML file
 file-html.png: HTML document
 file-iccprofile.png: ICC colour profile
 file-illustrator.png: Adobe Illustrator document
 file-image.png: Graphics image
 file-info.png: Texinfo or Info document
 file-ldap.png: LDAP directory data file
 file-lilypond.png: LilyPond document
 file-location.png: Latitude/longitude location on Earth
 file-lyx.png: LyX document
 file-man.png: Manual page
 file-mathml.png: MathML document
 file-message.png: E-mail message
 file-message-partial.png: Partial e-mail message
 file-missing.png: Missing file
 file-ms-access.png: Microsoft Access database document
 file-ms-excel.png: Microsoft Excel document
 file-ms-powerpoint.png: Microsoft Powerpoint document
 file-ms-word.png: Microsoft Word document
 file-ms-word-template.png: Microsoft Word template
 file-ms-write.png: Microsoft Write document
 file-multiple.png: Multiple files
 file-news.png: News file
 file-news-index.png: NNTP News index (NZB) file
 file-od-chart.png: OpenDocument chart document
 file-od-database.png: OpenDocument database document
 file-od-formula.png: OpenDocument formula document
 file-od-formula-template.png: OpenDocument formula template
 file-od-graphics.png: OpenDocument graphics document
 file-od-image.png: OpenDocument image document
 file-od-image-template.png: OpenDocument image template
 file-od-presentation.png: OpenDocument presentation document
 file-od-presentation-template.png: OpenDocument presentation template
 file-od-spreadsheet.png: OpenDocument spreadsheet document
 file-od-spreadsheet-template.png: OpenDocument spreadsheet template
 file-od-text.png: OpenDocument text document
 file-od-text-template.png: OpenDocument text template
 file-patch.png: Patch or diff file
 file-pdf.png: Portable Document Format file
 file-plugin.png: Plugin
 file-podcast.png: Podcast
 file-postscript.png: PostScript document
 file-postscript-compressed.png: Compressed PostScript document
 file-project.png: Project management document
 file-rdf.png: Resource Description Framework file
 file-recycle.png: Backup or recycled file
 file-rss.png: Really Simple Syndication file
 file-rtf.png: Rich Text Format (RTF) document
 file-scribus.png: Scribus document
 file-sgml.png: SGML document
 file-source-ada.png: Ada source code
 file-source-awk.png: AWK source code
 file-source-c.png: C source code
 file-source-c-hdr.png: C header source code
 file-source-cmake.png: CMake source file
 file-source-cpp.png: C++ source code
 file-source-cpp-hdr.png: C++ header source code
 file-source-csharp.png: C# source code
 file-source-exec.png: Source code for executable scripts
 file-source-haskell.png: Haskell source code
 file-source-java.png: Java source code
 file-source-javascript.png: Javascript source code
 file-source-make.png: Makefile source file
 file-source-pascal.png: Pascal or Delphi source code
 file-source-perl.png: Perl source code
 file-source-php.png: PHP source code
 file-source-plasma.png: KDE Plasma source code
 file-source-po.png: Internationalisation (PO) source file
 file-source-python.png: Python source code
 file-source-qml.png: QML source code
 file-source-rpmspec.png: RPM specification source file
 file-source-ruby.png: Ruby source code
 file-source-script.png: Source code for scripts
 file-source-shell.png: Shell script source code
 file-source-sql.png: SQL source code
 file-source-tcl.png: TCL source code
 file-subrip.png: Subrip file
 file-subrip-titles.png: Subrip titles
 file-sxw.png: Staroffice Writer document
 file-tex.png: TeX document
 file-text.png: Plain text file
 file-text-authors.png: Authors text file
 file-text-changelog.png: Changelog text file
 file-text-copying.png: Copying text file
 file-text-generic.png: Generic text file
 file-text-hex.png: Hexadecimal text file
 file-text-install.png: Install text file
 file-text-log.png: Log text file
 file-text-readme.png: Readme text file
 file-torrent.png: Torrent metadata
 file-troff.png: TROFF document
 file-unknown.png: Unknown file
 file-url.png: URL specification
 file-vcalendar.png: VCalendar resource
 file-vcard.png: VCard resource
 file-vector.png: Vector graphics
 file-vector-compressed.png: Compressed vector graphics
 file-video.png: Video
 file-wordperfect.png: WordPerfect document
 file-world.png: Web-centric document
 file-xhtml.png: XHTML document
 file-xml.png: XML document
 file-xml-app.png: XML application
 file-xml-support.png: XML supporting file

Folder Types

The following icons may be used to represent directory folders within directory tree listings:

 folder.png: Directory folder
 folder-home.png: Home directory folder
 folder-star.png: Directory for favourites or bookmarks
 folder-world.png: Directory for external locations
 folder-mail.png: Directory for mail messages
 folder-open.png: Open directory folder
 folder-important.png: Important directory folder
 folder-locked.png: Locked directory folder
 folder-black.png: Directory folder, coloured black
 folder-blue.png: Directory folder, coloured blue
 folder-brown.png: Directory folder, coloured brown
 folder-cyan.png: Directory folder, coloured cyan
 folder-green.png: Directory folder, coloured green
 folder-grey.png: Directory folder, coloured grey
 folder-orange.png: Directory folder, coloured orange
 folder-red.png: Directory folder, coloured red
 folder-violet.png: Directory folder, coloured violet
 folder-yellow.png: Directory folder, coloured yellow

Link and Root Directory Types

The following icons may be used to represent the root of a directory structure, or links to other locations:

 home.png: Home location
 star.png: Favourite, bookmark or top location
 help.png: Help documentation
 help-book.png: Help book documentation
 drive-internal.png: Hard drive (internal)
 drive-portable.png: Portable hard drive
 drive-usb.png: USB pen drive
 floppy.png: Floppy disk
 cdrom.png: CD-ROM or other optical media
 world.png: The World (for external locations)
 mail.png: Mail message

Directions and Miscellaneous

You never really know when you might need the following icons:

 left.png: Left arrow
 right.png: Right arrow
 up.png: Up arrow
 down.png: Down arrow
 blank.png: Blank icon

Directory Tree Elements

The following icons allow you to create the actual “directory tree listing”. Most icons are square; a few are “double-width” icons. The “short-height” icons (quarter-high) allow you to insert spaces between rows in a directory tree listing.

So that you can see the actual sizes of the directory tree elements, the following icons are displayed with a light-blue border — the border is for debugging purposes only and is not part of the icon:

  tree-H.png: Horizontal line
  tree-S.png: Spacing block
  tree-V.png: Vertical line
  tree-Tn.png: Intermediate join (T-join), no arrow
  tree-Tc.png: Intermediate join (T-join), closed arrow
  tree-To.png: Intermediate join (T-join), open arrow
  tree-Ln.png: Terminating join (L-join), no arrow
  tree-Lc.png: Terminating join (L-join), closed arrow
  tree-Lo.png: Terminating join (L-join), open arrow

  tree-SS.png: Two spacing blocks
  tree-SV.png: Spacing block + Vertical line
  tree-STn.png: Spacing block + T-intersection, no arrow
  tree-STc.png: Spacing block + T-intersection, closed arrow
  tree-STo.png: Spacing block + T-intersection, open arrow
  tree-SLn.png: Spacing block + L-join, no arrow
  tree-SLc.png: Spacing block + L-join, closed arrow
  tree-SLo.png: Spacing block + L-join, open arrow
  tree-VS.png: Vertical line + Spacing block
  tree-VV.png: Vertical line + Vertical line
  tree-VTn.png: Vertical line + T-intersection, no arrow
  tree-VTc.png: Vertical line + T-intersection, closed arrow
  tree-VTo.png: Vertical line + T-intersection, open arrow
  tree-VLn.png: Vertical line + L-join, no arrow
  tree-VLc.png: Vertical line + L-join, closed arrow
  tree-VLo.png: Vertical line + L-join, open arrow

  tree-S-s.png: Short-height spacing block
  tree-V-s.png: Short-height vertical line

  tree-SS-s.png: Short-height spacing block + Spacing block
  tree-SV-s.png: Short-height spacing block + Vertical line
  tree-VS-s.png: Short-height vertical line + Spacing block
  tree-VV-s.png: Short-height vertical line + Vertical line

Larger Icons

Each icon is available in five sizes: 20×20, 26×26, 36×36, 52×52 and 68×68 pixels, although only the smaller sizes are recommended for directory listings:

20×20 pixels (40×40 double-width, 20×5 or 40×5 short-height):

26×26 pixels (52×52 double-width, 26×5 or 52×5 short-height):

36×36 pixels (72×72 double-width, 36×9 or 72×9 short-height):

52×52 pixels (104×104 double-width, 52×13 or 104×13 short-height):

68×68 pixels (136×136 double-width, 68×17 or 136×17 short-height):

Examples

You should examine the source code for these examples to “see how it is done”. Open the file sample.html using any text editor, then search for id="examples".

A typical use of the Directory Tree Icons is to present a site-map for a web site (in this case, part of the site-map for the ZAP Group web server). Note the use of multiple tree elements when an item is deeply nested (such as the link to “Local adduser additions”). This directory listing uses the file-url.png icon:

The ZAP Group home page

Software projects

Base Calculator

Star Traders

Utility programs

Local adduser additions (for Debian GNU/Linux)

AutoRun for CD-ROMs (for Microsoft Windows)

Other software

Hardware designs

Documentation and documents-based projects

Stylesheets

The Sinorcaish Web Stylesheet

Icon images

Oxygen File-type Icons in five sizes

Oxygen Directory Tree Icons in five sizes

Web-based services

Access to the Subversion repositories

Users’ home pages

Local information for members of The ZAP Group

With some clever JavaScript programming, you could make the arrows in the site-map clickable to expand and contract subdirectory trees.

You may choose to use the tree-H.png icon to provide more horizontal spacing, as shown in this next example. This version also uses additional short-height rows, removes the open and closed arrows and does not make the icons themselves into links:

The ZAP Group home page

Software projects

Base Calculator

Star Traders

Utility programs

Local adduser additions (for Debian GNU/Linux)

AutoRun for CD-ROMs (for Microsoft Windows)

Other software

Hardware designs

Documentation and documents-based projects

Stylesheets

The Sinorcaish Web Stylesheet

Icon images

Oxygen File-type Icons in five sizes

Directory Tree Icons in five sizes

Web-based services

Access to the Subversion repositories

Users’ home pages

Local information for members of The ZAP Group

The next four examples repeat the first example using larger icons and fonts:

The ZAP Group home page (Using 26×26 pixel icons)

Software projects

Base Calculator

Star Traders

Utility programs

Local adduser additions (for Debian GNU/Linux)

AutoRun for CD-ROMs (for Microsoft Windows)

Other software

Hardware designs

Documentation and documents-based projects

Stylesheets

The Sinorcaish Web Stylesheet

Icon images

Oxygen File-type Icons in five sizes

Oxygen Directory Tree Icons in five sizes

Web-based services

Access to the Subversion repositories

Users’ home pages

Local information for members of The ZAP Group

The ZAP Group home page (Using 36×36 pixel icons)

Software projects

Base Calculator

Star Traders

Utility programs

Local adduser additions (for Debian GNU/Linux)

AutoRun for CD-ROMs (for Microsoft Windows)

Other software

Hardware designs

Documentation and documents-based projects

Stylesheets

The Sinorcaish Web Stylesheet

Icon images

Oxygen File-type Icons in five sizes

Oxygen Directory Tree Icons in five sizes

Web-based services

Access to the Subversion repositories

Users’ home pages

Local information for members of The ZAP Group

The ZAP Group home page (Using 52×52 pixel icons)

Software projects

Base Calculator

Star Traders

Utility programs

Local adduser additions (for Debian GNU/Linux)

AutoRun for CD-ROMs (for Microsoft Windows)

Other software

Hardware designs

Documentation and documents-based projects

Stylesheets

The Sinorcaish Web Stylesheet

Icon images

Oxygen File-type Icons in five sizes

Oxygen Directory Tree Icons in five sizes

Web-based services

Access to the Subversion repositories

Users’ home pages

Local information for members of The ZAP Group

The ZAP Group home page (Using 68×68 pixel icons)

Software projects

Base Calculator

Star Traders

Utility programs

Local adduser additions (for Debian GNU/Linux)

AutoRun for CD-ROMs (for Microsoft Windows)

Other software

Hardware designs

Documentation and documents-based projects

Stylesheets

The Sinorcaish Web Stylesheet

Icon images

Oxygen File-type Icons in five sizes

Oxygen Directory Tree Icons in five sizes

Web-based services

Access to the Subversion repositories

Users’ home pages

Local information for members of The ZAP Group

The final example is taken from a directory listing of the source code for Star Traders, a simple game of interstellar trading:

Star Traders home page

Linux and Unix

Source code

build-aux: Auxiliary build files

doc: Documentation

README: Overview of the doc directory

Makefile.am: Makefile for the documentation

trader.6: Manual page for Star Traders

lib: GNU Portability Library

m4: M4 macros for Autoconf

po: Translations

src: Main source code

README: Overview of the src directory

Makefile.am: Makefile for the main source code

trader.c: Main program, command-line interface

trader.h: Main program header

globals.c: Global game constants and variables

globals.h: Header for global.c

game.c: Game start, end and (some) display functions

game.h: Header for game.c

move.c: Functions for making and processing a move

move.h: Header for move.c

exch.c: Stock Exchange and Bank functions

exch.h: Header for exch.c

fileio.c: Load and save game file functions

fileio.h: Header for fileio.c

help.c: Help text functions: how to play the game

help.h: Header for help.c

intf.c: Basic text input/output functions

intf.h: Header for intf.c

utils.c: Utility functions needed by Star Traders

utils.h: Header for utils.c

system.h: All system header files are included here

README: Overall information for Star Traders

INSTALL: Custom-written installation instructions

NEWS: Release information

COPYING: Copyright licence

Makefile.am: Global Makefile

configure.ac: Autoconf configuration information