Documentation Graphics and Filetype icons
This is a Foswiki icon library. The graphics can be used in topics and by web applications.
Usage
Default notation:
%ICON{help}%
results in:
Note that ICON{}
assumes an image of 16 x 16 pixels.
See the tables below for copy-paste examples.
Other usage:
see below.
Graphics
- Set ICONTOPIC=System.FamFamFamGraphics
Document icons
Name |
Icon URL |
Description |
Write... |
book |
|
Book |
%ICON{book}% |
blank |
|
Blank box |
%ICON{blank}% |
blank-bg |
|
Blank box, transparent |
%ICON{blank-bg}% |
bubble |
|
Speech bubble |
%ICON{bubble}% |
days |
|
Days, Calendar |
%ICON{days}% |
download |
|
Download |
%ICON{download}% |
fax |
|
Fax |
%ICON{fax}% |
filter |
|
Filter |
%ICON{filter}% |
gear |
|
Gear |
%ICON{gear}% |
globe |
|
Globe |
%ICON{globe}% |
map |
|
Map |
%ICON{map}% |
hand |
|
Pointing hand |
%ICON{hand}% |
help |
|
Help |
%H% , %ICON{help}% |
info |
|
Info |
%ICON{info}% |
hourglass |
|
Hour glass (clock) |
%ICON{hourglass}% |
megaphone |
|
Megaphone |
%ICON{megaphone}% |
mobile |
|
Mobile |
%ICON{mobile}% |
more |
|
Read more |
%ICON{more}% |
more-small |
|
Read more, 13x13 |
<img src="%ICONURL{more-small}%" width="13" height="13" alt="Read more" border="0" /> |
move |
|
Move |
%ICON{move}% |
note |
|
Note |
%ICON{note}% |
parked |
|
Parked |
%ICON{parked}% |
parts |
|
Parts |
%ICON{parts}% |
pencil |
|
Pencil / Refactor / Edit |
%P% , %ICON{pencil}% |
phone |
|
Phone |
%ICON{phone}% |
photo |
|
Photo, 13x10 |
<img src="%ICONURL{photo}%" width="13" height="10" alt="Photo" border="0" /> |
presentation |
|
Presentation |
%ICON{presentation}% |
puzzle |
|
Puzzle |
%ICON{puzzle}% |
question |
|
Question |
%ICON{question}% |
quiet |
|
Quiet |
%ICON{quiet}% |
rfc |
|
Request for comments |
%ICON{rfc}% |
sitemap |
|
Site map |
%ICON{sitemap}% |
sitetree |
|
Site tree |
%ICON{sitetree}% |
skype |
|
Skype |
%ICON{skype}% |
sort |
|
Sort |
%ICON{sort}% |
stargold |
|
Gold star, favorites |
%ICON{stargold}% |
starred |
|
Red star, highlight |
%S% , %ICON{starred}% |
stop |
|
Stop |
%ICON{stop}% |
target |
|
Target |
%ICON{target}% |
target-blue |
|
Target - blue |
%ICON{target-blue}% |
target-gray |
|
Target - gray |
%ICON{target-gray}% |
target-green |
|
Target - green |
%ICON{target-green}% |
target-orange |
|
Target - orange |
%ICON{target-orange}% |
target-red |
|
Target - red |
%ICON{target-red}% |
tip |
|
Tip, idea |
%T% , %ICON{tip}% |
video |
|
Video, 13x10 |
<img src="%ICONURL{video}%" width="13" height="10" alt="Video" border="0" /> |
warning |
|
Warning, important |
%X% , %ICON{warning}% |
watch |
|
Watch |
%ICON{watch}% |
wip |
|
Work in progress, under construction |
%ICON{wip}% |
wrench |
|
Wrench, tools |
%ICON{wrench}% |
Topic,
file,
folder icons
Name |
Icon URL |
Description |
Write... |
viewtopic |
|
View topic |
%ICON{viewtopic}% |
printtopic |
|
Print topic |
%ICON{printtopic}% |
refreshtopic |
|
Refresh topic |
%ICON{refreshtopic}% |
newtopic |
|
New topic |
%ICON{newtopic}% |
edittopic |
|
Edit topic |
%ICON{edittopic}% |
save |
|
Save |
%ICON{save}% |
attachfile |
|
Attach file |
%ICON{attachfile}% |
download |
|
Download |
%ICON{download}% |
trash |
|
Trash |
%ICON{trash}% |
searchtopic |
|
Search topic |
%ICON{searchtopic}% |
search-small |
|
Small search button, 13x13 |
<img src="%ICONURL{search-small}%" width="13" height="13" alt="Search" border="0" /> |
topicbacklinks |
|
Topic back-links |
%ICON{topicbacklinks}% |
topicdiffs |
|
Topic difference |
%ICON{topicdiffs}% |
statistics |
|
Statistics |
%ICON{statistics}% |
index |
|
Index |
%ICON{index}% |
indexlist |
|
Index list |
%ICON{indexlist}% |
cachetopic |
|
Cache topic |
%ICON{cachetopic}% |
folder |
|
Folder |
%ICON{folder}% |
table |
|
Table |
%ICON{table}% |
edittable |
|
Edit table |
%ICON{edittable}% |
uweb-bo |
|
UWEB (Universal Wiki Edit Button), blue, outline |
%ICON{uweb-bo}% |
uweb-bo12 |
|
UWEB, blue, outline, small 12x12 |
<img src="%ICONURL{uweb-bo12}%" width="12" height="12" alt="Edit" border="0" /> |
uweb-g |
|
UWEB, green (default) |
%ICON{uweb-g}% |
uweb-gs |
|
UWEB, green, square |
%ICON{uweb-gs}% |
uweb-m12 |
|
UWEB, black, small 12x12 |
<img src="%ICONURL{uweb-m12}%" width="12" height="12" alt="Edit" border="0" /> |
uweb-o |
|
UWEB, orange |
%ICON{uweb-o}% |
uweb-o12 |
|
UWEB, orange, small 12x12 |
<img src="%ICONURL{uweb-o12}%" width="12" height="12" alt="Edit" border="0" /> |
uweb-oo |
|
UWEB, orange, outline |
%ICON{uweb-oo}% |
uweb-os |
|
UWEB, orange, square |
%ICON{uweb-os}% |
Person,
group,
access icons
Icon URL |
Description |
Write... |
person |
|
Person |
%ICON{person}% |
persons |
|
Persons |
%ICON{persons}% |
group |
|
Group |
%ICON{group}% |
useractive |
|
Active user |
%ICON{useractive}% |
userinactive |
|
Inactive user |
%ICON{userinactive}% |
building |
|
Building |
%ICON{building}% |
buildings |
|
Buildings |
%ICON{buildings}% |
logout |
|
Log out |
%ICON{logout}% |
key |
|
Key |
%ICON{key}% |
lock |
|
Lock |
%ICON{lock}% |
locktopic |
|
Locked topic |
%ICON{locktopic}% |
locktopicgray |
|
Locked topic, gray |
%ICON{locktopicgray}% |
lockfolder |
|
Locked folder |
%ICON{lockfolder}% |
lockfoldergray |
|
Locked folder, gray |
%ICON{lockfoldergray}% |
Changes,
notification icons
Name |
Icon URL |
Description |
Write... |
changes |
|
Changes |
%ICON{changes}% |
changes-small |
|
Changes (small), 13x13 |
<img src="%ICONURL{changes-small}%" width="13" height="13" alt="Changes" border="0" /> |
recentchanges |
|
Recent changes |
%ICON{recentchanges}% |
mail |
|
Mail |
%ICON{mail}% |
notify |
|
Notify |
%ICON{notify}% |
feed |
|
Feed |
%ICON{feed}% |
rss-feed |
|
RSS feed, 36x14 |
<img src="%ICONURL{rss-feed}%" width="36" height="14" alt="RSS feed" border="0" /> |
rss-small |
|
RSS feed |
%ICON{rss-small}% |
xml-feed |
|
XML feed, 36x14 |
<img src="%ICONURL{xml-feed}%" width="36" height="13" alt="XML feed" border="0" /> |
xml-small |
|
XML feed |
%ICON{xml-small}% |
Status,
flag,
LED,
tag icons
Name |
Icon URL |
Description |
Write... |
new |
|
NEW, 30x16 |
%N% , <img src="%ICONURL{new}%" width="30" height="16" alt="New" border="0" /> |
todo |
|
TODO, 37x16 |
<img src="%ICONURL{todo}%" width="37" height="16" alt="TODO" border="0" /> |
updated |
|
UPDATED, 55x16 |
%U% , <img src="%ICONURL{updated}%" width="55" height="16" alt="UPDATED" border="0" /> |
done |
|
DONE, 37x16 |
<img src="%ICONURL{done}%" width="37" height="16" alt="Done" border="0" /> |
closed |
|
CLOSED, 48x16 |
<img src="%ICONURL{closed}%" width="48" height="16" alt="Closed" border="0" /> |
minus |
|
Minus |
%ICON{minus}% |
plus |
|
Plus |
%ICON{plus}% |
choice-cancel |
|
Cancel |
%ICON{choice-cancel}% |
choice-no |
|
No |
%ICON{choice-no}% |
choice-yes |
|
Yes / Done |
%Y% , %ICON{choice-yes}% |
unchecked |
|
Unchecked checkbox |
%ICON{unchecked}% |
checked |
|
Checked checkbox |
%ICON{checked}% |
flag |
|
Flag |
%ICON{flag}% |
flag-gray |
|
Gray flag |
%ICON{flag-gray}% |
lag-gray-smallhttps://wiki.iac.ethz.ch/pub/System/FamFamFamSilkIcons/flag_blue.png |
Small gray flag, 13x13 |
<img src="%ICONURL{flag-gray-small}%" width="13" height="13" alt="Flag" border="0" /> |
bullet_aqua |
|
Aqua led |
%ICON{bullet_aqua}% |
bullet_blue |
|
Blue led |
%ICON{bullet_blue}% |
bullet_gray |
|
Gray led |
%ICON{bullet_gray}% |
bullet_green |
|
Green led |
%ICON{bullet_green}% |
bullet_orange |
|
Orange led |
%ICON{bullet_orange}% |
bullet_purple |
|
Purple led |
%ICON{bullet_purple}% |
bullet_red |
|
Red led |
%ICON{bullet_red}% |
bullet_yellow |
|
Yellow led |
%ICON{bullet_yellow}% |
bullet_box-aqua |
|
Aqua led |
%ICON{bullet_box-aqua}% |
bullet_box-blue |
|
Blue led |
%ICON{bullet_box-blue}% |
bullet_box-gray |
|
Gray led |
%ICON{bullet_box-gray}% |
bullet_box-green |
|
Green led |
%ICON{bullet_box-green}% |
bullet_box-orange |
|
Orange led |
%ICON{bullet_box-orange}% |
bullet_box-purple |
|
Purple led |
%ICON{bullet_box-purple}% |
bullet_box-red |
|
Red led |
%ICON{bullet_box-red}% |
bullet_box-yellow |
|
Yellow led |
%ICON{bullet_box-yellow}% |
tag |
|
Tag |
%ICON{tag}% |
tag-blue |
|
Blue tag |
%ICON{tag-blue}% |
tag-brown |
|
Brown tag |
%ICON{tag-brown}% |
tag-green |
|
Green tag |
%ICON{tag-green}% |
tag-magenta |
|
Magenta tag |
%ICON{tag-magenta}% |
tag-orange |
|
Orange tag |
%ICON{tag-orange}% |
tag-purple |
|
Purple tag |
%ICON{tag-purple}% |
tag-red |
|
Red tag |
%ICON{tag-red}% |
tag-yellow |
|
Yellow tag |
%ICON{tag-yellow}% |
Navigation icons
Name |
Icon URL |
Description |
Write... |
home |
|
Home |
%ICON{home}% |
sitemap |
|
Site map |
%ICON{sitemap}% |
sitetree |
|
Site tree |
%ICON{sitetree}% |
topicbacklinks |
|
Topic back-links |
%ICON{topicbacklinks}% |
arrowdot |
|
Meet here (arrows to red dot) |
%ICON{arrowdot}% |
external |
|
External site |
%ICON{external}% |
left |
|
Left |
%ICON{left}% |
right |
|
Right |
%ICON{right}% |
up |
|
Up |
%ICON{up}% |
down |
|
Down |
%ICON{down}% |
arrowbleft |
|
Arrow blue left |
%ICON{arrowbleft}% |
arrowbright |
|
Arrow blue right |
%ICON{arrowbright}% |
arrowbup |
|
Arrow blue up |
%ICON{arrowbup}% |
arrowbdown |
|
Arrow blue down |
%ICON{arrowbdown}% |
arrowleft |
|
Arrow left |
%ICON{arrowleft}% |
arrowright |
|
Arrow right |
%M% , %ICON{arrowright}% |
arrowup |
|
Arrow up |
%ICON{arrowup}% |
arrowdown |
|
Arrow down |
%ICON{arrowdown}% |
go_start |
|
Go to start |
%ICON{go_start}% |
go_fb |
|
Go fast back |
%ICON{go_fb}% |
go_back |
|
Go back |
%ICON{go_back}% |
go_forward |
|
Go forward |
%ICON{go_forward}% |
go_ff |
|
Go fast forward |
%ICON{go_ff}% |
go_end |
|
Go to end |
%ICON{go_end}% |
Interface icons
Name |
Icon URL |
Description |
Write... |
monospace |
|
Monospace |
%ICON{monospace}% |
proportional |
|
Proportional |
%ICON{proportional}% |
tablesortdiamond |
|
Sort table |
<img src="%ICONURL{tablesortdiamond}%" width="11" height="13" alt="Sort table" border="0" /> |
tablesortdown |
|
Sort table descending |
<img src="%ICONURL{tablesortdown}%" width="11" height="13" alt="Sort table descending" border="0" /> |
tablesortup |
|
Sort table ascending |
<img src="%ICONURL{tablesortup}%" width="11" height="13" alt="Sort table ascending" border="0" /> |
toggleopen |
|
Open toggle, Twisty open toggle |
%ICON{toggleopen}% |
toggleclose |
|
Close toggle, Twisty close toggle |
%ICON{toggleclose}% |
toggleopen-small |
|
Open toggle, Twisty open toggle |
%ICON{toggleopen-small}% |
toggleclose-small |
|
Close toggle, Twisty close toggle |
%ICON{toggleclose-small}% |
toggleopen-mini |
|
Open toggle, Twisty open toggle |
<img src="%ICONURL{toggleopen-mini}%" width="7" height="9" alt="Open" border="0" /> |
toggleclose-mini |
|
Close toggle, Twisty close toggle |
<img src="%ICONURL{toggleclose-mini}%" width="7" height="9" alt="Close" border="0" /> |
toggleopenleft |
|
Open toggle, Twisty open toggle |
%ICON{toggleopenleft}% |
toggleopenleft-small |
|
Open toggle, Twisty open toggle |
%ICON{toggleopenleft-small}% |
web-bg |
|
Web background, used in WebLeftBarWebsList |
%ICON{web-bg}% |
web-bg-small |
|
Web background, 13x13 |
<img src="%ICONURL{web-bg-small}%" width="13" height="13" alt="Web" border="0" /> |
Foswiki icons
Name |
Icon URL |
Description |
Write... |
addon |
|
Add-on |
%ICON{addon}% |
application |
|
Application |
%ICON{application}% |
code |
|
Code |
%ICON{code}% |
package |
|
Package |
%ICON{package}% |
plugin |
|
Plugin |
%ICON{plugin}% |
tag |
|
Tag |
%ICON{tag}% |
searchpackage |
|
Search package |
%ICON{searchpackage}% |
searchtag |
|
Search tag |
%ICON{searchtag}% |
skin |
|
Skin |
%ICON{skin}% |
Block graphics
Name |
Icon URL |
Description |
Write... |
line_ld |
|
Line graph left-down |
%ICON{line_ld}% |
line_lr |
|
Line graph left-right |
%ICON{line_lr}% |
line_lrd |
|
Line graph left-right-down |
%ICON{line_lrd}% |
line_rd |
|
Line graph right-down |
%ICON{line_rd}% |
line_ud |
|
Line graph up-down |
%ICON{line_ud}% |
line_udl |
|
Line graph up-down-left |
%ICON{line_udl}% |
line_udlr |
|
Line graph up-down-left-right |
%ICON{line_udlr}% |
line_udr |
|
Line graph up-down-right |
%ICON{line_udr}% |
line_ul |
|
Line graph up-left |
%ICON{line_ul}% |
line_ulr |
|
Line graph up-left-right |
%ICON{line_ulr}% |
line_ur |
|
Line graph up-right |
%ICON{line_ur}% |
line_ur_gray |
|
Line graph up-right, gray |
%ICON{line_ur_gray}% |
dot_ld |
|
Dot graph left-down |
%ICON{dot_ld}% |
dot_lr |
|
Dot graph left-right |
%ICON{dot_lr}% |
dot_lrd |
|
Dot graph left-right-down |
%ICON{dot_lrd}% |
dot_rd |
|
Dot graph right-down |
%ICON{dot_rd}% |
dot_ud |
|
Dot graph up-down |
%ICON{dot_ud}% |
dot_udl |
|
Dot graph up-down-left |
%ICON{dot_udl}% |
dot_udlr |
|
Dot graph up-down-left-right |
%ICON{dot_udlr}% |
dot_udr |
|
Dot graph up-down-right |
%ICON{dot_udr}% |
dot_ul |
|
Dot graph up-left |
%ICON{dot_ul}% |
dot_ulr |
|
Dot graph up-left-right |
%ICON{dot_ulr}% |
dot_ur |
|
Dot graph up-right |
%ICON{dot_ur}% |
empty |
|
Empty transparent 16x16 spacer |
%ICON{empty}% |
parent_gray |
|
Parent arrow |
%ICON{parent_gray}% |
Filetype icons
| pdf Filetype icons are used by the attachment table and are seldom used in topics. Write
%ICON{pdf}%
to show the
![pdf](/pub/System/FamFamFamGraphics/pdf.gif)
icon.
Name |
Icon URL |
Description |
Write... |
as |
|
ActionScript |
%ICON{as}% |
air |
|
Adobe Air |
%ICON{air}% |
bat |
|
MS-DOS batch file |
%ICON{bat}% |
bmp |
|
Bitmap |
%ICON{bmp}% |
c |
|
C source code file |
%ICON{c}% |
css |
|
Cascading Style Sheet file |
%ICON{css}% |
dll |
|
Dynamic Linked Library; Microsoft application file |
%ICON{dll}% |
doc |
|
Microsoft Word file |
%ICON{doc}% |
else |
|
Unknown file format |
%ICON{else}% |
eml |
|
Microsoft Outlook e-mail file |
%ICON{eml}% |
exe |
|
Microsoft Executable file |
%ICON{exe}% |
fla |
|
Macromedia Flash Movie |
%ICON{fla}% |
fon |
|
Windows bitmapped font file |
%ICON{fon}% |
gif |
|
GIF |
%ICON{gif}% |
h |
|
Header file |
%ICON{h}% |
hlp |
|
Standard help file |
%ICON{hlp}% |
html |
|
HTML |
%ICON{html}% |
java |
|
Java source code file |
%ICON{java}% |
jpg |
|
JPEG |
%ICON{jpg}% |
js |
|
JavaScript |
%ICON{js}% |
mdb |
|
Microsoft Access database File |
%ICON{mdb}% |
mov |
|
Quicktime movie |
%ICON{mov}% |
mp3 |
|
MP3 |
%ICON{mp3}% |
pdf |
|
PDF |
%ICON{pdf}% |
pl |
|
Perl source code file |
%ICON{pl}% |
png |
|
PNG |
%ICON{png}% |
ppt |
|
PowerPoint |
%ICON{ppt}% |
ps |
|
Postscript |
%ICON{ps}% |
psd |
|
Photoshop document |
%ICON{psd}% |
py |
|
Python source code file |
%ICON{py}% |
ram |
|
RealAudio |
%ICON{ram}% |
reg |
|
Registry file |
%ICON{reg}% |
sh |
|
Unix shell script |
%ICON{sh}% |
sniff |
|
sniff |
%ICON{sniff}% |
swf |
|
SWF (Shockwave Flash) |
%ICON{swf}% |
ttf |
|
True Type font |
%ICON{ttf}% |
txt |
|
Text |
%ICON{txt}% |
vsd |
|
Visio document |
%ICON{vsd}% |
wav |
|
Waveform sound file |
%ICON{wav}% |
wri |
|
Windows Write |
%ICON{wri}% |
xls |
|
Microsoft Excel Spreadsheet |
%ICON{xls}% |
xml |
|
XML |
%ICON{xml}% |
xsl |
|
XSL (XML style sheet) |
%ICON{xsl}% |
zip |
|
Compressed Zip archive |
%ICON{zip}% |
Usage (extended)
There are several other ways to put an image in a topic.
Shorthand notation:
In Main.SitePreferences!? set a macro for an ICON, for example:
* Set H = %ICON{help}%
Now you can use the icon by writing %H%
For extended use, check out Foswiki:Extensions.SmiliesPlugin that uses a different short hand than %MACROS%
.
Full path:
In any topic, write %PUBURL%/%SYSTEMWEB%/DocumentGraphics/help.png
to show
You are not restricted to use the DocumentGraphics topic -
in a similar way you can show attached images by replacing DocumentGraphics
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://wiki.iac.ethz.ch/pub/System/FamFamFamGraphics/toggleopen.gif
and that will get rendered as:
Related Topics: Skins,
DeveloperDocumentationCategory,
AdminDocumentationCategory
![spacer](/pub/System/NatSkin/blank.gif)