Log In | Users | Register
Welcome, Registration, and other StartingPoints; Foswiki history & Wiki style; All the docs...
Edit | Attach | New | Raw | Delete | History | Diff | Print | Pdf | Subscribe | Tools
You are here: System » FamFamFamGraphics

Documentation Graphics and Filetype icons

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


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.


  • Set ICONTOPIC=System.FamFamFamGraphics

note Document icons

Name Icon URL Description Write...
book book.png Book %ICON{book}%
blank blank.png Blank box %ICON{blank}%
blank-bg blank-bg.png Blank box, transparent %ICON{blank-bg}%
bubble comment.png Speech bubble %ICON{bubble}%
days date.png Days, Calendar %ICON{days}%
download disk_download.png Download %ICON{download}%
fax printer.png Fax %ICON{fax}%
filter filter.png Filter %ICON{filter}%
gear cog.png Gear %ICON{gear}%
globe world.png Globe %ICON{globe}%
map map_cursor.png Map %ICON{map}%
hand Finger_point.png Pointing hand %ICON{hand}%
help help.png Help %H%, %ICON{help}%
info information.png Info %ICON{info}%
hourglass hourglass.png Hour glass (clock) %ICON{hourglass}%
megaphone transmit_go.png Megaphone %ICON{megaphone}%
mobile phone.png Mobile %ICON{mobile}%
more bullet_go.png Read more %ICON{more}%
more-small bullet_go.png Read more, 13x13 <img src="%ICONURL{more-small}%" width="13" height="13" alt="Read more" border="0" />
move arrow_turn_left.png Move %ICON{move}%
note note.png Note %ICON{note}%
parked car.png Parked %ICON{parked}%
parts brick.png Parts %ICON{parts}%
pencil pencil.png Pencil / Refactor / Edit %P%, %ICON{pencil}%
phone telephone.png Phone %ICON{phone}%
photo photo.png Photo, 13x10 <img src="%ICONURL{photo}%" width="13" height="10" alt="Photo" border="0" />
presentation presentation.png Presentation %ICON{presentation}%
puzzle plugin.png Puzzle %ICON{puzzle}%
question help.png Question %ICON{question}%
quiet quiet.png Quiet %ICON{quiet}%
rfc comments_add.png Request for comments %ICON{rfc}%
sitemap sitemap.png Site map %ICON{sitemap}%
sitetree outline.png Site tree %ICON{sitetree}%
skype skype.png Skype %ICON{skype}%
sort table_sort.png Sort %ICON{sort}%
stargold star.png Gold star, favorites %ICON{stargold}%
starred rosette.png Red star, highlight %S%, %ICON{starred}%
stop stop.png Stop %ICON{stop}%
target target.png Target %ICON{target}%
target-blue target-blue.png Target - blue %ICON{target-blue}%
target-gray target-gray.png Target - gray %ICON{target-gray}%
target-green target-green.png Target - green %ICON{target-green}%
target-orange target-orange.png Target - orange %ICON{target-orange}%
target-red target-red.png Target - red %ICON{target-red}%
tip lightbulb.png Tip, idea %T%, %ICON{tip}%
video dvd_start.png Video, 13x10 <img src="%ICONURL{video}%" width="13" height="10" alt="Video" border="0" />
warning exclamation.png Warning, important %X%, %ICON{warning}%
watch clock.png Watch %ICON{watch}%
wip wrench_orange.png Work in progress, under construction %ICON{wip}%
wrench wrench.png Wrench, tools %ICON{wrench}%

viewtopic Topic, attachfile file, folder folder icons

