In search of the ideal icon system
Why use an icon system ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/3959044/index.jpg)
💅Looks
🏃Performance
👨💻Maintanability
Different options
- Individual images (no system)
- CSS sprites
- Icon fonts
- Inline SVG
- SVG <use>
Spoiler alert
Individual images (no system)
.home {
background-image: url('../images/icon-home.png');
}
<img src='images/icon-home.png' alt='home'>
Advantages | Disadvantages |
---|---|
Simple to setup / use | Has to be adjusted manually |
Can be adjusted manually | Performance (individual HTTP request for each icon) |
Responsiveness / handling of retina screens | |
Variation = new icon |
CSS sprites
.home {
background-image: url('../images/sprites.png');
background-position: -5px -143px;
}
Advantages | Disadvantages |
---|---|
Performance (single HTTP request) | Performance doesn't scale |
Responsiveness and retina screens still an issue | |
Variation = new icon |
Icons fonts
[data-icon]:before {
font-family: icons;
content: attr(data-icon);
}
<span data-icon="⇝"></span>
Advantages | Disadvantages |
---|---|
Easy control over the size + color | Sub-pixel rendering and other visual artifacts |
Looks good in any resolution | Positioning can require some manual adjustment (line-height, etc) |
Lighter / more perfomant than CSS sprites | Semantics not ideal |
Inline SVG
<svg class="icon icon-home" viewBox="0 0 100 100" aria-labelledby="title">
<title id="title">Home</title>
<path d=" ... " />
</svg>
Advantages | Disadvantages |
---|---|
Best visual output | Browser support (Android 2.3+, IE9+) |
Simple to setup | Need control over the generated markup (can be a problem with some CMS / WYSWYG editor) |
Complete control over icon properties with CSS (inc. over parts of the icon) | No central respository of icons = more difficult to maintain / reuse |
No extra HTTP request | |
No flash of unstyled content | |
Accessibility |
Or : SVG component
// Icon
var IconHome = React.createClass({
render() {
return (
<svg className="home" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>HomeIcon</title>
<path .../>
</svg>
)
}
});
// which makes this reusable component for other views
<IconHome />
SVG <use>
<svg>
<defs>
<symbol id="shape-icon-1">
</symbol>
<symbol id="shape-icon-2">
</symbol>
<!-- etc -->
</defs>
</svg>
<svg viewBox="0 0 100 100" class="icon shape-icon-1" aria-labelledby="title">
<title id="title">Home</title>
<use xlink:href="#shape-icon-1"></use>
</svg>
Advantages | Disadvantages |
---|---|
Best visual output | Need control over the generated markup (can be a problem with some CMS / WYSWYG editor) |
Performance (single HTTP request, lighter than fonts) | Browser support (Edge 13+), requires a polyfill (< 1KB) |
Large control over icon properties with CSS (NOT over parts of the icon) | Still need to load the whole SVG sprite |
Accessibility | Shadow DOM weirdness |
Some examples from around the web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/3959352/Capture_d__cran_2017-07-02_23.22.46.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/3959359/Capture_d__cran_2017-07-02_23.27.34.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/3959355/Capture_d__cran_2017-07-02_23.16.46.png)
Thank you
Unicorn by Daniel Hammer from the Noun Project
In search of the ideal icon system
By maelig
In search of the ideal icon system
- 1,836