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
Default notation:Other usage: see below.%ICON{help}%results in:Note that
ICON{}assumes a GIF image of 16 x 16 pixels. Use a HTMLimgtag with%ICONURL{}%for image with other sizes. See the tables below for copy-paste examples.
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}% |
 |
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 |
%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}% |
 |
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 |
%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:Full path:* 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%.
In any topic, writeTo create an image with a link, write:%PUBURL%/%SYSTEMWEB%/TWikiDocGraphics/help.gifto showYou are not restricted to use the TWikiDocGraphics topic - in a similar way you can show attached images by replacing
TWikiDocGraphicswith the topic name.
To get the full URL of the icon, use ICONURL:[[WebHome][%ICON{home}% Home]]to get:
[[WebHome][%ICON{home}%]] [[WebHome][Home]]to get:
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.%ICONURL{"toggleopen"}%gets you the image path:http://twiki.keegel.id.au/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif
and that will get rendered as:
Topic revision: r38 - 04 Dec 2007 - 11:57:18 - TWikiContributor
DnD
 |
|
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors. Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TWikiDocGraphics