Name Icon URL Description Write...
viewtopic page.png View topic %ICON{viewtopic}%
printtopic printer.png Print topic %ICON{printtopic}%
refreshtopic page_refresh.png Refresh topic %ICON{refreshtopic}%
newtopic page_add.png New topic %ICON{newtopic}%
edittopic page_edit.png Edit topic %ICON{edittopic}%
save page_save.png Save %ICON{save}%
attachfile page_attach.png Attach file %ICON{attachfile}%
download page_white_put.png Download %ICON{download}%
trash page_delete.png Trash %ICON{trash}%
searchtopic page_find.png Search topic %ICON{searchtopic}%
search-small page_find.png Small search button, 13x13 <img src="%ICONURL{search-small}%" width="13" height="13" alt="Search" border="0" />
topicbacklinks page_white_get.png Topic back-links %ICON{topicbacklinks}%
topicdiffs page_copy.png Topic difference %ICON{topicdiffs}%
statistics chart_curve.png Statistics %ICON{statistics}%
index text_list_bullets.png Index %ICON{index}%
indexlist text_padding_left.png Index list %ICON{indexlist}%
cachetopic page_white_swoosh.png Cache topic %ICON{cachetopic}%
folder folder.png Folder %ICON{folder}%
table table.png Table %ICON{table}%
edittable table_edit.png Edit table %ICON{edittable}%
uweb-bo uweb-bo.png UWEB (Universal Wiki Edit Button), blue, outline %ICON{uweb-bo}%
uweb-bo12 uweb-bo12.png UWEB, blue, outline, small 12x12 <img src="%ICONURL{uweb-bo12}%" width="12" height="12" alt="Edit" border="0" />
uweb-g uweb-g.png UWEB, green (default) %ICON{uweb-g}%
uweb-gs uweb-gs.png UWEB, green, square %ICON{uweb-gs}%
uweb-m12 uweb-m12.png UWEB, black, small 12x12 <img src="%ICONURL{uweb-m12}%" width="12" height="12" alt="Edit" border="0" />
uweb-o uweb-o.png UWEB, orange %ICON{uweb-o}%
uweb-o12 uweb-o12.png UWEB, orange, small 12x12 <img src="%ICONURL{uweb-o12}%" width="12" height="12" alt="Edit" border="0" />
uweb-oo uweb-oo.png UWEB, orange, outline %ICON{uweb-oo}%
uweb-os uweb-os.png UWEB, orange, square %ICON{uweb-os}%

person Person, group group, lock access icons

Icon URL Description Write...
person user.png Person %ICON{person}%
persons group.png Persons %ICON{persons}%
group group.png Group %ICON{group}%
useractive status_online.png Active user %ICON{useractive}%
userinactive status_offline.png Inactive user %ICON{userinactive}%
building building.png Building %ICON{building}%
buildings neighbourhood.png Buildings %ICON{buildings}%
logout key_delete.png Log out %ICON{logout}%
key key.png Key %ICON{key}%
lock lock.png Lock %ICON{lock}%
locktopic page_key.png Locked topic %ICON{locktopic}%
locktopicgray page_white_key.png Locked topic, gray %ICON{locktopicgray}%
lockfolder folder_key.png Locked folder %ICON{lockfolder}%
lockfoldergray folder_key.png Locked folder, gray %ICON{lockfoldergray}%

changes Changes, notify notification icons

Name Icon URL Description Write...
changes page_white_stack.png Changes %ICON{changes}%
changes-small page_white_stack.png Changes (small), 13x13 <img src="%ICONURL{changes-small}%" width="13" height="13" alt="Changes" border="0" />
recentchanges page_white_lightning.png Recent changes %ICON{recentchanges}%
mail email.png Mail %ICON{mail}%
notify email_star.png Notify %ICON{notify}%
feed feed.png Feed %ICON{feed}%
rss-feed feed.png RSS feed, 36x14 <img src="%ICONURL{rss-feed}%" width="36" height="14" alt="RSS feed" border="0" />
rss-small bullet_feed.png RSS feed %ICON{rss-small}%
xml-feed xml-feed.png XML feed, 36x14 <img src="%ICONURL{xml-feed}%" width="36" height="13" alt="XML feed" border="0" />
xml-small xml-small.png XML feed %ICON{xml-small}%

choice-yes Status, flag flag, bullet_box-red LED, tag-yellow tag icons

