2 files changed, 18 insertions, 4 deletions
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index f2e3adf0..c3887098 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -1,4 +1,14 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBullhorn,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faBullhorn,
+  faTimes
+)
 
 const chatPanel = {
   props: [ 'floating' ],
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 570435e7..7993c94d 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -11,9 +11,9 @@
       >
         <div class="title">
           <span>{{ $t('shoutbox.title') }}</span>
-          <i
+          <FAIcon
             v-if="floating"
-            class="icon-cancel"
+            icon="times"
           />
         </div>
       </div>
@@ -63,7 +63,10 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <i class="icon-megaphone" />
+          <FAIcon
+            class="icon"
+            icon="bullhorn"
+          />
           {{ $t('shoutbox.title') }}
         </div>
       </div>
@@ -87,7 +90,8 @@
 .chat-panel {
   .chat-heading {
     cursor: pointer;
-    .icon-comment-empty {
+
+    .icon {
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }