 |
TWiki Documentation Graphics and Filetype icons
This is the TWiki icon library. The graphics can be used in topics and by web applications.
Usage
Default notation:
%ICON{help}% results in: 
Note that ICON{} assumes a GIF image of 16 x 16 pixels. Use a HTML img tag with %ICONURL{}% for image with other sizes. See the tables below for copy-paste examples.
Other usage: see below.
Graphics
 Document icons
| | File Name | Description | Write... |
|---|
 | book.gif | Book | %ICON{book}% |
 | bubble.gif | Speech bubble | %ICON{bubble}% |
 | days.gif | Days, Calendar | %ICON{days}% |
 | download.gif | Download | %ICON{download}% |
 | filter.gif | Filter | %ICON{filter}% |
 | gear.gif | Gear | %ICON{gear}% |
 | globe.gif | Globe | %ICON{globe}% |
 | hand.gif | Pointing hand | %ICON{hand}% |
 | help.gif | Help | %H%, %ICON{help}% |
 | info.gif | Info | %ICON{info}% |
 | hourglass.gif | Hour glass (clock) | %ICON{hourglass}% |
 | more.gif | Read more | %ICON{more}% |
 | more-small.gif | Read more, 13x13 | <img src="%ICONURL{more-small}%" width="13" height="13" alt="Read more" border="0" /> |
 | move.gif | Move | %ICON{move}% |
 | note.gif | Note | %ICON{note}% |
 | parked.gif | Parked | %ICON{parked}% |
 | pencil.gif | Pencil / Refactor / Edit | %P%, %ICON{pencil}% |
 | puzzle.gif | Puzzle | %ICON{puzzle}% |
 | question.gif | Question | %ICON{question}% |
 | rfc.gif | Request for comments | %ICON{rfc}% |
 | sort.gif | Sort | %ICON{sort}% |
 | stargold.gif | Gold star, favorites | %ICON{stargold}% |
 | starred.gif | Red star, highlight | %S%, %ICON{starred}% |
 | stop.gif | Stop | %ICON{stop}% |
 | target.gif | Target | %ICON{target}% |
 | tip.gif | Tip, idea | %T%, %ICON{tip}% |
 | warning.gif | Warning, important | %X%, %ICON{warning}% |
 | watch.gif | Watch | %ICON{watch}% |
 | wip.gif | Work in progress, under construction | %ICON{wip}% |
 | wrench.gif | Wrench, tools | %ICON{wrench}% |
 Topic,  file,  folder icons
| | File Name | Description | Write... |
|---|
 | viewtopic.gif | View topic | %ICON{viewtopic}% |
 | printtopic.gif | Print topic | %ICON{printtopic}% |
 | refreshtopic.gif | Refresh topic | %ICON{refreshtopic}% |
 | newtopic.gif | New topic | %ICON{newtopic}% |
 | edittopic.gif | Edit topic | %ICON{edittopic}% |
 | save.gif | Save | %ICON{save}% |
 | attachfile.gif | Attach file | %ICON{attachfile}% |
| | download.gif | Download | %ICON{download}% |
 | trash.gif | Trash | %ICON{trash}% |
 | searchtopic.gif | Search topic | %ICON{searchtopic}% |
 | search-small.gif | Small search button, 13x13 | <img src="%ICONURL{search-small}%" width="13" height="13" alt="Search" border="0" /> |
 | topicbacklinks.gif | Topic back-links | %ICON{topicbacklinks}% |
 | topicdiffs.gif | Topic difference | %ICON{topicdiffs}% |
 | statistics.gif | Statistics | %ICON{statistics}% |
 | index.gif | Index | %ICON{index}% |
 | indexlist.gif | Index list | %ICON{indexlist}% |
 | cachetopic.gif | Cache topic | %ICON{cachetopic}% |
 | folder.gif | Folder | %ICON{folder}% |
 Person,  group,  access icons
