Download

Choose An Icon Set

Choose which pre-built collection best suits you. The All or Typical collections of icons are available via CDN or NPM.

Woff is the most used font file, so it is used for benchmarking file sizes.

Three Ways To Get Icon Fonts

1. Include Via CDN

Option 1: Load via CSS.

<!-- complete icon collection -->
<link rel="stylesheet" href="https://cdn.wolterskluwer.io/wk-icons/0.3.x/wk-icons-all-open.min.css"/>
<link rel="stylesheet" href="https://cdn.wolterskluwer.io/wk-icons/0.3.x/wk-icons-all-filled.min.css"/>

<!-- typical set -->
<link rel="stylesheet" href="https://cdn.wolterskluwer.io/wk-icons/0.3.x/wk-icons-typical-open.min.css"/>
<link rel="stylesheet" href="https://cdn.wolterskluwer.io/wk-icons/0.3.x/wk-icons-typical-filled.min.css"/>

Option 2: Leverage the Web Font Loader.

The Web Font Loader provides additional control when using linked fonts via @font-face. It is a common interface for loading fonts regardless of the source, plus it works asynchronously!

There is a standard set of events you may use to control the loading experience.

To use this approach, use the following script instead of linking to the CSS with <link> as described in Option 1.

For more information, see the project documentation.

<!-- Note: this loads the complete set of 500+ icons -->
<script>
  WebFontConfig = {
    custom: {
      families: ['wk-icons-open', 'wk-icons-filled'],
      urls: [
        'https://cdn.wolterskluwer.io/wk-icons/0.3.x/wk-icons-all-open.min.css',
        'https://cdn.wolterskluwer.io/wk-icons/0.3.x/wk-icons-all-filled.min.css'
      ]
    }
  };
</script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>

2. Include Via Package Manager

With minimal setup, you can ensure application stability and complete custimization by using a package manager.

Use either NPM or Bower to download the icon fonts for inclusion in your project directly.

NPM

1. Register for the private Wolters Kluwer NPM registry (requires NA account).
2. Follow the instructions for adding a .npmrc file to your project.
3. Add the dependency in your project’s package.json e.g."wk-icons": "^0.3.3".
4. npm install as you normally would.

Bower

1. Register for the private Wolters Kluwer bower registry (requires NA account).
2. Follow the instructions for adding a .bowerrc file to your project.
3. Add the dependency in your project’s bower.json e.g."wk-icons": "^0.3.3".
4. bower install as you normally would.

3. Customize And Download Your Icon Font

If the All or Typical icon collections are too much for you, then you might want to specifically choose which icons you want!

Choose the icons you want from the Customize tab, give it a name, download the zip, and include the assets in your project.

You will need to create a font face and base styles to accompany your icon codes and font files. See the usage page checklist to ensure your icons load.

▲ Back to top

Source SVGs

Zip archives containing all SVGs - for designers and creating mockups.

▲ Back to top

Source Code

Source code is available through Wolters Kluwer Bitbucket.

▲ Back to top