From c792cfc0be499365917a7fa35414ebb57d4f071a Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 30 Nov 2021 21:03:18 -0800
Subject: [PATCH] feat: Use Fluent SVG icons on the dashboard (#3482)

---
 .../assets/scss/_utility-helpers.scss         |  4 +
 .../scss/widgets/_conversation-card.scss      |  5 --
 .../dashboard/assets/scss/widgets/_modal.scss |  2 +-
 .../assets/scss/widgets/_sidemenu.scss        | 14 +--
 .../components/Accordion/AccordionItem.vue    |  4 +-
 .../dashboard/components/ChatList.vue         |  2 +-
 .../dashboard/components/CustomAttribute.vue  |  8 +-
 app/javascript/dashboard/components/Modal.vue |  4 +-
 .../components/NetworkNotification.vue        |  2 +-
 .../dashboard/components/SidemenuIcon.vue     | 16 +++-
 .../dashboard/components/buttons/Button.vue   |  5 +-
 .../components/buttons/FormSubmitButton.vue   |  2 +-
 .../components/buttons/ResolveAction.vue      | 12 ++-
 .../dashboard/components/layout/Sidebar.vue   | 26 +++---
 .../components/layout/SidebarItem.vue         | 27 +++---
 .../sidebarComponents/AccountSelector.vue     |  8 +-
 .../sidebarComponents/AddAccountModal.vue     | 13 +--
 .../sidebarComponents/NotificationBell.vue    |  4 +-
 .../specs/AccountSelector.spec.js             |  4 +-
 .../__snapshots__/SidemenuIcon.spec.js.snap   |  9 +-
 .../dashboard/components/ui/Label.vue         | 25 +++++-
 .../dashboard/components/ui/Wizard.vue        |  2 +-
 .../dashboard/components/ui/WootButton.vue    |  5 ++
 .../components/widgets/AttachmentsPreview.vue |  9 +-
 .../components/widgets/BackButton.vue         |  6 +-
 .../components/widgets/InboxIconWithName.vue  | 38 ---------
 .../components/widgets/InboxListItem.vue      | 23 -----
 .../components/widgets/InboxName.vue          | 11 ++-
 .../components/widgets/SearchBox.vue          | 11 ---
 .../components/widgets/TableFooter.vue        | 20 +++--
 .../widgets/WootWriter/ReplyBottomPanel.vue   | 11 ++-
 .../widgets/WootWriter/ReplyTopPanel.vue      |  4 +-
 .../ConversationAdvancedFilter.vue            |  3 +-
 .../widgets/conversation/ConversationCard.vue | 69 +++++++++++----
 .../conversation/ConversationHeader.vue       |  6 +-
 .../widgets/conversation/Message.vue          |  6 +-
 .../widgets/conversation/MessagesView.vue     |  6 +-
 .../widgets/conversation/MoreActions.vue      |  6 +-
 .../widgets/conversation/bubble/Actions.vue   | 49 ++++++-----
 .../widgets/conversation/bubble/File.vue      |  2 +-
 .../widgets/conversation/bubble/Text.vue      |  8 +-
 .../conversation/components/FilterInput.vue   |  3 +-
 .../widgets/modal/WootKeyShortcutModal.vue    |  8 +-
 app/javascript/dashboard/helper/inbox.js      | 23 ++---
 .../dashboard/helper/specs/inbox.spec.js      | 16 ++--
 .../dashboard/i18n/locale/ar/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ca/chatlist.json    |  6 --
 .../dashboard/i18n/locale/cs/chatlist.json    |  6 --
 .../dashboard/i18n/locale/da/chatlist.json    |  6 --
 .../dashboard/i18n/locale/de/chatlist.json    |  6 --
 .../dashboard/i18n/locale/el/chatlist.json    |  6 --
 .../dashboard/i18n/locale/en/chatlist.json    |  6 --
 .../dashboard/i18n/locale/es/chatlist.json    |  6 --
 .../dashboard/i18n/locale/fa/chatlist.json    |  6 --
 .../dashboard/i18n/locale/fi/chatlist.json    |  6 --
 .../dashboard/i18n/locale/fr/chatlist.json    |  6 --
 .../dashboard/i18n/locale/he/chatlist.json    |  6 --
 .../dashboard/i18n/locale/hi/chatlist.json    |  6 --
 .../dashboard/i18n/locale/hu/chatlist.json    |  6 --
 .../dashboard/i18n/locale/id/chatlist.json    |  6 --
 .../dashboard/i18n/locale/it/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ja/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ko/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ml/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ne/chatlist.json    |  6 --
 .../dashboard/i18n/locale/nl/chatlist.json    |  6 --
 .../dashboard/i18n/locale/no/chatlist.json    |  6 --
 .../dashboard/i18n/locale/pl/chatlist.json    |  6 --
 .../dashboard/i18n/locale/pt/chatlist.json    |  6 --
 .../dashboard/i18n/locale/pt_BR/chatlist.json |  6 --
 .../dashboard/i18n/locale/ru/chatlist.json    |  6 --
 .../dashboard/i18n/locale/sk/chatlist.json    |  6 --
 .../dashboard/i18n/locale/sv/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ta/chatlist.json    |  6 --
 .../dashboard/i18n/locale/th/chatlist.json    |  6 --
 .../dashboard/i18n/locale/tr/chatlist.json    |  6 --
 .../dashboard/i18n/locale/uk/chatlist.json    |  6 --
 .../dashboard/i18n/locale/vi/chatlist.json    |  6 --
 .../dashboard/i18n/locale/zh/chatlist.json    |  6 --
 .../dashboard/i18n/locale/zh_CN/chatlist.json |  6 --
 .../dashboard/i18n/locale/zh_TW/chatlist.json |  6 --
 .../dashboard/i18n/sidebarItems/campaigns.js  |  6 +-
 .../dashboard/i18n/sidebarItems/common.js     | 12 +--
 .../dashboard/i18n/sidebarItems/contacts.js   |  4 +-
 .../dashboard/i18n/sidebarItems/reports.js    | 14 +--
 .../dashboard/i18n/sidebarItems/settings.js   | 22 ++---
 .../mixins/specs/attributeFixtures.js         |  2 +-
 .../mixins/specs/attributeMixin.spec.js       |  2 +-
 .../contact/components/ContactAttribute.vue   |  2 +-
 .../components/ContactDropdownItem.vue        | 10 ++-
 .../contact/components/ContactFields.vue      | 14 +--
 .../contact/components/ContactIntro.vue       |  2 +-
 .../contact/components/MergeContact.vue       |  6 +-
 .../components/MessageContextMenu.vue         |  9 +-
 .../modules/notes/components/ContactNote.vue  |  3 +-
 .../contacts/components/ContactInfoPanel.vue  |  2 +-
 .../contacts/components/ContactsTable.vue     |  3 +-
 .../dashboard/contacts/components/Header.vue  |  6 +-
 .../contacts/components/ReminderItem.vue      |  2 +-
 .../dashboard/conversation/ContactPanel.vue   | 10 ++-
 .../conversation/ConversationAction.vue       |  3 +-
 .../conversation/contact/ContactInfo.vue      | 23 +++--
 .../conversation/contact/ContactInfoRow.vue   |  9 +-
 .../conversation/contact/SocialIcons.vue      |  6 +-
 .../CustomAttributeDropDown.vue               |  2 +-
 .../CustomAttributeSelector.vue               |  2 +-
 .../conversation/search/PopOverSearch.vue     |  2 +-
 .../conversation/search/ResultItem.vue        | 12 +--
 .../conversation/search/SearchMessageItem.vue | 11 ++-
 .../routes/dashboard/notifications/routes.js  |  2 +-
 .../dashboard/settings/SettingsHeader.vue     |  4 +-
 .../settings/account/account.routes.js        |  2 +-
 .../dashboard/settings/agents/EditAgent.vue   |  2 +-
 .../dashboard/settings/agents/Index.vue       |  6 +-
 .../dashboard/settings/agents/agent.routes.js |  2 +-
 .../settings/attributes/CustomAttribute.vue   |  4 +-
 .../dashboard/settings/attributes/Index.vue   |  2 +-
 .../settings/attributes/attributes.routes.js  |  2 +-
 .../dashboard/settings/automation/Index.vue   |  2 +-
 .../settings/automation/automation.routes.js  |  2 +-
 .../settings/campaigns/CampaignsTable.vue     | 10 +--
 .../dashboard/settings/campaigns/Index.vue    |  2 +-
 .../settings/campaigns/campaigns.routes.js    |  4 +-
 .../dashboard/settings/canned/Index.vue       |  6 +-
 .../settings/canned/canned.routes.js          |  2 +-
 .../routes/dashboard/settings/inbox/Index.vue |  4 +-
 .../settings/inbox/channels/Twitter.vue       |  2 +-
 .../settings/inbox/components/BusinessDay.vue |  2 +-
 .../dashboard/settings/inbox/inbox.routes.js  |  2 +-
 .../integrationapps/IntegrationHooks.vue      |  2 +-
 .../integrationapps/IntegrationItem.vue       |  2 +-
 .../MultipleIntegrationHooks.vue              |  2 +-
 .../integrationapps/integrations.routes.js    |  2 +-
 .../settings/integrations/Integration.vue     |  2 +-
 .../settings/integrations/Webhook.vue         |  6 +-
 .../integrations/integrations.routes.js       |  2 +-
 .../dashboard/settings/labels/Index.vue       |  6 +-
 .../settings/labels/labels.routes.js          |  2 +-
 .../settings/profile/profile.routes.js        |  2 +-
 .../dashboard/settings/reports/Index.vue      |  7 +-
 .../reports/components/CsatMetricCard.vue     |  9 +-
 .../reports/components/WootReports.vue        |  2 +-
 .../settings/reports/reports.routes.js        | 12 +--
 .../routes/dashboard/settings/teams/Index.vue |  4 +-
 .../dashboard/settings/teams/teams.routes.js  |  2 +-
 app/javascript/packs/application.js           |  2 +
 .../shared/components/EmojiOrIcon.vue         | 12 ++-
 .../components/FluentIcon/DashboardIcon.vue   | 35 ++++++++
 .../FluentIcon/dashboard-icons.json           | 85 +++++++++++++++++++
 .../ui/MultiselectDropdownItems.vue           |  8 +-
 .../components/ui/dropdown/AddLabel.vue       |  2 +-
 151 files changed, 613 insertions(+), 617 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/widgets/InboxIconWithName.vue
 delete mode 100644 app/javascript/dashboard/components/widgets/InboxListItem.vue
 delete mode 100644 app/javascript/dashboard/components/widgets/SearchBox.vue
 create mode 100644 app/javascript/shared/components/FluentIcon/DashboardIcon.vue
 create mode 100644 app/javascript/shared/components/FluentIcon/dashboard-icons.json

diff --git a/app/javascript/dashboard/assets/scss/_utility-helpers.scss b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
index 1072a0878..7b528d1c2 100644
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
@@ -6,6 +6,10 @@
   margin-right: var(--space-smaller);
 }
 
