You are here: Foswiki>System Web>TWikiDocGraphics (04 Oct 2010, TWikiContributor)Edit Attach

TWiki Documentation Graphics and File Type Icons

This is the TWiki icon library. The graphics can be used in topics and by web applications. Doc graphics are defined at System.DocumentGraphics.

Usage

Write this: To get: Raw view:
%ICON{help}% help help
%ICON{ "tip" format="$url" }% tip tip
See extended usage below

All icons at a glance

List of unique icons defined in System.DocumentGraphics. Hover over the icon to get icon information.

list:unique-info

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  
%ICON{blank}% Blank box gif 16x16  
%ICON{blank-bg}% Blank box, transparent gif 16x16  
bomb %ICON{bomb}% Bomb gif 16x16  
Book %ICON{book}% Book gif 16x16  
bubble %ICON{bubble}% Speech bubble gif 16x16  
bug %ICON{bug}% Bug gif 16x16  
chart-bar %ICON{chart-bar}% Bar chart gif 16x16  
chart-pie %ICON{chart-pie}% Pie chart gif 16x16  
comments %ICON{comments}% Comments gif 16x16  
connections %ICON{connections}% Connections gif 16x16  
database %ICON{database}% Database gif 16x16  
days %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  
hand %ICON{hand}% Pointing hand gif 16x16  
heart %ICON{heart}% Heart gif 16x16  
help %ICON{help}%, %H% Help 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  
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  
question %ICON{question}% Question gif 16x16  
quiet %ICON{quiet}% Quiet gif 16x16  
radioactive %ICON{radioactive}% Radioactive gif 16x16  
rfc %ICON{rfc}% Request for comments gif 16x16  
sitemap %ICON{sitemap}% Site map gif 16x16  
sitetree %ICON{sitetree}% Site tree gif 16x16  
skype %ICON{skype}% Skype gif 16x16  
socket %ICON{socket}% Socket gif 16x16  
sort %ICON{sort}% Sort gif 16x16  
stargold %ICON{stargold}% Gold star, favorites gif 16x16  
starred %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 %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 %ICON{warning}%, %X% Warning, important gif 16x16  
watch %ICON{watch}% Watch gif 16x16  
wip %ICON{wip}% Work in progress, under construction gif 16x16  
wrench %ICON{wrench}% Wrench, tools gif 16x16  
ying-yang %ICON{ying-yang}% Ying Yang gif 16x16  

viewtopic Topic, attachfile file, folder folder icons

  Variable Description Type Size Alias
viewtopic %ICON{viewtopic}% View topic gif 16x16  
printtopic %ICON{printtopic}% Print topic gif 16x16  
refreshtopic %ICON{refreshtopic}% Refresh topic gif 16x16  
newtopic %ICON{newtopic}% New topic gif 16x16  
edittopic %ICON{edittopic}% Edit topic gif 16x16  
save %ICON{save}% Save gif 16x16  
attachfile %ICON{attachfile}% Attach file gif 16x16  
download %ICON{download}% Download gif 16x16  
trash %ICON{trash}% Trash gif 16x16  
searchtopic %ICON{searchtopic}% Search topic gif 16x16  
Search %ICON{search-small}% Small search button gif 13x13  
topicbacklinks %ICON{topicbacklinks}% Topic back-links gif 16x16  
topicdiffs %ICON{topicdiffs}% Topic difference gif 16x16  
statistics %ICON{statistics}% Statistics gif 16x16  
index %ICON{index}% Index gif 16x16  
indexlist %ICON{indexlist}% Index list gif 16x16  
cachetopic %ICON{cachetopic}% Cache topic gif 16x16  
folder %ICON{folder}% Folder gif 16x16  
table %ICON{table}% Table gif 16x16  
edittable %ICON{edittable}% Edit table gif 16x16  
uweb-bo %ICON{uweb-bo}% UWEB (Universal Wiki Edit Button), blue, outline gif 16x16  
Edit %ICON{uweb-bo12}% UWEB, blue, outline, small gif 12x12  
uweb-g %ICON{uweb-g}% UWEB, green (default) gif 16x16  
uweb-gs %ICON{uweb-gs}% UWEB, green, square gif 16x16  
Edit %ICON{uweb-m12}% UWEB, black, small gif 12x12  
uweb-o %ICON{uweb-o}% UWEB, orange gif 16x16  
Edit %ICON{uweb-o12}% UWEB, orange, small gif 12x12  
uweb-o14 %ICON{uweb-o14}% UWEB, orange, small gif 14x14  
uweb-oo %ICON{uweb-oo}% UWEB, orange, outline gif 16x16  
uweb-os %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  
useractive %ICON{useractive}% Active user gif 16x16  
userinactive %ICON{userinactive}% Inactive user gif 16x16  
building %ICON{building}% Building gif 16x16  
buildings %ICON{buildings}% Buildings gif 16x16  
logout %ICON{logout}% Log out gif 16x16  
key %ICON{key}% Key gif 16x16  
lock %ICON{lock}% Lock gif 16x16  
locktopic %ICON{locktopic}% Locked topic gif 16x16  
locktopicgray %ICON{locktopicgray}% Locked topic, gray gif 16x16  
lockfolder %ICON{lockfolder}% Locked folder gif 16x16  
lockfoldergray %ICON{lockfoldergray}% Locked folder, gray gif 16x16  

