TWiki Documentation Graphics and File Type Icons

All icons at a glance

Usage

Write this:	To get:	Raw view:
%ICON{help}%		<img src="/twiki/pub/TWiki/TWikiDocGraphics/help.gif" .... />
%ICON{ "tip" format="$url" }%		https://dune-uk.pp.rl.ac.uk/twiki/pub/TWiki/TWikiDocGraphics/tip.gif

Documentation graphics

Documentation graphics defined in this topic are listed in the tables below. Each image is defined by a table row containing these cells: %ICON{}% variable; usage example of icon variable; description shown in image title; file type (gif or png); size (width x height); aliases (if any).

Document icons

	Variable	Description	Type	Size	Alias
	%ICON{action-item}%	Action item	gif	16x16

	%ICON{wip}%	Work in progress, under construction	gif	16x16
	%ICON{wrench}%	Wrench, tools	gif	16x16
	%ICON{ying-yang}%	Ying Yang	gif	16x16

Topic, file, folder icons

	Variable	Description	Type	Size	Alias
	%ICON{viewtopic}%	View topic	gif	16x16
	%ICON{printtopic}%	Print topic	gif	16x16
	%ICON{refreshtopic}%	Refresh topic	gif	16x16
	%ICON{newtopic}%	New topic	gif	16x16
	%ICON{edittopic}%	Edit topic	gif	16x16
	%ICON{save}%	Save	gif	16x16
	%ICON{attachfile}%	Attach file	gif	16x16
	%ICON{download}%	Download	gif	16x16
	%ICON{trash}%	Trash	gif	16x16
	%ICON{searchtopic}%	Search topic	gif	16x16
	%ICON{search-small}%	Small search button	gif	13x13
	%ICON{topicbacklinks}%	Topic back-links	gif	16x16
	%ICON{topicdiffs}%	Topic difference	gif	16x16
	%ICON{statistics}%	Statistics	gif	16x16
	%ICON{index}%	Index	gif	16x16
	%ICON{indexlist}%	Index list	gif	16x16
	%ICON{cachetopic}%	Cache topic	gif	16x16
	%ICON{folder}%	Folder	gif	16x16
	%ICON{table}%	Table	gif	16x16
	%ICON{edittable}%	Edit table	gif	16x16
	%ICON{uweb-bo}%	UWEB (Universal Wiki Edit Button), blue, outline	gif	16x16
	%ICON{uweb-bo12}%	UWEB, blue, outline, small	gif	12x12
	%ICON{uweb-g}%	UWEB, green (default)	gif	16x16
	%ICON{uweb-gs}%	UWEB, green, square	gif	16x16
	%ICON{uweb-m12}%	UWEB, black, small	gif	12x12
	%ICON{uweb-o}%	UWEB, orange	gif	16x16
	%ICON{uweb-o12}%	UWEB, orange, small	gif	12x12
	%ICON{uweb-o14}%	UWEB, orange, small	gif	14x14
	%ICON{uweb-oo}%	UWEB, orange, outline	gif	16x16
	%ICON{uweb-os}%	UWEB, orange, square	gif	16x16

Person, group, access icons

	Variable	Description	Type	Size	Alias
	%ICON{person}%	Person	gif	16x16
	%ICON{persona}%	Persona	gif	16x16
	%ICON{persons}%	Persons	gif	16x16
	%ICON{group}%	Group	gif	16x16
	%ICON{useradd}%	Add user	gif	16x16
	%ICON{useractive}%	Active user	gif	16x16
	%ICON{userinactive}%	Inactive user	gif	16x16
	%ICON{building}%	Building	gif	16x16
	%ICON{buildings}%	Buildings	gif	16x16
	%ICON{login}%	Login	gif	16x16
	%ICON{logout}%	Log out	gif	16x16
	%ICON{key}%	Key	gif	16x16
	%ICON{lock}%	Lock	gif	16x16
	%ICON{lock-open}%	Lock, unlocked	gif	16x16
	%ICON{locktopic}%	Locked topic	gif	16x16
	%ICON{locktopicgray}%	Locked topic, gray	gif	16x16
	%ICON{lockfolder}%	Locked folder	gif	16x16
	%ICON{lockfoldergray}%	Locked folder, gray	gif	16x16

