TWiki Documentation Graphics and File Type Icons

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

All icons at a glance

List of unique icons defined in TWiki.TWikiDocGraphics. Hover over the icon to get icon information.

action-item addon air airplane analyze application arrowbdown arrowbleft arrowbright arrowbup arrowdot arrowdown arrowleft arrowright arrowup as attachfile award barcode bat bed bitly blank blank-bg blogger bmp bomb book bridge bubble bug building buildings c cachetopic calculator changes changes-small chart-bar chart-pie checked checked-round checked-square choice-cancel choice-no choice-yes clipboard clock close closed code color-wheel color-wheel-bg comments connections control-panel counter c css dashboard database days delegate delicious digg dll doc doc done dot_ld dot_lr dot_lrd dot_rd dot_ud dot_udl dot_udlr dot_udr dot_ul dot_ulr dot_ur down download edittable edittopic else eml empty exe external external-link facebook factory fax feed filter first-class fla flag flag-gray flag-gray-small folder fon food gear gif globe go_back go_end go_fb go_ff go_forward go_start goal google google-plus graduation group h hand heart help help-close help-open help-video hlp home hourglass html index indexlist info java jpg js js key led-aqua led-bg led-blue led-box-aqua led-box-blue led-box-gray led-box-green led-box-orange led-box-purple led-box-red led-box-yellow led-cup-aqua led-cup-blue led-cup-gray led-cup-gray-close led-cup-gray-minus led-cup-gray-plus led-cup-green led-cup-green-plus led-cup-orange led-cup-purple led-cup-red led-cup-red-close led-cup-yellow led-cup-yellow-minus led-gray led-green led-orange led-purple led-red led-yellow left legal line_ld line_lr line_lrd line_rd line_ud line_udl line_udlr line_udr line_ul line_ulr line_ur line_ur_gray linkedin lock lock-open lockfolder lockfoldergray locktopic locktopicgray login logout luggage mail map mdb mechanics meeting megaphone menu-down menu-right milestone minus mission mobile mobile-carrier monospace more more-small mov move new newtopic node-minus node-minus_r node-minus_udr node-minus_ur node-plus node-plus_r node-plus_udr node-plus_ur note notify opportunity xps package parent_gray parked parts pdf pencil person persona persons phone phone-extension phone-toll-free photo pick pl plug plugin plus png ppt ppt presentation printtopic process processing processing-32 processing-32-bg processing-bar processing-bar-wide processing-bg profile project project-plan proportional ps psd puzzle py qrcode question quiet radioactive ram recentchanges reddit refreshtopic reg reload reload-green remove request requirements rfc right roadmap rss rss-feed rss-small save search-small searchpackage searchtag searchtopic see-also sh shipping html sitemap sitetree skin skype smartphone sms sniff socket sort star-full star-half star-none stargold starred statistics stop strategy stumbleupon support svg swf switch switch-off switch-on table tablesortdiamond tablesortdown tablesortup tag tag-blue tag-brown tag-green tag-magenta tag-orange tag-purple tag-red tag-yellow target target-blue target-gray target-green target-orange target-red tasks technorati thumbs-down thumbs-up tip todo toggleclose toggleclose-mini toggleclose-small toggleopen toggleopen-mini toggleopen-small toggleopenleft toggleopenleft-small toolbox tooth topicbacklinks topicdiffs topmenu traffic-light trash ttf twiki twiki-alert twiki-gray twiki-help twiki-irc twitter txt unchecked unchecked-round unchecked-square up updated useractive useradd userinactive uweb-bo uweb-bo12 uweb-g uweb-gs uweb-m12 uweb-o uweb-o12 uweb-o14 uweb-oo uweb-os vcard vector video viewtopic vision vsd vsd warning watch watchlist wav web-bg web-bg-small windows wip wrench wri xls xls xmind xml xml-feed xml-small xps xsl ying-yang youtube zip

Usage