Name Icon URL Description Write...
new new.png NEW, 30x16 %N%, <img src="%ICONURL{new}%" width="30" height="16" alt="New" border="0" />
todo todo.png TODO, 37x16 <img src="%ICONURL{todo}%" width="37" height="16" alt="TODO" border="0" />
updated updated.png UPDATED, 55x16 %U%, <img src="%ICONURL{updated}%" width="55" height="16" alt="UPDATED" border="0" />
done done.png DONE, 37x16 <img src="%ICONURL{done}%" width="37" height="16" alt="Done" border="0" />
closed closed.png CLOSED, 48x16 <img src="%ICONURL{closed}%" width="48" height="16" alt="Closed" border="0" />
minus delete.png Minus %ICON{minus}%
plus add.png Plus %ICON{plus}%
choice-cancel cancel.png Cancel %ICON{choice-cancel}%
choice-no accept.png No %ICON{choice-no}%
choice-yes decline.png Yes / Done %Y%, %ICON{choice-yes}%
unchecked unchecked.png Unchecked checkbox %ICON{unchecked}%
checked checked.png Checked checkbox %ICON{checked}%
flag flag_blue.png Flag %ICON{flag}%
flag-gray flag_blue.png 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 bullet_aqua.png Aqua led %ICON{bullet_aqua}%
bullet_blue bullet_blue.png Blue led %ICON{bullet_blue}%
bullet_gray bullet_gray.png Gray led %ICON{bullet_gray}%
bullet_green bullet_green.png Green led %ICON{bullet_green}%
bullet_orange bullet_orange.png Orange led %ICON{bullet_orange}%
bullet_purple bullet_purple.png Purple led %ICON{bullet_purple}%
bullet_red bullet_red.png Red led %ICON{bullet_red}%
bullet_yellow bullet_yellow.png Yellow led %ICON{bullet_yellow}%
bullet_box-aqua bullet_box-aqua.png Aqua led %ICON{bullet_box-aqua}%
bullet_box-blue bullet_box-blue.png Blue led %ICON{bullet_box-blue}%
bullet_box-gray bullet_box-gray.png Gray led %ICON{bullet_box-gray}%
bullet_box-green bullet_box-green.png Green led %ICON{bullet_box-green}%
bullet_box-orange bullet_box-orange.png Orange led %ICON{bullet_box-orange}%
bullet_box-purple bullet_box-purple.png Purple led %ICON{bullet_box-purple}%
bullet_box-red bullet_box-red.png Red led %ICON{bullet_box-red}%
bullet_box-yellow bullet_box-yellow.png Yellow led %ICON{bullet_box-yellow}%
tag tag_blue.png Tag %ICON{tag}%
tag-blue tag_blue.png Blue tag %ICON{tag-blue}%
tag-brown tag_brown.png Brown tag %ICON{tag-brown}%
tag-green tag_green.png Green tag %ICON{tag-green}%
tag-magenta tag_magenta.png Magenta tag %ICON{tag-magenta}%
tag-orange tag_orange.png Orange tag %ICON{tag-orange}%
tag-purple tag_purple.png Purple tag %ICON{tag-purple}%
tag-red tag_red.png Red tag %ICON{tag-red}%
tag-yellow tag_yellow.png Yellow tag %ICON{tag-yellow}%

home Navigation icons

Name Icon URL Description Write...
home house.png Home %ICON{home}%
sitemap sitemap.png Site map %ICON{sitemap}%
sitetree chart_organisation.png Site tree %ICON{sitetree}%
topicbacklinks page_white_get.png Topic back-links %ICON{topicbacklinks}%
arrowdot arrow_in.png Meet here (arrows to red dot) %ICON{arrowdot}%
external link_go.png External site %ICON{external}%
left arrow_left.png Left %ICON{left}%
right arrow_right.png Right %ICON{right}%
up arrow_up.png Up %ICON{up}%
down arrow_down.png Down %ICON{down}%
arrowbleft arrow_left.png Arrow blue left %ICON{arrowbleft}%
arrowbright arrow_right.png Arrow blue right %ICON{arrowbright}%
arrowbup arrow_up.png Arrow blue up %ICON{arrowbup}%
arrowbdown arrow_down.png Arrow blue down %ICON{arrowbdown}%
arrowleft arrow_left.png Arrow left %ICON{arrowleft}%
arrowright arrow_right.png Arrow right %M%, %ICON{arrowright}%
arrowup arrow_up.png Arrow up %ICON{arrowup}%
arrowdown arrow_down.png Arrow down %ICON{arrowdown}%
go_start control_start.png Go to start %ICON{go_start}%
go_fb control_rewind.png Go fast back %ICON{go_fb}%
go_back control_play_backward.png Go back %ICON{go_back}%
go_forward control_play.png Go forward %ICON{go_forward}%
go_ff control_fastforward.png Go fast forward %ICON{go_ff}%
go_end control_end.png Go to end %ICON{go_end}%

toggleclose Interface icons