Social networking, bookmarks

	Variable	Description	Type	Size	Alias
	%ICON{bitly}%	Bit.ly	gif	16x16
	%ICON{blogger}%	Blogger	gif	16x16
	%ICON{delicious}%	Delicious	gif	16x16
	%ICON{digg}%	Digg	gif	16x16
	%ICON{facebook}%	Facebook	gif	16x16
	%ICON{google}%	Google	gif	16x16
	%ICON{google-plus}%	Google Plus	gif	16x16
	%ICON{linkedin}%	LinkedIn	gif	16x16
	%ICON{reddit}%	Reddit	gif	16x16
	%ICON{stumbleupon}%	Stumbleupon	gif	16x16
	%ICON{technorati}%	Technorati	gif	16x16
	%ICON{twitter}%	Twitter	gif	16x16
	%ICON{windows}%	Windows	gif	16x16
	%ICON{youtube}%	YouTube	gif	16x16

Changes, notification icons

	Variable	Description	Type	Size	Alias
	%ICON{changes}%	Changes	gif	16x16
	%ICON{changes-small}%	Changes	gif	13x13
	%ICON{recentchanges}%	Recent changes	gif	16x16
	%ICON{mail}%	Mail	gif	16x16
	%ICON{notify}%	Notify	gif	16x16
	%ICON{feed}%	RSS feed, rounded corners	gif	16x16
	%ICON{rss}%	RSS feed, gray box	gif	16x16
	%ICON{rss-feed}%	RSS feed	gif	36x14
	%ICON{rss-small}%	RSS feed, text	gif	16x16
	%ICON{xml-feed}%	XML feed	gif	36x14
	%ICON{xml-small}%	XML feed	gif	16x16

