• This web contains the official documentation of the
TWiki Release 4.2, code named
FreetownRelease. It is a read-only web for reference.
• This is an older release, see
TWiki-6.1 for the latest release documentation.
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}% |
 |
blank.gif |
Blank box |
%ICON{blank}% |
 |
blank-bg.gif |
Blank box, transparent |
%ICON{blank-bg}% |
 |
bubble.gif |
Speech bubble |
%ICON{bubble}% |
 |
days.gif |
Days, Calendar |
%ICON{days}% |
 |
download.gif |
Download |
%ICON{download}% |
 |
fax.gif |
Fax |
%ICON{fax}% |
 |
filter.gif |
Filter |
%ICON{filter}% |
 |
gear.gif |
Gear |
%ICON{gear}% |
 |
globe.gif |
Globe |
%ICON{globe}% |
 |
map.gif |
Map |
%ICON{map}% |
 |
hand.gif |
Pointing hand |
%ICON{hand}% |
 |
help.gif |
Help |
%H%, %ICON{help}% |
 |
info.gif |
Info |
%ICON{info}% |
 |
hourglass.gif |
Hour glass (clock) |
%ICON{hourglass}% |
 |
megaphone.gif |
Megaphone |
%ICON{megaphone}% |
 |
mobile.gif |
Mobile |
%ICON{mobile}% |
 |
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}% |
 |
parts.gif |
Parts |
%ICON{parts}% |
 |
pencil.gif |
Pencil / Refactor / Edit |
%P%, %ICON{pencil}% |
 |
phone.gif |
Phone |
%ICON{phone}% |
 |
photo.gif |
Photo, 13x10 |
<img src="%ICONURL{photo}%" width="13" height="10" alt="Photo" border="0" /> |
 |
presentation.gif |
Presentation |
%ICON{presentation}% |
 |
puzzle.gif |
Puzzle |
%ICON{puzzle}% |
 |
question.gif |
Question |
%ICON{question}% |
 |
quiet.gif |
Quiet |
%ICON{quiet}% |
 |
rfc.gif |
Request for comments |
%ICON{rfc}% |
 |
sitemap.gif |
Site map |
%ICON{sitemap}% |
 |
sitetree.gif |
Site tree |
%ICON{sitetree}% |
 |
skype.gif |
Skype |
%ICON{skype}% |
 |
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}% |
 |
video.gif |
Video, 13x10 |
<img src="%ICONURL{video}%" width="13" height="10" alt="Video" border="0" /> |
 |
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}% |
 |
table.gif |
Table |
%ICON{table}% |
 |
edittable.gif |
Edit table |
%ICON{edittable}% |
 |
uweb-bo.gif |
UWEB (Universal Wiki Edit Button ), blue, outline |
%ICON{uweb-bo}% |
 |
uweb-bo12.gif |
UWEB, blue, outline, small 12x12 |
<img src="%ICONURL{uweb-bo12}%" width="12" height="12" alt="Edit" border="0" /> |
 |
uweb-g.gif |
UWEB, green (default) |
%ICON{uweb-g}% |
 |
uweb-gs.gif |
UWEB, green, square |
%ICON{uweb-gs}% |
 |
uweb-m12.gif |
UWEB, black, small 12x12 |
<img src="%ICONURL{uweb-m12}%" width="12" height="12" alt="Edit" border="0" /> |
 |
uweb-o.gif |
UWEB, orange |
%ICON{uweb-o}% |
 |
uweb-o12.gif |
UWEB, orange, small 12x12 |
<img src="%ICONURL{uweb-o12}%" width="12" height="12" alt="Edit" border="0" /> |
 |
uweb-oo.gif |
UWEB, orange, outline |
%ICON{uweb-oo}% |
 |
uweb-os.gif |
UWEB, orange, square |
%ICON{uweb-os}% |
Person, 
group, 
access icons
| |
File Name |
Description |
Write... |
 |
person.gif |
Person |
%ICON{person}% |
 |
persons.gif |
Persons |
%ICON{persons}% |
 |
group.gif |
Group |
%ICON{group}% |
 |
useractive.gif |
Active user |
%ICON{useractive}% |
 |
userinactive.gif |
Inactive user |
%ICON{userinactive}% |
 |
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}% |
 |
feed.gif |
Feed |
%ICON{feed}% |
 |
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}% |
| |
sitemap.gif |
Site map |
%ICON{sitemap}% |
| |
sitetree.gif |
Site tree |
%ICON{sitetree}% |
| |
topicbacklinks.gif |
Topic back-links |
%ICON{topicbacklinks}% |
 |
arrowdot.gif |
Meet here (arrows to red dot) |
%ICON{arrowdot}% |
 |
external.gif |
External site |
%ICON{external}% |
 |
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 |
<img src="%ICONURL{tablesortdiamond}%" width="11" height="13" alt="Sort table" border="0" /> |
 |
tablesortdown.gif |
Sort table descending |
<img src="%ICONURL{tablesortdown}%" width="11" height="13" alt="Sort table descending" border="0" /> |
 |
tablesortup.gif |
Sort table ascending |
<img src="%ICONURL{tablesortup}%" width="11" height="13" alt="Sort table ascending" border="0" /> |
 |
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}% |
 |
line_ur_gray.gif |
Line graph up-right, gray |
%ICON{line_ur_gray}% |
 |
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}% |
 |
parent_gray.gif |
Parent arrow |
%ICON{parent_gray}% |
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}% |
 |
air.gif |
Adobe Air |
%ICON{air}% |
 |
bat.gif |
MS-DOS batch file |
%ICON{bat}% |
 |
bmp.gif |
Bitmap |
%ICON{bmp}% |
 |
c.gif |
C source code file |
%ICON{c}% |
 |
css.gif |
Cascading Style Sheet file |
%ICON{css}% |
 |
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}% |
 |
psd.gif |
Photoshop document |
%ICON{psd}% |
 |
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}% |
 |
vsd.gif |
Visio document |
%ICON{vsd}% |
 |
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%/%SYSTEMWEB%/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: https://www.twiki.org/p/pub/TWiki06x01/TWikiDocGraphics/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. Many icons were recreated by
TWiki:Main.ArthurClemens.
Site map
Blog web
User registration
Index
Search
RSS Feed
Statistics
Preferences
