Sample Page for the Oxygen File-type Icons Project

Welcome to the Oxygen File-type Icons Project: a distribution of 190 icons in PNG image format. Each icon comes in five sizes (16×16, 22×22, 32×32, 48×48 and 64×64 pixels) 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 HTML <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:

You can use the standard HTML Transitional align="bottom" attribute and value, as shown:
```
<img src="file-type-icon-NNxNN.png" alt="[TYPE]" width="NN" height="NN" align="bottom">
```
The variable NN, of course, refers to the icon size: 16, 22, 32, 48 or 64.

(Preferred) You can use the XHTML Strict class="iconNN" for NN×NN pixel icons with a suitable CSS definition:

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

At a minimum, the CSS definition should read:

img.icon16 { vertical-align: -2px; margin: 0; padding: 0; border: none }
img.icon22 { vertical-align: -4px; margin: 0; padding: 0; border: none }
img.icon32 { vertical-align: -4px; margin: 0; padding: 0; border: none }
img.icon48 { vertical-align: -4px; margin: 0; padding: 0; border: none }
img.icon64 { vertical-align: -4px; margin: 0; padding: 0; border: none }

Note that the icon image will be displayed slightly below the text baseline for best effect; the values -2px and -4px 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, sample.html (20 KB) or 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 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:

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
> $[MML]$ 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
n-template.png" > file-od-presentation-template.png: OpenDocument presentation template
> file-od-spreadsheet.png: OpenDocument spreadsheet document
-template.png" > 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:

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