TWiki Documentation Graphics and Filetype icons

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

Usage

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

• Shorthand notation: %ICON{help}% results in:
  • Note that ICON{} assumes an image of 16 x 16 pixels
• Really shorthand notation: in TWikiPreferences set a variable to an ICON, for example:
    * Set H = %ICON{help}%
  Now you can use the icon by writing %H%.
• There are other approaches as well:
  • In any topic, write %PUBURL%/%TWIKIWEB%/TWikiDocGraphics/help.gif to show the icon.
    
  • 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.
  • The TWiki:Plugins.SmiliesPlugin, using a different short hand than %VARIABLES%, may be worth checking out for extended use
• To create an image with a link, write: [[WebHome][%ICON{home}%]] to get:
• To get the full URL of the icon, use ICONURL: %ICONURL{"toggleopen"}% gets you: https://tomshiro.org/foswiki/pub/System/DocumentGraphics/toggleopen.png (if you paste that in a topic you will get: )
• Note: Most images have 16x16 pixels. For those images you can use the %ICON{}% syntax. Use an HTML img tag with %ICONURL{}% for image with other sizes.

Related Topics: TWikiSkins, DeveloperDocumentationCategory, AdminDocumentationCategory

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

Graphics

Document icons

	File Name	Description	Write...
	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}%
	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	%W%, %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 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}%

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

	monospace.gif	Monospace	%ICON{monospace}%
	proportional.gif	Proportional	%ICON{proportional}%
	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" />

Block graphics

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

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

TWiki icons

	File Name	Description	Write...
	twiki.gif	TWiki logo	%ICON{twiki}%