Documentation Graphics and Filetype icons

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

Usage

Default notation:

%ICON{help}% results in:

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

Other usage: see below.

Graphics

• Set ICONTOPIC=System.FamFamFamGraphics

Document icons

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

Topic, file, folder icons

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

Person, group, access icons

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

Changes, notification icons

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

Status, flag, LED, tag icons

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

Navigation icons

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

Interface icons

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

Block graphics

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

Filetype icons

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

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

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

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

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

%ICONURL{"toggleopen"}% gets you the image path: https://iac-twiki.ethz.ch/pub/System/FamFamFamGraphics/toggleopen.gif
and that will get rendered as: