styleguide 0.30.11

5 - Icons

Icons can be helpfull when communicating ideas or concepts. Use them wisely and don't rely on an icon alone to convey meaning.

5.1 - Section icons

The section-icon is rarely used alone, but rather as a part of other more complex components.

<div class="section-icon">
 <span class="icon-Chat-active"></span>

5.1.1 - Size

Force a constant size of the section-icon.

<div class="section-icon large">
 <span class="icon-Chat-active"></span>
<div class="section-icon small">
 <span class="icon-Chat-active"></span>
<div class="section-icon tiny">
 <span class="icon-Chat-active"></span>

5.1.2 - Icon font, Images and SVG

The icon font, images or svg can be used as to create the icons.

<div class="section-icon">
 <span class="icon-Chat-active"></span>
<div class="section-icon">
 <img src="" />
<div class="section-icon">
  <svg viewBox="0 0 60 60">
    <path d="M30.399,4.246C13.866,3.92,0.257,14.108,0.004,27c-0.088,4.482,1.45,8.701,4.188,12.312H4.191c4.709,6.05-0.43,16.45-0.43,16.45l15.174-6.535c3.269,1.033,6.822,1.635,10.544,1.708c16.533,0.326,30.141-9.862,30.395-22.755C60.129,15.287,46.932,4.572,30.399,4.246z M17.14,31.298c-2.037,0-3.688-1.651-3.688-3.688c0-2.037,1.651-3.688,3.688-3.688s3.688,1.651,3.688,3.688C20.828,29.647,19.177,31.298,17.14,31.298z M29.433,31.298c-2.037,0-3.688-1.651-3.688-3.688c0-2.037,1.651-3.688,3.688-3.688s3.688,1.651,3.688,3.688C33.121,29.647,31.47,31.298,29.433,31.298z M41.725,31.298c-2.037,0-3.688-1.651-3.688-3.688c0-2.037,1.651-3.688,3.688-3.688c2.037,0,3.688,1.651,3.688,3.688C45.413,29.647,43.762,31.298,41.725,31.298z"/>

5.2 - Icon font

We have a huge set of icons accessible as a icon font. Listed is the classes needed to use them. We use the Private Use (Unicode) range to avoid conflicts with actual letters. Don't use the UTF code in other contexts as these might change i future versions of the icon-font. NOTE: It's easy to see that the list of icons is overkill. The initial icon font was a conversion of Helveticons Basic, then there was some additional sets released and added, then over time, also some custom icons.













































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































<span class="{$modifiers}"></span>