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:

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

    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="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):

[ZIP] file-archive.png: Archive
[BIN] file-binary.png: Binary file
[?] file-broken.png: Broken file
[ISO] file-cdtrack.png: CD-ROM image
[ZIP] file-compressed.png: Compressed file
[CORE] file-core.png: Core dump
[DEB] file-deb.png: Debian package
[DOC] file-document.png: Document
[DVI] file-dvi.png: DVI output or TeX source
[FON] file-font-bitmap.png: Bitmap font
[TTF] file-font-truetype.png: TrueType font
[PFB] file-font-type1.png: Type 1 (Postscript) font
[ANY] file-generic.png: Generic file
[HTML] file-html.png: HTML file
[IMG] file-image.png: Image
[INFO] file-info.png: Info file
[LINK] file-link.png: Symbolic link
[LOG] file-log.png: Log file
[MAKE] file-make.png: Makefile
[MAN] file-man.png: Manual page
[MF] file-metafont.png: Metafont source
[MIDI] file-midi.png: MIDI music
[MDOC] file-miscdoc.png: Miscellaneous document
[MULT] file-multiple.png: Multiple files
[MS] file-office.png: Microsoft Office or OpenOffice document
[PDF] file-pdf.png: Adobe PDF (Acrobat)
[PS] file-postscript.png: Adobe Postscript
[RPM] file-rpm.png: Redhat package
[SH] file-shellscript.png: Shell script
[SND] file-sound.png: Sound or music
[SRC] file-source.png: Source file
[SRC] file-source-alt.png: Source file (alternative)
[TEXT] file-text.png: Text file
[?] file-unknown.png: Unknown file
[SVG] file-vectorgfx.png: Vector graphics
[VID] 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:

[ZIP] file-archive-H.png: Archive
[BIN] file-binary-H.png: Binary file
[?] file-broken-H.png: Broken file
[ISO] file-cdtrack-H.png: CD-ROM image
[ZIP] file-compressed-H.png: Compressed file
[CORE] file-core-H.png: Core dump
[DEB] file-deb-H.png: Debian package
[DOC] file-document-H.png: Document
[DVI] file-dvi-H.png: DVI output or TeX source
[FON] file-font-bitmap-H.png: Bitmap font
[TTF] file-font-truetype-H.png: TrueType font
[PFB] file-font-type1-H.png: Type 1 (Postscript) font
[ANY] file-generic-H.png: Generic file
[HTML] file-html-H.png: HTML file
[IMG] file-image-H.png: Image
[INFO] file-info-H.png: Info file
[LINK] file-link-H.png: Symbolic link
[LOG] file-log-H.png: Log file
[MAKE] file-make-H.png: Makefile
[MAN] file-man-H.png: Manual page
[MF] file-metafont-H.png: Metafont source
[MIDI] file-midi-H.png: MIDI music
[MDOC] file-miscdoc-H.png: Miscellaneous document
[MULT] file-multiple-H.png: Multiple files
[MS] file-office-H.png: Microsoft Office or OpenOffice document
[PDF] file-pdf-H.png: Adobe PDF (Acrobat)
[PS] file-postscript-H.png: Adobe Postscript
[RPM] file-rpm-H.png: Redhat package
[SH] file-shellscript-H.png: Shell script
[SND] file-sound-H.png: Sound or music
[SRC] file-source-H.png: Source file
[SRC] file-source-alt-H.png: Source file (alternative)
[TEXT] file-text-H.png: Text file
[?] file-unknown-H.png: Unknown file
[SVG] file-vectorgfx-H.png: Vector graphics
[VID] 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:

[DIR] folder.png: Directory folder
[DIR] folder-open.png: Directory folder, open
[DIR] folder-locked.png: Directory folder, locked
[BOOK] book-closed.png: Book, closed
[BOOK] 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] cdrom.png: CD-ROM
[FTP] ftp.png: FTP link
[HTTP] http.png: HTTP link
[WORLD] world.png: The World

Directions and Miscellaneous

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

[Left] left.png: Left arrow
[Right] right.png: Right arrow
[Up] up.png: Up arrow
[Down] down.png: Down arrow
[Blank] 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:

[Root] The ZAP Group home page.
[URL] Software projects.
[URL] Base Calculator.
[URL] Star Traders.
[URL] Utility programs.
[URL] Local adduser additions (for Debian GNU/Linux).
[URL] Show Partial Working Directory (for Unix and Unix-like machines).
[URL] AutoRun for CD-ROMs (for Microsoft Windows).
[URL] Other software.
[URL] Hardware designs.
[URL] Documentation and documents-based projects.
[URL] Stylesheets.
[URL] The Sinorcaish Web Stylesheet.
[URL] Icon images.
[URL] 16 × 16-pixel File-type Icons.
[URL] 20 × 20-pixel Directory Tree Icons.
[URL] Web-based services.
[URL] Access to the CVS Archives.
[URL] Users’ home pages.
[URL] 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:

[Root]  The ZAP Group home page.
[URL]  Software projects.
[URL]  Base Calculator.
[URL]  Star Traders.
[URL]  Utility programs.
[URL]  Local adduser additions (for Debian GNU/Linux).
[URL]  Show Partial Working Directory (for Unix and Unix-like machines).
[URL]  AutoRun for CD-ROMs (for Microsoft Windows).
[URL]  Other software.
[URL]  Hardware designs.
[URL]  Documentation and documents-based projects.
[URL]  Stylesheets.
[URL]  The Sinorcaish Web Stylesheet.
[URL]  Icon images.
[URL]  16 × 16-pixel File-type Icons.
[URL]  20 × 20-pixel Directory Tree Icons.
[URL]  Web-based services.
[URL]  Access to the CVS Archives.
[URL]  Users’ home pages.
[URL]  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:

[Root] CD-ROM Root Directory
(1st level)[DIR] gnutools: GNU Tools for the ARM microcontroller.
(2nd level)[DIR] linux: Precompiled binaries for Linux  <-- This is the current directory
(3rd level)[HTML] README.html: The file you are currently reading
(4th level)[HTML] install.html: Installation instructions
(4th level)[TGZ] arm-elf-gnutools-linux-i386-2003-06.tar.gz: Precompiled binaries of the GNU Tools for Linux
(4th level)[SH] 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.

Copyright © 2002–05, John Zaitseff. Distributed under the terms of the GNU General Public License.
Last modified: 31st October, 2005.