Sample Page for the Directory Tree Icons

Welcome to the Directory Tree Icons: a distribution of 105 icons in PNG image format. Most icons are 20 × 20 pixels in size and 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 <img> element), the icons look best when used for directory tree listings in a table. You may wish to use the 16 × 16 pixel File-type Icons for icons within ordinary text.

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

You can use HTML Transitional markup such as the following (this 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="20" height="20"
      border="0" align="top"></a
      >&nbsp;<a href="root-link">Root link</a>
  </td></tr>

  <tr><td nowrap>
    <img src="tree-T.png" alt="" width="20" height="20" align="top"
      ><a href="level-1-link"><img src="http.png" alt="[URL]"
      width="20" height="20" 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 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 20 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).

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

<table class="dirtree">
  <tr><td>
    <a href="root-link"
      ><img src="world.png alt="[Root]" width="20" height="20"
      class="dirtree" /></a
      >&nbsp;<a href="root-link">Root link</a>
  </td></tr>

  <tr><td>
    <img src="tree-T.png" alt="" width="20" height="20" class="dirtree"
      /><a href="level-1-link"><img src="http.png" alt="[URL]"
      width="20" height="20" class="dirtree" /></a
      >&nbsp;<a href="level-1-link">Level 1 Link</a>
  </td></tr>

  ...
</table>

At a minimum, the CSS definition should include:

table.dirtree {
   border-collapse: collapse;
   border-spacing: 0;
   margin: 0;
   padding: 0;
   border: none;
}
table.dirtree td {
   font-size: 14px;        /* Somewhat dependant on font-family and line-height */
   vertical-align: middle;
   padding: 0;
   border: none;
   white-space: nowrap;
}
table.dirtree img.dirtree {
   float: left;            /* Prevent unwanted gaps */
}

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

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 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.

The icons in this distribution were derived from those available in KDE 2.2 and are released under the terms of the GNU General Public License. Using The GIMP, each icon has been optimised for use on web pages: backgrounds have been made correctly transparent, with white as a default background colour; individual pixels and colours have been tweaked; and the PNG files have been made as compact as possible. The directory tree elements were designed from scratch.

File Types

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

file-archive.png: Archive
> file-binary.png: Binary file
> file-broken.png: Broken file
> file-cdtrack.png: CD-ROM image
> file-compressed.png: Compressed file
> file-core.png: Core dump
> file-deb.png: Debian package
> file-document.png: Document
> file-dvi.png: DVI output or TeX source
> file-font-bitmap.png: Bitmap font
> file-font-truetype.png: TrueType font
> file-font-type1.png: Type 1 (Postscript) font
> file-generic.png: Generic file
> file-html.png: HTML file
> file-image.png: Image
> file-info.png: Info file
> file-link.png: Symbolic link
> file-log.png: Log file
> file-make.png: Makefile
> file-man.png: Manual page
> file-metafont.png: Metafont source
> file-midi.png: MIDI music
> file-miscdoc.png: Miscellaneous document
> file-multiple.png: Multiple files
> file-office.png: Microsoft Office or OpenOffice document
> file-pdf.png: Adobe PDF (Acrobat)
> file-postscript.png: Adobe Postscript
> file-rpm.png: Redhat package
> file-shellscript.png: Shell script
> file-sound.png: Sound or music
> file-source.png: Source file
> file-source-alt.png: Source file (alternative)
> file-text.png: Text file
> file-unknown.png: Unknown file
> file-vectorgfx.png: Vector graphics
> file-video.png: Video

File Types with Horizontal Line Element

The following icons may be used to represent file types in directory tree listings. Note the one-or-two-pixel horizontal line element present in many of the icons: this allows the icons to be integrated with the directory tree elements:

file-archive-H.png: Archive
file-binary-H.png: Binary file
file-broken-H.png: Broken file
file-cdtrack-H.png: CD-ROM image
file-compressed-H.png: Compressed file
file-core-H.png: Core dump
file-deb-H.png: Debian package
file-document-H.png: Document
file-dvi-H.png: DVI output or TeX source
file-font-bitmap-H.png: Bitmap font
file-font-truetype-H.png: TrueType font
file-font-type1-H.png: Type 1 (Postscript) font
file-generic-H.png: Generic file
file-html-H.png: HTML file
file-image-H.png: Image
file-info-H.png: Info file
file-link-H.png: Symbolic link
file-log-H.png: Log file
file-make-H.png: Makefile
file-man-H.png: Manual page
file-metafont-H.png: Metafont source
file-midi-H.png: MIDI music
file-miscdoc-H.png: Miscellaneous document
file-multiple-H.png: Multiple files
file-office-H.png: Microsoft Office or OpenOffice document
file-pdf-H.png: Adobe PDF (Acrobat)
file-postscript-H.png: Adobe Postscript
file-rpm-H.png: Redhat package
file-shellscript-H.png: Shell script
file-sound-H.png: Sound or music
file-source-H.png: Source file
file-source-alt-H.png: Source file (alternative)
file-text-H.png: Text file
file-unknown-H.png: Unknown file
file-vectorgfx-H.png: Vector graphics
file-video-H.png: Video

