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