diff --git a/styleguide/colors/index.html b/styleguide/colors/index.html
index 96abfe9..ae87732 100644
--- a/styleguide/colors/index.html
+++ b/styleguide/colors/index.html
@@ -55,18 +55,16 @@
             <a href="../"><i data-icon="home"></i>Overview</a>
           </li>
           <li class="active">
-            <a href=""><i data-icon="info"></i>Colors</a>
+            <a href=""><i data-icon="pen"></i>Colors</a>
           </li>
           <li>
-            <a href="../typography"><i data-icon="info"></i>Typography</a>
+            <a href="../typography"><i data-icon="font"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"
-              ><i data-icon="hare_head"></i>Iconography</a
-            >
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
           </li>
           <li>
-            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
+            <a href="../logo"><i data-icon="hare_head"></i>Logo</a>
           </li>
           <li>
             <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
diff --git a/styleguide/demopage/index.html b/styleguide/demopage/index.html
index 6ee2384..0a18eb3 100644
--- a/styleguide/demopage/index.html
+++ b/styleguide/demopage/index.html
@@ -55,18 +55,16 @@
             <a href="../"><i data-icon="home"></i>Overview</a>
           </li>
           <li>
-            <a href="../colors"><i data-icon="info"></i>Colors</a>
+            <a href="../colors"><i data-icon="pen"></i>Colors</a>
           </li>
           <li>
-            <a href="../typography"><i data-icon="info"></i>Typography</a>
+            <a href="../typography"><i data-icon="font"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"
-              ><i data-icon="hare_head"></i>Iconography</a
-            >
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
           </li>
           <li>
-            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
+            <a href="../logo"><i data-icon="hare_head"></i>Logo</a>
           </li>
           <li>
             <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
diff --git a/styleguide/generator/index.html b/styleguide/generator/index.html
index 3a0ddf8..8a77b7b 100644
--- a/styleguide/generator/index.html
+++ b/styleguide/generator/index.html
@@ -55,18 +55,16 @@
             <a href="../"><i data-icon="home"></i>Overview</a>
           </li>
           <li>
-            <a href="../colors"><i data-icon="info"></i>Colors</a>
+            <a href="../colors"><i data-icon="pen"></i>Colors</a>
           </li>
           <li>
-            <a href="../typography"><i data-icon="info"></i>Typography</a>
+            <a href="../typography"><i data-icon="font"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"
-              ><i data-icon="hare_head"></i>Iconography</a
-            >
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
           </li>
           <li>
-            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
+            <a href="../logo"><i data-icon="hare_head"></i>Logo</a>
           </li>
           <li>
             <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
diff --git a/styleguide/glow/index.html b/styleguide/glow/index.html
index 8a90e9b..c5af334 100644
--- a/styleguide/glow/index.html
+++ b/styleguide/glow/index.html
@@ -55,18 +55,16 @@
             <a href="../"><i data-icon="home"></i>Overview</a>
           </li>
           <li>
-            <a href="../colors"><i data-icon="info"></i>Colors</a>
+            <a href="../colors"><i data-icon="pen"></i>Colors</a>
           </li>
           <li>
-            <a href="../typography"><i data-icon="info"></i>Typography</a>
+            <a href="../typography"><i data-icon="font"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"
-              ><i data-icon="hare_head"></i>Iconography</a
-            >
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
           </li>
           <li>
-            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
+            <a href="../logo"><i data-icon="hare_head"></i>Logo</a>
           </li>
           <li class="active">
             <a href=""><i data-icon="lightbulb"></i>Glow</a>
diff --git a/styleguide/iconography/index.html b/styleguide/iconography/index.html
index 0f72091..a4facf5 100644
--- a/styleguide/iconography/index.html
+++ b/styleguide/iconography/index.html
@@ -55,16 +55,16 @@
             <a href="../"><i data-icon="home"></i>Overview</a>
           </li>
           <li>
-            <a href="../colors"><i data-icon="info"></i>Colors</a>
+            <a href="../colors"><i data-icon="pen"></i>Colors</a>
           </li>
           <li>
-            <a href="../typography"><i data-icon="info"></i>Typography</a>
+            <a href="../typography"><i data-icon="font"></i>Typography</a>
           </li>
           <li class="active">
-            <a href=""><i data-icon="hare_head"></i>Iconography</a>
+            <a href=""><i data-icon="info"></i>Iconography</a>
           </li>
           <li>
