NOTE: This is a DistributionDocument. Please help maintain high quality documentation: This is a wiki, please fix the documentation if you find errors or incomplete content. Put questions and suggestions concerning the documentation of this topic in the comments section below. Use the Support web for problems you are having using TWiki.

TWiki Documentation Graphics

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

To show the icon, write this in any topic:

• <img src="%PUBURLPATH%/%TWIKIWEB%/TWikiDocGraphics/note.gif" alt="" width="16" height="16" />
• %PUBURL%/%TWIKIWEB%/TWikiDocGraphics/note.gif
  

Note: Click on an icon in the table below to change above example

Icon	File Name	Comment
	help.gif	Help (write %H% or %Q%)
	note.gif	Note
	bubble.gif	Speech bubble
	tip.gif	Tip / Idea (write %I% or %T%)
	warning.gif	Warning / Important (write %X%)
	stop.gif	Stop
	car.gif	Car
	carparking.gif	Car parking
	target.gif	Blue target
	starred.gif	Red star, highlight (write %S%)
	stargold.gif	Gold star, favorites
	gear.gif	Gear
	wrench.gif	Wrench
	pencil.gif	Refactor / Edit (write %P%)
	flag.gif	Small flag
	unchecked.gif	Unchecked box
	checked.gif	Checked box
	choice-yes.gif	Yes / Done (write %Y%)
	choice-no.gif	No
	choice-cancel.gif	Cancel
	minus.gif	Minus in a circle
	plus.gif	Plus in a circle
	updated.gif	UPDATED, 56x8 (write %U%)
	new.gif	NEW, 28x8 (write %N%)
	todo.gif	TODO, 40x8
	done.gif	DONE, 40x8
	closed.gif	CLOSED, 42x12
	more.gif	More arrow, 42x12
	detail.gif	Detail arrow, 47x12
	hand.gif	Pointing hand
	arrowleft.gif	Arrow red left
	arrowright.gif	Arrow red right (write %M%)
	arrowup.gif	Arrow red up
	arrowdown.gif	Arrow red down
	arrowbleft.gif	Arrow blue left
	arrowbright.gif	Arrow blue right
	arrowbup.gif	Arrow blue up
	arrowbdown.gif	Arrow blue down
	arrowdot.gif	Meet here (arrows to red dot)
	go_start.gif	Go start
	go_fb.gif	Go fast back
	go_back.gif	Go back
	go_forward.gif	Go forward
	go_ff.gif	Go fast forward
	go_end.gif	Go end
	wip.gif	Work in progress
	rfc.gif	Request for comments
	days.gif	Days
	hourglass.gif	Hour glass
	watch.gif	Watch
	globe.gif	Globe
	home.gif	Home
	building.gif	Building
	group.gif	Group
	person.gif	Person
	persons.gif	Persons
	lock.gif	Lock
	folder.gif	Folder
	lockfolder.gif	Locked folder
	lockfoldergray.gif	Locked folder, gray
	locktopic.gif	Locked topic
	locktopicgray.gif	Locked topic, gray
	refreshtopic.gif	Refresh topic
	viewtopic.gif	View topic
	edittopic.gif	Edit topic
	topicdiffs.gif	Topic difference
	topicbacklinks.gif	Topic back-links
	newtopic.gif	New topic
	searchtopic.gif	Search topic
	filter.gif	Filter
	sort.gif	Sort
	trash.gif	Trash
	statistics.gif	Statistics
	index.gif	Index
	indexlist.gif	Index list
	cachetopic.gif	Cache topic
	printtopic.gif	Print topic
	attachfile.gif	Attach file
	download.gif	Download
	save.gif	Save
	notify.gif	Notify
	mail.gif	Mail
	changes.gif	Changes
	recentchanges.gif	Recent changes
	changes-small.gif	Recent changes, 15x9
	rss-feed.gif	RSS feed, 36x14
	rss-small.gif	RSS feed, 15x9
	xml-feed.gif	XML feed, 36x14
	xml-small.gif	XML feed, 15x9
	led-gray.gif	Gray small LED
	led-red.gif	Red small LED
	led-orange.gif	Orange small LED
	led-yellow.gif	Yellow small LED
	led-green.gif	Green small LED
	led-aqua.gif	Aqua small LED
	led-blue.gif	Blue small LED
	led-purple.gif	Purple small LED
	empty.gif	Empty transparent 16x16 spacer
	line_ud.gif	Line graph up-down
	line_lr.gif	Line graph left-right
	line_udlr.gif	Line graph up-down-left-right
	line_ur.gif	Line graph up-right
	line_rd.gif	Line graph right-down
	line_ld.gif	Line graph left-down
	line_ul.gif	Line graph up-left
	line_udr.gif	Line graph up-down-right
	line_lrd.gif	Line graph left-right-down
	line_udl.gif	Line graph up-down-left
	line_ulr.gif	Line graph up-left-right
	dot_ud.gif	Dot graph up-down
	dot_lr.gif	Dot graph left-right
	dot_udlr.gif	Dot graph up-down-left-right
	dot_ur.gif	Dot graph up-right
	dot_rd.gif	Dot graph right-down
	dot_ld.gif	Dot graph left-down
	dot_ul.gif	Dot graph up-left
	dot_udr.gif	Dot graph up-down-right
	dot_lrd.gif	Dot graph left-right-down
	dot_udl.gif	Dot graph up-down-left
	dot_ulr.gif	Dot graph up-left-right

Note: Click on an icon to see how to use it

This is one way to create a library of common icons, accessible through user-defined TWikiVariables set in WebPreferences, or in TWikiPreferences for site-wide use. There are other approaches as well:

• TWiki's FileAttachments show their own icons for many different file types. As documented in TWikiVariables, write %ICON{"pdf"}% to show the icon
• The TWiki:Plugins/SmiliesPlugin, using a different short hand than %VARIABLES%, may be worth checking out for extended use
• The TWiki:Plugins/RenderListPlugin renders bullet lists with icons

-- TWiki:Main.PeterThoeny - 12 Feb 2005
-- TWiki:Main.MikeMannix - 16 May 2002

Comments & Questions about this Distribution Document Topic

Usage?

Hey Mike, I saw you adding these things on recently - looks nice...

We've done similar things with some of our webs, but rather than having lots of entries on the WebPreferences page, we tend to do this instead:

• Set PICTURE = http://twiki.org/p/pub/TWiki/WebDiagrams

Which we can then use like this:

• %PICTURE%/some-random-picture.gif
  

That way you can simply add more piccies as time goes by without having to add in more and more shortcuts...

-- TWikiGuest - 28 Sep 2001

This is a minor experiment, for a very few frequently used symbols. By defining each icon individually in WebPreferences, they can have really short variable names:

• %X% = - eXclamation [ALERT!]
• %H% = - [HELP]
• %T% = - [TIP]

The % signs are a bit awkward. The SmiliesPlugin, using colons - : - should be easier to type. Just substitute or add icons... Dunno if performance or short-term compatibility are current considerations. Hope the TopicVarsPlugin is friendly, works well. Being able to create libraries including variables, self-contained in topics would be great. -- MikeMannix - 16 May 2002

-- MikeMannix - 27 Dec 2001

Can we get rid of the 8831 gif? I also removed the "Set TLS" variable declaration in my WebPreferences.

-- JonReid - 09 Feb 2002

• It's not the prettiest thing. And the top edge highlight makes it look less than straight... I respectfully requested "Powered by TWiki" logos in the hi-rez face, 88x31, 48x48, couple others. Actually, an even smaller logo than 88x31 to place in the bottom (right side?) would be a good way to brand every page in a way that people probably wouldn't DELETE. BTW, why don't you like it? -- MikeMannix - 16 May 2002

Im a little confused why we would want multiple ways to include icons. Why not reuse the SmiliesPlugin and simply add the new icons there. Personally I think :help: is easier to remember than %H%, especially when you have multiple icons...

-- JohnCavanaugh - 01 Jul 2002

I don't think the SmiliesPlugin is part of the standard distribution. As long as that is the case, it makes sense to provide an alternate means. But you're right, for those who have installed SmiliesPlugin, I think it is easier.

-- JonReid - 12 Aug 2002

I've put the code necessary for including each image in a topic, including the shorthand variables where available.

This would be so much easier with ParameterizedVariables. Then I could do something like %GRAPHIC{"stargold" width="16" height="16"}% and it would be expanded to <img src="%PUBURL%/TWiki/TWikiDocGraphics/stargold.gif" alt="stargold.gif" width="16" height="16" />. In fact since the width and height of most graphics are 16x16 they could be the default values and they would onlt need to be specified if they are different, i.e. %GRAPHIC{"stargold"}% and %GRAPHIC{"todo" width="40" height="8"}%.

-- SamHasler - 11 Feb 2005

Good idea to show how to use the images. I changed it a bit since the table was getting rather wide, especially with the pattern skin's sidebar. The icons are now clickable, when clicked, the example on top changes to the selected icon. The example also shows preferences shortcuts, example .

-- PeterThoeny - 13 Feb 2005

Hey, that's great!

I wasn't happy with it myself and thought it might get changed back. That's a neat solution.

I fixed the dot image links, their examples were showing the line images.

-- SamHasler - 13 Feb 2005

Well spotted, thanks Sam!

-- PeterThoeny - 13 Feb 2005

Added variable %C% to TWikiPreferences for the closed icon TravisBarker add at his request.

-- SamHasler - 26 Aug 2005

I have redone the CLOSED image as a GIF which is somewhat better readable.

-- PeterThoeny - 26 Aug 2005

And I've moved the shortcut from TWikiPreferences to Codev.WebPreferences.

-- SamHasler - 26 Aug 2005

I think this powered bottons colection can be useful for some people (and it can use the Dakar %ICON{...}% variable):

-- AurelioAHeckert - 08 Nov 2005

The official logo for 80x15 size is T-logo-80x15.gif,

-- PeterThoeny - 08 Nov 2005

The official released version of this page (TWikiDocGraphics) pointed me to this page for updating the docs ... but this seems to be very outdated. I wanted to contribute a Visio icon (vsd.gif) that is missing, but I don't know where to post it.

-- PankajPant - 25 May 2007

create a new bug report and attach the icon there, please. we'll need the bug report in order to check the icon into svn should it be accepted. thanks!

-- WillNorris - 25 May 2007

Pankaj, post it here and I can twikinize it and take it into the icon collection.

-- ArthurClemens - 25 May 2007

Here you go:

-- PankajPant - 28 May 2007

I have added your icon to the svn repository.

-- ArthurClemens - 17 Jun 2007