Name Icon URL Description Write...
monospace monospace.png Monospace %ICON{monospace}%
proportional proportional.png Proportional %ICON{proportional}%
tablesortdiamond bullet_black.png Sort table <img src="%ICONURL{tablesortdiamond}%" width="11" height="13" alt="Sort table" border="0" />
tablesortdown bullet_down.png Sort table descending <img src="%ICONURL{tablesortdown}%" width="11" height="13" alt="Sort table descending" border="0" />
tablesortup bullet_up.png Sort table ascending <img src="%ICONURL{tablesortup}%" width="11" height="13" alt="Sort table ascending" border="0" />
toggleopen bullet_toggle_plus.png Open toggle, Twisty open toggle %ICON{toggleopen}%
toggleclose bullet_toggle_minus.png Close toggle, Twisty close toggle %ICON{toggleclose}%
toggleopen-small bullet_toggle_plus.png Open toggle, Twisty open toggle %ICON{toggleopen-small}%
toggleclose-small bullet_toggle_minus.png Close toggle, Twisty close toggle %ICON{toggleclose-small}%
toggleopen-mini bullet_toggle_plus.png Open toggle, Twisty open toggle <img src="%ICONURL{toggleopen-mini}%" width="7" height="9" alt="Open" border="0" />
toggleclose-mini bullet_toggle_minus.png Close toggle, Twisty close toggle <img src="%ICONURL{toggleclose-mini}%" width="7" height="9" alt="Close" border="0" />
toggleopenleft bullet_left.png Open toggle, Twisty open toggle %ICON{toggleopenleft}%
toggleopenleft-small bullet_left.png Open toggle, Twisty open toggle %ICON{toggleopenleft-small}%
web-bg web-bg.png Web background, used in WebLeftBarWebsList %ICON{web-bg}%
web-bg-small web-bg-small.png 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 script.png Add-on %ICON{addon}%
application application.png Application %ICON{application}%
code page_white_cplusplus.png Code %ICON{code}%
package package.png Package %ICON{package}%
plugin plugin.png Plugin %ICON{plugin}%
tag tag.png Tag %ICON{tag}%
searchpackage package_find.png Search package %ICON{searchpackage}%
searchtag tag_find.png Search tag %ICON{searchtag}%
skin theme.png Skin %ICON{skin}%

line_ur Block graphics

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

gif Filetype icons

| pdf Filetype icons are used by the attachment table and are seldom used in topics. Write %ICON{pdf}% to show the pdf icon.

Name Icon URL Description Write...
as page_white_actionscript.png ActionScript %ICON{as}%
air page_white_acrobat.png Adobe Air %ICON{air}%
bat page_white_lightning.png MS-DOS batch file %ICON{bat}%
bmp page_white_camera.png Bitmap %ICON{bmp}%
c page_white_c.png C source code file %ICON{c}%
css css.png Cascading Style Sheet file %ICON{css}%
dll page_white_lightning.png Dynamic Linked Library; Microsoft application file %ICON{dll}%
doc page_white_word.png Microsoft Word file %ICON{doc}%
else page_white.png Unknown file format %ICON{else}%
eml page_white_office.png Microsoft Outlook e-mail file %ICON{eml}%
exe page_white_lightning.png Microsoft Executable file %ICON{exe}%
fla page_white_flash.png Macromedia Flash Movie %ICON{fla}%
fon font.png Windows bitmapped font file %ICON{fon}%
gif page_white_camera.png GIF %ICON{gif}%
h page_white_h.png Header file %ICON{h}%
hlp page_white_hlp.png Standard help file %ICON{hlp}%
html page_white_code.png HTML %ICON{html}%
java page_white_java.png Java source code file %ICON{java}%
jpg page_white_camera.png JPEG %ICON{jpg}%
js page_white_javascript.png JavaScript %ICON{js}%
mdb page_white_database.png Microsoft Access database File %ICON{mdb}%
mov page_white_camera.png Quicktime movie %ICON{mov}%
mp3 page_white_camera.png MP3 %ICON{mp3}%
pdf page_white_acrobat.png PDF %ICON{pdf}%
pl page_white_perl.png Perl source code file %ICON{pl}%
png page_white_camera.png PNG %ICON{png}%
ppt page_white_powerpoint.png PowerPoint %ICON{ppt}%
ps page_white_ps.png Postscript %ICON{ps}%
psd page_white_camera.png Photoshop document %ICON{psd}%
py page_white_py.png Python source code file %ICON{py}%
ram page_white_camera.png RealAudio %ICON{ram}%
reg page_white_database.png Registry file %ICON{reg}%
sh page_white_lightning.png Unix shell script %ICON{sh}%
sniff page_white_sniff.png sniff %ICON{sniff}%
swf page_white_camera.png SWF (Shockwave Flash) %ICON{swf}%
ttf font.png True Type font %ICON{ttf}%
txt page_white_text.png Text %ICON{txt}%
vsd page_white_vector.png Visio document %ICON{vsd}%
wav page_white_camera.png Waveform sound file %ICON{wav}%
wri page_white_text.png Windows Write %ICON{wri}%
xls page_white_excel.png Microsoft Excel Spreadsheet %ICON{xls}%
xml page_white_code.png XML %ICON{xml}%
xsl page_white_code.png XSL (XML style sheet) %ICON{xsl}%
zip page_white_compressed.png 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 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.iac.ethz.ch/pub/System/FamFamFamGraphics/toggleopen.gif
and that will get rendered as: toggleopen.gif

Related Topics: Skins, DeveloperDocumentationCategory, AdminDocumentationCategory spacer
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Wiki? Send feedback
Syndicate this site RSS ATOM