diff --git a/resources/assets/scripts/components/Icon.vue b/resources/assets/scripts/components/Icon.vue
deleted file mode 100644
index 9f4f7785d..000000000
--- a/resources/assets/scripts/components/Icon.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <i class="ion" :class="iconClass"></i>
-</template>
-
-<script>
-    export default {
-        props: {
-            type: {type: String, required: true},
-            iconStyle: {type: String, default: 'ios'},
-        },
-
-        computed: {
-            iconClass: function () {
-                return `ion-${this.iconStyle}-${this.type}`;
-            }
-        },
-    }
-</script>
diff --git a/resources/assets/scripts/components/core/Navigation.vue b/resources/assets/scripts/components/core/Navigation.vue
index dc1b155f6..92b485b27 100644
--- a/resources/assets/scripts/components/core/Navigation.vue
+++ b/resources/assets/scripts/components/core/Navigation.vue
@@ -44,22 +44,22 @@
             <ul>
                 <li>
                     <router-link :to="{ name: 'dashboard' }">
-                        <Icon type="cube"/>
+                        <server-icon aria-label="Server dashboard" class="h-4"/>
                     </router-link>
                 </li>
                 <li>
                     <router-link :to="{ name: 'account' }">
-                        <Icon type="contact"/>
+                        <user-icon aria-label="Profile management" class="h-4"/>
                     </router-link>
                 </li>
                 <li>
                     <a :href="this.route('admin.index')">
-                        <Icon type="cog"/>
+                        <settings-icon aria-label="Administrative controls" class="h-4"/>
                     </a>
                 </li>
                 <li>
                     <a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
-                        <Icon type="log-out"/>
+                        <log-out-icon aria-label="Sign out" class="h-4"/>
                     </a>
                 </li>
             </ul>
@@ -70,11 +70,12 @@
 <script>
     import debounce from 'lodash/debounce';
     import { mapState } from 'vuex';
-    import Icon from '../Icon';
+    import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
 
     export default {
         name: 'navigation',
-        components: {Icon},
+        components: { LogOutIcon, ServerIcon, SettingsIcon, UserIcon },
+
         data: function () {
             return {
                 loadingResults: false,
diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css
index a73ce134c..74a50d3a6 100644
--- a/resources/assets/styles/components/navigation.css
+++ b/resources/assets/styles/components/navigation.css
@@ -17,8 +17,7 @@
 
     & > .search-box {
         & > .search-input {
-            @apply .text-sm .p-2 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
-            margin-top: 0.6rem;
+            @apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
             width: 26rem;
             opacity: 0.7;
             transition: ease-in-out opacity 150ms;
@@ -54,7 +53,7 @@
             & > li {
                 @apply .inline-block;
                 & > a {
-                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-xl .px-5 .py-4;
+                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;
 
                     &:hover {
                         @apply .bg-blue-dark;