Icons

Choose the icon you need from this page, then follow the implementation instructions below.
Download Icon package (.zip)

General

  • access
  • account-circle
  • add-picture
  • alarm
  • align-arrow-middle
  • align-bottom
  • align-horizontal
  • align-justify
  • align-left
  • align-text-center
  • align-text-left
  • align-text-right
  • align-top
  • align-right
  • align-vertical
  • angle-swap-horizontal
  • angle-swap-vertical
  • application
  • apps-list
  • area
  • app-store
  • arrow-back
  • arrow-down
  • arrow-forward
  • arrow-head
  • arrow-left
  • arrow-right
  • arrow-up
  • attachment
  • average
  • battery-charging
  • bookmark
  • border-color
  • border-size
  • border-type
  • box
  • brightness
  • broadcast
  • calendar
  • cancel
  • caret-down
  • caret-left
  • caret-right
  • caret-up
  • chat-buble
  • check
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • chevron-wide-right
  • circle
  • clock
  • close
  • cloud
  • cloud-download
  • cloud-upload
  • cloud-download-2
  • co2
  • cog
  • compass
  • configuration
  • container
  • copy
  • cut
  • dashboard-editor
  • dashboard
  • day-dusk
  • day
  • db
  • db-cloud
  • device-hub
  • documents
  • dots-horizontal
  • dots-vertical
  • double-chevron-up
  • drag-item
  • dusk
  • edit-redo
  • edit-undo
  • expand
  • external-page
  • feed
  • file
  • fill-color
  • filter-1
  • filter-2
  • flash
  • folder
  • folder-outlined
  • format-bold
  • format-itallic
  • format-remove
  • format-underline
  • frame
  • fullscreen
  • fullscreen-exit
  • group
  • hamburger
  • help
  • home
  • indented-list
  • info
  • info-2
  • label
  • layers
  • link-off
  • line
  • link
  • load-more
  • lock-open
  • lock
  • Login
  • Logout
  • logo-facebook
  • logo-linkedin
  • logo-twitter
  • mail
  • map
  • math-sum
  • minus
  • navigation-arrow
  • night
  • notification-1
  • notification-2
  • notification
  • nox
  • object-list
  • on-off-switch
  • palette
  • papers
  • paste
  • pencil
  • person
  • phone
  • pin
  • place
  • play
  • plus
  • preview
  • print
  • privacy
  • pull-down
  • pull-left
  • pull-right
  • pull-up
  • rectangle
  • reload
  • reset
  • return
  • router
  • search
  • screen
  • share-1
  • share-2
  • show-password
  • signal
  • star
  • star-empty
  • sucess
  • support
  • template
  • tenants
  • text
  • text-color
  • trash
  • update-timer
  • view-list
  • visibility-on
  • visibility-off
  • scale
  • my-wells
  • template-configuration
  • announcement
  • confirmation-number
  • group1

Analytics

  • analyse
  • area-chart
  • bar-chart
  • charts
  • config
  • donut
  • gauge
  • line-chart
  • pie-chart
  • radar-chart
  • run-analysis
  • scatter-plot
  • table
  • vessel-statistics

Weather

  • cloud-and-moon
  • cloud-and-sun
  • fog
  • force-1
  • force-2
  • force-3
  • force-4
  • force-5
  • force-6
  • force-7
  • force-8
  • force-9
  • force-10
  • force-11
  • force-12
  • moon
  • raining
  • snowflake
  • snowing
  • sun
  • sunset
  • temperature
  • currents
  • currents-direction
  • waves
  • waves-direction
  • wind
  • wind-direction

Engineering

  • baseline
  • bus-switch
  • equipment-diagram
  • single-line-diagram
  • threshold

Marine

  • acknowledge
  • alert-list
  • co-2
  • conn
  • dp
  • draft
  • energy-efficiency
  • energy-recovery
  • engine-1
  • engine-2
  • engine-3
  • fleet
  • fresh-water
  • fuel-tank
  • fuel
  • fuel-pump
  • LARS
  • tank
  • TowCon
  • underwater-radar
  • vessel-front-2
  • vessel-front
  • vessel-top-outline
  • vessel-top
  • system
  • sox
  • propulsion-1
  • propulsion-2
  • safety
  • Seismic
  • shaft-with-cog
  • shaft
  • list
  • lng-gass
  • machinery
  • navigation
  • propeller-tunnel
  • power
  • posrefs
  • noxx
  • logo-kog-color-full
  • logo-kog-bw-full

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 16x16 px

.kx-icon--size-base 20x20 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:

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

Learn more

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