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:

Note that ICON{}assumes a GIF image of 16 x 16 pixels. Use a HTML imgtag with %ICONURL{}%for image with other sizes. See the tables below for copy-paste examples.

Other usage: see below.

Graphics

Document icons

	File Name	Description	Write...
Airplane	airplane.gif	Airplane	%ICON{airplane}%
Award	award.gif	Award	%ICON{award}%
Bed	bed.gif	Bed	%ICON{bed}%
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}%
Days / Calendar	days.gif	Days, Calendar	%ICON{days}%
Download	download.gif	Download	%ICON{download}%
Fax	fax.gif	Fax	%ICON{fax}%
	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.gif	Help	%H%, %ICON{help}%
	info.gif	Info	%ICON{info}%
Hour glass (clock)	hourglass.gif	Hour glass (clock)	%ICON{hourglass}%
Luggage	luggage.gif	Luggage	%ICON{luggage}%
Map	map.gif	Map	%ICON{map}%
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="/System/%ICONURL{more-small}%" width="13" height="13" alt="Read more" border="0" />
	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="/System/%ICONURL{photo}%" width="13" height="10" alt="Photo" border="0" />
Presentation	presentation.gif	Presentation	%ICON{presentation}%
Puzzle	puzzle.gif	Puzzle	%ICON{puzzle}%
Question	question.gif	Question	%ICON{question}%
Quiet	quiet.gif	Quiet	%ICON{quiet}%
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}%
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}%
Stop	stop.gif	Stop	%ICON{stop}%
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}%
	tip.gif	Tip, idea	%T%, %ICON{tip}%
Video	video.gif	Video, 13x10	<img src="/System/%ICONURL{video}%" width="13" height="10" alt="Video" border="0" />
	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.gif	Wrench, tools	%ICON{wrench}%

Topic, file, 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}%
	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}%
	searchtopic.gif	Search topic	%ICON{searchtopic}%
Search	search-small.gif	Small search button, 13x13	<img src="/System/%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.gif	Statistics	%ICON{statistics}%
	index.gif	Index	%ICON{index}%
	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="/System/%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="/System/%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="/System/%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, group, access icons

	File Name	Description	Write...
	person.gif	Person	%ICON{person}%
Persons	persons.gif	Persons	%ICON{persons}%
	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, notification icons

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

Status, flag, LED, tag icons

	File Name	Description	Write...
NEW	new.gif	NEW, 30x16	%N%, <img src="/System/%ICONURL{new}%" width="30" height="16" alt="New" border="0" />
TODO	todo.gif	TODO, 37x16	<img src="/System/%ICONURL{todo}%" width="37" height="16" alt="TODO" border="0" />
UPDATED	updated.gif	UPDATED, 55x16	%U%, <img src="/System/%ICONURL{updated}%" width="55" height="16" alt="UPDATED" border="0" />
DONE	done.gif	DONE, 37x16	<img src="/System/%ICONURL{done}%" width="37" height="16" alt="Done" border="0" />
CLOSED	closed.gif	CLOSED, 48x16	<img src="/System/%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="/System/%ICONURL{processing-32}%" width="32" height="32" alt="Processing" border="0" />
Processing-32-bg	processing-32-bg.gif	Processing, 32x32, transparent	<img src="/System/%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="/System/%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}%

Navigation icons

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

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="/System/%ICONURL{tablesortdiamond}%" width="11" height="13" alt="Sort table" border="0" />
Sort table descending	tablesortdown.gif	Sort table descending	<img src="/System/%ICONURL{tablesortdown}%" width="11" height="13" alt="Sort table descending" border="0" />
	tablesortup.gif	Sort table ascending	<img src="/System/%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="/System/%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="/System/%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="/System/%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}%

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

Filetype icons

Filetype icons are used by the attachment table and are seldom used in topics. Write %ICON{pdf}%to show the 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.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.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.gif	PDF	%ICON{pdf}%
pl	pl.gif	Perl source code file	%ICON{pl}%
	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.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%/DocumentGraphics/help.gifto show

You are not restricted to use the DocumentGraphics topic - in a similar way you can show attached images by replacing DocumentGraphicswith 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 Home

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

%ICONURL{"toggleopen"}% gets you the image path: http://www.linux-arm.org/pub/System/DocumentGraphics/toggleopen.gif
and that will get rendered as:

---

Related Topics: Skins, DeveloperDocumentationCategory, AdminDocumentationCategory

Contributors: Most icons on this page were originally designed by Peter Thoeny. Many icons were recreated by Arthur Clemens.