TWiki Documentation Graphics and Filetype icons

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

For an overview, see TWikiDocGraphicsGallery

Usage

Default notation:

%ICON{help}% results in:

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

Document icons

	File Name	Description	Write...
	book.gif	Book	%ICON{book}%
	bubble.gif	Speech bubble	%ICON{bubble}%
	days.gif	Days, Calendar	%ICON{days}%
	download.gif	Download	%ICON{download}%
	filter.gif	Filter	%ICON{filter}%
	gear.gif	Gear	%ICON{gear}%
	globe.gif	Globe	%ICON{globe}%
	hand.gif	Pointing hand	%ICON{hand}%
	help.gif	Help	%H%, %ICON{help}%
	info.gif	Info	%ICON{info}%
	hourglass.gif	Hour glass (clock)	%ICON{hourglass}%
	more.gif	Read more	%ICON{more}%
	more-small.gif	Read more, 13x13	<img src="%ICONURL{more-small}%" width="13" height="13" alt="Read more" border="0" />
	move.gif	Move	%ICON{move}%
	note.gif	Note	%ICON{note}%
	parked.gif	Parked	%ICON{parked}%
	pencil.gif	Pencil / Refactor / Edit	%P%, %ICON{pencil}%
	puzzle.gif	Puzzle	%ICON{puzzle}%
	question.gif	Question	%ICON{question}%
	rfc.gif	Request for comments	%ICON{rfc}%
	sort.gif	Sort	%ICON{sort}%
	stargold.gif	Gold star, favorites	%ICON{stargold}%
	starred.gif	Red star, highlight	%S%, %ICON{starred}%
	stop.gif	Stop	%ICON{stop}%
	target.gif	Target	%ICON{target}%
	tip.gif	Tip, idea	%T%, %ICON{tip}%
	warning.gif	Warning, important	%X%, %ICON{warning}%
	watch.gif	Watch	%ICON{watch}%
	wip.gif	Work in progress, under construction	%ICON{wip}%
	wrench.gif	Wrench, tools	%ICON{wrench}%

Topic, file, folder icons

	File Name	Description	Write...
	viewtopic.gif	View topic	%ICON{viewtopic}%
	printtopic.gif	Print topic	%ICON{printtopic}%
	refreshtopic.gif	Refresh topic	%ICON{refreshtopic}%
	newtopic.gif	New topic	%ICON{newtopic}%
	edittopic.gif	Edit topic	%ICON{edittopic}%
	save.gif	Save	%ICON{save}%
	attachfile.gif	Attach file	%ICON{attachfile}%
	download.gif	Download	%ICON{download}%
	trash.gif	Trash	%ICON{trash}%
	searchtopic.gif	Search topic	%ICON{searchtopic}%
	search-small.gif	Small search button, 13x13	<img src="%ICONURL{search-small}%" width="13" height="13" alt="Search" border="0" />
	topicbacklinks.gif	Topic back-links	%ICON{topicbacklinks}%
	topicdiffs.gif	Topic difference	%ICON{topicdiffs}%
	statistics.gif	Statistics	%ICON{statistics}%
	index.gif	Index	%ICON{index}%
	indexlist.gif	Index list	%ICON{indexlist}%
	cachetopic.gif	Cache topic	%ICON{cachetopic}%
	folder.gif	Folder	%ICON{folder}%

Person, group, access icons

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

Changes, notification icons

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

Status, flag, LED, tag icons

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

Navigation icons

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

Interface icons

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

TWiki icons

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

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

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

Usage (extended)

There are several other ways to put an image in a topic.

Shorthand notation:

In People.TWikiPreferences set a variable to an ICON, for example:

  * Set H = %ICON{help}%

Now you can use the icon by writing %H%

For extended use, check out Plugins.SmiliesPlugin that uses a different short hand than %VARIABLES%.

Full path:

In any topic, write %PUBURL%/%TWIKIWEB%/TWikiDocGraphics/help.gif to show

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

Related Topics: TWikiSkins, DeveloperDocumentationCategory, AdminDocumentationCategory

Contributors: Most icons on this page were originally designed by Main.PeterThoeny. All icons were recreated by Main.ArthurClemens, except for led-color icons, dot graph and line graph images.