NOTE: This is a
DistributionDocument. Please help maintain high quality documentation: This is a wiki, please
fix the documentation if you find errors or incomplete content. Put questions and suggestions concerning the
documentation of this topic in the
comments section below. Use the
Support web for problems you are having
using TWiki.
TWiki Documentation Graphics and Filetype icons
This is the TWiki icon library. The graphics can be used in topics and by web applications.
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.
Document icons
|
|
| |
File Name |
Description |
Write... |
 |
airplane.gif |
Airplane |
%ICON{airplane}% |
 |
award.gif |
Award |
%ICON{award}% |
 |
barcode.gif |
Barcode |
%ICON{barcode}% |
 |
bed.gif |
Bed |
%ICON{bed}% |
 |
blank.gif |
Blank box |
%ICON{blank}% |
 |
blank-bg.gif |
Blank box, transparent |
%ICON{blank-bg}% |
 |
bomb.gif |
Bomb |
%ICON{bomb}% |
 |
book.gif |
Book |
%ICON{book}% |
 |
bubble.gif |
Speech bubble |
%ICON{bubble}% |
 |
bug.gif |
Bug |
%ICON{bug}% |
 |
chart-bar.gif |
Bar chart |
%ICON{chart-bar}% |
 |
chart-pie.gif |
Pie chart |
%ICON{chart-pie}% |
 |
comments.gif |
Comments |
%ICON{comments}% |
 |
connections.gif |
Connections |
%ICON{connections}% |
 |
database.gif |
Database |
%ICON{database}% |
 |
days.gif |
Days, Calendar |
%ICON{days}% |
 |
download.gif |
Download |
%ICON{download}% |
 |
facebook.gif |
Facebook |
%ICON{facebook}% |
 |
fax.gif |
Fax |
%ICON{fax}% |
 |
filter.gif |
Filter |
%ICON{filter}% |
 |
food.gif |
Food |
%ICON{food}% |
 |
gear.gif |
Gear |
%ICON{gear}% |
 |
globe.gif |
Globe |
%ICON{globe}% |
 |
graduation.gif |
Graduation |
%ICON{graduation}% |
 |
hand.gif |
Pointing hand |
%ICON{hand}% |
 |
heart.gif |
Heart |
%ICON{heart}% |
 |
help.gif |
Help |
%H%, %ICON{help}% |
 |
hourglass.gif |
Hour glass (clock) |
%ICON{hourglass}% |
 |
info.gif |
Info |
%ICON{info}% |
 |
legal.gif |
Legal |
%ICON{legal}% |
 |
linkedin.gif |
LinkedIn |
%ICON{linkedin}% |
 |
luggage.gif |
Luggage |
%ICON{luggage}% |
 |
map.gif |
Map |
%ICON{map}% |
 |
mechanics.gif |
Mechanics |
%ICON{mechanics}% |
 |
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" /> |
 |
plug.gif |
Plug |
%ICON{plug}% |
 |
presentation.gif |
Presentation |
%ICON{presentation}% |
 |
process.gif |
Process |
%ICON{process}% |
 |
profile.gif |
Profile |
%ICON{profile}% |
 |
puzzle.gif |
Puzzle |
%ICON{puzzle}% |
 |
question.gif |
Question |
%ICON{question}% |
 |
quiet.gif |
Quiet |
%ICON{quiet}% |
 |
radioactive.gif |
Radioactive |
%ICON{radioactive}% |
 |
rfc.gif |
Request for comments |
%ICON{rfc}% |
 |
sitemap.gif |
Site map |
%ICON{sitemap}% |
 |
sitetree.gif |
Site tree |
%ICON{sitetree}% |
 |
skype.gif |
Skype |
%ICON{skype}% |
 |
socket.gif |
Socket |
%ICON{socket}% |
 |
sort.gif |
Sort |
%ICON{sort}% |
 |
stargold.gif |
Gold star, favorites |
%ICON{stargold}% |
 |
starred.gif |
Red star, highlight |
%S%, %ICON{starred}% |
 |
star-full.gif |
Star (full) |
%ICON{star-full}% |
 |
star-half.gif |
Star (half) |
%ICON{star-half}% |
 |
star-none.gif |
Star (none) |
%ICON{star-none}% |
 |
statistics.gif |
Statistics |
%ICON{statistics}% |
 |
stop.gif |
Stop |
%ICON{stop}% |
 |
support.gif |
Support |
%ICON{support}% |
 |
switch.gif |
Switch |
%ICON{switch}% |
 |
target.gif |
Target |
%ICON{target}% |
 |
target-blue.gif |
Target - blue |
%ICON{target-blue}% |
 |
target-gray.gif |
Target - gray |
%ICON{target-gray}% |
 |
target-green.gif |
Target - green |
%ICON{target-green}% |
 |
target-orange.gif |
Target - orange |
%ICON{target-orange}% |
 |
target-red.gif |
Target - red |
%ICON{target-red}% |
 |
thumbs-down.gif |
Thumbs-down |
%ICON{thumbs-down}% |
 |
thumbs-up.gif |
Thumbs-up |
%ICON{thumbs-up}% |
 |
tip.gif |
Tip, idea |
%T%, %ICON{tip}% |
 |
toolbox.gif |
Toolbox |
%ICON{toolbox}% |
 |
tooth.gif |
Tooth |
%ICON{tooth}% |
 |
traffic-light.gif |
Traffic light |
%ICON{traffic-light}% |
 |
twitter.gif |
Twitter |
%ICON{twitter}% |
 |
vcard.gif |
VCard |
%ICON{vcard}% |
 |
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}% |
 |
ying-yang.gif |
Ying Yang |
%ICON{ying-yang}% |
|
|
|
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 |
RSS feed, rounded corners |
%ICON{feed}% |
 |
rss.gif |
RSS feed, gray box |
%ICON{rss}% |
 |
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, text |
%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" /> |
 |
processing.gif |
Processing |
%ICON{processing}% |
 |
processing-bg.gif |
Processing, transparent background |
%ICON{processing-bg}% |
 |
processing-32.gif |
Processing, 32x32 |
<img src="%ICONURL{processing-32}%" width="32" height="32" alt="Processing" border="0" /> |
 |
processing-32-bg.gif |
Processing, 32x32, transparent |
<img src="%ICONURL{processing-32-bg}%" width="32" height="32" alt="Processing" 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}% |
 |
twiki-alert.gif |
TWiki Alert |
%ICON{twiki-alert}% |
 |
twiki-irc.gif |
TWiki Internet Relay Chat logo |
%ICON{twiki-irc}% |
|
|
|
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}% |
 |
svg.gif |
SVG (Scalable Vector Graphics) |
%ICON{svg}% |
 |
swf.gif |
SWF (Shockwave Flash) |
%ICON{swf}% |
 |
ttf.gif |
True Type font |
%ICON{ttf}% |
 |
txt.gif |
Text |
%ICON{txt}% |
 |
