| 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: http://wiki.arch.ethz.ch/asterix/pub/TWiki/TWikiDocGraphics/toggleopen.gif (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}% |
| 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" /> |
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}% |
| 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}% |
| toggleclose.gif | Close toggle, Twisty close toggle | %ICON{toggleclose}% |
| toggleclose-small.gif | Close toggle, Twisty close toggle | %ICON{toggleclose-small}% |
| toggleopen.gif | Open toggle, Twisty open toggle | %ICON{toggleopen}% |
| toggleopen-small.gif | Open toggle, Twisty open toggle | %ICON{toggleopen-small}% |
| toggleopenleft.gif | Open toggle, Twisty open toggle | %ICON{toggleopenleft}% |
| toggleopenleft-small.gif | Open toggle, Twisty open toggle | %ICON{toggleopenleft-small}% |
Block graphics
| File Name | Description | Write... |
| 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}% |
| 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}% |
| empty.gif | Empty transparent 16x16 spacer | %ICON{empty}% |
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}% |
|