External SVG sprite

Use SVG sprite by referencing the external SVG which you can find in svg/kcicons-sprite.svg.
Please use SVG for Everybody polyfill in order to support this technique on Internet Explorer 11 and below.

Add CSS

Make sure to include the sprite shape dimensions via CSS.
You may use the your own classes for different icon dimensions or colors.

.svg-icon {
  width: 32px;
  height: 32px;

  display: inline-block;
  fill: currentColor;
}

Use your icons

Include any icon by using the following code referencing the icon name

<svg class="svg-icon">
  <use xlink:href="svg/kcicons-sprite.svg#icon-name"></use>
</svg>

Inline SVG sprite

Use SVG sprite by inlining the SVG code on your website.
Your browser has to support inline SVG for this technique to work.

Include the SVG code

This is an inlined version of the generated SVG sprite with <symbol> definitions, which should be included at the top of your page. Icons may be <use>d anywhere below the code on the same page. Please note the width, height and style attribute of generated SVG code.

Add CSS

Make sure to include the sprite shape dimensions via CSS.
You may use the your own classes for different icon dimensions or colors.

.svg-icon {
  width: 32px;
  height: 32px;

  display: inline-block;
  fill: currentColor;
}

Use your icons

Include any icon by using the following code referencing the icon name

<svg class="svg-icon">
  <use xlink:href="#icon-name"></use>
</svg>