diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 050ac05..a9c41b4 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -20,9 +20,7 @@
       </p>
       <button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data">
         <span>Refresh</span>
-        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.18 51.91">
-          <path class="cls-1" d="M38,20.77H52v-14H48.3v6.07A26,26,0,1,0,48.7,38H44.32a22.14,22.14,0,1,1,1.8-20.92H38v3.67Z" transform="translate(0.16 0.14)"/>
-        </svg>
+        <icon file="icon-restart.svg"></icon>
       </button>
     </div>
   </div>
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 379aa3d..6bd2c79 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -2,20 +2,16 @@
   <ul id="nav__top-level" ng-style="navStyle">
     <li>
       <a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M23.9 18.2l3.3 3.3 1.1-1.1-4.4-4.4-7.8 7.8-3.3-3.3-1.1 1.1 4.4 4.4 7.8-7.8z"/><path d="M5 8v24h30V8H5zm28 22H7V12h26v18z"/></svg>
-          Server overview
-        </span>
+        <icon class="nav-icon" file="icon-overview.svg"></icon>
+        Server overview
       </a>
     </li>
     <li>
       <button class="btn-health"
-        ng-class="{opened: firstLevel == 'server-health'}"
-        ng-click="change('server-health')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M32 12.9V16H8V8h19M8 16h24v8H8zM8 24h24v8H8zM19 12h8M11 12h2M19 20h8M11 20h2M19 28h8M11 28h2"/><path d="M36.4 4l1.1 1.1-5.1 5.1-2.9-2.8 1.2-1.2L32.4 8z"/></svg>
-          Server health
-        </span>
+      ng-class="{opened: firstLevel == 'server-health'}"
+      ng-click="change('server-health')">
+        <icon class="nav-icon" file="icon-health.svg"></icon>
+        Server health
       </button>
       <ul class="nav__second-level btn-health"
         ng-style="navStyle"
@@ -40,10 +36,8 @@
     </li>
     <li>
       <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M8 12h24M8 20h24M8 28h24"/><path class="st1" d="M24 28h4M18 20h4M12 12h4"/></svg>
-          Server control
-        </span>
+        <icon class="nav-icon" file="icon-control.svg"></icon>
+        Server control
       </button>
       <ul class="nav__second-level btn-control"
         ng-style="navStyle"
@@ -80,10 +74,8 @@
     </li>
     <li>
       <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M31.5 20c0-.6-.1-1.2-.2-1.8L35 15l-3.1-5.1-4.4 1.4c-1.1-.9-2.3-1.6-3.6-2.1L23 5h-6l-1 4.2c-1.3.5-2.5 1.2-3.6 2.1L8.1 9.9 5 15l3.7 3.2c-.1.6-.2 1.2-.2 1.8 0 .6.1 1.2.2 1.8L5 25l3.1 5.1 4.4-1.4c1.1.9 2.3 1.6 3.6 2.1l1 4.2h6l1-4.2c1.3-.5 2.5-1.2 3.6-2.1l4.4 1.4L35 25l-3.7-3.2c.1-.6.2-1.2.2-1.8zm.9 5.4L31 27.7l-2.9-.9-1.1-.4-.9.7c-.9.8-1.9 1.3-2.9 1.7l-1 .4-.2 1.1-.6 2.7h-2.8l-.6-2.7-.2-1.1-1-.4c-1.1-.4-2.1-1-2.9-1.7l-.9-.7-1.1.4-2.9.9-1.4-2.3 2.4-2.1.8-.7-.2-1.1c-.1-.5-.1-1-.1-1.5 0-.4 0-.9.1-1.5l.2-1.1-.8-.7-2.4-2.1L9 12.3l2.9.9 1.1.4.9-.7c.9-.8 1.9-1.3 2.9-1.7l1-.4.2-1.1.6-2.7h2.8l.6 2.7.2 1.1 1 .4c1.1.4 2.1 1 2.9 1.7l.9.7 1.1-.4 2.9-.9 1.4 2.3-2.4 2.1-.8.7.2 1.1c.1.6.1 1 .1 1.5s0 .9-.1 1.5l-.2 1.1.8.7 2.4 2.1z"/><path d="M20 15c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/></svg>
-          Server configuration
-        </span>
+        <icon class="nav-icon" file="icon-config.svg"></icon>
+        Server configuration
       </button>
       <ul class="nav__second-level btn-firmware"
         ng-style="navStyle"
@@ -108,10 +100,8 @@
     </li>
     <li>
       <button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')">