facebook Social networking, stumbleupon social bookmarks

bitly %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  
recentchanges %ICON{recentchanges}% Recent changes gif 16x16  
mail %ICON{mail}% Mail gif 16x16  
notify %ICON{notify}% Notify gif 16x16  
feed %ICON{feed}% RSS feed, rounded corners gif 16x16  
rss %ICON{rss}% RSS feed, gray box gif 16x16  
RSS feed %ICON{rss-feed}% RSS feed gif 36x14  
rss-small %ICON{rss-small}% RSS feed, text gif 16x16  
XML feed %ICON{xml-feed}% XML feed gif 36x14  
xml-small %ICON{xml-small}% XML feed gif 16x16  

choice-yes Status, flag flag, led-box-red LED, tag-yellow 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-bg %ICON{processing-bg}% Processing, transparent gif 16x16  
processing %ICON{processing-32}% Processing gif 32x32  
processing %ICON{processing-32-bg}% Processing, transparent gif 32x32  
minus %ICON{minus}% Minus gif 16x16  
plus %ICON{plus}% Plus gif 16x16  
choice-cancel %ICON{choice-cancel}% Cancel gif 16x16  
choice-no %ICON{choice-no}% No gif 16x16  
choice-yes %ICON{choice-yes}%, %Y% Yes / Done gif 16x16  
unchecked %ICON{unchecked}% Unchecked checkbox gif 16x16  
checked %ICON{checked}% Checked checkbox gif 16x16  
unchecked-square %ICON{unchecked-square}% Unchecked checkbox, square gif 16x16  
checked-square %ICON{checked-square}% Checked checkbox, square gif 16x16  
unchecked-round %ICON{unchecked-round}% Unchecked checkbox, round gif 16x16  
checked-round %ICON{checked-round}% Checked checkbox, round gif 16x16  
flag %ICON{flag}% Flag gif 16x16  
flag-gray %ICON{flag-gray}% Gray flag gif 16x16  
Flag %ICON{flag-gray-small}% Small gray flag gif 13x13  
led-aqua %ICON{led-aqua}% Aqua led gif 16x16  
led-blue %ICON{led-blue}% Blue led gif 16x16  
led-gray %ICON{led-gray}% Gray led gif 16x16  
led-green %ICON{led-green}% Green led gif 16x16  
led-orange %ICON{led-orange}% Orange led gif 16x16  
led-purple %ICON{led-purple}% Purple led gif 16x16  
led-red %ICON{led-red}% Red led gif 16x16  
led-yellow %ICON{led-yellow}% Yellow led gif 16x16  
led-box-aqua %ICON{led-box-aqua}% Aqua led gif 16x16  
led-box-blue %ICON{led-box-blue}% Blue led gif 16x16  
led-box-gray %ICON{led-box-gray}% Gray led gif 16x16  
led-box-green %ICON{led-box-green}% Green led gif 16x16  
led-box-orange %ICON{led-box-orange}% Orange led gif 16x16  
led-box-purple %ICON{led-box-purple}% Purple led gif 16x16  
led-box-red %ICON{led-box-red}% Red led gif 16x16  
led-box-yellow %ICON{led-box-yellow}% Yellow led gif 16x16  
tag %ICON{tag}% Tag gif 16x16  
tag-blue %ICON{tag-blue}% Blue tag gif 16x16  
tag-brown %ICON{tag-brown}% Brown tag gif 16x16  
tag-green %ICON{tag-green}% Green tag gif 16x16  
tag-magenta %ICON{tag-magenta}% Magenta tag gif 16x16  
tag-orange %ICON{tag-orange}% Orange tag gif 16x16  
tag-purple %ICON{tag-purple}% Purple tag gif 16x16  
tag-red %ICON{tag-red}% Red tag gif 16x16  
tag-yellow %ICON{tag-yellow}% Yellow tag gif 16x16  

  Variable Description Type Size Alias
