Skip to main content
Docs
Components
Foundation
1.0.0Next5.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 1.0.0

Icons

Find the legacy icon package(.zip) here.

Usage​

All system icons are available via an SVG sprite, automated via our build process that aggregates individual SVG files into a single file you can use.

To generate the sprite, we use gulp-svg-store to combine all svg-icons in our icons-folder into one file. Each individual filename creates a separate <symbol>-tag in the sprite. This symbol gets an id-attribute equal to the corresponding file.

This id is then used to reference the correct svg, through the <use>-tag.

  1. We have the files: twitter.svg and facebook.svg in /icons.

  2. We then combine them using gulp-svg-store.

  3. The combined icons.svg now contains two symbols:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="twitter" viewBox="0 0 512 512"><title>twitter</title><path ....>
  <symbol id="facebook" viewBox="0 0 512 512"><title>facebook</title><path ....>
</svg>
  1. We then reference the icon we want (e.g. twitter) with the following code:
<svg aria-hidden="true" focusable="false">
  <use xlink:href="/assets/img/icons/sprites/icons.svg#twitter"></use>
</svg>

Browser support​

IE browsers lower than Edge 13 do not have native SVG sprite support. To support these browsers, please add the svg4everybody library to your project.

For fastest possible load, we recommend putting the reference to the library in the <head> of your HTML document. This will minimize FONS (Flash Of No Svg).

<html>
  <head>
    <script src="path/to/js/svg4everybody.js"></script>
    <script>
      svg4everybody();
    </script>
  </head>
</html>

The library will asyncronosly load and inject the SVG-sprite into the top of your page. Don’t worry, it will not be visible. But once it’s loaded and available, individual symbols in the sprite can be referenced using the <use>-tag as shown above.

Icon Sizes​

We provide sizing of icons using a set of utility-classes on the icon-wrapper. The icon wrapper consists of a single <i>-tag with the class .kx-icon

To apply a size, add the modifier for size, e.g: .kx-icon--size-small

Accessibility​

If the icon’s context does not provide a relevant text (just an icon)

include a <title>-element inside the <use>-tag:

<i class="kx-icon kx-icon--size-base">
  <svg focusable="false">
    <use href="../../assets/img/icons/sprites/icons.svg#person"><title>A user icon</title></use>
  </svg>
</i>

If the icon’s context does provide a relevant text, e.g in a button

add ARIA aria-hidden="true" attribute and/or leave out <title>:

<!-- BUTTON Component -->
<button class="kx-btn">
  <span class="kx-btn__inner">
    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
      <use href="../../assets/img/icons/sprites/icons.svg#person"></use>
    </svg>
  </i>
    <span class="kx-btn__txt">User profile</span>
  </span>
</button>