University of Natural Resources and Life Sciences (BOKU)
Institute of Computational Biology

Documentation Graphics and Filetype icons

This is the 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 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.


  • Set ICONTOPIC=System.OriginalDocumentGraphics

note Document icons

  File Name DescriptionSorted descending Write...
Ying Yang ying-yang.gif Ying Yang %ICON{ying-yang}%
Wrench, tools wrench.gif Wrench, tools %ICON{wrench}%
Work in progress, under construction wip.gif Work in progress, under construction %ICON{wip}%
Watch watch.gif Watch %ICON{watch}%
Warning, important warning.gif Warning, important %X%, %ICON{warning}%
Video video.gif Video, 13x10 <img src="%ICONURL{video}%" width="13" height="10" alt="Video" border="0" />
VCard vcard.gif VCard %ICON{vcard}%
Twitter twitter.gif Twitter %ICON{twitter}%
Traffic light traffic-light.gif Traffic light %ICON{traffic-light}%
Tooth tooth.gif Tooth %ICON{tooth}%
Toolbox toolbox.gif Toolbox %ICON{toolbox}%
Tip, idea tip.gif Tip, idea %T%, %ICON{tip}%
Thumbs-up thumbs-up.gif Thumbs-up %ICON{thumbs-up}%
Thumbs-down thumbs-down.gif Thumbs-down %ICON{thumbs-down}%
Target - red target-red.gif Target - red %ICON{target-red}%
Target - orange target-orange.gif Target - orange %ICON{target-orange}%
Target - green target-green.gif Target - green %ICON{target-green}%
Target - gray target-gray.gif Target - gray %ICON{target-gray}%
Target - blue target-blue.gif Target - blue %ICON{target-blue}%
Target target.gif Target %ICON{target}%
Switch switch.gif Switch %ICON{switch}%
Support support.gif Support %ICON{support}%
Stop stop.gif Stop %ICON{stop}%
Statistics statistics.gif Statistics %ICON{statistics}%
Star-none star-none.gif Star (none) %ICON{star-none}%
Star-half star-half.gif Star (half) %ICON{star-half}%
Star-full star-full.gif Star (full) %ICON{star-full}%
Speech bubble bubble.gif Speech bubble %ICON{bubble}%
Sort sort.gif Sort %ICON{sort}%
Socket socket.gif Socket %ICON{socket}%
Skype skype.gif Skype %ICON{skype}%
Site tree sitetree.gif Site tree %ICON{sitetree}%
Site map sitemap.gif Site map %ICON{sitemap}%
Request for comments rfc.gif Request for comments %ICON{rfc}%
Red star, highlight starred.gif Red star, highlight %S%, %ICON{starred}%
Read more more-small.gif Read more, 13x13 <img src="%ICONURL{more-small}%" width="13" height="13" alt="Read more" border="0" />
Read more more.gif Read more %ICON{more}%
Radioactive radioactive.gif Radioactive %ICON{radioactive}%
Quiet quiet.gif Quiet %ICON{quiet}%
Question question.gif Question %ICON{question}%
Puzzle puzzle.gif Puzzle %ICON{puzzle}%
Profile profile.gif Profile %ICON{profile}%
Process process.gif Process %ICON{process}%
Presentation presentation.gif Presentation %ICON{presentation}%
Pointing hand hand.gif Pointing hand %ICON{hand}%
Plug plug.gif Plug %ICON{plug}%
Pie chart chart-pie.gif Pie chart %ICON{chart-pie}%
Photo photo.gif Photo, 13x10 <img src="%ICONURL{photo}%" width="13" height="10" alt="Photo" border="0" />
Phone phone.gif Phone %ICON{phone}%
Pencil / Refactor / Edit pencil.gif Pencil / Refactor / Edit %P%, %ICON{pencil}%
Parts parts.gif Parts %ICON{parts}%
Parked parked.gif Parked %ICON{parked}%
Note note.gif Note %ICON{note}%
Move move.gif Move %ICON{move}%
Mobile mobile.gif Mobile %ICON{mobile}%
Megaphone megaphone.gif Megaphone %ICON{megaphone}%
Mechanics mechanics.gif Mechanics %ICON{mechanics}%
Map map.gif Map %ICON{map}%
Map map.gif Map %ICON{map}%
Luggage luggage.gif Luggage %ICON{luggage}%
Legal legal.gif Legal %ICON{legal}%
Information info.gif Info %ICON{info}%
Hour glass (clock) hourglass.gif Hour glass (clock) %ICON{hourglass}%
Help help.gif Help %H%, %ICON{help}%
Heart heart.gif Heart %ICON{heart}%
Graduation graduation.gif Graduation %ICON{graduation}%
Gold star, favorites stargold.gif Gold star, favorites %ICON{stargold}%
Globe globe.gif Globe %ICON{globe}%
Gear gear.gif Gear %ICON{gear}%
Filter filter.gif Filter %ICON{filter}%
Fax fax.gif Fax %ICON{fax}%
Facebook facebook.gif Facebook %ICON{facebook}%
Download download.gif Download %ICON{download}%
Days / Calendar days.gif Days, Calendar %ICON{days}%
Database database.gif Database %ICON{database}%
Connections connections.gif Connections %ICON{connections}%
Comments comments.gif Comments %ICON{comments}%
Bug bug.gif Bug %ICON{bug}%
Book book.gif Book %ICON{book}%
Bomb bomb.gif Bomb %ICON{bomb}%
Blank blank-bg.gif Blank box, transparent %ICON{blank-bg}%
Blank blank.gif Blank box %ICON{blank}%
Bed bed.gif Bed %ICON{bed}%
Barcode barcode.gif Barcode %ICON{barcode}%
Bar chart chart-bar.gif Bar chart %ICON{chart-bar}%
Award award.gif Award %ICON{award}%
Airplane airplane.gif Airplane %ICON{airplane}%
LinkedIn linkedin.gif LinkedIn %ICON{linkedin}%

