Icons / Images

Documentation, preview and usage of icons and image utilities.

Files

app/styles/components/icons_images/config.scss
app/styles/components/icons_images/style.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/svgicons/icons.svg file to be inlined just before the </body> tag.

Example:

  • ad

  • alertcircle

  • alerttriangle

  • arrowleft

  • arrowleftskip

  • arrowright

  • arrowrightskip

  • calendar

  • chat

  • chat1

  • check

  • chevrondown

  • chevronleft

  • chevronright

  • chevronsleft

  • chevronsright

  • chevronup

  • circlecheck

  • close

  • closecircle

  • collapse

  • done

  • drag

  • expand

  • faq

  • file

  • filter

  • flag

  • globe

  • ho

  • home

  • info

  • ingo

  • km

  • loader

  • lock

  • minus

  • more

  • mp

  • next

  • nezadany

  • notifications

  • online

  • pdf

  • pinon

  • pinonoff

  • play

  • plus

  • ps

  • qz

  • refresh

  • reply

  • search

  • send

  • specialinput

  • textbold

  • textclear

  • textitalic

  • textunderline

  • trash

  • user-group

  • user

  • zadany
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>

Large icons

Example:

  • checked-document-24

  • drag24

  • file-doc-24

  • file-exe-24

  • file-gif-24

  • file-jpeg-24

  • file-jpg-24

  • file-link-24

  • file-pdf-24

  • file-pdf-w-image-24

  • file-png-24

  • file-rar-24

  • file-txt-24

  • file-video-24

  • file-xml-24

  • file-zip-24

  • home-24

  • mediapool-24

  • messages-24

  • no-edit-24

  • press-review-24

  • source-collections-24

  • translations-24
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>

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">

Avatars

Avatars hold a user image or a generic icon and can include a status indicator

Example:
Code:
<div class="avatar">
  <img class="avatar__image" src="https://placehold.it/22x22">
  <div class="avatar__status" aria-label="offline"></div>
</div>

<div class="avatar">
  <span class="icon icon-user text-color-grey-300 icon--medium">
    <svg ...
  </span>
  <div class="avatar__status" aria-label="offline"></div>
</div>

Notification count

Notification count shows the number of pending actions

Example:
3
20
99+
Code:
<div class="notifications">
  <span class="icon icon-notifications text-color-grey-300 icon--medium">
    <svg ...
  </span>
  <div class="notifications__count">3</div>
</div>