Sample Page for the File-type Icons

Welcome to the File-type Icons: a distribution of 50 icons in PNG image format. Each icon is 16 × 16 pixels in size and can be used by web servers and web authors to indicate the type of a file.

You can use any of the file-type icons in your web pages by using the standard <img> element. For best effect, the image should sit either on the baseline or slightly below it. This can be done in one of two ways:

  1. You can use the standard HTML Transitional align="bottom" attribute and value, as shown:

    <img src="file-type-icon.png" alt="[TYPE]" width="16" height="16" align="bottom">
    
  2. (Preferred) You can use the XHTML Strict class="icon16" with a suitable CSS definition:

    <img src="file-type-icon.png" alt="[TYPE]" width="16" height="16" class="icon16" />
    

    At a minimum, the CSS definition should read:

    img.icon16 { vertical-align: -2px; margin: 0; padding: 0; border: none }
    

    Note that the icon image will be displayed slightly below the text baseline for best effect; the value -2px may need to be tweaked, depending on the fonts you use. You can also use baseline if you wish.

When using the file-type icons for hyperlinks, you should actually use two <a> elements: one for the image, and one for the text. For example, [HTML] sample.html (20 KB) or [HTML] Sample Page (20 KB). This prevents the space between the image and the hyperlink text from being underlined. Omitting attribute values for clarity, this means you should write HTML code similar to the following:

<a><img /></a>&nbsp;<a>text</a> (size)

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.

File Types

The following icons may be used to represent file types:

[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

Folder Types

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

[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

Copyright © 2002–06, John Zaitseff. Distributed under the terms of the GNU General Public License.
Last modified: 16th November, 2006.