-        <span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="nav-icon"><path d="M16 21c5.523 0 10-4.477 10-10S21.523 1 16 1 6 5.477 6 11s4.477 10 10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm8 20H8a4 4 0 0 0-4 4v4h24v-4a4 4 0 0 0-4-4z"/></svg>
-          Users
-        </span>
+        <icon class="nav-icon" file="icon-user.svg"></icon>
+        Users
       </button>
       <ul class="nav__second-level btn-users"
         ng-style="navStyle"
diff --git a/app/common/directives/confirm.html b/app/common/directives/confirm.html
index a38cf60..3faf2a4 100644
--- a/app/common/directives/confirm.html
+++ b/app/common/directives/confirm.html
@@ -1,10 +1,10 @@
 <div class="inline__confirm" ng-class="{active: confirm}">
     <div class="inline__confirm-message">
-        <p class="h3"><i></i>Are you sure you want to <strong>{{title}}?</strong></p>
+        <p class="h3">Are you sure you want to <strong>{{title}}?</strong></p>
         <p>{{message}}</p>
     </div>
     <div class="inline__confirm-buttons">
-        <button class="btn-primary" ng-click="accept()">Yes</button>
-        <button class="btn-primary" ng-click="cancel()">No</button>
+        <button class="btn  btn-primary" ng-click="accept()">Yes</button>
+        <button class="btn  btn-primary" ng-click="cancel()">No</button>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/common/directives/firmware-list.html b/app/common/directives/firmware-list.html
index 1227a20..4ebf117 100644
--- a/app/common/directives/firmware-list.html
+++ b/app/common/directives/firmware-list.html
@@ -39,17 +39,11 @@
         </div>
         <div class="table__cell firmware__version" ng-class="{'active':firmware.isExtended}">
           <span class="table__cell-label">Version:</span>{{firmware.Version}}
-          <div class="icon icon__more" ng-click="toggleMoreDropdown($event, firmware)"
+          <button
+              ng-click="toggleMoreDropdown($event, firmware)"
               ng-class="{'active':firmware.isExtended}" ng-show="firmware.isExtended">
-            <svg version="1.1" x="0px" y="0px" viewBox="0 0 24.3 24.6">
-              <path d="M12.1,23C6.1,23,1.3,18.2,1.3,12.3S6.1,1.6,12.1,1.6s10.7,4.8,10.7,10.7S18,23,12.1,23z M12.1,2.6c-5.4,0-9.7,4.4-9.7,9.7 S6.7,22,12.1,22s9.7-4.4,9.7-9.7S17.4,2.6,12.1,2.6z"/>
-              <g>
-                <circle cx="6.7" cy="12.5" r="1.5"/>
-                <circle cx="12.1" cy="12.5" r="1.5"/>
-                <circle cx="17.4" cy="12.5" r="1.5"/>
-              </g>
-            </svg>
-          </div>
+              <icon file="icon-more.svg"></icon>
+          </button>
         </div>
         <div class="icon__more-dropdown" ng-show="firmware.extended.show" click-outside="firmware.extended.show=false;">
           <h5 class="bold">Extended version information</h5>
