Icons

Choose the icon you need from this page, then follow the implementation instructions below.

Utility Icons

Icons used throughout the interface for generic purposes.

  • Angle Right
    angle-right
  • Angle Down
    angle-down
  • Angle Left
    angle-left
  • Angle Up
    angle-up
  • Arrow Right
    arrow-right
  • Arrow Down
    arrow-down
  • Arrow Left
    arrow-left
  • Arrow Up
    arrow-up
  • Caret Right
    caret-right
  • Caret Down
    caret-down
  • Caret Left
    caret-left
  • Caret Up
    caret-up
  • Success
    success
  • Info
    info
  • Warning
    warning
  • Danger
    danger
  • Pull Right
    pull-right
  • Pull Down
    pull-down
  • Pull Left
    pull-left
  • Pull Up
    pull-up
  • Angle Swap Horizontal
    angle-swap-horizontal
  • Angle Swap Vertical
    angle-swap-vertical
  • Attachment
    attachment
  • Bookmark
    bookmark
  • Check
    check
  • Close
    close
  • Cog
    cog
  • User
    user
  • Dots Horizontal
    dots-horizontal
  • Dots Vertical
    dots-vertical
  • Pin
    pin
  • Search
    search
  • Box
    box
  • Papers
    papers
  • Plus
    plus
  • Minus
    minus
  • Twitter
    twitter
  • Facebook
    facebook
  • Linkedin
    linkedin
  • Reload
    reload

Industry Illustrations

Illustrations used to specify a particular industry or topic.

  • Drilling Well
    drilling-well
  • Fishery
    fishery
  • Maritime Offshore
    maritime-offshore
  • Oil Gas Production
    oil-gas-production
  • Other Industries
    other-industries
  • Renewables
    renewables
  • Subsea
    subsea
  • Utilities
    utilities

If you need the original svg-files, you can download them here:

Download Icon package (.zip)

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>
  4. 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.

.kx-icon--size-tiny 12x12 px

.kx-icon--size-small (14x14 px)

.kx-icon--size-base 18x18 px

.kx-icon--size-moderate 24x24 px

.kx-icon--size-medium 32x32 px

.kx-icon--size-large 44x44 px

.kx-icon--size-xlarge 56x56 px

.kx-icon--size-xxlarge 64x64 px

.kx-icon--size-xxxlarge 88x88 px

Accessibility

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

A user icon

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

<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#user"><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">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg aria-hidden="true" focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#user"></use>
    </svg>
</i>
        <span class="kx-btn__txt">User profile</span>
    </span>
</button>

Learn more

  • SVG 4 Everybody, adds external spritemaps support to otherwise SVG-capable browsers.