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-down
  • angle-left
  • angle-up
  • arrow-right
  • arrow-down
  • arrow-left
  • arrow-up
  • caret-right
  • caret-down
  • caret-left
  • caret-up
  • success
  • info
  • warning
  • danger
  • pull-right
  • pull-down
  • pull-left
  • pull-up
  • angle-swap-horizontal
  • angle-swap-vertical
  • attachment
  • bookmark
  • check
  • close
  • cog
  • user
  • dots-horizontal
  • dots-vertical
  • pin
  • search
  • box
  • papers
  • plus
  • minus

Industry Icons

Icons used to specify a particular industry or topic

  • drilling-well
  • fishery
  • maritime-offshore
  • oil-gas-production
  • other-industries
  • renewables
  • subsea
  • utilities

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.

    <i class="kx-icon kx-icon--size-small">
        <svg aria-hidden="true" focusable="false">
            <use xlink:href="../../assets/img/icons/sprites/icons.svg#warning"></use>
        </svg>
    </i>

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

Learn more

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