diff --git a/app/common/directives/icon-provider.js b/app/common/directives/icon-provider.js
new file mode 100644
index 0000000..5554fdd
--- /dev/null
+++ b/app/common/directives/icon-provider.js
@@ -0,0 +1,28 @@
+/**
+ * Directive to inline an svg icon
+ *
+ * To use–add an <icon> directive with a file attribute with
+ * a value that corresponds to the desired svg file to inline
+ * from the icons directory.
+ *
+ * Example: <icon file="icon-export.svg"></icon>
+ *
+ */
+window.angular && ((angular) => {
+  'use-strict';
+
+  angular.module('app.common.directives').directive('icon', () => {
+    return {
+      restrict: 'E', link: (scope, element, attrs) => {
+        const file = attrs.file;
+        if (file === undefined) {
+          console.log('File name not provided for <icon> directive.')
+          return;
+        }
+        const svg = require(`../../assets/icons/${file}`);
+        element.html(svg);
+        element.addClass('icon');
+      }
+    }
+  })
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index 5a183ed..e89ce50 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -41,20 +41,20 @@
         </div>
         <div>
           <div class="event__actions">
-            <button class="btn-meta-copy" clipboard text="copyText(event)" on-copied="copySuccess(event)" on-error="copyfailed(err)">
-              <img class="event__icon" src="../../assets/images/icon-copy.svg" alt=""/><span ng-if="!event.copied">Copy</span><span ng-if="event.copied">Copied</span>
+            <button class="btn  btn-tertiary" clipboard text="copyText(event)" on-copied="copySuccess(event)" on-error="copyfailed(err)">
+              <icon file="icon-copy.svg"></icon>
+              <span ng-if="!event.copied">Copy</span>
+              <span ng-if="event.copied">Copied</span>
             </button>
             <button
-              class="btn-delete"
+              class="btn  btn-tertiary"
               ng-class="{'disabled': multiSelected}"
               ng-click="event.confirm= ! event.confirm"
               ng-disabled="multiSelected">
-                <img
-                  class="event__icon"
-                  src="../../assets/images/icon-trashcan.svg"
-                  alt=""/>Delete
+                <icon file="icon-trashcan.svg"></icon>Delete
             </button>
-            <button class="btn-resolve" ng-class="{'disabled': (event.Resolved == 1 || multiSelected)}" ng-click="resolveEvent(event)" ng-disabled="event.Resolved == 1 || multiSelected"><img class="event__icon" src="../../assets/images/icon-check.svg" alt=""/>Mark as resolved</button>
+            <button class="btn  btn-tertiary" ng-class="{'disabled': (event.Resolved == 1 || multiSelected)}" ng-click="resolveEvent(event)" ng-disabled="event.Resolved == 1 || multiSelected">
+              <icon file="icon-check.svg"></icon>Mark as resolved
           </div>
           <div class="event__related" ng-show="event.related_items.length">
             <p class="inline event__related-label">Related items:</p>
diff --git a/app/common/directives/log-filter.html b/app/common/directives/log-filter.html
index b84618e..d3c392f 100644
--- a/app/common/directives/log-filter.html
+++ b/app/common/directives/log-filter.html
@@ -1,16 +1,16 @@
 <section id="event-filter" class="row column" aria-label="event log filtering">
     <div class="inline event__severity-filter">
         <p class="filter-label">Filter by severity</p>
-        <button class="inline first" ng-click="toggleSeverityAll()"
+        <button class="btn" ng-click="toggleSeverityAll()"
                 ng-class="selectedSeverity.all ? 'btn-primary' : 'btn-secondary'">All
         </button>
-        <button class="inline " ng-click="toggleSeverity('high')"
+        <button class="btn" ng-click="toggleSeverity('high')"
                 ng-class="selectedSeverity.high ? 'btn-primary' : 'btn-secondary'">High
         </button>
-        <button class="inline" ng-click="toggleSeverity('medium')"
+        <button class="btn" ng-click="toggleSeverity('medium')"
                 ng-class="selectedSeverity.medium ? 'btn-primary' : 'btn-secondary'">Medium
         </button>
-        <button class="inline last" ng-click="toggleSeverity('low')"
+        <button class="btn" ng-click="toggleSeverity('low')"
                 ng-class="selectedSeverity.low ? 'btn-primary' : 'btn-secondary'">Low
         </button>
     </div>
diff --git a/app/common/directives/serial-console.html b/app/common/directives/serial-console.html
index cf451aa..68e8304 100644
--- a/app/common/directives/serial-console.html
+++ b/app/common/directives/serial-console.html
@@ -1,6 +1,8 @@
 <div class="serial-lan__wrapper">
   <div id="terminal"></div>
-  <div class="serial-lan__actions">
-    <button class="inline btn-pop-out" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">Open in new tab</button>
+  <div class="serial-lan__actions float-right">
+    <button class="btn  btn-tertiary" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">
+      <icon file="icon-launch.svg"></icon>Open in new tab
+    </button>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/common/directives/syslog-filter.html b/app/common/directives/syslog-filter.html
index f24311e..46f178a 100644
--- a/app/common/directives/syslog-filter.html
+++ b/app/common/directives/syslog-filter.html
@@ -1,7 +1,7 @@
 <section id="sys-log-filter" class="row column" aria-label="system log filtering">
     <div class="inline sys-log__severity-filter">
         <p class="filter-label">Filter by severity</p>
-        <button ng-repeat="severity in severityList" class="inline " ng-click="toggleSeverity(severity)"
+        <button ng-repeat="severity in severityList" class="btn" ng-click="toggleSeverity(severity)"
                 ng-class="((selectedSeverityList.indexOf(severity) > -1) || ((severity == 'All') && (selectedSeverityList.length == 0))) ? 'btn-primary' : 'btn-secondary'">{{severity}}
         </button>
     </div>