home %ICON{home}% Home gif 16x16  
sitemap %ICON{sitemap}% Site map gif 16x16  
sitetree %ICON{sitetree}% Site tree gif 16x16  
topicbacklinks %ICON{topicbacklinks}% Topic back-links gif 16x16  
arrowdot %ICON{arrowdot}% Meet here gif 16x16  
external %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  
arrowbleft %ICON{arrowbleft}% Arrow blue left gif 16x16  
arrowbright %ICON{arrowbright}% Arrow blue right gif 16x16  
arrowbup %ICON{arrowbup}% Arrow blue up gif 16x16  
arrowbdown %ICON{arrowbdown}% Arrow blue down gif 16x16  
arrowleft %ICON{arrowleft}% Arrow left gif 16x16  
arrowright %ICON{arrowright}%, %M% Arrow right gif 16x16  
arrowup %ICON{arrowup}% Arrow up gif 16x16  
arrowdown %ICON{arrowdown}% Arrow down gif 16x16  
go_start %ICON{go_start}% Go to start gif 16x16  
go_fb %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_ff %ICON{go_ff}% Go fast forward gif 16x16  
go_end %ICON{go_end}% Go to end gif 16x16  
menu-down %ICON{menu-down}% Menu dropdown gif 14x16  
menu-right %ICON{menu-right}% Menu arrow right gif 10x16  

toggleclose Interface icons

  Variable Description Type Size Alias
m
 		%ICON{monospace}% Monospace gif 16x16  
p
 		%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  
toggleopen %ICON{toggleopen}% Open toggle, Twisty open toggle gif 16x16  
toggleclose %ICON{toggleclose}% Close toggle, Twisty close toggle gif 16x16  
toggleopen-small %ICON{toggleopen-small}% Open toggle, Twisty open toggle gif 16x16  
toggleclose-small %ICON{toggleclose-small}% Close toggle, Twisty close toggle gif 16x16  
toggleopen-mini %ICON{toggleopen-mini}% Open toggle, Twisty open toggle gif 7x9  
toggleclose-mini %ICON{toggleclose-mini}% Close toggle, Twisty close toggle gif 7x9  
toggleopenleft %ICON{toggleopenleft}% Open toggle, Twisty open toggle gif 16x16  
toggleopenleft-small %ICON{toggleopenleft-small}% Open toggle, Twisty open toggle gif 16x16  
remove %ICON{remove}% Remove button, small gif 12x12  
web-bg %ICON{web-bg}% Web background gif 16x16  
Web %ICON{web-bg-small}% Web background gif 13x13  

twiki TWiki icons

  Variable Description Type Size Alias
addon %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  
searchpackage %ICON{searchpackage}% Search package gif 16x16  
searchtag %ICON{searchtag}% Search tag gif 16x16  
skin %ICON{skin}% Skin gif 16x16  
twiki %ICON{twiki}% TWiki logo gif 16x16  
twiki-alert %ICON{twiki-alert}% TWiki Alert gif 16x16  
twiki-gray %ICON{twiki-gray}% TWiki logo, gray scale gif 16x16  
twiki-irc %ICON{twiki-irc}% TWiki Internet Relay Chat logo gif 16x16  

line_ur Block graphics

  Variable Description Type Size Alias