Write this: To get: Raw view:
%ICON{help}% Help <img src="/twiki/pub/TWiki/TWikiDocGraphics/help.gif" .... />
%ICON{ "tip" format="$url" }% tip.gif https://gaia.ub.edu/twiki/pub/TWiki/TWikiDocGraphics/tip.gif
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: %ICON{}% variable; usage example of icon variable; description shown in image title; file type (gif or png); size (width x height); aliases (if any).

Note Document icons

  Variable Description Type Size Alias
Airplane %ICON{airplane}% Airplane gif 16x16  
Award %ICON{award}% Award gif 16x16  
Barcode %ICON{barcode}% Barcode gif 16x16  
Bed %ICON{bed}% Bed gif 16x16  
Blank box %ICON{blank}% Blank box gif 16x16  
Blank box, transparent %ICON{blank-bg}% Blank box, transparent gif 16x16  
Bomb %ICON{bomb}% Bomb gif 16x16  
Book %ICON{book}% Book gif 16x16  
Speech bubble %ICON{bubble}% Speech bubble gif 16x16  
Bug %ICON{bug}% Bug gif 16x16  
Bar chart %ICON{chart-bar}% Bar chart gif 16x16  
Pie chart %ICON{chart-pie}% Pie chart gif 16x16  
Color wheel %ICON{color-wheel}% Color wheel gif 16x16  
Color wheel, transparent %ICON{color-wheel-bg}% Color wheel, transparent gif 16x16  
Comments %ICON{comments}% Comments gif 16x16  
Connections %ICON{connections}% Connections gif 16x16  
Database %ICON{database}% Database gif 16x16  
Days, Calendar %ICON{days}% Days, Calendar gif 16x16  
Download %ICON{download}% Download gif 16x16  
Fax %ICON{fax}% Fax gif 16x16  
Filter %ICON{filter}% Filter gif 16x16  
Food %ICON{food}% Food gif 16x16  
Gear %ICON{gear}% Gear gif 16x16  
Globe %ICON{globe}% Globe gif 16x16  
Graduation %ICON{graduation}% Graduation gif 16x16  
Pointing hand %ICON{hand}% Pointing hand gif 16x16  
Heart %ICON{heart}% Heart gif 16x16  
Help %ICON{help}%, %H% Help gif 16x16  
Help video %ICON{help-video}% Help video gif 16x16  
Hourglass %ICON{hourglass}% Hour glass (clock) gif 16x16  
Info %ICON{info}% Info gif 16x16  
Legal %ICON{legal}% Legal gif 16x16  
Luggage %ICON{luggage}% Luggage gif 16x16  
Map %ICON{map}% Map gif 16x16  
Mechanics %ICON{mechanics}% Mechanics gif 16x16  
Megaphone %ICON{megaphone}% Megaphone gif 16x16  
Meeting %ICON{meeting}% Meeting gif 16x16  
Mobile %ICON{mobile}% Mobile gif 16x16  
Read more %ICON{more}% Read more gif 16x16  
Read more %ICON{more-small}% Read more gif 13x13  
Move %ICON{move}% Move gif 16x16  
Note %ICON{note}% Note gif 16x16  
Parked %ICON{parked}% Parked gif 16x16  
Parts %ICON{parts}% Parts gif 16x16  
Pencil %ICON{pencil}%, %P% Pencil gif 16x16  
Phone %ICON{phone}% Phone gif 16x16  
Photo %ICON{photo}% Photo gif 13x10  
Plug %ICON{plug}% Plug gif 16x16  
Presentation %ICON{presentation}% Presentation gif 16x16  
Process %ICON{process}% Process gif 16x16  
Profile %ICON{profile}% Profile gif 16x16  
Puzzle %ICON{puzzle}% Puzzle gif 16x16  
QR Code %ICON{qrcode}% QR Code gif 16x16  
Question %ICON{question}% Question gif 16x16  
Quiet %ICON{quiet}% Quiet gif 16x16  
Radioactive %ICON{radioactive}% Radioactive gif 16x16  
Request for comments %ICON{rfc}% Request for comments gif 16x16  
Site map %ICON{sitemap}% Site map gif 16x16  
Site tree %ICON{sitetree}% Site tree gif 16x16  
Skype %ICON{skype}% Skype gif 16x16  
Socket %ICON{socket}% Socket gif 16x16  
Sort %ICON{sort}% Sort gif 16x16  
Gold star, favorites %ICON{stargold}% Gold star, favorites gif 16x16  
Red star, highlight %ICON{starred}%, %S% Red star, highlight gif 16x16  
Star (full) %ICON{star-full}% Star (full) gif 16x16  
Star (half) %ICON{star-half}% Star (half) gif 16x16  
Star (none) %ICON{star-none}% Star (none) gif 16x16  
Statistics %ICON{statistics}% Statistics gif 16x16  
Stop %ICON{stop}% Stop gif 16x16  
Support %ICON{support}% Support gif 16x16  
Switch %ICON{switch}% Switch gif 16x16  
Target %ICON{target}% Target gif 16x16  
Target - blue %ICON{target-blue}% Target - blue gif 16x16  
Target - gray %ICON{target-gray}% Target - gray gif 16x16  
Target - green %ICON{target-green}% Target - green gif 16x16  
Target - orange %ICON{target-orange}% Target - orange gif 16x16  
Target - red %ICON{target-red}% Target - red gif 16x16  
Thumbs-down %ICON{thumbs-down}% Thumbs-down gif 16x16  
Thumbs-up %ICON{thumbs-up}% Thumbs-up gif 16x16  
Tip, idea %ICON{tip}%, %T% Tip, idea gif 16x16  
Toolbox %ICON{toolbox}% Toolbox gif 16x16  
Tooth %ICON{tooth}% Tooth gif 16x16  
Topmenu %ICON{topmenu}% Topmenu gif 16x16  
Traffic light %ICON{traffic-light}% Traffic light gif 16x16  
VCard %ICON{vcard}% VCard gif 16x16  
Video %ICON{video}% Video gif 13x10  
Warning, important %ICON{warning}%, %X% Warning, important gif 16x16  
Watch %ICON{watch}% Watch gif 16x16  
Work in progress, under construction %ICON{wip}% Work in progress, under construction gif 16x16  
Wrench, tools %ICON{wrench}% Wrench, tools gif 16x16  
Ying Yang %ICON{ying-yang}% Ying Yang gif 16x16  