| | File Name | Description | Write... |
|---|
 | person.gif | Person | %ICON{person}% |
 | persons.gif | Persons | %ICON{persons}% |
 | group.gif | Group | %ICON{group}% |
 | building.gif | Building | %ICON{building}% |
 | buildings.gif | Buildings | %ICON{buildings}% |
 | logout.gif | Log out | %ICON{logout}% |
 | key.gif | Key | %ICON{key}% |
 | lock.gif | Lock | %ICON{lock}% |
 | locktopic.gif | Locked topic | %ICON{locktopic}% |
 | locktopicgray.gif | Locked topic, gray | %ICON{locktopicgray}% |
 | lockfolder.gif | Locked folder | %ICON{lockfolder}% |
 | lockfoldergray.gif | Locked folder, gray | %ICON{lockfoldergray}% |
 Changes,  notification icons
| | File Name | Description | Write... |
|---|
 | changes.gif | Changes | %ICON{changes}% |
 | changes-small.gif | Changes (small), 13x13 | <img src="%ICONURL{changes-small}%" width="13" height="13" alt="Changes" border="0" /> |
 | recentchanges.gif | Recent changes | %ICON{recentchanges}% |
 | mail.gif | Mail | %ICON{mail}% |
 | notify.gif | Notify | %ICON{notify}% |
 | rss-feed.gif | RSS feed, 36x14 | <img src="%ICONURL{rss-feed}%" width="36" height="14" alt="RSS feed" border="0" /> |
 | rss-small.gif | RSS feed | %ICON{rss-small}% |
 | xml-feed.gif | XML feed, 36x14 | <img src="%ICONURL{xml-feed}%" width="36" height="13" alt="XML feed" border="0" /> |
 | xml-small.gif | XML feed | %ICON{xml-small}% |
 Status,  flag,  LED,  tag icons
| | File Name | Description | Write... |
|---|
 | new.gif | NEW, 30x16 | %N%, <img src="%ICONURL{new}%" width="30" height="16" alt="New" border="0" /> |
 | todo.gif | TODO, 37x16 | <img src="%ICONURL{todo}%" width="37" height="16" alt="TODO" border="0" /> |
 | updated.gif | UPDATED, 55x16 | %U%, <img src="%ICONURL{updated}%" width="55" height="16" alt="UPDATED" border="0" /> |
 | done.gif | DONE, 37x16 | <img src="%ICONURL{done}%" width="37" height="16" alt="Done" border="0" /> |
 | closed.gif | CLOSED, 48x16 | <img src="%ICONURL{closed}%" width="48" height="16" alt="Closed" border="0" /> |
 | minus.gif | Minus | %ICON{minus}% |
 | plus.gif | Plus | %ICON{plus}% |
 | choice-cancel.gif | Cancel | %ICON{choice-cancel}% |
 | choice-no.gif | No | %ICON{choice-no}% |
 | choice-yes.gif | Yes / Done | %Y%, %ICON{choice-yes}% |
 | unchecked.gif | Unchecked checkbox | %ICON{unchecked}% |
 | checked.gif | Checked checkbox | %ICON{checked}% |
 | flag.gif | Flag | %ICON{flag}% |
 | flag-gray.gif | Gray flag | %ICON{flag-gray}% |
 | flag-gray-small.gif | Small gray flag, 13x13 | <img src="%ICONURL{flag-gray-small}%" width="13" height="13" alt="Flag" border="0" /> |
 | led-aqua.gif | Aqua led | %ICON{led-aqua}% |
 | led-blue.gif | Blue led | %ICON{led-blue}% |
 | led-gray.gif | Gray led | %ICON{led-gray}% |
 | led-green.gif | Green led | %ICON{led-green}% |
 | led-orange.gif | Orange led | %ICON{led-orange}% |
 | led-purple.gif | Purple led | %ICON{led-purple}% |
 | led-red.gif | Red led | %ICON{led-red}% |
 | led-yellow.gif | Yellow led | %ICON{led-yellow}% |
 | led-box-aqua.gif | Aqua led | %ICON{led-box-aqua}% |
 | led-box-blue.gif | Blue led | %ICON{led-box-blue}% |
 | led-box-gray.gif | Gray led | %ICON{led-box-gray}% |
 | led-box-green.gif | Green led | %ICON{led-box-green}% |
 | led-box-orange.gif | Orange led | %ICON{led-box-orange}% |
 | led-box-purple.gif | Purple led | %ICON{led-box-purple}% |
 | led-box-red.gif | Red led | %ICON{led-box-red}% |
 | led-box-yellow.gif | Yellow led | %ICON{led-box-yellow}% |
 | tag.gif | Tag | %ICON{tag}% |
 | tag-blue.gif | Blue tag | %ICON{tag-blue}% |
 | tag-brown.gif | Brown tag | %ICON{tag-brown}% |
 | tag-green.gif | Green tag | %ICON{tag-green}% |
 | tag-magenta.gif | Magenta tag | %ICON{tag-magenta}% |
 | tag-orange.gif | Orange tag | %ICON{tag-orange}% |
 | tag-purple.gif | Purple tag | %ICON{tag-purple}% |
 | tag-red.gif | Red tag | %ICON{tag-red}% |
 | tag-yellow.gif | Yellow tag | %ICON{tag-yellow}% |
 Navigation icons