+.margin-left-minus-slab {
+  margin-left: var(--space-minus-slab);
+}
+
 .fs-small {
   font-size: var(--font-size-small);
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
index a7a256b4d..0ad6dff38 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
@@ -85,11 +85,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 27rem;
-
-    .small-icon {
-      font-size: $font-size-mini;
-      vertical-align: top;
-    }
   }
 
   .conversation--meta {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index 7a9a83845..cf48bcd6e 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -19,7 +19,7 @@
   cursor: pointer;
   font-size: $font-size-big;
   line-height: $space-normal;
-  padding: $space-normal $space-two;
+  padding: $space-normal;
   position: absolute;
   right: $space-micro;
   top: $space-micro;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
index aafff16ff..70cad65e8 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
@@ -31,6 +31,8 @@
 
       .wrap,
       .child-icon {
+        color: $color-gray;
+
         &:hover {
           color: $color-woot;
         }
@@ -62,7 +64,7 @@
 .bottom-nav {
   @include flex;
   @include space-between-column;
-  @include padding($space-one $space-normal $space-one $space-one);
+  @include padding($space-one);
   @include border-normal-top;
   flex-direction: column;
   position: relative;
@@ -111,16 +113,6 @@
   line-height: $global-lineheight;
 }
 
-.hamburger--menu {
-  cursor: pointer;
-  display: none;
-  margin-right: $space-normal;
-
-  @media screen and (max-width: 1200px) {
-    display: block;
-  }
-}
-
 .header--icon {
   display: block;
   margin-right: $space-normal;
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index bfe817285..2bcfaffb7 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -10,8 +10,8 @@
       <div class="button-icon--wrap">
         <slot name="button" />
         <div class="chevron-icon__wrap">
-          <i v-if="isOpen" class="ion-minus chevron-icon"></i>
-          <i v-else class="ion-plus chevron-icon"></i>
+          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
+          <fluent-icon v-else size="24" icon="add" type="solid" />
         </div>
       </div>
     </button>
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 4a614cf3f..b5053a292 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -27,7 +27,7 @@ l<template>
           class="btn-filter"
           @click="onToggleAdvanceFiltersModal"
         >
-          <i class="icon ion-ios-settings-strong" />
+          <fluent-icon icon="filter" />
         </woot-button>
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index a1dad74c4..6182a00cd 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -23,7 +23,7 @@
             variant="link"
             size="medium"
             color-scheme="secondary"
-            icon="ion-trash-a"
+            icon="delete"
             class-names="delete-button"
             @click="onDelete"
           />
@@ -44,7 +44,7 @@
             @keyup.enter="onUpdate"
           />
           <div class="input-group-button">
-            <woot-button size="small" icon="ion-checkmark" @click="onUpdate" />
+            <woot-button size="small" icon="checkmark" @click="onUpdate" />
           </div>
         </div>
         <span v-if="shouldShowErrorMessage" class="error-message">
@@ -75,7 +75,7 @@
             variant="link"
             size="small"
             color-scheme="secondary"
-            icon="ion-clipboard"
+            icon="clipboard"
             class-names="edit-button"
             @click="onCopy"
           />
@@ -85,7 +85,7 @@
             variant="link"
             size="small"
             color-scheme="secondary"
-            icon="ion-compose"
+            icon="edit"
             class-names="edit-button"
             @click="onEdit"
           />
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 463a2aeea..f86935959 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -7,7 +7,9 @@
       @click="onBackDropClick"
     >
       <div :class="modalContainerClassName" @click.stop>
-        <i class="ion-android-close modal--close" @click="close"></i>
+        <button class="modal--close" @click="close">
+          <fluent-icon icon="dismiss" />
+        </button>
         <slot />
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/NetworkNotification.vue b/app/javascript/dashboard/components/NetworkNotification.vue
index efd6b273e..980e5ee02 100644
--- a/app/javascript/dashboard/components/NetworkNotification.vue
+++ b/app/javascript/dashboard/components/NetworkNotification.vue
@@ -23,7 +23,7 @@
           {{ $t('NETWORK.BUTTON.REFRESH') }}
         </button>
         <button class="ui-close-button" @click="closeNotification">
-          <i class="ui-close-icon icon ion-ios-close-outline" />
+          <fluent-icon icon="dismiss-circle" class="ui-close-icon " />
         </button>
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index 89668449a..fc565b718 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,5 +1,7 @@
 <template>
-  <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick" />
+  <button @click="onMenuItemClick">
+    <fluent-icon class="hamburger--menu" icon="list" />
+  </button>
 </template>
 
 <script>
@@ -13,8 +15,14 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.ion-android-menu {
-  font-size: var(--font-size-big);
+<style scoped lang="scss">
+.hamburger--menu {
+  cursor: pointer;
+  display: none;
+  margin-right: var(--space-normal);
+
+  @media screen and (max-width: 1200px) {
+    display: block;
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/buttons/Button.vue b/app/javascript/dashboard/components/buttons/Button.vue
index ecd43f39f..69dbc3658 100644
--- a/app/javascript/dashboard/components/buttons/Button.vue
+++ b/app/javascript/dashboard/components/buttons/Button.vue
@@ -1,9 +1,10 @@
 <template>
   <button :type="type" class="button nice" :class="variant" @click="onClick">
-    <i
+    <fluent-icon
       v-if="!isLoading && icon"
       class="icon"
-      :class="buttonIconClass + ' ' + icon"
+      :class="buttonIconClass"
+      :icon="icon"
     />
     <spinner v-if="isLoading" />
     <slot></slot>
diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
index 9223ebcef..cc65c68b0 100644
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -6,7 +6,7 @@
     :class="computedClass"
     @click="onClick"
   >
-    <i v-if="!!iconClass" :class="iconClass" class="icon" />
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
     <span>{{ buttonText }}</span>
     <spinner v-if="loading" />
   </button>
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 74e78c9cf..6635033d4 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -5,8 +5,9 @@
         v-if="isOpen"
         class-names="resolve"
         color-scheme="success"
-        icon="ion-checkmark"
+        icon="checkmark"
         emoji="✅"
+        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdResolveConversation"
       >
@@ -16,8 +17,9 @@
         v-else-if="isResolved"
         class-names="resolve"
         color-scheme="warning"
-        icon="ion-refresh"
+        icon="arrow-redo"
         emoji="👀"
+        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
@@ -27,7 +29,8 @@
         v-else-if="showOpenButton"
         class-names="resolve"
         color-scheme="primary"
-        icon="ion-person"
+        icon="person"
+        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
@@ -38,7 +41,8 @@
         ref="arrowDownButton"
         :color-scheme="buttonClass"
         :disabled="isLoading"
-        icon="ion-arrow-down-b"
+        icon="chevron-down"
+        icon-size="16"
         emoji="🔽"
         @click="openDropdown"
       />
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index effe6bca3..8d9cd548e 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -45,7 +45,7 @@
     <div class="bottom-nav app-context-menu" @click="toggleOptions">
       <agent-details @show-options="toggleOptions" />
       <notification-bell />
-      <span class="current-user--options icon ion-android-more-vertical" />
+      <fluent-icon class="current-user--options" icon="more-vertical" />
       <options-menu
         :show="showOptionsMenu"
         @toggle-accounts="toggleAccountModal"
@@ -107,14 +107,14 @@ import router from '../../routes';
 
 export default {
   components: {
-    AgentDetails,
-    SidebarItem,
-    AvailabilityStatus,
-    NotificationBell,
-    OptionsMenu,
     AccountSelector,
     AddAccountModal,
     AddLabelModal,
+    AgentDetails,
+    AvailabilityStatus,
+    NotificationBell,
+    OptionsMenu,
+    SidebarItem,
     WootKeyShortcutModal,
   },
   mixins: [adminMixin, alertMixin, eventListenerMixins],
@@ -173,7 +173,7 @@ export default {
     },
     inboxSection() {
       return {
-        icon: 'ion-folder',
+        icon: 'folder',
         label: 'INBOXES',
         hasSubMenu: true,
         newLink: true,
@@ -193,7 +193,7 @@ export default {
     },
     labelSection() {
       return {
-        icon: 'ion-pound',
+        icon: 'number-symbol',
         label: 'LABELS',
         hasSubMenu: true,
         newLink: true,
@@ -216,7 +216,7 @@ export default {
     },
     contactLabelSection() {
       return {
-        icon: 'ion-pound',
+        icon: 'number-symbol',
         label: 'TAGGED_WITH',
         hasSubMenu: true,
         key: 'label',
@@ -239,7 +239,7 @@ export default {
     },
     teamSection() {
       return {
-        icon: 'ion-ios-people',
+        icon: 'people-team',
         label: 'TEAMS',
         hasSubMenu: true,
         newLink: true,
@@ -354,11 +354,11 @@ export default {
   cursor: pointer;
   padding: $space-small $space-large;
 
-  .ion-ios-checkmark {
-    font-size: $font-size-big;
+  .selected--account {
+    margin-top: -$space-smaller;
 
     & + .account--details {
-      padding-left: $space-normal;
+      padding-left: $space-normal - $space-micro;
     }
   }
 
diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/SidebarItem.vue
index 462853e6a..be04330ad 100644
--- a/app/javascript/dashboard/components/layout/SidebarItem.vue
+++ b/app/javascript/dashboard/components/layout/SidebarItem.vue
@@ -13,14 +13,20 @@
       :title="menuItem.toolTip"
     >
       <div class="wrap">
-        <i :class="menuItem.icon" />
+        <fluent-icon
+          size="18"
+          :icon="menuItem.icon"
+          class="margin-right-small"
+        />
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </div>
-      <span
+      <button
         v-if="showItem(menuItem)"
-        class="child-icon ion-android-add-circle"
+        class="child-icon"
         @click.prevent="newLinkClick(menuItem)"
-      />
+      >
+        <fluent-icon icon="add-circle" size="16" />
+      </button>
     </a>
     <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
       <router-link
@@ -32,10 +38,11 @@
       >
         <a href="#" :class="computedChildClass(child)">
           <div class="wrap">
-            <i
+            <fluent-icon
               v-if="menuItem.key === 'inbox'"
               class="inbox-icon"
-              :class="computedInboxClass(child)"
+              size="14"
+              :icon="computedInboxClass(child)"
             />
             <span
               v-if="child.color"
@@ -143,12 +150,4 @@ export default {
   min-width: $space-normal;
   width: $space-normal;
 }
-
-.inbox-icon {
-  position: relative;
-  top: -1px;
-  &.ion-ios-email {
-    font-size: var(--font-size-medium);
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
index 9860d7a09..e6e7df48e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -14,7 +14,13 @@
       class="account-selector"
     >
       <a :href="`/app/accounts/${account.id}/dashboard`">
-        <i v-if="account.id === accountId" class="ion ion-ios-checkmark" />
+        <fluent-icon
+          v-if="account.id === accountId"
+          class="selected--account"
+          icon="checkmark-circle"
+          type="solid"
+          size="24"
+        />
         <label :for="account.name" class="account--details">
           <div class="account--name">{{ account.name }}</div>
           <div class="account--role">{{ account.role }}</div>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index 429164d7c..756aa665e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -12,7 +12,7 @@
       <div v-if="!hasAccounts" class="alert-wrap">
         <div class="callout alert">
           <div class="icon-wrap">
-            <i class="ion-alert-circled"></i>
+            <fluent-icon icon="warning" />
           </div>
           {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
         </div>
@@ -102,18 +102,19 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .alert-wrap {
-  margin: var(--space-zero) var(--space-large);
-  margin-top: var(--space-medium);
+  font-size: var(--font-size-small);
+  margin: var(--space-medium) var(--space-large) var(--space-zero);
+
   .callout {
+    align-items: center;
+    border-radius: var(--border-radius-normal);
     display: flex;
-    justify-content: center;
   }
 }
 
 .icon-wrap {
-  font-size: var(--font-size-big);
   margin-left: var(--space-smaller);
   margin-right: var(--space-slab);
 }
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
index e5f05aed1..cf3521a54 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -1,10 +1,12 @@
 <template>
-  <span class="notifications icon ion-ios-bell" @click.stop="showNotification">
+  <span class="notifications" @click.stop="showNotification">
+    <fluent-icon icon="alert" />
     <span v-if="unreadCount" class="unread-badge">{{ unreadCount }}</span>
   </span>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+
 export default {
   computed: {
     ...mapGetters({
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
index 09bd6f120..ce1d5fe73 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
@@ -7,10 +7,12 @@ import i18n from 'dashboard/i18n';
 
 import WootModal from 'dashboard/components/Modal';
 import WootModalHeader from 'dashboard/components/ModalHeader';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 const localVue = createLocalVue();
 localVue.component('woot-modal', WootModal);
 localVue.component('woot-modal-header', WootModalHeader);
+localVue.component('fluent-icon', FluentIcon);
 
 localVue.use(Vuex);
 localVue.use(VueI18n);
@@ -84,7 +86,7 @@ describe('accountSelctor', () => {
   });
 
   it('first account item is checked', () => {
-    const accountFirstItem = accountSelector.find('.account-selector .ion');
+    const accountFirstItem = accountSelector.find('.account-selector svg');
     expect(accountFirstItem.exists()).toBe(true);
   });
 });
diff --git a/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap b/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
index aeef353fb..58e820fc2 100644
--- a/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
+++ b/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SidemenuIcon matches snapshot 1`] = `
-<i
-  class="ion-android-menu hamburger--menu"
-/>
+<button>
+  <fluent-icon
+    class="hamburger--menu"
+    icon="list"
+  />
+</button>
 `;
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index 5415444d2..83e55b040 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -1,13 +1,23 @@
 <template>
   <div :class="labelClass" :style="labelStyle" :title="description">
-    <i v-if="icon" class="label--icon" :class="icon" @click="onClick" />
+    <button v-if="icon" class="label-action--button" @click="onClick">
+      <fluent-icon :icon="icon" size="12" class="label--icon" />
+    </button>
     <span v-if="!href">{{ title }}</span>
     <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
-    <i v-if="showClose" class="close--icon ion-close" @click="onClick" />
+    <button
+      v-if="showClose"
+      class="label-action--button"
+      :style="{ color: textColor }"
+      @click="onClick"
+    >
+      <fluent-icon icon="dismiss" size="12" class="close--icon" />
+    </button>
   </div>
 </template>
 <script>
 import { getContrastingTextColor } from '@chatwoot/utils';
+
 export default {
   props: {
     title: {
@@ -79,6 +89,8 @@ export default {
 @import '~dashboard/assets/scss/variables';
 
 .label {
+  display: inline-flex;
+  align-items: center;
   font-weight: var(--font-weight-medium);
   margin-right: var(--space-smaller);
   margin-bottom: var(--space-smaller);
@@ -89,11 +101,12 @@ export default {
 
   .label--icon {
     cursor: pointer;
+    margin-right: var(--space-smaller);
   }
-  .label--icon,
+
   .close--icon {
-    font-size: var(--font-size-micro);
     cursor: pointer;
+    margin-left: var(--space-smaller);
   }
 
   &.small .label--icon,
@@ -150,4 +163,8 @@ export default {
     }
   }
 }
+
+.label-action--button {
+  margin-bottom: var(--space-minus-micro);
+}
 </style>
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index 71848ecb0..370d3812a 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -14,7 +14,7 @@
       <h3>
         {{ item.title }}
         <span v-if="isOver(item)" class="completed">
-          <i class="ion-checkmark"></i>
+          <fluent-icon icon="checkmark" />
         </span>
       </h3>
       <span class="step">
diff --git a/app/javascript/dashboard/components/ui/WootButton.vue b/app/javascript/dashboard/components/ui/WootButton.vue
index fab786238..42ce80c5d 100644
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -11,6 +11,7 @@
       class="icon"
       :emoji="emoji"
       :icon="icon"
+      :icon-size="iconSize"
     />
     <span v-if="$slots.default" class="button__content"><slot></slot></span>
   </button>
@@ -35,6 +36,10 @@ export default {
       type: String,
       default: '',
     },
+    iconSize: {
+      type: [Number, String],
+      default: 20,
+    },
     emoji: {
       type: String,
       default: '',
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 2c4f48895..d484cbb4f 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -24,12 +24,11 @@
         </span>
       </div>
       <div class="remove-file-wrap">
-        <button
-          class="remove--attachment"
+        <woot-button
+          class="remove--attachment clear secondary"
+          icon="dismiss"
           @click="() => onRemoveAttachment(index)"
-        >
-          <i class="ion-android-close"></i>
-        </button>
+        />
       </div>
     </div>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 758fd7ae2..017c3f7e4 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -1,7 +1,8 @@
 <template>
-  <span class="back-button ion-ios-arrow-left" @click.capture="goBack">
+  <button class="back-button" @click.capture="goBack">
+    <fluent-icon icon="chevron-left" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
-  </span>
+  </button>
 </template>
 <script>
 import router from '../../routes/index';
@@ -28,3 +29,4 @@ export default {
   },
 };
 </script>
+<style scoped></style>
diff --git a/app/javascript/dashboard/components/widgets/InboxIconWithName.vue b/app/javascript/dashboard/components/widgets/InboxIconWithName.vue
deleted file mode 100644
index 5c8163589..000000000
--- a/app/javascript/dashboard/components/widgets/InboxIconWithName.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="inbox">
-    <i :class="icon" />
-    <span>{{ inbox.name }}</span>
-  </div>
-</template>
-<script>
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
-export default {
-  props: {
-    inbox: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    icon() {
-      if (this.inbox.channel_type === INBOX_TYPES.WEB) {
-        return 'icon ion-earth';
-      }
-      return 'icon ion-android-textsms';
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.inbox {
-  display: flex;
-  align-items: center;
-  .icon {
-    margin-right: var(--space-micro);
-    min-width: var(--space-normal);
-    position: relative;
-    top: -1px;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/InboxListItem.vue b/app/javascript/dashboard/components/widgets/InboxListItem.vue
deleted file mode 100644
index 5bfdacdda..000000000
--- a/app/javascript/dashboard/components/widgets/InboxListItem.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="inbox-item">
-    <img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image" />
-    <div class="item--details columns">
-      <h4 class="item--name">
-        {{ inbox.label }}
-      </h4>
-      <p class="item--sub">
-        Facebook
-      </p>
-    </div>
-    <!-- <span class="ion-chevron-right arrow"></span> -->
-  </div>
-</template>
-<script>
-/* eslint no-console: 0 */
-// import WootSwitch from '../ui/Switch';
-
-export default {
-  props: ['inbox'],
-  created() {},
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue
index cafbabad3..cb0b9fb06 100644
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -1,8 +1,8 @@
 <template>
-  <span class="inbox--name">
-    <i :class="computedInboxClass" />
+  <div class="inbox--name">
+    <fluent-icon class="inbox--icon" :icon="computedInboxClass" size="12" />
     {{ inbox.name }}
-  </span>
+  </div>
 </template>
 <script>
 import { getInboxClassByType } from 'dashboard/helper/inbox';
@@ -25,6 +25,7 @@ export default {
 </script>
 <style scoped>
 .inbox--name {
+  display: inline-flex;
   padding: var(--space-micro) 0;
   line-height: var(--space-slab);
   font-weight: var(--font-weight-medium);
@@ -32,4 +33,8 @@ export default {
   color: var(--s-500);
   font-size: var(--font-size-mini);
 }
+
+.inbox--icon {
+  margin-right: var(--space-micro);
+}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/SearchBox.vue b/app/javascript/dashboard/components/widgets/SearchBox.vue
deleted file mode 100644
index 21e16e0bd..000000000
--- a/app/javascript/dashboard/components/widgets/SearchBox.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="search">
-    <i class="icon ion-ios-search-strong" />
-    <input class="input" type="email" :placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
-  </div>
-</template>
-<script>
-export default {
-
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index b9faa2f6e..de78256c4 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -20,8 +20,12 @@
           :is-disabled="hasFirstPage"
           @click="onFirstPage"
         >
-          <i class="ion-chevron-left" />
-          <i class="ion-chevron-left" />
+          <fluent-icon icon="chevron-left" size="18" />
+          <fluent-icon
+            icon="chevron-left"
+            size="18"
+            class="margin-left-minus-slab"
+          />
         </woot-button>
         <woot-button
           size="small"
@@ -30,7 +34,7 @@
           :is-disabled="hasPrevPage"
           @click="onPrevPage"
         >
-          <i class="ion-chevron-left" />
+          <fluent-icon icon="chevron-left" size="18" />
         </woot-button>
         <woot-button
           size="small"
@@ -47,7 +51,7 @@
           :is-disabled="hasNextPage"
           @click="onNextPage"
         >
-          <i class="ion-chevron-right" />
+          <fluent-icon icon="chevron-right" size="18" />
         </woot-button>
         <woot-button
           size="small"
@@ -57,8 +61,12 @@
           :is-disabled="hasLastPage"
           @click="onLastPage"
         >
-          <i class="ion-chevron-right" />
-          <i class="ion-chevron-right" />
+          <fluent-icon icon="chevron-right" size="18" />
+          <fluent-icon
+            icon="chevron-right"
+            size="18"
+            class="margin-left-minus-slab"
+          />
         </woot-button>
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 1ffc9be65..679c9fc27 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -3,11 +3,12 @@
     <div class="left-wrap">
       <woot-button
         :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
-        icon="ion-happy-outline"
+        icon="emoji"
         emoji="😊"
         color-scheme="secondary"
         variant="smooth"
         size="small"
+        :icon-size="14"
         @click="toggleEmojiPicker"
       />
 
@@ -24,8 +25,9 @@
           v-if="showAttachButton"
           class-names="button--upload"
           :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-          icon="ion-android-attach"
+          icon="attach"
           emoji="📎"
+          :icon-size="14"
           color-scheme="secondary"
           variant="smooth"
           size="small"
@@ -33,8 +35,9 @@
       </file-upload>
       <woot-button
         v-if="enableRichEditor && !isOnPrivateNote"
-        icon="ion-quote"
+        icon="quote"
         emoji="🖊️"
+        :icon-size="16"
         color-scheme="secondary"
         variant="smooth"
         size="small"
@@ -46,7 +49,7 @@
           v-show="$refs.upload && $refs.upload.dropActive"
           class="modal-mask"
         >
-          <i class="ion-ios-cloud-upload-outline icon"></i>
+          <fluent-icon icon="cloud-backup" />
           <h4 class="page-sub-title">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 27f4cc76c..51a6852b1 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -30,7 +30,7 @@
       v-if="popoutReplyBox"
       variant="clear"
       size="large"
-      icon="ion-android-close"
+      icon="dismiss"
       color-scheme="secondary"
       class-names="popout-button"
       @click="$emit('click')"
@@ -39,7 +39,7 @@
       v-else
       variant="clear"
       size="large"
-      icon="ion-arrow-resize"
+      icon="resize-large"
       color-scheme="secondary"
       class-names="popout-button"
       @click="$emit('click')"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 4d2c39814..487e55901 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -21,7 +21,8 @@
         />
         <div class="filter-actions">
           <woot-button
-            icon="ion-plus"
+            icon="add"
+            icon-size="16"
             color-scheme="success"
             variant="smooth"
             size="small"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 67f78b86e..f99c18e0f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -24,7 +24,7 @@
           v-if="showAssignee && assignee.name"
           class="label assignee-label text-truncate"
         >
-          <i class="ion-person" />
+          <fluent-icon icon="person" size="12" />
           {{ assignee.name }}
         </span>
       </div>
@@ -32,25 +32,41 @@
         {{ currentContact.name }}
       </h4>
       <p v-if="lastMessageInChat" class="conversation--message">
-        <i v-if="isMessagePrivate" class="ion-locked last-message-icon" />
-        <i v-else-if="messageByAgent" class="ion-ios-undo last-message-icon" />
-        <i
+        <fluent-icon
+          v-if="isMessagePrivate"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="lock-closed"
+        />
+        <fluent-icon
+          v-else-if="messageByAgent"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="arrow-reply"
+        />
+        <fluent-icon
           v-else-if="isMessageAnActivity"
-          class="ion-information-circled last-message-icon"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="info"
         />
         <span v-if="lastMessageInChat.content">
           {{ parsedLastMessage }}
         </span>
         <span v-else-if="lastMessageInChat.attachments">
-          <i :class="`small-icon ${this.$t(`${attachmentIconKey}.ICON`)}`"></i>
-          {{ this.$t(`${attachmentIconKey}.CONTENT`) }}
+          <fluent-icon
+            size="16"
+            class="message--attachment-icon"
+            :icon="attachmentIcon"
+          />
+          {{ this.$t(`${attachmentMessageContent}`) }}
         </span>
         <span v-else>
           {{ $t('CHAT_LIST.NO_CONTENT') }}
         </span>
       </p>
       <p v-else class="conversation--message">
-        <i class="ion-android-alert"></i>
+        <fluent-icon size="16" class="message--attachment-icon" icon="info" />
         <span>
           {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
@@ -76,6 +92,15 @@ import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName';
 import inboxMixin from 'shared/mixins/inboxMixin';
 
+const ATTACHMENT_ICONS = {
+  image: 'image',
+  audio: 'headphones-sound-wave',
+  video: 'video',
+  file: 'document',
+  location: 'location',
+  fallback: 'link',
+};
+
 export default {
   components: {
     InboxName,
@@ -133,10 +158,18 @@ export default {
       );
     },
 
-    attachmentIconKey() {
+    lastMessageFileType() {
       const lastMessage = this.lastMessageInChat;
       const [{ file_type: fileType } = {}] = lastMessage.attachments;
-      return `CHAT_LIST.ATTACHMENTS.${fileType}`;
+      return fileType;
+    },
+
+    attachmentIcon() {
+      return ATTACHMENT_ICONS[this.lastMessageFileType];
+    },
+
+    attachmentMessageContent() {
+      return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
     },
 
     isActiveChat() {
@@ -243,14 +276,10 @@ export default {
     white-space: nowrap;
     width: 60%;
   }
-  .ion-earth {
-    font-size: var(--font-size-mini);
-  }
 }
 
 .last-message-icon {
   color: var(--s-600);
-  font-size: var(--font-size-mini);
 }
 
 .conversation--metadata {
@@ -259,16 +288,22 @@ export default {
   padding-right: var(--space-normal);
 
   .label {
-    padding: var(--space-micro) 0 var(--space-micro) 0;
-    line-height: var(--space-slab);
-    font-weight: var(--font-weight-medium);
     background: none;
     color: var(--s-500);
     font-size: var(--font-size-mini);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--space-slab);
+    padding: var(--space-micro) 0 var(--space-micro) 0;
   }
 
   .assignee-label {
+    display: inline-flex;
     max-width: 50%;
   }
 }
+
+.message--attachment-icon {
+  margin-top: var(--space-minus-micro);
+  vertical-align: middle;
+}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 22989f36f..89431eca3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -11,10 +11,12 @@
       <div class="user--profile__meta">
         <h3 class="user--name text-truncate">
           <span class="margin-right-smaller">{{ currentContact.name }}</span>
-          <i
+          <fluent-icon
             v-if="!isHMACVerified"
             v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-            class="ion-android-alert text-y-800 fs-default"
+            class="text-y-800"
+            size="14"
+            icon="warning"
           />
         </h3>
         <div class="conversation--header--actions">
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index bd832f4ba..5d04199e1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -234,8 +234,8 @@ export default {
       return {
         email: this.contentAttributes.email,
         cc: this.contentAttributes.cc_emails,
-        bcc: this.contentAttributes.bcc_emails
-      }
+        bcc: this.contentAttributes.bcc_emails,
+      };
     },
     hasAttachments() {
       return !!(this.data.attachments && this.data.attachments.length > 0);
@@ -354,7 +354,7 @@ export default {
     }
 
     &.is-private .file.message-text__wrap {
-      .ion-document-text {
+      .file--icon {
         color: var(--w-400);
       }
       .text-block-title {
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index db13011ca..b9f3557f6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -44,7 +44,11 @@
         class="banner-close-button"
         @click="removeTweetSelection"
       >
-        <i v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')" class="ion-close" />
+        <fluent-icon
+          v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')"
+          size="16"
+          icon="dismiss"
+        />
       </button>
     </div>
     <ul class="conversation-panel">
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 502819b05..f5db4bff7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -4,20 +4,20 @@
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
       class="hollow secondary actions--button"
-      icon="ion-volume-mute"
+      icon="speaker-mute"
       @click="mute"
     />
     <woot-button
       v-else
       v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
       class="hollow secondary actions--button"
-      icon="ion-volume-medium"
+      icon="speaker-1"
       @click="unmute"
     />
     <woot-button
       v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
       class="hollow secondary actions--button"
-      icon="ion-share"
+      icon="share"
       @click="toggleEmailActionsModal"
     />
     <resolve-action
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index 0413ab8a9..556ec6ae4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -2,38 +2,48 @@
   <div class="message-text--metadata">
     <span class="time">{{ readableTime }}</span>
     <span v-if="showSentIndicator" class="time">
-      <i
+      <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.SENT')"
-        class="icon ion-checkmark"
+        icon="checkmark"
+        size="16"
       />
     </span>
-    <i
+    <fluent-icon
       v-if="isEmail"
       v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
-      class="ion ion-android-mail"
+      icon="mail"
+      class="action--icon"
+      size="16"
     />
-    <i
+    <fluent-icon
       v-if="isPrivate"
       v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
-      class="icon ion-android-lock"
+      icon="lock-closed"
+      class="action--icon"
+      size="16"
       @mouseenter="isHovered = true"
       @mouseleave="isHovered = false"
     />
-    <i
-      v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
-      v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
-      class="icon ion-reply cursor-pointer"
-      @click="onTweetReply"
-    />
+    <button @click="onTweetReply">
+      <fluent-icon
+        v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
+        v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
+        icon="arrow-reply"
+        class="action--icon cursor-pointer"
+        size="16"
+      />
+    </button>
     <a
       v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
       :href="linkToTweet"
       target="_blank"
       rel="noopener noreferrer nofollow"
     >
-      <i
+      <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
-        class="icon ion-android-open cursor-pointer"
+        icon="open"
+        class="action--icon cursor-pointer"
+        size="16"
       />
     </a>
   </div>
@@ -129,7 +139,7 @@ export default {
     }
   }
 
-  .icon {
+  .action--icon {
     color: var(--white);
   }
 }
@@ -143,7 +153,7 @@ export default {
 }
 
 .message-text--metadata {
-  align-items: flex-end;
+  align-items: flex-start;
   display: flex;
 
   .time {
@@ -153,10 +163,9 @@ export default {
     line-height: 1.8;
   }
 
-  i {
-    line-height: 1.4;
-    padding-right: var(--space-small);
-    padding-left: var(--space-small);
+  .action--icon {
+    margin-right: var(--space-small);
+    margin-left: var(--space-small);
     color: var(--s-900);
   }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
index fb761742f..89783f2cb 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="file message-text__wrap">
     <div class="icon-wrap">
-      <i class="ion-document-text"></i>
+      <fluent-icon icon="document" class="file--icon" />
     </div>
     <div class="meta">
       <h5 class="text-block-title">
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index 281ca630c..1bd16d9d5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -13,11 +13,11 @@
       @click="toggleQuotedContent"
     >
       <span v-if="showQuotedContent">
-        <i class="ion-chevron-up" />
+        <fluent-icon icon="chevron-up" class="fluent-icon" size="16" />
         {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
       </span>
       <span v-else>
-        <i class="ion-chevron-down" />
+        <fluent-icon icon="chevron-down" class="fluent-icon" size="16" />
         {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
       </span>
     </button>
@@ -104,5 +104,9 @@ export default {
   font-size: var(--font-size-mini);
   padding-bottom: var(--space-small);
   padding-top: var(--space-small);
+
+  .fluent-icon {
+    margin-bottom: var(--space-minus-smaller);
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
index 8ef570dca..45592bed1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
@@ -72,7 +72,8 @@
           />
         </div>
         <woot-button
-          icon="ion-close"
+          icon="dismiss"
+          icon-size="16"
           variant="clear"
           color-scheme="secondary"
           @click="removeFilter"
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index adcb85161..f92819870 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -16,7 +16,9 @@
               </p>
             </div>
           </div>
-          <i class="ion-android-close modal--close" @click="$emit('close')"></i>
+          <button class="cursor-pointer" @click="$emit('close')">
+            <fluent-icon icon="dismiss" />
+          </button>
         </div>
 
         <div class="shortcut__wrap">
@@ -111,14 +113,14 @@ export default {
 }
 
 .header-wrap {
+  align-items: flex-start;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  margin-bottom: var(--space-slab);
 }
 
 .title-shortcut-key__wrap {
   display: flex;
-  margin-bottom: var(--space-small);
 }
 
 .page-title {
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 9355b9aa8..179550086 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -3,32 +3,35 @@ import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 export const getInboxClassByType = (type, phoneNumber) => {
   switch (type) {
     case INBOX_TYPES.WEB:
-      return 'ion-earth';
+      return 'globe-desktop';
 
     case INBOX_TYPES.FB:
-      return 'ion-social-facebook';
+      return 'brand-facebook';
 
     case INBOX_TYPES.TWITTER:
-      return 'ion-social-twitter';
+      return 'brand-twitter';
 
     case INBOX_TYPES.TWILIO:
       return phoneNumber.startsWith('whatsapp')
-        ? 'ion-social-whatsapp-outline'
-        : 'ion-android-textsms';
+        ? 'brand-whatsapp'
+        : 'brand-sms';
 
     case INBOX_TYPES.WHATSAPP:
-      return 'ion-social-whatsapp-outline';
+      return 'brand-whatsapp';
 
     case INBOX_TYPES.API:
-      return 'ion-cloud';
+      return 'cloud';
 
     case INBOX_TYPES.EMAIL:
-      return 'ion-ios-email';
+      return 'mail';
 
     case INBOX_TYPES.TELEGRAM:
-      return 'ion-ios-navigate';
+      return 'brand-telegram';
+
+    case INBOX_TYPES.LINE:
+      return 'brand-line';
 
     default:
-      return 'ion-ios-chatbubble';
+      return 'chat';
   }
 };
diff --git a/app/javascript/dashboard/helper/specs/inbox.spec.js b/app/javascript/dashboard/helper/specs/inbox.spec.js
index 54c3cefad..f6d6aa9f0 100644
--- a/app/javascript/dashboard/helper/specs/inbox.spec.js
+++ b/app/javascript/dashboard/helper/specs/inbox.spec.js
@@ -3,33 +3,35 @@ import { getInboxClassByType } from '../inbox';
 describe('#Inbox Helpers', () => {
   describe('getInboxClassByType', () => {
     it('should return correct class for web widget', () => {
-      expect(getInboxClassByType('Channel::WebWidget')).toEqual('ion-earth');
+      expect(getInboxClassByType('Channel::WebWidget')).toEqual(
+        'globe-desktop'
+      );
     });
     it('should return correct class for fb page', () => {
       expect(getInboxClassByType('Channel::FacebookPage')).toEqual(
-        'ion-social-facebook'
+        'brand-facebook'
       );
     });
     it('should return correct class for  twitter profile', () => {
       expect(getInboxClassByType('Channel::TwitterProfile')).toEqual(
-        'ion-social-twitter'
+        'brand-twitter'
       );
     });
     it('should return correct class for twilio sms', () => {
       expect(getInboxClassByType('Channel::TwilioSms', '')).toEqual(
-        'ion-android-textsms'
+        'brand-sms'
       );
     });
     it('should return correct class for whatsapp', () => {
       expect(getInboxClassByType('Channel::TwilioSms', 'whatsapp')).toEqual(
-        'ion-social-whatsapp-outline'
+        'brand-whatsapp'
       );
     });
     it('should return correct class for Api', () => {
-      expect(getInboxClassByType('Channel::Api')).toEqual('ion-cloud');
+      expect(getInboxClassByType('Channel::Api')).toEqual('cloud');
     });
     it('should return correct class for Email', () => {
-      expect(getInboxClassByType('Channel::Email')).toEqual('ion-ios-email');
+      expect(getInboxClassByType('Channel::Email')).toEqual('mail');
     });
   });
 });
diff --git a/app/javascript/dashboard/i18n/locale/ar/chatlist.json b/app/javascript/dashboard/i18n/locale/ar/chatlist.json
index fed68be9b..f64c6bce5 100644
--- a/app/javascript/dashboard/i18n/locale/ar/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ar/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "رسالة صورة"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "رسالة صوتية"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "رسالة فيديو"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "مرفقات"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "الموقع الجغرافي"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "قام بمشاركة رابط"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ca/chatlist.json b/app/javascript/dashboard/i18n/locale/ca/chatlist.json
index 99b32381f..689e5f949 100644
--- a/app/javascript/dashboard/i18n/locale/ca/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ca/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Missatge d'imatge"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Missatge d'àudio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Missatge de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Fitxer adjunt"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Ubicació"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ha compartit una URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/cs/chatlist.json b/app/javascript/dashboard/i18n/locale/cs/chatlist.json
index 203b04040..8ca38a3d8 100644
--- a/app/javascript/dashboard/i18n/locale/cs/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/cs/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Zpráva obrázku"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Zvuková zpráva"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video zpráva"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Přílohu souboru"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Poloha"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "sdílel URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/da/chatlist.json b/app/javascript/dashboard/i18n/locale/da/chatlist.json
index 7ec2bddaa..4c9b04935 100644
--- a/app/javascript/dashboard/i18n/locale/da/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/da/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Billedbesked"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Lydbesked"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video besked"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Fil Vedhæftning"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Lokation"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "har delt en URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/de/chatlist.json b/app/javascript/dashboard/i18n/locale/de/chatlist.json
index 16304316f..4975dec44 100644
--- a/app/javascript/dashboard/i18n/locale/de/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/de/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bildnachricht"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio-Nachricht"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videonachricht"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Dateianhang"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Ort"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "hat eine URL geteilt"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/el/chatlist.json b/app/javascript/dashboard/i18n/locale/el/chatlist.json
index 093ced9da..4d731b260 100644
--- a/app/javascript/dashboard/i18n/locale/el/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/el/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Μήνυμα εικόνας"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Μήνυμα ήχου"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Μήνυμα βίντεο"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Επισυναπτόμενο αρχείο"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Θέση"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "έχει μοιράσει ένα σύνδεσμο"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json
index 1be18cad9..ae9d81ba3 100644
--- a/app/javascript/dashboard/i18n/locale/en/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/es/chatlist.json b/app/javascript/dashboard/i18n/locale/es/chatlist.json
index 31b01a691..bdc95d1e5 100644
--- a/app/javascript/dashboard/i18n/locale/es/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/es/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Mensaje de imagen"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Mensaje de audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Mensaje de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Archivo adjunto"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Ubicación"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ha compartido una url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/fa/chatlist.json b/app/javascript/dashboard/i18n/locale/fa/chatlist.json
index d7e320776..d39027601 100644
--- a/app/javascript/dashboard/i18n/locale/fa/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/fa/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "پیام تصویری"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "پیام صوتی"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "پیام ویدیویی"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "فایل الصاقی"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "مکان"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "یک آدرس URL به اشتراک گذاشته شده"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/fi/chatlist.json b/app/javascript/dashboard/i18n/locale/fi/chatlist.json
index aba8e7053..609752f67 100644
--- a/app/javascript/dashboard/i18n/locale/fi/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/fi/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Kuvaviesti"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Ääniviesti"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videoviesti"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Liite"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Sijainti"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "on jakanut URL-osoitteen"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/fr/chatlist.json b/app/javascript/dashboard/i18n/locale/fr/chatlist.json
index 7552ea48b..5aec4e068 100644
--- a/app/javascript/dashboard/i18n/locale/fr/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/fr/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Message image"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Message audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Message vidéo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Pièce jointe"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Localisation"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "a partagé une URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/he/chatlist.json b/app/javascript/dashboard/i18n/locale/he/chatlist.json
index 78334b7f8..e5972c1bd 100644
--- a/app/javascript/dashboard/i18n/locale/he/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/he/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "הודעת תמונה"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "הודעות קוליות"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "הודעות וידאו"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "קובץ מצורף"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "מיקום"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "שיתף קישור"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/hi/chatlist.json b/app/javascript/dashboard/i18n/locale/hi/chatlist.json
index 1be18cad9..ae9d81ba3 100644
--- a/app/javascript/dashboard/i18n/locale/hi/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/hi/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/hu/chatlist.json b/app/javascript/dashboard/i18n/locale/hu/chatlist.json
index ec0adb383..5b410decd 100644
--- a/app/javascript/dashboard/i18n/locale/hu/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/hu/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Képüzenet"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Hangüzenet"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videoüzenet"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Csatolt file"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Hely"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "megosztott URL-t tartalmaz"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/id/chatlist.json b/app/javascript/dashboard/i18n/locale/id/chatlist.json
index 3ce926a77..338a2214f 100644
--- a/app/javascript/dashboard/i18n/locale/id/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/id/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Pesan gambar"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Pesan audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Pesan video"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Lampiran File"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Lokasi"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "telah membagikan url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/it/chatlist.json b/app/javascript/dashboard/i18n/locale/it/chatlist.json
index 9b054a4e1..abc69999e 100644
--- a/app/javascript/dashboard/i18n/locale/it/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/it/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Messaggio immagine"
       },
       "audio": {
-        "ICON": "-quantità-alto",
         "CONTENT": "Messaggio audio"
       },
       "video": {
-        "ICON": "videocam",
         "CONTENT": "Messaggio video"
       },
       "file": {
-        "ICON": "e-documento",
         "CONTENT": "File Allegato"
       },
       "location": {
-        "ICON": "Posizione-ios",
         "CONTENT": "Localizzazione"
       },
       "fallback": {
-        "ICON": "e-link",
         "CONTENT": "ha condiviso un url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ja/chatlist.json b/app/javascript/dashboard/i18n/locale/ja/chatlist.json
index d4ff266f5..909dfbf4c 100644
--- a/app/javascript/dashboard/i18n/locale/ja/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ja/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "画像メッセージ"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "音声メッセージ"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "ビデオ メッセージ"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "添付ファイル"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "場所"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "URLを共有しています"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ko/chatlist.json b/app/javascript/dashboard/i18n/locale/ko/chatlist.json
index aab37eaa8..a9d4660ca 100644
--- a/app/javascript/dashboard/i18n/locale/ko/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ko/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "사진 메시지"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "음성 메시지"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "영상 메시지"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "파일 첨부"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "장소"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "URL을 공유함"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ml/chatlist.json b/app/javascript/dashboard/i18n/locale/ml/chatlist.json
index 8aa9f9fd6..fa6eacd73 100644
--- a/app/javascript/dashboard/i18n/locale/ml/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ml/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "ചിത്ര സന്ദേശം"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "ഓഡിയോ സന്ദേശം"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "വീഡിയോ സന്ദേശം"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "ഫയൽ അറ്റാച്ചുമെന്റ്"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "സ്ഥാനം"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ഒരു യു. ആർ. എൽ പങ്കിട്ടു"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ne/chatlist.json b/app/javascript/dashboard/i18n/locale/ne/chatlist.json
index 1be18cad9..ae9d81ba3 100644
--- a/app/javascript/dashboard/i18n/locale/ne/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ne/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/nl/chatlist.json b/app/javascript/dashboard/i18n/locale/nl/chatlist.json
index 752959d0b..ee1912319 100644
--- a/app/javascript/dashboard/i18n/locale/nl/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/nl/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bericht met foto"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audiobericht"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videobericht"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Bestandsbijlage"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Locatie"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "heeft een url gedeeld"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/no/chatlist.json b/app/javascript/dashboard/i18n/locale/no/chatlist.json
index f9c973507..059d6544a 100644
--- a/app/javascript/dashboard/i18n/locale/no/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/no/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bildemelding"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Lydmelding"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video beskjed"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Vedlegg"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Plassering"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "har delt en URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/pl/chatlist.json b/app/javascript/dashboard/i18n/locale/pl/chatlist.json
index d83324f0c..60b217344 100644
--- a/app/javascript/dashboard/i18n/locale/pl/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/pl/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Wiadomość obrazkowa"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Wiadomość audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Wiadomość wideo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Załącznik pliku"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Lokalizacja"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "udostępnił adres url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/pt/chatlist.json b/app/javascript/dashboard/i18n/locale/pt/chatlist.json
index dcf62496a..f440f3cae 100644
--- a/app/javascript/dashboard/i18n/locale/pt/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/pt/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Mensagem de imagem"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Mensagem de áudio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Mensagem de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Arquivo anexo"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Local:"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "compartilhou uma url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json b/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
index ec403b296..8def2d390 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Mensagem de imagem"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Mensagem de áudio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Mensagem de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Arquivo anexo"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Localização"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "compartilhou uma URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ru/chatlist.json b/app/javascript/dashboard/i18n/locale/ru/chatlist.json
index 761b664d0..4378b853e 100644
--- a/app/javascript/dashboard/i18n/locale/ru/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ru/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Изображение"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Аудиосообщение"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Видео"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Прикрепленный файл"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Местоположение"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "поделился ссылкой"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/sk/chatlist.json b/app/javascript/dashboard/i18n/locale/sk/chatlist.json
index 1be18cad9..ae9d81ba3 100644
--- a/app/javascript/dashboard/i18n/locale/sk/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/sk/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/sv/chatlist.json b/app/javascript/dashboard/i18n/locale/sv/chatlist.json
index f74e4473c..52fbbfd89 100644
--- a/app/javascript/dashboard/i18n/locale/sv/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/sv/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bildmeddelande"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Ljudmeddelande"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videomeddelande"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Bifogad fil"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Plats"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "har delat en webbadress"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ta/chatlist.json b/app/javascript/dashboard/i18n/locale/ta/chatlist.json
index 3c208d637..f2415bfde 100644
--- a/app/javascript/dashboard/i18n/locale/ta/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ta/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "பட செய்தி"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "ஆடியோ செய்தி"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "வீடியோ செய்தி"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "பைல் இணைப்புகள்"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "இருப்பிடம்"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ஒரு URL ஐப் பகிர்ந்துள்ளார்"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/th/chatlist.json b/app/javascript/dashboard/i18n/locale/th/chatlist.json
index 1b565589c..01dcd33a6 100644
--- a/app/javascript/dashboard/i18n/locale/th/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/th/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "ข้อความภาพ"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "ข้อความเสียง"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "ข้อความวิดิโอ"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "เเนบไฟล์"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "สถานที่"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ได้เเชร์ลิ้ง"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/tr/chatlist.json b/app/javascript/dashboard/i18n/locale/tr/chatlist.json
index fec2cf3a5..9703692ad 100644
--- a/app/javascript/dashboard/i18n/locale/tr/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/tr/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Görsel mesaj"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Sesli mesaj"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video mesajı"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Dosya eklentisi"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Yer"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "bir url paylaştı"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/uk/chatlist.json b/app/javascript/dashboard/i18n/locale/uk/chatlist.json
index a4dae75ae..273ee26c6 100644
--- a/app/javascript/dashboard/i18n/locale/uk/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/uk/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Повідомлення з картинкою"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Аудіо-повідомлення"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Відеоповідомлення"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Повідомлення з файлом"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Місцезнаходження"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "поділився посиланням"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/vi/chatlist.json b/app/javascript/dashboard/i18n/locale/vi/chatlist.json
index 8b90c49c5..1f8fa73fd 100644
--- a/app/javascript/dashboard/i18n/locale/vi/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/vi/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Tin nhắn hình ảnh"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Tin nhắn thoại"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Tin nhắn video"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Tập tin đính kèm"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Địa điểm"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "có một đường dẫn chia sẻ"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/zh/chatlist.json b/app/javascript/dashboard/i18n/locale/zh/chatlist.json
index 3a9557a2a..1de627a15 100644
--- a/app/javascript/dashboard/i18n/locale/zh/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/zh/chatlist.json
@@ -53,27 +53,21 @@
     ],
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "图片消息"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "音频消息"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "视频消息"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "附件"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "位置"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "分享了一个网址"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json b/app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json
index 4da85b374..12da4fe82 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "图片消息"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "音频消息"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "视频消息"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "附件"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "位置"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "分享了一个网址"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json b/app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json
index d06313dfe..d8f085107 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "圖片訊息"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "聲音訊息"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "影片訊息"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "附件"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "位置"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "分享了一個網址"
       }
     },
diff --git a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js b/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
index 54c359e8e..18aad271c 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
@@ -4,21 +4,21 @@ const campaigns = accountId => ({
   routes: ['settings_account_campaigns', 'one_off'],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     ongoingCampaigns: {
-      icon: 'ion-arrow-swap',
+      icon: 'arrow-swap',
       label: 'ONGOING',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
       toStateName: 'settings_account_campaigns',
     },
     onOffCampaigns: {
-      icon: 'ion-radio-waves',
+      icon: 'sound-source',
       label: 'ONE_OFF',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),
diff --git a/app/javascript/dashboard/i18n/sidebarItems/common.js b/app/javascript/dashboard/i18n/sidebarItems/common.js
index 665b813e5..6f52ed54f 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/common.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/common.js
@@ -17,7 +17,7 @@ const common = accountId => ({
   ],
   menuItems: {
     assignedToMe: {
-      icon: 'ion-chatbox-working',
+      icon: 'chat',
       label: 'CONVERSATIONS',
       hasSubMenu: false,
       key: '',
@@ -26,35 +26,35 @@ const common = accountId => ({
       toStateName: 'home',
     },
     contacts: {
-      icon: 'ion-person',
+      icon: 'book-contacts',
       label: 'CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
       toStateName: 'contacts_dashboard',
     },
     notifications: {
-      icon: 'ion-ios-bell',
+      icon: 'alert',
       label: 'NOTIFICATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/notifications`),
       toStateName: 'notifications_dashboard',
     },
     report: {
-      icon: 'ion-arrow-graph-up-right',
+      icon: 'arrow-trending-lines',
       label: 'REPORTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports`),
       toStateName: 'settings_account_reports',
     },
     campaigns: {
-      icon: 'ion-speakerphone',
+      icon: 'megaphone',
       label: 'CAMPAIGNS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns`),
       toStateName: 'settings_account_campaigns',
     },
     settings: {
-      icon: 'ion-settings',
+      icon: 'settings',
       label: 'SETTINGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings`),
diff --git a/app/javascript/dashboard/i18n/sidebarItems/contacts.js b/app/javascript/dashboard/i18n/sidebarItems/contacts.js
index a1ecf4a7a..1446be274 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/contacts.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/contacts.js
@@ -8,14 +8,14 @@ const contacts = accountId => ({
   ],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     contacts: {
-      icon: 'ion-person',
+      icon: 'contact-card-group',
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
diff --git a/app/javascript/dashboard/i18n/sidebarItems/reports.js b/app/javascript/dashboard/i18n/sidebarItems/reports.js
index 66595d691..3b6c94972 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/reports.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/reports.js
@@ -11,49 +11,49 @@ const reports = accountId => ({
   ],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     reportOverview: {
-      icon: 'ion-arrow-graph-up-right',
+      icon: 'arrow-trending-lines',
       label: 'REPORTS_OVERVIEW',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/overview`),
       toStateName: 'settings_account_reports',
     },
     csatReports: {
-      icon: 'ion-happy',
+      icon: 'emoji',
       label: 'CSAT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/csat`),
       toStateName: 'csat_reports',
     },
     agentReports: {
-      icon: 'ion-person-stalker',
+      icon: 'people',
       label: 'REPORTS_AGENT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/agent`),
       toStateName: 'agent_reports',
     },
     labelReports: {
-      icon: 'ion-pricetags',
+      icon: 'tag',
       label: 'REPORTS_LABEL',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/label`),
       toStateName: 'label_reports',
     },
     inboxReports: {
-      icon: 'ion-archive',
+      icon: 'mail-inbox-all',
       label: 'REPORTS_INBOX',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/inboxes`),
       toStateName: 'inbox_reports',
     },
     teamReports: {
-      icon: 'ion-ios-people',
+      icon: 'people-team',
       label: 'REPORTS_TEAM',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
diff --git a/app/javascript/dashboard/i18n/sidebarItems/settings.js b/app/javascript/dashboard/i18n/sidebarItems/settings.js
index 23f59bd7b..fa3660320 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/settings.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/settings.js
@@ -32,42 +32,42 @@ const settings = accountId => ({
   ],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     agents: {
-      icon: 'ion-person-stalker',
+      icon: 'people',
       label: 'AGENTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
       toStateName: 'agent_list',
     },
     teams: {
-      icon: 'ion-ios-people',
+      icon: 'people-team',
       label: 'TEAMS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
       toStateName: 'settings_teams_list',
     },
     inboxes: {
-      icon: 'ion-archive',
+      icon: 'mail-inbox-all',
       label: 'INBOXES',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
       toStateName: 'settings_inbox_list',
     },
     labels: {
-      icon: 'ion-pricetags',
+      icon: 'tag',
       label: 'LABELS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
       toStateName: 'labels_list',
     },
     attributes: {
-      icon: 'ion-code',
+      icon: 'code',
       label: 'CUSTOM_ATTRIBUTES',
       hasSubMenu: false,
       toState: frontendURL(
@@ -76,14 +76,14 @@ const settings = accountId => ({
       toStateName: 'attributes_list',
     },
     automation: {
-      icon: 'ion-wrench',
+      icon: 'autocorrect',
       label: 'AUTOMATION',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
       toStateName: 'automation_list',
     },
     cannedResponses: {
-      icon: 'ion-chatbox-working',
+      icon: 'chat-multiple',
       label: 'CANNED_RESPONSES',
       hasSubMenu: false,
       toState: frontendURL(
@@ -92,21 +92,21 @@ const settings = accountId => ({
       toStateName: 'canned_list',
     },
     settings_integrations: {
-      icon: 'ion-flash',
+      icon: 'flash-on',
       label: 'INTEGRATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/integrations`),
       toStateName: 'settings_integrations',
     },
     settings_applications: {
-      icon: 'ion-asterisk',
+      icon: 'star-emphasis',
       label: 'APPLICATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
     },
     general_settings_index: {
-      icon: 'ion-gear-a',
+      icon: 'settings',
       label: 'ACCOUNT_SETTINGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/general`),
diff --git a/app/javascript/dashboard/mixins/specs/attributeFixtures.js b/app/javascript/dashboard/mixins/specs/attributeFixtures.js
index 9b0cc0fc1..4ade79cde 100644
--- a/app/javascript/dashboard/mixins/specs/attributeFixtures.js
+++ b/app/javascript/dashboard/mixins/specs/attributeFixtures.js
@@ -18,7 +18,7 @@ export default [
     attribute_model: 'conversation_attribute',
     created_at: '2021-09-16T13:06:47.329Z',
     default_value: null,
-    icon: 'ion-calculator',
+    icon: 'fluent-calculator',
     id: 10,
     updated_at: '2021-09-22T10:42:25.873Z',
     value: 2021,
diff --git a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
index 222b35838..0c98f45c8 100644
--- a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
+++ b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
@@ -70,7 +70,7 @@ describe('attributeMixin', () => {
         attribute_model: 'conversation_attribute',
         created_at: '2021-09-16T13:06:47.329Z',
         default_value: null,
-        icon: 'ion-calculator',
+        icon: 'fluent-calculator',
         id: 10,
         updated_at: '2021-09-22T10:42:25.873Z',
         value: 2021,
diff --git a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
index 74b92ba32..d828ee412 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
@@ -36,7 +36,7 @@
         variant="clear link"
         size="small"
         color-scheme="secondary"
-        icon="ion-compose"
+        icon="edit"
         class-names="edit-button"
         @click="onEdit"
       />
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
index 97e6f4f66..abe67471b 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
@@ -10,10 +10,11 @@
       </h5>
       <p class="option__body">
         <span v-if="email" class="email-icon-wrap">
-          <i class="icon ion-email" />{{ email }}
+          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
+          {{ email }}
         </span>
         <span v-if="phoneNumber" class="phone-icon-wrap">
-          <i class="icon ion-ios-telephone" />
+          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
           {{ phoneNumber }}
         </span>
         <span v-if="!phoneNumber && !email">{{ '---' }}</span>
@@ -102,4 +103,9 @@ export default {
     width: auto;
   }
 }
+
+.merge-contact--icon {
+  margin-bottom: var(--space-minus-micro);
+  margin-right: var(--space-micro);
+}
 </style>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
index cf58b9a32..d7de3ea09 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="contact-fields">
-    <h3 class="block-title title">{{ $t('CONTACTS_PAGE.FIELDS') }}</h3>
+    <h3 class="block-title title">
+      {{ $t('CONTACTS_PAGE.FIELDS') }}
+    </h3>
     <attribute
       :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-      icon="ion-email"
+      icon="mail"
       emoji=""
       :value="contact.email"
       :show-edit="true"
@@ -11,7 +13,7 @@
     />
     <attribute
       :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
-      icon="ion-ios-telephone"
+      icon="call"
       emoji=""
       :value="contact.phone_number"
       :show-edit="true"
@@ -20,7 +22,7 @@
     <attribute
       v-if="additionalAttributes.location"
       :label="$t('CONTACT_PANEL.LOCATION')"
-      icon="ion-map"
+      icon="map"
       emoji="🌍"
       :value="additionalAttributes.location"
       :show-edit="true"
@@ -33,7 +35,7 @@
     >
       <attribute
         :label="attribute"
-        icon="ion-arrow-right-c"
+        icon="chevron-right"
         :value="customAttributes[attribute]"
         :show-edit="true"
         @update="value => onCustomAttributeUpdate(attribute, value)"
@@ -42,7 +44,7 @@
     <woot-button
       size="small"
       variant="link"
-      icon="ion-plus"
+      icon="add"
       @click="handleCustomCreate"
     >
       {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
diff --git a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
index 42bc7849d..777508b61 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
@@ -33,7 +33,7 @@
       <woot-button
         variant="hollow"
         size="small expanded"
-        icon="ion-compose"
+        icon="edit"
         @click="onEditClick"
       >
         {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index 5d0418dae..2c886ac64 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -33,7 +33,7 @@
 
       <div class="child-contact-wrap">
         <div class="child-arrow">
-          <i class="ion-ios-arrow-up up" />
+          <fluent-icon icon="arrow-up" class="up" size="17" />
         </div>
         <div
           class="child-contact multiselect-wrap--medium"
@@ -213,8 +213,8 @@ export default {
 
 .up {
   position: absolute;
-  top: -11px;
-  left: var(--space-normal);
+  top: var(--space-minus-smaller);
+  left: var(--space-slab);
 }
 
 .footer {
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index d887ecf7c..8ddd1b227 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="context-menu">
     <woot-button
-      icon="ion-more"
-      size="large"
+      icon="more-vertical"
       class="button--delete-message"
       color-scheme="secondary"
       variant="link"
@@ -19,7 +18,8 @@
           <woot-button
             variant="clear"
             size="small"
-            icon="ion-ios-copy-outline"
+            icon="clipboard"
+            icon-size="16"
             @click="handleCopy"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.COPY') }}
@@ -30,7 +30,8 @@
             variant="clear"
             color-scheme="alert"
             size="small"
-            icon="ion-trash-a"
+            icon="delete"
+            icon-size="16"
             @click="handleDelete"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.DELETE') }}
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
index 93c9c656b..b208347c0 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -19,7 +19,8 @@
           v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
           variant="smooth"
           size="tiny"
-          icon="ion-trash-b"
+          icon="delete"
+          icon-size="16"
           color-scheme="secondary"
           @click="onDelete"
         />
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index 647baf65a..7f3c449a8 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -4,7 +4,7 @@
     :class="{ 'border-left': showAvatar }"
   >
     <span v-if="showAvatar" class="close-button" @click="onClose">
-      <i class="ion-android-close close-icon" />
+      <fluent-icon icon="dismiss" class="close-icon" />
     </span>
     <contact-info
       :show-avatar="showAvatar"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 412b3f2fc..4b4b71c10 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -34,6 +34,7 @@ import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import timeMixin from 'dashboard/mixins/time';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 export default {
   components: {
@@ -228,7 +229,7 @@ export default {
                         rel="noopener noreferrer nofollow"
                         href={`https://${profile}.com/${profiles[profile]}`}
                       >
-                        <i class={`ion-social-${profile}`} />
+                        <FluentIcon icon={`brand-${profile}`} />
                       </a>
                     )
                 )}
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index f0118e17d..87d2e5177 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -8,7 +8,7 @@
       </div>
       <div class="right-aligned-wrap">
         <div class="search-wrap">
-          <i class="ion-ios-search-strong search-icon" />
+          <fluent-icon icon="search" class="search-icon" />
           <input
             type="text"
             :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
@@ -28,7 +28,7 @@
 
         <woot-button
           color-scheme="success"
-          icon="ion-android-add-circle"
+          icon="add-circle"
           class="margin-right-small"
           data-testid="create-new-contact"
           @click="onToggleCreate"
@@ -38,7 +38,7 @@
 
         <woot-button
           color-scheme="info"
-          icon="ion-android-upload"
+          icon="cloud-backup"
           @click="onToggleImport"
         >
           {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
index 49755d1d2..531e9141e 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
@@ -25,7 +25,7 @@
           <woot-button
             variant="smooth"
             size="small"
-            icon="ion-compose"
+            icon="edit"
             color-scheme="secondary"
             class="action-button"
             @click="onEdit"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index b5bfa487a..70071999a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="medium-3 bg-white contact--panel">
-    <span class="close-button" @click="onPanelToggle">
-      <i class="ion-chevron-right" />
-    </span>
+    <woot-button
+      icon="chevron-right"
+      class="close-button clear secondary"
+      @click="onPanelToggle"
+    />
     <contact-info :contact="contact" :channel-type="channelType" />
     <draggable
       :list="conversationSidebarItems"
@@ -254,7 +256,7 @@ export default {
 .close-button {
   position: absolute;
   right: $space-two;
-  top: $space-slab + $space-two;
+  top: $space-slab;
   font-size: $font-size-default;
   color: $color-heading;
   z-index: 9989;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index 550a155f0..d7ea2aa86 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -8,7 +8,8 @@
         <template v-slot:button>
           <woot-button
             v-if="showSelfAssign"
-            icon="ion-arrow-right-c"
+            icon="arrow-right"
+            icon-size="14"
             variant="link"
             size="small"
             @click="onSelfAssign"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index eece99e32..f9402f359 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -18,7 +18,7 @@
             rel="noopener nofollow noreferrer"
           >
             {{ contact.name }}
-            <i class="ion-android-open open-link--icon" />
+            <fluent-icon size="16" icon="open" class="open-link--icon" />
           </a>
         </h3>
         <p v-if="additionalAttributes.description" class="contact--bio">
@@ -29,7 +29,7 @@
           <contact-info-row
             :href="contact.email ? `mailto:${contact.email}` : ''"
             :value="contact.email"
-            icon="ion-email"
+            icon="mail"
             emoji="✉️"
             :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
             show-copy
@@ -37,20 +37,20 @@
           <contact-info-row
             :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
             :value="contact.phone_number"
-            icon="ion-ios-telephone"
+            icon="call"
             emoji="📞"
             :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
           />
           <contact-info-row
             :value="additionalAttributes.company_name"
-            icon="ion-briefcase"
+            icon="building-bank"
             emoji="🏢"
             :title="$t('CONTACT_PANEL.COMPANY')"
           />
           <contact-info-row
             v-if="location || additionalAttributes.location"
             :value="location || additionalAttributes.location"
-            icon="ion-map"
+            icon="map"
             emoji="🌍"
             :title="$t('CONTACT_PANEL.LOCATION')"
           />
@@ -62,7 +62,8 @@
           v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
           title="$t('CONTACT_PANEL.NEW_MESSAGE')"
           class="new-message"
-          icon="ion-chatboxes"
+          icon="chat"
+          icon-size="14"
           size="small expanded"
           @click="toggleConversationModal"
         />
@@ -70,7 +71,8 @@
           v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
           title="$t('EDIT_CONTACT.BUTTON_LABEL')"
           class="edit-contact"
-          icon="ion-edit"
+          icon="edit"
+          icon-size="14"
           variant="smooth"
           size="small expanded"
           @click="toggleEditModal"
@@ -80,7 +82,8 @@
           v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
           title="$t('CONTACT_PANEL.MERGE_CONTACT')"
           class="merge-contact"
-          icon="ion-merge"
+          icon="merge"
+          icon-size="14"
           variant="smooth"
           size="small expanded"
           color-scheme="secondary"
@@ -92,7 +95,8 @@
           v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
           title="$t('DELETE_CONTACT.BUTTON_LABEL')"
           class="delete-contact"
-          icon="ion-trash-a"
+          icon="delete"
+          icon-size="14"
           variant="smooth"
           size="small expanded"
           color-scheme="alert"
@@ -139,6 +143,7 @@ import { mixin as clickaway } from 'vue-clickaway';
 import ContactInfoRow from './ContactInfoRow';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from './SocialIcons';
+
 import EditContact from './EditContact';
 import NewConversation from './NewConversation';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal';
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 269ab1293..4711133e4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="contact-info--row">
     <a v-if="href" :href="href" class="contact-info--details">
-      <emoji-or-icon :icon="icon" :emoji="emoji" />
+      <emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
       <span v-if="value" class="text-truncate" :title="value">{{ value }}</span>
       <span v-else class="text-muted">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
@@ -12,14 +12,15 @@
         type="submit"
         variant="link"
         color-scheme="secondary"
-        icon="ion-clipboard"
+        icon="clipboard"
+        icon-size="14"
         class-names="icon copy-icon"
         @click="onCopy"
       />
     </a>
 
     <div v-else class="contact-info--details">
-      <emoji-or-icon :icon="icon" :emoji="emoji" />
+      <emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
       <span v-if="value" class="text-truncate">{{ value }}</span>
       <span v-else class="text-muted">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
@@ -70,6 +71,8 @@ export default {
 </script>
 <style scoped lang="scss">
 .contact-info--row {
+  margin-left: var(--space-minus-smaller);
+
   .contact-info--icon {
     font-size: var(--font-size-default);
     min-width: var(--space-medium);
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
index ef309499c..644d1cbfb 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
@@ -8,7 +8,7 @@
       rel="noopener noreferrer nofollow"
       class="contact--social-icon"
     >
-      <i :class="`ion-social-${profile.icon}`" />
+      <fluent-icon :icon="`brand-${profile.key}`" size="16" />
     </a>
   </div>
 </template>
@@ -43,10 +43,10 @@ export default {
 
 <style scoped lang="scss">
 .social--icons {
-  margin-bottom: var(--space-small);
+  margin: var(--space-small) 0 var(--space-smaller);
 }
+
 .contact--social-icon {
-  font-size: var(--font-size-medium);
   padding-right: var(--space-slab);
   color: var(--color-body);
 }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
index 365f45bfa..19a17c15f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
@@ -28,7 +28,7 @@
         </div>
         <woot-button
           class="add"
-          icon="ion-plus-round"
+          icon="add"
           size="tiny"
           @click="addNewAttribute"
         >
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue
index c662df307..a0b11cabd 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue
@@ -8,7 +8,7 @@
       <woot-button
         size="small"
         variant="link"
-        icon="ion-plus"
+        icon="add"
         @click="toggleAttributeDropDown"
       >
         {{ $t('CUSTOM_ATTRIBUTES.ADD_BUTTON_TEXT') }}
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 566d4d74b..5ab0e9708 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -3,7 +3,7 @@
     <div class="search" :class="{ 'is-active': showSearchBox }">
       <woot-sidemenu-icon />
       <div class="icon">
-        <i class="ion-ios-search-strong search--icon" />
+        <fluent-icon icon="search" class="search--icon" size="28" />
       </div>
       <input
         v-model="searchTerm"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue
index 30b95ed88..72a83cce6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="search-result" @click="onClick">
     <div class="result-header">
-      <div class="message">
-        <i class="ion-ios-chatboxes-outline" />
+      <div class="conversation--block">
+        <fluent-icon icon="chat" class="icon--conversation-search-item" />
         <div class="conversation">
           <div class="user-wrap">
             <div class="name-wrap">
@@ -128,20 +128,20 @@ export default {
     .timestamp {
       color: var(--white);
     }
-    .ion-ios-chatboxes-outline {
+    .icon--conversation-search-item {
       color: var(--white);
     }
   }
 }
 
-.message {
+.conversation--block {
+  align-items: center;
   display: flex;
 }
 
-.ion-ios-chatboxes-outline {
+.icon--conversation-search-item {
   align-items: center;
   display: flex;
-  font-size: var(--font-size-large);
   color: var(--w-500);
 }
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
index 09a3c6d00..3dd5d5cc0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
@@ -5,7 +5,11 @@
         <div class="name-wrap">
           <span class="text-block-title">{{ userName }}</span>
           <div>
-            <i v-if="isOutgoingMessage" class="ion-headphone" />
+            <fluent-icon
+              v-if="isOutgoingMessage"
+              icon="arrow-reply"
+              class="icon-outgoing"
+            />
           </div>
         </div>
         <span class="timestamp">{{ readableTime }} </span>
@@ -84,7 +88,7 @@ export default {
       color: var(--white);
       text-decoration: underline;
     }
-    .ion-headphone {
+    .icon-outgoing {
       color: var(--white);
     }
   }
@@ -119,9 +123,8 @@ export default {
   }
 }
 
-.ion-headphone {
+.icon-outgoing {
   color: var(--w-500);
-  font-size: var(--font-size-mini);
   padding: var(--space-micro);
   padding-right: var(--space-smaller);
 }
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/routes.js b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
index c4c3ea1ca..2c9a195ac 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -9,7 +9,7 @@ export const routes = [
     component: SettingsWrapper,
     props: {
       headerTitle: 'NOTIFICATIONS_PAGE.HEADER',
-      icon: 'ion-ios-bell',
+      icon: 'alert',
       showNewButton: false,
     },
     children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 2f91e7087..064bf1191 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -7,7 +7,7 @@
         :button-label="backButtonLabel"
         :back-url="backUrl"
       />
-      <i v-if="icon" :class="iconClass"></i>
+      <fluent-icon v-if="icon" :icon="icon" :class="iconClass" />
       <slot></slot>
       <span>{{ headerTitle }}</span>
     </h1>
@@ -16,7 +16,7 @@
       :to="buttonRoute"
       class="button success button--fixed-right-top"
     >
-      <i class="icon ion-android-add-circle"></i>
+      <fluent-icon icon="add-circle" />
       <span class="button__content">
         {{ buttonText }}
       </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
index 70aff7c36..c2ef17129 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
@@ -10,7 +10,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'GENERAL_SETTINGS.TITLE',
-        icon: 'ion-gear-a',
+        icon: 'settings',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
index f0b88bc4e..e01d33b5e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -45,7 +45,7 @@
           </div>
           <div class="medium-6 columns text-right">
             <woot-button
-              icon="ion-locked"
+              icon="lock-closed"
               variant="clear"
               @click.prevent="resetPassword"
             >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 38f07ea3f..307fe9c7d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
@@ -59,7 +59,7 @@
                       v-if="showEditAction(agent)"
                       variant="link"
                       color-scheme="secondary"
-                      icon="ion-edit"
+                      icon="edit"
                       class-names="grey-btn"
                       @click="openEditPopup(agent)"
                     >
@@ -69,7 +69,7 @@
                       v-if="showDeleteAction(agent)"
                       variant="link"
                       color-scheme="secondary"
-                      icon="ion-close-circled"
+                      icon="dismiss-circle"
                       class-names="grey-btn"
                       :is-loading="loading[agent.id]"
                       @click="openDeletePopup(agent, index)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
index ab1fde521..3bf4b6d2e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_MGMT.HEADER',
-        icon: 'ion-person-stalker',
+        icon: 'people',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 648597012..62e79a2c1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -53,7 +53,7 @@
                   variant="link"
                   color-scheme="secondary"
                   class-names="grey-btn"
-                  icon="ion-edit"
+                  icon="edit"
                   @click="openEditPopup(attribute)"
                 >
                   {{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT') }}
@@ -61,7 +61,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   @click="openDelete(attribute)"
                 >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 1db0b15f1..fc7b6b6b5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
index 87e47d8cd..a4430ff1e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'ATTRIBUTES_MGMT.HEADER',
-        icon: 'ion-code',
+        icon: 'code',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index dfade7e42..36d7d6be6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
     >
       {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
     </woot-button>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
index e5ca2c868..6d751c45a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AUTOMATION.HEADER',
-        icon: 'ion-wrench',
+        icon: 'autocorrect',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index b5efee44e..6dd24bd42 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -24,9 +24,9 @@ import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import WootButton from 'dashboard/components/ui/WootButton.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
-import InboxIconWithName from 'dashboard/components/widgets/InboxIconWithName';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import timeMixin from 'dashboard/mixins/time';
+import InboxName from 'dashboard/components/widgets/InboxName';
 
 export default {
   components: {
@@ -131,7 +131,7 @@ export default {
           title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.INBOX'),
           align: 'left',
           renderBodyCell: ({ row }) => {
-            return <InboxIconWithName inbox={row.inbox} />;
+            return <InboxName inbox={row.inbox} />;
           },
         },
       ];
@@ -195,7 +195,7 @@ export default {
               <div class="button-wrapper">
                 <WootButton
                   variant="clear"
-                  icon="ion-edit"
+                  icon="edit"
                   color-scheme="secondary"
                   classNames="grey-btn"
                   onClick={() => this.$emit('on-edit-click', row)}
@@ -204,7 +204,7 @@ export default {
                 </WootButton>
                 <WootButton
                   variant="link"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   color-scheme="secondary"
                   onClick={() => this.$emit('on-delete-click', row)}
                 >
@@ -247,7 +247,7 @@ export default {
             <div class="button-wrapper">
               <WootButton
                 variant="link"
-                icon="ion-close-circled"
+                icon="dismiss-circle"
                 color-scheme="secondary"
                 onClick={() => this.$emit('on-delete-click', row)}
               >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
index 8719142fb..822c9cb88 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup"
     >
       {{ buttonText }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
index fce5b215b..4de15b068 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CAMPAIGN.ONGOING.HEADER',
-        icon: 'ion-arrow-swap',
+        icon: 'arrow-swap',
       },
       children: [
         {
@@ -29,7 +29,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CAMPAIGN.ONE_OFF.HEADER',
-        icon: 'ion-radio-waves',
+        icon: 'sound-source',
       },
       children: [
         {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 45841cb12..83adcd099 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
@@ -52,7 +52,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-edit"
+                  icon="edit"
                   class-names="grey-btn"
                   @click="openEditPopup(cannedItem)"
                 >
@@ -61,7 +61,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   :is-loading="loading[cannedItem.id]"
                   @click="openDeletePopup(cannedItem, index)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
index 9e761f8f1..3b68de1db 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CANNED_MGMT.HEADER',
-        icon: 'ion-chatbox-working',
+        icon: 'chat-multiple',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 87e274956..c53f69701 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -68,7 +68,7 @@
                   >
                     <woot-button
                       v-if="isAdmin"
-                      icon="ion-gear-b"
+                      icon="settings"
                       variant="link"
                       color-scheme="secondary"
                       class-names="grey-btn"
@@ -83,7 +83,7 @@
                     color-scheme="secondary"
                     class-names="grey-btn"
                     :is-loading="loading[item.id]"
-                    icon="ion-close-circled"
+                    icon="dismiss-circle"
                     @click="openDelete(item)"
                   >
                     {{ $t('INBOX_MGMT.DELETE.BUTTON_TEXT') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
index 095657d54..50fc32fdb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -3,7 +3,7 @@
     <div class="login-init full-height text-center">
       <form @submit.prevent="requestAuthorization">
         <woot-submit-button
-          icon-class="ion-social-twitter"
+          icon="brand-twitter"
           button-text="Sign in with Twitter"
           type="submit"
           :loading="isRequestingAuthorization"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
index 9e6338605..a0701e2cb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -24,7 +24,7 @@
           :allow-empty="false"
         />
         <div class="separator-icon">
-          <i class="ion-minus-round" />
+          <fluent-icon icon="subtract" type="solid" size="16" />
         </div>
         <multiselect
           v-model="toTime"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
index 1766271f8..9423a915d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -19,7 +19,7 @@ export default {
         return {
           headerTitle: 'INBOX_MGMT.HEADER',
           headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
-          icon: 'ion-archive',
+          icon: 'mail-inbox-all',
           newButtonRoutes: ['settings_inbox_list'],
           showBackButton,
         };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
index 6d9c4395c..2c1b8579c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
@@ -4,7 +4,7 @@
       v-if="showAddButton"
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddHookModal"
     >
       {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
index 10cd3586a..198f070ce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
@@ -27,7 +27,7 @@
           )
         "
       >
-        <woot-button icon="ion-gear-b">
+        <woot-button icon="settings">
           {{ $t('INTEGRATION_APPS.CONFIGURE') }}
         </woot-button>
       </router-link>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
index 1f0d35daf..085ce63eb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
@@ -26,7 +26,7 @@
               <woot-button
                 variant="link"
                 color-scheme="secondary"
-                icon="ion-close-circled"
+                icon="dismiss-circle"
                 class-names="grey-btn"
                 @click="$emit('delete', hook)"
               >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js
index c05982551..67f5a5f07 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js
@@ -16,7 +16,7 @@ export default {
             : '';
         return {
           headerTitle: 'INTEGRATION_APPS.HEADER',
-          icon: 'ion-asterisk',
+          icon: 'star-emphasis',
           showBackButton,
           backUrl,
         };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index cabdc1b8b..99d172e4e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -31,7 +31,7 @@
                 :button-text="
                   $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
                 "
-                icon-class="ion-close-circled"
+                icon-class="dismiss-circle"
                 button-class="nice alert"
               />
             </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
index 04fb325f0..38e198cee 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
@@ -45,14 +45,14 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-edit"
+                  icon="edit"
                   @click="openEditPopup(webHookItem)"
                 >
                   {{ $t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT') }}
                 </woot-button>
                 <woot-button
                   variant="link"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   color-scheme="secondary"
                   @click="openDeletePopup(webHookItem, index)"
                 >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index 0439033be..36596ad0e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -17,7 +17,7 @@ export default {
             : '';
         return {
           headerTitle: 'INTEGRATION_SETTINGS.HEADER',
-          icon: 'ion-flash',
+          icon: 'flash-on',
           showBackButton,
           backUrl,
         };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 67f416ffa..712d801e7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup"
     >
       {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
@@ -48,7 +48,7 @@
                   color-scheme="secondary"
                   class-names="grey-btn"
                   :is-loading="loading[label.id]"
-                  icon="ion-edit"
+                  icon="edit"
                   @click="openEditPopup(label)"
                 >
                   {{ $t('LABEL_MGMT.FORM.EDIT') }}
@@ -56,7 +56,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   :is-loading="loading[label.id]"
                   @click="openDeletePopup(label, index)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
index eef8d301d..6424aaea4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'LABEL_MGMT.HEADER',
-        icon: 'ion-pricetags',
+        icon: 'tag',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index 55a33e2cc..032b13d6e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -11,7 +11,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'GENERAL_SETTINGS.TITLE',
-        icon: 'ion-compose',
+        icon: 'edit',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 236909ce3..e55259c2c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-download"
+      icon="arrow-download"
       @click="downloadAgentReports"
     >
       {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
@@ -116,7 +116,10 @@ export default {
     },
     downloadAgentReports() {
       const { from, to } = this;
-      const fileName = `agent-report-${format(fromUnixTime(to), 'dd-MM-yyyy')}.csv`;
+      const fileName = `agent-report-${format(
+        fromUnixTime(to),
+        'dd-MM-yyyy'
+      )}.csv`;
       this.$store.dispatch('downloadAgentReports', { from, to, fileName });
     },
     changeSelection(index) {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
index ed4b90b68..d24e95216 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
@@ -2,7 +2,12 @@
   <div class="medium-2 small-6 csat--metric-card">
     <h3 class="heading">
       <span>{{ label }}</span>
-      <i v-tooltip="infoText" class="csat--icon ion-ios-information" />
+      <fluent-icon
+        v-tooltip="infoText"
+        size="14"
+        icon="info"
+        class="csat--icon"
+      />
     </h3>
     <h4 class="metric">
       {{ value }}
@@ -34,7 +39,9 @@ export default {
     var(--space-two);
 
   .heading {
+    align-items: center;
     color: var(--color-heading);
+    display: flex;
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-bold);
     margin: 0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index b5d4f889d..6b26f94b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-download"
+      icon="arrow-download"
       @click="downloadReports"
     >
       {{ downloadButtonLabel }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index 4cb837af5..27f9a67ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -14,7 +14,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'REPORT.HEADER',
-        icon: 'ion-arrow-graph-up-right',
+        icon: 'arrow-trending-lines',
         keepAlive: false,
       },
       children: [
@@ -35,7 +35,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CSAT_REPORTS.HEADER',
-        icon: 'ion-happy-outline',
+        icon: 'emoji',
         keepAlive: false,
       },
       children: [
@@ -52,7 +52,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_REPORTS.HEADER',
-        icon: 'ion-ios-people',
+        icon: 'people',
         keepAlive: false,
       },
       children: [
@@ -69,7 +69,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'LABEL_REPORTS.HEADER',
-        icon: 'ion-pricetags',
+        icon: 'tag',
         keepAlive: false,
       },
       children: [
@@ -86,7 +86,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'INBOX_REPORTS.HEADER',
-        icon: 'ion-archive',
+        icon: 'mail-inbox-all',
         keepAlive: false,
       },
       children: [
@@ -103,7 +103,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'TEAM_REPORTS.HEADER',
-        icon: 'ion-ios-people',
+        icon: 'people-team',
       },
       children: [
         {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index 53b766021..f55169672 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -30,7 +30,7 @@
                       variant="link"
                       color-scheme="secondary"
                       class-names="grey-btn"
-                      icon="ion-gear-b"
+                      icon="settings"
                     >
                       {{ $t('TEAMS_SETTINGS.LIST.EDIT_TEAM') }}
                     </woot-button>
@@ -39,7 +39,7 @@
                     v-if="isAdmin"
                     variant="link"
                     color-scheme="secondary"
-                    icon="ion-close-circled"
+                    icon="dismiss-circle"
                     class-names="grey-btn"
                     :is-loading="loading[item.id]"
                     @click="openDelete(item)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
index 95429bd46..a04c60882 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
@@ -20,7 +20,7 @@ export default {
         return {
           headerTitle: 'TEAMS_SETTINGS.HEADER',
           headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
-          icon: 'ion-ios-people',
+          icon: 'people-team',
           newButtonRoutes: ['settings_teams_new'],
           showBackButton,
         };
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 200e40c74..9b3875856 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -39,6 +39,7 @@ import {
   initializeAnalyticsEvents,
   initializeChatwootEvents,
 } from '../dashboard/helper/scriptHelpers';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 Vue.config.env = process.env;
 
@@ -73,6 +74,7 @@ Vue.use(hljs.vuePlugin);
 Vue.component('multiselect', Multiselect);
 Vue.component('woot-switch', WootSwitch);
 Vue.component('woot-wizard', WootWizard);
+Vue.component('fluent-icon', FluentIcon);
 
 const i18nConfig = new VueI18n({
   locale: 'en',
diff --git a/app/javascript/shared/components/EmojiOrIcon.vue b/app/javascript/shared/components/EmojiOrIcon.vue
index 0e9667912..be06100e0 100644
--- a/app/javascript/shared/components/EmojiOrIcon.vue
+++ b/app/javascript/shared/components/EmojiOrIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <i v-if="showWrap" :class="className">{{ iconContent }}</i>
+  <i v-if="showEmoji" :class="className">{{ iconContent }}</i>
+  <fluent-icon
+    v-else-if="showIcon"
+    :size="iconSize"
+    :icon="icon"
+    :class="className"
+  />
 </template>
 
 <script>
@@ -9,6 +15,7 @@ import { mapGetters } from 'vuex';
 export default {
   props: {
     icon: { type: String, default: '' },
+    iconSize: { type: [Number, String], default: 20 },
     emoji: { type: String, default: '' },
   },
   computed: {
@@ -23,9 +30,6 @@ export default {
     showIcon() {
       return !this.showEmoji && this.icon;
     },
-    showWrap() {
-      return this.showEmoji || this.showIcon;
-    },
     iconContent() {
       return this.showEmoji ? this.emoji : '';
     },
diff --git a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
new file mode 100644
index 000000000..c07b9a180
--- /dev/null
+++ b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
@@ -0,0 +1,35 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path :d="icons[`${icon}-${type}`]" fill="currentColor" />
+  </svg>
+</template>
+<script>
+import icons from './dashboard-icons.json';
+
+export default {
+  name: 'FluentIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: [String, Number],
+      default: '20',
+    },
+    type: {
+      type: String,
+      default: 'outline',
+    },
+  },
+  data() {
+    return { icons };
+  },
+};
+</script>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
new file mode 100644
index 000000000..e5e61793e
--- /dev/null
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -0,0 +1,85 @@
+{
+  "add-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7Z",
+  "add-outline": "M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z",
+  "alert-outline": "M12 1.996a7.49 7.49 0 0 1 7.496 7.25l.004.25v4.097l1.38 3.156a1.25 1.25 0 0 1-1.145 1.75L15 18.502a3 3 0 0 1-5.995.177L9 18.499H4.275a1.251 1.251 0 0 1-1.147-1.747L4.5 13.594V9.496c0-4.155 3.352-7.5 7.5-7.5ZM13.5 18.5l-3 .002a1.5 1.5 0 0 0 2.993.145l.006-.147ZM12 3.496c-3.32 0-6 2.674-6 6v4.41L4.656 17h14.697L18 13.907V9.509l-.004-.225A5.988 5.988 0 0 0 12 3.496Z",
+  "arrow-download-outline": "M18.25 20.5a.75.75 0 1 1 0 1.5l-13 .004a.75.75 0 1 1 0-1.5l13-.004ZM11.648 2.012l.102-.007a.75.75 0 0 1 .743.648l.007.102-.001 13.685 3.722-3.72a.75.75 0 0 1 .976-.073l.085.073a.75.75 0 0 1 .072.976l-.073.084-4.997 4.997a.75.75 0 0 1-.976.073l-.085-.073-5.003-4.996a.75.75 0 0 1 .976-1.134l.084.072 3.719 3.714L11 2.755a.75.75 0 0 1 .648-.743l.102-.007-.102.007Z",
+  "arrow-redo-outline": "M19.25 2a.75.75 0 0 0-.743.648l-.007.102v5.69l-4.574-4.56a6.41 6.41 0 0 0-8.878-.179l-.186.18a6.41 6.41 0 0 0 0 9.063l8.845 8.84a.75.75 0 0 0 1.06-1.062l-8.845-8.838a4.91 4.91 0 0 1 6.766-7.112l.178.17L17.438 9.5H11.75a.75.75 0 0 0-.743.648L11 10.25c0 .38.282.694.648.743l.102.007h7.5a.75.75 0 0 0 .743-.648L20 10.25v-7.5a.75.75 0 0 0-.75-.75Z",
+  "arrow-reply-outline": "M9.277 16.221a.75.75 0 0 1-1.061 1.06l-4.997-5.003a.75.75 0 0 1 0-1.06L8.217 6.22a.75.75 0 0 1 1.061 1.06L5.557 11h7.842c1.595 0 2.81.242 3.889.764l.246.126a6.203 6.203 0 0 1 2.576 2.576c.61 1.14.89 2.418.89 4.135a.75.75 0 0 1-1.5 0c0-1.484-.228-2.52-.713-3.428a4.702 4.702 0 0 0-1.96-1.96c-.838-.448-1.786-.676-3.094-.709L13.4 12.5H5.562l3.715 3.721Z",
+  "arrow-right-outline": "M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z",
+  "arrow-swap-outline": "m14.783 2.22 4.495 4.494a.75.75 0 0 1 .073.976l-.072.085-4.495 4.504a.75.75 0 0 1-1.135-.975l.073-.084 3.217-3.223H5.243A.75.75 0 0 1 4.5 7.35l-.007-.101a.75.75 0 0 1 .648-.743l.102-.007 11.697-.001-3.218-3.217a.75.75 0 0 1-.072-.976l.072-.084a.75.75 0 0 1 .977-.073l.084.073 4.495 4.494-4.495-4.494ZM19.5 16.65l.006.1a.75.75 0 0 1-.648.744l-.102.007L7.063 17.5l3.22 3.22a.75.75 0 0 1 .074.976l-.073.084a.75.75 0 0 1-.976.073l-.085-.072-4.5-4.497a.75.75 0 0 1-.073-.976l.073-.084 4.5-4.504a.75.75 0 0 1 1.134.976l-.073.084L7.066 16h11.692a.75.75 0 0 1 .743.65l.006.1-.006-.1Z",
+  "arrow-trending-lines-outline": "M16.749 2h4.554l.1.014.099.028.06.026c.08.034.153.085.219.15l.04.044.044.057.054.09.039.09.019.064.014.064.009.095v4.532a.75.75 0 0 1-1.493.102l-.007-.102V4.559l-6.44 6.44a.75.75 0 0 1-.976.073L13 11 9.97 8.09l-5.69 5.689a.75.75 0 0 1-1.133-.977l.073-.084 6.22-6.22a.75.75 0 0 1 .976-.072l.084.072 3.03 2.91L19.438 3.5h-2.69a.75.75 0 0 1-.742-.648l-.007-.102a.75.75 0 0 1 .648-.743L16.75 2ZM3.75 17a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Zm5.75-3.25a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0v-7.5ZM13.75 15a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5a.75.75 0 0 1 .75-.75Zm5.75-4.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Z",
+  "arrow-up-outline":"M4.21 10.733a.75.75 0 0 0 1.086 1.034l5.954-6.251V20.25a.75.75 0 0 0 1.5 0V5.516l5.955 6.251a.75.75 0 0 0 1.086-1.034l-7.067-7.42a.995.995 0 0 0-.58-.3.754.754 0 0 0-.29.001.995.995 0 0 0-.578.3L4.21 10.733Z",
+  "attach-outline": "M11.772 3.743a6 6 0 0 1 8.66 8.302l-.19.197-8.8 8.798-.036.03a3.723 3.723 0 0 1-5.489-4.973.764.764 0 0 1 .085-.13l.054-.06.086-.088.142-.148.002.003 7.436-7.454a.75.75 0 0 1 .977-.074l.084.073a.75.75 0 0 1 .074.976l-.073.084-7.594 7.613a2.23 2.23 0 0 0 3.174 3.106l8.832-8.83A4.502 4.502 0 0 0 13 4.644l-.168.16-.013.014-9.536 9.536a.75.75 0 0 1-1.133-.977l.072-.084 9.549-9.55h.002Z",
+  "autocorrect-outline": "M13.461 4.934c.293.184.548.42.752.698l.117.171 2.945 4.696H21.5a.75.75 0 0 1 .743.649l.007.102a.75.75 0 0 1-.75.75l-3.284-.001.006.009-.009-.01a4.75 4.75 0 1 1-3.463-1.5h.756L13.059 6.6a1.25 1.25 0 0 0-2.04-.112l-.078.112-7.556 12.048a.75.75 0 0 1-1.322-.699l.052-.098L9.67 5.803a2.75 2.75 0 0 1 3.791-.869ZM14.751 12a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z",
+  "book-contacts-outline": "M15.5 12.25a.75.75 0 0 0-.75-.75h-5a.75.75 0 0 0-.75.75v.5c0 1 1.383 1.75 3.25 1.75s3.25-.75 3.25-1.75v-.5ZM14 8.745C14 7.78 13.217 7 12.25 7s-1.75.779-1.75 1.745a1.75 1.75 0 1 0 3.5 0ZM4 4.5A2.5 2.5 0 0 1 6.5 2H18a2.5 2.5 0 0 1 2.5 2.5v14.25a.75.75 0 0 1-.75.75H5.5a1 1 0 0 0 1 1h13.25a.75.75 0 0 1 0 1.5H6.5A2.5 2.5 0 0 1 4 19.5v-15Zm1.5 0V18H19V4.5a1 1 0 0 0-1-1H6.5a1 1 0 0 0-1 1Z",
+  "building-bank-outline": "M13.032 2.325a1.75 1.75 0 0 0-2.064 0L3.547 7.74c-.978.713-.473 2.26.736 2.26H4.5v5.8A2.75 2.75 0 0 0 3 18.25v1.5c0 .413.336.75.75.75h16.5a.75.75 0 0 0 .75-.75v-1.5a2.75 2.75 0 0 0-1.5-2.45V10h.217c1.21 0 1.713-1.547.736-2.26l-7.421-5.416Zm-1.18 1.211a.25.25 0 0 1 .295 0L18.95 8.5H5.05l6.803-4.964ZM18 10v5.5h-2V10h2Zm-3.5 0v5.5h-1.75V10h1.75Zm-3.25 0v5.5H9.5V10h1.75Zm-5.5 7h12.5c.69 0 1.25.56 1.25 1.25V19h-15v-.75c0-.69.56-1.25 1.25-1.25ZM6 15.5V10h2v5.5H6Z",
+  "call-outline": "m7.056 2.418 1.167-.351a2.75 2.75 0 0 1 3.302 1.505l.902 2.006a2.75 2.75 0 0 1-.633 3.139L10.3 10.11a.25.25 0 0 0-.078.155c-.044.397.225 1.17.845 2.245.451.781.86 1.33 1.207 1.637.242.215.375.261.432.245l2.01-.615a2.75 2.75 0 0 1 3.034 1.02l1.281 1.776a2.75 2.75 0 0 1-.339 3.605l-.886.84a3.75 3.75 0 0 1-3.587.889c-2.754-.769-5.223-3.093-7.435-6.924-2.215-3.836-2.992-7.14-2.276-9.913a3.75 3.75 0 0 1 2.548-2.652Zm.433 1.437a2.25 2.25 0 0 0-1.529 1.59c-.602 2.332.087 5.261 2.123 8.788 2.033 3.522 4.222 5.582 6.54 6.23a2.25 2.25 0 0 0 2.151-.534l.887-.84a1.25 1.25 0 0 0 .154-1.639l-1.28-1.775a1.25 1.25 0 0 0-1.38-.464l-2.015.617c-1.17.348-2.232-.593-3.372-2.568C9 11.93 8.642 10.9 8.731 10.099c.047-.416.24-.8.546-1.086l1.494-1.393a1.25 1.25 0 0 0 .288-1.427l-.902-2.006a1.25 1.25 0 0 0-1.5-.684l-1.168.352Z",
+  "chat-multiple-outline": "M9.562 3a7.5 7.5 0 0 0-6.798 10.673l-.724 2.842a1.25 1.25 0 0 0 1.504 1.524c.75-.18 1.903-.457 2.93-.702A7.5 7.5 0 1 0 9.561 3Zm-6 7.5a6 6 0 1 1 3.33 5.375l-.244-.121-.264.063c-.923.22-1.99.475-2.788.667l.69-2.708.07-.276-.13-.253a5.971 5.971 0 0 1-.664-2.747Zm11 10.5c-1.97 0-3.762-.759-5.1-2h.1c.718 0 1.415-.089 2.08-.257.865.482 1.86.757 2.92.757.96 0 1.866-.225 2.67-.625l.243-.121.264.063c.922.22 1.966.445 2.74.61-.175-.751-.414-1.756-.642-2.651l-.07-.276.13-.253a5.971 5.971 0 0 0 .665-2.747 5.995 5.995 0 0 0-2.747-5.042 8.44 8.44 0 0 0-.8-2.047 7.503 7.503 0 0 1 4.344 10.263c.253 1.008.509 2.1.671 2.803a1.244 1.244 0 0 1-1.467 1.5 132.62 132.62 0 0 1-2.913-.64 7.476 7.476 0 0 1-3.088.663Z",
+  "chat-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5ZM8.75 13h4.498a.75.75 0 0 1 .102 1.493l-.102.007H8.75a.75.75 0 0 1-.102-1.493L8.75 13h4.498H8.75Zm0-3.5h6.505a.75.75 0 0 1 .101 1.493l-.101.007H8.75a.75.75 0 0 1-.102-1.493L8.75 9.5h6.505H8.75Z",
+  "checkmark-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-1.25 9.94 4.47-4.47a.75.75 0 0 1 1.133.976l-.073.084-5 5a.75.75 0 0 1-.976.073l-.084-.073-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073 1.97 1.97 4.47-4.47-4.47 4.47Z",
+  "checkmark-outline": "M4.53 12.97a.75.75 0 0 0-1.06 1.06l4.5 4.5a.75.75 0 0 0 1.06 0l11-11a.75.75 0 0 0-1.06-1.06L8.5 16.94l-3.97-3.97Z",
+  "chevron-down-outline": "M4.22 8.47a.75.75 0 0 1 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z",
+  "chevron-left-outline": "M15.53 4.22a.75.75 0 0 1 0 1.06L8.81 12l6.72 6.72a.75.75 0 1 1-1.06 1.06l-7.25-7.25a.75.75 0 0 1 0-1.06l7.25-7.25a.75.75 0 0 1 1.06 0Z",
+  "chevron-right-outline": "M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z",
+  "chevron-up-outline": "M4.22 15.53a.75.75 0 0 0 1.06 0L12 8.81l6.72 6.72a.75.75 0 1 0 1.06-1.06l-7.25-7.25a.75.75 0 0 0-1.06 0l-7.25 7.25a.75.75 0 0 0 0 1.06Z",
+  "clipboard-outline": "M13.75 2a2.25 2.25 0 0 1 2.245 2.096L16 4.25c0-.085-.005-.168-.014-.25h1.764A2.25 2.25 0 0 1 20 6.25v13.5A2.25 2.25 0 0 1 17.75 22H6.25A2.25 2.25 0 0 1 4 19.75V6.25A2.25 2.25 0 0 1 6.25 4h1.764c-.007.058-.01.117-.013.176L8 4.25A2.25 2.25 0 0 1 10.25 2h3.5Zm0 4.5h-3.5a2.248 2.248 0 0 1-1.892-1.033l.021.033H6.25a.75.75 0 0 0-.75.75v13.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75V6.25a.75.75 0 0 0-.75-.75h-2.129l.021-.033A2.248 2.248 0 0 1 13.75 6.5Zm0-3h-3.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5Z",
+  "cloud-backup-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-6-1.793V19.5a.5.5 0 0 0 1 0v-4.793l1.646 1.647a.5.5 0 0 0 .708-.708l-2.5-2.5a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 0 0 .708.708L16 14.707Z",
+  "cloud-outline": "M6.087 9.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 0 8H6a4 4 0 0 1 0-8h.087ZM11.75 6.5a4.25 4.25 0 0 0-4.245 4.037.75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h11.5a2.5 2.5 0 0 0 0-5h-.756a.75.75 0 0 1-.75-.713A4.25 4.25 0 0 0 11.75 6.5Z",
+  "code-outline": "m8.066 18.943 6.5-14.5a.75.75 0 0 1 1.404.518l-.036.096-6.5 14.5a.75.75 0 0 1-1.404-.518l.036-.096 6.5-14.5-6.5 14.5ZM2.22 11.47l4.25-4.25a.75.75 0 0 1 1.133.976l-.073.085L3.81 12l3.72 3.719a.75.75 0 0 1-.976 1.133l-.084-.073-4.25-4.25a.75.75 0 0 1-.073-.976l.073-.084 4.25-4.25-4.25 4.25Zm14.25-4.25a.75.75 0 0 1 .976-.073l.084.073 4.25 4.25a.75.75 0 0 1 .073.976l-.073.085-4.25 4.25a.75.75 0 0 1-1.133-.977l.073-.084L20.19 12l-3.72-3.72a.75.75 0 0 1 0-1.06Z",
+  "contact-card-group-outline": "M18.75 4A3.25 3.25 0 0 1 22 7.25v9.505a3.25 3.25 0 0 1-3.25 3.25H5.25A3.25 3.25 0 0 1 2 16.755V7.25a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5Zm0 1.5H5.25l-.144.006A1.75 1.75 0 0 0 3.5 7.25v9.505c0 .966.784 1.75 1.75 1.75h13.5a1.75 1.75 0 0 0 1.75-1.75V7.25a1.75 1.75 0 0 0-1.75-1.75Zm-9.497 7a.75.75 0 0 1 .75.75v.582c0 1.272-.969 1.918-2.502 1.918S5 15.104 5 13.831v-.581a.75.75 0 0 1 .75-.75h3.503Zm1.58-.001 1.417.001a.75.75 0 0 1 .75.75v.333c0 .963-.765 1.417-1.875 1.417-.116 0-.229-.005-.337-.015a2.85 2.85 0 0 0 .206-.9l.009-.253v-.582c0-.269-.061-.524-.17-.751Zm4.417.001h3a.75.75 0 0 1 .102 1.493L18.25 14h-3a.75.75 0 0 1-.102-1.493l.102-.007h3-3Zm-7.75-4a1.5 1.5 0 1 1 0 3.001 1.5 1.5 0 0 1 0-3.001Zm3.87.502a1.248 1.248 0 1 1 0 2.496 1.248 1.248 0 0 1 0-2.496Zm3.88.498h3a.75.75 0 0 1 .102 1.493L18.25 11h-3a.75.75 0 0 1-.102-1.493l.102-.007h3-3Z",
+  "delete-outline": "M12 1.75a3.25 3.25 0 0 1 3.245 3.066L15.25 5h5.25a.75.75 0 0 1 .102 1.493L20.5 6.5h-.796l-1.28 13.02a2.75 2.75 0 0 1-2.561 2.474l-.176.006H8.313a2.75 2.75 0 0 1-2.714-2.307l-.023-.174L4.295 6.5H3.5a.75.75 0 0 1-.743-.648L2.75 5.75a.75.75 0 0 1 .648-.743L3.5 5h5.25A3.25 3.25 0 0 1 12 1.75Zm6.197 4.75H5.802l1.267 12.872a1.25 1.25 0 0 0 1.117 1.122l.127.006h7.374c.6 0 1.109-.425 1.225-1.002l.02-.126L18.196 6.5ZM13.75 9.25a.75.75 0 0 1 .743.648L14.5 10v7a.75.75 0 0 1-1.493.102L13 17v-7a.75.75 0 0 1 .75-.75Zm-3.5 0a.75.75 0 0 1 .743.648L11 10v7a.75.75 0 0 1-1.493.102L9.5 17v-7a.75.75 0 0 1 .75-.75Zm1.75-6a1.75 1.75 0 0 0-1.744 1.606L10.25 5h3.5A1.75 1.75 0 0 0 12 3.25Z",
+  "dismiss-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm3.446 4.897.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 12l2.47 2.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-2.47 2.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L10.939 12l-2.47-2.47a.75.75 0 0 1-.072-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l2.47-2.47a.75.75 0 0 1 .976-.072Z",
+  "dismiss-outline": "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",
+  "document-outline": "M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10Zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621Zm5.914 3.793-5.829-5.828c-.026-.026-.058-.046-.085-.07a2.072 2.072 0 0 0-.219-.18c-.04-.027-.086-.045-.128-.068-.071-.04-.141-.084-.216-.116a1.977 1.977 0 0 0-.624-.138C12.266 2.011 12.22 2 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414Z",
+  "edit-outline": "M21.03 2.97a3.578 3.578 0 0 1 0 5.06L9.062 20a2.25 2.25 0 0 1-.999.58l-5.116 1.395a.75.75 0 0 1-.92-.921l1.395-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.578 3.578 0 0 1 5.06 0ZM15 6.06 5.062 16a.75.75 0 0 0-.193.333l-1.05 3.85 3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9 15 6.06Zm2.03-2.03-.97.97L19 7.94l.97-.97a2.079 2.079 0 0 0-2.94-2.94Z",
+  "emoji-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5ZM8.462 14.784A4.491 4.491 0 0 0 12 16.502a4.492 4.492 0 0 0 3.535-1.714.75.75 0 1 1 1.177.93A5.991 5.991 0 0 1 12 18.002a5.991 5.991 0 0 1-4.716-2.29.75.75 0 0 1 1.178-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z",
+  "error-circle-outline": "M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm-.001 10.835a.999.999 0 1 1 0 1.998.999.999 0 0 1 0-1.998ZM11.994 7a.75.75 0 0 1 .744.648l.007.101.004 4.502a.75.75 0 0 1-1.493.103l-.007-.102-.004-4.501a.75.75 0 0 1 .75-.751Z",
+  "filter-outline": "M13.5 16a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h3Zm3-5a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1 0-1.5h9Zm3-5a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1 0-1.5h15Z",
+  "flash-on-outline": "m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Zm4.745-5.487a.75.75 0 0 0 .711.987h3.74l-8.824 9.196 1.316-5.264a.75.75 0 0 0-.727-.932h-2.51l2.57-9h5.394l-1.67 5.013Z",
+  "folder-outline": "M8.207 4c.46 0 .908.141 1.284.402l.156.12L12.022 6.5h7.728a2.25 2.25 0 0 1 2.229 1.938l.016.158.005.154v9a2.25 2.25 0 0 1-2.096 2.245L19.75 20H4.25a2.25 2.25 0 0 1-2.245-2.096L2 17.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h3.957Zm1.44 5.979a2.25 2.25 0 0 1-1.244.512l-.196.009-4.707-.001v7.251c0 .38.282.694.648.743l.102.007h15.5a.75.75 0 0 0 .743-.648l.007-.102v-9a.75.75 0 0 0-.648-.743L19.75 8h-7.729L9.647 9.979ZM8.207 5.5H4.25a.75.75 0 0 0-.743.648L3.5 6.25v2.749L8.207 9a.75.75 0 0 0 .395-.113l.085-.06 1.891-1.578-1.89-1.575a.75.75 0 0 0-.377-.167L8.207 5.5Z",
+  "globe-desktop-outline": "M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z",
+  "headphones-sound-wave-outline": "M3.5 12a8.5 8.5 0 0 1 17 0v2h-2.25a.75.75 0 0 0-.75.75v6.5c0 .414.336.75.75.75H19a3 3 0 0 0 3-3v-7c0-5.523-4.477-10-10-10S2 6.477 2 12v7a3 3 0 0 0 3 3h.75a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75H3.5v-2Zm17 3.5V19a1.5 1.5 0 0 1-1.5 1.5v-5h1.5ZM3.5 19v-3.5H5v5A1.5 1.5 0 0 1 3.5 19Zm9.25-7.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Zm-4 2.25a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5a.75.75 0 0 1 .75-.75Zm7.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z",
+  "image-outline": "M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z",
+  "info-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5Zm-.004 7a.75.75 0 0 1 .744.648l.007.102.003 5.502a.75.75 0 0 1-1.493.102l-.007-.101-.003-5.502a.75.75 0 0 1 .75-.75ZM12 7.003a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997Z",
+  "link-outline": "M9.25 7a.75.75 0 0 1 .11 1.492l-.11.008H7a3.5 3.5 0 0 0-.206 6.994L7 15.5h2.25a.75.75 0 0 1 .11 1.492L9.25 17H7a5 5 0 0 1-.25-9.994L7 7h2.25ZM17 7a5 5 0 0 1 .25 9.994L17 17h-2.25a.75.75 0 0 1-.11-1.492l.11-.008H17a3.5 3.5 0 0 0 .206-6.994L17 8.5h-2.25a.75.75 0 0 1-.11-1.492L14.75 7H17ZM7 11.25h10a.75.75 0 0 1 .102 1.493L17 12.75H7a.75.75 0 0 1-.102-1.493L7 11.25h10H7Z",
+  "list-outline": "M2.75 18h12.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.494L2.75 18h12.5-12.5Zm0-6.5h18.5a.75.75 0 0 1 .102 1.493L21.25 13H2.75a.75.75 0 0 1-.102-1.493l.102-.007h18.5-18.5Zm0-6.497h15.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.493l.102-.007h15.5-15.5Z",
+  "location-outline": "M5.843 4.568a8.707 8.707 0 1 1 12.314 12.314l-1.187 1.174c-.875.858-2.01 1.962-3.406 3.312a2.25 2.25 0 0 1-3.128 0l-3.491-3.396c-.439-.431-.806-.794-1.102-1.09a8.707 8.707 0 0 1 0-12.314Zm11.253 1.06A7.207 7.207 0 1 0 6.904 15.822L8.39 17.29a753.98 753.98 0 0 0 3.088 3 .75.75 0 0 0 1.043 0l3.394-3.3c.47-.461.863-.85 1.18-1.168a7.207 7.207 0 0 0 0-10.192ZM12 7.999a3.002 3.002 0 1 1 0 6.004 3.002 3.002 0 0 1 0-6.003Zm0 1.5a1.501 1.501 0 1 0 0 3.004 1.501 1.501 0 0 0 0-3.003Z",
+  "lock-closed-outline": "M12 2a4 4 0 0 1 4 4v2h1.75A2.25 2.25 0 0 1 20 10.25v9.5A2.25 2.25 0 0 1 17.75 22H6.25A2.25 2.25 0 0 1 4 19.75v-9.5A2.25 2.25 0 0 1 6.25 8H8V6a4 4 0 0 1 4-4Zm5.75 7.5H6.25a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75Zm-5.75 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-10A2.5 2.5 0 0 0 9.5 6v2h5V6A2.5 2.5 0 0 0 12 3.5Z",
+  "mail-inbox-all-outline": "M6.25 3h11.5a3.25 3.25 0 0 1 3.245 3.066L21 6.25v11.5a3.25 3.25 0 0 1-3.066 3.245L17.75 21H6.25a3.25 3.25 0 0 1-3.245-3.066L3 17.75V6.25a3.25 3.25 0 0 1 3.066-3.245L6.25 3Zm2.075 11.5H4.5v3.25a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V14.5h-3.825a3.752 3.752 0 0 1-3.475 2.995l-.2.005a3.752 3.752 0 0 1-3.632-2.812l-.043-.188Zm9.425-10H6.25a1.75 1.75 0 0 0-1.744 1.606L4.5 6.25V13H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.495.154l.005-.154a.75.75 0 0 1 .648-.743L15 13h4.5V6.25a1.75 1.75 0 0 0-1.607-1.744L17.75 4.5Zm-11 5h10.5a.75.75 0 0 1 .102 1.493L17.25 11H6.75a.75.75 0 0 1-.102-1.493L6.75 9.5h10.5-10.5Zm0-3h10.5a.75.75 0 0 1 .102 1.493L17.25 8H6.75a.75.75 0 0 1-.102-1.493L6.75 6.5h10.5-10.5Z",
+  "mail-outline":"M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z",
+  "map-outline": "m9.203 4 .047-.002.046.001a.73.73 0 0 1 .067.007l.016.004c.086.014.17.044.252.092l.051.034 5.07 3.565L19.82 4.14a.75.75 0 0 1 1.174.51l.007.104v10.632a.75.75 0 0 1-.238.548l-.08.066-5.5 3.866a.744.744 0 0 1-.828.023L9.25 16.297l-5.07 3.565a.75.75 0 0 1-1.174-.51l-.007-.104V8.616a.75.75 0 0 1 .238-.548l.08-.066 5.5-3.866a.762.762 0 0 1 .2-.101l.122-.028.064-.008Zm10.298 2.197-4 2.812v8.799l4-2.812v-8.8ZM8.5 6.193l-4 2.812v8.8l4-2.813V6.193Zm1.502 0v8.8l4 2.811V9.005l-4-2.812Z",
+  "megaphone-outline":"M21.907 5.622c.062.208.093.424.093.641V17.74a2.25 2.25 0 0 1-2.891 2.156l-5.514-1.64a4.002 4.002 0 0 1-7.59-1.556L6 16.5l-.001-.5-2.39-.711A2.25 2.25 0 0 1 2 13.131V10.87a2.25 2.25 0 0 1 1.61-2.156l15.5-4.606a2.25 2.25 0 0 1 2.797 1.515ZM7.499 16.445l.001.054a2.5 2.5 0 0 0 4.624 1.321l-4.625-1.375Zm12.037-10.9-15.5 4.605a.75.75 0 0 0-.536.72v2.261a.75.75 0 0 0 .536.72l15.5 4.607a.75.75 0 0 0 .964-.72V6.264a.75.75 0 0 0-.964-.719Z",
+  "merge-outline": "M3 6.75A.75.75 0 0 1 3.75 6h4.5a.75.75 0 0 1 .53.22L13.56 11h5.878L15.72 7.28a.75.75 0 1 1 1.06-1.06l4.998 5a.75.75 0 0 1 0 1.06l-4.998 5a.75.75 0 1 1-1.06-1.06l3.718-3.72H13.56l-4.78 4.78a.75.75 0 0 1-.531.22h-4.5a.75.75 0 0 1 0-1.5h4.19l4.25-4.25L7.94 7.5H3.75A.75.75 0 0 1 3 6.75Z",
+  "more-horizontal-outline": "M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM13.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z",
+  "more-vertical-outline": "M12 7.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM12 13.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM10.25 18a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Z",
+  "number-symbol-outline": "M10.987 2.89a.75.75 0 1 0-1.474-.28L8.494 7.999 3.75 8a.75.75 0 1 0 0 1.5l4.46-.002-.946 5-4.514.002a.75.75 0 0 0 0 1.5l4.23-.002-.967 5.116a.75.75 0 1 0 1.474.278l1.02-5.395 5.474-.002-.968 5.119a.75.75 0 1 0 1.474.278l1.021-5.398 4.742-.002a.75.75 0 1 0 0-1.5l-4.458.002.946-5 4.512-.002a.75.75 0 1 0 0-1.5l-4.229.002.966-5.104a.75.75 0 0 0-1.474-.28l-1.018 5.385-5.474.002.966-5.107Zm-1.25 6.608 5.474-.003-.946 5-5.474.002.946-5Z",
+  "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
+  "people-outline": "M4 13.999 13 14a2 2 0 0 1 1.995 1.85L15 16v1.5C14.999 21 11.284 22 8.5 22c-2.722 0-6.335-.956-6.495-4.27L2 17.5v-1.501c0-1.054.816-1.918 1.85-1.995L4 14ZM15.22 14H20c1.054 0 1.918.816 1.994 1.85L22 16v1c-.001 3.062-2.858 4-5 4a7.16 7.16 0 0 1-2.14-.322c.336-.386.607-.827.802-1.327A6.19 6.19 0 0 0 17 19.5l.267-.006c.985-.043 3.086-.363 3.226-2.289L20.5 17v-1a.501.501 0 0 0-.41-.492L20 15.5h-4.051a2.957 2.957 0 0 0-.595-1.34L15.22 14H20h-4.78ZM4 15.499l-.1.01a.51.51 0 0 0-.254.136.506.506 0 0 0-.136.253l-.01.101V17.5c0 1.009.45 1.722 1.417 2.242.826.445 2.003.714 3.266.753l.317.005.317-.005c1.263-.039 2.439-.308 3.266-.753.906-.488 1.359-1.145 1.412-2.057l.005-.186V16a.501.501 0 0 0-.41-.492L13 15.5l-9-.001ZM8.5 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm9 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm-9-.5c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3Zm9 2c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2Z",
+  "people-team-outline": "M14.754 10c.966 0 1.75.784 1.75 1.75v4.749a4.501 4.501 0 0 1-9.002 0V11.75c0-.966.783-1.75 1.75-1.75h5.502Zm0 1.5H9.252a.25.25 0 0 0-.25.25v4.749a3.001 3.001 0 0 0 6.002 0V11.75a.25.25 0 0 0-.25-.25ZM3.75 10h3.381a2.738 2.738 0 0 0-.618 1.5H3.75a.25.25 0 0 0-.25.25v3.249a2.501 2.501 0 0 0 3.082 2.433c.085.504.24.985.453 1.432A4.001 4.001 0 0 1 2 14.999V11.75c0-.966.784-1.75 1.75-1.75Zm13.125 0h3.375c.966 0 1.75.784 1.75 1.75V15a4 4 0 0 1-5.03 3.866c.214-.448.369-.929.455-1.433A2.5 2.5 0 0 0 20.5 15v-3.25a.25.25 0 0 0-.25-.25h-2.757a2.738 2.738 0 0 0-.618-1.5ZM12 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm6.5 1a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm6.5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6.5 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-13 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
+  "person-outline": "M17.754 14a2.249 2.249 0 0 1 2.25 2.249v.575c0 .894-.32 1.76-.902 2.438-1.57 1.834-3.957 2.739-7.102 2.739-3.146 0-5.532-.905-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.577a2.249 2.249 0 0 1 2.249-2.25h11.501Zm0 1.5H6.253a.749.749 0 0 0-.75.749v.577c0 .536.192 1.054.54 1.461 1.253 1.468 3.219 2.214 5.957 2.214s4.706-.746 5.962-2.214a2.25 2.25 0 0 0 .541-1.463v-.575a.749.749 0 0 0-.749-.75ZM12 2.004a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z",
+  "quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",
+  "resize-large-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5A3.25 3.25 0 0 1 6.25 3h1.5a.75.75 0 0 1 0 1.5h-1.5ZM19.5 6.25a1.75 1.75 0 0 0-1.75-1.75h-1.5a.75.75 0 0 1 0-1.5h1.5A3.25 3.25 0 0 1 21 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5ZM19.5 17.75a1.75 1.75 0 0 1-1.75 1.75h-1.5a.75.75 0 0 0 0 1.5h1.5A3.25 3.25 0 0 0 21 17.75v-1.5a.75.75 0 0 0-1.5 0v1.5ZM4.5 17.75c0 .966.784 1.75 1.75 1.75h1.5a.75.75 0 0 1 0 1.5h-1.5A3.25 3.25 0 0 1 3 17.75v-1.5a.75.75 0 0 1 1.5 0v1.5ZM8.25 6A2.25 2.25 0 0 0 6 8.25v7.5A2.25 2.25 0 0 0 8.25 18h7.5A2.25 2.25 0 0 0 18 15.75v-7.5A2.25 2.25 0 0 0 15.75 6h-7.5ZM7.5 8.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75v-7.5Z",
+  "search-outline": "M10 2.75a7.25 7.25 0 0 1 5.63 11.819l4.9 4.9a.75.75 0 0 1-.976 1.134l-.084-.073-4.901-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z",
+  "send-outline": "M5.694 12 2.299 3.272c-.236-.607.356-1.188.942-.982l.093.04 18 9a.75.75 0 0 1 .097 1.283l-.097.058-18 9c-.583.291-1.217-.244-1.065-.847l.03-.096L5.694 12 2.299 3.272 5.694 12ZM4.402 4.54l2.61 6.71h6.627a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.649.743l-.101.007H7.01l-2.609 6.71L19.322 12 4.401 4.54Z",
+  "settings-outline": "M12.012 2.25c.734.008 1.465.093 2.182.253a.75.75 0 0 1 .582.649l.17 1.527a1.384 1.384 0 0 0 1.927 1.116l1.401-.615a.75.75 0 0 1 .85.174 9.792 9.792 0 0 1 2.204 3.792.75.75 0 0 1-.271.825l-1.242.916a1.381 1.381 0 0 0 0 2.226l1.243.915a.75.75 0 0 1 .272.826 9.797 9.797 0 0 1-2.204 3.792.75.75 0 0 1-.848.175l-1.407-.617a1.38 1.38 0 0 0-1.926 1.114l-.169 1.526a.75.75 0 0 1-.572.647 9.518 9.518 0 0 1-4.406 0 .75.75 0 0 1-.572-.647l-.168-1.524a1.382 1.382 0 0 0-1.926-1.11l-1.406.616a.75.75 0 0 1-.849-.175 9.798 9.798 0 0 1-2.204-3.796.75.75 0 0 1 .272-.826l1.243-.916a1.38 1.38 0 0 0 0-2.226l-1.243-.914a.75.75 0 0 1-.271-.826 9.793 9.793 0 0 1 2.204-3.792.75.75 0 0 1 .85-.174l1.4.615a1.387 1.387 0 0 0 1.93-1.118l.17-1.526a.75.75 0 0 1 .583-.65c.717-.159 1.45-.243 2.201-.252Zm0 1.5a9.135 9.135 0 0 0-1.354.117l-.109.977A2.886 2.886 0 0 1 6.525 7.17l-.898-.394a8.293 8.293 0 0 0-1.348 2.317l.798.587a2.881 2.881 0 0 1 0 4.643l-.799.588c.32.842.776 1.626 1.348 2.322l.905-.397a2.882 2.882 0 0 1 4.017 2.318l.11.984c.889.15 1.798.15 2.687 0l.11-.984a2.881 2.881 0 0 1 4.018-2.322l.905.396a8.296 8.296 0 0 0 1.347-2.318l-.798-.588a2.881 2.881 0 0 1 0-4.643l.796-.587a8.293 8.293 0 0 0-1.348-2.317l-.896.393a2.884 2.884 0 0 1-4.023-2.324l-.11-.976a8.988 8.988 0 0 0-1.333-.117ZM12 8.25a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm0 1.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z",
+  "share-outline": "M6.747 4h3.464a.75.75 0 0 1 .102 1.493l-.102.007H6.747a2.25 2.25 0 0 0-2.245 2.096l-.005.154v9.5a2.25 2.25 0 0 0 2.096 2.245l.154.005h9.5a2.25 2.25 0 0 0 2.245-2.096l.005-.154v-.498a.75.75 0 0 1 1.494-.101l.006.101v.498a3.75 3.75 0 0 1-3.55 3.745l-.2.005h-9.5a3.75 3.75 0 0 1-3.745-3.55l-.005-.2v-9.5a3.75 3.75 0 0 1 3.55-3.745l.2-.005h3.464-3.464ZM14.5 6.52V3.75a.75.75 0 0 1 1.187-.61l.082.069 5.994 5.75c.28.268.306.7.077.997l-.077.085-5.994 5.752a.75.75 0 0 1-1.262-.434l-.007-.107v-2.725l-.344.03c-2.4.25-4.7 1.33-6.914 3.26-.52.453-1.323.025-1.237-.658.664-5.32 3.446-8.252 8.195-8.62l.3-.02V3.75v2.77ZM16 5.509V7.25a.75.75 0 0 1-.75.75c-3.874 0-6.274 1.676-7.312 5.157l-.079.279.352-.237C10.45 11.737 12.798 11 15.251 11a.75.75 0 0 1 .743.648l.007.102v1.743L20.16 9.5l-4.16-3.991Z",
+  "sound-source-outline": "M3.5 12a8.5 8.5 0 1 1 14.762 5.748l.992 1.135A9.966 9.966 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12a9.966 9.966 0 0 0 2.746 6.883l.993-1.134A8.47 8.47 0 0 1 3.5 12Z M19.25 12.125a7.098 7.098 0 0 1-1.783 4.715l-.998-1.14a5.625 5.625 0 1 0-8.806-.15l-1.004 1.146a7.125 7.125 0 1 1 12.59-4.571Z M16.25 12a4.23 4.23 0 0 1-.821 2.511l-1.026-1.172a2.75 2.75 0 1 0-4.806 0L8.571 14.51A4.25 4.25 0 1 1 16.25 12Z M12.564 12.756a.75.75 0 0 0-1.128 0l-7 8A.75.75 0 0 0 5 22h14a.75.75 0 0 0 .564-1.244l-7-8Zm4.783 7.744H6.653L12 14.389l5.347 6.111Z",
+  "speaker-1-outline": "M14.704 3.442c.191.226.296.512.296.808v15.502a1.25 1.25 0 0 1-2.058.954L7.975 16.5H4.25A2.25 2.25 0 0 1 2 14.25v-4.5A2.25 2.25 0 0 1 4.25 7.5h3.725l4.968-4.204a1.25 1.25 0 0 1 1.761.147ZM13.5 4.79 8.525 9H4.25a.75.75 0 0 0-.75.75v4.5c0 .415.336.75.75.75h4.275l4.975 4.213V4.79Zm3.604 3.851a.75.75 0 0 1 1.03.25c.574.94.862 1.992.862 3.14 0 1.149-.288 2.201-.862 3.141a.75.75 0 1 1-1.28-.781c.428-.702.642-1.483.642-2.36 0-.876-.214-1.657-.642-2.359a.75.75 0 0 1 .25-1.03Z",
+  "speaker-mute-outline" :"M12.92 3.316c.806-.717 2.08-.145 2.08.934v15.496c0 1.078-1.274 1.65-2.08.934l-4.492-3.994a.75.75 0 0 0-.498-.19H4.25A2.25 2.25 0 0 1 2 14.247V9.75a2.25 2.25 0 0 1 2.25-2.25h3.68a.75.75 0 0 0 .498-.19l4.491-3.993Zm.58 1.49L9.425 8.43A2.25 2.25 0 0 1 7.93 9H4.25a.75.75 0 0 0-.75.75v4.497c0 .415.336.75.75.75h3.68a2.25 2.25 0 0 1 1.495.57l4.075 3.623V4.807ZM16.22 9.22a.75.75 0 0 1 1.06 0L19 10.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L20.06 12l1.72 1.72a.75.75 0 1 1-1.06 1.06L19 13.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L17.94 12l-1.72-1.72a.75.75 0 0 1 0-1.06Z",
+  "star-emphasis-outline": "M13.209 3.103c-.495-1.004-1.926-1.004-2.421 0L8.43 7.88l-5.273.766c-1.107.161-1.55 1.522-.748 2.303l3.815 3.72-.9 5.25c-.19 1.103.968 1.944 1.959 1.424l4.715-2.48 4.716 2.48c.99.52 2.148-.32 1.96-1.424l-.902-5.25 3.816-3.72c.8-.78.359-2.142-.748-2.303l-5.273-.766-2.358-4.777ZM9.74 8.615l2.258-4.576 2.259 4.576a1.35 1.35 0 0 0 1.016.738l5.05.734-3.654 3.562a1.35 1.35 0 0 0-.388 1.195l.862 5.03-4.516-2.375a1.35 1.35 0 0 0-1.257 0l-4.516 2.374.862-5.029a1.35 1.35 0 0 0-.388-1.195l-3.654-3.562 5.05-.734c.44-.063.82-.34 1.016-.738ZM1.164 3.782a.75.75 0 0 0 .118 1.054l2.5 2a.75.75 0 1 0 .937-1.172l-2.5-2a.75.75 0 0 0-1.055.118Z M22.836 18.218a.75.75 0 0 0-.117-1.054l-2.5-2a.75.75 0 0 0-.938 1.172l2.5 2a.75.75 0 0 0 1.055-.117ZM1.282 17.164a.75.75 0 1 0 .937 1.172l2.5-2a.75.75 0 0 0-.937-1.172l-2.5 2ZM22.836 3.782a.75.75 0 0 1-.117 1.054l-2.5 2a.75.75 0 0 1-.938-1.172l2.5-2a.75.75 0 0 1 1.055.118Z",
+  "tag-outline": "M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z",
+  "video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
+  "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
+
+  "brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
+  "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
+  "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
+  "brand-line-outline": "M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314",
+  "brand-sms-outline": "M272.1 204.2v71.1c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.1 0-2.1-.6-2.6-1.3l-32.6-44v42.2c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.8 0-3.2-1.4-3.2-3.2v-71.1c0-1.8 1.4-3.2 3.2-3.2H219c1 0 2.1 .5 2.6 1.4l32.6 44v-42.2c0-1.8 1.4-3.2 3.2-3.2h11.4c1.8-.1 3.3 1.4 3.3 3.1zm-82-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 1.8 1.4 3.2 3.2 3.2h11.4c1.8 0 3.2-1.4 3.2-3.2v-71.1c0-1.7-1.4-3.2-3.2-3.2zm-27.5 59.6h-31.1v-56.4c0-1.8-1.4-3.2-3.2-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 .9 .3 1.6 .9 2.2 .6 .5 1.3 .9 2.2 .9h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.7-1.4-3.2-3.1-3.2zM332.1 201h-45.7c-1.7 0-3.2 1.4-3.2 3.2v71.1c0 1.7 1.4 3.2 3.2 3.2h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2V234c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2v-11.4c-.1-1.7-1.5-3.2-3.2-3.2zM448 113.7V399c-.1 44.8-36.8 81.1-81.7 81H81c-44.8-.1-81.1-36.9-81-81.7V113c.1-44.8 36.9-81.1 81.7-81H367c44.8 .1 81.1 36.8 81 81.7zm-61.6 122.6c0-73-73.2-132.4-163.1-132.4-89.9 0-163.1 59.4-163.1 132.4 0 65.4 58 120.2 136.4 130.6 19.1 4.1 16.9 11.1 12.6 36.8-.7 4.1-3.3 16.1 14.1 8.8 17.4-7.3 93.9-55.3 128.2-94.7 23.6-26 34.9-52.3 34.9-81.5z",
+  "brand-telegram-outline":"M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
+  "brand-linkedin-outline": "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
+
+  "add-solid": "M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z",
+  "subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
+  "checkmark-circle-solid": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"
+}
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index be5fb4fa3..fbd4c91bf 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -40,10 +40,11 @@
                   >
                     {{ option.name }}
                   </span>
-                  <i
+                  <fluent-icon
                     v-if="option.id === (selectedItem && selectedItem.id)"
-                    class="icon ion-checkmark-round"
-                  />
+                    icon="checkmark"
+                  >
+                  </fluent-icon>
                 </div>
               </div>
             </woot-button>
@@ -61,6 +62,7 @@
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
 export default {
   components: {
     WootDropdownItem,
diff --git a/app/javascript/shared/components/ui/dropdown/AddLabel.vue b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
index 9b75d2702..8d5b0785d 100644
--- a/app/javascript/shared/components/ui/dropdown/AddLabel.vue
+++ b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
@@ -3,7 +3,7 @@
     <woot-label
       color-scheme="secondary"
       :title="$t('CONTACT_PANEL.LABELS.CONVERSATION.ADD_BUTTON')"
-      icon="ion-plus-round"
+      icon="add-circle"
     />
   </woot-button>
 </template>