TWiki Documentation Graphics and Filetype icons

This is the TWiki 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 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...
	attachfile.gif	Attach file	%ICON{attachfile}%
	cachetopic.gif	Cache topic	%ICON{cachetopic}%
	download.gif	Download	%ICON{download}%
	edittopic.gif	Edit topic	%ICON{edittopic}%
	folder.gif	Folder	%ICON{folder}%
	index.gif	Index	%ICON{index}%
	indexlist.gif	Index list	%ICON{indexlist}%
	newtopic.gif	New topic	%ICON{newtopic}%
	printtopic.gif	Print topic	%ICON{printtopic}%
	refreshtopic.gif	Refresh topic	%ICON{refreshtopic}%
	save.gif	Save	%ICON{save}%
	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" />
	statistics.gif	Statistics	%ICON{statistics}%
	topicbacklinks.gif	Topic back-links	%ICON{topicbacklinks}%
	topicdiffs.gif	Topic difference	%ICON{topicdiffs}%
	trash.gif	Trash	%ICON{trash}%
	viewtopic.gif	View topic	%ICON{viewtopic}%

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}%
	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 Main.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 TWiki: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://wiki.di.uminho.pt/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif
and that will get rendered as:

Related Topics: TWikiSkins, DeveloperDocumentationCategory, AdminDocumentationCategory

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