| | File Name | Description | Write... |
|---|
 | home.gif | Home | %ICON{home}% |
 | external.gif | External site | %ICON{external}% |
 | arrowdot.gif | Meet here (arrows to red dot) | %ICON{arrowdot}% |
 | left.gif | Left | %ICON{left}% |
 | right.gif | Right | %ICON{right}% |
 | up.gif | Up | %ICON{up}% |
 | down.gif | Down | %ICON{down}% |
 | arrowbleft.gif | Arrow blue left | %ICON{arrowbleft}% |
 | arrowbright.gif | Arrow blue right | %ICON{arrowbright}% |
 | arrowbup.gif | Arrow blue up | %ICON{arrowbup}% |
 | arrowbdown.gif | Arrow blue down | %ICON{arrowbdown}% |
 | arrowleft.gif | Arrow left | %ICON{arrowleft}% |
 | arrowright.gif | Arrow right | %M%, %ICON{arrowright}% |
 | arrowup.gif | Arrow up | %ICON{arrowup}% |
 | arrowdown.gif | Arrow down | %ICON{arrowdown}% |
 | go_start.gif | Go to start | %ICON{go_start}% |
 | go_fb.gif | Go fast back | %ICON{go_fb}% |
 | go_back.gif | Go back | %ICON{go_back}% |
 | go_forward.gif | Go forward | %ICON{go_forward}% |
 | go_ff.gif | Go fast forward | %ICON{go_ff}% |
 | go_end.gif | Go to end | %ICON{go_end}% |
 Interface icons
