diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index b34e1b0a0bb..be110a8881d 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.MessagingMenu" owl="1">
         <div class="o_MessagingMenu dropdown" t-att-class="{ 'show': messagingMenu ? messagingMenu.isOpen : false, 'o-mobile': messaging ? messaging.device.isMobile : false }" t-attf-class="{{ className }}" t-ref="root">
             <a class="o_MessagingMenu_toggler dropdown-toggle o-no-caret o-dropdown--narrow" t-att-class="{ 'o-no-notification': messagingMenu ? !messagingMenu.counter : false }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu and messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="_onClickToggler">
-                <i class="o_MessagingMenu_icon oi oi-large oi-discuss" role="img" aria-label="Messages"/>
+                <i class="o_MessagingMenu_icon fa fa-lg fa-comments" role="img" aria-label="Messages"/>
                 <t t-if="!messagingMenu or !messaging.isInitialized">
                     <i class="o_MessagingMenu_loading fa fa-circle-o-notch fa-spin"/>
                 </t>
diff --git a/addons/mail/static/src/components/messaging_menu/tests/messaging_menu_tests.js b/addons/mail/static/src/components/messaging_menu/tests/messaging_menu_tests.js
index 04e1cacb313..0e7ebe0b064 100644
--- a/addons/mail/static/src/components/messaging_menu/tests/messaging_menu_tests.js
+++ b/addons/mail/static/src/components/messaging_menu/tests/messaging_menu_tests.js
@@ -152,7 +152,7 @@ QUnit.test('basic rendering', async function (assert) {
         "should have icon on clickable element in messaging menu"
     );
     assert.ok(
-        document.querySelector(`.o_MessagingMenu_icon`).classList.contains('oi-discuss'),
+        document.querySelector(`.o_MessagingMenu_icon`).classList.contains('fa-comments'),
         "should have 'comments' icon on clickable element in messaging menu"
     );
     assert.strictEqual(
diff --git a/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml b/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
index f1965be2e45..8ccada1dd1e 100644
--- a/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
+++ b/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
@@ -9,10 +9,10 @@
                     <t t-set="title">Open conference: <t t-esc="messaging.rtc.channel.displayName"/></t>
                     <a class="o_RtcActivityNotice_button px-3 user-select-none dropdown-toggle o-no-caret o-dropdown--narrow" t-att-title="title" role="button" t-on-click="_onClick">
                         <div class="o_RtcActivityNotice_buttonContent d-flex align-items-center">
-                            <i class="o_RtcActivityNotice_outputIndicator oi oi-large" t-att-class="{
-                                'oi-phone--voice': !messaging.rtc.sendDisplay and !messaging.rtc.sendUserVideo,
-                                'oi-video': messaging.rtc.sendUserVideo,
-                                'oi-screen': messaging.rtc.sendDisplay,
+                            <i class="o_RtcActivityNotice_outputIndicator fa fa-lg" t-att-class="{
+                                'fa-microphone': !messaging.rtc.sendDisplay and !messaging.rtc.sendUserVideo,
+                                'fa-video-camera': messaging.rtc.sendUserVideo,
+                                'fa-desktop': messaging.rtc.sendDisplay,
                             }"/>
                             <em class="o_RtcActivityNotice_buttonTitle text-truncate" t-esc="messaging.rtc.channel.displayName"/>
                         </div>
diff --git a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
index 0900cd585a1..397f83315e5 100644
--- a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
+++ b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
@@ -51,12 +51,12 @@
                         <div class="o_RtcCallParticipantCard_overlayTop">
                             <t t-if="callParticipantCard.rtcSession.isSelfMuted and !callParticipantCard.rtcSession.isDeaf">
                                 <span class="o_RtcCallParticipantCard_overlayTopElement" t-att-class="{'o-isMinimized': callParticipantCard.isMinimized }" title="muted" aria-label="muted">
-                                    <i class="oi oi-microphone--off--filled"/>
+                                    <i class="fa fa-microphone-slash"/>
                                 </span>
                             </t>
                             <t t-if="callParticipantCard.rtcSession.isDeaf">
                                 <span class="o_RtcCallParticipantCard_overlayTopElement" t-att-class="{'o-isMinimized': callParticipantCard.isMinimized }" title="deaf" aria-label="deaf">
-                                    <i class="oi oi-volume--mute--filled"/>
+                                    <i class="fa fa-deaf"/>
                                 </span>
                             </t>
                             <t t-if="callParticipantCard.rtcSession.channel.rtc and callParticipantCard.rtcSession.isAudioInError">
diff --git a/addons/mail/static/src/components/rtc_controller/rtc_controller.xml b/addons/mail/static/src/components/rtc_controller/rtc_controller.xml
index c8a08c6565e..bf26210adcb 100644
--- a/addons/mail/static/src/components/rtc_controller/rtc_controller.xml
+++ b/addons/mail/static/src/components/rtc_controller/rtc_controller.xml
@@ -16,8 +16,8 @@
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
                                 <i class="oi" t-att-class="{
                                     'oi-large': !rtcController.isSmall,
-                                    'oi-microphone--filled': !messaging.rtc.currentRtcSession.isMute,
-                                    'oi-microphone--off--filled': messaging.rtc.currentRtcSession.isMute,
+                                    'fa-microphone': !messaging.rtc.currentRtcSession.isMute,
+                                    'fa-microphone-slash': messaging.rtc.currentRtcSession.isMute,
                                     'text-danger': messaging.rtc.currentRtcSession.isMute,
                                 }"/>
                             </div>
@@ -32,8 +32,8 @@
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
                                 <i class="oi" t-att-class="{
                                     'oi-large': !rtcController.isSmall,
-                                    'oi-volume--up--filled': !messaging.rtc.currentRtcSession.isDeaf,
-                                    'oi-volume--mute--filled': messaging.rtc.currentRtcSession.isDeaf,
+                                    'fa-headphones: !messaging.rtc.currentRtcSession.isDeaf,
+                                    'fa-deaf': messaging.rtc.currentRtcSession.isDeaf,
                                     'text-danger': messaging.rtc.currentRtcSession.isDeaf,
                                 }"/>
                             </div>
@@ -49,7 +49,7 @@
                             t-att-title="cameraTitle"
                             t-on-click="rtcController.onClickCamera">
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
-                                <i class="oi oi-video--filled" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
+                                <i class="fa fa-video-camera" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
                             </div>
                         </button>
                         <t t-if="messaging.rtc.sendDisplay"><t t-set="displayTitle">Stop screen sharing</t></t>
@@ -63,7 +63,7 @@
                             t-att-title="displayTitle"
                             t-on-click="rtcController.onClickScreen">
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
-                                <i class="oi oi-screen" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
+                                <i class="fa fa-desktop" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
                             </div>
                         </button>
                         <Popover position="'top'">
@@ -73,7 +73,7 @@
                                 t-att-class="{ 'o-isSmall': rtcController.isSmall }"
                             >
                                 <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
-                                    <i class="oi oi-overflow-menu--horizontal" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
+                                    <i class="fa fa-ellipsis-h" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
                                 </div>
                             </button>
                             <t t-set-slot="opened">
@@ -89,7 +89,7 @@
                             t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
                             t-on-click="rtcController.onClickToggleVideoCall">
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
-                                <i class="oi oi-video--filled" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
+                                <i class="fa fa-video-camera" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
                             </div>
                         </button>
                     </t>
