The document discusses different options for using icons in user interfaces, including icon themes, icon libraries, and icon formats. It provides details on several popular icon libraries such as Font Awesome, Material Design icons, and Glyphicons in terms of their launch date, number of icons, format, and licensing. It also compares image, font, and SVG icon formats and provides examples of using different icon themes and libraries in code. The document concludes with recommendations for choosing, extending, and migrating icon solutions.

1. Icon
Themes
Reusable icon variables and mappings
for customizable user interfaces
#FOSDEM2018@evalica

2. Color
Themes
Simplest way to provide diversity for an
interface

3. Bootstrap
Themes
Controlling multiple aspects of the interface
from colors to typography, spacing, borders,
etc.

4. Icon
Themes
Allow style alternatives
Allow reusability of iconography across
interface

5. Icon Libraries
Silk Glyphicons Halflings Font Awesome Material Design
Launched 2005 2010 2012 2014
Version 1.3 1.9 4.7.0 3.0.1
Number of Icons 1000 265 786 884
Format PNG PNG, SVG, EOT, TTF,
WOFF
SVG, EOT, TTF, OTF,
WOFF, WOFF2
PNG, SVG, EOT, TTF,
WOFF, WOFF2
Resolution 16px 24px, * 14px+, * 18-24-36-48dp, *
License CC BY 2.5 Free to use with
Bootstrap 3
SIL OFL 1.1 Apache 2.0

6. Silk famfamfam Font Awesome

7. Icon Libraries
Silk Glyphicons Halflings Font Awesome Material Design
Launched 2005 2010 2012 2014
Version 1.3 1.9 4.7.0 3.0.1
Number of Icons 1000 265 786 884
Format PNG PNG, SVG, EOT, TTF,
WOFF
SVG, EOT, TTF, OTF,
WOFF, WOFF2
PNG, SVG, EOT, TTF,
WOFF, WOFF2
Resolution 16px 24px, * 14px+, * 18-24-36-48dp, *
License CC BY 2.5 Free to use with
Bootstrap 3
SIL OFL 1.1 Apache 2.0

8. Glyphicon Halflings Font Awesome

9. Home Icon
Silk Glyphicons Font Awesome Material Design
Icon
PNG <img src="house.png"/> <img src="home.png"/> *
<img
src="/ic_home_black_24dp_1x
.png"/>
Font -
<span class="glyphicon
glyphicon-home"></span>
<span class="fa
fa-home"></span>
<i
class="material-icons">home
</i>
SVG - - *
<object
data="/ic_home_black_24px.s
vg" type="image/svg+xml"/>
CSS - e021 f015 -

10. Decorative Icons
{{html}}
<button type="submit" class="btn btn-default"
title="Edit">
<span class="btn-label action-edit">Edit</span>
</button>
{{/html}}
{{css}}
.action-edit {
padding-left: 16px;
background-repeat: no-repeat;
background-image:
url(".../editor/ic_mode_edit_black_18dp.png");}
{{/css}}
Inline Icons
{{html}}
<button type="submit" class="btn btn-default"
title="Edit">
<img src=".../editor/ic_mode_edit_black_18dp.png"
alt="Edit" title="Edit"/>
<span class="btn-label">Edit</span>
</button>
{{html}}

11. Icon Libraries
Silk Glyphicons Halflings Font Awesome Material Design
Launched 2005 2010 2012 2014
Version 1.3 1.9 4.7.0 3.0.1
Number of Icons 1000 265 786 884
Format PNG PNG, SVG, EOT, TTF,
WOFF
SVG, EOT, TTF, OTF,
WOFF, WOFF2
PNG, SVG, EOT, TTF,
WOFF, WOFF2
Resolution 16px 24px, * 14px+, * 18-24-36-48dp, *
License CC BY 2.5 Free to use with
Bootstrap 3
SIL OFL 1.1 Apache 2.0