View topic Topic, Attach file file, Folder folder icons

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

Person Person, Group group, Lock access icons

  Variable Description Type Size Alias
Person %ICON{person}% Person gif 16x16  
Persons %ICON{persons}% Persons gif 16x16  
Group %ICON{group}% Group gif 16x16  
Active user %ICON{useractive}% Active user gif 16x16  
Inactive user %ICON{userinactive}% Inactive user gif 16x16  
Building %ICON{building}% Building gif 16x16  
Buildings %ICON{buildings}% Buildings gif 16x16  
Log out %ICON{logout}% Log out gif 16x16  
Key %ICON{key}% Key gif 16x16  
Lock %ICON{lock}% Lock gif 16x16  
Lock, unlocked %ICON{lock-open}% Lock, unlocked gif 16x16  
Locked topic %ICON{locktopic}% Locked topic gif 16x16  
Locked topic, gray %ICON{locktopicgray}% Locked topic, gray gif 16x16  
Locked folder %ICON{lockfolder}% Locked folder gif 16x16  
Locked folder, gray %ICON{lockfoldergray}% Locked folder, gray gif 16x16  

Facebook Social networking, Stumbleupon bookmarks

Bit.ly %ICON{bitly}% Bit.ly gif 16x16  
Blogger %ICON{blogger}% Blogger gif 16x16  
Delicious %ICON{delicious}% Delicious gif 16x16  
Digg %ICON{digg}% Digg gif 16x16  
Facebook %ICON{facebook}% Facebook gif 16x16  
Google %ICON{google}% Google gif 16x16  
LinkedIn %ICON{linkedin}% LinkedIn gif 16x16  
Reddit %ICON{reddit}% Reddit gif 16x16  
Stumbleupon %ICON{stumbleupon}% Stumbleupon gif 16x16  
Technorati %ICON{technorati}% Technorati gif 16x16  
Twitter %ICON{twitter}% Twitter gif 16x16  
Windows %ICON{windows}% Windows gif 16x16  

Changes Changes, Notify notification icons

  Variable Description Type Size Alias
Changes %ICON{changes}% Changes gif 16x16  
Changes %ICON{changes-small}% Changes gif 13x13  
Recent changes %ICON{recentchanges}% Recent changes gif 16x16  
Mail %ICON{mail}% Mail gif 16x16  
Notify %ICON{notify}% Notify gif 16x16  
RSS feed, rounded corners %ICON{feed}% RSS feed, rounded corners gif 16x16  
RSS feed, gray box %ICON{rss}% RSS feed, gray box gif 16x16  
RSS feed %ICON{rss-feed}% RSS feed gif 36x14  
RSS feed, text %ICON{rss-small}% RSS feed, text gif 16x16  
XML feed %ICON{xml-feed}% XML feed gif 36x14  
XML feed %ICON{xml-small}% XML feed gif 16x16  

Yes / Done Status, Flag flag, Red led LED, Yellow tag tag icons

  Variable Description Type Size Alias
NEW %ICON{new}%, %N% NEW gif 30x16  
TODO %ICON{todo}% TODO gif 37x16  
UPDATED %ICON{updated}%, %U% UPDATED gif 55x16  
DONE %ICON{done}% DONE gif 37x16  
CLOSED %ICON{closed}% CLOSED gif 48x16  
Processing %ICON{processing}% Processing gif 16x16  
Processing, transparent %ICON{processing-bg}% Processing, transparent gif 16x16  
Processing %ICON{processing-32}% Processing gif 32x32  
Processing, transparent %ICON{processing-32-bg}% Processing, transparent gif 32x32  
Processing bar %ICON{processing-bar}% Processing bar gif 92x16  
Processing bar, wide %ICON{processing-bar-wide}% Processing bar, wide gif 124x12  
Minus %ICON{minus}% Minus gif 16x16  
Plus %ICON{plus}% Plus gif 16x16  
Close %ICON{close}% Close gif 16x16  
Cancel %ICON{choice-cancel}% Cancel gif 16x16  
No %ICON{choice-no}% No gif 16x16  
Yes / Done %ICON{choice-yes}%, %Y% Yes / Done gif 16x16  
Unchecked checkbox %ICON{unchecked}% Unchecked checkbox gif 16x16  
Checked checkbox %ICON{checked}% Checked checkbox gif 16x16  
Unchecked checkbox, square %ICON{unchecked-square}% Unchecked checkbox, square gif 16x16  
Checked checkbox, square %ICON{checked-square}% Checked checkbox, square gif 16x16  
Unchecked checkbox, round %ICON{unchecked-round}% Unchecked checkbox, round gif 16x16  
Checked checkbox, round %ICON{checked-round}% Checked checkbox, round gif 16x16  
Flag %ICON{flag}% Flag gif 16x16  
Gray flag %ICON{flag-gray}% Gray flag gif 16x16  
Small gray flag %ICON{flag-gray-small}% Small gray flag gif 13x13  
Aqua led %ICON{led-aqua}% Aqua led gif 16x16  
Blue led %ICON{led-blue}% Blue led gif 16x16  
Gray led %ICON{led-gray}% Gray led gif 16x16  
Green led %ICON{led-green}% Green led gif 16x16  
Orange led %ICON{led-orange}% Orange led gif 16x16  
Purple led %ICON{led-purple}% Purple led gif 16x16  
Red led %ICON{led-red}% Red led gif 16x16  
Yellow led %ICON{led-yellow}% Yellow led gif 16x16  
Aqua led %ICON{led-box-aqua}% Aqua led gif 16x16  
Blue led %ICON{led-box-blue}% Blue led gif 16x16  
Gray led %ICON{led-box-gray}% Gray led gif 16x16  
Green led %ICON{led-box-green}% Green led gif 16x16  
Orange led %ICON{led-box-orange}% Orange led gif 16x16  
Purple led %ICON{led-box-purple}% Purple led gif 16x16  
Red led %ICON{led-box-red}% Red led gif 16x16  
Yellow led %ICON{led-box-yellow}% Yellow led gif 16x16  
Tag %ICON{tag}% Tag gif 16x16  
Blue tag %ICON{tag-blue}% Blue tag gif 16x16  
Brown tag %ICON{tag-brown}% Brown tag gif 16x16  
Green tag %ICON{tag-green}% Green tag gif 16x16  
Magenta tag %ICON{tag-magenta}% Magenta tag gif 16x16  
Orange tag %ICON{tag-orange}% Orange tag gif 16x16  
Purple tag %ICON{tag-purple}% Purple tag gif 16x16  
Red tag %ICON{tag-red}% Red tag gif 16x16  
Yellow tag %ICON{tag-yellow}% Yellow tag gif 16x16  

Home Navigation icons

  Variable Description Type Size Alias
Home %ICON{home}% Home gif 16x16  
Site map %ICON{sitemap}% Site map gif 16x16  
Site tree %ICON{sitetree}% Site tree gif 16x16  
Topic back-links %ICON{topicbacklinks}% Topic back-links gif 16x16  
Meet here %ICON{arrowdot}% Meet here gif 16x16  
External site %ICON{external}% External site gif 16x16  
Left %ICON{left}% Left gif 16x16  
Right %ICON{right}% Right gif 16x16  
Up %ICON{up}% Up gif 16x16  
Down %ICON{down}% Down gif 16x16  
Arrow blue left %ICON{arrowbleft}% Arrow blue left gif 16x16  
Arrow blue right %ICON{arrowbright}% Arrow blue right gif 16x16  
Arrow blue up %ICON{arrowbup}% Arrow blue up gif 16x16  
Arrow blue down %ICON{arrowbdown}% Arrow blue down gif 16x16  
Arrow left %ICON{arrowleft}% Arrow left gif 16x16  
Arrow right %ICON{arrowright}%, %M% Arrow right gif 16x16  
Arrow up %ICON{arrowup}% Arrow up gif 16x16  
Arrow down %ICON{arrowdown}% Arrow down gif 16x16  
Go to start %ICON{go_start}% Go to start gif 16x16  
Go fast back %ICON{go_fb}% Go fast back gif 16x16  
Go back %ICON{go_back}% Go back gif 16x16  
Go forward %ICON{go_forward}% Go forward gif 16x16  
Go fast forward %ICON{go_ff}% Go fast forward gif 16x16  
Go to end %ICON{go_end}% Go to end gif 16x16  
Menu dropdown %ICON{menu-down}% Menu dropdown gif 14x16  
Menu arrow right %ICON{menu-right}% Menu arrow right gif 10x16  

Close toggle, Twisty close toggle Interface icons

  Variable Description Type Size Alias
Monospace %ICON{monospace}% Monospace gif 16x16  
Proportional %ICON{proportional}% Proportional gif 16x16  
Sort table %ICON{tablesortdiamond}% Sort table gif 11x13  
Sort table descending %ICON{tablesortdown}% Sort table descending gif 11x13  
Sort table ascending %ICON{tablesortup}% Sort table ascending gif 11x13  
Open toggle, Twisty open toggle %ICON{toggleopen}% Open toggle, Twisty open toggle gif 16x16  
Close toggle, Twisty close toggle %ICON{toggleclose}% Close toggle, Twisty close toggle gif 16x16  
Open toggle, Twisty open toggle %ICON{toggleopen-small}% Open toggle, Twisty open toggle gif 16x16  
Close toggle, Twisty close toggle %ICON{toggleclose-small}% Close toggle, Twisty close toggle gif 16x16  
Open toggle, Twisty open toggle %ICON{toggleopen-mini}% Open toggle, Twisty open toggle gif 7x9  
Close toggle, Twisty close toggle %ICON{toggleclose-mini}% Close toggle, Twisty close toggle gif 7x9  
Open toggle, Twisty open toggle %ICON{toggleopenleft}% Open toggle, Twisty open toggle gif 16x16  
Open toggle, Twisty open toggle %ICON{toggleopenleft-small}% Open toggle, Twisty open toggle gif 16x16  
Remove button, small %ICON{remove}% Remove button, small gif 12x12  
Web background %ICON{web-bg}% Web background gif 16x16  
Web background %ICON{web-bg-small}% Web background gif 13x13  

TWiki logo TWiki icons

  Variable Description Type Size Alias
Add-on %ICON{addon}% Add-on gif 16x16  
Application %ICON{application}% Application gif 16x16  
Code %ICON{code}% Code gif 16x16  
Package %ICON{package}% Package gif 16x16  
Plugin %ICON{plugin}% Plugin gif 16x16  
Tag %ICON{tag}% Tag gif 16x16  
Search package %ICON{searchpackage}% Search package gif 16x16  
Search tag %ICON{searchtag}% Search tag gif 16x16  
Skin %ICON{skin}% Skin gif 16x16  
TWiki logo %ICON{twiki}% TWiki logo gif 16x16  
TWiki Alert %ICON{twiki-alert}% TWiki Alert gif 16x16  
TWiki logo, gray scale %ICON{twiki-gray}% TWiki logo, gray scale gif 16x16  
TWiki Internet Relay Chat %ICON{twiki-irc}% TWiki Internet Relay Chat logo gif 16x16  

Line graph up-right Block graphics

  Variable Description Type Size Alias
Line graph left-down %ICON{line_ld}% Line graph left-down gif 16x16  
Line graph left-right %ICON{line_lr}% Line graph left-right gif 16x16  
Line graph left-right-down %ICON{line_lrd}% Line graph left-right-down gif 16x16  
Line graph right-down %ICON{line_rd}% Line graph right-down gif 16x16  
Line graph up-down %ICON{line_ud}% Line graph up-down gif 16x16  
Line graph up-down-left %ICON{line_udl}% Line graph up-down-left gif 16x16  
Line graph up-down-left-right %ICON{line_udlr}% Line graph up-down-left-right gif 16x16  
Line graph up-down-right %ICON{line_udr}% Line graph up-down-right gif 16x16  
Line graph up-left %ICON{line_ul}% Line graph up-left gif 16x16  
Line graph up-left-right %ICON{line_ulr}% Line graph up-left-right gif 16x16  
Line graph up-right %ICON{line_ur}% Line graph up-right gif 16x16  
Line graph up-right, gray %ICON{line_ur_gray}% Line graph up-right, gray gif 16x16  
Dot graph left-down %ICON{dot_ld}% Dot graph left-down gif 16x16  
Dot graph left-right %ICON{dot_lr}% Dot graph left-right gif 16x16  
Dot graph left-right-down %ICON{dot_lrd}% Dot graph left-right-down gif 16x16  
Dot graph right-down %ICON{dot_rd}% Dot graph right-down gif 16x16  
Dot graph up-down %ICON{dot_ud}% Dot graph up-down gif 16x16  
Dot graph up-down-left %ICON{dot_udl}% Dot graph up-down-left gif 16x16  
Dot graph up-down-left-right %ICON{dot_udlr}% Dot graph up-down-left-right gif 16x16  
Dot graph up-down-right %ICON{dot_udr}% Dot graph up-down-right gif 16x16  
Dot graph up-left %ICON{dot_ul}% Dot graph up-left gif 16x16  
Dot graph up-left-right %ICON{dot_ulr}% Dot graph up-left-right gif 16x16  
Dot graph up-right %ICON{dot_ur}% Dot graph up-right gif 16x16  
Empty transparent 16x16 spacer %ICON{empty}% Empty transparent 16x16 spacer gif 16x16  
Parent arrow %ICON{parent_gray}% Parent arrow gif 16x16  