viewtopic Topic, attachfile file, folder folder icons

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

person Person, group group, lock access icons

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

changes Changes, notify notification icons

  File Name Description Write...
Changes changes.gif Changes %ICON{changes}%
Changes changes-small.gif Changes (small), 13x13 <img src="%ICONURL{changes-small}%" width="13" height="13" alt="Changes" border="0" />
Recent changes recentchanges.gif Recent changes %ICON{recentchanges}%
Mail mail.gif Mail %ICON{mail}%
Notify notify.gif Notify %ICON{notify}%
Feed feed.gif RSS feed, rounded corners %ICON{feed}%
RSS rss.gif RSS feed, gray box %ICON{rss}%
RSS feed rss-feed.gif RSS feed, 36x14 <img src="%ICONURL{rss-feed}%" width="36" height="14" alt="RSS feed" border="0" />
RSS feed rss-small.gif RSS feed, text %ICON{rss-small}%
XML feed xml-feed.gif XML feed, 36x14 <img src="%ICONURL{xml-feed}%" width="36" height="13" alt="XML feed" border="0" />
XML feed xml-small.gif XML feed %ICON{xml-small}%

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

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

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

toggleclose Interface icons

  File Name Description Write...
Monospace monospace.gif Monospace %ICON{monospace}%
Proportional proportional.gif Proportional %ICON{proportional}%
Sort table tablesortdiamond.gif Sort table <img src="%ICONURL{tablesortdiamond}%" width="11" height="13" alt="Sort table" border="0" />
Sort table descending tablesortdown.gif Sort table descending <img src="%ICONURL{tablesortdown}%" width="11" height="13" alt="Sort table descending" border="0" />
Sort table ascending tablesortup.gif Sort table ascending <img src="%ICONURL{tablesortup}%" width="11" height="13" alt="Sort table ascending" border="0" />
Open toggle, Twisty open toggle toggleopen.gif Open toggle, Twisty open toggle %ICON{toggleopen}%
Close toggle, Twisty close toggle toggleclose.gif Close toggle, Twisty close toggle %ICON{toggleclose}%
Open toggle, Twisty open toggle toggleopen-small.gif Open toggle, Twisty open toggle %ICON{toggleopen-small}%
Close toggle, Twisty close toggle toggleclose-small.gif Close toggle, Twisty close toggle %ICON{toggleclose-small}%
Open toggle, Twisty open toggle toggleopen-mini.gif Open toggle, Twisty open toggle <img src="%ICONURL{toggleopen-mini}%" width="7" height="9" alt="Open" border="0" />
Close toggle, Twisty close toggle toggleclose-mini.gif Close toggle, Twisty close toggle <img src="%ICONURL{toggleclose-mini}%" width="7" height="9" alt="Close" border="0" />
Open toggle, Twisty open toggle toggleopenleft.gif Open toggle, Twisty open toggle %ICON{toggleopenleft}%
Open toggle, Twisty open toggle toggleopenleft-small.gif Open toggle, Twisty open toggle %ICON{toggleopenleft-small}%
Web web-bg.gif Web background, used in WebLeftBarWebsList %ICON{web-bg}%
Web web-bg-small.gif Web background, 13x13 <img src="%ICONURL{web-bg-small}%" width="13" height="13" alt="Web" border="0" />

Foswiki icons

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

line_ur 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}%

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.

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

You are not restricted to use the OriginalDocumentGraphics topic - in a similar way you can show attached images by replacing OriginalDocumentGraphics 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:
and that will get rendered as: toggleopen.gif

Related Topics: Skins, DeveloperDocumentationCategory, AdminDocumentationCategory

Contributors: Most icons on this page were originally designed by Peter Thoeny. Many icons were recreated by Arthur Clemens.
17 Aug 2022 - 11:32 Foswiki v2.0.2