@@ -102,7 +102,7 @@
                                 t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
                                 t-on-click="rtcController.onClickRejectCall">
                                 <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
-                                    <i class="oi oi-phone--filled" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
+                                    <i class="fa fa-phone" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
                                 </div>
                             </button>
                         </t>
@@ -115,7 +115,7 @@
                             t-att-title="phoneTitle"
                             t-on-click="rtcController.onClickToggleAudioCall">
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
-                                <i class="oi oi-phone--filled" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
+                                <i class="fa fa-phone" t-att-class="{ 'oi-large': !rtcController.isSmall }"/>
                             </div>
                         </button>
                     </t>
diff --git a/addons/mail/static/src/js/views/activity/activity_view.js b/addons/mail/static/src/js/views/activity/activity_view.js
index 938c7dd5d4e..c631f17df8a 100644
--- a/addons/mail/static/src/js/views/activity/activity_view.js
+++ b/addons/mail/static/src/js/views/activity/activity_view.js
@@ -14,7 +14,7 @@ const _lt = core._lt;
 const ActivityView = BasicView.extend({
     accesskey: "a",
     display_name: _lt('Activity'),
-    icon: 'oi-event--schedule',
+    icon: 'fa fa-clock-o',
     config: _.extend({}, BasicView.prototype.config, {
         Controller: ActivityController,
         Model: ActivityModel,
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index 0ece9b059c4..2bb7df7440d 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -51,7 +51,7 @@
     <t t-name="mail.systray.ActivityMenu">
         <div class="o_mail_systray_item dropdown">
             <a class="dropdown-toggle o-no-caret o-dropdown--narrow" data-toggle="dropdown" data-display="static" aria-expanded="false" title="Activities" href="#" role="button">
-                <i class="oi oi-large oi-calendar" role="img" aria-label="Activities"/> <span class="o_notification_counter badge"/>
+                <i class="fa fa-lg fa-clock-o" role="img" aria-label="Activities"/> <span class="o_notification_counter badge"/>
             </a>
             <div class="o_mail_systray_dropdown dropdown-menu dropdown-menu-right" role="menu">
                 <div class="o_mail_systray_dropdown_items"/>
diff --git a/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff b/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff
index 5b17be18e0f..4aabae4df0d 100644
Binary files a/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff and b/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff differ
diff --git a/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2 b/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2
index 055a566c23f..3e567234bd5 100644
Binary files a/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2 and b/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2 differ
diff --git a/addons/web/static/lib/odoo_ui_icons/style.css b/addons/web/static/lib/odoo_ui_icons/style.css
index d2d1d314548..6162ee039d7 100644
--- a/addons/web/static/lib/odoo_ui_icons/style.css
+++ b/addons/web/static/lib/odoo_ui_icons/style.css
@@ -1,14 +1,13 @@
 @font-face {
   font-family: 'odoo_ui_icons';
-  src: url('fonts/odoo_ui_icons.woff2') format('woff2'), url('fonts/odoo_ui_icons.woff?wpto0f') format('woff');
+  src: url('fonts/odoo_ui_icons.woff2') format('woff2'), url('fonts/odoo_ui_icons.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 
 .oi {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'odoo_ui_icons' !important;
+  font-family: 'odoo_ui_icons';
   speak: never;
   font-style: normal;
   font-weight: normal;
@@ -21,321 +20,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.oi-odoo:before {
-  content: "\e900";
-}
-.oi-studio--filled:before {
-  content: "\e901";
-}
-.oi-studio:before {
-  content: "\e902";
-}
-.oi-apps:before {
-  content: "\e910";
-}
-.oi-discuss:before {
-  content: "\e90f";
-}
-.oi-chart--area--filled:before {
-  content: "\e90d";
-}
-.oi-chart--cohort:before {
-  content: "\e90e";
-}
-.oi-filter--filled:before {
-  content: "\e90c";
-}
-.oi-message--filled:before {
-  content: "\e909";
-}
-.oi-message:before {
-  content: "\e90a";
-}
-.oi-chevron-right--thick:before {
-  content: "\e907";
-}
-.oi-chevron-left--thick:before {
-  content: "\e908";
-}
-.oi-pencil:before {
-  content: "\e903";
-}
-.oi-mobile:before {
-  content: "\e904";
-}
-.oi-add--thick:before {
-  content: "\e905";
-}
-.oi-subtract--thick:before {
-  content: "\e906";
-}
-.oi-add:before {
-  content: "\e90b";
-}
-.oi-alarm--add:before {
-  content: "\e915";
-}
-.oi-align--vertical-top:before {
-  content: "\e91d";
-}
-.oi-arrow--down:before {
-  content: "\e93a";
-}
-.oi-arrow--left:before {
-  content: "\e93b";
-}
-.oi-arrow--right:before {
-  content: "\e93c";
-}
-.oi-arrow--up:before {
-  content: "\e93f";
-}
-.oi-attachment:before {
-  content: "\e94c";
-}
-.oi-calendar--heat-map:before {
-  content: "\e992";
-}
-.oi-calendar:before {
-  content: "\e995";
-}
-.oi-caret--down:before {
-  content: "\e99c";
-}
-.oi-caret--left:before {
-  content: "\e99d";
-}
-.oi-caret--right:before {
-  content: "\e99e";
-}
-.oi-caret--sort--down:before {
-  content: "\e99f";
-}
-.oi-caret--sort--up:before {
-  content: "\e9a0";
-}
-.oi-caret--sort:before {
-  content: "\e9a1";
-}
-.oi-caret--up:before {
-  content: "\e9a2";
-}
-.oi-chart--bullet:before {
-  content: "\e9c3";
-}
-.oi-chart--column:before {
-  content: "\e9c8";
-}
-.oi-chart--line-smooth:before {
-  content: "\e9d2";
-}
-.oi-chart--pie:before {
-  content: "\e9dc";
-}
-.oi-chart--stacked:before {
-  content: "\e9e7";
-}
-.oi-chat--launch:before {
-  content: "\e9f0";
-}
-.oi-chat:before {
-  content: "\e9f4";
-}
-.oi-checkmark:before {
-  content: "\ea02";
-}
-.oi-chevron--down:before {
-  content: "\ea05";
-}
-.oi-chevron--left:before {
-  content: "\ea06";
-}
-.oi-chevron--mini:before {
-  content: "\ea07";
-}
-.oi-chevron--right:before {
-  content: "\ea08";
-}
-.oi-chevron--up:before {
-  content: "\ea0c";
-}
 .oi-close:before {
-  content: "\ea22";
-}
-.oi-connection--two-way:before {
-  content: "\ea51";
-}
-.oi-container-software:before {
-  content: "\ea57";
-}
-.oi-contrast:before {
-  content: "\ea5c";
-}
-.oi-cross-tab:before {
-  content: "\ea6d";
-}
-.oi-dashboard:before {
-  content: "\ea85";
-}
-.oi-data--base:before {
-  content: "\ea89";
-}
-.oi-data--check:before {
-  content: "\ea8b";
-}
-.oi-debug:before {
-  content: "\eaa8";
-}
-.oi-document--download:before {
-  content: "\eae6";
-}
-.oi-event--schedule:before {
-  content: "\eb1d";
-}
-.oi-event:before {
-  content: "\eb1e";
-}
-.oi-filter:before {
-  content: "\eb42";
-}
-.oi-headphones:before {
-  content: "\ebaa";
-}
-.oi-headset:before {
-  content: "\ebab";
-}
-.oi-launch:before {
-  content: "\ec06";
-}
-.oi-layers:before {
-  content: "\ec07";
-}
-.oi-map:before {
-  content: "\ec60";
-}
-.oi-maximize:before {
-  content: "\ec63";
-}
-.oi-menu:before {
-  content: "\ec6a";
-}
-.oi-microphone--filled:before {
-  content: "\ec6e";
-}
-.oi-microphone--off--filled:before {
-  content: "\ec6f";
-}
-.oi-microphone--off:before {
-  content: "\ec70";
-}
-.oi-microphone:before {
-  content: "\ec71";
-}
-.oi-open-panel--filled--right:before {
-  content: "\ecd5";
-}
-.oi-overflow-menu--horizontal:before {
-  content: "\ece0";
-}
-.oi-overflow-menu--vertical:before {
-  content: "\ece1";
-}
-.oi-pen:before {
-  content: "\ed04";
-}
-.oi-phone--application:before {
-  content: "\ed0c";
-}
-.oi-phone--filled:before {
-  content: "\ed0f";
-}
-.oi-phone--voice--filled:before {
-  content: "\ed1c";
-}
-.oi-phone--voice:before {
-  content: "\ed1d";
-}
-.oi-phone:before {
-  content: "\ed1e";
-}
-.oi-printer:before {
-  content: "\ed3e";
-}
-.oi-reminder:before {
-  content: "\ed62";
-}
-.oi-screen:before {
-  content: "\edab";
-}
-.oi-search:before {
-  content: "\edb1";
-}
-.oi-settings--adjust:before {
-  content: "\edc2";
-}
-.oi-settings:before {
-  content: "\edc6";
-}
-.oi-show-data--cards:before {
-  content: "\edd7";
-}
-.oi-sort--ascending:before {
-  content: "\ee03";
-}
-.oi-sort--descending:before {
-  content: "\ee04";
-}
-.oi-star--filled:before {
-  content: "\ee0d";
-}
-.oi-star--half:before {
-  content: "\ee0e";
-}
-.oi-star:before {
-  content: "\ee10";
-}
-.oi-subtract:before {
-  content: "\ee26";
-}
-.oi-table--split:before {
-  content: "\ee35";
-}
-.oi-table:before {
-  content: "\ee37";
-}
-.oi-trash-can:before {
-  content: "\eeb5";
-}
-.oi-user--follow:before {
-  content: "\eee2";
-}
-.oi-user--multiple:before {
-  content: "\eee5";
-}
-.oi-user:before {
-  content: "\eeef";
-}
-.oi-video--filled:before {
-  content: "\eefe";
-}
-.oi-video:before {
-  content: "\ef01";
-}
-.oi-view-next:before {
-  content: "\ef07";
-}
-.oi-volume--mute--filled:before {
-  content: "\ef1b";
-}
-.oi-volume--mute:before {
-  content: "\ef1c";
-}
-.oi-volume--up--filled:before {
-  content: "\ef20";
-}
-.oi-volume--up:before {
-  content: "\ef21";
-}
-.oi-alarm:before {
-  content: "\e917";
+  content: '\00d7';
+  font-family: sans-serif;
+  font-weight: bold;
 }
+
+.oi-view-pivot:before { content: '\e800'; }
+.oi-voip:before { content: '\e803'; }
+.oi-odoo:before { content: '\e806'; }
+.oi-search:before { content: '\e808'; }
+.oi-group:before { content: '\e80a'; }
+.oi-settings-adjust:before { content: '\e80c'; }
+.oi-apps:before { content: '\e80d'; }
+.oi-panel-right:before { content: '\e810'; }
+.oi-launch:before { content: '\e812'; }
+.oi-studio:before { content: '\e813'; }
+.oi-view-kanban:before { content: '\e814'; }
+.oi-view-cohort:before { content: '\e816'; }
+.oi-view-list:before { content: '\e817'; }
diff --git a/addons/web/static/src/core/debug/debug_menu.xml b/addons/web/static/src/core/debug/debug_menu.xml
index 341ab46a46a..bb562301a6d 100644
--- a/addons/web/static/src/core/debug/debug_menu.xml
+++ b/addons/web/static/src/core/debug/debug_menu.xml
@@ -8,7 +8,7 @@
           togglerClass="`o-dropdown--narrow ${env.inDialog?'btn btn-link':''}`"
         >
             <t t-set-slot="toggler">
-                <i class="oi oi-large oi-debug"/>
+                <i class="fa fa-lg fa-bug"/>
             </t>
             <t t-foreach="elements" t-as="element" t-key="element_index">
                 <DropdownItem
diff --git a/addons/web/static/src/legacy/js/control_panel/search_utils.js b/addons/web/static/src/legacy/js/control_panel/search_utils.js
index 221e959bde8..56b327689f9 100644
--- a/addons/web/static/src/legacy/js/control_panel/search_utils.js
+++ b/addons/web/static/src/legacy/js/control_panel/search_utils.js
@@ -179,10 +179,10 @@ odoo.define('web.searchUtils', function (require) {
     };
     // Search bar
     const FACET_ICONS = {
-        filter: 'oi oi-small oi-filter',
-        groupBy: 'oi oi-small oi-layers',
-        favorite: 'oi oi-small oi-star',
-        comparison: 'oi oi-small oi-contrast',
+        filter: 'fa fa-filter',
+        groupBy: 'oi oi-group',
+        favorite: 'fa fa-star',
+        comparison: 'fa fa-adjust',
     };
 
     //-------------------------------------------------------------------------
diff --git a/addons/web/static/src/legacy/js/views/calendar/calendar_view.js b/addons/web/static/src/legacy/js/views/calendar/calendar_view.js
index 802e103cfa7..73eb4b82d2c 100644
--- a/addons/web/static/src/legacy/js/views/calendar/calendar_view.js
+++ b/addons/web/static/src/legacy/js/views/calendar/calendar_view.js
@@ -30,7 +30,7 @@ const scalesInfo = {
 
 var CalendarView = AbstractView.extend({
     display_name: _lt('Calendar'),
-    icon: 'oi-calendar',
+    icon: 'fa fa-calendar',
     jsLibs: [
         '/web/static/lib/fullcalendar/core/main.js',
         '/web/static/lib/fullcalendar/interaction/main.js',
diff --git a/addons/web/static/src/legacy/js/views/kanban/kanban_view.js b/addons/web/static/src/legacy/js/views/kanban/kanban_view.js
index ebd160bbdd4..f2c88dae949 100644
--- a/addons/web/static/src/legacy/js/views/kanban/kanban_view.js
+++ b/addons/web/static/src/legacy/js/views/kanban/kanban_view.js
@@ -14,7 +14,7 @@ var _lt = core._lt;
 var KanbanView = BasicView.extend({
     accesskey: "k",
     display_name: _lt("Kanban"),
-    icon: 'oi-align--vertical-top',
+    icon: 'oi oi-view-kanban',
     mobile_friendly: true,
     config: _.extend({}, BasicView.prototype.config, {
         Model: KanbanModel,
diff --git a/addons/web/static/src/legacy/js/views/list/list_renderer.js b/addons/web/static/src/legacy/js/views/list/list_renderer.js
index c11598228f0..ecae5de7f6f 100644
--- a/addons/web/static/src/legacy/js/views/list/list_renderer.js
+++ b/addons/web/static/src/legacy/js/views/list/list_renderer.js
@@ -1132,7 +1132,7 @@ var ListRenderer = BasicRenderer.extend({
             if (this._shouldRenderOptionalColumnsDropdown()) {
                 this.el.classList.add('o_list_optional_columns');
                 this.$('table').append(
-                    $('<i class="o_optional_columns_dropdown_toggle oi oi-settings--adjust"/>')
+                    $('<i class="o_optional_columns_dropdown_toggle oi oi-settings-adjust"/>')
                 );
                 this.$el.append(this._renderOptionalColumnsDropdown());
             }
diff --git a/addons/web/static/src/legacy/js/views/list/list_view.js b/addons/web/static/src/legacy/js/views/list/list_view.js
index 13600ecad25..0ed4a0c3183 100644
--- a/addons/web/static/src/legacy/js/views/list/list_view.js
+++ b/addons/web/static/src/legacy/js/views/list/list_view.js
@@ -20,7 +20,7 @@ var _lt = core._lt;
 var ListView = BasicView.extend({
     accesskey: "l",
     display_name: _lt('List'),
-    icon: 'oi-table',
+    icon: 'oi oi-view-list',
     config: _.extend({}, BasicView.prototype.config, {
         Model: ListModel,
         Renderer: ListRenderer,
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index abb23cb169f..5b7ce140452 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -419,7 +419,7 @@
     <t t-set="buttonLabel">View %s</t>
     <button type="button"
         t-att-accesskey="view.accessKey"
-        t-attf-class="btn btn-light oi o_switch_view o_{{ view.type }} {{ view.icon }}"
+        t-attf-class="btn btn-light o_switch_view o_{{ view.type }} {{ view.icon }}"
         t-att-class="{ active: env.view.type === view.type }"
         t-att-aria-label="sprintf(buttonLabel.toString(), view.type)"
         t-att-data-tooltip="view.name"
@@ -586,7 +586,7 @@
             </button>
         </t>
         <t t-if="widget.is_action_enabled('export_xlsx') and widget.isExportEnable">
-            <button type="button" class="btn btn-secondary oi oi-document--download o_list_export_xlsx" title="Export All" aria-label="Export All"/>
+            <button type="button" class="btn btn-secondary fa fa-download o_list_export_xlsx" title="Export All" aria-label="Export All"/>
         </t>
     </div>
 </t>
@@ -739,16 +739,16 @@
 <t t-name="GraphView.buttons">
     <div class="btn-group mb-2 mb-sm-auto" role="toolbar" aria-label="Main actions"/>
     <div class="btn-group o_graph_align mb-2 mb-sm-auto" role="toolbar" aria-label="Change graph">
-        <button class="btn btn-secondary o_graph_button oi oi-chart--column" title="Bar Chart" aria-label="Bar Chart" data-mode="bar"/>
-        <button class="btn btn-secondary o_graph_button oi oi-chart--area--filled" title="Line Chart" aria-label="Line Chart" data-mode="line"/>
-        <button class="btn btn-secondary o_graph_button oi oi-chart--pie" title="Pie Chart" aria-label="Pie Chart" data-mode="pie"/>
+        <button class="btn btn-secondary o_graph_button fa fa-bar-chart" title="Bar Chart" aria-label="Bar Chart" data-mode="bar"/>
+        <button class="btn btn-secondary o_graph_button fa fa-area-chart" title="Line Chart" aria-label="Line Chart" data-mode="line"/>
+        <button class="btn btn-secondary o_graph_button fa fa-pie-chart" title="Pie Chart" aria-label="Pie Chart" data-mode="pie"/>
     </div>
     <div class="btn-group o_stack_align mb-2 mb-sm-auto" role="toolbar" aria-label="Change graph">
-        <button class="btn btn-secondary o_graph_button oi oi-chart--stacked" title="Stacked" aria-label="Stacked" data-mode="stack"/>
+        <button class="btn btn-secondary o_graph_button fa fa-database" title="Stacked" aria-label="Stacked" data-mode="stack"/>
     </div>
     <div class="btn-group o_sort_align mb-2 mb-sm-auto" role="toolbar" aria-label="Sort graph">
-        <button class="btn btn-secondary o_graph_button oi oi-sort--descending" title="Descending" aria-label="Descending" data-order="desc"/>
-        <button class="btn btn-secondary o_graph_button oi oi-sort--ascending" title="Ascending" aria-label="Ascending" data-order="asc"/>
+        <button class="btn btn-secondary o_graph_button fa fa-sort-amount-desc" title="Descending" aria-label="Descending" data-order="desc"/>
+        <button class="btn btn-secondary o_graph_button fa fa-sort-amount-asc" title="Ascending" aria-label="Ascending" data-order="asc"/>
     </div>
 </t>
 
diff --git a/addons/web/static/src/libs/fontawesome/css/font-awesome.css b/addons/web/static/src/libs/fontawesome/css/font-awesome.css
index 738ee741a93..50bf1eba58e 100644
--- a/addons/web/static/src/libs/fontawesome/css/font-awesome.css
+++ b/addons/web/static/src/libs/fontawesome/css/font-awesome.css
@@ -19,11 +19,10 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-/* makes the font 33% larger relative to the icon container */
+/* matches 'oi-large' utility-class */
 .fa-lg {
-  font-size: 1.33333333em;
-  line-height: 0.75em;
-  vertical-align: -15%;
+  font-size: 1.315em;
+  vertical-align: -6%;
 }
 .fa-2x {
   font-size: 2em;
diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index 2882a20c2ce..90424ed3314 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -35,7 +35,7 @@
                     <t t-if="env.config.viewSwitcherEntries.length">
                         <nav class="btn-group o_cp_switch_buttons">
                             <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
-                                <button class="btn btn-light oi o_switch_view "
+                                <button class="btn btn-light o_switch_view "
                                     t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
                                     t-att-data-tooltip="view.name"
                                     t-on-click="() => this.onViewClicked(view.type)"
diff --git a/addons/web/static/src/search/favorite_menu/favorite_menu.xml b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
index bd0a99b0d3f..e2993b7f0c3 100644
--- a/addons/web/static/src/search/favorite_menu/favorite_menu.xml
+++ b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="web.FavoriteMenu" owl="1">
         <Dropdown class="'o_favorite_menu btn-group'" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
-                <i class="oi-small mr-1" t-att-class="icon"/>
+                <i class="mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Favorites</span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/search/filter_menu/filter_menu.xml b/addons/web/static/src/search/filter_menu/filter_menu.xml
index 41e77131a68..0dbec7e1018 100644
--- a/addons/web/static/src/search/filter_menu/filter_menu.xml
+++ b/addons/web/static/src/search/filter_menu/filter_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="web.FilterMenu" owl="1">
         <Dropdown class="'o_filter_menu btn-group ' + props.class" togglerClass="'btn btn-light'">
             <t t-set-slot="toggler">
-                <i class="oi-small mr-1" t-att-class="icon"/>
+                <i class="mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Filters</span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/search/group_by_menu/group_by_menu.xml b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
index d2e70be41ff..70c2776df67 100644
--- a/addons/web/static/src/search/group_by_menu/group_by_menu.xml
+++ b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
@@ -7,7 +7,7 @@
             t-props="dropdownProps"
         >
             <t t-set-slot="toggler">
-                <i class="oi-small mr-1" t-att-class="icon"/>
+                <i class="mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Group By<t t-if="props.showCaretDown"> <i class="fa fa-caret-down ml-1"/></t></span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/search/utils/misc.js b/addons/web/static/src/search/utils/misc.js
index 9aad58c9194..4a537462e19 100644
--- a/addons/web/static/src/search/utils/misc.js
+++ b/addons/web/static/src/search/utils/misc.js
@@ -1,10 +1,10 @@
 /** @odoo-module **/
 
 export const FACET_ICONS = {
-    filter: "oi oi-filter",
-    groupBy: "oi oi-layers",
-    favorite: "oi oi-star",
-    comparison: "oi oi-contrast",
+    filter: "fa fa-filter",
+    groupBy: "oi oi-group",
+    favorite: "fa fa-star",
+    comparison: "fa fa-adjust",
 };
 
 export const GROUPABLE_TYPES = [
diff --git a/addons/web/static/src/views/graph/graph_view.js b/addons/web/static/src/views/graph/graph_view.js
index bd229973b76..5faa5d8da01 100644
--- a/addons/web/static/src/views/graph/graph_view.js
+++ b/addons/web/static/src/views/graph/graph_view.js
@@ -155,7 +155,7 @@ GraphView.props = {
 GraphView.type = "graph";
 
 GraphView.display_name = _lt("Graph");
-GraphView.icon = "oi oi-chart--line-smooth";
+GraphView.icon = "fa fa-area-chart";
 GraphView.multiRecord = true;
 
 GraphView.Model = GraphModel;
diff --git a/addons/web/static/src/views/graph/graph_view.xml b/addons/web/static/src/views/graph/graph_view.xml
index 26132bf647d..eb809b294c5 100644
--- a/addons/web/static/src/views/graph/graph_view.xml
+++ b/addons/web/static/src/views/graph/graph_view.xml
@@ -14,31 +14,31 @@
             </div>
         </t>
         <div class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary oi oi-chart--column o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
+            <button class="btn btn-secondary fa fa-bar-chart o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
                 t-on-click="() => this.onModeSelected('bar')"
                 t-att-class="{ active: model.metaData.mode === 'bar' }"
             />
-            <button class="btn btn-secondary oi oi-chart--area--filled o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
+            <button class="btn btn-secondary fa fa-area-chart o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
                 t-on-click="() => this.onModeSelected('line')"
                 t-att-class="{ active: model.metaData.mode === 'line' }"
             />
-            <button class="btn btn-secondary oi oi-chart--pie o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
+            <button class="btn btn-secondary fa fa-pie-chart o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
                 t-on-click="() => this.onModeSelected('pie')"
                 t-att-class="{ active: model.metaData.mode === 'pie' }"
             />
         </div>
         <div t-if="model.metaData.mode === 'bar'" class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary oi oi-chart--stacked o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
+            <button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
                 t-on-click="toggleStacked"
                 t-att-class="{ active: model.metaData.stacked }"
             />
         </div>
         <div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group" role="toolbar" aria-label="Sort graph">
-            <button class="btn btn-secondary oi oi-sort--descending o_graph_button" data-tooltip="Descending" aria-label="Descending"
+            <button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
                 t-on-click="() => this.toggleOrder('DESC')"
                 t-att-class="{ active: model.metaData.order === 'DESC' }"
             />
-            <button class="btn btn-secondary oi oi-sort--ascending o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
+            <button class="btn btn-secondary fa fa-sort-amount-asc o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
                 t-on-click="() => this.toggleOrder('ASC')"
                 t-att-class="{ active: model.metaData.order === 'ASC' }"
             />
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index 8de9d5b9741..aeaf856480d 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -83,7 +83,7 @@
                 />
             </t>
             <span t-if="l10n.direction === 'rtl'" t-esc="cell.title"/>
-            <i t-attf-class="oi oi-{{ cell.isLeaf ? 'add' : 'subtract' }}--thick me-1"/>
+            <i t-attf-class="fa fa-{{ cell.isLeaf ? 'plus-square' : 'minus-square-o' }} me-1"/>
             <span t-if="l10n.direction === 'ltr'" t-esc="cell.title"/>
         </th>
     </t>
@@ -96,7 +96,7 @@
                 o_pivot_sort_order_desc: cell.order === 'desc',
             }" t-on-click.prevent="() => this.onMeasureClick(cell)" t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
             <t t-esc="cell.title"/>
-            <i t-if="cell.order === 'asc' || cell.order ==='desc'" t-attf-class="oi oi-{{ cell.order === 'asc' ? 'caret--up' : 'caret--down' }} ms-1"/>
+            <i t-if="cell.order === 'asc' || cell.order ==='desc'" t-attf-class="fa fa-caret-{{ cell.order === 'asc' ? 'up' : 'down' }} ms-1"/>
         </th>
     </t>
 
diff --git a/addons/web/static/src/views/pivot/pivot_view.js b/addons/web/static/src/views/pivot/pivot_view.js
index e4bc27f509c..585f23efa95 100644
--- a/addons/web/static/src/views/pivot/pivot_view.js
+++ b/addons/web/static/src/views/pivot/pivot_view.js
@@ -175,7 +175,7 @@ PivotView.ArchParser = PivotArchParser;
 
 PivotView.type = "pivot";
 PivotView.display_name = _lt("Pivot");
-PivotView.icon = "oi-cross-tab";
+PivotView.icon = "oi oi-view-pivot";
 PivotView.multiRecord = true;
 PivotView.searchMenuTypes = ["filter", "groupBy", "comparison", "favorite"];
 
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
index 9124f010cf0..4199de6f9c0 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.scss
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
@@ -167,7 +167,6 @@
   .o_mobile_menu_toggle {
     @extend %-main-navbar-entry-base;
     @extend %-main-navbar-entry-spacing;
-    font-size: $o-navbar-brand-font-size;
   }
 }
 
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.xml b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
index 3d920ecfa57..d97be0c0e73 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
@@ -8,7 +8,7 @@
         class="o_mobile_menu_toggle dropdown-toggle o-no-caret d-md-none"
         title="Toggle menu" aria-label="Toggle menu"
         t-on-click="_openBurger">
-        <i class="oi oi-large oi-open-panel--filled--right"/>
+        <i class="oi oi-panel-right"/>
     </a>
     <t t-portal="'body'">
       <Transition name="'burgerslide'" visible="state.isBurgerOpened" leaveDuration="200" t-slot-scope="transition">
@@ -18,7 +18,7 @@
               <span class="dropdown-toggle small d-flex align-items-center justify-content-between o-no-caret" t-att-class="{active: isUserMenuUnfolded}">
                   <img class="o_burger_menu_avatar o_image_24_cover rounded-circle" t-att-src="'/web/image?model=res.users&amp;field=avatar_128&amp;id=' + user.userId" alt="Menu"/>
                   <span class="o_burger_menu_username px-2"><t t-esc="user.name"/></span>
-                  <i t-if="isUserMenuTogglable" class="oi" t-att-class="state.isUserMenuOpened ? 'oi-caret--down' : 'oi-caret--left'"/>
+                  <i t-if="isUserMenuTogglable" class="fa" t-att-class="state.isUserMenuOpened ? 'fa-caret-down' : 'fa-caret-left'"/>
               </span>
               <span type="button" class="o_burger_menu_close oi oi-close" aria-label="Close menu" title="Close menu" t-on-click.stop="_closeBurger"/>
           </div>
diff --git a/addons/web/static/src/webclient/icons.scss b/addons/web/static/src/webclient/icons.scss
index 87dc1e75d9a..eed3c018465 100644
--- a/addons/web/static/src/webclient/icons.scss
+++ b/addons/web/static/src/webclient/icons.scss
@@ -5,21 +5,23 @@
 // Sizes
 // ----------------------------------------------------------------------------
 
-$oi-default-size: 1em;
+$oi-default-size: 1em;   // Normally 13px
 
 $oi-sizes: (
     'small': (
-        'font-size': .8em,
-        'vertical-align': 2%,
+        'font-size': .769em,    // ~ 10px
+        'vertical-align': 10%,
     ),
     'normal': (
         'font-size': $oi-default-size,
     ),
     'large': (
-        'font-size': 1.2em,
+        'font-size': 1.315em,   // ~ 17px
+        'vertical-align': -6%,
     ),
     'larger': (
-        'font-size': 1.77em,
+        'font-size': 1.462em,   // ~ 19px
+        'vertical-align': -10%,
     ),
 );
 
@@ -27,16 +29,20 @@ $oi-sizes: (
 // Allows to dinamically update rules according to the context and eventual
 // utility classes.
 // ----------------------------------------------------------------------------
-.oi::before {
-    font-size: var(--oi-font-size, $oi-default-size);
-    vertical-align: var(--oi-vertical-align, 0);
-    text-rendering: geometricPrecision;
+.oi, .fa {
+    &:before {
+        font-size: var(--oi-font-size, $oi-default-size);
+        vertical-align: var(--oi-vertical-align, 0);
+        text-rendering: geometricPrecision;
+    }
 }
 
-.oi-fw:before {
-    display: inline-block;
-    width: var(--oi-fw-width, $oi-default-size * 1.3);
-    text-align: center;
+.oi-fw, .fa-fw {
+    &:before {
+        display: inline-block;
+        width: var(--oi-fw-width, $oi-default-size * 1.3);
+        text-align: center;
+    }
 }
 
 // Print CSS variables for each size/breakpoint
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index 9f6a7cae96f..fdb6f2a83f7 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -140,7 +140,7 @@
   <t t-name="web.NavBar.SectionsMenu.MoreDropdown" owl="1">
     <Dropdown class="'o_menu_sections_more'" title="'More Menu'" hotkey="hotkey">
       <t t-set-slot="toggler">
-        <i class="oi oi-large oi-add--thick"/>
+        <i class="fa fa-plus"/>
       </t>
       <t t-foreach="sections" t-as="section" t-key="section.id">
 
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
index 3f0749adab6..4ae24303dff 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
@@ -4,7 +4,7 @@
 <t t-name="web.SwitchCompanyMenu" owl="1">
     <Dropdown class="'o_switch_company_menu d-none d-md-block'" position="'bottom-end'">
         <t t-set-slot="toggler">
-            <i class="oi oi-large oi-connection--two-way d-lg-none"/>
+            <i class="fa fa-building d-lg-none"/>
             <span class="oe_topbar_name d-none d-lg-block" t-esc="currentCompany.name"/>
         </t>
         <t t-foreach="Object.values(companyService.availableCompanies).sort((c1, c2) => c1.sequence - c2.sequence)" t-as="company" t-key="company.id">
diff --git a/addons/web/static/tests/core/debug/debug_manager_tests.js b/addons/web/static/tests/core/debug/debug_manager_tests.js
index efe8e7ac475..d495bb3fbcf 100644
--- a/addons/web/static/tests/core/debug/debug_manager_tests.js
+++ b/addons/web/static/tests/core/debug/debug_manager_tests.js
@@ -175,7 +175,7 @@ QUnit.module("DebugMenu", (hooks) => {
             props: { close: () => {} },
         });
         assert.containsOnce(target, ".o_dialog");
-        assert.containsNone(target, ".o_dialog .o_debug_manager .oi-debug");
+        assert.containsNone(target, ".o_dialog .o_debug_manager .fa-bug");
     });
 
     QUnit.test(
@@ -228,7 +228,7 @@ QUnit.module("DebugMenu", (hooks) => {
                 props: { close: () => {} },
             });
             assert.containsOnce(target, ".o_dialog");
-            assert.containsOnce(target, ".o_dialog .o_debug_manager .oi-debug");
+            assert.containsOnce(target, ".o_dialog .o_debug_manager .fa-bug");
             await click(target, ".o_dialog .o_debug_manager button");
             const debugManagerEl = target.querySelector(".o_debug_manager");
             assert.containsN(debugManagerEl, ".dropdown-menu .dropdown-item", 2);
diff --git a/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js b/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
index 28bfc3a8e4d..8cb163c9bdc 100644
--- a/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
@@ -54,7 +54,7 @@ odoo.define('web.comparison_menu_tests', function (require) {
             await cpHelpers.toggleMenuItem(controlPanel, "Birthday");
             await cpHelpers.toggleMenuItemOption(controlPanel, "Birthday", "January");
 
-            assert.containsOnce(controlPanel, 'div.o_comparison_menu > button i.oi.oi-contrast');
+            assert.containsOnce(controlPanel, 'div.o_comparison_menu > button i.fa.fa-adjust');
             assert.strictEqual(controlPanel.el.querySelector('div.o_comparison_menu > button span').innerText.trim(), "Comparison");
 
             await cpHelpers.toggleComparisonMenu(controlPanel);
diff --git a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
index 9d4063e27a4..ab87406cd8d 100644
--- a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
@@ -39,7 +39,7 @@ odoo.define('web.favorite_menu_tests', function (require) {
             };
             const controlPanel = await createControlPanel(params);
 
-            assert.containsOnce(controlPanel, 'div.o_favorite_menu > button i.oi.oi-star');
+            assert.containsOnce(controlPanel, 'div.o_favorite_menu > button i.fa.fa-star');
             assert.strictEqual(controlPanel.el.querySelector('div.o_favorite_menu > button span').innerText.trim(), "Favorites");
 
             await cpHelpers.toggleFavoriteMenu(controlPanel);
diff --git a/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js b/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
index c958a96f582..207e9dc40fe 100644
--- a/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
@@ -103,7 +103,7 @@ odoo.define('web.filter_menu_tests', function (require) {
 
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Foo']);
             assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
-                'span.oi.oi-filter.o_searchview_facet_label');
+                'span.fa.fa-filter.o_searchview_facet_label');
 
             assert.ok(cpHelpers.isItemSelected(controlPanel, "Foo"));
 
diff --git a/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js b/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
index 435602f3f5c..29e0be4f521 100644
--- a/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
@@ -108,7 +108,7 @@ odoo.define('web.groupby_menu_tests', function (require) {
             await cpHelpers.toggleMenuItem(controlPanel, 0);
             assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Groupby Foo']);
             assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
-                'span.oi.oi-layers.o_searchview_facet_label');
+                'span.oi.oi-group.o_searchview_facet_label');
             assert.ok(cpHelpers.isItemSelected(controlPanel, 0));
 
             await cpHelpers.toggleMenuItem(controlPanel, 0);
diff --git a/addons/web/static/tests/legacy/views/graph_tests.js b/addons/web/static/tests/legacy/views/graph_tests.js
index 11b05a6357b..fb3d73bedcb 100644
--- a/addons/web/static/tests/legacy/views/graph_tests.js
+++ b/addons/web/static/tests/legacy/views/graph_tests.js
@@ -1758,7 +1758,7 @@ QUnit.module('Views', {
 
             this.selectTimeRanges = async (comparisonOptionId, basicDomainId) => {
                 const facetEls = graph.el.querySelectorAll('.o_searchview_facet');
-                const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.oi-filter'));
+                const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.fa-filter'));
                 if (facetIndex > -1) {
                     await cpHelpers.removeFacet(graph.el, facetIndex);
                 }
@@ -1780,7 +1780,7 @@ QUnit.module('Views', {
                 const productWasSelected = cpHelpers.isItemSelected(graph.el, 'Product');
 
                 const facetEls = graph.el.querySelectorAll('.o_searchview_facet');
-                const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.oi-layers'));
+                const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.oi-group'));
                 if (facetIndex > -1) {
                     await cpHelpers.removeFacet(graph.el, facetIndex);
                     await cpHelpers.toggleGroupByMenu(graph.el);
diff --git a/addons/web/static/tests/search/comparison_menu_tests.js b/addons/web/static/tests/search/comparison_menu_tests.js
index 4917d8d356a..2220f8c6be6 100644
--- a/addons/web/static/tests/search/comparison_menu_tests.js
+++ b/addons/web/static/tests/search/comparison_menu_tests.js
@@ -61,7 +61,7 @@ QUnit.module("Search", (hooks) => {
         await toggleFilterMenu(target);
         await toggleMenuItem(target, "Birthday");
         await toggleMenuItemOption(target, "Birthday", "January");
-        assert.containsOnce(target, "div.o_comparison_menu > button i.oi.oi-contrast");
+        assert.containsOnce(target, "div.o_comparison_menu > button i.fa.fa-adjust");
         assert.strictEqual(
             target
                 .querySelector("div.o_comparison_menu > button span")
diff --git a/addons/web/static/tests/search/control_panel.js b/addons/web/static/tests/search/control_panel.js
index e6dbc3f8ee2..ea295660b9c 100644
--- a/addons/web/static/tests/search/control_panel.js
+++ b/addons/web/static/tests/search/control_panel.js
@@ -84,8 +84,8 @@ QUnit.module("Search", (hooks) => {
             Component: ControlPanel,
             config: {
                 viewSwitcherEntries: [
-                    { type: "list", active: true, icon: "oi-table", name: "List" },
-                    { type: "kanban", icon: "oi-align--vertical-top", name: "Kanban" },
+                    { type: "list", active: true, icon: "oi-view-list", name: "List" },
+                    { type: "kanban", icon: "oi-view-kanban", name: "Kanban" },
                 ],
             },
             searchMenuTypes: [],
@@ -98,7 +98,7 @@ QUnit.module("Search", (hooks) => {
         assert.strictEqual(views[0].getAttribute("data-tooltip"), "List");
         assert.hasClass(views[0], "active");
         assert.strictEqual(views[1].getAttribute("data-tooltip"), "Kanban");
-        assert.hasClass(views[1], "oi-align--vertical-top");
+        assert.hasClass(views[1], "oi-view-kanban");
 
         controlPanel.env.services.action.switchView = (viewType) => {
             assert.step(viewType);
diff --git a/addons/web/static/tests/search/favorite_menu_tests.js b/addons/web/static/tests/search/favorite_menu_tests.js
index 398ca477039..d4a7a810d8c 100644
--- a/addons/web/static/tests/search/favorite_menu_tests.js
+++ b/addons/web/static/tests/search/favorite_menu_tests.js
@@ -75,7 +75,7 @@ QUnit.module("Search", (hooks) => {
                 },
             });
 
-            assert.containsOnce(target, "div.o_favorite_menu > button i.oi.oi-star");
+            assert.containsOnce(target, "div.o_favorite_menu > button i.fa.fa-star");
             assert.strictEqual(
                 target
                     .querySelector("div.o_favorite_menu > button span")
@@ -108,7 +108,7 @@ QUnit.module("Search", (hooks) => {
             },
         });
 
-        assert.containsOnce(target, "div.o_favorite_menu > button i.oi.oi-star");
+        assert.containsOnce(target, "div.o_favorite_menu > button i.fa.fa-star");
         assert.strictEqual(
             target
                 .querySelector("div.o_favorite_menu > button span")
diff --git a/addons/web/static/tests/search/filter_menu_tests.js b/addons/web/static/tests/search/filter_menu_tests.js
index d97019968be..a492d2d68d7 100644
--- a/addons/web/static/tests/search/filter_menu_tests.js
+++ b/addons/web/static/tests/search/filter_menu_tests.js
@@ -120,7 +120,7 @@ QUnit.module("Search", (hooks) => {
         assert.deepEqual(getFacetTexts(target), ["Foo"]);
         assert.containsOnce(
             target.querySelector(".o_searchview .o_searchview_facet"),
-            "span.oi.oi-filter.o_searchview_facet_label"
+            "span.fa.fa-filter.o_searchview_facet_label"
         );
         assert.ok(isItemSelected(target, "Foo"));
         assert.deepEqual(getDomain(controlPanel), [["foo", "=", "qsdf"]]);
diff --git a/addons/web/static/tests/search/group_by_menu_tests.js b/addons/web/static/tests/search/group_by_menu_tests.js
index 35035bbeb79..f9fe8f2ef61 100644
--- a/addons/web/static/tests/search/group_by_menu_tests.js
+++ b/addons/web/static/tests/search/group_by_menu_tests.js
@@ -138,7 +138,7 @@ QUnit.module("Search", (hooks) => {
         assert.deepEqual(getFacetTexts(target), ["Foo"]);
         assert.containsOnce(
             target.querySelector(".o_searchview .o_searchview_facet"),
-            "span.oi.oi-layers.o_searchview_facet_label"
+            "span.oi.oi-group.o_searchview_facet_label"
         );
         assert.ok(isItemSelected(target, "Foo"));
 
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js
index ab68a9ad0c6..e07be93f10e 100644
--- a/addons/web/static/tests/views/graph_view_tests.js
+++ b/addons/web/static/tests/views/graph_view_tests.js
@@ -3037,37 +3037,37 @@ QUnit.module("Views", (hooks) => {
             `,
         });
 
-        assert.containsOnce(target, "button.oi-sort--ascending");
-        assert.containsOnce(target, "button.oi-sort--descending");
+        assert.containsOnce(target, "button.fa-sort-amount-asc");
+        assert.containsOnce(target, "button.fa-sort-amount-desc");
 
         checkLegend(assert, graph, "Count", "measure should be by count");
         assert.hasClass(
-            target.querySelector("button.oi-sort--descending"),
+            target.querySelector("button.fa-sort-amount-desc"),
             "active",
             'sorting should be applie on descending order by default when sorting="desc"'
         );
         checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
 
-        await click(target, "button.oi-sort--ascending");
+        await click(target, "button.fa-sort-amount-asc");
         assert.hasClass(
-            target.querySelector("button.oi-sort--ascending"),
+            target.querySelector("button.fa-sort-amount-asc"),
             "active",
             "ascending order should be applied"
         );
         checkDatasets(assert, graph, "data", { data: [1, 3, 4] });
 
-        await click(target, "button.oi-sort--descending");
+        await click(target, "button.fa-sort-amount-desc");
         assert.hasClass(
-            target.querySelector("button.oi-sort--descending"),
+            target.querySelector("button.fa-sort-amount-desc"),
             "active",
             "descending order button should be active"
         );
         checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
 
         // again click on descending button to deactivate order button
-        await click(target, "button.oi-sort--descending");
+        await click(target, "button.fa-sort-amount-desc");
         assert.doesNotHaveClass(
-            target.querySelector("button.oi-sort--descending"),
+            target.querySelector("button.fa-sort-amount-desc"),
             "active",
             "descending order button should not be active"
         );
@@ -3075,28 +3075,28 @@ QUnit.module("Views", (hooks) => {
 
         // set line mode
         await selectMode(target, "line");
-        assert.containsOnce(target, "button.oi-sort--ascending");
-        assert.containsOnce(target, "button.oi-sort--descending");
+        assert.containsOnce(target, "button.fa-sort-amount-asc");
+        assert.containsOnce(target, "button.fa-sort-amount-desc");
 
         checkLegend(assert, graph, "Count", "measure should be by count");
         assert.doesNotHaveClass(
-            target.querySelector("button.oi-sort--descending"),
+            target.querySelector("button.fa-sort-amount-desc"),
             "active",
             "descending order should be applied"
         );
         checkDatasets(assert, graph, "data", { data: [4, 1, 3] });
 
-        await click(target, "button.oi-sort--ascending");
+        await click(target, "button.fa-sort-amount-asc");
         assert.hasClass(
-            target.querySelector("button.oi-sort--ascending"),
+            target.querySelector("button.fa-sort-amount-asc"),
             "active",
             "ascending order button should be active"
         );
         checkDatasets(assert, graph, "data", { data: [1, 3, 4] });
 
-        await click(target, "button.oi-sort--descending");
+        await click(target, "button.fa-sort-amount-desc");
         assert.hasClass(
-            target.querySelector("button.oi-sort--descending"),
+            target.querySelector("button.fa-sort-amount-desc"),
             "active",
             "descending order button should be active"
         );
@@ -3125,26 +3125,26 @@ QUnit.module("Views", (hooks) => {
         checkLegend(assert, graph, ["false", "true"], "measure should be by count");
         checkDatasets(assert, graph, "data", [{ data: [1, 1, 3] }, { data: [3, 0, 0] }]);
 
-        await click(target, "button.oi-sort--ascending");
+        await click(target, "button.fa-sort-amount-asc");
         assert.hasClass(
-            target.querySelector("button.oi-sort--ascending"),
+            target.querySelector("button.fa-sort-amount-asc"),
             "active",
             "ascending order should be applied by default"
         );
         checkDatasets(assert, graph, "data", [{ data: [1, 3, 1] }, { data: [0, 0, 3] }]);
 
-        await click(target, "button.oi-sort--descending");
+        await click(target, "button.fa-sort-amount-desc");
         assert.hasClass(
-            target.querySelector("button.oi-sort--descending"),
+            target.querySelector("button.fa-sort-amount-desc"),
             "active",
             "ascending order button should be active"
         );
         checkDatasets(assert, graph, "data", [{ data: [1, 3, 1] }, { data: [3, 0, 0] }]);
 
         // again click on descending button to deactivate order button
-        await click(target, "button.oi-sort--descending");
+        await click(target, "button.fa-sort-amount-desc");
         assert.doesNotHaveClass(
-            target.querySelector("button.oi-sort--descending"),
+            target.querySelector("button.fa-sort-amount-desc"),
             "active",
             "descending order button should not be active"
         );
@@ -3185,9 +3185,9 @@ QUnit.module("Views", (hooks) => {
             { data: [0, 1, 0, 0] },
         ]);
 
-        await click(target, "button.oi-sort--ascending");
+        await click(target, "button.fa-sort-amount-asc");
         assert.hasClass(
-            target.querySelector("button.oi-sort--ascending"),
+            target.querySelector("button.fa-sort-amount-asc"),
             "active",
             "ascending order should be applied by default"
         );
@@ -3197,9 +3197,9 @@ QUnit.module("Views", (hooks) => {
             { data: [0, 0, 0, 1] },
         ]);
 
-        await click(target, "button.oi-sort--descending");
+        await click(target, "button.fa-sort-amount-desc");
         assert.hasClass(
-            target.querySelector("button.oi-sort--descending"),
+            target.querySelector("button.fa-sort-amount-desc"),
             "active",
             "descending order button should be active"
         );
@@ -3210,9 +3210,9 @@ QUnit.module("Views", (hooks) => {
         ]);
 
         // again click on descending button to deactivate order button
-        await click(target, "button.oi-sort--descending");
+        await click(target, "button.fa-sort-amount-desc");
         assert.doesNotHaveClass(
-            target.querySelector("button.oi-sort--descending"),
+            target.querySelector("button.fa-sort-amount-desc"),
             "active",
             "descending order button should not be active"
         );
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 98b4ee41ea3..d29737269bf 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -82,7 +82,7 @@
                     </t>
                     <!-- Mobile preview -->
                     <div class="o_mobile_preview o_menu_systray_item" id="mobile-menu">
-                        <a data-action="show-mobile-preview" href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="oi oi-mobile"/></a>
+                        <a data-action="show-mobile-preview" href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-mobile"/></a>
                     </div>
                     <div groups="website.group_multi_website" t-if="multi_website_websites" id="website_switcher" class="o_menu_systray_item">
                         <a class="dropdown-toggle" data-toggle="dropdown" href="#" accesskey="w">
@@ -109,7 +109,7 @@
 
                     <!-- Page Edition -->
                     <div class="o_new_content_menu o_menu_systray_item" id="new-content-menu">
-                        <a href="#" accesskey="c"><span class="oi oi-add--thick mr-1"/>New</a>
+                        <a href="#" accesskey="c"><span class="fa fa-plus mr-1"/>New</a>
                         <div id="o_new_content_menu_choices" class="o_hidden">
                             <div class="container pt32 pb32">
                                 <div class="row">
@@ -199,7 +199,7 @@
                         </div>
                     </div>
                     <div t-if="not translatable" id="edit-page-menu" class="o_menu_systray_item">
-                        <a data-action="edit" href="#" accesskey="a"><span class="oi oi-pencil mr-1"/>Edit</a>
+                        <a data-action="edit" href="#" accesskey="a"><span class="fa fa-pencil mr-1"/>Edit</a>
                     </div>
                     <div t-if="edit_in_backend or ('website_published' in main_object.fields_get() and main_object._name != 'website.page')" class="o_menu_systray_item">
                         <a role="button" class="btn pl-0 rounded-0 dropdown-toggle css_edit_dynamic" data-toggle="dropdown" href="#">