TWikiDocGraphics < TWiki

Tags: view all tags
---+!! TWiki Documentation Graphics and File Type Icons
<div class="twikiTocFloat">
%TOC{title="Contents:"}%
</div>
This is the TWiki Documentation Graphics library. The graphics can be used in topics and by web applications.

---++ All icons at a glance

List of unique icons defined in %CALCULATE{$SET(icontopics, $LISTIF($NOT($EXACT($item,)), $LISTEACH($IF($EXISTS($item), [[$item]], ), %ICONTOPIC%)))$GET(icontopics)}%. Hover over the icon to get icon information.

%ICON{list:unique-info}%

Total: %CALCULATE{$LISTSIZE(%ICON{list:unique-names}%)}% unique icons

---++ Usage

| *Write this:* | *To get:* | *Raw view:* |
| =%<nop>ICON{help}%= | %ICON{help}% | =%ICON{ "help" format="&lt;img src=\"$urlpath\" .... /&gt;" }%= |
| =%<nop>ICON{ "tip" format="$url" }%= | %ICON{ "tip" format="$url" }% | =%ICON{ "tip" format="$url" }%= |
| =%<nop>ICONURL{parts}%= | %ICONURL{parts}% | =%ICONURL{parts}%= |
| [[#ExtendedUsage][See extended usage below]] |||

---++ 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: =%<nop>ICON{}%= variable; usage example of icon variable; description shown in image title; file type (gif or png); size (width x height); aliases (if any).

<noautolink>
---+++ %ICON{note}% Document icons

%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5"}%
| *&nbsp;* | *Variable* | *Description* | *Type* | *Size* | *Alias* |
| %ICON{action-item}% | =%<nop>ICON{action-item}%= | Action item | gif | 16x16 |  |
| %ICON{analyze}% | =%<nop>ICON{analyze}%= | Analyze | gif | 16x16 |  |
| %ICON{airplane}% | =%<nop>ICON{airplane}%= | Airplane | gif | 16x16 |  |
| %ICON{award}% | =%<nop>ICON{award}%= | Award | gif | 16x16 |  |
| %ICON{barcode}% | =%<nop>ICON{barcode}%= | Barcode | gif | 16x16 |  |
| %ICON{bed}% | =%<nop>ICON{bed}%= | Bed | gif | 16x16 |  |
| %ICON{blank}% | =%<nop>ICON{blank}%= | Blank box | gif | 16x16 |  |
| %ICON{blank-bg}% | =%<nop>ICON{blank-bg}%= | Blank box, transparent | gif | 16x16 |  |
| %ICON{bomb}% | =%<nop>ICON{bomb}%= | Bomb | gif | 16x16 |  |
| %ICON{book}% | =%<nop>ICON{book}%= | Book | gif | 16x16 |  |
| %ICON{bridge}% | =%<nop>ICON{bridge}%= | Bridge | gif | 16x16 |  |
| %ICON{bubble}% | =%<nop>ICON{bubble}%= | Speech bubble | gif | 16x16 |  |
| %ICON{bug}% | =%<nop>ICON{bug}%= | Bug | gif | 16x16 |  |
| %ICON{calculator}% | =%<nop>ICON{calculator}%= | Calculator | gif | 16x16 |  |
| %ICON{chart-bar}% | =%<nop>ICON{chart-bar}%= | Bar chart | gif | 16x16 |  |
| %ICON{chart-pie}% | =%<nop>ICON{chart-pie}%= | Pie chart | gif | 16x16 |  |
| %ICON{clipboard}% | =%<nop>ICON{clipboard}%= | Clipboard | gif | 16x16 |  |
| %ICON{clock}% | =%<nop>ICON{clock}%= | Clock | gif | 16x16 |  |
| %ICON{color-wheel}% | =%<nop>ICON{color-wheel}%= | Color wheel | gif | 16x16 |  |
| %ICON{color-wheel-bg}% | =%<nop>ICON{color-wheel-bg}%= | Color wheel, transparent | gif | 16x16 |  |
| %ICON{comments}% | =%<nop>ICON{comments}%= | Comments | gif | 16x16 |  |
| %ICON{connections}% | =%<nop>ICON{connections}%= | Connections | gif | 16x16 |  |
| %ICON{control-panel}% | =%<nop>ICON{control-panel}%= | Control panel | gif | 16x16 |  |
| %ICON{counter}% | =%<nop>ICON{counter}%= | Counter | gif | 16x16 |  |
| %ICON{dashboard}% | =%<nop>ICON{dashboard}%= | Dashboard | gif | 16x16 |  |
| %ICON{database}% | =%<nop>ICON{database}%= | Database | gif | 16x16 |  |
| %ICON{days}% | =%<nop>ICON{days}%= | Days, Calendar | gif | 16x16 |  |
| %ICON{download}% | =%<nop>ICON{download}%= | Download | gif | 16x16 |  |
| %ICON{factory}% | =%<nop>ICON{factory}%= | Factory | gif | 16x16 |  |
| %ICON{fax}% | =%<nop>ICON{fax}%= | Fax | gif | 16x16 |  |
| %ICON{filter}% | =%<nop>ICON{filter}%= | Filter | gif | 16x16 |  |
| %ICON{first-class}% | =%<nop>ICON{first-class}%= | First class | gif | 16x16 |  |
| %ICON{food}% | =%<nop>ICON{food}%= | Food | gif | 16x16 |  |
| %ICON{gear}% | =%<nop>ICON{gear}%= | Gear | gif | 16x16 |  |
| %ICON{globe}% | =%<nop>ICON{globe}%= | Globe | gif | 16x16 |  |
| %ICON{goal}% | =%<nop>ICON{goal}%= | Goal | gif | 16x16 |  |
| %ICON{graduation}% | =%<nop>ICON{graduation}%= | Graduation | gif | 16x16 |  |
| %ICON{hand}% | =%<nop>ICON{hand}%= | Pointing hand | gif | 16x16 |  |
| %ICON{heart}% | =%<nop>ICON{heart}%= | Heart | gif | 16x16 |  |
| %ICON{help}% | =%<nop>ICON{help}%=, =%<nop>H%= | Help | gif | 16x16 |  |
| %ICON{help-close}% | =%<nop>ICON{help-close}%= | Help close | gif | 16x16 |  |
| %ICON{help-open}% | =%<nop>ICON{help-open}%= | Help open | gif | 16x16 |  |
| %ICON{help-video}% | =%<nop>ICON{help-video}%= | Help video | gif | 16x16 |  |
| %ICON{hourglass}% | =%<nop>ICON{hourglass}%= | Hourglass | gif | 16x16 |  |
| %ICON{info}% | =%<nop>ICON{info}%= | Info | gif | 16x16 |  |
| %ICON{legal}% | =%<nop>ICON{legal}%= | Legal | gif | 16x16 |  |
| %ICON{luggage}% | =%<nop>ICON{luggage}%= | Luggage | gif | 16x16 |  |
| %ICON{map}% | =%<nop>ICON{map}%= | Map | gif | 16x16 |  |
| %ICON{mechanics}% | =%<nop>ICON{mechanics}%= | Mechanics | gif | 16x16 |  |
| %ICON{megaphone}% | =%<nop>ICON{megaphone}%= | Megaphone | gif | 16x16 |  |
| %ICON{meeting}% | =%<nop>ICON{meeting}%= | Meeting | gif | 16x16 |  |
| %ICON{milestone}% | =%<nop>ICON{milestone}%= | Milestone | gif | 16x16 |  |
| %ICON{mission}% | =%<nop>ICON{mission}%= | Mission | gif | 16x16 |  |
| %ICON{mobile}% | =%<nop>ICON{mobile}%= | Mobile | gif | 16x16 |  |
| %ICON{mobile-carrier}% | =%<nop>ICON{mobile-carrier}%= | Mobile carrier | gif | 16x16 |  |
| %ICON{more}% | =%<nop>ICON{more}%= | Read more | gif | 16x16 |  |
| %ICON{more-small}% | =%<nop>ICON{more-small}%= | Read more | gif | 13x13 |  |
| %ICON{move}% | =%<nop>ICON{move}%= | Move | gif | 16x16 |  |
| %ICON{note}% | =%<nop>ICON{note}%= | Note | gif | 16x16 |  |
| %ICON{opportunity}% | =%<nop>ICON{opportunity}%= | Opportunity | gif | 16x16 |  |
| %ICON{parked}% | =%<nop>ICON{parked}%= | Parked | gif | 16x16 |  |
| %ICON{parts}% | =%<nop>ICON{parts}%= | Parts | gif | 16x16 |  |
| %ICON{pencil}% | =%<nop>ICON{pencil}%=, =%<nop>P%= | Pencil | gif | 16x16 |  |
| %ICON{phone}% | =%<nop>ICON{phone}%= | Phone | gif | 16x16 |  |
| %ICON{phone-extension}% | =%<nop>ICON{phone-extension}%= | Phone extension | gif | 16x16 |  |
| %ICON{phone-toll-free}% | =%<nop>ICON{phone-toll-free}%= | Toll-free Phone | gif | 16x16 |  |
| %ICON{photo}% | =%<nop>ICON{photo}%= | Photo | gif | 13x10 |  |
| %ICON{plug}% | =%<nop>ICON{plug}%= | Plug | gif | 16x16 |  |
| %ICON{presentation}% | =%<nop>ICON{presentation}%= | Presentation | gif | 16x16 |  |
| %ICON{process}% | =%<nop>ICON{process}%= | Process | gif | 16x16 |  |
| %ICON{profile}% | =%<nop>ICON{profile}%= | Profile | gif | 16x16 |  |
| %ICON{project}% | =%<nop>ICON{project}%= | Project | gif | 16x16 |  |
| %ICON{project-plan}% | =%<nop>ICON{project-plan}%= | Project plan | gif | 16x16 |  |
| %ICON{puzzle}% | =%<nop>ICON{puzzle}%= | Puzzle | gif | 16x16 |  |
| %ICON{qrcode}% | =%<nop>ICON{qrcode}%= | QR Code | gif | 16x16 |  |
| %ICON{question}% | =%<nop>ICON{question}%= | Question | gif | 16x16 |  |
| %ICON{quiet}% | =%<nop>ICON{quiet}%= | Quiet | gif | 16x16 |  |
| %ICON{radioactive}% | =%<nop>ICON{radioactive}%= | Radioactive | gif | 16x16 |  |
| %ICON{request}% | =%<nop>ICON{request}%= | Request | gif | 16x16 |  |
| %ICON{requirements}% | =%<nop>ICON{requirements}%= | Requirements | gif | 16x16 |  |
| %ICON{rfc}% | =%<nop>ICON{rfc}%= | Request for comments | gif | 16x16 |  |
| %ICON{roadmap}% | =%<nop>ICON{roadmap}%= | Roadmap | gif | 16x16 |  |
| %ICON{sitemap}% | =%<nop>ICON{sitemap}%= | Site map | gif | 16x16 |  |
| %ICON{sitetree}% | =%<nop>ICON{sitetree}%= | Site tree | gif | 16x16 |  |
| %ICON{shipping}% | =%<nop>ICON{shipping}%= | Shipping | gif | 16x16 |  |
| %ICON{skype}% | =%<nop>ICON{skype}%= | Skype | gif | 16x16 |  |
| %ICON{smartphone}% | =%<nop>ICON{smartphone}%= | Smartphone | gif | 16x16 |  |
| %ICON{sms}% | =%<nop>ICON{sms}%= | SMS | gif | 16x16 |  |
| %ICON{socket}% | =%<nop>ICON{socket}%= | Socket | gif | 16x16 |  |
| %ICON{sort}% | =%<nop>ICON{sort}%= | Sort | gif | 16x16 |  |
| %ICON{stargold}% | =%<nop>ICON{stargold}%= | Gold star, favorites | gif | 16x16 |  |
| %ICON{starred}% | =%<nop>ICON{starred}%=, =%<nop>S%= | Red star, highlight | gif | 16x16 |  |
| %ICON{star-full}% | =%<nop>ICON{star-full}%= | Star (full) | gif | 16x16 |  |
| %ICON{star-half}% | =%<nop>ICON{star-half}%= | Star (half) | gif | 16x16 |  |
| %ICON{star-none}% | =%<nop>ICON{star-none}%= | Star (none) | gif | 16x16 |  |
| %ICON{statistics}% | =%<nop>ICON{statistics}%= | Statistics | gif | 16x16 |  |
| %ICON{stop}% | =%<nop>ICON{stop}%= | Stop | gif | 16x16 |  |
| %ICON{strategy}% | =%<nop>ICON{strategy}%= | Strategy | gif | 16x16 |  |
| %ICON{support}% | =%<nop>ICON{support}%= | Support | gif | 16x16 |  |
| %ICON{switch}% | =%<nop>ICON{switch}%= | Switch | gif | 16x16 |  |
| %ICON{switch-off}% | =%<nop>ICON{switch-off}%= | Switch off | gif | 16x16 |  |
| %ICON{switch-on}% | =%<nop>ICON{switch-on}%= | Switch on | gif | 16x16 |  |
| %ICON{target}% | =%<nop>ICON{target}%= | Target | gif | 16x16 |  |
| %ICON{target-blue}% | =%<nop>ICON{target-blue}%= | Target - blue | gif | 16x16 |  |
| %ICON{target-gray}% | =%<nop>ICON{target-gray}%= | Target - gray | gif | 16x16 |  |
| %ICON{target-green}% | =%<nop>ICON{target-green}%= | Target - green | gif | 16x16 |  |
| %ICON{target-orange}% | =%<nop>ICON{target-orange}%= | Target - orange | gif | 16x16 |  |
| %ICON{target-red}% | =%<nop>ICON{target-red}%= | Target - red | gif | 16x16 |  |
| %ICON{tasks}% | =%<nop>ICON{tasks}%= | Tasks | gif | 16x16 |  |
| %ICON{thumbs-down}% | =%<nop>ICON{thumbs-down}%= | Thumbs-down | gif | 16x16 |  |
| %ICON{thumbs-up}% | =%<nop>ICON{thumbs-up}%= | Thumbs-up | gif | 16x16 |  |
| %ICON{tip}% | =%<nop>ICON{tip}%=, =%<nop>T%= | Tip, idea | gif | 16x16 |  |
| %ICON{toolbox}% | =%<nop>ICON{toolbox}%= | Toolbox | gif | 16x16 |  |
| %ICON{tooth}% | =%<nop>ICON{tooth}%= | Tooth | gif | 16x16 |  |
| %ICON{topmenu}% | =%<nop>ICON{topmenu}%= | Topmenu | gif | 16x16 |  |
| %ICON{traffic-light}% | =%<nop>ICON{traffic-light}%= | Traffic light | gif | 16x16 |  |
| %ICON{vcard}% | =%<nop>ICON{vcard}%= | VCard | gif | 16x16 |  |
| %ICON{video}% | =%<nop>ICON{video}%= | Video | gif | 13x10 |  |
| %ICON{vision}% | =%<nop>ICON{vision}%= | Vision | gif | 16x16 |  |
| %ICON{warning}% | =%<nop>ICON{warning}%=, =%<nop>X%= | Warning, important | gif | 16x16 |  |
| %ICON{watch}% | =%<nop>ICON{watch}%= | Watch | gif | 16x16 |  |
| %ICON{watchlist}% | =%<nop>ICON{watchlist}%= | Watchlist | gif | 16x16 |  |
| %ICON{wip}% | =%<nop>ICON{wip}%= | Work in progress, under construction | gif | 16x16 |  |
| %ICON{wrench}% | =%<nop>ICON{wrench}%= | Wrench, tools | gif | 16x16 |  |
| %ICON{ying-yang}% | =%<nop>ICON{ying-yang}%= | Ying Yang | gif | 16x16 |  |

---+++ %ICON{viewtopic}% Topic, %ICON{attachfile}% file, %ICON{folder}% folder icons

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

---+++ %ICON{person}% Person, %ICON{group}% group, %ICON{lock}% access icons

%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5"}%
| *&nbsp;* | *Variable* | *Description* | *Type* | *Size* | *Alias* |
| %ICON{person}% | =%<nop>ICON{person}%= | Person | gif | 16x16 |  |
| %ICON{persona}% | =%<nop>ICON{persona}%= | Persona | gif | 16x16 |  |
| %ICON{persons}% | =%<nop>ICON{persons}%= | Persons | gif | 16x16 |  |
| %ICON{group}% | =%<nop>ICON{group}%= | Group | gif | 16x16 |  |
| %ICON{delegate}% | =%<nop>ICON{delegate}%= | Delegate | gif | 16x16 |  |
| %ICON{useradd}% | =%<nop>ICON{useradd}%= | Add user | gif | 16x16 |  |
| %ICON{useractive}% | =%<nop>ICON{useractive}%= | Active user | gif | 16x16 |  |
| %ICON{userinactive}% | =%<nop>ICON{userinactive}%= | Inactive user | gif | 16x16 |  |
| %ICON{building}% | =%<nop>ICON{building}%= | Building | gif | 16x16 |  |
| %ICON{buildings}% | =%<nop>ICON{buildings}%= | Buildings | gif | 16x16 |  |
| %ICON{login}% | =%<nop>ICON{login}%= | Login | gif | 16x16 |  |
| %ICON{logout}% | =%<nop>ICON{logout}%= | Log out | gif | 16x16 |  |
| %ICON{key}% | =%<nop>ICON{key}%= | Key | gif | 16x16 |  |
| %ICON{lock}% | =%<nop>ICON{lock}%= | Lock | gif | 16x16 |  |
| %ICON{lock-open}% | =%<nop>ICON{lock-open}%= | Lock, unlocked | gif | 16x16 |  |
| %ICON{locktopic}% | =%<nop>ICON{locktopic}%= | Locked topic | gif | 16x16 |  |
| %ICON{locktopicgray}% | =%<nop>ICON{locktopicgray}%= | Locked topic, gray | gif | 16x16 |  |
| %ICON{lockfolder}% | =%<nop>ICON{lockfolder}%= | Locked folder | gif | 16x16 |  |
| %ICON{lockfoldergray}% | =%<nop>ICON{lockfoldergray}%= | Locked folder, gray | gif | 16x16 |  |

---+++ %ICON{facebook}% Social networking, %ICON{stumbleupon}% bookmarks

%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5"}%
| *&nbsp;* | *Variable* | *Description* | *Type* | *Size* | *Alias* |
| %ICON{bitly}% | =%<nop>ICON{bitly}%= | Bit.ly | gif | 16x16 |  |
| %ICON{blogger}% | =%<nop>ICON{blogger}%= | Blogger | gif | 16x16 |  |
| %ICON{delicious}% | =%<nop>ICON{delicious}%= | Delicious | gif | 16x16 |  |
| %ICON{digg}% | =%<nop>ICON{digg}%= | Digg | gif | 16x16 |  |
| %ICON{facebook}% | =%<nop>ICON{facebook}%= | Facebook | gif | 16x16 |  |
| %ICON{google}% | =%<nop>ICON{google}%= | Google | gif | 16x16 |  |
| %ICON{google-plus}% | =%<nop>ICON{google-plus}%= | Google Plus | gif | 16x16 |  |
| %ICON{linkedin}% | =%<nop>ICON{linkedin}%= | LinkedIn | gif | 16x16 |  |
| %ICON{reddit}% | =%<nop>ICON{reddit}%= | Reddit | gif | 16x16 |  |
| %ICON{stumbleupon}% | =%<nop>ICON{stumbleupon}%= | Stumbleupon | gif | 16x16 |  |
| %ICON{technorati}% | =%<nop>ICON{technorati}%= | Technorati | gif | 16x16 |  |
| %ICON{twitter}% | =%<nop>ICON{twitter}%= | Twitter | gif | 16x16 |  |
| %ICON{windows}% | =%<nop>ICON{windows}%= | Windows | gif | 16x16 |  |
| %ICON{youtube}% | =%<nop>ICON{youtube}%= | YouTube | gif | 16x16 |  |

---+++ %ICON{changes}% Changes, %ICON{notify}% notification icons

%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5"}%
| *&nbsp;* | *Variable* | *Description* | *Type* | *Size* | *Alias* |
| %ICON{changes}% | =%<nop>ICON{changes}%= | Changes | gif | 16x16 |  |
| %ICON{changes-small}% | =%<nop>ICON{changes-small}%= | Changes | gif | 13x13 |  |
| %ICON{recentchanges}% | =%<nop>ICON{recentchanges}%= | Recent changes | gif | 16x16 |  |
| %ICON{mail}% | =%<nop>ICON{mail}%= | Mail | gif | 16x16 |  |
| %ICON{notify}% | =%<nop>ICON{notify}%= | Notify | gif | 16x16 |  |
| %ICON{feed}% | =%<nop>ICON{feed}%= | RSS feed, rounded corners | gif | 16x16 |  |
| %ICON{rss}% | =%<nop>ICON{rss}%= | RSS feed, gray box | gif | 16x16 |  |
| %ICON{rss-feed}% | =%<nop>ICON{rss-feed}%= | RSS feed | gif | 36x14 |  |
| %ICON{rss-small}% | =%<nop>ICON{rss-small}%= | RSS feed, text | gif | 16x16 |  |
| %ICON{xml-feed}% | =%<nop>ICON{xml-feed}%= | XML feed | gif | 36x14 |  |
| %ICON{xml-small}% | =%<nop>ICON{xml-small}%= | XML feed | gif | 16x16 |  |

---+++ %ICON{choice-yes}% Status, %ICON{flag}% flag, %ICON{led-box-red}% LED, %ICON{tag-yellow}% tag icons

%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5"}%
| *&nbsp;* | *Variable* | *Description* | *Type* | *Size* | *Alias* |
| %ICON{new}% | =%<nop>ICON{new}%=, =%<nop>N%= | NEW | gif | 30x16 |  |
| %ICON{todo}% | =%<nop>ICON{todo}%= | TODO | gif | 37x16 |  |
| %ICON{updated}% | =%<nop>ICON{updated}%=, =%<nop>U%= | UPDATED | gif | 55x16 |  |
| %ICON{done}% | =%<nop>ICON{done}%= | DONE | gif | 37x16 |  |
| %ICON{closed}% | =%<nop>ICON{closed}%= | CLOSED | gif | 48x16 |  |
| %ICON{processing}% | =%<nop>ICON{processing}%= | Processing | gif | 16x16 |  |
| %ICON{processing-bg}% | =%<nop>ICON{processing-bg}%= | Processing, transparent | gif | 16x16 |  |
| %ICON{processing-32}% | =%<nop>ICON{processing-32}%= | Processing | gif | 32x32 |  |
| %ICON{processing-32-bg}% | =%<nop>ICON{processing-32-bg}%= | Processing, transparent | gif | 32x32 |  |
| %ICON{processing-bar}% | =%<nop>ICON{processing-bar}%= | Processing bar | gif | 92x16 |  |
| %ICON{processing-bar-wide}% | =%<nop>ICON{processing-bar-wide}%= | Processing bar, wide | gif | 124x12 |  |
| %ICON{minus}% | =%<nop>ICON{minus}%= | Minus | gif | 16x16 |  |
| %ICON{plus}% | =%<nop>ICON{plus}%= | Plus | gif | 16x16 |  |
| %ICON{close}% | =%<nop>ICON{close}%= | Close | gif | 16x16 |  |
| %ICON{reload}% | =%<nop>ICON{reload}%= | Reload | gif | 16x16 |  |
| %ICON{reload-green}% | =%<nop>ICON{reload-green}%= | Reload green | gif | 16x16 |  |
| %ICON{choice-cancel}% | =%<nop>ICON{choice-cancel}%= | Cancel | gif | 16x16 |  |
| %ICON{choice-no}% | =%<nop>ICON{choice-no}%= | No | gif | 16x16 |  |
| %ICON{choice-yes}% | =%<nop>ICON{choice-yes}%=, =%<nop>Y%= | Yes / Done | gif | 16x16 |  |
| %ICON{unchecked}% | =%<nop>ICON{unchecked}%= | Unchecked checkbox | gif | 16x16 |  |
| %ICON{checked}% | =%<nop>ICON{checked}%= | Checked checkbox | gif | 16x16 |  |
| %ICON{unchecked-square}% | =%<nop>ICON{unchecked-square}%= | Unchecked checkbox, square | gif | 16x16 |  |
| %ICON{checked-square}% | =%<nop>ICON{checked-square}%= | Checked checkbox, square | gif | 16x16 |  |
| %ICON{unchecked-round}% | =%<nop>ICON{unchecked-round}%= | Unchecked checkbox, round | gif | 16x16 |  |
| %ICON{checked-round}% | =%<nop>ICON{checked-round}%= | Checked checkbox, round | gif | 16x16 |  |
| %ICON{flag}% | =%<nop>ICON{flag}%= | Flag | gif | 16x16 |  |
| %ICON{flag-gray}% | =%<nop>ICON{flag-gray}%= | Gray flag | gif | 16x16 |  |
| %ICON{flag-gray-small}% | =%<nop>ICON{flag-gray-small}%= | Small gray flag | gif | 13x13 |  |
| %ICON{led-bg}% | =%<nop>ICON{led-bg}%= | Transparent LED | png | 16x16 |  |
| %ICON{led-aqua}% | =%<nop>ICON{led-aqua}%= | Aqua led | gif | 16x16 |  |
| %ICON{led-blue}% | =%<nop>ICON{led-blue}%= | Blue led | gif | 16x16 |  |
| %ICON{led-gray}% | =%<nop>ICON{led-gray}%= | Gray led | gif | 16x16 |  |
| %ICON{led-green}% | =%<nop>ICON{led-green}%= | Green led | gif | 16x16 |  |
| %ICON{led-orange}% | =%<nop>ICON{led-orange}%= | Orange led | gif | 16x16 |  |
| %ICON{led-purple}% | =%<nop>ICON{led-purple}%= | Purple led | gif | 16x16 |  |
| %ICON{led-red}% | =%<nop>ICON{led-red}%= | Red led | gif | 16x16 |  |
| %ICON{led-yellow}% | =%<nop>ICON{led-yellow}%= | Yellow led | gif | 16x16 |  |
| %ICON{led-box-aqua}% | =%<nop>ICON{led-box-aqua}%= | Aqua led | gif | 16x16 |  |
| %ICON{led-box-blue}% | =%<nop>ICON{led-box-blue}%= | Blue led | gif | 16x16 |  |
| %ICON{led-box-gray}% | =%<nop>ICON{led-box-gray}%= | Gray led | gif | 16x16 |  |
| %ICON{led-box-green}% | =%<nop>ICON{led-box-green}%= | Green led | gif | 16x16 |  |
| %ICON{led-box-orange}% | =%<nop>ICON{led-box-orange}%= | Orange led | gif | 16x16 |  |
| %ICON{led-box-purple}% | =%<nop>ICON{led-box-purple}%= | Purple led | gif | 16x16 |  |
| %ICON{led-box-red}% | =%<nop>ICON{led-box-red}%= | Red led | gif | 16x16 |  |
| %ICON{led-box-yellow}% | =%<nop>ICON{led-box-yellow}%= | Yellow led | gif | 16x16 |  |
| %ICON{led-cup-aqua}% | =%<nop>ICON{led-cup-aqua}%= | Aqua LED | gif | 16x16 |  |
| %ICON{led-cup-blue}% | =%<nop>ICON{led-cup-blue}%= | Blue LED | gif | 16x16 |  |
| %ICON{led-cup-gray}% | =%<nop>ICON{led-cup-gray}%= | Gray LED | gif | 16x16 |  |
| %ICON{led-cup-gray-close}% | =%<nop>ICON{led-cup-gray-close}%= | Gray close LED | gif | 16x16 |  |
| %ICON{led-cup-gray-minus}% | =%<nop>ICON{led-cup-gray-minus}%= | Gray minus LED | gif | 16x16 |  |
| %ICON{led-cup-gray-plus}% | =%<nop>ICON{led-cup-gray-plus}%= | Gray plus LED | gif | 16x16 |  |
| %ICON{led-cup-green}% | =%<nop>ICON{led-cup-green}%= | Green LED | gif | 16x16 |  |
| %ICON{led-cup-green-plus}% | =%<nop>ICON{led-cup-green-plus}%= | Green plus LED | gif | 16x16 |  |
| %ICON{led-cup-orange}% | =%<nop>ICON{led-cup-orange}%= | Orange LED | gif | 16x16 |  |
| %ICON{led-cup-purple}% | =%<nop>ICON{led-cup-purple}%= | Purple LED | gif | 16x16 |  |
| %ICON{led-cup-red}% | =%<nop>ICON{led-cup-red}%= | Red LED | gif | 16x16 |  |
| %ICON{led-cup-red-close}% | =%<nop>ICON{led-cup-red-close}%= | Red close LED | gif | 16x16 |  |
| %ICON{led-cup-yellow}% | =%<nop>ICON{led-cup-yellow}%= | Yellow LED | gif | 16x16 |  |
| %ICON{led-cup-yellow-minus}% | =%<nop>ICON{led-cup-yellow-minus}%= | Yellow minus LED | gif | 16x16 |  |
| %ICON{tag}% | =%<nop>ICON{tag}%= | Tag | gif | 16x16 |  |
| %ICON{tag-blue}% | =%<nop>ICON{tag-blue}%= | Blue tag | gif | 16x16 |  |
| %ICON{tag-brown}% | =%<nop>ICON{tag-brown}%= | Brown tag | gif | 16x16 |  |
| %ICON{tag-green}% | =%<nop>ICON{tag-green}%= | Green tag | gif | 16x16 |  |
| %ICON{tag-magenta}% | =%<nop>ICON{tag-magenta}%= | Magenta tag | gif | 16x16 |  |
| %ICON{tag-orange}% | =%<nop>ICON{tag-orange}%= | Orange tag | gif | 16x16 |  |
| %ICON{tag-purple}% | =%<nop>ICON{tag-purple}%= | Purple tag | gif | 16x16 |  |
| %ICON{tag-red}% | =%<nop>ICON{tag-red}%= | Red tag | gif | 16x16 |  |
| %ICON{tag-yellow}% | =%<nop>ICON{tag-yellow}%= | Yellow tag | gif | 16x16 |  |

---+++ %ICON{home}% Navigation icons

%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5"}%
| *&nbsp;* | *Variable* | *Description* | *Type* | *Size* | *Alias* |
| %ICON{home}% | =%<nop>ICON{home}%= | Home | gif | 16x16 |  |
| %ICON{sitemap}% | =%<nop>ICON{sitemap}%= | Site map | gif | 16x16 |  |
| %ICON{sitetree}% | =%<nop>ICON{sitetree}%= | Site tree | gif | 16x16 |  |
| %ICON{topicbacklinks}% | =%<nop>ICON{topicbacklinks}%= | Topic back-links | gif | 16x16 |  |
| %ICON{arrowdot}% | =%<nop>ICON{arrowdot}%= | Meet here | gif | 16x16 |  |
| %ICON{external}% | =%<nop>ICON{external}%= | External site | gif | 16x16 |  |
| %ICON{external-link}% | =%<nop>ICON{external-link}%= | External link | gif | 13x12 |  |
| %ICON{left}% | =%<nop>ICON{left}%= | Left | gif | 16x16 |  |
| %ICON{right}% | =%<nop>ICON{right}%= | Right | gif | 16x16 |  |
| %ICON{up}% | =%<nop>ICON{up}%= | Up | gif | 16x16 |  |
| %ICON{down}% | =%<nop>ICON{down}%= | Down | gif | 16x16 |  |
| %ICON{arrowbleft}% | =%<nop>ICON{arrowbleft}%= | Arrow blue left | gif | 16x16 |  |
| %ICON{arrowbright}% | =%<nop>ICON{arrowbright}%= | Arrow blue right | gif | 16x16 |  |
| %ICON{arrowbup}% | =%<nop>ICON{arrowbup}%= | Arrow blue up | gif | 16x16 |  |
| %ICON{arrowbdown}% | =%<nop>ICON{arrowbdown}%= | Arrow blue down | gif | 16x16 |  |
| %ICON{arrowleft}% | =%<nop>ICON{arrowleft}%= | Arrow left | gif | 16x16 |  |
| %ICON{arrowright}% | =%<nop>ICON{arrowright}%=, =%<nop>M%= | Arrow right | gif | 16x16 |  |
| %ICON{arrowup}% | =%<nop>ICON{arrowup}%= | Arrow up | gif | 16x16 |  |
| %ICON{arrowdown}% | =%<nop>ICON{arrowdown}%= | Arrow down | gif | 16x16 |  |
| %ICON{go_start}% | =%<nop>ICON{go_start}%= | Go to start | gif | 16x16 |  |
| %ICON{go_fb}% | =%<nop>ICON{go_fb}%= | Go fast back | gif | 16x16 |  |
| %ICON{go_back}% | =%<nop>ICON{go_back}%= | Go back | gif | 16x16 |  |
| %ICON{go_forward}% | =%<nop>ICON{go_forward}%= | Go forward | gif | 16x16 |  |
| %ICON{go_ff}% | =%<nop>ICON{go_ff}%= | Go fast forward | gif | 16x16 |  |
| %ICON{go_end}% | =%<nop>ICON{go_end}%= | Go to end | gif | 16x16 |  |
| %ICON{see-also}% | =%<nop>ICON{see-also}%= | See also | gif | 16x16 |  |
| %ICON{menu-down}% | =%<nop>ICON{menu-down}%= | Menu dropdown | gif | 14x16 |  |
| %ICON{menu-right}% | =%<nop>ICON{menu-right}%= | Menu arrow right | gif | 10x16 |  |

---+++ %ICON{toggleclose}% Interface icons

%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5"}%
| *&nbsp;* | *Variable* | *Description* | *Type* | *Size* | *Alias* |
| %ICON{monospace}% | =%<nop>ICON{monospace}%= | Monospace | gif | 16x16 |  |
| %ICON{proportional}% | =%<nop>ICON{proportional}%= | Proportional | gif | 16x16 |  |
| %ICON{pick}% | =%<nop>ICON{pick}%= | Pick | gif | 13x19 |  |
| %ICON{tablesortdiamond}% | =%<nop>ICON{tablesortdiamond}%= | Sort table | gif | 11x13 |  |
| %ICON{tablesortdown}% | =%<nop>ICON{tablesortdown}%= | Sort table descending | gif | 11x13 |  |
| %ICON{tablesortup}% | =%<nop>ICON{tablesortup}%= | Sort table ascending | gif | 11x13 |  |
| %ICON{toggleopen}% | =%<nop>ICON{toggleopen}%= | Open toggle, Twisty open toggle | gif | 16x16 |  |
| %ICON{toggleclose}% | =%<nop>ICON{toggleclose}%= | Close toggle, Twisty close toggle | gif | 16x16 |  |
| %ICON{toggleopen-small}% | =%<nop>ICON{toggleopen-small}%= | Open toggle, Twisty open toggle | gif | 16x16 |  |
| %ICON{toggleclose-small}% | =%<nop>ICON{toggleclose-small}%= | Close toggle, Twisty close toggle | gif | 16x16 |  |
| %ICON{toggleopen-mini}% | =%<nop>ICON{toggleopen-mini}%= | Open toggle, Twisty open toggle | gif | 7x9 |  |
| %ICON{toggleclose-mini}% | =%<nop>ICON{toggleclose-mini}%= | Close toggle, Twisty close toggle | gif | 7x9 |  |
| %ICON{toggleopenleft}% | =%<nop>ICON{toggleopenleft}%= | Open toggle, Twisty open toggle | gif | 16x16 |  |
| %ICON{toggleopenleft-small}% | =%<nop>ICON{toggleopenleft-small}%= | Open toggle, Twisty open toggle | gif | 16x16 |  |
| %ICON{remove}% | =%<nop>ICON{remove}%= | Remove button, small | gif | 12x12 |  |
| %ICON{web-bg}% | =%<nop>ICON{web-bg}%= | Web background | gif | 16x16 |  |
| %ICON{web-bg-small}% | =%<nop>ICON{web-bg-small}%= | Web background | gif | 13x13 |  |

---+++ %ICON{twiki}% TWiki icons

%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5"}%
| *&nbsp;* | *Variable* | *Description* | *Type* | *Size* | *Alias* |
| %ICON{addon}% | =%<nop>ICON{addon}%= | Add-on | gif | 16x16 |  |
| %ICON{application}% | =%<nop>ICON{application}%= | Application | gif | 16x16 |  |
| %ICON{code}% | =%<nop>ICON{code}%= | Code | gif | 16x16 |  |
| %ICON{package}% | =%<nop>ICON{package}%= | Package | gif | 16x16 |  |
| %ICON{plugin}% | =%<nop>ICON{plugin}%= | Plugin | gif | 16x16 |  |
| %ICON{tag}% | =%<nop>ICON{tag}%= | Tag | gif | 16x16 |  |
| %ICON{searchpackage}% | =%<nop>ICON{searchpackage}%= | Search package | gif | 16x16 |  |
| %ICON{searchtag}% | =%<nop>ICON{searchtag}%= | Search tag | gif | 16x16 |  |
| %ICON{skin}% | =%<nop>ICON{skin}%= | Skin | gif | 16x16 |  |
| %ICON{twiki}% | =%<nop>ICON{twiki}%= | TWiki logo | gif | 16x16 |  |
| %ICON{twiki-alert}% | =%<nop>ICON{twiki-alert}%= | TWiki Alert | gif | 16x16 |  |
| %ICON{twiki-gray}% | =%<nop>ICON{twiki-gray}%= | TWiki logo, gray scale | gif | 16x16 |  |
| %ICON{twiki-help}% | =%<nop>ICON{twiki-help}%= | TWiki help | gif | 16x16 |  |
| %ICON{twiki-irc}% | =%<nop>ICON{twiki-irc}%= | TWiki Internet Relay Chat | gif | 16x16 |  |

---+++ %ICON{line_ur}% Block graphics

%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5"}%
| *&nbsp;* | *Variable* | *Description* | *Type* | *Size* | *Alias* |
| %ICON{line_ld}% | =%<nop>ICON{line_ld}%= | Line graph left-down | gif | 16x16 |  |
| %ICON{line_lr}% | =%<nop>ICON{line_lr}%= | Line graph left-right | gif | 16x16 |  |
| %ICON{line_lrd}% | =%<nop>ICON{line_lrd}%= | Line graph left-right-down | gif | 16x16 |  |
| %ICON{line_rd}% | =%<nop>ICON{line_rd}%= | Line graph right-down | gif | 16x16 |  |
| %ICON{line_ud}% | =%<nop>ICON{line_ud}%= | Line graph up-down | gif | 16x16 |  |
| %ICON{line_udl}% | =%<nop>ICON{line_udl}%= | Line graph up-down-left | gif | 16x16 |  |
| %ICON{line_udlr}% | =%<nop>ICON{line_udlr}%= | Line graph up-down-left-right | gif | 16x16 |  |
| %ICON{line_udr}% | =%<nop>ICON{line_udr}%= | Line graph up-down-right | gif | 16x16 |  |
| %ICON{line_ul}% | =%<nop>ICON{line_ul}%= | Line graph up-left | gif | 16x16 |  |
| %ICON{line_ulr}% | =%<nop>ICON{line_ulr}%= | Line graph up-left-right | gif | 16x16 |  |
| %ICON{line_ur}% | =%<nop>ICON{line_ur}%= | Line graph up-right | gif | 16x16 |  |
| %ICON{line_ur_gray}% | =%<nop>ICON{line_ur_gray}%= | Line graph up-right, gray | gif | 16x16 |  |
| %ICON{dot_ld}% | =%<nop>ICON{dot_ld}%= | Dot graph left-down | gif | 16x16 |  |
| %ICON{dot_lr}% | =%<nop>ICON{dot_lr}%= | Dot graph left-right | gif | 16x16 |  |
| %ICON{dot_lrd}% | =%<nop>ICON{dot_lrd}%= | Dot graph left-right-down | gif | 16x16 |  |
| %ICON{dot_rd}% | =%<nop>ICON{dot_rd}%= | Dot graph right-down | gif | 16x16 |  |
| %ICON{dot_ud}% | =%<nop>ICON{dot_ud}%= | Dot graph up-down | gif | 16x16 |  |
| %ICON{dot_udl}% | =%<nop>ICON{dot_udl}%= | Dot graph up-down-left | gif | 16x16 |  |
| %ICON{dot_udlr}% | =%<nop>ICON{dot_udlr}%= | Dot graph up-down-left-right | gif | 16x16 |  |
| %ICON{dot_udr}% | =%<nop>ICON{dot_udr}%= | Dot graph up-down-right | gif | 16x16 |  |
| %ICON{dot_ul}% | =%<nop>ICON{dot_ul}%= | Dot graph up-left | gif | 16x16 |  |
| %ICON{dot_ulr}% | =%<nop>ICON{dot_ulr}%= | Dot graph up-left-right | gif | 16x16 |  |
| %ICON{dot_ur}% | =%<nop>ICON{dot_ur}%= | Dot graph up-right | gif | 16x16 |  |
| %ICON{node-minus}% | =%<nop>ICON{node-minus}%= | Minus node graph | gif | 16x16 |  |
| %ICON{node-minus_r}% | =%<nop>ICON{node-minus_r}%= | Minus node graph right | gif | 16x16 |  |
| %ICON{node-minus_udr}% | =%<nop>ICON{node-minus_udr}%= | Minus node graph up-down-right | gif | 16x16 |  |
| %ICON{node-minus_ur}% | =%<nop>ICON{node-minus_ur}%= | Minus node graph up-right | gif | 16x16 |  |
| %ICON{node-plus}% | =%<nop>ICON{node-plus}%= | Plus node graph | gif | 16x16 |  |
| %ICON{node-plus_r}% | =%<nop>ICON{node-plus_r}%= | Plus node graph right | gif | 16x16 |  |
| %ICON{node-plus_udr}% | =%<nop>ICON{node-plus_udr}%= | Plus node graph up-down-right | gif | 16x16 |  |
| %ICON{node-plus_ur}% | =%<nop>ICON{node-plus_ur}%= | Plus node graph up-right | gif | 16x16 |  |
| %ICON{empty}% | =%<nop>ICON{empty}%= | Empty transparent 16x16 spacer | gif | 16x16 |  |
| %ICON{parent_gray}% | =%<nop>ICON{parent_gray}%= | Parent arrow | gif | 16x16 |  |

---+++ %ICON{gif}% Filetype icons

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

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

#ExtendedUsage
---++ Extended Usage

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

---+++ ICON Variable

Use any of the doc graphics defined in %CALCULATE{$GET(icontopics)}%. The ICON variable supports these parameters:

| *Parameter:* | *Description:* | *Default:* |
| ="name"= | Name of icon | required |
| =format="..."= | Format of icon. Supported variables (using %ICON{person}% =%<nop>ICON{"person"}%= as example): %BB% =$name= - name of icon (=person=) %BB% =$type= - type of icon (=gif=) %BB% =$filename= - icon filename (=person.gif=) %BB% =$web= - web where icon is defined (=TWiki=) %BB% =$topic= - topic where icon is defined (=TWikiDocGraphics=) %BB% =$description= - icon description (=Person=) %BB% =$width= - width of icon (=16=) %BB% =$height= - height of icon (=16=) %BB% =$img= - full img tag of icon (=&lt;img src="... /&gt;=) %BB% =$info= - img tag with usage info in title (=&lt;img src="... /&gt;=) %BB% =$url= - URL of icon (=http://example.com/pub/TWiki/TWikiDocGraphics/person.gif=) %BB% =$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:*

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

---+++ 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, =%<nop>ICONURL{"thumbs-up"}%= is a shortcut for =%<nop>ICON{"thumbs-up" format="$url"}%=, returning =%ICONURL{"thumbs-up"}%=, which renders as %ICONURL{"thumbs-up"}%.

---+++ ICONURLPATH Variable

The ICONURLPATH variable returns just the URL path of a doc graphic image. For example, =%<nop>ICONURLPATH{"thumbs-up"}%= is a shortcut for =%<nop>ICON{"thumbs-up" format="$urlpath"}%=, rendering as =%ICONURLPATH{"thumbs-up"}%=.

---+++ Icon shortcuts with preferences settings

In [[%USERSWEB%.TWikiPreferences]] set a variable to an ICON, for example:

=<nop>   * Set H = %<nop>ICON{help}%=

Now you can use the icon by writing =%<nop>H%=

---+++ Emoticons in !SmiliesPlugin

The [[SmiliesPlugin]] uses a different shorthand than =<nop>%VARIABLES%=. For example, =:-)= renders as :-)

---+++ Links with icons

To create a link with an image, write:%BR%
=[<nop>[%HOMETOPIC%][%<nop>ICON{home}% Home]]= to get: [[%HOMETOPIC%][%ICON{home}% Home]]

To get rid of the underline under the space, write: %BR%
=[<nop>[%HOMETOPIC%][%<nop>ICON{home}%]] [<nop>[%HOMETOPIC%][Home]]= to get: [[%HOMETOPIC%][%ICON{home}%]] [[%HOMETOPIC%][Home]]

---+++ List all icons

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

%T% __Hint:__ The =$LIST...()= functions of the SpreadSheetPlugin can be used to manipulate a name list. Example:
<verbatim>
%CALCULATE{$LISTJOIN($sp, $LISTEACH($NOP(%)ICON{$item}$NOP(%), %ICON{list:unique-names}%))}%
</verbatim>
Is equivalent to:
<verbatim>
%ICON{list:unique-icons}%
</verbatim>

---++ How to add doc graphic images

Additional doc graphic images can be defined. Do not add them to this topic because the modifications will be lost on the next TWiki upgrade. Instead add them to %CALCULATE{$IF($EXISTS(%USERSWEB%.SiteDocGraphics), $SET(usericontopic, [[%USERSWEB%.SiteDocGraphics]]), $SET(usericontopic, [[%SCRIPTURL{edit}%/%USERSWEB%/SiteDocGraphics?templatetopic=%SYSTEMWEB%.TWikiDocGraphicsTemplate;topicparent=none][%USERSWEB%.SiteDocGraphics]]))$GET(usericontopic)}%.

__Note:__ Documentation graphics are defined in %CALCULATE{$GET(icontopics)}%. The list of documentation graphics topics is defined by the ICONTOPIC setting in [[%SYSTEMWEB%.TWikiPreferences]] and can be overloaded in [[%LOCALSITEPREFS%]].

#RefreshIconCache
---+++ 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 =%<nop>ICON{action:refresh-cache}%=.

%IF{ "$'URLPARAM{icon-cache}'='refresh'" then="$percntICON{\"action:refresh-cache\" format=\"ICON cache is now refreshed. <a href='%SCRIPTURL{view}%/%WEB%/%TOPIC%#RefreshIconCache' class='twikiButton'>OK</a>\"}$percnt" else="<a href='%SCRIPTURL{view}%/%WEB%/%TOPIC%?icon-cache=refresh#RefreshIconCache' class='twikiButton'>Refresh ICON cache now</a>" }%

---++ License, Copyright and Work

This TWiki Documentation Graphics library is Copyright &copy; 2007-%SERVERTIME{$year}% 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 [[http://twiki.org/][TWiki.org]] is licensed under the [[http://www.gnu.org/licenses/gpl-2.0.html][GPL 2.0]] (GNU General Public License).

<div style="align:left; float:left; margin: 3px 15px 0 0"><a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a>
</div>
The <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">TWiki Documentation Graphics library</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://twiki.org/" property="cc:attributionName" rel="cc:attributionURL">TWiki.org</a> is also licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>. Based on a <a xmlns:dct="http://purl.org/dc/terms/" href="http://twiki.org/cgi-bin/view/TWiki/TWikiDocGraphics" rel="dct:source">work at twiki.org</a>.

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.

__Related Topics:__ VarICON, %CALCULATE{$GET(icontopics)}%, TWikiDocGraphicsTemplate, TWikiSkins, DeveloperDocumentationCategory, AdminDocumentationCategory

__Contributors:__ TWiki:Main.PeterThoeny, TWiki:Main.ArthurClemens
Topic revision: r54 - 2015-09-18 - TWikiContributor
Account
- Log In
- Register User
Edit
Attach
Copyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TWikiDocGraphics.