Icons

Last modified by Lucas Charpentier (Sereza7) on 2024/02/15

Using icons in XWiki

In order to add an icon in XWiki content, use the Icon Macro in your velocity template. This is the recommended way, by default it will fetch the icon from the current icon theme.

In order to add an icon in a Velocity script, you can use the icon manager script service with syntax such as $services.icon.renderHTML('add').

In order to access an icon, you can also use the Icon REST API. It's recommended to not query a specific icon theme but let the API share the icon of the current icon theme.

In the codebase, you might still find some other ways to use icons that are deprecated:

Icon themes

XWiki supports multiple icon themes. On a standard flavor of XWiki, Silk and Font Awesome (FA) are available. As of now, the default on the standard flavor is Font Awesome 4.

List of available icon theme extensions

XWiki icon set

This is the set of icons that XWiki wants to support. Naturally, they should be present in every Icon Theme!

Icon naming convention

In order to keep long term consistency on the icon names, a set of rules have been discussed. Those must be followed when introducing a new icon to the XWiki Icon Set.

  • Use kebab-case.
  • For composite icon names, the main noun is the first in the name.
  • Remove hyphens from compound nouns.

Examples:

  • ‘file-add’ and not ‘add-file’ because the main noun is ‘file’ here ‘add’ is the action
  • ‘pdf-export’ and not ‘export-pdf’ because the main noun is ‘pdf’ and ‘export’ is the action.
  • ‘bullet-black’ and not ‘black-bullet’ because the main noun is ‘bullet’ and ‘black’ is an adjective
  • ‘emoticon-smile’ and not ‘smile-emoticon’ because the main noun is ‘emoticon’ and ‘smile’ is a complementary noun.
  • ‘fastforward’ is a compound noun from which we removed the hyphen.
  • ‘file-pdf’ and not ‘pdf-file’ because in the meaning of this icon, the main meaning is ‘file’, while ‘pdf’ only helps to refine the meaning. On the contrary, ‘pdf-file’ would mean that we want a ‘file’ variation on the main concept of ‘pdf’.

Mapping

TODO

  Split this table in between multiple columns and move those to the appropriate piece of documentation.

The icons are sorted alphabetically.