Folder Types

The following icons may be used to represent directory folders or help/manual document folders within directory tree listings:

folder.png: Directory folder
folder-open.png: Directory folder, open
folder-locked.png: Directory folder, locked
book-closed.png: Book, closed
book-open.png: Book, open

Link and Root Directory Types

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

cdrom.png: CD-ROM
ftp.png: FTP link
http.png: HTTP link
world.png: The World

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 20 × 20 pixels in size; a few are “double-width” icons that are 40 pixels wide. The “short-height” icons (4 pixels 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 (20×20)
  tree-S.png: Spacing block (20×20)
  tree-V.png: Vertical line (20×20)
  tree-T.png: Intermediate join (T-intersection) (20×20)
  tree-L.png: Terminating join (L-join) (20×20)

  tree-SS.png: Two spacing blocks (40×20)
  tree-SV.png: Spacing block + Vertical line (40×20)
  tree-ST.png: Spacing block + T-intersection (40×20)
  tree-SL.png: Spacing block + L-join (40×20)
  tree-VS.png: Vertical line + Spacing block (40×20)
  tree-VV.png: Vertical line + Vertical line (40×20)
  tree-VT.png: Vertical line + T-intersection (40×20)
  tree-VL.png: Vertical line + L-join (40×20)

tree-S-s.png: Short-height spacing block (20×4)
tree-V-s.png: Short-height vertical line (20×4)

  tree-SS-s.png: Short-height spacing block + Spacing block (40×4)
  tree-SV-s.png: Short-height spacing block + Vertical line (40×4)
  tree-VS-s.png: Short-height vertical line + Spacing block (40×4)
  tree-VV-s.png: Short-height vertical line + Vertical line (40×4)

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 http.png icon:

The ZAP Group home page.

Software projects.

Base Calculator.

Star Traders.

Utility programs.

Local adduser additions (for Debian GNU/Linux).

Show Partial Working Directory (for Unix and Unix-like machines).

AutoRun for CD-ROMs (for Microsoft Windows).

Other software.

Hardware designs.

Documentation and documents-based projects.

Stylesheets.

The Sinorcaish Web Stylesheet.

Icon images.

16 × 16-pixel File-type Icons.

20 × 20-pixel Directory Tree Icons.

Web-based services.

Access to the CVS Archives.

Users’ home pages.

Local information for members of The ZAP Group.

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 and substitutes the file-html-H.png icon for http.png used previously:

  The ZAP Group home page.

  Software projects.

  Base Calculator.

  Star Traders.

  Utility programs.

  Local adduser additions (for Debian GNU/Linux).

  Show Partial Working Directory (for Unix and Unix-like machines).

  AutoRun for CD-ROMs (for Microsoft Windows).

  Other software.

  Hardware designs.

  Documentation and documents-based projects.

  Stylesheets.

  The Sinorcaish Web Stylesheet.

  Icon images.

  16 × 16-pixel File-type Icons.

  20 × 20-pixel Directory Tree Icons.

  Web-based services.

  Access to the CVS Archives.

  Users’ home pages.

  Local information for members of The ZAP Group.

The final example is taken from a directory listing for the Digital Systems Laboratory Companion CD-ROM (although links have been changed to point back to this document). Note the use of the “-H” versions of file type icons, as well as the slightly more compact Arial or Helvetica font:

CD-ROM Root Directory

gnutools: GNU Tools for the ARM microcontroller.

linux: Precompiled binaries for Linux This is the current directory

README.html: The file you are currently reading

install.html: Installation instructions

arm-elf-gnutools-linux-i386-2003-06.tar.gz: Precompiled binaries of the GNU Tools for Linux

arm-elf-gnutools-linux-i386-2003-06.uninstall: Uninstallation script (see the uninstallation script for more details)

Please note that the left arrow used in this example should really be the equivalent 16 × 16 pixel icon in the File-type Icons project.