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 icon filename path, call ICONPATH: %ICONPATH{"toggleopen"}% gets you: http://www.dementia.org/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif (if you paste that in a topic you will get:

Related Topics: TWikiSkins, DeveloperDocumentationCategory, AdminDocumentationCategory

The icons on this page were created by TWiki:Main.ArthurClemens - except for the Dot graph and Line graph images.

Graphics table

	File Name	Description	Write...
	arrowbdown.gif	Arrow blue down	%ICON{arrowbdown}%
	arrowbleft.gif	Arrow blue left	%ICON{arrowbleft}%
	arrowbright.gif	Arrow blue right	%ICON{arrowbright}%
	arrowbup.gif	Arrow blue up	%ICON{arrowbup}%
	arrowdot.gif	Meet here (arrows to red dot)	%ICON{arrowdot}%
	arrowdown.gif	Arrow down	%ICON{arrowdown}%
	arrowleft.gif	Arrow left	%ICON{arrowleft}%
	arrowright.gif	Arrow right	%ICON{arrowright}%
	arrowup.gif	Arrow up	%ICON{arrowup}%
	attachfile.gif	Attach file	%ICON{attachfile}%
	bubble.gif	Speech bubble	%ICON{bubble}%
	cachetopic.gif	Cache topic	%ICON{cachetopic}%
	changes.gif	Changes	%ICON{changes}%
	changes-small.gif	Changes (small), 13x13	<img src="%ICONPATH{changes-small}%" width="13" height="13" alt="Changes" border="0" />
	choice-cancel.gif	Cancel	%ICON{choice-cancel}%
	choice-no.gif	No	%ICON{choice-no}%
	choice-yes.gif	Yes / Done	%ICON{choice-yes}%
	closed.gif	CLOSED, 48x16	<img src="%ICONPATH{closed}%" width="48" height="16" alt="Closed" border="0" />
	days.gif	Days, Calendar	%ICON{days}%
	done.gif	DONE, 37x16	<img src="%ICONPATH{done}%" width="37" height="16" alt="Done" border="0" />
	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}%
	edittopic.gif	Edit topic	%ICON{edittopic}%
	empty.gif	Empty transparent 16x16 spacer	%ICON{empty}%
	filter.gif	Filter	%ICON{filter}%
	flag.gif	Flag	%ICON{flag}%
	flag-gray.gif	Gray flag	%ICON{flag-gray}%
	flag-gray-small.gif	Small gray flag, 13x13	<img src="%ICONPATH{flag-gray-small}%" width="13" height="13" alt="Flag" border="0" />
	folder.gif	Folder	%ICON{folder}%
	gear.gif	Gear	%ICON{gear}%
	globe.gif	Globe	%ICON{globe}%
	go_back.gif	Go back	%ICON{go_back}%
	go_end.gif	Go to end	%ICON{go_end}%
	go_fb.gif	Go fast back	%ICON{go_fb}%
	go_ff.gif	Go fast forward	%ICON{go_ff}%
	go_forward.gif	Go forward	%ICON{go_forward}%
	go_start.gif	Go to start	%ICON{go_start}%
	group.gif	Group	%ICON{group}%
	hand.gif	Pointing hand	%ICON{hand}%
	help.gif	Help	%ICON{help}%
	home.gif	Home	%ICON{home}%
	hourglass.gif	Hour glass (clock)	%ICON{hourglass}%
	index.gif	Index	%ICON{index}%
	indexlist.gif	Index list	%ICON{indexlist}%
	info.gif	Info	%ICON{info}%
	key.gif	Key	%ICON{key}%
	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}%
	right.gif	Right	%ICON{right}%
	left.gif	Left	%ICON{left}%
	up.gif	Up	%ICON{up}%
	down.gif	Down	%ICON{down}%
	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}%
	lock.gif	Lock	%ICON{lock}%
	lockfolder.gif	Locked folder	%ICON{lockfolder}%
	lockfoldergray.gif	Locked folder, gray	%ICON{lockfoldergray}%
	locktopic.gif	Locked topic	%ICON{locktopic}%
	locktopicgray.gif	Locked topic, gray	%ICON{locktopicgray}%
	logout.gif	Log out	%ICON{logout}%
	mail.gif	Mail	%ICON{mail}%
	minus.gif	Minus	%ICON{minus}%
	more.gif	Read more	%ICON{more}%
	more-small.gif	Read more, 13x13	<img src="%ICONPATH{more-small}%" width="13" height="13" alt="Read more" border="0" />
	move.gif	Move	%ICON{move}%
	new.gif	NEW	%ICON{new}%
	newtopic.gif	New topic	%ICON{newtopic}%
	note.gif	Note	%ICON{note}%
	notify.gif	Notify	%ICON{notify}%
	pencil.gif	Pencil / Refactor / Edit	%ICON{pencil}%
	person.gif	Person	%ICON{person}%
	persons.gif	Persons	%ICON{persons}%
	plus.gif	Plus	%ICON{plus}%
	printtopic.gif	Print topic	%ICON{printtopic}%
	recentchanges.gif	Recent changes	%ICON{recentchanges}%
	refreshtopic.gif	Refresh topic	%ICON{refreshtopic}%
	rfc.gif	Request for comments	%ICON{rfc}%
	rss-feed.gif	RSS feed, 36x14	<img src="%ICONPATH{rss-feed}%" width="36" height="14" alt="RSS feed" border="0" />
	rss-small.gif	RSS feed	%ICON{rss-small}%
	searchtopic.gif	Search topic	%ICON{searchtopic}%
	search-small.gif	Small search button, 13x13	<img src="%ICONPATH{search-small}%" width="13" height="13" alt="Search" border="0" />
	sort.gif	Sort	%ICON{sort}%
	stargold.gif	Gold star, favorites	%ICON{stargold}%
	starred.gif	Red star, highlight	%ICON{starred}%
	statistics.gif	Statistics	%ICON{statistics}%
	stop.gif	Stop	%ICON{stop}%
	target.gif	Target	%ICON{target}%
	tip.gif	Tip, idea	%ICON{tip}%
	todo.gif	TODO, 37x16	<img src="%ICONPATH{todo}%" width="37" height="16" alt="TODO" border="0" />
	toggleclose.gif	Close toggle, Twisty close toggle	%ICON{toggleclose}%
	toggleopen.gif	Open toggle, Twisty open toggle	%ICON{toggleopen}%
	topicbacklinks.gif	Topic back-links	%ICON{topicbacklinks}%
	topicdiffs.gif	Topic difference	%ICON{topicdiffs}%
	trash.gif	Trash	%ICON{trash}%
	unchecked.gif	Unchecked checkbox	%ICON{unchecked}%
	checked.gif	Checked checkbox	%ICON{checked}%
	updated.gif	UPDATED, 55x16	<img src="%ICONPATH{updated}%" width="55" height="16" alt="UPDATED" border="0" />
	viewtopic.gif	View topic	%ICON{viewtopic}%
	warning.gif	Warning, important	%ICON{warning}%
	watch.gif	Watch	%ICON{watch}%
	web-bg.gif	Web background, used in WebLeftBarWebsList	%ICON{web-bg}%
	web-bg-small.gif	Web background, 13x13	<img src="%ICONPATH{web-bg-small}%" width="13" height="13" alt="Web" border="0" />
	wip.gif	Work in progress, under construction	%ICON{wip}%
	wrench.gif	Wrench, tools	%ICON{wrench}%
	xml-feed.gif	XML feed, 36x14	<img src="%ICONPATH{xml-feed}%" width="36" height="13" alt="XML feed" border="0" />
	xml-small.gif	XML feed	%ICON{xml-small}%

File icon table

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