NOTE: This is a static archive copy of STWiki. The site can no longer be edited.

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: ../../../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 STWiki? Send feedback