Status, flag, LED, tag icons

	Variable	Description	Type	Size	Alias
	%ICON{new}%, %N%	NEW	gif	30x16
	%ICON{todo}%	TODO	gif	37x16
	%ICON{updated}%, %U%	UPDATED	gif	55x16
	%ICON{done}%	DONE	gif	37x16
	%ICON{closed}%	CLOSED	gif	48x16
	%ICON{processing}%	Processing	gif	16x16
	%ICON{processing-bg}%	Processing, transparent	gif	16x16
	%ICON{processing-32}%	Processing	gif	32x32
	%ICON{processing-32-bg}%	Processing, transparent	gif	32x32
	%ICON{processing-bar}%	Processing bar	gif	92x16
	%ICON{processing-bar-wide}%	Processing bar, wide	gif	124x12
	%ICON{minus}%	Minus	gif	16x16
	%ICON{plus}%	Plus	gif	16x16
	%ICON{close}%	Close	gif	16x16
	%ICON{reload}%	Reload	gif	16x16
	%ICON{reload-green}%	Reload green	gif	16x16
	%ICON{choice-cancel}%	Cancel	gif	16x16
	%ICON{choice-no}%	No	gif	16x16
	%ICON{choice-yes}%, %Y%	Yes / Done	gif	16x16
	%ICON{unchecked}%	Unchecked checkbox	gif	16x16
	%ICON{checked}%	Checked checkbox	gif	16x16
	%ICON{unchecked-square}%	Unchecked checkbox, square	gif	16x16
	%ICON{checked-square}%	Checked checkbox, square	gif	16x16
	%ICON{unchecked-round}%	Unchecked checkbox, round	gif	16x16
	%ICON{checked-round}%	Checked checkbox, round	gif	16x16
	%ICON{flag}%	Flag	gif	16x16
	%ICON{flag-gray}%	Gray flag	gif	16x16
	%ICON{flag-gray-small}%	Small gray flag	gif	13x13

	%ICON{led-aqua}%	Aqua led	gif	16x16
	%ICON{led-blue}%	Blue led	gif	16x16
	%ICON{led-gray}%	Gray led	gif	16x16
	%ICON{led-green}%	Green led	gif	16x16
	%ICON{led-orange}%	Orange led	gif	16x16
	%ICON{led-purple}%	Purple led	gif	16x16
	%ICON{led-red}%	Red led	gif	16x16
	%ICON{led-yellow}%	Yellow led	gif	16x16
	%ICON{led-box-aqua}%	Aqua led	gif	16x16
	%ICON{led-box-blue}%	Blue led	gif	16x16
	%ICON{led-box-gray}%	Gray led	gif	16x16
	%ICON{led-box-green}%	Green led	gif	16x16
	%ICON{led-box-orange}%	Orange led	gif	16x16
	%ICON{led-box-purple}%	Purple led	gif	16x16
	%ICON{led-box-red}%	Red led	gif	16x16
	%ICON{led-box-yellow}%	Yellow led	gif	16x16
	%ICON{led-cup-aqua}%	Aqua LED	gif	16x16
	%ICON{led-cup-blue}%	Blue LED	gif	16x16
	%ICON{led-cup-gray}%	Gray LED	gif	16x16
	%ICON{led-cup-green}%	Green LED	gif	16x16
	%ICON{led-cup-green-plus}%	Green plus LED	gif	16x16
	%ICON{led-cup-orange}%	Orange LED	gif	16x16
	%ICON{led-cup-purple}%	Purple LED	gif	16x16
	%ICON{led-cup-red}%	Red LED	gif	16x16
	%ICON{led-cup-red-close}%	Red close LED	gif	16x16
	%ICON{led-cup-yellow}%	Yellow LED	gif	16x16
	%ICON{led-cup-yellow-minus}%	Yellow minus LED	gif	16x16
	%ICON{tag}%	Tag	gif	16x16
	%ICON{tag-blue}%	Blue tag	gif	16x16
	%ICON{tag-brown}%	Brown tag	gif	16x16
	%ICON{tag-green}%	Green tag	gif	16x16
	%ICON{tag-magenta}%	Magenta tag	gif	16x16
	%ICON{tag-orange}%	Orange tag	gif	16x16
	%ICON{tag-purple}%	Purple tag	gif	16x16
	%ICON{tag-red}%	Red tag	gif	16x16
	%ICON{tag-yellow}%	Yellow tag	gif	16x16

Navigation icons

	Variable	Description	Type	Size	Alias
	%ICON{home}%	Home	gif	16x16
	%ICON{sitemap}%	Site map	gif	16x16
	%ICON{sitetree}%	Site tree	gif	16x16
	%ICON{topicbacklinks}%	Topic back-links	gif	16x16
	%ICON{arrowdot}%	Meet here	gif	16x16
	%ICON{external}%	External site	gif	16x16
	%ICON{external-link}%	External link	gif	13x12
	%ICON{left}%	Left	gif	16x16
	%ICON{right}%	Right	gif	16x16
	%ICON{up}%	Up	gif	16x16
	%ICON{down}%	Down	gif	16x16
	%ICON{arrowbleft}%	Arrow blue left	gif	16x16
	%ICON{arrowbright}%	Arrow blue right	gif	16x16
	%ICON{arrowbup}%	Arrow blue up	gif	16x16
	%ICON{arrowbdown}%	Arrow blue down	gif	16x16
	%ICON{arrowleft}%	Arrow left	gif	16x16
	%ICON{arrowright}%, %M%	Arrow right	gif	16x16
	%ICON{arrowup}%	Arrow up	gif	16x16
	%ICON{arrowdown}%	Arrow down	gif	16x16
	%ICON{go_start}%	Go to start	gif	16x16
	%ICON{go_fb}%	Go fast back	gif	16x16
	%ICON{go_back}%	Go back	gif	16x16
	%ICON{go_forward}%	Go forward	gif	16x16
	%ICON{go_ff}%	Go fast forward	gif	16x16
	%ICON{go_end}%	Go to end	gif	16x16
	%ICON{menu-down}%	Menu dropdown	gif	14x16
	%ICON{menu-right}%	Menu arrow right	gif	10x16

Interface icons

	Variable	Description	Type	Size	Alias
	%ICON{monospace}%	Monospace	gif	16x16
	%ICON{proportional}%	Proportional	gif	16x16

	%ICON{tablesortdiamond}%	Sort table	gif	11x13
	%ICON{tablesortdown}%	Sort table descending	gif	11x13
	%ICON{tablesortup}%	Sort table ascending	gif	11x13
	%ICON{toggleopen}%	Open toggle, Twisty open toggle	gif	16x16
	%ICON{toggleclose}%	Close toggle, Twisty close toggle	gif	16x16
	%ICON{toggleopen-small}%	Open toggle, Twisty open toggle	gif	16x16
	%ICON{toggleclose-small}%	Close toggle, Twisty close toggle	gif	16x16
	%ICON{toggleopen-mini}%	Open toggle, Twisty open toggle	gif	7x9
	%ICON{toggleclose-mini}%	Close toggle, Twisty close toggle	gif	7x9
	%ICON{toggleopenleft}%	Open toggle, Twisty open toggle	gif	16x16
	%ICON{toggleopenleft-small}%	Open toggle, Twisty open toggle	gif	16x16
	%ICON{remove}%	Remove button, small	gif	12x12
	%ICON{web-bg}%	Web background	gif	16x16
	%ICON{web-bg-small}%	Web background	gif	13x13

TWiki icons

	Variable	Description	Type	Size	Alias
	%ICON{addon}%	Add-on	gif	16x16
	%ICON{application}%	Application	gif	16x16
	%ICON{code}%	Code	gif	16x16
	%ICON{package}%	Package	gif	16x16
	%ICON{plugin}%	Plugin	gif	16x16
	%ICON{tag}%	Tag	gif	16x16
	%ICON{searchpackage}%	Search package	gif	16x16
	%ICON{searchtag}%	Search tag	gif	16x16
	%ICON{skin}%	Skin	gif	16x16
	%ICON{twiki}%	TWiki logo	gif	16x16
	%ICON{twiki-alert}%	TWiki Alert	gif	16x16
	%ICON{twiki-gray}%	TWiki logo, gray scale	gif	16x16
	%ICON{twiki-help}%	TWiki help	gif	16x16
	%ICON{twiki-irc}%	TWiki Internet Relay Chat	gif	16x16

Block graphics

	Variable	Description	Type	Size	Alias
	%ICON{line_ld}%	Line graph left-down	gif	16x16
	%ICON{line_lr}%	Line graph left-right	gif	16x16
	%ICON{line_lrd}%	Line graph left-right-down	gif	16x16
	%ICON{line_rd}%	Line graph right-down	gif	16x16
	%ICON{line_ud}%	Line graph up-down	gif	16x16
	%ICON{line_udl}%	Line graph up-down-left	gif	16x16
	%ICON{line_udlr}%	Line graph up-down-left-right	gif	16x16
	%ICON{line_udr}%	Line graph up-down-right	gif	16x16
	%ICON{line_ul}%	Line graph up-left	gif	16x16
	%ICON{line_ulr}%	Line graph up-left-right	gif	16x16
	%ICON{line_ur}%	Line graph up-right	gif	16x16
	%ICON{line_ur_gray}%	Line graph up-right, gray	gif	16x16
	%ICON{dot_ld}%	Dot graph left-down	gif	16x16
	%ICON{dot_lr}%	Dot graph left-right	gif	16x16
	%ICON{dot_lrd}%	Dot graph left-right-down	gif	16x16
	%ICON{dot_rd}%	Dot graph right-down	gif	16x16
	%ICON{dot_ud}%	Dot graph up-down	gif	16x16
	%ICON{dot_udl}%	Dot graph up-down-left	gif	16x16
	%ICON{dot_udlr}%	Dot graph up-down-left-right	gif	16x16
	%ICON{dot_udr}%	Dot graph up-down-right	gif	16x16
	%ICON{dot_ul}%	Dot graph up-left	gif	16x16
	%ICON{dot_ulr}%	Dot graph up-left-right	gif	16x16
	%ICON{dot_ur}%	Dot graph up-right	gif	16x16

	%ICON{empty}%	Empty transparent 16x16 spacer	gif	16x16
	%ICON{parent_gray}%	Parent arrow	gif	16x16

Filetype icons

Filetype icons are used by the attachment table and are seldom used in topics. Write %ICON{pdf}% to show the icon.

	Variable	Description	Type	Size	Alias
	%ICON{as}%	ActionScript	gif	16x16
	%ICON{air}%	Adobe Air	gif	16x16
	%ICON{bat}%	MS-DOS batch file	gif	16x16	cmd
	%ICON{bmp}%	Bitmap	gif	16x16	ico, xbm
	%ICON{c}%	C source code file	gif	16x16	cpp
	%ICON{css}%	Cascading Style Sheet file	gif	16x16
	%ICON{dll}%	Dynamic Linked Library; Microsoft application file	gif	16x16
	%ICON{doc}%	Microsoft Word file	gif	16x16	rtf
	%ICON{else}%	Unknown file format	gif	16x16
	%ICON{eml}%	Microsoft Outlook e-mail file	gif	16x16	email
	%ICON{exe}%	Microsoft Executable file	gif	16x16
	%ICON{fla}%	Macromedia Flash Movie	gif	16x16
	%ICON{fon}%	Windows bitmapped font file	gif	16x16
	%ICON{gif}%	GIF	gif	16x16	pcx
	%ICON{h}%	Header file	gif	16x16
	%ICON{hlp}%	Standard help file	gif	16x16
	%ICON{html}%	HTML	gif	16x16	htm, shtml
	%ICON{java}%	Java source code file	gif	16x16	class
	%ICON{jpg}%	JPEG	gif	16x16	jfif, jpe, jpeg
	%ICON{js}%	JavaScript	gif	16x16	jse
	%ICON{mdb}%	Microsoft Access database File	gif	16x16	mda, mde
	%ICON{mov}%	Quicktime movie	gif	16x16	avi, m1v, mp4, mpa, mpe, mpeg, mpegv, mpg, mpv, mpv2, vbs
	%ICON{mp3}%	MP3	gif	16x16
	%ICON{pdf}%	PDF	gif	16x16
	%ICON{pl}%	Perl source code file	gif	16x16	perl, pm
	%ICON{png}%	PNG	gif	16x16	tif, tiff
	%ICON{ppt}%	PowerPoint	gif	16x16	pot, ppa, pps, pwz
	%ICON{ps}%	Postscript	gif	16x16
	%ICON{psd}%	Photoshop document	gif	16x16
	%ICON{py}%	Python source code file	gif	16x16
	%ICON{ram}%	RealAudio	gif	16x16	ra, rm
	%ICON{reg}%	Registry file	gif	16x16
	%ICON{sh}%	Unix shell script	gif	16x16
	%ICON{sniff}%	sniff	gif	16x16
	%ICON{svg}%	SVG (Scalable Vector Graphics)	gif	16x16
	%ICON{swf}%	SWF (Shockwave Flash)	gif	16x16
	%ICON{ttf}%	True Type font	gif	16x16	pfm
	%ICON{txt}%	Text	gif	16x16	inf, ini, text
	%ICON{vector}%	Generic vector	gif	16x16
	%ICON{vsd}%	Visio document	gif	16x16
	%ICON{wav}%	Waveform sound file	gif	16x16	abs, aif, aiff, au, mid, mp2, mp3, mpega, rmi
	%ICON{wri}%	Windows Write	gif	16x16
	%ICON{xls}%	Microsoft Excel Spreadsheet	gif	16x16	xla, xlb, xlc, xld, xlk, xll, xlm, xlt, xlw
	%ICON{xml}%	XML	gif	16x16
	%ICON{xsl}%	XSL (XML style sheet)	gif	16x16
	%ICON{zip}%	Compressed Zip archive	gif	16x16	arc, arj, b64, bhx, cab, hqx, lzh, mim, tar, taz, tgz, tz, z

Extended Usage

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

ICON Variable

Parameter:	Description:	Default:
"name"	Name of icon	required
format="..."	Format of icon. Supported variables (using %ICON{"person"}% as example): • $name - name of icon (person) • $type - type of icon (gif) • $filename - icon filename (person.gif) • $web - web where icon is defined (TWiki) • $topic - topic where icon is defined (TWikiDocGraphics) • $description - icon description (Person) • $width - width of icon (16) • $height - height of icon (16) • $img - full img tag of icon (<img src="... />) • $info - img tag with usage info in title (<img src="... />) • $url - URL of icon (http://example.com/pub/TWiki/TWikiDocGraphics/person.gif) • $urlpath - URL path of icon (/pub/TWiki/TWikiDocGraphics/person.gif)	format="$img"
default="else"	Alternate icon if named icon is not defined	default="$name"

Note: For the icon name, only the file type portion is used if a full URL or file path is specified. For example, a pdf icon is shown for icon name /home/sweet/home.pdf.

Examples:

• %ICON{"flag-gray"}% returns:
• %ICON{"pdf"}% returns:
• %ICON{"smile.pdf"}% returns:
• %ICON{"/dont/you/dare/smile.pdf"}% returns:
• %ICON{"http://twiki.org/doc/xhtml.xsl"}% returns:
• %ICON{"bubble" format="$description icon is defined in [[$web.$topic]]"}% returns: Speech bubble icon is defined in TWiki.TWikiDocGraphics

ICONURL Variable

Whereas the ICON variable returns an HTML img tag by default, the ICONURL variable returns just the URL of a doc graphic image. For example, %ICONURL{"thumbs-up"}% is a shortcut for %ICON{"thumbs-up" format="$url"}%, returning https://dune-uk.pp.rl.ac.uk/twiki/pub/TWiki/TWikiDocGraphics/thumbs-up.gif, which renders as .

ICONURLPATH Variable

The ICONURLPATH variable returns just the URL path of a doc graphic image. For example, %ICONURLPATH{"thumbs-up"}% is a shortcut for %ICON{"thumbs-up" format="$urlpath"}%, rendering as /twiki/pub/TWiki/TWikiDocGraphics/thumbs-up.gif.

Icon shortcuts with preferences settings

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

  * Set H = %ICON{help}%

Now you can use the icon by writing %H%

Emoticons in SmiliesPlugin

The SmiliesPlugin uses a different shorthand than %VARIABLES%. For example, :-) renders as

Links with icons

To create a link with an image, 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

List all icons

Format:	List all icons, including aliases:	List unique icons only:	Example:
Name list, comma-space delimited:	%ICON{list:all-names}%	%ICON{list:unique-names}%	addon, air, airplane, ...
Icon list:	%ICON{list:all-icons}%	%ICON{list:unique-icons}%	...
Info list, icons with usage info:	%ICON{list:all-info}%	%ICON{list:unique-info}%	...
Detailed list, table format:	%ICON{list:all-table}%	%ICON{list:unique-table}%	(similar to table format above)

Hint: The $LIST...() functions of the SpreadSheetPlugin can be used to manipulate a name list. Example:

%ICON{list:unique-icons}%

How to add doc graphic images

Refresh icon cache

TWiki caches icons for performance. The cache gets updated automatically when you update TWikiDocGraphics topics or TWikiPreferences topics. You can force a cache refresh with %ICON{action:refresh-cache}%.

License, Copyright and Work

This TWiki Documentation Graphics library is Copyright © 2007-2025 TWiki Contributors. Most icons on this page are designed by TWiki:Main.PeterThoeny. Many of the original icons were recreated by TWiki:Main.ArthurClemens.

The TWiki Documentation Graphics library by TWiki.org is licensed under the GPL 2.0 (GNU General Public License).

Distribution and use of this TWiki Documentation Graphics library is permitted with proper attribution pointing to the work at http://twiki.org/cgi-bin/view/TWiki/TWikiDocGraphics using one of the two aforementioned licenses.