diff --git a/src/constants/navigation-items.js b/src/constants/navigation-items.js
index 2475be3..51d1c1e 100644
--- a/src/constants/navigation-items.js
+++ b/src/constants/navigation-items.js
@@ -3,23 +3,23 @@ import TAPPIDS from './tapp-ids';
 const NAVIGATION_ITEMS = [
     {
         tappId: TAPPIDS.CHAYNS_ID,
-        icon: 'user'
+        icon: 'fa-user'
     },
     {
         tappId: TAPPIDS.INTERCOM,
-        icon: 'comments'
+        icon: 'fa-comments'
     },
     {
         tappId: TAPPIDS.TICKETS,
-        icon: 'ticket'
+        icon: 'fa-ticket'
     },
     {
         tappId: TAPPIDS.DOCUMENTS,
-        icon: 'file'
+        icon: 'fa-file'
     },
     {
         tappId: TAPPIDS.MONEY,
-        icon: 'eur'
+        icon: 'fa-eur'
     },
 ];
 
diff --git a/src/style/index.scss b/src/style/index.scss
index 189b3fd..0b1ce33 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -7,7 +7,6 @@
 //objects
 @import './objects/wait-cursor';
 @import './objects/floating-button';
-@import './objects/icon';
 @import './objects/image-wrapper';
 @import './objects/video-wrapper';
 @import './objects/console';
diff --git a/src/style/objects/icon.scss b/src/style/objects/icon.scss
deleted file mode 100644
index e336ac3..0000000
--- a/src/style/objects/icon.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.icon {
-  &.user:before {
-    content: '\f007';
-  }
-  &.comments:before {
-    content: '\f086';
-  }
-  &.ticket:before {
-    content: '\f145';
-  }
-  &.file:before {
-    content: '\f15b';
-  }
-  &.eur:before {
-    content: '\f153 ';
-  }
-}
\ No newline at end of file
diff --git a/src/ui/dynamic-style.js b/src/ui/dynamic-style.js
index 16220f7..6b77c69 100644
--- a/src/ui/dynamic-style.js
+++ b/src/ui/dynamic-style.js
@@ -37,8 +37,10 @@ export async function setDynamicStyle() {
         const getColor = (percentage, opacity) => getRelativeColor(chaynsInfo.Color, percentage, opacity);
 
         const chaynsCss = htmlToElement(`<link rel="stylesheet" href="https://chayns-res.tobit.com/API/v3.1/css/chayns.min.css?color=${getColor(100).substr(1, 6)}">`);
+        const fontAwesomeCss = htmlToElement('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');
 
         document.head.appendChild(chaynsCss);
+        document.head.appendChild(fontAwesomeCss);
 
         const customBackgroundColor = getUrlParameters().backgroundcolor && !getUrlParameters().backgroundcolor.match(/[^0-9A-Fa-f]/g) && `#${getUrlParameters().backgroundcolor}`;
 
diff --git a/src/ui/navigation.js b/src/ui/navigation.js
index c58b4b4..8dd6bf7 100644
--- a/src/ui/navigation.js
+++ b/src/ui/navigation.js
@@ -48,7 +48,7 @@ function getNavigationElement() {
     NAVIGATION_ITEMS.forEach((item) => {
         if (!item.disabled) {
             const $navItem = htmlToElement(`<li class="navigation__element">
-                                           <i class="ChaynsCS-Color-80Pcnt icon ${item.icon}"></i>
+                                           <i class="ChaynsCS-Color-80Pcnt fa ${item.icon}"></i>
                                        </li>`);
 
             $navItem.addEventListener('click', () => loadTapp(item.tappId));