| | File Name | Description | Write... |
|---|
 | monospace.gif | Monospace | %ICON{monospace}% |
 | proportional.gif | Proportional | %ICON{proportional}% |
 | tablesortdiamond.gif | Sort table | %ICON{tablesortdiamond}% |
 | tablesortdown.gif | Sort table descending | %ICON{tablesortdown}% |
 | tablesortup.gif | Sort table ascending | %ICON{tablesortup}% |
 | toggleopen.gif | Open toggle, Twisty open toggle | %ICON{toggleopen}% |
 | toggleclose.gif | Close toggle, Twisty close toggle | %ICON{toggleclose}% |
 | toggleopen-small.gif | Open toggle, Twisty open toggle | %ICON{toggleopen-small}% |
 | toggleclose-small.gif | Close toggle, Twisty close toggle | %ICON{toggleclose-small}% |
 | toggleopen-mini.gif | Open toggle, Twisty open toggle | <img src="%ICONURL{toggleopen-mini}%" width="7" height="9" alt="Open" border="0" /> |
 | toggleclose-mini.gif | Close toggle, Twisty close toggle | <img src="%ICONURL{toggleclose-mini}%" width="7" height="9" alt="Close" border="0" /> |
 | toggleopenleft.gif | Open toggle, Twisty open toggle | %ICON{toggleopenleft}% |
 | toggleopenleft-small.gif | Open toggle, Twisty open toggle | %ICON{toggleopenleft-small}% |
 | web-bg.gif | Web background, used in WebLeftBarWebsList | %ICON{web-bg}% |
 | web-bg-small.gif | Web background, 13x13 | <img src="%ICONURL{web-bg-small}%" width="13" height="13" alt="Web" border="0" /> |
 TWiki icons
| | File Name | Description | Write... |
|---|
 | addon.gif | Add-on | %ICON{addon}% |
 | application.gif | Application | %ICON{application}% |
 | code.gif | Code | %ICON{code}% |
 | package.gif | Package | %ICON{package}% |
 | plugin.gif | Plugin | %ICON{plugin}% |
| | tag.gif | Tag | %ICON{tag}% |
 | searchpackage.gif | Search package | %ICON{searchpackage}% |
 | searchtag.gif | Search tag | %ICON{searchtag}% |
 | skin.gif | Skin | %ICON{skin}% |
 | twiki.gif | TWiki logo | %ICON{twiki}% |
 Block graphics
| | File Name | Description | Write... |
|---|
 | line_ld.gif | Line graph left-down | %ICON{line_ld}% |
 | line_lr.gif | Line graph left-right | %ICON{line_lr}% |
 | line_lrd.gif | Line graph left-right-down | %ICON{line_lrd}% |
 | line_rd.gif | Line graph right-down | %ICON{line_rd}% |
 | line_ud.gif | Line graph up-down | %ICON{line_ud}% |
 | line_udl.gif | Line graph up-down-left | %ICON{line_udl}% |
 | line_udlr.gif | Line graph up-down-left-right | %ICON{line_udlr}% |
 | line_udr.gif | Line graph up-down-right | %ICON{line_udr}% |
 | line_ul.gif | Line graph up-left | %ICON{line_ul}% |
 | line_ulr.gif | Line graph up-left-right | %ICON{line_ulr}% |
 | line_ur.gif | Line graph up-right | %ICON{line_ur}% |
 | dot_ld.gif | Dot graph left-down | %ICON{dot_ld}% |
 | dot_lr.gif | Dot graph left-right | %ICON{dot_lr}% |
 | dot_lrd.gif | Dot graph left-right-down | %ICON{dot_lrd}% |
 | dot_rd.gif | Dot graph right-down | %ICON{dot_rd}% |
 | dot_ud.gif | Dot graph up-down | %ICON{dot_ud}% |
 | dot_udl.gif | Dot graph up-down-left | %ICON{dot_udl}% |
 | dot_udlr.gif | Dot graph up-down-left-right | %ICON{dot_udlr}% |
 | dot_udr.gif | Dot graph up-down-right | %ICON{dot_udr}% |
 | dot_ul.gif | Dot graph up-left | %ICON{dot_ul}% |
 | dot_ulr.gif | Dot graph up-left-right | %ICON{dot_ulr}% |
 | dot_ur.gif | Dot graph up-right | %ICON{dot_ur}% |
 | empty.gif | Empty transparent 16x16 spacer | %ICON{empty}% |
 Filetype icons
