diff --git a/Gruntfile.js b/Gruntfile.js
index 4516193f..9ffe3269 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -178,6 +178,26 @@ module.exports = function (grunt) {
             }
         },
 
+        /**
+         * Compile our SVG's into fonts. This is a utility method only which
+         * needs to be executed manually.
+         */
+        webfont: {
+            custom_icons: {
+                src: dir.source + '/fonts/src/*.svg',
+                dest: dir.source + '/fonts',
+                destCss: dir.source + '/theme/base',
+                options: {
+                    font: 'custom_icons',
+                    syntax: 'bem',
+                    htmlDemo: false,
+                    stylesheet: 'css',
+                    relativeFontPath: '../../fonts',
+                    hashes: false
+                }
+            }
+        },
+
         /**
          * grunt html2js
          *
diff --git a/package.json b/package.json
index 1253b13a..083ad292 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
         "grunt-protractor-runner": "0.2.3",
         "selenium-standalone": "2.39.0-2.7.0",
         "karma-html-reporter": "0.1.1",
-        "grunt-connect-proxy": "0.1.10"
-    }
+        "grunt-connect-proxy": "0.1.10",
+        "grunt-webfont": "0.4.2"
+  }
 }
diff --git a/src/app/storyboard/template/header_menu.html b/src/app/storyboard/template/header_menu.html
index 61d0f646..f322976a 100644
--- a/src/app/storyboard/template/header_menu.html
+++ b/src/app/storyboard/template/header_menu.html
@@ -31,7 +31,10 @@
     <div ng-controller="HeaderController">
 
         <div class="navbar-header">
-            <a class="navbar-brand" href="#!/">StoryBoard</a>
+            <a class="navbar-brand" href="#!/">
+                <i class="icon icon_storyboard fa-lg"></i>
+                StoryBoard
+            </a>
         </div>
 
         <ul class="nav navbar-nav">
diff --git a/src/fonts/custom_font_icons.eot b/src/fonts/custom_font_icons.eot
deleted file mode 100644
index a2c2073a..00000000
Binary files a/src/fonts/custom_font_icons.eot and /dev/null differ
diff --git a/src/fonts/custom_font_icons.ttf b/src/fonts/custom_font_icons.ttf
deleted file mode 100644
index 7df7ca39..00000000
Binary files a/src/fonts/custom_font_icons.ttf and /dev/null differ
diff --git a/src/fonts/custom_font_icons.woff b/src/fonts/custom_font_icons.woff
deleted file mode 100644
index 18df7d64..00000000
Binary files a/src/fonts/custom_font_icons.woff and /dev/null differ
diff --git a/src/fonts/custom_icons.eot b/src/fonts/custom_icons.eot
new file mode 100644
index 00000000..2f076219
Binary files /dev/null and b/src/fonts/custom_icons.eot differ
diff --git a/src/fonts/custom_icons.svg b/src/fonts/custom_icons.svg
new file mode 100644
index 00000000..7843ec99
--- /dev/null
+++ b/src/fonts/custom_icons.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2014-6-10: Created.
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+Created by FontForge 20120731 at Tue Jun 10 14:42:09 2014
+ By Michael Krotscheck
+Created by Michael Krotscheck with FontForge 2.0 (http://fontforge.sf.net)
+</metadata>
+<defs>
+<font id="custom_icons" horiz-adv-x="460" >
+  <font-face 
+    font-family="custom_icons"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="512"
+    panose-1="2 0 6 3 0 0 0 0 0 0"
+    ascent="448"
+    descent="-64"
+    bbox="0 -66 506 432"
+    underline-thickness="25.6"
+    underline-position="-51.2"
+    unicode-range="U+E001-E002"
+  />
+    <missing-glyph />
+    <glyph glyph-name="uniE001" unicode="&#xe001;" 
+d="M6 3c-4 4 -6 9 -6 14v80l47 -46l-1 -88zM384 233l75 7l1 -126l-76 -6v125zM57 205l75 6l1 -125l-76 -7v126zM0 132v121l46 -45l1 -122zM77 -59c-5 0 -10 2 -14 6s-6 9 -6 14v87l76 7v-14c0 -10 8 -18 18 -18v0h2l212 18c11 1 19 10 19 21v15l76 7l-1 -87
+c0 -12 -10 -24 -22 -25l-358 -31h-2zM58 320c0 12 10 24 22 25l358 31h2c5 0 10 -2 14 -6s6 -9 6 -14l-1 -85l-75 -6v11c0 10 -8 18 -18 18h-2l-212 -18c-11 -1 -19 -10 -19 -21v-12l-76 -7zM0 289l1 88c0 12 10 23 22 24l358 31h2c5 0 10 -1 14 -5c0 0 33 -32 41 -40
+l-359 -32c-18 -2 -32 -17 -32 -35v-77zM377 96l67 6l9 -8l-72 -6l-47 46h5zM342 282l23 2h1c4 0 7 -4 7 -8v-23l71 6l8 -9l-72 -6zM327 160v120h1l45 -44v-121zM50 225l67 6l9 -9l-72 -7l-47 47h5zM50 68l68 6l8 -9l-72 -6l-47 46l5 1zM151 33h-1l-1 1h-1v0h-1v1h-1
+c-2 1 -3 4 -3 6l1 22l-12 12l12 1v7l164 15c11 1 19 9 19 20v7l46 -45v-18c0 -5 -4 -10 -9 -10l-212 -19h-1z" />
+    <glyph glyph-name="uniE002" unicode="&#xe002;" horiz-adv-x="506" 
+d="M215 79l89 -2l-4 -143l-214 5l3 143l89 -2l-1 -44l37 -1zM187 84c-10 4 -17 14 -17 26c0 15 12 26 27 26s27 -13 27 -28c0 -12 -8 -21 -19 -24l-1 -39h-17v39zM397 264l88 13l21 -141l-213 -32l-20 141l88 13l6 -43l36 5zM369 264c-11 2 -19 11 -21 23c-2 15 8 28 23 30
+s28 -7 30 -22c2 -12 -4 -23 -14 -28l6 -38l-18 -3zM126 285l89 6l8 -143l-215 -12l-8 142l89 5l3 -44l36 3zM98 288c-11 3 -18 12 -19 24c-1 15 10 28 25 29s27 -10 28 -25c1 -12 -6 -23 -16 -27l2 -38l-17 -2z" />
+  </font>
+</defs></svg>
diff --git a/src/fonts/custom_icons.ttf b/src/fonts/custom_icons.ttf
new file mode 100644
index 00000000..b8c1b68a
Binary files /dev/null and b/src/fonts/custom_icons.ttf differ
diff --git a/src/fonts/custom_icons.woff b/src/fonts/custom_icons.woff
new file mode 100644
index 00000000..5110ba70
Binary files /dev/null and b/src/fonts/custom_icons.woff differ
diff --git a/src/fonts/src/openstack.svg b/src/fonts/src/openstack.svg
new file mode 100644
index 00000000..ea799163
--- /dev/null
+++ b/src/fonts/src/openstack.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<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"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="80"
+   height="80"
+   viewBox="0 0 85.789 91.76"
+   enable-background="new 0 0 85.789 91.76"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="openstack-black.svg"><metadata
+     id="metadata3068"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs3066" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1668"
+     inkscape:window-height="1233"
+     id="namedview3064"
+     showgrid="false"
+     inkscape:zoom="2.5719267"
+     inkscape:cx="42.894501"
+     inkscape:cy="61.432544"
+     inkscape:window-x="628"
+     inkscape:window-y="145"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1"
+     inkscape:snap-bbox="false" /><g
+     id="g3070"
+     transform="matrix(0.9593226,0,0,0.9593226,43.686417,46.854341)"><path
+       inkscape:connector-curvature="0"
+       id="path3038"
+       d="m -41.837,34.322998 c -0.688,-0.673 -1.064,-1.604 -1.063,-2.626 l 0.032,-14.932 8.635,8.541 -0.027,16.514 -7.577,-7.497 z" /><polygon
+       transform="matrix(1,0,0,-1,0,-1.7833992e-6)"
+       id="polygon3040"
+       points="28.735,8.765 42.818,10.001 42.912,-13.484 28.83,-14.717 " /><polygon
+       transform="matrix(1,0,0,-1,0,-1.7833992e-6)"
+       id="polygon3042"
+       points="-32.318,3.421 -18.226,4.654 -18.136,-18.833 -32.224,-20.066 " /><polygon
+       transform="matrix(1,0,0,-1,0,-1.7833992e-6)"
+       id="polygon3044"
+       points="-42.86,-10.216 -42.947,12.445 -34.32,3.917 -34.229,-18.752 " /><path
+       inkscape:connector-curvature="0"
+       id="path3046"
+       d="m -28.615,45.879998 c -1.003,10e-4 -1.928,-0.374 -2.604,-1.052 -0.675,-0.678 -1.045,-1.607 -1.041,-2.616 l 0.027,-16.405 14.094,-1.237 -0.006,2.616 c 0,1.932 1.505,3.443 3.427,3.443 0,0 0,0 0,0 0.105,0 0.212,-0.004 0.32,-0.014 l 39.623,-3.472 c 2.006,-0.181 3.584,-1.89 3.596,-3.892 l 0.004,-2.793 14.08,-1.232 -0.027,16.227 c -0.005,2.301 -1.895,4.342 -4.211,4.546 l -66.919,5.865 c -0.123,0.011 -0.244,0.016 -0.363,0.016 z" /><path
+       inkscape:connector-curvature="0"
+       id="path3048"
+       d="m -32.192,-24.984002 c 0.005,-2.3 1.892,-4.336 4.207,-4.541 l 66.923,-5.831 c 0.108,-0.009 0.223,-0.013 0.334,-0.013 1.016,0 1.948,0.375 2.629,1.056 0.676,0.678 1.049,1.61 1.047,2.625 l -0.055,15.89 -14.076,1.221 0.004,-2.1 c 0,-1.931 -1.504,-3.443 -3.425,-3.443 -0.104,0 -0.211,0.005 -0.318,0.014 l -39.63,3.443 c -1.98,0.176 -3.589,1.921 -3.589,3.891 l -0.002,2.277 -14.092,1.2280002 0.043,-15.7170002 z" /><path
+       inkscape:connector-curvature="0"
+       id="path3050"
+       d="m -42.876,-19.109002 0.05,-16.389 c 0.004,-2.31 1.89,-4.349 4.204,-4.548 l 66.923,-5.818 c 0.123,-0.011 0.244,-0.016 0.365,-0.016 0.997,0 1.914,0.367 2.58,1.034 0,0 6.137,6.062 7.584,7.493 -0.019,10e-4 -66.99,5.836 -66.99,5.836 -3.32,0.293 -6.025,3.222 -6.032,6.528 l -0.04,14.425 -8.644,-8.545 z" /><polygon
+       transform="matrix(1,0,0,-1,0,-1.7833992e-6)"
+       id="polygon3052"
+       points="27.46,-16.844 40.064,-15.74 41.668,-17.328 28.2,-18.506 19.426,-9.833 20.295,-9.756 " /><path
+       inkscape:connector-curvature="0"
+       id="path3054"
+       d="m 21.005,-17.745002 4.245,-0.37 c 0.049,-0.004 0.098,-0.006 0.146,-0.006 0.825,0 1.425,0.606 1.425,1.441 l -0.008,4.283 13.111,-1.137 1.65,1.633 -13.469,1.183 -7.1,-7.027 z" /><polygon
+       transform="matrix(1,0,0,-1,0,-1.7833992e-6)"
+       id="polygon3056"
+       points="18.201,-4.871 18.11,17.493 18.391,17.517 26.732,9.262 26.824,-13.402 " /><polygon
+       transform="matrix(1,0,0,-1,0,-1.7833992e-6)"
+       id="polygon3058"
+       points="-33.613,7.141 -21.161,8.225 -19.47,6.553 -32.947,5.374 -41.717,14.042 -40.687,14.132 " /><polygon
+       transform="matrix(1,0,0,-1,0,-1.7833992e-6)"
+       id="polygon3060"
+       points="-33.594,-22.193 -20.974,-21.09 -19.375,-22.67 -32.857,-23.854 -41.625,-15.182 -40.761,-15.105 " /><path
+       inkscape:connector-curvature="0"
+       id="path3062"
+       d="m -14.71,28.628998 c -0.068,0 -0.135,-0.004 -0.201,-0.012 l -0.122,-0.033 c -0.105,-0.021 -0.145,-0.027 -0.182,-0.039 l -0.098,-0.049 c -0.093,-0.041 -0.138,-0.059 -0.178,-0.083 l -0.081,-0.065 c -0.063,-0.046 -0.103,-0.07 -0.136,-0.104 -0.283,-0.27 -0.438,-0.645 -0.438,-1.057 l 0.01,-4.127 -2.225,-2.2 2.231,-0.195 -0.005,-1.353 30.726,-2.69 c 1.975,-0.17 3.586,-1.917 3.592,-3.894 l 0.001,-1.31 8.642,8.54 -0.006,3.285 c -0.006,0.945 -0.818,1.821 -1.773,1.907 l -39.619,3.472 c -0.047,0.005 -0.093,0.007 -0.138,0.007 z" /></g></svg>
\ No newline at end of file
diff --git a/src/fonts/src/storyboard.svg b/src/fonts/src/storyboard.svg
new file mode 100644
index 00000000..d3fdb3cc
--- /dev/null
+++ b/src/fonts/src/storyboard.svg
@@ -0,0 +1,21 @@
+<?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 version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="213.581px" height="200px" viewBox="0 0 213.581 200"
+	 enable-background="new 0 0 213.581 200"
+	 xml:space="preserve">
+<symbol  id="Note" viewBox="-44.835 -41.53 89.67 83.059">
+	<polygon points="7.675,17.906 7.675,-0.389 -7.675,-0.389 -7.675,17.906 -44.835,17.906 -44.835,-41.529 44.835,-41.529 
+		44.835,17.906 	"/>
+	<path d="M-3.675,19.776V3.611h7.35v16.165c4.373,1.522,7.517,5.67,7.517,10.562c0,6.181-5.011,11.191-11.191,11.191
+		c-6.181,0-11.192-5.011-11.192-11.191C-11.191,25.446-8.048,21.298-3.675,19.776z"/>
+</symbol>
+<g>
+	
+		<use xlink:href="#Note"  width="89.67" height="83.059" x="-44.835" y="-41.53" transform="matrix(0.9998 0.0217 0.0217 -0.9998 89.6963 131.167)" overflow="visible"/>
+	
+		<use xlink:href="#Note"  width="89.67" height="83.059" x="-44.835" y="-41.53" transform="matrix(0.9891 -0.1471 -0.1471 -0.9891 161.4497 48.0005)" overflow="visible"/>
+	
+		<use xlink:href="#Note"  width="89.67" height="83.059" x="-44.835" y="-41.53" transform="matrix(0.9983 -0.0586 -0.0586 -0.9983 50.6831 42.1128)" overflow="visible"/>
+</g>
+</svg>
diff --git a/src/theme/base/body.less b/src/theme/base/body.less
index 34808b29..6deb08d6 100644
--- a/src/theme/base/body.less
+++ b/src/theme/base/body.less
@@ -43,8 +43,4 @@ body {
     body {
         margin-left: @navbar-fixed-side-width-lg;
     }
-}
-
-i.icon {
-    line-height: .5em;
-}
+}
\ No newline at end of file
diff --git a/src/theme/base/custom_font_icons.less b/src/theme/base/custom_font_icons.less
deleted file mode 100644
index e396a3cb..00000000
--- a/src/theme/base/custom_font_icons.less
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright (c) 2014 Hewlett-Packard Development Company, L.P.
- *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License. You may obtain
- * a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- */
-
-@font-face {
-  font-family: custom_font_icons;
-  src: url(../../fonts/custom_font_icons.eot);
-  src: url(../../fonts/custom_font_icons.eot?#iefix) format("embedded-opentype"), url(../../fonts/custom_font_icons.woff) format("woff"), url(../../fonts/custom_font_icons.ttf) format("truetype");
-  font-weight: 400;
-  font-style: normal
-}
-
-.icon {
-  font-family: custom_font_icons;
-  display: inline-block;
-  font-weight: 400;
-  font-style: normal;
-  speak: none;
-  text-decoration: inherit;
-  text-transform: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale
-}
-
-.icon_openstack:before {
-  content: "\f100"
-}
\ No newline at end of file
diff --git a/src/theme/base/custom_icons.less b/src/theme/base/custom_icons.less
new file mode 100644
index 00000000..7dc6c149
--- /dev/null
+++ b/src/theme/base/custom_icons.less
@@ -0,0 +1,58 @@
+// Generated by grunt-webfont
+
+
+
+@font-face {
+    font-family:"custom_icons";
+    src:url("../fonts/custom_icons.eot");
+    font-weight:normal;
+    font-style:normal;
+}
+@font-face {
+	font-family:"custom_icons";
+	src:url("../fonts/custom_icons.eot");
+	src:url("../fonts/custom_icons.eot?#iefix") format("embedded-opentype"),
+		url("../fonts/custom_icons.woff") format("woff"),
+		url("../fonts/custom_icons.ttf") format("truetype"),
+		url("../fonts/custom_icons.svg?#custom_icons") format("svg");
+	font-weight:normal;
+	font-style:normal;
+}
+
+.icon {
+	font-family:"custom_icons";
+	display:inline-block;
+	vertical-align:middle;
+	line-height:1;
+	font-weight:normal;
+	font-style:normal;
+	speak:none;
+	text-decoration:inherit;
+	text-transform:none;
+	text-rendering:optimizeLegibility;
+	-webkit-font-smoothing:antialiased;
+	-moz-osx-font-smoothing:grayscale;
+}
+
+
+// Icons
+
+.icon-openstack() {
+	&:before {
+		content:"\e001";
+	}
+	
+}
+.icon_openstack{
+ 	.icon-openstack();
+}
+
+.icon-storyboard() {
+	&:before {
+		content:"\e002";
+	}
+	
+}
+.icon_storyboard{
+ 	.icon-storyboard();
+}
diff --git a/src/theme/main.less b/src/theme/main.less
index d1d7693a..c2ef5127 100644
--- a/src/theme/main.less
+++ b/src/theme/main.less
@@ -30,7 +30,7 @@
 // Addons to the bootstrap theme.
 @import './base/bootstrap_addons.less';
 // Add our own custom icon font.
-@import './base/custom_font_icons.less';
+@import './base/custom_icons.less';
 // Module specific styles
 @import './base/notification.less';
 @import './base/body.less';