vector.gif |
Generic vector |
%ICON{vector}% |
 |
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}% |
|
|
|
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: http://www.twiki.org/p/pub/TWiki04x03/TWikiDocGraphics/toggleopen.gif
and that will get rendered as: 
Related Topics: TWikiSkins,
DeveloperDocumentationCategory,
AdminDocumentationCategory
Contributors: Most icons on this page are designed by
TWiki:Main.PeterThoeny. Many icons were recreated by
TWiki:Main.ArthurClemens.
Usage?
Hey Mike, I saw you adding these things on recently - looks nice...
We've done similar things with some of our webs, but rather than having lots of entries on the
WebPreferences page,
we tend to do this instead:
Which we can then use like this:
- %PICTURE%/some-random-picture.gif
That way you can simply add more piccies as time goes by without having to add in more and
more shortcuts...
--
TWikiGuest - 28 Sep 2001
This is a minor experiment, for a very few frequently used symbols. By defining each icon individually in
WebPreferences, they can have really short variable names:
-
%X% = - eXclamation [ALERT!]
-
%H% = - [HELP]
-
%T% = 
- [TIP]
The
% signs are a bit awkward. The
SmiliesPlugin, using colons -
: - should be easier to type. Just substitute or add icons... Dunno if performance or short-term compatibility are current considerations.
Hope the TopicVarsPlugin is friendly, works well. Being able to create libraries including variables, self-contained in topics would be great. -- MikeMannix - 16 May 2002
--
MikeMannix - 27 Dec 2001
Can we get rid of the 8831 gif? I also removed the "Set TLS" variable declaration in my
WebPreferences.
--
JonReid - 09 Feb 2002
- It's not the prettiest thing. And the top edge highlight makes it look less than straight... I respectfully requested "Powered by TWiki" logos in the hi-rez face, 88x31, 48x48, couple others. Actually, an even smaller logo than 88x31 to place in the bottom (right side?) would be a good way to brand every page in a way that people probably wouldn't DELETE. BTW, why don't you like it? -- MikeMannix - 16 May 2002
Im a little confused why we would want multiple ways to include icons. Why not reuse the
SmiliesPlugin and simply add the new icons there. Personally I think :help: is easier to remember than %H%, especially when you have multiple icons...
--
JohnCavanaugh - 01 Jul 2002
I don't think the
SmiliesPlugin is part of the standard distribution. As long as that is the case, it makes sense to provide an alternate means. But you're right, for those who have installed
SmiliesPlugin, I think it is easier.
--
JonReid - 12 Aug 2002
I've put the code necessary for including each image in a topic, including the shorthand variables where available.
This would be so much easier with
ParameterizedVariables.
Then I could do something like
%GRAPHIC{"stargold" width="16" height="16"}%
and it would be expanded to
<img src="%PUBURL%/TWiki/TWikiDocGraphics/stargold.gif" alt="stargold.gif" width="16" height="16" />. In fact since the width and height of most graphics are 16x16 they could be the default values and they would onlt need to be specified if they are different, i.e.
%GRAPHIC{"stargold"}% and
%GRAPHIC{"todo" width="40" height="8"}%.
--
SamHasler - 11 Feb 2005
Good idea to show how to use the images. I changed it a bit since the table was getting rather wide, especially with the pattern skin's sidebar. The icons are now clickable, when clicked, the example on top changes to the selected icon. The example also shows preferences shortcuts, example
.
--
PeterThoeny - 13 Feb 2005
Hey, that's great!
I wasn't happy with it myself and thought it might get changed back.
That's a neat solution.
I fixed the dot image links, their examples were showing the line images.
--
SamHasler - 13 Feb 2005
Well spotted, thanks Sam!
--
PeterThoeny - 13 Feb 2005
Added variable %C% to
TWikiPreferences for the closed icon
TravisBarker add at his request.
--
SamHasler - 26 Aug 2005
I have redone the CLOSED image as a GIF which is somewhat better readable.
--
PeterThoeny - 26 Aug 2005
And I've moved the shortcut from
TWikiPreferences to
Codev.WebPreferences.
--
SamHasler - 26 Aug 2005
I think this
powered bottons colection can be useful for some people (and it can use the Dakar
%ICON{...}% variable):
--
AurelioAHeckert - 08 Nov 2005
The official logo for 80x15 size is T-logo-80x15.gif,
--
PeterThoeny - 08 Nov 2005
The official released version of this page (
TWikiDocGraphics) pointed me to this page for updating the docs ... but this seems to be very outdated. I wanted to contribute a Visio icon (vsd.gif) that is missing, but I don't know where to post it.
--
PankajPant - 25 May 2007
create a new bug report and attach the icon there, please. we'll need the bug report in order to check the icon into svn should it be accepted. thanks!
--
WillNorris - 25 May 2007
Pankaj, post it here and I can twikinize it and take it into the icon collection.
--
ArthurClemens - 25 May 2007
Here you go:
--
PankajPant - 28 May 2007
I have added your icon to the svn repository.
--
ArthurClemens - 17 Jun 2007
TWiki Web>TWikiDocGraphics (2009-12-13, PeterThoeny)
.
-- PeterThoeny - 13 Feb 2005
Hey, that's great!
I wasn't happy with it myself and thought it might get changed back.
That's a neat solution.
I fixed the dot image links, their examples were showing the line images.
-- SamHasler - 13 Feb 2005
Well spotted, thanks Sam!
-- PeterThoeny - 13 Feb 2005
Added variable %C% to TWikiPreferences for the closed icon TravisBarker add at his request.
-- SamHasler - 26 Aug 2005
I have redone the CLOSED image as a GIF which is somewhat better readable.
-- PeterThoeny - 26 Aug 2005
And I've moved the shortcut from TWikiPreferences to Codev.WebPreferences.
-- SamHasler - 26 Aug 2005
I think this powered bottons colection can be useful for some people (and it can use the Dakar 
