diff --git a/.gitignore b/.gitignore
index 746b791e..734bd982 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 node_modules
 typings
 .vscode
-bundle
+build
diff --git a/config-serializer/config-items/KeystrokeModifiersAction.ts b/config-serializer/config-items/KeystrokeModifiersAction.ts
index 5fd66c17..4f1b7369 100644
--- a/config-serializer/config-items/KeystrokeModifiersAction.ts
+++ b/config-serializer/config-items/KeystrokeModifiersAction.ts
@@ -41,4 +41,8 @@ class KeystrokeModifiersAction extends KeyAction {
     toString(): string {
         return `<KeystrokeModifiersAction modifierMask="${this.modifierMask}">`;
     }
+
+    isModifierActive(modifier: KeyModifiers): boolean {
+        return (this.modifierMask & modifier) > 0;
+    }
 }
diff --git a/config-serializer/config-items/KeystrokeWithModifiersAction.ts b/config-serializer/config-items/KeystrokeWithModifiersAction.ts
index f53c47a7..6ab6d57c 100644
--- a/config-serializer/config-items/KeystrokeWithModifiersAction.ts
+++ b/config-serializer/config-items/KeystrokeWithModifiersAction.ts
@@ -37,4 +37,8 @@ class KeystrokeWithModifiersAction extends KeyAction {
     toString(): string {
         return `<KeystrokeWithModifiersAction scancode="${this.scancode}" modifierMask="${this.modifierMask}">`;
     }
+
+    isModifierActive(modifier: KeyModifiers): boolean {
+        return (this.modifierMask & modifier) > 0;
+    }
 }
