1 # <a name="TWiki Documentation Graphics"></a> TWiki Documentation Graphics
3 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.
5 There are other approaches as well:
7 - In any topic, write `%PUBURL%/%TWIKIWEB%/%TOPIC%/help.gif` to show the ![help.gif](http://www.dementia.org/twiki//view/TWiki/%TOPIC%/help.gif) icon
8 - The TWiki:Plugins/TopicVarsPlugin lets you set variables in any topic, not just in [[WebPreferences]], for use in the same topic
9 - The TWiki:Plugins/SmiliesPlugin, using a different short hand than `%VARIABLES%`, may be worth checking out for extended use
10 - **_Related:_** TWiki's [[FileAttachments]] show their own icons for many different file types. As documented in [[TWikiVariables]], write `%ICON{"pdf"}%` to show the <img src="http://www.dementia.org/twiki//view/Main/WebHome/pdf.gif" width="16" height="16" alt="pdf" /> icon
12 In this example, %TOPIC% - this topic - acts as the icon library. Graphics are uploaded and displayed. Then, the paths are set in [[TWiki.TWikiPreferences#DocGraphics|TWiki/TWikiPreferences#DocGraphics]] for site-wide access. You can also create individual library pages in each web. And you don't have to restrict yourself to graphics: Preferences Variables can include text and links to any type of file.
14 <table border="1" cellpadding="0" cellspacing="0">
16 <th bgcolor="#99CCCC"><strong> Icon </strong></th>
17 <th bgcolor="#99CCCC"><strong> File Name </strong></th>
18 <th bgcolor="#99CCCC"><strong> Comment </strong></th>
21 <td align="center"><img alt="help.gif" height="16" src="http://www.dementia.org/twiki//view/help.gif" width="16" /></td>
22 <td><code>help.gif</code></td>
26 <td align="center"><img alt="note.gif" height="16" src="http://www.dementia.org/twiki//view/note.gif" width="16" /></td>
27 <td><code>note.gif</code></td>
31 <td align="center"><img alt="bubble.gif" height="16" src="http://www.dementia.org/twiki//view/bubble.gif" width="16" /></td>
32 <td><code>bubble.gif</code></td>
33 <td> Speech bubble </td>
36 <td align="center"><img alt="tip.gif" height="16" src="http://www.dementia.org/twiki//view/tip.gif" width="16" /></td>
37 <td><code>tip.gif</code></td>
41 <td align="center"><img alt="warning.gif" height="16" src="http://www.dementia.org/twiki//view/warning.gif" width="16" /></td>
42 <td><code>warning.gif</code></td>
43 <td> Warning / Important </td>
46 <td align="center"><img alt="stop.gif" height="16" src="http://www.dementia.org/twiki//view/stop.gif" width="16" /></td>
47 <td><code>stop.gif</code></td>
51 <td align="center"><img alt="target.gif" height="16" src="http://www.dementia.org/twiki//view/target.gif" width="16" /></td>
52 <td><code>target.gif</code></td>
53 <td> Blue target </td>
56 <td align="center"><img alt="pencil.gif" height="16" src="http://www.dementia.org/twiki//view/pencil.gif" width="16" /></td>
57 <td><code>pencil.gif</code></td>
58 <td> Refactor / Edit </td>
61 <td align="center"><img alt="choice-yes.gif" height="16" src="http://www.dementia.org/twiki//view/choice-yes.gif" width="16" /></td>
62 <td><code>choice-yes.gif</code></td>
66 <td align="center"><img alt="choice-no.gif" height="16" src="http://www.dementia.org/twiki//view/choice-no.gif" width="16" /></td>
67 <td><code>choice-no.gif</code></td>
71 <td align="center"><img alt="choice-cancel.gif" height="16" src="http://www.dementia.org/twiki//view/choice-cancel.gif" width="16" /></td>
72 <td><code>choice-cancel.gif</code></td>
76 <td align="center"><img alt="updated.gif" height="8" src="http://www.dementia.org/twiki//view/updated.gif" width="56" /></td>
77 <td><code>updated.gif</code></td>
81 <td align="center"><img alt="new.gif" height="8" src="http://www.dementia.org/twiki//view/new.gif" width="28" /></td>
82 <td><code>new.gif</code></td>
86 <td align="center"><img alt="starred.gif" height="16" src="http://www.dementia.org/twiki//view/starred.gif" width="16" /></td>
87 <td><code>starred.gif</code></td>
88 <td> Highlight (positive) </td>
91 <td align="center"><img alt="stargold.gif" height="16" src="http://www.dementia.org/twiki//view/stargold.gif" width="16" /></td>
92 <td><code>stargold.gif</code></td>
93 <td> Favorites (gold star) </td>
96 <td align="center"><img alt="arrowleft.gif" height="16" src="http://www.dementia.org/twiki//view/arrowleft.gif" width="16" /></td>
97 <td><code>arrowleft.gif</code></td>
98 <td> Arrow red left </td>
101 <td align="center"><img alt="arrowright.gif" height="16" src="http://www.dementia.org/twiki//view/arrowright.gif" width="16" /></td>
102 <td><code>arrowright.gif</code></td>
103 <td> Arrow red right </td>
106 <td align="center"><img alt="arrowup.gif" height="16" src="http://www.dementia.org/twiki//view/arrowup.gif" width="16" /></td>
107 <td><code>arrowup.gif</code></td>
108 <td> Arrow red up </td>
111 <td align="center"><img alt="arrowdown.gif" height="16" src="http://www.dementia.org/twiki//view/arrowdown.gif" width="16" /></td>
112 <td><code>arrowdown.gif</code></td>
113 <td> Arrow red down </td>
116 <td align="center"><img alt="arrowbleft.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbleft.gif" width="16" /></td>
117 <td><code>arrowbleft.gif</code></td>
118 <td> Arrow blue left </td>
121 <td align="center"><img alt="arrowbright.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbright.gif" width="16" /></td>
122 <td><code>arrowbright.gif</code></td>
123 <td> Arrow blue right </td>
126 <td align="center"><img alt="arrowbup.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbup.gif" width="16" /></td>
127 <td><code>arrowbup.gif</code></td>
128 <td> Arrow blue up </td>
131 <td align="center"><img alt="arrowbdown.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbdown.gif" width="16" /></td>
132 <td><code>arrowbdown.gif</code></td>
133 <td> Arrow blue down </td>
136 <td align="center"><img alt="arrowdot.gif" height="16" src="http://www.dementia.org/twiki//view/arrowdot.gif" width="16" /></td>
137 <td><code>arrowdot.gif</code></td>
138 <td> Meet here (arrows to red dot) </td>
141 <td align="center"><img alt="go_start.gif" height="16" src="http://www.dementia.org/twiki//view/go_start.gif" width="16" /></td>
142 <td><code>go_start.gif</code></td>
146 <td align="center"><img alt="go_fb.gif" height="16" src="http://www.dementia.org/twiki//view/go_fb.gif" width="16" /></td>
147 <td><code>go_fb.gif</code></td>
148 <td> Go fast back </td>
151 <td align="center"><img alt="go_back.gif" height="16" src="http://www.dementia.org/twiki//view/go_back.gif" width="16" /></td>
152 <td><code>go_back.gif</code></td>
156 <td align="center"><img alt="go_forward.gif" height="16" src="http://www.dementia.org/twiki//view/go_forward.gif" width="16" /></td>
157 <td><code>go_forward.gif</code></td>
158 <td> Go forward </td>
161 <td align="center"><img alt="go_ff.gif" height="16" src="http://www.dementia.org/twiki//view/go_ff.gif" width="16" /></td>
162 <td><code>go_ff.gif</code></td>
163 <td> Go fast forward </td>
166 <td align="center"><img alt="go_end.gif" height="16" src="http://www.dementia.org/twiki//view/go_end.gif" width="16" /></td>
167 <td><code>go_end.gif</code></td>
171 <td align="center"><img alt="wip.gif" height="16" src="http://www.dementia.org/twiki//view/wip.gif" width="16" /></td>
172 <td><code>wip.gif</code></td>
173 <td> Work in progress </td>
176 <td align="center"><img alt="rfc.gif" height="16" src="http://www.dementia.org/twiki//view/rfc.gif" width="16" /></td>
177 <td><code>rfc.gif</code></td>
178 <td> Request for comments </td>
181 <td align="center"><img alt="days.gif" height="16" src="http://www.dementia.org/twiki//view/days.gif" width="16" /></td>
182 <td><code>days.gif</code></td>
186 <td align="center"><img alt="hourglass.gif" height="16" src="http://www.dementia.org/twiki//view/hourglass.gif" width="16" /></td>
187 <td><code>hourglass.gif</code></td>
188 <td> Hour glass </td>
191 <td align="center"><img alt="watch.gif" height="16" src="http://www.dementia.org/twiki//view/watch.gif" width="16" /></td>
192 <td><code>watch.gif</code></td>
196 <td align="center"><img alt="globe.gif" height="16" src="http://www.dementia.org/twiki//view/globe.gif" width="16" /></td>
197 <td><code>globe.gif</code></td>
201 <td align="center"><img alt="lock.gif" height="16" src="http://www.dementia.org/twiki//view/lock.gif" width="16" /></td>
202 <td><code>lock.gif</code></td>
206 <td align="center"><img alt="folder.gif" height="16" src="http://www.dementia.org/twiki//view/folder.gif" width="16" /></td>
207 <td><code>folder.gif</code></td>
211 <td align="center"><img alt="lockfolder.gif" height="16" src="http://www.dementia.org/twiki//view/lockfolder.gif" width="16" /></td>
212 <td><code>lockfolder.gif</code></td>
213 <td> Locked folder </td>
216 <td align="center"><img alt="lockfoldergray.gif" height="16" src="http://www.dementia.org/twiki//view/lockfoldergray.gif" width="16" /></td>
217 <td><code>lockfoldergray.gif</code></td>
218 <td> Locked folder, gray </td>
221 <td align="center"><img alt="locktopic.gif" height="16" src="http://www.dementia.org/twiki//view/locktopic.gif" width="16" /></td>
222 <td><code>locktopic.gif</code></td>
223 <td> Locked topic </td>
226 <td align="center"><img alt="locktopicgray.gif" height="16" src="http://www.dementia.org/twiki//view/locktopicgray.gif" width="16" /></td>
227 <td><code>locktopicgray.gif</code></td>
228 <td> Locked topic, gray </td>
231 <td align="center"><img alt="refreshtopic.gif" height="16" src="http://www.dementia.org/twiki//view/refreshtopic.gif" width="16" /></td>
232 <td><code>refreshtopic.gif</code></td>
233 <td> Refresh topic </td>
236 <td align="center"><img alt="viewtopic.gif" height="16" src="http://www.dementia.org/twiki//view/viewtopic.gif" width="16" /></td>
237 <td><code>viewtopic.gif</code></td>
238 <td> View topic </td>
241 <td align="center"><img alt="edittopic.gif" height="16" src="http://www.dementia.org/twiki//view/edittopic.gif" width="16" /></td>
242 <td><code>edittopic.gif</code></td>
243 <td> Edit topic </td>
246 <td align="center"><img alt="topicdiffs.gif" height="16" src="http://www.dementia.org/twiki//view/topicdiffs.gif" width="16" /></td>
247 <td><code>topicdiffs.gif</code></td>
248 <td> Topic difference </td>
251 <td align="center"><img alt="topicbacklinks.gif" height="16" src="http://www.dementia.org/twiki//view/topicbacklinks.gif" width="16" /></td>
252 <td><code>topicbacklinks.gif</code></td>
253 <td> Topic back-links </td>
256 <td align="center"><img alt="newtopic.gif" height="16" src="http://www.dementia.org/twiki//view/newtopic.gif" width="16" /></td>
257 <td><code>newtopic.gif</code></td>
261 <td align="center"><img alt="searchtopic.gif" height="16" src="http://www.dementia.org/twiki//view/searchtopic.gif" width="16" /></td>
262 <td><code>searchtopic.gif</code></td>
263 <td> Search topic </td>
266 <td align="center"><img alt="printtopic.gif" height="16" src="http://www.dementia.org/twiki//view/printtopic.gif" width="16" /></td>
267 <td><code>printtopic.gif</code></td>
268 <td> Print topic </td>
271 <td align="center"><img alt="attachfile.gif" height="16" src="http://www.dementia.org/twiki//view/attachfile.gif" width="16" /></td>
272 <td><code>attachfile.gif</code></td>
273 <td> Attach file </td>
276 <td align="center"><img alt="home.gif" height="16" src="http://www.dementia.org/twiki//view/home.gif" width="16" /></td>
277 <td><code>home.gif</code></td>
281 <td align="center"><img alt="recentchanges.gif" height="16" src="http://www.dementia.org/twiki//view/recentchanges.gif" width="16" /></td>
282 <td><code>recentchanges.gif</code></td>
283 <td> Recent changes </td>
286 <td align="center"><img alt="changes.gif" height="16" src="http://www.dementia.org/twiki//view/changes.gif" width="16" /></td>
287 <td><code>changes.gif</code></td>
291 <td align="center"><img alt="notify.gif" height="16" src="http://www.dementia.org/twiki//view/notify.gif" width="16" /></td>
292 <td><code>notify.gif</code></td>
296 <td align="center"><img alt="mail.gif" height="16" src="http://www.dementia.org/twiki//view/mail.gif" width="16" /></td>
297 <td><code>mail.gif</code></td>
301 <td align="center"><img alt="trash.gif" height="16" src="http://www.dementia.org/twiki//view/trash.gif" width="16" /></td>
302 <td><code>trash.gif</code></td>
306 <td align="center"><img alt="empty.gif" height="16" src="http://www.dementia.org/twiki//view/empty.gif" width="16" /></td>
307 <td><code>empty.gif</code></td>
308 <td> Empty transparent 16x16 spacer </td>
311 <td align="center"><img alt="line_ud.gif" height="16" src="http://www.dementia.org/twiki//view/line_ud.gif" width="16" /></td>
312 <td><code>line_ud.gif</code></td>
313 <td> Line graph up-down </td>
316 <td align="center"><img alt="line_lr.gif" height="16" src="http://www.dementia.org/twiki//view/line_lr.gif" width="16" /></td>
317 <td><code>line_lr.gif</code></td>
318 <td> Line graph left-right </td>
321 <td align="center"><img alt="line_udlr.gif" height="16" src="http://www.dementia.org/twiki//view/line_udlr.gif" width="16" /></td>
322 <td><code>line_udlr.gif</code></td>
323 <td> Line graph up-down-left-right </td>
326 <td align="center"><img alt="line_ur.gif" height="16" src="http://www.dementia.org/twiki//view/line_ur.gif" width="16" /></td>
327 <td><code>line_ur.gif</code></td>
328 <td> Line graph up-right </td>
331 <td align="center"><img alt="line_rd.gif" height="16" src="http://www.dementia.org/twiki//view/line_rd.gif" width="16" /></td>
332 <td><code>line_rd.gif</code></td>
333 <td> Line graph right-down </td>
336 <td align="center"><img alt="line_ld.gif" height="16" src="http://www.dementia.org/twiki//view/line_ld.gif" width="16" /></td>
337 <td><code>line_ld.gif</code></td>
338 <td> Line graph left-down </td>
341 <td align="center"><img alt="line_ul.gif" height="16" src="http://www.dementia.org/twiki//view/line_ul.gif" width="16" /></td>
342 <td><code>line_ul.gif</code></td>
343 <td> Line graph up-left </td>
346 <td align="center"><img alt="line_udr.gif" height="16" src="http://www.dementia.org/twiki//view/line_udr.gif" width="16" /></td>
347 <td><code>line_udr.gif</code></td>
348 <td> Line graph up-down-right </td>
351 <td align="center"><img alt="line_lrd.gif" height="16" src="http://www.dementia.org/twiki//view/line_lrd.gif" width="16" /></td>
352 <td><code>line_lrd.gif</code></td>
353 <td> Line graph left-right-down </td>
356 <td align="center"><img alt="line_udl.gif" height="16" src="http://www.dementia.org/twiki//view/line_udl.gif" width="16" /></td>
357 <td><code>line_udl.gif</code></td>
358 <td> Line graph up-down-left </td>
361 <td align="center"><img alt="line_ulr.gif" height="16" src="http://www.dementia.org/twiki//view/line_ulr.gif" width="16" /></td>
362 <td><code>line_ulr.gif</code></td>
363 <td> Line graph up-left-right </td>
366 <td align="center"><img alt="dot_ud.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ud.gif" width="16" /></td>
367 <td><code>dot_ud.gif</code></td>
368 <td> Dot graph up-down </td>
371 <td align="center"><img alt="dot_lr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_lr.gif" width="16" /></td>
372 <td><code>dot_lr.gif</code></td>
373 <td> Dot graph left-right </td>
376 <td align="center"><img alt="dot_udlr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_udlr.gif" width="16" /></td>
377 <td><code>dot_udlr.gif</code></td>
378 <td> Dot graph up-down-left-right </td>
381 <td align="center"><img alt="dot_ur.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ur.gif" width="16" /></td>
382 <td><code>dot_ur.gif</code></td>
383 <td> Dot graph up-right </td>
386 <td align="center"><img alt="dot_rd.gif" height="16" src="http://www.dementia.org/twiki//view/dot_rd.gif" width="16" /></td>
387 <td><code>dot_rd.gif</code></td>
388 <td> Dot graph right-down </td>
391 <td align="center"><img alt="dot_ld.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ld.gif" width="16" /></td>
392 <td><code>dot_ld.gif</code></td>
393 <td> Dot graph left-down </td>
396 <td align="center"><img alt="dot_ul.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ul.gif" width="16" /></td>
397 <td><code>dot_ul.gif</code></td>
398 <td> Dot graph up-left </td>
401 <td align="center"><img alt="dot_udr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_udr.gif" width="16" /></td>
402 <td><code>dot_udr.gif</code></td>
403 <td> Dot graph up-down-right </td>
406 <td align="center"><img alt="dot_lrd.gif" height="16" src="http://www.dementia.org/twiki//view/dot_lrd.gif" width="16" /></td>
407 <td><code>dot_lrd.gif</code></td>
408 <td> Dot graph left-right-down </td>
411 <td align="center"><img alt="dot_udl.gif" height="16" src="http://www.dementia.org/twiki//view/dot_udl.gif" width="16" /></td>
412 <td><code>dot_udl.gif</code></td>
413 <td> Dot graph up-down-left </td>
416 <td align="center"><img alt="dot_ulr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ulr.gif" width="16" /></td>
417 <td><code>dot_ulr.gif</code></td>
418 <td> Dot graph up-left-right </td>
422 -- TWiki:Main.PeterThoeny - 23 Mar 2004 %BR% -- TWiki:Main.MikeMannix - 16 May 2002