NameSilkFont AwesomeGlyphicon (Bootstrap)Elusive
addadd add fa-plus glyphicon-plus el-icon-plus
align-centertext_align_center text_align_center fa-align-center glyphicon-align-center el-icon-align-center
align-justifytext_align_justify text_align_justify fa-align-justify glyphicon-align-justify el-icon-align-justify
align-lefttext_align_left text_align_left fa-align-left glyphicon-align-left el-icon-align-left
align-righttext_align_right text_align_right fa-align-right glyphicon-align-right el-icon-align-right
anchoranchor anchor fa-anchor
arrow-inarrow_in arrow_in fa-window-minimize
arrowsarrow_out arrow_out fa-arrows-alt glyphicon-fullscreen
attachattach attach fa-paperclip glyphicon-paperclip el-icon-paper-clip
backwardcontrol_rewind control_rewind fa-backward glyphicon-backward el-icon-backward
bellbell bell fa-bell glyphicon-bell el-icon-bell
boldtext_bold text_bold fa-bold glyphicon-bold el-icon-bold
bombbomb bomb fa-bomb
bookbook book fa-book glyphicon-book el-icon-book
brancharrow_branch arrow_branch fa-code-fork
briefcasebriefcase briefcase fa-briefcase glyphicon-briefcase el-icon-briefcase
bugbug bug fa-bug
buildingbuilding building fa-building
bullet-blackbullet_black bullet_black fa-circle
calculatorcalculator calculator fa-calculator
calendarcalendar calendar fa-calendar glyphicon-calendar el-icon-calendar
cameracamera camera fa-camera glyphicon-camera el-icon-camera
carcar car fa-car glyphicon-bed el-icon-car
caret-downbullet_arrow_down bullet_arrow_down fa-caret-down glyphicon-triangle-bottom el-icon-caret-down
caret-rightbullet_go bullet_go fa-caret-right glyphicon-triangle-right el-icon-caret-right
caret-upbullet_arrow_up bullet_arrow_up fa-caret-up glyphicon-triangle-top el-icon-caret-up
certificaterosette rosette fa-certificate glyphicon-certificate el-icon-certificate
chart-barchart_bar chart_bar fa-bar-chart-o
chart-organisationchart_organisation chart_organisation fa-sitemap
checkaccept accept fa-check glyphicon-ok el-icon-ok
clockclock clock fa-clock-o
cloudweather_clouds weather_clouds fa-cloud glyphicon-cloud el-icon-cloud
coffeecup cup fa-coffee
cogcog cog fa-cog glyphicon-cog el-icon-cog
columnstext_columns text_columns fa-columns
commentcomment comment fa-comment glyphicon-comment el-icon-comment
commentscomments comments fa-comments
contrastcontrast contrast fa-adjust
copypage_copy page_copy fa-copy glyphicon-edit el-icon-file-edit
creditcardcreditcards creditcards fa-credit-card glyphicon-credit-card el-icon-credit-card
crosscross cross fa-times glyphicon-remove el-icon-remove
cubebox box fa-cube
cubesbricks bricks fa-cubes
cutcut cut fa-cut
databasedatabase database fa-database
deletedelete delete fa-minus-circle glyphicon-minus-sign el-icon-minus-sign
desktopcomputer computer fa-desktop
dollarmoney_dollar money_dollar fa-dollar
downarrow_down arrow_down fa-arrow-down glyphicon-arrow-down
downloadapplication_put application_put fa-download glyphicon-download-alt el-icon-download-alt
drivedrive drive fa-hdd-o glyphicon-hdd el-icon-hdd
editpage_edit page_edit fa-edit glyphicon-edit el-icon-edit
ejectcontrol_eject control_eject fa-eject glyphicon-eject el-icon-eject
emoticon-smileemoticon_smile emoticon_smile fa-smile-o glyphicon-user el-icon-smiley
envelopeemail email fa-envelope-o glyphicon-envelope el-icon-envelope
errorexclamation exclamation fa-exclamation-circle glyphicon-exclamation-sign el-icon-exclamation-sign
euromoney_euro money_euro fa-euro glyphicon-euro el-icon-euro
eyeeye eye fa-eye glyphicon-eye-open el-icon-eye-open
fastforwardcontrol_fastforward control_fastforward fa-fast-forward glyphicon-fast-forward el-icon-fast-forward
fastbackwardcontrol_rewind control_rewind fa-fast-backward
femalefemale female fa-female
filepage page fa-file glyphicon-file el-icon-file
file-archivepage_white_compressed page_white_compressed fa-file-archive-o
file-codepage_white_code page_white_code fa-file-code-o
file-excelpage_white_excel page_white_excel fa-file-excel-o
file-pdfpage_white_acrobat page_white_acrobat fa-file-pdf-o
file-powerpointpage_white_powerpoint page_white_powerpoint fa-file-powerpoint-o
file-textpage_white_text page_white_text fa-file-text-o
file-whitepage_white page_white fa-file-o
file-wordpage_white_word page_white_word fa-file-word-o
filmfilm film fa-film glyphicon-film el-icon-film
filterfind find fa-filter
flagflag_blue flag_blue fa-flag glyphicon-flag el-icon-flag
floppydiskdisk disk fa-floppy-o glyphicon-floppy-disk el-icon-floppy-disk
folderfolder folder fa-folder glyphicon-folder-open el-icon-folder-open
fontfont font fa-font glyphicon-font el-icon-font
gamepadcontroller controller fa-gamepad
gbpmoney_pound money_pound fa-gbp glyphicon-gbp el-icon-gbp
glassdrink drink fa-glass glyphicon-glass el-icon-glass
groupgroup group fa-group
heartheart heart fa-heart glyphicon-heart el-icon-heart
heart-emptyheart heart fa-heart-o glyphicon-heart-empty el-icon-heart-empty
homehouse house fa-home glyphicon-home el-icon-home
imageimage image fa-image glyphicon-picture el-icon-picture
indent-lefttext_indent text_indent fa-indent glyphicon-indent-left el-icon-indent-left
indent-righttext_indent_remove text_indent_remove fa-outdent glyphicon-indent-right el-icon-indent-right
infoinformation information fa-info-circle glyphicon-info-sign el-icon-info-sign
italictext_italic text_italic fa-italic glyphicon-italic el-icon-italic
keykey key fa-key
keyboardkeyboard keyboard fa-keyboard-o
leftarrow_left arrow_left fa-arrow-left glyphicon-arrow-left
lightbulblightbulb lightbulb fa-lightbulb-o
linklink link fa-link glyphicon-link el-icon-link
listapplication_view_list application_view_list fa-list-alt glyphicon-list-alt el-icon-list-alt
list-bulletstext_list_bullets text_list_bullets fa-list-ul glyphicon-list el-icon-list
list-numberstext_list_numbers text_list_numbers fa-list-ol
locklock lock fa-lock glyphicon-lock el-icon-lock
loginuser_go user_go fa-sign-in glyphicon-log-in el-icon-circle-arrow-right
logoutuser_go user_go fa-sign-out glyphicon-log-out el-icon-circle-arrow-right
malemale male fa-male
menubullet_arrow_down bullet_arrow_down fa-bars glyphicon-menu-hamburger el-icon-lines
minus-squarebullet_toggle_minus bullet_toggle_minus fa-minus-square glyphicon-minus-sign el-icon-minus-sign
moneymoney money fa-money
more-verticalbullet_arrow_down bullet_arrow_down fa-ellipsis-v glyphicon-option-vertical el-icon-chevron-down
movepage_go page_go fa-external-link glyphicon-new-window el-icon-share
musicmusic music fa-music glyphicon-music el-icon-music
pagepage_white_text page_white_text fa-file-o glyphicon-file el-icon-file
pastepaste_plain paste_plain fa-paste
pausecontrol_pause control_pause fa-pause glyphicon-pause el-icon-pause
pencilpencil pencil fa-pencil glyphicon-pencil el-icon-pencil
phonetelephone telephone fa-phone
playcontrol_play control_play fa-play glyphicon-play el-icon-play
plus-squarebullet_toggle_plus bullet_toggle_plus fa-plus-square glyphicon-plus-sign el-icon-plus-sign
printprinter printer fa-print
questionhelp help fa-question-circle glyphicon-question-sign el-icon-question-sign
randomarrow_switch arrow_switch fa-random glyphicon-random el-icon-random
refresharrow_refresh arrow_refresh fa-refresh glyphicon-refresh
removecancel cancel fa-times-circle glyphicon-remove-sign el-icon-remove-sign
repeatarrow_redo arrow_redo fa-repeat glyphicon-retweet
rightarrow_right arrow_right fa-arrow-right glyphicon-arrow-right
rotate-leftarrow_rotate_anticlockwise arrow_rotate_anticlockwise fa-rotate-left
rotate-rightarrow_rotate_clockwise arrow_rotate_clockwise fa-rotate-right glyphicon-repeat
rssfeed feed fa-rss
searchmagnifier magnifier fa-search glyphicon-search el-icon-search
search-minuszoom_out zoom_out fa-search-minus
search-pluszoom_in zoom_in fa-search-plus
shieldshield shield fa-shield
shoppingcartcart cart fa-shopping-cart glyphicon-shopping-cart el-icon-shopping-cart
soccersport_soccer sport_soccer fa-futbol-o
spacefolder folder fa-folder-open glyphicon-folder-open el-icon-folder-open
starstar star fa-star
step-forwardcontrol_end control_end fa-step-forward glyphicon-step-forward el-icon-step-forward
step-backwardcontrol_start control_start fa-step-backward glyphicon-step-backward el-icon-step-backward
stopcontrol_stop control_stop fa-stop glyphicon-stop el-icon-stop
strikethroughtext_strikethrough text_strikethrough fa-strikethrough
subscripttext_subscript text_subscript fa-subscript
sunweather_sun weather_sun fa-sun-o
superscripttext_superscript text_superscript fa-superscript
switcharrow_switch arrow_switch fa-random glyphicon-random el-icon-random
tabletable table fa-table
table-sorttable_sort table_sort fa-sort
terminalapplication_osx_terminal application_osx_terminal fa-terminal glyphicon-console
thapplication_view_tile application_view_tile fa-th glyphicon-th el-icon-th
translatepage_white_world page_white_world fa-language glyphicon-globe el-icon-globe
trashbin bin fa-trash glyphicon-trash el-icon-trash
trucklorry lorry fa-truck
underlinetext_underline text_underline fa-underline
undoarrow_undo arrow_undo fa-undo
unlinklink_break link_break fa-unlink
unlocklock_open lock_open fa-unlock
uparrow_up arrow_up fa-arrow-up glyphicon-arrow-up
useruser user fa-user
volume-upsound sound fa-volume-up
volume-downsound_low sound_low fa-volume-down
volume-offsound_none sound_none fa-volume-off
warningerror error fa-exclamation-triangle glyphicon-warning-sign el-icon-warning-sign
wikiworld world fa-globe glyphicon-globe el-icon-globe
worldworld world fa-globe glyphicon-globe el-icon-globe
wrenchwrench wrench fa-wrench glyphicon-wrench el-icon-wrench
yenmoney_yen money_yen fa-yen

Icon strategy

As of now, there's a consensus that the skeuomorph based Silk icons do look out of place in our modern UI.
One of the long term goals of the development team is to migrate the default to a more up to date icon theme.
However, integration of Silk icons in some UIs sometimes pre-dated the icon theme feature. This is why some elements of the XWiki interface use hard coded Silk icons. Replacing those icons with actual icontheme references is not always easy, because the concept they picture is not always mappable in other icon themes, and there's no easy conversion from Silk to the icon theme. This is especially apparent for technical icons: in Font Awesome, there's no icon for all kind of fields we could show in Silk, and there's no icon for the `composite` icons from Silk such as `addfile`, `editfile`, `addcomment`, `adduser`. Technically, most of those icons could be done with Font Awesome icon stacking, but those icons are difficult to find in any icon theme, so it might not make the most sense to add them to the icon set.

As of now, we can see that hard coded Silk references are still present.

Get Connected