12. Material Design Font Awesome

13. Home Icon
Silk Glyphicons Font Awesome Material Design
Icon
PNG <img src="house.png"/> <img src="home.png"/> *
<img
src="/ic_home_black_24dp_1x
.png"/>
Font -
<span class="glyphicon
glyphicon-home"></span>
<span class="fa
fa-home"></span>
<i
class="material-icons">home
</i>
SVG - - *
<object
data="/ic_home_black_24px.s
vg" type="image/svg+xml"/>
CSS - e021 f015 -

14. Format Comparison
Image Font SVG
Support All No support for Opera Mini IE9+
Scalability Fixed / Raster Scalable / Text Scalable / Vector
HTTP Requests Solo / Sprites Char / Font Solo / Sprites
File Size
Depends +
Multiple resolutions
Smaller Depends
Load Resource Resource Resource / Inline
Browser Styling No Limited Extended
Animations No Limited Extended
Accessibility Alt Title / Ligatures Title / Desc

15. SilkFont Awesome
{{html}}
<span class="fa fa-home"></span>
{{/html}}
Material Design Icon Themes
{{html}}
<img src="house.png" alt="House" />
{{/html}}
{{html}}
<i class="material-icons">home</i>
{{/html}}
$services.icon.render('home')

16. Provide a script service that is using a
predefined variable mapped on multiple icon
sets
Icon Theme
example
## General settings
xwiki.iconset.type = font
xwiki.iconset.ssx = IconThemes.FontAwesome
xwiki.iconset.jsx = IconThemes.FontAwesome
xwiki.iconset.render.wiki = {{html
clean="false"}}<span class="fa
fa-$icon"></span>{{/html}}
xwiki.iconset.render.html = <span class="fa
fa-$icon"></span>
## Mapping
home = home
wiki = globe
space = folder
page = file-o
check = check
add = plus
anchor = anchor
terminal = terminal
list = list-alt
branch = code-fork
down = arrow-down
up = arrow-up
left = arrow-left
right = arrow-right
arrows = arrows-alt

17. Icon Theme
Silk
xwiki.iconset.type = image
xwiki.iconset.render.html = <img
src="$xwiki.getSkinFile("../${icon}.png")"
alt="Icon" />
xwiki.iconset.render.wiki =
[[image:path:$xwiki.getSkinFile("../${icon}.png")]]
$services.icon.render('home')
Icon Theme
Font Awesome
xwiki.iconset.type = font
xwiki.iconset.render.html =
<span class="fa fa-$icon"></span>
xwiki.iconset.render.wiki =
(%class="fa fa-$icon"%) (%%)
$services.icon.renderHTML('home', 'Font Awesome')

18. Mapping

19. IcoMoonFont Awesome
Foundation Octicons
Material Design
Ionicons

20. Ionicons
Material Design

21. Custom
Icon Sets
Use icon sets generators (Icomoon, Fontello,
etc.) and mix and match icons from different
sets (thenounproject, materialdesignicons,
etc.)
CSS or SVG sprites (svg-sprite, sprity, etc.)

22. Extending
Icon Themes
Animation / Rotation
Stacking / Layering
Multi Colors
Responsive
RTL

23. Conclusions
● Switch / Migrate / Support
multiple sets
● Scalability / Resolution
(PNG, SVG, Font)
● Versatility / Number of icons
● Esthetic / Style
● License
● Performance
● Functionality
● Accessibility

24. Thank you!
Questions?
#FOSDEM2018@evalica

25. References
● XWiki Icon Theme Application
● Vector Icons Roundup
● Glyph Search
● Seriously, Don’t Use Icon Fonts
● Inline SVG vs Icon Fonts
● Should I use SVG, Icon Fonts, or Images?
● Ten reasons we switched from to SVG
● Great Icon Debate: Fonts Vs SVG
● Death to Icon Fonts
● Ditching Icon Fonts for SVG