DocumentGraphics < System

---+!! Documentation Graphics and Filetype icons

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

%TOC{title="Contents:"}%

---++ Usage

Default notation:
<blockquote>
<code>%<nop>ICON{help}%</code> results in: %ICON{help}%

Note that =ICON{}= assumes an image of 16 x 16 pixels. 
See the tables below for copy-paste examples.
</blockquote>

Other usage: [[%TOPIC%#Usage_extended][see below]].

---++ Graphics
   * Set ICONTOPIC=%SYSTEMWEB%.DocumentGraphics
   * Set RENDERTABLES=%TABLE{headeralign="left" databg="#ffffff,#ffffff" databgsorted="#f5f5f5" tablewidth="100%" columnwidths="200px,40px"}%

---+++ %ICON{note}% Document icons

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| airplane | %ICON{airplane}% | airplane |  =%<nop>ICON{airplane}%= |
| alert | %ICON{alert}% | alert |  =%<nop>ICON{alert}%= |
| award | %ICON{award}% | award |  =%<nop>ICON{award}%= |
| barcode | %ICON{barcode}% | barcode |  =%<nop>ICON{barcode}%= |
| bed | %ICON{bed}% | bed |  =%<nop>ICON{bed}%= |
| bomb | %ICON{bomb}% | bomb |  =%<nop>ICON{bomb}%= |
| book | %ICON{book}% | Book |  =%<nop>ICON{book}%= |
| blank | %ICON{blank}% | Blank box |  =%<nop>ICON{blank}%= |
| blank-bg | %ICON{blank-bg}% | Blank box, transparent |  =%<nop>ICON{blank-bg}%= |
| bubble | %ICON{bubble}% | Speech bubble |  =%<nop>ICON{bubble}%= |
| bug | %ICON{bug}% | bug |  =%<nop>ICON{bug}%= |
| chart-bar | %ICON{chart-bar}% | chart-bar |  =%<nop>ICON{chart-bar}%= |
| chart-pie | %ICON{chart-pie}% | chart-pie |  =%<nop>ICON{chart-pie}%= |
| cog | %ICON{cog}% | cog |  =%<nop>ICON{cog}%= |
| comments | %ICON{comments}% | comments |  =%<nop>ICON{comments}%= |
| connections | %ICON{connections}% | connections |  =%<nop>ICON{connections}%= |
| database | %ICON{database}% | database |  =%<nop>ICON{database}%= |
| days | %ICON{days}% | Days, Calendar |  =%<nop>ICON{days}%= |
| detail | %ICON{detail}% | detail |  =%<nop>ICON{detail}%= |
| download | %ICON{download}% | Download |  =%<nop>ICON{download}%= |
| fax | %ICON{fax}% | Fax |  =%<nop>ICON{fax}%= |
| filter | %ICON{filter}% | Filter |  =%<nop>ICON{filter}%= |
| food | %ICON{food}% | food |  =%<nop>ICON{food}%= |
| gear | %ICON{gear}% | Gear |  =%<nop>ICON{gear}%= |
| globe | %ICON{globe}% | Globe |  =%<nop>ICON{globe}%= |
| graduation | %ICON{graduation}% | graduation |  =%<nop>ICON{graduation}%= |
| hand | %ICON{hand}% | Pointing hand |  =%<nop>ICON{hand}%= |
| heart | %ICON{heart}% | heart |  =%<nop>ICON{heart}%= |
| help | %ICON{help}% | Help |  =%<nop>H%=,  =%<nop>ICON{help}%= |
| hourglass | %ICON{hourglass}% | Hour glass (clock) |  =%<nop>ICON{hourglass}%= |
| info | %ICON{info}% | Info |  =%<nop>ICON{info}%= |
| legal | %ICON{legal}% | legal |  =%<nop>ICON{legal}%= |
| luggage | %ICON{luggage}% | luggage |  =%<nop>ICON{luggage}%= |
| map | %ICON{map}% | Map |  =%<nop>ICON{map}%= |
| mechanics | %ICON{mechanics}% | mechanics |  =%<nop>ICON{mechanics}%= |
| megaphone | %ICON{megaphone}% | Megaphone |  =%<nop>ICON{megaphone}%= |
| mobile | %ICON{mobile}% | Mobile |  =%<nop>ICON{mobile}%= |
| more | %ICON{more}% | Read more |  =%<nop>ICON{more}%= |
| more-small | %ICON{more-small}% | Read more, 13x13 |  =%<nop>ICON{more-small}%= |
| move | %ICON{move}% | Move |  =%<nop>ICON{move}%= |
| note | %ICON{note}% | Note |  =%<nop>ICON{note}%= |
| parked | %ICON{parked}% | Parked |  =%<nop>ICON{parked}%= |
| parts | %ICON{parts}% | Parts |  =%<nop>ICON{parts}%= |
| pencil | %ICON{pencil}% | Pencil / Refactor / Edit |  =%<nop>P%=,  =%<nop>ICON{pencil}%= |
| phone | %ICON{phone}% | Phone |  =%<nop>ICON{phone}%= |
| photo | %ICON{photo}% | Photo, 13x10 |  =%<nop>ICON{photo}%= |
| presentation | %ICON{presentation}% | Presentation |  =%<nop>ICON{presentation}%= |
| plug | %ICON{plug}% | plug |  =%<nop>ICON{plug}%= |
| puzzle | %ICON{puzzle}% | Puzzle |  =%<nop>ICON{puzzle}%= |
| process | %ICON{process}% | process |  =%<nop>ICON{process}%= |
| profile | %ICON{profile}% | profile |  =%<nop>ICON{profile}%= |
| question | %ICON{question}% | Question |  =%<nop>ICON{question}%= |
| quiet | %ICON{quiet}% | Quiet |  =%<nop>ICON{quiet}%= |
| radioactive | %ICON{radioactive}% | radioactive |  =%<nop>ICON{radioactive}%= |
| rfc | %ICON{rfc}% | Request for comments |  =%<nop>ICON{rfc}%= |
| sitemap | %ICON{sitemap}% | Site map |  =%<nop>ICON{sitemap}%= |
| socket | %ICON{socket}% | socket |  =%<nop>ICON{socket}%= |
| sitetree | %ICON{sitetree}% | Site tree |  =%<nop>ICON{sitetree}%= |
| sort | %ICON{sort}% | Sort |  =%<nop>ICON{sort}%= |
| stargold | %ICON{stargold}% | Gold star, favorites |  =%<nop>ICON{stargold}%= |
| starred | %ICON{starred}% | Red star, highlight |  =%<nop>S%=,  =%<nop>ICON{starred}%= |
| star-full | %ICON{star-full}% | star-full |  =%<nop>ICON{star-full}%= |
| star-half | %ICON{star-half}% | star-half |  =%<nop>ICON{star-half}%= |
| star-none | %ICON{star-none}% | star-none |  =%<nop>ICON{star-none}%= |
| stop | %ICON{stop}% | Stop |  =%<nop>ICON{stop}%= |
| support | %ICON{support}% | support |  =%<nop>ICON{support}%= |
| switch | %ICON{switch}% | switch |  =%<nop>ICON{switch}%= |
| target | %ICON{target}% | Target |  =%<nop>ICON{target}%= |
| target-blue | %ICON{target-blue}% | Target - blue |  =%<nop>ICON{target-blue}%= |
| target-gray | %ICON{target-gray}% | Target - gray |  =%<nop>ICON{target-gray}%= |
| target-green | %ICON{target-green}% | Target - green |  =%<nop>ICON{target-green}%= |
| target-orange | %ICON{target-orange}% | Target - orange |  =%<nop>ICON{target-orange}%= |
| target-red | %ICON{target-red}% | Target - red |  =%<nop>ICON{target-red}%= |
| thumbs-down | %ICON{thumbs-down}% | thumbs-down |  =%<nop>ICON{thumbs-down}%= |
| thumbs-up | %ICON{thumbs-up}% | thumbs-up |  =%<nop>ICON{thumbs-up}%= |
| tip | %ICON{tip}% | Tip, idea |  =%<nop>T%=,  =%<nop>ICON{tip}%= |
| toolbox | %ICON{toolbox}% | toolbox |  =%<nop>ICON{toolbox}%= |
| tooth | %ICON{tooth}% | tooth |  =%<nop>ICON{tooth}%= |
| traffic-light | %ICON{traffic-light}% | traffic-light |  =%<nop>ICON{traffic-light}%= |
| vcard | %ICON{vcard}% | vcard |  =%<nop>ICON{vcard}%= |
| video | %ICON{video}% | Video, 13x10 |  =%<nop>ICON{video}%= |
| warning | %ICON{warning}% | Warning, important |  =%<nop>X%=,  =%<nop>ICON{warning}%= |
| watch | %ICON{watch}% | Watch |  =%<nop>ICON{watch}%= |
| wip | %ICON{wip}% | Work in progress, under construction |  =%<nop>ICON{wip}%= |
| wrench | %ICON{wrench}% | Wrench, tools |  =%<nop>ICON{wrench}%= |
| ying-yang | %ICON{ying-yang}% | ying-yang |  =%<nop>ICON{ying-yang}%= |

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

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| viewtopic | %ICON{viewtopic}% | View topic |  =%<nop>ICON{viewtopic}%= |
| printtopic | %ICON{printtopic}% | Print topic |  =%<nop>ICON{printtopic}%= |
| refreshtopic | %ICON{refreshtopic}% | Refresh topic |  =%<nop>ICON{refreshtopic}%= |
| newtopic | %ICON{newtopic}% | New topic |  =%<nop>ICON{newtopic}%= |
| edittopic | %ICON{edittopic}% | Edit topic |  =%<nop>ICON{edittopic}%= |
| save | %ICON{save}% | Save |  =%<nop>ICON{save}%= |
| attachfile | %ICON{attachfile}% | Attach file |  =%<nop>ICON{attachfile}%= |
| download | %ICON{download}% | Download |  =%<nop>ICON{download}%= |
| trash | %ICON{trash}% | Trash |  =%<nop>ICON{trash}%= |
| trash-small | %ICON{trash-small}% | Trash small, 11x11 |  =%<nop>ICON{trash-small}%= |
| searchtopic | %ICON{searchtopic}% | Search topic |  =%<nop>ICON{searchtopic}%= |
| search-small | %ICON{search-small}% | Small search button, 13x13 |  =%<nop>ICON{search-small}%= |
| topicbacklinks | %ICON{topicbacklinks}% | Topic back-links |  =%<nop>ICON{topicbacklinks}%= |
| topicdiffs | %ICON{topicdiffs}% | Topic difference |  =%<nop>ICON{topicdiffs}%= |
| statistics | %ICON{statistics}% | Statistics |  =%<nop>ICON{statistics}%= |
| index | %ICON{index}% | Index |  =%<nop>ICON{index}%= |
| indexlist | %ICON{indexlist}% | Index list |  =%<nop>ICON{indexlist}%= |
| cachetopic | %ICON{cachetopic}% | Cache topic |  =%<nop>ICON{cachetopic}%= |
| folder | %ICON{folder}% | Folder |  =%<nop>ICON{folder}%= |
| table | %ICON{table}% | Table |  =%<nop>ICON{table}%= |
| edittable | %ICON{edittable}% | Edit table |  =%<nop>ICON{edittable}%= |
| uweb-bo | %ICON{uweb-bo}% | UWEB ([[http://universaleditbutton.org/][Universal Wiki Edit Button]]), blue, outline |  =%<nop>ICON{uweb-bo}%= |
| uweb-bo12 | %ICON{uweb-bo12}% | UWEB, blue, outline, small 12x12 |  =%<nop>ICON{uweb-bo12}%= |
| uweb-g | %ICON{uweb-g}% | UWEB, green (default) |  =%<nop>ICON{uweb-g}%= |
| uweb-gs | %ICON{uweb-gs}% | UWEB, green, square |  =%<nop>ICON{uweb-gs}%= |
| uweb-m12 | %ICON{uweb-m12}% | UWEB, black, small 12x12 |  =%<nop>ICON{uweb-m12}%= |
| uweb-o | %ICON{uweb-o}% | UWEB, orange |  =%<nop>ICON{uweb-o}%= |
| uweb-o12 | %ICON{uweb-o12}% | UWEB, orange, small 12x12 |  =%<nop>ICON{uweb-o12}%= |
| uweb-oo | %ICON{uweb-oo}% | UWEB, orange, outline |  =%<nop>ICON{uweb-oo}%= |
| uweb-os | %ICON{uweb-os}% | UWEB, orange, square |  =%<nop>ICON{uweb-os}%= |


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

%RENDERTABLES%
| *Name* | *Icon* | *Description* | *Write...* |
| person | %ICON{person}% | Person |  =%<nop>ICON{person}%= |
| persons | %ICON{persons}% | Persons |  =%<nop>ICON{persons}%= |
| group | %ICON{group}% | Group |  =%<nop>ICON{group}%= |
| useractive | %ICON{useractive}% | Active user |  =%<nop>ICON{useractive}%= |
| userinactive | %ICON{userinactive}% | Inactive user |  =%<nop>ICON{userinactive}%= |
| useradd | %ICON{useradd}% | Add user |  =%<nop>ICON{useradd}%= |
| userdelete | %ICON{userdelete}% | Delete user |  =%<nop>ICON{userdelete}%= |
| useredit | %ICON{useredit}% | Edit user |  =%<nop>ICON{useredit}%= |
| building | %ICON{building}% | Building |  =%<nop>ICON{building}%= |
| buildings | %ICON{buildings}% | Buildings |  =%<nop>ICON{buildings}%= |
| logout | %ICON{logout}% | Log out |  =%<nop>ICON{logout}%= |
| key | %ICON{key}% | Key |  =%<nop>ICON{key}%= |
| lock | %ICON{lock}% | Lock |  =%<nop>ICON{lock}%= |
| locktopic | %ICON{locktopic}% | Locked topic |  =%<nop>ICON{locktopic}%= |
| locktopicgray | %ICON{locktopicgray}% | Locked topic, gray |  =%<nop>ICON{locktopicgray}%= |
| lockfolder | %ICON{lockfolder}% | Locked folder |  =%<nop>ICON{lockfolder}%= |
| lockfoldergray | %ICON{lockfoldergray}% | Locked folder, gray |  =%<nop>ICON{lockfoldergray}%= |


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

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| changes | %ICON{changes}% | Changes |  =%<nop>ICON{changes}%= |
| changes-small | %ICON{changes-small}% | Changes (small), 13x13 |  =%<nop>ICON{changes-small}%= |
| recentchanges | %ICON{recentchanges}% | Recent changes |  =%<nop>ICON{recentchanges}%= |
| mail | %ICON{mail}% | Mail |  =%<nop>ICON{mail}%= |
| notify | %ICON{notify}% | Notify |  =%<nop>ICON{notify}%= |
| feed | %ICON{feed}% | Feed |  =%<nop>ICON{feed}%= |
| rss | %ICON{rss}% | rss |  =%<nop>ICON{rss}%= |
| rss-feed | %ICON{rss-feed}% | RSS feed, 36x14 |  =%<nop>ICON{rss-feed}%= |
| rss-small | %ICON{rss-small}% | RSS feed |  =%<nop>ICON{rss-small}%= |
| xml-feed | %ICON{xml-feed}% | XML feed, 36x14 |  =%<nop>ICON{xml-feed}%= |
| xml-small | %ICON{xml-small}% | XML feed |  =%<nop>ICON{xml-small}%= |


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

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| new | %ICON{new}% | NEW, 30x16 |  =%<nop>N%=, =&lt;img src="%<nop>ICONURL{new}%= |
| todo | %ICON{todo}% | TODO, 37x16 |  =%<nop>ICON{todo}%= |
| updated | %ICON{updated}% | UPDATED, 55x16 |  =%<nop>U%=, =&lt;img src="%<nop>ICONURL{updated}%= |
| done | %ICON{done}% | DONE, 37x16 |  =%<nop>ICON{done}%= |
| closed | %ICON{closed}% | CLOSED, 48x16 |  =%<nop>ICON{closed}%= |
| processing-32-bg | %ICON{processing-32-bg}% | processing-32-bg |  =%<nop>ICON{processing-32-bg}%= |
| processing-32 | %ICON{processing-32}% | processing-32 |  =%<nop>ICON{processing-32}%= |
| processing-bg | %ICON{processing-bg}% | processing-bg |  =%<nop>ICON{processing-bg}%= |
| processing | %ICON{processing}% | processing |  =%<nop>ICON{processing}%= |
| add | %ICON{add}% | add |  =%<nop>ICON{add}%= |
| remove | %ICON{remove}% | remove |  =%<nop>ICON{remove}%= |
| minus | %ICON{minus}% | Minus |  =%<nop>ICON{minus}%= |
| plus | %ICON{plus}% | Plus |  =%<nop>ICON{plus}%= |
| choice-cancel | %ICON{choice-cancel}% | Cancel |  =%<nop>ICON{choice-cancel}%= |
| choice-no | %ICON{choice-no}% | No |  =%<nop>ICON{choice-no}%= |
| choice-yes | %ICON{choice-yes}% | Yes / Done |  =%<nop>Y%=,  =%<nop>ICON{choice-yes}%= |
| unchecked | %ICON{unchecked}% | Unchecked checkbox |  =%<nop>ICON{unchecked}%= |
| checked | %ICON{checked}% | Checked checkbox |  =%<nop>ICON{checked}%= |
| checked-round | %ICON{checked-round}% | checked-round |  =%<nop>ICON{checked-round}%= |
| unchecked-round | %ICON{unchecked-round}% | unchecked-round |  =%<nop>ICON{unchecked-round}%= |
| flag | %ICON{flag}% | Flag |  =%<nop>ICON{flag}%= |
| flag-gray | %ICON{flag-gray}% | Gray flag |  =%<nop>ICON{flag-gray}%= |
| flag-gray-small | %ICON{flag-gray-small}% | Small gray flag, 13x13 |  =%<nop>ICON{flag-gray-small}%= |
| led-aqua | %ICON{led-aqua}% | Aqua led |  =%<nop>ICON{led-aqua}%= |
| led-blue | %ICON{led-blue}% | Blue led |  =%<nop>ICON{led-blue}%= |
| led-gray | %ICON{led-gray}% | Gray led |  =%<nop>ICON{led-gray}%= |
| led-green | %ICON{led-green}% | Green led |  =%<nop>ICON{led-green}%= |
| led-orange | %ICON{led-orange}% | Orange led |  =%<nop>ICON{led-orange}%= |
| led-purple | %ICON{led-purple}% | Purple led |  =%<nop>ICON{led-purple}%= |
| led-red | %ICON{led-red}% | Red led |  =%<nop>ICON{led-red}%= |
| led-yellow | %ICON{led-yellow}% | Yellow led |  =%<nop>ICON{led-yellow}%= |
| led-box-aqua | %ICON{led-box-aqua}% | Aqua led |  =%<nop>ICON{led-box-aqua}%= |
| led-box-blue | %ICON{led-box-blue}% | Blue led |  =%<nop>ICON{led-box-blue}%= |
| led-box-gray | %ICON{led-box-gray}% | Gray led |  =%<nop>ICON{led-box-gray}%= |
| led-box-green | %ICON{led-box-green}% | Green led |  =%<nop>ICON{led-box-green}%= |
| led-box-orange | %ICON{led-box-orange}% | Orange led |  =%<nop>ICON{led-box-orange}%= |
| led-box-purple | %ICON{led-box-purple}% | Purple led |  =%<nop>ICON{led-box-purple}%= |
| led-box-red | %ICON{led-box-red}% | Red led |  =%<nop>ICON{led-box-red}%= |
| led-box-yellow | %ICON{led-box-yellow}% | Yellow led |  =%<nop>ICON{led-box-yellow}%= |
| tag | %ICON{tag}% | Tag |  =%<nop>ICON{tag}%= |
| tag-black | %ICON{tag-black}% | tag-black |  =%<nop>ICON{tag-black}%= |
| tag-blue | %ICON{tag-blue}% | Blue tag |  =%<nop>ICON{tag-blue}%= |
| tag-brown | %ICON{tag-brown}% | Brown tag |  =%<nop>ICON{tag-brown}%= |
| tag-green | %ICON{tag-green}% | Green tag |  =%<nop>ICON{tag-green}%= |
| tag-magenta | %ICON{tag-magenta}% | Magenta tag |  =%<nop>ICON{tag-magenta}%= |
| tag-orange | %ICON{tag-orange}% | Orange tag |  =%<nop>ICON{tag-orange}%= |
| tag-purple | %ICON{tag-purple}% | Purple tag |  =%<nop>ICON{tag-purple}%= |
| tag-red | %ICON{tag-red}% | Red tag |  =%<nop>ICON{tag-red}%= |
| tag-yellow | %ICON{tag-yellow}% | Yellow tag |  =%<nop>ICON{tag-yellow}%= |

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

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| home | %ICON{home}% | Home |  =%<nop>ICON{home}%= |
| sitemap | %ICON{sitemap}% | Site map |  =%<nop>ICON{sitemap}%= |
| sitetree | %ICON{sitetree}% | Site tree |  =%<nop>ICON{sitetree}%= |
| topicbacklinks | %ICON{topicbacklinks}% | Topic back-links |  =%<nop>ICON{topicbacklinks}%= |
| arrowdot | %ICON{arrowdot}% | Meet here (arrows to red dot) |  =%<nop>ICON{arrowdot}%= |
| external | %ICON{external}% | External site |  =%<nop>ICON{external}%= |
| left | %ICON{left}% | Left |  =%<nop>ICON{left}%= |
| right | %ICON{right}% | Right |  =%<nop>ICON{right}%= |
| up | %ICON{up}% | Up |  =%<nop>ICON{up}%= |
| down | %ICON{down}% | Down |  =%<nop>ICON{down}%= |
| arrowbleft | %ICON{arrowbleft}% | Arrow blue left |  =%<nop>ICON{arrowbleft}%= |
| arrowbright | %ICON{arrowbright}% | Arrow blue right |  =%<nop>ICON{arrowbright}%= |
| arrowright-small | %ICON{arrowright-small}% | arrowright-small |  =%<nop>ICON{arrowright-small}%= |
| arrowbup | %ICON{arrowbup}% | Arrow blue up |  =%<nop>ICON{arrowbup}%= |
| arrowbdown | %ICON{arrowbdown}% | Arrow blue down |  =%<nop>ICON{arrowbdown}%= |
| arrowleft | %ICON{arrowleft}% | Arrow left |  =%<nop>ICON{arrowleft}%= |
| arrowright | %ICON{arrowright}% | Arrow right |  =%<nop>M%=, =%<nop>ICON{arrowright}%= |
| arrowup | %ICON{arrowup}% | Arrow up |  =%<nop>ICON{arrowup}%= |
| arrowdown | %ICON{arrowdown}% | Arrow down |  =%<nop>ICON{arrowdown}%= |
| go_start | %ICON{go_start}% | Go to start |  =%<nop>ICON{go_start}%= |
| go_fb | %ICON{go_fb}% | Go fast back |  =%<nop>ICON{go_fb}%= |
| go_back | %ICON{go_back}% | Go back |  =%<nop>ICON{go_back}%= |
| go_forward | %ICON{go_forward}% | Go forward |  =%<nop>ICON{go_forward}%= |
| go_ff | %ICON{go_ff}% | Go fast forward |  =%<nop>ICON{go_ff}%= |
| go_end | %ICON{go_end}% | Go to end |  =%<nop>ICON{go_end}%= |

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

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| monospace | %ICON{monospace}% | Monospace |  =%<nop>ICON{monospace}%= |
| proportional | %ICON{proportional}% | Proportional |  =%<nop>ICON{proportional}%= |
| tablesortdiamond | %ICON{tablesortdiamond}% | Sort table |  =%<nop>ICON{tablesortdiamond}%= |
| tablesortdown | %ICON{tablesortdown}% | Sort table descending |  =%<nop>ICON{tablesortdown}%= |
| tablesortup | %ICON{tablesortup}% | Sort table ascending |  =%<nop>ICON{tablesortup}%= |
| toggleopen | %ICON{toggleopen}% | Open toggle, Twisty open toggle |  =%<nop>ICON{toggleopen}%= |
| toggleclose | %ICON{toggleclose}% | Close toggle, Twisty close toggle |  =%<nop>ICON{toggleclose}%= |
| toggleopen-small | %ICON{toggleopen-small}% | Open toggle, Twisty open toggle |  =%<nop>ICON{toggleopen-small}%= |
| toggleclose-small | %ICON{toggleclose-small}% | Close toggle, Twisty close toggle |  =%<nop>ICON{toggleclose-small}%= |
| toggleopen-mini | %ICON{toggleopen-mini}% | Open toggle, Twisty open toggle |  =%<nop>ICON{toggleopen-mini}%= |
| toggleclose-mini | %ICON{toggleclose-mini}% | Close toggle, Twisty close toggle |  =%<nop>ICON{toggleclose-mini}%= |
| toggleopenleft | %ICON{toggleopenleft}% | Open toggle, Twisty open toggle |  =%<nop>ICON{toggleopenleft}%= |
| toggleopenleft-small | %ICON{toggleopenleft-small}% | Open toggle, Twisty open toggle |  =%<nop>ICON{toggleopenleft-small}%= |
| togglecloseleft-small | %ICON{togglecloseleft-small}% | togglecloseleft-small |  =%<nop>ICON{togglecloseleft-small}%= |
| web-bg | %ICON{web-bg}% | Web background, used in %SYSTEMWEB%.WebLeftBarWebsList |  =%<nop>ICON{web-bg}%= |
| web-bg-small | %ICON{web-bg-small}% | Web background, 13x13 |  =%<nop>ICON{web-bg-small}%= |

---+++ %ICON{foswiki}% Foswiki icons

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| addon | %ICON{addon}% | Add-on |  =%<nop>ICON{addon}%= |
| application | %ICON{application}% | Application |  =%<nop>ICON{application}%= |
| code | %ICON{code}% | Code |  =%<nop>ICON{code}%= |
| foswiki | %ICON{foswiki}% | Foswiki |  =%<nop>ICON{foswiki}%= |
| package | %ICON{package}% | Package |  =%<nop>ICON{package}%= |
| plugin | %ICON{plugin}% | Plugin |  =%<nop>ICON{plugin}%= |
| tag | %ICON{tag}% | Tag |  =%<nop>ICON{tag}%= |
| searchpackage | %ICON{searchpackage}% | Search package |  =%<nop>ICON{searchpackage}%= |
| searchtag | %ICON{searchtag}% | Search tag |  =%<nop>ICON{searchtag}%= |
| skin | %ICON{skin}% | Skin |  =%<nop>ICON{skin}%= |
| irc | %ICON{irc}% | irc |  =%<nop>ICON{irc}%= |

---+++ %ICON{twitter}% Social and other website icons

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| amazon | %ICON{amazon}% | amazon |  =%<nop>ICON{amazon}%= |
| aol | %ICON{aol}% | aol |  =%<nop>ICON{aol}%= |
| app-store | %ICON{app-store}% | app-store |  =%<nop>ICON{app-store}%= |
| apple | %ICON{apple}% | apple |  =%<nop>ICON{apple}%= |
| bebo | %ICON{bebo}% | bebo |  =%<nop>ICON{bebo}%= |
| behance | %ICON{behance}% | behance |  =%<nop>ICON{behance}%= |
| bing | %ICON{bing}% | bing |  =%<nop>ICON{bing}%= |
| bitly | %ICON{bitly}% | bitly |  =%<nop>ICON{bitly}%= |
| blogger | %ICON{blogger}% | blogger |  =%<nop>ICON{blogger}%= |
| button-blue | %ICON{button-blue}% | button-blue |  =%<nop>ICON{button-blue}%= |
| button-green | %ICON{button-green}% | button-green |  =%<nop>ICON{button-green}%= |
| button-light-blue | %ICON{button-light-blue}% | button-light-blue |  =%<nop>ICON{button-light-blue}%= |
| button-orange | %ICON{button-orange}% | button-orange |  =%<nop>ICON{button-orange}%= |
| button-red | %ICON{button-red}% | button-red |  =%<nop>ICON{button-red}%= |
| button-white | %ICON{button-white}% | button-white |  =%<nop>ICON{button-white}%= |
| button-yellow | %ICON{button-yellow}% | button-yellow |  =%<nop>ICON{button-yellow}%= |
| delicious | %ICON{delicious}% | delicious |  =%<nop>ICON{delicious}%= |
| design-bump | %ICON{design-bump}% | design-bump |  =%<nop>ICON{design-bump}%= |
| designfloat | %ICON{designfloat}% | designfloat |  =%<nop>ICON{designfloat}%= |
| deviant-art | %ICON{deviant-art}% | deviant-art |  =%<nop>ICON{deviant-art}%= |
| digg | %ICON{digg}% | digg |  =%<nop>ICON{digg}%= |
| drupal | %ICON{drupal}% | drupal |  =%<nop>ICON{drupal}%= |
| ebay | %ICON{ebay}% | ebay |  =%<nop>ICON{ebay}%= |
| email | %ICON{email}% | email |  =%<nop>ICON{email}%= |
| facebook | %ICON{facebook}% | facebook |  =%<nop>ICON{facebook}%= |
| feedburner | %ICON{feedburner}% | feedburner |  =%<nop>ICON{feedburner}%= |
| flickr | %ICON{flickr}% | flickr |  =%<nop>ICON{flickr}%= |
| friendfeed | %ICON{friendfeed}% | friendfeed |  =%<nop>ICON{friendfeed}%= |
| friendster | %ICON{friendster}% | friendster |  =%<nop>ICON{friendster}%= |
| github | %ICON{github}% | github |  =%<nop>ICON{github}%= |
| google | %ICON{google}% | google |  =%<nop>ICON{google}%= |
| google-buzz | %ICON{google-buzz}% | google-buzz |  =%<nop>ICON{google-buzz}%= |
| google-talk | %ICON{google-talk}% | google-talk |  =%<nop>ICON{google-talk}%= |
| gowalla | %ICON{gowalla}% | gowalla |  =%<nop>ICON{gowalla}%= |
| icq | %ICON{icq}% | icq |  =%<nop>ICON{icq}%= |
| lastfm | %ICON{lastfm}% | lastfm |  =%<nop>ICON{lastfm}%= |
| linkedin | %ICON{linkedin}% | linkedin |  =%<nop>ICON{linkedin}%= |
| meetup | %ICON{meetup}% | meetup |  =%<nop>ICON{meetup}%= |
| metacafe | %ICON{metacafe}% | metacafe |  =%<nop>ICON{metacafe}%= |
| microsoft | %ICON{microsoft}% | microsoft |  =%<nop>ICON{microsoft}%= |
| mister-wong | %ICON{mister-wong}% | mister-wong |  =%<nop>ICON{mister-wong}%= |
| mixx | %ICON{mixx}% | mixx |  =%<nop>ICON{mixx}%= |
| mobileme | %ICON{mobileme}% | mobileme |  =%<nop>ICON{mobileme}%= |
| msn | %ICON{msn}% | msn |  =%<nop>ICON{msn}%= |
| myspace | %ICON{myspace}% | myspace |  =%<nop>ICON{myspace}%= |
| netvibes | %ICON{netvibes}% | netvibes |  =%<nop>ICON{netvibes}%= |
| newsvine | %ICON{newsvine}% | newsvine |  =%<nop>ICON{newsvine}%= |
| paypal | %ICON{paypal}% | paypal |  =%<nop>ICON{paypal}%= |
| picasa | %ICON{picasa}% | picasa |  =%<nop>ICON{picasa}%= |
| podcast | %ICON{podcast}% | podcast |  =%<nop>ICON{podcast}%= |
| posterous | %ICON{posterous}% | posterous |  =%<nop>ICON{posterous}%= |
| qik | %ICON{qik}% | qik |  =%<nop>ICON{qik}%= |
| reddit | %ICON{reddit}% | reddit |  =%<nop>ICON{reddit}%= |
| retweet | %ICON{retweet}% | retweet |  =%<nop>ICON{retweet}%= |
| sharethis | %ICON{sharethis}% | sharethis |  =%<nop>ICON{sharethis}%= |
| skype | %ICON{skype}% | skype |  =%<nop>ICON{skype}%= |
| slashdot | %ICON{slashdot}% | slashdot |  =%<nop>ICON{slashdot}%= |
| slideshare | %ICON{slideshare}% | slideshare |  =%<nop>ICON{slideshare}%= |
| squidoo | %ICON{squidoo}% | squidoo |  =%<nop>ICON{squidoo}%= |
| star | %ICON{star}% | star |  =%<nop>ICON{star}%= |
| stumbleupon | %ICON{stumbleupon}% | stumbleupon |  =%<nop>ICON{stumbleupon}%= |
| technorati | %ICON{technorati}% | technorati |  =%<nop>ICON{technorati}%= |
| tumblr | %ICON{tumblr}% | tumblr |  =%<nop>ICON{tumblr}%= |
| twitter | %ICON{twitter}% | twitter |  =%<nop>ICON{twitter}%= |
| viddler | %ICON{viddler}% | viddler |  =%<nop>ICON{viddler}%= |
| vimeo | %ICON{vimeo}% | vimeo |  =%<nop>ICON{vimeo}%= |
| virb | %ICON{virb}% | virb |  =%<nop>ICON{virb}%= |
| wordpress | %ICON{wordpress}% | wordpress |  =%<nop>ICON{wordpress}%= |
| wordpress-blue | %ICON{wordpress-blue}% | wordpress-blue |  =%<nop>ICON{wordpress-blue}%= |
| xing | %ICON{xing}% | xing |  =%<nop>ICON{xing}%= |
| yahoo | %ICON{yahoo}% | yahoo |  =%<nop>ICON{yahoo}%= |
| yahoo-buzz | %ICON{yahoo-buzz}% | yahoo-buzz |  =%<nop>ICON{yahoo-buzz}%= |
| yelp | %ICON{yelp}% | yelp |  =%<nop>ICON{yelp}%= |
| youtube | %ICON{youtube}% | youtube |  =%<nop>ICON{youtube}%= |

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

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| line_ld | %ICON{line_ld}% | Line graph left-down |  =%<nop>ICON{line_ld}%= |
| line_lr | %ICON{line_lr}% | Line graph left-right |  =%<nop>ICON{line_lr}%= |
| line_lrd | %ICON{line_lrd}% | Line graph left-right-down |  =%<nop>ICON{line_lrd}%= |
| line_rd | %ICON{line_rd}% | Line graph right-down |  =%<nop>ICON{line_rd}%= |
| line_ud | %ICON{line_ud}% | Line graph up-down |  =%<nop>ICON{line_ud}%= |
| line_udl | %ICON{line_udl}% | Line graph up-down-left |  =%<nop>ICON{line_udl}%= |
| line_udlr | %ICON{line_udlr}% | Line graph up-down-left-right |  =%<nop>ICON{line_udlr}%= |
| line_udr | %ICON{line_udr}% | Line graph up-down-right |  =%<nop>ICON{line_udr}%= |
| line_ul | %ICON{line_ul}% | Line graph up-left |  =%<nop>ICON{line_ul}%= |
| line_ulr | %ICON{line_ulr}% | Line graph up-left-right |  =%<nop>ICON{line_ulr}%= |
| line_ur | %ICON{line_ur}% | Line graph up-right |  =%<nop>ICON{line_ur}%= |
| line_ur_gray | %ICON{line_ur_gray}% | Line graph up-right, gray |  =%<nop>ICON{line_ur_gray}%= |
| dot_ld | %ICON{dot_ld}% | Dot graph left-down |  =%<nop>ICON{dot_ld}%= |
| dot_lr | %ICON{dot_lr}% | Dot graph left-right |  =%<nop>ICON{dot_lr}%= |
| dot_lrd | %ICON{dot_lrd}% | Dot graph left-right-down |  =%<nop>ICON{dot_lrd}%= |
| dot_rd | %ICON{dot_rd}% | Dot graph right-down |  =%<nop>ICON{dot_rd}%= |
| dot_ud | %ICON{dot_ud}% | Dot graph up-down |  =%<nop>ICON{dot_ud}%= |
| dot_udl | %ICON{dot_udl}% | Dot graph up-down-left |  =%<nop>ICON{dot_udl}%= |
| dot_udlr | %ICON{dot_udlr}% | Dot graph up-down-left-right |  =%<nop>ICON{dot_udlr}%= |
| dot_udr | %ICON{dot_udr}% | Dot graph up-down-right |  =%<nop>ICON{dot_udr}%= |
| dot_ul | %ICON{dot_ul}% | Dot graph up-left |  =%<nop>ICON{dot_ul}%= |
| dot_ulr | %ICON{dot_ulr}% | Dot graph up-left-right |  =%<nop>ICON{dot_ulr}%= |
| dot_ur | %ICON{dot_ur}% | Dot graph up-right |  =%<nop>ICON{dot_ur}%= |
| empty | %ICON{empty}% | Empty transparent 16x16 spacer |  =%<nop>ICON{empty}%= |
| parent_gray | %ICON{parent_gray}% | Parent arrow |  =%<nop>ICON{parent_gray}%= |


---+++ %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.

%RENDERTABLES%
| *Name* | *Icon* |  *Description* | *Write...* |
| as | %ICON{as}% | !ActionScript |  =%<nop>ICON{as}%= |
| air | %ICON{air}% | Adobe Air |  =%<nop>ICON{air}%= |
| bat | %ICON{bat}% | MS-DOS batch file |  =%<nop>ICON{bat}%= |
| bmp | %ICON{bmp}% | Bitmap |  =%<nop>ICON{bmp}%= |
| c | %ICON{c}% | C source code file  |  =%<nop>ICON{c}%= |
| css | %ICON{css}% | Cascading Style Sheet file  |  =%<nop>ICON{css}%= |
| dll | %ICON{dll}% | Dynamic Linked Library; Microsoft application file |  =%<nop>ICON{dll}%= |
| doc | %ICON{doc}% | Microsoft Word file |  =%<nop>ICON{doc}%= |
| else | %ICON{else}% | Unknown file format |  =%<nop>ICON{else}%= |
| eml | %ICON{eml}% | Microsoft Outlook e-mail file |  =%<nop>ICON{eml}%= |
| exe | %ICON{exe}% | Microsoft Executable file |  =%<nop>ICON{exe}%= |
| fla | %ICON{fla}% | Macromedia Flash Movie |  =%<nop>ICON{fla}%= |
| fon | %ICON{fon}% | Windows bitmapped font file |  =%<nop>ICON{fon}%= |
| gif | %ICON{gif}% | GIF |  =%<nop>ICON{gif}%= |
| h | %ICON{h}% | Header file |  =%<nop>ICON{h}%= |
| hlp | %ICON{hlp}% | Standard help file |  =%<nop>ICON{hlp}%= |
| html | %ICON{html}% | HTML |  =%<nop>ICON{html}%= |
| java | %ICON{java}% | Java source code file  |  =%<nop>ICON{java}%= |
| jpg | %ICON{jpg}% | JPEG |  =%<nop>ICON{jpg}%= |
| js | %ICON{js}% | !JavaScript |  =%<nop>ICON{js}%= |
| mdb | %ICON{mdb}% | Microsoft Access database File |  =%<nop>ICON{mdb}%= |
| mov | %ICON{mov}% | !Quicktime movie |  =%<nop>ICON{mov}%= |
| mp3 | %ICON{mp3}% | MP3 |  =%<nop>ICON{mp3}%= |
| pdf | %ICON{pdf}% | PDF |  =%<nop>ICON{pdf}%= |
| pl | %ICON{pl}% | Perl source code file |  =%<nop>ICON{pl}%= |
| png | %ICON{png}% | PNG |  =%<nop>ICON{png}%= |
| ppt | %ICON{ppt}% | !PowerPoint |  =%<nop>ICON{ppt}%= |
| ps | %ICON{ps}% | Postscript |  =%<nop>ICON{ps}%= |
| psd | %ICON{psd}% | Photoshop document |  =%<nop>ICON{psd}%= |
| py | %ICON{py}% | Python source code file  |  =%<nop>ICON{py}%= |
| ram | %ICON{ram}% | !RealAudio |  =%<nop>ICON{ram}%= |
| reg | %ICON{reg}% | Registry file |  =%<nop>ICON{reg}%= |
| sh | %ICON{sh}% | Unix shell script |  =%<nop>ICON{sh}%= |
| sniff | %ICON{sniff}% | sniff |  =%<nop>ICON{sniff}%= |
| svg | %ICON{svg}% | svg |  =%<nop>ICON{svg}%= |
| swf | %ICON{swf}% | SWF (Shockwave Flash) |  =%<nop>ICON{swf}%= |
| ttf | %ICON{ttf}% | True Type font |  =%<nop>ICON{ttf}%= |
| txt | %ICON{txt}% | Text |  =%<nop>ICON{txt}%= |
| vsd | %ICON{vsd}% | Visio document |  =%<nop>ICON{vsd}%= |
| wav | %ICON{wav}% | Waveform sound file |  =%<nop>ICON{wav}%= |
| wri | %ICON{wri}% | Windows Write |  =%<nop>ICON{wri}%= |
| xls | %ICON{xls}% | Microsoft Excel Spreadsheet |  =%<nop>ICON{xls}%= |
| xml | %ICON{xml}% | XML |  =%<nop>ICON{xml}%= |
| xsl | %ICON{xsl}% | XSL (XML style sheet) |  =%<nop>ICON{xsl}%= |
| zip | %ICON{zip}% | Compressed Zip archive |  =%<nop>ICON{zip}%= |
| vector | %ICON{vector}% | vector |  =%<nop>ICON{vector}%= |

---++ Usage (extended)

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

Shorthand notation:
<blockquote>
In [[%USERSWEB%.SitePreferences!]] set a macro for an ICON, for example:

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

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

For extended use, check out Foswiki:Extensions.SmiliesPlugin that uses a different short hand than =<nop>%MACROS%=.
</blockquote>

Full path:
<blockquote>
In any topic, write =%<nop>PUBURL%/%<nop>SYSTEMWEB%/DocumentGraphics/help.png= to show %PUBURL%/%SYSTEMWEB%/DocumentGraphics/help.png

You are not restricted to use the !DocumentGraphics topic - 
in a similar way you can show attached images by replacing =DocumentGraphics= with the topic name.
</blockquote>

To create an image with a link, write:
<blockquote>
=[<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]]
</blockquote>

To get the full URL of the icon, use [[VarICONURL][ICONURL]]:
<blockquote>
=%<nop>ICONURL{"toggleopen"}%= gets you the image path: <code>%ICONURL{"toggleopen"}%</code> %BR%
and that will get rendered as: %ICONURL{"toggleopen"}%
</blockquote>

---++ Customisation
To create a _full_ new set of Icon's, you would need to duplicate this topic, 
and then create a set of icon files matching these names as attachments to that copy. 
This lengthy process is required to support direct URL usages of the iconsset 
(its common for users to find out a url to an image, and then paste it into the editor - this 'just' works).

If you only want to customise a small set of icons, or add some of your own, 
the best way to do this is to create an icon skin template containing your customisations, 
and then to add that into your skin path.

eg:
---++++ Create a Skin Template for your icons
Either =foswiki/templates/icons.mybook.tmpl= on the filesystem, or create a topic called =MybookSkinIconsTemplate= in the %SYSTEMWEB% web 
(or if the icon modifications are local to a web, the topic can be created in just that web).
<verbatim class="tml">
%{ replace the book icon }%
%{ the output of %ICONURL{book}% }%
%TMPL:DEF{"iconurl:book"}%http://someother.corp.server/My-book-company-logo.png%TMPL:END%
%TMPL:DEF{"iconalt:book"}%Book%TMPL:END%
%{ the html output by %ICON{book}% }%
%TMPL:DEF{"icon:book"}%<span class="foswikiIcon"><img src="%TMPL:P{"iconurl:book"}%" width="16" height="16" alt="%TMPL:P{"iconalt:book"}%" /></span>%TMPL:END%

%{ add a new fuzzy-bunny icon }%
%{ the output of %ICONURL{fuzzy}% }%
%TMPL:DEF{"iconurl:fuzzy"}%http://someother.server/fuzzy.png%TMPL:END%
%TMPL:DEF{"iconalt:fuzzy"}%Fuzzy Wuzzy%TMPL:END%
%{ the html output by %ICON{fuzzy}% }%
%TMPL:DEF{"icon:fuzzy"}%<span class="foswikiIcon"><img src="%TMPL:P{"iconurl:fuzzy"}%" width="16" height="16" alt="%TMPL:P{"iconalt:fuzzy"}%" /></span>%TMPL:END%

</verbatim>
---++++ Add =mybook= to your SKIN setting
Assuming PatternSkin is your skin
<pre class="tml">
&nbsp;&nbsp;&nbsp;* Set SKIN = mybook, pattern
</pre>

This allows you to create non-image 'ICONS', specify images from other servers, and add Icons in a foswiki Extension.

See [[%SYSTEMWEB%.Skins][Skins]] and %SYSTEMWEB%.SkinTemplates for more information about how to create Skins.

---++ Credits
Most of these icons are from the [[http://www.famfamfam.com/lab/icons/silk/][FamFamFam Silk]] icon set, 
some are modifications by Foswiki:Main.SvenDowideit, and a few come from the [[http://p.yusukekamiyamane.com/][Fugue icons]] set. 
The social media icons are from [[http://icondock.com/free/vector-social-media-icons][icondock's Vector social media]] set.

---
*Related Topics:* [[Skins]], UserDocumentationCategory, DeveloperDocumentationCategory
<!-- %JQREQUIRE{"chili"}% -->
This topic: System > DocumentGraphics
Topic revision: revision 1 (raw view)
Copyright &© by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding BACCHUS Wiki? Send feedback