diff --git a/config-serializer/config-items/SwitchLayerAction.ts b/config-serializer/config-items/SwitchLayerAction.ts
index ea4dae22..7ef48187 100644
--- a/config-serializer/config-items/SwitchLayerAction.ts
+++ b/config-serializer/config-items/SwitchLayerAction.ts
@@ -1,4 +1,4 @@
-enum KeyLayer {
+enum LayerName {
     mod,
     fn,
     mouse
@@ -10,12 +10,12 @@ class SwitchLayerAction extends KeyAction {
 
     isLayerToggleable: boolean;
 
-    // @assertEnum(KeyLayer)
-    private layer: KeyLayer;
+    // @assertEnum(LayerName)
+    private layer: LayerName;
 
     _fromJsObject(jsObject: any): SwitchLayerAction {
         this.assertKeyActionType(jsObject);
-        this.layer = KeyLayer[<string> jsObject.layer];
+        this.layer = LayerName[<string> jsObject.layer];
         this.isLayerToggleable = jsObject.toggle;
         return this;
     }
@@ -31,7 +31,7 @@ class SwitchLayerAction extends KeyAction {
     _toJsObject(): any {
         return {
             keyActionType: keyActionType.SwitchLayerAction,
-            layer: KeyLayer[this.layer],
+            layer: LayerName[this.layer],
             toggle: this.isLayerToggleable
         };
     }
diff --git a/images/base-layer.svg b/images/base-layer.svg
index 9b48ec7f..bc1cd780 100644
--- a/images/base-layer.svg
+++ b/images/base-layer.svg
@@ -79,7 +79,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a1" />
+         id="key-0" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -87,7 +87,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a2" />
+         id="key-1" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -95,7 +95,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a3" />
+         id="key-2" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -103,7 +103,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a4" />
+         id="key-3" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -111,7 +111,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a5" />
+         id="key-4" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -119,7 +119,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a6" />
+         id="key-5" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -127,7 +127,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a7" />
+         id="key-6" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -135,7 +135,7 @@
          y="-360.50003"
          height="63.779526"
          width="95.669289"
-         id="b1" />
+         id="key-7" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -143,7 +143,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b2" />
+         id="key-8" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -151,7 +151,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b3" />
+         id="key-9" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -159,7 +159,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b4" />
+         id="key-10" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -167,7 +167,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b5" />
+         id="key-11" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -175,7 +175,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b6" />
+         id="key-12" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -183,7 +183,7 @@
          y="-293.17719"
          height="63.779526"
          width="111.61417"
-         id="c1" />
+         id="key-13" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -191,7 +191,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c2" />
+         id="key-14" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -199,7 +199,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c3" />
+         id="key-15" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -207,7 +207,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c4" />
+         id="key-16" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -215,7 +215,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c5" />
+         id="key-17" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -223,7 +223,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c6" />
+         id="key-18" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -231,7 +231,7 @@
          y="-225.85435"
          height="63.779526"
          width="143.50394"
-         id="d1" />
+         id="key-19" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -239,7 +239,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d2" />
+         id="key-20" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -247,7 +247,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d3" />
+         id="key-21" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -255,7 +255,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d4" />
+         id="key-22" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -263,7 +263,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d5" />
+         id="key-23" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -271,7 +271,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d6" />
+         id="key-24" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -279,7 +279,7 @@
          y="-158.53151"
          height="63.779526"
          width="79.724411"
-         id="e1" />
+         id="key-25" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -287,7 +287,7 @@
          y="-158.53151"
          height="63.779526"
          width="79.724411"
-         id="e2" />
+         id="key-26" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -295,7 +295,7 @@
          y="-158.53151"
          height="63.779526"
          width="79.724411"
-         id="e3" />
+         id="key-27" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -303,7 +303,7 @@
          y="-158.53151"
          height="63.779526"
          width="79.724411"
-         id="e4" />
+         id="key-28" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -311,7 +311,7 @@
          y="-158.53151"
          height="63.779526"
          width="131.10236"
-         id="e5" />
+         id="key-29" />
       <rect
          rx="3.4856062"
          ry="3.5433071"
@@ -319,7 +319,7 @@
          y="-91.071709"
          height="41.667309"
          width="131.10236"
-         id="f1" />
+         id="key-30" />
       <text
          y="-435.0346495"
          x="-163.006457"
@@ -813,7 +813,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a8" />
+         id="key-0" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -821,7 +821,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a9" />
+         id="key-1" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -829,7 +829,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a10" />
+         id="key-2" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -837,7 +837,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a11" />
+         id="key-3" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -845,7 +845,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a12" />
+         id="key-4" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -853,7 +853,7 @@
          y="-427.82285"
          height="63.779526"
          width="63.779526"
-         id="a13" />
+         id="key-5" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -861,7 +861,7 @@
          y="-427.82285"
          height="63.779526"
          width="95.669289"
-         id="a14" />
+         id="key-6" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -869,7 +869,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b7" />
+         id="key-7" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -877,7 +877,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b8" />
+         id="key-8" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -885,7 +885,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b9" />
+         id="key-9" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -893,7 +893,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b10" />
+         id="key-10" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -901,7 +901,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b11" />
+         id="key-11" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -909,7 +909,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b12" />
+         id="key-12" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -917,7 +917,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b13" />
+         id="key-13" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -925,7 +925,7 @@
          y="-360.50003"
          height="63.779526"
          width="63.779526"
-         id="b14" />
+         id="key-14" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -933,7 +933,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c7" />
+         id="key-15" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -941,7 +941,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c8" />
+         id="key-16" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -949,7 +949,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c9" />
+         id="key-17" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -957,7 +957,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c10" />
+         id="key-18" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -965,7 +965,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c11" />
+         id="key-19" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -973,7 +973,7 @@
          y="-293.17719"
          height="63.779526"
          width="63.779526"
-         id="c12" />
+         id="key-20" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -981,7 +981,7 @@
          y="-293.17719"
          height="63.779526"
          width="111.61417"
-         id="c13" />
+         id="key-21" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -989,7 +989,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d7" />
+         id="key-22" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -997,7 +997,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d8" />
+         id="key-23" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -1005,7 +1005,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d9" />
+         id="key-24" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -1013,7 +1013,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d10" />
+         id="key-25" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -1021,7 +1021,7 @@
          y="-225.85435"
          height="63.779526"
          width="63.779526"
-         id="d11" />
+         id="key-26" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -1029,7 +1029,7 @@
          y="-225.85435"
          height="63.779526"
          width="143.50394"
-         id="d12" />
+         id="key-27" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -1037,7 +1037,7 @@
          y="-158.53151"
          height="63.779526"
          width="124.37008"
-         id="e6" />
+         id="key-28" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -1045,7 +1045,7 @@
          y="-158.53151"
          height="63.779526"
          width="79.724411"
-         id="e7" />
+         id="key-29" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -1053,7 +1053,7 @@
          y="-158.53151"
          height="63.779526"
          width="79.724411"
-         id="e8" />
+         id="key-30" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -1061,7 +1061,7 @@
          y="-158.53151"
          height="63.779526"
          width="79.724411"
-         id="e9" />
+         id="key-31" />
       <rect
          rx="3.5433071"
          ry="3.5433071"
@@ -1069,7 +1069,7 @@
          y="-158.53151"
          height="63.779526"
          width="127.55905"
-         id="e10" />
+         id="key-32" />
       <rect
          rx="3.493542"
          ry="3.5433071"
@@ -1077,7 +1077,7 @@
          y="-91.071663"
          height="41.667309"
          width="124.37009"
-         id="f2" />
+         id="key-33" />
       <text
          y="-435.0346495"
          x="485.418723"
diff --git a/images/icons/kbd__fn--calculator.svg b/images/icons/kbd__fn--calculator.svg
new file mode 100755
index 00000000..db142bd1
--- /dev/null
+++ b/images/icons/kbd__fn--calculator.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M6 1h-5c-0.55 0-1 0.45-1 1v5c0 0.55 0.45 1 1 1h5c0.55 0 1-0.45 1-1v-5c0-0.55-0.45-1-1-1zM6 5h-5v-1h5v1zM14 1h-5c-0.55 0-1 0.45-1 1v13c0 0.55 0.45 1 1 1h5c0.55 0 1-0.45 1-1v-13c0-0.55-0.45-1-1-1zM14 10h-5v-1h5v1zM14 7h-5v-1h5v1zM6 9h-5c-0.55 0-1 0.45-1 1v5c0 0.55 0.45 1 1 1h5c0.55 0 1-0.45 1-1v-5c0-0.55-0.45-1-1-1zM6 13h-2v2h-1v-2h-2v-1h2v-2h1v2h2v1z"></path>
+</svg>
diff --git a/images/icons/kbd__fn--eject.svg b/images/icons/kbd__fn--eject.svg
new file mode 100755
index 00000000..03403ebb
--- /dev/null
+++ b/images/icons/kbd__fn--eject.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M0 12h16v2h-16zM8 2l8 8h-16z"></path>
+</svg>
diff --git a/images/icons/kbd__fn--screen-lock.svg b/images/icons/kbd__fn--screen-lock.svg
new file mode 100755
index 00000000..5d9c1c35
--- /dev/null
+++ b/images/icons/kbd__fn--screen-lock.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg2"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="kbd__fn_screen-lock.svg">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1144"
+     id="namedview6"
+     showgrid="false"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:object-nodes="true"
+     inkscape:zoom="57.8125"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <g
+     id="g4163">
+    <path
+       d="M 15,10 1,10 1,2 15,2 15,10 Z M 0,1 0,11 16,11 16,1 0,1 Z"
+       id="path4154" />
+    <path
+       id="path4"
+       d="m 10.5,12 -5,0 -0.5,2 -1,1 8,0 -1,-1 z" />
+    <path
+       style="fill:#000000"
+       inkscape:connector-curvature="0"
+       d="m 9.3599992,5.5200004 -0.08,0 0,-0.959999 c 0,-0.5292796 -0.43072,-0.959999 -0.959999,-0.959999 l -0.6399996,0 c -0.5292795,0 -0.9599991,0.4307195 -0.9599991,0.959999 l 0,0.959999 -0.08,0 c -0.1318398,0 -0.2399997,0.1081599 -0.2399997,0.2399997 l 0,2.3999978 c 0,0.1318395 0.1081599,0.2399997 0.2399997,0.2399997 l 2.7199977,0 c 0.131839,0 0.239999,-0.1081601 0.239999,-0.2399997 l 0,-2.3999978 c 0,-0.1318398 -0.10816,-0.2399998 -0.239999,-0.2399998 z M 7.3600008,4.5600014 c 0,-0.1763198 0.1436798,-0.3199998 0.3199997,-0.3199998 l 0.6399997,0 c 0.176319,0 0.319999,0.14368 0.319999,0.3199998 l 0,0.959999 -1.2799984,0 0,-0.959999 z"
+       id="path4140" />
+  </g>
+</svg>
diff --git a/images/icons/kbd__media--mute.svg b/images/icons/kbd__media--mute.svg
new file mode 100755
index 00000000..cdbaecee
--- /dev/null
+++ b/images/icons/kbd__media--mute.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M11 0l-5 5h-3v6l8-8zM14.909 1.091l-13.818 13.818 1.091 1.091 4.409-4.409 4.409 4.409v-8.818l5-5z"></path>
+</svg>
diff --git a/images/icons/kbd__media--next.svg b/images/icons/kbd__media--next.svg
new file mode 100755
index 00000000..b686de64
--- /dev/null
+++ b/images/icons/kbd__media--next.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M12 2v12h-2v-5.5l-5 5v-11l5 5v-5.5z"></path>
+</svg>
diff --git a/images/icons/kbd__media--pause.svg b/images/icons/kbd__media--pause.svg
new file mode 100755
index 00000000..3c2bbb06
--- /dev/null
+++ b/images/icons/kbd__media--pause.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M2 2h5v12h-5zM9 2h5v12h-5z"></path>
+</svg>
diff --git a/images/icons/kbd__media--play.svg b/images/icons/kbd__media--play.svg
new file mode 100755
index 00000000..273db2c5
--- /dev/null
+++ b/images/icons/kbd__media--play.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M3 2l10 6-10 6z"></path>
+</svg>
diff --git a/images/icons/kbd__media--prev.svg b/images/icons/kbd__media--prev.svg
new file mode 100755
index 00000000..01a2f389
--- /dev/null
+++ b/images/icons/kbd__media--prev.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M4 14v-12h2v5.5l5-5v11l-5-5v5.5z"></path>
+</svg>
diff --git a/images/icons/kbd__media--vol-up.svg b/images/icons/kbd__media--vol-up.svg
new file mode 100755
index 00000000..a8364fd7
--- /dev/null
+++ b/images/icons/kbd__media--vol-up.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="16" viewBox="0 0 17 16">
+<path fill="#000000" d="M13.907 14.407c-0.192 0-0.384-0.073-0.53-0.22-0.293-0.293-0.293-0.768 0-1.061 1.369-1.369 2.123-3.19 2.123-5.127s-0.754-3.757-2.123-5.127c-0.293-0.293-0.293-0.768 0-1.061s0.768-0.293 1.061 0c1.653 1.653 2.563 3.85 2.563 6.187s-0.91 4.534-2.563 6.187c-0.146 0.146-0.338 0.22-0.53 0.22zM11.243 12.993c-0.192 0-0.384-0.073-0.53-0.22-0.293-0.293-0.293-0.768 0-1.061 2.047-2.047 2.047-5.378 0-7.425-0.293-0.293-0.293-0.768 0-1.061s0.768-0.293 1.061 0c1.275 1.275 1.977 2.97 1.977 4.773s-0.702 3.498-1.977 4.773c-0.146 0.146-0.338 0.22-0.53 0.22v0zM8.578 11.578c-0.192 0-0.384-0.073-0.53-0.22-0.293-0.293-0.293-0.768 0-1.061 1.267-1.267 1.267-3.329 0-4.596-0.293-0.293-0.293-0.768 0-1.061s0.768-0.293 1.061 0c1.852 1.852 1.852 4.865 0 6.718-0.146 0.146-0.338 0.22-0.53 0.22z"></path>
+<path fill="#000000" d="M6.5 15c-0.13 0-0.258-0.051-0.354-0.146l-3.854-3.854h-1.793c-0.276 0-0.5-0.224-0.5-0.5v-5c0-0.276 0.224-0.5 0.5-0.5h1.793l3.854-3.854c0.143-0.143 0.358-0.186 0.545-0.108s0.309 0.26 0.309 0.462v13c0 0.202-0.122 0.385-0.309 0.462-0.062 0.026-0.127 0.038-0.191 0.038z"></path>
+</svg>
diff --git a/images/icons/kbd__media.svg b/images/icons/kbd__media.svg
new file mode 100755
index 00000000..187e863f
--- /dev/null
+++ b/images/icons/kbd__media.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M15 0h1v11.5c0 1.381-1.567 2.5-3.5 2.5s-3.5-1.119-3.5-2.5c0-1.381 1.567-2.5 3.5-2.5 0.979 0 1.865 0.287 2.5 0.751v-5.751l-8 1.778v7.722c0 1.381-1.567 2.5-3.5 2.5s-3.5-1.119-3.5-2.5c0-1.381 1.567-2.5 3.5-2.5 0.979 0 1.865 0.287 2.5 0.751v-9.751l9-2z"></path>
+</svg>
diff --git a/images/icons/kbd__mouse.svg b/images/icons/kbd__mouse.svg
new file mode 100755
index 00000000..4aa2de4c
--- /dev/null
+++ b/images/icons/kbd__mouse.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M12.43 9.942l-2.4-4c-1.11-1.851-3.481-2.479-5.356-1.447-0.404-0.726-0.674-1.413-0.674-1.995 0-0.546 0.118-1.255 0.683-1.526 0.043-0.021 0.107-0.052 0.171-0.115 0.195-0.195 0.195-0.512 0-0.707-0.165-0.165-0.415-0.19-0.607-0.078-0.804 0.388-1.247 1.249-1.247 2.426 0 0.812 0.345 1.688 0.858 2.587-1.342 1.261-1.674 3.327-0.688 4.971l2.4 4c0.75 1.25 2.075 1.943 3.434 1.943 0.7 0 1.41-0.184 2.054-0.571 1.894-1.137 2.509-3.594 1.372-5.488zM7.377 9.307c-0.143 0.091-0.303 0.134-0.461 0.134-0.284 0-0.562-0.141-0.726-0.398l-1.149-1.806c-0.255-0.4-0.137-0.932 0.264-1.186s0.932-0.137 1.186 0.264l1.149 1.806c0.255 0.4 0.137 0.932-0.264 1.186z"></path>
+</svg>
diff --git a/images/icons/kdb__media--vol-down.svg b/images/icons/kdb__media--vol-down.svg
new file mode 100755
index 00000000..857ca6f4
--- /dev/null
+++ b/images/icons/kdb__media--vol-down.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path fill="#000000" d="M8.578 11.578c-0.192 0-0.384-0.073-0.53-0.22-0.293-0.293-0.293-0.768 0-1.061 1.267-1.267 1.267-3.329 0-4.596-0.293-0.293-0.293-0.768 0-1.061s0.768-0.293 1.061 0c1.852 1.852 1.852 4.865 0 6.718-0.146 0.146-0.338 0.22-0.53 0.22z"></path>
+<path fill="#000000" d="M6.5 15c-0.13 0-0.258-0.051-0.354-0.146l-3.854-3.854h-1.793c-0.276 0-0.5-0.224-0.5-0.5v-5c0-0.276 0.224-0.5 0.5-0.5h1.793l3.854-3.854c0.143-0.143 0.358-0.186 0.545-0.108s0.309 0.26 0.309 0.462v13c0 0.202-0.122 0.385-0.309 0.462-0.062 0.026-0.127 0.038-0.191 0.038z"></path>
+</svg>
diff --git a/index.html b/index.html
index 86cd12d0..558467b0 100644
--- a/index.html
+++ b/index.html
@@ -166,7 +166,7 @@
     <script src="node_modules/handlebars/dist/handlebars.js"></script>
     <script src="app.js"></script>
     <script src="macro.js"></script>
-    <script src="bundle/uhk.js"></script>
+    <script src="build/uhk.js"></script>
 
     <script type="text/x-handlebars-template" id="sidebar-menu--source">
         {{#if menu}}
diff --git a/package.json b/package.json
index c92972a9..28bee2c0 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "typings": "^0.7.12",
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1",
+    "webpack-svgstore-plugin": "^2.1.5",
     "xml-loader": "^1.1.0",
     "yargs": "^4.2.0",
     "zone.js": "^0.6.11"
diff --git a/webpack.config.js b/webpack.config.js
index 9b563645..9bb1a32b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,9 +1,10 @@
 // var webpack = require("webpack");
+var SvgStore = require('webpack-svgstore-plugin');
 
 module.exports = {
     entry: ['reflect-metadata', 'zone.js', 'es6-shim', "./src/boot.ts"],
     output: {
-        path: __dirname + "/bundle",
+        path: __dirname + "/build",
         filename: "uhk.js"
     },
     devtool: 'source-map',
@@ -21,9 +22,24 @@ module.exports = {
         loaders: [
             { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ }
         ]
-    }/*,
+    },
     plugins: [
-        new webpack.optimize.UglifyJsPlugin({ minimize: true })
-    ]*/
+        //   new webpack.optimize.UglifyJsPlugin({ minimize: true })
+        new SvgStore(
+            [
+                'images/icons/**/*.svg'
+            ],
+            './',
+            {
+                name: 'compiled_sprite.svg',
+                chunk: 'app',
+                svgoOptions: {
+                    plugins: [
+                        { removeTitle: true }
+                    ]
+                }
+            }
+        )
+    ]
 
 }
\ No newline at end of file