Icons / Images

Documentation, preview and usage of icons and image utilities.

Files

app/styles/modules/_icons_images.scss

Icons

Here is preview of icon set used in this project. An icon can be created by using pug mixin +icon(iconName).

Using just HTML, the markup is: <svg class="icon"><use xlink:href="#icon-iconName"></svg class="icon">

Warning

The SVG sprite needs to be inlined in current document, so that <use xlink:href="#icon-iconName"> can access the appropriate symbol.

dependency

Icons require app/icons/icons.svg file to be inlined just before the </body> tag.

Example:

  • add

  • arrowcircledown

  • arrowcircleleft

  • arrowcircleright

  • arrowcircleup

  • arrowdown

  • arrowleft

  • arrowright

  • arrowup

  • attach

  • calendar

  • caretdown

  • caretleft

  • caretright

  • caretup

  • check

  • chevrondown

  • chevronleft

  • chevronright

  • chevronup

  • close

  • code

  • doc

  • download

  • edit

  • ellipsis

  • eye

  • facebook

  • googleplus

  • home

  • linkedin

  • menu

  • refresh

  • search

  • settings

  • time

  • twitter

  • upload

  • user

  • youtube
Code:
<ul>
  - for (var i=0; i < getIcons().length; i++) {
    <li>
      <svg class="icon icon-add">
        <use xlink:href="#icon-getSvgIcons()[i]"></use>
      </svg>
    </li>
  - }
</ul>

Sizes

There are fours icon sizes: small, medium, large and xlarge. Size for icon can be specified with class .icon--[small/medium/large/xlarge] on the icon element.

Our pug mixin accepts a className parameter. To create a large icon, just pass the appropriate class as the second parameter +icon(iconName, 'gu')

Note

In case there is no class for size, icon will inherit size from parent font-size property.

Example:

  • XL

  • L

  • M

  • S
Code:
<ul>
  <li>
    <svg class="icon icon-home icon--xlarge">
      <use xlink:href="#icon-home"></use>
    </svg>
  </li>
  <li>
    <svg class="icon icon-home icon--large">
      <use xlink:href="#icon-home"></use>
    </svg>
  </li>
  <li>
    <svg class="icon icon-home icon--medium">
      <use xlink:href="#icon-home"></use>
    </svg>
  </li>
  <li>
    <svg class="icon icon-home icon--small">
      <use xlink:href="#icon-home"></use>
    </svg>
  </li>
</ul>

Colors

Icons use same text color priciple for colors as typography.

Note

In case there is no class for color, icon will inherit color from parent color property.

Example:
Code:
<ul>
  <li>
    <svg class="icon icon-home text-color-theme-500">
      <use xlink:href="#icon-home"></use>
    </svg>
  </li>
  <li>
    <svg class="icon icon-home text-color-theme-100">
      <use xlink:href="#icon-home"></use>
    </svg>
  </li>
  <li class="text-color-semiblack">
    <svg class="icon icon-home icon--large">
      <use xlink:href="#icon-home"></use>
    </svg>
  </li>
  <li class="text-color-error">
    <svg class="icon icon-home icon--large">
      <use xlink:href="#icon-home"></use>
    </svg>
  </li>
</ul>

Accessibility

Icons have two use cases:

  1. Presentational icon accompanied by text. such icon does not need to be picked up by screenreaders and should have role='presentation' and aria-hidden='true' attributes on its svg tag.
  2. Content icon, that needs an accessible text alternative. A content icon might be a button that only holds an icon without any text. To make such an icon accessible, add role='img' and aria-label='Text alternative' attributes to its svg tag.

Luckily, the +icon() pug mixin can handle both cases. Passing an accessible text alternative as an alt paramter, automatically generates the markup for a content icon. To create a presentational icon, just omit the paramter.

Example:

  1. I'm accompanied by button text, my purpose is purely presentational

  2. I clearly represent what will happen when the button is clicked. Therefore an accessbile text alternative is appropriate.
Code:
<button class="btn btn--large">
  <svg class="icon icon-check" role="img" aria-hidden="true">
    <use xlink:href="#icon-check"></use>
  </svg>
  Done
</button>

<button class="btn btn--large">
  <svg class="icon icon-settings" role="presentation" aria-label="Settings">
    <use xlink:href="#icon-settings"></use>
  </svg>
</button>

Image utilities

There are three basic image utilities: fluid, rounded and circle. Fluid utility gives image ability to change size coresponding to its parent. Circle and rounded utilities provides specific shapes for images.

Example:
placeholder
placeholder
placeholder
Code:
<img src="..." class="img img--fluid">
<img src="..." class="img img--rounded">
<img src="..." class="img img--circle">