GIF Filetype icons

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

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

Extended Usage

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

ICON Variable

Use any of the doc graphics defined in TWiki.TWikiDocGraphics. The ICON variable supports these parameters:

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

  • %ICON{"flag-gray"}% returns: Gray flag
  • %ICON{"pdf"}% returns: PDF
  • %ICON{"smile.pdf"}% returns: PDF
  • %ICON{"/dont/you/dare/smile.pdf"}% returns: PDF
  • %ICON{"http://twiki.org/doc/xhtml.xsl"}% returns: XSL (XML style sheet)
  • %ICON{"bubble" format="$description icon is defined in [[$web.$topic]]"}% returns: Speech bubble icon is defined in TWiki.TWikiDocGraphics

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, %ICONURL{"thumbs-up"}% is a shortcut for %ICON{"thumbs-up" format="$url"}%, returning https://gaia.ub.edu/twiki/pub/TWiki/TWikiDocGraphics/thumbs-up.gif, which renders as thumbs-up.gif.

ICONURLPATH Variable

The ICONURLPATH variable returns just the URL path of a doc graphic image. For example, %ICONURLPATH{"thumbs-up"}% is a shortcut for %ICON{"thumbs-up" format="$urlpath"}%, rendering as /twiki/pub/TWiki/TWikiDocGraphics/thumbs-up.gif.

Icon shortcuts with preferences settings

In Main.TWikiPreferences set a variable to an ICON, for example:

  * Set H = %ICON{help}%

Now you can use the icon by writing %H%

Emoticons in SmiliesPlugin

The SmiliesPlugin uses a different shorthand than %VARIABLES%. For example, :-) renders as smile

Links with icons

To create a link with an image, write:
[[WebHome][%ICON{home}% Home]] to get: Home Home

To get rid of the underline under the space, write:
[[WebHome][%ICON{home}%]] [[WebHome][Home]] to get: Home Home

List all icons

Format: List all icons,
including aliases: 		List unique icons only: Example:
Name list,
comma-space delimited: 		%ICON{list:all-names}% %ICON{list:unique-names}% addon, air, airplane, ...
Icon list: %ICON{list:all-icons}% %ICON{list:unique-icons}% Add-on Adobe Air Airplane...
Info list,
icons with usage info: 		%ICON{list:all-info}% %ICON{list:unique-info}% addon air airplane...
Detailed list,
table format: 		%ICON{list:all-table}% %ICON{list:unique-table}% (similar to table format above)

TIP Hint: The $LIST...() functions of the SpreadSheetPlugin can be used to manipulate a name list. Example: 

%CALC{$LISTJOIN($sp, $LISTMAP($NOP(%)ICON{$item}$NOP(%), %ICON{list:unique-names}%))}%
Is equivalent to: 
%ICON{list:unique-icons}%

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 Main.SiteDocGraphics.

Note: Documentation graphics are defined in TWiki.TWikiDocGraphics. The list of documentation graphics topics is defined by the ICONTOPIC setting in TWiki.TWikiPreferences and can be overloaded in Main.TWikiPreferences.

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 %ICON{action:refresh-cache}%.

Interactive example: Refresh ICON cache.

Related Topics: VarICON, TWiki.TWikiDocGraphics, TWikiDocGraphicsTemplate, TWikiSkins, DeveloperDocumentationCategory, AdminDocumentationCategory

Contributors: Most icons on this page are designed by TWiki:Main.PeterThoeny. Many of the original icons were recreated by TWiki:Main.ArthurClemens.

This topic: TWiki > TWikiDocGraphics
Topic revision: r46 - 2011-03-01 - TWikiContributor
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2022 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.