-            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
+            <a href="../logo"><i data-icon="hare_head"></i>Logo</a>
           </li>
           <li>
             <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
diff --git a/styleguide/iconography/list/index.html b/styleguide/iconography/list/index.html
index e441524..185a9d8 100644
--- a/styleguide/iconography/list/index.html
+++ b/styleguide/iconography/list/index.html
@@ -55,16 +55,16 @@
             <a href="../../"><i data-icon="home"></i>Overview</a>
           </li>
           <li>
-            <a href="../../colors"><i data-icon="info"></i>Colors</a>
+            <a href="../../colors"><i data-icon="pen"></i>Colors</a>
           </li>
           <li>
-            <a href="../../typography"><i data-icon="info"></i>Typography</a>
+            <a href="../../typography"><i data-icon="font"></i>Typography</a>
           </li>
           <li class="active">
-            <a href="../"><i data-icon="hare_head"></i>Iconography</a>
+            <a href="../"><i data-icon="info"></i>Iconography</a>
           </li>
           <li>
-            <a href="../../logo"><i data-icon="fairydust"></i>Logo</a>
+            <a href="../../logo"><i data-icon="hare_head"></i>Logo</a>
           </li>
           <li>
             <a href="../../glow"><i data-icon="lightbulb"></i>Glow</a>
diff --git a/styleguide/index.html b/styleguide/index.html
index 1edc7b7..fa6a882 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -51,16 +51,16 @@
             <a href=""><i data-icon="home"></i>Overview</a>
           </li>
           <li>
-            <a href="colors"><i data-icon="info"></i>Colors</a>
+            <a href="colors"><i data-icon="pen"></i>Colors</a>
           </li>
           <li>
-            <a href="typography"><i data-icon="info"></i>Typography</a>
+            <a href="typography"><i data-icon="font"></i>Typography</a>
           </li>
           <li>
-            <a href="iconography"><i data-icon="hare_head"></i>Iconography</a>
+            <a href="iconography"><i data-icon="info"></i>Iconography</a>
           </li>
           <li>
-            <a href="logo"><i data-icon="fairydust"></i>Logo</a>
+            <a href="logo"><i data-icon="hare_head"></i>Logo</a>
           </li>
           <li>
             <a href="glow"><i data-icon="lightbulb"></i>Glow</a>
diff --git a/styleguide/logo/index.html b/styleguide/logo/index.html
index dbe5a1d..e9d69b7 100644
--- a/styleguide/logo/index.html
+++ b/styleguide/logo/index.html
@@ -55,18 +55,16 @@
             <a href="../"><i data-icon="home"></i>Overview</a>
           </li>
           <li>
-            <a href="../colors"><i data-icon="info"></i>Colors</a>
+            <a href="../colors"><i data-icon="pen"></i>Colors</a>
           </li>
           <li>
-            <a href="../typography"><i data-icon="info"></i>Typography</a>
+            <a href="../typography"><i data-icon="font"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"
-              ><i data-icon="hare_head"></i>Iconography</a
-            >
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
           </li>
           <li class="active">
-            <a href=""><i data-icon="fairydust"></i>Logo</a>
+            <a href=""><i data-icon="hare_head"></i>Logo</a>
           </li>
           <li>
             <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
diff --git a/styleguide/typography/index.html b/styleguide/typography/index.html
index a203503..8d6f882 100644
--- a/styleguide/typography/index.html
+++ b/styleguide/typography/index.html
@@ -55,18 +55,16 @@
             <a href="../"><i data-icon="home"></i>Overview</a>
           </li>
           <li>
-            <a href="../colors"><i data-icon="info"></i>Colors</a>
+            <a href="../colors"><i data-icon="pen"></i>Colors</a>
           </li>
           <li class="active">
-            <a href=""><i data-icon="info"></i>Typography</a>
+            <a href=""><i data-icon="font"></i>Typography</a>
           </li>
           <li>
-            <a href="../iconography"
-              ><i data-icon="hare_head"></i>Iconography</a
-            >
+            <a href="../iconography"><i data-icon="info"></i>Iconography</a>
           </li>
           <li>
-            <a href="../logo"><i data-icon="fairydust"></i>Logo</a>
+            <a href="../logo"><i data-icon="hare_head"></i>Logo</a>
           </li>
           <li>
             <a href="../glow"><i data-icon="lightbulb"></i>Glow</a>