line_ld %ICON{line_ld}% Line graph left-down gif 16x16  
line_lr %ICON{line_lr}% Line graph left-right gif 16x16  
line_lrd %ICON{line_lrd}% Line graph left-right-down gif 16x16  
line_rd %ICON{line_rd}% Line graph right-down gif 16x16  
line_ud %ICON{line_ud}% Line graph up-down gif 16x16  
line_udl %ICON{line_udl}% Line graph up-down-left gif 16x16  
line_udlr %ICON{line_udlr}% Line graph up-down-left-right gif 16x16  
line_udr %ICON{line_udr}% Line graph up-down-right gif 16x16  
line_ul %ICON{line_ul}% Line graph up-left gif 16x16  
line_ulr %ICON{line_ulr}% Line graph up-left-right gif 16x16  
line_ur %ICON{line_ur}% Line graph up-right gif 16x16  
line_ur_gray %ICON{line_ur_gray}% Line graph up-right, gray gif 16x16  
dot_ld %ICON{dot_ld}% Dot graph left-down gif 16x16  
dot_lr %ICON{dot_lr}% Dot graph left-right gif 16x16  
dot_lrd %ICON{dot_lrd}% Dot graph left-right-down gif 16x16  
dot_rd %ICON{dot_rd}% Dot graph right-down gif 16x16  
dot_ud %ICON{dot_ud}% Dot graph up-down gif 16x16  
dot_udl %ICON{dot_udl}% Dot graph up-down-left gif 16x16  
dot_udlr %ICON{dot_udlr}% Dot graph up-down-left-right gif 16x16  
dot_udr %ICON{dot_udr}% Dot graph up-down-right gif 16x16  
dot_ul %ICON{dot_ul}% Dot graph up-left gif 16x16  
dot_ulr %ICON{dot_ulr}% Dot graph up-left-right gif 16x16  
dot_ur %ICON{dot_ur}% Dot graph up-right gif 16x16  
%ICON{empty}% Empty transparent 16x16 spacer gif 16x16  
parent_gray %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
as %ICON{as}% ActionScript gif 16x16  
air %ICON{air}% Adobe Air gif 16x16  
bat %ICON{bat}% MS-DOS batch file gif 16x16 cmd
bmp %ICON{bmp}% Bitmap gif 16x16 ico, xbm
c %ICON{c}% C source code file gif 16x16 cpp
css %ICON{css}% Cascading Style Sheet file gif 16x16  
dll %ICON{dll}% Dynamic Linked Library; Microsoft application file gif 16x16  
doc %ICON{doc}% Microsoft Word file gif 16x16 rtf
else %ICON{else}% Unknown file format gif 16x16  
eml %ICON{eml}% Microsoft Outlook e-mail file gif 16x16 email
exe %ICON{exe}% Microsoft Executable file gif 16x16  
fla %ICON{fla}% Macromedia Flash Movie gif 16x16  
fon %ICON{fon}% Windows bitmapped font file gif 16x16  
gif %ICON{gif}% GIF gif 16x16 pcx
h %ICON{h}% Header file gif 16x16  
hlp %ICON{hlp}% Standard help file gif 16x16  
html %ICON{html}% HTML gif 16x16 htm, shtml
java %ICON{java}% Java source code file gif 16x16 class
jpg %ICON{jpg}% JPEG gif 16x16 jfif, jpe, jpeg
js %ICON{js}% JavaScript gif 16x16 jse
mdb %ICON{mdb}% Microsoft Access database File gif 16x16 mda, mde
mov %ICON{mov}% Quicktime movie gif 16x16 avi, m1v, mp4, mpa, mpe, mpeg, mpegv, mpg, mpv, mpv2, vbs
mp3 %ICON{mp3}% MP3 gif 16x16  
pdf %ICON{pdf}% PDF gif 16x16  
pl %ICON{pl}% Perl source code file gif 16x16 perl, pm
png %ICON{png}% PNG gif 16x16 tif, tiff
ppt %ICON{ppt}% PowerPoint gif 16x16 pot, ppa, pps, pwz
ps %ICON{ps}% Postscript gif 16x16  
psd %ICON{psd}% Photoshop document gif 16x16  
py %ICON{py}% Python source code file gif 16x16  
ram %ICON{ram}% RealAudio gif 16x16 ra, rm
reg %ICON{reg}% Registry file gif 16x16  
sh %ICON{sh}% Unix shell script gif 16x16  
sniff %ICON{sniff}% sniff gif 16x16  
svg %ICON{svg}% SVG (Scalable Vector Graphics) gif 16x16  
swf %ICON{swf}% SWF (Shockwave Flash) gif 16x16  
ttf %ICON{ttf}% True Type font gif 16x16 pfm
txt %ICON{txt}% Text gif 16x16 inf, ini, text
vector %ICON{vector}% Generic vector gif 16x16  
vsd %ICON{vsd}% Visio document gif 16x16  
wav %ICON{wav}% Waveform sound file gif 16x16 abs, aif, aiff, au, mid, mp2, mp3, mpega, rmi
wri %ICON{wri}% Windows Write gif 16x16  
xls %ICON{xls}% Microsoft Excel Spreadsheet gif 16x16 xla, xlb, xlc, xld, xlk, xll, xlm, xlt, xlw
xml %ICON{xml}% XML gif 16x16  
xsl %ICON{xsl}% XSL (XML style sheet) gif 16x16  
zip %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 System.DocumentGraphics. 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: flag-gray
  • %ICON{"pdf"}% returns: pdf
  • %ICON{"smile.pdf"}% returns: smile.pdf
  • %ICON{"/dont/you/dare/smile.pdf"}% returns: /dont/you/dare/smile.pdf
  • %ICON{"http://twiki.org/doc/xhtml.xsl"}% returns: http://twiki.org/doc/xhtml.xsl
  • %ICON{"bubble" format="$description icon is defined in [[$web.$topic]]"}% returns: bubble

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://iccl.unist.ac.kr/foswiki/pub/System/DocumentGraphics/thumbs-up.png, which renders as thumbs-up.png.

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 /foswiki/pub/System/DocumentGraphics/thumbs-up.png.

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

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}% addon 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 System.DocumentGraphics. The list of documentation graphics topics is defined by the ICONTOPIC setting in System.TWikiPreferences and can be overloaded in Main.SitePreferences.

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, System.DocumentGraphics, 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.
Edit  | Attach | Print version | History: r1 | Backlinks | View wiki text | Edit wiki text | More topic actions
Topic revision: r1 - 04 Oct 2010, TWikiContributor
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback