Documentation Graphics and Filetype icons

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

Contents:

Usage

Default notation:

%ICON{help}% results in: help

Note that ICON{} assumes an image of 16 x 16 pixels. See the tables below for copy-paste examples.

Other usage: see below.

Graphics

note Document icons

Name Icon Description Write...
airplane airplane airplane %ICON{airplane}%
alert alert alert %ICON{alert}%
award award award %ICON{award}%
barcode barcode barcode %ICON{barcode}%
bed bed bed %ICON{bed}%
bomb bomb bomb %ICON{bomb}%
book book Book %ICON{book}%
blank blank Blank box %ICON{blank}%
blank-bg blank-bg Blank box, transparent %ICON{blank-bg}%
bubble bubble Speech bubble %ICON{bubble}%
bug bug bug %ICON{bug}%
chart-bar chart-bar chart-bar %ICON{chart-bar}%
chart-pie chart-pie chart-pie %ICON{chart-pie}%
comments comments comments %ICON{comments}%
connections connections connections %ICON{connections}%
database database database %ICON{database}%
days days Days, Calendar %ICON{days}%
detail detail detail %ICON{detail}%
download download Download %ICON{download}%
fax fax Fax %ICON{fax}%
filter filter Filter %ICON{filter}%
food food food %ICON{food}%
gear gear Gear %ICON{gear}%
globe globe Globe %ICON{globe}%
graduation graduation graduation %ICON{graduation}%
hand hand Pointing hand %ICON{hand}%
heart heart heart %ICON{heart}%
help help Help %H%, %ICON{help}%
hourglass hourglass Hour glass (clock) %ICON{hourglass}%
info info Info %ICON{info}%
legal legal legal %ICON{legal}%
luggage luggage luggage %ICON{luggage}%
map map Map %ICON{map}%
mechanics mechanics mechanics %ICON{mechanics}%
megaphone megaphone Megaphone %ICON{megaphone}%
mobile mobile Mobile %ICON{mobile}%
more more Read more %ICON{more}%
more-small more-small Read more, 13x13 %ICON{more-small}%
move move Move %ICON{move}%
note note Note %ICON{note}%
parked parked Parked %ICON{parked}%
parts parts Parts %ICON{parts}%
pencil pencil Pencil / Refactor / Edit %P%, %ICON{pencil}%
phone phone Phone %ICON{phone}%
photo photo Photo, 13x10 %ICON{photo}%
presentation presentation Presentation %ICON{presentation}%
plug plug plug %ICON{plug}%
puzzle puzzle Puzzle %ICON{puzzle}%
process process process %ICON{process}%
profile profile profile %ICON{profile}%
question question Question %ICON{question}%
quiet quiet Quiet %ICON{quiet}%
radioactive radioactive radioactive %ICON{radioactive}%
rfc rfc Request for comments %ICON{rfc}%
sitemap sitemap Site map %ICON{sitemap}%
socket socket socket %ICON{socket}%
sitetree sitetree Site tree %ICON{sitetree}%
sort sort Sort %ICON{sort}%
stargold stargold Gold star, favorites %ICON{stargold}%
starred starred Red star, highlight %S%, %ICON{starred}%
star-full star-full star-full %ICON{star-full}%
star-half star-half star-half %ICON{star-half}%
star-none star-none star-none %ICON{star-none}%
stop stop Stop %ICON{stop}%
support support support %ICON{support}%
switch switch switch %ICON{switch}%
target target Target %ICON{target}%
target-blue target-blue Target - blue %ICON{target-blue}%
target-gray target-gray Target - gray %ICON{target-gray}%
target-green target-green Target - green %ICON{target-green}%
target-orange target-orange Target - orange %ICON{target-orange}%
target-red target-red Target - red %ICON{target-red}%
thumbs-down thumbs-down thumbs-down %ICON{thumbs-down}%
thumbs-up thumbs-up thumbs-up %ICON{thumbs-up}%
tip tip Tip, idea %T%, %ICON{tip}%
toolbox toolbox toolbox %ICON{toolbox}%
tooth tooth tooth %ICON{tooth}%
traffic-light traffic-light traffic-light %ICON{traffic-light}%
vcard vcard vcard %ICON{vcard}%
video video Video, 13x10 %ICON{video}%
warning warning Warning, important %X%, %ICON{warning}%
watch watch Watch %ICON{watch}%
wip wip Work in progress, under construction %ICON{wip}%
wrench wrench Wrench, tools %ICON{wrench}%
ying-yang ying-yang ying-yang %ICON{ying-yang}%

viewtopic Topic, attachfile file, folder folder icons

Name Icon Description Write...
viewtopic viewtopic View topic %ICON{viewtopic}%
printtopic printtopic Print topic %ICON{printtopic}%
refreshtopic refreshtopic Refresh topic %ICON{refreshtopic}%
newtopic newtopic New topic %ICON{newtopic}%
edittopic edittopic Edit topic %ICON{edittopic}%
save save Save %ICON{save}%
attachfile attachfile Attach file %ICON{attachfile}%
download download Download %ICON{download}%
trash trash Trash %ICON{trash}%
searchtopic searchtopic Search topic %ICON{searchtopic}%
search-small search-small Small search button, 13x13 %ICON{search-small}%
topicbacklinks topicbacklinks Topic back-links %ICON{topicbacklinks}%
topicdiffs topicdiffs Topic difference %ICON{topicdiffs}%
statistics statistics Statistics %ICON{statistics}%
index index Index %ICON{index}%
indexlist indexlist Index list %ICON{indexlist}%
cachetopic cachetopic Cache topic %ICON{cachetopic}%
folder folder Folder %ICON{folder}%
table table Table %ICON{table}%
edittable edittable Edit table %ICON{edittable}%
uweb-bo uweb-bo UWEB (Universal Wiki Edit Button), blue, outline %ICON{uweb-bo}%
uweb-bo12 uweb-bo12 UWEB, blue, outline, small 12x12 %ICON{uweb-bo12}%
uweb-g uweb-g UWEB, green (default) %ICON{uweb-g}%
uweb-gs uweb-gs UWEB, green, square %ICON{uweb-gs}%
uweb-m12 uweb-m12 UWEB, black, small 12x12 %ICON{uweb-m12}%
uweb-o uweb-o UWEB, orange %ICON{uweb-o}%
uweb-o12 uweb-o12 UWEB, orange, small 12x12 %ICON{uweb-o12}%
uweb-oo uweb-oo UWEB, orange, outline %ICON{uweb-oo}%
uweb-os uweb-os UWEB, orange, square %ICON{uweb-os}%

person Person, group group, lock access icons

Name Icon Description Write...
person person Person %ICON{person}%
persons persons Persons %ICON{persons}%
group group Group %ICON{group}%
useractive useractive Active user %ICON{useractive}%
userinactive userinactive Inactive user %ICON{userinactive}%
building building Building %ICON{building}%
buildings buildings Buildings %ICON{buildings}%
logout logout Log out %ICON{logout}%
key key Key %ICON{key}%
lock lock Lock %ICON{lock}%
locktopic locktopic Locked topic %ICON{locktopic}%
locktopicgray locktopicgray Locked topic, gray %ICON{locktopicgray}%
lockfolder lockfolder Locked folder %ICON{lockfolder}%
lockfoldergray lockfoldergray Locked folder, gray %ICON{lockfoldergray}%

changes Changes, notify notification icons

Name Icon Description Write...
changes changes Changes %ICON{changes}%
changes-small changes-small Changes (small), 13x13 %ICON{changes-small}%
recentchanges recentchanges Recent changes %ICON{recentchanges}%
mail mail Mail %ICON{mail}%
notify notify Notify %ICON{notify}%
feed feed Feed %ICON{feed}%
rss rss rss %ICON{rss}%
rss-feed rss-feed RSS feed, 36x14 %ICON{rss-feed}%
rss-small rss-small RSS feed %ICON{rss-small}%
xml-feed xml-feed XML feed, 36x14 %ICON{xml-feed}%
xml-small xml-small XML feed %ICON{xml-small}%

choice-yes Status, flag flag, led-box-red LED, tag-yellow tag icons

Name Icon Description Write...
new new NEW, 30x16 %N%, <img src="%ICONURL{new}%
todo todo TODO, 37x16 %ICON{todo}%
updated updated UPDATED, 55x16 %U%, <img src="%ICONURL{updated}%
done done DONE, 37x16 %ICON{done}%
closed closed CLOSED, 48x16 %ICON{closed}%
processing-32-bg processing-32-bg processing-32-bg %ICON{processing-32-bg}%
processing-32 processing-32 processing-32 %ICON{processing-32}%
processing-bg processing-bg processing-bg %ICON{processing-bg}%
processing processing processing %ICON{processing}%
add add add %ICON{add}%
remove remove remove %ICON{remove}%
minus minus Minus %ICON{minus}%
plus plus Plus %ICON{plus}%
choice-cancel choice-cancel Cancel %ICON{choice-cancel}%
choice-no choice-no No %ICON{choice-no}%
choice-yes choice-yes Yes / Done %Y%, %ICON{choice-yes}%
unchecked unchecked Unchecked checkbox %ICON{unchecked}%
checked checked Checked checkbox %ICON{checked}%
checked-round checked-round checked-round %ICON{checked-round}%
unchecked-round unchecked-round unchecked-round %ICON{unchecked-round}%
flag flag Flag %ICON{flag}%
flag-gray flag-gray Gray flag %ICON{flag-gray}%
flag-gray-small flag-gray-small Small gray flag, 13x13 %ICON{flag-gray-small}%
led-aqua led-aqua Aqua led %ICON{led-aqua}%
led-blue led-blue Blue led %ICON{led-blue}%
led-gray led-gray Gray led %ICON{led-gray}%
led-green led-green Green led %ICON{led-green}%
led-orange led-orange Orange led %ICON{led-orange}%
led-purple led-purple Purple led %ICON{led-purple}%
led-red led-red Red led %ICON{led-red}%
led-yellow led-yellow Yellow led %ICON{led-yellow}%
led-box-aqua led-box-aqua Aqua led %ICON{led-box-aqua}%
led-box-blue led-box-blue Blue led %ICON{led-box-blue}%
led-box-gray led-box-gray Gray led %ICON{led-box-gray}%
led-box-green led-box-green Green led %ICON{led-box-green}%
led-box-orange led-box-orange Orange led %ICON{led-box-orange}%
led-box-purple led-box-purple Purple led %ICON{led-box-purple}%
led-box-red led-box-red Red led %ICON{led-box-red}%
led-box-yellow led-box-yellow Yellow led %ICON{led-box-yellow}%
tag tag Tag %ICON{tag}%
tag-black tag-black tag-black %ICON{tag-black}%
tag-blue tag-blue Blue tag %ICON{tag-blue}%
tag-brown tag-brown Brown tag %ICON{tag-brown}%
tag-green tag-green Green tag %ICON{tag-green}%
tag-magenta tag-magenta Magenta tag %ICON{tag-magenta}%
tag-orange tag-orange Orange tag %ICON{tag-orange}%
tag-purple tag-purple Purple tag %ICON{tag-purple}%
tag-red tag-red Red tag %ICON{tag-red}%
tag-yellow tag-yellow Yellow tag %ICON{tag-yellow}%

home Navigation icons

Name Icon Description Write...
home home Home %ICON{home}%
sitemap sitemap Site map %ICON{sitemap}%
sitetree sitetree Site tree %ICON{sitetree}%
topicbacklinks topicbacklinks Topic back-links %ICON{topicbacklinks}%
arrowdot arrowdot Meet here (arrows to red dot) %ICON{arrowdot}%
external external External site %ICON{external}%
left left Left %ICON{left}%
right right Right %ICON{right}%
up up Up %ICON{up}%
down down Down %ICON{down}%
arrowbleft arrowbleft Arrow blue left %ICON{arrowbleft}%
arrowbright arrowbright Arrow blue right %ICON{arrowbright}%
arrowright-small arrowright-small arrowright-small %ICON{arrowright-small}%
arrowbup arrowbup Arrow blue up %ICON{arrowbup}%
arrowbdown arrowbdown Arrow blue down %ICON{arrowbdown}%
arrowleft arrowleft Arrow left %ICON{arrowleft}%
arrowright arrowright Arrow right %M%, %ICON{arrowright}%
arrowup arrowup Arrow up %ICON{arrowup}%
arrowdown arrowdown Arrow down %ICON{arrowdown}%
go_start go_start Go to start %ICON{go_start}%
go_fb go_fb Go fast back %ICON{go_fb}%
go_back go_back Go back %ICON{go_back}%
go_forward go_forward Go forward %ICON{go_forward}%
go_ff go_ff Go fast forward %ICON{go_ff}%
go_end go_end Go to end %ICON{go_end}%

toggleclose Interface icons

Name Icon Description Write...
monospace monospace Monospace %ICON{monospace}%
proportional proportional Proportional %ICON{proportional}%
tablesortdiamond tablesortdiamond Sort table %ICON{tablesortdiamond}%
tablesortdown tablesortdown Sort table descending %ICON{tablesortdown}%
tablesortup tablesortup Sort table ascending %ICON{tablesortup}%
toggleopen toggleopen Open toggle, Twisty open toggle %ICON{toggleopen}%
toggleclose toggleclose Close toggle, Twisty close toggle %ICON{toggleclose}%
toggleopen-small toggleopen-small Open toggle, Twisty open toggle %ICON{toggleopen-small}%
toggleclose-small toggleclose-small Close toggle, Twisty close toggle %ICON{toggleclose-small}%
toggleopen-mini toggleopen-mini Open toggle, Twisty open toggle %ICON{toggleopen-mini}%
toggleclose-mini toggleclose-mini Close toggle, Twisty close toggle %ICON{toggleclose-mini}%
toggleopenleft toggleopenleft Open toggle, Twisty open toggle %ICON{toggleopenleft}%
toggleopenleft-small toggleopenleft-small Open toggle, Twisty open toggle %ICON{toggleopenleft-small}%
togglecloseleft-small togglecloseleft-small togglecloseleft-small %ICON{togglecloseleft-small}%
web-bg web-bg Web background, used in WebLeftBarWebsList %ICON{web-bg}%
web-bg-small web-bg-small Web background, 13x13 %ICON{web-bg-small}%

foswiki Foswiki icons

Name Icon Description Write...
addon addon Add-on %ICON{addon}%
application application Application %ICON{application}%
code code Code %ICON{code}%
foswiki foswiki Foswiki %ICON{foswiki}%
package package Package %ICON{package}%
plugin plugin Plugin %ICON{plugin}%
tag tag Tag %ICON{tag}%
searchpackage searchpackage Search package %ICON{searchpackage}%
searchtag searchtag Search tag %ICON{searchtag}%
skin skin Skin %ICON{skin}%
irc irc irc %ICON{irc}%

twitter Other Websites Icons

Name Icon Description Write...
bitly bitly bitly %ICON{bitly}%
twitter twitter twitter %ICON{twitter}%
stumbleupon stumbleupon stumbleupon %ICON{stumbleupon}%
digg digg digg %ICON{digg}%
button-yellow button-yellow button-yellow %ICON{button-yellow}%
bebo bebo bebo %ICON{bebo}%
virb virb virb %ICON{virb}%
mobileme mobileme mobileme %ICON{mobileme}%
retweet retweet retweet %ICON{retweet}%
button-red button-red button-red %ICON{button-red}%
friendster friendster friendster %ICON{friendster}%
microsoft microsoft microsoft %ICON{microsoft}%
vimeo vimeo vimeo %ICON{vimeo}%
button-white button-white button-white %ICON{button-white}%
sharethis sharethis sharethis %ICON{sharethis}%
metacafe metacafe metacafe %ICON{metacafe}%
slideshare slideshare slideshare %ICON{slideshare}%
yahoo-buzz yahoo-buzz yahoo-buzz %ICON{yahoo-buzz}%
ebay ebay ebay %ICON{ebay}%
facebook facebook facebook %ICON{facebook}%
mister-wong mister-wong mister-wong %ICON{mister-wong}%
podcast podcast podcast %ICON{podcast}%
qik qik qik %ICON{qik}%
viddler viddler viddler %ICON{viddler}%
youtube youtube youtube %ICON{youtube}%
picasa picasa picasa %ICON{picasa}%
button-green button-green button-green %ICON{button-green}%
friendfeed friendfeed friendfeed %ICON{friendfeed}%
aol aol aol %ICON{aol}%
blogger blogger blogger %ICON{blogger}%
amazon amazon amazon %ICON{amazon}%
gowalla gowalla gowalla %ICON{gowalla}%
button-blue button-blue button-blue %ICON{button-blue}%
myspace myspace myspace %ICON{myspace}%
posterous posterous posterous %ICON{posterous}%
google-buzz google-buzz google-buzz %ICON{google-buzz}%
xing xing xing %ICON{xing}%
google google google %ICON{google}%
wordpress-blue wordpress-blue wordpress-blue %ICON{wordpress-blue}%
linkedin linkedin linkedin %ICON{linkedin}%
reddit reddit reddit %ICON{reddit}%
msn msn msn %ICON{msn}%
google-talk google-talk google-talk %ICON{google-talk}%
slashdot slashdot slashdot %ICON{slashdot}%
paypal paypal paypal %ICON{paypal}%
drupal drupal drupal %ICON{drupal}%
icq icq icq %ICON{icq}%
bing bing bing %ICON{bing}%
delicious delicious delicious %ICON{delicious}%
technorati technorati technorati %ICON{technorati}%
button-light-blue button-light-blue button-light-blue %ICON{button-light-blue}%
squidoo squidoo squidoo %ICON{squidoo}%
behance behance behance %ICON{behance}%
meetup meetup meetup %ICON{meetup}%
email eml email %ICON{email}%
yelp yelp yelp %ICON{yelp}%
yahoo yahoo yahoo %ICON{yahoo}%
feedburner feedburner feedburner %ICON{feedburner}%
mixx mixx mixx %ICON{mixx}%
lastfm lastfm lastfm %ICON{lastfm}%
wordpress wordpress wordpress %ICON{wordpress}%
star star star %ICON{star}%
newsvine newsvine newsvine %ICON{newsvine}%
apple apple apple %ICON{apple}%
app-store app-store app-store %ICON{app-store}%
flickr flickr flickr %ICON{flickr}%
deviant-art deviant-art deviant-art %ICON{deviant-art}%
button-orange button-orange button-orange %ICON{button-orange}%
netvibes netvibes netvibes %ICON{netvibes}%
designfloat designfloat designfloat %ICON{designfloat}%
tumblr tumblr tumblr %ICON{tumblr}%
design-bump design-bump design-bump %ICON{design-bump}%
skype skype skype %ICON{skype}%

line_ur Block graphics

Name Icon Description Write...
line_ld line_ld Line graph left-down %ICON{line_ld}%
line_lr line_lr Line graph left-right %ICON{line_lr}%
line_lrd line_lrd Line graph left-right-down %ICON{line_lrd}%
line_rd line_rd Line graph right-down %ICON{line_rd}%
line_ud line_ud Line graph up-down %ICON{line_ud}%
line_udl line_udl Line graph up-down-left %ICON{line_udl}%
line_udlr line_udlr Line graph up-down-left-right %ICON{line_udlr}%
line_udr line_udr Line graph up-down-right %ICON{line_udr}%
line_ul line_ul Line graph up-left %ICON{line_ul}%
line_ulr line_ulr Line graph up-left-right %ICON{line_ulr}%
line_ur line_ur Line graph up-right %ICON{line_ur}%
line_ur_gray line_ur_gray Line graph up-right, gray %ICON{line_ur_gray}%
dot_ld dot_ld Dot graph left-down %ICON{dot_ld}%
dot_lr dot_lr Dot graph left-right %ICON{dot_lr}%
dot_lrd dot_lrd Dot graph left-right-down %ICON{dot_lrd}%
dot_rd dot_rd Dot graph right-down %ICON{dot_rd}%
dot_ud dot_ud Dot graph up-down %ICON{dot_ud}%
dot_udl dot_udl Dot graph up-down-left %ICON{dot_udl}%
dot_udlr dot_udlr Dot graph up-down-left-right %ICON{dot_udlr}%
dot_udr dot_udr Dot graph up-down-right %ICON{dot_udr}%
dot_ul dot_ul Dot graph up-left %ICON{dot_ul}%
dot_ulr dot_ulr Dot graph up-left-right %ICON{dot_ulr}%
dot_ur dot_ur Dot graph up-right %ICON{dot_ur}%
empty empty Empty transparent 16x16 spacer %ICON{empty}%
parent_gray parent_gray Parent arrow %ICON{parent_gray}%

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.

Name Icon Description Write...
as as ActionScript %ICON{as}%
air air Adobe Air %ICON{air}%
bat bat MS-DOS batch file %ICON{bat}%
bmp bmp Bitmap %ICON{bmp}%
c c C source code file %ICON{c}%
css css Cascading Style Sheet file %ICON{css}%
dll dll Dynamic Linked Library; Microsoft application file %ICON{dll}%
doc doc Microsoft Word file %ICON{doc}%
else else Unknown file format %ICON{else}%
eml eml Microsoft Outlook e-mail file %ICON{eml}%
exe exe Microsoft Executable file %ICON{exe}%
fla fla Macromedia Flash Movie %ICON{fla}%
fon fon Windows bitmapped font file %ICON{fon}%
gif gif GIF %ICON{gif}%
h h Header file %ICON{h}%
hlp hlp Standard help file %ICON{hlp}%
html html HTML %ICON{html}%
java java Java source code file %ICON{java}%
jpg jpg JPEG %ICON{jpg}%
js js JavaScript %ICON{js}%
mdb mdb Microsoft Access database File %ICON{mdb}%
mov mov Quicktime movie %ICON{mov}%
mp3 mp3 MP3 %ICON{mp3}%
pdf pdf PDF %ICON{pdf}%
pl pl Perl source code file %ICON{pl}%
png png PNG %ICON{png}%
ppt ppt PowerPoint %ICON{ppt}%
ps ps Postscript %ICON{ps}%
psd psd Photoshop document %ICON{psd}%
py py Python source code file %ICON{py}%
ram ram RealAudio %ICON{ram}%
reg reg Registry file %ICON{reg}%
sh sh Unix shell script %ICON{sh}%
sniff sniff sniff %ICON{sniff}%
svg svg svg %ICON{svg}%
swf swf SWF (Shockwave Flash) %ICON{swf}%
ttf ttf True Type font %ICON{ttf}%
txt txt Text %ICON{txt}%
vsd vsd Visio document %ICON{vsd}%
wav wav Waveform sound file %ICON{wav}%
wri wri Windows Write %ICON{wri}%
xls xls Microsoft Excel Spreadsheet %ICON{xls}%
xml xml XML %ICON{xml}%
xsl xsl XSL (XML style sheet) %ICON{xsl}%
zip zip Compressed Zip archive %ICON{zip}%
vector vector vector %ICON{vector}%

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 help.png

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 Home

To get rid of the underline under the space, write:
[[WebHome][%ICON{home}%]] [[WebHome][Home]] to get: home Home

To get the full URL of the icon, use ICONURL:

%ICONURL{"toggleopen"}% gets you the image path: https://wiki.wcr.ethz.ch/pub/System/DocumentGraphics/toggleopen.gif
and that will get rendered as: toggleopen.gif

Credits

Most of these icons are from the FamFamFam Silk icon set, some are modifications by Foswiki:Main.SvenDowideit, and a few come from the Fugue icons set. The social media icons are from icondock's Vector social media set.

Related Topics: Skins, DeveloperDocumentationCategory, AdminDocumentationCategory spacer