Documentation Graphics and Filetype icons

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

Usage

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.

Graphics

  • Set ICONTOPIC=System.OriginalDocumentGraphics

note Document icons

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

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: https://wiki.hwr-berlin.de/foswiki/pub/System/OriginalDocumentGraphics/toggleopen.gif
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.
Topic revision: r1 - 21 Jul 2015, ProjectContributor
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 Foswiki? Send feedback