TWiki Documentation Graphics and Filetype icons

This is the TWiki icon library. The graphics can be used in topics and by web applications.


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:
      * Set H = %ICON{help}%
    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 icon.
    • 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: home
  • To get the full URL of the icon, use ICONURL: %ICONURL{"toggleopen"}% gets you: (if you paste that in a topic you will get: 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.


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 Nameup Description Write...
UPDATED updated.gif UPDATED, 55x16 %U%, <img src="%ICONURL{updated}%" width="55" height="16" alt="UPDATED" border="0" />
Unchecked checkbox unchecked.gif Unchecked checkbox %ICON{unchecked}%
TODO todo.gif TODO, 37x16 <img src="%ICONURL{todo}%" width="37" height="16" alt="TODO" border="0" />
Plus plus.gif Plus %ICON{plus}%
NEW new.gif NEW, 30x16 %N%, <img src="%ICONURL{new}%" width="30" height="16" alt="New" border="0" />
Minus minus.gif Minus %ICON{minus}%
Yellow led led-yellow.gif Yellow led %ICON{led-yellow}%
Red led led-red.gif Red led %ICON{led-red}%
Purple led led-purple.gif Purple led %ICON{led-purple}%
Orange led led-orange.gif Orange led %ICON{led-orange}%
Green led led-green.gif Green led %ICON{led-green}%
Gray led led-gray.gif Gray led %ICON{led-gray}%
Yellow led led-box-yellow.gif Yellow led %ICON{led-box-yellow}%
Red led led-box-red.gif Red led %ICON{led-box-red}%
Purple led led-box-purple.gif Purple led %ICON{led-box-purple}%
Orange led led-box-orange.gif Orange led %ICON{led-box-orange}%
Green led led-box-green.gif Green led %ICON{led-box-green}%
Gray led led-box-gray.gif Gray led %ICON{led-box-gray}%
Blue led led-box-blue.gif Blue led %ICON{led-box-blue}%
Aqua led led-box-aqua.gif Aqua led %ICON{led-box-aqua}%
Blue led led-blue.gif Blue led %ICON{led-blue}%
Aqua led led-aqua.gif Aqua led %ICON{led-aqua}%
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" />
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" />
Yes / Done choice-yes.gif Yes / Done %Y%, %ICON{choice-yes}%
No choice-no.gif No %ICON{choice-no}%
Cancel choice-cancel.gif Cancel %ICON{choice-cancel}%
Checked checkbox checked.gif Checked checkbox %ICON{checked}%

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 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}%

Los de Mikel

  File Name Description Write...
bug bug.gif Bug logo %ICON{bug}%
bbug bbug.gif Bug logo %ICON{bbug}%
toggleopenShow attachmentstogglecloseHide attachments
Topic attachments
I Attachment Action Size Date Who Comment
gifgif choice-cancel.gif manage 0.3 K 25 Oct 2006 - 00:16 UnknownUser  
gifgif flag.gif manage 0.1 K 25 Oct 2006 - 00:16 UnknownUser  
gifgif cachetopic.gif manage 0.2 K 25 Oct 2006 - 00:16 UnknownUser  
gifgif dot_udl.gif manage 0.1 K 25 Oct 2006 - 00:16 UnknownUser  
gifgif arrowright.gif manage 0.1 K 25 Oct 2006 - 00:16 UnknownUser  
gifgif download.gif manage 0.1 K 25 Oct 2006 - 00:16 UnknownUser  
gifgif detail.gif manage 0.1 K 25 Oct 2006 - 00:16 UnknownUser  
gifgif go_start.gif manage 0.2 K 25 Oct 2006 - 00:16 UnknownUser  
gifgif hlp.gif manage 0.4 K 25 Oct 2006 - 00:16 UnknownUser  
gifgif as.gif manage