Filetype icons are used by the attachment table and are seldom used in topics. Write %ICON{pdf}% to show the  icon.
| | File Name | Name | Write... |
|---|
 | as.gif | ActionScript | %ICON{as}% |
 | bat.gif | MS-DOS batch file | %ICON{bat}% |
 | bmp.gif | Bitmap | %ICON{bmp}% |
 | c.gif | C source code file | %ICON{c}% |
 | dll.gif | Dynamic Linked Library; Microsoft application file | %ICON{dll}% |
 | doc.gif | Microsoft Word file | %ICON{doc}% |
 | else.gif | Unknown file format | %ICON{else}% |
 | eml.gif | Microsoft Outlook e-mail file | %ICON{eml}% |
 | exe.gif | Microsoft Executable file | %ICON{exe}% |
 | fla.gif | Macromedia Flash Movie | %ICON{fla}% |
 | fon.gif | Windows bitmapped font file | %ICON{fon}% |
 | gif.gif | GIF | %ICON{gif}% |
 | h.gif | Header file | %ICON{h}% |
 | hlp.gif | Standard help file | %ICON{hlp}% |
 | html.gif | HTML | %ICON{html}% |
 | java.gif | Java source code file | %ICON{java}% |
 | jpg.gif | JPEG | %ICON{jpg}% |
 | js.gif | JavaScript | %ICON{js}% |
 | mdb.gif | Microsoft Access database File | %ICON{mdb}% |
 | mov.gif | Quicktime movie | %ICON{mov}% |
 | mp3.gif | MP3 | %ICON{mp3}% |
 | pdf.gif | PDF | %ICON{pdf}% |
 | pl.gif | Perl source code file | %ICON{pl}% |
 | png.gif | PNG | %ICON{png}% |
 | ppt.gif | PowerPoint | %ICON{ppt}% |
 | ps.gif | Postscript | %ICON{ps}% |
 | py.gif | Python source code file | %ICON{py}% |
 | ram.gif | RealAudio | %ICON{ram}% |
 | reg.gif | Registry file | %ICON{reg}% |
 | sh.gif | Unix shell script | %ICON{sh}% |
 | sniff.gif | sniff | %ICON{sniff}% |
 | swf.gif | SWF (Shockwave Flash) | %ICON{swf}% |
 | ttf.gif | True Type font | %ICON{ttf}% |
 | txt.gif | Text | %ICON{txt}% |
 | wav.gif | Waveform sound file | %ICON{wav}% |
 | wri.gif | Windows Write | %ICON{wri}% |
 | xls.gif | Microsoft Excel Spreadsheet | %ICON{xls}% |
 | xml.gif | XML | %ICON{xml}% |
 | xsl.gif | XSL (XML style sheet) | %ICON{xsl}% |
 | zip.gif | Compressed Zip archive | %ICON{zip}% |
Usage (extended)
There are several other ways to put an image in a topic.
Shorthand notation:
In Main.TWikiPreferences set a variable to an ICON, for example:
* Set H = %ICON{help}%
Now you can use the icon by writing %H%
For extended use, check out TWiki:Plugins.SmiliesPlugin that uses a different short hand than %VARIABLES%.
Full path:
In any topic, write %PUBURL%/%TWIKIWEB%/TWikiDocGraphics/help.gif to show 
You are not restricted to use the TWikiDocGraphics topic - in a similar way you can show attached images by replacing TWikiDocGraphics with the topic name.
To create an image with a link, write:
[[WebHome][%ICON{home}% Home]] to get: Home
To get rid of the underline under the space, write:
[[WebHome][%ICON{home}%]] [[WebHome][Home]] to get: Home
To get the full URL of the icon, use ICONURL:
%ICONURL{"toggleopen"}% gets you the image path: http://wiki.java.net/pub/TWiki/WebHome/toggleopen.gif
and that will get rendered as: 
Related Topics: TWikiSkins, DeveloperDocumentationCategory, AdminDocumentationCategory
Contributors: Most icons on this page were originally designed by TWiki:Main.PeterThoeny. All icons were recreated by TWiki:Main.ArthurClemens, except for led-color icons, dot graph and line graph images.
|