diff --git a/addons/account/models/partner.py b/addons/account/models/partner.py
index 4847c4950137de..5710f4ba8aaf57 100644
--- a/addons/account/models/partner.py
+++ b/addons/account/models/partner.py
@@ -711,7 +711,7 @@ def _compute_application_statistics_hook(self):
         if not self.env.user.has_group('account.group_account_invoice'):
             return data_list
         for partner in self.filtered(lambda p: p._get_account_statistics_count()):
-            stat_info = {'iconClass': 'fa-pencil-square-o', 'value': partner._get_account_statistics_count(), 'label': _('Invoices/Bills/Mandates')}
+            stat_info = {'icon': 'edit_square', 'value': partner._get_account_statistics_count(), 'label': _('Invoices/Bills/Mandates')}
             data_list[partner.id].append(stat_info)
         return data_list
 
diff --git a/addons/account/static/src/components/account_file_uploader/account_file_uploader.xml b/addons/account/static/src/components/account_file_uploader/account_file_uploader.xml
index 70943c86bcc26f..5f3c6144f87312 100644
--- a/addons/account/static/src/components/account_file_uploader/account_file_uploader.xml
+++ b/addons/account/static/src/components/account_file_uploader/account_file_uploader.xml
@@ -20,7 +20,7 @@
     <t t-name="account.JournalUploadLink">
         <a t-att-class="this.props.btnClass" href="#" draggable="false">
             <div class="d-sm-none">
-                <i class="fa fa-upload"></i>
+                <i class="oi" data-icon="upload"></i>
             </div>
             <div class="d-none d-sm-block">
                 <t t-out="this.props.linkText"/>
diff --git a/addons/account/static/src/components/account_number_widget/account_number_widget.xml b/addons/account/static/src/components/account_number_widget/account_number_widget.xml
index 27a1fc0d49936f..34f678bbbd62a0 100644
--- a/addons/account/static/src/components/account_number_widget/account_number_widget.xml
+++ b/addons/account/static/src/components/account_number_widget/account_number_widget.xml
@@ -13,7 +13,7 @@
             </div>
             <div t-if="this.state.label" class="position-absolute top-50 end-0 translate-middle-y me-1">
                 <span class="o_account_number badge rounded-pill text-success bg-success bg-opacity-25 d-inline-flex px-2 mb-1">
-                    <i class="fa fa-check me-1"/>
+                    <i class="oi me-1" data-icon="check"/>
                     <span t-out="this.state.label"/>
                 </span>
             </div>
diff --git a/addons/account/static/src/components/account_payment_field/account_payment.xml b/addons/account/static/src/components/account_payment_field/account_payment.xml
index 55ed989961b1e6..b191814ebf0081 100644
--- a/addons/account/static/src/components/account_payment_field/account_payment.xml
+++ b/addons/account/static/src/components/account_payment_field/account_payment.xml
@@ -58,7 +58,7 @@
                     </t>
                     <tr t-if="info.exchangeInfo?.line_ids and info.exchangeInfo.line_ids.length">
                         <td>
-                            <a role="button" tabindex="0" class="js_exchange_info fa fa-info-circle" style="margin-right:5px;" t-on-click.stop="() => this.onExchangeInfoClick(info.exchangeInfo.line_ids)"></a>
+                            <a role="button" tabindex="0" class="js_exchange_info oi" data-icon="info" style="margin-right:5px;" t-on-click.stop="() => this.onExchangeInfoClick(info.exchangeInfo.line_ids)"></a>
                         </td>
                         <td colspan="2">
                             <i class="o_field_widget text-start text-muted text-start">
@@ -85,7 +85,7 @@
                             <td class="ps-1">
                                 <t t-out="this.props.amount_company_currency"></t>
                                 <t t-if="this.props.amount_foreign_currency">
-                                    (<span class="fa fa-money"/> <t t-out="this.props.amount_foreign_currency"/>)
+                                    (<span class="oi" data-icon="payments"/> <t t-out="this.props.amount_foreign_currency"/>)
                                 </t>
                             </td>
                         </tr>
diff --git a/addons/account/static/src/components/account_pick_currency_rate/account_pick_currency_rate.xml b/addons/account/static/src/components/account_pick_currency_rate/account_pick_currency_rate.xml
index 9fd34ce42b4283..a875943f1dee1b 100644
--- a/addons/account/static/src/components/account_pick_currency_rate/account_pick_currency_rate.xml
+++ b/addons/account/static/src/components/account_pick_currency_rate/account_pick_currency_rate.xml
@@ -8,7 +8,7 @@
             title="Pick the rate on a certain date"
             t-custom-ref="datetime-picker-target"
         >
-            <i class="fa fa-calendar"/>
+            <i class="oi oi-filled" data-icon="calendar_today"/>
         </button>
     </t>
 
diff --git a/addons/account/static/src/components/account_statusbar_secured/account_move_statusbar_secured.xml b/addons/account/static/src/components/account_statusbar_secured/account_move_statusbar_secured.xml
index ee3390810e178c..08c689684cdb64 100644
--- a/addons/account/static/src/components/account_statusbar_secured/account_move_statusbar_secured.xml
+++ b/addons/account/static/src/components/account_statusbar_secured/account_move_statusbar_secured.xml
@@ -5,7 +5,7 @@
     <t t-name="account.MoveStatusBarSecuredField.ItemLabel">
         <span t-out="item.label" />
         <t t-if="item.value == 'posted'">
-            <i t-attf-class="fa fa-fw ms-1 #{this.isSecured ? 'fa-lock text-success' : 'fa-unlock text-warning'}"/>
+            <i t-attf-class="oi oi-fw ms-1 #{this.isSecured ? 'text-success' : 'text-warning'}" t-attf-data-icon="{{this.isSecured ? 'lock' : 'lock_open'}}"/>
         </t>
     </t>
 
diff --git a/addons/account/static/src/components/actionable_errors/actionable_errors.xml b/addons/account/static/src/components/actionable_errors/actionable_errors.xml
index e4039463306b60..49325b961f0c6f 100644
--- a/addons/account/static/src/components/actionable_errors/actionable_errors.xml
+++ b/addons/account/static/src/components/actionable_errors/actionable_errors.xml
@@ -13,9 +13,9 @@
                                href="#"
                                t-on-click.prevent="() => this.handleOnClick(error_value)"
                             >
-                                <i class="oi oi-arrow-right ms-1"/>
+                                <i class="oi ms-1" data-icon="east"/>
                                 <span class="ms-1" t-out="error_value.action_text"/>
-                                <i t-if="level === 'danger'" class="fa fa-warning ms-1"/>
+                                <i t-if="level === 'danger'" class="oi ms-1" data-icon="warning"/>
                             </a>
                         </div>
                     </div>
diff --git a/addons/account/static/src/components/currency_form/open_decimal_precision_btn_template.xml b/addons/account/static/src/components/currency_form/open_decimal_precision_btn_template.xml
index bc08a6ea9941f4..b689505f78db7f 100644
--- a/addons/account/static/src/components/currency_form/open_decimal_precision_btn_template.xml
+++ b/addons/account/static/src/components/currency_form/open_decimal_precision_btn_template.xml
@@ -4,7 +4,7 @@
         <button type="button"
             class="btn btn-link p-0"
             t-on-click="this.discardAndOpen">
-            <i class="fa fa-arrow-right text-muted me-1"/>
+            <i class="oi text-muted me-1" data-icon="east"/>
              More precision on Product Prices
         </button>
     </t>
diff --git a/addons/account/static/src/components/document_state/document_state_field.xml b/addons/account/static/src/components/document_state/document_state_field.xml
index ee84cf2ed24527..54705d803d9d39 100644
--- a/addons/account/static/src/components/document_state/document_state_field.xml
+++ b/addons/account/static/src/components/document_state/document_state_field.xml
@@ -4,7 +4,7 @@
         <div class="row m-2 mt-4 justify-content-between account_document_state_popover">
             <span class="col-10" t-out="this.props.message" style="white-space: pre-wrap;"/>
             <button class="col-2 btn p-0 account_document_state_popover_clone" t-on-click="() => this.props.copyText()">
-                <i class="fa fa-clipboard"/>
+                <i class="oi" data-icon="assignment"/>
             </button>
         </div>
     </t>
@@ -14,7 +14,7 @@
             <span t-if="this.message"> </span>
             <a t-if="this.message"
                t-on-click="(ev) => this.showMessagePopover(ev)"
-               class="fa fa-info-circle"/>
+               class="oi" data-icon="info"/>
         </span>
     </t>
 </templates>
diff --git a/addons/account/static/src/components/fetch_einvoices/fetch_einvoices.xml b/addons/account/static/src/components/fetch_einvoices/fetch_einvoices.xml
index 5eeb1c37642bcd..459e37b5a58431 100644
--- a/addons/account/static/src/components/fetch_einvoices/fetch_einvoices.xml
+++ b/addons/account/static/src/components/fetch_einvoices/fetch_einvoices.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
     <t t-name="account.FetchEInvoices">
         <DropdownItem onSelected.bind="this.fetchEInvoices">
-            <i class="fa fa-fw fa-refresh me-1" aria-hidden="true"></i><t t-out="this.buttonLabel" />
+            <i class="oi oi-fw me-1" data-icon="refresh" aria-hidden="true"></i><t t-esc="this.buttonLabel" />
         </DropdownItem>
     </t>
 </templates>
diff --git a/addons/account/static/src/components/mail_attachments/mail_attachments.xml b/addons/account/static/src/components/mail_attachments/mail_attachments.xml
index a5b358c16f35b7..52889046832882 100644
--- a/addons/account/static/src/components/mail_attachments/mail_attachments.xml
+++ b/addons/account/static/src/components/mail_attachments/mail_attachments.xml
@@ -8,10 +8,10 @@
                         <span t-out="attachment.name" class="flex-grow-1 text-truncate"/>
 
                         <button class="btn flex-shrink-0" t-on-click.stop="() => this.onFileRemove(attachment.id)">
-                            <i class="fa fa-fw fa-times"/>
+                            <i class="oi oi-fw" data-icon="close"/>
                         </button>
 
-                        <i class="fa fa-fw o_button_icon fa-warning" t-if="attachment.tooltip" t-att-data-tooltip="attachment.tooltip"></i>
+                        <i class="oi oi-fw o_button_icon" data-icon="warning" t-if="attachment.tooltip" t-att-data-tooltip="attachment.tooltip"></i>
                     </li>
                 </t>
             </t>
diff --git a/addons/account/static/src/components/many2many_tags_banks/many2many_tags_banks.xml b/addons/account/static/src/components/many2many_tags_banks/many2many_tags_banks.xml
index bef9c260ca30cd..5a682265cdf449 100644
--- a/addons/account/static/src/components/many2many_tags_banks/many2many_tags_banks.xml
+++ b/addons/account/static/src/components/many2many_tags_banks/many2many_tags_banks.xml
@@ -2,8 +2,8 @@
 <templates xml:space="preserve">
     <t t-name="account.BankTag">
         <BadgeTag color="this.props.color" onClick="this.props.onClick" onDelete="this.props.onDelete" tooltip="this.props.tooltip" crossTooltip="this.props.crossTooltip">
-            <i t-if="this.props.allowOutPayment" class="me-1 fa fa-shield text-success" data-tooltip="Trusted"/>
-            <i t-else="" class="me-1 fa fa-exclamation-circle text-danger" data-tooltip="Untrusted"/>
+            <i t-if="this.props.allowOutPayment" class="me-1 oi text-success" data-icon="security" data-tooltip="Trusted"/>
+            <i t-else="" class="me-1 oi text-danger" data-icon="error" data-tooltip="Untrusted"/>
             <div class="o_tag_badge_text" t-out="this.props.text"/>
         </BadgeTag>
     </t>
diff --git a/addons/account/static/src/components/manyone_banks/many2one_banks.js b/addons/account/static/src/components/manyone_banks/many2one_banks.js
index 98d75309dd51df..2f6a57ab60324f 100644
--- a/addons/account/static/src/components/manyone_banks/many2one_banks.js
+++ b/addons/account/static/src/components/manyone_banks/many2one_banks.js
@@ -13,10 +13,10 @@ import { Many2XAutocomplete } from "@web/views/fields/relational_utils";
 export class Many2XAutocompleteBank extends Many2XAutocomplete {
     buildRecordSuggestion(request, record) {
         const recordSuggestion = super.buildRecordSuggestion(request, record);
-        const icon = record.allow_out_payment ? "fa-shield" : "fa-exclamation-circle";
+        const icon = record.allow_out_payment ? "security" : "error";
         const colorClass = record.allow_out_payment ? "text-success" : "text-danger";
         const title = record.allow_out_payment ? _t("Trusted") : _t("Untrusted");
-        recordSuggestion.label = markup`<i class="me-1 fa ${icon} ${colorClass}" title="${title}"></i> ${recordSuggestion.label}`;
+        recordSuggestion.label = markup`<i class="me-1 oi ${colorClass}" data-icon="${icon}" title="${title}"></i> ${recordSuggestion.label}`;
         return recordSuggestion;
     }
 
diff --git a/addons/account/static/src/components/manyone_banks/many2one_banks.xml b/addons/account/static/src/components/manyone_banks/many2one_banks.xml
index 9de6291db8ab12..d79daa6a6057f5 100644
--- a/addons/account/static/src/components/manyone_banks/many2one_banks.xml
+++ b/addons/account/static/src/components/manyone_banks/many2one_banks.xml
@@ -3,8 +3,8 @@
     <t t-name="account.Many2OneBank" t-inherit="web.Many2One">
         <xpath expr="//t[@t-if='this.props.readonly']" position="before">
             <t t-if="this.props.value.id">
-                <i t-if="this.props.value.allow_out_payment" class="fa fa-shield text-success align-self-center o_input_box_overlay_start" title="Trusted"/>
-                <i t-else="" class="fa fa-exclamation-circle text-danger o_input_box_overlay_start" title="Untrusted"/>
+                <i t-if="this.props.value.allow_out_payment" class="oi text-success align-self-center o_input_box_overlay_start" data-icon="security" title="Trusted"/>
+                <i t-else="" class="oi text-danger o_input_box_overlay_start" data-icon="error" title="Untrusted"/>
             </t>
         </xpath>
     </t>
diff --git a/addons/account/static/src/components/onboarding/onboarding.xml b/addons/account/static/src/components/onboarding/onboarding.xml
index 6fef66924c2507..ec1adb003d7ae0 100644
--- a/addons/account/static/src/components/onboarding/onboarding.xml
+++ b/addons/account/static/src/components/onboarding/onboarding.xml
@@ -4,10 +4,10 @@
     <t t-name="account.Onboarding">
         <div class="">
             <div class="col-auto my-1" t-foreach="this.recordOnboardingSteps" t-as="step" t-key="step.id">
-                <i class="fa me-2 fs-5" t-att-class="{
-                    'fa-circle text-secondary': step.state == 'not_done',
-                    'fa-check-circle text-success': step.state != 'not_done',
-                }"/>
+                <i class="oi oi-filled me-2 fs-5" t-att-class="{
+                    'text-secondary': step.state == 'not_done',
+                    'text-success': step.state != 'not_done',
+                }" t-attf-data-icon="{{ step.state == 'not_done' ? 'circle' : 'check_circle' }}"/>
                 <a href="#"
                    t-att-data-method="step.action"
                    data-model="onboarding.onboarding.step"
diff --git a/addons/account/static/src/components/product_catalog/search/search_panel.xml b/addons/account/static/src/components/product_catalog/search/search_panel.xml
index 91e6933036e8fe..06d860e13f543a 100644
--- a/addons/account/static/src/components/product_catalog/search/search_panel.xml
+++ b/addons/account/static/src/components/product_catalog/search/search_panel.xml
@@ -9,7 +9,7 @@
         <section position="before">
             <section t-if="this.showSections" class="o_search_panel_sections mt-4 pb-4 border-bottom">
                 <header class="d-flex align-items-center cursor-default gap-2 mb-3 ps-2">
-                    <i class="fa fa-filter text-primary"/>
+                    <i class="oi oi-filled" data-icon="filter_alt"/>
                     <b class="text-uppercase">Sections</b>
                     <div class="d-flex align-items-center ms-auto">
                         <span class="me-2">Filter</span>
@@ -43,11 +43,13 @@
                             <t t-set="section" t-value="this.state.sections.get(sectionId)"/>
                             <span
                                 t-if="sectionId"
-                                class="o_row_handle oi oi-draggable ui-sortable-handle"
+                                class="o_row_handle ui-sortable-handle oi"
+                                data-icon="drag_indicator"
                             />
                             <i
                                 t-else=""
-                                class="fa fa-pencil"
+                                class="oi oi-filled"
+                                data-icon="edit"
                                 t-on-click="() => this.enableSectionInput('top')"
                             />
                             <input
diff --git a/addons/account/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.xml b/addons/account/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.xml
index 78747f8f2fc09c..dc055992c8526d 100644
--- a/addons/account/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.xml
+++ b/addons/account/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.xml
@@ -32,7 +32,8 @@
                     <Many2One t-props="this.m2oProps" t-on-keydown="this.onM2oInputKeydown"/>
                     <t t-if="this.showLabelVisibilityToggler">
                         <button
-                            class="o_input_box_overlay_end btn btn-link fa fa-bars"
+                            class="o_input_box_overlay_end btn btn-link oi"
+                            data-icon="menu"
                             id="labelVisibilityButtonId"
                             data-tooltip="Click or press enter to add a description"
                             t-on-click="() => this.switchLabelVisibility()"
diff --git a/addons/account/static/src/components/section_and_note_fields_backend/section_and_note_fields_backend.xml b/addons/account/static/src/components/section_and_note_fields_backend/section_and_note_fields_backend.xml
index db57f8f04eff92..f83638e6feec97 100644
--- a/addons/account/static/src/components/section_and_note_fields_backend/section_and_note_fields_backend.xml
+++ b/addons/account/static/src/components/section_and_note_fields_backend/section_and_note_fields_backend.xml
@@ -13,17 +13,17 @@
             <td t-else="" class="o_list_section_options w-print-0 p-print-0 text-center">
                 <Dropdown position="'bottom-end'" t-if="!this.props.readonly">
                     <button class="btn d-table-cell border-0 py-0 px-1 cursor-pointer">
-                        <i class="fa fa-ellipsis-v"/>
+                        <i class="oi" data-icon="more_vert"/>
                     </button>
                     <t t-set-slot="content">
                         <t t-if="this.isSectionInPage(record)">
                             <DropdownItem onSelected="() => this.addRowInSection(record, false)">
-                                <i class="me-1 fa fa-fw fa-plus"/><span>Add a line</span>
+                                <i class="me-1 oi oi-fw" data-icon="add"/><span>Add a line</span>
                             </DropdownItem>
                             <t t-if="this.isTopSection(record)">
                                 <t t-if="this.props.subsections">
                                     <DropdownItem onSelected="() => this.addRowInSection(record, true)">
-                                        <i class="me-1 fa fa-fw fa-level-down"/><span>Add a subsection</span>
+                                        <i class="me-1 oi oi-fw" data-icon="subdirectory_arrow_right"/><span>Add a subsection</span>
                                     </DropdownItem>
                                 </t>
                             </t>
@@ -32,7 +32,7 @@
                                 onSelected="() => this.toggleCollapse(record, 'collapse_prices')"
                                 attrs="{ 'class': this.disablePricesButton(record) ? 'disabled' : '' }"
                             >
-                                <i class="me-1 fa fa-fw" t-att-class="this.hidePrices(record) ? 'fa-eye' : 'fa-eye-slash'"/>
+                                <i class="oi oi-fw me-1" t-att-data-icon="this.hidePrices(record) ? 'visibility' : 'visibility_off'"/>
                                 <span t-if="this.hidePrices(record)">Show Prices</span>
                                 <span t-else="">Hide Prices</span>
                             </DropdownItem>
@@ -42,35 +42,35 @@
                                     onSelected="() => this.toggleCollapse(record, 'collapse_composition')"
                                     attrs="{ 'class': this.disableCompositionButton(record) ? 'disabled' : '' }"
                                 >
-                                    <i class="me-1 fa fa-fw" t-att-class="this.hideComposition(record) ? 'fa-expand' : 'fa-compress'"/>
+                                    <i class="oi oi-fw me-1" t-att-data-icon="this.hideComposition(record) ? 'expand_content' : 'close_fullscreen'"/>
                                     <span t-if="this.hideComposition(record)">Show Composition</span>
                                     <span t-else="">Hide Composition</span>
                                 </DropdownItem>
                             </t>
                             <DropdownItem onSelected="() => this.addNoteInSection(record)">
-                                <i class="me-1 fa fa-fw fa-sticky-note-o"/><span>Add a note</span>
+                                <i class="oi oi-fw me-1" data-icon="sticky_note_2"/><span>Add a note</span>
                             </DropdownItem>
                             <DropdownItem t-if="this.hasPreviousSection(record)" onSelected="() => this.moveSectionUp(record)">
-                                <i class="me-1 fa fa-fw fa-arrow-up"/><span>Move Up</span>
+                                <i class="oi oi-fw me-1" data-icon="arrow_upward"/><span>Move Up</span>
                             </DropdownItem>
                             <t t-set="nextSectionInPage" t-value="this.isNextSectionInPage(record)"/>
                             <t t-set="moveDownItemAttrs" t-value="nextSectionInPage ? {} : { 'data-tooltip': this.disabledMoveDownItemTooltip }"/>
                             <t t-set="moveDownItemDefaultProps" t-value="{ attrs: moveDownItemAttrs, class: { 'text-muted': !nextSectionInPage } }"/>
                             <DropdownItem t-if="this.hasNextSection(record)" t-props="moveDownItemDefaultProps" onSelected="() => this.moveSectionDown(record)">
-                                <i class="me-1 fa fa-fw fa-arrow-down"/><span>Move Down</span>
+                                <i class="oi oi-fw me-1" data-icon="arrow_downward"/><span>Move Down</span>
                             </DropdownItem>
                             <DropdownItem onSelected="() => this.duplicateSection(record)">
-                                <i class="me-1 fa fa-fw fa-clone"/><span>Duplicate</span>
+                                <i class="oi oi-fw me-1" data-icon="content_copy"/><span>Duplicate</span>
                             </DropdownItem>
                             <t t-if="hasDeleteButton">
                                 <DropdownItem onSelected="() => this.deleteSection(record)" class="'text-danger'">
-                                    <i class="me-1 fa fa-fw fa-trash"/><span>Delete</span>
+                                    <i class="oi oi-fw oi-filled me-1" data-icon="delete"/><span>Delete</span>
                                 </DropdownItem>
                             </t>
                         </t>
                         <t t-else="">
                             <DropdownItem onSelected="() => this.expandPager()" attrs="{ 'data-tooltip': this.showAllItemsTooltip }">
-                                <i class="me-1 fa fa-fw fa-expand"/><span>Show all lines</span>
+                                <i class="oi oi-fw me-1" data-icon="expand_content"/><span>Show all lines</span>
                             </DropdownItem>
                         </t>
                     </t>
diff --git a/addons/account/static/src/components/section_state/section_state_icon.js b/addons/account/static/src/components/section_state/section_state_icon.js
index 46304ce1371296..19c5c48608ae69 100644
--- a/addons/account/static/src/components/section_state/section_state_icon.js
+++ b/addons/account/static/src/components/section_state/section_state_icon.js
@@ -3,8 +3,8 @@ import { registry } from '@web/core/registry';
 import { standardWidgetProps } from '@web/views/widgets/standard_widget_props';
 
 export const COLLAPSE_ICONS = {
-    collapse_composition: 'fa fa-compress',
-    collapse_prices: 'fa fa-eye-slash',
+    collapse_composition: 'close_fullscreen',
+    collapse_prices: 'visibility_off',
 }
 
 export class SectionStateIcon extends Component {
@@ -14,7 +14,7 @@ export class SectionStateIcon extends Component {
         iconMapping: Object,
     };
 
-    get iconClass() {
+    get icon() {
         for (const [field, icon] of Object.entries(this.props.iconMapping)) {
             if (this.props.record.data[field]) {
                 return icon;
diff --git a/addons/account/static/src/components/section_state/section_state_icon.xml b/addons/account/static/src/components/section_state/section_state_icon.xml
index 6d3d8ede9993f9..73f68ade0c7c57 100644
--- a/addons/account/static/src/components/section_state/section_state_icon.xml
+++ b/addons/account/static/src/components/section_state/section_state_icon.xml
@@ -4,8 +4,9 @@
     <t t-name="account.SectionStateIcon">
         <t t-if="['line_section', 'line_subsection'].includes(this.props.record.data.display_type)">
             <i
-                class="ms-1 mt-1 text-muted"
+                class="oi ms-1 mt-1 text-muted"
                 t-att-class="this.iconClass"
+                t-att-data-icon="this.icon"
                 aria-hidden="true"
             />
         </t>
diff --git a/addons/account/static/src/components/tax_totals/tax_totals.xml b/addons/account/static/src/components/tax_totals/tax_totals.xml
index 55578cd65c2ad2..6acf63d0b7b2aa 100644
--- a/addons/account/static/src/components/tax_totals/tax_totals.xml
+++ b/addons/account/static/src/components/tax_totals/tax_totals.xml
@@ -24,7 +24,7 @@
                     <t t-else="">
                         <span class="o_tax_group_edit" t-on-click.prevent="() => this.setState('edit')">
                             <span class="o_tax_group_amount_value o_list_monetary">
-                                <i class="fa fa-pencil me-2"/> <t t-out="this.formatMonetary(this.props.taxGroup.tax_amount_currency)"/>
+                                <i class="oi oi-filled me-2" data-icon="edit"/> <t t-out="this.formatMonetary(this.props.taxGroup.tax_amount_currency)"/>
                             </span>
                         </span>
                     </t>
diff --git a/addons/account/static/src/components/upload_drop_zone/upload_drop_zone.xml b/addons/account/static/src/components/upload_drop_zone/upload_drop_zone.xml
index 4dbdc585af9e42..3c17230c21d32c 100644
--- a/addons/account/static/src/components/upload_drop_zone/upload_drop_zone.xml
+++ b/addons/account/static/src/components/upload_drop_zone/upload_drop_zone.xml
@@ -18,8 +18,8 @@
                     </div>
                     <t t-if="this.props.visible">
                         <div class="position-absolute upload_badge pe-none">
-                            <i class="fa fa-circle fa-stack-2x text-primary"/>
-                            <i class="fa fa-upload fa-stack-1x fa-inverse"/>
+                            <i class="oi oi-stack-2x text-primary" data-icon="circle"/>
+                            <i class="oi oi-stack-1x" data-icon="upload"/>
                         </div>
                    </t>
                     <div class="h3 pe-none" t-att-class="{'text-primary': this.props.visible}">
@@ -42,9 +42,9 @@
                         src="/account/static/src/img/bill.svg"
                         style="height: auto; width: 120px;"
                     />
-                    <span class="position-absolute fa-stack-2x mt-2">
-                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
-                        <i class="fa fa-upload fa-stack-1x fa-inverse"></i>
+                    <span class="position-absolute oi-stack-2x mt-2">
+                        <i class="oi oi-stack-2x oi-filled text-primary" data-icon="circle"></i>
+                        <i class="oi oi-stack-1x" data-icon="upload"></i>
                     </span>
                     <h2 class="mt-5 fw-bold text-primary text-center">
                         <t t-out="this.props.dropZoneTitle"/>
diff --git a/addons/account/static/src/css/account.css b/addons/account/static/src/css/account.css
index af95b68b06ed4f..e1a6c4326ff67b 100644
--- a/addons/account/static/src/css/account.css
+++ b/addons/account/static/src/css/account.css
@@ -68,7 +68,7 @@
         display: inline-block;
     }
 
-    i.fa {
+    i.oi {
         margin-left: 2px;
     }
 }
diff --git a/addons/account/static/src/js/tours/tour_utils.js b/addons/account/static/src/js/tours/tour_utils.js
index 0095c4fe66db86..312b3b427dc30c 100644
--- a/addons/account/static/src/js/tours/tour_utils.js
+++ b/addons/account/static/src/js/tours/tour_utils.js
@@ -62,7 +62,7 @@ export function addSectionFromProductCatalog() {
         },
         {
             content: "Wait for product to be added",
-            trigger: '.o_kanban_record:contains("Test Product"):not(:has(.fa-shopping-cart))',
+            trigger: '.o_kanban_record:contains("Test Product"):not(:has([data-icon="shopping_cart"]))',
         },
         {
             content: "Close the catalog",
diff --git a/addons/account/static/src/scss/account_journal_dashboard.scss b/addons/account/static/src/scss/account_journal_dashboard.scss
index f1c0ca26eb6f53..936fa27dece2e0 100644
--- a/addons/account/static/src/scss/account_journal_dashboard.scss
+++ b/addons/account/static/src/scss/account_journal_dashboard.scss
@@ -17,14 +17,15 @@
         .o_dashboard_star {
             font-size: 12px;
 
-            &.fa-star-o {
+            &[data-icon="star"] {
                 color: $o-main-color-muted;
                 &:hover {
                     color: gold;
                 }
-            }
-            &.fa-star {
-                color: gold;
+
+                &.oi-filled {
+                    color: gold;
+                }
             }
         }
 
diff --git a/addons/account/static/tests/account_number_widget.test.js b/addons/account/static/tests/account_number_widget.test.js
index 1d59b4f5bc5468..8273b4999e876a 100644
--- a/addons/account/static/tests/account_number_widget.test.js
+++ b/addons/account/static/tests/account_number_widget.test.js
@@ -57,7 +57,7 @@ test("Account Number Widget full flow", async () => {
     await contains(".o_account_number", { count: 0 }); // "Shouldn't change its state of display"
     await advanceTime(DELAY);
     await contains(".o_account_number"); // "Should contain a validation icon 400ms after edition"
-    await contains(".o_account_number i.fa.fa-check"); // "The validation icon should be the successful one"
+    await contains(".o_account_number i[data-icon='check']"); // "The validation icon should be the successful one"
     await click(".o_form_button_save");
     await advanceTime(DELAY);
     await contains(".o_account_number"); // "Should display validation icon at all time even when not editing"
diff --git a/addons/account/views/account_account_views.xml b/addons/account/views/account_account_views.xml
index 39a7209ca12b76..c41d83a9cf806a 100644
--- a/addons/account/views/account_account_views.xml
+++ b/addons/account/views/account_account_views.xml
@@ -9,7 +9,7 @@
                     <sheet>
                         <div class="oe_button_box" name="button_box">
                             <button class="oe_stat_button" name="action_open_related_taxes"
-                                    type="object" icon="fa-bars"
+                                    type="object" icon="menu"
                                     invisible="related_taxes_amount == 0">
                                 <div class="o_stat_info">
                                     <span class="o_stat_value">
@@ -21,7 +21,7 @@
                                 </div>
                             </button>
                             <button class="oe_stat_button" name="account.action_move_line_select"
-                                    type="action" icon="fa-bars">
+                                    type="action" icon="menu">
                                 <div class="o_stat_info">
                                     <span class="o_stat_value">
                                         <field name="current_balance"/>
@@ -185,7 +185,7 @@
                         <filter string="Account Type" name="accounttype" domain="" context="{'group_by':'account_type'}"/>
                     </group>
                     <searchpanel class="account_root w-auto">
-                        <field name="root_id" icon="fa-filter" limit="false"/>
+                        <field name="root_id" icon="filter_alt" icon_class="oi-filled" limit="false"/>
                     </searchpanel>
                 </search>
             </field>
diff --git a/addons/account/views/account_analytic_account_views.xml b/addons/account/views/account_analytic_account_views.xml
index cbd9b8e27103ed..bd137f0dbcd0c2 100644
--- a/addons/account/views/account_analytic_account_views.xml
+++ b/addons/account/views/account_analytic_account_views.xml
@@ -10,11 +10,11 @@
             <field name="arch" type="xml">
                 <div name="button_box" position="inside">
                     <button class="oe_stat_button" type="object" name="action_view_invoice"
-                        icon="fa-pencil-square-o" invisible="invoice_count == 0">
+                        icon="edit_square" invisible="invoice_count == 0">
                         <field string="Customer Invoices" name="invoice_count" widget="statinfo"/>
                     </button>
                     <button class="oe_stat_button" type="object" name="action_view_vendor_bill"
-                        icon="fa-file-text-o" invisible="vendor_bill_count == 0">
+                        icon="article" invisible="vendor_bill_count == 0">
                         <field string="Vendor Bills" name="vendor_bill_count" widget="statinfo"/>
                     </button>
                 </div>
diff --git a/addons/account/views/account_journal_views.xml b/addons/account/views/account_journal_views.xml
index 7ec28032c5f26c..9c48bd26f2cea5 100644
--- a/addons/account/views/account_journal_views.xml
+++ b/addons/account/views/account_journal_views.xml
@@ -33,7 +33,7 @@
                     <sheet>
                         <div name="button_box" class="oe_button_box">
                             <button class="oe_stat_button" type="action"
-                                    name="%(action_account_moves_all_a)d" icon="fa-book"
+                                    name="%(action_account_moves_all_a)d" icon="book"
                                     context="{'search_default_journal_id':id}">
                                     <div class="o_stat_info">
                                         <span class="o_stat_text">Journal Entries</span>
@@ -170,7 +170,7 @@
                                         <field name="display_alias_fields" invisible="1"/>
                                         <div class="o_row" colspan="2" invisible="display_alias_fields">
                                             <a type='action' name='%(action_open_settings)d' class="btn btn-link" role="button">
-                                                <i class="oi oi-fw o_button_icon oi-arrow-right"/> Configure Alias Domain
+                                                <i class="o_button_icon oi me-2" data-icon="east"/> Configure Alias Domain
                                             </a>
                                         </div>
                                         <div class="o_row" colspan="2" dir="ltr" invisible="not display_alias_fields">
diff --git a/addons/account/views/account_lock_exception_views.xml b/addons/account/views/account_lock_exception_views.xml
index 851553240f7e29..343efa7c8c600a 100644
--- a/addons/account/views/account_lock_exception_views.xml
+++ b/addons/account/views/account_lock_exception_views.xml
@@ -16,7 +16,7 @@
                         <widget name="web_ribbon" title="Revoked" bg_color="bg-danger" invisible="active"/>
                         <div class="oe_button_box" name="button_box">
                             <button class="oe_stat_button" name="action_show_audit_trail_during_exception"
-                                    type="object" icon="fa-bars">
+                                    type="object" icon="menu">
                                 <div class="o_stat_info">
                                     <span class="o_stat_text">
                                         Audit
diff --git a/addons/account/views/account_move_views.xml b/addons/account/views/account_move_views.xml
index 7865164cfd6ec1..6b55dbdedeff42 100644
--- a/addons/account/views/account_move_views.xml
+++ b/addons/account/views/account_move_views.xml
@@ -98,7 +98,7 @@
                                     <field name="account_id"/>
                                 </div>
                                 <strong t-if="record.date_maturity.raw_value" class="col-4 ps-0 text-end">
-                                    <i class="fa fa-clock-o" aria-label="Date" role="img" title="Date"/> <field name="date_maturity"/>
+                                    <i class="oi" data-icon="schedule" aria-label="Date" role="img" title="Date"/> <field name="date_maturity"/>
                                 </strong>
                             </div>
                             <div class="row mb4" style="min-height: 60px;">
@@ -201,7 +201,7 @@
                     <field name="parent_state" column_invisible="True"/>
                     <field name="deductible_amount" optional="hide"/>
                     <groupby name="partner_id">
-                        <button name="edit" type="edit" icon="fa-edit"/>
+                        <button name="edit" type="edit" icon="edit" icon_class="oi-filled"/>
                     </groupby>
                     <groupby name="move_id">
                         <button name="action_post" type="object" string="Post" class="btn-primary" invisible="state != 'draft'" groups="account.group_account_user"/>
@@ -391,7 +391,7 @@
                         <filter string="Matching" name="group_by_matching" domain="[]" context="{'group_by': 'matching_number'}"/>
                     </group>
                     <searchpanel class="account_root w-auto">
-                        <field name="account_root_id" icon="fa-filter" groupby="account_id" limit="false"/>
+                        <field name="account_root_id" icon="filter_alt" icon_class="oi-filled" groupby="account_id" limit="false"/>
                     </searchpanel>
                 </search>
             </field>
@@ -867,7 +867,7 @@
                                 type="object"
                                 class="btn btn-link text-danger ms-auto d-flex align-items-center gap-1"
                                 invisible="not is_draft_duplicated_ref_ids">
-                            <i class="fa fa-trash text-danger"/>
+                            <i class="oi oi-filled text-danger" data-icon="delete"/>
                             <span class="text-danger" invisible="duplicated_ref_ids.length == 1">Delete all duplicates</span>
                             <span class="text-danger" invisible="duplicated_ref_ids.length &gt; 1">Delete duplicate</span>
                         </button>
@@ -907,7 +907,7 @@
                         <div name="button_box" class="oe_button_box">
                             <button name="action_open_business_doc"
                                     class="oe_stat_button"
-                                    icon="fa-bars"
+                                    icon="menu"
                                     type="object"
                                     invisible="move_type != 'entry' or not id or not origin_payment_id">
                                     <div class="o_stat_info">
@@ -917,14 +917,14 @@
                             <button name="open_payments"
                                     groups="account.group_account_invoice,account.group_account_readonly"
                                     class="oe_stat_button"
-                                    icon="fa-bars"
+                                    icon="menu"
                                     type="object"
                                     invisible="not payment_count">
                                     <field name="payment_count" string="Payments" widget="statinfo"/>
                             </button>
                             <button name="open_reconcile_view"
                                     class="oe_stat_button"
-                                    icon="fa-bars"
+                                    icon="menu"
                                     type="object"
                                     invisible="move_type != 'entry' or not id or not has_reconciled_entries">
                                     <div class="o_stat_info">
@@ -933,7 +933,7 @@
                             </button>
                             <button name="open_created_caba_entries"
                                     class="oe_stat_button"
-                                    icon="fa-usd"
+                                    icon="attach_money"
                                     type="object"
                                     invisible="not tax_cash_basis_created_move_ids">
                                     <div class="o_stat_info">
@@ -942,14 +942,14 @@
                             </button>
                             <button name="open_adjusting_entries"
                                     class="oe_stat_button"
-                                    icon="fa-bars"
+                                    icon="menu"
                                     type="object"
                                     invisible="not adjusting_entries_move_ids">
                                     <field name="adjusting_entries_count" string="Adjusting Entries" widget="statinfo"/>
                             </button>
                             <button name="open_adjusting_entry_origin_moves"
                                     class="oe_stat_button"
-                                    icon="fa-bars"
+                                    icon="menu"
                                     type="object"
                                     invisible="not adjusting_entry_origin_move_ids">
                                     <div invisible="adjusting_entry_origin_moves_count != 1" class="o_stat_info">
@@ -1070,7 +1070,7 @@
                                     <button name="action_update_fpos_values" type="object"
                                             string="Update Taxes and Accounts"
                                             help="Recompute all taxes and accounts based on this fiscal position"
-                                            class="btn-link mb-1 px-0" icon="fa-refresh"
+                                            class="btn-link mb-1 px-0" icon="refresh"
                                             invisible="not show_update_fpos or state in ['cancel', 'posted']"/>
                                 </div>
 
@@ -1154,7 +1154,7 @@
                                              invisible="state != 'draft' or invoice_currency_rate == expected_currency_rate">
                                             <button type="object"
                                                     name="refresh_invoice_currency_rate"
-                                                    icon="fa-refresh"
+                                                    icon="refresh"
                                                     title="Reset the currency rate to the default accordingly to the invoice date"
                                                     class="btn btn-link p-0"/>
                                         </div>
@@ -1182,7 +1182,7 @@
                                              invisible="show_journal or state != 'draft' or invoice_currency_rate == expected_currency_rate">
                                             <button type="object"
                                                     name="refresh_invoice_currency_rate"
-                                                    icon="fa-refresh"
+                                                    icon="refresh"
                                                     title="Reset the currency rate to the default accordingly to the invoice date"
                                                     class="btn btn-link p-0"/>
                                         </div>
diff --git a/addons/account/views/account_payment_view.xml b/addons/account/views/account_payment_view.xml
index 0a9fafd80bb72d..598574d5c506af 100644
--- a/addons/account/views/account_payment_view.xml
+++ b/addons/account/views/account_payment_view.xml
@@ -190,7 +190,7 @@
                         <div class="oe_button_box" name="button_box">
                             <!-- Invoice stat button -->
                             <button name="button_open_invoices" type="object"
-                                    class="oe_stat_button" icon="fa-bars"
+                                    class="oe_stat_button" icon="menu"
                                     invisible="reconciled_invoices_count == 0">
                                 <div class="o_form_field o_stat_info">
                                     <span class="o_stat_text">
@@ -203,7 +203,7 @@
 
                             <!-- Bill stat button -->
                             <button name="button_open_bills" type="object"
-                                    class="oe_stat_button" icon="fa-bars"
+                                    class="oe_stat_button" icon="menu"
                                     invisible="reconciled_bills_count == 0">
                                 <div class="o_form_field o_stat_info">
                                     <span class="o_stat_text">
@@ -215,7 +215,7 @@
 
                             <!-- Statement stat button -->
                             <button name="button_open_statement_lines" type="object"
-                                    class="oe_stat_button" icon="fa-bars"
+                                    class="oe_stat_button" icon="menu"
                                     invisible="reconciled_statement_lines_count == 0">
                                 <div class="o_form_field o_stat_info">
                                     <field name="reconciled_statement_lines_count"/>
@@ -227,7 +227,7 @@
                             <button name="button_open_journal_entry"
                                     type="object"
                                     class="oe_stat_button"
-                                    icon="fa-bars"
+                                    icon="menu"
                                     invisible="not move_id"
                                     groups="account.group_account_user,account.group_account_readonly">
                                 <div class="o_stat_info">
diff --git a/addons/account/views/account_portal_templates.xml b/addons/account/views/account_portal_templates.xml
index fcb86235b29a43..98d4b9d754be08 100644
--- a/addons/account/views/account_portal_templates.xml
+++ b/addons/account/views/account_portal_templates.xml
@@ -49,27 +49,27 @@
                             <t t-if="invoice.state == 'posted'" name="invoice_status_posted">
                                 <span t-if="invoice.currency_id.is_zero(invoice.amount_residual)"
                                       class="badge rounded-pill text-bg-success">
-                                    <i class="fa fa-fw fa-check" aria-label="Paid" title="Paid" role="img"/>
+                                    <i class="oi oi-fw" data-icon="check" aria-label="Paid" title="Paid" role="img"/>
                                     <span class="d-none d-md-inline"> Paid</span>
                                 </span>
                                 <span t-elif="invoice.payment_state == 'in_payment' and not invoice.currency_id.is_zero(invoice.amount_residual)"
                                       class="badge rounded-pill text-bg-info">
-                                    <i class="fa fa-fw fa-check" aria-label="processing_payment" title="Processing Payment" role="img"/>
+                                    <i class="oi oi-fw" data-icon="check" aria-label="processing_payment" title="Processing Payment" role="img"/>
                                     <span class="d-none d-md-inline"> Processing Payment</span>
                                 </span>
                                 <span t-elif="invoice.payment_state == 'reversed'"
                                       class="badge rounded-pill text-bg-success">
-                                    <i class="fa fa-fw fa-check" aria-label="Reversed" title="Reversed" role="img"/>
+                                    <i class="oi oi-fw" data-icon="check" aria-label="Reversed" title="Reversed" role="img"/>
                                     <span class="d-none d-md-inline"> Reversed</span>
                                 </span>
                                 <span t-else="" class="badge rounded-pill text-bg-info" name="invoice_status_waiting_for_payment">
-                                    <i class="fa fa-fw fa-clock-o" aria-label="Opened" title="Opened" role="img"/>
+                                    <i class="oi oi-fw" data-icon="schedule" aria-label="Opened" title="Opened" role="img"/>
                                     <span class="d-none d-md-inline"> Waiting for Payment</span>
                                 </span>
                             </t>
                             <t t-elif="invoice.state == 'cancel'">
                                 <span class="badge rounded-pill text-bg-warning">
-                                    <i class="fa fa-fw fa-remove" aria-label="Cancelled" title="Cancelled" role="img"/>
+                                    <i class="oi oi-fw" data-icon="close" aria-label="Cancelled" title="Cancelled" role="img"/>
                                     <span class="d-none d-md-inline"> Cancelled</span>
                                 </span>
                             </t>
@@ -142,7 +142,7 @@
                             Left to Pay:
                         <span t-out="amount_due" t-options="{'widget': 'monetary', 'display_currency': currency}"/>
                             <div t-if="installment_state and is_last_installment" class="w-100 mt-2">
-                                <i class="fa fa-clock-o"/>
+                                <i class="oi" data-icon="schedule"/>
                                 <span class="o_portal_sidebar_timeago" t-att-datetime="due_date"/>
                             </div>
                         </div>
@@ -163,7 +163,7 @@
                         />
                     </t>
                     <div class="small w-100 text-center" t-if="payment_state in ('not_paid', 'partial') and not (is_last_installment and installment_state)">
-                        <i class="fa fa-clock-o"/>
+                        <i class="oi" data-icon="schedule"/>
                         <span class="o_portal_sidebar_timeago ml4" t-att-datetime="next_due_date"/>
                     </div>
                 </t>
@@ -172,7 +172,7 @@
                         <div class="d-flex flex-column gap-2">
                             <div class="o_download_pdf d-flex flex-lg-column flex-xl-row flex-wrap gap-2">
                                 <a class="btn btn-light o_download_btn flex-grow-1" t-att-href="invoice.get_portal_url(report_type='pdf', download=True)" title="Download" role="button">
-                                    <i class="fa fa-download"/> Download
+                                    <i class="oi oi-fw" data-icon="download"/> Download
                                 </a>
                             </div>
                         </div>
@@ -208,7 +208,7 @@
 
                     <div class="o_portal_html_view position-relative bg-white shadow overflow-hidden">
                         <div class="o_portal_html_loader text-center">
-                            <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-black-50"></i>
+                            <i class="oi oi-fw oi-spin oi-2x text-black-50" data-icon="autorenew"></i>
                         </div>
                         <iframe id="invoice_html" class="position-relative d-block" width="100%" height="100%" frameborder="0" scrolling="no" t-att-src="invoice.get_portal_url(report_type='html')"/>
                     </div>
diff --git a/addons/account/views/account_reconcile_model_views.xml b/addons/account/views/account_reconcile_model_views.xml
index 7a161db8ef82be..8f5f72ac7ee2d9 100644
--- a/addons/account/views/account_reconcile_model_views.xml
+++ b/addons/account/views/account_reconcile_model_views.xml
@@ -40,7 +40,7 @@
                     <sheet>
                         <div class="oe_button_box" name="button_box">
                             <button type="object" name="action_reconcile_stat" string="Journal Entries"
-                              class="oe_stat_button" icon="fa-book">
+                              class="oe_stat_button" icon="book">
                             </button>
                         </div>
                         <div class="oe_title">
diff --git a/addons/account/views/partner_view.xml b/addons/account/views/partner_view.xml
index 4558cf599a667d..d924316ee2e7ee 100644
--- a/addons/account/views/partner_view.xml
+++ b/addons/account/views/partner_view.xml
@@ -25,7 +25,7 @@
                     <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button class="oe_stat_button" name="action_open_related_taxes"
-                                type="object" icon="fa-bars"
+                                type="object" icon="menu"
                                 invisible="not tax_ids">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">
@@ -138,7 +138,7 @@
             <field name="priority" eval="5"/>
             <field name="arch" type="xml">
                 <div name="button_box" position="inside">
-                    <button type="object" class="oe_stat_button" icon="fa-pencil-square-o" name="action_view_partner_invoices"
+                    <button type="object" class="oe_stat_button" icon="edit_square" name="action_view_partner_invoices"
                         groups="account.group_account_invoice,account.group_account_readonly"
                         context="{'default_partner_id': id}">
                         <div class="o_form_field o_stat_info">
@@ -154,7 +154,7 @@
                         type="action"
                         name="%(account.res_partner_action_supplier_bills)d"
                         groups="account.group_account_invoice"
-                        icon="fa-pencil-square-o" help="Vendor Bills"
+                        icon="edit_square" help="Vendor Bills"
                         invisible="supplier_invoice_count == 0"
                     >
                         <field string="Vendor Bills" name="supplier_invoice_count" widget="statinfo"/>
diff --git a/addons/account/views/res_config_settings_views.xml b/addons/account/views/res_config_settings_views.xml
index 8ebbdb26f9abc6..0aa4b0cabc3c2f 100644
--- a/addons/account/views/res_config_settings_views.xml
+++ b/addons/account/views/res_config_settings_views.xml
@@ -33,7 +33,7 @@
                                             <field name="chart_template" readonly="has_accounting_entries" required="chart_template"/>
                                         </div>
                                         <div class="mt16">
-                                            <button name="reload_template" type="object" string="Reload" class="btn-secondary ps-2 w-100" icon="fa-refresh"
+                                            <button name="reload_template" type="object" string="Reload" class="btn-secondary ps-2 w-100" icon="refresh"
                                                     title="Reload accounting data (taxes, accounts, ...) if you notice inconsistencies. This action is irreversible."
                                                     invisible="not has_accounting_entries or not chart_template"/>
                                         </div>
@@ -56,7 +56,7 @@
                                     <div class="row">
                                         <div class="col-lg-3">
                                             <label string="Prices" for="account_price_include" class="o_light_label"/>
-                                            <div class="fa fa-question-circle" title="This setting locks once a journal entry is created."/>
+                                            <div class="oi" data-icon="help" title="This setting locks once a journal entry is created."/>
                                         </div>
                                         <field name="account_price_include" readonly="has_accounting_entries"/>
                                     </div>
@@ -73,7 +73,7 @@
                                 documentation="/applications/finance/accounting/taxation/taxes/eu_distance_selling.html"
                                 help="Apply VAT of the EU country to which goods and services are delivered."
                                 invisible="not('EU' in company_country_group_codes or company_country_code in ('CH', 'UK'))">
-                                <button type="object" name="action_eu_oss_tax_mapping" icon="fa-refresh" string="OSS Tax mapping" class="btn-link"/>
+                                <button type="object" name="action_eu_oss_tax_mapping" icon="refresh" string="OSS Tax mapping" class="btn-link"/>
                             </setting>
                             <setting id="tax_exigibility" company_dependent="1" help="Allow to configure taxes using cash basis" title="Select this if the taxes should use cash basis, which will create an entry for such taxes on a given account during reconciliation."
                                 documentation="/applications/finance/accounting/taxation/taxes/cash_basis_taxes.html">
@@ -103,7 +103,7 @@
                                         <field name="group_multi_currency" invisible="1"/>
                                     </div>
                                     <div class="mt8">
-                                        <button type="action" name="%(base.action_currency_form)d" string="Currencies" class="btn-link" icon="oi-arrow-right"/>
+                                        <button type="action" name="%(base.action_currency_form)d" string="Currencies" class="btn-link" icon="east"/>
                                     </div>
                                 </div>
                             </setting>
@@ -124,7 +124,7 @@
                                 documentation="/applications/finance/accounting/receivables/customer_invoices/cash_rounding.html">
                                 <field name="group_cash_rounding"/>
                                 <div class="mt8">
-                                    <button name="%(account.rounding_list_action)d" icon="oi-arrow-right"
+                                    <button name="%(account.rounding_list_action)d" icon="east"
                                             type="action" string="Cash Roundings" class="btn-link"
                                             invisible="not group_cash_rounding"/>
                                 </div>
@@ -152,12 +152,12 @@
                                                     placeholder="Insert your terms &amp; conditions here..."/>
                                         </div>
                                         <div class="mt8" invisible="terms_type != 'html'">
-                                            <button name="action_update_terms" icon="oi-arrow-right" type="object" string="Update Terms" class="btn-link"/>
+                                            <button name="action_update_terms" icon="east" type="object" string="Update Terms" class="btn-link"/>
                                         </div>
                                         <field name="preview_ready" invisible="1"/>
                                         <div class="mt4 ms-1" invisible="not preview_ready">
                                             <a class="btn-link" href="/terms" role="button">
-                                                <i class="oi oi-arrow-right"/>
+                                                <i class="oi" data-icon="east"/>
                                                 Preview
                                             </a>
                                         </div>
@@ -188,7 +188,7 @@
                                 <div class="content-group" invisible="not group_uom">
                                     <button
                                         name="%(uom.product_uom_form_action)d"
-                                        icon="oi-arrow-right"
+                                        icon="east"
                                         type="action"
                                         string="Units &amp; Packagings"
                                         class="btn-link"/>
diff --git a/addons/account/views/res_partner_bank_views.xml b/addons/account/views/res_partner_bank_views.xml
index b44a8227c5c66a..a4fa3f1e3f1b63 100644
--- a/addons/account/views/res_partner_bank_views.xml
+++ b/addons/account/views/res_partner_bank_views.xml
@@ -11,11 +11,14 @@
                         <t t-name="card">
                             <t t-value="record.allow_out_payment.raw_value" t-set="trusted"/>
                             <div class="d-flex">
-                                <i class="fa me-1 align-self-center" 
+                                <i class="oi me-1 align-self-center"
                                    t-att-class="{
-                                        'fa-shield text-success': trusted,
-                                        'fa-exclamation-circle text-danger': !trusted,
-                                   }"/>
+                                        'text-success': trusted,
+                                        'text-danger': !trusted,
+                                   }"
+                                   t-attf-data-icon="{{trusted ? 'security' : 'error'}}"
+                                   t-att-title="trusted ? 'Trusted' : 'Untrusted'"
+                                   />
                                 <field name="display_name"/>
                             </div>
                         </t>
diff --git a/addons/account/views/terms_template.xml b/addons/account/views/terms_template.xml
index e8162977c64e81..9e28dc30584e69 100644
--- a/addons/account/views/terms_template.xml
+++ b/addons/account/views/terms_template.xml
@@ -3,7 +3,7 @@
     <template id="account.account_terms_conditions_setting_banner" name="Account Terms and Conditions Setting Banner">
         <div id="terms_conditions" t-ignore="true" class="text-center">
             <span>This is a preview of your Terms &amp; Conditions.</span>
-            <a t-att-href="backend_url"><i class="oi oi-arrow-right me-1"/>Back to settings</a>
+            <a t-att-href="backend_url"><i class="oi me-1" data-icon="east"/>Back to settings</a>
         </div>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </template>
diff --git a/addons/account/wizard/account_autopost_bills_wizard.xml b/addons/account/wizard/account_autopost_bills_wizard.xml
index b5d16d58589d22..f44a54c935e2be 100644
--- a/addons/account/wizard/account_autopost_bills_wizard.xml
+++ b/addons/account/wizard/account_autopost_bills_wizard.xml
@@ -18,7 +18,7 @@
                     <p>Want to make your life even easier and automate bill validation from this vendor ?</p>
 
                     <p class="text-muted">
-                        <i class="fa fa-lightbulb-o" role="img"/>
+                        <i class="oi" data-icon="lightbulb" role="img"/>
                         Don't worry, you can always change this setting later on the vendor's form.
                         You also have the option to disable the feature for all vendors in the accounting settings.
                     </p>
diff --git a/addons/account_debit_note/views/account_move_view.xml b/addons/account_debit_note/views/account_move_view.xml
index 449ae73d88188f..3c7fa357f2c434 100644
--- a/addons/account_debit_note/views/account_move_view.xml
+++ b/addons/account_debit_note/views/account_move_view.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="account.view_move_form"/>
         <field name="arch" type="xml">
             <div class="oe_button_box" position="inside">
-                <button type="object" class="oe_stat_button" name="action_view_debit_notes" icon="fa-plus" invisible="debit_note_count == 0">
+                <button type="object" class="oe_stat_button" name="action_view_debit_notes" icon="add" invisible="debit_note_count == 0">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="debit_note_count"/></span>
                         <span class="o_stat_text">Debit Notes</span>
diff --git a/addons/account_fleet/views/account_move_views.xml b/addons/account_fleet/views/account_move_views.xml
index 993ba2bba27d19..b131c1d65ebd81 100644
--- a/addons/account_fleet/views/account_move_views.xml
+++ b/addons/account_fleet/views/account_move_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="account.view_move_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
-                <button name="action_show_services" type="object" class="oe_stat_button" icon="fa-wrench" groups="fleet.fleet_group_user" invisible="not service_count">
+                <button name="action_show_services" type="object" class="oe_stat_button" icon="build" groups="fleet.fleet_group_user" invisible="not service_count">
                     <field name="service_count" widget="statinfo" string="Services"/>
                 </button>
             </xpath>
diff --git a/addons/account_fleet/views/fleet_vehicle_log_services_views.xml b/addons/account_fleet/views/fleet_vehicle_log_services_views.xml
index f8d441ce7a21ec..236a01b17ac05d 100644
--- a/addons/account_fleet/views/fleet_vehicle_log_services_views.xml
+++ b/addons/account_fleet/views/fleet_vehicle_log_services_views.xml
@@ -12,7 +12,7 @@
                         name="action_open_account_move"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-pencil-square-o"
+                        icon="edit_square"
                         invisible="not account_move_line_id">
                         <div class="o_field_widget o_stat_info">
                             <span class="o_stat_text text-success"
@@ -27,7 +27,7 @@
                         name="action_create_account_move"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-pencil-square-o"
+                        icon="edit_square"
                         invisible="account_move_line_id or not id">
                         <div class="o_field_widget o_stat_info">
                             <div class="o_field_widget o_stat_info ms-1">
diff --git a/addons/account_fleet/views/fleet_vehicle_views.xml b/addons/account_fleet/views/fleet_vehicle_views.xml
index 2dbfb908a34a47..82fb9d7aa70a33 100644
--- a/addons/account_fleet/views/fleet_vehicle_views.xml
+++ b/addons/account_fleet/views/fleet_vehicle_views.xml
@@ -9,7 +9,7 @@
                 <button name="action_view_bills"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-pencil-square-o"
+                    icon="edit_square"
                     invisible="bill_count == 0"
                     help="show the vendor bills for this vehicle">
                     <field name="bill_count" widget="statinfo" string="Bills"/>
diff --git a/addons/account_payment/static/tests/interactions/portal_invoice_page_payment.test.js b/addons/account_payment/static/tests/interactions/portal_invoice_page_payment.test.js
index ec926502a6d521..6d0aa31a307b6b 100644
--- a/addons/account_payment/static/tests/interactions/portal_invoice_page_payment.test.js
+++ b/addons/account_payment/static/tests/interactions/portal_invoice_page_payment.test.js
@@ -24,7 +24,7 @@ test("portal_invoice_page_payment is started with #portal_pay", async () => {
                 <div class="alert alert-info alert-dismissible fade show d-print-none css_editable_mode_hidden">
                     <div class="text-center">
                         This is a preview of the customer portal.
-                        <a class="alert-link" href="/odoo/action-account.action_move_out_invoice_type/2"><i class="oi oi-arrow-right me-1"></i>Back to edit mode</a>
+                        <a class="alert-link" href="/odoo/action-account.action_move_out_invoice_type/2"><i class="oi me-1" data-icon="east"></i>Back to edit mode</a>
                     </div>
                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" data-oe-model="ir.ui.view" data-oe-id="540" data-oe-field="arch" data-oe-xpath="/t[1]/button[1]"></button>
                 </div>
@@ -32,7 +32,7 @@ test("portal_invoice_page_payment is started with #portal_pay", async () => {
             <div class="o_portal container mt-3">
                 <div class="d-flex justify-content-between align-items-center flex-wrap">
                     <ol class="o_portal_submenu breadcrumb mb-0 flex-grow-1 px-0">
-                        <li class="breadcrumb-item ms-1" data-oe-model="ir.ui.view" data-oe-id="539" data-oe-field="arch" data-oe-xpath="/t[1]/ol[1]/li[1]"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"></i></a></li>
+                        <li class="breadcrumb-item ms-1" data-oe-model="ir.ui.view" data-oe-id="539" data-oe-field="arch" data-oe-xpath="/t[1]/ol[1]/li[1]"><a href="/my/home" aria-label="Home" title="Home"><i class="oi" data-icon="home"></i></a></li>
                         <li class="breadcrumb-item">
                             <a data-oe-model="ir.ui.view" data-oe-id="786" data-oe-field="arch" data-oe-xpath="/data/xpath/li[1]/a[1]" href="/my/invoices?access_token=48b81433-0b2f-4ebd-847b-980120176bb6&amp;payment=True">Invoices &amp; Bills</a>
                         </li>
@@ -41,8 +41,8 @@ test("portal_invoice_page_payment is started with #portal_pay", async () => {
                         </li>
                     </ol>
                     <div class="record_pager btn-group" role="group">
-                        <a role="button" data-oe-model="ir.ui.view" data-oe-id="556" data-oe-field="arch" data-oe-xpath="/t[1]/t[1]/div[1]/a[1]" class="btn btn-light" href="/my/invoices/13?access_token=0bccb494-a155-43f2-9832-fe163a740edb"><i class="oi oi-chevron-left" role="img" aria-label="Previous" title="Previous"></i></a>
-                        <a role="button" data-oe-model="ir.ui.view" data-oe-id="556" data-oe-field="arch" data-oe-xpath="/t[1]/t[1]/div[1]/a[2]" class="btn btn-light" href="/my/invoices/14?access_token=bd2e4e49-a208-4a8d-aec1-9b2286d437a8"><i class="oi oi-chevron-right" role="img" aria-label="Next" title="Next"></i></a>
+                        <a role="button" data-oe-model="ir.ui.view" data-oe-id="556" data-oe-field="arch" data-oe-xpath="/t[1]/t[1]/div[1]/a[1]" class="btn btn-light" href="/my/invoices/13?access_token=0bccb494-a155-43f2-9832-fe163a740edb"><i class="oi" data-icon="chevron_backward" role="img" aria-label="Previous" title="Previous"></i></a>
+                        <a role="button" data-oe-model="ir.ui.view" data-oe-id="556" data-oe-field="arch" data-oe-xpath="/t[1]/t[1]/div[1]/a[2]" class="btn btn-light" href="/my/invoices/14?access_token=bd2e4e49-a208-4a8d-aec1-9b2286d437a8"><i class="oi" data-icon="chevron_forward" role="img" aria-label="Next" title="Next"></i></a>
                     </div>
                 </div>
             </div>
@@ -59,18 +59,18 @@ test("portal_invoice_page_payment is started with #portal_pay", async () => {
                                         <div class="my-1 w-100">
                                         </div>
                                         <div class="small w-100 text-center">
-                                            <i class="fa fa-clock-o" data-oe-model="ir.ui.view" data-oe-id="789" data-oe-field="arch" data-oe-xpath="/data/xpath/div/t[1]/t[2]/div[2]/i[1]"></i>
+                                            <i class="oi" data-icon="schedule" data-oe-model="ir.ui.view" data-oe-id="789" data-oe-field="arch" data-oe-xpath="/data/xpath/div/t[1]/t[2]/div[2]/i[1]"></i>
                                             <span class="o_portal_sidebar_timeago ml4" data-oe-model="ir.ui.view" data-oe-id="789" data-oe-field="arch" data-oe-xpath="/data/xpath/div/t[1]/t[2]/div[2]/span[1]" datetime="2025-01-06">Due today</span>
                                         </div>
                                     </div>
                                     <div class="d-flex flex-column gap-4 mt-3">
                                         <div class="d-flex flex-column gap-2">
                                             <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pay_with" data-oe-id="868" data-oe-xpath="/data/xpath[2]/a" data-oe-model="ir.ui.view" data-oe-field="arch">
-                                            <i class="fa fa-fw fa-arrow-circle-right"></i> Pay Now
+                                            <i class="oi oi-fw oi-filled" data-icon="arrow_circle_right"></i> Pay Now
                                             </a>
                                             <div class="o_download_pdf d-flex flex-lg-column flex-xl-row flex-wrap gap-2">
                                                 <a class="btn btn-light o_download_btn flex-grow-1" title="Download" role="button" data-oe-model="ir.ui.view" data-oe-id="789" data-oe-field="arch" data-oe-xpath="/data/xpath/div/t[1]/t[3]/div[1]/div[1]/div[1]/a[1]" href="/my/invoices/2?access_token=48b81433-0b2f-4ebd-847b-980120176bb6&amp;report_type=pdf&amp;download=true">
-                                                <i class="fa fa-download"></i> Download
+                                                <i class="oi" data-icon="download"></i> Download
                                                 </a>
                                             </div>
                                         </div>
@@ -124,7 +124,7 @@ test("portal_invoice_page_payment is started with #portal_pay", async () => {
                                                                      CONNECT <t t-out="onboarding_provider.upper()"/>
                                                                 </a>
                                                                 <a role="button" type="action" class="btn-link alert-warning me-2" href="/odoo/action-payment.action_payment_provider" data-oe-model="ir.ui.view" data-oe-id="612" data-oe-field="arch" data-oe-xpath="/t[1]/div[1]/div[2]/a[3]">
-                                                                <strong><i class="oi oi-arrow-right"></i> Payment Providers</strong>
+                                                                <strong><i class="oi" data-icon="east"></i> Payment Providers</strong>
                                                                 </a>
                                                             </div>
                                                         </div>
@@ -137,7 +137,7 @@ test("portal_invoice_page_payment is started with #portal_pay", async () => {
                                 </div>
                                 <div class="o_portal_html_view position-relative bg-white shadow p-3 overflow-hidden">
                                     <div class="o_portal_html_loader text-center" data-oe-model="ir.ui.view" data-oe-id="789" data-oe-field="arch" data-oe-xpath="/data/xpath/div/div[1]/div[1]/div[1]">
-                                        <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-black-50"></i>
+                                        <i class="oi oi-fw oi-spin oi-2x text-black-50" data-icon="autorenew"></i>
                                     </div>
                                     <iframe id="invoice_html" class="position-relative my-2" width="100%" height="100%" frameborder="0" scrolling="no" data-oe-model="ir.ui.view" data-oe-id="789" data-oe-field="arch" data-oe-xpath="/data/xpath/div/div[1]/div[1]/iframe[1]" src="/my/invoices/2?access_token=48b81433-0b2f-4ebd-847b-980120176bb6&amp;report_type=html" style="height: 0px;"></iframe>
                                 </div>
@@ -162,7 +162,7 @@ test("portal_invoice_page_payment is started with #portal_pay", async () => {
                                 <div role="search" class="input-group input-group-lg">
                                     <input type="search" name="search" data-oe-model="ir.ui.view" data-oe-id="1019" data-oe-field="arch" data-oe-xpath="/data/xpath[3]/form/t[1]/div[1]/input[1]" class="search-query form-control oe_search_box border border-end-0 p-3 border-0 bg-light" placeholder="Search..." data-search-type="all" data-limit="5" data-display-image="true" data-display-description="true" data-display-extra-link="true" data-display-detail="true" data-order-by="name asc" autocomplete="off">
                                     <button type="submit" aria-label="Search" title="Search" class="btn oe_search_button border border-start-0 px-4 bg-o-color-4">
-                                    <i class="oi oi-search" data-oe-model="ir.ui.view" data-oe-id="1019" data-oe-field="arch" data-oe-xpath="/data/xpath[3]/form/t[1]/div[1]/button[1]/i[1]"></i>
+                                    <i class="oi" data-icon="search" data-oe-model="ir.ui.view" data-oe-id="1019" data-oe-field="arch" data-oe-xpath="/data/xpath[3]/form/t[1]/div[1]/button[1]/i[1]"></i>
                                     </button>
                                 </div>
                                 <input name="order" type="hidden" class="o_search_order_by" data-oe-model="ir.ui.view" data-oe-id="1019" data-oe-field="arch" data-oe-xpath="/data/xpath[3]/form/input[1]" value="name asc">
diff --git a/addons/account_payment/views/account_move_views.xml b/addons/account_payment/views/account_move_views.xml
index e0d570b6426733..7ecfb90ab27cce 100644
--- a/addons/account_payment/views/account_move_views.xml
+++ b/addons/account_payment/views/account_move_views.xml
@@ -30,7 +30,7 @@
             <xpath expr="//div[@name='button_box']" position="inside">
                 <button name="action_view_payment_transactions" type="object"
                         groups="account.group_account_invoice"
-                        class="oe_stat_button" icon="fa-money"
+                        class="oe_stat_button" icon="payments"
                         invisible="transaction_count == 0">
                         <field name="transaction_count" widget="statinfo" string="Payment Transaction"/>
                 </button>
diff --git a/addons/account_payment/views/account_payment_views.xml b/addons/account_payment/views/account_payment_views.xml
index 42c7362d074705..bea7742ef1bf7e 100644
--- a/addons/account_payment/views/account_payment_views.xml
+++ b/addons/account_payment/views/account_payment_views.xml
@@ -19,7 +19,7 @@
                 <button name="action_view_refunds"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-money"
+                    icon="payments"
                     invisible="refunds_count == 0">
                     <field name="refunds_count" widget="statinfo" string="Refunds"/>
                 </button>
diff --git a/addons/account_payment/views/account_portal_templates.xml b/addons/account_payment/views/account_portal_templates.xml
index 9c9c8975712e03..a1fc1c670b36aa 100644
--- a/addons/account_payment/views/account_portal_templates.xml
+++ b/addons/account_payment/views/account_portal_templates.xml
@@ -86,7 +86,7 @@
                     class="btn btn-sm btn-primary"
                     role="button"
                 >
-                    <i class="fa fa-arrow-circle-right"/><span class='d-none d-md-inline'> Pay Now</span>
+                    <i class="oi oi-filled" data-icon="arrow_circle_right"/><span class='d-none d-md-inline'> Pay Now</span>
                 </a>
             </td>
         </xpath>
@@ -96,7 +96,7 @@
         <xpath expr="//span[@name='invoice_status_waiting_for_payment']" position="before">
             <span t-elif="invoice.payment_state in ('not_paid', 'partial') and tx_sudo.state == 'authorized'"
                     class="badge rounded-pill text-bg-primary">
-                <i class="fa fa-fw fa-check"/>
+                <i class="oi oi-fw" data-icon="check"/>
                 <span class="d-none d-md-inline"> Authorized</span>
             </span>
             <span t-elif="invoice.payment_state in ('not_paid', 'partial') and tx_sudo.state == 'pending' and tx_sudo.provider_code not in ('none', 'custom')"
@@ -104,7 +104,7 @@
                 <span class="d-none d-md-inline"> Pending</span>
             </span>
             <span t-elif="invoice.payment_state in ('paid', 'in_payment') and tx_sudo.state == 'done'" class="badge rounded-pill text-bg-success">
-                <i class="fa fa-fw fa-check"></i>
+                <i class="oi oi-fw" data-icon="check"></i>
                 <span class="d-none d-md-inline"> Paid</span>
             </span>
         </xpath>
@@ -253,13 +253,13 @@
         <xpath expr="//t[@t-set='title']//h2[1]" position="after">
             <t t-set="pending_txs" t-value="invoice.transaction_ids.filtered(lambda tx: tx.state in ('pending', 'authorized') and tx.provider_code not in ('none', 'custom'))"/>
             <div name="invoice_paid_badge" t-if="invoice.currency_id.is_zero(invoice.amount_residual)" class="rounded text-bg-success fw-normal badge">
-                <i class="fa fa-fw fa-check-circle"/> Paid
+                <i class="oi oi-fw" data-icon="check_circle"/> Paid
             </div>
             <div t-if="invoice.payment_state == 'in_payment' and not invoice.currency_id.is_zero(invoice.amount_residual)" class="rounded text-bg-info fw-normal badge">
-                <i class="fa fa-fw fa-check-circle"/> Processing Payment
+                <i class="oi oi-fw" data-icon="check_circle"/> Processing Payment
             </div>
             <div t-elif="pending_txs" class="rounded text-bg-info fw-normal badge">
-                <i class="fa fa-fw fa-check-circle"/> Pending
+                <i class="oi oi-fw" data-icon="check_circle"/> Pending
             </div>
         </xpath>
         <xpath expr="//t[@t-set='entries']//div[hasclass('o_download_pdf')]" position="before">
@@ -268,7 +268,7 @@
                 class="btn btn-primary"
                 data-bs-toggle="modal"
                 data-bs-target="#pay_with">
-                <i class="fa fa-fw fa-arrow-circle-right"/> Pay Now
+                <i class="oi oi-fw oi-filled" data-icon="arrow_circle_right"/> Pay Now
             </a>
         </xpath>
         <xpath expr="//div[@id='invoice_content']//div[hasclass('o_portal_html_view')]" position="before">
diff --git a/addons/account_payment/views/payment_transaction_views.xml b/addons/account_payment/views/payment_transaction_views.xml
index e9c5b875964357..2e0d7c03a6d544 100644
--- a/addons/account_payment/views/payment_transaction_views.xml
+++ b/addons/account_payment/views/payment_transaction_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <button name="action_view_refunds" position="before">
                 <button name="action_view_invoices" type="object"
-                        class="oe_stat_button" icon="fa-money"
+                        class="oe_stat_button" icon="payments"
                         invisible="invoices_count == 0">
                     <field name="invoices_count" widget="statinfo" string="Invoice(s)"/>
                 </button>
diff --git a/addons/account_peppol/views/res_config_settings_views.xml b/addons/account_peppol/views/res_config_settings_views.xml
index 9599ada7712e05..6a487107c35073 100644
--- a/addons/account_peppol/views/res_config_settings_views.xml
+++ b/addons/account_peppol/views/res_config_settings_views.xml
@@ -88,7 +88,7 @@
                         </div>
                         <div class="content-group mt-3 alert alert-danger" role="alert">
                             <div class="d-flex align-items-start">
-                                <i class="fa fa-exclamation-triangle fa-lg me-3 mt-1" aria-hidden="true"></i>
+                                <i class="oi oi-lg me-3 mt-1" data-icon="warning" aria-hidden="true"></i>
                                 <div>
                                     <span><strong>Disconnected from Peppol!</strong></span>
                                     <p>
@@ -102,12 +102,12 @@
                                     type="object"
                                     string="Reconnect this database"
                                     class="btn btn-primary"
-                                    icon="fa-refresh"/>
+                                    icon="refresh"/>
                                 <button name="button_disconnect_this_database"
                                     type="object"
                                     string="Disconnect this database"
                                     class="btn btn-danger"
-                                    icon="fa-unlink"/>
+                                    icon="link_off"/>
                             </div>
                         </div>
                     </div>
diff --git a/addons/account_update_tax_tags/views/res_config_settings_views.xml b/addons/account_update_tax_tags/views/res_config_settings_views.xml
index 49e079b86199cc..dcc90031c7d417 100644
--- a/addons/account_update_tax_tags/views/res_config_settings_views.xml
+++ b/addons/account_update_tax_tags/views/res_config_settings_views.xml
@@ -15,7 +15,7 @@
             <field name="arch" type="xml">
                 <xpath expr="//block[@name='default_taxes_setting_container']" position="inside">
                     <setting id="update_tax_tags" groups="base.group_no_one">
-                        <button name="%(account_update_tax_tags.action_open_wizard)d" icon="fa-refresh" type="action" class="btn-link"
+                        <button name="%(account_update_tax_tags.action_open_wizard)d" icon="refresh" type="action" class="btn-link"
                                 string="Update tax tags on existing Journal Entries"/>
                     </setting>
                 </xpath>
diff --git a/addons/analytic/static/src/components/analytic_distribution/analytic_distribution.xml b/addons/analytic/static/src/components/analytic_distribution/analytic_distribution.xml
index 0570dbf32a59e1..7a74ee9aeb6adc 100644
--- a/addons/analytic/static/src/components/analytic_distribution/analytic_distribution.xml
+++ b/addons/analytic/static/src/components/analytic_distribution/analytic_distribution.xml
@@ -23,7 +23,7 @@
                         <span t-if="this.allowSave" class="btn btn-link" t-on-click="this.onSaveNew" title="Save as new analytic distribution model">New Model</span>
                     </div>
                     <div class="popupButtons">
-                        <span class="btn o_button" t-on-click.stop="() => this.closeAnalyticEditor()" title="Close"><span class="fa fa-close"/></span>
+                        <span class="btn o_button" t-on-click.stop="() => this.closeAnalyticEditor()" title="Close"><span class="oi" data-icon="close"/></span>
                     </div>
                 </div>
             </div>
@@ -70,7 +70,7 @@
                                     <Field id="this.props.amount_field" name="this.props.amount_field" record="data.record"/>
                                 </td>
                                 <td class="w-20px">
-                                    <span class="fa fa-trash-o cursor-pointer" t-on-click.stop="() => this.deleteLine(line_index)"/>
+                                    <span class="oi cursor-pointer" data-icon="delete" t-on-click.stop="() => this.deleteLine(line_index)"/>
                                 </td>
                             </Record>
                         </tr>
diff --git a/addons/analytic/static/tests/analytic_distribution.test.js b/addons/analytic/static/tests/analytic_distribution.test.js
index 24b3737c428276..7050e099a72998 100644
--- a/addons/analytic/static/tests/analytic_distribution.test.js
+++ b/addons/analytic/static/tests/analytic_distribution.test.js
@@ -188,7 +188,7 @@ test("analytic field in form view basic features", async () => {
     ).toHaveCount(1);
 
     // tags
-    await contains(".fa-close").click();
+    await contains("[data-icon='close']").click();
     expect(".analytic_distribution_popup").toHaveCount(0);
     expect(".badge").toHaveCount(2);
     expect(".badge:eq(0) .o_tag_badge_text").toHaveText("30.3% RD | 50% HR | 19.7% FI");
@@ -242,7 +242,7 @@ test("analytic field in multi_edit list view + search more", async () => {
     await contains(".modal-dialog .o_data_row:nth-of-type(4) .o_data_cell:first-of-type").click();
     expect(".modal-dialog .o_list_renderer").toHaveCount(0);
 
-    await contains(".fa-close").click();
+    await contains("[data-icon='close']").click();
     await contains(".modal-dialog .btn-primary").click();
     await animationFrame();
     expect(".o_data_row .badge").toHaveCount(4);
diff --git a/addons/analytic/views/analytic_account_views.xml b/addons/analytic/views/analytic_account_views.xml
index 1e4bd26112307c..b8302bf6301ca0 100644
--- a/addons/analytic/views/analytic_account_views.xml
+++ b/addons/analytic/views/analytic_account_views.xml
@@ -8,7 +8,7 @@
                     <field name="company_id" invisible="1"/>
                     <sheet string="Analytic Account">
                         <div class="oe_button_box" name="button_box">
-                            <button class="oe_stat_button" type="action" name="%(account_analytic_line_action)d" icon="fa-usd">
+                            <button class="oe_stat_button" type="action" name="%(account_analytic_line_action)d" icon="attach_money">
                                 <div class="o_form_field o_stat_info">
                                     <span class="o_stat_text">Gross Margin</span>
                                     <span class="o_stat_value">
diff --git a/addons/analytic/views/analytic_plan_views.xml b/addons/analytic/views/analytic_plan_views.xml
index 95247d42e54f9f..c4d9b5c2772ddc 100644
--- a/addons/analytic/views/analytic_plan_views.xml
+++ b/addons/analytic/views/analytic_plan_views.xml
@@ -7,10 +7,10 @@
             <form string="Analytic Plans">
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button name="action_view_children_plans" type="object" class="oe_stat_button" icon="fa-bars">
+                        <button name="action_view_children_plans" type="object" class="oe_stat_button" icon="menu">
                             <field string="Subplans" name="children_count" widget="statinfo"/>
                         </button>
-                        <button name="action_view_analytical_accounts" type="object" class="oe_stat_button" icon="fa-bars">
+                        <button name="action_view_analytical_accounts" type="object" class="oe_stat_button" icon="menu">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value"><field name="all_account_count"/></span>
                                 <span class="o_stat_text">Analytic Accounts</span>
diff --git a/addons/api_doc/static/src/components/doc_error_dialog.js b/addons/api_doc/static/src/components/doc_error_dialog.js
index de43e911758ce1..0b7845d8692fe9 100644
--- a/addons/api_doc/static/src/components/doc_error_dialog.js
+++ b/addons/api_doc/static/src/components/doc_error_dialog.js
@@ -6,7 +6,7 @@ export class DocErrorDialog extends Component {
     static template = xml`
         <div class="alert error mt-1 d-flex flex-column" role="alert">
             <div class="d-flex align-items-center mb-2">
-                <i class="pe-2 fa fa-exclamation-triangle fa-lg" aria-hidden="true"/>
+                <i class="pe-2 oi oi-lg" data-icon="warning" aria-hidden="true"/>
                 <h5 class="m-0 text-danger">Error while loading models: <strong t-out="this.props.name"/></h5>
             </div>
             <t t-if="this.props.traceback">
@@ -16,7 +16,7 @@ export class DocErrorDialog extends Component {
                         t-custom-ref="copyButton"
                         t-on-click="this.onClickClipboard"
                     >
-                        <span class="fa fa-clipboard"/>
+                        <span class="oi" data-icon="assignment"/>
                     </button>
                     <pre class="small text-break p-4" t-out="this.props.traceback"/>
                 </div>
diff --git a/addons/api_doc/static/src/components/doc_method.xml b/addons/api_doc/static/src/components/doc_method.xml
index 019cf24285fa76..bb77bd4ef7d9f1 100644
--- a/addons/api_doc/static/src/components/doc_method.xml
+++ b/addons/api_doc/static/src/components/doc_method.xml
@@ -10,7 +10,7 @@
             role="button"
         >
             <div class="icon-btn" role="button" t-att-class="{ o_collapsed: !this.state.open }">
-                <i class="fa fa-angle-right ps-1 pt-1" aria-hidden="true"></i>
+                <i class="oi ps-1 pt-1" data-icon="keyboard_arrow_right" aria-hidden="true"></i>
             </div>
             <h4 class="flex-grow ms-1" t-out="this.method.name"></h4>
             <a
diff --git a/addons/api_doc/static/src/components/doc_model.xml b/addons/api_doc/static/src/components/doc_model.xml
index d3dbf460daf31a..7cb5950d55bc2b 100644
--- a/addons/api_doc/static/src/components/doc_model.xml
+++ b/addons/api_doc/static/src/components/doc_model.xml
@@ -38,7 +38,7 @@
             role="button"
         >
             <div class="icon-btn ps-1" role="button" t-att-class="{ o_collapsed: !this.state.showModulesFilter}">
-                <i class="fa fa-angle-right" aria-hidden="true"></i>
+                <i class="oi" data-icon="keyboard_arrow_right" aria-hidden="true"></i>
             </div>
             <h3 class="ms-2">Modules</h3>
         </div>
diff --git a/addons/api_doc/static/src/components/doc_request.xml b/addons/api_doc/static/src/components/doc_request.xml
index d774a741489c54..df19889fd287db 100644
--- a/addons/api_doc/static/src/components/doc_request.xml
+++ b/addons/api_doc/static/src/components/doc_request.xml
@@ -22,7 +22,7 @@
                     t-att-disabled="this.state.exampleLanguage !== 'json'"
                 >
                     <span>Run</span>
-                    <i class="fa fa-play ms-2" aria-hidden="true"></i>
+                    <i class="oi ms-2" data-icon="play_arrow" aria-hidden="true"></i>
                 </button>
             </div>
         </div>
@@ -55,7 +55,7 @@
             />
             <div t-else="" class="alert error mt-1 d-flex flex-nowrap flex-column">
                 <h5 class="mb-2 d-flex flex-nowrap align-items-center">
-                    <i class="pe-1 fa fa-exclamation-triangle" aria-hidden="true"></i>
+                    <i class="pe-1 oi" data-icon="warning" aria-hidden="true"></i>
                     <span>Error <t t-out="this.state.response.status"/> while executing request</span>
                 </h5>
                 <div t-if="this.state.showTraceback">
@@ -88,7 +88,7 @@
             t-on-click="this.copyToClipboard"
             type="button"
         >
-            <i t-if="!this.state.copied" class="fa fa-clipboard fs-6 text-light"/>
+            <i t-if="!this.state.copied" class="oi fs-6 text-light" data-icon="assignment"/>
             <span t-else="" class="fs-6 text-light">Copied!</span>
         </button>
     </div>
diff --git a/addons/api_doc/static/src/components/doc_sidebar.xml b/addons/api_doc/static/src/components/doc_sidebar.xml
index f368ca1057ed80..5b4d6287f40f91 100644
--- a/addons/api_doc/static/src/components/doc_sidebar.xml
+++ b/addons/api_doc/static/src/components/doc_sidebar.xml
@@ -14,7 +14,7 @@
                     role="button"
                 >
                     <div class="icon-btn ps-2 pt-2" role="button" t-att-class="{ o_collapsed: this.isCollapsed(addon.name)}">
-                        <i class="fa fa-angle-right" aria-hidden="true"></i>
+                        <i class="oi" data-icon="keyboard_arrow_right" aria-hidden="true"></i>
                     </div>
                     <h4 class="ms-2" t-out="addon.name"></h4>
                 </div>
diff --git a/addons/api_doc/static/src/components/doc_table.js b/addons/api_doc/static/src/components/doc_table.js
index 8ab500d7d24a1d..674ee4b9a0b6d1 100644
--- a/addons/api_doc/static/src/components/doc_table.js
+++ b/addons/api_doc/static/src/components/doc_table.js
@@ -161,11 +161,11 @@ export class DocTable extends Component {
 
     getSortIcon(rowIndex) {
         if (this.state.sortBy !== rowIndex) {
-            return "fa fa-sort";
+            return "swap_vert";
         } else if (this.state.sortOrder === "asc") {
-            return "fa fa-sort-asc";
+            return "arrow_upward";
         } else {
-            return "fa fa-sort-desc";
+            return "arrow_downward";
         }
     }
 
diff --git a/addons/api_doc/static/src/components/doc_table.xml b/addons/api_doc/static/src/components/doc_table.xml
index f7ac71985298dc..3de1a740685696 100644
--- a/addons/api_doc/static/src/components/doc_table.xml
+++ b/addons/api_doc/static/src/components/doc_table.xml
@@ -15,7 +15,8 @@
                 >
                     <span class="me-2" t-out="header"></span>
                     <i
-                        t-att-class="this.getSortIcon(header_index)"
+                        class="oi"
+                        t-att-data-icon="this.getSortIcon(header_index)"
                         aria-hidden="true"
                     ></i>
                 </th>
@@ -37,14 +38,16 @@
                 >
                     <i
                         t-if="row.subData"
-                        class="fa fa-bars o-doc-sub-table-btn d-inline me-1 cursor-pointer"
+                        class="oi o-doc-sub-table-btn d-inline me-1 cursor-pointer"
+                        data-icon="menu"
                         aria-hidden="true"
                         t-on-click="(ev) => this.showSubTable(ev, row.subData)"
                     />
 
                     <t t-if="row and row.type == 'tooltip' and row.value">
                         <i
-                            class="fa fa-question-circle p-1 "
+                            class="oi p-1"
+                            data-icon="help"
                             aria-hidden="true"
                             t-if="row.value"
                             t-on-mouseenter="(ev) => this.showDynamicTooltip(ev, row.value)"
@@ -61,7 +64,8 @@
                     >
                         <t t-out="row.relation"/>
                         <i
-                            class="fa fa-external-link ps-1 d-inline"
+                            class="oi ps-1 d-inline"
+                            data-icon="open_in_new"
                             aria-hidden="true"
                         ></i>
                     </a>
diff --git a/addons/api_doc/static/src/doc_client.xml b/addons/api_doc/static/src/doc_client.xml
index ac3a3d532d29ec..416c25bb5d8431 100644
--- a/addons/api_doc/static/src/doc_client.xml
+++ b/addons/api_doc/static/src/doc_client.xml
@@ -13,10 +13,10 @@
         </div>
         <div class="d-flex flex-nowrap gap-1">
             <button class="btn" t-on-click="() => this.env.modelStore.showApiKeyModal = true">
-                <i class="fa fa-key" aria-hidden="true"></i>
+                <i class="oi" data-icon="key" aria-hidden="true"></i>
             </button>
             <button class="btn" t-on-click="() => this.toggleTheme()">
-                <i class="fa fa-moon-o" aria-hidden="true"></i>
+                <i class="oi" data-icon="dark_mode" aria-hidden="true"></i>
             </button>
         </div>
     </header>
@@ -26,7 +26,7 @@
             <DocModel t-if="this.modelStore.activeModel"/>
         </t>
         <div t-elif="!this.modelStore.error" class="h-100 w-100 d-flex flex-nowrap align-items-center justify-content-center gap-1">
-            <i class="fa fa-spinner o-doc-spinner" aria-hidden="true"></i>
+            <i class="oi o-doc-spinner" data-icon="progress_activity" aria-hidden="true"></i>
             <div>Loading Models</div>
         </div>
 
diff --git a/addons/auth_ldap/views/ldap_installer_views.xml b/addons/auth_ldap/views/ldap_installer_views.xml
index 143b1ff0e11b93..110a15d560dc61 100644
--- a/addons/auth_ldap/views/ldap_installer_views.xml
+++ b/addons/auth_ldap/views/ldap_installer_views.xml
@@ -8,7 +8,7 @@
             <field name="arch" type="xml">
                 <form string="LDAP Configuration">
                     <header>
-                        <button name="test_ldap_connection" type="object" string="Test Connection" icon="fa-television" class="btn-primary"/>
+                        <button name="test_ldap_connection" type="object" string="Test Connection" icon="tv" class="btn-primary"/>
                     </header>
                     <sheet>
                         <group>
diff --git a/addons/auth_ldap/views/res_config_settings_views.xml b/addons/auth_ldap/views/res_config_settings_views.xml
index c10a5fe169627b..fc89f342e133c2 100644
--- a/addons/auth_ldap/views/res_config_settings_views.xml
+++ b/addons/auth_ldap/views/res_config_settings_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <setting id="module_auth_ldap" position="inside">
                 <div class="mt8" invisible="not module_auth_ldap">
-                   <button type="action" name="%(auth_ldap.action_ldap_installer)d" string="LDAP Server" icon="oi-arrow-right" class="btn-link"/>
+                   <button type="action" name="%(auth_ldap.action_ldap_installer)d" string="LDAP Server" icon="east" class="btn-link"/>
                 </div>
             </setting>
             <div id="auth_ldap_warning" position="replace"/>
diff --git a/addons/auth_oauth/models/auth_oauth.py b/addons/auth_oauth/models/auth_oauth.py
index f5879ef555a2c4..0794cca3924a12 100644
--- a/addons/auth_oauth/models/auth_oauth.py
+++ b/addons/auth_oauth/models/auth_oauth.py
@@ -17,6 +17,6 @@ class AuthOauthProvider(models.Model):
     validation_endpoint = fields.Char(string='UserInfo URL', required=True)  # OAuth provider URL to get user information
     data_endpoint = fields.Char()
     enabled = fields.Boolean(string='Allowed')
-    css_class = fields.Char(string='CSS class', default='fa fa-fw fa-sign-in text-primary')
+    css_class = fields.Char(string='CSS class', default='oi oi-fw text-primary')
     body = fields.Char(required=True, string="Login button label", help='Link text in Login Dialog', translate=True)
     sequence = fields.Integer(default=10)
diff --git a/addons/auth_oauth/static/src/scss/auth_oauth.scss b/addons/auth_oauth/static/src/scss/auth_oauth.scss
index b895b028ce5a33..213faaf2fa1483 100644
--- a/addons/auth_oauth/static/src/scss/auth_oauth.scss
+++ b/addons/auth_oauth/static/src/scss/auth_oauth.scss
@@ -1,7 +1,7 @@
 .o_login_auth {
     --oauth-icon-size: 1.5em;
 
-    .fa, .oi {
+    .oi {
         font-size: var(--oauth-icon-size);
         width: 1em; // Force a square sizing, as other icons
         text-align: center;
diff --git a/addons/auth_oauth/views/res_config_settings_views.xml b/addons/auth_oauth/views/res_config_settings_views.xml
index fe4ca75434a4a6..7725c1e1a8030c 100644
--- a/addons/auth_oauth/views/res_config_settings_views.xml
+++ b/addons/auth_oauth/views/res_config_settings_views.xml
@@ -8,7 +8,7 @@
                 <div id="msg_module_auth_oauth" position="replace">
                     <div class="content-group" invisible="not module_auth_oauth">
                         <div class="mt8">
-                            <button type="action" name="%(auth_oauth.action_oauth_provider)d" string="OAuth Providers" icon="oi-arrow-right" class="btn-link"/>
+                            <button type="action" name="%(auth_oauth.action_oauth_provider)d" string="OAuth Providers" icon="east" class="btn-link"/>
                         </div>
                     </div>
                 </div>
@@ -20,7 +20,7 @@
                                 <label for="auth_oauth_google_client_id" string="Client ID:" class="col-lg-3 o_light_label"/>
                                 <field name="auth_oauth_google_client_id" placeholder="e.g. 1234-xyz.apps.googleusercontent.com"/>
                             </div>
-                            <widget name="documentation_link" path="/applications/general/auth/google.html" icon="oi oi-fw oi-arrow-right" label="Tutorial"/>
+                            <widget name="documentation_link" path="/applications/general/auth/google.html" icon="east" label="Tutorial"/>
                         </div>
                     </setting>
                 </setting>
diff --git a/addons/auth_passkey/static/src/services/check_identity/check_identity.xml b/addons/auth_passkey/static/src/services/check_identity/check_identity.xml
index b178ad1ecbb4c2..cef83ac76915c4 100644
--- a/addons/auth_passkey/static/src/services/check_identity/check_identity.xml
+++ b/addons/auth_passkey/static/src/services/check_identity/check_identity.xml
@@ -4,7 +4,7 @@
     <t t-name="auth_passkey.CheckIdentityFormWebAuthN">
         <input type="hidden" name="webauthn_response"/>
         <div class="text-center">
-            <i class="fa fa-3x fa-shield" aria-hidden="true"/>
+            <i class="oi oi-3x" data-icon="security" aria-hidden="true"/>
             <h3>Passkey</h3>
         </div>
         <div>
diff --git a/addons/auth_passkey/views/auth_passkey_login_templates.xml b/addons/auth_passkey/views/auth_passkey_login_templates.xml
index e266c01ce69b18..247beadd2d0fa9 100644
--- a/addons/auth_passkey/views/auth_passkey_login_templates.xml
+++ b/addons/auth_passkey/views/auth_passkey_login_templates.xml
@@ -10,7 +10,7 @@
         <xpath expr="//t[@t-set='auth_btns']" position="after">
             <!-- passkey_body set in plain HTML for translations -->
             <t t-set="passkey_body">Use a Passkey</t>
-            <t t-set="passkey_btn" t-value="[{'css_class': 'fa fa-qrcode', 'body': passkey_body, 'list_item_class': 'passkey_login_link'}]"/>
+            <t t-set="passkey_btn" t-value="[{'css_class': 'oi oi-fw', 'icon': 'qr_code', 'body': passkey_body, 'list_item_class': 'passkey_login_link'}]"/>
             <t t-set="auth_btns" t-value="auth_btns + passkey_btn"/>
         </xpath>
     </template>
diff --git a/addons/auth_passkey_portal/views/templates.xml b/addons/auth_passkey_portal/views/templates.xml
index 9e0ce29b25dc3c..ade3ea37b6a35c 100644
--- a/addons/auth_passkey_portal/views/templates.xml
+++ b/addons/auth_passkey_portal/views/templates.xml
@@ -23,10 +23,10 @@
                                     <td><span t-field="key.create_date" t-options='{"widget": "datetime", "format": "short"}'/></td>
                                     <td><span t-field="key.write_date" t-options='{"widget": "datetime", "format": "short"}'/></td>
                                     <td>
-                                        <i class="fa fa-pencil o_passkey_portal_rename" type="button"/>
+                                        <i class="oi oi-filled o_passkey_portal_rename" data-icon="edit" type="button"/>
                                     </td>
                                     <td>
-                                        <i class="fa fa-trash text-danger o_passkey_portal_delete" type="button"/>
+                                        <i class="oi oi-filled text-danger o_passkey_portal_delete" data-icon="delete" type="button"/>
                                     </td>
                                 </tr>
                             </t>
diff --git a/addons/auth_signup/views/auth_signup_login_templates.xml b/addons/auth_signup/views/auth_signup_login_templates.xml
index e0c1070d6d39be..2baccd52682a34 100644
--- a/addons/auth_signup/views/auth_signup_login_templates.xml
+++ b/addons/auth_signup/views/auth_signup_login_templates.xml
@@ -16,7 +16,7 @@
                     <input type="password" name="password" id="password" class="form-control"
                         required="required" t-att-autofocus="'autofocus' if autofocus else None" placeholder="••••••••••"/>
                     <button type="button" class="btn btn-sm border border-start-0 o_show_password">
-                        <i class="fa fa-eye"/>
+                        <i class="oi" data-icon="visibility"/>
                     </button>
                 </div>
             </div>
@@ -27,7 +27,7 @@
                     <div class="input-group mb-1">
                         <input type="password" name="confirm_password" id="confirm_password" class="form-control" required="required" placeholder="••••••••••"/>
                         <button type="button" class="btn btn-sm border border-start-0 o_show_password">
-                            <i class="fa fa-eye"/>
+                            <i class="oi" data-icon="visibility"/>
                         </button>
                     </div>
                 </div>
diff --git a/addons/auth_signup/views/res_config_settings_views.xml b/addons/auth_signup/views/res_config_settings_views.xml
index 115ba089b28722..d97f20759e411b 100644
--- a/addons/auth_signup/views/res_config_settings_views.xml
+++ b/addons/auth_signup/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                         <field name="auth_signup_uninvited" class="o_light_label" widget="radio" options="{'horizontal': true}" required="True"/>
                         <div class="content-group" invisible="auth_signup_uninvited == 'b2b'">
                             <div class="mt8">
-                                <button type="object" name="action_open_template_user" string="Default Access Rights" icon="oi-arrow-right" class="btn-link"/>
+                                <button type="object" name="action_open_template_user" string="Default Access Rights" icon="east" class="btn-link"/>
                             </div>
                         </div>
                     </setting>
diff --git a/addons/auth_totp/static/src/services/check_identity/check_identity.xml b/addons/auth_totp/static/src/services/check_identity/check_identity.xml
index 5602215adea7cc..1383f9324f3014 100644
--- a/addons/auth_totp/static/src/services/check_identity/check_identity.xml
+++ b/addons/auth_totp/static/src/services/check_identity/check_identity.xml
@@ -3,7 +3,7 @@
 
     <t t-name="auth_totp.CheckIdentityFormTOTP">
         <div class="text-center">
-            <i class="fa fa-3x fa-mobile" aria-hidden="true"/>
+            <i class="oi oi-3x" data-icon="smartphone" aria-hidden="true"/>
             <h3>Authentication code</h3>
         </div>
         <input
diff --git a/addons/auth_totp/views/res_users_views.xml b/addons/auth_totp/views/res_users_views.xml
index 01d55ad57c4fca..faabc1843dc75c 100644
--- a/addons/auth_totp/views/res_users_views.xml
+++ b/addons/auth_totp/views/res_users_views.xml
@@ -30,14 +30,14 @@
                     <button invisible="totp_enabled or id != uid" name="action_totp_enable_wizard"
                         type="object" class="btn btn-secondary h-100 my-auto" string="Enable 2FA"/>
                     <div invisible="totp_enabled or id == uid" name="div_action_totp_enable_wizard" class="h-100 d-flex flex-wrap align-items-center my-auto">
-                        <i class="fa fa-remove text-danger"/>
+                        <i class="oi text-danger" data-icon="close"/>
                         <span class="fw-bold ms-1">
                             Disabled
                         </span>
                     </div>
                     <!-- Admin must be able to deactivate the 2FA, if the user is no longer able to use it. -->
                     <div invisible="not totp_enabled" class="h-100 d-flex flex-wrap align-items-center my-auto">
-                        <i class="fa fa-check text-success"/>
+                        <i class="oi text-success" data-icon="check"/>
                         <span class="fw-bold ms-1 me-2">
                             Enabled
                         </span>
@@ -67,7 +67,7 @@
                     <button invisible="totp_enabled" name="action_totp_enable_wizard"
                         type="object" class="btn btn-secondary h-100 my-auto" string="Enable 2FA"/>
                     <div invisible="not totp_enabled" class="h-100 d-flex flex-wrap align-items-center my-auto">
-                        <i class="fa fa-check text-success"/>
+                        <i class="oi text-success" data-icon="check"/>
                         <span class="fw-bold ms-1 me-2">
                             Enabled
                         </span>
diff --git a/addons/auth_totp_mail/static/src/services/check_identity/check_identity.xml b/addons/auth_totp_mail/static/src/services/check_identity/check_identity.xml
index f66f3235c02440..2a4d44594d3df3 100644
--- a/addons/auth_totp_mail/static/src/services/check_identity/check_identity.xml
+++ b/addons/auth_totp_mail/static/src/services/check_identity/check_identity.xml
@@ -3,7 +3,7 @@
 
     <t t-name="auth_totp_mail.CheckIdentityFormTOTPMail">
         <div class="text-center">
-            <i class="fa fa-3x fa-envelope" aria-hidden="true"/>
+            <i class="oi oi-3x oi-filled" data-icon="mail" aria-hidden="true"/>
             <h3>Authentication code via email</h3>
         </div>
         <div>
diff --git a/addons/auth_totp_mail/views/templates.xml b/addons/auth_totp_mail/views/templates.xml
index 3342637c1c67ae..d2c05eef877248 100644
--- a/addons/auth_totp_mail/views/templates.xml
+++ b/addons/auth_totp_mail/views/templates.xml
@@ -5,7 +5,7 @@
         </xpath>
         <xpath expr="//form/div[1]" position="after">
             <div t-if="user._mfa_type() == 'totp_mail'" class="mb-2 mt-2 text-muted">
-                <i class="fa fa-envelope-o"/>
+                <i class="oi" data-icon="mail"/>
                 To login, enter below the six-digit authentication code just sent via email to <t t-out="user.email"/>.
                 <br/>
             </div>
diff --git a/addons/auth_totp_portal/static/src/interactions/revoke_trusted_device.js b/addons/auth_totp_portal/static/src/interactions/revoke_trusted_device.js
index 45d800e573dd8a..0128b457a2372e 100644
--- a/addons/auth_totp_portal/static/src/interactions/revoke_trusted_device.js
+++ b/addons/auth_totp_portal/static/src/interactions/revoke_trusted_device.js
@@ -4,7 +4,7 @@ import { registry } from "@web/core/registry";
 import { handleCheckIdentity } from "@portal/interactions/portal_security";
 
 export class RevokeTrustedDevice extends Interaction {
-    static selector = "#totp_wizard_view + * .fa.fa-trash.text-danger";
+    static selector = "#totp_wizard_view + * [data-icon='delete'].text-danger";
     dynamicContent = {
         _root: { "t-on-click.prevent": this.onClick },
     };
diff --git a/addons/auth_totp_portal/static/src/interactions/totp_enable.js b/addons/auth_totp_portal/static/src/interactions/totp_enable.js
index 13199eb95a9b3b..c010b0a21619cf 100644
--- a/addons/auth_totp_portal/static/src/interactions/totp_enable.js
+++ b/addons/auth_totp_portal/static/src/interactions/totp_enable.js
@@ -42,7 +42,8 @@ function fromField(f, record) {
 
             // Copy Button
             const copySpanIcon = document.createElement("span");
-            copySpanIcon.setAttribute("class", "fa fa-clipboard");
+            copySpanIcon.setAttribute("class", "oi");
+            copySpanIcon.setAttribute("data-icon", "assignment");
             const copySpanText = document.createElement("span");
             copySpanText.textContent = _t(" Copy");
 
diff --git a/addons/auth_totp_portal/views/templates.xml b/addons/auth_totp_portal/views/templates.xml
index 823cc425894124..665a4869f5cd20 100644
--- a/addons/auth_totp_portal/views/templates.xml
+++ b/addons/auth_totp_portal/views/templates.xml
@@ -14,12 +14,12 @@
                 <h4>
                     Two-factor authentication
                     <a href="https://www.odoo.com/documentation/latest/applications/general/auth/2fa.html" target="_blank">
-                        <i title="Documentation" class="fa fa-fw o_button_icon fa-info-circle"></i>
+                        <i title="Documentation" class="oi oi-fw o_button_icon" data-icon="info"/>
                     </a>
                 </h4>
                 <t t-if="not user_id.totp_enabled">
                     <div class="alert alert-secondary" role="status">
-                        <i class="fa fa-warning"/>
+                        <i class="oi" data-icon="warning"/>
                         Two-factor authentication not enabled
                     </div>
                     <button type="button" class="btn btn-light" id="auth_totp_portal_enable">
@@ -28,7 +28,7 @@
                 </t>
                 <t t-else="">
                     <span class="text-success">
-                        <i class="fa fa-check-circle"/>
+                        <i class="oi oi-filled" data-icon="check_circle"/>
                         Two-factor authentication enabled
                     </span>
                     <button type="button" class="btn btn-link" id="auth_totp_portal_disable">
@@ -51,7 +51,7 @@
                                         <span t-field="td.create_date"/>
                                     </td>
                                     <td>
-                                        <i class="fa fa-trash text-danger" type="button" t-att-id="td.id"/>
+                                        <i class="oi oi-filled text-danger" data-icon="delete" type="button" t-att-id="td.id"/>
                                     </td>
                                 </tr>
                             </tbody>
diff --git a/addons/barcodes/static/src/components/barcode_scanner.xml b/addons/barcodes/static/src/components/barcode_scanner.xml
index 33268967038c0e..3625bb6d82f4d8 100644
--- a/addons/barcodes/static/src/components/barcode_scanner.xml
+++ b/addons/barcodes/static/src/components/barcode_scanner.xml
@@ -4,7 +4,7 @@
     <t t-name="barcodes.BarcodeScanner">
         <div class="o_barcode_mobile_container">
             <a t-if="this.isBarcodeScannerSupported" role="button" class="btn btn-primary o_mobile_barcode" t-on-click="this.openMobileScanner">
-                <i class="fa fa-camera fa-2x o_barcode_mobile_camera"/>
+                <i class="oi oi-2x o_barcode_mobile_camera" data-icon="photo_camera"/>
                 Tap to scan
             </a>
             <img src="/barcodes/static/img/barcode.png" alt="Barcode"/>
diff --git a/addons/base_address_extended/views/res_country_view.xml b/addons/base_address_extended/views/res_country_view.xml
index 57fab3f560dbda..a5bd7b70afd673 100644
--- a/addons/base_address_extended/views/res_country_view.xml
+++ b/addons/base_address_extended/views/res_country_view.xml
@@ -8,7 +8,7 @@
             <xpath expr="//div[hasclass('oe_button_box')]" position="inside">
                 <button name="%(action_res_city_tree)d"
                     class="oe_stat_button"
-                    icon="fa-globe"
+                    icon="public"
                     type="action"
                     context="{'default_country_id': id, 'search_default_country_id': id}">
                     <div class="o_field_widget o_stat_info">
diff --git a/addons/base_automation/static/src/base_automation_actions_one2many_field.xml b/addons/base_automation/static/src/base_automation_actions_one2many_field.xml
index c023c0e381d446..da8aa99e5340a3 100644
--- a/addons/base_automation/static/src/base_automation_actions_one2many_field.xml
+++ b/addons/base_automation/static/src/base_automation_actions_one2many_field.xml
@@ -11,27 +11,28 @@
                     <div class="fs-5 d-flex align-items-center">
                         <i
                             data-name="server_action_icon"
-                            class="fa"
-                            t-att-class="{
-                                'code': 'fa-code',
-                                'object_create': 'fa-plus-square',
-                                'object_copy': 'fa-clone',
-                                'object_write': 'fa-pencil',
-                                'multi': 'fa-list-ul',
-                                'mail_post': 'fa-envelope',
-                                'followers': 'fa-user',
-                                'remove_followers': 'fa-user-times',
-                                'next_activity': 'fa-clock-o',
-                                'sms': 'fa-mobile',
-                                'webhook': 'fa-paper-plane',
-                                'whatsapp': 'fa-whatsapp',
-                            }[action.data.state] || 'fa-circle-thin'"
+                            class="oi"
+                            t-att-class="{'oi-filled': ['object_create', 'object_write', 'mail_post', 'followers', 'remove_followers', 'webhook'].includes(action.data.state)}"
+                            t-att-data-icon="{
+                                'code': 'code',
+                                'object_create': 'add_box',
+                                'object_copy': 'content_copy',
+                                'object_write': 'edit',
+                                'multi': 'format_list_bulleted',
+                                'mail_post': 'mail',
+                                'followers': 'person',
+                                'remove_followers': 'person_remove',
+                                'next_activity': 'schedule',
+                                'sms': 'smartphone',
+                                'webhook': 'send',
+                                'whatsapp': 'whatsapp',
+                            }[action.data.state] || 'radio_button_unchecked'"
                         />
                         <div class="ps-2" t-out="action.data.name" />
                     </div>
                 </div>
                 <div t-if="!action_last" class="px-3 align-self-center" t-att-data-action-id="action.id">
-                    <i class="fa fa-lg fa-plus text-primary"></i>
+                    <i class="oi oi-lg text-primary" data-icon="add"></i>
                 </div>
             </t>
             <t t-if="this.hiddenActionsCount">
diff --git a/addons/base_automation/static/src/group_config_menu_patch.js b/addons/base_automation/static/src/group_config_menu_patch.js
index 1b865fd762700c..c24a07bd9b0934 100644
--- a/addons/base_automation/static/src/group_config_menu_patch.js
+++ b/addons/base_automation/static/src/group_config_menu_patch.js
@@ -90,7 +90,7 @@ registry.category("group_config_items").add(
         method: "openAutomations",
         isVisible: ({ permissions }) => permissions.canEditAutomations,
         class: "o_column_automations",
-        icon: "fa-magic",
+        icon: "wand_stars",
     },
     { sequence: 25, force: true }
 );
diff --git a/addons/base_automation/views/base_automation_views.xml b/addons/base_automation/views/base_automation_views.xml
index 32290c98655266..b73a44f827f7b0 100644
--- a/addons/base_automation/views/base_automation_views.xml
+++ b/addons/base_automation/views/base_automation_views.xml
@@ -14,7 +14,7 @@
                                 name="action_view_webhook_logs"
                                 string="Logs"
                                 class="oe_stat_button"
-                                icon="fa-list"
+                                icon="format_list_bulleted"
                             />
                         </div>
                         <field name="active" invisible="1" />
@@ -56,7 +56,7 @@
                                         />
                                         <field name="trg_field_ref_model_name" invisible="1" />
                                     </div>
-                                    <div class="text-muted" invisible="trigger != 'on_change'"><i class="fa fa-warning"/> Automation rules triggered by UI changes will be executed <em>every time</em> the watched fields change, <em>whether you save or not</em>.</div>
+                                    <div class="text-muted" invisible="trigger != 'on_change'"><i class="oi" data-icon="warning"/> Automation rules triggered by UI changes will be executed <em>every time</em> the watched fields change, <em>whether you save or not</em>.</div>
                                 </div>
                                 <label for="url" string="Secret URL" invisible="trigger != 'on_webhook'"/>
                                 <div class="d-flex flex-row" invisible="trigger != 'on_webhook'">
@@ -65,7 +65,7 @@
                                         type="object"
                                         name="action_rotate_webhook_uuid"
                                         class="oe_inline btn btn-link flex-shrink-0 px-1 py-0"
-                                        icon="fa-refresh"
+                                        icon="refresh"
                                         string="Renew"
                                         help="If renewed, update the secret URL in the third-party app that calls this webhook."
                                     />
@@ -80,7 +80,7 @@
                                         type="object"
                                         name="action_open_scheduled_action"
                                         string="Scheduled action"
-                                        icon="oi-arrow-right"
+                                        icon="east"
                                         class="oe_inline btn-link mt-n1"
                                         groups="base.group_no_one"
                                     />
@@ -125,7 +125,7 @@
                                 <div invisible="trigger != 'on_webhook'">
                                     <field name="record_getter" string="Target Record"/>
                                     <div>
-                                        <div  class="text-muted"><i class="fa fa-info-circle"/> The default target record getter will work out-of-the-box for any webhook coming from another Odoo instance.</div>
+                                        <div  class="text-muted"><i class="oi" data-icon="info"/> The default target record getter will work out-of-the-box for any webhook coming from another Odoo instance.</div>
                                         <span class="text-muted"> Available variables: </span>
                                         <ul class="text-muted">
                                             <li><code>env</code>: environment on which the action is triggered</li>
@@ -217,7 +217,7 @@
                                 </div>
                             </div>
                             <div class="d-none d-md-flex flex-grow-1 align-items-center gap-3 o_automation_actions" data-name="more-info">
-                                <i class="fa fa-2x fa-arrow-right text-primary" title="Actions" />
+                                <i class="oi oi-2x text-primary" data-icon="arrow_forward" title="Actions" />
                                 <field name="action_server_ids" widget="base_automation_actions_one2many" class="align-self-center w-100 me-md-3" />
                             </div>
                         </t>
diff --git a/addons/base_automation/views/ir_actions_server_views.xml b/addons/base_automation/views/ir_actions_server_views.xml
index 7afe06b4e22d7d..93f94c55f15b4e 100644
--- a/addons/base_automation/views/ir_actions_server_views.xml
+++ b/addons/base_automation/views/ir_actions_server_views.xml
@@ -13,7 +13,7 @@
                         name="action_open_automation"
                         invisible="not base_automation_id"
                         class="oe_stat_button"
-                        icon="fa-bolt"
+                        icon="flash_on"
                     >
                         <div class="o_stat_info">
                             <span class="o_stat_text">Automation</span>
diff --git a/addons/base_geolocalize/views/res_partner_views.xml b/addons/base_geolocalize/views/res_partner_views.xml
index d2adf06696c7ab..ce1e539f4f115c 100644
--- a/addons/base_geolocalize/views/res_partner_views.xml
+++ b/addons/base_geolocalize/views/res_partner_views.xml
@@ -15,10 +15,10 @@
                             <group>
                                 <field string="Updated on" name="date_localization" readonly="1" invisible="date_localization == False" />
                                 <button invisible="partner_latitude != 0 or partner_longitude != 0"
-                                        icon="fa-gear" string="Compute based on address" title="Compute Localization"
+                                        icon="settings" icon_class="oi-filled" string="Compute based on address" title="Compute Localization"
                                         name="geo_localize" type="object" class="btn btn-secondary w-100"/>
                                 <button invisible="partner_latitude == 0 and partner_longitude == 0"
-                                        icon="fa-refresh" string="Refresh" title="Refresh Localization"
+                                        icon="refresh" string="Refresh" title="Refresh Localization"
                                         name="geo_localize" type="object" class="btn btn-secondary w-100"/>
                             </group>
                         </group>
diff --git a/addons/base_import/static/src/import_action/import_action.xml b/addons/base_import/static/src/import_action/import_action.xml
index d5a018adc6dd2f..6b883aa83e8b77 100644
--- a/addons/base_import/static/src/import_action/import_action.xml
+++ b/addons/base_import/static/src/import_action/import_action.xml
@@ -65,11 +65,11 @@
                         </p>
                         <div class="mb-2" t-foreach="this.importTemplates" t-as="template" t-key="template.template">
                             <a t-att-href="template.template" aria-label="Download" data-tooltip="Download">
-                                <i class="fa fa-download pe-1"/>
+                                <i class="oi pe-1" data-icon="download"/>
                                 <span><t t-out="template.label"/></span>
                             </a>
                         </div>
-                        <DocumentationLink path="'/applications/general/export_import_data.html'" label.translate="Documentation" icon="'fa-question-circle'"/>
+                        <DocumentationLink path="'/applications/general/export_import_data.html'" label.translate="Documentation" icon="'help'"/>
                     </div>
                 </div>
             </Layout>
diff --git a/addons/base_import/static/src/import_data_column_error/import_data_column_error.xml b/addons/base_import/static/src/import_data_column_error/import_data_column_error.xml
index 6c38de4953008c..cc4df6ba8474d4 100644
--- a/addons/base_import/static/src/import_data_column_error/import_data_column_error.xml
+++ b/addons/base_import/static/src/import_data_column_error/import_data_column_error.xml
@@ -11,7 +11,7 @@
                 <ul>
                     <t t-foreach="this.props.errors" t-as="error" t-key="error_index">
                         <a t-if="error_index === 3" href="#" class="o_import_report_count" t-on-click="() => this.state.isExpanded = !this.state.isExpanded">
-                            <i t-attf-class="fa fa-chevron-{{this.state.isExpanded ? 'up' : 'down'}}"></i> <t t-out="this.props.errors.length - error_index"/> more
+                            <i class="oi" t-attf-data-icon="{{this.state.isExpanded ? 'expand_less' : 'expand_more'}}"></i> <t t-out="this.props.errors.length - error_index"/> more
                         </a>
                         <li t-if="this.isErrorVisible(error_index)" t-attf-class="o_import_report_more p-0 text-{{error.priority}} {{error_index > 2 ? 'list-unstyled' : ''}}">
                             <t t-if="error.rows.from === error.rows.to">
@@ -30,7 +30,7 @@
                 <t t-if="typeof this.moreInfo === 'string'" t-out="this.moreInfo"/>
                 <div t-else="" class="o_import_moreinfo" t-on-click="this.onMoreInfoClicked">
                     <a href="#" class="o_import_see_all">
-                        <i class="oi oi-arrow-right"></i> See possible values
+                        <i class="oi" data-icon="east"></i> See possible values
                     </a>
                 </div>
                 <ul t-if="this.state.moreInfoContent" class="o_import_report_more">
diff --git a/addons/base_import/static/src/import_data_progress/import_data_progress.xml b/addons/base_import/static/src/import_data_progress/import_data_progress.xml
index 9859033e2e151e..bd9ef52a646378 100644
--- a/addons/base_import/static/src/import_data_progress/import_data_progress.xml
+++ b/addons/base_import/static/src/import_data_progress/import_data_progress.xml
@@ -25,7 +25,7 @@
                         <span class="fs-4"><t t-out="this.props.importProgress.value" />%</span>
                     </div>
                 </div>
-                <a class="o_progress_stop_import ms-2" role="button" t-on-click="this.interrupt"><i class="fa fa-close fs-2 text-danger" aria-label="Stop Import" title="Stop Import"/></a>
+                <a class="o_progress_stop_import ms-2" role="button" t-on-click="this.interrupt"><i class="oi fs-2 text-danger" data-icon="close" aria-label="Stop Import" title="Stop Import"/></a>
             </div>
         </div>
     </t>
diff --git a/addons/base_import/static/src/import_data_sidepanel/import_data_sidepanel.xml b/addons/base_import/static/src/import_data_sidepanel/import_data_sidepanel.xml
index 1ea0befc1d1fc1..ac5b07a351e6ca 100644
--- a/addons/base_import/static/src/import_data_sidepanel/import_data_sidepanel.xml
+++ b/addons/base_import/static/src/import_data_sidepanel/import_data_sidepanel.xml
@@ -134,10 +134,10 @@
                 <h4>Help</h4>
                 <t t-foreach="this.props.importTemplates" t-as="template" t-key="template">
                     <a class="d-block my-2" t-att-href="template.template" aria-label="Download" data-tooltip="Download">
-                        <i class="fa fa-download"/> <span><t t-out="template.label"/></span>
+                        <i class="oi" data-icon="download"/> <span><t t-out="template.label"/></span>
                     </a>
                 </t>
-                <DocumentationLink path="'/applications/general/export_import_data.html'" label.translate="Documentation" icon="'fa-question-circle'"/>
+                <DocumentationLink path="'/applications/general/export_import_data.html'" label.translate="Documentation" icon="'help'"/>
             </div>
         </div>
     </t>
diff --git a/addons/base_import/static/src/import_records/import_records.xml b/addons/base_import/static/src/import_records/import_records.xml
index 3e50a0dc7934e4..3c5cafec5db677 100644
--- a/addons/base_import/static/src/import_records/import_records.xml
+++ b/addons/base_import/static/src/import_records/import_records.xml
@@ -3,7 +3,7 @@
 
     <t t-name="base_import.ImportRecords">
         <DropdownItem class="'o_import_menu'" onSelected.bind="this.importRecords">
-            <i class="fa fa-fw fa-download me-1"/>Import
+            <i class="oi oi-fw me-1" data-icon="download"/>Import
         </DropdownItem>
     </t>
 
diff --git a/addons/base_import/static/tests/import_action.test.js b/addons/base_import/static/tests/import_action.test.js
index 898138484dc4c2..94d032b8fa4741 100644
--- a/addons/base_import/static/tests/import_action.test.js
+++ b/addons/base_import/static/tests/import_action.test.js
@@ -692,7 +692,7 @@ describe("Import view", () => {
 
         await contains(".o_import_data_content .o_select_menu").selectDropdownItem("Display name");
         if (getMockEnv().isSmall) {
-            await contains(".o_control_panel_main_buttons button > .oi-ellipsis-v").click();
+            await contains(".o_control_panel_main_buttons button > [data-icon='more_vert']").click();
             await contains(".o-dropdown--menu button:visible").click();
         } else {
             await contains(".o_control_panel_main_buttons button:nth-child(2)").click();
@@ -734,7 +734,7 @@ describe("Import view", () => {
         // For this test, we force the display of an error message if this field is set
         await contains(".o_import_data_content .o_select_menu").selectDropdownItem("Selection");
         if (getMockEnv().isSmall) {
-            await contains(".o_control_panel_main_buttons button > .oi-ellipsis-v").click();
+            await contains(".o_control_panel_main_buttons button > [data-icon='more_vert']").click();
             await contains(".o-dropdown--menu button:visible").click();
         } else {
             await contains(".o_control_panel_main_buttons button:nth-child(2)").click();
@@ -797,7 +797,7 @@ describe("Import view", () => {
         // For this test, we force the display of an error message if this field is set
         await contains(".o_import_data_content .o_select_menu").selectDropdownItem("Bar");
         if (getMockEnv().isSmall) {
-            await contains(".o_control_panel_main_buttons button > .oi-ellipsis-v").click();
+            await contains(".o_control_panel_main_buttons button > [data-icon='more_vert']").click();
             await contains(".o-dropdown--menu button:visible").click();
         } else {
             await contains(".o_control_panel_main_buttons button:nth-child(2)").click();
@@ -867,7 +867,7 @@ describe("Import view", () => {
         });
         await contains(".o_import_field_many2many select").select("import_skip_records");
         if (getMockEnv().isSmall) {
-            await contains(".o_control_panel_main_buttons button > .oi-ellipsis-v").click();
+            await contains(".o_control_panel_main_buttons button > [data-icon='more_vert']").click();
             await contains(".o-dropdown--menu button:visible").click();
         } else {
             await contains(".o_control_panel_main_buttons button:nth-child(2)").click();
@@ -1026,7 +1026,7 @@ describe("Import view", () => {
         await animationFrame();
         await contains("input#o_import_batch_limit").edit(1);
         if (getMockEnv().isSmall) {
-            await contains(".o_control_panel_main_buttons button > .oi-ellipsis-v").click();
+            await contains(".o_control_panel_main_buttons button > [data-icon='more_vert']").click();
             await contains(".o-dropdown--menu button:visible").click();
         } else {
             await contains(".o_control_panel_main_buttons button:nth-child(2)").click();
@@ -1159,7 +1159,7 @@ describe("Import view", () => {
         await contains("input#o_import_batch_limit").edit(1);
 
         if (getMockEnv().isSmall) {
-            await contains(".o_control_panel_main_buttons button > .oi-ellipsis-v").click();
+            await contains(".o_control_panel_main_buttons button > [data-icon='more_vert']").click();
             await contains(".o-dropdown--menu button:contains('Import')").click();
         } else {
             await contains(".o_control_panel_main_buttons button:contains('Import')").click();
@@ -1377,7 +1377,7 @@ describe("Import view", () => {
         // For this test, we force the display of an error message if this field is set
         await contains(".o_import_data_content .o_select_menu").selectDropdownItem("Many2Many");
         if (getMockEnv().isSmall) {
-            await contains(".o_control_panel_main_buttons button > .oi-ellipsis-v").click();
+            await contains(".o_control_panel_main_buttons button > [data-icon='more_vert']").click();
             await contains(".o-dropdown--menu button:visible").click();
         } else {
             await contains(".o_control_panel_main_buttons button:nth-child(2)").click();
@@ -1429,7 +1429,7 @@ describe("Import view", () => {
         await contains(".o_import_date_format#date_format-5").edit("YYYYMMDD");
 
         if (getMockEnv().isSmall) {
-            await contains(".o_control_panel_main_buttons button > .oi-ellipsis-v").click();
+            await contains(".o_control_panel_main_buttons button > [data-icon='more_vert']").click();
             await contains(".o-dropdown--menu button:visible").click();
         } else {
             await contains(".o_control_panel_main_buttons button:contains(Import):eq(0)").click();
diff --git a/addons/base_import_module/tests/test_cloc.py b/addons/base_import_module/tests/test_cloc.py
index 217bfe390feec4..878229caadf962 100644
--- a/addons/base_import_module/tests/test_cloc.py
+++ b/addons/base_import_module/tests/test_cloc.py
@@ -13,7 +13,7 @@
 <templates id="template" xml:space="preserve">
     <t t-name="stock_barcode.LineComponent">
         <div t-if="line.picking_id and line.picking_id.origin" name="origin">
-            <i class="fa fa-fw fa-file" />
+            <i class="oi oi-fw oi-filled" data-icon="description"/>
             <span t-out="line.picking_id.origin" />
         </div>
     </t>
@@ -24,7 +24,7 @@
     <template id="template_2">
         <t t-name="stock_barcode.LineComponent">
             <div t-if="line.picking_id and line.picking_id.origin" name="origin">
-                <i class="fa fa-fw fa-file" />
+                <i class="oi oi-fw oi-filled" data-icon="description"/>
                 <span t-out="line.picking_id.origin" />
             </div>
         </t>
diff --git a/addons/base_setup/views/res_config_settings_views.xml b/addons/base_setup/views/res_config_settings_views.xml
index 8ddc829dce44aa..19d4eae33ac7df 100644
--- a/addons/base_setup/views/res_config_settings_views.xml
+++ b/addons/base_setup/views/res_config_settings_views.xml
@@ -16,7 +16,7 @@
                                     <widget name='res_config_invite_users'/>
                                 </setting>
                                 <setting id="active_user_setting">
-                                    <span class="fa fa-lg fa-users" aria-label="Number of active users"/>
+                                    <span class="oi oi-lg oi-filled" data-icon="group" aria-label="Number of active users"/>
                                     <field name='active_user_count' class="w-auto ps-3 fw-bold"/>
                                     <span class='o_form_label' invisible="active_user_count &gt; 1">
                                         Active User
@@ -24,9 +24,9 @@
                                     <span class='o_form_label' invisible="active_user_count &lt;= 1">
                                         Active Users
                                     </span>
-                                    <widget name="documentation_link" path="/applications/general/users.html" icon="fa-question-circle"/>
+                                    <widget name="documentation_link" path="/applications/general/users.html" icon="help"/>
                                     <br/>
-                                    <button name="%(base.action_res_users)d" icon="oi-arrow-right" type="action" string="Manage Users" class="btn-link o_web_settings_access_rights"/>
+                                    <button name="%(base.action_res_users)d" icon="east" type="action" string="Manage Users" class="btn-link o_web_settings_access_rights"/>
                                 </setting>
                             </block>
                         </div>
@@ -45,10 +45,10 @@
                                         </span>
                                     </div>
                                     <div class="mt8">
-                                        <button name="%(base.action_view_base_language_install)d" icon="oi-arrow-right" type="action" string="Add Languages" class="btn-link"/>
+                                        <button name="%(base.action_view_base_language_install)d" icon="east" type="action" string="Add Languages" class="btn-link"/>
                                     </div>
                                     <div class="mt8" groups="base.group_no_one">
-                                        <button name="%(base.res_lang_act_window)d" icon="oi-arrow-right" type="action" string="Manage Languages" class="btn-link"/>
+                                        <button name="%(base.res_lang_act_window)d" icon="east" type="action" string="Manage Languages" class="btn-link"/>
                                     </div>
                                 </setting>
                             </block>
@@ -62,7 +62,7 @@
                                     <br/>
                                     <field name="company_informations" class="text-muted" style="width: 90%;"/>
                                     <br/>
-                                    <button name="open_company" icon="oi-arrow-right" type="object" string="Update Info" class="btn-link"/>
+                                    <button name="open_company" icon="east" type="object" string="Update Info" class="btn-link"/>
                                 </setting>
                                 <setting id="companies_setting">
                                     <field name='company_count' nolabel="1" class="w-auto ps-1 fw-bold"/>
@@ -74,7 +74,7 @@
                                     </span>
                                     <br/>
                                     <div class="mt8">
-                                        <button name="%(base.action_res_company_form)d" icon="oi-arrow-right" type="action" string="Manage Companies" class="btn-link"/>
+                                        <button name="%(base.action_res_company_form)d" icon="east" type="action" string="Manage Companies" class="btn-link"/>
                                     </div>
                                 </setting>
                                 <setting id="document_layout_setting" string="Document Layout" help="Choose the layout of your documents" company_dependent="1">
@@ -83,11 +83,11 @@
                                             <label for="external_report_layout_id" string="Layout" class="col-3 col-lg-3 o_light_label"/>
                                             <field name="external_report_layout_id" domain="[('type','=', 'qweb')]" class="oe_inline"/>
                                         </div>
-                                            <button name="%(web.action_base_document_layout_configurator)d" string="Configure Document Layout" type="action" class="oe_link" icon="oi-arrow-right"/>
+                                            <button name="%(web.action_base_document_layout_configurator)d" string="Configure Document Layout" type="action" class="oe_link" icon="east"/>
                                             <br groups="base.group_no_one"/>
-                                            <button name="edit_external_header" string="Edit Layout" type="object" class="oe_link" groups="base.group_no_one" icon="oi-arrow-right"/>
+                                            <button name="edit_external_header" string="Edit Layout" type="object" class="oe_link" groups="base.group_no_one" icon="east"/>
                                             <br groups="base.group_no_one"/>
-                                            <button name="%(web.action_report_externalpreview)d" string="Preview Document" type="action" class="oe_link" groups="base.group_no_one" icon="oi-arrow-right"/>
+                                            <button name="%(web.action_report_externalpreview)d" string="Preview Document" type="action" class="oe_link" groups="base.group_no_one" icon="east"/>
                                     </div>
                                 </setting>
                                 <field name="company_id" invisible="1"/>
@@ -117,12 +117,12 @@
                         <setting string="Default Access Rights" help="Set custom access rights for new users" title="By default, new users get highest access rights for all installed apps. If unchecked, new users will only have basic employee access." id="access_rights">
                             <div class="content-group">
                                 <div class="mt8">
-                                    <button type="object" name="open_new_user_default_groups" string="Default Access Rights" icon="oi-arrow-right" class="btn-link"/>
+                                    <button type="object" name="open_new_user_default_groups" string="Default Access Rights" icon="east" class="btn-link"/>
                                 </div>
                             </div>
                         </setting>
                         <setting string="API Keys" help="API Keys allow your users to access Odoo with external tools when multi-factor authentication is enabled." groups="base.group_system">
-                            <button type="action" name="%(base.action_apikeys_admin)d" string="Manage API Keys" icon="oi-arrow-right" class="btn-link"/>
+                            <button type="action" name="%(base.action_apikeys_admin)d" string="Manage API Keys" icon="east" class="btn-link"/>
                         </setting>
                         <setting string="Import &amp; Export" help="Allow users to import data from CSV/XLS/XLSX/ODS files" documentation="/applications/general/export_import_data.html" groups="base.group_no_one" id="allow_import">
                             <field name="module_base_import" />
diff --git a/addons/board/static/src/add_to_board/add_to_board.xml b/addons/board/static/src/add_to_board/add_to_board.xml
index 5921b7084bb77a..802c1d86b60543 100644
--- a/addons/board/static/src/add_to_board/add_to_board.xml
+++ b/addons/board/static/src/add_to_board/add_to_board.xml
@@ -20,7 +20,7 @@
     </t>
 
     <t t-name="Dashboard.DashboardIcon">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="o_ui_app_icon oi-large">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="o_ui_app_icon oi-lg">
             <path d="M4 8C4 5.79086 5.79086 4 8 4H25V21C25 23.2091 23.2091 25 21 25H4V8Z" fill="var(--oi-color, #FC868B)"/>
             <path d="M4 35C4 32.7909 5.79086 31 8 31H19V42C19 44.2091 17.2091 46 15 46H4V35Z" fill="var(--oi-color, #F9464C)"/>
             <path d="M25 46H29C31.2091 46 33 44.2091 33 42V31H29C26.7909 31 25 32.7909 25 35V46Z" fill="var(--oi-color, #FBB945)"/>
diff --git a/addons/board/static/src/board_controller.xml b/addons/board/static/src/board_controller.xml
index 655f1761cdeca5..5f8bdd2dc14e65 100644
--- a/addons/board/static/src/board_controller.xml
+++ b/addons/board/static/src/board_controller.xml
@@ -23,7 +23,7 @@
                     <t t-foreach="'1 1-1 1-1-1 1-2 2-1'.split(' ')" t-as="layout" t-key="layout">
                         <DropdownItem onSelected="() => this.selectLayout(layout)">
                             <img t-attf-src="/board/static/img/layout_{{layout}}.png" alt=""/>
-                            <i t-if="layout == this.board.layout" class="fa fa-check fa-lg text-success" aria-label='Layout' role="img" title="Layout"/>
+                            <i t-if="layout == this.board.layout" class="oi oi-lg text-success" data-icon="check" aria-label='Layout' role="img" title="Layout"/>
                         </DropdownItem>
                     </t>
                 </t>
@@ -36,9 +36,9 @@
                         <div class="o-dashboard-action mx-3 my-1 bg-view border" t-att-data-idx="action_index">
                             <h3 t-attf-class="o-dashboard-action-header {{action.title ? '' : 'oe_header_empty'}} p-2 m-2">
                                 <span> <t t-out="action.title"/> </span>
-                                <span t-if="!this.env.isSmall" class="btn float-end p-1 text-muted" t-on-click="() => this.closeAction(column, action)"><i class="fa fa-close"/></span>
-                                <span class="btn float-end p-1 text-muted" t-if="!action.isFolded" t-on-click="() => this.toggleAction(action, !this.env.isSmall)"><i class="fa fa-window-minimize"/></span>
-                                <span class="btn float-end p-1 text-muted" t-if="action.isFolded"  t-on-click="() => this.toggleAction(action, !this.env.isSmall)"><i class="fa fa-window-maximize"/></span>
+                                <span t-if="!this.env.isSmall" class="btn float-end p-1 text-muted" t-on-click="() => this.closeAction(column, action)"><i class="oi" data-icon="close"/></span>
+                                <span class="btn float-end p-1 text-muted" t-if="!action.isFolded" t-on-click="() => this.toggleAction(action, !this.env.isSmall)"><i class="oi" data-icon="minimize"/></span>
+                                <span class="btn float-end p-1 text-muted" t-if="action.isFolded"  t-on-click="() => this.toggleAction(action, !this.env.isSmall)"><i class="oi" data-icon="fullscreen"/></span>
                             </h3>
                             <BoardAction t-if="!action.isFolded" action="action" />
                         </div>
diff --git a/addons/board/static/tests/board.test.js b/addons/board/static/tests/board.test.js
index 074d3ca0ac3393..450adf0239c818 100644
--- a/addons/board/static/tests/board.test.js
+++ b/addons/board/static/tests/board.test.js
@@ -139,11 +139,11 @@ describe("board_desktop", () => {
 
         expect(".o-dashboard-action .o_list_view").toHaveCount(1);
 
-        await contains("h3 i.fa-window-minimize").click();
+        await contains("h3 i[data-icon='minimize']").click();
 
         expect(".o-dashboard-action .o_list_view").toHaveCount(0);
 
-        await contains("h3 i.fa-window-maximize").click();
+        await contains("h3 i[data-icon='fullscreen']").click();
 
         // content is visible again
         expect(".o-dashboard-action .o_list_view").toHaveCount(1);
@@ -671,7 +671,7 @@ describe("board_mobile", () => {
             message: "The display layout is force to 1",
         });
         expect(".o-dashboard-action .o_control_panel").not.toHaveCount();
-        expect(".o-dashboard-action-header .fa-close").toHaveCount(0, {
+        expect(".o-dashboard-action-header .oi[data-icon='close']").toHaveCount(0, {
             message: "Should not have a close action button",
         });
     });
diff --git a/addons/bus/static/src/debug/bus_logs_menu_item.xml b/addons/bus/static/src/debug/bus_logs_menu_item.xml
index f7f7ee1d5847dc..50dcd8c1567f3f 100644
--- a/addons/bus/static/src/debug/bus_logs_menu_item.xml
+++ b/addons/bus/static/src/debug/bus_logs_menu_item.xml
@@ -8,7 +8,7 @@
                         Enable Bus Logging <input class="form-check-input" t-att-checked="this.busLogsService.enabled" type="checkbox"/>
                     </label>
                 </div>
-                <button class="btn btn-light text-muted ms-2" title="Download logs" t-custom-ref="downloadButton" t-on-click="this.onClickDownload"><i class="fa fa-download"/></button>
+                <button class="btn btn-light text-muted ms-2" title="Download logs" t-custom-ref="downloadButton" t-on-click="this.onClickDownload"><i class="oi" data-icon="download"/></button>
             </div>
         </DropdownItem>
     </t>
diff --git a/addons/calendar/models/res_partner.py b/addons/calendar/models/res_partner.py
index a90698a421d917..b58b644de15d06 100644
--- a/addons/calendar/models/res_partner.py
+++ b/addons/calendar/models/res_partner.py
@@ -58,7 +58,7 @@ def _compute_meeting(self):
     def _compute_application_statistics_hook(self):
         data_list = super()._compute_application_statistics_hook()
         for partner in self.filtered('meeting_count'):
-            stat_info = {'iconClass': 'fa-calendar', 'value': partner.meeting_count, 'label': _('Meetings')}
+            stat_info = {'icon': 'calendar_today', 'iconClass': 'oi-filled', 'value': partner.meeting_count, 'label': _('Meetings')}
             data_list[partner.id].append(stat_info)
         return data_list
 
diff --git a/addons/calendar/static/src/core/web/activity_list_popover_item_patch.xml b/addons/calendar/static/src/core/web/activity_list_popover_item_patch.xml
index 301a8f2162dbd5..f10037a3f8dbbd 100644
--- a/addons/calendar/static/src/core/web/activity_list_popover_item_patch.xml
+++ b/addons/calendar/static/src/core/web/activity_list_popover_item_patch.xml
@@ -3,7 +3,7 @@
     <t t-inherit="mail.ActivityListPopoverItem" t-inherit-mode="extension">
         <xpath expr="//button[hasclass('o-mail-ActivityListPopoverItem-editbtn')]" position="after">
             <button t-if="this.hasRescheduleMeetingButton" class="o-mail-ActivityListPopoverItem-editbtn btn btn-sm btn-success btn-link" t-on-click="this.onClickReschedule">
-                <i class="fa fa-calendar"/>
+                <i class="oi oi-filled" data-icon="calendar_today"/>
             </button>
         </xpath>
     </t>
diff --git a/addons/calendar/static/src/core/web/activity_patch.xml b/addons/calendar/static/src/core/web/activity_patch.xml
index 81b1ee541ff437..34e6faa4b434c1 100644
--- a/addons/calendar/static/src/core/web/activity_patch.xml
+++ b/addons/calendar/static/src/core/web/activity_patch.xml
@@ -7,7 +7,7 @@
         </xpath>
         <xpath expr="//button[hasclass('o-mail-Activity-edit')]" position="after">
             <button t-if="this.props.activity.calendar_event_id" class="btn btn-link p-0 me-3" t-on-click="this.onClickReschedule">
-                <i class="fa fa-calendar"/> Reschedule
+                <i class="oi oi-filled" data-icon="calendar_today"/> Reschedule
             </button>
         </xpath>
     </t>
diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss
index ccfea8acaec3a9..7274016ed3d0a9 100644
--- a/addons/calendar/static/src/scss/calendar.scss
+++ b/addons/calendar/static/src/scss/calendar.scss
@@ -75,20 +75,20 @@
     &.o_event_dot {
         &.o_attendee_status_needsAction {
             &:before {
-                content: "\f1db"; // fa-circle-thin
+                content: "radio_button_unchecked";
             }
         }
 
         &.o_attendee_status_tentative:before {
-            content: "\f059"; // fa-question-circle
+            content: "help";
         }
 
         &.o_attendee_status_declined:before {
-            content: "\f05e"; // fa-ban
+            content: "block";
         }
 
         &.o_attendee_status_alone {
-            content: "\f06a"; // fa-exclamation-circle
+            content: "error";
         }
     }
 
diff --git a/addons/calendar/static/src/views/attendee_calendar/activity/attendee_calendar_activity_list_popover_item.xml b/addons/calendar/static/src/views/attendee_calendar/activity/attendee_calendar_activity_list_popover_item.xml
index 7cb787850b2fbe..19f9106a32ed16 100644
--- a/addons/calendar/static/src/views/attendee_calendar/activity/attendee_calendar_activity_list_popover_item.xml
+++ b/addons/calendar/static/src/views/attendee_calendar/activity/attendee_calendar_activity_list_popover_item.xml
@@ -16,13 +16,13 @@
             </div>
             <Dropdown>
                 <button class="o-mail-ActivityListPopoverItem-reschedulebtn btn btn-sm btn-info btn-link" type="button" title="Reschedule" aria-label="Reschedule">
-                    <i class="fa fa-calendar o_button_icon"/>
+                    <i class="oi oi-filled o_button_icon" data-icon="calendar_today"/>
                 </button>
                 <t t-set-slot="content">
                     <DropdownItem onSelected="() => this.onRescheduleActivity(this.targetDays.today)">
                         <div class="d-flex justify-content-between">
                             <span>
-                                <i class="oi oi-schedule-today me-1"/> Today
+                                <i class="oi me-1" data-icon="early_on"/> Today
                             </span>
                             <span t-out="this.targetDays.today.day.weekdayShort" class="ms-2 text-muted"/>
                         </div>
@@ -30,7 +30,7 @@
                     <DropdownItem onSelected="() => this.onRescheduleActivity(this.targetDays.tomorrow)">
                         <div class="d-flex justify-content-between">
                             <span>
-                                <i class="oi oi-schedule-tomorrow me-1"/> Tomorrow
+                                <i class="oi me-1" data-icon="event_upcoming"/> Tomorrow
                             </span>
                             <span t-out="this.targetDays.tomorrow.day.weekdayShort" class="ms-2 text-muted"/>
                         </div>
@@ -38,7 +38,7 @@
                     <DropdownItem onSelected="() => this.onRescheduleActivity(this.targetDays.nextWeek)">
                         <div class="d-flex justify-content-between">
                             <span>
-                                <i class="oi oi-schedule-later me-1"/> Next Week
+                                <i class="oi me-1" data-icon="calendar_clock"/> Next Week
                             </span>
                             <span t-out="this.targetDays.nextWeek.day.weekdayShort" class="ms-2 text-muted"/>
                         </div>
@@ -55,7 +55,7 @@
                 title="View Meeting" aria-label="View Meeting"
                 class="o-mail-ActivityListPopoverItem-viewmeetingbtn btn btn-sm btn-success btn-link"
                 t-on-click="() => this.props.onViewMeeting(this.props.activity.calendar_event_id)">
-                <i class="fa fa-eye"/>
+                <i class="oi" data-icon="visibility"/>
             </button>
         </xpath>
     </t>
diff --git a/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_controller.xml b/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_controller.xml
index 55af0930b8bdfd..e6171d8239b0b8 100644
--- a/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_controller.xml
+++ b/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_controller.xml
@@ -20,8 +20,8 @@
                         <button class="btn text-nowrap"
                         t-on-click="this.model.syncStatus.google_calendar == 'sync_active' ? this.onStopGoogleSynchronization : this.onStopMicrosoftSynchronization">
                             <div>
-                                <i id="check_symbol" class='fa fa-check px-1 o_text_green o_calendar_check'/>
-                                <i id="stop_symbol" class='fa fa-square px-1 o_text_red o_calendar_stop'/>
+                                <i id="check_symbol" class='oi px-1 o_text_green o_calendar_check' data-icon="check"/>
+                                <i id="stop_symbol" class='oi oi-filled px-1 o_text_red o_calendar_stop' data-icon="squarestop"/>
                                 <span id="check_text" class='o_calendar_check'>
                                     <t t-if="this.model.syncStatus.google_calendar == 'sync_active'">Google</t>
                                     <t t-else="">Outlook</t>
@@ -34,8 +34,8 @@
                 <t t-elif="this.model.syncStatus.google_calendar == 'sync_paused' or this.model.syncStatus.microsoft_calendar =='sync_paused'">
                     <button class="btn text-nowrap" t-on-click="this.model.syncStatus.google_calendar == 'sync_paused' ? this.onUnpauseGoogleSynchronization : this.onUnpauseMicrosoftSynchronization">
                         <div>
-                            <i id="pause_symbol" class='fa fa-pause px-1 o_text_orange o_calendar_pause'/>
-                            <i id="stop_symbol" class='fa fa-square px-1 o_text_red o_calendar_stop'/>
+                            <i id="pause_symbol" class='oi oi-filled px-1 o_text_orange o_calendar_pause' data-icon="pause"/>
+                            <i id="stop_symbol" class='oi oi-filled px-1 o_text_red o_calendar_stop' data-icon="square"/>
                             <span id="pause_text" class='o_text_orange o_calendar_pause'>Synchro is paused</span>
                             <span id="stop_text" class="o_text_red o_calendar_stop">Stop synchro</span>
                         </div>
diff --git a/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_model.js b/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_model.js
index aa9f1391c0bf58..54fe236bfe01b6 100644
--- a/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_model.js
+++ b/addons/calendar/static/src/views/attendee_calendar/attendee_calendar_model.js
@@ -217,7 +217,7 @@ export class AttendeeCalendarModel extends CalendarModel {
     normalizeRecord(rawRecord) {
         const normalizedRecord = super.normalizeRecord(rawRecord);
         if (rawRecord.effective_privacy === "private") {
-            normalizedRecord.titleIcon = "fa fa-lock";
+            normalizedRecord.titleIcon = "lock";
         }
         return normalizedRecord;
     }
diff --git a/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_popover.xml b/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_popover.xml
index 500a93c66eca93..86ab4f5d79e025 100644
--- a/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_popover.xml
+++ b/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_popover.xml
@@ -19,7 +19,7 @@
     <t t-name="calendar.AttendeeCalendarCommonPopover.footer" t-inherit="web.CalendarCommonPopover.footer" t-inherit-mode="primary">
         <xpath expr="//t[@t-if='this.isEventDeletable']" position="after">
             <a t-if="this.isEventArchivable and this.isEventDetailsVisible" href="#" class="btn btn-secondary" t-on-click="this.onClickArchive">
-                <i class="fa fa-trash"/>
+                <i class="oi oi-filled" data-icon="delete"/>
             </a>
         </xpath>
         <xpath expr="//t[@t-if='this.isEventDeletable']" position="before">
diff --git a/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_renderer.xml b/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_renderer.xml
index 7791b1bc4fcc32..dccec6c6203333 100644
--- a/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_renderer.xml
+++ b/addons/calendar/static/src/views/attendee_calendar/common/attendee_calendar_common_renderer.xml
@@ -3,7 +3,7 @@
     <t t-name="calendar.AttendeeCalendarCommonRenderer.event">
             <span t-if="!isTimeHidden and isMonth" class="d-none d-lg-inline fc-time fw-normal" t-out="startTime" />
             <div t-attf-class="o_event_title text-truncate">
-                <i t-if="isAlone" class="fa fa-exclamation-circle align-self-top me-1" data-tooltip="You're alone in this meeting"/>
+                <i t-if="isAlone" class="oi align-self-top me-1" data-icon="error" data-tooltip="You're alone in this meeting"/>
                 <span t-out="title" t-attf-class="#{(attendeeStatus == 'accepted' || rawRecord.is_highlighted)  ? 'fw-bolder' : ''}"/>
                     <t t-if="!isAllDay and !isMonth and !isSmall">
                         <t t-if="24 > duration and duration > 0.5">
diff --git a/addons/calendar/static/src/views/fields/many2many_attendee.js b/addons/calendar/static/src/views/fields/many2many_attendee.js
index b3f73d3d121ac9..3ffb851c9314d5 100644
--- a/addons/calendar/static/src/views/fields/many2many_attendee.js
+++ b/addons/calendar/static/src/views/fields/many2many_attendee.js
@@ -8,9 +8,9 @@ import { registry } from "@web/core/registry";
 import { useSpecialData } from "@web/views/fields/relational_utils";
 
 const ICON_BY_STATUS = {
-    accepted: "fa-check",
-    declined: "fa-times",
-    tentative: "fa-question",
+    accepted: "check",
+    declined: "close",
+    tentative: "help",
 };
 
 export class AttendeeTag extends AvatarTag {
diff --git a/addons/calendar/static/src/views/fields/many2many_attendee.xml b/addons/calendar/static/src/views/fields/many2many_attendee.xml
index 8929e7d78d5707..f56d008ba3e427 100644
--- a/addons/calendar/static/src/views/fields/many2many_attendee.xml
+++ b/addons/calendar/static/src/views/fields/many2many_attendee.xml
@@ -10,15 +10,15 @@
         <xpath expr="//img[hasclass('o_avatar')]" position="replace">
             <div class="o_attendee_tags_list">
                 <img class="o_avatar o_m2m_avatar position-relative rounded" t-att-src="this.props.imageUrl" t-on-click="this.onAvatarClick"/>
-                <div t-if="this.statusIcon" class="attendee_tag_status fa fa-fw rounded-circle" t-att-class="this.statusIcon" t-attf-class="o_attendee_status_{{this.props.status}}"/>
+                <div t-if="this.statusIcon" class="attendee_tag_status oi oi-fw rounded-circle" t-att-data-icon="this.statusIcon" t-attf-class="o_attendee_status_{{this.props.status}}"/>
             </div>
         </xpath>
         <xpath expr="//div[hasclass('o_tag_badge_text')]" position="after">
             <div t-if="this.props.isUnavailable" data-tooltip="Unavailable" class="ms-1">
-                <i class="fa fa-moon-o position-relative" role="img"/>
+                <i class="oi position-relative" data-icon="dark_mode" role="img"/>
             </div>
             <div t-if="this.props.noEmail" data-tooltip="No email" class="ms-1">
-                <i class="fa fa-exclamation-triangle position-relative" role="img"/>
+                <i class="oi position-relative" data-icon="warning" role="img"/>
             </div>
         </xpath>
     </t>
diff --git a/addons/calendar/static/src/views/fields/many2many_attendee_expandable.xml b/addons/calendar/static/src/views/fields/many2many_attendee_expandable.xml
index baee1c52c7a5a3..4b8c8b55d9fed3 100644
--- a/addons/calendar/static/src/views/fields/many2many_attendee_expandable.xml
+++ b/addons/calendar/static/src/views/fields/many2many_attendee_expandable.xml
@@ -14,7 +14,7 @@
                         <br/><t t-out="this.declinedCount"/> declined
                         <br/><t t-out="this.uncertainCount"/> uncertain
                     </div>
-                    <i role="button" t-on-click="this.onExpanderClick" t-att-class="this.state.expanded ? 'oi oi-chevron-up' : 'oi oi-chevron-down'"></i>
+                    <i role="button" t-on-click="this.onExpanderClick" class="oi" t-att-data-icon="state.expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"></i>
                 </div>
             </t>
         </xpath>
diff --git a/addons/calendar/static/tests/activity.test.js b/addons/calendar/static/tests/activity.test.js
index 1660dd8765dcad..84fc19cfbf444c 100644
--- a/addons/calendar/static/tests/activity.test.js
+++ b/addons/calendar/static/tests/activity.test.js
@@ -23,7 +23,7 @@ test("activity click on Reschedule", async () => {
     const pyEnv = await startServer();
     const resPartnerId = pyEnv["res.partner"].create({});
     const meetingActivityTypeId = pyEnv["mail.activity.type"].create({
-        icon: "fa-calendar",
+        icon: "calendar_today",
         name: "Meeting",
     });
     const calendarAttendeeId = pyEnv["calendar.attendee"].create({
@@ -54,7 +54,7 @@ test("Can delete activity linked to an event", async () => {
     const pyEnv = await startServer();
     const partnerId = pyEnv["res.partner"].create({ name: "Milan Kundera" });
     const activityTypeId = pyEnv["mail.activity.type"].create({
-        icon: "fa-calendar",
+        icon: "calendar_today",
         name: "Meeting",
     });
     const attendeeId = pyEnv["calendar.attendee"].create({
diff --git a/addons/calendar/static/tests/activity_widget.test.js b/addons/calendar/static/tests/activity_widget.test.js
index c9ad1d43c085ae..e880f5341950de 100644
--- a/addons/calendar/static/tests/activity_widget.test.js
+++ b/addons/calendar/static/tests/activity_widget.test.js
@@ -19,7 +19,7 @@ test("list activity widget: reschedule button in dropdown", async () => {
     const pyEnv = await startServer();
     const resPartnerId = pyEnv["res.partner"].create({});
     const activityTypeId = pyEnv["mail.activity.type"].create({
-        icon: "fa-calendar",
+        icon: "calendar_today",
         name: "Meeting",
     });
     const tomorrow = serializeDateTime(DateTime.now().plus({ days: 1 }));
@@ -58,6 +58,6 @@ test("list activity widget: reschedule button in dropdown", async () => {
     });
     await contains(".o-mail-ListActivity-summary", { text: "OXP" });
     await click(".o-mail-ActivityButton"); // open the popover
-    await contains(".o-mail-ActivityListPopoverItem-editbtn .fa-pencil", { count: 0 });
-    await contains(".o-mail-ActivityListPopoverItem-editbtn .fa-calendar");
+    await contains(".o-mail-ActivityListPopoverItem-editbtn [data-icon='edit']", { count: 0 });
+    await contains(".o-mail-ActivityListPopoverItem-editbtn [data-icon='calendar_today']");
 });
diff --git a/addons/calendar/static/tests/attendee_calendar_views.test.js b/addons/calendar/static/tests/attendee_calendar_views.test.js
index 4220aa6ef7126b..a14ad6176f1972 100644
--- a/addons/calendar/static/tests/attendee_calendar_views.test.js
+++ b/addons/calendar/static/tests/attendee_calendar_views.test.js
@@ -32,16 +32,16 @@ const arch = /*xml*/ `
         all_day="allday"
         mode="month"
     >
-        <field name="partner_ids" options="{'block': True, 'icon': 'fa fa-users'}"
+        <field name="partner_ids" options="{'block': True, 'icon': 'group', 'icon_class': 'oi-filled'}"/>
             filters="1" widget="many2manyattendeeexpandable" write_model="calendar.filters"
             write_field="partner_id" filter_field="partner_checked" avatar_field="avatar_128"/>
-        <field name="partner_id" string="Organizer" options="{'icon': 'fa fa-user-o'}"/>
+        <field name="partner_id" string="Organizer" options="{'icon': 'person'}"/>
         <field name="user_id"/>
         <field name="start"/>
         <field name="stop"/>
         <field name="allday"/>
         <field name="res_model_name" invisible="not res_model_name"
-            options="{'icon': 'fa fa-link', 'shouldOpenRecord': true}"/>
+            options="{'icon': 'link', 'shouldOpenRecord': true}"/>
     </calendar>
 `;
 
@@ -175,7 +175,7 @@ test("Linked record rendering", async () => {
 
     await changeScale("week");
     await clickEvent(eventId);
-    expect(".fa-link").toHaveCount(1, { message: "A link icon should be present" });
+    expect("[data-icon='link']").toHaveCount(1, { message: "A link icon should be present" });
     expect("li a[href='#']").toHaveText(display_name);
 });
 
diff --git a/addons/calendar/static/tests/tours/calendar_tour.js b/addons/calendar/static/tests/tours/calendar_tour.js
index 455d5778fb3203..bb0de59a2bded5 100644
--- a/addons/calendar/static/tests/tours/calendar_tour.js
+++ b/addons/calendar/static/tests/tours/calendar_tour.js
@@ -39,7 +39,7 @@ registry.category("web_tour.tours").add("calendar_appointments_hour_tour", {
             run: "edit 02:00",
         },
         {
-            trigger: ".fa-cloud-upload",
+            trigger: "[data-icon='cloud_upload']",
             content: "Save the new event",
             run: "click",
         },
diff --git a/addons/calendar/views/calendar_views.xml b/addons/calendar/views/calendar_views.xml
index cf5b18257dceb5..119c97f300e54f 100644
--- a/addons/calendar/views/calendar_views.xml
+++ b/addons/calendar/views/calendar_views.xml
@@ -145,15 +145,15 @@
                                         force_save="1" readonly="videocall_source == 'discuss' or not user_can_edit"/>
                                     <button name="clear_videocall_location" type="object" class="btn btn-link o_input_box_overlay_end"
                                         invisible="not videocall_location or not user_can_edit" context="{'recurrence_update': recurrence_update}">
-                                        <i title="Clear meeting" data-tooltip="Clear meeting" class="fa fa-times"/>
+                                        <i title="Clear meeting" data-tooltip="Clear meeting" class="oi" data-icon="close"/>
                                     </button>
                                     <button name="action_join_video_call" class="btn btn-link o_input_box_overlay_end" type="object"
                                         invisible="not videocall_location or not user_can_edit">
-                                        <i title="Join Video Call" data-tooltip="Join video call" class="fa fa-sign-in"/>
+                                        <i title="Join Video Call" data-tooltip="Join video call" class="oi" data-icon="login"/>
                                     </button>
                                     <button name="set_discuss_videocall_location" type="object" class="btn btn-link o_input_box_overlay_end"
                                         invisible="videocall_location or not user_can_edit" context="{'recurrence_update': recurrence_update}">
-                                        <span class="mx-1"><i class="fa fa-plus me-1"/>Odoo meeting</span>
+                                        <span class="mx-1"><i class="oi me-1" data-icon="add"/>Odoo meeting</span>
                                     </button>
                                 </div>
                             </div>
@@ -193,7 +193,7 @@
                                         </span>
                                     </span>
                                     <div name="send_buttons" class="d-flex gap-2 mb-auto ms-4" invisible="not attendees_count">
-                                        <button name="action_open_composer" help="Send Email to attendees" type="object" string=" EMAIL" icon="fa-envelope" invisible="not user_can_edit"/>
+                                        <button name="action_open_composer" help="Send Email to attendees" type="object" string=" EMAIL" icon="mail" icon_class="oi-filled" invisible="not user_can_edit"/>
                                     </div>
                                 </div>
                                 <label for="partner_ids" class="d-none d-touch-block" invisible="not accepted_count and not tentative_count and not declined_count and not awaiting_count"/>
@@ -269,16 +269,16 @@
                             </group>
                         </page>
                         <page name="page_invitations" string="Invitations" groups="base.group_no_one" invisible="not user_can_edit">
-                            <button name="action_sendmail" type="object" string="Send Invitations" icon="fa-envelope" class="oe_link"/>
+                            <button name="action_sendmail" type="object" string="Send Invitations" icon="mail" icon_class="oi-filled" class="oe_link"/>
                             <field name="attendee_ids" widget="one2many" mode="list,kanban" readonly="1">
                                 <list string="Invitation details" editable="top" create="false" delete="false">
                                     <field name="partner_id" />
                                     <field name="email" widget="email"/>
                                     <field name="phone" widget="phone"/>
                                     <field name="state" />
-                                    <button name="do_tentative" invisible="state not in ('needsAction', 'declined', 'accepted')" string="Uncertain" type="object" icon="fa-asterisk"/>
-                                    <button name="do_accept" string="Accept" invisible="state not in ('needsAction', 'tentative', 'declined')" type="object" icon="fa-check text-success"/>
-                                    <button name="do_decline" string="Decline" invisible="state not in ('needsAction', 'tentative', 'accepted')" type="object" icon="fa-times-circle text-danger"/>
+                                    <button name="do_tentative" invisible="state not in ('needsAction', 'declined', 'accepted')" string="Uncertain" type="object" icon="emergency"/>
+                                    <button name="do_accept" string="Accept" invisible="state not in ('needsAction', 'tentative', 'declined')" type="object" icon="check" icon_class="text-success"/>
+                                    <button name="do_decline" string="Decline" invisible="state not in ('needsAction', 'tentative', 'accepted')" type="object" icon="cancel" icon_class="oi-filled text-danger"/>
                                 </list>
                                 <kanban class="o_kanban_mobile" create="false" delete="false">
 
@@ -288,9 +288,9 @@
                                             <field name="email" widget="email"/>
                                             <span>Status: <field name="state" /></span>
                                             <footer class="justify-content-end">
-                                                <button name="do_tentative" invisible="state not in ('needsAction', 'declined', 'accepted')" string="Uncertain" type="object" icon="fa-asterisk"/>
-                                                <button name="do_accept" invisible="state not in ('needsAction', 'tentative', 'declined')" string="Accept" type="object" class="text-success" icon="fa-check"/>
-                                                <button name="do_decline" invisible="state not in ('needsAction', 'tentative', 'accepted')" string="Decline" type="object" class="text-danger" icon="fa-times-circle"/>
+                                                <button name="do_tentative" invisible="state not in ('needsAction', 'declined', 'accepted')" string="Uncertain" type="object" icon="emergency"/>
+                                                <button name="do_accept" invisible="state not in ('needsAction', 'tentative', 'declined')" string="Accept" type="object" class="text-success" icon="check"/>
+                                                <button name="do_decline" invisible="state not in ('needsAction', 'tentative', 'accepted')" string="Decline" type="object" class="text-danger" icon="cancel" icon_class="oi-filled"/>
                                             </footer>
                                         </t>
                                     </templates>
@@ -317,7 +317,7 @@
                 </div>
                 <field name="invalid_email_partner_ids" invisible="1"/> <!--used in many2many_attendees widget-->
                 <div class="o_input_box">
-                    <i class="o_input_box_overlay_start fa fa-tag" title="Booking Name"/>
+                    <i class="o_input_box_overlay_start oi" data-icon="label" title="Booking Name"/>
                     <field name="name" nolabel="1"
                         placeholder="Add Title"
                     />
@@ -349,14 +349,14 @@
                     <field name="stop" invisible="1"/>
                 </div>
                 <div class="o_input_box">
-                    <i class="o_input_box_overlay_start fa fa-user" title="Participants"/>
+                    <i class="o_input_box_overlay_start oi oi-filled" data-icon="person" title="Participants"/>
                     <field name="partner_ids" nolabel="1"
                         widget="many2many_tags"
                         placeholder="Participants"
                     />
                 </div>
                 <div class="o_input_box">
-                    <i class="o_input_box_overlay_start fa fa-map" title="Location"/>
+                    <i class="o_input_box_overlay_start oi" data-icon="map" title="Location"/>
                     <field name="location" nolabel="1"
                         placeholder="Room or Location"
                     />
@@ -367,25 +367,25 @@
                     <field name="videocall_source" force_save="1" invisible="1"/>
                     <button name="set_discuss_videocall_location" type="object" class="o_input_box_overlay_end btn btn-link"
                         invisible="videocall_location" context="{'recurrence_update': recurrence_update}">
-                        <span class="fa fa-plus me-1"/>Video conference
+                        <span class="oi me-1" data-icon="add"/>Video conference
                     </button>
                 </div>
                 <div class="o_input_box" invisible="not videocall_location">
-                    <i class="o_input_box_overlay_start fa fa-video-camera" title="Videocall URL"/>
+                    <i class="o_input_box_overlay_start oi oi-filled" data-icon="videocam" title="Videocall URL"/>
                     <field name="videocall_location" nolabel="1" widget="CopyClipboardChar"/>
-                    <button name="clear_videocall_location" class="o_input_box_overlay_end btn btn-link"><i class="fa fa-remove" title="Remove"/></button>
+                    <button name="clear_videocall_location" class="o_input_box_overlay_end btn btn-link"><i class="oi" data-icon="close" title="Remove"/></button>
                 </div>
                 <div class="o_input_box">
-                    <i class="o_input_box_overlay_start fa fa-lock" title="Visibility"/>
+                    <i class="o_input_box_overlay_start oi" data-icon="lock" title="Visibility"/>
                     <field name="privacy_placeholder" invisible="1"/> <!-- Used to generate the privacy field's placeholder. -->
                     <field name="privacy" nolabel="1" options="{'placeholder_field': 'privacy_placeholder'}"/>
                 </div>
                 <div class="o_input_box">
-                    <i class="o_input_box_overlay_start fa fa-circle" title="Show as"/>
+                    <i class="o_input_box_overlay_start oi oi-filled" data-icon="circle" title="Show as"/>
                     <field name="show_as" nolabel="1"/>
                 </div>
                 <div class="o_input_box d-flex">
-                    <i class="o_input_box_overlay_start fa fa-sticky-note" title="Notes"/>
+                    <i class="o_input_box_overlay_start oi" data-icon="sticky_note_2" title="Notes"/>
                     <field name="notes" nolabel="1" placeholder="Notes" widget="calendar_event_notes_html"/>
                 </div>
             </form>
@@ -413,20 +413,19 @@
                 <!-- For recurrence update Dialog -->
                 <field name="recurrency" invisible="1"/>
                 <field name="recurrence_update" invisible="1"/>
-
-                <field name="location" invisible="not location" options="{'icon': 'fa fa-map-marker'}"/>
-                <field name="partner_ids" options="{'block': True, 'icon': 'fa fa-users'}"
+                <field name="location" invisible="not location" options="{'icon': 'location_on'}"/>
+                <field name="partner_ids" options="{'block': True, 'icon': 'group', 'icon_class': 'oi-filled'}"
                        filters="1" widget="many2manyattendeeexpandable" write_model="calendar.filters"
                        write_field="partner_id" filter_field="partner_checked" avatar_field="avatar_128"
                 />
                 <field name="videocall_location" widget="CopyClipboardURL" text="Join Video Call"
-                       options="{'icon': 'fa fa-lg fa-video-camera'}" invisible="not videocall_location"/>
+                       options="{'icon': 'videocam', 'icon_class': 'oi-filled'}" invisible="not videocall_location"/>
                 <field name="res_model_name" invisible="not res_model_name"
-                       options="{'icon': 'fa fa-link', 'shouldOpenRecord': true}"/>
-                <field name="alarm_ids" invisible="not alarm_ids" options="{'icon': 'fa fa-bell-o'}"/>
-                <field name="categ_ids" invisible="not categ_ids" options="{'icon': 'fa fa-tag', 'color_field': 'color', 'on_tag_click': 'edit_color'}"/>
-                <field name="partner_id" string="Organizer" options="{'icon': 'fa fa-user-o'}"/>
-                <field name="description" class="text-wrap" invisible="not display_description" options="{'icon': 'fa fa-sticky-note'}"/>
+                       options="{'icon': 'link', 'shouldOpenRecord': true}"/>
+                <field name="alarm_ids" invisible="not alarm_ids" options="{'icon': 'notifications'}"/>
+                <field name="categ_ids" invisible="not categ_ids" options="{'icon': 'label', 'color_field': 'color', 'on_tag_click': 'edit_color'}"/>
+                <field name="partner_id" string="Organizer" options="{'icon': 'person'}"/>
+                <field name="description" class="text-wrap" invisible="not display_description" options="{'icon': 'sticky_note_2'}"/>
             </calendar>
         </field>
     </record>
diff --git a/addons/calendar/views/mail_activity_views.xml b/addons/calendar/views/mail_activity_views.xml
index 6b0466d2a1c089..9621329bd59480 100644
--- a/addons/calendar/views/mail_activity_views.xml
+++ b/addons/calendar/views/mail_activity_views.xml
@@ -30,7 +30,7 @@
             <xpath expr="//field[@name='note']" position="before">
                 <div invisible="activity_category != 'meeting'" class="text-muted text-center w-100">
                     <div>
-                        <i class="fa fa-9x fa-calendar p-3" title="Calendar" aria-hidden="true"/>
+                        <i class="oi oi-9x oi-filled p-3" data-icon="calendar_today" title="Calendar" aria-hidden="true"/>
                     </div>
                     <p>Schedule a meeting in your calendar</p>
                 </div>
diff --git a/addons/calendar/views/res_partner_views.xml b/addons/calendar/views/res_partner_views.xml
index 4d1570efbd3ce0..5c9451802591e2 100644
--- a/addons/calendar/views/res_partner_views.xml
+++ b/addons/calendar/views/res_partner_views.xml
@@ -11,7 +11,8 @@
                     <div name="button_box" position="inside">
                         <button class="oe_stat_button" type="object"
                             name="schedule_meeting"
-                            icon="fa-calendar"
+                            icon="calendar_today"
+                            icon_class="oi-filled"
                             context="{'partner_id': id, 'partner_name': name}">
                             <field string="Meetings" name="meeting_count" widget="statinfo"/>
                         </button>
diff --git a/addons/calendar/wizard/calendar_provider_config.xml b/addons/calendar/wizard/calendar_provider_config.xml
index 54277c68ed197e..f40a8cb341e0b4 100644
--- a/addons/calendar/wizard/calendar_provider_config.xml
+++ b/addons/calendar/wizard/calendar_provider_config.xml
@@ -9,7 +9,7 @@
                 <div invisible="external_calendar_provider != 'google'">
                     <img alt="Google Calendar icon" src="/calendar/static/src/img/google_calendar_40.png" style="height: 40px; margin-right: 5px"/>
                     <span class="me-1 o_form_label">Google Calendar</span>
-                    <widget name="documentation_link" path="/applications/productivity/calendar/google.html" icon="fa-question-circle"/>
+                    <widget name="documentation_link" path="/applications/productivity/calendar/google.html" icon="help"/>
                     <div class="text-muted mt-2">
                         Synchronize your calendar with Google Calendar
                     </div>
@@ -22,7 +22,7 @@
                 <div invisible="external_calendar_provider != 'microsoft'">
                     <img alt="Microsoft Outlook icon" src="/calendar/static/src/img/microsoft_calendar_40.png" style="height: 40px; margin-right: 5px"/>
                     <span class="me-1 o_form_label">Outlook Calendar</span>
-                    <widget name="documentation_link" path="/applications/productivity/calendar/outlook.html" icon="fa-question-circle"/>
+                    <widget name="documentation_link" path="/applications/productivity/calendar/outlook.html" icon="help"/>
                     <div class="text-muted mt-2">
                         Synchronize your calendar with Outlook
                     </div>
diff --git a/addons/calendar/wizard/mail_activity_schedule_views.xml b/addons/calendar/wizard/mail_activity_schedule_views.xml
index 4ee58c371104bd..2b5a820cfb64ce 100644
--- a/addons/calendar/wizard/mail_activity_schedule_views.xml
+++ b/addons/calendar/wizard/mail_activity_schedule_views.xml
@@ -24,7 +24,7 @@
             <xpath expr="//field[@name='note']" position="before">
                 <div invisible="activity_category != 'meeting'" class="text-muted text-center w-100">
                     <div>
-                        <i class="fa fa-9x fa-calendar p-3" title="Calendar" aria-hidden="true"/>
+                        <i class="oi oi-9x oi-filled p-3" data-icon="calendar_today" title="Calendar" aria-hidden="true"/>
                     </div>
                     <p>Schedule a meeting in your calendar</p>
                 </div>
diff --git a/addons/calendar_sms/views/calendar_views.xml b/addons/calendar_sms/views/calendar_views.xml
index f6bb98e4a1b97b..11e379b5522cbf 100644
--- a/addons/calendar_sms/views/calendar_views.xml
+++ b/addons/calendar_sms/views/calendar_views.xml
@@ -31,7 +31,7 @@
         <field name="inherit_id" ref="calendar.view_calendar_event_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@name='send_buttons']" position="inside">
-                <button name="action_send_sms" help="Send SMS to attendees" type="object" string="SMS" icon="fa-mobile" invisible="not user_can_edit"/>
+                <button name="action_send_sms" help="Send SMS to attendees" type="object" string="SMS" icon="smartphone" invisible="not user_can_edit"/>
             </xpath>
             <xpath expr="//field[@name='phone']" position="attributes">
                 <attribute name="options">{'enable_sms': false}</attribute>
diff --git a/addons/certificate/views/res_config_settings_view.xml b/addons/certificate/views/res_config_settings_view.xml
index 174bce524fad63..d63bba47f54f5b 100644
--- a/addons/certificate/views/res_config_settings_view.xml
+++ b/addons/certificate/views/res_config_settings_view.xml
@@ -11,7 +11,7 @@
                         <div class="content-group">
                             <div class="row mt16">
                                 <div class="col-6">
-                                    <button name="%(certificate.certificate_certificate_action_view_list)d" icon="oi-arrow-right" type="action"
+                                    <button name="%(certificate.certificate_certificate_action_view_list)d" icon="east" type="action"
                                             string="Certificates" class="btn-link"/>
                                 </div>
                             </div>
@@ -21,7 +21,7 @@
                         <div class="content-group">
                             <div class="row mt16">
                                 <div class="col-6">
-                                    <button name="%(certificate.certificate_key_action_view_list)d" icon="oi-arrow-right" type="action"
+                                    <button name="%(certificate.certificate_key_action_view_list)d" icon="east" type="action"
                                             string="Keys" class="btn-link"/>
                                 </div>
                             </div>
diff --git a/addons/cloud_storage_migration/views/res_config_settings.xml b/addons/cloud_storage_migration/views/res_config_settings.xml
index daf31e33fe17de..a54f391be3d134 100644
--- a/addons/cloud_storage_migration/views/res_config_settings.xml
+++ b/addons/cloud_storage_migration/views/res_config_settings.xml
@@ -23,19 +23,20 @@
                                 string="Cron Job"
                                 type="action"
                                 class="btn-link ps-0"
-                                icon="fa-clock-o"/>
+                                icon="schedule"/>
                         <button name="action_open_cloud_storage_migration_configurations"
                                 string="Parameters"
                                 type="object"
                                 class="btn-link"
-                                icon="fa-cog"/>
+                                icon="settings"
+                                icon_class="oi-filled"/>
                         <field name="cloud_storage_migration_progress" widget="progressbar"/>
                     </div>
                     <button name="%(cloud_storage_migration.action_cloud_storage_migration_report)d" 
                         string="Attachments Report"
                         type="action"
                         class="btn-link"
-                        icon="fa-bar-chart"/>
+                        icon="bar_chart"/>
                     <div>
                         <label class="o_light_label mr8" for="cloud_storage_migration_message_model_ids"/>
                         <field name="cloud_storage_migration_message_model_ids" widget="many2many_tags"/>
diff --git a/addons/crm/models/res_partner.py b/addons/crm/models/res_partner.py
index e08cf27be38bb0..48e80117d9900e 100644
--- a/addons/crm/models/res_partner.py
+++ b/addons/crm/models/res_partner.py
@@ -44,7 +44,7 @@ def _compute_application_statistics_hook(self):
             return data_list
         for partner in self.filtered('opportunity_count'):
             data_list[partner.id].append(
-                {'iconClass': 'fa-star', 'value': partner.opportunity_count, 'label': _('Opportunities')}
+                {'icon': 'star', 'iconClass': 'oi-filled', 'value': partner.opportunity_count, 'label': _('Opportunities')}
             )
         return data_list
 
diff --git a/addons/crm/static/src/components/lead_generation_dropdown/lead_generation_dropdown.xml b/addons/crm/static/src/components/lead_generation_dropdown/lead_generation_dropdown.xml
index adefe2a94e574b..5e5b494d462447 100644
--- a/addons/crm/static/src/components/lead_generation_dropdown/lead_generation_dropdown.xml
+++ b/addons/crm/static/src/components/lead_generation_dropdown/lead_generation_dropdown.xml
@@ -19,7 +19,7 @@
                                 t-on-mouseenter="() => this.swapDescription(element)"
                                 t-on-mouseleave="() => this.resetDescription(element)">
                             <div class="o_lead_mining_element_icon d-flex align-items-center justify-content-center border rounded">
-                                <i t-if="element.status === 'INSTALLING'" class="fa fa-spin fa-circle-o-notch"/>
+                                <i t-if="element.status === 'INSTALLING'" class="oi oi-spin" data-icon="autorenew"/>
                                 <img t-else="" t-att-src="element.icon"
                                     t-att-class="(element.status === 'NOT_INSTALLED') ? 'o_uninstalled_module' : ''"
                                     alt=""/>
diff --git a/addons/crm/static/src/scss/crm.scss b/addons/crm/static/src/scss/crm.scss
index a65116b4160d36..57f5e03f9b33e4 100644
--- a/addons/crm/static/src/scss/crm.scss
+++ b/addons/crm/static/src/scss/crm.scss
@@ -5,7 +5,7 @@
 .crm_quick_create_opportunity_form_group {
     padding-bottom: 0.5rem;
 
-    i.fa {
+    i.oi {
         text-align: center;
         min-width: 2rem;
     }
diff --git a/addons/crm/static/src/views/crm_form/crm_pls_tooltip_button.xml b/addons/crm/static/src/views/crm_form/crm_pls_tooltip_button.xml
index 10e7785928cc5e..2aeed19ec3d1d0 100644
--- a/addons/crm/static/src/views/crm_form/crm_pls_tooltip_button.xml
+++ b/addons/crm/static/src/views/crm_form/crm_pls_tooltip_button.xml
@@ -45,7 +45,8 @@
                     <span t-if="isSampleData" class="text-primary fw-normal ms-2">(sample data)</span>
                 </h5>
                 <t t-call="crm.PlsTooltipSectionContent">
-                    <t t-set="iconClasses" t-value="'oi oi-arrow-up-right text-success'"/>
+                    <t t-set="iconClasses" t-value="'oi text-success'"/>
+                    <t t-set="iconName" t-value="'north_east'"/>
                     <t t-set="sectionEntries" t-value="this.props.top3Data"/>
                     <t t-set="teamName" t-value="this.props.teamName"/>
                     <t t-set="useDefault" t-value="positiveDefault"/>
@@ -58,7 +59,8 @@
                     <span t-if="isSampleData" class="text-primary fw-normal ms-2">(sample data)</span>
                 </h5>
                 <t t-call="crm.PlsTooltipSectionContent">
-                    <t t-set="iconClasses" t-value="'oi oi-arrow-down-right text-danger'"/>
+                    <t t-set="iconClasses" t-value="'oi text-danger'"/>
+                    <t t-set="iconName" t-value="'south_east'"/>
                     <t t-set="sectionEntries" t-value="this.props.low3Data"/>
                     <t t-set="teamName" t-value="this.props.teamName"/>
                     <t t-set="useDefault" t-value="negativeDefault"/>
@@ -69,7 +71,7 @@
                 <span t-else="">Computed by Odoo AI using your data.</span>
                 <a role="button" class="ms-2 btn-link"
                     href="https://www.odoo.com/documentation/latest/applications/sales/crm/track_leads/lead_scoring.html#predictive-lead-scoring" target="_blank">
-                    <i class="fa fa-info-circle pe-1"/>Learn More
+                    <i class="oi pe-1" data-icon="info"/>Learn More
                 </a>
             </div>
         </div>
@@ -78,7 +80,7 @@
     <t t-name="crm.PlsTooltipSectionContent">
         <div t-foreach="sectionEntries" t-as="group" t-key="group_index"
             t-attf-class="px-2 py-1 {{group.field === 'tag_id' ? 'd-flex align-items-center' : ''}}">
-            <span t-attf-class="{{iconClasses}} o_crm_pls_tooltip_icon me-1"/>
+            <span t-attf-class="{{iconClasses}} o_crm_pls_tooltip_icon me-1" t-attf-data-icon="{{iconName}}"/>
             <t t-if="group.field === 'stage_id'">
                 <span class="fw-bolder"><t t-out="group.value"/></span>
                 <span class="mx-1">stage</span>
diff --git a/addons/crm/views/crm_lead_templates.xml b/addons/crm/views/crm_lead_templates.xml
index b5578655558b6e..552b7bb12c08cf 100644
--- a/addons/crm/views/crm_lead_templates.xml
+++ b/addons/crm/views/crm_lead_templates.xml
@@ -6,28 +6,28 @@
             Lead/Opportunity created<br/>
         </t>
         <t t-if="lead.partner_name or lead.contact_name">
-            <i class="fa fa-user fa-fw me-1"/>
+            <i class="oi oi-fw oi-filled me-1" data-icon="person"/>
             <span>
                 <b t-if="lead.partner_name" t-out="lead.partner_name"/><t t-if="lead.contact_name and lead.partner_name">,</t>
                 <t t-if="lead.contact_name" t-out="lead.contact_name"/>
             </span><br/>
         </t>
         <t t-if="lead.function">
-            <i class="fa fa-briefcase fa-fw me-1"/>
+            <i class="oi oi-fw me-1" data-icon="work"/>
             <span t-out="lead.function"/><br/>
         </t>
         <t t-if="lead.street or lead.street2">
             <t t-set="has_address_line" t-value="True"/>
-            <i class="fa fa-map-marker fa-fw me-1"/>
+            <i class="oi oi-fw me-1" data-icon="location_on"/>
             <span t-out="', '.join(s_bit for s_bit in [lead.street, lead.street2] if s_bit)"/><br/>
         </t>
         <t t-if="lead.city or lead.zip or lead.state_id or lead.country_id">
-            <i t-if="has_address_line" class="fa fa-fw me-1"/>
-            <i t-else="" class="fa fa-map-marker fa-fw me-1"/>
+            <i t-if="has_address_line" class="oi oi-fw me-1"/>
+            <i t-else="" class="oi oi-fw me-1" data-icon="location_on"/>
             <span t-out="', '.join(s_bit for s_bit in [lead.city, lead.zip, lead.state_id.display_name, lead.country_id.display_name] if s_bit)"/><br/>
         </t>
         <t t-if="lead.website">
-            <i class="fa fa-globe fa-fw me-1"/>
+            <i class="oi oi-fw me-1" data-icon="public"/>
             <span>
                 <a t-att-href="lead.website" t-out="lead.website" target='_blank'/>
             </span><br/>
diff --git a/addons/crm/views/crm_lead_views.xml b/addons/crm/views/crm_lead_views.xml
index 8a6cdc0e08cc56..c6b95134b4dc69 100644
--- a/addons/crm/views/crm_lead_views.xml
+++ b/addons/crm/views/crm_lead_views.xml
@@ -31,7 +31,7 @@
                         <field name="is_automated_probability" invisible="1"/>
                         <div class="oe_button_box" name="button_box">
                             <button name="action_schedule_meeting" type="object"
-                                class="oe_stat_button" icon="fa-calendar"
+                                class="oe_stat_button" icon="calendar_today"
                                 context="{'partner_id': partner_id}"
                                 invisible="not id or type == 'lead'">
                                 <div class="o_stat_info">
@@ -40,7 +40,7 @@
                                 </div>
                             </button>
                             <button name="action_show_potential_duplicates" type="object"
-                                class="oe_stat_button" icon="fa-star"
+                                class="oe_stat_button" icon="star" icon_class="oi-filled"
                                 invisible="duplicate_lead_count &lt; 1">
                                 <div class="o_stat_info">
                                     <field name="duplicate_lead_count" class="o_stat_value"/>
@@ -201,23 +201,23 @@
                                 />
                                 <label for="email_from" class="oe_inline"/>
                                 <div class="o_row o_row_readonly">
-                                    <button name="mail_action_blacklist_remove" class="fa fa-ban text-danger"
+                                    <button name="mail_action_blacklist_remove" class="oi text-danger" data-icon="block"
                                         title="This email is blacklisted for mass mailings. Click to unblacklist."
                                         type="object" context="{'default_email': email_from}" groups="base.group_user"
                                         invisible="not is_blacklisted"/>
                                     <field name="email_from" string="Email" widget="email" placeholder="e.g. john.doe@email.com"/>
-                                    <span class="fa fa-exclamation-triangle text-warning oe_edit_only"
+                                    <span class="oi text-warning oe_edit_only" data-icon="warning"
                                         title="By saving this change, the customer email will also be updated."
                                         invisible="not partner_email_update"/>
                                 </div>
                                 <label for="phone" class="oe_inline"/>
                                 <div class="o_row o_row_readonly">
-                                    <button name="phone_action_blacklist_remove" class="fa fa-ban text-danger"
+                                    <button name="phone_action_blacklist_remove" class="oi text-danger" data-icon="block"
                                         title="This phone number is blacklisted for SMS Marketing. Click to unblacklist."
                                         type="object" context="{'default_phone': phone}" groups="base.group_user"
                                         invisible="not phone_blacklisted"/>
                                     <field name="phone" widget="phone" placeholder="e.g. (555) 555-0199"/>
-                                    <span class="fa fa-exclamation-triangle text-warning oe_edit_only"
+                                    <span class="oi text-warning oe_edit_only" data-icon="warning"
                                         title="By saving this change, the customer phone number will also be updated."
                                         invisible="not partner_phone_update"/>
                                 </div>
@@ -391,7 +391,7 @@
                 <form>
                     <group class="crm_quick_create_opportunity_form_group">
                         <div class="o_input_box" colspan="2">
-                            <i class="fa fa-user o_input_box_overlay_start" title="Contact"/>
+                            <i class="oi oi-filled o_input_box_overlay_start" data-icon="person" title="Contact"/>
                             <field name="partner_id"
                                 nolabel="1"
                                 placeholder='Contact'
@@ -407,25 +407,25 @@
                             />
                         </div>
                         <div class="o_input_box" colspan="2">
-                            <i class="fa fa-briefcase o_input_box_overlay_start" title="Opportunity Name"/>
+                            <i class="oi o_input_box_overlay_start" data-icon="work" title="Opportunity Name"/>
                             <field name="name" nolabel="1" placeholder="Opportunity's Name"/>
                         </div>
                         <div class="o_input_box" colspan="2">
-                            <i class="fa fa-envelope o_input_box_overlay_start" title="Contact Email"/>
+                            <i class="oi oi-filled o_input_box_overlay_start" data-icon="mail" title="Contact Email"/>
                             <field name="email_from" string="Contact Email" placeholder='Contact Email' nolabel="1"/>
                         </div>
                         <div class="o_input_box" colspan="2">
-                            <i class="fa fa-mobile fa-lg o_input_box_overlay_start" title="Contact Phone"/>
+                            <i class="oi o_input_box_overlay_start" data-icon="smartphone" title="Contact Phone"/>
                             <field name="phone" string="Contact Phone" placeholder='Contact Phone' nolabel="1"/>
                         </div>
                         <div class="o_input_box" colspan="2">
-                            <i class="fa fa-money o_input_box_overlay_start" title="Expected Revenue"/>
+                            <i class="oi o_input_box_overlay_start" data-icon="payments" title="Expected Revenue"/>
                             <field name="expected_revenue" widget="monetary" options="{'currency_field': 'company_currency'}"/>
                             <field name="priority" class="o_input_box_overlay_end" nolabel="1" widget="priority"/>
                         </div>
                         <div class="o_row" colspan="2">
                             <div class="o_input_box" groups="crm.group_use_recurring_revenues">
-                                <button class="o_input_box_overlay_start btn btn-link fa fa-refresh" data-tooltip="Recurring Revenue" title="Recurring Revenue"/>
+                                <button class="o_input_box_overlay_start btn btn-link oi" data-icon="refresh" data-tooltip="Recurring Revenue" title="Recurring Revenue"/>
                                 <field name="recurring_revenue" widget="monetary" options="{'currency_field': 'company_currency'}"/>
                             </div>
                             <field name="recurring_plan" placeholder='e.g. "Monthly"'
@@ -739,7 +739,7 @@
                     <field name="is_rotting" column_invisible="True"/>
                     <field name="rotting_days" column_invisible="True"/>
                     <widget name="mail_activity_mixin_list_reschedule_dropdown"/>
-                    <button name="%(crm.action_lead_mail_compose)d" type="action" string="Email" icon="fa-envelope" invisible="won_status == 'lost'"/>
+                    <button name="%(crm.action_lead_mail_compose)d" type="action" string="Email" icon="mail" icon_class="oi-filled" invisible="won_status == 'lost'"/>
                 </list>
             </field>
         </record>
diff --git a/addons/crm/views/crm_lost_reason_views.xml b/addons/crm/views/crm_lost_reason_views.xml
index 9dabc45287bf99..dd378ddf5d16b4 100644
--- a/addons/crm/views/crm_lost_reason_views.xml
+++ b/addons/crm/views/crm_lost_reason_views.xml
@@ -20,7 +20,7 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button name="action_lost_leads" type="object"
-                            class="oe_stat_button" icon="fa-star">
+                            class="oe_stat_button" icon="star" icon_class="oi-filled">
                             <div class="o_stat_info">
                                 <field name="leads_count" class="o_stat_value"/>
                                 <span class="o_stat_text"> Leads</span>
diff --git a/addons/crm/views/crm_team_views.xml b/addons/crm/views/crm_team_views.xml
index d4af7741026f39..28c31b6a1c0db5 100644
--- a/addons/crm/views/crm_team_views.xml
+++ b/addons/crm/views/crm_team_views.xml
@@ -194,7 +194,7 @@
                     <field name="assignment_optout" widget="boolean_toggle" invisible="not assignment_auto_enabled"/>
                     <label for="lead_all_assigned_month_count" invisible="assignment_optout"/>
                     <div class="o_input_box" invisible="assignment_optout">
-                        <i class="o_input_box_overlay_start fa fa-warning" title="Exceeded" invisible="not lead_all_assigned_month_exceeded"/>
+                        <i class="o_input_box_overlay_start oi" data-icon="warning" title="Exceeded" invisible="not lead_all_assigned_month_exceeded"/>
                         <field name="lead_all_assigned_month_count" invisible="not assignment_enabled"/>
                     </div>
                     <field name="assignment_max" invisible="not assignment_enabled"/>
@@ -212,7 +212,8 @@
                     <button name="action_open_opportunities"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-star"
+                        icon="star"
+                        icon_class="oi-filled"
                         groups="sales_team.group_sale_salesman">
                         <div class="o_field_widget o_stat_info">
                             <span class="o_stat_value"><field nolabel="1" name="opportunity_count"/></span>
@@ -273,7 +274,7 @@
 
                     <xpath expr="//field[@name='name']" position="after">
                         <div class="ms-2" t-if="record.alias_name.value and record.alias_domain.value">
-                            <span t-translation="off"><i class="fa fa-envelope-o" aria-label="Leads" title="Leads" role="img"></i>&amp;nbsp; <field name="alias_id"/></span>
+                            <span t-translation="off"><i class="oi" data-icon="mail" aria-label="Leads" title="Leads" role="img"></i>&amp;nbsp; <field name="alias_id"/></span>
                         </div>
                     </xpath>
 
diff --git a/addons/crm/views/res_config_settings_views.xml b/addons/crm/views/res_config_settings_views.xml
index 3259935e998612..dd609f66faef1b 100644
--- a/addons/crm/views/res_config_settings_views.xml
+++ b/addons/crm/views/res_config_settings_views.xml
@@ -14,7 +14,7 @@
                             <field name="group_use_recurring_revenues"/>
                             <div invisible="not group_use_recurring_revenues">
                                 <button type="action" name="crm.crm_recurring_plan_action"
-                                        string="Manage Recurring Plans" icon="oi-arrow-right" class="oe_link"/>
+                                        string="Manage Recurring Plans" icon="east" class="oe_link"/>
                             </div>
                         </setting>
                         <setting id="crm_lead" title="Use leads if you need a qualification step before creating an opportunity or a customer. It can be a business card you received, a contact form filled in your website, or a file of unqualified prospects you import, etc. Once qualified, the lead can be converted into a business opportunity and/or a new customer in your address book." help="Add a qualification step before the creation of an opportunity">
@@ -27,7 +27,7 @@
                         </setting>
                         <setting string="Ringover VOIP Phone" id="ringover-voip" help="Make and receive calls from Odoo with Ringover's dialer. Track calls, SMS messages, and get AI-powered transcripts of your conversations.">
                             <a class="oe_link fw-bold" href="https://chromewebstore.google.com/detail/ringover-voip-phone-for-o/bdeapcnahigpibeoehandgaiijljkdnl" target="_blank">
-                                <i class="oi oi-arrow-right"/>
+                                <i class="oi" data-icon="east"/>
                                 Install Extension
                             </a>
                         </setting>
@@ -68,7 +68,7 @@
                                 <field name="crm_auto_assignment_action"
                                     required="crm_use_auto_assignment"/>
                                 <button name="action_crm_assign_leads" type="object" class="btn-link w-auto">
-                                    <i title="Update now" role="img" aria-label="Update now" class="fa fa-fw fa-refresh"></i>
+                                    <i title="Update now" role="img" aria-label="Update now" class="oi oi-fw" data-icon="refresh"></i>
                                 </button>
                             </div>
                             <div class="row" invisible="not crm_use_auto_assignment or crm_auto_assignment_action == 'manual'">
diff --git a/addons/crm/views/res_partner_views.xml b/addons/crm/views/res_partner_views.xml
index e5c2589bc0cae9..6e057d51599181 100644
--- a/addons/crm/views/res_partner_views.xml
+++ b/addons/crm/views/res_partner_views.xml
@@ -11,7 +11,7 @@
                     <div name="button_box" position="inside">
                         <button class="oe_stat_button o_res_partner_tip_opp" type="object"
                             name="action_view_opportunity"
-                            icon="fa-star"
+                            icon="star" icon_class="oi-filled"
                             groups="sales_team.group_sale_salesman"
                             context="{'default_partner_id': id, 'default_type':'opportunity'}">
                             <field string="Opportunities" name="opportunity_count" widget="statinfo"/>
diff --git a/addons/crm/views/utm_campaign_views.xml b/addons/crm/views/utm_campaign_views.xml
index 6bc78f25b0c284..9093292e04476f 100644
--- a/addons/crm/views/utm_campaign_views.xml
+++ b/addons/crm/views/utm_campaign_views.xml
@@ -19,7 +19,7 @@
                     groups="sales_team.group_sale_salesman" type="object" name="action_redirect_to_leads_opportunities"
                     class="btn-outline-primary rounded-pill me-1 order-3">
                     <span class="badge">
-                        <i class="fa fa-fw fa-star" t-att-aria-label="crm_lead_count_label" role="img"/>
+                        <i class="oi oi-fw oi-filled" data-icon="star" t-att-aria-label="crm_lead_count_label" role="img"/>
                         <field name="crm_lead_count"/>
                     </span>
                 </a>
@@ -36,7 +36,7 @@
                 <button name="action_redirect_to_leads_opportunities"
                     type="object"
                     class="oe_stat_button order-3"
-                    icon="fa-star"
+                    icon="star" icon_class="oi-filled"
                     groups="sales_team.group_sale_salesman">
                     <div class="o_field_widget o_stat_info">
                         <field name="use_leads" invisible="1"/>
diff --git a/addons/crm_iap_mine/views/crm_iap_lead_mining_request_views.xml b/addons/crm_iap_mine/views/crm_iap_lead_mining_request_views.xml
index 3869c1c3b483ec..0c2361ab855d2f 100644
--- a/addons/crm_iap_mine/views/crm_iap_lead_mining_request_views.xml
+++ b/addons/crm_iap_mine/views/crm_iap_lead_mining_request_views.xml
@@ -22,13 +22,13 @@
                 </div>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button name="action_get_opportunity_action" class="oe_stat_button" type="object" icon="fa-star" context="{'create': False}" invisible="lead_type != 'opportunity' or state != 'done'">
+                        <button name="action_get_opportunity_action" class="oe_stat_button" type="object" icon="star" icon_class="oi-filled" context="{'create': False}" invisible="lead_type != 'opportunity' or state != 'done'">
                             <div class="o_stat_info">
                                 <field name="lead_count"/>
                                 <span class="o_stat_text">Opportunities</span>
                             </div>
                         </button>
-                        <button name="action_get_lead_action" class="oe_stat_button" type="object" icon="fa-star" groups="crm.group_use_lead" context="{'create': False}" invisible="lead_type != 'lead' or state != 'done'">
+                        <button name="action_get_lead_action" class="oe_stat_button" type="object" icon="star" icon_class="oi-filled" groups="crm.group_use_lead" context="{'create': False}" invisible="lead_type != 'lead' or state != 'done'">
                             <div class="o_stat_info">
                                 <field name="lead_count"/>
                                 <span class="o_stat_text">Leads</span>
diff --git a/addons/crm_iap_mine/views/mail_templates.xml b/addons/crm_iap_mine/views/mail_templates.xml
index 64151b2756f59a..0b7510a00b0dcd 100644
--- a/addons/crm_iap_mine/views/mail_templates.xml
+++ b/addons/crm_iap_mine/views/mail_templates.xml
@@ -29,7 +29,7 @@
                     </div>
                 </div>
                 <div t-if="website" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-globe text-primary"/>
+                    <i class="oi oi-fw me-2 text-primary" data-icon="public"/>
                     <b>Website</b>
                 </div>
                 <div t-if="website" class="col-sm-9">
diff --git a/addons/crm_livechat/static/src/core/thread_actions.js b/addons/crm_livechat/static/src/core/thread_actions.js
index 2b6915c5a2a277..31e3fab02336d0 100644
--- a/addons/crm_livechat/static/src/core/thread_actions.js
+++ b/addons/crm_livechat/static/src/core/thread_actions.js
@@ -14,7 +14,7 @@ registerThreadAction("create-lead", {
         placeholderText: _t("e.g. Product pricing"),
         thread,
         title: _t("Create Lead"),
-        icon: "fa fa-handshake-o",
+        icon: "handshake",
     }),
     actionPanelOpen({ owner }) {
         this.popover?.open(
@@ -24,7 +24,7 @@ registerThreadAction("create-lead", {
     },
     actionPanelOuterClass: "bg-100",
     condition: false, // managed by ThreadAction patch
-    icon: "fa fa-handshake-o",
+    icon: "handshake",
     name: _t("Create Lead"),
     sequence: 10,
     sequenceGroup: 25,
diff --git a/addons/crm_livechat/views/chatbot_script_views.xml b/addons/crm_livechat/views/chatbot_script_views.xml
index d66e1d7f6b7315..35e2aacfe17249 100644
--- a/addons/crm_livechat/views/chatbot_script_views.xml
+++ b/addons/crm_livechat/views/chatbot_script_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
                 <button name="action_view_leads" type="object" class="oe_stat_button"
-                        icon="fa-star" invisible="lead_count == 0">
+                        icon="star" icon_class="oi-filled" invisible="lead_count == 0">
                     <field string="Leads" name="lead_count" widget="statinfo" />
                 </button>
             </div>
diff --git a/addons/crm_livechat/views/crm_lead_views.xml b/addons/crm_livechat/views/crm_lead_views.xml
index b1afbec7853b4b..7956f80f98223d 100644
--- a/addons/crm_livechat/views/crm_lead_views.xml
+++ b/addons/crm_livechat/views/crm_lead_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="crm.crm_lead_view_form"/>
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_schedule_meeting']" position="after">
-                <button name="action_open_livechat" type="object" class="oe_stat_button" icon="fa-comments" invisible="not origin_channel_id" groups="sales_team.group_sale_salesman">
+                <button name="action_open_livechat" type="object" class="oe_stat_button" icon="forum" invisible="not origin_channel_id" groups="sales_team.group_sale_salesman">
                     <div class="o_stat_info"><span class="o_stat_text">View Live Chat</span></div>
                 </button>
             </xpath>
diff --git a/addons/crm_sale_project/views/crm_lead_views.xml b/addons/crm_sale_project/views/crm_lead_views.xml
index 512b35ab772d71..3fcfb3ab905e42 100644
--- a/addons/crm_sale_project/views/crm_lead_views.xml
+++ b/addons/crm_sale_project/views/crm_lead_views.xml
@@ -12,7 +12,7 @@
                     name="action_view_project_ids"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-check"
+                    icon="check"
                     groups="project.group_project_user"
                     invisible="not project_count"
                 >
diff --git a/addons/crm_sale_project/views/project_project_views.xml b/addons/crm_sale_project/views/project_project_views.xml
index 9ffc9a3d38d289..7ebe9ac328dba1 100644
--- a/addons/crm_sale_project/views/project_project_views.xml
+++ b/addons/crm_sale_project/views/project_project_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="project.edit_project"/>
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_customer_preview']" position="after">
-                <button name="action_view_lead" icon="fa-star" type="object" class="oe_stat_button"
+                <button name="action_view_lead" icon="star" icon_class="oi-filled" type="object" class="oe_stat_button"
                     invisible="not lead_id or not allow_billable" groups="sales_team.group_sale_salesman_all_leads">
                     <div class="o_stat_info">
                         <span class="o_stat_text">Opportunity</span>
diff --git a/addons/crm_sms/views/crm_lead_views.xml b/addons/crm_sms/views/crm_lead_views.xml
index 009f7148c9fdec..367b92e5d4c8f8 100644
--- a/addons/crm_sms/views/crm_lead_views.xml
+++ b/addons/crm_sms/views/crm_lead_views.xml
@@ -36,7 +36,7 @@
                 <button name="%(crm_sms.crm_lead_act_window_sms_composer_single)d" type="action" string="SMS" />
             </xpath>
             <xpath expr="//button[@name='%(crm.action_lead_mail_compose)d']" position="after">
-                <button name="%(crm_sms.crm_lead_act_window_sms_composer_multi)d" type="action" string="SMS" icon="fa-comments" invisible="won_status == 'lost'"/>
+                <button name="%(crm_sms.crm_lead_act_window_sms_composer_multi)d" type="action" string="SMS" icon="forum" icon_class="oi-filled" invisible="won_status == 'lost'"/>
             </xpath>
         </field>
     </record>
diff --git a/addons/data_recycle/views/data_recycle_model_views.xml b/addons/data_recycle/views/data_recycle_model_views.xml
index 658939275bc521..7cc4177fc96d66 100644
--- a/addons/data_recycle/views/data_recycle_model_views.xml
+++ b/addons/data_recycle/views/data_recycle_model_views.xml
@@ -26,7 +26,7 @@
                     <sheet>
                         <div class="oe_button_box" name="button_box">
                             <button class="oe_stat_button" name="open_records"
-                                    type="object" icon="fa-bars">
+                                    type="object" icon="menu">
                                 <field name="records_to_recycle_count" string="Records" widget="statinfo"/>
                             </button>
                         </div>
diff --git a/addons/data_recycle/views/data_recycle_record_views.xml b/addons/data_recycle/views/data_recycle_record_views.xml
index fdfa94425fa088..934060a77bef46 100644
--- a/addons/data_recycle/views/data_recycle_record_views.xml
+++ b/addons/data_recycle/views/data_recycle_record_views.xml
@@ -11,8 +11,8 @@
                     <field name="res_id" />
                     <field name="recycle_model_id" string="Recycle Rule" optional="hide" />
                     <field name="name" />
-                    <button icon="fa-check" string="Validate" type="object" name="action_validate" />
-                    <button icon="fa-times" string="Discard" type="object" name="action_discard" invisible="not active" />
+                    <button icon="check" string="Validate" type="object" name="action_validate" />
+                    <button icon="close" string="Discard" type="object" name="action_discard" invisible="not active" />
                 </list>
             </field>
         </record>
@@ -24,7 +24,7 @@
                 <search string="Records">
                     <filter name="active" string="Discarded" domain="[('active', '=', False)]" />
                     <searchpanel>
-                        <field name="recycle_model_id" icon="fa-bars" string="Recycle Rules" />
+                        <field name="recycle_model_id" icon="menu" string="Recycle Rules" />
                     </searchpanel>
                 </search>
             </field>
diff --git a/addons/delivery/static/src/js/location_selector/location/location.xml b/addons/delivery/static/src/js/location_selector/location/location.xml
index fd8b6060e33b22..11cafb93c10c47 100644
--- a/addons/delivery/static/src/js/location_selector/location/location.xml
+++ b/addons/delivery/static/src/js/location_selector/location/location.xml
@@ -28,7 +28,7 @@
                     <small class="opacity-75" t-out="this.getCityAndZipCode()"/>
                 </span>
                 <small name="location_opening_hours" t-attf-class="d-flex align-items-center mb-1 mb-md-0 gap-1 fw-bold {{Object.keys(this.props.openingHours).length > 0 ? 'd-md-none' : 'd-none'}}">
-                    <i class="fa fa-clock-o" role="img"/>
+                    <i class="oi" data-icon="schedule" role="img"/>
                     <t t-out="this.openingHoursLabel"/>
                     <i class="o_location_selector_hours_caret fa fa-caret-up ms-auto transition-base"/>
                 </small>
diff --git a/addons/delivery/static/src/js/location_selector/location_selector_dialog/location_selector_dialog.xml b/addons/delivery/static/src/js/location_selector/location_selector_dialog/location_selector_dialog.xml
index 28ea82ea3a0315..c221be39503b49 100644
--- a/addons/delivery/static/src/js/location_selector/location_selector_dialog/location_selector_dialog.xml
+++ b/addons/delivery/static/src/js/location_selector/location_selector_dialog/location_selector_dialog.xml
@@ -121,7 +121,7 @@
                 title="Search"
                 class="btn btn-light"
             >
-                <i class="oi oi-search"/>
+                <i class="oi" data-icon="search"/>
             </button>
         </div>
     </t>
diff --git a/addons/delivery/static/src/js/location_selector/map_container/map_container.xml b/addons/delivery/static/src/js/location_selector/map_container/map_container.xml
index 65dbc458ecb500..c6080a53a86568 100644
--- a/addons/delivery/static/src/js/location_selector/map_container/map_container.xml
+++ b/addons/delivery/static/src/js/location_selector/map_container/map_container.xml
@@ -70,9 +70,9 @@
                         </small>
                     </span>
                     <span t-attf-class="d-flex align-items-center gap-1 small fw-bold {{Object.keys(this.selectedLocation.opening_hours).length > 0 ? 'd-md-none' : 'd-none'}}">
-                        <i class="fa fa-clock-o" role="img"/>
+                        <i class="oi" data-icon="schedule" role="img"/>
                         <t t-out="this.openingHoursLabel"/>
-                        <i class="o_location_selector_hours_caret fa fa-caret-up ms-auto transition-base"/>
+                        <i class="o_location_selector_hours_caret oi ms-auto transition-base" data-icon="arrow_drop_up"/>
                     </span>
 
                     <!-- Schedule -->
diff --git a/addons/delivery/views/delivery_carrier_views.xml b/addons/delivery/views/delivery_carrier_views.xml
index 1d7b9260aa8b19..b4c0afd5915211 100644
--- a/addons/delivery/views/delivery_carrier_views.xml
+++ b/addons/delivery/views/delivery_carrier_views.xml
@@ -45,7 +45,7 @@
                         <button name="toggle_prod_environment"
                                 invisible="not prod_environment or delivery_type == 'fixed' or delivery_type == 'base_on_rule'"
                                 class="oe_stat_button"
-                                type="object" icon="fa-play">
+                                type="object" icon="play_arrow">
                             <div class="o_stat_info o_field_widget">
                                 <span class="text-success">Production</span>
                                 <span class="o_stat_text">Environment</span>
@@ -55,7 +55,7 @@
                         <button name="toggle_prod_environment"
                                 invisible="prod_environment or delivery_type == 'fixed' or delivery_type == 'base_on_rule'"
                                 class="oe_stat_button"
-                                type="object" icon="fa-stop">
+                                type="object" icon="stop">
                             <div class="o_stat_info o_field_widget">
                                 <span class="o_stat_text o_warning_text fw-bold">Test</span>
                                 <span class="o_stat_text">Environment</span>
@@ -64,7 +64,7 @@
                         <button name="toggle_debug"
                                 invisible="delivery_type == 'fixed' or delivery_type == 'base_on_rule' or debug_logging"
                                 class="oe_stat_button"
-                                type="object" icon="fa-code">
+                                type="object" icon="code">
                             <div class="o_stat_info o_field_widget">
                                 <span class="o_stat_text text-danger">No debug</span>
                             </div>
@@ -72,7 +72,7 @@
                         <button name="toggle_debug"
                                 invisible="delivery_type == 'fixed' or delivery_type == 'base_on_rule' or not debug_logging"
                                 class="oe_stat_button"
-                                type="object" icon="fa-code">
+                                type="object" icon="code">
                             <div class="o_stat_info o_field_widget">
                                 <span class="text-success">Debug requests</span>
                             </div>
diff --git a/addons/delivery/wizard/choose_delivery_carrier_views.xml b/addons/delivery/wizard/choose_delivery_carrier_views.xml
index b07766ce8f6ab2..ecf0f9af94f8ba 100644
--- a/addons/delivery/wizard/choose_delivery_carrier_views.xml
+++ b/addons/delivery/wizard/choose_delivery_carrier_views.xml
@@ -21,7 +21,7 @@
                         <div class="o_row">
                             <field name='display_price' widget="monetary" options="{'currency_field': 'currency_id'}" invisible="not carrier_id"/>
                             <button name="update_price" type="object" invisible="delivery_type in ('fixed', 'base_on_rule')">
-                                <i class="oi oi-arrow-right me-1"/>Get rate
+                                <i class="oi me-1" data-icon="east"/>Get rate
                             </button>
                         </div>
                     </group>
diff --git a/addons/delivery/wizard/res_config_settings_views.xml b/addons/delivery/wizard/res_config_settings_views.xml
index 2f598c53dbcbe5..b897a914b0ea56 100644
--- a/addons/delivery/wizard/res_config_settings_views.xml
+++ b/addons/delivery/wizard/res_config_settings_views.xml
@@ -20,7 +20,7 @@
                             type="object"
                             name="action_install_more_provider"
                             class="btn btn-link"
-                            icon="oi-arrow-right"
+                            icon="east"
                         />
                     </div>
                  </div>
diff --git a/addons/digest/views/digest_views.xml b/addons/digest/views/digest_views.xml
index e0ce7cc1c7b0be..9595e094babbff 100644
--- a/addons/digest/views/digest_views.xml
+++ b/addons/digest/views/digest_views.xml
@@ -58,7 +58,7 @@
                                 <group name="custom" string="Custom" groups="base.group_system">
                                     <div colspan="2">
                                         <p>Want to add your own KPIs?<br />
-                                        <widget name="documentation_link" path="/applications/general/digest_emails.html#custom-digest-emails" icon="oi oi-arrow-right" label=" Check our Documentation"/></p>
+                                        <widget name="documentation_link" path="/applications/general/digest_emails.html#custom-digest-emails" icon="east" label=" Check our Documentation"/></p>
                                     </div>
                                 </group>
                             </group>
diff --git a/addons/digest/views/res_config_settings_views.xml b/addons/digest/views/res_config_settings_views.xml
index e1faf23f140842..65d7d43c0bb46f 100644
--- a/addons/digest/views/res_config_settings_views.xml
+++ b/addons/digest/views/res_config_settings_views.xml
@@ -14,7 +14,7 @@
                             <field name="digest_id" class="oe_inline flex-grow-1"/>
                         </div>
                         <div class="mt8">
-                            <button type="action" name="%(digest.digest_digest_action)d" string="Configure Digest Emails" icon="oi-arrow-right" class="btn-link"/>
+                            <button type="action" name="%(digest.digest_digest_action)d" string="Configure Digest Emails" icon="east" class="btn-link"/>
                         </div>
                     </div>
                 </setting>
diff --git a/addons/event/report/event_event_templates.xml b/addons/event/report/event_event_templates.xml
index 2a203f2a956714..20aac135fdd649 100644
--- a/addons/event/report/event_event_templates.xml
+++ b/addons/event/report/event_event_templates.xml
@@ -151,7 +151,7 @@
             <div class="o_event_full_page_ticket_wrapper">
                 <div t-if="responsive_html" class="d-flex justify-content-center">
                     <a class="btn o_event_download_ticket_btn mb-2" title="Download Tickets" t-attf-href="/event/{{ event.id }}/my_tickets?registration_ids={{ attendee.ids }}&amp;tickets_hash={{ event._get_tickets_access_hash(attendee.ids) }}">
-                        Download Tickets <i class="ms-1 fa fa-download"/>
+                        Download Tickets <i class="oi ms-1" data-icon="download"/>
                     </a>
                 </div>
                 <div class="o_event_full_page_ticket_details">
@@ -178,7 +178,7 @@
                             <div t-attf-class="row gy-0 gx-2 #{'o_event_full_page_left_details_bottom_qr_only' if not event.use_barcode else ''}">
                                 <div t-if="event.address_id" class="col-md-6 col-12 mb-3 mb-md-0 o_event_full_page_ticket_column">
                                     <div class="d-flex">
-                                        <i class="fa fa-map-marker fa-2x fa-fw me-2 mt-1"/>
+                                        <i class="oi oi-2x oi-fw me-2 mt-1" data-icon="location_on"/>
                                         <div>
                                             <t t-call="event.event_report_template_formatted_event_address" multi_line_address="True"/>
                                         </div>
@@ -186,7 +186,7 @@
                                 </div>
                                 <div class="col-md-6 col-12 mb-3 o_event_full_page_ticket_column">
                                     <div class="d-flex">
-                                        <i class="fa fa-calendar fa-2x fa-fw me-2 mt-1"/>
+                                        <i class="oi oi-2x oi-fw oi-filled me-2 mt-1" data-icon="calendar_today"/>
                                         <div t-if="attendee">
                                             <span t-field="attendee.event_begin_date" class="text-nowrap"
                                                 t-options='{"widget": "datetime", "tz_name": event.date_tz, "format": "short"}'/><br/>
@@ -248,11 +248,11 @@
         <div class="o_event_full_page_ticket_powered_by bg-odoo text-white text-center p-2 w-100">
             <span t-if="event.organizer_id">
                 <span class="fw-bold" t-field="event.organizer_id.name">Marc Demo</span>
-                <span t-if="event.organizer_id.phone" class="ps-3 fa fa-phone"/>
+                <span t-if="event.organizer_id.phone" class="ps-3 oi oi-filled" data-icon="phone"/>
                 <span t-if="event.organizer_id.phone" t-field="event.organizer_id.phone">+123456789</span>
-                <span t-if="event.organizer_id.email_normalized" class="ps-3 fa fa-envelope"/>
+                <span t-if="event.organizer_id.email_normalized" class="ps-3 oi oi-filled" data-icon="mail"/>
                 <span t-if="event.organizer_id.email_normalized" t-field="event.organizer_id.email_normalized">organizer@email.com</span>
-                <span t-if="event.organizer_id.website" class="ps-3 fa fa-globe"/>
+                <span t-if="event.organizer_id.website" class="ps-3 oi" data-icon="public"/>
                 <span t-if="event.organizer_id.website" t-field="event.organizer_id.website">https://www.example.com</span>
             </span>
             <t t-else="">
@@ -313,7 +313,7 @@
                     <span itemprop="startDateTime" t-field="attendee.event_begin_date"
                         class="fw-bold"
                         t-options='{"widget": "datetime", "time_only": True, "tz_name": event.date_tz, "hide_seconds": True}'/>
-                    <span class="fa fa-arrow-right o_event_badge_font_faded"/>
+                    <span class="oi o_event_badge_font_faded" data-icon="arrow_forward"/>
                     <span itemprop="endDate" t-field="attendee.event_end_date"
                         t-options='{"widget": "datetime", "date_only": True, "tz_name": event.date_tz}'
                         class="fw-bold"/>
@@ -328,7 +328,7 @@
                     <span itemprop="startDateTime" t-field="event.date_begin"
                         class="fw-bold"
                         t-options='{"widget": "datetime", "time_only": True, "tz_name": event.date_tz, "hide_seconds": True}'/>
-                    <span class="fa fa-arrow-right o_event_badge_font_faded"/>
+                    <span class="oi o_event_badge_font_faded" data-icon="arrow_forward"/>
                     <span t-if="not event.is_one_day"
                         itemprop="endDate" t-field="event.date_end"
                         t-options='{"widget": "datetime", "date_only": True, "tz_name": event.date_tz}'
@@ -375,9 +375,9 @@
 
 <template id="event_report_template_formatted_event_address">
     <!-- Small utility template to display "Venue" as:
-    fa-map-marker PartnerName
+    location_on PartnerName
     RestOfAddress -->
-    <span t-if="use_map_marker" class="fa fa-map-marker"/>
+    <span t-if="use_map_marker" class="oi" data-icon="location_on"/>
     <t t-if="event.address_id.contact_address.strip()">
         <t t-set="address_bits" t-value="event.address_id.contact_address.split('\n')"/>
         <span t-if="address_bits" t-out="address_bits[0]">Rue de la Paix 123</span>
diff --git a/addons/event/report/event_registration_report.xml b/addons/event/report/event_registration_report.xml
index 4808d08cda4025..9715844ae35391 100644
--- a/addons/event/report/event_registration_report.xml
+++ b/addons/event/report/event_registration_report.xml
@@ -22,7 +22,7 @@
             <div class="col-5">
                 <span t-out="event.date_begin"
                     t-options='{"widget": "datetime", "show_seconds": False, "tz_name": event.date_tz, "format": "medium"}'/>
-                <i class="fa fa-arrow-right"/>
+                <i class="oi" data-icon="arrow_forward"/>
                 <span t-out="event.date_end"
                     t-options='{"widget": "datetime", "show_seconds": False, "tz_name": event.date_tz, "format": "medium"}'/>
             </div>
diff --git a/addons/event/static/src/client_action/event_barcode.xml b/addons/event/static/src/client_action/event_barcode.xml
index b7f7c5f41c9e0f..be8ce434aa488c 100644
--- a/addons/event/static/src/client_action/event_barcode.xml
+++ b/addons/event/static/src/client_action/event_barcode.xml
@@ -6,7 +6,7 @@
         <div class="o_event_barcode_bg o_home_menu_background">
             <div class="o_event_barcode_main container d-flex flex-column h-100 h-sm-auto bg-view shadow">
                 <div class="d-flex align-items-center justify-content-between my-3">
-                    <a t-if="!this.isDisplayStandalone" href="#" class="o_event_previous_menu float-start"><i class="oi oi-chevron-left fa-lg" t-on-click.prevent="() => this.onClickBackToEvents()"></i></a>
+                    <a t-if="!this.isDisplayStandalone" href="#" class="o_event_previous_menu float-start"><i class="oi oi-lg" data-icon="chevron_backward" t-on-click.prevent="() => this.onClickBackToEvents()"></i></a>
                     <span class="fs-2 me-auto ms-2" t-out="this.data.name"/>
                     <a t-if="!this.isDisplayStandalone" class="btn btn-secondary d-flex align-items-center justify-content-center fw-bolder" href="/scoped_app?app_id=event&amp;path=scoped_app/registration-desk" target="_blank">Install</a>
                 </div>
diff --git a/addons/event/static/src/client_action/event_registration_summary_dialog.xml b/addons/event/static/src/client_action/event_registration_summary_dialog.xml
index 5e187fe106bfc9..369e0b2eda2c4a 100644
--- a/addons/event/static/src/client_action/event_registration_summary_dialog.xml
+++ b/addons/event/static/src/client_action/event_registration_summary_dialog.xml
@@ -7,14 +7,14 @@
             <div class="row">
                 <div class="col-lg-10 w-100 fs-2">
                     <div t-if="['confirmed_registration', 'unconfirmed_registration'].includes(this.registrationStatus.value)" class="alert alert-success d-flex justify-content-center" role="alert">
-                        <i class="fa fa-check-circle align-self-center me-2 ms-0 ms-sm-5"/>
+                        <i class="oi oi-filled align-self-center me-2 ms-0 ms-sm-5" data-icon="check_circle"/>
                         <span>Successfully registered!</span>
                         <button type="button" class="btn btn-link ms-3 ms-sm-5" t-on-click="this.undoRegistration">
                             Undo
                         </button>
                     </div>
                     <div t-else="" class="alert alert-warning d-flex justify-content-center" role="alert">
-                        <i class="fa fa-exclamation-circle me-2 align-self-center ms-0 ms-sm-5"/>
+                        <i class="oi me-2 align-self-center ms-0 ms-sm-5" data-icon="error"/>
                         <t t-if="this.registrationStatus.value === 'need_manual_confirmation'">
                             <span>This ticket is for another event!<br/>
                             Confirm attendance?</span>
diff --git a/addons/event/static/src/event_state_selection_field/event_state_selection_field.js b/addons/event/static/src/event_state_selection_field/event_state_selection_field.js
index 68e1de0c9d0b79..6dac041b3fecda 100644
--- a/addons/event/static/src/event_state_selection_field/event_state_selection_field.js
+++ b/addons/event/static/src/event_state_selection_field/event_state_selection_field.js
@@ -15,10 +15,16 @@ export class EventStateSelection extends StateSelectionField {
     setup() {
         this.dialog = useService("dialog");
         this.icons = {
+            normal: "",
+            done: "",
+            blocked: "error",
+            cancel: "cancel",
+        };
+        this.classIcons = {
             normal: "o_status",
             done: "o_status o_status_green",
-            blocked: "fa fa-lg fa-exclamation-circle",
-            cancel: "fa fa-lg fa-times-circle",
+            blocked: "oi-lg",
+            cancel: "oi-lg",
         };
         this.colorIcons = {
             normal: "",
@@ -40,6 +46,10 @@ export class EventStateSelection extends StateSelectionField {
         return this.icons[value] || "";
     }
 
+    stateIconClass(value) {
+        return this.classIcons[value] || "";
+    }
+
     /**
      * @override
      */
diff --git a/addons/event/static/src/event_state_selection_field/event_state_selection_field.scss b/addons/event/static/src/event_state_selection_field/event_state_selection_field.scss
index 2336cc93547be1..852e4325508c75 100644
--- a/addons/event/static/src/event_state_selection_field/event_state_selection_field.scss
+++ b/addons/event/static/src/event_state_selection_field/event_state_selection_field.scss
@@ -6,7 +6,7 @@
         margin-top: -0.5px;
     }
 
-    .fa-lg {
+    .oi-lg {
         font-size: 1.75em;
         margin-top: -2.5px;
         max-width: 20px;
@@ -19,7 +19,7 @@
 }
 
 .event_state_selection_menu {
-    .fa {
+    .oi {
         margin-top: -1.5px;
         font-size: 1.315em;
         vertical-align: -6%;
diff --git a/addons/event/static/src/event_state_selection_field/event_state_selection_field.xml b/addons/event/static/src/event_state_selection_field/event_state_selection_field.xml
index 449f8da17fc60f..a64d0bb5cfaa41 100644
--- a/addons/event/static/src/event_state_selection_field/event_state_selection_field.xml
+++ b/addons/event/static/src/event_state_selection_field/event_state_selection_field.xml
@@ -2,7 +2,7 @@
     <t t-name="event.EventStateSelection" t-inherit="web.StateSelectionField" t-inherit-mode="primary">
         <xpath expr="//Dropdown/button/div" position="replace">
             <div class="d-flex align-items-center">
-                <i t-attf-class="{{ this.stateIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }} "/>
+                <i t-attf-class="oi {{ this.stateIconClass(currentValue) }} {{ this.statusColor(currentValue) }} " t-att-data-icon="this.stateIcon(currentValue)"/>
             </div>
         </xpath>
         <!-- Dropdown Selection-->
@@ -10,7 +10,8 @@
             <attribute name="menuClass" separator=" + " add="' event_state_selection_menu'"></attribute>
         </xpath>
         <xpath expr="//CheckboxItem/span[1]" position="attributes">
-            <attribute name="t-attf-class" separator=" " add="{{ this.stateIcon(option[0]) }}" remove="o_status"></attribute>
+            <attribute name="t-attf-class" separator=" " add="oi {{ this.stateIconClass(option[0]) }}" remove="o_status"></attribute>
+            <attribute name="t-att-data-icon">this.stateIcon(option[0])</attribute>
         </xpath>
         <xpath expr="//CheckboxItem/span[2]" position="attributes">
             <attribute name="t-attf-class">{{ this.statusColor(option[0]) }}</attribute>
diff --git a/addons/event/static/src/icon_selection_field/icon_selection_field.js b/addons/event/static/src/icon_selection_field/icon_selection_field.js
index e38ad45be28714..de4f0d3ba06aec 100644
--- a/addons/event/static/src/icon_selection_field/icon_selection_field.js
+++ b/addons/event/static/src/icon_selection_field/icon_selection_field.js
@@ -11,7 +11,10 @@ export class IconSelectionField extends Component {
     };
 
     get icon() {
-        return this.props.icons[this.props.record.data[this.props.name]];
+        return this.props.icons[this.props.record.data[this.props.name]][0];
+    }
+    get iconClass() {
+        return this.props.icons[this.props.record.data[this.props.name]][1];
     }
     get title() {
         return (
diff --git a/addons/event/static/src/icon_selection_field/icon_selection_field.xml b/addons/event/static/src/icon_selection_field/icon_selection_field.xml
index 59b499b4c58566..eaa5aa2235b1a2 100644
--- a/addons/event/static/src/icon_selection_field/icon_selection_field.xml
+++ b/addons/event/static/src/icon_selection_field/icon_selection_field.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="event.IconSelectionField">
-        <i t-att-class="this.icon" t-att-data-tooltip="this.title"/>
+        <i t-att-class="'oi ' + (this.iconClass)" t-att-data-icon="this.icon" t-att-data-tooltip="this.title"/>
     </t>
 
 </templates>
diff --git a/addons/event/static/src/scss/event_full_page_ticket_report.scss b/addons/event/static/src/scss/event_full_page_ticket_report.scss
index 61ad74109d68a2..ec9c0e3b39360e 100644
--- a/addons/event/static/src/scss/event_full_page_ticket_report.scss
+++ b/addons/event/static/src/scss/event_full_page_ticket_report.scss
@@ -58,7 +58,7 @@
         width: 50%;
         // Prevent text overfow on the next column. While columns have the expected
         // width, the text will overflow in address and date, most probably due to
-        // the fa-icons. This prevents this overflow and makes sure we see the full
+        // the oi icons. This prevents this overflow and makes sure we see the full
         // content of address and date.
         padding-right: 45px;
     }
diff --git a/addons/event/static/src/template_reference_field/field_event_mail_template_reference.xml b/addons/event/static/src/template_reference_field/field_event_mail_template_reference.xml
index 4a8bc06db29e6b..46afdd93c7cd63 100644
--- a/addons/event/static/src/template_reference_field/field_event_mail_template_reference.xml
+++ b/addons/event/static/src/template_reference_field/field_event_mail_template_reference.xml
@@ -5,7 +5,7 @@
         <xpath expr="//t[@t-if='!this.props.readonly and !this.hideModelSelector']" position="after">
             <t t-elif="this.getValue()">
                 <div class="o_mail_template_reference_field_icon d-flex justify-content-center flex-grow-0 flex-shrink-0">
-                    <span class="event_template_reference_mail fa fa-envelope" t-if="relation === 'mail.template'"/>
+                    <span class="event_template_reference_mail oi oi-filled" data-icon="mail" t-if="relation === 'mail.template'"/>
                 </div>
             </t>
         </xpath>
diff --git a/addons/event/views/event_event_views.xml b/addons/event/views/event_event_views.xml
index 5bc6b5e2eec27b..695b59a4ac71fa 100644
--- a/addons/event/views/event_event_views.xml
+++ b/addons/event/views/event_event_views.xml
@@ -25,7 +25,7 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box" groups="base.group_user">
                         <button name="%(event.event_registration_action_stats_from_event)d"
-                                type="action" class="oe_stat_button" icon="fa-line-chart">
+                                type="action" class="oe_stat_button" icon="show_chart">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">
                                     Registration
@@ -36,14 +36,15 @@
                                 type="action"
                                 context="{'search_default_expected': True}"
                                 class="oe_stat_button"
-                                icon="fa-users"
+                                icon="group"
+                                icon_class="oi-filled"
                                 help="Total Registrations for this Event">
                             <field name="seats_taken" widget="statinfo" string="Attendees"/>
                         </button>
                         <button name="action_open_slot_calendar"
                                 type="object"
                                 class="oe_stat_button"
-                                icon="fa-calendar"
+                                icon="calendar_today"
                                 invisible="not is_multi_slots">
                             <field name="event_slot_count" widget="statinfo" string="Slots"/>
                         </button>
@@ -113,11 +114,11 @@
                                     <field name="mail_count_done"/>
                                     <field name="mail_state" widget="event_icon_selection" string=" " nolabel="1"
                                         options="{
-                                            'error': 'fa fa-exclamation-triangle',
-                                            'sent': 'fa fa-check',
-                                            'scheduled': 'fa fa-hourglass-half',
-                                            'running': 'fa fa-cogs',
-                                            'cancelled': 'fa fa-times-circle'
+                                            'error': ['warning', ''],
+                                            'sent': ['check', ''],
+                                            'scheduled': ['hourglass_bottom', ''],
+                                            'running': ['settings_applications', ''],
+                                            'cancelled': ['cancel', 'oi-filled'],
                                         }"/>
                                 </list>
                             </field>
@@ -137,7 +138,7 @@
                                     <button name="action_view_question_answers"
                                         type="object"
                                         class="p-0"
-                                        icon="fa-bar-chart pe-1"
+                                        icon="bar_chart"
                                         string="Stats"
                                         title="Answer Breakdown"
                                         context="{'search_default_event_id': parent.id}"
@@ -252,7 +253,7 @@
                             </div>
                             <div><t t-out="luxon.DateTime.fromISO(record.date_begin.raw_value).toFormat('t')"/></div>
                                 <div t-if="record.date_begin.raw_value !== record.date_end.raw_value">
-                                    <i class="oi oi-arrow-right me-2" title="End date"/>
+                                    <i class="oi me-2" data-icon="east" title="End date"/>
                                     <t t-out="luxon.DateTime.fromISO(record.date_end.raw_value).toFormat('d MMM')"/>
                                 </div>
                         </aside>
@@ -262,12 +263,12 @@
                                     <field name="name"/>
                                 </div>
                                 <div class="d-flex ps-1">
-                                    <i class="fa fa-map-marker mt-1 me-2 text-center ps-1" title="Location"/>
+                                    <i class="oi mt-1 me-2 text-center ps-1" data-icon="location_on" title="Location"/>
                                     <field t-if="record.address_id.value" name="address_id" class="ms-1"/>
                                     <span t-else="" class="ms-1">Online Event</span>
                                 </div>
                                 <div t-if="record.seats_taken.raw_value" class="d-flex ps-1">
-                                    <i class="fa fa-group mt-1 me-2 text-center" title="Attendees"/>
+                                    <i class="oi oi-filled mt-1 me-2 text-center" data-icon="group" title="Attendees"/>
                                     <field name="seats_taken" class="me-1"/> Attendees
                                 </div>
                             </div>
diff --git a/addons/event/views/event_mail_views.xml b/addons/event/views/event_mail_views.xml
index e84b1f5f76a760..c10e8cbd1b7fd7 100644
--- a/addons/event/views/event_mail_views.xml
+++ b/addons/event/views/event_mail_views.xml
@@ -50,7 +50,7 @@
                 <field name="scheduled_date"/>
                 <field name="mail_count_done"/>
                 <field name="mail_state" widget="event_icon_selection" string=" " nolabel="1"
-                    options="{'sent': 'fa fa-check', 'scheduled': 'fa fa-hourglass-half', 'running': 'fa fa-cogs', 'cancelled': 'fa fa-times-circle'}"/>
+                    options="{'sent': ['check', ''], 'scheduled': ['hourglass_bottom', ''], 'running': ['settings_applications', ''], 'cancelled': ['cancel', 'oi-filled']}"/>
             </list>
         </field>
     </record>
diff --git a/addons/event/views/event_question_views.xml b/addons/event/views/event_question_views.xml
index 9d8db058a0e14d..8ebd22afbd2dac 100644
--- a/addons/event/views/event_question_views.xml
+++ b/addons/event/views/event_question_views.xml
@@ -44,7 +44,7 @@
                         <button name="action_view_question_answers"
                                 type="object"
                                 class="oe_stat_button"
-                                icon="fa-line-chart"
+                                icon="show_chart"
                                 invisible="question_type not in ['simple_choice', 'text_box']">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">
@@ -108,7 +108,7 @@
                 <button name="action_view_question_answers"
                         type="object"
                         class="p-0"
-                        icon="fa-bar-chart pe-1"
+                        icon="bar_chart"
                         string="Stats"
                         title="Answer Breakdown"
                         invisible="question_type not in ['simple_choice', 'text_box']"/>
diff --git a/addons/event/views/event_registration_views.xml b/addons/event/views/event_registration_views.xml
index 1488e75b01959a..1a5883eb22ebd2 100644
--- a/addons/event/views/event_registration_views.xml
+++ b/addons/event/views/event_registration_views.xml
@@ -26,12 +26,12 @@
                        decoration-muted="state == 'cancel'" widget="badge"/>
                 <field name="company_id" groups="base.group_multi_company" optional="hide" readonly="state != 'draft'"/>
                 <field name="message_needaction" column_invisible="True"/>
-                <button name="action_confirm" string="Registered" type="object" icon="fa-check"
+                <button name="action_confirm" string="Registered" type="object" icon="check"
                         invisible="not active or state != 'draft'"/>
-                <button name="action_set_done" string="Mark as Attending" type="object" icon="fa-level-down"
+                <button name="action_set_done" string="Mark as Attending" type="object" icon="subdirectory_arrow_right"
                         invisible="not active or state != 'open'"/>
                 <button name="action_cancel" string="Cancel" type="object"
-                        class="o_btn_cancel_registration" icon="fa-times"
+                        class="o_btn_cancel_registration" icon="close"
                         invisible="not active or (state != 'open' and state != 'draft')"/>
                 <field name="activity_exception_decoration" widget="activity_exception"/>
             </list>
@@ -143,16 +143,16 @@
                                 <field class="text-truncate text-primary" name="event_id" invisible="context.get('default_event_id')"/>
                             </div>
                             <span class="text-truncate" invisible="not company_name">
-                                <i class="fa fa-building" title="Attendee Company"/> <field name="company_name"/>
+                                <i class="oi oi-filled" data-icon="business" title="Attendee Company"/> <field name="company_name"/>
                             </span>
                             <div id="event_ticket_id">
                                 <field name="registration_properties"/>
                                 <div t-if="record.event_slot_id.raw_value">
-                                    <i class="fa fa-calendar" title="Slot"/>
+                                    <i class="oi oi-filled" data-icon="calendar_today" title="Slot"/>
                                     <field name="event_slot_id" class="fw-bold text-truncate ms-1"/>
                                 </div>
                                 <div t-if="record.event_ticket_id.raw_value">
-                                    <i class="fa fa-ticket" title="Ticket type"/>
+                                    <i class="oi" data-icon="confirmation_number" title="Ticket type"/>
                                     <field name="event_ticket_id" class="fw-bold text-truncate ms-1"/>
                                 </div>
                             </div>
diff --git a/addons/event/views/event_slot_views.xml b/addons/event/views/event_slot_views.xml
index 31968776e1145f..8ab5b966221c07 100644
--- a/addons/event/views/event_slot_views.xml
+++ b/addons/event/views/event_slot_views.xml
@@ -12,7 +12,7 @@
                         <label for="start_hour" string="Hour range"/>
                         <div>
                             <field name="start_hour" class="oe_inline o_input_5ch" widget="float_time"/>
-                            <i class="fa fa-arrow-right mx-2" title="to"/>
+                            <i class="oi mx-2" data-icon="arrow_forward" title="to"/>
                             <field name="end_hour" class="oe_inline o_input_5ch" widget="float_time"/>
                         </div>
                         <field name="date"/>
@@ -49,7 +49,7 @@
                 <field name="date"/>
                 <field name="start_hour" string="From" widget="float_time"/>
                 <button name="durationArrow" width="20px" title="Until"
-                    class="fa fa-long-arrow-right text-center text-secondary pe-none"/>
+                    class="oi text-center text-secondary pe-none" icon="east"/>
                 <field name="end_hour" string="To" widget="float_time"/>
                 <field name="color" widget="color_picker"/>
             </list>
diff --git a/addons/event/views/res_partner_views.xml b/addons/event/views/res_partner_views.xml
index 5add7fce94747f..faf4b762cb42d7 100644
--- a/addons/event/views/res_partner_views.xml
+++ b/addons/event/views/res_partner_views.xml
@@ -11,7 +11,7 @@
                     <button class="oe_stat_button"
                         groups="event.group_event_user"
                         type="object"
-                        icon="fa-ticket"
+                        icon="confirmation_number"
                         name="action_event_view" invisible="event_count == 0">
                         <field string="Events" name="event_count" widget="statinfo"/>
                     </button>
diff --git a/addons/event_booth/views/event_event_views.xml b/addons/event_booth/views/event_event_views.xml
index de0d0be669ff1e..27663ccb1cfca0 100644
--- a/addons/event_booth/views/event_event_views.xml
+++ b/addons/event_booth/views/event_event_views.xml
@@ -9,7 +9,7 @@
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
                 <button class="oe_stat_button" name="%(event_booth_action_from_event)d"
-                        type="action" icon="fa-university">
+                        type="action" icon="account_balance">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value">
                             <span invisible="event_booth_count == 0">
diff --git a/addons/event_booth_sale/views/event_booth_views.xml b/addons/event_booth_sale/views/event_booth_views.xml
index e89e0c4839bd70..03cfb155e0f936 100644
--- a/addons/event_booth_sale/views/event_booth_views.xml
+++ b/addons/event_booth_sale/views/event_booth_views.xml
@@ -9,7 +9,7 @@
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
                 <button name="action_view_sale_order" type="object" class="oe_stat_button"
-                        icon="fa-usd" groups="sales_team.group_sale_salesman"
+                        icon="attach_money" groups="sales_team.group_sale_salesman"
                         invisible="not sale_order_id">
                         <div class="o_stat_info">
                             <span class="o_stat_text">Sale Order</span>
diff --git a/addons/event_booth_sale/views/sale_order_views.xml b/addons/event_booth_sale/views/sale_order_views.xml
index 30392facea5f55..2e134d10426ee3 100644
--- a/addons/event_booth_sale/views/sale_order_views.xml
+++ b/addons/event_booth_sale/views/sale_order_views.xml
@@ -11,7 +11,7 @@
                     name="action_view_booth_list"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-university"
+                    icon="account_balance"
                     invisible="event_booth_count == 0"
                 >
                     <field name="event_booth_count" widget="statinfo" string="Booths"/>
diff --git a/addons/event_crm/views/crm_lead_views.xml b/addons/event_crm/views/crm_lead_views.xml
index a3962ac1b01948..2d620f106e2c45 100644
--- a/addons/event_crm/views/crm_lead_views.xml
+++ b/addons/event_crm/views/crm_lead_views.xml
@@ -20,7 +20,7 @@
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_schedule_meeting']" position="after">
                 <field name="registration_ids" invisible="1"/>
-                <button name="%(event_registration_action_from_lead)d" type="action" class="oe_stat_button" icon="fa-ticket"
+                <button name="%(event_registration_action_from_lead)d" type="action" class="oe_stat_button" icon="confirmation_number"
                     invisible="registration_count == 0" groups="event.group_event_user">
                     <div class="o_stat_info">
                         <field name="registration_count"/>
diff --git a/addons/event_crm/views/event_event_views.xml b/addons/event_crm/views/event_event_views.xml
index 0baf89b6c926af..18c93a80b94c16 100644
--- a/addons/event_crm/views/event_event_views.xml
+++ b/addons/event_crm/views/event_event_views.xml
@@ -11,7 +11,8 @@
                         type="object"
                         groups="sales_team.group_sale_salesman"
                         class="oe_stat_button"
-                        icon="fa-star"
+                        icon="star"
+                        icon_class="oi-filled"
                         invisible="lead_count == 0">
                     <field name="lead_count" widget="statinfo" string="Leads"/>
                 </button>
diff --git a/addons/event_crm/views/event_registration_views.xml b/addons/event_crm/views/event_registration_views.xml
index c565693d9667a5..297ffd18f723d3 100644
--- a/addons/event_crm/views/event_registration_views.xml
+++ b/addons/event_crm/views/event_registration_views.xml
@@ -10,7 +10,7 @@
                         type="object"
                         groups="sales_team.group_sale_salesman"
                         class="oe_stat_button"
-                        icon="fa-star"
+                        icon="star"
                         invisible="lead_count == 0">
                     <field name="lead_count" widget="statinfo" string="Leads"/>
                 </button>
diff --git a/addons/event_sale/views/event_registration_views.xml b/addons/event_sale/views/event_registration_views.xml
index f8c45e7fd374fb..08055835ad4aa2 100644
--- a/addons/event_sale/views/event_registration_views.xml
+++ b/addons/event_sale/views/event_registration_views.xml
@@ -19,7 +19,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
                 <button name="action_view_sale_order" type="object"
-                        class="oe_stat_button" icon="fa-usd"
+                        class="oe_stat_button" icon="attach_money"
                         groups="sales_team.group_sale_salesman"
                         invisible="not sale_order_id">
                         <div class="o_stat_info">
diff --git a/addons/event_sale/views/event_views.xml b/addons/event_sale/views/event_views.xml
index d26ce9b8513294..a30ce7132004ab 100644
--- a/addons/event_sale/views/event_views.xml
+++ b/addons/event_sale/views/event_views.xml
@@ -10,7 +10,7 @@
             <xpath expr="//button[@name='%(event.act_event_registration_from_event)d']" position="after">
                 <field name="currency_id" invisible="1"/>
                 <button name="action_view_linked_orders"
-                        type="object" class="oe_stat_button" icon="fa-dollar"
+                        type="object" class="oe_stat_button" icon="attach_money"
                         groups="sales_team.group_sale_salesman"
                         help="Total sales for this event"
                         invisible="sale_price_total == 0 or not sale_price_total">
diff --git a/addons/event_sale/views/sale_order_views.xml b/addons/event_sale/views/sale_order_views.xml
index edde00249ef85c..e31ec49056b1c8 100644
--- a/addons/event_sale/views/sale_order_views.xml
+++ b/addons/event_sale/views/sale_order_views.xml
@@ -9,7 +9,8 @@
                 <button name="action_view_attendee_list"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-users"
+                        icon="group"
+                        icon_class="oi-filled"
                         invisible="attendee_count == 0">
                     <field name="attendee_count" widget="statinfo" string="Attendees"/>
                 </button>
diff --git a/addons/event_sale/wizard/event_configurator_views.xml b/addons/event_sale/wizard/event_configurator_views.xml
index f8791ab28260e8..3ad1998a3860bd 100644
--- a/addons/event_sale/wizard/event_configurator_views.xml
+++ b/addons/event_sale/wizard/event_configurator_views.xml
@@ -11,7 +11,7 @@
                     We could not find a matching event ticket for this product. <br/>
                     <a role="button" class="btn btn-link" target="_blank"
                         href="/odoo/action-event.action_event_view">
-                        <i class="fa fa-arrow-right"/> Configure Events &amp; Tickets
+                        <i class="oi" data-icon="arrow_forward"/> Configure Events &amp; Tickets
                     </a>
                 </div>
                 <group invisible="not has_available_tickets">
diff --git a/addons/event_sms/static/src/template_reference_field/field_event_mail_template_reference.xml b/addons/event_sms/static/src/template_reference_field/field_event_mail_template_reference.xml
index 755d5a961e1868..a9e11dafbc0cd8 100644
--- a/addons/event_sms/static/src/template_reference_field/field_event_mail_template_reference.xml
+++ b/addons/event_sms/static/src/template_reference_field/field_event_mail_template_reference.xml
@@ -3,7 +3,7 @@
     <t t-inherit="event.mailTemplateReferenceField" t-inherit-mode="extension">
         <xpath expr="//span[hasclass('event_template_reference_mail')]" position="after">
             <div t-if="relation === 'sms.template'" class="event_template_reference_sms">
-                <span class="fa fa-lg fa-mobile" role="icon"/>
+                <span class="oi oi-lg" data-icon="smartphone" role="icon"/>
                 <span role="text">SMS</span>
             </div>
         </xpath>
diff --git a/addons/fleet/data/mail_activity_type_data.xml b/addons/fleet/data/mail_activity_type_data.xml
index 703af534fb638d..8f60638bc8d7d2 100644
--- a/addons/fleet/data/mail_activity_type_data.xml
+++ b/addons/fleet/data/mail_activity_type_data.xml
@@ -4,7 +4,7 @@
         <record id="mail_act_fleet_contract_to_renew" model="mail.activity.type">
             <field name="name">Contract to Renew</field>
             <field name="summary">Contract to Renew</field>
-            <field name="icon">fa-car</field>
+            <field name="icon">directions_car</field>
             <field name="res_model">fleet.vehicle.log.contract</field>
         </record>
     </data>
diff --git a/addons/fleet/views/fleet_vehicle_model_views.xml b/addons/fleet/views/fleet_vehicle_model_views.xml
index 16c5828ebdfd72..5536a8b305fb47 100644
--- a/addons/fleet/views/fleet_vehicle_model_views.xml
+++ b/addons/fleet/views/fleet_vehicle_model_views.xml
@@ -8,7 +8,7 @@
                 <sheet>
                     <widget name="web_ribbon" text="Archived" bg_color="text-bg-danger" invisible="active"/>
                     <div class="oe_button_box" name="button_box">
-                        <button name="action_model_vehicle" type="object" icon="fa-car" class="oe_stat_button">
+                        <button name="action_model_vehicle" type="object" icon="directions_car" class="oe_stat_button">
                             <field
                                 name="vehicle_count"
                                 widget="statinfo"
@@ -186,7 +186,7 @@
             <form string="Model Make">
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button name="action_brand_model" type="object" icon="fa-car" class="oe_stat_button"
+                        <button name="action_brand_model" type="object" icon="directions_car" class="oe_stat_button"
                             invisible="model_count == 0">
                             <field name="model_count" widget="statinfo" string="Models"/>
                         </button>
diff --git a/addons/fleet/views/fleet_vehicle_views.xml b/addons/fleet/views/fleet_vehicle_views.xml
index 86df4a0a09f851..f5522425668bc9 100644
--- a/addons/fleet/views/fleet_vehicle_views.xml
+++ b/addons/fleet/views/fleet_vehicle_views.xml
@@ -23,13 +23,13 @@
                         <button name="open_assignation_logs"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-history">
+                            icon="history">
                             <field name="history_count" widget="statinfo" string="Drivers History"/>
                         </button>
                         <button name="return_action_to_open"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-book"
+                            icon="book"
                             context="{'xml_id':'fleet_vehicle_log_contract_action', 'search_default_inactive': not active}"
                             help="show the contract for this vehicle">
                             <field name="contract_count" widget="statinfo" string="Contracts"/>
@@ -37,7 +37,7 @@
                         <button name="return_action_to_open"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-wrench"
+                            icon="build"
                             context="{'xml_id':'fleet_vehicle_log_services_action', 'search_default_inactive': not active}"
                             invisible="service_activity != 'none'"
                             help="show the services logs for this vehicle">
@@ -46,7 +46,7 @@
                         <button name="return_action_to_open"
                             type="object"
                             class="oe_stat_button text-danger"
-                            icon="fa-wrench"
+                            icon="build"
                             context="{'xml_id':'fleet_vehicle_log_services_action', 'search_default_inactive': not active}"
                             invisible="service_activity != 'overdue'"
                             help="show the services logs for this vehicle">
@@ -55,7 +55,7 @@
                         <button name="return_action_to_open"
                             type="object"
                             class="oe_stat_button text-warning"
-                            icon="fa-wrench"
+                            icon="build"
                             context="{'xml_id':'fleet_vehicle_log_services_action', 'search_default_inactive': not active}"
                             invisible="service_activity != 'today'"
                             help="show the services logs for this vehicle">
@@ -64,7 +64,7 @@
                         <button name="return_action_to_open"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-tachometer"
+                            icon="speed"
                             context="{'xml_id':'fleet_vehicle_odometer_action'}"
                             help="show the odometer logs for this vehicle"
                             invisible="vehicle_type != 'car'">
@@ -102,7 +102,7 @@
                             <div class="o_row o_fleet_narrow_field" invisible="vehicle_type != 'car'">
                                 <field class="o_fleet_odometer_value" name="odometer"/>
                                 <field class="o_fleet_odometer_unit" name="odometer_unit"/>
-                                <button name="action_open_odometer_report" type="object" class="fa fa-line-chart me-1" title="Odometer Report"/>
+                                <button name="action_open_odometer_report" type="object" class="oi me-1" data-icon="show_chart" title="Odometer Report"/>
                             </div>
                             <field name="manager_id" widget="many2one_avatar_user"/>
                             <field name="location"/>
@@ -303,7 +303,7 @@
                             <div class="small">
                                 <t t-if="record.future_driver_id.raw_value">Future Driver : <field name="future_driver_id"/></t>
                             </div>
-                            <t t-if="record.location.raw_value"><small><i class="fa fa-map-marker" title="Location"></i> <field name="location"/></small></t>
+                            <t t-if="record.location.raw_value"><small><i class="oi" data-icon="location_on" title="Location"></i> <field name="location"/></small></t>
                             <field name="vehicle_properties" widget="properties"/>
                             <footer class="pt-0 mt-0" t-if="!selection_mode">
                                 <div class="d-flex fs-6">
@@ -312,10 +312,10 @@
                                         <field name="contract_count"/>
                                         Contract(s)
                                         <span t-if="record.contract_renewal_due_soon.raw_value and !record.contract_renewal_overdue.raw_value"
-                                            class="fa fa-exclamation-triangle text-warning" role="img" aria-label="Warning: renewal due soon" title="Warning: renewal due soon">
+                                            class="oi text-warning" data-icon="warning" role="img" aria-label="Warning: renewal due soon" title="Warning: renewal due soon">
                                         </span>
                                         <span t-if="record.contract_renewal_overdue.raw_value"
-                                            class="fa fa-exclamation-triangle text-danger" role="img" aria-label="Attention: renewal overdue" title="Attention: renewal overdue">
+                                            class="oi text-danger" data-icon="warning" role="img" aria-label="Attention: renewal overdue" title="Attention: renewal overdue">
                                         </span>
                                     </a>
                                     <field name="activity_ids" widget="kanban_activity" class="ms-2"/>
diff --git a/addons/fleet/views/res_partner_views.xml b/addons/fleet/views/res_partner_views.xml
index c8db25b2fc7a5d..af594e082c1288 100644
--- a/addons/fleet/views/res_partner_views.xml
+++ b/addons/fleet/views/res_partner_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
                 <button name="action_open_partner_cars" type="object"
-                        class="oe_stat_button" icon="fa-car" groups="fleet.fleet_group_manager"
+                        class="oe_stat_button" icon="directions_car" groups="fleet.fleet_group_manager"
                         invisible="partner_cars_count == 0">
                     <field name="partner_cars_count" widget="statinfo" string="Cars History" />
                 </button>
diff --git a/addons/fleet_maintenance/views/fleet_vehicle_views.xml b/addons/fleet_maintenance/views/fleet_vehicle_views.xml
index 0ccdb9ec17ca59..ede85ddc9275d0 100644
--- a/addons/fleet_maintenance/views/fleet_vehicle_views.xml
+++ b/addons/fleet_maintenance/views/fleet_vehicle_views.xml
@@ -12,7 +12,7 @@
                               'default_vehicle_id': id}"
                     type="action"
                     class="oe_stat_button"
-                    icon="fa-cubes">
+                    icon="inventory_2">
                     <field name="equipment_count" widget="statinfo" string="Equipment Assigned"/>
                 </button>
             </xpath>
diff --git a/addons/gamification/views/gamification_challenge_views.xml b/addons/gamification/views/gamification_challenge_views.xml
index f22152671eae56..6bfbf02dbbef35 100644
--- a/addons/gamification/views/gamification_challenge_views.xml
+++ b/addons/gamification/views/gamification_challenge_views.xml
@@ -30,13 +30,14 @@
                         <button type="object"
                                 name="action_view_users"
                                 class="oe_stat_button"
-                                icon="fa-users">
+                                icon="group"
+                                icon_class="oi-filled">
                             <field name="user_count" string="Participants" widget="statinfo"/>
                         </button>
                         <button type="action"
                                 name="%(goals_from_challenge_act)d"
                                 class="oe_stat_button"
-                                icon="fa-gift"
+                                icon="card_giftcard"
                                 invisible="state == 'draft'">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_text">Related Goals</span>
diff --git a/addons/gamification/views/gamification_goal_views.xml b/addons/gamification/views/gamification_goal_views.xml
index ef2e17bcdbe8ef..7830a21bf708f2 100644
--- a/addons/gamification/views/gamification_goal_views.xml
+++ b/addons/gamification/views/gamification_goal_views.xml
@@ -161,9 +161,9 @@
                         </div>
                         <div class="pt-3 fs-1 fw-bolder">
                             <t t-if="record.definition_display.raw_value == 'boolean'">
-                                <t t-if="record.state.raw_value=='reached'"><i role="img" class="text-success fa fa-check fa-3x" title="Goal Reached" aria-label="Goal Reached"/></t>
-                                <t t-if="record.state.raw_value=='inprogress'"><i role="img" class="text-body fa fa-clock-o fa-3x" title="Goal in Progress" aria-label="Goal in Progress"/></t>
-                                <t t-if="record.state.raw_value=='failed'"><i role="img" class="text-danger fa fa-times fa-3x" title="Goal Failed" aria-label="Goal Failed"/></t>
+                                <t t-if="record.state.raw_value=='reached'"><i role="img" class="text-success oi oi-3x" data-icon="check" title="Goal Reached" aria-label="Goal Reached"/></t>
+                                <t t-if="record.state.raw_value=='inprogress'"><i role="img" class="text-body oi oi-3x" data-icon="schedule" title="Goal in Progress" aria-label="Goal in Progress"/></t>
+                                <t t-if="record.state.raw_value=='failed'"><i role="img" class="text-danger oi oi-3x" data-icon="close" title="Goal Failed" aria-label="Goal Failed"/></t>
                             </t>
                             <t t-if="record.definition_display.raw_value == 'progress'">
                                 <t t-if="record.definition_condition.raw_value =='higher'">
diff --git a/addons/gamification/views/gamification_karma_rank_views.xml b/addons/gamification/views/gamification_karma_rank_views.xml
index dbca379b8f8852..134c96b69ed87c 100644
--- a/addons/gamification/views/gamification_karma_rank_views.xml
+++ b/addons/gamification/views/gamification_karma_rank_views.xml
@@ -50,7 +50,7 @@
                 <form string="Rank">
                     <sheet>
                         <div class="oe_button_box" name="button_box">
-                            <button type="action" class="oe_stat_button" icon="fa-users" name="%(action_current_rank_users)d">
+                            <button type="action" class="oe_stat_button" icon="group" icon_class="oi-filled" name="%(action_current_rank_users)d">
                                 <div class="o_form_field o_stat_info">
                                     <span class="o_stat_value">
                                         <field name="rank_users_count" />
diff --git a/addons/gamification/views/res_users_views.xml b/addons/gamification/views/res_users_views.xml
index 22d02287e2a4d3..981cf90681f55f 100644
--- a/addons/gamification/views/res_users_views.xml
+++ b/addons/gamification/views/res_users_views.xml
@@ -9,7 +9,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
                 <button type="object" class="oe_stat_button" groups="base.group_no_one"
-                    name="action_karma_report" icon="fa-certificate">
+                    name="action_karma_report" icon="verified">
                     <field string="Karma" name="karma" widget="statinfo"/>
                 </button>
             </xpath>
diff --git a/addons/google_address_autocomplete/views/res_config_settings_views.xml b/addons/google_address_autocomplete/views/res_config_settings_views.xml
index 1980cea0fb026d..60e7f6df71979d 100644
--- a/addons/google_address_autocomplete/views/res_config_settings_views.xml
+++ b/addons/google_address_autocomplete/views/res_config_settings_views.xml
@@ -11,12 +11,12 @@
                     <field name="google_places_api_key" placeholder="Paste your API key"/>
                     <div class="mt8">
                         <a target="_blank" href="https://console.cloud.google.com/getting-started">
-                            <i class="oi oi-arrow-right"/>
+                            <i class="oi" data-icon="east"/>
                             Create a Google Project and get a key
                         </a>
                         <br/>
                         <a target="_blank" href="https://console.cloud.google.com/billing">
-                            <i class="oi oi-arrow-right"/>
+                            <i class="oi" data-icon="east"/>
                             Enable billing on your Google Project
                         </a>
                     </div>
diff --git a/addons/google_gmail/views/fetchmail_server_views.xml b/addons/google_gmail/views/fetchmail_server_views.xml
index c7120a0e4e8da9..f82e4693264da4 100644
--- a/addons/google_gmail/views/fetchmail_server_views.xml
+++ b/addons/google_gmail/views/fetchmail_server_views.xml
@@ -17,13 +17,13 @@
                     <button type="object"
                         name="open_google_gmail_uri" class="btn-link px-0"
                         invisible="server_type != 'gmail' or google_gmail_refresh_token">
-                        <i class="oi oi-arrow-right"/>
+                        <i class="oi" data-icon="east"/>
                         Connect your Gmail account
                     </button>
                     <button type="object"
                         name="open_google_gmail_uri" class="btn-link px-0 ms-2"
                         invisible="server_type != 'gmail' or not google_gmail_refresh_token">
-                        <i class="fa fa-cog" title="Edit Settings"/>
+                        <i class="oi oi-filled" data-icon="settings" title="Edit Settings"/>
                     </button>
                 </div>
             </field>
diff --git a/addons/google_gmail/views/ir_mail_server_views.xml b/addons/google_gmail/views/ir_mail_server_views.xml
index 309f78bd80b79a..028a97350342c4 100644
--- a/addons/google_gmail/views/ir_mail_server_views.xml
+++ b/addons/google_gmail/views/ir_mail_server_views.xml
@@ -17,13 +17,13 @@
                     <button type="object"
                         name="open_google_gmail_uri" class="btn-link px-0"
                         invisible="smtp_authentication != 'gmail' or google_gmail_refresh_token">
-                        <i class="oi oi-arrow-right"/>
+                        <i class="oi" data-icon="east"/>
                         Connect your Gmail account
                     </button>
                     <button type="object"
                         name="open_google_gmail_uri" class="btn-link px-0 ms-2"
                         invisible="smtp_authentication != 'gmail' or not google_gmail_refresh_token">
-                        <i class="fa fa-cog" title="Edit Settings"/>
+                        <i class="oi oi-filled" data-icon="settings" title="Edit Settings"/>
                     </button>
                 </div>
             </field>
diff --git a/addons/google_recaptcha/views/res_config_settings_view.xml b/addons/google_recaptcha/views/res_config_settings_view.xml
index cb5edc792d822a..dfef38a6c479fd 100644
--- a/addons/google_recaptcha/views/res_config_settings_view.xml
+++ b/addons/google_recaptcha/views/res_config_settings_view.xml
@@ -27,7 +27,7 @@
                     </div>
                     <div>
                         <a href="https://www.google.com/recaptcha/admin/create" class="oe_link" target="_blank">
-                            <i class="oi oi-arrow-right"/> Generate reCAPTCHA v3 keys
+                            <i class="oi" data-icon="east"/> Generate reCAPTCHA v3 keys
                         </a>
                     </div>
                 </div>
diff --git a/addons/hr/static/src/components/employee_chat/employee_chat.xml b/addons/hr/static/src/components/employee_chat/employee_chat.xml
index a3b3922914df20..dabd86b3325700 100644
--- a/addons/hr/static/src/components/employee_chat/employee_chat.xml
+++ b/addons/hr/static/src/components/employee_chat/employee_chat.xml
@@ -3,12 +3,13 @@
     <t t-name="hr.OpenChat">
         <a t-if="this.props.record.data.user_id and this.props.record.resId"
             title="Chat"
-            icon="fa-comments"
+            icon="forum"
+            icon_class="oi-filled"
             t-on-click.prevent="() => this.store.openChat({ employeeId: this.props.record.resId })"
             href="#"
             class="ml8 o_employee_chat_btn"
             role="button">
-            <i class="fa fa-comments align-middle fs-6"/>
+            <i class="oi oi-filled align-middle fs-6" data-icon="forum"/>
         </a>
     </t>
 </templates>
diff --git a/addons/hr/static/src/components/hr_presence_status/hr_presence_status.js b/addons/hr/static/src/components/hr_presence_status/hr_presence_status.js
index 59e7808ac72ce5..8618be9830054a 100644
--- a/addons/hr/static/src/components/hr_presence_status/hr_presence_status.js
+++ b/addons/hr/static/src/components/hr_presence_status/hr_presence_status.js
@@ -11,7 +11,7 @@ export class HrPresenceStatus extends Component {
     };
 
     get classNames() {
-        return `o_employee_availability fa ${this.icon} fa-fw o_button_icon hr_presence align-middle ${this.color}`;
+        return `o_employee_availability oi ${this.iconClass} oi-fw o_button_icon hr_presence align-middle ${this.color}`;
     }
 
     get color() {
@@ -38,14 +38,20 @@ export class HrPresenceStatus extends Component {
         if (this.location) {
             switch (this.location) {
                 case "home":
-                    return "fa-home";
+                    return "home";
                 case "office":
-                    return "fa-building";
+                    return "business";
                 case "other":
-                    return "fa-map-marker";
+                    return "location_on";
             }
         }
-        return "fa-circle";
+        return "circle";
+    }
+
+    get iconClass() {
+        if (this.location === "office" || !this.location) {
+            return "oi-filled";
+        }
     }
 
     get location() {
diff --git a/addons/hr/static/src/components/hr_presence_status/hr_presence_status.xml b/addons/hr/static/src/components/hr_presence_status/hr_presence_status.xml
index 86ddfa5bf3b2c2..21eb8bc97813a0 100644
--- a/addons/hr/static/src/components/hr_presence_status/hr_presence_status.xml
+++ b/addons/hr/static/src/components/hr_presence_status/hr_presence_status.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="hr.HrPresenceStatus">
-        <span t-if="isActive" role="img" t-att-class="this.classNames" t-att-aria-label="this.label" t-att-title="this.label"/>
+        <span t-if="isActive" role="img" t-att-class="this.classNames" t-att-data-icon="this.icon" t-att-aria-label="this.label" t-att-title="this.label"/>
     </t>
 
 </templates>
diff --git a/addons/hr/static/src/components/versions_timeline/versions_timeline.xml b/addons/hr/static/src/components/versions_timeline/versions_timeline.xml
index 1ed2a6b4ca7b30..ce815afcf24d0c 100644
--- a/addons/hr/static/src/components/versions_timeline/versions_timeline.xml
+++ b/addons/hr/static/src/components/versions_timeline/versions_timeline.xml
@@ -9,7 +9,7 @@
                     title="New Employee Record"
                     t-on-click="this.onClickDateTimePickerBtn"
                     class="btn btn-primary">
-                    <i class="fa fa-plus"/>
+                    <i class="oi" data-icon="add"/>
                 </button>
             </div>
         </div>
diff --git a/addons/hr/static/src/core/common/im_status_patch.js b/addons/hr/static/src/core/common/im_status_patch.js
index 0a9b4ac20271ec..22c8be39285006 100644
--- a/addons/hr/static/src/core/common/im_status_patch.js
+++ b/addons/hr/static/src/core/common/im_status_patch.js
@@ -5,7 +5,8 @@ imStatusDataRegistry.add(
     "hr-homeworking-home",
     {
         condition: ({ user }) => user?.employee_id?.work_location_type === "home",
-        icon: "fa fa-home",
+        icon: "home",
+        icon_class: "",
         title: {
             online: _t("User is at home and online"),
             away: _t("User is at home and idle"),
@@ -20,7 +21,8 @@ imStatusDataRegistry.add(
     "hr-homeworking-office",
     {
         condition: ({ user }) => user?.employee_id?.work_location_type === "office",
-        icon: "fa fa-building",
+        icon: "business",
+        icon_class: "oi-filled",
         title: {
             online: _t("User is at the office and online"),
             away: _t("User is at the office and idle"),
@@ -35,7 +37,8 @@ imStatusDataRegistry.add(
     "hr-homeworking-other",
     {
         condition: ({ user }) => user?.employee_id?.work_location_type === "other",
-        icon: "fa fa-map-marker",
+        icon: "location_on",
+        icon_class: "",
         title: {
             online: _t("User is at other location and online"),
             away: _t("User is at other location and idle"),
diff --git a/addons/hr/static/src/core/web/avatar_card/avatar_card_patch.xml b/addons/hr/static/src/core/web/avatar_card/avatar_card_patch.xml
index f86bf2fb89b883..3a028aad35ca53 100644
--- a/addons/hr/static/src/core/web/avatar_card/avatar_card_patch.xml
+++ b/addons/hr/static/src/core/web/avatar_card/avatar_card_patch.xml
@@ -13,15 +13,15 @@
         <xpath expr="//span[hasclass('o_card_avatar_im_status')]" position="after">
             <span t-elif="this.employee?.show_hr_icon_display" name="icon" class="o_card_avatar_im_status position-absolute d-flex align-items-center justify-content-center o_employee_presence_status bg-inherit">
                 <!-- Employee is present/connected and it is normal according to his work schedule  -->
-                <i t-if="this.employee?.hr_icon_display == 'presence_present'" class="fa fa-fw fa-circle text-success" title="Present" role="img" aria-label="Present"/>
+                <i t-if="this.employee?.hr_icon_display == 'presence_present'" class="oi oi-fw oi-filled text-success" data-icon="circle" title="Present" role="img" aria-label="Present"/>
                 <!-- Employee is not present/connected and it is normal according to his work schedule -->
-                <i t-if="this.employee?.hr_icon_display == 'presence_absent'" class="fa fa-fw fa-circle text-warning" title="Absent" role="img" aria-label="Absent"/>
+                <i t-if="this.employee?.hr_icon_display == 'presence_absent'" class="oi oi-fw oi-filled text-warning" data-icon="circle" title="Absent" role="img" aria-label="Absent"/>
                 <!-- Employee is connected but according to his work schedule, he should not work for now  -->
-                <i t-if="this.employee?.hr_icon_display == 'presence_out_of_working_hour'" class="fa fa-fw fa-circle text-muted" title="Off-Hours" role="img" aria-label="Off-Hours"/>
+                <i t-if="this.employee?.hr_icon_display == 'presence_out_of_working_hour'" class="oi oi-fw oi-filled text-muted" data-icon="circle" title="Off-Hours" role="img" aria-label="Off-Hours"/>
                 <!-- Homeworking info -->
-                <i t-if="this.employee?.hr_icon_display === 'presence_home'" class="fa fa-fw fa-home text-success me-1" title="At Home - Present" role="img" aria-label="At Home"/>
-                <i t-if="this.employee?.hr_icon_display === 'presence_office'" class="fa fa-fw fa-building text-success me-1" title="At Office - Present" role="img" aria-label="At Office"/>
-                <i t-if="this.employee?.hr_icon_display === 'presence_other'" class="fa fa-fw fa-map-marker text-success me-1" title="Present" role="img" aria-label="At Other"/>
+                <i t-if="this.employee?.hr_icon_display === 'presence_home'" class="oi oi-fw text-success me-1" data-icon="home" title="At Home - Present" role="img" aria-label="At Home"/>
+                <i t-if="this.employee?.hr_icon_display === 'presence_office'" class="oi oi-fw oi-filled text-success me-1" data-icon="business" title="At Office - Present" role="img" aria-label="At Office"/>
+                <i t-if="this.employee?.hr_icon_display === 'presence_other'" class="oi oi-fw text-success me-1" data-icon="location_on" title="Present" role="img" aria-label="At Other"/>
             </span>
         </xpath>
 
diff --git a/addons/hr/static/src/core/web/thread_actions.js b/addons/hr/static/src/core/web/thread_actions.js
index fd022b20d559c1..a59b5f130b34b4 100644
--- a/addons/hr/static/src/core/web/thread_actions.js
+++ b/addons/hr/static/src/core/web/thread_actions.js
@@ -7,7 +7,8 @@ registerThreadAction("open-hr-profile", {
         owner.props.chatWindow?.isOpen &&
         channel.correspondent?.partner_id?.employeeId &&
         !owner.isDiscussSidebarChannelActions,
-    icon: "fa fa-fw fa-id-card",
+    icon: "badge",
+    iconClass: "oi-filled",
     name: _t("Open Profile"),
     onSelected: async ({ channel, store }) =>
         store.env.services.action.doAction({
diff --git a/addons/hr/static/src/fields/hr_org_chart.xml b/addons/hr/static/src/fields/hr_org_chart.xml
index 9aff9aca7fd317..9a0c3bfe62f975 100644
--- a/addons/hr/static/src/fields/hr_org_chart.xml
+++ b/addons/hr/static/src/fields/hr_org_chart.xml
@@ -73,7 +73,7 @@
     <div t-if='this.managers.length &gt; 0' class="o_org_chart_group_up position-relative">
         <div t-if='this.managers_more' class="o_org_chart_more pe-3" t-attf-class="{{this.max_level !== null ? 'invisible' : ''}}">
             <a href="#" t-att-data-employee-id="this.managers[0].id" class="o_employee_more_managers d-block bg-100 px-2" t-on-click.prevent="() => this._onEmployeeMoreManager(this.managers[0].id)">
-                <i class="fa fa-angle-double-up" role="img" aria-label="More managers" title="More managers"/>
+                <i class="oi" data-icon="keyboard_double_arrow_up" role="img" aria-label="More managers" title="More managers"/>
             </a>
         </div>
 
@@ -162,7 +162,7 @@
             <div class="d-flex align-items-center">
                 <span class="o_media_object flex-shrink-0 rounded me-1" t-att-style='"background-image:url(\"/web/image/hr.employee.public/" + this.props.employee.id + "/avatar_1024/?unique=" + this.props.employee.write_date + "\")"'/>
                 <b class="flex-grow-1 fw-medium"><t t-out="this.props.employee.name"/></b>
-                <a href="#" class="o_employee_redirect btn btn-link" t-att-data-employee-id="this.props.employee.id" t-on-click.prevent="() => this._onEmployeeRedirect(this.props.employee.id)"><i class="fa fa-user" role="img" aria-label='View employee' title="View employee"/></a>
+                <a href="#" class="o_employee_redirect btn btn-link" t-att-data-employee-id="this.props.employee.id" t-on-click.prevent="() => this._onEmployeeRedirect(this.props.employee.id)"><i class="oi oi-filled" data-icon="person" role="img" aria-label='View employee' title="View employee"/></a>
             </div>
         </h3>
         <div class="popover-body">
diff --git a/addons/hr/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_card.xml b/addons/hr/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_card.xml
index 5f49c82c90128c..dafd48f5e5178c 100644
--- a/addons/hr/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_card.xml
+++ b/addons/hr/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_card.xml
@@ -11,12 +11,12 @@
         </xpath>
         <xpath expr="//button[@name='hierarchy_search_subsidiaries']/t[@t-if]" position="replace">
             <t t-if="!this.props.node.nodes.length">
-                <i class="fa fa-fw fa-caret-right"/>
+                <i class="oi oi-fw" data-icon="arrow_right"/>
             </t>
         </xpath>
         <xpath expr="//button[@name='hierarchy_search_subsidiaries']/t[@t-else]" position="replace">
             <t t-else="">
-                <i class="fa fa-fw fa-caret-down"/>
+                <i class="oi oi-fw" data-icon="arrow_drop_down"/>
             </t>
         </xpath>
     </t>
diff --git a/addons/hr/static/tests/hr_employee_hierarchy_view.test.js b/addons/hr/static/tests/hr_employee_hierarchy_view.test.js
index 4bfcec669d8e49..2f4fbbe02b6138 100644
--- a/addons/hr/static/tests/hr_employee_hierarchy_view.test.js
+++ b/addons/hr/static/tests/hr_employee_hierarchy_view.test.js
@@ -83,7 +83,7 @@ test("load hierarchy view", async () => {
     expect(".o_hierarchy_node_button.btn-primary .o_hierarchy_icon").toHaveCount(0, {
         message: "the icon has been replaced in that js_class",
     });
-    expect(".o_hierarchy_node_button.btn-primary .fa-caret-right").toHaveCount(1, {
+    expect(".o_hierarchy_node_button.btn-primary [data-icon='arrow_right']").toHaveCount(1, {
         message: "the icon has been replaced in that js_class",
     });
     expect(".o_hierarchy_node_button.btn-primary").toHaveText("1 people");
@@ -91,7 +91,7 @@ test("load hierarchy view", async () => {
     expect(".o_hierarchy_row:eq(0) .o_hierarchy_node").toHaveCount(1);
     expect(".o_hierarchy_row:eq(0) .o_hierarchy_node_content").toHaveText("Albert");
     expect(".o_hierarchy_node_button.btn-secondary").toHaveCount(1);
-    expect(".o_hierarchy_node_button.btn-secondary .fa-caret-down").toHaveCount(1);
+    expect(".o_hierarchy_node_button.btn-secondary [data-icon='arrow_drop_down']").toHaveCount(1);
     expect(".o_hierarchy_node_button.btn-secondary").toHaveText("2 people");
 });
 
diff --git a/addons/hr/static/tests/hr_presence_status.test.js b/addons/hr/static/tests/hr_presence_status.test.js
index cc07aa0d68da36..5e58b1655be53d 100644
--- a/addons/hr/static/tests/hr_presence_status.test.js
+++ b/addons/hr/static/tests/hr_presence_status.test.js
@@ -35,11 +35,11 @@ test("Office Location (online)", async () => {
                 <field name="hr_icon_display" widget="hr_presence_status"/>
             </form>`,
     });
-    expect(".o_employee_availability.fa-building").toHaveCount(1);
-    expect(".o_employee_availability.fa-home").toHaveCount(0);
-    expect(".o_employee_availability.fa-map-marker").toHaveCount(0);
-    expect(".o_employee_availability").toHaveClass(["text-success", "fa-building"]);; // color == text-success
-    expect(".o_employee_availability.fa-building[title='Office 1']").toHaveCount(1);
+    expect(".o_employee_availability[data-icon='business']").toHaveCount(1);
+    expect(".o_employee_availability[data-icon='home']").toHaveCount(0);
+    expect(".o_employee_availability[data-icon='location_on']").toHaveCount(0);
+    expect(".o_employee_availability[data-icon='business']").toHaveClass("text-success"); // color == text-success
+    expect(".o_employee_availability[data-icon='business'][title='Office 1']").toHaveCount(1);
 });
 
 test("Home Location (away)", async () => {
@@ -64,9 +64,9 @@ test("Home Location (away)", async () => {
                 <field name="hr_icon_display" widget="hr_presence_status"/>
             </form>`,
     });
-    expect(".o_employee_availability.fa-home").toHaveCount(1);
-    expect(".o_employee_availability.fa-building").toHaveCount(0);
-    expect(".o_employee_availability.fa-map-marker").toHaveCount(0);
-    expect(".o_employee_availability").toHaveClass(["o_icon_employee_absent", "fa-home"]); // color == text-warning
-    expect(".o_employee_availability.fa-home[title='Home']").toHaveCount(1);
+    expect(".o_employee_availability[data-icon='home']").toHaveCount(1);
+    expect(".o_employee_availability[data-icon='business']").toHaveCount(0);
+    expect(".o_employee_availability[data-icon='location_on']").toHaveCount(0);
+    expect(".o_employee_availability[data-icon='home']").toHaveClass("o_icon_employee_absent"); // color == text-warning
+    expect(".o_employee_availability[data-icon='home'][title='Home']").toHaveCount(1);
 });
diff --git a/addons/hr/static/tests/tours/hr_employee_multiple_bank_accounts.js b/addons/hr/static/tests/tours/hr_employee_multiple_bank_accounts.js
index b20d48411a2b9b..32f7c3a416a182 100644
--- a/addons/hr/static/tests/tours/hr_employee_multiple_bank_accounts.js
+++ b/addons/hr/static/tests/tours/hr_employee_multiple_bank_accounts.js
@@ -66,7 +66,7 @@ registry.category("web_tour.tours").add("hr_employee_multiple_bank_accounts_tour
         },
         {
             content: "save employee form",
-            trigger: ".fa-cloud-upload",
+            trigger: "[data-icon='cloud_upload']",
             run: "click",
         },
         {
diff --git a/addons/hr/static/tests/web/m2x_avatar_user.test.js b/addons/hr/static/tests/web/m2x_avatar_user.test.js
index 7df7cec81c202f..85d1bd11fd7801 100644
--- a/addons/hr/static/tests/web/m2x_avatar_user.test.js
+++ b/addons/hr/static/tests/web/m2x_avatar_user.test.js
@@ -60,7 +60,7 @@ test("avatar card preview with hr", async () => {
     });
     await contains(".o_m2o_avatar > img").click();
     await mailContains(".o_avatar_card");
-    await mailContains(".o_avatar_card span[data-tooltip='Work Location'] .fa-building-o");
+    await mailContains(".o_avatar_card span[data-tooltip='Work Location'] [data-icon='business']");
     expect(queryAllTexts(".o_card_user_infos > *:not(.o_avatar_card_buttons)")).toEqual([
         "Mario",
         "Management",
@@ -118,7 +118,7 @@ test("avatar card preview with hr (partner_id field)", async () => {
     });
     await contains(".o_m2o_avatar > img").click();
     await mailContains(".o_avatar_card");
-    await mailContains(".o_avatar_card span[data-tooltip='Work Location'] .fa-building-o");
+    await mailContains(".o_avatar_card span[data-tooltip='Work Location'] [data-icon='business']");
     expect(queryAllTexts(".o_card_user_infos > *:not(.o_avatar_card_buttons)")).toEqual([
         "Mario",
         "Management",
diff --git a/addons/hr/views/hr_department_views.xml b/addons/hr/views/hr_department_views.xml
index bf813578c51d12..e245f2f89a9b15 100644
--- a/addons/hr/views/hr_department_views.xml
+++ b/addons/hr/views/hr_department_views.xml
@@ -9,10 +9,10 @@
                     <field name="company_id" invisible="1"/>
                     <sheet>
                         <div class="oe_button_box" name="button_box" invisible="not id">
-                            <button class="oe_stat_button" name="action_employee_from_department" type="object" icon="fa-users">
+                            <button class="oe_stat_button" name="action_employee_from_department" type="object" icon="group" icon_class="oi-filled">
                                 <field string="Employees" name="total_employee" widget="statinfo"/>
                             </button>
-                            <button class="oe_stat_button" type="object" name="action_plan_from_department" icon="fa-list-ul">
+                            <button class="oe_stat_button" type="object" name="action_plan_from_department" icon="format_list_bulleted">
                                 <field string="Plans" name="plans_count" widget="statinfo"/>
                             </button>
                         </div>
@@ -115,7 +115,7 @@
                             <a type="open"><field name="name" class="fw-bold fs-4 d-bolck ms-2"/></a>
                             <field name="manager_id" widget="many2one_avatar_employee" options="{'display_avatar_name': True}" readonly="1" class="text-muted ms-2"/>
                             <div class="small mt-1 ms-2" groups="base.group_multi_company">
-                                <i class="fa fa-building-o" role="img" aria-label="Company" title="Company"/> <field name="company_id"/>
+                                <i class="oi" data-icon="business" role="img" aria-label="Company" title="Company"/> <field name="company_id"/>
                             </div>
                             <div class="row g-0 mt-3 mb-2 ms-2" t-if="!selection_mode">
                                 <div class="col-6">
diff --git a/addons/hr/views/hr_employee_public_views.xml b/addons/hr/views/hr_employee_public_views.xml
index c1a2393f574dbe..c981744c2c37cc 100644
--- a/addons/hr/views/hr_employee_public_views.xml
+++ b/addons/hr/views/hr_employee_public_views.xml
@@ -9,8 +9,8 @@
                 <search string="Employees">
                     <field name="name" string="Employees" filter_domain="['|', ('work_email','ilike',self), ('name','ilike',self)]"/>
                     <searchpanel view_types="kanban,list,graph,pivot,hierarchy">
-                        <field name="company_id" groups="base.group_multi_company" icon="fa-building" enable_counters="1"/>
-                        <field name="department_id" icon="fa-users" enable_counters="1"/>
+                        <field name="company_id" groups="base.group_multi_company" icon="business" icon_class="oi-filled" enable_counters="1"/>
+                        <field name="department_id" icon="group" icon_class="oi-filled" enable_counters="1"/>
                     </searchpanel>
                     <field name="parent_id" string="Manager" domain="[('company_id', 'in', allowed_company_ids)]"/>
                     <field name="job_title"/>
@@ -68,15 +68,15 @@
                                             required="True" style="font-size: min(4vw, 2.6rem);"/>
                                     </h1>
                                     <div class="o_input_box">
-                                        <i class="fa fa-envelope o_input_box_overlay_start" title="Work Email"/>
+                                        <i class="oi oi-filled o_input_box_overlay_start" data-icon="mail" title="Work Email"/>
                                         <field name="work_email" widget="email" placeholder="e.g. johndoe@example.com" string="Work Email"/>
                                     </div>
                                     <div class="o_input_box">
-                                        <i class="fa fa-phone o_input_box_overlay_start" title="Work Phone"/>
+                                        <i class="oi oi-filled o_input_box_overlay_start" data-icon="phone" title="Work Phone"/>
                                         <field name="work_phone" widget="phone" placeholder="Work Phone" string="Work Phone"/>
                                     </div>
                                     <div class="o_input_box">
-                                        <i class="fa fa-mobile o_input_box_overlay_start" title="Work Mobile"/>
+                                        <i class="oi o_input_box_overlay_start" data-icon="smartphone" title="Work Mobile"/>
                                         <field name="mobile_phone" widget="phone" placeholder="Work Mobile" string="Work Mobile"/>
                                     </div>
                                 </div>
@@ -110,7 +110,7 @@
                                                         type="action"
                                                         role="button"
                                                         context="{'hierarchy_res_id': id}">
-                                                        <i class="fa fa-sitemap me-1 mt-1"/>
+                                                        <i class="oi me-1 mt-1" data-icon="account_tree"/>
                                                         <span class="fw-bolder">Zoom</span>
                                                     </a>
                                                 </div>
@@ -185,16 +185,16 @@
                                 <field t-if="record.job_title.raw_value" name="job_title"/>
                                 <field t-elif="record.job_id.raw_value" name="job_id"/>
                                 <div t-if="record.work_email.raw_value" class="text-truncate">
-                                    <i class="fa fa-fw me-2 fa-envelope text-primary" title="Email"/>
+                                    <i class="oi oi-fw oi-filled me-2" data-icon="mail" title="Email"/>
                                     <field name="work_email"/>
                                 </div>
                                 <div t-if="record.work_phone.raw_value">
-                                    <i class="fa fa-fw me-2 fa-phone text-primary" title="Phone"/>
+                                    <i class="oi oi-fw oi-filled me-2" data-icon="phone" title="Phone"/>
                                     <field name="work_phone"/>
                                 </div>
                                 <div class="d-flex">
                                     <div invisible="birthday_public_display_string == 'hidden'">
-                                        <i class="fa fa-fw me-2 fa-birthday-cake text-primary" title="Birthday"/>
+                                        <i class="oi oi-fw me-2 text-primary" data-icon="cake" title="Birthday"/>
                                         <field name="birthday_public_display_string"/>
                                     </div>
                                     <field name="user_id" widget="many2one_avatar_user" readonly="1" class="ms-auto"/>
@@ -210,7 +210,7 @@
             <field name="name">hr.employee.public.hierarchy.view</field>
             <field name="model">hr.employee.public</field>
             <field name="arch" type="xml">
-                <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy" icon="fa-users" draggable="0">
+                <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy" icon="group" draggable="0">
                     <field name="name" />
                     <field name="job_id" />
                     <field name="department_color" />
diff --git a/addons/hr/views/hr_employee_views.xml b/addons/hr/views/hr_employee_views.xml
index feec6582bc4b2e..6c3461fbaf29ee 100644
--- a/addons/hr/views/hr_employee_views.xml
+++ b/addons/hr/views/hr_employee_views.xml
@@ -9,8 +9,8 @@
                     <field name="name" string="Employee"
                         filter_domain="['|', ('work_email', 'ilike', self), ('name', 'ilike', self)]"/>
                     <searchpanel view_types="kanban,list,graph,pivot,hierarchy">
-                        <field name="company_id" groups="base.group_multi_company" icon="fa-building" enable_counters="1"/>
-                        <field name="department_id" icon="fa-users" enable_counters="1"/>
+                        <field name="company_id" groups="base.group_multi_company" icon="business" icon_class="oi-filled" enable_counters="1"/>
+                        <field name="department_id" icon="group" icon_class="oi-filled" enable_counters="1"/>
                     </searchpanel>
                     <field name="parent_id" string="Manager" domain="[('company_id', 'in', allowed_company_ids)]"/>
                     <field name="contract_date_start" groups="hr.group_hr_manager"/>
@@ -110,7 +110,7 @@
                         <div name="button_box" class="oe_button_box">
                             <button name="action_open_versions"
                                 class="oe_stat_button"
-                                icon="fa-address-book"
+                                icon="contact_page" icon_class="oi-filled"
                                 type="object"
                                 groups="hr.group_hr_user">
                                 <div class="o_stat_info">
@@ -134,22 +134,22 @@
                                 </h1>
                                 <label for="work_email" class="d-md-none"/>
                                 <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-envelope" title="Work Email"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="mail" title="Work Email"/>
                                     <field name="work_email" widget="email" placeholder="e.g. johndoe@example.com" string="Work Email"/>
                                 </div>
                                 <label for="work_phone" class="d-md-none"/>
                                 <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-phone" title="Work Phone"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="phone" title="Work Phone"/>
                                     <field name="work_phone" widget="phone" placeholder="Work Phone" string="Work Phone"/>
                                 </div>
                                 <label for="mobile_phone" class="d-md-none"/>
                                 <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-mobile" title="Work Mobile"/>
+                                    <i class="d-none d-md-inline-flex oi" data-icon="smartphone" title="Work Mobile"/>
                                     <field name="mobile_phone" widget="phone" placeholder="Work Mobile" string="Work Mobile"/>
                                 </div>
                                 <label for="category_ids" class="d-md-none"/>
                                 <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-tags" title="Tags"/>
+                                    <i class="d-none d-md-inline-flex oi" data-icon="sell" title="Tags"/>
                                     <field name="category_ids" widget="many2many_tags"
                                         options="{'color_field': 'color', 'no_create_edit': True}"
                                         placeholder="e.g. Founder, Motorized, Building B, ..." groups="hr.group_hr_user"/>
@@ -198,7 +198,7 @@
                                                 role="button"
                                                 class="float-end me-2 cursor-pointer"
                                                 context="{'hierarchy_res_id': id}">
-                                                <i class="fa fa-share-alt fa-rotate-90 ms-1 mt-1" role="img" aria-label="Full Chart"/>
+                                                <i class="oi oi-rotate-90 ms-1 mt-1" data-icon="family_history" role="img" aria-label="Full Chart"/>
                                                 Full Chart
                                             </a>
                                         </div>
@@ -254,14 +254,16 @@
                                                 <button
                                                     title="Trust Bank Account"
                                                     class="pt-0" 
-                                                    icon="fa-toggle-off fa-lg"  
+                                                    icon="toggle_off"
+                                                    icon_class="oi-lg"
                                                     type="object" 
                                                     name="action_toggle_primary_bank_account_trust" 
                                                     invisible="is_trusted_bank_account"/>
                                                 <button 
                                                     title="Untrust Bank Account"
                                                     class="button-on pt-0" 
-                                                    icon="fa-toggle-on fa-lg"   
+                                                    icon="toggle_on"
+                                                    icon_class="oi-lg"
                                                     type="object" 
                                                     name="action_toggle_primary_bank_account_trust" 
                                                     invisible="not is_trusted_bank_account"/>
@@ -452,7 +454,7 @@
                                                     <field name="departure_apply_date" readonly="1" class="oe_inline"/>
                                                     <a name="action_cancel_departure" type="object" class="oe_inline"
                                                         confirm="This action will delete the departure entirely. Are you sure you want to proceed?">
-                                                        <i class="oi oi-arrow-right ms-1"/>
+                                                        <i class="oi ms-1" data-icon="east"/>
                                                         Cancel Departure
                                                     </a>
                                                 </span>
@@ -687,25 +689,25 @@
                                     <field class="fw-bold fs-5" name="name" placeholder="Employee's Name"/>
                                 </div>
                                 <div t-if="record.job_title.raw_value" class="text-truncate">
-                                    <i class="fa fa-fw me-2 fa-suitcase text-primary" title="Job Position"/>
+                                    <i class="oi oi-fw me-2 text-primary" data-icon="luggage" title="Job Position"/>
                                     <field name="job_title"/>
                                 </div>
                                 <div t-if="record.work_email.raw_value" class="text-truncate">
-                                    <i class="fa fa-fw me-2 fa-envelope text-primary" title="Email"/>
+                                    <i class="oi oi-fw oi-filled me-2 text-primary" data-icon="mail" title="Email"/>
                                     <field name="work_email" />
                                 </div>
                                 <div t-if="record.work_phone.raw_value">
-                                    <i class="fa fa-fw me-2 fa-phone text-primary" title="Phone"/>
+                                    <i class="oi oi-fw oi-filled me-2 text-primary" data-icon="phone" title="Phone"/>
                                     <field name="work_phone" />
                                 </div>
                                 <div t-if="record.first_contract_date.raw_value" groups="hr.group_hr_manager" t-att-class="{'text-danger': record.contract_date_end.raw_value &lt; luxon.DateTime.now().toISO()}">
-                                    <i class="fa fa-fw me-2 fa-briefcase text-primary" title="Contract"/>
+                                    <i class="oi oi-fw me-2 text-primary" data-icon="work" title="Contract"/>
                                     <field name="first_contract_date"/>
                                     <span t-if="record.contract_date_end.raw_value"> - </span>
                                     <field t-if="record.contract_date_end.raw_value" name="contract_date_end"/>
                                 </div>
                                 <div invisible="not birthday" groups="hr.group_hr_user">
-                                    <i class="fa fa-fw me-2 fa-birthday-cake text-primary" title="Birthday"/>
+                                    <i class="oi oi-fw me-2 text-primary" data-icon="cake" title="Birthday"/>
                                     <field name="birthday"/>
                                 </div>
                                 <field name="employee_properties" widget="properties"/>
@@ -727,7 +729,7 @@
             <field name="name">hr.employee.view.hierarchy</field>
             <field name="model">hr.employee</field>
             <field name="arch" type="xml">
-                <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy" icon="fa-users" draggable="1">
+                <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy" icon="group" draggable="1">
                     <field name="name" />
                     <field name="job_title" />
                     <field name="department_color" />
@@ -764,7 +766,7 @@
                 <button name="action_open_versions" position="before">
                     <button name="action_related_contacts"
                         class="oe_stat_button"
-                        icon="fa-address-card-o"
+                        icon="contact_mail"
                         type="object"
                         help="Related Contacts"
                         groups="base.group_no_one">
diff --git a/addons/hr/views/hr_export_mixin_views.xml b/addons/hr/views/hr_export_mixin_views.xml
index 215434d35f404d..5e30b3daabc96d 100644
--- a/addons/hr/views/hr_export_mixin_views.xml
+++ b/addons/hr/views/hr_export_mixin_views.xml
@@ -34,7 +34,8 @@
                         <button name="action_open_employees"
                                 type="object"
                                 class="oe_stat_button"
-                                icon="fa-users">
+                                icon="group"
+                                icon_class="oi-filled">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value"><field name="eligible_employee_count"/></span>
                                 <span class="o_stat_text">Eligible Employees</span>
diff --git a/addons/hr/views/hr_templates.xml b/addons/hr/views/hr_templates.xml
index b4bd2726d8c7cc..0d9ac2fe715f2b 100644
--- a/addons/hr/views/hr_templates.xml
+++ b/addons/hr/views/hr_templates.xml
@@ -3,8 +3,8 @@
     <template id="hr_employee_plan_activity_summary">
         <div class="d-flex flex-column flex-grow">
             <t t-foreach="activity_ids" t-as="activity">
-                <span><i t-attf-class="fa #{activity.icon}"/> <t t-out="activity.summary"/> (<t t-if="activity.user_id" t-out="activity.user_id.name"/>)</span>
-                <span><i class="fa fa-clock-o"/> <span t-field="activity.date_deadline"/></span>
+                <span><i class="oi" t-att-data-icon="activity.icon"/> <t t-out="activity.summary"/> (<t t-if="activity.user_id" t-out="activity.user_id.name"/>)</span>
+                <span><i class="oi" data-icon="schedule"/> <span t-field="activity.date_deadline"/></span>
             </t>
         </div>
     </template>
diff --git a/addons/hr/views/hr_work_location_views.xml b/addons/hr/views/hr_work_location_views.xml
index 7d5734a0f57522..0b591d3d765c5f 100644
--- a/addons/hr/views/hr_work_location_views.xml
+++ b/addons/hr/views/hr_work_location_views.xml
@@ -27,8 +27,8 @@
                                 <field name="location_type"
                                        widget="badges_selection"
                                        options="{
-                                            'default_icon': 'fa-map-marker',
-                                            'icon_mapping': {'office': 'fa-building-o', 'home': 'fa-home'},
+                                            'default_icon': 'location_on',
+                                            'icon_mapping': {'office': 'business', 'home': 'home'},
                                        }"
                                 />
                             </group>
diff --git a/addons/hr/views/res_partner_views.xml b/addons/hr/views/res_partner_views.xml
index da9e6e2a30aff4..0f11cb41d07d2e 100644
--- a/addons/hr/views/res_partner_views.xml
+++ b/addons/hr/views/res_partner_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="base.view_partner_form"/>
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
-                <button name="action_open_employees" type="object" class="oe_stat_button" icon="fa-id-card-o" groups="hr.group_hr_user" invisible="employees_count == 0">
+                <button name="action_open_employees" type="object" class="oe_stat_button" icon="badge" groups="hr.group_hr_user" invisible="employees_count == 0">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="employees_count"/></span>
                         <span class="o_stat_text">Employee</span>
diff --git a/addons/hr/views/res_users.xml b/addons/hr/views/res_users.xml
index b93ebba1f78465..f7ec9775df9a1b 100644
--- a/addons/hr/views/res_users.xml
+++ b/addons/hr/views/res_users.xml
@@ -60,17 +60,17 @@
                 <xpath expr="//*[hasclass('o_form_header_details')]" position="inside">
                     <label for="work_email" class="d-md-none"/>
                     <div class="o_input_box d-flex align-items-baseline w-md-50 gap-2">
-                        <i class="d-none d-md-inline-flex fa fa-envelope" title="Work Email"/>
+                        <i class="d-none d-md-inline-flex oi oi-filled" data-icon="mail" title="Work Email"/>
                         <field name="work_email" widget="email" placeholder="Work Email"/>
                     </div>
                     <label for="work_phone" class="d-md-none"/>
                     <div class="o_input_box d-flex align-items-baseline w-md-50 gap-2">
-                        <i class="d-none d-md-inline-flex fa fa-phone" title="Work Phone"/>
+                        <i class="d-none d-md-inline-flex oi oi-filled" data-icon="phone" title="Work Phone"/>
                         <field name="work_phone" widget="phone" placeholder="Work Phone"/>
                     </div>
                     <label for="mobile_phone" class="d-md-none"/>
                     <div class="o_input_box d-flex align-items-baseline w-md-50 gap-2">
-                        <i class="d-none d-md-inline-flex fa fa-mobile" title="Work Mobile"/>
+                        <i class="d-none d-md-inline-flex oi" data-icon="smartphone" title="Work Mobile"/>
                         <field name="mobile_phone" widget="phone" placeholder="Work Mobile"/>
                     </div>
                 </xpath>
@@ -141,7 +141,8 @@
                     <div class="oe_button_box" name="button_box">
                         <button name="action_open_employees"
                             class="oe_stat_button"
-                            icon="fa-users"
+                            icon="group"
+                            icon_class="oi-filled"
                             invisible="employee_count == 0"
                             context="{'active_test': False}"
                             type="object">
@@ -199,7 +200,8 @@
                 <xpath expr="//div[@name='button_box']" position="inside">
                     <button name="action_open_employees"
                         class="oe_stat_button"
-                        icon="fa-users"
+                        icon="group"
+                        icon_class="oi-filled"
                         invisible="employee_count == 0"
                         context="{'active_test': False}"
                         type="object">
@@ -207,7 +209,7 @@
                     </button>
                     <button name="action_related_contact"
                         class="oe_stat_button"
-                        icon="fa-address-card-o"
+                        icon="contact_mail"
                         type="object"
                         help="Related Contact">
                         <div class="o_stat_info">
@@ -231,27 +233,27 @@
                 <xpath expr="//div[@name='phone']" position="attributes">
                     <attribute name="invisible">employee_id</attribute>
                 </xpath>
-                <xpath expr="//div[@name='login']/i[hasclass('fa-envelope')]" position="attributes">
+                <xpath expr="//div[@name='login']/i[@data-icon='mail']" position="attributes">
                     <attribute name="invisible">(not employee_id and login != email) or (employee_id and login != work_email)</attribute>
                 </xpath>
-                <xpath expr="//div[@name='login']/i[hasclass('fa-key')]" position="attributes">
+                <xpath expr="//div[@name='login']/i[@data-icon='key']" position="attributes">
                     <attribute name="invisible">(not employee_id and login == email) or (employee_id and login == work_email)</attribute>
                 </xpath>
                 <xpath expr="//*[hasclass('o_form_header_details')]" position="inside">
                     <label for="work_email" class="d-md-none" invisible="not employee_id or login == work_email"/>
                     <div class="o_input_box" invisible="not employee_id or login == work_email">
-                        <i class="d-none d-md-inline-flex fa fa-envelope fa-fw" title="Work Email"/>
+                        <i class="d-none d-md-inline-flex oi oi-fw" data-icon="mail" title="Work Email"/>
                         <field name="email_domain_placeholder" invisible="1" />
                         <field name="work_email" widget="email" options="{'placeholder_field': 'email_domain_placeholder'}"/>
                     </div>
                     <label for="work_phone" class="d-md-none" invisible="not employee_id"/>
                     <div class="o_input_box" invisible="not employee_id">
-                        <i class="d-none d-md-inline-flex fa fa-phone fa-fw" title="Work Phone"/>
+                        <i class="d-none d-md-inline-flex oi oi-fw" data-icon="phone" title="Work Phone"/>
                         <field name="work_phone" widget="phone" placeholder="Work Phone"/>
                     </div>
                     <label for="mobile_phone" class="d-md-none" invisible="not employee_id"/>
                     <div class="o_input_box" invisible="not employee_id">
-                        <i class="d-none d-md-inline-flex fa fa-mobile fa-fw" title="Work Mobile"/>
+                        <i class="d-none d-md-inline-flex oi oi-fw" data-icon="smartphone" title="Work Mobile"/>
                         <field name="mobile_phone" widget="phone" placeholder="Work Mobile"/>
                     </div>
                 </xpath>
diff --git a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
index 7379aac77b86ce..e96f85cd6554a5 100644
--- a/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
+++ b/addons/hr_attendance/static/src/components/attendance_menu/attendance_menu.xml
@@ -8,7 +8,8 @@
                   menuClass="'p-0'"
                   state="this.dropdown">
             <button>
-                <i class="fa fa-circle"
+                <i class="oi oi-filled"
+                   data-icon="circle"
                    t-attf-class="text-{{ this.state.checkedIn ? 'success' : 'danger' }}"
                    role="img"
                    aria-label="Attendance"/>
@@ -68,7 +69,7 @@
                                 t-attf-class="btn btn-{{ this.state.checkedIn ? 'warning' : 'primary' }} w-100">
                             <span t-if="!this.state.checkedIn">Check in</span>
                             <span t-else="">Check out</span>
-                            <i t-attf-class="fa fa-sign-{{ this.state.checkedIn ? 'out' : 'in' }} ms-1"/>
+                            <i class="oi ms-1" t-attf-data-icon="{{ this.state.checkedIn ? 'logout' : 'login' }}"/>
                         </button>
                     </div>
                 </div>
diff --git a/addons/hr_attendance/static/src/components/card_layout/card_layout.xml b/addons/hr_attendance/static/src/components/card_layout/card_layout.xml
index 319d891c38a6f9..1f95506081fa0c 100644
--- a/addons/hr_attendance/static/src/components/card_layout/card_layout.xml
+++ b/addons/hr_attendance/static/src/components/card_layout/card_layout.xml
@@ -9,7 +9,7 @@
                     t-on-click="this.props.kioskReturn"
                     class="o_hr_attendance_back_button btn btn-secondary rounded-pill"
                     t-if="this.props.fromTrialMode">
-                    <i class="oi oi-chevron-left" role="img" aria-label="Go back" title="Go back"/>
+                    <i class="oi" data-icon="chevron_backward" role="img" aria-label="Go back" title="Go back"/>
                 </button>
                 <t t-call="hr_attendance.companyHeader" t-if="this.props.activeDisplay != 'settings'">
                     <t t-set="companyImageUrl" t-value="this.props.companyImageUrl"/>
@@ -33,7 +33,7 @@
                         t-on-click="this.props.kioskReturn"
                         class="o_hr_attendance_back_button btn btn-secondary rounded-pill"
                         t-if="this.props.fromTrialMode">
-                        <i class="oi oi-chevron-left" role="img" aria-label="Go back" title="Go back"/>
+                        <i class="oi" data-icon="chevron_backward" role="img" aria-label="Go back" title="Go back"/>
                     </button>
                 </div>
                 <div class="o_hr_kiosk_mode_top d-flex flex-column-reverse flex-sm-row justify-content-between mx-4 my-3" t-if="this.props.activeDisplay != 'settings'">
diff --git a/addons/hr_attendance/static/src/components/check_in_out/check_in_out.xml b/addons/hr_attendance/static/src/components/check_in_out/check_in_out.xml
index 568baedc243449..b79718e937f678 100644
--- a/addons/hr_attendance/static/src/components/check_in_out/check_in_out.xml
+++ b/addons/hr_attendance/static/src/components/check_in_out/check_in_out.xml
@@ -5,7 +5,7 @@
     <div class="flex-grow-1">
         <button t-on-click="() => this.onClickSignInOut()" t-attf-class="o_hr_attendance_sign_in_out_icon btn btn-{{ this.props.checkedIn ? 'warning' : 'success' }} align-self-center px-5 py-3 mt-4 mb-2">
             <span class="align-middle fs-2 me-3 text-white" t-if="!this.props.checkedIn">Check IN</span>
-            <i t-attf-class="fa fa-4x fa-sign-{{ this.props.checkedIn ? 'out' : 'in' }} align-middle"/>
+            <i class="oi oi-4x align-middle" t-attf-data-icon="{{ this.props.checkedIn ? 'logout' : 'login' }}"/>
             <span class="align-middle fs-2 ms-3" t-if="this.props.checkedIn">Check OUT</span>
         </button>
     </div>
diff --git a/addons/hr_attendance/static/src/components/greetings/greetings.xml b/addons/hr_attendance/static/src/components/greetings/greetings.xml
index ccffd9959f60c6..d592ef9bbdb14b 100644
--- a/addons/hr_attendance/static/src/components/greetings/greetings.xml
+++ b/addons/hr_attendance/static/src/components/greetings/greetings.xml
@@ -86,7 +86,7 @@
             </div>
             <div class="o_hr_kiosk_mode_bottom my-4 mx-auto">
                 <button class="btn btn-primary btn-lg rounded-pill px-5" t-on-click="this.props.kioskReturn">
-                    <i class="oi oi-chevron-left me-2"/>
+                    <i class="oi me-2" data-icon="chevron_backward"/>
                     <span>Go back</span>
                 </button>
             </div>
diff --git a/addons/hr_attendance/static/src/components/manual_selection/manual_selection.xml b/addons/hr_attendance/static/src/components/manual_selection/manual_selection.xml
index b973a9371d9755..6a55571087e9fe 100644
--- a/addons/hr_attendance/static/src/components/manual_selection/manual_selection.xml
+++ b/addons/hr_attendance/static/src/components/manual_selection/manual_selection.xml
@@ -7,13 +7,13 @@
                         t-on-click="() => this.props.onClickBack()"
                         class="o_hr_attendance_back_button btn btn-secondary rounded-pill d-flex flex-row align-items-center"
                         t-if="this.props.displayBackButton">
-                        <i class="oi oi-chevron-left me-1" role="img" aria-label="Go back" title="Go back"/>
+                        <i class="oi me-1" data-icon="chevron_backward" role="img" aria-label="Go back" title="Go back"/>
                         Back
                     </button>
                 <div class="o_control_panel_main d-flex justify-content-between align-items-lg-center flex-grow-1">
                     <div class="o_cp_searchview d-flex input-group h-100">
                         <div class="d-flex flex-row align-items-center rounded-pill border flex-grow-1">
-                            <i class="o_searchview_icon d-print-none oi oi-search m-2" aria-label="Search..." title="Search..."/>
+                            <i class="o_searchview_icon oi d-print-none m-2" data-icon="search" aria-label="Search..." title="Search..."/>
                             <div class="o_searchview_input_container position-relative w-100">
                                 <input t-on-input="this.onSearchInput" type="text" class="d-print-none border-0" style="width: 95%;" placeholder="Search..."/>
                             </div>
@@ -49,7 +49,7 @@
                     <Dropdown>
                         <button class="btn btn-light m-2 me-auto align-self-start">
                             <span id="departmentButton" ><i class="fa fa-users me-2"/><t t-out="this.departmentName"/></span>
-                            <i class="fa fa-caret-down ms-2"/>
+                            <i class="oi ms-2" data-icon="arrow_drop_down"/>
                         </button>
                         <t t-set-slot="content">
                             <a t-on-click="() => this.onDepartmentClick()" class="d-flex text-start text-reset p-3">
diff --git a/addons/hr_attendance/static/src/components/new_employee_dialog/many2one/many2one.xml b/addons/hr_attendance/static/src/components/new_employee_dialog/many2one/many2one.xml
index bad86a6e61c003..54ccae5058d567 100644
--- a/addons/hr_attendance/static/src/components/new_employee_dialog/many2one/many2one.xml
+++ b/addons/hr_attendance/static/src/components/new_employee_dialog/many2one/many2one.xml
@@ -19,6 +19,6 @@
                 </div>
             </t>
         </AutoComplete>
-        <i class="fa fa-caret-down dropdown-caret-icon"></i>
+        <i class="oi dropdown-caret-icon" data-icon="arrow_drop_down"></i>
     </t>
 </templates>
diff --git a/addons/hr_attendance/static/src/components/pin_code/pin_code.xml b/addons/hr_attendance/static/src/components/pin_code/pin_code.xml
index cfa3b29529820c..5a41a7d7cfef62 100644
--- a/addons/hr_attendance/static/src/components/pin_code/pin_code.xml
+++ b/addons/hr_attendance/static/src/components/pin_code/pin_code.xml
@@ -37,7 +37,7 @@
         </div>
         <div class="o_hr_kiosk_mode_bottom my-4 mx-auto">
             <button class="btn btn-light btn-lg rounded-pill px-5" t-on-click="() => this.props.onClickBack()">
-                <i class="oi oi-chevron-left me-2"/>
+                <i class="oi me-2" data-icon="chevron_backward"/>
                 <span>Go back</span>
             </button>
         </div>
diff --git a/addons/hr_attendance/static/src/public_kiosk/public_kiosk_app.xml b/addons/hr_attendance/static/src/public_kiosk/public_kiosk_app.xml
index a51d6eb0b7a45f..1690bf83163d3e 100644
--- a/addons/hr_attendance/static/src/public_kiosk/public_kiosk_app.xml
+++ b/addons/hr_attendance/static/src/public_kiosk/public_kiosk_app.xml
@@ -9,7 +9,7 @@
     <xpath expr="//div[hasclass('o_barcode_mobile_container')]" position="replace">
         <div class="o_hr_attendance_kiosk d-flex justify-content-around" t-att-class="{'position-relative' : !this.isDisplayStandalone}">
             <button t-if="this.isBarcodeScannerSupported" t-on-click="this.openMobileScanner" class="o_mobile_barcode btn btn-light btn-lg p-5 rounded-3" t-att-class="{'position-absolute' : !this.isDisplayStandalone}">
-                <i class="fa fa-3x fa-barcode mb-3"/>
+                <i class="oi oi-3x mb-3" data-icon="barcode"/>
                 <span class="d-block">Scan your badge</span>
             </button>
             <a t-if="!this.isDisplayStandalone" class="o_hr_attendance_install_btn btn btn-secondary d-flex align-items-center justify-content-center fw-bolder position-relative"
@@ -128,7 +128,7 @@
             <div class="o_hr_kiosk_mode_bottom d-flex flex-column flex-md-row gap-2 align-items-center justify-content-between my-5">
                 <t t-if="this.props.kioskMode !== 'barcode'">
                     <button t-on-click="() => this.switchDisplay('manual')"  class="btn btn-light btn-lg rounded-3">
-                        <i class="fa fa-user-o me-2"/>
+                        <i class="oi me-2" data-icon="person"/>
                         <span >Identify Manually</span>
                     </button>
                     <span>
diff --git a/addons/hr_attendance/static/src/views/attendance_helper_view.xml b/addons/hr_attendance/static/src/views/attendance_helper_view.xml
index 1ad6ea0573296b..7859c923e3c5cb 100644
--- a/addons/hr_attendance/static/src/views/attendance_helper_view.xml
+++ b/addons/hr_attendance/static/src/views/attendance_helper_view.xml
@@ -40,7 +40,7 @@
                 <img src="/hr_attendance/static/img/attendance_dot.gif" height="180" class="mb-2"/>
                 <h3 class="mt-2">
                     <em>Try the top
-                        <i class="fa fa-circle text-danger" role="img" aria-label="Attendance"/>
+                        <i class="oi oi-filled text-danger" data-icon="circle" role="img" aria-label="Attendance"/>
                         icon (e.g for work from home)
                     </em>
                 </h3>
@@ -82,7 +82,7 @@
                 <div class="mx-5" >
                         <img src="/hr_attendance/static/img/attendance_dot.gif" height="180" class="mb-2"/>
                     <h3 class="mt-2"><em>Try the top
-                        <i class="fa fa-circle text-danger" role="img" aria-label="Attendance"/>
+                        <i class="oi oi-filled text-danger" data-icon="circle" role="img" aria-label="Attendance"/>
                     icon (e.g for work from home)</em></h3>
                 </div>
             </div>
diff --git a/addons/hr_attendance/static/src/views/badge_scanner/badge_scanner.xml b/addons/hr_attendance/static/src/views/badge_scanner/badge_scanner.xml
index a19b20080cd7e6..741d8613070dc6 100644
--- a/addons/hr_attendance/static/src/views/badge_scanner/badge_scanner.xml
+++ b/addons/hr_attendance/static/src/views/badge_scanner/badge_scanner.xml
@@ -5,7 +5,7 @@
             <div class="o_hr_barcode_main container d-flex flex-column h-100 h-sm-auto bg-view shadow">
                 <div class="d-flex align-items-center justify-content-between my-3">
                     <a href="#" class="btn btn-light" t-on-click.prevent="() => this.onClickBack()">
-                        <i class="oi oi-chevron-left fa-lg"></i>
+                        <i class="oi oi-lg" data-icon="chevron_backward"></i>
                     </a>
                     <span class="fs-2 me-auto ms-2">Scan Badge</span>
                 </div>
diff --git a/addons/hr_attendance/static/tests/hr_attendance_kiosk_barcode_scanner.test.js b/addons/hr_attendance/static/tests/hr_attendance_kiosk_barcode_scanner.test.js
index 11f9ef80a39b33..b913877a4f4e41 100644
--- a/addons/hr_attendance/static/tests/hr_attendance_kiosk_barcode_scanner.test.js
+++ b/addons/hr_attendance/static/tests/hr_attendance_kiosk_barcode_scanner.test.js
@@ -31,6 +31,6 @@ test("KioskBarcodeScanner can be opened and closed", async () => {
     });
     await contains("button.o_mobile_barcode").click();
     await waitFor(".modal-body video");
-    await contains(`.oi-arrow-left`).click();
+    await contains(`[data-icon="west"]`).click();
     expect(await isBarcodeScannerOpened).toBe(true);
 });
diff --git a/addons/hr_attendance/views/hr_attendance_overtime_rule_views.xml b/addons/hr_attendance/views/hr_attendance_overtime_rule_views.xml
index b09ab2434a684b..4f3feb3d5a0b6b 100644
--- a/addons/hr_attendance/views/hr_attendance_overtime_rule_views.xml
+++ b/addons/hr_attendance/views/hr_attendance_overtime_rule_views.xml
@@ -100,7 +100,7 @@
                     <button name="action_regenerate_overtimes"
                         class="btn"
                         string="Regenerate overtimes"
-                        icon="fa-clock-o"
+                        icon="schedule"
                         type="object"
                         groups="hr_attendance.group_hr_attendance_officer"
                         help="Regenerate overtimes for this ruleset"/>
@@ -115,7 +115,7 @@
                             name="action_show_versions"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-id-card-o"
+                            icon="badge"
                             invisible="not id"
                             >
                             <field name="versions_count" widget="statinfo" string="Employees" invisible="not versions_count"/>
diff --git a/addons/hr_attendance/views/hr_attendance_view.xml b/addons/hr_attendance/views/hr_attendance_view.xml
index 660d4e388a47e9..c9a78cc849d429 100644
--- a/addons/hr_attendance/views/hr_attendance_view.xml
+++ b/addons/hr_attendance/views/hr_attendance_view.xml
@@ -52,7 +52,7 @@
                         <field name="employee_id" widget="many2one_avatar_employee" options="{'display_avatar_name': True}" class="fs-5 fw-bold mb-2"/>
                         <hr class="mt4 mb8"/>
                         <div>
-                            <i class="fa fa-calendar me-1" aria-label="Period" role="img" title="Period"></i>
+                            <i class="oi oi-filled me-1" data-icon="calendar_today" aria-label="Period" role="img" title="Period"></i>
                             <field name="check_in" /> - <field name="check_out" />
                         </div>
                     </t>
@@ -120,7 +120,7 @@
                                         help="Approve all overtimes for the same employee and date"
                                         invisible="not is_manager or overtime_status not in ['to_approve', 'refused'] or not overtime_status"
                                         name="action_approve_overtime"
-                                        icon="fa-check"
+                                        icon="check"
                                         type="object"
                                         groups="hr_attendance.group_hr_attendance_officer"/>
                                     <button
@@ -129,7 +129,7 @@
                                         help="Refuse all overtimes for the same employee and date"
                                         invisible="not is_manager or overtime_status not in ['to_approve', 'approved'] or not overtime_status"
                                         name="action_refuse_overtime"
-                                        icon="fa-times"
+                                        icon="close"
                                         type="object"
                                         groups="hr_attendance.group_hr_attendance_officer"/>
                                 </div>
@@ -160,7 +160,7 @@
                                         name="action_in_attendance_maps"
                                         type="object"
                                         class="btn btn-link ps-0 pt-0 pb-2"
-                                        icon="oi-arrow-right"
+                                        icon="east"
                                         string="View on Maps"
                                         colspan="2"/>
                                 </div>
@@ -191,7 +191,7 @@
                                         name="action_out_attendance_maps"
                                         type="object"
                                         class="btn btn-link ps-0 pt-0 pb-2"
-                                        icon="oi-arrow-right"
+                                        icon="east"
                                         string="View on Maps"
                                         colspan="2"/>
                                 </div>
@@ -212,7 +212,7 @@
                                         string="Approve"
                                         invisible="not is_manager or status not in ['to_approve', 'refused']"
                                         name="action_approve"
-                                        icon="fa-check"
+                                        icon="check"
                                         type="object"
                                         groups="hr_attendance.group_hr_attendance_officer"/>
                                     <button
@@ -220,7 +220,7 @@
                                         string="Refuse"
                                         invisible="not is_manager or status not in ['to_approve', 'approved']"
                                         name="action_refuse"
-                                        icon="fa-times"
+                                        icon="close"
                                         type="object"
                                         groups="hr_attendance.group_hr_attendance_officer"/>
                                 </list>
@@ -409,7 +409,7 @@
                     invisible="not is_manager or overtime_status not in ['to_approve', 'refused']"
                     groups="hr_attendance.group_hr_attendance_officer"
                     name="action_approve_overtime"
-                    icon="fa-check"
+                    icon="check"
                     type="object"/>
                 <button
                     class="oe_stat_button"
@@ -417,7 +417,7 @@
                     invisible="not is_manager or overtime_status not in ['to_approve', 'approved']"
                     groups="hr_attendance.group_hr_attendance_officer"
                     name="action_refuse_overtime"
-                    icon="fa-times"
+                    icon="close"
                     type="object"/>
             </list>
         </field>
diff --git a/addons/hr_attendance/views/hr_employee_public_views.xml b/addons/hr_attendance/views/hr_employee_public_views.xml
index 61b0a2b6514215..312bf8937f4b25 100644
--- a/addons/hr_attendance/views/hr_employee_public_views.xml
+++ b/addons/hr_attendance/views/hr_employee_public_views.xml
@@ -8,7 +8,7 @@
             <xpath expr="//div[@name='button_box']" position="inside">
                 <button name="action_open_last_month_attendances"
                         class="oe_stat_button"
-                        icon="fa-clock-o"
+                        icon="schedule"
                         type="object"
                         groups="base.group_user"
                         help="Worked hours this month"
diff --git a/addons/hr_attendance/views/hr_employee_view.xml b/addons/hr_attendance/views/hr_employee_view.xml
index 3b1b30564ae8f3..6dd658a7b6281a 100644
--- a/addons/hr_attendance/views/hr_employee_view.xml
+++ b/addons/hr_attendance/views/hr_employee_view.xml
@@ -18,7 +18,7 @@
                 <field name="hours_last_month" groups="hr_attendance.group_hr_attendance_officer" invisible="1"/>
                 <button name="action_open_last_month_attendances"
                         class="oe_stat_button"
-                        icon="fa-clock-o"
+                        icon="schedule"
                         type="object"
                         groups="hr_attendance.group_hr_attendance_officer"
                         help="Worked hours this month">
@@ -73,11 +73,10 @@
                         <main class="w-100 ms-2">
                             <div>
                                 <div class="float-end" t-if="record.attendance_state.raw_value == 'checked_in'">
-                                    <span class="fa fa-circle text-success me-1" role="img" aria-label="Available" title="Available"></span>
+                                    <span class="oi oi-filled text-success me-1" data-icon="circle" role="img" aria-label="Available" title="Available"></span>
                                 </div>
                                 <div class="float-end" t-if="record.attendance_state.raw_value == 'checked_out'">
-                                    <span class="fa fa-circle text-warning me-1"
-                                          role="img" aria-label="Not available" title="Not available">
+                                    <span class="oi oi-filled text-warning me-1" data-icon="circle" role="img" aria-label="Not available" title="Not available">
                                     </span>
                                 </div>
                                 <field class="fw-bolder" name="name"/>
diff --git a/addons/hr_attendance/views/res_config_settings_views.xml b/addons/hr_attendance/views/res_config_settings_views.xml
index 919a8e016f2657..fc1cfcd5eb41a6 100644
--- a/addons/hr_attendance/views/res_config_settings_views.xml
+++ b/addons/hr_attendance/views/res_config_settings_views.xml
@@ -13,7 +13,7 @@
                             <field name="attendance_kiosk_mode" required="1" class="w-75"/>
                             <div>
                                 <a href="https://www.odoo.com/documentation/latest/applications/hr/attendances/hardware.html"
-                                    target="_blank"><i class="fa fa-fw fa-arrow-right"/>Installation Manual</a>
+                                    target="_blank"><i class="oi oi-fw" data-icon="arrow_forward"/>Installation Manual</a>
                             </div>
                         </setting>
                         <setting string="Attendances from Backend" company_dependent="1" help="Allow Users to Check in/out from Odoo.">
@@ -51,7 +51,7 @@
                         </setting>
                         <setting title="Kiosk Mode Adress" help="Use this url to access your kiosk mode from any device.">
                             <field name="attendance_kiosk_url" class="o_hr_kiosk_url_media w-100" style="width:100% !important;" widget="CopyClipboardURL"/>
-                            <button name="regenerate_kiosk_key" type="object" string="Generate new URL" class="btn-link" icon="fa-refresh"/>
+                            <button name="regenerate_kiosk_key" type="object" string="Generate new URL" class="btn-link" icon="refresh"/>
                         </setting>
                     </block>
                     <block title="Extra Hours" name="overtime_settings">
diff --git a/addons/hr_calendar/static/src/calendar/common/calendar_common_renderer.scss b/addons/hr_calendar/static/src/calendar/common/calendar_common_renderer.scss
index 9c3191df5d52e8..d760d518351a21 100644
--- a/addons/hr_calendar/static/src/calendar/common/calendar_common_renderer.scss
+++ b/addons/hr_calendar/static/src/calendar/common/calendar_common_renderer.scss
@@ -9,12 +9,12 @@
 
 .o_homework_multi {
     text-transform: none;
-    .o_homeworking_content .fa {
+    .o_homeworking_content .oi {
         height: var(--o-homework-icon-size, 20px);
         aspect-ratio: 1;
         font-size: var(--o-homework-icon-size, 1rem);
 
-        &.fa-building:before {
+        &[data-icon="business"]:before {
             transform: scale(.8);
         }
     }
diff --git a/addons/hr_calendar/static/src/calendar/common/popover/calendar_common_popover.xml b/addons/hr_calendar/static/src/calendar/common/popover/calendar_common_popover.xml
index 0525fa5f5361ae..b822032bf182c1 100644
--- a/addons/hr_calendar/static/src/calendar/common/popover/calendar_common_popover.xml
+++ b/addons/hr_calendar/static/src/calendar/common/popover/calendar_common_popover.xml
@@ -42,7 +42,7 @@
         <t t-if="this.isWorkLocationEvent()">
                 <ul class="list-group list-group-flush">
                     <div class="list-group-item">
-                        <i class="fa fa-fw fa-calendar me-2" t-att-class="`o_worklocation_color_${this.props.record.colorIndex}`"/>
+                        <i class="oi oi-fw me-2" data-icon="calendar_today" t-att-class="`o_worklocation_color_${this.props.record.colorIndex}`"/>
                         <t t-if="this.props.record.start.ts != this.props.record.end.ts">
                             <t t-out="this.props.record.start.toFormat('d MMMM')" t-options="{'widget': 'date'}"/>
                         </t>
@@ -51,7 +51,7 @@
                         </t>
                     </div>
                     <div class="list-group-item">
-                        <i class="fa fa-fw fa-user me-2" t-att-class="`o_worklocation_color_${this.props.record.colorIndex}`"/>
+                        <i class="oi oi-fw oi-filled me-2" data-icon="person" t-att-class="`o_worklocation_color_${this.props.record.colorIndex}`"/>
                         <Field name="'employee_name'" record="slot.record" readonly="true"/>
                     </div>
                 </ul>
diff --git a/addons/hr_calendar/static/tests/calendar_homeworking.test.js b/addons/hr_calendar/static/tests/calendar_homeworking.test.js
index 60c29ddef893ec..3a9ed6be36ecf4 100644
--- a/addons/hr_calendar/static/tests/calendar_homeworking.test.js
+++ b/addons/hr_calendar/static/tests/calendar_homeworking.test.js
@@ -177,7 +177,7 @@ function mountHomeWorkingView() {
         arch: `
             <calendar js_class="attendee_calendar" event_open_popup="1" date_start="start" date_stop="stop" all_day="allday">
                 <field name="partner_ids" options="{'block': True, 'icon': 'fa fa-users'}" filters="1" write_model="calendar.filter" write_field="partner_id" filter_field="partner_checked" avatar_field="avatar_128"/>
-                <field name="partner_id" string="Organizer" options="{'icon': 'fa fa-user-o'}"/>
+                <field name="partner_id" string="Organizer" options="{'icon': 'person'}"/>
                 <field name="user_id"/>
                 <field name="start"/>
                 <field name="stop"/>
diff --git a/addons/hr_calendar/wizard/homework_location_wizard.xml b/addons/hr_calendar/wizard/homework_location_wizard.xml
index faedd8b28db681..9421f18ed7a391 100644
--- a/addons/hr_calendar/wizard/homework_location_wizard.xml
+++ b/addons/hr_calendar/wizard/homework_location_wizard.xml
@@ -35,13 +35,15 @@
                         <button title="Delete homeworking location"
                             name="delete_employee_location"
                             type="object"
-                            class="btn btn-secondary fa fa-trash"
+                            class="btn btn-secondary oi oi-filled"
+                            data-icon="delete"
                             confirm="Are you sure you want to delete this location?"
                             invisible="not context.get('default_work_location_id') or context.get('default_weekly')"/>
                         <button title="Delete homeworking location"
                             name="delete_employee_location"
                             type="object"
-                            class="btn btn-secondary fa fa-trash"
+                            class="btn btn-secondary oi oi-filled"
+                            data-icon="delete"
                             confirm="Are you sure you want to delete this recurring location?"
                             invisible="not context.get('default_weekly')"/>
                     </div>
diff --git a/addons/hr_expense/data/mail_activity_type_data.xml b/addons/hr_expense/data/mail_activity_type_data.xml
index 214cf55a2eedac..cadcf3ba7434f8 100644
--- a/addons/hr_expense/data/mail_activity_type_data.xml
+++ b/addons/hr_expense/data/mail_activity_type_data.xml
@@ -4,7 +4,7 @@
         <record id="mail_act_expense_approval" model="mail.activity.type">
             <field name="name">Expense Approval</field>
             <field name="summary">Expense Approval</field>
-            <field name="icon">fa-dollar</field>
+            <field name="icon">attach_money</field>
             <field name="res_model">hr.expense</field>
         </record>
     </data>
diff --git a/addons/hr_expense/static/src/components/expense_dashboard.xml b/addons/hr_expense/static/src/components/expense_dashboard.xml
index 2e26f34153f7aa..39187e395f371a 100644
--- a/addons/hr_expense/static/src/components/expense_dashboard.xml
+++ b/addons/hr_expense/static/src/components/expense_dashboard.xml
@@ -11,10 +11,10 @@
                     <b class="mx-2" t-out="data['description']"/>
                 </div>
                 <div t-if="name !== 'approved'" t-attf-class="o_expense_card o_arrow_button flex-grow-1 d-flex flex-column p-3 border-bottom text-center">
-                    <i class="fa fa-angle-right fa-3x"/>
+                    <i class="oi oi-3x" data-icon="keyboard_arrow_right"/>
                 </div>
             </t>
-            <div class="fa fa-question-circle-o flex-grow-0.5 d-flex flex-column p-3 border-bottom text-center" t-if="this.env.debug" data-tooltip="Numbers computed from your personal expenses."/>
+            <div class="oi flex-grow-0.5 d-flex flex-column p-3 border-bottom text-center" data-icon="help_outline" t-if="this.env.debug" data-tooltip="Numbers computed from your personal expenses."/>
         </div>
     </t>
 </templates>
diff --git a/addons/hr_expense/static/src/components/nb_attachment.xml b/addons/hr_expense/static/src/components/nb_attachment.xml
index 9633287e3ec911..58b61dbc7d41f7 100644
--- a/addons/hr_expense/static/src/components/nb_attachment.xml
+++ b/addons/hr_expense/static/src/components/nb_attachment.xml
@@ -2,7 +2,7 @@
 <templates>
     <t t-if="this.nb_attachment > 0" t-name="hr_expense.AttachmentNumber" >
         <div>
-            <span class="fa fa-paperclip pe-1 align-middle"/>
+            <span class="oi pe-1 align-middle" data-icon="attach_file"/>
             <sup><t class="text-center" t-out="this.nb_attachment"/></sup>
         </div>
     </t>
diff --git a/addons/hr_expense/static/src/views/kanban.xml b/addons/hr_expense/static/src/views/kanban.xml
index 1fae4f82a09851..d9770823eff56b 100644
--- a/addons/hr_expense/static/src/views/kanban.xml
+++ b/addons/hr_expense/static/src/views/kanban.xml
@@ -6,7 +6,7 @@
         </xpath>
         <xpath expr="//div[hasclass('o_kanban_renderer')]" position="before">
             <div t-if="this.dragState.showDragZone" class="o_dropzone">
-                <i class="fa fa-upload fa-10x"></i>
+                <i class="oi oi-10x" data-icon="upload"></i>
             </div>
         </xpath>
     </t>
diff --git a/addons/hr_expense/static/src/views/list.xml b/addons/hr_expense/static/src/views/list.xml
index 11e1397cd4cfc4..568c8afd49c2c7 100644
--- a/addons/hr_expense/static/src/views/list.xml
+++ b/addons/hr_expense/static/src/views/list.xml
@@ -32,7 +32,7 @@
     <t t-name="hr_expense.ListRenderer" t-inherit="web.ListRenderer" t-inherit-mode="primary">
         <xpath expr="//div[hasclass('o_list_renderer')]" position="before">
             <div t-if="this.dragState.showDragZone" class="o_dropzone">
-                <i class="fa fa-upload fa-10x"></i>
+                <i class="oi oi-10x" data-icon="upload"></i>
             </div>
         </xpath>
         <xpath expr="//div[hasclass('o_list_renderer')]" position="attributes">
diff --git a/addons/hr_expense/views/account_move_views.xml b/addons/hr_expense/views/account_move_views.xml
index 8c4c43e1218316..6bce87641e6552 100644
--- a/addons/hr_expense/views/account_move_views.xml
+++ b/addons/hr_expense/views/account_move_views.xml
@@ -9,7 +9,7 @@
                 <xpath expr="//div[@name='button_box']" position="inside">
                     <button name="action_open_expense"
                             class="oe_stat_button"
-                            icon="fa-file-text-o"
+                            icon="article"
                             type="object"
                             invisible="nb_expenses == 0">
                         <field string="Expenses" name="nb_expenses" widget="statinfo"/>
diff --git a/addons/hr_expense/views/account_payment_views.xml b/addons/hr_expense/views/account_payment_views.xml
index cc57ad634b7d4b..51dc7ff8b1aa7c 100644
--- a/addons/hr_expense/views/account_payment_views.xml
+++ b/addons/hr_expense/views/account_payment_views.xml
@@ -10,7 +10,7 @@
                     <field name="expense_ids" invisible="1"/>
                     <button name="action_open_expense"
                             class="oe_stat_button"
-                            icon="fa-file-text-o"
+                            icon="article"
                             type="object"
                             invisible="not expense_ids">
                             <div class="o_stat_info">
diff --git a/addons/hr_expense/views/hr_expense_views.xml b/addons/hr_expense/views/hr_expense_views.xml
index d0aeba7409c31e..49e6a5ef8c29c8 100644
--- a/addons/hr_expense/views/hr_expense_views.xml
+++ b/addons/hr_expense/views/hr_expense_views.xml
@@ -150,13 +150,13 @@
                         <button name="action_open_split_expense"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-file-text-o"
+                            icon="article"
                             invisible="not split_expense_origin_id"
                             string="Split"
                         />
                         <button name="action_open_account_move"
                             class="oe_stat_button"
-                            icon="fa-bars"
+                            icon="menu"
                             type="object"
                             invisible="not account_move_id"
                             groups="account.group_account_invoice">
@@ -523,9 +523,9 @@
             <field name="arch" type="xml">
                 <xpath expr="//group" position='after'>
                     <searchpanel>
-                        <field name="state" expand="1" select="multi" icon="fa-check-square-o" enable_counters="1"/>
-                        <field name="employee_id"  limit="20" hierarchize="0" select="one" icon="fa-users"/>
-                        <field name="company_id" expand="1" icon="fa-building" groups="base.group_multi_company"/>
+                        <field name="state" expand="1" select="multi" icon="check_box" enable_counters="1"/>
+                        <field name="employee_id"  limit="20" hierarchize="0" select="one" icon="group" icon_class="oi-filled"/>
+                        <field name="company_id" expand="1" icon="business" icon_class="oi-filled" groups="base.group_multi_company"/>
                     </searchpanel>
                 </xpath>
             </field>
diff --git a/addons/hr_expense/views/res_config_settings_views.xml b/addons/hr_expense/views/res_config_settings_views.xml
index 37c9a614d20da8..dd01b065cfe081 100644
--- a/addons/hr_expense/views/res_config_settings_views.xml
+++ b/addons/hr_expense/views/res_config_settings_views.xml
@@ -25,7 +25,7 @@
                                 </div>
                                 <div class="content-group" invisible="not hr_expense_use_mailgateway or alias_domain_id">
                                     <div class="mt16">
-                                        <a href="/odoo/settings#email-alias-setting" class="btn-link" role="button"><i class="oi oi-arrow-right"></i> Setup your alias domain</a>
+                                        <a href="/odoo/settings#email-alias-setting" class="btn-link" role="button"><i class="oi" data-icon="east"></i> Setup your alias domain</a>
                                     </div>
                                 </div>
                             </setting>
diff --git a/addons/hr_fleet/views/fleet_vehicle_cost_views.xml b/addons/hr_fleet/views/fleet_vehicle_cost_views.xml
index dac620d1c35895..2bce549b13ad11 100644
--- a/addons/hr_fleet/views/fleet_vehicle_cost_views.xml
+++ b/addons/hr_fleet/views/fleet_vehicle_cost_views.xml
@@ -10,7 +10,7 @@
             </xpath>
             <sheet position="inside">
                 <div class="oe_button_box" name="button_box">
-                    <button name="action_open_employee" type="object" class="oe_stat_button" icon="fa-id-card-o" groups="hr.group_hr_user" invisible="not purchaser_employee_id">
+                    <button name="action_open_employee" type="object" class="oe_stat_button" icon="badge" groups="hr.group_hr_user" invisible="not purchaser_employee_id">
                         <div class="o_field_widget o_stat_info">
                             <span class="o_stat_text">Employee</span>
                             <span class="o_stat_value"><field name="purchaser_employee_id"/></span>
diff --git a/addons/hr_fleet/views/fleet_vehicle_views.xml b/addons/hr_fleet/views/fleet_vehicle_views.xml
index a492270e732aa0..e303bd95d9802e 100644
--- a/addons/hr_fleet/views/fleet_vehicle_views.xml
+++ b/addons/hr_fleet/views/fleet_vehicle_views.xml
@@ -26,7 +26,7 @@
             </field>
             <field name="date_end" position="after">
                 <field name="attachment_number" optional="show" />
-                <button name="action_get_attachment_view" string="Attachments" type="object" icon="fa-paperclip"/>
+                <button name="action_get_attachment_view" string="Attachments" type="object" icon="attach_file"/>
             </field>
         </field>
     </record>
@@ -42,7 +42,7 @@
             <field name="date_end" position="after">
                 <field name="driver_id" string="Current Driver" optional="hide"/>
                 <field name="attachment_number" optional="show" />
-                <button name="action_get_attachment_view" string="Attachments" type="object" icon="fa-paperclip" />
+                <button name="action_get_attachment_view" string="Attachments" type="object" icon="attach_file" />
             </field>
         </field>
     </record>
@@ -59,7 +59,7 @@
                 <field name="future_driver_employee_id" invisible="1"/>
             </xpath>
             <button name="open_assignation_logs" position="before">
-                <button name="action_open_employee" type="object" class="oe_stat_button" icon="fa-id-card-o" groups="hr.group_hr_user" invisible="not driver_employee_id">
+                <button name="action_open_employee" type="object" class="oe_stat_button" icon="badge" groups="hr.group_hr_user" invisible="not driver_employee_id">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value">1</span>
                         <span class="o_stat_text">Employee</span>
diff --git a/addons/hr_fleet/views/hr_employee_views.xml b/addons/hr_fleet/views/hr_employee_views.xml
index 569dbed1c38411..5ed39d728732a3 100644
--- a/addons/hr_fleet/views/hr_employee_views.xml
+++ b/addons/hr_fleet/views/hr_employee_views.xml
@@ -9,7 +9,7 @@
         <field name="arch" type="xml">
             <button name="action_open_versions" position="before">
                 <button name="action_open_employee_cars" type="object"
-                        class="oe_stat_button" icon="fa-car" groups="fleet.fleet_group_user" invisible="not employee_cars_count">
+                        class="oe_stat_button" icon="directions_car" groups="fleet.fleet_group_user" invisible="not employee_cars_count">
                     <field name="employee_cars_count" widget="statinfo" string="Cars History" />
                 </button>
             </button>
@@ -35,7 +35,7 @@
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
                 <button name="action_open_employee_cars" type="object"
-                        class="oe_stat_button" icon="fa-car" groups="fleet.fleet_group_user"
+                        class="oe_stat_button" icon="directions_car" groups="fleet.fleet_group_user"
                         invisible="not employee_cars_count">
                     <field name="employee_cars_count" widget="statinfo" string="Cars History" />
                 </button>
diff --git a/addons/hr_gamification/views/gamification_views.xml b/addons/hr_gamification/views/gamification_views.xml
index c479fd71480816..5f75200fee3935 100644
--- a/addons/hr_gamification/views/gamification_views.xml
+++ b/addons/hr_gamification/views/gamification_views.xml
@@ -7,7 +7,7 @@
             <field name="inherit_id" ref="gamification.badge_form_view"/>
             <field name="arch" type="xml">
                 <div name="button_box" position="inside">
-                    <button class="oe_stat_button" type="object" name="get_granted_employees" invisible="granted_count == 0" icon="fa-user">
+                    <button class="oe_stat_button" type="object" name="get_granted_employees" invisible="granted_count == 0" icon="person" icon_class="oi-filled">
                         <field name="granted_employees_count" string="Granted" widget="statinfo"/>
                     </button>
                 </div>
diff --git a/addons/hr_holidays/data/mail_activity_type_data.xml b/addons/hr_holidays/data/mail_activity_type_data.xml
index 91329dc7f6054d..bf566b69246b76 100644
--- a/addons/hr_holidays/data/mail_activity_type_data.xml
+++ b/addons/hr_holidays/data/mail_activity_type_data.xml
@@ -5,14 +5,14 @@
         <record id="mail_act_leave_approval" model="mail.activity.type">
             <field name="name">Time Off Approval</field>
             <field name="summary">Time Off Approval</field>
-            <field name="icon">fa-sun-o</field>
+            <field name="icon">light_mode</field>
             <field name="res_model">hr.leave</field>
             <field name="delay_count">15</field>
         </record>
         <record id="mail_act_leave_second_approval" model="mail.activity.type">
             <field name="name">Time Off Second Approve</field>
             <field name="summary">Time Off Second Approve</field>
-            <field name="icon">fa-sun-o</field>
+            <field name="icon">light_mode</field>
             <field name="res_model">hr.leave</field>
         </record>
 
@@ -20,14 +20,14 @@
         <record id="mail_act_leave_allocation_approval" model="mail.activity.type">
             <field name="name">Allocation Approval</field>
             <field name="summary">Allocation Approval</field>
-            <field name="icon">fa-sun-o</field>
+            <field name="icon">light_mode</field>
             <field name="res_model">hr.leave.allocation</field>
         </record>
 
         <record id="mail_act_leave_allocation_second_approval" model="mail.activity.type">
             <field name="name">Allocation Second Approval</field>
             <field name="summary">Allocation Second Approval</field>
-            <field name="icon">fa-sun-o</field>
+            <field name="icon">light_mode</field>
             <field name="res_model">hr.leave.allocation</field>
         </record>
     </data>
diff --git a/addons/hr_holidays/static/src/components/accrual_level/accrual_levels.xml b/addons/hr_holidays/static/src/components/accrual_level/accrual_levels.xml
index 12015e084db749..c657a4a07562a3 100644
--- a/addons/hr_holidays/static/src/components/accrual_level/accrual_levels.xml
+++ b/addons/hr_holidays/static/src/components/accrual_level/accrual_levels.xml
@@ -105,7 +105,7 @@
                 </div>
                 <div class="delete d-flex align-self-center">
                     <span class="o_accrual_bg d-flex justify-content-center align-items-center border rounded-circle mx-2" style="width: 30px; height: 30px;" t-on-click="level.onDelete.bind(this)" role="button">
-                        <i class="fa fa-trash"/>
+                        <i class="oi oi-filled" data-icon="delete"/>
                     </span>
                 </div>
             </div>
diff --git a/addons/hr_holidays/static/src/components/hr_presence_status/hr_presence_status.js b/addons/hr_holidays/static/src/components/hr_presence_status/hr_presence_status.js
index 31c8c47d7d9f79..6eac655689b55d 100644
--- a/addons/hr_holidays/static/src/components/hr_presence_status/hr_presence_status.js
+++ b/addons/hr_holidays/static/src/components/hr_presence_status/hr_presence_status.js
@@ -30,15 +30,15 @@ const patchHrPresenceStatus = () => ({
 
     get icon() {
         if (this.value?.includes("holiday")) {
-            return "fa-plane";
+            return "travel";
         } else if (this.location) {
             switch (this.location) {
                 case "home":
-                    return "fa-home";
+                    return "home";
                 case "office":
-                    return "fa-building";
+                    return "business";
                 case "other":
-                    return "fa-map-marker";
+                    return "location_on";
             }
         }
         return super.icon;
diff --git a/addons/hr_holidays/static/src/core/common/im_status_patch.js b/addons/hr_holidays/static/src/core/common/im_status_patch.js
index 5a72a50cb206b9..6d20ef9a250fb1 100644
--- a/addons/hr_holidays/static/src/core/common/im_status_patch.js
+++ b/addons/hr_holidays/static/src/core/common/im_status_patch.js
@@ -5,7 +5,8 @@ imStatusDataRegistry.add(
     "hr-holidays",
     {
         condition: ({ user }) => Boolean(user?.employee_id?.leave_date_to),
-        icon: "fa fa-plane",
+        icon: "travel",
+        icon_class: "",
         title: {
             online: _t("User is on leave and online"),
             away: _t("User is on leave and idle"),
diff --git a/addons/hr_holidays/static/src/core/web/avatar_card/avatar_card_patch.xml b/addons/hr_holidays/static/src/core/web/avatar_card/avatar_card_patch.xml
index acb2b83f2bdce7..517d7a5d59a2b3 100644
--- a/addons/hr_holidays/static/src/core/web/avatar_card/avatar_card_patch.xml
+++ b/addons/hr_holidays/static/src/core/web/avatar_card/avatar_card_patch.xml
@@ -6,9 +6,9 @@
         </xpath>
         <xpath expr="//span[@name='icon'][hasclass('o_employee_presence_status')]" position="inside">
             <!-- Employee is on time off but he is connected -->
-            <i t-if="this.employee?.hr_icon_display === 'presence_holiday_present'" class="fa fa-fw fa-plane text-success me-1" title="Active but on leave" role="img" aria-label="Active but on leave"/>
+            <i t-if="this.employee?.hr_icon_display === 'presence_holiday_present'" class="oi oi-fw text-success me-1" data-icon="travel" title="Active but on leave" role="img" aria-label="Active but on leave"/>
             <!-- Employee is on time off and he is not connected -->
-            <i t-if="this.employee?.hr_icon_display === 'presence_holiday_absent'" class="fa fa-fw fa-plane text-warning me-1" title="On Time Off" role="img" aria-label="On Time Off"/>
+            <i t-if="this.employee?.hr_icon_display === 'presence_holiday_absent'" class="oi oi-fw text-warning me-1" data-icon="travel" title="On Time Off" role="img" aria-label="On Time Off"/>
         </xpath>
     </t>
 </templates>
diff --git a/addons/hr_holidays/static/src/dashboard/time_off_card.xml b/addons/hr_holidays/static/src/dashboard/time_off_card.xml
index 5ace4a1675df63..5e81a9289843f4 100644
--- a/addons/hr_holidays/static/src/dashboard/time_off_card.xml
+++ b/addons/hr_holidays/static/src/dashboard/time_off_card.xml
@@ -24,7 +24,8 @@
                 taken
             </t>
             <span t-if="show_popover"
-                t-att-class="'o_timeoff_info fa' + (this.warning ? ' fa-exclamation-triangle' : ' fa-question-circle-o')"
+                class="o_timeoff_info oi"
+                t-att-data-icon="this.warning ? 'warning' : 'help_outline'"
             />
         </span>
         <span t-if="this.props.requires_allocation and data.closest_allocation_expire !== false" class="text-uppercase o_timeoff_validity">
@@ -73,7 +74,7 @@
             </span>
             <span class="d-inline-block m-0 mb-3"
                 t-if="this.props.closest &amp;&amp; this.props.closest &lt; this.props.left">
-                <i class="fa fa-warning"/> Only <t t-out="this.props.closest"/>
+                <i class="oi" data-icon="warning"/> Only <t t-out="this.props.closest"/>
                 <t t-if="this.props.unit_of_measure == 'hour'"> hours</t>
                 <t t-else=""> days</t>
                 can be used before the allocation expires.
diff --git a/addons/hr_holidays/static/src/leave_stats/leave_stats.xml b/addons/hr_holidays/static/src/leave_stats/leave_stats.xml
index 4e9bc77617cef7..4df897b40c0ed9 100644
--- a/addons/hr_holidays/static/src/leave_stats/leave_stats.xml
+++ b/addons/hr_holidays/static/src/leave_stats/leave_stats.xml
@@ -21,12 +21,12 @@
                     <div t-if="leave.work_entry_type_request_unit == 'hour'" class="d-flex gap-2 col-6 flex-wrap">
                         <span t-out="leave.date_from"/>
                         <span t-out="leave.hour_from" class="fst-italic"/>
-                        <i class="fa fa-long-arrow-right my-1" aria-label="Arrow icon" title="Arrow"/>
+                        <i class="oi my-1" data-icon="east" aria-label="Arrow icon" title="Arrow"/>
                         <span t-out="leave.hour_to" class="fst-italic"/>
                     </div>
                     <div t-else="" class="col-6 d-flex gap-2 flex-wrap">
                         <span t-out="leave.date_from"/>
-                        <i class="fa fa-long-arrow-right my-1" aria-label="Arrow icon" title="Arrow"/>
+                        <i class="oi my-1" data-icon="east" aria-label="Arrow icon" title="Arrow"/>
                         <span t-out="leave.date_to"/>
                     </div>
                     <div class="col-3 flex-wrap">
@@ -59,12 +59,12 @@
                         <div t-if="leave.work_entry_type_request_unit == 'hour'" class="d-flex gap-2 col-6 flex-wrap">
                             <span t-esc="leave.date_from"/>
                             <span t-esc="leave.hour_from" class="fst-italic"/>
-                            <i class="fa fa-long-arrow-right my-1" aria-label="Arrow icon" title="Arrow"/>
+                            <i class="oi my-1" data-icon="east" aria-label="Arrow icon" title="Arrow"/>
                             <span t-esc="leave.hour_to" class="fst-italic"/>
                         </div>
                         <div t-else="" class="col-6 d-flex gap-2 flex-wrap">
                             <span t-esc="leave.date_from"/>
-                            <i class="fa fa-long-arrow-right my-1" aria-label="Arrow icon" title="Arrow"/>
+                            <i class="oi my-1" data-icon="east" aria-label="Arrow icon" title="Arrow"/>
                             <span t-esc="leave.date_to"/>
                         </div>
                         <div class="col-3 flex-wrap">
diff --git a/addons/hr_holidays/static/src/views/calendar/calendar_filter_panel/calendar_mobile_filter_panel.xml b/addons/hr_holidays/static/src/views/calendar/calendar_filter_panel/calendar_mobile_filter_panel.xml
index 22b31eccf5c661..4d50e0ce5d8546 100644
--- a/addons/hr_holidays/static/src/views/calendar/calendar_filter_panel/calendar_mobile_filter_panel.xml
+++ b/addons/hr_holidays/static/src/views/calendar/calendar_filter_panel/calendar_mobile_filter_panel.xml
@@ -4,7 +4,7 @@
         <xpath expr="//i[@name='expand_filter_button']" position="replace">
             <div class="ms-2 w-25 d-flex flex-nowrap align-items-center">
                 Summary
-                <i t-attf-class="oi fa-fw oi-chevron-{{this.caretDirection}} ms-1" name="expand_filter_button"/>
+                <i class="oi oi-fw ms-1" t-attf-data-icon="{{this.caretDirection}}" name="expand_filter_button"/>
             </div>
         </xpath>
     </t>
diff --git a/addons/hr_holidays/static/tests/hr_presence_status.test.js b/addons/hr_holidays/static/tests/hr_presence_status.test.js
index 80636872bcf721..881a6fad9c4439 100644
--- a/addons/hr_holidays/static/tests/hr_presence_status.test.js
+++ b/addons/hr_holidays/static/tests/hr_presence_status.test.js
@@ -29,8 +29,8 @@ test("Show Time Off before Work Location", async () => {
                 <field name="hr_icon_display" widget="hr_presence_status"/>
             </form>`,
     });
-    expect(".o_employee_availability.fa-building").toHaveCount(0);
-    expect(".o_employee_availability.fa-plane").toBeVisible();
-    expect(".o_employee_availability.fa-plane").toHaveAttribute("title", "On leave, back on Jan 6, 2025");
-    expect(".o_employee_availability.fa-plane").toHaveClass("o_icon_employee_absent");
+    expect(".o_employee_availability[data-icon='business']").toHaveCount(0);
+    expect(".o_employee_availability[data-icon='travel']").toBeVisible();
+    expect(".o_employee_availability[data-icon='travel']").toHaveAttribute("title", "On leave, back on Jan 6, 2025");
+    expect(".o_employee_availability[data-icon='travel']").toHaveClass("o_icon_employee_absent");
 });
diff --git a/addons/hr_holidays/static/tests/im_status.test.js b/addons/hr_holidays/static/tests/im_status.test.js
index 8e79400f5055eb..e65587fd8f5427 100644
--- a/addons/hr_holidays/static/tests/im_status.test.js
+++ b/addons/hr_holidays/static/tests/im_status.test.js
@@ -24,18 +24,18 @@ test("change icon on change partner im_status for leave variants", async () => {
     await start();
     await openDiscuss(channelId);
     await contains(
-        ".o-mail-DiscussContent-header .o-mail-ImStatus.fa-plane[title='User is on leave and online']"
+        ".o-mail-DiscussContent-header .o-mail-ImStatus[data-icon='travel'][title='User is on leave and online']"
     );
     sendPresenceUpdate("res.partner", serverState.partnerId, "offline");
     await contains(
-        ".o-mail-DiscussContent-header .o-mail-ImStatus.fa-plane[title='User is on leave']"
+        ".o-mail-DiscussContent-header .o-mail-ImStatus[data-icon='travel'][title='User is on leave']"
     );
     sendPresenceUpdate("res.partner", serverState.partnerId, "away");
     await contains(
-        ".o-mail-DiscussContent-header .o-mail-ImStatus.fa-plane[title='User is on leave and idle']"
+        ".o-mail-DiscussContent-header .o-mail-ImStatus[data-icon='travel'][title='User is on leave and idle']"
     );
     sendPresenceUpdate("res.partner", serverState.partnerId, "online");
     await contains(
-        ".o-mail-DiscussContent-header .o-mail-ImStatus.fa-plane[title='User is on leave and online']"
+        ".o-mail-DiscussContent-header .o-mail-ImStatus[data-icon='travel'][title='User is on leave and online']"
     );
 });
diff --git a/addons/hr_holidays/static/tests/im_status_patch.test.js b/addons/hr_holidays/static/tests/im_status_patch.test.js
index 14982c7b0c6217..b40a2578907597 100644
--- a/addons/hr_holidays/static/tests/im_status_patch.test.js
+++ b/addons/hr_holidays/static/tests/im_status_patch.test.js
@@ -21,7 +21,7 @@ test("on leave & online", async () => {
     await start();
     await openDiscuss(channelId);
     await contains(
-        ".o-mail-DiscussContent-header .o-mail-ImStatus.fa-plane[title='User is on leave and online']"
+        ".o-mail-DiscussContent-header .o-mail-ImStatus[data-icon='travel'][title='User is on leave and online']"
     );
 });
 
@@ -40,7 +40,7 @@ test("on leave & away", async () => {
     await start();
     await openDiscuss(channelId);
     await contains(
-        ".o-mail-DiscussContent-header .o-mail-ImStatus.fa-plane[title='User is on leave and idle']"
+        ".o-mail-DiscussContent-header .o-mail-ImStatus[data-icon='travel'][title='User is on leave and idle']"
     );
 });
 
@@ -59,6 +59,6 @@ test("on leave & offline", async () => {
     await start();
     await openDiscuss(channelId);
     await contains(
-        ".o-mail-DiscussContent-header .o-mail-ImStatus.fa-plane[title='User is on leave']"
+        ".o-mail-DiscussContent-header .o-mail-ImStatus[data-icon='travel'][title='User is on leave']"
     );
 });
diff --git a/addons/hr_holidays/static/tests/thread_icon_patch.test.js b/addons/hr_holidays/static/tests/thread_icon_patch.test.js
index 8795035872f212..190e1df5b3c612 100644
--- a/addons/hr_holidays/static/tests/thread_icon_patch.test.js
+++ b/addons/hr_holidays/static/tests/thread_icon_patch.test.js
@@ -21,7 +21,7 @@ test("thread icon of a chat when correspondent is on leave & online", async () =
     await start();
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarChannel", {
-        contains: [".o-mail-ThreadIcon.fa-plane[title='User is on leave and online']"],
+        contains: [".o-mail-ThreadIcon[data-icon='travel'][title='User is on leave and online']"],
         text: "Demo",
     });
 });
@@ -41,7 +41,7 @@ test("thread icon of a chat when correspondent is on leave & away", async () =>
     await start();
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarChannel", {
-        contains: [".o-mail-ThreadIcon.fa-plane[title='User is on leave and idle']"],
+        contains: [".o-mail-ThreadIcon[data-icon='travel'][title='User is on leave and idle']"],
         text: "Demo",
     });
 });
@@ -61,7 +61,7 @@ test("thread icon of a chat when correspondent is on leave & offline", async ()
     await start();
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarChannel", {
-        contains: [".o-mail-ThreadIcon.fa-plane[title='User is on leave']"],
+        contains: [".o-mail-ThreadIcon[data-icon='travel'][title='User is on leave']"],
         text: "Demo",
     });
 });
diff --git a/addons/hr_holidays/views/hr_leave_accrual_views.xml b/addons/hr_holidays/views/hr_leave_accrual_views.xml
index fedc5058fa94d4..249a2de2da1a2e 100644
--- a/addons/hr_holidays/views/hr_leave_accrual_views.xml
+++ b/addons/hr_holidays/views/hr_leave_accrual_views.xml
@@ -150,7 +150,7 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box" invisible="not id">
                         <button name="action_open_accrual_plan_employees" type="object" class="oe_stat_button"
-                                icon="fa-users" invisible="employees_count == 0" groups="hr.group_hr_user">
+                                icon="group" icon_class="oi-filled" invisible="employees_count == 0" groups="hr.group_hr_user">
                             <field name="employees_count" widget="statinfo"/>
                         </button>
                     </div>
diff --git a/addons/hr_holidays/views/hr_leave_allocation_views.xml b/addons/hr_holidays/views/hr_leave_allocation_views.xml
index 5ee7d2ce32ab32..c75d2f988b6ab7 100644
--- a/addons/hr_holidays/views/hr_leave_allocation_views.xml
+++ b/addons/hr_holidays/views/hr_leave_allocation_views.xml
@@ -85,7 +85,7 @@
                 </group>
                 <searchpanel>
                     <field name="state" string="Status"/>
-                    <field name="department_id" string="Department" icon="fa-users"/>
+                    <field name="department_id" string="Department" icon="group" icon_class="oi-filled"/>
                 </searchpanel>
             </search>
         </field>
@@ -136,7 +136,7 @@
                                 <field name="date_from" nolabel="1"
                                     readonly="state == 'refuse' or (allocation_type == 'accrual' and state != 'confirm')"
                                     invisible="allocation_type == 'regular' and state != 'confirm'"/>
-                                <i class="fa fa-long-arrow-right mx-2" aria-label="Arrow icon" title="Arrow"
+                                <i class="oi mx-2" data-icon="east" aria-label="Arrow icon" title="Arrow"
                                     invisible="allocation_type == 'accrual' or state != 'confirm'"/>
                                 <label class="mx-2" for="date_to" string="Run until"
                                     invisible="allocation_type == 'regular'"/>
@@ -217,8 +217,8 @@
             <field name="date_from" position="attributes">
                 <attribute name="invisible">0</attribute>
             </field>
-            <xpath expr="//i[hasclass('fa-long-arrow-right')]" position="replace">
-                <i class="fa fa-long-arrow-right mx-2" aria-label="Arrow icon" title="Arrow" invisible="allocation_type == 'accrual'"/>
+            <xpath expr="//i[@data-icon='east']" position="replace">
+                <i class="oi oi-fw mx-2" data-icon="east" aria-label="Arrow icon" title="Arrow" invisible="allocation_type == 'accrual'"/>
             </xpath>
             <field name="date_to" position="attributes">
                 <attribute name="invisible">0</attribute>
@@ -297,13 +297,13 @@
                     <button type="object"
                         name="action_approve"
                         string="Approve"
-                        icon="fa-thumbs-up"
+                        icon="thumb_up" icon_class="oi-filled"
                         class="btn btn-outline-success"
                     />
                     <button type="object"
                         name="action_refuse"
                         string="Refuse"
-                        icon="fa-times"
+                        icon="close"
                         class="btn btn-outline-danger"
                     />
                 </header>
@@ -321,13 +321,13 @@
                 <field name="active_employee" column_invisible="True"/>
                 <field name="state" widget="badge" decoration-warning="state in ['confirm', 'validate1']" decoration-success="state == 'validate'" decoration-danger="state == 'refuse'"/>
                 <button string="Approve" name="action_approve" type="object" class="text-success"
-                    icon="fa-thumbs-up"
+                    icon="thumb_up" icon_class="oi-filled"
                     invisible="not can_approve"/>
                 <button string="Validate" name="action_approve" type="object" class="text-success"
-                    icon="fa-check"
+                    icon="check"
                     invisible="not can_validate or can_approve"/>
                 <button string="Refuse" name="action_refuse" type="object" class="text-danger"
-                    icon="fa-times"
+                    icon="close"
                     invisible="not can_refuse"/>
                 <field name="activity_exception_decoration" widget="activity_exception"/>
             </list>
diff --git a/addons/hr_holidays/views/hr_leave_views.xml b/addons/hr_holidays/views/hr_leave_views.xml
index 7b1d1298a2133e..4d099c4ebb9124 100644
--- a/addons/hr_holidays/views/hr_leave_views.xml
+++ b/addons/hr_holidays/views/hr_leave_views.xml
@@ -95,7 +95,7 @@
                 </group>
                 <searchpanel>
                     <field name="state" string="Status"/>
-                    <field name="department_id" string="Department" icon="fa-users"/>
+                    <field name="department_id" string="Department" icon="group" icon_class="oi-filled"/>
                 </searchpanel>
             </search>
         </field>
@@ -300,7 +300,7 @@
                                     Refuse
                                 </button>
                                 <button t-if="record.attachment_is_visible and record.supported_attachment_ids_count.raw_value > 0" name="action_documents" type="object" class="btn btn-link btn-sm ps-0 text-danger">
-                                    <i class="fa fa-paperclip"> <field name="supported_attachment_ids_count" nolabel="1"/></i>
+                                    <i class="oi" data-icon="attach_file"> <field name="supported_attachment_ids_count" nolabel="1"/></i>
                                 </button>
                             </bottom>
                         </div>
@@ -326,7 +326,7 @@
                             </div>
                             <div class="text-muted">
                                 <field name="work_entry_type_id" display="full"/>
-                                <field name="date_from"/> <i class="fa fa-long-arrow-right" title="to" /> <field name="date_to"/>
+                                <field name="date_from"/> <i class="oi" data-icon="east" title="to" /> <field name="date_to"/>
                             </div>
                         </div>
                     </div>
@@ -581,13 +581,13 @@
                     <button type="object"
                         name="action_approve"
                         string="Approve"
-                        icon="fa-thumbs-up"
+                        icon="thumb_up" icon_class="oi-filled"
                         class="btn btn-outline-success"
                     />
                     <button type="object"
                         name="action_refuse"
                         string="Refuse"
-                        icon="fa-times"
+                        icon="close"
                         class="btn btn-outline-danger"
                     />
                 </header>
@@ -603,13 +603,13 @@
                 <field name="user_id" column_invisible="True"/>
                 <field name="message_needaction" column_invisible="True"/>
                 <button string="Approve" name="action_approve" type="object"
-                    icon="fa-thumbs-up"
+                    icon="thumb_up" icon_class="oi-filled"
                     invisible="not can_approve"/>
                 <button string="Validate" name="action_approve" type="object"
-                    icon="fa-check"
+                    icon="check"
                     invisible="not can_validate or can_approve"/>
                 <button string="Refuse" name="action_refuse" type="object"
-                    icon="fa-times"
+                    icon="close"
                     invisible="not can_refuse"/>
                 <field name="company_id" optional="hidden" groups="base.group_multi_company"/>
                 <field name="activity_exception_decoration" widget="activity_exception"/>
diff --git a/addons/hr_holidays/views/hr_views.xml b/addons/hr_holidays/views/hr_views.xml
index 537c930df18a90..0aea114ec9999b 100644
--- a/addons/hr_holidays/views/hr_views.xml
+++ b/addons/hr_holidays/views/hr_views.xml
@@ -127,7 +127,7 @@
                 <button name="action_time_off_dashboard"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-calendar"
+                        icon="calendar_today"
                         invisible="not show_leaves or company_id not in allowed_company_ids"
                         groups="base.group_user"
                         help="Remaining leaves">
@@ -173,7 +173,7 @@
                 <button name="action_open_time_off_calendar"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-calendar"
+                        icon="calendar_today"
                         invisible="show_leaves"
                         groups="base.group_user"
                         help="Remaining leaves">
@@ -190,7 +190,7 @@
                 <button name="%(hr_leave_action_new_request)d"
                         type="action"
                         class="oe_stat_button"
-                        icon="fa-calendar"
+                        icon="calendar_today"
                         invisible="not is_user or not show_leaves"
                         groups="base.group_user"
                         help="Remaining leaves">
diff --git a/addons/hr_holidays/views/hr_work_entry_type_views.xml b/addons/hr_holidays/views/hr_work_entry_type_views.xml
index b0e3fe130105f4..681fdecf84e47b 100644
--- a/addons/hr_holidays/views/hr_work_entry_type_views.xml
+++ b/addons/hr_holidays/views/hr_work_entry_type_views.xml
@@ -24,7 +24,8 @@
                 <button class="oe_stat_button"
                         type="object"
                         name="action_see_days_allocated"
-                        icon="fa-calendar"
+                        icon="calendar_today"
+                        icon_class="oi-filled"
                         invisible="not requires_allocation or not id"
                         help="Count of allocations for this time off type (approved or waiting for approbation) with a validity period starting this year.">
                     <div class="o_stat_info">
@@ -35,7 +36,8 @@
                 <button class="oe_stat_button"
                         type="object"
                         name="action_see_group_leaves"
-                        icon="fa-calendar"
+                        icon="calendar_today"
+                        icon_class="oi-filled"
                         invisible="not id"
                         help="Count of time off requests for this time off type (approved or waiting for approbation) with a start date in the current year.">
                     <div class="o_stat_info">
diff --git a/addons/hr_holidays/views/resource_views.xml b/addons/hr_holidays/views/resource_views.xml
index 5488327c7e5b1c..b4313292800f33 100644
--- a/addons/hr_holidays/views/resource_views.xml
+++ b/addons/hr_holidays/views/resource_views.xml
@@ -69,7 +69,7 @@
         <field name="arch" type="xml">
             <xpath expr="//button[@name='%(resource.resource_calendar_leaves_action_from_calendar)d']" position="before">
                 <button name="%(resource_calendar_global_leaves_action_from_calendar)d" type="action"
-                                icon="fa-sun-o" class="oe_stat_button">
+                                icon="light_mode" class="oe_stat_button">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_text">
                             <field name="associated_leaves_count" string="Public Holidays" widget="statinfo"/>
diff --git a/addons/hr_holidays/wizard/hr_leave_allocation_generate_multi_wizard_views.xml b/addons/hr_holidays/wizard/hr_leave_allocation_generate_multi_wizard_views.xml
index 2d497fd470415b..f2dabd2eb5a880 100644
--- a/addons/hr_holidays/wizard/hr_leave_allocation_generate_multi_wizard_views.xml
+++ b/addons/hr_holidays/wizard/hr_leave_allocation_generate_multi_wizard_views.xml
@@ -13,7 +13,7 @@
                         </div>
                         <div class="o_row" name="validity">
                             <field name="date_from" nolabel="1"/>
-                            <i class="fa fa-long-arrow-right mx-2" aria-label="Arrow icon" title="Arrow" invisible="allocation_type == 'accrual'"/>
+                            <i class="oi mx-2" data-icon="east" aria-label="Arrow icon" title="Arrow" invisible="allocation_type == 'accrual'"/>
                             <label class="mx-2" for="date_to" string="Run until" invisible="allocation_type == 'regular'"/>
                             <field name="date_to" nolabel="1" placeholder="No Limit"/>
                             <div id="no_limit_label" class="oe_read_only" invisible="date_to">No limit</div>
diff --git a/addons/hr_homeworking/static/src/components/avatar_card_resource/avatar_card_resource_popover.xml b/addons/hr_homeworking/static/src/components/avatar_card_resource/avatar_card_resource_popover.xml
new file mode 100644
index 00000000000000..dc1bc526368270
--- /dev/null
+++ b/addons/hr_homeworking/static/src/components/avatar_card_resource/avatar_card_resource_popover.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-inherit="resource_mail.AvatarCardResourcePopover" t-inherit-mode="extension">
+        <xpath expr="//span[@name='icon'][hasclass('o_employee_presence_status')]" position="inside">
+            <i t-if="employee?.hr_icon_display === 'presence_home'" class="oi oi-fw text-success me-1" data-icon="home" title="At Home - Present" role="img" aria-label="At Home"/>
+            <i t-if="employee?.hr_icon_display === 'presence_office'" class="oi oi-fw oi-filled text-success me-1" data-icon="business" title="At Office - Present" role="img" aria-label="At Office"/>
+            <i t-if="employee?.hr_icon_display === 'presence_other'" class="oi oi-fw text-success me-1" data-icon="location_on" title="Present" role="img" aria-label="At Other"/>
+        </xpath>
+    </t>
+</templates>
diff --git a/addons/hr_homeworking/static/tests/hr_presence_status.test.js b/addons/hr_homeworking/static/tests/hr_presence_status.test.js
new file mode 100644
index 00000000000000..a047a5bb7a53e7
--- /dev/null
+++ b/addons/hr_homeworking/static/tests/hr_presence_status.test.js
@@ -0,0 +1,74 @@
+import { describe, test, expect } from "@odoo/hoot";
+import {
+    mountView,
+    models,
+    defineModels,
+} from "@web/../tests/web_test_helpers";
+import { defineMailModels } from "@mail/../tests/mail_test_helpers";
+describe.current.tags("desktop");
+
+class HrEmployee extends models.ServerModel {
+    _name = "hr.employee";
+}
+defineMailModels();
+defineModels([HrEmployee]);
+
+test("Office Location (online)", async () => {
+    expect.assertions(5);
+    HrEmployee._records = [
+        {
+            id: 1,
+            name: "Employee test",
+            work_location_name: "Office 1",
+            work_location_type: "office",
+            show_hr_icon_display: true,
+            hr_icon_display: "presence_office",
+            hr_presence_state: "present",
+        },
+    ];
+    await mountView({
+        resModel: "hr.employee",
+        type: "form",
+        resId: 1,
+        arch: `
+            <form>
+                <field name="hr_icon_display" widget="hr_presence_status"/>
+            </form>`,
+    });
+    expect("small[data-icon='business']").toHaveCount(1);
+    expect("small[data-icon='home']").toHaveCount(0);
+    expect("small[data-icon='location_on']").toHaveCount(0);
+    expect("small").toHaveClass("text-success"); // color == text-success
+    expect("small").toHaveAttribute("data-icon","business");
+    expect("small[data-icon='business'][title='Office 1']").toHaveCount(1);
+});
+
+test("Home Location (away)", async () => {
+    expect.assertions(5);
+    HrEmployee._records = [
+        {
+            id: 1,
+            name: "Employee test",
+            work_location_name: "Home",
+            work_location_type: "home",
+            show_hr_icon_display: true,
+            hr_icon_display: "presence_home",
+            hr_presence_state: "absent",
+        },
+    ];
+    await mountView({
+        resModel: "hr.employee",
+        type: "form",
+        resId: 1,
+        arch: `
+            <form>
+                <field name="hr_icon_display" widget="hr_presence_status"/>
+            </form>`,
+    });
+    expect("small[data-icon='home']").toHaveCount(1);
+    expect("small[data-icon='business']").toHaveCount(0);
+    expect("small[data-icon='location_on']").toHaveCount(0);
+    expect("small").toHaveClass("o_icon_employee_absent"); // color == text-warning
+    expect("small").toHaveAttribute("data-icon","home");
+    expect("small[data-icon='home'][title='Home']").toHaveCount(1);
+});
diff --git a/addons/hr_homeworking_calendar/static/src/calendar/common/calendar_common_renderer.js b/addons/hr_homeworking_calendar/static/src/calendar/common/calendar_common_renderer.js
new file mode 100644
index 00000000000000..eecafddd0e2956
--- /dev/null
+++ b/addons/hr_homeworking_calendar/static/src/calendar/common/calendar_common_renderer.js
@@ -0,0 +1,147 @@
+import { AttendeeCalendarCommonRenderer } from "@calendar/views/attendee_calendar/common/attendee_calendar_common_renderer";
+import { AttendeeCalendarRenderer } from "@calendar/views/attendee_calendar/attendee_calendar_renderer";
+import { user } from "@web/core/user";
+import { patch } from "@web/core/utils/patch";
+import { renderToString } from "@web/core/utils/render";
+import { onPatched } from "@odoo/owl";
+
+const { DateTime } = luxon;
+
+patch(AttendeeCalendarCommonRenderer.prototype, {
+    setup() {
+        super.setup()
+
+        onPatched(() => {
+            // Force to rerender the FC.
+            // As it doesn't redraw the header when the event's data changes
+            this.fc.api.render();
+        });
+    },
+    get options(){
+        return {
+            ...super.options,
+            eventOrder: function(event1, event2){
+                if (event1.extendedProps.worklocation){
+                    return -1;
+                } else {
+                    if(event2.extendedProps.worklocation){
+                        return 1;
+                    } else {
+                        return event1.start < event2.start ? -1 : 1;
+                    }
+                }
+            },
+            dayCellDidMount: this.onDayCellDidMount,
+            dayHeaderDidMount: this.onDayHeaderDidMount,
+            dayHeaderWillUnmount: this.onDayHeaderWillUnmount,
+        };
+    },
+    handleWorkLocationClick(target, date) {
+        let worklocations = this.props.model.worklocations[date.toISODate()];
+        const worklocationSet = worklocations && Object.keys(worklocations).length > 0;
+        const actionElement = target.closest('.wl_action');
+        if (!actionElement) {
+            return;
+        }
+        const { location, id, create } = actionElement.dataset;
+        if (worklocationSet && !create) {
+            if (!worklocations.id) {
+                worklocations = worklocations[location] && worklocations[location].find(wl => wl.id == id);
+            }
+            if (worklocations) {
+                return this.openPopover(target, worklocations);
+            }
+        }
+        return this.props.openWorkLocationWizard(date);
+    },
+    onDayHeaderDidMount(info) {
+        if (this.props.model.scale === 'week' || this.props.model.scale === 'day') {
+            const date = DateTime.fromJSDate(info.date);
+            const handler = (event) => {
+                if (event.target.closest(".o_worklocation_btn")) {
+                    this.handleWorkLocationClick(event.target, date);
+                }
+            };
+            this.customListeners = {
+                ...this.customListeners,
+                [date]: handler,
+            };
+            info.el.addEventListener("click", handler);
+        }
+    },
+    onDayHeaderWillUnmount(info) {
+        if (this.props.model.scale === 'week' || this.props.model.scale === 'day') {
+            const date = DateTime.fromJSDate(info.date);
+            const customListener = {...this.customListeners}[date];
+            if (customListener) {
+                info.el.removeEventListener("click", customListener);
+                delete this.customListeners[date];
+            }
+        }
+    },
+    onDayCellDidMount(info){
+        if (this.props.model.scale === 'month'){
+            const box = info.el.querySelector(`.fc-daygrid-day-top`);
+            if (!box)
+                return;
+            const content = renderToString(this.constructor.ButtonWorklocationTemplate, this.headerTemplateProps(info.date));
+            box.insertAdjacentHTML("beforeend", content);
+        }
+    },
+    onDateClick(info){
+        if (info.jsEvent && info.jsEvent.target.closest(".o_worklocation_btn")) {
+            const date = DateTime.fromJSDate(info.date);
+            this.handleWorkLocationClick(info.jsEvent.target, date);
+        } else {
+            super.onDateClick(...arguments)
+        }
+    },
+    headerTemplateProps(date) {
+        if (this.props.model.scale === "month") {
+            return super.headerTemplateProps(date);
+        }
+        const parsedDate = DateTime.fromJSDate(date).toISODate();
+        const multiCalendar = this.props.model.multiCalendar;
+        const showLine = ["week", "month"].includes(this.props.model.scale);
+        let worklocation = this.props.model.worklocations[parsedDate];
+        const workLocationSetForCurrentUser =
+            multiCalendar && worklocation ?
+            Object.keys(worklocation).some(key => worklocation[key].some(wlItem => wlItem.userId === user.userId)
+            ) : worklocation?.userId === user.userId;
+
+        let displayedWorkLocation = worklocation ? (JSON.parse(JSON.stringify(worklocation))) : {};
+        // do not display the work locations of the current user if the user filter is not active
+        if (multiCalendar && !this.props.model.data.userFilterActive) {
+            for (let wl in worklocation){
+                displayedWorkLocation[wl] = worklocation[wl].filter(wlItem => wlItem.userId !== user.userId);
+            }
+            displayedWorkLocation = Object.fromEntries(Object.entries(displayedWorkLocation).filter(([_, wlItems]) => wlItems.length !== 0));
+        }
+
+        return {
+            ...super.headerTemplateProps(date),
+            worklocation : displayedWorkLocation,
+            workLocationSetForCurrentUser,
+            multiCalendar,
+            showLine,
+            iconMap: {
+                "office": "business",
+                "home": "home",
+            },
+        }
+    }
+});
+
+
+AttendeeCalendarRenderer.props = {
+    ...AttendeeCalendarRenderer.props,
+    openWorkLocationWizard: { type: Function, optional: true },
+}
+AttendeeCalendarCommonRenderer.props = {
+    ...AttendeeCalendarCommonRenderer.props,
+    openWorkLocationWizard: { type: Function, optional: true }
+};
+
+AttendeeCalendarCommonRenderer.WorklocationTemplate = "hr_homeworking_calendar.CalendarCommonRenderer.worklocation";
+AttendeeCalendarCommonRenderer.ButtonWorklocationTemplate = "hr_homeworking_calendar.CalendarCommonRenderer.buttonWorklocation";
+AttendeeCalendarCommonRenderer.headerTemplate = "hr_homeworking_calendar.CalendarCommonRendererHeader";
diff --git a/addons/hr_homeworking_calendar/static/src/calendar/common/calendar_common_renderer.xml b/addons/hr_homeworking_calendar/static/src/calendar/common/calendar_common_renderer.xml
new file mode 100644
index 00000000000000..0fb8265c520920
--- /dev/null
+++ b/addons/hr_homeworking_calendar/static/src/calendar/common/calendar_common_renderer.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<templates>
+    <t t-name="hr_homeworking_calendar.CalendarCommonRendererHeader" t-inherit="web.CalendarCommonRendererHeader" t-inherit-mode="primary">
+        <xpath expr="//span[hasclass('o_cw_day_number')]" position="after">
+            <t t-if="scale != 'month'" t-call="hr_homeworking_calendar.CalendarCommonRenderer.buttonWorklocation"/>
+        </xpath>
+    </t>
+
+    <t t-name="hr_homeworking_calendar.CalendarCommonRenderer.buttonWorklocation">
+        <t t-if="multiCalendar">
+            <t t-call="hr_homeworking_calendar.MultiCalendarButtonWorkLocation"/>
+        </t>
+        <t t-else="">
+            <t t-call="hr_homeworking_calendar.SingleCalendarButtonWorkLocation"/>
+        </t>
+    </t>
+
+    <div t-name="hr_homeworking_calendar.MultiCalendarButtonWorkLocation" class="o_worklocation_btn w-100 d-flex align-items-center">
+        <div class="o_homework_multi d-flex gap-1 ms-1">
+            <t t-foreach="Object.keys(worklocation)" t-as="location" t-key="location">
+                <t t-foreach="worklocation[location]" t-as="wl" t-key="wl.id">
+                    <div class="o_homeworking_content wl_action" t-att-data-location="location" t-att-data-id="wl.id" t-att-data-employee="wl.employeeId">
+                        <i t-attf-class="o_homework_content d-flex align-items-center justify-content-center flex-wrap border border-1 rounded-circle me-0 oi wl_color_{{wl.colorIndex}}" t-att-class="{'oi-filled': wl.icon === 'office'}" t-attf-data-icon="{{iconMap[wl.icon] || 'location_on'}}"/>
+                    </div>
+                </t>
+                <span class="fw-bolder" t-esc="worklocation[location][0].title"/>
+            </t>
+        </div>
+        <button t-if="!workLocationSetForCurrentUser" class="o_worklocation_text bg-info bg-opacity-25 border-0 rounded-pill px-lg-2 py-0 text-nowrap opacity-0 opacity-100-hover wl_action" data-create="1">
+            <i class="add_wl oi me-lg-1" data-icon="location_on" aria-hidden="true"></i>
+        </button>
+    </div>
+
+    <div t-name="hr_homeworking_calendar.SingleCalendarButtonWorkLocation" class="o_worklocation_btn w-100 d-flex align-items-center">
+        <div t-if="workLocationSetForCurrentUser" class="w-100 d-flex align-items-center wl_action o_homework_single">
+            <t t-if="worklocation.display">
+                <button t-attf-class='o_worklocation_text border-0 rounded-pill px-lg-2 py-0 text-nowrap wl_color_{{worklocation.colorIndex}}'>
+                    <i class="oi me-lg-1" t-att-class="{'oi-filled': iconMap[worklocation.icon] === 'office'}" t-attf-data-icon="{{iconMap[worklocation.icon] || 'location_on'}} me-lg-1" aria-hidden="true"></i>
+                    <span class="d-none d-lg-inline fw-bold" t-esc="worklocation.title"/>
+                </button>
+                <button t-if="showLine" t-attf-class="o_worklocation_line d-lg-block w-100 border-0 p-0 wl_color_{{worklocation.colorIndex}}"/>
+            </t>
+            <t t-else="">
+                <button t-if="showLine" t-attf-class="o_worklocation_line d-lg-block w-100 border-0 p-0 wl_color_{{worklocation.colorIndex}}"/>
+            </t>
+        </div>
+        <div t-else="" class="w-100 d-flex align-items-center opacity-0 opacity-100-hover wl_action" data-create="1">
+            <button t-if="!workLocationSetForCurrentUser" class="o_worklocation_text bg-info bg-opacity-25 border-0 rounded-pill px-lg-2 py-0 text-nowrap">
+                <i class="oi me-1" data-icon="location_on" aria-hidden="true"></i>
+                <span class="d-lg-inline fw-bold">Set<span class="location_xs_hide"> Location</span></span>
+            </button>
+            <button t-if="showLine" class="o_worklocation_line d-lg-block w-100 bg-info bg-opacity-25 border-0 p-0"/>
+        </div>
+    </div>
+</templates>
diff --git a/addons/hr_homeworking_calendar/static/src/calendar/common/popover/calendar_common_popover.xml b/addons/hr_homeworking_calendar/static/src/calendar/common/popover/calendar_common_popover.xml
new file mode 100644
index 00000000000000..c6db95e1e52127
--- /dev/null
+++ b/addons/hr_homeworking_calendar/static/src/calendar/common/popover/calendar_common_popover.xml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="homework.AttendeeCalendarCommonPopover">
+        <t t-if="isWorkLocationEvent()">
+        <Record resModel="'hr.employee.location'" fieldNames="fieldNames" fields="fields" activeFields="fields" values="values" mode="'readonly'" t-slot-scope="slot">
+            <Dialog t-if="env.isSmall" title="props.record.title" contentClass="'o_calendar_color_'+ props.record.colorIndex">
+                <t t-call="{{ constructor.subTemplates.body }}"/>
+                <t t-set-slot="footer">
+                    <t t-call="calendar.AttendeeCalendarCommonPopover.footer"/>
+                </t>
+            </Dialog>
+            <div t-else="" class="card-header d-flex justify-content-between py-2 pe-2">
+                <span class="popover-header border-0">
+                    <t t-if="slot.record.data.work_location_type === 'office'">
+                        <i class="oi oi-fw oi-filled me-2" data-icon="business" role="img" t-att-class="`wl_color_${props.record.colorIndex}`"/>
+                    </t>
+                    <t t-elif="slot.record.data.work_location_type === 'home'">
+                        <i class="oi oi-fw me-2" data-icon="home" role="img" />
+                    </t>
+                    <t t-else="">
+                    <i class="oi oi-fw me-2" data-icon="location_on" t-att-class="`wl_color_${props.record.colorIndex}`" role="img"/>
+                    </t>
+                    <t t-esc="props.record.title"/>
+                </span>
+                <span class="o_cw_popover_close ms-4 mt-2 me-2" t-on-click.stop="() => props.close()">
+                    <i class="fc-close fc-icon fc-icon-x" />
+                </span>
+            </div>
+            <div class="o_cw_body">
+                <t t-call="{{ constructor.subTemplates.body }}" />
+                <div t-if="hasFooter" class="card-footer border-top d-flex gap-1">
+                    <t t-call="{{ constructor.subTemplates.footer }}" />
+                </div>
+            </div>
+        </Record>
+        </t>
+        <t t-else="">
+            <t t-call="web.CalendarCommonPopover" />
+        </t>
+    </t>
+    <t t-name="homework.AttendeeCalendarCommonPopover.body">
+        <t t-if="isWorkLocationEvent()">
+                <ul class="list-group list-group-flush">
+                    <div class="list-group-item">
+                        <i class="oi oi-fw oi-filled me-2" data-icon="calendar_today" t-att-class="`wl_color_${props.record.colorIndex}`"/>
+                        <t t-if="props.record.start.ts != props.record.end.ts">
+                            <t t-esc="props.record.start.toFormat('d MMMM')" t-options="{'widget': 'date'}"/>
+                        </t>
+                        <t t-else="">
+                            <t t-esc="props.record.start.toFormat('d MMMM yyyy')" t-options="{'widget': 'date'}"/>
+                        </t>
+                    </div>
+                    <div class="list-group-item">
+                        <i class="oi oi-fw oi-filled me-2" data-icon="person" t-att-class="`wl_color_${props.record.colorIndex}`"/>
+                        <Field name="'employee_name'" record="slot.record" readonly="true"/>
+                    </div>
+                </ul>
+        </t>
+        <t t-else="">
+            <t t-call="calendar.AttendeeCalendarCommonPopover.body" />
+        </t>
+    </t>
+
+    <t t-name="homework.AttendeeCalendarCommonPopover.footer">
+        <t t-if="isWorkLocationEvent()">
+            <t t-if="isCurrentUserIsOwnerWorklocation()">
+                <t t-call="calendar.AttendeeCalendarCommonPopover.footer" />
+            </t>
+        </t>
+        <t t-else="">
+            <t t-call="calendar.AttendeeCalendarCommonPopover.footer" />
+        </t>
+    </t>
+</templates>
diff --git a/addons/hr_homeworking_calendar/static/tests/calendar_homeworking.test.js b/addons/hr_homeworking_calendar/static/tests/calendar_homeworking.test.js
new file mode 100644
index 00000000000000..571130366f0a72
--- /dev/null
+++ b/addons/hr_homeworking_calendar/static/tests/calendar_homeworking.test.js
@@ -0,0 +1,313 @@
+import { defineMailModels } from "@mail/../tests/mail_test_helpers";
+import { beforeEach, describe, expect, test } from "@odoo/hoot";
+import { queryAll, queryAllProperties, queryAllTexts, queryFirst } from "@odoo/hoot-dom";
+import { mockDate } from "@odoo/hoot-mock";
+import { toggleFilter } from "@web/../tests/views/calendar/calendar_test_helpers";
+import { contains, defineModels, fields, mockService, models, mountView, onRpc, serverState } from "@web/../tests/web_test_helpers";
+
+const { DateTime, Interval } = luxon;
+
+describe.current.tags("desktop");
+
+class CalendarEvent extends models.Model {
+    _records = [
+        {
+            id: 1,
+            user_id: serverState.userId,
+            partner_id: serverState.partnerId,
+            name: "event 1",
+            start: "2016-12-11 00:00:00",
+            stop: "2016-12-11 01:00:00",
+            allday: false,
+            partner_ids: [models.Command.link(serverState.partnerId), models.Command.link(2), models.Command.link(3)],
+        },
+        {
+            id: 2,
+            user_id: serverState.userId,
+            partner_id: serverState.partnerId,
+            name: "event 2",
+            start: "2016-12-12 10:55:05",
+            stop: "2016-12-12 14:55:05",
+            allday: false,
+            partner_ids: [models.Command.link(serverState.partnerId), models.Command.link(2)],
+        },
+    ];
+
+    user_id = fields.Many2one({ relation: "users" });
+    partner_id = fields.Many2one({ relation: "partner" });
+    name = fields.Char();
+    start = fields.Datetime();
+    stop = fields.Datetime();
+    allday = fields.Boolean();
+    partner_ids = fields.One2many({ relation: "partner" });
+}
+
+class CalendarFilter extends models.Model {
+    _records = [
+        { id: 1, user_id: serverState.userId, partner_id: serverState.partnerId, partner_checked: true },
+        { id: 2, user_id: 2, partner_id: 2, partner_checked: true },
+    ];
+
+    user_id = fields.Many2one({ relation: "users" });
+    partner_id = fields.Many2one({ relation: "partner" });
+    partner_checked = fields.Boolean();
+}
+
+class HrEmployee extends models.Model {
+    _records = [
+        { id: 1, name: "Aaron", partner_id: serverState.partnerId },
+        { id: 2, name: "Brian", partner_id: 2 },
+    ];
+
+    name = fields.Char();
+    partner_id = fields.Many2one({ relation: "partner" });
+}
+
+class HrWorkLocation extends models.Model {
+    _records = [
+        { id: 1, name: "Office", location_type: "office" },
+        { id: 2, name: "Home", location_type: "home" },
+    ];
+
+    name = fields.Char();
+    location_type = fields.Selection({
+        selection: [['home', "Home"], ['office', "Office"], ["other", "Other"]],
+    });
+}
+
+class Partner extends models.Model {
+    _records = [
+        { id: serverState.partnerId, name: "Partner 1", image: "AAA" },
+        { id: 2, name: "Partner 2", image: "BBB" },
+        { id: 3, name: "Partner 3", image: "CCC" },
+    ];
+
+    name = fields.Char();
+    image = fields.Binary();
+}
+
+class Users extends models.Model {
+    _records = [
+        { id: serverState.userId, name: "User 1", partner_id: serverState.partnerId },
+        { id: 2, name: "User 2", partner_id: 2 },
+    ];
+
+    name = fields.Char();
+    partner_id = fields.Many2one({ relation: "partner" });
+}
+
+defineModels([
+    CalendarEvent,
+    CalendarFilter,
+    HrEmployee,
+    HrWorkLocation,
+    Partner,
+    Users,
+]);
+defineMailModels();
+
+onRpc("/calendar/check_credentials", async () => ({}));
+onRpc("check_synchronization_status", async () => ({}));
+onRpc("get_attendee_detail", () => []);
+onRpc("get_default_duration", () => 1);
+onRpc("get_state_selections", () => [
+    ["accepted", "Yes"],
+    ["declined", "No"],
+    ["tentative", "Maybe"],
+    ["needsAction", "Needs Action"],
+]);
+onRpc("res.users", "read", () => [{ user: serverState.userId }]);
+
+beforeEach(() => {
+    mockDate("2020-12-10 15:00:00");
+});
+
+const WORK_LOCATION_FALSE = {
+    location_type: false,
+    location_name: false,
+    work_location_id: false,
+};
+
+const WORK_LOCATION_HOME = {
+    location_type: "home",
+    location_name: "Home",
+    work_location_id: 2,
+};
+
+const WORK_LOCATION_OFFICE = {
+    location_type: "office",
+    location_name: "Office",
+    work_location_id: 1,
+};
+
+const EMPLOYEE_WORK_LOCATIONS = {
+    [1]: {
+        user_id: serverState.userId,
+        employee_id: 1,
+        partner_id: serverState.partnerId,
+        employee_name: "Aaron",
+        monday_location_id: WORK_LOCATION_OFFICE,
+        tuesday_location_id: WORK_LOCATION_OFFICE,
+        wednesday_location_id: WORK_LOCATION_HOME,
+        thursday_location_id: WORK_LOCATION_FALSE,
+        friday_location_id: WORK_LOCATION_FALSE,
+        saturday_location_id: WORK_LOCATION_OFFICE,
+        sunday_location_id: WORK_LOCATION_OFFICE,
+    },
+    2: {
+        user_id: 2,
+        employee_id: 2,
+        partner_id: 2,
+        employee_name: "Brian",
+        monday_location_id: WORK_LOCATION_HOME,
+        tuesday_location_id: WORK_LOCATION_OFFICE,
+        wednesday_location_id: WORK_LOCATION_HOME,
+        thursday_location_id: WORK_LOCATION_HOME,
+        friday_location_id: WORK_LOCATION_FALSE,
+        saturday_location_id: WORK_LOCATION_OFFICE,
+        sunday_location_id: WORK_LOCATION_HOME,
+    },
+};
+
+function mountHomeWorkingView() {
+    return mountView({
+        type: "calendar",
+        resModel: "calendar.event",
+        arch: `
+            <calendar js_class="attendee_calendar" event_open_popup="1" date_start="start" date_stop="stop" all_day="allday">
+                <field name="partner_ids" options="{'block': True, 'icon': 'group', 'icon_class': 'oi-filled'}" filters="1" write_model="calendar.filter" write_field="partner_id" filter_field="partner_checked" avatar_field="avatar_128"/>
+                <field name="partner_id" string="Organizer" options="{'icon': 'person'}"/>
+                <field name="user_id"/>
+                <field name="start"/>
+                <field name="stop"/>
+                <field name="allday"/>
+            </calendar>
+        `,
+    });
+}
+
+test(`basic rendering`, async () => {
+    mockService("action", {
+        async doAction(action, options) {
+            expect.step([action, options?.additionalContext?.default_date]);
+        },
+    });
+    onRpc("get_worklocation", () => ({ 1: EMPLOYEE_WORK_LOCATIONS[1] }));
+
+    await mountHomeWorkingView();
+    await toggleFilter("partner_ids", "2");
+
+    const sundayDate = DateTime.fromISO("2020-12-06");
+    const saturdayDate = DateTime.fromISO("2020-12-12");
+    const intervals = Interval.fromDateTimes(sundayDate.startOf("day"), saturdayDate.endOf("day")).splitBy({ day: 1 });
+    const workLocations = intervals.map(({ start }) => {
+        return queryFirst(`.fc-col-header-cell[data-date="${start.toISODate()}"] .o_worklocation_btn`);
+    });
+    expect(queryAllTexts(workLocations)).toEqual(["Office", "", "", "Home", "Set Location", "Set Location", "Office"]);
+
+    await contains(`.o_worklocation_text`, { root: workLocations[0] }).click();
+    expect(`.o_cw_popover div[name="employee_name"]`).toHaveText("Aaron");
+    expect(`.o_cw_popover .o_cw_popover_edit`).toHaveCount(1);
+    expect(`.o_cw_popover .o_cw_popover_delete`).toHaveCount(1);
+
+    await contains(`.o_cw_popover_close`).click();
+    await contains(`.o_worklocation_line`, { root: workLocations.at(-2), visible: false }).click();
+    expect.verifySteps([["hr_homeworking_calendar.set_location_wizard_action", "2020-12-11"]]);
+});
+
+test(`multicalendar`, async () => {
+    onRpc("get_worklocation", () => EMPLOYEE_WORK_LOCATIONS);
+    await mountHomeWorkingView();
+
+    const sundayDate = DateTime.fromISO("2020-12-06");
+    const saturdayDate = DateTime.fromISO("2020-12-12");
+    const intervals = Interval.fromDateTimes(sundayDate.startOf("day"), saturdayDate.endOf("day")).splitBy({ day: 1 });
+
+    const dataSetsByDates = intervals.map(({ start }) => queryAllProperties(`.fc-col-header-cell[data-date="${start.toISODate()}"] .o_worklocation_btn .o_homeworking_content`, "dataset"));
+    const locations = dataSetsByDates.flatMap((dataSets) => dataSets.length ? dataSets.map((ds) => ds.location) : [false]);
+    expect(locations).toEqual([
+        "office", // sunday
+        "home",   // sunday
+        "office", // monday
+        "home",   // monday
+        "office", // tuesday
+        "office", // tuesday
+        "home",   // wednesday
+        "home",   // wednesday
+        "home",   // thursday
+        false,    // friday
+        "office", // saturday
+        "office", // saturday
+    ]);
+    expect(queryAll(`.fc-col-header-cell[data-date="2020-12-10"] .o_worklocation_text i.add_wl`, { visible: false })).toHaveCount(1);
+    expect(queryAll(`.fc-col-header-cell[data-date="2020-12-12"] .o_worklocation_text i.add_wl`, { visible: false })).toHaveCount(0);
+
+    await contains(`.fc-col-header-cell[data-date="2020-12-10"] .o_homework_content`).click();
+    expect(`.o_cw_popover div[name="employee_name"]`).toHaveText("Brian");
+    expect(`.o_cw_popover .o_cw_popover_edit`).toHaveCount(0);
+    expect(`.o_cw_popover .o_cw_popover_delete`).toHaveCount(0);
+    await contains(`.o_cw_popover_close`).click();
+});
+
+test(`test exceptions are correctly rendered`, async () => {
+    mockService("action", {
+        async doAction(action, options) {
+            expect.step([action, options?.additionalContext?.default_date]);
+        },
+    });
+    onRpc("get_worklocation", () => ({
+        1: {
+            ...EMPLOYEE_WORK_LOCATIONS[1],
+            exceptions: {
+                "2020-12-11": {
+                    hr_employee_location_id: 234,
+                    ...WORK_LOCATION_HOME,
+                },
+            },
+        },
+    }));
+
+    await mountHomeWorkingView();
+    expect(`.fc-col-header-cell[data-date="2020-12-11"] .o_worklocation_btn`).toHaveText("Home");
+
+    await contains(`.fc-col-header-cell[data-date="2020-12-10"] .o_worklocation_text`, { visible: false }).click();
+    expect.verifySteps([["hr_homeworking_calendar.set_location_wizard_action", "2020-12-10"]]);
+});
+
+test(`test exceptions are correctly rendered in multicalendar`, async () => {
+    mockService("action", {
+        async doAction(action, options) {
+            expect.step([action, options?.additionalContext?.default_date]);
+        },
+    });
+    onRpc("get_worklocation", () => ({
+        1: {
+            ...EMPLOYEE_WORK_LOCATIONS[1],
+            exceptions: {
+                "2020-12-10": {
+                    hr_employee_location_id: 3,
+                    ...WORK_LOCATION_HOME,
+                },
+            },
+        },
+        2: {
+            ...EMPLOYEE_WORK_LOCATIONS[2],
+            exceptions: {
+                "2020-12-11": {
+                    hr_employee_location_id: 4,
+                    ...WORK_LOCATION_OFFICE,
+                },
+            },
+        },
+    }));
+
+    await mountHomeWorkingView();
+    expect(`.fc-col-header-cell[data-date="2020-12-11"] .o_homework_content`).toHaveCount(1);
+    expect(`.fc-col-header-cell[data-date="2020-12-11"] .o_worklocation_btn`).toHaveText("Office");
+    expect(`.fc-col-header-cell[data-date="2020-12-10"] .o_homework_content`).toHaveCount(2);
+    expect(`.fc-col-header-cell[data-date="2020-12-10"] .o_worklocation_btn`).toHaveText("Home");
+    expect(queryAll(`.fc-col-header-cell[data-date="2020-12-11"] .add_wl`, { visible: false })).toHaveCount(1);
+
+    await contains(`.fc-col-header-cell[data-date="2020-12-11"] .add_wl`, { visible: false }).click();
+    expect.verifySteps([["hr_homeworking_calendar.set_location_wizard_action", "2020-12-11"]]);
+});
diff --git a/addons/hr_maintenance/views/hr_views.xml b/addons/hr_maintenance/views/hr_views.xml
index dd20377c3dc41c..e4d7ca302ae0b6 100644
--- a/addons/hr_maintenance/views/hr_views.xml
+++ b/addons/hr_maintenance/views/hr_views.xml
@@ -18,7 +18,7 @@
                     context="{'search_default_employee_id': id, 'default_employee_id': id}"
                     groups="maintenance.group_equipment_manager"
                     class="o_stat_button"
-                    icon="fa-cubes"
+                    icon="inventory_2"
                     type="action">
                     <field name="equipment_count" string="Equipment" widget="statinfo"/>
                 </button>
@@ -44,7 +44,7 @@
                 <button name="%(maintenance.hr_equipment_action)d"
                     context="{'search_default_employee_id': employee_id, 'default_employee_id': employee_id}"
                     class="o_stat_button"
-                    icon="fa-cubes"
+                    icon="inventory_2"
                     type="action"
                     invisible="not is_user">
                     <field name="equipment_count" string="Equipment" widget="statinfo"/>
diff --git a/addons/hr_presence/static/src/search/hr_presence_cog_menu/hr_presence_cog_menu.xml b/addons/hr_presence/static/src/search/hr_presence_cog_menu/hr_presence_cog_menu.xml
index fa836cbb078065..072687e4500849 100644
--- a/addons/hr_presence/static/src/search/hr_presence_cog_menu/hr_presence_cog_menu.xml
+++ b/addons/hr_presence/static/src/search/hr_presence_cog_menu/hr_presence_cog_menu.xml
@@ -14,7 +14,7 @@
     <t t-name="hr_presence.menu">
         <Dropdown>
             <button t-attf-class="{{ is_actionmenu ? 'btn btn-secondary' : '' }}">
-                <i class="fa fa-clock-o me-1"/>
+                <i class="oi me-1" data-icon="schedule"/>
                 <span class="o_dropdown_title">Presence Control</span>
             </button>
             <t t-set-slot="content">
diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss
index ab4b278797e8fa..0015d6157e5ee4 100644
--- a/addons/hr_recruitment/static/src/scss/hr_job.scss
+++ b/addons/hr_recruitment/static/src/scss/hr_job.scss
@@ -66,7 +66,7 @@
                 }
             }
 
-            .fa-envelope {
+            [data-icon="mail"] {
                 width: var(--Avatar-size);
             }
         }
@@ -130,7 +130,7 @@
     }
 }
 
-.oe_kanban_action i[aria-label="Activities"], .o_kanban_card_header i.fa-user {
+.oe_kanban_action i[aria-label="Activities"], .o_kanban_card_header i[data-icon="person"] {
     font-size: 1.2rem;
 }
 
diff --git a/addons/hr_recruitment/views/hr_applicant_views.xml b/addons/hr_recruitment/views/hr_applicant_views.xml
index ab72cb5f808295..0965c1489fba76 100644
--- a/addons/hr_recruitment/views/hr_applicant_views.xml
+++ b/addons/hr_recruitment/views/hr_applicant_views.xml
@@ -108,7 +108,7 @@
                     <button name="action_open_employee"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-id-card-o"
+                            icon="badge"
                             groups="hr.group_hr_user"
                             invisible="not (employee_id or emp_is_active)">
                         <div class="o_field_widget o_stat_info">
@@ -118,13 +118,14 @@
                     </button>
                     <button name="action_open_applications"
                             class="oe_stat_button"
-                            icon="fa-pencil"
+                            icon="edit"
+                            icon_class="oi-filled"
                             type="object"
                             context="{'active_test': False}"
                             invisible="not application_count or (application_count &lt;= 1 and not is_pool_applicant)">
                         <field name="application_count" widget="statinfo" string="Applications"/>
                     </button>
-                    <button name="action_create_meeting" class="oe_stat_button" icon="fa-calendar" type="object" invisible="not id">
+                    <button name="action_create_meeting" class="oe_stat_button" icon="calendar_today" type="object" invisible="not id">
                         <div class="o_field_widget o_stat_info">
                             <span class="o_stat_text"><field name="meeting_display_text" /></span>
                             <span class="o_stat_value"><field name="meeting_display_date" readonly="1"/></span>
@@ -133,7 +134,8 @@
                     <button
                         name="action_talent_pool_stat_button"
                         class="oe_stat_button"
-                        icon="fa-users"
+                        icon="group"
+                        icon_class="oi-filled"
                         type="object"
                         invisible="not id or is_pool_applicant or not is_applicant_in_pool"
                         groups="hr_recruitment.group_hr_recruitment_user">
@@ -411,7 +413,7 @@
                             <field name="rotting_days" class="d-flex" widget="rotting"/>
                             <div class="d-flex ms-auto align-items-center">
                                 <a name="action_open_attachments" type="object">
-                                    <i class='fa fa-paperclip' role="img" aria-label="Documents"/>
+                                    <i class="oi" data-icon="attach_file" role="img" aria-label="Documents"/>
                                     <field name="attachment_number"/>
                                 </a>
                                 <field name="kanban_state" class="mx-1" widget="hr_applicant_state_selection"/>
diff --git a/addons/hr_recruitment/views/hr_job_views.xml b/addons/hr_recruitment/views/hr_job_views.xml
index 7a0c4a9f2401fe..5136cd430dec0b 100644
--- a/addons/hr_recruitment/views/hr_job_views.xml
+++ b/addons/hr_recruitment/views/hr_job_views.xml
@@ -92,7 +92,7 @@
                                                 </div>
                                         </div>
                                         <div t-if="record.alias_email.value" class="d-flex align-items-baseline mt-1 small text-muted">
-                                            <i class="fa fa-envelope flex-shrink-0 me-1 text-center" title="Email"></i>
+                                            <i class="oi oi-filled flex-shrink-0 me-1 text-center" data-icon="mail" title="Email"></i>
                                             <field name="alias_id" class="d-flex flex-wrap"
                                                 groups="hr_recruitment.group_hr_recruitment_interviewer"/>
                                         </div>
@@ -133,7 +133,7 @@
                                         <div class="d-flex justify-content-sm-start justify-content-xl-start mt-1">
                                             <div class="position-relative">
                                                 <button name="action_open_activities" type="object" class="px-2 pt-2 pb-1">
-                                                    <i class="fa fa-2x fa-clock-o" role="img" aria-label="Activities"></i>
+                                                    <i class="oi oi-2x" data-icon="schedule" role="img" aria-label="Activities"></i>
                                                     <span class="activity_badge position-absolute translate-middle badge rounded-pill bg-danger text-light" t-if="record.activity_count.raw_value > 0">
                                                         <field name="activity_count"/>
                                                     </span> 
@@ -195,7 +195,7 @@
                                         <div class="col-1 align-content-end me-1" style="max-width: 1.5rem;"
                                             groups="hr_recruitment.group_hr_recruitment_interviewer">
                                             <div class="d-flex flex-row justify-content-center">
-                                                <i class="fa fa-user" title="new_applications_icon" aria-hidden="true"/>
+                                                <i class="oi oi-filled" data-icon="person" title="new_applications_icon" aria-hidden="true"/>
                                             </div>
                                         </div>
                                         <div class="col align-content-end">
@@ -345,7 +345,8 @@
             <div name="button_box" position="inside">
                 <button class="oe_stat_button"
                     groups="hr_recruitment.group_hr_recruitment_interviewer"
-                    icon="fa-pencil"
+                    icon="edit"
+                    icon_class="oi-filled"
                     name="%(action_hr_job_applications)d"
                     context="{'default_recruiter': recruiter_id, 'active_test': False}"
                     type="action">
@@ -353,7 +354,7 @@
                 </button>
                 <button class="oe_stat_button"
                     groups="hr_recruitment.group_hr_recruitment_interviewer"
-                    icon="fa-file-text-o"
+                    icon="article"
                     name="action_open_attachments"
                     type="object"
                     invisible="documents_count == 0">
@@ -362,7 +363,8 @@
                 <button name="action_open_employees"
                     groups="hr_recruitment.group_hr_recruitment_interviewer"
                     class="oe_stat_button"
-                    icon="fa-users"
+                    icon="group"
+                    icon_class="oi-filled"
                     invisible="not employee_count"
                     type="object">
                     <field name="employee_count" widget="statinfo" string="Employees"/>
@@ -410,8 +412,8 @@
         <field name="arch" type="xml">
             <xpath expr="//filter[@name='my_favorite_jobs']" position="after">
                 <searchpanel class="w-auto">
-                    <field name="company_id" groups="base.group_multi_company" icon="fa-building" enable_counters="1"/>
-                    <field name="department_id" icon="fa-users" enable_counters="1"/>
+                    <field name="company_id" groups="base.group_multi_company" icon="business" icon_class="oi-filled" enable_counters="1"/>
+                    <field name="department_id" icon="group" icon_class="oi-filled" enable_counters="1"/>
                 </searchpanel>
                 <filter string="My Job Positions" name="my_positions" domain="[('recruiter_id.user_id', '=', uid)]"/>
             </xpath>
diff --git a/addons/hr_recruitment/views/hr_recruitment_stage_views.xml b/addons/hr_recruitment/views/hr_recruitment_stage_views.xml
index 0acd5603c9fc9f..05b002a5d9f2b4 100644
--- a/addons/hr_recruitment/views/hr_recruitment_stage_views.xml
+++ b/addons/hr_recruitment/views/hr_recruitment_stage_views.xml
@@ -69,7 +69,7 @@
                             <div>
                                 <field name="hired_stage"/>
                                 <div invisible="not is_warning_visible" class="text-danger">
-                                    <span class="fa fa-exclamation-triangle pe-1"/>
+                                    <span class="oi pe-1" data-icon="warning"/>
                                     All applications will lose their hired date and hired status.
                                 </div>
                             </div>
diff --git a/addons/hr_recruitment_skills/static/src/components/search_job_applicant_menu/search_job_applicant_menu.xml b/addons/hr_recruitment_skills/static/src/components/search_job_applicant_menu/search_job_applicant_menu.xml
index 7a6fb369332146..92fa73b8761e97 100644
--- a/addons/hr_recruitment_skills/static/src/components/search_job_applicant_menu/search_job_applicant_menu.xml
+++ b/addons/hr_recruitment_skills/static/src/components/search_job_applicant_menu/search_job_applicant_menu.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
     <t t-name="hr_recruitment_skills.SearchJobApplicant">
         <DropdownItem onSelected.bind="this.openMatchingJobApplicants">
-            <i class="fa fa-fw fa-search me-1" aria-hidden="true"></i>Matching Talents
+            <i class="oi oi-fw me-1" data-icon="search" aria-hidden="true"></i>Matching Talents
         </DropdownItem>
     </t>
 </templates>
diff --git a/addons/hr_recruitment_survey/views/hr_applicant_views.xml b/addons/hr_recruitment_survey/views/hr_applicant_views.xml
index 1778cef3d11a92..6f19047de28a3f 100644
--- a/addons/hr_recruitment_survey/views/hr_applicant_views.xml
+++ b/addons/hr_recruitment_survey/views/hr_applicant_views.xml
@@ -31,7 +31,7 @@
             <xpath expr="//button[@name='action_create_meeting']" position="after">
                 <button name="action_print_survey"
                     class="oe_stat_button"
-                    icon="fa-pencil-square-o"
+                    icon="edit_square"
                     type="object"
                     help="See interview report"
                     invisible="not survey_id or not response_ids">
diff --git a/addons/hr_recruitment_survey/views/res_config_setting_views.xml b/addons/hr_recruitment_survey/views/res_config_setting_views.xml
index d1e3e5d88465c5..85d117a6c0aff6 100644
--- a/addons/hr_recruitment_survey/views/res_config_setting_views.xml
+++ b/addons/hr_recruitment_survey/views/res_config_setting_views.xml
@@ -8,7 +8,7 @@
             <setting id="interview_forms_setting" position="inside">
                 <div class="content-group">
                     <div class="mt8">
-                        <button name="%(survey_survey_action_recruitment)d" icon="oi-arrow-right" type="action" string="Interview Survey" class="btn-link"/>
+                        <button name="%(survey_survey_action_recruitment)d" icon="east" type="action" string="Interview Survey" class="btn-link"/>
                     </div>
                 </div>
             </setting>
diff --git a/addons/hr_recruitment_survey/views/survey_survey_views.xml b/addons/hr_recruitment_survey/views/survey_survey_views.xml
index 85ce9b6c88ec47..062a35ef5b4e29 100644
--- a/addons/hr_recruitment_survey/views/survey_survey_views.xml
+++ b/addons/hr_recruitment_survey/views/survey_survey_views.xml
@@ -7,7 +7,7 @@
         <field name="mode">primary</field>
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
-                <button name="action_open_jobs" type="object" class="oe_stat_button" icon="fa-briefcase" invisible="job_count == 0">
+                <button name="action_open_jobs" type="object" class="oe_stat_button" icon="work" invisible="job_count == 0">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="job_count"/></span>
                         <span class="o_stat_text">Jobs</span>
diff --git a/addons/hr_recruitment_survey/views/survey_templates_statistics.xml b/addons/hr_recruitment_survey/views/survey_templates_statistics.xml
index 3df90ddacdec9e..dd7dd059ae638e 100644
--- a/addons/hr_recruitment_survey/views/survey_templates_statistics.xml
+++ b/addons/hr_recruitment_survey/views/survey_templates_statistics.xml
@@ -6,7 +6,7 @@
             <a t-if="(env.user.has_group('hr_recruitment.group_hr_recruitment_manager') and survey.survey_type == 'recruitment')"
                 t-attf-href="/odoo/action-hr_recruitment_survey.survey_survey_action_recruitment/{{survey.id}}"
                 class="ms-2">
-                <i class="oi oi-fw oi-arrow-right"/>Go to Recruitment
+                <i class="oi me-2" data-icon="east"/>Go to Recruitment
             </a>
         </xpath>
     </template>
diff --git a/addons/hr_skills/static/src/fields/one2many_tags_skills/one2many_tags_skills.xml b/addons/hr_skills/static/src/fields/one2many_tags_skills/one2many_tags_skills.xml
index 2f69dd2ac2e3ea..99969b971b8f42 100644
--- a/addons/hr_skills/static/src/fields/one2many_tags_skills/one2many_tags_skills.xml
+++ b/addons/hr_skills/static/src/fields/one2many_tags_skills/one2many_tags_skills.xml
@@ -12,7 +12,7 @@
             <button t-on-click="this.onAdd"
                 class="btn btn-link text-action"
                 style="padding: 0; line-height: 0; height: min-content;">
-                <i class="fa fa-plus text-info" />
+                <i class="oi text-info" data-icon="add"/>
             </button>
         </div>
     </t>
diff --git a/addons/hr_skills/static/src/fields/resume_one2many/resume_one2many.xml b/addons/hr_skills/static/src/fields/resume_one2many/resume_one2many.xml
index 1f9870b91cac4c..14e62655a9c195 100644
--- a/addons/hr_skills/static/src/fields/resume_one2many/resume_one2many.xml
+++ b/addons/hr_skills/static/src/fields/resume_one2many/resume_one2many.xml
@@ -58,7 +58,7 @@
                     <div class="d-flex align-items-center">
                         <h4 class="o_resume_line_title mt-2 me-2" t-out="data.name"/>
                         <t t-if="data.is_course">
-                            <a id="external_link" t-if="data.external_url" t-attf-href="#{data.external_url}" target="_blank" class="ms-2 fa fa-external-link btn-secondary" style="font-size: 1rem;"/>
+                            <a id="external_link" t-if="data.external_url" t-attf-href="#{data.external_url}" target="_blank" class="oi ms-2 btn-secondary" data-icon="open_in_new" style="font-size: 1rem;"/>
                         </t>
                     </div>
                     <p t-if="data.description" class="o_resume_line_desc" t-out="data.description" t-custom-ref="link-target-blank"/>
diff --git a/addons/hr_skills/static/src/fields/skills_one2many/skills_one2many.xml b/addons/hr_skills/static/src/fields/skills_one2many/skills_one2many.xml
index 51499cabdd75f9..412ce2dd946d9f 100644
--- a/addons/hr_skills/static/src/fields/skills_one2many/skills_one2many.xml
+++ b/addons/hr_skills/static/src/fields/skills_one2many/skills_one2many.xml
@@ -8,7 +8,7 @@
             <div name="skills_header" class="skills_header text-uppercase small fw-bolder py-2 mt-4" t-att-class="{'o_horizontal_separator': !this.showTable }">
                 Skills &amp; Certifications
                 <a t-if="!this.isEmpty &amp;&amp; this.showTimeline" t-on-click="this.openSkillsReport" class="float-end cursor-pointer">
-                    <span class="fa fa-line-chart me-1"/>
+                    <span class="oi me-1" data-icon="show_chart"/>
                     Timeline
                 </a>
             </div>
diff --git a/addons/hr_skills/static/src/scss/report_employee_cv.scss b/addons/hr_skills/static/src/scss/report_employee_cv.scss
index 0e0d7921d5bdeb..8c9136ffcc7239 100644
--- a/addons/hr_skills/static/src/scss/report_employee_cv.scss
+++ b/addons/hr_skills/static/src/scss/report_employee_cv.scss
@@ -178,10 +178,6 @@ div.o_employee_cv {
                 position: relative;
                 top: -2px;
                 padding-top: 2px;
-                fa {
-                    font-size: 14px;
-                    margin-top: 6px;
-                }
             }
 
         }
diff --git a/addons/hr_skills/views/hr_employee_cv_templates.xml b/addons/hr_skills/views/hr_employee_cv_templates.xml
index 1df94a138685c2..f5cd57460bd7a9 100644
--- a/addons/hr_skills/views/hr_employee_cv_templates.xml
+++ b/addons/hr_skills/views/hr_employee_cv_templates.xml
@@ -43,15 +43,15 @@
             <div class="o_sidebar_section" t-if="show_contact">
                 <ul class="o_social">
                     <li class="email" t-if="o.company_id.email">
-                        <i class="fa fa-envelope pe-2"/>
+                        <i class="oi oi-filled pe-2" data-icon="mail"/>
                         <a t-attf-href="mailto: #{o.company_id.email}" t-field="o.company_id.email">demo@email.com</a>
                     </li>
                     <li class="phone" t-if="o.company_id.phone">
-                        <i class="fa fa-phone pe-2"/>
+                        <i class="oi oi-filled pe-2" data-icon="phone"/>
                         <a t-attf-href="tel:#{o.company_id.phone}" t-field="o.company_id.phone">+1234567890</a>
                     </li>
                     <li class="website" t-if="o.company_id.website">
-                        <i class="fa fa-globe pe-2"/>
+                        <i class="oi pe-2" data-icon="public"/>
                         <a t-attf-href="tel:#{o.company_id.website}" t-field="o.company_id.website">www.demo.com</a>
                     </li>
                 </ul>
@@ -67,7 +67,7 @@
                 <div class="o_main_panel_section">
                     <h2 class="o_main_panel_title mt-4" t-attf-style="color: #{color_secondary};">
                         <span class="o_main_panel_icon" t-attf-style="background: #{color_secondary};">
-                            <i class="fa fa-briefcase"/>
+                            <i class="oi" data-icon="work"/>
                         </span>
                         <span t-out="line_type">Experience</span>
                     </h2>
@@ -97,7 +97,7 @@
             <div class="o_main_panel_section" t-if="skill_type_language">
                 <h2 class="o_main_panel_title" t-attf-style="color: #{color_secondary};">
                     <span class="o_main_panel_icon" t-attf-style="background: #{color_secondary};">
-                        <i class="fa fa-language"/>
+                        <i class="oi" data-icon="translate"/>
                     </span>
                     Languages
                 </h2>
@@ -119,7 +119,7 @@
             <div class="o_main_panel_section">
                 <h2 class="o_main_panel_title" t-attf-style="color: #{color_secondary};">
                     <span class="o_main_panel_icon" t-attf-style="background: #{color_secondary};">
-                        <i class="fa fa-rocket"/>
+                        <i class="oi" data-icon="rocket_launch"/>
                     </span>
                     Skills
                 </h2>
diff --git a/addons/hr_skills/views/hr_views.xml b/addons/hr_skills/views/hr_views.xml
index 582a73545e85cb..eb93bec0695006 100644
--- a/addons/hr_skills/views/hr_views.xml
+++ b/addons/hr_skills/views/hr_views.xml
@@ -46,7 +46,7 @@
                             <label id="date_start_label" for="date_start" string="Duration" invisible="is_course"/>
                             <div class="o_row" invisible="is_course">
                                 <field name="date_start"/>
-                                <i class="fa fa-long-arrow-right mx-2" aria-label="Arrow icon" title="Arrow"/>
+                                <i class="oi mx-2" data-icon="east" aria-label="Arrow icon" title="Arrow"/>
                                 <field name="date_end" placeholder="Forever"/>
                             </div>
                             <label for="date_start" string="Date" invisible="not is_course"/>
@@ -300,8 +300,8 @@
         <field name="arch" type="xml">
             <search string="Resume Lines">
                 <searchpanel view_types="list,kanban">
-                    <field name="company_id" groups="base.group_multi_company" icon="fa-building" enable_counters="1"/>
-                    <field name="department_id" icon="fa-users" enable_counters="1"/>
+                    <field name="company_id" groups="base.group_multi_company" icon="business" icon_class="oi-filled" enable_counters="1"/>
+                    <field name="department_id" icon="group" icon_class="oi-filled" enable_counters="1"/>
                 </searchpanel>
             </search>
         </field>
diff --git a/addons/hr_skills_slides/static/src/fields/resume_one2many/resume_one2many.xml b/addons/hr_skills_slides/static/src/fields/resume_one2many/resume_one2many.xml
index 65d8513354caf5..9e5bc9f99451a4 100644
--- a/addons/hr_skills_slides/static/src/fields/resume_one2many/resume_one2many.xml
+++ b/addons/hr_skills_slides/static/src/fields/resume_one2many/resume_one2many.xml
@@ -6,7 +6,7 @@
         </xpath>
         <xpath expr="//a[@id='external_link']" position="after">
             <a id="course_link" t-attf-href="#{data.course_url}" target="_blank" t-if="data.course_url"
-                style="font-size: 1rem;" class="ms-2 fa fa-external-link btn-secondary"/>
+                style="font-size: 1rem;" class="oi ms-2 btn-secondary" data-icon="open_in_new"/>
         </xpath>
     </t>
 </odoo>
diff --git a/addons/hr_skills_slides/views/hr_employee_public_views.xml b/addons/hr_skills_slides/views/hr_employee_public_views.xml
index 1bc04f9512af34..7ab3aff38bf360 100644
--- a/addons/hr_skills_slides/views/hr_employee_public_views.xml
+++ b/addons/hr_skills_slides/views/hr_employee_public_views.xml
@@ -10,7 +10,7 @@
                 <button name="action_open_courses"
                     class="oe_stat_button"
                     groups="website_slides.group_website_slides_officer"
-                    icon="fa-graduation-cap"
+                    icon="school"
                     type="object"
                     invisible="not is_user or not user_id or not has_subscribed_courses">
                     <field name="courses_completion_text" widget="statinfo" string="Courses"/>
diff --git a/addons/hr_skills_slides/views/hr_employee_views.xml b/addons/hr_skills_slides/views/hr_employee_views.xml
index 67c94a8884f4a2..8beb076493a551 100644
--- a/addons/hr_skills_slides/views/hr_employee_views.xml
+++ b/addons/hr_skills_slides/views/hr_employee_views.xml
@@ -11,7 +11,7 @@
                 <button name="action_open_courses"
                     class="oe_stat_button"
                     groups="website_slides.group_website_slides_officer"
-                    icon="fa-graduation-cap"
+                    icon="school"
                     type="object"
                     invisible="not user_id or not has_subscribed_courses">
                     <field name="courses_completion_text" widget="statinfo" string="Courses"/>
diff --git a/addons/hr_timesheet/views/account_analytic_line_views.xml b/addons/hr_timesheet/views/account_analytic_line_views.xml
index d0cedec41c0877..55d8173f1ca7f5 100644
--- a/addons/hr_timesheet/views/account_analytic_line_views.xml
+++ b/addons/hr_timesheet/views/account_analytic_line_views.xml
@@ -307,7 +307,7 @@
                                         <field name="task_id" invisible="not context.get('default_project_id')" class="p-0 fw-bold fs-5"/>
                                     </span>
                                     <span>
-                                        <i class="fa fa-calendar me-1" role="img" aria-label="Date" title="Date"></i>
+                                        <i class="oi oi-filled me-1" data-icon="calendar_today" role="img" aria-label="Date" title="Date"></i>
                                         <field name="date"/><span invisible="context.get('is_my_timesheets')"> - <field name="employee_id"/></span>
                                     </span>
                                     <span class="text-truncate" t-att-title="record.name.value"><field name="name" class="fst-italic"/></span>
diff --git a/addons/hr_timesheet/views/hr_employee_public_views.xml b/addons/hr_timesheet/views/hr_employee_public_views.xml
index db705f8f104c85..64f7269e2e42a5 100644
--- a/addons/hr_timesheet/views/hr_employee_public_views.xml
+++ b/addons/hr_timesheet/views/hr_employee_public_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
                <field name="has_timesheet" groups="hr_timesheet.group_hr_timesheet_user" invisible="1"/>
-                <button invisible="not is_user or not has_timesheet" class="oe_stat_button" type="object" name="action_timesheet_from_employee" icon="fa-calendar" groups="hr_timesheet.group_hr_timesheet_user">
+                <button invisible="not is_user or not has_timesheet" class="oe_stat_button" type="object" name="action_timesheet_from_employee" icon="calendar_today" groups="hr_timesheet.group_hr_timesheet_user">
                     <div class="o_stat_info">
                         <span class="o_stat_text">Timesheets</span>
                     </div>
diff --git a/addons/hr_timesheet/views/hr_employee_views.xml b/addons/hr_timesheet/views/hr_employee_views.xml
index 7f08b4b08dbd9b..8ba78c0275eb3c 100644
--- a/addons/hr_timesheet/views/hr_employee_views.xml
+++ b/addons/hr_timesheet/views/hr_employee_views.xml
@@ -18,7 +18,7 @@
             </xpath>
             <button name="action_open_versions" position="before">
                 <field name="has_timesheet" groups="hr_timesheet.group_hr_timesheet_user" invisible="1"/>
-                <button invisible="not has_timesheet" class="oe_stat_button" type="object" name="action_timesheet_from_employee" icon="fa-calendar" groups="hr_timesheet.group_hr_timesheet_user">
+                <button invisible="not has_timesheet" class="oe_stat_button" type="object" name="action_timesheet_from_employee" icon="calendar_today" groups="hr_timesheet.group_hr_timesheet_user">
                     <div class="o_stat_info">
                         <span class="o_stat_text">Timesheets</span>
                     </div>
diff --git a/addons/hr_timesheet/views/project_project_views.xml b/addons/hr_timesheet/views/project_project_views.xml
index 465cb10b357d32..efdd8242155fe0 100644
--- a/addons/hr_timesheet/views/project_project_views.xml
+++ b/addons/hr_timesheet/views/project_project_views.xml
@@ -49,7 +49,7 @@
                         <i class="fa fa-fw o_button_icon fa-clock-o text-danger" title="Over Due" invisible="not stat_success_rate or stat_success_rate &lt;= 100"/>
                         <field string="Timesheets" name="stat_timesheet_value" widget="statinfo"/>
                     </button>
-                    <button class="oe_stat_button" type="object" name="action_project_timesheets" icon="fa-warning text-danger"
+                    <button class="oe_stat_button" type="object" name="action_project_timesheets" icon="warning" icon_class="text-danger"
                         groups="hr_timesheet.group_hr_timesheet_user" invisible="not allow_timesheets or stat_success_rate &lt;= 100">
                         <field string="Extra Time" name="stat_extra_time_value" widget="statinfo"/>
                     </button>
diff --git a/addons/hr_timesheet/views/project_task_portal_templates.xml b/addons/hr_timesheet/views/project_task_portal_templates.xml
index 28d20a91954456..97a3719db8d01d 100644
--- a/addons/hr_timesheet/views/project_task_portal_templates.xml
+++ b/addons/hr_timesheet/views/project_task_portal_templates.xml
@@ -7,7 +7,7 @@
         </xpath>
         <xpath expr="//div[@id='task-nav']" position="before">
             <div t-if="timesheets and allow_timesheets and show_portal_timesheets" class="d-grid flex-grow-1" id='nav-report'>
-                <a class="btn btn-light o_print_btn o_project_timesheet_print d-block" t-att-href="task.get_portal_url(report_type='pdf')" href="#" title="View Details" role="button" target="_blank"><i class="fa fa-print"/> View Details</a>
+                <a class="btn btn-light o_print_btn o_project_timesheet_print d-block" t-att-href="task.get_portal_url(report_type='pdf')" href="#" title="View Details" role="button" target="_blank"><i class="oi" data-icon="print"/> View Details</a>
             </div>
         </xpath>
         <xpath expr="//li[@id='nav-header']" position="after">
diff --git a/addons/hr_work_entry/wizard/hr_work_entry_regeneration_wizard_views.xml b/addons/hr_work_entry/wizard/hr_work_entry_regeneration_wizard_views.xml
new file mode 100644
index 00000000000000..018c7ae7ce3d83
--- /dev/null
+++ b/addons/hr_work_entry/wizard/hr_work_entry_regeneration_wizard_views.xml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="hr_work_entry_regeneration_wizard" model="ir.ui.view">
+        <field name="name">hr_work_entry_regeneration_wizard</field>
+        <field name="model">hr.work.entry.regeneration.wizard</field>
+        <field name="arch" type="xml">
+            <form string="Regenerate Employee Work Entries">
+                <group>
+                    <field name="employee_ids" widget="work_entry_many2many_avatar_employee"
+                           in_error="validated_work_entry_employee_ids"
+                           domain="[('company_id', 'in', allowed_company_ids), ('version_ids.id','!=', False)]"/>
+                    <field name="date_to" invisible="1"/>
+                    <label for="date_from" string="Period"/>
+                    <field name="date_from" style="width: 200px;" nolabel="1" widget="daterange" options="{'end_date_field': 'date_to'}"/>
+                    <div colspan="2" class="text-info" invisible="earliest_available_date_message == ''">
+                        <i class="oi me-1" data-icon="info" title="Hint"/>
+                        <field name="earliest_available_date_message" class="oe_inline" nolabel="1"/>
+                    </div>
+                    <div colspan="2" class="text-info" invisible="latest_available_date_message == ''">
+                        <i class="oi me-1" data-icon="info" title="Hint"/>
+                        <field name="latest_available_date_message" class="oe_inline" nolabel="1"/>
+                    </div>
+                </group>
+                <div>
+                    <span class="text-muted">Warning: The work entry regeneration will delete all manual changes on the selected period.</span>
+                </div>
+                <field name="search_criteria_completed" invisible="1"/>
+                <div invisible="not search_criteria_completed or not validated_work_entry_employee_ids">
+                    <div class="text-danger"><i class="oi me-1" data-icon="warning" title="Warning"/>Employees in red will be skipped because they have at least one validated work entry.</div>
+                </div>
+                <footer>
+                    <button name="regenerate_work_entries"
+                            string="Regenerate Work Entries" data-hotkey="q"
+                            class="btn btn-primary oe_highlight"
+                            type="object"
+                            invisible="not valid"/>
+                    <button name="regenerate_work_entries_disabled"
+                            string="Regenerate Work Entries"
+                            class="btn btn-primary disabled"
+                            invisible="valid"/>
+                    <button name="cancel_button" string="Cancel" class="btn-secondary" special="cancel" data-hotkey="x"/>
+                </footer>
+            </form>
+        </field>
+    </record>
+    <record id="hr_work_entry_regeneration_wizard_action" model="ir.actions.act_window">
+        <field name="name">Work Entry Regeneration</field>
+        <field name="res_model">hr.work.entry.regeneration.wizard</field>
+        <field name="view_mode">form</field>
+        <field name="target">new</field>
+    </record>
+</odoo>
diff --git a/addons/html_builder/static/img/options/bg_shape.svg b/addons/html_builder/static/img/options/bg_shape.svg
deleted file mode 100644
index 838ddc53203342..00000000000000
--- a/addons/html_builder/static/img/options/bg_shape.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g fill="#D9D9D9" class="shape" transform="translate(-176 -6)">
-      <g class="group" transform="translate(167)">
-        <g class="bg_shape" transform="translate(9 6)">
-          <path d="M12 0a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h10zm0 2l-1.59 1.68a7 7 0 0 1-4.207 2.134l-.155.02A4.967 4.967 0 0 0 2.224 8.55L2 9h10V2z" class="o_graphic"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/html_builder/static/img/options/bring-backward.svg b/addons/html_builder/static/img/options/bring-backward.svg
deleted file mode 100644
index 30cc48ac4d492c..00000000000000
--- a/addons/html_builder/static/img/options/bring-backward.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-    <g class="o_overlay_back_front">
-        <rect x="4" y="4" width="9" height="9" class="o_graphic" fill="#EEE"/>
-        <rect x="7" y="7" width="9" height="9" class="o_subdle" fill="#AAA"/>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/addons/html_builder/static/img/options/bring-forward.svg b/addons/html_builder/static/img/options/bring-forward.svg
deleted file mode 100644
index 727c0154b63248..00000000000000
--- a/addons/html_builder/static/img/options/bring-forward.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<g class="o_overlay_back_front">
-		<rect x="4" y="4" width="9" height="9" class="o_subdle" fill="#AAA"/>
-		<rect x="7" y="7" width="9" height="9" class="o_graphic" fill="#EEE"/>
-	</g>
-</svg>
\ No newline at end of file
diff --git a/addons/html_builder/static/img/options/desktop_invisible.svg b/addons/html_builder/static/img/options/desktop_invisible.svg
deleted file mode 100644
index c9a407c74b34be..00000000000000
--- a/addons/html_builder/static/img/options/desktop_invisible.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg fill="#D9D9D9"  viewBox="0 0 465 462" xmlns="http://www.w3.org/2000/svg">
-<path d="M456.969 9.84743L454.026 6.90425C444.956 -2.16512 429.098 -1.01124 418.605 9.48152L10.8984 417.188C0.405681 427.681 -0.748186 443.539 8.32118 452.609L11.2644 455.552C20.3337 464.621 36.1919 463.467 46.6847 452.975L454.392 45.2678C464.884 34.775 466.038 18.9168 456.969 9.84743Z"/>
-<path d="M346.673 26.269H39.1908C17.8303 26.269 0.5 43.6036 0.5 64.9695V322.973C0.5 336.409 7.35309 348.251 17.752 355.19L114.47 258.472H62.9696C56.9597 258.472 52.0878 253.601 52.0878 247.591V88.7515C52.0878 82.7417 56.9597 77.8697 62.9696 77.8697H295.072L346.673 26.269Z"/>
-<path d="M296.331 258.472H402.32C408.33 258.472 413.202 253.601 413.202 247.591V141.602L464.79 90.0139V322.973C464.79 344.339 447.46 361.674 426.099 361.674H271.336L284.233 400.375H342.269C352.949 400.375 361.614 409.042 361.614 419.725C361.614 430.408 352.949 439.075 342.269 439.075H123.021C120.837 439.075 118.734 438.708 116.771 438.033L154.429 400.375H181.057L193.954 361.674H193.13L226.244 328.56C228.268 329.181 230.417 329.516 232.645 329.516C244.665 329.516 254.409 319.772 254.409 307.753C254.409 305.525 254.074 303.376 253.452 301.352L296.331 258.472Z"/>
-</svg>
diff --git a/addons/html_builder/static/img/options/mobile_invisible.svg b/addons/html_builder/static/img/options/mobile_invisible.svg
deleted file mode 100644
index ce5f3091ce8166..00000000000000
--- a/addons/html_builder/static/img/options/mobile_invisible.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg fill="#D9D9D9" viewBox="0 0 566.93 566.93" xmlns="http://www.w3.org/2000/svg">
-    <rect transform="translate(283.46 -117.41) rotate(45)" x="255.56" y="-16.93" width="55.81" height="600.8"
-          rx="25.61"/>
-    <path d="m395.46 399.46a12 12 0 0 1-12 12h-128.4l-115.68 115.69a47.8 47.8 0 0 0 32.08 12.31h224a48 48 0 0 0 48-48v-268.4l-48 48zm-112 108a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/>
-    <path d="m171.46 87.46a12 12 0 0 1 12-12h200a11.89 11.89 0 0 1 6.48 1.93l37.61-37.61a47.82 47.82 0 0 0-32.09-12.32h-224a48 48 0 0 0-48 48v268.41l48-48z"/>
-</svg>
diff --git a/addons/html_builder/static/img/snippets_options/align_bottom.svg b/addons/html_builder/static/img/snippets_options/align_bottom.svg
deleted file mode 100644
index d54b039c2e1f8c..00000000000000
--- a/addons/html_builder/static/img/snippets_options/align_bottom.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy" transform="translate(-202 -5)">
-      <g class="align_bottom" transform="translate(202 5)">
-        <rect width="8" height="12" x="12" fill="#B8B8B8" class="o_subdle"/>
-        <polygon fill="#B8B8B8" points="0 0 9 0 9 1 0 1" class="o_subdle"/>
-        <rect width="9" height="6" y="6" fill="#FFF" class="o_graphic"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/html_builder/static/img/snippets_options/align_middle.svg b/addons/html_builder/static/img/snippets_options/align_middle.svg
deleted file mode 100644
index a2aaa6c390b6f9..00000000000000
--- a/addons/html_builder/static/img/snippets_options/align_middle.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy" transform="translate(-172 -5)">
-      <g class="align_middle" transform="translate(172 5)">
-        <rect width="8" height="12" x="12" fill="#B8B8B8" class="o_subdle"/>
-        <polygon fill="#B8B8B8" points="0 0 9 0 9 1 0 1" class="o_subdle"/>
-        <rect width="9" height="6" y="3" fill="#FFF" class="o_graphic"/>
-        <polygon fill="#B8B8B8" points="0 11 9 11 9 12 0 12" class="o_subdle"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/html_builder/static/img/snippets_options/align_solo_between.svg b/addons/html_builder/static/img/snippets_options/align_solo_between.svg
deleted file mode 100644
index cadabba10f0642..00000000000000
--- a/addons/html_builder/static/img/snippets_options/align_solo_between.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15 0H6v3h9V0Zm0 8H6v3h9V8Z" fill="#fff" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 5h9v1H6V5Z" fill="#B8B8B8" />
-</svg>
diff --git a/addons/html_builder/static/img/snippets_options/align_solo_bottom.svg b/addons/html_builder/static/img/snippets_options/align_solo_bottom.svg
deleted file mode 100644
index 32438f184dfea1..00000000000000
--- a/addons/html_builder/static/img/snippets_options/align_solo_bottom.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0H15V1H6V0Z" fill="#B8B8B8" class="o_subdle"/>
-<path d="M15 6H6V12H15V6Z" fill="white" class="o_graphic"/>
-</svg>
diff --git a/addons/html_builder/static/img/snippets_options/align_solo_middle.svg b/addons/html_builder/static/img/snippets_options/align_solo_middle.svg
deleted file mode 100644
index 96e83074e93537..00000000000000
--- a/addons/html_builder/static/img/snippets_options/align_solo_middle.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0H15V1H6V0Z" fill="#B8B8B8"/>
-<path d="M15 3H6V9H15V3Z" fill="white" class="o_graphic"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 11H15V12H6V11Z" fill="#B8B8B8" class="o_subdle"/>
-</svg>
diff --git a/addons/html_builder/static/img/snippets_options/align_solo_top.svg b/addons/html_builder/static/img/snippets_options/align_solo_top.svg
deleted file mode 100644
index b25beaddafdb6d..00000000000000
--- a/addons/html_builder/static/img/snippets_options/align_solo_top.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 11H15V12H6V11Z" fill="#B8B8B8" class="o_subdle"/>
-<path d="M15 0H6V6H15V0Z" fill="white" class="o_graphic"/>
-</svg>
diff --git a/addons/html_builder/static/img/snippets_options/align_stretch.svg b/addons/html_builder/static/img/snippets_options/align_stretch.svg
deleted file mode 100644
index 026e0486a62233..00000000000000
--- a/addons/html_builder/static/img/snippets_options/align_stretch.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy" transform="translate(-234 -5)">
-      <g class="align_stretch" transform="translate(234 5)">
-        <rect width="8" height="12" x="12" fill="#B8B8B8" class="o_subdle"/>
-        <rect width="8" height="12" fill="#FFF" class="o_graphic"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/html_builder/static/img/snippets_options/align_top.svg b/addons/html_builder/static/img/snippets_options/align_top.svg
deleted file mode 100644
index 5e5be9a1db00b4..00000000000000
--- a/addons/html_builder/static/img/snippets_options/align_top.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy" transform="translate(-139 -5)">
-      <g class="align_top" transform="translate(139 5)">
-        <rect width="8" height="12" x="12" fill="#B8B8B8" class="o_subdle"/>
-        <polygon fill="#B8B8B8" points="0 11 9 11 9 12 0 12" class="o_subdle"/>
-        <rect width="9" height="6" fill="#FFF" class="o_graphic"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/html_builder/static/src/builder.scss b/addons/html_builder/static/src/builder.scss
index b51c0538c445db..68fd424caae6bd 100644
--- a/addons/html_builder/static/src/builder.scss
+++ b/addons/html_builder/static/src/builder.scss
@@ -9,12 +9,6 @@
 .o-snippets-top-actions {
     border-bottom: $o-we-border-width solid $o-we-bg-lighter;
     height: 46px;
-
-    .o_rtl & {
-        .fa-undo, .fa-repeat {
-            transform: scaleX(-1);
-        }
-    }
 }
 
 .o-snippets-top-actions, .o-snippets-tabs {
@@ -103,7 +97,7 @@
             border-bottom-color: transparent;
         }
 
-        & .fa {
+        & .oi {
             color: var(--o-snippets-tabs-accent-color);
         }
     }
diff --git a/addons/html_builder/static/src/builder.xml b/addons/html_builder/static/src/builder.xml
index 404ac602a68bc8..dda014cb1ba2ba 100644
--- a/addons/html_builder/static/src/builder.xml
+++ b/addons/html_builder/static/src/builder.xml
@@ -5,11 +5,11 @@
     <div class="h-100 o-snippets-menu d-flex flex-column" t-custom-ref="builder_sidebar">
         <div class="o-snippets-top-actions d-flex justify-content-between flex-shrink-0 p-2">
             <div class="d-flex gap-1">
-                <button type="button" t-on-click="() => this.undo()" class="o-hb-btn btn fa fa-undo" t-att-disabled="!this.state.canUndo"/>
-                <button type="button"  t-on-click="() => this.redo()" class="o-hb-btn btn fa fa-repeat" t-att-disabled="!this.state.canRedo"/>
+                <button type="button" t-on-click="() => this.undo()" class="o-hb-btn btn oi" data-icon="undo" t-att-disabled="!this.state.canUndo"/>
+                <button type="button"  t-on-click="() => this.redo()" class="o-hb-btn btn oi" data-icon="redo" t-att-disabled="!this.state.canRedo"/>
             </div>
             <div class="d-flex gap-1">
-                <button t-on-click="this.onMobilePreviewClick" type="button" class="o-hb-btn btn btn-success-color-active d-flex align-items-center" t-att-class="{ active: this.props.isMobile }" data-action="mobile" title="Mobile Preview" accesskey="m" style="--btn-font-size: 20px"><span class="fa fa-mobile" role="img"/></button>
+                <button t-on-click="this.onMobilePreviewClick" type="button" class="o-hb-btn btn btn-success-color-active d-flex align-items-center" t-att-class="{ active: this.props.isMobile }" data-action="mobile" title="Mobile Preview" accesskey="m" style="--btn-font-size: 20px"><span class="oi" data-icon="mobile_2" role="img"/></button>
                 <t t-if="this.props.slots?.extraActions" t-slot="extraActions"/>
             </div>
         </div>
@@ -24,17 +24,17 @@
             <ul class="nav nav-underline" role="tablist">
                 <li class="nav-item" role="presentation">
                     <button id="blocks-tab" data-name="blocks" data-hotkey="1" class="o-hb-tab nav-link position-relative w-100" t-att-class="{'active cursor-default': this.state.activeTab === 'blocks'}" t-on-click="() => this.onTabClick('blocks')" t-att-disabled="this.props.onlyCustomizeTab" role="tab" t-att-aria-selected="this.state.activeTab === 'blocks' ? 'true' : 'false'">
-                        <i class="fa fa-plus me-2" role="none"/>Blocks
+                        <i class="oi me-2" data-icon="add" role="none"/>Blocks
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
                     <button id="customize-tab" data-name="customize" class="o-hb-tab nav-link position-relative w-100" t-att-class="{'active cursor-default': this.state.activeTab === 'customize'}" t-on-click="() => this.onTabClick('customize')" role="tab" t-att-aria-selected="this.state.activeTab === 'customize' ? 'true' : 'false'">
-                        <i class="fa fa-pencil me-2" role="none"/>Style
+                        <i class="oi oi-filled me-2" data-icon="edit" role="none"/>Style
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
                     <button id="theme-tab" data-name="theme" data-hotkey="2" t-if="this.ThemeTab" class="o-hb-tab nav-link position-relative w-100" t-att-class="{'active cursor-default': this.state.activeTab === 'theme'}" t-on-click="() => this.onTabClick('theme')" t-att-disabled="this.props.onlyCustomizeTab" role="tab" t-att-aria-selected="this.state.activeTab === 'theme' ? 'true' : 'false'">
-                        <i class="fa fa-cog me-2" role="none"/><t t-out="this.props.themeTabDisplayName"/>
+                        <i class="oi oi-filled me-2" data-icon="settings" role="none"/><t t-out="this.props.themeTabDisplayName"/>
                     </button>
                 </li>
             </ul>
diff --git a/addons/html_builder/static/src/core/anchor/anchor_dialog.xml b/addons/html_builder/static/src/core/anchor/anchor_dialog.xml
index 43e871d1af72d8..e4130123273114 100644
--- a/addons/html_builder/static/src/core/anchor/anchor_dialog.xml
+++ b/addons/html_builder/static/src/core/anchor/anchor_dialog.xml
@@ -18,7 +18,7 @@
             <button class="btn btn-primary" t-on-click="this.onConfirmClick">Save &amp; Copy</button>
             <button class="btn btn-secondary" t-on-click="this.props.close">Discard</button>
             <button class="btn btn-link ms-auto" t-on-click="this.onRemoveClick">
-                <i class="fa fa-icon fa-trash"/>
+                <i class="oi oi-filled" data-icon="delete"/>
                 Remove
             </button>
         </t>
diff --git a/addons/html_builder/static/src/core/anchor/anchor_plugin.js b/addons/html_builder/static/src/core/anchor/anchor_plugin.js
index 210342114f26a7..24df44edfcacb6 100644
--- a/addons/html_builder/static/src/core/anchor/anchor_plugin.js
+++ b/addons/html_builder/static/src/core/anchor/anchor_plugin.js
@@ -53,7 +53,8 @@ export class AnchorPlugin extends Plugin {
 
         return [
             {
-                class: "fa fa-fw fa-link oe_snippet_anchor btn o-hb-btn btn-accent-color-hover",
+                class: "oi oi-fw oe_snippet_anchor btn o-hb-btn btn-accent-color-hover",
+                icon: "link",
                 title: _t("Create and copy a link targeting this block or edit it"),
                 handler: this.createOrEditAnchorLink.bind(this),
             },
diff --git a/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml b/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml
index 9c7accaf9b3788..1bdef2f5807fae 100644
--- a/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml
+++ b/addons/html_builder/static/src/core/building_blocks/basic_many2many.xml
@@ -9,7 +9,7 @@
                     <input type="text" class="o-hb-input-base" disabled="" t-att-data-name="entry.display_name" t-att-value="entry.display_name"/>
                 </td>
                 <td>
-                    <button class="mt-0 border-0 p-0 bg-transparent text-danger fa fa-fw fa-minus" t-on-click="() => this.unselect(entry.id)"/>
+                    <button class="mt-0 border-0 p-0 bg-transparent text-danger oi oi-fw" data-icon="remove" t-on-click="() => this.unselect(entry.id)"/>
                 </td>
             </tr>
         </table>
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_button.js b/addons/html_builder/static/src/core/building_blocks/builder_button.js
index dcf832b08bf154..db51b14e716cb0 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_button.js
+++ b/addons/html_builder/static/src/core/building_blocks/builder_button.js
@@ -17,6 +17,7 @@ const builderButtonProps = {
     iconImgAlt: { type: String, optional: true },
     iconImgStyle: { type: String, optional: true },
     icon: { type: String, optional: true },
+    iconClass: { type: String, optional: true },
     className: { type: String, optional: true },
     classActive: { type: String, optional: true },
     style: { type: String, optional: true },
@@ -64,15 +65,6 @@ export class BuilderButtonInternal extends Component {
         }
         return className;
     }
-
-    get iconClassName() {
-        if (this.props.icon.startsWith("fa-")) {
-            return `fa ${this.props.icon}`;
-        } else if (this.props.icon.startsWith("oi-")) {
-            return `oi ${this.props.icon}`;
-        }
-        return "";
-    }
 }
 
 export class BuilderButton extends BuilderSelectableWrapperComponent {
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_button.scss b/addons/html_builder/static/src/core/building_blocks/builder_button.scss
index 3db2fd923208a3..86e88dd5fcbf63 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_button.scss
+++ b/addons/html_builder/static/src/core/building_blocks/builder_button.scss
@@ -7,7 +7,7 @@
     white-space: nowrap;
     min-height: var(--o-hb-btn-minHeight);
 
-    &.o-hb-btn-has-icon, &.fa, &.oi {
+    &.o-hb-btn-has-icon, &.oi {
         --btn-padding-x: var(--o-hb-btn-has-icon-paddingX, #{map-get($spacers , 2)});
 
         flex: 0 1 auto;
@@ -41,7 +41,7 @@
         }
     }
 
-    .fa, .oi, &:before {
+    .oi, &:before {
         line-height: inherit;
     }
 }
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_button.xml b/addons/html_builder/static/src/core/building_blocks/builder_button.xml
index 9e3c3ba225763b..1d1f671745479b 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_button.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_button.xml
@@ -21,7 +21,7 @@
             t-on-pointerenter="() => this.onPointerEnter(this.props.id)"
             t-on-pointerleave="() => this.onPointerLeave(this.props.id)">
             <Image t-if="this.props.iconImg" src="this.props.iconImg" attrs="{ alt: this.props.iconImgAlt }" style="this.props.iconImgStyle"/>
-            <i t-if="this.props.icon" t-att-class="this.iconClassName" role="img"/>
+            <i t-if="this.props.icon" t-attf-class="oi #{this.iconClassName} #{this.props.iconClass || ''}" t-att-data-icon="this.props.icon" role="img"/>
             <t t-if="this.props.label"  t-out="this.props.label"/>
             <t t-slot="default"/>
         </button>
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_fontfamilypicker.xml b/addons/html_builder/static/src/core/building_blocks/builder_fontfamilypicker.xml
index 8c983e6eb35971..7ada259f9960fd 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_fontfamilypicker.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_fontfamilypicker.xml
@@ -7,7 +7,7 @@
             <BuilderSelectItem t-props="this.forwardProps(font)">
                 <div class="d-flex justify-content-between align-items-center">
                     <span t-attf-style="font-family: {{font.styleFontFamily}};" class="text-truncate d-flex align-items-center">
-                        <i t-if="font.type === 'cloud'" role="button" class="me-2 fa fa-cloud" title="This font is hosted and served to your visitors by Google servers"></i>
+                        <i t-if="font.type === 'cloud'" role="button" class="me-2 oi" data-icon="cloud" title="This font is hosted and served to your visitors by Google servers"></i>
                         <t t-out="font.string"/>
                     </span>
                     <div class="text-end o_select_item_only ms-2">
@@ -15,7 +15,8 @@
                             <t t-set="delete_font_title">Delete this font</t>
                             <i role="button"
                                t-on-click.prevent.stop="() => this.onDeleteFontClick(font)"
-                               class="fa fa-trash-o o_we_delete_font_btn"
+                               class="oi o_we_delete_font_btn"
+                               data-icon="delete"
                                t-att-aria-label="delete_font_title"
                                t-att-title="delete_font_title"/>
                         </t>
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_list.xml b/addons/html_builder/static/src/core/building_blocks/builder_list.xml
index 2709723956f83f..cd33a11b334f34 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_list.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_list.xml
@@ -13,7 +13,7 @@
                             <tr class="o_row_draggable" t-att-data-id="item._id">
                                 <td t-if="this.props.sortable" class="o_handle_cell w-0">
                                     <button type="button" class="btn">
-                                        <i class="fa fa-fw fa-arrows" aria-hidden="true"/>
+                                        <i class="oi oi-fw" data-icon="open_with" aria-hidden="true"/>
                                         <span class="visually-hidden">Drag and sort field</span>
                                     </button>
                                 </td>
@@ -46,7 +46,7 @@
                                     <button type="button" class="btn text-danger builder_list_remove_item"
                                             t-if="this.props.isEditable and !(this.props.forbidLastItemRemoval and (items.length === 1))"
                                             t-on-click="() => this.deleteItem(item._id)">
-                                        <i class="fa fa-fw fa-minus" aria-hidden="true"/>
+                                        <i class="oi oi-fw" data-icon="remove" aria-hidden="true"/>
                                         <span class="visually-hidden">Delete item</span>
                                     </button>
                                 </td>
@@ -71,8 +71,8 @@
                                 <t t-out="this.props.addItemTitle"/>
                             </SelectMenu>
                         </div>
-                        <button type="button" class="btn btn-lg btn-secondary fa fa-refresh" title="Update the list with all records and sort it alphabetically" t-on-click="this.updateRecords"/>
-                        <button type="button" class="btn btn-lg btn-secondary fa fa-gear" title="Open the record list manager" t-on-click="this.openRecordsDialog"/>
+                        <button type="button" class="btn btn-lg btn-secondary oi" data-icon="refresh" title="Update the list with all records and sort it alphabetically" t-on-click="this.updateRecords"/>
+                        <button type="button" class="btn btn-lg btn-secondary oi oi-filled" data-icon="settings" title="Open the record list manager" t-on-click="this.openRecordsDialog"/>
                     </div>
                 </div>
             </div>
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_list_dialog.xml b/addons/html_builder/static/src/core/building_blocks/builder_list_dialog.xml
index abea8c16a812ff..bcea7f58948ef7 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_list_dialog.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_list_dialog.xml
@@ -9,7 +9,7 @@
                     <div class="d-flex justify-content-between align-items-center">
                         <h4 class="m-0">Excluded records</h4>
                         <button class="btn btn-sm btn-link p-0" t-on-click="this.includeAll">
-                            <i class="fa fa-plus me-1" />Include all</button>
+                            <i class="oi me-1" data-icon="add" />Include all</button>
                     </div>
                     <div class="o_list_panel overflow-auto border mt-2">
                         <h3 t-if="this.searchExcluded.length === 0" class="text-center text-muted my-2">No record.</h3>
@@ -18,7 +18,7 @@
                                 t-on-click="() => this.include(record)">
                                 <div class="d-flex align-items-center">
                                     <span class="overflow-hidden w-100" t-out="record.display_name" />
-                                    <span title="Include record" class="fa fa-plus float-end m-1 pe-2" />
+                                    <span title="Include record" class="oi float-end m-1 pe-2" data-icon="add"/>
                                 </div>
                             </div>
                         </t>
@@ -28,7 +28,7 @@
                     <div class="d-flex justify-content-between align-items-center">
                         <h4 class="m-0">Included records</h4>
                         <button class="btn btn-sm btn-link p-0" t-on-click="this.excludeAll">
-                            <i class="fa fa-minus me-1" />Exclude all</button>
+                            <i class="oi me-1" data-icon="remove"/>Exclude all</button>
                     </div>
                     <div class="o_list_panel overflow-auto border mt-2">
                         <h3 t-if="this.searchIncluded.length === 0" class="text-center text-muted my-2">No record.</h3>
@@ -37,7 +37,7 @@
                                 t-on-click="() => this.exclude(record)">
                                 <div class="d-flex align-items-center">
                                     <span class="overflow-hidden w-100" t-out="record.display_name" />
-                                    <span class="fa fa-minus m-1 pe-2 float-end" title="Exclude record" />
+                                    <span class="oi m-1 pe-2 float-end" data-icon="remove" title="Exclude record" />
                                 </div>
                             </div>
                         </t>
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_many2one.xml b/addons/html_builder/static/src/core/building_blocks/builder_many2one.xml
index 2326c6d3977964..6f9f71459c1c1a 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_many2one.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_many2one.xml
@@ -27,7 +27,7 @@
                 t-on-focusin="this.hasPreview ? () => this.preview() : () => {}"
                 t-on-focusout="this.revert"
                 aria-label="Unselect">
-            <i class="oi oi-close" role="presentation"/>
+            <i class="oi" data-icon="close_small" role="presentation"/>
         </button>
     </BuilderComponent>
 </t>
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_number_input_base.xml b/addons/html_builder/static/src/core/building_blocks/builder_number_input_base.xml
index da6ac410bcdd0b..ec3663ec1129a0 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_number_input_base.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_number_input_base.xml
@@ -13,7 +13,7 @@
         t-att-data-attribute-action="this.info.attributeAction"
         t-att-data-attribute-action-value="this.info.attributeActionValue">
         <span t-if="this.props.prefix" class="o-hb-input-prefix" t-out="this.props.prefix"/>
-        <i t-if="this.props.prefixIcon" role="img" t-att-class="'o-hb-input-prefix ' + this.props.prefixIcon"/> 
+        <i t-if="this.props.prefixIcon" role="img" class="o-hb-input-prefix oi" t-att-data-icon="this.props.prefixIcon"/> 
         <input
             t-custom-ref="inputRef"
             t-att-type="this.props.composable ? 'text' : 'number'"
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_row.scss b/addons/html_builder/static/src/core/building_blocks/builder_row.scss
index fdff03a6459bfb..6bf72c9bc82ead 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_row.scss
+++ b/addons/html_builder/static/src/core/building_blocks/builder_row.scss
@@ -19,7 +19,7 @@
         --o-hb-row-color: var(--o-hb-row-color-popover, #{$o-we-bg-lightest});
         --o-hb-row-color-active: var(--o-hb-row-color-active-popover, #{$o-we-bg-darkest});
         --o-hb-row-sublevel-color: var(--o-hb-row-sublevel-color-popover, #{mix($o-we-bg-lighter, $o-we-fg-light)});
-        .hb-row-content:has(button.fa-trash) {
+        .hb-row-content:has(button[data-icon="delete"]) {
             align-items: stretch;
         }
         .hb-row-label {
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_row.xml b/addons/html_builder/static/src/core/building_blocks/builder_row.xml
index 210effbae81dd2..02ac3aedc0eeba 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_row.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_row.xml
@@ -16,13 +16,13 @@
                 t-custom-ref="collapse"
                 t-if="this.props.slots.collapse"
                 class="o_hb_collapse_toggler btn border-0 bg-transparent"
-                t-att-class="{ 'active fa-rotate-90': this.state.expanded }"
+                t-att-class="{ 'active oi-rotate-90': this.state.expanded }"
                 title="Toggle more options"
                 t-on-click="this.toggleCollapseContent"
                 t-att-aria-expanded="this.state.expanded ? 'true' : 'false'"
                 t-att-aria-controls="this.collapseContentId">
                 <i
-                    class="fa fa-caret-right"
+                    class="oi" data-icon="arrow_right"
                     role="img"
                 />
             </button>
@@ -38,7 +38,7 @@
                     >
 
                     <span class="text-nowrap text-truncate" t-out="this.props.label" t-custom-ref="label"/>
-                    <i t-if="this.props.tooltip" class="fa fa-question icon-sup" t-att-class="this.env.langDir.builder === 'rtl' ? 'fa-flip-horizontal' : ''"/>
+                    <i t-if="this.props.tooltip" class="oi icon-sup" data-icon="help" t-att-class="this.env.langDir.builder === 'rtl' ? 'oi-flip-horizontal' : ''"/>
                 </div>
                 <div
                     class="hb-row-content d-flex"
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_sliding_panel.js b/addons/html_builder/static/src/core/building_blocks/builder_sliding_panel.js
index 5b2a12b5693fcb..1a78d564457542 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_sliding_panel.js
+++ b/addons/html_builder/static/src/core/building_blocks/builder_sliding_panel.js
@@ -13,6 +13,7 @@ export class BuilderSlidingPanel extends Component {
         ...basicContainerBuilderComponentProps,
         label: { type: String, optional: false },
         extraClasses: { type: String, optional: true },
+        icon: { type: String, optional: true },
         fullHeight: { type: Boolean, optional: true },
         darkBackground: { type: Boolean, optional: true },
         openByDefault: { type: Boolean, optional: true },
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_sliding_panel.xml b/addons/html_builder/static/src/core/building_blocks/builder_sliding_panel.xml
index d3eb8969a7d1d3..f367c0d63e78e5 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_sliding_panel.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_sliding_panel.xml
@@ -6,6 +6,7 @@
         class="o-hb-btn btn"
         t-on-click="this.showSlidingPanel"
         t-att-class="this.props.extraClasses"
+        t-att-data-icon="this.props.icon"
     >
         <t t-slot="default"/>
     </button>
@@ -18,7 +19,7 @@
             <div class="hb-sliding-panel-header">
                 <div class="hb-sliding-panel-label d-flex align-items-center p-2">
                     <button class="btn p-1" t-on-click="this.hideSlidingPanel" aria-label="close" tabindex="0" >
-                        <i class="oi oi-chevron-left me-1" role="presentation"/>
+                        <i class="oi me-1" data-icon="chevron_backward" role="presentation"/>
                         <t t-out="this.state.optionContainerName + ' / ' + this.props.label"/>
                     </button>
                 </div>
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.xml b/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.xml
index 6dc3518049955e..17cf79b6826fe9 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_urlpicker.xml
@@ -11,7 +11,7 @@
                 value="this.state.value"
         >
             <button class="btn" title="Preview this URL in a new tab" t-on-click="this.openPreviewUrl">
-                <i class="fa fa-fw fa-external-link"/>
+                <i class="oi oi-fw" data-icon="open_in_new"/>
             </button>
         </BuilderTextInputBase>
     </BuilderComponent>
diff --git a/addons/html_builder/static/src/core/building_blocks/color_picker_theme_tab.xml b/addons/html_builder/static/src/core/building_blocks/color_picker_theme_tab.xml
index 313685dd230731..bbc31e2310c1cb 100644
--- a/addons/html_builder/static/src/core/building_blocks/color_picker_theme_tab.xml
+++ b/addons/html_builder/static/src/core/building_blocks/color_picker_theme_tab.xml
@@ -26,7 +26,8 @@
                     </div>
                 </button>
                 <button t-on-click="() => this.props.editColorCombination(number)"
-                    class="o-hb-edit-color-combination o_colorpicker_ignore fa fa-pencil btn ms-1 px-1"
+                    class="o-hb-edit-color-combination o_colorpicker_ignore oi oi-filled btn ms-1 px-1"
+                    data-icon="edit"
                     title="Edit"/>
             </div>
         </t>
diff --git a/addons/html_builder/static/src/core/building_blocks/select_many2x.scss b/addons/html_builder/static/src/core/building_blocks/select_many2x.scss
index 180faaeec9068f..07da1bdd7c229e 100644
--- a/addons/html_builder/static/src/core/building_blocks/select_many2x.scss
+++ b/addons/html_builder/static/src/core/building_blocks/select_many2x.scss
@@ -45,8 +45,8 @@
                 @include o-position-absolute(50%, map-get($spacers, 1));
                 transform: translate(-50%, -50%);
                 font-size: .5rem;
-                content: "\f0d7";
-                font-family: FontAwesome;
+                content: "arrow_drop_down";
+                font-family: 'material_symbols_sharp';
             }
 
             // Tweak `bg-light` to inherit btn values
diff --git a/addons/html_builder/static/src/core/clone_plugin.js b/addons/html_builder/static/src/core/clone_plugin.js
index 930cfe4fc5519d..0b7fde087fedfa 100644
--- a/addons/html_builder/static/src/core/clone_plugin.js
+++ b/addons/html_builder/static/src/core/clone_plugin.js
@@ -55,7 +55,8 @@ export class ClonePlugin extends Plugin {
         this.overlayTarget = target;
         const disabledReason = this.dependencies.builderOptions.getCloneDisabledReason(target);
         buttons.push({
-            class: "o_snippet_clone fa fa-clone",
+            class: "o_snippet_clone oi",
+            icon: "content_copy",
             title: _t("Duplicate"),
             disabledReason,
             handler: async () => {
diff --git a/addons/html_builder/static/src/core/drag_and_drop_move_handle.xml b/addons/html_builder/static/src/core/drag_and_drop_move_handle.xml
index 2b73bf0fff1222..e13d226a081430 100644
--- a/addons/html_builder/static/src/core/drag_and_drop_move_handle.xml
+++ b/addons/html_builder/static/src/core/drag_and_drop_move_handle.xml
@@ -1,7 +1,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.DragAndDropMoveHandle">
-    <button class="btn btn-light o_move_handle fa fa-arrows"
+    <button class="btn btn-light o_move_handle oi" data-icon="open_with"
             t-att-title="this.title" t-att-aria-label="this.title"/>
 </t>
 
diff --git a/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js b/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js
index a5621d327d8e18..9e308bb5c1f781 100644
--- a/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js
+++ b/addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js
@@ -100,12 +100,14 @@ export class GridLayoutPlugin extends Plugin {
         if (!this.config.isMobileView(this.overlayTarget)) {
             buttons.push(
                 {
-                    class: "o_send_back oi-send-back oi",
+                    class: "o_send_back oi",
+                    icon: "flip_to_back",
                     title: _t("Send to back"),
                     handler: this.sendGridItemToBack.bind(this),
                 },
                 {
-                    class: "o_bring_front oi-bring-front oi",
+                    class: "o_bring_front oi",
+                    icon: "flip_to_front",
                     title: _t("Bring to front"),
                     handler: this.bringGridItemToFront.bind(this),
                 }
diff --git a/addons/html_builder/static/src/core/move_plugin.js b/addons/html_builder/static/src/core/move_plugin.js
index 3e0a0b46e8ba85..d19900e405311b 100644
--- a/addons/html_builder/static/src/core/move_plugin.js
+++ b/addons/html_builder/static/src/core/move_plugin.js
@@ -157,7 +157,8 @@ export class MovePlugin extends Plugin {
             if (previousSiblingEl) {
                 const direction = isVertical ? "up" : reverseButtons ? "right" : "left";
                 const button = {
-                    class: `fa fa-fw fw-bolder fa-angle-${direction}`,
+                    class: "oi oi-fw fw-bolder",
+                    icon: `keyboard_arrow_${direction}`,
                     title: isVertical
                         ? _t("Move up")
                         : this.isEditableRTL
@@ -171,7 +172,8 @@ export class MovePlugin extends Plugin {
             if (nextSiblingEl) {
                 const direction = isVertical ? "down" : reverseButtons ? "left" : "right";
                 const button = {
-                    class: `fa fa-fw fw-bolder fa-angle-${direction}`,
+                    class: "oi oi-fw fw-bolder",
+                    icon: `keyboard_arrow_${direction}`,
                     title: isVertical
                         ? _t("Move down")
                         : this.isEditableRTL
diff --git a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.scss b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.scss
index 723181caca25dc..fad65770e9f48c 100644
--- a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.scss
+++ b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.scss
@@ -3,7 +3,7 @@
     align-items: center;
 
     button {
-        &.fa, &.oi {
+        &.oi {
             min-width: min-content;
         }
     }
diff --git a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.xml b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.xml
index 5ddf2a2ecb67a0..7c66244a4c279f 100644
--- a/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.xml
+++ b/addons/html_builder/static/src/core/overlay_buttons/overlay_buttons.xml
@@ -8,6 +8,7 @@
                 <t t-if="button.Component" t-component="button.Component" t-props="button.props || {}"/>
                 <t t-else="">
                     <button class="btn btn-light" t-att-class="button.class"
+                            t-att-data-icon="button.icon"
                             t-att-title="button.title" t-att-aria-label="button.title"
                             t-att-disabled="!!button.disabledReason"
                             t-on-click="button.handler"/>
diff --git a/addons/html_builder/static/src/core/remove_plugin.js b/addons/html_builder/static/src/core/remove_plugin.js
index 7cf6b90e423019..f50bce6fc97d8a 100644
--- a/addons/html_builder/static/src/core/remove_plugin.js
+++ b/addons/html_builder/static/src/core/remove_plugin.js
@@ -98,7 +98,8 @@ export class RemovePlugin extends Plugin {
         this.overlayTarget = target;
         const disabledReason = this.dependencies.builderOptions.getRemoveDisabledReason(target);
         buttons.push({
-            class: "oe_snippet_remove text-danger fa fa-trash",
+            class: "oe_snippet_remove text-danger oi oi-filled",
+            icon: "delete",
             title: _t("Remove"),
             disabledReason,
             handler: () => {
diff --git a/addons/html_builder/static/src/core/save_snippet_plugin.js b/addons/html_builder/static/src/core/save_snippet_plugin.js
index 6b073e94f29855..e798ac724f731e 100644
--- a/addons/html_builder/static/src/core/save_snippet_plugin.js
+++ b/addons/html_builder/static/src/core/save_snippet_plugin.js
@@ -32,7 +32,8 @@ export class SaveSnippetPlugin extends Plugin {
 
         return [
             {
-                class: "fa fa-fw fa-save oe_snippet_save o_we_hover_warning btn o-hb-btn btn-global-color-hover",
+                class: "oi oi-fw oe_snippet_save o_we_hover_warning btn o-hb-btn btn-global-color-hover",
+                icon: "save",
                 title: _t("Save this block to use it elsewhere"),
                 handler: this.saveSnippet.bind(this),
             },
diff --git a/addons/html_builder/static/src/plugins/alert_option.xml b/addons/html_builder/static/src/plugins/alert_option.xml
index 5aa037ef4087e9..a844188c8fcc68 100644
--- a/addons/html_builder/static/src/plugins/alert_option.xml
+++ b/addons/html_builder/static/src/plugins/alert_option.xml
@@ -4,14 +4,14 @@
 <t t-name="html_builder.AlertOption">
     <BuilderRow label.translate="Type">
         <BuilderSelect>
-            <BuilderSelectItem classAction="'alert-primary'" action="'alertIcon'" actionParam="'fa-user-circle'">Primary</BuilderSelectItem>
-            <BuilderSelectItem classAction="'alert-secondary'" action="'alertIcon'" actionParam="'fa-user-circle-o'">Secondary</BuilderSelectItem>
-            <BuilderSelectItem classAction="'alert-info'" action="'alertIcon'" actionParam="'fa-info-circle'">Info</BuilderSelectItem>
-            <BuilderSelectItem classAction="'alert-success'" action="'alertIcon'" actionParam="'fa-check-circle'">Success</BuilderSelectItem>
-            <BuilderSelectItem classAction="'alert-warning'" action="'alertIcon'" actionParam="'fa-exclamation-triangle'">Warning</BuilderSelectItem>
-            <BuilderSelectItem classAction="'alert-danger'" action="'alertIcon'" actionParam="'fa-exclamation-circle'">Danger</BuilderSelectItem>
-            <BuilderSelectItem classAction="'alert-light'" action="'alertIcon'" actionParam="'fa-info-circle'">Light</BuilderSelectItem>
-            <BuilderSelectItem classAction="'alert-dark'" action="'alertIcon'" actionParam="'fa-info-circle'">Dark</BuilderSelectItem>
+            <BuilderSelectItem classAction="'alert-primary'" action="'alertIcon'" actionParam="'account_circle'">Primary</BuilderSelectItem>
+            <BuilderSelectItem classAction="'alert-secondary'" action="'alertIcon'" actionParam="'account_circle'">Secondary</BuilderSelectItem>
+            <BuilderSelectItem classAction="'alert-info'" action="'alertIcon'" actionParam="'info'">Info</BuilderSelectItem>
+            <BuilderSelectItem classAction="'alert-success'" action="'alertIcon'" actionParam="'check_circle'">Success</BuilderSelectItem>
+            <BuilderSelectItem classAction="'alert-warning'" action="'alertIcon'" actionParam="'warning'">Warning</BuilderSelectItem>
+            <BuilderSelectItem classAction="'alert-danger'" action="'alertIcon'" actionParam="'error'">Danger</BuilderSelectItem>
+            <BuilderSelectItem classAction="'alert-light'" action="'alertIcon'" actionParam="'info'">Light</BuilderSelectItem>
+            <BuilderSelectItem classAction="'alert-dark'" action="'alertIcon'" actionParam="'info'">Dark</BuilderSelectItem>
         </BuilderSelect>
     </BuilderRow>
 </t>
diff --git a/addons/html_builder/static/src/plugins/alert_option_plugin.js b/addons/html_builder/static/src/plugins/alert_option_plugin.js
index 1ad9cf3cf4d7cc..8e1bf0862db129 100644
--- a/addons/html_builder/static/src/plugins/alert_option_plugin.js
+++ b/addons/html_builder/static/src/plugins/alert_option_plugin.js
@@ -1,5 +1,4 @@
 import { Plugin } from "@html_editor/plugin";
-import { fonts } from "@html_editor/utils/fonts";
 import { registry } from "@web/core/registry";
 import { BuilderAction } from "@html_builder/core/builder_action";
 
@@ -21,24 +20,20 @@ export class AlertIconAction extends BuilderAction {
         if (!icon) {
             return;
         }
-        fonts.computeFonts();
-        const allFaIcons = fonts.fontIcons[0].alias;
-        icon.classList.remove(...allFaIcons);
-        icon.classList.add(className);
+        icon.dataset.icon = className;
     }
     clean({ editingElement, params: { mainParam: className } }) {
         const icon = editingElement.querySelector(".s_alert_icon");
         if (!icon) {
             return;
         }
-        icon.classList.remove(className);
     }
     isApplied({ editingElement, params: { mainParam: className } }) {
         const iconEl = editingElement.querySelector(".s_alert_icon");
         if (!iconEl) {
             return;
         }
-        return iconEl.classList.contains(className);
+        return iconEl.dataset.icon.includes(className);
     }
 }
 registry.category("builder-plugins").add(AlertOptionPlugin.id, AlertOptionPlugin);
diff --git a/addons/html_builder/static/src/plugins/background_option/background_image.xml b/addons/html_builder/static/src/plugins/background_option/background_image.xml
index 1906154070e6f2..4ec4768245c092 100644
--- a/addons/html_builder/static/src/plugins/background_option/background_image.xml
+++ b/addons/html_builder/static/src/plugins/background_option/background_image.xml
@@ -4,7 +4,7 @@
 <t t-name="html_builder.BackgroundImageOption">
     <BuilderRow t-if="this.isActiveItem('toggle_bg_image_id')" label.translate="Image" level="1">
         <BuilderButton preview="false" title.translate="Edit image" type="'success'" action="'replaceBgImage'"> Replace </BuilderButton>
-        <BuilderButton preview="false" title.translate="Remove image" icon="'oi-close'" action="'removeBgImage'" className="'btn-danger-color-hover'"/>
+        <BuilderButton preview="false" title.translate="Remove image" icon="'close_small'" action="'removeBgImage'" className="'btn-danger-color-hover'"/>
         <ImageSize />
     </BuilderRow>
     <BuilderRow t-if="this.showMainColorPicker()" label.translate="Main Color" level="2">
diff --git a/addons/html_builder/static/src/plugins/background_option/background_option.xml b/addons/html_builder/static/src/plugins/background_option/background_option.xml
index 5f2b74afb67ff6..66dabe70cc9ba2 100644
--- a/addons/html_builder/static/src/plugins/background_option/background_option.xml
+++ b/addons/html_builder/static/src/plugins/background_option/background_option.xml
@@ -12,7 +12,9 @@
                 title.translate="Add a background image"
                 titleActive.translate="Remove the background image"
                 preview="false"
-                className="'ms-auto fa fa-fw fa-camera px-2'"
+                className="'ms-auto px-2'"
+                icon="'photo_camera'"
+                iconClass="'oi-fw'"
                 id="'toggle_bg_image_id'"
             />
         </t>
diff --git a/addons/html_builder/static/src/plugins/background_option/background_position_option.xml b/addons/html_builder/static/src/plugins/background_option/background_position_option.xml
index f5652c29425a26..0432404dc7a9ee 100644
--- a/addons/html_builder/static/src/plugins/background_option/background_position_option.xml
+++ b/addons/html_builder/static/src/plugins/background_option/background_position_option.xml
@@ -8,7 +8,7 @@
                 <BuilderSelectItem actionValue="'cover'">Cover</BuilderSelectItem>
                 <BuilderSelectItem actionValue="'repeat-pattern'" id="'background_repeat_opt'">Repeat pattern</BuilderSelectItem>
             </BuilderSelect>
-            <BuilderButton icon="'fa-arrows-alt'" title.translate="Background Position" preview="false" action="'backgroundPositionOverlay'"/>
+            <BuilderButton icon="'open_with'" title.translate="Background Position" preview="false" action="'backgroundPositionOverlay'"/>
         </BuilderRow>
         <BuilderContext t-if="this.isActiveItem('background_repeat_opt')" action="'setBackgroundSize'">
             <BuilderRow label.translate="Width" level="3">
diff --git a/addons/html_builder/static/src/plugins/background_option/background_shape_option.xml b/addons/html_builder/static/src/plugins/background_option/background_shape_option.xml
index fe6ecfeed53313..e2c81cb52adc39 100644
--- a/addons/html_builder/static/src/plugins/background_option/background_shape_option.xml
+++ b/addons/html_builder/static/src/plugins/background_option/background_shape_option.xml
@@ -27,7 +27,7 @@
                 action="'setBackgroundShape'" 
                 actionValue="''" 
                 preview="false"
-                icon="'oi-close'"
+                icon="'close_small'"
                 className="'btn-danger-color-hover border-start-0 rounded-start-0 m-0 py-0 flex-grow-0'"
                 t-if="this.state.hasShape"/>
             </div>
@@ -36,8 +36,8 @@
                 action="'showOnMobile'"
                 preview="false"
                 className="'o-hb-btn-has-img-icon o_hb_device btn-danger-color-active'"
-                t-if="this.state.hasShape">
-                <Image src="'/html_builder/static/img/options/mobile_invisible.svg'" style="'width: 12px'" />
+                t-if="this.state.hasShape"
+                icon="'mobile_off'">
             </BuilderButton>
     </BuilderRow>
 
@@ -57,12 +57,12 @@
         <BuilderRow label.translate="Transform" level="1" preview="false">
             <BuilderButton
                 title.translate="Horizontal flip"
-                icon="'oi-arrows-h'"
+                icon="'arrow_range'"
                 action="'flipShape'"
                 actionParam="'x'"/>
             <BuilderButton
                 title.translate="Vertical flip"
-                icon="'oi-arrows-v'"
+                icon="'height'"
                 action="'flipShape'"
                 actionParam="'y'"/>
         </BuilderRow>
diff --git a/addons/html_builder/static/src/plugins/block_alignment_option.xml b/addons/html_builder/static/src/plugins/block_alignment_option.xml
index 4f2b8f8fcfdf00..f502cbc24f5fd6 100644
--- a/addons/html_builder/static/src/plugins/block_alignment_option.xml
+++ b/addons/html_builder/static/src/plugins/block_alignment_option.xml
@@ -4,9 +4,9 @@
 <t t-name="html_builder.BlockAlignmentOption">
     <BuilderRow label.translate="Alignment" t-if="!this.isActiveItem('so_width_100')" level="1">
         <BuilderButtonGroup>
-            <BuilderButton ltrRtlMapping="'left-right'" classAction="'me-auto'" icon="'fa-align-left'" title.translate="Left"/>
-            <BuilderButton icon="'fa-align-center'" title.translate="Center" classAction="'mx-auto'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" classAction="'ms-auto'" icon="'fa-align-right'" title.translate="Right"/>
+            <BuilderButton ltrRtlMapping="'left-right'" classAction="'me-auto'" icon="'format_align_left'" title.translate="Left"/>
+            <BuilderButton icon="'format_align_center'" title.translate="Center" classAction="'mx-auto'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" classAction="'ms-auto'" icon="'format_align_right'" title.translate="Right"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/html_builder/static/src/plugins/image/image_shape_option.xml b/addons/html_builder/static/src/plugins/image/image_shape_option.xml
index 40a205a1805f4e..f63c43c317471a 100644
--- a/addons/html_builder/static/src/plugins/image/image_shape_option.xml
+++ b/addons/html_builder/static/src/plugins/image/image_shape_option.xml
@@ -25,7 +25,7 @@
                 action="'setImageShape'"
                 actionValue=""
                 preview="false"
-                icon="'oi-close'"
+                icon="'close_small'"
                 className="'btn-danger-color-hover border-start-0 rounded-start-0 m-0 py-0 flex-grow-0'"
                 t-if="this.state.hasShape"/>
         </div>
@@ -46,27 +46,27 @@
         <BuilderRow label.translate="Transform" level="1" t-if="this.state.showImageShapeTransform" preview="false">
             <BuilderButton
                 title.translate="Horizontal flip"
-                icon="'oi-arrows-h'"
+                icon="'arrow_range'"
                 action="'flipImageShape'"
                 actionParam="{axis: 'x'}"/>
             <BuilderButton
                 title.translate="Vertical flip"
-                icon="'oi-arrows-v'"
+                icon="'height'"
                 action="'flipImageShape'"
                 actionParam="{axis: 'y'}"/>
             <BuilderButton
                 title.translate="Rotate left"
-                icon="'fa-rotate-left'"
+                icon="'undo'"
                 action="'rotateImageShape'"
                 actionParam="{side: 'left'}"/>
             <BuilderButton
                 title.translate="Rotate right"
-                icon="'fa-rotate-right'"
+                icon="'redo'"
                 action="'rotateImageShape'"
                 actionParam="{side: 'right'}"/>
             <BuilderButton
                 title.translate="Reset shape transformation"
-                icon="'oi-close'"
+                icon="'close_small'"
                 action="'resetImageShapeTransformation'"
                 className="'btn-danger-color-hover'"
                 t-if="this.state.hasShapeTransformation"/>
diff --git a/addons/html_builder/static/src/plugins/image/image_tool_option.xml b/addons/html_builder/static/src/plugins/image/image_tool_option.xml
index a78f56a888b306..b7baa393dc11dc 100644
--- a/addons/html_builder/static/src/plugins/image/image_tool_option.xml
+++ b/addons/html_builder/static/src/plugins/image/image_tool_option.xml
@@ -7,8 +7,8 @@
     </t>
     <BuilderRow label.translate="Transform" level="1" preview="false">
         <div class="btn-group o-hb-button-group">
-            <BuilderButton title.translate="Crop image" action="'cropImage'" icon="'fa-crop'" id="'cropImage'" />
-            <BuilderButton title.translate="Reset crop" action="'resetCrop'" t-if="this.isActiveItem('cropImage')" icon="'oi-close'" className="'btn-danger-color-hover border-start-0 rounded-start-0 m-0 py-0 flex-grow-0'" />
+            <BuilderButton title.translate="Crop image" action="'cropImage'" icon="'crop'" id="'cropImage'" />
+            <BuilderButton title.translate="Reset crop" action="'resetCrop'" t-if="this.isActiveItem('cropImage')" icon="'close_small'" className="'btn-danger-color-hover border-start-0 rounded-start-0 m-0 py-0 flex-grow-0'" />
         </div>
         <ImageTransformOption t-if="!this.state.isImageAnimated and !this.state.isSocialMediaImg" />
     </BuilderRow>
@@ -44,10 +44,10 @@
         </BuilderSelect>
     </BuilderRow>
     <BuilderRow label.translate="Style">
-        <BuilderButton icon="'fa-square'" classAction="'rounded'" title.translate="Shape: Rounded"/>
-        <BuilderButton icon="'fa-circle-o'" classAction="'rounded-circle'" title.translate="Shape: Circle"/>
-        <BuilderButton icon="'fa-sun-o'" classAction="'shadow'" title.translate="Shadow"/>
-        <BuilderButton icon="'fa-picture-o'" classAction="'img-thumbnail'" title.translate="Shape: Thumbnail"/>
+        <BuilderButton icon="'square'" classAction="'rounded'" title.translate="Shape: Rounded"/>
+        <BuilderButton icon="'circle'" classAction="'rounded-circle'" title.translate="Shape: Circle"/>
+        <BuilderButton icon="'shadow'" classAction="'shadow'" title.translate="Shadow"/>
+        <BuilderButton icon="'image'" classAction="'img-thumbnail'" title.translate="Shape: Thumbnail"/>
     </BuilderRow>
 
     <BuilderRow label.translate="Padding">
diff --git a/addons/html_builder/static/src/plugins/image/image_transform_option.xml b/addons/html_builder/static/src/plugins/image/image_transform_option.xml
index 6eb9c7799405bc..afe15bd824f36a 100644
--- a/addons/html_builder/static/src/plugins/image/image_transform_option.xml
+++ b/addons/html_builder/static/src/plugins/image/image_transform_option.xml
@@ -1,8 +1,8 @@
 <templates xml:space="preserve">
     <t t-name="website.ImageTransformOption">
         <div class="btn-group o-hb-button-group">
-            <BuilderButton title.translate="Transform the picture" id="'transform_image'" action="'transformImage'" actionParam="{ isImageTransformationOpen: this.transform.isImageTransformationOpen, closeImageTransformation: this.closeImageTransformation.bind(this) }" icon="'fa-object-ungroup'" />
-            <BuilderButton title.translate="Reset transformation" action="'resetTransformImage'" t-if="this.isActiveItem('transform_image')" actionParam="this.closeImageTransformation.bind(this)" icon="'oi-close'" className="'btn-danger-color-hover border-start-0 rounded-start-0 m-0 py-0 flex-grow-0'" />
+            <BuilderButton title.translate="Transform the picture" id="'transform_image'" action="'transformImage'" actionParam="{ isImageTransformationOpen: this.transform.isImageTransformationOpen, closeImageTransformation: this.closeImageTransformation.bind(this) }" icon="'deselect'" />
+            <BuilderButton title.translate="Reset transformation" action="'resetTransformImage'" t-if="this.isActiveItem('transform_image')" actionParam="this.closeImageTransformation.bind(this)" icon="'close_small'" className="'btn-danger-color-hover border-start-0 rounded-start-0 m-0 py-0 flex-grow-0'" />
         </div>
     </t>
 </templates>
diff --git a/addons/html_builder/static/src/plugins/image/media_size_option.xml b/addons/html_builder/static/src/plugins/image/media_size_option.xml
index b068a138677d88..6b09e6cf106588 100644
--- a/addons/html_builder/static/src/plugins/image/media_size_option.xml
+++ b/addons/html_builder/static/src/plugins/image/media_size_option.xml
@@ -25,7 +25,7 @@
         <BuilderButton
             title.translate="Auto"
             action="'setMediaSizeAuto'">
-            <i class="fa fa-fw fa-expand" />
+            <i class="oi oi-fw" data-icon="expand_content" />
         </BuilderButton>
     </BuilderRow>
 </t>
diff --git a/addons/html_builder/static/src/plugins/image/replace_media_option.js b/addons/html_builder/static/src/plugins/image/replace_media_option.js
index ed21dedbe4b417..55d6875e2e999f 100644
--- a/addons/html_builder/static/src/plugins/image/replace_media_option.js
+++ b/addons/html_builder/static/src/plugins/image/replace_media_option.js
@@ -32,7 +32,7 @@ export class ReplaceMediaOption extends BaseOptionComponent {
         } else if (classes.contains("img")) {
             return _t("Replace Image");
         } else if (
-            classes.contains("fa") ||
+            classes.contains("oi") ||
             Array.from(classes).some((cls) => cls.startsWith("s_share_"))
         ) {
             return _t("Replace Icon");
diff --git a/addons/html_builder/static/src/plugins/image/replace_media_option.xml b/addons/html_builder/static/src/plugins/image/replace_media_option.xml
index f068540602b252..b5bc9fcfbb8024 100644
--- a/addons/html_builder/static/src/plugins/image/replace_media_option.xml
+++ b/addons/html_builder/static/src/plugins/image/replace_media_option.xml
@@ -10,7 +10,7 @@
             type="'success'"
             preview="false"
             label.translate="Replace" />
-        <BuilderButton icon="'fa-link'"
+        <BuilderButton icon="'link'"
             t-if="this.state.canSetLink"
             id="'media_link_opt'"
             action="'setLink'"
diff --git a/addons/html_builder/static/src/plugins/rating_option.xml b/addons/html_builder/static/src/plugins/rating_option.xml
index d619a5dcfc47ea..ef3ef9fcfb0b89 100644
--- a/addons/html_builder/static/src/plugins/rating_option.xml
+++ b/addons/html_builder/static/src/plugins/rating_option.xml
@@ -4,21 +4,21 @@
 <t t-name="html_builder.RatingOption">
     <BuilderRow label.translate="Icon">
         <BuilderSelect>
-            <BuilderSelectItem action="'setIcons'" actionParam="'fa-star'">Stars</BuilderSelectItem>
-            <BuilderSelectItem action="'setIcons'" actionParam="'fa-thumbs-up'">Thumbs</BuilderSelectItem>
-            <BuilderSelectItem action="'setIcons'" actionParam="'fa-circle'">Circles</BuilderSelectItem>
-            <BuilderSelectItem action="'setIcons'" actionParam="'fa-square'">Squares</BuilderSelectItem>
-            <BuilderSelectItem action="'setIcons'" actionParam="'fa-heart'">Hearts</BuilderSelectItem>
+            <BuilderSelectItem action="'setIcons'" actionParam="'star'">Stars</BuilderSelectItem>
+            <BuilderSelectItem action="'setIcons'" actionParam="'thumb_up'">Thumbs</BuilderSelectItem>
+            <BuilderSelectItem action="'setIcons'" actionParam="'circle'">Circles</BuilderSelectItem>
+            <BuilderSelectItem action="'setIcons'" actionParam="'square'">Squares</BuilderSelectItem>
+            <BuilderSelectItem action="'setIcons'" actionParam="'favorite'">Hearts</BuilderSelectItem>
             <BuilderSelectItem action="'setIcons'" actionParam="'custom'">Custom</BuilderSelectItem>
         </BuilderSelect>
     </BuilderRow>
     <BuilderRow label.translate="Active" level="1">
         <BuilderColorPicker applyTo="'.s_rating_active_icons'" styleAction="'color'" enabledTabs="['solid', 'custom']"/>
-        <BuilderButton action="'customIcon'" actionParam="'customActiveIcon'" preview="false"><i class="fa fa-fw fa-refresh me-1"/> Replace Icon</BuilderButton>
+        <BuilderButton action="'customIcon'" actionParam="'customActiveIcon'" preview="false"><i class="oi oi-fw me-1" data-icon="refresh"/> Replace Icon</BuilderButton>
     </BuilderRow>
     <BuilderRow label.translate="Inactive" level="1">
         <BuilderColorPicker applyTo="'.s_rating_inactive_icons'" styleAction="'color'" enabledTabs="['solid', 'custom']"/>
-        <BuilderButton action="'customIcon'" actionParam="'customInactiveIcon'" preview="false"><i class="fa fa-fw fa-refresh me-1"/> Replace Icon</BuilderButton>
+        <BuilderButton action="'customIcon'" actionParam="'customInactiveIcon'" preview="false"><i class="oi oi-fw me-1" data-icon="refresh"/> Replace Icon</BuilderButton>
     </BuilderRow>
     <BuilderRow label.translate="Score">
         <BuilderNumberInput action="'activeIconsNumber'" min="0"/>
@@ -28,8 +28,8 @@
     <BuilderRow label.translate="Size">
         <BuilderButtonGroup applyTo="'.s_rating_icons'">
             <BuilderButton classAction="''" title.translate="Small"><Image src="'/html_builder/static/img/options/size_small.svg'" /></BuilderButton>
-            <BuilderButton classAction="'fa-2x'" title.translate="Medium"><Image src="'/html_builder/static/img/options/size_medium.svg'" /></BuilderButton>
-            <BuilderButton classAction="'fa-3x'" title.translate="Large"><Image src="'/html_builder/static/img/options/size_large.svg'" /></BuilderButton>
+            <BuilderButton classAction="'oi-2x'" title.translate="Medium"><Image src="'/html_builder/static/img/options/size_medium.svg'" /></BuilderButton>
+            <BuilderButton classAction="'oi-3x'" title.translate="Large"><Image src="'/html_builder/static/img/options/size_large.svg'" /></BuilderButton>
         </BuilderButtonGroup>
     </BuilderRow>
     <BuilderRow label.translate="Title Position">
diff --git a/addons/html_builder/static/src/plugins/rating_option_plugin.js b/addons/html_builder/static/src/plugins/rating_option_plugin.js
index d6003253d3e0fb..cd848eebc8e457 100644
--- a/addons/html_builder/static/src/plugins/rating_option_plugin.js
+++ b/addons/html_builder/static/src/plugins/rating_option_plugin.js
@@ -20,7 +20,7 @@ export class RatingOptionPlugin extends Plugin {
 export class SetIconsAction extends BuilderAction {
     static id = "setIcons";
     apply({ editingElement, params: { mainParam: iconParam } }) {
-        editingElement.dataset.icon = iconParam;
+        editingElement.dataset.ratingIcon = iconParam;
         renderIcons(editingElement);
         delete editingElement.dataset.activeCustomIcon;
         delete editingElement.dataset.inactiveCustomIcon;
@@ -69,7 +69,7 @@ export class CustomIconAction extends BuilderAction {
             inactiveIconEls.length > 0 ? inactiveIconEls[0].getAttribute("class") : customClass;
         editingElement.dataset.activeCustomIcon = faClassActiveCustomIcons;
         editingElement.dataset.inactiveCustomIcon = faClassInactiveCustomIcons;
-        editingElement.dataset.icon = "custom";
+        editingElement.dataset.ratingIcon = "custom";
     }
 }
 export class ActiveIconsNumberAction extends BuilderAction {
@@ -127,7 +127,7 @@ function getAllIcons(editingElement) {
     return editingElement.querySelectorAll(".s_rating_icons i");
 }
 function getIconType(editingElement) {
-    return editingElement.dataset.icon;
+    return editingElement.dataset.ratingIcon;
 }
 function getInactiveCustomIcons(editingElement) {
     return editingElement.dataset.inactiveCustomIcon || "";
@@ -137,19 +137,14 @@ function getInactiveIcons(editingElement) {
 }
 function renderIcons(editingElement) {
     const iconType = getIconType(editingElement);
-    const icons = {
-        "fa-star": "fa-star-o",
-        "fa-thumbs-up": "fa-thumbs-o-up",
-        "fa-circle": "fa-circle-o",
-        "fa-square": "fa-square-o",
-        "fa-heart": "fa-heart-o",
-    };
-    const faClassActiveIcons =
-        iconType === "custom" ? getActiveCustomIcons(editingElement) : "fa " + iconType;
-    const faClassInactiveIcons =
-        iconType === "custom" ? getInactiveCustomIcons(editingElement) : "fa " + icons[iconType];
     const activeIconEls = getActiveIcons(editingElement);
     const inactiveIconEls = getInactiveIcons(editingElement);
-    activeIconEls.forEach((activeIconEl) => (activeIconEl.className = faClassActiveIcons));
-    inactiveIconEls.forEach((inactiveIconEl) => (inactiveIconEl.className = faClassInactiveIcons));
+    activeIconEls.forEach((activeIconEl) => {
+        activeIconEl.className = "oi oi-filled";
+        activeIconEl.dataset.icon = iconType;
+    });
+    inactiveIconEls.forEach((inactiveIconEl) => {
+        inactiveIconEl.className = "oi";
+        inactiveIconEl.dataset.icon = iconType;
+    });
 }
diff --git a/addons/html_builder/static/src/plugins/separator_option.xml b/addons/html_builder/static/src/plugins/separator_option.xml
index 34028c416ff8eb..78ded036517017 100644
--- a/addons/html_builder/static/src/plugins/separator_option.xml
+++ b/addons/html_builder/static/src/plugins/separator_option.xml
@@ -13,9 +13,9 @@
     </BuilderRow>
     <BuilderRow label.translate="Alignment" t-if="!this.isActiveItem('so_width_100')">
         <BuilderButtonGroup>
-            <BuilderButton ltrRtlMapping="'align'" icon="'fa-align-left'" title.translate="Left" classAction="'me-auto'"/>
-            <BuilderButton icon="'fa-align-center'" title.translate="Center" classAction="'mx-auto'"/>
-            <BuilderButton ltrRtlMapping="'align'" icon="'fa-align-right'" title.translate="Right" classAction="'ms-auto'"/>
+            <BuilderButton ltrRtlMapping="'align'" icon="'format_align_left'" title.translate="Left" classAction="'me-auto'"/>
+            <BuilderButton icon="'format_align_center'" title.translate="Center" classAction="'mx-auto'"/>
+            <BuilderButton ltrRtlMapping="'align'" icon="'format_align_right'" title.translate="Right" classAction="'ms-auto'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/html_builder/static/src/plugins/shadow_option.xml b/addons/html_builder/static/src/plugins/shadow_option.xml
index 6f86c15259df24..bfb332540625e2 100644
--- a/addons/html_builder/static/src/plugins/shadow_option.xml
+++ b/addons/html_builder/static/src/plugins/shadow_option.xml
@@ -33,8 +33,8 @@
             </BuilderRow>
 
             <BuilderRow label.translate="Offset" tooltip.translate="Horizontal and Vertical offset" level="1">
-                <BuilderNumberInput actionParam="'offsetX'" unit="'px'" prefixIcon="'oi oi-arrows-h'"/>
-                <BuilderNumberInput actionParam="'offsetY'" unit="'px'" prefixIcon="'oi oi-arrows-v'"/>
+                <BuilderNumberInput actionParam="'offsetX'" unit="'px'" prefixIcon="'arrow_range'"/>
+                <BuilderNumberInput actionParam="'offsetY'" unit="'px'" prefixIcon="'height'"/>
             </BuilderRow>
 
             <BuilderRow label.translate="Blur" level="1">
@@ -53,7 +53,8 @@
         <div class="o-hb-shadow-text">
             <t t-out="0"/>
         </div>
-        <a class="fa fa-pencil btn o-hb-shadow-button"
+        <a class="oi oi-filled btn o-hb-shadow-button"
+                data-icon="edit"
                 title="Edit"
                 t-on-click="onClick"/>
     </div>
diff --git a/addons/html_builder/static/src/plugins/shape/shape_selector.xml b/addons/html_builder/static/src/plugins/shape/shape_selector.xml
index ae63d9a7fb07b7..3527188a062577 100644
--- a/addons/html_builder/static/src/plugins/shape/shape_selector.xml
+++ b/addons/html_builder/static/src/plugins/shape/shape_selector.xml
@@ -29,7 +29,7 @@
                                                 <Image src="this.getShapeUrl(shape[0])" svgCheck="false"/>
                                             </t>
                                             <span t-if="shape[1].imgSize" class="o_we_shape_animated_label">
-                                                <i class="fa fa-expand"></i>
+                                                <i class="oi" data-icon="expand_content"></i>
                                                 <span t-out="shape[1].imgSize"/>
                                             </span>
                                             <span t-elif="shape[1].animated" class="o_we_shape_animated_label">A<span>nimated</span></span>
diff --git a/addons/html_builder/static/src/plugins/text_alignment_option.xml b/addons/html_builder/static/src/plugins/text_alignment_option.xml
index 5a2436787bcef1..41f6133287ef5c 100644
--- a/addons/html_builder/static/src/plugins/text_alignment_option.xml
+++ b/addons/html_builder/static/src/plugins/text_alignment_option.xml
@@ -4,9 +4,9 @@
 <t t-name="html_builder.TextAlignmentOption">
     <BuilderRow label.translate="Alignment">
         <BuilderButtonGroup>
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-left'" title.translate="Left" classAction="'text-start'"/>
-            <BuilderButton icon="'fa-align-center'" title.translate="Center" classAction="'text-center'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-right'" title.translate="Right" classAction="'text-end'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_left'" title.translate="Left" classAction="'text-start'"/>
+            <BuilderButton icon="'format_align_center'" title.translate="Center" classAction="'text-center'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_right'" title.translate="Right" classAction="'text-end'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/html_builder/static/src/plugins/vertical_alignment_option.xml b/addons/html_builder/static/src/plugins/vertical_alignment_option.xml
index 93b3771846dc12..da5d14cd391bc2 100644
--- a/addons/html_builder/static/src/plugins/vertical_alignment_option.xml
+++ b/addons/html_builder/static/src/plugins/vertical_alignment_option.xml
@@ -6,10 +6,10 @@
         <!-- TODO add title tooltip row Vertical Alignment-->
         <BuilderRow label.translate="Vert. Alignment" tooltip.translate="Vertical Alignment" level="this.props.level">
             <BuilderButtonGroup action="'setVerticalAlignment'">
-                <BuilderButton actionParam="'align-items-start'" title.translate="Align Top" iconImg="'/html_builder/static/img/snippets_options/align_top.svg'"/>
-                <BuilderButton actionParam="'align-items-center'" title.translate="Align Middle" iconImg="'/html_builder/static/img/snippets_options/align_middle.svg'"/>
-                <BuilderButton actionParam="'align-items-end'" title.translate="Align Bottom" iconImg="'/html_builder/static/img/snippets_options/align_bottom.svg'"/>
-                <BuilderButton t-if="this.props.justify" actionParam="'align-items-stretch'" title.translate="Stretch to Equal Height" iconImg="'/html_builder/static/img/snippets_options/align_stretch.svg'"/>
+                <BuilderButton actionParam="'align-items-start'" title.translate="Align Top" icon="'vertical_align_top'"/>
+                <BuilderButton actionParam="'align-items-center'" title.translate="Align Middle" icon="'vertical_align_center'"/>
+                <BuilderButton actionParam="'align-items-end'" title.translate="Align Bottom" icon="'vertical_align_bottom'"/>
+                <BuilderButton t-if="this.props.justify" actionParam="'align-items-stretch'" title.translate="Stretch to Equal Height" icon="'expand'"/>
             </BuilderButtonGroup>
         </BuilderRow>
     </t>
diff --git a/addons/html_builder/static/src/plugins/vertical_justify_option.xml b/addons/html_builder/static/src/plugins/vertical_justify_option.xml
index 9a06722c151d74..a459a01e6d13ec 100644
--- a/addons/html_builder/static/src/plugins/vertical_justify_option.xml
+++ b/addons/html_builder/static/src/plugins/vertical_justify_option.xml
@@ -6,11 +6,11 @@
     <BuilderRow label.translate="Vert. Alignment" tooltip.translate="Vertical Alignment">
         <BuilderButtonGroup>
             <BuilderButton title.translate="Align Top" classAction="'justify-content-start'"
-                    iconImg="'/html_builder/static/img/snippets_options/align_solo_top.svg'"/>
+                    icon="'vertical_align_top'"/>
             <BuilderButton title.translate="Align Middle" classAction="'justify-content-center'"
-                    iconImg="'/html_builder/static/img/snippets_options/align_solo_middle.svg'"/>
+                    icon="'vertical_align_center'"/>
             <BuilderButton title.translate="Align Bottom" classAction="'justify-content-end'"
-                    iconImg="'/html_builder/static/img/snippets_options/align_solo_bottom.svg'"/>
+                    icon="'vertical_align_bottom'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/html_builder/static/src/sidebar/custom_inner_snippet.xml b/addons/html_builder/static/src/sidebar/custom_inner_snippet.xml
index 42c7a8b6b650ad..63983fdff666da 100644
--- a/addons/html_builder/static/src/sidebar/custom_inner_snippet.xml
+++ b/addons/html_builder/static/src/sidebar/custom_inner_snippet.xml
@@ -15,10 +15,12 @@
             <t t-if="this.state.isRenaming">
                 <div class="rename-input w-100 mx-1 z-1">
                     <input t-custom-ref="rename-input" type="text" autocomplete="chrome-off" t-att-value="this.snippet.title" class="text-start" t-on-pointerdown.stop=""/>
-                    <button class="o_we_text_success fa fa-check btn btn-outline-success border-0"
+                    <button class="o_we_text_success oi btn btn-outline-success border-0"
+                            data-icon="check"
                             data-tooltip="Confirm"
                             t-on-click="this.onConfirmRename"/>
-                    <button class="o_we_text_danger fa fa-times btn btn-outline-danger border-0"
+                    <button class="o_we_text_danger btn btn-outline-danger border-0"
+                            data-icon="close"
                             data-tooltip="Discard"
                             t-on-click="this.toggleRenamingState"/>
                 </div>
@@ -28,10 +30,12 @@
             </t>
         </div>
         <div t-if="!this.state.isRenaming" class="rename-delete-buttons float-end z-1">
-            <button class="fa fa-pencil btn o_we_hover_success btn-outline-info border-0"
+            <button class="oi oi-filled btn o_we_hover_success btn-outline-info border-0"
+                    data-icon="edit"
                     t-att-data-tooltip="this.renameButtonTooltip"
                     t-on-click.stop="this.toggleRenamingState"/>
-            <button class="fa fa-trash btn o_we_hover_danger btn-outline-danger border-0"
+            <button class="oi oi-filled btn o_we_hover_danger btn-outline-danger border-0"
+                    data-icon="delete"
                     t-att-data-tooltip="this.deleteButtonTooltip"
                     t-on-click="() => this.props.snippetModel.deleteCustomSnippet(this.snippet)"/>
         </div>
diff --git a/addons/html_builder/static/src/sidebar/invisible_elements.edit.scss b/addons/html_builder/static/src/sidebar/invisible_elements.edit.scss
index 76d845853d8e78..ba9d93aba07288 100644
--- a/addons/html_builder/static/src/sidebar/invisible_elements.edit.scss
+++ b/addons/html_builder/static/src/sidebar/invisible_elements.edit.scss
@@ -15,20 +15,21 @@
         width: -moz-available;
         right: 20px;
         z-index: 100;
-        background-color: $o-we-color-accent;
-        font-size: 0px;
+        font-family: "material_symbols_sharp";
+        text-align: right;
+        color: $o-we-color-accent;
         pointer-events: none;
         content: "."; // Content is mandatory.
     }
 
     &.d-md-none::before, &.d-lg-none::before {
-        height: 50px;
-        -webkit-mask: url("/html_builder/static/img/options/desktop_invisible.svg") no-repeat 100% 100%;
+        font-size: 50px;
+        content: "desktop_access_disabled";
     }
 
     &:not(.d-md-none):not(.d-lg-none)::before {
-        height: 30px;
-        -webkit-mask: url("/html_builder/static/img/options/mobile_invisible.svg") no-repeat 100% 100%;
+        font-size: 30px;
+        content: "mobile_off";
     }
 }
 
diff --git a/addons/html_builder/static/src/sidebar/invisible_elements_panel.xml b/addons/html_builder/static/src/sidebar/invisible_elements_panel.xml
index 37fd0d98194ca0..454270bcf8f3fc 100644
--- a/addons/html_builder/static/src/sidebar/invisible_elements_panel.xml
+++ b/addons/html_builder/static/src/sidebar/invisible_elements_panel.xml
@@ -18,7 +18,7 @@
         t-att-class="{'o_we_invisible_root_parent': entry.isRootParent, 'o_we_sublevel_1': entry.isDescendant}"
         t-on-click="() => toggleElementVisibility(entry)">
         <div class="o_title" t-out="entry.name"/>
-        <i class="fa ms-2" t-att-class="entry.isVisible ? 'fa-eye' : 'fa-eye-slash'"></i>
+        <i class="oi ms-2" t-att-data-icon="entry.isVisible ? 'visibility' : 'visibility_off'"></i>
     </div>
     <ul t-if="entry.isVisible and entry.children.length > 0">
         <t t-foreach="entry.children" t-as="child" t-key="child_index">
diff --git a/addons/html_builder/static/src/sidebar/option_container.xml b/addons/html_builder/static/src/sidebar/option_container.xml
index 2b80e05c5ef5f1..51d9ad193e725e 100644
--- a/addons/html_builder/static/src/sidebar/option_container.xml
+++ b/addons/html_builder/static/src/sidebar/option_container.xml
@@ -15,7 +15,7 @@
                 t-att-role="isActionable ? 'button' : 'heading'"
                 t-on-click="this.props.toggleFold ?? (() => {})"
             >
-                <i t-if="this.props.toggleFold" class="fa fa-fw mx-1" role="img" t-att-class="this.props.folded ? 'fa-caret-right' : 'fa-caret-down'"></i>
+                <i t-if="this.props.toggleFold" class="oi oi-fw mx-1" role="img" t-att-data-icon="this.props.folded ? 'arrow_right' : 'arrow_drop_down'"></i>
                 <span t-att-class="{'ms-2': !this.props.toggleFold}" t-out="this.title"/>
                 <t t-if="this.props.optionTitleComponents" t-foreach="this.props.optionTitleComponents" t-as="optionTitleComponent" t-key="optionTitleComponent.id">
                     <t t-component="optionTitleComponent.Component" t-props="optionTitleComponent.props || {}"/>
@@ -41,7 +41,8 @@
                 <t t-if="this.props.isClonable || this.props.cloneDisabledReason">
                     <!-- Disabled buttons do not display their title -->
                     <span t-att-title="this.props.cloneDisabledReason" t-att-aria-label="this.props.cloneDisabledReason">
-	                    <button class="fa fa-fw fa-clone oe_snippet_clone o-hb-btn btn btn-success-color-hover"
+	                    <button class="oi oi-fw oe_snippet_clone o-hb-btn btn btn-success-color-hover"
+                                data-icon="content_copy"
 	                            title="Duplicate this block"
 	                            aria-label="Duplicate this block"
                                 t-att-disabled="!!this.props.cloneDisabledReason"
@@ -51,7 +52,8 @@
                 <t t-if="this.props.isRemovable || this.props.removeDisabledReason">
                     <!-- Disabled buttons do not display their title -->
                     <span t-att-title="this.props.removeDisabledReason" t-att-aria-label="this.props.removeDisabledReason">
-	                    <button class="fa fa-fw fa-trash oe_snippet_remove o-hb-btn btn btn-danger-color-hover"
+	                    <button class="oi oi-fw oi-filled oe_snippet_remove o-hb-btn btn btn-danger-color-hover"
+                                data-icon="delete"
 	                            title="Remove this block"
 	                            aria-label="Remove this block"
 	                            t-att-disabled="!!this.props.removeDisabledReason"
diff --git a/addons/html_builder/static/src/snippets/add_snippet_dialog.xml b/addons/html_builder/static/src/snippets/add_snippet_dialog.xml
index da222d8e1cea92..843a0a749982e0 100644
--- a/addons/html_builder/static/src/snippets/add_snippet_dialog.xml
+++ b/addons/html_builder/static/src/snippets/add_snippet_dialog.xml
@@ -15,7 +15,7 @@
                         <input type="search" class="o_add_snippet_dialog_search form-control pe-4" placeholder="Search for a block"
                             aria-label="Search for a block" t-custom-model="this.state.search"/>
                         <span class="input-group-text position-absolute top-50 end-0 translate-middle-y me-2 border-0 bg-transparent text-muted">
-                            <i class="oi oi-search" aria-hidden="true"></i>
+                            <i class="oi" data-icon="search" aria-hidden="true"></i>
                         </span>
                     </div>
                     <div class="list-group list-group-flush flex-column flex-nowrap overflow-y-auto"
@@ -48,7 +48,7 @@
                     </t>
                     <t t-elif="!this.state.showIframe">
                         <div class="o_add_snippet_dialog_iframe_loader d-flex flex-column justify-content-center text-center h-100 p-4" role="status">
-                            <i class="fa fa-3x fa-circle-o-notch fa-spin"></i>
+                            <i class="oi oi-3x oi-spin" data-icon="autorenew"></i>
                             <p class="h3 mt-3">
                                 Almost there! Snippets are incoming, grab a coffee and relax!
                             </p>
diff --git a/addons/html_builder/static/src/snippets/snippet_service.js b/addons/html_builder/static/src/snippets/snippet_service.js
index 9c2d151d48ef8b..8ee46205dfb357 100644
--- a/addons/html_builder/static/src/snippets/snippet_service.js
+++ b/addons/html_builder/static/src/snippets/snippet_service.js
@@ -104,7 +104,7 @@ export class SnippetModel extends Reactive {
 
         this.dialog.add(ConfirmationDialog, {
             title: _t("Install %s", snippet.moduleDisplayName),
-            body: markup`${bodyText}\n<a href="${linkUrl}" target="_blank"><i class="oi oi-arrow-right me-1"></i>${linkText}</a>`,
+            body: markup`${bodyText}\n<a href="${linkUrl}" target="_blank"><i class="oi me-1" data-icon="east"></i>${linkText}</a>`,
             confirm: async () => installSnippetModule(snippet),
             confirmLabel: _t("Save and Install"),
             cancel: () => {},
diff --git a/addons/html_builder/static/src/snippets/snippet_viewer.xml b/addons/html_builder/static/src/snippets/snippet_viewer.xml
index f55f7c860f7546..c06342f79fe285 100644
--- a/addons/html_builder/static/src/snippets/snippet_viewer.xml
+++ b/addons/html_builder/static/src/snippets/snippet_viewer.xml
@@ -29,11 +29,11 @@
                     <span class="w-100" t-out="snippet.title"></span>
                     <button class="o_btn_reset me-md-2" t-on-click="() => this.onClickRename(snippet)" title="Rename">
                         <span class="visually-hidden" t-out="this.getRenameBtnLabel(snippet.title)"/>
-                        <span class="fa fa-pencil"/>
+                        <span class="oi oi-filled" data-icon="edit"/>
                     </button>
                     <button class="o_btn_reset" t-on-click="() => this.onClickDelete(snippet)" title="Remove">
                         <span class="visually-hidden" t-out="this.getDeleteBtnLabel(snippet.title)"/>
-                        <span class="fa fa-trash"/>
+                        <span class="oi oi-filled" data-icon="delete"/>
                     </button>
                 </div>
             </t>
diff --git a/addons/html_builder/static/src/utils/utils.js b/addons/html_builder/static/src/utils/utils.js
index 3622ed504747ac..64f33af086378a 100644
--- a/addons/html_builder/static/src/utils/utils.js
+++ b/addons/html_builder/static/src/utils/utils.js
@@ -15,7 +15,7 @@ export function getSnippetName(snippetEl) {
     }
     const snippetNameRules = [
         { selector: "img", name: _t("Image") },
-        { selector: ".fa", name: _t("Icon") },
+        { selector: ".oi", name: _t("Icon") },
         { selector: ".media_iframe_video", name: _t("Video") },
         { selector: ".row > *", name: _t("Column") },
         { selector: "#wrapwrap > main", name: _t("Page Options") },
diff --git a/addons/html_builder/static/tests/block_tab/snippet_content.test.js b/addons/html_builder/static/tests/block_tab/snippet_content.test.js
index fcdef2a48b38b0..b9322bcdc99ff4 100644
--- a/addons/html_builder/static/tests/block_tab/snippet_content.test.js
+++ b/addons/html_builder/static/tests/block_tab/snippet_content.test.js
@@ -48,7 +48,7 @@ test("Drag & drop inner content block", async () => {
         dropzoneSelectors,
     });
     expect(contentEl).toHaveInnerHTML(`<div><p>Text</p></div>`);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     const { moveTo, drop } = await contains(
         ".o-website-builder_sidebar [name='Button A'] .o_snippet_thumbnail"
@@ -56,11 +56,11 @@ test("Drag & drop inner content block", async () => {
     expect(":iframe .oe_drop_zone:nth-child(1)").toHaveCount(1);
     expect(":iframe .oe_drop_zone:nth-child(3)").toHaveCount(1);
 
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await moveTo(":iframe .oe_drop_zone");
     expect(":iframe .oe_drop_zone.invisible:nth-child(1)").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await drop(getDragHelper());
     await waitForEndOfOperation();
@@ -68,7 +68,7 @@ test("Drag & drop inner content block", async () => {
     expect(contentEl).toHaveInnerHTML(
         `<div>\ufeff<a class="btn btn-primary" href="#" data-snippet="s_button" data-name="Button A">\ufeffButton A\ufeff</a>\ufeff<p>Text</p></div>`
     );
-    expect(".o-website-builder_sidebar .fa-undo").toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").toBeEnabled();
 });
 
 test("Drag & drop inner content block + undo/redo", async () => {
@@ -77,10 +77,10 @@ test("Drag & drop inner content block + undo/redo", async () => {
         dropzoneSelectors,
     });
     expect(contentEl).toHaveInnerHTML(`<div><p>Text</p></div>`);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
-    expect(".o-website-builder_sidebar .fa-repeat").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='redo']").not.toBeEnabled();
 
-    await click(".o-website-builder_sidebar .fa-undo");
+    await click(".o-website-builder_sidebar [data-icon='undo']");
     const { moveTo, drop } = await contains(
         ".o-website-builder_sidebar [name='Button A'] .o_snippet_thumbnail"
     ).drag();
@@ -91,14 +91,14 @@ test("Drag & drop inner content block + undo/redo", async () => {
     expect(contentEl).toHaveInnerHTML(
         `<div>\ufeff<a class="btn btn-primary" href="#" data-snippet="s_button" data-name="Button A">\ufeffButton A\ufeff</a>\ufeff<p>Text</p></div>`
     );
-    expect(".o-website-builder_sidebar .fa-undo").toBeEnabled();
-    expect(".o-website-builder_sidebar .fa-repeat").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='redo']").not.toBeEnabled();
 
-    await click(".o-website-builder_sidebar .fa-undo");
+    await click(".o-website-builder_sidebar [data-icon='undo']");
     await animationFrame();
     expect(contentEl).toHaveInnerHTML(`<div><p>Text</p></div>`);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
-    expect(".o-website-builder_sidebar .fa-repeat").toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='redo']").toBeEnabled();
 });
 
 test("Drag inner content and drop it outside of a dropzone", async () => {
diff --git a/addons/html_builder/static/tests/builder_action.test.js b/addons/html_builder/static/tests/builder_action.test.js
index 5ca8feb326b769..79b06fe03fc935 100644
--- a/addons/html_builder/static/tests/builder_action.test.js
+++ b/addons/html_builder/static/tests/builder_action.test.js
@@ -230,7 +230,7 @@ describe("isPreviewing is passed to action's apply and clean", () => {
         expect.verifySteps(["apply true", "apply false"]);
 
         // clean
-        await contains(".o_select_menu + button > .oi-close").click();
+        await contains(".o_select_menu + button > [data-icon='close_small']").click();
         expect.verifySteps(["clean true", "clean false"]);
     });
 });
diff --git a/addons/html_builder/static/tests/builder_option.test.js b/addons/html_builder/static/tests/builder_option.test.js
index c57fbbdd9ed4f5..e9c3f14e5906b6 100644
--- a/addons/html_builder/static/tests/builder_option.test.js
+++ b/addons/html_builder/static/tests/builder_option.test.js
@@ -42,9 +42,9 @@ test("Undo/Redo correctly restores the stored container target", async () => {
     await contains(":iframe .target2").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 2");
 
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 1");
-    await contains(".o-snippets-top-actions .fa-repeat").click();
+    await contains(".o-snippets-top-actions [data-icon='redo']").click();
     expect(".options-container").toHaveCount(0);
 });
 
@@ -79,15 +79,15 @@ test("Undo/Redo multiple actions always restores the action container target", a
     await contains("[data-action-id='customAction']").click();
     expect(":iframe .test-options-target.test").toHaveCount(2);
     // Undo everything.
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 2");
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 1");
     expect(":iframe .test-options-target.test").toHaveCount(0);
     // Redo everything.
-    await contains(".o-snippets-top-actions .fa-repeat").click();
+    await contains(".o-snippets-top-actions [data-icon='redo']").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 1");
-    await contains(".o-snippets-top-actions .fa-repeat").click();
+    await contains(".o-snippets-top-actions [data-icon='redo']").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 2");
     expect(":iframe .test-options-target.test").toHaveCount(2);
 });
@@ -123,9 +123,9 @@ test("Undo/Redo an action that activates another target restores the old one on
     await contains("[data-action-id='customAction']").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 2");
     // Undo everything.
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 1");
-    await contains(".o-snippets-top-actions .fa-repeat").click();
+    await contains(".o-snippets-top-actions [data-icon='redo']").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 2");
 });
 
@@ -157,9 +157,9 @@ test("Undo/Redo an action that deactivates the containers restores the old one o
     expect(".options-container").toHaveCount(0);
     expect("button[data-name='blocks']").toHaveClass("active");
     // Undo everything.
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expect(".options-container").toHaveAttribute("data-container-title", "Target 1");
-    await contains(".o-snippets-top-actions .fa-repeat").click();
+    await contains(".o-snippets-top-actions [data-icon='redo']").click();
     expect(".options-container").toHaveCount(0);
     expect("button[data-name='blocks']").toHaveClass("active");
 });
@@ -205,7 +205,7 @@ test("Containers fallback to a valid ancestor if the target disappears and resto
     expect(".options-container[data-container-title='Target 1']").toHaveCount(0);
     expect("[data-action-id='ancestorAction']").toHaveCount(1);
 
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expect(".options-container[data-container-title='Ancestor']").toHaveCount(1);
     expect(".options-container[data-container-title='Target 1']").toHaveCount(1);
 });
diff --git a/addons/html_builder/static/tests/contenteditable.test.js b/addons/html_builder/static/tests/contenteditable.test.js
index 44f2e846938271..2b955c760acf00 100644
--- a/addons/html_builder/static/tests/contenteditable.test.js
+++ b/addons/html_builder/static/tests/contenteditable.test.js
@@ -37,10 +37,10 @@ test("Media should not be replaceable if not inside a savable zone", async () =>
     await setupHTMLBuilder("", {
         headerContent: `
         <header id="top" data-anchor="true" data-name="Header">
-            <i class="fa fa-shopping-cart fa-stack target" data-oe-model="ir.ui.view" data-oe-id="786" data-oe-field="arch" data-oe-xpath="/data/xpath/li[1]/a[1]"/>
+            <i class="oi oi-stack target" data-oe-model="ir.ui.view" data-oe-id="786" data-icon="shopping_cart" data-oe-field="arch" data-oe-xpath="/data/xpath/li[1]/a[1]"/>
         </header>`,
         styleContent: `
-            .fa {
+            .oi {
                 display: flex;
                 justify-content: center;
                 align-items: center;
diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/basic_many2many.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/basic_many2many.test.js
index db770a05bc3ba6..c283f203b8695e 100644
--- a/addons/html_builder/static/tests/custom_tab/builder_components/basic_many2many.test.js
+++ b/addons/html_builder/static/tests/custom_tab/builder_components/basic_many2many.test.js
@@ -75,7 +75,7 @@ test("basic many2many: find tag, select tag, unselect tag", async () => {
     ]);
     expect("table tr").toHaveCount(2);
 
-    await contains("button.fa-minus").click();
+    await contains("button[data-icon='remove']").click();
     expect(selection).toEqual([{ id: 2, name: "Second", display_name: "Second" }]);
     expect("table tr").toHaveCount(1);
     expect("table input").toHaveValue("Second");
diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_button.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_button.test.js
index d18de664cc104f..969903197b9e4d 100644
--- a/addons/html_builder/static/tests/custom_tab/builder_components/builder_button.test.js
+++ b/addons/html_builder/static/tests/custom_tab/builder_components/builder_button.test.js
@@ -872,8 +872,8 @@ describe("LTR - RTL compatibility", () => {
             selector: ".selector",
             template: xml`
                 <BuilderButtonGroup>
-                    <BuilderButton ltrRtlMapping="'left-right'" title="'Left'" icon="'fa-arrow-left'" classAction="'class-a'"/>
-                    <BuilderButton ltrRtlMapping="'left-right'" title="'Right'" icon="'fa-arrow-right'" classAction="'class-b'"/>
+                    <BuilderButton ltrRtlMapping="'left-right'" title="'Left'" icon="'arrow_back'" classAction="'class-a'"/>
+                    <BuilderButton ltrRtlMapping="'left-right'" title="'Right'" icon="'arrow_forward'" classAction="'class-b'"/>
                 </BuilderButtonGroup>
             `,
         });
diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_datetimepicker.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_datetimepicker.test.js
index c5fd16bf54e436..0ed9ac20a979d4 100644
--- a/addons/html_builder/static/tests/custom_tab/builder_components/builder_datetimepicker.test.js
+++ b/addons/html_builder/static/tests/custom_tab/builder_components/builder_datetimepicker.test.js
@@ -120,7 +120,7 @@ test("defaults to now when clicking on clear button", async () => {
 
     for (let i = 0; i < 3; i++) {
         await contains(".we-bg-options-container input").click();
-        await contains(".o_datetime_buttons button .fa-eraser").click();
+        await contains(".o_datetime_buttons button [data-icon='ink_eraser']").click();
         await contains(".options-container").click();
         const dateString = queryOne(".we-bg-options-container input").value;
         expect(isExpectedDateTime({ dateString })).toBe(true);
diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_many2many.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_many2many.test.js
index 5f8070462c71ac..e4afcef0607625 100644
--- a/addons/html_builder/static/tests/custom_tab/builder_components/builder_many2many.test.js
+++ b/addons/html_builder/static/tests/custom_tab/builder_components/builder_many2many.test.js
@@ -71,7 +71,7 @@ test("many2many: find tag, select tag, unselect tag", async () => {
     );
     expect("table tr").toHaveCount(2);
 
-    await contains("button.fa-minus").click();
+    await contains("button[data-icon='remove']").click();
     expect.verifySteps(["name_search", "name_search"]);
     expect(editableContent).toHaveInnerHTML(
         `<div class="test-options-target" data-test="[{&quot;id&quot;:2,&quot;display_name&quot;:&quot;Second&quot;,&quot;name&quot;:&quot;Second&quot;}]">b</div>`
diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_number_input.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_number_input.test.js
index e73d77a493d4e5..70eeebbf7889a6 100644
--- a/addons/html_builder/static/tests/custom_tab/builder_components/builder_number_input.test.js
+++ b/addons/html_builder/static/tests/custom_tab/builder_components/builder_number_input.test.js
@@ -358,8 +358,8 @@ describe("operations", () => {
         await fill("2");
         expect.verifySteps(["customAction 102"]);
         expect(":iframe .test-options-target").toHaveInnerHTML("102");
-        expect(".o-snippets-top-actions .fa-undo").not.toBeEnabled();
-        expect(".o-snippets-top-actions .fa-repeat").not.toBeEnabled();
+        expect(".o-snippets-top-actions [data-icon='undo']").not.toBeEnabled();
+        expect(".o-snippets-top-actions [data-icon='redo']").not.toBeEnabled();
     });
     test("should commit changes", async () => {
         addBuilderAction({
@@ -390,8 +390,8 @@ describe("operations", () => {
         await click(document.body);
         await animationFrame();
         expect.verifySteps(["customAction 102"]);
-        expect(".o-snippets-top-actions .fa-undo").toBeEnabled();
-        expect(".o-snippets-top-actions .fa-repeat").not.toBeEnabled();
+        expect(".o-snippets-top-actions [data-icon='undo']").toBeEnabled();
+        expect(".o-snippets-top-actions [data-icon='redo']").not.toBeEnabled();
     });
     test("should commit changes after an undo", async () => {
         addBuilderAction({
@@ -420,7 +420,7 @@ describe("operations", () => {
         await click(document.body);
         expect.verifySteps(["customAction 102", "customAction 102"]);
         await animationFrame();
-        click(".o-snippets-top-actions .fa-undo");
+        click(".o-snippets-top-actions [data-icon='undo']");
         await animationFrame();
         expect(":iframe .test-options-target").toHaveInnerHTML("10");
         await click(".options-container input");
diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_range.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_range.test.js
index 137960929ecf93..32619f463d56e0 100644
--- a/addons/html_builder/static/tests/custom_tab/builder_components/builder_range.test.js
+++ b/addons/html_builder/static/tests/custom_tab/builder_components/builder_range.test.js
@@ -40,8 +40,8 @@ test("should commit changes", async () => {
     expect(":iframe .test-options-target").toHaveInnerHTML("50");
     await click(document.body);
     await animationFrame();
-    expect(".o-snippets-top-actions .fa-undo").toBeEnabled();
-    expect(".o-snippets-top-actions .fa-repeat").not.toBeEnabled();
+    expect(".o-snippets-top-actions [data-icon='undo']").toBeEnabled();
+    expect(".o-snippets-top-actions [data-icon='redo']").not.toBeEnabled();
 });
 
 test("range input should step up or down with arrow keys", async () => {
diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_select_item.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_select_item.test.js
index 6bf3df446f68ce..a62d949bd3f245 100644
--- a/addons/html_builder/static/tests/custom_tab/builder_components/builder_select_item.test.js
+++ b/addons/html_builder/static/tests/custom_tab/builder_components/builder_select_item.test.js
@@ -72,9 +72,9 @@ test("set the label of the select from the active select item and be updated on
     expect(".we-bg-options-container .dropdown").toHaveText("B");
     await animationFrame();
     expect(".o-overlay-item [data-attribute-action-value='b']").not.toHaveCount();
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expect(".we-bg-options-container .dropdown").toHaveText("A");
-    await contains(".o-snippets-top-actions .fa-repeat").click();
+    await contains(".o-snippets-top-actions [data-icon='redo']").click();
     expect(".we-bg-options-container .dropdown").toHaveText("B");
 });
 test("consider the priority of the select item", async () => {
@@ -344,7 +344,7 @@ test("isApplied shouldn't be called when the element is removed from the DOM", a
     });
     await setupHTMLBuilder(`<div class="test">Test</div>`);
     await contains(":iframe .test").click();
-    await contains(".fa-trash ").click();
+    await contains("[data-icon='delete'].oi-filled").click();
     expect(":iframe .test").toHaveCount(0);
 });
 
diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/model_many2many.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/model_many2many.test.js
index 4bb6af4337f0ac..93cea9bc953cd9 100644
--- a/addons/html_builder/static/tests/custom_tab/builder_components/model_many2many.test.js
+++ b/addons/html_builder/static/tests/custom_tab/builder_components/model_many2many.test.js
@@ -81,7 +81,7 @@ test("model many2many: find tag, select tag, unselect tag", async () => {
     ]);
     expect("table tr").toHaveCount(2);
 
-    await contains("button.fa-minus").click();
+    await contains("button[data-icon='remove']").click();
     expect(modelEdit.get("rel")).toEqual([{ id: 2, name: "Second", display_name: "Second" }]);
     expect("table tr").toHaveCount(1);
     expect("table input").toHaveValue("Second");
diff --git a/addons/html_builder/static/tests/custom_tab/misc.test.js b/addons/html_builder/static/tests/custom_tab/misc.test.js
index eddd9bceed07d6..ccaf6ef61a00da 100644
--- a/addons/html_builder/static/tests/custom_tab/misc.test.js
+++ b/addons/html_builder/static/tests/custom_tab/misc.test.js
@@ -135,11 +135,11 @@ test("basic multi options containers", async () => {
     });
     await setupHTMLBuilder(`<div class="main"><p class="test-options-target a">b</p></div>`);
     await contains(":iframe .test-options-target").click();
-    expect(".options-container-header i.fa-caret-right").toHaveCount(1);
-    expect(".options-container-header i.fa-caret-down").toHaveCount(1);
+    expect(".options-container-header i[data-icon='arrow_right']").toHaveCount(1);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(1);
     await unfoldAllOptionsGroups();
-    expect(".options-container-header i.fa-caret-right").toHaveCount(0);
-    expect(".options-container-header i.fa-caret-down").toHaveCount(2);
+    expect(".options-container-header i[data-icon='arrow_right']").toHaveCount(0);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(2);
     expect(".options-container").toHaveCount(2);
     expect(queryAllTexts(".options-container:first .we-bg-options-container > div > div")).toEqual([
         "Row 3",
@@ -173,15 +173,15 @@ test("option group stay unfolded when clicking 'Select only this block'", async
         </div>`
     );
     await contains(":iframe .test-options-child").click();
-    expect(".options-container-header i.fa-caret-right").toHaveCount(2);
-    expect(".options-container-header i.fa-caret-down").toHaveCount(1);
-    await contains(".options-container-header:contains('Parent') i.fa-caret-right").click();
-    expect(".options-container-header i.fa-caret-right").toHaveCount(1);
-    expect(".options-container-header i.fa-caret-down").toHaveCount(2);
+    expect(".options-container-header i[data-icon='arrow_right']").toHaveCount(2);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(1);
+    await contains(".options-container-header:contains('Parent') i[data-icon='arrow_right']").click();
+    expect(".options-container-header i[data-icon='arrow_right']").toHaveCount(1);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(2);
     await contains(
         ".options-container-header:contains('Target') button[title='Select only this block']"
     ).click();
-    expect(".options-container-header i.fa-caret-down").toHaveCount(2);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(2);
 });
 
 test("option group stay unfolded when changing an option", async () => {
@@ -205,13 +205,13 @@ test("option group stay unfolded when changing an option", async () => {
         </section>`
     );
     await contains(":iframe .test-options-child").click();
-    expect(".options-container-header i.fa-caret-right").toHaveCount(1);
-    expect(".options-container-header i.fa-caret-down").toHaveCount(1);
-    await contains(".options-container-header:contains('Target') i.fa-caret-right").click();
-    expect(".options-container-header i.fa-caret-right").toHaveCount(0);
-    expect(".options-container-header i.fa-caret-down").toHaveCount(2);
+    expect(".options-container-header i[data-icon='arrow_right']").toHaveCount(1);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(1);
+    await contains(".options-container-header:contains('Target') i[data-icon='arrow_right']").click();
+    expect(".options-container-header i[data-icon='arrow_right']").toHaveCount(0);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(2);
     await contains("button[data-class-action='test-class']").click();
-    expect(".options-container-header i.fa-caret-down").toHaveCount(2);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(2);
 });
 
 test("last container with options is unfolded regardless of containers without options", async () => {
@@ -239,8 +239,8 @@ test("last container with options is unfolded regardless of containers without o
         </section>`
     );
     await contains(":iframe .test-options-child").click();
-    expect(".options-container-header i.fa-caret-right").toHaveCount(0);
-    expect(".options-container-header i.fa-caret-down").toHaveCount(1);
+    expect(".options-container-header i[data-icon='arrow_right']").toHaveCount(0);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(1);
 });
 
 test("options restricted to groups excluding current user do not make an empty folded group appear", async () => {
@@ -271,7 +271,7 @@ test("options restricted to groups excluding current user do not make an empty f
     );
     await contains(":iframe .test-options-child").click();
     expect(".options-container-header:contains(Target)").toHaveCount(0);
-    expect(".options-container-header i.fa-caret-down").toHaveCount(1);
+    expect(".options-container-header i[data-icon='arrow_drop_down']").toHaveCount(1);
 });
 
 test("option with groups restriction not available to user", async () => {
@@ -777,7 +777,7 @@ describe("isActiveItem", () => {
         expect(
             "[data-attribute-action='my-attribute2'][data-attribute-action-value='2']"
         ).toBeVisible();
-        await contains(".fa-undo").click();
+        await contains("[data-icon='undo']").click();
         expect(":iframe .test-options-target").toHaveAttribute("my-attribute1", "x");
         expect(
             "[data-attribute-action='my-attribute2'][data-attribute-action-value='1']"
@@ -785,7 +785,7 @@ describe("isActiveItem", () => {
         expect(
             "[data-attribute-action='my-attribute2'][data-attribute-action-value='2']"
         ).not.toHaveCount();
-        await contains(".fa-undo").click();
+        await contains("[data-icon='undo']").click();
         expect(
             "[data-attribute-action='my-attribute2'][data-attribute-action-value='1']"
         ).not.toHaveCount();
diff --git a/addons/html_builder/static/tests/editor.test.js b/addons/html_builder/static/tests/editor.test.js
index c99008dbc3a363..f02823af1df4aa 100644
--- a/addons/html_builder/static/tests/editor.test.js
+++ b/addons/html_builder/static/tests/editor.test.js
@@ -34,8 +34,8 @@ test("should add an icon from the media modal dialog", async () => {
     await animationFrame();
     await contains(".o-we-command").click();
     await contains(".modal .modal-body .nav-item:nth-child(3) button").click();
-    await contains(".modal .modal-body .fa-heart").click();
-    expect(p).toHaveInnerHTML(`x<span class="fa fa-heart" contenteditable="false">\u200b</span>`);
+    await contains(".modal .modal-body [data-icon='favorite']").click();
+    expect(p).toHaveInnerHTML(`x<span class="oi oi-filled" data-icon="favorite" contenteditable="false">\u200b</span>`);
 });
 
 test("should delete text forward", async () => {
@@ -231,7 +231,7 @@ describe("toolbar dropdowns", () => {
     test("text alignment dropdown should not close on click", async () => {
         const { p } = await setup();
         click(".o-we-toolbar .btn[name='text_align']");
-        const alignCenterButtonSelector = ".dropdown-menu button.fa-align-center";
+        const alignCenterButtonSelector = ".dropdown-menu button[data-icon='format_align_center']";
         await focusAndClick(alignCenterButtonSelector);
         await animationFrame();
         expect(alignCenterButtonSelector).toBeVisible();
diff --git a/addons/html_builder/static/tests/helpers.js b/addons/html_builder/static/tests/helpers.js
index 9867667ab9e6d5..8ae0cd21165d4e 100644
--- a/addons/html_builder/static/tests/helpers.js
+++ b/addons/html_builder/static/tests/helpers.js
@@ -594,7 +594,7 @@ export async function editBuilderRangeValue(selector, newValue) {
 }
 
 export async function unfoldAllOptionsGroups() {
-    for (const i of queryAll(".options-container-header i.fa-caret-right")) {
+    for (const i of queryAll(".options-container-header i[data-icon='arrow_right']")) {
         await click(i);
     }
     await animationFrame();
diff --git a/addons/html_builder/static/tests/options/rating_option.test.js b/addons/html_builder/static/tests/options/rating_option.test.js
index 0798650f24a49b..b071e002c40a84 100644
--- a/addons/html_builder/static/tests/options/rating_option.test.js
+++ b/addons/html_builder/static/tests/options/rating_option.test.js
@@ -6,17 +6,17 @@ import { contains } from "@web/../tests/web_test_helpers";
 describe.current.tags("desktop");
 
 const websiteContent = `
-    <div class="s_rating pt16 pb16" data-icon="fa-star" data-snippet="s_rating" data-name="Rating">
+    <div class="s_rating pt16 pb16" data-rating-icon="star" data-snippet="s_rating" data-name="Rating">
         <strong class="s_rating_title">Quality</strong>
         <div class="s_rating_icons o_not_editable">
             <span class="s_rating_active_icons">
-                <i class="fa fa-star"></i>
-                <i class="fa fa-star"></i>
-                <i class="fa fa-star"></i>
+                <i class="oi oi-filled" data-icon="star"></i>
+                <i class="oi oi-filled" data-icon="star"></i>
+                <i class="oi oi-filled" data-icon="star"></i>
             </span>
             <span class="s_rating_inactive_icons">
-                <i class="fa fa-star-o"></i>
-                <i class="fa fa-star-o"></i>
+                <i class="oi" data-icon="star"></i>
+                <i class="oi" data-icon="star"></i>
             </span>
         </div>
     </div>`;
@@ -40,18 +40,18 @@ test("change rating score", async () => {
         `<strong class="s_rating_title">Quality</strong>
         <div class="s_rating_icons o_not_editable" contenteditable="false">
             <span class="s_rating_active_icons">
-                <i class="fa fa-star" contenteditable="false">
+                <i class="oi oi-filled" data-icon="star" contenteditable="false">
                     &ZeroWidthSpace;
                 </i>
             </span>
             <span class="s_rating_inactive_icons">
-                <i class="fa fa-star-o" contenteditable="false">
+                <i class="oi" data-icon="star" contenteditable="false">
                     &ZeroWidthSpace;
                 </i>
-                <i class="fa fa-star-o" contenteditable="false">
+                <i class="oi" data-icon="star" contenteditable="false">
                     &ZeroWidthSpace;
                 </i>
-                <i class="fa fa-star-o" contenteditable="false">
+                <i class="oi" data-icon="star" contenteditable="false">
                     &ZeroWidthSpace;
                 </i>
             </span>
@@ -65,19 +65,19 @@ test("Ensure order of operations when clicking very fast on two options", async
     expect("[data-label='Icon'] .dropdown-toggle").toHaveText("Stars");
     expect(":iframe .s_rating").not.toHaveAttribute("data-active-custom-icon");
     await click(".options-container [data-action-id='customIcon']");
-    await click(".options-container [data-class-action='fa-2x']");
+    await click(".options-container [data-class-action='oi-2x']");
     await animationFrame();
-    expect(":iframe .s_rating_icons").not.toHaveClass("fa-2x");
-    await contains(".modal-dialog .fa-glass").click();
-    expect(":iframe .s_rating").toHaveAttribute("data-active-custom-icon", "fa fa-glass");
+    expect(":iframe .s_rating_icons").not.toHaveClass("oi-2x");
+    await contains(".modal-dialog [data-icon='local_bar']").click();
+    expect(":iframe .s_rating").toHaveAttribute("data-active-custom-icon", "local_bar");
     expect("[data-label='Icon'] .dropdown-toggle").toHaveText("Custom");
-    expect(":iframe .s_rating_icons").toHaveClass("fa-2x");
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    expect(":iframe .s_rating_icons").toHaveClass("oi-2x");
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expect("[data-label='Icon'] .dropdown-toggle").toHaveText("Custom");
-    expect(":iframe .s_rating").toHaveAttribute("data-active-custom-icon", "fa fa-glass");
-    expect(":iframe .s_rating_icons").not.toHaveClass("fa-2x");
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    expect(":iframe .s_rating").toHaveAttribute("data-active-custom-icon", "local_bar");
+    expect(":iframe .s_rating_icons").not.toHaveClass("oi-2x");
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expect("[data-label='Icon'] .dropdown-toggle").toHaveText("Stars");
     expect(":iframe .s_rating").not.toHaveAttribute("data-active-custom-icon");
-    expect(":iframe .s_rating_icons").not.toHaveClass("fa-2x");
+    expect(":iframe .s_rating_icons").not.toHaveClass("oi-2x");
 });
diff --git a/addons/html_editor/static/src/backend/dynamic_field/dynamic_field_plugin.js b/addons/html_editor/static/src/backend/dynamic_field/dynamic_field_plugin.js
index c2e70919ec8157..54ca5004dbea6f 100644
--- a/addons/html_editor/static/src/backend/dynamic_field/dynamic_field_plugin.js
+++ b/addons/html_editor/static/src/backend/dynamic_field/dynamic_field_plugin.js
@@ -31,7 +31,7 @@ export class DynamicFieldPlugin extends Plugin {
                 id: "insertField",
                 title: _t("Field"),
                 description: _t("Insert a field"),
-                icon: "fa-database",
+                icon: "database",
                 run: this.insertField.bind(this),
                 isAvailable: (selection) => isHtmlContentSupported(selection),
             },
@@ -39,7 +39,7 @@ export class DynamicFieldPlugin extends Plugin {
                 id: "editDynamicField",
                 title: _t("Edit field"),
                 description: _t("Change the placeholder or the expression for an existing field"),
-                icon: "fa-pencil",
+                icon: "edit",
                 run: this.editField.bind(this),
                 isAvailable: () => !!this.getPopoverTarget(true),
             },
diff --git a/addons/html_editor/static/src/backend/dynamic_field/field_selector_popover.xml b/addons/html_editor/static/src/backend/dynamic_field/field_selector_popover.xml
index 191c01d6e622ce..4793377c809ee6 100644
--- a/addons/html_editor/static/src/backend/dynamic_field/field_selector_popover.xml
+++ b/addons/html_editor/static/src/backend/dynamic_field/field_selector_popover.xml
@@ -5,7 +5,7 @@
     <div style="width: 15rem;"
         class="o-dynamic-field-popover d-flex flex-column flex-wrap gap-3 py-2">
 
-        <i class="btn btn-link position-absolute top-0 end-0 fa fa-times text-dark" data-tooltip="Close" role="img" aria-label="Close" title="Close" t-on-click="() => this.props.close()"/>
+        <i class="btn btn-link position-absolute top-0 end-0 oi text-dark" data-icon="close" data-tooltip="Close" role="img" aria-label="Close" title="Close" t-on-click="() => this.props.close()"/>
 
         <div class="px-2" t-if="!!this.env.debug">
             <span class="fw-bolder d-block">Model</span>
diff --git a/addons/html_editor/static/src/components/history_dialog/history_dialog.scss b/addons/html_editor/static/src/components/history_dialog/history_dialog.scss
index ddefa4df23f2a9..472e6edc6ef6c4 100644
--- a/addons/html_editor/static/src/components/history_dialog/history_dialog.scss
+++ b/addons/html_editor/static/src/components/history_dialog/history_dialog.scss
@@ -32,8 +32,8 @@
 }
 
 .modal-fullscreen {
-    .o_expand_button.fa-expand:before {
-        content: "\f066";
+    .o_expand_button[data-icon="expand_content"]:before {
+        content: "close_fullscreen";
     }
 }
 
@@ -44,8 +44,8 @@
         border: $border-width * 2 dashed $border-color;
 
         &:before {
-            content: '\f1b2';
-            font-family: FontAwesome;
+            content: 'deployed_code';
+            font-family: 'material_symbols_sharp';
             font-size: 1.25rem;
             opacity: 0.5;
         }
@@ -168,8 +168,8 @@
             }
 
             &:before {
-                content: '\f04b';
-                font-family: 'FontAwesome';
+                content: 'play_arrow';
+                font-family: 'material_symbols_sharp';
                 left: calc(-#{$line-left} - #{$dot-size / 2});
                 width: $dot-size;
                 height: $dot-size;
diff --git a/addons/html_editor/static/src/components/history_dialog/history_dialog.xml b/addons/html_editor/static/src/components/history_dialog/history_dialog.xml
index c6bfe3085d607a..d7e2a8ac91ef87 100644
--- a/addons/html_editor/static/src/components/history_dialog/history_dialog.xml
+++ b/addons/html_editor/static/src/components/history_dialog/history_dialog.xml
@@ -17,7 +17,7 @@
                             role="tab"
                             aria-controls="revisions-panel"
                             t-att-aria-selected="this.state.mobileActiveTab === 'revisions' ? 'true' : 'false'">
-                            <i class="fa fa-list me-1" role="img" aria-hidden="true"/>Revisions
+                            <i class="oi me-1" data-icon="format_list_bulleted" role="img" aria-hidden="true"/>Revisions
                         </a>
                     </li>
                     <li class="nav-item flex-grow-1">
@@ -30,7 +30,7 @@
                             role="tab"
                             aria-controls="content-panel"
                             t-att-aria-selected="this.state.mobileActiveTab === 'content' ? 'true' : 'false'">
-                            <i class="fa fa-eye me-1" role="img" aria-hidden="true"/>Preview
+                            <i class="oi me-1" data-icon="visibility" role="img" aria-hidden="true"/>Preview
                         </a>
                     </li>
                 </ul>
@@ -103,7 +103,7 @@
                         <div class="history-info-bar flex-shrink-0">
                             <div class="alert alert-secondary py-2 mb-0 rounded-0 border-0" role="status" aria-live="polite">
                                 <small>
-                                    <i class="fa fa-info-circle me-1" role="img" aria-hidden="true"/>
+                                    <i class="oi me-1" data-icon="info" role="img" aria-hidden="true"/>
                                     <t t-if="this.state.currentView === 'content'">
                                         Showing <strong t-out="this.currentRevision.create_user_name" />'s description from <strong t-out="this.getRevisionFullDate(this.currentRevision)" />
                                     </t>
diff --git a/addons/html_editor/static/src/components/switch/switch.scss b/addons/html_editor/static/src/components/switch/switch.scss
index d0759edb223b19..b55fa68aacbd86 100644
--- a/addons/html_editor/static/src/components/switch/switch.scss
+++ b/addons/html_editor/static/src/components/switch/switch.scss
@@ -28,8 +28,10 @@ $o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
             transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
 
             &:after {
-                content: "\f057"; // fa-times-circle
-                font-family: 'FontAwesome';
+                --o-mi-fill: 1;
+
+                content: "cancel";
+                font-family: 'material_symbols_sharp';
                 color: white;
                 transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
             }
@@ -39,7 +41,9 @@ $o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
             background: $o-brand-primary;
 
             &:after {
-                content: "\f058"; // fa-check-circle
+                --o-mi-fill: 1;
+
+                content: "check_circle";
                 margin-left: ($o-we-switch-size * 1.7) - $o-we-switch-size;
             }
         }
diff --git a/addons/html_editor/static/src/core/clipboard_plugin.js b/addons/html_editor/static/src/core/clipboard_plugin.js
index 3a0ac1b3883873..a68e2a9ecf56c4 100644
--- a/addons/html_editor/static/src/core/clipboard_plugin.js
+++ b/addons/html_editor/static/src/core/clipboard_plugin.js
@@ -69,7 +69,7 @@ export const CLIPBOARD_WHITELISTS = {
         "IMG",
         "BR",
         "A",
-        ".fa",
+        ".oi",
     ],
     classes: [
         // Media
@@ -95,7 +95,7 @@ export const CLIPBOARD_WHITELISTS = {
         "oe-nested",
         // Miscellaneous
         /^btn/,
-        /^fa/,
+        /^oi/,
     ],
     attributes: ["class", "href", "src", "target", "colspan", "rowspan"],
     styledTags: ["SPAN", "B", "STRONG", "I", "S", "U", "FONT", "TD", "COL", "TR", "TH"],
diff --git a/addons/html_editor/static/src/core/format_plugin.js b/addons/html_editor/static/src/core/format_plugin.js
index 098026b6b8bc8d..9d0c399478cdc3 100644
--- a/addons/html_editor/static/src/core/format_plugin.js
+++ b/addons/html_editor/static/src/core/format_plugin.js
@@ -76,28 +76,28 @@ export class FormatPlugin extends Plugin {
             {
                 id: "formatBold",
                 description: _t("Toggle bold"),
-                icon: "fa-bold",
+                icon: "format_bold",
                 run: this.formatSelection.bind(this, "bold"),
                 isAvailable: this.canFormatContent.bind(this),
             },
             {
                 id: "formatItalic",
                 description: _t("Toggle italic"),
-                icon: "fa-italic",
+                icon: "format_italic",
                 run: this.formatSelection.bind(this, "italic"),
                 isAvailable: this.canFormatContent.bind(this),
             },
             {
                 id: "formatUnderline",
                 description: _t("Toggle underline"),
-                icon: "fa-underline",
+                icon: "format_underlined",
                 run: this.formatSelection.bind(this, "underline"),
                 isAvailable: this.canFormatContent.bind(this),
             },
             {
                 id: "formatStrikethrough",
                 description: _t("Toggle strikethrough"),
-                icon: "fa-strikethrough",
+                icon: "strikethrough_s",
                 run: this.formatSelection.bind(this, "strikeThrough"),
                 isAvailable: this.canFormatContent.bind(this),
             },
@@ -125,7 +125,7 @@ export class FormatPlugin extends Plugin {
                     nodes && this.hasAnyFormat(nodes)
                         ? _t("Remove Format")
                         : _t("Selection has no format"),
-                icon: "fa-eraser",
+                icon: "ink_eraser",
                 run: this.removeAllFormats.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
diff --git a/addons/html_editor/static/src/core/history_plugin.js b/addons/html_editor/static/src/core/history_plugin.js
index 57bef08d969710..12bd5a296684d3 100644
--- a/addons/html_editor/static/src/core/history_plugin.js
+++ b/addons/html_editor/static/src/core/history_plugin.js
@@ -207,13 +207,13 @@ export class HistoryPlugin extends Plugin {
             {
                 id: "historyUndo",
                 description: _t("Undo"),
-                icon: "fa-undo",
+                icon: "undo",
                 run: this.undo.bind(this),
             },
             {
                 id: "historyRedo",
                 description: _t("Redo"),
-                icon: "fa-repeat",
+                icon: "redo",
                 run: this.redo.bind(this),
             },
         ],
diff --git a/addons/html_editor/static/src/fields/html_field.js b/addons/html_editor/static/src/fields/html_field.js
index 05bceb73bdf75d..37b0a0562e4065 100644
--- a/addons/html_editor/static/src/fields/html_field.js
+++ b/addons/html_editor/static/src/fields/html_field.js
@@ -313,7 +313,7 @@ export class HtmlField extends Component {
                     {
                         id: "codeview",
                         description: _t("Code view"),
-                        icon: "fa-code",
+                        icon: "code",
                         run: this.toggleCodeView.bind(this),
                         isAvailable: isHtmlContentSupported,
                     },
diff --git a/addons/html_editor/static/src/fields/html_field.xml b/addons/html_editor/static/src/fields/html_field.xml
index 9af5305e6e5e48..d841fbcbad9924 100644
--- a/addons/html_editor/static/src/fields/html_field.xml
+++ b/addons/html_editor/static/src/fields/html_field.xml
@@ -26,7 +26,7 @@
         </div>
         <div t-if="this.state.showCodeView || (this.sandboxedPreview and !this.props.readonly)" t-custom-ref="codeViewButton" id="codeview-btn-group" class="btn-group" t-on-click="this.toggleCodeView">
             <button class="o_codeview_btn btn btn-primary">
-                <i class="fa fa-code" />
+                <i class="oi" data-icon="code" />
             </button>
         </div>
     </t>
diff --git a/addons/html_editor/static/src/fields/image_field_with_media_dialog/image_field_with_media_dialog.xml b/addons/html_editor/static/src/fields/image_field_with_media_dialog/image_field_with_media_dialog.xml
index c2ebca22b48c27..0ffde40e44ea26 100644
--- a/addons/html_editor/static/src/fields/image_field_with_media_dialog/image_field_with_media_dialog.xml
+++ b/addons/html_editor/static/src/fields/image_field_with_media_dialog/image_field_with_media_dialog.xml
@@ -10,7 +10,7 @@
                     data-tooltip="Edit"
                     aria-label="Edit"
                     t-on-click.prevent.stop="onFileEdit">
-                    <i class="fa fa-pencil fa-fw"/>
+                    <i class="oi oi-filled oi-fw" data-icon="edit"/>
                 </button>
                 <button
                     t-if="state.isValid"
@@ -18,7 +18,7 @@
                     data-tooltip="Clear"
                     aria-label="Clear"
                     t-on-click.prevent.stop="onFileRemove">
-                    <i class="fa fa-trash-o fa-fw"/>
+                    <i class="oi oi-fw" data-icon="delete"/>
                 </button>
             </div>
         </xpath>
diff --git a/addons/html_editor/static/src/fields/x2many_field/x2many_image_field.xml b/addons/html_editor/static/src/fields/x2many_field/x2many_image_field.xml
index 6f3e174d88fbd8..a9e69d5c1ad188 100644
--- a/addons/html_editor/static/src/fields/x2many_field/x2many_image_field.xml
+++ b/addons/html_editor/static/src/fields/x2many_field/x2many_image_field.xml
@@ -10,7 +10,7 @@
                     data-tooltip="Edit"
                     aria-label="Edit"
                     t-on-click.prevent.stop="this.onFileEdit">
-                    <i class="fa fa-pencil fa-fw"/>
+                    <i class="oi oi-fw oi-filled" data-icon="edit"/>
                 </button>
                 <button
                     t-if="this.props.record.data[this.props.name] and this.state.isValid"
@@ -18,7 +18,7 @@
                     data-tooltip="Clear"
                     aria-label="Clear"
                     t-on-click.prevent.stop="this.onFileRemove">
-                    <i class="fa fa-trash-o fa-fw"/>
+                    <i class="oi oi-fw" data-icon="delete"/>
                 </button>
             </div>
         </xpath>
diff --git a/addons/html_editor/static/src/main/align/align_selector.xml b/addons/html_editor/static/src/main/align/align_selector.xml
index c875ade8f2a058..5b83def3818441 100644
--- a/addons/html_editor/static/src/main/align/align_selector.xml
+++ b/addons/html_editor/static/src/main/align/align_selector.xml
@@ -3,7 +3,7 @@
         <Dropdown menuClass="'o-we-toolbar-dropdown'" bottomSheet="false" menuRef="this.menuRef">
             <button class="btn btn-light" t-att-title="this.props.title" name="text_align">
                 <span class="px-1 d-flex align-items-center">
-                    <i t-att-class="`fa fa-align-${this.state.displayName}`"/>
+                    <i class="oi" t-att-data-icon="`format_align_${this.state.displayName}`"/>
                 </span>
             </button>
             <t t-set-slot="content">
@@ -11,7 +11,8 @@
                     <t t-foreach="this.items" t-as="item" t-key="item_index">
                         <button
                             t-att-title="item.description"
-                            t-attf-class="btn btn-light fa fa-align-{{item.icon}}"
+                            class="btn btn-light oi"
+                            t-attf-data-icon="format_align_{{item.icon}}"
                             t-att-class="{ active: item.icon === this.state.displayName }"
                             t-on-click="() => this.onSelected(item)"
                             t-on-pointerdown.prevent="() => {}"
diff --git a/addons/html_editor/static/src/main/banner_plugin.js b/addons/html_editor/static/src/main/banner_plugin.js
index dc9def51527a83..35d78c546b3e8e 100644
--- a/addons/html_editor/static/src/main/banner_plugin.js
+++ b/addons/html_editor/static/src/main/banner_plugin.js
@@ -26,7 +26,7 @@ export class BannerPlugin extends Plugin {
                 id: "banner_info",
                 title: _t("Banner Info"),
                 description: _t("Insert an info banner"),
-                icon: "fa-info-circle",
+                icon: "info",
                 isAvailable: (selection) =>
                     this.checkPredicates("is_banner_command_available_predicates", selection, "info") ?? true,
                 run: () => {
@@ -37,7 +37,8 @@ export class BannerPlugin extends Plugin {
                 id: "banner_success",
                 title: _t("Banner Success"),
                 description: _t("Insert a success banner"),
-                icon: "fa-check-circle",
+                icon: "check_circle",
+                icon_class: "oi-filled",
                 isAvailable: (selection) =>
                     this.checkPredicates("is_banner_command_available_predicates", selection, "success") ?? true,
                 run: () => {
@@ -48,7 +49,7 @@ export class BannerPlugin extends Plugin {
                 id: "banner_warning",
                 title: _t("Banner Warning"),
                 description: _t("Insert a warning banner"),
-                icon: "fa-exclamation-triangle",
+                icon: "warning",
                 isAvailable: (selection) =>
                     this.checkPredicates("is_banner_command_available_predicates", selection, "warning") ?? true,
                 run: () => {
@@ -59,7 +60,7 @@ export class BannerPlugin extends Plugin {
                 id: "banner_danger",
                 title: _t("Banner Danger"),
                 description: _t("Insert a danger banner"),
-                icon: "fa-exclamation-circle",
+                icon: "error",
                 isAvailable: (selection) =>
                     this.checkPredicates("is_banner_command_available_predicates", selection, "danger") ?? true,
                 run: () => {
@@ -70,7 +71,7 @@ export class BannerPlugin extends Plugin {
                 id: "banner_monospace",
                 title: _t("Monospace"),
                 description: _t("Insert a monospace banner"),
-                icon: "fa-laptop",
+                icon: "laptop",
                 isAvailable: (selection) =>
                     this.checkPredicates("is_banner_command_available_predicates", selection, "secondary") ?? true,
                 run: () => {
diff --git a/addons/html_editor/static/src/main/column_plugin.js b/addons/html_editor/static/src/main/column_plugin.js
index 5440fdf7e6ac9f..34b39a040dda0e 100644
--- a/addons/html_editor/static/src/main/column_plugin.js
+++ b/addons/html_editor/static/src/main/column_plugin.js
@@ -39,7 +39,7 @@ export class ColumnPlugin extends Plugin {
                 id: "columnize",
                 title: _t("Columnize"),
                 description: _t("Convert into columns"),
-                icon: "fa-columns",
+                icon: "view_column",
                 run: this.columnize.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
diff --git a/addons/html_editor/static/src/main/emoji_plugin.js b/addons/html_editor/static/src/main/emoji_plugin.js
index 831b8a298e7d35..993951efb09d09 100644
--- a/addons/html_editor/static/src/main/emoji_plugin.js
+++ b/addons/html_editor/static/src/main/emoji_plugin.js
@@ -29,7 +29,7 @@ export class EmojiPlugin extends Plugin {
                 id: "addEmoji",
                 title: _t("Emoji"),
                 description: _t("Add an emoji"),
-                icon: "fa-smile-o",
+                icon: "sentiment_satisfied",
                 run: this.showEmojiPicker.bind(this),
             },
         ],
diff --git a/addons/html_editor/static/src/main/font/color_selector.xml b/addons/html_editor/static/src/main/font/color_selector.xml
index 941d3d6098ccb6..db16f3431b1863 100644
--- a/addons/html_editor/static/src/main/font/color_selector.xml
+++ b/addons/html_editor/static/src/main/font/color_selector.xml
@@ -3,10 +3,10 @@
 <t t-name="html_editor.ColorSelector">
     <button t-custom-ref="root" class="btn btn-light" t-attf-class="o-select-color-{{this.props.type}} {{this.colorPicker.isOpen ? 'active' : ''}}" t-att-title="this.props.title" t-att-disabled="this.props.isDisabled">
         <t t-if="this.props.type === 'foreground'">
-            <i class="fa fa-fw fa-font py-1" t-att-style="this.getSelectedColorStyle()"/>
+            <i class="oi oi-fw py-1" data-icon="text_fields" t-att-style="this.getSelectedColorStyle()"/>
         </t>
         <t t-else="">
-            <i class="fa fa-fw fa-paint-brush py-1" t-att-style="this.getSelectedColorStyle()"/>
+            <i class="oi oi-fw py-1" data-icon="design_services" t-att-style="this.getSelectedColorStyle()"/>
         </t>
     </button>
 </t>
diff --git a/addons/html_editor/static/src/main/font/font_plugin.js b/addons/html_editor/static/src/main/font/font_plugin.js
index af0dd844266290..95a3ffc9192b6c 100644
--- a/addons/html_editor/static/src/main/font/font_plugin.js
+++ b/addons/html_editor/static/src/main/font/font_plugin.js
@@ -110,7 +110,7 @@ export class FontPlugin extends Plugin {
         user_commands: [
             {
                 id: "setTagHeading",
-                icon: "fa-header",
+                icon: "title",
                 run: ({ level } = {}) =>
                     this.dependencies.dom.setBlock({ tagName: `H${level ?? 1}` }),
                 isAvailable: this.blockFormatIsAvailable.bind(this),
@@ -119,7 +119,7 @@ export class FontPlugin extends Plugin {
                 id: "setTagParagraph",
                 title: _t("Text"),
                 description: _t("Paragraph block"),
-                icon: "fa-paragraph",
+                icon: "format_paragraph",
                 run: () => {
                     this.dependencies.dom.setBlock({
                         tagName: this.dependencies.baseContainer.getDefaultNodeName(),
@@ -131,7 +131,7 @@ export class FontPlugin extends Plugin {
                 id: "setTagQuote",
                 title: _t("Quote"),
                 description: _t("Add a blockquote section"),
-                icon: "fa-quote-right",
+                icon: "format_quote",
                 run: () => this.dependencies.dom.setBlock({ tagName: "blockquote" }),
                 isAvailable: this.blockFormatIsAvailable.bind(this),
             },
@@ -139,7 +139,7 @@ export class FontPlugin extends Plugin {
                 id: "setTagPre",
                 title: _t("Code"),
                 description: _t("Add a code section"),
-                icon: "fa-code",
+                icon: "code",
                 run: () => this.dependencies.dom.setBlock({ tagName: "pre" }),
                 isAvailable: this.blockFormatIsAvailable.bind(this),
             },
diff --git a/addons/html_editor/static/src/main/font/gradient_picker/gradient_picker.xml b/addons/html_editor/static/src/main/font/gradient_picker/gradient_picker.xml
index 353251200929fa..669ec9d72bcbab 100644
--- a/addons/html_editor/static/src/main/font/gradient_picker/gradient_picker.xml
+++ b/addons/html_editor/static/src/main/font/gradient_picker/gradient_picker.xml
@@ -8,7 +8,7 @@
                     <Dropdown>
                         <button class="btn btn-light d-flex justify-content-between w-100 ms-2 border border-dark rounded-0">
                             <span class="px-1" t-out="this.state.type"/>
-                            <i class="fa fa-caret-down ms-2"/>
+                            <i class="oi ms-2" data-icon="arrow_drop_down"/>
                         </button>
                         <t t-set-slot="content">
                             <DropdownItem onSelected="() => this.selectType('linear')">
@@ -150,7 +150,7 @@
                         <a t-on-click="() => this.removeColor(this.state.currentColorIndex)"
                            t-attf-style="left: #{this.colors[this.state.currentColorIndex].percentage}%"
                            type="button" class="btn btn-sm btn-light position-absolute">
-                           <i class="fa fa-fw fa-trash" role="img"/>
+                           <i class="oi oi-fw oi-filled" data-icon="delete" role="img"/>
                         </a>
                     </t>
                 </div>
diff --git a/addons/html_editor/static/src/main/link/link_plugin.js b/addons/html_editor/static/src/main/link/link_plugin.js
index f27c6e9a444e32..d630acca1ebe9c 100644
--- a/addons/html_editor/static/src/main/link/link_plugin.js
+++ b/addons/html_editor/static/src/main/link/link_plugin.js
@@ -182,7 +182,7 @@ export class LinkPlugin extends Plugin {
                 id: "openLinkTools",
                 title: _t("Link"),
                 description: _t("Add a link"),
-                icon: "fa-link",
+                icon: "link",
                 run: ({ link, type } = {}) => this.openLinkTools(link, type),
                 isAvailable: (selection) => {
                     const linkEl = findInSelection(selection, "a");
@@ -195,7 +195,7 @@ export class LinkPlugin extends Plugin {
                 id: "removeLinkFromSelection",
                 title: _t("Remove Link"),
                 description: _t("Remove Link"),
-                icon: "fa-unlink",
+                icon: "link_off",
                 isAvailable: (selection) => {
                     if (!isHtmlContentSupported(selection)) {
                         return false;
@@ -270,7 +270,7 @@ export class LinkPlugin extends Plugin {
             commandId: "openLinkTools",
             commandParams: { type: "primary" },
             description: _t("Add a button"),
-            icon: "fa-square",
+            icon: "square",
         }),
 
         link_popovers: [
@@ -465,7 +465,7 @@ export class LinkPlugin extends Plugin {
         const pasteAsURLCommand = {
             title: _t("Paste as URL"),
             description: _t("Create an URL."),
-            icon: "fa-link",
+            icon: "link",
             run: () => {
                 this.trigger(
                     "on_will_paste_handlers",
diff --git a/addons/html_editor/static/src/main/link/link_popover.js b/addons/html_editor/static/src/main/link/link_popover.js
index c0ca5fcb17b38b..f9770bb5dd41f1 100644
--- a/addons/html_editor/static/src/main/link/link_popover.js
+++ b/addons/html_editor/static/src/main/link/link_popover.js
@@ -80,9 +80,9 @@ export class LinkPopover extends Component {
             url: linkElement.getAttribute("href") || this.deduceUrl(textContent),
             label: labelEqualsUrl ? "" : textContent,
             previewIcon: {
-                /** @type {'fa'|'imgSrc'|'mimetype'} */
-                type: "fa",
-                value: "fa-globe",
+                /** @type {'oi'|'imgSrc'|'mimetype'} */
+                type: "oi",
+                value: "public",
             },
             urlTitle: "",
             urlDescription: "",
@@ -346,7 +346,7 @@ export class LinkPopover extends Component {
      * link preview in the popover
      */
     resetPreview() {
-        this.state.previewIcon = { type: "fa", value: "fa-globe" };
+        this.state.previewIcon = { type: "oi", value: "public" };
         this.state.urlTitle = this.state.url || _t("No URL specified");
         this.state.urlDescription = "";
         this.state.linkPreviewName = "";
@@ -355,14 +355,14 @@ export class LinkPopover extends Component {
         let url;
         if (this.state.url === "") {
             this.resetPreview();
-            this.state.previewIcon.value = "fa-question-circle-o";
+            this.state.previewIcon.value = "help_outline";
             return;
         }
         if (this.isLogoutUrl()) {
             // The session ends if we fetch this url, so the preview is hardcoded
             this.resetPreview();
             this.state.urlTitle = _t("Logout");
-            this.state.previewIcon.value = "fa-sign-out";
+            this.state.previewIcon.value = "logout";
             return;
         }
         if (this.isAttachmentUrl()) {
@@ -385,10 +385,11 @@ export class LinkPopover extends Component {
         this.resetPreview();
         const protocol = url.protocol;
         if (!protocol.startsWith("http")) {
-            const faMap = { "mailto:": "fa-envelope-o", "tel:": "fa-phone" };
+            const faMap = { "mailto:": "mail", "tel:": "phone" };
             const icon = faMap[protocol];
             if (icon) {
                 this.state.previewIcon.value = icon;
+                this.state.previewIcon.class = icon ==="phone" ? "oi-filled" : undefined;
             }
         } else if (
             window.location.hostname !== url.hostname &&
@@ -470,8 +471,8 @@ export class LinkPopover extends Component {
             if (internalMetadata.imgSrc) {
                 this.state.imgSrc = internalMetadata.imgSrc;
                 this.state.previewIcon = {
-                    type: "fa",
-                    value: "fa-picture-o",
+                    type: "oi",
+                    value: "image",
                 };
             }
         }
diff --git a/addons/html_editor/static/src/main/link/link_popover.xml b/addons/html_editor/static/src/main/link/link_popover.xml
index 7977259414a1af..516c854d5cbf5c 100644
--- a/addons/html_editor/static/src/main/link/link_popover.xml
+++ b/addons/html_editor/static/src/main/link/link_popover.xml
@@ -14,7 +14,7 @@
                     <t t-if="this.state.showAdvancedOptions">
                         <div class="o_advance_option_panel">
                             <div class="o_advance_options_grid" style="width: 200px;">
-                                <button t-if="this.state.showAdvancedOptions" class="fa fa-angle-left btn btn-secondary border-10" t-on-click="this.toggleAdvancedOptions"/>
+                                <button t-if="this.state.showAdvancedOptions" class="oi btn btn-secondary border-10" data-icon="keyboard_arrow_left" t-on-click="this.toggleAdvancedOptions"/>
                                     <t t-foreach="Object.values(this.state.relAttributeOptions)" t-as="opt" t-key="opt.label">
                                         <t t-if="opt.label !== 'noopener'">
                                             <div class="o_seo_option_row d-flex justify-content-between align-items-center py-1 gap-2">
@@ -63,7 +63,7 @@
                                 t-on-keydown="this.onKeydownEnter"
                                 t-on-input="this.onChange"/>
                             <span class="ms-1" t-if="this.props.canUpload">
-                                or <button class="btn btn-light btn-sm" t-on-click="this.uploadFile"><i class="fa fa-upload"/></button>
+                                or <button class="btn btn-light btn-sm" t-on-click="this.uploadFile"><i class="oi" data-icon="upload"/></button>
                             </span>
 
                         </div>
@@ -129,10 +129,10 @@
                             </div>
                             <div class="d-flex align-items-center gap-1">
                                 <a t-if="this.props.canRemove and this.state.url" href="#" class="o_we_remove_link text-dark d-flex me-1" t-on-click.prevent="this.onClickRemove" title="Remove Link">
-                                    <i class="fa fa-chain-broken"></i>
+                                    <i class="oi" data-icon="link_off"></i>
                                 </a>
                                 <button class="btn btn-sm btn-secondary" title="Advanced mode" t-att-disabled="!this.state.url" t-on-click="this.toggleAdvancedOptions">
-                                    <i class="fa fa-gear"/>
+                                    <i class="oi oi-filled" data-icon="settings"/>
                                 </button>
                             </div>
                         </div>
@@ -146,7 +146,7 @@
                         <span class="o_we_preview_favicon" style="width: 16px; height: 32px">
                             <img t-if="this.state.previewIcon.type === 'imgSrc'" t-att-src="this.state.previewIcon.value" class="align-content-center"/>
                             <span t-elif="this.state.previewIcon.type === 'mimetype'" class="o_image" t-att-data-mimetype="this.state.previewIcon.value"/>
-                            <i t-else="" t-attf-class="fa fa-fw {{this.state.previewIcon.value}}"></i>
+                            <i t-else="" class="oi oi-fw" t-att-class="this.state.previewIcon.class" t-att-data-icon="this.state.previewIcon.value"></i>
                         </span>
                         <div class="ms-1" style="width: 264px;">
                             <div class="d-flex">
@@ -165,7 +165,7 @@
                                         t-on-click="this.onClickReplaceTitle"
                                         title="Replace URL with its title"
                                     >
-                                        <i class="fa fa-magic"></i>
+                                        <i class="oi" data-icon="wand_stars"></i>
                                     </a>
                                     <a t-if="this.props.canEdit" href="#" class="o_we_edit_link btn btn-sm btn-secondary" t-on-click="this.onClickEdit" title="Edit Link">Edit</a>
                                 </div>
@@ -184,14 +184,14 @@
                             </a>
                     </div>
                     <div t-if="this.state.urlDescription" class="d-flex">
-                        <i class="fa fa-align-right align-content-center"></i>
+                        <i class="oi align-content-center" data-icon="format_align_right"></i>
                         <span class="ms-1 o_we_description_link_preview" style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px;color: gray; overflow: hidden;" t-attf-title="{{this.state.urlDescription}}">
                             <t t-out="this.state.urlDescription"/>
                         </span>
                     </div>
                 </div>
                 <div t-if="!this.state.isImage and this.state.urlTitle and this.state.label === '' and this.state.showReplaceTitleBanner" class="d-flex align-items-baseline" style="background-color: var(--primary);">
-                    <i class="fa fa-magic fa-fw m-1" style="color: var(--o-cc1-btn-primary-text);"></i>
+                    <i class="oi oi-fw m-1" data-icon="wand_stars" style="color: var(--o-cc1-btn-primary-text);"></i>
                     <span class="me-2 flex-grow-1" style="color: var(--o-cc1-btn-primary-text);font-size: smaller;">Replace URL with its title?</span>
                     <button class=" btn btn-sm btn-primary o_we_replace_title_btn" style="margin: 1px;font-size: smaller;" t-on-click="this.onClickReplaceTitle">Yes</button>
                 </div>
diff --git a/addons/html_editor/static/src/main/list/list_plugin.js b/addons/html_editor/static/src/main/list/list_plugin.js
index 7146e8a5937197..53408c31208d71 100644
--- a/addons/html_editor/static/src/main/list/list_plugin.js
+++ b/addons/html_editor/static/src/main/list/list_plugin.js
@@ -92,7 +92,7 @@ export class ListPlugin extends Plugin {
                 id: "toggleListUL",
                 title: _t("Bulleted list"),
                 description: _t("Create a simple bulleted list"),
-                icon: "fa-list-ul",
+                icon: "format_list_bulleted",
                 run: () => this.toggleListCommand({ mode: "UL" }),
                 isAvailable: this.canToggleList.bind(this),
             },
@@ -100,7 +100,7 @@ export class ListPlugin extends Plugin {
                 id: "toggleListOL",
                 title: _t("Numbered list"),
                 description: _t("Create a list with numbering"),
-                icon: "fa-list-ol",
+                icon: "format_list_numbered",
                 run: ({ listStyle } = {}) => this.toggleListCommand({ mode: "OL", listStyle }),
                 isAvailable: this.canToggleList.bind(this),
             },
@@ -108,7 +108,7 @@ export class ListPlugin extends Plugin {
                 id: "toggleListCL",
                 title: _t("Checklist"),
                 description: _t("Track tasks with a checklist"),
-                icon: "fa-check-square-o",
+                icon: "check_box",
                 run: () => this.toggleListCommand({ mode: "CL" }),
                 isAvailable: (selection) =>
                     this.config.allowChecklist && this.canToggleList(selection),
diff --git a/addons/html_editor/static/src/main/list/list_selector.xml b/addons/html_editor/static/src/main/list/list_selector.xml
index 5627cac51091f2..d7770719ed4251 100644
--- a/addons/html_editor/static/src/main/list/list_selector.xml
+++ b/addons/html_editor/static/src/main/list/list_selector.xml
@@ -1,7 +1,7 @@
 <templates xml:space="preserve">
     <t t-name="html_editor.ListSelector">
         <Dropdown menuClass="'o-we-toolbar-dropdown'" bottomSheet="false" menuRef="this.menuRef">
-            <button class="btn btn-light fa fa-list-ul" t-att-title="this.props.title" name="list_selector"/>
+            <button class="btn btn-light oi" data-icon="format_list_bulleted" t-att-title="this.props.title" name="list_selector"/>
             <t t-set-slot="content" t-key="this.props.key.value">
                 <div data-prevent-closing-overlay="true">
                     <t t-set="activeMode" t-value="this.getActiveMode()"/>
@@ -9,8 +9,9 @@
                         <button
                             t-att-title="button.description"
                             t-att-name="button.id"
-                            t-attf-class="btn btn-light fa {{button.icon}}"
+                            class="btn btn-light oi"
                             t-att-class="{ active: activeMode === button.mode }"
+                            t-att-data-icon="button.icon"
                             t-on-click="button.run"
                         />
                     </t>
diff --git a/addons/html_editor/static/src/main/media/file_plugin.js b/addons/html_editor/static/src/main/media/file_plugin.js
index a6d10aaa98ebea..9e9a467d94dd8b 100644
--- a/addons/html_editor/static/src/main/media/file_plugin.js
+++ b/addons/html_editor/static/src/main/media/file_plugin.js
@@ -22,7 +22,7 @@ export class FilePlugin extends Plugin {
             id: "uploadFile",
             title: _t("Upload a file"),
             description: _t("Add a download box"),
-            icon: "fa-upload",
+            icon: "upload",
             run: this.uploadAndInsertFiles.bind(this),
             isAvailable: (selection) =>
                 this.isUploadCommandAvailable(selection) && isHtmlContentSupported(selection),
diff --git a/addons/html_editor/static/src/main/media/icon_plugin.js b/addons/html_editor/static/src/main/media/icon_plugin.js
index d7c14e7fd56542..e6596b94b8b6e6 100644
--- a/addons/html_editor/static/src/main/media/icon_plugin.js
+++ b/addons/html_editor/static/src/main/media/icon_plugin.js
@@ -46,7 +46,7 @@ export class IconPlugin extends Plugin {
             {
                 id: "toggleSpinIcon",
                 description: _t("Toggle icon spin"),
-                icon: "fa-play",
+                icon: "play_arrow",
                 run: this.toggleSpinIcon.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
@@ -68,15 +68,15 @@ export class IconPlugin extends Plugin {
                 // FEFF is directly adjacent to it.
                 const isIconRelatedNode = (node) => {
                     if (
-                        node.classList?.contains("fa") ||
-                        node.parentElement?.classList.contains("fa")
+                        node.classList?.contains("oi") ||
+                        node.parentElement?.classList.contains("oi")
                     ) {
                         return true;
                     }
                     if (isZwnbsp(node) && isIconInTargetedNodes) {
                         return (
-                            node.nextElementSibling?.classList?.contains("fa") ||
-                            node.previousElementSibling?.classList?.contains("fa")
+                            node.nextElementSibling?.classList?.contains("oi") ||
+                            node.previousElementSibling?.classList?.contains("oi")
                         );
                     }
                     return false;
@@ -154,12 +154,12 @@ export class IconPlugin extends Plugin {
             return;
         }
         for (const classString of targetedIcon.classList) {
-            if (classString.match(/^fa-[2-5]x$/)) {
+            if (classString.match(/^oi-[2-5]x$/)) {
                 targetedIcon.classList.remove(classString);
             }
         }
         if (size !== "1") {
-            targetedIcon.classList.add(`fa-${size}x`);
+            targetedIcon.classList.add(`oi-${size}x`);
         }
         this.dependencies.history.addStep();
     }
@@ -169,7 +169,7 @@ export class IconPlugin extends Plugin {
         if (!selectedIcon) {
             return;
         }
-        selectedIcon.classList.toggle("fa-spin");
+        selectedIcon.classList.toggle("oi-spin");
         this.dependencies.history.addStep();
     }
 
@@ -180,10 +180,10 @@ export class IconPlugin extends Plugin {
         }
         if (size === "1") {
             return ![...selectedIcon.classList].some((classString) =>
-                classString.match(/^fa-[2-5]x$/)
+                classString.match(/^oi-[2-5]x$/)
             );
         }
-        return selectedIcon.classList.contains(`fa-${size}x`);
+        return selectedIcon.classList.contains(`oi-${size}x`);
     }
 
     hasSpinIcon() {
@@ -191,7 +191,7 @@ export class IconPlugin extends Plugin {
         if (!selectedIcon) {
             return;
         }
-        return selectedIcon.classList.contains("fa-spin");
+        return selectedIcon.classList.contains("oi-spin");
     }
 
     openIconDialog() {
diff --git a/addons/html_editor/static/src/main/media/image_crop.xml b/addons/html_editor/static/src/main/media/image_crop.xml
index 2cc933e16f142a..928e727b5e2eb4 100644
--- a/addons/html_editor/static/src/main/media/image_crop.xml
+++ b/addons/html_editor/static/src/main/media/image_crop.xml
@@ -19,23 +19,23 @@
                         </t>
                     </div>
                     <div class="btn-group" role="group">
-                        <button type="button" title="Zoom In" t-on-click="() => this.onZoom(0.1)"><i class="fa fa-fw fa-search-plus"/></button>
-                        <button type="button" title="Zoom Out" t-on-click="() => this.onZoom(-0.1)"><i class="fa fa-fw fa-search-minus"/></button>
+                        <button type="button" title="Zoom In" t-on-click="() => this.onZoom(0.1)"><i class="oi oi-fw" data-icon="zoom_in"/></button>
+                        <button type="button" title="Zoom Out" t-on-click="() => this.onZoom(-0.1)"><i class="oi oi-fw" data-icon="zoom_out"/></button>
                     </div>
                     <div class="btn-group" role="group">
-                        <button type="button" title="Rotate Left" t-on-click="() => this.onRotate(-90)"><i class="fa fa-fw fa-rotate-left"/></button>
-                        <button type="button" title="Rotate Right" t-on-click="() => this.onRotate(90)"><i class="fa fa-fw fa-rotate-right"/></button>
+                        <button type="button" title="Rotate Left" t-on-click="() => this.onRotate(-90)"><i class="oi oi-fw" data-icon="undo"/></button>
+                        <button type="button" title="Rotate Right" t-on-click="() => this.onRotate(90)"><i class="oi oi-fw" data-icon="redo"/></button>
                     </div>
                     <div class="btn-group" role="group">
-                        <button type="button" title="Flip Horizontal" t-on-click="() => this.onFlip('scaleX')"><i class="oi oi-fw oi-arrows-h"/></button>
-                        <button type="button" title="Flip Vertical" t-on-click="() => this.onFlip('scaleY')"><i class="oi oi-fw oi-arrows-v"/></button>
+                        <button type="button" title="Flip Horizontal" t-on-click="() => this.onFlip('scaleX')"><i class="oi" data-icon="arrow_range"/></button>
+                        <button type="button" title="Flip Vertical" t-on-click="() => this.onFlip('scaleY')"><i class="oi" data-icon="height"/></button>
                     </div>
                     <div class="btn-group" role="group">
-                        <button type="button" title="Reset Image" t-on-click="this.onReset"><i class="fa fa-refresh"/> Reset Image</button>
+                        <button type="button" title="Reset Image" t-on-click="this.onReset"><i class="oi" data-icon="refresh"/> Reset Image</button>
                     </div>
                     <div class="btn-group" role="group">
-                        <button type="button" t-on-click="this.save" class="btn btn-primary"><i class="fa fa-check" role="presentation"/> Apply</button>
-                        <button type="button" t-custom-ref="discardButton" t-on-click="this.closeCropper" class="btn btn-danger"><i class="oi oi-close" role="presentation"/> Discard</button>
+                        <button type="button" t-on-click="this.save" class="btn btn-primary"><i class="oi" data-icon="check" role="presentation"/> Apply</button>
+                        <button type="button" t-custom-ref="discardButton" t-on-click="this.closeCropper" class="btn btn-danger"><i class="oi" data-icon="close_small" role="presentation"/> Discard</button>
                     </div>
                 </div>
             </div>
diff --git a/addons/html_editor/static/src/main/media/image_crop_plugin.js b/addons/html_editor/static/src/main/media/image_crop_plugin.js
index 066367c9f4f4a8..d9741f8c39d490 100644
--- a/addons/html_editor/static/src/main/media/image_crop_plugin.js
+++ b/addons/html_editor/static/src/main/media/image_crop_plugin.js
@@ -20,7 +20,7 @@ export class ImageCropPlugin extends Plugin {
                 id: "cropImage",
                 run: this.openCropImage.bind(this),
                 description: _t("Crop image"),
-                icon: "fa-crop",
+                icon: "crop",
                 isAvailable: isHtmlContentSupported,
             },
         ],
diff --git a/addons/html_editor/static/src/main/media/image_plugin.js b/addons/html_editor/static/src/main/media/image_plugin.js
index 5399e70220a050..31f1eb587ccef4 100644
--- a/addons/html_editor/static/src/main/media/image_plugin.js
+++ b/addons/html_editor/static/src/main/media/image_plugin.js
@@ -58,42 +58,43 @@ export class ImagePlugin extends Plugin {
             {
                 id: "deleteImage",
                 description: _t("Remove (DELETE) image"),
-                icon: "fa-trash text-danger",
+                icon: "delete",
+                icon_class: "oi-filled text-danger",
                 run: this.deleteImage.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
             {
                 id: "previewImage",
                 description: _t("Preview image"),
-                icon: "fa-search-plus",
+                icon: "zoom_in",
                 run: this.previewImage.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
             {
                 id: "setImageShapeRounded",
                 description: _t("Set shape: Rounded"),
-                icon: "fa-square",
+                icon: "square",
                 run: () => this.setImageShape("rounded", { excludeClasses: ["rounded-circle"] }),
                 isAvailable: isHtmlContentSupported,
             },
             {
                 id: "setImageShapeCircle",
                 description: _t("Set shape: Circle"),
-                icon: "fa-circle-o",
+                icon: "circle",
                 run: () => this.setImageShape("rounded-circle", { excludeClasses: ["rounded"] }),
                 isAvailable: isHtmlContentSupported,
             },
             {
                 id: "setImageShapeShadow",
                 description: _t("Set shape: Shadow"),
-                icon: "fa-sun-o",
+                icon: "light_mode",
                 run: () => this.setImageShape("shadow"),
                 isAvailable: isHtmlContentSupported,
             },
             {
                 id: "setImageShapeThumbnail",
                 description: _t("Set shape: Thumbnail"),
-                icon: "fa-picture-o",
+                icon: "image",
                 run: () => this.setImageShape("img-thumbnail"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -362,7 +363,7 @@ export class ImagePlugin extends Plugin {
             return {
                 title: _t("Embed Image"),
                 description: _t("Embed the image in the document."),
-                icon: "fa-image",
+                icon: "image",
                 run: () => {
                     this.trigger(
                         "on_will_paste_handlers",
@@ -407,7 +408,7 @@ export class ImagePlugin extends Plugin {
     getImageTransformProps() {
         return {
             id: "image_transform",
-            icon: "fa-object-ungroup",
+            icon: "deselect",
             title: _t("Transform the picture (click twice to reset transformation)"),
             getTargetedImage: this.getTargetedImage.bind(this),
             resetImageTransformation: this.resetImageTransformation.bind(this),
diff --git a/addons/html_editor/static/src/main/media/image_transform_button.xml b/addons/html_editor/static/src/main/media/image_transform_button.xml
index 3eca4542a8942b..32fb00cbe73b14 100644
--- a/addons/html_editor/static/src/main/media/image_transform_button.xml
+++ b/addons/html_editor/static/src/main/media/image_transform_button.xml
@@ -1,7 +1,7 @@
 <templates xml:space="preserve">
     <t t-name="html_editor.ImageTransformButton">
         <button class="btn btn-light" t-att-class="{active: this.state.active, disabled: this.props.isDisabled}" t-att-title="this.state.active ? this.props.activeTitle : this.props.title" t-att-name="this.props.id" t-on-click="this.onButtonClick">
-            <span class="fa fa-fw" t-att-class="this.props.icon"/>
+            <span class="oi oi-fw" t-att-data-icon="this.props.icon"/>
         </button>
     </t>
 </templates>
diff --git a/addons/html_editor/static/src/main/media/image_transformation.xml b/addons/html_editor/static/src/main/media/image_transformation.xml
index 4ed7ee5033640f..3ff6bf80cb9927 100644
--- a/addons/html_editor/static/src/main/media/image_transformation.xml
+++ b/addons/html_editor/static/src/main/media/image_transformation.xml
@@ -3,9 +3,9 @@
         <div class="transfo-container" t-custom-ref="transfoContainer" t-on-mousedown.prevent="this.mouseDown">
             <div class="transfo-controls" t-custom-ref="transfoControls">
                 <div style="cursor: crosshair; position: absolute; margin: -30px; top: 0; right: 0; padding: 1px 0 0 1px;" class="transfo-rotator">
-                    <span class="fa-stack fa-lg">
-                    <i class="fa fa-circle fa-stack-2x"></i>
-                    <i class="fa fa-repeat fa-stack-1x fa-inverse"></i>
+                    <span class="oi-stack oi-lg">
+                    <i class="oi oi-stack-2x oi-filled" data-icon="circle"></i>
+                    <i class="oi oi-stack-1x" data-icon="redo"></i>
                     </span>
                 </div>
                 <div style="top: 0%; left: 0%; cursor: nw-resize;" class="transfo-scaler transfo-scaler-tl"></div>
diff --git a/addons/html_editor/static/src/main/media/media_dialog/document_selector.xml b/addons/html_editor/static/src/main/media/media_dialog/document_selector.xml
index 6477db5a820be7..6a67446622ffd0 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/document_selector.xml
+++ b/addons/html_editor/static/src/main/media/media_dialog/document_selector.xml
@@ -10,7 +10,7 @@
 </t>
 
 <t t-name="html_editor.DocumentsListTemplate">
-    <div class="o_we_existing_attachments o_we_documents" t-custom-ref="existing-attachments">
+    <div class="o_we_existing_attachments o_we_documents px-3" t-custom-ref="existing-attachments">
         <div t-if="!this.hasContent" class="o_nocontent_help">
             <p class="o_empty_folder_image">No documents found.</p>
             <p class="o_empty_folder_subtitle">You can upload documents with the button located in the top left of the screen.</p>
diff --git a/addons/html_editor/static/src/main/media/media_dialog/file_selector.js b/addons/html_editor/static/src/main/media/media_dialog/file_selector.js
index c9a842072eb776..83bb7058d04503 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/file_selector.js
+++ b/addons/html_editor/static/src/main/media/media_dialog/file_selector.js
@@ -40,7 +40,7 @@ export const ATTACHMENT_FIELDS = [
 ];
 
 class RemoveButton extends Component {
-    static template = xml`<i class="fa fa-trash o_existing_attachment_remove position-absolute top-0 end-0 p-2 bg-white-25 cursor-pointer opacity-0 opacity-100-hover z-1 transition-base" t-att-title="this.removeTitle" role="img" t-att-aria-label="this.removeTitle" t-on-click="this.remove"/>`;
+    static template = xml`<i class="oi oi-filled o_existing_attachment_remove position-absolute top-0 end-0 p-2 bg-white-25 cursor-pointer opacity-0 opacity-100-hover z-1 transition-base" data-icon="delete" t-att-title="this.removeTitle" role="img" t-att-aria-label="this.removeTitle" t-on-click="this.remove"/>`;
     static props = ["model?", "remove"];
     setup() {
         this.removeTitle = _t("This file is attached to the current record.");
diff --git a/addons/html_editor/static/src/main/media/media_dialog/file_selector.xml b/addons/html_editor/static/src/main/media/media_dialog/file_selector.xml
index 5eed7b2fe33d9c..2cdcf5efe45654 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/file_selector.xml
+++ b/addons/html_editor/static/src/main/media/media_dialog/file_selector.xml
@@ -21,10 +21,10 @@
                     <t t-out="this.props.addText"/>
             </button>
             <div class="d-flex align-items-center">
-                <span t-if="this.state.urlInput and this.state.isValidatingUrl" class="o_we_url_loading mx-2 fa fa-lg fa-circle-o-notch fa-spin" title="Loading..."/>
-                <span t-elif="this.state.urlInput and this.state.isValidUrl and this.state.isValidFileFormat" class="o_we_url_success text-success mx-2 fa fa-lg fa-check" title="The URL seems valid."/>
-                <span t-elif="this.state.urlInput and !this.state.isValidUrl" class="o_we_url_error text-danger mx-2 oi oi-large oi-close" title="The URL does not seem to work."/>
-                <span t-elif="this.props.urlWarningTitle and this.state.urlInput and this.state.isValidUrl and !this.state.isValidFileFormat" class="o_we_url_warning text-warning mx-2 fa fa-lg fa-warning" t-att-title="this.props.urlWarningTitle"/>
+                <span t-if="this.state.urlInput and this.state.isValidatingUrl" class="o_we_url_loading mx-2 oi oi-lg oi-spin" data-icon="autorenew" title="Loading..."/>
+                <span t-elif="this.state.urlInput and this.state.isValidUrl and this.state.isValidFileFormat" class="o_we_url_success text-success mx-2 oi oi-lg" data-icon="check" title="The URL seems valid."/>
+                <span t-elif="this.state.urlInput and !this.state.isValidUrl" class="o_we_url_error text-danger mx-2 oi oi-lg" data-icon="close_small" title="The URL does not seem to work."/>
+                <span t-elif="this.props.urlWarningTitle and this.state.urlInput and this.state.isValidUrl and !this.state.isValidFileFormat" class="o_we_url_warning text-warning mx-2 oi oi-lg" data-icon="warning" t-att-title="this.props.urlWarningTitle"/>
             </div>
         </div>
         <input type="file" class="d-none o_file_input" t-on-change="this.onChangeFileInput" t-custom-ref="file-input" t-att-accept="this.props.accept" t-att-multiple="this.props.multiSelect and 'multiple'"/>
@@ -71,7 +71,8 @@
             </div>
         </div>
         <div t-if="this.state.canScrollAttachments"
-            class="position-sticky d-flex align-items-center mx-auto btn btn-primary rounded-circle oi oi-chevron-down o_scroll_attachments"
+            class="position-sticky d-flex align-items-center mx-auto btn btn-primary rounded-circle oi o_scroll_attachments"
+            data-icon="keyboard_arrow_down"
             t-on-click="this.handleScrollAttachments"/>
     </div>
 </t>
diff --git a/addons/html_editor/static/src/main/media/media_dialog/icon_selector.js b/addons/html_editor/static/src/main/media/media_dialog/icon_selector.js
index ecb644186c73c9..9fb5b1e5b62f20 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/icon_selector.js
+++ b/addons/html_editor/static/src/main/media/media_dialog/icon_selector.js
@@ -1,11 +1,58 @@
 import { useState } from "@web/owl2/utils";
 import { SearchMedia } from "./search_media";
 import { fonts } from "@html_editor/utils/fonts";
+import { MS_ICONS_BY_CATEGORY, MS_CATEGORY_LABELS } from "./material_symbols_icons";
 
 import { Component } from "@odoo/owl";
 
+/**
+ * Custom Odoo UI icons (oi font, not Material Symbols).
+ * These are rendered as: <span class="oi" data-icon="oi_<name>">
+ *
+ * Sourced from the $custom_oi_icons SCSS map in web/static/src/webclient/icons.scss.
+ */
+const OI_ICONS = {
+    Brands: [
+        "threads", "kickstarter", "x", "twitter", "x-square", "twitter-square", "tiktok",
+        "bluesky", "google-play", "strava", "discord", "amazon", "angellist", "bandcamp",
+        "binoculars", "bitbucket-square", "bitbucket", "black-tie", "bomb", "buysellads",
+        "cc-amex", "github-square", "500px", "adn", "android", "apple", "behance-square",
+        "behance", "birthday-cake", "chrome", "codepen", "codiepie", "connectdevelop",
+        "contao", "creative-commons", "css3", "delicious", "deviantart", "digg", "dribbble",
+        "dropbox", "drupal", "edge", "eercast", "empire", "envira", "etsy", "expeditedssl",
+        "fa", "facebook-official", "facebook-square", "facebook", "firefox", "first-order",
+        "flickr", "fonticons", "fort-awesome", "forumbee", "foursquare", "free-code-camp",
+        "get-pocket", "gg-circle", "gg", "git-square", "git", "github-alt", "github",
+        "gitlab", "gittip", "glide-g", "glide", "google-plus-circle", "google-plus-square",
+        "google-plus", "google-wallet", "google", "grav", "hacker-news", "hand-lizard-o",
+        "hand-peace-o", "hand-scissors-o", "hand-spock-o", "houzz", "html5", "imdb",
+        "instagram", "internet-explorer", "ioxhost", "joomla", "jsfiddle", "lastfm-square",
+        "lastfm", "leanpub", "lemon-o", "linkedin-square", "linkedin", "linode", "linux",
+        "magnet", "maxcdn", "meanpath", "medium", "meetup", "mercury", "mixcloud", "modx",
+        "neuter", "odnoklassniki-square", "odnoklassniki", "opencart", "openid", "opera",
+        "optin-monster", "pagelines", "paypal", "pied-piper-alt", "pied-piper-pp",
+        "pied-piper", "pinterest-p", "pinterest-square", "pinterest", "product-hunt", "qq",
+        "quora", "ra", "ravelry", "reddit-alien", "reddit-square", "reddit", "renren",
+        "safari", "scribd", "sellsy", "shirtsinbulk", "simplybuilt", "skyatlas", "skype",
+        "slack", "slideshare", "snapchat-ghost", "snapchat-square", "snapchat", "soundcloud",
+        "spotify", "stack-exchange", "stack-overflow", "steam-square", "steam",
+        "stumbleupon-circle", "stumbleupon", "superpowers", "telegram", "tencent-weibo",
+        "themeisle", "trademark", "trello", "tripadvisor", "tumblr-square", "tumblr",
+        "twitch", "user-secret", "viacoin", "viadeo-square", "viadeo", "vimeo-square",
+        "vimeo", "vine", "vk", "wechat", "whatsapp", "wikipedia-w", "windows", "wordpress",
+        "wpbeginner", "wpexplorer", "wpforms", "xing-square", "xing", "y-combinator",
+        "yahoo", "yelp", "youtube-play", "youtube-square", "youtube", "cc-diners-club",
+        "cc-stripe", "cc-visa", "cc-jcb", "dashcube", "cc-mastercard", "cc-discover",
+    ],
+    Views: ["view-pivot", "view-cohort", "studio"],
+    Misc: [
+        "odoo", "mars-double", "mars-stroke-h", "mars-stroke-v", "mars-stroke",
+        "venus-double", "venus-mars",
+    ],
+};
+
 export class IconSelector extends Component {
-    static mediaSpecificClasses = ["fa"];
+    static mediaSpecificClasses = ["oi"];
     static mediaSpecificStyles = ["color", "background-color"];
     static mediaExtraClasses = [
         "rounded-circle",
@@ -14,7 +61,7 @@ export class IconSelector extends Component {
         "shadow",
         /^text-\S+$/,
         /^bg-\S+$/,
-        /^fa-\S+$/,
+        /^oi-\S+$/,
     ];
     static tagNames = ["SPAN", "I"];
     static template = "html_editor.IconSelector";
@@ -24,9 +71,13 @@ export class IconSelector extends Component {
     static props = ["*"];
 
     setup() {
+        // Pre-populate filled state when editing an existing filled icon
+        const filled = this.props.media?.classList.contains("oi-filled") ?? false;
         this.state = useState({
-            fonts: this.props.fonts,
+            categories: this.props.categories,
             needle: "",
+            selectedCategory: "",
+            filled,
         });
     }
 
@@ -34,30 +85,72 @@ export class IconSelector extends Component {
         return this.props.selectedMedia[this.props.id].map(({ id }) => id);
     }
 
+    /**
+     * Applies the current text needle and selected category as combined filters.
+     * If the needle matches a category label, all icons in that category are shown
+     * regardless of individual icon search terms.
+     */
+    applyFilters() {
+        const lower = this.state.needle.toLowerCase();
+        const catId = this.state.selectedCategory;
+
+        this.state.categories = this.props.categories
+            .filter((category) => !catId || category.id === catId)
+            .map((category) => {
+                if (!lower) {
+                    return category;
+                }
+                // Full category match: show all icons when the label contains the needle
+                if (category.label.toLowerCase().includes(lower)) {
+                    return category;
+                }
+                // Partial match: filter icons individually by name and tags
+                return {
+                    ...category,
+                    icons: category.icons.filter((icon) =>
+                        icon.searchTerms.includes(lower)
+                    ),
+                };
+            });
+    }
+
     search(needle) {
         this.state.needle = needle;
-        if (!this.state.needle) {
-            this.state.fonts = this.props.fonts;
-        } else {
-            this.state.fonts = this.props.fonts.map((font) => {
-                const icons = font.icons.filter(
-                    (icon) => icon.alias.indexOf(this.state.needle.toLowerCase()) >= 0
-                );
-                return { ...font, icons };
-            });
+        this.applyFilters();
+    }
+
+    onCategoryChange(ev) {
+        this.state.selectedCategory = ev.target.value;
+        this.applyFilters();
+    }
+
+    /**
+     * Determines whether the icon being selected differs from the current media element.
+     * For MS/OI icons this compares the data-icon attribute and filled state;
+     * for FA icons it compares class names.
+     *
+     * @param {Object} icon
+     * @returns {boolean}
+     */
+    iconHasChanged(icon) {
+        if (!this.props.media) {
+            return false;
         }
+        if (icon.source === "fa") {
+            return !icon.names.some((name) => this.props.media.classList.contains(name));
+        }
+        // Material Symbols and Odoo UI icons: compare data-icon and filled state
+        const dataIconChanged = this.props.media.dataset.icon !== icon.dataIcon;
+        const filledChanged =
+            this.props.media.classList.contains("oi-filled") !== this.state.filled;
+        return dataIconChanged || filledChanged;
     }
 
-    async onClickIcon(font, icon) {
+    async onClickIcon(category, icon) {
         this.props.selectMedia({
             ...icon,
-            fontBase: font.base,
-            // To check if the icon has changed, we only need to compare
-            // an alias of the icon with the class from the old media (some
-            // icons can have multiple classes e.g. "fa-gears" ~ "fa-cogs")
-            initialIconChanged:
-                this.props.media &&
-                !icon.names.some((name) => this.props.media.classList.contains(name)),
+            filled: this.state.filled,
+            initialIconChanged: this.iconHasChanged(icon),
         });
         await this.props.save();
     }
@@ -68,24 +161,91 @@ export class IconSelector extends Component {
     static createElements(selectedMedia) {
         return selectedMedia.map((icon) => {
             const iconEl = document.createElement("span");
-            iconEl.classList.add(icon.fontBase, icon.names[0]);
+            if (icon.source === "fa") {
+                // Legacy FontAwesome: icon is identified by CSS classes
+                iconEl.classList.add(icon.fontBase, icon.names[0]);
+            } else {
+                // Material Symbols and Odoo UI icons: icon is identified by data-icon attribute
+                iconEl.classList.add("oi");
+                if (icon.filled) {
+                    iconEl.classList.add("oi-filled");
+                }
+                iconEl.dataset.icon = icon.dataIcon;
+            }
             return iconEl;
         });
     }
+
+    /**
+     * Builds the full list of icon categories for the picker, merging:
+     *   1. Material Symbols (from the bundled icons data module)
+     *   2. Odoo UI custom icons (brands, views, misc)
+     *   3. Legacy FontAwesome icons (CSS-parsed, kept for retro-compatibility)
+     *
+     * @returns {Array.<{id: string, label: string, source: string, base: string, icons: Array}>}
+     */
     static initFonts() {
+        // 1. Material Symbols — one category object per Google Fonts category
+        const msCategories = Object.keys(MS_ICONS_BY_CATEGORY)
+            .sort()
+            .map((catId) => ({
+                id: `ms_${catId}`,
+                label: MS_CATEGORY_LABELS[catId] || catId,
+                source: "ms",
+                base: "oi",
+                icons: MS_ICONS_BY_CATEGORY[catId].map((icon) => ({
+                    id: `ms_${icon.name}`,
+                    name: icon.name,
+                    dataIcon: icon.name,
+                    // tags is a space-separated string for efficient substring search
+                    searchTerms: `${icon.name} ${icon.tags}`.toLowerCase(),
+                    source: "ms",
+                })),
+            }));
+
+        // 2. Odoo UI custom icons (oi font) — brands, views, and misc
+        const oiCategories = Object.entries(OI_ICONS).map(([label, names]) => ({
+            id: `oi_${label.toLowerCase()}`,
+            label: `Odoo - ${label}`,
+            source: "oi",
+            base: "oi",
+            icons: names.map((name) => ({
+                id: `oi_${name}`,
+                name,
+                dataIcon: `oi_${name}`,
+                searchTerms: name.toLowerCase().replace(/-/g, " "),
+                source: "oi",
+            })),
+        }));
+
+        // 3. Legacy FontAwesome — CSS-parsed, same logic as before
         fonts.computeFonts();
-        const allFonts = fonts.fontIcons.map(({ cssData, base }) => {
+        const faCategories = fonts.fontIcons.map(({ cssData, base }) => {
             const uniqueIcons = Array.from(
                 new Map(
                     cssData.map((icon) => {
                         const alias = icon.names.join(",");
                         const id = `${base}_${alias}`;
-                        return [id, { ...icon, alias, id }];
+                        const searchTerms = alias
+                            .replace(/fa-/g, "")
+                            .replace(/,/g, " ")
+                            .toLowerCase();
+                        return [
+                            id,
+                            { ...icon, alias, id, searchTerms, source: "fa", fontBase: base },
+                        ];
                     })
                 ).values()
             );
-            return { base, icons: uniqueIcons };
+            return {
+                id: `fa_${base}`,
+                label: "Legacy (FontAwesome)",
+                source: "fa",
+                base,
+                icons: uniqueIcons,
+            };
         });
-        return allFonts;
+
+        return [...msCategories, ...oiCategories, ...faCategories];
     }
 }
diff --git a/addons/html_editor/static/src/main/media/media_dialog/icon_selector.xml b/addons/html_editor/static/src/main/media/media_dialog/icon_selector.xml
index cc96fbb0b0dfc7..c6af44b4091c14 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/icon_selector.xml
+++ b/addons/html_editor/static/src/main/media/media_dialog/icon_selector.xml
@@ -1,24 +1,61 @@
 <templates id="template" xml:space="preserve">
 <t t-name="html_editor.IconSelector">
     <div>
-        <div class="o_we_file_selector_control_panel sticky-top d-flex gap-2 align-items-center mb-1 py-4 px-3">
+        <div class="o_we_file_selector_control_panel o_we_file_selector_control_panel_icons border-bottom sticky-top d-flex gap-2 align-items-center mb-1 px-3">
             <SearchMedia searchPlaceholder.translate="Search a pictogram"
                 search.bind="this.search"
                 needle="this.state.needle"/>
+            <!-- Category filter dropdown -->
+            <select class="form-select form-select-sm w-auto flex-shrink-0"
+                t-on-change="onCategoryChange">
+                <option value="">All categories</option>
+                <t t-foreach="this.props.categories" t-as="cat" t-key="cat.id">
+                    <option t-att-value="cat.id"
+                        t-att-selected="state.selectedCategory === cat.id">
+                        <t t-esc="cat.label"/>
+                    </option>
+                </t>
+            </select>
+            <!-- Filled mode toggle -->
+            <div class="form-check form-switch mb-0 flex-shrink-0 ms-3">
+                <input class="form-check-input" type="checkbox" id="o_icon_filled_toggle"
+                    t-att-checked="state.filled"
+                    t-on-change="() => (this.state.filled = !this.state.filled)"/>
+                <label class="form-check-label" for="o_icon_filled_toggle">Filled</label>
+            </div>
         </div>
         <div class="font-icons-icons">
-            <t t-foreach="this.state.fonts" t-as="font" t-key="font.base">
-                <div t-if="!font.icons.length" class="o_nocontent_help">
-                    <p class="o_empty_folder_image">No pictograms found.</p>
-                    <p class="o_empty_folder_subtitle">Try searching with other keywords.</p>
-                </div>
-                <span t-foreach="font.icons" t-as="icon" t-key="icon.id"
-                    t-att-title="icon.names[0]"
-                    t-att-aria-label="icon.names[0]" role="img"
-                    class="font-icons-icon m-2 fs-2 p-3 cursor-pointer text-center"
-                    t-att-class="{ o_we_attachment_selected: this.selectedMediaIds.includes(icon.id) }"
-                    t-attf-class="{{ font.base }} {{ icon.names[0] }}"
-                    t-on-click="() => this.onClickIcon(font, icon)"/>
+            <t t-foreach="this.state.categories" t-as="category" t-key="category.id">
+                <t t-if="category.icons.length">
+                    <div class="font-icons-category-header position-sticky bg-view z-1 fw-bold py-2 px-3 mt-2 border-bottom">
+                        <h2 class="fs-5 m-0" t-esc="category.label"/>
+                    </div>
+                    <!-- Material Symbols and Odoo UI icons: rendered via the data-icon attribute -->
+                    <t t-if="category.source !== 'fa'">
+                        <span t-foreach="category.icons" t-as="icon" t-key="icon.id"
+                            t-att-title="icon.name"
+                            t-att-aria-label="icon.name"
+                            role="img"
+                            class="font-icons-icon oi m-2 fs-2 p-3 cursor-pointer text-center"
+                            t-att-data-icon="icon.dataIcon"
+                            t-att-class="{
+                                o_we_attachment_selected: this.selectedMediaIds.includes(icon.id),
+                                'oi-filled': state.filled,
+                            }"
+                            t-on-click="() => this.onClickIcon(category, icon)"/>
+                    </t>
+                    <!-- Legacy FontAwesome icons: rendered via CSS class names -->
+                    <t t-else="">
+                        <span t-foreach="category.icons" t-as="icon" t-key="icon.id"
+                            t-att-title="icon.names[0]"
+                            t-att-aria-label="icon.names[0]"
+                            role="img"
+                            class="font-icons-icon m-2 fs-2 p-3 cursor-pointer text-center"
+                            t-att-class="{ o_we_attachment_selected: this.selectedMediaIds.includes(icon.id) }"
+                            t-attf-class="{{ category.base }} {{ icon.names[0] }}"
+                            t-on-click="() => this.onClickIcon(category, icon)"/>
+                    </t>
+                </t>
             </t>
         </div>
     </div>
diff --git a/addons/html_editor/static/src/main/media/media_dialog/image_selector.xml b/addons/html_editor/static/src/main/media/media_dialog/image_selector.xml
index ebdda47a45efad..b057686b31eb7a 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/image_selector.xml
+++ b/addons/html_editor/static/src/main/media/media_dialog/image_selector.xml
@@ -37,7 +37,7 @@
 </t>
 
 <t t-name="html_editor.ImagesListTemplate">
-    <div class="o_we_existing_attachments o_we_images d-flex flex-wrap my-0" t-custom-ref="existing-attachments">
+    <div class="o_we_existing_attachments o_we_images d-flex flex-wrap my-0 px-3" t-custom-ref="existing-attachments">
         <t t-if="!this.hasContent and !this.isFetching">
             <div t-if="this.state.needle" class="o_nocontent_help">
                 <p class="o_empty_folder_image">No images found.</p>
diff --git a/addons/html_editor/static/src/main/media/media_dialog/material_symbols_icons.js b/addons/html_editor/static/src/main/media/media_dialog/material_symbols_icons.js
new file mode 100644
index 00000000000000..c7a96b16f9a623
--- /dev/null
+++ b/addons/html_editor/static/src/main/media/media_dialog/material_symbols_icons.js
@@ -0,0 +1,2201 @@
+/**
+ * AI-generated icon data file for Material Symbols.
+ * List all the icons by category.
+ * Do not edit this file manually.
+ *
+ * ## How to update when Google releases new icons
+ *
+ * 1. Download the updated metadata JSON from:
+ *      https://fonts.google.com/metadata/icons?key=material_symbols_sharp
+ *
+ *    Important: the response starts with the XSSI protection prefix `)]}'` on its own line.
+ *    Strip that first line before parsing, e.g.:
+ *      content = response.text().split('\n').slice(1).join('\n')
+ *
+ * 2. The top-level `icons` array contains one object per icon. Its full shape is:
+ *    {
+ *      "name":                 string    — the ligature value, used as the data-icon attribute value
+ *      "version":              number    — DISCARD
+ *      "popularity":           number    — DISCARD
+ *      "codepoint":            number    — DISCARD
+ *      "unsupported_families": string[]  — DISCARD
+ *      "categories":           string[]  — always a single-element array; keep categories[0] only
+ *      "tags":                 string[]  — search keywords; join into a single space-separated string
+ *      "sizes_px":             number[]  — DISCARD
+ *    }
+ *
+ * 3. Rebuild MS_ICONS_BY_CATEGORY:
+ *    - Group icons by their category key (categories[0])
+ *    - Sort icons alphabetically by name within each group
+ *    - Store each entry as { name: string, tags: string } where tags is the joined string
+ *
+ * 4. If new category keys appear in the data, add them to MS_CATEGORY_LABELS with a
+ *    human-readable label.
+ */
+
+export const MS_CATEGORY_LABELS = {
+    "action": "Action",
+    "alert": "Alert",
+    "av": "Audio & Video",
+    "communication": "Communication",
+    "content": "Content",
+    "device": "Device",
+    "editor": "Editor",
+    "file": "File",
+    "hardware": "Hardware",
+    "home": "Home",
+    "image": "Image",
+    "maps": "Maps",
+    "navigation": "Navigation",
+    "notification": "Notification",
+    "places": "Places",
+    "search": "Search",
+    "social": "Social",
+    "toggle": "Toggle"
+};
+
+/** @type {Object.<string, Array.<{name: string, tags: string}>>} */
+export const MS_ICONS_BY_CATEGORY = {
+    "action": [
+        {"name": "123", "tags": "1 123 2 3 arrange arrow ascending ascending sort count data digit digit order filter increasing increasing order items line list number order numbers numerical one two three order organize pointing up sequence sort sort ascending symbol three lines up arrow"},
+        {"name": "3d_rotation", "tags": "3 3d D alphabet angle application arrow arrows av axis button camera character control digit font graphic letters manipulation menu model numbers object option orientation perspective rendering revolve rotate rotation shape software spatial spin symbol text three-dimensional tilt tool transform turning type view virtual_reality visualization vr"},
+        {"name": "abc", "tags": "absent alphabet bare blank character clean clear empty featureless font invisible letters minimal neutral no icon no image nothing null placeholder plain pristine space symbol text transparent type undefined undepicted unillustrated unimaged unrepresented unseen unstyled untouched unvisualized void white"},
+        {"name": "accessibility", "tags": "access accessibility accessible aid assistance barrier-free body disability disabled easy access feature figure handicap help human inclusion inclusive inclusivity mobility navigation options people person pictogram ramp services setting special needs support symbol universal wheelchair"},
+        {"name": "accessibility_new", "tags": "access accessibility accessibility icon accessibility statement accessible assistance barrier-free body disability disabled figure handicap help human inclusion inclusive moving needs new outline people person pictogram shape silhouette special needs standing support symbol universal access user"},
+        {"name": "accessible", "tags": "accessibility accessible assistance body disability disabled easy access facilities figure handicap handicapped healthcare help human information international symbol medical mobility mobility impaired parking people person public access ramp services sign support symbol toilet transport wheelchair"},
+        {"name": "accessible_forward", "tags": "accessibility accessible arrow arrow right body continue direction figure forward geometric graphic handicap help human icon mobility movement navigation next people person pictogram progress right shape silhouette symbol ui element user wheelchair"},
+        {"name": "account_balance", "tags": "account accounting balance bank banking bill building business card cash coin columns commerce courthouse credit currency dollars economic federal finance financial financial institution government institution investment loan money mortgage online pay payment pillars prosperity savings structure transaction treasury wealth"},
+        {"name": "account_balance_wallet", "tags": "account assets balance bank banking bill budget card cash coin commerce credit credit card currency dollar dollars economics economy expense finance finances financial funds income investment money online pay payment purse rectangle revenue savings square transaction wallet wealth"},
+        {"name": "account_box", "tags": "account account icon accounts avatar box bust contact contact icon face figure head human identity individual login man member outline people person person outline person symbol profile register shape shoulders sign in sign up silhouette square thumbnail user user icon user profile"},
+        {"name": "account_circle", "tags": "account account circle account details account icon account management account settings avatar bust circle face filled account full account head human login my account people person person icon personal personal information personal mode profile profile icon shoulders sign in thumbnail user user icon user profile user settings"},
+        {"name": "add_card", "tags": "+ account add add card add credit card add debit card add payment banking bill billing border card cash checkout coin commerce cost create credit credit card currency debit card dollars finance financial money new new card online outline pay payment payment method plus plus sign price rectangle shape shopping square symbol transaction wallet"},
+        {"name": "add_home", "tags": "accommodation add append architecture attach building button construction create cross dwelling enter home house include increase insert location navigation new plus property real estate register residence residential shelter structure suburban urban"},
+        {"name": "add_shopping_cart", "tags": "acquisition add add to cart basket buy card cart cash checkout coin commerce credit currency dollars e-commerce e-shop item market money online online shopping online store order pay payment plus product purchase retail retail experience retail therapy shop shopping shopping cart store"},
+        {"name": "add_task", "tags": "+ add addition app appointment approve assignment button check checklist circle completed computer create digital event graphic icon increase interface list mark mobile new ok pictogram plan plus project schedule select symbol task tick to do todo ui ux web work yes"},
+        {"name": "add_to_drive", "tags": "add add document add file add to cloud addition app application backup cloud cloud storage create data document drive drive storage file files folders gdrive google google drive internet network new online plus plus symbol recovery save save to cloud shortcut storage synchronize upload"},
+        {"name": "addchart", "tags": "+ add addchart analysis analytics bar bar chart bars business chart create dashboard data diagram financial graph growth increase infographic information insert line graph measure metric metrics new performance plus presentation report representation statistics symbol tracking trend visual"},
+        {"name": "admin_panel_settings", "tags": "access account adjust admin administrator avatar certified cog configuration control customize dashboard edit face gear human key lock management options panel people permissions person preferences privacy private profile protect protection security settings setup shield system tool tools user verified"},
+        {"name": "ads_click", "tags": "ads ads click advertisement analytics arrow browser button call to action campaign click clicks conversion cursor destination digital engagement finger interaction internet link marketing measurement network online performance pointer promotion reach select tap target touch tracking traffic web"},
+        {"name": "alarm", "tags": "access adjust alarm alert appointment bell calendar circle clock control countdown date deadline future hands history indicator manage mark notification point reminder ring schedule setting sound time timer wake up watch"},
+        {"name": "alarm_add", "tags": "+ add add alarm alarm alert app appointment audio bell clock countdown create date digital event mobile morning new new alarm notification phone plus reminder ring schedule set setting sound symbol task time timer wake up watch"},
+        {"name": "alarm_off", "tags": "alarm alarm off alert bell bell disabled bell muted bell off check checkmark clock diagonal line disable alarm disable notification disable sound disabled duration enabled mute alarm mute notification mute sound muted no alarm no bell no notification no sound notification notification off off on quiet silence alarm silent slash sound off stop alarm time timer turn off alarm watch"},
+        {"name": "alarm_on", "tags": "activated active alarm alert audible awake bell buzzing check checkmark chime clock duration enabled event jingle notification notification bell on reminder ringer ringing ringing bell schedule signal sound sound on time timer wake up warning watch"},
+        {"name": "all_inbox", "tags": "Inbox all all mail archive box bundle collection communication complete comprehensive container correspondence delivered delivery digital mail email entirety envelope full inbox incoming letter mail mail folder mailbox message messaging postal receive received send storage totality"},
+        {"name": "all_out", "tags": "abstract all arrows aspect ratio bounding box box circle corners enlarge expand expanding extend four directions fullscreen geometric grow indicators lines maximize out outwards pointer rectangle scale shape spreading stretching visual zoom"},
+        {"name": "analytics", "tags": "analysis analytics assessment bar bar chart bars business chart dashboard data diagram economic finance graph growth infographic information insights intelligence measure measurement metrics performance progress rectangular bars report results sales statistics survey tracking trends vertical bars visualization"},
+        {"name": "anchor", "tags": "anchor attachment base boat chain connection fishing fixed foundation google harbor heavy hold hook link logo maritime metal mooring nautical navigation ocean port reference reliable sailing sea security ship solid stability"},
+        {"name": "android", "tags": "ai android app development artificial intelligence automation bugdroid character code computing developer device digital electronics futuristic google google play logo mascot mobile mobile operating system open source operating system os platform programming robot smartphone software system tablet technology toy"},
+        {"name": "announcement", "tags": "! alert announcement attention broadcast bubble caution chat comment communicate communication danger delivery failed element error exclamation fail failed feedback icon important mark megaphone message news notification public address send failed sms sound speaker speech symbol text message volume warning"},
+        {"name": "api", "tags": "access api application backend bridge cloud code coding communication computer connection data developer development enterprise frontend integration internet link network programming programming interface service software system tech technology transfer web service"},
+        {"name": "app_blocking", "tags": "Android OS access denied app app blocking application ban barrier block blocking cancel cell circle control cross deny device disallow electronic forbidden gadget halt hardware iOS limits line mobile mobile block no entry off limits pause phone prevention prohibited rectangle restrict security shield smartphone stop stopped tablet"},
+        {"name": "app_shortcut", "tags": "Android OS access app application broadcast cast casting cell connect connection data device direct link display hardware iOS instant access link mirror mirroring mobile monitor network output phone projection quick launch screen screen share screencast share shortcut stream streaming tablet transmit tv wireless"},
+        {"name": "arrow_circle_down", "tags": "arrow button circle collapse contained control cursor direction down download enclosed expand inside mover navigation point pointer round scroll shape within"},
+        {"name": "arrow_circle_left", "tags": "arrow back button circle circle arrow circular circular arrow contained control direction enclosed enclosed arrow go back history inside circle left navigate navigation pointer pointing previous replay return reverse rounded rounded arrow undo within circle"},
+        {"name": "arrow_circle_right", "tags": "app arrow arrow in circle button circle circular arrow continue control direction directional arrow forward geometry go graphic icon illustration interface element link move navigation next pointer proceed right right arrow shape symbol ui user interface ux web"},
+        {"name": "arrow_circle_up", "tags": "action arrow button circle circular arrow control data transfer direction direction up file upload forward go to top icon indicator move forward move up navigate up navigation order positive direction progress up return to top scroll up send share sort symbol top ui element up up arrow upload"},
+        {"name": "arrow_outward", "tags": "access app application arrow arrows components connection diagonal direct direction exit exit button expand external follow link forward go to interface launch launch link leave link movement navigate navigation new tab new window open open link outbound outward pointer redirect right screen share show more site ui ux view more web website"},
+        {"name": "arrow_right_alt", "tags": "access alt arrow arrow symbol arrows button carat caret chevron continue details direction east enter expand follow forward geometry go hyperlink indicator learn more line link move navigation next pointer pointing proceed read more right straight symbol"},
+        {"name": "article", "tags": "archive article basic file content data doc document document outline drive document file file management google drive information list manuscript notes office suite organization page paper plain text productivity record report script sheet simple document text text file writing"},
+        {"name": "aspect_ratio", "tags": "adjustment aspect aspect ratio box dash dashed dimension dimensions display expand fit formatting image image settings layout media media settings options photo presentation proportion ratio rectangle resize scale scaling screen settings shape size square standard video video settings view widescreen"},
+        {"name": "assessment", "tags": "add analysis analytics assessment bar bar chart bars business chart columns create data diagram finance graph growth infographic insert manage measure metrics options performance poll progress report representation results statistics survey tracking visualize"},
+        {"name": "assignment", "tags": "academic agreement assignment brief business checklist clipboard contract doc document education file folder form job list note office official paperwork professional project report school study task text to do university work writing"},
+        {"name": "assignment_ind", "tags": "account apply assignment badge card clipboard data details doc document enroll face file form graphic icon id identification ind individual information membership paper people person profile record register shape sheet symbol ui element user"},
+        {"name": "assignment_late", "tags": "! alert assignment assignment late attention calendar caution clipboard clock danger deadline delay doc document due date education error exclamation homework important incomplete late mark notification overdue paper pending reminder schedule school symbol task test time unfinished urgent warning"},
+        {"name": "assignment_return", "tags": "approval arrow assignment back checklist checkmark clipboard completed completion data deliver doc document document with check done edit educational file file with tick hand in left list office paper re-submit report resend retun return revise school send back submit success task tick work"},
+        {"name": "assignment_returned", "tags": "arrow assignment assignment returned business checking clipboard complete contract doc document down editing education evaluating file form grading marking memo note office page paper pencil report returned reviewing school sheet submission text work writing"},
+        {"name": "assignment_turned_in", "tags": "accepted approve approved assignment box check checklist checkmark clipboard complete completed doc document documentation done file finished in line lines mark ok paper progress project rectangle report select square submission task tick to do list turn turned in validate validated verified work yes"},
+        {"name": "assured_workload", "tags": "account activity approved assignment assurance assured authenticated authorized balance bank bill building card cash certainty check checked coin commerce compliance confidential confirmed credit currency dollars duty federal finance government guarantee guard integrity job money online operation pay payment protected protection reliability safe safeguard safety secure secured security sensitive regulatory shield task tick trust validated verified work workload"},
+        {"name": "autorenew", "tags": "action around arrow arrows autorenew cache cached circle circular continuous curved cycle direction directional inprogress load loading refresh loop media control movement navigation playback control process recycle refresh reload renew repeat rotate rotating rotation spin sync synchronization turn two arrows update workflow"},
+        {"name": "backup", "tags": "archive arrow backup cloud computing copy data database digital document download drive duplicate file files folders folder history internet management network protection recovery restore save security server storage synchronize system technology transfer up upload"},
+        {"name": "backup_table", "tags": "archive backup cloud columns copy data database document drive duplicate file files folders format grid history layout list migration protection restore rows save security spreadsheet stack storage sync synchronize table version"},
+        {"name": "balance", "tags": "balance compare compare and contrast court courthouse decision equal equality equilibrium equity fair horizontal line impartiality judgment justice law legal measure measurement object parity proportion scale scales stability. equilibrium steadiness symbol symmetry two pans two sides vertical line weighing weight"},
+        {"name": "batch_prediction", "tags": "ai algorithms analysis artificial intelligence automated batch bulb bulk collection computations data documents files flow group idea large scale layers light machine learning multiple output prediction predictions process processing queue results set stacked system volume"},
+        {"name": "book", "tags": "academic academy book book icon bookmark class class icon course education education icon favorite knowledge knowledge icon label learning learning icon library literature literature icon novel open book open book icon read reading reading icon reading material remember ribbon save school school icon study tag textbook university university icon"},
+        {"name": "book_online", "tags": "Android OS access admission app appointment barcode book booking cell device digital download entry event hardware iOS mobile movie online order pass payment phone purchase qr code receipt reservation scan scan code show smartphone tablet ticket transport travel validation verification"},
+        {"name": "bookmark", "tags": "app archive article book bookmark browser collection content corner document favorite file fold guide keep label library mark mobile organize page pin read reading remember ribbon save site tag tutorial web page"},
+        {"name": "bookmark_add", "tags": "+ add archive bookmark button collection document favorite file folder icon interface internet mark memo note organize page plus reading list remember ribbon save sign star symbol ui ux website"},
+        {"name": "bookmark_added", "tags": "add added approve bookmark check complete document done favorite file location mark marker marker_add marker_plus navigation ok placeholder placeholder_add placeholder_plus plus reading reading_list remember reminder save saved_item saved_location saved_page select shape tab tagging tagging_add tagging_plus tick triangle validate verified web yes"},
+        {"name": "bookmark_border", "tags": "app archive article book bookmark border browser collection content corner document favorite file fold guide keep label library mark mobile organize page pin read reading remember ribbon save site tag tutorial web page"},
+        {"name": "bookmark_remove", "tags": "action bookmark button clear control delete document erase favorite interface internet label mark minus navigation outline page remember remove ribbon save subtract symbol tag ui unfavorite unmark unsave ux web"},
+        {"name": "bookmarks", "tags": "bookmark bookmarks browser collection document favorite favorites file flag highlighted important label layers library list management marker multiple navigation organize paper read reading remember ribbon save saved shape stack tag triangular web"},
+        {"name": "browse_gallery", "tags": "album artwork assets browse browse gallery catalog clock collection explore files gallery graphics grid illustrations image library images library media multimedia photo album photo library photography pictures stack storage thumbnails view visual assets visual content watch"},
+        {"name": "bug_report", "tags": "alert animal application bug case circle communicate complaint creature debugging document error feedback file fix help insect issue message note notify paper problem report software submit support system testing ticket troubleshooting virus warning"},
+        {"name": "build", "tags": "adjust adjustment build building configuration construction control engineering equipment fix fixing gear general hardware home industrial instrument machinery maintenance mechanical nest options repair service settings spanner tool toolkit tools utility work wrench"},
+        {"name": "build_circle", "tags": "adjust build circle cog configuration construct contained create development engineer fix gear machinery maintenance mechanical options outlined preferences repair round settings setup spanner technical tool wrench"},
+        {"name": "cached", "tags": "access around arrows cache cached circle cloud connection data database directory download files folder information inprogress load loading refresh loop memory network offline processing refresh reload renew retrieve rotate save server storage store sync synchronize system two arrows update"},
+        {"name": "calendar_month", "tags": "agenda appointment button calendar clock date day duration element event icon interface lines month navigation organise period plan record rectangle schedule square symbol time today widget"},
+        {"name": "calendar_today", "tags": "agenda appointment booking calendar calendaricon calendartoday daily date dating day diary event grid lines month monthly organizer plan planning punctual rectangle reminder schedule square time today todaycalendar week year yearly"},
+        {"name": "calendar_view_day", "tags": "activity agenda appointment appointments calendar column date day day view detailed event events format grid layout linear list list view long month organize plan rectangle schedule scheduler shape single time timeline today vertical view week"},
+        {"name": "calendar_view_month", "tags": "agenda appointments arrangement block booking box calendar date day event events format grid horizontal layout lines matrix month organizer outline planning rectangle reminder schedule structure time today vertical view weekly yearly"},
+        {"name": "calendar_view_week", "tags": "appointments arrangement calendar columns date dates day days display event events format grid layout management month organizer overview planner planning rectangle schedule seven days structure time timeline today vertical view week weekly"},
+        {"name": "camera_enhance", "tags": "adjustment ai aperture artificial automatic automation bright button camera capture control custom edit effect enhance filter flash genai glow icon image important intelligence lens magic option photo photography picture quality setting shine shot smart spark sparkle special star symbol tool"},
+        {"name": "cancel_schedule_send", "tags": "abort action button cancel clear command communication delete draft email envelope icon interface letter linear mail message no outline pending quit remove revoke schedule scheduled email scheduled message send share stop symbol timed message unschedule x"},
+        {"name": "card_giftcard", "tags": "account balance bill bonus bonus points bow buy card cart cash celebration certificate coin commerce coupon credit currency discount dollars event gift gift card giftcard giving holiday loyalty loyalty program money online pay payment present prize purchase rectangle redeem reward reward system ribbon shopping special offer transaction voucher"},
+        {"name": "card_membership", "tags": "access account bill bookmark card cash certificate club club card coin commerce cost credit currency document dollars enrollment entry pass finance id identification identity login loyalty loyalty card membership money online pass pay payment permit premium profile rectangle registration shape shopping sign up square subscription user vip"},
+        {"name": "card_travel", "tags": "accessory bag baggage bill briefcase business card carry case cash coin commerce cost credit currency dollars finance handle item journey luggage membership miles money online packing pay payment personal rectangle square suitcase transportation travel trip voyage"},
+        {"name": "change_history", "tags": "audit trail change change history chronology development edits events evolution flow history journal journey log modifications past path process progression record revisions sequence shape time timeline track changes triangle updates version history"},
+        {"name": "check_circle", "tags": "accepted achievement alert approve badge border check circle complete confirm correct done feedback finish geometry icon mark notification ok outline round select shape status submitted success symbol tick valid validate verified yes"},
+        {"name": "check_circle_outline", "tags": "accepted achievement alert approve badge border check circle complete confirm correct done feedback finish finished geometry icon mark notification ok outline round select shape status submitted success symbol tick valid validate verified yes"},
+        {"name": "chrome_reader_mode", "tags": "article book bookmark browser chrome content document layout magazine mode page paper print publication read reader reading rectangle square text three lines web website"},
+        {"name": "circle_notifications", "tags": "active activity alarm alert alert bell alert sound announcements attention bell bulletin chime circle circular contained current encircled incoming indication information message new news notification notifications notify ping prompt reminder reminders ring ringtone signal sound updates"},
+        {"name": "class", "tags": "academic academy archive book book icon bookmark class class icon course education education icon favorite knowledge knowledge icon label learning learning icon library literature literature icon novel open book open book icon read reading reading icon reading material remember ribbon save school school icon study tag textbook university university icon"},
+        {"name": "close_fullscreen", "tags": "action arrow arrows arrows inward box button close collapse contract control corners diagonal arrows direction display exit fullscreen full fullscreen interaction interface media minimize mode presentation rectangle reduce restore screen shrink square system toggle video view window"},
+        {"name": "code", "tags": "angle brackets bracket pairs brackets code coding command computer css develop developer development editor engineer engineering greater than html ide javascript left angle bracket less than markup platform pointy brackets program programming programming language right angle bracket script snippet software source code technology text web development"},
+        {"name": "code_off", "tags": "access denied angle brackets blocked brackets brackets off bug cancel chevron off clear close code code off coding css debug delete develop developer development off diagonal line disabled enabled engineer engineering error exit fix forbidden greater than html issue less than off on platform problem programming disabled remove restricted slash stop warning"},
+        {"name": "comment_bank", "tags": "archive bank bookmark bubble cchat chat collection comment communicate communication conversation dialogue discussion favorite feedback group history label layered library message multiple notes organized record remember repository ribbon save sorted speech speech bubble square stacking storage store tag talk text"},
+        {"name": "commit", "tags": "accomplish bind branch changes circle code commit confirm connection dedicate development diagram execute finalize flow git graph history journey line link log merge network node path perform pledge point progress repository save source control submit update version control"},
+        {"name": "commute", "tags": "automobile car commute destination direction directions driving guidance journey location location pin map maps marker mobility navigation path pin place pointer position public public transport road route spot street train transit transportation travel trip vehicle way"},
+        {"name": "compare_arrows", "tags": "alternative arrow arrows balance bidirectional change choices collide compare cross data transfer direction exchange flow horizontal left left and right move opposing arrows opposite options parallel arrows pressure push reciprocal right swap switch symmetry sync synchronize together toggle transfer two x-axis"},
+        {"name": "compress", "tags": "adjust size arrow arrows collide compact compress compress file corners data diagonal arrows dimensions expand file size fit image maximize minimize multimedia opposite arrows optimize outward arrows pressure push reduce resize scale scale down scale up screen shrink together transform video window zoom"},
+        {"name": "contact_page", "tags": "account address book avatar book business circle contact data details directory doc document drive face file folder folders form human icon identity information list office outline page paper people person personal profile record rectangle shape sheet slide square storage symbol user writing"},
+        {"name": "contact_support", "tags": "? ask assistance bubble bubble icon chat chat bubble chatbot comment communicate communication communication icon contact conversation customer service dialog dialog box faq help help icon info information interaction mark message messaging punctuation query question question icon question mark service speech speech bubble support support icon symbol talk"},
+        {"name": "contactless", "tags": "banking bluetooth card reader cash commerce connect connection connectivity contact contactless credit data device digital electronic finance link mastercard mobile payment near field communication network nfc pay payment paypass radio waves reader retail secure security shopping signal tap technology terminal transaction transfer visa wave wifi wireless"},
+        {"name": "copyright", "tags": "agreement alphabet attribution brand c character circle copyright credit disclaimer emblem font identifier identity intellectual property label legal letter c letters licensing logo mark notice owner ownership property protection registered rights seal signature stamp surrounding circle symbol text"},
+        {"name": "credit_card", "tags": "account account information amex balance bank banking bill buy card cash checkout chip coin commerce cost credit credit card currency discover dollars e-commerce finance financial funding mastercard money online pay payment plastic price purchase rectangle secure shopping spend stripe symbol transaction visa wallet"},
+        {"name": "credit_card_off", "tags": "banking bill blocked broken cancelled card cash coin commerce cost credit credit card currency deactivated decline disabled dollars enabled error failure finance financial forbidden glyph icon invalid line money no access off online outline pay payment payment card price rectangle rejected restricted shape shopping slash stop symbol unavailable"},
+        {"name": "css", "tags": "alphabet brackets browser cascading stylesheets character code coding computer language computing css design develop developer digital engineer engineering font frontend html internet layout letters markup platform programming programming language software development stylesheets styling symbol technology text type web code web design web development web standards website"},
+        {"name": "currency_exchange", "tags": "360 around arrow arrows banking buy cash coin commerce conversion convert currency currency exchange direction dollar dollars economy euro exchange finance financial foreign exchange forex inprogress international money investment left arrow money money transfer pay payment pound renew right arrow rotate sell swap sync trade transaction transfer turn universal yen"},
+        {"name": "dangerous", "tags": "alarming alert attention be careful broken caution critical danger dangerous error exclamation fix flag forbidden halt hazard important issue mark no note notification point pointy problem restricted risk sharp sign stop symbol triangle update urgent warning watch out wrong x"},
+        {"name": "dashboard", "tags": "administration analytics cards chart circle control dashboard data dial display format gauge graph grid indicator layout management measurement meter metrics monitor needle overview panel performance pointer progress rectangle report round shapes speed speedometer square statistics summary tachometer view web website"},
+        {"name": "dashboard_customize", "tags": "adjust arrange blocks boxes cards change configure control customize dashboard edit format grid layout management modify modules options organize panel personalize preferences rectangle reorganize settings setup shapes square squares tailor tiles view web website widget"},
+        {"name": "data_exploration", "tags": "analysis analytics arrow bi business intelligence chart curve dashboard data data exploration data visualization diagram discovery exploration explore graph growth increase infographic information insight investigate knowledge line line graph measure metrics report research statistics study tracking trends visualization"},
+        {"name": "data_thresholding", "tags": "analysis chart configuration controls criteria data data analysis data control data filter data limits data management data points data range data representation data selection data settings data thresholding evaluation filter graph hidden limits measurement metrics parameters privacy range selection settings statistics threshold thresholding thresold visualization"},
+        {"name": "date_range", "tags": "agenda appointment booking calendar calendar grid calendar picker calendar view choose date date date selection day deadline event lines month period planner range rectangle remember reminder reservation schedule select date square time timeline today week year"},
+        {"name": "delete", "tags": "abolish action bin button can cancel clear collection command control data delete discard eliminate empty erase file garbage item line management option outline remove setting storage thin trash ui action"},
+        {"name": "delete_forever", "tags": "action archive bin button can cancel clean clear clear all control delete delete forever destroy discard dispose eliminate erase exit forever garbage get rid of glyph icon interface management obliterate purge remove storage sweep symbol trash wipe out x zero out"},
+        {"name": "delete_outline", "tags": "abolish action bin button can cancel clear collection command control data delete discard eliminate empty erase file garbage item line management option outline remove setting storage thin trash ui action"},
+        {"name": "density_large", "tags": "bars block collapse density density large display expand horizontal items large layout lines list menu more space options parallel rows rule rules settings size spacing thick thick lines thickness three bars three lines view wide lines"},
+        {"name": "density_medium", "tags": "adjust arrangement bars compact content density default density density medium display horizontal layout line spacing lines list medium medium spacing menu options paragraph spacing parallel preference rule rules setting spacing text density three lines typography view"},
+        {"name": "density_small", "tags": "compact condensed dense density horizontal horizontal lines layout less lines list menu minimal more density narrow options reduced rows rule rules small small density spacing three lines tight tight spacing view"},
+        {"name": "description", "tags": "article attributes content data description details doc document drive explore file find folder folders information inspect list lookup magnify magnifying glass metadata note notes open page paper readme search sheet slide text view writing zoom"},
+        {"name": "disabled_by_default", "tags": "access denied alert blocked box by cancel caution clear close cross default denied diagonal disabled error exit failure forbidden inactive indicator invalid issue line no not allowed off problem quit rejected remove restricted shape square state status stop symbol ui control unavailable warning x"},
+        {"name": "disabled_visible", "tags": "accessibility block view cancel close control disabled excluded exit eye eye crossed out eye with line hidden hide inactive invisible look no no view not visible obscured off on privacy private quit remove restricted reveal secret security see show slashed eye stop unavailable view visibility visible"},
+        {"name": "display_settings", "tags": "Android OS adjustments application brightness change chrome cog computer configuration contrast control customization desktop details device display display adjustments display control electronic gear hardware iOS info information mac monitor monitor settings options panel personal preferences resolution screen screen options screen settings service settings setup technology web window"},
+        {"name": "dns", "tags": "abstract address administration bars circles communication configuration connection data dns domain domain name system dots globe hostname information internet ip ip address list lookup name network resolution server settings symbol system technology url website world"},
+        {"name": "done", "tags": "DISABLE_IOS accepted accomplished acknowledgement agree approval approve approved assent check complete completed confirmation confirmed correct disable_ios done executed final finished mark ok positive right select sign off submitted success task tick validate validation verified yes"},
+        {"name": "done_all", "tags": "achievement all all done approval approve approved check checked checkmarks complete completion confirmation confirmed correct done double check finished indicator layers list mark message multiple ok process read select sent stack status success task task complete tick tick marks two checks valid validate validation verified workflow yes"},
+        {"name": "done_outline", "tags": "accepted achievement agreement all approval approve approved check checkbox complete completed confirmed consent correct done finished green light mark ok outline right select selection sign status success task task complete tick validate validation verification verified yes"},
+        {"name": "donut_large", "tags": "activity activity indicator analytics chart circle complete completed data diagram display donut donut large fill filled circle full fullscreen graph infographic inprogress large large circle loading loading indicator measure metrics pie pie chart progress progress indicator ring screen show statistics status status indicator tracking visualization visualize"},
+        {"name": "donut_small", "tags": "analytics chart circle circular dashboard data diagram donut donut chart graph hole incomplete info infographic inprogress measure metrics overview partial percentage pie progress radial report ring round sections segmented small statistics status summary tracking visualization"},
+        {"name": "drag_indicator", "tags": "action app application circles column components control design dots drag drop element gesture grab grip handle icon indicator indicators interaction interface item layout list marker menu mobile monitor move organize phone points position rearrange reorder screen selector shape shift site sort tablet touch ui ux vertical web website window"},
+        {"name": "dynamic_form", "tags": "adaptable application bolt changing choices code configurations content data different document dynamic dynamic form electric entry fast fields file flexible form information input lightning list lists multiple options paper properties questionnaire report selection settings survey text thunderbolt variable"},
+        {"name": "edit_calendar", "tags": "agenda annotate appointment booking calendar change compose create date day deadline draft edit editing element event icon interface manage modify month organizer pen pencil planner reminder reschedule schedule symbol timestamp update write writing year"},
+        {"name": "edit_off", "tags": "blocked can't edit compose create diagonal line disabled disabled edit disallowed draft edit edit blocked edit off editing editing disabled enabled forbidden icon input line lock edit new no edit no pen no pencil not available off offline on pen pen off pencil pencil off restricted restricted edit slash slashes strike through ui icon unavailable write writing"},
+        {"name": "eject", "tags": "action arrow audio bar button command control device disc disk drive dvd eject function hardware line media multimedia pause physical media play player removal remove stop symbol triangle ui control upward upward pointing usb video"},
+        {"name": "euro_symbol", "tags": "banking bill business buy card cash coin commerce cost credit currency dollars economy euro european exchange finance financial international monetary money online pay payment price sell symbol transaction value wealth"},
+        {"name": "event", "tags": "add add event add invitation add to calendar agenda appointment booking calendar daily date day event insert invitation invitation invite mark meeting month monthly new event new invitation organizing planning plus range remember reminder reservation schedule schedule event square time today week weekly"},
+        {"name": "event_repeat", "tags": "agenda always appointment around calendar constant continuous cycle daily date day event event repeat frequency infinite inprogress load loading refresh loop meeting month monthly perpetual planner recurrence recurring redo renew repeat revisit rotate schedule schedule management task time turn weekly yearly"},
+        {"name": "event_seat", "tags": "allocation arrangement assign assigned available booking chair choice cinema concert empty event furniture location occupied place plan position reservation row seat seating section selection sit sports spot stadium taken theater ticket venue"},
+        {"name": "exit_to_app", "tags": "abandon access account app application arrow block box close components depart design door exit export forward gate interface layout leave line log off logout mobile monitor move navigate navigation out output outside phone portal quit rectangle right arrow screen session sign out site square tablet to ui user ux web website window"},
+        {"name": "expand", "tags": "arrow arrows aspect ratio bigger compress content corner diagonal enlarge expand four arrows four directions frame full screen fullscreen grow increase maximize move multimedia open outward outward arrows push scale screen stretch together view view area window zoom"},
+        {"name": "explore", "tags": "adventure compass destination direction discover discovery earth east explore find globe guide journey location location marker map maps marker navigation needle north orientation path pinpoint place point of interest route search south tourism travel travel guide wander west world"},
+        {"name": "explore_off", "tags": "adventure off compass compass blocked compass off destination direction directions off disable exploration disabled discover blocked discover off east enabled explore explore blocked explore off find blocked find off geo off globe off gps off guidance blocked guidance disabled journey off location location disabled map off maps navigation blocked navigation disabled needle north off on orientation off pinpoint off route blocked route off satellite off search off slash south tag off travel travel off west world off"},
+        {"name": "extension", "tags": "app area basic block border boundary box container contour digital edge element empty extended extension frame game geometric jigsaw minimalist outline plugin add puzzle quadrilateral region section shape side simple space square ui unfilled web window zone"},
+        {"name": "extension_off", "tags": "add-on app blocked broken cross crossed out deactivate delete diagonal diagonal line disable disabled disconnected enabled error extended extension extension off jigsaw line off on piece plug-in program puzzle remove shape slash software turn off turn off extension unavailable unavailable add-on unavailable extension unavailable plug-in uninstall"},
+        {"name": "face", "tags": "access account authentication authorized biometric biometric scan emoji eyes face faceid head human identification identity lock log login logout passcode people person personal portrait private profile protected recognition safe scan secure security social thumbnail unlock user verify"},
+        {"name": "fact_check", "tags": "accepted accurate agreement approval approval status approve authenticity authorized box certified check check mark complete completed confirmation correct done fact fact check legal list mark official ok right select square status task tick true valid validate validation verified verify yes"},
+        {"name": "favorite", "tags": "affection appreciate appreciation bookmark border button collection data empty engagement favorite feedback full heart icon interest item like love media object outline rating remember save shape social solid status symbol toggle wish list"},
+        {"name": "favorite_border", "tags": "affection appreciation bookmark border button collection data empty engagement favorite feedback full heart icon interest item like love media object outline rating remember save shape social solid status symbol toggle wish list"},
+        {"name": "fax", "tags": "apparatus appliance business communication data device document electronic equipment fax file hardware line machine message obsolete office office supply paper phone print receive retro scan send technology telecommunications telephone line transfer transmission vintage"},
+        {"name": "feedback", "tags": "! alert announcement attention broadcast caution chat chat bubble comment communicate communication conversation danger delivery failed element error exclamation fail failed feedback icon important mark megaphone message news notification public address send failed service sms sound speaker speech symbol text message volume warning"},
+        {"name": "file_present", "tags": "analysis business chart clip corporate data doc document drive file folder folders graph graphic infographic information keynote lines note office pages paper present presentation rectangle reminder report sheet slide spreadsheet square statistics storage visual aid writing"},
+        {"name": "filter_alt", "tags": "adjust arrange choose control customize data edit filter find funnel icon information inverted triangle line list narrow options organize preferences refine refinement search select settings sift sort sorting three lines tool triangle"},
+        {"name": "filter_alt_off", "tags": "alt clear criteria clear filter clear selection data filter data options disable filter disabled edit filter filter alt off filter disabled filter off filter removed filter state filtering off filtering state off funnel funnel disabled funnel off list filter list options menu filter no filter off offline options options filter refine remove criteria remove filter remove selection reset filter reset selection selection filter sift slash sort off sorting disabled turn off filter undo filter"},
+        {"name": "find_in_page", "tags": "content search data doc document document icon document search drive file file icon file search find find icon find in page folder folders glass in information retrieval locate locate text look look up loupe magnifier magnify magnifying magnifying glass magnifying glass on document open document page page search paper paper search rectangle scan search search icon search tool see sheet sheet of paper slide text icon text search view document writing"},
+        {"name": "find_replace", "tags": "action application around arrows button command content control data discover document edit file find glass inprogress interface element load loading refresh locate look loupe magnifier magnify magnifying magnifying glass modify program query renew replace rotate search see software string text tool utility zoom"},
+        {"name": "fingerprint", "tags": "access authentication authorized biometric circles confirm curves data digit digital finger fingerprint human id identification identity lines log in oval personal print privacy reader scan security sign in swirls technology thumbprint touch id unique unlock verification verify"},
+        {"name": "fit_screen", "tags": "adjust arrows aspect ratio boundary box corners diagonal arrows display enlarge expand fit fit to screen format frame full screen fullscreen grow layout maximize media monitor rectangle reduce scale screen size stretch video player view window zoom"},
+        {"name": "flaky", "tags": "actions app menu approve check close close menu collapse collapsed menu complete contrast done drawer exit expand expanded menu flaky hamburger hide menu horizontal lines lines list mark menu mobile menu more more options navigation no ok open menu options primary menu select show menu side navigation sidebar stacked lines stop three lines tick toggle verified website navigation x yes"},
+        {"name": "flight_land", "tags": "air aircraft airplane airplanes airport arrival arrivals arriving aviation departing departure descent downward flight flight arrival flight landing flights fly flying land land flight land plane landing plane planes signal transportation travel travel arrival travel landing trip"},
+        {"name": "flight_takeoff", "tags": "air air transport air travel aircraft airplane airplanes airport arrival arriving arrow ascending aviation departing departure diagonal flight flights fly flying journey landing mobility moving moving forward plane planes signal takeoff takeoff runway transport transportation travel trip up voyage wing"},
+        {"name": "flip_to_back", "tags": "arrange arrangement back bring forward bring to front dash dashed depth element flip format front group layering layers layout move move back move backward move forward move front objects order organize overlap overlay position reorder send backward send to back sort stack to z-index"},
+        {"name": "flip_to_front", "tags": "arrange arrangement ascend back bring forward bring to top card dash dashed depth elevate flip flip over flip to front format front layer layout move move forward order overlap overlay perspective positioning rearrange reorder reorganize send to front sort stack to two cards z-index"},
+        {"name": "flutter_dash", "tags": "abstract animal app app development application bird brand cartoon character coding cross-platform dash development fast flutter framework futuristic google logo mascot mobile open source program programming software speed stylized technology winged"},
+        {"name": "free_cancellation", "tags": "abort approve back out block calendar cancel cancellation check clear close complete cross date day delete denied discard done error event exit forbidden free invalid mark month negative no ok override prohibition refusal reject remove restriction revoke schedule select stop tick unavailable undo validate verified void wrong x x mark yes"},
+        {"name": "g_translate", "tags": "a icon alphabet babel communication convert language dictionary different languages emblem foreign language g g icon global glossary google international language language barrier language change letter linguistic logo mark meaning multiple languages speaking speech switch language talking text translate translation translator two languages understanding words world"},
+        {"name": "gavel", "tags": "agreement attorney auction authority command contract court courtroom decision document formal gavel government hammer judge judgment judgment call judiciary justice law lawyer legal legal proceedings legislation mallet official order police rule rules terms trial verdict wood wood object"},
+        {"name": "generating_tokens", "tags": "access ai algorithm api artificial artificial intelligence automatic automation brain build building code coding cog cogs coin computation computing create creating custom data genai generate generating idea ideas intelligence machine learning magic mind ml process processing program programming smart spark sparkle star thinking thinking cap thought tokens"},
+        {"name": "get_app", "tags": "acquire action app application archive arrow arrows bar button cloud computer control data document down download downloads export file get incoming install internet line move network obtain play pointed receive save storage symbol transfer underscore upload"},
+        {"name": "gif", "tags": "abbreviation alphabet animated animation bitmap box character clip extension file type font format gif graphic graphics image interchange label letters loop motion moving multimedia picture rectangle symbol text three letters type video"},
+        {"name": "gif_box", "tags": "add alphabet animated animation bitmap box character chat communication digital file expression f file type font format funny g gif graphics i image insert interchange letter letters media message moving image multimedia picture reaction social media square symbol text type upload video"},
+        {"name": "grade", "tags": "add to favorite bookmark border empty empty star favorite five pointed star five points grade hollow hollow star important mark news not filled outline point rating rating symbol shape star symbol ui action ui element unselected"},
+        {"name": "grading", "tags": "approved assess check checklist complete document done evaluation fail form grade grading list mark marking paper pass quality control rating report review score survey tally task list test tick to do list validation verification"},
+        {"name": "group_work", "tags": "alliance assembly association avatars business circular collaboration collective community congregation crowd employees figures gathering group huddle members network organization oval partnership people profiles round silhouettes social staff team teamwork together users work"},
+        {"name": "help", "tags": "? about answer assistance button circle circular documentation element faq guide guide me help icon info information instructions knowledge line link manual outline punctuation query question question mark recent restore shape stroke support symbol tutorial ui user manual what is"},
+        {"name": "help_center", "tags": "? advice aid ask assistance center circle customer service documentation dot faq guide help help center info information information symbol knowledge base learn manual punctuation query query symbol question question mark recent resource restore service shape suggestion support symbol tutorial"},
+        {"name": "help_outline", "tags": "? about answer assistance button circle circular documentation element faq guide guide me help icon info information instructions knowledge line link manual outline punctuation query question question mark recent restore shape stroke support symbol tutorial ui user manual what is"},
+        {"name": "hide_source", "tags": "access circle concealment confidential control disabled enabled eye eyeball hide hiding invisible lock monitoring observation off offline on privacy private private mode protected protection reveal secret secure security shape show slash source surveillance unhide unlock unreveal unviewable view visible"},
+        {"name": "highlight_alt", "tags": "alt angle area selection arrow bounding box box choose click corner cursor designate draw editing focus graphic design graphics highlight indicate ink selection lines marker pick pointer range selection select selection shape square target text highlight text select tools word select zone selection"},
+        {"name": "highlight_off", "tags": "action alert button cancel circle clear close control cross decline delete dismiss error exit feedback highlight highlight off incorrect invalid media control navigation no off quit reject remove shape stop symbol ui element unavailable x x mark"},
+        {"name": "history", "tags": "arrow back backwards circle circular arrow clean clear clock computer data date device digital erase factory reset history history. home initialization loop machine nest previous redo refresh reload renew reset restart restore reverse revert rotate schedule start over system time turn undo update wipe"},
+        {"name": "history_toggle_off", "tags": "activity clock control dash dashed date deactivate disable disable history disabled. element events history history toggle off logs off off state option past previous recent record schedule setting state stop switch time timeline toggle toggle off turn off turn off history ui control"},
+        {"name": "hls", "tags": "alphabet broadcast broadcasting character communication connectivity content data develop developer digital engineer engineering entertainment font hls http live streaming internet letters live media multimedia network online platform play player protocol signal stream streaming symbol technology technology standard text transfer type video video streaming web"},
+        {"name": "hls_off", "tags": "alphabet character connection cross develop developer diagonal disable disabled enabled engineer engineering font hls hls off inactive letters line media media controls media player multimedia network off offline on platform playback slash slashes stream streaming strike symbol technology text type unavailable video video controls video player"},
+        {"name": "home", "tags": "abode address app application--house architecture beginning building button components dashboard design domicile dwelling estate filled geometry home homepage house interface layout link lodging main menu navigation outline place property real real estate residence residential screen shape shelter site solid start startup stroke structure tab ui unit ux web website window"},
+        {"name": "horizontal_split", "tags": "arrangement bars content organization display display options divide double panel dual view format horizontal horizontal division horizontal split interface layout layout layout management lines multi-panel multiple panels organization panel partition screen division screen split section separation split stacked two panels user interface element view view options window"},
+        {"name": "hotel_class", "tags": "accommodation achievement bed booking bookmark building class comfort destination favorite guesthouse highlight hospitality hostel hotel important inn journey lodging luxury marked motel quality rank ranking rate rating reservation review reward room save saved service shape special star star rating stars stay tourism travel trip vacation"},
+        {"name": "hourglass_disabled", "tags": "angled line circle clock complete countdown cross out delay diagonal line disabled duration elapsed time empty enabled end expired finished hourglass inactive limit loading measure measure time minute minutes off on pause sand slash stop time timer unavailable wait waiting"},
+        {"name": "hourglass_empty", "tags": "abstract clock countdown delay duration empty full future history hourglass indicator interval lapse loading measure minutes outline passage past pending period processing progress sand shape status time timer ui element wait waiting"},
+        {"name": "hourglass_full", "tags": "antique classic countdown delay duration elapsed empty flow full hourglass icon indicator loading measurement minutes pending period progress retro sand symbol temporal time timer ui icon vintage wait waiting"},
+        {"name": "html", "tags": "alphabet angle brackets brackets character code coding computer computing css develop developer development development tools digital document engineer engineering file font greater than sign html internet internet code it language less than sign letters markup markup language platform programming programming language script software source code symbol tags technology text type web web design web development"},
+        {"name": "http", "tags": "access address address bar alphabet browser character client communication computer computing connect connection data digital domain font global http http protocol internet letters link navigation network online secure server symbol technology text transfer type url web website world"},
+        {"name": "https", "tags": "access access control authentication closed confidentiality encryption https key keyhole lock locked minimal outline outline icon padlock password permission privacy private private access protected protection restricted restricted access safety secure secured security simple ui icon"},
+        {"name": "important_devices", "tags": "Android OS access communication computer connected connection critical data desktop devices digital electronics equipment essential gadgets hardware iOS important information key mobile monitor network phone screen security sharing star synchronization tablet tech technology web"},
+        {"name": "info", "tags": "about alert announcement assistance circle circle with dot data detail details dot facts guide help i i in circle icon info information inquiry knowledge learn letter i metadata more info more information notice notification question question mark service status support symbol"},
+        {"name": "input", "tags": "accept apply approve arrow box button check circle complete confirmed correct done download finished input login mark marker move ok ready right round shape success tick valid verified"},
+        {"name": "install_desktop", "tags": "Android OS add app application chrome computer computing configuration deployment desktop device display download electronic fix hard drive hardware iOS install mac monitor pc place plus plus sign program progressive web app pwa rectangle save screen setup software storage system technology web web app window workstation"},
+        {"name": "install_mobile", "tags": "Android OS app app install app promo arrow arrows cell device direction down down arrow download download app hardware iOS install install app install mobile marketing mobile mobile download phone phone download promotion security security update software software update system system update system upgrade tablet update upgrade"},
+        {"name": "integration_instructions", "tags": "automation brackets build clipboard code coding combine connect connection consolidate css data develop developer development diagram direction doc document engineer engineering clipboard flow guide help html information instructions integration join link merge network platform process programming relation steps structure system unified workflow"},
+        {"name": "invert_colors", "tags": "accessibility accessibility settings adjust adjust colors appearance button change color inversion colors contrast dark mode display drop droplet edit editing hue icon invert invert colors inverted light mode mode modify options palette preferences screen settings switch theme toggle tone ui user interface view visual visual settings water"},
+        {"name": "javascript", "tags": "alphabet back end brackets character code coding computer css develop developer development engineer engineering font front end html internet javascript js language letters online platform programming programming language script scripting language software symbol tech technology technology symbol text type web development"},
+        {"name": "join_full", "tags": "attend broadcast call circle collaboration combine command conference connect connection full group invite invite full join join meeting left link live meeting meeting full online outer overlap participants people right room session sql start start meeting users video video call video conference"},
+        {"name": "join_inner", "tags": "circle combine combine data combine icon command connect connect data connection icon data data linking data merge data table database inner inner join intersection join join icon join inner link link data link icon matching merge merge icon overlap relationship sql table join two circles union union icon values venn diagram"},
+        {"name": "join_left", "tags": "access arrow branch circle combine command connect connection convergence curve direction directionality entry flow geometry input integration join join left junction left line link matching merge node overlap path point route segment shape sql values way"},
+        {"name": "join_right", "tags": "align right alignment arrow association chain link circle combining command connect right connecting connection data alignment database join direction direction right flow forward arrow integration join join right joining link link right matching merge right merging overlap pairing process flow relationship right right arrow sql table join two links values"},
+        {"name": "label", "tags": "angled shape badge bookmark category classification corner designation detail details emblem favorite geometric highlight identification indent indicator information label library mail marker name organize outline pointed shape polygon price tag remember save shape stamp sticker tag title"},
+        {"name": "label_important", "tags": "angled bookmark categorization categorize chevron corner data favorite filled filter flag geometry highlight identifier important indent indication information. label library mail mark marker note organization organize outline point record remember right save shape sharp sort stamp sticker tag wing"},
+        {"name": "label_off", "tags": "angles badge off deactivate label disable disable label disabled enabled favorite flag off geometric hide label identifier off indent indicator off label label off library mail marker off minimal modern name tag off off on outline point price tag off remember remove label save sharp slash stamp sticker sticker off tag tag off toggle off unlabel untag wing"},
+        {"name": "language", "tags": "announcement bubble caption chat communicate communication dialogue discussion globe headline internet language language switcher menu multiple languages news options planet preferences settings speak speech talk talking text text balloon thought bubble translate translation typography website words world www"},
+        {"name": "launch", "tags": "app application arrow box browser components container diagonal arrow external external link go to interface launch link navigate navigation new new tab new window open open in browser open in new open url outbound outbound link redirect screen site square ui up-right arrow ux visit web website window"},
+        {"name": "leaderboard", "tags": "achievement achievements analytics bar bar chart bars best chart columns competition competitive data diagram graph high score highscores infographic leaderboard levels list measure medal metrics podium points progress rank ranking score scores statistics stats tiers top tracking winner winners"},
+        {"name": "lightbulb", "tags": "alert announcement bright bulb concept creativity disabled education empty glow hint idea inactive incandescent info information innovation inspiration invention knowledge learning led light lightbulb not lit outline smart solution suggestion thinking thought tip turned off unlit"},
+        {"name": "lightbulb_circle", "tags": "alert announcement bright bulb button circle circular contained control creativity discovery graphic hint icon idea incandescent info information inspiration knowledge learning led light lightbulb outline shape smart solution suggestion symbol thinking thought tip ui ui element. understanding"},
+        {"name": "line_style", "tags": "adjust alignment bullet points content customize dash document document editing dotted editor formatting horizontal lines indent layout line list menu modify numbering options paragraph paragraph style rule settings spacing structure style text text style three lines typing word processing writing"},
+        {"name": "line_weight", "tags": "adjust bars content different sizes document editing editor file formatting height horizontal lines line line weight lines measure modify paragraph lines paragraph rules rules size spacing stacked lines stroke style text lines thickness three lines typography varying thickness weight width writing"},
+        {"name": "list", "tags": "agenda bullet points bulleted list catalog checklist content list directory enumeration expandable menu file format hamburger index itemize items list menu navigation menu options order organized list sequence stacked lines steps table of contents task list three lines to-do list vertical lines"},
+        {"name": "lock", "tags": "access access control authentication closed confidentiality encryption key keyhole lock locked minimal outline outline icon padlock password permission privacy private private access protected protection restricted restricted access safety secure secured security simple ui icon"},
+        {"name": "lock_clock", "tags": "access access control access time clock control controlled access date delay hours limited access lock locked minutes padlock password privacy private protection restriction safety schedule scheduled secure secure time security security lock temporal lock time time limit time locked time-based timed access timing unlock time watch"},
+        {"name": "lock_open", "tags": "access action open authorized button open control open freedom grant access keyhole lock lock open open open door padlock open password permission privacy privacy open private protection protection open release safety safety open secure security security open state open symbol open toggle lock unblocked unlock unlocked unrestricted unsecure vulnerability"},
+        {"name": "lock_person", "tags": "access access control account authentication authorization confidential entry. figure human identity key lock login padlock permission person privacy private profile protected protection restricted safeguard safety secrecy secure security shield silhouette user"},
+        {"name": "lock_reset", "tags": "access around arrow authentication authorization circle clockwise closed entry inprogress key keyhole load loading refresh lock locked login loop padlock password privacy private protected protection redo refresh reload renew reset restart rotate rotation safety secret secure security turn unlocked"},
+        {"name": "login", "tags": "access account app application arrow authentication authorization avatar circle components design enter entrance entry head human id identity in interface left log login member outline person personal privacy profile registration screen secure sign sign in sign on silhouette site ui user ux web website"},
+        {"name": "logout", "tags": "access account app application arrow arrow pointing right arrow right authentication away components design door door icon exit exit symbol interface leave line log log out login logout off open door profile rectangle right screen security session sign out signing off site square system ui user ux web website"},
+        {"name": "loyalty", "tags": "achievement award benefit benefits best bonus card client credit customer exclusive five point star gift good gratitude heart loyalty membership miles perk points points system premium present prize program quality recognition reward sparkle special star subscription tag travel trip value vip"},
+        {"name": "manage_accounts", "tags": "access accounts administration avatar bust change circle control customization data details editing face figure gear group human identity individual information manage members options people permissions person preferences profile security service settings team user users"},
+        {"name": "manage_history", "tags": "administration application arrangement arrow back backwards change chronology circular clock cog control date details events future gear history list log management options order organization past pointer present record refresh renew reverse review rewind rotate schedule sequence settings time timeline tracking turn"},
+        {"name": "mark_as_unread", "tags": "alert as attention badge bookmark chat circle circular communication dot email emblem envelop highlight important indicator letters mail mark message new notification pending point post postal read receive round send signal sphere status symbol unread urgent"},
+        {"name": "markunread_mailbox", "tags": "alert box communication deliver delivery envelop envelope flag inbox incoming mail indicator letter letters mail mailbox mark marker markunread message new new message notification pending post post office postal postbox receive received rectangle send signal status. symbol unopened unread"},
+        {"name": "maximize", "tags": "action app application arrows box components computer control corners design display element enlarge expand extend full screen fullscreen increase interface line maximize open outward program rectangle resize scale screen shape site size square system ui ux video view web website window zoom"},
+        {"name": "mediation", "tags": "agreement alliance arrow arrows binding binding agreement chain circle collaboration communication compromise connected connection cooperation direction dots group joining link links mediation negotiation network nodes partnership relationship resolution right rings segments team three points together understanding unity"},
+        {"name": "minimize", "tags": "action app application bar basic bottom button close collapse compact components contract control design down element essential exit hide horizontal interaction interface less line minimize reduce remove screen shape shrink simple site smaller standard system ui ux web website window"},
+        {"name": "model_training", "tags": "ai algorithm analysis arrow artificial intelligence brain bulb computation connection data modeling data science deep learning development digital futuristic idea innovation inprogress intelligence learning light link load loading machine learning mind ml model network neural network node processing progress refresh renew restore reverse rotate science smart system technology training"},
+        {"name": "network_ping", "tags": "alert antenna available bars cellular communication connection data data signal diagnostic four bars indicator internet ip latency mobile network network connectivity network status performance ping quality radio waves reception service signal speed status strength technology test three bars waves wifi wireless"},
+        {"name": "new_label", "tags": "+ add archive badge banner bookmark category classification create description details discount element emphasis favorite highlight identification information item label library marker new offer plus price tag product promotion read reading remember ribbon sale save sign sticker symbol tag topic"},
+        {"name": "next_plan", "tags": "agenda arrow blueprint business calendar circle direction document draft file forward future management move next notes office organization page plan planning progress project right right arrow schedule sheet task text work"},
+        {"name": "nightlight_round", "tags": "astronomy bedtime brightness celestial circle crescent dark display filled graphic half icon light mode moon night nightlight round setting shape sky sleep star stars symbol theme toggle view"},
+        {"name": "no_accounts", "tags": "access access denied account accounts authentication avatar banned blocked cancelled circle denied disabled empty enabled excluded face forbidden human identity invalid line login missing no no accounts none off offline on people person profile profile picture removed restricted slash thumbnail unauthorized unavailable unidentifiable unknown user zero"},
+        {"name": "noise_aware", "tags": "access accessibility acoustic alert ambient arc audio aware cancellation circle detection environment frequency hearing indicator level listening measure meter monitoring music noise note notification perception sensing sensor settings signal sonic sound vibration volume wave"},
+        {"name": "noise_control_off", "tags": "ambient sound off audio audio off aware blocked cancel cancellation circle circle and slash circle with slash control crossed out disabled enabled lines music mute noise noise cancellation off noise control off noise off not active not enabled note off offline on quiet mode silent mode slash slashed sound sound off three waves waves"},
+        {"name": "not_accessible", "tags": "access denied accessibility accessible alert blocked body circle closed denied diagonal line error figure forbidden handicap help human inaccessible limitation locked no entry not not accessible off limits outline person privacy private prohibition restricted restriction security silhouette slash strike unavailable user warning wheelchair"},
+        {"name": "not_started", "tags": "0 beginning circle circular empty geometric incomplete initial media not not started null outline pause pending play process progress ring round shape start started status video zero"},
+        {"name": "note_add", "tags": "+ add add document add note create create document data doc document document add drive entry file folder folders form form add insert list memo message new new file new note note notepad page paper plus plus document plus note sheet slide symbol text to do writing"},
+        {"name": "offline_bolt", "tags": "adapter alert batteries bolt charger circle device disconnected electric electricity energy error fast flash icon indicator instant internet down lightning line mark nest network error no internet no signal not connected offline out of service power shape status symbol thunderbolt triangular unavailable warning zig-zag"},
+        {"name": "offline_pin", "tags": "approve available offline cache check checkmark circle complete destination done download dropped pin favorite local location map map pin mark marked marker navigation offline offline access offline map offline mode ok pin pinned placed point position save saved location saved pin select stored tick validate verified yes"},
+        {"name": "on_device_training", "tags": "ai analytics arrow artificial intelligence bar brain bulb call cell chart computation computer contact data development device education graph growth hardware idea improvement information inprogress intelligence learning light load loading machine mind mobile model monitor neural network phone process progress refresh renew restore reverse rotate screen system technology telephone training"},
+        {"name": "online_prediction", "tags": "ai analysis analytics artificial intelligence bulb business chart computer connection curve data diagram forecast future graph growth idea increase information light line machine learning monitor network online online prediction prediction report screen signal statistics technology trend up wireless"},
+        {"name": "opacity", "tags": "adjustment appearance blend box color control dark design drop droplet editor effect fade fill gradient graphic horizontal hue invert inverted layers light lines object opacity overlay palette property rectangle setting shape solid square tone tool transparency visibility visual water"},
+        {"name": "open_in_browser", "tags": "access arrow box browser browser window diagonal arrow direct link expand external external link external window frame full screen hyperlink hypertext in internet launch navigate new tab new window online content open open in browser open url pointer rectangle site square up url view online web website window"},
+        {"name": "open_in_full", "tags": "action arrow arrows box corners dimensions display document enlarge expand frame full full screen fullscreen grow image in maximize media move open out photo player presentation resize screen size square video view visual window zoom"},
+        {"name": "open_in_new", "tags": "app application arrow box browser components container diagonal arrow external external link go to in interface launch link navigate navigation new new tab new window open open in browser open in new open url outbound outbound link redirect right screen site square ui up up-right arrow ux visit web website window"},
+        {"name": "open_in_new_off", "tags": "arrow blocked blocked link box broken arrow browser diagonal arrow direction disabled enabled export external external link in inactive link navigation new new tab off on open outward outward arrow redirect restricted restricted link slash square unavailable unavailable link url website window"},
+        {"name": "open_with", "tags": "application arrow arrows arrows pointing out box corners dimensions direction display document enlarge enter expand file four arrows frame full screen fullscreen maximize media mode move open outward arrows pan resize scale size square stretch view visual window with zoom"},
+        {"name": "outbound", "tags": "arrow away basic box circle diagonal arrow directional element exit export external jump leaving line link move navigation new window open outbound outline outside redirect right right arrow share simple square stroke symbol up up arrow"},
+        {"name": "outbox", "tags": "arrow box compartment container deliver delivery drafts email export holding mail message move open outbox outgoing pending processing queue rectangle send sending sent square storing transfer unsent upload upward"},
+        {"name": "outlet", "tags": "adapter charge charging point connect connecter connection current disconnect electrical electrical outlet electricity electricity symbol energy energy supply outlet plug plug in port power power connection power cord power source power up recharge socket voltage wall socket"},
+        {"name": "output", "tags": "action area arrows box control corners diagonal display element enlarge expand expand control full screen function geometry grow interface lines maximize maximize button rectangle resize screen control shape stretch ui ux view"},
+        {"name": "pageview", "tags": "add book browse circle content create data details doc document enlarge entry explore file find form glass information locate magnify magnifying new note page paper plus reading rectangle scan search text view zoom"},
+        {"name": "paid", "tags": "amount balance banknote bill business buy card cash circle coin commerce cost credit currency debt dollar dollars e-commerce economic expense finance income monetization money on online paid pay payment price purchase savings shopping symbol transaction value wealth"},
+        {"name": "pan_tool", "tags": "application control cursor drag editor fingers gesture glove grab graphic hand hands hold human icon interface element manipulation map move navigation pan pointer position scan select software stop symbol tool view"},
+        {"name": "pan_tool_alt", "tags": "action control cursor digital hand drag fingers gesture grab grab hand graphic grasp hand hands hold human icon interaction interactive interface interface hand manipulation map move move hand movement navigation pan point pointer scan stop symbol tool tool icon ui element"},
+        {"name": "payment", "tags": "account account information amex balance bank banking bill buy card cash checkout chip coin commerce cost credit credit card currency discover dollars e-commerce finance financial funding mastercard money online pay payment plastic price purchase rectangle secure shopping spend stripe symbol transaction visa wallet"},
+        {"name": "pending", "tags": "accordion arrow down bottom choose circle close collapse details direction dots down arrow dropdown dropdown menu expand hide indicator list loading menu more navigation open pending point pointer progress reveal scroll down section select south triangle view more wait waiting"},
+        {"name": "pending_actions", "tags": "actions agenda alert backlog calendar clipboard clock date delay doc document future history incomplete list log notification paper pending pending actions processing progress queue remember reminder schedule tasks time to do upcoming waiting workflow"},
+        {"name": "percent", "tags": "analysis arithmetic calculation chart circle completion data diagonal line discount dot geometry graph interest math metric number numbers numerical percent percentage progress proportion rate ratio representation savings sign slash statistics symbol value"},
+        {"name": "perm_camera_mic", "tags": "access audio button camera capture communication controls device glyph icon image input linear media mic microphone min outline perm permission photo photography picture privacy recording security settings sound speaker square stream streaming symbol video videography"},
+        {"name": "perm_contact_calendar", "tags": "account address book appointment button calendar contact date day details directory element event face graphic human icon information interface meeting month organizer people perm permanent persistent person pictogram profile saved schedule symbol time ui element user year"},
+        {"name": "perm_data_setting", "tags": "access adjustments administration cloud cog configuration connection control data data setting database disk drive files gear info information management network options organized perm permanent persistent preferences server settings setup storage stored system"},
+        {"name": "perm_device_information", "tags": "Android OS about alert announcement build cell cellular configuration connection connectivity data details device hardware history i iOS imei info information mobile network number options perm permanent phone settings smartphone software specifications specs status tablet version"},
+        {"name": "perm_identity", "tags": "account avatar avatar filled avatar outline body circle contact face figure filled head human identity individual login member my account my profile outline people perm perm identity person profile register shoulders silhouette thumbnail user user account user identity user profile"},
+        {"name": "perm_media", "tags": "archive arrangement collection content copy data digital library doc document documents duplicate file files folder folders grouping image landscape layers layers of files library media media library mountain mountains multimedia multiple order organization organized files paper documents papers perm perm media photo photography picture records sheets sheets of paper stack stacked documents storage"},
+        {"name": "perm_phone_msg", "tags": "always avatar bubble business call cell chat chat support comment communicate communication connected contact conversation device feedback glyph icon message mobile msg outline perm permanent person personal phone portrait profile recording smartphone speech speech bubble support symbol telephone user voice"},
+        {"name": "perm_scan_wifi", "tags": "access alert always on announcement antenna broadcast communication configuration connect connection connectivity detect device find info information internet mobile network options perm permanent persistent radiating lines router scan search service setting signal symbol technology three lines waves wifi wireless"},
+        {"name": "pets", "tags": "adoption animal animal foot animal icon animal print animal shelter animal symbol animal tracks animals cat dog footprint hand mark paw paw mark paw print pet pet care pet friendly pet icon pet symbol pets print rescue shape tracking trail vet veterinary walk"},
+        {"name": "php", "tags": "abstract alphabet backend badge brackets character code coding css dev develop developer development emblem engineer engineering font html hypertext preprocessor hypertext. internet language letters logo online php platform programming programming language script scripting server server-side symbol technology text type web development web language web programming"},
+        {"name": "picture_in_picture", "tags": "chat crop cropped display display within display displays dual view embedded video entertainment floating window layout media media controls miniature miniaturize minimize multiple screens multitasking overlap overlay photo picture picture in picture pip pop out position reduce size scale down screen secondary display shape sizes small screen split screen talktrack video video box video player video viewing video window view window"},
+        {"name": "picture_in_picture_alt", "tags": "alternate box chat crop cropped display displays floating window image layout media media controls media player multi window multitasking overlap overlay photo picture picture in picture pip playback player position rectangle screen shape sizes square streaming talktrack video video player view viewing mode watching window"},
+        {"name": "pin_end", "tags": "action arrow destination direction dot end end point find geographic location geotag gps locate location marker location pin map marker map pin mark marker navigation pin pin end pin location pin mark pinpoint place point of interest pointer position target track"},
+        {"name": "pin_invoke", "tags": "action add location arrow destination direction dot drop geotag gps guide indicator invoke location map mark marker navigation new location object pin pinpoint place point pointer position pushpin select location set location sharp tack tool travel"},
+        {"name": "pinch", "tags": "adjust arrow arrows compress control direction document enlarge expand finger fingers gesture grasp grow hand image interaction magnifier magnify map maximize minimize mobile navigation nip photo pinch reduce resize scale screen shrink size squeeze tablet touch tweak two fingers zoom"},
+        {"name": "plagiarism", "tags": "academic alert caution check content copy detection dishonest doc document duplicate emblem essay ethical find forbidden glass glyph illegal infringement look magnifying page paper plagiarism repeated report scan search see symbol text unethical unoriginal violation warning writing"},
+        {"name": "play_for_work", "tags": "arrow audio bag briefcase business career circle corporate document down file film google half job management media media work movie office play play file play video playback player portfolio professional progress project start start work stream task video work"},
+        {"name": "polymer", "tags": "abstract arrangement atoms branching chain chemistry connection data structure diagram emblem engineering flow graph inorganic interconnected link linked logo mark molecular molecules network nodes nodes and links order organic polymer science scientific sequence structure visualization"},
+        {"name": "power_settings_new", "tags": "action button circle command control device electrical electronics energy info information interface control line machine off on power rounded save settings shutdown start stop switch symbol system toggle utility"},
+        {"name": "pregnant_woman", "tags": "abdomen baby birth body child curved lines expecting family female figure health healthcare human lady maternity medical medicine mom mother outline people person pregnancy pregnant pregnant woman prenatal profile round belly side view silhouette woman women"},
+        {"name": "preview", "tags": "check design discern disclosed discover display examine explore exposed eye glimpse inspect layout look monitor notice observe optic peek preview reveal revealed screen scrutinize see show sight site spot spy view visible vision watch web website window www"},
+        {"name": "print", "tags": "copier copy device document draft fax hardware ink local machine office output paper press print printer printing printing press printshop publication publish scanner send"},
+        {"name": "privacy_tip", "tags": "advice alert announcement assistance bulb certified concept creativity details education enlightenment guidance guidance system help i idea idea generation info information informational innovation insight knowledge knowledge sharing learning lightbulb privacy private protect protection security service shield solution solution finding suggestion support thinking thought tip verified"},
+        {"name": "private_connectivity", "tags": "access anonymize connection connectivity data digital privacy encrypted internet internet security lock locked network network security online online security password privacy private private access protected protected access protection safe browsing safety secure secure browsing secure connection secure data secure network security shield tunnel virtual private network vpn"},
+        {"name": "production_quantity_limits", "tags": "! alert amount attention bill boundary box capacity card cart carton cash caution coin commerce constraint control count credit currency danger dollars ecommerce error exclamation full important inventory limit limited limits management manufacturing mark maximum money notification number online overflow package pay payment product production quantity restriction shopping sold out stock symbol unavailable warning"},
+        {"name": "published_with_changes", "tags": "approve approved arrow arrows article blog changes check commit complete content document done draft edit file finalize inprogress lines load loading mark modify ok page paper post publish published rectangle refresh renew replace revision rotate save select share sheet square text tick update upload validate verified version with writing yes"},
+        {"name": "query_builder", "tags": "access alarm appointment builder calendar circle clock date deadline dial duration event future hands history hour hand measure minute hand notification past planning productivity query query builder reminder schedule second hand stopwatch time timer watch watch later"},
+        {"name": "question_answer", "tags": "answer answers bubble chat comment comments communicate communication communication bubble conversation debate dialogue discussion empty feedback forum help message online chat outline qa question question_answer questions rectangle speaking speech speech balloon speech bubble support tail talk talk bubble talking thinking thought"},
+        {"name": "question_mark", "tags": "? ask assistance circle clue curious curve dot doubt education faq glyph guidance help hint info information inquire interrogation learning mark problem punctuation puzzle query question mark stroke support symbol unknown unsure"},
+        {"name": "quickreply", "tags": "bolt bubble chat comment comment bubble communicate communication communication bubble conversation dialogue electric energy engaging express fast fast reply feedback input instant instant reply interaction lightning message quick quick reply quickreply reply reply icon respond response short reply speech speech bubble talk talk bubble text text bubble thought bubble thunderbolt"},
+        {"name": "receipt", "tags": "bill details document expenses financial invoice itemized lined lines list money order paper payment purchase receipt record rectangle register retail shop shopping store summary transaction"},
+        {"name": "record_voice_over", "tags": "account announce audio avatar broadcast character circle commentary communicate dictation face geometric human lines microphone narrate narration outline over people person person speaking person talking profile record recording silhouette sound speak speaking speech studio talk transcript user voice voice over"},
+        {"name": "redeem", "tags": "bill bonus bonus points bow buy card cart cash celebration certificate coin commerce coupon credit currency discount dollars event gift gift card giftcard giving holiday loyalty loyalty program money online pay payment present prize purchase rectangle redeem reward reward system ribbon shopping special offer transaction voucher"},
+        {"name": "remove_done", "tags": "abolish accept approval approve bin cancel check checkmark clear complete completion confirmation delete destroy disabled discard done eliminate enabled erase finished get rid of invalidate mark multiple obliterate off ok on positive remove rubbish scrap select slash tick trash verification wipe out yes"},
+        {"name": "remove_shopping_cart", "tags": "basket card cart cash checkout clear clear cart coin commerce credit currency delete dollars e-commerce empty empty cart erase item minus online online shopping online store pay payment product purchase quantity remember remove remove from cart remove item retail ribbon save shop shopping shopping cart store subtract"},
+        {"name": "reorder", "tags": "adjust arrows bars burger dots down drag drag and drop drop ellipses format grid grip handle horizontal layout lines list menu move navigation order organize parallel rearrange reorder sort stacked structure up vertical"},
+        {"name": "repartition", "tags": "allocation analysis area arrow arrows breakdown categories chart circle configuration dashboard dashboard item data diagram distribution division graph hierarchy management module organization partition pie chart refresh renew repartition restore sections segments settings setup slice split statistics structure table"},
+        {"name": "report_problem", "tags": "! alert app attention caution danger error exclamation feedback flag hazard important interface issue mark message notification problem report risk security shield sign signal status symbol system triangle ui urgent ux warning website"},
+        {"name": "request_page", "tags": "add add document add file application ask content create data doc document drive file folder folders form form field form submission memo needs new new document new file note page paper plus plus sign query request request form request page require sheet slide submission text writing"},
+        {"name": "restore", "tags": "arrow back backwards circle circular arrow clean clear clock computer data date device digital erase factory reset history history. home initialization loop machine nest previous redo refresh reload renew reset restart restore reverse revert rotate schedule start over system time turn undo update wipe"},
+        {"name": "restore_from_trash", "tags": "action archive archive management arrow back backwards bin bring back circle clock curve data data recovery date delete direction documents files garbage history items management pointing up recover recycle refresh renew restore restore from trash retrieve reverse rotate schedule time trash turn un-delete undo"},
+        {"name": "restore_page", "tags": "arrow arrows back browser button circular arrow control data doc document document icon file file icon history page paper previous state refresh reload renew reset restart restore restore page revert rotate sheet storage synchronize ui undo update web page"},
+        {"name": "rocket", "tags": "adventure ascent astronaut astronomy boost cosmos discovery engine exploration fast flight futuristic ignition journey launch mission progress projectile propulsion quick rocket science sky space spacecraft spaceship speed start travel universe velocity zoom"},
+        {"name": "rocket_launch", "tags": "accelerate ascent astronaut boost cosmic exploration fast flight forward ignition journey launch lift off mission momentum new progress projectile quick rocket science fiction space spaceship speed start startup successful takeoff thrust transport upward vehicle"},
+        {"name": "room", "tags": "address area cartography destination direction directions find geo geographic gps landmark locale locate location map maps marker navigation pin pinpoint place point position region room setting site spatial spot stop vicinity wayfinding whereabouts zone"},
+        {"name": "rounded_corner", "tags": "adjust border boundary box chamfer corner curve customization dash dashed design edge edit element fillet format geometry graphic outline properties radius rectangle rounded rounded corner settings shape shape editor smooth soft square style transform ui control visual"},
+        {"name": "rowing", "tags": "activity athlete boat body canoe competitive exercise figure fitness human journey lake leisure line oar outline paddle people person race recreation river row rowboat rowing sea shape simple sport stream transportation vessel water workout"},
+        {"name": "rule", "tags": "approve basis benchmark canon check code command complete condition criterion decree dictate direction done formula governance guidelines incomplete law line management mark measure metric missing no ok order policy precept principle regulation requirement rubric rule select standard statute stipulation system tenet tick validate verified wrong x yes"},
+        {"name": "satellite_alt", "tags": "alternative antenna artificial astronomy broadcast celestial communication connection cosmos data dish earth futuristic global gps link navigation network orbit orbital relay remote satellite science signal solar panel space space station technology telecommunications television transmission"},
+        {"name": "saved_search", "tags": "archive bookmark collection criteria data discover explore favorite filter find glass highlight important information inquiry keep list locate look lookup magnify magnifying magnifying glass mark marked monitor query records remember results saved saved search scope search see star storage track"},
+        {"name": "savings", "tags": "account bank banking banking icon bill budget card cash coin commerce cost credit currency currency exchange deposit dollars earnings economy finance financial literacy financial planning fund income investment money online pay payment pig piggy piggy bank reserve revenue saving savings symbol transaction wealth wealth creation wealth management"},
+        {"name": "schedule", "tags": "access alarm appointment calendar circle clock date deadline dial duration event future hands history hour hand measure minute hand notification past planning productivity query builder recent reminder schedule second hand stopwatch time timer watch watch later"},
+        {"name": "schedule_send", "tags": "agenda appointment arrow calendar circle clock date delivery dispatch email event forward forward message future letters mail message notification organize pending planner planning remember reminder right arrow schedule send share time transfer transmit"},
+        {"name": "search", "tags": "browse circle discover discover icon explore explore icon filter find find icon glass handle inspect investigate locate locate icon look magnifier magnify magnifying mode options query query icon scope search search bar search button see stick tool view zoom"},
+        {"name": "search_off", "tags": "access denied blocked blocked access cancel cancel search circle clear clear search close close search cross out diagonal line disabled disallowed search enabled find find blocked find disabled find off forbidden search glass lens look magnify magnify blocked magnify disabled magnify glass magnify off magnifying no access no results not found off on prohibited remove remove search restricted restricted search search search access denied search blocked search disabled search off search prevented search stopped search unavailable see slash stop unavailable x"},
+        {"name": "segment", "tags": "alignment analytics analyze breakdown categorize chart chunk classify component data diagram divided division element fonts format fragment graph group isolate lines list modular modularity paragraph part piece portion rule rules section segment separate slice split style subset text"},
+        {"name": "send_and_archive", "tags": "archive arrow box chat chat message communication compose deliver dispatch document down download email email message file folder inbox instant message letters mail mail message message move move to archive outbox quick action reply save send send and archive share store store message"},
+        {"name": "sensors", "tags": "antenna bar graph bars communication connection connection status connectivity data device device status graduated bars indicator internet levels measurement network radio waves reception scan sensing sensors signal signal strength status technology three bars transfer transmission waves wifi wireless"},
+        {"name": "sensors_off", "tags": "block cancel connection crossed out detection off diagonal line disable disabled disconnected enabled forbid inactive line measurement disabled measurement off network no detection no measurement no sensors off on prevent scan sensors sensors off sensory signal slash state status stop toggle unavailable wireless"},
+        {"name": "settings", "tags": "adjustments administration administration panel application change cog cogwheel configuration control control panel customization settings customize details fine tune gear gear wheel info information machinery manage management management tools mechanism modify options options button panel parameter personal preference settings preferences service settings setup system tools"},
+        {"name": "settings_accessibility", "tags": "access accessibility adaptation adjustments aids body cog configuration control customization details disabilities figure gear hearing aid human inclusive information menu mobility options people person personal preferences profile settings setup silhouette special needs symbol tools universal access user visual aid"},
+        {"name": "settings_applications", "tags": "adjust administration app application applications change circle cog computer configuration configure control customize details device engineering gear gears industrial info information internet machinery manage mechanical mechanism mobile options personal preference service settings setup software system technology tools web wheel"},
+        {"name": "settings_backup_restore", "tags": "archive arrow back backup backwards circle cloud cycle data documents download files history loop progress redo refresh reload replay reset restart restore restore defaults reverse rotate settings spin status sync synchronize transfer undo update upload"},
+        {"name": "settings_bluetooth", "tags": "accessories adjustments audio bluetooth configuration connect connection connectivity control data device devices disable discoverable enable headphones mobile network options pairing settings setup sharing signal speakers symbol technology toggle wireless"},
+        {"name": "settings_brightness", "tags": "adjust adjustment appearance brightness configuration contrast control customize dark dial display environment exposure filter glow illumination intensity interface level light management mode modify monitor options preferences screen setting settings solar sun theme visual"},
+        {"name": "settings_cell", "tags": "Android OS adjustment administration administration panel cell cell phone cellular cog configuration control customization dashboard device gadget gear hardware iOS machinery management mechanical mobile mobile menu options phone preferences settings settings cell setup smart device system tablet technical technology telephony"},
+        {"name": "settings_ethernet", "tags": "arrows cable communication component computer computer network connect connection connectivity connector data device dots ethernet hardware infrastructure interface internet jack lan line link local area network network network cable network settings plug port rj45 settings socket technology wifi wire wired"},
+        {"name": "settings_input_antenna", "tags": "airplay antenna arrows broadcast cast communication computer connect connection connectivity data dish dish antenna dots entertainment input internet media network parabole parabolic radio radio signal receiver receiver dish satellite satellite dish satellite signal screencast settings signal stream streaming technology television transmission tv tv antenna wifi wireless"},
+        {"name": "settings_input_component", "tags": "audio av cable cables component composite configure connect connection connectivity connector device entertainment equipment hardware hookup input install internet jacks link media multimedia plug plug in points ports settings setup technology vga video wifi wiring"},
+        {"name": "settings_input_composite", "tags": "audio av cables component composite configure connection connectivity connector device entertainment equipment hardware hookup input install jacks link media multimedia plug plug in points ports settings setup technology vga video wiring"},
+        {"name": "settings_input_hdmi", "tags": "audio av cable configuration connection connectivity connector definition device digital display electronics entertainment hdmi high high definition input jack link monitor multimedia plug plugin points port settings setup signal socket technology television video wire"},
+        {"name": "settings_input_svideo", "tags": "adapter audio video audio visual av cable cable connection circle component video connection connectivity connector definition device electronics entertainment geometric input line media multimedia plug plugin points port s-video settings shape signal square standard svideo technology video video input"},
+        {"name": "settings_overscan", "tags": "adjustment arrows aspect ratio border box calibration corners display edges expand four corners image lines monitor output overscan photo picture picture adjustment picture settings presentation rectangle resize scan screen screen display settings settings overscan square television tv video video settings view zoom"},
+        {"name": "settings_phone", "tags": "adjust administration call cell cellular cog communication configuration connection contact control customize details device feature gear hardware manage mobile options personalization phone preferences settings setup system telephone tool wheel"},
+        {"name": "settings_power", "tags": "access action button circle component control device electrical electricity energy function hardware icon info information line menu off on on off power power off reset restart save settings shutdown standby switch symbol system toggle turn off"},
+        {"name": "settings_remote", "tags": "access access settings adjustment appliance bluetooth configuration configure connection connection manager connection settings connectivity control device electronic manage management media options preferences remote remote access remote control remote control settings remote device settings setup signal system television tv wifi wireless wireless control"},
+        {"name": "settings_voice", "tags": "adjustments audio circle circular cog configuration control controls gear horizontal input line lines manage management mic microphone options preferences record recorder recording settings setup sound speak speaker talking vertical voice wheel"},
+        {"name": "shop", "tags": "architecture bag bill building business buy buying card cart cash coin commerce commercial credit currency dollars door economic establishment facade google institution lines market marketplace money online pay payment play rectangle retail selling shop shopping shopping center store storefront structure transaction window"},
+        {"name": "shop_2", "tags": "2 add arrow basket business buy cart checkout commerce count e-commerce google market multiple items number two online store play point of sale pos purchase quantity retail retail store selling shop shop 2 shopping shopping bag store transactions"},
+        {"name": "shop_two", "tags": "2 add arrow basket business buy cart checkout commerce count e-commerce google market multiple items number two online store play point of sale pos purchase quantity retail retail store selling shop shop 2 shopping shopping bag store transactions two"},
+        {"name": "shopping_bag", "tags": "acquire bag basket bill business buy card carry bag cart cash checkout coin commerce container credit currency dollars e-commerce goods handle handle bag hold items line merchandise money online order outline pay payment product purchase rectangle retail shop shopping shopping bag square store storefront stroke transaction transport"},
+        {"name": "shopping_basket", "tags": "add add to cart bag basket bill buy card cart cash checkout coin commerce container credit currency dollars e-commerce ecommerce ellipse goods groceries handle items market marketplace merchandise money online online store oval pay payment purchase retail shop shopping shopping basket shopping cart store"},
+        {"name": "shopping_cart", "tags": "add add to cart basket bill buy buying card carriage cart cash checkout coin commerce credit currency dollars e-commerce general store goods grocery items local market merchandise money online online shopping pay payment products purchase retail retail store sale shop shopping shopping bag shopping cart store trolley"},
+        {"name": "shopping_cart_checkout", "tags": "add add to cart arrow bag basket buy buying cart cash checkout coin commerce currency dollars e-commerce e-commerce cart e-shop e-tail marketplace money online online basket online purchase online retail online shopping online store pay payment purchase retail retail basket retail cart right shop shopping shopping cart store trolley webshop webstore"},
+        {"name": "smart_button", "tags": "action ai appliance artificial automated automatic automation button circle clever command components composer connected connection control custom device digital electric electronic function genai home automation intelligence interface internet of things iot link magic network remote site smart smart button spark sparkle special star stars switch technology toggle trigger ui ux web website wireless"},
+        {"name": "source", "tags": "area basis category code composer concern content context creation data details doc document domain element facts field file folder foundation header heading information issue knowledge matter mode origin point question reference resources root source storage subject subject matter theme title topic view"},
+        {"name": "space_dashboard", "tags": "analytics arrangement blocks cards composition dashboard dashboard view data display format grid layout layout arrangement metrics modular module organize overview panels rectangle rectangular report sections segments shapes space square squares structure system tiles view web website windows"},
+        {"name": "spatial_audio", "tags": "3d audio acoustic audio audio effects audio processing audio rendering audio settings direction ears enhanced audio environment audio head headphone icon headphones immersive audio listening music note positional audio sonic sound sound control sound waves sound waves radiating spatial spatial audio stereo surround sound virtual sound"},
+        {"name": "spatial_audio_off", "tags": "3d audio off audio audio control audio icon audio off audio off icon audio options audio setting off circular sound waves off crossed out audio crossed out sound disable audio disable sound disabled disabled sound disabled state enabled immersive audio off music mute spatial audio no sound no sound icon note off off state offline on settings slash sound sound control sound icon sound off sound options sound waves off spatial spatial audio off spatial audio setting spatial sound disabled surround sound disabled volume off"},
+        {"name": "spatial_tracking", "tags": "3d ar arrow audio augmented reality data direction disabled discover enabled explore find follow live locate location mapping motion movement music navigation note off offline on path pinpoint pointer position real-time sense sensor slash sound spatial spatial tracking three dimensional trace tracking virtual reality vr"},
+        {"name": "speaker_notes", "tags": "annotation audio bubble bullet points chat comment communicate detail dialogue document explanation format information lecture lines list meeting message mute notes page paper presentation record rectangle sound speaker speaker notes speech square talking text three lines transcript voice volume"},
+        {"name": "speaker_notes_off", "tags": "bubble cancel chat comment communicate confidential notes control crossed out diagonal line disable disabled disabled speaker notes document enabled format hide notes interface lines list meeting meeting notes off message mute no speaker notes notes notes off off on paper presentation presentation notes off presenter view off private notes slash speaker speaker notes off speech text view"},
+        {"name": "spellcheck", "tags": "a accuracy action alphabet approve button character check checkmark control correct correction document editor font grammar interface language letter letters mark ok processor proofread proofreading review right select spell spellcheck symbol text tick type typing ui ux validation verified word write writing yes"},
+        {"name": "star_rate", "tags": "achievement assessment award bookmark celestial evaluation excellence favorite feedback five points geometry highlight important mark marked pointed positive preference quality ranking rate rating rating rank review reward save saved selection shape special star"},
+        {"name": "stars", "tags": "achievement alert badge bookmark bright circle favorite feature five point geometric glowing highlight important indicator magic marked new notification points premium quality ranking rate rating rating rank reward save saved shape shiny sparkle special star stars success update"},
+        {"name": "sticky_note_2", "tags": "2 angle bookmark communication corner data document fold ideas information list mark memo message note office organization page paper peel planning post it records rectangle reminder square stationery sticky sticky note tab task text thoughts work writing"},
+        {"name": "store", "tags": "address aisle bill building business buying card cash coin commerce commercial company credit currency destination directory dollars establishment goods location mall map marker market marketplace merchandise money navigation online pay payment pin place pointer retail retail building selling shop shop building shopping store storefront"},
+        {"name": "subject", "tags": "alignment answer assistance balloon bubble chat comment communication dialogue doc document email full help help bubble icon information information bubble isolated justify list note problem query query bubble question question mark rounded corners shape square subject support symbol text writing"},
+        {"name": "subtitles_off", "tags": "accessibility accessibility feature accessible audio caption captions disabled captions off cc cc off closed closed captioning disabled closed captioning off diagonal line disable disabled enabled film language live caption media control movie no off on rectangle slash sound square streaming subtitle subtitles subtitles disabled subtitles off text disabled text off toggle off translate turn off tv video video control"},
+        {"name": "supervised_user_circle", "tags": "account account settings avatar child circle control face family figure guardian head human kid limited access monitored parent parental parents people person privacy profile restricted safety secure shoulders silhouette supervised supervised user circle supervision supervisor user user avatar user profile youth"},
+        {"name": "supervisor_account", "tags": "access account account settings admin administrator avatar block configuration control control panel custodian face family filter guardian human kids manage options parent parental parental control parental controls parents people person preferences profile restriction settings restrictions safety security settings supervised supervisor supervisor account tv settings user user profile viewing restrictions"},
+        {"name": "support", "tags": "advice agent assist assistance avatar basic buoy call common communication contact essential general head headphones headset help human information life lifebuoy line art outline person phone question representative rescue safe safety service silhouette simple support universal"},
+        {"name": "swap_horiz", "tags": "alternate arrow arrows back change data transfer direction double-ended arrow exchange flow forward horizontal horizontal swap left arrow move movement opposing arrows orientation rearrange reorder replace right arrow shift sort swap switch transaction transfer transform two arrows"},
+        {"name": "swap_horizontal_circle", "tags": "alternate arrow arrows back back and forth button change circle circular connection convert currency cycle direction double arrow exchange exchange rate flow forward horizontal link movement reverse rotate round shift sideways swap switch trade transaction transfer"},
+        {"name": "swap_vert", "tags": "arrow arrows bidirectional connection data direction direction change document down exchange export file flow import interchange link move navigation process reorder shuffle sort sorting swap switch sync synchronize transaction transfer up up down vert vertical"},
+        {"name": "swap_vertical_circle", "tags": "arrow arrows bidirectional change circle circular communication content data direction down exchange flow move opposite orientation rearrange reorder reverse rotation round sort sorting swap switch transfer two-way up vertical"},
+        {"name": "swipe", "tags": "action animation arrow arrows control cursor direction drag fingers gesture guide hand hands help horizontal indicator instruction interaction left mobile motion movement navigation pan pointer progress right scroll slide swipe touch transition tutorial"},
+        {"name": "swipe_down", "tags": "action arrows content loading control direction disable down down arrow drag down enable finger gesture graphic hand hands hit input interaction interface control mobile move down navigation pointing down pull down pull to refresh refresh screen scroll scroll down strike swing swipe down swpie symbol take touch touchscreen ui action vertical movement"},
+        {"name": "swipe_down_alt", "tags": "action alt alternate arrows direction disable down downwards drag enable finger gesture guide hand gesture hands hit indication indicator instruction interaction interface mobile motion move navigation pointer pull down screen scroll strike swing swipe down swpie take tap touch touch screen ui element"},
+        {"name": "swipe_left", "tags": "action app arrow arrows back button command control direction drag finger fingertip gesture guidance hand hit indicator instruction interaction left mobile move movement navigation pointer previous prompt reject scroll sideways slide strike swing swipe swipe left take touch ui ux"},
+        {"name": "swipe_left_alt", "tags": "alt archive arrow arrows control delete direction dismiss finger gesture go left hand hit horizontal indicator interaction interface left move movement navigation next pointer previous reject reveal screen scroll show more slide strike swing swipe take touch"},
+        {"name": "swipe_right", "tags": "accept action advance app arrow arrows command digital direction finger forward gesture gesture control graphic hands hit horizontal movement indicator interaction interface mobile motion move navigation next pointer pointing progress right screen strike swing swipe right swpie take touch touchscreen ui element user control website"},
+        {"name": "swipe_right_alt", "tags": "accept action alt arrow arrows control cursor direction drag finger forward gesture hands hit indicator instruction interface mobile movement navigation next pointer right screen signal skip slide strike swing swipe swpie take touch tutorial"},
+        {"name": "swipe_up", "tags": "arc arrow arrows caret clean curve direction disable enable finger gesture hand hands hit indicator interaction line minimal mobile mobile gesture motion move up navigation outline pointer prompt scroll up simple strike swing swipe up swpie take touch touch screen up upward"},
+        {"name": "swipe_up_alt", "tags": "action alt alternative alternative swipe arrow arrow up arrows control direction disable enable finger gesture hands hit indicator interactive interface mobile movement navigation pointer screen scroll scroll up strike swing swipe swipe up swpie take touch touch screen ui action up upward user input variant"},
+        {"name": "swipe_vertical", "tags": "action arrows control digital direction down drag drag down drag up finger flick gesture hand hands hit input interaction mobile move movement navigation pointer scroll scroll down scroll up strike swing swipe swpie take technology touch touch screen ui gesture up up/down vertical swipe verticle"},
+        {"name": "switch_access_shortcut", "tags": "access access point accessibility activation alternative input arrow arrows assistance assistive technology button connected device connection control device direction disability electronic enabling external device input method interface control link management navigation new north on/off peripheral remote control setting shortcut switch symbol technology toggle up wired wireless"},
+        {"name": "switch_access_shortcut_add", "tags": "+ access accessibility add arrow arrows button control cursor direction focus highlight input interactive mechanism navigation new north on/off option plus pointer selection setting shortcut switch symbol toggle up"},
+        {"name": "sync_alt", "tags": "alt arrow arrows back and forth change circle circular connecting connection cycle data direction double arrow exchange flow horizontal interaction internet link loop oval process reciprocal refresh relationship round swap switch sync synchronize technology transfer two way up update wifi"},
+        {"name": "system_update_alt", "tags": "application arrow backup cloud computer data transfer device down down arrow download export file transfer installation internet loading maintenance monitor network progress refresh restore screen security server software update sync synchronize system system update technology update upgrade upload"},
+        {"name": "tab", "tags": "add button add document add tab add window application management application window browser browser control browser tab browser window computer create new desktop document document tab documents file tab folder internet internet browser layering windows multiple windows new document new tab new window plus button program window project tab software window stacking windows tab tabs web web browser website window window management windows"},
+        {"name": "tab_unselected", "tags": "application background blank border browser computer content dash dashed document documents empty folder inactive inactive tab internet layer multiple navigation organization outline overlapping page placeholder rectangle section shape stack stacking switch tab tabs toggle unselected unselected tab view web website window windows"},
+        {"name": "table_view", "tags": "arrangement cell chart columns data data visualization display format geometry grid group information layout lines list matrix multiple order organize organized data presentation rectangular report rows segmented spreadsheet square structure table tabular tabular data view"},
+        {"name": "task_alt", "tags": "accuracy alt approve approved box check checkbox choice circle complete completed confirmation control correctness done election finished form indicator input mark ok select square status success task tick true ui element validate validation verified verify yes"},
+        {"name": "terminal", "tags": "IT administration angle brackets application code coding command line command prompt computer computing console debugger developer developer tools emulator execute input field program programming prompt rectangle run code script software system tech technology terminal text editor text input window"},
+        {"name": "text_rotate_up", "tags": "A adjustment alphabet arrange arrow character characters clockwise content control curve direction document edit field flow font format glyphs heading layout letters move orientation paragraph position rotate spin symbol text transform turning type typography up word writing"},
+        {"name": "text_rotate_vertical", "tags": "A alignment alphabet arrange arrow arrows change direction change orientation character direction document double arrow down down arrow edit text editor field flip font formatting glyph layout letters lines move orientation rotate symbol text transform two arrows type typography up arrow vertical word processing writing"},
+        {"name": "text_rotation_angledown", "tags": "A adjust text align alignment alphabet angle angledown arrow arrow down character diagonal document document editing down arrow down indicator edit text field file font letters manipulate text move orientation page rotate rotation symbol text text control text direction text layout text orientation type typography word processing words writing"},
+        {"name": "text_rotation_angleup", "tags": "A adjustment alphabet angle angleup arrange arrow character creative design direction document edit field font formatting layout letter letters modify move orientation rotate rotation skew symbol text tilt transform type typography up upward writing"},
+        {"name": "text_rotation_down", "tags": "A adjust alphabet arrow character direction document dow down edit field file font format horizontal layout letter letters modify move orientation point rotate rotation symbol text transform type typography vertical word"},
+        {"name": "text_rotation_none", "tags": "A alignment alphabet arrow box character content document field file font horizontal layout letters move none orientation page paper rectangle rotate rotation sheet square straight symbol text type upright vertical"},
+        {"name": "theaters", "tags": "box office cinema clip documentary entertainment feature film independent local media movie movies perforation performance play playback production projector rectangle reel rounded corners screening short show showtimes square stream theater theaters video view watch"},
+        {"name": "thumb_down", "tags": "ate cancel disagree disapproval dislike down favorite feedback fingers gesture hand hand gesture hands hate like negative negative feedback no opposite rank ranking rating refusal reject rejection thumb thumbs down unlike unlike button vote vote down"},
+        {"name": "thumb_down_off_alt", "tags": "cancel disabled disagree disapproval dislike down enabled favorite feedback filled fingers gesture hand hand gesture hands hate like negative negative feedback no off offline on opposite rank ranking rate rating refusal reject rejection slash thumb thumbs down unlike unlike button vote vote down"},
+        {"name": "thumb_up", "tags": "acknowledgement agree approve button choice confirmation content interaction control endorsement excellent favorite feedback fingers gesture good hand hand gesture hand sign hands indicator like option positive preference rank ranking rate rating reaction recommend selection share social media thumb thumbs up up vote yes"},
+        {"name": "thumb_up_off_alt", "tags": "acknowledgement agree alt approve button choice confirmation content interaction control disabled enabled endorsement excellent favorite feedback fingers gesture good hand hand gesture hand sign hands indicator like off offline on option positive preference rank ranking rate rating reaction recommend selection share slash social media thumb thumbs up up vote yes"},
+        {"name": "thumbs_up_down", "tags": "agree approval comparison contrast decision direction disagree dislike down favorite feedback finger fingers gesture hand gesture hand signal hands human body like negative opinion positive rate rating rejection review social media survey thumb thumbs thumbs down thumbs up up vote"},
+        {"name": "timeline", "tags": "chart chronological data dates diagram dots duration events flow future history journey line milestones movement past path period point points points in time progress progression roadmap schedule sequence stages steps timeline tracking trending visual representation zigzag"},
+        {"name": "tips_and_updates", "tags": "advice ai alert and announcement artificial automatic automation bright bulb custom electricity energy genai glow guidance guide helpful idea illumination info information innovation inspiration intelligence invention knowledge latest learning light lightbulb magic message new news notification recent smart solution spark sparkle star thought tip tips update updates"},
+        {"name": "toc", "tags": "bullet points chapter list chapters content document document navigation document sections file format hierarchy index index list lines list menu navigation options order organize outline overview points reorder section list sections stacked structure structure of a document summary table table of contents text title titles toc"},
+        {"name": "today", "tags": "agenda appointment calendar circle circle with dot clock contemporary current date day dot dot in circle event filled circle indicator mark marker month now outline plan point present remember reminder ring round schedule solid circle time today"},
+        {"name": "token", "tags": "access access token account approval authentication authentication token authorization badge credentials entry grant hexagon identity key lock login logout mark password permission private profile protected secure security shield sign sign in sign out symbol token unlock user verification"},
+        {"name": "toll", "tags": "assets bill booth budget car card cash charge circle circles coin coin stack commerce cost credit currency debit dollar dollars economic economy euro fees finance financial funds highway income money online pay payment price revenue stack ticket toll transaction wealth yen"},
+        {"name": "touch_app", "tags": "action app application button click command control cursor device digital element finger fingers gesture hand input interact mobile navigation phone pointer press screen select software tablet tap touch ui element"},
+        {"name": "tour", "tags": "assist assistance circle destination dot explanation feature first time flag guidance guide help highlight indicator information introduction learn learning onboard onboarding places pointer progress question question mark start steps support tip tour travel tutorial visit walk-through walkthrough"},
+        {"name": "track_changes", "tags": "bullseye changes circle collaboration compare comparison content differences document editing document history document management document versions draft editing editing features editorial evolve file history history lines movement review revisions revisions history rotate shift target text track track changes version control version history workflow writing"},
+        {"name": "transcribe", "tags": "ai analysis assistant audio automatic caption communication conversion dictation digital document instant interpret language listen live machine learning real-time recognition record recording sound speech technology text transcribe transform translate voice"},
+        {"name": "translate", "tags": "arrow bidirectional bubble change chat communication conversion dictionary direction double exchange global international language left linguistics meaning phrase right speak speaking speech swap talk text translate translator word words"},
+        {"name": "trending_down", "tags": "analysis analytics arrow arrow down arrow icon business chart data decline decrease decrease icon diagonal arrow diagonal line diagram dip direction down downtrend downward drop falling finance graph infographic line graph lowering measure metrics movement negative trend rate rating slump statistics stock market tracking trend icon trending trending down"},
+        {"name": "trending_flat", "tags": "arrow average change chart constant data direction equal flat forward arrow graph horizontal arrow indicator level line metric movement no change normal progress rate representation right right arrow stable standard status steady straight arrow track tracking trend trending trending flat visual"},
+        {"name": "trending_up", "tags": "analysis analytics arrow ascending business chart data diagram direction finance gain graph growth improve increase infographic line graph measure metric metrics movement performance positive progress rate rating report rising statistics status tracking trend trending trending up up"},
+        {"name": "troubleshoot", "tags": "adjust analytics chart cogs configure data diagnose diagram engineering find fix gear glass graph help infographic issue line look machinery magnify magnifying maintenance measure mechanic mechanical metrics options problem repair search see service settings setup solution spanner statistics support system technical tool tool bar tracking troubleshoot utility work wrench"},
+        {"name": "try", "tags": "approve attempt best bookmark bubble chat comment communicate evaluation excellence favorite feedback gold star grade highlight highlighted important marked message preferred premium quality rank ranking rate rating recommended review save saved score shape special speech star top try trying valued"},
+        {"name": "turned_in", "tags": "app archive article book bookmark browser collection content corner document favorite file fold guide in keep label library mark mobile organize page pin read reading remember ribbon save site tag turned tutorial web page"},
+        {"name": "turned_in_not", "tags": "app archive article book bookmark browser collection content corner document favorite file fold guide in keep label library mark mobile not organize page pin read reading remember ribbon save site tag turned tutorial web page"},
+        {"name": "unfold_less_double", "tags": "arrow arrows arrows down arrows inward arrows pointing in chevron chevrons close collapse compress contract decrease direction double double arrows expand expandable fold inward less lessen list minimize minimize application minimize window narrow navigation point reduce shrink smaller two arrows unfold up vertical arrows"},
+        {"name": "unfold_more_double", "tags": "action additional arrow arrows button chevron collapse control details direction double down dropdown expand expandable filter hide indication information line list maximize menu minimize more navigation open pointer show sort symbol toggle unfold up vertical"},
+        {"name": "unpublished", "tags": "analysis analytics approve bar chart bar graph business chart check circle complete dashboard data data visualization disabled done enabled financial graph growth infographic information insights mark marketing metrics off ok on performance presentation progress report results review sales select slash statistics summary tick trends unpublished validate verified visual data yes"},
+        {"name": "update", "tags": "app arrow arrow circle back backwards circle circular clock counter-clockwise cycle data download forward history internet load loading loop process program progress redo refresh reload renewal reverse rotate schedule software spin sync synchronize system technology time undo update upload web"},
+        {"name": "update_disabled", "tags": "arrow back backwards blocked cancelled circle clock date diagonal line disabled enabled error forbidden forward history inactive load loading disabled no access no update not available not loading not updating not working off on prohibited refresh refresh disabled refresh off reverse rotate schedule slash stopped sync disabled sync off time unavailable update update disabled"},
+        {"name": "upgrade", "tags": "above advance arrow ascent better direction elevation enhance export growth higher improve increase instal level up line new version next progress promotion replace rise top up update upgrade upward"},
+        {"name": "verified", "tags": "accepted accreditation approval approval icon approve authentic authorized badge burst certified check checkmark checkmark in circle complete completed confirmation confirmed credentials done green checkmark identity legitimacy mark official ok registered select stamp of approval star success tick trusted valid validate verified verified account verified user yes"},
+        {"name": "verified_user", "tags": "approve badge certified check complete confirmation data done endorsed excellent exemption good gpp guard mark ok pass positive privacy private protect protected protection quality safety security select shield success tick trust user valid validate validation verification verified yes"},
+        {"name": "vertical_split", "tags": "arrangement columns content layout design display divide document layout dual view format formatting grid layout page layout panels paragraph partition screen section segment separation side by side side-by-side layout split split view text two columns two panels ui layout vertical vertical split view website window window layout writing"},
+        {"name": "view_agenda", "tags": "agenda agenda view arrange blocks calendar cards checklist data design display entries format grid information items layout lines list list format list view management multiple items order organization plan project rectangles schedule stacked stacked list tasks timeline vertical list view view agenda website"},
+        {"name": "view_array", "tags": "arrange arrangement array blocks columns content data design display format grid grouping horizontal layout list multiple order organize presentation rows section segment structure vertical view view array visual website"},
+        {"name": "view_carousel", "tags": "cards carousel collection content design display elements exhibition format gallery grid horizontal image images items layout media multiple navigation next objects photos picture pictures present presentation previous scrolling sequence show slide view website"},
+        {"name": "view_column", "tags": "alignment arrangement column columns data data display design display divide division format grid grid view information display layout organize pane panel part presentation section segment split structure table table layout table view vertical view view column view display website window"},
+        {"name": "view_comfy_alt", "tags": "alt area arrangement blocks boxes collection comfortable comfy compartments cozy design display format grid group items layout mode mosaic neat options organized panels pattern presentation section square squares structured tidy tiling view view comfy alt web"},
+        {"name": "view_compact_alt", "tags": "alt alternate arrange blocks box columns compact content customize data design display filter format grid layout layout dense options organize panel presentation rectangle rows sections settings sort square structure view view mode web windows"},
+        {"name": "view_cozy", "tags": "arrangement boxes close clustered comfy compact content cozy data dense design display elements format grid grid view grouped information items layout list list view organization packed pattern presentation rectangles structure tight view view cozy view options visual web"},
+        {"name": "view_day", "tags": "appointment arrangement bar blocks calendar cards carousel columns date day design display event format grid horizontal layout narrow organization panels planning presentation schedule strip time timeline view website"},
+        {"name": "view_headline", "tags": "area arrangement article bars block component content design display document element format formatting grid grouping heading headline layout lines list order organization paragraph presentation screen section structure text title topic view visual website window"},
+        {"name": "view_in_ar", "tags": "3d 3d model ar ar experience augmented augmented reality box cube daydream digital display future headset hologram immersive immersive view in overlay perspective real world reality reality view science fiction scifi screen spatial square technology three dimensional view view in view in ar virtual reality virtual_reality vr"},
+        {"name": "view_kanban", "tags": "agile blocks board cards column grid kanban kanban board layout lines list management organization pattern productivity progress project project management rectangular squares status structure task task board view view options visual board workflow workflow management"},
+        {"name": "view_list", "tags": "arrangement bulleted catalog compact content data design directory display document filter format grid index information inventory items layout lines list menu navigation numbered options order organization presentation rows sequence sort stacked structure view website"},
+        {"name": "view_module", "tags": "arrange arrangement blocks collection components content dashboard data design display format gallery grid grouping groups information items layout module organization organize overview pattern presentation rectangle representation sections square squares stacked structure tiles view visual website"},
+        {"name": "view_quilt", "tags": "arrangement blocks columns composition dashboard design divisions format gallery grid layout mosaic multiple views options organization panels pattern quilt rectangles rows sections segments selection separation square squares stacked structure tiles view website windows"},
+        {"name": "view_sidebar", "tags": "area bar collapse column content control data design display expand format grid hide information interface layout list menu navigation navigation panel options options panel panel rectangle screen section settings show sidebar toggle vertical view web window"},
+        {"name": "view_stream", "tags": "arrangement block view blocks columns content content blocks data design display divided feed format gallery grid horizontal information layout lines list mode multiple items organization presentation rectangles rows sectioned stacked stream stream view view view layout view options website"},
+        {"name": "view_timeline", "tags": "analytics chart chronological data diagram display event flow graph grid history horizontal layout line milestone monitoring overview pattern period presentation progress record report schedule sequence squares time timeline tracking vertical view visualization"},
+        {"name": "view_week", "tags": "agenda agenda view appointment appointments bars calendar calendar view chronicle chronicle view columns daily view date dates day day view days of the week design display event events format grid layout list organize planning record schedule seven days time timeline view website week weekly"},
+        {"name": "visibility", "tags": "display eye glance hidden hidden text insight look observe on optic password visibility peek perspective private public reveal security see show sighted spy stare toggle visibility unhide view visibility visible visual watch"},
+        {"name": "visibility_off", "tags": "conceal crossed out eye diagonal line disabled disabled view enabled eye form hidden hide input invisible line through masked not visible obscured off on password password field privacy private reveal secret security see show show/hide slash surveillance toggle toggle button unviewable unwatch view visibility watch"},
+        {"name": "voice_over_off", "tags": "accessibility accessibility feature accessibility off account assistance disabled audio disabled audio off blocked cancelled circle with slash disabled disabled feature enabled face human line through mute narration off no audio no sound no voice off on over people person profile recording screen reader disabled screen reader off silence slash sound icon sound off speak speaking speaking off speech speech off text to speech off transcript turned off user voice voice icon voice over disabled voice over off volume off"},
+        {"name": "watch_later", "tags": "access alarm appointment calendar circle clock date deadline dial duration event future hands history hour hand later measure minute hand notification past planning productivity query builder reminder schedule second hand stopwatch time timer watch watch later"},
+        {"name": "webhook", "tags": "alert api arrow automation backend box code communication connection data developer development enterprise event integration interface line link message notification programming rectangle service software square system trigger up arrow update webhook"},
+        {"name": "width_full", "tags": "action arrows button columns content control display expand extend fill full width grid horizontal indicator layout left arrow lines maximize menu pointer presentation right arrow scale screen sidebar stretch toggle view width"},
+        {"name": "width_normal", "tags": "adjust size adjust width alignment boundaries canvas size content width contract controls dimensions display width document editing expand horizontal image size layout limits measurement normal width page proportions resize ruler scale settings size spacing video size width window size"},
+        {"name": "width_wide", "tags": "adjust aspect ratio bar cinema dimension display enlarge expand film format full screen horizontal landscape layout maximize measure monitor movie panoramic player rectangle scale screen size stretch video view wide width wide zoom"},
+        {"name": "wifi_protected_setup", "tags": "WPS access around arrow arrows authenticate broadcast configuration connect connection establish internet link network network setup protect protected protected setup radio waves rotate secure connection secured security setup signal signal strength three arcs three lines wifi wireless wireless network"},
+        {"name": "work", "tags": "attache bag baggage briefcase business career case employment handle item job luggage object office outline portfolio professional rectangle satchel square stroke suitcase travel work"},
+        {"name": "work_history", "tags": "activity log archive back backwards bag baggage briefcase business career case clock cv data date document employment experience history history log job journal list log paper past past jobs pending previous professional recent record resume schedule suitcase task history time timeline updates work work history work record"},
+        {"name": "work_off", "tags": "bag baggage blocked briefcase business business travel cancelled career case closed cross out diagonal line disabled document employment enabled inactive job line through luggage not available off on portfolio productivity restricted slash stopped strike through suitcase travel unavailable work working"},
+        {"name": "work_outline", "tags": "attache bag baggage briefcase business career case employment handle item job luggage object office outline portfolio professional rectangle satchel square stroke suitcase travel work"},
+        {"name": "wysiwyg", "tags": "Rich text editor basic editor composer composition content creation document document editing document editor document formatting editing editor formatting input field layout lines mode page paragraphs plain text editor screen simple editor site software styling system text text area text editing text editor text entry text formatting view visibility web website what you see is what you get window writing wysiwyg"},
+        {"name": "youtube_searched_for", "tags": "analysis analytics arrow back backwards discover entertainment examine explore find focus glass handle history inprogress inspect investigation load loading locate look magnify magnifying magnifying glass media online platform query recent refresh renew research restore reverse rotate search searched see service video youtube zoom"},
+        {"name": "zoom_in", "tags": "action add big bigger button circle command control cross detail enlarge find function glass grow in increase input interface tool lens line look magnifier magnify magnifying magnifying glass plus positive scale search see size tool ui tool view zoom zoom in"},
+        {"name": "zoom_out", "tags": "action adjust button control decrease decrease size discover document view enlarge explore find glass image view investigate lens look loupe magnify magnifying map view minus negative out pull back reduce view scale scale down search see setting shrink size small smaller telescopic tool view visual zoom zoom out"},
+    ],
+    "alert": [
+        {"name": "add_alert", "tags": "+ active add add attention add important add notification add reminder add warning alarm alert attention bell caution chime create create alarm danger exclamation important message new notice notification notifications notify plus remind reminder ring set reminder sound subscribe subscribe to alerts symbol warning"},
+        {"name": "auto_delete", "tags": "archive auto auto delete automatic bin can clean up clear clock configuration content control data date delete disposal document erase file garbage management message recurring remove schedule settings time timer tool trash utility"},
+        {"name": "error", "tags": "! alert alert icon attention caution circle circular critical danger dot error exclamation failure important information invalid issue line mark message notification outlined point problem rounded sign something went wrong status stroke symbol warning warning symbol"},
+        {"name": "error_outline", "tags": "! alert alert icon attention caution circle circular critical danger dot error exclamation failure important information invalid issue line mark message notification outline outlined point problem rounded sign something went wrong status stroke symbol warning warning symbol"},
+        {"name": "notification_important", "tags": "! active alarm alert app icon attention bell caution chime communication critical danger error exclamation icon important inbox information mark message new notification notification bell notifications notify reminder ring sound status status update symbol system timely ui element ui icon update urgent urgent message warning"},
+        {"name": "warning", "tags": "! alert app attention caution danger error exclamation flag hazard important interface issue mark message notification problem risk security shield sign signal status symbol system triangle ui urgent ux warning website"},
+        {"name": "warning_amber", "tags": "! alert amber app attention caution danger error exclamation flag hazard important interface issue mark message notification problem risk security shield sign signal status symbol system triangle ui urgent ux warning website"},
+    ],
+    "av": [
+        {"name": "10k", "tags": "10000 10K 10k achievement alphabet character competition digit display distance event exercise font goal k letter letters measurement metric metric prefix milestone number numbers numerical pixel pixels quantity race resolution running sport symbol ten text thousand type value video"},
+        {"name": "1k", "tags": "1000 1K 1k abbreviation alphabet amount character count counter data digit display figure font indicator k label letters measure metric number numbers numeric numerical pixel pixels quantity rating resolution result score statistic symbol text thousand total type unit value video"},
+        {"name": "1k_plus", "tags": "+ 1000 1K 1k achievement addition alphabet character count digit display figure followers font growth increase letters likes metric milestone more number numbers numeral numerical one thousand. pixel pixels plus plus sign popularity positive quantity resolution social media statistic subscribers success symbol text thousand thousand plus type value video views"},
+        {"name": "2k", "tags": "2000 2K 2k abbreviation alphabet character characters digit display font high quality higher resolution k letter letters media media controls movie number numbers numerical option pixel pixels playback player quality resolution screen settings streaming symbol television text toggle type video video quality video resolution video settings"},
+        {"name": "2k_plus", "tags": "+ 2000 plus 2000+ 2k 2k plus 2k+ alphabet character clarity definition digit digital display font format hd high definition letters media controls movie quality numbers picture quality playback plus quality settings resolution screen resolution streaming streaming quality symbol text tv quality two thousand k two thousand plus type uhd ultra hd video quality video settings video standard"},
+        {"name": "3k", "tags": "3000 3K 3k alphabet character cinema definition digit digital display film font high quality video letters media movie numbers pixel pixels playback setting resolution screen stream quality streaming streaming service symbol technology television text three k tv show type video video playback video player video quality video resolution video setting"},
+        {"name": "3k_plus", "tags": "+ 3000 3000 plus 3000+ 3K 3k plus 3k+ achievement addition alphabet amount character counter data digit display font greater than indicator k. letters limit metric milestone more number numbers numeral pixel pixels plus quantity resolution statistic symbol text thousand three three thousand threshold type value video volume"},
+        {"name": "4k", "tags": "4000 4K 4k alphabet alphanumeric character cinema content definition digit digital display film font graphic high resolution indicator label letters media movie numbers pixel pixels playback quality quality setting resolution screen streaming symbol technology television text type ultra hd video"},
+        {"name": "4k_plus", "tags": "+ 4000 4K 4k addition alphabet character digit digital display equation font high definition letters media monitor multimedia numbers pixel pixels plus quality resolution screen streaming symbol technology television text type video"},
+        {"name": "5g", "tags": "5g alphabet cellular character communication connection connectivity data data connection digit fifth generation font future high speed icon indicator internet letters mobile mobile data mobile network modern network network status numbers performance phone signal speed status strength symbol technology telecommunications text type wifi wireless wireless network"},
+        {"name": "5k", "tags": "5000 5K 5k alphabet character clarity crispness definition detail digit display display setting five k five thousand font format high definition high quality letters movie quality numbers pixel pixels playback quality quality indicator resolution screen resolution streaming quality symbol text type uhd ultra high definition video video clarity video quality video resolution video settings visual quality"},
+        {"name": "5k_plus", "tags": "+ 5000 5K 5k addition alphabet amount character count count display. data data point digit display five five thousand font letters limit limit reached metric metric display more than number number symbol numbers numerical numerical value over pixel pixels plus plus sign quantity quantity indicator resolution statistic sum symbol text thousand threshold type value video"},
+        {"name": "6k", "tags": "6000 6K 6k alphabet character clarity definition detail digit digital display enhanced font format high definition high resolution indicator letters media movie multimedia numbers option pixel pixels playback premium quality resolution screen setting streaming symbol television text type video video quality visual"},
+        {"name": "6k_plus", "tags": "+ 6000 6K 6k achievement alphabet amount approximation badge character counter data digit display estimate font greater than indicator label letters measurement metric milestone minimum more than number numbers numeral over pixel pixels plus plus sign quantity resolution six thousand statistic symbol text threshold type value video"},
+        {"name": "7k", "tags": "7000 7K abbreviation alphabet broadcast channel character content content rating definition digit display film rating font high definition high resolution letters media movie rating numbers numbers 7k pixel pixels quality resolution seven thousand source standard definition streaming symbol television rating text text 7k title tv rating type video video resolution"},
+        {"name": "7k_plus", "tags": "+ 7000 7000 plus 7000+ 7K 7k+ achievement add addition alphabet amount character count counter data digit display font increase indicator label letters marker measurement metric milestone more than number numbers pixel pixels plus quantity rating resolution score statistics symbol text threshold total type value video"},
+        {"name": "8k", "tags": "8000 8K 8k alphabet character cinema quality digit display display settings font high definition letters media quality movie quality multimedia settings numbers numeric pixel pixels playback settings quality resolution screen settings streaming quality symbol text type uhd uhd 8k ultra high definition video video definition video quality video resolution video settings video stream visual quality"},
+        {"name": "8k_plus", "tags": "+ 7000 8K 8k advanced alphabet character cinema clear definition digit digital display enhanced entertainment font high definition image letters media monitor numbers picture pixel pixels playback plus quality resolution screen sharp streaming symbol technology television text type uhd ultra high definition video video quality viewing experience visual"},
+        {"name": "9k", "tags": "9000 9K 9k alphabet character clarity content definition digit digital display font high definition indicator label letters marking media monitor movie nine k numbers performance pixel pixels playback quality rating resolution screen specification stream symbol tag technical television text type video"},
+        {"name": "9k_plus", "tags": "+ 9000 9K 9k achievement alphabet amount analytic calculation character count data digit display equation font indicator letters level limit math measurement metric milestone more than number numbers over performance pixel pixels plus quantitative ranking rating resolution symbol text threshold type value video"},
+        {"name": "add_to_queue", "tags": "+ Android OS add add to queue append arrangement audio chrome desktop device display entertainment hardware iOS include insert line list mac management media monitor multimedia music new next order ordering play next playback playlist plus queue screen sequence stack symbol to upcoming video video player watch next web window"},
+        {"name": "airplay", "tags": "airplay arrow audio broadcast cast screen casting connect connection content sharing control desktop device display external display media media sharing monitor multimedia output playback projection screen screen mirroring screen share send to tv sharing signal streaming triangle tv video wireless wireless display"},
+        {"name": "album", "tags": "album archive artist artwork audio bundle bvb catalog cd collection compilation computer cover data disk documents file folder gallery group index layer library lines media music organization photos pictures playlist record series set sound square stack storage track volume"},
+        {"name": "art_track", "tags": "album album art art artist audio collection cover details display gallery image information item library lines list media metadata music photo photography picture playback rectangle screen song sound square track tracks view visualizer"},
+        {"name": "audio_file", "tags": "add audio bars chart control create data digital doc document download equalizer file format graph key lines media music note player representation sound technology three lines track type upload vertical lines volume wave waveform"},
+        {"name": "av_timer", "tags": "alert av chronograph circular clock competition countdown deadline duration event hour interval lap time measurement minute minutes notification outline performance race reminder schedule second seconds speed stop watch stopwatch time timekeeping timer timing track watch"},
+        {"name": "branding_watermark", "tags": "abstract asset branding branding watermark company components copyright corner design diagonal element emblem format graphic identity image imprint interface layout line logo mark outline overlay picture rectangle screen shape sign simple site square stamp symbol trademark transparency ui ux vector watermark web website window"},
+        {"name": "call_to_action", "tags": "action active alert arrow bar button call call to action choose clicking components cta cursor cursor hand design desktop fingertip gesture hand highlight icon info information interacting interaction interface layout link message mobile navigation notification pointer pointing press screen select site to touch touch screen ui ui element ux web website window"},
+        {"name": "closed_caption", "tags": "accessibility accessible alphabet audio box button caption captions cc character closed closed captions controls decoder disabled font language letters line listen media movies off player read rectangle settings slash speech spoken subtitle subtitles switch symbol text toggle translation tv type video"},
+        {"name": "closed_caption_disabled", "tags": "accessibility accessible alphabet audio barrier caption captions cc character closed closed captioning decoder disabled enabled exclusion film font hearing language letters lines listening media movie movies muted off on rectangle screen show silent slash slashed speech square struck through subtitle subtitles symbol television text tv type video"},
+        {"name": "closed_caption_off", "tags": "accessibility accessible alphabet audio box button caption captions cc character closed closed captions controls decoder disabled font language letters line listen media movies off outline player read rectangle settings slash speech spoken subtitle subtitles switch symbol text toggle translation tv type video"},
+        {"name": "control_camera", "tags": "adjust apparatus arrow arrows camera capture center circle configure control device direction equipment film gadget left lens media move multimedia options photo photography preferences record rectangle reposition right settings setup shutter square technology tool video viewfinder"},
+        {"name": "equalizer", "tags": "adjust adjustment analytics audio audio control bars chart control customize data digital equalizer filter fine tune frequency graph levels lines measure metrics mix mixing multimedia music noise parameters playback preferences settings settings icon sound sound adjustment spectrum static statistics tone tracking vertical visualizer volume"},
+        {"name": "explicit", "tags": "adult alphabet block censorship character classification content disallowed e e symbol explicit filter font graphic inappropriate label language letters mark mature mature content media movies music not allowed p symbol parental control prohibition rating restricted restriction sensitive sign symbol text type warning writing"},
+        {"name": "fast_forward", "tags": "accelerate action advance arrow audio audio visual button content control direction double arrow entertainment fast fast forward forward media media control move forward music next play playback player progress right arrow skip speed streaming symbol time timeline tv ui element video"},
+        {"name": "fast_rewind", "tags": "accelerate audio back backward control double arrows fast go back instant jump jump back left arrows media move back multimedia music navigation play playback player previous quickly reverse rewind skip speed time transport tv video"},
+        {"name": "featured_play_list", "tags": "album arrangement audio bullet points collection content document episodes featured file highlighted items lines list media movies music order organized play playlist queue recommended rectangle selection sequence series shows square tracks video videos"},
+        {"name": "featured_video", "tags": "advertised advertisement cinema circle clip content entertainment featured file film footage highlight highlighted important media movie multimedia play player premium recommended recording ring round screen shape spotlight star stream ui icon video watch"},
+        {"name": "fiber_dvr", "tags": "alphabet box broadcast buttons character communication controls data device digital dvr electronics entertainment fiber fiber dvr font interface letters lines media multimedia network panel playback record recorder recording rectangular square storage streaming symbol system technology television text tv type video"},
+        {"name": "fiber_manual_record", "tags": "active alert audio broadcast button circle connection current dot fiber filled circle indicator live manual marker media notification online play point presence record recording session signal solid circle status streaming video watch"},
+        {"name": "fiber_new", "tags": "alphabet broadband cable character circle communication connection cutting edge data development digital dot fast fiber fiber new font futuristic glass high speed innovation internet letters media modern network new optical progress signal speed symbol technology text transmission type"},
+        {"name": "fiber_pin", "tags": "alphabet broadband cable character communication communication link connection connectivity connector data data transmission digital fiber fiber optic fiber pin font internet internet connection letters network network connection optic cable pin plug port signal signal transmission socket symbol technology text transmission type wire"},
+        {"name": "fiber_smart_record", "tags": "action audio audio recording automatic automation button capture capture audio capture video circle data disc dot fiber future intelligent media media control multimedia play record recording save save audio save video smart smart record storage streaming technology video video recording watch"},
+        {"name": "forward_10", "tags": "10 advance arrow audio player control controls curved arrow digit direction fast fast forward forward jump listen media controls movie music navigation number 10 numbers play playback podcast progress scrub seconds series show skip streaming symbol ten seconds time jump time skip timeline video video player watch"},
+        {"name": "forward_30", "tags": "30 30 seconds advance arc arrow audio control controls curve digit fast fast forward forward icon interface element jump media media control multimedia music number numbers numeric playback player progress rewind forward seconds skip symbol thirty seconds time transport control video"},
+        {"name": "forward_5", "tags": "10 5 5 seconds advance arrow audio back control controls digit direction duration fast fast forward five seconds forward interval jump media control music navigation next numbers playback player previous progress rewind right arrow seconds skip streaming symbol time time skip timeframe timeline triangle video"},
+        {"name": "games", "tags": "accessory action activity adjust arrow arrows buttons circles control controller d-pad device digital direction electronic entertainment fun gamepad games gaming hardware input interface joystick left leisure menu move navigation play rectangle right selection technology video games"},
+        {"name": "hd", "tags": "alphabet character clarity codec content crisp definition detail digital display film font hd high high definition indicator information label letter d letter h letters mark media movie movies multimedia pixels playback quality resolution screen sharp streaming symbol text tv type video"},
+        {"name": "hearing", "tags": "abstract accessibility accessible acoustic aids assistance audio body communication concept disability ear frequency handicap health hearing hearing aids help human impaired language listen listen in medical mono noise outline sensory shape sound symbol understanding volume waves"},
+        {"name": "hearing_disabled", "tags": "access accessibility accessible aid assist assistance audio circle communication deaf diagonal line disability disabled ear enabled handicap hard of hearing health hearing hearing disabled hearing impairment help impaired line listen medical mute off on profile prohibited silent slash sound special needs status symbol user volume"},
+        {"name": "high_quality", "tags": "achievement alphabet award badge best button certification character definition display excellent exclusive favorite first five star font gold high hq icon letters luxury movie movies preferred premium quality quality mark rank ranking rating resolution review screen seal of approval stamp star symbol text top tv type winner winner's medal"},
+        {"name": "interpreter_mode", "tags": "account accounts assistant audio bilingual chat committee communication conversation dialogue dictation digital translation exchange face family foreign language friends group hear hearing human humans interpretation interpreter keyboard language languages listening machine translation mic microphone mode multilingual network noise people person persons profile profiles record recorder simultaneous social sound speaker speaking speech symbol talk team translate translation understand understanding user users voice"},
+        {"name": "library_add", "tags": "+ add archive book catalog collection content create data document entry file index insert item layers library list media multiple music new organize page playlist plus queue record register save stacked store symbol video"},
+        {"name": "library_add_check", "tags": "action add approve archive bookmark box button check collection complete confirmed control corners document done feedback file folder inclusion layers library line list mark multiple music new item ok plus saved select square stacked success symbol task tick ui validate verified video yes"},
+        {"name": "library_books", "tags": "academy add album archives audio bibliography book books bookstore catalog collection content database directory documents education files index information knowledge learning library list literature publications read reading records research resources stacked stacked books study"},
+        {"name": "library_music", "tags": "add album archive audio audio collection audio files audio library collection documents files folder library media media library multimedia music music archive music collection music library music player music symbol musical notes notes organize playlist rectangle song sound sounds storage tracks"},
+        {"name": "loop", "tags": "action around arrow arrows circle circular continuous curved cycle direction directional inprogress load loading refresh loop media control movement music navigation playback control process recycle refresh reload renew repeat rotate rotating rotation spin sync synchronization turn two arrows update workflow"},
+        {"name": "lyrics", "tags": "audio bubble chat comment communicate display lyrics document document icon document outline feedback key language lines lyrics message music music icon music note note paper paper icon paragraph reading reading icon script show lyrics singing song sound speech text text icon text lines track view lyrics vocal words writing writing icon"},
+        {"name": "mic", "tags": "audio audio button audio capture audio input audio recording chat communication dictate dictation hear hearing input keyboard messaging mic mic button microphone microphone button multimedia noise record recorder recording recording button sound sound capture sound input sound recording speak speaker speech talk voice voice button voice command voice input"},
+        {"name": "mic_none", "tags": "audio audio button audio capture audio input audio recording chat communication dictate dictation hear hearing input keyboard messaging mic mic button microphone microphone button multimedia noise record recorder recording recording button sound sound capture sound input sound recording speak speaker speech talk voice voice button voice command voice input"},
+        {"name": "mic_off", "tags": "audio audio input disabled audio off audio settings bar call control communication diagonal line disabled enabled hear hearing input settings meeting control mic mic disabled mic symbol microphone microphone icon microphone muted microphone off mute no audio no sound noise off on privacy quiet record recording recording mute recording off security silenced slash sound sound off speak off talk mute voice voice input off voice mute voice off"},
+        {"name": "missed_video_call", "tags": "absent alert arrow call camera cancelled chat communication conference contact declined diagonal line ended failed film filming hardware history image log meeting message missed motion multimedia notification online phone picture record ring teleconference telephone unavailable video video call videography webcam"},
+        {"name": "movie", "tags": "capture cinema creation digital drive edit entertainment file film media movie movie file multimedia play play movie play video playback record recording reel slate storage video video camera video file videotape view watch"},
+        {"name": "music_video", "tags": "band broadcast camera cinema clip display entertainment film footage live media movie multimedia music music video pause play player production record recording reel screen streaming studio theatre tv video video camera video screen view watch"},
+        {"name": "new_releases", "tags": "accepted accreditation approval approval icon approve authentic authorized badge burst certified check checkmark checkmark in circle complete completed confirmation confirmed credentials done green checkmark identity legitimacy mark official ok registered select stamp of approval star success tick trusted valid validate verified verified account verified user yes"},
+        {"name": "not_interested", "tags": "alert ban block cancel circle clear close control diagonal disable dislike do not disturb exclude exit forbidden interested interrupt limit line mute no not notification off preference prohibited quiet quit remove restricted setting silent slash state status stop unavailable x"},
+        {"name": "note", "tags": "add file article blank document blank page bookmark content create document data digital document digital file doc document document icon draft drive empty file file file icon folder folders form information message new file note office file page paper plus record report sheet slide symbol text writing"},
+        {"name": "pause", "tags": "action audio break button command control controls function halt hold inactivity interlude media media control music parallel lines pause pending playback control player rectangle standby stop suspend temporary two lines vertical lines video waiting"},
+        {"name": "pause_circle", "tags": "audio bars break button circle circular control controls filled hold interface media media controls music outline pause play playback player resume rounded shape stop suspend symbol two lines vertical video wait"},
+        {"name": "pause_circle_filled", "tags": "audio bars break button circle circular control controls filled hold interface media media controls music outline pause play playback player resume rounded shape stop suspend symbol two lines vertical video wait"},
+        {"name": "pause_circle_outline", "tags": "audio bars break button circle circular control controls filled hold interface media media controls music outline pause play playback player resume rounded shape stop suspend symbol two lines vertical video wait"},
+        {"name": "play_arrow", "tags": "app application arrow audio back begin button cinema components control controls direction entertainment episode forward icon interface media movie music navigation play playback player resume right screen show site sound start stream triangle ui ux video web website"},
+        {"name": "play_circle", "tags": "active arrow audio begin button circle control controls filled film go interface control listen media movie multimedia music play playback player rounded sound start stream triangle video watch"},
+        {"name": "play_disabled", "tags": "action audio blocked button cannot play control controls disabled enabled forward greyed out inactive initiate interface element media movie music not playable off on play playback player control shape slash start symbol triangle unavailable video"},
+        {"name": "playlist_add", "tags": "+ add add to playlist audio audio list bar bars collection create create list file files item items library line lines list media media list music music list new new playlist playlist playlist add plus row rows song list sound symbol"},
+        {"name": "playlist_add_check", "tags": "add added and approve arrangement audio check checked collection complete completed confirmed done entries items library list mark multimedia music ok order playlist plus queue select sequence sorted success task tick validate verified video yes"},
+        {"name": "playlist_add_check_circle", "tags": "accepted add album appended artist audio build cd check circle collection complete confirmed content create done edit grouping included integrated items library list manage mark media music order organize playlist record sequence sound success track verified video"},
+        {"name": "playlist_add_circle", "tags": "add album and artist audio cd check circle collection create episode library list mark media movie music new playlist plus queue record series song sound track tv video"},
+        {"name": "playlist_play", "tags": "albums arrow audio bars collection content entertainment episodes horizontal lines list media media controls media player multimedia music play play media playback player playlist queue queue playback series start stream tracks triangle vertical video"},
+        {"name": "playlist_remove", "tags": "- album cancel clear close collection cross delete discard eliminate empty erase hamburger menu horizontal lines library lines list media minus music playlist record remove song list subtract three lines track list unselect untick x mark"},
+        {"name": "queue", "tags": "add archive book catalog collection content create data document entry file index insert item layers library list media multiple music new organize page playlist plus queue record register save stack store stream video"},
+        {"name": "queue_music", "tags": "audio burger menu collection entertainment lines list media media player menu music musical note note order organization playback player playlist queue queue list sequence songs sound stack stacked lines staff three lines tracks"},
+        {"name": "queue_play_next", "tags": "+ add add to playlist add to queue arrow audio control desktop device display enqueue future hardware list manage media media player monitor music music player new next order organize play playback player playlist plus queue queued rearrange reorder screen sequence sound stream streaming symbol tv upcoming video video player"},
+        {"name": "radio", "tags": "airwaves antenna audio broadcast channel communication device digital entertainment frequency hardware internet listen live media music player podcast radio receiver signal sound streaming technology transmission tune waves wireless"},
+        {"name": "recent_actors", "tags": "account accounts actors address book avatar avatars card cards carousel colleagues community connections contacts directory face friends group human id identification identity layers list members network networking organization people person profile profiles recent recent actors rolodex roster social staff team thumbnail user users"},
+        {"name": "remove_from_queue", "tags": "action cancel clear close control cross delete desktop device display from hardware interface line list management mark media monitor music order playback playlist podcast queue remove remove from queue screen shape stream symbol video x"},
+        {"name": "repeat", "tags": "arrow arrow icon arrows audio circular arrows continuous control controls cycle direction loop media media control multimedia multimedia icon music play again playback refresh repeat replay video video player"},
+        {"name": "repeat_on", "tags": "active album arrow arrows audio button circular arrows continuous control controls curving arrows cycle enabled episode geometry loop media media controls movie music never ending on playback playlist repeat series shape song symbol toggle two arrows video"},
+        {"name": "repeat_one", "tags": "1 arrow arrow with number arrows audio control controls curved arrow digit loop loop button loop one loop playback loop single loop track media media controls media player music number one numbers one playback repeat repeat button repeat forever repeat one repeat single repeat track single item single song single video symbol video"},
+        {"name": "repeat_one_on", "tags": "again album arrow arrows audio circle continuous control controls cycle digit endless list loop loop one media music number numbers numeric on one playback player playlist repeat repeat one single song symbol track ui ux video"},
+        {"name": "replay", "tags": "again arrow arrows audio back back arrow circular circular arrow continuous control controls curve curving arrow cycle loop media media control music navigation playback playback control player redo refresh renew repeat replay restart return rewind rewind arrow start over video"},
+        {"name": "replay_10", "tags": "10 arrow arrows audio back backward circle control controls counter digit duration history jump back media control media player music numbers playback player refresh renew repeat replay reverse rewind seconds seconds backward skip back step back symbol ten time ui icon undo ux icon video"},
+        {"name": "replay_30", "tags": "30 arrow arrows audio player back 30 backward circular arrow control controls curved arrow digit duration go back 30 seconds left arrow media media control music numbers playback control player refresh renew repeat replay replay 30 replay button restart 30 rewind rewind 30 rewind button seconds skip backward 30 symbol thirty thirty seconds time video video player"},
+        {"name": "replay_5", "tags": "5 arrow arrows audio player backward circular control controls digit digits five jump jump back 5 seconds loop media media control media player icon music number numbers playback player refresh renew repeat replay replay 5 seconds replay button restart rewind rewind 5 rewind 5 seconds rewind icon skip skip back symbol time control video video player"},
+        {"name": "replay_circle_filled", "tags": "arrow arrows audio player circle circular arrow circular shape control controls counterclockwise arrow filled filled circle full circle loop loop button media controls multimedia music play again play again button playback refresh reload renew repeat repeat button replay replay button restart restart button rewind rewind button rounded video video player"},
+        {"name": "sd", "tags": "access alphabet authorized camera card character circle circle lock confidential data data security data storage device digital document document with lock drive encrypted file flash folder font image information key letters lock memory password photo private protection safebox sd secure security sensitive storage symbol text type"},
+        {"name": "shuffle", "tags": "alter order arrange arrow arrows change order change sequence control controls crisscross crossed lines diagonal different order disperse jumble list media control mix mixed up music playback playlist random random play re-arrange reorder repeat scatter sequence shuffle sort unpredictable video"},
+        {"name": "shuffle_on", "tags": "activate active arrow arrows audio control controls criss-cross disordered enabled jumbled lines media control mixed music music player on overlapping arrows play order playback playlist random randomization sequence shuffle shuffle mode shuffle on shuffled switch toggle two arrows video"},
+        {"name": "skip_next", "tags": "advance arrow audio player bar button control controls fast forward forward jump media button media control media player move forward music navigation next next track play playback previous right arrow sequence skip skip next triangle vertical bar video video player"},
+        {"name": "skip_previous", "tags": "arrow audio back bar beginning button control controls double line file go back history interface control line media media controls multimedia music next play playback player previous previous song previous track rewind skip skip previous song start track transport controls triangle ui icon vertical line video"},
+        {"name": "slow_motion_video", "tags": "adjust speed arrow camera circle control controls dash dashed edit video effect enhance video film icon media media control modify motion movie music play playback playback speed rate slow slow motion speed speed control symbol time triangle video video control video effect video speed visual effect"},
+        {"name": "snooze", "tags": "alarm alert bedtime bell clock curve delay duration icon notification pause postpone quiet reminder repeat rest shape silence sleep snooze stop symbol temporary three z's time timer wake up watch wavy line z zzz"},
+        {"name": "sort_by_alpha", "tags": "a a to z alphabet alphabetical list alphabetical order alphabetically alphabetize arrange arrangement az by alpha character character order font letter order letters list list order order order symbols order text organize reorganize sort sort alphabetically sort text symbol symbols text text list type z z to a"},
+        {"name": "speed", "tags": "acceleration arrow automotive car circle circular control controls dashboard data decreasing dial fast gauge increasing indicator information lines measurement meter motion music needle performance pointed progress setting settings slow speed speedometer ticks values velocity video"},
+        {"name": "stop", "tags": "action audio basic block button close command control control panel controls end exit filled finish geometric halt icon media music pause play playback player recorder recording shape simple solid square stop symbol video"},
+        {"name": "stop_circle", "tags": "action block boundary button cease circle circle shape close command conclude control controls end exit filled finish forbid frame halt interrupt limit media music pause play playback player prohibition restricted shape solid square square shape stop terminate video"},
+        {"name": "subscriptions", "tags": "abstract alert alerts app application bell button channel channels circle communication content digital enroll feed graphic icon interface list media mobile news notifications order play rss signup stack subscribe subscriptions symbol technology ui element update updates web website"},
+        {"name": "subtitles", "tags": "accessibility accessible audio caption captions cc character closed closed captioning control conversation deaf decoder dialogue display film hearing impaired language lines live caption media movie movies option parallel lines playback reading rectangle screen speech square subtitle subtitles text three lines translate translation tv typography video"},
+        {"name": "surround_sound", "tags": "360 audio adjustment audio audio setup audio system channel channels cinema circle configuration control entertainment home theater immersive media movie multimedia music playback settings signal sound sound system spatial audio speaker speakers surround surround sound system theater video volume volumn wireless"},
+        {"name": "video_call", "tags": "+ add audio broadcast call camera chat cinema communication conference distance learning film film strip filming group call hardware image live media meeting motion movie multimedia new online meeting picture plus record remote communication remote work streaming symbol telehealth video video chat video conferencing videocall videography virtual meeting webcam"},
+        {"name": "video_file", "tags": "camera doc document document type extension file file type film filming format format type hardware image media media format media player motion movie movie file multimedia multimedia file picture play play symbol rectangle square triangle video video file video player videography view view file watch watch file"},
+        {"name": "video_label", "tags": "category cinematic classification clip content digital editing editor entertainment file film footage format icon label media motion picture movie multimedia play player production recording rectangle screen symbol tag type video visual window"},
+        {"name": "video_library", "tags": "archive arrow category collection content document education entertainment file film folder gallery group library list media movie multimedia multiple organized play rectangle shape square stack storage symbol video visual"},
+        {"name": "video_settings", "tags": "adjust change cogwheel configuration control details digital video film settings gear info information media settings movie settings multimedia settings options play playback settings preferences screen service setting settings setup streaming settings video video adjust video cogwheel video configuration video control video gear video options video preferences video settings video setup window"},
+        {"name": "videocam", "tags": "broadcast broadcasting cam camera capture conference electronic film filming hardware image lens live media motion movie picture playback record recording shutter stream streaming technology video video recording videocam videography"},
+        {"name": "videocam_off", "tags": "blocked broadcasting call cam camera capture collaboration communication conference crossed out diagonal disabled enabled film filming forbidden hardware image lens line media meeting motion multimedia mute off offline on picture recording rectangle remote work screen sharing slash stopped stream unavailable video video call videography web conferencing"},
+        {"name": "volume_down", "tags": "acoustic audio audio adjustment audio control audio level audio settings control curved lines decrease volume diminish down less listen lower volume media player multimedia music mute noise playback control quieter reduce silence sound sound level speaker speaker cone speaker symbol tv volume volume control volume down waves"},
+        {"name": "volume_mute", "tags": "audio audio off cancel control diagonal line disabled icon media controls music mute no audio no sound off playback quiet settings silence silent slash sound sound off speaker speaker off stop symbol tv volume x mark"},
+        {"name": "volume_off", "tags": "accessibility audio audio control audio off control cross out diagonal line disabled enabled forbidden hearing low media control multimedia music mute no sound off off state on prohibited quiet silent slash sound sound off speaker speaker off triangle tv volume volume control volume off"},
+        {"name": "volume_up", "tags": "acoustic adjust volume amplify audio audio bars audio control audio output control controls decibels hearing high volume icon increase volume listen loud media multimedia music playback settings sound sound bars sound levels sound setting sound wave speaker symbol tv up video volume volume control volume up"},
+        {"name": "web", "tags": "address browser destination direction earth find us geolocation geotag global globe internet location location marker location pin map map marker map pin marker navigate navigation network online page pinpoint place point position screen site sphere spot spot marker web website where world www"},
+        {"name": "web_asset", "tags": "app application application desktop asset border box browser browser window coding computer screen content area design development digital display download frame image interface internet layout media monitor online page programming rectangle screen site software square ui ux video view web web asset website window www"},
+        {"name": "web_asset_off", "tags": "alert asset blocked browser computer connection desktop diagonal disabled enabled error failure forbidden icon internet line network no not supported off on page problem screen slash status symbol technology unavailable warning web webpage website window windows www x"},
+    ],
+    "communication": [
+        {"name": "3p", "tags": "3 3p account avatar avatar group bubble business chat collaboration comment communicate community community icon company face figures group group icon human members message multiple people networking organization party people person profile profile group silhouettes social speech staff staff icon team team icon three people triple person user users users group users icon"},
+        {"name": "add_ic_call", "tags": "+ action add add call app icon basic button call cell communications contact create device dial graphic hardware icon interface isolated line make call minimalist mobile mobile icon new new call outline phone plus simple symbol telephone ui icon ux icon vector web icon"},
+        {"name": "alternate_email", "tags": "@ address address book alternate alternate contact alternate email communicate communication contact contact form correspondence email email address email client envelope inbox inbox icon letter mail message messaging outline outline email outline envelope outline mail receive receive message send send message stroke tag"},
+        {"name": "app_registration", "tags": "app app registration application apps create account data entry details documentation edit enroll entry form information join new account onboarding pencil profile creation record register registration registration form sign up sign up form signup signup form subscription user registration web form"},
+        {"name": "business", "tags": "address apartment architecture building business circle communication company concept connection domain estate global globe home icon internet link navigation network online place real representation residence residential round shelter sphere symbol technology ui url web address website world"},
+        {"name": "call", "tags": "audio audio call call call icon cell cellular communication connection contact contact icon contact us device dial handset hardware helpline incoming call local phone mobile outgoing call phone phone alt phone icon reach receiver ringing service speaking support talk telephone voice"},
+        {"name": "call_end", "tags": "audio button call cancel cell close communication contact control decline device disconnect end hang up hardware incoming interaction mobile outgoing phone pictogram reject ringing shape stop symbol telephone terminate voice"},
+        {"name": "call_made", "tags": "action activity angular arrow call call made communication connectivity control device diagonal arrow direction external link icon indicator interface line line arrow link made mobile navigate outbound outgoing phone pointer right arrow share symbol telephone top right arrow"},
+        {"name": "call_merge", "tags": "arrow arrows branches call collapse combine connect connect points connecting points consolidate consolidate lines converge converging lines data device diagram direction dots flowchart graph integrate join lines link merge mobile network node points structure union unity"},
+        {"name": "call_missed", "tags": "alert angle angle down arrow call call status communication contact declined call device diagonal down diagonal line dialing direction down dropped call hang up history line log missed missed call mobile notification phone phone symbol recent calls smartphone technology telephone telephony"},
+        {"name": "call_missed_outgoing", "tags": "arrow attempted call cellular communication connection contact device diagonal dial direction failed history icon incomplete indicator line log missed mobile network number outgoing phone point right signal symbol telephone unfinished up"},
+        {"name": "call_received", "tags": "accept alert answering arrival arrow audio bottom call call received communication connectivity curve device direction download history inbound call incoming incoming call left line log message mobile notification phone point received recent calls signal telephone voice"},
+        {"name": "call_split", "tags": "action arrow arrows branch call call split communication connect connection control device direction disconnect distribute diverge divide fork lines menu mobile more multiply navigation network options path phone redirect routing separate share split spread telephone transfer"},
+        {"name": "cancel_presentation", "tags": "abort cancel clear close conference cross denial device diagonal lines dismiss display end exclude exit halt meeting monitor no present presentation projection projector quit rectangle rejection remove revoke screen slide slideshow stop terminate website window x x mark"},
+        {"name": "cell_tower", "tags": "5g antenna broadcast building casting cell cell tower cellular communication connection connectivity data gsm infrastructure internet lte mast mobile network radio radio tower signal station structure technology telecommunications tower transmission transmission tower transmitting wireless"},
+        {"name": "cell_wifi", "tags": "access bars cell cellular communication connection connectivity curves data device indicator internet lines mobile network phone reception service signal status technology waves wifi wireless"},
+        {"name": "chat", "tags": "alert balloon bubble chat chat balloon comment communicate communication connect contact conversation conversation bubble dialog discussion feedback forum message notification outline point pointed social speak speech speech bubble square square with tail tail talk talk bubble text ui element"},
+        {"name": "chat_bubble", "tags": "assistance blank bubble chat comment comment box communicate communication contact conversation converse dialogue discuss empty feedback help message outline speech support talk text text message"},
+        {"name": "chat_bubble_outline", "tags": "assistance blank bubble chat comment comment box communicate communication contact conversation converse dialogue discuss empty feedback help message outline speech support talk text text message"},
+        {"name": "clear_all", "tags": "action all app broom button clean clear clear all control data delete all desktop doc document entries erase all format graphic icon information items lines list management mobile organized pictogram remove all reset sweep sweeping symbol tidy web"},
+        {"name": "co_present", "tags": "arrow broadcast broadcasting cast co-present collaboration conference digital display meeting online person present presentation profile projection rectangle remote screen screen sharing share sharing site slides streaming togather user video video call view web webcam website window"},
+        {"name": "comment", "tags": "add add comment balloon bubble chat comment communicate communication conversation create create comment dialogue discussion feedback insert message new new comment outline plus rectangle reply respond speech square square bubble talk text text bubble write comment"},
+        {"name": "comments_disabled", "tags": "balloon bar blocked bubble censorship chat chat bubble with line chat disabled circle comment comment off comments comments blocked comments disabled communicate communication restricted conversation disabled cross dialogue restricted disabled enabled feedback line message message balloon with bar messaging disabled moderation muted muted comments no comments off offline on restricted comments slash speech speech bubble speech bubble with slash"},
+        {"name": "contact_emergency", "tags": "account alert assistance avatar call caution cell contact contacts critical danger emergency exclamation mark face figure geometry help human important info information mobile notification people person person icon phone profile profile icon profile picture safety security shape support symbol urgent user user icon warning"},
+        {"name": "contact_mail", "tags": "account address address book avatar business card communicate communication connection contact contact information correspondence details digital mail directory email envelope face human inbox info information letter mail message network online communication people person personal postcard profile receive send user user data user profile"},
+        {"name": "contact_phone", "tags": "account address book avatar call circle communicate communication contact directory face filled glyph head human info information message mobile outline people person phone profile profile picture round shoulders user"},
+        {"name": "contacts", "tags": "account accounts address book avatar avatars call cell communication connect connection contact contacts directory face figures friends group human humans info information list management member members mobile network people person phone profile profiles silhouette social team user users"},
+        {"name": "desktop_access_disabled", "tags": "Android OS access barring blocked cancellation chrome computer connection denied desktop device diagonal line disabled disconnected display electronic enabled forbidden hardware hindering iOS mac monitor no obstruction off offline on panel prohibition restricted restriction screen slash technology unavailable web window"},
+        {"name": "dialer_sip", "tags": "alphabet button call call icon cell character communication communication icon connection contact device dial dialer font hardware icon initiation internet internet icon ip letters line mobile network network icon outline over phone phone icon protocol routing session sip sip call square symbol telephone telephone icon text type voice voip voip call"},
+        {"name": "dialpad", "tags": "button buttons call communication contact control device dial dialing dialpad digit dots entering numbers grid grid layout input interactive keypad landline layout matrix mobile number numbers numeric pad phone rectangle smartphone square telecommunications telephone ten keys"},
+        {"name": "document_scanner", "tags": "app application article border business camera capture corners data device digital doc document drive file folder folders frame graphic image interface lines mobile notes office optical page paper phone photography pictogram picture reader rectangle scan scanner sheet slide symbol technology text ui ux vector writing"},
+        {"name": "domain_disabled", "tags": "access denied apartment architecture blocked building business circle company diagonal line disabled domain domain access denied domain block domain disabled domain privacy domain restricted domain security domain unauthorized enabled estate globe home internet internet access denied internet block internet disabled internet restricted internet unauthorized maps off office offline on place privacy real residence residential restricted security slash sphere unauthorized web web access disabled web privacy web security website website disabled"},
+        {"name": "domain_verification", "tags": "access app application desktop approve approved authenticated certified check circle complete confirmed connectivity design domain done global globe interface international internet layout map mark network ok planet screen security select site tick trusted ui ux validate validated verification verified verify web website window world www yes"},
+        {"name": "duo", "tags": "account avatar call chat collaboration communication conference device double duo friends group network pair partnership people person profile relationship social teamwork twin two user users video"},
+        {"name": "email", "tags": "communication communication icon contact contact icon correspondence diagonal lines digital electronic mail email empty envelop envelope fold icon inbox inbox icon internet letter letters mail message message icon new message online outline paper receive rectangle send symbol thin line unread"},
+        {"name": "forum", "tags": "answers bubble chat comment comments communicate communication communication bubble community conversation debate dialogue discussion empty feedback forum help hub message online chat outline qa question_answer questions rectangle speaking speech speech balloon speech bubble support tail talk talk bubble talking thinking thought"},
+        {"name": "forward_to_inbox", "tags": "arrow arrow icon arrows communication communication icon correspondence delivery destination direction directions document email envelop envelope envelope icon forward inbox inbox icon letter letter icon letters mail mail icon message message forwarding message transfer move navigation outgoing paper right send send mail send message to transfer transport"},
+        {"name": "hourglass_bottom", "tags": "bottom clock completed completion countdown deadline deadline exceeded delay duration end expiration final finished future half half full history hourglass loading measure measurement minute minutes past pending processing progress remaining sand time timer wait waiting"},
+        {"name": "hourglass_top", "tags": "antique bulb classic countdown delay duration epoch era flow future glass half hourglass indicator loading measurement measuring minute minutes object past pending period progress sand science shape time timer tool top vessel vintage wait waiting"},
+        {"name": "hub", "tags": "access center central collection connect connection convergence core data diagram distribution flow focal point hub information interconnected join links network node nodes nucleus organization point relations source structure system topology"},
+        {"name": "import_contacts", "tags": "address address book book communicate contacts data diary directory download education import info information journal knowledge learning library literature migration notebook open opened book pages reading receive send share sync synchronize textbook transfer upload"},
+        {"name": "import_export", "tags": "arrow arrows bidirectional connection data direction direction change document down exchange explort export file flow import interchange link move process reorder shuffle sort swap switch sync synchronize transaction transfer up up down vertical"},
+        {"name": "invert_colors_off", "tags": "accessibility accessibility settings appearance circle color color palette color scheme colors dark mode disabled display drop droplet enabled eye high contrast hue inactive invert invert colors off inverted light mode line mode off offline on opacity options palette preferences settings slash switch theme toggle tone vision visual impairment water"},
+        {"name": "key", "tags": "access access key authentication authorization code data decryption key digital door encryption encryption key entry information key lock login padlock password permission private private access private key secret secure secure access security technology unlock"},
+        {"name": "key_off", "tags": "access barred blocked circle closed deactivated disabled door enabled entry hole inaccessible inactive key lock locked object off offline on outline password private restricted rounded secure security slash square unavailable unlock"},
+        {"name": "list_alt", "tags": "agreement alt application apply archive archive file box checklist contained contract data entry document document archive file form format forms input lines list note notes order outline paper paper forms questionnaire record register registration reorder report sign up signup stacked survey text title"},
+        {"name": "live_help", "tags": "? advice assistance bubble chat chat bubble chat window comment communicate communication conversation customer service dialogue faq get help guidance help info information inquiry interaction knowledge live live chat message message bubble online help punctuation query question question mark recent resource restore speech speech bubble support support center symbol troubleshooting two bubbles"},
+        {"name": "location_off", "tags": "address destination direction directions disabled gps disabled location disabled map pin disabled marker disabled navigation disabled pin disabled pointer geography gps disabled gps off location location disabled location off map map pin disabled map pin off maps marker disabled marker off navigation disabled navigation off off pin pin disabled pin off pinpoint place pointer disabled pointer off position route stop tracking travel"},
+        {"name": "location_on", "tags": "address area cartography destination direction directions find geo geographic gps landmark locale locate location map maps marker navigation on pin pinpoint place point position region setting site spatial spot stop vicinity wayfinding whereabouts zone"},
+        {"name": "mail_lock", "tags": "access closed mail communication confidential confidential mail correspondence email email security encrypted envelop envelope letters lock locked locked mail mail message padlock password privacy private private message protected message protection restricted restricted access safety sealed secure secure communication security security lock send"},
+        {"name": "mail_outline", "tags": "communication communication icon contact contact icon correspondence diagonal lines digital electronic mail email empty envelop envelope fold icon inbox inbox icon internet letter letters mail message message icon new message online outline paper receive rectangle send symbol thin line unread"},
+        {"name": "mark_chat_read", "tags": "approve bubble chat chat bubble chat icon check checked checkmark checkmark icon comment communicate communication communication icon complete complete icon confirmed conversation conversation icon done done check done icon email email icon inbox mail mail icon mark mark read mark read icon message message icon ok read read message select sent sms speech speech bubble tick verified yes"},
+        {"name": "mark_chat_unread", "tags": "alarm alert balloon bubble chat chat bubble circle comment communicate communication conversation direct message discussion dm dot engagement indicator interaction mark mark as unread message new message notification notifications notify private message reminder social speech speech bubble status talk thought bubble unread unread chat unread message"},
+        {"name": "mark_email_read", "tags": "acknowledge approve archive box check checked communication complete confirmation correspondence correspondence. delivered document done email envelop envelope inbox letter letters mail mark mark as read message note notification ok opened paper read received reviewed select send sent success tick validated verified yes"},
+        {"name": "mark_email_unread", "tags": "alert check circle communication contact correspondence dot email envelop envelope icon inbox interface element letter letters mail mark message new note notification send status symbol ui element unread"},
+        {"name": "mark_unread_chat_alt", "tags": "alarm alert bubble bubble and dot chat circle comment communicate communication conversation correspondence dialog dot envelope graphic inbox indicator line mail mark message new message notification notifications notify pending point reminder shape speech speech bubble status text message unread vector"},
+        {"name": "message", "tags": "alert balloon bubble chat chat balloon comment communicate communication connect contact conversation conversation bubble dialog discussion feedback forum message notification outline point pointed social speak speech speech bubble square square with tail tail talk talk bubble text ui element"},
+        {"name": "mobile_screen_share", "tags": "Android OS access app application broadcast cast casting cell connect connection data device direct link display hardware iOS instant access link mirror mirroring mobile monitor network output phone projection quick launch screen screen share screencast share shortcut stream streaming tablet transmit tv wireless"},
+        {"name": "more_time", "tags": "+ add add time alarm appointment calendar chronometer circle clock countdown date duration event extend time hands of clock hours increase time minutes more more time new planning plus plus time reminder schedule seconds stopwatch symbol time time management timekeeper timer timing watch"},
+        {"name": "nat", "tags": "atlas borders boundaries cartography circle circular communication continents country destination earth flag geography global globe government international landmass map nat nation national planet politics rounded sphere state tourism travel world"},
+        {"name": "no_sim", "tags": "absent alert bar bars camera card cellular chip communication connection cross device diagonal line eject empty error insert line lines memory missing mobile network no no service no signal no sim not inserted phone signal sim sim card slash slot storage triangle unavailable warning"},
+        {"name": "pause_presentation", "tags": "action app application desktop audio player break control device display halt media media control media player parallel lines pause pause button playback playback control present presentation presentation software screen share site slides slideshow stop suspend two bars two vertical lines ui control vertical bars video player web website window www"},
+        {"name": "person_add_disabled", "tags": "+ account add blocked cancelled contact crossed out declined delete denied disabled enabled face forbidden human invalid member new off offline on people person plus profile remove restricted slash subtract symbol unavailable user"},
+        {"name": "person_search", "tags": "account avatar body circle contact contact search diagonal line discover face find find contact find friend find person find profile find user friend friend search glass handle head human investigate locate contact locate person locate profile locate user look lookup loupe magnify magnifying magnifying glass people person person search profile profile search search silhouette torso user user search zoom"},
+        {"name": "phone", "tags": "audio audio call call call icon cell cellular communication connection contact contact icon contact us device dial handset hardware helpline incoming call local phone mobile outgoing call phone phone alt phone icon reach receiver ringing service speaking support talk telephone voice"},
+        {"name": "phone_disabled", "tags": "blocked call cancel cell communication contact device diagonal line disabled disconnect enabled end forbidden hang up hardware line mobile mute no call not allowed not reachable off offline on pause phone prohibited silent slash stop technology telephone unavailable unreachable"},
+        {"name": "phone_enabled", "tags": "active answer audio available call cell communication connect contact conversation device dial enabled handset hardware mobile on phone pickup receiver ringing talk telephone voice"},
+        {"name": "phonelink_erase", "tags": "Android OS action button cancel cell clear close connection control cross delete device diagonal line disconnect erase exit forbidden hardware iOS line mobile negative no outline phone phonelink pictogram prohibited rectangle remove screen shape smartphone stop symbol tablet unavailable x"},
+        {"name": "phonelink_lock", "tags": "Android OS access access control authentication cell cell phone connection control device erase hardware iOS lock locked mobile password phone phonelink pin portrait privacy private protect protection restricted restriction safety screen screen lock secure secure device security smartphone tablet unlock"},
+        {"name": "phonelink_ring", "tags": "Android OS alarm alert audio call calling cell cellular communication communications connection data device hardware iOS incoming line lines listen listening mobile network notification outbound phone phonelink ring ringing service signal smartphone sound tablet technology telecommunication telecommunications telephone vibrate vibration volume waves wireless"},
+        {"name": "phonelink_setup", "tags": "Android OS adjust administration call chat cog configuration control customization device gear hardware iOS icon info manage mobile options parameters phone phonelink preferences settings setup smartphone symbol system tablet technology text"},
+        {"name": "portable_wifi_off", "tags": "connection connection disabled connection off crossed out data data off disabled disconnected enabled hotspot off internet internet off line mobile hotspot off network network disabled network off no connection no internet no network no wifi off offline on portable portable hotspot off portable wifi off service sharing off signal signal disabled signal off slash tethering disabled tethering off unavailable wifi wifi disabled wifi off wireless"},
+        {"name": "present_to_all", "tags": "all arrow audience broadcast conference content demonstrate display lecture meeting monitor present present content present display present screen present to all presentation project projector screen screen sharing seminar share share content share display share screen sharing show show content show display show screen site slides to video web webinar website"},
+        {"name": "print_disabled", "tags": "access denied action denied blocked cancelled cannot print denied device disabled document enabled forbidden graphic no action no print not printable off on output paper print print disabled print icon printer printer disabled printer icon printing forbidden printing restricted restricted restricted action slash symbol unavailable unavailable action vector"},
+        {"name": "qr_code", "tags": "2d barcode access barcode camera code computer connect contactless data matrix decode device digital code identification information link machine readable media mobile modern pattern payment product qr qr code quick quick response code read response scan scannable share smartphone square technology transaction url urls verification website"},
+        {"name": "qr_code_2", "tags": "2d barcode barcode business camera code connection contact data digital encoding identification information link machine readable marketing matrix code media mobile pattern payment product qr qr code quick quick response code reading response scan scanner sharing smartphone square square code technology url urls website"},
+        {"name": "qr_code_scanner", "tags": "access app application authentication barcode bars camera code corners data matrix digital information lines link matrix code media mobile optical code pattern payment phone product qr qr code quick quick response code reader rectangular response scan scanner smartphone square technology url urls website"},
+        {"name": "read_more", "tags": "add additional additional info arrow article augment button content control cross crosshairs details enlarge expand expand content extend extra info info information link more plus plus sign read read more show more text toggle view more"},
+        {"name": "ring_volume", "tags": "adjust alert audio bell call calling cell communication contact control decrease device filled glyph hardware incoming increase level loud mobile mute notification phone ring ringer setting shape silent solid sound speaker symbol telephone ui vibrate volume"},
+        {"name": "rss_feed", "tags": "antenna application arc atom blog broadcast channel circle communication connection content curve data distribution dot feed information internet network news online point pulsate radiate rss service signal streaming subscribe syndication updates waves web website wifi wireless"},
+        {"name": "rtt", "tags": "accessibility aid assistance button call chat closed captioning communication control conversation deaf direct feature hard of hearing hearing impaired icon keyboard live captions live text message option phone real real time relay rrt rtt setting speech to text symbol telephone text time typing"},
+        {"name": "screen_share", "tags": "Android OS arrow broadcast cast casting chrome collaboration computer connect connection desktop device display hardware iOS laptop mac meeting mirror monitor network online present presentation projection projection screen rectangular remote screen screen share share sharing showing stream streaming upward video web webinar window"},
+        {"name": "send_time_extension", "tags": "action add add time arrow button clock communication delay deliver dispatch email envelop extend extension future internet mail message paper plane plus plus sign postpone right arrow schedule send send button send later share submit time timer triangle watch web"},
+        {"name": "sentiment_satisfied_alt", "tags": "account alt cheerful circle emoji emoticon emotion expression eyes face feeling happy happy face human joy mood mouth people person positive profile satisfaction satisfied sentiment smile smiley smiley face smiling user"},
+        {"name": "sip", "tags": "VoIP alphabet audio call call call control character communication connect connection contact conversation dial dialer earpiece font handset incoming call initiation internet internet call letters line microphone network outgoing call over phone phone call protocol ring routing session signal sip softphone symbol talk telephone telephony text type voice voice call"},
+        {"name": "speaker_phone", "tags": "Android OS audio broadcast button call cell communication conference control device enable handsfree hardware iOS icon loud media mobile on options output phone settings shape signal sound speaker speakerphone symbol tablet talking toggle voice volume waves"},
+        {"name": "spoke", "tags": "access point broadcast center central point communicate connect connection connections directions disperse distribution emanating expand grow links network nodes outward points radial lines radiating radius rays share signal spoke spread star wheel wifi"},
+        {"name": "stay_current_landscape", "tags": "Android OS current device device display direction display display setting hardware horizontal iOS image landscape layout lock orientation media media controls mobile mobile device orientation phone photo photo viewer primary rectangle rectangle with rounded corners rotate screen stay tablet video video playback view viewing mode"},
+        {"name": "stay_current_portrait", "tags": "Android OS border call cell cellphone cellular chat communication current device display frame gadget handheld hardware iOS mobile orientation outline phone portable portrait rectangle rounded corners screen smartphone stay stroke tablet technology text vertical"},
+        {"name": "stay_primary_landscape", "tags": "Android OS current device device display direction display display setting hardware horizontal iOS image landscape layout lock orientation media media controls mobile mobile device orientation phone photo photo viewer primary rectangle rectangle with rounded corners rotate screen stay tablet video video playback view viewing mode"},
+        {"name": "stay_primary_portrait", "tags": "! Android OS alert attention bug caution critical danger device download error exclamation fix hardware hazard iOS important issue mark mobile notification patch phone portrait precaution problem protection screen secure security shield symbol system tablet threat triangle update vulnerability warning"},
+        {"name": "stop_screen_share", "tags": "Android OS application arrow cast chrome close collaboration computer conference content sharing desktop device diagonal line disabled display enabled end end share exit hardware iOS laptop mac meeting mirror monitor multimedia off offline on online communication presentation rectangle remote work screen share sharing slash software stop stop screen share stream streaming technology video call web window"},
+        {"name": "swap_calls", "tags": "arrow arrow up and down arrows bidirectional calls change direction communications connect connection device direction exchange invert linking mobile order phone rearrange reorder reverse share shift sort swap switch telephone toggle transfer transition two arrows up down arrows vertical arrows"},
+        {"name": "textsms", "tags": "alert bubble bubble icon chat chat bubble chat icon comment communicate communication communication icon contact conversation conversation icon dialogue direct message discuss dots feedback instant message message message icon new message notification send message sms sms icon speech speech bubble talk text icon text message textsms"},
+        {"name": "unsubscribe", "tags": "account action cancel circle close communication control cross data delete document email envelop information letters list mail management message newsletter notification off opt out paper preferences remove send service settings shape stop subscribe subscription symbol unsubscribe x"},
+        {"name": "voicemail", "tags": "alert alert icon audio audio message call circle circle with exclamation communication device exclamation point inbox listening mail message message icon missed mobile new notification notification icon phone play playback receive recording sound sound message telephone unread voice voice message voicemail"},
+        {"name": "vpn_key", "tags": "access authenticate authentication authorization authorize closed code connection data digital door encrypted encryption entry internet key lock login network passcode password privacy private protection safety secret secure security shield sign in technology unlock vpn"},
+        {"name": "vpn_key_off", "tags": "access account authentication blocked closed code connection credential data denied disabled disconnect door enabled entry internet key lock login network no access off offline on passcode password privacy private protected restricted security shield sign in slash unavailable unlock vpn"},
+        {"name": "wifi_calling", "tags": "arcs broadcast call calling cell cell service communication connect connection connectivity contact data device hardware internet internet calling lines mobile network phone phone call radial reception signal talk technology telecommunications telephone voice waves wifi wifi signal wireless wireless call"},
+    ],
+    "content": [
+        {"name": "add", "tags": "+ add addition append arithmetic attach combine create cross expand grow increase insert join mathematical symbol merge more new plus positive sum symbol total two lines"},
+        {"name": "add_box", "tags": "action add addition border box build button construct container content control create element empty feature form frame function geometric geometry insert item new new square object outline plus shape square stroke symbol"},
+        {"name": "add_circle", "tags": "+ action add add circle append button circle circle add circles command control counter create function hollow include increase input insert interactive join new option outline plus point selection stroke thin tool ui element unknown 3"},
+        {"name": "add_circle_outline", "tags": "+ action add add circle append button circle circle add circles command control create function hollow include increase input insert interactive join new option outline plus point selection stroke thin tool ui element unknown 3"},
+        {"name": "add_link", "tags": "add add link anchor associate attach build chain clip combine connect connection create cross form hyperlink internet join joint link link symbol merge network new plus plus symbol share social media symbol tie url web website"},
+        {"name": "archive", "tags": "archive archive box backup bin box categorize collection container data document file filing folder history inbox library mail manage memory organization organize past record rectangular repository retrieve save sort storage store symbol system"},
+        {"name": "attribution", "tags": "account attribute attribution author body cc circle community content copyright copywriter creative commons credit human icon intellectual property label legal letters license licensing marker media open source people permission person profile rights sharing source stamp symbol text usage user video youtube"},
+        {"name": "backspace", "tags": "arrow back backspace box button cancel character clear computer control correct delete edit editing entry erase form input input field keyboard left navigation pointed rectangular remove symbol text triangle typing ui undo ux"},
+        {"name": "ballot", "tags": "agreement ballot box bullet checklist choice choices consent democracy document election form governance items law legal list paper point political poll questionnaire register registration selection selections square survey task tasks vote voting"},
+        {"name": "biotech", "tags": "analysis beaker biology biotech chemical chemistry data development discovery dna experiment flask futuristic genetics healthcare innovation laboratory liquid medicine microscope molecular progress research science solution technology test tube"},
+        {"name": "block", "tags": "alert avoid ban block cancel circle close control diagonal disable disturb do not disturb entry exclude exit forbidden interrupt limit line mute no notification off preference prohibited quiet quit remove restricted setting silent slash state status stop unavailable"},
+        {"name": "bolt", "tags": "alert bolt charge current danger electric electricity energy fast flash graphic icon instant lightning power quick shape speed storm surge symbol thunderbolt urgent warning weather zap"},
+        {"name": "calculate", "tags": "+ - = addition arithmetic calculate calculator count counting digits division equals equation filled finance calculator geometry keypad line math math operations multiplication number pad numbers numpad object result shape solid subtraction sum symbol technology tool total"},
+        {"name": "change_circle", "tags": "alter around arrow arrows change circle circular cycle direction exchange flow loop modification movement navigation ongoing process progress refresh reload renew repeat replace rotate round status switch transition update"},
+        {"name": "clear", "tags": "abort action alert back cancel cancel button clear close confirmation correct cross delete delete button dialog close dismiss erase error exit exit button interface control modal close multiply notification remove remove item stop times warning window close x x mark"},
+        {"name": "content_copy", "tags": "action button command content control copy cut data doc document duplicate file files information interface layers multiple overlap page pages paper paste print printing productivity replicate save select sheets stack text tool utility"},
+        {"name": "content_cut", "tags": "action audio blade clip content copy craft cut divide doc document edit file media office paper paste remove scissors segment separate shape sharp snip text tool trim utensil video"},
+        {"name": "content_paste", "tags": "action add application attach button clip clipboard content control copy cut data doc document edit entry file fill form function insert memo multiple notes office paper paste productivity record report sheet text tool write"},
+        {"name": "content_paste_go", "tags": "action archive arrow box clipboard content copy data deliver disabled doc document duplicate enabled file folder go import information insert material design move on paper paste process rectangle right arrow send sheet slash square transfer workflow"},
+        {"name": "content_paste_off", "tags": "blocked cancel paste cannot paste clear clipboard content copy delete denied diagonal line disabled disabled paste doc document duplicate enabled file forbidden form insert no paste off on page paper paste paste off rectangle remove restricted sheet slash text unavailable unpaste"},
+        {"name": "content_paste_search", "tags": "action browse clipboard content data discover doc document examine explore file find function icon information investigate locate look for lookup magnify magnifying glass paper paste query reference research scan search symbol tool trace track utility"},
+        {"name": "copy_all", "tags": "all clone content copy copy all cut dash dashed data doc document documents duplicate file files layers multiple multiply page paper papers past replicate reproduce select all select content stack text"},
+        {"name": "create", "tags": "action alter author change compose control create document edit editing form glyph input mode mode_edit mode_edit_outline modify new outline pen pencil revise shape stroke text tool update write writing"},
+        {"name": "delete_sweep", "tags": "batch delete batch remove bin broom bulk delete bulk remove can clean clear clear all delete delete sweep discard disposal eliminate empty erase garbage mass delete mass remove multiple delete multiple remove obliterate permanently delete remove remove all sweep trash waste wipe"},
+        {"name": "deselect", "tags": "all blank box cancel checkbox choices clear delete deselect disable disabled empty enabled erase none null off on options outline remove reset selection slash square toggle off tool uncheck unchecked undo unmark untick void"},
+        {"name": "drafts", "tags": "archive communication composing creating data document draft drafts email envelope file folder holding inbox incomplete letters list mail memo message note paper pending read saved stack stationery storage text unfiled unfinished unsent writing"},
+        {"name": "dynamic_feed", "tags": "abstract activity articles blocks blog changing chronological content current data dynamic feed flowing information lines list live news posts publication recent rectangle square stories stream summaries timeline updates"},
+        {"name": "file_copy", "tags": "archive backup clone content copy create copy cut data doc document duplicate entry file form information make a copy memo multiple note page paperwork past paste print record record book report save a copy sheet stack text transcript version"},
+        {"name": "filter_list", "tags": "arrange bar bar graph bars categorize control criteria filter filtering horizontal lines list manage menu narrow options options menu organize preferences preferences menu refine settings settings menu sort sorting stacked three bars three lines"},
+        {"name": "filter_list_off", "tags": "alt bars choices clear control data disable disabled disabled filter display edit exclusion filter filtering inactive information lines list management menu not filtering off offline options organize preferences refine remove rows selection settings sift slash sorting toggle unfilter view"},
+        {"name": "flag", "tags": "achievement banner bookmark border country destination emoji empty flag flags goal highlight indicator label landmark location mark marker milepost milestone nation national notice outline pennant pin place pole report save signal social standard start territory unfilled world"},
+        {"name": "flag_circle", "tags": "circle country destination direction emblem filled finish line flag geography goal international location mark marker nation national navigation outline patriotism pinpoint place pointer position race region report round spot start symbol territory"},
+        {"name": "font_download", "tags": "A acquire action alphabet arrow button character classification document down arrow download file font get icon install letter letters obtain pointer retrieve square symbol text type typeface typography ui writing"},
+        {"name": "font_download_off", "tags": "access denied alphabet blocked cancel download character denied disabled disabled font download download download font download text download typography enabled font font download blocked font download off font download unavailable forbidden glyph glyph download off letter letter download off letters no access. no download not allowed off on restricted slash square stop download symbol text text download off type typography typography download disabled unavailable"},
+        {"name": "forward", "tags": "arrow communication content sharing forward forward icon google plus google plus share mail message playback reshare reshare icon right right arrow send send icon send to sent share share arrow share content share icon share link share post share to share with shortcut social icon social media social share"},
+        {"name": "gesture", "tags": "activate arrow click control cursor diagonal direction doodle down drag draw drawing engage finger flow gesture gestures hand interaction left line manipulate motion movement navigate path pointer right scribble select string swipe tap thread touch trail up"},
+        {"name": "how_to_reg", "tags": "accept access account add user approve authorization ballot check checkmark circle complete confirmed done election entry head how join mark member new user ok permission person poll profile register registration select shape shoulders sign up silhouette successful tick to reg user validate verified vote yes"},
+        {"name": "how_to_vote", "tags": "ballot ballot box ballot paper casting a vote check choice choosing civic duty deciding democracy election government hand hand with x mark how how to vote mark participation political poll polling station selection selection process survey to vote voting voting guide voting process x"},
+        {"name": "inbox", "tags": "archive arrival box category communication container correspondence email folder inbox inbox folder incoming letters mail mail folder message message box messages messages list new messages notifications receive receive mail storage tray unread"},
+        {"name": "insights", "tags": "ai analysis analytics analytics report artificial automatic automation bar bars business business intelligence chart circle custom data data visualization diagram financial analysis genai graph growth increase infographic information insights intelligence magic market data measure metrics overview performance performance data performance metrics progress report results smart spark sparkle star stars statistics statistics report summary tracking trend analysis trends up arrow"},
+        {"name": "inventory", "tags": "archive box boxes chain clipboard commerce container containers control crate crates distribution doc document e-commerce file goods inventory items logistics manage management organize package packages product products receive retail send shipping stack stacking stock storage supply warehouse"},
+        {"name": "inventory_2", "tags": "archive assets box boxes collection container count crate delivery file goods inventory items items. logistics management objects organize package packages product quantity resources shipping square stack stock storage supply three dimensional warehouse"},
+        {"name": "link", "tags": "anchor arrow attach attachment chain circle circular clip connect connection direction external global globe hyperlink international internet join line link linked links multimedia navigation network point reference round sphere url web website world www"},
+        {"name": "link_off", "tags": "attached broken chain broken connection broken hyperlink broken link broken link icon chain clip connection connection broken connection off disable hyperlink disable link disabled disconnect icon disconnect web link disconnected enabled hyperlink link link broken link disabled link icon link off link removed linked links multimedia off on remove hyperlink remove link remove web link slash unlink url web address web icon web link website"},
+        {"name": "low_priority", "tags": "arrange arrow arrow down backward bottom decrease priority demote down direction down priority downward arrow horizontal line less important line list low low priority lower priority minimum minimum priority minor move non-critical not urgent order priority queue ranking re-sort reorder sorting straight line task priority unimportant"},
+        {"name": "mail", "tags": "communication communication icon contact contact icon correspondence diagonal lines digital electronic mail email empty envelop envelope fold icon inbox inbox icon internet letter letters mail message message icon new message online outline paper receive rectangle send symbol thin line unread"},
+        {"name": "markunread", "tags": "communication communication icon contact contact icon correspondence diagonal lines digital electronic mail email empty envelop envelope fold icon inbox inbox icon internet letter letters mail markunread message message icon new message online outline paper receive rectangle send symbol thin line unread"},
+        {"name": "move_to_inbox", "tags": "archive arrow box communication container direction down email email client envelop filing folder forward inbox incoming into letters mail mailing message messages move move to organization place pointed read receive received relocate send sort storage transfer unread"},
+        {"name": "next_week", "tags": "agenda appointment arrow bag baggage box briefcase business button calendar case control date deadline diagonal line event forward future horizontal lines icon lines navigation next organize planning rectangle reminder schedule square suitcase symbol time week"},
+        {"name": "outlined_flag", "tags": "achievement banner bookmark border country empty flag goal highlight indicator label location mark marker milestone nation national notice outline outlined pennant pin report save signal standard start territory unfilled"},
+        {"name": "policy", "tags": "administration agreement certified checklist compliance conditions contract data declaration document ethics file find glass governance guidelines information law legal list look magnify magnifying management official paper policy privacy private protect protection regulation report rules search security see shield standards statement terms text verified"},
+        {"name": "push_pin", "tags": "attach board bulletin board communication cork board document fasten hold location marker memo metal note office paper pin place point pointer position push push pin reference remember reminder save sharp stationery stick tack thumbtack"},
+        {"name": "redo", "tags": "action application arrow backward button circular command control correction curve cycle document edit forward go again history next point redo repeat return reverse undo right rotate software symbol text editor turnaround undo user interface word processor"},
+        {"name": "remove", "tags": "bar basic can cancel clean clear close cut delete detach dissociate division eliminate erase essential exclude exit garbage horizontal line line minimal minus negative remove segment sever simple substract subtract trash unlink"},
+        {"name": "remove_circle", "tags": "alert ban block blocking can circle control dash delete disable notifications disabled do not disturb exclusion limitation line minus mute negative no notification off privacy quiet quiet mode remove restriction settings silent silent mode status stop substract trash turn off volume"},
+        {"name": "remove_circle_outline", "tags": "alert ban block blocking can circle control dash delete disable notifications disabled do not disturb exclusion limitation line minus mute negative no notification off outline privacy quiet quiet mode remove restriction settings silent silent mode status stop substract trash turn off volume"},
+        {"name": "reply", "tags": "arrow backward bubble chat chat box chat bubble comment communicate communication conversation dialogue direct message email feedback forward interaction left mail message message bubble messenger receive reply respond response send share social media speak speech square talk talk bubble text"},
+        {"name": "reply_all", "tags": "all answer arrow backward boomerang broadcast chat communication connect conversation correspondence curved arrow direction email everyone feedback forward group inbox inform interact left left arrow loop mail message multiple notify outbound reply reply all response return send share"},
+        {"name": "report", "tags": "! abuse alert attention caution complaint danger error exclamation feedback flag important issue mark notification octagon outline problem report send shape spam stroke submit symbol triangle warning"},
+        {"name": "report_gmailerrorred", "tags": "! abuse alert attention caution complaint danger error exclamation feedback flag gmail gmailerrorred important issue mark notification octagon outline problem report send shape spam stroke submit symbol triangle warning"},
+        {"name": "report_off", "tags": "! alert attention block blocked cancel cancelled caution danger deactivate deactivated disable disable report disabled enabled error exclamation important mark notification octagon off offline on remove removed report report blocked report deactivated report disabled report off report restricted reporting blocked reporting deactivated reporting disabled reporting off reporting restricted restrict restricted slash stop stopped symbol turn off turn off report warning"},
+        {"name": "save", "tags": "action backup button computer control data disk document drive file flat floppy function memory multimedia object old technology progress recording retro save save button save icon shape solid storage store tool vintage"},
+        {"name": "save_alt", "tags": "acquire action alt app application archive arrow bar button cloud computer control data disk document down download file floppy get incoming internet line move multimedia network obtain pointed receive save storage symbol transfer underscore"},
+        {"name": "save_as", "tags": "archive backup classic compose computer copy create data disk diskette document download draft drive duplicate edit editing export file floppy floppy disk information input multimedia new file office old paper pen pencil rectangle rename retro save save as square storage vintage write writing"},
+        {"name": "select_all", "tags": "all batch box bulk check choose collection collective complete comprehensive dash dashed everything full group highlight items list mark multiple options outline pick select select all selection square tool total"},
+        {"name": "send", "tags": "airplane arrow communicate communication deliver direction email flight fly forward mail message paper paper airplane plane point reply right right arrow send share submit triangle triangular"},
+        {"name": "shield", "tags": "access authorized certified confidential cyber security data security defense digital security encryption internet security lock network security online security permission privacy private protect protection safe safeguard safety secret secure secure connection security shield ssl tls verified vpn web security"},
+        {"name": "sort", "tags": "alphabetize arrangement arrows ascending bars categorization columns criteria data descending direction down arrow filter hierarchy lines list manage numeric options order organize preferences reorder rows sequence sort structure up arrow"},
+        {"name": "square_foot", "tags": "architecture area construction design diagram dimension feet floor plan foot geometry guide height inches layout length linear map mapping measure measurement plan property proportion real estate ruler scale school set size sketch space square square footage tools width"},
+        {"name": "stacked_bar_chart", "tags": "analysis analytics bar bar chart bars business chart chart-chart dashboard data data visualization diagram financial graph growth history infographic information measure metrics performance presentation progress report results results graph stacked stacked bars stacked graph statistics tracking trend visualization"},
+        {"name": "stream", "tags": "abstract broadcast cast communication connected connection current data stream digital dynamic energy feed flow internet lines liquid live live stream motion movement multiple lines network organic shape parallel lines real-time sequence signal stream technology transmission undulating lines water wave pattern waves wireless"},
+        {"name": "tag", "tags": "app banner bookmark button categorize classification corner diagonal document favorite file fold folded corner hash hashtag key label marker media note numbers organise page paper pound ribbon save shape slant social symbol tag trend triangle ui ui element web"},
+        {"name": "text_format", "tags": "align alignment alphabet article character characters content document edit editing file font format formatting letter letters lines paragraph plain text rich text square A style symbol text text editor type typeface typography word processor writing writing tools"},
+        {"name": "unarchive", "tags": "access action archive arrow box button command container data direction document extract file folder graphic icon inbox interface control item linear mail menu move up open folder option rectangle restore retrieve square storage store symbol unarchive undo up up arrow"},
+        {"name": "undo", "tags": "action application arc arrow back backward backwards cancel circle correct curve delete document editing editing erase fix history last mail mistake move previous prior program redo repeat return revert rotate software step text editing turn undo"},
+        {"name": "upcoming", "tags": "agenda alarm anticipation appointment calendar coming coming soon date events events list forecast forthcoming future future events horizon later later date list mail message new events next not yet notification pending plans preview schedule still to come timeline upcoming"},
+        {"name": "waves", "tags": "audio audio bars audio control audio icon audio level audio signal audio visualizer bar graph beach equalizer equalizer icon frequency lake level indicator lines media music music icon music player ocean pool river sea signal signal icon sound sound control sound level sound signal sound waves spectrum swim visualizer volume volume icon water wave waveform waves"},
+        {"name": "web_stories", "tags": "column communication content divide feed frames google images logo media multiple panels navigation next playback previous progress reel section segment separator sequence short video slideshow social media stories story timeline vertical video video view watching web web stories"},
+        {"name": "weekend", "tags": "bag baggage baggage claim briefcase buckle business trip carry-on chair container couch furniture handle holiday home journey leisure travel living lounge luggage overnight bag packed packing packing list rectangle relax room storage strap suitcase travel travel bag travel goods travel plans trip vacation vacation planning weekend weekender"},
+        {"name": "where_to_vote", "tags": "address approve ballot building check civic complete democracy destination direction discover done drop pin election election day find geo government gps location map marker maps mark marker navigate ok participation pin place pointer political poll polling polling place rights select stop tick to validate election verified vote voting where yes"},
+    ],
+    "device": [
+        {"name": "1x_mobiledata", "tags": "1x 1x signal alphabet cell signal cellular cellular data character connection status connectivity connectivity indicator data connection data technology data type digit font internet letters limited connectivity low speed mobile mobile data mobile internet mobile network mobiledata network network speed network status network type numbers phone reception signal slow connection speed symbol telecommunications text type wifi wireless wireless data wireless signal"},
+        {"name": "30fps", "tags": "30fps alphabet camera character digit film font fps frame rate frame rate setting frames letters media information media settings multimedia numbers playback quality recording resolution settings symbol text thirty fps thirty frames per second type video video capture video control video display video frame rate video information video options video playback quality video quality video settings video speed"},
+        {"name": "3g_mobiledata", "tags": "3g alphabet bandwidth bars broadband cellular character communication computer connection connectivity data device digit digital download font full bars high speed internet letters mobile mobile data mobiledata network numbers online phone signal speed strong signal symbol tablet technology telecommunications text transfer type upload wifi wireless"},
+        {"name": "4g_mobiledata", "tags": "4g alphabet bandwidth cellular cellular data character communication connection connectivity data digit edge font four g gprs high speed hspa indicator internet letters lte mobile mobile data mobiledata network network strength numbers phone signal speed status symbol telecommunication text type umts wifi wireless"},
+        {"name": "4g_plus_mobiledata", "tags": "4g 4g plus 4g+ advanced data alphabet carrier cell phone cellular cellular data character communication connection connectivity data connection data network data usage digit fast speed font internet letters mobile mobile data mobiledata network network speed network status numbers phone plus signal signal strength speed symbol technology telecommunications text type upgraded network wifi wireless wireless data"},
+        {"name": "60fps", "tags": "60fps camera capture cinema control definition digit display editing film fps frame rate frames high speed indicator label media number numbers numeric option performance playback production quality recording resolution settings smooth streaming symbol text video video quality"},
+        {"name": "access_alarm", "tags": "access adjust alarm alert appointment bell calendar circle clock control deadline future hands history indicator manage mark notification point reminder ring schedule setting sound time timer wake up watch"},
+        {"name": "access_alarms", "tags": "access adjust alarm alert appointment bell calendar circle clock control deadline future hands history indicator manage mark notification point reminder ring schedule setting sound time timer wake up watch"},
+        {"name": "access_time", "tags": "access alarm appointment calendar circle clock date deadline dial duration event future hands history hour hand measure minute hand notification past planning productivity query builder reminder schedule second hand stopwatch time timer watch watch later"},
+        {"name": "access_time_filled", "tags": "access alarm appointment calendar circle clock date deadline dial duration event future hands history hour hand measure minute hand notification past planning productivity query builder reminder schedule second hand stopwatch time timer watch watch later"},
+        {"name": "ad_units", "tags": "Android OS ad ad units advertising article banner block body body text cell cell phone communication content data device display email hardware iOS information lines marketing message message content mobile mobile text news notification notifications paragraph phone rectangles screen smartphone sms tablet text text message top units writing"},
+        {"name": "add_alarm", "tags": "add add alarm alarm alert app appointment audio bell clock create digital event mobile morning new alarm notification phone plus reminder ring schedule set setting sound task time timer wake up watch"},
+        {"name": "add_to_home_screen", "tags": "Android OS add add to add to homescreen app application arrow bookmark cell device diagonal export hardware home home screen homescreen homescreen add iOS install mobile phone phone screen pin plus right save screen send share shortcut tablet up upload website"},
+        {"name": "air", "tags": "abstract air atmospheric blowing breath breeze climate cooling current element environment environmental flow fragrance fresh heating hvac line lines motion movement quality scent smell stream swirl swoosh ventilation wave waves weather wind"},
+        {"name": "airplane_ticket", "tags": "admit air air ticket aircraft airplane airplane ticket airplanes airport boarding boarding pass booking document dotted line entry flight flight ticket flights fly flying identification journey maps paper pass perforations plane plane ticket planes rectangle reservation scan show signal stub tear line ticket transport transportation travel travel document trip vacation"},
+        {"name": "airplanemode_active", "tags": "active air air travel aircraft airplane airplane icon airplane mode airplanes airport communication off disable connectivity disable wireless enabled flight flight mode flights fly flying local airport mode network off on plane planes signal signal off transport transportation travel travel mode trip turn off radio vehicle"},
+        {"name": "airplanemode_inactive", "tags": "air aircraft airplane airplane mode airplanes airport aviation communications connectivity crossed out deactivated diagonal line disabled enabled flight flight mode flights fly flying inactive line maps mobile settings mode network off not active not enabled off offline on plane planes signal signal off slash transportation travel triangle trip wireless off"},
+        {"name": "aod", "tags": "Android OS abstract alert always always on display ambient display ambient mode aod clock communication device digital display electronics hardware homescreen iOS information line lock screen message minimalist mobile notification on phone rectangular screen simple smartphone tablet technology text time"},
+        {"name": "battery_0_bar", "tags": "alert bar battery cell charge critical device electric empty energy icon indicator laptop level low meter mobile phone power rectangle status tablet warning zero"},
+        {"name": "battery_1_bar", "tags": "1 bar 20 percent 20% bar battery cell charge charging computer device electrical empty energy full gauge horizontal indicator laptop level low meter mobile one bar phone power rectangle status twenty percent"},
+        {"name": "battery_2_bar", "tags": "2 bars 30 percent bar battery battery indicator battery level cell charge charge level device electrical energy fill gadget half indicator level low medium meter mobile percentage portable power power status rectangular segmented status thirty percent two bars"},
+        {"name": "battery_3_bar", "tags": "50% bar battery battery gauge battery icon battery indicator battery meter battery status cell charge charge status energy energy level fill gauge half indicator intermediate level medium meter middle mobile percentage power power icon power level power status remaining energy remaining power status three bars"},
+        {"name": "battery_4_bar", "tags": "60 almost full bar bars battery capacity cell charge circle device energy five bars four bars full indicator laptop level mobile percentage phone power rectangle remaining rounded rectangle six bars status tablet three bars"},
+        {"name": "battery_5_bar", "tags": "80% bars battery cell charge charging device electric electronic energy five bars five segments four fifths full gauge high level indicator level lines meter mobile notification icon percentage power rechargeable rectangle status status bar system icon vertical"},
+        {"name": "battery_6_bar", "tags": "90 almost full bar bars battery battery status cell charge charge level charged device electric energy energy level full full battery high high battery indicator level meter mobile nearly full nine ninety percentage power power level status zero"},
+        {"name": "battery_alert", "tags": "! alert attention battery caution cell charge critical danger device status energy error exclamation exclamation point important low battery mark mobile notification phone power status symbol system status triangle warning"},
+        {"name": "battery_charging_full", "tags": "battery bolt capacity cell charge charged charging charging up complete connection device electric electricity electronic energy full gadget indicator instant level lightning low mobile plugged in power power supply power up rectangle status symbol technology thunder thunderbolt"},
+        {"name": "battery_full", "tags": "bar battery battery icon battery level battery meter cell charge device device status electronic energy energy level full full battery full charge gadget indicator level max charge mobile percentage power power indicator power status rectangular signal standard battery status technology"},
+        {"name": "battery_saver", "tags": "+ add addition bar battery charge charging configuration conserve control device efficiency energy energy saving fill indicator level low power management mobile new options phone plus power power saving rectangle save saver settings smartphone status symbol technology"},
+        {"name": "battery_std", "tags": "bar battery battery icon battery level battery meter cell charge device device status electronic energy energy level full full battery full charge gadget indicator level max charge mobile percentage power power indicator power status rectangular signal standard battery status technology"},
+        {"name": "battery_unknown", "tags": "? assistance battery cell charge device electricity element energy graphic help icon indicator info information level mobile outline power punctuation query question mark rectangle status status bar support symbol system troubleshoot ui unavailable unknown unsure"},
+        {"name": "bloodtype", "tags": "abstract analysis blood blood type bloodtype donate donation droplet emergency health healthcare hospital icon information lab laboratory medical medical record medicine minimal negative patient positive profile report result shape symbol test type water"},
+        {"name": "bluetooth", "tags": "audio bluetooth cast communication connect connection connectivity data device electronic icon line mobile network pairing paring share signal streaming symbol technology transfer wireless zig-zag"},
+        {"name": "bluetooth_connected", "tags": "audio bluetooth bluetooth icon cast communication communication technology connect connected connected devices connection connection status data device discover discoverable electronic electronic device link link devices mobile network network connection paired pairing paring signal signal strength streaming symbol technology technology symbol wireless wireless connection"},
+        {"name": "bluetooth_disabled", "tags": "audio bluetooth cast communication connect connection connectivity cross data device diagonal line disabled disconnected electronics enabled icon line mobile network off offline on pairing paring peripheral signal slash streaming symbol technology unavailable wireless"},
+        {"name": "bluetooth_drive", "tags": "automobile bluetooth car cars cast communication computer connect connection connectivity data device digital drive electronic hard drive link logo maps media memory network pairing paring pc storage streaming symbol sync synchronize technology transfer transfer data transportation travel vehicle wireless"},
+        {"name": "bluetooth_searching", "tags": "audio bluetooth communication connecting connection connectivity data device discover find geometric lines link media network pairing paring scan search searching shape signal sound symbol technology transfer waves wireless"},
+        {"name": "brightness_auto", "tags": "A adjust adjustment ambient light auto auto adjust automatic automatic brightness brightness brightness auto control display display settings environment icon interface level light light control media mobile monitor phone screen screen brightness sensing sensor setting settings sparkle star sun symbol ui control"},
+        {"name": "brightness_high", "tags": "adjust adjustment auto beam brightness circle control display glow high illumination image intensity level light lines luminous maximum media mobile monitor multimedia phone picture radiant rays screen setting settings solar sun vibrant video visibility"},
+        {"name": "brightness_low", "tags": "adjust auto battery brightness brightness low circle control dark decrease dim display energy gear indicator less level light lines low minus mobile monitor phone power rays saver screen setting slider spokes star sun value"},
+        {"name": "brightness_medium", "tags": "adjustment auto brightness circle configuration control dial display glow illumination interface level light medium mobile monitor options phone radial rays screen setting sun visibility visual"},
+        {"name": "cable", "tags": "analog cable communication component connect connection connector cord data device digital electrical electricity electronic electronics hardware input line link network network cable optic output plug port power signal socket technology transfer transmit usb wire"},
+        {"name": "cameraswitch", "tags": "arrow arrows back camera camera camera switch camera toggle cameraswitch change camera circle circular arrows communication flip flip camera front camera mobile camera photo camera photography record rotate rotate camera selfie camera shoot swap switch switch camera two arrows video call video camera video chat videography view"},
+        {"name": "credit_score", "tags": "analysis approve assessment banking bill card cash check circle coin commerce complete cost credit credit score currency debt dial digits dollars done evaluation ficoscore finance financial gauge indicator level loan mark measurement meter money number numerical ok online pay payment performance personal finance progress ranking rating report score select summary symbol three digits tick validate verified yes"},
+        {"name": "dark_mode", "tags": "accessibility ambient app appearance application atmosphere bedtime circle comfort contrast crescent customization dark dark mode darkness device display element evening eye strain graphic interface low light mode moon night part personalization settings shape silent switch theme toggle ui ux view visual website"},
+        {"name": "data_saver_off", "tags": "analytics bar bars blocking canceled cellular chart configuration connectivity consumption data data saver off data saving data usage denied diagonal line diagram disabled donut graph infographic internet limit limitation measure metrics mobile data network off on options restricted ring saver setting slashed statistics strike through switch three lines toggle tracking usage"},
+        {"name": "data_saver_on", "tags": "+ active add analytics arrow bandwidth bandwidth saver chart circle connection conserve data data data saver data usage diagram direction enabled globe graph increase infographic internet limit data map measure metrics mobile data network network data new on plus polygon reduce data ring saver savings sphere statistics symbol tracking triangle up arrow world"},
+        {"name": "data_usage", "tags": "analytics blocking canceled cellular chart configuration connectivity consumption data data saver off data saving data usage denied diagonal line diagram disabled graph infographic internet limit limitation measure metrics mobile data network off options restricted setting slashed statistics strike through switch three lines toggle tracking usage"},
+        {"name": "dataset", "tags": "archive cloud collection columns data data entry data management database dataset digital digital data document electronic data entry file flat data grid information list management organized data record records rows server spreadsheet storage structured data table"},
+        {"name": "dataset_linked", "tags": "browser chain chain link connect connected connection data document external link file hyperlink internet link navigation network new tab online open outside redirect share sharing social media url web web link website window world wide web wwww"},
+        {"name": "developer_mode", "tags": "Android OS advanced settings angle bracket bracket cell code coding command line computer science developer developer mode developer options development device engineer engineering greater than hardware iOS it left bracket less than mobile mobile code mode phone programming right bracket settings smartphone software tablet technical technology terminal"},
+        {"name": "device_thermostat", "tags": "adjust automation celsius circle climate comfort control cooling device dial energy environment fahrenheit gauge heating home automation hvac indicator instrument lines measure meter monitor regulator settings smart home system temp temperature thermometer thermostat weather"},
+        {"name": "devices", "tags": "Android OS cast communication computer connect connection connectivity data transfer desktop device devices display hardware iOS laptop link mobile monitor multiple devices network phone remote control screen screen mirroring sharing smartphone streaming sync synchronize tablet technology transfer watch wearable web"},
+        {"name": "devices_fold", "tags": "Android OS cell closed computer dash dashed device display dual screen electronic expanding flexible fold foldable gadget hardware hinge iOS landscape laptop layout media mobile monitor open orientation panel phone portrait screen smartphone tablet technology transform unfold view"},
+        {"name": "do_not_disturb_on_total_silence", "tags": "alert ban bell blocked busy circle communication diagonal line disable disturb dnd do do not disturb line mobile mode mute no no sound not notification off on total phone prohibition quiet ring setting silence slash status stop toggle total silence unavailable"},
+        {"name": "dvr", "tags": "Android OS VCR archives audio box broadcast chrome circle computer desktop device digital display dots dvr electronic entertainment hardware home entertainment iOS library list live tv mac media monitor movie outline playback player program record recorder recording rectangle schedule screen series shape show television tv video web window"},
+        {"name": "e_mobiledata", "tags": "alphabet bars cell cell service cellular cellular data cellular network connection connectivity data data connectivity data signal e e network edge network font internet internet signal letters mobile mobile connectivity mobile data mobiledata network reception service signal strength telecom telecommunication telecommunications text type wireless wireless network"},
+        {"name": "edgesensor_high", "tags": "Android OS bar bars cell cell signal connection data device edge graphic hardware high iOS indicator level measurement mobile move network phone pie chart power reception sensitivity sensor signal status strength tablet technology telecommunications triangle vertical bars vibrate wi-fi"},
+        {"name": "edgesensor_low", "tags": "Android OS alert antenna bars cell cellular connection connectivity device edge hardware high iOS indicator lines low mobile move network phone poor reception rectangle rounded corners sensitivity sensor signal status strength tablet vibrate warning weak"},
+        {"name": "flashlight_off", "tags": "beam off brightness. button control dark deactivate device disabled electric enabled flash flashlight flashlight off icon illumination inactive lamp off light light off night off off state on outline portable light power off shape slash symbol toggle off tool torch off turn off ui element utility visibility"},
+        {"name": "flashlight_on", "tags": "activated beam bright button camping circle cone of light conical disabled discovery emergency enabled flash flashlight guidance handheld handle illuminated illumination light navigation off on outdoor portable ray round shine slash spotlight torch visibility"},
+        {"name": "fluorescent", "tags": "adjustments bright brightness camera effects electric electricity energy filter fluorescent gleam glow illumination image incandescent iridescent lamp light light bulb lightbulb lighting photo photography picture power settings shimmer sparkle tungsten wb white balance"},
+        {"name": "fmd_bad", "tags": "! address problem alert attention bad bad location bad map bad pin caution coordinate problem danger destination direction dropped pin error error exclamation finding location issue fmd geocode error geolocation issue gps error important location location bad location error location services problem map bad map error map pin error maps mark marker bad marker error navigation issue notification pin pin bad pin error pinpoint error pinpoint problem place place error point of interest error symbol warning"},
+        {"name": "fmd_good", "tags": "address area cartography destination direction directions find fmd geo geographic good gps landmark locale locate location map maps marker navigation pin pinpoint place point position region setting site spatial spot stop vicinity wayfinding whereabouts zone"},
+        {"name": "g_mobiledata", "tags": "alphabet bars cell service cellular character communication connection connectivity data digital dots download font g g_mobiledata internet letters lines mobile mobile data mobile internet mobile network network network strength reception service signal speed symbol technology telecommunications text tower transfer triangle type upload wireless wireless data"},
+        {"name": "gpp_bad", "tags": "access denied alert bad blocked cancel certified close cross danger denied error exit failed failure forbidden gpp invalid no no entry not allowed privacy private protect protection reject remove restricted safety security shield sim stop unauthorized verified warning x"},
+        {"name": "gpp_good", "tags": "badge certified check complete confirmation data endorsed excellent exemption good gpp guard ok pass positive privacy protected protection quality safety security shield sim success tick trust user valid validation verification verified"},
+        {"name": "gpp_maybe", "tags": "! alert attention authenticate authentication caution certified check danger doubt error exclamation gpp help important inquiry integrity mark maybe not sure notification privacy private protect protection query question mark questionable risk safe security shield sim status symbol threat uncertain uncertain security unknown unsafe unsure validation verified verify warning"},
+        {"name": "gps_fixed", "tags": "accuracy center crosshair current location destination direction explore find fixed focus geo-locate gps locate location map maps marker my location navigate navigate to pin pinpoint place pointer position satellite spot stop target tracking whereabouts"},
+        {"name": "gps_not_fixed", "tags": "acquire acquiring coordinates current location destination direction disabled enabled finding gps locate location map maps navigate navigation not fixed off on online pin pinpoint place pointer pointing position radar scan scanning search searching searching signal signal slash target tracking"},
+        {"name": "gps_off", "tags": "access denied alert blocked circle cross deny destination diagonal line direction disabled enabled error forbidden geolocation gps gps off location location disabled lost map maps marker navigation no signal not fixed not found off offline on pinpoint place pointer positioning prohibition restricted satellite slash tracking unavailable warning"},
+        {"name": "graphic_eq", "tags": "audio audio analysis audio control audio customization audio effect audio icon audio mixer audio settings audio spectrum audio tuning audio visualization bar graph detect detection eq equalization equalizer equalizer bars frequency bands graphic graphic equalizer media player music music icon music player music settings noise recording sound sound adjustment sound analysis sound customization sound effect sound icon sound levels sound mixer sound tuning sound waves vertical bars voice volume control"},
+        {"name": "grid_3x3", "tags": "3 3x3 grid album view area arrange blocks cells dashboard display gallery view grid layout line matrix menu nine blocks nine cells nine squares organize presentation section segments settings space squares structure table thumbnail view view"},
+        {"name": "grid_4x4", "tags": "4 4x4 arrangement block by cells collection columns component data design display distribution element formatting four by four grid grouping layout lines matrix order organization pattern rows section segment space squares structure system table unit view"},
+        {"name": "grid_goldenratio", "tags": "aesthetic alignment arrangement art balance composition composition guide design fibonacci frame golden golden ratio goldenratio grid guide harmony layout layout guide lines mathematical overlay photography proportion ratio rectangle rule of thirds space spiral squares structure symmetry visual"},
+        {"name": "h_mobiledata", "tags": "4g alphabet alphanumeric cellular cellular connection cellular data character communication connection connectivity data data network font h h symbol h+ high speed data internet internet connection letter h letters mobile mobile internet mobile network mobile signal network phone service signal symbol telephone text type typography wireless wireless data"},
+        {"name": "h_plus_mobiledata", "tags": "+ 3g 4g access alphabet broadband cellular cellular data character connection connectivity data font h h plus h+ high speed hplus indicator internet internet access letters mobile mobile data mobile internet mobile network modem network plus service signal speed status symbol technology telecommunications text type wifi wireless"},
+        {"name": "hdr_auto", "tags": "A adjustment alphabet auto automatic button camera character circle control dynamic enhancement feature font hdr high high dynamic range image letters mode option photo photography picture quality range setting switch symbol text toggle type"},
+        {"name": "hdr_auto_select", "tags": "+ A adjustment alphabet auto automatic button camera character circle contrast detail dynamic enhancement exposure font glyph graphic hdr high high dynamic range icon image quality letters multimedia option photo photo editing photography range select setting switch symbol technology text toggle type ui element video editing videography"},
+        {"name": "hdr_off_select", "tags": "alphabet border camera cancel character circle control disabled dynamic effect enabled enhancement filter font hdr hdr off high high dynamic range off image inactive letters mode no hdr off on option outline photo photography picture range rectangle select selection setting slash square symbol text three characters three letters toggle type"},
+        {"name": "hdr_on_select", "tags": "+ alphabet bright button camera character cinema circle contrast control dark dynamic enhanced feature film font graphic hdr high high dynamic range image letters mode on option photo photography picture processing quality range select setting switch symbol text tone mapping type video video editing"},
+        {"name": "lan", "tags": "access business communication communications computer computers connected connection connections data desktop device devices document documents file files folder folders internet lan local area network network networking office server servers service sharing transfer work"},
+        {"name": "lens_blur", "tags": "abstract aperture artistic effect blur bokeh camera camera lens circle circular blur circular shape depth of field dim dot effect filter focus foggy fuzzy image image adjustment image effect lens lens blur lens effect optical effect out of focus photo photo editing photo filter photography photography tool radiating lines radiating pattern soft edges soft focus soften unfocused visual effect visual filter"},
+        {"name": "light_mode", "tags": "adjustment appearance application bright brightness celestial body circle clear day daytime device display illumination interface light light mode lighting lines mode morning option preference radial setting sky star sun sun rays sunny switch theme toggle visibility"},
+        {"name": "location_disabled", "tags": "access denied alert blocked circle cross deny destination diagonal line direction disabled enabled error forbidden geolocation gps off location location disabled lost map maps marker navigation no signal not found off on pin pinpoint place pointer positioning prohibition restricted satellite slash stop tracking unavailable warning"},
+        {"name": "location_searching", "tags": "acquire acquiring coordinates current location destination direction finding gps locate location map maps navigate navigation not fixed pin pinpoint place pointer pointing position radar scan scanning search searching searching signal signal stop target tracking"},
+        {"name": "lte_mobiledata", "tags": "access alphabet bar bars broadband cellular character communications connection data font high speed indicator internet label letter letters level lte mobile mobiledata network online signal speed status strength symbol technology telecommunications text type typography wifi wireless"},
+        {"name": "lte_plus_mobiledata", "tags": "+ alphabet cell character characters communication connection data font icon indicator internet letter letters lte mobile network plus quality sign signal speed status strength symbol text type wifi wireless"},
+        {"name": "macro_off", "tags": "camera camera off camera settings circle close-up off controls deactivate detailed view off diagonal line disable disabled editing tools effect off enabled feature off filter off fine detail off flower focus off garden image image editing lens off macro macro off magnification off off offline on photography off photography tools slash small object off strike through switch off toggle off zoom off"},
+        {"name": "media_bluetooth_off", "tags": "audio bluetooth communication connect connection connection off connectivity cross data device devices diagonal disabled disconnected enabled line link media music network note off offline on pairing pairing mode paring share signal signal off slash strikethrough symbol technology technology off transfer unpaired wireless wireless off"},
+        {"name": "media_bluetooth_on", "tags": "active audio bluetooth communication computer connect connected connection connectivity device disabled electronic enabled link media mobile music network note off on online paired pairing paring phone power on signal slash sound state status symbol technology turn on wireless"},
+        {"name": "medication", "tags": "capsule doctor drug drug icon emergency health healthcare healthcare icon healthcare item hospital medical medical icon medical treatment medication medication icon medicine medicine icon pharmaceutical pharmacy pharmacy icon pill pill icon pills prescription tablet treatment treatment and cure treatment icon wellness"},
+        {"name": "medication_liquid", "tags": "+ bottle container cough syrup cure doctor dosage drop drug flask glass health healthcare hospital illness liquid liquid medication medical medication medications medicine oval pharmacy prescription remedy science sickness spoon syrup treatment vessel vial"},
+        {"name": "mobile_friendly", "tags": "Android OS approve approved cell check checkmark complete device display done friendly good hardware iOS icon mark mobile mobile check mobile phone ok phone protection safe screen secure security security update select smartphone success symbol system system update tablet technology tick ui update validate validated verified yes"},
+        {"name": "mobile_off", "tags": "Android OS access airplane mode barred cell cell off communication crossed out deactivated device diagonal line disabled disconnected do not disturb electronics enabled forbidden gadget hardware iOS line mobile mobile off mute network no ring off on phone phone off portable restricted signal silence silent slash tablet technology unavailable"},
+        {"name": "mobiledata_off", "tags": "arrow cellular cellular connection off cellular data off cellular network off connection lost connectivity off cross data data disabled data disconnected data usage diagonal line disabled disconnection down enabled internet internet off line mobile mobile data off mobile network off network network disconnected network off network status no connection no data no internet off offline on phone signal off slash speed triangle up wifi wireless"},
+        {"name": "mode_night", "tags": "adjust adjustment brightness contrast control crescent dark dim display disturb icon interface light lunar mode moon night screen setting sleep switch symbol theme toggle ui element view visibility visual"},
+        {"name": "mode_standby", "tags": "button control control element device disturb electronics energy saver energy saving icon idle inactive interface mode mode standby on/off pause power power button power off power on sleep standby standby mode stop suspend switch symbol system system control target toggle ui element"},
+        {"name": "monitor_heart", "tags": "baseline cardiogram care computer device diagnostics digital health display doctor ecc ecg ekg electronics fitness health health check health data health monitoring health status healthcare heart heartbeat hospital life medical medical device monitor patient pulse screen technology track vital signs wellness"},
+        {"name": "monitor_weight", "tags": "accuracy analysis balance body body composition body weight calibration check data device diet digital scale fitness health impedance kilogram measure measurement medical monitor monitoring pound precision progress reading report scale smart smart scale track weight wellness"},
+        {"name": "nearby_error", "tags": "! alert attention caution communication connection danger detection error exclamation failure geometry important indication issue location mark message nearby network notification pinpoint point problem proximity range shape signal status symbol triangle trouble warning"},
+        {"name": "nearby_off", "tags": "area circle close connected off connection cross out detection disabled discover off dot enabled inactive line location off marker near nearby nearby off not active not connected off offline on point proximity off range off scanner off searching off signal slash slashed unavailable vicinity"},
+        {"name": "network_cell", "tags": "bars cell cellular communications connection connectivity data full signal increasing signal indicator internet level mobile network phone pyramid reception signal speed stacked status stepped strength strong signal telecommunications tiered triangle wifi wireless"},
+        {"name": "network_wifi", "tags": "access antenna arcs available bars broadcast cell cellular communication computer connection connectivity curves data device hotspot indicator internet internet access mobile network offline online phone private wifi public wifi radio signal speed status strength technology waves wifi wireless"},
+        {"name": "network_wifi_1_bar", "tags": "access point antenna bar cell cellular communication communication link connection connectivity connectivity status data internet less strength limited connectivity low signal low signal strength low strength mobile network network status one bar phone radio waves signal signal indicator single bar speed strength transmission weak signal wifi wifi network wifi symbol wireless wireless network"},
+        {"name": "network_wifi_2_bar", "tags": "access point antenna arc bars broadcast cell cellular communication connection connectivity data hot spot internet limited signal mobile network partial signal phone radio waves receive signal speed strength technology transmit two bars wave weak signal wifi wireless wlan"},
+        {"name": "network_wifi_3_bar", "tags": "access antenna arc bars cell cellular communication connected connection connectivity curved data full indicator information internet level mobile modem network online phone router signal speed status strength symbol technology three bars waves wifi wireless"},
+        {"name": "nfc", "tags": "access button communication connect contactless data device element field graphic icon interaction logo mobile near near field communication network nfc option payment phone radio setting share signal symbol tap technology transfer transmit waves wireless"},
+        {"name": "nightlight", "tags": "astronomy bedtime brightness celestial circle crescent dark display disturb filled graphic icon light mode moon night nightlight round setting shape sky sleep star stars symbol theme toggle view"},
+        {"name": "note_alt", "tags": "alt article clipboard compose content copy create cut diagonal line document draft edit editor file line mark memo message modify note page paper paste pen pencil record rectangle square text write writing"},
+        {"name": "password", "tags": "access access code account authentication authorization code credentials data protection encrypted key key symbol keyhole lock lock and key login padlock password password protection pin privacy private protection restricted secret secure secure access secure connection security sign in sign up star unlock"},
+        {"name": "pattern", "tags": "abstract appearance arrangement background background design composition decoration decorative element design element fill fill pattern geometric graphic graphic element grid key login look look and feel motif password pattern pin repeat repeat pattern security shape square star style texture tiling unlock visual visual appearance visual style"},
+        {"name": "phishing", "tags": "alert attack block caution crime cyber security cybercrime danger digital email exclamation fish fishing flag fraud hook internet security malware network online safety phishing protection report scam security shield spam threat triangle virus vulnerability warning web security"},
+        {"name": "pin", "tags": "1 2 3 address cartography destination digit directional drop pin favorite location find geo geography geotag gps here key location login logout map marker mapping marker navigation numbers password pattern pin place point of interest pointer position pushpin saved location security spatial star symbol tracking travel unlock where"},
+        {"name": "play_lesson", "tags": "academic audio book bookmark button class continue course digital ebook education guide learning lecture lesson lesson continue lesson playback lesson start media module multimedia play play lesson playback read reading resume ribbon school start teaching training triangle tutorial video"},
+        {"name": "price_change", "tags": "analysis arrow arrows bill card cash change chart coin commerce cost credit currency data decline decrease diagram dollars down down arrow fall finance financial graph growth increase market money online pay payment price price change report rise shopping statistics stats stock stocks symbol trend trending up up arrow value"},
+        {"name": "price_check", "tags": "approve barcode scanner bill card cash check check price coin commerce compare price complete cost credit currency deal discount dollars done finance inquiry label lookup mark money offer ok online pay payment price price check purchase retail sale savings scan scan price scanner search price select shopping symbol tag tick transaction validate value verified yes"},
+        {"name": "punch_clock", "tags": "attendance attendance tracking business clock clock in clock out date employee tracking hours labor labor tracking office punch punch clock punch in punch out punching record time records schedule time time clock time record time sheet time tracking timekeeping timer timesheet timestamp tracking work hours work log workplace"},
+        {"name": "quiz", "tags": "? academic answer assessment assistance box brain challenge checkmark choices education evaluation exam faq form game help info information knowledge learning list options punctuation question question mark questionnaire quiz result school score selection square study support survey symbol test thinking trivia"},
+        {"name": "r_mobiledata", "tags": "alphabet bars cell cellular cellular data character communication connection connectivity data device font geometric icon internet letters line mobile mobile data network phone r reception signal strength symbol text three lines type ui element user interface wifi bars wireless"},
+        {"name": "radar", "tags": "area broadcast circle cone detect detection discovery expanding lines location military monitor near network ping position proximity pulse radar radiating radius range reach scan scope search sensor signal surveillance sweep target tracking transmission wave"},
+        {"name": "remember_me", "tags": "Android OS account authentication avatar boolean checkbox checked checkmark device form hardware human iOS identity keep me signed in login me mobile option people persistent login person phone preferences profile remember remember login remember me remember password remember settings remember user select selection session settings stay logged in tablet toggle user user account"},
+        {"name": "reset_tv", "tags": "arrow arrows back button circle circular arrow control cycle device display electronics entertainment hardware loop media monitor option rectangle refresh reload reset restart restore reverse rounded rectangle screen setting square technology television tv undo video"},
+        {"name": "restart_alt", "tags": "action alt around arrow circle circular arrow control curved arrow cycling data data flow inprogress load loading refresh loop process process flow reboot redo refresh refresh data reload reload data renew repeat reset restart resync resynchronize rotate rotation sync synchronize system undo update"},
+        {"name": "reviews", "tags": "approve attempt best bubble chat comment communicate evaluation excellence favorite feedback gold star grade highlighted important marked message preferred premium quality rank ranking rate rating recommendation recommended review reviews score special speech star top try trying valued"},
+        {"name": "rsvp", "tags": "accept accepted acknowledged affirmed agree alphabet attendance attended attending box character check checkbox complete confirm confirmation confirmed done event font invitation invite letters mark pla\u00eet replied reply respond response rsvp r\u00e9pondez select sil success symbol text true type validated vous yes"},
+        {"name": "screen_lock_landscape", "tags": "Android OS access device device lock display hardware horizontal iOS landscape lock locked mobile mobile lock orientation orientation lock padlock phone privacy private protection rectangle restricted rotate rotation safety screen screen lock secured security sign symbol tablet technology unlock"},
+        {"name": "screen_lock_portrait", "tags": "Android OS access access control authentication cell cell phone connection control device erase hardware iOS lock locked mobile password phone phonelink pin portrait privacy private protect protection restricted restriction safety screen screen lock secure secure device security smartphone tablet unlock"},
+        {"name": "screen_lock_rotation", "tags": "Android OS access accessibility arrow circle clockwise control counter-clockwise curved device diagonal display hardware iOS landscape lock locked mobile option orientation phone portrait privacy protected restricted rotate rotation screen security setting tablet turn unlocked"},
+        {"name": "screen_rotation", "tags": "Android OS adjust arrow arrows circle circular clockwise control counter clockwise device directional display hardware iOS landscape mobile movement orientation phone portrait rotate rotation round screen settings switch tablet toggle turn view"},
+        {"name": "screen_search_desktop", "tags": "Android OS application arrow browser computer desktop device digital discover display electronic explore find glass hardware iOS information lens lines lock look magnify magnifying glass monitor program rectangle rotate screen screen search desktop search square technology web website window zoom"},
+        {"name": "screenshot", "tags": "Android OS app application art camera capture cell computer crop desktop device digital display electronic flat glyph graphic hardware iOS image laptop media mobile monitor outline phone photo picture screen screenshot shot symbol tablet technology window"},
+        {"name": "screenshot_monitor", "tags": "Android OS application camera capture chrome computer desktop device digital display electronic grab hardware iOS image mac media monitor photo picture print screen program record rectangle screen screengrab screenshot snapshot technology ui video web website window"},
+        {"name": "sd_storage", "tags": "angled corner camera card computer data data storage device digital digital media documents electronic electronics external storage file management file storage information loading media memory memory card micro sd multimedia music storage photo storage portable storage removable storage saving sd sd card secure square storage technology transfer trapezoid video storage"},
+        {"name": "security_update", "tags": "Android OS app app install app promo arrow device down down arrow download download app hardware iOS install install app install mobile marketing mobile mobile download phone phone download promotion security security update software software update system system update system upgrade tablet update upgrade"},
+        {"name": "security_update_good", "tags": "Android OS approve approved cell check checkmark complete device display done friendly good hardware iOS icon mark mobile mobile check mobile phone ok phone protection safe screen secure security security update select smartphone success symbol system system update tablet technology tick ui update validate validated verified yes"},
+        {"name": "security_update_warning", "tags": "! Android OS alert attention bug caution critical danger device download error exclamation fix hardware hazard iOS important issue mark mobile notification patch phone portrait precaution problem protection screen secure security shield symbol system tablet threat triangle update vulnerability warning"},
+        {"name": "sell", "tags": "bargain bill card cart cash coin commerce coupon credit currency deal discount dollars label market money offer online pay payment pointed shape price promotion retail sale sell shape shop shopping special offer store tag tag shape voucher"},
+        {"name": "send_to_mobile", "tags": "Android OS abstract action arrow cellular communication connect data transfer device direction export forward hardware iOS line mobile move navigation open open in phone open link open on device phone pointer push to device redirect right send send to mobile share smartphone symbol tablet technology to transfer"},
+        {"name": "settings_suggest", "tags": "adjust administration advise ai artificial assist asterisk automatic automation change cog configuration control counsel custom customize details gear genai guidance guide help hint intelligence magic management offering options panel personalize preferences proposal recommendation recommendations service settings setup smart spark sparkle star suggest suggestion system tips tune"},
+        {"name": "settings_system_daydream", "tags": "adjustment backup cloud configuration control daydream device digital display drive electronic electronics equipment experience futuristic goggles headset immersive interface element monitor options preferences screen settings setup storage system tech technology viewing virtual reality vr"},
+        {"name": "share_location", "tags": "broadcast location communication connect coordinate dash dashed destination direction distribution geographic geospatial geotag global positioning system gps link live location location location marker location sharing map pin maps marker navigation network pin pinpoint place pointer position satellite send location share share location stop tracking transmit location"},
+        {"name": "shortcut", "tags": "arrow communication content sharing direction forward forward icon google plus google plus share reshare reshare icon right right arrow send send icon send to share share arrow share content share icon share link share post share to share with shortcut social icon social media social share"},
+        {"name": "signal_cellular_0_bar", "tags": "0 0 bars antenna bad signal bar bars bars indicator cell cellular cellular network cellular signal connection connectivity data internet low signal mobile network network strength no signal phone signal signal strength speed status status indicator strength telecommunication towers wifi wireless wireless network wireless signal zero bars"},
+        {"name": "signal_cellular_4_bar", "tags": "0 bar bars bars increasing cell cellular communication connection connectivity data four bars full full signal indicator internet mobile mobile data network network connection network status phone reception signal speed status strength strength indicator technology telecommunications wifi wireless"},
+        {"name": "signal_cellular_alt", "tags": "alt analytics ascending bars bar bars cell cellular chart communication connection connectivity data device diagram full signal good signal graph indicator infographic internet level measure measurement metrics mobile mobile network network phone reception signal signal strength statistics status strength technology telecommunication tracking vertical bars wifi wireless"},
+        {"name": "signal_cellular_alt_1_bar", "tags": "1 bar alt analytics antenna bar bars cell cell signal cellular chart communication connection connectivity coverage data diagram graph indicator infographic internet level low signal measure metrics mobile mobile signal network one bar phone reception signal signal strength statistics status strength telecommunications tracking wifi wireless"},
+        {"name": "signal_cellular_alt_2_bar", "tags": "alt analytics bar bars bars up cell cellular chart communication connection connectivity data diagram full graph half strength increasing bars indicator infographic internet level measure medium strength metrics mobile network phone reception signal statistics status strength tracking two bars waves wifi wireless"},
+        {"name": "signal_cellular_connected_no_internet_0_bar", "tags": "! 0 0 bars alert attention bar bars caution cell cellular communication connected connection connectivity danger data device disconnected error exclamation important indicator internet low signal mark mobile network no no internet notification phone pyramid signal status symbol triangle unavailable warning wifi wireless zero bars"},
+        {"name": "signal_cellular_connected_no_internet_4_bar", "tags": "! 4 4 bars alert attention bar bars caution cell cellular connected connection connectivity danger data disconnection error exclamation four bars full signal important indicator internet level limited connectivity mark mobile mobile data network no no access no internet notification offline phone problem service signal signal strength status symbol warning wifi wireless"},
+        {"name": "signal_cellular_no_sim", "tags": "absent alert bar bars camera card cellular chip communication connection cross device diagonal line disabled empty enabled error line lines memory missing mobile network no no service no signal no sim not inserted off offline on phone signal sim sim card slash slot storage triangle unavailable warning"},
+        {"name": "signal_cellular_nodata", "tags": "antenna ascending bars cell cellular clear communication connection data descending disconnected error internet level mobile network no nodata offline phone power quit reception remove service signal status status bar strength technology triangle unavailable warning wifi wireless x"},
+        {"name": "signal_cellular_null", "tags": "alert bars cell cellular communication connection connectivity data diagonal line disabled error indicator internet line mobile network no service no signal null offline phone signal signal strength status triangle unavailable warning wifi wireless"},
+        {"name": "signal_cellular_off", "tags": "antenna bars cell cellular communication communication status connection data deactivated disabled disconnected enabled indicator internet mobile mobile data mobile status network network status no cellular no connection no network no service no signal off offline on phone phone signal service signal signal bars slash status unavailable unavailable signal wifi wireless"},
+        {"name": "signal_wifi_0_bar", "tags": "0 access arc bar cell cellular communication connection connectivity connectivity status data disconnected indicator internet internet access internet signal mobile network network icon network status no connection no service no signal offline phone signal status bar symbol technology waves weak signal wifi wifi icon wireless wireless network zero bars"},
+        {"name": "signal_wifi_4_bar", "tags": "4 available bar bars cell cellular communication connected connection connection quality connectivity data four bars full indicator internet max mobile network online phone service signal signal strength. status status bar strength system waves wifi wireless"},
+        {"name": "signal_wifi_4_bar_lock", "tags": "4 access authentication bar bars cell cellular connect connection connectivity data encrypted four bars full signal internet lock locked maximum signal mobile network network access. password phone privacy private protected protection safe safety secure security signal strength wifi wireless"},
+        {"name": "signal_wifi_bad", "tags": "access arc bad bar bars cancel cell cellular clear close communication cone connect connection data disconnected error exit hotspot icon internet issue lines mobile network no outage phone problem quit radiating remove signal stop symbol technology triangle unconnected waves wifi wireless x"},
+        {"name": "signal_wifi_connected_no_internet_4", "tags": "4 access arc bad bars cell cellular communication cone connect connected connection data disconnected error hotspot icon internet issue lines mobile network no offline outage phone problem radiating signal symbol technology triangle unconnected waves wifi wireless x"},
+        {"name": "signal_wifi_off", "tags": "alert antenna arcs bars cell cellular communication connection off connection symbol data diagonal line disabled disconnect disconnected enabled error indicator internet internet off internet symbol mobile network network off network symbol no wifi not connected off offline on phone problem signal signal symbol slash speed status unavailable warning wifi wifi off wifi symbol wireless wireless off wireless symbol"},
+        {"name": "signal_wifi_statusbar_null", "tags": "access arc bar cell cellular communication connection connectivity curve data device disconnected empty indicator internet level mobile network no signal none null offline phone signal speed status statusbar technology unavailable wave wifi wireless zero"},
+        {"name": "sim_card_download", "tags": "arrow button camera card cellular chip communication connection data device down down arrow download element get icon import install memory mobile network phone receive rectangle rounded rectangle save sim sim card storage symbol transfer"},
+        {"name": "splitscreen", "tags": "arrangement arrangement of elements column display divide dual screen grid horizontal split interface layout layout monitor multi-window multiple windows multitasking organization pane panels presentation productivity row screen screen layout sections separate side by side spaces split split screen splitscreen user interface view vertical split view view options window workspace"},
+        {"name": "sports_score", "tags": "athletics competition destination display final score flag game game score goal live score match number numbers points result results score score board scoreboard sport competition sport results sport scores sport stats sports sports score statistics stats tally team score"},
+        {"name": "ssid_chart", "tags": "analysis analytics bars chart communication connection connectivity data diagram graph information internet lines measurement network performance progress report signal ssid statistics status strength trend visual wifi wireless"},
+        {"name": "storage", "tags": "archive backup boxes capacity cloud computer computing data database digital disk documents drive files hard drive horizontal information layers lines memory rectangle save server server rack space square stack storage technology vertical"},
+        {"name": "storm", "tags": "abstract alert angular bad weather bolt climate crackle danger electrical storm electricity energy flash forecast hurricane jagged line lightning nature pointy power severe weather sky storm strike temperature thunder twister warning weather wind zig zag"},
+        {"name": "summarize", "tags": "arrows aspect ratio button control corners corners out display doc document enlarge expand form four arrows fullscreen growth image in increase list magnify maximize media menu mode note out presentation report scale size square summary toggle video view viewer window zoom in"},
+        {"name": "system_security_update", "tags": "Android OS app app install app promo arrow cell device down down arrow download download app hardware iOS install install app install mobile marketing mobile mobile download phone phone download promotion security security update software software update system system update system upgrade tablet update upgrade"},
+        {"name": "system_security_update_good", "tags": "Android OS approve approved cell check checkmark complete device display done friendly good hardware iOS icon mark mobile mobile check mobile phone ok phone protection safe screen secure security security update select smartphone success symbol system system update tablet technology tick ui update validate validated verified yes"},
+        {"name": "system_security_update_warning", "tags": "! Android OS alert attention bug caution cell critical danger device error exclamation fix hardware hazard iOS important issue mark mobile notification patch phone portrait precaution problem protection screen secure security shield symbol system tablet threat triangle update vulnerability warning"},
+        {"name": "task", "tags": "accepted agenda approve assignment box check check box checklist checkmark complete confirmed data doc document done drive file folder folders list management mark memo note notification ok organize page paper plan productivity progress project reminder schedule select sheet slide square task tick to do validate verified workflow writing yes"},
+        {"name": "thermostat", "tags": "adjustment automation climate control cool cooling device energy environmental control forecast gauge heat heating home automation hvac measure meter monitor regulate setting smart home temperature temperature setting thermometer thermostat utility weather"},
+        {"name": "timer_10_select", "tags": "10 adjustment alphabet analog camera character circle clock control countdown digit digital duration font letters measure number numbers option outline preference seconds select setting stop symbol ten text time timer type"},
+        {"name": "timer_3_select", "tags": "3 alphabet camera character choose chronometer circle clock control count countdown delay digit duration feature font function interval letters measurement number numbers option radial round seconds select setting stopwatch symbol text three time timer tool type utility"},
+        {"name": "tungsten", "tags": "adjustments balance bright brightness camera edit editing effects electric electricity energy filter fluorescent gleam glow illumination image incandescent indoor iridescent lamp light light bulb lightbulb lighting photo photography picture power setting settings shimmer sparkle tungsten wb white white balance wp"},
+        {"name": "usb", "tags": "accessory cable computer connection connector data data transfer device drive electronics external device flash drive geometric hardware icon interface line memory peripheral plug plug in port simple stick storage symbol technology transfer universal serial bus usb wire"},
+        {"name": "usb_off", "tags": "block cable computing connection cross out data transfer device diagonal line disabled disallowed disconnected eject forbidden inactive no connection not active off port remove device safely remove slash stop strike through technology unavailable universal serial bus unplug usb usb off wire"},
+        {"name": "wallpaper", "tags": "abstract background clouds customize dash dashed display graphic hills horizon icon illustration image landscape mountains natural nature outdoors pattern personalize photo photography picture scene scenery screen settings sky sun theme view wallpaper"},
+        {"name": "water", "tags": "abstract aqua basic beach clean drip drop droplet element environment fluid humidity hydration lake liquid minimal moisture natural ocean outline purify rain refresh river shape simple single drop symbol tear tear drop water water drop waves weather wet wetness"},
+        {"name": "widgets", "tags": "add app arrange blocks box boxes components customize dashboard display elements grid layout menu modules mosaic options organize panels personalize rearrange rectangles remove sections setting settings squares ui view widgets"},
+        {"name": "wifi_1_bar", "tags": "1 1 bar arc bar bars broadcast cell cellular communication computer connection connectivity curved data device icon internet low signal mobile network one bar phone radio reception scan service signal status strength symbol technology wave weak signal wifi wireless"},
+        {"name": "wifi_2_bar", "tags": "2 access bar bars bars indicator cell cellular communication connection connection status connectivity data digital indicator internet internet access internet status level mobile network network status partial signal phone scan service signal signal strength status strength technology two bars weak signal wifi wifi signal wireless wireless network"},
+        {"name": "wifi_calling_3", "tags": "3 audio calling cell cellular communication connection connectivity data device digital indicator internet level mobile network phone signal speed status symbol technology telephone telephony three lines voice waves wifi wireless"},
+        {"name": "wifi_channel", "tags": "adjust arc arcs broadcast cellular channel communication configure connection connectivity curved lines data frequency full signal increasing signal internet line lines mobile network network channel scan service setting signal spectrum strong signal technology three lines wave waves wifi wifi channel wireless wireless channel"},
+        {"name": "wifi_find", "tags": "access point antenna arc arch bars broadcast cellular communications connection curved lines data detect discover dots find hotspot internet locate look magnifying glass mobile network notice points radio rays scan search service signal technology waves wifi wireless"},
+        {"name": "wifi_lock", "tags": "access authentication bars cellular connect connection connectivity data encrypted four bars full signal internet lock locked maximum signal mobile network network access. password privacy private protected protection safe safety secure security service signal strength wifi wireless"},
+        {"name": "wifi_password", "tags": "access access code authentication authorization cellular connect connection connectivity credentials data encryption internet internet access key lock login mobile network network security passcode password privacy private network protection scan secure secure network security service signal unlock wifi wifi signal wireless wireless network wireless security"},
+        {"name": "wifi_tethering", "tags": "access point cell cellular cellular data connection connectivity data data share hotspot internet internet access internet connection link mobile mobile network network personal hotspot phone phone connection phone hotspot portable hotspot portable wifi scan service share sharing internet signal speed tethering wifi wifi share wireless wireless network"},
+        {"name": "wifi_tethering_error", "tags": "! alert attention broken caution cell cellular communication connection danger data device devices disconnected error exclamation failure hotspot icon important interface internet interrupted issue mark mobile network notification phone problem rounded scan service share sharing signal speed symbol tethering unavailable warning wifi wireless"},
+        {"name": "wifi_tethering_off", "tags": "cell cellular connection connection disabled connection off crossed out data data off disabled disconnected enabled hotspot off internet internet off line mobile mobile hotspot off network network disabled network off no connection no internet no network no wifi off offline on phone portable hotspot off portable wifi off scan service sharing off signal signal disabled signal off slash speed tethering tethering disabled tethering off unavailable wifi wifi disabled wifi off wireless"},
+    ],
+    "editor": [
+        {"name": "add_chart", "tags": "+ add analysis analytics bar bar chart bars business chart create dashboard data diagram financial graph growth increase infographic information insert line graph measure metric metrics new performance plus presentation report representation statistics symbol tracking trend visual"},
+        {"name": "add_comment", "tags": "+ add annotation append bubble chat comment communicate communication conversation create dialog discourse discuss feedback include input insert join message new note notetaking plus reply response social speech speech bubble symbol talk text writing"},
+        {"name": "align_horizontal_center", "tags": "align alignment arrange bars center content data design distribution document editor format formatting grid horizontal layout lines organize paragraph placement positioning rectangle rule rules shape structure style text word processor"},
+        {"name": "align_horizontal_left", "tags": "align align horizontal align left alignment arrange arrange elements bars direction document document alignment document layout editor format format text horizontal horizontal align justified layout left left align lines order organize paragraph position position text rule rules spacing style text text align"},
+        {"name": "align_horizontal_right", "tags": "adjustment align alignment arrange bars content document document editing editor format formatting options horizontal indent layout lines order paragraph parallel position rectangle right rule rules spacing style text text tools typography word processing writing"},
+        {"name": "align_vertical_bottom", "tags": "align alignment arrange bar bottom creative distribute document document editor editor file format formatting graphic design layout line lines page paragraph position presentation rectangle rule rules style text three bars three lines vertical word processor"},
+        {"name": "align_vertical_center", "tags": "align alignment arrangement blocks center centered columns content distribute document editor evenly format formatting grid layout lines middle paragraph position rows rule rules spacing style text typography vertical writing"},
+        {"name": "align_vertical_top", "tags": "adjust align alignment arrange bar bars control design distribute document edit editor format formatting graphic grid layout lines objects order organize paragraph parallel position presentation rectangle rule rules sort style text three lines top ui element vertical"},
+        {"name": "area_chart", "tags": "analysis analytics area area chart area filled area graph business chart chart filled dashboard data diagram filled area financial graph growth infographic information line graph measure measurement metric metrics performance plot presentation progress progress chart report shaded area statistics tracking trend visual data"},
+        {"name": "attach_file", "tags": "add add file append attach attach file attachment clip connect content data document document link email attachment fasten file file connection file link link mail media multimedia office paper clip paperclip paperclip symbol secure send file share file shared file upload upload file"},
+        {"name": "attach_money", "tags": "add money amount attach banking bill business buy card cash circle coin commerce connect cost credit currency dollar sign dollars economy exchange finance financial funds income investment link monetization money on online pay payment price profit purchase revenue sell shopping symbol transaction value wealth"},
+        {"name": "auto_graph", "tags": "analysis analytics auto auto graph automated automatic business chart dashboard data data representation decline diagram economics finance graph growth infographic information line line graph measure metrics performance plot presentation progress report stars statistics tracking trend visualization"},
+        {"name": "bar_chart", "tags": "analysis analytics bar bar chart bars business chart columns dashboard data data analysis diagram finance financial data graph growth growth icon infographic information measure metrics performance progress quantitative report report icon statistics statistics icon tracking trends visual representation visualization"},
+        {"name": "border_all", "tags": "all area arrange border boundary box cells complete container content data display divide doc edit editing editor element entire full grid layout lines matrix multiple organize outline rectangles section separate sheet spreadsheet squares stroke structure table text type view writing"},
+        {"name": "border_bottom", "tags": "add border apply border border border bottom border style bottom bottom edge bottom line cell border dash dashed delete border divider doc edit editing editor element border formatting horizontal line layout line below page border remove border row border separator sheet spreadsheet stroke style table border table formatting text text border text decoration text formatting type underline writing"},
+        {"name": "border_clear", "tags": "border border clear border none borderless box cancel clear clear border dash dashed delete design doc edit editing editor element erase formatting frame geometry layout line no border object outline rectangle remove remove border remove frame remove line remove outline shape sheet spreadsheet square stroke style text type writing"},
+        {"name": "border_color", "tags": "adjust all art border border color change color colour customize design diagonal doc draw edit editing editor format graphic line modify outline pen pencil pointed rectangle shape sheet sketch spreadsheet square stroke style text tool type write writing"},
+        {"name": "border_horizontal", "tags": "UI element border boundary content break dash dashed delineation design element divide divider division doc document break edit editing editor element formatting graphic element horizontal horizontal border horizontal line hr layout layout control line line break outline rule rule line section break segment separator sheet spreadsheet stroke text text formatting type visual separation writing"},
+        {"name": "border_inner", "tags": "alignment area border border inner boundary box cells columns content dash dashed define divisions doc edit editing editor frame grid inner inside layout lines organize rectangular rows section separate sheet spreadsheet square stroke structure table text type writing"},
+        {"name": "border_left", "tags": "align left alignment border border left boundary column dash dashed doc document edge edit editing editor formatting grid guide indentation layout left line margin paragraph publishing rule sheet side sidebar spreadsheet stroke structure text text align type web design writing"},
+        {"name": "border_outer", "tags": "area border border outer boundaries box cell container content dash dashed design doc document edge edit editing editor element focus format frame graphic grid layout lines outer outline page perimeter rectangle selection shape sheet spreadsheet square stroke structure style table text type writing"},
+        {"name": "border_right", "tags": "alignment border border right boundary box dash dashed design doc document edge edit editing editor element format frame geometry grid layout line margin outline paragraph right right border right edge shape sheet spreadsheet square stroke styling table text thin line type visual writing"},
+        {"name": "border_style", "tags": "appearance border boundary box cell color container dash dashed design doc document dotted edge edit editing editor element formatting frame graphic graphic design layout line outline paragraph shape sheet solid spreadsheet stroke style table text thickness type ui element web design weight writing"},
+        {"name": "border_top", "tags": "above border border top boundary cell component dash dashed divider division doc edge edit editing editor element formatting frame grid horizontal line layout line line segment outline paragraph rule rule line section segment separator sheet spreadsheet stroke table text text editor thick line top top line type visual aid writing"},
+        {"name": "border_vertical", "tags": "alignment border boundaries column column break columns dash dashed divide divide vertically doc edges edit editing editor formatting frame grid layout lines organize outline pane panel parallel lines rule section separation separator sheet split split vertically spreadsheet stroke structure text two lines type vertical vertical border vertical lines writing"},
+        {"name": "bubble_chart", "tags": "analysis analytics bar bars bubble bubble chart business intelligence chart circles comparison dashboard data diagram dots education finance graph infographic information measure measurements metrics points presentation progress reporting research results scale scatter plot science statistics summary tracking trends visualization"},
+        {"name": "candlestick_chart", "tags": "analysis analytics bar graph bars business candlestick chart chart bars data data visualization diagram economic analysis economics economy finance financial graph growth infographic investment investment chart line chart market measure metrics report statistics stock analysis stock data stock market tracking trading trading chart trend"},
+        {"name": "checklist", "tags": "align alignment approve check check marks checked checklist checkmark complete completed doc done edit editing editor entries finished format item items line lines list list items mark notes ok organization planning productivity project management select sheet spreadsheet square squares task task list text tick tick mark tick marks ticks to do list type validate verified writing yes"},
+        {"name": "checklist_rtl", "tags": "align alignment approve bullet points check checklist complete content list data doc document done edit editing editor entries form format horizontal lines information items lined list list management mark notes numbered list ok order organization plan planning progress report right-to-left rtl select sequence sheet spreadsheet survey tasks text tick to-do type validate verified writing yes"},
+        {"name": "data_array", "tags": "array block brackets code coder coding collection computer data data structure developer development digital document file grouping hierarchy information it list organization parentheses programming script software square brackets structure syntax technical technology"},
+        {"name": "data_object", "tags": "access analytics brackets categorize cloud code coder columns computing data data object database dataset digital document engineering file filter information management network object organization organize parentheses query record retrieve rows science server sort storage structure table technology"},
+        {"name": "drag_handle", "tags": "action app application ui bars components control design drag element grip handle handle. indicator interactive interface item layout lines list list item menu move parallel rearrange reorder reordering screen site sort sortable three lines ui ux vertical web website widget window"},
+        {"name": "draw", "tags": "art artist compose crayon create creative curve design doodle dot draft draw edit editing form freehand graphic hand drawn illustration ink input line marker modify outline pen pencil point scribble shape sketch tool write writing"},
+        {"name": "edit_note", "tags": "changes compose compose note corrections create create document create note document draft edit edit document edit file edit text editing editor file input lines memo modify new new document note notepad paper pen pencil revision text write writing writing tool"},
+        {"name": "format_align_center", "tags": "align align horizontal align middle alignment center centered centered alignment centered text doc document document editing edit editing editor equal lines format formatting horizontal justify middle paragraph paragraph alignment sheet spreadsheet symmetric lines text text format type word processing writing"},
+        {"name": "format_align_justify", "tags": "adjust align alignment arrange blocks of text content density doc document document format edit editing editor extra format formatting options four lines full align justify layout left align line breaks lines paragraph paragraphs right align sheet small spreadsheet text text alignment text editor text style three lines type typing word writing writing tool"},
+        {"name": "format_align_left", "tags": "align align document align left alignment doc document alignment document editor edit editing editor format format text formatting justify left left left align left justified lines lines of text organize text paragraph alignment sheet spreadsheet text text alignment text block text editor text formatting three lines type uneven lines word processing writing writing editor"},
+        {"name": "format_align_right", "tags": "adjust text align align right alignment doc document editor edit editing editor format justified right justify right lines multi-line paragraph paragraph align right right align right aligned right justified sheet spreadsheet text text alignment text editor text format text justify text layout type typography word processor writing"},
+        {"name": "format_bold", "tags": "B alphabet b bold character content doc document edit editing editor font format heavy input interface letter letters paragraph rich text sheet spreadsheet style styles symbol symbols text thick type typography weight word writing"},
+        {"name": "format_clear", "tags": "T alphabet brush character clean clear delete disabled doc document document cleaning document editor document tools edit editing editor editor tools enabled erase font format formatting letters line off on paint brush paragraph remove reset sheet slash spreadsheet style style cleaner style removal symbol text text cleaning text formatting text tools type typography writing"},
+        {"name": "format_color_fill", "tags": "alter apply area art background background color bucket change color design doc drawing drop edit editing editor fill fill color font format graphics liquid modify paint paint bucket palette pouring select shape sheet spill spreadsheet style text tool type writing"},
+        {"name": "format_color_reset", "tags": "and angled line art choose color circle clear clear color color color picker color swatch default color disabled doc document drawing drop droplet dropper edit editing editor enabled eyedropper fill format graphic design initial color liquid off on original color paint photo editing pipette remove color reset reset color sample select color sheet slash spreadsheet style text type water writing"},
+        {"name": "format_color_text", "tags": "ab abc brush change color color doc document document editor edit editing editor fill font font style format formatting letter letter t paint palette rich text select color sheet spreadsheet style t symbol text text color text style type typography word processing writing"},
+        {"name": "format_indent_decrease", "tags": "align alignment alignment control decrease decrease indent decrease indentation doc document control document editor document formatting edit editing editing tools editor format format text formatting options indent indent decrease indentation layout control left alignment lines paragraph paragraph style sheet spreadsheet style text text alignment text block text control text editor text format text formatting text layout text lines type typography word processor writing writing assistant writing tools"},
+        {"name": "format_indent_increase", "tags": "align alignment block quote content creation doc document formatting document layout edit editing editor format formatting control increase increase indent indent indent right indentation layout lines of text move right nested text paragraph paragraph formatting paragraph layout paragraph styling sheet spacing spreadsheet text text adjustment text alignment text block text control text display text editing text formatting text indent text styling type visual hierarchy word processing writing"},
+        {"name": "format_italic", "tags": "a abc adjust alphabet angle angled b bold c character doc document edit editing editor emphasize font format formatting italic leaning letter letters sheet slant slant right spreadsheet strikethrough style symbol text type typeface typography underline words writing"},
+        {"name": "format_line_spacing", "tags": "adjust spacing align alignment arrows decrease spacing doc document document editing down arrow edit editing editor format formatting increase spacing layout line line spacing lines paragraph spacing sheet spacing spreadsheet text text block text spacing type typography typography control up arrow vertical spacing word processing writing"},
+        {"name": "format_list_bulleted", "tags": "align alignment arrangement bullet points bulleted bullets checklist circles content doc document dots edit editing editor editor tools enumeration format format options formatting horizontal lines items lines list list icon menu notes ordered list organization points sheet spreadsheet structure text text editing text format type typography unordered list writing"},
+        {"name": "format_list_numbered", "tags": "align alignment arrangement bullet points digit doc document edit editing editor enumeration format format options formatting indent items layout lines list notes numbered numbered list numbering numbering style numbers order ordered items ordered list organizing outline paragraph points sequence sequence order sheet spreadsheet structure symbol text type writing"},
+        {"name": "format_list_numbered_rtl", "tags": "align alignment arabic bulleted list content digit digits doc document edit editing editor form format formatting hebrew language lines list list number notes number numbered numbered list numbering numbers order organization right to left rtl sequence sheet spreadsheet structure symbol text text editing three lines type writing"},
+        {"name": "format_paint", "tags": "adjust adjustment art artist brush bucket color coloring creative creativity decorate decoration design doc drawing edit editing editor fill fill color format formatting hue paint paint bucket painting palette roller shade sheet spreadsheet style text tint tools type writing"},
+        {"name": "format_quote", "tags": "block quote citation citation format closing quote comment content dialogue doc document double quotes edit editing editor editorial format format quote opening quote paragraph punctuation quotation quotation mark quote quote marks quote symbol reference sheet speech spreadsheet text text formatting type typography writing"},
+        {"name": "format_shapes", "tags": "align alphabet arrange character circle color customize design doc edit editing editor element fill font form format format shapes geometric geometry graphic insert layout letters modify organize paint pattern polygon settings shape shapes sheet spreadsheet square structure style symbol text tools triangle type ui ux vector visual writing"},
+        {"name": "format_size", "tags": "a a alphabet alphabet size big a little a character character size color content doc document document format document scale edit editing editor enlarge fill font font size format formatting options letter size letters paint paragraph resize scale sheet shrink size size control spreadsheet style symbol text text formatting text scale text size text styling type typography uppercase lowercase word processing writing zoom"},
+        {"name": "format_strikethrough", "tags": "alphabet cancel character cross out crossed crossed out delete doc document edit edit text editing editor font format format text formatting option horizontal line letters line line through text marking remove sheet spreadsheet strikethrough strikethru style symbol text text decoration through type typography visual formatting word processing writing"},
+        {"name": "format_textdirection_l_to_r", "tags": "align alignment bidirectional text direction doc document document editing edit editing editor format formatting tools language layout left to right ltr paragraph paragraph direction right to left rtl sheet spreadsheet text text alignment text control text editor text formatting text layout text options textdirection type typography word processing writing writing direction"},
+        {"name": "format_textdirection_r_to_l", "tags": "align alignment alignment direction bidirectional bidirectional text content direction doc document edit editing editor flow format formatting horizontal internationalization justify language layout left to right localization ltr paragraph reading right to left rtl script sheet spreadsheet text text alignment textdirection type typography word processing writing writing mode"},
+        {"name": "format_underlined", "tags": "alphabet character decoration doc document edit editing editor emphasis font format horizontal line letter u letters line sheet spreadsheet style styling symbol text text editing text formatting type u under underline underlined underscore word processor writing writing tool"},
+        {"name": "functions", "tags": "adjustments administration algorithms automation average calculate capabilities cogwheels configuration controls count custom customization data doc edit editing editor engineering features functions gears management math mechanisms operations options parameters preferences processing settings setup sheet spreadsheet style sum system text tools type writing"},
+        {"name": "height", "tags": "arrow calibration color dimension dimension tool doc double ended arrow down edit editing editor extend fill format height length length measurement line segment lines marking measure measurement tool paint ruler scale scale indicator sheet size size indicator size tool spreadsheet straight line style tall text ticks type up vertical vertical dimension vertical measurement writing"},
+        {"name": "hexagon", "tags": "adjust configuration defense filled futuristic gears geometry hexagon modern outline polygon protection secure security settings shape shield six sides six-sided solid technology"},
+        {"name": "highlight", "tags": "accent annotate annotation attention color curve doc document document editor drawing edit editing editor emphasize emphasizing fill flash focus format formatting highlight important ink light line marker marker pen note paint pen review select selection shape sheet spreadsheet style text tool type underline write writing yellow"},
+        {"name": "horizontal_distribute", "tags": "align alignment application arrangement arrows bar button diagram distribute editing editor elements equal even format formatting graphic design horizontal layout lines objects order organize paragraph position rectangles rule rules software space spacing style text tool"},
+        {"name": "horizontal_rule", "tags": "basic boundary content separator divide divider element gap geometry gmail horizontal line line break novitas partition rule section section break separator shape simple spacing split visual break"},
+        {"name": "insert_chart", "tags": "add analysis analytics assessment bar bar chart bars business chart columns create data diagram finance graph growth infographic insert manage measure metrics options performance poll progress report representation results statistics survey tracking visualize"},
+        {"name": "insert_chart_outlined", "tags": "add analysis analytics assessment bar bar chart bars business chart columns create data diagram finance graph growth infographic insert manage measure metrics options outlined performance poll progress report representation results statistics survey tracking visualize"},
+        {"name": "insert_comment", "tags": "add add comment balloon bubble chat comment communication conversation create create comment dialogue discussion feedback insert message new new comment plus rectangle reply respond speech square square bubble talk text text bubble write comment"},
+        {"name": "insert_drive_file", "tags": "add file article blank document blank page content create document data digital document digital file doc document document icon draft drive empty file file file icon form format information insert new file note office file page paper record report sheet slide text"},
+        {"name": "insert_emoticon", "tags": "account add character chat cheerful circle communication emoji emoticon emotion expression face feeling grin happy human insert joy message mood outline people person profile reaction round select sentiment smile smiley symbol tag text user"},
+        {"name": "insert_invitation", "tags": "add add event add invitation add to calendar agenda appointment booking calendar daily date day event insert insert invitation invitation invite mark meeting month monthly new event new invitation organizing planning plus range remember reminder reservation schedule schedule event square time today week weekly"},
+        {"name": "insert_link", "tags": "add anchor arrow attach attachment chain circle circular clip connect connection direction external file global globe hyperlink insert international internet join line link mail media navigation network point reference round sphere url web website world www"},
+        {"name": "insert_page_break", "tags": "break content break dash dashed dashed line divide divider doc document document formatting document layout file formatting formatting break horizontal divider horizontal line insert insert break layout line line divider new page page page break paper row section break separation split text text division text editing writing"},
+        {"name": "insert_photo", "tags": "add adjust album art border collection crop edit embed files frame gallery graphic illustration image insert landscape media mountain mountains nature original photo photography picture rectangle square sun sunrise sunset upload"},
+        {"name": "line_axis", "tags": "accuracy analytics axis chart coordinate system coordinates dash data diagram engineering graph grid gridline horizontal line math mathematics measurement plot plotting precision quantitative quantitative data ruler scale science statistics stroke technical vertical visual data visualization x axis y axis"},
+        {"name": "linear_scale", "tags": "adjust adjustment app application calibrate components configuration control degree design dots extent gauge horizontal horizontal line indicator interface layout level line linear linear scale markers measure measurement menu options points progress range ruler scale screen set settings site slider ticks ui ux value web website window"},
+        {"name": "margin", "tags": "adjust adjust text alignment border boundaries box contract decrease design document dots edge expand format increase indent layout line lines margin measurement options padding paragraph properties rule settings size spacing square text text settings"},
+        {"name": "merge_type", "tags": "arrow arrows branch combine combine branches combine content combine data combine documents connect connection connection points data diagram direction flow fork format join join points junction lines link link branches merge merge content merge data merge documents merge type organization points process relationship structure text type visual workflow"},
+        {"name": "mode", "tags": "action alter author change compose control create document draft draw edit form glyph input mode mode_edit mode_edit_outline modify outline pen pencil revise shape stroke text tool update write writing"},
+        {"name": "mode_comment", "tags": "balloon bubble cartoon chat chat bubble comic comment comment bubble communicate communication communication mode conversation conversation mode dialog dialogue discussion feedback graphic icon instant message message mode mode comment online chat pointer rectangular rounded corner speak speech speech bubble symbol talk text thought bubble triangle"},
+        {"name": "mode_edit", "tags": "action alter author change compose control create document draft draw edit form glyph input mode mode_edit mode_edit_outline modify outline pen pencil revise shape stroke text tool update write writing"},
+        {"name": "mode_edit_outline", "tags": "action alter author change compose control create document draft draw edit form glyph input mode mode_edit mode_edit_outline modify outline pen pencil revise shape stroke text tool update write writing"},
+        {"name": "monetization_on", "tags": "activate active arrows beginning bill business card cash circle coin commerce cost credit currency cyclical dollar dollars earn enabled finance financial income initiate monetization money on ongoing online pay payment recurring revenue shopping start symbol trade transaction"},
+        {"name": "money_off", "tags": "bill blocked card cart cash cheap circle coin commerce cost credit cross currency debt denied diagonal line disabled discount dollars enabled expense forbidden free funds invalid loss money no cash no money off on online outline paid pay payment price rejected shopping slash symbol unavailable zero"},
+        {"name": "money_off_csred", "tags": "bill blocked card cart cash cheap circle coin commerce cost credit cross csred currency debt denied diagonal line disabled discount dollars enabled expense forbidden free funds invalid loss money no cash no money off on online outline paid pay payment price rejected shopping slash symbol unavailable zero"},
+        {"name": "move_down", "tags": "action arrow arrow down arrow head basic button command control direction down downwards essential geometric indicator interface jump line move move down movement navigate down navigation pointer pointing down scroll scroll down shape simple symbol transfer ui element"},
+        {"name": "move_up", "tags": "arrow arrow head ascend direction elevate go to top increase indicator jump line move navigate up navigation point pointer position raise relocate rise scroll shift top transfer triangular up upward"},
+        {"name": "multiline_chart", "tags": "analysis analytics axis bar bars business chart coordinate system data diagram graph graph paper grid growth infographic information line line chart measure metrics multiline chart multiple multiple lines performance plot progress reporting representation statistics tracking trend visualization x-axis y-axis"},
+        {"name": "notes", "tags": "basic comment data diary doc document essential file information journal lines list memo message note notepad notes page paper record rectangle reminder simple square text write writing"},
+        {"name": "numbers", "tags": "active bullet busy button choice circle complete control digit dot empty filled full geometry inactive incomplete indicator loading marker numbers off option point radio button round selected selection shape solid status symbol toggle unchecked"},
+        {"name": "padding", "tags": "adjust alignment arrangement arrows boundaries box composition control design direction document dots edges edit formatting layout lines margin margins offset options padding presentation rectangle settings size space spacing square structure text visual"},
+        {"name": "pentagon", "tags": "abstract angled basic clean concept element facet filled five point five sides five-sided form geometric graphic icon illustration line art minimal modern object outline pentagon polygon shape sharp simple solid structure symbol symmetrical vector"},
+        {"name": "pie_chart", "tags": "analysis analytics bar bars business chart circle comparison data diagram division economics finance graph growth infographic information insights marketing measure metrics overview percentage pie pie chart progress reports results sales segment slice statistics summary tracking visualization"},
+        {"name": "pie_chart_outline", "tags": "analysis analytics bar bars business chart circle comparison data diagram division economics finance graph growth infographic information insights marketing measure metrics outline overview percentage pie pie chart progress reports results sales segment slice statistics summary tracking visualization"},
+        {"name": "polyline", "tags": "chart compose connect connected connection create data design diagram draw drawing form geometry graph graphic illustration line lines node outline path plot points polyline representation segment segments shape sketch vector visual wireframe"},
+        {"name": "post_add", "tags": "+ add add new add post adding content article blog compose compose new content create create new create post data doc document drive entry file folder folders message new new post notes page paper plus post post add publish publish new publishing sheet slide social media text write writing"},
+        {"name": "publish", "tags": "arrow arrow up cloud cloud upload data data transfer disseminate distribute document document upload export file file transfer import internet network online post public publish release send send to cloud share transfer up upload upload arrow upload file upload to cloud"},
+        {"name": "query_stats", "tags": "analysis analytics chart circle dashboard data diagram examine explore find glass graph infographic information insights investigate line look magnify magnifying magnifying glass measure measurement metrics monitoring performance query reporting research results review search see statistics stats tracking trends"},
+        {"name": "rectangle", "tags": "basic shape blank border box container contour diagram drawing element empty enclosed space form four sides frame fundamental form fundamental shape geometric shape geometry illustration outline outline shape parallelograms placeholder polygons quadrilaterals recangle rectangle shape simple solid line square stroke two dimensional visual aid visual element"},
+        {"name": "scatter_plot", "tags": "analysis analysis icon analytics bar bars chart chart icon circles comparison coordinate system correlation data data icon diagram distribution dot dots graph graph icon infographic mathematics measure metrics pattern plot plotting points relationship report research scatter scatter plot science spread statistics statistics icon tracking trend visualization x-axis y-axis"},
+        {"name": "schema", "tags": "analytics architecture blueprint boxes chart conceptual connections data database diagram flow flowchart graph grid hierarchy infographic layout links logic map mapping measure metrics model network organization plan process relationships representation schema squares statistics structure system tracking tree visual"},
+        {"name": "score", "tags": "2k achievement alphabet amount analytics bar bars character chart count data diagram digit education evaluation figure finance font gaming gauge graph indicator infographic letters measure measurement metric metrics number numbers performance points quantity ranking record result score sports statistics sum symbol tally text total tracking type value"},
+        {"name": "shape_line", "tags": "border circle collapse dash decrease delimiter divider division draw edit editing em dash en dash geometry horizontal line hyphen less line line break minimize minus reduce remove rule rule-off segment separate separation shape shorten square subtract"},
+        {"name": "short_text", "tags": "abstract article block of text brief characters comment composition content copy doc document editorial font letters lines of text lorem ipsum note paragraph placeholder placeholder text reading sample text short short text text type typeface typography words write writing"},
+        {"name": "show_chart", "tags": "analysis analytics bar bars business chart data diagram display economy finance graph growth infographic line line chart measure metrics performance plotting presentation progress report show show chart statistics stock tracking trends view visualization"},
+        {"name": "space_bar", "tags": "bar break button character control document editor enter gap horizontal icon input key keyboard line long paragraph press rectangle separation space spacebar text typing ui ux wide word writing"},
+        {"name": "square", "tags": "area basic block border box building block container draw element empty form four frame fundamental geometry graphic grid layout minimal object outline placeholder quadrangle region section shape sides simple square structure symbol vector"},
+        {"name": "stacked_line_chart", "tags": "analysis analytics area chart business chart data decline diagram finance graph growth infographic information layered line lines measure measurement metrics multiple lines performance plotting progress report representation result stacked statistics summary tracking trend visualization"},
+        {"name": "strikethrough_s", "tags": "alphabet character correction cross cross out delete doc document edit edit text editing editor font formatting incorrect letter letter s letters line through text markdown out proofread remove rich text s sheet spreadsheet strike strikethrough styles symbol text text editing text formatting text style type typo word writing"},
+        {"name": "subscript", "tags": "2 alphanumeric baseline character chemical formula doc document edit editing editor equation footnote formatting gmail index lower math novitas number power science sheet smaller spreadsheet style subscript symbol text text editor text format text style type typesetting typography writing writing tools x"},
+        {"name": "superscript", "tags": "2 alphanumeric calculation character digit doc document edit editing editor elevated equation exponent formatting formula gmail index letter math mathematics notation novitas number numeral power raised sheet small text spreadsheet style superior superscript symbol text type typography word processor writing x"},
+        {"name": "table_chart", "tags": "analytics arrange bar bars business chart columns data diagram display document finance graph grid infographic grid information lines matrix measure metrics numbers organize outline plot presentation rectangle report rows shape spreadsheet squares statistics table tracking view"},
+        {"name": "table_rows", "tags": "array background chart data database document entries file filter graph grid horizontal lines information layout lines list organize parallel lines presentation records report rows section sort spreadsheet stacked structure table view"},
+        {"name": "text_decrease", "tags": "- a accessibility alphabet character decrease decrease text diminish font font size lessen letter letters minus reading reduce reduce text remove resize scale scale text shrink shrink text size subtract subtraction symbol text text size text smaller type typography zoom out text"},
+        {"name": "text_fields", "tags": "T add add text alphabet blank blinking cursor box character compose control cursor data entry document edit field edit text enter text entry field fields font form input insert interface keyboard letters lines point space symbol text text box text fields type typing underscore user input writer writing"},
+        {"name": "text_increase", "tags": "+ accessibility add adjust alphabet character document enlarge expand font grow increase letter letters new page plus readability resize scale settings size symbol text type typography view viewing zoom"},
+        {"name": "title", "tags": "T action alphabet basic basic minus box button character control decrease box essential font function geometric header less box letters line icon minimal minus minimize box minus square negative box outline remove box shape simple simple minus square subject subtract box symbol text thin line title type ui control"},
+        {"name": "type_specimen", "tags": "characters creative design detail display document editing example file font formatting graphic information layout letters lines page paragraph preview sample showcase specimen style text type typeface typography view writing"},
+        {"name": "vertical_align_bottom", "tags": "align alignment arrange arrow bottom distribute doc document down edit editing editor formatting layout lines move paragraph position sheet sort spreadsheet stacked text textbox type typography up arrow vertical vertical align bottom visual writing"},
+        {"name": "vertical_align_center", "tags": "align alignment arrange arrow bars center center align centering distribute distribution doc document down edit editing editor evenly formatting justification justify layout line lines middle middle align paragraph paragraph formatting parallel position positioning rectangle sheet spreadsheet square text type up vertical vertical alignment writing"},
+        {"name": "vertical_align_top", "tags": "align alignment arrange arrow box doc document down edit editing editor format layout line move object position rectangle sheet sort spreadsheet text top type up vertical vertically writing"},
+        {"name": "vertical_distribute", "tags": "align alignment bars design tools direction distribute distribute objects editor elements equal evenly format graphics layout layout tools lines objects order organization paragraph position rearrange rectangular rectangular shapes rule rules space spacing style text up and down vertical vertical alignment"},
+        {"name": "wrap_text", "tags": "adjust align alignment arrangement arrow writing box content doc document edit editing editor flow formatting layout line break lines multiple lines page paragraph rectangle shape sheet spreadsheet square straight lines text text layout type typography word wrap wrap wrap text write writing"},
+    ],
+    "file": [
+        {"name": "approval", "tags": "accept accepted acknowledge affirmative agree agreement apply approval approvals approve certificate certification check checkmark complete confirm correct disapproval done drive file finished impression ink mark okay okey dokey permission permitted positive postage right stamp success tick true valid validated verified yes"},
+        {"name": "attach_email", "tags": "add add attachment add file attach attach file attach paper clip attachment clip communication compose compose email compose mail connect correspondence document email envelop file include attachment include file letter letters link link file mail message office paper paper clip paperclip send workspace"},
+        {"name": "attachment", "tags": "add file attach attachment clip communication compose connect connect file document document icon document management email file image insert document insert file link office office supplies paperclip paperclip icon productivity send share share document upload document upload file"},
+        {"name": "cloud", "tags": "air atmosphere climate cloud cloudy connection environment filled forecast graphic icon internet meteorology minimal nature network outline overcast queue rain round rounded shape simple sky snow solid symbol temperature ui ui element upload weather white"},
+        {"name": "cloud_circle", "tags": "app application backup circle circular cloud computing connection data download drive files filled folders forecast internet network online outline round server shape sky storage synchronization technology upload weather"},
+        {"name": "cloud_done", "tags": "app application approve available backup check checkmark cloud complete completed computing confirmed connection data digital document done download drive file files finished folders infrastructure internet mark network ok online ready saved select server sky storage success symbol sync synchronization technology tick upload validate verified weather yes"},
+        {"name": "cloud_download", "tags": "access app application arrow backup cloud cloud computing cloud storage computer connection data document down download download file drive file files folders get internet move network receive retrieve save server sky storage sync synchronization transfer transfer file upload"},
+        {"name": "cloud_off", "tags": "access app application backup broken cloud connection data disabled disconnected drive enabled error failed failed connection files folders internet network no access not available not connected not synced off offline on outage service disabled service offline sky slash storage storage offline storage unavailable sync unavailable unavailable service upload warning weather"},
+        {"name": "cloud_queue", "tags": "air atmosphere climate cloud cloudy connection environment filled forecast graphic icon internet meteorology minimal nature network outline overcast queue rain round rounded shape simple sky snow solid symbol temperature ui ui element upload weather white"},
+        {"name": "cloud_sync", "tags": "app application around arrow backup circular arrow cloud computing connection cycle data data transfer database direction download drive files folders icon inprogress internet load loading refresh loop network online progress refresh renew rotate save sky storage sync synchronize system transfer turn two arrows two-way update upload web"},
+        {"name": "cloud_upload", "tags": "app application arrow backup cloud computing connection data digital document upload download drive file upload files folders image upload internet move network online remote storage save send send data server share sky software storage sync system transfer up up arrow upload video upload weather"},
+        {"name": "create_new_folder", "tags": "+ add addition archive build collection content create data directory doc document drive file folder generate group library make management new organization plus produce rectangle save sheet slide storage symbol tab"},
+        {"name": "difference", "tags": "choice compare content contrast copy cut diff difference doc document duplicate file layers multiple options overlay past selection split stack variations versions"},
+        {"name": "download", "tags": "acquire action app application archive arrow bar button cloud computer control data document down download downloads drive file get incoming install internet line move network obtain pointed receive save storage symbol transfer underscore upload"},
+        {"name": "download_done", "tags": "arrow arrow and check arrows check checkmark complete completed download completed file download confirmation document document and check done down down arrow down arrow and check download download complete download done download finished download successful downloads drive file file download complete file download done file download finished file download successful finished finished download finished file download install installed ok paper paper and check success successful download successful file download tick upload"},
+        {"name": "download_for_offline", "tags": "access arrow available offline backup caching circle cloud cloud arrow cloud icon connection data transfer down download download cloud download icon file transfer for offline get file install internet network no internet offline offline icon retrieve retrieve data save save icon storage store sync synchronization transfer upload"},
+        {"name": "downloading", "tags": "arrow circle cloud cloud download data down down arrow download download data download file download indicator downloading downloading progress downloads file transfer indicator install internet internet download loading network pending processing progress progress bar queue receive retrieve status syncing transfer transfer data transfer file upload waiting web download"},
+        {"name": "drive_file_move", "tags": "action arrange arrow button cloud copy data deliver direction doc document drive drive storage file file management folder forward graphic icon manage move navigation organization relocate right send sheet slide storage symbol transfer transport ui element"},
+        {"name": "drive_file_move_rtl", "tags": "action arrange arrow arrows button cloud copy data deliver direction doc document drive drive storage file file management folder folders forward graphic icon left manage move navigation organization relocate right rtl send sheet side slide storage symbol transfer transport ui element"},
+        {"name": "drive_file_rename_outline", "tags": "archive business change compose create data document draft drive e edit editing file folder form input letter marker modify office outline paper pen pencil rename save sheet square text update write writing"},
+        {"name": "drive_folder_upload", "tags": "add archive arrow backup cloud computer create data destination digital directory doc document drive export file folder import internet move network new online save send share sheet slide storage technology transfer up upload"},
+        {"name": "file_download", "tags": "acquire action app application archive arrow arrows bar button cloud computer control data document down download downloads drive export file get incoming install internet line move network obtain pointed receive save storage symbol transfer underscore upload"},
+        {"name": "file_download_done", "tags": "arrow arrow and check arrows check checkmark complete completed download completed file download confirmation document document and check done down down arrow down arrow and check download download complete download done download finished download successful downloads drive file file download complete file download done file download finished file download successful finished finished download finished file download install installed paper paper and check success successful download successful file download tick upload"},
+        {"name": "file_download_off", "tags": "arrow blocked cancelled cannot download disabled document access document management down download download blocked download disabled download error download off download problem download restricted download unavailable drive enabled error export failed file file access file download blocked file download disabled file download off file download restricted file download unavailable file error file management file transfer install not downloadable off on problem restricted save slash unavailable upload"},
+        {"name": "file_open", "tags": "access access file administration application arrow browse business computer data directory doc document drive explore file file open folder folder open information interface left manage office open open document open file page paper record retrieve storage technology view view file"},
+        {"name": "file_upload", "tags": "arrow arrow up arrows cloud upload computer computer to cloud data data transfer data upload document document upload download drive export file file transfer file upload folder folder arrow import line line arrow send send file share file submit transfer up upload upload document upload image upward arrow"},
+        {"name": "folder", "tags": "archive box briefcase cabinet closed computer container data data records digital digital storage directory doc document document archive drive file file storage file system filled filled folder folder folders full full folder organized organized files papers records sheet slide storage"},
+        {"name": "folder_copy", "tags": "archive backup clone collection content copy create copy cut data directory doc document documents drive duplicate file files folder folders generate copy information make a copy management multiple papers paste replicate repository save save as save copy sheet slide storage"},
+        {"name": "folder_delete", "tags": "administration archive bin business can clear computer data data management delete doc document documents drive file file management folder folder management folders garbage management office organization organized recycle bin remove repository. sheet slide storage system trash waste"},
+        {"name": "folder_off", "tags": "access denied block blocked close folder data data folder off delete folder denied directory off disabled doc document document folder off drive enabled file file folder off folder folder access denied folder blocked folder disable folder disabled folder off folder restricted folder unavailable folders no access no folder not allowed off on online private folder off remove folder restricted restricted access secret folder off sheet slash slide storage storage folder off unavailable"},
+        {"name": "folder_open", "tags": "access archive browse computer container contents data digital directory doc document documents drive expand file file explorer files find folder folder open folders information locate manage management navigation open organization organized papers project rectangular reveal sheet slide storage tabbed view"},
+        {"name": "folder_shared", "tags": "access account backup cloud collaboration computer content data digital directory distribute doc document drive face file folder group human management network organize people person profile save send share shared sheet slide storage store sync synchronise team teamwork user"},
+        {"name": "folder_zip", "tags": "archive archive file compress compressed file computer data data organization digital directory doc document document icon document management drive electronic file file folder file icon file management file zip folder folder archive folder compress folder icon folder zip folders open organize paper sheet slide storage storage icon storage management zip zip icon"},
+        {"name": "format_overline", "tags": "alphabet button character character formatting control doc document edit editing editor font format formatting graphic design horizontal lines letters line lines menu option overline sheet spreadsheet strikethrough style symbol text three lines type typography ui under underline ux word processing writing"},
+        {"name": "grid_view", "tags": "app application square arrangement block layout blocks boxes components content dashboard data display design display elements grid grid layout grid view information display interface items layout matrix multiple items organization organize organized pattern screen site square grid squares structure structured system tile view tiles ui ux view visual display web website window"},
+        {"name": "newspaper", "tags": "article book communication current events daily data doc document drive file folder folders headline information journalism lines magazine media news newspaper notes page pages paper press print publication reading rectangle report sheet slide square text update writing"},
+        {"name": "request_quote", "tags": "ask for a quote asking bill bubble business card cash chat coin comment commerce communication conversation cost credit currency dialog dialogue dollars estimate finance inquiry message money online pay payment price pricing quotation quote rectangle request request a quote shape shopping speech speech bubble square symbol talk text transaction"},
+        {"name": "rule_folder", "tags": "administration approve archive archive folder business cancel check close collection complete data directory doc document document folder document management done drive exit file file management folder guideline library management mark no office ok organization organization folder policy policy folder regulations remove repository rule rules select sheet slide standards storage structure system tick validate verified x yes"},
+        {"name": "snippet_folder", "tags": "archive box business categorized collection compartment container data directory doc document documents drive file files folder indexed management office organize repository save sheet slide snippet storage store structured tabbed"},
+        {"name": "text_snippet", "tags": "article character communication content data doc document excerpt extract file fragment information language letter literature note notes partial piece portion preview quotation quote reading report section segment snippet storage summary text typography words writing"},
+        {"name": "topic", "tags": "area basis category concern context data details doc document domain drive element facts field file folder foundation header heading information issue knowledge matter origin point question reference resources root sheet slide source storage subject subject matter theme title topic"},
+        {"name": "upload", "tags": "arrow arrow up arrows cloud upload computer computer to cloud data data transfer data upload document document upload download drive export file transfer file upload folder folder arrow import line line arrow send send file share file submit transfer up upload upload document upload image upward arrow"},
+        {"name": "upload_file", "tags": "action add arrow button cloud data doc document download drive element file folder folders graphic icon import line page paper save send sheet slide store symbol transfer transmit ui up upload writing"},
+        {"name": "workspaces", "tags": "application arrangement circles collaboration computer dashboard desktop display documents dot files filled grid group interface layers layout management multiple organization outline overview panels perspective productivity projects screens software space stacking tabs team view windows work workspaces"},
+    ],
+    "hardware": [
+        {"name": "adf_scanner", "tags": "adf adf scanner automatic document feeder business copier copy device digitization document feed feeder hardcopy horizontal lines imaging input machine multiple pages office office equipment output paper parallel lines print printer processing rectangle scan scanner sheet stack technology work"},
+        {"name": "browser_not_supported", "tags": "alert asset blocked browser computer connection desktop diagonal disabled enabled error failure forbidden icon internet line network no not not supported off on page problem screen site slash status supported symbol technology unavailable warning web website window www x"},
+        {"name": "browser_updated", "tags": "Android OS application arrow browser checkmark chrome complete computer confirmation desktop device display done download finished green tick hardware iOS install installed internet mac monitor navigation new version page program progress refresh screen software status success tab tick update updated verification web web browser website window"},
+        {"name": "cast", "tags": "Android OS airplay audio broadcast cast chrome chromecast connect connection content desktop device display hardware iOS mac media mirror monitor network output playback projector push receiver screen screencast send share signal stream streaming technology television transmit tv video web window wireless"},
+        {"name": "cast_connected", "tags": "Android OS airplay audio beaming broadcast cast cast connected chrome connect connected connected device connection content control desktop device display entertainment hardware iOS link link established mac media media player mirroring monitor multimedia network projecting remote screen screencast share signal smart tv streaming television transmit tv video web window wireless"},
+        {"name": "cast_for_education", "tags": "Android OS airplay audio broadcast cast chrome classroom college connect connection desktop device display education for hardware iOS knowledge learn learning lecture lessons teaching mac media monitor presentation projection school screen screencast share sharing stream streaming student teach teacher technology television tv university video web window wireless"},
+        {"name": "computer", "tags": "Android OS accessory chrome communication computer computing data desk desktop device digital display electronic electronic device gadget hardware iOS internet laptop mac monitor network notebook office pc peripheral personal computer screen server system technology technology device web window work workstation"},
+        {"name": "connected_tv", "tags": "Android OS airplay cast chrome connect connected connection desktop device display electronic hardware home entertainment iOS lines mac media mirror monitor network rectangle screen screencast smart tv streaming technology television tv video web wifi window wireless"},
+        {"name": "desktop_mac", "tags": "Android OS all-in-one base chrome computer computing desktop device digital display electronic hardware home iOS imac mac macintosh modern monitor office pc personal computer rectangle screen setup stand technology web window work workstation"},
+        {"name": "desktop_windows", "tags": "Android OS cast chrome computer desktop device digital display electronic hardware home iOS mac mirroring monitor office pc presentation rectangular remote screen sharing technology television tv web window windows work workstation"},
+        {"name": "developer_board", "tags": "board build chip circuit board code coding component computer computing cpu developer developer board development development board development tool electronic board electronics engineering hardware integrated circuit mainboard microchip motherboard pcb processor programming prototype server tech tech board technology technology board test"},
+        {"name": "developer_board_off", "tags": "board chip circuit circuit board component computer cross developer developer board development device disable disabled disconnected electronic electronics enabled error hardware inactive integrated circuit microchip no entry not connected off on processor programming slash stop technology unavailable warning"},
+        {"name": "device_hub", "tags": "Android OS architecture center central point circle computer configuration connected devices connection connection points connections control desktop device device hub diagram digital hardware hub iOS infrastructure internet of things iot laptop lines links management map mobile monitor network networking nodes phone points settings smart home square system tablet technology triangle watch wearable web"},
+        {"name": "device_unknown", "tags": "? Android OS assistance cell communication connection device digital electronic glyph handheld hardware help iOS icon info information inquiry issue mobile outline phone portable punctuation query question question mark rectangular screen status support symbol tablet technical troubleshoot unknown"},
+        {"name": "devices_other", "tags": "Android OS ar audio casting casting devices cell chrome communication computer connection connectivity desktop device devices digital display electronics gadget gadgets hardware iOS ipad mac media mirroring mobile monitor multiple devices network other other devices peripherals phone screen screensharing smart devices sync tablet technology video virtual_reality vr watch wearables window"},
+        {"name": "dock", "tags": "Android OS app dock application dock applications bar bottom bar cell charging connector desktop device dock favorite apps hardware horizontal iOS launcher macos dock mobile navigation operating system organization phone pinned apps power productivity program bar programs quick launch rectangular shortcuts bar station system bar tablet taskbar windows taskbar"},
+        {"name": "earbuds", "tags": "accessory audio audio device audio input cable communication connected device ear earbuds earbuds icon earphone earphones earphones icon entertainment headphone headphones headset listen listening listening device media microphone music personal audio personal listening playback portable sound sound output technology wire wired audio"},
+        {"name": "earbuds_battery", "tags": "accessory audio battery battery charge battery level battery status bluetooth charge charging device earbud case earbuds earphone earpiece headphone headphones headset icon indicator interface level listen listening music power sound status symbol tech technology ui wireless"},
+        {"name": "gamepad", "tags": "accessory action activity buttons circles console control controller d-pad device digital direction electronic entertainment fun game gamepad gaming hardware input interface joystick leisure menu navigation play playstation rectangle selection technology video video games"},
+        {"name": "headphones", "tags": "accessory audio audio device audio equipment call communication device ear ear cups earphone electronics entertainment equipment gaming headband headphones headphones icon headset headset icon listen listening listening device multimedia music over ear sound sound device stereo support technology virtual reality"},
+        {"name": "headphones_battery", "tags": "accessory audio battery bluetooth charge charging connection device ear earphone electronic energy headphones headset icon indicator level listen listening music pairing power sound status symbol. technology ui wireless"},
+        {"name": "headset", "tags": "accessory audio audio device audio equipment call communication device ear ear cups earphone electronics entertainment equipment gaming headband headphones headphones icon headset headset icon listen listening listening device multimedia music over ear sound sound device stereo support technology virtual reality"},
+        {"name": "headset_mic", "tags": "accessory audio audio device band boom mic call chat communication device double earpiece ear earphone earpieces entertainment gadget headphones headset listen listen and talk mic microphone music podcast record sound speak speak and listen talk technology telecommunication voice"},
+        {"name": "headset_off", "tags": "accessory audio audio off broken call chat communication device diagonal line disabled disconnected ear earphone enabled headphones headphones muted headphones off headset headset muted listen listening meeting mic music mute muted muted audio off on quiet silence slash sound sound off talk unavailable video call voice volume"},
+        {"name": "home_max", "tags": "address architecture area building device domicile door dwelling enlarge entrance expand fill front full screen gadget hardware home house increase internet iot living location max maximize navigation nest place property real estate residence roof scale smart structure things windows zoom"},
+        {"name": "home_mini", "tags": "Internet address architecture basic building button compact device diagram dwelling gadget hardware home house icon iot location mini minimal navigation nest outline property real estate residence shape shelter simple small smart structure symbol things"},
+        {"name": "keyboard", "tags": "access chat code communication computer control data entry device device input digital edit grid hardware input keyboard keypad keys letters message office peripheral programming rectangle search software squares technology text text field type typing virtual keyboard writing"},
+        {"name": "keyboard_alt", "tags": "accessory alternate keyboard buttons communication computer computer hardware data entry device hardware input input device interface keyboard keypad keys letters message numbers office peripheral rectangle symbols technology text type typing virtual keyboard writing writing tool"},
+        {"name": "keyboard_arrow_down", "tags": "arrow arrow down arrows chevron down collapse collapse section direction down down down arrow downward arrow drop down dropdown expand expand less expand menu expand more hide indicator down keyboard keyboard key down menu indicator move down navigation down next item next page pointer down pointing down reveal scroll down show less show more toggle down v shape down"},
+        {"name": "keyboard_arrow_left", "tags": "angle arrow arrows back basic button chevron control direction indicator key keyboard left list menu minimal move move left navigate navigation page point pointer previous scroll sideways simple triangle ui control"},
+        {"name": "keyboard_arrow_right", "tags": "angular arrow arrow arrow right arrows basic arrow button chevron chevron right control diagonal arrow direction element forward go graphic indicator keyboard keyboard arrow line arrow move navigate navigation next pointer proceed right right arrow right chevron simple arrow symbol thin arrow triangular arrow vector"},
+        {"name": "keyboard_arrow_up", "tags": "arrow arrows button caret chevron close collapse control direction element expand expandable indicator input less list menu minimize move up navigate navigation point up scroll up section top triangle triangle up ui control up up arrow upward widget"},
+        {"name": "keyboard_backspace", "tags": "action arrow back backspace caret clear close control delete direction editor erase escape exit go back input keyboard left left arrow line navigation point previous remove return shape symbol text undo"},
+        {"name": "keyboard_capslock", "tags": "arrow button capslock computer control direction function input key keyboard letters line pointing shift text triangle typing up uppercase writing"},
+        {"name": "keyboard_command_key", "tags": "action apple button command command key computer key computing control device digital function glyph hardware input interface element key keyboard mac macos operating system option outline shortcut special key stroke symbol technology"},
+        {"name": "keyboard_control_key", "tags": "arrow code command computer control control key direction function key go up input key keyboard move up navigation programming scroll up symbol text text input top typing up arrow"},
+        {"name": "keyboard_double_arrow_down", "tags": "advance angle arrow arrows bottom chevron continue control descend direction directional dive double down drop end fall forward indicator keyboard lower move multiple navigation next page point pointer scroll sharp submerge triangle v-shape"},
+        {"name": "keyboard_double_arrow_left", "tags": "angle left arrow arrow left arrows back back button chevron left direction direction left double double arrow fast backward fast reverse go back history left left arrow media control move left multiple multiple arrows navigation playback pointing left previous return reverse rewind rewind button skip back step back two arrows"},
+        {"name": "keyboard_double_arrow_right", "tags": "accelerate advance arrow arrows chevron chevrons control direction double double arrow double chevron fast forward forward go input key keyboard move movement multiple navigation next next page progress right right arrow rightward skip step forward symbol"},
+        {"name": "keyboard_double_arrow_up", "tags": "arrow arrow up arrows caret chevron chevrons collapse direction direction up double double arrow double caret double up arrow expand fast forward fast up go up indicator jump up keyboard keyboard icon maximize minimize move up multiple navigate up navigation page up pointer scroll up skip up to top top up up arrow upward"},
+        {"name": "keyboard_hide", "tags": "arrow box buttons chevron clear close collapse computer device dismiss down form hardware hide input input method keyboard keypad keys minimize mobile onscreen panel rectangle remove shrink soft keyboard software text typing virtual"},
+        {"name": "keyboard_option_key", "tags": "accessibility alt alt key alternate character command computer configuration control customization device flat function input key keyboard line minimal modifier key option outline rectangle settings special key square stroke symbol technology text typing"},
+        {"name": "keyboard_return", "tags": "angle arrow back bend break line carriage return coding command computer key curved arrow directional arrow down arrow enter key function glyph icon input keyboard keyboard return keyboard symbol left left arrow newline programming return return key shape symbol text editing text entry text formatting typography"},
+        {"name": "keyboard_tab", "tags": "arrow character computer control document editing element glyph indent input interface jump key keyboard keyboard tab left move navigation next right right arrow space spacing symbol tab tab key technology text word processing writing"},
+        {"name": "keyboard_voice", "tags": "audio audio button audio capture audio input audio recording chat communication dictate dictation hear hearing input keyboard messaging mic mic button microphone microphone button multimedia noise record recorder recording recording button sound sound capture sound input sound recording speak speaker speech talk voice voice button voice command voice input"},
+        {"name": "laptop", "tags": "Android OS accessory chrome communication computer computing data desk desktop device digital display electronic electronic device gadget hardware iOS internet laptop mac monitor network notebook office pc peripheral personal computer screen server system technology technology device web windows work workstation"},
+        {"name": "laptop_chromebook", "tags": "Android OS angled chrome chromebook computer computing device display electronic flat graphic hardware horizontal iOS icon internet keyboard laptop mac chromebook minimal mobile monitor outline personal portable rectangle screen symbol technology thin vector web window work"},
+        {"name": "laptop_mac", "tags": "Android OS chrome computer computing connection data desktop device digital display electronic electronics gadget hardware iOS internet keyboard laptop mac macbook mobile monitor network office portable presentation rectangle remote screen shape technology web window work workstation"},
+        {"name": "laptop_windows", "tags": "Android OS angled chrome computer computing device digital display education electronic hardware iOS laptop mac monitor notebook office open pc personal computer portable rectangle screen technology technology device web window windows work"},
+        {"name": "memory", "tags": "access card chip circuit component computer connection data device digital electronic hardware information integrated circuit lines memory micro module pins processing processor ram rectangle sd square storage system technical technology"},
+        {"name": "monitor", "tags": "Android OS base chrome communication computer dashboard data desktop device display electronic electronic device gadget hardware home iOS mac media monitor office output peripheral presentation rectangle screen stand technology television tv video viewing web window work"},
+        {"name": "mouse", "tags": "action click computer computing control cursor desktop device digital hardware input interaction laptop minimal mouse navigation object outline peripheral pointer pointing device scrolling select shape simple technology touchscreen trackpad wireless"},
+        {"name": "phone_android", "tags": "OS android button call cell cellphone cellular communication connect contact device digital display electronic gadget handheld hardware iOS message mobile modern phone portable power rectangle ring rounded screen smartphone tablet technology telephone volume wireless"},
+        {"name": "phone_iphone", "tags": "Android OS app application call cell cellphone cellular communication communication device connection contact device digital display electronics gadget gadgetry handheld hardware iOS iphone message mobile network personal phone portable rectangular rounded corners screen smart smartphone tablet technology telephone telephony"},
+        {"name": "phonelink", "tags": "Android OS cast chrome communication computer connect connection connectivity data transfer desktop device devices display hardware iOS link mac mobile monitor multiple devices network phone phonelink remote control screen screen mirroring sharing smartphone streaming sync synchronize tablet technology transfer web windows"},
+        {"name": "phonelink_off", "tags": "Android OS broken link cancelled computer connection off cross out desktop device devices off diagonal line disabled disconnected enabled hardware iOS laptop link link off mobile monitor no connection no signal not available off offline on pairing off phone phonelink phonelink off screen slash tablet unavailable unlink unpair watch wearable web"},
+        {"name": "point_of_sale", "tags": "accounting business buy buying cash cash register checkout commerce cost counter machine marketplace merchant money of pay payment payment terminal point point of purchase point of sale pos purchase register retail retail point of sale sale sales sell selling shop store system terminal till till machine till register transaction"},
+        {"name": "power_input", "tags": "adapter amperage cable charge charging connect connector current device electric electrical electricity electronic energy input interface lines plug port power power connection power cord power input power outlet power source socket supply technology utility voltage wall plug watts"},
+        {"name": "router", "tags": "access point box broadband cable communication computer computer network connection connectivity curved lines data device equipment hardware home network internet internet access lines modem network office network rectangle router server signal square technology technology device telecommunications wifi wireless wireless network"},
+        {"name": "scanner", "tags": "authenticate barcode box camera code copy corner cyber data detection device digital document electronic hardware identify information laser lens line machine mobile optical product qrcode read reader recognition scan scanner search square technology verify"},
+        {"name": "security", "tags": "access allowed authentication certified data security defense encrypted guard mobile security network security permission privacy privacy policy private protect protected protection safe safety secure secure access secure connection secure data security shield ssl system security trust trusted verified vpn web security"},
+        {"name": "sim_card", "tags": "camera card carrier cellular cellular service chip communication communication device connection connectivity contact corner cut data device electronics hardware identity internet memory mobile module network phone service signal sim sim card smart card square storage subscriber subscriber identity module technology telecom telephone"},
+        {"name": "smart_display", "tags": "airplay appliance automation base cast chrome connect connected connected device control device digital assistant display electronic entertainment entertainment device home home control household information interactive kitchen living room media monitor play rectangular screen screencast smart smart display smart home stand stream technology television touch screen tv video voice assistant voice control"},
+        {"name": "smart_screen", "tags": "Android OS airplay cast cell communication connect connection connectivity data device device icon display display dots dots entertainment hardware iOS interface link media mirror mobile mobile dots mobile icon network pairing phone replicate screen screencast sharing smart smart screen stream sync synchronize tablet technology transfer video wireless"},
+        {"name": "smart_toy", "tags": "ai android artificial intelligence assistant automation bot character chatbot companion computing digital droid future futuristic games head icon innovation intelligence interaction interface machine learning mechanical playful robot round eyes smart smart toy square symbol technology toy virtual"},
+        {"name": "smartphone", "tags": "Android OS border call cell cellphone cellular chat communication current device display frame gadget handheld hardware iOS mobile orientation outline phone portable portrait rectangle rounded corners screen smartphone stay stroke tablet technology text vertical"},
+        {"name": "speaker", "tags": "acoustic acoustics adjust amplifier audio audio device box broadcast communication control earphone electronic hifi listen loud media megaphone multimedia music mute noise play playback quiet settings sound speaker speakerphone stereo system unmute video voice volume"},
+        {"name": "speaker_group", "tags": "audio audio devices audio group audio output box casting configuration connect connect devices control device management electronic group grouping link loud media multiple multiple speakers music network playback settings sharing sound sound devices sound group speaker speaker group speakers stereo stream sync system video volume volume group wireless"},
+        {"name": "start", "tags": "action arrow audio begin button continue control enter film forward go initiate keyboard launch media multimedia music navigation next play playback pointer proceed right right arrow run start stream triangle ui control video"},
+        {"name": "tablet", "tags": "Android OS border communication computer device digital display drawing education electronic entertainment frame gadget handheld hardware iOS ipad media mobile portable reading rectangle screen square tablet technology web work"},
+        {"name": "tablet_android", "tags": "OS android app application browsing communication computing connectivity device digital display electronic gadget google handheld hardware iOS icon ipad lenovo mobile nexus operating system platform portable rectangle samsung screen symbol tablet technology web"},
+        {"name": "tablet_mac", "tags": "Android OS apple computer device digital display electronic gadget hardware horizontal iOS ipad landscape macintosh mobile pad portable rectangle rounded edges screen square corners tablet tablet mac technology web"},
+        {"name": "toys", "tags": "activity assemble blocks building building blocks car child children construct cube education elementary fun game games geometry item kid kids learning object play product puzzle shape shop shopping square stack store toy toys windmill"},
+        {"name": "tv", "tags": "device display entertainment entertainment center glyph home house living room media monitor outline personal rectangle screen screencast solid fill squared corners stream streaming television tv video wireless"},
+        {"name": "videogame_asset", "tags": "asset button console control controller d-pad device electronic device electronics entertainment esports gadget game gamepad gaming google handheld hardware hobby input device joystick leisure leisure activity leisure time media online peripheral play playstation recreation recreational rectangle remote shape simple social sports stadia technology video video game videogame xbox"},
+        {"name": "videogame_asset_off", "tags": "asset buttons console control controller cross delete denied device diagonal line disable disabled enabled entertainment esports fun game gamepad gaming google handheld hardware hidden hobby inaccessible inactive joystick leisure media not allowed not found not visible off on online playstation rectangle remote remove slash social sports stadia unavailable video video game videogame xbox"},
+        {"name": "watch", "tags": "accessory alert analog band circle clock device digital display face fitness futuristic gadget hands health notification pointers retro rounded corners screen smart square strap technology time timepiece tracking watch wearable wearables web wrist wristwatch"},
+        {"name": "watch_off", "tags": "alarm alert band block cancel clear clock close deactivate diagonal line disable do not disturb exclude forbidden mute notification off pause prohibition reminder remove restriction shut silent slash stop strap time timer watch watch off wearables web wrist wristwatch"},
+    ],
+    "home": [
+        {"name": "auto_mode", "tags": "a ai alphabet around arrow arrows artificial auto auto mode automatic automation character configuration control custom direction feature function genai inprogress intelligence letter a letters load loading refresh magic mode navigation nest option preference renew rotate selection setting smart spark sparkle star switch text toggle turn"},
+        {"name": "blinds", "tags": "adjust automation blinds close control cover covering curtains decoration home home decor horizontal lines house interior light control lines nest open panel privacy rectangle rectangular shade shades shutter smart home solid stripe sunshade venetian blinds vertical lines window window covering"},
+        {"name": "blinds_closed", "tags": "architecture blinds block light building closed cover covering curtains darkness home automation horizontal lines interior light control nest opaque parallel lines privacy rectangular residential room darkener secure shade shutter shutters smart home sunblock sunshade window blinds window covering"},
+        {"name": "broadcast_on_home", "tags": "airplay audio broadcast cast communication connect connectivity content device home house media network remote send share signal smart device smart home sound speaker streaming technology transmission transmit wave wireless wireless communication"},
+        {"name": "broadcast_on_personal", "tags": "account antenna avatar broadcast communication connection digital feed internet live me network online person personal profile publish radiating sharing signal social stream transmit update user wave"},
+        {"name": "curtains", "tags": "bedroom blinds closed cover curtains decor decoration drapes drawn event fabric fold home house interior light living room nest open panel pleated privacy residential room shade show shutter soft stage sunshade textile theater window window covering"},
+        {"name": "curtains_closed", "tags": "barrier blinds block closed cloth cover covering curtains darken decor divide domestic drapes fabric fold hang home house interior light nest panel privacy room shade shades shutter soft sunlight sunshade textile wave window"},
+        {"name": "electric_bolt", "tags": "alert battery bolt charging current danger dynamic electric electric bolt electric current electrical electricity energy fast flash high voltage instant intense lightning nest performance power quick rapid speed storm sudden thunderbolt urgent voltage warning weather zap"},
+        {"name": "electric_meter", "tags": "analog bill billing bolt building charge circle consumption cost data dial electric electric meter electricity energy energy usage fast gauge home house indicator information instant lightning measure measurement meter needle nest pointer power power consumption square statistics thunderbolt usage utilities utility voltage volts"},
+        {"name": "energy_savings_leaf", "tags": "battery saver button configuration conservation control eco eco-friendly ecology efficiency energy environment green icon indicator leaf leaves low power nature nest options plant power renewable resource management saving savings savings mode settings status sustainable symbol toggle usage"},
+        {"name": "gas_meter", "tags": "analog indicator analog meter circular gauge circular meter consumption dashboard dashboard element dial droplet energy energy meter fuel fuel gauge fuel level gas gas meter gauge indicator level level indicator measure measurement measurement device meter nest pointer power power meter reading scale usage usage indicator utility water"},
+        {"name": "heat_pump", "tags": "air conditioner air conditioning air flow appliance building climate control commercial cool cooling cooling system eco-friendly efficiency energy furnance green energy heat heat pump heating heating system home house hvac indoor climate industrial nest pump residential system technology temperature temperature control thermostat usage ventilation ventilation system"},
+        {"name": "mode_fan_off", "tags": "air air conditioner angular appliance blades circle climate controls cool cooling disable disabled electrical enabled fan household inactive lines machinery mode nest nonoperational off on power propeller radial rotating settings slash stop symbol toggle ventilation weather"},
+        {"name": "nest_cam_wired_stand", "tags": "bedroom camera camera on stand cctv device electronic device electronics film filming gadget hardware home automation home security image indoor camera ip camera living room monitoring motion nest nest cam observe office picture record security camera security device smart camera smart home stand surveillance technology video video recording videography watch wired"},
+        {"name": "oil_barrel", "tags": "barrel black gold commodity container crude oil diesel droplet drum economic energy fuel gas gasoline industrial industry logistics nest oil oil barrel oil drum petrol petroleum power production refinery reserve resource shipping storage supply tank transportation water"},
+        {"name": "propane", "tags": "barbecue bottle cap container cooking cylinder energy flammable fuel gas gauge grill heating home indicator industrial level line nest outdoor portable power propane rounded rectangle storage supply tank utility valve volume"},
+        {"name": "propane_tank", "tags": "barbecue bbq bottle camping container cooking cylinder empty energy fire fuel full gas gauge grill heat industrial level measurement nest outdoor portable propane refill reserve residential resource storage supply tank utility"},
+        {"name": "roller_shades", "tags": "adjust automation basic blinds close control cover coverings curtains decor elevate home horizontal line house interior light lines nest open outline privacy pull down rectangle retractable roller roller shades rolling shade shades shutter simple smart home sunlight sunshade vertical lines window window covering"},
+        {"name": "roller_shades_closed", "tags": "blinds blinds closed building control closed cover curtains curtains closed down fully closed home automation horizontal lines house indoor interior light blocking lowered nest privacy rectangle roller roller blinds closed roller shades closed room shade shades closed shutter smart home sun protection sunshade window blinds closed window covering closed window treatment closed"},
+        {"name": "sensor_door", "tags": "access access point alarm alert automation close detect door entrance entry entry point exit gateway home security indication monitoring open opening passage portal secure security security system sensor smart home state status status indication threshold"},
+        {"name": "sensor_occupied", "tags": "activated active alarm alert automation body body response connection detection detection sensor fitbit human human sensor indicator motion motion sensor movement network occupant occupied occupied sensor people person person sensor presence presence sensor scan security sensor sensors signal smart body scan sensor smart home status status indicator surveillance technology wireless"},
+        {"name": "sensor_window", "tags": "alarm area border boundary camera data detection device display focus frame input limits monitor monitoring outline rectangle region screen security security system sensor sensor window signal square surveillance target technology view window zone"},
+        {"name": "shield_moon", "tags": "certified confidential crescent crescent moon dark mode defense do not disturb encrypted guard guarded lock moon moonlight night night mode nighttime privacy privacy mode privacy settings private private browsing protect protected protection safe safety secure secure connection security security settings security shield shield shield with moon verified"},
+        {"name": "solar_power", "tags": "array clean energy clean power eco electric power electricity energy generation green energy green power heat nest panel photovoltaic photovoltaic panel power power generation rays renewable solar solar energy solar panel solar power sun sun rays sunlight sunny sustainable sustainable energy"},
+        {"name": "vertical_shades", "tags": "adjust bars blinds building control cover covering curtain curtains decoration drapery furniture home house interior light lines nest office open parallel pattern privacy rectangular shade shades shutter slats striped sun sunshade vertical vertical blinds window window blinds window shades"},
+        {"name": "vertical_shades_closed", "tags": "barrier blinds closed cover covering curtains domestic home home decor indoor interior design light control nest parallel lines privacy rectangles roller room shade shades shading shield shutter slats strips sun protection sunshade vertical blinds vertical shades window covering window treatment"},
+        {"name": "wind_power", "tags": "abstract air flow alternative energy blades clean energy climate eco eco-friendly electricity energy environment generation graphic icon lines motion nest power propeller renewable energy resources spinning sustainable swirl symbol three lines turbine vortex weather wind wind power wind turbine windy"},
+    ],
+    "image": [
+        {"name": "10mp", "tags": "10 10mp camera camera specifications capture detail digital digits display equipment file size font high resolution image image size indicator label lens letters megapixel megapixels mp numbers numerical photo photo quality photography photography gear photography settings picture pixel pixels quality resolution sensor symbol technology ten text type"},
+        {"name": "11mp", "tags": "11 camera detail digital digits display eleven font image indicator information letter letters measurement megapixel megapixels metric mp number numbers numeric options photo photography pixel pixels quality resolution settings symbol text type"},
+        {"name": "12mp", "tags": "12 12 megapixels 12mp camera camera icon camera quality definition digit digital camera digits font high resolution image image quality imaging information label letters media settings megapixel megapixels mp number numbers numerical photo resolution photo settings photography photography settings picture settings pixel pixels quality resolution symbol text type video camera icon video quality video quality. video resolution"},
+        {"name": "13mp", "tags": "13 13 megapixel camera camera information camera resolution camera settings digital image digits file size font high resolution image image details image metadata image settings image size letters megapixel megapixels mp numbers photo details photo quality photo size photography picture quality picture size pixel pixels quality resolution resolution indicator symbol technical details text thirteen thirteen megapixels type"},
+        {"name": "14mp", "tags": "14 14mp camera camera settings clarity detail digital digits font fourteen megapixels graphic high resolution icon image image quality image size lens letters megapixel megapixels mp numbers photo photo quality photography picture pixel pixels quality resolution sensor specification symbol technical text type ui"},
+        {"name": "15mp", "tags": "15 15mp attributes camera data details digital digits display fifteen file font image indicator information label letter letters megapixel megapixels metadata metric mp number numbers numeral photo photography pixel pixels properties quality resolution sensor setting specification symbol text type unit value"},
+        {"name": "16mp", "tags": "16 16 megapixels camera camera mode camera resolution camera settings camera specs digital image digital photography digits font image image details image information image quality image resolution letters megapixel megapixel count megapixels mp mp indicator. numbers photo information photo resolution photo settings photo specs photography picture information picture quality pixel pixels quality resolution resolution indicator sixteen sixteen megapixels sixteen mp symbol text type"},
+        {"name": "17mp", "tags": "17 camera counting designation digits double digit font identifier image index label letters marker measurement megapixel megapixels mp number 17 numbering numbers numbers 17 numeral numeric one pixel pixels quality quantity reference resolution seven seventeen symbol tag text type unit value"},
+        {"name": "18mp", "tags": "18 18mp alphanumeric. camera camera information camera sensor camera settings detail digital camera digits eighteen eighteen megapixels eighteen mp font high resolution image image information image quality letters megapixel megapixels mp number numbers numerical photo quality photography picture quality pixel pixels quality resolution sensor symbol text type"},
+        {"name": "19mp", "tags": "19 19mp camera data detail digital digits feature font image indicator information label letter letters measurement megapixel megapixels metric mp nineteen number numbers numerical. photo photography picture pixel pixels quality resolution setting specification symbol technical text type value"},
+        {"name": "20mp", "tags": "20 camera detail digital digits display font image indicator info information label letters megapixel megapixels metric mp numbers numeric parameter photo photography photography feature photography parameter photography setting picture pixel pixels quality resolution setting size specification symbol text twenty type value"},
+        {"name": "21mp", "tags": "21 21mp camera camera setting clarity detail detailed digits font high detail high resolution image image size indicator label letters megapixel megapixels mp numbers photo quality photo setting photography picture quality pixel pixels quality resolution setting symbol text twenty-one type"},
+        {"name": "22mp", "tags": "22 camera center circle compass connection coordinates crosshair data destination digits direction discovery earth explore find font geography global globe gps image international internet letters location map marker megapixel megapixels mp navigation network numbers pin pixel pixels place point position quality resolution round sphere symbol text travel type web world"},
+        {"name": "23mp", "tags": "23 23mp camera clarity detail digital digits font high resolution image information letters megapixel megapixels mp numbers numeric photo photography picture pixel pixels quality resolution sensor setting spec symbol technical text type typography"},
+        {"name": "24mp", "tags": "24 camera data detail digital digits display file font format image information label letters measurement megapixel megapixels metric mp number numbers option photo photography pixel pixels quality resolution setting size specification symbol technical text twentyfour type"},
+        {"name": "2mp", "tags": "2 2mp camera camera sensor detail digit digital font frame image information letters measurement megapixel megapixels metric mp number number 2 numbers photo photography pixel pixels quality rectangle resolution size specification square symbol text two type unit video videography"},
+        {"name": "30fps_select", "tags": "30 30fps camera capture choose digital video digits fps frame frame rate frame. frames per second frequency image media motion numbers option per playback quality rate record recording second seconds select selection setting settings speed stream streaming video video option video quality video rate video setting video speed"},
+        {"name": "3mp", "tags": "3 3mp camera clarity definition digit digital media display file format file information font format indicator high definition image image quality letters media media file megapixel megapixels mp numbers option photography picture quality pixel pixels preference quality quality setting resolution setting standard definition symbol text type video video file video resolution"},
+        {"name": "4mp", "tags": "4 4mp aspect ratio camera clarity data detail digit dimension display font four image indicator information label letters measurement mega megapixel megapixels metadata metric mp numbers photo photography picture pixel pixels quality resolution setting size specification symbol text type visual watermark"},
+        {"name": "5mp", "tags": "5 5mp camera capture clarity detail digit digital five five megapixels font image indicator information letters megapixel megapixels mp number numbers option performance photo photography picture pixel pixels quality resolution sensor setting size specification square symbol technology text type video videography"},
+        {"name": "60fps_select", "tags": "60 60fps camera choice circle circular configuration control digits film fps frame frame rate frames per second frequency indicator label media media player movie number numbers numeric option per performance playback preference quality rate second seconds select selection settings speed text video video playback video settings"},
+        {"name": "6mp", "tags": "6 camera camera info camera mode camera settings detail level digit digital photography file information font high resolution image image information image options image quality image size letters megapixel megapixels metadata mp numbers options photo data photo options photo resolution photo size photography picture detail picture info pixel pixels quality quality indicator quality setting resolution resolution info setting symbol text type"},
+        {"name": "7mp", "tags": "7 action active animation buffering busy camera circle circular connection continuous cycle dashed data digit dotted font image indicator internet letters loading loop megapixel megapixels mp network numbers pixel pixels processing progress quality refresh reload resolution ring round spinning symbol sync synchronize text type waiting"},
+        {"name": "8mp", "tags": "8 8mp camera capture detail device digit digital equipment font image lens letters megapixel megapixels mp number numbers performance photo photography pixel pixels quality resolution sensor specification symbol text type"},
+        {"name": "9mp", "tags": "9 9 megapixel 9 mp 9mp camera camera icon camera resolution camera settings digit digital camera file format file size font format image image format image icon image quality letters megapixel megapixels mp nine nine megapixel numbers photo icon photo resolution photo size photography picture quality pixel pixels quality quality indicator quality setting resolution resolution indicator resolution setting symbol text type video quality video resolution video size videography"},
+        {"name": "add_a_photo", "tags": "+ a photo add album button camera capture create file gallery graphic icon image input insert interface lens library media new photo photograph photography picture plus shutter symbol ui ui element upload ux visual"},
+        {"name": "add_photo_alternate", "tags": "+ add addition album alternate art capture choose collection creation file gallery graphic image import insert landscape media mountain mountains new photo photography picture plus rectangle select square sun symbol upload visual"},
+        {"name": "add_to_photos", "tags": "add album append camera capture cloud collection create files folder gallery image import include input insert landscape library manage media mountain mountains multimedia new organize photo photography photos picture plus save storage supplement to upload"},
+        {"name": "adjust", "tags": "adjust alter auto click bar bars calibration center change circle circles configuration control panel controls customize dot filter fine tune fix focus hamburger menu horizontal lines image levels lines management menu modify move options preferences refine regulation settings sliders target three lines triple bar tuning"},
+        {"name": "animation", "tags": "active activity activity indicator animation busy circle circles concentric continuous dynamic film flow fluid indicator loading loading spinner looping motion movement processing progress progress indicator refreshing rings sequence spinning status video visualizer wait waiting working"},
+        {"name": "assistant", "tags": "ai answer artificial artificial intelligence assistant assistant bubble automatic automation bubble chat chatbot circle comment communicate communication conversation custom customer service dialog feedback genai guidance help help bubble information intelligence magic message microphone mouth question recommendation service smart spark sparkle speaking speech speech bubble star suggestion support talk talking twinkle virtual assistant voice"},
+        {"name": "assistant_photo", "tags": "achievement assistant banner bookmark border country empty flag goal highlight indicator label location mark marker milestone national notice outline pennant photo pin recommendation save signal smart standard star suggestion territory unfilled"},
+        {"name": "audiotrack", "tags": "audio audio file audio icon audiotrack clef composition eighth note key listen media media controls melody music music icon musical note play player playlist quaver rhythm score song sound sound icon track tune waveform"},
+        {"name": "auto_awesome", "tags": "adjust ai artificial artificial intelligence auto automatic automation awesome beautiful custom edit editing effect enhance filter filters function genai improve intelligence magic magic wand recommend recommendations refine smart spark sparkle special effects star stars suggest suggestion tool twinklestar wand"},
+        {"name": "auto_awesome_mosaic", "tags": "adjust album arrange art auto automatic awesome blocks collage collection create design display edit editing enhance enhanced format gallery grid group image layout mosaic multiple organize pattern photo pieces presentation rectangles sections squares structure tile view"},
+        {"name": "auto_awesome_motion", "tags": "accent adjust animation apply auto automatic awesome burst collage create decorate design edit editing effect enhance filter generate glow graphic highlight image improve magic motion options photo settings shimmer sparkles star stylize video visual"},
+        {"name": "auto_fix_high", "tags": "adjust ai artificial auto automated automatic automatically automation beautify custom edit editing effect emphasize enhance erase filter fix genai glitter glow glowing high highlight improve improve quality intelligence magic magic wand modify pen perfect polish refine retouch shine smart spark sparkle spell star tool touch up twinkle wand wizard"},
+        {"name": "auto_fix_normal", "tags": "adjust ai apply artificial auto auto fix automated automatic automation custom default edit effect enhance erase filter fix genai improve intelligence intelligent magic magic wand modify normal optimize perfect process quick fix refine retouch smart spark sparkle star suggestions tool transform wand wizard"},
+        {"name": "auto_fix_off", "tags": "adjustments off ai artificial auto auto enhance off auto fix off automatic automation block cancel clear corrections off custom delete denied deselect disable disabled edit enabled erase exclude filter off fix genai intelligence magic magic wand minus modify no none not available off on remove slash smart spark sparkle sparkles star stars turn off uncheck wand"},
+        {"name": "auto_stories", "tags": "academic article auto book bookmark books collection content documentation education flipping guide information knowledge learning library literature manual novel open book pages publication reading research stacked books stories study textbook two books wisdom"},
+        {"name": "autofps_select", "tags": "A adjust alphabet animation auto automatic character chart computer control curve data digital display font fps frame frame rate frames per second frequency graph indicator information letters line measure metric motion optimize per performance quality rate second seconds select settings smooth speed statistics symbol technology text type video"},
+        {"name": "bedtime", "tags": "astronomy bedtime calm celestial celestial bodies clear clear night clear sky climate cosmos crescent moon dark evening evening sky galaxy home lunar midnight moon nest night nightime nocturnal peaceful quiet quiet time relaxation rest security silent sleep slumber space stars thermostat time weather"},
+        {"name": "bedtime_off", "tags": "active bedtime button clear climate crescent disabled dream home icon inactive indicator lunar mode moon nest night nightime off offline private quiet rest security silence slash sleep slumber stars status symbol thermostat time toggle weather zzz"},
+        {"name": "blur_circular", "tags": "aesthetic art blur circle circular design diffused dots dreamy edit editing effect enhance filter focus fuzzy gaussian graphic halo image out of focus photo photography radial radial blur smooth soft soft focus unfocus visual"},
+        {"name": "blur_linear", "tags": "adjust art blend blur dots edit editing editor effect enhance fade filter gradient graphic graphic design image line linear option photo picture setting smooth softening tool transition visual"},
+        {"name": "blur_off", "tags": "adjust blur blur off clarity clear crisp deactivate definition detail disable disabled display dots edit editing effect enabled enhance filter focus image lens off on optics photo photography picture pixel remove blur remove effect sharp slash toggle off unblur view visual"},
+        {"name": "blur_on", "tags": "activate active blur blur on circle diffuse disabled dots edit editing effect enable enabled enhance filter focus gaussian blur graphic design image effect image processing off on option out of focus pattern photo effect photography round setting slash soft spherical switch toggle tool unfocused visual effect"},
+        {"name": "brightness_1", "tags": "1 active badge basic brightness centralized circle complete control crescent disc dot element filled focused full indicator isolated level lone marker minimal moon orb perfect point round screen selected shape simple single solid sphere status unified whole"},
+        {"name": "brightness_2", "tags": "2 adjust adjustment brightness circle contrast control crescent dark dim display icon interface level light mode moon night screen setting switch symbol theme toggle ui element view visibility visual"},
+        {"name": "brightness_3", "tags": "3 adjust astronomy atmosphere brightness celestial celestial body circle control cosmos crescent cycle darkness dim display environment indicator level low light mode moon night phases satellite screen setting sleep space symbol third three"},
+        {"name": "brightness_4", "tags": "4 adjustment bar brightness circle contrast control crescent dark mode display exposure glare illumination image intensity level light luminance moon nature night option photo screen setting slider sun visibility weather"},
+        {"name": "brightness_5", "tags": "5 adjust brightness button circle control crescent display glow hot icon illumination intensity level light moon option radial radiation rays screen setting solar star summer sun ui weather"},
+        {"name": "brightness_6", "tags": "6 adjust brightness circle contrast control crescent dark day decrease dim display environment exposure glow increase level light luminance monitor moon points radial ray scale screen setting slider spokes star sun sunny weather"},
+        {"name": "brightness_7", "tags": "7 adjust appearance bright bright light brightness circle clear clear day control crescent day daytime display full full sun glow high illumination increase intensity level light maximum monitor moon screen setting shiny star sun sunny up visual"},
+        {"name": "broken_image", "tags": "abstract alert broken broken file broken image broken link broken picture corrupt corrupt file corrupted image dashed lines diagonal line error failed to load failure geometric image image error image not found image placeholder image unavailable invalid image landscape lines missing content missing image mountain mountains no image photo photography picture picture error placeholder placeholder image rectangle square torn triangle warning"},
+        {"name": "brush", "tags": "art artist artistic bristle brush color creative design designer draw drawing drawing tool edit editing editor fill graphics handle illustration instrument line object paint painter painting painting tool shape stroke style tip tool tools"},
+        {"name": "burst_mode", "tags": "action burst burst mode camera capture continuous fast frames image landscape many mode mountain mountains multiple photo photography picture quick rapid repeat repeating sequence series shoot shooting shutter snapping speed stream taking"},
+        {"name": "camera", "tags": "aperture button camera capture capture device device digital electronic film glyph graphic icon image instant lens media optic photo photography picture record recording shoot shutter snapshot symbol tool ui element video viewfinder visual"},
+        {"name": "camera_alt", "tags": "alt analog button camera capture circle device digital film icon image input lens media movie multimedia multimedia input photo photograph photography picture record shoot shutter square symbol technology video videography visual"},
+        {"name": "camera_front", "tags": "body camera capture circle device flip camera front front facing camera human image capture lens live video mobile mobile camera multimedia person phone photo photography picture portrait portrait mode record recording rectangle selfie shot square streaming switch camera technology video video call webcam"},
+        {"name": "camera_rear", "tags": "aperture back camera camera camera mode camera toggle capture capture image circle device focus front image capture lens lense mobile optical phone photo photography picture portrait rear rear camera record recording selfie shutter square switch camera switch view take picture video videography vision"},
+        {"name": "camera_roll", "tags": "album browse photos camera camera roll collection digital photos film gallery image image collection image gallery images library media memories mobile photo photo album photo collection photo storage photography photography collection photos pictures roll saved photos smartphone view photos visual media"},
+        {"name": "cases", "tags": "administration archive bag baggage briefcase briefcases bureaucracy business case cases categorized collection data documentation documents file cabinet files filing folders information law legal management office organization organized purse records repository storage structured suitcase system work"},
+        {"name": "center_focus_strong", "tags": "accuracy adjust aiming alignment area boundaries box camera capture center control corners crosshairs define editor focus frame highlight image lens measurement photo photography pinpoint selection settings square strong target tool view zone zoom"},
+        {"name": "center_focus_weak", "tags": "aim alignment area boundaries camera capture center center focus weak crosshairs focus frame guide image indicator lens limit outline photo photography rectangle region selection shot space square symbol target video viewfinder weak zone zoom"},
+        {"name": "circle", "tags": "angle basic border boundary circle confine design disc edge element elementary empty enclosure eye fish form frame full geometric geometry globe image lens loop marker moon outline panorama perimeter photo photography picture placeholder plain ring round shape signifier simple spheroid symbol token wide"},
+        {"name": "collections", "tags": "adjustments album categorization categorize choices collection collections control criteria data filter funnel gallery image landscape library list manage management mountain mountains narrow narrowing options organization organize photo photography picture preferences refine refinement rules select selection settings sort sorting stack view"},
+        {"name": "collections_bookmark", "tags": "album archive bookmark books categorized collection collections documents favorite gallery grouped journal knowledge label library list literature multiple notebook notes organize paper piled read reading reading list readings record records reference register remember ribbon save stack tab tag"},
+        {"name": "color_lens", "tags": "appearance art artist artistic brush color colors creative customization customize design designer draw drawing editor graphic hues lens paint painting palette pallet shades spectrum style swatch theme tint tints tone tones visual"},
+        {"name": "colorize", "tags": "adjustments appearance art brush color color fill color options color palette color picker color settings color swatches color wheel colorize colors customization design drawing dropper extract eye filters hues image editing paint painting palette photo editing picker rainbow shades spectrum style swatches tints tool visual effects"},
+        {"name": "compare", "tags": "adjust adjustment analysis analyze chart compare comparison comparison tool competing contrast data data comparison difference edit editing edits enhance evaluation feature comparison fix graph image images items measurement metrics opposing opposite parallel photo photography photos product comparison report review scan settings side by side statistics two versus vs"},
+        {"name": "contrast", "tags": "adjust adjustment balance black bright brightness contrast control dark dark theme dim display dynamic range edit editing effect enhance exposure filter graphic grayscale highlights image images levels light modify photo photography picture pictures screen settings shadows slider tone visual white"},
+        {"name": "control_point", "tags": "+ action add add circle append button circle circle add circles command control create function hollow include increase input insert interactive join new option outline plus point selection stroke thin tool ui element unknown 3"},
+        {"name": "control_point_duplicate", "tags": "+ add addmultiple circle circles clone control copy create double duplicate generatemultiples make multiple new overlapping circles overlay plus point replicate symbol two circles"},
+        {"name": "crop", "tags": "adjust adjustments area artboard border boundary clip content crop cut define document edit editing film frame graphic image images mask modify photo photos picture rectangle resize selection settings size square tool transform trim video vignette"},
+        {"name": "crop_16_9", "tags": "16 16:9 9 adjust adjust ratio adjustments area aspect ratio by crop dimensions edit editing editor format frame framing graphic image image editing images landscape movie photo photo editing photos picture proportion rectangle resize settings sixteen by nine size square tv screen video video editing video format wide screen widescreen"},
+        {"name": "crop_3_2", "tags": "2 3 3 by 2 3:2 3x2 adjust adjustments area aspect ratio by crop dimensions edit editing format frame framing height horizontal image image editing images landscape media overlapping squares photo photo editing photograph photos picture proportion rectangle resize scale settings size square two squares width"},
+        {"name": "crop_5_4", "tags": "4 5 5:4 adjust adjustments area aspect ratio border boundary by crop dimension edit editing settings editing tools five by four format frame framing graphic image image editing images media modify outline photo photo editing photos picture ratio rectangle resize shape size square transform trim video video editing"},
+        {"name": "crop_7_5", "tags": "5 7 7:5 ratio adjust adjustments area art aspect ratio bounding box by crop edit editing editor frame graphic horizontal image images landscape media photo photography photos picture rectangle resize selection settings seven by five shape size square tool wide"},
+        {"name": "crop_din", "tags": "adjust adjustments area area selection aspect ratio border boundary contract crop cut din edit editing editor expand extend frame framing geometric image images manipulate media modify photo photos picture rectangle resize settings shape shrink size square square crop tool transform trim"},
+        {"name": "crop_free", "tags": "adjust adjustments area bounding box box corners crop crop free display edit editing enlarge exit full screen exit fullscreen expand focus frame free full screen fullscreen image lines maximize outline photo photos picture resize select selection settings size square ui zoom"},
+        {"name": "crop_landscape", "tags": "adjust adjustments area aspect ratio border crop crop landscape dimensions edit edit tool editing frame framing horizontal image image editing images landscape landscape mode media media editing modify orientation outline photo photo editing photos picture picture editing rectangle rectangular reframe resize settings shape size tool visual wide ratio wide screen"},
+        {"name": "crop_original", "tags": "add adjust adjustments album area art border collection crop edit editing embed files frame gallery graphic illustration image images insert landscape media mountain nature original photo photos picture rectangle settings size square sun sunrise sunset upload"},
+        {"name": "crop_portrait", "tags": "adjust adjustments area aspect ratio crop dimensions edit editing editor format frame framing image images media modify photo photography photos picture portrait rectangle reframe resize settings shape size square tool"},
+        {"name": "crop_rotate", "tags": "adjust adjustments area arrow arrows aspect ratio canvas circle clockwise corners counter-clockwise crop direction edit editing frame graphic image images manipulate modify orientation photo photos picture rearrange reorient resize rotate settings size square tool transform turn visual"},
+        {"name": "crop_square", "tags": "adjust adjustments app application area area selection aspect ratio border boundary components contract crop cut design edit editing editor expand extend frame framing geometric image images interface manipulate media modify open photo photos picture rectangle resize screen settings shape shapes shrink site size square square crop tool transform trim ui ux web website window"},
+        {"name": "currency_bitcoin", "tags": "bill bitcoin blockchain card cash circle coin commerce cost credit crypto cryptocurrency currency digital digital asset digital currency dollar dollars economics finance financial symbol franc investment letter b money online online payment oval pay payment price shopping stripes symbol trading two lines virtual currency wealth"},
+        {"name": "currency_franc", "tags": "banking bill budget capital card cash coin commerce cost credit currency dollar dollars economic euro exchange finance financial foreign franc global income international investment market monetary money online pay payment price savings shopping swiss symbol trade transaction value wealth"},
+        {"name": "currency_lira", "tags": "bar bill buy capital letter card cash coin commerce cost credit currency dollar dollars economic economy exchange finance financial foreign currency international currency l letter lines lira money online pay payment price sell shopping stack stacked symbol t three lines tl symbol transaction turkish lira value"},
+        {"name": "currency_pound", "tags": "accounting alphabet banking bill british pound budget card cash coin commerce cost credit currency dollar dollars economics exchange finance financial gbp great britain letter money online pay payment pound price shopping sign sterling symbol transaction typography united kingdom value wealth"},
+        {"name": "currency_ruble", "tags": "banking bill billing budget business card cash character coin commerce cost credit currency dollar dollars economy exchange fiat currency finance financial foreign exchange letter money online pay payment payment methods price price tag purchase rate rouble ruble russian currency sale shopping symbol trade transaction"},
+        {"name": "currency_rupee", "tags": "bank banking bill buy card cash coin commerce cost credit currency dollar dollars economic economy finance financial india indian currency indian money indian rupee investment market money online pay payment price purchase rupee sell shop shopping store symbol transaction wealth"},
+        {"name": "currency_yen", "tags": "bank banking bill capital card cash coin commerce cost credit currency dollar dollars economic exchange finance financial income japan japanese money online pay payment price rate shopping sign symbol transaction value wealth yen"},
+        {"name": "currency_yuan", "tags": "banking bill business buy card cash character china chinese coin commerce cost credit currency dollar dollars economic exchange finance financial investment money online pay payment price renminbi rmb sell shopping sign symbol text trade transaction type value yuan"},
+        {"name": "deblur", "tags": "adjust adjustment application button clarity contrast control correction deblur detail edit editing effect enhance face filter focus graphic horizontal lines image lines photo photography sharpen software squiggly lines straight lines tool visual waves"},
+        {"name": "dehaze", "tags": "adjust adjustments air atmospheric clarity clear dehaze edit editing effect enhance filter fog forecast graphic hamburger menu haze icon image lines menu photo photography pictogram picture remove sharpen sky symbol unfog visibility vision weather"},
+        {"name": "details", "tags": "additional data data icon detail details dots edit editing ellipsis enhance expand expand details explore extra further details horizontal dots image information information icon menu menu icon more more menu open options options icon overflow icon overflow menu photo photography reveal settings settings icon sharpen show more three dot menu three dots triangle view"},
+        {"name": "dirty_lens", "tags": "alert blurred camera capture circle cleaning dirt dirty equipment focus image issue lens maintenance media notification object obscured optical outline photo photography picture problem smudge splat spot stain unclear warning"},
+        {"name": "edit", "tags": "action alter author change compose control create document edit editing form glyph input mode mode_edit mode_edit_outline modify new outline pen pencil revise shape stroke text tool update write writing"},
+        {"name": "euro", "tags": "banking bill card cash coin commerce cost credit currency currency symbol dollars economics euro europe european european currency euros exchange finance financial symbol glyph horizontal lines international currency line monetary money money symbol online pay payment price shape shopping stroke symbol trade value wealth"},
+        {"name": "exposure", "tags": "add adjustment bar brightness camera contrast controls edit editing effect exposure graphic image indicator iso level light lines minus photo photography picture plus scale settings slider subtract toggle visual"},
+        {"name": "exposure_neg_1", "tags": "1 adjust brightness brightness adjustment camera control contrast controls dark darker decrease digit dim edit editing effect exposure exposure level filter image image adjustment level light light adjustment minus minus one neg negative numbers photo photo editing photo effect photography photography editing settings subtract symbol value"},
+        {"name": "exposure_neg_2", "tags": "2 adjust brightness camera contrast control correction dark decrement digit edit editing effect exposure image indicator level light media meter minus multimedia neg negative number numbers photo photographic photography picture processing setting settings slider subtract symbol two"},
+        {"name": "exposure_plus_1", "tags": "1 add adjustment arithmetic brightness button camera setting contrast count counter digit edit editing effect exposure exposure plus one image increase increment increment value math number numbers numerical numerical increment numerical value one photo photography plus plus one plus sign setting settings sign symbol ui control value"},
+        {"name": "exposure_plus_2", "tags": "2 add adjust adjustment brightness contrast darkroom digit digital edit editing effect enhancement exposure filter graphic image image editing increase levels math modify number number 2 numbers photo photo editor photography picture plus plus 2 positive settings symbol two"},
+        {"name": "exposure_zero", "tags": "0 adjust balance brightness camera centered contrast control default digit digital edit editing editor effect exposure image level light midpoint multimedia neutral numbers photo photography point reset setting settings slider symbol value visual zero"},
+        {"name": "face_retouching_natural", "tags": "adjust ai artificial automatic automation avatar beauty camera clean clear custom edit editing effect emoji emotion enhancement face faces filter genai glow head image improve intelligence magic natural perfect photo photography picture portrait profile remove imperfections retouch retouching settings skin smart smooth spark sparkle star studio tag technology video"},
+        {"name": "face_retouching_off", "tags": "avatar beauty blemish block cancel circle disable disabled edit editing effect emoji emotion enabled enhance eye face faces features filter head human image imperfect mouth natural off on person photo photography portrait profile remove retouch retouching settings skin slash tag user"},
+        {"name": "filter", "tags": "adjustments categorization categorize choices collection collections control criteria data edit editing effect filter funnel image landscape list manage management mountain mountains narrow narrowing options organization organize photo photography picture preferences refine refinement rules select selection settings sort sorting view"},
+        {"name": "filter_1", "tags": "1 adjust amount choice control count criteria customization data digit edit editing effect filter filtering funnel image images limit list multiple narrow number numbers one options organize photography picture pictures preferences quantity refined restriction results select settings sort sorting specific stack symbol view"},
+        {"name": "filter_2", "tags": "2 array categorize count customize data digit display edit editing effect filter filter 2 filter by 2 funnel image images level 2 limit list multiple narrow number numbers numeral options parameters photography picture pictures preferences quantity refine results second selection settings sort specifications stack symbol value view"},
+        {"name": "filter_3", "tags": "3 adjust adjustment bars control controls count counting customize data digit edit editing effect filter filters funnel image images line lines list multiple number numbers numeral options photography picture pictures preferences refine refinement select selection settings sort sorting stack symbol three triangle"},
+        {"name": "filter_4", "tags": "4 adjust choose control count criteria data digit digit 4 edit editing effect filter four funnel image images level limit list manage multiple narrow number 4 numbers options organize photography picture pictures process quantity rank refine restriction. select settings sieve sort stack symbol value"},
+        {"name": "filter_5", "tags": "5 adjust configure constraints count criteria data digit digit five edit editing effect filter filtering data five five items funnel image images items limit multiple number number five number of items numbers options organize photography picture pictures preferences quantity refine restrictions results selection settings sort stack symbol"},
+        {"name": "filter_6", "tags": "6 apply filter count count filter data filter data refinement digit edit editing effect filter filter by number filter count filter results image images item count limit list filter max items multiple number number 6 number six numbered filter numbers numeric filter photography picture pictures quantity quantity filter refine refine results settings six six items sort stack symbol"},
+        {"name": "filter_7", "tags": "7 adjust analysis category choose count customize data digit digit 7 edit editing effect filter funnel image images limit list manage multiple number number 7 numbers options organize photography picture pictures preferences refine restrict results search selection settings seven sieve sorting stack symbol type"},
+        {"name": "filter_8", "tags": "8 adjust categorize constrain control criteria criterion customize data digit digit 8 edit editing effect eight filter filtration funnel image images limit modify multiple narrow number 8 number. numbers options organize parameters photography picture pictures preferences refine selection settings sifter sort specifications stack symbol"},
+        {"name": "filter_9", "tags": "9 adjust categories control counter criteria data digit edit editing effect filter funnel image images list manage modify multiple narrow nine nine items number numbers options organize parameters photography picture pictures preferences reduce refine select settings sort stack symbol tool"},
+        {"name": "filter_9_plus", "tags": "+ 9 9 plus 9+ amount criteria data digit edit editing effect filter filtering funnel image images limit limit results multiple nine nine plus number numbers options photography picture pictures plus preferences quantity refine refine results search search filter search options select select criteria selection limit settings sort sort data stack symbol threshold"},
+        {"name": "filter_b_and_w", "tags": "and apply b b&w black black and white camera classic color correction contrast darkroom digital edit editing effect filter grayscale image image adjustment images light monochrome negative photo effects photography picture picture settings pictures saturation settings shadow style toggle tone vintage visual w white"},
+        {"name": "filter_center_focus", "tags": "adjust aiming alignment box calibration camera camera settings center center focus corners crosshair crosshairs dot edit filter filter settings focus framing guides image lens lines optical perspective photo photo editor photo filter photography photography tools picture refine settings square targeting viewfinder"},
+        {"name": "filter_drama", "tags": "atmosphere cinematic cloud dark drama edit editing effect film filter graphic icon image mood movie ominous photo photography picture processing scene setting sky sky camera special effects stormy symbol tone video visual weather"},
+        {"name": "filter_frames", "tags": "albums arrangement boarders border camera center depth display edit editing editor effect filter filters focus frame frames frames. gallery image images layering layout multimedia multiple options order organize overlap perspective photo photography picture pictures rectangles screen sequence sort stacked view visual windows"},
+        {"name": "filter_hdr", "tags": "button camera control earth edit editing effect effects environment filter generic geography graphics hdr hills icon image image adjustment image filter landscape mountain mountains nature outdoors peak photo photo effects photography picture scenery shape simple summit symbol terrain ui ux view vista"},
+        {"name": "filter_none", "tags": "basic blank clean clear default empty filter multiple no change no effect no filter none normal null original pristine pure remove filter reset revert square stack standard transparent unapplied unedited unenhanced unfiltered unfiltered data unfiltered image unfiltered results without zero"},
+        {"name": "filter_tilt_shift", "tags": "adjustment aperture blur camera center circle circular control dash dashed depth of field dot edit editing effect filter filter settings focus image images lens lens focus miniature optic perspective photo photography photography tool picture pictures point precision settings shift target tilt tilt shift zoom"},
+        {"name": "filter_vintage", "tags": "abstract adjust bloom blossom camera decorative edit editing effect filter flower graphic image images lotus nature ornate photo photography picture pictures plant swirl vintage"},
+        {"name": "flare", "tags": "blast bright burst burst of light camera edit editing effect flare flash gleam glint glow highlight illumination image images lens flare light optical optical effect photography picture pictures ray of light shimmer shine sparkle special effect star sun visual effect"},
+        {"name": "flash_auto", "tags": "a auto auto mode automatic bolt bright burst camera capture choosing control electric electricity energy fast flash highlight image instant light lightning mode off on option photo photography picture power selection setting symbol thunderbolt toggle video zap"},
+        {"name": "flash_off", "tags": "bolt camera control camera flash camera option camera setting dark deactivate disable flash disable light disabled electric enabled energy fast flash flash disabled flash off flash setting instant light off lighting lighting off lightning low light mode off no flash not lit off on photo setting photography photography icon photography tool setting disabled slash thunderbolt turn off visual setting"},
+        {"name": "flash_on", "tags": "activate alert bolt bright camera camera flash danger disabled electric electricity enabled energy fast flash glow illuminate indication instant light lighting lightning notification off on photo photo flash photography power shine slash status thunder thunderbolt toggle turn on warning"},
+        {"name": "flip", "tags": "actions adjust arrow change change direction commands dash dashed direction edit editing flip horizontal flip image mirror modify opposing arrows options orientation pivot reflect reverse rotate scan scanning settings spin swap switch tools transform turn two arrows update vertical flip"},
+        {"name": "flip_camera_android", "tags": "android arrows back camera camera camera direction camera icon camera perspective camera switch center change camera circle circular arrows device direction edit editing flip flip camera front camera image mobile orientation photo photography rear camera reverse camera rotate self camera selfie square switch camera turn two arrows video video recording"},
+        {"name": "flip_camera_ios", "tags": "DISABLE_IOS android arrows camera camera toggle capture change circle control device direction disable_ios edit editing flip flip camera front camera image ios media mobile orientation photo photography picture rear camera record rotate rotate camera selfie camera smartphone swap switch camera turn video video call video chat"},
+        {"name": "gradient", "tags": "appearance art background blend color contrast dark design edit editing effect element fade fill filter gradient graphic image images intensity light option photography picture pictures property setting shade style tone tool transition visual"},
+        {"name": "grain", "tags": "adjust analog art detail digital art dots edit editing effect film filter grain graphic image images imperfection media multimedia noise overlay photo effect photography picture picture effect pictures pixels quality retro speckles square static texture video effect vintage visual"},
+        {"name": "grid_off", "tags": "arrangement blocked collage cross out diagonal line disable disabled display enabled format grid grid off hide image inactive layout no grid off on pattern presentation rectangles remove grid removed slash squares structure toggle ungrid view"},
+        {"name": "grid_on", "tags": "alignment arrange array background blocks bounding box cells chart collage columns data diagram disabled display enabled format geometry graph grid image layout lines matrix off on organize outline pattern plot rows segmentation slash spreadsheet squares structure table view"},
+        {"name": "hdr_enhanced_select", "tags": "add adjustment alphabet brightness camera character color contrast dynamic effect enhance enhanced enhancement film filter font frame graphic hdr high high dynamic range image letters media mode movie option photo photography picture plus quality range select selection setting square symbol text type video vivid"},
+        {"name": "hdr_off", "tags": "alphabet button camera settings cancel character control diagonal line disabled dynamic enabled enhance font hdr hdr disabled hdr off high high dynamic range high dynamic range disabled high dynamic range off image adjustment image settings letters letters h d r letters hdr off on option photo editing photography range select slash strike through symbol text text cancel text disabled text off three letters type video settings visual settings"},
+        {"name": "hdr_on", "tags": "activate add alphabet button camera capture character control dynamic enable enhance enhancement feature font hdr high high dynamic range image letters movie on option photography picture plus quality range record select setting switch symbol text toggle type video"},
+        {"name": "hdr_plus", "tags": "+ activate add alphabet button camera character circle control dynamic editor effect enable enhance enhancement filter font geometric hdr hdr mode hdr plus hdr plus on high high dynamic range image processing imaging letters media on photo photography photography mode picture plus quality range select settings switch symbol text toggle type video visual effect"},
+        {"name": "hdr_strong", "tags": "adjust adjust image brightness camera camera settings circles contrast dots dynamic enhance enhanced enhanced image exposure exposure settings hdr hdr strong high high dynamic range image image editing improve options photo photo editing photo quality photography picture picture settings quality range settings strong visual visual effect visual settings"},
+        {"name": "hdr_weak", "tags": "camera circle circles contrast control correction dark disabled dots dynamic effect empty enhance enhancement exposure filter hdr high high dynamic range hollow image inactive light low off option outline photo photography range ring setting ui weak"},
+        {"name": "healing", "tags": "aid band-aid bandage clinic cross cure doctor edit editing emergency first aid fix gauze healing health health care health kit healthcare hospital image injury medical medical supplies medicine nurse patient pharmacy plaster recovery remedy treatment wellness wound"},
+        {"name": "hevc", "tags": "abbreviation acronym alphabet character codec coding compression digital efficiency encoding file type film font format h.265 hevc high high efficiency video coding identification label letters media movie multimedia playback short standard streaming symbol tag technology text title type typography video"},
+        {"name": "hide_image", "tags": "blocked button camera censored diagonal line disabled display enabled eye hidden hide image invisible landscape media mountain mountains obscured off on option photo photography picture privacy reveal screen sensitive setting show slash strikethrough switch toggle unhide view visible vision"},
+        {"name": "image", "tags": "add adjust album art border collection crop edit embed files frame gallery graphic illustration image insert landscape media mountain mountains nature original photo photography picture rectangle square sun sunrise sunset upload"},
+        {"name": "image_aspect_ratio", "tags": "adjust aspect aspect ratio crop dimensions display format height image media movie orientation photo photography picture presentation proportion ratio rectangle resize resolution scale screen settings size square video view visual width"},
+        {"name": "image_not_supported", "tags": "alert broken image content default diagonal line disabled display document enabled error failed fallback file graphic image image not supported information invalid landscape media media player missing mountain mountains multimedia not off on photo photo not supported photography picture picture not supported placeholder preview rectangle slash square status supported unavailable warning"},
+        {"name": "image_search", "tags": "analyze bing visual search camera search content search database search digital eye discover image discovery explore find find image find similar glass google lens identify image image input image search internet search landscape look look up magnify magnifying magnifying glass media search mountain mountains object recognition online search photo photo search photography picture picture search reverse image search scan search search bar see visual search web search"},
+        {"name": "incomplete_circle", "tags": "active activity indicator animation arc broken circle busy chart circle curve geometric graphic incomplete incomplete circle indicator line loading loading spinner open circle partial circle pending process progress progress indicator refresh refresh spinner reload ring round segment shape spinning waiting"},
+        {"name": "iso", "tags": "add adjustment bar brightness camera controls edit editing effect exposure graphic image indicator iso level light lines minus photo photography picture plus scale sensor settings shutter slider speed subtract toggle visual"},
+        {"name": "landscape", "tags": "chart contour data diagram elevation environment geography graphic hill hills image land landscape location map mountain mountains natural nature outdoor peak photo photography picture region scenery terrain travel view"},
+        {"name": "leak_add", "tags": "add assembly attach build connect connection construct construction creation data drip droplet expand flow form include increase insert issue join leak link liquid maintenance network new pipe plumbing plus problem repair service signals stream synce water wireless"},
+        {"name": "leak_remove", "tags": "anti leak blocked cancel connection data delete disabled drop droplet eliminate enabled fix leak forbidden leak leak detection leak prevention link liquid network no leak no pipe leak no plumbing issue no water leak off offline on pipe plug leak plumbing repair prohibited remove remove leak seal leak service signals slash stop leak synce water water damage prevention wireless"},
+        {"name": "lens", "tags": "active angle badge basic centralized circle complete disc dot element eye filled fish focused full geometry image indicator isolated lens lone marker minimal moon orb panorama perfect photo photography picture point round selected shape simple single solid sphere status unified whole wide"},
+        {"name": "linked_camera", "tags": "attached camera capture chain connect connected connection device digital equipment image internet lens link linked linked camera linked media media multimedia multimedia connection network photo photography photography equipment picture recording share sharing shoot signal signals snapshot social media sync visual wireless"},
+        {"name": "logo_dev", "tags": "app application brand build building business code coding company computer creating creator design dev dev.to developer development digital identity internet logo mark online product programming software startup symbol tech technology web website"},
+        {"name": "looks", "tags": "accessory circle clarity enhancement eyeglasses eyes eyewear fashion focus frames glasses half lenses looking looks magnifying glass ophthalmology optical optometrist perception rainbow reading glasses see seeing sight spectacles style sunglasses view vision"},
+        {"name": "looks_3", "tags": "3 arrangement controls count customization data digit filter grouping hierarchy information layers level list looks menu number 3 numbers numerical options ordered organization priority ranking segmentation sequence settings sort square stacking symbol three"},
+        {"name": "looks_4", "tags": "4 block block four count design digit digit four element figure four square geometry graphic icon interface looks looks 4 number number four numbers numeral numeral four quantity shape square symbol ui ux value"},
+        {"name": "looks_5", "tags": "5 browse digit discover enlarge examine explore find find icon find symbol focus input inspection investigate locate look look for look through look up looks magnifying glass magnifying glass symbol numbers observe query review scan search search bar search field search symbol square survey symbol view zoom"},
+        {"name": "looks_6", "tags": "6 achievement approval badge bookmark choice digit endorse evaluate excellence favorite five star gold star highlight important like looks mark numbers positive preference premium quality ranking rating recommend review reward save select square star success symbol"},
+        {"name": "looks_one", "tags": "1 beginning competition count counting digit exclusive first initial leading looks major math mathematics number one numbers numeral numerical one original position primary principal ranked ranking single sole square start symbol top unique winner"},
+        {"name": "looks_two", "tags": "2 digit double eye eyes glasses lenses look looks numbers observation oculist opthalmology optical optics pair perceive seeing sight spectacles square symbol two view vision visual watch"},
+        {"name": "loupe", "tags": "+ add analyze circle details discover enlarge explore field find focus glass handle input inquiry investigate line locate look loupe magnify magnifying magnifying glass navigation new plus probe query research search seek symbol tool utility zoom"},
+        {"name": "mic_external_off", "tags": "audio audio device audio input broken circle communication diagonal line disabled enabled error external external microphone media mic microphone mute not connected not working off on recording rectangle slash sound sound device sound input speech stand technology voice volume warning"},
+        {"name": "mic_external_on", "tags": "active audio broadcast circle communication conference connected connected mic disabled enabled equipment external external mic input input device line live media meeting mic microphone off on oval podcast recording slash sound sound input speak streaming studio talk voice"},
+        {"name": "monochrome_photos", "tags": "album black black and white camera collection digital media editing effect filter gallery grayscale image library media monochrome multimedia multiple photos organize photo photograph photography photos picture snapshot square stack view visual white"},
+        {"name": "motion_photos_auto", "tags": "A advanced photo alphabet animation auto auto play automatic camera capture character cinematic circle creative photo digital media dot enhanced photo feature font gif interface letters lines live live photo live view motion motion photos auto moving image multimedia option photography photos play recording settings smart photo symbol technology text type video"},
+        {"name": "motion_photos_off", "tags": "animated animation block camera cancel capture circle circle with line deny diagonal line disable disabled enabled image line live live photo media motion motion photo off on photo photography photos picture recording slash snapshot stop toggle off video visual"},
+        {"name": "motion_photos_on", "tags": "active animation camera capture circle content digital disabled enable enabled feature film function image live media motion movement movie moving multimedia off on photo photography photos picture play playback record recording setting slash technology video visual"},
+        {"name": "motion_photos_pause", "tags": "action animation button camera capture circle control frame freeze frame halt icon interaction live photo live photos media media control moment motion motion photo motion photos pause paused photography photos playback playback control still still image stop symbol video video control"},
+        {"name": "motion_photos_paused", "tags": "action animation button camera capture circle control frame freeze frame halt icon interaction live photo live photos media media control moment motion motion photo motion photos pause paused photography photos playback playback control still still image stop symbol video video control"},
+        {"name": "movie_creation", "tags": "capture cinema clapperboard creation digital drive edit entertainment file film media movie movie file movies multimedia play play movie play video playback record recording reel slate storage video video camera video file videotape view watch"},
+        {"name": "movie_filter", "tags": "adjust adjust video ai artificial automatic automation camera cinema cinema filter clapperboard creation custom edit effect effects enhance video film film filter filter genai intelligence magic media media filter movie movie effects movie filter movies production reel settings slate smart spark sparkle star stars studio video video editing video effects video filter"},
+        {"name": "mp", "tags": "adjustment alphabet audio audio output button character control dashboard font graphic icon image interface letters level low media megapixel mp multimedia music mute options output photo photography pixels player quality quiet resolution settings silent sound speaker symbol text toggle type ui control voice volume"},
+        {"name": "music_note", "tags": "audio audio file audio icon audiotrack clef composition eighth note key listen media media controls melody music music icon musical note play player playlist quaver rhythm score song sound sound icon track tune waveform"},
+        {"name": "music_off", "tags": "audio audio off audiotrack block blocked music cross out disable disabled disabled music enabled forbid forbidden music key media media control music music control music disabled music off mute mute audio mute music mute sound mute volume no audio no music no sound note off on quiet silence silent slash slashed music sound sound off track volume volume off"},
+        {"name": "nature", "tags": "biology bloom botanical botany branch eco ecology environment environmental floral flourish foliage forest garden gardening green grow growth leaf leaves life natural nature organic outdoor outside park plant sprout stem tree vegetation wilderness"},
+        {"name": "nature_people", "tags": "activity adventure body camping community environment exploring figures forest gathering green group hiking human landscape mountain natural nature outdoor outdoors outside park people person recreation silhouette together trail tree trees walking wilderness"},
+        {"name": "navigate_before", "tags": "angle arrow arrows back before breadcrumbs carousel chevron control direction go back guide history indicator left media motion move left navigate navigation pagination pointer previous return rewind slider step back symbol undo v-shape wizard"},
+        {"name": "navigate_next", "tags": "advance angle bracket arrow arrows caret chevron direction forward go indicator list menu move navigate navigation next point pointer proceed right right arrow"},
+        {"name": "palette", "tags": "appearance art artist artistic brush color colors creative customization customize design designer draw drawing editor filters graphic hues paint painting palette shades spectrum style swatch theme tint tints tone tones visual"},
+        {"name": "panorama", "tags": "ad advertisement advertising angle banner display elongated graphic horizontal image landscape layout marketing mountain mountains panorama perspective photo photography picture planning promotion rectangular scenic stretched view vista wide"},
+        {"name": "panorama_fish_eye", "tags": "angle basic basic shape button circle circular design element donut empty circle eye fish full geometry glyph graphic hollow circle hollow shape icon image indicator lens line circle marker minimal moon outline outline shape panorama photo photography picture placeholder ring round shape simple stroke symbol ui control visual element wide"},
+        {"name": "panorama_horizontal", "tags": "angle aspect ratio camera composition display expand format fullscreen geometric horizontal image landscape layout media panorama panoramic perspective photo photography picture rectangle scene scenic screen shape stretch view visual wide wide shot"},
+        {"name": "panorama_photosphere", "tags": "360 angle ar augmented reality camera environment experience explore globe horizontal image immersive landscape map panorama perspective photo photography photosphere picture scene sphere surround travel view virtual reality visual vr wide wide angle world"},
+        {"name": "panorama_vertical", "tags": "angle aspect ratio building camera capture compose field of view framing geometry image landscape lines nature orientation outdoor panorama panorama vertical perspective photo photography picture rectangle scene shape shoot stitch travel urban vertical view wide wide angle"},
+        {"name": "panorama_wide_angle", "tags": "adjust album angle aperture broad camera capture crop edit expansive film focal length frame gallery horizontal image landscape lens media panorama perspective photo photography picture scenic view vision visual wide wide angle"},
+        {"name": "photo", "tags": "album basic camera roll digital file gallery geometric graphic icon image landscape media mountain mountains nature outline photo photo library photography picture picture library rectangle representation shape simple square sun sunrise sunset symbol visual"},
+        {"name": "photo_album", "tags": "album archive bookmark browsing collection collection of photos digital album gallery image image gallery images label library media memories memories album mountain mountains multimedia organization photo photo album photo collection photo storage photography photos picture pictures portfolio rectangle ribbon save scrapbook snapshots square stacked rectangles stacked squares tag viewing visual archive visual content visual library"},
+        {"name": "photo_camera", "tags": "analog button camera capture circle device digital film icon image input lens media movie multimedia multimedia input photo photograph photography picture record shoot shutter square symbol technology video videography visual"},
+        {"name": "photo_camera_back", "tags": "back back camera camera capture circle device flash focus gadget image landscape lens mountain mountains photo photography picture rear rear camera record shoot shutter square technology video"},
+        {"name": "photo_camera_front", "tags": "account border camera capture circle create create media face file file creation front front camera human image image capture lens media media capture multimedia outline people person photo photo tool photography photography tool picture portrait profile record selfie shutter square upload upload media user video video capture video tool"},
+        {"name": "photo_filter", "tags": "adjust adjust image adjust photo ai artificial automatic automation brightness color correction contrast custom edit edit image edit photo effects enhance image enhance photo enhancement exposure filter filters genai gradient graphic design image image filter intelligence levels magic options photo photo filter photography picture saturation settings smart spark sparkle star vignette visual effects"},
+        {"name": "photo_library", "tags": "album archive assets browse catalog collection compilation data. directory display files image image gallery layers library management media mountain mountains multimedia organization organize overlay photo photo library photography photos picture pictures rectangles repository squares stack storage view visual"},
+        {"name": "photo_size_select_actual", "tags": "actual album basic camera roll dash dashed digital file gallery geometric graphic icon image landscape media mountain mountains nature outline photo photo library photography picture picture library rectangle representation select shape simple size square sun sunrise sunset symbol visual"},
+        {"name": "photo_size_select_large", "tags": "adjust adjustments album bigger dash dashed edit editing expand file formatting frame full screen gallery image landscape large library maximize media mountain mountains options photo photography picture preview rectangle resize scale scenery select selection size sun view"},
+        {"name": "photo_size_select_small", "tags": "adjust album arrangement compact condense dimensions display edit editing format grid image large layout library matrix minimize mountain mountains options photo photography picture rectangle reduce select shrink size small square thumbnails tiles view zoom out"},
+        {"name": "picture_as_pdf", "tags": "adobe adobe acrobat alphabet as character copy digital document digital file document document icon document preview document representation document symbol document viewer duplicate electronic document electronic file electronic file icon file file format file symbol file type font format image letters multiple pages paper paper icon pdf pdf file pdf icon pdf symbol photo photography picture portable document format show document show file stack symbol text type view document view file"},
+        {"name": "portrait", "tags": "account account icon accounts avatar bust contact contact icon face figure head human identity individual login man member outline people person person outline person symbol photo picture portrait profile register shape shoulders sign in sign up silhouette user user icon user profile"},
+        {"name": "raw_off", "tags": "alphabet button camera cancel character close code data deactivate digital disabled enabled file format file type font image image file image format letters off on original photo photo format photography photography setting raw raw image remove slash source stop switch symbol text toggle turn off type unprocessed"},
+        {"name": "raw_on", "tags": "abstract activate active alphabet button character control device disabled electric electronic enable enabled engage font graphic image interface letters light line machine manipulate mechanism minimalist off on operational option original photo photography power raw setting shape slash state switch symbol text toggle type ui"},
+        {"name": "receipt_long", "tags": "accounting bill bill icon business check checkout details document document icon expense expense icon financial financial icon history invoice list long long receipt long receipt icon order paper paper icon paperwork payment payment icon purchase receipt receipt icon record register shopping store transaction transaction icon"},
+        {"name": "remove_red_eye", "tags": "display eye glance hidden hidden text insight iris look looking observe optic password visibility peek perspective preview private public red remove reveal security see show sight sighted spy stare toggle visibility unhide view visibility visible vision visual watch"},
+        {"name": "rotate_90_degrees_ccw", "tags": "90 90 degrees action adjustment angle arrow arrows ccw circle section circular arrow control counter-clockwise curve curve arrow degrees direction edit editing geometric image left media orientation photo pivot quadrant reorient rotate rotation spin symbol transform turn visual"},
+        {"name": "rotate_90_degrees_cw", "tags": "90 90 degree turn 90 degrees adjust angle arrow arrows ccw circle clockwise curved arrow degrees direction edit editing editor image image editor manipulate orientation photo photo editor pivot right turn rotate rotation spinning swiveling tool transformation turn turning"},
+        {"name": "rotate_left", "tags": "action adjust around arrow back change circle circular arrow counter-clockwise curved arrow dash dashed direction edit history inprogress left load loading refresh manipulation orient orientation previous redo refresh reload renew reverse revert rotate rotate left rotation spin step back turn turn back undo"},
+        {"name": "rotate_right", "tags": "action app around arrow button change direction circular circular arrow control counter-clockwise curve direction element history icon inprogress interface load loading refresh loop pointer redo refresh reload renew repeat restart revert right rotate rotate right shape spin right symbol turn turn right ui undo web"},
+        {"name": "shutter_speed", "tags": "adjustment aperture aperture control blades camera camera controls capture circle control duration exposure exposure time geometry image image capture iris lens manual manual mode mechanism photo photograph photographic photography photography settings photos picture radial segmented setting shutter shutter speed speed stop time timer watch"},
+        {"name": "slideshow", "tags": "begin demonstrate display entertainment exhibit film image sequence media movie movie screen multimedia photo display photos play play button playback presentation projector projector screen right arrow screen screen display show show images slide slideshow square start triangle video view viewing"},
+        {"name": "straighten", "tags": "adjust align angle arrangement bend calibrate curve distribute evenly grid horizontal layout length levels line linear measure measurement order organize parallel perpendicular position right angle ruler size straight straighten structure symmetrical tidy uniform vertical"},
+        {"name": "style", "tags": "adjust alignment arrangement block booklet cards configure content design document edit editor filters formatting indent layout lines menu options paragraph paragraphs preferences presentation rich text settings spacing structure style tags text typeface typography visual writing"},
+        {"name": "switch_camera", "tags": "app application arrow arrows back camera camera camera direction capture change camera communication content creation device flip camera front camera media mobile photo photography picture rear camera record rectangle rotate camera selfie camera switch switch camera toggle camera two arrows video video camera videography"},
+        {"name": "switch_video", "tags": "arrow arrows back camera broadcasting call camera camera direction camera flip camera rotation camera switch camera toggle camera view change camera conference filming flip camera front camera photography record reverse camera rotate camera selfie camera streaming switch switch camera switch video toggle camera video video call video camera video switch videos view camera"},
+        {"name": "tag_faces", "tags": "add character chat cheerful circle communication emoji emoticon emotion expression face faces feeling grin happy insert joy message mood outline reaction round satisfied select smile smiley symbol tag text"},
+        {"name": "texture", "tags": "abstract appearance background bumpy crosshatch detail diagonal effect fill filter finish grain grid grit horizontal lines layer lines material matte overlay parallel lines pattern rough shiny smooth stripes style surface surface finish texture vertical lines visual"},
+        {"name": "thermostat_auto", "tags": "A adjustment appliance auto automatic automation celsius circle climate comfort control cooling device dial environment fahrenheit gauge heating home automation hvac indicator meter mode pointer sensor settings smart home system temp temperature thermometer thermostat weather"},
+        {"name": "timelapse", "tags": "accelerate adjustment arrow camera capture circle clock clockwise control duration effect fast film filmography loop media motion photo photography playback recording setting speed speed up time timelapse timer video videography"},
+        {"name": "timer", "tags": "alarm alert appointment bell chronometer circular clock countdown deadline deadline management deadline tracking disabled duration enabled event event tracking hand hour hand measurement minute hand notification pointer reminder ringing round running time schedule second hand speed stopwatch time time limit timekeeping timer watch"},
+        {"name": "timer_10", "tags": "10 alarm alert bell camera circle circular clock control countdown delay dial digits disabled duration enabled hour measurement media control minute notification number number 10 numbers photo recording reminder schedule second seconds setting stopwatch ten time timer video watch"},
+        {"name": "timer_3", "tags": "3 circle clock control countdown digit digits duration fast interval lapse measure minutes number numbers numeral outline quick record round seconds shape speed start stop stopwatch three time timer track"},
+        {"name": "timer_off", "tags": "alarm alarm disabled alarm off alert bell cancel chronometer off circle clock clock canceled clock disabled clock off countdown cross out diagonal line disable timer disabled duration enabled measurement no alarm no time clock no timer notification off on remove remove timer rounded shape schedule slash stop stop alarm stop timer stopwatch off time time clock disabled time clock off time off timer timer canceled timer disabled timer off watch x"},
+        {"name": "tonality", "tags": "adjust audio audio icon audio settings circle control edit editing equalizer equalizer icon equalizer settings filter frequency frequency spectrum greyscale image levels levels icon music music icon music settings photography picture settings shade shadow sound control sound wave sound wave icon spectrum spectrum icon tonality volume volume control volume icon wave waveform waveform icon"},
+        {"name": "transform", "tags": "adjust alter anchors aspect ratio box change contract corners crop distortion edit editing enlarge expand format graphic design image image editing layout modify move perspective photo picture points position rearrange resize scale shrink size square transform visual"},
+        {"name": "tune", "tags": "adjust adjustments audio balance bars bass configure control controls custom customize edit editing equalizer filter filters instant levels lines mix modify music options preferences setting settings setup slider sliders sound switches three lines tone treble tune volume"},
+        {"name": "video_camera_back", "tags": "back camera capture electronic device entertainment film image landscape lens media mountain mountains movie multimedia photo photography picture rear record recording recording device rectangle reverse rounded corners technology video video capture"},
+        {"name": "video_camera_front", "tags": "account broadcast camera capture communication face film film recording filming front front camera human image lens live stream media movie movie recording multimedia online meeting people person photo photography picture profile record recording selfie shutter social media streaming user video video call video conference video recording videography virtual meeting vlogging webcam"},
+        {"name": "video_stable", "tags": "abstract alignment anti-shake balance camera capture digital film filming geometry gyroscope horizontal level line media motion movie multimedia recording rectangle setting shake smooth square stability stable steady taping technology vertical video video stable visual"},
+        {"name": "view_comfy", "tags": "arrange blocks boxes cells collection comfy content dashboard data display elements gallery grid information items layout matrix organise organization overview pattern presentation squares structure summary table thumbnail tiles view"},
+        {"name": "view_compact", "tags": "alignment arrange array blocks boxes columns compact dashboard display element. format grid layout matrix mosaic organize overview panels pattern presentation rectangles rows section shape squares structure tile view windows"},
+        {"name": "vignette", "tags": "adjustment border button camera circle corner dark edge edit editing effect enhancement fade filter frame gradient graphic icon image lens photo photography post processing radial round setting symbol ui element vignette visual"},
+        {"name": "vrpano", "tags": "360 angle camera circle digital experience globe image immersive landscape lens media mountain mountains pano panorama panoramic perspective photo photography picture reality rounded sensor sphere technology view virtual visual vr vrpano wide"},
+        {"name": "wb_auto", "tags": "A W adjust alphabet ambient light auto auto brightness auto light auto settings automatic automatic mode balance bright brightness bulb camera character control detection edit editing environment exposure font illumination image image adjustment lamp letters light bulb lighting mode option photo photography sensor settings symbol text type wb white white balance wp"},
+        {"name": "wb_cloudy", "tags": "air atmosphere balance climate cloud cloudy edit editing environment filled forecast graphic icon meteorology minimal nature outline overcast rain round rounded shape simple sky snow solid symbol temperature ui ui element weather white wp"},
+        {"name": "wb_incandescent", "tags": "balance base bright bulb edit editing electric electricity energy filament glass glow hint idea illumination incandescent innovation intelligent invention knowledge lamp light lightbulb lighting power screw setting settings shine socket solution suggestion s\u00e1ng t\u1ea1o thinking white wisdom wp"},
+        {"name": "wb_iridescent", "tags": "adjustments balance bright brightness camera edit editing effects electric electricity energy filter fluorescent gleam glow illumination image incandescent indoor iridescent lamp light light bulb lightbulb lighting photo photography picture power setting settings shimmer sparkle tungsten wb white white balance wp"},
+        {"name": "wb_shade", "tags": "adjust area balance blind building control cover curtains darkness dim geometry home horizontal house interior light light control lighting lines object privacy rectangle settings shade shutter slats space sunlight symbol toggle wb white window window blind window shade"},
+        {"name": "wb_sunny", "tags": "balance beams bright celestial circle climate day daylight environment evening forecast heat light lighting lines morning nature noon orb outdoors rays season sky solar star summer sun sunny temperature warm wb weather white"},
+        {"name": "wb_twilight", "tags": "ambient ambient light astronomy atmosphere balance calm celestial darkness dawn dim dimming dusk environmental fade fading gradient horizon landscape light lighting mood natural noon peaceful scenery serene sky sun sunrise sunset transition twilight view wb weather white"},
+    ],
+    "maps": [
+        {"name": "360", "tags": "360 360 degrees around arrow av camera circle circular complete control degree digital direction full view immersive interactive movement multimedia navigation panoramic perspective photo rotate rotation sphere spin turn user interface video view virtual reality visual vr web"},
+        {"name": "add_business", "tags": "+ add add building add business add business location add location bill building building and plus building with plus business business location card cash coin commerce company corporate create credit currency dollars enterprise establishment institution location map marker market marketplace money new office online organization pay payment pin plus point of interest retail shop shopping store storefront structure symbol"},
+        {"name": "add_location", "tags": "+ add add location add pin add point create cross destination direction geo tag geo tagging geographic location geography gps latitude location location marker longitude map map marker map pin maps marker navigation new new location pin pin location pin marker place place marker place pin plus poi point of interest position symbol travel"},
+        {"name": "add_location_alt", "tags": "+ add add location button control destination direction find geography glyph gps graphic icon locate location map maps mark marker navigate new new location pin pinpoint place place marker plus pointer position site spot symbol tag travel ui element"},
+        {"name": "add_road", "tags": "+ add add new build create destination direction graphic highway icon infrastructure journey line location map maps marker navigate new path plus road route sign stop street symbol traffic transportation travel ui ux way"},
+        {"name": "agriculture", "tags": "agriculture automobile botanical car cars crop cultivate cultivation farm farming farming tools field gardening grain ground grow growth harvest land line maps nature outline plant planting rake rural seeding seeds simplified tool tractor transport travel truck vehicle wheat yield"},
+        {"name": "airline_stops", "tags": "airline airplane airport arrow aviation circles connection destination destination. direction dots flight itinerary journey journey stops layover line location maps navigation path place plane points points of interest route stops transit transportation travel travel plans travel route trip"},
+        {"name": "airlines", "tags": "air air travel aircraft airlines airlines icon airplane airplane mode airplanes airport aviation booking booking app destination flight flight app flights fly flying journey mode on plane plane icon planes signal sky transport transportation travel travel app travel icon trip wings"},
+        {"name": "alt_route", "tags": "alt alternate alternate routes alternative arrows bifurcate branching change choice choices dash dashed detour different direction directions diversion itinerary journey map mapping maps multiple routes navigation options other path road route route options routes selection split street switch symbol transit transportation travel variety way"},
+        {"name": "atm", "tags": "alphabet atm automated automated teller machine banking bill building card cart cash cash machine character coin commerce credit currency deposit dollars finance financial finding font keypads letters location machine map money money machine navigation numbers online pay payment point of interest public rectangle screen service shopping slot structure symbol teller text transaction type withdrawal"},
+        {"name": "attractions", "tags": "Ferris wheel activity amusement amusement park attractions circle destination entertainment event excitement ferris fun geometry holiday landmark leisure lines maps park place places pleasure recreation ride spot theme park thrill tourism travel trip vacation view wheel"},
+        {"name": "badge", "tags": "accolade account achievement approval avatar award badge card certificate certified champion crest distinction emblem employee endorsed excellence face guarantee honor human id id card identification mark merit name official people person premium prize profile quality recognition reward seal security stamp star symbol token user verified warranty winner work"},
+        {"name": "bakery_dining", "tags": "baked goods bakery baking bread breakfast brunch cafe catering croissant cuisine dessert dining eat food food service ingredient meal menu oven pastry patisserie restaurant savory serving snack sweet table treat"},
+        {"name": "beenhere", "tags": "acknowledgement approve archive arrival been beenhere bookmark check check-in checked complete confirmed destination done favorite geo geographic here label landmark library location map mark marker navigation ok pin place point position previously read reading remember ribbon save seen select spot tag tick tourism travel trip validate verified visited visited place yes"},
+        {"name": "bike_scooter", "tags": "agile automobile bicycle bike car cars city commute exercise fast graphic maps mobility outdoor outline personal pictogram quick recreation rental ride scooter sharing sign simple sports symbol transport transportation travel two-wheeled urban vehicle vespa wheeled"},
+        {"name": "breakfast_dining", "tags": "bakery bread breakfast brunch butter catering circle cooking cuisine culinary delicious diner dining dish eat edible egg food fried egg kitchen meal menu morning nutrition order plate protein restaurant round serving sunny side up tasty toast yolk"},
+        {"name": "brunch_dining", "tags": "bistro breakfast brunch cafe champagne cuisine cutlery dining dining room diningware drink eat eatery eating food fork knife lunch meal mealtime nourish repast reservation restaurant setting silverware spoon table utensils"},
+        {"name": "bus_alert", "tags": "! alarm alert attention automobile breakdown bus car cars caution commuter danger error exclamation exclamation mark important information issue journey maps mark message mobility notification passenger problem public transport road route signal stop symbol transit transportation travel triangle update vehicle warning"},
+        {"name": "car_crash", "tags": "accident alert auto automobile broken car cars collision crash damage damaged danger dangerous direction driving emergency hazard impact incident insurance maps motor vehicle public risk road safety traffic transport transportation vehicle warning wreck"},
+        {"name": "car_rental", "tags": "access automobile booking booking service car car key cars drive driving drop off entry hire journey key lock maps mobility passenger password pick up rent rental reservation reservation details road transport road trip service transport transport service transportation travel travel booking travel service trip unlock vacation vehicle"},
+        {"name": "car_repair", "tags": "adjustments assistance auto automobile automotive breakdown car car service cars configuration emergency fix garage garage tools gears machinery maintenance maps mechanic repair repair shop service settings spanner support tool transportation travel tune-up vehicle vehicle maintenance workshop wrench"},
+        {"name": "castle", "tags": "abode ancient architecture battlement building castle domain dwelling establishment estate fairytale fort fortress historical home housing kingdom landmark lodging mansion medieval monument palace protected residence royal security stronghold structure tower turrets"},
+        {"name": "category", "tags": "categories category chain chains chart charts circle circles collection concept concepts connection connections diagram diagrams flow hierarchical hierarchy idea ideas items link links network networks orb orbs organization organize product relate related relationship relationships shapes sort square structure structures three circles tree trees triangle"},
+        {"name": "celebration", "tags": "achievement activity award birthday burst celebration confetti congratulations emblem event excitement explode festive fireworks fun glitter glyph graphic happy joy light magic party reward shape sparkle special star success surprise symbol victory"},
+        {"name": "church", "tags": "architecture building cathedral ceremony chapel christian christianity church community cross event faith funeral gathering holy place ideology landmark location place of worship pointer prayer religion religious building sacred sacred place sanctuary service spiritual steeple temple wedding worship"},
+        {"name": "cleaning_services", "tags": "broom care chore clean cleaning commercial domestic dust floor home house housekeeping hygiene janitorial maintenance mop organized polish professional refresh residential sanitation scrub service services sparkle squeaky clean sweep tidy wash"},
+        {"name": "compass_calibration", "tags": "accuracy adjust alignment bearing calibrate calibration circle compass configuration connection direction east fine tune internet location magnetic north map mapping maps measurement navigation needle network north orientation pointer position refresh sensor service setting settings signal south tool true north west wifi wireless"},
+        {"name": "connecting_airports", "tags": "air aircraft airplane airplanes airport arrival aviation aviation route connecting flights connection departure destination flight flight path flights fly flying globe hub itinerary journey link location logistics map mode network on path pin plane planes route signal transfer transit transport transportation travel travel route trip world"},
+        {"name": "crisis_alert", "tags": "! alarm alert attention bullseye caution crisis critical danger emergency error errors exclamation exclamation point feedback hazard important information issues mark mistakes note notification problems risks safety security sign status symbol system target threat triangle urgent warning"},
+        {"name": "delivery_dining", "tags": "buy commerce courier delivery dining dispatch driving drop off fast food line icon logistics meal moped motorcycle movement order pick up purchase quick restaurant riding scooter service shipping shop store takeout transport transportation travel two-wheeled urban vehicle vespa"},
+        {"name": "departure_board", "tags": "airport arrival board arrivals automobile board bus bus station car cars clock data departure departure board departures destinations display information board itinerary journeys lines list maps public public transit rectangle rows schedule sign status terminal time time table train station transit transportation travel updates vehicle"},
+        {"name": "design_services", "tags": "architecture art build compose create design draft drafting draw drawing edit editing education engineering geometry graphic illustration implements input instrument learn line measure object office pen pencil ruler school service services shape sketch stationery tools triangle work write writing"},
+        {"name": "diamond", "tags": "award brilliant clean crystal cut diamond exclusive expensive facet fashion gem gems geometric jewel jewelry logo luxury pointed polygon precious premium prize quality retail shape sharp simple special stone valuable valuables value"},
+        {"name": "dinner_dining", "tags": "beverage breakfast cafe cooking cuisine culinary cutlery dining dining room dinner drink eat eating fine dining food fork gourmet kitchen knife lunch meal menu pasta place setting reservation restaurant serving silverware snack spaghetti table utensils"},
+        {"name": "directions", "tags": "arrow compass destination directions find my way follow gps guide guide me how to get there journey lead left locate location map maps navigation path pin pinpoint position right road route sign straight street traffic travel trip turn where am i"},
+        {"name": "directions_bike", "tags": "activity bicycle bike cycling direction directions exercise fitness green transport health human journey map maps mobility navigation outdoor path person public recreation ride riding road route sport street transport transportation travel two wheels urban vehicle workout"},
+        {"name": "directions_boat", "tags": "automobile boat boating car cars cruise direction directions ferry journey lake maps marine maritime nautical navigation ocean path public recreation river route sailing sea ship tourism transport transportation travel trip vehicle vessel water"},
+        {"name": "directions_boat_filled", "tags": "automobile boat boating car cars cruise direction directions ferry journey lake maps marine maritime nautical navigation ocean path public recreation river route sailing sea ship tourism transport transportation travel trip vehicle vessel water"},
+        {"name": "directions_bus", "tags": "automobile bus car cars commute directions filled journey maps navigation passenger public public transport rectangle ride road rounded corners route solid street transportation travel vehicle wheel window"},
+        {"name": "directions_bus_filled", "tags": "automobile bus car cars commute directions filled journey maps navigation passenger public public transport rectangle ride road rounded corners route solid street transportation travel vehicle wheel window"},
+        {"name": "directions_car", "tags": "auto automobile automotive car car symbol cars destination direction directions drive drive time driving estimated time eta journey maps mobility navigate navigation passenger vehicle public road route sedan time transport transport symbol transportation travel travel time trip vehicle vehicle icon"},
+        {"name": "directions_car_filled", "tags": "auto automobile automotive car car symbol cars destination direction directions drive drive time driving estimated time eta journey maps mobility navigate navigation passenger vehicle public road route sedan time transport transport symbol transportation travel travel time trip vehicle vehicle icon"},
+        {"name": "directions_railway", "tags": "automobile car cars commuter commuting direction directions express journey light rail locomotive map maps metro navigation passenger platform public public transport rail railroad rails railway route station subway track train tram transit transport transportation travel trip trolley vehicle"},
+        {"name": "directions_railway_filled", "tags": "automobile car cars commuter commuting direction directions express journey light rail locomotive map maps metro navigation passenger platform public public transport rail railroad rails railway route station subway track train tram transit transport transportation travel trip trolley vehicle"},
+        {"name": "directions_run", "tags": "activity athlete beginning body destination directions exercise figure fitness human jogging location map maps marathon movement navigation path people person pin point race route run running silhouette sports sprint start track training walk walking"},
+        {"name": "directions_subway", "tags": "automobile car cars city commute connection destination direction directions journey line locomotion maps metro movement navigation passengers path public public transportation rail railway route station subway system train tram transit transport transportation travel trolley underground urban vehicle"},
+        {"name": "directions_subway_filled", "tags": "automobile car cars city commute connection destination direction directions journey line locomotion maps metro movement navigation passengers path public public transportation rail railway route station subway system train tram transit transport transportation travel trolley underground urban vehicle"},
+        {"name": "directions_transit", "tags": "automobile car cars city commute connection destination direction directions journey line locomotion maps metro movement navigation passengers path public public transportation rail railway route station subway system train tram transit transport transportation travel trolley underground urban vehicle"},
+        {"name": "directions_transit_filled", "tags": "automobile car cars city commute connection destination direction directions journey line locomotion maps metro movement navigation passengers path public public transportation rail railway route station subway system train tram transit transport transportation travel trolley underground urban vehicle"},
+        {"name": "directions_walk", "tags": "activity assist body direction directions exercise figure find fitness foot go guide human jogging journey lead locate map maps move movement navigation outdoor path pedestrian people person point a to point b route run steps stick figure travel walk walking"},
+        {"name": "dry_cleaning", "tags": "apparel bubble button care chore circle circular cleaning clothes dry dry cleaning dryer fabric garment hanger hotel household icon ironing laundry machine places pressing refresh service sign steam symbol task textile toggle towel washing"},
+        {"name": "edit_attributes", "tags": "adjust approve attributes attribution change check complete configure controls customize done edit edit attributes fine tune glyph graphic icon manage mark modify ok options outline parameters properties select settings symbol tick tool tune validate vector verified yes"},
+        {"name": "edit_location", "tags": "address adjustment annotate bookmark change coordinates correction destination direction edit favorite geo geotag gps location map maps marker modify navigation pen pencil personalize pin place point position revision save stop tagging travel update"},
+        {"name": "edit_location_alt", "tags": "address adjust alt alter change compose coordinates correct destination edit geotag locale location map marker modify navigation pen pencil pin place point pointer position revise site spot travel update where whereabouts write"},
+        {"name": "edit_road", "tags": "adjust annotate change curve destination direction draw edit gps highway journey lane location map maps mark modify move navigation path pen pencil road route street tool traffic transport travel trip ui update winding write"},
+        {"name": "egg", "tags": "animal boiled breakfast broken brunch cooking cracked delicate delicious diet egg farm food fragile fresh fried healthy ingredient kitchen meal nature nutrition organic oval ovum poultry protein raw scrambled shell source"},
+        {"name": "egg_alt", "tags": "agriculture bake break breakfast brunch carton cook cooking crack cuisine easter egg farm food fresh holiday ingredient kitchen livestock menu natural object organic oval poultry protein raw shape shell symbol white"},
+        {"name": "electric_bike", "tags": "battery battery bicycle battery bike bicycle bike bolt commute cycling e-bike ebike eco-friendly electric electric bicycle electric bike electric scooter electric vehicle electricity leisure maps mobility motor outdoor pedal assist power powered bike recreation ride scooter speed sports sustainable thunderbolt transportation travel two wheels urban vehicle vespa"},
+        {"name": "electric_car", "tags": "automobile battery bolt car cars charge charging commute destination drive eco-friendly electric electric vehicle electricity energy energy saving green journey maps mobility plug power refuel road route station sustainable thunderbolt transport transportation travel vehicle zero emission"},
+        {"name": "electric_moped", "tags": "automobile battery bike bolt car cars charging city courier delivery e-scooter eco-friendly electric electric moped electric scooter handlebars maps mobility moped motor outline personal transport power rental ride scooter seat share silhouette sustainable symbol thunderbolt transportation travel two wheels urban vehicle vespa wheels"},
+        {"name": "electric_rickshaw", "tags": "asia auto rickshaw automobile bangkok bolt car cars driver e rickshaw electric electric rickshaw electric vehicle india lines maps mobility outline passenger passenger vehicle public transport rickshaw ride silhouette southeast asia sustainable transport taxi thailand three wheel vehicle thunderbolt transport transportation travel truck tuk tuk urban transport vehicle wheels"},
+        {"name": "electric_scooter", "tags": "battery bike bolt city commute commuter deck direction directions e-scooter electric electric scooter footboard handle bars kick scooter last mile maps micro-mobility mobility motor movement personal transport rental ride scooter sharing standing scooter thunderbolt transport transportation travel two wheels urban mobility vehicle vespa wheels"},
+        {"name": "electrical_services", "tags": "bolt bright charge circuit cord current electric electrical electrical services electricity energy energy savings fast fix high voltage home services infrastructure installation jolt light lightning maintenance plug power power lines repair service services spark surge technician utility voltage wire wiring zap"},
+        {"name": "emergency", "tags": "alarm alert assistance asterisk attention bell clinic critical cross crucial danger distress emergency first aid hazard health healthcare heartbeat help hospital important maps medical notification notify plus pulse safety security signal siren symbol urgent warning"},
+        {"name": "emergency_recording", "tags": "action alert app application attention button camera capture caution control danger device emergency film filming hardware icon image important interface element lens media monitoring motion multimedia notification optical photo photography picture record recording security surveillance technology ui element urgent video videography visual warning"},
+        {"name": "emergency_share", "tags": "alert attention broadcast button caution communication connection critical danger data distress emergency graphic help icon important information interface location network notification pinpoint send share signal sos symbol transmit ui element urgent warning"},
+        {"name": "ev_station", "tags": "automobile battery bolt car cars charger charging charging port charging station electric electric car electric vehicle electric vehicle charging station electricity energy energy source ev ev charger fuel gas green energy home maps outlet petrol places plug power power station pump refueling renewable socket station sustainable thunderbolt transport transportation vehicle"},
+        {"name": "factory", "tags": "architecture assembly automation building business chimney commerce construction development economy energy fabrication facility factory industrial industry infrastructure manufacturing plant power processing production smokestack structure warehouse"},
+        {"name": "fastfood", "tags": "american food bun burger burger icon cheeseburger circle circle with rectangle cuisine delivery dinner drink eat fast food fast food icon fastfood food food and drink food and drink icon food icon hamburger lunch maps meal order food patty places restaurant restaurant icon round sandwich sesame seeds snack takeaway"},
+        {"name": "festival", "tags": "art calendar celebration circus community concert culture dance date entertainment event festival fun gathering happy holiday invitation joy local maps meeting music party performance places public schedule show social special occasion tent theatre ticket tour travel"},
+        {"name": "fire_truck", "tags": "accident aid alarm alert automotive danger emergency emergency services emergency vehicle fire and rescue fire department fire engine fire truck firefighting help hose ladder rescue response safety security service siren transport transport icon transportation truck vehicle vehicle icon warning"},
+        {"name": "flight", "tags": "air air travel aircraft airplane airplanes airport arrival arrow departure direction flight flight mode flights fly flying flying mode forward icon jet mode move navigation on plane planes point settings signal silhouette sky speed symbol transport transportation travel trip vehicle"},
+        {"name": "flight_class", "tags": "aerial air air travel aircraft airline airplane airplanes airport aisle aviation booking business business class cabin class comfort economy first class flight flights fly flying journey passenger passenger experience plane planes reservation seat seating service signal transport transportation travel trip vacation window seat"},
+        {"name": "forest", "tags": "abstract adventure destination discovery earth eco environment exploration flora forest green growth jungle landscape life location map marker natural nature navigation outdoor park pin plant plantation plants preserve travel trees wilderness woodland woods"},
+        {"name": "fork_left", "tags": "alternative arrow arrows branch left branching path choice decision deviation direction directional directions diverge divide fork fork left junction left left turn map maps navigation options path pathway road road sign route sidetrack sign split left traffic travel turn veer"},
+        {"name": "fork_right", "tags": "arrow arrow right arrows branch right curve right direction direction right directions diverge right divide right drive right fork fork right journey right junction right maps merge right movement right navigate right navigation path path right right right bend right side right turn rightward route route right side right sign split right traffic travel travel right turn right"},
+        {"name": "fort", "tags": "ancient architecture battlements building castle defense dwelling fort fortress graphic historical house icon kingdom landmark mansion medieval military monument outline palace property protection real estate royalty security shape stronghold structure symbol tower walls"},
+        {"name": "hail", "tags": "alert bad weather body circles climate cold dots environment forecast frozen hail human ice meteorology natural disaster nature people person pick precipitation public rain severe weather sky sleet snow stop storm taxi transportation warning weather weather forecast winter"},
+        {"name": "handyman", "tags": "adjust build builder cog configuration construction craftsman customize engineering equipment fix gear hammer handyman job maintenance mechanic options preferences professional repair screw screwdriver service settings spanner toolbox tools utility work workshop wrench"},
+        {"name": "hardware", "tags": "adjust administration break circle cog configuration construction control customize engine engineering gear hammer hardware industrial machinery management mechanical mechanism nail options parameters personalize preferences repair rotate settings setup sharp system technical technology tool tools turn wheel"},
+        {"name": "home_repair_service", "tags": "adjustable wrench box building construction equipment fix gear hammer handyman home house improvement installation job kit labor maintenance mechanic pliers professional renovation repair repairing screwdriver service setup spanner technician tool toolbox tools work workshop wrench"},
+        {"name": "hotel", "tags": "accommodation apartment bed body booking building guesthouse holiday hospitality hostel hotel hotel icon house human inn lodging lodging icon motel people person place rectangle rent reservation resort room shelter sleep square stay structure tourism travel travel destination triangle trip vacation"},
+        {"name": "hvac", "tags": "ac adjustment air air conditioning air flow air vent airflow airflow direction blower building systems central air climate climate control comfort conditioning control ductwork environment fan heat heating hvac interior settings smart home system temperature temperature control thermostat vent ventilation wind"},
+        {"name": "icecream", "tags": "cafe celebration circle cold cone cool cream delicious dessert event food frozen fun happy ice ice cream icecream indulgence joy menu party picnic refreshing restaurant scoop snack summer sweet tasty travel treat triangle vacation"},
+        {"name": "kebab_dining", "tags": "actions additional options chef choices context menu cooking cuisine cutlery dining dining options dinner eating ellipsis food food choices food menu kebab kitchen meal meat menu more options overflow menu restaurant restaurant menu skewer three dots three points utensils vertical dots"},
+        {"name": "layers", "tags": "arrange composition content depth disabled display document enabled file group hierarchy interaction layers levels manage maps multiple off on order organize overlap overlay pages panels planes sections segments sheets slash stack structure view"},
+        {"name": "layers_clear", "tags": "3d arrange cancel clear delete delete layers depth disabled dismiss documents empty enabled erase files hierarchy interaction layers layers clear levels maps none off offset on order organization overlapping overlay pages papers perspective reject remove layers sheets slash stack structure three dimensional wipe zero"},
+        {"name": "liquor", "tags": "alcohol app bar beverage bottle celebration cheers club cocktail container drink entertainment food glass graphic icon leisure liquid liquor menu nightlife party pour pub restaurant spirits stemware store symbol toast ui ux web wine"},
+        {"name": "local_activity", "tags": "access activity admission attendance cinema coupon cutout entertainment entertainment pass entry event event pass event ticket local movie movie ticket pass perforation play rectangular shape show star stub tear-off theater things ticket ticket stub voucher"},
+        {"name": "local_airport", "tags": "active air air travel aircraft airplane airplane icon airplane mode airport communication off disable connectivity disable wireless enabled flight flight mode flying local airport network off on plane signal off transport transportation travel travel mode trip turn off radio vehicle"},
+        {"name": "local_atm", "tags": "atm automated teller machine bank banking bill brick and mortar building card cart cash cash machine coin commerce credit currency debit deposit dollars establishment finance financial find local locate location machine money navigate nearby online pay payment point of interest retail service shopping structure symbol transaction withdrawal"},
+        {"name": "local_bar", "tags": "alcohol bar beer beverage bottle celebrate cheers club cocktail cocktails dining drink entertainment establishment food food and drink glass going out happy hour hospitality leisure liquor local location nightlife party place pub relax restaurant social spirits stemware unwind wine"},
+        {"name": "local_cafe", "tags": "beverage bottle break breakfast cafe caffeine ceramic coffee cup diner dining drink eatery food handle hot drink kitchen local morning mug order refreshment relax restaurant service shop steam store tea warm"},
+        {"name": "local_car_wash", "tags": "auto automobile brush bubble business car car wash cars clean cleaning detail detailing directions hose local location map maps navigation place point of interest service service station shine soap sprayer square suds transportation travel vehicle vehicle cleaning wash water window"},
+        {"name": "local_convenience_store", "tags": "-- 24 awning bill building business buying card cash coin commerce company convenience convenience store corner store credit currency destination dollars door economic entrance facade grocery local location map maps market money navigation neighborhood new online pay payment plus point of interest retail selling shop shopping signage small business store storefront street symbol transaction window"},
+        {"name": "local_dining", "tags": "bistro breakfast cafe catering cuisine cutlery dining dining experience dining out dinner dish eat eatery eating utensils food food and drink food service fork gastronomy knife local lunch meal menu plate restaurant restaurant finder setting silverware spoon table setting"},
+        {"name": "local_drink", "tags": "alcohol bar beverage cafe catering cheers coffee cold drink cup dining drink drink location drink spot drop droplet food glass hot drink hydration juice liquid local mug park refreshment restaurant service soda tea toast vessel water"},
+        {"name": "local_fire_department", "tags": "911 alert blaze burning climate danger department discovery emergency explore fire fire department fire icon firefighter flame flame icon heat home hot hot topics ignition inferno local nest news popular social media spark thermostat top videos trending trending topics trending videos video viral warning youtube"},
+        {"name": "local_florist", "tags": "beauty bloom blooming blossom botany decorative ecological environment flora floral florist flourish flower fresh garden growing growth leaf leaves local natural nature organic petal petals plant shop spring sprout stem summer"},
+        {"name": "local_gas_station", "tags": "area auto automotive car diesel discover dispenser energy filling up fuel gas gas nozzle gas station gasoline journey local location map navigation nearby oil petrol station point of interest pump refueling road trip search service station transportation travel vehicle"},
+        {"name": "local_grocery_store", "tags": "add to cart basket buy buying carriage cart checkout commerce e-commerce general store goods grocery items local market merchandise online shopping products purchase retail retail store sale shop shopping shopping bag shopping cart store trolley"},
+        {"name": "local_hospital", "tags": "911 aid ambulance building care clinic cross doctor emergency facility first health healthcare help hospital local location map medical medicine navigation nurse pharmacy pin plus pointer treatment"},
+        {"name": "local_hotel", "tags": "accommodation apartment bed body booking building guesthouse holiday hospitality hostel hotel hotel icon house human inn local lodging lodging icon motel people person place rectangle rent reservation resort room shelter sleep square stay structure tourism travel travel destination triangle trip vacation"},
+        {"name": "local_laundry_service", "tags": "amenity apparel bubble bubbles business chores cleaner cleaning cleaning supplies clothes clothing domestic droplet dry dryer establishment facility hotel household hygiene laundromat laundry local location marker pinpoint service service area shop textile washer washing washing machine water drop"},
+        {"name": "local_library", "tags": "academy archive book book icon book stack book symbol books collection community learning education education icon information knowledge knowledge base knowledge icon learn learning icon library literacy literature literature stack local local library read reading reading icon research resources school stack of books study university"},
+        {"name": "local_mall", "tags": "bag basket bill boutique building business buy buying card cart cash coin commerce commercial consumer consumerism credit currency department store dollars e-commerce goods handbag items local mall market marketplace money online outlet pay payment products purchase purchasing retail retail store shop shopping shopping bag shopping center store storefront"},
+        {"name": "local_movies", "tags": "box office cinema clip documentary entertainment feature film independent local media movie perforation performance play playback production projector rectangle reel rounded corners screening short show square stream theater theaters video view watch"},
+        {"name": "local_offer", "tags": "bargain commerce coupon deal discount label market offer pointed shape price promotion retail sale shape shop shopping special offer store tag tag shape voucher"},
+        {"name": "local_parking", "tags": "alphabet auto block car character city destination driving find parking font garage letter p letters local location map navigation p symbol park parking parking area parking lot parking spot poi point of interest road sign space square street symbol text transportation travel type urban vehicle"},
+        {"name": "local_pharmacy", "tags": "911 aid building clinic cross cure drug drugstore emergency find first first aid health healthcare hospital local location map medical medicine navigation pharmacy pin places plus pointer prescription retail rx shop store symbol treatment"},
+        {"name": "local_phone", "tags": "audio audio call booth call call icon cellular communication connection contact contact icon contact us dial handset helpline incoming call local phone mobile outgoing call phone phone alt phone icon reach receiver ringing service speaking support talk telecommunication telephone voice"},
+        {"name": "local_pizza", "tags": "catering cheese circle circular cooking cuisine delivery dining dish drink eat fastfood food food and drink ingredients italian italy local meal menu pizza restaurant round slice slices takeaway tomato toppings triangle triangles"},
+        {"name": "local_play", "tags": "access activity admission attendance cinema coupon cutout entertainment entertainment pass entry event event pass local movie movie ticket pass perforation play rectangular shape show stub tear-off theater ticket ticket stub voucher"},
+        {"name": "local_police", "tags": "911 authority authority symbol badge crime emblem government identification identification badge investigation justice law law and order law enforcement local local police military officer official police police department police emblem police star protect protection safety security shield star symbol uniform"},
+        {"name": "local_post_office", "tags": "address building building exterior business communication delivery destination email envelop envelope government institution landmark letter letters local location mail map message navigation office package parcel pin place pointer post post office postal receiving send sending service sign stamp structure symbol"},
+        {"name": "local_printshop", "tags": "copier copy device document draft fax hardware ink local machine office output paper press print printer printing printing press printshop publication publish scanner send"},
+        {"name": "local_see", "tags": "aperture camcorder camera capture control device electronics film gadget imaging lens local media movie multimedia photo photography picture record see shoot technology video video camera view viewfinder visual watch"},
+        {"name": "local_shipping", "tags": "automobile box business car cargo cars commerce delivery distribution drive freight goods letters local logistics lorry mail maps merchandise move office package parcel post postal road send shipping shopping stamp supply chain transport transportation travel truck van vehicle wheels"},
+        {"name": "local_taxi", "tags": "appointment auto automobile booking cab call car cars city direction driver drop off hire local location lyft map maps navigation passenger pick up public public transportation rent ride road route service street taxi transport transportation travel uber vehicle yellow"},
+        {"name": "lunch_dining", "tags": "bar breakfast breakfast time brunch cafe canteen cutlery dining dining area dining location dining room dinner dinner time drink eat eating eating area eating place fastfood food fork hamburger kitchen knife lunch lunch time meal meal time restaurant restaurant location service silverware spoon supper"},
+        {"name": "map", "tags": "address atlas cartography city continent country destination direction directions discover earth explore geography gps guide journey location map maps marker navigation pin place point of interest position region route stop street territory track travel world"},
+        {"name": "maps_ugc", "tags": "+ add add data bubble cartography comment communicate contribution create data destination destination pin direction feedback generate geography location location pin map map marker map pin maps marker message navigation new pin pinpoint place plus point position share speech submit symbol travel ugc upload user contribution"},
+        {"name": "medical_information", "tags": "badge card chart clinic cross data details document file folder health health information health record healthcare history hospital icon id id card identification information medical medical chart medical file medical record medicine patient patient data patient history patient record plus sign prescription report services symbol"},
+        {"name": "medical_services", "tags": "aid assistance bag briefcase care clinic cross doctor doctor's bag emergency first first aid health health services health symbol healthcare healthcare services hospital kit medic medical medical cross medical facility medical help medical kit medical symbol medicine pharmacy plus rescue services treatment wellness"},
+        {"name": "menu_book", "tags": "academic book content diary dictionary dining document education encyclopedia food glossary guide information journal knowledge learning library literary literature meal menu notebook notes open book pages publication reading reference report restaurant school spine study"},
+        {"name": "merge", "tags": "arrow arrows branches bring together code combine confluence connect consolidate converging lines data development direction directions file operations flow git graph integration join link maps merge navigation network path process route sign source control together traffic two into one union unity version control"},
+        {"name": "minor_crash", "tags": "accident alert attention auto automobile car cars caution collision critical danger directions emergency error exclamation exclamation mark hazard important issue maps notification point problem public risk security transportation triangle urgent vehicle warning"},
+        {"name": "mode_of_travel", "tags": "arrow auto automobile automotive car car icon commute destination direction drive driving driving icon four wheels journey location map maps mode movement navigation of passenger pin place road route sedan stop street transport transport icon transportation travel travel icon trip vehicle vehicle icon"},
+        {"name": "money", "tags": "100 accounting banking bill budget card cash coin commerce cost credit currency deposit digit dollar dollars economy finance financial fund investment money numbers online pay payment price purchase rate revenue savings shopping symbol transaction value wealth withdrawal"},
+        {"name": "moped", "tags": "automobile bike buy car cars commerce courier delivery dining dispatch driving drop off fast food line icon logistics maps moped motorcycle movement order pick up purchase quick riding scooter service shipping shop store transport transportation travel two-wheeled urban vehicle vespa"},
+        {"name": "mosque", "tags": "architecture building dome faith holy place ideology islam islamic islamic architecture islamic art islamic culture islamic history landmark masjid middle east minaret mosque muslim orient pilgrimage prayer ramadan religion religious building sanctuary spiritual structure temple tourism travel worship"},
+        {"name": "moving", "tags": "action active activity advancing alive animate arrow change changing direction dynamic evolving flowing forward going migration motion move movement moving moving object navigation onward potential tags could relate to:\n\nmoving proceeding progress progression relocate shift transferring transition transport travel up"},
+        {"name": "multiple_stop", "tags": "action arrows audio button complete control controls dash dashed directions dots double stop end final finished interface element last left maps media multimedia multiple multiple stop music navigation pause playback playback control player player control right skip to end square stop symbol two squares video"},
+        {"name": "museum", "tags": "ancient architecture art artifact attraction building collection columns corinthian culture destination doric education estate event exhibit exhibition exploration explore gallery historic history ionic knowledge landmark learning local monument museum neoclassical pillars places real see shop store structure tour tourism travel"},
+        {"name": "my_location", "tags": "accuracy center crosshair current location destination direction explore find focus geo-locate gps locate location map maps marker my location navigate navigate to navigation pin pinpoint place point pointer position satellite spot stop target whereabouts"},
+        {"name": "navigation", "tags": "abstract arrow arrow right basic destination direction direction indicator forward geometry go guidance indicator journey line location map maps minimalist navigation next path pin place point pointed pointer position right route shape simple stop symbol travel way"},
+        {"name": "near_me", "tags": "area arrow compass current location destination direction directions discover explore find geolocation geotagging local locate locate me locate user location maps me my location navigation near nearby neighborhood pin pinpoint place point pointer points of interest position precise precise location stop travel vicinity"},
+        {"name": "near_me_disabled", "tags": "blocked compass blocked compass disabled compass off destination direction direction blocked direction disabled direction off disabled enabled geo blocked geo disabled geo off gps blocked gps disabled gps off location location blocked location disabled location off map blocked map disabled map off maps me navigation navigation blocked navigation disabled navigation off near near me blocked near me disabled near me off off on pin place point position blocked position disabled position off slash"},
+        {"name": "nightlife", "tags": "activity alcohol bar beer beverage bottle celebrate cheers club cocktail dance disco drink drinks entertainment evening event food fun gathering glass happy hour leisure liquor lounge music night nightlife note party pub recreation social toast wine"},
+        {"name": "no_crash", "tags": "accident alert auto automobile avoid barrier blocked car cars caution check collision confirm correct crash critical danger deny direction disallowed done eight sides enter error fail failure forbidden limit maps mark no no crash octagon ok okay prevention prohibited red light refuse reject restricted road sign safe security select stop stop sign tick transportation vehicle warning yes"},
+        {"name": "no_meals", "tags": "ban catering circle crossed out diet dining disabled eat eating enabled exclusion food forbidden fork kitchen knife line meal meals no no access no eating no food no meals not allowed off on prohibited restaurant restricted restriction slash spoon sustenance unavailable utensils"},
+        {"name": "no_transfer", "tags": "alert automobile bus cancelled car cars circle cross out declined diagonal line direction disabled enabled error failed forbidden graphic hold icon maps no no movement no progress no transfer not allowed off on paused pending prohibition public restricted slash status stopped symbol transfer transfer blocked transfer disabled transportation vehicle warning"},
+        {"name": "not_listed_location", "tags": "? access denied area assistance blocked cancel close coordinate cross delete denied destination direction disallowed forbidden gps help info information listed location map maps marker navigation no entry not not found pin place point pointer position punctuation question mark region remove restricted site stop support symbol unavailable x"},
+        {"name": "park", "tags": "area attraction destination environment fresh garden green space land landscape leisure local location map monument nature outdoor outside park pin plant preserve public space recreation relaxation tree trees"},
+        {"name": "pedal_bike", "tags": "active automobile bicycle bike car cars chain commute cycle cycling direction exercise fitness frame handlebars human maps movement outdoor park path pedal pedaling public recreation ride riding road route scooter seat sport trail transportation travel two wheels vehicle vespa wheels"},
+        {"name": "person_pin", "tags": "account address avatar circle colleague contact destination direction drop pin face figure find find person find user friend geotag human identify location identify user location map maps marker my location navigate people person pin place point of interest position profile silhouette stop team member user whereabouts"},
+        {"name": "person_pin_circle", "tags": "account address avatar circle contact destination direction face find me gps human identity locate location map maps marker navigation nearby people person pin pinpoint place position profile stop tracking user whereabouts"},
+        {"name": "pest_control", "tags": "alert animal block bug circle control cross diagonal line exterminator fly forbidden forbidden sign insect insects line mosquito nature no entry pest prevention problem prohibition protection restriction safety sign slash solution stop warning warning sign"},
+        {"name": "pest_control_rodent", "tags": "animal animal control control creature extermination exterminator health home house infestation inspection issue mammal mice mouse pest pest control poisoning prevention problem property rat removal rodent rodent control sanitation service trapping treatment vermin wildlife control"},
+        {"name": "pin_drop", "tags": "address address pin destination direction drop find gps graphic icon journey locate location location pin map map pin maps mark marker marker pin navigate navigation pin pinpoint place point of interest pointer position stop street symbol travel ui element"},
+        {"name": "place", "tags": "address area cartography destination direction directions find geo geographic gps landmark locale locate location map maps marker navigation pin pinpoint place point position region setting site spatial spot stop vicinity wayfinding whereabouts zone"},
+        {"name": "plumbing", "tags": "build commercial connections construction diagram domestic drainage engineering fitting fix flow fluid grid handyman home house industrial infrastructure joint lines maintenance network pipe pipes plumbing repair schematic service system tools utility valve water wrench"},
+        {"name": "railway_alert", "tags": "! alert attention automobile bike car cars caution critical danger delay direction error exclamation exclamation point important issue line maps mark notification outage path problem public railroad railway route scooter service sign signal subway symbol track tracks train transportation travel triangle vehicle vespa warning"},
+        {"name": "ramen_dining", "tags": "asian food bowl chinese food chopsticks chopsticks in bowl cuisine delivery dining eating eating out food food icon food service hot meal japan japanese japanese food korean food meal mealtime noodle dish noodle soup noodles ramen ramen bowl restaurant soup steaming food take out"},
+        {"name": "ramp_left", "tags": "arrow arrows curve diagram direction directional directions exit highway lane left map maps merge navigation path ramp road route sign signage split symbol traffic transportation travel turn way"},
+        {"name": "ramp_right", "tags": "access advance angle arrow arrows curve diagonal direction directionality directions elevate go growth incline increase maps mobility move navigation path positive progress ramp right rise road route sign slope traffic transportation trend turn upward"},
+        {"name": "rate_review", "tags": "assessment box bubble chat bubble comment comment box dialogue enter evaluation feedback fill form input message opinion pen pencil rate rating rectangle review score shape speak speech bubble star stars talk text thought bubble write"},
+        {"name": "remove_road", "tags": "- cancel clear close delete destination diagonal line direction discard eliminate erase exclude exit filter forbidden highway line location map maps marker minus navigation new no path point of interest prohibition remove road route slash stop street strike through symbol traffic transportation travel unlink unpin unset x"},
+        {"name": "restaurant", "tags": "bar breakfast breakfast place building cafe cafeteria culinary cutlery dine diner dining dining establishment dinner dinner place eat eatery eating establishment fast food food food court food place food service fork gastronomy knife local lunch lunch place meal place restaurant spoon utensils"},
+        {"name": "restaurant_menu", "tags": "bistro breakfast cafe catering cuisine cutlery dining dining experience dining out dinner dish eat eatery eating utensils food food and drink food service fork gastronomy knife local lunch meal menu plate restaurant restaurant finder setting silverware spoon table setting"},
+        {"name": "roundabout_left", "tags": "arrow arrows circle circular intersection curved arrow detour direction directions driving flow gps guidance intersection left left turn map maps movement navigation path road road sign roundabout route sign signage street traffic traffic circle transportation travel turn u-turn waypoint"},
+        {"name": "roundabout_right", "tags": "arrow arrows circular intersection crossroads curved arrow direction direction arrow directions driving flow gps guidance highway infrastructure junction map maps mobility motor vehicle navigate navigation path right right turn road road sign roundabout route sign street traffic traffic circle traffic management transport transport infrastructure turn wayfinding"},
+        {"name": "route", "tags": "connection connection line course destination direction line directions endpoint itinerary journey line map map line maps navigation navigation line path plotting point a to point b road route route line sign starting point street trace track traffic trail travel travel path travel plan two points"},
+        {"name": "run_circle", "tags": "action active activity athletics begin body button circle continue control exercise figure glyph human jogging media movement people person play progress race rounded run running silhouette sport sprint start symbol track workout"},
+        {"name": "safety_check", "tags": "approved authentic authentication certified check clock confirmed confirmed status coverage guarantee guarantee symbol guard health insurance privacy private protect protection protection shield safe safety safety check schedule secure secure check secure transaction security shield time trust validated validation verification verified verified identity wellness"},
+        {"name": "sailing", "tags": "adventure aquatic boat boating cruise entertainment explore fishing hobby hull journey leisure lines marine maritime mast nautical ocean recreation sail sailboat sailing sea ship social sports sport transportation travel triangle vessel voyage water watercraft yacht"},
+        {"name": "satellite", "tags": "antenna astronomy bluetooth broadcast communication connect connection connectivity data device dish earth future global gps image internet landscape location mapping maps mountain mountains navigation network orbit orbital photo photography picture planet radar receiving satellite scan science service signal space symbol technology tracking transmission wifi wireless world"},
+        {"name": "screen_rotation_alt", "tags": "Android OS adjust alter alternate alternative arrow change circle circular control counter clockwise counterclockwise device direction display flip hardware iOS landscape mobile orientation phone portrait refresh reload rotate rotation screen screen rotation setting switch tablet turn"},
+        {"name": "set_meal", "tags": "chopsticks cutlery dining dining etiquette dining room dinner dish dishware eat eating fish food fork and knife lunch meal place setting plate restaurant serving set silverware spoon tableware teishoku utensils"},
+        {"name": "signpost", "tags": "arrow bar destination direction guidance guidepost horizontal indicator information journey landmark left location map maps marker navigation path pinpoint pointer post right road route sign signal signpost signs stick street traffic travel upright vertical wayfinding"},
+        {"name": "snowmobile", "tags": "activity adventure automobile car cold direction driver engine graphic handlebars icon illustration leisure line art machine motor outdoor pictogram recreation rider sign skimobile skis snow snowmobile social sport sports symbol track transportation travel vehicle winter"},
+        {"name": "sos", "tags": "alert box button communication danger distress element emergency font four sides graphic help icon letters safety save shape signal sos square symbol text type ui icon warning"},
+        {"name": "soup_kitchen", "tags": "aid assistance bowl breakfast brunch care charity community dining donation feeding food giving help helping hand human services hunger kitchen lunch meal non-profit nourishment outreach poverty service serving sharing shelter social services soup soup kitchen spoon support volunteer"},
+        {"name": "stadium", "tags": "activity amphitheater architecture arena audience bleachers building coliseum competition concert court crowd entertainment event field game grandstand indoor landmark leisure local location map outdoor performance point of interest recreation seats sports stadium star structure things ticket track travel venue"},
+        {"name": "store_mall_directory", "tags": "address aisle building business buying commerce commercial destination directory establishment goods location mall map marker market marketplace merchandise navigation pin place pointer retail retail building selling shop shop building shopping store storefront"},
+        {"name": "straight", "tags": "abstract abstract shape arrow arrows bar basic shape dash direction directions divider element geometric shape horizontal bar horizontal line horizontal rule line maps minimalist navigation path route rule segment separator separator bar shape sign simple shape single line solid line straight straight line stroke thin line traffic underscore up"},
+        {"name": "streetview", "tags": "360 degrees angle camera environment explore eye globe immersive interactive landscape location mapping maps navigation outdoors panoramic perspective place point of interest roads sphere street street view streetview tour travel view virtual reality vision vr world"},
+        {"name": "subway", "tags": "automobile bike car cars city city transport commute line maps mass transit metro network public network public transit public transport rail rail line railroad railway route scooter station subway train train line transit transit map transport transportation travel travel route tunnel underground urban urban rail urban transport vehicle"},
+        {"name": "synagogue", "tags": "architecture building church city community dome faith hebrew holy place ideology israel jerusalem jew jewish judaism landmark monument prayer religion religious building shul spiritual star star of david structure synagogue temple tourism travel urban worship"},
+        {"name": "takeout_dining", "tags": "box catering container cutlery delivery dining dining out eating food food box food container food delivery fork knife meal meal box meal container meal delivery order rectangle restaurant restaurant delivery restaurant take out takeaway takeout takeout box to go utensil"},
+        {"name": "taxi_alert", "tags": "! alarm alert attention automobile cab car cars caution danger direction driving error exclamation exclamation mark important issue lyft maps mark message notice notification problem public public transport ride road service signal symbol taxi traffic transport transportation travel triangle uber vehicle warning yellow"},
+        {"name": "temple_buddhist", "tags": "architecture asia asian buddha buddhism buddhist building cultural eastern historical ideology landmark location monastery monument pagoda place prayer religion sanctuary shrine spiritual structure temple tourism traditional travel worship"},
+        {"name": "temple_hindu", "tags": "ancient architecture asian building culture destination graphic hindu hinduism hindus historical site icon ideology illustration indian landmark mandir monument outline pilgrimage place of worship religion religious building sacred shape spiritual spirituality structure symbol temple tourism traditional travel worship"},
+        {"name": "terrain", "tags": "chart contour data diagram elevation environment geography graphic hill hills image land landscape location map mountain mountains natural nature outdoor peak photo photography picture region scenery terrain travel view"},
+        {"name": "theater_comedy", "tags": "acting art broadway comedian comedy culture drama emotion entertainment event face film frown graphic happy icon illustration joy mask masks movie musical performance performing arts places play representation sad show smile stage standup symbol theater theatre mask tour tragedy watch"},
+        {"name": "tire_repair", "tags": "alert assistance auto automobile automotive car cars circular fix flat gauge inflate issue maintenance mechanic patch plug pressure problem pump puncture repair roadside round service spare tire tool transportation vehicle warning wheel wrench"},
+        {"name": "traffic", "tags": "accident barrier block car caution cone construction detour direction guide hazard highway light maps marker obstacle orange pylon road safety signal slowdown street traffic transportation travel vehicle warning work"},
+        {"name": "train", "tags": "automobile car cargo cars commute destination diesel direction electric engine freight itinerary journey locomotive maps passenger platform public public transport rail railroad rails railway route schedule station steam subway timetable tourism tracks train tram transit transportation travel trolley vehicle voyage"},
+        {"name": "tram", "tags": "automobile cable car car cars city city icon city transport commute direction electric journey light rail maps passenger passenger transport public public transport rail rail icon rail vehicle rails railway streetcar subway tracks train tram transit transportation transportation icon travel travel icon trolley urban urban transit vehicle vehicle icon"},
+        {"name": "transfer_within_a_station", "tags": "a arrow arrows body bus commute connection destination direction dots exchange horizontal arrows human left line location map maps movement navigation opposite directions people person point public public transport rectangle right route station stop train transfer transit transport transportation travel two arrows vehicle walk within"},
+        {"name": "transit_enterexit", "tags": "access arrival arrow bus commute departure direction directional door egress enter enterexit exit gate ingress itinerary line location maps metro navigation passenger point of interest public transport route station subway train transit transit information transportation travel travel plans travel stop"},
+        {"name": "trip_origin", "tags": "address beginning circle departure destination direction dot geo geo location gps journey location marker map marker map pin marker navigation origin pin place point position route start start location starting point travel trip trip origin"},
+        {"name": "turn_left", "tags": "angle arrow arrows bend curve direction directions driving follow go guidance guide lead left line map maps navigation path point proceed road route segment sign trace traffic transit travel turn"},
+        {"name": "turn_right", "tags": "arrow arrows bend right changing direction curved arrow direction directions driving forward and right forward direction future direction gps highway indicator location map maps mobility navigate navigation path pointing right right right arrow right turn road route sign street symbol traffic travel turn turn right"},
+        {"name": "turn_sharp_left", "tags": "angle arrow arrows bend curve detour direction directions drive gps indicator instruction left left turn maneuver map maps navigation path pointer road route sharp sharp turn sign signage street symbol traffic transportation travel turn turning"},
+        {"name": "turn_sharp_right", "tags": "acute turn arrow arrows car curve detour direction directions driving go gps guidance instruction journey location map maps movement navigation next path pointing right road route sharp sign traffic transit travel turn turn right turning"},
+        {"name": "turn_slight_left", "tags": "angle arrow arrows bend change direction corner curve direction directional directions driving go left gps guidance left location map maps mobility move navigation orientation path redirect right road route sign slight traffic travel turn turning walking wayfinding"},
+        {"name": "turn_slight_right", "tags": "arrow arrows bend curve detour direction directions driving follow gps guidance highway instruction map maps navigation next path redirect right right turn road route sharp sign slight slight right slight turn street symbol traffic travel turn turn right"},
+        {"name": "two_wheeler", "tags": "automobile bike car cars commuting delivery direction driver engine journey location maps mobility motorbike motorcycle pavement public race racing ride riding road route scooter speed sport street transport transportation travel two wheeler two wheels urban vehicle vehicle type wheels"},
+        {"name": "u_turn_left", "tags": "arrow arrows bend change direction circle curve direction directions driving driving directions guide left left turn loop maps navigation path return reversal reverse road road sign route sign signage street traffic transport turn turn around u-turn vehicle"},
+        {"name": "u_turn_right", "tags": "arrow arrows bend car change direction curve curved arrow direction directions driving gps guidance maneuver map maps navigation path reverse direction right road road sign route sign street symbol traffic transportation travel turn u-turn vehicle"},
+        {"name": "volunteer_activism", "tags": "activism aid assistance care cause charity community compassion contribution donate donation donation box fingers fund funding gesture giving good hand hands heart helping helping hand humanity kindness love non-profit organization philanthropy sharing social support volunteer"},
+        {"name": "warehouse", "tags": "architecture building business cargo commercial delivery depot distribution export facility factory fulfillment garage goods import industrial industry inventory logistics manufacturing materials production shed shipping stock storage store structure supply chain transport warehouse"},
+        {"name": "wine_bar", "tags": "alcohol alcohol consumption bar bar icon beverage cafe celebration cheers cocktail cup dining drink drink icon drinking entertainment establishment glass glass icon leisure liquor nightlife pub restaurant restaurant icon toast wine wine bar wineglass wineglass icon"},
+        {"name": "wrong_location", "tags": "access denied address address error bad location cancel clear close denied location destination direction exit failed geo geographic error geotagging gps error incorrect location invalid location location location error location issue location services map marker map pin maps marker navigation error no pin pin drop place point position position error quit remove stop travel wrong wrong location x"},
+        {"name": "zoom_in_map", "tags": "add arrow arrows cartography center close up destination detail direction enlarge expand explore find geography in increase increase size locate location magnify magnifying glass map maps middle move navigation pinpoint place plus position search stop survey travel view zoom zoom in"},
+        {"name": "zoom_out_map", "tags": "area arrow arrows box button center compass contract control corner destination direction exit full screen expand full screen globe location map maps marker middle minimize move navigation out place pointer rectangle scale shape shrink square stop view world zoom zoom out map"},
+    ],
+    "navigation": [
+        {"name": "add_home_work", "tags": "add add building add business add home add house add office add project add task add work address briefcase building business construction create home house job location management new office plus project property real estate residential task work"},
+        {"name": "app_settings_alt", "tags": "Android OS adjust administration app applications cell cog configuration control customization device gear hardware iOS icon manage mobile options parameters phone preferences setting settings setup smartphone symbol system tablet technology"},
+        {"name": "apps", "tags": "3x3 grid access all all apps application applications apps circles collection components dashboard desktop display dots features functions general grid home icons interface launcher launchpad menu mobile navigation nine squares options programs quick access services settings shortcut software squares system tiles ui ux"},
+        {"name": "apps_outage", "tags": "alert all application applications apps breakdown circles collection communication components connection connectivity digital disconnected dots error failure grid interface internet issue malfunction network notification offline outage problem program server service software squares system technology ui unavailable ux warning"},
+        {"name": "arrow_back", "tags": "DISABLE_IOS app application arrow back browser button chevron components control direction disable_ios element go back graphic history icon indicator interface left navigate navigation point previous return reverse screen shape. site symbol ui undo ux vector web website"},
+        {"name": "arrow_back_ios", "tags": "DISABLE_IOS angle app apple application arrow back button chevron components control direction disable_ios gesture go back history interface ios left mobile move navigation operating system paginate platform pointer pointy previous return reverse screen site slide swipe triangle ui undo ux web website"},
+        {"name": "arrow_back_ios_new", "tags": "DISABLE_IOS action app application arrow back button chevron components control direction disable_ios go back history indicator interface ios left mobile move navigation point previous return reverse screen site swipe symbol triangle ui ux web website"},
+        {"name": "arrow_downward", "tags": "app application arrow collapse components continue descending direction down download downward dropdown expand export flow forward indicate install interface list menu minimize move navigation next next step pointer reveal save screen scroll show more site sort symbol transfer ui ux web website"},
+        {"name": "arrow_drop_down", "tags": "app application arrow carat caret chevron collapse components control direction down drop dropdown expand expand/collapse expander filter indicator interface list menu more navigation options pointer pointy screen select selector simple site small sort triangle triangle down ui ux web website"},
+        {"name": "arrow_drop_down_circle", "tags": "app application arrow button choose circle circled arrow circled down arrow collapse components control direction disclosure down down arrow drop dropdown expand expand down expander interface list menu navigation options pointer screen select selection site ui ui control ux web website"},
+        {"name": "arrow_drop_up", "tags": "app application arrow caret caret up collapse collapse button components control direction directional indicator drop drop up dropdown expand expander fold fold up hide indicator interface maximize minimize navigation point up reveal screen show shrink site sort button sort up toggle triangle triangle up ui ui control up up arrow ux web website"},
+        {"name": "arrow_forward", "tags": "action app application arrow arrows button components continue control direction direction indicator forward geometric go indicator interface interface control line link move navigation next path pointer proceed right route screen shape site symbol triangle ui ui control ui element ux web website"},
+        {"name": "arrow_forward_ios", "tags": "advance app application arrow chevron components details direction disclose drilldown forward go greater than hierarchy increment interface ios item link list more move navigate navigation next open page pointer pointing right proceed right screen show site step ui ux web website"},
+        {"name": "arrow_left", "tags": "angle app application arrow back backward basic components curve direction directionality forward go back indicator interface left line minimal move navigation next outline point pointer previous return reverse right screen shape simple site triangle ui undo ux way web website"},
+        {"name": "arrow_right", "tags": "advance angle app application arrow button caret chevron components continuation cue direction enter exit forward go greater than indicator interface line link move navigation next path point pointer proceed progress return right screen shortcut site triangle ui ux way web website"},
+        {"name": "arrow_upward", "tags": "advance app application arrow ascend bar chevron components direction elevate go up growth increase indicator interface line move move up navigate navigation paginate point position progress rise screen scroll scroll up send site sort to top top triangle ui up upload upward ux web website"},
+        {"name": "assistant_direction", "tags": "advising angled arrow arrow assistant destination direction gps guide guide me journey leading left turn location map maps navigate navigation navigation assistant path pin place pointer right road route sign signage stop street street sign suggesting direction travel turn turn by turn wayfinding"},
+        {"name": "campaign", "tags": "achievement action advertisement alert announcement banner campaign celebration concept curve direction emblem event flag goal line loud marketing megaphone microphone milestone navigation notification object pennant point progress promotion shape speaker success symbol triangle victory wave wind"},
+        {"name": "cancel", "tags": "action alert button cancel circle clear close control cross decline delete dismiss error exit feedback highlight off incorrect invalid media control navigation no reject remove shape stop symbol ui element unavailable x x mark"},
+        {"name": "check", "tags": "! DISABLE_IOS accepted accuracy alert approval approved attention caution check circle circular complete confirm confirmed correct danger disable_ios done enter error exclamation filled finish mark notification ok okay positive right round select sign solid success task complete tick true valid validation verification yes"},
+        {"name": "chevron_left", "tags": "DISABLE_IOS angle arrow arrows back before breadcrumbs carousel chevron control direction disable_ios go back guide history indicator left media motion move left navigation pagination pointer previous return rewind slider step back symbol undo v-shape wizard"},
+        {"name": "chevron_right", "tags": "advance angle bracket arrow arrows caret chevron direction forward go indicator list menu move navigate navigation next point pointer proceed right right arrow"},
+        {"name": "close", "tags": "abort action alert cancel cancel button clear close confirmation cross delete delete button dialog close dismiss error exit exit button interface control modal close multiply notification remove remove item stop times warning window close x x mark"},
+        {"name": "double_arrow", "tags": "abstract arrow arrowheads arrows bidirectional direction double double arrow exchange flow geometric indicator line minimal move movement multiple navigation opposite path pointed pointer reverse right rotate shift sign simple swap switch symbol transfer transport"},
+        {"name": "east", "tags": "angle arrow compass direction directional east element forward go indicator journey line maps move navigation next path point pointer position right signage symbol travel triangle"},
+        {"name": "expand_circle_down", "tags": "arrow arrows button chevron circle circle button close collapse collapse down control details direction down down arrow down arrow button dropdown dropdown indicator expand expand down expandable hide indicator information list maximize menu minimize more more options navigation reveal show"},
+        {"name": "expand_less", "tags": "arrow arrow up arrows caret up chevron chevron up close collapse collapse section condense contract direction direction up expand expandable fold fold up hide hide details indicate up less list minimize move up narrow navigation up pointer up reduce scroll up shrink triangle up tuck away up upward arrow"},
+        {"name": "expand_more", "tags": "action arrow arrows bottom chevron collapse control direction down dropdown element expand expandable hide indicator list menu more navigation pointer reveal shape show symbol triangle"},
+        {"name": "first_page", "tags": "arrow back beginning book caret chevron control data document file first jump jump back left list media media control move navigation page play playback presentation previous reverse rewind skip back slide start step transport"},
+        {"name": "fullscreen", "tags": "adjust app application arrows components corners diagonal arrows display enlarge enlarge view enlarge window expand expand view full fullscreen increase increase view interface maximize maximize window media player outward arrows presentation presentation mode scale scale view scale window screen screen size site size size view ui ux video player view viewing area web website window window size zoom"},
+        {"name": "fullscreen_exit", "tags": "adjust app application arrows close collapse components contract control corners diagonal dismiss display escape exit expand full fullscreen interface inward lines media minimize out presentation reduce resize screen shrink site size switch toggle ui ux video view viewer web website window zoom out"},
+        {"name": "home_work", "tags": "address architecture building business commercial company destination dwelling employment estate factory headquarters home house industry job location maps navigation office place real real estate residence residential shelter structure work workplace"},
+        {"name": "last_page", "tags": "advance app application arrow boundary chevron components double arrow double lines end fast forward final finish forward interface last last page limit line media control move navigation next page rewind right right arrow screen seek shape site skip skip forward ui ux vertical lines web website"},
+        {"name": "legend_toggle", "tags": "analytics box chart collapse control data description diagram display expand explanation filter graph hide infographic information key labels layers legend lines map measure menu metrics monitoring options rectangular settings show stackdriver statistics switch text three lines toggle tracking view visualization"},
+        {"name": "maps_home_work", "tags": "address architecture building business commercial company destination dwelling employment factory headquarters home house industry job location maps navigation office place real estate residential structure work workplace"},
+        {"name": "menu", "tags": "action menu app app menu application application menu bars burger collapse components control drawer expand expandable menu hamburger horizontal lines interface kebab layers line lines list main menu menu more more options navigation navigation menu options screen settings side menu sidebar site stack stacked bars stripes three bars ui ux web website"},
+        {"name": "menu_open", "tags": "app application arrow back bar menu burger chevron close close menu collapse components details directional expand forward hamburger hamburger menu hide interface items left line lines list menu menu open more navigation open open menu options panel right screen settings show side menu sidebar site three lines toggle ui ux web website"},
+        {"name": "more_horiz", "tags": "3 DISABLE_IOS actions additional app application choices components context menu control disable_ios dots ellipsis etc expand extra further horiz horizontal indicator interface ios list menu menu icon more more information navigation options options menu overflow screen separator series settings site symbol three three dots horizontal tools ui ux web website"},
+        {"name": "more_vert", "tags": "3 DISABLE_IOS actions additional options android app application components context menu controls detail menu disable_ios dots dropdown menu ellipsis etc expand menu expanded menu extra options hidden options interface list menu list options menu more more actions more options options menu overflow overflow menu pop-up menu screen settings site submenu tertiary actions three ui ux vert vertical vertical dots web website"},
+        {"name": "north", "tags": "arrow arrow up compass destination direction direction indicator directional geomagnetic geospatial guide guidepost heading journey location magnetic north map maps navigate navigation north orientation orientation marker point pointer routing sign top travel true north up upwards"},
+        {"name": "north_east", "tags": "arrow corner diagonal direction direction indicator east external external link follow link go to internet link link arrow location map maps move navigate navigation new tab north east noth open outbound path point redirect right share link up url visit website window"},
+        {"name": "north_west", "tags": "angle arrow basic corner diagonal direction directional indicator left line locate maps move navigation north northwest point pointer position shift simple thin top up west"},
+        {"name": "offline_share", "tags": "Android OS arrow bluetooth cell communication connect connected connection connectivity data transfer device direction distribute download file transfer hardware iOS link linked local share mobile mobile share multiple nearby sharing network share offline offline share p2p peer to peer phone right share sharing sharing content sharing data sharing files tablet technology upload wireless"},
+        {"name": "payments", "tags": "bank banking bill bills buy card cash coin commerce cost credit credit card currency debit card dollar dollars expense finance financial income layer money multiple online pay payment payments price purchase rectangle shop shopping store symbol transaction wallet"},
+        {"name": "pivot_table_chart", "tags": "accounting analysis analytics arrow arrows bar bars business chart columns dashboard data data visualization diagram direction drive edit editing finance graph grid infographic information insight key performance indicators measure metrics organize pivot pivot table presentation report reporting rotate rows sheet spreadsheet statistics summarize table tracking visualize"},
+        {"name": "refresh", "tags": "action around arrow arrows browser button circle circular arrow control cycle data data transfer direction download information inprogress internet load loading loading refresh loop navigation process refresh reload renew repeat right rotate spin status sync synchronize turn update upload waiting web"},
+        {"name": "south", "tags": "arrow arrow down below bottom button chevron control cursor direction directional down down arrow downward graphic guide indicator interface element location maps move down movement navigation pointer pointing down position scroll down south symbol triangle vertical"},
+        {"name": "south_east", "tags": "arrow bottom right arrow box corner arrow diagonal arrow direction directional down east enlarge expand external link fullscreen indicator jump line link maps maximize movement navigation new window open orientation out outline pointer rectangle resize right south southeast arrow square stroke"},
+        {"name": "south_west", "tags": "angle angle icon angled arrow arrow arrow icon change direction diagonal diagonal arrow direction direction icon directional down flow indicator left maps move movement movement icon navigation path point pointer progress route south south west south-west southwest arrow travel turn west"},
+        {"name": "subdirectory_arrow_left", "tags": "angle arrow back button control curve direction directory down file folder go back hierarchy indicate left level up line move up navigation path point return reverse structure sub subdirectory symbol ui element up"},
+        {"name": "subdirectory_arrow_right", "tags": "angle arrow bend continue corner curve direction directory down exit file folder forward guide indent jump line link message move navigation next path pointer reply return right route sub subdirectory symbol turn"},
+        {"name": "switch_left", "tags": "activation arrows button circle control deactivation device control directional directional switch element feature handle horizontal indicator interaction left navigation on/off option oval preference preference switch selection setting slider state state control switch switch left toggle toggle left track ui element"},
+        {"name": "switch_right", "tags": "active arrow arrows button configuration control direction directional inactive indicator move navigation off on option position preference right selection setting shift slider state switch toggle"},
+        {"name": "unfold_less", "tags": "arrow arrows chevron close collapse collapse all compact compress condense contract direction double arrow down expand expandable fold fold up hide inward less less data less detail limited list minimize narrow navigation point reduce resize shrink smaller triangle unfold unfold less up"},
+        {"name": "unfold_more", "tags": "arrow arrows caret chevron collapse control data direction direction change down expand expand less expand more expandable fold fold less fold more hide hierarchy indicator less list more navigation reveal sort table toggle unfold unfold less up"},
+        {"name": "waterfall_chart", "tags": "analysis analytics bar bars breakdown bridge business chart columns data decrease decrement diagram finance financial gain graph increase increment infographic loss measure metrics negative positive progress report stacked statistics summary tracking vertical visualization waterfall waterfall chart"},
+        {"name": "west", "tags": "arrow away back chevron direction directional exit guide indicator journey left map maps move navigation orientation path point pointer previous retreat return route signage travel triangle undo voyage way west withdraw"},
+    ],
+    "notification": [
+        {"name": "account_tree", "tags": "account account structure analytics branches chart connect connected connections corporate structure data diagram flow graph grouped hierarchy infographic layers levels linked management mapping measure metrics nested network nodes organization organizational chart outline process project structure relationships square statistics structure system team structure tracking tree tree structure visual hierarchy"},
+        {"name": "adb", "tags": "adb android bridge bug code command computing connect connection data debug debugger developer development device line link mobile phone port programming shell software technology terminal test testing tool transfer usb"},
+        {"name": "airline_seat_flat", "tags": "airline airplane aviation bed body business business class chair class comfort first first class flat flight horizontal human journey lay flat lounge luxury lying down passenger people person plane reclining reclining chair relax rest seat sleep transport transportation travel trip"},
+        {"name": "airline_seat_flat_angled", "tags": "abstract. airline airplane angled bed body booking business business class chair class comfort diagram first first class flat flying graphic human icon illustration legroom passenger people person plane recline reservation rest seat seating sleep symbol transport transportation travel"},
+        {"name": "airline_seat_individual_suite", "tags": "aircraft airline airplane aisle aviation body booking business business class cabin class comfort comfortable first first class flight flying human individual individual seat journey luxury middle passenger people person personal plane premium private reclining reservation rest seat sleep sleeping suite transportation travel window"},
+        {"name": "airline_seat_legroom_extra", "tags": "airline airplane body booking chair comfort comfortable extended extra feet flying human journey large leg legroom long passenger people person plane premium reservation row seat sitting space stretch transportation travel upgrade vehicle"},
+        {"name": "airline_seat_legroom_normal", "tags": "airline airplane area arrangement aviation body cabin chair comfort feet flight human journey layout leg legroom measurement normal passenger people person plane room seat seating sitting space standard transport transportation travel vehicle"},
+        {"name": "airline_seat_legroom_reduced", "tags": "aircraft airline airplane body cabin comfort cramped diminished economy feet flying human journey leg legroom less limited low minimal passenger people person plane reduced restricted row seat seating shrunk sitting small space tight transport transportation travel trip"},
+        {"name": "airline_seat_recline_extra", "tags": "airline airplane aviation body booking chair comfort comfortable extra feet flight flying holiday human journey leg legroom leisure lounge passenger people person plane premium recline relax relaxation reservation seat sitting space transport transportation travel trip upgrade vacation"},
+        {"name": "airline_seat_recline_normal", "tags": "airline airline diagram airline layout airplane body chair comfort comfortable diagram economy class extra feet flight human journey layout leg legroom normal normal position passenger passenger seat people person recline recline normal relax seat seating seating arrangement sitting space standard seat transport travel travel icon upright position upright seat vehicle"},
+        {"name": "bluetooth_audio", "tags": "audio bluetooth communication connect connecting connection connectivity data device discover find geometric lines link media music network pairing scan searching shape signal sound symbol technology transfer waves wireless"},
+        {"name": "confirmation_number", "tags": "access account admission authorization booking code confirmation credential digits entertainment entry event identifier key lock login number numbers order pass password pin receipt reference reservation secret secure sequence symbol ticket token unique validation verification"},
+        {"name": "directions_off", "tags": "arrow blocked cancel circle with slash clear route close cross out denied directions directions off disable directions disabled enabled end forbidden gps off guidance off line with slash location off map off maps navigation off no entry not allowed off on path off prohibited remove route right route route off sign slash stop stop navigation traffic travel off turn off x mark"},
+        {"name": "disc_full", "tags": "! album alert analog attention audio backup capacity caution cd circle computer danger data digital disc drive dvd entertainment error exclamation file full important mark media media player memory music notification record retro sound space storage symbol technology vintage warning"},
+        {"name": "do_disturb", "tags": "alert ban block cancel circle close control denied deny diagonal disable disturb do do not disturb exclude forbidden interrupt limit line mute notification off preference prohibited quiet remove restricted setting silence silent slash state status stop unavailable"},
+        {"name": "do_disturb_alt", "tags": "alert bell block cancel circle close denied deny diagonal line disable disturb do do not disturb exclude forbidden ignore interrupt line mute no access no entry notification off offline pause prohibit quiet remove restriction silence slash snooze stop unavailable warning"},
+        {"name": "do_disturb_off", "tags": "accessibility active allow notifications available bar cancel circle close denied deny diagonal line disabled disturb disturb off dnd off do do not disturb off enabled focus off inactive no alerts not silenced notifications off off off state on options quiet mode off receive alerts remove ringing settings silence silent mode off slash sound on stop toggle off turn off dnd turn off quiet mode turn off silent uninterrupted volume on"},
+        {"name": "do_disturb_on", "tags": "alert ban block blocking cancel circle close control dash denied deny disable notifications disabled disturb do do not disturb enabled exclusion limitation line minus mute no notification off on privacy quiet quiet mode remove restriction settings silence silent silent mode slash status stop turn off volume"},
+        {"name": "do_not_disturb", "tags": "alert bell block cancel circle close denied deny diagonal line disable disturb do do not disturb exclude forbidden ignore interrupt line mute neutral no access no entry notification off offline pause prohibit quiet remove restriction silence slash snooze stop unavailable warning"},
+        {"name": "do_not_disturb_alt", "tags": "alert ban block cancel circle close control denied deny diagonal disable disturb do do not disturb exclude forbidden interrupt limit line mute neutral notification off preference prohibited quiet remove restricted setting silence silent slash state status stop unavailable"},
+        {"name": "do_not_disturb_off", "tags": "accessibility active allow notifications available bar cancel circle close dash denied deny diagonal line disabled disturb disturb off dnd off do do not disturb off enabled focus off inactive no alerts not silenced notifications off off off state on options quiet mode off receive alerts remove ringing settings silence silent mode off sound on stop toggle off turn off dnd turn off quiet mode turn off silent uninterrupted volume on"},
+        {"name": "do_not_disturb_on", "tags": "alert ban block blocking cancel circle close control dash denied deny disable notifications disabled disturb do do not disturb enabled exclusion limitation line minus mute no notification off on privacy quiet quiet mode remove restriction settings silence silent silent mode status stop turn off volume"},
+        {"name": "drive_eta", "tags": "auto automobile automotive car car symbol cars destination direction directions drive drive time driving estimate estimated time eta journey maps mobility navigate navigation passenger vehicle public road route sedan time transport transport symbol transportation travel travel time trip vehicle vehicle icon"},
+        {"name": "enhanced_encryption", "tags": "+ access add authorized breaking encryption cipher closed code confidential data decoding decryption digital encryption enhanced key lock locked new open lock open padlock padlock password plus privacy private protection restricted safety scrambling secure security sensitive symbol technology unlock unlocked unscrambling"},
+        {"name": "event_available", "tags": "agenda appointment approve availability availability icon available booked booking calendar calendar icon check check icon checkmark complete confirmed confirmed appointment confirmed event date date available date confirmed date icon done event event icon event planning mark ok plan reminder schedule scheduled date scheduled event select tick time validate verified yes"},
+        {"name": "event_busy", "tags": "appointment blocked booked busy calendar cancel clear close cross date event exit fill full glyph holiday lines mark meeting no out of office outlined remove schedule solid square stop stroke time time off unavailable vacation x x mark"},
+        {"name": "event_note", "tags": "add event agenda appointment booking calendar create event date date picker day diary document entry event mark meeting memo month note organizer paper planner rectangle reminder schedule square text tickler time timeline timestamp writing year"},
+        {"name": "folder_special", "tags": "archive bookmark data directory doc document documents drive favorite favorite folder file files folder highlight important important folder marked marked folder organize save saved saved folder shape sheet slide special special folder star starred starred folder storage"},
+        {"name": "imagesearch_roller", "tags": "appearance applicator apply art brush coating color construction creative customize decoration design drawing edit editing fill house painting image imagesearch implement paint paint brush paint roller painting pattern renovation resurface roller search smooth style texture tools wall painting"},
+        {"name": "live_tv", "tags": "Android OS antenna antennas hardware broadcast broadcasting channel chrome content desktop device display electronic entertainment film iOS live live tv mac media monitor movie on demand ondemand video play playback rectangle screen show signal stream streaming technology television tv video watch web window"},
+        {"name": "mms", "tags": "attachment bubble chat comment communicate conversation dialogue bubble document envelope feedback file image image message landscape letter mail message message bubble mms mountain mountains multimedia multimedia message photo photo message photography picture picture message receive send sms speech speech bubble talk bubble text message"},
+        {"name": "more", "tags": "3 action additional archive bookmark button circle content context control details dots ellipsis etc expand extra favorite icon indent information label list menu menu item more navigation options overflow remember reveal rounded save secondary settings stamp sticker tab tag tertiary three three dots vertical"},
+        {"name": "network_check", "tags": "check confirmed connect connected connection connection check connectivity data good internet internet check internet connection mark meter network network status network test ok signal signal check signal strength speed status tick valid valid connection verified wifi wireless wireless connection"},
+        {"name": "network_locked", "tags": "access alert available cellular chain connection data data locked disconnect error internet limited lock locked mobile network network access network problem network signal not offline privacy private prohibition protected protection restricted restricted access safety secure secure connection security service signal status unavailable warning wi-fi wifi wifi locked wireless"},
+        {"name": "no_encryption", "tags": "alert blocked cancel data breach data security disabled enabled encryption error forbidden insecure internet security lock network security no no encryption not allowed off on open lock padlock password privacy private protection remove safety security security breach slash stop unauthorized access unlock unlocked unprotected unsecure vulnerability vulnerable warning"},
+        {"name": "no_encryption_gmailerrorred", "tags": "alert blocked cancel data breach data security disabled enabled encryption error forbidden gmail insecure internet security lock locked network security no no encryption not allowed off on open lock padlock privacy private protection remove security security breach slash stop unauthorized access unlock unlocked unprotected unsecure vulnerability vulnerable warning"},
+        {"name": "ondemand_video", "tags": "Android OS antenna broadcast broadcasting channel chrome content demand desktop device display electronic entertainment film hardware iOS live tv mac media monitor movie on demand ondemand ondemand video play playback rectangle screen show signal stream streaming technology television tv video watch web window"},
+        {"name": "personal_video", "tags": "Android OS cam chrome desktop device display entertainment entertainment center glyph hardware home house iOS living room mac media monitor outline personal rectangle screen solid fill squared corners streaming television tv video web window"},
+        {"name": "phone_bluetooth_speaker", "tags": "audio audio connection audio device bluetooth bluetooth device bluetooth icon call cell communication connect connection connectivity contact device hardware mobile pairing pairing device phone phone icon signal sound speaker speaker icon speakerphone symbol technology telephone transfer wireless wireless connection wireless speaker"},
+        {"name": "phone_callback", "tags": "arrow audio call callback cell cellular communication connection contact conversation device dial down graphic handset hardware incoming line mobile number outgoing outline phone receiver ring shape symbol talk technology telephone"},
+        {"name": "phone_forwarded", "tags": "angle arrow audio call cell cell phone communication connection contact device diagonal line direction forward forwarded handset hardware incoming line mobile move phone pictogram pointing receive redirect right right arrow symbol technology telephone transfer voice"},
+        {"name": "phone_locked", "tags": "access authentication authorization block call cell cellphone communication contact device gadget hardware lock locked mobile password phone privacy private prohibited protected protection restricted safety secure secure device security shield smartphone technology telephone"},
+        {"name": "phone_missed", "tags": "alert arrow call cell communication contact device diagonal hardware history incoming call line log missed missed call missed communication mobile notification outbound call phone phone call recent calls smartphone telecommunication telephone telephone communication tilted unanswered call voice call"},
+        {"name": "phone_paused", "tags": "break call cell communication contact delay device handheld handset hardware hold idle inactive interrupted mobile mute not active on hold pause paused phone quiet rectangular silent speaking square stop suspend talking technology telephone unavailable vertical waiting"},
+        {"name": "power", "tags": "arc button charge circle control cord device disable electric electrical electricity electronic enable energy indicator line off on outlet plug power reboot restart ring shutdown start state stop switch system technology toggle turn off turn on"},
+        {"name": "power_off", "tags": "button charge circle close command control cord device disabled electric electrical enabled end session exit geometric hardware line log out off on outlet plug power power button restart shut down slash standby suspend switch switch off switch on symbol system toggle turn off turn on vertical line"},
+        {"name": "priority_high", "tags": "! alarm alert attention caution critical danger error exclamation exclamation mark exclamation point flag high high priority important indicator mark message note notification outline point priority reminder signal symbol triangle triangular urgent warning"},
+        {"name": "running_with_errors", "tags": "! activity alert attention blocked busy caution danger debugging duration error errors exclamation execution failed failure important incomplete interrupted issue loading mark notification ongoing operation problem process processing progress running running with errors status stop symbol task time triangle troubleshooting warning with"},
+        {"name": "sd_card", "tags": "angled corner camera card computer data data storage device digital digital media documents electronic electronics external storage file management file storage information loading media memory memory card micro sd multimedia music storage photo storage photos portable storage removable storage saving sd sd card secure square storage technology transfer trapezoid video storage"},
+        {"name": "sd_card_alert", "tags": "! alert attention camera card caution chip communication danger data device digital electronic error exclamation exclamation point fail failed hardware important indication indicator issue mark memory mobile network notification phone photos problem sd sd card secure sim card slot status storage symbol triangle warning"},
+        {"name": "sim_card_alert", "tags": "! alert attention camera card caution chip communication danger data device digital electronic error exclamation exclamation point fail failed hardware important indication indicator issue mark memory mobile network notification phone photos problem sd sd card secure sim card slot status storage symbol triangle warning"},
+        {"name": "sms", "tags": "3 alert bubble bubble icon chat chat bubble chat icon comment communication communication icon contact conversation conversation icon dialogue direct message discuss dots instant message message message icon more new message notification send message service sms sms icon speech speech bubble talk text icon text message textsms three"},
+        {"name": "sms_failed", "tags": "! alert announcement attention broadcast caution chat chat bubble comment communicate communication conversation danger delivery failed element error exclamation fail failed feedback icon important mark megaphone message news notification public address send failed service sms sound speaker speech symbol text message volume warning"},
+        {"name": "support_agent", "tags": "advisor agent answer assistance avatar bubble call care chat communication consultant contact conversation customer customer service dialog dialogue face head headphone headset help online operator person profile question representative service speech bubble support talk tech support"},
+        {"name": "sync", "tags": "360 around arrow arrows circle circular arrows connection continuous curved arrows cycle data direction directional arrows exchange flow inprogress load loading refresh loop movement process refresh refresh icon reload reload icon renew repeating rotate rotating spin sync sync icon synchronize synchronize icon transfer turn two arrows update update icon"},
+        {"name": "sync_disabled", "tags": "360 around arrow arrows broken arrow broken circle cancel sync circle circular arrows data transfer disabled diagonal line direction disabled disconnect enabled inactive inprogress line load loading refresh no connection no sync not syncing off offline on pause sync refresh disabled renew rotate slash stop sync sync sync disabled synchronization off turn two arrows two lines unavailable update disabled"},
+        {"name": "sync_lock", "tags": "access access control around arrow arrows circle circular arrows connection data encryption encryption lock key lock locked loop network password privacy private protected protection refresh renew restricted rotate safety secure security sync sync lock synchronize system turn update"},
+        {"name": "sync_problem", "tags": "! 360 alert around arrow arrows attention caution circular arrows cloud cloud sync connectivity issue danger data error data issue direction error exclamation exclamation point failed failure important inprogress issue load loading refresh mark network issue notification problem refresh arrows renew retry rotate symbol sync sync error sync problem synchronization error synchronization problem transfer error triangle turn update error warning"},
+        {"name": "system_update", "tags": "Android OS app app install app promo arrow arrows cell device direction down down arrow download download app hardware iOS install install app install mobile marketing mobile mobile download phone phone download promotion security security update software software update system system update system upgrade tablet update upgrade"},
+        {"name": "tap_and_play", "tags": "Android OS wifi broadcast cast casting cell connect connection device display entertainment hardware iOS internet media mirror mirroring mobile network phone play pointer rectangle screen screen mirroring share signal stream streaming tablet tap technology television to triangle tv video waves wifi wireless"},
+        {"name": "time_to_leave", "tags": "auto automobile automotive car car symbol cars destination direction directions drive drive time driving estimate estimated time eta journey maps mobility navigate navigation passenger vehicle public road route sedan time transport transport symbol transportation travel travel time trip vehicle vehicle icon"},
+        {"name": "tv_off", "tags": "Android OS block cancel chrome cross out desktop device diagonal line disabled display electronic enabled entertainment hardware iOS inactive mac media monitor multimedia off on rectangular screen slash technology television tv unavailable web window"},
+        {"name": "vibration", "tags": "Android OS alert audio cell communication control device handheld haptic hardware iOS intensity lines mobile mode motion notification off phone portrait rectangle ring rounded corners settings silence silent smartphone sound switch tablet technology toggle vertical vibrate vibration waves"},
+        {"name": "video_chat", "tags": "avatar bubble call cam camera chat comment communicate communication conference conversation dialogue display facetime feedback head live meeting message network online person profile remote screen speech speech bubble talking technology video video call video chat virtual voice web conferencing webcam"},
+        {"name": "voice_chat", "tags": "audio audio call audio chat bubble cam camera chat comment communicate communication conversation dialog discussion facetime feedback instant messaging internet call message messaging app online chat phone call social media sound speech speech bubble talk talk bubble video voice voice call voice chat voice message"},
+        {"name": "vpn_lock", "tags": "access connection cyber security data protection digital security earth globe internet internet security lock lock icon locked network network security online padlock password privacy privacy lock private protected protected access protection restricted access safe safety secure secure connection security shield virtual virtual private network vpn vpn active vpn connection vpn status world"},
+        {"name": "wc", "tags": "accessibility amenities bathroom closet destination facilities facility female gender hygiene international lavatory location male man mapping men's room public restroom restroom room sanitary service sign symbol toilet travel unisex universal wash washroom water water closet wc women women's room"},
+        {"name": "wifi", "tags": "access point antenna bars broadcast communication computer connection connectivity data device hotspot indicator internet network online phone reception scan service signal status strength symbol technology waves wifi wireless"},
+        {"name": "wifi_off", "tags": "connection connection off data diagonal line disabled disconnected enabled internet internet off network network off network symbol no network no signal no wifi no wireless not connected off offline on outage scan service signal signal disabled signal off signal symbol slash unavailable unavailable connection unavailable network unavailable signal unavailable wifi unavailable wireless wifi wifi off wifi symbol wireless wireless off wireless symbol"},
+    ],
+    "places": [
+        {"name": "ac_unit", "tags": "ac air air conditioning asterisk climate cold condition conditioner control cool cooling crystal flake frost frozen ice point points polygon six pointed star six points snow snowflake star temperature unit weather winter"},
+        {"name": "airport_shuttle", "tags": "airport arrival automobile baggage bus car cars commercial commute delivery departure direction driving drop off four wheels ground transport journey luggage maps mini passenger pick up public public transport rectangle road round edges shuttle terminal transit transport transportation travel trip truck van vehicle wheels"},
+        {"name": "all_inclusive", "tags": "abstract all boundless complete comprehensive concept connected continuous cycle encompassing endless eternal everything figure eight forever full global inclusive infinite infinity lemniscate loop math mobius neverending strip sustainability sustainable symbol totality unbroken universal unlimited whole"},
+        {"name": "apartment", "tags": "accommodation address apartment architecture area block building business city commercial company complex downtown estate flat home house housing lines location navigation office outline places property real real estate rectangle region residence residential shelter silhouette skyscraper square structure tower units urban windows workplace"},
+        {"name": "baby_changing_station", "tags": "accessibility amenities babies baby bathroom body care changing changing station child children diaper facilities family father health human hygiene infant kids lavatory location medical mother nappy newborn nursery parent parent and child room parents room people person pictogram place public restrooms rest area restroom services sign station symbol toddler toilets w.c. wc young"},
+        {"name": "backpack", "tags": "adventure back backpack bag book bookbag camping camping bag carry college daypack education gear hiking hiking bag journey knapsack luggage outdoor pack rucksack satchel school storage supplies travel travel bag trip vacation"},
+        {"name": "balcony", "tags": "accommodation apartment architecture balcony building doors estate exterior flat home hotel house housing living space loggia maps open air out outdoor outdoor space outside place property railing real real estate residence residential residential building stay structure terrace tourism travel vacation veranda view window"},
+        {"name": "bathtub", "tags": "amenity appliance bath bathing bathroom bathtub bubbles clean comfort domestic element fixture graphic home hotel house human hygiene icon leisure outline person plumbing relaxation sanitation shape shower soak spa symbol therapy travel tub wash water wellness"},
+        {"name": "beach_access", "tags": "access activity beach coastal coastline destination getaway holiday leisure ocean outdoors parasol places recreation relax relaxation resort sand sea shade summer sun sunny sunshade tourism travel trip tropical umbrella vacation"},
+        {"name": "bento", "tags": "applications arrangement bento blocks box collection compartments control dashboard dinner display food grid grouped launcher layout lunch matrix meal menu modules navigation nine squares options organized pattern restaurant sections shortcuts squares structure takeout tiles view window"},
+        {"name": "bungalow", "tags": "accommodation architecture building bungalow buy chimney construction cottage dwelling estate home home icon house house icon housing lodging maps place property property listing real real estate rent residence residential roof shelter simple house small house stay structure traveling windows"},
+        {"name": "business_center", "tags": "accessory assets bag baggage belongings box briefcase business career carrying case center commerce container corporate goods handle holding item job luggage object office personal places portfolio professional purse rectangle storage strap suitcase travel work"},
+        {"name": "cabin", "tags": "accommodation architecture basic building cabin camping cottage country door dwelling escape estate getaway home house lodging log log cabin maps nature outdoors place property real real estate rectangle residence residential roof rural shelter simple square stay structure travel traveling triangle vacation walls windows wood"},
+        {"name": "carpenter", "tags": "build building career carpenter construct construction craft create cutting employee figure fix handyman individual job labor manual labor occupation outline person profession repair saw silhouette skill tool tools trade woodworking work worker"},
+        {"name": "casino", "tags": "bet betting building cards casino casino chip chance chips craps destination dice dots entertainment fortune fun gamble gambling game games gaming landmark leisure lose luck nightlife places play poker risk roulette slots tokens win"},
+        {"name": "chalet", "tags": "A-frame alpine architecture building cabin chalet chimney cottage countryside door dwelling dwelling place estate holiday home house lodge lodging maps mountain place real residence residential retreat roof rural shelter skiing stay structure travel traveling triangular trip vacation window"},
+        {"name": "charging_station", "tags": "Android OS battery bolt car cell charge charging charging station connector device electric electric vehicle electricity energy ev filling fueling hardware iOS icon instant lightning location map mobile mobile charge navigation phone pin plug point of interest pointer power road station symbol tablet thunderbolt transport vehicle"},
+        {"name": "checkroom", "tags": "apparel bag boutique changing room checkroom cloakroom closet clothes clothing coat check dressing room facility fashion fitting room garment hanger hanging hotel location luggage place reception retail service shop storage store travel visitor wardrobe"},
+        {"name": "child_care", "tags": "babies baby care carriage child childcare children cradle crib cr\u00e8che daycare face family guardian high chair infant kids monitor newborn nursery parenting protection responsibility safety security stroller supervised supervision toddler watch young youth"},
+        {"name": "child_friendly", "tags": "access age age rating baby body care carriage child children content control demographic family figure filter friendly head infant kid kids newborn parent parent filter person profile protection restriction safe secure silhouette stroller toddler user young youth"},
+        {"name": "corporate_fare", "tags": "abstract architecture banking building business city company corporate estate fare finance full government graphic headquarters icon institution law line office organization place real real estate rectangle residence residential shape shelter skyscraper solid structure symbol tower urban"},
+        {"name": "cottage", "tags": "abode accommodation architecture beach building cabin cottage countryside door dwelling dwelling place estate home house housing lake lodge lodging. maps place property real rectangle residence residential roof rural shelter simple house small house square stay structure traveling triangle village wall window"},
+        {"name": "countertops", "tags": "abstract bathroom block building commercial construction counter countertops decor design element flat furniture home horizontal house interior design kitchen laminate line material outline plane renovation residential room shape simple sink slab solid stone surface table tops wood"},
+        {"name": "crib", "tags": "babies baby baby bed basic bassinet bed bedroom box child child bed children cradle crib drawing furniture infant infant bed kid lines minimal newborn nursery object outline rectangle silhouette simple sleep sleeping square stroke toddler"},
+        {"name": "desk", "tags": "business computer desk desk education equipment flat surface four legs furniture home office indoor interior learning line art minimal object office organization planning productivity rectangular silhouette simple storage study table work workspace"},
+        {"name": "do_not_step", "tags": "alert boot boundary caution circle danger disabled do do not step enabled feet floor foot footprint forbidden ground hazard limit movement no access no stepping not off off limits on prohibition restricted restricted area safety shoe shoe print sign slash sneaker standing step steps stop symbol walking warning"},
+        {"name": "do_not_touch", "tags": "access denied barrier beware blocked caution constraint control cursor delicate disabled do don't touch enabled exclusion finger fingers forbidden gesture halt hand interaction limitation no touching not not allowed off off limits on pointer prevented prohibit restricted restricted access safety sensitive slash stop touch warning"},
+        {"name": "dry", "tags": "air air dry appliance bathroom button clothes control cycle dry dryer drying fingers gesture hand hang dry heat household indicator laundry laundry machine mode no heat option panel setting settings spin status symbol tumble washing washing machine wc"},
+        {"name": "elevator", "tags": "abstract access architecture arrows body building button construction control destination direction down elevator floors human indicator indoor interface levels lift machinery movement navigation people person pointer simplified symbol technology transport travel triangles up vertical"},
+        {"name": "escalator", "tags": "access accessibility airport arrow ascend building convenience descend directions disabled access down escalator facility floor levels mall movement moving walkway navigation public transport sign staircase stairs station steps transport transportation travel up wayfinding"},
+        {"name": "escalator_warning", "tags": "alert attention body broken building caution child danger downward movement escalator exclamation mark facility filled forbidden hazard human kid maintenance mechanical stairs moving stairs no entry notification out of order outlined parent people person prohibited public transport restricted safety sign symbol triangle upward movement warning"},
+        {"name": "family_restroom", "tags": "accessibility amenities baby bathroom changing station child children directional facilities facility family family bathroom family restroom family toilet father gender gender neutral bathroom gender neutral restroom gender neutral toilet human kids lavatory men mother navigation parents people person public area public bathroom public restroom public toilet restroom services signage toilet wc women"},
+        {"name": "fence", "tags": "backyard barrier border boundaries boundary boundary line construction defense demarcation door enclosure entrance fence flowers garden gate grass home house landscape nature nest outdoor outline outside perimeter picket fence private property protection railing residential security separation structure wooden yard"},
+        {"name": "fire_extinguisher", "tags": "alarm alert control cylinder danger device element emergency equipment extinguish extinguisher fire fire extinguisher flame graphic handle hazard hose icon lever minimal nozzle prevention protection rescue safety security simple symbol tool ui warning water"},
+        {"name": "fitness_center", "tags": "active athlete athletics barbell bodybuilding center dumbbell exercise fitness fitness center fitness club gym gym class gym equipment health health club hobby lifting muscle personal training physical activity places sport strength training training equipment weightlifting weights workout workout center"},
+        {"name": "food_bank", "tags": "access aid architecture assistance bank building center charity community distribution donation eat estate food food bank fork giving help house hunger institution knife meal non-profit organization place provisions real residence residential resource service shelter social storage structure supplies support utensils warehouse welfare"},
+        {"name": "foundation", "tags": "architectural element architecture base base icon basis beginning building building block column construction construction icon core development essential establishing estate foundation fundamental ground home house pillar progress property real real estate residential root solid stable start structure support"},
+        {"name": "free_breakfast", "tags": "beverage break breakfast cafe caffeine ceramic coffee cup diner dining drink eatery food free handle hot drink kitchen local morning mug order refreshment relax restaurant service shop steam store tea warm"},
+        {"name": "gite", "tags": "architecture automation branch changes code collaboration commit deployment developer development estate fork git gite history home hostel hosting house integration local maps merge open source pipeline place programming project pull request real remote repository repository manager residence residential software source code stay tracking traveling update version control workflow"},
+        {"name": "golf_course", "tags": "activity area athlete athletic ball club course entertainment fairway field flag game golf golf course golfer golfing green grounds hobby hole landscape leisure location map navigation outdoor park pin places putt recreation sport sports tee"},
+        {"name": "grass", "tags": "agriculture backyard blade botanical cultivate earth eco environment field flora fodder foliage garden grass green ground growth home landscape lawn leaves meadow natural nature organic outdoor park pasture plant stem turf wild yard"},
+        {"name": "holiday_village", "tags": "accommodation architecture beach buildings camping city cityscape collection community cottage destination estate group holiday holiday village home house houses housing lake lodge lodging maps neighborhood perspective place property real real estate residence residential rural settlement skyline stay street suburban tourism town travel traveling urban vacation village"},
+        {"name": "hot_tub", "tags": "bath bathing bathroom bathtub bubbles circle comfort health hot hot tub hotel human hydrotherapy jacuzzi leisure lines person pool recreation relaxation resort rounded rectangle shower soak soaking spa steam steam lines therapy travel tub warm water wellness"},
+        {"name": "house", "tags": "abode architecture basic building button door dwelling element estate family geometric graphic home homepage house icon line navigation outline place places property real real estate rectangle residence residential roof shelter simple square structure symbol triangle wall window"},
+        {"name": "house_siding", "tags": "aluminum architectural architecture building building material construction design dwelling estate exterior facade home horizontal lines house house siding housing layered material overlapping paneling pattern property real real estate renovation repair residential shelter siding structure textured vinyl wall wood"},
+        {"name": "houseboat", "tags": "accommodation aquatic architecture beach boat building dwelling estate floating holiday home house houseboat lake leisure living lodging maps marine nautical place property real real estate recreation rental residence residential river sea stay tourism transport travel travel industry traveling vacation vessel watercraft"},
+        {"name": "iron", "tags": "appliance cleaning clothes clothes iron clothing domestic electric electric iron fabric garment care handle heat home appliance home. household appliance housework iron ironing laundry machine object pressing pressing iron smooth steam steam iron textile care triangle wrinkles"},
+        {"name": "kitchen", "tags": "appliance appliances building building structure cabinets cold cooking cooking area cooking space culinary dining domestic eat food food preparation fridge furniture home home appliance house ice interior kitchen line art outline oven places rectangle refrigerator residential room shape simple storage stove"},
+        {"name": "meeting_room", "tags": "access arch building business closed collaboration communication conference door doorway entrance exit gathering group home house interior meeting meeting room office open people places rectangular room space square team threshold work"},
+        {"name": "microwave", "tags": "appliance buttons controls convenience cook cooking defrost domestic door easy electric electronics food heat heating home house kitchen machine meal microwave oven panel prepare quick rectangle reheat square warm"},
+        {"name": "night_shelter", "tags": "abode accommodation architecture assistance bed building dormitory dwelling emergency estate facade guesthouse help home homeless hostel hotel house housing lodging night place protection real refuge residence residential roof safety shelter sleep sleeping stay structure support temporary"},
+        {"name": "no_backpack", "tags": "access denied accessory alert backpack bag bookbag caution circle denied diagonal line disallowed excluded forbidden knapsack line luggage no not not allowed off limits pack prohibited restriction rucksack slash stop travel unavailable warning"},
+        {"name": "no_drinks", "tags": "alcohol alcoholic beverages alert bar beverage beverages bottle circle cocktail cup diagonal line drink drinks event food food and drink forbidden glass liquid liquor no no drinks non-alcoholic beverages not allowed place prohibited prohibition regulation restaurant restricted restriction rule sign slash symbol warning wine"},
+        {"name": "no_flash", "tags": "alert blocked bolt camera camera settings crossed out denied diagonal line disabled electric enabled energy error flash flash disabled flash off forbidden image instant light light off lightning lightning bolt negative no no flash no light notification off on photo photo settings photography picture prohibited restriction slash thunderbolt triangle unavailable warning"},
+        {"name": "no_food", "tags": "alert allergy blocked caution circle diet dining disabled drink eating restriction enabled exclusion fastfood food food restricted forbidden forbidden symbol hamburger icon kitchen limitation meal no no food no symbol not allowed off off limits on prohibited restaurant restricted restriction slash snack symbol unavailable unavailable food warning"},
+        {"name": "no_meeting_room", "tags": "booking building calendar conference room crossed out disabled door doorway enabled entrance event furniture geometry home house interior location meeting meeting room no not available off office on open outline place places prohibited rectangle reservation restricted room schedule slash square unavailable unavailable meeting room unavailable room"},
+        {"name": "no_photography", "tags": "access denied blocked camera capture circle crossed out diagonal line disabled disallowed do not record enabled filming prohibited forbidden image lens media multimedia no no camera no photo no photography not allowed off on photo photography photography forbidden picture private prohibition record red circle restricted shutter slash visual media"},
+        {"name": "no_stroller", "tags": "access denied area baby baby carriage banned care carriage caution child children circle diagonal line disabled enabled facility forbidden infant infant transport kid limitation newborn no no children no stroller not allowed off on parents perambulator pram prohibited public area regulation restricted rule section signage slash stroller symbol toddler warning young zone"},
+        {"name": "other_houses", "tags": "abodes architecture area buildings collection of homes community cottage district dwelling estate group of houses habitations home homes house houses housing housing development maps multiple houses neighborhood other place property real real estate residence residences residential residential area stay structure suburban town traveling urban village"},
+        {"name": "pool", "tags": "activity aquatic athlete athletic bath beach body dip entertainment exercise facility fitness fitness center fun health hobby hot tub hotel human indoors leisure ocean outdoor people person places play pool recreation relax resort sea spa sports summer swim swimming therapy vacation water"},
+        {"name": "rice_bowl", "tags": "asian cuisine asian food bowl breakfast carbohydrate ceramic bowl cooking cuisine dining dinner dinnerware dish eating food grains ingredients kitchen lunch meal nutrition oriental food restaurant rice rounded bowl serving serving dish staple food"},
+        {"name": "roofing", "tags": "angle apex architecture builder building chimney commercial construction contractor estate gable home house maintenance peak property protection real real estate repair residence residential roof roof structure roofing roofline service shelter shingle structure tile triangle"},
+        {"name": "room_preferences", "tags": "adjust apartment blueprint building configuration control customise diagram door doorway dwelling edit entrance environment floor plan gear home house interior layout manage map modify office open options personalize plan preferences property real estate room settings space structure user settings"},
+        {"name": "room_service", "tags": "alert amenity bell breakfast call catering cloche cover delivery dining dinner dish dome eat food delivery hospitality hotel lunch luxury meal metal notify order plate restaurant room room service service serving silver travel tray"},
+        {"name": "rv_hookup", "tags": "arrow attach automobile automotive back camper camping campsite car cars connect connection destination direction electric hookup hookup left lodging maps motorhome outdoor park parking parking space power hookup public recreation recreational vehicle right road trip rv sewage hookup trailer transportation travel truck vacation van vehicle water hookup"},
+        {"name": "smoke_free", "tags": "addiction area banned cigar cigarette circle clean air diagonal line disabled enabled environment forbidden free graphic health never no no smoking not allowed off on pictogram places policy prohibited prohibition public space restricted rule sign slash smoke smoke free smoking smoking prohibited symbol tobacco warning zone"},
+        {"name": "smoking_rooms", "tags": "access airport allowed amenity area bar break building cigarette designated facility hotel location lounge permission permitted places point of interest public recreation relaxation restaurant room rooms sign smoke smoking space symbol tobacco zone"},
+        {"name": "soap", "tags": "bar bath bathroom beauty block body wash bubbles clean cleaning product cosmetic detergent fingers foam freshness gesture hand healthcare hygiene item lather personal care product rectangle sanitation shower soap spa suds symbol toiletries wash wc"},
+        {"name": "spa", "tags": "aromatherapy bath beauty body flower glyph graphic health healthcare hot springs hotel icon leaf luxury massage meditation nature petals places rejuvenation relax relaxation resort sauna spa steam room symbol therapy treatment water wellbeing wellness"},
+        {"name": "sports_bar", "tags": "alcohol bar beer building casual cheers drink drinking drinks entertainment establishment facility food gathering hangout leisure liquor location lounge nightlife pint place pub rectangular relaxation restaurant rounded corners social sports sports bar tavern venue"},
+        {"name": "stairs", "tags": "abstract access architecture ascending building climb descending direction down downward elevation fall floor geometric icon incline ladder level linear movement navigate path perspective rise shape simple staircase stairs stairway stairwell steps stroke symbol up upward"},
+        {"name": "storefront", "tags": "brick and mortar building business buy buying cafe commerce commercial e-commerce economy establishment front goods lines market marketplace merchant online store places products purchase rectangular restaurant retail sale sell selling shop shop icon shopping store store building storefront storefront icon trade vendor window"},
+        {"name": "stroller", "tags": "accessibility accessible baby buggy care carriage child childcare children family father handle infant kid mother newborn outdoor parent park perambulator pram pushchair seat shopping stroller toddler transportation travel walk wheels young"},
+        {"name": "tapas", "tags": "app logo appetizer book brand brunch cartoon comic content creative digital comics digital content dinner entertainment episode food graphic novel illustration literature lunch media mobile app online reading open book platform publication publisher reader reading restaurant series snack story tapas visual story web app webtoon"},
+        {"name": "tty", "tags": "accessibility aid assistance audio buttons call cell chat communication connection contact conversation deaf device disability display hardware hearing impaired impaired input keypad messaging mobile output phone rectangle screen sound speech square talk telephone teletype teletypewriter terminal text text telephone tty"},
+        {"name": "umbrella", "tags": "accessory bad weather beach clothing cover curved element equipment forecast gear handle item object open outdoor pictogram pole portable protection rain rainy day safety semicircle shelter shield stick sun sunny symbol umbrella weather wet"},
+        {"name": "vape_free", "tags": "addiction ban circle diagonal line disabled e-cigarette ecigarette electronic cigarette enabled forbidden forbidden sign forbidden symbol free health health and safety never no no smoking no vaping off on places prevention prohibited quit vaping restriction safety slash smoke smoking smoking ban stop vaping symbol tobacco vape vape free vaping vapor warning wellness zone"},
+        {"name": "vaping_rooms", "tags": "allowance allowed amenities area building cloud designated e-cigarette electronic cigarette facility indoor location lounge never no permitted place places private prohibited public puff recreation relaxation room service sign smoke smoking symbol tobacco vape vaping vapor warning zone"},
+        {"name": "villa", "tags": "accommodation architecture beach building city country dwelling estate holiday home hotel house housing lodging maps place property real real estate residence residential structure tourism town travel traveling urban vacation vacation stay villa"},
+        {"name": "wash", "tags": "appliance bathroom care chores clean cleaning cleanse clothes cycle delicate detergent dirt fabric fingers garment gesture hand heavy home hygiene laundry machine refresh regular remove rinse sanitize service soap spin stain tumble wash water wc"},
+        {"name": "water_damage", "tags": "alert architecture building caution ceiling damage damp disaster drip droop drop droplet emergency estate flood floor hazard home house issue leak liquid maintenance mark moisture pipe plumbing problem property puddle real repair residence residential shelter stain storm wall warning water water damage weather wet"},
+        {"name": "wheelchair_pickup", "tags": "accessibility accessible assistance auto body car disability disabled drive dropoff handicap handicapped health help human icon medical mobility person pickup ride seat sign silhouette special assistance symbol taxi transport transportation travel vehicle wheelchair wheels"},
+    ],
+    "search": [
+        {"name": "bathroom", "tags": "accessibility accessible amenities bar bath bathroom building closet convenience directions disabled access facilities gender neutral home hotel house hygiene lavatory location mens navigation place plumbing public bathroom public facilities public restroom public toilet public wc restaurant restroom room sanitary shower sprinkler toilet toilet facilities toilet room unisex venue wash wash room washroom water water closet wc womens"},
+        {"name": "bed", "tags": "apartment bed bedroom bedtime blanket comfort double dreaming dwelling full furniture home hospital hostel hotel house inn king lodging mattress motel nap night pillow pillows queen relax residence rest room siesta size sleep sleeping"},
+        {"name": "bedroom_baby", "tags": "babies baby bed bedroom care child childhood children comfort cradle crib domestic family furniture guardian home horse house infant interior kid monitor nap newborn nursery parent rest rocking room room type safety security sleep sleeping toddler young"},
+        {"name": "bedroom_child", "tags": "accommodation baby bed bedroom building child children cot crib domestic furniture home hotel house infant interior kid kids lodging night nursery pillows rest room size sleep sleeping small toddler twin young"},
+        {"name": "bedroom_parent", "tags": "adult bed bedroom building child children domestic double dwelling family full furniture guardian home hotel house kids king night parent parents pillows queen relaxation residential rest room sizem master sleep sleeping structure"},
+        {"name": "blender", "tags": "appliance base beverage preparation blades blend blender container cook cooking drink electric electric mixer food food preparation food processing home home appliance jug juicer kitchen kitchen gadget liquid machine mixing mixing machine object preparing drinks preparing food shake smoothie vitamix"},
+        {"name": "camera_indoor", "tags": "architecture automation building camera cctv device dome camera electronic estate film filming home home security house image indoor indoor camera inside interior camera ip camera live feed monitoring motion nest network camera picture place protection real recording residence residential safety security security camera shelter smart home stream surveillance surveillance camera technology video video feed videography"},
+        {"name": "camera_outdoor", "tags": "architecture building business camera cctv commercial dome camera estate exterior film filming footage home home security house image monitor monitoring motion nest outdoor outdoor camera outside perimeter picture place property protection real record recording residence residential safety security security camera shelter surveillance surveillance camera video videography view watching"},
+        {"name": "chair", "tags": "balcony bedroom chair comfort couch decoration dining furniture garden graphic home house illustration indoors item living living room lounge lounging loveseat object office outline patio pictogram relax rest room seat seating simple sofa symbol"},
+        {"name": "chair_alt", "tags": "basic cahir chair comfortable furniture graphic home house household illustration indoor kitchen line lounging object office outline pictogram rectangle seat seating simple sitting solid symbol table waiting"},
+        {"name": "coffee", "tags": "barista beverage break breakfast cafe cafe culture cafe menu caffeine chocolate coffee coffee cup cup diner drink energy food hot hot beverage hot drink kitchen liquid menu item morning mug plate refreshments restaurant set steam steaming tea warm"},
+        {"name": "coffee_maker", "tags": "appliance appliances automation beverage breakfast brew cafe caffeine coffee coffee maker cooking cup domestic drink drip coffee electric equipment food and drink home hot drink household kitchen machine maker morning mug object pour over preparation restaurant service"},
+        {"name": "dining", "tags": "beverage bistro breakfast cafe cafeteria canteen cuisine cutlery diner dining dinner drink eat eating fine dining food fork hunger kitchen knife lunch meal nourish plateware restaurant room satisfy service serving silverware spoon table taste"},
+        {"name": "door_back", "tags": "access back barrier close closed diagonal line door doorway egress entrance entry escape exit go back handle home horizontal line house knob leave move backward navigate back open opening passage portal previous rectangle return shut way way out"},
+        {"name": "door_front", "tags": "access access point building close closed door doorway dwelling entrance entry entry point exit front front door gateway handle home house leave open opening passage portal property rectangle rectangle with handle security shelter structure threshold way welcome"},
+        {"name": "door_sliding", "tags": "access architecture auto automatic barrier basic building close door doorway double entrance entry exit frame furniture gateway glass home horizontal house interior lines open opening panel passage portal rectangular room simple sliding sliding door threshold two vertical"},
+        {"name": "doorbell", "tags": "alarm alert app icon basic bell button chime door doorbell entrance graphic home house icon illustration notification outline rectangle rectangular ring ringing security silhouette simple smart home sound symbol ui icon visitor website icon"},
+        {"name": "feed", "tags": "abstract article atom blog broadcasting circle communication content curves data distribution dots feed headline information information flow internet lines media network news newspaper paper public publishing rss signal social square stream subscription symbol syndicated timeline updates waves web"},
+        {"name": "flatware", "tags": "cafe cafeteria catering cooking cutlery diner dining dinner dishware eat eating flatware food fork glyph kitchen knife local meal menu outline pictogram restaurant serving silverware simple spoon table setting tools utensils"},
+        {"name": "garage", "tags": "auto automobile automotive building car cars closed direction door entrance garage home house maintenance maps mechanic open outline park parking property real estate repair residential shop silhouette simple storage structure tool transportation travel vehicle workshop"},
+        {"name": "light", "tags": "abstract adjust basic bright brightness bulb ceiling concept control electricity energy glow hanging idea illumination indicator inside interior lamp light lighting minimal modern off on outline pendent power preference room setting shine sign simple switch symbol toggle"},
+        {"name": "living", "tags": "account account icon avatar basic bust chair comfort couch decoration figure furniture generic head home house human identity individual living living being lounging loveseat minimal outline person person icon placeholder profile profile icon representation room seat seating shape shoulders silhouette simple sofa user user icon"},
+        {"name": "manage_search", "tags": "administration configure control discover explore filter find find and manage glass history interface lens locate magnifying magnifying glass manage options organize preferences query results search search and organize search filters search results settings system text tool utility"},
+        {"name": "podcasts", "tags": "audio audio player bars broadcast casting circle communication content entertainment episode internet lines listen listen now media media player microphone music network news play play button podcast podcasts radio record signal sound speech streaming talk technology transmitting voice waves wireless"},
+        {"name": "shower", "tags": "apartment bath bathroom cleaning cleanliness closet droplet droplets fixture graphic head home hotel house hygiene icon lines personal care place plumbing rain refresh relaxation room sanitary shower spa spray sprinkler stream symbol wash washing water wc"},
+        {"name": "table_bar", "tags": "analysis analytics bar business cafe chart columns data diagram figures finance graph grid infographic information lines metrics numbers performance planning presentation report research results round rows spreadsheet statistics table trend visualization"},
+        {"name": "table_restaurant", "tags": "bar bistro bistro table book table booking cafe cafe table dining dining experience dining room dining table dinner eat eatery eating food food and drink food service furniture lunch meal place setting pub reservation reserve restaurant restaurant table seat seating serve table"},
+        {"name": "window", "tags": "aperture app application application window basic shape border browser window close computer window container desktop display element frame glass grid home house interior layer layout modal window opening outline outside pane panel pop-up program program window rectangle screen shape software square view window"},
+        {"name": "yard", "tags": "area backyard building compound dwelling estate exterior flower front yard garden green space grounds home house land landscape lawn location lot nature open space outdoor parcel pettle plants plot property real estate region residence space territory yard"},
+    ],
+    "social": [
+        {"name": "18_up_rating", "tags": "18 plus 18+ access restriction adult content age limit age rating age restriction age verification censorship certification circle content rating content warning eighteen plus eighteen+ explicit content filtering mature content number 18 parental advisory rating restricted content sensitive content text warning"},
+        {"name": "6_ft_apart", "tags": "6 6 feet apart body caution covid covid-19 distance feet figures ft guideline health health and safety horizontal human instruction line measure measurement pandemic people person public health rule safe distance safety separate separation social social distancing spacing standing two people warning"},
+        {"name": "add_moderator", "tags": "+ add add administrator add member add moderator add person add profile add user administrator certified human icon invite member invite person invite user man icon member icon moderator new new administrator new member new moderator new person new profile new user person icon plus plus administrator plus member plus moderator plus person plus profile plus user privacy private profile icon protect protection security shield symbol user icon verified woman icon"},
+        {"name": "add_reaction", "tags": "+ add add emotion add feeling add reaction append button chat circle comment communications emoji emoticon emotions express expressions face feedback feelings glad happiness happy icon icons include insert interaction like mood new outline person pleased plus plus sign positive response smile smiley face smiling social social media survey symbol"},
+        {"name": "architecture", "tags": "architecture art blueprint building city city building cityscape compass construction design draw drawing dwelling engineering exterior facade geometric home house housing monument plan property real estate residential residential building shelter skyscraper structure tool town urban urban building village"},
+        {"name": "assist_walker", "tags": "accessibility accessible aid assist assistance assisted living assistive device body care disability elderly figure handicap healthcare help human injured injury medical mobility movement nursing home outline person physical therapy rehabilitation retirement senior silhouette stick figure support therapy walk walker walking aid"},
+        {"name": "back_hand", "tags": "anatomy appendage back back of hand backhand body part fingers five five fingers gesture hand high five human index finger knuckles limb middle finger open open hand palm palm facing away person pinky raised ring finger stop talk to the hand thumb wave"},
+        {"name": "blind", "tags": "abstract accessibility accessible assist blind blinds blinds down block body cane closed blinds cover curtain darkness decoration disability geometry handicap help home horizontal lines human interior light mobility obscure parallel parallel lines person privacy shades stripes sunblock vertical lines walk walker window window blinds window covering window shades"},
+        {"name": "boy", "tags": "account avatar body boy bust character child gender head human male man minimal outline people person profile profile picture shoulders silhouette simple social symbol user young person"},
+        {"name": "cake", "tags": "add anniversary baked baked goods bakery birthday cake candle candles celebration confection delicious dessert edible event festive food frosting happy birthday holiday new occasion party pastries pastry patisserie plus slice snack social special occasion sugar sweet symbol treat"},
+        {"name": "clean_hands", "tags": "bacteria body bubbles care clean cleanse disinfect germ germs gesture hand hand washing hands health health education healthcare hygiene hygiene awareness medical personal prevention protection public health safety sanitary sanitize sanitizer sickness soap virus wash hands washing water wellness"},
+        {"name": "co2", "tags": "air atom carbon carbon dioxide chemical chemical compound chemical formula chemistry climate change co2 dioxide education element emissions environmental experiment gas greenhouse gas icon laboratory learning molecule outline pictogram pollution science scientific stroke study symbol"},
+        {"name": "compost", "tags": "bin bio biomass compost compostable composting container decomposable decompose decomposition earth eco ecology environment environmental food scraps garbage garden gardening green leaf leafs natural nature organic organic waste plant recycle recycling reduce reuse rot sustainability sustainable trash waste"},
+        {"name": "connect_without_contact", "tags": "broadcast communicating communication connect connection connectivity contact contactless data distance link network pairing people proximity radio rf ripples sharing signal social socialize sync synchronization technology transfer transmission waves wireless without"},
+        {"name": "construction", "tags": "build builder building carpenter construction developing development engineer engineering equipment fix fixing hammer handyman improvement in progress industrial industry maintain maintenance renovate renovation repair site site work technical technician tools tradesman tradesperson under construction work worker working wrench"},
+        {"name": "cookie", "tags": "alert baked goods biscuit chocolate chip cookie circle circle with dots circular compliance consent cookie cookies crumbs data dessert dotted circle food gdpr notification options preferences privacy privacy settings round settings snack sweet tracking treat wafer website data"},
+        {"name": "coronavirus", "tags": "19 bacteria biohazard biology cell circle contagious coronavirus covid covid-19 disease epidemic germ germs global health healthcare illness infection medical microbe outbreak pandemic pathogen points research science sick sickness social sphere spikes virus"},
+        {"name": "cruelty_free", "tags": "animal animal friendly animal testing animal welfare beauty bunny care cosmetics cruelty cruelty free eco ethical ethical products ethical shopping free humane ingredients jump jumping leaping leaping bunny nature no animal testing personal care rabbit responsible social sustainability sustainable testing toiletries vegan vegetarian"},
+        {"name": "cyclone", "tags": "air airflow alert atmosphere chaos circular motion climate crisis cyclone danger destruction disaster dynamic force forecast funnel hurricane movement natural natural disaster nature powerful rain spinning spiral storm tornado twister vortex warning water weather weather icon wind winds windstorm"},
+        {"name": "deck", "tags": "aligned angled bridge cards cards deck chairs collection deck deck of cards depth diagonal entertainment gambling game group home house layered layered squares layers multiple organized outdoors outside overlapping patio perspective pile playing cards poker rectangle set social solitaire square stack terrace umbrella yard"},
+        {"name": "diversity_1", "tags": "account avatar characters circle collaboration collective committee community crowd diverse diversity faces family figures friends group groups head heart humans identity inclusion individuals multiple network people person persons population profile representation silhouette social team team building together users"},
+        {"name": "diversity_2", "tags": "avatars collaboration committee community diverse diversity equal equality faces family figures friends group groups heads heart human humans inclusion interconnected multicultural multiracial network outlines people persons population profiles relationships representation shapes social team together users variety"},
+        {"name": "diversity_3", "tags": "committee community community icon crowd culture different different people diverse diversity diversity icon ethnicity family friends group group icon groups humans inclusion mixed network people people icon persons profile social team team members user group users users icon varied"},
+        {"name": "domain", "tags": "address apartment architecture building business circle communication concept connection domain estate global globe home icon internet link navigation network online place real representation residence residential round shelter sphere symbol technology ui url web web address website world www"},
+        {"name": "domain_add", "tags": "+ add add domain add site add website apartment append architecture building business circle connection connectivity create domain estate expand globe home host hosting include internet ip address join link network new place plus real register residence residential server shelter signup sphere symbol url web website world www"},
+        {"name": "downhill_skiing", "tags": "abstract activity athlete athletic body downhill entertainment exercise figure graphic hobby human icon line mountain outdoor outline people person recreation shape silhouette ski social skier skiing slope snow sport sports symbol travel vacation winter"},
+        {"name": "edit_notifications", "tags": "active adjust alarm alert bell bell with pencil change chime communication compose configure create customize draft drawing edit edit alert editing geometry input line message modify modify notification new notification notification settings notifications notify options pen pencil preferences reminder ring settings shape sound sounds write writing"},
+        {"name": "elderly", "tags": "account account icon account representation age avatar body cane community demographic elderly figure head and shoulders human identity individual member old old person older people person portrait profile profile icon profile picture profile representation profile view representation senior silhouette user user icon user representation"},
+        {"name": "elderly_woman", "tags": "aged avatar body cane circle elderly female figure filled gender girl head human icon lady old outline people person portrait profile round senior shape shoulders silhouette social solid symbol user woman women"},
+        {"name": "emoji_emotions", "tags": "+ add character chat cheerful circle communication emoji emoticon emotion emotions expression expressions face feeling feelings glad grin happiness happy icon icons insert joy like message mood new outline person pleased plus reaction round select smile smiley smiling social survey symbol tag text"},
+        {"name": "emoji_events", "tags": "accomplishment achievement achievement award award award icon celebration chalice challenge champion championship championship trophy competition contest cup event excellence first first place gold cup honor prize recognition reward sport sports sports award success tournament trophy victory victory icon win winner winner's cup"},
+        {"name": "emoji_food_beverage", "tags": "beverage break cafe caffeine ceramic coffee cup curve dining drink emoji food handle hot drink kitchen liquid morning mug plate refreshments relax restaurant saucer set steam steam lines tea"},
+        {"name": "emoji_nature", "tags": "animal bee botany branch bug daisy earth ecology ecosystem emoji environment environmental flora floral flower foliage forestry garden gardening green growth insect ladybug leaf leaf symbol leaves natural nature nature conservation organic outdoor park petals plant spring sprout stem summer twig"},
+        {"name": "emoji_objects", "tags": "avatar bulb cartoon character chat cheerful circle communication creative emoji emoticon expression face feeling happy idea joy light message objects positive reaction round smile smiley solution thinking"},
+        {"name": "emoji_people", "tags": "accounts arm assembly audience avatars body community contacts crowd directory emoji employees figures friends gathering greeting group human individuals members membership multitude network outlines people person profile profiles representation roster silhouettes social staff team users waving"},
+        {"name": "emoji_symbols", "tags": "add emoji ampersand character chat communication emoji emoji picker emoticon emotions expression face feeling fun happy hieroglyph icon set keyboard messaging music note percent pick emoji reaction select emoji sentiment sign smile smiley face social media sticker symbols text"},
+        {"name": "emoji_transportation", "tags": "architecture arrow automobile building car carriage cars commute direction emoji engine estate forward journey locomotive maps passengers place public public transport public transport icon rail railway railway icon railway symbol real residence residential shelter train train icon train symbol transport icon transport symbol transportation travel travel icon travel symbol vehicle wagon"},
+        {"name": "engineering", "tags": "adjustment automation body building cog cogs cogwheel configuration construction control customize development engineering fix fixing function gear gears hat helmet human industrial industry machinery maintenance management mechanics operation options people person process repair setting settings setup system technical technology tools worker"},
+        {"name": "face_2", "tags": "account amiable avatar character cheerful contentment delightful emoji emoticon emotion expression eyes face feeling grin happy human identity joy lock log login logout mood people person pleasant pleased positivity profile recognition satisfaction security smiling social thumbnail unlock user"},
+        {"name": "face_3", "tags": "account avatar avatar 3 avatar icon emoji eyes face features figure head human lock log login logout male man mouth nose people person person 3 person icon portrait profile profile 3 profile icon recognition security social thumbnail unlock user user 3 user icon young"},
+        {"name": "face_4", "tags": "account avatar bland character circle emoji emotion expression eyes face features generic head human identity lock log login logout mouth neutral nose outline people person plain portrait profile recognition rounded security simple smiley social thumbnail unlock user"},
+        {"name": "face_5", "tags": "account avatar avatar icon character communication emoji emotion expression eyes face feelings happy happy face head human identity individual joy lock log login logout people person person icon portrait profile profile picture recognition security smile icon smiley smiling social thumbnail unlock user user icon"},
+        {"name": "face_6", "tags": "account avatar cheerful contented delighted emoji emotion expression eyes face grin happy head human joy lock log login logout mouth people person pleased profile recognition satisfied security smiling social thumbnail unlock user"},
+        {"name": "female", "tags": "account addition avatar basic biological biological sex character circle cross female figure gender generic girl health human identity individual lady medical medicine outline person plus profile representation silhouette simple social symbol user woman women"},
+        {"name": "fireplace", "tags": "barbecue burning camping chimney comfort cooking cozy ember energy fire fireplace flame fuel glow grill hearth heat heating home house ignition indoor living living room logs nature outdoor pit place room spark survival warm warmth winter"},
+        {"name": "fitbit_raquetball", "tags": "abstract activity app application athlete athletic brand brand identity company corporate device digital exercise fitbit fitness glyph health heart hobby logo logotype modern monitoring pulse smart device sport symbol technology tracking trademark wearable"},
+        {"name": "flood", "tags": "abstract waves alert climate climate change crisis danger deluge disaster drowning emergency environmental extreme weather flood flooding flowing water hazard heavy rain high water inundation liquid natural natural disaster rain rising water storm warning water wave waves wavy lines weather"},
+        {"name": "follow_the_signs", "tags": "arrow body crossroads destination direction directional follow forward guidance guide highway human indication junction left line location navigate next path people person point pointer right road road sign route signal signpost signs social street street sign the travel turn turn indicator up"},
+        {"name": "front_hand", "tags": "accessibility alert anatomy body part communication control cursor fingers five front gesture greeting hand hello high five human interaction limb open hand outstretched hand palm point pointer recognition selection stop symbol touch warning wave"},
+        {"name": "girl", "tags": "account avatar body character female feminine figure gender girl graphic head human icon identity individual lady member outline people person portrait profile shoulders silhouette social symbol user woman women young"},
+        {"name": "group", "tags": "accounts administration audience basic committee community contacts crowd directory employees face family figures friends group heads humans list management members network outline people persons profile profiles roster shape silhouettes simple social staff team users"},
+        {"name": "group_add", "tags": "accounts add add friend add member add user avatar circle collaborate collective committee contact face family friend friends group human humans inclusion increase invite join member membership more network new people person persons plus profile profiles roster silhouette social team user profile users"},
+        {"name": "group_off", "tags": "association off body cancel group club cluster off collaboration collection off community off connection off crew off crowd delete group disabled disband gathering gathering off group group disabled group off human meeting members off network off off people people disabled people off person remove group separate social society off split squad off team disabled team off teams ungroup unit off users disabled users off"},
+        {"name": "group_remove", "tags": "account remove accounts action application button collaboration committee community control delete member delete person delete user face family friends group group remove humans membership menu minus negative network people people icon person icon persons profile remove profiles remove remove member remove person remove user silhouette social subtract team ungroup ungrouping user profile users"},
+        {"name": "groups", "tags": "audience avatars body club collaboration collective community connected crowd figures gathering graphic groups human icon joined many meeting members multiple network outline participants people person profiles shape silhouettes social solid symbol team teams together ui users"},
+        {"name": "groups_2", "tags": "assembly avatars body circle club collaboration community community icon connection crowd crowd icon demographic figures gathering group icon groups hair human interaction meeting members members icon membership network network icon people people icon person profiles profiles icon silhouettes social social icon team team icon teams user icon users"},
+        {"name": "groups_3", "tags": "abstract account assembly audience avatars body circle club collaboration collective community crowd figures gathering group groups head human individuals many people meeting members multiple people network people person profile profiles shoulders silhouettes social team teams three people three users user users"},
+        {"name": "handshake", "tags": "accord agreement alliance business collaboration connection contract cooperation deal glyph greeting hand hands handshake joining hands line icon meeting negotiation outline partnership pictogram relationship shake solidarity support trust two hands unity welcome"},
+        {"name": "health_and_safety", "tags": "+ add aid and care certified cross cross symbol defense guard health health shield health symbol healthcare home immune medical medical shield medical symbol medicare nest plus preventative privacy private protect protected protection reliable safe safeguard safety safety shield safety symbol secure security shield shield symbol symbol trust verified wellness"},
+        {"name": "heart_broken", "tags": "bad review break broken broken heart core crush delete dislike emotion favorite favourite health heart like love not liked not loved nucleus outline rejected relationship remove romance sadness shape split symbol unfavorite unfavorite button unfavourite unlike unlike button unloved valentine"},
+        {"name": "hiking", "tags": "activity adventure backpacking bag climbing duffle exercise exploration hiking human journey leisure man mountain mountain range mountains nature outdoors path person recreation silhouette social sport sports stick trail travel trek walking wanderlust"},
+        {"name": "history_edu", "tags": "academic archive book clock college degree diploma document edu education exam feather future graduation history hour knowledge learning lesson letters memory minute paper past pen present quill reading school second story student study teaching test time timeline tools university write writing"},
+        {"name": "hive", "tags": "abstract apiary bee beehive cluster collection colony community connection data database geometric group hexagon hexagonal hive honey honeycomb insect nature network organization pattern shape storage structure system"},
+        {"name": "ice_skating", "tags": "activity athlete athletic blade boot cold entertainment equipment exercise figure skating footwear hobby hockey skate ice ice skate leisure olympics recreation sharp shoe skate skates skating social speed skating sport sports travel winter winter sport"},
+        {"name": "interests", "tags": "best bookmark chosen circle collection distinction favorite featured glyph good heart highlighted icon important interests liked marked prefered premium quality rated rating saved selection shape shapes sign social special square star symbol top triangle valuable wishlist"},
+        {"name": "ios_share", "tags": "activity apple arrow box communication connect content device distribution export forward information ios link mobile network outgoing publish send share sharing smartphone social social media spreading square transfer up upload"},
+        {"name": "kayaking", "tags": "activity adventure athlete athletic boat body canoe entertainment excursion exercise fitness hobby human kayak kayaking lake leisure line icon outdoor outline icon paddle paddling people person rafting recreation river row social sport sports summer tour transportation travel vacation vehicle water"},
+        {"name": "king_bed", "tags": "accommodation apartment bed bedroom building comfort domestic double double bed furniture home horizontal hotel house housing interior king king bed king size large bed lodging master bedroom night pillows property queen real estate rectangle relax rest room sleep"},
+        {"name": "kitesurfing", "tags": "action activity adventure athlete athletic beach board body dynamic entertainment exercise extreme sport figure hobby human kite kiteboarding kitesurfing leisure ocean outdoor people person recreation sea silhouette social sport sports surf surfing travel vacation water water sport waves wind"},
+        {"name": "landslide", "tags": "accident alert caution collapse crisis danger disaster earth earth movement emergency falling rocks geological geology ground hazard landslide mountain natural natural disaster nature notification outdoor rain risk road rockfall sign slope storm symbol terrain travel unstable warning weather"},
+        {"name": "location_city", "tags": "apartments architecture area building buildings business city community construction destination district downtown estate geography home landmark landscape location map marker metropolis neighborhood place point of interest real real estate rectangle region residence residential shelter skyline square structure town travel urban"},
+        {"name": "luggage", "tags": "airport bag baggage belongings box carry carry-on essentials expedition flight getaway handle holiday hotel journey luggage movement on packing personal items rectangle square suitcase tourism transport travel travel bag travel essentials travel gear trip trunk vacation vacation items"},
+        {"name": "male", "tags": "account avatar avatar icon body body icon boy circle figure figure icon gender gender icon head head icon human human icon identity male man man icon person person icon profile profile icon shoulders shoulders icon silhouette silhouette icon social symbol user user icon"},
+        {"name": "man", "tags": "account avatar body boy character figure gender graphic head human icon identity individual login male man member member profile outline people person profile profile picture representation shoulders silhouette social symbol user user account user profile"},
+        {"name": "man_2", "tags": "account avatar biography boy bust contact contact information gender head human individual login male man my account people person person icon personal details profile profile page settings shoulders single user social symbol user user account user data user management user profile user settings"},
+        {"name": "man_3", "tags": "abstract account avatar boy circle contact figure gender glyph head human icon identity individual login male man member outline person profile shape shoulders signup silhouette social symbol user"},
+        {"name": "man_4", "tags": "abstract account account icon account management avatar boy community contact figure gender head human identity individual login male man member people person person icon profile profile icon shoulders silhouette social symbol user user icon user profile"},
+        {"name": "masks", "tags": "air breath contagion cover covid disease face face covering health health and safety healthcare hospital hygiene illness layered mask masks medical medical mask mouth covering nose covering pandemic pollution prevention protection public health respirator respiratory safety sick sickness social spread surgical mask two masks virus"},
+        {"name": "military_tech", "tags": "accomplishment achievement air force army award badge decoration defense excellence guarantee high quality honor insignia marines medal merit military navy order premium privilege prize quality rank ranking reward ribbon soldier star status success symbol tech technology trophy verified veteran warfare win winner"},
+        {"name": "mood", "tags": "add character chat cheerful circle communication emoji emoticon emotion emotions expression expressions face feeling feelings glad grin happiness happy insert joy like message mood outline person pleased reaction round select smile smiley smiling social survey symbol tag text"},
+        {"name": "mood_bad", "tags": "avatar bad circle circular disappointment dislike distress emoji emotion emotions expression expressions face feeling feelings frown frowny face glyph icon illustration mood negative person rating sad sad face social solid sorrow survey symbol unhappiness unhappy unhappy face unpleased unsmile unsmiling upset"},
+        {"name": "nights_stay", "tags": "astronomy atmosphere bedroom climate cloud cloudy crescent dark dreams evening forecast hotel lodging lunar meteorology mode moon nature night nights nighttime outdoors partly phases rest silence silent sky sleep stay time travel trip vacation weather"},
+        {"name": "no_adult_content", "tags": "access control age rating age restriction block censored content restriction disallowed explicit content filter forbidden inappropriate content limit mature mature content no entry not suitable for minors parental advisory parental control privacy private protection rating restricted safety secure sensitive content warning"},
+        {"name": "no_luggage", "tags": "access denied airport alert bag baggage baggage check ban box carry cart caution circle diagonal line disabled enabled exclusion forbidden handle luggage no no luggage not allowed off on packing prohibited restricted restriction sign slash suitcase symbol travel travel restriction warning wheels"},
+        {"name": "nordic_walking", "tags": "active activity athlete athletic body entertainment equipment exercise figure fitness health hike hiking hobby human movement nature nordic nordic walking outdoor pedestrian people person poles recreation silhouette social sports sticks trail travel trek two poles walker walking walking stick wellness workout"},
+        {"name": "notification_add", "tags": "+ active add addition alarm alert bell button calendar chat chime control create email event follow future icon message new notification notifications notify plus reminder ring schedule shape social media sound subscribe subscription symbol ui upcoming update"},
+        {"name": "notifications", "tags": "active alarm alert announcement app bell chime communication control ding follow hear icon inbox listen mail message none notification notifications notify outline preferences reminder ring setting shape sound subscribe symbol system toggle unread update"},
+        {"name": "notifications_active", "tags": "active alarm alert attention bell broadcast chime communication current enabled engaged incoming indicator live message new notification notifications notify priority reminder ring ringing ringing bell signal sound status symbol ui element update urgent"},
+        {"name": "notifications_none", "tags": "alarm alert announcement app bell communication control ding follow hear icon inbox listen mail message none notification notifications notify outline preferences reminder ring setting shape sound subscribe symbol system toggle unread update"},
+        {"name": "notifications_off", "tags": "active alarm alarm off alert alert off bell bell off blocked cease chime chime off deactivate disabled disarm enabled halt mute no alerts no notifications no sound none notifications notifications off notify off offline on pause quiet reminder ring silence silent slash sound sound off still stop suspend turned off"},
+        {"name": "notifications_paused", "tags": "active alarm alert attention bell caution chime cross diagonal disable disabled do not disturb ignore line mute muted notification notifications notify off pause paused quiet remind later reminder ring --- pause silence slash sleep snooze sound stop suspend suspended triangle warning z zzz"},
+        {"name": "outdoor_grill", "tags": "appliance backyard barbecue barbeque bbq charcoal chimney cook cooking cookout dining eating entertainment equipment fire food grill heat home house kitchenware legs leisure lid meat outdoor outdoor grill outdoor kitchen outside party patio picnic rectangular smoke summer"},
+        {"name": "pages", "tags": "archive article bundle collection content copy data documents duplicate file manager files forms gplus group information layered layering library list multiple new document organization pages paper parallel post records rectangle reports sheets squared stacked stacking star"},
+        {"name": "paragliding", "tags": "activity adventure aerial air altitude athlete athletic body entertainment exercise exploration extreme flight fly flying freedom fun gliding hobby human journey landscape leisure nature outdoor parachute paragliding people person recreation sail sky skydiving social sport sports thrilling tourism travel vacation wind wing"},
+        {"name": "party_mode", "tags": "bright camera camera mode celebration celebration mode cheerful energetic enjoy event festive festive mode fun fun picture group happy joy lens mode night nightlife party party night party picture party setting photo photography picture social social event special special event vibrant"},
+        {"name": "people", "tags": "accounts administration audience basic committee community contacts crowd directory employees face family figures friends group heads humans list management members network outline people persons profile profiles roster shape silhouettes simple social staff team users"},
+        {"name": "people_alt", "tags": "accounts administration audience basic committee community contacts crowd directory employees face family figures friends group heads humans list management members network outline people persons profile profiles roster shape silhouettes simple social staff team users"},
+        {"name": "people_outline", "tags": "accounts administration audience basic committee community contacts crowd directory employees face family figures friends group heads humans list management members network outline people persons profile profiles roster shape silhouettes simple social staff team users"},
+        {"name": "person", "tags": "account avatar avatar filled avatar outline body circle contact face figure filled head human identity individual login member my account my profile outline people perm identity person profile register shoulders silhouette user user account user identity user profile"},
+        {"name": "person_2", "tags": "abstract account avatar basic body circle default face figure generic head human identification individual login member minimal one outline people person profile shape shoulders silhouette simple single social user"},
+        {"name": "person_3", "tags": "account association audience avatar collaboration collective community company crowd face figures group group chat human identity individuals members multiple network organization people person profile silhouette social staff team team building team members three user user accounts users"},
+        {"name": "person_4", "tags": "account account settings anonymous avatar contact default face figure generic geometric human identity image individual login member outline people person persona personal placeholder private profile shape silhouette simple single user user user profile"},
+        {"name": "person_add", "tags": "+ account account outline add add contact add friend add person add user avatar contact contact outline create face friend friend request head and shoulders human invite invite friend invite user man new new person new user people person person outline plus plus sign profile profile outline symbol user user outline"},
+        {"name": "person_add_alt", "tags": "+ account account outline add add contact add friend add person add user contact contact outline create face friend friend request head and shoulders human invite invite friend invite user man new person new user people person person outline plus plus sign profile profile outline user user outline"},
+        {"name": "person_off", "tags": "access denied account avatar block circle deactivate disable disabled enabled exclude face figure forbidden human line log out no entry not allowed off offline on people person pictogram private profile removed restricted shape sign out silhouette slash symbol unavailable user"},
+        {"name": "person_outline", "tags": "account avatar avatar filled avatar outline body circle contact face figure filled head human identity individual login member my account my profile outline people perm identity person profile register shoulders silhouette user user account user identity user profile"},
+        {"name": "person_remove", "tags": "account avatar ban blacklist block cancellation circle contact delete depart diagonal line exclude exit face friend human line minus negative people person profile prohibition refusal rejection remove slash unfollow unfriend unsubscribe user withdrawal"},
+        {"name": "personal_injury", "tags": "accident accident claim aid anatomy arm bandage body bone broke broken bone broken leg cast crutches disability emergency foot fracture fractured leg health healthcare human injury insurance leg legal lower limb medical orthopedics pain patient people person personal personal injury shin skeletal sling social support trauma walking aid"},
+        {"name": "piano", "tags": "art audio band black keys classical music concert entertainment harmony instrument keyboard keys learn leisure media melody music musical performance piano play practice recording rhythm social song sound studio white keys"},
+        {"name": "piano_off", "tags": "audio audio settings control crossed out deactivated diagonal line disabled enabled instrument keyboard keys lines music music app musical musical instrument mute no sound not playing notes off on piano rectangle silent slash social sound stop strike through toggle turn off"},
+        {"name": "plus_one", "tags": "1 add adjustment arithmetic button camera setting count counter digit exposure exposure plus one increase increment increment value math number numbers numerical numerical increment numerical value one plus plus one plus sign setting sign symbol ui control value"},
+        {"name": "poll", "tags": "add analysis analytics assessment bar bar chart bars business chart columns create data diagram finance graph growth infographic insert manage measure metrics options performance poll progress report representation results statistics survey tracking visualize vote"},
+        {"name": "precision_manufacturing", "tags": "accurate advanced arm assembly assembly line automated automatic automation automation arm chain conveyor crane create engineering fabrication factory industrial industrial automation industrial machinery industrial robot industry machine machinery manufacturing manufacturing process mechanic mechanical precise precision precision manufacturing produce production repairing robot robotic arm robotics supply technology warehouse"},
+        {"name": "psychology", "tags": "awareness behavior body brain brainstorm clever cognitive concept education function gear head health human idea insight intellectual intelligence knowledge learning memory mental mind neurological people person preferences psychiatric psychiatrist psychoanalysis psychology research science settings smart social therapy thinking thought thoughts understanding wise"},
+        {"name": "psychology_alt", "tags": "? abstract alternate analysis assistance awareness behavior body brain cognitive concept consciousness expertise function gear head health healthcare help human human body idea info information intellectual intelligence knowledge learning medical mental mental health mind people person preferences profile psychiatric psychiatry psychology punctuation question mark science settings skill social solution study support symbol therapy thinking thought thoughts understanding"},
+        {"name": "public", "tags": "access accessibility circle community connection country earth everybody geography global globe international internet location map network open planet public round share social space sphere unlocked visible web world worldwide"},
+        {"name": "public_off", "tags": "access circle connection continents disabled earth enabled geography global globe international limited location map mapping network off on planet privacy private public restricted security slash social space sphere unavailable web world"},
+        {"name": "real_estate_agent", "tags": "advice agent agreement architecture associate broker building business buy commercial contract counsel deal estate for sale hand handshake home house investment key loan mortgage partnership professional property real real estate realtor representation residence residential sales sell service social"},
+        {"name": "recommend", "tags": "affirm agree agreement approval approved assess choice circle confirm endorse evaluate favorite feedback gesture good hand like opinion positive preference rating reaction recommend selection social social media support thumbs thumbs up up upvote validation vote well"},
+        {"name": "recycling", "tags": "arrows arrows in a loop bio circle conservation cycle eco ecological ecology emblem environment environmental garbage green loop material materials process recyclable recycle recycling reduce remake remanufacture renewable renewal reuse rotate sustainability sustainable symbol three arrows transform trash waste"},
+        {"name": "reduce_capacity", "tags": "arrow body capacity capacity reduction compact compress constrain contract covid de-emphasize decrease decrease capacity down fewer items human less space lessen lessen amount lessen quantity limit lower minimize narrow optimize people person reduce reduce count reduce load reduce quantity reduce size reduce volume restrict save space scale back scale down shrink social"},
+        {"name": "remove_moderator", "tags": "access account admin administrator ban block cancel certified close community cross delete demote disabled enabled exit group human minus moderation moderator off on permissions person privacy private priviledge profile profile management protect protection remove revoke security shield silhouette slash social subtract user verified x"},
+        {"name": "roller_skating", "tags": "active activity athlete athletic blade boot entertainment exercise figure fitness footwear fun hobby human indoor inline skating leisure movement outdoor person recreation roller roller skating rollerblading shoe silhouette skate skates skating social speed sport sports transportation travel wheels"},
+        {"name": "safety_divider", "tags": "apart barrier border boundary delineate demarcation distance divide divider enclosed fenced guarded horizontal line horizontal rule isolate limit line line break line segment protect rule rule off safety section secure security segment separate separation social space"},
+        {"name": "sanitizer", "tags": "anti-bacterial bacteria bathroom bottle clean clean hands cleaning covid covid-19 disinfect disinfectant dispense epidemic gel germ germs handwash health healthcare hospital hygiene kill liquid lotion medical pandemic personal care protect public health pump pump bottle sanitizer soap virus"},
+        {"name": "scale", "tags": "balance balance scale compare compare measure compare weight comparing comparison courtroom equilibrium equity judgment justice law legal legal system measure measurement monitor scale scales of justice weighing weighing instrument weight weight measurement \u2696\ufe0f \u2696\ufe0f icon \u2696\ufe0f symbol"},
+        {"name": "school", "tags": "academic academics academy achievement architecture building building facade campus cap class college college building columns doorway education educational institution entrance entrance way gateway graduation hat institution knowledge learning learning institution pillars portal public building school steps structure student studying teaching university university building"},
+        {"name": "science", "tags": "analysis beaker beaker icon chemical chemistry chemistry icon container discovery education experiment experiment icon flask fluid glass glassware innovation knowledge lab lab icon laboratory learning liquid reaction research research icon science scientific solution study test tube tube"},
+        {"name": "scoreboard", "tags": "board competition data display game information leader lines losing match monitor numbers performance points presentation ranking record rectangular report results score scoreboard screen sport sports statistics stats tally tracking winners"},
+        {"name": "scuba_diving", "tags": "activity adventure aquatic deep sea discovery diver diving entertainment equipment exercise expedition explore fins flippers gear hobby holiday journey leisure marine mask ocean recreation scuba scuba diving sea snorkel social sport swim swimming tank travel underwater vacation water sport"},
+        {"name": "self_improvement", "tags": "balance body brain calm care chi coaching counseling development emotional growth healing health help human improvement life meditate meditation mental mind mindfullness peace people person personal progress relax self self-care sitting spiritual support therapy well-being wellbeing wellness yoga zen"},
+        {"name": "sentiment_dissatisfied", "tags": "angry avatar bad circle disappointed dislike dissatisfied emoticon emotion emotions expression expressions face feedback feeling feelings frown head human mood negative person poor profile rating review sad sentiment survey unhappy unsatisfied upset user"},
+        {"name": "sentiment_neutral", "tags": "attitude avatar average emoji emotion emotionless emotions expression expressions face feedback feeling feelings fine horizontal line indifference indifferent mood mouth neutral ok okay people person profile rating regular sentiment status straight face survey user"},
+        {"name": "sentiment_satisfied", "tags": "cheerful circle emoji emoticon emotion emotions expression expressions eyes face feeling feelings glad happiness happy happy face joy like mood mouth person pleased positive satisfaction satisfied sentiment smile smiley smiley face smiling survey"},
+        {"name": "sentiment_very_dissatisfied", "tags": "angry avatar character circle disappointed disapproval dislike dissatisfied dissatisfied face emoji emoticon emotion emotions expressions face facial expression feedback feeling feelings frowning human indicator low rating mood negative outline person reaction review sad sentiment sorrow status survey unhappy unsatisfied upset very"},
+        {"name": "sentiment_very_satisfied", "tags": "approval avatar character cheerful circle delight emoticon emotion emotions excellent expression expressions face feedback feeling feelings glad happiness happy human joyful like mood people person pleased positive profile rating satisfied sentiment simple smile smiley face smiling survey user very very happy"},
+        {"name": "severe_cold", "tags": "! alert atmosphere attention blizzard caution chill climate cold condition crisis danger disaster error exclamation extreme forecast freeze freezing frost frozen hazard ice icicle important notification season severe snow snowflake temperature warning weather winter"},
+        {"name": "share", "tags": "DISABLE_IOS activity andriod share android arrow communication communication icon connect connection contect data disable_ios distribute export forward geometric line lines link media multimedia multiple network options outreach point pointing send send to send to friends send to others send to social share shared sharing social three dots up arrow"},
+        {"name": "sick", "tags": "ailment covid discomfort emoji emoticon emotion emotions expression expressions face feeling feeling ill feeling sick feeling unwell feelings fever flu health health problem ill illness infection medical medical condition mood nauseous negative emotion pain person sad sad face sick sickness survey symptom unhappy unhappy face unwell unwellness upset virus"},
+        {"name": "sign_language", "tags": "accessibility audio caption communication deaf disability figure fingers gesture hand human inclusive interpretation language linguistics mute people person sign sign language sound speaking speech subtitle symbol talking translate video voice"},
+        {"name": "single_bed", "tags": "accommodations apartment bed bed silhouette bedroom bedtime comfort double furniture furniture outline guest room home hostel hotel hotel icon house king lodging motel nap night pillows queen relax relaxation rest room room icon single single bed sleep sleeping tourism travel twin"},
+        {"name": "skateboarding", "tags": "action active activity athlete athletic board body entertainment exercise extreme sport extreme sports fun hobby human jump leisure lifestyle motion movement ollie outdoor park people person recreation recreational riding skate skateboard skateboarder skateboarding skatepark social sport sports street trick urban wheels youth youthful"},
+        {"name": "sledding", "tags": "activity athlete athletic body child christmas cold downhill entertainment exercise festive fun hill hobby holiday human leisure mountain outdoor people person play recreation ride season sled sledding sledge sliding slope snow snow day snowy hill snowy slope social sport sports travel winter winter activity winter sport"},
+        {"name": "snowboarding", "tags": "action activity athlete athletic board body carve cold downhill entertainment exercise extreme sport figure freestyle hobby human jump maneuver mountains outdoor people person pictogram recreation rider silhouette slide slope snow snowboarder snowboarding social sport sports travel trick winter winter sport"},
+        {"name": "snowshoeing", "tags": "activity adventure body boots cold equipment explore footwear gear graphic hiking human icon illustration journey outdoor outline people person recreation shape silhouette snow snowshoe snowshoeing snowshoes sport sports symbol trail travel trek walking winter"},
+        {"name": "social_distance", "tags": "6 alert apart body caution concept covid-19 distance distance between people distancing figures ft health healthcare human hygiene icon infection medical pandemic people person prevention public health safety social social distance space spread standing symbol two people virus warning"},
+        {"name": "south_america", "tags": "area boundary cartography continent continent map continent outline country domain earth geographical geography global globe international international travel landform landmass landscape location map national outline place region shape south america south american map territory travel world zone"},
+        {"name": "sports", "tags": "action activity athlete athletic blowing coach competition dynamic entertainment exercise fast figure fitness game healthy hobby instrument jog lifestyle motion movement performance person race referee runner running silhouette social sound speed sports sprint swift track and field training warning whistle"},
+        {"name": "sports_baseball", "tags": "activity american sport athlete athletic ball baseball catch circle curved lines entertainment equipment exercise field game gear hit hobby league leisure mlb pitch play player recreation round seams social softball sport sports stadium stitches team throw usa sport"},
+        {"name": "sports_basketball", "tags": "activity arena athlete athletic ball basketball circle competition court curves dribble entertainment exercise fitness game hobby hoop league lines match net orange ball play points recreation round score seams shoot social sports team workout"},
+        {"name": "sports_cricket", "tags": "activity athlete athletic athletics ball bat circle competition cricket entertainment equipment event exercise game hobby leisure line match outdoor play recreation social sphere sport sports stick stump team tournament wicket"},
+        {"name": "sports_esports", "tags": "asset competitive gaming computer games console console controller console games control controller device digital digital entertainment entertainment esports game game console game controller game input gamepad gaming gaming controller google handheld hardware hobby joystick leisure online online gaming play play games playstation remote social sports stadia technology tournament video video game video game controller video games videogame xbox"},
+        {"name": "sports_football", "tags": "activity athlete athletic ball championship competition entertainment equipment event exercise field football fun game gear hobby league leisure lines match outdoor park pastime pattern play recreation round soccer social sphere sports stitching team tournament"},
+        {"name": "sports_golf", "tags": "activity athlete athletic ball club course driver entertainment exercise game golf golfer golfing hobby hole iron leisure outdoors play putt recreation social sport sports stroke swing tee wedge"},
+        {"name": "sports_gymnastics", "tags": "active activity agility athlete athletic balance body competition entertainment exercise figure fitness flexibility gymnastics healthy hobby human leisure movement performance person pose recreation silhouette social sport sports training workout"},
+        {"name": "sports_handball", "tags": "activity athlete athletic athletic event athletics ball body circle competition court curved lines entertainment equipment exercise field game gear gym handball hobby human indoor sport leisure lines match people person play player recreation rounded seam social sport sports sports and recreation sports equipment team sport"},
+        {"name": "sports_hockey", "tags": "activity athlete athletic athletic activity athletic game athletic sports championship club competition entertainment exercise field game goal hobby hockey ice league leisure net puck recreation rink scoreboard scoreboard icon social sport sports stats stats icon stick sticks team tournament winter sports"},
+        {"name": "sports_kabaddi", "tags": "action active agility asian athlete athletic athletics body combat competition court defense dynamic entertainment exercise fighting figure fitness game hobby human india kabaddi mat movement people person physical player power raid recreational silhouette social sports sportsperson struggle team traditional wrestle wrestling"},
+        {"name": "sports_martial_arts", "tags": "action activity agility arts athlete athletic combat competition discipline dojo entertainment event exercise fighting fitness flexibility game gym hobby human karate kick martial martial arts movement people person physical power punch self-defense social sports stance strength strike studio technique training"},
+        {"name": "sports_mma", "tags": "action activity aggression arena arts athlete athletic boxing combat competition contest dynamic entertainment event exercise fighting fitness game glove gym health hobby martial martial arts match mixed mma power punch ring social speed sports strength strike training workout"},
+        {"name": "sports_motorsports", "tags": "activity athlete athletic automobile automotive automotive industry bike car championship competition drive driving entertainment event fast go-kart helmet hobby kart leisure motor vehicle motorcycle motorsport motorsport event motorsports protect race race car racing recreation social speed sports sports car track transport transportation vehicle"},
+        {"name": "sports_rugby", "tags": "activity athlete athletic athletic gear ball competition entertainment equipment exercise field fitness game game object game piece gear hobby laces leather movement oval oval object play recreation recreational activity rugby social sport sports sports equipment sports gear stitched team team sport"},
+        {"name": "sports_soccer", "tags": "activity athlete athletic ball championship circle competition dribble entertainment exercise field fitness football game goal hexagon hobby kick league leisure match pentagon play recreation soccer social sport sports stadium team training workout"},
+        {"name": "sports_tennis", "tags": "active activity athlete athletic ball bat competition court entertainment equipment exercise fitness fun game gear health hobby indoor leisure match outdoors play player racket racquet recreation social sport sports tennis wellness"},
+        {"name": "sports_volleyball", "tags": "activity athlete athletic ball block competition court dig entertainment exercise fitness fun game hobby indoor leisure lines net outdoor physical play recreation round serve set social sphere spike sport sports stitch striped team volleyball"},
+        {"name": "surfing", "tags": "action activity athlete athletic beach board body entertainment exercise extreme sport figure graphic hobby human icon illustration individual leisure movement ocean outdoor outline people person recreation sea silhouette social sports sport sports stylized summer surfer surfing symbol vacation water wave"},
+        {"name": "switch_account", "tags": "access access control account account management accounts arrows bidirectional change profile change user choices circle exchange face head human identity login logout manage profiles move multiple multiple accounts options people person personalize profile select account shift shoulders silhouette social stack switch switch account transfer two arrows user user profile user switching users"},
+        {"name": "thumb_down_alt", "tags": "bad cancel decline disagree disapproval disapprove dislike down feedback gesture hand hand gesture hate negative negative feedback no opposite rating refusal reject rejection social thumb thumbs down unlike unlike button veto vote vote down"},
+        {"name": "thumb_up_alt", "tags": "acknowledgement agree agreed approve approved button choice confirm confirmation content interaction control correct endorsement excellent favorite feedback good hand gesture hand sign happy indicator like okay option positive preference rating reaction recommend satisfaction selection share social social media thumb thumbs up up vote yes"},
+        {"name": "thunderstorm", "tags": "alert atmosphere bad weather bolt climate cloud cloudy danger electricity forecast lightning lightning bolt meteorological event meteorology natural phenomenon nature precipitation rain raincloud rainfall rainstorm severe sky storm thunder thunderstorm warning weather weather condition"},
+        {"name": "tornado", "tags": "alert atmospheric climate cone crisis danger destructive disaster emergency funnel funnel cloud hazard line art meteorological natural natural disaster outline pointed rain severe weather spinning storm stroke swirling tornado twister vortex warning weather weather warning wind windstorm"},
+        {"name": "transgender", "tags": "arrow biological sex circle community cross diversity equality female gender gender diverse gender identity gender symbol human identity inclusion lgbt lgbtq+ line male neutral non-binary people person pride pronoun representation sex social symbol transgender"},
+        {"name": "travel_explore", "tags": "browser discover discovery earth explore explore world find find location geography glass global globe international international travel internet investigate locate look magnify magnifying magnifying glass map navigation network planet research search search globe see social space travel web world world travel"},
+        {"name": "tsunami", "tags": "alert breaking wave climate coastal cresting wave crisis danger disaster disaster warning emergency environment flood force of nature hazard high wave large wave marine natural disaster ocean ocean wave powerful wave rain sea storm surge swell tsunami turbulent water warning water wave weather"},
+        {"name": "vaccines", "tags": "aid care circle clinic covid cross disease doctor dose drug emergency flu shot health healthcare hospital immunity immunization injection jab line medical medication medicine needle nurse pharmacy plus prevention protection shot sick syringe therapy treatment vaccination vaccine vaccines vial virus"},
+        {"name": "volcano", "tags": "alert ash cone crisis danger disaster earth emergency environment eruption explosive fire geography geological geology hazard hot landscape lava magma mountain natural natural disaster nature outdoor peak science smoke steam volcano warning"},
+        {"name": "wallet", "tags": "account banking budget business cash commerce credit currency debit digital wallet expenses finance folded funds investment mobile wallet money online payment payment pocketbook purchasing rectangle savings spending transaction wallet wealth"},
+        {"name": "water_drop", "tags": "adjustments aqua blob concentration conservation density drink drip drop droplet eco ecology element environment filter fluid humidity hydration liquid moisture nature ocean oval point purification rain resource settings social tear teardrop water weather wet"},
+        {"name": "waving_hand", "tags": "acknowledgement activity availability avatar body part bye chat communication emoji fingers friendly gesture goodbye greeting greetings hand hello hi human icon interaction palm person presence profile social speak status symbol wave waving waving hand welcome"},
+        {"name": "whatshot", "tags": "alert alerts arrow blaze burning circle dangerous direction energy excitement fiery fire flame frames hazard heat hot ignition important inferno intense new news notification passion popular round significant spicy trending updates vital warmth warning whatshot"},
+        {"name": "woman", "tags": "account avatar character circle contact female female avatar female identity female person female profile female user feminine figure gender girl head human identity individual lady member people person portrait profile shoulders silhouette social symbol user woman woman's womanly women"},
+        {"name": "woman_2", "tags": "abstract account avatar bust female figure gender girl head human icon identity lady outline person profile representation shoulders silhouette social symbol torso user woman women"},
+        {"name": "workspace_premium", "tags": "achievement approval authentic authority award badge certification circle degree ecommerce emblem excellence geometric guarantee honor mark medal medallion official permit points premium quality recognition reward ribbon seal shape stamp star status symbol verification verified winner workspace"},
+    ],
+    "toggle": [
+        {"name": "check_box", "tags": "action agreement approved box button check check box checkbox choice complete component confirm consent control done field finished form input interaction item list mark ok option select selected selection square status task tick toggle true ui validate verified yes"},
+        {"name": "check_box_outline_blank", "tags": "blank box button check check box checkbox choice component control dash dashed data deselected element empty entry field form graphic input list mark option outline select selection square task tick to do todo toggle ui unchecked unselected visual"},
+        {"name": "indeterminate_check_box", "tags": "app application box box with line button check checkbox checkbox with line components control dash design form form control half horizontal line incomplete indeterminate indeterminate state input interface mark mixed option option box partial screen select selected selection selection box site square state tick toggle toggle box ui ui element undetermined ux web website"},
+        {"name": "radio_button_checked", "tags": "active app application bullet button checked checked circle checked state choice circle components control design dot enabled filled circle form form element input interactive interface mutually exclusive off on option picker picker control point radio radio button record round screen select selected selected state single choice site toggle ui ui control ux web website"},
+        {"name": "radio_button_unchecked", "tags": "blank radio button bullet button choice choose circle control deselect deselected empty radio button form input multiple choice off on option outlined circle point preferences radio radio button record ring select selection settings survey switch toggle ui control unchecked unselected"},
+        {"name": "star", "tags": "add to favorite best bookmark border empty empty star favorite five pointed star five points grade highlight hollow hollow star important mark news not filled outline point ranking rate rating rating symbol save shape star symbol toggle ui action ui element unselected"},
+        {"name": "star_border", "tags": "add to favorite best bookmark border empty empty star favorite five pointed star five points grade highlight hollow hollow star important mark news not filled outline point ranking rate rating rating symbol save shape star symbol toggle ui action ui element unselected"},
+        {"name": "star_border_purple500", "tags": "500 add to favorite best bookmark border empty empty star favorite five pointed star five points grade highlight hollow hollow star important mark news not filled outline point purple ranking rate rating rating symbol save shape star symbol toggle ui action ui element unselected"},
+        {"name": "star_half", "tags": "achievement assessment bookmark completion evaluation favorite favorite icon feedback half half filled star half star highlight important incomplete star mark mark icon marked partial star progress progress indicator ranking rate rating rating icon rating rank rating system review review icon reward save saved score score icon shape special star status toggle ui element user rating visual indicator"},
+        {"name": "star_outline", "tags": "add to favorite bookmark border empty empty star favorite five pointed star five points grade half highlight hollow hollow star important mark news not filled outline point ranking rate rating rating symbol save shape star symbol toggle ui action ui element unselected"},
+        {"name": "star_purple500", "tags": "500 add to favorite best bookmark border empty empty star favorite five pointed star five points grade highlight hollow hollow star important mark news not filled outline point purple ranking rate rating rating symbol save shape star symbol toggle ui action ui element unselected"},
+        {"name": "toggle_off", "tags": "action active button choice circle components configuration control device disable disabled elliptical inable inactive indicator interface interface control management off on on-off on/off option oval power preference preference control selection setting settings site slider slider switch state status switch system toggle ui ui control ux web website"},
+        {"name": "toggle_on", "tags": "activate active button circle component components configuration control control on disable element enable enabled feature function horizontal inable inactive indicator interface off on option oval power selection setting setting on settings site slider state switch switch on toggle toggle on turn on ui ui control ux web website"},
+    ],
+};
diff --git a/addons/html_editor/static/src/main/media/media_dialog/media_dialog.js b/addons/html_editor/static/src/main/media/media_dialog/media_dialog.js
index 65b90a05471fbe..21b8858e79f69f 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/media_dialog.js
+++ b/addons/html_editor/static/src/main/media/media_dialog/media_dialog.js
@@ -131,29 +131,58 @@ export class MediaDialog extends Component {
         }
         const addIcons = !this.props.visibleTabs || this.props.visibleTabs.includes(TABS.ICONS.id);
         if (addIcons) {
-            const fonts = TABS.ICONS.Component.initFonts();
+            const categories = TABS.ICONS.Component.initFonts();
             this.addTab(TABS.ICONS, {
-                fonts,
+                categories,
             });
 
             if (
                 this.props.media &&
                 TABS.ICONS.Component.tagNames.includes(this.props.media.tagName)
             ) {
+                const dataIcon = this.props.media.dataset.icon;
                 const classes = this.props.media.className.split(/\s+/);
-                const predefinedMediaFont = fonts.find((font) => classes.includes(font.base));
-                if (predefinedMediaFont) {
-                    const selectedIcon = predefinedMediaFont.icons.find((icon) =>
-                        icon.names.some((name) => classes.includes(name))
-                    );
-                    if (selectedIcon) {
-                        this.initialIconClasses.push(...selectedIcon.names);
-                        this.selectMedia(selectedIcon, TABS.ICONS.id);
+
+                if (dataIcon) {
+                    // Material Symbols or Odoo UI icon: identified by the data-icon attribute
+                    for (const category of categories) {
+                        if (category.source === "fa") {
+                            continue;
+                        }
+                        const selectedIcon = category.icons.find(
+                            (icon) => icon.dataIcon === dataIcon
+                        );
+                        if (selectedIcon) {
+                            this.selectMedia(selectedIcon, TABS.ICONS.id);
+                            break;
+                        }
                     }
+                    // No initialIconClasses needed: data-icon is overwritten by createElements,
+                    // and "oi" is the shared base class preserved across icon changes.
                 } else {
-                    const iconRegex = new RegExp(`\\b(?:${iconClasses.join("|")})(?:-\\S+)?\\b`);
-                    const fallbackIconClasses = classes.filter((cls) => iconRegex.test(cls));
-                    this.initialIconClasses.push(...fallbackIconClasses);
+                    // Legacy FontAwesome icon: identified by CSS class names
+                    let found = false;
+                    for (const category of categories) {
+                        if (category.source !== "fa" || !classes.includes(category.base)) {
+                            continue;
+                        }
+                        const selectedIcon = category.icons.find((icon) =>
+                            icon.names.some((name) => classes.includes(name))
+                        );
+                        if (selectedIcon) {
+                            this.initialIconClasses.push(...selectedIcon.names);
+                            this.selectMedia(selectedIcon, TABS.ICONS.id);
+                            found = true;
+                            break;
+                        }
+                    }
+                    if (!found) {
+                        const iconRegex = new RegExp(
+                            `\\b(?:${iconClasses.join("|")})(?:-\\S+)?\\b`
+                        );
+                        const fallbackIconClasses = classes.filter((cls) => iconRegex.test(cls));
+                        this.initialIconClasses.push(...fallbackIconClasses);
+                    }
                 }
             }
         }
diff --git a/addons/html_editor/static/src/main/media/media_dialog/media_dialog.scss b/addons/html_editor/static/src/main/media/media_dialog/media_dialog.scss
index 960977768f1964..2fe8674cd0b7aa 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/media_dialog.scss
+++ b/addons/html_editor/static/src/main/media/media_dialog/media_dialog.scss
@@ -1,10 +1,25 @@
 .modal .o_select_media_dialog {
+    --FileSelectorControlPanelIcons-height: 4rem;
+
     $min-row-height: 128;
     $scroll-button-height: 36px;
 
+    .tab-pane {
+        margin-left: var(--Notebook-margin-x);
+        margin-right: var(--Notebook-margin-x);
+    }
+
     .o_we_file_selector_control_panel {
         top: -$modal-inner-padding;
         background-color: $modal-content-bg;
+
+        &.o_we_file_selector_control_panel_icons {
+            height: var(--FileSelectorControlPanelIcons-height);
+        }
+    }
+
+    .font-icons-category-header {
+        top: CALC(var(--FileSelectorControlPanelIcons-height) + #{-$modal-inner-padding});
     }
 
     .o_we_existing_attachments {
diff --git a/addons/html_editor/static/src/main/media/media_dialog/search_media.xml b/addons/html_editor/static/src/main/media/media_dialog/search_media.xml
index 26ad64d4bdae68..34f0ecc411bbd9 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/search_media.xml
+++ b/addons/html_editor/static/src/main/media/media_dialog/search_media.xml
@@ -3,7 +3,7 @@
 <t t-name="html_editor.SearchMedia">
     <div class="position-relative mw-lg-25 flex-grow-1 me-auto">
         <input type="text" class="o_we_search o_input form-control pe-4" t-att-placeholder="this.props.searchPlaceholder.trim()" t-custom-model="this.state.input" t-custom-ref="autofocus"/>
-        <i class="oi oi-search input-group-text position-absolute end-0 top-50 me-n3 px-2 py-1 translate-middle bg-transparent border-0" title="Search" role="img" aria-label="Search"/>
+        <i class="oi input-group-text position-absolute end-0 top-50 me-n3 px-2 py-1 translate-middle bg-transparent border-0" data-icon="search" title="Search" role="img" aria-label="Search"/>
     </div>
 </t>
 </templates>
diff --git a/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.xml b/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.xml
index 6e3dd382cc336f..d717f80c992b44 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.xml
+++ b/addons/html_editor/static/src/main/media/media_dialog/upload_progress_toast/upload_progress_toast.xml
@@ -17,13 +17,13 @@
     </div>
     <div class="o_notification_indicator d-flex align-items-center justify-content-center pt-2">
         <t t-if="!this.props.hasError and !this.props.uploaded">
-            <i class="fa fa-circle-o-notch fa-spin fs-4"/>
-            <span class="fa fa-trash cursor-pointer fs-4 p-1 mx-1" t-on-click="this.props.cancelUpload" title="Cancel Upload"/>
+            <i class="oi oi-spin fs-4" data-icon="autorenew"/>
+            <span class="oi oi-filled cursor-pointer fs-4 p-1 mx-1" data-icon="delete" t-on-click="this.props.cancelUpload" title="Cancel Upload"/>
         </t>
         <span t-if="this.props.uploaded" class="o_notification_indicator_success d-flex align-items-center justify-content-center p-1 rounded-5 text-bg-success smaller">
-            <i class="fa fa-check"/>
+            <i class="oi" data-icon="check"/>
         </span>
-        <i t-if="this.props.hasError" class="fa fa-exclamation-triangle fs-4 text-danger"/>
+        <i t-if="this.props.hasError" class="oi fs-4 text-danger" data-icon="warning"/>
     </div>
 </t>
 
diff --git a/addons/html_editor/static/src/main/media/media_dialog/video_selector.xml b/addons/html_editor/static/src/main/media/media_dialog/video_selector.xml
index 5174e05df37eee..bc53e0797d74bd 100644
--- a/addons/html_editor/static/src/main/media/media_dialog/video_selector.xml
+++ b/addons/html_editor/static/src/main/media/media_dialog/video_selector.xml
@@ -20,7 +20,7 @@
 </t>
 
 <t t-name="html_editor.VideoSelector">
-    <div class="row">
+    <div class="row mx-0">
         <div class="col mt-4 o_video_dialog_form">
             <div class="mb-2">
                 <label for="o_video_text">
diff --git a/addons/html_editor/static/src/main/media/media_plugin.js b/addons/html_editor/static/src/main/media/media_plugin.js
index 517e701c644100..7ab04a33e97f59 100644
--- a/addons/html_editor/static/src/main/media/media_plugin.js
+++ b/addons/html_editor/static/src/main/media/media_plugin.js
@@ -52,7 +52,7 @@ export class MediaPlugin extends Plugin {
             {
                 id: "replaceImage",
                 description: _t("Replace media"),
-                icon: "fa-exchange",
+                icon: "swap_horiz",
                 run: this.replaceImage.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
@@ -62,7 +62,7 @@ export class MediaPlugin extends Plugin {
                 description: this.config.allowVideo
                     ? _t("Insert image, icon or video")
                     : _t("Insert image or icon"),
-                icon: "fa-file-image-o",
+                icon: "image",
                 run: (params, context = {}) =>
                     this.openMediaDialog({
                         activeTab: this.getActiveDialogTab(context.searchTerm),
diff --git a/addons/html_editor/static/src/main/media/signature_plugin.js b/addons/html_editor/static/src/main/media/signature_plugin.js
index a109e1c50b26af..70ef3073af0cf7 100644
--- a/addons/html_editor/static/src/main/media/signature_plugin.js
+++ b/addons/html_editor/static/src/main/media/signature_plugin.js
@@ -13,7 +13,7 @@ export class SignaturePlugin extends Plugin {
                 id: "insertSignature",
                 title: _t("Signature"),
                 description: _t("Insert your signature"),
-                icon: "fa-pencil-square-o",
+                icon: "edit_square",
                 run: this.insertSignature.bind(this),
                 isAvailable: (selection) =>
                     this.config.allowImage && isHtmlContentSupported(selection),
diff --git a/addons/html_editor/static/src/main/movenode_plugin.js b/addons/html_editor/static/src/main/movenode_plugin.js
index 00815c354c6834..ffe3debe63ac92 100644
--- a/addons/html_editor/static/src/main/movenode_plugin.js
+++ b/addons/html_editor/static/src/main/movenode_plugin.js
@@ -267,7 +267,8 @@ export class MoveNodePlugin extends Plugin {
         }
 
         this.moveWidget = this.document.createElement("div");
-        this.moveWidget.className = "oe-sidewidget-move oi oi-draggable";
+        this.moveWidget.className = "oe-sidewidget-move oi";
+        this.moveWidget.dataset.icon = "drag_indicator";
         this.widgetContainer.append(this.moveWidget);
 
         let moveWidgetOffsetTop = 0;
diff --git a/addons/html_editor/static/src/main/power_buttons_plugin.js b/addons/html_editor/static/src/main/power_buttons_plugin.js
index e142d8d417a8a1..01c4239e52677d 100644
--- a/addons/html_editor/static/src/main/power_buttons_plugin.js
+++ b/addons/html_editor/static/src/main/power_buttons_plugin.js
@@ -15,6 +15,7 @@ import { debounce } from "@web/core/utils/timing";
  * @property {Object} [commandParams]
  * @property {string} [description] Can be inferred from the user command
  * @property {string} [icon] Can be inferred from the user command
+ * @property {string} [icon_class] Can be inferred from the user command
  * @property {string} [text] Mandatory if `icon` is not provided
  * @property {string} [isAvailable] Can be inferred from the user command
  */
@@ -36,7 +37,8 @@ import { debounce } from "@web/core/utils/timing";
  *                  id: myCommand,
  *                  run: myCommandFunction,
  *                  description: _t("Apply my command"),
- *                  icon: "fa-bug",
+ *                  icon: "bug_report",
+ *                  icon_class: "oi-filled",
  *              },
  *          ],
  *          power_buttons: [
@@ -85,7 +87,7 @@ export class PowerButtonsPlugin extends Plugin {
         const composePowerButton = (/**@type {PowerButton} */ item) => {
             const command = this.dependencies.userCommand.getCommand(item.commandId);
             return {
-                ...pick(command, "description", "icon"),
+                ...pick(command, "description", "icon", "icon_class"),
                 ...omit(item, "commandId", "commandParams"),
                 run: () => command.run(item.commandParams),
                 isAvailable: (selection) =>
@@ -94,12 +96,12 @@ export class PowerButtonsPlugin extends Plugin {
                         .every((predicate) => predicate(selection)),
             };
         };
-        const renderButton = ({ description, icon, text, run }) => {
+        const renderButton = ({ description, icon, icon_class, text, run }) => {
             const btn = this.document.createElement("button");
             let className = "power_button btn px-2 py-1 cursor-pointer";
             if (icon) {
-                const iconLibrary = icon.includes("fa-") ? "fa" : "oi";
-                className += ` ${iconLibrary} ${icon}`;
+                className += ` oi ${icon_class ? icon_class : ""}`;
+                btn.dataset.icon = icon;
             } else {
                 const span = this.document.createElement("span");
                 span.textContent = text;
diff --git a/addons/html_editor/static/src/main/powerbox/powerbox.xml b/addons/html_editor/static/src/main/powerbox/powerbox.xml
index 8d7b9c945a1a8f..b43a923a84c4f9 100644
--- a/addons/html_editor/static/src/main/powerbox/powerbox.xml
+++ b/addons/html_editor/static/src/main/powerbox/powerbox.xml
@@ -12,7 +12,7 @@
                     t-on-mousedown="(ev) => ev.preventDefault()"
                     t-on-click="() => this.props.applyCommand(command)">
                     <div class="border rounded">
-                        <i class="o-we-command-img d-flex align-items-center justify-content-center fa" t-att-class="command.icon"/>
+                        <i class="o-we-command-img d-flex align-items-center justify-content-center oi" t-att-class="command.icon_class" t-att-data-icon="command.icon"/>
                     </div>
                     <div class="ms-3 flex-fill">
                         <div class="d-flex justify-content-between">
diff --git a/addons/html_editor/static/src/main/powerbox/powerbox_plugin.js b/addons/html_editor/static/src/main/powerbox/powerbox_plugin.js
index b60525c956b9a6..075996d1cabc3d 100644
--- a/addons/html_editor/static/src/main/powerbox/powerbox_plugin.js
+++ b/addons/html_editor/static/src/main/powerbox/powerbox_plugin.js
@@ -23,7 +23,7 @@ import { closestElement } from "@html_editor/utils/dom_traversal";
  * @property {Object} [commandParams] Passed to the command's `run` function - optional
  * @property {TranslatedString} [title] Inheritable
  * @property {TranslatedString} [description] Inheritable
- * @property {string} [icon] fa-class - Inheritable
+ * @property {string} [icon] oi class - Inheritable
  * @property {TranslatedString[]} [keywords]
  * @property {(selection: EditorSelection) => boolean} [isAvailable] Optional and inheritable
  */
@@ -72,7 +72,7 @@ import { closestElement } from "@html_editor/utils/dom_traversal";
  *                  run: myCommandFunction,
  *                  title: _t("My Command"),
  *                  description: _t("My command's description"),
- *                  icon: "fa-bug",
+ *                  icon: "bug_report",
  *              },
  *          ],
  *          powerbox_categories: [
diff --git a/addons/html_editor/static/src/main/powerbox/search_powerbox_plugin.js b/addons/html_editor/static/src/main/powerbox/search_powerbox_plugin.js
index 77c181de48bf8b..5fa3f65bc4293d 100644
--- a/addons/html_editor/static/src/main/powerbox/search_powerbox_plugin.js
+++ b/addons/html_editor/static/src/main/powerbox/search_powerbox_plugin.js
@@ -32,7 +32,7 @@ export class SearchPowerboxPlugin extends Plugin {
         power_buttons: withSequence(100, {
             commandId: "openSearchPowerbox",
             description: _t("More options"),
-            icon: "oi-ellipsis-v",
+            icon: "more_vert",
         }),
     };
     setup() {
diff --git a/addons/html_editor/static/src/main/separator_plugin.js b/addons/html_editor/static/src/main/separator_plugin.js
index 362bfaad096ab4..527154d0fb1393 100644
--- a/addons/html_editor/static/src/main/separator_plugin.js
+++ b/addons/html_editor/static/src/main/separator_plugin.js
@@ -26,7 +26,7 @@ export class SeparatorPlugin extends Plugin {
                 id: "insertSeparator",
                 title: _t("Separator"),
                 description: _t("Insert a horizontal rule separator"),
-                icon: "fa-minus",
+                icon: "remove",
                 run: this.insertSeparator.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
diff --git a/addons/html_editor/static/src/main/star_plugin.js b/addons/html_editor/static/src/main/star_plugin.js
index 33c0dd3ee89d00..266035d26fdff6 100644
--- a/addons/html_editor/static/src/main/star_plugin.js
+++ b/addons/html_editor/static/src/main/star_plugin.js
@@ -13,7 +13,8 @@ export class StarPlugin extends Plugin {
                 id: "addStars",
                 title: _t("Stars"),
                 description: _t("Insert a rating"),
-                icon: "fa-star",
+                icon: "star",
+                icon_class: "oi-filled",
                 run: this.addStars.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
@@ -23,7 +24,7 @@ export class StarPlugin extends Plugin {
                 title: _t("3 Stars"),
                 description: _t("Insert a rating over 3 stars"),
                 categoryId: "widget",
-                icon: "fa-star-o",
+                icon: "star",
                 commandId: "addStars",
                 commandParams: { length: 3 },
             },
@@ -45,8 +46,7 @@ export class StarPlugin extends Plugin {
     onMouseDown(ev) {
         const node = ev.target;
         const isStar = (node) =>
-            node.nodeType === Node.ELEMENT_NODE &&
-            (node.classList.contains("fa-star") || node.classList.contains("fa-star-o"));
+            node.nodeType === Node.ELEMENT_NODE && node.dataset.icon === "star";
         if (
             isStar(node) &&
             node.parentElement &&
@@ -58,15 +58,13 @@ export class StarPlugin extends Plugin {
             const nextStars = allStars.slice(currentStarIndex + 1);
             if (nextStars.length || previousStars.length) {
                 const shouldToggleOff =
-                    node.classList.contains("fa-star") &&
-                    (!nextStars[0] || !nextStars[0].classList.contains("fa-star"));
+                    node.classList.contains("oi-filled") &&
+                    (!nextStars[0] || !nextStars[0].classList.contains("oi-filled"));
                 for (const star of [...previousStars, node]) {
-                    star.classList.toggle("fa-star-o", shouldToggleOff);
-                    star.classList.toggle("fa-star", !shouldToggleOff);
+                    star.classList.toggle("oi-filled", !shouldToggleOff);
                 }
                 for (const star of nextStars) {
-                    star.classList.toggle("fa-star-o", true);
-                    star.classList.toggle("fa-star", false);
+                    star.classList.toggle("oi-filled", false);
                 }
                 this.dependencies.history.addStep();
             }
@@ -76,7 +74,7 @@ export class StarPlugin extends Plugin {
     }
 
     addStars({ length }) {
-        const stars = Array(length).fill('<i class="fa fa-star-o"></i>').join("");
+        const stars = Array(length).fill('<i class="oi" data-icon="star"></i>').join("");
         const html = `<span contenteditable="false" class="o_stars">${stars}</span>`;
         this.dependencies.dom.insert(parseHTML(this.document, html));
         this.dependencies.history.addStep();
diff --git a/addons/html_editor/static/src/main/table/table_menu.js b/addons/html_editor/static/src/main/table/table_menu.js
index 4e3af0e99f6634..db22b8c748cab7 100644
--- a/addons/html_editor/static/src/main/table/table_menu.js
+++ b/addons/html_editor/static/src/main/table/table_menu.js
@@ -186,7 +186,8 @@ export class TableMenu extends Component {
         return [
             !this.isFirst && {
                 name: "move_left",
-                icon: "fa-chevron-left disabled",
+                icon: "chevron_left",
+                icon_class: "disabled",
                 text: ltr ? _t("Move left") : _t("Move right"),
                 action: (target) =>
                     this.props.moveColumn(this.tableGrid[0].indexOf(target) - 1, target),
@@ -195,7 +196,7 @@ export class TableMenu extends Component {
             },
             !this.isLast && {
                 name: "move_right",
-                icon: "fa-chevron-right",
+                icon: "chevron_right",
                 text: ltr ? _t("Move right") : _t("Move left"),
                 action: (target) =>
                     this.props.moveColumn(this.tableGrid[0].indexOf(target) + 1, target),
@@ -204,38 +205,40 @@ export class TableMenu extends Component {
             },
             {
                 name: "insert_left",
-                icon: "fa-plus",
+                icon: "add",
                 text: ltr ? _t("Insert left") : _t("Insert right"),
                 action: this.props.addColumn.bind(this, "before"),
             },
             {
                 name: "insert_right",
-                icon: "fa-plus",
+                icon: "add",
                 text: ltr ? _t("Insert right") : _t("Insert left"),
                 action: this.props.addColumn.bind(this, "after"),
             },
             {
                 name: "delete",
-                icon: "fa-trash",
+                icon: "delete",
+                icon_class: "oi-filled",
                 text: _t("Delete"),
                 action: this.props.removeColumn.bind(this),
             },
             this.hasCustomColumnWidth && {
                 name: "reset_column_size",
-                icon: "fa-table",
+                icon: "table_chart",
                 text: _t("Reset column size"),
                 action: (target) =>
                     this.props.resetColumnWidth(closestElement(target, isTableCell)),
             },
             this.hasCustomTableSize && {
                 name: "reset_table_size",
-                icon: "fa-table",
+                icon: "table_chart",
                 text: _t("Reset table size"),
                 action: (target) => this.props.resetTableSize(closestElement(target, "table")),
             },
             this.hasContent && {
                 name: "clear_content",
-                icon: "fa-times-circle",
+                icon: "cancel",
+                icon_class: "oi-filled",
                 text: _t("Clear content"),
                 action: this.props.clearColumnContent.bind(this),
             },
@@ -268,20 +271,20 @@ export class TableMenu extends Component {
             this.isFirst &&
                 !this.isTableHeader && {
                     name: "make_header",
-                    icon: "fa-th-large",
+                    icon: "view_module",
                     text: _t("Turn into header"),
                     action: (target) => this.props.turnIntoHeader(target.parentElement),
                 },
             this.isFirst &&
                 this.isTableHeader && {
                     name: "remove_header",
-                    icon: "fa-table",
+                    icon: "table_chart",
                     text: _t("Turn into row"),
                     action: (target) => this.props.turnIntoRow(target.parentElement),
                 },
             !this.isFirst && {
                 name: "move_up",
-                icon: "fa-chevron-up",
+                icon: "expand_less",
                 text: _t("Move up"),
                 action: (target) =>
                     this.props.moveRow(getRowIndex(target) - 1, target.parentElement),
@@ -290,7 +293,7 @@ export class TableMenu extends Component {
             },
             !this.isLast && {
                 name: "move_down",
-                icon: "fa-chevron-down",
+                icon: "expand_more",
                 text: _t("Move down"),
                 action: (target) =>
                     this.props.moveRow(getRowIndex(target) + 1, target.parentElement),
@@ -299,19 +302,19 @@ export class TableMenu extends Component {
             },
             !this.isTableHeader && {
                 name: "insert_above",
-                icon: "fa-plus",
+                icon: "add",
                 text: _t("Insert above"),
                 action: (target) => this.props.addRow("before", target.parentElement),
             },
             {
                 name: "insert_below",
-                icon: "fa-plus",
+                icon: "add",
                 text: _t("Insert below"),
                 action: (target) => this.props.addRow("after", target.parentElement),
             },
             {
                 name: "toggle_alternating_rows",
-                icon: "fa-paint-brush",
+                icon: "design_services",
                 text: hasAlternatingRowClass
                     ? _t("Clear alternate colors")
                     : _t("Alternate row colors"),
@@ -319,25 +322,27 @@ export class TableMenu extends Component {
             },
             {
                 name: "delete",
-                icon: "fa-trash",
+                icon: "delete",
+                icon_class: "oi-filled",
                 text: _t("Delete"),
                 action: (target) => this.props.removeRow(target.parentElement),
             },
             this.hasCustomRowHeight && {
                 name: "reset_row_size",
-                icon: "fa-table",
+                icon: "table_chart",
                 text: _t("Reset row size"),
                 action: (target) => this.props.resetRowHeight(closestElement(target, "tr")),
             },
             this.hasCustomTableSize && {
                 name: "reset_table_size",
-                icon: "fa-table",
+                icon: "table_chart",
                 text: _t("Reset table size"),
                 action: (target) => this.props.resetTableSize(closestElement(target, "table")),
             },
             this.hasContent && {
                 name: "clear_content",
-                icon: "fa-times-circle",
+                icon: "cancel",
+                icon_class: "oi-filled",
                 text: _t("Clear content"),
                 action: (target) => this.props.clearRowContent(target.parentElement),
             },
diff --git a/addons/html_editor/static/src/main/table/table_menu.scss b/addons/html_editor/static/src/main/table/table_menu.scss
index 373279abba859b..59d8cffabf7132 100644
--- a/addons/html_editor/static/src/main/table/table_menu.scss
+++ b/addons/html_editor/static/src/main/table/table_menu.scss
@@ -2,8 +2,4 @@
     border: $border-width solid rgba($color: $o-brand-odoo, $alpha: 1.0);
     color: #fff;
     background-color: rgba($color: $o-brand-odoo, $alpha: 0.7);
-
-    &.oi-ellipsis-v {
-        width: 17px;
-    }
 }
diff --git a/addons/html_editor/static/src/main/table/table_menu.xml b/addons/html_editor/static/src/main/table/table_menu.xml
index c7a27595dc4f79..a07752755ad025 100644
--- a/addons/html_editor/static/src/main/table/table_menu.xml
+++ b/addons/html_editor/static/src/main/table/table_menu.xml
@@ -5,7 +5,8 @@
                 t-custom-ref="menuRef"
                 t-att-data-type="this.props.type"
                 class="o-we-table-menu oi"
-                t-attf-class="oi-ellipsis-{{ this.props.type === 'column' ? 'h w-100' : 'v h-100 px-0' }}"
+                t-attf-class="{{ this.props.type === 'column' ? 'w-100' : 'h-100 px-0' }}"
+                t-attf-data-icon="{{ this.props.type === 'column' ? 'more_horiz' : 'more_vert' }}"
                 title="Click to open options&#10;Drag to move"
                 t-on-pointerdown.prevent="() => {}"
             />
@@ -15,9 +16,10 @@
                         <DropdownItem onSelected="() => !item.disable and this.onSelected(item)">
                             <div class="user-select-none d-flex align-items-center" t-att-name="item.name" t-att-title="item.disable ? item.tooltip : ''" t-att-class="item.disable ? 'disabled text-muted' : ''">
                                 <span t-if="item.icon"
-                                    class="fa text-center"
+                                    class="oi text-center"
+                                    t-att-class="item.icon_class"
                                     style="width:16px;"
-                                    t-att-class="item.icon"/>
+                                    t-att-data-icon="item.icon"/>
                                 <span class="ms-2" t-out="item.text"/>
                             </div>
                         </DropdownItem>
diff --git a/addons/html_editor/static/src/main/table/table_ui_plugin.js b/addons/html_editor/static/src/main/table/table_ui_plugin.js
index 1c5ca85586bb71..985a559ff44bcb 100644
--- a/addons/html_editor/static/src/main/table/table_ui_plugin.js
+++ b/addons/html_editor/static/src/main/table/table_ui_plugin.js
@@ -22,7 +22,7 @@ export class TableUIPlugin extends Plugin {
                 id: "openTablePicker",
                 title: _t("Table"),
                 description: _t("Insert a table"),
-                icon: "fa-table",
+                icon: "table_chart",
                 run: this.openPickerOrInsertTable.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
diff --git a/addons/html_editor/static/src/main/text_direction_plugin.js b/addons/html_editor/static/src/main/text_direction_plugin.js
index eaff0afe39c454..e694317851adf2 100644
--- a/addons/html_editor/static/src/main/text_direction_plugin.js
+++ b/addons/html_editor/static/src/main/text_direction_plugin.js
@@ -15,7 +15,7 @@ export class TextDirectionPlugin extends Plugin {
                 id: "switchDirection",
                 title: _t("Switch direction"),
                 description: _t("Switch the text's direction"),
-                icon: "fa-exchange",
+                icon: "swap_horiz",
                 run: this.switchDirection.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
diff --git a/addons/html_editor/static/src/main/toolbar/toolbar.js b/addons/html_editor/static/src/main/toolbar/toolbar.js
index 80609f9fc25da5..db756b1d03a069 100644
--- a/addons/html_editor/static/src/main/toolbar/toolbar.js
+++ b/addons/html_editor/static/src/main/toolbar/toolbar.js
@@ -39,6 +39,7 @@ export class Toolbar extends Component {
                                                 ...base,
                                                 run: Function,
                                                 icon: { type: String, optional: true },
+                                                icon_class: { type: String, optional: true },
                                                 text: { type: String, optional: true },
                                                 isActive: Boolean,
                                             });
@@ -82,7 +83,7 @@ export const toolbarButtonProps = {
 export function composeToolbarButton(userCommand, toolbarItem) {
     const description = toolbarItem.description || userCommand.description;
     return {
-        ...pick(userCommand, "icon"),
+        ...pick(userCommand, "icon", "icon_class"),
         ...omit(toolbarItem, "commandId", "commandParams"),
         run: () => userCommand.run(toolbarItem.commandParams),
         isAvailable: (selection) =>
diff --git a/addons/html_editor/static/src/main/toolbar/toolbar.xml b/addons/html_editor/static/src/main/toolbar/toolbar.xml
index 3f4b6940316542..8b67057ba97098 100644
--- a/addons/html_editor/static/src/main/toolbar/toolbar.xml
+++ b/addons/html_editor/static/src/main/toolbar/toolbar.xml
@@ -25,7 +25,7 @@
                                 t-att-name="button.id"
                                 t-on-click="() => this.onButtonClick(button)"
                             >
-                                <span t-if="button.icon" t-att-class="button.icon.includes('fa-') ? 'fa fa-fw ' + button.icon : 'oi oi-fw ' + button.icon"/>
+                                <span t-if="button.icon" t-attf-class="oi oi-fw {{button.icon_class || ''}}" t-att-data-icon="button.icon"/>
                                 <span t-if="button.text" t-out="button.text"/>
                             </button>
                     </t>
diff --git a/addons/html_editor/static/src/main/toolbar/toolbar_plugin.js b/addons/html_editor/static/src/main/toolbar/toolbar_plugin.js
index bc366400cd1649..51c39335585fab 100644
--- a/addons/html_editor/static/src/main/toolbar/toolbar_plugin.js
+++ b/addons/html_editor/static/src/main/toolbar/toolbar_plugin.js
@@ -43,6 +43,7 @@ import { closestElement } from "@html_editor/utils/dom_traversal";
  * @property {Object} [commandParams] Passed to the command's `run` function
  * @property {TranslatedString | TranslatedStringGetter} [description] * - becomes the button's title (and tooltip content)
  * @property {string} [icon] *
+ * @property {string} [icon_class] *
  * @property {string} [text] Can be used with (or instead of) `icon`
  * @property {(selection: EditorSelection) => boolean} [isAvailable] ? *
  * @property {(selection: EditorSelection, nodes: Node[]) => boolean} [isActive]
@@ -71,6 +72,7 @@ import { closestElement } from "@html_editor/utils/dom_traversal";
  * @property {TranslatedStringGetter} description
  * @property {Function} run
  * @property {string} [icon]
+ * @property {string} [icon_class]
  * @property {string} [text]
  * @property {(selection: EditorSelection) => boolean} isAvailable
  * @property {(selection: EditorSelection, nodes: Node[]) => boolean} [isActive]
@@ -124,7 +126,8 @@ export const DISABLED_NAMESPACE = "disabled";
  *                 id: myCommand,
  *                 run: myCommandFunction,
  *                 description: _t("My Command"),
- *                 icon: "fa-bug",
+ *                 icon: "bug_report",
+ *                 icon_class: "oi-filled",
  *             },
  *         ],
  *         // see ToolbarGroup
@@ -178,7 +181,7 @@ export class ToolbarPlugin extends Plugin {
             groupId: "expand_toolbar",
             commandId: "expandToolbar",
             description: _t("Expand toolbar"),
-            icon: "oi-ellipsis-v",
+            icon: "more_vert",
         },
         toolbar_namespace_providers: [
             withSequence(100, (targetedNodes, editableSelection) =>
@@ -482,7 +485,7 @@ export class ToolbarPlugin extends Plugin {
                         ...(button.Component
                             ? pick(button, "Component", "props")
                             : {
-                                  ...pick(button, "run", "icon", "text"),
+                                  ...pick(button, "run", "icon", "icon_class", "text"),
                                   isActive: !!button.isActive?.(selection, targetedNodes),
                               }),
                     })),
diff --git a/addons/html_editor/static/src/main/youtube_plugin.js b/addons/html_editor/static/src/main/youtube_plugin.js
index ed97f2d33d01ad..e5dd82de40474a 100644
--- a/addons/html_editor/static/src/main/youtube_plugin.js
+++ b/addons/html_editor/static/src/main/youtube_plugin.js
@@ -28,7 +28,7 @@ export class YoutubePlugin extends Plugin {
             return {
                 title: _t("Embed Youtube Video"),
                 description: _t("Embed the youtube video in the document."),
-                icon: "fa-youtube-play",
+                icon: "oi_youtube-play",
                 run: async () => {
                     const videoElement = await this.getYoutubeVideoElement(youtubeUrl[0]);
                     this.dependencies.dom.insert(videoElement);
diff --git a/addons/html_editor/static/src/others/embedded_components/backend/file/file.xml b/addons/html_editor/static/src/others/embedded_components/backend/file/file.xml
index 569448246ae343..3c8d16c82afb7d 100644
--- a/addons/html_editor/static/src/others/embedded_components/backend/file/file.xml
+++ b/addons/html_editor/static/src/others/embedded_components/backend/file/file.xml
@@ -17,7 +17,7 @@
             <attribute name="tabindex">-1</attribute>
         </xpath>
         <xpath expr="//span[hasclass('o_file_name')]" position="after">
-            <i class="fa fa-pencil mx-1 invisible align-items-center d-inline-flex"/>
+            <i class="oi oi-filled mx-1 invisible align-items-center d-inline-flex" data-icon="edit"/>
         </xpath>
     </t>
 </templates>
diff --git a/addons/html_editor/static/src/others/embedded_components/backend/syntax_highlighting/code_toolbar.xml b/addons/html_editor/static/src/others/embedded_components/backend/syntax_highlighting/code_toolbar.xml
index dfd04953ac4e1e..a225c6b5ffcd33 100644
--- a/addons/html_editor/static/src/others/embedded_components/backend/syntax_highlighting/code_toolbar.xml
+++ b/addons/html_editor/static/src/others/embedded_components/backend/syntax_highlighting/code_toolbar.xml
@@ -6,7 +6,7 @@
                 <Dropdown menuClass="'o_language_selector'" focusToggleOnClosed="false">
                     <button class="btn" t-att-title="this.languages[this.props.currentLanguage]" name="language">
                         <span class="px-1" t-out="this.languages[this.props.currentLanguage]"/>
-                        <i class="fa fa-caret-down"></i>
+                        <i class="oi" data-icon="arrow_drop_down"></i>
                     </button>
                     <t t-set-slot="content">
                         <t t-foreach="Object.entries(this.languages)" t-as="language" t-key="language[0]">
@@ -26,7 +26,7 @@
                 <button class="text-nowrap btn"
                     t-on-click="this.props.convertToParagraph"
                 >
-                    <span class="mx-1 fa fa-paragraph" title="Convert to paragraph"></span>
+                    <span class="oi mx-1" data-icon="format_paragraph" title="Convert to paragraph"></span>
                 </button>
             </div>
         </div>
diff --git a/addons/html_editor/static/src/others/embedded_components/backend/video/video.xml b/addons/html_editor/static/src/others/embedded_components/backend/video/video.xml
index 322a3a419d247c..0dabe857e69703 100644
--- a/addons/html_editor/static/src/others/embedded_components/backend/video/video.xml
+++ b/addons/html_editor/static/src/others/embedded_components/backend/video/video.xml
@@ -4,14 +4,14 @@
     <t t-name="html_editor.VideoSettings">
         <Dropdown state="this.props.dropdown">
             <button t-custom-ref="menuRef" class="btn btn-light shadow border py-1 px-1 ms-1" title="More options">
-                <i class="oi oi-fw oi-ellipsis-v" />
+                <i class="oi oi-fw" data-icon="more_vert"/>
             </button>
             <t t-set-slot="content">
                 <DropdownItem onSelected="this.props.replaceVideo">
-                    <i class="fa-fw fa fa-exchange me-1"></i>Replace
+                    <i class="oi oi-fw me-1" data-icon="swap_horiz"></i>Replace
                 </DropdownItem>
                 <DropdownItem onSelected="this.props.removeVideo" class="'text-danger'">
-                    <i class="fa fa-fw fa-trash me-1"></i>Remove
+                    <i class="oi oi-fw oi-filled me-1" data-icon="delete"></i>Remove
                 </DropdownItem>
             </t>
         </Dropdown>
diff --git a/addons/html_editor/static/src/others/embedded_components/core/embedded_component_toolbar/embedded_component_toolbar.js b/addons/html_editor/static/src/others/embedded_components/core/embedded_component_toolbar/embedded_component_toolbar.js
index 8fca1310ec1ba3..1cf3428b62cfca 100644
--- a/addons/html_editor/static/src/others/embedded_components/core/embedded_component_toolbar/embedded_component_toolbar.js
+++ b/addons/html_editor/static/src/others/embedded_components/core/embedded_component_toolbar/embedded_component_toolbar.js
@@ -14,6 +14,7 @@ export class EmbeddedComponentToolbarButton extends Component {
         buttonRef: { type: Function, optional: true },
         hidden: { type: Boolean, optional: true },
         icon: { type: String, optional: true },
+        icon_class: { type: String, optional: true },
         label: String,
         name: { type: String, optional: true },
         onClick: Function,
diff --git a/addons/html_editor/static/src/others/embedded_components/core/embedded_component_toolbar/embedded_component_toolbar.xml b/addons/html_editor/static/src/others/embedded_components/core/embedded_component_toolbar/embedded_component_toolbar.xml
index 73c9a0ff105f44..59c06e0a28ceb6 100644
--- a/addons/html_editor/static/src/others/embedded_components/core/embedded_component_toolbar/embedded_component_toolbar.xml
+++ b/addons/html_editor/static/src/others/embedded_components/core/embedded_component_toolbar/embedded_component_toolbar.xml
@@ -10,7 +10,7 @@
     <t t-name="html_editor.EmbeddedComponentToolbarButton">
         <button t-if="!this.props.hidden" t-custom-ref="buttonRef" t-on-click="this.props.onClick" t-att-name="this.props.name" t-att-title="this.props.title"
             class="btn btn-primary btn-link btn-sm border-0 py-0 text-break text-start text-o-color-2 text-capitalize fw-bold border-transparent bg-transparent">
-            <i t-if="this.props.icon" t-attf-class="fa #{this.props.icon} me-1"/>
+            <i t-if="this.props.icon" t-attf-class="oi #{this.props.icon_class} me-1" t-att-data-icon="this.props.icon"/>
             <span class="o_embedded_toolbar_button_text" t-out="this.props.label"/>
         </button>
     </t>
diff --git a/addons/html_editor/static/src/others/embedded_components/core/table_of_content/table_of_content.xml b/addons/html_editor/static/src/others/embedded_components/core/table_of_content/table_of_content.xml
index a7de459ade0441..703e9452c18de1 100644
--- a/addons/html_editor/static/src/others/embedded_components/core/table_of_content/table_of_content.xml
+++ b/addons/html_editor/static/src/others/embedded_components/core/table_of_content/table_of_content.xml
@@ -5,7 +5,7 @@
         <div class="d-flex align-items-center cursor-pointer user-select-none" t-on-click="() => { this.state.folded = !this.state.folded; }">
             <div class="o_embedded_toc_label p-1 fw-bold">
                 Table of Contents
-                <i t-attf-class="align-self-center fa fa-fw fa-caret-#{ this.state.folded ? 'right' : 'down' }"/>
+                <i class="align-self-center oi oi-fw" t-attf-data-icon="#{ this.state.folded ? 'arrow_right' : 'arrow_drop_down' }"/>
             </div>
         </div>
         <div t-if="!this.state.folded" class="o_embedded_toc_content">
diff --git a/addons/html_editor/static/src/others/embedded_components/core/toggle_block/toggle_block.scss b/addons/html_editor/static/src/others/embedded_components/core/toggle_block/toggle_block.scss
index 610d9607b5ff74..2fa7e2369307f3 100644
--- a/addons/html_editor/static/src/others/embedded_components/core/toggle_block/toggle_block.scss
+++ b/addons/html_editor/static/src/others/embedded_components/core/toggle_block/toggle_block.scss
@@ -2,7 +2,7 @@
     [data-embedded-editable] > p {
         margin: 0;
     }
-    button:has(i.fa-caret-down, i.fa-caret-right){
+    button:has(i[data-icon="arrow_drop_down"], i[data-icon="arrow_right"]){
         cursor: pointer !important;
         width: 1.5rem; // Equivalent to ps-4
         aspect-ratio: 1 / 1;
diff --git a/addons/html_editor/static/src/others/embedded_components/core/toggle_block/toggle_block.xml b/addons/html_editor/static/src/others/embedded_components/core/toggle_block/toggle_block.xml
index 4d557f62fe1399..f2a085bb6400d6 100644
--- a/addons/html_editor/static/src/others/embedded_components/core/toggle_block/toggle_block.xml
+++ b/addons/html_editor/static/src/others/embedded_components/core/toggle_block/toggle_block.xml
@@ -3,7 +3,7 @@
     <t t-name="html_editor.EmbeddedToggleBlock">
        <div class="d-flex flex-row align-items-center">
             <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" t-on-click="this.onToggle" t-on-pointerdown.prevent="" type="button">
-                <i t-attf-class="fa align-self-center fa-caret-{{this.state.showContent ? 'down' : 'right'}}"/>
+                <i class="oi align-self-center" t-attf-data-icon="{{this.state.showContent ? 'arrow_drop_down' : 'arrow_right'}}"/>
             </button>
             <div class="flex-fill ms-1" t-custom-ref="title"/>
         </div>
diff --git a/addons/html_editor/static/src/others/embedded_components/plugins/table_of_content_plugin/table_of_content_plugin.js b/addons/html_editor/static/src/others/embedded_components/plugins/table_of_content_plugin/table_of_content_plugin.js
index e7a7b0985a2947..78f93db092c787 100644
--- a/addons/html_editor/static/src/others/embedded_components/plugins/table_of_content_plugin/table_of_content_plugin.js
+++ b/addons/html_editor/static/src/others/embedded_components/plugins/table_of_content_plugin/table_of_content_plugin.js
@@ -17,7 +17,8 @@ export class TableOfContentPlugin extends Plugin {
                 id: "insertTableOfContent",
                 title: _t("Table of Contents"),
                 description: _t("Highlight the structure (headings)"),
-                icon: "fa-bookmark",
+                icon: "bookmark",
+                icon_class: "oi-filled",
                 run: this.insertTableOfContent.bind(this),
                 isAvailable: isHtmlContentSupported,
             },
diff --git a/addons/html_editor/static/src/others/embedded_components/plugins/toggle_block_plugin/toggle_block_plugin.js b/addons/html_editor/static/src/others/embedded_components/plugins/toggle_block_plugin/toggle_block_plugin.js
index 85480d8c81e608..42929a753d50a0 100644
--- a/addons/html_editor/static/src/others/embedded_components/plugins/toggle_block_plugin/toggle_block_plugin.js
+++ b/addons/html_editor/static/src/others/embedded_components/plugins/toggle_block_plugin/toggle_block_plugin.js
@@ -73,7 +73,7 @@ export class ToggleBlockPlugin extends Plugin {
                 id: "insertToggleBlock",
                 title: _t("Toggle list"),
                 description: _t("Hide Text under foldable toggles"),
-                icon: "fa-caret-square-o-right",
+                icon: "arrow_circle_right",
                 isAvailable: (selection) =>
                     isHtmlContentSupported(selection) &&
                     !closestElement(selection.anchorNode, `${toggleSelector} ${titleSelector}`),
diff --git a/addons/html_editor/static/src/scss/html_editor.common.scss b/addons/html_editor/static/src/scss/html_editor.common.scss
index 461e4d11d9615a..cccdb6cf92594d 100644
--- a/addons/html_editor/static/src/scss/html_editor.common.scss
+++ b/addons/html_editor/static/src/scss/html_editor.common.scss
@@ -220,7 +220,7 @@ ol > li.o_indent, ul > li.o_indent {
 }
 
 // Stars widget
-.o_stars .fa.fa-star {
+.o_stars [data-icon="star"].oi-filled {
     color: gold;
 }
 
@@ -234,42 +234,27 @@ img.o_we_custom_image {
 img.shadow {
     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
 }
-img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
+img.padding-small, .img.padding-small, iframe.padding-small {
     padding: 4px;
 }
-img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
+img.padding-medium, .img.padding-medium, iframe.padding-medium {
     padding: 8px;
 }
-img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
+img.padding-large, .img.padding-large, iframe.padding-large {
     padding: 16px;
 }
-img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
+img.padding-xl, .img.padding-xl, iframe.padding-xl {
     padding: 32px;
 }
 img.ms-auto, img.mx-auto {
     display: block;
 }
 
-.fa-6x {
-    font-size: 6em;
-}
-.fa-7x {
-    font-size: 7em;
-}
-.fa-8x {
-    font-size: 8em;
-}
-.fa-9x {
-    font-size: 9em;
-}
-.fa-10x {
-    font-size: 10em;
-}
-.fa.mx-auto {
+.oi.mx-auto {
     display: block;
     text-align: center;
 }
-.fa.card-img, .fa.card-img-top, .fa.card-img-bottom {
+.oi.card-img, .oi.card-img-top, .oi.card-img-bottom {
     width: auto;
 }
 
@@ -374,10 +359,10 @@ div.media_iframe_video {
 
 // Fields
 address {
-    .fa.fa-mobile-phone {
+    [data-icon="smartphone"] {
         margin: 0 3px 0 2px;
     }
-    .fa.fa-file-text-o {
+    [data-icon="article"] {
         margin-right: 1px;
     }
 }
@@ -784,9 +769,9 @@ pre {
         -webkit-text-fill-color: inherit;
     }
 
-    // On Iphone (Safari & Chrome) and Mac (only Safari), the font awesome icons
+    // On Iphone (Safari & Chrome) and Mac (only Safari), the font icons
     // are not rendered (invisible) when inside a gradient.
-    .fa {
+    .oi {
         display: inherit;
     }
 
diff --git a/addons/html_editor/static/src/scss/html_editor.variables.scss b/addons/html_editor/static/src/scss/html_editor.variables.scss
index 2700a5db982c18..e4b2de03f8c6d5 100644
--- a/addons/html_editor/static/src/scss/html_editor.variables.scss
+++ b/addons/html_editor/static/src/scss/html_editor.variables.scss
@@ -68,10 +68,10 @@ $o-we-item-pressed-color: $o-we-fg-lighter !default;
 // Selection wrapper
 // ------------------------------------------------------------------
 
-@mixin o-we-active-wrapper($icon: '\f00c', $top: auto, $right: auto, $bottom: auto, $left: auto) {
+@mixin o-we-active-wrapper($icon: 'check', $top: auto, $right: auto, $bottom: auto, $left: auto) {
     box-shadow: 0 0 0 3px $o-brand-primary;
 
-    &:not(.fa) {
+    &:not(.oi) {
         border: 3px solid $o-brand-primary;
         box-shadow: none;
         &:before {
@@ -80,7 +80,7 @@ $o-we-item-pressed-color: $o-we-fg-lighter !default;
             width: 19px;
             height: 19px;
             background-color: $o-brand-primary;
-            font-family: 'FontAwesome';
+            font-family: 'material_symbols_sharp';
             color: white;
             border-radius: 50%;
             text-align: center;
diff --git a/addons/html_editor/static/tests/_helpers/syntax_highlighting.js b/addons/html_editor/static/tests/_helpers/syntax_highlighting.js
index ce10c8c88d4f89..84307326a7ccce 100644
--- a/addons/html_editor/static/tests/_helpers/syntax_highlighting.js
+++ b/addons/html_editor/static/tests/_helpers/syntax_highlighting.js
@@ -99,17 +99,17 @@ const TOOLBAR = (language) =>
         <div data-prevent-closing-overlay="true">
             <button class="btn o-dropdown dropdown-toggle dropdown" name="language" title="${language}" aria-expanded="false">
                 <span class="px-1">${language}</span>
-                <i class="fa fa-caret-down"></i>
+                <i class="oi" data-icon="arrow_drop_down"></i>
             </button>
             <button type="button" class="text-nowrap btn o_clipboard_button">
-                <span class="mx-1 fa fa-clipboard"></span>
+                <span class="oi mx-1" data-icon="assignment"></span>
                 <span>Copy</span>
             </button>
             <button class="text-nowrap btn" name="wrap" title="Wrap the code">
-                <span class="mx-1 fa fa-level-down fa-rotate-90"></span>
+                <span class="mx-1 oi oi-rotate-90" data-icon="subdirectory_arrow_right"></span>
                 <span>Wrap</span>
             </button>
-            <button class="text-nowrap btn"><span class="mx-1 fa fa-paragraph" title="Convert to paragraph"></span></button>
+            <button class="text-nowrap btn"><span class="oi mx-1" data-icon="format_paragraph" title="Convert to paragraph"></span></button>
         </div>
     </div>`
     );
diff --git a/addons/html_editor/static/tests/caption.test.js b/addons/html_editor/static/tests/caption.test.js
index 9c9465d29256ed..2f92f5e26ae4e5 100644
--- a/addons/html_editor/static/tests/caption.test.js
+++ b/addons/html_editor/static/tests/caption.test.js
@@ -628,11 +628,11 @@ test("remove caption when replacing an image with other media", async () => {
     await click("button[name='replace_image']");
     await waitFor(".o_select_media_dialog");
     await click(".modal .modal-body .nav-item:nth-child(3) button"); // Icons
-    await waitFor(".modal .modal-body .fa-heart");
-    await click(".modal .modal-body .fa-heart");
+    await waitFor(".modal .modal-body [data-icon='favorite']");
+    await click(".modal .modal-body [data-icon='favorite']");
     expect("img[src='/web/static/img/logo.png']").toHaveCount(0);
     expect(getContent(el)).toBe(
-        '<p>\ufeff<span class="fa fa-heart" contenteditable="false">\u200b</span>[]\ufeff</p><p>abc</p>'
+        '<p>\ufeff<span class="oi" data-icon="favorite" contenteditable="false">\u200b</span>[]\ufeff</p><p>abc</p>'
     );
 });
 
diff --git a/addons/html_editor/static/tests/color.test.js b/addons/html_editor/static/tests/color.test.js
index a945e289e985c5..234cb880d05872 100644
--- a/addons/html_editor/static/tests/color.test.js
+++ b/addons/html_editor/static/tests/color.test.js
@@ -882,35 +882,35 @@ test("should not split unsplittable element when applying color (3)", async () =
 test("should be able to apply color on icon along with text", async () => {
     await testEditor({
         contentBefore:
-            '<p>a[bc\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeffde]f</p>',
+            '<p>a[bc\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeffde]f</p>',
         stepFunction: setColor("rgb(255, 0, 0)", "color"),
         contentAfterEdit:
-            '<p>a<font style="color: rgb(255, 0, 0);">[bc</font><font style="color: rgb(255, 0, 0);">\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</font><font style="color: rgb(255, 0, 0);">de]</font>f</p>',
+            '<p>a<font style="color: rgb(255, 0, 0);">[bc</font><font style="color: rgb(255, 0, 0);">\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</font><font style="color: rgb(255, 0, 0);">de]</font>f</p>',
         contentAfter:
-            '<p>a<font style="color: rgb(255, 0, 0);">[bc<span class="fa fa-glass"></span>de]</font>f</p>',
+            '<p>a<font style="color: rgb(255, 0, 0);">[bc<span class="oi" data-icon="local_bar"></span>de]</font>f</p>',
     });
 });
 
 test("should be able to change color of an icon", async () => {
     await testEditor({
         contentBefore:
-            '<p><font style="color: rgb(255, 0, 0);">\ufeff<span class="fa fa-glass" contenteditable="false">[]\u200b</span>\ufeff</font></p>',
+            '<p><font style="color: rgb(255, 0, 0);">\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">[]\u200b</span>\ufeff</font></p>',
         stepFunction: setColor("rgb(255, 255, 0)", "color"),
         contentAfterEdit:
-            '<p>[<font style="color: rgb(255, 255, 0);">\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</font>]</p>',
+            '<p>[<font style="color: rgb(255, 255, 0);">\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</font>]</p>',
         contentAfter:
-            '<p>[<font style="color: rgb(255, 255, 0);"><span class="fa fa-glass"></span></font>]</p>',
+            '<p>[<font style="color: rgb(255, 255, 0);"><span class="oi" data-icon="local_bar"></span></font>]</p>',
     });
 });
 
 test("should be able to remove color of an icon", async () => {
     await testEditor({
         contentBefore:
-            '<p><font style="color: rgb(255, 0, 0);">\ufeff<span class="fa fa-glass" contenteditable="false">[]\u200b</span>\ufeff</font></p>',
+            '<p><font style="color: rgb(255, 0, 0);">\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">[]\u200b</span>\ufeff</font></p>',
         stepFunction: setColor("", "color"),
         contentAfterEdit:
-            '<p>[\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff]</p>',
-        contentAfter: '<p>[<span class="fa fa-glass"></span>]</p>',
+            '<p>[\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff]</p>',
+        contentAfter: '<p>[<span class="oi" data-icon="local_bar"></span>]</p>',
     });
 });
 
@@ -919,18 +919,18 @@ test("doesn't change the color of the whole section when there's an icon next to
         contentBefore: `
         <section style="color: rgb(255, 0, 0);">
             <p>a[bc]d</p>
-            <span class="fa fa-glass" contenteditable="false">\u200b</span>
+            <span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>
         </section>`,
         stepFunction: setColor("rgb(0, 0, 255)", "color"),
         contentAfterEdit: `
         <p data-selection-placeholder=""><br></p><section style="color: rgb(255, 0, 0);">
             <p>a<font style="color: rgb(0, 0, 255);">[bc]</font>d</p>
-            <span class="fa fa-glass" contenteditable="false">\u200b</span>
+            <span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>
         </section><p data-selection-placeholder=""><br></p>`,
         contentAfter: `
         <section style="color: rgb(255, 0, 0);">
             <p>a<font style="color: rgb(0, 0, 255);">[bc]</font>d</p>
-            <span class="fa fa-glass"></span>
+            <span class="oi" data-icon="local_bar"></span>
         </section>`,
     });
 });
diff --git a/addons/html_editor/static/tests/color_selector.test.js b/addons/html_editor/static/tests/color_selector.test.js
index 9b74b32d3fecde..93a74858d533b6 100644
--- a/addons/html_editor/static/tests/color_selector.test.js
+++ b/addons/html_editor/static/tests/color_selector.test.js
@@ -75,7 +75,7 @@ test("should add opacity to custom background colors but not to theme colors", a
         `<p><font style="background-color: rgba(255, 0, 0, 0.6);">[test]</font></p>`
     );
     // Verify paintbrush border bottom color has no opacity.
-    expect("i.fa-paint-brush").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
+    expect("i[data-icon='design_services']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
 
     await contains(".o-select-color-background").click();
     expect(".o_font_color_selector").toHaveCount(1);
@@ -91,7 +91,7 @@ test("should add opacity to custom background colors but not to theme colors", a
 });
 
 test("default opacity should get applied when applying background color to icon", async () => {
-    const { el } = await setupEditor('<p>[ab<span class="fa fa-glass"></span>cd]</p>');
+    const { el } = await setupEditor('<p>[ab<span class="oi" data-icon="local_bar"></span>cd]</p>');
 
     await expandToolbar();
     expect(".o_font_color_selector").toHaveCount(0);
@@ -105,7 +105,7 @@ test("default opacity should get applied when applying background color to icon"
     await expectElementCount(".o-we-toolbar", 1);
     expect(".o_font_color_selector").toHaveCount(0); // selector closed
     expect(getContent(el)).toBe(
-        `<p><font style="background-color: rgba(255, 0, 0, 0.6);">[ab</font><font style="background-color: rgba(255, 0, 0, 0.6);">\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</font><font style="background-color: rgba(255, 0, 0, 0.6);">cd]</font></p>`
+        `<p><font style="background-color: rgba(255, 0, 0, 0.6);">[ab</font><font style="background-color: rgba(255, 0, 0, 0.6);">\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</font><font style="background-color: rgba(255, 0, 0, 0.6);">cd]</font></p>`
     );
 });
 
@@ -145,7 +145,7 @@ test("can render and apply gradient color", async () => {
         "button[data-color='linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%)']"
     );
     await animationFrame();
-    expect("i.fa-font").toHaveStyle({
+    expect("i[data-icon='text_fields']").toHaveStyle({
         borderImage:
             "linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%) 1 / 1 / 0 stretch",
     });
@@ -378,7 +378,7 @@ test("Can reset a color", async () => {
     expect(".tested").not.toHaveInnerHTML("test");
     await click(".o-we-toolbar .o-select-color-foreground");
     await animationFrame();
-    await click("button.fa-trash");
+    await click("button[data-icon='delete'].oi-filled");
     await animationFrame();
     expect("font[style='color: rgb(255, 0, 0);']").toHaveCount(0);
     expect(".tested").toHaveInnerHTML("test");
@@ -398,17 +398,17 @@ test("selected text color is shown in the toolbar and update when hovering", asy
     await expandToolbar();
     expect(".o_font_color_selector").toHaveCount(0);
     await animationFrame();
-    expect("i.fa-font").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
+    expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
     await click(".o-we-toolbar .o-select-color-foreground");
     await animationFrame();
     // Hover a color
     await hover("button[data-color='#FF00FF']");
     await animationFrame();
-    expect("i.fa-font").toHaveStyle({ borderBottomColor: "rgb(255, 0, 255)" });
+    expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 255)" });
     // Hover out
     await hover(".o-we-toolbar .o-select-color-foreground");
     await animationFrame();
-    expect("i.fa-font").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
+    expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
 });
 
 test("selected text color is shown in the toolbar and update when clicking", async () => {
@@ -421,12 +421,12 @@ test("selected text color is shown in the toolbar and update when clicking", asy
     await expandToolbar();
     expect(".o_font_color_selector").toHaveCount(0);
     await animationFrame();
-    expect("i.fa-font").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
+    expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
     await click(".o-we-toolbar .o-select-color-foreground");
     await animationFrame();
     await click("button[data-color='#FF00FF']");
     await animationFrame();
-    expect("i.fa-font").toHaveStyle({ borderBottomColor: "rgb(255, 0, 255)" });
+    expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 255)" });
 });
 test("selected text color is not shown in the toolbar after removeFormat", async () => {
     const defaultTextColor = "rgb(1, 10, 100)";
@@ -440,14 +440,14 @@ test("selected text color is not shown in the toolbar after removeFormat", async
 
     await expandToolbar();
     expect(".o_font_color_selector").toHaveCount(0);
-    expect("i.fa-font").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
-    await click(".btn .fa-eraser");
+    expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
+    await click(".btn [data-icon='ink_eraser']");
     await animationFrame();
     expect(getContent(el)).toBe(`<p>
             <font style="color: rgb(255, 0, 0);">t</font>[es]<font style="color: rgb(255, 0, 0);">t</font>
         </p>`);
     await animationFrame();
-    expect("i.fa-font").toHaveStyle({ borderBottomColor: defaultTextColor });
+    expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: defaultTextColor });
 });
 
 test("selected color is shown and updates when selection change", async () => {
@@ -457,15 +457,15 @@ test("selected color is shown and updates when selection change", async () => {
     await expandToolbar();
     expect(".o_font_color_selector").toHaveCount(0);
     await animationFrame();
-    expect("i.fa-font").toHaveStyle({ borderBottomColor: "rgb(150, 255, 0)" });
+    expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: "rgb(150, 255, 0)" });
     setSelection({
         anchorNode: el.firstChild,
         anchorOffset: 0,
         focusNode: el.firstChild,
         focusOffset: 1,
     });
-    await waitUntil(() => queryOne("i.fa-font").style.borderBottomColor === "rgb(255, 156, 0)");
-    expect("i.fa-font").toHaveStyle({ borderBottomColor: "rgb(255, 156, 0)" });
+    await waitUntil(() => queryOne("i[data-icon='text_fields']").style.borderBottomColor === "rgb(255, 156, 0)");
+    expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: "rgb(255, 156, 0)" });
 });
 
 test("selected background color is shown in the toolbar and update when clicking", async () => {
@@ -477,12 +477,12 @@ test("selected background color is shown in the toolbar and update when clicking
 
     await expandToolbar();
     await animationFrame();
-    expect("i.fa-paint-brush").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
+    expect("i[data-icon='design_services']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
     await click(".o-select-color-background");
     await animationFrame();
     await click("button[data-color='#FF00FF']");
     await animationFrame();
-    expect("i.fa-paint-brush").toHaveStyle({ borderBottomColor: "rgb(255, 0, 255)" });
+    expect("i[data-icon='design_services']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 255)" });
 });
 
 test("clicking on button color parent does not crash", async () => {
@@ -685,7 +685,7 @@ test("solid tab color navigation using keys", async () => {
     await press("Tab");
     expect('.o_font_color_selector button:contains("Gradient")').toBeFocused();
     await press("Tab");
-    expect(".o_font_color_selector button.fa-trash").toBeFocused();
+    expect(".o_font_color_selector button[data-icon='delete'].oi-filled").toBeFocused();
     await press("Tab");
     expect('.o_font_color_selector button[data-color="o-color-1"]').toBeFocused();
     await press("ArrowDown");
@@ -1116,7 +1116,7 @@ describe("color preview", () => {
 
         await expandToolbar();
         await animationFrame();
-        expect("i.fa-font").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
+        expect("i[data-icon='text_fields']").toHaveStyle({ borderBottomColor: "rgb(255, 0, 0)" });
         await click(".o-select-color-foreground");
         await animationFrame();
         await press("Tab"); // Tab to Custom
@@ -1438,10 +1438,10 @@ describe("color preview", () => {
 
 test("Should not close the color picker on icon color change", async () => {
     const { el } = await setupEditor(
-        `<p><span class="fa fa-glass" contenteditable="false"></span></p>`
+        `<p><span class="oi" data-icon="local_bar" contenteditable="false"></span></p>`
     );
     await animationFrame();
-    const icon = el.querySelector(".fa");
+    const icon = el.querySelector(".oi");
     setSelection({
         anchorNode: icon.previousSibling,
         anchorOffset: 1,
diff --git a/addons/html_editor/static/tests/content_editable.test.js b/addons/html_editor/static/tests/content_editable.test.js
index cf0922829458ae..470a49c55380fa 100644
--- a/addons/html_editor/static/tests/content_editable.test.js
+++ b/addons/html_editor/static/tests/content_editable.test.js
@@ -15,7 +15,7 @@ test("set o_editable_media class on contenteditable false media elements", async
     const Plugins = [...MAIN_PLUGINS, TestPlugin];
     await setupEditor(
         `
-        <div class="wrapper" contenteditable="false"><i class="fa fa-shopping-cart fa-stack"></i></div>`,
+        <div class="wrapper" contenteditable="false"><i class="oi oi-stack" data-icon="shopping_cart"></i></div>`,
         {
             config: { Plugins },
         }
diff --git a/addons/html_editor/static/tests/data-oe/protected.test.js b/addons/html_editor/static/tests/data-oe/protected.test.js
index d0234c22ca61e4..62d72b50ee6257 100644
--- a/addons/html_editor/static/tests/data-oe/protected.test.js
+++ b/addons/html_editor/static/tests/data-oe/protected.test.js
@@ -95,23 +95,23 @@ test("should not normalize protected elements children (true)", async () => {
     await testEditor({
         contentBefore: unformat(`
                 <div>
-                    <p><i class="fa"></i></p>
+                    <p><i class="oi"></i></p>
                     <ul><li>abc<p><br></p></li></ul>
                 </div>
                 <div data-oe-protected="true">
-                    <p><i class="fa"></i></p>
+                    <p><i class="oi"></i></p>
                     <ul><li>abc<p><br></p></li></ul>
                 </div>
                 `),
         contentAfterEdit: unformat(`
                 <p data-selection-placeholder=""><br></p>
                 <div>
-                    <p>\ufeff<i class="fa" contenteditable="false">\u200B</i>\ufeff</p>
+                    <p>\ufeff<i class="oi" contenteditable="false">\u200B</i>\ufeff</p>
                     <ul><li><p>abc</p><p><br></p></li></ul>
                 </div>
                 <p data-selection-placeholder=""><br></p>
                 <div data-oe-protected="true" contenteditable="false">
-                    <p><i class="fa"></i></p>
+                    <p><i class="oi"></i></p>
                     <ul><li>abc<p><br></p></li></ul>
                 </div>
                 <p data-selection-placeholder=""><br></p>
@@ -137,10 +137,10 @@ test("should normalize unprotected elements children (false)", async () => {
     await testEditor({
         contentBefore: unformat(`
                 <div data-oe-protected="true">
-                    <p><i class="fa"></i></p>
+                    <p><i class="oi"></i></p>
                     <ul><li>abc<p><br></p></li></ul>
                     <div data-oe-protected="false">
-                        <p><i class="fa"></i></p>
+                        <p><i class="oi"></i></p>
                         <ul><li>abc<p><br></p></li></ul>
                     </div>
                 </div>
@@ -148,10 +148,10 @@ test("should normalize unprotected elements children (false)", async () => {
         contentAfterEdit: unformat(
             `<p data-selection-placeholder=""><br></p>
             <div data-oe-protected="true" contenteditable="false">
-                    <p><i class="fa"></i></p>
+                    <p><i class="oi"></i></p>
                     <ul><li>abc<p><br></p></li></ul>
                     <div data-oe-protected="false" contenteditable="true">
-                        <p>\ufeff<i class="fa" contenteditable="false">\u200B</i>\ufeff</p>
+                        <p>\ufeff<i class="oi" contenteditable="false">\u200B</i>\ufeff</p>
                         <ul><li><p>abc</p><p><br></p></li></ul>
                     </div>
                 </div>
diff --git a/addons/html_editor/static/tests/delete/backward.test.js b/addons/html_editor/static/tests/delete/backward.test.js
index 7a37dfde10aef8..c21d9620198504 100644
--- a/addons/html_editor/static/tests/delete/backward.test.js
+++ b/addons/html_editor/static/tests/delete/backward.test.js
@@ -408,7 +408,7 @@ describe("Selection collapsed", () => {
 
         test("should remove a fontawesome", async () => {
             await testEditor({
-                contentBefore: `<div><p>abc<span class="fa"></span>[]def</p></div>`,
+                contentBefore: `<div><p>abc<span class="oi"></span>[]def</p></div>`,
                 stepFunction: async (editor) => {
                     deleteBackward(editor);
                 },
diff --git a/addons/html_editor/static/tests/embedded_components_plugins/toggle_block.test.js b/addons/html_editor/static/tests/embedded_components_plugins/toggle_block.test.js
index 431da65fbba7b4..42181e8aa45396 100644
--- a/addons/html_editor/static/tests/embedded_components_plugins/toggle_block.test.js
+++ b/addons/html_editor/static/tests/embedded_components_plugins/toggle_block.test.js
@@ -78,7 +78,7 @@ describe("deleteBackward applied to toggle", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" data-embedded-props='{ "toggleBlockId": "1" }' contenteditable="false">
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-down"></i>
+                            <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -121,7 +121,7 @@ describe("deleteBackward applied to toggle", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" data-embedded-props='{ "toggleBlockId": "1" }' contenteditable="false">
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-right"></i>
+                            <i class="oi align-self-center" data-icon="arrow_right"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -239,7 +239,7 @@ describe("deleteForward applied to toggle", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" data-embedded-props='{ "toggleBlockId": "1" }' contenteditable="false">
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-right"></i>
+                            <i class="oi align-self-center" data-icon="arrow_right"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -313,7 +313,7 @@ describe("deleteForward applied to toggle", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" data-embedded-props='{ "toggleBlockId": "1" }' contenteditable="false">
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-down"></i>
+                            <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -360,7 +360,7 @@ describe("deleteForward applied to toggle", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" data-embedded-props='{ "toggleBlockId": "1" }' contenteditable="false">
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-right"></i>
+                            <i class="oi align-self-center" data-icon="arrow_right"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -410,7 +410,7 @@ describe("deleteForward applied to toggle", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" data-embedded-props='{ "toggleBlockId": "1" }' contenteditable="false">
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-down"></i>
+                            <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -462,7 +462,7 @@ describe("Enter applied to toggle title", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{"toggleBlockId":"2"}'>
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-right"></i>
+                            <i class="oi align-self-center" data-icon="arrow_right"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -479,7 +479,7 @@ describe("Enter applied to toggle title", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{ "toggleBlockId": "1" }'>
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-down"></i>
+                            <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -527,7 +527,7 @@ describe("Enter applied to toggle title", () => {
             <div data-embedded="toggleBlock" data-oe-protected="true" data-embedded-props='{ "toggleBlockId": "1" }' contenteditable="false">
                 <div class="d-flex flex-row align-items-center">
                     <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                        <i class="fa align-self-center fa-caret-right"></i>
+                        <i class="oi align-self-center" data-icon="arrow_right"></i>
                     </button>
                     <div class="flex-fill ms-1">
                         <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -544,7 +544,7 @@ describe("Enter applied to toggle title", () => {
             <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{"toggleBlockId":"2"}'>
                 <div class="d-flex flex-row align-items-center">
                     <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                        <i class="fa align-self-center fa-caret-right"></i>
+                        <i class="oi align-self-center" data-icon="arrow_right"></i>
                     </button>
                     <div class="flex-fill ms-1">
                         <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -586,7 +586,7 @@ describe("Enter applied to toggle title", () => {
             <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{ "toggleBlockId": "1" }'>
                 <div class="d-flex flex-row align-items-center">
                     <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                        <i class="fa align-self-center fa-caret-down"></i>
+                        <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                     </button>
                     <div class="flex-fill ms-1">
                         <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -666,7 +666,7 @@ describe("Tab applied to toggle title", () => {
             <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{ "toggleBlockId": "1" }'>
                 <div class="d-flex flex-row align-items-center">
                     <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                        <i class="fa align-self-center fa-caret-down"></i>
+                        <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                     </button>
                     <div class="flex-fill ms-1">
                         <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -679,7 +679,7 @@ describe("Tab applied to toggle title", () => {
                         <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{ "toggleBlockId": "2" }'>
                             <div class="d-flex flex-row align-items-center">
                                 <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                                    <i class="fa align-self-center fa-caret-right"></i>
+                                    <i class="oi align-self-center" data-icon="arrow_right"></i>
                                 </button>
                                 <div class="flex-fill ms-1">
                                     <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -733,7 +733,7 @@ describe("Tab applied to toggle title", () => {
             <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{ "toggleBlockId": "1" }'>
                 <div class="d-flex flex-row align-items-center">
                     <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                        <i class="fa align-self-center fa-caret-down"></i>
+                        <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                     </button>
                     <div class="flex-fill ms-1">
                         <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -746,7 +746,7 @@ describe("Tab applied to toggle title", () => {
                         <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{ "toggleBlockId": "2" }'>
                             <div class="d-flex flex-row align-items-center">
                                 <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                                    <i class="fa align-self-center fa-caret-down"></i>
+                                    <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                                 </button>
                                 <div class="flex-fill ms-1">
                                     <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -802,7 +802,7 @@ describe("Shift+Tab applied to toggle title", () => {
             <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{ "toggleBlockId": "1" }'>
                 <div class="d-flex flex-row align-items-center">
                     <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                        <i class="fa align-self-center fa-caret-down"></i>
+                        <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                     </button>
                     <div class="flex-fill ms-1">
                         <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -819,7 +819,7 @@ describe("Shift+Tab applied to toggle title", () => {
             <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{ "toggleBlockId": "2" }'>
                 <div class="d-flex flex-row align-items-center">
                     <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                        <i class="fa align-self-center fa-caret-down"></i>
+                        <i class="oi align-self-center" data-icon="arrow_drop_down"></i>
                     </button>
                     <div class="flex-fill ms-1">
                         <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -944,7 +944,7 @@ describe("Insert (paste, drop) inside toggle title", () => {
             unformat(`
                 <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{ "toggleBlockId": "1" }'>
                     <div class="d-flex flex-row align-items-center">
-                        <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button"><i class="fa align-self-center fa-caret-right"></i></button>
+                        <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button"><i class="oi align-self-center" data-icon="arrow_right"></i></button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
                                 <div class="o-paragraph">HelloNew</div>
@@ -1024,7 +1024,7 @@ describe("Toggle block: Switch Direction", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" data-embedded-props='{ "toggleBlockId": "1" }' contenteditable="false" dir="rtl">
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-right"></i>
+                            <i class="oi align-self-center" data-icon="arrow_right"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -1073,7 +1073,7 @@ describe("Toggle block: Switch Direction", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" data-embedded-props='{ "toggleBlockId": "1" }' contenteditable="false" dir="rtl">
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-right"></i>
+                            <i class="oi align-self-center" data-icon="arrow_right"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
@@ -1090,7 +1090,7 @@ describe("Toggle block: Switch Direction", () => {
                 <div data-embedded="toggleBlock" data-oe-protected="true" contenteditable="false" data-embedded-props='{"toggleBlockId":"2"}' dir="rtl">
                     <div class="d-flex flex-row align-items-center">
                         <button class="btn p-0 border-0 align-items-center justify-content-center btn-light" type="button">
-                            <i class="fa align-self-center fa-caret-right"></i>
+                            <i class="oi align-self-center" data-icon="arrow_right"></i>
                         </button>
                         <div class="flex-fill ms-1">
                             <div data-embedded-editable="title" data-oe-protected="false" contenteditable="true">
diff --git a/addons/html_editor/static/tests/file.test.js b/addons/html_editor/static/tests/file.test.js
index 7e8ec61e81ee2f..5ff3151ab8f4bd 100644
--- a/addons/html_editor/static/tests/file.test.js
+++ b/addons/html_editor/static/tests/file.test.js
@@ -61,7 +61,7 @@ describe("file command", () => {
         expect(fileCard).toHaveStyle({ display: "inline-block" });
         expect(fileCard.firstElementChild).toHaveClass(["alert", "alert-info"]);
         // No download button in file card.
-        expect(".o_file_box .fa-download").toHaveCount(0);
+        expect(".o_file_box [data-icon='download']").toHaveCount(0);
     });
 
     describe("static file box interactions", () => {
@@ -322,7 +322,7 @@ describe("powerbutton", () => {
         const { editor } = await setupEditor("<p>[]<br></p>");
         const mockedUpload = patchUpload(editor);
         // Click on the upload powerbutton.
-        await click(".power_button.fa-upload");
+        await click(".power_button[data-icon='upload']");
         await animationFrame();
         // Check that there's no media dialog.
         expect(".o_select_media_dialog").toHaveCount(0);
@@ -335,7 +335,7 @@ describe("powerbutton", () => {
         const { editor } = await setupEditor("<p>[]<br></p>", { config: configWithEmbeddedFile });
         const mockedUpload = patchUpload(editor);
         // Click on the upload powerbutton.
-        await click(".power_button.fa-upload");
+        await click(".power_button[data-icon='upload']");
         await animationFrame();
         // Check that there's no media dialog.
         expect(".o_select_media_dialog").toHaveCount(0);
diff --git a/addons/html_editor/static/tests/format/remove_format.test.js b/addons/html_editor/static/tests/format/remove_format.test.js
index dc873c02375644..72350ca56a7905 100644
--- a/addons/html_editor/static/tests/format/remove_format.test.js
+++ b/addons/html_editor/static/tests/format/remove_format.test.js
@@ -931,7 +931,7 @@ describe("Toolbar", () => {
         expect(getContent(el)).toBe(
             `<p>this <span style="color:red">is</span>[ a ]<span style="color:red">UX</span> test.</p>`
         );
-        await click(".btn .fa-eraser");
+        await click(".btn [data-icon='ink_eraser']");
         expect(getContent(el)).toBe(
             `<p>this <span style="color:red">is</span>[ a ]<span style="color:red">UX</span> test.</p>`
         );
diff --git a/addons/html_editor/static/tests/html_field.test.js b/addons/html_editor/static/tests/html_field.test.js
index 5e9ccb72bffa5b..7f8b14b5d4a9b7 100644
--- a/addons/html_editor/static/tests/html_field.test.js
+++ b/addons/html_editor/static/tests/html_field.test.js
@@ -1243,7 +1243,7 @@ test("should display overlay on video hover and handle video replacement and rem
     await click(".video-overlay button");
     await waitFor(".o-dropdown-item");
     expect(queryAllTexts(".o-dropdown-item")[0]).toBe("Replace");
-    await click(".o-dropdown-item .fa-exchange");
+    await click(".o-dropdown-item [data-icon='swap_horiz']");
     await waitFor("textarea[id='o_video_text']");
 
     // Replace video
@@ -1270,7 +1270,7 @@ test("should display overlay on video hover and handle video replacement and rem
     await click(".video-overlay button");
     await waitFor(".o-dropdown-item");
     expect(queryAllTexts(".o-dropdown-item")[1]).toBe("Remove");
-    await click(".o-dropdown-item .fa-trash");
+    await click(".o-dropdown-item [data-icon='delete'].oi-filled");
     await expectElementCount('div[data-embedded="video"]', 0);
 });
 
@@ -1327,7 +1327,7 @@ test("should preserve vertical video setting when reopening media dialog", async
     await click(".video-overlay button");
     await waitFor(".o-dropdown-item");
     expect(queryAllTexts(".o-dropdown-item")[0]).toBe("Replace");
-    await click(".o-dropdown-item .fa-exchange");
+    await click(".o-dropdown-item [data-icon='swap_horiz']");
 
     // Ensure the vertical setting is still active
     await waitFor(".o_video_dialog_form .o_video_dialog_options label:contains(Vertical) input", {
diff --git a/addons/html_editor/static/tests/icon.test.js b/addons/html_editor/static/tests/icon.test.js
index 5fa3266046d54c..fbdfe21b394517 100644
--- a/addons/html_editor/static/tests/icon.test.js
+++ b/addons/html_editor/static/tests/icon.test.js
@@ -10,9 +10,9 @@ import { execCommand } from "./_helpers/userCommands";
 import { unformat } from "./_helpers/format";
 
 test("icon toolbar is displayed", async () => {
-    const { el } = await setupEditor(`<p><span class="fa fa-glass"></span></p>`);
+    const { el } = await setupEditor(`<p><span class="oi" data-icon="local_bar" ></span></p>`);
     expect(getContent(el)).toBe(
-        `<p>\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</p>`
+        `<p>\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -24,16 +24,16 @@ test("icon toolbar is displayed", async () => {
         focusOffset: 2,
     });
     expect(getContent(el)).toBe(
-        `<p>\ufeff[<span class="fa fa-glass" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
     await waitFor(".o-we-toolbar");
     expect(".btn-group[name='icon_size']").toHaveCount(1);
 });
 
 test("icon toolbar is displayed (2)", async () => {
-    const { el } = await setupEditor(`<p>abc<span class="fa fa-glass"></span>def</p>`);
+    const { el } = await setupEditor(`<p>abc<span class="oi" data-icon="local_bar" ></span>def</p>`);
     expect(getContent(el)).toBe(
-        `<p>abc\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeffdef</p>`
+        `<p>abc\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeffdef</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -45,16 +45,16 @@ test("icon toolbar is displayed (2)", async () => {
         focusOffset: 3,
     });
     expect(getContent(el)).toBe(
-        `<p>abc\ufeff[<span class="fa fa-glass" contenteditable="false">\u200b</span>]\ufeffdef</p>`
+        `<p>abc\ufeff[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]\ufeffdef</p>`
     );
     await waitFor(".o-we-toolbar");
     expect(".btn-group[name='icon_size']").toHaveCount(1);
 });
 
 test("icon toolbar is displayed (3)", async () => {
-    const { el } = await setupEditor(`<p>abc<span class="fa fa-glass"></span>def</p>`);
+    const { el } = await setupEditor(`<p>abc<span class="oi" data-icon="local_bar" ></span>def</p>`);
     expect(getContent(el)).toBe(
-        `<p>abc\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeffdef</p>`
+        `<p>abc\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeffdef</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -66,16 +66,16 @@ test("icon toolbar is displayed (3)", async () => {
         focusOffset: 3,
     });
     expect(getContent(el)).toBe(
-        `<p>abc\ufeff[<span class="fa fa-glass" contenteditable="false">\u200b</span>]\ufeffdef</p>`
+        `<p>abc\ufeff[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]\ufeffdef</p>`
     );
     await waitFor(".o-we-toolbar");
     expect(".btn-group[name='icon_size']").toHaveCount(1);
 });
 
 test("icon toolbar is not displayed on rating stars", async () => {
-    const { el } = await setupEditor(`<p><span class="fa fa-glass"></span></p>`);
+    const { el } = await setupEditor(`<p><span class="oi" data-icon="local_bar" ></span></p>`);
     expect(getContent(el)).toBe(
-        `<p>\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</p>`
+        `<p>\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -87,34 +87,34 @@ test("icon toolbar is not displayed on rating stars", async () => {
         focusOffset: 2,
     });
     expect(getContent(el)).toBe(
-        `<p>\ufeff[<span class="fa fa-glass" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
     await waitFor(".o-we-toolbar");
     expect(".btn-group[name='icon_size']").toHaveCount(1);
     setContent(
         el,
-        `<p>\u200B<span contenteditable="false" class="o_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="fa fa-star-o" contenteditable="false">\u200B</i>[<i class="fa fa-star-o" contenteditable="false">\u200B</i></span>]\u200B</p>`
+        `<p>\u200B<span contenteditable="false" class="o_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="oi" data-icon="star" contenteditable="false">\u200B</i>[<i class="oi" data-icon="star" contenteditable="false">\u200B</i></span>]\u200B</p>`
     );
     await waitForNone(".o-we-toolbar .btn-group[name='icon_size']");
     expect(".btn-group[name='icon_size']").toHaveCount(0);
 });
 
 test("toolbar should not be namespaced for icon", async () => {
-    await setupEditor(`<p>a[bc<span class="fa fa-glass"></span>]def</p>`);
+    await setupEditor(`<p>a[bc<span class="oi" data-icon="local_bar" ></span>]def</p>`);
     await waitFor(".o-we-toolbar");
     expect(".btn-group[name='icon_size']").toHaveCount(0);
 });
 
 test("toolbar should not be namespaced for icon (2)", async () => {
-    await setupEditor(`<p>abc[<span class="fa fa-glass"></span>de]f</p>`);
+    await setupEditor(`<p>abc[<span class="oi" data-icon="local_bar" ></span>de]f</p>`);
     await waitFor(".o-we-toolbar");
     expect(".btn-group[name='icon_size']").toHaveCount(0);
 });
 
 test("Can resize an icon", async () => {
-    const { el } = await setupEditor(`<p><span class="fa fa-glass"></span></p>`);
+    const { el } = await setupEditor(`<p><span class="oi" data-icon="local_bar" ></span></p>`);
     expect(getContent(el)).toBe(
-        `<p>\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</p>`
+        `<p>\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -126,29 +126,29 @@ test("Can resize an icon", async () => {
         focusOffset: 2,
     });
     expect(getContent(el)).toBe(
-        `<p>\ufeff[<span class="fa fa-glass" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
     await waitFor(".o-we-toolbar");
-    expect("span.fa-glass").toHaveCount(1);
+    expect("span[data-icon='local_bar']").toHaveCount(1);
     await click("button[name='icon_size_2']");
-    expect("span.fa-glass.fa-2x").toHaveCount(1);
+    expect("span[data-icon='local_bar'].oi-2x").toHaveCount(1);
     await click("button[name='icon_size_3']");
-    expect("span.fa-glass.fa-2x").toHaveCount(0);
-    expect("span.fa-glass.fa-3x").toHaveCount(1);
+    expect("span[data-icon='local_bar'].oi-2x").toHaveCount(0);
+    expect("span[data-icon='local_bar'].oi-3x").toHaveCount(1);
     await click("button[name='icon_size_4']");
-    expect("span.fa-glass.fa-3x").toHaveCount(0);
-    expect("span.fa-glass.fa-4x").toHaveCount(1);
+    expect("span[data-icon='local_bar'].oi-3x").toHaveCount(0);
+    expect("span[data-icon='local_bar'].oi-4x").toHaveCount(1);
     await click("button[name='icon_size_5']");
-    expect("span.fa-glass.fa-4x").toHaveCount(0);
-    expect("span.fa-glass.fa-5x").toHaveCount(1);
+    expect("span[data-icon='local_bar'].oi-4x").toHaveCount(0);
+    expect("span[data-icon='local_bar'].oi-5x").toHaveCount(1);
     await click("button[name='icon_size_1']");
-    expect("span.fa-glass.fa-5x").toHaveCount(0);
+    expect("span[data-icon='local_bar'].oi-5x").toHaveCount(0);
 });
 
 test("Can spin an icon", async () => {
-    const { el } = await setupEditor(`<p><span class="fa fa-glass"></span></p>`);
+    const { el } = await setupEditor(`<p><span class="oi" data-icon="local_bar" ></span></p>`);
     expect(getContent(el)).toBe(
-        `<p>\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</p>`
+        `<p>\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -160,16 +160,16 @@ test("Can spin an icon", async () => {
         focusOffset: 2,
     });
     expect(getContent(el)).toBe(
-        `<p>\ufeff[<span class="fa fa-glass" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
     await waitFor(".o-we-toolbar");
-    expect("span.fa-glass").toHaveCount(1);
+    expect("span[data-icon='local_bar']").toHaveCount(1);
     await click("button[name='icon_spin']");
-    expect("span.fa-glass").toHaveClass("fa-spin");
+    expect("span[data-icon='local_bar']").toHaveClass("oi-spin");
 });
 
 test("Can set icon color", async () => {
-    const { el } = await setupEditor(`<p><span class="fa fa-glass">[]</span></p>`);
+    const { el } = await setupEditor(`<p><span class="oi" data-icon="local_bar" >[]</span></p>`);
     await waitFor(".o-we-toolbar");
     expect(".o_font_color_selector").toHaveCount(0);
     await click(".o-select-color-foreground");
@@ -178,14 +178,14 @@ test("Can set icon color", async () => {
     colorButton.click();
     await expectElementCount(".o_font_color_selector", 0); // selector closed
     expect(getContent(el)).toBe(
-        `<p>[<font style="color: rgb(107, 173, 222);">\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</font>]</p>`
+        `<p>[<font style="color: rgb(107, 173, 222);">\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</font>]</p>`
     );
 });
 
 test("Can undo to 1x size after applying 2x size", async () => {
-    const { el, editor } = await setupEditor(`<p><span class="fa fa-glass"></span></p>`);
+    const { el, editor } = await setupEditor(`<p><span class="oi" data-icon="local_bar" ></span></p>`);
     expect(getContent(el)).toBe(
-        `<p>\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</p>`
+        `<p>\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -197,21 +197,21 @@ test("Can undo to 1x size after applying 2x size", async () => {
         focusOffset: 2,
     });
     expect(getContent(el)).toBe(
-        `<p>\ufeff[<span class="fa fa-glass" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
     await waitFor(".o-we-toolbar");
-    expect("span.fa-glass").toHaveCount(1);
+    expect("span[data-icon='local_bar']").toHaveCount(1);
     await click("button[name='icon_size_2']");
-    expect("span.fa-glass.fa-2x").toHaveCount(1);
+    expect("span[data-icon='local_bar'].oi-2x").toHaveCount(1);
     undo(editor);
-    expect("span.fa-glass").toHaveCount(1);
-    expect("span.fa-glass.fa-2x").toHaveCount(0);
+    expect("span[data-icon='local_bar']").toHaveCount(1);
+    expect("span[data-icon='local_bar'].oi-2x").toHaveCount(0);
 });
 
 test("Can replace icon using toolbar", async () => {
-    const { el, editor } = await setupEditor(`<p><span class="fa fa-heart"></span></p>`);
+    const { el, editor } = await setupEditor(`<p><span class="oi oi-filled" data-icon="favorite"></span></p>`);
     expect(getContent(el)).toBe(
-        `<p>\ufeff<span class="fa fa-heart" contenteditable="false">\u200b</span>\ufeff</p>`
+        `<p>\ufeff<span class="oi oi-filled" data-icon="favorite" contenteditable="false">\u200b</span>\ufeff</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -223,7 +223,7 @@ test("Can replace icon using toolbar", async () => {
         focusOffset: 2,
     });
     expect(getContent(el)).toBe(
-        `<p>\ufeff[<span class="fa fa-heart" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi oi-filled" data-icon="favorite" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
     await waitFor(".o-we-toolbar");
     await contains("button[name='icon_replace']").click();
@@ -231,23 +231,23 @@ test("Can replace icon using toolbar", async () => {
     expect("main.modal-body").toHaveCount(1);
     expect("main.modal-body button.nav-link.active").toHaveText("Icons");
     // Corresponding icon should be highlighted in dialog
-    expect("main.modal-body span.fa-heart.o_we_attachment_selected").toHaveCount(1);
+    expect("main.modal-body span[data-icon='favorite'].o_we_attachment_selected").toHaveCount(1);
 
-    await contains("main.modal-body span.fa-search").click();
+    await contains("main.modal-body span[data-icon='search']").click();
     await animationFrame();
     expect("main.modal-body").toHaveCount(0);
-    expect("span.fa-search").toHaveCount(1); // Replace icon
-    expect("span.fa-heart").toHaveCount(0);
+    expect("span[data-icon='search']").toHaveCount(1); // Replace icon
+    expect("span[data-icon='favorite']").toHaveCount(0);
 
     undo(editor);
-    expect("span.fa-search").toHaveCount(0);
-    expect("span.fa-heart").toHaveCount(1);
+    expect("span[data-icon='search']").toHaveCount(0);
+    expect("span[data-icon='favorite']").toHaveCount(1);
 });
 
 test("Styles should be preserved when replacing icon", async () => {
-    const { el } = await setupEditor(`<p><span class="fa fa-heart fa-3x"></span></p>`);
+    const { el } = await setupEditor(`<p><span class="oi oi-3x" data-icon="favorite"></span></p>`);
     expect(getContent(el)).toBe(
-        `<p>\ufeff<span class="fa fa-heart fa-3x" contenteditable="false">\u200b</span>\ufeff</p>`
+        `<p>\ufeff<span class="oi oi-3x" data-icon="favorite" contenteditable="false">\u200b</span>\ufeff</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -259,20 +259,20 @@ test("Styles should be preserved when replacing icon", async () => {
         focusOffset: 2,
     });
     expect(getContent(el)).toBe(
-        `<p>\ufeff[<span class="fa fa-heart fa-3x" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi oi-3x" data-icon="favorite" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
     await waitFor(".o-we-toolbar");
     await contains("button[name='icon_replace']").click();
     await animationFrame();
-    await contains("main.modal-body span.fa-search").click();
+    await contains("main.modal-body span[data-icon='search']").click();
     await animationFrame();
-    expect("span.fa-search.fa-3x").toHaveCount(1);
+    expect("span[data-icon='search'].oi-3x").toHaveCount(1);
 });
 
 test("Can replace a odoo icon", async () => {
-    const { editor, el } = await setupEditor(`<p><span class="oi oi-plus"></span></p>`);
+    const { editor, el } = await setupEditor(`<p><span class="oi" data-icon="add"></span></p>`);
     expect(getContent(el)).toBe(
-        `<p>\ufeff<span class="oi oi-plus" contenteditable="false">\u200b</span>\ufeff</p>`
+        `<p>\ufeff<span class="oi" data-icon="add" contenteditable="false">\u200b</span>\ufeff</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -284,14 +284,14 @@ test("Can replace a odoo icon", async () => {
         focusOffset: 2,
     });
     expect(getContent(el)).toBe(
-        `<p>\ufeff[<span class="oi oi-plus" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi" data-icon="add" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
     execCommand(editor, "replaceIcon");
     await animationFrame();
-    await contains("main.modal-body span.fa-search").click();
+    await contains("main.modal-body span[data-icon='search']").click();
     await animationFrame();
-    expect("span.fa.fa-search").toHaveCount(1);
-    expect("span.oi.oi-plus").toHaveCount(0);
+    expect("span.fa[data-icon='search']").toHaveCount(1);
+    expect("span.data-icon='add'").toHaveCount(0);
 });
 
 test("Can replace a font awesome brand icon", async () => {
@@ -313,9 +313,9 @@ test("Can replace a font awesome brand icon", async () => {
     );
     execCommand(editor, "replaceIcon");
     await animationFrame();
-    await contains("main.modal-body span.fa-search").click();
+    await contains("main.modal-body span[data-icon='search']").click();
     await animationFrame();
-    expect("span.fa.fa-search").toHaveCount(1);
+    expect("span.fa[data-icon='search']").toHaveCount(1);
     expect("span.fab.fa-opera").toHaveCount(0);
 });
 
@@ -338,9 +338,9 @@ test("Can replace a font awesome duotone icon", async () => {
     );
     execCommand(editor, "replaceIcon");
     await animationFrame();
-    await contains("main.modal-body span.fa-search").click();
+    await contains("main.modal-body span[data-icon='search']").click();
     await animationFrame();
-    expect("span.fa.fa-search").toHaveCount(1);
+    expect("span.fa[data-icon='search']").toHaveCount(1);
     expect("span.fad.fa-bus-alt").toHaveCount(0);
 });
 
@@ -363,16 +363,16 @@ test("Can replace a font awesome regular icon", async () => {
     );
     execCommand(editor, "replaceIcon");
     await animationFrame();
-    await contains("main.modal-body span.fa-search").click();
+    await contains("main.modal-body span[data-icon='search']").click();
     await animationFrame();
-    expect("span.fa.fa-search").toHaveCount(1);
+    expect("span.fa[data-icon='search']").toHaveCount(1);
     expect("span.far.fa-money-bill-alt").toHaveCount(0);
 });
 
 test("Should be able to undo after adding spin effect to an icon", async () => {
-    const { el, editor } = await setupEditor('<p><span class="fa fa-glass"></span></p>');
+    const { el, editor } = await setupEditor('<p><span class="oi" data-icon="local_bar" ></span></p>');
     expect(getContent(el)).toBe(
-        `<p>\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</p>`
+        `<p>\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</p>`
     );
     // Selection normalization include U+FEFF, moving the cursor outside the
     // icon and triggering the normal toolbar. To prevent this, we exclude
@@ -385,44 +385,44 @@ test("Should be able to undo after adding spin effect to an icon", async () => {
     });
     editor.shared.history.stageSelection();
     expect(getContent(el)).toBe(
-        `<p>\ufeff[<span class="fa fa-glass" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
     await waitFor(".o-we-toolbar");
     expect(".btn-group[name='icon_spin']").toHaveCount(1);
     expect(".btn-group[name='icon_spin']").not.toHaveClass("active");
     await click("button[name='icon_spin']");
     await animationFrame();
-    expect("span.fa-glass.fa-spin").toHaveCount(1);
+    expect("span[data-icon='local_bar'].oi-spin").toHaveCount(1);
     await expectElementCount(".btn-group[name='icon_spin'] button.active", 1);
     undo(editor);
     await animationFrame();
-    expect("span.fa-glass.fa-spin").toHaveCount(0);
+    expect("span[data-icon='local_bar'].oi-spin").toHaveCount(0);
     await expectElementCount(".btn-group[name='icon_spin'].active", 0);
-    expect("span.fa-glass").toHaveCount(1);
-    expect("span.fa-glass.fa-spin").toHaveCount(0);
+    expect("span[data-icon='local_bar']").toHaveCount(1);
+    expect("span[data-icon='local_bar'].oi-spin").toHaveCount(0);
 });
 
 describe("selection", () => {
     test("selection inside icon gets expanded to its outer boundaries", async () => {
-        const { el } = await setupEditor(`<p>abc<span class="fa fa-glass"></span>def</p>`);
-        const icon = el.querySelector("span.fa-glass");
+        const { el } = await setupEditor(`<p>abc<span class="oi" data-icon="local_bar" ></span>def</p>`);
+        const icon = el.querySelector("span[data-icon='local_bar']");
         setSelection({ anchorNode: icon, anchorOffset: 0 });
         await tick();
         expect(getContent(el)).toBe(
-            `<p>abc\ufeff[<span class="fa fa-glass" contenteditable="false">\u200b</span>]\ufeffdef</p>`
+            `<p>abc\ufeff[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]\ufeffdef</p>`
         );
     });
 
     test("selection inside icon gets expanded around it, but not around its contenteditable=false ancestor", async () => {
         const { el } = await setupEditor(
-            `<p contenteditable="false">abc<span class="fa fa-glass"></span>def</p>`
+            `<p contenteditable="false">abc<span class="oi" data-icon="local_bar" ></span>def</p>`
         );
-        const icon = el.querySelector("span.fa-glass");
+        const icon = el.querySelector("span[data-icon='local_bar']");
         setSelection({ anchorNode: icon, anchorOffset: 0 });
         await tick();
         expect(getContent(el)).toBe(
             '<p data-selection-placeholder=""><br></p>' +
-                '<p contenteditable="false">abc[<span class="fa fa-glass" contenteditable="false">\u200b</span>]def</p>' +
+                '<p contenteditable="false">abc[<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>]def</p>' +
                 '<p data-selection-placeholder="" style="margin: -9px 0px 8px;"><br></p>'
         );
     });
@@ -430,15 +430,15 @@ describe("selection", () => {
 
 test("should insert two empty paragraphs when Enter is pressed twice before the icon element", async () => {
     const { el, editor } = await setupEditor(
-        `<p>[]<span class="fa fa-glass" contenteditable="false"></span></p>`
+        `<p>[]<span class="oi" data-icon="local_bar" contenteditable="false"></span></p>`
     );
     splitBlock(editor);
     expect(getContent(el)).toBe(
-        `<p><br></p><p>\ufeff[]<span class="fa fa-glass" contenteditable="false">\u200B</span>\ufeff</p>`
+        `<p><br></p><p>\ufeff[]<span class="oi" data-icon="local_bar" contenteditable="false">\u200B</span>\ufeff</p>`
     );
     splitBlock(editor);
     expect(getContent(el)).toBe(
-        `<p><br></p><p><br></p><p>\ufeff[]<span class="fa fa-glass" contenteditable="false">\u200B</span>\ufeff</p>`
+        `<p><br></p><p><br></p><p>\ufeff[]<span class="oi" data-icon="local_bar" contenteditable="false">\u200B</span>\ufeff</p>`
     );
 });
 
@@ -446,12 +446,12 @@ test("should wrap icons in feff when under list item", async () => {
     await testEditor({
         contentBefore: unformat(`
                 <ul>
-                    <li><span class="fa fa-glass" contenteditable="false"></span></li>
+                    <li><span class="oi" data-icon="local_bar" contenteditable="false"></span></li>
                 </ul>
             `),
         contentBeforeEdit: unformat(`
             <ul>
-                <li>\ufeff<span class="fa fa-glass" contenteditable="false">\u200B</span>\ufeff</li>
+                <li>\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200B</span>\ufeff</li>
             </ul>
         `),
     });
diff --git a/addons/html_editor/static/tests/initialization.test.js b/addons/html_editor/static/tests/initialization.test.js
index 671822864dd7a9..ae075a74d7a18f 100644
--- a/addons/html_editor/static/tests/initialization.test.js
+++ b/addons/html_editor/static/tests/initialization.test.js
@@ -91,10 +91,10 @@ describe("No orphan inline elements compatibility mode", () => {
         });
     });
 
-    test("should transform root .fa", async () => {
+    test("should transform root .oi", async () => {
         await testEditor({
-            contentBefore: '<p>ab</p><i class="fa fa-beer"></i><p>c</p>',
-            contentAfter: '<p>ab</p><div><i class="fa fa-beer"></i></div><p>c</p>',
+            contentBefore: '<p>ab</p><i class="oi" data-icon="sports_bar"></i><p>c</p>',
+            contentAfter: '<p>ab</p><div><i class="oi" data-icon="sports_bar"></i></div><p>c</p>',
         });
     });
 
diff --git a/addons/html_editor/static/tests/insert/html.test.js b/addons/html_editor/static/tests/insert/html.test.js
index d4115a23ea5199..564c09f21c8323 100644
--- a/addons/html_editor/static/tests/insert/html.test.js
+++ b/addons/html_editor/static/tests/insert/html.test.js
@@ -98,13 +98,13 @@ describe("collapsed selection", () => {
                 editor.shared.dom.insert(
                     parseHTML(
                         editor.document,
-                        '<p>unwrapped</p><div><i class="fa fa-circle-o-notch"></i></div><p>culprit</p><p>after</p>'
+                        '<p>unwrapped</p><div><i class="oi" data-icon="autorenew"></i></div><p>culprit</p><p>after</p>'
                     )
                 );
                 editor.shared.history.addStep();
             },
             contentAfter:
-                '<p>contentunwrapped</p><div><i class="fa fa-circle-o-notch"></i></div><p>culprit</p><p>after[]</p>',
+                '<p>contentunwrapped</p><div><i class="oi" data-icon="autorenew"></i></div><p>culprit</p><p>after[]</p>',
         });
     });
 
diff --git a/addons/html_editor/static/tests/keyboard/arrow.test.js b/addons/html_editor/static/tests/keyboard/arrow.test.js
index 0346492f4be64d..d58c75831006dd 100644
--- a/addons/html_editor/static/tests/keyboard/arrow.test.js
+++ b/addons/html_editor/static/tests/keyboard/arrow.test.js
@@ -451,88 +451,88 @@ describe("Around links", () => {
 describe("Around icons", () => {
     test("should correctly move cursor over icons (ArrowRight) (1)", async () => {
         await testEditor({
-            contentBefore: `<p>abc[]<span class="fa fa-music"></span>def</p>`,
-            contentBeforeEdit: `<p>abc[]\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeffdef</p>`,
+            contentBefore: `<p>abc[]<span class="oi" data-icon="music_note"></span>def</p>`,
+            contentBeforeEdit: `<p>abc[]\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeffdef</p>`,
             stepFunction: keyPress("ArrowRight"),
-            contentAfterEdit: `<p>abc\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>[]\ufeffdef</p>`,
-            contentAfter: `<p>abc<span class="fa fa-music"></span>[]def</p>`,
+            contentAfterEdit: `<p>abc\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>[]\ufeffdef</p>`,
+            contentAfter: `<p>abc<span class="oi" data-icon="music_note"></span>[]def</p>`,
         });
     });
 
     test("should correctly move cursor over icons (ArrowRight) (2)", async () => {
         await testEditor({
-            contentBefore: `<p><span class="fa fa-music"></span>[]<span class="fa fa-music"></span></p><p><br></p>`,
-            contentBeforeEdit: `<p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff[]<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
+            contentBefore: `<p><span class="oi" data-icon="music_note"></span>[]<span class="oi" data-icon="music_note"></span></p><p><br></p>`,
+            contentBeforeEdit: `<p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff[]<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
             stepFunction: keyPress("ArrowRight"),
-            contentAfterEdit: `<p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>[]\ufeff</p><p><br></p>`,
-            contentAfter: `<p><span class="fa fa-music"></span><span class="fa fa-music"></span>[]</p><p><br></p>`,
+            contentAfterEdit: `<p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>[]\ufeff</p><p><br></p>`,
+            contentAfter: `<p><span class="oi" data-icon="music_note"></span><span class="oi" data-icon="music_note"></span>[]</p><p><br></p>`,
         });
     });
 
     test("should correctly move cursor over icons (ArrowRight) (3)", async () => {
         await testEditor({
-            contentBefore: `<p><span class="fa fa-music"></span>[]<br><span class="fa fa-music"></span></p><p><br></p>`,
-            contentBeforeEdit: `<p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff[]<br>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
+            contentBefore: `<p><span class="oi" data-icon="music_note"></span>[]<br><span class="oi" data-icon="music_note"></span></p><p><br></p>`,
+            contentBeforeEdit: `<p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff[]<br>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
             stepFunction: keyPress("ArrowRight"),
-            contentAfterEdit: `<p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff<br>\ufeff[]<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
-            contentAfter: `<p><span class="fa fa-music"></span><br>[]<span class="fa fa-music"></span></p><p><br></p>`,
+            contentAfterEdit: `<p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff<br>\ufeff[]<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
+            contentAfter: `<p><span class="oi" data-icon="music_note"></span><br>[]<span class="oi" data-icon="music_note"></span></p><p><br></p>`,
         });
     });
     test("should correctly move cursor over icons (ArrowLeft) (1)", async () => {
         await testEditor({
-            contentBefore: `<p>abc<span class="fa fa-music"></span>[]def</p>`,
-            contentBeforeEdit: `<p>abc\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff[]def</p>`,
+            contentBefore: `<p>abc<span class="oi" data-icon="music_note"></span>[]def</p>`,
+            contentBeforeEdit: `<p>abc\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff[]def</p>`,
             stepFunction: keyPress("ArrowLeft"),
-            contentAfterEdit: `<p>abc\ufeff[]<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeffdef</p>`,
-            contentAfter: `<p>abc[]<span class="fa fa-music"></span>def</p>`,
+            contentAfterEdit: `<p>abc\ufeff[]<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeffdef</p>`,
+            contentAfter: `<p>abc[]<span class="oi" data-icon="music_note"></span>def</p>`,
         });
     });
 
     test("should correctly move cursor over icons (ArrowLeft) (2)", async () => {
         await testEditor({
-            contentBefore: `<p><span class="fa fa-music"></span><br><span class="fa fa-music"></span>[]</p>`,
-            contentBeforeEdit: `<p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff<br>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff[]</p>`,
+            contentBefore: `<p><span class="oi" data-icon="music_note"></span><br><span class="oi" data-icon="music_note"></span>[]</p>`,
+            contentBeforeEdit: `<p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff<br>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff[]</p>`,
             stepFunction: keyPress("ArrowLeft"),
-            contentAfterEdit: `<p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff<br>\ufeff[]<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p>`,
-            contentAfter: `<p><span class="fa fa-music"></span><br>[]<span class="fa fa-music"></span></p>`,
+            contentAfterEdit: `<p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff<br>\ufeff[]<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p>`,
+            contentAfter: `<p><span class="oi" data-icon="music_note"></span><br>[]<span class="oi" data-icon="music_note"></span></p>`,
         });
     });
     test("should correctly move cursor over icons (ArrowUp) (1)", async () => {
         await testEditor({
-            contentBefore: `<p><br></p><p><span class="fa fa-music"></span></p><p>[]<br></p>`,
-            contentBeforeEdit: `<p><br></p><p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p><p o-we-hint-text='Type "/" for commands' class="o-we-hint">[]<br></p>`,
+            contentBefore: `<p><br></p><p><span class="oi" data-icon="music_note"></span></p><p>[]<br></p>`,
+            contentBeforeEdit: `<p><br></p><p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p><p o-we-hint-text='Type "/" for commands' class="o-we-hint">[]<br></p>`,
             stepFunction: keyPress("ArrowUp"),
-            contentAfterEdit: `<p><br></p><p>[]\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
-            contentAfter: `<p><br></p><p>[]<span class="fa fa-music"></span></p><p><br></p>`,
+            contentAfterEdit: `<p><br></p><p>[]\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
+            contentAfter: `<p><br></p><p>[]<span class="oi" data-icon="music_note"></span></p><p><br></p>`,
         });
     });
 
     test("should correctly move cursor over icons (ArrowUp) (2)", async () => {
         await testEditor({
-            contentBefore: `<p><br></p><p><span class="fa fa-music"></span><br>[]<span class="fa fa-music"></span></p>`,
-            contentBeforeEdit: `<p><br></p><p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff<br>\ufeff[]<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p>`,
+            contentBefore: `<p><br></p><p><span class="oi" data-icon="music_note"></span><br>[]<span class="oi" data-icon="music_note"></span></p>`,
+            contentBeforeEdit: `<p><br></p><p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff<br>\ufeff[]<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p>`,
             stepFunction: keyPress("ArrowDown"),
-            contentAfterEdit: `<p><br></p><p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff<br>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff[]</p>`,
-            contentAfter: `<p><br></p><p><span class="fa fa-music"></span><br><span class="fa fa-music"></span>[]</p>`,
+            contentAfterEdit: `<p><br></p><p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff<br>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff[]</p>`,
+            contentAfter: `<p><br></p><p><span class="oi" data-icon="music_note"></span><br><span class="oi" data-icon="music_note"></span>[]</p>`,
         });
     });
     test("should correctly move cursor over icons (ArrowDown) (1)", async () => {
         await testEditor({
-            contentBefore: `<p>[]<br></p><p><span class="fa fa-music"></span></p><p><br></p>`,
-            contentBeforeEdit: `<p o-we-hint-text='Type "/" for commands' class="o-we-hint">[]<br></p><p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
+            contentBefore: `<p>[]<br></p><p><span class="oi" data-icon="music_note"></span></p><p><br></p>`,
+            contentBeforeEdit: `<p o-we-hint-text='Type "/" for commands' class="o-we-hint">[]<br></p><p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
             stepFunction: keyPress("ArrowDown"),
-            contentAfterEdit: `<p><br></p><p>[]\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
-            contentAfter: `<p><br></p><p>[]<span class="fa fa-music"></span></p><p><br></p>`,
+            contentAfterEdit: `<p><br></p><p>[]\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
+            contentAfter: `<p><br></p><p>[]<span class="oi" data-icon="music_note"></span></p><p><br></p>`,
         });
     });
 
     test("should correctly move cursor over icons (ArrowDown) (2)", async () => {
         await testEditor({
-            contentBefore: `<p>[]<span class="fa fa-music"></span><br><span class="fa fa-music"></span></p><p><br></p>`,
-            contentBeforeEdit: `<p>\ufeff[]<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff<br>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
+            contentBefore: `<p>[]<span class="oi" data-icon="music_note"></span><br><span class="oi" data-icon="music_note"></span></p><p><br></p>`,
+            contentBeforeEdit: `<p>\ufeff[]<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff<br>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
             stepFunction: keyPress("ArrowDown"),
-            contentAfterEdit: `<p>\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff<br>[]\ufeff<span class="fa fa-music" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
-            contentAfter: `<p><span class="fa fa-music"></span><br>[]<span class="fa fa-music"></span></p><p><br></p>`,
+            contentAfterEdit: `<p>\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff<br>[]\ufeff<span class="oi" data-icon="music_note" contenteditable="false">\u200b</span>\ufeff</p><p><br></p>`,
+            contentAfter: `<p><span class="oi" data-icon="music_note"></span><br>[]<span class="oi" data-icon="music_note"></span></p><p><br></p>`,
         });
     });
 });
diff --git a/addons/html_editor/static/tests/link/button.test.js b/addons/html_editor/static/tests/link/button.test.js
index 28a45059f12273..dbf6fbe1ecdabf 100644
--- a/addons/html_editor/static/tests/link/button.test.js
+++ b/addons/html_editor/static/tests/link/button.test.js
@@ -192,7 +192,7 @@ describe("Custom button style", () => {
     test("should convert selected text to a button", async () => {
         const { el } = await setupEditor("<p>[Hello]</p>");
 
-        await contains(".o-we-toolbar .fa-link").click();
+        await contains(".o-we-toolbar [data-icon='link']").click();
         await contains(".o-we-linkpopover input.o_we_href_input_link").edit("http://test.test/", {
             confirm: false,
         });
@@ -218,13 +218,13 @@ describe("Custom button style", () => {
     test("should allow target _blank on custom button", async () => {
         const { el } = await setupEditor("<p>[Hello]</p>", allowTargetBlankOpt);
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await contains(".o-we-linkpopover input.o_we_href_input_link").edit("http://test.test/", {
             confirm: false,
         });
-        await click(".o-we-linkpopover .fa-gear");
+        await click(".o-we-linkpopover [data-icon='settings']");
         await contains(".o_advance_option_panel .target-blank-option").click();
-        await click(".o_advance_option_panel .fa-angle-left");
+        await click(".o_advance_option_panel [data-icon='keyboard_arrow_left']");
         await waitFor(".o-we-linkpopover");
 
         await animationFrame();
diff --git a/addons/html_editor/static/tests/link/existing.test.js b/addons/html_editor/static/tests/link/existing.test.js
index b4aec8a146375f..6534e50af8c17a 100644
--- a/addons/html_editor/static/tests/link/existing.test.js
+++ b/addons/html_editor/static/tests/link/existing.test.js
@@ -158,12 +158,12 @@ test("should not remove a document link on save", async () => {
 
 test("should not remove a link containing a pictogram on save", async () => {
     await testEditor({
-        contentBefore: '<p>a<a href="exist"><span class="fa fa-star"></span></a>b</p>',
+        contentBefore: '<p>a<a href="exist"><span class="oi oi-filled" data-icon="star"></span></a>b</p>',
         contentBeforeEdit:
-            '<p>a\ufeff<a href="exist">\ufeff<span class="fa fa-star" contenteditable="false">\u200b</span>\ufeff</a>\ufeffb</p>',
+            '<p>a\ufeff<a href="exist">\ufeff<span class="oi oi-filled" data-icon="star" contenteditable="false">\u200b</span>\ufeff</a>\ufeffb</p>',
         contentAfterEdit:
-            '<p>a\ufeff<a href="exist">\ufeff<span class="fa fa-star" contenteditable="false">\u200b</span>\ufeff</a>\ufeffb</p>',
-        contentAfter: '<p>a<a href="exist"><span class="fa fa-star"></span></a>b</p>',
+            '<p>a\ufeff<a href="exist">\ufeff<span class="oi oi-filled" data-icon="star" contenteditable="false">\u200b</span>\ufeff</a>\ufeffb</p>',
+        contentAfter: '<p>a<a href="exist"><span class="oi oi-filled" data-icon="star"></span></a>b</p>',
     });
 });
 
diff --git a/addons/html_editor/static/tests/link/isolated.test.js b/addons/html_editor/static/tests/link/isolated.test.js
index 141867c9fb8f57..cef48f265822fa 100644
--- a/addons/html_editor/static/tests/link/isolated.test.js
+++ b/addons/html_editor/static/tests/link/isolated.test.js
@@ -337,9 +337,9 @@ test("should zwnbsp-pad inline nav-link", async () => {
 test("should not zwnbsp-pad link with block fontawesome", async () => {
     await testEditor({
         contentBefore:
-            '<p>a<a href="http://test.test/">[]<i style="display: flex;" class="fa fa-star"></i></a>b</p>',
+            '<p>a<a href="http://test.test/">[]<i style="display: flex;" class="oi oi-filled" data-icon="star"></i></a>b</p>',
         contentBeforeEdit:
-            '<p>a<a href="http://test.test/">\ufeff[]<i style="display: flex;" class="fa fa-star" contenteditable="false">\u200b</i>\ufeff</a>b</p>',
+            '<p>a<a href="http://test.test/">\ufeff[]<i style="display: flex;" class="oi oi-filled" data-icon="star" contenteditable="false">\u200b</i>\ufeff</a>b</p>',
     });
 });
 
diff --git a/addons/html_editor/static/tests/link/popover.test.js b/addons/html_editor/static/tests/link/popover.test.js
index d003bafcde0c05..2029b683f42dfe 100644
--- a/addons/html_editor/static/tests/link/popover.test.js
+++ b/addons/html_editor/static/tests/link/popover.test.js
@@ -92,7 +92,7 @@ describe("should open a popover", () => {
                     \ufeff
                     <a href="https://test" class="btn btn-primary">
                         \ufeffHello\ufeff[
-                            <span class="fa fa-glass" contenteditable="false">\u200b</span>
+                            <span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>
                         ]\ufeffWorld\ufeff
                     </a>
                     \ufeff
@@ -121,7 +121,7 @@ describe("popover should not reposition when editing", () => {
     test("when editing the link url, the popover should not reposition", async () => {
         const { el } = await setupEditor("<p>H[ell]o</p>");
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await animationFrame();
         await waitFor(".o-we-linkpopover");
         const popoverEl = queryOne(".o-we-linkpopover").parentElement;
@@ -144,7 +144,7 @@ describe("popover should not reposition when editing", () => {
     test("In iframe, when editing the link url, the popover should not reposition", async () => {
         const { el } = await setupEditor("<p>H[ell]o</p>", { props: { iframe: true } });
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await animationFrame();
         await waitFor(".o-we-linkpopover");
         const popoverEl = queryOne(".o-we-linkpopover").parentElement;
@@ -236,7 +236,7 @@ describe("popover should switch UI depending on editing state", () => {
         await click(".o_we_edit_link");
         await waitFor(".o_we_href_input_link");
         await click(".o_we_href_input_link");
-        await click(".o-we-linkpopover .fa-gear");
+        await click(".o-we-linkpopover [data-icon='settings']");
         await expectElementCount(".o_advance_option_panel", 1);
         expect(".o_advance_option_panel .o_seo_option_row").toHaveCount(4);
     });
@@ -246,10 +246,10 @@ describe("popover should switch UI depending on editing state", () => {
         await click(".o_we_edit_link");
         await waitFor(".o_we_href_input_link");
         await click(".o_we_href_input_link");
-        await click(".o-we-linkpopover .fa-gear");
+        await click(".o-we-linkpopover [data-icon='settings']");
         await expectElementCount(".o_advance_option_panel", 1);
         await contains(".o_seo_option_row:nth-of-type(1) input[type='checkbox']").click();
-        await click(".o_advance_option_panel .fa-angle-left");
+        await click(".o_advance_option_panel [data-icon='keyboard_arrow_left']");
         await waitFor(".o-we-linkpopover");
         await contains(".o_we_apply_link").click();
         expect(cleanLinkArtifacts(getContent(el))).toBe(
@@ -262,12 +262,12 @@ describe("popover should switch UI depending on editing state", () => {
         await click(".o_we_edit_link");
         await waitFor(".o_we_href_input_link");
         await click(".o_we_href_input_link");
-        await click(".o-we-linkpopover .fa-gear");
+        await click(".o-we-linkpopover [data-icon='settings']");
         await expectElementCount(".o_advance_option_panel", 1);
         await contains(".o_seo_option_row:nth-of-type(1) input[type='checkbox']").click();
         await contains(".o_seo_option_row:nth-of-type(2) input[type='checkbox']").click();
         await contains(".o_seo_option_row:nth-of-type(3) input[type='checkbox']").click();
-        await click(".o_advance_option_panel .fa-angle-left");
+        await click(".o_advance_option_panel [data-icon='keyboard_arrow_left']");
         await waitFor(".o-we-linkpopover");
         await contains(".o_we_apply_link").click();
         expect(cleanLinkArtifacts(getContent(el))).toBe(
@@ -276,9 +276,9 @@ describe("popover should switch UI depending on editing state", () => {
         await click(".o_we_edit_link");
         await waitFor(".o_we_href_input_link");
         await click(".o_we_href_input_link");
-        await click(".o-we-linkpopover .fa-gear");
+        await click(".o-we-linkpopover [data-icon='settings']");
         await contains(".o_seo_option_row:nth-of-type(1) input[type='checkbox']").click();
-        await click(".o_advance_option_panel .fa-angle-left");
+        await click(".o_advance_option_panel [data-icon='keyboard_arrow_left']");
         await waitFor(".o-we-linkpopover");
         await contains(".o_we_apply_link").click();
         expect(cleanLinkArtifacts(getContent(el))).toBe(
@@ -291,11 +291,11 @@ describe("popover should switch UI depending on editing state", () => {
         await click(".o_we_edit_link");
         await waitFor(".o_we_href_input_link");
         await click(".o_we_href_input_link");
-        await click(".o-we-linkpopover .fa-gear");
+        await click(".o-we-linkpopover [data-icon='settings']");
         await expectElementCount(".o_advance_option_panel", 1);
         await contains(".o_advance_option_panel .target-blank-option").click();
         await contains(".o_seo_option_row:nth-of-type(5) input[type='checkbox']").click();
-        await click(".o_advance_option_panel .fa-angle-left");
+        await click(".o_advance_option_panel [data-icon='keyboard_arrow_left']");
         await waitFor(".o-we-linkpopover");
         await contains(".o_we_apply_link").click();
         expect(cleanLinkArtifacts(getContent(el))).toBe(
@@ -367,7 +367,7 @@ describe("popover should edit,copy,remove the link", () => {
         // Tab through all focusable elements
         await press("Tab");
         await animationFrame();
-        expect("button:has(i.fa-upload)").toBeFocused();
+        expect("button:has(i[data-icon='upload'])").toBeFocused();
         await press("Tab");
         await animationFrame();
         expect("button[name='link_type']").toBeFocused();
@@ -495,7 +495,7 @@ describe("popover should show link preview", () => {
         await contains(".o-we-linkpopover input.o_we_href_input_link").fill(url);
         await animationFrame();
 
-        expect(".o_we_preview_favicon .fa-picture-o").toHaveCount(1);
+        expect(".o_we_preview_favicon [data-icon='image']").toHaveCount(1);
         expect(`a.o_we_url_link[href='${url}']`).toHaveText(url);
         expect(".o_we_replace_title_btn").toHaveCount(1);
         expect(`.o_extra_info_card a[href='${url}'] img[src^='data:']`).toHaveCount(1);
@@ -731,9 +731,9 @@ describe("popover in contenteditable=false or readonly mode", () => {
         );
         await waitFor(".o-we-toolbar");
         // Link button should be available and active
-        expect(".o-we-toolbar button.active .fa-link").toHaveCount(1);
+        expect(".o-we-toolbar button.active [data-icon='link']").toHaveCount(1);
         // Unlink button should not be available
-        expect(".o-we-toolbar .fa-unlink").toHaveCount(0);
+        expect(".o-we-toolbar [data-icon='link_off']").toHaveCount(0);
     });
 });
 
@@ -743,12 +743,12 @@ describe("popover for file uploads", () => {
         execCommand(editor, "openLinkTools");
         await waitFor(".o-we-linkpopover");
         // Upload button should be visible
-        expect("button i[class='fa fa-upload']").toHaveCount(1);
+        expect("button i[data-icon='upload']").toHaveCount(1);
         await click(".o_we_href_input_link");
         await press("a");
         await animationFrame();
         // Still upload button should be visible
-        expect("button i[class='fa fa-upload']").toHaveCount(1);
+        expect("button i[data-icon='upload']").toHaveCount(1);
     });
     const patchUpload = (editor) => {
         const mockedUploadPromise = new Promise((resolve) => {
@@ -766,7 +766,7 @@ describe("popover for file uploads", () => {
         const mockedUpload = patchUpload(editor);
         execCommand(editor, "openLinkTools");
         await waitFor(".o-we-linkpopover");
-        await click("button i[class='fa fa-upload']");
+        await click("button i[data-icon='upload']");
         await mockedUpload;
         await animationFrame();
         // URL input gets filled with the attachments's URL
@@ -813,7 +813,7 @@ describe("popover for file uploads", () => {
         // Fill label input
         await contains(".o-we-linkpopover input.o_we_label_link").fill("label");
         // Upload a file
-        await click("button i[class='fa fa-upload']");
+        await click("button i[data-icon='upload']");
         await mockedUpload;
         await animationFrame();
         // Label remains unchanged
@@ -874,7 +874,7 @@ describe("popover with empty URL", () => {
     test("should close the popover and fallback href to '#' on empty URL when clicking outside", async () => {
         const { el } = await setupEditor("<p>[abc]</p>");
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await waitFor(".o-we-linkpopover");
         expect(".o-we-linkpopover input.o_we_href_input_link").toBeFocused();
         await fill("http://test.com/");
@@ -956,7 +956,7 @@ describe("popover with a valid URL as label", () => {
     test("URL input should be prefilled by corresponding URL if the label matches the URL format", async () => {
         const { el } = await setupEditor("<p>[google.com]</p>");
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await waitFor(".o-we-linkpopover");
         expect("input.o_we_label_link").toHaveValue("google.com");
         expect("input.o_we_href_input_link").toHaveValue("https://google.com");
@@ -968,7 +968,7 @@ describe("popover with a valid URL as label", () => {
     test("URL input should be prefilled by corresponding URL if the label matches the URL format (2)", async () => {
         const { el } = await setupEditor("<p>[https://google.com]</p>");
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await waitFor(".o-we-linkpopover");
         expect("input.o_we_label_link").toHaveValue("https://google.com");
         expect("input.o_we_href_input_link").toHaveValue("https://google.com");
@@ -980,7 +980,7 @@ describe("popover with a valid URL as label", () => {
     test("URL input should be prefilled by corresponding URL if the label matches the email format", async () => {
         const { el } = await setupEditor("<p>[test@test.com]</p>");
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await waitFor(".o-we-linkpopover");
         expect("input.o_we_label_link").toHaveValue("test@test.com");
         expect("input.o_we_href_input_link").toHaveValue("mailto:test@test.com");
@@ -992,7 +992,7 @@ describe("popover with a valid URL as label", () => {
     test("URL input should be prefilled by corresponding URL if the label matches the email format (2)", async () => {
         const { el } = await setupEditor("<p>[mailto:test@test.com]</p>");
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await waitFor(".o-we-linkpopover");
         expect("input.o_we_label_link").toHaveValue("mailto:test@test.com");
         expect("input.o_we_href_input_link").toHaveValue("mailto:test@test.com");
@@ -1004,7 +1004,7 @@ describe("popover with a valid URL as label", () => {
     test("URL input should be prefilled by corresponding URL if the label matches the telephone format", async () => {
         const { el } = await setupEditor("<p>[12345678]</p>");
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await waitFor(".o-we-linkpopover");
         expect("input.o_we_label_link").toHaveValue("12345678");
         expect("input.o_we_href_input_link").toHaveValue("tel:12345678");
@@ -1016,7 +1016,7 @@ describe("popover with a valid URL as label", () => {
     test("URL input should be prefilled by corresponding URL if the label matches the telephone format (2)", async () => {
         const { el } = await setupEditor("<p>[tel:123]</p>");
         await waitFor(".o-we-toolbar");
-        await click(".o-we-toolbar .fa-link");
+        await click(".o-we-toolbar [data-icon='link']");
         await waitFor(".o-we-linkpopover");
         expect("input.o_we_label_link").toHaveValue("tel:123");
         expect("input.o_we_href_input_link").toHaveValue("tel:123");
diff --git a/addons/html_editor/static/tests/link/remove.test.js b/addons/html_editor/static/tests/link/remove.test.js
index 44a9c9481a0ad5..83b270ec04aa50 100644
--- a/addons/html_editor/static/tests/link/remove.test.js
+++ b/addons/html_editor/static/tests/link/remove.test.js
@@ -16,9 +16,9 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the start of the link.
         await testEditor({
             contentBefore:
-                '<p>a<a href="http://test.test/"><span class="fa fa-music" contenteditable="false">\u200B</span>bcd[]</a>e</p>',
+                '<p>a<a href="http://test.test/"><span class="oi" data-icon="music_note" contenteditable="false">\u200B</span>bcd[]</a>e</p>',
             stepFunction: unlinkFromPopover,
-            contentAfter: '<p>a<span class="fa fa-music"></span>bcd[]e</p>',
+            contentAfter: '<p>a<span class="oi" data-icon="music_note"></span>bcd[]e</p>',
         });
     });
 
@@ -26,9 +26,9 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the middle of the link.
         await testEditor({
             contentBefore:
-                '<p>a<a href="http://test.test/">bc<span class="fa fa-music" contenteditable="false">\u200B</span>d[]</a>e</p>',
+                '<p>a<a href="http://test.test/">bc<span class="oi" data-icon="music_note" contenteditable="false">\u200B</span>d[]</a>e</p>',
             stepFunction: unlinkFromPopover,
-            contentAfter: '<p>abc<span class="fa fa-music"></span>d[]e</p>',
+            contentAfter: '<p>abc<span class="oi" data-icon="music_note"></span>d[]e</p>',
         });
     });
 
@@ -36,9 +36,9 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the end of the link.
         await testEditor({
             contentBefore:
-                '<p>a<a href="http://test.test/">bcd[]<span class="fa fa-music" contenteditable="false">\u200B</span></a>e</p>',
+                '<p>a<a href="http://test.test/">bcd[]<span class="oi" data-icon="music_note" contenteditable="false">\u200B</span></a>e</p>',
             stepFunction: unlinkFromPopover,
-            contentAfter: '<p>abcd[]<span class="fa fa-music"></span>e</p>',
+            contentAfter: '<p>abcd[]<span class="oi" data-icon="music_note"></span>e</p>',
         });
     });
 
@@ -54,9 +54,9 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the start of the link.
         await testEditor({
             contentBefore:
-                '<p>a<a href="http://test.test/"><span class="fa fa-music" contenteditable="false">\u200B</span>b[]cd</a>e</p>',
+                '<p>a<a href="http://test.test/"><span class="oi" data-icon="music_note" contenteditable="false">\u200B</span>b[]cd</a>e</p>',
             stepFunction: unlinkFromPopover,
-            contentAfter: '<p>a<span class="fa fa-music"></span>b[]cde</p>',
+            contentAfter: '<p>a<span class="oi" data-icon="music_note"></span>b[]cde</p>',
         });
     });
 
@@ -64,9 +64,9 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the middle of the link.
         await testEditor({
             contentBefore:
-                '<p>a<a href="http://test.test/">b[]c<span class="fa fa-music" contenteditable="false">\u200B</span>d</a>e</p>',
+                '<p>a<a href="http://test.test/">b[]c<span class="oi" data-icon="music_note" contenteditable="false">\u200B</span>d</a>e</p>',
             stepFunction: unlinkFromPopover,
-            contentAfter: '<p>ab[]c<span class="fa fa-music"></span>de</p>',
+            contentAfter: '<p>ab[]c<span class="oi" data-icon="music_note"></span>de</p>',
         });
     });
 
@@ -74,9 +74,9 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the end of the link.
         await testEditor({
             contentBefore:
-                '<p>a<a href="http://test.test/">b[]cd<span class="fa fa-music" contenteditable="false">\u200B</span></a>e</p>',
+                '<p>a<a href="http://test.test/">b[]cd<span class="oi" data-icon="music_note" contenteditable="false">\u200B</span></a>e</p>',
             stepFunction: unlinkFromPopover,
-            contentAfter: '<p>ab[]cd<span class="fa fa-music"></span>e</p>',
+            contentAfter: '<p>ab[]cd<span class="oi" data-icon="music_note"></span>e</p>',
         });
     });
 
@@ -92,9 +92,9 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the start of the link.
         await testEditor({
             contentBefore:
-                '<p>a<a href="http://test.test/"><span class="fa fa-music" contenteditable="false">\u200B</span>[]bcd</a>e</p>',
+                '<p>a<a href="http://test.test/"><span class="oi" data-icon="music_note" contenteditable="false">\u200B</span>[]bcd</a>e</p>',
             stepFunction: unlinkFromPopover,
-            contentAfter: '<p>a<span class="fa fa-music"></span>[]bcde</p>',
+            contentAfter: '<p>a<span class="oi" data-icon="music_note"></span>[]bcde</p>',
         });
     });
 
@@ -102,9 +102,9 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the middle of the link.
         await testEditor({
             contentBefore:
-                '<p>a<a href="http://test.test/">[]bc<span class="fa fa-music" contenteditable="false">\u200B</span>d</a>e</p>',
+                '<p>a<a href="http://test.test/">[]bc<span class="oi" data-icon="music_note" contenteditable="false">\u200B</span>d</a>e</p>',
             stepFunction: unlinkFromPopover,
-            contentAfter: '<p>a[]bc<span class="fa fa-music"></span>de</p>',
+            contentAfter: '<p>a[]bc<span class="oi" data-icon="music_note"></span>de</p>',
         });
     });
 
@@ -112,9 +112,9 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the end of the link.
         await testEditor({
             contentBefore:
-                '<p>a<a href="http://test.test/">[]bcd<span class="fa fa-music" contenteditable="false">\u200B</span></a>e</p>',
+                '<p>a<a href="http://test.test/">[]bcd<span class="oi" data-icon="music_note" contenteditable="false">\u200B</span></a>e</p>',
             stepFunction: unlinkFromPopover,
-            contentAfter: '<p>a[]bcd<span class="fa fa-music"></span>e</p>',
+            contentAfter: '<p>a[]bcd<span class="oi" data-icon="music_note"></span>e</p>',
         });
     });
 
@@ -132,10 +132,10 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the start of the link.
         await testEditor({
             contentBefore:
-                '<p><a href="http://test.test/">a</a>b<a href="http://test.test/"><span class="fa fa-music" contenteditable="false">\u200B</span>c[]d</a>e<a href="http://test.test/">f</a></p>',
+                '<p><a href="http://test.test/">a</a>b<a href="http://test.test/"><span class="oi" data-icon="music_note" contenteditable="false">\u200B</span>c[]d</a>e<a href="http://test.test/">f</a></p>',
             stepFunction: unlinkFromPopover,
             contentAfter:
-                '<p><a href="http://test.test/">a</a>b<span class="fa fa-music"></span>c[]de<a href="http://test.test/">f</a></p>',
+                '<p><a href="http://test.test/">a</a>b<span class="oi" data-icon="music_note"></span>c[]de<a href="http://test.test/">f</a></p>',
         });
     });
 
@@ -143,10 +143,10 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the middle of the link.
         await testEditor({
             contentBefore:
-                '<p><a href="http://test.test/">a</a>b<a href="http://test.test/">c<span class="fa fa-music" contenteditable="false">\u200B</span>d[]e</a>f<a href="http://test.test/">g</a></p>',
+                '<p><a href="http://test.test/">a</a>b<a href="http://test.test/">c<span class="oi" data-icon="music_note" contenteditable="false">\u200B</span>d[]e</a>f<a href="http://test.test/">g</a></p>',
             stepFunction: unlinkFromPopover,
             contentAfter:
-                '<p><a href="http://test.test/">a</a>bc<span class="fa fa-music"></span>d[]ef<a href="http://test.test/">g</a></p>',
+                '<p><a href="http://test.test/">a</a>bc<span class="oi" data-icon="music_note"></span>d[]ef<a href="http://test.test/">g</a></p>',
         });
     });
 
@@ -154,10 +154,10 @@ describe("range collapsed, remove by popover unlink button", () => {
         // With fontawesome at the end of the link.
         await testEditor({
             contentBefore:
-                '<p><a href="http://test.test/">a</a>b<a href="http://test.test/">c[]d<span class="fa fa-music" contenteditable="false">\u200B</span></a>e<a href="http://test.test/">f</a></p>',
+                '<p><a href="http://test.test/">a</a>b<a href="http://test.test/">c[]d<span class="oi" data-icon="music_note" contenteditable="false">\u200B</span></a>e<a href="http://test.test/">f</a></p>',
             stepFunction: unlinkFromPopover,
             contentAfter:
-                '<p><a href="http://test.test/">a</a>bc[]d<span class="fa fa-music"></span>e<a href="http://test.test/">f</a></p>',
+                '<p><a href="http://test.test/">a</a>bc[]d<span class="oi" data-icon="music_note"></span>e<a href="http://test.test/">f</a></p>',
         });
     });
 });
diff --git a/addons/html_editor/static/tests/media.test.js b/addons/html_editor/static/tests/media.test.js
index f590613b874fa8..d2d2f6876005a0 100644
--- a/addons/html_editor/static/tests/media.test.js
+++ b/addons/html_editor/static/tests/media.test.js
@@ -83,12 +83,12 @@ test("Replace an image by icon should remove invalid classes", async () => {
     await animationFrame();
     await click(".nav-link:contains('Icons')");
     await animationFrame();
-    await click("span.fa-envelope-o");
+    await click("span[data-icon='mail']");
     await animationFrame();
     expect("img[src='/web/static/img/logo.png']").toHaveCount(0);
-    expect("p > span.fa-envelope-o").toHaveCount(1);
-    expect("p > span.fa-envelope-o").not.toHaveClass("img-fluid");
-    expect("p > span.fa-envelope-o").not.toHaveClass("w-100");
+    expect("p > span[data-icon='mail']").toHaveCount(1);
+    expect("p > span[data-icon='mail']").not.toHaveClass("img-fluid");
+    expect("p > span[data-icon='mail']").not.toHaveClass("w-100");
 });
 
 test.tags("focus required");
@@ -132,10 +132,10 @@ test("should not preserve image styles when replacing an image with an icon", as
     await animationFrame();
     await click(".nav-link:contains('Icons')");
     await animationFrame();
-    await click(".fa-glass");
+    await click("[data-icon='local_bar']");
     await animationFrame();
     expect(getContent(el).replace(/<img.*?>/, "<img>")).toBe(
-        `<p>\ufeff[<span class="fa fa-glass" style="" contenteditable="false">\u200b</span>]\ufeff</p>`
+        `<p>\ufeff[<span class="oi" data-icon="local_bar" style="" contenteditable="false">\u200b</span>]\ufeff</p>`
     );
 });
 
diff --git a/addons/html_editor/static/tests/normalize.test.js b/addons/html_editor/static/tests/normalize.test.js
index e28dd622782bfe..156b412b6952cd 100644
--- a/addons/html_editor/static/tests/normalize.test.js
+++ b/addons/html_editor/static/tests/normalize.test.js
@@ -54,7 +54,7 @@ test("should remove `style.color` from table and apply it to td without `style.c
 
 test("Should properly add feffs around icons", async () => {
     await testEditor({
-        contentBefore: `<div><span class="fa fa-glass" contenteditable="false"></span></div>`,
-        contentBeforeEdit: `<div class="o-paragraph">\ufeff<span class="fa fa-glass" contenteditable="false">\u200b</span>\ufeff</div>`,
+        contentBefore: `<div><span class="oi" data-icon="local_bar" contenteditable="false"></span></div>`,
+        contentBeforeEdit: `<div class="o-paragraph">\ufeff<span class="oi" data-icon="local_bar" contenteditable="false">\u200b</span>\ufeff</div>`,
     });
 });
diff --git a/addons/html_editor/static/tests/paste.test.js b/addons/html_editor/static/tests/paste.test.js
index a83c2dfb4ffa8a..d6fe4ccb9de120 100644
--- a/addons/html_editor/static/tests/paste.test.js
+++ b/addons/html_editor/static/tests/paste.test.js
@@ -4813,9 +4813,9 @@ describe("onDrop", () => {
     });
     test("should drag and drop icon", async () => {
         const { el } = await setupEditor(
-            `<p>[a</p><p><span class="fa fa-heart"></span>b]</p><p>c</p>`
+            `<p>[a</p><p><span class="oi oi-filled" data-icon="favorite"></span>b]</p><p>c</p>`
         );
-        const iconElement = el.querySelector(".fa");
+        const iconElement = el.querySelector(".oi");
         const targetNodeForDrop = el.lastChild;
 
         patchWithCleanup(document, {
@@ -4839,7 +4839,7 @@ describe("onDrop", () => {
         await animationFrame();
 
         expect(getContent(el)).toBe(
-            '<p><br></p><p>ca</p><p>\ufeff<span class="fa fa-heart" contenteditable="false">\u200b</span>\ufeffb[]</p>'
+            '<p><br></p><p>ca</p><p>\ufeff<span class="oi oi-filled" data-icon="favorite" contenteditable="false">\u200b</span>\ufeffb[]</p>'
         );
     });
 });
diff --git a/addons/html_editor/static/tests/power_buttons.test.js b/addons/html_editor/static/tests/power_buttons.test.js
index 0010df68bc6732..d17f5071d76f8a 100644
--- a/addons/html_editor/static/tests/power_buttons.test.js
+++ b/addons/html_editor/static/tests/power_buttons.test.js
@@ -153,7 +153,7 @@ describe.tags("desktop");
 describe("buttons", () => {
     test("should create a numbered list using power buttons", async () => {
         const { el } = await setupEditor("<p>[]<br></p>");
-        await click(".o_we_power_buttons .power_button.fa-list-ol");
+        await click(".o_we_power_buttons .power_button[data-icon='format_list_numbered']");
         expect(getContent(el)).toBe(
             `<ol><li o-we-hint-text="List" class="o-we-hint">[]<br></li></ol>`
         );
@@ -161,7 +161,7 @@ describe("buttons", () => {
 
     test("should create a bullet list using power buttons", async () => {
         const { el } = await setupEditor("<p>[]<br></p>");
-        await click(".o_we_power_buttons .power_button.fa-list-ul");
+        await click(".o_we_power_buttons .power_button[data-icon='format_list_bulleted']");
         expect(getContent(el)).toBe(
             `<ul><li o-we-hint-text="List" class="o-we-hint">[]<br></li></ul>`
         );
@@ -169,7 +169,7 @@ describe("buttons", () => {
 
     test("should create a check list using power buttons", async () => {
         const { el } = await setupEditor("<p>[]<br></p>");
-        await click(".o_we_power_buttons .power_button.fa-check-square-o");
+        await click(".o_we_power_buttons .power_button[data-icon='check_box']");
         expect(getContent(el)).toBe(
             `<ul class="o_checklist"><li o-we-hint-text="List" class="o-we-hint">[]<br></li></ul>`
         );
@@ -187,21 +187,21 @@ describe("buttons", () => {
             },
         ]);
         await setupEditor("<p>[]<br></p>");
-        click(".o_we_power_buttons .power_button.fa-file-image-o");
+        click(".o_we_power_buttons .power_button[data-icon='image']");
         await animationFrame();
         expect(".o_select_media_dialog").toBeVisible();
     });
 
     test("should open link popover in 'button primary' mode using power buttons", async () => {
         await setupEditor("<p>[]<br></p>");
-        click(".o_we_power_buttons .power_button.fa-square");
+        click(".o_we_power_buttons .power_button[data-icon='square']");
         await animationFrame();
         await expectElementCount(".o-we-linkpopover", 1);
     });
 
     test("should open the powerbox using the power buttons without losing editor focus", async () => {
         const { el, editor } = await setupEditor("<p>[]<br></p>");
-        click(".o_we_power_buttons .power_button.oi-ellipsis-v");
+        click(".o_we_power_buttons .power_button[data-icon='more_vert']");
         await expectElementCount(".o-we-powerbox", 1);
         expect(editor.document.activeElement).toBe(el);
     });
@@ -209,7 +209,7 @@ describe("buttons", () => {
     test("should filter the powerbox contents based on the search term", async () => {
         const { editor } = await setupEditor("<p>[]<br></p>");
         // Open powerbox via the More options button
-        click(".o_we_power_buttons .power_button.oi-ellipsis-v");
+        click(".o_we_power_buttons .power_button[data-icon='more_vert']");
         await expectElementCount(".o-we-powerbox", 1);
         expect(queryAllTexts(".o-we-command-name").length).toBe(27);
         // Type a search term
@@ -232,7 +232,7 @@ describe("buttons", () => {
     test("should close the powerbox on pointerdown outside and not reopen it on subsequent keydown", async () => {
         const { editor } = await setupEditor("<p>[]<br></p>");
         // Open powerbox via the More options button
-        click(".o_we_power_buttons .power_button.oi-ellipsis-v");
+        click(".o_we_power_buttons .power_button[data-icon='more_vert']");
         await expectElementCount(".o-we-powerbox", 1);
         // Click outside the powerbox
         await pointerDown("p");
@@ -247,7 +247,7 @@ describe("buttons", () => {
         const { editor } = await setupEditor("<p>[]<br></p>");
         splitBlock(editor);
         // Open powerbox via the More options button
-        click(".o_we_power_buttons .power_button.oi-ellipsis-v");
+        click(".o_we_power_buttons .power_button[data-icon='more_vert']");
         await expectElementCount(".o-we-powerbox", 1);
         undo(editor);
         await expectElementCount(".o-we-powerbox", 0);
@@ -258,7 +258,7 @@ describe("buttons", () => {
         splitBlock(editor);
         undo(editor);
         // Open powerbox via the More options button
-        click(".o_we_power_buttons .power_button.oi-ellipsis-v");
+        click(".o_we_power_buttons .power_button[data-icon='more_vert']");
         await expectElementCount(".o-we-powerbox", 1);
         redo(editor);
         await expectElementCount(".o-we-powerbox", 0);
@@ -268,7 +268,7 @@ describe("buttons", () => {
         const { editor } = await setupEditor("<p>[]<br></p>");
         splitBlock(editor);
         // Open powerbox via the More options button
-        click(".o_we_power_buttons .power_button.oi-ellipsis-v");
+        click(".o_we_power_buttons .power_button[data-icon='more_vert']");
         await expectElementCount(".o-we-powerbox", 1);
         press("backspace");
         await expectElementCount(".o-we-powerbox", 0);
@@ -277,7 +277,7 @@ describe("buttons", () => {
     test("should filter powerbox commands and keep it open on undo when only the search term changes", async () => {
         const { editor } = await setupEditor("<p>[]<br></p>");
         // Open powerbox via the More options button
-        click(".o_we_power_buttons .power_button.oi-ellipsis-v");
+        click(".o_we_power_buttons .power_button[data-icon='more_vert']");
         await expectElementCount(".o-we-powerbox", 1);
         expect(queryAllTexts(".o-we-command-name").length).toBe(27);
         // Type a search term
@@ -295,7 +295,7 @@ describe("buttons", () => {
     test("should filter powerbox commands and keep it open on redo when only the search term changes", async () => {
         const { editor } = await setupEditor("<p>[]<br></p>");
         // Open powerbox via the More options button
-        click(".o_we_power_buttons .power_button.oi-ellipsis-v");
+        click(".o_we_power_buttons .power_button[data-icon='more_vert']");
         await expectElementCount(".o-we-powerbox", 1);
         expect(queryAllTexts(".o-we-command-name").length).toBe(27);
         // Type a search term
@@ -313,7 +313,7 @@ describe("buttons", () => {
     test("should filter and apply a powerbox command when opened via the power buttons", async () => {
         const { el, editor } = await setupEditor("<p>[]<br></p>");
         // Open powerbox via the More options button
-        click(".o_we_power_buttons .power_button.oi-ellipsis-v");
+        click(".o_we_power_buttons .power_button[data-icon='more_vert']");
         await expectElementCount(".o-we-powerbox", 1);
         expect(queryAllTexts(".o-we-command-name").length).toBe(27);
         // Type a search term
@@ -341,7 +341,7 @@ describe("individual button availability", () => {
                 user_commands: {
                     id: "test",
                     title: "TestButton",
-                    icon: "fa-bug",
+                    icon: "bug_report",
                     isAvailable: ({ anchorNode }) =>
                         !closestElement(anchorNode, ".hide_test_button"),
                     run: () => {},
@@ -353,13 +353,13 @@ describe("individual button availability", () => {
             config: { Plugins: [...MAIN_PLUGINS, TestPlugin] },
         });
         expect(".o_we_power_buttons").toBeVisible();
-        expect(".power_button.fa-bug").toBeVisible();
+        expect(".power_button[data-icon='bug_report']").toBeVisible();
 
         // Place cursor in the second paragraph
         setSelection({ anchorNode: el.children[1], anchorOffset: 0 });
         await tick();
 
         expect(".o_we_power_buttons").toBeVisible();
-        expect(".power_button.fa-bug").not.toBeVisible();
+        expect(".power_button[data-icon='bug_report']").not.toBeVisible();
     });
 });
diff --git a/addons/html_editor/static/tests/powerbox.test.js b/addons/html_editor/static/tests/powerbox.test.js
index aca39b645ce52c..4ad3e3a0e2008b 100644
--- a/addons/html_editor/static/tests/powerbox.test.js
+++ b/addons/html_editor/static/tests/powerbox.test.js
@@ -652,7 +652,7 @@ class NoOpPlugin extends Plugin {
                 title: "No-op",
                 description: "No-op",
                 categoryId: "no_op",
-                icon: "fa-header",
+                icon: "title",
                 commandId: "noOp",
             },
         ],
diff --git a/addons/html_editor/static/tests/rating_star.test.js b/addons/html_editor/static/tests/rating_star.test.js
index f25e99d929ac15..b5f19da44f4477 100644
--- a/addons/html_editor/static/tests/rating_star.test.js
+++ b/addons/html_editor/static/tests/rating_star.test.js
@@ -24,7 +24,7 @@ test("add 3 star elements", async () => {
 
     await press("Enter");
     expect(getContent(el)).toBe(
-        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="fa fa-star-o" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
+        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="oi" data-icon="star" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
     );
 });
 
@@ -36,65 +36,65 @@ test("add 5 star elements", async () => {
 
     await press("Enter");
     expect(getContent(el)).toBe(
-        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="fa fa-star-o" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
+        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="oi" data-icon="star" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
     );
 });
 
 test("select star rating", async () => {
     const { el } = await setupEditor(
-        `<p><span contenteditable="false" class="o_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>[]</p>`
+        `<p><span contenteditable="false" class="o_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>[]</p>`
     );
 
-    await click("i.fa-star-o:first");
+    await click("i[data-icon='star']:first");
     await animationFrame();
     expect(getContent(el)).toBe(
-        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="fa fa-star" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
+        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="oi oi-filled" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
     );
 
-    await click("i.fa-star-o:last");
+    await click("i[data-icon='star']:last");
     await animationFrame();
     expect(getContent(el)).toBe(
-        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="fa fa-star" contenteditable="false">\u200B</i><i class="o_stars fa fa-star" contenteditable="false">\u200B</i><i class="o_stars fa fa-star" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
+        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="oi oi-filled" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi oi-filled" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi oi-filled" data-icon="star" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
     );
 
-    await click("i.fa-star:last");
+    await click("i[data-icon='star'].oi-filled:last");
     await animationFrame();
     expect(getContent(el)).toBe(
-        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
+        `<p>\uFEFF<span contenteditable="false" class="o_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>\uFEFF[]</p>`
     );
 });
 
 test("should insert two empty paragraphs when Enter is pressed twice before the star element", async () => {
     const { el, editor } = await setupEditor(
-        `<p>\u200B[]<span contenteditable="false" class="o_stars o_three_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>\u200B</p>`
+        `<p>\u200B[]<span contenteditable="false" class="o_stars o_three_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>\u200B</p>`
     );
     splitBlock(editor);
     expect(getContent(el)).toBe(
-        `<p><br></p><p>\uFEFF[]<span contenteditable="false" class="o_stars o_three_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>\uFEFF\u200B</p>`
+        `<p><br></p><p>\uFEFF[]<span contenteditable="false" class="o_stars o_three_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>\uFEFF\u200B</p>`
     );
     splitBlock(editor);
     expect(getContent(el)).toBe(
-        `<p><br></p><p><br></p><p>\uFEFF[]<span contenteditable="false" class="o_stars o_three_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>\uFEFF\u200B</p>`
+        `<p><br></p><p><br></p><p>\uFEFF[]<span contenteditable="false" class="o_stars o_three_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>\uFEFF\u200B</p>`
     );
 });
 
 test("should insert two empty paragraphs when Enter is pressed twice after the star element", async () => {
     const { el, editor } = await setupEditor(
-        `<p>\u200B<span contenteditable="false" class="o_stars o_three_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>\u200B[]</p>`
+        `<p>\u200B<span contenteditable="false" class="o_stars o_three_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>\u200B[]</p>`
     );
     splitBlock(editor);
     expect(getContent(el)).toBe(
-        `<p>\u200B\uFEFF<span contenteditable="false" class="o_stars o_three_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>\uFEFF</p><p o-we-hint-text='Type "/" for commands' class="o-we-hint">[]<br></p>`
+        `<p>\u200B\uFEFF<span contenteditable="false" class="o_stars o_three_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>\uFEFF</p><p o-we-hint-text='Type "/" for commands' class="o-we-hint">[]<br></p>`
     );
     splitBlock(editor);
     expect(getContent(el)).toBe(
-        `<p>\u200B\uFEFF<span contenteditable="false" class="o_stars o_three_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>\uFEFF</p><p><br></p><p o-we-hint-text='Type "/" for commands' class="o-we-hint">[]<br></p>`
+        `<p>\u200B\uFEFF<span contenteditable="false" class="o_stars o_three_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>\uFEFF</p><p><br></p><p o-we-hint-text='Type "/" for commands' class="o-we-hint">[]<br></p>`
     );
 });
 
 test("should delete star rating elements when delete is pressed twice", async () => {
     await testEditor({
-        contentBefore: `<p><span contenteditable="false" class="o_stars o_three_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>[]</p>`,
+        contentBefore: `<p><span contenteditable="false" class="o_stars o_three_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>[]</p>`,
         stepFunction: async (editor) => {
             deleteBackward(editor);
             deleteBackward(editor);
@@ -113,7 +113,7 @@ test("stars line should be reachable with up/down", async () => {
     await expectElementCount(".o-we-powerbox", 1);
     await press("Enter");
 
-    const stars = `<span contenteditable="false" class="o_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="fa fa-star-o" contenteditable="false">\u200B</i></span>`;
+    const stars = `<span contenteditable="false" class="o_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="oi" data-icon="star" contenteditable="false">\u200B</i></span>`;
     expect(getContent(el)).toBe(`<p>abc</p><p>\uFEFF${stars}\uFEFF[]</p><p>def</p>`);
 
     await simulateArrowKeyPress(editor, "ArrowDown");
@@ -145,7 +145,7 @@ test("stars line should be reachable with up/down", async () => {
 test.tags("desktop");
 test("should not open icon toolbar when inserting a paragraph break before the star element", async () => {
     const { editor } = await setupEditor(
-        `<p>\u200B[]<span contenteditable="false" class="o_stars o_three_stars"><i class="fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i><i class="o_stars fa fa-star-o" contenteditable="false">\u200B</i></span>\u200B</p>`
+        `<p>\u200B[]<span contenteditable="false" class="o_stars o_three_stars"><i class="oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i><i class="o_stars oi" data-icon="star" contenteditable="false">\u200B</i></span>\u200B</p>`
     );
     splitBlock(editor);
     await advanceTime(100);
diff --git a/addons/html_editor/static/tests/syntax_highlighting.test.js b/addons/html_editor/static/tests/syntax_highlighting.test.js
index f16fe9ee75246d..109330874bd79c 100644
--- a/addons/html_editor/static/tests/syntax_highlighting.test.js
+++ b/addons/html_editor/static/tests/syntax_highlighting.test.js
@@ -1189,7 +1189,7 @@ test("restore paragraph from code block", async () => {
     await testEditor({
         contentBefore: "<pre>[]abc</pre>",
         stepFunction: async () => {
-            await click(".o_code_toolbar span.fa-paragraph");
+            await click(".o_code_toolbar span[data-icon='format_paragraph']");
         },
         contentAfterEdit: "<p>[]abc</p>",
         contentAfter: `<p>[]abc</p>`,
diff --git a/addons/html_editor/static/tests/toolbar.test.js b/addons/html_editor/static/tests/toolbar.test.js
index 93c6104d0cfbf4..b52b38fca5eb1d 100644
--- a/addons/html_editor/static/tests/toolbar.test.js
+++ b/addons/html_editor/static/tests/toolbar.test.js
@@ -493,32 +493,32 @@ test("toolbar works: show the correct text alignment", async () => {
     const { el } = await setupEditor("<p>[test</p><p><br>]</p>");
     await expandToolbar();
     expect("button[name='text_align']").toHaveCount(1);
-    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="fa fa-align-left"> </i>`);
+    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="oi" data-icon="format_align_left"> </i>`);
     await click("button[name='text_align']");
-    await contains(".o-we-toolbar-dropdown .btn.fa-align-right").click();
+    await contains(".o-we-toolbar-dropdown .btn[data-icon='format_align_right']").click();
     expect(getContent(el)).toBe(
         `<p style="text-align: end;">[test</p><p style="text-align: end;"><br>]</p>`
     );
-    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="fa fa-align-right"> </i>`);
+    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="oi" data-icon="format_align_right"> </i>`);
 });
 
 test("toolbar works: show the correct text alignment after undo/redo", async () => {
     const { el } = await setupEditor("<p>[test]</p>");
     await expandToolbar();
     expect("button[name='text_align']").toHaveCount(1);
-    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="fa fa-align-left"> </i>`);
+    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="oi" data-icon="format_align_left"> </i>`);
     await click("button[name='text_align']");
-    await contains(".o-we-toolbar-dropdown .btn.fa-align-center").click();
+    await contains(".o-we-toolbar-dropdown .btn[data-icon='format_align_center']").click();
     expect(getContent(el)).toBe(`<p style="text-align: center;">[test]</p>`);
-    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="fa fa-align-center"> </i>`);
+    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="oi" data-icon="format_align_center"> </i>`);
     await press(["ctrl", "z"]);
     await animationFrame();
     expect(getContent(el)).toBe(`<p>[test]</p>`);
-    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="fa fa-align-left"> </i>`);
+    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="oi" data-icon="format_align_left"> </i>`);
     await press(["ctrl", "y"]);
     await animationFrame();
     expect(getContent(el)).toBe(`<p style="text-align: center;">[test]</p>`);
-    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="fa fa-align-center"> </i>`);
+    expect("button[name='text_align'] span").toHaveInnerHTML(`<i class="oi" data-icon="format_align_center"> </i>`);
 });
 
 test.tags("desktop");
@@ -1065,7 +1065,8 @@ test("toolbar correctly show namespace button group and stop showing when namesp
                     groupId: "test_group",
                     commandId: "test_cmd",
                     description: "Test Button",
-                    icon: "fa-square",
+                    icon: "square",
+                    icon_class: "oi-filled",
                 },
             ],
         };
@@ -1091,7 +1092,8 @@ test("toolbar does not evaluate isActive when namespace does not match", async (
                     groupId: "test_group",
                     commandId: "test_cmd",
                     description: "Test Button",
-                    icon: "fa-square",
+                    icon: "square",
+                    icon_class: "oi-filled",
                     isActive: () => {
                         expect.step("image format evaluated");
                         resolveIsActive();
@@ -1145,7 +1147,8 @@ describe("compact toolbar", () => {
         groupId: "test_group",
         commandId: "test_cmd",
         description: "Test Button",
-        icon: "fa-square",
+        icon: "square",
+        icon_class: "oi-filled",
         ...obj,
     });
     const repeat = (count, fn) => range(count).map(fn);
@@ -1267,7 +1270,7 @@ test("toolbar items without namespace default to 'expanded'", async () => {
                     groupId: "test_group",
                     commandId: "test_cmd",
                     description: "Test Button",
-                    icon: "fa-square",
+                    icon: "square",
                 },
             ],
         };
@@ -1454,7 +1457,7 @@ test.tags("desktop");
 test("toolbar should close on open link popover", async () => {
     await setupEditor("<p>[a]</p>");
     await expectElementCount(".o-we-toolbar", 1);
-    await click(".o-we-toolbar .fa-link");
+    await click(".o-we-toolbar [data-icon='link']");
     await expectElementCount(".o-we-toolbar", 0);
 });
 
@@ -1462,7 +1465,7 @@ test.tags("desktop", "iframe");
 test("toolbar should close on open link popover (iframe)", async () => {
     await setupEditor("<p>[a]</p>", { props: { iframe: true } });
     await expectElementCount(".o-we-toolbar", 1);
-    await click(".o-we-toolbar .fa-link");
+    await click(".o-we-toolbar [data-icon='link']");
     await expectElementCount(".o-we-toolbar", 0);
 });
 
@@ -1470,7 +1473,7 @@ test.tags("desktop");
 test("toolbar should close on edit link from preview", async () => {
     await setupEditor(`<p><a href="http://test.test/">[a]</a></p>`);
     await expectElementCount(".o-we-toolbar", 1);
-    await click(".o-we-toolbar .fa-link");
+    await click(".o-we-toolbar [data-icon='link']");
     await waitFor(".o-we-linkpopover");
     await click(".o_we_edit_link");
     await expectElementCount(".o-we-toolbar", 0);
diff --git a/addons/html_editor/static/tests/upload_service.test.js b/addons/html_editor/static/tests/upload_service.test.js
index 20b2d3276f8084..6a8711c3059f3d 100644
--- a/addons/html_editor/static/tests/upload_service.test.js
+++ b/addons/html_editor/static/tests/upload_service.test.js
@@ -73,7 +73,7 @@ test("should be able to cancel a file upload", async () => {
     xhr.upload.dispatchEvent(progressEv);
     await animationFrame();
     expect(queryOne(".o_we_progressbar .progress-bar").style.width).toBe("40%");
-    await click(".o_notification_indicator .fa-trash");
+    await click(".o_notification_indicator [data-icon='delete'].oi-filled");
     await animationFrame();
     expect(".o_we_progressbar").toHaveCount(0);
     await fileUploadProm;
@@ -116,7 +116,7 @@ test("should be able to cancel a file when uploading multiple files", async () =
     );
     await animationFrame();
     expect(".o_we_progressbar").toHaveCount(3);
-    await click(".o_we_progressbar:nth-child(2) .fa-trash"); // Delete 2nd file
+    await click(".o_we_progressbar:nth-child(2) [data-icon='delete'].oi-filled"); // Delete 2nd file
     await animationFrame();
     expect(".o_we_progressbar").toHaveCount(2);
     await fileUploadProm;
diff --git a/addons/html_editor/static/tests/utils/dom_info.test.js b/addons/html_editor/static/tests/utils/dom_info.test.js
index 51448d418fbceb..97320c02e8b437 100644
--- a/addons/html_editor/static/tests/utils/dom_info.test.js
+++ b/addons/html_editor/static/tests/utils/dom_info.test.js
@@ -565,7 +565,7 @@ describe("isEmptyBlock", () => {
     });
 
     test("should identify span with icon classes as non-empty", () => {
-        const [span] = insertTestHtml('<span class="fa fa-trash-o"></span>');
+        const [span] = insertTestHtml('<span class="oi" data-icon="delete"></span>');
         const result = isEmptyBlock(span);
         expect(result).toBe(false);
     });
diff --git a/addons/iap/static/src/action_buttons_widget/action_buttons_widget.xml b/addons/iap/static/src/action_buttons_widget/action_buttons_widget.xml
index bb02130c916684..2ee5d330192088 100644
--- a/addons/iap/static/src/action_buttons_widget/action_buttons_widget.xml
+++ b/addons/iap/static/src/action_buttons_widget/action_buttons_widget.xml
@@ -4,8 +4,8 @@
     <t t-name="iap.ActionButtonsWidget">
         <div class="row">
             <div class="col-sm">
-                <button t-on-click="this.onManageServiceLinkClicked" class="btn btn-link px-0 o-hidden-ios text-nowrap"><i class="oi oi-arrow-right"/> Manage Service &amp; Buy Credits</button><br/>
-                <button t-if="this.props.showServiceButtons" t-on-click="this.onViewServicesClicked" class="btn btn-link px-0 o-hidden-ios text-nowrap"><i class="oi oi-arrow-right"/> View My Services</button>
+                <button t-on-click="this.onManageServiceLinkClicked" class="btn btn-link px-0 o-hidden-ios text-nowrap"><i class="oi" data-icon="east"/> Manage Service &amp; Buy Credits</button><br/>
+                <button t-if="this.props.showServiceButtons" t-on-click="this.onViewServicesClicked" class="btn btn-link px-0 o-hidden-ios text-nowrap"><i class="oi" data-icon="east"/> View My Services</button>
             </div>
         </div>
     </t>
diff --git a/addons/iap/views/iap_views.xml b/addons/iap/views/iap_views.xml
index cde9928ec2f4c3..8f804332776d07 100644
--- a/addons/iap/views/iap_views.xml
+++ b/addons/iap/views/iap_views.xml
@@ -70,8 +70,8 @@
                 <field name="company_ids" widget="many2many_tags"/>
                 <field name="balance"/>
                 <field name="account_token" optional="hidden"/>
-                <button name="action_buy_credits" type="object" string="Buy Credits" icon="fa-shopping-cart"/>
-                <button name="action_open_iap_account" type="object" string="Set Alerts &amp; Auto-Refill" icon="fa-refresh"/>
+                <button name="action_buy_credits" type="object" string="Buy Credits" icon="shopping_cart"/>
+                <button name="action_open_iap_account" type="object" string="Set Alerts &amp; Auto-Refill" icon="refresh"/>
             </list>
         </field>
     </record>
diff --git a/addons/iap/views/res_config_settings.xml b/addons/iap/views/res_config_settings.xml
index 7bb569f771ec88..0e5b9a3fe72a84 100644
--- a/addons/iap/views/res_config_settings.xml
+++ b/addons/iap/views/res_config_settings.xml
@@ -9,7 +9,7 @@
                 <div id="iap_portal">
                     <block class='iap_portal' name="iap_purchases_setting_container">
                         <setting id="iap_credits_setting" string="Odoo In-App Purchase" help ="View your IAP Services and recharge your credits" documentation="/applications/general/in_app_purchase.html">
-                            <button name="iap.iap_account_action" icon="oi-arrow-right" type="action" string="View My Services" class="btn-link"/>
+                            <button name="iap.iap_account_action" icon="east" type="action" string="View My Services" class="btn-link"/>
                         </setting>
                     </block>
                 </div>
diff --git a/addons/iap_mail/data/mail_templates.xml b/addons/iap_mail/data/mail_templates.xml
index 3abd3f674a36b8..d63951548f7182 100644
--- a/addons/iap_mail/data/mail_templates.xml
+++ b/addons/iap_mail/data/mail_templates.xml
@@ -31,7 +31,7 @@
 
             <div class="col-sm-12 row m-0 p-0">
                 <div t-if="founded_year" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-calendar text-primary"/>
+                    <i class="oi oi-fw oi-filled me-2 text-primary" data-icon="calendar_today"/>
                     <b>Founded</b>
                 </div>
                 <div t-if="founded_year" class="my-1 col-sm-9" t-out="founded_year" />
@@ -41,7 +41,7 @@
                 <t t-if="industry_group" t-set="sectors" t-value="sectors + [industry_group]" />
                 <t t-if="sub_industry" t-set="sectors" t-value="sectors + [sub_industry]" />
                 <div t-if="sectors" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-industry text-primary"/>
+                    <i class="oi oi-fw me-2 text-primary" data-icon="factory"/>
                     <b>Sectors</b>
                 </div>
                 <div t-if="sectors" class="my-1 col-sm-9">
@@ -50,19 +50,19 @@
                     </t>
                 </div>
                 <div t-if="employees" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-users text-primary"/>
+                    <i class="oi oi-fw oi-filled me-2 text-primary" data-icon="group"/>
                     <b>Employees</b>
                 </div>
                 <div t-if="employees" class="my-1 col-sm-9" t-out="'%.0f' % employees" />
                 <div t-if="estimated_annual_revenue" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-money text-primary"/>
+                    <i class="oi oi-fw me-2 text-primary" data-icon="payments"/>
                     <b>Estimated revenue</b>
                 </div>
                 <div t-if="estimated_annual_revenue" class="my-1 col-sm-9">
                     <span t-out="estimated_annual_revenue" /><span> per year</span>
                 </div>
                 <div t-if="phone_numbers" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-phone text-primary"/>
+                    <i class="oi oi-fw oi-filled me-2 text-primary" data-icon="phone"/>
                     <b>Phone</b>
                 </div>
                 <div t-if="phone_numbers" class="col-sm-9">
@@ -71,7 +71,7 @@
                     </t>
                 </div>
                 <div t-if="email" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-envelope text-primary"/>
+                    <i class="oi oi-fw me-2 text-primary" data-icon="mail"/>
                     <b>Email</b>
                 </div>
                 <div t-if="email" class="col-sm-9">
@@ -80,12 +80,12 @@
                     </t>
                 </div>
                 <div t-if="timezone" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-globe text-primary"/>
+                    <i class="oi oi-fw me-2 text-primary" data-icon="public"/>
                     <b>Timezone</b>
                 </div>
                 <div t-if="timezone" class="my-1 col-sm-9" t-out="timezone.replace('_', ' ')" />
                 <div t-if="tech" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-cube text-primary"/>
+                    <i class="oi oi-fw me-2 text-primary" data-icon="deployed_code"/>
                     <b>Technologies Used</b>
                 </div>
                 <div t-if="tech" class="my-1 col-sm-9">
@@ -94,7 +94,7 @@
                     </t>
                 </div>
                 <div t-if="twitter_bio" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-twitter text-primary"/>
+                    <i class="oi oi-fw me-2 text-primary" data-icon="oi_twitter"/>
                     <b>X</b>
                 </div>
                 <div t-if="twitter_bio" class="my-1 col-sm-9">
@@ -125,12 +125,12 @@
 
             <div class="col-sm-12 row m-0 p-0">
                 <div t-if="company_type" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-building mt-1 text-primary"/>
+                    <i class="oi oi-fw oi-filled me-2 mt-1 text-primary" data-icon="business"/>
                     <b>Type</b>
                 </div>
                 <div t-if="company_type" class="my-1 col-sm-9" t-out="company_type" />
                 <div t-if="vat" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-folder mt-1 text-primary"/>
+                    <i class="oi oi-fw oi-filled me-2 mt-1 text-primary" data-icon="folder"/>
                     <b>Tax ID</b>
                 </div>
                 <div t-if="vat" class="my-1 col-sm-9" t-out="vat" />
@@ -140,7 +140,7 @@
                 <t t-if="industry_group" t-set="sectors" t-value="sectors + [industry_group]" />
                 <t t-if="sub_industry" t-set="sectors" t-value="sectors + [sub_industry]" />
                 <div class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-address-card text-primary mt-1"/>
+                    <i class="oi oi-fw oi-filled me-2 text-primary mt-1" data-icon="contact_mail"/>
                     <b>Address</b>
                 </div>
                 <div class="my-1 col-sm-9">
@@ -154,40 +154,40 @@
                     </div>
                 </div>
                 <div t-if="employees" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-users text-primary"/>
+                    <i class="oi oi-fw oi-filled me-2 text-primary" data-icon="group"/>
                     <b>Employees</b>
                 </div>
                 <div t-if="employees" class="my-1 col-sm-9" t-out="'%.0f' % employees" />
                 <div t-if="estimated_annual_revenue" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-money mt-1 text-primary"/>
+                    <i class="oi oi-fw me-2 mt-1 text-primary" data-icon="payments"/>
                     <b>Estimated revenue</b>
                 </div>
                 <div t-if="estimated_annual_revenue" class="my-1 col-sm-9">
                     <span t-out="estimated_annual_revenue" /><span> per year</span>
                 </div>
                 <div t-if="phone" class="d-flex p-0 my-1 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-phone mt-1 text-primary"/>
+                    <i class="oi oi-fw oi-filled me-2 mt-1 text-primary" data-icon="phone"/>
                     <b>Phone</b>
                 </div>
                  <div t-if="phone" class="col-sm-9 my-1">
                     <a t-attf-href="tel:{{phone}}" t-out="phone"/>
                 </div>
                 <div t-if="email" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-envelope text-primary" style="margin-top: 3px;"/>
+                    <i class="oi oi-fw oi-filled me-2 text-primary" data-icon="mail" style="margin-top: 3px;"/>
                     <b>Email</b>
                 </div>
                 <div t-if="email" class="col-sm-9 my-1">
                     <a target="_top" t-attf-href="mailto:{{email}}" t-out="email"/>
                 </div>
                  <div t-if="website" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-globe mt-1 text-primary"/>
+                    <i class="oi oi-fw me-2 mt-1 text-primary" data-icon="public"/>
                     <b>Website</b>
                 </div>
                 <div t-if="website" class="my-1 col-sm-9">
                     <a target="_blank" t-attf-href="{{website}}" t-out="website"/>
                 </div>
                  <div t-if="tags" class="d-flex my-1 p-0 col-sm-3">
-                    <i class="fa fa-fw me-2 fa-industry text-primary"/>
+                    <i class="oi oi-fw me-2 text-primary" data-icon="factory"/>
                     <b>Industries</b>
                 </div>
                  <div t-if="tags" class="col-sm-9">
diff --git a/addons/iap_mail/static/src/js/services/iap_notification_service.js b/addons/iap_mail/static/src/js/services/iap_notification_service.js
index 766b5ce361facf..e2f707fda5ccff 100644
--- a/addons/iap_mail/static/src/js/services/iap_notification_service.js
+++ b/addons/iap_mail/static/src/js/services/iap_notification_service.js
@@ -26,7 +26,7 @@ export const iapNotificationService = {
         function displayCreditErrorNotification(params) {
             const message = markup`
                 <a class='btn btn-link' href='${params.get_credits_url}' target='_blank'>
-                    <i class='oi oi-arrow-right'></i>
+                    <i class='oi' data-icon='east'></i>
                     ${_t("Buy more credits")}
                 </a>`;
             notification.add(message, {
diff --git a/addons/im_livechat/controllers/main.py b/addons/im_livechat/controllers/main.py
index 0438ff6097dbc2..b506f4befdb5b0 100644
--- a/addons/im_livechat/controllers/main.py
+++ b/addons/im_livechat/controllers/main.py
@@ -47,9 +47,9 @@ def assets_embed(self, ext, **kwargs):
         stream = request.env['ir.binary']._get_stream_from(getattr(asset, ext)())
         return stream.get_response()
 
-    @http.route('/im_livechat/font-awesome', type='http', auth='none', cors="*")
+    @http.route('/im_livechat/material_symbols', type='http', auth='none', cors="*")
     def fontawesome(self, **kwargs):
-        return Stream.from_path('web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2').get_response()
+        return Stream.from_path('web/static/src/libs/materialsymbols/MaterialSymbolsRounded_wgth-400_opsz-24.woff2').get_response()
 
     @http.route('/im_livechat/odoo_ui_icons', type='http', auth='none', cors="*")
     def odoo_ui_icons(self, **kwargs):
diff --git a/addons/im_livechat/static/src/core/common/close_confirmation.xml b/addons/im_livechat/static/src/core/common/close_confirmation.xml
index f7ece4ca6555a7..11fd6949dffca8 100644
--- a/addons/im_livechat/static/src/core/common/close_confirmation.xml
+++ b/addons/im_livechat/static/src/core/common/close_confirmation.xml
@@ -8,7 +8,7 @@
                     <button class="o-livechat-CloseConfirmation-close btn-close" t-on-click.stop="() => this.props.onCloseConfirmationDialog()"/>
                 </div>
                 <span class="pt-2 pb-3" t-out="this.confirmationMessage"/>
-                <button class="o-livechat-CloseConfirmation-leave btn btn-danger p-2 gap-1" t-on-keydown.stop.prevent="this.onKeydown" t-on-click.stop="() => this.props.onClickLeaveConversation()" t-custom-ref="confirm"><i class="fa fa-fw fa-sign-out"/>Yes, leave conversation</button>
+                <button class="o-livechat-CloseConfirmation-leave btn btn-danger p-2 gap-1" t-on-keydown.stop.prevent="this.onKeydown" t-on-click.stop="() => this.props.onClickLeaveConversation()" t-custom-ref="confirm"><i class="oi oi-fw" data-icon="logout"/>Yes, leave conversation</button>
             </div>
         </div>
     </t>
diff --git a/addons/im_livechat/static/src/core/common/transcript_sender.xml b/addons/im_livechat/static/src/core/common/transcript_sender.xml
index c4425f8de58da5..14e58c53e54d87 100644
--- a/addons/im_livechat/static/src/core/common/transcript_sender.xml
+++ b/addons/im_livechat/static/src/core/common/transcript_sender.xml
@@ -5,12 +5,11 @@
             <div class="input-group">
                 <input t-custom-ref="input" t-on-keydown="this.onKeydown" t-custom-model="this.state.email" t-att-disabled="this.isInputDisabled" type="text" class="form-control" t-att-class="{'bg-view': !this.isInputDisabled}" placeholder="mail@example.com" />
                 <button class="btn btn-primary" type="button" data-action="sendTranscript" t-att-disabled="this.isButtonDisabled" t-on-click="this.onClickSend">
-                    <i class="fa" t-att-class="{
-                        'fa-circle-o-notch fa-spin': this.state.status === this.STATUS.SENDING,
-                        'fa-check': this.state.status === this.STATUS.SENT,
-                        'fa-paper-plane': this.state.status === this.STATUS.IDLE,
-                        'fa-repeat': this.state.status === this.STATUS.FAILED,
-                    }" />
+                    <i class="oi" t-att-class="{
+                        'oi-spin': this.state.status === this.STATUS.SENDING,
+                        'oi-filled': this.state.status === this.STATUS.IDLE,
+                    }"
+                    t-attf-data-icon="{{ this.state.status == this.STATUS.SENDING ? 'autorenew' : this.state.status == this.STATUS.SENT ? 'check' : this.state.status == this.STATUS.IDLE ? 'send' : this.state.status == this.STATUS.FAILED ? 'redo' : '' }}"/>
                 </button>
             </div>
             <div class="form-text ms-1">
diff --git a/addons/im_livechat/static/src/core/public_web/discuss_app/discuss_app_model_patch.js b/addons/im_livechat/static/src/core/public_web/discuss_app/discuss_app_model_patch.js
index 817cb2f68d36d9..14e01e5f11cf75 100644
--- a/addons/im_livechat/static/src/core/public_web/discuss_app/discuss_app_model_patch.js
+++ b/addons/im_livechat/static/src/core/public_web/discuss_app/discuss_app_model_patch.js
@@ -57,7 +57,7 @@ patch(DiscussApp.prototype, {
                 return {
                     extraClass: "o-mail-DiscussSidebarCategory-livechat",
                     hideWhenEmpty: true,
-                    icon: "fa fa-commenting-o",
+                    icon: "mode_comment",
                     id: `im_livechat.category_default`,
                     name: _t("Live Chat"),
                     sequence: 17,
@@ -72,7 +72,7 @@ patch(DiscussApp.prototype, {
                 }
                 return {
                     extraClass: "o-mail-DiscussSidebarCategory-livechatNeedHelp",
-                    icon: "fa fa-exclamation-circle",
+                    icon: "error",
                     id: `im_livechat.category_need_help`,
                     name: _t("Looking for help"),
                     sequence: 15,
diff --git a/addons/im_livechat/static/src/core/public_web/discuss_sidebar_channel_patch.xml b/addons/im_livechat/static/src/core/public_web/discuss_sidebar_channel_patch.xml
index 18816feb0c93d8..7f50ae46b240c3 100644
--- a/addons/im_livechat/static/src/core/public_web/discuss_sidebar_channel_patch.xml
+++ b/addons/im_livechat/static/src/core/public_web/discuss_sidebar_channel_patch.xml
@@ -7,7 +7,7 @@
         <xpath expr="//*[@t-custom-ref='displayNameAdditionalContent']" position="inside">
             <span t-if="this.channel.livechat_lang_id" class="fw-normal small text-uppercase text-muted" t-out="this.channel.livechat_lang_id.baseCode" t-att-title="this.channel.livechat_lang_id.name"/>
             <t t-if="this.channel.livechat_status === 'need_help'">
-                <i t-if="this.channel.matchesSelfExpertise" class="fa fa-star o-mail-favorite" role="image" title="Relevant to your expertise"/>
+                <i t-if="this.channel.matchesSelfExpertise" class="oi oi-filled o-mail-favorite" data-icon="star" role="image" title="Relevant to your expertise"/>
                 <span t-if="this.helpState.text" class="o-livechat-LookingForHelp-timer text-muted fw-normal smaller" t-out="this.helpState.text"/>
             </t>
         </xpath>
diff --git a/addons/im_livechat/static/src/core/public_web/livechat_leave_dialog.xml b/addons/im_livechat/static/src/core/public_web/livechat_leave_dialog.xml
index e50f6463a992e1..95b43c0149655d 100644
--- a/addons/im_livechat/static/src/core/public_web/livechat_leave_dialog.xml
+++ b/addons/im_livechat/static/src/core/public_web/livechat_leave_dialog.xml
@@ -13,7 +13,7 @@
                 Close Conversation
             </button>
             <button class="btn btn-secondary me-2" t-on-click="this.props.close">
-                <i class="oi oi-close me-1 opacity-50"/>
+                <i class="oi me-1 opacity-50" data-icon="close"/>
                 Discard
             </button>
         </t>
diff --git a/addons/im_livechat/static/src/core/public_web/livechat_rating_notification_message.xml b/addons/im_livechat/static/src/core/public_web/livechat_rating_notification_message.xml
index 94f09659adfd81..dd7c5410e5e430 100644
--- a/addons/im_livechat/static/src/core/public_web/livechat_rating_notification_message.xml
+++ b/addons/im_livechat/static/src/core/public_web/livechat_rating_notification_message.xml
@@ -8,7 +8,7 @@
         <div t-out="this.feedback"/>
         <div class="text-end">
             <a class="btn btn-link m-0" t-attf-href="/odoo/discuss?active_id=discuss.channel_{{this.channel.id}}" target="_blank">
-                View Chat <i class="oi oi-arrow-right"/>
+                View Chat <i class="oi" data-icon="east"/>
             </a>
         </div>
     </t>
diff --git a/addons/im_livechat/static/src/core/public_web/messaging_menu_patch.js b/addons/im_livechat/static/src/core/public_web/messaging_menu_patch.js
index 4f31eb990c8c1e..8eb765aee1e126 100644
--- a/addons/im_livechat/static/src/core/public_web/messaging_menu_patch.js
+++ b/addons/im_livechat/static/src/core/public_web/messaging_menu_patch.js
@@ -18,8 +18,7 @@ const messagingMenuPatch = {
                     0
                 ),
                 id: "livechat",
-                icon: "fa fa-commenting-o",
-                activeIcon: "fa fa-commenting",
+                icon: "mode_comment",
                 label: _t("Live Chats"),
                 sequence: 60,
             });
diff --git a/addons/im_livechat/static/src/core/web/channel_invitation_patch.xml b/addons/im_livechat/static/src/core/web/channel_invitation_patch.xml
index f9cc9b0dc26e08..b8a64b2d54f9ca 100644
--- a/addons/im_livechat/static/src/core/web/channel_invitation_patch.xml
+++ b/addons/im_livechat/static/src/core/web/channel_invitation_patch.xml
@@ -4,7 +4,7 @@
         <xpath expr="//*[@name='selectablePartnerName']" position="inside">
             <span t-if="this.props.channel?.channel_type === 'livechat' and selectablePartner.user_livechat_username" t-out="selectablePartner.user_livechat_username" class="text-truncate text-muted smaller mx-2"/>
             <span t-if="this.props.channel?.channel_type === 'livechat' and selectablePartner.is_in_call" class="flex-shrink-0 opacity-75 smaller mx-2">
-                <i class="fa fa-volume-up o-discuss-inCallIconColor me-1"/>
+                <i class="oi o-discuss-inCallIconColor me-1" data-icon="volume_up"/>
                 <span class="o-discuss-ChannelInvitation-inCallTextColor">in a call</span>
             </span>
         </xpath>
@@ -17,7 +17,7 @@
                     </t>
                 </span>
                 <span class="d-flex text-start fs-6 gap-1">
-                    <i t-if="selectablePartner.main_user_id?.livechat_expertise_ids.length" class="fa fa-fw fa-graduation-cap" title="Expertise"/>
+                    <i t-if="selectablePartner.main_user_id?.livechat_expertise_ids.length" class="oi oi-fw" data-icon="school" title="Expertise"/>
                     <t t-foreach="selectablePartner.main_user_id?.livechat_expertise_ids" t-as="expertise" t-key="expertise.id">
                         <span class="badge rounded text-bg-info bg-opacity-75 o-text-white" t-out="expertise.name"/>
                     </t>
diff --git a/addons/im_livechat/static/src/core/web/channel_member_patch.xml b/addons/im_livechat/static/src/core/web/channel_member_patch.xml
index 100d371f8eafe3..2ec78dc057e8cb 100644
--- a/addons/im_livechat/static/src/core/web/channel_member_patch.xml
+++ b/addons/im_livechat/static/src/core/web/channel_member_patch.xml
@@ -4,11 +4,11 @@
         <xpath expr="//*[@t-custom-ref='displayName']" position="inside">
                 <div t-if="this.member.channel_id.channel_type === 'livechat'" class="ms-2 d-flex flex-wrap">
                     <span t-if="this.member.getLangName()" class="me-2">
-                        <i class="fa fa-comment-o me-1" aria-label="Lang"/>
+                        <i class="oi me-1" data-icon="chat_bubble" aria-label="Lang"/>
                         <t t-out="this.member.getLangName()"/>
                     </span>
                     <span t-if="this.member.persona?.country_id or this.member.channel_id.country_id">
-                        <i class="fa fa-globe me-1" aria-label="country"/>
+                        <i class="oi me-1" data-icon="public" aria-label="country"/>
                         <t t-out="this.member.persona?.country_id?.name ?? this.member.channel_id.country_id.name"/>
                     </span>
                 </div>
diff --git a/addons/im_livechat/static/src/core/web/command_palette.xml b/addons/im_livechat/static/src/core/web/command_palette.xml
index 39e81efbc32f54..c410f6a0656b06 100644
--- a/addons/im_livechat/static/src/core/web/command_palette.xml
+++ b/addons/im_livechat/static/src/core/web/command_palette.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="im_livechat.LivechatChannelCommand">
         <div class="o_command_default d-flex align-items-center justify-content-between px-4 py-2">
-            <i class="me-2" t-att-class="this.props.iconClass"/>
+            <i class="oi me-2" t-att-class="this.props.iconClass" t-att-data-icon="this.props.icon"/>
             <span class="flex-grow-1 text-ellipsis">
                 <t t-slot="name"/>
             </span>
diff --git a/addons/im_livechat/static/src/core/web/discuss_app/sidebar/category_patch.js b/addons/im_livechat/static/src/core/web/discuss_app/sidebar/category_patch.js
index 96f22ebdf26a73..70b2d5362942bf 100644
--- a/addons/im_livechat/static/src/core/web/discuss_app/sidebar/category_patch.js
+++ b/addons/im_livechat/static/src/core/web/discuss_app/sidebar/category_patch.js
@@ -18,7 +18,8 @@ const DiscussSidebarCategoryPatch = {
                 onSelect: () =>
                     this.actionService.doAction("im_livechat.im_livechat_channel_action"),
                 label: _t("View or join live chat channels"),
-                icon: "fa fa-cog",
+                icon: "settings",
+                icon_class: "oi-filled",
             });
         }
         return actions;
diff --git a/addons/im_livechat/static/src/core/web/discuss_app/sidebar/category_patch.xml b/addons/im_livechat/static/src/core/web/discuss_app/sidebar/category_patch.xml
index f19a22829e0104..a9d00cfb553e2c 100644
--- a/addons/im_livechat/static/src/core/web/discuss_app/sidebar/category_patch.xml
+++ b/addons/im_livechat/static/src/core/web/discuss_app/sidebar/category_patch.xml
@@ -3,7 +3,8 @@
     <t t-inherit="mail.DiscussSidebarChannel.main" t-inherit-mode="extension">
         <xpath expr="//*[@name='threadAvatar']" position="before">
             <i t-if="this.store.discuss.isSidebarCompact and this.props.channel.discussAppCategory.eq(this.store.discuss.livechatLookingForHelpCategory) and this.props.channel.matchesSelfExpertise"
-               class="fa fa-star o-mail-favorite position-absolute top-0 start-0 z-1"
+               class="oi oi-filled o-mail-favorite position-absolute top-0 start-0 z-1"
+               data-icon="star"
                role="image"
                title="Relevant to your expertise"
             />
@@ -16,14 +17,15 @@
     <t t-name="im_livechat.LivechatStatusLabel">
         <t t-set="btn" t-value="templateParams.btn"/>
         <t t-set="inThreadActions" t-value="templateParams.inThreadActions"/>
-        <span class="o-livechat-LivechatStatusLabel fa" t-att-title="btn.label" t-att-class="{
+        <span class="o-livechat-LivechatStatusLabel" t-att-title="btn.label" t-att-class="{
             'text-success': btn.status === 'in_progress',
             'o-help': btn.status === 'need_help',
         }">
             <i
                  t-if="btn.icon"
-                 class="o-livechat-LivechatStatusLabel-icon"
-                 t-attf-class="{{ btn.icon }}"
+                 class="o-livechat-LivechatStatusLabel-icon oi"
+                 t-attf-class="{{ btn.iconClass }}"
+                 t-attf-data-icon="{{ btn.icon }}"
             />
         </span>
     </t>
@@ -42,11 +44,15 @@
             'bg-info': this.env.inDiscussSidebar and livechatThread.channel.livechat_status === 'need_help' and !livechatThread.channel.self_member_id,
         }">
             <t t-set="livechatStatusButton" t-value="this.store.livechatStatusButtons.find(btn => btn.status === livechatThread.channel.livechat_status)"/>
-            <i class="o-livechat-LivechatStatusLabel-icon" t-attf-class="{{ livechatThread.channel.livechat_end_dt ? ('fa fa-flag-checkered' + (small ? ' o-xsmaller' : '')) : small ? livechatStatusButton?.iconSmall : livechatStatusButton?.icon }}" t-att-class="{
-                'o-white': livechatThread.channel.livechat_end_dt,
+            <i
+                class="o-livechat-LivechatStatusLabel-icon oi"
+                t-att-class="{
+                'o-white': livechatThread.livechat_end_dt,
                 'position-absolute start-0 top-0 z-1 o-inDiscussSidebar rounded-circle o-px-0_5': this.env.inDiscussSidebar,
-                'fa-fw': !this.env.inDiscussSidebar,
-            }"/>
+                'oi-fw': !this.env.inDiscussSidebar,
+                'o-xsmaller': small}"
+                t-attf-data-icon="{{ livechatThread.livechat_end_dt ? 'sports_score' : livechatStatusButton?.icon }}"
+            />
         </span>
     </t>
 
diff --git a/addons/im_livechat/static/src/core/web/livechat_channel_command_provider.js b/addons/im_livechat/static/src/core/web/livechat_channel_command_provider.js
index 210baf630e3bf8..8dc985619df3aa 100644
--- a/addons/im_livechat/static/src/core/web/livechat_channel_command_provider.js
+++ b/addons/im_livechat/static/src/core/web/livechat_channel_command_provider.js
@@ -35,9 +35,12 @@ registry.category("command_provider").add("im_livechat.channel_join_leave", {
                 Component: LivechatChannelCommand,
                 name: c.are_you_inside ? c.leaveTitle : c.joinTitle,
                 props: {
+                    icon: c.are_you_inside
+                        ? "logout"
+                        : "login",
                     iconClass: c.are_you_inside
-                        ? "fa fa-sign-out text-danger"
-                        : "fa fa-sign-in text-success",
+                        ? "text-danger"
+                        : "text-success",
                 },
             }));
     },
diff --git a/addons/im_livechat/static/src/core/web/livechat_channel_info_list.xml b/addons/im_livechat/static/src/core/web/livechat_channel_info_list.xml
index b69b3273c1a9e4..8f52075c082423 100644
--- a/addons/im_livechat/static/src/core/web/livechat_channel_info_list.xml
+++ b/addons/im_livechat/static/src/core/web/livechat_channel_info_list.xml
@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="im_livechat.LivechatChannelInfoList">
-        <ActionPanel close="this.props.close" title.translate="Information" minWidth="200" initialWidth="this.env.inMeetingView ? 400 : 300" icon="'fa fa-info'">
+        <ActionPanel close="this.props.close" title.translate="Information" minWidth="200" initialWidth="this.env.inMeetingView ? 400 : 300" icon="'info'">
             <a t-if="this.visitorProfileURL" class="btn btn-primary mt-1 d-flex align-items-center justify-content-between" t-on-click.prevent="this.openVisitorProfile" t-att-href="this.visitorProfileURL" title="View Contact">
                 <span class="flex-grow-1 text-center">
-                    <i class="fa fa-address-book-o opacity-50 me-1"/>
+                    <i class="oi opacity-50 me-1" data-icon="contact_page"/>
                     View Contact
                 </span>
-                <i class="oi oi-chevron-right opacity-50 small"/>
+                <i class="oi opacity-50 small" data-icon="chevron_forward"/>
             </a>
             <div t-if="!this.props.thread.channel.livechat_end_dt" class="o-livechat-LivechatChannelInfoList d-flex flex-column bg-inherit gap-1">
                 <h6 class="pt-3 mb-1">Status</h6>
@@ -32,7 +32,7 @@
                 <h6 class="pt-3 mb-0">Chatbot answers</h6>
                 <t t-foreach="this.expectAnswerSteps" t-as="step" t-key="step.id">
                     <div class="d-flex align-items-center gap-1 bg-inherit rounded-3">
-                        <i class="fa fa-comment-o me-1"/>
+                        <i class="oi me-1" data-icon="chat_bubble"/>
                         <span class="text-truncate" t-out="step.answer"/>
                     </div>
                 </t>
@@ -52,7 +52,7 @@
             <div t-if="this.props.thread.channel.livechat_end_dt" class="d-flex flex-column bg-inherit gap-1">
                 <h6 class="pt-3 mb-0">Send conversation</h6>
                 <TranscriptSender thread="this.props.thread"/>
-                <a class="btn btn-outline-secondary" title="Download a copy of this conversation" target="_blank" t-att-href="this.props.thread.channel.transcriptUrl"><i class="pe-2 fa fa-download"/>Download</a>
+                <a class="btn btn-outline-secondary" title="Download a copy of this conversation" target="_blank" t-att-href="this.props.thread.channel.transcriptUrl"><i class="pe-2 oi" data-icon="download"/>Download</a>
             </div>
         </ActionPanel>
     </t>
@@ -69,7 +69,7 @@
                     contenteditable="false"
                     target="_blank"
                 >
-                    <i class="fa fa-external-link opacity-75"/>
+                    <i class="oi opacity-75" data-icon="open_in_new"/>
                     <span class="ms-1 fw-bold" t-out="record.name"/>
                 </a>
             </t>
diff --git a/addons/im_livechat/static/src/core/web/store_service_patch.js b/addons/im_livechat/static/src/core/web/store_service_patch.js
index 870290954d14bd..102246ed24c349 100644
--- a/addons/im_livechat/static/src/core/web/store_service_patch.js
+++ b/addons/im_livechat/static/src/core/web/store_service_patch.js
@@ -66,14 +66,13 @@ const storePatch = {
             {
                 label: _t("In progress"),
                 status: "in_progress",
-                icon: "fa fa-comments",
-                iconSmall: "fa fa-comments o-xsmaller",
+                icon: "forum",
+                iconClass: "oi-filled",
             },
             {
                 label: _t("Looking for help"),
                 status: "need_help",
-                icon: "fa fa-lg fa-exclamation-circle",
-                iconSmall: "fa fa-exclamation-circle",
+                icon: "error",
             },
         ];
     },
diff --git a/addons/im_livechat/static/src/core/web/thread_actions.js b/addons/im_livechat/static/src/core/web/thread_actions.js
index 7037cedd44925e..209c9b63fc772c 100644
--- a/addons/im_livechat/static/src/core/web/thread_actions.js
+++ b/addons/im_livechat/static/src/core/web/thread_actions.js
@@ -13,7 +13,7 @@ registerThreadAction("livechat-info", {
         channel?.channel_type === "livechat" &&
         store.self_user?.share === false &&
         !owner.isDiscussSidebarChannelActions,
-    icon: "fa fa-fw fa-info",
+    icon: "info",
     name: _t("Information"),
     actionPanelOpen: ({ store }) => {
         store.discuss.isLivechatInfoPanelOpenByDefault = true;
diff --git a/addons/im_livechat/static/src/core/web/thread_icon_patch.js b/addons/im_livechat/static/src/core/web/thread_icon_patch.js
index bc1830dd22b8aa..3a2fa918f2158a 100644
--- a/addons/im_livechat/static/src/core/web/thread_icon_patch.js
+++ b/addons/im_livechat/static/src/core/web/thread_icon_patch.js
@@ -6,7 +6,7 @@ import { patch } from "@web/core/utils/patch";
 patch(ThreadIcon.prototype, {
     get defaultChatIcon() {
         if (this.channel?.channel_type === "livechat") {
-            return { class: "fa fa-comments opacity-75", title: _t("Live Chat") };
+            return { icon: "forum", class: "opacity-75", title: _t("Live Chat") };
         }
         return super.defaultChatIcon;
     },
diff --git a/addons/im_livechat/static/src/embed/common/boot_helpers.js b/addons/im_livechat/static/src/embed/common/boot_helpers.js
index d25639a630d8aa..72c3bad02aceb8 100644
--- a/addons/im_livechat/static/src/embed/common/boot_helpers.js
+++ b/addons/im_livechat/static/src/embed/common/boot_helpers.js
@@ -63,7 +63,7 @@ export async function loadAssets(styleTarget) {
     const document = styleTarget.ownerDocument;
     await Promise.all([
         loadStyle(styleTarget),
-        loadFont("FontAwesome", url("/im_livechat/font-awesome"), document),
+        loadFont("FontAwesome", url("/im_livechat/material_symbols"), document),
         loadFont("odoo_ui_icons", url("/im_livechat/odoo_ui_icons"), document),
     ]);
 }
diff --git a/addons/im_livechat/static/src/embed/common/feedback_panel/feedback_panel.xml b/addons/im_livechat/static/src/embed/common/feedback_panel/feedback_panel.xml
index 0161cbe96cda50..0586c88f0a04c4 100644
--- a/addons/im_livechat/static/src/embed/common/feedback_panel/feedback_panel.xml
+++ b/addons/im_livechat/static/src/embed/common/feedback_panel/feedback_panel.xml
@@ -28,7 +28,7 @@
         <div class="d-flex gap-2 justify-content-center">
             <button class="btn btn-outline-secondary" t-on-click="this.props.onClickClose">Close</button>
             <button t-if="this.allowNewSession" class="btn btn-outline-secondary" t-on-click="this.props.onClickNewSession">New Session</button>
-            <a t-if="this.store.can_download_transcript" class="btn btn-outline-secondary" title="Download a copy of this conversation" target="_blank" t-att-href="this.props.thread.channel?.transcriptUrl"><i class="fa fa-download"/></a>
+            <a t-if="this.store.can_download_transcript" class="btn btn-outline-secondary" title="Download a copy of this conversation" target="_blank" t-att-href="this.props.thread.channel?.transcriptUrl"><i class="oi" data-icon="download"/></a>
         </div>
     </div>
 </div>
diff --git a/addons/im_livechat/static/src/embed/common/livechat_button.xml b/addons/im_livechat/static/src/embed/common/livechat_button.xml
index a8df252710392a..9fee6c5bb74d5f 100644
--- a/addons/im_livechat/static/src/embed/common/livechat_button.xml
+++ b/addons/im_livechat/static/src/embed/common/livechat_button.xml
@@ -11,7 +11,7 @@
         t-on-click="this.onClick"
         title="Chat with us"
     >
-        <i class="fa fa-commenting" style="font-size: 22px;"/>
+        <i class="oi oi-filled" data-icon="mode_comment" style="font-size: 22px;"/>
         <div t-if="this.store.livechat_rule?.action === 'display_button_and_text'" class="o-livechat-LivechatButton-notification text-nowrap position-absolute bg-100 py-2 px-3 rounded" style="max-width: 75vw;" t-att-class="{'o-livechat-LivechatButton-animate': this.state.animateNotification}">
             <p class="m-0 text-dark text-truncate" t-out="this.livechatService.options.button_text"/>
         </div>
diff --git a/addons/im_livechat/static/src/embed/common/thread_actions.js b/addons/im_livechat/static/src/embed/common/thread_actions.js
index ae482ef2b19acb..ad934bd8ef8129 100644
--- a/addons/im_livechat/static/src/embed/common/thread_actions.js
+++ b/addons/im_livechat/static/src/embed/common/thread_actions.js
@@ -7,7 +7,7 @@ import { patch } from "@web/core/utils/patch";
 registerThreadAction("restart", {
     condition: ({ channel, owner }) =>
         channel?.chatbot?.canRestart && !owner.isDiscussSidebarChannelActions,
-    icon: "fa fa-fw fa-refresh",
+    icon: "refresh",
     name: _t("Restart Conversation"),
     onSelected: ({ channel, owner }) => {
         channel.chatbot.restart();
diff --git a/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.xml b/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.xml
index d6ee6ed6062178..ef07bc8a9785e9 100644
--- a/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.xml
+++ b/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.xml
@@ -3,7 +3,7 @@
 
     <t t-name="im_livechat.ColorsResetButton">
         <button class="btn btn-link oe_edit_only" t-on-click="this.onColorsResetButtonClick" aria-label="Reset to default colors" title="Reset to default colors">
-            <span class="fa fa-refresh mb-4"/>
+            <span class="oi mb-4" data-icon="refresh"/>
         </button>
     </t>
 
diff --git a/addons/im_livechat/static/src/views/boolean_phone/boolean_phone.xml b/addons/im_livechat/static/src/views/boolean_phone/boolean_phone.xml
index b43a45318f0435..8f81baa32d39fd 100644
--- a/addons/im_livechat/static/src/views/boolean_phone/boolean_phone.xml
+++ b/addons/im_livechat/static/src/views/boolean_phone/boolean_phone.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="im_livechat.BooleanPhoneField">
-        <i t-if="this.state.value" class="fa fa-fw fa-phone" role="img" title="In a Call"/>
+        <i t-if="this.state.value" class="oi oi-fw oi-filled" data-icon="phone" role="img" title="In a Call"/>
     </t>
 </templates>
diff --git a/addons/im_livechat/static/tests/chat_hub_compact.test.js b/addons/im_livechat/static/tests/chat_hub_compact.test.js
index 9810e98455719e..aae3009c447628 100644
--- a/addons/im_livechat/static/tests/chat_hub_compact.test.js
+++ b/addons/im_livechat/static/tests/chat_hub_compact.test.js
@@ -24,7 +24,7 @@ test("Do not open chat windows automatically when chat hub is compact", async ()
     await start();
     await click("button[title='Chat Options']");
     await click(".o-dropdown-item", { text: "Hide all conversations" });
-    await contains(".o-mail-ChatHub-bubbleBtn .fa-comments");
+    await contains(".o-mail-ChatHub-bubbleBtn [data-icon='forum']");
     await withGuest(guestId, () =>
         rpc("/mail/message/post", {
             post_data: {
diff --git a/addons/im_livechat/static/tests/embed/chat_window.test.js b/addons/im_livechat/static/tests/embed/chat_window.test.js
index 82a6d12c7c2e9e..00b33e8e5fc228 100644
--- a/addons/im_livechat/static/tests/embed/chat_window.test.js
+++ b/addons/im_livechat/static/tests/embed/chat_window.test.js
@@ -36,7 +36,7 @@ test("internal users can upload file to temporary thread", async () => {
     await click(".o-mail-Composer button[title='More Actions']");
     await contains(".dropdown-item:contains('Attach files')");
     await inputFiles(".o-mail-Composer .o_input_file", [file]);
-    await contains(".o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt) .fa-check");
+    await contains(".o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt) [data-icon='check']");
     await triggerHotkey("Enter");
     await contains(".o-mail-Message .o-mail-AttachmentContainer:contains(text.txt)");
 });
diff --git a/addons/im_livechat/static/tests/looking_for_help.test.js b/addons/im_livechat/static/tests/looking_for_help.test.js
index 0c58937863de7b..e35f7978caf202 100644
--- a/addons/im_livechat/static/tests/looking_for_help.test.js
+++ b/addons/im_livechat/static/tests/looking_for_help.test.js
@@ -44,7 +44,7 @@ test("Show looking for help in the sidebar while active or still seeking help",
     });
     await start();
     await openDiscuss();
-    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp .oi-chevron-down");
+    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp [data-icon='keyboard_arrow_down']");
     await contains(".o-mail-DiscussSidebarChannel", { text: "bob" });
     await waitForChannels(["im_livechat.looking_for_help"]);
     await rpc("/im_livechat/session/update_status", {
@@ -104,21 +104,21 @@ test("Enable/disable looking for help when category is opened/folded", async ()
         }
     });
     await openDiscuss();
-    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp .oi-chevron-right");
+    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp [data-icon='chevron_forward']");
     await expect.waitForSteps([]);
     await click(".o-mail-DiscussSidebarCategory-livechatNeedHelp button");
-    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp .oi-chevron-down");
+    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp [data-icon='keyboard_arrow_down']");
     await expect.waitForSteps([
         "addChannel - im_livechat.looking_for_help",
         "fetch looking_for_help",
     ]);
     await click(".o-mail-DiscussSidebarCategory-livechatNeedHelp button");
-    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp .oi-chevron-right");
+    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp [data-icon='chevron_forward']");
     await expect.waitForSteps([]);
     await advanceTime(LFH_UNSUBSCRIBE_DELAY + 1000);
     await expect.waitForSteps(["deleteChannel - im_livechat.looking_for_help"]);
     await click(".o-mail-DiscussSidebarCategory-livechatNeedHelp button");
-    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp .oi-chevron-down");
+    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp [data-icon='keyboard_arrow_down']");
     await expect.waitForSteps([
         "addChannel - im_livechat.looking_for_help",
         "fetch looking_for_help",
@@ -143,7 +143,7 @@ test("Show join button when help is required and self is not a member", async ()
     });
     await start();
     await openDiscuss(channel);
-    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp .oi-chevron-down");
+    await contains(".o-mail-DiscussSidebarCategory-livechatNeedHelp [data-icon='keyboard_arrow_down']");
     await contains(".o-livechat-LivechatStatusSelection .active", { text: "Looking for help" });
     await click("button[name='join-channel']");
     await contains(".o-livechat-LivechatStatusSelection .active", { text: "In progress" });
diff --git a/addons/im_livechat/static/tests/sidebar_patch.test.js b/addons/im_livechat/static/tests/sidebar_patch.test.js
index f8ef2fce7d0eff..ffa242b6d8da04 100644
--- a/addons/im_livechat/static/tests/sidebar_patch.test.js
+++ b/addons/im_livechat/static/tests/sidebar_patch.test.js
@@ -349,11 +349,11 @@ test("Local sidebar category state is shared between tabs", async () => {
     const env2 = await start({ asTab: true });
     await openDiscuss(undefined, { target: env1 });
     await openDiscuss(undefined, { target: env2 });
-    await contains(`${env1.selector} .o-mail-DiscussSidebarCategory-livechat .oi-chevron-down`);
-    await contains(`${env2.selector} .o-mail-DiscussSidebarCategory-livechat .oi-chevron-down`);
+    await contains(`${env1.selector} .o-mail-DiscussSidebarCategory-livechat [data-icon='keyboard_arrow_down']`);
+    await contains(`${env2.selector} .o-mail-DiscussSidebarCategory-livechat [data-icon='keyboard_arrow_down']`);
     await click(`${env1.selector} .o-mail-DiscussSidebarCategory-livechat .btn`);
-    await contains(`${env1.selector} .o-mail-DiscussSidebarCategory-livechat .oi-chevron-right`);
-    await contains(`${env2.selector} .o-mail-DiscussSidebarCategory-livechat .oi-chevron-right`);
+    await contains(`${env1.selector} .o-mail-DiscussSidebarCategory-livechat [data-icon='chevron_forward']`);
+    await contains(`${env2.selector} .o-mail-DiscussSidebarCategory-livechat [data-icon='chevron_forward']`);
 });
 
 test("live chat is displayed in the Live Chat category", async () => {
@@ -514,7 +514,7 @@ test("sidebar: leave non-livechat channel removes it from sidebar", async () =>
     await start();
     await openDiscuss();
     await click(".o-mail-DiscussSidebarChannel-itemName:text('General')");
-    await click(".o-mail-DiscussSidebarChannel:text('General') .oi-ellipsis-h");
+    await click(".o-mail-DiscussSidebarChannel:text('General') [data-icon='more_horiz']");
     await click(".o-dropdown-item:contains('Leave Channel')");
     await contains(
         ".modal-body:text('You are about to leave this group conversation and will no longer have access to it unless you are invited again. Are you sure you want to continue?')"
diff --git a/addons/im_livechat/static/tests/thread_icon_patch.test.js b/addons/im_livechat/static/tests/thread_icon_patch.test.js
index 0acbc8e7eb63f2..92e81114737b5c 100644
--- a/addons/im_livechat/static/tests/thread_icon_patch.test.js
+++ b/addons/im_livechat/static/tests/thread_icon_patch.test.js
@@ -21,7 +21,7 @@ test("Public website visitor is typing", async () => {
     });
     await start();
     await openDiscuss(channelId);
-    await contains(".o-mail-DiscussContent-header .o-mail-ImStatus.fa.fa-circle-o");
+    await contains(".o-mail-DiscussContent-header .o-mail-ImStatus[data-icon='circle']");
     const channel = pyEnv["discuss.channel"].search_read([["id", "=", channelId]])[0];
     // simulate receive typing notification from livechat visitor "is typing"
     withGuest(guestId, () =>
diff --git a/addons/im_livechat/static/tests/tours/im_livechat_session_history_open.js b/addons/im_livechat/static/tests/tours/im_livechat_session_history_open.js
index 32cc7321a79623..2f04ad1408b706 100644
--- a/addons/im_livechat/static/tests/tours/im_livechat_session_history_open.js
+++ b/addons/im_livechat/static/tests/tours/im_livechat_session_history_open.js
@@ -36,7 +36,7 @@ registry.category("web_tour.tours").add("im_livechat_session_history_open", {
             },
         },
         {
-            trigger: ".oi-chevron-right",
+            trigger: "[data-icon='chevron_forward']",
             run: "click",
         },
         {
diff --git a/addons/im_livechat/static/tests/upgrade_19_1.test.js b/addons/im_livechat/static/tests/upgrade_19_1.test.js
index 053b1e334df7e7..8f69ea92a75c7c 100644
--- a/addons/im_livechat/static/tests/upgrade_19_1.test.js
+++ b/addons/im_livechat/static/tests/upgrade_19_1.test.js
@@ -29,7 +29,7 @@ test("category 'Livechat' is folded", async () => {
     localStorage.setItem("discuss_sidebar_category_folded_im_livechat.category_default", "true");
     await start();
     await openDiscuss();
-    await contains(".o-mail-DiscussSidebarCategory:contains('Live Chat') .oi.oi-chevron-right");
+    await contains(".o-mail-DiscussSidebarCategory:contains('Live Chat') .oi[data-icon='chevron_forward']");
     const defaultLivechat_is_open = makeRecordFieldLocalId(
         DiscussAppCategory.localId("im_livechat.category_default"),
         "is_open"
diff --git a/addons/im_livechat/views/chatbot_script_views.xml b/addons/im_livechat/views/chatbot_script_views.xml
index d21c16aac8f029..41361a91e99a10 100644
--- a/addons/im_livechat/views/chatbot_script_views.xml
+++ b/addons/im_livechat/views/chatbot_script_views.xml
@@ -21,7 +21,7 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button name="action_view_livechat_channels" type="object" class="oe_stat_button"
-                                icon="fa-comments" invisible="livechat_channel_count == 0">
+                                icon="forum" icon_class="oi-filled" invisible="livechat_channel_count == 0">
                             <field name="livechat_channel_count" string="Channels" widget="statinfo"/>
                         </button>
                     </div>
diff --git a/addons/im_livechat/views/im_livechat_channel_views.xml b/addons/im_livechat/views/im_livechat_channel_views.xml
index 6d7971b448c678..cffa2e6773792f 100644
--- a/addons/im_livechat/views/im_livechat_channel_views.xml
+++ b/addons/im_livechat/views/im_livechat_channel_views.xml
@@ -59,7 +59,7 @@
                                 <footer class="pt-0">
                                     <field name="available_operator_ids" widget="many2many_avatar_user" readonly="True"/>
                                     <a t-if="record.rating_count.raw_value > 0" name="action_view_rating" class="ms-auto fs-6" type="object" tabindex="10" title="Percentage of positive ratings in the last 30 days">
-                                        <i class="fa fa-smile-o text-success" role="img" aria-label="Happy face"/> <field name="rating_percentage_satisfaction"/>%
+                                        <i class="oi text-success" data-icon="sentiment_satisfied" role="img" aria-label="Happy face"/> <field name="rating_percentage_satisfaction"/>%
                                     </a>
                                 </footer>
                             </main>
@@ -82,11 +82,11 @@
                     <sheet>
                         <field name="rating_count" invisible="1"/>
                         <div class="oe_button_box" name="button_box">
-                            <button class="oe_stat_button" type="object" name="action_view_chatbot_scripts" icon="fa-android"
+                            <button class="oe_stat_button" type="object" name="action_view_chatbot_scripts" icon="oi_android"
                                 invisible="chatbot_script_count == 0" groups="im_livechat.im_livechat_group_manager">
                                 <field string="Chatbots" name="chatbot_script_count" widget="statinfo"/>
                             </button>
-                            <button class="oe_stat_button" type="action" invisible="nbr_channel == 0" title="Number of conversations and percentage of positive ratings in the last 30 days" name="%(discuss_channel_action_from_livechat_channel)d" icon="fa-comments">
+                            <button class="oe_stat_button" type="action" invisible="nbr_channel == 0" title="Number of conversations and percentage of positive ratings in the last 30 days" name="%(discuss_channel_action_from_livechat_channel)d" icon="forum" icon_class="oi-filled">
                                 <div>
                                     <div class="o_stat_info flex-row-reverse align-items-baseline gap-1 me-1">
                                         <span class="o_stat_value"><field name="nbr_channel"/></span>
@@ -131,7 +131,7 @@
                                                         <div class="d-flex justify-content-between align-items-baseline">
                                                             <field name="name" class="fw-bold fs-5"/>
                                                             <a class="btn p-0 opacity-75 opacity-100-hover" role="button" groups="im_livechat.im_livechat_group_manager" type="delete">
-                                                                <i title="Remove operator" class="fa fa-fw fa-lg fa-close"/>
+                                                                <i title="Remove operator" class="oi oi-fw oi-lg" data-icon="close"/>
                                                             </a>
                                                         </div>
                                                         <field t-if="record.livechat_lang_ids.raw_value.length > 0" name="livechat_lang_ids" widget="many2many_tags"/>
@@ -207,7 +207,7 @@
                                 <div class="text-muted" colspan="2">
                                     To apply the rule only to certain pages of your website, enter a URL regex like /shop. This will match any page that starts with /shop, such as /shop/product. Leave the field empty to apply the rule to all pages.<br/>
                                     For on-premise databases, GeoIP must be installed on your server to geolocate visitors. Without it, rules that include country restrictions will be ignored.
-                                    <widget name="documentation_link" path="/administration/on_premise/geo_ip.html" icon="fa-fw fa-info-circle"/>
+                                    <widget name="documentation_link" path="/administration/on_premise/geo_ip.html" icon="info" icon_class="oi-fw"/>
                                 </div>
                             </page>
                             <page string="Widget" name="configuration_widget" groups="im_livechat.im_livechat_group_manager">
diff --git a/addons/im_livechat/views/im_livechat_chatbot_templates.xml b/addons/im_livechat/views/im_livechat_chatbot_templates.xml
index 63ae424a8de1b8..2fe5fb459dd848 100644
--- a/addons/im_livechat/views/im_livechat_chatbot_templates.xml
+++ b/addons/im_livechat/views/im_livechat_chatbot_templates.xml
@@ -21,7 +21,7 @@
                             <a t-attf-href="/odoo/action-im_livechat.chatbot_script_action/#{chatbot_script.id}">
                                 <span>You are currently testing</span>
                                 <span t-out="chatbot_name"/>
-                                <i class="oi oi-fw oi-arrow-right"/>Back to edit mode
+                                <i class="oi oi-fw" data-icon="east"/>Back to edit mode
                             </a>
                         </div>
                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
diff --git a/addons/im_livechat/views/res_partner_views.xml b/addons/im_livechat/views/res_partner_views.xml
index 5a1263cdff7ee0..d5d1b42a0d6b27 100644
--- a/addons/im_livechat/views/res_partner_views.xml
+++ b/addons/im_livechat/views/res_partner_views.xml
@@ -14,7 +14,8 @@
                         type="object"
                         name="action_view_livechat_sessions"
                         invisible="not livechat_channel_count"
-                        icon="fa-comments"
+                        icon="forum"
+                        icon_class="oi-filled"
                     >
                         <field string="Live Chats" name="livechat_channel_count" widget="statinfo"/>
                     </button>
diff --git a/addons/iot_drivers/static/src/app/components/dialog/device_dialog.js b/addons/iot_drivers/static/src/app/components/dialog/device_dialog.js
index f6cfafc8ac77cb..e73b40b4c18762 100644
--- a/addons/iot_drivers/static/src/app/components/dialog/device_dialog.js
+++ b/addons/iot_drivers/static/src/app/components/dialog/device_dialog.js
@@ -6,24 +6,24 @@ import { Dialog } from "./dialog.js";
 const { Component, xml } = owl;
 
 export const DEVICE_ICONS = {
-    camera: "fa-camera",
-    device: "fa-plug",
-    display: "fa-desktop",
-    fiscal_data_module: "fa-dollar",
-    keyboard: "fa-keyboard-o",
-    payment: "fa-credit-card",
-    printer: "fa-print",
-    scale: "fa-balance-scale",
-    scanner: "fa-barcode",
-    unsupported: "fa-question",
+    camera: "photo_camera",
+    device: "power",
+    display: "desktop_windows",
+    fiscal_data_module: "attach_money",
+    keyboard: "keyboard",
+    payment: "credit_card",
+    printer: "print",
+    scale: "balance",
+    scanner: "barcode",
+    unsupported: "help",
 };
 
 export const CONNECTION_ICONS = {
-    hdmi: "fa-desktop",
-    direct: "fa-usb",
-    serial: "fa-usb",
-    network: "fa-sitemap",
-    bluetooth: "fa-bluetooth",
+    hdmi: "desktop_windows",
+    direct: "usb",
+    serial: "usb",
+    network: "account_tree",
+    bluetooth: "bluetooth",
 };
 
 export class DeviceDialog extends Component {
@@ -63,7 +63,7 @@ export class DeviceDialog extends Component {
                     <div t-foreach="Object.keys(devices)" t-as="deviceType" t-key="deviceType" class="accordion-item">
                         <h2 class="accordion-header" t-att-id="'heading-' + deviceType">
                             <button class="accordion-button px-3 d-flex gap-3 collapsed" type="button" data-bs-toggle="collapse" t-att-data-bs-target="'#collapse-' + deviceType" t-att-aria-controls="'collapse-' + deviceType">
-                                <span t-att-class="'color-primary fa fa-fw fa-2x ' + icons[deviceType]"/>
+                                <span class="oi oi-fw oi-2x" t-att-data-icon="icons[deviceType]"/>
                                 <span class="fs-5 fw-bold" t-out="devices[deviceType].length"/>
                                 <span class="fs-5" t-out="formatDeviceType(deviceType, devices[deviceType].length)"/>
                             </button>
@@ -73,7 +73,7 @@ export class DeviceDialog extends Component {
                                 <div t-foreach="devices[deviceType]" t-as="device" t-key="device.identifier" class="d-flex flex-column bg-light rounded p-2 gap-1">
                                     <span t-out="device.name" class="one-line"/>
                                     <span class="text-secondary one-line">
-                                        <span t-att-class="'me-2 fa fa-fw ' + connectionIcons[device.connection]"/>
+                                        <span class="oi oi-fw me-2" t-att-data-icon="connectionIcons[device.connection]"/>
                                         <t t-out="device.identifier"/>
                                     </span>
                                 </div>
diff --git a/addons/iot_drivers/static/src/app/components/dialog/dialog.js b/addons/iot_drivers/static/src/app/components/dialog/dialog.js
index 5aa3b643f406c8..ff42ed1cfa86d5 100644
--- a/addons/iot_drivers/static/src/app/components/dialog/dialog.js
+++ b/addons/iot_drivers/static/src/app/components/dialog/dialog.js
@@ -51,7 +51,7 @@ export class Dialog extends Component {
                 <div class="modal-content">
                     <div class="modal-header gap-1">
                         <t t-out="props.name"/>
-                        <a t-if="props.help" t-att-href="props.help" class="fa fa-question-circle text-decoration-none text-dark" target="_blank"/>
+                        <a t-if="props.help" t-att-href="props.help" class="oi text-decoration-none text-dark" data-icon="help" target="_blank"/>
                     </div>
                     <div class="modal-body position-relative dialog-body">
                         <t t-slot="body" />
diff --git a/addons/iot_drivers/static/src/app/components/dialog/wifi_dialog.js b/addons/iot_drivers/static/src/app/components/dialog/wifi_dialog.js
index 3e2a07d18cdbcc..939183342dfd76 100644
--- a/addons/iot_drivers/static/src/app/components/dialog/wifi_dialog.js
+++ b/addons/iot_drivers/static/src/app/components/dialog/wifi_dialog.js
@@ -162,7 +162,7 @@ export class WifiDialog extends Component {
                     <div class="mb-3 d-flex gap-1">
                         <input name="password" t-att-type="state.isPasswordVisible ? '' : 'password'" class="form-control" aria-label="Username" aria-describedby="basic-addon1" t-model="this.form.password" placeholder="Wi-Fi password"/>
                         <button class="btn btn-secondary" type="button" t-on-click="togglePasswordVisibility">
-                            <i t-att-class="'fa fa-eye' + (state.isPasswordVisible ? '-slash' : '')"></i>
+                            <i class="oi" t-att-data-icon="state.isPasswordVisible ? 'visibility_off' : 'visibility'"></i>
                         </button>
                     </div>
                 </div>
diff --git a/addons/iot_drivers/static/src/app/components/icon_button.js b/addons/iot_drivers/static/src/app/components/icon_button.js
index ca82c6d55d0039..bdcfe390383905 100644
--- a/addons/iot_drivers/static/src/app/components/icon_button.js
+++ b/addons/iot_drivers/static/src/app/components/icon_button.js
@@ -8,6 +8,7 @@ export class IconButton extends Component {
     static props = {
         onClick: Function,
         icon: String,
+        icon_class: String,
     };
 
     setup() {
@@ -16,7 +17,7 @@ export class IconButton extends Component {
 
     static template = xml`
     <div class="d-flex align-items-center justify-content-center icon-button btn btn-primary" t-translation="off" t-on-click="this.props.onClick">
-        <i class="fa" t-att-class="this.props.icon" aria-hidden="true"></i>
+        <i class="oi" t-att-class="this.props.icon_class" t-att-data-icon="this.props.icon" aria-hidden="true"></i>
     </div>
   `;
 }
diff --git a/addons/iot_drivers/static/src/app/components/single_data.js b/addons/iot_drivers/static/src/app/components/single_data.js
index 97b1ee788ff4a2..f718fd227c809b 100644
--- a/addons/iot_drivers/static/src/app/components/single_data.js
+++ b/addons/iot_drivers/static/src/app/components/single_data.js
@@ -7,6 +7,7 @@ export class SingleData extends Component {
         name: String,
         value: String,
         icon: { type: String, optional: true },
+        icon_class: { type: String, optional: true },
         style: { type: String, optional: true },
         slots: { type: Object, optional: true },
         btnName: { type: String, optional: true },
@@ -33,7 +34,7 @@ export class SingleData extends Component {
         <div t-att-class="this.props.style === 'primary' ? 'odoo-bg-primary' : 'odoo-bg-secondary'" class="rounded odoo-pill" />
         <div class="flex-grow-1 overflow-hidden">
             <h6 class="m-0">
-                <i t-if="this.props.icon" class="me-2 fa" t-att-class="this.props.icon" aria-hidden="true"></i>
+                <i t-if="this.props.icon" class="oi me-2" t-att-class="this.props.icon_class" t-att-data-icon="this.props.icon" aria-hidden="true"></i>
                 <t t-esc="this.props.name" />
             </h6>
             <p t-if="!this.valueIsURL" class="m-0 text-secondary one-line" t-esc="this.props.value or 'Not Configured'" />
diff --git a/addons/iot_drivers/static/src/app/homepage.js b/addons/iot_drivers/static/src/app/homepage.js
index 2f9fb8424e3b3c..dfb97b0f609358 100644
--- a/addons/iot_drivers/static/src/app/homepage.js
+++ b/addons/iot_drivers/static/src/app/homepage.js
@@ -114,8 +114,8 @@ export class Homepage extends Component {
         <div t-if="!this.state.loading" class="w-100 d-flex flex-column align-items-center justify-content-center background">
             <div class="bg-white p-4 rounded overflow-auto position-relative w-100 main-container">
                 <div class="position-absolute end-0 top-0 mt-3 me-4 d-flex gap-1">
-                    <IconButton t-if="!store.base.is_access_point_up" onClick.bind="toggleAdvanced" icon="this.store.advanced ? 'fa-cog' : 'fa-cogs'" />
-                    <IconButton onClick.bind="restartOdooService" icon="'fa-power-off'" />
+                    <IconButton t-if="!store.base.is_access_point_up" onClick.bind="toggleAdvanced" icon="this.store.advanced ? 'settings' : 'settings_applications'" icon_class="this.store.advanced ? 'oi-filled' : ''"/>
+                    <IconButton onClick.bind="restartOdooService" icon="'power_settings_new'" />
                 </div>
                 <div class="d-flex mb-4 flex-column align-items-center justify-content-center">
                     <h4 class="text-center m-0">IoT Box</h4>
@@ -138,32 +138,32 @@ export class Homepage extends Component {
                         Please connect your IoT Box to internet via an ethernet cable or via Wi-Fi by clicking on "Configure" below
                     </small>
                 </div>
-                <SingleData name="'Identifier'" value="state.data.identifier" icon="'fa-address-card'" />
-                <SingleData t-if="store.advanced" name="'Mac Address'" value="state.data.mac_address" icon="'fa-address-book'" />
-                <SingleData t-if="store.advanced" name="'Version'" value="state.data.version" icon="'fa-microchip'">
+                <SingleData name="'Identifier'" value="state.data.identifier" icon="'contact_mail'" icon_class="'oi-filled'" />
+                <SingleData t-if="store.advanced" name="'Mac Address'" value="state.data.mac_address" icon="'contact_page'" icon_class="'oi-filled'" />
+                <SingleData t-if="store.advanced" name="'Version'" value="state.data.version" icon="'memory'">
                     <t t-set-slot="button">
                         <UpdateDialog />
                     </t>
                 </SingleData>
-                <SingleData t-if="store.advanced" name="'IP address'" value="state.data.ip" icon="'fa-globe'" />
-                <SingleData t-if="store.isLinux" name="'Internet Status'" value="networkStatus" icon="'fa-wifi'">
+                <SingleData t-if="store.advanced" name="'IP address'" value="state.data.ip" icon="'public'" />
+                <SingleData t-if="store.isLinux" name="'Internet Status'" value="networkStatus" icon="'wifi'">
                     <t t-set-slot="button">
                         <WifiDialog />
                     </t>
                 </SingleData>
-                <SingleData t-if="!store.base.is_access_point_up" name="'Odoo database connected'" value="state.data.server_status" icon="'fa-link'">
+                <SingleData t-if="!store.base.is_access_point_up" name="'Odoo database connected'" value="state.data.server_status" icon="'link'">
                     <t t-set-slot="button">
                         <DatabaseDialog />
                     </t>
                 </SingleData>
-                <SingleData t-if="state.data.pairing_code and !this.store.base.is_access_point_up and !state.data.pairing_code_expired" name="'Pairing Code'" value="state.data.pairing_code + ' - Enter this code in the IoT app in your Odoo database'" icon="'fa-code'"/>
-                <SingleData t-if="state.data.pairing_code_expired" name="'Pairing Code'" value="'Code has expired - restart the IoT Box to generate a new one'" icon="'fa-code'"/>
-                <SingleData  t-if="store.advanced and !store.base.is_access_point_up" name="'Six terminal'" value="state.data.six_terminal" icon="'fa-money'">
+                <SingleData t-if="state.data.pairing_code and !this.store.base.is_access_point_up and !state.data.pairing_code_expired" name="'Pairing Code'" value="state.data.pairing_code + ' - Enter this code in the IoT app in your Odoo database'" icon="'code'"/>
+                <SingleData t-if="state.data.pairing_code_expired" name="'Pairing Code'" value="'Code has expired - restart the IoT Box to generate a new one'" icon="'code'"/>
+                <SingleData  t-if="store.advanced and !store.base.is_access_point_up" name="'Six terminal'" value="state.data.six_terminal" icon="'payments'">
                     <t t-set-slot="button">
                         <SixTerminalDialog />
                     </t>
                 </SingleData>
-                <SingleData t-if="!this.store.base.is_access_point_up" name="'Devices'" value="numDevices + ' devices'" icon="'fa-plug'">
+                <SingleData t-if="!this.store.base.is_access_point_up" name="'Devices'" value="numDevices + ' devices'" icon="'power'">
                     <t t-set-slot="button">
                         <DeviceDialog />
                     </t>
diff --git a/addons/iot_drivers/static/src/app/status.js b/addons/iot_drivers/static/src/app/status.js
index 5aab85cd74f817..7f41727b18a35e 100644
--- a/addons/iot_drivers/static/src/app/status.js
+++ b/addons/iot_drivers/static/src/app/status.js
@@ -124,15 +124,15 @@ class StatusPage extends Component {
                     <table class="table table-hover table-sm">
                         <tbody>
                             <tr>
-                                <td class="col-3"><i class="me-1 fa fa-fw fa-id-card"/>Identifier</td>
+                                <td class="col-3"><i class="oi oi-fw oi-filled me-1" data-icon="badge"/>Identifier</td>
                                 <td class="col-3" t-out="state.data.identifier"/>
                             </tr>
                             <tr>
-                                <td class="col-3"><i class="me-1 fa fa-fw fa-address-book"/>Mac Address</td>
+                                <td class="col-3"><i class="oi oi-fw oi-filled me-1" data-icon="contact_page"/>Mac Address</td>
                                 <td class="col-3" t-out="state.data.mac_address"/>
                             </tr>
                             <tr t-if="state.data.server_status">
-                                <td class="col-3"><i class="me-1 fa fa-fw fa-database"/>Database</td>
+                                <td class="col-3"><i class="oi oi-fw me-1" data-icon="database"/>Database</td>
                                 <td class="col-3" t-out="state.data.server_status"/>
                             </tr>
                         </tbody>
@@ -142,7 +142,7 @@ class StatusPage extends Component {
                     <table class="table table-hover table-sm" t-if="state.data.network_interfaces.length > 0">
                         <tbody>
                             <tr t-foreach="state.data.network_interfaces" t-as="interface" t-key="interface.id">
-                                <td class="col-3"><i t-att-class="'me-1 fa fa-fw fa-' + (interface.is_wifi ? 'wifi' : 'sitemap')"/><t t-out="interface.is_wifi ? interface.ssid : 'Ethernet'"/></td>
+                                <td class="col-3"><i class="oi oi-fw me-1" t-att-data-icon="'interface.is_wifi ? 'wifi' : 'account_tree'"/><t t-out="interface.is_wifi ? interface.ssid : 'Ethernet'"/></td>
                                 <td class="col-3" t-out="interface.ip"/>
                             </tr>
                         </tbody>
@@ -153,7 +153,7 @@ class StatusPage extends Component {
                             <tbody>
                                 <tr t-foreach="Object.keys(state.data.devices)" t-as="deviceType" t-key="deviceType">
                                     <td class="device-type col-3">
-                                        <i t-att-class="'me-1 fa fa-fw fa- ' + icons[deviceType]"/>
+                                        <i class="oi oi-fw me-1" t-att-data-icon="icons[deviceType]"/>
                                         <t t-out="deviceType.replaceAll('_', ' ') + (deviceType === 'unsupported' ? '' : 's')"/>
                                     </td>
                                     <td class="col-3">
diff --git a/addons/iot_drivers/views/index.html b/addons/iot_drivers/views/index.html
index a0b60f274aafea..a820c8340cf0d6 100644
--- a/addons/iot_drivers/views/index.html
+++ b/addons/iot_drivers/views/index.html
@@ -35,7 +35,7 @@
 
         <link href="/web/static/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
         <link href="/iot_drivers/static/src/app/css/homepage.css" rel="stylesheet"/>
-        <link href="/web/static/src/libs/fontawesome/css/font-awesome.css" rel="stylesheet"/>
+        <link href="/web/static/src/libs/materialsymbols/materialsymbols.css" rel="stylesheet"/>
 
         <link rel="icon" type="image/png" href="/iot_drivers/static/img/favicon.png">
     </head>
diff --git a/addons/iot_drivers/views/status_display.html b/addons/iot_drivers/views/status_display.html
index 54194d5a794b13..f0f2402f05680b 100644
--- a/addons/iot_drivers/views/status_display.html
+++ b/addons/iot_drivers/views/status_display.html
@@ -9,7 +9,7 @@
         <script src="/web/static/lib/owl/owl.js"></script>
 
         <link class="origin" rel="stylesheet" href="/web/static/lib/bootstrap/dist/css/bootstrap.css">
-        <link class="origin" rel="stylesheet" href="/web/static/src/libs/fontawesome/css/font-awesome.css"/>
+        <link class="origin" rel="stylesheet" href="/web/static/src/libs/materialsymbols/materialsymbols.css"/>
         <link class="origin" rel="stylesheet" href="/iot_drivers/static/src/app/css/status_display.css">
     </head>
     <body>
diff --git a/addons/l10n_eg_edi_eta/views/account_move_view.xml b/addons/l10n_eg_edi_eta/views/account_move_view.xml
index 6322bb3048fcae..fb292331928da9 100644
--- a/addons/l10n_eg_edi_eta/views/account_move_view.xml
+++ b/addons/l10n_eg_edi_eta/views/account_move_view.xml
@@ -39,7 +39,7 @@
                                 <button name="action_get_eta_invoice_pdf" type="object"
                                         groups="account.group_account_invoice"
                                         class="oe_link"
-                                        icon="fa-clone"
+                                        icon="content_copy"
                                         string="Get ETA Invoice PDF"
                                         invisible="edi_state != 'sent'"/>
                             </group>
diff --git a/addons/l10n_es_edi_verifactu/views/res_config_settings_views.xml b/addons/l10n_es_edi_verifactu/views/res_config_settings_views.xml
index 8f0207d4977ff0..59cb11e961d3a9 100644
--- a/addons/l10n_es_edi_verifactu/views/res_config_settings_views.xml
+++ b/addons/l10n_es_edi_verifactu/views/res_config_settings_views.xml
@@ -16,13 +16,13 @@
                             <div class="mt16">
                                 <div class="o_row">
                                     <button name="%(l10n_es_edi_verifactu_certificate_action)d" type="action"
-                                            icon="oi-arrow-right" class="oe_link">
+                                            icon="east" class="oe_link">
                                         Manage certificates
                                     </button>
                                 </div>
                                 <div class="o_row">
                                     <a class="oe_link fw-bold" target="_blank" href="https://www.odoo.com/documentation/latest/applications/finance/fiscal_localizations/spain.html#veri-factu">
-                                        <i class="o_button_icon oi oi-fw oi oi-arrow-right"/>
+                                        <i class="o_button_icon oi oi-fw oi" data-icon="east"/>
                                         Access Declaración Responsable
                                     </a>
                                 </div>
diff --git a/addons/l10n_in/views/account_invoice_views.xml b/addons/l10n_in/views/account_invoice_views.xml
index 06d6648e52db3b..b64e8789e0ef75 100644
--- a/addons/l10n_in/views/account_invoice_views.xml
+++ b/addons/l10n_in/views/account_invoice_views.xml
@@ -37,7 +37,7 @@
                             <span invisible="not l10n_in_gstin_verified_date" class="ps-3">Checked: </span>
                             <field name="l10n_in_gstin_verified_date" class="oe_inline" widget="remaining_days"/>
                             <button name="l10n_in_verify_partner_gstin_status"
-                                type="object" icon="fa-refresh"
+                                type="object" icon="refresh"
                                 class="oe_link p-0 ps-3" title="Verify GSTIN status" />
                         </span>
                     </span>
@@ -76,7 +76,7 @@
                 <button name="action_l10n_in_withholding_entries"
                         class="oe_stat_button"
                         type="object"
-                        icon="fa-list-alt"
+                        icon="list_alt"
                         invisible="not l10n_in_tds_feature_enabled or not l10n_in_withhold_move_ids">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_text">TDS</span>
diff --git a/addons/l10n_in/views/account_payment_views.xml b/addons/l10n_in/views/account_payment_views.xml
index 1ea903062fb84b..46d42519b4e39c 100644
--- a/addons/l10n_in/views/account_payment_views.xml
+++ b/addons/l10n_in/views/account_payment_views.xml
@@ -13,7 +13,7 @@
                 <button name="action_l10n_in_withholding_entries"
                         class="oe_stat_button"
                         type="object"
-                        icon="fa-list-alt"
+                        icon="list_alt"
                         invisible="not l10n_in_tds_feature_enabled or not l10n_in_withhold_move_ids">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_text">TDS</span>
diff --git a/addons/l10n_in/views/res_config_settings_views.xml b/addons/l10n_in/views/res_config_settings_views.xml
index ea990ddb5a31a1..ceeb2cae47d33b 100644
--- a/addons/l10n_in/views/res_config_settings_views.xml
+++ b/addons/l10n_in/views/res_config_settings_views.xml
@@ -70,7 +70,7 @@
                                     invisible="not l10n_in_edi_production_env or (not module_l10n_in_edi and not l10n_in_gstin_status_feature and not module_l10n_in_ewaybill and not l10n_in_gst_efiling_feature)">
                                     <button name="l10n_in_edi_buy_iap"
                                             title="Costs 1 credit per transaction. Free 200 credits will be available for the first time."
-                                            icon="fa-arrow-right"
+                                            icon="arrow_forward"
                                             type="object"
                                             string="Buy credits"
                                             class="btn-link"/>
diff --git a/addons/l10n_in/views/res_partner_views.xml b/addons/l10n_in/views/res_partner_views.xml
index 462d48f6758e29..88462765aea831 100644
--- a/addons/l10n_in/views/res_partner_views.xml
+++ b/addons/l10n_in/views/res_partner_views.xml
@@ -72,12 +72,12 @@
                     <span invisible="not l10n_in_gstin_verified_date and not l10n_in_gstin_verified_status" class="text-muted">
                         (
                         <field name="l10n_in_gstin_verified_date" widget="remaining_days" class="oe_inline" readonly="1" />
-                        <button name="action_l10n_in_verify_gstin_status" type="object" icon="fa-refresh"
+                        <button name="action_l10n_in_verify_gstin_status" type="object" icon="refresh"
                             class="oe_link p-0 ps-2" title="Reverify GSTIN status" />
                         )
                     </span>
                     <button string="Check Status" name="action_l10n_in_verify_gstin_status" type="object"
-                        icon="fa-check" class="oe_link p-0" title="Check GSTIN status"
+                        icon="check" class="oe_link p-0" title="Check GSTIN status"
                         invisible="l10n_in_gstin_verified_date" />
                 </span>
             </xpath>
diff --git a/addons/l10n_in_edi/views/res_config_settings_views.xml b/addons/l10n_in_edi/views/res_config_settings_views.xml
index 1bf6142b7e0285..31afe31b734b8c 100644
--- a/addons/l10n_in_edi/views/res_config_settings_views.xml
+++ b/addons/l10n_in_edi/views/res_config_settings_views.xml
@@ -20,7 +20,7 @@
                     </div>
                 </div>
                 <div class='mt8' invisible="not l10n_in_edi_feature">
-                    <button name="l10n_in_edi_test" icon="oi-arrow-right" type="object" string="Verify Username and Password" class="btn-link"/>
+                    <button name="l10n_in_edi_test" icon="east" type="object" string="Verify Username and Password" class="btn-link"/>
                 </div>
             </xpath>
         </field>
diff --git a/addons/l10n_in_ewaybill/views/account_move_views.xml b/addons/l10n_in_ewaybill/views/account_move_views.xml
index 4cf512043bdae3..62a9d3308ca732 100644
--- a/addons/l10n_in_ewaybill/views/account_move_views.xml
+++ b/addons/l10n_in_ewaybill/views/account_move_views.xml
@@ -22,7 +22,7 @@
             <xpath expr="//sheet/div[hasclass('oe_button_box')]" position="inside">
                 <button name="action_open_l10n_in_ewaybill"
                         class="oe_stat_button"
-                        icon="fa-truck"
+                        icon="local_shipping"
                         type="object"
                         invisible="country_code != 'IN' or not l10n_in_ewaybill_ids or move_type in ('entry', 'out_refund')"
                         groups="account.group_account_invoice">
diff --git a/addons/l10n_in_ewaybill/views/res_config_settings_views.xml b/addons/l10n_in_ewaybill/views/res_config_settings_views.xml
index a20e91462ce429..c3372b12a39bf6 100644
--- a/addons/l10n_in_ewaybill/views/res_config_settings_views.xml
+++ b/addons/l10n_in_ewaybill/views/res_config_settings_views.xml
@@ -25,7 +25,7 @@
                 </div>
                 <div class='mt8' invisible="not l10n_in_ewaybill_feature">
                     <button name="l10n_in_ewaybill_test"
-                            icon="oi-arrow-right"
+                            icon="east"
                             type="object"
                             string="Verify Username and Password"
                             class="btn-link"/>
diff --git a/addons/l10n_in_ewaybill_stock/views/stock_picking_views.xml b/addons/l10n_in_ewaybill_stock/views/stock_picking_views.xml
index bdc6c1344c1bef..3d00e48b8e0e05 100644
--- a/addons/l10n_in_ewaybill_stock/views/stock_picking_views.xml
+++ b/addons/l10n_in_ewaybill_stock/views/stock_picking_views.xml
@@ -21,7 +21,7 @@
             <xpath expr="//sheet/div[hasclass('oe_button_box')]" position="inside">
                 <button name="action_open_l10n_in_ewaybill"
                         class="oe_stat_button"
-                        icon="fa-truck"
+                        icon="local_shipping"
                         type="object"
                         invisible="not l10n_in_ewaybill_ids"
                         groups="stock.group_stock_manager">
diff --git a/addons/l10n_it_edi/views/l10n_it_view.xml b/addons/l10n_it_edi/views/l10n_it_view.xml
index 9d171e4d8348cb..bc28f1fdfce4c7 100644
--- a/addons/l10n_it_edi/views/l10n_it_view.xml
+++ b/addons/l10n_it_edi/views/l10n_it_view.xml
@@ -122,7 +122,7 @@
                         invisible="not l10n_it_edi_header 
                                    or state == 'draft'
                                    or l10n_it_edi_state in ('forwarded', 'accepted_by_pa_partner', 'accepted_by_pa_partner_after_expiry', 'forward_failed')">
-                        <div class="p-0 m-0"><i class='fa fa-warning' role="img" title="EDI (Italy)"/><span class="mx-1">E-invoicing (Italy)</span></div>
+                        <div class="p-0 m-0"><i class="oi" data-icon="warning" role="img" title="EDI (Italy)"/><span class="mx-1">E-invoicing (Italy)</span></div>
                         <field name="l10n_it_edi_header"/>
                     </div>
                 </xpath>
diff --git a/addons/l10n_it_edi_doi/views/account_move_views.xml b/addons/l10n_it_edi_doi/views/account_move_views.xml
index 19b5d8ad670ed6..c8edb5469e9536 100644
--- a/addons/l10n_it_edi_doi/views/account_move_views.xml
+++ b/addons/l10n_it_edi_doi/views/account_move_views.xml
@@ -49,7 +49,7 @@
                         type="object"
                         class="oe_stat_button"
                         name="action_open_declaration_of_intent"
-                        icon="fa-list"
+                        icon="format_list_bulleted"
                         invisible="not l10n_it_edi_doi_id">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_text">Declaration of Intent</span>
diff --git a/addons/l10n_it_edi_doi/views/l10n_it_edi_doi_declaration_of_intent_views.xml b/addons/l10n_it_edi_doi/views/l10n_it_edi_doi_declaration_of_intent_views.xml
index c657ae6948adb6..c3056d3f2372ba 100644
--- a/addons/l10n_it_edi_doi/views/l10n_it_edi_doi_declaration_of_intent_views.xml
+++ b/addons/l10n_it_edi_doi/views/l10n_it_edi_doi_declaration_of_intent_views.xml
@@ -53,7 +53,7 @@
                         <button type="object"
                                 class="oe_stat_button"
                                 name="action_open_invoice_ids"
-                                icon="fa-pencil-square-o"
+                                icon="edit_square"
                                 invisible="not invoice_ids">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_text">Invoices</span>
@@ -62,7 +62,7 @@
                         <button type="object"
                                 class="oe_stat_button"
                                 name="action_open_sale_order_ids"
-                                icon="fa-pencil-square-o"
+                                icon="edit_square"
                                 invisible="not sale_order_ids">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_text">Sale Orders</span>
diff --git a/addons/l10n_it_edi_doi/views/res_partner_views.xml b/addons/l10n_it_edi_doi/views/res_partner_views.xml
index adb06d3ca080a0..d18ec3fb7ad969 100644
--- a/addons/l10n_it_edi_doi/views/res_partner_views.xml
+++ b/addons/l10n_it_edi_doi/views/res_partner_views.xml
@@ -25,7 +25,7 @@
                         type="object"
                         class="oe_stat_button"
                         name="l10n_it_edi_doi_action_open_declarations"
-                        icon="fa-list"
+                        icon="format_list_bulleted"
                         invisible="'IT' not in fiscal_country_codes">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_text">Declarations of Intent</span>
diff --git a/addons/l10n_it_edi_doi/views/sale_order_views.xml b/addons/l10n_it_edi_doi/views/sale_order_views.xml
index fab43539045090..eb7eceaae01eba 100644
--- a/addons/l10n_it_edi_doi/views/sale_order_views.xml
+++ b/addons/l10n_it_edi_doi/views/sale_order_views.xml
@@ -51,7 +51,7 @@
                         type="object"
                         class="oe_stat_button"
                         name="action_open_declaration_of_intent"
-                        icon="fa-list"
+                        icon="format_list_bulleted"
                         invisible="not l10n_it_edi_doi_id">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_text">Declaration of Intent</span>
diff --git a/addons/l10n_it_stock_ddt/report/l10n_it_ddt_report.xml b/addons/l10n_it_stock_ddt/report/l10n_it_ddt_report.xml
index e0aa0b1d983f76..fbdb65c26aa1ad 100644
--- a/addons/l10n_it_stock_ddt/report/l10n_it_ddt_report.xml
+++ b/addons/l10n_it_stock_ddt/report/l10n_it_ddt_report.xml
@@ -158,9 +158,9 @@
                 <table class="table table-borderless">
                     <thead>
                         <tr>
-                            <th><span class="fa fa-pencil mt4"/><div class="ml4 d-inline-block"/><strong>Company Signature</strong></th>
-                            <th><span class="fa fa-pencil mt4"/><div class="ml4 d-inline-block"/><strong>Carrier Signature</strong></th>
-                            <th><span class="fa fa-pencil mt4"/><div class="ml4 d-inline-block"/><strong>Customer Signature</strong></th>
+                            <th><span class="oi oi-filled mt4" data-icon="edit"/><div class="ml4 d-inline-block"/><strong>Company Signature</strong></th>
+                            <th><span class="oi oi-filled mt4" data-icon="edit"/><div class="ml4 d-inline-block"/><strong>Carrier Signature</strong></th>
+                            <th><span class="oi oi-filled mt4" data-icon="edit"/><div class="ml4 d-inline-block"/><strong>Customer Signature</strong></th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/addons/l10n_it_stock_ddt/views/account_invoice_views.xml b/addons/l10n_it_stock_ddt/views/account_invoice_views.xml
index 0a83313c3fbdf3..4219aee16597a3 100644
--- a/addons/l10n_it_stock_ddt/views/account_invoice_views.xml
+++ b/addons/l10n_it_stock_ddt/views/account_invoice_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="account.view_move_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
-                <button name="get_linked_ddts" type="object" class="oe_stat_button" icon="fa-calendar" invisible="l10n_it_ddt_count == 0">
+                <button name="get_linked_ddts" type="object" class="oe_stat_button" icon="calendar_today" invisible="l10n_it_ddt_count == 0">
                     <field name="l10n_it_ddt_count" widget="statinfo" string="DDTs"/>
                 </button>
             </xpath>
diff --git a/addons/l10n_jo_edi_pos/views/pos_order_views.xml b/addons/l10n_jo_edi_pos/views/pos_order_views.xml
index 4e8f7648b4b39e..69289d0c515757 100644
--- a/addons/l10n_jo_edi_pos/views/pos_order_views.xml
+++ b/addons/l10n_jo_edi_pos/views/pos_order_views.xml
@@ -15,7 +15,7 @@
                 <div class="alert alert-warning" role="alert"
                     invisible="not l10n_jo_edi_pos_error">
                     <div class="p-0 m-0">
-                        <i class="fa fa-warning" role="img" title="JoFotara Error"/>
+                        <i class="oi" data-icon="warning" role="img" title="JoFotara Error"/>
                         <span class="mx-1">E-invoicing (Jordan)</span>
                         <a name="download_l10n_jo_edi_pos_computed_xml" type="object" groups="base.group_no_one" class="float-end">Download XML</a>
                     </div>
diff --git a/addons/l10n_latam_check/views/account_payment_view.xml b/addons/l10n_latam_check/views/account_payment_view.xml
index ea9aff81a560e4..a4bd345f1a9a68 100644
--- a/addons/l10n_latam_check/views/account_payment_view.xml
+++ b/addons/l10n_latam_check/views/account_payment_view.xml
@@ -18,7 +18,7 @@
                                     <field name="issuer_vat" column_invisible="parent.payment_method_code == 'own_checks'"/>
                                     <field name="payment_date"/>
                                     <field name="amount" />
-                                    <button type="object" name="get_formview_action" icon="fa-pencil-square-o" title="open" help="Open" column_invisible="parent.state == 'draft'"/>
+                                    <button type="object" name="get_formview_action" icon="edit_square" title="open" help="Open" column_invisible="parent.state == 'draft'"/>
                                 </list>
                             </field>
                             <field name="l10n_latam_move_check_ids" invisible="payment_method_code not in ['in_third_party_checks', 'out_third_party_checks', 'return_third_party_checks']"
@@ -35,7 +35,7 @@
                                     <field name="issuer_vat" optional="hide"/>
                                     <field name="payment_date" optional="hide"/>
                                     <field name="amount"/>
-                                    <button type="object" name="get_formview_action" icon="fa-pencil-square-o" title="open" help="Open"/>
+                                    <button type="object" name="get_formview_action" icon="edit_square" title="open" help="Open"/>
                                 </list>
                             </field>
                         </group>
diff --git a/addons/l10n_latam_check/views/l10n_latam_check_view.xml b/addons/l10n_latam_check/views/l10n_latam_check_view.xml
index fcffcecf908088..9532d95aa2977c 100644
--- a/addons/l10n_latam_check/views/l10n_latam_check_view.xml
+++ b/addons/l10n_latam_check/views/l10n_latam_check_view.xml
@@ -112,16 +112,16 @@
                 </header>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button  icon="fa-bars" type="object" name="button_open_check_operations" invisible="payment_method_code != 'new_third_party_checks'">
+                        <button  icon="menu" type="object" name="button_open_check_operations" invisible="payment_method_code != 'new_third_party_checks'">
                             <span>Operations</span>
                         </button>
-                        <button  icon="fa-bars" type="object" name="button_open_payment" invisible="payment_method_code != 'own_checks'">
+                        <button  icon="menu" type="object" name="button_open_payment" invisible="payment_method_code != 'own_checks'">
                             <span>Payment</span>
                         </button>
-                        <button  icon="fa-bars" type="object" invisible="not outstanding_line_id" name="action_show_journal_entry" groups="account.group_account_user,account.group_account_readonly">
+                        <button  icon="menu" type="object" invisible="not outstanding_line_id" name="action_show_journal_entry" groups="account.group_account_user,account.group_account_readonly">
                             <span>Journal Entry</span>
                         </button>
-                        <button  icon="fa-bars" type="object" invisible="not issue_state or issue_state == 'handed'" name="action_show_reconciled_move" groups="account.group_account_user,account.group_account_readonly">
+                        <button  icon="menu" type="object" invisible="not issue_state or issue_state == 'handed'" name="action_show_reconciled_move" groups="account.group_account_user,account.group_account_readonly">
                             <span>Reconciled move</span>
                         </button>
                     </div>
diff --git a/addons/l10n_my_edi/views/account_move_view.xml b/addons/l10n_my_edi/views/account_move_view.xml
index 5c64b1305e4c5e..2142e4d001385a 100644
--- a/addons/l10n_my_edi/views/account_move_view.xml
+++ b/addons/l10n_my_edi/views/account_move_view.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
                 <field name="l10n_my_edi_document_ids" invisible="1"/>
-                <button name="action_show_myinvois_documents" type="object" class="oe_stat_button" icon="fa-file-text-o" invisible="not l10n_my_edi_document_ids">
+                <button name="action_show_myinvois_documents" type="object" class="oe_stat_button" icon="article" invisible="not l10n_my_edi_document_ids">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_text">MyInvois<br/>Documents</span>
                     </div>
diff --git a/addons/l10n_my_edi/views/myinvois_document_views.xml b/addons/l10n_my_edi/views/myinvois_document_views.xml
index b3e2ba0adf9bd0..737dd5bb6686fc 100644
--- a/addons/l10n_my_edi/views/myinvois_document_views.xml
+++ b/addons/l10n_my_edi/views/myinvois_document_views.xml
@@ -27,7 +27,7 @@
                         <widget name="web_ribbon" title="Processing" bg_color="text-bg-info" invisible="myinvois_state != 'in_progress'"/>
                         <widget name="web_ribbon" title="Rejected" bg_color="text-bg-warning" invisible="myinvois_state != 'rejected'"/>
                         <div class="oe_button_box" name="button_box">
-                            <button name="action_view_linked_invoices" type="object" icon="fa-pencil-square-o" class="oe_stat_button" invisible="linked_invoice_count == 0">
+                            <button name="action_view_linked_invoices" type="object" icon="edit_square" class="oe_stat_button" invisible="linked_invoice_count == 0">
                                  <field name="linked_invoice_count" string="Source Documents" widget="statinfo"/>
                             </button>
                         </div>
diff --git a/addons/l10n_my_edi/views/res_partner_view.xml b/addons/l10n_my_edi/views/res_partner_view.xml
index c4d34bf702222d..d183c3d7c705e3 100644
--- a/addons/l10n_my_edi/views/res_partner_view.xml
+++ b/addons/l10n_my_edi/views/res_partner_view.xml
@@ -17,8 +17,8 @@
                             <field name="l10n_my_identification_number_placeholder" invisible="1"/> <!-- Needed for the placeholder widget -->
                             <field name="l10n_my_identification_number" options="{'placeholder_field': 'l10n_my_identification_number_placeholder'}" readonly="parent_id"/>
                             <button class="oe_link oe_inline p-0" type="object" name="action_validate_tin" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state or parent_id">Validate</button>
-                            <span class="text-success fa fa-check" title="Validation Successful" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state != 'valid'"/>
-                            <span class="text-danger fa fa-close" title="Validation Failed" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state != 'invalid'"/>
+                            <span class="oi text-success" data-icon="check" title="Validation Successful" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state != 'valid'"/>
+                            <span class="oi text-danger" data-icon="close" title="Validation Failed" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state != 'invalid'"/>
                         </span>
                     </div>
                     <field name="l10n_my_edi_industrial_classification" readonly="parent_id" options='{"no_open": True}'/>
diff --git a/addons/l10n_my_edi_pos/views/myinvois_document_pos_views.xml b/addons/l10n_my_edi_pos/views/myinvois_document_pos_views.xml
index 6f1389d0820090..4ffad244f28730 100644
--- a/addons/l10n_my_edi_pos/views/myinvois_document_pos_views.xml
+++ b/addons/l10n_my_edi_pos/views/myinvois_document_pos_views.xml
@@ -7,7 +7,7 @@
             <field name="inherit_id" ref="l10n_my_edi.myinvois_document_form_view"/>
             <field name="arch" type="xml">
                 <div name="button_box" position="inside">
-                    <button name="action_view_linked_orders" type="object" icon="fa-shopping-basket" class="oe_stat_button" invisible="linked_order_count == 0">
+                    <button name="action_view_linked_orders" type="object" icon="shopping_basket" class="oe_stat_button" invisible="linked_order_count == 0">
                          <field name="linked_order_count" string="PoS Orders" widget="statinfo"/>
                     </button>
                 </div>
diff --git a/addons/l10n_my_edi_pos/views/pos_order_views.xml b/addons/l10n_my_edi_pos/views/pos_order_views.xml
index 1b3e2e70eb6d5a..e32cf8524b25a5 100644
--- a/addons/l10n_my_edi_pos/views/pos_order_views.xml
+++ b/addons/l10n_my_edi_pos/views/pos_order_views.xml
@@ -9,7 +9,7 @@
                 <field name="consolidated_invoice_ids" invisible="1"/>
                 <button name="action_show_myinvois_documents"
                         type="object"
-                        icon="fa-sun-o"
+                        icon="light_mode"
                         class="oe_stat_button"
                         groups="account.group_account_invoice"
                         invisible="not consolidated_invoice_ids">
diff --git a/addons/l10n_my_edi_pos/views/res_partner_view.xml b/addons/l10n_my_edi_pos/views/res_partner_view.xml
index 97bc3e465ca6ce..4525023af58e88 100644
--- a/addons/l10n_my_edi_pos/views/res_partner_view.xml
+++ b/addons/l10n_my_edi_pos/views/res_partner_view.xml
@@ -16,8 +16,8 @@
                         <field name="l10n_my_identification_number_placeholder" invisible="1"/> <!-- Needed for the placeholder widget -->
                         <field name="l10n_my_identification_number" options="{'placeholder_field': 'l10n_my_identification_number_placeholder'}" readonly="parent_id"/>
                         <button class="oe_link oe_inline p-0" type="object" name="action_validate_tin" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state or parent_id">Validate</button>
-                        <span class="text-success fa fa-check" title="Validation Successful" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state != 'valid'"/>
-                        <span class="text-danger fa fa-close" title="Validation Failed" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state != 'invalid'"/>
+                        <span class="text-success oi" data-icon="check" title="Validation Successful" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state != 'valid'"/>
+                        <span class="text-danger oi" data-icon="close" title="Validation Failed" invisible="not l10n_my_edi_display_tin_warning or l10n_my_tin_validation_state != 'invalid'"/>
                     </span>
                 </div>
             </field>
diff --git a/addons/l10n_pl/views/res_config_settings_views.xml b/addons/l10n_pl/views/res_config_settings_views.xml
index 484ed4a6c44d6f..bd58a8b14f33e5 100644
--- a/addons/l10n_pl/views/res_config_settings_views.xml
+++ b/addons/l10n_pl/views/res_config_settings_views.xml
@@ -9,7 +9,7 @@
                 <block title="Polish Localization" invisible="country_code != 'PL'">
                     <setting id="l10n_pl_section">
                         <label for="l10n_pl_reports_tax_office_id"/>
-                        <span class="fa fa-lg fa-building-o" title="Values set here are company-specific." aria-label="Values set here are company-specific." groups="base.group_multi_company" role="img"/>
+                        <span class="oi oi-lg" data-icon="business" title="Values set here are company-specific." aria-label="Values set here are company-specific." groups="base.group_multi_company" role="img"/>
                         <field name="l10n_pl_reports_tax_office_id"/>
                     </setting>
                 </block>
diff --git a/addons/l10n_ro_edi/views/res_config_settings_views.xml b/addons/l10n_ro_edi/views/res_config_settings_views.xml
index 4510a822c1dba4..09eb9ee6effc41 100644
--- a/addons/l10n_ro_edi/views/res_config_settings_views.xml
+++ b/addons/l10n_ro_edi/views/res_config_settings_views.xml
@@ -13,7 +13,7 @@
                                 <span class="o_form_label">
                                     E-Factura Details
                                 </span>
-                                <span class="fa fa-lg fa-building-o" title="Values set here are company-specific."/>
+                                <span class="oi oi-lg" data-icon="business" title="Values set here are company-specific."/>
                             </div>
                             <div class="text-muted oe_inline mb-3">
                                 <div class="mb-1">
diff --git a/addons/l10n_rs_edi/views/account_move.xml b/addons/l10n_rs_edi/views/account_move.xml
index 1108143aaa1b10..0e10929ba073db 100644
--- a/addons/l10n_rs_edi/views/account_move.xml
+++ b/addons/l10n_rs_edi/views/account_move.xml
@@ -19,7 +19,7 @@
             <xpath expr="//sheet" position="before">
                 <div class="alert alert-warning" role="alert" invisible="not l10n_rs_edi_error">
                         <div class="p-0 m-0">
-                            <i class="fa fa-warning" role="img" title="Serbian eFaktura"/>
+                            <i class="oi" data-icon="warning" role="img" title="Serbian eFaktura"/>
                             <span class="mx-1">Serbian E-invoice Error:</span>
                         </div>
                         <field name="l10n_rs_edi_error"/>
diff --git a/addons/l10n_sa_edi/views/account_journal_views.xml b/addons/l10n_sa_edi/views/account_journal_views.xml
index e01dc472fe1315..ef114040b92088 100644
--- a/addons/l10n_sa_edi/views/account_journal_views.xml
+++ b/addons/l10n_sa_edi/views/account_journal_views.xml
@@ -18,7 +18,7 @@
                             <p class="mb-0">
                                 Onboard this Journal
                             </p>
-                            <button name="%(l10n_sa_edi_otp_wizard_act_window)d" type="action" icon="fa-key"
+                            <button name="%(l10n_sa_edi_otp_wizard_act_window)d" type="action" icon="key"
                                     class="btn-info ">
                                 Onboard
                             </button>
@@ -30,7 +30,7 @@
                                 <h4 role="alert" class="alert-heading">Error: Journal is not onboarded</h4>
                                 <field name="l10n_sa_csr_errors" nolabel="1" readonly="1"/>
                             </div>
-                            <button name="%(l10n_sa_edi_otp_wizard_act_window)d" type="action" icon="fa-key"
+                            <button name="%(l10n_sa_edi_otp_wizard_act_window)d" type="action" icon="key"
                                     class="btn-danger">
                                 Onboard
                             </button>
@@ -44,11 +44,11 @@
                                        class="fw-bold"/>
                             </p>
                             <div>
-                                <button name="%(l10n_sa_edi_otp_wizard_act_window)d" type="action" icon="fa-refresh"
+                                <button name="%(l10n_sa_edi_otp_wizard_act_window)d" type="action" icon="refresh"
                                         class="btn-info" context="{'default_l10n_sa_renewal': True}">
                                     Renew
                                 </button>
-                                <button name="%(l10n_sa_edi_otp_wizard_act_window)d" type="action" icon="fa-refresh" class="btn-warning ms-2"
+                                <button name="%(l10n_sa_edi_otp_wizard_act_window)d" type="action" icon="refresh" class="btn-warning ms-2"
                                     confirm="Do you really want to re-onboard this Journal with ZATCA?" confirm-title="Re-onboarding Confirmation" confirm-label="Yes">
                                     Re-Onboard
                                 </button>
@@ -74,4 +74,4 @@
             </field>
         </record>
     </data>
-</odoo>
\ No newline at end of file
+</odoo>
diff --git a/addons/l10n_sa_edi/views/res_config_settings_view.xml b/addons/l10n_sa_edi/views/res_config_settings_view.xml
index 5dec2e84003134..7054feff154b82 100644
--- a/addons/l10n_sa_edi/views/res_config_settings_view.xml
+++ b/addons/l10n_sa_edi/views/res_config_settings_view.xml
@@ -28,7 +28,7 @@
                         </div>
                         <div class="alert alert-warning mt8 col-lg-6" role="alert" invisible="l10n_sa_api_mode != 'prod'">
                             <h4 class="alert-heading" role="alert">
-                                <i class="fa fa-warning me-2" /> Warning
+                                <i class="oi me-2" data-icon="warning" /> Warning
                             </h4>
                             Once the mode is set to <strong>Production</strong> and an Invoice has been submitted to ZATCA,
                             then the API mode cannot be changed. Any invoice submitted in the Production mode will be officially
diff --git a/addons/l10n_tr_nilvera/views/res_config_settings_views.xml b/addons/l10n_tr_nilvera/views/res_config_settings_views.xml
index efc96afefff5a6..818882b47475ab 100644
--- a/addons/l10n_tr_nilvera/views/res_config_settings_views.xml
+++ b/addons/l10n_tr_nilvera/views/res_config_settings_views.xml
@@ -14,7 +14,7 @@
                                 <span class="o_form_label">
                                     Nilvera Details
                                 </span>
-                                <span class="fa fa-lg fa-building-o" title="Values set here are company-specific."/>
+                                <span class="oi oi-lg" data-icon="business" title="Values set here are company-specific."/>
                             </div>
                             <div class="text-muted oe_inline mb-3">
                                 <div>
@@ -47,16 +47,16 @@
                             <div class="mt16" invisible="not l10n_tr_nilvera_api_key">
                                 <a href="https://portal.nilvera.com/" target="_new" invisible="l10n_tr_nilvera_use_test_env">
                                     <i title="Go to Nilvera portal" role="img" aria-label="Go to Nilvera portal"
-                                        class="fa fa-external-link-square fa-fw"/>
+                                        class="oi oi-fw" data-icon="open_in_new"/>
                                     Nilvera portal
                                 </a>
                                 <a href="https://portaltest.nilvera.com/" target="_new" invisible="not l10n_tr_nilvera_use_test_env">
                                     <i title="Go to Nilvera portal" role="img" aria-label="Go to Nilvera portal"
-                                    class="fa fa-external-link-square fa-fw"/>
+                                    class="oi oi-fw" data-icon="open_in_new"/>
                                     Nilvera portal (Test)
                                 </a>
                                 <button name="nilvera_ping" type="object" class="btn-link">
-                                    <i title="Test connection" role="img" aria-label="Test connection" class="fa fa-plug fa-fw"/>
+                                    <i title="Test connection" role="img" aria-label="Test connection" class="oi oi-fw" data-icon="power"/>
                                     Test connection
                                 </button>
                             </div>
diff --git a/addons/l10n_tr_nilvera_edispatch/views/stock_picking_views.xml b/addons/l10n_tr_nilvera_edispatch/views/stock_picking_views.xml
index 9247d0a67f6d3a..263bbcb5843bcc 100644
--- a/addons/l10n_tr_nilvera_edispatch/views/stock_picking_views.xml
+++ b/addons/l10n_tr_nilvera_edispatch/views/stock_picking_views.xml
@@ -51,7 +51,7 @@
                             class="o_icon_button text-primary"
                             invisible="l10n_tr_nilvera_send_status not in ['sent', 'waiting']"
                             title="Synchronize with Nilvera"
-                            icon="fa-refresh"/>
+                            icon="refresh"/>
                     </div>
                 </div>
             </field>
diff --git a/addons/l10n_vn_edi_viettel/views/res_config_settings_views.xml b/addons/l10n_vn_edi_viettel/views/res_config_settings_views.xml
index 3f036f82987ab9..8a04473ce02f9c 100644
--- a/addons/l10n_vn_edi_viettel/views/res_config_settings_views.xml
+++ b/addons/l10n_vn_edi_viettel/views/res_config_settings_views.xml
@@ -34,7 +34,7 @@
                                 type="action"
                                 name="%(l10n_vn_edi_viettel.action_sinvoice_symbol)d"
                                 class="btn btn-link"
-                                icon="oi-arrow-right"
+                                icon="east"
                             />
                         </div>
                     </setting>
diff --git a/addons/link_tracker/views/link_tracker_views.xml b/addons/link_tracker/views/link_tracker_views.xml
index 150aecdd56c706..adaa1e269390d8 100644
--- a/addons/link_tracker/views/link_tracker_views.xml
+++ b/addons/link_tracker/views/link_tracker_views.xml
@@ -32,14 +32,14 @@
                     </header>
                     <sheet>
                         <div class="oe_button_box" name="button_box">
-                            <button type="object" icon="fa-sign-out" name="action_visit_page"
+                            <button type="object" icon="logout" name="action_visit_page"
                                 string="Visit Page" class="oe_stat_button">
                                 <div class="o_field_widget o_stat_info">
                                     <span class="o_stat_text">Visit Page</span>
                                 </div>
                             </button>
 
-                            <button type="object" class="oe_stat_button" name="action_view_statistics" icon="fa-mouse-pointer">
+                            <button type="object" class="oe_stat_button" name="action_view_statistics" icon="mouse">
                                 <field name="count" string="Clicks" widget="statinfo"/>
                             </button>
                         </div>
diff --git a/addons/link_tracker/views/utm_campaign_views.xml b/addons/link_tracker/views/utm_campaign_views.xml
index 036ea89a7f7a24..894059ef303627 100644
--- a/addons/link_tracker/views/utm_campaign_views.xml
+++ b/addons/link_tracker/views/utm_campaign_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('oe_button_box')]" position="inside">
                 <button name="%(link_tracker_action_campaign)d"
-                    type="action" class="oe_stat_button order-12" icon="fa-mouse-pointer">
+                    type="action" class="oe_stat_button order-12" icon="mouse">
                     <field name="click_count" widget="statinfo" string="Clicks"/>
                 </button>
             </xpath>
@@ -24,7 +24,7 @@
                     type="action" name="%(link_tracker_action_campaign)d"
                     class="btn-outline-primary rounded-pill me-1 order-4">
                     <span class="badge">
-                        <i class="fa fa-fw fa-mouse-pointer" aria-label="Clicks" role="img"/>
+                        <i class="oi oi-fw" data-icon="mouse"  aria-label="Clicks" role="img"/>
                         <field name="click_count"/>
                     </span>
                 </a>
diff --git a/addons/loyalty/views/loyalty_card_views.xml b/addons/loyalty/views/loyalty_card_views.xml
index 46e058c08d6839..bc489b9b2ca284 100644
--- a/addons/loyalty/views/loyalty_card_views.xml
+++ b/addons/loyalty/views/loyalty_card_views.xml
@@ -52,7 +52,7 @@
                 <field name="expiration_date" column_invisible="context.get('program_type') == 'loyalty'"/>
                 <field name="program_id"/>
                 <field name="partner_id"/>
-                <button name="action_coupon_send" string="Send" type="object" icon="fa-paper-plane-o"/>
+                <button name="action_coupon_send" string="Send" type="object" icon="send"/>
             </list>
         </field>
     </record>
diff --git a/addons/loyalty/views/loyalty_program_views.xml b/addons/loyalty/views/loyalty_program_views.xml
index 9802bd397cf8fc..f6c4fa879691cb 100644
--- a/addons/loyalty/views/loyalty_program_views.xml
+++ b/addons/loyalty/views/loyalty_program_views.xml
@@ -18,7 +18,7 @@
                 <sheet>
                     <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" invisible="active"/>
                     <div class="oe_button_box" name="button_box">
-                        <button class="oe_stat_button" type="object" name="action_open_loyalty_cards" icon="fa-tags">
+                        <button class="oe_stat_button" type="object" name="action_open_loyalty_cards" icon="sell">
                             <div class="o_form_field o_stat_info">
                                 <span class="o_stat_value">
                                     <field name="coupon_count"/>
diff --git a/addons/loyalty/views/loyalty_reward_views.xml b/addons/loyalty/views/loyalty_reward_views.xml
index 77c0932e3e0ac3..dbde80ae5778e6 100644
--- a/addons/loyalty/views/loyalty_reward_views.xml
+++ b/addons/loyalty/views/loyalty_reward_views.xml
@@ -95,16 +95,16 @@
                                     <div class="fw-bold text-decoration-underline mt-3">Applied to:</div>
 
                                     <div t-if="record.discount_product_ids.raw_value.length > 0" class="d-flex">
-                                        <i class="fa fa-cube fa-fw" title="Products"/> <field name="discount_product_ids" widget="many2many_tags"/>
+                                        <i class="oi oi-fw" data-icon="deployed_code" title="Products"/> <field name="discount_product_ids" widget="many2many_tags"/>
                                     </div>
                                     <div t-if="record.discount_product_category_id.raw_value" class="d-flex">
-                                        <i class="fa fa-cubes fa-fw" title="Product Categories"/> <field name="discount_product_category_id"/>
+                                        <i class="oi oi-fw" data-icon="inventory_2" title="Product Categories"/> <field name="discount_product_category_id"/>
                                     </div>
                                     <div t-if="record.discount_product_tag_id.raw_value" class="d-flex">
-                                        <i class="fa fa-tags fa-fw" title="Product Tags"/> <field name="discount_product_tag_id"/>
+                                        <i class="oi oi-fw" data-icon="sell" title="Product Tags"/> <field name="discount_product_tag_id"/>
                                     </div>
                                     <div t-if="record.discount_product_domain.raw_value &amp;&amp; record.discount_product_domain.raw_value !== '[]'" groups="base.group_no_one" class="d-flex">
-                                        <i class="fa fa-search fa-fw" title="Product Domain"/> <field name="discount_product_domain"/>
+                                        <i class="oi oi-fw" data-icon="search" title="Product Domain"/> <field name="discount_product_domain"/>
                                     </div>
                                 </t>
 
@@ -120,10 +120,10 @@
                             <t t-elif="record.reward_type.raw_value === 'product'">
                                 <div class="mb-3">Free product</div>
                                 <div t-if="record.reward_product_id.raw_value" class="d-flex">
-                                    <i class="fa fa-cube fa-fw" title="Product Domain"/><field name="reward_product_id" class="me-1"/> <t t-if="record.reward_product_qty.raw_value > 1"> x <field name="reward_product_qty" class="ms-1"/></t>
+                                    <i class="oi oi-fw" data-icon="deployed_code" title="Product Domain"/><field name="reward_product_id" class="me-1"/> <t t-if="record.reward_product_qty.raw_value > 1"> x <field name="reward_product_qty" class="ms-1"/></t>
                                 </div>
                                 <div t-if="record.reward_product_tag_id.raw_value" class="d-flex">
-                                    <i class="fa fa-tags fa-fw" title="Product Tags"/> <field name="reward_product_tag_id"/>
+                                    <i class="oi oi-fw" data-icon="sell" title="Product Tags"/> <field name="reward_product_tag_id"/>
                                 </div>
                             </t>
                         </div>
diff --git a/addons/loyalty/views/loyalty_rule_views.xml b/addons/loyalty/views/loyalty_rule_views.xml
index 802eef231a02a7..65e35b629a58c2 100644
--- a/addons/loyalty/views/loyalty_rule_views.xml
+++ b/addons/loyalty/views/loyalty_rule_views.xml
@@ -74,19 +74,19 @@
                                 <div class="fw-bold text-decoration-underline mt-3">Among:</div>
 
                                 <div t-if="record.product_ids.raw_value.length > 0" class="d-flex">
-                                    <i class="fa fa-cube fa-fw" title="Products"/> <field name="product_ids" widget="many2many_tags"/>
+                                    <i class="oi oi-fw" data-icon="deployed_code" title="Products"/> <field name="product_ids" widget="many2many_tags"/>
                                 </div>
                                 <div t-if="record.product_category_id.raw_value" class="d-flex">
-                                    <i class="fa fa-cubes fa-fw" title="Product Categories"/> <field name="product_category_id"/>
+                                    <i class="oi oi-fw" data-icon="inventory_2" title="Product Categories"/> <field name="product_category_id"/>
                                 </div>
                                 <div t-if="record.product_tag_id.raw_value" class="d-flex">
-                                    <i class="fa fa-tags fa-fw" title="Product Tags"/> <field name="product_tag_id"/>
+                                    <i class="oi oi-fw" data-icon="sell" title="Product Tags"/> <field name="product_tag_id"/>
                                 </div>
                                 <div t-if="record.product_ids.raw_value.length === 0 and !record.product_category_id.raw_value &amp;&amp; !record.product_tag_id.raw_value" class="d-flex">
-                                    <i class="fa fa-cube fa-fw" title="Products"/><span>All Products</span>
+                                    <i class="oi oi-fw" data-icon="deployed_code" title="Products"/><span>All Products</span>
                                 </div>
                                 <div t-if="record.product_domain.raw_value and record.product_domain.raw_value !== '[]'" groups="base.group_no_one" class="d-flex">
-                                    <i class="fa fa-search fa-fw" title="Product Domain"/> <field name="product_domain"/>
+                                    <i class="oi oi-fw" data-icon="search" title="Product Domain"/> <field name="product_domain"/>
                                 </div>
                             </t>
                         </div>
diff --git a/addons/loyalty/views/res_partner_views.xml b/addons/loyalty/views/res_partner_views.xml
index fa7ab3a2d054d9..0577ff0046e5a1 100644
--- a/addons/loyalty/views/res_partner_views.xml
+++ b/addons/loyalty/views/res_partner_views.xml
@@ -11,7 +11,7 @@
                 <button name="action_view_loyalty_cards"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-money"
+                    icon="payments"
                     groups="base.group_system"
                     invisible="loyalty_card_count == 0">
                     <field string="Loyalty Cards" name="loyalty_card_count" widget="statinfo"/>
diff --git a/addons/lunch/report/lunch_cashmove_report_views.xml b/addons/lunch/report/lunch_cashmove_report_views.xml
index fe93f9ba023278..46ab90bc68ae2d 100644
--- a/addons/lunch/report/lunch_cashmove_report_views.xml
+++ b/addons/lunch/report/lunch_cashmove_report_views.xml
@@ -88,12 +88,12 @@
                                 <field name="description" />
                             </div>
                             <div class="col-4 text-end badge rounded-pill fw-bolder pe-3 pt-1">
-                                <i class="fa fa-money" role="img" aria-label="Amount" title="Amount"/> <field name="amount" widget="monetary"/>
+                                <i class="oi" data-icon="payments" role="img" aria-label="Amount" title="Amount"/> <field name="amount" widget="monetary"/>
                             </div>
                         </div>
                         <div class="row">
                             <div class="col-6">
-                                <i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/> <field name="date"/>
+                                <i class="oi" data-icon="schedule" role="img" aria-label="Date" title="Date"/> <field name="date"/>
                             </div>
                             <div class="col-6">
                                 <field name="user_id" widget="many2one_avatar_user" class="float-end"/>
diff --git a/addons/lunch/static/src/components/lunch_dashboard.xml b/addons/lunch/static/src/components/lunch_dashboard.xml
index bef9ff0d7327cb..66a32a084d3ea6 100644
--- a/addons/lunch/static/src/components/lunch_dashboard.xml
+++ b/addons/lunch/static/src/components/lunch_dashboard.xml
@@ -24,7 +24,7 @@
                 <span t-out="this.line.state" t-attf-class="badge flex-shrink-0 rounded-pill text-bg-#{this.badgeClass}"/>
             </div>
             <div t-if="this.line.note" class="p-2 rounded bg-100 text-muted">
-                <i class="fa fa-fw fa-sticky-note pe-2"/>
+                <i class="oi oi-fw oi-filled pe-2" data-icon="sticky_note_2"/>
                 <t t-out="this.line.note"/>
             </div>
             <div class="d-flex justify-content-between">
@@ -45,7 +45,7 @@
                         t-on-click="() => this.updateQuantity(-1)"
                         aria-label="Decrease quantity"
                     >
-                        <i class="oi oi-minus" role="img"/>
+                        <i class="oi" data-icon="remove" role="img"/>
                     </button>
                     <input
                         type="text"
@@ -59,7 +59,7 @@
                         t-on-click="() => this.updateQuantity(1)"
                         aria-label="Increase quantity"
                     >
-                        <i class="oi oi-plus" role="img"/>
+                        <i class="oi" data-icon="add" role="img"/>
                     </button>
                 </div>
                 <span class="align-content-end fs-3">
@@ -184,7 +184,7 @@
                         t-attf-class="{{this.hasLines and this.state.infos.lines.some(line => ['sent', 'confirmed'].includes(line.raw_state)) ? '' : 'mt-2'}}"
                         name="o_lunch_balance" role="status" tabindex="0" t-attf-aria-label="Available Balance {{this.state.infos.wallet}} {{currency.symbol}}"
                     >
-                        <span><i class="fa fa-money me-2"/>Available Balance</span>
+                        <span><i class="oi me-2" data-icon="payments"/>Available Balance</span>
                         <LunchCurrency currency="currency" amount="this.state.infos.wallet"/>
                     </span>
                     <h4 class="mt-3 pt-3 border-top">Your Order</h4>
@@ -272,7 +272,8 @@
                 <div class="offcanvas-header">
                     <button
                         type="button"
-                        class="btn btn-secondary oi oi-chevron-left"
+                        class="btn btn-secondary oi"
+                        data-icon="chevron_backward"
                         data-bs-dismiss="offcanvas"
                         aria-label="Close"
                     />
diff --git a/addons/lunch/static/tests/lunch_kanban.test.js b/addons/lunch/static/tests/lunch_kanban.test.js
index d4e8bf148c26f4..f21c1cf0cca6ab 100644
--- a/addons/lunch/static/tests/lunch_kanban.test.js
+++ b/addons/lunch/static/tests/lunch_kanban.test.js
@@ -313,7 +313,7 @@ test("Change existing order", async () => {
     });
     await mountLunchView();
 
-    await contains("div.o_lunch_banner li[name='o_lunch_order_line']:contains(Big Plate) i.oi-plus").click();
+    await contains("div.o_lunch_banner li[name='o_lunch_order_line']:contains(Big Plate) i[data-icon='add']").click();
 });
 
 test("Confirm existing order", async () => {
diff --git a/addons/lunch/views/lunch_cashmove_views.xml b/addons/lunch/views/lunch_cashmove_views.xml
index ee42817293fb65..3ef61f383c9969 100644
--- a/addons/lunch/views/lunch_cashmove_views.xml
+++ b/addons/lunch/views/lunch_cashmove_views.xml
@@ -59,12 +59,12 @@
                                 <field name="description" />
                             </div>
                             <div class="col-4 text-end badge rounded-pill fw-bolder pe-3 pt-1">
-                                <i class="fa fa-money" role="img" aria-label="Amount" title="Amount"/> <field name="amount" widget="monetary"/>
+                                <i class="oi" data-icon="payments" role="img" aria-label="Amount" title="Amount"/> <field name="amount" widget="monetary"/>
                             </div>
                         </div>
                         <div class="row">
                             <div class="col-6">
-                                <i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/> <field name="date" />
+                                <i class="oi" data-icon="schedule" role="img" aria-label="Date" title="Date"/> <field name="date" />
                             </div>
                             <div class="col-6">
                                 <field name="user_id" widget="many2one_avatar_user" class="float-end"/>
diff --git a/addons/lunch/views/lunch_orders_views.xml b/addons/lunch/views/lunch_orders_views.xml
index 9063a50df7a3c1..ad6bb8d0ab791f 100644
--- a/addons/lunch/views/lunch_orders_views.xml
+++ b/addons/lunch/views/lunch_orders_views.xml
@@ -47,11 +47,11 @@
                 <field name="company_id" groups="base.group_multi_company"/>
                 <field name="display_reorder_button" column_invisible="True"/>
                 <field name="notified" column_invisible="True"/>
-                <button name="action_reorder" string="Re-order" type="object" icon="fa-history" invisible="not display_reorder_button or not display_add_button" groups="lunch.group_lunch_user"/>
-                <button name="action_confirm" string="Confirm" type="object" icon="fa-check" invisible="state != 'sent'" groups="lunch.group_lunch_manager"/>
-                <button name="action_cancel" string="Cancel" type="object" icon="fa-times" invisible="state in ['cancelled', 'confirmed']" groups="lunch.group_lunch_manager"/>
-                <button name="action_reset" string="Reset" type="object" icon="fa-undo" invisible="state != 'cancelled'" groups="lunch.group_lunch_manager"/>
-                <button name="action_notify" string="Send Notification" type="object" icon="fa-envelope" invisible="state != 'confirmed' or notified" groups="lunch.group_lunch_manager"/>
+                <button name="action_reorder" string="Re-order" type="object" icon="history" invisible="not display_reorder_button or not display_add_button" groups="lunch.group_lunch_user"/>
+                <button name="action_confirm" string="Confirm" type="object" icon="check" invisible="state != 'sent'" groups="lunch.group_lunch_manager"/>
+                <button name="action_cancel" string="Cancel" type="object" icon="close" invisible="state in ['cancelled', 'confirmed']" groups="lunch.group_lunch_manager"/>
+                <button name="action_reset" string="Reset" type="object" icon="undo" invisible="state != 'cancelled'" groups="lunch.group_lunch_manager"/>
+                <button name="action_notify" string="Send Notification" type="object" icon="mail" icon_class="oi-filled" invisible="state != 'confirmed' or notified" groups="lunch.group_lunch_manager"/>
                 <groupby name="supplier_id">
                     <field name="show_order_button" invisible="1" />
                     <field name="show_confirm_button" invisible="1" />
@@ -78,28 +78,28 @@
                         <field name="note"/>
                         <div class="row">
                             <div class="col-6">
-                                <i class="fa fa-money" role="img" aria-label="Money" title="Money"/> <field name="price"/>
+                                <i class="oi" data-icon="payments" role="img" aria-label="Money" title="Money"/> <field name="price"/>
                             </div>
                             <div class="col-6 text-end">
-                                <i class="fa fa-clock-o" role="img" aria-label="Date" title="Date"/> <field name="date" readonly="state != 'new'"/>
+                                <i class="oi" data-icon="schedule" role="img" aria-label="Date" title="Date"/> <field name="date" readonly="state != 'new'"/>
                             </div>
                         </div>
                         <div class="row mt4">
                             <div class="col-6">
                                 <a class="btn btn-sm btn-success" role="button" name="action_order" string="Order" type="object" invisible="state in ['sent', 'ordered', 'confirmed']" groups="lunch.group_lunch_manager">
-                                    <i class="fa fa-phone" role="img" aria-label="Order button" title="Order button"/>
+                                    <i class="oi oi-filled" data-icon="phone" role="img" aria-label="Order button" title="Order button"/>
                                 </a>
                                 <a class="btn btn-sm btn-primary" role="button" name="action_send" string="Send" type="object" invisible="state != 'ordered'" groups="lunch.group_lunch_manager">
-                                    <i class="fa fa-paper-plane" role="img" aria-label="Send button" title="Send button"/>
+                                    <i class="oi oi-filled" data-icon="send" role="img" aria-label="Send button" title="Send button"/>
                                 </a>
                                 <a class="btn btn-sm btn-info" role="button" name="action_confirm" string="Receive" type="object" invisible="state != 'sent'" groups="lunch.group_lunch_manager">
-                                    <i class="fa fa-check" role="img" aria-label="Receive button" title="Receive button"/>
+                                    <i class="oi" data-icon="check" role="img" aria-label="Receive button" title="Receive button"/>
                                 </a>
                                 <a class="btn btn-sm btn-danger" role="button" name="action_cancel" string="Cancel" type="object" invisible="state in ['cancelled', 'confirmed']" groups="lunch.group_lunch_manager">
-                                    <i class="fa fa-times" role="img" aria-label="Cancel button" title="Cancel button"/>
+                                    <i class="oi" data-icon="close" role="img" aria-label="Cancel button" title="Cancel button"/>
                                 </a>
                                 <a class="btn btn-sm btn-info" role="button" name="action_notify" string="Send Notification" type="object" invisible="state != 'confirmed' or notified" groups="lunch.group_lunch_manager">
-                                    <i class="fa fa-envelope" role="img" aria-label="Send notification" title="Send notification"/>
+                                    <i class="oi oi-filled" data-icon="mail" role="img" aria-label="Send notification" title="Send notification"/>
                                 </a>
                             </div>
                             <div class="col-6">
@@ -175,9 +175,9 @@
           </p><p>
             Summary of all lunch orders, grouped by vendor and by date.
           </p><p>
-            Click on the <span class="fa fa-phone text-success" role="img" aria-label="Order button" title="Order button"/> to announce that the order is ordered.<br/>
-            Click on the <span class="fa fa-check text-success" role="img" aria-label="Receive button" title="Receive button"/> to announce that the order is received.<br/>
-            Click on the <span class="fa fa-times-circle text-danger" role="img" aria-label="Cancel button" title="Cancel button"/> red X to announce that the order isn't available.
+            Click on the <span class="oi text-success" data-icon="phone" role="img" aria-label="Order button" title="Order button"/> to announce that the order is ordered.<br/>
+            Click on the <span class="oi text-success" data-icon="check" role="img" aria-label="Receive button" title="Receive button"/> to announce that the order is received.<br/>
+            Click on the <span class="oi oi-filled text-danger" data-icon="cancel" role="img" aria-label="Cancel button" title="Cancel button"/> red X to announce that the order isn't available.
           </p>
         </field>
     </record>
diff --git a/addons/lunch/views/lunch_product_views.xml b/addons/lunch/views/lunch_product_views.xml
index b40a5306d3e3a8..b83759834afb5c 100644
--- a/addons/lunch/views/lunch_product_views.xml
+++ b/addons/lunch/views/lunch_product_views.xml
@@ -26,8 +26,8 @@
                     <filter name="group_by_category" string="Category" context="{'group_by': 'category_id'}"/>
                 </group>
                 <searchpanel>
-                    <field name="category_id" select="multi" string="Categories" icon="fa-cutlery" color="#875A7B" enable_counters="1"/>
-                    <field name="supplier_id" select="multi" string="Vendors" icon="fa-truck" enable_counters="1"/>
+                    <field name="category_id" select="multi" string="Categories" icon="restaurant" color="#875A7B" enable_counters="1"/>
+                    <field name="supplier_id" select="multi" string="Vendors" icon="local_shipping" enable_counters="1"/>
                 </searchpanel>
             </search>
         </field>
@@ -204,7 +204,7 @@
                         <button class="oe_stat_button" type="action" name="%(lunch.lunch_product_action_statbutton)d"
                             context="{'search_default_category_id': id,'default_category_id': id}"
                             invisible="product_count == 0"
-                            icon="fa-cutlery">
+                            icon="restaurant">
                             <field string="Products" name="product_count" widget="statinfo"/>
                         </button>
                     </div>
diff --git a/addons/mail/__manifest__.py b/addons/mail/__manifest__.py
index a0237730dbf59b..5b9a4ce2e39b10 100644
--- a/addons/mail/__manifest__.py
+++ b/addons/mail/__manifest__.py
@@ -213,7 +213,7 @@
             'mail/static/lib/lame/lame.js',
         ],
         "mail.assets_message_email": [
-            "web/static/lib/odoo_ui_icons/style.css",
+            "web/static/lib/odoo_ui_icons/odoo_ui_icons.css",
         ],
         'mail.assets_public': [
             'web/static/lib/jquery/jquery.js',
diff --git a/addons/mail/controllers/mail.py b/addons/mail/controllers/mail.py
index eb86643c1a4388..b68a57da244be8 100644
--- a/addons/mail/controllers/mail.py
+++ b/addons/mail/controllers/mail.py
@@ -277,7 +277,8 @@ def mail_thread_message_redirect(self, message_id, **kwargs):
         '/mail/font_to_img/<icon>/<color>/<bg>/<int:width>x<int:height>',
         '/mail/font_to_img/<icon>/<color>/<bg>/<int:width>x<int:height>/<int:alpha>',
         ], type='http', auth="none")
-    def export_icon_to_png(self, icon, color='#000', bg=None, size=100, alpha=255, font='/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.ttf', width=None, height=None):
+    #Adapt the code to make it work with Material Symbol library
+    def export_icon_to_png(self, icon, color='#000', bg=None, size=100, alpha=255, font='fontawesome/fonts/fontawesome-webfont.ttf', width=None, height=None):
         """ This method converts an unicode character to an image (using Font
             Awesome font by default) and is used only for mass mailing because
             custom fonts are not supported in mail.
@@ -298,17 +299,17 @@ def export_icon_to_png(self, icon, color='#000', bg=None, size=100, alpha=255, f
                 # Replacement of existing Twitter icons by X icons (the route
                 # here receives the old icon code always, but the replacement
                 # one is also considered for consistency anyway).
-                "61569": "59464",  # F081 -> E848: fa-twitter-square
-                "61593": "59418",  # F099 -> E81A: fa-twitter
+                "61569": "59464",  # F081 -> E848: oi_x-square
+                "61593": "59418",  # F099 -> E81A: oi_x
 
                 # Addition of new icons
-                "59407": "59407",  # E80F: fa-strava
-                "59409": "59409",  # E811: fa-discord
-                "59416": "59416",  # E818: fa-threads
-                "59417": "59417",  # E819: fa-kickstarter
-                "59419": "59419",  # E81B: fa-tiktok
-                "59420": "59420",  # E81C: fa-bluesky
-                "59421": "59421",  # E81D: fa-google-play
+                "59407": "59407",  # E80F: oi_strava
+                "59409": "59409",  # E811: oi_discord
+                "59416": "59416",  # E818: oi_threads
+                "59417": "59417",  # E819: oi_kickstarter
+                "59419": "59419",  # E81B: oi_tiktok
+                "59420": "59420",  # E81C: oi_bluesky
+                "59421": "59421",  # E81D: oi_google-play
             }
             if icon in oi_font_char_codes:
                 icon = oi_font_char_codes[icon]
diff --git a/addons/mail/data/mail_activity_type_data.xml b/addons/mail/data/mail_activity_type_data.xml
index 66b4009c8e6aa8..f6b6c3f8a94334 100644
--- a/addons/mail/data/mail_activity_type_data.xml
+++ b/addons/mail/data/mail_activity_type_data.xml
@@ -4,13 +4,13 @@
         <record id="mail_activity_data_email" model="mail.activity.type">
             <field name="name">Email</field>
             <field name="summary">Email</field>
-            <field name="icon">fa-envelope</field>
+            <field name="icon">mail</field>
             <field name="sequence">3</field>
         </record>
         <record id="mail_activity_data_call" model="mail.activity.type">
             <field name="name">Call</field>
             <field name="summary">Call</field>
-            <field name="icon">fa-phone</field>
+            <field name="icon">phone</field>
             <field name="category">phonecall</field>
             <field name="delay_count">2</field>
             <field name="sequence">6</field>
@@ -18,27 +18,27 @@
         <record id="mail_activity_data_meeting" model="mail.activity.type">
             <field name="name">Meeting</field>
             <field name="summary">Meeting</field>
-            <field name="icon">fa-users</field>
+            <field name="icon">group</field>
             <field name="sequence">9</field>
         </record>
         <record id="mail_activity_data_todo" model="mail.activity.type">
             <field name="name">To-Do</field>
             <field name="summary">To-Do</field>
-            <field name="icon">fa-check</field>
+            <field name="icon">check</field>
             <field name="delay_count">5</field>
             <field name="sequence">2</field>
         </record>
         <record id="mail_activity_data_upload_document" model="mail.activity.type">
             <field name="name">Document</field>
             <field name="summary">Document</field>
-            <field name="icon">fa-upload</field>
+            <field name="icon">upload</field>
             <field name="delay_count">5</field>
             <field name="sequence">25</field>
             <field name="category">upload_file</field>
         </record>
         <record id="mail_activity_data_warning" model="mail.activity.type">
             <field name="name">Exception</field>
-            <field name="icon">fa-warning</field>
+            <field name="icon">warning</field>
             <field name="delay_count">0</field>
             <field name="sequence">99</field>
             <field name="decoration_type">warning</field>
diff --git a/addons/mail/data/mail_templates_chatter.xml b/addons/mail/data/mail_templates_chatter.xml
index 5dae6515b72760..a3c77a810f7f60 100644
--- a/addons/mail/data/mail_templates_chatter.xml
+++ b/addons/mail/data/mail_templates_chatter.xml
@@ -12,7 +12,7 @@
         <template id="message_activity_done">
 <div>
     <p>
-        <span t-attf-class="fa #{activity.activity_type_id.icon} fa-fw"/><span t-field="activity.activity_type_id.name"/> done
+        <span class="oi oi-fw" t-att-data-icon="activity.activity_type_id.icon"/><span t-field="activity.activity_type_id.name"/> done
         <t t-if="display_assignee"> (originally assigned to <span t-field="activity.user_id.name"/>)</t>
         <span t-if="activity.summary">: </span><span t-if="activity.summary" t-field="activity.summary"/>
     </p>
diff --git a/addons/mail/models/ir_ui_view.py b/addons/mail/models/ir_ui_view.py
index d809433030ef69..47f1058702ad19 100644
--- a/addons/mail/models/ir_ui_view.py
+++ b/addons/mail/models/ir_ui_view.py
@@ -11,4 +11,4 @@ def _is_qweb_based_view(self, view_type):
         return view_type == "activity" or super()._is_qweb_based_view(view_type)
 
     def _get_view_info(self):
-        return {'activity': {'icon': 'fa fa-clock-o'}} | super()._get_view_info()
+        return {'activity': {'icon': 'schedule'}} | super()._get_view_info()
diff --git a/addons/mail/models/mail_activity_type.py b/addons/mail/models/mail_activity_type.py
index c4617ba3ab063e..b8d1baff13653c 100644
--- a/addons/mail/models/mail_activity_type.py
+++ b/addons/mail/models/mail_activity_type.py
@@ -40,7 +40,7 @@ def _get_model_selection(self):
     delay_from = fields.Selection([
         ('current_date', 'after previous activity completion date'),
         ('previous_activity', 'after previous activity deadline')], string="Delay Type", help="Type of delay", required=True, default='previous_activity')
-    icon = fields.Char('Icon', help="Font awesome icon e.g. fa-tasks")
+    icon = fields.Char('Icon', help="Material Symbols icon e.g. checklist")
     decoration_type = fields.Selection([
         ('warning', 'Alert'),
         ('danger', 'Error')], string="Decoration Type",
diff --git a/addons/mail/static/src/chatter/web/chatter.xml b/addons/mail/static/src/chatter/web/chatter.xml
index b614d4cf3d2d0b..a7a330c39a975a 100644
--- a/addons/mail/static/src/chatter/web/chatter.xml
+++ b/addons/mail/static/src/chatter/web/chatter.xml
@@ -30,13 +30,13 @@
                 </div>
                 <span class="o-mail-Chatter-topbarGrow flex-grow-1 pe-2"/>
                 <button class="btn btn-link text-action px-1" aria-label="Search Messages" title="Search Messages" t-on-click="this.onClickSearch">
-                    <i class="oi oi-search fa-fw" role="img"/>
+                    <i class="oi oi-fw" data-icon="search" role="img"/>
                 </button>
                 <button t-if="this.hasPinnedMessages" class="btn btn-link text-action p-1" aria-label="Pinned Messages" title="Pinned Messages" t-on-click="this.onClickPinnedMessages" t-att-disabled="this.state.isSearchOpen">
-                    <i class="fa fa-fw fa-thumb-tack" role="img"/>
+                    <i class="oi oi-fw" data-icon="push_pin" role="img"/>
                 </button>
                 <button t-if="this.props.hasAttachmentPreview and this.state.thread.attachmentsInWebClientView.length" class="btn btn-link text-action px-1" t-on-click="this.popoutAttachment">
-                    <i class="fa fa-window-restore fa-fw" aria-hidden="Pop out Attachments" title="Pop out Attachments"/>
+                    <i class="oi oi-fw" data-icon="fullscreen_exit" aria-hidden="Pop out Attachments" title="Pop out Attachments"/>
                 </button>
                 <FileUploader t-if="this.attachments.length === 0" fileUploadClass="'o-mail-Chatter-fileUploader'" showUploadingText="false" multiUpload="true" onUploaded.bind="this.onUploaded" onClick="(ev) => this.onClickAttachFile(ev)">
                     <t t-set-slot="toggler">
@@ -47,8 +47,8 @@
                 <div class="o-mail-Followers d-flex">
                     <Dropdown position="'bottom-end'" menuClass="'o-mail-Followers-dropdown ' + this.store.discussDropdownMenuClass(this)" state="this.followerListDropdown">
                         <button t-att-class="'o-mail-Followers-button btn btn-link d-flex align-items-center text-action px-1 my-2 ' + (this.state.thread.selfFollower ? 'active' : '')" t-att-disabled="this.isDisabled" t-att-title="this.followerButtonLabel">
-                            <i class="fa fa-fw" role="img" t-attf-class="{{ this.state.thread.selfFollower ? 'fa-user' : 'fa-user-o' }}"/>
-                            <i t-if="this.state.thread.id and this.state.thread.followersCount === undefined" class="fa fa-circle-o-notch fa-spin"/>
+                            <i class="oi oi-fw" role="img" t-att-class="{ 'oi-filled': this.state.thread.selfFollower }" data-icon="person"/>
+                            <i t-if="this.state.thread.id and this.state.thread.followersCount === undefined" class="oi oi-spin" data-icon="autorenew"/>
                             <sup t-else="" class="o-mail-Followers-counter" t-out="this.state.thread.followersCount ?? 0"/>
                         </button>
                         <t t-set-slot="content">
@@ -84,7 +84,7 @@
                         <FileUploader multiUpload="true" fileUploadClass="'o-mail-Chatter-fileUploader'" onUploaded.bind="this.onUploaded" onClick="(ev) => this.onClickAttachFile(ev)">
                             <t t-set-slot="toggler">
                                 <button class="btn btn-link px-1" type="button" t-att-disabled="!this.state.thread.canPostMessage">
-                                    <i class="fa fa-plus-square"/>
+                                    <i class="oi oi-filled" data-icon="add_box"/>
                                     Attach files
                                 </button>
                             </t>
@@ -119,7 +119,7 @@
         <div class="d-flex pt-2 px-2 cursor-pointer fw-bold" t-on-click="this.toggleActivities">
             <hr class="flex-grow-1 fs-3"/>
             <div class="d-flex align-items-center px-3">
-                <i class="fa fa-fw" t-att-class="this.state.showActivities ? 'fa-caret-down' : 'fa-caret-right'"/>
+                <i class="oi oi-fw" t-att-data-icon="this.state.showActivities ? 'arrow_drop_down' : 'arrow_right'"/>
                 Planned Activities
                 <span t-if="!this.state.showActivities" class="badge rounded-pill ms-2 text-bg-success"><t t-out="this.activities.length"/></span>
             </div>
@@ -138,7 +138,7 @@
         <div class="d-flex pt-2 cursor-pointer fw-bold" t-on-click="this.toggleScheduledMessages">
             <hr class="flex-grow-1 fs-3"/>
             <div class="d-flex align-items-center px-3">
-                <i class="fa fa-fw" t-att-class="this.state.showScheduledMessages ? 'fa-caret-down' : 'fa-caret-right'"/>
+                <i class="oi oi-fw" t-att-data-icon="this.state.showScheduledMessages ? 'arrow_drop_down' : 'arrow_right'"/>
                 Scheduled Messages
                 <span t-if="!this.state.showScheduledMessages" class="badge rounded-pill ms-2 text-bg-success" t-out="this.scheduledMessages.length"/>
             </div>
@@ -155,9 +155,9 @@
 <t t-name="mail.Chatter.attachFiles">
     <button class="o-mail-Chatter-attachFiles btn btn-link text-action px-1 d-flex align-items-center" aria-label="Attach files" t-on-click="this.onClickAddAttachments"
             t-att-disabled="this.state.isSearchOpen || (!this.state.thread.canPostMessage and this.attachments.length === 0)">
-        <i class="fa fa-paperclip fa-lg fa-fw"/>
+        <i class="oi oi-fw" data-icon="attach_file"/>
         <sup t-if="this.attachments.length > 0" t-out="this.attachments.length"/>
-        <i t-if="!this.state.thread.areAttachmentsLoaded and this.state.thread.isLoadingAttachments and this.state.showAttachmentLoading" class="fa fa-circle-o-notch fa-spin" aria-label="Attachment counter loading..."/>
+        <i t-if="!this.state.thread.areAttachmentsLoaded and this.state.thread.isLoadingAttachments and this.state.showAttachmentLoading" class="oi oi-spin" data-icon="autorenew" aria-label="Attachment counter loading..."/>
     </button>
 </t>
 
diff --git a/addons/mail/static/src/chatter/web/scheduled_message.xml b/addons/mail/static/src/chatter/web/scheduled_message.xml
index 7555542b4f7ed4..706cdca5bc4e46 100644
--- a/addons/mail/static/src/chatter/web/scheduled_message.xml
+++ b/addons/mail/static/src/chatter/web/scheduled_message.xml
@@ -15,7 +15,7 @@
                         <strong class="me-1 text-truncate o_redirect cursor-pointer" t-out="this.props.scheduledMessage.author_id.name"/>
                     </span>
                     <small class="o-mail-Message-date text-muted opacity-75" t-att-title="this.scheduledDate">
-                        <i class="fa fa-paper-plane-o mx-1"/>
+                        <i class="oi mx-1" data-icon="send"/>
                         <RelativeTime datetime="this.props.scheduledMessage.scheduled_date"/>
                     </small>
                 </div>
@@ -54,13 +54,13 @@
                 </div>
                 <div class="o-mail-Scheduled-Message-buttons ps-1 d-flex">
                     <span class="btn btn-link btn-success p-0 me-3" t-if="this.props.scheduledMessage.editable" t-on-click="this.onClickSendNow">
-                        <i class="fa fa-send"/> Send Now
+                        <i class="oi oi-filled" data-icon="send"/> Send Now
                     </span>
                     <span class="btn btn-link text-action p-0 me-3" t-if="this.props.scheduledMessage.editable" t-on-click="this.onClickEdit">
-                        <i class="fa fa-pencil"/> Edit
+                        <i class="oi oi-filled" data-icon="edit"/> Edit
                     </span>
                     <span class="btn btn-link btn-danger p-0" t-if="this.props.scheduledMessage.deletable" t-on-click="this.onClickCancel">
-                        <i class="fa fa-times"/> Cancel
+                        <i class="oi" data-icon="close"/> Cancel
                     </span>
                 </div>
             </div>
diff --git a/addons/mail/static/src/core/common/action.js b/addons/mail/static/src/core/common/action.js
index 8bf46dd9d49866..bc5785e6511943 100644
--- a/addons/mail/static/src/core/common/action.js
+++ b/addons/mail/static/src/core/common/action.js
@@ -53,6 +53,7 @@ export const ACTION_TAGS = Object.freeze({
  * @property {boolean|(action: Action) => boolean} [hasBtnBg]
  * @property {string|(action: Action) => string} [hotkey]
  * @property {string|(action: Action) => string} [icon]
+ * @property {string|(action: Action) => string} [iconClass]
  * @property {boolean|(action: Action) => boolean} [inlineName=false]
  * @property {boolean|(action: Action) => boolean} [isActive]
  * @property {string|(action: Action) => string} [name]
@@ -415,7 +416,7 @@ export class Action {
     _icon(action) {}
     /**
      * Icon for the button this action.
-     * - When a string, this is considered an icon as classname (.fa and .oi).
+     * - When a string, this is considered an icon with classname (.oi).
      * - When an object with property `template`, this is an icon rendered in template.
      *   Template params are provided in `params` and passed to template as a `t-set="templateParams"`
      */
@@ -428,6 +429,20 @@ export class Action {
         );
     }
 
+    /** @param {Action} action @returns {string|Object|undefined} */
+    _iconClass(action) {}
+    /**
+     * Icon classes for the button this action.
+     * - When a string, this is considered as classes for icon
+     * - When an object with property `template`, this is an icon class rendered in template.
+     *   Template params are provided in `params` and passed to template as a `t-set="templateParams"`
+     */
+    get iconClass() {
+        return typeof this.definition.iconClass === "function"
+            ? this.definition.iconClass.call(this, this.params)
+            : this.definition.iconClass;
+    }
+
     /** @param {Action} action @returns {string|undefined} */
     _inlineName(action) {}
     /** If set, when action is used in inline, shows action name in addition to icon. */
@@ -594,7 +609,7 @@ export class UseActions extends Reactive {
                     ...data,
                     dropdown: true,
                     dropdownState: new DropdownState(),
-                    icon: data?.icon ?? "oi oi-ellipsis-v",
+                    icon: data?.icon ?? "more_vert",
                     isActive: ({ action }) => action.dropdownState.isOpen,
                     isMoreAction: true,
                     sequence: data.sequence ?? 1000,
diff --git a/addons/mail/static/src/core/common/action_list.scss b/addons/mail/static/src/core/common/action_list.scss
index e5709ea1b64152..e00cee3ee07746 100644
--- a/addons/mail/static/src/core/common/action_list.scss
+++ b/addons/mail/static/src/core/common/action_list.scss
@@ -88,7 +88,7 @@
 
         &.o-tag-JOIN_LEAVE_CALL.o-dropdown-item i {
             font-size: 0.7em !important;
-            &:is(.fa-phone, .fa-video-camera)::before {
+            &:is([data-icon="phone"], [data-icon="videocam"])::before {
                 transform: translateY(1px);
             }
         }
@@ -96,7 +96,7 @@
         .o-mail-ChatWindow &.o-tag-JOIN_LEAVE_CALL i {
             font-size: 0.9em !important;
 
-            &.fa-phone::before {
+            &[data-icon="phone"]::before {
                 transform: translateY(.5px);
             }
         }
diff --git a/addons/mail/static/src/core/common/action_list.xml b/addons/mail/static/src/core/common/action_list.xml
index 1d2824f4c22f7f..c402ec2b07a694 100644
--- a/addons/mail/static/src/core/common/action_list.xml
+++ b/addons/mail/static/src/core/common/action_list.xml
@@ -129,15 +129,15 @@
     <t t-if="this.action.icon?.template" t-call="{{ this.action.icon.template }}">
         <t t-set="templateParams" t-value="this.action.icon.params"/>
     </t>
-    <i t-elif="this.action.icon" t-attf-class="{{ this.action.icon }}" t-att-class="{ 'o-fs-small': this.props.dropdown, 'fa-fw': this.props.fw, 'fa-lg': inMeetingViewCallButtonsFullscreen }"/>
-    <i t-elif="this.props.dropdown" class="fa-question fa-fw opacity-0" t-att-class="this.props.fw ? 'fa-fw' : ''"/>
+    <i t-elif="this.action.icon" class="oi" t-att-class="{ 'oi-fw': this.props.fw, 'oi-lg': inMeetingViewCallButtonsFullscreen }" t-attf-class="{{ this.action.iconClass }}" t-att-data-icon="this.action.icon"/>
+    <i t-elif="this.props.dropdown" class="oi opacity-0" t-att-class="this.props.fw ? 'oi-fw' : ''" data-icon="help"/>
     <span t-if="this.action.name and (this.props.dropdown or (this.props.inline and (!this.action.icon or this.action.inlineName)))" class="o-mail-ActionList-actionLabel" t-attf-class="{{ this.action.nameClass }}" t-att-class="{ 'mx-1': this.props.dropdown }" t-out="(this.props.inline and this.action.inlineName) or this.action.name"/>
     <t t-if="this.props.dropdown and this.action.badge" t-call="mail.Action.badge"/>
 </t>
 
 <t t-name="mail.Action.badge">
     <span class="o-fw-600 badge p-0 rounded-circle d-flex justify-content-center align-items-center" t-attf-class="{{ extraBadgeClass }}" t-att-class="{ 'bg-warning o-discuss-warningBadge': this.action.tags.includes('WARNING_BADGE'), 'o-discuss-badge': this.action.tags.includes('IMPORTANT_BADGE') }" style="aspect-ratio: 1; font-size: 0.6rem;">
-        <i t-if="this.action.badgeIcon" t-att-class="this.action.badgeIcon"/><span t-elif="this.action.badgeText" t-out="this.action.badgeText"/>
+        <i t-if="this.action.badgeIcon" class="oi" t-att-class="this.action.badgeIconClass" t-att-data-icon="this.action.badgeIcon"/><span t-elif="this.action.badgeText" t-out="this.action.badgeText"/>
     </span>
 </t>
 
diff --git a/addons/mail/static/src/core/common/activity_model.js b/addons/mail/static/src/core/common/activity_model.js
index 60aad96939c281..35ca12c1da3f5d 100644
--- a/addons/mail/static/src/core/common/activity_model.js
+++ b/addons/mail/static/src/core/common/activity_model.js
@@ -44,7 +44,7 @@ export class Activity extends Record {
     /** @type {string} */
     feedback;
     /** @type {string} */
-    icon = "fa-tasks";
+    icon = "checklist";
     mail_template_ids = fields.Many("mail.template");
     note = fields.Html("");
     /** @type {string} */
diff --git a/addons/mail/static/src/core/common/attachment_list.js b/addons/mail/static/src/core/common/attachment_list.js
index 6c75883b59f20b..3512d6da680152 100644
--- a/addons/mail/static/src/core/common/attachment_list.js
+++ b/addons/mail/static/src/core/common/attachment_list.js
@@ -128,14 +128,15 @@ export class AttachmentList extends Component {
         if (this.showDelete(attachment)) {
             res.push({
                 label: _t("Remove"),
-                icon: "fa fa-trash",
+                icon: "delete",
+                icon_class: "oi-filled",
                 onSelect: () => this.onClickUnlink(attachment),
             });
         }
         if (this.canDownload(attachment)) {
             res.push({
                 label: _t("Download"),
-                icon: "fa fa-download",
+                icon: "download",
                 onSelect: () => this.onClickDownload(attachment),
             });
         }
diff --git a/addons/mail/static/src/core/common/attachment_list.xml b/addons/mail/static/src/core/common/attachment_list.xml
index 4eea145fa0bf06..669fa164455793 100644
--- a/addons/mail/static/src/core/common/attachment_list.xml
+++ b/addons/mail/static/src/core/common/attachment_list.xml
@@ -78,13 +78,13 @@
                         <!-- buttons on hover -->
                         <div class="o-mail-AttachmentButtons d-flex justify-content-start ms-4 mb-1 mt-auto pt-2">
                             <a t-if="!attachment.isImage and attachment.type === 'url'" class="w-100 h-100 btn bg-500 o-p-1_5 d-flex justify-content-center align-items-center" t-att-href="attachment.url" target='_blank' title="Open Link">
-                                <i class="fa fa-external-link o-text-white" role="img" aria-label="Open Link"/>
+                                <i class="oi o-text-white" data-icon="open_in_new" role="img" aria-label="Open Link"/>
                             </a>
                             <button t-elif="this.canDownload(attachment)" class="btn bg-500 w-100 h-100 o-p-1_5 d-flex justify-content-center align-items-center shadow-sm" t-on-click.stop="() => this.onClickDownload(attachment)" title="Download">
-                                <i class="fa fa-download o-text-white" role="img" aria-label="Download"/>
+                                <i class="oi o-text-white" data-icon="download" role="img" aria-label="Download"/>
                             </button>
                             <button t-if="this.showDelete(attachment)" class="o-mail-Attachment-unlink btn bg-500 w-100 h-100 o-p-1_5 d-flex ms-2 justify-content-center align-items-center shadow-sm" t-att-class="{ 'o-inComposer': this.env.inComposer }" t-on-click.stop="() => this.onClickUnlink(attachment)" title="Remove">
-                                <i class="fa fa-trash o-text-white" role="img" aria-label="Remove"/>
+                                <i class="oi oi-filled o-text-white" data-icon="delete" role="img" aria-label="Remove"/>
                             </button>
                         </div>
                     </div>
@@ -92,11 +92,11 @@
                     <Actions t-else="" actions="this.getActions(attachment)"/>
                     <!-- uploading info -->
                     <div t-if="attachment.uploading" class="position-absolute top-0 bottom-0 start-0 end-0 d-flex align-items-center justify-content-center" title="Uploading">
-                        <i class="fa fa-circle-o-notch fa-spin"/>
+                        <i class="oi oi-spin" data-icon="autorenew"/>
                     </div>
                     <!-- uploaded info -->
                     <div t-if="this.showUploaded(attachment)" class="o-Attachment-uploaded position-absolute top-0 d-flex" t-att-class="!this.isMobileOS ? 'end-0' : 'start-0'" title="Uploaded">
-                        <i class="fa fa-check"/>
+                        <i class="oi" data-icon="check"/>
                     </div>
                 </div>
             </div>
@@ -110,11 +110,11 @@
             </button>
             <Dropdown t-else="" menuClass="'d-flex flex-column py-0'" state="this.actionsMenuState" position="'right-start'">
                 <button class="btn btn-sm btn-light rounded px-1 py-0" tabindex="0" aria-label="Actions" title="Actions" role="menuitem">
-                    <i class="oi oi-chevron-down"/>
+                    <i class="oi" data-icon="keyboard_arrow_down"/>
                 </button>
                 <t t-set-slot="content">
                     <DropdownItem t-foreach="this.props.actions" t-as="action" t-key="action_index" class="'px-2 py-1 d-flex align-items-center rounded-0'" onSelected="action.onSelect">
-                        <i class="fa-fw" t-att-class="action.icon"/>
+                        <i class="oi oi-fw" t-att-class="action.icon_class" t-att-data-icon="action.icon"/>
                         <span class="mx-2" t-out="action.label"/>
                     </DropdownItem>
                 </t>
diff --git a/addons/mail/static/src/core/common/attachment_view.xml b/addons/mail/static/src/core/common/attachment_view.xml
index 2556d8771d40bb..e25fa72dadc93d 100644
--- a/addons/mail/static/src/core/common/attachment_view.xml
+++ b/addons/mail/static/src/core/common/attachment_view.xml
@@ -7,7 +7,7 @@
                  t-on-click="this.onClickPopout"
                  data-tooltip="Open preview in a separate window."
                  data-tooltip-delay="400">
-                <i class="fa fa-window-restore" aria-hidden="Pop out"/>
+                <i class="oi" data-icon="fullscreen_exit" aria-hidden="Pop out"/>
             </div>
             <t t-if="this.state.thread.message_main_attachment_id">
                 <h3 t-if="!this.state.thread.message_main_attachment_id.isPdf" class="mt0 mb8 ps-2 text-muted text-center"><t t-out="this.displayName"/></h3>
@@ -17,10 +17,10 @@
                 <iframe t-if="this.state.thread.message_main_attachment_id.isPdf" class="d-print-none mb48" t-att-src="this.state.thread.message_main_attachment_id.defaultSource" t-custom-ref="iframeViewerPdf"/>
                 <t t-if="this.state.thread.attachmentsInWebClientView.length > 1 or (this.state.thread.attachmentsInWebClientView.length > 0 and !(this.state.thread.message_main_attachment_id.isPdf or this.state.thread.message_main_attachment_id.isImage))">
                     <a class="arrow o_move_previous text-center" href="#" t-on-click.prevent="this.onClickPrevious">
-                        <span class="oi oi-chevron-left"/>
+                        <span class="oi" data-icon="chevron_backward"/>
                     </a>
                     <a class="arrow o_move_next text-center" href="#" t-on-click.prevent="this.onClickNext">
-                        <span class="oi oi-chevron-right"/>
+                        <span class="oi" data-icon="chevron_forward"/>
                     </a>
                 </t>
             </t>
diff --git a/addons/mail/static/src/core/common/chat_bubble.xml b/addons/mail/static/src/core/common/chat_bubble.xml
index 6507c88e5480ae..f0239cf014ae85 100644
--- a/addons/mail/static/src/core/common/chat_bubble.xml
+++ b/addons/mail/static/src/core/common/chat_bubble.xml
@@ -2,9 +2,9 @@
 <templates xml:space="preserve">
     <t t-name="mail.ChatBubble">
         <div t-if="this.props.chatWindow?.channel" class="o-mail-ChatBubble position-relative" t-att-name="this.props.chatWindow.channel.displayName" t-att-class="{ 'o-bouncing': this.state.bouncing, 'o-active': this.state.isPopoverOpen, 'o-mobile': this.isMobileOS }" t-on-click="() => this.props.chatWindow.open({ focus: true })" t-on-animationend="() => this.state.bouncing = false" t-custom-ref="root">
-            <span class="o-mail-ChatBubble-unreadIndicator position-absolute" t-att-class="{ 'opacity-0': !this.channel.isUnread or this.channel.importantCounter }"><i class="fa fa-circle"/></span>
+            <span class="o-mail-ChatBubble-unreadIndicator position-absolute" t-att-class="{ 'opacity-0': !this.channel.isUnread or this.channel.importantCounter }"><i class="oi oi-filled" data-icon="circle"/></span>
             <div t-if="this.channel.importantCounter > 0" class="o-mail-ChatBubble-counter position-absolute badge rounded-pill fw-bold o-discuss-badge shadow" t-out="this.channel.importantCounter"/>
-            <button t-if="!this.env.embedLivechat and !this.isMobileOS" class="o-mail-ChatBubble-close position-absolute shadow rounded-circle fw-bold bg-view" title="Close Chat Bubble" t-on-click.stop="() => this.props.chatWindow.requestClose()"><i class="oi oi-close"/></button>
+            <button t-if="!this.env.embedLivechat and !this.isMobileOS" class="o-mail-ChatBubble-close position-absolute shadow rounded-circle fw-bold bg-view" title="Close Chat Bubble" t-on-click.stop="() => this.props.chatWindow.requestClose()"><i class="oi" data-icon="close_small"/></button>
             <CountryFlag t-if="this.channel.showCorrespondentCountry" country="this.channel.correspondentCountry" class="'o-mail-ChatBubble-country position-absolute bottom-0 border shadow-sm'"/>
             <button class="o-mail-ChatHub-bubbleBtn btn shadow">
                 <DiscussAvatar channel="this.channel" size="42" imgRoundedClass="'rounded-circle'"/>
diff --git a/addons/mail/static/src/core/common/chat_hub.js b/addons/mail/static/src/core/common/chat_hub.js
index 4580b9df4e9a30..693bb141387db0 100644
--- a/addons/mail/static/src/core/common/chat_hub.js
+++ b/addons/mail/static/src/core/common/chat_hub.js
@@ -82,7 +82,7 @@ export class ChatHub extends Component {
                         id: "hide-all",
                         definition: {
                             name: _t("Hide all conversations"),
-                            icon: "fa fa-eye-slash",
+                            icon: "visibility_off",
                             onSelected: () => this.chatHub.hideAll(),
                         },
                         store: this.store,
@@ -92,7 +92,7 @@ export class ChatHub extends Component {
                         id: "close-all",
                         definition: {
                             name: _t("Close all conversations"),
-                            icon: "oi oi-close",
+                            icon: "close_small",
                             onSelected: () => this.chatHub.closeAll(),
                         },
                         store: this.store,
@@ -107,7 +107,7 @@ export class ChatHub extends Component {
                     id: "reset-position",
                     definition: {
                         name: _t("Reset initial position"),
-                        icon: "fa fa-undo",
+                        icon: "undo",
                         onSelected: () => this.resetPosition(),
                     },
                     store: this.store,
diff --git a/addons/mail/static/src/core/common/chat_hub.xml b/addons/mail/static/src/core/common/chat_hub.xml
index 6ec6bf6ade64de..925236463123fa 100644
--- a/addons/mail/static/src/core/common/chat_hub.xml
+++ b/addons/mail/static/src/core/common/chat_hub.xml
@@ -10,7 +10,7 @@
         <div class="o-mail-ChatHub-bubbles position-fixed d-flex flex-column align-content-start justify-content-end align-items-center" t-attf-style="top: {{this.position.top}}; left: {{this.position.left}}; right: {{this.position.right}}; --mail-ChatHub-bubbles-bottom: {{this.position.bottom}}" t-att-class="{ 'o-liftUp': this.busMonitoring.hasConnectionIssues, 'o-mobile': this.isMobileOS }" t-custom-ref="bubbles">
             <div class="d-flex flex-column align-content-start justify-content-end align-items-center o-gap-1_5">
                 <Dropdown t-if="this.optionActions.length" state="this.options" position="'top-end'" menuClass="'m-0 mb-1 ' + this.store.discussDropdownMenuClass(this)">
-                    <button class="o-mail-ChatHub-bubbleBtn btn o-mail-ChatHub-optionsBtn bg-100 mt-1" t-att-class="{ 'opacity-0': !this.bubblesHover.isHover and !this.position.dragged and !this.options.isOpen and !this.isMobileOS, 'o-bubblesHover': (this.bubblesHover.isHover or this.position.dragged) and !this.isMobileOS, 'o-active': this.bubblesHover.isHover or this.options.isOpen }" title="Chat Options"><i class="oi oi-ellipsis-h"/></button>
+                    <button class="o-mail-ChatHub-bubbleBtn btn o-mail-ChatHub-optionsBtn bg-100 mt-1" t-att-class="{ 'opacity-0': !this.bubblesHover.isHover and !this.position.dragged and !this.options.isOpen and !this.isMobileOS, 'o-bubblesHover': (this.bubblesHover.isHover or this.position.dragged) and !this.isMobileOS, 'o-active': this.bubblesHover.isHover or this.options.isOpen }" title="Chat Options"><i class="oi" data-icon="more_horiz"/></button>
                     <t t-set-slot="content">
                         <ActionList actions="this.optionActions" dropdown="true"/>
                     </t>
@@ -36,7 +36,7 @@
                 <t t-out="this.compactCounter"/>
             </div>
             <button class="o-mail-ChatHub-bubbleBtn btn fs-2 shadow" t-on-click="this.expand">
-                <i class="o-mail-ChatHub-hiddenBtnIcon d-flex justify-content-center align-items-center btn rounded-circle shadow-sm fa fa-comments"/>
+                <i class="o-mail-ChatHub-hiddenBtnIcon d-flex justify-content-center align-items-center btn rounded-circle shadow-sm oi oi-filled" data-icon="forum"/>
             </button>
         </div>
     </Dropdown>
@@ -62,7 +62,7 @@
                             <t t-out="chatWindow.channel.importantCounter"/>
                         </div>
                         <button class="o-mail-ChatHub-hiddenClose o-mail-ChatBubble-close d-flex align-items-center rounded" t-on-click.stop="() => chatWindow.close()">
-                            <i class="oi oi-close"/>
+                            <i class="oi" data-icon="close_small"/>
                         </button>
                     </li>
                 </t>
diff --git a/addons/mail/static/src/core/common/chat_window.scss b/addons/mail/static/src/core/common/chat_window.scss
index ba81f39ad0cb65..fb90517ec289d1 100644
--- a/addons/mail/static/src/core/common/chat_window.scss
+++ b/addons/mail/static/src/core/common/chat_window.scss
@@ -24,7 +24,7 @@
         backdrop-filter: invert(.025);
         border-color: transparent !important;
     }
-    &:not(.o-active):not(.o-hover) .fa-caret-down {
+    &:not(.o-active):not(.o-hover) [data-icon="arrow_drop_down"] {
         opacity: 25%;
     }
 }
diff --git a/addons/mail/static/src/core/common/chat_window.xml b/addons/mail/static/src/core/common/chat_window.xml
index e9ad29d8000e13..e4c9b5c8698244 100644
--- a/addons/mail/static/src/core/common/chat_window.xml
+++ b/addons/mail/static/src/core/common/chat_window.xml
@@ -23,7 +23,7 @@
                             t-custom-ref="actionsMenuButton"
                         >
                             <t t-call="mail.ChatWindow.headerContent"/>
-                            <i t-if="!this.state.editingName" class="fa fa-fw fa-caret-down"/>
+                            <i t-if="!this.state.editingName" class="oi oi-fw" data-icon="arrow_drop_down"/>
                         </button>
                         <t t-set-slot="content">
                             <t t-if="this.props.chatWindow.exists()">
@@ -41,7 +41,7 @@
                     onValidate.bind="this.renameChannel"
                     value="this.props.chatWindow.channel.displayName"
                 />
-                <i t-if="this.state.editingName" class="fa fa-fw fa-caret-down opacity-50"/>
+                <i t-if="this.state.editingName" class="oi oi-fw opacity-50" data-icon="arrow_drop_down"/>
             </t>
             <t t-else="">
                 <t t-call="mail.ChatWindow.headerContent"/>
@@ -96,7 +96,7 @@
     </div>
     <t t-if="this.channel.parent_channel_id">
         <span class="fw-bold small o-mx-0_5 opacity-75 opacity-100-hover cursor-pointer o-hover-text-underline rounded fs-6" t-out="this.channel.parent_channel_id.displayName" title="Open Channel" t-custom-ref="parentChannel" t-on-click.stop="() => this.channel.parent_channel_id.open({ focus: true })"/>
-        <i class="fa fa-chevron-right o-xsmaller ms-1 mt-1 text-muted opacity-75"/>
+        <i class="oi o-xsmaller ms-1 mt-1 text-muted opacity-75" data-icon="chevron_right"/>
     </t>
     <CountryFlag t-if="this.channel.showCorrespondentCountry" country="this.channel.correspondentCountry" class="'o-mail-ChatWindow-country border shadow-sm'"/>
     <div t-if="!this.state.editingName" class="o-mail-ChatWindow-displayName text-truncate fw-bold border border-transparent o-mx-0_5 my-0 py-1" t-att-title="this.props.chatWindow.channel.displayName" t-out="this.props.chatWindow.channel.displayName" t-att-class="{ 'fs-4': this.ui.isSmall, 'fs-5': !this.ui.isSmall }"/>
diff --git a/addons/mail/static/src/core/common/composer.scss b/addons/mail/static/src/core/common/composer.scss
index aa6ead40eae11d..c598aaf119153e 100644
--- a/addons/mail/static/src/core/common/composer.scss
+++ b/addons/mail/static/src/core/common/composer.scss
@@ -73,7 +73,7 @@
                 outline: darken($o-action, 15%) solid 1px;
             }
         }
-        i.fa-paper-plane-o {
+        i[data-icon="send"] {
             transform: translate(-1px);
             scale: .85;
         }
@@ -88,7 +88,7 @@
             &:focus-visible {
                 outline: darken($o-action, 15%) solid 1px;
             }
-            i.fa-paper-plane-o {
+            i[data-icon="send"] {
                 color: #FFF;
                 transform: translate(-1px);
                 scale: .85;
diff --git a/addons/mail/static/src/core/common/composer.xml b/addons/mail/static/src/core/common/composer.xml
index 0ccf574c614df8..6481653f738118 100644
--- a/addons/mail/static/src/core/common/composer.xml
+++ b/addons/mail/static/src/core/common/composer.xml
@@ -23,7 +23,7 @@
                 }" t-attf-class="{{ this.props.className }}">
             <FileUploader t-if="this.allowUpload" multiUpload="this.isMultiUpload" onUploaded.bind="(data) => { this.attachmentUploader.uploadData(data) }">
                 <t t-set-slot="toggler">
-                    <button t-att-disabled="!this.state.active or this.areAllActionsDisabled" class="d-none" title="Attach files" aria-label="Attach files" t-custom-ref="file-uploader"><i class="fa fa-fw fa-paperclip"/></button>
+                    <button t-att-disabled="!this.state.active or this.areAllActionsDisabled" class="d-none" title="Attach files" aria-label="Attach files" t-custom-ref="file-uploader"><i class="oi oi-fw" data-icon="attach_file"/></button>
                 </t>
             </FileUploader>
             <div t-if="this.showComposerAvatar" class="o-mail-Composer-sidebarMain flex-shrink-0 d-flex">
@@ -37,11 +37,11 @@
                     <span t-if="this.props.composer.replyToMessage.thread?.notEq(this.props.composer.thread)">
                         on: <b><t t-out="this.props.composer.replyToMessage.thread.displayName"/></b>
                     </span>
-                    <i class="fa fa-lg fa-times-circle rounded-circle p-0 ms-1 cursor-pointer" title="Discard" t-on-click="() => (this.props.composer.replyToMessage = undefined)"/>
+                    <i class="oi oi-lg oi-filled rounded-circle p-0 ms-1 cursor-pointer" data-icon="cancel" title="Discard" t-on-click="() => (this.props.composer.replyToMessage = undefined)"/>
                 </div>
                 <span t-if="this.props.composer.message and this.ui.isSmall" class="px-1" t-on-click="this.onClickCancelOrSaveEditText">
                     <button class="btn btn-sm btn-secondary rounded-pill border border-secondary ps-1 pe-2 py-0 mb-1" t-att-data-type="this.EDIT_CLICK_TYPE.CANCEL">
-                        <i class="oi oi-close pe-2" t-att-data-type="this.EDIT_CLICK_TYPE.CANCEL"></i>
+                        <i class="oi pe-2" data-icon="close_small" t-att-data-type="this.EDIT_CLICK_TYPE.CANCEL"></i>
                         Discard editing
                     </button>
                 </span>
@@ -148,7 +148,7 @@
         t-att-aria-label="this.SEND_TEXT"
     >
         <t t-if="this.thread and !this.thread.channel" t-out="this.SEND_TEXT"/>
-        <t t-else=""><i class="fa fa-fw fa-lg fa-paper-plane-o"/></t>
+        <t t-else=""><i class="oi oi-fw oi-lg" data-icon="send"/></t>
     </button>
 </t>
 
@@ -166,7 +166,7 @@
             <t t-set="moreName">More Actions</t>
             <ActionList inline="true" actions="[{
                 'disabledCondition': this.areAllActionsDisabled,
-                'icon': 'fa fa-plus-circle',
+                'icon': 'add_circle',
                 'id': 'more-actions',
                 'name': moreName,
                 'tags': [],
@@ -216,10 +216,10 @@
 
     <t t-name="mail.Composer.suggestionChannel">
         <strong class="px-2 py-1 align-self-center flex-shrink-0 text-truncate">
-            <i t-attf-class="fa #{option.channel?.parent_channel_id ? 'fa-comments-o' : 'fa-hashtag'} me-2"/>
+            <i class="oi me-2" t-att-data-icon="option.channel?.parent_channel_id ? 'forum' : 'tag'"/>
             <t t-if="option.channel.parent_channel_id">
                 <t t-out="option.channel.parent_channel_id.displayName"/>
-                <i class="oi oi-chevron-right o-xsmaller mx-1"/>
+                <i class="oi o-xsmaller mx-1" data-icon="chevron_forward"/>
             </t>
             <t t-out="option.channel.displayName"/>
         </strong>
@@ -259,8 +259,8 @@
                 <p class="mb-0 small text-muted">Formatting can only be restored in Full Composer.</p>
             </div>
             <div class="d-flex align-items-center justify-content-center gap-1 mt-2">
-                <button class="btn btn-primary" t-on-click="this.onClickFullRecover"><i class="fa fa-check me-2 opacity-75"/>Yes <span class="small opacity-50">(Keep formatting)</span></button>
-                <button class="btn btn-secondary" t-on-click="this.onClickTextRecover"><i class="oi oi-close me-2 opacity-75"/>No <span class="small opacity-50">(Remove formatting)</span></button>
+                <button class="btn btn-primary" t-on-click="this.onClickFullRecover"><i class="oi me-2 opacity-75" data-icon="check"/>Yes <span class="small opacity-50">(Keep formatting)</span></button>
+                <button class="btn btn-secondary" t-on-click="this.onClickTextRecover"><i class="oi me-2 opacity-75" data-icon="close"/>No <span class="small opacity-50">(Remove formatting)</span></button>
             </div>
         </div>
     </t>
diff --git a/addons/mail/static/src/core/common/composer_actions.js b/addons/mail/static/src/core/common/composer_actions.js
index 91be5220e8691c..e13a67fb580c54 100644
--- a/addons/mail/static/src/core/common/composer_actions.js
+++ b/addons/mail/static/src/core/common/composer_actions.js
@@ -68,7 +68,7 @@ registerComposerAction("send-message", {
     condition: ({ composer, owner, store }) =>
         (store.env.isSmall && composer.message) || (!owner.env.inChatter && !composer.message),
     disabledCondition: ({ owner }) => owner.isSendButtonDisabled,
-    icon: "fa fa-paper-plane-o",
+    icon: "send",
     isActive: ({ owner }) => owner.sendMessageState.active,
     name: ({ composer, owner }) =>
         composer.message
@@ -92,7 +92,7 @@ registerComposerAction("send-message", {
 });
 registerComposerAction("add-emoji", {
     disabledCondition: ({ owner }) => owner.areAllActionsDisabled,
-    icon: "fa fa-smile-o",
+    icon: "sentiment_satisfied",
     isPicker: true,
     pickerName: _t("Emoji"),
     name: _t("Add Emojis"),
@@ -117,7 +117,7 @@ registerComposerAction("add-emoji", {
 registerComposerAction("upload-files", {
     disabledCondition: ({ owner }) => owner.areAllActionsDisabled,
     condition: ({ owner }) => owner.allowUpload,
-    icon: "fa fa-paperclip",
+    icon: "attach_file",
     name: _t("Attach Files"),
     onSelected: ({ composer: comp, owner }, ev) => {
         owner.fileUploaderRef.el?.click();
@@ -138,7 +138,7 @@ registerComposerAction("open-full-composer", {
     hasBtnBg: ({ composer, owner }) =>
         (composer.restoredFromFullComposer && !owner.state.isFullComposerOpen) || undefined,
     hotkey: "shift+c",
-    icon: "fa fa-expand",
+    icon: "expand_content",
     isActive: ({ composer, owner }) =>
         (composer.restoredFromFullComposer && !owner.state.isFullComposerOpen) || undefined,
     name: _t("Open Full Composer"),
@@ -156,14 +156,14 @@ registerComposerAction("add-canned-response", {
         store.env.services["mail.suggestion"]
             .getSupportedDelimiters(composer.targetThread)
             .find(([delimiter]) => delimiter === "::"),
-    icon: "fa fa-file-text-o",
+    icon: "article",
     name: _t("Insert a Canned response"),
     onSelected: ({ owner }, ev) => owner.onClickInsertCannedResponse(ev),
     sequence: 5,
 });
 registerComposerAction("start-poll", {
     name: _t("Start a poll"),
-    icon: "oi oi-view-cohort",
+    icon: "oi_view-cohort",
     condition: ({ composer, store }) => {
         if (!store.self_user || store.self_user.share) {
             return false;
diff --git a/addons/mail/static/src/core/common/create_poll_dialog.xml b/addons/mail/static/src/core/common/create_poll_dialog.xml
index 2a69471230e1d9..9ac5644cb3f7f1 100644
--- a/addons/mail/static/src/core/common/create_poll_dialog.xml
+++ b/addons/mail/static/src/core/common/create_poll_dialog.xml
@@ -13,7 +13,7 @@
         <div class="mb-3">
             <span class="mb-2 d-inline-block fw-bold">Options</span>
             <CreatePollOptionDialog t-foreach="this.state.options" t-as="option" t-key="option_index" model="option" deletable="this.state.options.length > 2" onClickRemove="() => this.onClickRemoveOption(option_index)"/>
-            <button class="btn btn-link align-self-end" t-on-click="this.onClickAddOption"><i class="fa fa-plus me-1"/> Add another option</button>
+            <button class="btn btn-link align-self-end" t-on-click="this.onClickAddOption"><i class="oi me-1" data-icon="add"/> Add another option</button>
             <div t-if="this.optionsMissing" class="text-danger form-text ms-1">At least two options are required</div>
         </div>
         <div class="d-flex justify-content-between gap-3">
diff --git a/addons/mail/static/src/core/common/create_poll_option_dialog.xml b/addons/mail/static/src/core/common/create_poll_option_dialog.xml
index ec8803582f8ecd..3cb65a63b860e3 100644
--- a/addons/mail/static/src/core/common/create_poll_option_dialog.xml
+++ b/addons/mail/static/src/core/common/create_poll_option_dialog.xml
@@ -3,10 +3,10 @@
     <t t-name="mail.CreatePollOptionDialog">
         <div class="o-mail-CreatePollOptionDialog d-flex gap-2 mb-3">
             <div class=" input-group">
-                <button class="btn btn-outline-secondary" type="button" t-custom-ref="picker"><i class="fa fa-lg fa-smile-o"/></button>
+                <button class="btn btn-outline-secondary" type="button" t-custom-ref="picker"><i class="oi oi-lg" data-icon="sentiment_satisfied"/></button>
                 <input type="text" t-custom-model="this.props.model.label" class="form-control rounded" placeholder="Type your option" t-custom-ref="root"/>
             </div>
-            <button t-if="this.props.deletable" class="btn btn-primary" title="Delete option" t-on-click="this.props.onClickRemove"><i class="fa fa-trash"/></button>
+            <button t-if="this.props.deletable" class="btn btn-primary" title="Delete option" t-on-click="this.props.onClickRemove"><i class="oi oi-filled" data-icon="delete"/></button>
         </div>
     </t>
 </templates>
diff --git a/addons/mail/static/src/core/common/im_status.js b/addons/mail/static/src/core/common/im_status.js
index ed67326a0dc2cd..27f4e72c152e63 100644
--- a/addons/mail/static/src/core/common/im_status.js
+++ b/addons/mail/static/src/core/common/im_status.js
@@ -11,12 +11,20 @@ imStatusDataRegistry.add(
     {
         condition: () => true,
         icon: {
-            online: "fa fa-circle",
-            away: "fa fa-adjust",
-            busy: "fa fa-minus-circle",
-            offline: "fa fa-circle-o",
-            bot: "fa fa-heart o-xsmaller o-pt-0_5",
-            default: "fa fa-question-circle",
+            online: "circle",
+            away: "contrast",
+            busy: "remove_circle",
+            offline: "circle",
+            bot: "favorite",
+            default: "help",
+        },
+        icon_class: {
+            online: "oi-filled",
+            away: "",
+            busy: "",
+            offline: "",
+            bot: "oi-filled o-xsmaller o-pt-0_5",
+            default: "",
         },
         title: {
             online: _t("User is online"),
@@ -62,7 +70,7 @@ export class ImStatus extends Component {
         return attClassObjectToString({
             [`o-mail-ImStatus d-flex ${this.colorClass} ${this.props.className}`]: true,
             "o-fs-small": this.persona?.im_status !== "bot",
-            [`rounded-circle bg-transparent ${this.icon}`]: !this.showTypingIndicator,
+            [`rounded-circle bg-transparent ${this.iconClass}`]: !this.showTypingIndicator,
             "rounded-pill": this.showTypingIndicator,
         });
     }
@@ -78,6 +86,11 @@ export class ImStatus extends Component {
         return data.icon[this.persona.imStatusUI] || data.icon.default || data.icon;
     }
 
+    get iconClass() {
+        const data = this.activeImStatusData;
+        return data.icon_class[this.persona.imStatusUI] || data.icon_class.default || data.icon_class;
+    }
+
     get title() {
         const data = this.activeImStatusData;
         return data.title[this.persona.imStatusUI] || data.title.default || data.title;
diff --git a/addons/mail/static/src/core/common/im_status.scss b/addons/mail/static/src/core/common/im_status.scss
index 2e5a6de50b36e1..4539b43623f4ec 100644
--- a/addons/mail/static/src/core/common/im_status.scss
+++ b/addons/mail/static/src/core/common/im_status.scss
@@ -2,7 +2,7 @@
 .o-mail-ImStatus {
 
     i {
-        &.fa-heart {
+        &[data-icon="favorite"] {
             transform: scale(.8); // Deviation: handle icon inconsistent size
         }
     }
diff --git a/addons/mail/static/src/core/common/im_status.xml b/addons/mail/static/src/core/common/im_status.xml
index 8ce24ff5912bef..183c98ba0c4f24 100644
--- a/addons/mail/static/src/core/common/im_status.xml
+++ b/addons/mail/static/src/core/common/im_status.xml
@@ -4,7 +4,7 @@
     <t t-name="mail.ImStatus">
         <t t-slot="pre_icon"/>
         <t name="icon">
-            <i t-if="(!this.props.member or !this.showTypingIndicator) and this.persona" t-att-class="this.class" t-att-style="this.props.style" t-att-title="this.title" role="img" t-att-aria-label="this.title"/>
+            <i t-if="(!this.props.member or !this.showTypingIndicator) and this.persona" class="oi" t-att-class="this.class" t-att-data-icon="this.icon" t-att-style="this.props.style" t-att-title="this.title" role="img" t-att-aria-label="this.title"/>
             <div t-if="this.showTypingIndicator" class="o-mail-ImStatus-typingContainer rounded-pill" t-att-class="this.class">
                 <div class="o-mail-ImStatus-typingBg bg-success rounded-pill">
                     <Typing member="this.props.member" size="['sm', 'smaller'].includes(this.props.size) ? 'sm' : 'md'" displayText="false" />
diff --git a/addons/mail/static/src/core/common/im_status_dropdown.xml b/addons/mail/static/src/core/common/im_status_dropdown.xml
index f891085ce1d0bc..77b4eb1dcf8b4d 100644
--- a/addons/mail/static/src/core/common/im_status_dropdown.xml
+++ b/addons/mail/static/src/core/common/im_status_dropdown.xml
@@ -3,17 +3,17 @@
     <t t-name="mail.ImStatusDropdown">
         <Dropdown menuClass="'o-mail-ImStatusDropdown'">
             <a href="#" t-att-class="{ 'd-block text-body py-3 fs-4 d-flex flex-row gap-2': this.env.isSmall }">
-                <ImStatus user="this.store.self_user"/> <span t-out="this.readableImStatus"/> <i t-if="this.env.isSmall" class="oi oi-chevron-right ms-auto mt-1"/>
+                <ImStatus user="this.store.self_user"/> <span t-out="this.readableImStatus"/> <i t-if="this.env.isSmall" class="oi ms-auto mt-1" data-icon="chevron_forward"/>
             </a>
             <t t-set-slot="content">
-                <DropdownItem class="{ 'active': this.store.self.imStatusUI === 'online' }" onSelected="() => this.setManualImStatus('online')"><i class="fa fa-circle text-success me-1" title="Online" role="img"/> Online</DropdownItem>
+                <DropdownItem class="{ 'active': this.store.self.imStatusUI === 'online' }" onSelected="() => this.setManualImStatus('online')"><i class="oi oi-filled text-success me-1" data-icon="circle" title="Online" role="img"/> Online</DropdownItem>
                 <hr class="my-1"/>
-                <DropdownItem class="{ 'active': this.store.self.imStatusUI === 'away' }" onSelected="() => this.setManualImStatus('away')"><i class="fa fa-adjust o-yellow me-1" title="Away" role="img"/> Away</DropdownItem>
+                <DropdownItem class="{ 'active': this.store.self.imStatusUI === 'away' }" onSelected="() => this.setManualImStatus('away')"><i class="oi o-yellow me-1" data-icon="contrast" title="Away" role="img"/> Away</DropdownItem>
                 <DropdownItem class="{ 'active': this.store.self.imStatusUI === 'busy' }" onSelected="() => this.setManualImStatus('busy')">
-                    <i class="fa fa-minus-circle text-danger me-1" title="Busy" role="img"/> Do Not Disturb
+                    <i class="oi text-danger me-1" data-icon="remove_circle" title="Busy" role="img"/> Do Not Disturb
                     <div class="small text-muted">You will not receive any notifications</div>
                 </DropdownItem>
-                <DropdownItem class="{ 'active': this.store.self.imStatusUI === 'offline' }" onSelected="() => this.setManualImStatus('offline')"><i class="fa fa-circle-o text-700 opacity-75 me-1" title="Offline" role="img"/> Offline</DropdownItem>
+                <DropdownItem class="{ 'active': this.store.self.imStatusUI === 'offline' }" onSelected="() => this.setManualImStatus('offline')"><i class="oi text-700 opacity-75 me-1" data-icon="circle" title="Offline" role="img"/> Offline</DropdownItem>
             </t>
         </Dropdown>
     </t>
diff --git a/addons/mail/static/src/core/common/link_preview.xml b/addons/mail/static/src/core/common/link_preview.xml
index c96d5ae434a527..5943c809c38b05 100644
--- a/addons/mail/static/src/core/common/link_preview.xml
+++ b/addons/mail/static/src/core/common/link_preview.xml
@@ -43,14 +43,14 @@
                     </div>
                 </div>
                 <t t-call="mail.LinkPreview.aside">
-                    <t t-set="className" t-value="'fa fa-stack p-0 opacity-75 opacity-100-hover'"/>
+                    <t t-set="className" t-value="'oi oi-stack p-0 opacity-75 opacity-100-hover'"/>
                 </t>
             </t>
             <t t-else="">
                 <div class="border-start border-4 px-2 py-1">
                     <t t-call="mail.LinkPreviewCard.content"/>
                     <t t-call="mail.LinkPreview.aside">
-                        <t t-set="className" t-value="'fa fa-stack p-0 opacity-75 opacity-100-hover'"/>
+                        <t t-set="className" t-value="'oi oi-stack p-0 opacity-75 opacity-100-hover'"/>
                     </t>
                 </div>
             </t>
@@ -92,7 +92,7 @@
                 <iframe t-if="this.state.startVideo" t-att-src="this.linkPreview.videoURL" class="h-100 w-100 rounded" t-att-class="{'d-none': !this.state.videoLoaded}" allow="autoplay" frameborder="0" allowFullScreen="true" t-custom-ref="video"/>
             </div>
             <t t-call="mail.LinkPreview.aside">
-                <t t-set="className" t-value="'fa fa-stack p-0 opacity-75 opacity-100-hover'"/>
+                <t t-set="className" t-value="'oi oi-stack p-0 opacity-75 opacity-100-hover'"/>
             </t>
         </div>
     </t>
@@ -100,7 +100,7 @@
     <t t-name="mail.LinkPreview.aside">
         <div t-if="this.props.messageLinkPreview.message_id?.allowsEdition and !this.env.inLinkPreviewConfirmDelete" class="position-absolute top-0 end-0 small">
             <button t-attf-class="{{ className }}" class="o-mail-LinkPreview-aside btn" aria-label="Remove" t-on-click="this.onClick">
-                <i class="fa fa-times"/>
+                <i class="oi" data-icon="close"/>
             </button>
         </div>
     </t>
@@ -108,13 +108,13 @@
     <t t-name="mail.LinkPreviewVideo.preview">
         <div class="o-mail-LinkPreviewVideo-overlay position-relative h-100 rounded-bottom" t-att-class="{'bg-dark': !this.linkPreview.og_image}">
             <img t-if="this.linkPreview.og_image" class="img-fluid h-100 w-100 object-fit-cover rounded" t-att-src="this.linkPreview.og_image" t-att-alt="this.linkPreview.og_title" t-on-load="this.onImageLoaded"/>
-            <i t-elif="this.linkPreview.videoURL" class="fa fa-television fa-8x position-absolute top-50 start-50 translate-middle"/>
+            <i t-elif="this.linkPreview.videoURL" class="oi oi-8x position-absolute top-50 start-50 translate-middle" data-icon="tv"/>
             <span t-else="" class="d-flex align-items-center justify-content-center w-100 h-100 bg-100 text-300">
-                <i class="fa fa-camera fa-2x"/>
+                <i class="oi oi-2x" data-icon="photo_camera"/>
             </span>
             <div class="position-absolute top-50 start-50 translate-middle">
                 <div t-if="!this.state.startVideo" class="o-mail-LinkPreviewVideo-play btn btn-lg rounded transition-base">
-                    <i class="fa fa-play"/>
+                    <i class="oi" data-icon="play_arrow"/>
                 </div>
                 <div t-elif="!this.linkPreview.og_image" class="spinner-border text-muted"/>
             </div>
diff --git a/addons/mail/static/src/core/common/mail_attachment_dropzone.xml b/addons/mail/static/src/core/common/mail_attachment_dropzone.xml
index 74a77bc2b5f7b5..d6693488b0cfde 100644
--- a/addons/mail/static/src/core/common/mail_attachment_dropzone.xml
+++ b/addons/mail/static/src/core/common/mail_attachment_dropzone.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="mail.MailAttachmentDropzone">
         <Dropzone t-props="this.props">
-            <h4>Drop Files here <i class="fa fa-paperclip"/></h4>
+            <h4>Drop Files here <i class="oi" data-icon="attach_file"/></h4>
         </Dropzone>
     </t>
 </templates>
diff --git a/addons/mail/static/src/core/common/message.js b/addons/mail/static/src/core/common/message.js
index 4abec16f210029..52e8201df90829 100644
--- a/addons/mail/static/src/core/common/message.js
+++ b/addons/mail/static/src/core/common/message.js
@@ -378,7 +378,8 @@ export class Message extends Component {
             return {
                 action: () => this.message.setDone(),
                 bgColor: "bg-success",
-                icon: "fa-check-circle",
+                icon: "check_circle",
+                icon_class: "oi-filled",
             };
         }
         if (
@@ -388,7 +389,7 @@ export class Message extends Component {
             return {
                 action: () => this.message.markAsUnread(this.props.thread),
                 bgColor: "bg-secondary",
-                icon: "fa-eye-slash",
+                icon: "visibility_off",
             };
         }
         return undefined;
diff --git a/addons/mail/static/src/core/common/message.scss b/addons/mail/static/src/core/common/message.scss
index cb385a0b2fbf10..f7b8d5de604b5b 100644
--- a/addons/mail/static/src/core/common/message.scss
+++ b/addons/mail/static/src/core/common/message.scss
@@ -146,7 +146,7 @@
         font-size: 1rem;
     }
 
-    .o-mail-Message.o-isMobileOS & i.oi-ellipsis-v {
+    .o-mail-Message.o-isMobileOS & i[data-icon="more_vert"] {
         opacity: 15%;
     }
 }
diff --git a/addons/mail/static/src/core/common/message.xml b/addons/mail/static/src/core/common/message.xml
index ec80827dab80ea..83d4e71a7c190d 100644
--- a/addons/mail/static/src/core/common/message.xml
+++ b/addons/mail/static/src/core/common/message.xml
@@ -59,7 +59,7 @@
                             </small>
                             <div t-if="this.props.message.scheduledDatetime" t-att-class="{ 'ms-2': (this.env.inChatWindow and this.isAlignedRight) or (this.isPersistentMessageFromAnotherThread) }" t-att-title="this.props.message.scheduledDateSimple">
                                 <span class="text-600 cursor-pointer">
-                                    <i class="fa fa-calendar-o"/>
+                                    <i class="oi" data-icon="calendar_today"/>
                                 </span>
                             </div>
                             <t t-if="this.isAlignedRight" t-call="mail.Message.notification"/>
@@ -122,7 +122,7 @@
                                                             <t t-if="this.message.translationSource" t-out="this.translatedFromText"/>
                                                         </p>
                                                         <p class="fst-italic text-muted small" t-if="this.message.translationErrors">
-                                                            <i class="text-danger fa fa-warning" role="img" aria-label="Translation Failure"/>
+                                                            <i class="oi text-danger" data-icon="warning" role="img" aria-label="Translation Failure"/>
                                                             <t t-if="this.message.translationErrors" t-out="this.translationFailureText"/>
                                                         </p>
                                                         <t t-if="this.showSubtypeDescription" t-out="this.props.messageSearch?.highlight(this.message.subtype_id?.description) ?? this.message.subtype_id?.description"/>
@@ -192,19 +192,19 @@
 
 <t t-name="mail.Message.emptyQuickAction">
     <button class="btn border-0 o-p-0_5 rounded-0 opacity-0 pe-none">
-        <i class="fa-lg fa fa-question"/>
+        <i class="oi oi-lg" data-icon="help"/>
     </button>
 </t>
 
 <t t-name="mail.Message.notification">
     <div t-if="this.message.thread?.eq(this.props.thread) and this.message.notification_ids.length > 0" class="mx-1">
         <span class="o-mail-Message-notification cursor-pointer opacity-100-hover" t-att-class="this.message.failureNotifications.length > 0 ? 'text-danger opacity-75' : 'opacity-50'" role="button" tabindex="0" t-on-click="this.onClickNotification">
-            <i t-att-class="this.message.notification_ids[0].icon" role="img" aria-label="Delivery failure"/> <span class="fw-bold small" t-if="this.message.notification_ids[0].label" t-out="this.message.notification_ids[0].label"/>
+            <i class="oi" t-att-class="this.message.notification_ids[0].iconClass" t-att-data-icon="this.message.notification_ids[0].icon" role="img" aria-label="Delivery failure"/> <span class="fw-bold small" t-if="this.message.notification_ids[0].label" t-out="this.message.notification_ids[0].label"/>
         </span>
     </div>
     <div t-elif="this.message.thread?.eq(this.props.thread) and (this.message.incoming_email_to?.length or this.message.incoming_email_cc?.length)" class="mx-1">
         <span class="o-mail-Message-notification cursor-pointer" t-att-class="this.message.failureNotifications.length > 0 ? 'text-danger' : this.text-600" role="button" tabindex="0" t-on-click="this.onClickNotification">
-            <i class="fa fa-envelope-o" role="img"/>
+            <i class="oi" data-icon="mail" role="img"/>
         </span>
     </div>
 </t>
@@ -216,25 +216,25 @@
 </t>
 
 <t t-name="mail.Message.pendingStatus">
-    <button t-if="this.message.postFailRedo" class="btn p-0" title="Failed to post the message. Click to retry" t-on-click="() => this.message.postFailRedo?.()"><i class="fa fa-fw fa-warning text-warning"/></button>
-    <span t-else="" class="o-mail-Message-pendingProgress"><i class="fa fa-fw fa-circle-o-notch fa-spin opacity-50"/></span>
+    <button t-if="this.message.postFailRedo" class="btn p-0" title="Failed to post the message. Click to retry" t-on-click="() => this.message.postFailRedo?.()"><i class="oi oi-fw text-warning" data-icon="warning"/></button>
+    <span t-else="" class="o-mail-Message-pendingProgress"><i class="oi oi-fw oi-spin opacity-50" data-icon="autorenew"/></span>
 </t>
 
 <t t-name="mail.Message.mentionedChannelIcon">
-    <i t-att-class="icon"/>
+    <i class="oi" t-att-data-icon="icon"/>
 </t>
 
 <t t-name="mail.Message.sidebarBookmark">
     <small class="text-center lh-1 o-opacity-35" t-att-class="{ 'align-self-start ms-1': this.isAlignedRight, 'align-self-end me-1': !this.isAlignedRight, 'mt-2': this.props.squashed, 'mt-1': !this.props.squashed }" title="Bookmarked">
-        <i class="fa fa-bookmark"/>
+        <i class="oi oi-filled" data-icon="bookmark"/>
     </small>
 </t>
 
     <t t-name="mail.Message.messageLink">
         <span>
             <span class="me-1" t-out="message.thread.displayName"/>
-            <span class="fa fa-angle-right me-1" aria-hidden="true"/>
-            <span class="fa fa-comment" aria-hidden="true"/>
+            <span class="oi me-1" data-icon="keyboard_arrow_right" aria-hidden="true"/>
+            <span class="oi oi-filled" data-icon="chat_bubble" aria-hidden="true"/>
         </span>
     </t>
 
diff --git a/addons/mail/static/src/core/common/message_actions.js b/addons/mail/static/src/core/common/message_actions.js
index c40e5ee4643891..13e9346b526fef 100644
--- a/addons/mail/static/src/core/common/message_actions.js
+++ b/addons/mail/static/src/core/common/message_actions.js
@@ -38,7 +38,7 @@ registerMessageAction("reaction", {
     }),
     componentCondition: ({ owner }) => !isMobileOS() && !owner.isMessageContextMenu,
     condition: ({ message, thread }) => message.canAddReaction(thread),
-    icon: "oi oi-smile-add",
+    icon: "add_reaction",
     name: _t("Add a Reaction"),
     onSelected({ owner }) {
         const anchorEl = owner.isMessageContextMenu
@@ -71,7 +71,7 @@ registerMessageAction("reply-to", {
                 !message.isSelfAuthored)
         );
     },
-    icon: "fa fa-reply",
+    icon: "reply",
     name: _t("Reply"),
     onSelected: ({ message: msg, owner, thread: thr }) => {
         const message = toRaw(msg);
@@ -105,35 +105,36 @@ registerMessageAction("reply-to", {
 });
 registerMessageAction("add-bookmark", {
     condition: ({ message }) => message.canToggleBookmark && !message.is_bookmarked,
-    icon: "fa fa-bookmark-o",
+    icon: "bookmark",
     name: _t("Bookmark"),
     onSelected: ({ message }) => message.addBookmark(),
     sequence: 30,
 });
 registerMessageAction("remove-bookmark", {
     condition: ({ message }) => message.canToggleBookmark && message.is_bookmarked,
-    icon: "fa fa-bookmark",
+    icon: "bookmark",
+    iconClass: "oi-filled",
     name: _t("Remove from Bookmarks"),
     onSelected: ({ message, thread }) => message.removeBookmark(thread),
     sequence: 30,
 });
 registerMessageAction("mark-as-read", {
     condition: ({ store, thread }) => thread?.eq(store.inbox),
-    icon: "fa fa-check",
+    icon: "check",
     name: _t("Mark as Read"),
     onSelected: ({ message }) => message.setDone(),
     sequence: 40,
 });
 registerMessageAction("mark-as-unread", {
     condition: ({ message, thread }) => message.canMarkAsUnread(thread),
-    icon: "fa fa-eye-slash",
+    icon: "visibility_off",
     name: _t("Mark as Unread"),
     onSelected: ({ message, thread }) => message.markAsUnread(thread),
     sequence: 40,
 });
 registerMessageAction("reactions", {
     condition: ({ message }) => message.reactions.length,
-    icon: "fa fa-smile-o",
+    icon: "sentiment_satisfied",
     name: _t("View Reactions"),
     onSelected: ({ message, owner, store }) => {
         store.env.services.dialog.add(MessageReactionMenu, { message }, { context: owner });
@@ -142,14 +143,16 @@ registerMessageAction("reactions", {
 });
 registerMessageAction("unfollow", {
     condition: ({ message, thread }) => message.canUnfollow(thread),
-    icon: "fa fa-user-times",
+    icon: "person_remove",
+    iconClass: "oi-filled",
     name: _t("Unfollow"),
     onSelected: ({ message }) => message.unfollow(),
     sequence: 60,
 });
 registerMessageAction("edit", {
     condition: ({ message }) => message.editable,
-    icon: "fa fa-pencil",
+    icon: "edit",
+    iconClass: "oi-filled",
     name: _t("Edit"),
     onSelected: ({ message, owner, thread }) => {
         message.enterEditMode(thread);
@@ -159,7 +162,8 @@ registerMessageAction("edit", {
 });
 registerMessageAction("delete", {
     condition: ({ message }) => message.deletable,
-    icon: "fa fa-trash",
+    icon: "delete",
+    iconClass: "oi-filled",
     name: _t("Delete"),
     onSelected: ({ message, owner }) => toRaw(message).showDeleteConfirm(owner),
     sequence: 120,
@@ -168,7 +172,8 @@ registerMessageAction("delete", {
 registerMessageAction("download_files", {
     condition: ({ message, store }) =>
         message.attachment_ids.length > 1 && store.self_user?.share === false,
-    icon: "fa fa-download",
+    icon: "download",
+    iconClass: "oi-filled",
     name: _t("Download Files"),
     onSelected: ({ message }) =>
         download({
@@ -182,8 +187,8 @@ registerMessageAction("download_files", {
 });
 registerMessageAction("toggle-translation", {
     condition: ({ message }) => message.isTranslatable,
-    icon: ({ message }) =>
-        `fa fa-language ${message.showTranslation ? "o-mail-Message-translated" : ""}`,
+    icon: "translate",
+    iconClass: ({ message }) => message.showTranslation ? "o-mail-Message-translated" : "",
     name: ({ message }) => (message.showTranslation ? _t("Revert") : _t("Translate")),
     onSelected: ({ message }) => message.onClickToggleTranslation(),
     sequence: 100,
@@ -192,7 +197,7 @@ registerMessageAction("copy-message", {
     condition: ({ message }) => !message.isBodyEmpty,
     onSelected: ({ message }) => message.copyMessageText(),
     name: _t("Copy Text"),
-    icon: "fa fa-copy",
+    icon: "content_copy",
     sequence: () => (isMobileOS() ? 30 : 105),
 });
 registerMessageAction("copy-link", {
@@ -201,7 +206,7 @@ registerMessageAction("copy-link", {
         message.message_type !== "user_notification" &&
         thread &&
         (!thread.access_token || thread.hasReadAccess),
-    icon: "fa fa-link",
+    icon: "link",
     name: _t("Copy Link"),
     onSelected: ({ message }) => message.copyLink(),
     sequence: 110,
@@ -209,7 +214,7 @@ registerMessageAction("copy-link", {
 registerMessageAction("end-poll", {
     condition: ({ message }) =>
         message.poll && !message.poll.end_message_id && message.poll.createdBySelf,
-    icon: " oi oi-view-cohort",
+    icon: "oi_view-cohort",
     name: _t("End Poll"),
     onSelected: ({ message }) => rpc("/mail/poll/end", { poll_id: message.poll.id }),
     sequence: 115,
diff --git a/addons/mail/static/src/core/common/message_card_list.xml b/addons/mail/static/src/core/common/message_card_list.xml
index 5b2b94477c6fe5..0760ebab4feab5 100644
--- a/addons/mail/static/src/core/common/message_card_list.xml
+++ b/addons/mail/static/src/core/common/message_card_list.xml
@@ -7,7 +7,7 @@
                     <div class="position-absolute top-0 end-0 z-1 mx-2 my-1 d-flex align-items-center">
                         <a role="button" class="o-mail-MessageCard-jump rounded bg-400 badge opacity-0" t-att-class="{ 'opacity-100 py-1 px-2': this.ui.isSmall }" t-on-click="() => this.onClickJump(message)">Jump</a>
                         <button t-if="this.props.mode === 'pin' and this.store.self_user" class="btn btn-link text-reset ms-2 p-0 opacity-25 opacity-100-hover" t-att-class="{ 'fs-5': this.ui.isSmall }" title="Unpin" t-on-click="() => this.onClickUnpin(message)">
-                            <i class="oi oi-close"/>
+                            <i class="oi" data-icon="close_small"/>
                         </button>
                     </div>
                     <Message hasActions="false" message="message" thread="this.props.thread" messageSearch="this.props.messageSearch"/>
diff --git a/addons/mail/static/src/core/common/message_delete_dialog.xml b/addons/mail/static/src/core/common/message_delete_dialog.xml
index 840b3863cc9b27..5ee36422645e1b 100644
--- a/addons/mail/static/src/core/common/message_delete_dialog.xml
+++ b/addons/mail/static/src/core/common/message_delete_dialog.xml
@@ -9,11 +9,11 @@
         </blockquote>
         <t t-set-slot="footer">
             <button class="btn btn-danger me-2" t-on-click="this.onClickConfirm">
-                <i class="fa fa-trash me-1 opacity-50"/>
+                <i class="oi oi-filled me-1 opacity-50" data-icon="delete"/>
                 Delete
             </button>
             <button class="btn btn-secondary me-2" t-on-click="this.props.close">
-                <i class="oi oi-close me-1 opacity-50"/>
+                <i class="oi me-1 opacity-50" data-icon="close"/>
                 Discard
             </button>
         </t>
diff --git a/addons/mail/static/src/core/common/message_in_reply.xml b/addons/mail/static/src/core/common/message_in_reply.xml
index b2b2fe69f09977..79f228da759e82 100644
--- a/addons/mail/static/src/core/common/message_in_reply.xml
+++ b/addons/mail/static/src/core/common/message_in_reply.xml
@@ -13,7 +13,7 @@
                         <span class="o-mail-MessageInReply-content overflow-hidden smaller">
                             <b class="o-mail-MessageInReply-author o-fw-600"><t t-out="this.props.message.parent_id.authorName"/></b>:
                             <span class="o-mail-MessageInReply-message ms-1 text-break">
-                                <i t-if="this.props.message.parent_id.hasAttachments" class="fa fa-fw me-1" t-att-class="this.props.message.parent_id.previewIcon" />
+                                <i t-if="this.props.message.parent_id.hasAttachments" class="oi oi-fw me-1" t-att-data-icon="this.props.message.parent_id.previewIcon" />
                                 <t t-if="this.props.message.parent_id.inlineBody">
                                     <t t-out="this.props.message.parent_id.inlineBody"/>
                                     <em t-if="this.props.message.parent_id.edited" class="smaller fw-bold text-500"> (edited)</em>
diff --git a/addons/mail/static/src/core/common/message_model.js b/addons/mail/static/src/core/common/message_model.js
index 296e3aa3f5ddad..c3be9fc34e747a 100644
--- a/addons/mail/static/src/core/common/message_model.js
+++ b/addons/mail/static/src/core/common/message_model.js
@@ -456,7 +456,7 @@ export class Message extends Record {
                 if (this.ended_poll_ids.length) {
                     text = this.poll.pollClosedText;
                 }
-                return markup`<i class="fa fa-fw o-me-0_5 oi oi-view-cohort"></i>${text}`;
+                return markup`<i class="oi oi-fw o-me-0_5" data-icon="oi_view-cohort"></i>${text}`;
             }
             if (this.notificationType === "call") {
                 return _t("%(caller)s started a call", { caller: this.authorName });
@@ -487,9 +487,16 @@ export class Message extends Record {
     get notificationIcon() {
         switch (this.notificationType) {
             case "pin":
-                return "fa fa-thumb-tack";
+                return "push_pin";
             case "call":
-                return "fa fa-phone";
+                return "phone";
+        }
+        return null;
+    }
+
+    get notificationIconClass() {
+        if(this.notificationType === "call") {
+            return "oi-filled";
         }
         return null;
     }
@@ -546,7 +553,7 @@ export class Message extends Record {
                         count: attachments.length - 1,
                     });
             }
-            return markup`<i class="fa me-1 ${this.previewIcon}"></i>${messageBody}`;
+            return markup`<i class="oi me-1" data-icon="${this.previewIcon}""></i>${messageBody}`;
         },
     });
 
@@ -555,7 +562,7 @@ export class Message extends Record {
         compute() {
             const messageBody = this.bodyPreview;
             if (this.isSelfAuthored) {
-                return markup`<i class="fa fa-mail-reply me-1 opacity-75"></i>${_t(
+                return markup`<i class="oi me-1 opacity-75" data-icon="reply"></i>${_t(
                     "You: %(message_content)s",
                     { message_content: messageBody }
                 )}`;
@@ -578,13 +585,13 @@ export class Message extends Record {
         const firstAttachment = attachments[0];
         switch (true) {
             case firstAttachment.isImage:
-                return "fa-picture-o";
+                return "image";
             case firstAttachment.mimetype === "audio/mpeg":
-                return firstAttachment.voice ? "fa-microphone" : "fa-headphones";
+                return firstAttachment.voice ? "mic" : "headphones";
             case firstAttachment.isVideo:
-                return "fa-video-camera";
+                return "videocam";
             default:
-                return "fa-file";
+                return "description";
         }
     }
 
@@ -861,7 +868,7 @@ export class Message extends Record {
                     buttons: [
                         {
                             name: "Undo",
-                            icon: "fa-undo",
+                            icon: "undo",
                             onClick: async () => {
                                 await this.addBookmark();
                                 this.closeNotificationFn();
diff --git a/addons/mail/static/src/core/common/message_notification_popover.xml b/addons/mail/static/src/core/common/message_notification_popover.xml
index 9e56eb85f57b5d..38c71e1e3d854b 100644
--- a/addons/mail/static/src/core/common/message_notification_popover.xml
+++ b/addons/mail/static/src/core/common/message_notification_popover.xml
@@ -7,7 +7,7 @@
             <t t-set="followerNotifications" t-value="this.props.message.notification_ids.filter((notif) => notif._proxy.isFollowerNotification)"/>
             <div t-foreach="otherNotifications" t-as="notification" t-key="notification.id">
                 <t t-set="email_to" t-value="notification.mail_email_address or notification.res_partner_id?.email"/>
-                <i class="me-2 fa-fw" t-att-class="notification.statusIcon" t-att-title="notification.statusTitle" role="img"/>
+                <i class="oi oi-fw me-2" t-att-class="notification.statusClass" t-att-data-icon="notification.statusIcon" t-att-title="notification.statusTitle" role="img"/>
                 <span t-if="notification.res_partner_id">
                     <t t-out="this.props.message.getPersonaName(notification.res_partner_id)"/>
                     <t t-if="email_to and !notification.isFailure"> <span class="text-muted">(<t t-out="email_to" />)</span></t>
@@ -16,13 +16,13 @@
                 <span class="ms-1 text-muted" t-if="notification.isFailure">(<t t-out="notification.failureMessage"/>)</span>
             </div>
             <div t-if="this.props.message.incoming_email_cc or this.props.message.incoming_email_to" t-foreach="(this.props.message.incoming_email_cc || []).concat(this.props.message.incoming_email_to || [])" t-as="incomingEmail" t-key="incomingEmail_index">
-                <i class="me-2 fa fa-fw fa-send-o"/>
+                <i class="oi oi-fw me-2" data-icon="send"/>
                 <span t-if="incomingEmail[0]" t-out="incomingEmail[0]" class="pe-1"/>
                 <span t-if="incomingEmail[1]" t-out="incomingEmail[1]" class="ps-1"/>
             </div>
             <div t-foreach="followerNotifications" t-as="notification" t-key="notification.id">
                 <t t-set="email_to" t-value="notification.mail_email_address or notification.res_partner_id?.email"/>
-                <i class="me-2 fa-fw" t-att-class="notification.statusIcon" t-att-title="notification.statusTitle" role="img"/>
+                <i class="oi oi-fw me-2" t-att-class="notification.statusClass" t-att-data-icon="notification.statusIcon" t-att-title="notification.statusTitle" role="img"/>
                 <span t-if="notification.res_partner_id">
                     <t t-out="this.props.message.getPersonaName(notification.res_partner_id)"/>
                     <t t-if="email_to and !notification.isFailure"> <span class="text-muted">(<t t-out="email_to" />)</span></t>
diff --git a/addons/mail/static/src/core/common/message_pin_dialog.xml b/addons/mail/static/src/core/common/message_pin_dialog.xml
index a69b6e1f42f351..c1402ce880b122 100644
--- a/addons/mail/static/src/core/common/message_pin_dialog.xml
+++ b/addons/mail/static/src/core/common/message_pin_dialog.xml
@@ -14,7 +14,7 @@
                 <t t-out="this.confirmText"/>
             </button>
             <button class="btn btn-secondary me-2" t-on-click="this.props.close">
-                <i class="oi oi-close me-1 opacity-50"/>
+                <i class="oi me-1 opacity-50" data-icon="close"/>
                 Discard
             </button>
         </t>
diff --git a/addons/mail/static/src/core/common/message_reaction_menu.scss b/addons/mail/static/src/core/common/message_reaction_menu.scss
index 4b328da102cb77..68fc596cefc265 100644
--- a/addons/mail/static/src/core/common/message_reaction_menu.scss
+++ b/addons/mail/static/src/core/common/message_reaction_menu.scss
@@ -4,11 +4,11 @@
 }
 
 .o-mail-MessageReactionMenu-persona:not(.o-isDeviceSmall) {
-    &:not(:hover) button.fa-trash {
+    &:not(:hover) button[data-icon="delete"] {
         opacity: 0;
     }
 
-    &:hover button.fa-trash {
+    &:hover button[data-icon="delete"] {
         opacity: 100;
 
         &:hover {
diff --git a/addons/mail/static/src/core/common/message_reaction_menu.xml b/addons/mail/static/src/core/common/message_reaction_menu.xml
index a039afff983226..bce2cb4d6d56bf 100644
--- a/addons/mail/static/src/core/common/message_reaction_menu.xml
+++ b/addons/mail/static/src/core/common/message_reaction_menu.xml
@@ -17,7 +17,7 @@
                             <span class="d-flex flex-grow-1 align-items-center">
                                 <span class="mx-2 text-truncate fs-6" t-out="this.props.message.getPersonaName(persona)"/>
                                 <div class="flex-grow-1"/>
-                                <button t-if="this.props.message.effectiveSelf.eq(persona)" class="btn btn-light fa fa-trash rounded-pill bg-inherit border-0" title="Remove" t-on-click.stop="() => reaction.remove()"/>
+                                <button t-if="this.props.message.effectiveSelf.eq(persona)" class="btn btn-light oi oi-filled rounded-pill bg-inherit border-0" data-icon="delete" title="Remove" t-on-click.stop="() => reaction.remove()"/>
                             </span>
                         </div>
                     </TabPanel>
diff --git a/addons/mail/static/src/core/common/navigable_list.xml b/addons/mail/static/src/core/common/navigable_list.xml
index 97375de0ef4da1..5bb86953ed042b 100644
--- a/addons/mail/static/src/core/common/navigable_list.xml
+++ b/addons/mail/static/src/core/common/navigable_list.xml
@@ -29,7 +29,7 @@
 
     <t t-name="mail.NavigableList.spinner">
         <span class="d-flex align-items-center w-100 py-2 gap-1 text-muted opacity-75" t-att-class="{ 'px-1': this.props.options.length, 'px-4': !this.props.options.length }">
-            <i class="fa fa-spin fa-circle-o-notch"/>
+            <i class="oi oi-spin" data-icon="autorenew"/>
             Loading…
         </span>
     </t>
diff --git a/addons/mail/static/src/core/common/notification_message.xml b/addons/mail/static/src/core/common/notification_message.xml
index 902ac7e768a422..926465e56eb563 100644
--- a/addons/mail/static/src/core/common/notification_message.xml
+++ b/addons/mail/static/src/core/common/notification_message.xml
@@ -3,7 +3,7 @@
     <t t-name="mail.NotificationMessage">
         <div class="o-mail-NotificationMessage text-break mx-auto px-3 text-center smaller position-relative" t-on-click="this.onClickNotificationMessage" t-custom-ref="root">
             <div class="o-mail-Message-jumpTarget position-absolute top-0 pe-none"/>
-            <i t-if="this.message.notificationIcon" t-attf-class="{{ this.message.notificationIcon }} me-1 text-muted"/>
+            <i t-if="this.message.notificationIcon" t-attf-class="oi {{ this.message.notificationIconClass }} me-1 text-muted" t-att-data-icon="this.message.notificationIcon"/>
             <t t-if="this.message.notificationType === 'call'">
                 <span class="text-muted" t-out="this.callInformation"/>
             </t>
diff --git a/addons/mail/static/src/core/common/notification_model.js b/addons/mail/static/src/core/common/notification_model.js
index fdd294b3e9bcd9..5769a2cb63f34e 100644
--- a/addons/mail/static/src/core/common/notification_model.js
+++ b/addons/mail/static/src/core/common/notification_model.js
@@ -87,10 +87,13 @@ export class Notification extends Record {
     }
 
     get icon() {
+        return "mail";
+    }
+
+    get iconClass() {
         if (this.isFailure) {
-            return "fa fa-envelope";
+            return "oi-filled";
         }
-        return "fa fa-envelope-o";
     }
 
     get label() {
@@ -106,26 +109,32 @@ export class Notification extends Record {
     get statusIcon() {
         switch (this.notification_status) {
             case "process":
-                return "fa fa-hourglass-half";
+                return "hourglass_bottom";
             case "pending":
-                return "fa fa-paper-plane-o";
+                return "send";
             case "sent":
-                return "fa fa-check";
+                return "check";
             case "bounce":
-                return "fa fa-exclamation";
+                return "priority_high";
             case "exception":
-                return "fa fa-times text-danger";
+                return "close";
             case "ready":
-                return "fa fa-send-o";
+                return "send";
             case "canceled":
                 if (this.autoCanceledFailureType) {
-                    return "fa fa-remove";
+                    return "close";
                 }
-                return "fa fa-trash-o";
+                return "delete";
         }
         return "";
     }
 
+    get statusClass() {
+        if (this.notification_status === "exception") {
+            return "text-danger";
+        }
+    }
+
     get statusTitle() {
         switch (this.notification_status) {
             case "process":
diff --git a/addons/mail/static/src/core/common/poll.scss b/addons/mail/static/src/core/common/poll.scss
index 9833de3b1532a4..907de69591c612 100644
--- a/addons/mail/static/src/core/common/poll.scss
+++ b/addons/mail/static/src/core/common/poll.scss
@@ -45,7 +45,7 @@ $poll-color-map: (
         background-size: 0%;
         transition: background-size 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
 
-        .fa-check-circle {
+        [data-icon="check_circle"].oi-filled {
             color: rgb(var(--poll-bg-r), var(--poll-bg-g), var(--poll-bg-b));
         }
 
diff --git a/addons/mail/static/src/core/common/poll.xml b/addons/mail/static/src/core/common/poll.xml
index 3e928e012046d0..31abb456caa5e0 100644
--- a/addons/mail/static/src/core/common/poll.xml
+++ b/addons/mail/static/src/core/common/poll.xml
@@ -14,7 +14,7 @@
                         <span class="flex-shrink-0">
                             <span class="me-2 smaller" t-out="this.props.poll.voteCountText(option.number_of_votes)"/>
                             <span class="o-fw-600"><t t-out="option.vote_percentage"/>%</span>
-                            <i t-if="option.selected_by_self" class="o-mx-1_5 fa fa-lg fa-check-circle"/>
+                            <i t-if="option.selected_by_self" class="o-mx-1_5 oi oi-lg oi-filled" data-icon="check_circle"/>
                         </span>
                     </div>
                     <label t-else="" class="d-flex justify-content-between p-2 cursor-pointer">
diff --git a/addons/mail/static/src/core/common/poll_result.xml b/addons/mail/static/src/core/common/poll_result.xml
index 51748b6cbe58e5..a5031f82160e05 100644
--- a/addons/mail/static/src/core/common/poll_result.xml
+++ b/addons/mail/static/src/core/common/poll_result.xml
@@ -4,20 +4,20 @@
         <div class="w-100">
             <div class="o-mail-PollResult card border border-secondary rounded mb-2 p-2 w-100">
                 <div class="d-flex gap-1 align-items-center fw-bold text-muted text-break card-title small mb-0">
-                    <i class="oi oi-view-cohort o-mt-0_5 opacity-50 o-xsmaller"/>
+                    <i class="oi o-mt-0_5 opacity-50 o-xsmaller" data-icon="oi_view-cohort"/>
                     <span class="align-self-start" t-out="this.props.poll.pollClosedText"/>
                 </div>
                 <div class="card-body d-flex gap-2 align-items-center p-0 ms-3">
                     <div class="d-flex align-items-center flex-grow-1 gap-2 smaller">
                         <t t-if="!this.props.poll.winning_option_id">
-                            <i class="fa fa-2x fa-meh-o"/>
+                            <i class="oi oi-2x" data-icon="sentiment_neutral"/>
                             <p class="text-start fw-bold mb-0">There was no winner</p>
                         </t>
                         <t t-else="">
                             <div class="d-flex flex-column gap-1">
                                 <div class="d-flex align-items-center fs-5">
                                     <p class="text-start fw-bold mb-0" t-out="this.props.poll.winning_option_id.option_label"/>
-                                    <i t-if="this.props.poll.winning_option_id.selected_by_self" class="ms-1 fa fa-check-circle text-primary"/>
+                                    <i t-if="this.props.poll.winning_option_id.selected_by_self" class="ms-1 oi oi-filled text-primary" data-icon="check_circle"/>
                                 </div>
                                 <p class="card-subtitle mb-0 text-muted smaller">Winning Answer<span class="o-mx-0_5">&#8729;</span><t t-out="this.props.poll.winning_option_id.vote_percentage"/>%</p>
                             </div>
diff --git a/addons/mail/static/src/core/common/priority.xml b/addons/mail/static/src/core/common/priority.xml
index b2b794f4901dfc..29db564e6b4dd8 100644
--- a/addons/mail/static/src/core/common/priority.xml
+++ b/addons/mail/static/src/core/common/priority.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="mail.Priority">
         <div class="d-inline" t-att-aria-label="this.label" t-att-title="this.label">
-            <span t-foreach="Array(this.maxStar)" t-as="star" t-key="star_index" class="fa" t-att-class="{'o-mail-priority-star fa-star': star_index + 1 lte this.priority, 'fa-star-o': star_index + 1 gt this.priority,}" />
+            <span t-foreach="Array(this.maxStar)" t-as="star" t-key="star_index" class="oi" t-att-class="{'o-mail-priority-star oi-filled': star_index + 1 lte this.priority}" data-icon="star" />
         </div>
     </t>
 </templates>
diff --git a/addons/mail/static/src/core/common/quick_reaction_menu.xml b/addons/mail/static/src/core/common/quick_reaction_menu.xml
index 8ed71a789385f0..c145f3e8e5b283 100644
--- a/addons/mail/static/src/core/common/quick_reaction_menu.xml
+++ b/addons/mail/static/src/core/common/quick_reaction_menu.xml
@@ -10,7 +10,7 @@
                         <span class="fs-2" t-out="emoji"/>
                     </button>
                     <button class="o-mail-QuickReactionMenu-emojiPicker o-mail-QuickReactionMenu-popEffect o-mail-QuickReactionMenu-popEffect--smaller o-navigable text-muted d-flex justify-content-center align-items-center btn btn-secondary o-rounded-bubble border border-dark-subtle" title="Toggle Emoji Picker" t-on-click="() => this.togglePicker()">
-                        <i class="oi oi-close"/>
+                        <i class="oi" data-icon="close_small"/>
                     </button>
                 </div>
             </t>
@@ -19,7 +19,7 @@
 
     <t t-name="mail.QuickReactionMenu.toggler">
         <button class="btn border-0 o-p-0_5 o-inline o-mail-QuickReactionMenu-toggler" t-att-class="this.attClass" t-att-title="this.props.action.name" t-att-aria-label="this.props.action.name" t-on-click="this.onClick">
-            <i t-att-class="this.props.action.icon"/>
+            <i class="oi" t-att-data-icon="this.props.action.icon"/>
         </button>
     </t>
 </templates>
diff --git a/addons/mail/static/src/core/common/search_message_input.xml b/addons/mail/static/src/core/common/search_message_input.xml
index 2990d96081cd97..c835808a38502c 100644
--- a/addons/mail/static/src/core/common/search_message_input.xml
+++ b/addons/mail/static/src/core/common/search_message_input.xml
@@ -6,16 +6,16 @@
                 <div class="o_searchview form-control d-flex align-items-center bg-view p-0" role="search" aria-autocomplete="list">
                     <div class="o_searchview_input_container d-flex align-items-center flex-grow-1 flex-wrap gap-1 h-100">
                         <div class="input-group-text bg-transparent border-0 pe-0">
-                            <i class="oi oi-search opacity-25"/>
+                            <i class="oi opacity-25" data-icon="search"/>
                         </div>
                         <input type="text" class="o_searchview_input form-control flex-grow-1 w-auto border-0 rounded-start ps-2 bg-view" accesskey="Q" t-att-placeholder="this.inputPlaceholder" t-custom-model="this.state.searchTerm" t-on-input="this.onInputSearch" t-custom-ref="autofocus" role="searchbox"/>
-                        <i class="fa fa-fw fa-times-circle me-2 opacity-50 opacity-100-hover cursor-pointer" t-att-class="{ 'invisible': !this.state.searchTerm }" role="button" aria-label="Clear Search" title="Clear Search" t-on-click="() => this.clear()"/>
+                        <i class="oi oi-fw oi-filled me-2 opacity-50 opacity-100-hover cursor-pointer" data-icon="cancel" t-att-class="{ 'invisible': !this.state.searchTerm }" role="button" aria-label="Clear Search" title="Clear Search" t-on-click="() => this.clear()"/>
                     </div>
                 </div>
             </div>
             <Dropdown t-if="this.env.inChatter">
                 <button class="btn btn-outline-secondary ms-2" aria-label="Filter Messages" title="Filter Messages">
-                    <i class="fa fa-filter" role="img"/>
+                    <i class="oi oi-filled" data-icon="filter_alt" role="img"/>
                 </button>
                 <t t-set-slot="content">
                     <t t-foreach="this.searchFilters" t-as="searchFilter" t-key="searchFilter.label">
@@ -27,7 +27,7 @@
                 </t>
             </Dropdown>
             <button t-if="this.env.inChatter" class="btn btn-outline-secondary ms-2" t-on-click="() => this.onClickClose()" aria-label="Close button">
-                <i class="o_searchview_icon oi oi-close cursor-pointer" role="img" aria-label="Close search" title="Close"/>
+                <i class="o_searchview_icon oi cursor-pointer" data-icon="close_small" role="img" aria-label="Close search" title="Close"/>
             </button>
         </div>
     </t>
diff --git a/addons/mail/static/src/core/common/search_messages_panel.xml b/addons/mail/static/src/core/common/search_messages_panel.xml
index bc402a7d7eea0f..cf4ff142c26fa0 100644
--- a/addons/mail/static/src/core/common/search_messages_panel.xml
+++ b/addons/mail/static/src/core/common/search_messages_panel.xml
@@ -6,7 +6,7 @@
             title="this.title"
             minWidth="200"
             initialWidth="400"
-            icon="'oi oi-search'"
+            icon="'search'"
         >
             <SearchMessageInput closeSearch="this.props.closeSearch" messageSearch="this.messageSearch" thread="this.props.thread"/>
             <SearchMessageResult thread="this.props.thread" messageSearch="this.messageSearch"/>
diff --git a/addons/mail/static/src/core/common/store_service.js b/addons/mail/static/src/core/common/store_service.js
index 92fd6b0dd6a89a..6d017e316a498e 100644
--- a/addons/mail/static/src/core/common/store_service.js
+++ b/addons/mail/static/src/core/common/store_service.js
@@ -480,12 +480,12 @@ export class Store extends BaseStore {
 
     handleValidChannelMention(channelLinks) {
         for (const linkEl of channelLinks.filter(
-            (el) => !el.querySelector(".fa-comments-o, .fa-hashtag")
+            (el) => !el.querySelector("[data-icon='forum'], [data-icon='tag']")
         )) {
             const text = linkEl.textContent.substring(1); // remove '#' prefix
             const icon = linkEl.classList.contains("o_channel_redirect_asThread")
-                ? "fa fa-comments-o"
-                : "fa fa-hashtag";
+                ? "forum"
+                : "tag";
             const iconEl = renderToElement("mail.Message.mentionedChannelIcon", { icon });
             linkEl.replaceChildren(iconEl);
             linkEl.insertAdjacentText("beforeend", ` ${text}`);
diff --git a/addons/mail/static/src/core/common/tabs.xml b/addons/mail/static/src/core/common/tabs.xml
index 02202dc15c75b1..5c3a7d79a5e5c9 100644
--- a/addons/mail/static/src/core/common/tabs.xml
+++ b/addons/mail/static/src/core/common/tabs.xml
@@ -3,11 +3,11 @@
 <t t-name="mail.Tabs">
     <div t-attf-class="o-mail-Tabs d-flex border-top bg-view h-100 w-100" t-custom-ref="ref" t-att-class="{'o-mail-Tabs-vertical': this.props.direction === 'v', 'flex-column o-mail-Tabs-horizontal': this.props.direction === 'h'}">
         <div class="position-relative d-flex bg-100 flex-shrink-0" t-att-class="{'border-bottom flex-row mh-25': this.props.direction === 'h', 'border-end flex-column mw-25': this.props.direction === 'v'}">
-            <button t-if="this.scrollState.hasScrollbar" t-att-disabled="!this.scrollState.canScrollBefore" class="btn border-transparent o-mail-Tabs-scroller flex-shrink-0 bg-100 rounded-0" t-on-click="() => this.scroll(-1)"><i class="oi smaller" t-att-class="{'oi-chevron-up': this.props.direction === 'v', 'oi-chevron-left': this.props.direction === 'h'}"/></button>
+            <button t-if="this.scrollState.hasScrollbar" t-att-disabled="!this.scrollState.canScrollBefore" class="btn border-transparent o-mail-Tabs-scroller flex-shrink-0 bg-100 rounded-0" t-on-click="() => this.scroll(-1)"><i class="oi smaller" t-att-data-icon="{'keyboard_arrow_up': this.props.direction === 'v', 'chevron_backward': this.props.direction === 'h'}"/></button>
             <nav class="o-mail-Tabs-scrollContainer d-flex flex-grow-1 overflow-auto gap-2 p-1" t-att-class="{'flex-row': this.props.direction === 'h', 'flex-column': this.props.direction === 'v'}" t-custom-ref="nav">
                 <t t-slot="headers"/>
             </nav>
-            <button t-if="this.scrollState.hasScrollbar" t-att-disabled="!this.scrollState.canScrollAfter" class="btn border-transparent o-mail-Tabs-scroller flex-shrink-0 rounded-0 bg-100" t-on-click="() => this.scroll(1)"><i class="oi smaller" t-att-class="{'oi-chevron-down': this.props.direction === 'v', 'oi-chevron-right': this.props.direction === 'h'}"/></button>
+            <button t-if="this.scrollState.hasScrollbar" t-att-disabled="!this.scrollState.canScrollAfter" class="btn border-transparent o-mail-Tabs-scroller flex-shrink-0 rounded-0 bg-100" t-on-click="() => this.scroll(1)"><i class="oi smaller" t-att-data-icon="{'keyboard_arrow_down': this.props.direction === 'v', 'chevron_forward': this.props.direction === 'h'}"/></button>
         </div>
         <div class="o-mail-Tabs-content overflow-auto flex-grow-1 o-scrollbar-thin">
             <t t-slot="panels"/>
diff --git a/addons/mail/static/src/core/common/thread.xml b/addons/mail/static/src/core/common/thread.xml
index a498ae56796482..c19b76d336f66b 100644
--- a/addons/mail/static/src/core/common/thread.xml
+++ b/addons/mail/static/src/core/common/thread.xml
@@ -70,7 +70,7 @@
 </t>
 
 <t t-name="mail.Thread.jumpPresent">
-    <button t-if="this.props.showJumpPresent and this.state.showJumpPresent" class="o-mail-Thread-jumpPresent position-fixed p-2 rounded-circle lh-1 m-n3 user-select-none btn btn-light shadow-sm border border-secondary" t-att-class="{ 'bottom-0': this.env.inChatter and !this.env.inChatter.aside }" t-custom-ref="jump-present" t-on-click="() => this.jumpToPresent()" title="Jump to Present"><i class="oi text-muted" t-att-class="{ 'oi-chevron-down': this.props.order === 'asc', 'oi-chevron-up': this.props.order !== 'asc' }"/></button>
+    <button t-if="this.props.showJumpPresent and this.state.showJumpPresent" class="o-mail-Thread-jumpPresent position-fixed p-2 rounded-circle lh-1 m-n3 user-select-none btn btn-light shadow-sm border border-secondary" t-att-class="{ 'bottom-0': this.env.inChatter and !this.env.inChatter.aside }" t-custom-ref="jump-present" t-on-click="() => this.jumpToPresent()" title="Jump to Present"><i class="oi text-muted" t-attf-data-icon="{{ this.props.order === 'asc' ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}"/></button>
 </t>
 
 <t t-name="mail.Thread.loadOlder">
@@ -109,7 +109,7 @@
         }">
             <div class="o-mail-Thread-avatar d-inline" t-att-class="{'o-mail-Thread-avatarChatWindow': this.env.inChatWindow }">
                 <img t-if="!this.channel?.parent_channel_id" class="rounded-3 object-fit-cover" t-att-src="this.channel.avatarUrl" alt="Thread Image"/>
-                <i t-else="" class="fa fa-comments-o text-muted" role="presentation"/>
+                <i t-else="" class="oi text-muted" data-icon="forum" role="presentation"/>
             </div>
             <div role="heading" aria-level="1" class="text-break" t-att-class="{ 'fs-1': !this.env.inChatWindow, 'fs-3': this.env.inChatWindow }" t-out="this.startMessageTitle"/>
         </div>
diff --git a/addons/mail/static/src/core/common/thread_actions.js b/addons/mail/static/src/core/common/thread_actions.js
index 02465283842015..f07e0f1d3c264b 100644
--- a/addons/mail/static/src/core/common/thread_actions.js
+++ b/addons/mail/static/src/core/common/thread_actions.js
@@ -26,7 +26,7 @@ export function registerThreadAction(id, definition) {
 
 registerThreadAction("fold-chat-window", {
     condition: ({ owner }) => owner.props.chatWindow && !owner.isDiscussSidebarChannelActions,
-    icon: "oi oi-fw oi-minus",
+    icon: "remove",
     name: ({ owner }) => (!owner.props.chatWindow?.isOpen ? _t("Open") : _t("Fold")),
     onSelected: ({ owner }) => owner.toggleFold(),
     displayActive: ({ owner }) => !owner.props.chatWindow?.isOpen,
@@ -39,7 +39,7 @@ registerThreadAction("rename-thread", {
         channel.isAllowedToRename &&
         owner.props.chatWindow?.isOpen &&
         !owner.isDiscussSidebarChannelActions,
-    icon: "fa fa-fw fa-pencil",
+    icon: "edit",
     name: _t("Rename Thread"),
     onSelected: ({ owner }) => (owner.state.editingName = true),
     sequence: 30,
@@ -47,7 +47,7 @@ registerThreadAction("rename-thread", {
 });
 registerThreadAction("close", {
     condition: ({ owner }) => owner.props.chatWindow && !owner.isDiscussSidebarChannelActions,
-    icon: "oi fa-fw oi-close",
+    icon: "close_small",
     name: _t("Close Chat Window (ESC)"),
     onSelected: ({ owner }) => owner.close(),
     sequence: 100,
@@ -62,7 +62,7 @@ registerThreadAction("search-messages", {
         (!owner.props.chatWindow || owner.props.chatWindow.isOpen) &&
         !owner.isDiscussSidebarChannelActions,
     hotkey: "f",
-    icon: "oi oi-fw oi-search",
+    icon: "search",
     name: ({ action }) => (action.isActive ? _t("Close Search") : _t("Search Messages")),
     sequence: 20,
     sequenceGroup: 20,
@@ -82,10 +82,11 @@ registerThreadAction("meeting-chat", {
     actionPanelComponent: MeetingChat,
     actionPanelOuterClass: "bg-100 border border-secondary",
     badge: ({ thread }) => thread.isUnread,
-    badgeIcon: ({ channel }) => !channel.importantCounter && "fa fa-circle o-text-white opacity-75",
+    badgeIcon: ({ channel }) => !channel.importantCounter && "circle",
+    badgeIconClass: ({ channel }) => !channel.importantCounter && "oi-filled o-text-white opacity-75",
     badgeText: ({ channel }) => channel.importantCounter || undefined,
     condition: ({ owner }) => owner.env.inMeetingView,
-    icon: "fa fa-fw fa-comments",
+    icon: "forum",
     name: _t("Chat"),
     sequence: 30,
     tags: ({ channel }) => {
diff --git a/addons/mail/static/src/core/common/thread_icon.js b/addons/mail/static/src/core/common/thread_icon.js
index 3f05488954b851..edcc272d530ddf 100644
--- a/addons/mail/static/src/core/common/thread_icon.js
+++ b/addons/mail/static/src/core/common/thread_icon.js
@@ -45,7 +45,8 @@ export class ThreadIcon extends Component {
 
     get defaultChatIcon() {
         return {
-            class: "fa fa-question-circle opacity-75",
+            class: "opacity-75",
+            icon: "help",
             title: _t("No IM status available"),
         };
     }
diff --git a/addons/mail/static/src/core/common/thread_icon.xml b/addons/mail/static/src/core/common/thread_icon.xml
index 7d51965f930957..20d7f29ea437ee 100644
--- a/addons/mail/static/src/core/common/thread_icon.xml
+++ b/addons/mail/static/src/core/common/thread_icon.xml
@@ -3,13 +3,13 @@
 
     <t t-name="mail.ThreadIcon">
         <t t-set="class" t-value="'o-mail-ThreadIcon d-flex ' + this.props.className + ' ' + this.attClassObjectToString({
-            'fa-lg': this.props.size === 'lg' or this.props.size === 'large',
+            'oi-lg': this.props.size === 'lg' or this.props.size === 'large',
             'o-xsmaller': this.props.size === 'sm' or this.props.size === 'small',
         })"/>
         <t t-set="attr" t-value="{ 'class': class }"/>
         <t name="extra"/>
         <t t-if="this.channel?.channel_type === 'channel'">
-            <div t-if="!this.channel.group_public_id" class="fa fa-globe o-fs-small" t-att="attr" title="Public Channel"/>
+            <div t-if="!this.channel.group_public_id" class="oi o-fs-small" data-icon="public" t-att="attr" title="Public Channel"/>
         </t>
         <t t-elif="this.channel?.channel_type === 'group'">
             <t name="group"/>
@@ -19,15 +19,15 @@
                 <t name="chat_static">
                     <ImStatus t-if="this.correspondent.imStatusUI" className="class" member="this.correspondent" size="this.props.size" typing="this.props.typing"/>
                     <div t-else="" class="d-flex rounded-circle bg-inherit">
-                        <i class="fa-fw" t-att="attr" t-attf-class="#{ this.defaultChatIcon.class }" t-att-title="this.defaultChatIcon.title"/>
+                        <i class="oi oi-fw" t-att="attr" t-attf-class="#{ this.defaultChatIcon.class }" t-att-data-icon="this.defaultChatIcon.icon" t-att-title="this.defaultChatIcon.title"/>
                     </div>
                 </t>
             </t>
         </t>
         <t t-elif="this.props.thread.model === 'mail.box'">
-            <div t-if="this.props.thread.id === 'inbox'" class="fa fa-fw fa-inbox" t-att="attr"/>
-            <div t-elif="this.props.thread.id === 'bookmark'" class="fa fa-fw fa-bookmark-o" t-att="attr"/>
-            <div t-elif="this.props.thread.id === 'history'" class="fa fa-fw fa-history" t-att="attr"/>
+            <div t-if="this.props.thread.id === 'inbox'" class="oi oi-fw" data-icon="inbox" t-att="attr"/>
+            <div t-elif="this.props.thread.id === 'bookmark'" class="oi oi-fw" data-icon="bookmark" t-att="attr"/>
+            <div t-elif="this.props.thread.id === 'history'" class="oi oi-fw" data-icon="history" t-att="attr"/>
         </t>
     </t>
 
diff --git a/addons/mail/static/src/core/public_web/discuss_app/discuss_app.xml b/addons/mail/static/src/core/public_web/discuss_app/discuss_app.xml
index 8dcd0f1a0b764b..71bd75008cec21 100644
--- a/addons/mail/static/src/core/public_web/discuss_app/discuss_app.xml
+++ b/addons/mail/static/src/core/public_web/discuss_app/discuss_app.xml
@@ -19,7 +19,7 @@
 
 <t t-name="mail.Discuss.loading">
     <div t-if="this.store.channels.status === 'fetching'" class="d-flex flex-grow-1 align-items-center justify-content-center h-100 w-100 o-pointer-events-none">
-        <h4 class="text-muted opacity-50 o-visible-short-delay"><b><i class="o-mail-Discuss-mobileLoading fa fa-circle-o-notch fa-spin"/></b></h4>
+        <h4 class="text-muted opacity-50 o-visible-short-delay"><b><i class="o-mail-Discuss-mobileLoading oi oi-spin" data-icon="autorenew"/></b></h4>
     </div>
 </t>
 
diff --git a/addons/mail/static/src/core/public_web/discuss_app/sidebar/sidebar.xml b/addons/mail/static/src/core/public_web/discuss_app/sidebar/sidebar.xml
index 81f3e31f64b130..3faf3a075e6897 100644
--- a/addons/mail/static/src/core/public_web/discuss_app/sidebar/sidebar.xml
+++ b/addons/mail/static/src/core/public_web/discuss_app/sidebar/sidebar.xml
@@ -15,7 +15,7 @@
                     <t t-foreach="this.discussSidebarItems" t-as="item" t-key="item_index" t-component="item"/>
                     <t t-set="VIEW_HIDDEN_CONVERSATIONS">View hidden conversations</t>
                     <button t-if="this.store.has_unpinned_channels" class="btn btn-secondary btn-sm border-0 mb-1 opacity-100-hover rounded-3 d-flex align-items-center justify-content-center" t-att-class="{ 'p-2 mx-2 mt-1 opacity-75': this.store.discuss.isSidebarCompact, 'mx-4 mt-2 opacity-50': !this.store.discuss.isSidebarCompact }" t-on-click="this.onClickViewHiddenConversations" t-att-title="this.store.discuss.isSidebarCompact ? VIEW_HIDDEN_CONVERSATIONS : undefined">
-                        <i class="fa fa-eye-slash" t-att-class="{ 'fa-lg': this.store.discuss.isSidebarCompact, 'me-2': !this.store.discuss.isSidebarCompact }"/>
+                        <i class="oi" data-icon="visibility_off" t-att-class="{ 'oi-lg': this.store.discuss.isSidebarCompact, 'me-2': !this.store.discuss.isSidebarCompact }"/>
                         <span t-if="!this.store.discuss.isSidebarCompact" class="text-truncate" t-out="VIEW_HIDDEN_CONVERSATIONS"/>
                     </button>
                 </div>
@@ -24,6 +24,6 @@
     </t>
 
     <t t-name="mail.DiscussSidebar.unreadIndicator">
-        <span class="o-mail-DiscussSidebar-unreadIndicator position-absolute" t-att-class="{ 'o-compact': this.store.discuss.isSidebarCompact }" title="Thread has unread messages"><i class="fa fa-circle smaller"/></span>
+        <span class="o-mail-DiscussSidebar-unreadIndicator position-absolute" t-att-class="{ 'o-compact': this.store.discuss.isSidebarCompact }" title="Thread has unread messages"><i class="oi oi-filled smaller" data-icon="circle"/></span>
     </t>
 </templates>
diff --git a/addons/mail/static/src/core/public_web/discuss_content.xml b/addons/mail/static/src/core/public_web/discuss_content.xml
index 804c5c7efef065..6a9ee4baa3c543 100644
--- a/addons/mail/static/src/core/public_web/discuss_content.xml
+++ b/addons/mail/static/src/core/public_web/discuss_content.xml
@@ -11,7 +11,7 @@
                     <FileUploader t-if="this.isThreadAvatarEditable" acceptedFileExtensions="'.bmp, .jpg, .jpeg, .png, .svg'" showUploadingText="false" multiUpload="false" onUploaded.bind="(data) => this.onFileUploaded(data)">
                         <t t-set-slot="toggler">
                             <a href="#" class="position-absolute z-1 h-100 w-100 rounded-2 start-0 bottom-0" title="Upload Avatar">
-                                <i class="position-absolute top-50 start-50 fa fa-sm fa-pencil text-white"/>
+                                <i class="oi oi-filled position-absolute top-50 start-50 text-white" data-icon="edit"/>
                             </a>
                         </t>
                     </FileUploader>
@@ -23,7 +23,7 @@
                     <div class="d-flex">
                         <div t-if="this.thread.channel?.parent_channel_id" class="d-flex align-items-center gap-1 ms-1">
                             <span class="fw-bold cursor-pointer opacity-75 opacity-100-hover o-hover-text-underline" t-out="this.thread.channel.parent_channel_id.displayName" t-on-click="() => this.thread?.channel?.parent_channel_id?.open({ focus: true })"/>
-                            <i class="oi oi-chevron-right o-xsmaller mx-1"/>
+                            <i class="oi o-xsmaller mx-1" data-icon="chevron_forward"/>
                         </div>
                         <AutoresizeInput
                             className="'o-mail-DiscussContent-threadName fw-bold flex-shrink-1 py-0 ' + (this.showsChatLocalDateTime ? 'fs-5' : 'fs-4')"
diff --git a/addons/mail/static/src/core/public_web/discuss_search.xml b/addons/mail/static/src/core/public_web/discuss_search.xml
index bb18311e3a7cd1..22d5d3d5dc3a2a 100644
--- a/addons/mail/static/src/core/public_web/discuss_search.xml
+++ b/addons/mail/static/src/core/public_web/discuss_search.xml
@@ -28,7 +28,7 @@
 <t t-name="mail.DiscussSearch.inputContainer">
     <div class="o-mail-DiscussSearch-inputContainer border border-secondary position-relative d-flex align-items-center justify-content-center gap-1 flex-grow-1 rounded-2" t-on-click="this.onClickSearchConversations">
         <div class="d-flex w-100 align-items-center gap-2" t-att-class="{ 'p-2': this.store.discuss.isSidebarCompact and !this.ui.isSmall, 'ps-2 gap-2': !this.store.discuss.isSidebarCompact or this.ui.isSmall }">
-            <i class="oi oi-search smaller opacity-50"/>
+            <i class="oi smaller opacity-50" data-icon="search"/>
             <input t-if="this.ui.isSmall or !this.store.discuss.isSidebarCompact" class="form-control rounded-2 border-0 bg-inherit ps-0" t-att-class="{ 'lh-1': !this.ui.isSmall }" disabled="true" placeholder="Search conversations" tabindex="0"/>
         </div>
         <div class="o-mail-DiscussSearch-inputClickable position-absolute z-1 opacity-0 cursor-pointer w-100 h-100"/>
diff --git a/addons/mail/static/src/core/public_web/message_actions_patch.js b/addons/mail/static/src/core/public_web/message_actions_patch.js
index 42e8b03f58a9fc..263fd59d0893c5 100644
--- a/addons/mail/static/src/core/public_web/message_actions_patch.js
+++ b/addons/mail/static/src/core/public_web/message_actions_patch.js
@@ -8,7 +8,7 @@ registerMessageAction("pin", {
         message.thread &&
         thread?.model !== "mail.box" &&
         (!message.channel_id || message.channel_id.canSelfInteractWithChannel),
-    icon: "fa fa-thumb-tack",
+    icon: "push_pin",
     name: _t("Pin"),
     onSelected: ({ message }) => (message.channel_id || message.thread).messagePin(message),
     sequence: 110,
@@ -21,7 +21,7 @@ registerMessageAction("unpin", {
         message.thread &&
         thread?.model !== "mail.box" &&
         (!message.channel_id || message.channel_id.canSelfInteractWithChannel),
-    icon: "fa fa-thumb-tack",
+    icon: "push_pin",
     name: _t("Unpin"),
     onSelected: ({ message }) => (message.channel_id || message.thread).messageUnpin(message),
     sequence: 110,
diff --git a/addons/mail/static/src/core/public_web/messaging_menu.js b/addons/mail/static/src/core/public_web/messaging_menu.js
index 1458183a0096e0..ac4bfedde261a9 100644
--- a/addons/mail/static/src/core/public_web/messaging_menu.js
+++ b/addons/mail/static/src/core/public_web/messaging_menu.js
@@ -169,7 +169,7 @@ export class MessagingMenu extends Component {
         return [
             {
                 counter: this.store.discuss.chatCategory.channelsWithCounter.length,
-                icon: "oi oi-users",
+                icon: "group",
                 id: "chat",
                 label: _t("Chats"),
                 sequence: 20,
@@ -177,7 +177,7 @@ export class MessagingMenu extends Component {
             {
                 channelHasUnread: Boolean(this.store.discuss.unreadChannels.length),
                 counter: this.store.discuss.channelCategory.channelsWithCounter.length,
-                icon: "fa fa-hashtag",
+                icon: "tag",
                 id: "channel",
                 label: _t("Channels"),
                 sequence: 40,
diff --git a/addons/mail/static/src/core/public_web/messaging_menu.xml b/addons/mail/static/src/core/public_web/messaging_menu.xml
index 0a07f8b4ce821c..e8c6cb567eed94 100644
--- a/addons/mail/static/src/core/public_web/messaging_menu.xml
+++ b/addons/mail/static/src/core/public_web/messaging_menu.xml
@@ -20,7 +20,7 @@
                     hasMarkAsReadButton="1"
                     muted="0"
                     onClick="(isMarkAsRead) => this.onClickInboxMsg(isMarkAsRead, message)"
-                    onSwipeRight="this.hasTouch() ? { action: () => message.setDone(), icon: 'fa-check-circle', bgColor: 'bg-success' } : undefined"
+                    onSwipeRight="this.hasTouch() ? { action: () => message.setDone(), icon: 'check_circle', 'icon_class': 'oi-filled', bgColor: 'bg-success' } : undefined"
                     nameMaxLine="1"
                     textMaxLine="2"
                 >
@@ -44,7 +44,7 @@
                     hasMarkAsReadButton="thread.isUnread"
                     muted="thread.channel?.self_member_id?.mute_until_dt ? 2 : !thread.isUnread ? 1 : 0"
                     onClick="(isMarkAsRead) => this.onClickThread(isMarkAsRead, thread, message)"
-                    onSwipeRight="this.hasTouch() and thread.isUnread ? { action: () => this.markAsRead(thread), icon: 'fa-check-circle', bgColor: 'bg-success' } : undefined"
+                    onSwipeRight="this.hasTouch() and thread.isUnread ? { action: () => this.markAsRead(thread), icon: 'check_circle', icon_class: 'oi-filled', bgColor: 'bg-success' } : undefined"
                     onSwipeLeft="this.onSwipeLeftThreadNotification(thread)"
                     nameMaxLine="1"
                     textMaxLine="2"
@@ -53,7 +53,7 @@
                     <t t-set-slot="name">
                         <div t-if="thread.parent_channel_id" class="d-flex align-items-center">
                             <span class="text-truncate flex-shrink-0 opacity-75 mw-50" t-out="thread.parent_channel_id.displayName"/>
-                            <i class="oi oi-chevron-right o-xsmaller mx-1"/>
+                            <i class="oi o-xsmaller mx-1" data-icon="chevron_forward"/>
                             <span class="text-truncate min-w-0" t-out="thread.channel.displayName"/>
                         </div>
                         <t t-else=""><Priority t-if="thread.priority" thread="thread"/> <t t-out="thread.displayName"/></t>
@@ -71,7 +71,7 @@
                 <t t-set="itemIndex" t-value="itemIndex + 1"/>
             </t>
             <t t-if="this.store.channels.status === 'fetching'">
-                <div class="d-flex align-items-center justify-content-center gap-2 py-4 px-2"><span class="o-visible-short-delay"><i class="fa fa-circle-o-notch fa-spin me-1"/> Loading…</span></div>
+                <div class="d-flex align-items-center justify-content-center gap-2 py-4 px-2"><span class="o-visible-short-delay"><i class="oi oi-spin me-1" data-icon="autorenew"/> Loading…</span></div>
             </t>
         </div>
     </div>
@@ -81,10 +81,10 @@
             'pb-4': this.isIosPwa,
             'pb-2': !this.isIosPwa,
         }" t-on-click="() => this.onClickNavTab(tab.id)" t-att-aria-label="tab.label">
-            <i t-attf-class="o-mail-MessagingMenu-tabIcon {{ this.store.discuss.activeTab === tab.id and tab.activeIcon ? tab.activeIcon : tab.icon }} rounded-pill mx-auto p-2 fs-5" />
-            <span class="o-xsmaller" t-out="tab.label" />
+            <i class="o-mail-MessagingMenu-tabIcon oi rounded-pill mx-auto p-2 fs-5" t-att-class="{ 'oi-filled': this.store.discuss.activeTab === tab.id }"  t-att-data-icon="tab.icon"/>
+            <span class="o-xsmaller" t-esc="tab.label" />
             <span t-if="tab.counter" class="badge o-discuss-badge rounded-pill position-absolute o-mail-MessagingMenu-tabCounter overflow-visible d-inline-block" t-att-class="{ 'o-bookmark': tab.id === 'bookmark' }" t-out="tab.counter"/>
-            <span t-elif="tab.channelHasUnread" class="badge o-discuss-badge rounded-pill position-absolute o-mail-MessagingMenu-tabUnread overflow-visible d-inline-block ms-2"><i class="fa fa-circle"/></span>
+            <span t-elif="tab.channelHasUnread" class="badge o-discuss-badge rounded-pill position-absolute o-mail-MessagingMenu-tabUnread overflow-visible d-inline-block ms-2"><i class="oi oi-filled" data-icon="circle"/></span>
         </button>
     </nav>
 </t>
diff --git a/addons/mail/static/src/core/public_web/notification_item.xml b/addons/mail/static/src/core/public_web/notification_item.xml
index 4353bbb00f02d6..3aaed91a79a2ca 100644
--- a/addons/mail/static/src/core/public_web/notification_item.xml
+++ b/addons/mail/static/src/core/public_web/notification_item.xml
@@ -41,7 +41,7 @@
                     <div class="d-flex align-items-start position-relative">
                         <span class="position-absolute" t-if="this.props.hasMarkAsReadButton">
                             <span t-if="this.rootHover.isHover" class="bg-view" t-att-class="{ 'ms-1': !this.props.muted }">
-                                <span class="o-mail-NotificationItem-badge o-discuss-badgeShape d-flex align-items-center justify-content-center mx-1 my-0 rounded fw-bold o-mail-NotificationItem-markAsRead text-600 cursor-pointer shadow-sm position-absolute top-0 end-0 z-1" title="Mark As Read" t-custom-ref="markAsRead"><i class="fa fa-check text-success"/></span>
+                                <span class="o-mail-NotificationItem-badge o-discuss-badgeShape d-flex align-items-center justify-content-center mx-1 my-0 rounded fw-bold o-mail-NotificationItem-markAsRead text-600 cursor-pointer shadow-sm position-absolute top-0 end-0 z-1" title="Mark As Read" t-custom-ref="markAsRead"><i class="oi text-success" data-icon="check"/></span>
                             </span>
                         </span>
                         <span t-if="!this.props.muted or this.props.counter > 0" class="o-mail-NotificationItem-badge o-discuss-badge d-flex align-items-center justify-content-center m-0 o-mx-0_5 badge rounded-pill fw-bold o-mail-NotificationItem-counter shadow-sm" t-att-class="{
diff --git a/addons/mail/static/src/core/web/activity.xml b/addons/mail/static/src/core/web/activity.xml
index 3df897db5c1105..6dd12ed21936f3 100644
--- a/addons/mail/static/src/core/web/activity.xml
+++ b/addons/mail/static/src/core/web/activity.xml
@@ -16,7 +16,7 @@
                         }"
                     t-attf-style="{{!this.props.activity.user_id ? 'height:80%; width:80%;' : ''}}"
                 >
-                    <i class="fa small" t-attf-class="{{ this.props.activity.icon }} {{this.props.activity.user_id ? 'small' : 'fs-2'}}"/>
+                    <i class="oi small" t-attf-class="{{this.props.activity.user_id ? 'small' : 'fs-2'}}" t-att-data-icon="this.props.activity.icon"/>
                 </div>
             </div>
         </div>
@@ -30,7 +30,7 @@
                 <span class="fw-bolder px-2 text-break"><t t-out="this.displayName"/></span>
                 <span class="o-mail-Activity-user px-1" t-if="this.props.activity.user_id?.partner_id" >for <t t-out="this.props.activity.user_id.partner_id.displayName"/></span>
                 <button class="btn btn-link btn-primary p-0 lh-1 border-0">
-                    <i class="fa fa-info-circle" role="img" title="Info" aria-label="Info" t-on-click="this.toggleDetails"/>
+                    <i class="oi" data-icon="info" role="img" title="Info" aria-label="Info" t-on-click="this.toggleDetails"/>
                 </button>
             </div>
             <div t-if="this.state.showDetails">
@@ -50,17 +50,17 @@
             <div t-if="this.props.activity.can_write" class="lh-lg">
                 <t name="tools">
                     <button class="o-mail-Activity-markDone btn btn-link btn-success p-0 me-3" t-on-click="this.onClickMarkAsDone">
-                        <i class="fa fa-check"/> Mark Done
+                        <i class="oi" data-icon="check"/> Mark Done
                     </button>
                     <FileUploader t-if="this.props.activity.activity_category === 'upload_file'" onUploaded.bind="this.onFileUploaded">
                         <t t-set-slot="toggler">
                             <button class="btn btn-link text-action p-0 me-3">
-                                <i t-attf-class="fa {{ this.props.activity.icon }}"/> <t t-out="this.props.activity.display_name"/>
+                                <i class="oi" t-att-data-icon="this.props.activity.icon"/> <t t-out="this.props.activity.display_name"/>
                             </button>
                         </t>
                     </FileUploader>
                     <button class="o-mail-Activity-edit btn btn-link text-action p-0 me-3" t-on-click="this.edit">
-                        <i class="fa fa-pencil"/> Edit
+                        <i class="oi oi-filled" data-icon="edit"/> Edit
                     </button>
                 </t>
             </div>
diff --git a/addons/mail/static/src/core/web/activity_button.js b/addons/mail/static/src/core/web/activity_button.js
index 09e8176bf795bf..792d3bd35d330c 100644
--- a/addons/mail/static/src/core/web/activity_button.js
+++ b/addons/mail/static/src/core/web/activity_button.js
@@ -18,7 +18,7 @@ export class ActivityButton extends Component {
         this.buttonRef = useRef("button");
         this.env = useEnv();
         this.defaultActivityStateClass = "text-muted";
-        this.defaultActivityDecorationClass = "fa-clock-o btn-link text-dark";
+        this.defaultActivityDecorationClass = "btn-link text-dark";
     }
 
     get buttonClass() {
@@ -42,25 +42,30 @@ export class ActivityButton extends Component {
         switch (this.props.record.data.activity_exception_decoration) {
             case "warning":
                 classes.push("text-warning");
-                classes.push(this.props.record.data.activity_exception_icon);
                 break;
             case "danger":
                 classes.push("text-danger");
-                classes.push(this.props.record.data.activity_exception_icon);
                 break;
             default: {
-                const { activity_ids, activity_type_icon } = this.props.record.data;
-                if (activity_ids.records.length) {
-                    classes.push(activity_type_icon || "fa-tasks");
-                    break;
+                const { activity_ids } = this.props.record.data;
+                if (!activity_ids.records.length) {
+                    classes.push(this.defaultActivityDecorationClass);
                 }
-                classes.push(this.defaultActivityDecorationClass);
                 break;
             }
         }
         return classes.join(" ");
     }
 
+    get buttonIcon() {
+        const { activity_ids, activity_type_icon } = this.props.record.data;
+        if (activity_ids.records.length) {
+            return activity_type_icon || "checklist";
+        } else {
+            return "schedule";
+        }
+    }
+
     get title() {
         if (this.props.record.data.activity_exception_decoration) {
             return _t("Warning");
diff --git a/addons/mail/static/src/core/web/activity_button.xml b/addons/mail/static/src/core/web/activity_button.xml
index 1b90e7dbb1b443..9c8ac319e5b9ef 100644
--- a/addons/mail/static/src/core/web/activity_button.xml
+++ b/addons/mail/static/src/core/web/activity_button.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="mail.ActivityButton">
         <button class="o-mail-ActivityButton btn btn-link btn-link-inline" t-on-click.stop="this.onClick" t-custom-ref="button" t-att-aria-label="this.title" t-att-title="this.title">
-            <i class="fa fa-fw fa-lg" t-att-class="this.buttonClass" role="img"/>
+            <i class="oi oi-fw oi-lg" t-att-class="this.buttonClass" t-att-data-icon="this.buttonIcon" role="img"/>
         </button>
     </t>
 </templates>
diff --git a/addons/mail/static/src/core/web/activity_list_popover.xml b/addons/mail/static/src/core/web/activity_list_popover.xml
index d8f3f769427726..e884a0c1d529fc 100644
--- a/addons/mail/static/src/core/web/activity_list_popover.xml
+++ b/addons/mail/static/src/core/web/activity_list_popover.xml
@@ -38,8 +38,8 @@
                 </t>
             </div>
             <button class="btn btn-secondary p-3 text-center" t-on-click="this.onClickAddActivityButton">
-                <t t-if="this.props.resIds"><i class="fa fa-plus fa-fw"/><strong>Schedule an activity on selected records</strong></t>
-                <t t-else=""><i class="fa fa-plus fa-fw"/><strong>Schedule an activity</strong></t>
+                <t t-if="this.props.resIds"><i class="oi oi-fw" data-icon="add"/><strong>Schedule an activity on selected records</strong></t>
+                <t t-else=""><i class="oi oi-fw" data-icon="add"/><strong>Schedule an activity</strong></t>
             </button>
         </div>
     </t>
diff --git a/addons/mail/static/src/core/web/activity_list_popover_item.xml b/addons/mail/static/src/core/web/activity_list_popover_item.xml
index c45bdc8ec20411..ff746d5891d1ae 100644
--- a/addons/mail/static/src/core/web/activity_list_popover_item.xml
+++ b/addons/mail/static/src/core/web/activity_list_popover_item.xml
@@ -15,16 +15,16 @@
                     <FileUploader t-if="this.hasFileUploader" onUploaded.bind="this.onFileUploaded">
                         <t t-set-slot="toggler">
                             <button class="btn btn-sm btn-success btn-link" title="Upload file" aria-label="Upload File">
-                                <i class="fa fa-upload"/>
+                                <i class="oi" data-icon="upload"/>
                             </button>
                         </t>
                     </FileUploader>
                     <button t-if="this.hasMarkDoneButton" class="o-mail-ActivityListPopoverItem-markAsDone btn btn-sm btn-success btn-link" title="Mark as done" aria-label="Mark as done" t-on-click="this.onClickMarkAsDone">
-                        <i class="fa fa-check"/>
+                        <i class="oi" data-icon="check"/>
                     </button>
                 </t>
                 <button t-if="this.hasEditButton" class="o-mail-ActivityListPopoverItem-editbtn btn btn-sm btn-success btn-link" title="Edit" aria-label="Edit" t-on-click="this.onClickEditActivityButton">
-                    <i class="fa fa-pencil"/>
+                    <i class="oi oi-filled" data-icon="edit"/>
                 </button>
             </div>
             <div class="o-mail-ActivityListPopoverItem-user d-flex align-items-center flex-wrap mx-3">
diff --git a/addons/mail/static/src/core/web/activity_mail_template.xml b/addons/mail/static/src/core/web/activity_mail_template.xml
index 194659035f865d..a9e1cbdb3d319f 100644
--- a/addons/mail/static/src/core/web/activity_mail_template.xml
+++ b/addons/mail/static/src/core/web/activity_mail_template.xml
@@ -4,7 +4,7 @@
         <t t-foreach="this.props.activity.mail_template_ids" t-as="mailTemplate" t-key="mailTemplate.id">
             <div class="d-flex align-items-baseline flex-wrap">
                 <div class="text-truncate">
-                    <i class="fa fa-envelope-o" title="Mail" role="img"/>
+                    <i class="oi" data-icon="mail" title="Mail" role="img"/>
                     <span class="o-mail-ActivityMailTemplate-name ms-2" t-out="mailTemplate.name"/>
                     <span>:</span>
                 </div>
diff --git a/addons/mail/static/src/core/web/activity_menu.xml b/addons/mail/static/src/core/web/activity_menu.xml
index cf7ef98aedc751..db22096b2d7180 100644
--- a/addons/mail/static/src/core/web/activity_menu.xml
+++ b/addons/mail/static/src/core/web/activity_menu.xml
@@ -4,7 +4,7 @@
 <t t-name="mail.ActivityMenu">
     <Dropdown position="'bottom-end'" state="this.dropdown" beforeOpen.bind="this.onBeforeOpen" menuClass="this.discussSystray.menuClass" bottomSheet="false">
         <button>
-            <i class="fa fa-lg fa-clock-o" role="img" aria-label="Activities"></i>
+            <i class="oi oi-lg" data-icon="schedule" role="img" aria-label="Activities"></i>
             <span t-if="this.store.activityCounter" class="o-mail-ActivityMenu-counter badge rounded-pill"><t t-out="this.store.activityCounter"/></span>
         </button>
         <t t-set-slot="content">
diff --git a/addons/mail/static/src/core/web/avatar_card/avatar_card.xml b/addons/mail/static/src/core/web/avatar_card/avatar_card.xml
index 08775e17fb9dbf..bcb035c3945efb 100644
--- a/addons/mail/static/src/core/web/avatar_card/avatar_card.xml
+++ b/addons/mail/static/src/core/web/avatar_card/avatar_card.xml
@@ -13,13 +13,13 @@
                     <div class="d-flex flex-column o_card_user_infos overflow-hidden">
                         <span t-if="this.name" class="o-mail-avatar-card-name fw-bold" t-out="this.name"/>
                         <a t-if="this.email" t-att-href="'mailto:'+this.email" t-att-title="this.email" class="text-truncate">
-                            <i class="fa fa-fw fa-envelope me-1"/><t t-out="this.email"/>
+                            <i class="oi oi-fw oi-filled me-1" data-icon="mail"/><t t-out="this.email"/>
                         </a>
                         <a t-if="this.phone" class="o-mail-avatar-card-tel text-truncate" t-att-title="this.phone" t-att-href="'tel:'+this.phone">
-                            <i class="fa fa-fw fa-phone me-1"/><t t-out="this.phone"/>
+                            <i class="oi oi-fw oi-filled me-1" data-icon="phone"/><t t-out="this.phone"/>
                         </a>
                         <div t-if="this.state.partnerLocalDateTimeFormatted" class="o-mail-avatar-card-localtime text-muted">
-                            <i class="fa fa-fw fa-clock-o me-1"/><t t-out="this.state.partnerLocalDateTimeFormatted"/>
+                            <i class="oi oi-fw oi-filled me-1" data-icon="schedule"/><t t-out="this.state.partnerLocalDateTimeFormatted"/>
                         </div>
                         <div t-if="this.store.self_user?.share === false" class="o_avatar_card_buttons d-flex gap-2 mt-2">
                             <button t-if="this.user?.share === false" class="btn btn-secondary btn-sm" t-on-click.stop="this.onSendClick">Send message</button>
diff --git a/addons/mail/static/src/core/web/follower.xml b/addons/mail/static/src/core/web/follower.xml
index 321f75fafc3788..a1a964c51ff1b5 100644
--- a/addons/mail/static/src/core/web/follower.xml
+++ b/addons/mail/static/src/core/web/follower.xml
@@ -9,10 +9,10 @@
             </a>
             <div t-if="this.props.follower.isEditable" class="d-flex align-items-center me-2">
                 <span class="o-mail-Follower-action btn btn-icon p-0 opacity-50 opacity-100-hover" title="Edit subscription" aria-label="Edit subscription" t-on-click="(ev) => this.onClickEdit(ev)">
-                    <i class="fa fa-fw fa-pencil"/>
+                    <i class="oi oi-fw oi-filled" data-icon="edit"/>
                 </span>
                 <span class="o-mail-Follower-action btn btn-icon p-0 opacity-50 opacity-100-hover" title="Remove this follower" aria-label="Remove this follower" t-on-click.stop="(ev) => this.onClickRemove(ev)">
-                    <i class="oi fa-fw oi-close"/>
+                    <i class="oi oi-fw" data-icon="close_small"/>
                 </span>
             </div>
         </DropdownItem>
diff --git a/addons/mail/static/src/core/web/follower_list.xml b/addons/mail/static/src/core/web/follower_list.xml
index cfd1e2aa1ccb96..4f1ccf4cb9efd6 100644
--- a/addons/mail/static/src/core/web/follower_list.xml
+++ b/addons/mail/static/src/core/web/follower_list.xml
@@ -7,7 +7,7 @@
                 Unfollow
             </span>
             <span class="o-mail-Follower-action btn btn-icon rounded-0 p-0 opacity-50 opacity-100-hover me-1" title="Edit subscription" t-on-click.stop="(ev) => this.onClickEdit(ev)">
-                <i class="fa fa-fw fa-pencil"/>
+                <i class="oi oi-fw oi-filled" data-icon="edit"/>
             </span>
         </DropdownItem>
         <DropdownItem t-else="" class="'o-mail-FollowerList-followBtn text-success'" onSelected="() => this.onClickFollow()">
diff --git a/addons/mail/static/src/core/web/mail_composer_attachment_list.xml b/addons/mail/static/src/core/web/mail_composer_attachment_list.xml
index dcb098d2d98b3c..a44fc3a296a796 100644
--- a/addons/mail/static/src/core/web/mail_composer_attachment_list.xml
+++ b/addons/mail/static/src/core/web/mail_composer_attachment_list.xml
@@ -5,7 +5,7 @@
             <li t-foreach="this.files" t-as="file" t-key="file_index" class="d-flex align-items-center bg-200 justify-content-between py-1 px-2 my-2">
                 <a t-att-href="this.getUrl(file.id)" t-out="file.name" class="flex-grow-1 text-truncate py-1"/>
                 <button t-if="!this.props.readonly" class="btn px-0 ps-1 flex-shrink-0" t-on-click.stop="() => this.onFileRemove(file.id)">
-                    <i class="fa fa-fw fa-times"/>
+                    <i class="oi oi-fw" data-icon="close"/>
                 </button>
             </li>
         </ul>
diff --git a/addons/mail/static/src/core/web/mail_composer_attachment_selector.xml b/addons/mail/static/src/core/web/mail_composer_attachment_selector.xml
index a2b47a256fe5bc..8d1f99de39fe16 100644
--- a/addons/mail/static/src/core/web/mail_composer_attachment_selector.xml
+++ b/addons/mail/static/src/core/web/mail_composer_attachment_selector.xml
@@ -4,7 +4,7 @@
         <FileUploader multiUpload="true" onUploaded.bind="this.onFileUploaded">
             <t t-set-slot="toggler">
                 <button class="btn btn-light w-auto" data-hotkey="a" title="Add Attachment">
-                    <i class="fa fa-fw fa-paperclip"/>
+                    <i class="oi oi-fw" data-icon="attach_file"/>
                 </button>
             </t>
         </FileUploader>
diff --git a/addons/mail/static/src/core/web/mail_composer_template_selector.xml b/addons/mail/static/src/core/web/mail_composer_template_selector.xml
index 7579ceff73afe1..bfe490c92cbc92 100644
--- a/addons/mail/static/src/core/web/mail_composer_template_selector.xml
+++ b/addons/mail/static/src/core/web/mail_composer_template_selector.xml
@@ -3,7 +3,7 @@
     <t t-name="mail.MailComposerTemplateSelector">
         <Dropdown t-if="this.props.record.data.can_edit_body" menuClass="'mail-composer-template-dropdown d-flex flex-column'">
             <button class="btn btn-light w-auto mail-composer-template-dropdown-btn" data-hotkey="t" title="Templates">
-                <i class="oi oi-fw oi-ellipsis-v"/>
+                <i class="oi oi-fw" data-icon="more_vert"/>
             </button>
             <t t-set-slot="content">
                 <div class="px-3 pb-1 text-muted">Select a Template</div>
diff --git a/addons/mail/static/src/core/web/mention_list.xml b/addons/mail/static/src/core/web/mention_list.xml
index 26ac5dd5f186f6..618041b779beb6 100644
--- a/addons/mail/static/src/core/web/mention_list.xml
+++ b/addons/mail/static/src/core/web/mention_list.xml
@@ -15,7 +15,7 @@
     <t t-name="mail.MentionList">
         <div class="o-mail-MentionList search d-flex">
             <input type="text" class="form-control border-0 flex-grow-1 rounded-end-0" t-custom-ref="autofocus" t-att-placeholder="this.placeholder" t-custom-model="this.state.searchTerm" t-on-keydown="this.onKeydown"/>
-            <i class="oi oi-search p-2 fs-5 rounded-end" title="Search..." role="img" aria-label="Search..."/>
+            <i class="oi p-2 fs-5 rounded-end" data-icon="search" title="Search..." role="img" aria-label="Search..."/>
         </div>
         <NavigableList class="'o-mail-MentionList-suggestionList'" t-props="this.navigableListProps"/>
     </t>
diff --git a/addons/mail/static/src/core/web/message_actions_patch.js b/addons/mail/static/src/core/web/message_actions_patch.js
index 1047c303e53922..a4d7dbcd1eee27 100644
--- a/addons/mail/static/src/core/web/message_actions_patch.js
+++ b/addons/mail/static/src/core/web/message_actions_patch.js
@@ -29,7 +29,7 @@ export function messageActionOpenFullComposer(title, context, component) {
 
 registerMessageAction("reply-all", {
     condition: ({ message, thread }) => message.canReplyAll(thread),
-    icon: "fa fa-reply",
+    icon: "reply",
     name: _t("Reply All"),
     onSelected: async ({ message, owner, thread }) => {
         const recipients = await rpc("/mail/thread/recipients", {
@@ -67,7 +67,7 @@ registerMessageAction("reply-all", {
 });
 registerMessageAction("forward", {
     condition: ({ message, thread }) => message.canForward(thread),
-    icon: "fa fa-share",
+    icon: "share",
     name: _t("Forward"),
     onSelected: async ({ message, owner, store, thread }) => {
         // usually reply_to is what you want people to see as being "from"
diff --git a/addons/mail/static/src/core/web/message_patch.xml b/addons/mail/static/src/core/web/message_patch.xml
index 36f4537e0a3d5e..44036d49ae5da4 100644
--- a/addons/mail/static/src/core/web/message_patch.xml
+++ b/addons/mail/static/src/core/web/message_patch.xml
@@ -15,7 +15,7 @@
                                 <li class="o-mail-Message-tracking" role="group">
                                     <span class="o-mail-Message-trackingOld text-muted fw-bold" t-out="this.formatTrackingOrNone(trackingValue.fieldInfo, trackingValue.oldValue)"/>
                                     <t t-if="!trackingValue.fieldInfo.isPropertyField">
-                                        <i class="o-mail-Message-trackingSeparator fa fa-long-arrow-right mx-2 text-600"/>
+                                        <i class="o-mail-Message-trackingSeparator oi mx-2 text-600" data-icon="east"/>
                                         <span class="o-mail-Message-trackingNew me-1 fw-bold text-info" t-out="this.formatTrackingOrNone(trackingValue.fieldInfo, trackingValue.newValue)"/>
                                     </t>
                                     <span class="o-mail-Message-trackingField ms-1 fst-italic text-muted">(<t t-out="this.props.messageSearch?.highlight(trackingValue.fieldInfo.changedField) ?? trackingValue.fieldInfo.changedField"/>)</span>
diff --git a/addons/mail/static/src/core/web/messaging_menu_patch.js b/addons/mail/static/src/core/web/messaging_menu_patch.js
index b82805cb77fc62..6413423b242e69 100644
--- a/addons/mail/static/src/core/web/messaging_menu_patch.js
+++ b/addons/mail/static/src/core/web/messaging_menu_patch.js
@@ -94,8 +94,7 @@ patch(MessagingMenu.prototype, {
     get _tabs() {
         return [
             {
-                icon: "fa fa-bell-o",
-                activeIcon: "fa fa-bell",
+                icon: "notifications",
                 id: "notification",
                 label: _t("Notifications"),
                 sequence: 10,
@@ -107,9 +106,9 @@ patch(MessagingMenu.prototype, {
                         : this.store.bookmarkBox.counter,
                 icon:
                     this.store.self_user?.notification_type === "inbox"
-                        ? "fa fa-inbox"
-                        : "fa fa-bookmark-o",
-                activeIcon: this.store.self_user?.notification_type !== "inbox" && "fa fa-bookmark",
+                        ? "inbox"
+                        : "bookmark",
+                activeIcon: this.store.self_user?.notification_type !== "inbox" && "bookmark",
                 id: this.store.self_user?.notification_type === "inbox" ? "inbox" : "bookmark",
                 label:
                     this.store.self_user?.notification_type === "inbox"
diff --git a/addons/mail/static/src/core/web/messaging_menu_patch.xml b/addons/mail/static/src/core/web/messaging_menu_patch.xml
index 3690834c1b05e1..78964ae83ae8a3 100644
--- a/addons/mail/static/src/core/web/messaging_menu_patch.xml
+++ b/addons/mail/static/src/core/web/messaging_menu_patch.xml
@@ -4,7 +4,7 @@
         <xpath expr="//*[@t-name='mail.MessagingMenu']" position="inside">
             <Dropdown t-if="!this.env.inDiscussApp" state="this.dropdown" beforeOpen.bind="this.beforeOpen" position="'bottom-end'" menuClass="this.discussSystray.menuClass" bottomSheet="false">
                 <button t-att-class="this.discussSystray.class">
-                    <i class="fa fa-lg fa-comments" role="img" aria-label="Messages" t-on-click="() => this.store.discuss.activeTab = this.ui.isSmall and this.store.discuss.activeTab === 'notification' ? 'notification' : this.store.discuss.activeTab"></i>
+                    <i class="oi oi-lg oi-filled" data-icon="forum" role="img" aria-label="Messages" t-on-click="() => this.store.discuss.activeTab = this.ui.isSmall and this.store.discuss.activeTab === 'notification' ? 'notification' : this.store.discuss.activeTab"></i>
                     <span t-if="this.counter" class="o-mail-MessagingMenu-counter badge rounded-pill"><t t-out="this.counter"/></span>
                 </button>
                 <t t-set-slot="content">
@@ -23,8 +23,8 @@
                         <button class="o-mail-MessagingMenu-headerFilter btn btn-sm btn-link o-px-1_5 py-1 m-1 lh-1" t-att-class="this.store.discuss.activeTab === 'notification' ? 'fw-bold o-active shadow-sm' : 'text-muted'" type="button" role="tab" t-on-click="() => this.store.discuss.activeTab = 'notification'">Notifications</button>
                         <button class="o-mail-MessagingMenu-headerFilter btn btn-sm btn-link o-px-1_5 py-1 m-1 lh-1" t-att-class="this.store.discuss.activeTab === 'chat' ? 'fw-bold o-active shadow-sm' : 'text-muted'" type="button" role="tab" t-on-click="() => this.store.discuss.activeTab = 'chat'">Chats</button>
                         <button class="o-mail-MessagingMenu-headerFilter btn btn-sm btn-link o-px-1_5 py-1 m-1 lh-1" t-att-class="this.store.discuss.activeTab === 'channel' ? 'fw-bold o-active shadow-sm' : 'text-muted'" type="button" role="tab" t-on-click="() => this.store.discuss.activeTab = 'channel'">Channels</button>
-                        <button t-if="(this.threads.length + this.visibleStandaloneMessages.length) >= 20 and this.store.channels.status !== 'fetching'" class="btn btn-sm btn-link py-1 rounded-0 text-muted" type="button" title="Quick search" t-on-click="this.toggleSearch"><i class="fa fa-fw fa-search"/></button>
-                        <button t-if="this.store.channels.status === 'fetching'" class="btn btn-sm btn-light py-1 rounded-0" disabled="true" type="button"><i class="fa fa-fw fa-circle-o-notch fa-spin"/></button>
+                        <button t-if="(this.threads.length + this.visibleStandaloneMessages.length) >= 20 and this.store.channels.status !== 'fetching'" class="btn btn-sm btn-link py-1 rounded-0 text-muted" type="button" title="Quick search" t-on-click="this.toggleSearch"><i class="oi oi-fw" data-icon="search"/></button>
+                        <button t-if="this.store.channels.status === 'fetching'" class="btn btn-sm btn-light py-1 rounded-0" disabled="true" type="button"><i class="oi oi-fw oi-spin" data-icon="autorenew"/></button>
                     </t>
                 </t>
             </div>
@@ -42,17 +42,17 @@
                     important="1"
                     isActive="this.state.activeIndex === itemIndex"
                     onClick="this.installationRequest.onClick"
-                    onSwipeRight="this.hasTouch() ? { action: () => this.pwa.decline(), icon: 'fa-times-circle', bgColor: 'bg-warning' } : undefined"
+                    onSwipeRight="this.hasTouch() ? { action: () => this.pwa.decline(), icon: 'check_circle', iconClass: 'oi-filled', bgColor: 'bg-warning' } : undefined"
                     persona="this.installationRequest.partner"
                 >
                     <t t-set-slot="body" t-out="this.installationRequest.body"/>
                     <t t-set-slot="name"><t  t-out="this.installationRequest.displayName"/></t>
                     <t t-set-slot="sideContent">
                         <div class="d-flex align-items-center justify-content-center o-gap-1_5" t-att-class="{ 'o-pe-0_5': !this.ui.isSmall }">
-                            <a t-if="this.ui.isSmall" class="btn fa fa-cloud-download px-0"/>
+                            <a t-if="this.ui.isSmall" class="btn oi px-0" data-icon="cloud_download"/>
                             <t t-else="">
                                 <a class="btn btn-primary px-1 py-0 smaller">Install</a>
-                                <span t-if="!this.hasTouch()" t-on-click.stop="() => this.pwa.decline()" class="text-dark bg-transparent oi oi-close opacity-50 opacity-100-hover" title="Dismiss"></span>
+                                <span t-if="!this.hasTouch()" t-on-click.stop="() => this.pwa.decline()" class="text-dark bg-transparent oi opacity-50 opacity-100-hover" data-icon="close_small" title="Dismiss"></span>
                             </t>
                         </div>
                     </t>
@@ -70,10 +70,10 @@
                     <t t-set-slot="name"><t t-out="this.notificationRequest.displayName"/></t>
                     <t t-set-slot="sideContent">
                         <div class="d-flex align-items-center justify-content-center o-gap-1_5" t-att-class="{ 'o-pe-0_5': !this.ui.isSmall }">
-                            <a t-if="this.ui.isSmall" class="btn fa fa-bell px-0"/>
+                            <a t-if="this.ui.isSmall" class="btn oi oi-filled px-0" data-icon="notifications"/>
                             <t t-else="">
                                 <a class="btn btn-primary btn-sm px-1 py-0">Enable</a>
-                                <span t-if="!this.hasTouch()" t-on-click.stop="() => this.store.isNotificationPermissionDismissed = true" class="text-dark bg-transparent oi oi-close opacity-50 opacity-100-hover" title="Dismiss"></span>
+                                <span t-if="!this.hasTouch()" t-on-click.stop="() => this.store.isNotificationPermissionDismissed = true" class="text-dark bg-transparent oi opacity-50 opacity-100-hover" data-icon="close_small" title="Dismiss"></span>
                             </t>
                         </div>
                     </t>
@@ -90,7 +90,7 @@
                         iconSrc="failure.iconSrc"
                         hasMarkAsReadButton="true"
                         onClick="(isMarkAsRead) => isMarkAsRead ? this.cancelNotifications(failure) : this.onClickFailure(failure)"
-                        onSwipeRight="this.hasTouch() ? { action: () => this.cancelNotifications(failure), icon: 'fa-times-circle', bgColor: 'bg-warning' } : undefined"
+                        onSwipeRight="this.hasTouch() ? { action: () => this.cancelNotifications(failure), icon: 'check_circle', iconClass: 'oi-filled', bgColor: 'bg-warning' } : undefined"
                     >
                         <t t-set-slot="body" t-out="failure.body"/>
                         <t t-set-slot="name"><t t-out="this.getFailureNotificationName(failure)"/></t>
diff --git a/addons/mail/static/src/core/web/messaging_menu_quick_search.xml b/addons/mail/static/src/core/web/messaging_menu_quick_search.xml
index d902d6a9d02106..8009c4d0ab49be 100644
--- a/addons/mail/static/src/core/web/messaging_menu_quick_search.xml
+++ b/addons/mail/static/src/core/web/messaging_menu_quick_search.xml
@@ -1,6 +1,6 @@
 <t t-name="mail.MessagingMenuQuickSearch">
     <div class="position-relative w-50 m-1 d-flex" t-custom-ref="search" t-on-keydown="this.onKeydownInput">
         <input t-custom-model="this.store.discuss.searchTerm" t-custom-ref="autofocus" class="form-control rounded-pill px-2 o-py-0_5 smaller" placeholder="Quick search…" type="text" />
-        <button class="btn btn-sm btn-link text-muted p-1 o-me-0_5 position-absolute top-50 end-0 translate-middle-y" title="Close search" t-on-click="this.props.onClose"><i class="fa fa-times-circle"/></button>
+        <button class="btn btn-sm btn-link text-muted p-1 o-me-0_5 position-absolute top-50 end-0 translate-middle-y" title="Close search" t-on-click="this.props.onClose"><i class="oi oi-filled" data-icon="cancel"/></button>
     </div>
 </t>
diff --git a/addons/mail/static/src/core/web/recipients_popover.xml b/addons/mail/static/src/core/web/recipients_popover.xml
index a04b1f5eab1b7e..c125117524b121 100644
--- a/addons/mail/static/src/core/web/recipients_popover.xml
+++ b/addons/mail/static/src/core/web/recipients_popover.xml
@@ -13,10 +13,10 @@
                     <div class="d-flex flex-column o_card_user_infos overflow-hidden">
                         <span class="o-mail-avatar-card-name fw-bold" t-out="this.name"/>
                         <a t-if="this.email" t-attf-href="mailto:{{this.email}}" t-att-title="this.email" class="text-truncate">
-                            <i class="fa fa-fw fa-envelope me-1"/><t t-out="this.email"/>
+                            <i class="oi oi-fw oi-filled me-1" data-icon="mail"/><t t-out="this.email"/>
                         </a>
                         <a t-if="this.phone" class="o-mail-avatar-card-tel text-truncate" t-att-title="this.phone" t-attf-href="tel:{{this.phone}}">
-                            <i class="fa fa-fw fa-phone me-1"/><t t-out="this.phone"/>
+                            <i class="oi oi-fw oi-filled me-1" data-icon="phone"/><t t-out="this.phone"/>
                         </a>
                         <div class="o_avatar_card_buttons d-flex gap-2 mt-2">
                             <a role="button" class="btn btn-primary btn-sm" t-attf-href="mailto:{{this.email}}">
diff --git a/addons/mail/static/src/core/web/thread_actions.js b/addons/mail/static/src/core/web/thread_actions.js
index 35c9adb66da0e3..64bfb8f018119a 100644
--- a/addons/mail/static/src/core/web/thread_actions.js
+++ b/addons/mail/static/src/core/web/thread_actions.js
@@ -18,7 +18,7 @@ registerThreadAction("mark-all-read", {
                 buttons: [
                     {
                         name: _t("Undo"),
-                        icon: "fa-undo",
+                        icon: "undo",
                         onClick: () => {
                             orm.silent.call("mail.message", "mark_as_unread", [readMessageIds]);
                             closeFn();
diff --git a/addons/mail/static/src/core/web_portal_project/message_patch.js b/addons/mail/static/src/core/web_portal_project/message_patch.js
index 018dc9403687ce..fdef05b17ddf79 100644
--- a/addons/mail/static/src/core/web_portal_project/message_patch.js
+++ b/addons/mail/static/src/core/web_portal_project/message_patch.js
@@ -131,7 +131,8 @@ patch(Message.prototype, {
             const ellipsisbtnEl = document.createElement("button");
             ellipsisbtnEl.className = "o-mail-ellipsis badge rounded-pill border-0 py-0 px-1";
             const iconellipsisEl = document.createElement("i");
-            iconellipsisEl.className = "oi oi-ellipsis-h oi-large";
+            iconellipsisEl.className = "oi oi-lg";
+            iconellipsisEl.dataset.icon = "ellipsis_h";
             ellipsisbtnEl.append(iconellipsisEl);
             group[0].parentNode.insertBefore(ellipsisbtnEl, group[0]);
             // Toggle All next nodes
diff --git a/addons/mail/static/src/discuss/call/common/blur_performance_warning.xml b/addons/mail/static/src/discuss/call/common/blur_performance_warning.xml
index fdaf85422e19d1..f2f1f85caa1c1a 100644
--- a/addons/mail/static/src/discuss/call/common/blur_performance_warning.xml
+++ b/addons/mail/static/src/discuss/call/common/blur_performance_warning.xml
@@ -3,12 +3,12 @@
     <t t-name="discuss.BlurPerformanceWarning">
         <CallDropdown class="'z-2'" menuClass="'o-discuss-BlurPerformanceWarning shadow bg-warning-subtle border-warning-subtle'" openByDefault="true">
             <div class="o-discuss-BlurPerformanceWarning-button btn bg-warning-subtle p-1 rounded-circle position-absolute top-0 start-0" title="Background Blur Performance Warning">
-                <i class="fa fa-exclamation-triangle fa-fw"/>
+                <i class="oi oi-fw" data-icon="warning"/>
             </div>
             <t t-set-slot="content">
                 <div class="position-relative p-3 rounded text-dark" style="min-width:275px;">
                     <div class="position-absolute top-0 end-0 m-2 cursor-pointer" t-on-click="this.onClickClose" title="Dismiss warning">
-                        <i class="oi oi-close"/>
+                        <i class="oi" data-icon="close_small"/>
                     </div>
                     <div>
                         <strong>Performance Warning:</strong><br/>
diff --git a/addons/mail/static/src/discuss/call/common/call.xml b/addons/mail/static/src/discuss/call/common/call.xml
index e8ae5edad3fc88..e39e04095fd553 100644
--- a/addons/mail/static/src/discuss/call/common/call.xml
+++ b/addons/mail/static/src/discuss/call/common/call.xml
@@ -31,7 +31,7 @@
                         compact="this.props.compact"
                         channel="this.channel"
                     />
-                    <span t-if="this.env.inChatWindow and this.visibleMainCards.length > 6" class="oi oi-ellipsis-h ps-1 pe-1"/>
+                    <span t-if="this.env.inChatWindow and this.visibleMainCards.length > 6" class="oi ps-1 pe-1" data-icon="more_horiz"/>
                     <CallParticipantCard t-if="!this.env.inChatWindow" t-foreach="this.visibleMainCards.slice(6)" t-as="cardData" t-key="cardData.key"
                         cardData="cardData"
                         className="'o-discuss-Call-mainCardStyle p-1'"
@@ -43,8 +43,8 @@
 
                 <!-- Buttons -->
                 <t t-if="this.hasSidebarButton">
-                    <i t-if="this.state.sidebar" class="o-discuss-Call-sidebarToggler p-2 fs-5 cursor-pointer position-absolute oi oi-arrow-right" title="Hide sidebar" t-on-click="() => this.state.sidebar = false"/>
-                    <i t-else="" class="o-discuss-Call-sidebarToggler p-2 fs-5 cursor-pointer position-absolute oi oi-arrow-left" title="Show sidebar" t-on-click="() => this.state.sidebar = true"/>
+                    <i t-if="this.state.sidebar" class="o-discuss-Call-sidebarToggler p-2 fs-5 cursor-pointer position-absolute oi" data-icon="east" title="Hide sidebar" t-on-click="() => this.state.sidebar = false"/>
+                    <i t-else="" class="o-discuss-Call-sidebarToggler p-2 fs-5 cursor-pointer position-absolute oi" data-icon="west" title="Show sidebar" t-on-click="() => this.state.sidebar = true"/>
                 </t>
                 <div t-if="this.props.hasOverlay and (this.state.overlay or !this.isControllerFloating)" class="o-discuss-Call-overlay d-flex justify-content-center w-100 pb-1" t-att-class="{ 'o-isFloating position-absolute z-2 bottom-0 pb-2': this.isControllerFloating }">
                     <div t-on-mousemove="this.onMousemoveOverlay">
diff --git a/addons/mail/static/src/discuss/call/common/call_actions.js b/addons/mail/static/src/discuss/call/common/call_actions.js
index cda5f014624ab8..990eb2fdc02321 100644
--- a/addons/mail/static/src/discuss/call/common/call_actions.js
+++ b/addons/mail/static/src/discuss/call/common/call_actions.js
@@ -8,8 +8,8 @@ import { attClassObjectToString } from "@mail/utils/common/format";
 import { CALL_PROMOTE_FULLSCREEN } from "@mail/discuss/call/common/discuss_channel_model_patch";
 
 export const callActionsRegistry = registry.category("discuss.call/actions");
-export const CALL_ICON_DEAFEN = "fa fa-deaf";
-export const CALL_ICON_MUTED = "fa fa-microphone-slash";
+export const CALL_ICON_DEAFEN = "hearing_disabled";
+export const CALL_ICON_MUTED = "mic_off";
 
 /** @typedef {import("@mail/core/common/action").ActionDefinition} ActionDefinition */
 
@@ -32,7 +32,7 @@ export function registerCallAction(id, definition) {
 
 export const muteAction = {
     badge: ({ owner, store }) => store.rtc.microphonePermission !== "granted",
-    badgeIcon: "fa fa-exclamation",
+    badgeIcon: "priority_high",
     condition: ({ owner, store, channel }) =>
         channel?.isSelfInCall && (owner.env.inCallMenu || !store.rtc.selfSession?.is_deaf),
     name: ({ store }) => (store.rtc.selfSession.isMute ? _t("Unmute") : _t("Mute")),
@@ -43,7 +43,7 @@ export const muteAction = {
             ? store.rtc.selfSession?.is_deaf && !owner.env.inCallMenu
                 ? CALL_ICON_DEAFEN
                 : CALL_ICON_MUTED
-            : "fa fa-microphone",
+            : "mic",
     hotkey: "shift+m",
     onSelected: ({ store }) => store.rtc.toggleMicrophone(),
     sequence: 10,
@@ -67,7 +67,8 @@ export const quickActionSettings = {
     dropdownComponent: QuickVoiceSettings,
     dropdownMenuClass: "p-2",
     dropdownPosition: "top-end",
-    icon: "oi oi-chevron-up o-xsmaller",
+    icon: "keyboard_arrow_up",
+    iconClass: "oi o-xsmaller",
     name: _t("Voice Settings"),
     sequence: 15,
     sequenceGroup: 100,
@@ -79,7 +80,7 @@ registerCallAction("deafen", {
     name: ({ store }) => (store.rtc.selfSession.is_deaf ? _t("Undeafen") : _t("Deafen")),
     isActive: ({ store }) => store.rtc.selfSession?.is_deaf,
     isTracked: true,
-    icon: ({ action }) => (action.isActive ? CALL_ICON_DEAFEN : "fa fa-headphones"),
+    icon: ({ action }) => (action.isActive ? CALL_ICON_DEAFEN : "headphones"),
     hotkey: "shift+d",
     onSelected: ({ store }) => store.rtc.toggleDeafen(),
     sequence: 10,
@@ -88,7 +89,7 @@ registerCallAction("deafen", {
 });
 export const cameraOnAction = {
     badge: ({ owner, store, channel }) => !owner.env.inCallMenu && channel?.default_display_mode === "video_full_screen" && store.rtc.cameraPermission !== "granted",
-    badgeIcon: "fa fa-exclamation",
+    badgeIcon: "priority_high",
     condition: ({ channel }) => channel?.isSelfInCall,
     disabledCondition: ({ store }) => store.rtc?.isRemote,
     name: ({ store }) =>
@@ -99,7 +100,8 @@ export const cameraOnAction = {
             : _t("Turn camera on"),
     isActive: ({ store }) => store.rtc.selfSession?.is_camera_on,
     isTracked: true,
-    icon: "fa fa-video-camera",
+    icon: "videocam",
+    iconClass: "oi-filled",
     onSelected: ({ owner, store }) => store.rtc.toggleVideo("camera", { env: owner.env }),
     sequence: 10,
     sequenceGroup: 120,
@@ -125,7 +127,8 @@ export const quickVideoSettings = {
     dropdownComponent: QuickVideoSettings,
     dropdownMenuClass: "p-2",
     dropdownPosition: "top-end",
-    icon: "oi oi-chevron-up o-xsmaller",
+    icon: "keyboard_arrow_up",
+    iconClass: "o-xsmaller",
     name: _t("Video Settings"),
     sequence: 15,
     sequenceGroup: 120,
@@ -136,7 +139,7 @@ export const switchCameraAction = {
         channel?.isSelfInCall && isMobileOS() && store.rtc.selfSession?.is_camera_on,
     name: _t("Switch Camera"),
     isActive: false,
-    icon: "fa fa-refresh",
+    icon: "refresh",
     onSelected: ({ store }) => store.rtc.toggleCameraFacingMode(),
     sequence: 40,
     sequenceGroup: 100,
@@ -147,7 +150,7 @@ registerCallAction("raise-hand", {
     name: ({ store }) => (store.rtc.selfSession.raisingHand ? _t("Lower Hand") : _t("Raise Hand")),
     isActive: ({ store }) => store.rtc.selfSession?.raisingHand,
     isTracked: true,
-    icon: "fa fa-hand-paper-o",
+    icon: "back_hand",
     hotkey: "shift+h",
     onSelected: ({ store }) => store.rtc.raiseHand(!store.rtc.selfSession.raisingHand),
     sequence: 50,
@@ -164,7 +167,7 @@ registerCallAction("share-screen", {
             : _t("Share Screen"),
     isTracked: true,
     isActive: ({ store }) => store.rtc.selfSession?.is_screen_sharing_on,
-    icon: "fa fa-desktop",
+    icon: "desktop_windows",
     onSelected: ({ owner, store }) => store.rtc.toggleVideo("screen", { env: owner.env }),
     sequence: 40,
     sequenceGroup: 200,
@@ -180,7 +183,7 @@ registerCallAction("fullscreen", {
     condition: ({ channel, owner }) => channel?.isSelfInCall && !owner.env.pipWindow,
     name: ({ store }) => (store.rtc.isFullscreen ? _t("Exit Fullscreen") : _t("Fullscreen")),
     isActive: ({ store }) => store.rtc.isFullscreen,
-    icon: ({ action }) => (action.isActive ? "fa fa-compress" : "fa fa-expand"),
+    icon: ({ action }) => (action.isActive ? "close_fullscreen" : "expand_content"),
     onSelected: ({ channel, store }) => {
         channel.promoteFullscreen = CALL_PROMOTE_FULLSCREEN.DISCARDED;
         if (store.rtc.isFullscreen) {
@@ -204,7 +207,7 @@ registerCallAction("picture-in-picture", {
     name: ({ store }) =>
         store.rtc?.isPipMode ? _t("Exit Picture in Picture") : _t("Picture in Picture"),
     isActive: ({ store }) => store.rtc?.isPipMode,
-    icon: "oi oi-launch",
+    icon: "open_in_browser",
     onSelected: ({ owner, channel, store }) => {
         channel.promoteFullscreen = CALL_PROMOTE_FULLSCREEN.DISCARDED;
         const isPipMode = store.rtc?.isPipMode;
@@ -223,7 +226,8 @@ export const acceptWithCamera = {
         typeof channel?.useCameraByDefault !== "boolean",
     disabledCondition: ({ store }) => store.rtc?.hasPendingRequest,
     name: _t("Accept with camera"),
-    icon: "fa fa-video-camera",
+    icon: "videocam",
+    iconClass: "oi-filled",
     onSelected: ({ channel, store }) => store.rtc.toggleCall(channel, { camera: true }),
     sequence: 100,
     sequenceGroup: 300,
@@ -239,7 +243,8 @@ registerCallAction("join-back", {
     condition: ({ channel }) =>
         !channel?.isSelfInCall && typeof channel?.useCameraByDefault === "boolean",
     disabledCondition: ({ store }) => store.rtc?.hasPendingRequest,
-    icon: ({ channel }) => (channel.useCameraByDefault ? "fa fa-video-camera" : "fa fa-phone"),
+    icon: ({ channel }) => (channel.useCameraByDefault ? "videocam" : "phone"),
+    iconClass: "oi-filled",
     inlineName: ({ owner }) => (owner.env.inCallInvitation ? undefined : _t("Join")),
     name: ({ channel }) => (channel.useCameraByDefault ? _t("Join Video Call") : _t("Join Call")),
     onSelected: ({ channel, store }) =>
@@ -256,7 +261,8 @@ registerCallAction("join-with-camera", {
         typeof channel?.useCameraByDefault !== "boolean",
     disabledCondition: ({ store }) => store.rtc?.hasPendingRequest,
     name: _t("Join Video Call"),
-    icon: "fa fa-video-camera",
+    icon: "videocam",
+    iconClass: "oi-filled",
     onSelected: ({ channel, store }) => store.rtc.toggleCall(channel, { camera: true }),
     sequence: 120,
     sequenceGroup: 300,
@@ -267,7 +273,8 @@ export const joinAction = {
         !channel?.isSelfInCall && typeof channel?.useCameraByDefault !== "boolean",
     disabledCondition: ({ store }) => store.rtc?.hasPendingRequest,
     name: _t("Join Call"),
-    icon: "fa fa-phone",
+    icon: "phone",
+    iconClass: "oi-filled",
     onSelected: ({ channel, store }) => store.rtc.toggleCall(channel),
     sequence: 130,
     sequenceGroup: 300,
@@ -282,7 +289,7 @@ export const rejectAction = {
         }),
     condition: ({ channel }) => channel?.self_member_id?.rtc_inviting_session_id,
     disabledCondition: ({ store }) => store.rtc?.hasPendingRequest,
-    icon: "oi oi-close",
+    icon: "close_small",
     inlineName: ({ owner, channel }) =>
         !owner.env.inCallInvitation && typeof channel?.useCameraByDefault === "boolean"
             ? _t("Reject")
@@ -304,7 +311,8 @@ registerCallAction("disconnect", {
         channel?.isSelfInCall && !channel?.self_member_id?.rtc_inviting_session_id,
     disabledCondition: ({ store }) => store.rtc?.hasPendingRequest,
     name: _t("Disconnect"),
-    icon: "fa fa-phone",
+    icon: "phone",
+    iconClass: "oi-filled",
     onSelected: ({ channel, store }) => store.rtc.toggleCall(channel),
     sequence: 150,
     sequenceGroup: 300,
diff --git a/addons/mail/static/src/discuss/call/common/call_context_menu.xml b/addons/mail/static/src/discuss/call/common/call_context_menu.xml
index e424dac5681088..bdbb9af819ca59 100644
--- a/addons/mail/static/src/discuss/call/common/call_context_menu.xml
+++ b/addons/mail/static/src/discuss/call/common/call_context_menu.xml
@@ -4,7 +4,7 @@
         <div class="o-discuss-CallContextMenu d-flex flex-column p-3 rounded">
             <div class="text-center pb-2 fw-bolder" t-out="this.props.rtcSession.name"/>
             <div t-if="!this.isSelf" class="d-flex flex-row gap-2 align-items-center">
-                <i class="fa fa-fw fa-lg opacity-75" t-attf-class="{{this.state.rangeVolume > 0 ? 'fa-volume-up' : 'fa-volume-off'}}"/>
+                <i class="oi oi-fw oi-lg opacity-75" t-attf-data-icon="{{this.state.rangeVolume > 0 ? 'volume_up' : 'volume_off'}}"/>
                 <div class="position-relative">
                     <input type="range" min="0.0" max="1" step="0.01" class="form-range h-auto" t-att-value="this.volume" t-custom-model="this.state.rangeVolume" t-on-change="this.onChangeVolume"/>
                     <output t-out="`${Math.round(this.state.rangeVolume * 200)}%`" class="o-mail-CallContextMenu-volumeTooltip fw-bold rounded" t-attf-style="--progress:{{this.state.rangeVolume * 100}}%;"/>
diff --git a/addons/mail/static/src/discuss/call/common/call_invitation.js b/addons/mail/static/src/discuss/call/common/call_invitation.js
index 73d12a7bae3b02..22b11b8cad83c8 100644
--- a/addons/mail/static/src/discuss/call/common/call_invitation.js
+++ b/addons/mail/static/src/discuss/call/common/call_invitation.js
@@ -92,7 +92,7 @@ export class CallInvitation extends Component {
                             ? _t("Hide camera preview")
                             : _t("Show camera preview"),
                     icon: () =>
-                        this.state.showCameraPreview ? "fa fa-chevron-up" : "fa fa-chevron-down",
+                        this.state.showCameraPreview ? "expand_less" : "expand_more",
                     onSelected: () => {
                         this.state.showCameraPreview = !this.state.showCameraPreview;
                         if (this.rtc.cameraPermission !== "denied") {
diff --git a/addons/mail/static/src/discuss/call/common/call_invitation.xml b/addons/mail/static/src/discuss/call/common/call_invitation.xml
index d1aab35d34bfbc..882ae73a5da866 100644
--- a/addons/mail/static/src/discuss/call/common/call_invitation.xml
+++ b/addons/mail/static/src/discuss/call/common/call_invitation.xml
@@ -9,7 +9,7 @@
                         <div class="d-flex align-items-center" style="min-width: 0;">
                             <div class="o-mail-CallInvitation-avatar flex-shrink-0 cursor-pointer d-flex align-items-center justify-content-center rounded-circle overflow-hidden" t-att-class="{'bg-primary': !this.inviter}" t-on-click="() => this.props.channel.open({ focus: true })" t-att-title="this.avatarTitle">
                                 <img t-if="this.inviter" class="object-fit-cover h-100 w-100" t-att-src="this.inviter.avatarUrl" alt="Avatar"/>
-                                <i t-else="" class="fa fa-phone"/>
+                                <i t-else="" class="oi oi-filled" data-icon="phone"/>
                             </div>
                             <div class="ms-2 me-3 flex-grow-1 overflow-hidden">
                                 <p class="o-discuss-CallInvitation-channelName m-0 fw-bold small text-truncate" t-out="this.props.channel.displayName"/>
diff --git a/addons/mail/static/src/discuss/call/common/call_menu.js b/addons/mail/static/src/discuss/call/common/call_menu.js
index ce5750b30b9b98..f34fb0e4395d58 100644
--- a/addons/mail/static/src/discuss/call/common/call_menu.js
+++ b/addons/mail/static/src/discuss/call/common/call_menu.js
@@ -39,7 +39,7 @@ export class CallMenu extends Component {
 
     get icon() {
         const res = this.lastSelfAction?.icon;
-        return (typeof res === "function" ? res() : res) ?? "fa fa-microphone";
+        return (typeof res === "function" ? res() : res) ?? "mic";
     }
 }
 
diff --git a/addons/mail/static/src/discuss/call/common/call_menu.xml b/addons/mail/static/src/discuss/call/common/call_menu.xml
index c9808ab2cb15e3..71cb969b2a7f70 100644
--- a/addons/mail/static/src/discuss/call/common/call_menu.xml
+++ b/addons/mail/static/src/discuss/call/common/call_menu.xml
@@ -6,7 +6,7 @@
             <button t-if="this.rtc.channel" class="user-select-none dropdown-toggle o-no-caret o-dropdown--narrow px-0 rounded-2" t-att-title="this.buttonTitle" t-on-click="this.rtc.channel.open">
                 <div class="o-discuss-CallMenu-buttonContent d-flex align-items-center btn-group rounded-2" t-att-class="{ 'o-is-talking': this.rtc.selfSession?.isActuallyTalking, 'o-isOdooCommunity': !this.isEnterprise }">
                     <small class="o-discuss-CallMenu-animationContainer d-flex position-absolute o-xsmaller bg-inherit o-p-0_5 rounded-circle m-n2 z-2">
-                        <i class="fa fa-volume-up o-discuss-inCallIconColor bg-inherit rounded-circle o-discuss-CallMenu-animation" t-att-class="{ 'o-isOdooCommunity': !this.isEnterprise }"/>
+                        <i class="oi o-discuss-inCallIconColor bg-inherit rounded-circle o-discuss-CallMenu-animation" data-icon="volume_up" t-att-class="{ 'o-isOdooCommunity': !this.isEnterprise }"/>
                     </small>
                     <div class="o-discuss-CallMenu-channelInfo text-truncate btn btn-group-item border-0 m-0 p-0 d-flex align-items-center gap-1 o-ps-1_5 pe-1 rounded-2 rounded-end-0 align-self-stretch bg-inherit opacity-75 opacity-100-hover" role="button" title="Open Conversation">
                         <span class="position-relative small bg-inherit">
@@ -17,10 +17,10 @@
                     <span class="o-rounded-bubble h-100 py-2 border-end border-dark border-opacity-25"/>
                     <Dropdown state="this.dropdownState">
                         <button class="o-discuss-CallMenu-dropdownMore btn btn-group-item border-0 m-0 pe-1 o-ps-0_5 rounded-2 rounded-start-0 opacity-100-hover text-body" t-att-class="{ 'opacity-75 bg-transparent': !this.dropdownState.isOpen and !this.lastSelfAction?.tags.includes('WARNING_BADGE'), 'opacity-100': this.dropdownState.isOpen or this.lastSelfAction?.tags.includes('WARNING_BADGE') }" title="Select Actions">
-                            <i class="fa fa-fw o-fs-small" t-attf-class="{{ this.icon }}" t-att-class="this.lastSelfActionAttClass"/>
-                            <i class="oi oi-chevron-down o-xxsmaller opacity-75" t-att-class="{ 'mt-2': this.lastSelfAction?.tags.includes('WARNING_BADGE') }"/>
+                            <i class="oi oi-fw o-fs-small" t-attf-data-icon="{{ this.icon }}" t-att-class="this.lastSelfActionAttClass"/>
+                            <i class="oi o-xxsmaller opacity-75" data-icon="keyboard_arrow_down" t-att-class="{ 'mt-2': this.lastSelfAction?.tags.includes('WARNING_BADGE') }"/>
                             <span t-if="this.lastSelfAction?.tags.includes('WARNING_BADGE')" class="o-discuss-CallMenu-warningBadge o-fw-600 badge p-0 rounded-circle d-flex justify-content-center align-items-center o-discuss-warningBadge position-absolute bg-warning" style="aspect-ratio: 1; font-size: 0.6rem;">
-                                <i t-if="this.lastSelfAction?.badgeIcon" t-att-class="this.lastSelfAction.badgeIcon"/><span t-elif="this.lastSelfAction.badgeText" t-out="this.lastSelfAction.badgeText"/>
+                                <i t-if="this.lastSelfAction?.badgeIcon" class="oi" t-att-data-icon="this.lastSelfAction.badgeIcon"/><span t-elif="this.lastSelfAction.badgeText" t-out="this.lastSelfAction.badgeText"/>
                             </span>
                         </button>
                         <t t-set-slot="content">
diff --git a/addons/mail/static/src/discuss/call/common/call_participant_card.xml b/addons/mail/static/src/discuss/call/common/call_participant_card.xml
index 578efd92e90d96..6471d06751ed70 100644
--- a/addons/mail/static/src/discuss/call/common/call_participant_card.xml
+++ b/addons/mail/static/src/discuss/call/common/call_participant_card.xml
@@ -53,15 +53,15 @@
                 </span>
                 <div t-if="!this.props.inset and !this.props.minimized" class="o-discuss-CallParticipantCard-overlay position-absolute top-0 end-0 d-flex w-50 flex-row-reverse" t-att-class="{ 'o-proportional-container': this.isSmall, 'mw-25': this.props.isSidebarItem or this.props.inset }">
                     <span t-if="this.rtcSession.is_deaf" class="o-proportional-text d-flex flex-column justify-content-center me-1 rounded-circle o-discuss-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': this.isSmall, 'p-2': !this.isSmall }" title="deaf" aria-label="deaf">
-                        <i class="fa fa-deaf"/>
+                        <i class="oi" data-icon="hearing_disabled"/>
                     </span>
                     <span t-if="this.rtcSession.is_muted and !this.rtcSession.is_deaf" class="o-proportional-text d-flex flex-column justify-content-center me-1 rounded-circle o-discuss-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': this.isSmall, 'p-2': !this.isSmall }" title="muted" aria-label="muted">
-                        <i class="fa fa-microphone-slash"/>
+                        <i class="oi" data-icon="mic_off"/>
                     </span>
                 </div>
                 <CallDropdown t-if="this.isContextMenuAvailable and ((!this.isMobileOS and this.rootHover.isHover) or (this.isMobileOS and !this.props.minimized))" menuClass="'d-flex o-discuss-CallParticipantCard-contextMenu'">
                     <button class="o-discuss-CallParticipantCard-contextButton position-absolute top-0 end-0 btn btn-secondary btn-sm rounded-circle border-0 smaller p-1" title="Participant options">
-                        <i class="fa fa-chevron-down fa-fw"/>
+                        <i class="oi oi-fw" data-icon="expand_more"/>
                     </button>
                     <t t-set-slot="content">
                         <CallContextMenu rtcSession="this.rtcSession"/>
@@ -69,20 +69,20 @@
                 </CallDropdown>
                 <div class="o-discuss-CallParticipantCard-overlay position-absolute bottom-0 end-0 d-flex w-50 flex-row-reverse w-50" t-att-class="{ 'o-proportional-container': this.isSmall, 'mw-25': this.props.isSidebarItem or this.props.inset }">
                     <span t-if="this.hasRaisingHand" class="o-proportional-text d-flex flex-column justify-content-center me-1 rounded-circle bg-500" t-att-class="{'o-minimized p-1': this.isSmall, 'p-2': !this.isSmall }" title="raising hand" aria-label="raising hand">
-                        <i class="fa fa-hand-paper-o"/>
+                        <i class="oi" data-icon="back_hand"/>
                     </span>
                     <span t-if="this.rtcSession.is_muted and !this.rtcSession.is_deaf and (this.props.inset or this.props.minimized)" class="o-proportional-text d-flex flex-column justify-content-center me-1 rounded-circle o-discuss-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': this.isSmall, 'p-2': !this.isSmall }" title="muted" aria-label="muted">
-                        <i class="fa fa-microphone-slash"/>
+                        <i class="oi" data-icon="mic_off"/>
                     </span>
                     <span t-if="this.rtcSession.is_deaf and (this.props.inset or this.props.minimized)" class="o-proportional-text d-flex flex-column justify-content-center me-1 rounded-circle o-discuss-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': this.isSmall, 'p-2': !this.isSmall }" title="deaf" aria-label="deaf">
-                        <i class="fa fa-deaf"/>
+                        <i class="oi" data-icon="hearing_disabled"/>
                     </span>
                     <span t-if="this.hasMediaError" class="o-discuss-CallParticipantCard-overlay-replayButton o-proportional-text d-flex flex-column justify-content-center me-1 rounded-circle" t-att-class="{'o-minimized p-1': this.isSmall, 'p-2': !this.isSmall }" title="media player Error" t-on-click.stop="this.onClickReplay">
-                        <i t-if="this.rootHover.isHover" class="fa fa-repeat text-danger"/>
-                        <i t-else="" class="fa fa-exclamation-triangle text-danger"/>
+                        <i t-if="this.rootHover.isHover" class="oi text-danger" data-icon="redo"/>
+                        <i t-else="" class="oi text-danger" data-icon="warning"/>
                     </span>
                     <span t-if="this.showConnectionState" class="o-proportional-text d-flex flex-column justify-content-center me-1 rounded-circle o-discuss-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': this.isSmall, 'p-2': !this.isSmall }" t-att-title="this.rtcSession.connectionState">
-                        <i class="fa fa-exclamation-triangle text-warning"/>
+                        <i class="oi text-warning" data-icon="warning"/>
                     </span>
                     <span t-if="this.showLiveLabel" class="user-select-none rounded o-proportional-text text-bg-danger d-flex align-items-center p-1 o-fw-600" title="live" aria-label="live">
                         LIVE
diff --git a/addons/mail/static/src/discuss/call/common/call_preview.js b/addons/mail/static/src/discuss/call/common/call_preview.js
index 693e747fcacf38..885680e58e7ad0 100644
--- a/addons/mail/static/src/discuss/call/common/call_preview.js
+++ b/addons/mail/static/src/discuss/call/common/call_preview.js
@@ -150,7 +150,8 @@ export class CallPreview extends Component {
         };
         const videoBlurAction = {
             condition: () => this.state.videoStream !== null,
-            icon: () => "fa fa-fw fa-photo",
+            icon: () => "image",
+            iconClass: () => "oi oi-fw",
             isActive: ({ store }) => store.settings.useBlur,
             name: ({ action }) =>
                 action.isActive ? _t("Disable background blur") : _t("Enable background blur"),
diff --git a/addons/mail/static/src/discuss/call/common/call_preview.xml b/addons/mail/static/src/discuss/call/common/call_preview.xml
index 1616607ddbb3f1..dfeb76d08e406c 100644
--- a/addons/mail/static/src/discuss/call/common/call_preview.xml
+++ b/addons/mail/static/src/discuss/call/common/call_preview.xml
@@ -11,7 +11,7 @@
                     </t>
                     <t t-else="">
                         <div class="d-flex flex-column align-items-center" t-att-class="{'mb-4': !this.env.inWelcomePage}">
-                            <i class="fa fa-camera fa-4x mb-2 opacity-50"/>
+                            <i class="oi oi-4x mb-2 opacity-50" data-icon="photo_camera"/>
                             <span class="fs-4 fw-bold">No Camera Preview</span>
                             <small class="opacity-50">
                                 <t t-if="this.rtc.cameraPermission !== 'granted'">Please allow access in your browser settings.</t>
@@ -28,16 +28,16 @@
         </div>
         <div t-if="this.props.hasSettingsAtBottom" class="d-flex justify-content-center gap-2 flex-wrap flex-lg-nowrap w-100 mw-100 mt-2">
             <div class="o-mail-CallPreview-deviceSelect">
-                <DeviceSelect icon="'fa fa-fw fa-microphone'" kind="'audioinput'"/>
+                <DeviceSelect icon_class="'oi oi-fw'" icon="'mic'" kind="'audioinput'"/>
             </div>
             <div class="o-mail-CallPreview-deviceSelect">
-                <DeviceSelect icon="'fa fa-fw fa-volume-up'" kind="'audiooutput'"/>
+                <DeviceSelect icon_class="'oi oi-fw'" icon="'volume_up'" kind="'audiooutput'"/>
             </div>
             <div class="o-mail-CallPreview-deviceSelect">
-                <DeviceSelect icon="'fa fa-fw fa-video-camera'" kind="'videoinput'"/>
+                <DeviceSelect icon_class="'oi oi-fw oi-filled'" icon="'videocam'" kind="'videoinput'"/>
             </div>
             <a role="button" class="btn btn-secondary" t-on-click="this.onClickSettings" title="Advanced Settings">
-                <i class="fa fa-fw fa-gear"/>
+                <i class="oi oi-fw oi-filled" data-icon="settings"/>
             </a>
         </div>
     </t>
diff --git a/addons/mail/static/src/discuss/call/common/call_settings.xml b/addons/mail/static/src/discuss/call/common/call_settings.xml
index 26be5752088a02..b7309ee87a8c02 100644
--- a/addons/mail/static/src/discuss/call/common/call_settings.xml
+++ b/addons/mail/static/src/discuss/call/common/call_settings.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="discuss.CallSettings">
-        <ActionPanel t-if="this.props.withActionPanel" close="this.props.close" title.translate="Voice &amp; Video Settings" icon="'fa fa-gear'">
+        <ActionPanel t-if="this.props.withActionPanel" close="this.props.close" title.translate="Voice &amp; Video Settings" icon="'settings'" icon_class="'oi-filled'">
             <t t-call="discuss.CallSettings.content" />
         </ActionPanel>
         <t t-else="" t-call="discuss.CallSettings.content" />
@@ -56,8 +56,8 @@
                             <span class="d-flex border border-2 rounded w-100" t-attf-class="{{ this.store.settings.isRegisteringKey ? 'border-success' : 'border-primary' }}">
                                 <span t-if="this.store.settings.push_to_talk_key" class="ms-1 px-3 fs-3 flex-grow-1" t-out="this.store.settings.pushToTalkKeyText"/>
                                 <button class="btn btn-link px-2 py-0 text-black" t-on-click="this.onClickRegisterKeyButton">
-                                    <i t-if="this.store.settings.isRegisteringKey" title="Discard" aria-label="Discard" class="fa fa-2x fa-times-circle text-muted"/>
-                                    <i t-else="" title="Set new key" aria-label="Register new key" class="fa fa-2x fa-keyboard-o"/>
+                                    <i t-if="this.store.settings.isRegisteringKey" title="Discard" aria-label="Discard" class="oi oi-filled oi-2x text-muted" data-icon="cancel"/>
+                                    <i t-else="" title="Set new key" aria-label="Register new key" class="oi oi-2x" data-icon="keyboard"/>
                                 </button>
                             </span>
                         </label>
diff --git a/addons/mail/static/src/discuss/call/common/device_select.js b/addons/mail/static/src/discuss/call/common/device_select.js
index e286932cf5d84f..b9b77f019fa4b1 100644
--- a/addons/mail/static/src/discuss/call/common/device_select.js
+++ b/addons/mail/static/src/discuss/call/common/device_select.js
@@ -24,6 +24,10 @@ export class DeviceSelect extends Component {
             type: String,
             optional: true,
         },
+        icon_class: {
+            type: String,
+            optional: true,
+        },
         permissionDialogConfiguration: {
             type: Object,
             optional: true,
diff --git a/addons/mail/static/src/discuss/call/common/device_select.xml b/addons/mail/static/src/discuss/call/common/device_select.xml
index 11ae4421880755..6a7dd52a23add3 100644
--- a/addons/mail/static/src/discuss/call/common/device_select.xml
+++ b/addons/mail/static/src/discuss/call/common/device_select.xml
@@ -12,7 +12,7 @@
                 t-attf-class="o-mail-DeviceSelect-button btn btn-secondary o-dropdown-caret {{ this.env.inDialog ? 'w-50' : 'w-100' }}"
                 t-att-data-kind="this.props.kind"
              >
-                <i t-if="this.props.icon" t-att-class="this.props.icon"/>
+                <i t-if="this.props.icon" class="oi" t-att-class="this.props.icon_class" t-att-data-icon="this.props.icon"/>
                 <span
                     class="pe-2 text-start text-truncate"
                     t-attf-class="{{ this.props.icon ? 'ps-2' : '' }}"
@@ -25,7 +25,7 @@
                 t-on-pointerdown.prevent="() => this.showPermissionDialog(this.props.kind)"
                 t-on-keydown.prevent="() => this.showPermissionDialog(this.props.kind)"
             >
-                <i t-if="this.props.icon" t-att-class="this.props.icon"/>
+                <i t-if="this.props.icon" class="oi" t-att-class="this.props.icon_class" t-att-data-icon="this.props.icon"/>
                 <span
                     class="text-truncate flex-grow-1"
                     t-attf-class="{{ this.props.icon ? 'ps-2' : '' }}"
diff --git a/addons/mail/static/src/discuss/call/common/discuss_content_patch.scss b/addons/mail/static/src/discuss/call/common/discuss_content_patch.scss
index c6f0990f030d5a..6ae855131f6b20 100644
--- a/addons/mail/static/src/discuss/call/common/discuss_content_patch.scss
+++ b/addons/mail/static/src/discuss/call/common/discuss_content_patch.scss
@@ -1,12 +1,12 @@
 .o-mail-DiscussContent-headerActions button {
     @media (hover: none) {
-        .fa-phone, .fa-video-camera {
+        [data-icon="phone"], [data-icon="videocam"] {
             color: $success !important;
         }
     }
     @media (hover: hover) {
         &:hover {
-            &:has(.fa-phone), &:has(.fa-video-camera) {
+            &:has([data-icon="phone"]), &:has([data-icon="videocam"]) {
                 background-color: $gray-100 !important;
                 outline: 1px solid rgba($success, .25);
                 i {
diff --git a/addons/mail/static/src/discuss/call/common/meeting_chat.xml b/addons/mail/static/src/discuss/call/common/meeting_chat.xml
index a431c6cfcc2941..ed6272305f196e 100644
--- a/addons/mail/static/src/discuss/call/common/meeting_chat.xml
+++ b/addons/mail/static/src/discuss/call/common/meeting_chat.xml
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.MeetingChat">
-        <ActionPanel t-if="this.channel" close="this.props.close" title.translate="In call messages" resizable="true" minWidth="300" initialWidth="400" icon="'fa fa-comments'" contentRef="this.panelContentRef">
+        <ActionPanel t-if="this.channel" close="this.props.close" title.translate="In call messages" resizable="true" minWidth="300" initialWidth="400" icon="'forum'" icon_class="'oi-filled'" contentRef="this.panelContentRef">
             <t t-set-slot="header-extra">
                 <button t-if="this.env.pinMenu and this.channel?.pinnedMessages?.length > 0" title="Pinned Messages" class="btn opacity-75 opacity-100-hover p-1 me-3 position-relative" t-on-click="() => this.env.pinMenu.open()">
-                    <i class="fa fa-thumb-tack"/>
+                    <i class="oi" data-icon="push_pin"/>
                     <span class="o-mail-MeetingChat-pinCounter badge rounded-circle position-absolute" t-out="this.channel.pinnedMessages.length"/>
                 </button>
             </t>
diff --git a/addons/mail/static/src/discuss/call/common/ptt_ad_banner.xml b/addons/mail/static/src/discuss/call/common/ptt_ad_banner.xml
index d0bc577cd48a8f..5ce44324141fd8 100644
--- a/addons/mail/static/src/discuss/call/common/ptt_ad_banner.xml
+++ b/addons/mail/static/src/discuss/call/common/ptt_ad_banner.xml
@@ -6,7 +6,7 @@
         <div class="d-flex justify-content-between align-items-center">
             <span class="small" t-out="this.pttExtService.downloadText"/>
             <button class="btn d-flex opacity-75 opacity-100-hover" title="Close banner" t-on-click="this.onClickClose">
-                <i class="fa fa-fw fa-close"/>
+                <i class="oi oi-fw" data-icon="close"/>
             </button>
         </div>
     </span>
diff --git a/addons/mail/static/src/discuss/call/common/quick_video_settings.xml b/addons/mail/static/src/discuss/call/common/quick_video_settings.xml
index 760d1f4178c792..e9330b8588298a 100644
--- a/addons/mail/static/src/discuss/call/common/quick_video_settings.xml
+++ b/addons/mail/static/src/discuss/call/common/quick_video_settings.xml
@@ -12,7 +12,7 @@
             </label>
             <div t-if="!this.isBrowserSafari()" class="btn border-transparent d-flex gap-2" t-on-click="() => this.store.settings.useBlur = !this.store.settings.useBlur">
                 <label class="d-flex align-items-center flex-wrap mw-100 cursor-pointer gap-2">
-                    <i class="fa fa-fw fa-photo"/><span class="text-truncate text-wrap">Blur Background</span>
+                    <i class="oi oi-fw" data-icon="image"/><span class="text-truncate text-wrap">Blur Background</span>
                 </label>
                 <div class="flex-grow-1"/>
                 <div class="form-check form-switch">
@@ -20,7 +20,7 @@
                 </div>
             </div>
             <button class="btn border-transparent d-flex align-items-center gap-2" t-on-click="this.onClickVideoSettings">
-                <i class="fa fa-fw fa-gear"/><span>Advanced Settings</span>
+                <i class="oi oi-fw oi-filled" data-icon="settings"/><span>Advanced Settings</span>
             </button>
         </div>
     </t>
diff --git a/addons/mail/static/src/discuss/call/common/quick_voice_settings.xml b/addons/mail/static/src/discuss/call/common/quick_voice_settings.xml
index acf2d764508be9..e10d51ef92fc97 100644
--- a/addons/mail/static/src/discuss/call/common/quick_voice_settings.xml
+++ b/addons/mail/static/src/discuss/call/common/quick_voice_settings.xml
@@ -37,7 +37,7 @@
                 </div>
             </button>
             <button class="btn border-transparent d-flex align-items-center gap-2" t-on-click="this.onClickVoiceSettings">
-                <i class="fa fa-fw fa-gear"/><span>Advanced Settings</span>
+                <i class="oi oi-fw oi-filled" data-icon="settings"/><span>Advanced Settings</span>
             </button>
         </div>
     </t>
diff --git a/addons/mail/static/src/discuss/call/common/thread_actions.js b/addons/mail/static/src/discuss/call/common/thread_actions.js
index f7c8f84d523e25..7d5dee0fe92f84 100644
--- a/addons/mail/static/src/discuss/call/common/thread_actions.js
+++ b/addons/mail/static/src/discuss/call/common/thread_actions.js
@@ -6,7 +6,8 @@ import { _t } from "@web/core/l10n/translation";
 
 registerThreadAction("call", {
     condition: ({ channel, store }) => channel?.allowCalls && !channel?.eq(store.rtc.channel),
-    icon: "fa fa-fw fa-phone",
+    icon: "phone",
+    iconClass: "oi-filled",
     name: ({ channel }) => (channel.hasRtcSessionActive ? _t("Join the Call") : _t("Start Call")),
     onSelected: ({ channel, store }) => store.rtc.toggleCall(channel),
     sequence: 10,
@@ -15,7 +16,8 @@ registerThreadAction("call", {
 });
 registerThreadAction("camera-call", {
     condition: ({ channel, store }) => channel?.allowCalls && !channel?.eq(store.rtc.channel),
-    icon: "fa fa-fw fa-video-camera",
+    icon: "videocam",
+    iconClass: "oi-filled",
     name: ({ channel }) =>
         channel.hasRtcSessionActive ? _t("Join the Call with Camera") : _t("Start Video Call"),
     onSelected: ({ channel, store }) => store.rtc.toggleCall(channel, { camera: true }),
@@ -30,7 +32,8 @@ registerThreadAction("call-settings", {
         channel?.allowCalls &&
         (owner.props.chatWindow?.isOpen || store.inPublicPage) &&
         !owner.isDiscussSidebarChannelActions,
-    icon: "fa fa-fw fa-gear",
+    icon: "settings",
+    iconClass: "oi-filled oi-fw",
     name: _t("Voice & Video Settings"),
     sequence: 5,
     sequenceGroup: 30,
@@ -39,7 +42,8 @@ registerThreadAction("disconnect", {
     condition: ({ channel, owner, store }) =>
         store.rtc.selfSession?.in(channel?.rtc_session_ids) && owner.isDiscussSidebarChannelActions,
     onSelected: ({ channel, store }) => store.rtc.toggleCall(channel),
-    icon: "fa fa-fw fa-phone",
+    icon: "phone",
+    iconClass: "oi-filled",
     name: _t("Disconnect"),
     sequence: 30,
     sequenceGroup: 10,
diff --git a/addons/mail/static/src/discuss/call/public_web/discuss_app/sidebar/call_indicator.xml b/addons/mail/static/src/discuss/call/public_web/discuss_app/sidebar/call_indicator.xml
index 7843a1684b2278..c057ba9af5c927 100644
--- a/addons/mail/static/src/discuss/call/public_web/discuss_app/sidebar/call_indicator.xml
+++ b/addons/mail/static/src/discuss/call/public_web/discuss_app/sidebar/call_indicator.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.DiscussSidebarCallIndicator">
-        <div t-if="this.props.channel.hasRtcSessionActive" title="Ongoing call" class="o-mail-DiscussSidebarCallIndicator fa-fw rounded-circle fa fa-volume-up" style="padding-top: 1px; padding-bottom: 1px;" t-att-class="{
+        <div t-if="this.props.channel.hasRtcSessionActive" title="Ongoing call" class="o-mail-DiscussSidebarCallIndicator oi oi-fw rounded-circle" data-icon="volume_up" style="padding-top: 1px; padding-bottom: 1px;" t-att-class="{
             'o-discuss-inCallIconColor': this.props.channel.eq(this.rtc.channel),
             'opacity-50': !this.props.channel.eq(this.rtc.channel),
         }"/>
diff --git a/addons/mail/static/src/discuss/call/public_web/discuss_app/sidebar/call_participants.xml b/addons/mail/static/src/discuss/call/public_web/discuss_app/sidebar/call_participants.xml
index aa1768915e21f8..dcdfc2d740d6bc 100644
--- a/addons/mail/static/src/discuss/call/public_web/discuss_app/sidebar/call_participants.xml
+++ b/addons/mail/static/src/discuss/call/public_web/discuss_app/sidebar/call_participants.xml
@@ -25,7 +25,7 @@
             'opacity-75': this.props.channel.notEq(this.rtc.channel) and this.compact,
         }">
             <button class="o-mail-DiscussSidebarCallParticipants-expandBtn btn btn-link p-1 my-n1 ms-n1 me-0 align-self-start d-flex rounded-circle" t-if="!this.compact" t-on-click="() => this.state.expanded = !this.state.expanded">
-                <i class="oi o-xxsmaller text-muted text-dark" t-att-class="{'oi-chevron-right': !this.state.expanded, 'oi-chevron-down': this.state.expanded}" t-att-title="this.title"/>
+                <i class="oi o-xxsmaller text-muted text-dark" t-attf-data-icon="{{ this.state.expanded ? 'keyboard_arrow_down' : 'chevron_forward' }}" t-att-title="this.title"/>
             </button>
             <AvatarStack
                 t-if="!this.state.expanded"
@@ -78,8 +78,8 @@
                     <t t-set="session" t-value="session"/>
                 </t>
                 <t t-else="">
-                    <span t-if="session.is_deaf" class="p-1 fa opacity-75" t-att-class="this.CALL_ICON_DEAFEN"/>
-                    <span t-elif="session.is_muted" class="p-1 fa opacity-75" t-att-class="this.CALL_ICON_MUTED"/>
+                    <span t-if="session.is_deaf" class="p-1 oi opacity-75" t-att-data-icon="this.CALL_ICON_DEAFEN"/>
+                    <span t-elif="session.is_muted" class="p-1 oi opacity-75" t-att-data-icon="this.CALL_ICON_MUTED"/>
                     <span t-if="session.is_screen_sharing_on" class="o-live bg-danger o-text-white rounded">LIVE</span>
                 </t>
             </div>
diff --git a/addons/mail/static/src/discuss/core/common/action_panel.js b/addons/mail/static/src/discuss/core/common/action_panel.js
index f85795feb231e2..60cbba02f8e414 100644
--- a/addons/mail/static/src/discuss/core/common/action_panel.js
+++ b/addons/mail/static/src/discuss/core/common/action_panel.js
@@ -18,6 +18,7 @@ export class ActionPanel extends Component {
         "close?",
         "contentRef?",
         "icon?",
+        "icon_class?",
         "title?",
         "resizable?",
         "slots?",
diff --git a/addons/mail/static/src/discuss/core/common/action_panel.xml b/addons/mail/static/src/discuss/core/common/action_panel.xml
index ae49cf59b5a0c7..914d20b676edf0 100644
--- a/addons/mail/static/src/discuss/core/common/action_panel.xml
+++ b/addons/mail/static/src/discuss/core/common/action_panel.xml
@@ -14,13 +14,13 @@
         <div class="o-mail-ActionPanel-header position-sticky top-0 pt-2 pb-1 d-flex flex-column bg-inherit smaller" t-att-class="{ 'px-1 pb-1': this.env.inChatWindow, 'ps-1 pe-2 pb-2': !this.env.inChatWindow and !this.env.inMeetingView, 'o-ps-2_5 pe-2': this.env.inMeetingChat, 'ps-1': this.env.inMeetingView and !this.env.inMeetingChat }">
             <div class="d-flex align-items-center gap-1">
                 <button t-if="this.props.close and (this.env.inChatWindow or this.env.hasPreviousActionPanel?.())" class="btn p-1 opacity-75 opacity-100-hover" t-att-title="this.backButtonTitle" t-on-click.stop="this.props.close">
-                    <i class="oi oi-arrow-left fa-fw"/>
+                    <i class="oi oi-fw" data-icon="west"/>
                 </button>
-                <i t-if="this.props.icon" class="text-muted fa-fw" t-att-class="this.props.icon"/>
+                <i t-if="this.props.icon" class="oi oi-fw text-muted" t-att-class="this.props.icon_class" t-att-data-icon="this.props.icon"/>
                 <p t-if="this.props.title" class="fw-bold text-uppercase m-0 flex-grow-1" t-out="this.props.title"/>
                 <t t-slot="header-extra"/>
                 <button t-if="this.props.close and !this.env.inChatWindow" class="btn p-1 opacity-75 opacity-100-hover ms-auto" title="Close panel" t-on-click.stop="this.props.close">
-                    <i class="oi oi-close fa-fw"/>
+                    <i class="oi oi-fw" data-icon="close_small"/>
                 </button>
             </div>
             <t t-slot="header"/>
diff --git a/addons/mail/static/src/discuss/core/common/attachment_panel.xml b/addons/mail/static/src/discuss/core/common/attachment_panel.xml
index db21a23f767be8..f7b9a05ce41a38 100644
--- a/addons/mail/static/src/discuss/core/common/attachment_panel.xml
+++ b/addons/mail/static/src/discuss/core/common/attachment_panel.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.AttachmentPanel">
-        <ActionPanel close="this.props.close" title.translate="Attachments" minWidth="200" initialWidth="400" icon="'fa fa-paperclip'">
+        <ActionPanel close="this.props.close" title.translate="Attachments" minWidth="200" initialWidth="400" icon="'attach_file'">
             <div class="d-flex flex-column py-2 flex-grow-1">
                 <div class="flex-grow-1" t-att-class="{
                     'd-flex justify-content-center align-items-center': this.props.channel.attachments.length === 0,
diff --git a/addons/mail/static/src/discuss/core/common/channel_invitation.scss b/addons/mail/static/src/discuss/core/common/channel_invitation.scss
index bda15086b44b50..6d8366c9961379 100644
--- a/addons/mail/static/src/discuss/core/common/channel_invitation.scss
+++ b/addons/mail/static/src/discuss/core/common/channel_invitation.scss
@@ -20,11 +20,11 @@
     button {
         background-color: mix($o-view-background-color, $o-action, 85%);
 
-        &:not(:hover) .oi-close {
+        &:not(:hover) .oi[data-icon="close_small"] {
             border-color: transparent !important;
         }
 
-        &:hover .oi-close {
+        &:hover .oi[data-icon="close_small"] {
             color: $danger;
             border-color: $danger !important;
         }
diff --git a/addons/mail/static/src/discuss/core/common/channel_invitation.xml b/addons/mail/static/src/discuss/core/common/channel_invitation.xml
index 3576290e9c9bc7..8882b97c103b4e 100644
--- a/addons/mail/static/src/discuss/core/common/channel_invitation.xml
+++ b/addons/mail/static/src/discuss/core/common/channel_invitation.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="discuss.ChannelInvitation">
-        <ActionPanel t-if="this.props.channel" close="this.props.close" title.translate="Invite people" resizable="!!this.env.inMeetingView" minWidth="this.env.inMeetingView ? 300 : undefined" initialWidth="this.env.inMeetingView ? 400 : undefined" icon="'oi oi-user-plus'">
+        <ActionPanel t-if="this.props.channel" close="this.props.close" title.translate="Invite people" resizable="!!this.env.inMeetingView" minWidth="this.env.inMeetingView ? 300 : undefined" initialWidth="this.env.inMeetingView ? 400 : undefined" icon="'person_add'">
             <t t-call="discuss.ChannelInvitation.main"/>
         </ActionPanel>
         <t t-else="" t-call="discuss.ChannelInvitation.main"/>
@@ -14,8 +14,8 @@
                 <div class="position-relative">
                     <input class="o-discuss-ChannelInvitation-search form-control lh-1 px-2 bg-view" t-att-value="this.searchStr" t-custom-ref="input" t-att-placeholder="this.searchPlaceholder" t-on-input="this.onInput"/>
                     <div t-if="this.props.channel?.allow_invite_by_email" class="o-discuss-ChannelInvitation-iconContainer position-absolute top-50 end-0 translate-middle-y me-2 smaller opacity-50" data-tooltip="Type email to invite">
-                        <i class="fa fa-envelope-o fa-lg"/>
-                        <i class="fa fa-plus-circle o-discuss-ChannelInvitation-iconPlus position-absolute bg-white rounded-circle"/>
+                        <i class="oi oi-lg" data-icon="mail"/>
+                        <i class="oi o-discuss-ChannelInvitation-iconPlus position-absolute bg-white rounded-circle" data-icon="add_circle"/>
                     </div>
                 </div>
                 <ul class="d-flex flex-column mx-0 pt-1 pb-0 overflow-auto o-scrollbar-thin list-group border-0 flex-grow-1" t-att-class="{ 'align-items-center justify-content-center': this.selectablePartners.length === 0 and this.state.selectableEmails.length === 0 }">
@@ -43,12 +43,12 @@
                         <div class="o-discuss-ChannelInvitation-selectedList d-flex flex-wrap overflow-auto o-scrollbar-thin">
                             <t t-foreach="this.selectedPartners" t-as="selectedPartner" t-key="selectedPartner.id">
                                 <button class="btn btn-light o-fw-600 smaller pe-1" title="Unselect person" t-on-click="() => this.onClickSelectedPartner(selectedPartner)">
-                                    <t t-out="selectedPartner.name"/> <i class="oi oi-close border border-dark-subtle ms-1"/>
+                                    <t t-out="selectedPartner.name"/> <i class="oi border border-dark-subtle ms-1" t-attf-data-icon="{{ state.expanded ? 'keyboard_arrow_down' : 'chevron_forward' }}"/>
                                 </button>
                             </t>
                             <t t-foreach="this.state.selectedEmails" t-as="selectedEmail" t-key="selectedEmail">
                                 <button class="btn btn-light o-fw-600 smaller pe-1" title="Unselect person" t-on-click="() => this.onClickSelectedEmail(selectedEmail)">
-                                    <t t-out="selectedEmail"/> <i class="oi oi-close border border-dark-subtle ms-1"/>
+                                    <t t-out="selectedEmail"/> <i class="oi border border-dark-subtle ms-1" t-attf-data-icon="{{ state.expanded ? 'keyboard_arrow_down' : 'chevron_forward' }}"/>
                                 </button>
                             </t>
                         </div>
@@ -62,7 +62,7 @@
                     <div class="input-group">
                         <input class="border border-secondary form-control lh-1 rounded-start border-0 smaller" type="text" t-att-value="this.props.channel.invitationLink" readonly="" disabled="" t-on-focus="this.onFocusInvitationLinkInput"/>
                         <button class="btn btn-primary px-2 o-py-0_5" t-on-click="() => this.props.channel.copyInvitationLink()">
-                            <i class="fa fa-copy"/>
+                            <i class="oi" data-icon="content_copy"/>
                         </button>
                     </div>
                 </t>
@@ -74,7 +74,7 @@
                         class="btn btn-link btn-sm px-2 o-py-0_5 opacity-75 opacity-100-hover me-n2 d-flex align-items-center gap-1 align-self-start flex-shrink-0"
                         t-on-click="this.onClickGenerateNewLink"
                     >
-                        <i class="fa fa-refresh opacity-75"/>
+                        <i class="oi opacity-75" data-icon="refresh"/>
                         Generate new invite link
                     </button>
                 </div>
@@ -91,7 +91,7 @@
                 <div class="position-relative d-flex flex-shrink-0 bg-inherit">
                     <DiscussAvatar t-if="selectablePartner" persona="selectablePartner"/>
                     <div t-else="" class="w-100 h-100 d-flex align-items-center justify-content-center rounded-3 bg-primary text-white">
-                        <i class="fa fa-envelope"/>
+                        <i class="oi oi-filled" data-icon="mail"/>
                     </div>
                 </div>
             </div>
diff --git a/addons/mail/static/src/discuss/core/common/channel_member.xml b/addons/mail/static/src/discuss/core/common/channel_member.xml
index 6ac8ab182ed832..f128765d811ec1 100644
--- a/addons/mail/static/src/discuss/core/common/channel_member.xml
+++ b/addons/mail/static/src/discuss/core/common/channel_member.xml
@@ -6,13 +6,13 @@
             <div t-custom-ref="displayName" class="d-flex overflow-hidden flex-column lh-sm">
                 <span class="ms-2 text-truncate text-muted fw-bold" t-out="this.member.name" t-att-title="this.member.name"/>
             </div>
-            <i t-if="this.member.channel_role === 'owner'" class="ms-1 fa fa-star text-warning lh-sm" role="img" title="Channel Owner" aria-label="Channel Owner"/>
-            <i t-if="this.member.channel_role === 'admin'" class="ms-1 fa fa-star text-primary lh-sm" role="img" title="Channel Admin" aria-label="Channel Admin"/>
+            <i t-if="this.member.channel_role === 'owner'" class="ms-1 oi oi-filled text-warning lh-sm" data-icon="star" role="img" title="Channel Owner" aria-label="Channel Owner"/>
+            <i t-if="this.member.channel_role === 'admin'" class="ms-1 oi oi-filled text-primary lh-sm" data-icon="star" role="img" title="Channel Admin" aria-label="Channel Admin"/>
             <span class="ms-auto">
-                <span t-if="this.member.in(this.member.channel_id.invited_member_ids)" class="p-1 oi oi-user-plus opacity-75"/>
-                <span t-if="this.member.rtcSession?.is_muted and !this.member.rtcSession?.is_deaf" class="p-1 fa fa-microphone-slash opacity-75"/>
-                <span t-elif="this.member.rtcSession?.is_deaf" class="p-1 fa fa-deaf opacity-75"/>
-                <span t-if="this.member.rtcSession?.raisingHand" class="p-1 fa fa-hand-paper-o"/>
+                <span t-if="this.member.in(this.member.channel_id.invited_member_ids)" class="p-1 oi oi-filled opacity-75" data-icon="person_add"/>
+                <span t-if="this.member.rtcSession?.is_muted and !this.member.rtcSession?.is_deaf" class="p-1 oi opacity-75" data-icon="mic_off"/>
+                <span t-elif="this.member.rtcSession?.is_deaf" class="p-1 oi opacity-75" data-icon="hearing_disabled"/>
+                <span t-if="this.member.rtcSession?.raisingHand" class="p-1 oi" data-icon="back_hand"/>
             </span>
             <div t-if="this.actions.actions.length" class="o-discuss-ChannelMember-actions" t-att-class="{
                 'd-none': !this.showingActions.isOpen and !this.store.useMobileView,
@@ -20,7 +20,7 @@
             }">
                 <Dropdown state="this.showingActions" position="'bottom-end'" menuClass="'my-1 ' + this.store.discussDropdownMenuClass(this)">
                     <button class="btn btn-light rounded-circle d-flex o-p-0_5 ms-1 align-items-center justify-content-center o-mail-discussSidebarBgColor border" t-att-class="{ 'o-showingActions': this.showingActions.isOpen }" title="Member Actions">
-                        <i role="img" class="oi oi-fw oi-lg oi-ellipsis-h"/>
+                        <i role="img" class="oi oi-fw oi-lg" data-icon="more_horiz"/>
                     </button>
                     <t t-set-slot="content">
                         <ActionList actions="this.actions.actions" dropdown="true"/>
diff --git a/addons/mail/static/src/discuss/core/common/channel_member_actions.js b/addons/mail/static/src/discuss/core/common/channel_member_actions.js
index 2b17f22db8f116..a93c767c0d1b07 100644
--- a/addons/mail/static/src/discuss/core/common/channel_member_actions.js
+++ b/addons/mail/static/src/discuss/core/common/channel_member_actions.js
@@ -25,7 +25,8 @@ export function registerChannelMemberAction(id, definition) {
 
 registerChannelMemberAction("set-admin", {
     condition: ({ member }) => member.canSetAdmin,
-    icon: "fa fa-star text-primary",
+    icon: "star",
+    icon_class: "oi-filled text-primary",
     name: _t("Set Admin"),
     onSelected: ({ member }) => member.setChannelRole("admin"),
     sequence: 10,
@@ -33,8 +34,9 @@ registerChannelMemberAction("set-admin", {
 
 registerChannelMemberAction("remove-admin", {
     condition: ({ member }) => member.canRemoveAdmin || member.canRemoveOwner,
-    icon: ({ member }) =>
-        member.canRemoveOwner ? "fa fa-star-o text-primary" : "fa fa-star-o text-warning",
+    icon: "star",
+    icon_class: ({ member }) =>
+        member.canRemoveOwner ? "text-primary" : "text-warning",
     name: ({ member }) => (member.canRemoveOwner ? _t("Remove Owner") : _t("Remove Admin")),
     onSelected: ({ member }) => member.setChannelRole(false),
     sequence: 20,
@@ -42,7 +44,8 @@ registerChannelMemberAction("remove-admin", {
 
 registerChannelMemberAction("set-owner", {
     condition: ({ member }) => member.canSetOwner,
-    icon: "fa fa-star text-warning",
+    icon: "star",
+    icon_class: "oi-filled text-warning",
     name: _t("Set Owner"),
     onSelected: ({ member }) => member.setChannelRole("owner"),
     sequence: 30,
@@ -50,7 +53,7 @@ registerChannelMemberAction("set-owner", {
 
 registerChannelMemberAction("remove-member", {
     condition: ({ member }) => member.canRemoveMember,
-    icon: "fa fa-sign-out",
+    icon: "logout",
     name: _t("Remove Member"),
     onSelected: ({ member, store }) => {
         const dialogTitle = _t(
diff --git a/addons/mail/static/src/discuss/core/common/channel_member_list.xml b/addons/mail/static/src/discuss/core/common/channel_member_list.xml
index 25f4eb953d152d..0582966bece6e8 100644
--- a/addons/mail/static/src/discuss/core/common/channel_member_list.xml
+++ b/addons/mail/static/src/discuss/core/common/channel_member_list.xml
@@ -2,8 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="discuss.ChannelMemberList">
-        <ActionPanel close="this.props.close" title.translate="Members" minWidth="200" initialWidth="this.env.inMeetingView ? 400 : 250" icon="'oi oi-users'">
-            <button name="inviteButton" t-on-click="() => this.onClickInviteButton()" class="btn btn-sm btn-secondary mt-2 d-flex align-items-center justify-content-center gap-1 rounded-3" title="Invite People"><i class="oi oi-user-plus"/><span>Invite People</span></button>
+        <ActionPanel close="this.props.close" title.translate="Members" minWidth="200" initialWidth="this.env.inMeetingView ? 400 : 250" icon="'person_add'">
+            <button name="inviteButton" t-on-click="() => this.onClickInviteButton()" class="btn btn-sm btn-secondary mt-2 d-flex align-items-center justify-content-center gap-1 rounded-3" title="Invite People"><i class="oi" data-icon="person_add"/><span>Invite People</span></button>
             <t t-if="this.props.channel.onlineMembers.length > 0">
                 <t t-call="discuss.ChannelMemberList.section">
                     <t t-set="sectionName" t-value="this.onlineSectionText"/>
diff --git a/addons/mail/static/src/discuss/core/common/delete_thread_dialog.xml b/addons/mail/static/src/discuss/core/common/delete_thread_dialog.xml
index 24c823cbd0b852..2577bb80a9ff53 100644
--- a/addons/mail/static/src/discuss/core/common/delete_thread_dialog.xml
+++ b/addons/mail/static/src/discuss/core/common/delete_thread_dialog.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="discuss.DeleteThreadDialog">
-        <ActionPanel close="this.props.close" title.translate="Delete Thread" icon="'fa fa-trash'" resizable="false">
+        <ActionPanel close="this.props.close" title.translate="Delete Thread" icon="'delete'" icon_class="'oi-filled'" resizable="false">
             <div class="d-flex justify-content-between align-items-center">
                 <p class="fs-5 mb-0">Permanently delete this thread?</p>
                 <button class="btn btn-danger" t-on-click="this.onConfirmation">
diff --git a/addons/mail/static/src/discuss/core/common/message_actions.js b/addons/mail/static/src/discuss/core/common/message_actions.js
index 69fc6c74e7492a..e192910cd2cad6 100644
--- a/addons/mail/static/src/discuss/core/common/message_actions.js
+++ b/addons/mail/static/src/discuss/core/common/message_actions.js
@@ -11,7 +11,7 @@ registerMessageAction("set-new-message-separator", {
         channel.eq(message.channel_id) &&
         !message.hasNewMessageSeparator &&
         message.persistent,
-    icon: "fa fa-eye-slash",
+    icon: "visibility_off",
     name: _t("Mark as Unread"),
     onSelected: ({ message: msg }) => {
         const message = toRaw(msg);
diff --git a/addons/mail/static/src/discuss/core/common/message_seen_indicator.scss b/addons/mail/static/src/discuss/core/common/message_seen_indicator.scss
index 634527bf717eec..b952e6e504147a 100644
--- a/addons/mail/static/src/discuss/core/common/message_seen_indicator.scss
+++ b/addons/mail/static/src/discuss/core/common/message_seen_indicator.scss
@@ -4,7 +4,7 @@
     }
 
     i {
-        // fa icons have a line height of 1 by default which breaks alignment
+        // oi icons have a line height of 1 by default which breaks alignment
         line-height: 1.5;
     
         &.o-second {
diff --git a/addons/mail/static/src/discuss/core/common/message_seen_indicator.xml b/addons/mail/static/src/discuss/core/common/message_seen_indicator.xml
index 9da1ccf4a91813..24e4bc2993cd7e 100644
--- a/addons/mail/static/src/discuss/core/common/message_seen_indicator.xml
+++ b/addons/mail/static/src/discuss/core/common/message_seen_indicator.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-name="mail.MessageSeenIndicator">
         <span t-if="this.props.message.channel_id?.exists()" class="o-mail-MessageSeenIndicator position-relative opacity-25 cursor-pointer" t-att-class="{ 'o-hasEveryoneSeen opacity-75': this.props.message.hasEveryoneSeen }" t-att-title="this.summary" t-attf-class="{{ this.props.className }}" t-on-click="this.openDialog">
-            <i class="fa fa-check ps-1"/><i t-if="this.props.message.hasEveryoneSeen" class="o-second start-0 fa fa-check position-absolute"/>
+            <i class="oi ps-1" data-icon="check"/><i t-if="this.props.message.hasEveryoneSeen" class="o-second start-0 position-absolute oi" data-icon="check"/>
         </span>
     </t>
 
diff --git a/addons/mail/static/src/discuss/core/common/notification_settings.xml b/addons/mail/static/src/discuss/core/common/notification_settings.xml
index 44ba30361d850b..b6f4647dd2ca83 100644
--- a/addons/mail/static/src/discuss/core/common/notification_settings.xml
+++ b/addons/mail/static/src/discuss/core/common/notification_settings.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="discuss.NotificationSettings">
-        <ActionPanel t-if="!this.env[this.DROPDOWN_NESTING] and this.env.inChatWindow" close="this.props.close" title.translate="Notification Settings" resizable="!!this.env.inMeetingView" initialWidth="400" icon="'fa fa-bell'">
+        <ActionPanel t-if="!this.env[this.DROPDOWN_NESTING] and this.env.inChatWindow" close="this.props.close" title.translate="Notification Settings" resizable="!!this.env.inMeetingView" initialWidth="400" icon="'notifications'" icon_class="'oi-filled'">
             <t t-call="discuss.NotificationSettings.content"/>
         </ActionPanel>
         <t t-else="" t-call="discuss.NotificationSettings.content"/>
@@ -21,7 +21,7 @@
                     }" t-custom-ref="mute-button">
                         <span class="text-wrap text-start text-break">Mute Conversation</span>
                         <div class="o-discuss-NotificationSettings-separator flex-grow-1"/>
-                        <i t-if="!this.env[this.DROPDOWN_NESTING]" class="fa fa-caret-right fa-lg mx-2"/>
+                        <i t-if="!this.env[this.DROPDOWN_NESTING]" class="oi oi-lg mx-2" data-icon="arrow_right"/>
                     </button>
                     <t t-set-slot="content">
                         <t t-call="discuss.NotificationSettings.muteSttings"/>
diff --git a/addons/mail/static/src/discuss/core/common/pinned_messages_panel.xml b/addons/mail/static/src/discuss/core/common/pinned_messages_panel.xml
index eb28bd0b8c007e..f4a497162472ab 100644
--- a/addons/mail/static/src/discuss/core/common/pinned_messages_panel.xml
+++ b/addons/mail/static/src/discuss/core/common/pinned_messages_panel.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="discuss.PinnedMessagesPanel">
-        <ActionPanel close="this.props.close" title.translate="Pinned Messages" minWidth="200" initialWidth="400" icon="'fa fa-thumb-tack'">
+        <ActionPanel close="this.props.close" title.translate="Pinned Messages" minWidth="200" initialWidth="400" icon="'push_pin'">
             <MessageCardList emptyText="this.emptyText" messages="this.props.channel.pinnedMessages" thread="this.props.channel.thread" mode="'pin'"/>
         </ActionPanel>
     </t>
diff --git a/addons/mail/static/src/discuss/core/common/thread_actions.js b/addons/mail/static/src/discuss/core/common/thread_actions.js
index 6d9b4f44bcdc12..a9fe0bbc480e81 100644
--- a/addons/mail/static/src/discuss/core/common/thread_actions.js
+++ b/addons/mail/static/src/discuss/core/common/thread_actions.js
@@ -20,7 +20,7 @@ registerThreadAction("pinned-messages", {
         channel &&
         (!owner.props.chatWindow || owner.props.chatWindow.isOpen) &&
         !owner.isDiscussSidebarChannelActions,
-    icon: "fa fa-fw fa-thumb-tack",
+    icon: "push_pin",
     name: ({ action }) => (action.isActive ? _t("Hide Pinned Messages") : _t("Pinned Messages")),
     sequence: 20,
     sequenceGroup: 10,
@@ -48,7 +48,8 @@ registerThreadAction("add-to-favorites", {
         channel.self_member_id &&
         !channel.self_member_id.is_favorite &&
         !owner.isDiscussContent,
-    icon: "fa fa-fw fa-star",
+    icon: "star",
+    iconClass: "oi-filled",
     name: _t("Add to Favorites"),
     /**
      * @param {Object} param0
@@ -79,7 +80,7 @@ registerThreadAction("remove-from-favorites", {
      */
     condition: ({ channel, owner }) =>
         channel?.self_member_id?.is_favorite && !owner.isDiscussContent,
-    icon: "fa fa-fw fa-star-o",
+    icon: "star",
     name: _t("Remove from Favorites"),
     /**
      * @param {Object} param0
@@ -133,8 +134,12 @@ registerThreadAction("notification-settings", {
     },
     icon: ({ channel }) =>
         channel?.self_member_id?.mute_until_dt
-            ? "fa fa-fw text-danger fa-bell-slash"
-            : "fa fa-fw fa-bell",
+            ? "notifications_off"
+            : "notifications",
+    iconClass: ({ channel }) =>
+        channel?.self_member_id?.mute_until_dt
+            ? "oi-filled oi-fw text-danger"
+            : "oi-filled oi-fw",
     name: ({ channel }) =>
         channel.channel_type == "channel" ? _t("Notification Settings") : _t("Mute Conversation"),
     sequence: 10,
@@ -147,7 +152,7 @@ registerThreadAction("attachments", {
         channel?.hasAttachmentPanel &&
         (!owner.props.chatWindow || owner.props.chatWindow.isOpen) &&
         !owner.isDiscussSidebarChannelActions,
-    icon: "fa fa-fw fa-paperclip",
+    icon: "attach_file",
     name: _t("Attachments"),
     sequence: 10,
     sequenceGroup: 10,
@@ -183,7 +188,7 @@ registerThreadAction("invite-people", {
         !owner.env.pipWindow &&
         (!owner.props.chatWindow || owner.props.chatWindow.isOpen) &&
         !(owner.isDiscussContent && channel?.hasMemberList),
-    icon: "oi oi-fw oi-user-plus",
+    icon: "person_add",
     name: _t("Invite People"),
     sequence: 20,
     sequenceGroup: ({ owner }) => (owner.isDiscussContent ? 10 : 20),
@@ -198,7 +203,8 @@ registerThreadAction("invite-people", {
 });
 registerThreadAction("copy-invite-link", {
     condition: ({ channel, owner }) => owner.env.pipWindow && channel?.invitationLink,
-    icon: "oi oi-fw oi-user-plus",
+    icon: "person_add",
+    icon_class: "oi-fw oi-filled",
     name: _t("Copy Invite Link"),
     onSelected: ({ channel, owner }) =>
         channel.copyInvitationLink({
@@ -236,7 +242,7 @@ registerThreadAction("member-list", {
         channel?.hasMemberList &&
         (!owner.props.chatWindow || owner.props.chatWindow.isOpen) &&
         !owner.isDiscussSidebarChannelActions,
-    icon: "oi oi-fw oi-users",
+    icon: "group",
     name: _t("Members"),
     sequence: 30,
     sequenceGroup: 10,
@@ -248,7 +254,7 @@ registerThreadAction("mark-read", {
         !channel.self_member_id.mute_until_dt &&
         owner.isDiscussSidebarChannelActions,
     onSelected: ({ channel }) => channel.markAsRead(),
-    icon: "fa fa-fw fa-check",
+    icon: "check",
     name: _t("Mark Read"),
     sequence: 10,
     sequenceGroup: 20,
@@ -263,7 +269,7 @@ registerThreadAction("hide", {
         (channel?.canHide || channel?.sub_channel_ids.some((subChannel) => subChannel.canHide)) &&
         !channel?.isSelfInCall &&
         !owner.isDiscussContent,
-    icon: "fa fa-fw fa-eye-slash",
+    icon: "visibility_off",
     /**
      * @param {Object} param0
      * @param {import("models").DiscussChannel} param0.channel
@@ -290,7 +296,7 @@ registerThreadAction("leave", {
         channel.allowedToLeaveChannelTypes.includes(channel.channel_type) &&
         channel.group_ids.length === 0 &&
         !owner.isDiscussContent,
-    icon: "fa fa-fw fa-sign-out",
+    icon: "logout",
     name: _t("Leave Channel"),
     /**
      * @param {Object} param0
@@ -314,8 +320,8 @@ registerThreadAction("delete-thread", {
             !owner.isDiscussContent
         );
     },
-    icon: "fa fa-fw fa-trash",
-    iconLarge: "fa fa-fw fa-lg fa-trash",
+    icon: "delete",
+    iconClass: "oi-filled",
     name: _t("Delete Thread"),
     actionPanelOpen: ({ channel, owner, store }) => {
         if (owner.isDiscussSidebarChannelActions) {
diff --git a/addons/mail/static/src/discuss/core/common/thread_patch.xml b/addons/mail/static/src/discuss/core/common/thread_patch.xml
index 8604fd6f4de4e3..0546372e0ecb34 100644
--- a/addons/mail/static/src/discuss/core/common/thread_patch.xml
+++ b/addons/mail/static/src/discuss/core/common/thread_patch.xml
@@ -5,7 +5,7 @@
             <span t-if="!this.env.inChatter and this.channel?.showUnreadBanner" class="o-mail-Thread-banner d-flex cursor-pointer shadow-sm smaller o-fw-600 border border-warning">
                 <t t-set="alertClass" t-value="'alert alert-warning m-0 border-start-0 o-mail-Thread-bannerHover py-1 rounded-0'"/>
                 <span t-attf-class="{{ alertClass }} flex-grow-1" t-on-click="this.onClickUnreadMessagesBanner" t-out="this.newMessageBannerText"/>
-                <span t-attf-class="{{ alertClass }}" t-on-click="() => this.props.thread.markAsRead()">Mark as Read<i class="ms-2 fa fa-check-square"/></span>
+                <span t-attf-class="{{ alertClass }}" t-on-click="() => this.props.thread.markAsRead()">Mark as Read<i class="ms-2 oi oi-filled" data-icon="check_box"/></span>
             </span>
         </xpath>
     </t>
diff --git a/addons/mail/static/src/discuss/core/public/welcome_page.xml b/addons/mail/static/src/discuss/core/public/welcome_page.xml
index 28c423cb17b738..cd04eea5215f7b 100644
--- a/addons/mail/static/src/discuss/core/public/welcome_page.xml
+++ b/addons/mail/static/src/discuss/core/public/welcome_page.xml
@@ -7,7 +7,7 @@
             <div class="col-12 col-lg-4">
                 <div class="d-flex flex-column justify-content-center h-100 rounded p-4 p-lg-5 bg-white">
                     <div class="text-center mb-4">
-                        <i class="oi oi-users oi-2x mb-3 p-2 rounded text-bg-primary"/>
+                        <i class="oi oi-filled oi-2x mb-3 p-2 rounded text-bg-primary" data-icon="group"/>
                         <h1 class="h2">
                             <span t-if="this.showCallPreview">You've been invited to a meeting!</span>
                             <span t-else="">You've been invited to a chat!</span>
@@ -29,7 +29,7 @@
                         <t t-if="this.showCallPreview" t-set="joinText">Join call</t>
                         <t t-else="" t-set="joinText">Join</t>
                         <span t-out="joinText"/>
-                        <i class="oi oi-arrow-right ms-2"/>
+                        <i class="oi ms-2" data-icon="east"/>
                     </button>
                     <small t-if="this.store.self_user and this.showCallPreview and this.noActiveParticipants" class="mt-2 text-center text-muted">No one else is here.</small>
                 </div>
diff --git a/addons/mail/static/src/discuss/core/public_web/bus_connection_alert.xml b/addons/mail/static/src/discuss/core/public_web/bus_connection_alert.xml
index 8290d7a5a40faa..0d20a4d904b223 100644
--- a/addons/mail/static/src/discuss/core/public_web/bus_connection_alert.xml
+++ b/addons/mail/static/src/discuss/core/public_web/bus_connection_alert.xml
@@ -3,7 +3,7 @@
     <t t-name="mail.BusConnectionAlert">
         <div t-if="this.busMonitoring.isConnectionLost and this.store.discuss.isActive" class="o-bus-ConnectionAlert position-absolute top-0 bottom-0 end-0 start-0 pe-none">
             <div class="o-bus-ConnectionAlert-failure small d-flex align-items-baseline m-0 position-absolute bottom-0 end-0 rounded-3 rounded-bottom-0 rounded-end-0 z-1 smaller gap-1" role="alert">
-                <i class="o-bus-ConnectionAlert-icon fa fa-warning text-warning o-xsmaller opacity-75"/>
+                <i class="o-bus-ConnectionAlert-icon oi text-warning o-xsmaller opacity-75" data-icon="warning"/>
                 <span class="o-bus-ConnectionAlert-label lh-1 opacity-75">Real-time connection lost...</span>
             </div>
         </div>
diff --git a/addons/mail/static/src/discuss/core/public_web/discuss_app/discuss_app_model_patch.js b/addons/mail/static/src/discuss/core/public_web/discuss_app/discuss_app_model_patch.js
index 9a9b1ca2e72353..72025cce5c0ab5 100644
--- a/addons/mail/static/src/discuss/core/public_web/discuss_app/discuss_app_model_patch.js
+++ b/addons/mail/static/src/discuss/core/public_web/discuss_app/discuss_app_model_patch.js
@@ -34,7 +34,7 @@ const discussAppPatch = {
                     addTitle: _t("Add or join a channel"),
                     canView: true,
                     extraClass: "o-mail-DiscussSidebarCategory-channel",
-                    icon: "fa fa-hashtag",
+                    icon: "tag",
                     id: "channels",
                     name: _t("Channels"),
                     sequence: 10,
@@ -53,7 +53,7 @@ const discussAppPatch = {
                 return {
                     extraClass: "o-mail-DiscussSidebarCategory-favorite",
                     hideWhenEmpty: true,
-                    icon: "fa fa-star",
+                    icon: "star",
                     id: "favorites",
                     name: _t("Favorites"),
                     sequence: 5,
@@ -67,7 +67,7 @@ const discussAppPatch = {
             addTitle: _t("Start a conversation"),
             canView: false,
             extraClass: "o-mail-DiscussSidebarCategory-chat",
-            icon: "oi oi-users",
+            icon: "group",
             id: "chats",
             name: _t("Direct Messages"),
             sequence: 30,
diff --git a/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/category.xml b/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/category.xml
index 4e1cc44228d7de..a2d260885dfbec 100644
--- a/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/category.xml
+++ b/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/category.xml
@@ -24,19 +24,16 @@
         <div class="o-mail-DiscussSidebarCategory position-relative d-flex align-items-center rounded opacity-trigger-hover" t-att-class="{ 'mx-2 my-1 ps-1 position-relative': this.store.discuss.isSidebarCompact, 'mt-1 mx-2 o-ps-1_5 pe-1': !this.store.discuss.isSidebarCompact }" t-attf-class="#{this.category.extraClass}" name="header" t-custom-ref="root">
             <button t-att-disabled="this.isToggleFoldDisabled" class="o-mail-DiscussSidebarCategory-toggler btn btn-link text-reset flex-grow-1 d-flex p-0 text-start" t-att-class="{ 'align-items-baseline o-gap-0_5': !this.store.discuss.isSidebarCompact, 'align-items-center justify-content-center border-0 o-compact gap-1': this.store.discuss.isSidebarCompact }" t-on-click="() => this.toggle()" name="toggler">
                 <t t-if="this.store.discuss.isSidebarCompact">
-                    <i class="o-mail-DiscussSidebarCategory-chevronCompact position-absolute fa-fw o-xxsmaller o-mt-0_5" t-att-class="{
-                        'oi oi-chevron-down': !this.isToggleFoldDisabled and this.category.is_open,
-                        'oi oi-chevron-right': this.isToggleFoldDisabled or !this.category.is_open,
-                    }"/>
-                    <span class="rounded p-1"><i t-if="this.store.channels.status === 'fetching'" class="fa fa-fw fa-circle-o-notch fa-spin"/><i t-else="" class="fa-fw fa-lg" t-att-class="this.category.icon ?? 'fa fa-user'"/></span>
+                    <i class="o-mail-DiscussSidebarCategory-chevronCompact oi oi-fw position-absolute o-xxsmaller o-mt-0_5" t-attf-data-icon="{{!this.isToggleFoldDisabled and this.category.is_open ? 'keyboard_arrow_down' : '' }}{{ this.isToggleFoldDisabled or !this.category.is_open ? 'chevron_forward' : '' }}"/>
+                    <span class="rounded p-1"><i t-if="this.store.channels.status === 'fetching'" class="oi oi-fw oi-spin" data-icon="autorenew"/><i t-else="" class="oi oi-fw oi-lg" t-att-data-icon="this.category.icon ?? 'person'"/></span>
                 </t>
                 <t t-else="">
                     <span class="o-mail-DiscussSidebarCategory-title text-break smaller d-flex align-items-center gap-1" t-att-class="{ 'fs-bold': this.category.open }">
-                        <i class="fa-fw opacity-75" t-att-class="this.category.icon ?? 'fa fa-user'"/>
+                        <i class="oi oi-fw opacity-75" t-att-class="this.category.icon ?? 'oi-filled'" t-att-data-icon="this.category.icon ?? 'person'"/>
                         <t name="titleText" t-out="this.category.name"/>
                     </span>
-                    <span t-if="this.store.channels.status === 'fetching'" class="o-visible-short-delay"><i class="o-mail-DiscussSidebarCategory-icon o-xxsmaller fa fa-fw fa-circle-o-notch fa-spin opacity-50 ps-1"/></span>
-                    <i t-else="" class="o-mail-DiscussSidebarCategory-icon o-xxsmaller fa-fw align-self-center ps-1" t-att-class="(!this.isToggleFoldDisabled and this.category.is_open) ? 'oi oi-chevron-down' : 'oi oi-chevron-right'"/>
+                    <span t-if="this.store.channels.status === 'fetching'" class="o-visible-short-delay"><i class="o-mail-DiscussSidebarCategory-icon o-xxsmaller oi oi-fw oi-spin opacity-50 ps-1" data-icon="autorenew"/></span>
+                    <i t-else="" class="o-mail-DiscussSidebarCategory-icon o-xxsmaller oi oi-fw align-self-center ps-1" t-att-data-icon="(!this.isToggleFoldDisabled and this.category.is_open) ? 'keyboard_arrow_down' : 'chevron_forward'"/>
                 </t>
             </button>
             <t t-if="this.actions.length and !this.store.discuss.isSidebarCompact" t-call="mail.DiscussSidebarCategory.actions"/>
@@ -52,7 +49,7 @@
                 <t name="action-group">
                     <t t-foreach="this.actions" t-as="action" t-key="action_index">
                         <button class="btn w-100 opacity-75 opacity-100-hover" t-on-click="() => action.onSelect()" t-att-class="{ 'd-flex align-items-center px-1 py-0 gap-1 text-start small btn-secondary shadow-sm': this.store.discuss.isSidebarCompact, 'p-0': !this.store.discuss.isSidebarCompact }" t-attf-class="#{action.class}" t-att-title="this.store.discuss.isSidebarCompact ? '' : action.label" t-att-data-hotkey="action.hotkey">
-                            <i role="presentation" class="fa-fw fa-lg" t-att-class="action.icon"/>
+                            <i role="presentation" class="oi oi-fw oi-lg" t-att-class="action.icon_class" t-att-data-icon="action.icon"/>
                             <span t-if="this.store.discuss.isSidebarCompact" class="text-muted" t-out="action.label"/>
                         </button>
                     </t>
diff --git a/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/channel.scss b/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/channel.scss
index f2a5dfecc9dd4a..eaf70b91bb2b8f 100644
--- a/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/channel.scss
+++ b/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/channel.scss
@@ -12,7 +12,7 @@
         }
     
         @media (min-resolution: 2dppx) {
-            .oi-ellipsis-h {
+            .oi[data-icon="more_horiz"] {
                 transform: translateX(0.5px);
             }
         }
diff --git a/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/channel.xml b/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/channel.xml
index 3cb2b7809f9461..a44b356cb75837 100644
--- a/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/channel.xml
+++ b/addons/mail/static/src/discuss/core/public_web/discuss_app/sidebar/channel.xml
@@ -62,7 +62,7 @@
         }">
             <Dropdown state="this.showingActions" position="'right-start'" menuClass="'o-mail-DiscussSidebar-floatingMenu o-discuss-dropdownMenu border-secondary my-0 min-w-0 mx-1 ' + this.store.discussDropdownMenuClass(this)">
                 <button class="btn btn-light rounded-circle d-flex o-p-0_5 align-items-center justify-content-center o-mail-discussSidebarBgColor border" t-att-class="{ 'o-showingActions': this.showingActions.isOpen, 'me-1': this.channel.parent_channel_id }" t-att-title="this.actionsTitle">
-                    <i role="img" class="oi oi-fw oi-lg oi-ellipsis-h"/>
+                    <i role="img" class="oi oi-fw oi-lg" data-icon="more_horiz"/>
                 </button>
                 <t t-set-slot="content">
                     <DiscussSidebarChannelActions channel="this.channel"/>
diff --git a/addons/mail/static/src/discuss/core/public_web/discuss_category_model_patch.js b/addons/mail/static/src/discuss/core/public_web/discuss_category_model_patch.js
index 4aabcb3bbd9d85..b4cd315c651a0c 100644
--- a/addons/mail/static/src/discuss/core/public_web/discuss_category_model_patch.js
+++ b/addons/mail/static/src/discuss/core/public_web/discuss_category_model_patch.js
@@ -14,7 +14,7 @@ const discussCategoryPatch = {
                     canView: false,
                     extraClass: "o-mail-DiscussSidebarCategory-discussCategory",
                     hideWhenEmpty: true,
-                    icon: "fa fa-hashtag",
+                    icon: "tag",
                     id: `discuss_category_${this.id}`,
                 };
             },
diff --git a/addons/mail/static/src/discuss/core/public_web/discuss_command_palette.js b/addons/mail/static/src/discuss/core/public_web/discuss_command_palette.js
index 698bf91bf24f87..24c8f558f4c73a 100644
--- a/addons/mail/static/src/discuss/core/public_web/discuss_command_palette.js
+++ b/addons/mail/static/src/discuss/core/public_web/discuss_command_palette.js
@@ -284,7 +284,7 @@ export class DiscussCommandPalette {
                 },
                 name: _t("Create Channel"),
                 className: "o-mail-DiscussCommand-createChannel d-flex",
-                props: { action: { icon: "fa fa-fw fa-hashtag", searchValueSuffix: true } },
+                props: { action: { icon: "tag", searchValueSuffix: true } },
             };
         }
         if (channelOrPersona === NEW_GROUP_CHAT) {
@@ -296,7 +296,7 @@ export class DiscussCommandPalette {
                 },
                 name: _t("Create Chat"),
                 className: "d-flex",
-                props: { action: { icon: "oi fa-fw oi-users" } },
+                props: { action: { icon: "group" } },
             };
         }
         throw new Error(`Unsupported use of makeDiscussCommand("${channelOrPersona}")`);
diff --git a/addons/mail/static/src/discuss/core/public_web/discuss_command_palette.xml b/addons/mail/static/src/discuss/core/public_web/discuss_command_palette.xml
index 56e268fb37bb19..b67eba11aa1df3 100644
--- a/addons/mail/static/src/discuss/core/public_web/discuss_command_palette.xml
+++ b/addons/mail/static/src/discuss/core/public_web/discuss_command_palette.xml
@@ -3,18 +3,18 @@
 
     <t t-name="mail.DiscussCommand">
         <div class="o-mail-DiscussCommand o_command_default d-flex align-items-center ps-3 pe-4" t-att-class="{ 'o-uiSmall': this.ui.isSmall }">
-            <i t-if="this.props.channel" class="fa-fw opacity-75 text-muted me-2" t-att-class="this.props.channel.parent_channel_id ? 'fa fa-comments-o' : this.props.channel.discussAppCategory?.icon ?? 'oi oi-user opacity-0'"/>
-            <i t-elif="this.props.persona" class="oi fa-fw oi-user opacity-75 text-muted me-2"/>
+            <i t-if="this.props.channel" class="oi oi-fw opacity-75 text-muted me-2" t-att-class="this.props.channel.discussAppCategory?.icon ? '' : 'opacity-0'" t-att-data-icon="this.props.channel.parent_channel_id ? '' : this.props.channel.discussAppCategory?.icon"/>
+            <i t-elif="this.props.persona" class="oi oi-fw opacity-75 text-muted me-2" data-icon="person"/>
             <DiscussAvatar t-if="this.props.channel or this.props.persona" channel="this.props.channel" persona="this.props.persona" size="this.ui.isSmall ? 32 : 26" className="'me-2'"/>
             <span class="o-mail-DiscussCommand-nameContainer pe-1 text-ellipsis d-flex align-items-center fw-bold" t-att-class="{ 'o-action': this.props.action }">
                 <t t-if="this.props.channel?.parent_channel_id">
                     <span class="text-truncate flex-shrink-0 opacity-75 mw-50 small" t-out="this.props.channel?.parent_channel_id.displayName"/>
-                    <i class="oi oi-chevron-right o-xsmaller mx-1"/>
+                    <i class="oi o-xsmaller mx-1" data-icon="chevron_forward"/>
                 </t>
                 <t t-slot="name" />
             </span>
             <span t-if="this.props.persona and this.props.persona.email" class="text-truncate text-muted smaller opacity-75" t-out="'- ' + this.props.persona.email" t-att-title="this.props.persona.email"/>
-            <i t-if="this.props.action?.icon" class="o-mail-DiscussCommand-actionIcon fa fa-fw opacity-75 o-action" t-attf-class="{{ this.props.action.icon }}"/>
+            <i t-if="this.props.action?.icon" class="o-mail-DiscussCommand-actionIcon oi oi-fw opacity-75 o-action" t-attf-data-icon="{{ this.props.action.icon }}"/>
             <span t-if="this.props.action?.searchValueSuffix" class="o-action fw-bold" t-out="this.props.searchValue"/>
             <span class="flex-grow-1"/>
             <div t-if="this.props.counter > 0">
@@ -26,7 +26,7 @@
     <t t-name="mail.CreateChannelDialog">
         <Dialog size="'sm'" title.translate="New Channel" contentClass="'o-mail-CreateChannelDialog'" bodyClass="'py-0'">
             <div class="d-flex flex-column" t-on-keydown="this.onKeydown">
-                <span class="ms-1 text-uppercase text-muted o-xsmaller opacity-75"><i class="fa fa-hashtag"/> Channel name</span>
+                <span class="ms-1 text-uppercase text-muted o-xsmaller opacity-75"><i class="oi" data-icon="tag"/> Channel name</span>
                 <input type="text" class="form-control" t-att-class="{ 'is-invalid': this.state.isInvalid }" placeholder="Channel name" t-custom-model="this.state.name" tabindex="1"/>
                 <div class="invalid-feedback">Channel must have a name.</div>
                 <div class="form-check mt-2">
@@ -45,7 +45,7 @@
     <Dialog size="'md'" title.translate="Make Chat" contentClass="'o-mail-CreateChatDialog'" bodyClass="'py-0'">
         <div class="d-flex flex-column flex-grow-1 bg-inherit w-100">
             <div class="d-flex align-items-center px-0 mb-1 gap-1">
-                <span class="ms-2 my-1 text-uppercase text-muted o-xsmaller opacity-75"><i class="oi oi-user-plus"/> Invite people</span>
+                <span class="ms-2 my-1 text-uppercase text-muted o-xsmaller opacity-75"><i class="oi" data-icon="person_add"/> Invite people</span>
             </div>
             <ChannelInvitation state="this.invitePeopleState"/>
         </div>
diff --git a/addons/mail/static/src/discuss/core/public_web/message_actions.js b/addons/mail/static/src/discuss/core/public_web/message_actions.js
index ca70c8a5ea4f07..16e8e7496461a4 100644
--- a/addons/mail/static/src/discuss/core/public_web/message_actions.js
+++ b/addons/mail/static/src/discuss/core/public_web/message_actions.js
@@ -4,7 +4,7 @@ import { _t } from "@web/core/l10n/translation";
 registerMessageAction("create-or-view-thread", {
     condition: ({ message, channel }) =>
         message.channel_id?.eq(channel) && message.channel_id?.canCreateSubChannels,
-    icon: "fa fa-comments-o",
+    icon: "forum",
     onSelected: ({ message }) => {
         if (message.linkedSubChannel) {
             message.linkedSubChannel.open({ focus: true });
diff --git a/addons/mail/static/src/discuss/core/public_web/messaging_menu_patch.js b/addons/mail/static/src/discuss/core/public_web/messaging_menu_patch.js
index 0fdb0ba8fbdff6..1ed94b50492fb5 100644
--- a/addons/mail/static/src/discuss/core/public_web/messaging_menu_patch.js
+++ b/addons/mail/static/src/discuss/core/public_web/messaging_menu_patch.js
@@ -16,7 +16,7 @@ patch(MessagingMenu.prototype, {
             return {
                 ...res,
                 action: () => thread.channel.unpinChannel(),
-                icon: "fa-times-circle",
+                icon: "cancel",
                 bgColor: "bg-danger",
             };
         }
diff --git a/addons/mail/static/src/discuss/core/public_web/sub_channel_list.xml b/addons/mail/static/src/discuss/core/public_web/sub_channel_list.xml
index 4eaf440396499e..370ca38db8aa0d 100644
--- a/addons/mail/static/src/discuss/core/public_web/sub_channel_list.xml
+++ b/addons/mail/static/src/discuss/core/public_web/sub_channel_list.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.SubChannelList">
-        <ActionPanel close="this.props.close" title.translate="Threads" resizable="!!this.env.inMeetingView" initialWidth="400" icon="'fa fa-comments-o'">
+        <ActionPanel close="this.props.close" title.translate="Threads" resizable="!!this.env.inMeetingView" initialWidth="400" icon="'forum'">
             <t t-set-slot="header">
                 <div class="d-flex align-items-center my-0">
                     <div class="input-group ms-1 my-2">
@@ -11,8 +11,8 @@
                             </div>
                         </div>
                         <button class="btn btn-outline-secondary px-2 py-1" aria-label="Search button" t-on-click="this.search">
-                            <i t-if="!this.state.loading" class="o_searchview_icon oi oi-search" role="img" aria-label="Search Sub Channels" title="Search Sub Channels"/>
-                            <i t-else="" class="fa fa-circle-o-notch fa-spin" aria-label="Search in progress" title="Search in progress"/>
+                            <i t-if="!this.state.loading" class="o_searchview_icon oi" data-icon="search" role="img" aria-label="Search Sub Channels" title="Search Sub Channels"/>
+                            <i t-else="" class="oi oi-spin" data-icon="autorenew" aria-label="Search in progress" title="Search in progress"/>
                         </button>
                         <button t-if="this.props.channel.canCreateSubChannels" class="btn btn-primary smaller" aria-label="Create Thread" t-on-click="this.onClickCreate">Create</button>
                     </div>
diff --git a/addons/mail/static/src/discuss/core/public_web/sub_channel_preview.xml b/addons/mail/static/src/discuss/core/public_web/sub_channel_preview.xml
index 242d7ba05a3f10..ceb2fe60c7afa4 100644
--- a/addons/mail/static/src/discuss/core/public_web/sub_channel_preview.xml
+++ b/addons/mail/static/src/discuss/core/public_web/sub_channel_preview.xml
@@ -29,7 +29,7 @@
             <AvatarStack t-if="!this.env.inMessage" containerClass="'ms-1'" personas="this.props.channel.channel_member_ids.map((m) => m.persona)" size="22" spacing="10" total="this.props.channel.member_count"/>
             <span t-elif="this.props.channel.message_count" class="text-primary smaller flex-shrink-0 d-flex fw-bold align-items-center ms-1">
                 <t t-out="this.messageCountText"/>
-                <i class="o-xxsmaller o-ms-0_5 oi oi-chevron-right"/>
+                <i class="o-xxsmaller o-ms-0_5 oi" data-icon="chevron_forward"/>
             </span>
         </div>
     </t>
@@ -44,7 +44,7 @@
             <AvatarStack t-if="!this.env.inMessage" containerClass="'ms-1'" personas="this.props.channel.channel_member_ids.map((m) => m.persona)" size="22" spacing="10" total="this.props.channel.member_count"/>
             <span t-elif="this.props.channel.message_count" class="text-primary smaller flex-shrink-0 d-flex fw-bold align-items-center ms-1">
                 <t t-out="this.messageCountText"/>
-                <i class="o-xxsmaller o-ms-0_5 oi oi-chevron-right"/>
+                <i class="o-xxsmaller o-ms-0_5 oi" data-icon="chevron_forward"/>
             </span>
         </div>
     </t>
diff --git a/addons/mail/static/src/discuss/core/public_web/thread_actions.js b/addons/mail/static/src/discuss/core/public_web/thread_actions.js
index f3a784593f3f8a..64ab39aae6ec49 100644
--- a/addons/mail/static/src/discuss/core/public_web/thread_actions.js
+++ b/addons/mail/static/src/discuss/core/public_web/thread_actions.js
@@ -17,7 +17,7 @@ registerThreadAction("show-threads", {
     condition: ({ channel, owner }) =>
         (channel?.hasSubChannelFeature || channel?.parent_channel_id?.hasSubChannelFeature) &&
         !owner.isDiscussSidebarChannelActions,
-    icon: "fa fa-fw fa-comments-o",
+    icon: "forum",
     name: _t("Threads"),
     setup({ owner, store }) {
         if (owner.env.inDiscussApp && !store.env.isSmall) {
diff --git a/addons/mail/static/src/discuss/core/web/discuss_app/sidebar/category_patch.js b/addons/mail/static/src/discuss/core/web/discuss_app/sidebar/category_patch.js
index 18a0c9648dceb0..e1d6719b8a9f12 100644
--- a/addons/mail/static/src/discuss/core/web/discuss_app/sidebar/category_patch.js
+++ b/addons/mail/static/src/discuss/core/web/discuss_app/sidebar/category_patch.js
@@ -34,7 +34,8 @@ const DiscussSidebarCategoryPatch = {
             actions.push({
                 onSelect: () => this.open(),
                 label: _t("View or join channels"),
-                icon: "fa fa-cog",
+                icon: "settings",
+                iconClass: "oi-filled",
             });
         }
         return actions;
diff --git a/addons/mail/static/src/discuss/core/web/thread_actions.js b/addons/mail/static/src/discuss/core/web/thread_actions.js
index dbafe7faca3e95..14f15bc6bf6cc6 100644
--- a/addons/mail/static/src/discuss/core/web/thread_actions.js
+++ b/addons/mail/static/src/discuss/core/web/thread_actions.js
@@ -13,7 +13,7 @@ export const joinChannelAction = {
         store.env.services.orm.call("discuss.channel", "add_members", [[channel.id]], {
             partner_ids: [store.self_user?.partner_id?.id],
         }),
-    icon: "fa fa-fw fa-sign-in",
+    icon: "login",
     name: _t("Join Channel"),
     sequence: 20,
     sequenceGroup: ({ owner }) => (owner.isDiscussContent ? undefined : 5),
@@ -26,7 +26,7 @@ registerThreadAction("expand-discuss", {
         owner.props.chatWindow?.isOpen &&
         !store.env.services.ui.isSmall &&
         !owner.isDiscussSidebarChannelActions,
-    icon: "fa fa-fw fa-expand",
+    icon: "expand_content",
     name: _t("Open in Discuss"),
     onSelected({ channel, owner, store }) {
         store.env.services.action.doAction(
@@ -57,7 +57,8 @@ registerThreadAction("advanced-settings", {
             target: "current",
         });
     },
-    icon: "fa fa-fw fa-gear",
+    icon: "settings",
+    iconClass: "oi-filled",
     name: _t("Advanced Settings"),
     sequence: 20,
     sequenceGroup: 30,
diff --git a/addons/mail/static/src/discuss/gif_picker/common/composer_actions_patch.js b/addons/mail/static/src/discuss/gif_picker/common/composer_actions_patch.js
index e1ae4304202b05..361c3cf9195292 100644
--- a/addons/mail/static/src/discuss/gif_picker/common/composer_actions_patch.js
+++ b/addons/mail/static/src/discuss/gif_picker/common/composer_actions_patch.js
@@ -15,7 +15,7 @@ registerComposerAction("add-gif", {
         !composer.message,
     isPicker: true,
     pickerName: _t("GIF"),
-    icon: "oi oi-gif-picker",
+    icon: "gif_box",
     name: _t("Send GIF"),
     onSelected({ owner }, ev) {
         pickerOnClick(owner, this, ev);
diff --git a/addons/mail/static/src/discuss/gif_picker/common/gif_picker.xml b/addons/mail/static/src/discuss/gif_picker/common/gif_picker.xml
index 4e223db9530bb1..ba4b1767b26a84 100644
--- a/addons/mail/static/src/discuss/gif_picker/common/gif_picker.xml
+++ b/addons/mail/static/src/discuss/gif_picker/common/gif_picker.xml
@@ -9,13 +9,13 @@
             </div>
             <t t-else="">
                 <div class="o-EmojiPicker-search d-flex align-items-center m-2 rounded">
-                    <i t-if="!this.state.showCategories" aria-label="back" t-on-click="this.openCategories" class="oi oi-arrow-left cursor-pointer p-2 fs-5"/>
+                    <i t-if="!this.state.showCategories" aria-label="back" t-on-click="this.openCategories" class="oi cursor-pointer p-2 fs-5" data-icon="west"/>
                     <span class="d-flex mx-1 w-100 rounded o-active">
                         <t t-call="discuss.GifPicker.searchInput">
                             <t t-if="this.props.state" t-set="localState" t-value="this.props.state"/>
                             <t t-else="" t-set="localState" t-value="this.state"/>
                         </t>
-                        <i class="oi oi-search p-2 fs-5 rounded-start-0 rounded-3 o-active" title="Search..." role="img" aria-label="Search..."/>
+                        <i class="oi p-2 fs-5 rounded-start-0 rounded-3 o-active" data-icon="search" title="Search..." role="img" aria-label="Search..."/>
                     </span>
                 </div>
                 <div class="o-discuss-GifPicker-content overflow-y-auto overflow-x-hidden ps-2 pe-3 pb-2 h-100" t-custom-ref="scroller">
@@ -74,10 +74,10 @@
                             </div>
                         </div>
                         <div t-if="this.state.loadingGif" class="text-center fs-6 h-100 d-flex flex-column justify-content-center">
-                            <i class="fa fa-spin fa-circle-o-notch"/>
+                            <i class="oi oi-spin" data-icon="autorenew"/>
                         </div>
                         <div t-elif="this.showFavorite and this.state.evenGif.gifs.size === 0 and this.state.oddGif.gifs.size === 0" class="d-flex flex-column h-100 align-items-center justify-content-center text-center text-muted gap-2">
-                            <i class="o-discuss-GifPicker-noFavoritesIcon o-yellow fa fa-star fs-1"/>
+                            <i class="o-discuss-GifPicker-noFavoritesIcon oi oi-filled o-yellow fs-1" data-icon="star"/>
                             <span class="fs-5">So uhh... maybe go favorite some GIFs?</span>
                         </div>
                     </t>
@@ -90,8 +90,9 @@
         <div class="o-discuss-Gif position-relative mt-1 fs-5 cursor-pointer rounded overflow-hidden">
             <i
                 t-if="this.store.self_user"
-                class="position-absolute top-0 end-0 me-3 mt-3 p-2 o-bg-black bg-opacity-75 fa cursor-pointer opacity-0"
-                t-att-class="{ 'o-text-white fa-star-o': !this.isFavorite(gif_value), 'fa-star o-starred': this.isFavorite(gif_value) }"
+                class="position-absolute top-0 end-0 me-3 mt-3 p-2 o-bg-black bg-opacity-75 oi cursor-pointer opacity-0"
+                t-att-class="{ 'o-text-white': !this.isFavorite(gif_value), 'oi-filled o-starred': this.isFavorite(gif_value) }"
+                data-icon="star"
                 t-on-click="() => this.onClickFavorite(gif_value)"
             />
             <Gif class="'img-fluid'" style="this.style" alt="'GIF'" onClick="() => this.onClickGif(gif_value)" src="gif_value.media_formats.tinygif.url" loading="'lazy'" paused="!this.state.focused"/>
diff --git a/addons/mail/static/src/discuss/voice_message/common/composer_actions_patch.js b/addons/mail/static/src/discuss/voice_message/common/composer_actions_patch.js
index 5b0a8496b9f8a5..0eaa33248fa87f 100644
--- a/addons/mail/static/src/discuss/voice_message/common/composer_actions_patch.js
+++ b/addons/mail/static/src/discuss/voice_message/common/composer_actions_patch.js
@@ -8,7 +8,7 @@ registerComposerAction("voice-start", {
         owner.voiceRecorder &&
         !owner.voiceRecorder?.recording &&
         !composer.voiceAttachment,
-    icon: "fa fa-microphone",
+    icon: "mic",
     name: _t("Voice Message"),
     onSelected: ({ owner }) => owner.voiceRecorder.onClick(),
     sequence: 10,
@@ -16,7 +16,8 @@ registerComposerAction("voice-start", {
 registerComposerAction("voice-stop", {
     condition: ({ composer, owner }) =>
         composer.targetThread?.channel && owner.voiceRecorder?.recording,
-    icon: "fa fa-circle text-danger o-mail-VoiceRecorder-dot",
+    icon: "circle",
+    iconClass: "oi-filled text-danger o-mail-VoiceRecorder-dot",
     name: _t("Stop Recording"),
     onSelected: ({ owner }) => owner.voiceRecorder.onClick(),
     sequence: 10,
@@ -29,7 +30,7 @@ registerComposerAction("voice-recording", {
                 <div class="o-mail-VoiceRecorder-elapsed o-active recording ms-2 me-1" t-att-class="{ 'text-danger': this.props.state.limitWarning }" style="font-variant-numeric: tabular-nums;">
                     <span class="d-flex text-truncate" t-out="this.props.state.elapsed"/>
                 </div>
-                <span class="rounded-circle p-1"><i class="fa fa-fw fa-circle text-danger o-mail-VoiceRecorder-dot"/></span>
+                <span class="rounded-circle p-1"><i class="oi oi-fw oi-filled text-danger o-mail-VoiceRecorder-dot" data-icon="circle"/></span>
             </button>
         `;
         get title() {
diff --git a/addons/mail/static/src/discuss/voice_message/common/voice_player.xml b/addons/mail/static/src/discuss/voice_message/common/voice_player.xml
index be49097c5533c9..cf1f461b7a8a6f 100644
--- a/addons/mail/static/src/discuss/voice_message/common/voice_player.xml
+++ b/addons/mail/static/src/discuss/voice_message/common/voice_player.xml
@@ -4,13 +4,12 @@
     <t t-name="mail.VoicePlayer">
         <div class="o-mail-VoicePlayer d-flex align-items-center my-1 position-relative">
             <t t-set="playOrPause"><t t-if="this.state.repeat">Repeat</t><t t-elif="this.state.playing">Pause</t><t t-else="">Play</t></t>
-            <button class="border-0 btn shadow-none rounded-pill fa fa-fw ms-2 me-3 bg-200"
+            <button class="border-0 btn shadow-none rounded-pill oi oi-fw ms-2 me-3 bg-200"
                 t-att-class="{
-                    'fa-stop text-danger btn-sm': this.state.playing,
+                    'text-danger btn-sm': this.state.playing,
                     'btn-light btn-sm': !this.state.playing,
-                    'fa-play': !this.state.playing and !this.state.repeat,
-                    'fa-repeat': !this.state.playing and this.state.repeat,
                 }"
+                t-attf-data-icon="{{ this.state.playing ? 'stop' : (this.state.repeat ? 'redo' : 'play_arrow') }}"
                 t-att-title="playOrPause" t-on-click.stop="() => this.onClickPlayPause()"/>
             <div class="o-mail-VoicePlayer-wrapper">
                 <div t-custom-ref="wrapper" class="h-100 position-relative">
diff --git a/addons/mail/static/src/discuss/voice_message/common/voice_recorder.xml b/addons/mail/static/src/discuss/voice_message/common/voice_recorder.xml
index 4f92a4787798ce..f5676980b8eaf9 100644
--- a/addons/mail/static/src/discuss/voice_message/common/voice_recorder.xml
+++ b/addons/mail/static/src/discuss/voice_message/common/voice_recorder.xml
@@ -9,7 +9,7 @@
                 'mw-0': !this.state.recording,
                 'text-danger': this.state.limitWarning,
             }" style="font-variant-numeric: tabular-nums;"><span class="d-flex text-truncate" t-out="this.state.elapsed"/></div>
-            <span class="rounded-circle" t-att-class="{ 'p-1': this.state.recording }"><i t-att-class="!this.state.recording ? 'fa fa-fw fa-lg fa-microphone' : 'fa fa-fw fa-circle text-danger o-mail-VoiceRecorder-dot'"/></span>
+            <span class="rounded-circle" t-att-class="{ 'p-1': this.state.recording }"><i class="oi oi-fw" t-att-class="!this.state.recording ? 'oi-lg' : 'text-danger o-mail-VoiceRecorder-dot'" t-att-data-icon="!this.state.recording ? 'mic' : 'circle'"/></span>
         </button>
     </t>
 
diff --git a/addons/mail/static/src/scss/copy_alias_email.scss b/addons/mail/static/src/scss/copy_alias_email.scss
index 242acda753ca1b..5a43802314be6d 100644
--- a/addons/mail/static/src/scss/copy_alias_email.scss
+++ b/addons/mail/static/src/scss/copy_alias_email.scss
@@ -1,5 +1,5 @@
 .copy_alias_email {
-    .fa-clipboard {
+    [data-icon="assignment"] {
         display: none;
     }
     .o_clipboard_button {
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index 0e69c89b055c6b..efa3d880a83a63 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -33,7 +33,7 @@
 .o_kanban_record, .o_view_controller{
     .o_mail_activity {
         .o_activity_btn {
-            span.fa {
+            span.oi {
                 overflow: visible;
                 line-height: 1;
                 vertical-align: middle;
diff --git a/addons/mail/static/src/views/fields/activity_model_selector/activity_model_selector.xml b/addons/mail/static/src/views/fields/activity_model_selector/activity_model_selector.xml
index a171ae3fa19a69..015200f785fcc3 100644
--- a/addons/mail/static/src/views/fields/activity_model_selector/activity_model_selector.xml
+++ b/addons/mail/static/src/views/fields/activity_model_selector/activity_model_selector.xml
@@ -2,7 +2,7 @@
     <div t-name="mail.ActivityModelSelector" class="o_field_widget o_field_many2one flex-row">
         <t t-if="this.state.resModelName">
             <span t-out="this.state.resModelName" class="text-truncate"/>
-            <button t-on-click="() => this.onRecordReset()" class="btn fa fa-close"/>
+            <button t-on-click="() => this.onRecordReset()" class="btn oi" data-icon="close"/>
         </t>
         <t t-else="">
             <div class="o_input_dropdown">
diff --git a/addons/mail/static/src/views/fields/mail_server_configurator_selection/mail_server_configurator_selection.xml b/addons/mail/static/src/views/fields/mail_server_configurator_selection/mail_server_configurator_selection.xml
index a00ab8eb7b1d19..248fe0955ccca9 100644
--- a/addons/mail/static/src/views/fields/mail_server_configurator_selection/mail_server_configurator_selection.xml
+++ b/addons/mail/static/src/views/fields/mail_server_configurator_selection/mail_server_configurator_selection.xml
@@ -21,13 +21,13 @@
                 class="btn btn-link o_mail_server_configurator_selection_test_connection py-0"
                 t-on-click="() => this.onTestConnection()">
                 <div t-if="!this.state.connectionFailed">
-                    <i class="fa fa-check"/> Emails sent via <t t-out="this.string"/>
+                    <i class="oi" data-icon="check"/> Emails sent via <t t-out="this.string"/>
                 </div>
                 <div t-else="" class="text-danger">
                     Connection failed
                 </div>
                 <div>
-                    <i class="fa fa-plug"/> Test Connection
+                    <i class="oi" data-icon="power"/> Test Connection
                 </div>
             </button>
         </t>
diff --git a/addons/mail/static/src/views/web/activity/activity_controller.scss b/addons/mail/static/src/views/web/activity/activity_controller.scss
index 9ca521902fbd41..e66e426f89aaa9 100644
--- a/addons/mail/static/src/views/web/activity/activity_controller.scss
+++ b/addons/mail/static/src/views/web/activity/activity_controller.scss
@@ -73,7 +73,7 @@
             width: 32px;
             justify-content: center;
 
-            i.fa-pencil {
+            i[data-icon="edit"] {
                 font-size: x-large;
             }
         }
@@ -125,7 +125,7 @@
     }
     .o_activity_type_cell {
         min-width:100px;
-        .oi-ellipsis-v {
+        .oi[data-icon="more_vert"] {
             cursor: pointer;
         }
 
diff --git a/addons/mail/static/src/views/web/activity/activity_renderer.xml b/addons/mail/static/src/views/web/activity/activity_renderer.xml
index 030a8306b15ec7..086c0a3ad304f2 100644
--- a/addons/mail/static/src/views/web/activity/activity_renderer.xml
+++ b/addons/mail/static/src/views/web/activity/activity_renderer.xml
@@ -10,13 +10,13 @@
                 <div>
                     <span t-out="type.name"/>
                     <span t-if="type.template_ids.length > 0" class="dropdown float-end">
-                        <i class="oi oi-ellipsis-v oi-fw" data-bs-toggle="dropdown"/>
+                        <i class="oi oi-fw" data-icon="more_vert" data-bs-toggle="dropdown"/>
                         <div class="dropdown-menu">
                             <t t-foreach="type.template_ids" t-as="template" t-key="template.id">
                                 <div data-tooltip="This action will send an email."
                                      class="o_template_element o_send_mail_template cursor-pointer"
                                      t-on-click="() => this.props.onSendMailTemplate(template.id, type.id)">
-                                    <i class="fa fa-envelope fa-fw"/> <t t-out="template.name"/>
+                                    <i class="oi oi-fw oi-filled" data-icon="mail"/> <t t-out="template.name"/>
                                 </div>
                             </t>
                         </div>
@@ -31,7 +31,7 @@
                 <div class="o_optional_columns_dropdown text-center border-top-0">
                     <Dropdown position="'bottom-end'">
                         <button class="btn p-0" tabindex="-1">
-                            <i class="o_optional_columns_dropdown_toggle oi oi-fw oi-settings-adjust"/>
+                            <i class="o_optional_columns_dropdown_toggle oi oi-fw" data-icon="tune"/>
                         </button>
 
                         <t t-set-slot="content">
@@ -94,7 +94,7 @@
         class="o_activity_summary_cell o_activity_empty_cell cursor-pointer"
         t-attf-class="{{ this.activeFilter.resIds.has(resId) ? 'o_activity_filter_' + this.activeFilter.progressValue.active : '' }}"
         t-on-click.prevent.stop="() => this.props.onEmptyCell(resId, type.id)">
-        <i data-tooltip="Create" class="text-center fa fa-plus mt-2 align-items-center justify-content-center h-100"/>
+        <i data-tooltip="Create" class="oi text-center mt-2 align-items-center justify-content-center h-100" data-icon="add"/>
     </td>
 </t>
 
@@ -104,7 +104,7 @@
             <td class="p-3" colspan="100">
                 <span class="btn btn-link o_record_selector cursor-pointer"
                       t-on-click.prevent.stop="this.props.scheduleActivity">
-                    <i class="fa fa-plus pe-2"/> Schedule activity
+                    <i class="oi pe-2" data-icon="add"/> Schedule activity
                 </span>
             </td>
         </tr>
diff --git a/addons/mail/static/src/views/web/fields/activity_exception/activity_exception.js b/addons/mail/static/src/views/web/fields/activity_exception/activity_exception.js
index 6fab891c455b94..457d2315feae69 100644
--- a/addons/mail/static/src/views/web/fields/activity_exception/activity_exception.js
+++ b/addons/mail/static/src/views/web/fields/activity_exception/activity_exception.js
@@ -11,14 +11,19 @@ class ActivityException extends Component {
     get textClass() {
         if (this.props.record.data[this.props.name]) {
             return (
-                "text-" +
-                this.props.record.data[this.props.name] +
-                " fa " +
-                this.props.record.data.activity_exception_icon
+                "oi text-" +
+                this.props.record.data[this.props.name]
             );
         }
         return undefined;
     }
+
+    get icon() {
+        if (this.props.record.data[this.props.name]) {
+            return this.props.record.data.activity_exception_icon;
+        }
+        return undefined;
+    }
 }
 
 Object.assign(ActivityException, {
diff --git a/addons/mail/static/src/views/web/fields/activity_exception/activity_exception.xml b/addons/mail/static/src/views/web/fields/activity_exception/activity_exception.xml
index a5ce3dc4b99d9b..60da1d90f821c9 100644
--- a/addons/mail/static/src/views/web/fields/activity_exception/activity_exception.xml
+++ b/addons/mail/static/src/views/web/fields/activity_exception/activity_exception.xml
@@ -5,6 +5,7 @@
             t-if="this.props.record.data[this.props.name]"
             class="o-mail-ActivityException float-end mt-1"
             t-att-class="this.textClass"
+            t-att-data-icon="icon"
             title="This record has an exception activity."
         />
     </t>
diff --git a/addons/mail/static/src/views/web/fields/emojis_field_common/emojis_field_common.xml b/addons/mail/static/src/views/web/fields/emojis_field_common/emojis_field_common.xml
index 7f85682f96d202..d85dfbecb0336d 100644
--- a/addons/mail/static/src/views/web/fields/emojis_field_common/emojis_field_common.xml
+++ b/addons/mail/static/src/views/web/fields/emojis_field_common/emojis_field_common.xml
@@ -8,7 +8,7 @@
                 t-attf-class="{{positionCenter ? 'pb-0 pt-0' : 'bottom-0'}}"
                 t-custom-ref="emojisButton"
             >
-                <i class="oi oi-smile-add" role="img" aria-label="Emojis"/>
+                <i class="oi" data-icon="add_reaction" role="img" aria-label="Emojis"/>
             </button>
         </div>
     </t>
diff --git a/addons/mail/static/src/views/web/fields/html_composer_message_field/content_expandable_plugin.xml b/addons/mail/static/src/views/web/fields/html_composer_message_field/content_expandable_plugin.xml
index ad3c7d948722c2..11381d25d6c591 100644
--- a/addons/mail/static/src/views/web/fields/html_composer_message_field/content_expandable_plugin.xml
+++ b/addons/mail/static/src/views/web/fields/html_composer_message_field/content_expandable_plugin.xml
@@ -3,7 +3,7 @@
     <t t-name="mail.ExpandableButton">
         <div class="o-mail-Message-viewMore-container">
             <button title="Show trimmed content" class="o-mail-Message-viewMore-btn badge rounded-pill border-0 py-0 px-1">
-                <i class="oi oi-ellipsis-h oi-large"/>
+                <i class="oi oi-lg" data-icon="more_horiz"/>
             </button>
         </div>
     </t>
diff --git a/addons/mail/static/src/views/web/fields/html_mail_field/convert_inline.js b/addons/mail/static/src/views/web/fields/html_mail_field/convert_inline.js
index 739a67f5c5ea7a..be0bfb703daf3b 100644
--- a/addons/mail/static/src/views/web/fields/html_mail_field/convert_inline.js
+++ b/addons/mail/static/src/views/web/fields/html_mail_field/convert_inline.js
@@ -1009,7 +1009,7 @@ function flattenBackgroundImages(element) {
 function fontToImg(element) {
     const { fonts } = odoo.loader.modules.get("@html_editor/utils/fonts");
 
-    for (const font of element.querySelectorAll(".fa")) {
+    for (const font of element.querySelectorAll(".oi")) {
         let icon, content;
         fonts.fontIcons.find((fontIcon) =>
             fonts.getCssSelectors(fontIcon.parser).find((data) => {
diff --git a/addons/mail/static/src/views/web/fields/list_activity/list_activity.js b/addons/mail/static/src/views/web/fields/list_activity/list_activity.js
index b39bd08f38feb2..687d7d251aca26 100644
--- a/addons/mail/static/src/views/web/fields/list_activity/list_activity.js
+++ b/addons/mail/static/src/views/web/fields/list_activity/list_activity.js
@@ -16,7 +16,7 @@ class ListActivityButton extends ActivityButton {
     setup() {
         super.setup();
         this.defaultActivityStateClass = "";
-        this.defaultActivityDecorationClass = "fa-clock-o";
+        this.defaultActivityDecorationClass = "schedule";
     }
 }
 
diff --git a/addons/mail/static/src/views/web/fields/list_activity/list_activity.xml b/addons/mail/static/src/views/web/fields/list_activity/list_activity.xml
index 137504f9c4ce2d..482cc497bc21b5 100644
--- a/addons/mail/static/src/views/web/fields/list_activity/list_activity.xml
+++ b/addons/mail/static/src/views/web/fields/list_activity/list_activity.xml
@@ -9,7 +9,7 @@
         <xpath expr="//button[hasclass('o-mail-ActivityButton')]" position="replace">
             <button class="o-mail-ActivityButton btn btn-link btn-dark p-0 w-100 text-start text-truncate"
                 t-on-click.prevent.stop="this.onClick" t-custom-ref="button" t-att-aria-label="this.title" t-att-title="this.title">
-                <i class="fa fa-fw fa-lg" t-att-class="this.buttonClass" role="img"/>
+                <i class="oi oi-fw oi-lg" t-att-class="this.buttonClass" t-att-data-icon="this.buttonIcon" role="img"/>
                 <t t-slot="default"/>
             </button>
         </xpath>
diff --git a/addons/mail/static/src/views/web/fields/many2many_avatar_user_field/many2many_avatar_user_field.xml b/addons/mail/static/src/views/web/fields/many2many_avatar_user_field/many2many_avatar_user_field.xml
index 966aff8c7acb3c..60720b96ba8768 100644
--- a/addons/mail/static/src/views/web/fields/many2many_avatar_user_field/many2many_avatar_user_field.xml
+++ b/addons/mail/static/src/views/web/fields/many2many_avatar_user_field/many2many_avatar_user_field.xml
@@ -3,7 +3,7 @@
     <t t-name="mail.Many2ManyTagsAvatarUserField" t-inherit="web.Many2ManyTagsAvatarField" t-inherit-mode="primary">
         <xpath expr="//Many2XAutocomplete" position="inside">
             <t t-set-slot="inviteTeammates" t-slot-scope="inviteTeammatesScope">
-                <i class="fa fa-envelope-o fa-lg me-2 d-inline"/>
+                <i class="oi oi-lg me-2 d-inline" data-icon="mail"/>
                 <t t-out="inviteTeammatesScope.label"/>
             </t>
         </xpath>
@@ -12,7 +12,7 @@
     <t t-name="mail.ListMany2ManyTagsAvatarUserField" t-inherit="web.Many2ManyTagsAvatarField" t-inherit-mode="primary">
         <xpath expr="//Many2XAutocomplete" position="inside">
             <t t-set-slot="inviteTeammates" t-slot-scope="inviteTeammatesScope">
-                <i class="fa fa-envelope-o fa-lg me-2 d-inline"/>
+                <i class="oi oi-lg me-2 d-inline" data-icon="mail"/>
                 <t t-out="inviteTeammatesScope.label"/>
             </t>
         </xpath>
diff --git a/addons/mail/static/src/views/web/fields/many2one_avatar_user_field/many2one_avatar_user_field.xml b/addons/mail/static/src/views/web/fields/many2one_avatar_user_field/many2one_avatar_user_field.xml
index 233b0ab11bbc62..1ef7534492f3b3 100644
--- a/addons/mail/static/src/views/web/fields/many2one_avatar_user_field/many2one_avatar_user_field.xml
+++ b/addons/mail/static/src/views/web/fields/many2one_avatar_user_field/many2one_avatar_user_field.xml
@@ -10,7 +10,7 @@
                 <t t-set-slot="inviteTeammates" t-slot-scope="inviteTeammatesScope">
                     <div class="d-flex align-items-center">
                         <div class="o_icon d-flex align-items-center justify-content-center me-2">
-                            <i class="fa fa-envelope-o fa-lg"/>
+                            <i class="oi oi-lg" data-icon="mail"/>
                         </div>
                         <span t-out="inviteTeammatesScope.label"/>
                     </div>
diff --git a/addons/mail/static/src/views/web/fields/scheduled_date_field/scheduled_date_field.xml b/addons/mail/static/src/views/web/fields/scheduled_date_field/scheduled_date_field.xml
index b4377912f933e0..4194bab76bc7f5 100644
--- a/addons/mail/static/src/views/web/fields/scheduled_date_field/scheduled_date_field.xml
+++ b/addons/mail/static/src/views/web/fields/scheduled_date_field/scheduled_date_field.xml
@@ -3,7 +3,7 @@
 
 <t t-name="mail.ScheduledDateField">
     <button t-attf-class="btn btn-light #{this.scheduledDate ? 'text-info' : ''}" data-hotkey="s" t-on-click="this.onClick" title="Send Later">
-        <i class="fa fa-clock-o"/>
+        <i class="oi" data-icon="schedule"/>
         <span t-if="this.scheduledDate">
             Sending <t t-out="this.scheduledDate.toLocaleString(this.dateTimeFormat)"/>
         </span>
diff --git a/addons/mail/static/src/views/web/list/mail_activity_list_reschedule.xml b/addons/mail/static/src/views/web/list/mail_activity_list_reschedule.xml
index 0e993771b36e7e..095c1e54282f03 100644
--- a/addons/mail/static/src/views/web/list/mail_activity_list_reschedule.xml
+++ b/addons/mail/static/src/views/web/list/mail_activity_list_reschedule.xml
@@ -2,14 +2,14 @@
     <span t-name="mail.MailActivityListRescheduleDropdown">
         <Dropdown>
             <button class="btn btn-link p-0 text-dark" type="button">
-                <i class="fa fa-calendar o_button_icon"/> <span class="o_dropdown_title">Reschedule</span>
+                <i class="oi oi-filled o_button_icon" data-icon="calendar_today"/> <span class="o_dropdown_title">Reschedule</span>
             </button>
 
             <t t-set-slot="content">
                 <DropdownItem onSelected="(ev) => this.rescheduleActivity(ev, this.targetDays.today.actionName)">
                     <div class="d-flex justify-content-between">
                         <span>
-                            <i class="oi oi-schedule-today me-1"/> Today
+                            <i class="oi me-1" data-icon="early_on"/> Today
                         </span>
                         <span t-out="this.targetDays.today.displayDay" class="ms-2 text-muted"/>
                     </div>
@@ -17,7 +17,7 @@
                 <DropdownItem onSelected="(ev) => this.rescheduleActivity(ev, this.targetDays.tomorrow.actionName)">
                     <div class="d-flex justify-content-between">
                         <span>
-                            <i class="oi oi-schedule-tomorrow me-1"/> Tomorrow
+                            <i class="oi me-1" data-icon="event_upcoming"/> Tomorrow
                         </span>
                         <span t-out="this.targetDays.tomorrow.displayDay" class="ms-2 text-muted"/>
                     </div>
@@ -25,7 +25,7 @@
                 <DropdownItem onSelected="(ev) => this.rescheduleActivity(ev, this.targetDays.nextWeek.actionName)">
                     <div class="d-flex justify-content-between">
                         <span>
-                            <i class="oi oi-schedule-later me-1"/> Next Week
+                            <i class="oi me-1" data-icon="calendar_clock"/> Next Week
                         </span>
                         <span t-out="this.targetDays.nextWeek.displayDay" class="ms-2 text-muted"/>
                     </div>
diff --git a/addons/mail/static/tests/activity/activity.test.js b/addons/mail/static/tests/activity/activity.test.js
index 4be5106f6856c8..9a9cc677b3b4cc 100644
--- a/addons/mail/static/tests/activity/activity.test.js
+++ b/addons/mail/static/tests/activity/activity.test.js
@@ -21,7 +21,7 @@ mailModels.MailActivity._views = {
     form: `
         <form>
             <footer>
-                <button string="Delete" type="object" name="unlink" icon="fa-trash" class="btn-danger ms-auto"/>
+                <button string="Delete" type="object" name="unlink" icon="delete" icon_class="oi-filled" class="btn-danger ms-auto"/>
             </footer>
         </form>`,
 };
@@ -41,7 +41,7 @@ test("activity upload document is available", async () => {
     await start();
     await openFormView("res.partner", partnerId);
     await contains(".o-mail-Activity .btn:text('Upload Document')");
-    await contains(".btn .fa-upload");
+    await contains(".btn [data-icon='upload']");
     await contains(".o-mail-Activity .o_input_file");
 });
 
diff --git a/addons/mail/static/tests/chat_bubble/chat_bubble.test.js b/addons/mail/static/tests/chat_bubble/chat_bubble.test.js
index d1f88eac2a1fc6..e24cb8cb89a4b1 100644
--- a/addons/mail/static/tests/chat_bubble/chat_bubble.test.js
+++ b/addons/mail/static/tests/chat_bubble/chat_bubble.test.js
@@ -376,16 +376,16 @@ test("Can compact chat hub", async () => {
     await hover(".o-mail-ChatHub-hiddenBtn");
     await click("button[title='Chat Options']");
     await click(".o-dropdown-item:text('Hide all conversations')");
-    await contains(".o-mail-ChatBubble i.fa.fa-comments");
-    await click(".o-mail-ChatBubble i.fa.fa-comments");
+    await contains(".o-mail-ChatBubble i.oi-filled[data-icon='forum']");
+    await click(".o-mail-ChatBubble i.oi-filled[data-icon='forum']");
     await contains(".o-mail-ChatBubble", { count: 8 });
     // alternative compact: click hidden button
     await click(".o-mail-ChatBubble:text('+13')");
-    await contains(".o-mail-ChatBubble i.fa.fa-comments");
+    await contains(".o-mail-ChatBubble i.oi-filled[data-icon='forum']");
     // don't show compact button in discuss app
     await openDiscuss();
     await contains(".o-mail-Discuss[data-active]");
-    await contains(".o-mail-ChatBubble i.fa.fa-comments", { count: 0 });
+    await contains(".o-mail-ChatBubble i.oi-filled[data-icon='forum']", { count: 0 });
 });
 
 test("Compact chat hub is crosstab synced", async () => {
@@ -399,8 +399,8 @@ test("Compact chat hub is crosstab synced", async () => {
     await hover(`${env1.selector} .o-mail-ChatBubble:eq(0)`);
     await click(`${env1.selector} button[title='Chat Options']`);
     await click(`${env1.selector} .o-dropdown-item:text('Hide all conversations')`);
-    await contains(`${env1.selector} .o-mail-ChatBubble .fa-comments`);
-    await contains(`${env2.selector} .o-mail-ChatBubble .fa-comments`);
+    await contains(`${env1.selector} .o-mail-ChatBubble .oi-filled[data-icon='forum']`);
+    await contains(`${env2.selector} .o-mail-ChatBubble .oi-filled[data-icon='forum']`);
 });
 
 test("Compacted chat hub shows badge with amount of hidden chats with important messages", async () => {
@@ -431,7 +431,7 @@ test("Compacted chat hub shows badge with amount of hidden chats with important
     await contains(".o-mail-ChatBubble", { count: 8 }); // max reached
     await contains(".o-mail-ChatBubble .o-mail-ChatHub-hiddenBtnIcon:text('+13')");
     await click(".o-mail-ChatHub-hiddenBtn");
-    await contains(".o-mail-ChatBubble i.fa.fa-comments");
+    await contains(".o-mail-ChatBubble i.oi-filled[data-icon='forum']");
     await contains(".o-mail-ChatBubble .o-discuss-badge:text('9')");
 });
 
@@ -447,7 +447,7 @@ test("Show IM status", async () => {
     });
     setupChatHub({ folded: [channelId] });
     await start();
-    await contains(".o-mail-ChatBubble .fa-circle.text-success[aria-label='User is online']");
+    await contains(".o-mail-ChatBubble [data-icon='circle'].oi-filled.text-success[aria-label='User is online']");
 });
 
 test("Attachment-only message preview shows file name", async () => {
diff --git a/addons/mail/static/tests/chat_window/chat_window.test.js b/addons/mail/static/tests/chat_window/chat_window.test.js
index 6c06b23ad8f305..40793708c9fa4a 100644
--- a/addons/mail/static/tests/chat_window/chat_window.test.js
+++ b/addons/mail/static/tests/chat_window/chat_window.test.js
@@ -594,7 +594,7 @@ test("chat window: composer state conservation on toggle discuss", async () => {
     });
     // Set attachments of the composer
     await inputFiles(".o-mail-Composer .o_input_file", [textFile1, textFile2]);
-    await contains(".o-mail-AttachmentContainer .fa-check", { count: 2 });
+    await contains(".o-mail-AttachmentContainer [data-icon='check']", { count: 2 });
     await openDiscuss();
     await contains(".o-mail-ChatWindow", { count: 0 });
     await openFormView("discuss.channel", channelId);
diff --git a/addons/mail/static/tests/chatter/web/chatter.test.js b/addons/mail/static/tests/chatter/web/chatter.test.js
index 66947e3dd7a8d2..824800ce1359a3 100644
--- a/addons/mail/static/tests/chatter/web/chatter.test.js
+++ b/addons/mail/static/tests/chatter/web/chatter.test.js
@@ -148,7 +148,7 @@ test("No attachment loading spinner when creating records", async () => {
     await start();
     await openFormView("res.partner");
     await contains("button[aria-label='Attach files']");
-    await contains("button[aria-label='Attach files'] .fa-spin", { count: 0 });
+    await contains("button[aria-label='Attach files'] .oi-spin", { count: 0 });
 });
 
 test("No attachment loading spinner when switching from loading record to creation of record", async () => {
@@ -165,9 +165,9 @@ test("No attachment loading spinner when switching from loading record to creati
     await openFormView("res.partner", partnerId);
     await contains("button[aria-label='Attach files']");
     await advanceTime(DELAY_FOR_SPINNER);
-    await contains("button[aria-label='Attach files'] .fa-spin");
+    await contains("button[aria-label='Attach files'] .oi-spin");
     await click(".o_control_panel_main_buttons .o_form_button_create");
-    await contains("button[aria-label='Attach files'] .fa-spin", { count: 0 });
+    await contains("button[aria-label='Attach files'] .oi-spin", { count: 0 });
     await expect.waitForSteps(["before mail.thread"]);
     def.resolve();
     await waitStoreFetch("mail.thread");
diff --git a/addons/mail/static/tests/chatter/web/chatter_topbar.test.js b/addons/mail/static/tests/chatter/web/chatter_topbar.test.js
index 10dc68bd618d6d..16d31e208dca12 100644
--- a/addons/mail/static/tests/chatter/web/chatter_topbar.test.js
+++ b/addons/mail/static/tests/chatter/web/chatter_topbar.test.js
@@ -156,7 +156,7 @@ test("attachment counter while loading attachments", async () => {
     await openFormView("res.partner", partnerId);
     await contains("button[aria-label='Attach files']");
     await advanceTime(DELAY_FOR_SPINNER);
-    await contains("button[aria-label='Attach files'] .fa-spin");
+    await contains("button[aria-label='Attach files'] .oi-spin");
     await contains("button[aria-label='Attach files']:text('0')", { count: 0 });
     await expect.waitForSteps(["before mail.thread"]);
     def.resolve();
@@ -177,11 +177,11 @@ test("attachment counter transition when attachments become loaded", async () =>
     await openFormView("res.partner", partnerId);
     await contains("button[aria-label='Attach files']");
     await advanceTime(DELAY_FOR_SPINNER);
-    await contains("button[aria-label='Attach files'] .fa-spin");
+    await contains("button[aria-label='Attach files'] .oi-spin");
     await expect.waitForSteps(["before mail.thread"]);
     def.resolve();
     await waitStoreFetch("mail.thread");
-    await contains("button[aria-label='Attach files'] .fa-spin", { count: 0 });
+    await contains("button[aria-label='Attach files'] .oi-spin", { count: 0 });
 });
 
 test("attachment icon open directly the file uploader if there is no attachment yet", async () => {
diff --git a/addons/mail/static/tests/chatter/web/follow_button.test.js b/addons/mail/static/tests/chatter/web/follow_button.test.js
index aa7f48ea04b54e..5080dd0205dfd9 100644
--- a/addons/mail/static/tests/chatter/web/follow_button.test.js
+++ b/addons/mail/static/tests/chatter/web/follow_button.test.js
@@ -17,11 +17,11 @@ test("base rendering follow, edit subscription and unfollow button", async () =>
     await start();
     await openFormView("res.partner", threadId);
     await contains(".o-mail-Followers-counter:text('0')");
-    await contains("[title='Show Followers'] .fa-user-o");
+    await contains("[title='Show Followers'] [data-icon='person']");
     await click("[title='Show Followers']");
     await click(".o-dropdown-item:text('Follow')");
     await contains(".o-mail-Followers-counter:text('1')");
-    await contains("[title='Show Followers'] .fa-user");
+    await contains("[title='Show Followers'] .oi-filled[data-icon='person']");
     await click("[title='Show Followers']");
     await contains(".o-mail-Followers-dropdown");
     await click("[title='Edit subscription']");
@@ -29,5 +29,5 @@ test("base rendering follow, edit subscription and unfollow button", async () =>
     await click("[title='Show Followers']");
     await click(".o-dropdown-item:text('Unfollow')");
     await contains(".o-mail-Followers-counter:text('0')");
-    await contains("[title='Show Followers'] .fa-user-o");
+    await contains("[title='Show Followers'] [data-icon='person']");
 });
diff --git a/addons/mail/static/tests/composer/composer.test.js b/addons/mail/static/tests/composer/composer.test.js
index 229f82785dc05f..9511219682a20c 100644
--- a/addons/mail/static/tests/composer/composer.test.js
+++ b/addons/mail/static/tests/composer/composer.test.js
@@ -472,7 +472,7 @@ test("Show send button in mobile", async () => {
     await click("button:text('Channels')");
     await click(".o-mail-NotificationItem:text('minecraft-wii-u')");
     await contains(".o-mail-Composer button[title='Send']");
-    await contains(".o-mail-Composer button[title='Send'] i.fa-paper-plane-o");
+    await contains(".o-mail-Composer button[title='Send'] i[data-icon='send']");
 });
 
 test("composer textarea content is retained when changing channel then going back", async () => {
@@ -915,7 +915,7 @@ test("composer: add an attachment", async () => {
     await start();
     await openDiscuss(channelId);
     await inputFiles(".o-mail-Composer .o_input_file", [text]);
-    await contains(".o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt) .fa-check");
+    await contains(".o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt) [data-icon='check']");
     await contains(".o-mail-Composer-footer .o-mail-AttachmentList");
     await contains(
         ".o-mail-Composer-footer .o-mail-AttachmentList .o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt)"
@@ -942,7 +942,7 @@ test("composer: add an attachment in reply to message in history", async () => {
     await click("[title='Expand']");
     await click(".o-dropdown-item:contains('Reply')");
     await inputFiles(".o-mail-Composer .o_input_file", [text]);
-    await contains(".o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt) .fa-check");
+    await contains(".o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt) [data-icon='check']");
     await contains(".o-mail-Composer-footer .o-mail-AttachmentList");
     await contains(
         ".o-mail-Composer-footer .o-mail-AttachmentList .o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt)"
@@ -974,7 +974,7 @@ test("remove an attachment from composer does not need any confirmation", async
     await start();
     await openDiscuss(channelId);
     await inputFiles(".o-mail-Composer .o_input_file", [text]);
-    await contains(".o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt) .fa-check");
+    await contains(".o-mail-AttachmentContainer:not(.o-isUploading):contains(text.txt) [data-icon='check']");
     await contains(".o-mail-Composer-footer .o-mail-AttachmentList");
     await click(".o-mail-Attachment-unlink");
     await contains(".o-mail-AttachmentList .o-mail-AttachmentContainer", { count: 0 });
@@ -1798,13 +1798,13 @@ test("mentions can be correctly selected with ctrl+A and deleted", async () => {
     await htmlInsertText(editor, "#general");
     await click(".o-mail-NavigableList-item:text('General')");
     await contains(`.o-mail-Composer-html.odoo-editor-editable:text('General')`);
-    await contains(editor.editable.querySelector("i.fa-hashtag"));
+    await contains(editor.editable.querySelector("i[data-icon='tag']"));
     await htmlInsertText(editor, "Hello");
     await contains(".o-mail-Composer-html.odoo-editor-editable:text('General Hello')");
     await focus(editor.editable);
     await press("Control+a");
     await press("Backspace");
-    await contains(editor.editable.querySelector("i.fa-hashtag"), { count: 0 });
+    await contains(editor.editable.querySelector("i[data-icon='tag']"), { count: 0 });
     await contains(editor.editable, { textContent: "" });
 
     //partner in the middle of the message
@@ -1824,13 +1824,13 @@ test("mentions can be correctly selected with ctrl+A and deleted", async () => {
     await htmlInsertText(editor, "Hello #general");
     await click(".o-mail-NavigableList-item:text('General')");
     await contains(`.o-mail-Composer-html.odoo-editor-editable:text('Hello General')`);
-    await contains(editor.editable.querySelector("i.fa-hashtag"));
+    await contains(editor.editable.querySelector("i[data-icon='tag']"));
     await htmlInsertText(editor, "nice to meet you!");
     await contains(".o-mail-Composer-html.odoo-editor-editable:text('Hello General nice to meet you!')");
     await focus(editor.editable);
     await press("Control+a");
     await press("Backspace");
-    await contains(editor.editable.querySelector("i.fa-hashtag"), { count: 0 });
+    await contains(editor.editable.querySelector("i[data-icon='tag']"), { count: 0 });
     await contains(editor.editable, { textContent: "" });
 
     //partner at the end of the message
@@ -1846,11 +1846,11 @@ test("mentions can be correctly selected with ctrl+A and deleted", async () => {
     await htmlInsertText(editor, "Hello #general");
     await click(".o-mail-NavigableList-item:text('General')");
     await contains(`.o-mail-Composer-html.odoo-editor-editable:text('Hello General')`);
-    await contains(editor.editable.querySelector("i.fa-hashtag"));
+    await contains(editor.editable.querySelector("i[data-icon='tag']"));
     await focus(editor.editable);
     await press("Control+a");
     await press("Backspace");
-    await contains(editor.editable.querySelector("i.fa-hashtag"), { count: 0 });
+    await contains(editor.editable.querySelector("i[data-icon='tag']"), { count: 0 });
     await contains(editor.editable, { textContent: "" });
 });
 
@@ -1885,13 +1885,13 @@ test("mentions can be correctly cut with ctrl+A and ctrl+X", async () => {
     await htmlInsertText(editor, "#general");
     await click(".o-mail-NavigableList-item:text('General')");
     await contains(".o-mail-Composer-html.odoo-editor-editable:text('General')");
-    await contains(editor.editable.querySelector("i.fa-hashtag"));
+    await contains(editor.editable.querySelector("i[data-icon='tag']"));
     await htmlInsertText(editor, "Hello");
     await contains(".o-mail-Composer-html.odoo-editor-editable:text('General Hello')");
     await focus(editor.editable);
     await press("Control+a");
     cut(editor);
-    await contains(editor.editable.querySelector("i.fa-hashtag"), { count: 0 });
+    await contains(editor.editable.querySelector("i[data-icon='tag']"), { count: 0 });
     await contains(editor.editable, { textContent: "" });
 
     // partner in the middle of the message
@@ -1911,7 +1911,7 @@ test("mentions can be correctly cut with ctrl+A and ctrl+X", async () => {
     await htmlInsertText(editor, "Hello #general");
     await click(".o-mail-NavigableList-item:text('General')");
     await contains(".o-mail-Composer-html.odoo-editor-editable:text('Hello General')");
-    await contains(editor.editable.querySelector("i.fa-hashtag"));
+    await contains(editor.editable.querySelector("i[data-icon='tag']"));
     await htmlInsertText(editor, "nice to meet you!");
     await contains(
         ".o-mail-Composer-html.odoo-editor-editable:text('Hello General nice to meet you!')"
@@ -1919,7 +1919,7 @@ test("mentions can be correctly cut with ctrl+A and ctrl+X", async () => {
     await focus(editor.editable);
     await press("Control+a");
     cut(editor);
-    await contains(editor.editable.querySelector("i.fa-hashtag"), { count: 0 });
+    await contains(editor.editable.querySelector("i[data-icon='tag']"), { count: 0 });
     await contains(editor.editable, { textContent: "" });
 
     // partner at the end of the message
@@ -1935,10 +1935,10 @@ test("mentions can be correctly cut with ctrl+A and ctrl+X", async () => {
     await htmlInsertText(editor, "Hello #general");
     await click(".o-mail-NavigableList-item:text('General')");
     await contains(".o-mail-Composer-html.odoo-editor-editable:text('Hello General')");
-    await contains(editor.editable.querySelector("i.fa-hashtag"));
+    await contains(editor.editable.querySelector("i[data-icon='tag']"));
     await focus(editor.editable);
     await press("Control+a");
     cut(editor);
-    await contains(editor.editable.querySelector("i.fa-hashtag"), { count: 0 });
+    await contains(editor.editable.querySelector("i[data-icon='tag']"), { count: 0 });
     await contains(editor.editable, { textContent: "" });
 });
diff --git a/addons/mail/static/tests/composer/html_composer_message_field.test.js b/addons/mail/static/tests/composer/html_composer_message_field.test.js
index 466b819bfc9793..c6c0524d95f3e0 100644
--- a/addons/mail/static/tests/composer/html_composer_message_field.test.js
+++ b/addons/mail/static/tests/composer/html_composer_message_field.test.js
@@ -245,7 +245,7 @@ describe("Remove attachments", () => {
         await expect.waitForSteps(["File Uploaded"]);
         await waitFor("[name='attachment_ids'] a:contains('file.txt')");
         await waitFor(".odoo-editor-editable .o_file_box:has(a:contains('file.txt'))");
-        await click("[name='attachment_ids'] button:has(i.fa-times)");
+        await click("[name='attachment_ids'] button:has(i[data-icon='close'])");
         await waitForNone("[name='attachment_ids'] a:contains('file.txt')");
         await waitForNone(".odoo-editor-editable .o_file_box:has(a:contains('file.txt'))");
     });
@@ -296,7 +296,7 @@ describe("Remove attachments", () => {
         await expect.waitForSteps(["Image Uploaded"]);
         await waitFor("[name='attachment_ids'] a:contains('test.jpg')");
         await waitFor(".odoo-editor-editable img[data-attachment-id='1']");
-        await click("[name='attachment_ids'] button:has(i.fa-times)");
+        await click("[name='attachment_ids'] button:has(i[data-icon='close'])");
         await waitForNone("[name='attachment_ids'] a:contains('test.jpg')");
         await waitForNone(".odoo-editor-editable img[data-attachment-id='1']");
     });
diff --git a/addons/mail/static/tests/core/common/upgrade_19_1.test.js b/addons/mail/static/tests/core/common/upgrade_19_1.test.js
index dc970ee68508f9..02557063d35c8c 100644
--- a/addons/mail/static/tests/core/common/upgrade_19_1.test.js
+++ b/addons/mail/static/tests/core/common/upgrade_19_1.test.js
@@ -160,7 +160,7 @@ test("category 'Channels' is folded", async () => {
     localStorage.setItem("discuss_sidebar_category_folded_channels", "true");
     await start();
     await openDiscuss();
-    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') .oi.oi-chevron-right");
+    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') .oi[data-icon='chevron_forward']");
     const channels_is_open = makeRecordFieldLocalId(
         DiscussAppCategory.localId("channels"),
         "is_open"
@@ -174,7 +174,7 @@ test("category 'Direct messages' is folded", async () => {
     await start();
     await openDiscuss();
     await contains(
-        ".o-mail-DiscussSidebarCategory:contains('Direct messages') .oi.oi-chevron-right"
+        ".o-mail-DiscussSidebarCategory:contains('Direct messages') .oi[data-icon='chevron_forward']"
     );
     const chats_is_open = makeRecordFieldLocalId(DiscussAppCategory.localId("chats"), "is_open");
     expect(localStorage.getItem(chats_is_open)).toBe(toRawValue(false));
diff --git a/addons/mail/static/tests/crosstab/crosstab.test.js b/addons/mail/static/tests/crosstab/crosstab.test.js
index 1d57942c35af49..e2fd61eab2c9e9 100644
--- a/addons/mail/static/tests/crosstab/crosstab.test.js
+++ b/addons/mail/static/tests/crosstab/crosstab.test.js
@@ -126,7 +126,7 @@ test("Adding attachments", async () => {
     await click(`${env1.selector} .o-mail-Message .o-mail-Composer .o_input_file`);
     await setInputFiles([file]);
     await contains(
-        `${env1.selector} .o-mail-AttachmentContainer:not(.o-isUploading):contains(test.txt) .fa-check`
+        `${env1.selector} .o-mail-AttachmentContainer:not(.o-isUploading):contains(test.txt) [data-icon="check"]`
     );
     await click(`${env1.selector} .o-mail-Message .o-mail-Composer button[data-type='save']`);
 
diff --git a/addons/mail/static/tests/discuss/call/call.test.js b/addons/mail/static/tests/discuss/call/call.test.js
index c58b3c800372d2..59ceb0833475dd 100644
--- a/addons/mail/static/tests/discuss/call/call.test.js
+++ b/addons/mail/static/tests/discuss/call/call.test.js
@@ -499,19 +499,19 @@ test("Systray icon shows latest action", async () => {
     await start();
     await openDiscuss(channelId);
     await click("[title='Start Call']");
-    await contains(".o-discuss-CallMenu-buttonContent .fa-microphone");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='mic']");
     await click("[title='Mute']");
-    await contains(".o-discuss-CallMenu-buttonContent .fa-microphone-slash");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='mic_off']");
     await click("[title='Voice Settings']");
     await click(".dropdown-menu button:contains('Deafen')");
-    await contains(".o-discuss-CallMenu-buttonContent .fa-deaf");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='hearing_disabled']");
     await click("[title='Turn camera on']");
-    await contains(".o-discuss-CallMenu-buttonContent .fa-video-camera");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='videocam']");
     await click("[title='Share Screen']");
-    await contains(".o-discuss-CallMenu-buttonContent .fa-desktop");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='desktop_windows']");
     await triggerEvents(".o-discuss-Call-mainCards", ["mousemove"]); // show overlay
     await click("[title='Raise Hand']");
-    await contains(".o-discuss-CallMenu-buttonContent .fa-hand-paper-o");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='back_hand']");
 });
 
 test("Systray icon keeps track of earlier actions", async () => {
@@ -520,23 +520,23 @@ test("Systray icon keeps track of earlier actions", async () => {
     await start();
     await openDiscuss(channelId);
     await click("[title='Start Call']");
-    await contains(".o-discuss-CallMenu-buttonContent .fa-microphone");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='mic']");
     await click("[title='Share Screen']");
     // stack: ["share-screen"]
-    await contains(".o-discuss-CallMenu-buttonContent .fa-desktop");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='desktop_windows']");
     await triggerEvents(".o-discuss-Call-mainCards", ["mousemove"]); // show overlay
     await click("[title='Turn camera on']");
     // stack: ["video", "share-screen"]
-    await contains(".o-discuss-CallMenu-buttonContent .fa-video-camera");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='videocam']");
     await click("[title='Mute']");
     // stack: ["mute", "video", "share-screen"]
-    await contains(".o-discuss-CallMenu-buttonContent .fa-microphone-slash");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='mic_off']");
     await click("[title='Unmute']");
     // stack: ["video", "share-screen"]
-    await contains(".o-discuss-CallMenu-buttonContent .fa-video-camera");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='videocam']");
     await click("[title='Stop camera']");
     // stack: ["share-screen"]
-    await contains(".o-discuss-CallMenu-buttonContent .fa-desktop");
+    await contains(".o-discuss-CallMenu-buttonContent [data-icon='desktop_windows']");
 });
 
 test("show call participants in discuss sidebar", async () => {
@@ -883,7 +883,7 @@ test("single 'join' (without camera) button when last call was audio-only", asyn
     await click("button[title='Join Call']");
     await contains(".o-discuss-Call.o-selfInCall");
     await click("button[title='Disconnect']");
-    await click("button[title='Join Call']:text('Join')", { contains: [".fa-phone"] });
+    await click("button[title='Join Call']:text('Join')", { contains: ["[data-icon='phone']"] });
 });
 
 test("single 'join' (with camera) button when last call had camera on", async () => {
@@ -911,7 +911,7 @@ test("single 'join' (with camera) button when last call had camera on", async ()
     await contains(".o-discuss-CallParticipantCard[aria-label='Mitchell Admin'] video");
     await click("button[title='Disconnect']");
     await click("button[title='Join Video Call']:text('Join')", {
-        contains: [".fa-video-camera"],
+        contains: ["[data-icon='videocam']"],
     });
 });
 
@@ -1113,7 +1113,7 @@ test("Show connecting state on cards", async () => {
     await click("[title='Join Call']");
     await contains(".o-discuss-CallParticipantCard[aria-label='Bob']");
     await bobRemote.updateConnectionState("connecting");
-    await contains(".o-discuss-CallParticipantCard[aria-label='Bob'] .fa-exclamation-triangle");
+    await contains(".o-discuss-CallParticipantCard[aria-label='Bob'] [data-icon='warning']");
     await bobRemote.updateConnectionState("connected");
     await contains("span[data-connection-state='connected']");
 });
@@ -1133,7 +1133,7 @@ test("Can see raised hands from other call participants", async () => {
     await contains(".o-discuss-CallParticipantCard[aria-label='Bob']");
     await bobRemote.updateConnectionState("connected");
     await bobRemote.updateInfo({ isRaisingHand: true });
-    await contains(".o-discuss-CallParticipantCard[aria-label='Bob'] .fa-hand-paper-o");
+    await contains(".o-discuss-CallParticipantCard[aria-label='Bob'] [data-icon='back_hand']");
     await contains(".o-discuss-Call-notification:contains('Bob raised their hand')");
 });
 
@@ -1195,24 +1195,24 @@ test("discuss sidebar call participant shows appropriate status icon", async ()
     await contains(".o-discuss-Call");
     await click("button[title='Mute']");
     await contains(
-        ".o-mail-DiscussSidebarCallParticipants:contains('Mitchell Admin') .fa-microphone-slash"
+        ".o-mail-DiscussSidebarCallParticipants:contains('Mitchell Admin') [data-icon='mic_off']"
     );
     await contains("button[title='Unmute']");
     await click("button[title='Voice Settings']");
     await click(".dropdown-menu button:contains('Deafen')");
-    await contains(".o-mail-DiscussSidebarCallParticipants:contains('Mitchell Admin') .fa-deaf");
+    await contains(".o-mail-DiscussSidebarCallParticipants:contains('Mitchell Admin') [data-icon='hearing_disabled']");
     await contains(
-        ".o-mail-DiscussSidebarCallParticipants:contains('Mitchell Admin') .fa-microphone-slash",
+        ".o-mail-DiscussSidebarCallParticipants:contains('Mitchell Admin') [data-icon='mic_off']",
         { count: 0 }
     );
     await click("button[title='Undeafen']");
-    await contains(".o-mail-DiscussSidebarCallParticipants:contains('Mitchell Admin') .fa-deaf", {
+    await contains(".o-mail-DiscussSidebarCallParticipants:contains('Mitchell Admin') [data-icon='hearing_disabled']", {
         count: 0,
     });
     await bobRemote.updateInfo({ is_muted: true });
-    await contains(".o-mail-DiscussSidebarCallParticipants:contains('bob') .fa-microphone-slash");
+    await contains(".o-mail-DiscussSidebarCallParticipants:contains('bob') [data-icon='mic_off']");
     await bobRemote.updateInfo({ is_deaf: true });
-    await contains(".o-mail-DiscussSidebarCallParticipants:contains('bob') .fa-deaf");
+    await contains(".o-mail-DiscussSidebarCallParticipants:contains('bob') [data-icon='hearing_disabled']");
 });
 
 test("auto-focus participant video in one-to-one call in chat window", async () => {
diff --git a/addons/mail/static/tests/discuss/core/channel_invitation.test.js b/addons/mail/static/tests/discuss/core/channel_invitation.test.js
index bcd590235abbff..00ed818e76564e 100644
--- a/addons/mail/static/tests/discuss/core/channel_invitation.test.js
+++ b/addons/mail/static/tests/discuss/core/channel_invitation.test.js
@@ -115,7 +115,7 @@ test("Invitation form should display channel group restriction", async () => {
     await contains(
         ".o-discuss-ChannelInvitation div:text('Access restricted to group \"testGroup\"')",
         {
-            after: ["button .fa.fa-copy"],
+            after: ["button [data-icon='content_copy']"],
         }
     );
 });
diff --git a/addons/mail/static/tests/discuss/core/channel_member_list.test.js b/addons/mail/static/tests/discuss/core/channel_member_list.test.js
index 021878a5fdafd2..575c0d04d6e564 100644
--- a/addons/mail/static/tests/discuss/core/channel_member_list.test.js
+++ b/addons/mail/static/tests/discuss/core/channel_member_list.test.js
@@ -328,10 +328,10 @@ test("Shows owner / admin in members panel + member actions", async () => {
     await contains(
         ".o-discuss-ChannelMember:text('" +
             serverState.partnerName +
-            "') .fa-star.text-warning[title='Channel Owner']"
+            "') [data-icon='star'].text-warning[title='Channel Owner']"
     );
     await contains(
-        ".o-discuss-ChannelMember:text('Demo') .fa-star.text-primary[title='Channel Admin']"
+        ".o-discuss-ChannelMember:text('Demo') [data-icon='star'].text-primary[title='Channel Admin']"
     );
     await click(
         ".o-discuss-ChannelMember:text('" + serverState.partnerName + "') [title='Member Actions']"
diff --git a/addons/mail/static/tests/discuss/core/common/message_seen_indicator.test.js b/addons/mail/static/tests/discuss/core/common/message_seen_indicator.test.js
index d6abf04354e02e..56f81f23ebf73e 100644
--- a/addons/mail/static/tests/discuss/core/common/message_seen_indicator.test.js
+++ b/addons/mail/static/tests/discuss/core/common/message_seen_indicator.test.js
@@ -48,7 +48,7 @@ test("rendering when just one has seen the message", async () => {
     await openDiscuss(channelId);
     await contains(".o-mail-MessageSeenIndicator");
     await contains(".o-mail-MessageSeenIndicator[title='Seen by Demo User']");
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 1 });
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 1 });
     await contains(".o-mail-MessageSeenIndicator.o-hasEveryoneSeen", { count: 0 });
 });
 
@@ -77,7 +77,7 @@ test("rendering when just everyone has seen the message", async () => {
     await openDiscuss(channelId);
     await contains(".o-mail-MessageSeenIndicator");
     await contains(".o-mail-MessageSeenIndicator[title='Seen by everyone']");
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 2 });
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 2 });
     await contains(".o-mail-MessageSeenIndicator.o-hasEveryoneSeen", { count: 1 });
 });
 
@@ -101,7 +101,7 @@ test("mark channel as seen from the bus", async () => {
     await start();
     await openDiscuss(channelId);
     await contains(".o-mail-Message");
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 0 });
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 0 });
     const channel = pyEnv["discuss.channel"].search_read([["id", "=", channelId]])[0];
     // Simulate received channel seen notification
     const DiscussChannelMember = pyEnv["discuss.channel.member"];
@@ -119,7 +119,7 @@ test("mark channel as seen from the bus", async () => {
         ).get_result()
     );
     await contains(".o-mail-MessageSeenIndicator[title='Seen by test']");
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 2 });
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 2 });
 });
 
 test("should display message indicator when message is seen", async () => {
@@ -142,7 +142,7 @@ test("should display message indicator when message is seen", async () => {
     await start();
     await openDiscuss(channelId);
     await contains(".o-mail-Message");
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 0 });
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 0 });
     const channel = pyEnv["discuss.channel"].search_read([["id", "=", channelId]])[0];
     // Simulate received channel seen notification
     const DiscussChannelMember = pyEnv["discuss.channel.member"];
@@ -159,7 +159,7 @@ test("should display message indicator when message is seen", async () => {
             { seen_message_id: messageId }
         ).get_result()
     );
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 2 });
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 2 });
 });
 
 test("do not show message seen indicator on the last message seen by everyone when the current user is not author of the message", async () => {
@@ -217,7 +217,7 @@ test("do not show message seen indicator on all the messages of the current user
     await start();
     await openDiscuss(channelId);
     await contains(".o-mail-Message:has(:text('Message before last seen'))", {
-        contains: [".o-mail-Message-seenContainer", { contains: [".fa-check", { count: 0 }] }],
+        contains: [".o-mail-Message-seenContainer", { contains: ["[data-icon='check']", { count: 0 }] }],
     });
 });
 
@@ -255,7 +255,7 @@ test("all seen indicator in chat displayed only once (chat created by correspond
     await start();
     await openDiscuss(channelId);
     await contains(".o-mail-Message", { count: 2 });
-    await contains(".o-mail-MessageSeenIndicator.o-hasEveryoneSeen .fa-check", { count: 2 });
+    await contains(".o-mail-MessageSeenIndicator.o-hasEveryoneSeen [data-icon='check']", { count: 2 });
 });
 
 test("no seen indicator in 'channel' channels (with is_typing)", async () => {
@@ -302,10 +302,10 @@ test("no seen indicator in 'channel' channels (with is_typing)", async () => {
     await start();
     await openDiscuss(channelId);
     await contains(".o-mail-Message:has(:text('channel-msg'))");
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 0 }); // none in channel
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 0 }); // none in channel
     await click(".o-mail-DiscussSidebarChannel-itemName:text('Demo User')");
     await contains(".o-mail-Message:has(:text('chat-msg'))");
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 0 }); // not seen in chat
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 0 }); // not seen in chat
     // simulate channel read by Demo User in both threads
     await withUser(demoUserId, () =>
         rpc("/discuss/channel/mark_as_read", {
@@ -332,10 +332,10 @@ test("no seen indicator in 'channel' channels (with is_typing)", async () => {
             is_typing: true,
         })
     );
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 2 }); // seen in chat
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 2 }); // seen in chat
     await click(".o-mail-DiscussSidebarChannel-itemName:text('test-channel')");
     await contains(".o-mail-Message:has(:text('channel-msg'))");
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 0 }); // none in channel
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 0 }); // none in channel
 });
 
 test("Show everyone seen title on message seen indicator", async () => {
@@ -452,5 +452,5 @@ test("Show seen indicator on message with only attachment", async () => {
     await start();
     await openDiscuss(channelId);
     await contains(".o-mail-MessageSeenIndicator");
-    await contains(".o-mail-MessageSeenIndicator .fa-check", { count: 2 });
+    await contains(".o-mail-MessageSeenIndicator [data-icon='check']", { count: 2 });
 });
diff --git a/addons/mail/static/tests/discuss/core/web/command_palette.test.js b/addons/mail/static/tests/discuss/core/web/command_palette.test.js
index bd922283e9cc0e..4d40d86a67d8fa 100644
--- a/addons/mail/static/tests/discuss/core/web/command_palette.test.js
+++ b/addons/mail/static/tests/discuss/core/web/command_palette.test.js
@@ -22,7 +22,7 @@ test("can open DM from @username in command palette", async () => {
     triggerHotkey("control+k");
     await insertText(".o_command_palette_search input", "@");
     await insertText("input[placeholder='Search a conversation']", "Mario");
-    await click(".o_command.focused:has(.oi-user):text('Mario')");
+    await click(".o_command.focused:has([data-icon='person']):text('Mario')");
     await contains(".o-mail-ChatWindow:text('Mario')");
 });
 
@@ -50,13 +50,13 @@ test("can open channel from @channel_name in command palette", async () => {
     triggerHotkey("control+k");
     await insertText(".o_command_palette_search input", "@");
     await contains(".o_command", { count: 6 });
-    await contains(".o_command:eq(0):has(.fa-hashtag):text('project')");
-    await contains(".o_command:eq(1):has(.fa-hashtag):text('general')");
-    await contains(".o_command:has(.oi-user):text('OdooBot')");
-    await contains(".o_command:has(.oi-user):text('Mitchell Admin')"); // self-conversation
+    await contains(".o_command:eq(0):has([data-icon='tag']):text('project')");
+    await contains(".o_command:eq(1):has([data-icon='tag']):text('general')");
+    await contains(".o_command:has([data-icon='person']):text('OdooBot')");
+    await contains(".o_command:has([data-icon='person']):text('Mitchell Admin')"); // self-conversation
     await contains(".o_command:text('Create Channel')");
     await contains(".o_command:text('Create Chat')");
-    await click(".o_command.focused:has(.fa-hashtag):text('project')");
+    await click(".o_command.focused:has([data-icon='tag']):text('project')");
     await contains(".o-mail-ChatWindow:text('project')");
 });
 
diff --git a/addons/mail/static/tests/discuss/core/web/discuss.test.js b/addons/mail/static/tests/discuss/core/web/discuss.test.js
index 841e133c4f8083..4031acd3928f94 100644
--- a/addons/mail/static/tests/discuss/core/web/discuss.test.js
+++ b/addons/mail/static/tests/discuss/core/web/discuss.test.js
@@ -217,9 +217,9 @@ test("no conversation selected when opening non-existing channel in discuss", as
     await start();
     await openDiscuss(200); // non-existing id
     await contains("h4:text('No conversation selected.')");
-    await contains(".o-mail-DiscussSidebarCategory-channel .oi-chevron-down");
+    await contains(".o-mail-DiscussSidebarCategory-channel [data-icon='keyboard_arrow_down']");
     await click(".o-mail-DiscussSidebar .btn:text('Channels')"); // check no crash
-    await contains(".o-mail-DiscussSidebarCategory-channel .oi-chevron-right");
+    await contains(".o-mail-DiscussSidebarCategory-channel [data-icon='chevron_forward']");
 });
 
 test("can access portal partner profile from avatar popover", async () => {
diff --git a/addons/mail/static/tests/discuss/typing/typing.test.js b/addons/mail/static/tests/discuss/typing/typing.test.js
index 60854332d79c51..61c26044b7a152 100644
--- a/addons/mail/static/tests/discuss/typing/typing.test.js
+++ b/addons/mail/static/tests/discuss/typing/typing.test.js
@@ -674,7 +674,7 @@ test("[text composer] chat: correspondent is typing", async () => {
     await start();
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarChannel .o-mail-ThreadIcon");
-    await contains(".fa-circle.text-success");
+    await contains("[data-icon='circle'].text-success");
     // simulate receive typing notification from demo "is typing"
     withUser(userId, () =>
         rpc("/discuss/channel/notify_typing", {
@@ -690,7 +690,7 @@ test("[text composer] chat: correspondent is typing", async () => {
             is_typing: false,
         })
     );
-    await contains(".fa-circle.text-success");
+    await contains("[data-icon='circle'].text-success");
 });
 
 test.tags("html composer");
@@ -714,7 +714,7 @@ test("chat: correspondent is typing", async () => {
     composerService.setHtmlComposer();
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarChannel .o-mail-ThreadIcon");
-    await contains(".fa-circle.text-success");
+    await contains("[data-icon='circle'].text-success");
     withUser(userId, () =>
         rpc("/discuss/channel/notify_typing", {
             channel_id: channelId,
@@ -728,7 +728,7 @@ test("chat: correspondent is typing", async () => {
             is_typing: false,
         })
     );
-    await contains(".fa-circle.text-success");
+    await contains("[data-icon='circle'].text-success");
 });
 
 test("[text composer] chat: correspondent is typing in chat window", async () => {
diff --git a/addons/mail/static/tests/discuss_app/discuss.test.js b/addons/mail/static/tests/discuss_app/discuss.test.js
index 842a35017762cf..ab1f1527b387c3 100644
--- a/addons/mail/static/tests/discuss_app/discuss.test.js
+++ b/addons/mail/static/tests/discuss_app/discuss.test.js
@@ -361,7 +361,7 @@ test("sidebar: chat im_status rendering", async () => {
         contains: [".o-mail-ThreadIcon[title='User is offline']"],
     });
     await contains(".o-mail-DiscussSidebarChannel:has(:text('Partner2'))", {
-        contains: [".fa-circle.text-success"],
+        contains: ["[data-icon='circle'].text-success"],
     });
     await contains(".o-mail-DiscussSidebarChannel:has(:text('Partner3'))", {
         contains: [".o-mail-ThreadIcon[title='User is idle']"],
@@ -624,7 +624,7 @@ test("sidebar: Inbox should have icon", async () => {
     pyEnv["res.users"].write(serverState.userId, { notification_type: "inbox" });
     await start();
     await openDiscuss("mail.box_inbox");
-    await contains("button:has(:text('Inbox'))", { contains: [".fa-inbox"] });
+    await contains("button:has(:text('Inbox'))", { contains: ["[data-icon='inbox']"] });
 });
 
 test("last discuss conversation is remembered", async () => {
@@ -1861,10 +1861,10 @@ test("Thread avatar is not editable in DM chat", async () => {
     await start();
     await openDiscuss(groupChatId);
     await contains(".o-mail-DiscussContent-threadName[title='GroupChat']");
-    await contains(".o-mail-DiscussContent-threadAvatar .fa-pencil");
+    await contains(".o-mail-DiscussContent-threadAvatar [data-icon='edit']");
     await click(".o-mail-DiscussSidebar-item:contains('Demo')");
     await contains(".o-mail-DiscussContent-threadName[title='Demo']");
-    await contains(".o-mail-DiscussContent-threadAvatar .fa-pencil", { count: 0 });
+    await contains(".o-mail-DiscussContent-threadAvatar [data-icon='edit']", { count: 0 });
 });
 
 test("Do not trigger channel name server update when it is unchanged", async () => {
@@ -2021,7 +2021,7 @@ test("warning on send with shortcut when attempting to post message with still-u
     await insertText(".o-mail-Composer-input", "Dummy Message");
     await editInput(document.body, ".o-mail-Composer input[type=file]", [file]);
     await contains(
-        ".o-mail-AttachmentContainer.o-isUploading:contains(text.txt) .fa.fa-circle-o-notch"
+        ".o-mail-AttachmentContainer.o-isUploading:contains(text.txt) [data-icon='autorenew']"
     );
     await contains(".o-mail-Composer button[title='Send']:disabled");
     await press("Enter"); // Try to send message
@@ -2038,7 +2038,7 @@ test("[text composer] Can post message with only attachment", async () => {
     const file = new File(["hello, world"], "text.txt", { type: "text/plain" });
     await editInput(document.body, ".o-mail-Composer input[type=file]", [file]);
     await contains(
-        ".o-mail-AttachmentContainer:not(.o-isUploading):contains('text.txt'):not(:has(.fa.fa-circle-o-notch))"
+        ".o-mail-AttachmentContainer:not(.o-isUploading):contains('text.txt'):not(:has([data-icon='autorenew']))"
     );
     await press("Enter");
     await contains(".o-mail-Message");
@@ -2059,7 +2059,7 @@ test("Can post message with only attachment", async () => {
     const file = new File(["hello, world"], "text.txt", { type: "text/plain" });
     await editInput(document.body, ".o-mail-Composer input[type=file]", [file]);
     await contains(
-        ".o-mail-AttachmentContainer:not(.o-isUploading):contains('text.txt'):not(:has(.fa.fa-circle-o-notch))"
+        ".o-mail-AttachmentContainer:not(.o-isUploading):contains('text.txt'):not(:has([data-icon='autorenew']))"
     );
     await press("Enter");
     await contains(".o-mail-Message");
@@ -2253,10 +2253,10 @@ test("sidebar: cannot leave channel with group_ids", async () => {
     ]);
     await start();
     await openDiscuss();
-    await click(".o-mail-DiscussSidebarChannel:text(General) .oi-ellipsis-h");
+    await click(".o-mail-DiscussSidebarChannel:text(General) [data-icon='more_horiz']");
     await waitFor(".dropdown-item:text(Notification Settings)"); // check anything else in the dropdown
     await waitForNone(".dropdown-item:text(Leave Channel)");
-    await click(".o-mail-DiscussSidebarChannel:text(Special) .oi-ellipsis-h");
+    await click(".o-mail-DiscussSidebarChannel:text(Special) [data-icon='more_horiz']");
     await waitFor(".dropdown-item:text(Leave Channel)");
 });
 
diff --git a/addons/mail/static/tests/discuss_app/inbox.test.js b/addons/mail/static/tests/discuss_app/inbox.test.js
index 57b018f29fcd68..0b37e9837a6271 100644
--- a/addons/mail/static/tests/discuss_app/inbox.test.js
+++ b/addons/mail/static/tests/discuss_app/inbox.test.js
@@ -736,8 +736,8 @@ test("show thread priority in Inbox", async () => {
     });
     await start();
     await openDiscuss("mail.box_inbox");
-    await contains(".o-mail-Message-header .fa-star", { count: 2 });
-    await contains(".o-mail-Message-header .fa-star-o");
+    await contains(".o-mail-Message-header [data-icon='star'].oi-filled", { count: 2 });
+    await contains(".o-mail-Message-header [data-icon='star']:not(.oi-filled)");
 });
 
 test("show thread priority with only 1 or 0 star", async () => {
@@ -789,6 +789,6 @@ test("show thread priority with only 1 or 0 star", async () => {
     ]);
     await start();
     await openDiscuss("mail.box_inbox");
-    await contains(".o-mail-Message-header .fa-star");
-    await contains(".o-mail-Message-header .fa-star-o");
+    await contains(".o-mail-Message-header [data-icon='star'].oi-filled");
+    await contains(".o-mail-Message-header [data-icon='star']:not(.oi-filled)");
 });
diff --git a/addons/mail/static/tests/discuss_app/sidebar.test.js b/addons/mail/static/tests/discuss_app/sidebar.test.js
index 82bbc2921f22c3..5d98609416b196 100644
--- a/addons/mail/static/tests/discuss_app/sidebar.test.js
+++ b/addons/mail/static/tests/discuss_app/sidebar.test.js
@@ -175,25 +175,25 @@ test("Category fold is locally persistent (saved in local storage)", async () =>
     setDiscussSidebarCategoryFoldState("chats", true);
     await start();
     await openDiscuss();
-    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i.oi-chevron-right");
+    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i[data-icon='chevron_forward']");
     await click(".o-mail-DiscussSidebarCategory-toggler:contains('Channels')");
-    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i.oi-chevron-down");
-    await contains(".o-mail-DiscussSidebarCategory:contains('Direct messages') i.oi-chevron-right"); // unchanged
+    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i[data-icon='keyboard_arrow_down']");
+    await contains(".o-mail-DiscussSidebarCategory:contains('Direct messages') i[data-icon='chevron_forward']"); // unchanged
     expect(isDiscussSidebarCategoryFolded("channels")).toBe(false);
     expect(isDiscussSidebarCategoryFolded("chats")).toBe(true); // unchanged
     await click(".o-mail-DiscussSidebarCategory-toggler:contains('Channels')");
-    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i.oi-chevron-right");
-    await contains(".o-mail-DiscussSidebarCategory:contains('Direct messages') i.oi-chevron-right"); // unchanged
+    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i[data-icon='chevron_forward']");
+    await contains(".o-mail-DiscussSidebarCategory:contains('Direct messages') i[data-icon='chevron_forward']"); // unchanged
     expect(isDiscussSidebarCategoryFolded("channels")).toBe(true);
     expect(isDiscussSidebarCategoryFolded("chats")).toBe(true); // unchanged
     await click(".o-mail-DiscussSidebarCategory-toggler:contains('Direct messages')");
-    await contains(".o-mail-DiscussSidebarCategory:contains('Direct messages') i.oi-chevron-down");
-    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i.oi-chevron-right"); // unchanged
+    await contains(".o-mail-DiscussSidebarCategory:contains('Direct messages') i[data-icon='keyboard_arrow_down']");
+    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i[data-icon='chevron_forward']"); // unchanged
     expect(isDiscussSidebarCategoryFolded("channels")).toBe(true); // unchanged
     expect(isDiscussSidebarCategoryFolded("chats")).toBe(false);
     await click(".o-mail-DiscussSidebarCategory-toggler:contains('Channels')");
-    await contains(".o-mail-DiscussSidebarCategory:contains('Direct messages') i.oi-chevron-down");
-    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i.oi-chevron-down");
+    await contains(".o-mail-DiscussSidebarCategory:contains('Direct messages') i[data-icon='keyboard_arrow_down']");
+    await contains(".o-mail-DiscussSidebarCategory:contains('Channels') i[data-icon='keyboard_arrow_down']");
     expect(isDiscussSidebarCategoryFolded("channels")).toBe(false);
     expect(isDiscussSidebarCategoryFolded("chats")).toBe(false);
 });
@@ -207,17 +207,17 @@ test("Category fold is crosstab synced", async () => {
     await openDiscuss(undefined, { target: env1 });
     await openDiscuss(undefined, { target: env2 });
     await contains(
-        `${env1.selector} .o-mail-DiscussSidebarCategory:contains('Channels') i.oi-chevron-right`
+        `${env1.selector} .o-mail-DiscussSidebarCategory:contains('Channels') i[data-icon='chevron_forward']`
     );
     await contains(
-        `${env2.selector} .o-mail-DiscussSidebarCategory:contains('Channels') i.oi-chevron-right`
+        `${env2.selector} .o-mail-DiscussSidebarCategory:contains('Channels') i[data-icon='chevron_forward']`
     );
     await click(`${env2.selector} .o-mail-DiscussSidebarCategory-toggler:contains('Channels')`);
     await contains(
-        `${env1.selector} .o-mail-DiscussSidebarCategory:contains('Channels') i.oi-chevron-down`
+        `${env1.selector} .o-mail-DiscussSidebarCategory:contains('Channels') i[data-icon='keyboard_arrow_down']`
     );
     await contains(
-        `${env2.selector} .o-mail-DiscussSidebarCategory:contains('Channels') i.oi-chevron-down`
+        `${env2.selector} .o-mail-DiscussSidebarCategory:contains('Channels') i[data-icon='keyboard_arrow_down']`
     );
 });
 
@@ -409,7 +409,7 @@ test("channel - counter: should not have a counter if the category is unfolded a
     await start();
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarCategory", {
-        contains: [["i.oi.oi-chevron-down"], ["span:text('Channels')"], [".badge", { count: 0 }]],
+        contains: [["i.oi[data-icon='keyboard_arrow_down']"], ["span:text('Channels')"], [".badge", { count: 0 }]],
     });
 });
 
@@ -446,7 +446,7 @@ test("channel - counter: should not have a counter if the category is unfolded a
     await start();
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarCategory", {
-        contains: [["i.oi.oi-chevron-down"], ["span:text('Channels')"], [".badge", { count: 0 }]],
+        contains: [["i.oi[data-icon='keyboard_arrow_down']"], ["span:text('Channels')"], [".badge", { count: 0 }]],
     });
 });
 
@@ -457,7 +457,7 @@ test("channel - counter: should not have a counter if category is folded and wit
     await start();
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarCategory", {
-        contains: [["i.oi.oi-chevron-right"], ["span:text('Channels')"], [".badge", { count: 0 }]],
+        contains: [["i.oi[data-icon='chevron_forward']"], ["span:text('Channels')"], [".badge", { count: 0 }]],
     });
 });
 
@@ -495,7 +495,7 @@ test("channel - counter: should have correct value of needaction threads if cate
     await start();
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarCategory", {
-        contains: [["i.oi.oi-chevron-right"], ["span:text('Channels')"], [".badge:text('2')"]],
+        contains: [["i.oi[data-icon='chevron_forward']"], ["span:text('Channels')"], [".badge:text('2')"]],
     });
 });
 
@@ -511,7 +511,7 @@ test("chat - counter: should not have a counter if the category is unfolded and
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarCategory", {
         contains: [
-            ["i.oi.oi-chevron-down"],
+            ["i.oi[data-icon='keyboard_arrow_down']"],
             ["span:text('Direct messages')"],
             [".badge", { count: 0 }],
         ],
@@ -533,7 +533,7 @@ test("chat - counter: should not have a counter if the category is unfolded and
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarCategory", {
         contains: [
-            ["i.oi.oi-chevron-down"],
+            ["i.oi[data-icon='keyboard_arrow_down']"],
             ["span:text('Direct messages')"],
             [".badge", { count: 0 }],
         ],
@@ -553,7 +553,7 @@ test("chat - counter: should not have a counter if category is folded and withou
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarCategory", {
         contains: [
-            ["i.oi.oi-chevron-right"],
+            ["i.oi[data-icon='chevron_forward']"],
             ["span:text('Direct messages')"],
             [".badge", { count: 0 }],
         ],
@@ -601,7 +601,7 @@ test("chat - counter: should have correct value of unread threads if category is
     await openDiscuss();
     await contains(".o-mail-DiscussSidebarCategory", {
         contains: [
-            ["i.oi.oi-chevron-right"],
+            ["i.oi[data-icon='chevron_forward']"],
             ["span:text('Direct messages')"],
             [".badge:text('2')"],
         ],
@@ -708,7 +708,7 @@ test("sidebar: public channel rendering", async () => {
     });
     await start();
     await openDiscuss();
-    await contains("button:text('channel1')", { contains: [".fa-globe"] });
+    await contains("button:text('channel1')", { contains: ["[data-icon='public']"] });
 });
 
 test("channel - avatar: should have correct avatar", async () => {
@@ -758,7 +758,7 @@ test("channel - states: the active category item should be visible even if the c
     await click("button:text('channel1')");
     await contains(".o-mail-DiscussSidebarChannel-container:text('channel1')");
     await click(".o-mail-DiscussSidebarCategory .btn:text('Channels')");
-    await contains(".o-mail-DiscussSidebarCategory-channel .oi-chevron-right");
+    await contains(".o-mail-DiscussSidebarCategory-channel [data-icon='chevron_forward']");
     await contains("button:text('channel1')");
     await click("button:text('Inbox')");
     await contains("button:text('channel1')", { count: 0 });
@@ -770,15 +770,15 @@ test("chat - states: the active category item should be visible even if the cate
     pyEnv["discuss.channel"].create({ channel_type: "chat" });
     await start();
     await openDiscuss();
-    await contains(".o-mail-DiscussSidebarCategory-chat .oi-chevron-down");
+    await contains(".o-mail-DiscussSidebarCategory-chat [data-icon='keyboard_arrow_down']");
     await contains(".o-mail-DiscussSidebar button:text('Mitchell Admin')");
     await click("button:text('Mitchell Admin')");
     await contains("button.o-active:text('Mitchell Admin')");
     await click(".o-mail-DiscussSidebarCategory-chat .btn:text('Direct messages')");
-    await contains(".o-mail-DiscussSidebarCategory-chat .oi-chevron-right");
+    await contains(".o-mail-DiscussSidebarCategory-chat [data-icon='chevron_forward']");
     await contains(".o-mail-DiscussSidebar button:text('Mitchell Admin')");
     await click("button:text('Inbox')");
-    await contains(".o-mail-DiscussSidebarCategory-chat .oi-chevron-right");
+    await contains(".o-mail-DiscussSidebarCategory-chat [data-icon='chevron_forward']");
     await contains(".o-mail-DiscussSidebar button:text('Mitchell Admin')", { count: 0 });
 });
 
@@ -1070,14 +1070,14 @@ test("sidebar: show loading on initial opening", async () => {
     await start();
     await openDiscuss();
     await contains(
-        ".o-mail-DiscussSidebarCategory:contains('Channels') .fa.fa-circle-o-notch.fa-spin"
+        ".o-mail-DiscussSidebarCategory:contains('Channels') [data-icon='autorenew'].oi-spin"
     );
     await contains(".o-mail-DiscussSidebarChannel-itemName:text('General')", { count: 0 });
     await expect.waitForSteps(["before channels_as_member"]);
     def.resolve();
     await waitStoreFetch("channels_as_member");
     await contains(
-        ".o-mail-DiscussSidebarCategory:contains('Channels') .fa.fa-circle-o-notch.fa-spin",
+        ".o-mail-DiscussSidebarCategory:contains('Channels') [data-icon='autorenew'].oi-spin",
         { count: 0 }
     );
     await contains(".o-mail-DiscussSidebarChannel-itemName:text('General')");
@@ -1256,9 +1256,9 @@ test("add and remove channel from favorites updates sidebar", async () => {
     const generalChannelSelector = ".o-mail-DiscussSidebarChannel:has(:text(General))";
     await start();
     await openDiscuss();
-    await click(`${channelContainerSelector} ${generalChannelSelector} button .oi-ellipsis-h`);
+    await click(`${channelContainerSelector} ${generalChannelSelector} button [data-icon='more_horiz']`);
     await click(".o-dropdown-item:contains('Add to Favorites')");
-    await click(`${favoriteContainerSelector} ${generalChannelSelector} button .oi-ellipsis-h`);
+    await click(`${favoriteContainerSelector} ${generalChannelSelector} button [data-icon='more_horiz']`);
     await click(".o-dropdown-item:contains('Remove from Favorites')");
     await contains(`${channelContainerSelector} ${generalChannelSelector}`);
 });
@@ -1270,15 +1270,15 @@ test("sidebar category toggle is visually disabled when no visible channels", as
     await start();
     await openDiscuss();
     await click(
-        ".o-mail-DiscussSidebarCategory-toggler:enabled:contains('Channels') i.oi-chevron-right"
+        ".o-mail-DiscussSidebarCategory-toggler:enabled:contains('Channels') i[data-icon='chevron_forward']"
     );
     await contains(
-        ".o-mail-DiscussSidebarCategory-toggler:enabled:contains('Channels') i.oi-chevron-down"
+        ".o-mail-DiscussSidebarCategory-toggler:enabled:contains('Channels') i[data-icon='keyboard_arrow_down']"
     );
     await click("[title='Channel Actions']");
     await click(".o-dropdown-item:text('Hide Until New Message')");
     await contains(
-        ".o-mail-DiscussSidebarCategory-toggler:disabled:contains('Channels') i.oi-chevron-right"
+        ".o-mail-DiscussSidebarCategory-toggler:disabled:contains('Channels') i[data-icon='chevron_forward']"
     );
 });
 
diff --git a/addons/mail/static/tests/gif_picker/gif_picker.test.js b/addons/mail/static/tests/gif_picker/gif_picker.test.js
index 9b6983715b9336..fdc042a7998cb4 100644
--- a/addons/mail/static/tests/gif_picker/gif_picker.test.js
+++ b/addons/mail/static/tests/gif_picker/gif_picker.test.js
@@ -223,8 +223,8 @@ test("Add GIF to favorite", async () => {
     await openDiscuss(channelId);
     await click("button[title='Send GIF']");
     await click("img[data-src='https://media.tenor.com/6uIlQAHIkNoAAAAM/cry.gif']");
-    await click(":nth-child(1 of div) > .o-discuss-Gif .fa-star-o");
-    await contains(".o-discuss-Gif .fa-star");
+    await click(":nth-child(1 of div) > .o-discuss-Gif [data-icon='star']");
+    await contains(".o-discuss-Gif [data-icon='star'].oi-filled");
     await click("i[aria-label='back']");
     await click(".o-discuss-GifPicker div[aria-label='list-item']:text('Favorites')");
     await contains(".o-discuss-Gif");
diff --git a/addons/mail/static/tests/inline/html_mail_field.test.js b/addons/mail/static/tests/inline/html_mail_field.test.js
index c8e7d8aeef5d21..b46170516a7e42 100644
--- a/addons/mail/static/tests/inline/html_mail_field.test.js
+++ b/addons/mail/static/tests/inline/html_mail_field.test.js
@@ -121,7 +121,7 @@ test("HtmlMail don't have access to column commands", async function () {
 test("HtmlMail add icon and save inline html", async function () {
     enableTransitions();
     useCustomStyleRules(
-        `.test-icon-inline .note-editable .fa {
+        `.test-icon-inline .note-editable .oi {
             color: rgb(55,65,81) !important;
             background-color: rgb(249,250,251) !important;
         }
@@ -132,7 +132,7 @@ test("HtmlMail add icon and save inline html", async function () {
     );
     onRpc("web_save", ({ args }) => {
         expect(args[1].body).toBe(
-            `<p style="border-radius:0px;border-style:none;padding:0px;margin:0px 0 16px 0;box-sizing:border-box;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;border-top-width:0px;border-left-color:#ff0000;border-bottom-color:#ff0000;border-right-color:#ff0000;border-top-color:#ff0000;"><span style="display: inline-block; width: 14px; height: 14px; vertical-align: text-bottom;" class="oe_unbreakable "><img width="14" height="14" src="/mail/font_to_img/61440/rgb(55%2C65%2C81)/rgb(249%2C250%2C251)/14x14" data-class="fa fa-glass" data-style="null" style="border-radius:0px;border-style:none;padding:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;border-top-width:0px;border-left-color:#ff0000;border-bottom-color:#ff0000;border-right-color:#ff0000;border-top-color:#ff0000;box-sizing: border-box; line-height: 14px; width: 14px; height: 14px; vertical-align: unset; margin: 0px;"></span>first</p>`
+            `<p style="border-radius:0px;border-style:none;padding:0px;margin:0px 0 16px 0;box-sizing:border-box;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;border-top-width:0px;border-left-color:#ff0000;border-bottom-color:#ff0000;border-right-color:#ff0000;border-top-color:#ff0000;"><span style="display: inline-block; width: 14px; height: 14px; vertical-align: text-bottom;" class="oe_unbreakable "><img width="14" height="14" src="/mail/font_to_img/61440/rgb(55%2C65%2C81)/rgb(249%2C250%2C251)/14x14" data-class="oi" data-icon="local_bar" data-style="null" style="border-radius:0px;border-style:none;padding:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;border-top-width:0px;border-left-color:#ff0000;border-bottom-color:#ff0000;border-right-color:#ff0000;border-top-color:#ff0000;box-sizing: border-box; line-height: 14px; width: 14px; height: 14px; vertical-align: unset; margin: 0px;"></span>first</p>`
         );
         expect.step("web_save");
     });
@@ -150,7 +150,7 @@ test("HtmlMail add icon and save inline html", async function () {
     await press("enter");
 
     await contains("button.nav-link:contains('Icons')").click();
-    await contains("span.fa-glass").click();
+    await contains("span[data-icon='local_bar']").click();
 
     await clickSave();
     await expect.waitForSteps(["web_save"]);
diff --git a/addons/mail/static/tests/message/link_preview.test.js b/addons/mail/static/tests/message/link_preview.test.js
index 819ac0d7bed99b..b64f48f6d9a225 100644
--- a/addons/mail/static/tests/message/link_preview.test.js
+++ b/addons/mail/static/tests/message/link_preview.test.js
@@ -444,12 +444,12 @@ test("youtube and gdrive videos URL are embed", async () => {
     ]);
     await start();
     await openDiscuss(channelId);
-    await click(".o-mail-LinkPreviewVideo[data-provider=google-drive] .fa-play");
+    await click(".o-mail-LinkPreviewVideo[data-provider=google-drive] [data-icon='play_arrow']");
     await contains(
         "iframe[data-src='https://drive.google.com/file/d/195a8fSNxwmkfs9sDS7OCB2nX03iFr21P/preview']",
         { parent: [".o-mail-LinkPreviewVideo[data-provider=google-drive]"] }
     );
-    await click(".o-mail-LinkPreviewVideo[data-provider=youtube] .fa-play");
+    await click(".o-mail-LinkPreviewVideo[data-provider=youtube] [data-icon='play_arrow']");
     await contains("iframe[data-src='https://www.youtube.com/embed/9bZkp7q19f0?autoplay=1']", {
         parent: [".o-mail-LinkPreviewVideo[data-provider=youtube]"],
     });
diff --git a/addons/mail/static/tests/message/message.test.js b/addons/mail/static/tests/message/message.test.js
index d12bacfae15a93..99759b5b8f3f43 100644
--- a/addons/mail/static/tests/message/message.test.js
+++ b/addons/mail/static/tests/message/message.test.js
@@ -200,7 +200,7 @@ test("Edit message (mobile)", async () => {
     await click(".o-mail-Message [title='Expand']");
     await click(".o-dropdown-item:contains('Edit')");
     await insertText(".o-mail-Message .o-mail-Composer-input", "edited message", { replace: true });
-    await click(".o-mail-Message .fa-paper-plane-o");
+    await click(".o-mail-Message [data-icon='send']");
     await contains(".o-mail-Message-content:text('edited message (edited)')");
 });
 
@@ -1140,18 +1140,18 @@ test("add and remove bookmark from message", async () => {
     await openDiscuss(channelId);
     await contains(".o-mail-Message");
     await contains(".o-mail-Message [title='Bookmark']");
-    await contains(".o-mail-Message [title='Bookmark']" + " i.fa-bookmark-o");
+    await contains(".o-mail-Message [title='Bookmark']" + " i[data-icon='bookmark']:not(.oi-filled)");
     await contains("button:has(:text('Bookmarks'))", { contains: [".badge", { count: 0 }] });
     await click(".o-mail-Message [title='Bookmark']");
     await contains("button:has(:text('Bookmarks'))", { contains: [".badge:text('1')"] });
     await waitStoreFetch([["add_bookmark", { message_id: messageId }]]);
     await contains(".o-mail-Message");
-    await contains(".o-mail-Message [title='Remove from Bookmarks']" + " i.fa-bookmark");
+    await contains(".o-mail-Message [title='Remove from Bookmarks']" + " i[data-icon='bookmark'].oi-filled");
     await click(".o-mail-Message [title='Remove from Bookmarks']");
     await contains("button:has(:text('Bookmarks'))", { contains: [".badge", { count: 0 }] });
     await waitStoreFetch([["remove_bookmark", { message_id: messageId }]]);
     await contains(".o-mail-Message");
-    await contains(".o-mail-Message [title='Bookmark']" + " i.fa-bookmark-o");
+    await contains(".o-mail-Message [title='Bookmark']" + " i[data-icon='bookmark']:not(.oi-filled)");
 });
 
 test("can bookmark a persistent message without thread", async () => {
@@ -1258,11 +1258,11 @@ test("Notification Sent", async () => {
     await contains(".o-mail-Message");
     await contains(".o-mail-Message-notification");
     await contains(".o-mail-Message-notification i");
-    expect(".o-mail-Message-notification i:first").toHaveClass("fa-envelope-o");
+    expect(".o-mail-Message-notification i:first").toHaveAttribute("data-icon", "mail");
     await click(".o-mail-Message-notification");
     await contains(".o-mail-MessageNotificationPopover");
     await contains(".o-mail-MessageNotificationPopover i");
-    expect(".o-mail-MessageNotificationPopover i:first").toHaveClass("fa-check");
+    expect(".o-mail-MessageNotificationPopover i:first").toHaveAttribute("data-icon", "check");
     await contains(".o-mail-MessageNotificationPopover:text('Someone')");
 });
 
@@ -1289,10 +1289,10 @@ test("Notification Error", async () => {
     await contains(".o-mail-Message");
     await contains(".o-mail-Message-notification");
     await contains(".o-mail-Message-notification i");
-    expect(".o-mail-Message-notification i:first").toHaveClass("fa-envelope");
+    expect(".o-mail-Message-notification i:first").toHaveAttribute("data-icon", "mail");
     await click(".o-mail-Message-notification").then(() => {});
     await contains(".o-mail-MessageNotificationPopover");
-    expect(".o-mail-MessageNotificationPopover i.fa-times.text-danger").toHaveCount(1);
+    expect(".o-mail-MessageNotificationPopover i[data-icon='close'].text-danger").toHaveCount(1);
 });
 
 test("click on notification icon opens recipients list when no recipient", async () => {
@@ -2325,7 +2325,7 @@ test("Prettify message links", async () => {
     );
     await press("Enter");
     await contains(".o-mail-Message:has(:text('TestPartner'))");
-    await contains(".o-mail-Message .fa.fa-comment");
+    await contains(".o-mail-Message .oi[data-icon='chat_bubble']");
     await contains(".o-mail-Message:has(:text('" + url(`/mail/message/100`) + "'))");
 });
 
diff --git a/addons/mail/static/tests/message/message_reply.test.js b/addons/mail/static/tests/message/message_reply.test.js
index 51ce288f4b4268..cb9f2b1faf4049 100644
--- a/addons/mail/static/tests/message/message_reply.test.js
+++ b/addons/mail/static/tests/message/message_reply.test.js
@@ -242,7 +242,7 @@ test("Replying to a message containing attachments should display an attachment
     });
     await start();
     await openDiscuss(channelId);
-    await contains(".o-mail-MessageInReply .fa-file");
+    await contains(".o-mail-MessageInReply [data-icon='description']");
 });
 
 test("reply with only attachment shows parent message context", async () => {
diff --git a/addons/mail/static/tests/messaging_menu/messaging_menu.test.js b/addons/mail/static/tests/messaging_menu/messaging_menu.test.js
index 0403dd585ac808..82c31af711a8cf 100644
--- a/addons/mail/static/tests/messaging_menu/messaging_menu.test.js
+++ b/addons/mail/static/tests/messaging_menu/messaging_menu.test.js
@@ -44,7 +44,7 @@ test("should have messaging menu button in systray", async () => {
     await start();
     await contains(".o_menu_systray i[aria-label='Messages']");
     await contains(".o-mail-MessagingMenu", { count: 0 });
-    await contains(".o_menu_systray i[aria-label='Messages'].fa-comments");
+    await contains(".o_menu_systray i[aria-label='Messages'].oi-filled[data-icon='forum']");
 });
 
 test("messaging menu should have topbar buttons", async () => {
@@ -243,7 +243,7 @@ test("installation of the PWA request can be dismissed", async () => {
     browser.dispatchEvent(new CustomEvent("beforeinstallprompt"));
     await expect.waitForSteps(["getItem pwaService.installationState"]);
     await click(".o_menu_systray i[aria-label='Messages']");
-    await click(".o-mail-NotificationItem .oi-close");
+    await click(".o-mail-NotificationItem [data-icon='close_small']");
     await expect.waitForSteps([
         "getItem pwaService.installationState",
         'installationState value:  {"/odoo":"dismissed"}',
@@ -638,7 +638,7 @@ test("basic rendering", async () => {
         "show"
     );
     await contains(".o_menu_systray i[aria-label='Messages']");
-    await contains('.o_menu_systray i[aria-label="Messages"].fa-comments');
+    await contains('.o_menu_systray i[aria-label="Messages"].oi-filled[data-icon="forum"]');
     await contains(".o-mail-MessagingMenu", { count: 0 });
     await click(".o_menu_systray .dropdown-toggle:has(i[aria-label='Messages'])");
     await contains('.o_menu_systray .dropdown:has(i[aria-label="Messages"]).show');
@@ -912,14 +912,14 @@ test("Attachment-only message preview shows file type icon", async () => {
         {
             mimetype: "audio/mpeg",
             name: "voicemessage",
-            icon: "fa-microphone",
+            icon: "mic",
             text: "Voice Message",
             voice_ids: [Command.create({ display_name: "voicemessage" })],
         },
-        { mimetype: "video/mp4", name: "Video.mp4", icon: "fa-video-camera", text: "Video.mp4" },
-        { mimetype: "application/pdf", name: "File.pdf", icon: "fa-file", text: "File.pdf" },
-        { mimetype: "image/jpeg", name: "Image.jpeg", icon: "fa-picture-o", text: "Image.jpeg" },
-        { mimetype: "audio/mpeg", name: "Audio.mp3", icon: "fa-headphones", text: "Audio.mp3" },
+        { mimetype: "video/mp4", name: "Video.mp4", icon: "videocam", text: "Video.mp4" },
+        { mimetype: "application/pdf", name: "File.pdf", icon: "description", text: "File.pdf" },
+        { mimetype: "image/jpeg", name: "Image.jpeg", icon: "image", text: "Image.jpeg" },
+        { mimetype: "audio/mpeg", name: "Audio.mp3", icon: "headphones", text: "Audio.mp3" },
     ];
 
     pyEnv["mail.message"].create(
@@ -941,15 +941,15 @@ test("Attachment-only message preview shows file type icon", async () => {
     );
     await start();
     await click(".o_menu_systray i[aria-label='Messages']");
-    await contains(".o-mail-NotificationItem:eq(0) i.fa-microphone");
+    await contains(".o-mail-NotificationItem:eq(0) i[data-icon='mic']");
     await contains(".o-mail-NotificationItem:eq(0):has(:text('Partner1: Voice Message'))");
-    await contains(".o-mail-NotificationItem:eq(1) i.fa-video-camera");
+    await contains(".o-mail-NotificationItem:eq(1) i[data-icon='videocam']");
     await contains(".o-mail-NotificationItem:eq(1):has(:text('Partner2: Video.mp4'))");
-    await contains(".o-mail-NotificationItem:eq(2) i.fa-file");
+    await contains(".o-mail-NotificationItem:eq(2) i[data-icon='description']");
     await contains(".o-mail-NotificationItem:eq(2):has(:text('Partner3: File.pdf'))");
-    await contains(".o-mail-NotificationItem:eq(3) i.fa-picture-o");
+    await contains(".o-mail-NotificationItem:eq(3) i[data-icon='image']");
     await contains(".o-mail-NotificationItem:eq(3):has(:text('Partner4: Image.jpeg'))");
-    await contains(".o-mail-NotificationItem:eq(4) i.fa-headphones");
+    await contains(".o-mail-NotificationItem:eq(4) i[data-icon='headphones']");
     await contains(".o-mail-NotificationItem:eq(4):has(:text('Partner5: Audio.mp3'))");
 });
 
diff --git a/addons/mail/static/tests/mobile/mobile.test.js b/addons/mail/static/tests/mobile/mobile.test.js
index 292ac737b73e64..de88bf0534a8f5 100644
--- a/addons/mail/static/tests/mobile/mobile.test.js
+++ b/addons/mail/static/tests/mobile/mobile.test.js
@@ -58,12 +58,12 @@ test("show loading on initial opening", async () => {
     patchUiSize({ size: SIZES.SM });
     await start();
     await click(".o_menu_systray i[aria-label='Messages']");
-    await contains(".o-mail-MessagingMenu .fa.fa-circle-o-notch.fa-spin");
+    await contains(".o-mail-MessagingMenu [data-icon='autorenew'].oi-spin");
     await contains(".o-mail-NotificationItem:text('General')", { count: 0 });
     await expect.waitForSteps(["before channels_as_member"]);
     def.resolve();
     await waitStoreFetch("channels_as_member");
-    await contains(".o-mail-MessagingMenu .fa.fa-circle-o-notch.fa-spin", { count: 0 });
+    await contains(".o-mail-MessagingMenu [data-icon='autorenew'].oi-spin", { count: 0 });
     await contains(".o-mail-NotificationItem:text('General')");
 });
 
@@ -87,7 +87,7 @@ test("enter key should create a newline in composer", async () => {
     await insertText(".o-mail-Composer-input", "Test\n");
     await press("Enter");
     await insertText(".o-mail-Composer-input", "Other");
-    await click(".fa-paper-plane-o");
+    await click("[data-icon='send']");
     await contains(".o-mail-Message-body:has(br)", { textContent: "TestOther" });
 });
 
diff --git a/addons/mail/static/tests/mock_server/mock_models/mail_activity_type.js b/addons/mail/static/tests/mock_server/mock_models/mail_activity_type.js
index 693a261be296d5..532bbfc673e197 100644
--- a/addons/mail/static/tests/mock_server/mock_models/mail_activity_type.js
+++ b/addons/mail/static/tests/mock_server/mock_models/mail_activity_type.js
@@ -6,20 +6,20 @@ export class MailActivityType extends models.ServerModel {
     _records = [
         {
             id: 1,
-            icon: "fa-envelope",
+            icon: "mail",
             name: "Email",
             active: true,
         },
         {
             id: 2,
             category: "phonecall",
-            icon: "fa-phone",
+            icon: "phone",
             name: "Call",
             active: true,
         },
         {
             id: 28,
-            icon: "fa-upload",
+            icon: "upload",
             name: "Upload Document",
             active: true,
         },
diff --git a/addons/mail/static/tests/mock_server/mock_models/res_users.js b/addons/mail/static/tests/mock_server/mock_models/res_users.js
index 8078ec40fce5e5..c8943239cee6c1 100644
--- a/addons/mail/static/tests/mock_server/mock_models/res_users.js
+++ b/addons/mail/static/tests/mock_server/mock_models/res_users.js
@@ -111,7 +111,7 @@ export class ResUsers extends webModels.ResUsers {
             userActivitiesByModelName[modelName]["total_count"] += 1;
             userActivitiesByModelName[modelName].actions = [
                 {
-                    icon: "fa-clock-o",
+                    icon: "schedule",
                     name: "Summary",
                 },
             ];
@@ -199,7 +199,7 @@ export class ResUsers extends webModels.ResUsers {
             userActivitiesByModelName[modelName]["total_count"] += 1;
             userActivitiesByModelName[modelName].actions = [
                 {
-                    icon: "fa-clock-o",
+                    icon: "schedule",
                     name: "Summary",
                 },
             ];
diff --git a/addons/mail/static/tests/poll/poll.test.js b/addons/mail/static/tests/poll/poll.test.js
index c6c757c5ebc48f..31965664109e1e 100644
--- a/addons/mail/static/tests/poll/poll.test.js
+++ b/addons/mail/static/tests/poll/poll.test.js
@@ -19,7 +19,7 @@ test("can add emojis to a poll option", async () => {
     await click(".o-mail-Composer button[title='More Actions']");
     await click(".o-dropdown-item:text('Start a Poll')");
     await contains(".modal-header:text('Create a poll')");
-    await click(".o-mail-CreatePollOptionDialog:first .fa-smile-o");
+    await click(".o-mail-CreatePollOptionDialog:first [data-icon='sentiment_satisfied']");
     await click(".o-Emoji:contains('😀')");
     await contains(".o-mail-CreatePollOptionDialog input:eq(0)", { value: "😀" });
 });
diff --git a/addons/mail/static/tests/scheduled_message/scheduled_message.test.js b/addons/mail/static/tests/scheduled_message/scheduled_message.test.js
index 43ed2e87efc5bb..0f7d102fdacf78 100644
--- a/addons/mail/static/tests/scheduled_message/scheduled_message.test.js
+++ b/addons/mail/static/tests/scheduled_message/scheduled_message.test.js
@@ -51,11 +51,11 @@ test("Scheduled messages basic layout", async () => {
     await contains(".o-mail-Message-body em:text('Subject: Greetings')");
     await contains(".o-mail-Message-body p:text('Hello There')");
     await contains(".o-mail-Message-bubble.bg-success-light");
-    await contains(".o-mail-Scheduled-Message-buttons .fa-pencil");
-    await contains(".o-mail-Scheduled-Message-buttons .fa-times");
+    await contains(".o-mail-Scheduled-Message-buttons [data-icon='edit']");
+    await contains(".o-mail-Scheduled-Message-buttons [data-icon='close']");
     await click(".o-mail-ScheduledMessagesList > .cursor-pointer");
     await contains(".o-mail-Scheduled-Message", { count: 0 });
-    await contains(".o-mail-ScheduledMessagesList .fa-caret-right + span:text('1')");
+    await contains(".o-mail-ScheduledMessagesList [data-icon='arrow_right'] + span:text('1')");
 });
 
 test("Scheduled messages are ordered by scheduled date", async () => {
diff --git a/addons/mail/static/tests/suggestion/suggestion.test.js b/addons/mail/static/tests/suggestion/suggestion.test.js
index 5abb9cfb74634f..aec8c32bacc46e 100644
--- a/addons/mail/static/tests/suggestion/suggestion.test.js
+++ b/addons/mail/static/tests/suggestion/suggestion.test.js
@@ -544,15 +544,15 @@ test("[text composer] mention a channel thread", async () => {
     await contains(".o-mail-Composer-input", { value: "" });
     await insertText(".o-mail-Composer-input", "#");
     await contains(".o-mail-Composer-suggestion", { count: 2 });
-    await contains(".o-mail-Composer-suggestion:eq(0):has(i.fa-hashtag):text('General')");
+    await contains(".o-mail-Composer-suggestion:eq(0):has(i[data-icon='tag']):text('General')");
     await contains(
-        ".o-mail-Composer-suggestion:eq(1):has(i.fa-comments-o):text('GeneralThreadOne')"
+        ".o-mail-Composer-suggestion:eq(1):has(i[data-icon='forum']):text('GeneralThreadOne')"
     );
     await click(".o-mail-Composer-suggestion:eq(1)");
     await contains(".o-mail-Composer-input", { value: "#General > ThreadOne " });
     await press("Enter");
     await contains(
-        ".o-mail-Message a.o_channel_redirect:has(i.fa-comments-o):text('General > ThreadOne')"
+        ".o-mail-Message a.o_channel_redirect:has(i[data-icon='forum']):text('General > ThreadOne')"
     );
     await click("a.o_channel_redirect:text('General > ThreadOne')");
     await contains(".o-mail-DiscussSidebar-item.o-active:text('ThreadOne')");
@@ -585,13 +585,13 @@ test("mention a channel thread", async () => {
     await contains(".o-mail-Composer-html.odoo-editor-editable");
     await htmlInsertText(editor, "#");
     await contains(".o-mail-Composer-suggestion", { count: 2 });
-    await contains(".o-mail-Composer-suggestion:eq(0):has(i.fa-hashtag):text('General')");
+    await contains(".o-mail-Composer-suggestion:eq(0):has(i[data-icon='tag']):text('General')");
     await contains(
-        ".o-mail-Composer-suggestion:eq(1):has(i.fa-comments-o):text('GeneralThreadOne')"
+        ".o-mail-Composer-suggestion:eq(1):has(i[data-icon='forum']):text('GeneralThreadOne')"
     );
     await click(".o-mail-Composer-suggestion:eq(0)");
     await contains(
-        ".o-mail-Composer-html.odoo-editor-editable a.o_channel_redirect:has(i.fa-hashtag):text('General')"
+        ".o-mail-Composer-html.odoo-editor-editable a.o_channel_redirect:has(i[data-icon='tag']):text('General')"
     );
     await press("Enter");
     await contains(".o-mail-Message a.o_channel_redirect:text('General')");
@@ -599,17 +599,17 @@ test("mention a channel thread", async () => {
     await focus(".o-mail-Composer-html.odoo-editor-editable");
     await htmlInsertText(editor, "#");
     await contains(".o-mail-Composer-suggestion", { count: 2 });
-    await contains(".o-mail-Composer-suggestion:eq(0):has(i.fa-hashtag):text('General')");
+    await contains(".o-mail-Composer-suggestion:eq(0):has(i[data-icon='tag']):text('General')");
     await contains(
-        ".o-mail-Composer-suggestion:eq(1):has(i.fa-comments-o):text('GeneralThreadOne')"
+        ".o-mail-Composer-suggestion:eq(1):has(i[data-icon='forum']):text('GeneralThreadOne')"
     );
     await click(".o-mail-Composer-suggestion:eq(1)");
     await contains(
-        ".o-mail-Composer-html.odoo-editor-editable a.o_channel_redirect:has(i.fa-comments-o):text('General > ThreadOne')"
+        ".o-mail-Composer-html.odoo-editor-editable a.o_channel_redirect:has(i[data-icon='forum']):text('General > ThreadOne')"
     );
     await press("Enter");
     await contains(
-        ".o-mail-Message a.o_channel_redirect:has(i.fa-comments-o):text('General > ThreadOne')"
+        ".o-mail-Message a.o_channel_redirect:has(i[data-icon='forum']):text('General > ThreadOne')"
     );
     await click("a.o_channel_redirect:text('General > ThreadOne')");
     await contains(".o-mail-DiscussSidebar-item.o-active:text('ThreadOne')");
diff --git a/addons/mail/static/tests/thread/attachment_list.test.js b/addons/mail/static/tests/thread/attachment_list.test.js
index c50058e16afb13..b200764dcce48c 100644
--- a/addons/mail/static/tests/thread/attachment_list.test.js
+++ b/addons/mail/static/tests/thread/attachment_list.test.js
@@ -427,7 +427,7 @@ test("download url of non-viewable binary file", async () => {
     });
     await start();
     await openDiscuss(channelId);
-    await contains(".fa-download");
+    await contains("[data-icon='download']");
 
     patchWithCleanup(download, {
         _download: (options) => {
@@ -436,7 +436,7 @@ test("download url of non-viewable binary file", async () => {
             );
         },
     });
-    await click(".fa-download");
+    await click("[data-icon='download']");
 });
 
 test("check actions in mobile view", async () => {
diff --git a/addons/mail/static/tests/thread/file_upload.test.js b/addons/mail/static/tests/thread/file_upload.test.js
index 927e5a40b98e37..22a817c5d68030 100644
--- a/addons/mail/static/tests/thread/file_upload.test.js
+++ b/addons/mail/static/tests/thread/file_upload.test.js
@@ -54,6 +54,6 @@ test("Attachment shows spinner during upload", async () => {
     await openDiscuss(channelId);
     await inputFiles(".o-mail-Composer input[type=file]", [text2]);
     await contains(
-        ".o-mail-AttachmentContainer.o-isUploading:contains(text2.txt) .fa-circle-o-notch"
+        ".o-mail-AttachmentContainer.o-isUploading:contains(text2.txt) [data-icon='autorenew']"
     );
 });
diff --git a/addons/mail/static/tests/thread/thread.test.js b/addons/mail/static/tests/thread/thread.test.js
index de4ee511f16dc7..1b47558bfa19bf 100644
--- a/addons/mail/static/tests/thread/thread.test.js
+++ b/addons/mail/static/tests/thread/thread.test.js
@@ -525,10 +525,10 @@ test("basic rendering of canceled notification", async () => {
     });
     await start();
     await openDiscuss(channelId);
-    await contains(".o-mail-Message-notification .fa-envelope-o");
+    await contains(".o-mail-Message-notification [data-icon='mail']");
     await click(".o-mail-Message-notification");
     await contains(".o-mail-MessageNotificationPopover");
-    await contains(".o-mail-MessageNotificationPopover .fa-trash-o");
+    await contains(".o-mail-MessageNotificationPopover [data-icon='delete']");
     await contains(".o-mail-MessageNotificationPopover:text('Someone (test@test.be)')");
 });
 
diff --git a/addons/mail/static/tests/tours/discuss_channel_as_guest_tour.js b/addons/mail/static/tests/tours/discuss_channel_as_guest_tour.js
index 528ec7f5863e9b..2c4696d8d93a56 100644
--- a/addons/mail/static/tests/tours/discuss_channel_as_guest_tour.js
+++ b/addons/mail/static/tests/tours/discuss_channel_as_guest_tour.js
@@ -36,7 +36,7 @@ registry.category("web_tour.tours").add("discuss_channel_as_guest_tour.js", {
         },
         {
             trigger:
-                ".o-mail-DiscussCommand:not(:has(.fa-user)):has(.fa-hashtag):text(Test channel)",
+                ".o-mail-DiscussCommand:not(:has([data-icon='person'])):has([data-icon='tag']):text(Test channel)",
         },
     ],
 });
diff --git a/addons/mail/static/tests/tours/mail_poll_tour.js b/addons/mail/static/tests/tours/mail_poll_tour.js
index 3725c0cad12920..2c0fb2969dd8cd 100644
--- a/addons/mail/static/tests/tours/mail_poll_tour.js
+++ b/addons/mail/static/tests/tours/mail_poll_tour.js
@@ -37,7 +37,7 @@ registry.category("web_tour.tours").add("mail_poll_tour.js", {
         },
         {
             trigger:
-                ".o-mail-MessageInReply:contains('What is your favorite color?') .oi-view-cohort",
+                ".o-mail-MessageInReply:contains('What is your favorite color?') [data-icon='oi_view-cohort']",
         },
         { trigger: ".o-mail-PollOption:contains('Blue') input", run: "click" },
         { trigger: ".o-mail-Poll button:contains('Vote'):enabled", run: "click" },
diff --git a/addons/mail/static/tests/widgets/activity_widget.test.js b/addons/mail/static/tests/widgets/activity_widget.test.js
index 9e08731954c9de..3b63a4c334b408 100644
--- a/addons/mail/static/tests/widgets/activity_widget.test.js
+++ b/addons/mail/static/tests/widgets/activity_widget.test.js
@@ -44,14 +44,14 @@ test("list activity widget with no activity", async () => {
         arch: `<list><field name="activity_ids" widget="list_activity"/></list>`,
     });
     await expect.waitForSteps(["web_search_read"]);
-    await contains(".o-mail-ActivityButton i.fa-clock-o");
+    await contains(".o-mail-ActivityButton i[data-icon='schedule']");
     await contains(".o-mail-ListActivity-summary", { textContent: "" });
 });
 
 test("list activity widget with activities", async () => {
     const pyEnv = await startServer();
     const [activityTypeId_1, activityTypeId_2] = pyEnv["mail.activity.type"].create([
-        { name: "Type 1", icon: "fa-phone" },
+        { name: "Type 1", icon: "phone" },
         { name: "Type 2" },
     ]);
     const [activityId_1, activityId_2] = pyEnv["mail.activity"].create([
@@ -75,13 +75,13 @@ test("list activity widget with activities", async () => {
     });
     await contains(":nth-child(1 of .o_data_row)", {
         contains: [
-            [".o-mail-ActivityButton i.text-warning.fa-phone"],
+            [".o-mail-ActivityButton i.text-warning[data-icon='phone']"],
             [".o-mail-ListActivity-summary:text('Call with Al')"],
         ],
     });
     await contains(":nth-child(2 of .o_data_row)", {
         contains: [
-            [".o-mail-ActivityButton i.text-success.fa-tasks"],
+            [".o-mail-ActivityButton i.text-success[data-icon='checklist']"],
             [".o-mail-ListActivity-summary:text('Type 2')"],
         ],
     });
@@ -92,21 +92,21 @@ test("list activity widget with exception", async () => {
     const activityId = pyEnv["mail.activity"].create({
         summary: "Call with Al",
         activity_type_id: pyEnv["mail.activity.type"].create({
-            icon: "fa-warning",
+            icon: "warning",
         }),
     });
     pyEnv["res.partner"].write([serverState.partnerId], {
         activity_ids: [activityId],
         activity_state: "today",
         activity_exception_decoration: "warning",
-        activity_exception_icon: "fa-warning",
+        activity_exception_icon: "warning",
     });
     pyEnv["res.users"].write([serverState.userId], { activity_ids: [activityId] });
     await start();
     await openListView("res.users", {
         arch: "<list><field name='activity_ids' widget='list_activity'/></list>",
     });
-    await contains(".o-mail-ActivityButton i.text-warning.fa-warning");
+    await contains(".o-mail-ActivityButton i.text-warning[data-icon='warning']");
     await contains(".o-mail-ListActivity-summary:text('Warning')");
 });
 
@@ -309,7 +309,7 @@ test("list activity exception widget with activity", async () => {
         partner_id: pyEnv["res.partner"].create({
             activity_ids: [activityId_2],
             activity_exception_decoration: "warning",
-            activity_exception_icon: "fa-warning",
+            activity_exception_icon: "warning",
         }),
     });
     await start();
diff --git a/addons/mail/views/discuss_channel_views.xml b/addons/mail/views/discuss_channel_views.xml
index 8803105a8d68f7..b056177f0c261e 100644
--- a/addons/mail/views/discuss_channel_views.xml
+++ b/addons/mail/views/discuss_channel_views.xml
@@ -27,10 +27,10 @@
                             </main>
                             <footer>
                                 <button type="object" invisible="not can_leave" class="btn btn-secondary ms-auto mt-auto" name="action_unfollow">
-                                    <i class="fa fa-sign-out" role="img"></i> Leave
+                                    <i class="oi" data-icon="logout" role="img"></i> Leave
                                 </button>
                                 <button type="object" invisible="not can_join" class="btn btn-primary ms-auto mt-auto" name="channel_join">
-                                    <i class="fa fa-sign-in" role="img"></i> Join
+                                    <i class="oi" data-icon="login" role="img"></i> Join
                                 </button>
                             </footer>
                         </t>
@@ -63,11 +63,11 @@
                 <form string="Mail Channel Form">
                     <header>
                         <button type="object" invisible="not can_join" class="btn btn-primary" name="channel_join">
-                            <i class="fa fa-sign-in" role="img"></i> Join
+                            <i class="oi" data-icon="login" role="img"></i> Join
                         </button>
                         <button type="object" class="btn btn-secondary" name="open_chat_window_action">View</button>
                         <button type="object" invisible="not can_leave" class="btn btn-secondary" name="action_unfollow">
-                            <i class="fa fa-sign-out" role="img"></i> Leave
+                            <i class="oi" data-icon="logout" role="img"></i> Leave
                         </button>
                     </header>
                     <sheet>
diff --git a/addons/mail/views/mail_activity_plan_views.xml b/addons/mail/views/mail_activity_plan_views.xml
index ddaf5ef0ea2c82..37989799a61aa0 100644
--- a/addons/mail/views/mail_activity_plan_views.xml
+++ b/addons/mail/views/mail_activity_plan_views.xml
@@ -95,7 +95,8 @@
                                             <t t-name="card">
                                                 <div class="fw-bold fs-5">
                                                     <i t-if="record.icon.value"
-                                                        t-attf-class="fa #{record.icon.value} fa-fw "
+                                                        class="oi oi-fw"
+                                                        t-att-data-icon="record.icon.value"
                                                         role="img" aria-label="Activity Type" title="Activity Type"/>
                                                     <field name="activity_type_id"/>
                                                 </div>
@@ -130,7 +131,7 @@
                             <field name="name" class="fw-bolder"/>
                             <field name="res_model_id"/>
                             <div>
-                                <i class="fa fa-cogs fa-fw me-2" role="img" aria-label="Steps count" title="Steps count"/>
+                                <i class="oi oi-fw me-2" data-icon="settings_applications" role="img" aria-label="Steps count" title="Steps count"/>
                                 <field name="steps_count"/>
                             </div>
                         </t>
diff --git a/addons/mail/views/mail_activity_views.xml b/addons/mail/views/mail_activity_views.xml
index 22ae5a01afd81d..e3f6b58a1ef881 100644
--- a/addons/mail/views/mail_activity_views.xml
+++ b/addons/mail/views/mail_activity_views.xml
@@ -84,7 +84,7 @@
                 <templates>
                     <t t-name="card">
                         <div class="fw-bold fs-5">
-                            <i t-if="record.icon.value" t-attf-class="fa #{record.icon.value} fa-fw"
+                            <i t-if="record.icon.value" class="oi oi-fw" data-icon="record.icon.value"
                                role="img" aria-label="Activity Type Name" title="Activity Type Name"/>
                             <field name="name"/>
                         </div>
@@ -128,7 +128,7 @@
                 <sheet string="Activity">
                     <div class="oe_button_box" name="button_box" invisible="1">
                         <button name="action_open_document"
-                                type="object" class="oe_link" icon="fa-file-text-o"
+                                type="object" class="oe_link" icon="article"
                                 invisible="not res_model or res_id == 0">
                                 <div class="o_field_widget o_stat_info">
                                     <span class="o_stat_text">Open Document</span>
@@ -161,7 +161,7 @@
                             type="object" class="btn-secondary" data-hotkey="w"
                             context="{'mail_activity_quick_update': True}"/>
                         <button class="btn-secondary" special="cancel" data-hotkey="x"/>
-                        <button string="Delete" type="object" name="unlink" icon="fa-trash" class="btn-danger ms-auto" invisible="not id"/>
+                        <button string="Delete" type="object" name="unlink" icon="delete" icon_class="oi-filled" class="btn-danger ms-auto" invisible="not id"/>
                     </footer>
                 </sheet>
             </form>
@@ -265,10 +265,10 @@
                     decoration-muted="(not active)"
                     default_order="date_deadline" create="true">
                 <header>
-                    <button name="action_done" type="object" string="Done" icon="fa-check"/>
-                    <button name="action_reschedule_today" type="object" string="Today" icon="fa-arrow-down"/>
-                    <button name="action_reschedule_tomorrow" type="object" string="Tomorrow" icon="fa-calendar-plus-o"/>
-                    <button name="action_reschedule_nextweek" type="object" string="Next Week" icon="fa-calendar-o"/>
+                    <button name="action_done" type="object" string="Done" icon="check"/>
+                    <button name="action_reschedule_today" type="object" string="Today" icon="arrow_downward"/>
+                    <button name="action_reschedule_tomorrow" type="object" string="Tomorrow" icon="calendar_add_on"/>
+                    <button name="action_reschedule_nextweek" type="object" string="Next Week" icon="calendar_today"/>
                 </header>
                 <field name="summary" string="Summary"/>
                 <field name="res_name" string="Linked to"/>
@@ -278,7 +278,7 @@
                 <field name="date_done" string="Done Date" optional="hide"/>
                 <field name="feedback" optional="hide"/>
                 <widget name="mail_activity_list_reschedule_dropdown"/>
-                <button name="action_done" type="object" string="Done" icon="fa-check" invisible="active == False"/>
+                <button name="action_done" type="object" string="Done" icon="check" invisible="active == False"/>
             </list>
         </field>
     </record>
@@ -335,7 +335,7 @@
                                 </span>
                                 <field name="summary" class="text-truncate" invisible="res_name"/>
                                 <span class="badge rounded-pill text-bg-300">
-                                    <i t-if="record.icon" t-attf-class="fa {{record.icon.raw_value}} me-1"/>
+                                    <i t-if="record.icon" t-att-title="record.activity_type_id.value" t-attf-class="oi me-1" t-att-data-icon="record.icon.raw_value"/>
                                     <field name="activity_type_id"/>
                                 </span>
                             </div>
@@ -344,7 +344,7 @@
                                 <field name="user_id" widget="many2one_avatar_user" />
                                 <field name="date_deadline" widget="remaining_days" class="ms-2"/>
                                 <button type="object" name="action_done" class="btn btn-link btn-sm ms-auto me-1" invisible="active == False">
-                                    <i class="fa fa-check" /> Done
+                                    <i class="oi" data-icon="check" /> Done
                                 </button>
                             </footer>
                         </main>
diff --git a/addons/mail/views/mail_alias_views.xml b/addons/mail/views/mail_alias_views.xml
index 6a96c04abe657b..91a49261194dcc 100644
--- a/addons/mail/views/mail_alias_views.xml
+++ b/addons/mail/views/mail_alias_views.xml
@@ -16,10 +16,10 @@
                     <sheet>
                         <div class="oe_button_box" name="button_box">
                             <button name="open_document" string="Open Document"
-                                    type="object" class="oe_link" icon="fa-sitemap"
+                                    type="object" class="oe_link" icon="account_tree"
                                     invisible="not alias_model_id or alias_force_thread_id == 0"/>
                             <button name="open_parent_document"
-                                    type="object" class="oe_link" icon="fa-sitemap"
+                                    type="object" class="oe_link" icon="account_tree"
                                     invisible="not alias_parent_model_id or alias_parent_thread_id == 0">
                                     <div class="o_field_widget o_stat_info">
                                         <span class="o_stat_text">Open Parent Document</span>
@@ -82,10 +82,10 @@
                            decoration-warning="alias_status == 'not_tested'"
                            decoration-danger="alias_status == 'invalid'"/>
                     <button name="open_document" type="object"
-                            string="Open Document" icon="fa-sitemap"
+                            string="Open Document" icon="account_tree"
                             invisible="not alias_model_id or alias_force_thread_id == 0"/>
                     <button name="open_parent_document" type="object"
-                            string="Open Owner" icon="fa-sitemap"
+                            string="Open Owner" icon="account_tree"
                             invisible="not alias_parent_model_id or alias_parent_thread_id == 0"/>
                 </list>
             </field>
diff --git a/addons/mail/views/mail_mail_views.xml b/addons/mail/views/mail_mail_views.xml
index d27ffe3386a335..3aaec296cd255f 100644
--- a/addons/mail/views/mail_mail_views.xml
+++ b/addons/mail/views/mail_mail_views.xml
@@ -18,7 +18,7 @@
                         <field name="res_id" invisible="1"/>
                         <div class="oe_button_box" name="button_box">
                             <button name="action_open_document"
-                                    type="object" class="oe_link" icon="fa-file-text-o"
+                                    type="object" class="oe_link" icon="article"
                                     invisible="not model or res_id == 0">
                                     <div class="o_field_widget o_stat_info">
                                         <span class="o_stat_text">Open Document</span>
@@ -32,7 +32,7 @@
                         </div>
                         <div style="vertical-align: top;">
                             by <field name="author_id" class="oe_inline" string="User"/> on <field name="date" readonly="1" class="oe_inline"/>
-                            <button name="%(action_email_compose_message_wizard)d" string="Reply" type="action" icon="fa-reply text-warning"
+                            <button name="%(action_email_compose_message_wizard)d" string="Reply" type="action" icon="reply" icon_class="text-warning"
                                 context="{'default_composition_mode':'comment', 'default_parent_id': mail_message_id_int}" invisible="state not in ('received', 'sent', 'exception', 'cancel')"/>
                         </div>
                         <group>
@@ -104,9 +104,9 @@
                     <field name="message_type" column_invisible="True"/>
                     <field name="state" widget="badge" decoration-muted="state in ('sent', 'cancel')"
                         decoration-info="state=='outgoing'" decoration-danger="state=='exception'"/>
-                    <button name="send" string="Send Now" type="object" icon="fa-paper-plane" invisible="state != 'outgoing' or message_type == 'user_notification'"/>
-                    <button name="mark_outgoing" string="Retry" type="object" icon="fa-repeat" invisible="state not in ('exception', 'cancel')"/>
-                    <button name="cancel" string="Cancel Email" type="object" icon="fa-times-circle" invisible="state != 'outgoing'"/>
+                    <button name="send" string="Send Now" type="object" icon="send" icon_class="oi-filled" invisible="state != 'outgoing' or message_type == 'user_notification'"/>
+                    <button name="mark_outgoing" string="Retry" type="object" icon="redo" invisible="state not in ('exception', 'cancel')"/>
+                    <button name="cancel" string="Cancel Email" type="object" icon="cancel" icon_class="oi-filled" invisible="state != 'outgoing'"/>
                 </list>
             </field>
         </record>
diff --git a/addons/mail/views/mail_message_views.xml b/addons/mail/views/mail_message_views.xml
index fc5c43e9ba5b10..242375e31d4b1a 100644
--- a/addons/mail/views/mail_message_views.xml
+++ b/addons/mail/views/mail_message_views.xml
@@ -27,7 +27,7 @@
                     <sheet>
                         <div class="oe_button_box" name="button_box">
                             <button name="action_open_document"
-                                type="object" class="oe_link" icon="fa-file-text-o"
+                                type="object" class="oe_link" icon="article"
                                 invisible="not model or res_id == 0">
                                 <div class="o_field_widget o_stat_info">
                                     <span class="o_stat_text">Open Document</span>
@@ -150,7 +150,7 @@
                             <aside class="o_kanban_image m-1">
                                 <div class="o_kanban_image_wrapper d-flex align-items-center justify-content-center">
                                     <t t-set="webimage" t-value="new RegExp('image.*(gif|jpeg|jpg|png|webp)').test(record.mimetype.value)"/>
-                                    <div t-if="record.type.raw_value == 'url'" class="fa fa-link fa-3x text-muted" aria-label="Image is a link"/>
+                                    <div t-if="record.type.raw_value == 'url'" class="oi oi-3x text-muted" data-icon="link" aria-label="Image is a link"/>
                                     <img t-elif="webimage" t-attf-src="/web/image/#{record.id.raw_value}" width="100" height="100" alt="Document" class="o_attachment_image"/>
                                     <div t-else="!webimage" class="o_image o_image_thumbnail" t-att-data-mimetype="record.mimetype.value"/>
                                 </div>
@@ -160,7 +160,7 @@
                                     <field name="name" class="text-truncate fw-bold fs-5"/>
                                     <div class="d-flex flex-grow-1 align-items-center">
                                         <t t-if="record.type.raw_value == 'url'">
-                                            <i class="fa fa-globe" aria-label="Document url"/> <field name="url" widget="url"/>
+                                            <i class="oi" data-icon="public" aria-label="Document url"/> <field name="url" widget="url"/>
                                         </t>
                                     </div>
                                     <div class="d-flex">
diff --git a/addons/mail/views/res_config_settings_views.xml b/addons/mail/views/res_config_settings_views.xml
index f7574f40dc4358..aa92d7e750758d 100644
--- a/addons/mail/views/res_config_settings_views.xml
+++ b/addons/mail/views/res_config_settings_views.xml
@@ -16,12 +16,12 @@
                                     <div class="mt8">
                                         <button type="action"
                                         name="%(action_email_server_tree)d"
-                                        string="Incoming Email Servers" icon="oi-arrow-right" class="btn-link"/>
+                                        string="Incoming Email Servers" icon="east" class="btn-link"/>
                                     </div>
                                     <div class="mt8">
                                         <button type="action"
                                         name="%(base.action_ir_mail_server_list)d"
-                                        string="Outgoing Email Servers" icon="oi-arrow-right" class="btn-link"/>
+                                        string="Outgoing Email Servers" icon="east" class="btn-link"/>
                                     </div>
                                 </div>
                             </div>
@@ -64,10 +64,10 @@
                             <setting id="activities_setting" string="Activities" help="Set up activity types and use activity plans to assign multiple activities">
                                 <div class="content-group">
                                     <div class="mt8">
-                                        <button name="%(mail.mail_activity_type_action)d" string="Activity Types" type="action" class="oe_link" icon="oi-arrow-right"/>
+                                        <button name="%(mail.mail_activity_type_action)d" string="Activity Types" type="action" class="oe_link" icon="east"/>
                                     </div>
                                     <div class="mt8">
-                                        <button name="%(mail.mail_activity_plan_action)d" string="Activity Plans" type="action" class="oe_link" icon="oi-arrow-right"/>
+                                        <button name="%(mail.mail_activity_plan_action)d" string="Activity Plans" type="action" class="oe_link" icon="east"/>
                                     </div>
                                 </div>
                             </setting>
@@ -91,7 +91,7 @@
                                 invisible="not use_call_server"
                             >
                                 <div class="content-group">
-                                    <button type="action" name="%(mail.action_ice_servers)d" string="Configure ICE Servers" icon="oi-arrow-right" class="btn-link"/>
+                                    <button type="action" name="%(mail.action_ice_servers)d" string="Configure ICE Servers" icon="east" class="btn-link"/>
                                 </div>
                             </setting>
                             <setting string="Custom SFU Server" help="Set up your own server for large group calls by routing connections centrally" invisible="not use_call_server">
@@ -138,11 +138,11 @@
                             <span class="d-block w-75 py-2">Button Color</span>
                             <field name="email_secondary_color" class="d-block w-25 p-0 m-0" widget="color"/>
                         </div>
-                        <button name="open_email_layout" icon="oi-arrow-right"
+                        <button name="open_email_layout" icon="east"
                             type="object" string="Update Mail Layout"
                             groups="base.group_no_one" class="btn-link"/>
                         <br groups="base.group_no_one"/>
-                        <button name="open_mail_templates" icon="oi-arrow-right" type="object" string="Review All Templates" class="btn-link"/>
+                        <button name="open_mail_templates" icon="east" type="object" string="Review All Templates" class="btn-link"/>
                     </setting>
                 </setting>
             </field>
diff --git a/addons/mail/views/res_partner_views.xml b/addons/mail/views/res_partner_views.xml
index 1d44d81948f879..92450392d04dda 100644
--- a/addons/mail/views/res_partner_views.xml
+++ b/addons/mail/views/res_partner_views.xml
@@ -9,7 +9,7 @@
             <field name="arch" type="xml">
                 <xpath expr="//field[@name='email']" position="before">
                     <field name="is_blacklisted" invisible="1"/>
-                    <button name="mail_action_blacklist_remove" class="fa fa-ban text-danger"
+                    <button name="mail_action_blacklist_remove" class="oi text-danger" data-icon="block"
                         title="This email is blacklisted for mass mailings. Click to unblacklist."
                         type="object" context="{'default_email': email}" groups="base.group_user"
                         invisible="not is_blacklisted"/>
diff --git a/addons/mail/views/res_users_views.xml b/addons/mail/views/res_users_views.xml
index 95d72910d2f0e9..a169541fd6653a 100644
--- a/addons/mail/views/res_users_views.xml
+++ b/addons/mail/views/res_users_views.xml
@@ -39,7 +39,7 @@
                         <label for="out_of_office_from" string="Out-of-office" />
                         <div class="o_row">
                             <field name="out_of_office_from" placeholder="None planned"/>
-                            <i class="fa fa-arrow-right mx-2" invisible="not out_of_office_from" title="to"/>
+                            <i class="oi mx-2" data-icon="arrow_forward" invisible="not out_of_office_from" title="to"/>
                             <field name="out_of_office_to" invisible="not out_of_office_from" placeholder="Forever"/>
                         </div>
                         <field name="out_of_office_message" string="" options="{'height': 112}" class="o_field_border_visible w-100" placeholder="Your out-of-office message..."/>
@@ -72,7 +72,7 @@
                         <label for="out_of_office_from" string="Out-of-office" />
                         <div class="o_row">
                             <field name="out_of_office_from" placeholder="None planned"/>
-                            <i class="fa fa-arrow-right mx-2" invisible="not out_of_office_from" title="to"/>
+                            <i class="oi mx-2" data-icon="arrow_forward" invisible="not out_of_office_from" title="to"/>
                             <field name="out_of_office_to" invisible="not out_of_office_from" placeholder="Forever"/>
                         </div>
                         <field name="out_of_office_message" string="" options="{'height': 112}" class="o_field_border_visible w-100" placeholder="Your out-of-office message..."/>
diff --git a/addons/mail_bot/models/mail_bot.py b/addons/mail_bot/models/mail_bot.py
index 099c1e24eec210..9ce92de52379ad 100644
--- a/addons/mail_bot/models/mail_bot.py
+++ b/addons/mail_bot/models/mail_bot.py
@@ -48,7 +48,7 @@ def _get_style_dict():
             "document_link_end": Markup("</a>"),
             "slides_link_start": Markup("<a href='https://www.odoo.com/slides' target='_blank'>"),
             "slides_link_end": Markup("</a>"),
-            "paperclip_icon": Markup("<i class='fa fa-paperclip' aria-hidden='true'/>"),
+            "paperclip_icon": Markup("<i class='oi' data-icon='attach_file' aria-hidden='true'/>"),
         }
 
     def _get_answer(self, channel, body, values, command=False):
diff --git a/addons/mail_group/views/mail_group_views.xml b/addons/mail_group/views/mail_group_views.xml
index 48cdb2162bb316..9f1168b3526bd7 100644
--- a/addons/mail_group/views/mail_group_views.xml
+++ b/addons/mail_group/views/mail_group_views.xml
@@ -69,15 +69,17 @@
                                 type="action"
                                 context="{'search_default_mail_group_id': id}"
                                 class="oe_stat_button"
-                                icon="fa-users"
+                                icon="group"
+                                icon_class="oi-filled"
                                 help="Members of this group">
                             <field name="member_count" widget="statinfo" string="Members"/>
                         </button>
-                       <button name="%(mail_group.mail_group_message_action)d"
+                        <button name="%(mail_group.mail_group_message_action)d"
                                 type="action"
                                 context="{'search_default_mail_group_id': id}"
                                 class="oe_stat_button"
-                                icon="fa-envelope"
+                                icon="mail"
+                                icon_class="oi-filled"
                                 help="All messages of this group">
                             <field name="mail_group_message_count" widget="statinfo" string="Emails"/>
                         </button>
@@ -85,7 +87,7 @@
                                 type="action"
                                 context="{'search_default_mail_group_id': id, 'search_default_moderation_status': 'pending_moderation'}"
                                 class="oe_stat_button"
-                                icon="fa-commenting-o"
+                                icon="mode_comment"
                                 help="Emails waiting an action for this group"
                                 invisible="not (moderation and mail_group_message_moderation_count != 0)">
                             <field name="mail_group_message_moderation_count" widget="statinfo" string="To Review"/>
@@ -95,7 +97,7 @@
                                 context="{'search_default_mail_group_id': id}"
                                 invisible="not (moderation and moderation_rule_count != 0)"
                                 class="oe_stat_button"
-                                icon="fa-gavel"
+                                icon="gavel"
                                 help="Moderated emails in this group">
                             <field name="moderation_rule_count" widget="statinfo" string="Moderations"/>
                         </button>
@@ -125,7 +127,7 @@
                                                 class="copy_alias_email" options="{'btn_class': 'link'}" string=""/>
                                         </div>
                                     </div>
-                                    <button icon="oi-arrow-right" type="action" name="%(base_setup.action_general_configuration)d"
+                                    <button icon="east" type="action" name="%(base_setup.action_general_configuration)d"
                                             string="Choose or configure a custom domain" class="p-0 btn-link"
                                             invisible="alias_domain_id"/>
                                 </div>
diff --git a/addons/mail_group/views/portal_templates.xml b/addons/mail_group/views/portal_templates.xml
index 83f775fdbf69de..12da9cccc62f2c 100644
--- a/addons/mail_group/views/portal_templates.xml
+++ b/addons/mail_group/views/portal_templates.xml
@@ -20,7 +20,7 @@
             </div>
             <div t-if="mail_groups" class="container mt32">
                 <div t-if="'unsubscribe' in request.params" class="offset-lg-9 col-lg-3 alert alert-info" role="status">
-                    <h5>Need to unsubscribe? <br/>It's right here! <span class="oi fa-2x oi-arrow-down float-end" role="img" aria-label="" title="Read this !"/></h5>
+                    <h5>Need to unsubscribe? <br/>It's right here! <span class="oi oi-2x float-end" data-icon="south" role="img" aria-label="" title="Read this !"/></h5>
                 </div>
                 <t t-foreach="mail_groups" t-as="group_data">
                     <t t-set="group" t-value="group_data['group']"/>
@@ -33,16 +33,16 @@
                                 <strong><a t-attf-href="/groups/#{ slug(group) }" t-out="group.name"/></strong>
                                 <div t-if="group.alias_email and not group.is_closed"
                                     class="d-flex align-items-center ms-3">
-                                    <i class="fa fa-envelope-o me-1" role="img" aria-label="Alias" title="Alias"/>
+                                    <i class="oi me-1" data-icon="mail" role="img" aria-label="Alias" title="Alias"/>
                                     <a class="text-break" t-attf-href="mailto:#{group.alias_email}" t-field="group.alias_email"/>
                                 </div>
                             </div>
                             <div t-field="group.description" class="text-muted d-flex"/>
                         </div>
                         <div class="col-lg-3">
-                            <i class="fa fa-fw fa-user" role="img" aria-label="Recipients" title="Recipients"/> <span class="o_mg_members_count" t-out="group.member_count"/> members<br />
+                            <i class="oi oi-fw oi-filled" data-icon="person" role="img" aria-label="Recipients" title="Recipients"/> <span class="o_mg_members_count" t-out="group.member_count"/> members<br />
                             <t t-if="group.mail_group_message_last_month_count and not group.is_closed">
-                                <i class="fa fa-fw fa-envelope-o" role="img" aria-label="Traffic" title="Traffic"/> <t t-out="group.mail_group_message_last_month_count"/> messages / month
+                                <i class="oi oi-fw" data-icon="mail" role="img" aria-label="Traffic" title="Traffic"/> <t t-out="group.mail_group_message_last_month_count"/> messages / month
                             </t>
                         </div>
                         <div class="col-lg-4">
@@ -114,12 +114,12 @@
                         <div class="row">
                             <h4 t-if="prev_message" t-attf-class="{{'col-lg-6' if next_message else ''}}">
                                 <a t-attf-href="/groups/#{slug(group)}/#{slug(prev_message)}?#{mode and 'mode=%s' % mode or ''}">
-                                    <i class="oi oi-arrow-left" role="img" aria-label="Previous message" title="Previous message"/> <t t-out="prev_message.subject"/>
+                                    <i class="oi" data-icon="west" role="img" aria-label="Previous message" title="Previous message"/> <t t-out="prev_message.subject"/>
                                 </a>
                             </h4>
                             <h4 t-if="next_message" t-attf-class="{{'col-lg-6' if prev_message else ''}} text-end">
                                 <a t-attf-href="/groups/#{slug(group)}/#{slug(next_message)}?#{mode and 'mode=%s' % mode or ''}">
-                                    <t t-out="next_message.subject"/> <i class="oi oi-arrow-right" role="img" aria-label="Next message" title="Next message"/>
+                                    <t t-out="next_message.subject"/> <i class="oi" data-icon="east" role="img" aria-label="Next message" title="Next message"/>
                                 </a>
                             </h4>
                         </div>
@@ -177,10 +177,10 @@
                         <div class="o_mg_link_parent" t-if="group_message_child_ids and (not mode or mode == 'thread')">
                             <p class="mt8">
                                 <a href="#" class="o_mg_link_hide">
-                                    <i class="oi oi-chevron-right" role="img" aria-label="Hide replies" title="Hide replies"/> <t t-out="len(group_message_child_ids)"/> replies
+                                    <i class="oi" data-icon="chevron_forward" role="img" aria-label="Hide replies" title="Hide replies"/> <t t-out="len(group_message_child_ids)"/> replies
                                 </a>
                                 <a href="#" class="o_mg_link_show d-none">
-                                    <i class="oi oi-chevron-down" role="img" aria-label="Show replies" title="Show replies"/> <t t-out="len(group_message_child_ids)"/> replies
+                                    <i class="oi" data-icon="keyboard_arrow_down" role="img" aria-label="Show replies" title="Show replies"/> <t t-out="len(group_message_child_ids)"/> replies
                                 </a>
                             </p>
                             <div class="o_mg_link_content o_mg_replies ms-5 d-none">
@@ -215,10 +215,10 @@
             <t t-set="attachments" t-value="message.attachment_ids"/>
             <p t-if="attachments" class="mt8">
                 <a href="#" class="o_mg_link_hide">
-                    <i class="oi oi-chevron-right" role="img" aria-label="Hide attachments" title="Hide attachments"/> <t t-out="len(attachments)"/> attachments
+                    <i class="oi" data-icon="chevron_forward" role="img" aria-label="Hide attachments" title="Hide attachments"/> <t t-out="len(attachments)"/> attachments
                 </a>
                 <a href="#" class="o_mg_link_show d-none">
-                    <i class="oi oi-chevron-down" role="img" aria-label="Show attachments" title="Show attachments"/> <t t-out="len(attachments)"/> attachments
+                    <i class="oi" data-icon="keyboard_arrow_down" role="img" aria-label="Show attachments" title="Show attachments"/> <t t-out="len(attachments)"/> attachments
                 </a>
             </p>
             <div class="o_mg_link_content d-none row justify-content-center">
@@ -250,7 +250,7 @@
             </span>
             <span class="mx-2">-</span>
             <span>
-                <i class="fa fa-calendar" role="img" aria-label="Date" title="Date"/>
+                <i class="oi oi-filled" data-icon="calendar_today" role="img" aria-label="Date" title="Date"/>
                 <span t-field="message.create_date" t-options="{'widget': 'datetime', 'format': 'hh:mm - d MMM Y'}"/>
             </span>
         </small>
@@ -288,7 +288,7 @@
             <span t-if="group.is_closed" class="ms-2 badge bg-warning">Closed</span>
         </div>
         <h4 class="text-center text-muted" t-if="group.alias_email and not group.is_closed">
-            <i class="fa fa-envelope-o" role="img" aria-label="Alias" title="Alias"/>
+            <i class="oi" data-icon="mail" role="img" aria-label="Alias" title="Alias"/>
             <a class="text-break" t-attf-href="mailto:#{group.alias_email}" t-field="group.alias_email"/>
         </h4>
     </template>
diff --git a/addons/maintenance/data/mail_activity_type_data.xml b/addons/maintenance/data/mail_activity_type_data.xml
index d76bb07a19b8c5..122b6f59abc965 100644
--- a/addons/maintenance/data/mail_activity_type_data.xml
+++ b/addons/maintenance/data/mail_activity_type_data.xml
@@ -5,7 +5,7 @@
     <record id="mail_act_maintenance_request" model="mail.activity.type">
         <field name="name">Maintenance Request</field>
         <field name="summary">Maintenance Request</field>
-        <field name="icon">fa-wrench</field>
+        <field name="icon">build</field>
         <field name="res_model">maintenance.request</field>
     </record>
 </data>
diff --git a/addons/maintenance/static/src/widgets/maintenance_request_state_selection.js b/addons/maintenance/static/src/widgets/maintenance_request_state_selection.js
index 53b4a09f7f6ffc..cc92b46c9fa8a8 100644
--- a/addons/maintenance/static/src/widgets/maintenance_request_state_selection.js
+++ b/addons/maintenance/static/src/widgets/maintenance_request_state_selection.js
@@ -12,11 +12,18 @@ export class MaintenanceRequestStateSelection extends StateSelectionField {
     setup() {
         super.setup();
         this.icons = {
+            normal: "",
+            changes_requested: "error",
+            approved: "",
+            done: "check_circle",
+            cancelled: "cancel",
+        };
+        this.classIcons = {
             normal: "o_status",
-            changes_requested: "fa fa-lg fa-exclamation-circle",
+            changes_requested: "oi-lg",
             approved: "o_status o_status_green",
-            done: "fa fa-lg fa-check-circle",
-            cancelled: "fa fa-lg fa-times-circle",
+            done: "oi-lg oi-filled",
+            cancelled: "oi-lg oi-filled",
         };
         this.colorIcons = {
             normal: "",
@@ -38,6 +45,10 @@ export class MaintenanceRequestStateSelection extends StateSelectionField {
         return this.icons[value] || "";
     }
 
+    stateIconClass(value) {
+        return this.classIcons[value] || "";
+    }
+
     statusColor(value) {
         return this.colorIcons[value] || "";
     }
diff --git a/addons/maintenance/static/src/widgets/maintenance_request_state_selection.scss b/addons/maintenance/static/src/widgets/maintenance_request_state_selection.scss
index f9c3f136c5ec4e..f0e12abc1d20d6 100644
--- a/addons/maintenance/static/src/widgets/maintenance_request_state_selection.scss
+++ b/addons/maintenance/static/src/widgets/maintenance_request_state_selection.scss
@@ -6,7 +6,7 @@
         margin-top: -0.5px;
     }
 
-    .fa-lg {
+    .oi-lg {
         font-size: 1.75em;
         margin-top: -2.5px;
         max-width: 20px;
@@ -19,7 +19,7 @@
 }
 
 .maintenance_request_state_selection_menu {
-    .fa {
+    .oi {
         margin-top: -1.5px;
         font-size: 1.315em;
         vertical-align: -6%;
diff --git a/addons/maintenance/static/src/widgets/maintenance_state_selection.xml b/addons/maintenance/static/src/widgets/maintenance_state_selection.xml
index 894d78f01b06f1..ac3f647f739a01 100644
--- a/addons/maintenance/static/src/widgets/maintenance_state_selection.xml
+++ b/addons/maintenance/static/src/widgets/maintenance_state_selection.xml
@@ -2,7 +2,7 @@
     <t t-name="maintenance.MaintenanceRequestStateSelection" t-inherit="web.StateSelectionField" t-inherit-mode="primary">
         <xpath expr="//Dropdown/button/div" position="replace">
             <div t-if="this.isKanbanOrMobileView" class="d-flex align-items-center" t-att-title="this.label">
-                <i t-attf-class="{{ this.stateIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }}"/>
+                <i t-attf-class="oi {{ this.stateIconClass(this.currentValue) }} {{ this.statusColor(this.currentValue) }}" t-att-data-icon="this.stateIcon(this.currentValue)"/>
             </div>
             <div t-else="" class="d-flex align-items-center">
                 <span class="o_status_label" t-out="this.label"/>
@@ -19,7 +19,8 @@
         </xpath>
 
         <xpath expr="//CheckboxItem/span[1]" position="attributes">
-            <attribute name="t-attf-class" separator=" " add="{{ this.stateIcon(option[0]) }}" remove="o_status"/>
+            <attribute name="t-attf-class" separator=" " add="oi {{ this.stateIconClass(option[0]) }}" remove="o_status"/>
+            <attribute name="t-att-data-icon">this.stateIcon(option[0])</attribute>
         </xpath>
         <xpath expr="//CheckboxItem/span[2]" position="attributes">
             <attribute name="t-attf-class">{{ this.statusColor(option[0]) }}</attribute>
diff --git a/addons/maintenance/views/maintenance_views.xml b/addons/maintenance/views/maintenance_views.xml
index 83c887a0398165..7f5ec1c60685ce 100644
--- a/addons/maintenance/views/maintenance_views.xml
+++ b/addons/maintenance/views/maintenance_views.xml
@@ -356,7 +356,7 @@
                             type="action"
                             class="oe_stat_button"
                             context="{'default_company_id': company_id, 'default_maintenance_team_id': maintenance_team_id}"
-                            icon="fa-wrench">
+                            icon="build">
                             <field string="Maintenance" name="maintenance_count" widget="statinfo"/>
                         </button>
                     </div>
@@ -575,14 +575,14 @@
                 <div class="oe_button_box" name="button_box">
                     <button name="%(hr_equipment_action_from_category_form)d"
                         class="oe_stat_button"
-                        icon="fa-cubes"
+                        icon="inventory_2"
                         type="action">
                         <field string="Equipment" name="equipment_count" widget="statinfo"/>
                     </button>
                     <button name="%(hr_equipment_request_action_link)d"
                         type="action"
                         class="oe_stat_button"
-                        icon="fa-wrench">
+                        icon="build">
                         <field string="Maintenance" name="maintenance_count" widget="statinfo"/>
                     </button>
                 </div>
diff --git a/addons/marketing_card/views/card_campaign_views.xml b/addons/marketing_card/views/card_campaign_views.xml
index 555fbd5ed6f112..67bcdf51697eee 100644
--- a/addons/marketing_card/views/card_campaign_views.xml
+++ b/addons/marketing_card/views/card_campaign_views.xml
@@ -11,7 +11,7 @@
                 </header>
                 <sheet>
                 <div class="oe_button_box" name="button_box">
-                    <button name="action_view_mailings" type="object" icon="fa-envelope">
+                    <button name="action_view_mailings" type="object" icon="mail" icon_class="oi-filled">
                         <div class="o_stat_info">
                             <span class="o_stat_text">
                                 Mailings
@@ -21,7 +21,7 @@
                             </span>
                         </div>
                     </button>
-                    <button icon="fa-mouse-pointer">
+                    <button icon="mouse">
                         <div class="o_stat_info">
                             <span class="o_stat_text">
                                 Clicks
@@ -31,7 +31,7 @@
                             </span>
                         </div>
                     </button>
-                    <button name="action_view_cards" type="object" icon="fa-paper-plane">
+                    <button name="action_view_cards" type="object" icon="send" icon_class="oi-filled">
                         <div class="o_stat_info">
                             <span class="o_stat_text">
                                 Cards
@@ -41,7 +41,7 @@
                             </span>
                         </div>
                     </button>
-                    <button name="action_view_cards_clicked" type="object" icon="fa-eye">
+                    <button name="action_view_cards_clicked" type="object" icon="visibility">
                         <div class="o_stat_info">
                             <span class="o_stat_text">
                                 Opened
@@ -51,7 +51,7 @@
                             </span>
                         </div>
                     </button>
-                    <button name="action_view_cards_shared" type="object" icon="fa-share">
+                    <button name="action_view_cards_shared" type="object" icon="share">
                         <div class="o_stat_info">
                             <span class="o_stat_text">
                                 Shared
@@ -162,13 +162,13 @@
                             <div>
                                 <a type="object" name="action_view_cards_shared" href="#" class="me-1">
                                     <span class="badge rounded-pill">
-                                        <i class="fa fa-fw fa-share" aria-label="Shares" role="img" title="Shares"/>
+                                        <i class="oi oi-fw" data-icon="share" aria-label="Shares" role="img" title="Shares"/>
                                         <field name="card_share_count"/>
                                     </span>
                                 </a>
                                 <a type="object" name="action_view_cards_clicked" href="#" class="me-1">
                                     <span class="badge rounded-pill">
-                                        <i class="fa fa-fw fa-mouse-pointer" aria-label="Clicks" role="img" title="Clicks"/>
+                                        <i class="oi oi-fw" data-icon="mouse"  aria-label="Clicks" role="img" title="Clicks"/>
                                         <field name="target_url_click_count"/>
                                     </span>
                                 </a>
diff --git a/addons/marketing_card/views/card_frontend_templates.xml b/addons/marketing_card/views/card_frontend_templates.xml
index a4d4db803e741c..53f3d0621f79ed 100644
--- a/addons/marketing_card/views/card_frontend_templates.xml
+++ b/addons/marketing_card/views/card_frontend_templates.xml
@@ -23,11 +23,11 @@
                     <h4>Select where to share</h4>
                     <div class="text-start o_no_link_popover">
                         <div id="url-div">
-                            <a class="fa fa-2x fa-facebook rounded m-2" t-attf-href="https://www.facebook.com/sharer/sharer.php?u={{share_url_quoted}}" target="_blank"/>
-                            <a class="fa fa-2x fa-twitter rounded m-2" t-attf-href="https://twitter.com/intent/tweet?url={{share_url_quoted}}{{'&amp;text=%s' % quote(campaign.post_suggestion) if campaign.post_suggestion else ''}}" target="_blank"/>
-                            <a class="fa fa-2x fa-linkedin rounded m-2" t-attf-href="https://www.linkedin.com/sharing/share-offsite/?url={{share_url_quoted}}" target="_blank"/>
-                            <a class="fa fa-2x fa-whatsapp rounded m-2" t-attf-href="https://wa.me/?text={{share_url_quoted}}" target="_blank"/>
-                            <a class="fa fa-2x fa-pinterest rounded m-2" t-attf-href="https://pinterest.com/pin/create/button/?url={{share_url_quoted}}" target="_blank"/>
+                            <a class="oi oi-2x rounded m-2" data-icon="oi_facebook" t-attf-href="https://www.facebook.com/sharer/sharer.php?u={{share_url_quoted}}" target="_blank"/>
+                            <a class="oi oi-2x rounded m-2" data-icon="oi_twitter" t-attf-href="https://twitter.com/intent/tweet?url={{share_url_quoted}}{{'&amp;text=%s' % quote(campaign.post_suggestion) if campaign.post_suggestion else ''}}" target="_blank"/>
+                            <a class="oi oi-2x rounded m-2" data-icon="oi_linkedin" t-attf-href="https://www.linkedin.com/sharing/share-offsite/?url={{share_url_quoted}}" target="_blank"/>
+                            <a class="oi oi-2x rounded m-2" data-icon="oi_whatsapp" t-attf-href="https://wa.me/?text={{share_url_quoted}}" target="_blank"/>
+                            <a class="oi oi-2x rounded m-2" data-icon="oi_pinterest" t-attf-href="https://pinterest.com/pin/create/button/?url={{share_url_quoted}}" target="_blank"/>
                         </div>
                     </div>
                 </div>
diff --git a/addons/mass_mailing/data/mailing_data_templates.xml b/addons/mass_mailing/data/mailing_data_templates.xml
index e86804283293ee..90887bd4b67aa4 100644
--- a/addons/mass_mailing/data/mailing_data_templates.xml
+++ b/addons/mass_mailing/data/mailing_data_templates.xml
@@ -52,7 +52,7 @@
                 <p>
                     A sample of <b><t t-out="mailing.ab_testing_pc"/>% of recipients</b> will receive this version.<br/>
                     <t t-if="total_ab_testing_pc > 100 and mailing.active">
-                        <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"/>
+                        <i class="oi text-danger" data-icon="warning" aria-hidden="true"/>
                         The sum of all percentages for this A/B campaign totals <b class="text-danger"><t t-out="total_ab_testing_pc"/>%</b> of all potential recipients.<br/>
                         <b class="text-danger">Some of the mailings will not be sent</b>, as only 1 email will be sent for each unique recipient in this campaign.
                     </t>
diff --git a/addons/mass_mailing/static/src/builder/mass_mailing_builder.xml b/addons/mass_mailing/static/src/builder/mass_mailing_builder.xml
index 1dd33e9a736f02..11f1bdb94f7a00 100644
--- a/addons/mass_mailing/static/src/builder/mass_mailing_builder.xml
+++ b/addons/mass_mailing/static/src/builder/mass_mailing_builder.xml
@@ -4,10 +4,10 @@
     <Builder t-props="this.builderProps">
         <t t-set-slot="extraActions">
             <button t-if="this.props.toggleCodeView" t-on-click="this.props.toggleCodeView"
-                class="o-hb-btn btn d-flex align-items-center o_codeview_btn" title="Code View" accesskey="d"><i class="fa fa-code"/></button>
+                class="o-hb-btn btn d-flex align-items-center o_codeview_btn" title="Code View" accesskey="d"><i class="oi" data-icon="code"/></button>
             <button t-on-click="this.props.toggleFullScreen"
                 class="o-hb-btn btn btn-primary d-flex align-items-center" title="Fullscreen" accesskey="f">
-                <span t-attf-class="fa fa-expand"/>
+                <span t-attf-class="oi" data-icon="expand_content"/>
             </button>
         </t>
     </Builder>
diff --git a/addons/mass_mailing/static/src/builder/options/alignment_option.xml b/addons/mass_mailing/static/src/builder/options/alignment_option.xml
index c7861dd95849b8..c58e955a7cb703 100644
--- a/addons/mass_mailing/static/src/builder/options/alignment_option.xml
+++ b/addons/mass_mailing/static/src/builder/options/alignment_option.xml
@@ -3,9 +3,9 @@
     <BuilderRow label.translate="Alignment" t-if="!this.isActiveItem('so_width_100')">
         <BuilderButtonGroup>
             <!-- TODO EGGMAIL: investigate how margins behave in email clients -->
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-left'" title.translate="Left" classAction="'me-auto'"/>
-            <BuilderButton icon="'fa-align-center'" title.translate="Center" classAction="'mx-auto'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-right'" title.translate="Right" classAction="'ms-auto'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_left'" title.translate="Left" classAction="'me-auto'"/>
+            <BuilderButton icon="'format_align_center'" title.translate="Center" classAction="'mx-auto'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_right'" title.translate="Right" classAction="'ms-auto'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/mass_mailing/static/src/builder/options/image_tool_option.xml b/addons/mass_mailing/static/src/builder/options/image_tool_option.xml
index 56124c1055eaf5..1b8739a57d3ced 100644
--- a/addons/mass_mailing/static/src/builder/options/image_tool_option.xml
+++ b/addons/mass_mailing/static/src/builder/options/image_tool_option.xml
@@ -25,10 +25,10 @@
         <BuilderRow label.translate="Size">
             <BuilderButtonGroup>
                 <BuilderButton classAction="''" title.translate="Default">1X</BuilderButton>
-                <BuilderButton classAction="'fa-2x'" title.translate="2X Size">2X</BuilderButton>
-                <BuilderButton classAction="'fa-3x'" title.translate="3X Size">3X</BuilderButton>
-                <BuilderButton classAction="'fa-4x'" title.translate="4X Size">4X</BuilderButton>
-                <BuilderButton classAction="'fa-5x'" title.translate="5X Size">5X</BuilderButton>
+                <BuilderButton classAction="'oi-2x'" title.translate="2X Size">2X</BuilderButton>
+                <BuilderButton classAction="'oi-3x'" title.translate="3X Size">3X</BuilderButton>
+                <BuilderButton classAction="'oi-4x'" title.translate="4X Size">4X</BuilderButton>
+                <BuilderButton classAction="'oi-5x'" title.translate="5X Size">5X</BuilderButton>
             </BuilderButtonGroup>
         </BuilderRow>
     </t>
diff --git a/addons/mass_mailing/static/src/builder/options/snippet_visibility_option.inside.scss b/addons/mass_mailing/static/src/builder/options/snippet_visibility_option.inside.scss
index c04d4758244352..acac67aa02c7dd 100644
--- a/addons/mass_mailing/static/src/builder/options/snippet_visibility_option.inside.scss
+++ b/addons/mass_mailing/static/src/builder/options/snippet_visibility_option.inside.scss
@@ -6,8 +6,8 @@ section[data-filter-domain]:not([data-filter-domain="[]"]) {
         pointer-events: none;
         opacity: 50%;
         position: absolute;
-        font-family: "FontAwesome";
-        content: "\f070";
+        font-family: 'material_symbols_sharp';
+        content: "visibility_off";
         font-size: xx-large;
         color: $o-we-color-accent;
     }
diff --git a/addons/mass_mailing/static/src/builder/options/snippet_visibility_option.xml b/addons/mass_mailing/static/src/builder/options/snippet_visibility_option.xml
index ea4bd8535bdbc9..ab6041e2f83e7a 100644
--- a/addons/mass_mailing/static/src/builder/options/snippet_visibility_option.xml
+++ b/addons/mass_mailing/static/src/builder/options/snippet_visibility_option.xml
@@ -10,7 +10,7 @@
             <BuilderRow level="1" label.translate="Domain" extraLabelClass="'align-self-end'">
                 <div t-if="this.state.facets?.length" class="d-flex flex-column">
                     <div class="d-inline-flex align-items-center pt-1" t-foreach="this.state.facets" t-as="facet" t-key="facet_index">
-                        <span class="fa fa-filter pe-1"/>
+                        <span class="oi oi-filled pe-1" data-icon="filter_alt"/>
                         <span t-out="facet"/>
                     </div>
                 </div>
diff --git a/addons/mass_mailing/static/src/builder/options/social_media_links.xml b/addons/mass_mailing/static/src/builder/options/social_media_links.xml
index e48904ace5a4ab..f6d2f4b22c5aef 100644
--- a/addons/mass_mailing/static/src/builder/options/social_media_links.xml
+++ b/addons/mass_mailing/static/src/builder/options/social_media_links.xml
@@ -13,12 +13,13 @@
     <div t-custom-ref="root">
         <BuilderRow t-foreach="this.medias" t-as="media" t-key="media">
             <button class="btn o_drag_handle ps-1" t-att-data-sortable-platform="media">
-                <i class="oi oi-draggable"/>
+                <i class="oi" data-icon="drag_indicator"/>
             </button>
             <BuilderTextInput action="'updateSocialMediaLinks'" actionParam="media" placeholder.translate="www.example.com"/>
             <BuilderButton t-if="media_value.custom"
                         action="'removeCustomMediaLink'" preview="false" actionParam="{ platform: media }"
-                        className="'fa fa-fw fa-minus text-danger bg-transparent border-0'"
+                        icon="'remove'" iconClass="'oi-fw'"
+                        className="'text-danger bg-transparent border-0'"
             />
             <BuilderCheckbox t-else="" action="'toggleSocialMediaLink'"
                             actionParam="{platform: media, getIndex: () => this.getIndex(media)}"
@@ -33,7 +34,7 @@
 
 <t t-name="mass_mailing.social_media_link">
     <a t-att-href="href" target="_blank" t-att-data-platform="platform">
-        <i t-attf-class="fa {{ icon }} fa-stack o_editable_media"/>
+        <i class="oi oi-stack o_editable_media" t-att-data-icon="icon"/>
     </a>
 </t>
 
diff --git a/addons/mass_mailing/static/src/builder/options/social_media_option.xml b/addons/mass_mailing/static/src/builder/options/social_media_option.xml
index b48aab315ea547..6214a09b6fbc8f 100644
--- a/addons/mass_mailing/static/src/builder/options/social_media_option.xml
+++ b/addons/mass_mailing/static/src/builder/options/social_media_option.xml
@@ -11,19 +11,19 @@
     </BuilderRow>
 
     <BuilderRow label.translate="Layout">
-        <BuilderSelect applyTo="'.fa'">
+        <BuilderSelect applyTo="'.oi'">
             <BuilderSelectItem classAction="'rounded shadow-sm'">Square</BuilderSelectItem>
             <BuilderSelectItem classAction="'rounded-empty-circle shadow-sm'">Circle</BuilderSelectItem>
             <BuilderSelectItem classAction="'rounded-circle shadow-sm'">Disk</BuilderSelectItem>
-            <BuilderSelectItem classAction="'fa-stack'">None</BuilderSelectItem>
+            <BuilderSelectItem classAction="'oi-stack'">None</BuilderSelectItem>
         </BuilderSelect>
     </BuilderRow>
 
     <BuilderRow label.translate="Size">
-        <BuilderSelect applyTo="'.fa'">
+        <BuilderSelect applyTo="'.oi'">
             <BuilderSelectItem classAction="'small_social_icon'">Small</BuilderSelectItem>
             <BuilderSelectItem classAction="''">Medium</BuilderSelectItem>
-            <BuilderSelectItem classAction="'fa-2x'">Big</BuilderSelectItem>
+            <BuilderSelectItem classAction="'oi-2x'">Big</BuilderSelectItem>
         </BuilderSelect>
     </BuilderRow>
 
@@ -32,10 +32,10 @@
     </BuilderRow>
 
     <BuilderRow label.translate="Custom Color" t-if="!this.isActiveItem('no_icon_color_opt')">
-        <BuilderColorPicker styleAction="'color'" noTransparency="true" enabledTabs="['solid', 'custom']" applyTo="'.fa'"/>
+        <BuilderColorPicker styleAction="'color'" noTransparency="true" enabledTabs="['solid', 'custom']" applyTo="'.oi'"/>
     </BuilderRow>
     <BuilderRow label.translate="Background Color">
-        <BuilderColorPicker styleAction="'background-color'" noTransparency="true" enabledTabs="['solid', 'custom']" applyTo="'.fa'"/>
+        <BuilderColorPicker styleAction="'background-color'" noTransparency="true" enabledTabs="['solid', 'custom']" applyTo="'.oi'"/>
     </BuilderRow>
 </t>
 
diff --git a/addons/mass_mailing/static/src/builder/plugins/customize_mailing_plugin.js b/addons/mass_mailing/static/src/builder/plugins/customize_mailing_plugin.js
index 1c0f0554976506..b8e982fc250496 100644
--- a/addons/mass_mailing/static/src/builder/plugins/customize_mailing_plugin.js
+++ b/addons/mass_mailing/static/src/builder/plugins/customize_mailing_plugin.js
@@ -160,16 +160,16 @@ export class CustomizeMailingPlugin extends Plugin {
     }
 
     /**
-     * Ensure that FontAwesome icons are not impacted by font-family selectors
+     * Ensure that font icons are not impacted by font-family selectors
      */
     transformFontFamilySelector(selector) {
-        if (selector.trim().endsWith(":not(.fa)")) {
+        if (selector.trim().endsWith(":not(.oi)")) {
             return [selector];
         }
         if (!selector.endsWith("*")) {
-            return [`${selector.trim()}:not(.fa)`, `${selector.trim()} :not(.fa)`];
+            return [`${selector.trim()}:not(.oi)`, `${selector.trim()} :not(.oi)`];
         } else if (RE_SELECTOR_ENDS_WITH_GT_STAR.test(selector)) {
-            return [`${selector.replace(RE_SELECTOR_ENDS_WITH_GT_STAR, "").trim()} :not(.fa)`];
+            return [`${selector.replace(RE_SELECTOR_ENDS_WITH_GT_STAR, "").trim()} :not(.oi)`];
         }
     }
 
diff --git a/addons/mass_mailing/static/src/builder/plugins/customize_mailing_variables.js b/addons/mass_mailing/static/src/builder/plugins/customize_mailing_variables.js
index 0b2bc5cfc0ef0d..5008cc790154dc 100644
--- a/addons/mass_mailing/static/src/builder/plugins/customize_mailing_variables.js
+++ b/addons/mass_mailing/static/src/builder/plugins/customize_mailing_variables.js
@@ -86,7 +86,7 @@ export const CUSTOMIZE_MAILING_VARIABLES = Object.assign(
     generateSimpleMailingVariables("text-container", ["p", "ul"], textContainerProperties),
     generateSimpleMailingVariables(
         "link",
-        ["a:not(.btn):not(:has(.fa, img))", "a.btn.btn-link"],
+        ["a:not(.btn):not(:has(.oi, img))", "a.btn.btn-link"],
         textProperties.filter((prop) => prop !== "font-size")
     ),
     generateSimpleMailingVariables(
diff --git a/addons/mass_mailing/static/src/builder/plugins/social_media_option_plugin.js b/addons/mass_mailing/static/src/builder/plugins/social_media_option_plugin.js
index edb3b6a2915ae5..1b721d58569c02 100644
--- a/addons/mass_mailing/static/src/builder/plugins/social_media_option_plugin.js
+++ b/addons/mass_mailing/static/src/builder/plugins/social_media_option_plugin.js
@@ -13,9 +13,9 @@ const LINK_OPTIONS_CLASSLIST = [
     "rounded-circle",
     "rounded-empty-circle",
     "shadow-sm",
-    "fa-stack",
+    "oi-stack",
     "small_social_icon",
-    "fa-2x",
+    "oi-2x",
 ];
 
 const LINKS_CONTAINER_SELECTOR = ".s_social_media_links";
@@ -111,7 +111,7 @@ export class MassMailingSocialMediaOptionPlugin extends Plugin {
     applyIconsMediaDialogParams(params) {
         if (
             params.node?.nodeType === Node.ELEMENT_NODE &&
-            params.node.matches(".s_social_media .s_social_media_links .fa")
+            params.node.matches(".s_social_media .s_social_media_links .oi")
         ) {
             params.visibleTabs = ["ICONS"];
             return params;
@@ -203,7 +203,7 @@ export class MassMailingSocialMediaOptionPlugin extends Plugin {
         const element = renderToElement("mass_mailing.social_media_link", {
             href: href || "",
             platform,
-            icon: `fa-${iconName}`,
+            icon: `oi_${iconName}`,
         });
         return element;
     }
@@ -370,7 +370,7 @@ export class ToggleSocialMediaLinkAction extends BuilderAction {
         } else {
             sibling.after(newLinkElement);
         }
-        const referenceIcon = sibling?.querySelector(".fa");
+        const referenceIcon = sibling?.querySelector(".oi");
         if (referenceIcon) {
             const backgroundColor = this.styleAction.getValue({
                 editingElement: referenceIcon,
@@ -386,14 +386,14 @@ export class ToggleSocialMediaLinkAction extends BuilderAction {
                     params: { mainParam: className },
                 })
             );
-            const icon = newLinkElement.querySelector(".fa");
+            const icon = newLinkElement.querySelector(".oi");
             if (backgroundColor) {
                 icon.style.backgroundColor = backgroundColor;
             }
             if (color) {
                 icon.style.color = color;
             }
-            icon.classList.remove("fa-stack");
+            icon.classList.remove("oi-stack");
             icon.classList.add(...appliedClasses);
         }
     }
@@ -419,7 +419,7 @@ export class AddSocialMediaLinkAction extends BuilderAction {
             const element = renderToElement("mass_mailing.social_media_link", {
                 href: "https://www.example.com",
                 platform: uniqueId("customLink-"),
-                icon: `fa-home`,
+                icon: "home",
             });
             editingElement.querySelector(LINKS_CONTAINER_SELECTOR).append(element);
         } else {
@@ -431,12 +431,12 @@ export class AddSocialMediaLinkAction extends BuilderAction {
                 href: "https://www.example.com",
                 "data-platform": uniqueId("customLink-"),
             });
-            const icon = cloneEl.querySelector(".fa");
-            const faClassesToRemove = [...icon.classList].filter(
-                (className) => className.startsWith("fa-") && className !== "fa-stack"
+            const icon = cloneEl.querySelector(".oi");
+            const oiClassesToRemove = [...icon.classList].filter(
+                (className) => className.startsWith("oi-") && className !== "oi-stack"
             );
-            icon.classList.remove(...faClassesToRemove);
-            icon.classList.add("fa-home");
+            icon.classList.remove(...oiClassesToRemove);
+            icon.dataset.icon = "home";
         }
     }
 }
diff --git a/addons/mass_mailing/static/src/builder/tabs/design_tab.xml b/addons/mass_mailing/static/src/builder/tabs/design_tab.xml
index 07af9c9b5a14e4..e354675221516d 100644
--- a/addons/mass_mailing/static/src/builder/tabs/design_tab.xml
+++ b/addons/mass_mailing/static/src/builder/tabs/design_tab.xml
@@ -80,9 +80,9 @@
         <BuilderRow label.translate="Link Style" extraLabelClass="'fw-bolder'">
             <BuilderColorPicker noTransparency="true" title.translate="Text Color" enabledTabs="['solid', 'custom']"
                 actionParam="{ variable: `--link-color` }"/>
-            <BuilderButton icon="'fa-fw fa-bold'" actionParam="{ variable: `--link-font-weight` }" actionValue="'bolder'"/>
-            <BuilderButton icon="'fa-fw fa-italic'" actionParam="{ variable: `--link-font-style` }" actionValue="'italic'"/>
-            <BuilderButton icon="'fa-fw fa-underline'" actionParam="{ variable: `--link-text-decoration-line`}" actionValue="'underline'"/>
+            <BuilderButton icon="'format_bold'" iconClass="'oi-fw'" actionParam="{ variable: `--link-font-weight` }" actionValue="'bolder'"/>
+            <BuilderButton icon="'format_italic'" iconClass="'oi-fw'" actionParam="{ variable: `--link-font-style` }" actionValue="'italic'"/>
+            <BuilderButton icon="'format_underlined'" iconClass="'oi-fw'" actionParam="{ variable: `--link-text-decoration-line`}" actionValue="'underline'"/>
         </BuilderRow>
         <BuilderRow label.translate="Font Family" level="1">
             <FontFamilyPicker action="'mass_mailing.CustomizeMailingVariable'" actionParam="{variable: `--link-font-family`}"/>
@@ -102,9 +102,9 @@
         </BuilderRow>
         <BuilderRow>
             <FontFamilyPicker extraClass="'ps-2'" action="'mass_mailing.CustomizeMailingVariable'" actionParam="{variable: `${prefix}font-family`}"/>
-            <BuilderButton icon="'fa-fw fa-bold'" actionParam="{ variable: `${prefix}font-weight` }" actionValue="'bolder'"/>
-            <BuilderButton icon="'fa-fw fa-italic'" actionParam="{ variable: `${prefix}font-style` }" actionValue="'italic'"/>
-            <BuilderButton icon="'fa-fw fa-underline'" actionParam="{ variable: `${prefix}text-decoration-line`}" actionValue="'underline'"/>
+            <BuilderButton icon="'format_bold'" actionParam="{ variable: `${prefix}font-weight` }" actionValue="'bolder'"/>
+            <BuilderButton icon="'format_italic'" actionParam="{ variable: `${prefix}font-style` }" actionValue="'italic'"/>
+            <BuilderButton icon="'format_underlined'" actionParam="{ variable: `${prefix}text-decoration-line`}" actionValue="'underline'"/>
         </BuilderRow>
     </BuilderContext>
 </t>
@@ -124,9 +124,9 @@
         </BuilderRow>
         <BuilderRow label.translate="Font Family" level="1">
             <FontFamilyPicker action="'mass_mailing.CustomizeMailingVariable'" actionParam="{ variable: `${prefix}font-family`}"/>
-            <BuilderButton icon="'fa-fw fa-bold'" actionParam="{ variable: `${prefix}font-weight` }" actionValue="'bolder'"/>
-            <BuilderButton icon="'fa-fw fa-italic'" actionParam="{ variable: `${prefix}font-style` }" actionValue="'italic'"/>
-            <BuilderButton icon="'fa-fw fa-underline'" actionParam="{ variable: `${prefix}text-decoration-line`}" actionValue="'underline'"/>
+            <BuilderButton icon="'format_bold'" actionParam="{ variable: `${prefix}font-weight` }" actionValue="'bolder'"/>
+            <BuilderButton icon="'format_italic'" actionParam="{ variable: `${prefix}font-style` }" actionValue="'italic'"/>
+            <BuilderButton icon="'format_underlined'" actionParam="{ variable: `${prefix}text-decoration-line`}" actionValue="'underline'"/>
         </BuilderRow>
         <BuilderRow label.translate="Border" level="1">
             <BuilderNumberInput actionParam="{ variable: `${prefix}border-width` }" unit="'px'" saveUnit="'px'" min="0"
diff --git a/addons/mass_mailing/static/src/components/mailing_preview_mode_toggle/mailing_preview_mode_toggle.xml b/addons/mass_mailing/static/src/components/mailing_preview_mode_toggle/mailing_preview_mode_toggle.xml
index 1103356833b24e..96c02b81193611 100644
--- a/addons/mass_mailing/static/src/components/mailing_preview_mode_toggle/mailing_preview_mode_toggle.xml
+++ b/addons/mass_mailing/static/src/components/mailing_preview_mode_toggle/mailing_preview_mode_toggle.xml
@@ -5,11 +5,11 @@
         <div class="d-flex gap-1 pb-1" t-if="!this.state.isSmall">
             <button type="button" class="btn py-0 px-1" t-on-click="() => this.onTogglePreviewMode(false)"
                     t-att-class="!this.state.isMobileMode? 'btn-primary' : 'btn-secondary'">
-                <i class="fa fa-desktop" title="Desktop Preview"/>
+                <i class="oi" data-icon="desktop_windows" title="Desktop Preview"/>
             </button>
             <button type="button" class="btn py-0 px-2" t-on-click="() => this.onTogglePreviewMode(true)"
                     t-att-class="this.state.isMobileMode? 'btn-primary' : 'btn-secondary'">
-                <i class="fa fa-lg fa-mobile" title="Mobile Preview"/>
+                <i class="oi oi-lg" data-icon="smartphone" title="Mobile Preview"/>
             </button>
         </div>
     </t>
diff --git a/addons/mass_mailing/static/src/fields/html_field/mass_mailing_html_field.xml b/addons/mass_mailing/static/src/fields/html_field/mass_mailing_html_field.xml
index e383a0e2cafa43..0190ec1bfc5db7 100644
--- a/addons/mass_mailing/static/src/fields/html_field/mass_mailing_html_field.xml
+++ b/addons/mass_mailing/static/src/fields/html_field/mass_mailing_html_field.xml
@@ -10,7 +10,7 @@
                 <div t-if="this.state.showCodeView" t-custom-ref="codeViewButtonRef"
                     class="btn-group o_mass_mailing_code_view">
                     <button class="o_codeview_btn btn btn-primary" t-on-click="this.toggleCodeView" accesskey="d">
-                        <i class="fa fa-code" />
+                        <i class="oi" data-icon="code" />
                     </button>
                 </div>
             </div>
diff --git a/addons/mass_mailing/static/src/scss/mass_mailing_mobile_preview.scss b/addons/mass_mailing/static/src/scss/mass_mailing_mobile_preview.scss
index d50d3dfc5022be..572c7131cd6cd1 100644
--- a/addons/mass_mailing/static/src/scss/mass_mailing_mobile_preview.scss
+++ b/addons/mass_mailing/static/src/scss/mass_mailing_mobile_preview.scss
@@ -26,7 +26,7 @@
                     font-weight: normal;
                     color: inherit;
 
-                    .fa {
+                    .oi {
                         margin-left: $grid-gutter-width/2;
                     }
                 }
diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
index 1b2760b66468fe..70b30b2c8a6c9b 100644
--- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss
+++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss
@@ -66,7 +66,7 @@ div.col:not([align]) {
     }
 
     // Icons
-    .fa {
+    .oi {
         @mixin size($width, $height: $width) {
           width: $width;
           height: $height;
diff --git a/addons/mass_mailing/static/src/snippets/s_rating/000.scss b/addons/mass_mailing/static/src/snippets/s_rating/000.scss
index a3ae05d7983466..015e9de11bb6c3 100644
--- a/addons/mass_mailing/static/src/snippets/s_rating/000.scss
+++ b/addons/mass_mailing/static/src/snippets/s_rating/000.scss
@@ -7,12 +7,12 @@
     $heart: "\f004";
     $heart-o: "\f08a";
     @mixin s_rating_generate_icons($off, $on) {
-        .fa:before {
+        .oi:before {
             content: $off;
         }
         @for $counter from 5 to 0 {
             &.s_rating_#{$counter} {
-                .fa:nth-of-type(-n+#{$counter}):before {
+                .oi:nth-of-type(-n+#{$counter}):before {
                     content: $on;
                 }
             }
@@ -22,7 +22,7 @@
     > .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); }
     > .s_rating_hearts  { @include s_rating_generate_icons($heart-o, $heart);   }
     > .s_rating_bar {
-        .fa {
+        .oi {
             display: none;
         }
         .s_rating_bar {
@@ -49,7 +49,7 @@
             }
         }
     }
-    > .s_rating_1x { .fa { font-size: 1em; }; }
-    > .s_rating_2x { .fa { font-size: 2em; }; }
-    > .s_rating_3x { .fa { font-size: 3em; }; }
+    > .s_rating_1x { .oi { font-size: 1em; }; }
+    > .s_rating_2x { .oi { font-size: 2em; }; }
+    > .s_rating_3x { .oi { font-size: 3em; }; }
 }
diff --git a/addons/mass_mailing/static/src/snippets/s_social_media/000.scss b/addons/mass_mailing/static/src/snippets/s_social_media/000.scss
index 86472f650af73e..3d370a89f40dae 100644
--- a/addons/mass_mailing/static/src/snippets/s_social_media/000.scss
+++ b/addons/mass_mailing/static/src/snippets/s_social_media/000.scss
@@ -17,18 +17,18 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            &:not(.small_social_icon, .fa-2x, .fa-3x, .fa-4x, .fa-5x) {
+            &:not(.small_social_icon, .oi-2x, .oi-3x, .oi-4x, .oi-5x) {
                 &.rounded-circle,
                 &.rounded-empty-circle,
                 &.rounded,
-                &.fa-stack {
+                &.oi-stack {
                     font-size: 1rem;
                     width: $-size - .5rem;
                     height: $-size - .5rem;
                 }
             }
             @for $i from 2 through 5 {
-                &.fa-#{$i}x {
+                &.oi-#{$i}x {
                     width: $-size + $i;
                     height: $-size + $i;
                     line-height: $-size + $i;
@@ -60,7 +60,7 @@
     }
     &:not(.no_icon_color) {
         @each $media, $color in $o-social-colors { // @see builder.variables.scss for the media colors
-            .fa-#{$media}, .s_social_media_#{$media} {
+            .oi-#{$media}, .s_social_media_#{$media} {
                 color: $color !important;
             }
         }
diff --git a/addons/mass_mailing/static/src/themes/iframe_assets/theme_selector.scss b/addons/mass_mailing/static/src/themes/iframe_assets/theme_selector.scss
index 1574e71113dc7b..ce128df8e9d2c8 100644
--- a/addons/mass_mailing/static/src/themes/iframe_assets/theme_selector.scss
+++ b/addons/mass_mailing/static/src/themes/iframe_assets/theme_selector.scss
@@ -96,7 +96,7 @@
             border: 1px dashed white;
             opacity: 0.2;
 
-            > .fa {
+            > .oi {
                 @include o-position-absolute(0, 0, 0, 0);
                 text-align: center;
                 font-size: 50px;
@@ -128,7 +128,7 @@
             width: 100%;
             height: 100%;
         }
-        i.fa-star {
+        i[data-icon="star"].oi-filled {
             color: $o-main-favorite-color;
         }
         .o_mail_template_remove_favorite i {
diff --git a/addons/mass_mailing/static/src/themes/theme_selector/theme_selector.xml b/addons/mass_mailing/static/src/themes/theme_selector/theme_selector.xml
index ab778288364459..c83da3f0312d89 100644
--- a/addons/mass_mailing/static/src/themes/theme_selector/theme_selector.xml
+++ b/addons/mass_mailing/static/src/themes/theme_selector/theme_selector.xml
@@ -21,12 +21,12 @@
                             </div>
                         </t>
                     <div class="d-flex flex-row align-items-center mb-2 w-100">
-                        <i class="fa fa-star me-2"/>
+                        <i class="oi oi-filled me-2" data-icon="star"/>
                         <h5 class="text-truncate mb-0" t-out="template.subject"/>
                         <div class="lh-1 ms-auto o_mail_template_remove_favorite" 
                             aria-label="Remove from Templates" aria-role="button"
                             t-on-click="(ev) => this.onRemoveFavorite(ev, template_index)" title="Remove from Templates">
-                            <i class="fa fa-trash ps-2 me-1" t-att-data-id="template.id"/>
+                            <i class="oi oi-filled ps-2 me-1" data-icon="delete" t-att-data-id="template.id"/>
                         </div> 
                     </div>
                 </div>
diff --git a/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml b/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml
index cabd43e8643ac5..68eeca064c0aa9 100644
--- a/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml
+++ b/addons/mass_mailing/static/src/xml/mailing_filter_widget.xml
@@ -13,7 +13,7 @@
                                 <button class="btn py-0">
                                     <span class="o_mass_mailing_add_filter">
                                         <span t-attf-class="o_mass_mailing_no_filter {{ this.props.record.data.mailing_filter_count || this.props.noLabel ? 'd-none' : '' }}">Save as Favorite Filter</span>
-                                        <i class="fa fa-floppy-o px-1 py-1"/>
+                                        <i class="oi px-1 py-1" data-icon="save"/>
                                     </span>
                                 </button>
                                 <t t-set-slot="content">
@@ -32,7 +32,7 @@
                         </div>
                     </div>
                     <a t-attf-class="o_mass_mailing_remove_filter btn px-1 pt-1 pb-0 {{ !this.filter.canRemoveFilter ? 'd-none': '' }}" t-on-click="this.onRemoveFilter">
-                        <i class="fa fa-trash px-3 py-1 align-bottom" title="Remove from Favorites"/>
+                        <i class="oi oi-filled px-3 py-1 align-bottom" data-icon="delete" title="Remove from Favorites"/>
                     </a>
                 </div>
             </t>
diff --git a/addons/mass_mailing/static/src/xml/mailing_portal_subscription_blocklist.xml b/addons/mass_mailing/static/src/xml/mailing_portal_subscription_blocklist.xml
index dfb6e2dac8545e..ec8c355059be00 100644
--- a/addons/mass_mailing/static/src/xml/mailing_portal_subscription_blocklist.xml
+++ b/addons/mass_mailing/static/src/xml/mailing_portal_subscription_blocklist.xml
@@ -4,15 +4,15 @@
     <t t-name="mass_mailing.portal.blocklist_update_info">
         <span>
             <t t-if="this.infoKey == 'blocklist_add'">
-                <i class="fa fa-check me-1"/>
+                <i class="oi me-1" data-icon="check"/>
                 <span>Email added to our blocklist</span>
             </t>
             <t t-elif="this.infoKey == 'blocklist_remove'">
-                <i class="fa fa-check me-1"/>
+                <i class="oi me-1" data-icon="check"/>
                 <span>Email removed from our blocklist</span>
             </t>
             <t t-else="">
-                <i class="fa fa-exclamation-triangle me-1"/>
+                <i class="oi me-1" data-icon="warning"/>
                 <span>An error occurred. Please retry later.</span>
             </t>
         </span>
diff --git a/addons/mass_mailing/static/src/xml/mailing_portal_subscription_feedback.xml b/addons/mass_mailing/static/src/xml/mailing_portal_subscription_feedback.xml
index 308b25cf45fd3c..8b156a8a34d7e2 100644
--- a/addons/mass_mailing/static/src/xml/mailing_portal_subscription_feedback.xml
+++ b/addons/mass_mailing/static/src/xml/mailing_portal_subscription_feedback.xml
@@ -4,11 +4,11 @@
     <t t-name="mass_mailing.portal.feedback_update_info">
         <span>
             <t t-if="this.infoKey == 'feedback_sent'">
-                <i class="fa fa-check me-1"/>
+                <i class="oi me-1" data-icon="check"/>
                 <span>Sent. Thanks you for your feedback!</span>
             </t>
             <t t-else="">
-                <i class="fa fa-exclamation-triangle me-1"/>
+                <i class="oi me-1" data-icon="warning"/>
                 <span>An error occurred. Please retry later or contact us.</span>
             </t>
         </span>
diff --git a/addons/mass_mailing/static/src/xml/mailing_portal_subscription_form.xml b/addons/mass_mailing/static/src/xml/mailing_portal_subscription_form.xml
index 9895ed07b7c170..8581f8c667b1e5 100644
--- a/addons/mass_mailing/static/src/xml/mailing_portal_subscription_form.xml
+++ b/addons/mass_mailing/static/src/xml/mailing_portal_subscription_form.xml
@@ -75,11 +75,11 @@
     <!-- Post action informative span -->
     <t t-name="mass_mailing.portal.list_form_update_info">
         <t t-if="this.infoKey == 'subscription_updated'">
-            <i class="fa fa-check me-1"/>
+            <i class="oi me-1" data-icon="check"/>
             <span>Membership updated</span>
         </t>
         <t t-else="">
-            <i class="fa fa-exclamation-triangle me-1"/>
+            <i class="oi me-1" data-icon="warning"/>
             <span>An error occurred. Please retry later.</span>
         </t>
     </t>
diff --git a/addons/mass_mailing/static/tests/mass_mailing_html_field.test.js b/addons/mass_mailing/static/tests/mass_mailing_html_field.test.js
index 7b03842940bbdf..3ad0c0f9c2dffd 100644
--- a/addons/mass_mailing/static/tests/mass_mailing_html_field.test.js
+++ b/addons/mass_mailing/static/tests/mass_mailing_html_field.test.js
@@ -475,7 +475,7 @@ describe("field HTML", () => {
         section.dataset.filterDomain = JSON.stringify([["id", "=", 1]]);
         htmlField.editor.config.onChange({ isPreviewing: false });
         await waitFor(".o-snippets-menu [data-label='Domain']", { timeout: 3000 });
-        expect(".o-snippets-menu [data-label='Domain'] span.fa-filter + span").toHaveText("Id = 1");
+        expect(".o-snippets-menu [data-label='Domain'] span[data-icon='filter_alt'] + span").toHaveText("Id = 1");
         await clickSave();
         const table = await waitFor(".o_mail_body_inline table[t-if]", { timeout: 3000 });
         expect(table).toHaveAttribute("t-if", 'object.filtered_domain([("id", "=", 1)])');
diff --git a/addons/mass_mailing/views/mailing_contact_views.xml b/addons/mass_mailing/views/mailing_contact_views.xml
index efbe721471b7f0..9c28bb7e1729b8 100644
--- a/addons/mass_mailing/views/mailing_contact_views.xml
+++ b/addons/mass_mailing/views/mailing_contact_views.xml
@@ -79,7 +79,7 @@
                     <t t-name="card">
                         <field name="name" class="fw-bolder fs-5 mb-1"/>
                         <div name="contact_email" invisible="not email">
-                            <i class="fa fa-envelope text-primary me-2" title="Email"/>
+                            <i class="oi oi-filled text-primary me-2" data-icon="mail" title="Email"/>
                             <field name="email"/>
                         </div>
                         <field name="tag_ids" class="mb-1" options="{'color_field': 'color'}"/>
@@ -109,7 +109,7 @@
                         <group>
                             <label for="email" class="oe_inline"/>
                             <div class="o_row o_row_readonly" name="email_details">
-                                 <button name="mail_action_blacklist_remove" class="fa fa-ban text-danger"
+                                 <button name="mail_action_blacklist_remove" class="oi text-danger" data-icon="block"
                                     title="This email is blacklisted for mass mailings. Click to unblacklist."
                                     type="object" context="{'default_email': email}" groups="base.group_user"
                                     invisible="not is_blacklisted"/>
diff --git a/addons/mass_mailing/views/mailing_filter_views.xml b/addons/mass_mailing/views/mailing_filter_views.xml
index 346d05108fa3ad..4adb17b25851fa 100644
--- a/addons/mass_mailing/views/mailing_filter_views.xml
+++ b/addons/mass_mailing/views/mailing_filter_views.xml
@@ -71,7 +71,7 @@
             </p><p>
                 While designing the mailing, you can define the rules to filter recipients.
                 To save the same criteria for future use, you can add it to the favorite list
-                by clicking on <i class="fa fa-floppy-o text-warning"></i> icon next to "Recipients".
+                by clicking on <i class="oi text-warning" data-icon="save"></i> icon next to "Recipients".
             </p>
         </field>
     </record>
diff --git a/addons/mass_mailing/views/mailing_list_views.xml b/addons/mass_mailing/views/mailing_list_views.xml
index a169433f650e9d..1f1f60c056e8fb 100644
--- a/addons/mass_mailing/views/mailing_list_views.xml
+++ b/addons/mass_mailing/views/mailing_list_views.xml
@@ -49,23 +49,23 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button name="action_view_contacts"
-                                type="object" icon="fa-user" class="oe_stat_button">
+                                type="object" icon="person" icon_class="oi-filled" class="oe_stat_button">
                             <field name="contact_count" string="Recipients" widget="statinfo"/>
                         </button>
                         <button name="action_view_mailings"
-                                type="object" icon="fa-envelope-o" class="oe_stat_button">
+                                type="object" icon="mail" class="oe_stat_button">
                             <field name="mailing_count" string="Mailings" widget="statinfo"/>
                         </button>
                         <button name="action_view_contacts_bouncing"
-                                type="object" icon="fa-exchange" class="oe_stat_button">
+                                type="object" icon="swap_horiz" class="oe_stat_button">
                                 <field name="contact_pct_bounce" widget="statinfo" string="% Bounce"/>
                         </button>
                         <button name="action_view_contacts_opt_out"
-                                type="object" icon="fa-bell-slash-o" class="oe_stat_button">
+                                type="object" icon="notifications_off" class="oe_stat_button">
                                 <field name="contact_pct_opt_out" widget="statinfo" string="% Opt-out"/>
                         </button>
                         <button name="action_view_contacts_blacklisted"
-                                type="object" icon="fa-ban" class="oe_stat_button">
+                                type="object" icon="block" class="oe_stat_button">
                                 <field name="contact_pct_blacklisted" widget="statinfo" string="% Blacklist"/>
                         </button>
                     </div>
@@ -161,7 +161,7 @@
                                     <field name="contact_count_email" class="fw-normal"/>
                                     <br/>
                                     <span class="text-muted">
-                                        <i class="fa fa-envelope-o"/> Contacts
+                                        <i class="oi" data-icon="mail"/> Contacts
                                     </span>
                                 </a>
                                 <a class="me-sm-0 me-3 fs-4 fw-light lh-1 text-truncate" tabindex="-1"
diff --git a/addons/mass_mailing/views/mailing_mailing_views.xml b/addons/mass_mailing/views/mailing_mailing_views.xml
index 3d4b1847b4a8e6..3f282c35cde190 100644
--- a/addons/mass_mailing/views/mailing_mailing_views.xml
+++ b/addons/mass_mailing/views/mailing_mailing_views.xml
@@ -197,7 +197,7 @@
                             </button>
                             <button name="action_view_link_trackers"
                                 invisible="state != 'done'"
-                                type="object" class="oe_stat_button" icon="fa-link">
+                                type="object" class="oe_stat_button" icon="link">
                                 <field name="link_trackers_count" widget="statinfo" string="Link Trackers"/>
                             </button>
                         </div>
@@ -230,7 +230,7 @@
                                                 placeholder="Select recipients..." class="oe_inline mb-0"
                                                 context="{'form_view_ref': 'mass_mailing.mailing_list_view_form_simplified'}"
                                                 domain="[('active', '=', True)]" readonly="state in ('sending', 'done')" options="{'color_field': 'color'}"/>
-                                            <button icon="fa-user-plus" type="object" class="btn btn-secondary py-0 px-1 ms-1"
+                                            <button icon="person_add" icon_class="oi-filled" type="object" class="btn btn-secondary py-0 px-1 ms-1"
                                                 invisible="not contact_list_ids or not contact_list_ids or state in ('sending', 'done')"
                                                 name="action_import_mailing_contacts" title="Import Mailing Contacts"/>
                                         </div>
@@ -298,19 +298,19 @@
                                         <field name="ab_testing_description" nolabel="1"/>
                                         <div id="mailing_form_ab_buttons" invisible="ab_testing_mailings_count &lt; 2 or not ab_testing_enabled">
                                             <button name="action_compare_versions" type="object" class="btn btn-link d-block">
-                                                <i class="fa fa-bar-chart"/> Compare Version
+                                                <i class="oi" data-icon="bar_chart"/> Compare Version
                                             </button>
                                             <button name="action_duplicate" type="object" class="btn btn-link d-block" invisible="ab_testing_completed">
-                                                <i class="fa fa-copy"/> Create an Alternative
+                                                <i class="oi" data-icon="content_copy"/> Create an Alternative
                                             </button>
                                             <button name="action_send_winner_mailing" type="object" class="btn btn-link d-block" invisible="not is_ab_test_sent or ab_testing_completed or ab_testing_winner_selection == 'manual'">
-                                                <i class="fa fa-envelope"/><span name="ab_test_auto">
+                                                <i class="oi oi-filled" data-icon="mail"/><span name="ab_test_auto">
                                                     Send Winner Now
                                                 </span>
                                             </button>
                                             <button name="action_select_as_winner" type="object" class="btn btn-link d-block"
                                                 invisible="ab_testing_completed or ab_testing_winner_selection != 'manual'">
-                                                <i class="fa fa-envelope"/> Send this as winner
+                                                <i class="oi oi-filled" data-icon="mail"/> Send this as winner
                                             </button>
                                         </div>
                                         <button name="action_duplicate" type="object" class="btn btn-primary"
@@ -402,18 +402,18 @@
                             <field name="subject" class="my-1 text-truncate fs-3 fw-bold"/>
                             <field name="campaign_id" invisible="not sent_date" class="fw-bold fs-5" groups="mass_mailing.group_mass_mailing_campaign"/>
                             <div>
-                                <i class="fa fa-bullseye me-2" role="img" aria-label="Lead/Opportunity"/>
+                                <i class="oi me-2" data-icon="crisis_alert" role="img" aria-label="Lead/Opportunity"/>
                                 <field name='mailing_model_id' invisible="mailing_on_mailing_list"/>
                                 <span invisible="not mailing_on_mailing_list">Mailing Contact</span>
                             </div>
                             <footer class="pt-0">
                                 <div>
                                     <span invisible="not sent_date" t-attf-title="Sent on #{record.sent_date.value}">
-                                        <span class="fa fa-paper-plane me-2 small my-auto" aria-label="Sent date"/>
+                                        <span class="oi oi-filled me-2 small my-auto" data-icon="send" aria-label="Sent date"/>
                                         <field name="sent_date"/>
                                     </span>
                                     <span invisible="not schedule_date" t-attf-title="Scheduled on #{record.schedule_date.value}">
-                                        <span class="fa fa-hourglass-half me-2 small my-auto" aria-label="Scheduled date"/>
+                                        <span class="oi me-2 small my-auto" data-icon="hourglass_bottom" aria-label="Scheduled date"/>
                                         <field name="schedule_date" readonly="state not in ['draft', 'in_queue']"/>
                                     </span>
                                     <span invisible="sent_date or schedule_date or state == 'in_queue'">
@@ -423,7 +423,7 @@
                                     </span>
                                     <span invisible="schedule_date or state != 'in_queue' or not next_departure"
                                         t-attf-title="Scheduled on #{record.next_departure.value}" >
-                                        <span class="fa fa-hourglass-o me-2 small my-auto" aria-label="Scheduled date"/>
+                                        <span class="oi me-2 small my-auto" data-icon="hourglass_empty" aria-label="Scheduled date"/>
                                         <span>Next Batch</span>
                                     </span>
                                 </div>
diff --git a/addons/mass_mailing/views/mailing_subscription_views.xml b/addons/mass_mailing/views/mailing_subscription_views.xml
index 4ab63a2b0e9bc7..2a5ca4e7552f2a 100644
--- a/addons/mass_mailing/views/mailing_subscription_views.xml
+++ b/addons/mass_mailing/views/mailing_subscription_views.xml
@@ -12,7 +12,7 @@
                         <field name="is_blacklisted" invisible="1"/>
                         <label for="contact_id" class="oe_inline"/>
                         <div class="o_row o_row_readonly">
-                            <i class="fa fa-ban text-danger" role="img" title="This email is blacklisted for mass mailings"
+                            <i class="oi text-danger" data-icon="block" role="img" title="This email is blacklisted for mass mailings"
                                 aria-label="Blacklisted" invisible="not is_blacklisted" groups="base.group_user"></i>
                             <field name="contact_id"/>
                         </div>
@@ -101,7 +101,7 @@
             </p><p>
                 Come back later to discover why contacts unsubscribe.<br/>
                 <a name="%(mass_mailing.mailing_subscription_optout_action)d" type="action" class="text-primary">
-                    <i class="oi oi-arrow-right"/> Configure Opt-out Reasons
+                    <i class="oi" data-icon="east"/> Configure Opt-out Reasons
                 </a>
             </p>
         </field>
diff --git a/addons/mass_mailing/views/mailing_trace_views.xml b/addons/mass_mailing/views/mailing_trace_views.xml
index fb15c3d95badb8..908ab214541ee8 100644
--- a/addons/mass_mailing/views/mailing_trace_views.xml
+++ b/addons/mass_mailing/views/mailing_trace_views.xml
@@ -48,7 +48,7 @@
                 <field name="reply_datetime" optional="hide"/>
                 <field name="is_test_trace" optional="hide"/>
                 <button name="action_view_contact" type="object"
-                        string="Open Recipient" icon="fa-user"/>
+                        string="Open Recipient" icon="person" icon_class="oi-filled"/>
             </list>
         </field>
     </record>
@@ -75,7 +75,7 @@
                 <field name="reply_datetime" optional="hide"/>
                 <field name="is_test_trace" optional="hide"/>
                 <button name="action_view_contact" type="object"
-                        string="Open Recipient" icon="fa-user"/>
+                        string="Open Recipient" icon="person" icon_class="oi-filled"/>
             </list>
         </field>
     </record>
@@ -91,7 +91,7 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button name="action_view_contact"
-                                type="object" icon="fa-user" class="oe_stat_button">
+                                type="object" icon="person" icon_class="oi-filled" class="oe_stat_button">
                                 <div class="o_field_widget o_stat_info">
                                     <span class="o_stat_text">Open Recipient</span>
                                 </div>
diff --git a/addons/mass_mailing/views/res_config_settings_views.xml b/addons/mass_mailing/views/res_config_settings_views.xml
index 3f5e56131194e0..572bae9a159f95 100644
--- a/addons/mass_mailing/views/res_config_settings_views.xml
+++ b/addons/mass_mailing/views/res_config_settings_views.xml
@@ -29,7 +29,7 @@
                                                 placeholder="Default Server"/>
                                     </div>
                                     <div class="mt8">
-                                        <button type="action" name="base.action_ir_mail_server_list" string="Configure Outgoing Mail Servers" icon="oi-arrow-right" class="oe_link"/>
+                                        <button type="action" name="base.action_ir_mail_server_list" string="Configure Outgoing Mail Servers" icon="east" class="oe_link"/>
                                     </div>
                                 </div>
                             </setting>
diff --git a/addons/mass_mailing/views/snippets/mass_mailing_columns_snippets.xml b/addons/mass_mailing/views/snippets/mass_mailing_columns_snippets.xml
index 3a024bda041dc9..d1a434151517f3 100644
--- a/addons/mass_mailing/views/snippets/mass_mailing_columns_snippets.xml
+++ b/addons/mass_mailing/views/snippets/mass_mailing_columns_snippets.xml
@@ -72,7 +72,7 @@
                         <div class="col-md-8 s_media_list_body ps-md-4 col-12 o_cc">
                             <h2>Media heading</h2>
                             <p>Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fits your needs.
-                            <br/><a href="#">Discover more <span class="fa fa-long-arrow-right align-middle ms-1"/></a></p>
+                            <br/><a href="#">Discover more <span class="oi align-middle ms-1" data-icon="east"/></a></p>
                         </div>
                     </div>
                 </div>
@@ -95,7 +95,7 @@
                         <div class="col-md-8 s_media_list_body ps-md-4 col-12 o_cc">
                             <h2>Post heading</h2>
                             <p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
-                            <p><a href="#">Continue reading <span class="fa fa-long-arrow-right align-middle ms-1"/></a></p>
+                            <p><a href="#">Continue reading <span class="oi align-middle ms-1" data-icon="east"/></a></p>
                         </div>
                     </div>
                 </div>
@@ -238,7 +238,7 @@
                         </div>
                         <div class="row">
                             <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
-                                <span class="fa fa-2x fa-font-awesome bg-primary o_editable_media" style="padding: 10px; border-radius: 50px !important;"></span>
+                                <span class="oi oi-2x bg-primary o_editable_media" data-icon="oi_fa" style="padding: 10px; border-radius: 50px !important;"></span>
                             </div>
                             <div class="col-md-10 pb16 px-0 col-12">
                                 <h3>Change Icons</h3>
@@ -247,7 +247,7 @@
                         </div>
                         <div class="row">
                             <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
-                                <span class="fa fa-2x fa-files-o bg-primary o_editable_media" style="padding: 10px; border-radius: 50px !important;"></span>
+                                <span class="oi oi-2x bg-primary o_editable_media" data-icon="content_copy" style="padding: 10px; border-radius: 50px !important;"></span>
                             </div>
                             <div class="col-md-10 pb16 px-0 col-12">
                                 <h3>Duplicate</h3>
@@ -256,7 +256,7 @@
                         </div>
                         <div class="row">
                             <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
-                                <span class="fa fa-2x fa-trash bg-primary o_editable_media" style="padding: 10px; border-radius: 50px !important;"></span>
+                                <span class="oi oi-2x oi-filled bg-primary o_editable_media" data-icon="delete" style="padding: 10px; border-radius: 50px !important;"></span>
                             </div>
                             <div class="col-md-10 pb16 px-0 col-12">
                                 <h3>Delete Blocks</h3>
@@ -275,7 +275,7 @@
                         </div>
                         <div class="row">
                             <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
-                                <span class="fa fa-2x fa-magic bg-secondary o_editable_media" style="padding: 10px; border-radius: 3px !important; color: white;"></span>
+                                <span class="oi oi-2x bg-secondary o_editable_media" data-icon="wand_stars" style="padding: 10px; border-radius: 3px !important; color: white;"></span>
                             </div>
                             <div class="col-md-10 pb16 px-0 col-12">
                                 <h3>Great Value</h3>
@@ -284,7 +284,7 @@
                         </div>
                         <div class="row">
                             <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
-                                <span class="fa fa-2x fa-eyedropper bg-secondary o_editable_media" style="padding: 10px; border-radius: 3px !important; color: white;"></span>
+                                <span class="oi oi-2x bg-secondary o_editable_media" data-icon="colorize" style="padding: 10px; border-radius: 3px !important; color: white;"></span>
                             </div>
                             <div class="col-md-10 pb16 px-0 col-12">
                                 <h3>Edit Styles</h3>
@@ -293,7 +293,7 @@
                         </div>
                         <div class="row">
                             <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
-                                <span class="fa fa-2x fa-picture-o bg-secondary o_editable_media" style="padding: 10px; border-radius: 3px !important; color: white;"></span>
+                                <span class="oi oi-2x bg-secondary o_editable_media" data-icon="image" style="padding: 10px; border-radius: 3px !important; color: white;"></span>
                             </div>
                             <div class="col-md-10 pb16 px-0 col-12">
                                 <h3>Sample Icons</h3>
@@ -316,21 +316,21 @@
                     <p>A features section highlights your product's key attributes, engaging visitors and boosting conversions.</p>
                     <div class="row">
                         <div class="col-md-2 col-2">
-                            <span class="fa fa-star-o bg-light rounded p-3" contenteditable="false"/>
+                            <span class="oi bg-light rounded p-3" data-icon="star" contenteditable="false"/>
                         </div>
                         <div class="col-md-10 col-10">
                             <h3>Highlights Key Attributes</h3>
                             <p>A feature section allows you to clearly showcase the main benefits and unique aspects of your product.</p>
                         </div>
                         <div class="col-md-2 col-2">
-                            <span class="fa fa-user-o bg-light rounded p-3" contenteditable="false"/>
+                            <span class="oi bg-light rounded p-3" data-icon="person" contenteditable="false"/>
                         </div>
                         <div class="col-md-10 col-10">
                             <h3>Engages Visitors</h3>
                             <p>It captures your visitors' attention and helps them quickly understand the value of your product.</p>
                         </div>
                         <div class="col-md-2 col-2">
-                            <span class="fa fa-heart-o bg-light rounded p-3" contenteditable="false"/>
+                            <span class="oi bg-light rounded p-3" data-icon="favorite" contenteditable="false"/>
                         </div>
                         <div class="col-md-10 col-10">
                             <h3>Boosts Conversions</h3>
@@ -396,17 +396,17 @@
         <div class="container">
             <div class="row">
                 <div class="col-md-4 col-12">
-                    <span class="fa fa-envelope bg-light rounded p-3 mb-3" contenteditable="false"/>
+                    <span class="oi oi-filled bg-light rounded p-3 mb-3" data-icon="mail" contenteditable="false"/>
                     <h2>Reliability</h2>
                     <p>Consistent performance and uptime ensure efficient, reliable service with minimal interruptions and quick response times.</p>
                 </div>
                 <div class="col-md-4 col-12">
-                    <span class="fa fa-credit-card bg-light rounded p-3 mb-3" contenteditable="false"/>
+                    <span class="oi bg-light rounded p-3 mb-3" data-icon="credit_card" contenteditable="false"/>
                     <h2>Performance</h2>
                     <p>Speed and efficiency ensure tasks are completed quickly and resources are used optimally, enhancing productivity and satisfaction.</p>
                 </div>
                 <div class="col-md-4 col-12">
-                    <span class="fa fa-flag bg-light rounded p-3 mb-3" contenteditable="false"/>
+                    <span class="oi oi-filled bg-light rounded p-3 mb-3" data-icon="flag" contenteditable="false"/>
                     <h2>Scalability</h2>
                     <p>Growth capability is a system's ability to scale and adapt, meeting increasing demands and evolving needs for long-term success.</p>
                 </div>
diff --git a/addons/mass_mailing/views/snippets/mass_mailing_headers_snippets.xml b/addons/mass_mailing/views/snippets/mass_mailing_headers_snippets.xml
index 74638c52d44274..c9bc4cd9dcd0e5 100644
--- a/addons/mass_mailing/views/snippets/mass_mailing_headers_snippets.xml
+++ b/addons/mass_mailing/views/snippets/mass_mailing_headers_snippets.xml
@@ -101,7 +101,7 @@
                 <div class="col-md-6 col-6">
                     <p class="m-0" style="text-align: right;">
                         <a href="/web/login" class="btn btn-primary">
-                            <span class="fa fa-user me-2" contenteditable="false"/>My Account<span class="fa fa-chevron-right ms-2" contenteditable="false"/>
+                            <span class="oi oi-filled me-2" data-icon="person" contenteditable="false"/>My Account<span class="oi ms-2" data-icon="chevron_right" contenteditable="false"/>
                         </a>
                     </p>
                 </div>
@@ -223,7 +223,7 @@
                 <div class="col-md-6 col-12">
                     <p class="m-0" style="text-align: end;">
                         <a href="/web/login" class="btn btn-primary">
-                            <span class="fa fa-user me-2" contenteditable="false"/>My Account<span class="fa fa-chevron-right ms-2" contenteditable="false"/>
+                            <span class="oi oi-filled me-2" data-icon="person" contenteditable="false"/>My Account<span class="oi ms-2" data-icon="chevron_right" contenteditable="false"/>
                         </a>
                     </p>
                 </div>
diff --git a/addons/mass_mailing/views/snippets/mass_mailing_images_snippets.xml b/addons/mass_mailing/views/snippets/mass_mailing_images_snippets.xml
index fb42bdfcca4e7a..aa9a346259329a 100644
--- a/addons/mass_mailing/views/snippets/mass_mailing_images_snippets.xml
+++ b/addons/mass_mailing/views/snippets/mass_mailing_images_snippets.xml
@@ -86,9 +86,9 @@
                 <div class="col-md-6 col-12 pt16 pb16">
                     <h2><strong>Stay Ahead with weekly insights &amp; updates</strong></h2>
                     <p>Join our mailing list to receive carefully curated resources, tips, and updates straight to your inbox.</p>
-                    <p><span class="fa fa-check text-o-color-1" role="img"/>&#160;&#160;Curated Industry Insights</p>
-                    <p><span class="fa fa-check text-o-color-1" role="img"/>&#160;&#160;Expert Tips &amp; How-Tos</p>
-                    <p><span class="fa fa-check text-o-color-1" role="img"/>&#160;&#160;Guides &amp; Resources</p>
+                    <p><span class="oi text-o-color-1" data-icon="check" role="img"/>&#160;&#160;Curated Industry Insights</p>
+                    <p><span class="oi text-o-color-1" data-icon="check" role="img"/>&#160;&#160;Expert Tips &amp; How-Tos</p>
+                    <p><span class="oi text-o-color-1" data-icon="check" role="img"/>&#160;&#160;Guides &amp; Resources</p>
                     <p><a href="#" class="btn btn-primary">Subscribe</a></p>
                 </div>
             </div>
diff --git a/addons/mass_mailing/views/snippets/mass_mailing_inner_snippets.xml b/addons/mass_mailing/views/snippets/mass_mailing_inner_snippets.xml
index 09c9e00e647def..5c1356ae4a1f63 100644
--- a/addons/mass_mailing/views/snippets/mass_mailing_inner_snippets.xml
+++ b/addons/mass_mailing/views/snippets/mass_mailing_inner_snippets.xml
@@ -8,17 +8,17 @@
 
 
 <template id="s_rating" name="Rating">
-    <div class="s_rating o_mail_snippet_general pt16 pb16 s_rating_no_title" style="padding: 0 15px;" data-vcss="001" data-vxml="001" data-icon="fa-star">
+    <div class="s_rating o_mail_snippet_general pt16 pb16 s_rating_no_title" style="padding: 0 15px;" data-vcss="001" data-vxml="001" data-rating-icon="star">
         <h3 class="s_rating_title">Quality</h3>
         <div class="s_rating_icons o_not_editable">
             <span class="s_rating_active_icons" style="color: #f3cc00;">
-                <i class="fa fa-star"></i>
-                <i class="fa fa-star"></i>
-                <i class="fa fa-star"></i>
+                <i class="oi oi-filled" data-icon="star"></i>
+                <i class="oi oi-filled" data-icon="star"></i>
+                <i class="oi oi-filled" data-icon="star"></i>
             </span>
             <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                <i class="fa fa-star-o"></i>
-                <i class="fa fa-star-o"></i>
+                <i class="oi" data-icon="star"></i>
+                <i class="oi" data-icon="star"></i>
             </span>
         </div>
     </div>
@@ -36,7 +36,7 @@
 
 <template id="s_alert" name="Alert">
     <div class="oe_unmovable s_alert s_mail_alert s_alert_md alert alert-info w-100 row" style="border-width: 1px !important; border-color: rgb(190 229 235) !important;">
-        <i class="fa fa-2x fa-info-circle fa-stack o_not_editable s_alert_icon rounded-1 col-auto"/>
+        <i class="oi oi-2x oi-stack o_not_editable s_alert_icon rounded-1 col-auto" data-icon="info"/>
         <div class="s_alert_content col-9">
             <p class="mb-0">Explain the benefits you offer. <br/>Don't write about products or services here, write about solutions.</p>
         </div>
@@ -46,7 +46,7 @@
 <template name="CTA Badge" id="s_cta_badge">
     <div class="s_cta_badge badge d-block mx-auto o_mail_snippet_general border rounded py-2 px-3" data-name="CTA Badge" style="border-radius: 32px !important;">
         <p class="mb-0">
-            <span class="fa fa-fw fa-info-circle" role="img"/>&#160;&#160;What do you want to promote&amp;nbsp;? &#160;&#160;&#160;&#160;<a href="#">See more <span class="fa fa-long-arrow-right" role="img"/></a>
+            <span class="oi oi-fw" data-icon="info" role="img"/>&#160;&#160;What do you want to promote&amp;nbsp;? &#160;&#160;&#160;&#160;<a href="#">See more <span class="oi" data-icon="east" role="img"/></a>
         </p>
     </div>
 </template>
@@ -85,7 +85,7 @@
 <template name="Badge" id="s_badge">
     <div class="s_badge badge text-bg-secondary o_mail_snippet_general" data-name="Badge" data-vxml="001">
         <p class="mb-0">
-            <span class="fa fa-fw fa-folder"/>Category
+            <span class="oi oi-fw oi-filled" data-icon="folder"/>Category
         </p>
     </div>
 </template>
@@ -124,7 +124,7 @@
     <t t-foreach="updated_links.items() if fillSocialLinks else []" t-as="link">
         <t t-set="platform" t-value="link[0].split('social_')[1]"/>
         <a t-att-data-platform="link[0] if social_links.get(link[0]) else 'customLink-' + link[0]" t-att-href="link[1]" t-att-aria-label="platform.capitalize()" t-att-title="platform.capitalize()">
-            <i t-attf-style="{{optionalTextStyle}}" t-attf-class="fa fa-{{platform}} {{ optionalIconLayout or 'fa-stack'}} o_editable_media"></i>
+            <i t-attf-style="{{optionalTextStyle}}" t-attf-class="oi {{ optionalIconLayout or 'oi-stack'}} o_editable_media" t-attf-data-icon="oi_{{platform}}"></i>
         </a>
     </t>
 </template>
diff --git a/addons/mass_mailing/views/snippets/mass_mailing_marketing_snippets.xml b/addons/mass_mailing/views/snippets/mass_mailing_marketing_snippets.xml
index e4ac7e16aa54b3..63bcaa325cd15b 100644
--- a/addons/mass_mailing/views/snippets/mass_mailing_marketing_snippets.xml
+++ b/addons/mass_mailing/views/snippets/mass_mailing_marketing_snippets.xml
@@ -16,10 +16,10 @@
                             <p class="card-text small">Ideal for newcomers. Essential features to kickstart sales and marketing. Perfect for small teams.</p>
                             <p><a href="#" class="btn btn-outline-primary w-100">Start Now</a></p>
                             <ul class="list-group list-group-flush text-start">
-                                <li class="list-group-item px-0 bg-transparent"><span class="fa fa-check text-success" role="img"/>  Sales &amp; marketing for 2</li>
-                                <li class="list-group-item px-0 bg-transparent"><span class="fa fa-check text-success" role="img"/>  Account management</li>
-                                <li class="list-group-item px-0 bg-transparent"><span class="fa fa-times text-danger" role="img"/>  No customization</li>
-                                <li class="list-group-item px-0 bg-transparent"><span class="fa fa-times text-danger" role="img"/>  No support</li>
+                                <li class="list-group-item px-0 bg-transparent"><span class="oi text-success" data-icon="check" role="img"/>  Sales &amp; marketing for 2</li>
+                                <li class="list-group-item px-0 bg-transparent"><span class="oi text-success" data-icon="check" role="img"/>  Account management</li>
+                                <li class="list-group-item px-0 bg-transparent"><span class="oi text-danger" data-icon="close" role="img"/>  No customization</li>
+                                <li class="list-group-item px-0 bg-transparent"><span class="oi text-danger" data-icon="close" role="img"/>  No support</li>
                             </ul>
                         </div>
                         <div class="card-footer text-center">
@@ -42,10 +42,10 @@
                             <p class="card-text small">Comprehensive tools for growing businesses. Optimize your processes and productivity across your team.</p>
                             <p><a href="#" class="btn btn-primary w-100">Start Now</a></p>
                             <ul class="list-group list-group-flush text-start">
-                                <li class="list-group-item px-0 bg-transparent"><span class="fa fa-check text-success" role="img"/>  Complete CRM for any team</li>
-                                <li class="list-group-item px-0 bg-transparent"><span class="fa fa-check text-success" role="img"/>  Access all modules</li>
-                                <li class="list-group-item px-0 bg-transparent"><span class="fa fa-check text-success" role="img"/>  Limited customization</li>
-                                <li class="list-group-item px-0 bg-transparent"><span class="fa fa-check text-success" role="img"/>  Email support</li>
+                                <li class="list-group-item px-0 bg-transparent"><span class="oi text-success" data-icon="check" role="img"/>  Complete CRM for any team</li>
+                                <li class="list-group-item px-0 bg-transparent"><span class="oi text-success" data-icon="check" role="img"/>  Access all modules</li>
+                                <li class="list-group-item px-0 bg-transparent"><span class="oi text-success" data-icon="check" role="img"/>  Limited customization</li>
+                                <li class="list-group-item px-0 bg-transparent"><span class="oi text-success" data-icon="check" role="img"/>  Email support</li>
                             </ul>
                         </div>
                         <div class="card-footer text-center">
@@ -76,7 +76,7 @@
                     <div class="container">
                         <div class="row">
                             <div class="ps-0 col-md-1 col-2 o_not_editable" style="text-align: center;">
-                                <span style="padding: 5px 15px" class="align-self-start fa fa-star-o rounded float-start bg-o-color-3 o_editable_media" role="img"></span>
+                                <span style="padding: 5px 15px" class="oi align-self-start rounded float-start bg-o-color-3 o_editable_media" data-icon="star" role="img"></span>
                             </div>
                             <div data-name="Feature" class="px-0 col-md-11 col-10 o_colored_level">
                                 <h3 class="s_showcase_title h4-fs">Highlights Key Attributes</h3>
@@ -85,7 +85,7 @@
                         </div>
                         <div class="row">
                             <div class="ps-0 col-md-1 col-2 o_not_editable" style="text-align: center;">
-                                <span style="padding: 5px 15px" class="align-self-start fa fa-user-o rounded float-start bg-o-color-3 o_editable_media" role="img"></span>
+                                <span style="padding: 5px 15px" class="oi align-self-start rounded float-start bg-o-color-3 o_editable_media" data-icon="person" role="img"></span>
                             </div>
                             <div data-name="Feature" class="px-0 col-md-11 col-10 o_colored_level">
                                 <h3 class="s_showcase_title h4-fs">Engages Visitors</h3>
@@ -94,7 +94,7 @@
                         </div>
                         <div class="row">
                             <div class="ps-0 col-md-1 col-2 o_not_editable" style="text-align: center;">
-                                <span style="padding: 5px 15px" class="align-self-start fa fa-heart-o rounded float-start bg-o-color-3 o_editable_media" role="img"></span>
+                                <span style="padding: 5px 15px" class="oi align-self-start rounded float-start bg-o-color-3 o_editable_media" data-icon="favorite" role="img"></span>
                             </div>
                             <div data-name="Feature" class="px-0 col-md-11 col-10 o_colored_level">
                                 <h3 class="s_showcase_title h4-fs">Boosts Conversions</h3>
@@ -144,7 +144,7 @@
         </p>
         <table border="0" cellpadding="0" data-name="Promo Ticket" cellspacing="0" align="center" class="border" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
             <tr>
-                <td width="50" data-name="Icon Cell" height="50" align="center" class="mx-auto o_cc o_cc3" style="width:50px !important; min-width: 50px; max-width:5.6rem; text-align: center;"><span class="fa fa-2x fa-ticket"/></td>
+                <td width="50" data-name="Icon Cell" height="50" align="center" class="mx-auto o_cc o_cc3" style="width:50px !important; min-width: 50px; max-width:5.6rem; text-align: center;"><span class="oi oi-2x" data-icon="confirmation_number"/></td>
                 <td width="200" data-name="Code Cell" height="50" align="center" class="o_cc" style="font-size: 15px; line-height: 22px; font-weight: 700; min-width: 150px; width: 200px; text-align: center;"><p class="mb0">ENDOFSUMMER20</p></td>
             </tr>
         </table>
diff --git a/addons/mass_mailing/views/snippets/mass_mailing_people_snippets.xml b/addons/mass_mailing/views/snippets/mass_mailing_people_snippets.xml
index e3cbb29d92a301..deee93bb6e5cf5 100644
--- a/addons/mass_mailing/views/snippets/mass_mailing_people_snippets.xml
+++ b/addons/mass_mailing/views/snippets/mass_mailing_people_snippets.xml
@@ -108,17 +108,17 @@
             <div class="row">
                 <div class="col-md-6 col-12 pt16 pb16">
                     <blockquote class="s_mail_blockquote s_blockquote oe_unmovable o_mail_snippet_general o_cc w-100 h-100 mx-auto rounded fst-normal" data-snippet="s_blockquote" data-name="Review" style="border: 0;border-radius: 6.4px !important;">
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <p class="mb-0 s_rating_title"><strong>Rating</strong></p>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
@@ -140,17 +140,17 @@
                 </div>
                 <div class="col-md-6 col-12 pt16 pb16">
                     <blockquote class="s_mail_blockquote s_blockquote oe_unmovable o_mail_snippet_general o_cc w-100 h-100 mx-auto rounded fst-normal" data-snippet="s_blockquote" data-name="Review" style="border: 0;border-radius: 6.4px !important;">
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <p class="mb-0 s_rating_title"><strong>Rating</strong></p>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
@@ -172,17 +172,17 @@
                 </div>
                 <div class="col-md-6 col-12 pt16 pb16">
                     <blockquote class="s_mail_blockquote s_blockquote oe_unmovable o_mail_snippet_general o_cc w-100 h-100 mx-auto rounded fst-normal" data-snippet="s_blockquote" data-name="Review" style="border: 0;border-radius: 6.4px !important;">
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <p class="mb-0 s_rating_title"><strong>Rating</strong></p>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
@@ -204,17 +204,17 @@
                 </div>
                 <div class="col-md-6 col-12 pt16 pb16">
                     <blockquote class="s_mail_blockquote s_blockquote oe_unmovable o_mail_snippet_general o_cc w-100 h-100 mx-auto rounded fst-normal" data-snippet="s_blockquote" data-name="Review" style="border: 0;border-radius: 6.4px !important;">
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <p class="mb-0 s_rating_title"><strong>Rating</strong></p>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
diff --git a/addons/mass_mailing/views/snippets/mass_mailing_website_snippets.xml b/addons/mass_mailing/views/snippets/mass_mailing_website_snippets.xml
index 5da01c21d0c170..4d63b3ac6a0e8e 100644
--- a/addons/mass_mailing/views/snippets/mass_mailing_website_snippets.xml
+++ b/addons/mass_mailing/views/snippets/mass_mailing_website_snippets.xml
@@ -4,7 +4,7 @@
     <section class="o_mail_snippet_general pt16 pb16" data-vxml="001">
         <div class="s_cta_badge alert alert-info rounded mx-auto py-2 px-3" data-name="CTA Badge" style="border-radius: 32px !important;">
             <p class="mb-0">
-                <span class="fa fa-fw fa-shopping-cart" contenteditable="false"/>&#160;&#160;Huge holiday sale savings. Don't miss out. &#160;&#160;&#160;&#160;<a href="#" class="btn btn-link">Shop Now</a>
+                <span class="oi oi-fw" data-icon="shopping_cart" contenteditable="false"/>&#160;&#160;Huge holiday sale savings. Don't miss out. &#160;&#160;&#160;&#160;<a href="#" class="btn btn-link">Shop Now</a>
             </p>
         </div>
     </section>
@@ -14,7 +14,7 @@
     <section class="o_mail_snippet_general pt16 pb16" data-vxml="001">
         <div class="s_cta_badge border rounded mx-auto py-2 px-3" data-name="CTA Badge" style="border-radius: 32px !important;">
             <p class="mb-0">
-                <span class="fa fa-fw fa-tag" contenteditable="false"/>&#160;&#160;<strong>Special Offers</strong>. Complimentary care packs included with every sofa. &#160;&#160;&#160;&#160;<a href="#" class="btn btn-primary">See more</a>
+                <span class="oi oi-fw" data-icon="label" contenteditable="false"/>&#160;&#160;<strong>Special Offers</strong>. Complimentary care packs included with every sofa. &#160;&#160;&#160;&#160;<a href="#" class="btn btn-primary">See more</a>
             </p>
         </div>
     </section>
diff --git a/addons/mass_mailing/views/utm_campaign_views.xml b/addons/mass_mailing/views/utm_campaign_views.xml
index 24d16f702fae60..c0135fbf912940 100644
--- a/addons/mass_mailing/views/utm_campaign_views.xml
+++ b/addons/mass_mailing/views/utm_campaign_views.xml
@@ -13,7 +13,7 @@
             </xpath>
             <xpath expr="//div[hasclass('oe_button_box')]" position="inside">
                 <button name="%(action_view_mass_mailings_from_campaign)d"
-                    type="action" class="oe_stat_button order-9" icon="fa-envelope-o"
+                    type="action" class="oe_stat_button order-9" icon="mail"
                     invisible="mailing_mail_count == 0 or not is_mailing_campaign_activated"
                     groups="mass_mailing.group_mass_mailing_user">
                     <field name="mailing_mail_count" widget="statinfo" string="Mailings"/>
diff --git a/addons/mass_mailing_crm/views/mailing_mailing_views.xml b/addons/mass_mailing_crm/views/mailing_mailing_views.xml
index 05ad4238e34d5f..768487f9c273ce 100644
--- a/addons/mass_mailing_crm/views/mailing_mailing_views.xml
+++ b/addons/mass_mailing_crm/views/mailing_mailing_views.xml
@@ -8,7 +8,8 @@
     		<xpath expr="//button[@id='button_view_delivered']" position="before">
                 <button name="action_redirect_to_leads_and_opportunities"
                     type="object"
-                    icon="fa-star"
+                    icon="star"
+                    icon_class="oi-filled"
                     class="oe_stat_button"
                     invisible="state == 'draft'">
                     <div class="o_field_widget o_stat_info">
diff --git a/addons/mass_mailing_sale/views/mailing_mailing_views.xml b/addons/mass_mailing_sale/views/mailing_mailing_views.xml
index a5bef861338a54..7d752fd975c312 100644
--- a/addons/mass_mailing_sale/views/mailing_mailing_views.xml
+++ b/addons/mass_mailing_sale/views/mailing_mailing_views.xml
@@ -8,14 +8,14 @@
     		<xpath expr="//button[@id='button_view_delivered']" position="before">
                 <button name="action_redirect_to_quotations"
                     type="object"
-                    icon="fa-pencil-square-o"
+                    icon="edit_square"
                     class="oe_stat_button"
                     invisible="state == 'draft'">
                     <field name="sale_quotation_count" string="Quotations" widget="statinfo"/>
                 </button>
                 <button name="action_redirect_to_invoiced"
                     type="object"
-                    icon="fa-dollar"
+                    icon="attach_money"
                     class="oe_stat_button"
                     invisible="state == 'draft'" >
                     <field name="sale_invoiced_amount" string="Invoiced" widget="statinfo"/>
diff --git a/addons/mass_mailing_sms/views/mailing_contact_views.xml b/addons/mass_mailing_sms/views/mailing_contact_views.xml
index 0f9309fef7c396..21a99fbefd5e2a 100644
--- a/addons/mass_mailing_sms/views/mailing_contact_views.xml
+++ b/addons/mass_mailing_sms/views/mailing_contact_views.xml
@@ -52,7 +52,7 @@
             <xpath expr="//div[@name='email_details']" position="after">
                 <label for="mobile" class="oe_inline"/>
                 <div class="o_row o_row_readonly" name="phone_details">
-                    <button name="phone_action_blacklist_remove" class="fa fa-ban text-danger"
+                    <button name="phone_action_blacklist_remove" class="oi text-danger" data-icon="block"
                         title="This phone number is blacklisted for SMS Marketing. Click to unblacklist."
                         type="object" context="{'default_phone': mobile}" groups="base.group_user"
                         invisible="not phone_blacklisted"/>
@@ -70,7 +70,7 @@
         <field name="arch" type="xml">
            <xpath expr="//t[@t-name='card']/div[@name='contact_email']" position="after">
                <div invisible="not mobile">
-                   <i class="fa fa-phone text-primary me-2" title="Phone"/>
+                   <i class="oi oi-filled text-primary me-2" data-icon="phone" title="Phone"/>
                    <field name="mobile"/>
                </div>
             </xpath>
diff --git a/addons/mass_mailing_sms/views/mailing_list_views.xml b/addons/mass_mailing_sms/views/mailing_list_views.xml
index cc25dee328a2bb..c97c362e936f10 100644
--- a/addons/mass_mailing_sms/views/mailing_list_views.xml
+++ b/addons/mass_mailing_sms/views/mailing_list_views.xml
@@ -11,7 +11,7 @@
                     <field name="contact_count_sms" class="fw-normal"/>
                     <br/>
                     <span class="text-muted">
-                        <i class="fa fa-mobile fa-lg"/> Contacts
+                        <i class="oi oi-filled" data-icon="phone"/> Contacts
                     </span>
                 </a>
             </xpath>
diff --git a/addons/mass_mailing_sms/views/mailing_trace_views.xml b/addons/mass_mailing_sms/views/mailing_trace_views.xml
index 079fedbcbbc091..6989c9e3113d49 100644
--- a/addons/mass_mailing_sms/views/mailing_trace_views.xml
+++ b/addons/mass_mailing_sms/views/mailing_trace_views.xml
@@ -43,7 +43,7 @@
                 <field name="reply_datetime" optional="hide"/>
                 <field name="is_test_trace" optional="hide"/>
                 <button name="action_view_contact" type="object"
-                        string="Open Recipient" icon="fa-user"/>
+                        string="Open Recipient" icon="person" icon_class="oi-filled"/>
             </list>
         </field>
     </record>
@@ -93,7 +93,7 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button name="action_view_contact"
-                                type="object" icon="fa-user" class="oe_stat_button">
+                                type="object" icon="person" icon_class="oi-filled" class="oe_stat_button">
                             <span widget="statinfo">Open Recipient</span>
                         </button>
                     </div>
diff --git a/addons/mass_mailing_sms/views/utm_campaign_views.xml b/addons/mass_mailing_sms/views/utm_campaign_views.xml
index afbc4e47351396..ae052367b206c8 100644
--- a/addons/mass_mailing_sms/views/utm_campaign_views.xml
+++ b/addons/mass_mailing_sms/views/utm_campaign_views.xml
@@ -15,7 +15,7 @@
                  type="object"
                  class="oe_stat_button order-11"
                  invisible="mailing_sms_count == 0 or not is_mailing_campaign_activated"
-                 icon="fa-mobile" groups="mass_mailing.group_mass_mailing_user">
+                 icon="smartphone" groups="mass_mailing.group_mass_mailing_user">
                     <field name="mailing_sms_count" widget="statinfo" string="SMS"/>
                 </button>
             </xpath>
diff --git a/addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml b/addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml
index ab48d5f1a61b63..bc1349b09b4006 100644
--- a/addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml
+++ b/addons/mass_mailing_themes/views/mass_mailing_themes_templates.xml
@@ -222,7 +222,7 @@
                             <div class="col-md-8 s_media_list_body">
                                 <h3>The future of smartphone video production</h3>
                                 <p>Modern smartphones have all the built-in tech equal to a majority of the current professional cameras.</p>
-                                <p><a class="btn btn-primary" t-att-href="website_url_or_none"><span class="fa fa-play" />&amp;nbsp;&amp;nbsp;WATCH VIDEO</a>
+                                <p><a class="btn btn-primary" t-att-href="website_url_or_none"><span class="oi" data-icon="play_arrow" />&amp;nbsp;&amp;nbsp;WATCH VIDEO</a>
                                 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                                 <a class="btn btn-link" href="#">READ MORE</a></p>
                             </div>
@@ -366,7 +366,7 @@
             <p style="text-align: center;"><font class="text-white">Here's your coupon code*:</font></p>
             <table cellpadding="0" cellspacing="0" align="center" class="border" style="background-color: rgb(36, 37, 48) !important; border-collapse: collapse; border-color: rgb(198, 150, 120) !important;">
                 <tr>
-                    <td width="50" height="50" align="center" class="o_mail_no_options" style="min-width: 50px; max-width: 5.6rem; width: 50px !important; background-color: rgb(198, 150, 120) !important; text-align: center;"><i class="fa fa-2x fa-ticket" style="color: rgb(36, 37, 48) !important;"/></td>
+                    <td width="50" height="50" align="center" class="o_mail_no_options" style="min-width: 50px; max-width: 5.6rem; width: 50px !important; background-color: rgb(198, 150, 120) !important; text-align: center;"><i class="oi oi-2x" data-icon="confirmation_number" style="color: rgb(36, 37, 48) !important;"/></td>
                     <td width="200" height="50" align="center" style="min-width: 150px; width: 200px;"><p class="mb0"><span style="font-weight: bolder;"><font class="text-white">VIP10</font></span></p></td>
                 </tr>
             </table>
@@ -476,27 +476,27 @@
                         <p>
                             <a class="btn btn-link" style="text-align:left" href="#">
                                 Interview with Janet James&amp;nbsp;
-                                <span class="fa fa-angle-right"/>
+                                <span class="oi" data-icon="keyboard_arrow_right"/>
                             </a>
                             <br/>
                             <a class="btn btn-link" style="text-align:left" href="#">
                                 Destinations for an eco-holiday&amp;nbsp;
-                                <span class="fa fa-angle-right"/>
+                                <span class="oi" data-icon="keyboard_arrow_right"/>
                             </a>
                             <br/>
                             <a class="btn btn-link" style="text-align:left" href="#">
                                 Top 5 energy-boosting morning routines&amp;nbsp;
-                                <span class="fa fa-angle-right"/>
+                                <span class="oi" data-icon="keyboard_arrow_right"/>
                             </a>
                             <br/>
                             <a class="btn btn-link" style="text-align:left" href="#">
                                 Delicious recipes from around the world&amp;nbsp;
-                                <span class="fa fa-angle-right"/>
+                                <span class="oi" data-icon="keyboard_arrow_right"/>
                             </a>
                             <br/>
                             <a class="btn btn-link" style="text-align:left" href="#">
                                 Rainy day ideas&amp;nbsp;
-                                <span class="fa fa-angle-right"/>
+                                <span class="oi" data-icon="keyboard_arrow_right"/>
                             </a>
                         </p>
                     </div>
@@ -518,7 +518,7 @@
                         <p style="text-align: left;">Bitten by the travel bug but looking to travel consciously? Eco-travel is the way forward.</p>
                         <p style="text-align: right;">
                             <a href="#" class="btn btn-link">
-                                Find out more&amp;nbsp;<span class="fa fa-angle-right"/>
+                                Find out more&amp;nbsp;<span class="oi" data-icon="keyboard_arrow_right"/>
                             </a>
                         </p>
                     </div>
@@ -531,7 +531,7 @@
                         <p style="text-align: left;">Imagine waking up with more energy, more flexibility, with less stress and fewer instances of anxiously rushing out the door.</p>
                         <p style="text-align: right;">
                             <a href="#" class="btn btn-link">
-                                Find out more&amp;nbsp;<span class="fa fa-angle-right"/>
+                                Find out more&amp;nbsp;<span class="oi" data-icon="keyboard_arrow_right"/>
                             </a>
                         </p>
                     </div>
@@ -550,7 +550,7 @@
                         <p>Travel without leaving your kitchen with these international recipes. From Canada to Australia, Mexico to Sweden, and everywhere in between.</p>
                         <div style="text-align:right">
                             <a href="#" class="btn btn-link">
-                                Read More&amp;nbsp;<span class="fa fa-angle-right"/>
+                                Read More&amp;nbsp;<span class="oi" data-icon="keyboard_arrow_right"/>
                             </a>
                         </div>
                     </div>
@@ -700,13 +700,13 @@
                     <div class="col-md-4 pt16 pb16">
                         <h1>
                             <a t-att-href="website_url_or_none" target="_blank">
-                                <span style="color: rgb(255, 187, 0) !important; font-size: 32px" class="fa fa-1x fa-sun-o" />
+                                <span style="color: rgb(255, 187, 0) !important; font-size: 32px" class="oi oi-1x" data-icon="light_mode" />
                             </a><span style="font-size: 32px;"><font style="font-weight: bolder; color: rgb(255, 255, 255); background-color: rgb(255, 187, 0);">SOLAR</font></span>
                         </h1>
                     </div>
                     <div class="col-md-8 o_mail_header_social" style="text-align:right;">
                         <a href="/view">
-                            <span style="font-weight: bolder;">View online</span>&amp;nbsp;<span class="fa fa-external-link" />
+                            <span style="font-weight: bolder;">View online</span>&amp;nbsp;<span class="oi" data-icon="open_in_new" />
                         </a>
                     </div>
                 </div>
@@ -728,7 +728,7 @@
             </p>
             <table cellpadding="0" cellspacing="0" align="center" class="border" style="border-collapse: collapse; border-color: rgb(255, 187, 0) !important; border-width: 3px !important; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                 <tr>
-                    <td width="50" height="50" align="center" class="o_mail_no_options o_cc" style="width:50px!important; min-width: 50px; max-width:5.6rem; text-align: center"><i class="fa fa-2x fa-ticket" style="color: rgb(255, 187, 0) !important;"></i></td>
+                    <td width="50" height="50" align="center" class="o_mail_no_options o_cc" style="width:50px!important; min-width: 50px; max-width:5.6rem; text-align: center"><i class="oi oi-2x" data-icon="confirmation_number" style="color: rgb(255, 187, 0) !important;"></i></td>
                     <td width="200" height="50" align="center" class="o_cc" style="min-width: 150px; width: 200px; text-align: center;"><p class="mb0">ENDOFSUMMER20</p></td>
                 </tr>
             </table>
@@ -1348,7 +1348,7 @@
     <!-- Training -->
     <template id="theme_training_template">
         <style id="design-element">
-            * :not(.fa), *:not(.fa) {
+            * :not(.oi), *:not(.oi) {
                 font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif !important;
             }
             .o_layout .o_mail_wrapper .o_mail_wrapper_td {
@@ -1414,7 +1414,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <p><i class="fa fa-map-marker" contenteditable="false"/> London, United Kingdom</p>
+                                <p><i class="oi" data-icon="location_on" contenteditable="false"/> London, United Kingdom</p>
                             </div>
                         </div>
                     </div>
diff --git a/addons/microsoft_outlook/views/fetchmail_server_views.xml b/addons/microsoft_outlook/views/fetchmail_server_views.xml
index b852e9088a647a..3d7143dfbdf589 100644
--- a/addons/microsoft_outlook/views/fetchmail_server_views.xml
+++ b/addons/microsoft_outlook/views/fetchmail_server_views.xml
@@ -17,13 +17,13 @@
                     <button type="object"
                         name="open_microsoft_outlook_uri" class="btn-link px-0"
                         invisible="server_type != 'outlook' or microsoft_outlook_refresh_token">
-                        <i class="oi oi-arrow-right"/>
+                        <i class="oi" data-icon="east"/>
                         Connect your Outlook account
                     </button>
                     <button type="object"
                         name="open_microsoft_outlook_uri" class="btn-link px-0 ms-2"
                         invisible="server_type != 'outlook' or not microsoft_outlook_refresh_token">
-                        <i class="fa fa-cog" title="Edit Settings"/>
+                        <i class="oi oi-filled" data-icon="settings" title="Edit Settings"/>
                     </button>
                 </div>
             </field>
diff --git a/addons/microsoft_outlook/views/ir_mail_server_views.xml b/addons/microsoft_outlook/views/ir_mail_server_views.xml
index 153e537c80f972..747332a6d9fa9d 100644
--- a/addons/microsoft_outlook/views/ir_mail_server_views.xml
+++ b/addons/microsoft_outlook/views/ir_mail_server_views.xml
@@ -17,13 +17,13 @@
                     <button type="object"
                         name="open_microsoft_outlook_uri" class="btn-link px-0"
                         invisible="smtp_authentication != 'outlook' or microsoft_outlook_refresh_token">
-                        <i class="oi oi-arrow-right"/>
+                        <i class="oi" data-icon="east"/>
                         Connect your Outlook account
                     </button>
                     <button type="object"
                         name="open_microsoft_outlook_uri" class="btn-link px-0 ms-2"
                         invisible="smtp_authentication != 'outlook' or not microsoft_outlook_refresh_token">
-                        <i class="fa fa-cog" title="Edit Settings"/>
+                        <i class="oi oi-filled" data-icon="settings" title="Edit Settings"/>
                     </button>
                 </div>
             </field>
diff --git a/addons/mrp/models/mrp_workorder.py b/addons/mrp/models/mrp_workorder.py
index 561e938cee6a73..30538fd014c415 100644
--- a/addons/mrp/models/mrp_workorder.py
+++ b/addons/mrp/models/mrp_workorder.py
@@ -233,7 +233,7 @@ def _compute_json_popover(self):
                 'popoverTemplate': 'mrp.workorderPopover',
                 'infos': infos,
                 'color': color_icon,
-                'icon': 'fa-exclamation-triangle' if color_icon in ['text-warning', 'text-danger'] else 'fa-info-circle',
+                'icon': 'warning' if color_icon in ['text-warning', 'text-danger'] else 'info',
                 'replan': color_icon not in [False, 'text-primary']
             })
 
diff --git a/addons/mrp/report/report_stock_rule.xml b/addons/mrp/report/report_stock_rule.xml
index e87c60e9bfeb36..31e5985c74f44d 100644
--- a/addons/mrp/report/report_stock_rule.xml
+++ b/addons/mrp/report/report_stock_rule.xml
@@ -17,14 +17,14 @@
         </xpath>
         <xpath expr="//div[hasclass('o_report_stock_rule_rule_name')]/span" position="before">
             <t t-if="rule[0].action == 'manufacture'">
-                <i class="fa fa-wrench fa-fw" t-attf-style="color: #{color};"/>
+                <i class="oi oi-fw" data-icon="build" t-attf-style="color: #{color};"/>
             </t>
         </xpath>
         <xpath expr="//div[hasclass('o_report_stock_rule_legend')]" position="inside">
             <div class="o_report_stock_rule_legend_line">
                 <div class="o_report_stock_rule_legend_label">Manufacture</div>
                 <div class="o_report_stock_rule_legend_symbol">
-                    <div class="fa fa-wrench fa-fw" t-attf-style="color: #{color};"/>
+                    <div class="oi oi-fw" data-icon="build" t-attf-style="color: #{color};"/>
                 </div>
             </div>
         </xpath>
diff --git a/addons/mrp/static/src/components/bom_overview_control_panel/mrp_bom_overview_control_panel.xml b/addons/mrp/static/src/components/bom_overview_control_panel/mrp_bom_overview_control_panel.xml
index 836b86eacdf3be..89bcf3849f898b 100644
--- a/addons/mrp/static/src/components/bom_overview_control_panel/mrp_bom_overview_control_panel.xml
+++ b/addons/mrp/static/src/components/bom_overview_control_panel/mrp_bom_overview_control_panel.xml
@@ -43,19 +43,19 @@
                 <t t-if="this.props.warehouses.length > 1" class="btn-group flex-grow-1 flex-md-grow-0">
                     <Dropdown items="this.warehousesItems">
                         <button class="btn btn-light o-dropdown-caret">
-                            <span class="fa fa-home"/> Warehouse: <t t-out="this.props.currentWarehouse.name"/>
+                            <span class="oi" data-icon="home"/> Warehouse: <t t-out="this.props.currentWarehouse.name"/>
                         </button>
                     </Dropdown>
                 </t>
                 <t t-if="this.props.showOptions.mode == 'overview'">
                     <div class="o_row" t-on-click="() => this.props.changeMode('forecast')" >
-                        <i class="btn fa fa-toggle-off fa-lg pe-1"/>
+                        <i class="btn oi oi-lg pe-1" data-icon="toggle_off"/>
                         <span>Forecast</span>
                     </div>
                 </t>
                 <t t-else="">
                     <div class="o_row" t-on-click="() => this.props.changeMode('overview')" >
-                        <i class="btn fa fa-toggle-on fa-lg pe-1"/>
+                        <i class="btn oi oi-lg pe-1" data-icon="toggle_on"/>
                         <span>Forecast</span>
                     </div>
                 </t>
diff --git a/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.xml b/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.xml
index 3a30a0a882268d..b5aa67cf6f0781 100644
--- a/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.xml
+++ b/addons/mrp/static/src/components/bom_overview_display_filter/mrp_bom_overview_display_filter.xml
@@ -5,7 +5,7 @@
         <div class="btn-group flex-grow-1 flex-md-grow-0'">
             <Dropdown  items="this.displayableOptions">
                 <button class="btn btn-secondary o-dropdown-caret">
-                    <span class="fa fa-filter"/>
+                    <span class="oi oi-filled" data-icon="filter_alt"/>
                     Display
                 </button>
             </Dropdown>
diff --git a/addons/mrp/static/src/components/bom_overview_line/mrp_bom_overview_line.xml b/addons/mrp/static/src/components/bom_overview_line/mrp_bom_overview_line.xml
index 383c08e1dc0f54..e5c210b1f31ba4 100644
--- a/addons/mrp/static/src/components/bom_overview_line/mrp_bom_overview_line.xml
+++ b/addons/mrp/static/src/components/bom_overview_line/mrp_bom_overview_line.xml
@@ -8,12 +8,12 @@
                     <t t-set="title_fold">Fold</t>
                     <t t-set="title_unfold">Unfold</t>
                     <span class="o_mrp_bom_unfoldable btn btn-light p-0" t-att-aria-label="this.props.isFolded ? title_unfold : title_fold" t-att-title="this.props.isFolded ? title_unfold : title_fold" style="margin-right: 1px">
-                        <i t-attf-class="fa fa-fw fa-caret-{{ this.props.isFolded ? 'right' : 'down' }}" role="img"/>
+                        <i class="oi oi-fw" t-attf-data-icon="{{ this.props.isFolded ? 'arrow_right' : 'arrow_drop_down' }}" role="img"/>
                     </span>
                 </t>
                 <a href="#" t-on-click.prevent="() => this.goToAction(this.data.link_id, this.data.link_model)" t-out="this.data.name"/>
                 <t t-if="this.data.phantom_bom">
-                    <div class="fa fa-dropbox" title="This is a BoM of type Kit!" role="img" aria-label="This is a BoM of type Kit!"/>
+                    <div class="oi" data-icon="oi_dropbox" title="This is a BoM of type Kit!" role="img" aria-label="This is a BoM of type Kit!"/>
                 </t>
             </div>
         </td>
@@ -51,7 +51,7 @@
         <td t-attf-class="text-end {{ this.data.type == 'component' ? 'opacity-50' : '' }}" t-attf-colspan="{{ this.forecastMode ? 1 : 2 }}" t-out="this.formatMonetary(this.data.bom_cost)"/>
         <td t-if="this.showAttachments" class="text-center">
             <span t-if="this.data.has_attachments">
-                <a href="#" role="button" t-on-click.prevent="this.goToAttachment" class="fa fa-fw o_button_icon fa-files-o"/>
+                <a href="#" role="button" t-on-click.prevent="this.goToAttachment" class="o_button_icon oi oi-fw" data-icon="content_copy"/>
             </span>
         </td>
     </tr>
diff --git a/addons/mrp/static/src/components/bom_overview_special_line/mrp_bom_overview_special_line.xml b/addons/mrp/static/src/components/bom_overview_special_line/mrp_bom_overview_special_line.xml
index bb497033820a44..b818f0435048f9 100644
--- a/addons/mrp/static/src/components/bom_overview_special_line/mrp_bom_overview_special_line.xml
+++ b/addons/mrp/static/src/components/bom_overview_special_line/mrp_bom_overview_special_line.xml
@@ -7,7 +7,7 @@
             <t t-set="title_fold">Fold</t>
             <t t-set="title_unfold">Unfold</t>
             <span t-if="this.hasFoldButton" t-attf-class="o_mrp_bom_{{ this.props.isFolded ? 'unfoldable' : 'foldable' }} btn btn-light ps-0 py-0" t-att-aria-label="this.props.isFolded ? title_unfold : title_fold" t-att-title="this.props.isFolded ? title_unfold : title_fold">
-                <i t-attf-class="fa fa-fw fa-caret-{{ this.props.isFolded ? 'right' : 'down' }}" role="img"/>
+                <i class="oi oi-fw" t-attf-data-icon="{{ this.props.isFolded ? 'arrow_right' : 'arrow_drop_down' }}" role="img"/>
                 <t t-if="this.props.type == 'operations'">Operations</t>
                 <t t-elif="this.props.type == 'byproducts'">By-Products</t>
             </span>
diff --git a/addons/mrp/static/src/components/mo_overview_byproducts_block/mrp_mo_overview_byproducts_block.xml b/addons/mrp/static/src/components/mo_overview_byproducts_block/mrp_mo_overview_byproducts_block.xml
index bd04340e51814b..87fec9c9484814 100644
--- a/addons/mrp/static/src/components/mo_overview_byproducts_block/mrp_mo_overview_byproducts_block.xml
+++ b/addons/mrp/static/src/components/mo_overview_byproducts_block/mrp_mo_overview_byproducts_block.xml
@@ -7,7 +7,7 @@
                 <td class="text-start">
                     <span t-attf-style="margin-left: {{ this.level * 20 }}px"/>
                     <button t-on-click="this.toggleFolded" class="btn btn-light ps-0 py-0" t-attf-aria-label="{{ this.state.isFolded ? 'Unfold' : 'Fold' }}" t-attf-title="{{ this.state.isFolded ? 'Unfold' : 'Fold' }}">
-                        <i t-attf-class="fa fa-fw fa-caret-{{ this.state.isFolded ? 'right' : 'down' }}" role="img"/>
+                        <i class="oi oi-fw" t-attf-data-icon="{{ this.state.isFolded ? 'arrow_right' : 'arrow_drop_down' }}" role="img"/>
                         By-Products
                     </button>
                 </td>
diff --git a/addons/mrp/static/src/components/mo_overview_line/mrp_mo_overview_line.xml b/addons/mrp/static/src/components/mo_overview_line/mrp_mo_overview_line.xml
index 4f676a6b2bcdf1..246b3020f5458d 100644
--- a/addons/mrp/static/src/components/mo_overview_line/mrp_mo_overview_line.xml
+++ b/addons/mrp/static/src/components/mo_overview_line/mrp_mo_overview_line.xml
@@ -5,7 +5,7 @@
         <td class="text-start">
             <div t-attf-style="margin-left: {{ this.marginMultiplicator * 20 }}px" class="d-inline-block">
                 <span t-if="this.props.hasFoldButton" class="btn btn-light p-0" t-attf-aria-label="{{ this.foldButtonTitle }}" t-attf-title="{{ this.foldButtonTitle }}" style="margin-right: 1px">
-                    <i t-attf-class="fa fa-fw fa-caret-{{ this.props.isFolded ? 'right' : 'down' }}" role="img"/>
+                    <i class="oi oi-fw" t-attf-data-icon="{{ this.props.isFolded ? 'arrow_right' : 'arrow_drop_down' }}" role="img"/>
                 </span>
                 <a t-if="this.data.id and this.data.model === 'mrp.workorder'" href="#" t-on-click.prevent="this.openWorkorder" t-out="this.data.name"/>
                 <a t-elif="this.data.id and this.data.model" href="#" t-on-click.prevent="this.openForm" t-out="this.data.name"/>
@@ -32,7 +32,7 @@
         <td class="text-end" t-if="this.props.showOptions.receipts">
             <t t-if="this.data.receipt">
                 <span t-attf-class="{{ this.getColorClass(this.data.receipt.decorator) }}" t-out="this.data.receipt.display"/>
-                <a href="#" role="button" t-on-click.prevent="this.openForecast" title="Forecast Report" t-attf-class="fa fa-fw fa-area-chart ms-1 {{this.getColorClass(this.data.receipt.decorator)}}"/>
+                <a href="#" role="button" t-on-click.prevent="this.openForecast" title="Forecast Report" t-attf-class="oi oi-fw ms-1 {{this.getColorClass(data.receipt.decorator)}}" data-icon="area_chart"/>
             </t>
         </td>
         <td class="text-end" t-if="this.props.showOptions.unitCosts" t-out="this.formatMonetary(this.data.unit_cost)"/>
diff --git a/addons/mrp/static/src/components/mo_overview_operations_block/mrp_mo_overview_operations_block.xml b/addons/mrp/static/src/components/mo_overview_operations_block/mrp_mo_overview_operations_block.xml
index 44a92001368ae5..e14cf1aa5d2258 100644
--- a/addons/mrp/static/src/components/mo_overview_operations_block/mrp_mo_overview_operations_block.xml
+++ b/addons/mrp/static/src/components/mo_overview_operations_block/mrp_mo_overview_operations_block.xml
@@ -7,7 +7,7 @@
                 <td class="text-start">
                     <span t-attf-style="margin-left: {{ this.level * 20 }}px"/>
                     <span class="btn btn-light ps-0 py-0" t-attf-aria-label="{{ this.state.isFolded ? 'Unfold' : 'Fold' }}" t-attf-title="{{ this.state.isFolded ? 'Unfold' : 'Fold' }}">
-                        <i t-attf-class="fa fa-fw fa-caret-{{ this.state.isFolded ? 'right' : 'down' }}" role="img"/>
+                        <i class="oi oi-fw" t-attf-data-icon="{{ this.state.isFolded ? 'arrow_right' : 'arrow_drop_down' }}" role="img"/>
                         Operations
                     </span>
                 </td>
diff --git a/addons/mrp/static/src/components/wo_list_view_dropdown/wo_list_view_dropdown.xml b/addons/mrp/static/src/components/wo_list_view_dropdown/wo_list_view_dropdown.xml
index 1b5a44944a045f..e7e4b1c76812f0 100644
--- a/addons/mrp/static/src/components/wo_list_view_dropdown/wo_list_view_dropdown.xml
+++ b/addons/mrp/static/src/components/wo_list_view_dropdown/wo_list_view_dropdown.xml
@@ -13,31 +13,31 @@
                 <DropdownItem
                     class="`d-flex align-items-center`"
                     onSelected="() => this.setState('blocked')">
-                        <span t-attf-class="fa fa-lg fa-exclamation-circle text-warning me-2"/>
+                        <span class="oi oi-lg text-warning me-2" data-icon="error"/>
                         <span>Blocked</span>
                 </DropdownItem>
                 <DropdownItem
                     class="`d-flex align-items-center`"
                     onSelected="() => this.setState('ready')">
-                        <span t-attf-class="fa fa-lg fa-circle text-muted me-2"/>
+                        <span t-attf-class="oi oi-lg oi-filled text-muted me-2" data-icon="circle"/>
                         <span>To Do</span>
                 </DropdownItem>
                 <DropdownItem
                     class="`d-flex align-items-center`"
                     onSelected="() => this.setState('progress')">
-                        <span t-attf-class="fa fa-lg fa-play-circle text-info me-2"/>
+                        <span t-attf-class="oi oi-lg oi-filled text-info me-2" data-icon="play_circle"/>
                         <span>In Progress</span>
                 </DropdownItem>
                 <DropdownItem
                     class="`d-flex align-items-center`"
                     onSelected="() => this.setState('cancel')">
-                        <span t-attf-class="fa fa-lg fa-times-circle text-danger me-2"/>
+                        <span t-attf-class="oi oi-lg oi-filled text-danger me-2" data-icon="cancel"/>
                         <span>Cancelled</span>
                 </DropdownItem>
                 <DropdownItem
                     class="`d-flex align-items-center`"
                     onSelected="() => this.setState('done')">
-                        <span t-attf-class="fa fa-lg fa-check-circle text-success me-2"/>
+                        <span t-attf-class="oi oi-lg oi-filled text-success me-2" data-icon="check_circle"/>
                         <span>Done</span>
                 </DropdownItem>
             </t>
diff --git a/addons/mrp/static/src/mrp_forecasted/forecasted_details.xml b/addons/mrp/static/src/mrp_forecasted/forecasted_details.xml
index d47b1e0b0098e3..49d35e1d4d8399 100644
--- a/addons/mrp/static/src/mrp_forecasted/forecasted_details.xml
+++ b/addons/mrp/static/src/mrp_forecasted/forecasted_details.xml
@@ -23,7 +23,8 @@
         </xpath>
         <xpath expr="//button[@name='change_priority_link']" position="after">
             <button t-if="line.move_out and line.move_out.raw_material_production_id"
-                t-attf-class="o_priority o_priority_star fa fa-star#{line.move_out.raw_material_production_id.priority=='1' ? ' one' : '-o zero'}"
+                t-attf-class="o_priority o_priority_star oi #{line.move_out.raw_material_production_id.priority=='1' ? 'oi-filled one' : 'zero'}"
+                data-icon="star"
                 t-on-click="() => this._onClickChangePriority('mrp.production', line.move_out.raw_material_production_id)"/>
         </xpath>
     </t>
diff --git a/addons/mrp/static/src/widgets/mrp_workorder_popover.xml b/addons/mrp/static/src/widgets/mrp_workorder_popover.xml
index ceeb8dcc7f2c9e..c4c92b364a9cc9 100644
--- a/addons/mrp/static/src/widgets/mrp_workorder_popover.xml
+++ b/addons/mrp/static/src/widgets/mrp_workorder_popover.xml
@@ -4,7 +4,7 @@
     <div t-name="mrp.workorderPopover">
         <h6>Scheduling Information</h6>
         <t t-foreach="this.props.infos" t-as="info" t-key="info_index">
-            <i t-attf-class="oi oi-arrow-right me-2 #{ info.color }"></i><t t-out="info.msg"/><br/>
+            <i t-attf-class="oi me-2 #{ info.color }" data-icon="east"></i><t t-out="info.msg"/><br/>
         </t>
         <button t-if="this.props.replan" t-on-click="this.onReplanClick" class="btn btn-sm btn-primary m-1 float-end action_replan_button">Replan</button>
     </div>
diff --git a/addons/mrp/static/tests/mrp_document_kanban.test.js b/addons/mrp/static/tests/mrp_document_kanban.test.js
index 8d52875a86009f..8ecfbc5999f56e 100644
--- a/addons/mrp/static/tests/mrp_document_kanban.test.js
+++ b/addons/mrp/static/tests/mrp_document_kanban.test.js
@@ -102,7 +102,7 @@ test("mrp: click on image opens attachment viewer", async () => {
 
     await click(".o_kanban_previewer");
     await contains(".o-FileViewer");
-    await click(".o-FileViewer-headerButton .fa-times");
+    await click(".o-FileViewer-headerButton [data-icon='close']");
     await contains(".o-FileViewer", { count: 0 });
 });
 
diff --git a/addons/mrp/static/tests/tours/mrp_manufacture_from_bom.js b/addons/mrp/static/tests/tours/mrp_manufacture_from_bom.js
index 450a50a4acdc62..6324ef5c51f8ec 100644
--- a/addons/mrp/static/tests/tours/mrp_manufacture_from_bom.js
+++ b/addons/mrp/static/tests/tours/mrp_manufacture_from_bom.js
@@ -11,7 +11,7 @@ registry.category("web_tour.tours").add("test_manufacture_from_bom", {
             run: "click",
         },
         {
-            trigger: '.fa-toggle-off',
+            trigger: '[data-icon="toggle_off"]',
             run: "click",
         },
         {
diff --git a/addons/mrp/static/tests/tours/mrp_sm_sml_synchronization.js b/addons/mrp/static/tests/tours/mrp_sm_sml_synchronization.js
index a333fd6fa7107d..019ed5b1da8937 100644
--- a/addons/mrp/static/tests/tours/mrp_sm_sml_synchronization.js
+++ b/addons/mrp/static/tests/tours/mrp_sm_sml_synchronization.js
@@ -85,7 +85,7 @@ registry.category("web_tour.tours").add('test_manufacturing_and_byproduct_sm_to_
             run: "click",
         },
         {
-            trigger: ".fa-list",
+            trigger: "[data-icon='format_list_bulleted']",
             run: "click",
         },
         {
@@ -114,7 +114,7 @@ registry.category("web_tour.tours").add('test_manufacturing_and_byproduct_sm_to_
             run: 'edit 5',
         },
         {
-            trigger: ".fa-list",
+            trigger: "[data-icon='format_list_bulleted']",
             run: "click",
         },
         {
@@ -143,7 +143,7 @@ registry.category("web_tour.tours").add('test_manufacturing_and_byproduct_sm_to_
             run: 'edit 7',
         },
         {
-            trigger: ".fa-list",
+            trigger: "[data-icon='format_list_bulleted']",
             run: "click",
         },
         {
diff --git a/addons/mrp/views/mrp_bom_views.xml b/addons/mrp/views/mrp_bom_views.xml
index 6ac9ca72bb5189..235b7b0e16effd 100644
--- a/addons/mrp/views/mrp_bom_views.xml
+++ b/addons/mrp/views/mrp_bom_views.xml
@@ -38,13 +38,13 @@
                 <form string="Bill of Material">
                     <sheet>
                         <div class="oe_button_box" name="button_box" invisible="context.get('parent_production_id')">
-                            <button name="%(action_mrp_routing_time)d" type="action" class="oe_stat_button" icon="fa-clock-o" groups="mrp.group_mrp_routings">
+                            <button name="%(action_mrp_routing_time)d" type="action" class="oe_stat_button" icon="schedule" groups="mrp.group_mrp_routings">
                                 <div class="o_field_widget o_stat_info">
                                     <span class="o_stat_text">Operations<br/>Performance</span>
                                 </div>
                             </button>
                             <button name="%(action_report_mrp_bom)d" type="action"
-                                class="oe_stat_button" icon="fa-bars">
+                                class="oe_stat_button" icon="menu">
                                 <div class="o_stat_info">
                                     <span class="o_stat_text">BoM Overview</span>
                                 </div>
@@ -95,7 +95,7 @@
                                     <field name="sequence" widget="handle"/>
                                     <field name="product_id" context="{'default_is_storable': True}"/>
                                     <field name="product_tmpl_id" column_invisible="True"/>
-                                    <button name="action_see_attachments" type="object" icon="fa-files-o" aria-label="Product Attachments" title="Product Attachments" class="float-end" column_invisible="context.get('parent_production_id')"/>
+                                    <button name="action_see_attachments" type="object" icon="content_copy" aria-label="Product Attachments" title="Product Attachments" class="float-end" column_invisible="context.get('parent_production_id')"/>
                                     <field name="attachments_count" class="text-start" string=" " column_invisible="context.get('parent_production_id')"/>
                                     <field name="product_qty"/>
                                     <field name="parent_product_tmpl_id" column_invisible="True" />
diff --git a/addons/mrp/views/mrp_production_views.xml b/addons/mrp/views/mrp_production_views.xml
index 9d9e34dfdb31a5..282e3e80101f68 100644
--- a/addons/mrp/views/mrp_production_views.xml
+++ b/addons/mrp/views/mrp_production_views.xml
@@ -254,58 +254,58 @@
                     <field name="workorder_ids" invisible="1"/>
                     <div class="oe_button_box" name="button_box">
                         <button name="action_view_reception_report" string="Allocation" type="object"
-                            class="oe_stat_button" icon="fa-list"
+                            class="oe_stat_button" icon="format_list_bulleted"
                             invisible="not show_allocation"
                             groups="mrp.group_mrp_reception_report"/>
-                        <button class="oe_stat_button" name="action_view_mrp_production_childs" type="object" icon="fa-wrench" invisible="mrp_production_child_count == 0">
+                        <button class="oe_stat_button" name="action_view_mrp_production_childs" type="object" icon="build" invisible="mrp_production_child_count == 0">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value"><field name="mrp_production_child_count"/></span>
                                 <span class="o_stat_text">Child MO</span>
                             </div>
                         </button>
-                        <button class="oe_stat_button" name="action_view_mrp_production_sources" type="object" icon="fa-wrench" invisible="mrp_production_source_count == 0">
+                        <button class="oe_stat_button" name="action_view_mrp_production_sources" type="object" icon="build" invisible="mrp_production_source_count == 0">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value"><field name="mrp_production_source_count"/></span>
                                 <span class="o_stat_text">Source MO</span>
                             </div>
                         </button>
-                        <button class="oe_stat_button" name="action_view_mrp_production_backorders" type="object" icon="fa-wrench" invisible="mrp_production_backorder_count &lt; 2">
+                        <button class="oe_stat_button" name="action_view_mrp_production_backorders" type="object" icon="build" invisible="mrp_production_backorder_count &lt; 2">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value"><field name="mrp_production_backorder_count"/></span>
                                 <span class="o_stat_text">Backorders</span>
                             </div>
                         </button>
-                        <button class="oe_stat_button" name="action_view_mrp_production_unbuilds" type="object" icon="fa-undo" invisible="unbuild_count == 0">
+                        <button class="oe_stat_button" name="action_view_mrp_production_unbuilds" type="object" icon="undo" invisible="unbuild_count == 0">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value"><field name="unbuild_count"/></span>
                                 <span class="o_stat_text">Unbuilds</span>
                             </div>
                         </button>
-                        <button class="oe_stat_button" name="action_see_move_scrap" type="object" icon="oi-arrows-v" invisible="scrap_count == 0">
+                        <button class="oe_stat_button" name="action_see_move_scrap" type="object" icon="height" invisible="scrap_count == 0">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value"><field name="scrap_count"/></span>
                                 <span class="o_stat_text">Scraps</span>
                             </div>
                         </button>
-                        <button type="object" name="action_view_mo_delivery" class="oe_stat_button" icon="fa-truck"  groups="base.group_user" invisible="delivery_count == 0">
+                        <button type="object" name="action_view_mo_delivery" class="oe_stat_button" icon="local_shipping"  groups="base.group_user" invisible="delivery_count == 0">
                             <field name="delivery_count" widget="statinfo" string="Transfers"/>
                         </button>
-                        <button name="%(stock.action_stock_report)d" icon="oi-arrow-up" class="oe_stat_button" string="Traceability" type="action" invisible="state != 'done'" groups="stock.group_production_lot">
+                        <button name="%(stock.action_stock_report)d" icon="north" class="oe_stat_button" string="Traceability" type="action" invisible="state != 'done'" groups="stock.group_production_lot">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Traceability</span>
                             </div>
                         </button>
-                        <button name="%(action_mrp_production_moves)d" type="action" class="oe_stat_button" icon="fa-exchange" invisible="state not in ('progress', 'done')">
+                        <button name="%(action_mrp_production_moves)d" type="action" class="oe_stat_button" icon="swap_horiz" invisible="state not in ('progress', 'done')">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Product Moves</span>
                             </div>
                         </button>
-                        <button name="%(action_report_mo_overview)d" type="action" class="oe_stat_button" icon="fa-bars">
+                        <button name="%(action_report_mo_overview)d" type="action" class="oe_stat_button" icon="menu">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Overview</span>
                             </div>
                         </button>
-                        <button class="oe_stat_button" name="action_view_serial_numbers" type="object" icon="fa-wrench" invisible="serial_numbers_count == 0">
+                        <button class="oe_stat_button" name="action_view_serial_numbers" type="object" icon="build" invisible="serial_numbers_count == 0">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value"><field name="serial_numbers_count"/></span>
                                 <span class="o_stat_text">Serial Numbers</span>
@@ -345,8 +345,8 @@
                                 <label for="uom_id" string="" class="oe_inline"/>
                                 <field name="uom_id" options="{'no_open': True, 'no_create': True, 'quantity_field': 'product_qty'}" groups="uom.group_uom" widget="many2one_uom" readonly="state != 'draft'" class="flex-grow-0" style="width:auto!important"/>
                                 <span name="to_produce" class='fw-bold text-nowrap'>To Produce</span>
-                                <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="fa-area-chart" invisible="forecasted_issue"/>
-                                <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="fa-area-chart" invisible="not forecasted_issue" class="text-danger"/>
+                                <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="area_chart" invisible="forecasted_issue"/>
+                                <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="area_chart" invisible="not forecasted_issue" class="text-danger"/>
                             </div>
                             <label for="bom_id" name="bom_label"/>
                             <div class='o_row' name="bom_div">
@@ -355,7 +355,7 @@
                                     context="{'default_product_tmpl_id': product_tmpl_id}"
                                     invisible="state != 'draft' and not bom_id"
                                     readonly="state != 'draft'"/>
-                                <button name="action_generate_bom" type="object" icon="fa-plus"
+                                <button name="action_generate_bom" type="object" icon="add"
                                     title="Generate a new BoM from this Manufacturing Order" groups="mrp.group_mrp_manager"
                                     invisible="not show_generate_bom">
                                     <span>Generate BOM</span>
@@ -561,8 +561,8 @@
                                         create="parent.use_create_components_lots"
                                         context="{'default_product_id': product_id}"
                                         domain="[('product_id','=',product_id)]"/>
-                                    <button name="action_show_details" type="object" title="Show Details" icon="fa-list" invisible="has_tracking not in ['lot', 'serial'] or not show_details_visible"/>
-                                    <button class="o_optional_button btn btn-light" name="action_show_details" type="object" title="Show Details" icon="fa-list" invisible="has_tracking in ['lot', 'serial'] or not show_details_visible"/>
+                                    <button name="action_show_details" type="object" title="Show Details" icon="format_list_bulleted" invisible="has_tracking not in ['lot', 'serial'] or not show_details_visible"/>
+                                    <button class="o_optional_button btn btn-light" name="action_show_details" type="object" title="Show Details" icon="format_list_bulleted" invisible="has_tracking in ['lot', 'serial'] or not show_details_visible"/>
                                 </list>
                             </field>
                         </page>
diff --git a/addons/mrp/views/mrp_unbuild_views.xml b/addons/mrp/views/mrp_unbuild_views.xml
index 55aace2b3e700d..78ac8d35bccf60 100644
--- a/addons/mrp/views/mrp_unbuild_views.xml
+++ b/addons/mrp/views/mrp_unbuild_views.xml
@@ -82,7 +82,7 @@
                     <sheet>
                         <div class="oe_button_box" name="button_box">
                             <button class="oe_stat_button" name="%(action_mrp_unbuild_moves)d"
-                                    type="action" icon="fa-exchange" invisible="state != 'done'">
+                                    type="action" icon="swap_horiz" invisible="state != 'done'">
                                     <div class="o_stat_info">
                                         <span class="o_stat_text">Product Moves</span>
                                     </div>
diff --git a/addons/mrp/views/mrp_workcenter_views.xml b/addons/mrp/views/mrp_workcenter_views.xml
index ab43c9b95218e1..3ab7f87a5c09b0 100644
--- a/addons/mrp/views/mrp_workcenter_views.xml
+++ b/addons/mrp/views/mrp_workcenter_views.xml
@@ -261,24 +261,24 @@
                                 name="action_show_operations"
                                 invisible="not has_routing_lines"
                                 context="{'default_workcenter_id': id}"
-                                class="oe_stat_button" icon="fa-cog">
+                                class="oe_stat_button" icon="settings" icon_class="oi-filled">
                                 <div class="o_stat_info">
                                     <span class="o_stat_text">Operations</span>
                                 </div>
                             </button>
-                            <button name="%(mrp_workcenter_productivity_report_oee)d" type="action" class="oe_stat_button" icon="fa-pie-chart">
+                            <button name="%(mrp_workcenter_productivity_report_oee)d" type="action" class="oe_stat_button" icon="pie_chart">
                                 <div class="o_field_widget o_stat_info">
                                     <span class="o_stat_value"><field name="oee" nolabel="1"/>%</span>
                                     <span class="o_stat_text">OEE</span>
                                 </div>
                             </button>
-                            <button name="%(mrp_workcenter_productivity_report_blocked)d" type="action" class="oe_stat_button" icon="fa-bar-chart">
+                            <button name="%(mrp_workcenter_productivity_report_blocked)d" type="action" class="oe_stat_button" icon="bar_chart">
                                 <div class="o_field_widget o_stat_info">
                                     <span class="o_stat_value"><field name="blocked_time" nolabel="1"/> Hours</span>
                                     <span class="o_stat_text">Lost</span>
                                 </div>
                             </button>
-                            <button name="%(action_mrp_workcenter_load_report_graph)d" type="action" class="oe_stat_button" icon="fa-bar-chart"
+                            <button name="%(action_mrp_workcenter_load_report_graph)d" type="action" class="oe_stat_button" icon="bar_chart"
                                 context="{'search_default_workcenter_id': id,
                                           'search_default_ready': True,
                                           'search_default_waiting': True,
@@ -289,7 +289,7 @@
                                     <span class="o_stat_text">Load</span>
                                 </div>
                             </button>
-                            <button name="%(mrp_workorder_report)d" type="action" class="oe_stat_button" icon="fa-bar-chart" context="{'search_default_workcenter_id': id, 'search_default_thisyear': True}">
+                            <button name="%(mrp_workorder_report)d" type="action" class="oe_stat_button" icon="bar_chart" context="{'search_default_workcenter_id': id, 'search_default_thisyear': True}">
                                 <div class="o_field_widget o_stat_info">
                                     <span class="o_stat_value"><field name="performance" nolabel="1"/>%</span>
                                     <span class="o_stat_text">Performance</span>
diff --git a/addons/mrp/views/mrp_workorder_views.xml b/addons/mrp/views/mrp_workorder_views.xml
index 3b030233c69979..d02740061bd8e1 100644
--- a/addons/mrp/views/mrp_workorder_views.xml
+++ b/addons/mrp/views/mrp_workorder_views.xml
@@ -82,10 +82,10 @@
                   invisible="production_state == 'draft'"
                   readonly="is_user_working" sum="real duration"/>
                 <button name="button_start" type="object" title="Start" class="btn-success px-2"
-                  invisible="production_state in ('draft', 'done', 'cancel') or working_state == 'blocked' or state in ('done', 'cancel') or is_user_working" icon="fa-play"/>
-                <button name="button_pending" type="object" title="Pause" class="btn-warning px-2" icon="fa-pause"
+                  invisible="production_state in ('draft', 'done', 'cancel') or working_state == 'blocked' or state in ('done', 'cancel') or is_user_working" icon="play_arrow"/>
+                <button name="button_pending" type="object" title="Pause" class="btn-warning px-2" icon="pause" icon_class="oi-filled"
                   invisible="production_state in ('draft', 'done', 'cancel') or working_state == 'blocked' or not is_user_working"/>
-                <button name="button_finish" type="object" title="Done" class="btn-success px-2" icon="fa-check"
+                <button name="button_finish" type="object" title="Done" class="btn-success px-2" icon="check"
                   invisible="production_state in ('draft', 'done', 'cancel') or working_state == 'blocked' or not is_user_working"/>
                 <field name="state" widget="mo_view_list_dropdown"
                   options="{'no_open': True, 'display': 'badge'}"
diff --git a/addons/mrp/views/product_views.xml b/addons/mrp/views/product_views.xml
index 4b80e891c0bcf8..5b4986086415e5 100644
--- a/addons/mrp/views/product_views.xml
+++ b/addons/mrp/views/product_views.xml
@@ -105,19 +105,19 @@
                 <button name="action_open_documents" position="before">
                     <button class="oe_stat_button" name="%(template_open_bom)d" type="action"
                         groups="mrp.group_mrp_user"
-                        invisible="type != 'consu'" icon="fa-flask">
+                        invisible="type != 'consu'" icon="science">
                         <field string="Bill of Materials" name="bom_count" widget="statinfo" />
                     </button>
                 </button>
                 <button name="action_open_documents" position="after">
                     <button class="oe_stat_button" name="action_used_in_bom" type="object"
                         groups="mrp.group_mrp_user"
-                        invisible="type != 'consu' or used_in_bom_count == 0" icon="fa-level-up">
+                        invisible="type != 'consu' or used_in_bom_count == 0" icon="subdirectory_arrow_left">
                         <field string="Used In" name="used_in_bom_count" widget="statinfo" />
                     </button>
                     <button class="oe_stat_button" name="action_view_mos" type="object"
                         groups="mrp.group_mrp_user"
-                        invisible="type != 'consu' or bom_count == 0 or mrp_product_qty == 0" icon="fa-list-alt" help="Manufactured in the last 365 days">
+                        invisible="type != 'consu' or bom_count == 0 or mrp_product_qty == 0" icon="list_alt" help="Manufactured in the last 365 days">
                         <div class="o_field_widget o_stat_info">
                             <span class="o_stat_value d-flex gap-1">
                                 <field name="mrp_product_qty" widget="statinfo" nolabel="1" class="mr4"/>
@@ -138,17 +138,17 @@
                 <xpath expr="//button[@name='action_open_product_lot']" position="after">
                     <button class="oe_stat_button" name="action_view_bom" type="object"
                         groups="mrp.group_mrp_user"
-                        invisible="type != 'consu'" icon="fa-flask">
+                        invisible="type != 'consu'" icon="science">
                         <field string="Bill of Materials" name="bom_count" widget="statinfo" />
                     </button>
                     <button class="oe_stat_button" name="action_used_in_bom" type="object"
                         groups="mrp.group_mrp_user"
-                        invisible="type != 'consu' or used_in_bom_count == 0" icon="fa-level-up">
+                        invisible="type != 'consu' or used_in_bom_count == 0" icon="subdirectory_arrow_left">
                         <field string="Used In" name="used_in_bom_count" widget="statinfo" />
                     </button>
                     <button class="oe_stat_button" name="action_view_mos" type="object"
                         groups="mrp.group_mrp_user"
-                        invisible="type != 'consu' or bom_count == 0 or mrp_product_qty == 0" icon="fa-list-alt" help="Manufactured in the last 365 days">
+                        invisible="type != 'consu' or bom_count == 0 or mrp_product_qty == 0" icon="list_alt" help="Manufactured in the last 365 days">
                         <div class="o_field_widget o_stat_info">
                             <span class="o_stat_value d-flex gap-1">
                                 <field name="mrp_product_qty" widget="statinfo" nolabel="1" class="mr4"/>
diff --git a/addons/mrp/views/res_config_settings_views.xml b/addons/mrp/views/res_config_settings_views.xml
index 90b9ce03a18438..55bf4a4acfb71d 100644
--- a/addons/mrp/views/res_config_settings_views.xml
+++ b/addons/mrp/views/res_config_settings_views.xml
@@ -15,7 +15,7 @@
                                 <div id="workorder_settings_workcenters" class="content-group" invisible="not group_mrp_routings">
                                     <div class="mt8">
                                         <div>
-                                            <button name="%(mrp.mrp_workcenter_action)d" icon="oi-arrow-right" type="action" string="Work Centers" class="btn-link"/>
+                                            <button name="%(mrp.mrp_workcenter_action)d" icon="east" type="action" string="Work Centers" class="btn-link"/>
                                         </div>
                                     </div>
                                 </div>
diff --git a/addons/mrp/views/stock_picking_views.xml b/addons/mrp/views/stock_picking_views.xml
index 679cf324affb36..80668a8114b8a1 100644
--- a/addons/mrp/views/stock_picking_views.xml
+++ b/addons/mrp/views/stock_picking_views.xml
@@ -112,7 +112,7 @@
         <field name="inherit_id" ref="stock.view_picking_form"/>
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_view_reception_report']" position="after">
-                <button class="oe_stat_button" name="action_view_mrp_production" type="object" icon="fa-wrench" invisible="not production_count" groups="mrp.group_mrp_user">
+                <button class="oe_stat_button" name="action_view_mrp_production" type="object" icon="build" invisible="not production_count" groups="mrp.group_mrp_user">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="production_count"/></span>
                         <span class="o_stat_text">Manufacturing</span>
@@ -160,7 +160,7 @@
                                 Odoo opens a PDF preview by default. If you want to print instantly,
                                 install the IoT App on a computer that is on the same local network as the
                                 barcode operator and configure the routing of the reports.
-                                <widget name="documentation_link" path="/applications/productivity/iot/devices/printer.html" label="Documentation" icon="fa-arrow-right"/>
+                                <widget name="documentation_link" path="/applications/productivity/iot/devices/printer.html" label="Documentation" icon="arrow_forward"/>
                             </div>
                         </group>
                         <group string='Print when "Create new Lot/SN"' groups="stock.group_production_lot">
diff --git a/addons/mrp/wizard/mrp_production_split.xml b/addons/mrp/wizard/mrp_production_split.xml
index afa65c6449aafa..796f15cac1d3d7 100644
--- a/addons/mrp/wizard/mrp_production_split.xml
+++ b/addons/mrp/wizard/mrp_production_split.xml
@@ -14,7 +14,7 @@
                             <field name="product_qty"/>
                             <field name="production_capacity"/>
                             <field name="uom_id" groups="uom.group_uom" widget="many2one_uom"/>
-                            <button name="action_prepare_split" type="object" icon="fa-scissors" title="Split Production"/>
+                            <button name="action_prepare_split" type="object" icon="content_cut" title="Split Production"/>
                         </list>
                     </field>
                     <footer>
diff --git a/addons/mrp_account/views/account_move_views.xml b/addons/mrp_account/views/account_move_views.xml
index bab0051afd3bc8..aa36f2d2f81bb7 100644
--- a/addons/mrp_account/views/account_move_views.xml
+++ b/addons/mrp_account/views/account_move_views.xml
@@ -5,7 +5,7 @@
         <field name="inherit_id" ref="account.view_move_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
-                <button class="oe_stat_button" name="action_view_wip_production" type="object" icon="fa-wrench" invisible="wip_production_count == 0" groups="mrp.group_mrp_user">
+                <button class="oe_stat_button" name="action_view_wip_production" type="object" icon="build" invisible="wip_production_count == 0" groups="mrp.group_mrp_user">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="wip_production_count"/></span>
                         <span class="o_stat_text">Manufacturing</span>
diff --git a/addons/mrp_account/views/analytic_account_views.xml b/addons/mrp_account/views/analytic_account_views.xml
index 85dd5b2823d30d..50c0c8d0af85c0 100644
--- a/addons/mrp_account/views/analytic_account_views.xml
+++ b/addons/mrp_account/views/analytic_account_views.xml
@@ -9,12 +9,12 @@
             <div name="button_box" position="inside">
                 <button class="oe_stat_button" type="object" name="action_view_mrp_production"
                     groups="mrp.group_mrp_user"
-                    icon="fa-wrench" invisible="production_count == 0">
+                    icon="build" invisible="production_count == 0">
                     <field string="Manufacturing Orders" name="production_count" widget="statinfo"/>
                 </button>
                 <button class="oe_stat_button" type="object" name="action_view_mrp_bom"
                     groups="mrp.group_mrp_user"
-                    icon="fa-flask" invisible="bom_count == 0">
+                    icon="science" invisible="bom_count == 0">
                     <field string="Bills of Materials" name="bom_count" widget="statinfo"/>
                 </button>
             </div>
diff --git a/addons/mrp_account/views/mrp_production_views.xml b/addons/mrp_account/views/mrp_production_views.xml
index 613176b9bbd819..1765a30f5f1343 100644
--- a/addons/mrp_account/views/mrp_production_views.xml
+++ b/addons/mrp_account/views/mrp_production_views.xml
@@ -8,7 +8,7 @@
                 <field name="show_valuation" invisible="1" groups="stock.group_stock_manager"/>
             </xpath>
             <xpath expr="//div[@name='button_box']" position="inside">
-                <button name="action_view_move_wip" type="object" class="oe_stat_button" icon="fa-book"
+                <button name="action_view_move_wip" type="object" class="oe_stat_button" icon="book"
                         groups="account.group_account_user" invisible="wip_move_count == 0">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="wip_move_count"/></span>
diff --git a/addons/mrp_landed_costs/views/stock_landed_cost_views.xml b/addons/mrp_landed_costs/views/stock_landed_cost_views.xml
index a2e8b42a2eec38..240eee7295653b 100644
--- a/addons/mrp_landed_costs/views/stock_landed_cost_views.xml
+++ b/addons/mrp_landed_costs/views/stock_landed_cost_views.xml
@@ -18,7 +18,7 @@
                     domain="[('company_id', '=', company_id), ('move_finished_ids.is_in', '!=', False)]"/>
             </field>
             <button name="action_view_pickings" position="after">
-                <button class="oe_stat_button" name="action_view_mrp_productions" icon="fa-wrench"
+                <button class="oe_stat_button" name="action_view_mrp_productions" icon="build"
                     type="object" invisible="mrp_productions_count == 0">
                     <field name="mrp_productions_count" string="Manufacturing" widget="statinfo"/>
                 </button>
diff --git a/addons/mrp_repair/views/production_views.xml b/addons/mrp_repair/views/production_views.xml
index 6e9e06cec5f59d..122f41faaab10b 100644
--- a/addons/mrp_repair/views/production_views.xml
+++ b/addons/mrp_repair/views/production_views.xml
@@ -9,7 +9,7 @@
                 <xpath expr="//div[@name='button_box']" position="inside">
                     <button
                         class="oe_stat_button" name="action_view_repair_orders" type="object"
-                        icon="fa-wrench" groups="stock.group_stock_user"
+                        icon="build" groups="stock.group_stock_user"
                         invisible="repair_count == 0">
                             <div class="o_field_widget o_stat_info">
                                 <field name="repair_count" string="Repairs" widget="statinfo"/>
diff --git a/addons/mrp_repair/views/repair_views.xml b/addons/mrp_repair/views/repair_views.xml
index ca54184a5f1c2d..e8bdea47962dca 100644
--- a/addons/mrp_repair/views/repair_views.xml
+++ b/addons/mrp_repair/views/repair_views.xml
@@ -9,7 +9,7 @@
                 <xpath expr="//button[@name='action_view_sale_order']" position="after">
                     <button
                         class="oe_stat_button" name="action_view_mrp_productions" type="object"
-                        icon="fa-wrench" groups="mrp.group_mrp_user"
+                        icon="build" groups="mrp.group_mrp_user"
                         invisible="production_count == 0 or state == 'draft'">
                         <div class="o_field_widget o_stat_info">
                             <field name="production_count" string="Manufacturing" widget="statinfo"/>
diff --git a/addons/mrp_subcontracting/views/stock_picking_views.xml b/addons/mrp_subcontracting/views/stock_picking_views.xml
index a98f7398809666..bedd738d96ddba 100644
--- a/addons/mrp_subcontracting/views/stock_picking_views.xml
+++ b/addons/mrp_subcontracting/views/stock_picking_views.xml
@@ -8,7 +8,7 @@
             <xpath expr="//div[@name='button_box']" position="inside">
                 <field invisible="True" name="show_subcontracting_details_visible"/>
                 <button name="action_show_subcontract_details" string="Subcontracting Productions"
-                        type="object" class="oe_stat_button" icon="fa-sitemap"
+                        type="object" class="oe_stat_button" icon="account_tree"
                         invisible="not show_subcontracting_details_visible"/>
             </xpath>
         </field>
diff --git a/addons/mrp_subcontracting/views/subcontracting_portal_views.xml b/addons/mrp_subcontracting/views/subcontracting_portal_views.xml
index 72e0fa53e2c000..72b88792840bf2 100644
--- a/addons/mrp_subcontracting/views/subcontracting_portal_views.xml
+++ b/addons/mrp_subcontracting/views/subcontracting_portal_views.xml
@@ -33,10 +33,10 @@
                                     <field name="product_qty" readonly="1" column_invisible="True"/>
                                     <field name="quantity" string="Done"/>
                                     <field name="uom_id" groups="uom.group_uom" widget="many2one_uom"/>
-                                    <button name="action_show_details" type="object" icon="fa-list" title="Details"
+                                    <button name="action_show_details" type="object" icon="format_list_bulleted" title="Details"
                                                 invisible="not show_details_visible" context="{'is_subcontracting_portal': 1}"/>
                                     <field name="show_subcontracting_details_visible" column_invisible="True"/>
-                                    <button name="action_show_subcontract_details" string="Register components for subcontracted product" type="object" icon="fa-sitemap"
+                                    <button name="action_show_subcontract_details" string="Register components for subcontracted product" type="object" icon="account_tree"
                                         invisible="not show_subcontracting_details_visible"/>
                                 </list>
                             </field>
diff --git a/addons/mrp_subcontracting_purchase/views/purchase_order_views.xml b/addons/mrp_subcontracting_purchase/views/purchase_order_views.xml
index 36d5bb0d7fdad8..a9c85657988c4e 100644
--- a/addons/mrp_subcontracting_purchase/views/purchase_order_views.xml
+++ b/addons/mrp_subcontracting_purchase/views/purchase_order_views.xml
@@ -8,7 +8,7 @@
             <xpath expr="//div[hasclass('oe_button_box')]/button[@name='action_view_picking']" position="before">
                 <button 
                     class="oe_stat_button" name="action_view_subcontracting_resupply" 
-                    type="object" icon="fa-truck" invisible="subcontracting_resupply_picking_count == 0" groups="stock.group_stock_user">
+                    type="object" icon="local_shipping" invisible="subcontracting_resupply_picking_count == 0" groups="stock.group_stock_user">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="subcontracting_resupply_picking_count"/></span>
                         <span class="o_stat_text">Resupply</span>
diff --git a/addons/mrp_subcontracting_purchase/views/stock_picking_views.xml b/addons/mrp_subcontracting_purchase/views/stock_picking_views.xml
index eea12c2537f160..6975e2734947eb 100644
--- a/addons/mrp_subcontracting_purchase/views/stock_picking_views.xml
+++ b/addons/mrp_subcontracting_purchase/views/stock_picking_views.xml
@@ -8,7 +8,7 @@
             <xpath expr="//div[hasclass('oe_button_box')]" position="inside">
                 <button 
                     class="oe_stat_button" name="action_view_subcontracting_source_purchase" 
-                    type="object" icon="fa-credit-card" invisible="subcontracting_source_purchase_count == 0" groups="stock.group_stock_user">
+                    type="object" icon="credit_card" invisible="subcontracting_source_purchase_count == 0" groups="stock.group_stock_user">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="subcontracting_source_purchase_count"/></span>
                         <span class="o_stat_text">Source PO</span>
diff --git a/addons/onboarding/models/onboarding_onboarding_step.py b/addons/onboarding/models/onboarding_onboarding_step.py
index 262186464fc868..dac36466c6c872 100644
--- a/addons/onboarding/models/onboarding_onboarding_step.py
+++ b/addons/onboarding/models/onboarding_onboarding_step.py
@@ -19,7 +19,7 @@ class OnboardingOnboardingStep(models.Model):
     button_text = fields.Char(
         'Button text', required=True, default=lambda s: s.env._("Let's do it"), translate=True,
         help="Text on the panel's button to start this step")
-    done_icon = fields.Char('Font Awesome Icon when completed', default='fa-star')
+    done_icon = fields.Char('Font Awesome Icon when completed', default='star')
     done_text = fields.Char(
         'Text to show when step is completed', default=lambda s: s.env._('Step Completed!'), translate=True)
     step_image = fields.Binary("Step Image")
diff --git a/addons/onboarding/views/onboarding_templates.xml b/addons/onboarding/views/onboarding_templates.xml
index 92172600f7426c..0924f97154670e 100644
--- a/addons/onboarding/views/onboarding_templates.xml
+++ b/addons/onboarding/views/onboarding_templates.xml
@@ -46,14 +46,14 @@
         </div>
         <div class="o_onboarding_main d-print-none position-relative border-bottom overflow-hidden">
             <div class="o_onboarding_wrap py-3 py-lg-4">
-                <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2" title="Close the onboarding panel"><i class="oi oi-close"/></a>
+                <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2" title="Close the onboarding panel"><i class="oi" data-icon="close_small"/></a>
                 <div class="o_onboarding_steps d-flex" t-out="0"/>
 
                 <div t-if="state.get('onboarding_state') == 'just_done'"
                         t-att-state="state.get('onboarding_state')"
                         class="o_onboarding_completed_message position-absolute end-0 start-0 border-bottom py-4 bg-white d-flex align-items-center justify-content-center">
                     <span class="h3 m-0">
-                        <i class="fa fa-check text-success me-3" />
+                        <i class="oi text-success me-3" data-icon="check"/>
                         <t t-if="text_completed" t-out="text_completed" />
                     </span>
                     <a type="action" class="btn btn-primary ms-4" t-att-data-model="close_model" t-att-data-method="close_method">
@@ -88,7 +88,11 @@
                 </a>
                 <a t-else="" class="o_onboarding_step_action__done btn" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
                     <span>
-                        <i t-attf-class="p-1 me-1 fa #{done_icon if done_icon else 'fa-check'} rounded-circle" />
+                        <i
+                            class="oi me-1 rounded-circle p-1"
+                            t-att-class="{'oi-filled': done_icon}"
+                            t-attf-class="#{done_icon if done_icon else 'check'}"
+                        />
                         <t t-if="done_text" t-out="done_text" />
                         <t t-else="">All done!</t>
                     </span>
diff --git a/addons/partner_autocomplete/static/src/xml/partner_autocomplete.xml b/addons/partner_autocomplete/static/src/xml/partner_autocomplete.xml
index 35f6486d35e6a5..07f46244f32665 100644
--- a/addons/partner_autocomplete/static/src/xml/partner_autocomplete.xml
+++ b/addons/partner_autocomplete/static/src/xml/partner_autocomplete.xml
@@ -69,13 +69,13 @@
 
     <t t-name="partner_autocomplete.InsufficientCreditNotification">
         <div class="o-hidden-ios">
-            <a class="btn btn-link" t-att-href="this.credits_url"><i class="oi oi-arrow-right"/> Buy more credits</a>
+            <a class="btn btn-link" t-att-href="this.credits_url"><i class="oi" data-icon="east"/> Buy more credits</a>
         </div>
     </t>
 
     <t t-name="partner_autocomplete.AccountTokenMissingNotification">
         <div class="">
-            <a class="btn btn-link" t-att-href="this.account_url" ><i class="oi oi-arrow-right"/> Set Your Account Token</a>
+            <a class="btn btn-link" t-att-href="this.account_url" ><i class="oi" data-icon="east"/> Set Your Account Token</a>
         </div>
     </t>
 
diff --git a/addons/partnership/views/product_pricelist_views.xml b/addons/partnership/views/product_pricelist_views.xml
index a5fc5a15eb6528..fc4f6750bdd28d 100644
--- a/addons/partnership/views/product_pricelist_views.xml
+++ b/addons/partnership/views/product_pricelist_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <sheet position="inside">
                 <div name="button_box" class="oe_button_box">
-                    <button type="action" name="partnership.action_pricelist_partners" class="oe_stat_button" icon="fa-users">
+                    <button type="action" name="partnership.action_pricelist_partners" class="oe_stat_button" icon="group" icon_class="oi-filled">
                         <field name="partners_count" widget="statinfo" class="oe_inline me-1" nolabel="1"/>
                         <field name="partners_label" widget="statinfo" nolabel="1"/>
                     </button>
diff --git a/addons/partnership/views/res_partner_grade_views.xml b/addons/partnership/views/res_partner_grade_views.xml
index ba15c3e6365e2b..15f19208cb3d15 100644
--- a/addons/partnership/views/res_partner_grade_views.xml
+++ b/addons/partnership/views/res_partner_grade_views.xml
@@ -43,7 +43,7 @@
             <form string="Partner Level">
                 <sheet string="Level">
                     <div class="oe_button_box" name="button_box">
-                        <button type="action" name="partnership.action_grade_partners" class="oe_stat_button" icon="fa-users">
+                        <button type="action" name="partnership.action_grade_partners" class="oe_stat_button" icon="group" icon_class="oi-filled">
                             <field name="partners_count" widget="statinfo" class="oe_inline me-1" nolabel="1"/>
                             <field name="partners_label" widget="statinfo" nolabel="1"/>
                         </button>
diff --git a/addons/payment/static/src/scss/payment_provider.scss b/addons/payment/static/src/scss/payment_provider.scss
index 18a6fe93bca10b..5509ec706bd0f6 100644
--- a/addons/payment/static/src/scss/payment_provider.scss
+++ b/addons/payment/static/src/scss/payment_provider.scss
@@ -5,10 +5,10 @@
             list-style-type: none;
             padding: 0;
 
-            i.fa {
+            i.oi {
                 margin-right: 5px;
 
-                &.fa-check {
+                &[data-icon="check"] {
                     color: green;
                 }
             }
diff --git a/addons/payment/views/payment_form_templates.xml b/addons/payment/views/payment_form_templates.xml
index a62561b5cf2a37..aa8ea14a6b878a 100644
--- a/addons/payment/views/payment_form_templates.xml
+++ b/addons/payment/views/payment_form_templates.xml
@@ -114,7 +114,7 @@
                         class="btn btn-link"
                         data-bs-toggle="collapse"
                 >
-                    Choose another method <i class="oi oi-arrow-down"/>
+                    Choose another method <i class="oi" data-icon="south"/>
                 </button>
                 <!-- === Submit button === -->
                 <t t-if="display_submit_button" t-call="payment.submit_button"/>
@@ -144,7 +144,7 @@
                                  + (' d-none' if mode != 'validation' else '')"
                     t-attf-data-linked-radio="o_payment_token_{{token_sudo.id}}"
             >
-                <i class="fa fa-trash"
+                <i class="oi oi-filled" data-icon="delete"
                    title="Delete payment method"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
@@ -179,12 +179,12 @@
                             <div class="d-flex flex-nowrap gap-2">
                                 <!-- === "Unpublished" icon === -->
                                 <t t-if="is_unpublished" t-call="payment.form_icon"
-                                    icon_name.f="eye-slash"
+                                    icon_name.f="visibility_off"
                                     color_name.f="danger"
                                     title.translate="Unpublished"/>
                                 <!-- === "Test mode" icon === -->
                                 <t t-if="is_test" t-call="payment.form_icon"
-                                    icon_name.f="exclamation-triangle"
+                                    icon_name.f="warning"
                                     color_name.f="warning"
                                     title.translate="Test mode"/>
                             </div>
@@ -205,7 +205,7 @@
                                     + (' ms-4 ms-md-0' if allow_token_selection else '')
                                     + (' d-none' if hide_secured_by else '')"
                     >
-                        <span><i class="fa fa-lock"/> Secured by</span>
+                        <span><i class="oi" data-icon="lock"/> Secured by</span>
                         <span t-out="dict(provider_sudo._fields['code']._description_selection(
                                          provider_sudo.env
                                      ))[provider_sudo.code]"
@@ -231,7 +231,7 @@
            t-att-class="'align-self-center d-block d-md-none mb-0 small text-600'
                         + (' d-none' if hide_secured_by else '')"
         >
-            <span><i class="fa fa-lock"/> Secured by</span>
+            <span><i class="oi" data-icon="lock"/> Secured by</span>
             <span t-out="dict(provider_sudo._fields['code']._description_selection(
                              provider_sudo.env
                          ))[provider_sudo.code]"
@@ -279,12 +279,12 @@
                         <div class="d-flex flex-nowrap gap-2 mt-1">
                             <!-- === "Unpublished" icon === -->
                             <t t-if="is_unpublished" t-call="payment.form_icon"
-                                icon_name.f="eye-slash"
+                                icon_name.f="visibility_off"
                                 color_name.f="danger"
                                 title.translate="Unpublished"/>
                             <!-- === "Test mode" icon === -->
                             <t t-if="is_test" t-call="payment.form_icon"
-                                icon_name.f="exclamation-triangle"
+                                icon_name.f="warning"
                                 color_name.f="warning"
                                 title.translate="Test mode"/>
                         </div>
@@ -333,7 +333,7 @@
                    t-att-class="'align-self-end mb-0 mx-auto me-sm-0 small text-600'
                                 + (' d-none' if hide_secured_by else '')"
                 >
-                    <span><i class="fa fa-lock"/> Secured by</span>
+                    <span><i class="oi" data-icon="lock"/> Secured by</span>
                     <span t-out="dict(provider_sudo._fields['code']._description_selection(
                                      provider_sudo.env
                                  ))[provider_sudo.code]"
@@ -346,11 +346,12 @@
 
     <template id="payment.form_icon" name="Form Icon">
         <!-- Parameters description:
-            - icon_name: The name of the FontAwesome icon.
+            - icon_name: The name of the Material Symbols icon.
             - color_name: The class name of the color (`warning`, `danger`...).
             - title: The title to display on hover.
         -->
-        <i t-attf-class="fa fa-{{icon_name}} text-{{color_name}} position-relative z-1"
+        <i t-attf-class="oi text-{{color_name}} position-relative z-1"
+           t-att-data-icon="icon_name"
            t-att-title="title"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
@@ -452,7 +453,7 @@
                         data-bs-toggle="collapse"
                         href="#payment_availability_report"
                     >
-                        <strong><i class="fa fa-file-text"/> Show availability report</strong>
+                        <strong><i class="oi oi-filled" data-icon="article"/> Show availability report</strong>
                     </a>
                 </div>
             </div>
@@ -478,7 +479,7 @@
             aria-expanded="false"
             aria-controls="payment_availability_report"
         >
-            <i class="fa fa-bug"/>
+            <i class="oi" data-icon="bug_report"/>
         </a>
     </template>
 
@@ -510,7 +511,9 @@
                     <div class="d-flex gap-2">
                         <div class="ms-2">
                             <i
-                                t-attf-class="fa fa-fw fa-{{'check-circle' if available else 'times-circle'}}"
+                                class="oi oi-fw"
+                                t-att-class="{'oi-filled': !available}"
+                                t-attf-data-icon="{{'check_circle' if available else 'cancel'}}"
                                 t-attf-style="color: {{'green' if available else 'red'}};"
                             />
                         </div>
diff --git a/addons/payment/views/payment_method_views.xml b/addons/payment/views/payment_method_views.xml
index 66a001e9125c28..1ec791a10d89e1 100644
--- a/addons/payment/views/payment_method_views.xml
+++ b/addons/payment/views/payment_method_views.xml
@@ -56,7 +56,7 @@
                               groups="base.group_no_one"
                         >
                             <div class="alert alert-warning" role="alert">
-                                <i class="fa fa-exclamation-triangle"/> These properties are set to
+                                <i class="oi" data-icon="warning"/> These properties are set to
                                 match the behavior of providers and that of their integration with
                                 Odoo regarding this payment method. Any change may result in errors
                                 and should be tested on a test database first.
@@ -142,7 +142,7 @@
             </p>
             <p>
                 <a type="action" class="text-primary" name="%(payment.action_payment_provider)d">
-                    <i class="oi oi-arrow-right me-1"/> Configure a payment provider
+                    <i class="oi me-1" data-icon="east"/> Configure a payment provider
                 </a>
             </p>
         </field>
diff --git a/addons/payment/views/payment_provider_views.xml b/addons/payment/views/payment_provider_views.xml
index 04543b0322622b..a340bd12d44fdc 100644
--- a/addons/payment/views/payment_provider_views.xml
+++ b/addons/payment/views/payment_provider_views.xml
@@ -16,7 +16,7 @@
                                 invisible="not is_published"
                                 class="oe_stat_button"
                                 type="object"
-                                icon="fa-globe">
+                                icon="public">
                             <div class="o_stat_info o_field_widget">
                                 <span class="o_stat_text text-success">Published</span>
                             </div>
@@ -25,7 +25,7 @@
                                 invisible="is_published"
                                 class="oe_stat_button"
                                 type="object"
-                                icon="fa-eye-slash">
+                                icon="visibility_off">
                             <div class="o_stat_info o_field_widget">
                                 <span class="o_stat_text text-danger">Unpublished</span>
                             </div>
@@ -74,7 +74,7 @@
                                            role="button"
                                            invisible="state == 'disabled'"
                                         >
-                                            <i class="oi oi-fw o_button_icon oi-arrow-right"/>
+                                            <i class="oi oi-fw o_button_icon" data-icon="east"/>
                                             Enable Payment Methods
                                         </a>
                                     </div>
diff --git a/addons/payment/views/payment_token_views.xml b/addons/payment/views/payment_token_views.xml
index e4a1e50b1b7d3d..87e29d4e3dee7a 100644
--- a/addons/payment/views/payment_token_views.xml
+++ b/addons/payment/views/payment_token_views.xml
@@ -11,7 +11,7 @@
                     <div class="oe_button_box" name="button_box">
                         <button class="oe_stat_button"
                                 name="%(action_payment_transaction_linked_to_token)d"
-                                type="action" icon="fa-money" string="Payments">
+                                type="action" icon="payments" string="Payments">
                         </button>
                     </div>
                     <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" invisible="active"/>
diff --git a/addons/payment/views/payment_transaction_views.xml b/addons/payment/views/payment_transaction_views.xml
index a0d02f10326680..231e8dd238d644 100644
--- a/addons/payment/views/payment_transaction_views.xml
+++ b/addons/payment/views/payment_transaction_views.xml
@@ -25,7 +25,7 @@
                         <button name="action_view_refunds"
                                 type="object"
                                 class="oe_stat_button"
-                                icon="fa-money"
+                                icon="payments"
                                 invisible="refunds_count == 0">
                             <field name="refunds_count" widget="statinfo" string="Refunds"/>
                         </button>
diff --git a/addons/payment/views/portal_templates.xml b/addons/payment/views/portal_templates.xml
index 7d8e99a0753654..d4330724fac93a 100644
--- a/addons/payment/views/portal_templates.xml
+++ b/addons/payment/views/portal_templates.xml
@@ -201,7 +201,7 @@
                         <div class="row">
                             <div class="col offset-md-3 ps-0">
                                 <a role="button" class="btn btn-primary float-end" href="/my/home">
-                                    Go to my Account <i class="oi oi-arrow-right ms-2"/>
+                                    Go to my Account <i class="oi ms-2" data-icon="east"/>
                                 </a>
                             </div>
                         </div>
@@ -222,7 +222,7 @@
                 <ol class="breadcrumb px-0 mt16">
                     <li id="o_payment_portal_home" class="breadcrumb-item">
                         <a href="/my/home">
-                            <i class="fa fa-home"
+                            <i class="oi" data-icon="home"
                                role="img"
                                title="Home"
                                aria-label="Home"/>
@@ -325,13 +325,16 @@
              t-attf-class="{{o_payment_status_alert_class}}"
         >
             <t t-set="alert_icon"
-               t-value="'fa-cog fa-spin' if is_processing and alert_style != 'danger'
-                        else 'fa-check' if alert_style == 'success'
-                        else 'fa-info-circle' if alert_style == 'info'
-                        else 'fa-exclamation-triangle'"
+               t-value="'settings' if is_processing and alert_style != 'danger'
+                        else 'check' if alert_style == 'success'
+                        else 'info' if alert_style == 'info'
+                        else 'warning'"
+            />
+            <t t-set="alert_icon_class"
+               t-value="'oi-spin oi-filled' if is_processing and alert_style != 'danger' else ''"
             />
             <div id="o_payment_status_icon">
-                <i t-attf-class="fa {{alert_icon}}"/>
+                <i t-attf-class="oi {{alert_icon_class}}" t-att-data-icon="alert_icon"/>
             </div>
             <div id="o_payment_status_message" class="w-100">
                 <h5 t-if="status_heading" t-out="status_heading" class="alert-heading mb-0"/>
@@ -342,7 +345,7 @@
                t-att-href="tx.landing_route"
                class="alert-link ms-auto text-nowrap"
             >
-                Skip <i class="oi oi-arrow-right ms-1 small"/>
+                Skip <i class="oi ms-1 small" data-icon="east"/>
             </a>
         </div>
     </template>
diff --git a/addons/payment/views/res_partner_views.xml b/addons/payment/views/res_partner_views.xml
index 53a6bbed775b86..e2fb2a42914298 100644
--- a/addons/payment/views/res_partner_views.xml
+++ b/addons/payment/views/res_partner_views.xml
@@ -10,7 +10,7 @@
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
                 <button type="action" class="oe_stat_button"
-                        icon="fa-credit-card-alt"
+                        icon="credit_card"
                         name="%(payment.action_payment_token)d"
                         context="{'search_default_partner_id': id, 'create': False, 'edit': False}"
                         invisible="payment_token_count == 0">
diff --git a/addons/payment/wizards/payment_capture_wizard_views.xml b/addons/payment/wizards/payment_capture_wizard_views.xml
index 1701ef22b6f121..b623c0447c17e8 100644
--- a/addons/payment/wizards/payment_capture_wizard_views.xml
+++ b/addons/payment/wizards/payment_capture_wizard_views.xml
@@ -34,7 +34,8 @@
                         <field name="amount_to_capture"
                                class="oe_inline"
                                readonly="support_partial_capture == 'full_only'"/>
-                        <i class="fa fa-info-circle oe_inline"
+                        <i class="oi oe_inline"
+                           data-icon="info"
                            invisible="support_partial_capture != 'full_only'"
                            title="Some of the transactions you intend to capture can only be captured in full. Handle the transactions individually to capture a partial amount."/>
                     </div>
diff --git a/addons/payment_authorize/views/payment_provider_views.xml b/addons/payment_authorize/views/payment_provider_views.xml
index 833fa2222a45f3..f24fc766f531ba 100644
--- a/addons/payment_authorize/views/payment_provider_views.xml
+++ b/addons/payment_authorize/views/payment_provider_views.xml
@@ -20,7 +20,7 @@
                             name="action_update_merchant_details"
                             invisible="state == 'disabled'"
                             class="oe_link"
-                            icon="fa-refresh"
+                            icon="refresh"
                         />
                     </div>
                     <label
@@ -56,7 +56,7 @@
                     type="object"
                     name="action_update_merchant_details"
                     invisible="code != 'authorize' or state == 'disabled'"
-                    icon="fa-refresh"
+                    icon="refresh"
                     class="oe_link"
                 />
             </div>
diff --git a/addons/payment_custom/views/payment_provider_views.xml b/addons/payment_custom/views/payment_provider_views.xml
index cb9490236de349..8718ef443faf74 100644
--- a/addons/payment_custom/views/payment_provider_views.xml
+++ b/addons/payment_custom/views/payment_provider_views.xml
@@ -36,7 +36,7 @@
                             type="object"
                             name="action_recompute_pending_msg"
                             class="oe_link ms-0 ps-0"
-                            icon="fa-refresh"
+                            icon="refresh"
                             />
               </div>
             </field>
diff --git a/addons/payment_razorpay/views/payment_provider_views.xml b/addons/payment_razorpay/views/payment_provider_views.xml
index cc94f1dbfaaa3c..25936f9e6deacf 100644
--- a/addons/payment_razorpay/views/payment_provider_views.xml
+++ b/addons/payment_razorpay/views/payment_provider_views.xml
@@ -83,7 +83,8 @@
                         label="Enable recurring payments on Razorpay"
                         name="documentation_link"
                         path="/applications/finance/payment_providers/razorpay.html#payment-providers-razorpay-recurring-payments"
-                        icon="oi oi-fw o_button_icon oi-arrow-right"
+                        icon="east"
+                        icon_class="oi-fw o_button_icon"
                         colspan="2"
                         class="mx-2"
                     />
diff --git a/addons/point_of_sale/models/res_partner.py b/addons/point_of_sale/models/res_partner.py
index 6d00f7ca21337d..7a48fc321eeba8 100644
--- a/addons/point_of_sale/models/res_partner.py
+++ b/addons/point_of_sale/models/res_partner.py
@@ -27,7 +27,7 @@ def _compute_application_statistics_hook(self):
         if not self.env.user.has_group('point_of_sale.group_pos_user'):
             return data_list
         for partner in self.filtered('pos_order_count'):
-            stat_info = {'iconClass': 'fa-shopping-bag', 'value': partner.pos_order_count, 'label': _('Shopping cart')}
+            stat_info = {'icon': 'shopping-bag', 'value': partner.pos_order_count, 'label': _('Shopping cart')}
             data_list[partner.id].append(stat_info)
         return data_list
 
diff --git a/addons/point_of_sale/static/src/app/components/accordion_item/accordion_item.scss b/addons/point_of_sale/static/src/app/components/accordion_item/accordion_item.scss
index c19f9b928817e1..5e6cfd7f0d1bb8 100644
--- a/addons/point_of_sale/static/src/app/components/accordion_item/accordion_item.scss
+++ b/addons/point_of_sale/static/src/app/components/accordion_item/accordion_item.scss
@@ -21,8 +21,8 @@
         gap: 5px;
 
         &:before {
-            content: "\f0d7";
-            font-family: FontAwesome;
+            content: "arrow_drop_down";
+            font-family: 'material_symbols_sharp';
             display: inline-block;
 
             transform: rotate(-90deg);
diff --git a/addons/point_of_sale/static/src/app/components/buttons/quantity_buttons/quantity_buttons.xml b/addons/point_of_sale/static/src/app/components/buttons/quantity_buttons/quantity_buttons.xml
index 8ad7ec8091e2a0..4ac94d66ea6f1d 100644
--- a/addons/point_of_sale/static/src/app/components/buttons/quantity_buttons/quantity_buttons.xml
+++ b/addons/point_of_sale/static/src/app/components/buttons/quantity_buttons/quantity_buttons.xml
@@ -7,7 +7,7 @@
                 name="pos_quantity_button_minus"
                 aria-label="Remove one"
                 t-on-click.stop="() => this.changeQuantity(-1)">
-                <i class="fa fa-minus"/>
+                <i class="oi" data-icon="remove"/>
             </button>
             <input
                 class="form-control quantity text-center"
@@ -22,7 +22,7 @@
                 aria-label="Add one"
                 t-att-disabled="this.props.isPlusButtonDisabled"
                 t-on-click.stop="() => this.changeQuantity(1)">
-                <i class="fa fa-plus"/>
+                <i class="oi" data-icon="add"/>
             </button>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/components/centered_icon/centered_icon.js b/addons/point_of_sale/static/src/app/components/centered_icon/centered_icon.js
index a6599793371099..08e14cb468d39d 100644
--- a/addons/point_of_sale/static/src/app/components/centered_icon/centered_icon.js
+++ b/addons/point_of_sale/static/src/app/components/centered_icon/centered_icon.js
@@ -3,6 +3,7 @@ import { Component, xml } from "@odoo/owl";
 export class CenteredIcon extends Component {
     static props = {
         icon: String,
+        icon_class: { type: String, optional: true },
         text: { type: String, optional: true },
         class: { type: String, optional: true },
     };
@@ -11,7 +12,7 @@ export class CenteredIcon extends Component {
     };
     static template = xml`
         <div t-attf-class="{{this.props.class}} d-flex flex-column align-items-center justify-content-center">
-            <i t-attf-class="fa {{this.props.icon}}" role="img" />
+            <i t-attf-class="oi {{this.props.icon_class}}" t-att-data-icon="this.props.icon" role="img" />
             <h3 t-if="this.props.text" t-out="this.props.text" class="w-75 mt-2 text-center"/>
         </div>
     `;
diff --git a/addons/point_of_sale/static/src/app/components/inputs/input/input.js b/addons/point_of_sale/static/src/app/components/inputs/input/input.js
index 5cdedd6864b02b..b8ba172643371d 100644
--- a/addons/point_of_sale/static/src/app/components/inputs/input/input.js
+++ b/addons/point_of_sale/static/src/app/components/inputs/input/input.js
@@ -18,7 +18,7 @@ export class Input extends TModelInput {
         icon: {
             type: Object,
             optional: true,
-            shape: { type: String, value: String },
+            shape: { type: String, value: String, class: { type: String, optional: true } },
         },
         getRef: { type: Function, optional: true },
         autofocus: { type: Boolean, optional: true },
diff --git a/addons/point_of_sale/static/src/app/components/inputs/input/input.xml b/addons/point_of_sale/static/src/app/components/inputs/input/input.xml
index 2e75348a684d4c..23c700bb118b4d 100644
--- a/addons/point_of_sale/static/src/app/components/inputs/input/input.xml
+++ b/addons/point_of_sale/static/src/app/components/inputs/input/input.xml
@@ -8,7 +8,7 @@
                     this.state.isOpen = !this.state.isOpen;
                     this.props.isOpenCallback?.(this.state.isOpen);
                 }">
-                <i t-if="this.state.isOpen" class="fa fa-arrow-right"/>
+                <i t-if="this.state.isOpen"  class="oi" data-icon="arrow_forward"/>
                 <t t-else="props.iconOnLeftSide" t-call="point_of_sale.inputIcon" />
             </button>
             <div t-if="!this.props.isSmall || this.state.isOpen"
@@ -26,13 +26,13 @@
                         t-on-blur="(ev) => this.props.onBlur?.(ev)"
                         t-on-click="(ev) => this.props.onClick?.(ev)" />
                     <t t-if="!this.props.iconOnLeftSide" t-call="point_of_sale.inputIcon" />
-                    <i t-att-class="{ 'invisible': !this.getValue() }" class="fa fa-times mx-2" t-on-click="() => this.setValue('')"/>
+                    <i t-att-class="{ 'invisible': !this.getValue() }" class="oi mx-2" data-icon="close" t-on-click="() => this.setValue('')"/>
                 </div>
             </div>
         </div>
     </t>
     <t t-name="point_of_sale.inputIcon">
-        <i t-if="this.props.icon.type === 'fa'" t-attf-class="fa {{this.props.icon.value}} {{this.margin}}"/>
+        <i t-if="this.props.icon.type === 'icon'" t-attf-class="oi {{this.props.icon.class}} {{this.margin}}" t-att-data-icon="this.props.icon.value"/>
         <span t-if="this.props.icon.type === 'string'" t-attf-class="{{this.margin}}" t-out="this.props.icon.value"/>
     </t>
 
diff --git a/addons/point_of_sale/static/src/app/components/inputs/numeric_input/numeric_input.xml b/addons/point_of_sale/static/src/app/components/inputs/numeric_input/numeric_input.xml
index e7dcd89234969a..ac77922d715877 100644
--- a/addons/point_of_sale/static/src/app/components/inputs/numeric_input/numeric_input.xml
+++ b/addons/point_of_sale/static/src/app/components/inputs/numeric_input/numeric_input.xml
@@ -3,7 +3,7 @@
     <t t-name="point_of_sale.NumericInput">
         <div t-attf-class="{{this.props.class}} d-flex input-group" >
             <button class="btn btn-secondary border" t-on-click="() => this.setValue(this.getValue() - 1)" t-att-disabled="this.getValue() lte this.props.min">
-                <i class="fa fa-minus center"/>
+                <i class="oi center" data-icon="remove"/>
             </button>
             <div class="form-control border-top border-bottom">
                 <input class="o_input py-1 border-0 text-body text-center" type="number"
@@ -13,7 +13,7 @@
                     t-on-input="(event) => this.setValue(this.parseInt(event.target.value))" />
             </div>
             <button class="btn btn-secondary border" t-on-click="() => this.setValue(this.getValue() + 1)">
-                <i class="fa fa-plus"/>
+                <i class="oi" data-icon="add"/>
             </button>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/components/list_container/list_container.js b/addons/point_of_sale/static/src/app/components/list_container/list_container.js
index 8a89ccbd6165cf..e60f1a5e77498a 100644
--- a/addons/point_of_sale/static/src/app/components/list_container/list_container.js
+++ b/addons/point_of_sale/static/src/app/components/list_container/list_container.js
@@ -40,7 +40,7 @@ export class ListContainer extends Component {
     static template = xml`
         <div class="d-flex gap-1 align-items-center flex-grow-1" t-attf-class="{{this.props.class}}" t-att-class="{'overflow-hidden': !this.isUiSmall}">
             <button t-if="this.props.onClickPlus" class="list-plus-btn btn btn-secondary btn-lg flex-shrink-0 lh-lg" t-on-click="this.props.onClickPlus">
-                <i class="fa fa-fw fa-plus-circle" aria-hidden="true"/>
+                <i class="oi oi-fw" data-icon="add_circle" aria-hidden="true"/>
             </button>
             <span t-if="this.props.onClickPlus" class="navbar-separator mx-1"/>
             <div class="overflow-hidden flex-grow-1">
@@ -51,7 +51,7 @@ export class ListContainer extends Component {
                     <button t-if="this.sizing.isLarger or this.props.forceSmall" t-on-click="this.toggle"
                         class="btn btn-lg btn-secondary order-1 flex-shrink-0 fw-bolder lh-lg"
                         t-att-class="this.props.forceSmall ? '' : 'px-3 fw-bold'">
-                        <i t-if="this.props.forceSmall" class="fa fa-fw fa-caret-down"/>
+                        <i t-if="this.props.forceSmall" class="oi oi-fw" data-icon="arrow_drop_down"/>
                         <t t-else="">+<t t-out="this.hiddenCount"/></t>
                     </button>
                 </div>
diff --git a/addons/point_of_sale/static/src/app/components/navbar/navbar.xml b/addons/point_of_sale/static/src/app/components/navbar/navbar.xml
index 686a26a9a35a21..6be611c13e2606 100644
--- a/addons/point_of_sale/static/src/app/components/navbar/navbar.xml
+++ b/addons/point_of_sale/static/src/app/components/navbar/navbar.xml
@@ -8,18 +8,18 @@
                     <div class="navbar-menu btn-group" role="group" aria-label="Navigation Menu">
                         <button class="register-label btn btn-outline-secondary btn-lg lh-lg" t-att-class="{'active': mainButton === 'register'}" t-on-click="() => this.onClickRegister()">
                             <span t-if="!ui.isSmall">Register</span>
-                            <i t-else="" class="fa fa-fw fa-pencil" t-att-class="{'fa-lg' : !ui.isSmall}"/>
+                            <i t-else="" class="oi oi-fw oi-filled" data-icon="edit" t-att-class="{'oi-lg' : !ui.isSmall}"/>
                         </button>
                         <button class="orders-button btn btn-outline-secondary btn-lg lh-lg" t-att-class="{'active': mainButton === 'order'}" t-on-click="() => this.onTicketButtonClick()">
                             <t t-if="!ui.isSmall">
                                 <span>Orders</span>
                             </t>
-                            <i t-else="" class="fa fa-fw fa-book" t-att-class="{'fa-lg' : !ui.isSmall}"/>
+                            <i t-else="" class="oi oi-fw" data-icon="book" t-att-class="{'oi-lg' : !ui.isSmall}"/>
                         </button>
                     </div>
                     <OrderTabs orders="getOrderTabs()" class="'h-50'"/>
                     <button class="btn btn-secondary d-flex align-items-center gap-1 h-100 ms-2 p-2 preset-time-btn" t-on-click="openPresetTiming" t-if="shouldDisplayPresetTime">
-                        <i class="fa fa-clock-o" aria-hidden="true"/>
+                        <i class="oi" data-icon="schedule" aria-hidden="true"/>
                         <span class="fw-bolder lh-1" t-out="this.pos.getOrder()?.presetTime || '--:--'" />
                     </button>
                 </div>
@@ -31,60 +31,60 @@
                 <div class="status-buttons d-flex align-items-center justify-content-end gap-1">
                     <div t-if="this.pos.data.network.offline or this.pos.data.network.loading" class="oe_status px-3">
                         <span t-if="this.pos.data.network.unsyncData.length > 0" t-out="this.pos.data.network.unsyncData.length" />
-                        <div t-if="this.pos.data.network.offline" class="fa fa-fw fa-chain-broken text-danger"/>
-                        <div t-else="" class="fa fa-fw fa-spin fa-circle-o-notch text-warning"/>
+                        <div t-if="this.pos.data.network.offline" class="oi oi-fw text-danger" data-icon="link_off"/>
+                        <div t-else="" class="oi oi-fw oi-spin text-warning" data-icon="autorenew"/>
                     </div>
                     <Input tModel="[pos, 'searchProductWord']"
                     class="ui.isSmall ? 'p-0' : 'w-100 w-xl-50 me-0 me-lg-2'"
                     isSmall="ui.isSmall"
                     placeholder.translate="Search products..."
-                    icon="{type: 'fa', value: 'fa-search fa-lg fa-fw'}"
+                    icon="{type: 'icon', value: 'search', class: 'oi-lg oi-fw'}"
                     debounceMillis="500"
                     getRef="(ref) => this.inputRef = ref"
                     t-if="pos.showSearchButton()"
                     isOpenCallback="(isOpen) => state.searchBarOpen = isOpen" />
                     <button class="btn btn-light btn-lg lh-lg" t-if="isBarcodeScannerSupported() and ['ProductScreen', 'TicketScreen'].includes(this.pos.router.state.current) and !pos.config.module_pos_restaurant" t-on-click="onClickScan">
-                        <i class="fa fa-fw fa-lg fa-barcode" /><span t-if="this.pos.scanning" class="ms-1">Stop</span>
+                        <i class="oi oi-fw oi-lg" data-icon="barcode"/><span t-if="this.pos.scanning" class="ms-1">Stop</span>
                     </button>
                     <!-- No need to show the cashier name on small screens -->
                     <CashierName t-if="!ui.isSmall"/>
                     <Dropdown>
                         <button class="btn btn-light btn-lg lh-lg">
-                            <i class="fa fa-fw fa-bars"/>
+                            <i class="oi oi-fw" data-icon="menu"/>
                         </button>
                         <t t-set-slot="content">
                             <div class="d-flex gap-2 p-2 border-bottom">
                                 <span t-on-click="openLnaPopup" role="button" t-attf-class="d-flex align-items-center justify-content-center py-1 btn btn-{{this.pos.lnaState.type}} w-100 text-center {{this.pos.config.use_iot_box ? 'flex-column' : '' }}" title="Local Network Access">
-                                    <i class="fa fa-fw fa-wifi"/> LNA
+                                    <i class="oi oi-fw" data-icon="wifi"/> LNA
                                 </span>
                             </div>
                             <div class="p-2 pos-burger-menu-items">
                                 <DropdownItem onSelected="() => this.openCustomerDisplay()">
-                                    <i class="fa fa-fw fa-desktop" aria-hidden="true" /> Customer Display
+                                    <i class="oi oi-fw" data-icon="desktop_windows" aria-hidden="true" /> Customer Display
                                 </DropdownItem>
                                 <DropdownItem t-if="!isDisplayStandalone and this.pos.cashier._role != 'minimal'" onSelected="() => window.open(this.appUrl)">
-                                    <i class="fa fa-fw fa-download" aria-hidden="true" /> Install App
+                                    <i class="oi oi-fw" data-icon="download" aria-hidden="true" /> Install App
                                 </DropdownItem>
                                 <DropdownItem t-if="showCashMoveButton and this.pos.cashier._role != 'minimal'" onSelected="() => this.pos.cashMove()">
-                                    <i class="fa fa-fw fa-money" aria-hidden="true" /> Cash In/Out
+                                    <i class="oi oi-fw" data-icon="payments" aria-hidden="true" /> Cash In/Out
                                 </DropdownItem>
                                 <DropdownItem t-if="!this.pos.data.network.offline" onSelected="() => this.reloadProducts()">
-                                    <i class="fa fa-fw fa-refresh" aria-hidden="true" /> Reload Data
+                                    <i class="oi oi-fw" data-icon="refresh" aria-hidden="true" /> Reload Data
                                 </DropdownItem>
                                 <DropdownItem t-if="showCreateProductButton" onSelected="() => this.pos.editProduct()">
-                                    <i class="fa fa-fw fa-plus" aria-hidden="true" /> Create Product
+                                    <i class="oi oi-fw" data-icon="add" aria-hidden="true" /> Create Product
                                 </DropdownItem>
                                 <DropdownItem t-if="isBarcodeScannerSupported() and this.pos.router.state.current == 'ProductScreen' and ui.isSmall and !pos.config.module_pos_restaurant" onSelected="() => this.onClickScan()">
-                                    <i class="fa fa-fw fa-barcode" aria-hidden="true" /> <t t-if="this.pos.scanning">Stop</t> Barcode Scanner
+                                    <i class="oi oi-fw" data-icon="barcode" aria-hidden="true" /> <t t-if="this.pos.scanning">Stop</t> Barcode Scanner
                                 </DropdownItem>
                                 <DropdownItem t-if="pos.ticketPrinter.hasReceiptPrinters" onSelected="() => this.showSaleDetails()">
-                                    <i class="fa fa-fw fa-print" aria-hidden="true" /> Print Report
+                                    <i class="oi oi-fw" data-icon="print" aria-hidden="true" /> Print Report
                                 </DropdownItem>
                                 <DropdownItem onSelected="() => pos.closePos()">
-                                    <i class="fa fa-fw fa-chevron-left" aria-hidden="true" /> Backend
+                                    <i class="oi oi-fw" data-icon="chevron_left" aria-hidden="true" /> Backend
                                 </DropdownItem>
                                 <DropdownItem onSelected="() => this.pos.closeSession()">
-                                    <i class="fa fa-fw fa-key" aria-hidden="true" /> Close Register
+                                    <i class="oi oi-fw" data-icon="key" aria-hidden="true" /> Close Register
                                 </DropdownItem>
                             </div>
                         </t>
diff --git a/addons/point_of_sale/static/src/app/components/navbar/sale_details_button/sale_details_button.xml b/addons/point_of_sale/static/src/app/components/navbar/sale_details_button/sale_details_button.xml
index 88199584068472..a16f5a86373f9c 100644
--- a/addons/point_of_sale/static/src/app/components/navbar/sale_details_button/sale_details_button.xml
+++ b/addons/point_of_sale/static/src/app/components/navbar/sale_details_button/sale_details_button.xml
@@ -5,7 +5,7 @@
         <div t-att-class="{'oe_status cursor-pointer': this.props.isHeaderButton }" t-on-click="this.onClick">
             <div class="js_connected oe_icon"
                 title="Print a report with all the sales of the current PoS Session">
-                <i class="fa fa-fw fa-print" role="img" aria-label="Print"></i>
+                <i class="oi oi-fw" data-icon="print" role="img" aria-label="Print"></i>
             </div>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/components/orderline/orderline.xml b/addons/point_of_sale/static/src/app/components/orderline/orderline.xml
index ba4be039a37056..bc4641861465e6 100644
--- a/addons/point_of_sale/static/src/app/components/orderline/orderline.xml
+++ b/addons/point_of_sale/static/src/app/components/orderline/orderline.xml
@@ -30,10 +30,10 @@
                 <ul class="info-list d-flex flex-column mb-0 ms-2" t-att-class="this.infoListClasses">
                     <li class="price-per-unit" t-if="vals.displayPriceUnit" t-out="vals.displayPriceUnit" />
                     <li t-if="vals.discount" class="price-per-unit">
-                        <i class="fa fa-tag pe-1"/><em><t t-out="vals.discount" />% </em> discount off on <t t-out="vals.noDiscountPrice"/>
+                        <i class="oi pe-1" data-icon="label"/><em><t t-out="vals.discount" />% </em> discount off on <t t-out="vals.noDiscountPrice"/>
                     </li>
                     <li t-if="this.line.customer_note" class="customer-note w-100 rounded text-break bg-opacity-25" t-att-class="{'bg-warning text-warning p-2': vals.isDisplay}">
-                        <i class="fa fa-sticky-note me-1" role="img" aria-label="Customer Note" title="Customer Note"/>
+                        <i class="oi oi-filled me-1" data-icon="sticky_note_2" role="img" aria-label="Customer Note" title="Customer Note"/>
                         <t t-out="this.line.customer_note" />
                     </li>
                     <div t-if="vals.isDisplay and this.line.note" class="internal-note-container d-flex gap-2 flex-wrap">
diff --git a/addons/point_of_sale/static/src/app/components/popups/cash_move_popup/cash_move_list_popup/cash_move_list_popup.xml b/addons/point_of_sale/static/src/app/components/popups/cash_move_popup/cash_move_list_popup/cash_move_list_popup.xml
index 398428788a4d3b..18d59bc1403018 100644
--- a/addons/point_of_sale/static/src/app/components/popups/cash_move_popup/cash_move_list_popup/cash_move_list_popup.xml
+++ b/addons/point_of_sale/static/src/app/components/popups/cash_move_popup/cash_move_list_popup/cash_move_list_popup.xml
@@ -29,8 +29,8 @@
                                     
                                     <td class="text-end delete-row" t-if="this.hasCashDeletePerm">
                                         <button t-on-click.stop="this.callbacks[cm.id].call" class="btn btn-link btn-lg text-danger">
-                                            <i t-if="this.callbacks[cm.id].status != 'loading'" class="fa fa-trash" aria-hidden="true"/>
-                                            <i t-else="" class="fa fa-spin fa-circle-o-notch" aria-hidden="true" />
+                                            <i t-if="this.callbacks[cm.id].status != 'loading'" class="oi oi-filled" data-icon="delete" aria-hidden="true"/>
+                                            <i t-else="" class="oi oi-spin" data-icon="autorenew" aria-hidden="true" />
                                         </button>
                                     </td>
                                 </tr>
@@ -56,8 +56,8 @@
                                 <div class="col-2 align-self-center delete-row">
                                     <div class="d-flex align-items-center justify-content-center h-100" name="delete" t-on-click.stop="this.callbacks[cm.id].call">
                                         <div class="btn btn-danger btn-lg">
-                                            <i t-if="this.callbacks[cm.id].status != 'loading'" class="fa fa-trash" aria-hidden="true"/>
-                                            <i t-else="" class="fa fa-spin fa-circle-o-notch" aria-hidden="true" />
+                                            <i t-if="this.callbacks[cm.id].status != 'loading'" class="oi oi-filled" data-icon="delete" aria-hidden="true"/>
+                                            <i t-else="" class="oi oi-spin" data-icon="autorenew" aria-hidden="true" />
                                         </div>
                                     </div>
                                 </div>
diff --git a/addons/point_of_sale/static/src/app/components/popups/closing_popup/closing_popup.xml b/addons/point_of_sale/static/src/app/components/popups/closing_popup/closing_popup.xml
index 515fe54bf0d743..5290632df5adc9 100644
--- a/addons/point_of_sale/static/src/app/components/popups/closing_popup/closing_popup.xml
+++ b/addons/point_of_sale/static/src/app/components/popups/closing_popup/closing_popup.xml
@@ -69,7 +69,8 @@
                                 onBlur="() => this.handleCashCountBlur()"
                             />
                             <button
-                                class="icon fa fa-money btn btn-secondary"
+                                class="icon oi btn btn-secondary"
+                                data-icon="payments"
                                 t-on-click="this.openDetailsPopup"
                             />
                         </div>
@@ -88,7 +89,8 @@
                                 />
                                 <t t-if="pm.type == 'cash'">
                                     <button
-                                        class="icon fa fa-money btn btn-secondary"
+                                        class="icon oi btn btn-secondary"
+                                        data-icon="payments"
                                         t-on-click="this.openDetailsPopup"
                                     />
                                 </t>
@@ -130,7 +132,7 @@
                             t-att-class="this.ui.isSmall ? 'w-100' : 'btn-lg ms-auto'"
                             title="Download a report with all the sales of the current PoS Session">
                                 Daily Sale
-                                <i t-if="!this.ui.isSmall" class="fa fa-download" role="img"/>
+                                <i t-if="!this.ui.isSmall" class="oi" data-icon="download" role="img"/>
                         </button>
                         <button t-if="this.pos.ticketPrinter.hasReceiptPrinters" class="button icon btn btn-secondary" t-att-class="{'btn-lg': !this.ui.isSmall}">
                             <SaleDetailsButton/>
diff --git a/addons/point_of_sale/static/src/app/components/popups/opening_control_popup/opening_control_popup.xml b/addons/point_of_sale/static/src/app/components/popups/opening_control_popup/opening_control_popup.xml
index 54ae7067017026..baa95e1f8f6a04 100644
--- a/addons/point_of_sale/static/src/app/components/popups/opening_control_popup/opening_control_popup.xml
+++ b/addons/point_of_sale/static/src/app/components/popups/opening_control_popup/opening_control_popup.xml
@@ -26,7 +26,7 @@
                         getRef="(ref) => this.openingCashInput = ref"
                     />
                     <div class="button icon btn btn-secondary btn-lg lh-lg" t-on-click="this.openDetailsPopup">
-                        <i class="fa fa-money" role="img" title="Open the money details popup"/>
+                        <i class="oi" data-icon="payments" role="img" title="Open the money details popup"/>
                     </div>
                 </div>
             </div>
diff --git a/addons/point_of_sale/static/src/app/components/popups/print_popup/print_popup.js b/addons/point_of_sale/static/src/app/components/popups/print_popup/print_popup.js
index b8504c941daea3..60ef22b0556acc 100644
--- a/addons/point_of_sale/static/src/app/components/popups/print_popup/print_popup.js
+++ b/addons/point_of_sale/static/src/app/components/popups/print_popup/print_popup.js
@@ -38,7 +38,7 @@ export class PrintPopup extends Component {
                 label: _t("Print Receipt"),
                 method: () => this.doFullPrint.call(),
                 status: this.doFullPrint.status,
-                icon: "fa-print",
+                icon: "print",
                 isPrimary: true,
             },
         ];
@@ -48,7 +48,7 @@ export class PrintPopup extends Component {
                 label: _t("Print Basic Receipt"),
                 method: () => this.doBasicPrint.call(),
                 status: this.doBasicPrint.status,
-                icon: "fa-gift",
+                icon: "card_giftcard",
                 isPrimary: false,
             });
         }
diff --git a/addons/point_of_sale/static/src/app/components/popups/print_popup/print_popup.xml b/addons/point_of_sale/static/src/app/components/popups/print_popup/print_popup.xml
index 8dc547d82f5ec6..9ffc7a4ae56cdf 100644
--- a/addons/point_of_sale/static/src/app/components/popups/print_popup/print_popup.xml
+++ b/addons/point_of_sale/static/src/app/components/popups/print_popup/print_popup.xml
@@ -8,7 +8,11 @@
                         class="btn btn-lg py-3 rounded-3 d-flex gap-2 align-items-center justify-content-center"
                         t-att-class="item.isPrimary ? 'btn-primary' : 'btn-secondary'"
                         t-on-click="() => this.clickPrintButton(item)">
-                        <i t-attf-class="fa fa-2x {{item.status === 'loading' ? 'fa-fw fa-spin fa-circle-o-notch' : item.icon}} me-1" /><t t-out="item.label" />
+                        <i
+                            class="oi oi-2x me-1"
+                            t-att-class="{'oi-fw oi-spin': item.status === 'loading'}"
+                            t-att-data-icon="item.status === 'loading' ? 'autorenew' : item.icon"
+                        /><t t-out="item.label" />
                 </button>
             </div>
         </Dialog>
diff --git a/addons/point_of_sale/static/src/app/components/popups/product_info_popup/product_info_popup.xml b/addons/point_of_sale/static/src/app/components/popups/product_info_popup/product_info_popup.xml
index 7e7b0f031853cb..c00b5cde4581e6 100644
--- a/addons/point_of_sale/static/src/app/components/popups/product_info_popup/product_info_popup.xml
+++ b/addons/point_of_sale/static/src/app/components/popups/product_info_popup/product_info_popup.xml
@@ -4,7 +4,7 @@
         <Dialog>
             <t t-set-slot="header">
                 <button t-on-click="this.toggleFavorite" class="border-0 bg-transparent mb-2" t-att-disabled="this.pos.cashier._role == 'minimal'">
-                    <i t-attf-class="fa fa-lg fa-fw  {{this.props.productTemplate.is_favorite ? 'fa-star' : 'fa-star-o'}}"
+                    <i class="oi oi-lg oi-fw" t-att-class="{'oi-filled': this.props.productTemplate.is_favorite}" data-icon="star"
                         t-att-style="this.props.productTemplate.is_favorite ? 'color: #f3cc00;' : ''"
                         role="img"/>
                 </button>
diff --git a/addons/point_of_sale/static/src/app/components/popups/select_lot_popup/select_lot_popup.xml b/addons/point_of_sale/static/src/app/components/popups/select_lot_popup/select_lot_popup.xml
index 6a5ed64d59eaeb..33d5b83d4877b6 100644
--- a/addons/point_of_sale/static/src/app/components/popups/select_lot_popup/select_lot_popup.xml
+++ b/addons/point_of_sale/static/src/app/components/popups/select_lot_popup/select_lot_popup.xml
@@ -12,7 +12,7 @@
                     <div class="lot-item input-group mb-2">
                         <span class="form-control" t-out="v.text"/>
                         <button class="btn btn-danger" t-on-click="() => this.removeItem(v.id)">
-                            <i class="fa fa-trash-o"></i>
+                            <i class="oi" data-icon="delete"></i>
                         </button>
                     </div>
                 </t>
diff --git a/addons/point_of_sale/static/src/app/components/popups/selection_popup/selection_popup.xml b/addons/point_of_sale/static/src/app/components/popups/selection_popup/selection_popup.xml
index 938bec8b79d414..9a623269dbc641 100644
--- a/addons/point_of_sale/static/src/app/components/popups/selection_popup/selection_popup.xml
+++ b/addons/point_of_sale/static/src/app/components/popups/selection_popup/selection_popup.xml
@@ -17,7 +17,7 @@
                         <span t-out="item.description" t-if="item.description" />
                     </div>
                </div>
-                <i t-attf-class="{{ item.isSelected ? 'fa fa-check text-action' : 'oi oi-chevron-right' }}"/>
+                <i class="oi" t-att-class="{ 'text-action': item.isSelected }" t-attf-data-icon="{{ item.isSelected ? 'check' : 'chevron_forward' }}"/>
             </button>
         </Dialog>
     </t>
diff --git a/addons/point_of_sale/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.js b/addons/point_of_sale/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.js
index 5d52597121112a..f298c90a0c8e19 100644
--- a/addons/point_of_sale/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.js
+++ b/addons/point_of_sale/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.js
@@ -73,7 +73,8 @@ export class SendReceiptPopup extends Component {
                         status:
                             this.sendReceipt.lastArgs?.[0]?.name == "Email" &&
                             this.sendReceipt.status,
-                        icon: "fa-paper-plane",
+                        icon: "send",
+                        icon_class: "oi-filled",
                         disabled: () => !this.isValidEmail,
                     },
                 ],
diff --git a/addons/point_of_sale/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.xml b/addons/point_of_sale/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.xml
index 75577dba515c00..68025d5d244db5 100644
--- a/addons/point_of_sale/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.xml
+++ b/addons/point_of_sale/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.xml
@@ -8,7 +8,11 @@
                     <input type="text" t-attf-class="{{ item.inputClass }} o_input position-relative p-3 border border-end-0 rounded-start-2 text-body" t-att-placeholder="item.placeholder" t-custom-model="this.state[item.model]" />
                     <div class="d-flex gap-1">
                         <button t-foreach="item.buttons" t-as="button" t-key="button_index" t-att-style="`width: ${this.ui.isSmall ? '4rem' : '8rem'}`" class="btn btn-primary btn-lg lh-lg rounded-start-0 h-100" t-att-disabled="button.disabled()" t-on-click="() => button.click.call()">
-                            <i t-attf-class="fa {{button.status === 'loading' ? 'fa-fw fa-spin fa-circle-o-notch' : button.icon}}" />
+                            <i
+                                class="oi"
+                                t-attf-class="{{button.status === 'loading' ? 'oi-fw oi-spin' : ''}} {{button.icon_class || ''}}"
+                                t-attf-data-icon="{{button.status === 'loading' ? 'autorenew' : button.icon}}"
+                            />
                         </button>
                     </div>
                 </div>
diff --git a/addons/point_of_sale/static/src/app/components/product_info_banner/product_info_banner.xml b/addons/point_of_sale/static/src/app/components/product_info_banner/product_info_banner.xml
index ffdbe265d4bebc..f2dea204bf0870 100644
--- a/addons/point_of_sale/static/src/app/components/product_info_banner/product_info_banner.xml
+++ b/addons/point_of_sale/static/src/app/components/product_info_banner/product_info_banner.xml
@@ -6,7 +6,7 @@
                 <span>Free To Use: </span>
                 <span t-if="this.fetchStock.status === 'success' || this.props.info"><t t-out="this.state.free_qty"/> <t t-out="this.state.uom"/></span>
                 <span t-elif="this.fetchStock.status === 'error'">N/A</span>
-                <i t-else="" class="fa fa-fw fa-spin fa-circle-o-notch" aria-hidden="true" />
+                <i t-else="" class="oi oi-fw oi-spin" data-icon="autorenew" aria-hidden="true" />
             </div>
             <AccordionItem t-if="this.state.other_warehouses?.length > 0">
                 <t t-set-slot="header">
diff --git a/addons/point_of_sale/static/src/app/customer_display/customer_display_qr_code_popup.xml b/addons/point_of_sale/static/src/app/customer_display/customer_display_qr_code_popup.xml
index 903811516e50d4..1b5237c5a05d8e 100644
--- a/addons/point_of_sale/static/src/app/customer_display/customer_display_qr_code_popup.xml
+++ b/addons/point_of_sale/static/src/app/customer_display/customer_display_qr_code_popup.xml
@@ -14,7 +14,7 @@
                                 <div class="small mb-3">
                                     <t t-set="customerDisplayURL" t-value="this.props.customerDisplayURL"/>
                                     <a t-att-href="customerDisplayURL" target="_blank" t-out="customerDisplayURL" />
-                                    <CopyButton content="customerDisplayURL" className="'ms-2 btn-primary'" successText.translate="Link copied to clipboard" icon="'fa-clone'"/>
+                                    <CopyButton content="customerDisplayURL" className="'ms-2 btn-primary'" successText.translate="Link copied to clipboard" icon="'content_copy'"/>
                                 </div>
                             </div>
                             <button t-on-click="this.props.close" class="button btn btn-secondary mb-3 rounded-3">
diff --git a/addons/point_of_sale/static/src/app/screens/feedback_screen/feedback_screen.xml b/addons/point_of_sale/static/src/app/screens/feedback_screen/feedback_screen.xml
index 3edae14d7abb73..eb5f39e50208ef 100644
--- a/addons/point_of_sale/static/src/app/screens/feedback_screen/feedback_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/feedback_screen/feedback_screen.xml
@@ -10,8 +10,8 @@
             </div>
             <div t-if="!this.ui.isSmall" class="desktop-format w-75 d-flex gap-3 flex-row align-items-center justify-content-around p-2">
                 <button t-if="this.pos.canEditPayment(this.currentOrder)" t-att-disabled="this.state.loading" class="button btn btn-secondary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3 edit-order-payment" t-on-click.stop="() => this.clickEditPayment()">Back</button>
-                <button t-if="this.canPrintReceipt" t-att-disabled="this.state.loading || this.currentOrder.state == 'draft'" class="print-ticket-button button btn btn-secondary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3" t-on-click.stop="() => this.clickPrint()"><i class="fa fa-print" role="img" aria-label="Print" title="Print"></i> Print</button>
-                <button t-if="this.canSendReceipt" t-att-disabled="this.state.loading || this.currentOrder.state == 'draft'" class="send-receipt button btn btn-secondary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3" t-on-click.stop="() => this.clickSend()"><i class="fa fa-paper-plane" role="img" aria-label="Send" title="Send"></i> Send Receipt</button>
+                <button t-if="this.canPrintReceipt" t-att-disabled="this.state.loading || this.currentOrder.state == 'draft'" class="print-ticket-button button btn btn-secondary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3" t-on-click.stop="() => this.clickPrint()"><i class="oi" data-icon="print" role="img" aria-label="Print" title="Print"></i> Print</button>
+                <button t-if="this.canSendReceipt" t-att-disabled="this.state.loading || this.currentOrder.state == 'draft'" class="send-receipt button btn btn-secondary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3" t-on-click.stop="() => this.clickSend()"><i class="oi oi-filled" data-icon="send" role="img" aria-label="Send" title="Send"></i> Send Receipt</button>
                 <button t-att-disabled="this.state.loading" class="validation button btn btn-primary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3" t-on-click.stop="() => this.onClick(true)">
                     Continue
                     <div t-if="this.state.timeout" class="wipe-overlay"/>
diff --git a/addons/point_of_sale/static/src/app/screens/login_screen/login_screen.xml b/addons/point_of_sale/static/src/app/screens/login_screen/login_screen.xml
index e1abfcf73ad06f..0576cd2fbb8f97 100644
--- a/addons/point_of_sale/static/src/app/screens/login_screen/login_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/login_screen/login_screen.xml
@@ -23,7 +23,7 @@
             <div class="screen-login flex-grow-1 d-flex flex-column">
                 <div class="login-body d-flex flex-column flex-md-row gap-3 m-auto">
                     <button class="open-register-btn btn btn-light btn-lg d-flex flex-column align-items-center flex-grow-1 flex-basis-100 gap-2 p-5 rounded-4 lh-lg" t-on-click="() => this.openRegister()">
-                        <i class="fa fa-shopping-basket fa-3x" aria-hidden="true"></i>
+                        <i class="oi oi-3x" data-icon="shopping_basket" aria-hidden="true"></i>
                         <span class="d-flex flex-grow-1 align-items-center">Open Register</span>
                     </button>
                 </div>
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss
index 2fc61572615088..e56e9955dbc64d 100644
--- a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.scss
@@ -36,7 +36,7 @@
 }
 
 .partner-line {
-    &:hover i.oi-chevron-right {
+    &:hover i[data-icon='chevron_forward'] {
         transition: $transition-base;
         transform: translateX(.5rem);
         color: $o-main-link-color;
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.xml b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.xml
index a3c04f839f12bd..baa5b2ec364b3b 100644
--- a/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.xml
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_line/partner_line.xml
@@ -11,7 +11,7 @@
                         <div class="company-field text-bg-muted" t-out="this.props.partner.parent_name or ''" />
                     </div>
                     <Dropdown t-if="this.pos.cashier._role !== 'minimal'">
-                        <button class="btn btn-ligth fa fa-bars" />
+                        <button class="btn btn-ligth oi" data-icon="menu"/>
                         <t t-set-slot="content">
                             <DropdownItem onSelected="() => this.props.onClickEdit(this.props.partner)">
                                 Edit Details
@@ -25,15 +25,15 @@
                 <div class="partner-line-adress p-1" t-if="this.props.partner.address" t-out="this.props.partner.address" />
                 <div class="partner-line-email p-1">
                     <div class="mb-1" t-if="this.props.partner.phone">
-                        <i class="fa fa-fw fa-phone me-2" /><t t-out="this.props.partner.phone" />
+                        <i class="oi oi-fw oi-filled me-2" data-icon="phone" /><t t-out="this.props.partner.phone" />
                     </div>
                     <div t-if="this.props.partner.email" class="email-field mb-1 d-flex align-items-start">
-                        <i class="fa fa-fw fa-paper-plane-o me-2 lh-base flex-shrink-0" /><t t-out="this.props.partner.email" />
+                        <i class="oi oi-fw me-2 lh-base flex-shrink-0" data-icon="send" /><t t-out="this.props.partner.email" />
                     </div>
                 </div>
                 <div class="p-1">
                     <button t-if="this.props.isSelected" t-on-click.stop="this.props.onClickUnselect" class="unselect-tag-mobile d-inline-block d-lg-none btn btn-light border">
-                        <i class="fa fa-times me-1"></i>
+                        <i class="oi me-1" data-icon="close"></i>
                         <span>UNSELECT</span>
                     </button>
                 </div>
@@ -51,17 +51,17 @@
                 </td>
                 <td class="partner-line-email w-100">
                     <div t-if="this.props.partner.phone">
-                        <i class="fa fa-fw fa-phone me-2"/><t t-out="this.props.partner.phone"/>
+                        <i class="oi oi-fw oi-filled me-2" data-icon="phone"/><t t-out="this.props.partner.phone"/>
                     </div>
                     <div t-if="this.props.partner.email" class="email-field d-flex align-items-start">
-                        <i class="fa fa-fw fa-paper-plane-o me-2 lh-base flex-shrink-0"/><span class="text-break" t-out="this.props.partner.email" />
+                        <i class="oi oi-fw me-2 lh-base flex-shrink-0" data-icon="send"/><span class="text-break" t-out="this.props.partner.email" />
                     </div>
                 </td>
                 <!-- FIXME: this should be in pos_settle_due, not here -->
                 <td class="partner-line-balance" t-if="this.props.isBalanceDisplayed"></td>
                 <td class="edit-partner-button-cell align-middle pe-0">
                     <button t-if="this.props.isSelected" t-on-click.stop="this.props.onClickUnselect" class="unselect-tag fs-5 btn btn-light lh-lg border d-inline-flex align-items-center">
-                        <i class="fa fa-times me-1"></i>
+                        <i class="oi me-1" data-icon="close"></i>
                         <span>UNSELECT</span>
                     </button>
                 </td>
@@ -69,7 +69,7 @@
                     <t t-if="this.pos.cashier._role !== 'minimal'">
                         <Dropdown>
                             <button class="btn btn-light btn-lg lh-lg border float-end">
-                                <i class="fa fa-fw fa-bars"/>
+                                <i class="oi oi-fw" data-icon="menu"/>
                             </button>
                             <t t-set-slot="content">
                                 <DropdownItem onSelected="() => this.props.onClickEdit(this.props.partner)">
diff --git a/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.xml b/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.xml
index 2deddb14297f9f..722eb5be11a33e 100644
--- a/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.xml
+++ b/addons/point_of_sale/static/src/app/screens/partner_list/partner_list.xml
@@ -14,7 +14,7 @@
                     class="'ms-auto'"
                     isSmall="this.ui.isSmall"
                     placeholder.translate="Search Customers..."
-                    icon="{type: 'fa', value: 'fa-search'}"
+                    icon="{type: 'icon', value: 'search'}"
                     t-on-enter="() => this.searchPartner()"
                     autofocus="true"
                     debounceMillis="100" />
@@ -51,7 +51,7 @@
                 </table>
                 <div t-else="" t-att-class="{'p-4': this.ui.isSmall}">
                     <div class="text-muted">
-                        <i class="fa fa-users fa-3x"></i>
+                        <i class="oi oi-filled oi-3x" data-icon="group"></i>
                         <p class="mt-3 fs-4 text-dark">No customers found, press <strong>Enter</strong> to load more.</p>
                     </div>
                 </div>
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.js b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.js
index de16b1016ae6f3..bc69039e42c74f 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.js
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.js
@@ -64,6 +64,7 @@ export class PaymentScreenPaymentLines extends Component {
      * @property {string} title                   - Title of the payment status section.
      * @property {Array<PaymentAction>} actions   - Actions available for the current payment state.
      * @property {string} [icon]                  - Optional icon representing the payment state.
+     * @property {string} [icon_class]            - Additional classes for the icon.
      *
      * @type {PaymentActionState}
      */
@@ -71,7 +72,8 @@ export class PaymentScreenPaymentLines extends Component {
         const status = line.payment_status;
         const isRefund = this.props.isRefundOrder;
         const camelToSnakeCase = (id) => id.replace(/([A-Z])/g, "_$1").toLowerCase();
-        const SPINNER_ICON = "fa fa-circle-o-notch fa-spin";
+        const SPINNER_ICON = "autorenew";
+        const SPINNER_ICON_CLASS = "oi-spin";
         const ACTIONS = {
             send: {
                 id: "send",
@@ -153,6 +155,7 @@ export class PaymentScreenPaymentLines extends Component {
             state.id = isRefund ? "waiting_refund" : camelToSnakeCase(status);
             state.title = isRefund ? _t("Refund in process") : titles[status];
             state.icon = SPINNER_ICON;
+            state.icon_class = SPINNER_ICON_CLASS;
             state.actions = [ACTIONS.forceDone, ACTIONS.cancel];
         }
 
@@ -161,6 +164,7 @@ export class PaymentScreenPaymentLines extends Component {
             state.id = camelToSnakeCase(status);
             state.title = _t("Request sent");
             state.icon = SPINNER_ICON;
+            state.icon_class = SPINNER_ICON_CLASS;
             state.actions = [
                 { ...ACTIONS.forceDone, show: status === "waiting" },
                 { ...ACTIONS.forceCancel, show: status === "waitingCancel" },
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.xml b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.xml
index b90afe465560db..5b31091f294ffa 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.xml
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_lines/payment_lines.xml
@@ -8,7 +8,7 @@
                     <!-- Show QR Code -->
                     <t t-if="line.useQr">
                         <button class="paymentline_show_qr_code btn btn-link ms-2 ps-3" t-on-click="() => this.showQrCode(line)" t-att-disabled="!line.qr_code || !line.isProcessing()" aria-label="Show QR Code" title="Show QR Code">
-                            <i class="fa fa-qrcode" role="img" />
+                            <i class="oi" data-icon="qr_code" role="img" />
                         </button>
                     </t>
 
@@ -23,14 +23,14 @@
                     <!-- Delete or Spinner -->
                     <div t-if="(!line.isSelected() and line.isProcessing())"
                         class="payment-spinner mx-2 px-3">
-                        <i class="fa fa-circle-o-notch fa-spin" role="img" />
+                        <i class="oi oi-spin" data-icon="autorenew" role="img" />
                     </div>
                     <button t-elif="(!line.isDone() or !line.payment_status)"
                             class="delete-button btn btn-link mx-2 px-3"
                             t-on-click="() => this.props.deleteLine(line.uuid)"
                             aria-label="Delete"
                             title="Delete">
-                        <i class="oi oi-close text-danger" />
+                        <i class="oi text-danger" data-icon="close_small"/>
                     </button>
                 </div>
 
@@ -41,7 +41,7 @@
                         <div class="paymentline_status_title d-flex justify-content-between align-items-center gap-2 py-3 px-4 fs-4" t-attf-class="paymentline_status_title_{{state.id}}">
                             <span class="text-truncate" t-out="state.title" />
                             <t t-if="state.icon">
-                                <i t-att-class="state.icon" role="img" />
+                                <i class="oi" t-att-class="state.icon_class" t-att-data-icon="state.icon" role="img" />
                             </t>
                         </div>
                         <div class="paymentline_status_actions btn-group d-flex w-100" role="group">
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
index aa74c176178621..13a977f63ebc8c 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml
@@ -102,7 +102,7 @@
         <t t-if="this.ui.isSmall">
             <button class="btn-switchpane back-button validation-button btn btn-secondary btn-lg lh-lg "
                 t-on-click="() => this.pos.onClickBackButton()">
-                <i class="oi oi-chevron-left fa-fw" role="img" aria-label="Go Back" title="Go Back" />
+                <i class="oi oi-fw" data-icon="chevron_backward" role="img" aria-label="Go Back" title="Go Back" />
             </button>
         </t>
         <t t-else="">
@@ -122,7 +122,7 @@
                     t-att-class="{ 'highlight text-action': this.currentOrder.getPartner() }"
                     t-attf-class="{{ this.currentOrder.isCustomerRequired ? 'btn-primary' : 'btn-secondary' }}"
                     t-on-click="() => this.pos.selectPartner()">
-                    <i class="fa fa-user me-2" role="img" title="Customer" />
+                    <i class="oi oi-filled me-2" data-icon="person" role="img" title="Customer" />
                     <span class="partner-name">
                         <t t-if="this.currentOrder.getPartner()" t-out="this.currentOrder.getPartner().name"/>
                         <t t-else="">Customer</t>
@@ -132,28 +132,28 @@
                     t-att-class="{ 'highlight active': this.currentOrder.isToInvoice(), 'opacity-50': !this.pos.config.canInvoice }"
                     t-on-click="this.toggleIsToInvoice" t-att-disabled="this.currentOrder.lines[0]?.refunded_orderline_id?.order_id?.isToInvoice()">
                     <span>
-                        <i class="fa fa-file-text-o me-2" />
+                        <i class="oi me-2" data-icon="article"/>
                         <t t-if="this.pos.config.canInvoice">Invoice</t>
                         <t t-else="">Not available</t>
                     </span>
-                    <i class="fa me-2" t-attf-class="{{ this.currentOrder.isToInvoice() ? 'fa-check-square text-action' : 'fa-square-o' }}" />
+                    <i class="oi me-2" t-attf-class="{{ this.currentOrder.isToInvoice() ? 'oi-filled text-action' : '' }} {{ this.currentOrder.isToInvoice() ? 'check_box' : 'square' }}"/>
                 </button>
             </div>
             <div t-if="(this.pos.config.iface_tipproduct and this.pos.config.tip_product_id) or this.pos.config.iface_cashdrawer or this.pos.config.ship_later" class="d-flex flex-column gap-1 w-100">
                 <button t-if="this.pos.config.iface_tipproduct and this.pos.config.tip_product_id" class="button btn btn-secondary btn-lg d-flex justify-content-between align-items-baseline w-100 lh-lg" t-att-class="{ 'highlight active text-action': this.currentOrder.getTip() }"
                     t-on-click="this.addTip">
-                    <span t-attf-class="{{this.currentOrder.getTip() ? 'me-auto' : 'mx-auto' }}"><i class="fa fa-heart me-2" />Tip</span>
+                    <span t-attf-class="{{this.currentOrder.getTip() ? 'me-auto' : 'mx-auto' }}"><i class="oi oi-filled me-2" data-icon="favorite"/>Tip</span>
                     <t t-if="this.currentOrder.getTip() != 0">
                         <t t-out="this.env.utils.formatCurrency(this.currentOrder.getTip())" />
                     </t>
                 </button>
                 <button t-if="this.pos.config.iface_cashdrawer" class="button js_cashdrawer btn btn-secondary btn-lg py-3 rounded"
                     t-on-click="() => this.pos.openCashbox()">
-                    <i class="fa fa-archive me-2" />Open Cashbox
+                    <i class="oi me-2" data-icon="archive"/>Open Cashbox
                 </button>
                 <button t-if="this.pos.config.ship_later" class="button btn btn-secondary btn-lg d-flex justify-content-between align-items-baseline w-100 lh-lg" t-att-class="{ 'highlight active text-action': this.currentOrder.shipping_date }"
                     t-on-click="this.toggleShippingDatePicker">
-                    <span t-attf-class="{{this.currentOrder.shipping_date ? 'me-auto' : 'mx-auto' }}"><i class="fa fa-clock-o me-2" />Ship Later</span>
+                    <span t-attf-class="{{this.currentOrder.shipping_date ? 'me-auto' : 'mx-auto' }}"><i class="oi me-2" data-icon="schedule"/>Ship Later</span>
                     <span t-if="this.currentOrder.shipping_date">
                         <t t-out="this.currentOrder.formatDateOrTime('shipping_date', 'date')" />
                     </span>
diff --git a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.xml b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.xml
index d3a3e9f2d5412f..ea9241ca9dc10e 100644
--- a/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.xml
+++ b/addons/point_of_sale/static/src/app/screens/payment_screen/payment_status/payment_status.xml
@@ -12,7 +12,7 @@
                     <PriceFormatter price="this.tipText" />
                 </span>
                 <div class="position-absolute top-0 end-0 d-flex align-items-center h-100">
-                    <i class="fa fa-info-circle mx-2 px-3 fs-4" data-tooltip="The tip is already included inside the payment lines" />
+                    <i class="oi mx-2 px-3 fs-4" data-icon="info" data-tooltip="The tip is already included inside the payment lines" />
                 </div>
             </div>
             <div t-if="this.showStatus" class="payment-status-container d-flex flex-column-reverse flex-lg-row justify-content-between fs-2">
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml
index af4afcab58d8f9..c824451a062b41 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml
@@ -15,10 +15,10 @@
                         <span t-else="">Preset</span>
                     </button>
                     <button t-if="this.pos.showSaveOrderButton" t-att-disabled="this.pos.getOrder().isEmpty()" class="btn btn-secondary btn-lg ms-auto" t-on-click="() => this.pos.clickSaveOrder()">
-                        <i class="fa fa-upload"/>
+                        <i class="oi" data-icon="upload"/>
                     </button>
                     <button class="button mobile-more-button btn btn-secondary btn-lg" t-att-class="{'ms-auto': !this.pos.showSaveOrderButton}" t-on-click="this.props.onClickMore">
-                        <i class="oi oi-fw oi-ellipsis-v" aria-hidden="true" />
+                        <i class="oi oi-fw" data-icon="more_vert" aria-hidden="true" />
                     </button>
                 </t>
             </div>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/back_button/back_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/back_button/back_button.xml
index a370f4ed1c08de..54a06849d0a1dc 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/back_button/back_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/back_button/back_button.xml
@@ -3,7 +3,7 @@
 
     <t t-name="point_of_sale.BackButton">
         <button t-att-class="this.props.class" class="back-button btn btn-secondary btn-lg lh-lg" t-on-click="this.props.onClick">
-            <i class="oi oi-chevron-left fa-fw" role="img" aria-label="Go Back" title="Go Back" />
+            <i class="oi oi-fw" data-icon="chevron_backward" role="img" aria-label="Go Back" title="Go Back" />
         </button>
     </t>
 
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
index 020d37897cfd53..c5bd01e5f4f6c8 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
@@ -14,10 +14,10 @@
             <span t-else="">Preset</span>
         </button>
         <button t-if="!this.props.showRemainingButtons and !this.ui.isSmall and this.pos.showSaveOrderButton" t-att-disabled="this.pos.getOrder().isEmpty()" t-attf-class="{{ this.buttonClass }} ms-auto" t-on-click="() => this.pos.clickSaveOrder()">
-            <i class="fa fa-upload"/>
+            <i class="oi" data-icon="upload"/>
         </button>
         <button class="btn btn-secondary btn-lg flex-shrink-0 more-btn" t-att-class="{'ms-auto': !this.pos.showSaveOrderButton}" t-if="!this.props.showRemainingButtons and !this.ui.isSmall and this.props.onClickMore" t-on-click="this.props.onClickMore">
-            <i class="oi oi-fw oi-ellipsis-v" aria-hidden="true" />
+            <i class="oi oi-fw" data-icon="more_vert" aria-hidden="true" />
         </button>
         <!-- All these buttons will only be displayed in a dialog -->
         <t t-if="this.props.showRemainingButtons">
@@ -25,14 +25,14 @@
                 <NoteButton
                     label.translate="Customer Note"
                     class="this.buttonClass"
-                    icon="'fa fa-sticky-note'"/>
+                    icon="'sticky_note_2'"/>
                 <button t-if="this.pos.config.iface_printbill" t-att-class="this.buttonClass"
                     t-att-disabled="!this.pos.getOrder()?.getOrderlines()?.length"
                     t-on-click="this.clickPrintBill">
-                    <i class="fa fa-print me-1"></i>Bill
+                    <i class="oi me-1" data-icon="print"></i>Bill
                 </button>
                 <button t-if="this.pos.cashier._role != 'minimal'" class="o_pricelist_button" t-att-class="this.buttonClass" t-on-click="() => this.clickPricelist()">
-                    <i class="fa fa-th-list me-2" role="img" aria-label="Price list" title="Price list" />
+                    <i class="oi me-2" data-icon="view_list" role="img" aria-label="Price list" title="Price list" />
                     <t t-if="this.currentOrder?.pricelist_id" t-out="this.currentOrder.pricelist_id.display_name" />
                     <t t-else="">Pricelist</t>
                 </button>
@@ -40,23 +40,23 @@
                     class="control-button o_fiscal_position_button"
                     t-att-class="this.buttonClass"
                     t-on-click="() => this.clickFiscalPosition()">
-                    <i class="fa fa-book me-1" role="img" aria-label="Set fiscal position"
+                    <i class="oi me-1" data-icon="book" role="img" aria-label="Set fiscal position"
                     title="Set fiscal position" />
                     <t t-if="this.currentOrder?.fiscal_position_id" t-out="this.currentOrder.fiscal_position_id.display_name" />
                     <t t-else="">Tax</t>
                 </button>
                 <button t-if="this.displayProductInfoBtn()" t-att-class="this.buttonClass" t-on-click="() => this.pos.onProductInfoClick(this.currentOrder.getSelectedOrderline().product_id.product_tmpl_id, this.currentOrder.getSelectedOrderline().product_id)">
-                    <i class="fa fa-info-circle me-1" role="img" aria-label="Product Info" title="Product Info" /> Info
+                    <i class="oi me-1" data-icon="info" role="img" aria-label="Product Info" title="Product Info" /> Info
                 </button>
                 <button t-if="this.pos.isSelectedLineCombo" class="break-combo-button" t-att-class="this.buttonClass" t-on-click="() => this.breakSelectedCombo()">
-                    <i class="fa fa-outdent" role="img" aria-label="Break combo" title="Brean combo" /> Break combo
+                    <i class="oi" data-icon="format_indent_decrease" role="img" aria-label="Break combo" title="Brean combo" /> Break combo
                 </button>
                 <button
                     t-if="this.pos.cashier._role != 'minimal'"
                     t-att-class="this.buttonClass" t-on-click="() => this.pos.onDeleteOrder(this.pos.getOrder())"
                     t-att-disabled="!this.pos.getOrder()?.getOrderlines()?.length"
                 >
-                    <i class="fa fa-trash me-1" role="img" /> Cancel Order
+                    <i class="oi oi-filled me-1" data-icon="delete" role="img" /> Cancel Order
                 </button>
             </div>
         </t>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/orderline_note_button/orderline_note_button.js b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/orderline_note_button/orderline_note_button.js
index 1d1fa321967324..37a54376118e86 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/orderline_note_button/orderline_note_button.js
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/orderline_note_button/orderline_note_button.js
@@ -9,6 +9,7 @@ export class NoteButton extends Component {
     static template = "point_of_sale.NoteButton";
     static props = {
         icon: { type: String, optional: true },
+        icon_class: { type: String, optional: true },
         label: { type: String, optional: false },
         class: { type: String, optional: true },
     };
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/orderline_note_button/orderline_note_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/orderline_note_button/orderline_note_button.xml
index d3de239d92a735..47fea17b02bf1a 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/orderline_note_button/orderline_note_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/orderline_note_button/orderline_note_button.xml
@@ -5,7 +5,7 @@
             t-attf-class="{{this.props.class}} flex-shrink-0"
             t-att-disabled="this.pos.getOrder()?.isEmpty()" t-on-click="this.onClick">
             <t t-if="this.props.icon">
-                <i t-attf-class="{{this.props.icon}} me-1"/>
+                <i t-attf-class="{{this.props.icon_class}} me-1" t-att-data-icon="this.props.icon"/>
             </t>
             <span t-out="this.props.label"/>
         </button>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/order_summary/order_summary.xml b/addons/point_of_sale/static/src/app/screens/product_screen/order_summary/order_summary.xml
index 6ca5bce5ff8eee..a4602deea9ed33 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/order_summary/order_summary.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/order_summary/order_summary.xml
@@ -9,7 +9,8 @@
 				<t t-set-slot="pack-lot-icon">
 					<i t-if="line.getProduct()?.product_tmpl_id?.isTracked()"
 						t-on-click.stop="() => this.editPackLotLines(line)" role="img"
-						t-attf-class="{{ line.hasValidProductLot() ? 'text-success' : 'text-danger'}} fa fa-list line-lot-icon ms-1"
+						t-attf-class="{{ line.hasValidProductLot() ? 'text-success' : 'text-danger'}} oi line-lot-icon ms-1"
+						data-icon="format_list_bulleted"
 						t-attf-title="{{ line.hasValidProductLot() ? 'Valid product lot' : 'Invalid product lot'}}" />
 				</t>
 			</Orderline>
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/invoice_button/invoice_button.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/invoice_button/invoice_button.xml
index b05274b141e450..8f2c1b74056351 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/invoice_button/invoice_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/invoice_button/invoice_button.xml
@@ -3,7 +3,7 @@
 
     <t t-name="point_of_sale.InvoiceButton">
         <button class="control-button btn btn-secondary btn-lg lh-lg flex-grow-1 flex-shrink-1" t-on-click="() => this.click()" t-custom-ref="invoice-button">
-            <i class="fa fa-file-pdf-o me-1"></i>
+            <i class="oi me-1" data-icon="picture_as_pdf"></i>
             <span> </span>
             <span><t t-out="this.commandName"></t></span>
         </button>
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details_dialog/order_details_dialog.js b/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details_dialog/order_details_dialog.js
index 4a9aa503d596c0..3528ba19a1263d 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details_dialog/order_details_dialog.js
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details_dialog/order_details_dialog.js
@@ -31,7 +31,8 @@ export class OrderDetailsDialog extends Component {
             {
                 title: _t("Order Info"),
                 subtitle: formatDateTime(this.order.date_order),
-                icon: "fa-bookmark",
+                icon: "bookmark",
+                icon_class: "oi-filled",
                 fields: this.getOrderFields(),
                 buttons: [
                     {
@@ -47,7 +48,8 @@ export class OrderDetailsDialog extends Component {
             this.orderDetails.push({
                 title: _t("Payment Info"),
                 subtitle: formatCurrency(this.order.amount_total, orderCurrecy),
-                icon: "fa-credit-card",
+                icon: "credit_card",
+                icon_class: "",
                 buttons: [
                     {
                         label: _t("Edit Payment"),
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details_dialog/order_details_dialog.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details_dialog/order_details_dialog.xml
index 4180b2b5475559..499889a4244d63 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details_dialog/order_details_dialog.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/order_details_dialog/order_details_dialog.xml
@@ -7,7 +7,7 @@
                         <!-- Header -->
                         <div class="card-header d-flex justify-content-between align-items-center bg-secondary py-2 px-3">
                             <div class="d-flex align-items-center">
-                                <i t-att-class="`fa ${card.icon} fs-6`" aria-hidden="true"/>
+                                <i t-att-class="`oi ${card.icon_class} fs-6`" t-att-data-icon="card.icon" aria-hidden="true"/>
                                 <h5 class="ms-2 mb-0 fw-semibold text-dark">
                                     <t t-out="card.title"/>
                                     <small class="text-muted ms-2"><b><t t-out="card.subtitle"/></b></small>
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.xml
index 8bd2974aab89f0..e32d13567dd8e8 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.xml
@@ -5,7 +5,7 @@
         <div class="pos-search-bar d-flex align-items-center flex-grow-1 rounded">
             <div class="search position-relative h-100 d-flex flex-grow-1">
                 <div class="input-group">
-                    <span class="input-group-text"><i class="fa-fw oi oi-search" role="img" aria-label="Search Products" title="Search Products"/></span>
+                    <span class="input-group-text"><i class="oi-fw oi" data-icon="search" role="img" aria-label="Search Products" title="Search Products"/></span>
                     <input class="form-control form-control-lg" t-custom-ref="autofocus"
                     t-custom-model="this.state.searchInput" t-on-keydown="this.onSearchInputKeydown" t-on-keyup="this.onSearchInputKeyup" type="text" t-att-placeholder="this.props.placeholder" />
                     <div t-if="this.state.showSearchFields and this.state.searchInput" class="fields z-1 bg-light">
diff --git a/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml b/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml
index 2826b5f3cb4e33..db87fe83572bc4 100644
--- a/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/ticket_screen/ticket_screen.xml
@@ -25,10 +25,10 @@
                             <span class="page me-2" role="button" t-on-click="this.onClickPageNbr"><t t-out="this.getPageNumber()" /></span>
                             <div class="page-controls d-flex align-items-center gap-1">
                                 <button class="previous btn btn-secondary" t-on-click="() => this.onPrevPage()">
-                                    <i class="fa fa-fw fa-caret-left" role="img" aria-label="Previous Order List" title="Previous Order List"></i>
+                                    <i class="oi oi-fw" data-icon="arrow_left" role="img" aria-label="Previous Order List" title="Previous Order List"></i>
                                 </button>
                                 <button class="next btn btn-secondary" t-on-click="() => this.onNextPage()">
-                                    <i class="fa fa-fw fa-caret-right" role="img" aria-label="Next Order List" title="Next Order List"></i>
+                                    <i class="oi oi-fw" data-icon="arrow_right" role="img" aria-label="Next Order List" title="Next Order List"></i>
                                 </button>
                             </div>
                         </div>
@@ -83,7 +83,7 @@
                                             </td>
                                             <td class="text-end delete-column" name="delete-column">
                                                 <button t-if="!this.shouldHideDeleteButton(order) and this.pos.cashier._role !== 'minimal'" t-on-click.stop="() => this.onDeleteOrder(order)" class="btn btn-link btn-lg text-danger">
-                                                    <i class="fa fa-trash" aria-hidden="true"/>
+                                                    <i class="oi oi-filled" data-icon="delete" aria-hidden="true"/>
                                                 </button>
                                                 <div t-if="this.state.filter == 'TIPPING'" class="col end narrow p-2" name="tip">
                                                     <div t-if="this.ui.isSmall">Tip</div>
@@ -122,7 +122,7 @@
                                     <div class="mx-2" name="delete-column">
                                         <div t-if="!this.shouldHideDeleteButton(order) and this.pos.cashier._role !== 'minimal'" class="d-flex align-items-center justify-content-center h-100" role="button" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
                                             <div class="btn btn-danger btn-lg">
-                                                <i class="fa fa-trash" aria-hidden="true"/>
+                                                <i class="oi oi-filled" data-icon="delete" aria-hidden="true"/>
                                             </div>
                                         </div>
                                         <div t-if="this.state.filter == 'TIPPING'" class="col end narrow p-2" name="tip">
@@ -135,7 +135,8 @@
                         </t>
                         <div t-else="" class="d-flex h-100 flex-column align-items-center justify-content-center">
                             <CenteredIcon
-                                icon="this.pos.data.network.loading ? 'fa-circle-o-notch fa-spin' : 'fa-shopping-cart fa-4x'"
+                                icon="this.pos.data.network.loading ? 'autorenew' : 'shopping_cart'"
+                                icon_class="this.pos.data.network.loading ? 'oi-spin' : 'oi-4x'"
                                 text="this.pos.data.network.loading ? 'Loading...' : 'No orders found'"
                                 class="'w-100'"/>
                             <button class="btn btn-secondary" t-on-click="this.onClickNewOrder">New Order</button>
@@ -178,13 +179,13 @@
                             <t t-if="this.isOrderSynced">
                                 <div class="control-buttons d-flex gap-2 pb-2">
                                     <button class="edit-order-payment control-button btn btn-secondary btn-lg lh-lg flex-grow-1 flex-shrink-1" t-on-click="() => this.pos.showOrderDetails(_selectedSyncedOrder)">
-                                        <i class="fa fa-pencil-square-o me-1" /> Details
+                                        <i class="oi me-1" data-icon="edit_square" /> Details
                                     </button>
                                     <InvoiceButton
                                         onInvoiceOrder.bind="this.onInvoiceOrder"
                                         order="_selectedSyncedOrder" />
                                     <button class="control-button btn btn-secondary btn-lg lh-lg flex-grow-1 flex-shrink-1" t-on-click="() => this.doPrint.call(_selectedSyncedOrder)">
-                                        <i t-attf-class="fa {{this.doPrint.status === 'loading' ? 'fa-fw fa-spin fa-circle-o-notch' : 'fa-print'}} me-1" />Print Receipt
+                                        <i class="oi me-1" t-att-class="{'oi-fw oi-spin': this.doPrint.status === 'loading'}" t-attf-data-icon="{{this.doPrint.status === 'loading' ? 'autorenew' : 'print'}}" />Print Receipt
                                     </button>
                                 </div>
                                 <div class="subpads d-flex flex-column">
@@ -202,7 +203,7 @@
                                 <button class="button btn btn-secondary btn-lg d-flex flex-row align-items-center justify-content-center"
                                     t-on-click="() => this.onClickReprintAll(_selectedSyncedOrder)"
                                     t-if="this.pos.ticketPrinter.hasPreparationPrinters and _selectedSyncedOrder.uiState.lastPrints.length">
-                                    <i class="fa fa-cutlery" aria-hidden="true"/>
+                                    <i class="oi" data-icon="restaurant" aria-hidden="true"/>
                                 </button>
                                 <button class="button validation load-order-button w-100 btn btn-lg btn-primary py-3"
                                     t-att-disabled="!_selectedSyncedOrder"
@@ -214,7 +215,7 @@
                     </t>
                     <t t-else="">
                         <BarcodeVideoScanner t-if="this.pos.scanning" onError.bind="()=>{}" onResult.bind="this.onClickScanOrder" facingMode="'environment'"/>
-                        <CenteredIcon t-if="!this.pos.scanning" icon="'fa-shopping-cart fa-4x'" text.translate="Select an order or scan QR code" class="'bg-100 h-100 rounded'"/>
+                        <CenteredIcon t-if="!this.pos.scanning" icon="'shopping_cart'" icon_class="'oi-4x'" text.translate="Select an order or scan QR code" class="'bg-100 h-100 rounded'"/>
                         <BackButton t-if="this.ui.isSmall" onClick="() => this.pos.onClickBackButton()"/>
                     </t>
                 </div>
diff --git a/addons/point_of_sale/static/src/app/screens/tip_screen/tip_screen.xml b/addons/point_of_sale/static/src/app/screens/tip_screen/tip_screen.xml
index 956c3bdc1ccd36..be47aa15f21dd8 100644
--- a/addons/point_of_sale/static/src/app/screens/tip_screen/tip_screen.xml
+++ b/addons/point_of_sale/static/src/app/screens/tip_screen/tip_screen.xml
@@ -7,11 +7,11 @@
             <div class="screen-content d-flex flex-column h-100">
                 <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
                     <button class="button btn btn-lg btn-outline-primary" t-on-click="this.goPreviousScreen">
-                        <i class="fa fa-angle-double-left me-2"/>
+                        <i class="oi me-2" data-icon="keyboard_double_arrow_left"/>
                         <span>Back</span>
                     </button>
                     <button class="button btn btn-lg btn-outline-primary" t-if="this.pos.config.default_receipt_printer_id" t-on-click="this.printTipReceipt">
-                        <i class="fa fa-print"></i>
+                        <i class="oi" data-icon="print"></i>
                         <span> </span>
                         <span>Reprint receipts</span>
                     </button>
@@ -19,7 +19,7 @@
                         <h2 class="mb-0">Add a tip</h2>
                     </div>
                     <div class="button highlight next btn btn-lg btn-primary" t-on-click="this.validateTip">
-                        Settle <i class="fa fa-angle-double-right"></i>
+                        Settle <i class="oi" data-icon="keyboard_double_arrow_right"></i>
                     </div>
                 </div>
                 <div class="tip-options">
diff --git a/addons/point_of_sale/static/src/app/utils/debug/debug_widget.xml b/addons/point_of_sale/static/src/app/utils/debug/debug_widget.xml
index 2e96bc20585568..8c7f7acea8009a 100644
--- a/addons/point_of_sale/static/src/app/utils/debug/debug_widget.xml
+++ b/addons/point_of_sale/static/src/app/utils/debug/debug_widget.xml
@@ -6,7 +6,7 @@
             t-on-click="this.toggleWidget"
             data-tooltip="Open debug widget"
             data-tooltip-delay="0">
-            <i class="fa fa-bug" aria-hidden="true" />
+            <i class="oi" data-icon="bug_report" aria-hidden="true" />
         </div>
         <div class="debug-widget position-absolute bottom-0 end-0 bg-100 shadow-lg p-2 d-flex flex-column gap-1 m-2"
             t-attf-class="{{ this.state.isOpen ? '' : 'd-none' }}">
@@ -27,88 +27,88 @@
                     />
                     <div class="d-flex align-items-center gap-1 ms-1">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.barcodeScan">
-                            <i class="fa fa-barcode" aria-hidden="true"/> Scan
+                            <i class="oi" data-icon="barcode" aria-hidden="true"/> Scan
                         </button>
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.barcodeScanEAN">
-                            <i class="fa fa-barcode" aria-hidden="true"/> EAN-13
+                            <i class="oi" data-icon="barcode" aria-hidden="true"/> EAN-13
                         </button>
                     </div>
                 </div>
                 <div class="d-flex align-items-center gap-1 w-100 flex-wrap">
                     <div data-tooltip="Close debug widget" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.toggleWidget">
-                            <i class="fa fa-times" aria-hidden="true" /> Close
+                            <i class="oi" data-icon="close" aria-hidden="true" /> Close
                         </button>
                     </div>
                     <div data-tooltip="Disable debug mode" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.disableDebugMode">
-                            <i class="fa fa-sign-out" aria-hidden="true" /> Disable
+                            <i class="oi" data-icon="logout" aria-hidden="true" /> Disable
                         </button>
                     </div>
                     <div data-tooltip="Refresh customer display" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.refreshDisplay">
-                            <i class="fa fa-refresh" aria-hidden="true" /> Refresh
+                            <i class="oi" data-icon="refresh" aria-hidden="true" /> Refresh
                         </button>
                     </div>
                     <div data-tooltip="Export PoS data" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="() => this.exportData()">
-                            <i class="fa fa-download" aria-hidden="true" /> Export data
+                            <i class="oi" data-icon="download" aria-hidden="true" /> Export data
                         </button>
                     </div>
                     <div data-tooltip="Import orders" data-tooltip-delay="0">
                         <button t-custom-ref="import-order-input" class="btn btn-danger btn-sm text-nowrap">
-                            <i class="fa fa-upload" aria-hidden="true" /> Import data
+                            <i class="oi" data-icon="upload" aria-hidden="true" /> Import data
                         </button>
                         <input t-on-change="this.importData" type="file" class="d-none" id="import-order-input" />
                     </div>
                     <div data-tooltip="Delete paid orders" data-tooltip-delay="0">
                         <button class="btn btn-danger btn-sm text-nowrap" t-on-click="() => this.deleteOrders({ paid: true })">
-                            <i class="fa fa-trash" aria-hidden="true" /> Paid
+                            <i class="oi oi-filled" data-icon="delete" aria-hidden="true" /> Paid
                         </button>
                     </div>
                     <div data-tooltip="Delete unpaid orders" data-tooltip-delay="0">
                         <button class="btn btn-danger btn-sm text-nowrap" t-on-click="() => this.deleteOrders({ paid: false })">
-                            <i class="fa fa-trash" aria-hidden="true" /> Unpaid
+                            <i class="oi oi-filled" data-icon="delete" aria-hidden="true" /> Unpaid
                         </button>
                     </div>
                     <div data-tooltip="Delete all indexed DB" data-tooltip-delay="0">
                         <button class="btn btn-danger btn-sm text-nowrap" t-on-click="this.deleteAllIndexedDB">
-                            <i class="fa fa-trash" aria-hidden="true" /> Delete all indexed DB
+                            <i class="oi oi-filled" data-icon="delete" aria-hidden="true" /> Delete all indexed DB
                         </button>
                     </div>
                     <div data-tooltip="Download logs" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.downloadLogs">
-                            <i class="fa fa-download" aria-hidden="true" /> Download Logs
+                            <i class="oi" data-icon="download" aria-hidden="true" /> Download Logs
                         </button>
                     </div>
                     <div data-tooltip="Print cash receipt" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.openCashBox">
-                            <i class="fa fa-money" aria-hidden="true" /> Open cashbox
+                            <i class="oi" data-icon="payments" aria-hidden="true" /> Open cashbox
                         </button>
                     </div>
                     <div data-tooltip="Print cash move receipt" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.cashInOutPrint">
-                            <i class="fa fa-print" aria-hidden="true" /> Cash Receipt
+                            <i class="oi" data-icon="print" aria-hidden="true" /> Cash Receipt
                         </button>
                     </div>
                     <div data-tooltip="Print order receipt" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.randomOrderPrint">
-                            <i class="fa fa-print" aria-hidden="true" /> Order Receipt
+                            <i class="oi" data-icon="print" aria-hidden="true" /> Order Receipt
                         </button>
                     </div>
                     <div data-tooltip="Print tip receipt" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.printTipReceipt">
-                            <i class="fa fa-print" aria-hidden="true" /> Tip Receipt
+                            <i class="oi" data-icon="print" aria-hidden="true" /> Tip Receipt
                         </button>
                     </div>
                     <div data-tooltip="Print details receipt" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.printSaleDetails">
-                            <i class="fa fa-print" aria-hidden="true" /> Details Receipt
+                            <i class="oi" data-icon="print" aria-hidden="true" /> Details Receipt
                         </button>
                     </div>
                     <div data-tooltip="Print changes receipt" data-tooltip-delay="0">
                         <button class="btn btn-secondary btn-sm text-nowrap" t-on-click="this.printOrderChanges">
-                            <i class="fa fa-print" aria-hidden="true" /> Changes Receipt
+                            <i class="oi" data-icon="print" aria-hidden="true" /> Changes Receipt
                         </button>
                     </div>
                 </div>
diff --git a/addons/point_of_sale/static/src/css/customer_facing_display.css b/addons/point_of_sale/static/src/css/customer_facing_display.css
index adf8287cc9991d..8a2d0847806c20 100644
--- a/addons/point_of_sale/static/src/css/customer_facing_display.css
+++ b/addons/point_of_sale/static/src/css/customer_facing_display.css
@@ -150,7 +150,7 @@ body .pos-customer_facing_display .pos-payment_info {
     padding: 0;
 }
 
-.pos-customer_facing_display .pos_orderlines_list table td .product_details i.fa{
+.pos-customer_facing_display .pos_orderlines_list table td .product_details i.oi {
     margin-right: 0.5rem;
     color: gray;
 }
@@ -175,7 +175,7 @@ body .pos-customer_facing_display .pos-payment_info {
     margin: auto;
 }
 
-.pos-customer_facing_display .order-empty .fa {
+.pos-customer_facing_display .order-empty .oi {
     font-size: min(max(8vw, 2.3rem), 4.3rem);
 }
 
diff --git a/addons/point_of_sale/static/src/customer_display/customer_display.xml b/addons/point_of_sale/static/src/customer_display/customer_display.xml
index 03651ef702bc30..5dbbe0aba0980f 100644
--- a/addons/point_of_sale/static/src/customer_display/customer_display.xml
+++ b/addons/point_of_sale/static/src/customer_display/customer_display.xml
@@ -54,7 +54,7 @@
                                         <t t-out="line.price_without_discount"/> With a <em><t t-out="line.discount" />% </em> discount
                                     </li>
                                     <li t-if="line.customerNote" class="customer-note w-100 p-2 mt-2 rounded text-break text-bg-warning bg-opacity-25">
-                                        <i class="fa fa-sticky-note me-1" role="img" aria-label="Customer Note" title="Customer Note"/>
+                                        <i class="oi oi-filled me-1" data-icon="sticky_note_2" role="img" aria-label="Customer Note" title="Customer Note"/>
                                         <t t-out="line.customerNote" />
                                     </li>
                                     <div class="internal-note-container d-flex gap-2 p-2">
@@ -71,7 +71,7 @@
                             t-attf-class="{{ this.props.screenName == 'FeedbackScreen' ? 'mt-1 bg-opacity-75 p-0' : 'customer-note w-100 p-2 mt-2 rounded text-break text-bg-warning bg-opacity-25 mt-0'}}">
                             <div class="row flex-wrap w-100 m-0"> <!-- Add w-100 and remove margins -->
                                 <div class="col-auto px-1">
-                                    <i class="fa fa-sticky-note me-1 fa-lg" role="img"
+                                    <i class="oi oi-filled oi-lg me-1" data-icon="sticky_note_2" role="img"
                                         aria-label="Customer Note" title="Customer Note"/>
                                 </div>
                                 <div class="col ps-0">
diff --git a/addons/point_of_sale/static/tests/generic_components/mount_generic_components.test.js b/addons/point_of_sale/static/tests/generic_components/mount_generic_components.test.js
index a187614dfae389..32cc1b03ed70d8 100644
--- a/addons/point_of_sale/static/tests/generic_components/mount_generic_components.test.js
+++ b/addons/point_of_sale/static/tests/generic_components/mount_generic_components.test.js
@@ -20,7 +20,7 @@ test("test that generic components can be mounted; the goal is to ensure that th
         static template = xml`
             <div class="test-container">
                 <OdooLogo />
-                <CenteredIcon icon="'fa-smile'"/>
+                <CenteredIcon icon="'sentiment_satisfied'"/>
                 <Input tModel="[this.state, 'number']"/>
                 <NumericInput tModel="[this.state, 'number']" />
             </div>
diff --git a/addons/point_of_sale/static/tests/pos/tours/product_screen_tour.js b/addons/point_of_sale/static/tests/pos/tours/product_screen_tour.js
index 4171f50ef993ad..84544f3882474f 100644
--- a/addons/point_of_sale/static/tests/pos/tours/product_screen_tour.js
+++ b/addons/point_of_sale/static/tests/pos/tours/product_screen_tour.js
@@ -574,7 +574,7 @@ registry.category("web_tour.tours").add("PosCustomerAllFieldsDisplayed", {
             {
                 isActive: ["mobile"],
                 content: `Click search field`,
-                trigger: `.fa-search.undefined`,
+                trigger: `[data-icon="search"].undefined`,
                 run: `click`,
             },
             {
@@ -794,7 +794,7 @@ registry.category("web_tour.tours").add("AddMultipleSerialsAtOnce", {
             ProductScreen.clickDisplayedProduct("Product A"),
             [
                 {
-                    trigger: ".fa-trash-o",
+                    trigger: "[data-icon='delete']",
                     run: "click",
                 },
             ],
@@ -1060,7 +1060,7 @@ registry.category("web_tour.tours").add("test_archived_product_removed_and_order
             },
             BackendUtils.openProductForm("A Test Product"),
             {
-                trigger: `.fa-cog`,
+                trigger: `[data-icon="settings"]`,
                 run: "click",
             },
             {
diff --git a/addons/point_of_sale/static/tests/pos/tours/utils/chrome_util.js b/addons/point_of_sale/static/tests/pos/tours/utils/chrome_util.js
index a0f35ace32e403..824acb20a17345 100644
--- a/addons/point_of_sale/static/tests/pos/tours/utils/chrome_util.js
+++ b/addons/point_of_sale/static/tests/pos/tours/utils/chrome_util.js
@@ -10,7 +10,7 @@ export function confirmPopup() {
 export function clickMenuButton() {
     return {
         content: "Click on the menu button",
-        trigger: ".pos-rightheader button:has(.fa-bars)",
+        trigger: ".pos-rightheader button:has([data-icon='menu'])",
         run: "click",
     };
 }
@@ -25,7 +25,7 @@ export function clickMenuOption(name, options) {
 export function waitForMenuButtons() {
     return {
         content: "Wait for the menu buttons to be available",
-        trigger: ".pos-rightheader button:has(.fa-bars)",
+        trigger: ".pos-rightheader button:has([data-icon='menu'])",
     };
 }
 export function waitForMenuOptionsToOpen() {
@@ -165,7 +165,7 @@ function _hasFloatingOrder(name, yes, click) {
         },
         {
             isActive: ["mobile"],
-            trigger: ".pos-leftheader button.fa-caret-down",
+            trigger: ".pos-leftheader button[data-icon='arrow_drop_down']",
             run: "click",
         },
         {
@@ -177,7 +177,7 @@ function _hasFloatingOrder(name, yes, click) {
         },
         {
             isActive: ["mobile"],
-            trigger: ".oi-arrow-left",
+            trigger: "[data-icon='west']",
             run: "click",
         },
     ];
@@ -207,7 +207,7 @@ export function selectPresetTimingSlotHour({ title, hour } = {}) {
         },
         {
             content: `Wait the slot hour ${hour} is set and loading is done (to avoid currency error)`,
-            trigger: `body:not(:has(.modal)):not(:has(.oe_status .fa-spin)) .pos-leftheader .preset-time-btn:contains(${hour})`,
+            trigger: `body:not(:has(.modal)):not(:has(.oe_status .oi-spin)) .pos-leftheader .preset-time-btn:contains(${hour})`,
         },
     ];
 }
@@ -247,12 +247,14 @@ export function waitRequest() {
             async run({ waitFor }) {
                 let isLoading = false;
                 try {
-                    isLoading = await waitFor("body:has(.fa-circle-o-notch)", { timeout: 2000 });
+                    isLoading = await waitFor("body:has([data-icon='autorenew'])", {
+                        timeout: 2000,
+                    });
                 } catch {
-                    /* fa-circle-o-notch will certainly never appears :'( */
+                    /* autorenew icon will certainly never appears :'( */
                 }
                 if (isLoading) {
-                    await waitFor("body:not(:has(.fa-circle-o-notch))", { timeout: 10000 });
+                    await waitFor("body:not(:has([data-icon='autorenew']))", { timeout: 10000 });
                 }
             },
         },
@@ -284,14 +286,14 @@ export function checkButtonDisabled(text) {
 export function isSynced() {
     return {
         content: "Check if the request is proceeded",
-        trigger: negate(".fa-spin", ".status-buttons"),
+        trigger: negate(".oi-spin", ".status-buttons"),
     };
 }
 
 export function clickOnScanButton() {
     return {
         content: "Click the Scan button located in the top header.",
-        trigger: ".pos-topheader .status-buttons .fa-barcode",
+        trigger: ".pos-topheader .status-buttons [data-icon='barcode']",
         run: "click",
     };
 }
@@ -299,7 +301,7 @@ export function clickOnScanButton() {
 export function ClickOnCustomerDisplayButton() {
     return {
         content: "Click on the customer display button inside the burger menu",
-        trigger: "span i.fa-desktop",
+        trigger: "span i[data-icon='desktop_windows']",
         run: "click",
     };
 }
diff --git a/addons/point_of_sale/static/tests/pos/tours/utils/feedback_screen_util.js b/addons/point_of_sale/static/tests/pos/tours/utils/feedback_screen_util.js
index d9f43add49f8bd..e7eb8d9c02a946 100644
--- a/addons/point_of_sale/static/tests/pos/tours/utils/feedback_screen_util.js
+++ b/addons/point_of_sale/static/tests/pos/tours/utils/feedback_screen_util.js
@@ -401,7 +401,7 @@ export function clickEmailButton() {
     return [
         {
             content: "send email",
-            trigger: ".modal-body .fa-paper-plane",
+            trigger: ".modal-body [data-icon='send']",
             run: "click",
         },
     ];
diff --git a/addons/point_of_sale/static/tests/pos/tours/utils/partner_list_util.js b/addons/point_of_sale/static/tests/pos/tours/utils/partner_list_util.js
index daeb772d8a828e..07feb6432d3974 100644
--- a/addons/point_of_sale/static/tests/pos/tours/utils/partner_list_util.js
+++ b/addons/point_of_sale/static/tests/pos/tours/utils/partner_list_util.js
@@ -121,7 +121,7 @@ export function searchCustomer(val) {
         {
             isActive: ["mobile"],
             content: `Click search field`,
-            trigger: `.modal-dialog .fa-search.undefined`,
+            trigger: `.modal-dialog [data-icon="search"].undefined`,
             run: `click`,
         },
         {
diff --git a/addons/point_of_sale/static/tests/pos/tours/utils/product_screen_util.js b/addons/point_of_sale/static/tests/pos/tours/utils/product_screen_util.js
index 4b2ea57c53b0db..4539da555465f7 100644
--- a/addons/point_of_sale/static/tests/pos/tours/utils/product_screen_util.js
+++ b/addons/point_of_sale/static/tests/pos/tours/utils/product_screen_util.js
@@ -53,7 +53,7 @@ export function selectFloatingOrder(index) {
     return [
         {
             isActive: ["mobile"],
-            trigger: ".fa-caret-down",
+            trigger: "[data-icon='arrow_drop_down']",
             run: "click",
         },
         {
@@ -80,7 +80,7 @@ export function checkFloatingOrderCount(expectedCount) {
     return [
         {
             isActive: ["mobile"],
-            trigger: ".fa-caret-down",
+            trigger: "[data-icon='arrow_drop_down']",
             run: "click",
         },
         {
@@ -95,7 +95,7 @@ export function checkFloatingOrderCount(expectedCount) {
         },
         {
             isActive: ["mobile"],
-            trigger: ".modal-header .oi-arrow-left",
+            trigger: ".modal-header [data-icon='west']",
             run: "click",
         },
     ];
@@ -696,7 +696,7 @@ export function searchProduct(string) {
         {
             isActive: ["mobile"],
             content: `Click search field`,
-            trigger: `.fa-search`,
+            trigger: `[data-icon="search"]`,
             run: `click`,
         },
         {
@@ -1158,7 +1158,7 @@ export function saveOrder() {
         clickReview(),
         {
             content: "save order",
-            trigger: ".pads .fa-upload",
+            trigger: ".pads [data-icon='upload']",
             run: "click",
         },
     ];
diff --git a/addons/point_of_sale/static/tests/unit/components/payment_lines.test.js b/addons/point_of_sale/static/tests/unit/components/payment_lines.test.js
index 109946534aa8bd..dfa57ae4328e03 100644
--- a/addons/point_of_sale/static/tests/unit/components/payment_lines.test.js
+++ b/addons/point_of_sale/static/tests/unit/components/payment_lines.test.js
@@ -100,7 +100,8 @@ test("getPaymentActionState", async () => {
     const stateWaitingCardRefund = comp.getPaymentActionState(paymentline);
     expect(normalizeActionState(stateWaitingCardRefund)).toEqual({
         id: "waiting_refund",
-        icon: "fa fa-circle-o-notch fa-spin",
+        icon: "autorenew",
+        icon_class: "oi-spin",
         title: "Refund in process",
         actions: [
             {
@@ -125,7 +126,8 @@ test("getPaymentActionState", async () => {
     const stateWaitingCardNoRefund = comp.getPaymentActionState(paymentline);
     expect(normalizeActionState(stateWaitingCardNoRefund)).toEqual({
         id: "waiting_card",
-        icon: "fa fa-circle-o-notch fa-spin",
+        icon: "autorenew",
+        icon_class: "oi-spin",
         title: "Waiting for card",
         actions: [
             {
@@ -150,7 +152,8 @@ test("getPaymentActionState", async () => {
     const stateWaitingScan = comp.getPaymentActionState(paymentline);
     expect(normalizeActionState(stateWaitingScan)).toEqual({
         id: "waiting_scan",
-        icon: "fa fa-circle-o-notch fa-spin",
+        icon: "autorenew",
+        icon_class: "oi-spin",
         title: "Waiting for the customer to scan the QR Code",
         actions: [
             {
@@ -175,7 +178,8 @@ test("getPaymentActionState", async () => {
     const stateWaiting = comp.getPaymentActionState(paymentline);
     expect(normalizeActionState(stateWaiting)).toEqual({
         id: "waiting",
-        icon: "fa fa-circle-o-notch fa-spin",
+        icon: "autorenew",
+        icon_class: "oi-spin",
         title: "Request sent",
         actions: [
             {
@@ -200,7 +204,8 @@ test("getPaymentActionState", async () => {
     const stateWaitingCancel = comp.getPaymentActionState(paymentline);
     expect(normalizeActionState(stateWaitingCancel)).toEqual({
         id: "waiting_cancel",
-        icon: "fa fa-circle-o-notch fa-spin",
+        icon: "autorenew",
+        icon_class: "oi-spin",
         title: "Request sent",
         actions: [
             {
@@ -225,7 +230,8 @@ test("getPaymentActionState", async () => {
     const stateWaitingCapture = comp.getPaymentActionState(paymentline);
     expect(normalizeActionState(stateWaitingCapture)).toEqual({
         id: "waiting_capture",
-        icon: "fa fa-circle-o-notch fa-spin",
+        icon: "autorenew",
+        icon_class: "oi-spin",
         title: "Request sent",
         actions: [
             {
@@ -408,7 +414,7 @@ describe("spinner or delete button", () => {
                 isRefundOrder: false,
             },
         });
-        expect(".paymentline i.fa-circle-o-notch.fa-spin").toHaveCount(0);
+        expect(".paymentline i.oi-spin[data-icon='autorenew']").toHaveCount(0);
         expect(".paymentline button.delete-button").toHaveCount(1);
     });
 
@@ -433,7 +439,7 @@ describe("spinner or delete button", () => {
                 isRefundOrder: false,
             },
         });
-        expect(".paymentline i.fa-circle-o-notch.fa-spin").toHaveCount(0);
+        expect(".paymentline i.oi-spin[data-icon='autorenew']").toHaveCount(0);
         expect(".paymentline button.delete-button").toHaveCount(1);
     });
 
@@ -458,7 +464,7 @@ describe("spinner or delete button", () => {
                 isRefundOrder: false,
             },
         });
-        expect(".paymentline i.fa-circle-o-notch.fa-spin").toHaveCount(1);
+        expect(".paymentline i.oi-spin[data-icon='autorenew']").toHaveCount(1);
         expect(".paymentline button.delete-button").toHaveCount(0);
     });
 
@@ -483,7 +489,7 @@ describe("spinner or delete button", () => {
                 isRefundOrder: false,
             },
         });
-        expect(".paymentline i.fa-circle-o-notch.fa-spin").toHaveCount(0);
+        expect(".paymentline i.oi-spin[data-icon='autorenew']").toHaveCount(0);
         expect(".paymentline button.delete-button").toHaveCount(1);
     });
 
@@ -509,7 +515,7 @@ describe("spinner or delete button", () => {
                 isRefundOrder: false,
             },
         });
-        expect(".paymentline i.fa-circle-o-notch.fa-spin").toHaveCount(0);
+        expect(".paymentline i.oi-spin[data-icon='autorenew']").toHaveCount(0);
         expect(".paymentline button.delete-button").toHaveCount(1);
     });
 
@@ -535,7 +541,7 @@ describe("spinner or delete button", () => {
                 isRefundOrder: false,
             },
         });
-        expect(".paymentline i.fa-circle-o-notch.fa-spin").toHaveCount(0);
+        expect(".paymentline i.oi-spin[data-icon='autorenew']").toHaveCount(0);
         expect(".paymentline button.delete-button").toHaveCount(0);
     });
 });
diff --git a/addons/point_of_sale/views/account_move_views.xml b/addons/point_of_sale/views/account_move_views.xml
index 2dee525d3cb314..4750b8e45961b0 100644
--- a/addons/point_of_sale/views/account_move_views.xml
+++ b/addons/point_of_sale/views/account_move_views.xml
@@ -9,7 +9,7 @@
                 <button class="oe_stat_button"
                         name="action_view_source_pos_orders"
                         type="object"
-                        icon="fa-pencil-square-o"
+                        icon="edit_square"
                         invisible="pos_order_count == 0 or move_type not in ('out_invoice', 'out_refund')">
                     <field string="POS Orders" name="pos_order_count" widget="statinfo"/>
                 </button>
diff --git a/addons/point_of_sale/views/pos_order_view.xml b/addons/point_of_sale/views/pos_order_view.xml
index 9c6584b3e9635c..cd922f7666a271 100644
--- a/addons/point_of_sale/views/pos_order_view.xml
+++ b/addons/point_of_sale/views/pos_order_view.xml
@@ -22,7 +22,7 @@
                     <button name="action_stock_picking"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-truck"
+                        icon="local_shipping"
                         invisible="picking_count == 0">
                         <field name="picking_count" widget="statinfo" string="Pickings" invisible="failed_pickings"/>
                         <field name="picking_count" widget="statinfo" string="Pickings" class="text-danger" invisible="not failed_pickings"/>
@@ -31,20 +31,20 @@
                         string="Invoice"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-pencil-square-o"
+                        icon="edit_square"
                         invisible="not account_move">
                     </button>
                     <button name="action_view_refund_orders"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-undo"
+                        icon="undo"
                         invisible="refund_orders_count == 0">
                         <field name="refund_orders_count" widget="statinfo" string="Refunds" />
                     </button>
                     <button name="action_view_refunded_order"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-shopping-cart "
+                        icon="shopping_cart"
                         invisible="not refunded_order_id">
                         <field name="refunded_order_id" widget="statinfo" string="Refunded Orders" />
                     </button>
@@ -200,7 +200,7 @@
                                     <label for="email"/>
                                     <div class="o_row">
                                         <field name="email"/>
-                                        <button name="action_send_mail" icon="fa-envelope fa-lg" type="object" class="btn-link" title="email" invisible="not email"/>
+                                        <button name="action_send_mail" icon="mail" icon_class="oi-lg oi-filled" type="object" class="btn-link" title="email" invisible="not email"/>
                                     </div>
                                     <label for="mobile"/>
                                     <div class="o_row">
diff --git a/addons/point_of_sale/views/pos_preset_view.xml b/addons/point_of_sale/views/pos_preset_view.xml
index 6d923ef002ce1c..322dde5c03391a 100644
--- a/addons/point_of_sale/views/pos_preset_view.xml
+++ b/addons/point_of_sale/views/pos_preset_view.xml
@@ -10,14 +10,14 @@
                         <button name="action_open_linked_orders"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-shopping-cart"
+                            icon="shopping_cart"
                             invisible="count_linked_orders == 0">
                             <field string="Order(s)" name="count_linked_orders" widget="statinfo"/>
                         </button>
                         <button name="action_open_linked_config"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-share-alt"
+                            icon="family_history"
                             invisible="count_linked_config == 0">
                             <field string="PoS Config" name="count_linked_config" widget="statinfo"/>
                         </button>
diff --git a/addons/point_of_sale/views/pos_session_view.xml b/addons/point_of_sale/views/pos_session_view.xml
index b708da464648af..ace5a4f150d54a 100644
--- a/addons/point_of_sale/views/pos_session_view.xml
+++ b/addons/point_of_sale/views/pos_session_view.xml
@@ -18,11 +18,11 @@
                     <div class="oe_button_box" name="button_box">
                         <button name="action_view_order"
                             class="oe_stat_button"
-                            icon="fa-shopping-basket"
+                            icon="shopping_basket"
                             type="object">
                             <field name="order_count" widget="statinfo" string="Orders"/>
                         </button>
-                        <button class="oe_stat_button" name="action_stock_picking" type="object" icon="fa-truck" invisible="picking_count == 0">
+                        <button class="oe_stat_button" name="action_stock_picking" type="object" icon="local_shipping" invisible="picking_count == 0">
                             <field name="picking_count" widget="statinfo" string="Pickings" invisible="failed_pickings"/>
                             <field name="picking_count" widget="statinfo" string="Pickings" class="text-danger" invisible="not failed_pickings"/>
                         </button>
@@ -30,7 +30,7 @@
                             name="action_show_payments_list"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-dollar"
+                            icon="attach_money"
                             >
                             <field name="total_payments_amount" widget="statinfo" string="Payments"/>
                         </button>
@@ -38,7 +38,7 @@
                             name="show_journal_items"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-bars"
+                            icon="menu"
                             groups="account.group_account_readonly"
                             >
                             <div class="o_stat_info">
@@ -49,7 +49,7 @@
                             name="show_cash_register"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-bars"
+                            icon="menu"
                             invisible="not cash_control"
                             groups="account.group_account_readonly">
                             <div class="o_stat_info">
@@ -162,7 +162,7 @@
         <field name="summary">note</field>
         <field name="category">default</field>
         <field name="res_model">pos.session</field>
-        <field name="icon">fa-tasks</field>
+        <field name="icon">checklist</field>
         <field name="delay_count">0</field>
     </record>
 
diff --git a/addons/point_of_sale/views/pos_ticket_view.xml b/addons/point_of_sale/views/pos_ticket_view.xml
index 75ff7a371b28ef..8e17704b3b0b7c 100644
--- a/addons/point_of_sale/views/pos_ticket_view.xml
+++ b/addons/point_of_sale/views/pos_ticket_view.xml
@@ -60,7 +60,7 @@
                                         <t id="partner_vat" t-if="partner.vat">
                                             <t t-out="partner.vat" /><br />
                                         </t>
-                                        <t t-out="partner_address"/> <a role="button" t-att-href="address_url" class="btn btn-sm btn-link"><i class="fa fa-pencil"/> Edit</a>
+                                        <t t-out="partner_address"/> <a role="button" t-att-href="address_url" class="btn btn-sm btn-link"><i class="oi oi-filled" data-icon="edit"/> Edit</a>
                                     </div>
                                 </div>
                             </t>
diff --git a/addons/point_of_sale/views/res_config_settings_views.xml b/addons/point_of_sale/views/res_config_settings_views.xml
index b434629c1fd572..f83c3bb0f8e56d 100644
--- a/addons/point_of_sale/views/res_config_settings_views.xml
+++ b/addons/point_of_sale/views/res_config_settings_views.xml
@@ -66,7 +66,7 @@
                                                 domain="[('id', 'in', pos_available_preset_ids)]"/>
                                         </div>
                                         <div>
-                                            <button name="%(action_pos_preset_form)d" icon="oi-arrow-right" type="action" string="Configure Presets" class="btn-link"/>
+                                            <button name="%(action_pos_preset_form)d" icon="east" type="action" string="Configure Presets" class="btn-link"/>
                                         </div>
                                     </div>
                                 </setting>
@@ -81,7 +81,7 @@
                                         options="{'no_quick_create': True}"
                                         context="{'default_config_ids': [pos_config_id], 'form_view_ref': 'point_of_sale.action_pos_payment_method_form' }" />
                                     <div>
-                                        <button name="%(action_payment_methods_tree)d" icon="oi-arrow-right" type="action" string="Payment Methods" class="btn-link"/>
+                                        <button name="%(action_payment_methods_tree)d" icon="east" type="action" string="Payment Methods" class="btn-link"/>
                                     </div>
                                 </setting>
                                 <setting string="Automatically validate order" help="Automatically validates orders paid with a payment terminal.">
@@ -102,7 +102,7 @@
                                         </div>
                                     </div>
                                     <div class="mt8">
-                                        <button name="%(account.rounding_list_action)d" icon="oi-arrow-right"
+                                        <button name="%(account.rounding_list_action)d" icon="east"
                                                 type="action" string="Roundings" class="btn-link"
                                                 invisible="not group_cash_rounding"/>
                                     </div>
@@ -176,7 +176,7 @@
                                             <field name="pos_trusted_config_ids" widget="many2many_tags" options="{'no_create':'true'}" placeholder="Select PoS to start sharing orders"/>
                                         </div>
                                         <div>
-                                            <button name="%(point_of_sale.action_pos_config_tree)d" icon="oi-arrow-right" type="action" string="Point of Sales" class="btn-link"/>
+                                            <button name="%(point_of_sale.action_pos_config_tree)d" icon="east" type="action" string="Point of Sales" class="btn-link"/>
                                         </div>
                                     </div>
                                 </setting>
@@ -211,7 +211,7 @@
                                         <field name="pos_iface_available_categ_ids" widget="many2many_tags"/>
                                     </div>
                                     <div class="content-group mt16" invisible="not pos_limit_categories">
-                                        <button name="%(product_pos_category_action)d" icon="oi-arrow-right" type="action" string="PoS Product Categories" class="btn-link"/>
+                                        <button name="%(product_pos_category_action)d" icon="east" type="action" string="PoS Product Categories" class="btn-link"/>
                                     </div>
                                 </setting>
                                 <setting id="margin_and_cost" string="Show margins &amp; costs" help="Show margins &amp; costs on product information">
@@ -221,7 +221,7 @@
                             <block title="Accounting" id="pos_accounting_section">
                                 <setting id="default_sales_tax_setting" title="This tax is applied to any new product created in the catalog." documentation="/applications/finance/accounting/taxation/taxes/default_taxes.html">
                                     <label string="Default Sales Tax" for="sale_tax_id"/>
-                                    <i class="fa fa-info-circle me-1" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
+                                    <i class="oi me-1" data-icon="info" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
                                     <div class="text-muted">
                                         Default sales tax for products
                                     </div>
@@ -229,12 +229,12 @@
                                         <field name="sale_tax_id" colspan="4" nolabel="1" domain="[('type_tax_use', 'in', ('sale', 'all'))]"/>
                                     </div>
                                     <div class="mt8">
-                                        <button name="%(account.action_tax_form)d" icon="oi-arrow-right" type="action" string="Taxes" class="btn-link"/>
+                                        <button name="%(account.action_tax_form)d" icon="east" type="action" string="Taxes" class="btn-link"/>
                                     </div>
                                 </setting>
                                 <setting groups="account.group_account_readonly">
                                     <label string="Default POS Receivable Account" for="account_default_pos_receivable_account_id"/>
-                                    <i class="fa fa-info-circle me-1" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
+                                    <i class="oi me-1" data-icon="info" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
                                     <div class="text-muted">
                                         Intermediary account used for unidentified customers.
                                     </div>
@@ -255,7 +255,7 @@
                                             <field name="pos_fiscal_position_ids" widget="many2many_tags" options="{'no_create': True}"/>
                                         </div>
                                         <div>
-                                            <button name="%(account.action_account_fiscal_position_form)d" icon="oi-arrow-right" type="action" string="Fiscal Positions" class="btn-link"/>
+                                            <button name="%(account.action_account_fiscal_position_form)d" icon="east" type="action" string="Fiscal Positions" class="btn-link"/>
                                         </div>
                                     </div>
                                 </setting>
@@ -294,7 +294,7 @@
                                             <field name="pos_pricelist_id" domain="[('id', 'in', pos_allowed_pricelist_ids)]" options="{'no_create': True}"/>
                                         </div>
                                         <div class="mt8">
-                                            <button name="%(product.product_pricelist_action2)d" icon="oi-arrow-right" type="action" string="Pricelists" groups="product.group_product_pricelist" class="btn-link"/>
+                                            <button name="%(product.product_pricelist_action2)d" icon="east" type="action" string="Pricelists" groups="product.group_product_pricelist" class="btn-link"/>
                                         </div>
                                     </div>
                                 </setting>
@@ -304,7 +304,7 @@
                                 <setting id="product_prices" string="Product Prices" help="Product prices on receipts">
                                     <field name="pos_iface_tax_included" class="o_light_label" widget="radio"/>
                                     <div class="content-group">
-                                        <widget class="oe-link" name="documentation_link" path="/applications/finance/accounting/taxation/taxes/B2B_B2C.html" label="How to manage tax-included prices" icon="oi oi-fw oi-arrow-right"/>
+                                        <widget class="oe-link" name="documentation_link" path="/applications/finance/accounting/taxation/taxes/B2B_B2C.html" label="How to manage tax-included prices" icon_class="oi-fw" icon="east"/>
                                     </div>
                                 </setting>
                                 <setting id="manual_discount" help="Allow cashiers to set a discount per line" documentation="/applications/sales/point_of_sale/pricing/discounts.html">
@@ -412,42 +412,42 @@
                                 <setting id="adyen_payment_terminal_setting" title="The transactions are processed by Adyen. Set your Adyen credentials on the related payment method." string="Adyen" help="Accept payments with an Adyen payment terminal"
                                         documentation="/applications/sales/point_of_sale/payment_methods/terminals/adyen.html">
                                     <field name="module_pos_adyen"/>
-                                    <button name="open_payment_method_form" icon="oi-arrow-right" type="object" string="Payment method" class="btn-link"
+                                    <button name="open_payment_method_form" icon="east" type="object" string="Payment method" class="btn-link"
                                         context="{'selection': 'adyen', 'config_ids': [pos_config_id], 'provider_name': 'Adyen'}" invisible="not module_pos_adyen" />
                                 </setting>
                                 <setting id="stripe_payment_terminal_setting" title="The transactions are processed by Stripe. Set your Stripe credentials on the related payment method." string="Stripe" help="Accept payments with a Stripe payment terminal" documentation="/applications/sales/point_of_sale/payment_methods/terminals/stripe.html">
                                     <field name="module_pos_stripe"/>
-                                    <button name="open_payment_method_form" icon="oi-arrow-right" type="object" string="Payment method" class="btn-link"
+                                    <button name="open_payment_method_form" icon="east" type="object" string="Payment method" class="btn-link"
                                         context="{'selection': 'stripe', 'config_ids': [pos_config_id], 'provider_name': 'Stripe'}" invisible="not module_pos_stripe" />
                                 </setting>
                                 <setting title="The transactions are processed by Viva.com on terminal or tap on phone." string="Viva.com" help="Accept payments with Viva.com on a terminal or tap on phone" documentation="/applications/sales/point_of_sale/payment_methods/terminals/viva_com.html">
                                     <field name="module_pos_viva_com"/>
-                                    <button name="open_payment_method_form" icon="oi-arrow-right" type="object" string="Payment method" class="btn-link"
+                                    <button name="open_payment_method_form" icon="east" type="object" string="Payment method" class="btn-link"
                                         context="{'selection': 'viva_com', 'config_ids': [pos_config_id], 'provider_name': 'Viva.com'}" invisible="not module_pos_viva_com" />
                                 </setting>
                                 <setting id="pos_razorpay_setting" title="The transactions are processed by Razorpay. Set your Razorpay credentials on the related payment method." string="Razorpay" help="Accept payments with a Razorpay payment terminal" documentation="/applications/sales/point_of_sale/payment_methods/terminals/razorpay.html">
                                     <field name="module_pos_razorpay"/>
-                                    <button name="open_payment_method_form" icon="oi-arrow-right" type="object" string="Payment method" class="btn-link"
+                                    <button name="open_payment_method_form" icon="east" type="object" string="Payment method" class="btn-link"
                                         context="{'selection': 'razorpay', 'config_ids': [pos_config_id], 'provider_name': 'Razorpay'}" invisible="not module_pos_razorpay" />
                                 </setting>
                                 <setting title="The transactions are processed by Mercado Pago on terminal" string="Mercado Pago" help="Accept payments with Mercado Pago on a terminal" documentation="/applications/sales/point_of_sale/payment_methods/terminals/mercado_pago.html">
                                     <field name="module_pos_mercado_pago"/>
-                                    <button name="open_payment_method_form" icon="oi-arrow-right" type="object" string="Payment method" class="btn-link"
+                                    <button name="open_payment_method_form" icon="east" type="object" string="Payment method" class="btn-link"
                                         context="{'selection': 'mercado_pago', 'config_ids': [pos_config_id], 'provider_name': 'Mercado Pago'}" invisible="not module_pos_mercado_pago" />
                                 </setting>
                                 <setting title="The transactions are processed by Pine Labs on the terminal." string="Pine Labs" help="Accept payments with a Pine Labs payment terminal" documentation="/applications/sales/point_of_sale/payment_methods/terminals/pine_labs.html">
                                     <field name="module_pos_pine_labs"/>
-                                    <button name="open_payment_method_form" icon="oi-arrow-right" type="object" string="Payment method" class="btn-link"
+                                    <button name="open_payment_method_form" icon="east" type="object" string="Payment method" class="btn-link"
                                         context="{'selection': 'pine_labs', 'config_ids': [pos_config_id], 'provider_name': 'Pine Labs'}" invisible="not module_pos_pine_labs" />
                                 </setting>
                                 <setting title="The transactions are processed by QFPay on the terminal." string="QFPay" help="Accept payments with a QFPay payment terminal" documentation="/applications/sales/point_of_sale/payment_methods/terminals/qfpay.html">
                                     <field name="module_pos_qfpay"/>
-                                    <button name="open_payment_method_form" icon="oi-arrow-right" type="object" string="Payment method" class="btn-link"
+                                    <button name="open_payment_method_form" icon="east" type="object" string="Payment method" class="btn-link"
                                         context="{'selection': 'qfpay', 'config_ids': [pos_config_id], 'provider_name': 'QFPay'}" invisible="not module_pos_qfpay" />
                                 </setting>
                                 <setting title="The transactions are processed by DPO Pay on the terminal." string="DPO Pay" help="Accept payments with a DPO Pay payment terminal" documentation="/applications/sales/point_of_sale/payment_methods/terminals/dpo.html">
                                     <field name="module_pos_dpopay"/>
-                                    <button name="open_payment_method_form" icon="oi-arrow-right" type="object" string="Payment method" class="btn-link"
+                                    <button name="open_payment_method_form" icon="east" type="object" string="Payment method" class="btn-link"
                                         context="{'selection': 'dpopay', 'config_ids': [pos_config_id], 'provider_name': 'DPO Pay'}" invisible="not module_pos_dpopay" />
                                 </setting>
                             </block>
@@ -483,7 +483,7 @@
                                             <field name="pos_note_ids" widget="many2many_tags" readonly="pos_has_active_session" placeholder="All notes"/>
                                         </div>
                                         <div>
-                                            <button name="%(point_of_sale.action_pos_note_model)d" icon="oi-arrow-right" type="action" string="Notes" class="btn-link"/>
+                                            <button name="%(point_of_sale.action_pos_note_model)d" icon="east" type="action" string="Notes" class="btn-link"/>
                                         </div>
                                     </div>
                                 </setting>
@@ -503,13 +503,13 @@
                                             <div>
                                                 <button name="action_pos_printer_dialog"
                                                     context="{'default_pos_config_ids': [pos_config_id]}"
-                                                    icon="oi-arrow-right"
+                                                    icon="east"
                                                     type="object"
                                                     string="Add Printer"
                                                     class="btn-link"/>
                                             </div>
                                             <div>
-                                                <button name="%(point_of_sale.action_pos_printer_form)d" icon="oi-arrow-right" type="action" string="Manage Printers" class="btn-link"/>
+                                                <button name="%(point_of_sale.action_pos_printer_form)d" icon="east" type="action" string="Manage Printers" class="btn-link"/>
                                             </div>
                                         </div>
                                     </div>
@@ -539,7 +539,7 @@
                                 </setting>
                                 <setting id="barcode_scanner">
                                     <span class="o_form_label">Barcodes</span>
-                                    <i class="fa fa-info-circle me-1" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
+                                    <i class="oi me-1" data-icon="info" title="This setting is common to all PoS." pos-data-toggle="tooltip"/>
                                     <div class="text-muted">
                                         Use barcodes to scan products, customer cards, etc.
                                     </div>
diff --git a/addons/point_of_sale/views/res_partner_view.xml b/addons/point_of_sale/views/res_partner_view.xml
index 8979c909076b31..8f2dde42251ba5 100644
--- a/addons/point_of_sale/views/res_partner_view.xml
+++ b/addons/point_of_sale/views/res_partner_view.xml
@@ -11,7 +11,7 @@
                         groups="point_of_sale.group_pos_user"
                         context="{'default_partner_id': id}"
                         invisible="pos_order_count == 0"
-                        icon="fa-shopping-bag">
+                        icon="shopping_bag">
                         <field string="PoS Orders" name="pos_order_count" widget="statinfo"/>
                     </button>
                 </div>
@@ -41,7 +41,7 @@
                                 </h1>
                                 <label for="parent_id" class="d-md-none"/>
                                 <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-building" title="Company"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="business" title="Company"/>
                                     <field name="parent_id"
                                         widget="res_partner_many2one"
                                         placeholder="Company Employer"
@@ -50,12 +50,12 @@
                                 </div>
                                 <label for="email" class="d-md-none"/>
                                 <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-envelope" title="Email"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="mail" title="Email"/>
                                     <field name="email" widget="email" required="user_ids" placeholder="Email"/>
                                 </div>
                                 <label for="phone" class="d-md-none"/>
                                 <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-phone" title="Phone"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="phone" title="Phone"/>
                                     <field name="phone" widget="phone" placeholder="Phone"/>
                                 </div>
                             </group>
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 264018ea67458c..59f130ab762d99 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -76,7 +76,7 @@ ul.flex-column > li > a {
 
 // Link without text but an icon
 a, .btn-link {
-    &.fa:hover {
+    &.oi:hover {
         text-decoration: $o-theme-btn-icon-hover-decoration;
     }
 }
@@ -333,7 +333,7 @@ img, .media_iframe_video, .o_image {
             margin-bottom: 0.3em;
         }
 
-        .fa {
+        .oi {
             line-height: $line-height-base;
             color: $o-gray-500;
 
diff --git a/addons/portal/static/src/signature_form/signature_form.xml b/addons/portal/static/src/signature_form/signature_form.xml
index fb78a3129e139f..c971ac05537a61 100644
--- a/addons/portal/static/src/signature_form/signature_form.xml
+++ b/addons/portal/static/src/signature_form/signature_form.xml
@@ -22,7 +22,7 @@
                         </div>
                         <div class="text-end my-3">
                             <button type="submit" class="o_portal_sign_submit btn btn-primary" t-on-click.prevent="this.onClickSubmit" t-att-disabled="this.signature.isSignatureEmpty ? 'disabled' : ''">
-                                <i class="fa fa-check me-1"/>
+                                <i class="oi me-1" data-icon="check"/>
                                 <t t-out="this.sendLabel"/>
                             </button>
                         </div>
diff --git a/addons/portal/static/src/xml/portal_chatter.xml b/addons/portal/static/src/xml/portal_chatter.xml
index fa6fe5afcf4e74..7c0180a811f72a 100644
--- a/addons/portal/static/src/xml/portal_chatter.xml
+++ b/addons/portal/static/src/xml/portal_chatter.xml
@@ -33,7 +33,7 @@
                                     </div>
                                     <div class="d-flex flex-row align-self-end p-2">
                                         <div class="d-flex px-1">
-                                            <button class="o_portal_chatter_attachment_btn btn fa fa-paperclip border-0" type="button" title="Add attachment"/>
+                                            <button class="o_portal_chatter_attachment_btn btn oi border-0" data-icon="attach_file" type="button" title="Add attachment"/>
                                         </div>
                                         <button t-out="widget.options['send_button_label']" t-attf-data-action="/mail/message/post" class="o_portal_chatter_composer_btn btn btn-primary o-last rounded-3" type="submit"/>
                                     </div>
@@ -55,7 +55,7 @@
             <div t-foreach="attachments" t-as="attachment" t-key="attachment_index" class="bg-light p-2 rounded position-relative">
                 <div class="o_portal_chatter_attachment text-center" t-att-data-id="attachment.id">
                     <button t-if="showDelete and attachment.state == 'pending'" class="o_portal_chatter_attachment_delete btn btn-sm btn-outline-danger" title="Delete">
-                        <i class="fa fa-times"/>
+                        <i class="oi" data-icon="close"/>
                     </button>
                     <a t-attf-href="/web/content/#{attachment.id}?download=true&amp;#{attachment.access_token and 'access_token=' + attachment.access_token}" target="_blank" class="d-flex flex-row">
                         <div class='oe_attachment_embedded o_image' t-att-title="attachment.name" t-att-data-mimetype="attachment.mimetype"/>
@@ -77,7 +77,7 @@
             <t t-if="Object.keys(this.widget._pagerData).length > 0">
                 <ul class="pagination" t-if="this.widget._pagerData['pages'].length &gt; 1">
                     <li t-if="this.widget._pagerData['page'] != this.widget._pagerData['page_previous']" t-att-data-page="this.widget._pagerData['page_previous']" class="page-item o_portal_chatter_pager_btn">
-                        <a href="#" class="page-link"><i class="oi oi-chevron-left" role="img" aria-label="Previous" title="Previous"/></a>
+                        <a href="#" class="page-link"><i class="oi" data-icon="chevron_backward" role="img" aria-label="Previous" title="Previous"/></a>
                     </li>
                     <t t-foreach="this.widget._pagerData['pages']" t-as="page" t-key="page_index">
                         <li t-att-data-page="page" t-attf-class="page-item #{page == this.widget._pagerData['page'] ? 'o_portal_chatter_pager_btn active' : 'o_portal_chatter_pager_btn'}">
@@ -85,7 +85,7 @@
                         </li>
                     </t>
                     <li t-if="this.widget._pagerData['page'] != this.widget._pagerData['page_next']" t-att-data-page="this.widget._pagerData['page_next']" class="page-item o_portal_chatter_pager_btn">
-                        <a href="#" class="page-link"><i class="oi oi-chevron-right" role="img" aria-label="Next" title="Next"/></a>
+                        <a href="#" class="page-link"><i class="oi" data-icon="chevron_forward" role="img" aria-label="Next" title="Next"/></a>
                     </li>
                 </ul>
             </t>
diff --git a/addons/portal/views/address_templates.xml b/addons/portal/views/address_templates.xml
index 2a6a973d8ba4dc..272f306c020c13 100644
--- a/addons/portal/views/address_templates.xml
+++ b/addons/portal/views/address_templates.xml
@@ -21,7 +21,7 @@
                         title="Add an address"
                         aria-label="Add an address"
                     >
-                        <i class="oi oi-plus me-2"/>Add Address
+                        <i class="oi me-2" data-icon="add"/>Add Address
                     </a>
                 </div>
                 <t t-call="portal.address_list" addresses="delivery_addresses"/>
@@ -40,7 +40,7 @@
                         title="Add an address"
                         aria-label="Add an address"
                     >
-                        <i class="oi oi-plus me-2"/>Add Address
+                        <i class="oi me-2" data-icon="add"/>Add Address
                     </a>
                 </div>
                 <div class="form-check form-switch mt-2">
@@ -137,7 +137,7 @@
                             title="Edit this address"
                             aria-label="Edit this address"
                         >
-                            <i class="fa fa-fw fa-pencil"/>
+                            <i class="oi oi-fw oi-filled" data-icon="edit"/>
                         </a>
                         <t t-if="show_removal">
                             <span class="d-block border-start border-2 my-2"/>
@@ -148,7 +148,7 @@
                                 aria-label="Remove this address"
                                 t-att-data-partner-id="contact.id"
                             >
-                                <i class="fa fa-fw fa-trash"/>
+                                <i class="oi oi-fw oi-filled" data-icon="delete"/>
                             </a>
                         </t>
                     </div>
@@ -391,7 +391,7 @@
                 t-att-href="discard_url or '/my/'"
                 class="btn btn-outline-secondary w-100 w-md-auto order-md-1 order-3"
             >
-                <i class="fw-light fa fa-angle-left me-2"/>Discard
+                <i class="fw-light oi me-2" data-icon="keyboard_arrow_left"/>Discard
             </a>
             <div class="position-relative w-100 d-flex d-md-none justify-content-center align-items-center order-2 my-2 opacity-75">
                 <hr class="w-100"/>
@@ -400,7 +400,7 @@
             </div>
             <button id="save_address" class="btn btn-primary w-100 w-md-auto order-1 order-md-3">
                 <t name="save_address_label">Save Address</t>
-                <i class="fw-light fa fa-angle-right ms-2"/>
+                <i class="fw-light oi ms-2" data-icon="keyboard_arrow_right"/>
             </button>
         </div>
     </template>
@@ -418,7 +418,7 @@
                             <i class="fa fa-pencil" title="Edit"/>
                         </button>
                         <button class="btn btn-outline-secondary o_portal_profile_pic_clear oe_unremovable" aria-label="Clear">
-                            <i class="fa fa-trash-o" title="Clear"/>
+                            <i class="oi" data-icon="delete" title="Clear"/>
                         </button>
                     </div>
                 </div>
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index b31cdf11c38eaf..9fbc5d0372eb89 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -100,19 +100,19 @@
                     <img t-att-src="avatar_source" t-attf-class="rounded-circle object-fit-cover #{_avatar_class}" width="24" height="24" alt="" loading="eager"/>
                 </t>
                 <div t-if="_icon" t-attf-class="#{_icon_wrap_class}">
-                    <i t-attf-class="fa fa-1x fa-fw fa-user #{_icon_class}"/>
+                    <i t-attf-class="oi oi-1x oi-fw oi-filled #{_icon_class}" data-icon="person"/>
                 </div>
                 <span t-if="_user_name" t-attf-class="#{_user_name_class}" t-out="user_id.name[:23] + '...' if user_id.name and len(user_id.name) &gt; 25 else user_id.name"/>
             </a>
             <div t-attf-class="dropdown-menu js_usermenu #{_dropdown_menu_class}" role="menu">
                 <a groups="base.group_user" href="/odoo" role="menuitem" class="dropdown-item ps-3" id="o_backend_user_dropdown_link">
-                    <i class="fa fa-fw fa-th me-1 small text-primary-emphasis"/> Apps
+                    <i class="oi oi-fw me-1 small text-primary-emphasis" data-icon="grid_view"/> Apps
                 </a>
                 <div id="o_logout_divider" class="dropdown-divider"/>
                 <form method="POST" action="/web/session/logout?redirect=/" role="menuitem" class="dropdown-item p-0">
                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                     <button id="o_logout" type="submit" class="btn w-100 ps-3 text-start">
-                        <i class="fa fa-fw fa-sign-out small text-primary-emphasis"/> Logout
+                        <i class="oi oi-fw small text-primary-emphasis" data-icon="logout"/> Logout
                     </button>
                 </form>
             </div>
@@ -121,7 +121,7 @@
 
     <template id="portal_breadcrumbs" name="Portal Breadcrumbs">
         <ol t-if="page_name != 'home'" class="o_portal_submenu breadcrumb mb-0 flex-grow-1 px-0">
-            <li class="breadcrumb-item ms-1"><a href="/my/home" aria-label="Home" title="Home"><i class="fa fa-home"/></a></li>
+            <li class="breadcrumb-item ms-1"><a href="/my/home" aria-label="Home" title="Home"><i class="oi" data-icon="home"/></a></li>
             <li t-if="page_name == 'my_addresses'" class="breadcrumb-item">Addresses</li>
             <li t-elif="page_name == 'address_form'" class="breadcrumb-item">
                 <a href="/my/addresses" aria-label="Addresses" title="Addresses">Addresses</a>
@@ -134,7 +134,7 @@
         <div t-ignore="true" class="text-center">
             <t t-if="custom_html" t-out="custom_html"/>
             <t t-else="">This is a preview of the customer portal.</t>
-            <a t-att-href="backend_url" class="alert-link"><i class="oi oi-arrow-right me-1"/>Back to edit mode</a>
+            <a t-att-href="backend_url" class="alert-link"><i class="oi me-1" data-icon="east"/>Back to edit mode</a>
         </div>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </template>
@@ -185,7 +185,7 @@
     <template id="user_sign_in" name="User Sign In" inherit_id="portal.placeholder_user_sign_in">
         <xpath expr="." position="inside">
             <li groups="base.group_public" t-attf-class="#{_item_class} o_no_autohide_item">
-                <a t-attf-href="/web/login" t-attf-class="#{_link_class}">Sign in<span t-if="request.session.get('profile_session')" class="text-danger fa fa-circle"/></a>
+                <a t-attf-href="/web/login" t-attf-class="#{_link_class}">Sign in<span t-if="request.session.get('profile_session')" class="oi oi-filled text-danger" data-icon="circle"/></a>
             </li>
         </xpath>
     </template>
@@ -329,7 +329,7 @@
 
             <!--  Collapse button -->
             <button t-if="searchbar_sortings or searchbar_filters or searchbar_groupby or searchbar_inputs" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#o_portal_navbar_content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle filters">
-                <span class="fa fa-fw fa-bars"/>
+                <span class="oi oi-fw" data-icon="menu"/>
             </button>
 
             <!--  Collapsable content  -->
@@ -398,7 +398,7 @@
                         </div>
                         <input type="search" class="form-control border-0 bg-light" placeholder="Search" t-att-value='search' name="search"/>
                         <button class="btn btn-light" type="submit">
-                            <span class="oi oi-search"/>
+                            <span class="oi" data-icon="search"/>
                         </button>
                     </div>
                 </form>
@@ -412,15 +412,15 @@
             <hr class="mt-1"/>
             <h6 t-out="sales_user.name"/>
             <div t-if="sales_user.email_normalized" class="d-flex align-items-baseline mb-1">
-                <i class="fa fa-envelope fa-fw me-1 text-600"/>
+                <i class="oi oi-fw oi-filled me-1 text-600" data-icon="mail"/>
                 <a class="text-break w-100" t-att-href="'mailto:'+sales_user.email" t-out="sales_user.email"/>
             </div>
             <div t-if="sales_user.phone" class="d-flex flex-nowrap align-items-center mb-1">
-                <i class="fa fa-phone fa-fw me-1 text-600"/>
+                <i class="oi oi-fw oi-filled me-1 text-600" data-icon="phone"/>
                 <span t-out="sales_user.phone"/>
             </div>
             <div t-if="sales_user.city" class="d-flex flex-nowrap align-items-center mb-1">
-                <i class="fa fa-map-marker fa-fw me-1 text-600"/>
+                <i class="oi oi-fw me-1 text-600" data-icon="location_on"/>
                 <span t-out="sales_user.city"/>
             </div>
         </div>
@@ -445,7 +445,7 @@
                 <t t-out="errors"/>
             </div>
             <div class="d-flex gap-2 my-3">
-                <a href="/my/" title="Go Back" class="btn btn-light px-2"><i class="oi oi-chevron-left"/></a>
+                <a href="/my/" title="Go Back" class="btn btn-light px-2"><i class="oi" data-icon="chevron_backward"/></a>
                 <h3 class="my-0">Connection &amp; Security</h3>
             </div>
             <section name="portal_change_password">
@@ -466,7 +466,7 @@
                                    id="current" name="old"
                                    autocomplete="current-password" required="required"/>
                             <button class="btn border border-start-0 o_show_password rounded-end" type="button">
-                                <i class="fa fa-eye"/>
+                                <i class="oi" data-icon="visibility"/>
                             </button>
                             <div class="invalid-feedback">
                                 <t t-out="get_error(errors, 'password.old')"/>
@@ -481,7 +481,7 @@
                                 id="new" name="new1"
                                 autocomplete="new-password" required="required"/>
                             <button type="button" class="btn border border-start-0 o_show_password rounded-end">
-                                <i class="fa fa-eye"/>
+                                <i class="oi" data-icon="visibility"/>
                             </button>
                             <div class="invalid-feedback">
                                 <t t-out="get_error(errors, 'password.new1')"/>
@@ -495,7 +495,7 @@
                                 id="new2" name="new2"
                                 autocomplete="new-password" required="required"/>
                             <button type="button" class="btn border border-start-0 o_show_password rounded-end">
-                                <i class="fa fa-eye"/>
+                                <i class="oi" data-icon="visibility"/>
                             </button>
                             <div class="invalid-feedback">
                                 <t t-out="get_error(errors, 'password.new2')"/>
@@ -515,7 +515,7 @@
                 <h4>
                 Developer API Keys
                     <a href="https://www.odoo.com/documentation/latest/developer/reference/external_api.html#api-key" target="_blank">
-                        <i title="Documentation" class="fa fa-fw o_button_icon fa-info-circle"></i>
+                        <i title="Documentation" class="oi oi-fw o_button_icon" data-icon="info"></i>
                     </a>
                 </h4>
                 <div>
@@ -537,7 +537,7 @@
                                     <td><span t-field="key.create_date"/></td>
                                     <td><span t-field="key.expiration_date"/></td>
                                     <td>
-                                        <i class="fa fa-trash text-danger o_portal_remove_api_key" type="button" t-att-id="key.id"/>
+                                        <i class="oi oi-filled text-danger o_portal_remove_api_key" data-icon="delete" type="button" t-att-id="key.id"/>
                                     </td>
                                 </tr>
                             </t>
@@ -571,7 +571,7 @@
                                     <p class="text-muted">
                                         Disable your account, preventing any further login.<br/>
                                         <b>
-                                            <i class="fa fa-exclamation-triangle text-danger"></i>
+                                            <i class="oi text-danger" data-icon="warning"></i>
                                             This action cannot be undone.
                                         </b>
                                     </p>
@@ -619,8 +619,8 @@
     <template id="record_pager" name="Portal Record Pager">
         <t t-if='prev_record or next_record'>
             <div class="record_pager btn-group" role="group">
-                <a role="button" t-att-class="'btn btn-light %s' % ('disabled' if not prev_record else '')" t-att-href="prev_record or '#'" ><i class="oi oi-chevron-left" role="img" aria-label="Previous" title="Previous"></i></a>
-                <a role="button" t-att-class="'btn btn-light %s' % ('disabled' if not next_record else '')" t-att-href="next_record or '#'" ><i class="oi oi-chevron-right" role="img" aria-label="Next" title="Next"></i></a>
+                <a role="button" t-att-class="'btn btn-light %s' % ('disabled' if not prev_record else '')" t-att-href="prev_record or '#'" ><i class="oi" data-icon="chevron_backward" role="img" aria-label="Previous" title="Previous"></i></a>
+                <a role="button" t-att-class="'btn btn-light %s' % ('disabled' if not next_record else '')" t-att-href="next_record or '#'" ><i class="oi" data-icon="chevron_forward" role="img" aria-label="Next" title="Next"></i></a>
             </div>
         </t>
     </template>
@@ -629,7 +629,7 @@
         <ul t-if="pager['page_count'] > 1" t-attf-class="#{ classname or '' } pagination m-0 #{_classes}" t-att-style="style or None">
             <li t-attf-class="page-item #{'disabled' if pager['page']['num'] == 1 else ''}">
                 <a t-att-href=" pager['page_previous']['url'] if pager['page']['num'] != 1 else None" t-attf-class="page-link #{extraLinkClass}">
-                    <span class="oi oi-chevron-left" role="img" aria-label="Previous" title="Previous"/>
+                    <span class="oi" data-icon="chevron_backward" role="img" aria-label="Previous" title="Previous"/>
                 </a>
             </li>
             <t t-foreach="pager['pages']" t-as="page">
@@ -639,7 +639,7 @@
             </t>
             <li t-attf-class="page-item #{'disabled' if pager['page']['num'] == pager['page_count'] else ''}">
                 <a t-att-href="pager['page_next']['url'] if pager['page']['num'] != pager['page_count'] else None" t-attf-class="page-link #{extraLinkClass}">
-                    <span class="oi oi-chevron-right" role="img" aria-label="Next" title="Next"/>
+                    <span class="oi" data-icon="chevron_forward" role="img" aria-label="Next" title="Next"/>
                 </a>
             </li>
         </ul>
@@ -648,7 +648,7 @@
     <template id="my_account_link" name="Link to frontend portal" inherit_id="portal.user_dropdown">
         <xpath expr="//*[@id='o_logout_divider']" position="before">
             <a href="/my/home" role="menuitem" class="dropdown-item ps-3">
-                <i class="fa fa-fw fa-id-card-o me-1 small text-primary-emphasis"/> My Account
+                <i class="oi oi-fw me-1 small text-primary-emphasis" data-icon="badge"/> My Account
             </a>
         </xpath>
     </template>
@@ -736,7 +736,7 @@
             <div class="o_portal_my_details">
                 <div t-field="user_id.partner_id" t-options='{"widget": "contact", "fields": ["email", "phone", "address"]}'/>
             </div>
-            <a role="button" href="/my/account" class="btn btn-link p-0 mt-3"><i class="fa fa-pencil"/> Edit information</a>
+            <a role="button" href="/my/account" class="btn btn-link p-0 mt-3"><i class="oi oi-filled" data-icon="edit"/> Edit information</a>
             <div name="portal_contact" class="o_my_contact mt-5" t-if="sales_user">
                 <t t-call="portal.portal_contact"/>
             </div>
diff --git a/addons/portal/wizard/portal_wizard_views.xml b/addons/portal/wizard/portal_wizard_views.xml
index 9d3bf34325212e..53e8c0fa80403d 100644
--- a/addons/portal/wizard/portal_wizard_views.xml
+++ b/addons/portal/wizard/portal_wizard_views.xml
@@ -36,11 +36,11 @@
                             <field name="partner_id" force_save="1"/>
                             <field name="email" readonly="is_internal"/>
                             <field name="email_state" column_invisible="True"/>
-                            <button name="action_refresh_modal" type="object" icon="fa-check text-success"
+                            <button name="action_refresh_modal" type="object" icon="check" icon_class="text-success"
                                 invisible="email_state != 'ok'" title="Valid Email Address"/>
-                            <button name="action_refresh_modal" type="object" icon="fa-times text-danger"
+                            <button name="action_refresh_modal" type="object" icon="close" icon_class="text-danger"
                                 invisible="email_state != 'ko'" title="Invalid Email Address"/>
-                            <button name="action_refresh_modal" type="object" icon="fa-user-times text-danger"
+                            <button name="action_refresh_modal" type="object" icon="person_remove" icon_class="oi-filled text-danger"
                                 invisible="email_state != 'exist'" title="Email Address already taken by another user"/>
                             <field name="login_date"/>
                             <field name="is_portal" column_invisible="True"/>
diff --git a/addons/portal_rating/static/src/chatter/portal/composer_patch.xml b/addons/portal_rating/static/src/chatter/portal/composer_patch.xml
index 1972ef9167a7fa..6b9226651c9a48 100644
--- a/addons/portal_rating/static/src/chatter/portal/composer_patch.xml
+++ b/addons/portal_rating/static/src/chatter/portal/composer_patch.xml
@@ -6,11 +6,11 @@
                 <div class="o-mail-Composer-stars enabled cursor-pointer" t-on-mouseleave="this.onMouseLeaveStar">
                     <t t-set="index" t-value="0" />
                     <t t-foreach="Array(this.visibleRatingValue)" t-as="num" t-key="num_index">
-                        <i class="fa fa-star" role="img" aria-label="Full star" t-att-index="index" t-on-mousemove="this.onMoveStar" t-on-click="this.onClickStar"/>
+                        <i class="oi oi-filled" data-icon="star" role="img" aria-label="Full star" t-att-index="index" t-on-mousemove="this.onMoveStar" t-on-click="this.onClickStar"/>
                         <t t-set="index" t-value="index + 1" />
                     </t>
                     <t t-foreach="Array(this.MAX_STAR_RATING - this.visibleRatingValue)" t-as="num" t-key="Array(this.visibleRatingValue) + num_index">
-                        <i class="fa fa-star-o text-black-25" role="img" aria-label="Empty star" t-att-index="index" t-on-mousemove="this.onMoveStar" t-on-click="this.onClickStar"/>
+                        <i class="oi text-black-25" data-icon="star" role="img" aria-label="Empty star" t-att-index="index" t-on-mousemove="this.onMoveStar" t-on-click="this.onClickStar"/>
                         <t t-set="index" t-value="index + 1" />
                     </t>
                 </div>
diff --git a/addons/portal_rating/static/src/chatter/portal/message_patch.xml b/addons/portal_rating/static/src/chatter/portal/message_patch.xml
index fa7deb901ed8a7..457429326cea85 100644
--- a/addons/portal_rating/static/src/chatter/portal/message_patch.xml
+++ b/addons/portal_rating/static/src/chatter/portal/message_patch.xml
@@ -37,14 +37,14 @@
                                 <div t-if="this.store.self.is_user_publisher" class="d-flex rounded-0">
                                     <Dropdown>
                                         <button class="bg-transparent border-0">
-                                            <i class="btn px-1 py-0 oi oi-ellipsis-v"/>
+                                            <i class="btn px-1 py-0 oi" data-icon="more_vert"/>
                                         </button>
                                         <t t-set-slot="content">
                                             <DropdownItem class="'o_wrating_js_publisher_comment_edit'" onSelected="() => this.onClikEditComment()">
                                                 <i class="fa fa-fw fa-pencil me-1"/>Edit
                                             </DropdownItem>
                                             <DropdownItem class="'o_wrating_js_publisher_comment_delete'" onSelected="() => this.deleteComment()">
-                                                <i class="fa fa-fw fa-trash-o me-1"/>Delete
+                                                <i class="oi oi-fw me-1" data-icon="delete"/>Delete
                                             </DropdownItem>
                                         </t>
                                     </Dropdown>
diff --git a/addons/portal_rating/static/src/interactions/portal_composer.js b/addons/portal_rating/static/src/interactions/portal_composer.js
index df9feee4049bc3..f92ade0b4fb9b8 100644
--- a/addons/portal_rating/static/src/interactions/portal_composer.js
+++ b/addons/portal_rating/static/src/interactions/portal_composer.js
@@ -50,11 +50,15 @@ patch(PortalComposer.prototype, {
                     const decimal = this.starValue - index;
                     const starIndex = [...el.parentElement.children].indexOf(el) + 1; // index counts from 1 to 5
                     return {
-                        "fa-star-o": starIndex > index,
-                        "fa-star-half-o": decimal && starIndex === index,
-                        "fa-star": decimal ? starIndex < index : starIndex <= index,
+                        "oi-filled": decimal ? starIndex < index : starIndex <= index,
                     };
                 },
+                "t-att-data-icon": (el) => {
+                    const index = Math.floor(this.starValue);
+                    const decimal = this.starValue - index;
+                    const starIndex = [...el.parentElement.children].indexOf(el) + 1; // index counts from 1 to 5
+                    return decimal && starIndex === index ? "star_half" : "star";
+                },
             },
         });
 
diff --git a/addons/portal_rating/static/src/xml/portal_tools.xml b/addons/portal_rating/static/src/xml/portal_tools.xml
index 12b106af2c6ce4..d05282dfd2c2cb 100644
--- a/addons/portal_rating/static/src/xml/portal_tools.xml
+++ b/addons/portal_rating/static/src/xml/portal_tools.xml
@@ -9,13 +9,13 @@
              t-attf-aria-label="#{Math.round(val * 100) / 100} stars on 5"
              t-attf-title="#{Math.round(val * 100) / 100} stars on 5">
             <t t-foreach="Array(val_integer)" t-as="num" t-key="num_index">
-                <i class="fa fa-star" role="img"></i>
+                <i class="oi oi-filled" data-icon="star" role="img"></i>
             </t>
             <t t-if="val_decimal">
-                <i class="fa fa-star-half-o" role="img"></i>
+                <i class="oi" data-icon="star_half" role="img"></i>
             </t>
             <t t-foreach="Array(empty_star)" t-as="num" t-key="num_index">
-                <i class="fa fa-star text-black-25" role="img"></i>
+                <i class="oi oi-filled text-black-25" data-icon="star" role="img"></i>
             </t>
         </div>
     </t>
@@ -29,7 +29,7 @@
                     <t t-call="portal_rating.rating_stars_static">
                         <t t-set="val" t-value="rating_stats.avg || 0"/>
                     </t>
-                    <span class="fa fa-comments" />
+                    <span class="oi oi-filled" data-icon="forum" />
                     <span class="px-1"> <t t-out="rating_stats.total"/> </span>
                     comments
                 </div>
@@ -58,7 +58,7 @@
                             <td class="o_website_rating_table_reset">
                                 <button t-attf-class="btn btn-link o_website_rating_selection_reset #{row_selected and 'visible' or 'invisible'}"
                                         t-att-data-star="percent" t-on-click.stop="() => this.onClickStarDomainReset()">
-                                    <i class="fa fa-times d-block" role="img" aria-label="Remove Selection"/>
+                                    <i class="oi d-block" data-icon="close" role="img" aria-label="Remove Selection"/>
                                 </button>
                             </td>
                         </tr>
@@ -76,13 +76,13 @@
 
             <div class="o-mail-Composer-stars enabled cursor-pointer">
                 <t t-foreach="Array(val_integer)" t-as="num" t-key="num_index">
-                    <i class="fa fa-star" role="img" aria-label="Full star"></i>
+                    <i class="oi oi-filled" data-icon="star" role="img" aria-label="Full star"></i>
                 </t>
                 <t t-if="val_decimal">
-                    <i class="fa fa-star-half-o" role="img" aria-label="Half a star"></i>
+                    <i class="oi" data-icon="star_half" role="img" aria-label="Half a star"></i>
                 </t>
                 <t t-foreach="Array(empty_star)" t-as="num" t-key="num_index">
-                    <i class="fa fa-star-o text-black-25" role="img" aria-label="Empty star"></i>
+                    <i class="oi text-black-25" data-icon="star" role="img" aria-label="Empty star"></i>
                 </t>
             </div>
             <input type="hidden" readonly="readonly" name="rating_value" t-att-value="default_rating || ''"/>
diff --git a/addons/portal_rating/views/rating_templates.xml b/addons/portal_rating/views/rating_templates.xml
index 0455f77b6af751..99fd4b922b087b 100644
--- a/addons/portal_rating/views/rating_templates.xml
+++ b/addons/portal_rating/views/rating_templates.xml
@@ -11,13 +11,13 @@
         <div class="o_website_rating_static" t-att-style="inline_mode and 'display:inline'" t-att-title="rating_avg">
             <t t-if="rating_style_compressed">
                 <t t-if="rating_avg &lt;= 2">
-                    <i class="fa fa-star-o" role="img"></i>
+                    <i class="oi" data-icon="star" role="img"></i>
                 </t>
                 <t t-elif="rating_avg &gt;= 2.1 and rating_avg &lt;= 3.5">
-                    <i class="fa fa-star-half-o" role="img"></i>
+                    <i class="oi" data-icon="star_half" role="img"></i>
                 </t>
                 <t t-else="">
-                    <i class="fa fa-star" role="img"></i>
+                    <i class="oi oi-filled" data-icon="star" role="img"></i>
                 </t>
                 <small class="text-muted ms-1">
                     <t t-out="rating_avg"/>
@@ -25,13 +25,13 @@
             </t>
             <t t-else="">
                 <t t-foreach="range(0, val_integer)" t-as="num">
-                    <i class="fa fa-star" role="img"></i>
+                    <i class="oi oi-filled" data-icon="star" role="img"></i>
                 </t>
                 <t t-if="val_decimal">
-                    <i class="fa fa-star-half-o" role="img"></i>
+                    <i class="oi" data-icon="star_half" role="img"></i>
                 </t>
                 <t t-foreach="range(0, empty_star)" t-as="num">
-                    <i class="fa fa-star-o" role="img"></i>
+                    <i class="oi" data-icon="star" role="img"></i>
                 </t>
                 <small class="text-muted ms-1">
                     (<t t-out="rating_count"/>)
@@ -72,7 +72,7 @@
             t-att-data-disable_composer="disable_composer"
             t-att-data-display_composer="display_composer"
             t-att-data-link_btn_classes="_link_btn_classes"
-            t-att-data-icon="icon"
+            t-att-data-rating-icon="icon"
             t-att-data-text_classes="_text_classes"
             t-att-data-hide_rating_avg="hide_rating_avg"
             t-att-data-is_fullscreen="is_fullscreen">
@@ -81,7 +81,7 @@
                 <button t-if="display_composer" type="button"
                     t-att-class="'btn ' + _link_btn_classes or 'btn-primary'"
                     data-bs-toggle="modal" data-bs-target="#ratingpopupcomposer">
-                    <i t-if="icon" t-att-class="icon"/>
+                    <i t-if="icon" t-attf-class="oi {{icon_class}}" t-att-data-icon="icon"/>
                     <span t-attf-class="#{_text_classes} o_rating_popup_composer_text">
                         <t t-if="is_fullscreen">Review</t>
                         <t t-elif="default_message_id">Edit Review</t>
diff --git a/addons/pos_discount/static/src/app/screens/product_screen/control_buttons/control_buttons.xml b/addons/pos_discount/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
index d31ed971250aaa..4c6c90a2cea22d 100644
--- a/addons/pos_discount/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
+++ b/addons/pos_discount/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
@@ -8,7 +8,7 @@
                 class="js_discount"
                 t-att-class="this.buttonClass"
                 t-on-click="() => this.clickDiscount()">
-                <i class="fa fa-tag me-1"/>Discount
+                <i class="oi me-1" data-icon="label"/>Discount
             </button>
         </xpath>
     </t>
diff --git a/addons/pos_event/static/src/app/components/popup/print_popup/print_popup.js b/addons/pos_event/static/src/app/components/popup/print_popup/print_popup.js
index 290d21e5e12c2f..d298d8638e6204 100644
--- a/addons/pos_event/static/src/app/components/popup/print_popup/print_popup.js
+++ b/addons/pos_event/static/src/app/components/popup/print_popup/print_popup.js
@@ -18,14 +18,14 @@ patch(PrintPopup.prototype, {
                 label: "Print Full Page Ticket",
                 method: () => this.doPrintEventFull.call(),
                 status: this.doPrintEventFull.status,
-                icon: "fa-ticket",
+                icon: "confirmation_number",
                 isPrimary: false,
             });
             list.push({
                 label: "Print Badge",
                 method: () => this.doPrintEventBadge.call(),
                 status: this.doPrintEventBadge.status,
-                icon: "fa-id-badge",
+                icon: "badge",
                 isPrimary: false,
             });
         }
diff --git a/addons/pos_event/static/src/app/screens/product_screen/order_summary/order_summary.xml b/addons/pos_event/static/src/app/screens/product_screen/order_summary/order_summary.xml
index 48780ce967a7d8..31a974029e0297 100644
--- a/addons/pos_event/static/src/app/screens/product_screen/order_summary/order_summary.xml
+++ b/addons/pos_event/static/src/app/screens/product_screen/order_summary/order_summary.xml
@@ -4,7 +4,7 @@
 		<xpath expr="//Orderline" position="inside" >
             <t t-if="line.event_ticket_id">
                 <li class="info ms-2">
-                    <i class="fa fa-ticket me-2" role="img" aria-label="Event name" title="Event name"/>
+                    <i class="oi me-2" data-icon="confirmation_number" role="img" aria-label="Event name" title="Event name"/>
                     <t t-out="line.event_ticket_id.event_id.name" />
                 </li>
             </t>
diff --git a/addons/pos_event/static/tests/tours/utils/event_tour_utils.js b/addons/pos_event/static/tests/tours/utils/event_tour_utils.js
index 67cb9119778d6d..8b92db281570f6 100644
--- a/addons/pos_event/static/tests/tours/utils/event_tour_utils.js
+++ b/addons/pos_event/static/tests/tours/utils/event_tour_utils.js
@@ -3,7 +3,7 @@ export function increaseQuantityOfTicket(ticket) {
     return [
         {
             content: `increase quantity`,
-            trigger: `.modal .o_event_configurator_popup div:contains('${ticket}') .fa.fa-plus`,
+            trigger: `.modal .o_event_configurator_popup div:contains('${ticket}') [data-icon="add"]`,
             run: "click",
         },
     ];
@@ -13,7 +13,7 @@ export function decreaseQuantityOfTicket(ticket) {
     return [
         {
             content: `decrease quantity`,
-            trigger: `.modal .o_event_configurator_popup div:contains('${ticket}') .fa.fa-minus`,
+            trigger: `.modal .o_event_configurator_popup div:contains('${ticket}') [data-icon="remove"]`,
             run: "click",
         },
     ];
diff --git a/addons/pos_event/views/event_event_views.xml b/addons/pos_event/views/event_event_views.xml
index e9352379be2fc1..6f7977c034ea90 100644
--- a/addons/pos_event/views/event_event_views.xml
+++ b/addons/pos_event/views/event_event_views.xml
@@ -14,7 +14,7 @@
             <xpath expr="//button[@name='%(event.act_event_registration_from_event)d']" position="after">
                 <field name="currency_id" invisible="1"/> <!-- To use currency in the button -->
                 <button name="action_view_linked_pos_orders"
-                        type="object" class="oe_stat_button" icon="fa-shopping-basket"
+                        type="object" class="oe_stat_button" icon="shopping_basket"
                         groups="point_of_sale.group_pos_user"
                         help="Total sales for this event from PoS">
                     <div class="o_field_widget o_stat_info">
diff --git a/addons/pos_event/views/event_registration_views.xml b/addons/pos_event/views/event_registration_views.xml
index 65c907d4e3c8f0..f61992f4c403f1 100644
--- a/addons/pos_event/views/event_registration_views.xml
+++ b/addons/pos_event/views/event_registration_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
                 <button name="action_view_pos_order" type="object"
-                        class="oe_stat_button" icon="fa-usd"
+                        class="oe_stat_button" icon="attach_money"
                         groups="point_of_sale.group_pos_user"
                         invisible="not pos_order_id">
                         <div class="o_stat_info">
diff --git a/addons/pos_event/views/pos_order_views.xml b/addons/pos_event/views/pos_order_views.xml
index a2f53addeac76f..84f611f2f0e481 100644
--- a/addons/pos_event/views/pos_order_views.xml
+++ b/addons/pos_event/views/pos_order_views.xml
@@ -6,12 +6,12 @@
         <field name="inherit_id" ref="point_of_sale.view_pos_pos_form"/>
         <field name="arch" type="xml">
             <xpath expr="//header" position="inside">
-                <button name="print_event_tickets" invisible="attendee_count == 0" type="object"><i class="fa fa-file-pdf-o me-1" aria-hidden="true" />Print Event Tickets</button>
-                <button name="print_event_badges" invisible="attendee_count == 0" type="object"><i class="fa fa-file-pdf-o me-1" aria-hidden="true" />Print Event Badges</button>
+                <button name="print_event_tickets" invisible="attendee_count == 0" type="object"><i class="oi me-1" data-icon="picture_as_pdf" aria-hidden="true" />Print Event Tickets</button>
+                <button name="print_event_badges" invisible="attendee_count == 0" type="object"><i class="oi me-1" data-icon="picture_as_pdf" aria-hidden="true" />Print Event Badges</button>
             </xpath>
             <xpath expr="//sheet/div[hasclass('oe_button_box')]" position="inside">
                 <button name="action_view_attendee_list" type="object"
-                    class="oe_stat_button" icon="fa-users" invisible="attendee_count == 0">
+                    class="oe_stat_button" icon="group" icon_class="oi-filled" invisible="attendee_count == 0">
                     <field name="attendee_count" widget="statinfo" string="Attendees"/>
                 </button>
             </xpath>
diff --git a/addons/pos_hr/static/src/app/components/navbar/navbar.xml b/addons/pos_hr/static/src/app/components/navbar/navbar.xml
index 5848f30f9808a1..a20f35d57a7ef0 100644
--- a/addons/pos_hr/static/src/app/components/navbar/navbar.xml
+++ b/addons/pos_hr/static/src/app/components/navbar/navbar.xml
@@ -2,22 +2,22 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_hr.Navbar" t-inherit="point_of_sale.Navbar" t-inherit-mode="extension">
-        <xpath expr="//DropdownItem/i[hasclass('fa-chevron-left')]/.." position="attributes">
+        <xpath expr="//DropdownItem/i[@data-icon='chevron_left']/.." position="attributes">
             <attribute name="t-if">showBackend</attribute>
         </xpath>
-        <xpath expr="//DropdownItem/i[hasclass('fa-key')]/.." position="attributes">
+        <xpath expr="//DropdownItem/i[@data-icon='key']/.." position="attributes">
             <attribute name="t-if">
                 !pos.config.module_pos_hr or pos.employeeIsAdmin or pos.getCashierUserId() === pos.session.user_id?.id
             </attribute>
         </xpath>
         <xpath expr="//CashierName" position="after">
             <button t-if="pos.config.module_pos_hr and !ui.isSmall" class="lock-screen btn btn-light btn-lg lh-lg" title="Lock" t-on-click="() => this.pos.showLoginScreen()">
-                <i class="fa fa-fw fa-unlock"/>
+                <i class="oi oi-fw" data-icon="lock_open"/>
             </button>
         </xpath>
         <xpath expr="//Dropdown//div[hasclass('pos-burger-menu-items')]" position="inside">
             <DropdownItem t-if="pos.config.module_pos_hr and ui.isSmall" onSelected="() => this.pos.showLoginScreen()">
-                <i class="fa fa-fw fa-lock" aria-hidden="true" /> Lock
+                <i class="oi oi-fw" data-icon="lock" aria-hidden="true" /> Lock
             </DropdownItem>
         </xpath>
     </t>
diff --git a/addons/pos_hr/static/src/app/components/popups/cashier_selection_popup/cashier_selection_popup.xml b/addons/pos_hr/static/src/app/components/popups/cashier_selection_popup/cashier_selection_popup.xml
index 39ace584a45510..d5670e27eff95a 100644
--- a/addons/pos_hr/static/src/app/components/popups/cashier_selection_popup/cashier_selection_popup.xml
+++ b/addons/pos_hr/static/src/app/components/popups/cashier_selection_popup/cashier_selection_popup.xml
@@ -20,7 +20,7 @@
                 </div>
                 <div class="d-flex align-items-center ms-1">
                     <button class="btn-cashier-lock btn btn-lg btn-secondary" title="Lock" t-on-click.stop="() => this.lock()">
-                        <i class="fa fa-fw fa-lock"/>
+                        <i class="oi oi-fw" data-icon="lock"/>
                     </button>
                 </div>
             </div>
@@ -39,7 +39,7 @@
                         </span>
                     </div>
                 </div>
-                <i class="oi oi-chevron-right"/>
+                <i class="oi" data-icon="chevron_forward"/>
             </button>
             <button
                 t-if="this.displayMoreButton"
diff --git a/addons/pos_hr/static/src/app/screens/login_screen/login_screen.xml b/addons/pos_hr/static/src/app/screens/login_screen/login_screen.xml
index 2cfdfe5c11cf3f..fcc660f8b061d4 100644
--- a/addons/pos_hr/static/src/app/screens/login_screen/login_screen.xml
+++ b/addons/pos_hr/static/src/app/screens/login_screen/login_screen.xml
@@ -14,10 +14,10 @@
                         class="form-control form-control-lg rounded flex-grow-1"
                         placeholder="Enter your PIN" />
                     <button class="select-cashier btn btn-secondary px-4" t-on-click="() => this.selectCashier(false, true)">
-                        <i class="fa fa-users" aria-hidden="true"></i>
+                        <i class="oi oi-filled" data-icon="group" aria-hidden="true"></i>
                     </button>
                     <button class="btn btn-secondary mobile-scanner px-4" t-if="this.pos.config.module_pos_hr">
-                        <i class="fa fa-barcode" aria-hidden="true"></i>
+                        <i class="oi" data-icon="barcode" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>
diff --git a/addons/pos_hr/static/tests/tours/utils/pos_hr_helpers.js b/addons/pos_hr/static/tests/tours/utils/pos_hr_helpers.js
index a07b87aef40ef5..14cd18f5ac55e7 100644
--- a/addons/pos_hr/static/tests/tours/utils/pos_hr_helpers.js
+++ b/addons/pos_hr/static/tests/tours/utils/pos_hr_helpers.js
@@ -65,7 +65,7 @@ export function enterPin(pin) {
 export function clickLockButton() {
     return {
         content: "Click on the menu button",
-        trigger: ".pos-rightheader i.fa-unlock",
+        trigger: ".pos-rightheader i[data-icon='lock_open']",
         run: "click",
     };
 }
diff --git a/addons/pos_loyalty/models/pos_order.py b/addons/pos_loyalty/models/pos_order.py
index 83984c148e124f..863b100c77b203 100644
--- a/addons/pos_loyalty/models/pos_order.py
+++ b/addons/pos_loyalty/models/pos_order.py
@@ -248,7 +248,7 @@ def _add_log_for_gift_cards(self, gift_cards):
         body = Markup(
             """
                 <span class='o-mail-Message-trackingOld text-muted fw-bold'>{message}<span/>
-                <i class='o-mail-Message-trackingSeparator fa fa-long-arrow-right mx-1 text-600'/>
+                <i class='o-mail-Message-trackingSeparator oi mx-1 text-600' data-icon='east'/>
                 <span class='o-mail-Message-trackingNew text-info fw-bold'>{order_name}</span>
             """
         ).format(message=_('Loyalty coupon sold'), order_name=self._get_html_link())
diff --git a/addons/pos_loyalty/static/src/app/components/popups/manage_giftcard_popup/manage_giftcard_popup.xml b/addons/pos_loyalty/static/src/app/components/popups/manage_giftcard_popup/manage_giftcard_popup.xml
index 3052fc5d5efd2f..cd4ef00d21750a 100644
--- a/addons/pos_loyalty/static/src/app/components/popups/manage_giftcard_popup/manage_giftcard_popup.xml
+++ b/addons/pos_loyalty/static/src/app/components/popups/manage_giftcard_popup/manage_giftcard_popup.xml
@@ -14,7 +14,7 @@
                     t-att-placeholder="this.props.placeholder"
                     t-att-style="this.state.error ? 'border-color: red;' : ''" />
                 <div t-if="this.state.loading" class="gift-card-loading pe-3 h-100 position-absolute end-0 top-0 d-flex align-items-center">
-                    <i class="fa fa-spinner fa-spin" />
+                    <i class="oi oi-spin" data-icon="progress_activity" />
                 </div>
             </div>
             <div class="mt-3 d-flex">
diff --git a/addons/pos_loyalty/static/src/app/screens/product_screen/control_buttons/control_buttons.xml b/addons/pos_loyalty/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
index 1df14e1c70d68c..5aba8580c1464e 100644
--- a/addons/pos_loyalty/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
+++ b/addons/pos_loyalty/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
@@ -11,7 +11,7 @@
                 <button t-att-class="this.buttonClass"
                     t-on-click="this.onClickWallet"
                     t-attf-class="{{(_orderTotal lt 0 and _eWalletPrograms.length gte 1) or _eWalletRewards.length gte 1 ? 'highlight text-action': 'disabled'}}">
-                    <i class="fa fa-credit-card me-1" />
+                    <i class="oi me-1" data-icon="credit_card"/>
                     <t t-if="_orderTotal lt 0 and _eWalletPrograms.length">eWallet Refund</t>
                     <t t-elif="_eWalletRewards.length">eWallet Pay</t>
                     <t t-else="">eWallet</t>
@@ -20,7 +20,7 @@
             <t t-if="this.pos.models['loyalty.program'].some((p) => ['coupons', 'promotion', 'gift_card', 'promo_code', 'next_order_coupons'].includes(p.program_type))">
                 <button t-att-class="this.buttonClass"
                     t-on-click="() => this.clickPromoCode()">
-                    <i class="fa fa-barcode me-1"/>Enter Code
+                    <i class="oi me-1" data-icon="barcode"/>Enter Code
                 </button>
             </t>
             <t t-if="this.pos.models['loyalty.program'].length and this.pos.cashier._role !== 'minimal'">
@@ -28,7 +28,7 @@
                     t-att-class="this.buttonClass"
                     t-attf-class="{{this.state.nbrRewards ? 'highlight' : 'disabled'}}"
                     t-on-click="() => this.clickRewards()">
-                    <i class="fa fa-star me-1 text-favourite"/>Reward
+                    <i class="oi oi-filled me-1 text-favourite" data-icon="star"/>Reward
                 </button>
             </t>
         </xpath>
@@ -36,7 +36,7 @@
             <t t-if="this.pos.models['loyalty.program'].some((p) => ['coupons', 'promotion'].includes(p.program_type)) and this.pos.cashier._role !== 'minimal'">
                 <button class="btn btn-secondary btn-lg py-5" t-att-class="{'disabled': !this.pos.getOrder().isProgramsResettable()}"
                     t-on-click="() => this.pos.resetPrograms()">
-                    <i class="fa fa-star me-1"/>Reset Programs
+                    <i class="oi oi-filled me-1" data-icon="star"/>Reset Programs
                 </button>
             </t>
         </xpath>
diff --git a/addons/pos_loyalty/views/res_config_settings_view.xml b/addons/pos_loyalty/views/res_config_settings_view.xml
index 093e0b014dd3a7..cb71a39a4febf9 100644
--- a/addons/pos_loyalty/views/res_config_settings_view.xml
+++ b/addons/pos_loyalty/views/res_config_settings_view.xml
@@ -8,10 +8,10 @@
             <xpath expr="//setting[@id='pos-loyalty']" position="inside">
                 <div class="content-group" invisible="not module_loyalty">
                     <div class="mt8">
-                        <button name="%(loyalty.loyalty_program_discount_loyalty_action)d" icon="oi-arrow-right" type="action" string="Discount &amp; Loyalty" class="btn-link"/>
+                        <button name="%(loyalty.loyalty_program_discount_loyalty_action)d" icon="east" type="action" string="Discount &amp; Loyalty" class="btn-link"/>
                     </div>
                     <div class="mt8" id="button_loyalty_program" invisible="use_kiosk_mode">
-                        <button name="%(loyalty.loyalty_program_gift_ewallet_action)d" icon="oi-arrow-right" type="action" string="Gift cards &amp; eWallet" class="btn-link"/>
+                        <button name="%(loyalty.loyalty_program_gift_ewallet_action)d" icon="east" type="action" string="Gift cards &amp; eWallet" class="btn-link"/>
                     </div>
                 </div>
             </xpath>
diff --git a/addons/pos_online_payment/views/account_payment_views.xml b/addons/pos_online_payment/views/account_payment_views.xml
index c509faf851b70a..09128d8b0c7967 100644
--- a/addons/pos_online_payment/views/account_payment_views.xml
+++ b/addons/pos_online_payment/views/account_payment_views.xml
@@ -9,7 +9,7 @@
             <xpath expr="//div[@name='button_box']" position="inside">
                 <field name="pos_order_id" invisible="1"/>
                 <button name="action_view_pos_order" type="object"
-                        class="oe_stat_button" icon="fa-shopping-cart"
+                        class="oe_stat_button" icon="shopping_cart"
                         invisible="not pos_order_id">
                     <field name="pos_order_id" widget="statinfo" string="POS Order"/>
                 </button>
diff --git a/addons/pos_online_payment/views/payment_transaction_views.xml b/addons/pos_online_payment/views/payment_transaction_views.xml
index 5bf40e03356b7d..2f832a8831dd50 100644
--- a/addons/pos_online_payment/views/payment_transaction_views.xml
+++ b/addons/pos_online_payment/views/payment_transaction_views.xml
@@ -8,7 +8,7 @@
             <button name="action_view_refunds" position="before">
                 <field name="pos_order_id" invisible="1"/>
                 <button name="action_view_pos_order" type="object"
-                        class="oe_stat_button" icon="fa-shopping-cart"
+                        class="oe_stat_button" icon="shopping_cart"
                         invisible="not pos_order_id">
                     <field name="pos_order_id" widget="statinfo" string="POS Order"/>
                 </button>
diff --git a/addons/pos_online_payment/views/pos_payment_method_views.xml b/addons/pos_online_payment/views/pos_payment_method_views.xml
index d245c55eace03f..34849c565c5070 100644
--- a/addons/pos_online_payment/views/pos_payment_method_views.xml
+++ b/addons/pos_online_payment/views/pos_payment_method_views.xml
@@ -35,7 +35,7 @@
                     <div colspan="2">
                         <label for="online_payment_provider_ids"/>
                         <field name="online_payment_provider_ids" widget="many2many_tags" options="{'no_create': True}" placeholder="All available providers" />
-                        <button name="%(payment.action_payment_provider)d" icon="fa-arrow-right" type="action" string="Payment Providers" class="btn-link" />
+                        <button name="%(payment.action_payment_provider)d" icon="arrow_forward" type="action" string="Payment Providers" class="btn-link" />
                     </div>
                 </group>
             </xpath>
diff --git a/addons/pos_online_payment_self_order/views/res_config_settings_views.xml b/addons/pos_online_payment_self_order/views/res_config_settings_views.xml
index 99d4e6d38460d3..bd512c2217a56c 100644
--- a/addons/pos_online_payment_self_order/views/res_config_settings_views.xml
+++ b/addons/pos_online_payment_self_order/views/res_config_settings_views.xml
@@ -11,7 +11,7 @@
                     <field name="pos_self_order_online_payment_method_id" placeholder="Pay at cashier if empty" />
                 </div>
                 <div class="d-flex flex-column align-items-start w-50" invisible="not pos_self_ordering_mode == 'mobile' and not pos_self_ordering_pay_after == 'each'">
-                    <button name="%(point_of_sale.action_payment_methods_tree)d" icon="oi-arrow-right" type="action" string="Payment Methods" class="btn-link" />
+                    <button name="%(point_of_sale.action_payment_methods_tree)d" icon="east" type="action" string="Payment Methods" class="btn-link" />
                 </div>
             </xpath>
         </field>
diff --git a/addons/pos_restaurant/static/src/app/components/navbar/navbar.xml b/addons/pos_restaurant/static/src/app/components/navbar/navbar.xml
index ee721e9d4c7b9b..4551668fba35b9 100644
--- a/addons/pos_restaurant/static/src/app/components/navbar/navbar.xml
+++ b/addons/pos_restaurant/static/src/app/components/navbar/navbar.xml
@@ -4,14 +4,14 @@
        <xpath expr="//div[hasclass('pos-topheader')]" position="after">
            <FloorPlanEditorNavBar  t-if="floorPlanStore?.isEditToolbarVisible()"/>
        </xpath>
-        <xpath expr="//DropdownItem/i[hasclass('fa-chevron-left')]/.." position="before">
+        <xpath expr="//DropdownItem/i[@data-icon='chevron_left']/.." position="before">
             <t t-if="pos.router.state.current == 'FloorScreen' and ui.isSmall">
                 <DropdownItem t-if="showEditPlanButton and this.pos.config.floor_ids.length" onSelected="() => this.floorPlanStore.startEditMode()">
-                    <i class="fa fa-fw fa-pencil-square-o" aria-hidden="true" /> Edit Plan
+                    <i class="oi oi-fw" data-icon="edit_square" aria-hidden="true" /> Edit Plan
                 </DropdownItem>
             </t>
             <DropdownItem t-if="pos.router.state.current == 'FloorScreen'" onSelected="() => this.onSwitchButtonClick()">
-                <i class="fa fa-fw fa-eye" aria-hidden="true" /> Switch Floor View
+                <i class="oi oi-fw" data-icon="visibility" aria-hidden="true" /> Switch Floor View
             </DropdownItem>
         </xpath>
         <xpath expr="//div[hasclass('pos-leftheader')]//OrderTabs" position="attributes">
diff --git a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan/floor_plan.xml b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan/floor_plan.xml
index 6d2c448b912b3f..9723fea09caf97 100644
--- a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan/floor_plan.xml
+++ b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan/floor_plan.xml
@@ -6,7 +6,7 @@
                 <div  class="empty-floor d-flex align-items-center justify-content-center h-100" >
                     <div class="text-center">
                         <div class="fs-3 text-muted mb-3">No tables are available yet.</div>
-                        <div class="btn btn-secondary btn-lg" t-on-click="()=>this.floorPlanStore.startEditMode()"><i class="fa fa-fw fa-pencil-square-o me-1"/>Edit your floor plan</div>
+                        <div class="btn btn-secondary btn-lg" t-on-click="()=>this.floorPlanStore.startEditMode()"><i class="oi oi-fw me-1" data-icon="edit_square"/>Edit your floor plan</div>
                     </div>
                 </div>
             </t>
diff --git a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/add_decor_popup/add_decor_popup.xml b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/add_decor_popup/add_decor_popup.xml
index e3dddd709e33e2..7f8f69b2c17a04 100644
--- a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/add_decor_popup/add_decor_popup.xml
+++ b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/add_decor_popup/add_decor_popup.xml
@@ -84,7 +84,7 @@
                      </div>
                  </button>
                 <button class="btn btn-lg btn-link " t-on-click="()=>this.addImage()">
-                    <i class="fa fa-plus me-1"/>Add image
+                    <i class="oi me-1" data-icon="add"/>Add image
                 </button>
              </div>
 
diff --git a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/edit_decor/edit_decor.xml b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/edit_decor/edit_decor.xml
index 17eea121f2893e..39be2082b6abbc 100644
--- a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/edit_decor/edit_decor.xml
+++ b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/edit_decor/edit_decor.xml
@@ -162,19 +162,19 @@
         <div class="d-flex flex-wrap gap-2">
              <button class="btn btn-outline-secondary align-items-center"
                      t-on-click="() => this.moveLayer('bottom')" title="Send to back">
-                    <i class="fa fa-arrow-down" style="border-bottom: 2px solid; padding-bottom:1px; transform: scale(0.8);"/>
+                    <i class="oi" data-icon="arrow_downward" style="border-bottom: 2px solid; padding-bottom:1px; transform: scale(0.8);"/>
              </button>
              <button class="btn btn-outline-secondary"
                      t-on-click="() => this.moveLayer('down')" title="Send backward">
-                 <i class="fa fa-arrow-down"/>
+                 <i class="oi" data-icon="arrow_downward"/>
              </button>
              <button class="btn btn-outline-secondary"
                      t-on-click="() => this.moveLayer('up')" title="Bring forward">
-                 <i class="fa fa-arrow-up"/>
+                 <i class="oi" data-icon="arrow_upward"/>
              </button>
             <button class="btn btn-outline-secondary d-flex align-items-center"
                      t-on-click="() => this.moveLayer('top')" title="Send to front">
-                    <i class="fa fa-arrow-up" style="border-top: 2px solid; padding-top:1px; transform: scale(0.8);"/>
+                    <i class="oi" data-icon="arrow_upward" style="border-top: 2px solid; padding-top:1px; transform: scale(0.8);"/>
              </button>
         </div>
     </t>
@@ -209,17 +209,17 @@
             <button class="btn btn-outline-secondary"
                     t-att-class="{'active': this.element.fontWeight  === 'bold'  }"
                     t-on-click="() => this.toggleElementValue('fontWeight','bold')" title="Bold">
-                <i class="fa fa-bold fa-fw"/>
+                <i class="oi oi-fw" data-icon="format_bold"/>
             </button>
             <button class="btn btn-outline-secondary"
                     t-att-class="{'active': this.element.fontStyle  === 'italic'  }"
                     t-on-click="() => this.toggleElementValue('fontStyle','italic')" title="Italic">
-                <i class="fa fa-italic fa-fw"/>
+                <i class="oi oi-fw" data-icon="format_italic"/>
             </button>
             <button class="btn btn-outline-secondary"
                     t-att-class="{'active': this.element.textDecoration  === 'underline'  }"
                     t-on-click="() => this.toggleElementValue('textDecoration', 'underline')" title="Underline">
-                <i class="fa fa-underline fa-fw"/>
+                <i class="oi oi-fw" data-icon="format_underline"/>
             </button>
         </div>
 
@@ -228,17 +228,17 @@
             <button class="btn btn-outline-secondary"
                     t-att-class="{'active': this.element.textAlign  === 'left'  }"
                     t-on-click="() => this.updateElement({textAlign:'left'})">
-                <i class="fa fa-align-left fa-fw"/>
+                <i class="oi oi-fw" data-icon="format_align_left"/>
             </button>
             <button class="btn btn-outline-secondary"
                     t-att-class="{'active': this.element.textAlign  === 'center'  }"
                     t-on-click="() => this.updateElement({textAlign:'center'})">
-                <i class="fa fa-align-center fa-fw"/>
+                <i class="oi oi-fw" data-icon="format_align_center"/>
             </button>
             <button class="btn btn-outline-secondary"
                     t-att-class="{'active': this.element.textAlign  === 'right'  }"
                     t-on-click="() => this.updateElement({textAlign:'right'})">
-                <i class="fa fa-align-right fa-fw"/>
+                <i class="oi oi-fw" data-icon="format_align_right"/>
             </button>
         </div>
     </t>
diff --git a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/edit_table/edit_table.xml b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/edit_table/edit_table.xml
index d359f27c1eeca9..545d189dcfa906 100644
--- a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/edit_table/edit_table.xml
+++ b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/edit_table/edit_table.xml
@@ -5,9 +5,9 @@
         <input type="number" class="form-control form-control-lg" t-att-value="this.table.tableNumber" inputmode="numeric" pattern="[0-9]+" t-on-input="this.updateTableNumber"/>
         <div class="fs-4 fw-bold mb-2 mt-3">Number of Seats</div>
         <div class="d-flex align-items-center">
-            <button class="button btn btn-secondary py-2" t-att-class="{'disabled': this.table.seats === 0}" t-on-click="()=>this.incrNumberOfSeats(-1)"><i class="fa fa-minus fa-fw"/></button>
+            <button class="button btn btn-secondary py-2" t-att-class="{'disabled': this.table.seats === 0}" t-on-click="()=>this.incrNumberOfSeats(-1)"><i class="oi oi-fw" data-icon="remove"/></button>
             <span class="fs-4 mx-3 text-center" style="font-variant-numeric:tabular-nums;min-width: 2ch;" t-out="this.table.seats"/>
-            <button class="button btn btn-secondary py-2" t-on-click="()=>this.incrNumberOfSeats(1)" ><i class="fa fa-plus fa-fw"/></button>
+            <button class="button btn btn-secondary py-2" t-on-click="()=>this.incrNumberOfSeats(1)" ><i class="oi oi-fw" data-icon="add"/></button>
         </div>
 
         <div class="fs-4 fw-bold mb-2 mt-3">Color</div>
diff --git a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/floor_plan_editor.xml b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/floor_plan_editor.xml
index d337ad2e9a98b1..1ae8306c3ec663 100644
--- a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/floor_plan_editor.xml
+++ b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/floor_plan_editor.xml
@@ -15,9 +15,9 @@
               </div>
 
              <div t-custom-ref="actionMenu" class="o_fp_action_menu">
-                <button class="btn btn-secondary o_edit" title="Properties" t-if="this.selectedElement?.isEditable()" t-att-class="{'active':this.floorPlanStore.elementEditMode}" t-on-click="this.editSelected"><i class="fa fa-fw fa-pencil"/></button>
-                <button class="btn btn-secondary o_duplicate" title="Duplicate" t-on-click="this.duplicateSelected"><i class="fa fa-fw fa-copy"/></button>
-                <button class="btn btn-secondary o_delete" title="Delete" t-on-click="this.deleteSelected"><i class="fa fa-fw fa-trash "/></button>
+                <button class="btn btn-secondary o_edit" title="Properties" t-if="this.selectedElement?.isEditable()" t-att-class="{'active':this.floorPlanStore.elementEditMode}" t-on-click="this.editSelected"><i class="oi oi-fw oi-filled" data-icon="edit"/></button>
+                <button class="btn btn-secondary o_duplicate" title="Duplicate" t-on-click="this.duplicateSelected"><i class="oi oi-fw" data-icon="content_copy"/></button>
+                <button class="btn btn-secondary o_delete" title="Delete" t-on-click="this.deleteSelected"><i class="oi oi-fw oi-filled" data-icon="delete"/></button>
             </div>
         </div>
         <div class="o_fp_edit_menu position-absolute top-0 end-0 bottom-0 bg-view" t-att-class="{'visible': this.floorPlanStore.elementEditMode or this.floorPlanStore.floorEditMode}">
diff --git a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/handles/handles.xml b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/handles/handles.xml
index 1fa0506601c0c2..fc7035f5513305 100644
--- a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/handles/handles.xml
+++ b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/handles/handles.xml
@@ -32,7 +32,7 @@
 
             <div class="o_fp_rotation_handle" t-att-data-position-override="this.state.rotationHandlePosition">
                 <div class="o_fp_rotation_handle_inner">
-                   <div class="o_fp_handle_indicator" t-on-mousedown.stop="this.startRotate" t-on-touchstart.stop="this.startRotate"><i class="fa fa-refresh"/></div>
+                   <div class="o_fp_handle_indicator" t-on-mousedown.stop="this.startRotate" t-on-touchstart.stop="this.startRotate"><i class="oi" data-icon="refresh"/></div>
                 </div>
             </div>
         </div>
diff --git a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/navbar/navbar.xml b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/navbar/navbar.xml
index 144e5b92281f51..fed645f738435d 100644
--- a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/navbar/navbar.xml
+++ b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/navbar/navbar.xml
@@ -9,21 +9,21 @@
                 <div class="me-3 d-flex">
                     <button class="btn btn-lg lh-lg btn px-2" t-on-click="()=>this.floorPlanStore.undo()"
                             t-att-class="{'disabled': !this.floorPlanStore.canUndo()}">
-                        <i class="fa fa-fw fa-undo"/>
+                        <i class="oi oi-fw" data-icon="undo"/>
                     </button>
                     <button class="btn btn-lg lh-lg btn px-2" t-on-click="()=>this.floorPlanStore.redo()"
                             t-att-class="{'disabled': !this.floorPlanStore.canRedo()}">
-                        <i class="fa fa-fw fa-repeat"/>
+                        <i class="oi oi-fw" data-icon="redo"/>
                     </button>
                 </div>
                 <button class="btn btn-outline-secondary btn-lg lh-lg" t-on-click="this.onDiscardChanges"
                         title="Discard all changes">
                     <span class="d-none d-sm-inline">Discard</span>
-                    <i class="fa fa-times fa-fw d-sm-none"/>
+                    <i class="oi oi-fw d-sm-none" data-icon="close"/>
                 </button>
                 <button class="btn btn-primary btn-lg lh-lg" t-on-click="this.onSave" title="Save">
                     <span class="d-none d-sm-inline">Save</span>
-                    <i class="fa fa-cloud-upload fa-fw d-sm-none"/>
+                    <i class="oi oi-fw d-sm-none" data-icon="cloud_upload"/>
                 </button>
             </div>
         </div>
diff --git a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/toolbar/toolbar.xml b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/toolbar/toolbar.xml
index 5ebce10bc7a883..85b3008df40173 100644
--- a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/toolbar/toolbar.xml
+++ b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_plan_editor/toolbar/toolbar.xml
@@ -12,7 +12,7 @@
                             <t t-foreach="this.floorStore.floors" t-as="floor" t-key="floor.uuid">
                                 <DropdownItem class="{'toolbar-floor-selector-item btn btn-lg ps-2 py-2':true}"
                                               onSelected="()=>this.selectFloor(floor.uuid)">
-                                    <i class="fa fa-fw fa-check me-1 fs-5" style="color:var(--success)"
+                                    <i class="oi oi-fw me-1 fs-5" data-icon="check" style="color:var(--success)"
                                        t-attf-class="{{floor === this.floorStore.selectedFloor ? 'visible' : 'invisible' }}"/>
                                     <span t-out="floor.name"/>
                                 </DropdownItem>
@@ -20,7 +20,7 @@
                             <div class="dropdown-divider mx-1 my-1"/>
                         </t>
                         <DropdownItem class="{'toolbar-floor-selector-item btn btn-lg ps-2 py-2':true}" onSelected="()=>this.addFloor()">
-                            <i class="fa fa-fw fa-plus me-1 fs-5"/>Add Floor
+                            <i class="oi oi-fw me-1 fs-5" data-icon="add"/>Add Floor
                         </DropdownItem>
                     </t>
                 </Dropdown>
@@ -28,7 +28,7 @@
             <div class="d-flex  gap-3">
                 <button t-on-click="this.addTable" class="btn btn-outline-secondary btn-lg" title="Add Table">
                     <span class="text-nowrap d-none d-sm-inline ">Add Table</span>
-                    <i class="fa fa-fw fa-plus d-sm-none "/>
+                    <i class="oi oi-fw d-sm-none" data-icon="add"/>
                 </button>
                 <button t-on-click="this.addDecor" class="d-none d-sm-block btn btn-outline-secondary btn-lg">
                     <span class="text-nowrap">Add Decor</span>
@@ -36,7 +36,7 @@
                 <Dropdown menuClass="'py-1'">
                     <button class="d-flex d-sm-none o-dropdown dropdown-toggle dropdown btn btn-lg btn-outline-secondary align-items-center"
                             title="More">
-                        <i class="oi oi-fw oi-ellipsis-v"/>
+                        <i class="oi oi-fw" data-icon="more_vert"/>
                     </button>
                     <t t-set-slot="content">
                         <DropdownItem onSelected="()=>this.addDecor()" class="'py-2'">Add decor</DropdownItem>
@@ -47,7 +47,7 @@
             <div class="d-none d-sm-flex flex-fill justify-content-end ">
                 <button class="btn btn-secondary  btn-lg  d-flex align-items-center" title="Edit Floor"
                         t-on-click="this.editFloor">
-                    <i class="fa fa-fw fa-pencil "/>
+                    <i class="oi oi-fw oi-filled" data-icon="edit"/>
                 </button>
             </div>
         </div>
diff --git a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_screen.xml b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_screen.xml
index 2ed41ab3e1a754..9a64613130c00d 100644
--- a/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_screen.xml
+++ b/addons/pos_restaurant/static/src/app/screens/floor_screen/floor_screen.xml
@@ -7,11 +7,11 @@
                     <button class="new-order btn btn-lg lh-lg" t-attf-class="{{ this.pos.getOrder()?.isDirectSale ? 'btn-secondary' : 'btn-primary'}}"
                             t-on-click="() => this.clickNewOrder()">
                         <t t-if="this.pos.getOrder()?.isDirectSale">
-                            <i class="fa fa-angle-double-left fa-fw" role="img" aria-label="Back" title="Back"/>
+                            <i class="oi oi-fw" data-icon="keyboard_double_arrow_left" role="img" aria-label="Back" title="Back"/>
                             <span t-if="!this.ui.isSmall" class="ms-1">Back</span>
                         </t>
                         <t t-else="">
-                            <i class="fa fa-plus fa-fw" role="img" aria-label="New Order" title="New Order"/>
+                            <i class="oi oi-fw" data-icon="add" role="img" aria-label="New Order" title="New Order"/>
                             <span t-if="!this.ui.isSmall" class="ms-1">New Order</span>
                         </t>
                     </button>
@@ -30,10 +30,10 @@
                     <!-- Right Side Div -->
                     <div class="right-buttons d-flex gap-1 pe-0">
                          <button t-if="this.pos.showEditPlanButton and !this.ui.isSmall" class="btn btn-secondary btn-lg lh-lg edit-plan" title="Edit Floor Plan" t-on-click="()=>this.startFloorPlanEditing()">
-                             <i class="fa fa-fw fa-pencil-square-o"/>
+                             <i class="oi oi-fw" data-icon="edit_square"/>
                          </button>
                         <button class="button-table-selector btn btn-secondary btn-lg lh-lg" t-on-click="() => this.toggleTableSelector()">
-                            <i class="fa fa-fw fa-hashtag" aria-hidden="true"/>
+                            <i class="oi oi-fw" data-icon="tag" aria-hidden="true"/>
                         </button>
 
                     </div>
diff --git a/addons/pos_restaurant/static/src/app/screens/product_screen/control_buttons/control_buttons.xml b/addons/pos_restaurant/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
index 28a259a8ae992b..d3b6de4e6b3738 100644
--- a/addons/pos_restaurant/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
+++ b/addons/pos_restaurant/static/src/app/screens/product_screen/control_buttons/control_buttons.xml
@@ -23,16 +23,16 @@
                 <button t-att-class="this.buttonClass"
                     t-att-disabled="this.pos.getOrder()?.getOrderlines()?.reduce((sum, line) => sum + line.qty, 0) lt 2"
                     t-on-click="this.openSplitPage">
-                    <i class="fa fa-files-o me-1"/>Split
+                    <i class="oi me-1" data-icon="content_copy"/>Split
                 </button>
                 <button t-att-class="this.buttonClass" t-on-click.stop="() => this.clickTransferOrder()">
-                    <i class="oi oi-arrow-right me-1" />Transfer / Merge
+                    <i class="oi me-1" data-icon="east" />Transfer / Merge
                 </button>
                    <button t-att-disabled="!this.showTransferCourse()" t-att-class="this.buttonClass" t-on-click.stop="() => this.clickTransferCourse()">
-                    <i class="oi oi-arrow-down me-1" />Transfer course
+                    <i class="oi me-1" data-icon="south" />Transfer course
                 </button>
                 <button t-if="!this.pos.getOrder()?.table_id" t-att-class="this.buttonClass" t-on-click="() => this.pos.editFloatingOrderName(this.pos.getOrder())">
-                    <i class="fa fa-pencil-square-o me-1" />Set Order Name
+                    <i class="oi me-1" data-icon="edit_square"/>Set Order Name
                 </button>
             </t>
         </xpath>
diff --git a/addons/pos_restaurant/static/src/app/screens/product_screen/product_screen.xml b/addons/pos_restaurant/static/src/app/screens/product_screen/product_screen.xml
index e8257d38b5b1ee..0c1eede61d91f4 100644
--- a/addons/pos_restaurant/static/src/app/screens/product_screen/product_screen.xml
+++ b/addons/pos_restaurant/static/src/app/screens/product_screen/product_screen.xml
@@ -27,7 +27,7 @@
                             t-on-click="() => this.doReprintOrder.call()"
                             t-elif="this.pos.ticketPrinter.hasPreparationPrinters and this.currentOrder.uiState.lastPrints.length"
                             t-att-disabled="this.doReprintOrder.status === 'loading'">
-                        <i class="fa fa-cutlery" aria-hidden="true"></i>
+                        <i class="oi" data-icon="restaurant" aria-hidden="true"></i>
                     </button>
                     <button
                         class="btn-switchpane new-button btn btn-lg flex-grow-1 lh-sm btn-secondary"
diff --git a/addons/pos_restaurant/static/src/app/screens/split_bill_screen/split_bill_screen.xml b/addons/pos_restaurant/static/src/app/screens/split_bill_screen/split_bill_screen.xml
index 5b22c6a0ed1413..2073db066e730e 100644
--- a/addons/pos_restaurant/static/src/app/screens/split_bill_screen/split_bill_screen.xml
+++ b/addons/pos_restaurant/static/src/app/screens/split_bill_screen/split_bill_screen.xml
@@ -6,7 +6,7 @@
             <div class="contents d-flex flex-column flex-nowrap h-100 my-0 mx-auto">
                 <div class="top-content d-flex align-items-center p-2 border-bottom text-center bg-view position-relative">
                     <button class="button back back-button btn btn-secondary lh-lg" t-on-click="this.back">
-                        <i class="oi oi-chevron-left fa-fw"/><t t-if="!this.ui.isSmall" t-out="' Back'"/>
+                        <i class="oi oi-fw" data-icon="chevron_backward"/><t t-if="!this.ui.isSmall" t-out="' Back'"/>
                     </button>
                     <div class="top-content-center position-absolute start-50 translate-middle-x">
                         <h2 class="mb-0">Bill Splitting</h2>
diff --git a/addons/pos_restaurant/static/tests/tours/utils/floor_screen_util.js b/addons/pos_restaurant/static/tests/tours/utils/floor_screen_util.js
index 5610b5191fa7c7..e859c5bf5f9823 100644
--- a/addons/pos_restaurant/static/tests/tours/utils/floor_screen_util.js
+++ b/addons/pos_restaurant/static/tests/tours/utils/floor_screen_util.js
@@ -150,7 +150,7 @@ export function clickTableSelectorButton() {
     return [
         {
             content: "click on table selector button",
-            trigger: ".floor-screen .right-buttons button i.fa-hashtag",
+            trigger: ".floor-screen .right-buttons button i[data-icon='tag']",
             run: "click",
         },
     ];
diff --git a/addons/pos_restaurant/views/res_config_settings_views.xml b/addons/pos_restaurant/views/res_config_settings_views.xml
index e5ffbc0f46e865..fa55c0bf17dbaf 100644
--- a/addons/pos_restaurant/views/res_config_settings_views.xml
+++ b/addons/pos_restaurant/views/res_config_settings_views.xml
@@ -14,7 +14,7 @@
                             <field name="pos_floor_ids" widget="many2many_tags" readonly="pos_has_active_session" />
                         </div>
                         <div>
-                            <button name="%(pos_restaurant.action_restaurant_floor_form)d" icon="oi-arrow-right" type="action" string="Floors" class="btn-link"/>
+                            <button name="%(pos_restaurant.action_restaurant_floor_form)d" icon="east" type="action" string="Floors" class="btn-link"/>
                         </div>
                     </div>
                 </setting>
diff --git a/addons/pos_safaricom/static/src/app/components/popups/mpesa_transaction_popup.xml b/addons/pos_safaricom/static/src/app/components/popups/mpesa_transaction_popup.xml
index a1badf834c3789..1b992c315c4fe1 100644
--- a/addons/pos_safaricom/static/src/app/components/popups/mpesa_transaction_popup.xml
+++ b/addons/pos_safaricom/static/src/app/components/popups/mpesa_transaction_popup.xml
@@ -19,7 +19,7 @@
                     <Input
                         tModel="[this.state, 'searchQuery']"
                         placeholder="this.Search this.by this.name or this.phone..."
-                        icon="{ type: 'fa', value: 'fa-search' }"
+                        icon="{ type: 'icon', value: 'search' }"
                         class="'w-100'"
                     />
                 </div>
@@ -58,7 +58,7 @@
                     </button>
                     <button class="btn btn-secondary" t-on-click="this.cancel">Cancel</button>
                     <button class="btn btn-secondary ms-auto" t-on-click="this.toggleQrCode">
-                        <i class="fa fa-qrcode"/>
+                        <i class="oi" data-icon="qr_code"/>
                     </button>
                 </div>
             </div>
diff --git a/addons/pos_safaricom/views/pos_payment_method_views.xml b/addons/pos_safaricom/views/pos_payment_method_views.xml
index 95efb74940c4c2..6c084aa194a203 100644
--- a/addons/pos_safaricom/views/pos_payment_method_views.xml
+++ b/addons/pos_safaricom/views/pos_payment_method_views.xml
@@ -29,7 +29,7 @@
                                         string="Register URLs"
                                         type="object"
                                         class="btn-secondary"
-                                        icon="fa-refresh"
+                                        icon="refresh"
                                         invisible="id == False"
                                         help="Register or re-register C2B callback URLs with Safaricom"/>
                         </group>
diff --git a/addons/pos_sale/static/src/app/components/orderline/orderline.xml b/addons/pos_sale/static/src/app/components/orderline/orderline.xml
index 0466ba1a78e249..41c4b903f6e5a2 100644
--- a/addons/pos_sale/static/src/app/components/orderline/orderline.xml
+++ b/addons/pos_sale/static/src/app/components/orderline/orderline.xml
@@ -4,7 +4,7 @@
         <xpath expr="//ul[hasclass('info-list')]" position="inside" >
             <t t-if="this.line.sale_order_origin_id?.name">
                 <li>
-                    <i class="fa fa-shopping-basket me-1" role="img" aria-label="SO" title="SO"/>
+                    <i class="oi me-1" data-icon="shopping_basket" role="img" aria-label="SO" title="SO"/>
                     <t t-out="this.line.sale_order_origin_id?.name" />
                 </li>
                 <table t-if="this.line.saleDetails" class="sale-order-info">
diff --git a/addons/pos_sale/static/src/app/components/screens/product_screen/control_buttons/control_buttons.xml b/addons/pos_sale/static/src/app/components/screens/product_screen/control_buttons/control_buttons.xml
index b9ff685c0035f2..b6f72b79a1ea45 100644
--- a/addons/pos_sale/static/src/app/components/screens/product_screen/control_buttons/control_buttons.xml
+++ b/addons/pos_sale/static/src/app/components/screens/product_screen/control_buttons/control_buttons.xml
@@ -5,7 +5,7 @@
             expr="//t[@t-if='this.props.showRemainingButtons']/div/button[hasclass('o_pricelist_button')]"
             position="before">
             <button t-if="this.pos.cashier._role != 'minimal'" t-att-class="this.buttonClass" t-on-click="() => this.onClickQuotation()">
-                <i class="fa fa-link me-1" role="img" aria-label="Set Sale Order" title="Set Sale Order" /> Quotation/Order
+                <i class="oi me-1" data-icon="link" role="img" aria-label="Set Sale Order" title="Set Sale Order" /> Quotation/Order
             </button>
         </xpath>
     </t>
diff --git a/addons/pos_sale/views/pos_order_views.xml b/addons/pos_sale/views/pos_order_views.xml
index e27a5c51aac3a6..21fbac09e776e0 100644
--- a/addons/pos_sale/views/pos_order_views.xml
+++ b/addons/pos_sale/views/pos_order_views.xml
@@ -10,7 +10,7 @@
                     <button type="object"
                         name="action_view_sale_order"
                         class="oe_stat_button"
-                        icon="fa-shopping-basket"
+                        icon="shopping_basket"
                         invisible="sale_order_count == 0" groups="sales_team.group_sale_salesman">
                         <div class="o_field_widget o_stat_info">
                             <span class="o_stat_value d-flex">
diff --git a/addons/pos_sale/views/sale_order_views.xml b/addons/pos_sale/views/sale_order_views.xml
index f38168526573d7..6d71ca94241791 100644
--- a/addons/pos_sale/views/sale_order_views.xml
+++ b/addons/pos_sale/views/sale_order_views.xml
@@ -11,7 +11,7 @@
                     type="object"
                     name="action_view_pos_order"
                     class="oe_stat_button"
-                    icon="fa-shopping-basket"
+                    icon="shopping_basket"
                     invisible="pos_order_count == 0" groups="point_of_sale.group_pos_user"
                 >
                     <div class="o_field_widget o_stat_info">
diff --git a/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.xml b/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.xml
index be8e9a7ceb5719..1a9b19cbb092ce 100644
--- a/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.xml
+++ b/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.xml
@@ -7,7 +7,7 @@
                     <div class="modal-content">
                         <div class="modal-body p-4 overflow-visible">
                             <div class="position-absolute top-0 start-50 translate-middle px-4 py-3 rounded-4 text-bg-warning border border-white border-5">
-                                <i class="fa fa-exclamation-triangle" aria-hidden="true"/>
+                                <i class="oi" data-icon="warning" aria-hidden="true"/>
                             </div>
                             <div class="mt-4 pb-4 mt-lg-5 pb-lg-5 text-center fs-2">
                                 Are you sure you want to cancel this order?
diff --git a/addons/pos_self_order/static/src/app/components/missing_required_details/missing_required_details.xml b/addons/pos_self_order/static/src/app/components/missing_required_details/missing_required_details.xml
index 3b8a52d08e7868..34e796563f8056 100644
--- a/addons/pos_self_order/static/src/app/components/missing_required_details/missing_required_details.xml
+++ b/addons/pos_self_order/static/src/app/components/missing_required_details/missing_required_details.xml
@@ -3,7 +3,7 @@
     <t t-name="pos_self_order.MissingRequiredDetails">
         <div class="missing_required_details d-flex flex-column align-items-center p-3">
             <button class="btn btn-primary mb-2 rounded-circle d-flex align-items-center justify-content-center" t-on-click="this.scrollUpToRequired" style="width:60px; height: 60px;">
-                <i class="fa fa-fw fa-arrow-up" aria-hidden="true"/>
+                <i class="oi oi-fw" data-icon="arrow_upward" aria-hidden="true"/>
             </button>
             <h2 class="mb-3" t-on-click="this.scrollUpToRequired">See what you missed</h2>
             <p class="text-center">Make sure you choose all your options for this item. You're alomost there.</p>
diff --git a/addons/pos_self_order/static/src/app/components/network_connectionLost_popup/network_connectionLost_popup.xml b/addons/pos_self_order/static/src/app/components/network_connectionLost_popup/network_connectionLost_popup.xml
index 800f51e465e7f4..85e49a9e8ed93e 100644
--- a/addons/pos_self_order/static/src/app/components/network_connectionLost_popup/network_connectionLost_popup.xml
+++ b/addons/pos_self_order/static/src/app/components/network_connectionLost_popup/network_connectionLost_popup.xml
@@ -8,7 +8,7 @@
                         <div class="modal-body p-4 overflow-visible">
                             <div class="position-absolute top-0 start-50 translate-middle px-4 py-3 rounded-4 border border-white border-5"
                                 t-att-class="this.state.online ? 'text-bg-success' : 'text-bg-danger'">
-                                <i t-att-class="this.state.online ? 'fa fa-check-circle' : 'fa fa-wifi'" aria-hidden="true"/>
+                                <i class="oi" t-att-class="{'oi-filled': this.state.online}" t-att-data-icon="this.state.online ? 'check_circle' : 'wifi'" aria-hidden="true"/>
                             </div>
                             <div class="mt-4 text-center">
                                 <h1>
@@ -25,9 +25,9 @@
                                 </span>
                                 <div class="display-6 my-3 pb-3 fw-bold text-center"
                                     t-att-class="this.state.online ? 'text-success' : 'text-danger'">
-                                    <t t-if="this.state.online"><i class="fa fa-check-circle"/> Online</t>
+                                    <t t-if="this.state.online"><i class="oi oi-filled" data-icon="check_circle"/> Online</t>
                                     <t t-elif="this.state.retrying">
-                                        <i class="fa fa-spinner fa-spin"></i> Retrying...
+                                        <i class="oi oi-spin" data-icon="progress_activity"></i> Retrying...
                                     </t>
                                     <t t-else="">
                                         <t t-out="this.getRetryText(this.state.time)"/>
diff --git a/addons/pos_self_order/static/src/app/components/order_widget/order_widget.js b/addons/pos_self_order/static/src/app/components/order_widget/order_widget.js
index 0ed6db0d572a51..b2cf03c7af39f1 100644
--- a/addons/pos_self_order/static/src/app/components/order_widget/order_widget.js
+++ b/addons/pos_self_order/static/src/app/components/order_widget/order_widget.js
@@ -75,7 +75,8 @@ export class OrderWidget extends Component {
         const back = this.shouldGoBack();
         return {
             name: back ? _t("Back") : _t("Discard"),
-            icon: back ? "oi oi-chevron-left btn-back" : "btn-close btn-cancel",
+            iconClasses: back ? "btn-back" : "btn-cancel",
+            icon: back ? "chevron_backward" : "close",
         };
     }
 
diff --git a/addons/pos_self_order/static/src/app/components/order_widget/order_widget.xml b/addons/pos_self_order/static/src/app/components/order_widget/order_widget.xml
index 959d7db5394b27..281e3671e78794 100644
--- a/addons/pos_self_order/static/src/app/components/order_widget/order_widget.xml
+++ b/addons/pos_self_order/static/src/app/components/order_widget/order_widget.xml
@@ -8,7 +8,7 @@
 
             }">
             <div class="o_self_footer container o_self_container px-kiosk-p-4 d-flex flex-nowrap py-3">
-                <button t-attf-class="btn btn-secondary btn-lg h-auto w-auto opacity-75 py-2 px-3 d-sm-none" t-att-class="this.leftButton.icon" t-on-click="this.onClickleftButton" />
+                <button t-attf-class="btn btn-secondary btn-lg oi h-auto w-auto opacity-75 py-2 px-3 d-sm-none" t-att-class="this.leftButton.iconClasses" t-att-data-icon="this.leftButton.icon" t-on-click="this.onClickleftButton" />
                 <button t-attf-class="btn btn-secondary btn-lg d-none d-sm-inline text-nowrap btn-back btn-cancel" t-on-click="this.onClickleftButton" t-out="this.leftButton.name" />
                 <div class="d-flex flex-nowrap ms-2 ms-sm-4 w-100 justify-content-end">
                     <div class="d-flex align-items-center flex-shrink-0 me-2 me-sm-4" >
diff --git a/addons/pos_self_order/static/src/app/components/printing_failure_popup/printing_failure_popup.xml b/addons/pos_self_order/static/src/app/components/printing_failure_popup/printing_failure_popup.xml
index 855fb4835636a8..750551d20ec763 100644
--- a/addons/pos_self_order/static/src/app/components/printing_failure_popup/printing_failure_popup.xml
+++ b/addons/pos_self_order/static/src/app/components/printing_failure_popup/printing_failure_popup.xml
@@ -7,7 +7,7 @@
                     <div class="modal-content">
                         <div class="modal-body p-4 overflow-visible">
                             <div class="position-absolute top-0 start-50 translate-middle px-4 py-3 rounded-4 text-bg-danger border border-white border-5">
-                                <i class="fa fa-print" aria-hidden="true"/>
+                                <i class="oi" data-icon="print" aria-hidden="true"/>
                             </div>
                             <div>
                                 <h1 class="pt-2 text-center"><t t-out="this.props.title"/></h1>
diff --git a/addons/pos_self_order/static/src/app/components/product_name_widget/product_name_widget.xml b/addons/pos_self_order/static/src/app/components/product_name_widget/product_name_widget.xml
index 93d62701091145..e9dd683b9786dd 100644
--- a/addons/pos_self_order/static/src/app/components/product_name_widget/product_name_widget.xml
+++ b/addons/pos_self_order/static/src/app/components/product_name_widget/product_name_widget.xml
@@ -7,7 +7,7 @@
            <div t-if="product.public_description or product.product_tag_ids.length > 0"
                 class="product_info_icon d-inline-flex justify-content-center align-items-center border border-dark rounded-circle text-center"
                 t-on-click.stop="()=>this.displayProductInfo()">
-               <i class="fa fa-info "/>
+               <i class="oi" data-icon="info"/>
            </div>
        </div>
     </t>
diff --git a/addons/pos_self_order/static/src/app/components/quantity_widget/quantity_widget.xml b/addons/pos_self_order/static/src/app/components/quantity_widget/quantity_widget.xml
index 65198162452c60..5aae7a222bf17b 100644
--- a/addons/pos_self_order/static/src/app/components/quantity_widget/quantity_widget.xml
+++ b/addons/pos_self_order/static/src/app/components/quantity_widget/quantity_widget.xml
@@ -5,13 +5,13 @@
             <button type="button"
                     t-on-click="() => this.changeQuantity(false)"
                     t-attf-class="{{ this.state.qty &gt; 1 ? '' : 'disabled' }} btn btn-light border">
-                    <i class="oi oi-minus fa-fw"/>
+                    <i class="oi oi-fw" data-icon="remove"/>
             </button>
             <div class="o-so-tabular-nums py-2 m-0 px-4 h-100 border-top border-bottom text-bg-light fs-3 fw-bold" t-out="this.state.qty"/>
             <button type="button"
                     t-on-click="() => this.changeQuantity(true)"
                     class="btn btn-light border">
-                    <i class="oi oi-plus fa-fw"/>
+                    <i class="oi oi-fw" data-icon="add"/>
             </button>
         </div>
     </t>
diff --git a/addons/pos_self_order/static/src/app/components/timeout_popup/timeout_popup.xml b/addons/pos_self_order/static/src/app/components/timeout_popup/timeout_popup.xml
index 7aa3259647ac8e..0951c4395d9661 100644
--- a/addons/pos_self_order/static/src/app/components/timeout_popup/timeout_popup.xml
+++ b/addons/pos_self_order/static/src/app/components/timeout_popup/timeout_popup.xml
@@ -7,7 +7,7 @@
                     <div class="modal-content">
                         <div class="modal-body p-4 overflow-visible">
                             <div class="position-absolute top-0 start-50 translate-middle px-4 py-3 rounded-4 text-bg-warning border border-white border-5">
-                                <i class="fa fa-exclamation-triangle" aria-hidden="true"/>
+                                <i class="oi" data-icon="warning" aria-hidden="true"/>
                             </div>
                             <div class="mt-4 text-center">
                                 <h1>Session Inactive</h1>
diff --git a/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.xml b/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.xml
index 9b546c2ef84e4b..4a525450bbc4b2 100644
--- a/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.xml
@@ -49,17 +49,17 @@
                                                     t-if="this.canDeleteLine(line) &amp;&amp; this.getLineChangeQty(line) > 1"
                                                     type="button"
                                                     t-on-click="() => this.changeQuantity(line, false)"
-                                                    class="btn btn-secondary py-1 px-2"><i class="oi oi-minus fa-fw"/></button>
+                                                    class="btn btn-secondary py-1 px-2"><i class="oi oi-fw" data-icon="remove"/></button>
                                             <button
                                                     t-else=""
                                                     type="button"
                                                     t-on-click="(e) => this.removeLine(line,e)"
-                                                    class="btn btn-secondary py-1 px-2"><i class="fa fa-trash-o fa-fw"/></button>
+                                                    class="btn btn-secondary py-1 px-2"><i class="oi oi-fw" data-icon="delete"/></button>
                                             <div class="o-so-tabular-nums fs-4 d-flex align-items-center m-0 px-4 py-2 text-bg-secondary fw-bolder" t-out="this.getLineChangeQty(line)"/>
                                             <button type="button"
                                                     t-on-click="() => this.changeQuantity(line, true)"
                                                     class="btn btn-secondary py-1 px-2"
-                                                    ><i class="oi oi-plus fa-fw"/></button>
+                                                    ><i class="oi oi-fw" data-icon="add"/></button>
                                         </div>
                                         <div t-else=""/>
                                         <div class="fs-4 fw-bold line-price mb-0 o-so-tabular-nums fw-bold text-primary" t-out="this.selfOrder.formatMonetary(this.getPrice(line))"/>
@@ -74,13 +74,13 @@
                     <div class="d-flex justify-content-between order-note"
                         t-on-click="() => (display_change_quantity and (this.state.showOrderNote = !this.state.showOrderNote))">
                         <div class="d-flex align-items-center">
-                            <i class="fa fa-pencil-square-o p-1"/>
+                            <i class="oi p-1" data-icon="edit_square"/>
                             <span class="fw-bolder" style="font-size: 1.1rem;">
                                 <t t-out="display_change_quantity ? 'Add a note' : 'Note'"/>
                             </span>
                         </div>
                         <div t-if="display_change_quantity" class="py-1 px-2">
-                            <i t-attf-class="fa {{ this.state.showOrderNote ? 'fa-chevron-up' : 'fa-chevron-down' }}"/>
+                            <i class="oi" t-att-data-icon="this.state.showOrderNote ? 'expand_less' : 'expand_more'"/>
                         </div>
                     </div>
                     <t t-if="this.state.showOrderNote">
diff --git a/addons/pos_self_order/static/src/app/pages/combo_page/combo_page.xml b/addons/pos_self_order/static/src/app/pages/combo_page/combo_page.xml
index f39b668a1fb585..45cb6edce0237d 100644
--- a/addons/pos_self_order/static/src/app/pages/combo_page/combo_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/combo_page/combo_page.xml
@@ -8,7 +8,7 @@
             <div class="o_self_combo_page_header text-bg-primary"  t-att-class="{'o_self_shadow_top': this.scrollShadow.top}">
                 <div class="container o_self_container py-3 d-flex align-items-center position-relative" >
                     <button class="btn btn-link btn-lg d-inline-flex align-items-center gap-2 p-0" t-on-click="() => this.goBack()">
-                        <i class="oi oi-close fa-fw" aria-hidden="true"/>
+                        <i class="oi oi-fw" data-icon="close_small" aria-hidden="true"/>
                         <span  t-att-class="{'invisible': this.state.showStickyTitle}">Discard</span>
                     </button>
                     <h2 class="o_self_combo_name position-absolute mb-0 text-truncate text-center" t-att-class="{'d-none': !this.state.showStickyTitle}"   >
@@ -81,12 +81,12 @@
                                                 <div t-else="" class="btn-group">
                                                     <button type="button"
                                                             t-on-click="(evt) => this.changeItemQuantity(evt, comboItem, -1)"
-                                                            class="btn btn-secondary btn py-2 px-3 px-lg-2 "><i class="oi oi-minus fa-fw"/></button>
+                                                            class="btn btn-secondary btn py-2 px-3 px-lg-2 "><i class="oi oi-fw" data-icon="remove"/></button>
                                                     <div class="o-so-tabular-nums d-flex justify-content-center align-items-center m-0 py-2 px-3 text-bg-secondary fs-4 fw-bold" t-out="itemQty"/>
                                                     <button type="button"
                                                         t-on-click="(evt) => this.changeItemQuantity(evt, comboItem, 1)"
                                                         t-att-disabled="!addItemEnabled"
-                                                        class="btn btn-secondary btn py-2 px-3 px-lg-2" ><i class="oi oi-plus fa-fw" /></button>
+                                                        class="btn btn-secondary btn py-2 px-3 px-lg-2" ><i class="oi oi-fw" data-icon="add"/></button>
                                                 </div>
                                             </div>
                                         </div>
@@ -165,7 +165,7 @@
                     </div>
                     <div class="d-flex justify-content-between align-items-center gap-2 gap-md-5">
                         <button class="btn btn-lg btn-secondary" t-on-click="!this.isBackVisible() ? this.goBack : this.back">
-                            <i class="oi oi-chevron-left d-md-none" />
+                            <i class="oi d-md-none" data-icon="chevron_backward"/>
                             <span class="d-none d-md-inline">Back</span>
                         </button>
                         <div class="d-flex justify-content-between align-items-center  gap-2 gap-md-5">
diff --git a/addons/pos_self_order/static/src/app/pages/eating_location_page/eating_location_page.xml b/addons/pos_self_order/static/src/app/pages/eating_location_page/eating_location_page.xml
index cf8d2c5cd90173..bb09ff7ed95ccb 100644
--- a/addons/pos_self_order/static/src/app/pages/eating_location_page/eating_location_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/eating_location_page/eating_location_page.xml
@@ -32,7 +32,7 @@
             <div class="o_self_footer py-3" t-att-class="{'o_self_shadow_bottom': this.scrollShadow.bottom}">
                 <div class="container o_self_container d-flex justify-content-between align-items-center position-relative" >
                     <button class="btn btn-lg btn-light btn-back border-light" t-on-click="()=>this.onClickBack()">
-                        <i class="oi oi-chevron-left d-md-none" />
+                        <i class="oi d-md-none" data-icon="chevron_backward"/>
                         <span class="d-none d-md-inline">Back</span>
                     </button>
                 </div>
diff --git a/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.xml b/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.xml
index 45adecd22d43a1..99224b81a98de3 100644
--- a/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.xml
@@ -15,7 +15,7 @@
                                 </div>
                                 <div class="d-flex justify-content-around gap-1 align-items-center">
                                     <div t-if="this.selfOrder.showDownloadButton(order)" class=" cursor-pointer p-2" role="button" t-on-click="() => this.selfOrder.downloadReceipt(order)">
-                                        <i  class="fa fa-download" aria-hidden="true" />
+                                        <i class="oi" data-icon="download" aria-hidden="true" />
                                     </div>
                                     <span class="badge py-2 rounded-pill text-capitalize"
                                         t-att-class="{
@@ -48,11 +48,11 @@
                                             />
                                         <t t-set="comboParent" t-value="line.combo_parent_id" />
                                         <div t-if="comboParent" class="info ms-2 combo-parent-name">
-                                            <i class="fa fa-th-large me-2" role="img" aria-label="Combo" title="Combo"/>
+                                            <i class="oi me-2" data-icon="view_module" role="img" aria-label="Combo" title="Combo"/>
                                             <t t-out="line.combo_parent_id.product_id.name" />
                                         </div>
                                         <div t-if="line.customer_note" class="d-inline-block m-0 text-muted small break-line">
-                                            <i class="fa fa-pencil-square-o" aria-hidden="true" />
+                                            <i class="oi" data-icon="edit_square" aria-hidden="true" />
                                             <span t-out="line.customer_note" class="customer_note ms-1" />
                                         </div>
                                     </div>
@@ -89,7 +89,7 @@
             <div class="o_self_footer bg-white border-top py-3">
                 <div class="container o_self_container ">
                   <button  class="btn btn-lg btn-secondary" t-on-click="this.back">
-                      <i class="oi oi-chevron-left d-md-none" />
+                      <i class="oi d-md-none" data-icon="chevron_backward" />
                       <span class="d-none d-md-inline">Back</span>
                   </button>
                 </div>
diff --git a/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.xml b/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.xml
index 2c5cc84878254e..843e521bf2465f 100644
--- a/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.xml
@@ -13,14 +13,14 @@
                             role="button"
                             class="g-col-12 g-col-md-6 btn btn-light btn-lg d-flex flex-column align-items-center gap-2  px-0 py-5  border border-light shadow-sm overflow-hidden"
                             t-on-click="() => this.selectMethod(payment_method.id)">
-                            <i class="fa fa-credit-card" aria-hidden="true"></i>
+                            <i class="oi" data-icon="credit_card" aria-hidden="true"></i>
                             <span t-out="payment_method.name" />
                         </button>
                     </div>
                     <div class="payment-state-container d-flex flex-column gap-4 align-items-center justify-content-center w-50 mx-auto p-3">
                         <h1 class="mb-3 text-center">Follow instructions on the terminal</h1>
                         <div class="btn btn-light btn-lg w-100 py-5 border border-light shadow-sm">
-                            <i class="fa fa-credit-card-alt fa-3x" aria-hidden="true"></i>
+                            <i class="oi oi-3x" data-icon="credit_card" aria-hidden="true"></i>
                         </div>
                     </div>
                </div>
diff --git a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
index cf4828b7ae239f..af3ce7d2e6c58a 100644
--- a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
@@ -20,7 +20,7 @@
                         </div>
                          <div class="category_end flex-shrink-0 align-items-center" t-if="!this.selfOrder.kioskMode">
                              <div class="ms-1 bg-secondary rounded-2 p-2 d-flex align-content-center align-items-center justify-content-center cursor-pointer" role="button" t-on-click="()=>this.displayCategoryList(this.state.topCategories)" >
-                                   <i class="fa fa-list-ul" />
+                                   <i class="oi" data-icon="format_list_bulleted" />
                              </div>
                         </div>
                     </div>
diff --git a/addons/pos_self_order/static/src/app/pages/product_page/product_page.xml b/addons/pos_self_order/static/src/app/pages/product_page/product_page.xml
index 81f0d26632bbfe..851dde257b592d 100644
--- a/addons/pos_self_order/static/src/app/pages/product_page/product_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/product_page/product_page.xml
@@ -8,7 +8,7 @@
             <div class="o_self_product_page_header text-bg-primary" t-att-class="{'o_self_shadow_top': this.scrollShadow.top}">
                 <div class="container o_self_container py-3 d-flex align-items-center position-relative" >
                     <button class="btn btn-link btn-lg d-inline-flex align-items-center gap-2 p-0" t-on-click="() => this.goBack()">
-                        <i class="oi oi-close fa-fw" aria-hidden="true"/>
+                        <i class="oi oi-fw" data-icon="close_small" aria-hidden="true"/>
                         <span  t-att-class="{'invisible': this.state.showStickyTitle}">Discard</span>
                     </button>
                     <h2 class="o_self_product_name position-absolute mb-0 text-truncate text-center" t-att-class="{'d-none': !this.state.showStickyTitle}" t-out="product.name"/>
@@ -52,7 +52,7 @@
                     </div>
                    <div class="d-flex justify-content-between align-items-center  gap-2 gap-md-5">
                         <button class="btn btn-lg btn-secondary" t-on-click="() => this.goBack()">
-                            <i class="oi oi-chevron-left d-md-none" />
+                            <i class="oi d-md-none" data-icon="chevron_backward"/>
                             <span class="d-none d-md-inline">Back</span>
                         </button>
                         <div class="ms-auto text-start">
diff --git a/addons/pos_self_order/static/src/app/pages/stand_number_page/stand_number_page.xml b/addons/pos_self_order/static/src/app/pages/stand_number_page/stand_number_page.xml
index d86a0f4e31ef94..5c835e02a280a1 100644
--- a/addons/pos_self_order/static/src/app/pages/stand_number_page/stand_number_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/stand_number_page/stand_number_page.xml
@@ -21,7 +21,7 @@
             <div class="d-flex py-3 w-100 bg-light border-top ">
                <div class="o_self_footer container o_self_container d-flex justify-content-between ">
                  <button class="btn btn-secondary btn-lg" t-on-click="() => this.router.back()">
-                     <i class="oi oi-chevron-left d-md-none" />
+                     <i class="oi d-md-none" data-icon="chevron_backward"/>
                      <span class="d-none d-md-inline">Back</span>
                  </button>
                  <button class="btn btn-primary btn-lg" t-att-disabled="!this.state.standNumber" t-on-click="this.confirm" t-out="this.actionBtnText"/>
diff --git a/addons/pos_self_order/static/src/overrides/components/navbar/navbar.xml b/addons/pos_self_order/static/src/overrides/components/navbar/navbar.xml
index f545de4000c7f2..7c169adfe43241 100644
--- a/addons/pos_self_order/static/src/overrides/components/navbar/navbar.xml
+++ b/addons/pos_self_order/static/src/overrides/components/navbar/navbar.xml
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="pos_self_order.Navbar" t-inherit="point_of_sale.Navbar" t-inherit-mode="extension">
-        <xpath expr="//DropdownItem/i[hasclass('fa-download')]/.." position="before">
+        <xpath expr="//DropdownItem/i[@data-icon='download']/.." position="before">
             <DropdownItem t-if="ui.isSmall and pos.config.module_pos_restaurant" onSelected="() => pos.redirectToQrForm()">
-                <i class="fa fa-fw fa-qrcode" aria-hidden="true" /> Get QR Codes
+                <i class="oi oi-fw" data-icon="qr_code" aria-hidden="true" /> Get QR Codes
             </DropdownItem>
         </xpath>
     </t>
diff --git a/addons/pos_self_order/static/tests/tours/self_order_combo_tour.js b/addons/pos_self_order/static/tests/tours/self_order_combo_tour.js
index 3abf928cfc4e64..70fba96a6f9af0 100644
--- a/addons/pos_self_order/static/tests/tours/self_order_combo_tour.js
+++ b/addons/pos_self_order/static/tests/tours/self_order_combo_tour.js
@@ -32,7 +32,7 @@ registry.category("web_tour.tours").add("self_combo_selector", {
         Utils.clickBtn("Add to cart"),
         Utils.clickBtn("Checkout"),
         {
-            trigger: ".btn .oi-plus",
+            trigger: ".btn [data-icon='add']",
             run: "click",
         },
         ...CartPage.checkCombo("Office Combo", [
diff --git a/addons/pos_self_order/static/tests/tours/utils/product_page_util.js b/addons/pos_self_order/static/tests/tours/utils/product_page_util.js
index 0bb7a87ba617db..394cda0070bdb4 100644
--- a/addons/pos_self_order/static/tests/tours/utils/product_page_util.js
+++ b/addons/pos_self_order/static/tests/tours/utils/product_page_util.js
@@ -77,7 +77,7 @@ export function checkProductQty(productName, qty) {
 export function clickDiscard() {
     return {
         content: "Click on Discard button",
-        trigger: ".btn.btn-link .oi-close",
+        trigger: ".btn.btn-link [data-icon='close_small']",
         run: "click",
     };
 }
diff --git a/addons/pos_self_order/views/res_config_settings_views.xml b/addons/pos_self_order/views/res_config_settings_views.xml
index d57e0ef67e7c59..d1229ba4f3bfd1 100644
--- a/addons/pos_self_order/views/res_config_settings_views.xml
+++ b/addons/pos_self_order/views/res_config_settings_views.xml
@@ -13,12 +13,12 @@
                             <field name="pos_self_ordering_mode" invisible="not pos_config_id"/>
                         </div>
                         <div class="d-flex flex-column align-items-start w-50" invisible="pos_self_ordering_mode == 'nothing'">
-                            <button class="btn-link p-0" icon="oi-arrow-right" name="preview_self_order_app" type="object" string="Preview Web interface"/>
-                            <button class="btn-link p-0" icon="oi-arrow-right" name="custom_link_action" type="object" string="Home buttons"/>
-                            <button class="btn-link p-0" icon="oi-arrow-right" name="generate_qr_codes_page" type="object" string="Print QR Codes" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
-                            <button class="btn-link p-0" icon="oi-arrow-right" name="generate_qr_codes_zip" type="object" string="Download QR Codes" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
-                            <button class="btn-link p-0" icon="oi-arrow-right" name="get_pos_qr_stands" type="object" string="Free Metal / Wood Stands" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
-                            <button groups="base.group_no_one" class="btn-link p-0" icon="oi-arrow-right" name="update_access_tokens" type="object" string="Reset QR Codes" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
+                            <button class="btn-link p-0" icon="east" name="preview_self_order_app" type="object" string="Preview Web interface"/>
+                            <button class="btn-link p-0" icon="east" name="custom_link_action" type="object" string="Home buttons"/>
+                            <button class="btn-link p-0" icon="east" name="generate_qr_codes_page" type="object" string="Print QR Codes" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
+                            <button class="btn-link p-0" icon="east" name="generate_qr_codes_zip" type="object" string="Download QR Codes" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
+                            <button class="btn-link p-0" icon="east" name="get_pos_qr_stands" type="object" string="Free Metal / Wood Stands" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
+                            <button groups="base.group_no_one" class="btn-link p-0" icon="east" name="update_access_tokens" type="object" string="Reset QR Codes" invisible="not pos_self_ordering_mode in ['consultation', 'mobile']"/>
                         </div>
                         <div class="content-group row mt-4" invisible="not pos_self_ordering_mode in ['kiosk', 'mobile']">
                             <label for="pos_self_ordering_service_mode" class="col-lg-4" string="Service at" />
@@ -48,7 +48,7 @@
                             </div>
                         </div>
                         <div>
-                            <button name="%(base.action_view_base_language_install)d" icon="oi-arrow-right" type="action" string="Add Languages" class="btn-link"/>
+                            <button name="%(base.action_view_base_language_install)d" icon="east" type="action" string="Add Languages" class="btn-link"/>
                         </div>
                     </setting>
                     <setting string="Background" help="Personalize the Interface" invisible="pos_self_ordering_mode == 'nothing'">
diff --git a/addons/pos_self_order_event/static/src/app/pages/event_page/event_page.xml b/addons/pos_self_order_event/static/src/app/pages/event_page/event_page.xml
index fc47e0d197a27b..8947405869ba76 100644
--- a/addons/pos_self_order_event/static/src/app/pages/event_page/event_page.xml
+++ b/addons/pos_self_order_event/static/src/app/pages/event_page/event_page.xml
@@ -7,7 +7,7 @@
             <header class="o_self_event_page_header text-bg-primary" t-att-class="{'o_self_shadow_top': this.scrollShadow.top}">
                 <div class="container o_self_container py-3 d-flex align-items-center position-relative">
                     <button type="button" class="btn btn-link btn-lg d-inline-flex align-items-center gap-2 p-0" t-on-click="this.goBack" aria-label="Discard">
-                        <i class="oi oi-close fa-fw"/>
+                        <i class="oi oi-fw" data-icon="close_small"/>
                         <span t-att-class="{'invisible': this.state.showStickyTitle}">Discard</span>
                     </button>
                     <h2 class="o_self_event_name position-absolute mb-0 text-truncate text-center" t-att-class="{'d-none': !this.state.showStickyTitle}" t-out="this.event.name"/>
@@ -96,7 +96,7 @@
                                                             class="btn btn-secondary py-1 px-2"
                                                             t-on-click="() => this.changeQuantity(ticket.id, false)"
                                                             t-att-disabled="(this.state.ticketQuantities[ticket.id] || 0) &lt;= 0">
-                                                        <i class="oi oi-minus fa-fw"/>
+                                                        <i class="oi oi-fw" data-icon="remove"/>
                                                     </button>
                                                     <div class="o-so-tabular-nums fs-4 d-flex align-items-center m-0 px-4 py-2 text-bg-secondary fw-bolder">
                                                         <t t-out="this.state.ticketQuantities[ticket.id] || 0"/>
@@ -105,7 +105,7 @@
                                                             class="btn btn-secondary py-1 px-2"
                                                             t-on-click="() => this.changeQuantity(ticket.id, true)"
                                                             >
-                                                        <i class="oi oi-plus fa-fw"/>
+                                                        <i class="oi oi-fw" data-icon="add"/>
                                                     </button>
                                                 </div>
                                             </div>
@@ -199,7 +199,7 @@
                 <div class="container o_self_container ">
                     <div class="d-flex justify-content-between align-items-center gap-2 gap-md-5">
                         <button t-if="this.isBackVisible()" class="btn btn-lg btn-secondary" t-on-click="this.back">
-                            <i class="oi oi-chevron-left d-md-none" />
+                            <i class="oi d-md-none" data-icon="chevron_backward"/>
                             <span class="d-none d-md-inline">Back</span>
                         </button>
                         <div t-else=""/>
diff --git a/addons/pos_self_order_event/static/src/app/pages/order_history_page/order_history_page.xml b/addons/pos_self_order_event/static/src/app/pages/order_history_page/order_history_page.xml
index 22498f69f5b7a2..35be284d9b8ec9 100644
--- a/addons/pos_self_order_event/static/src/app/pages/order_history_page/order_history_page.xml
+++ b/addons/pos_self_order_event/static/src/app/pages/order_history_page/order_history_page.xml
@@ -8,7 +8,7 @@
                 aria-label="Download Ticket"
                 title="Download Ticket">
                 Download
-                <i class="fa fa-ticket" role="img" aria-label="Download Ticket"/>
+                <i class="oi" data-icon="confirmation_number" role="img" aria-label="Download Ticket"/>
             </a>
         </xpath>
     </t>
diff --git a/addons/pos_sms/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.js b/addons/pos_sms/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.js
index 4da52f9309b4d4..66b58d88d9b888 100644
--- a/addons/pos_sms/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.js
+++ b/addons/pos_sms/static/src/app/components/popups/send_receipt_popup/send_receipt_popup.js
@@ -18,7 +18,8 @@ patch(SendReceiptPopup.prototype, {
             list.find((item) => item.model === "phone").buttons.push({
                 click: () => this.actionSendReceiptOnSMS(),
                 status: this.sendReceipt.lastArgs?.[0]?.name == "SMS" && this.sendReceipt.status,
-                icon: "fa-lg fa-mobile",
+                icon: "smartphone",
+                icon_class: "oi-lg",
                 disabled: () => !this.isValidPhone,
             });
         }
diff --git a/addons/pos_stripe/views/pos_payment_method_views.xml b/addons/pos_stripe/views/pos_payment_method_views.xml
index b8248580e75e06..65c2aa0b2650b9 100644
--- a/addons/pos_stripe/views/pos_payment_method_views.xml
+++ b/addons/pos_stripe/views/pos_payment_method_views.xml
@@ -11,7 +11,7 @@
                         <group>
                             <field name="stripe_serial_number" invisible="payment_provider != 'stripe'" required="payment_provider == 'stripe'"/>
                             <div colspan="2" class="mt16" invisible="payment_provider != 'stripe'" required="payment_provider == 'stripe'">
-                                <button name="action_stripe_key" type="object" icon="oi-arrow-right" string="Don't forget to complete Stripe connect before using this payment method." class="btn-link"/>
+                                <button name="action_stripe_key" type="object" icon="east" string="Don't forget to complete Stripe connect before using this payment method." class="btn-link"/>
                             </div>
                         </group>
                     </page>
diff --git a/addons/pos_viva_com/static/src/app/screens/payment_screen/payment_lines/payment_lines.js b/addons/pos_viva_com/static/src/app/screens/payment_screen/payment_lines/payment_lines.js
index ae767e2bf790bc..cc12d85f15d55a 100644
--- a/addons/pos_viva_com/static/src/app/screens/payment_screen/payment_lines/payment_lines.js
+++ b/addons/pos_viva_com/static/src/app/screens/payment_screen/payment_lines/payment_lines.js
@@ -14,7 +14,7 @@ patch(PaymentScreenPaymentLines.prototype, {
             return {
                 id: "viva_continue_app",
                 title: _t("Continue on Viva app"),
-                icon: "fa fa-mobile",
+                icon: "smartphone",
                 actions: [
                     {
                         id: "viva_reset_integration",
diff --git a/addons/pos_viva_com/static/tests/unit/app/payment_lines.test.js b/addons/pos_viva_com/static/tests/unit/app/payment_lines.test.js
index 9af652301269ac..2b49a0e3aa1c33 100644
--- a/addons/pos_viva_com/static/tests/unit/app/payment_lines.test.js
+++ b/addons/pos_viva_com/static/tests/unit/app/payment_lines.test.js
@@ -41,7 +41,7 @@ test("getPaymentActionState", async () => {
     expect(normalizeActionState(comp.getPaymentActionState(paymentline))).toEqual({
         id: "viva_continue_app",
         title: "Continue on Viva app",
-        icon: "fa fa-mobile",
+        icon: "smartphone",
         actions: [
             {
                 id: "viva_reset_integration",
@@ -57,7 +57,8 @@ test("getPaymentActionState", async () => {
     comp.vivaApp = { isIntegrated: () => false };
     expect(normalizeActionState(comp.getPaymentActionState(paymentline))).toEqual({
         id: "waiting_card",
-        icon: "fa fa-circle-o-notch fa-spin",
+        icon: "autorenew",
+        icon_class: "oi-spin",
         title: "Waiting for card",
         actions: [
             {
diff --git a/addons/privacy_lookup/wizard/privacy_lookup_wizard_views.xml b/addons/privacy_lookup/wizard/privacy_lookup_wizard_views.xml
index 9d49f1dbe69532..f7c80b36199902 100644
--- a/addons/privacy_lookup/wizard/privacy_lookup_wizard_views.xml
+++ b/addons/privacy_lookup/wizard/privacy_lookup_wizard_views.xml
@@ -14,7 +14,7 @@
                             name="action_open_lines"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-file-text-o">
+                            icon="article">
                             <field name="line_count" string="References" widget="statinfo"/>
                         </button>
                     </div>
@@ -50,13 +50,13 @@
                 <field name="res_name" column_invisible="True"/>
                 <field name="res_model" column_invisible="True"/>
                 <field name="resource_ref" options="{'model_field': 'res_model_id', 'no_create': True}" invisible="not resource_ref"/>
-                <button name="action_open_record" type="object" icon="fa-external-link" invisible="not resource_ref" title="Open Record"/>
+                <button name="action_open_record" type="object" icon="open_in_new" invisible="not resource_ref" title="Open Record"/>
                 <field name="res_id" string="ID"/>
                 <field name="has_active" column_invisible="True"/>
                 <field name="execution_details" column_invisible="True"/>
                 <field name="is_active" widget="boolean_toggle" invisible="is_unlinked or not has_active"/>
                 <field name="is_unlinked" column_invisible="True"/>
-                <button name="action_unlink" string="Delete" type="object" icon="fa-trash" invisible="is_unlinked" confirm="This operation is irreversible. Do you wish to proceed to the record deletion?"/>
+                <button name="action_unlink" string="Delete" type="object" icon="delete" icon_class="oi-filled" invisible="is_unlinked" confirm="This operation is irreversible. Do you wish to proceed to the record deletion?"/>
             </list>
         </field>
     </record>
diff --git a/addons/product/static/src/js/pricelist_report/product_pricelist_report.xml b/addons/product/static/src/js/pricelist_report/product_pricelist_report.xml
index 64666cf80b9cac..611e894a9c126a 100644
--- a/addons/product/static/src/js/pricelist_report/product_pricelist_report.xml
+++ b/addons/product/static/src/js/pricelist_report/product_pricelist_report.xml
@@ -67,7 +67,8 @@
                                     class="form-control add-quantity-input"
                                     value="1"
                                     min="1"/>
-                                <button class="o_add_qty btn btn-primary fa fa-plus"
+                                <button class="o_add_qty btn btn-primary oi"
+                                        data-icon="add"
                                         type="submit"
                                         t-on-click="this.onClickAddQty"
                                         title="Add a quantity"/>
@@ -77,7 +78,8 @@
                                     <t t-foreach="this.quantities" t-as="qty" t-key="qty">
                                         <span class="text-bg-300 o_remove_qty badge rounded-pill me-2 py-1 border " t-att-value="qty">
                                             <t class="me-2" t-out="qty"/>
-                                            <i class="oi oi-close ms-1 opacity-50 opacity-100-hover text-900 cursor-pointer"
+                                            <i class="oi ms-1 opacity-50 opacity-100-hover text-900 cursor-pointer"
+                                            data-icon="close_small"
                                             title="Remove quantity"
                                             t-on-click="this.onClickRemoveQty"/>
                                         </span>
@@ -88,7 +90,7 @@
                     </form>
                     <div style="margin-left:100px;">
                         <button t-on-click="this.onClickAddProducts" string="All Products" class="btn btn-link">
-                            <i class="fa fa-pencil"/>
+                            <i class="oi oi-filled" data-icon="edit"/>
                             Add Products
                         </button>
                     </div>
diff --git a/addons/product/static/src/product_catalog/order_line/order_line.xml b/addons/product/static/src/product_catalog/order_line/order_line.xml
index b0d2dca6f1ae68..03f45c4f8057bc 100644
--- a/addons/product/static/src/product_catalog/order_line/order_line.xml
+++ b/addons/product/static/src/product_catalog/order_line/order_line.xml
@@ -12,7 +12,7 @@
         <div 
             t-if="this.props.readOnly and this.props.warning"
             class="text-danger text-truncate my-2 pt-3 border-top">
-            <i class="fa fa-warning" t-att-title="this.props.warning"/>
+            <i class="oi" data-icon="warning" t-att-title="this.props.warning"/>
             <span 
                 class="px-1" 
                 t-att-title="this.props.warning"
@@ -31,7 +31,7 @@
                     t-att-data-tooltip="this.disabledButtonTooltip"
                     aria-label="Decrease quantity"
                 >
-                    <i class="oi oi-minus" aria-hidden="true"/>
+                    <i class="oi" data-icon="remove" aria-hidden="true"/>
                 </button>
                 <input
                     class="form-control text-bg-view flex-grow-0 flex-shrink-0 text-center"
@@ -51,11 +51,11 @@
                     t-on-click.stop="(ev) => this.env.increaseQuantity()"
                     aria-label="Increase quantity"
                 >
-                    <i class="oi oi-plus" aria-hidden="true"/>
+                    <i class="oi" data-icon="add" aria-hidden="true"/>
                 </button>
             </div>
             <t t-elif="this.props.warning">
-                <i class="fa fa-warning text-warning" t-att-title="this.props.warning"/>
+                <i class="oi text-warning" data-icon="warning" t-att-title="this.props.warning"/>
                 <span 
                     class="text-truncate text-warning px-1" 
                     t-att-title="this.props.warning"
@@ -67,14 +67,14 @@
                 <button t-if="!this.isInOrder()"
                         t-on-click.stop="() => this.env.addProduct()"
                         class="btn btn-secondary">
-                    <i class="fa fa-shopping-cart"/>
+                    <i class="oi" data-icon="shopping_cart"/>
                     Add
                 </button>
                 <div t-else="" class="o_tooltip_div_remove" t-att-data-tooltip="this.disabledButtonTooltip">
                     <button t-on-click.stop="this.env.removeProduct"
                             t-att-disabled="this.disableRemove"
                             class="btn btn-light border">
-                        <i class="fa fa-trash"/>
+                        <i class="oi oi-filled" data-icon="delete"/>
                         Remove
                     </button>
                 </div>
diff --git a/addons/product/views/product_attribute_views.xml b/addons/product/views/product_attribute_views.xml
index 449490f35b8e65..405c830112c078 100644
--- a/addons/product/views/product_attribute_views.xml
+++ b/addons/product/views/product_attribute_views.xml
@@ -30,7 +30,7 @@
                     <button name="action_open_product_template_attribute_lines"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-bars"
+                            icon="menu"
                             invisible="not number_related_products">
                         <div class="o_stat_info">
                             <span class="o_stat_value"><field name="number_related_products"/></span>
@@ -76,7 +76,7 @@
                                     name="action_add_to_products"
                                     string="Add to products"
                                     type="object"
-                                    icon="fa-plus"
+                                    icon="add"
                                     column_invisible="parent.number_related_products &lt; 1"
                                     invisible="pav_attribute_line_ids"
                                 />
@@ -84,7 +84,7 @@
                                     name="action_update_prices"
                                     string="Update extra prices"
                                     type="object"
-                                    icon="fa-refresh"
+                                    icon="refresh"
                                     column_invisible="parent.number_related_products &lt; 1"
                                     invisible="not pav_attribute_line_ids or not default_extra_price_changed"
                                 />
diff --git a/addons/product/views/product_category_views.xml b/addons/product/views/product_category_views.xml
index e5b608175c8af9..f8508cbd3a963d 100644
--- a/addons/product/views/product_category_views.xml
+++ b/addons/product/views/product_category_views.xml
@@ -10,7 +10,7 @@
                     <div class="oe_button_box" name="button_box">
                         <button class="oe_stat_button"
                             name="%(product_template_action_all)d"
-                            icon="fa-th-list"
+                            icon="view_list"
                             type="action"
                             context="{'search_default_categ_id': id, 'default_categ_id': id, 'group_expand': True}">
                             <div class="o_field_widget o_stat_info">
diff --git a/addons/product/views/product_document_views.xml b/addons/product/views/product_document_views.xml
index 40f64248840082..affc225e2776c5 100644
--- a/addons/product/views/product_document_views.xml
+++ b/addons/product/views/product_document_views.xml
@@ -72,7 +72,7 @@
                             <t t-set="binaryPreviewable"
                                 t-value="new RegExp('(image|video|application/pdf|text)').test(record.mimetype.value) &amp;&amp; record.type.raw_value === 'binary'"/>
                             <div t-attf-class="o_kanban_image_wrapper #{(webimage or binaryPreviewable) ? 'o_kanban_previewer' : ''}">
-                                <div t-if="record.type.raw_value == 'url'" class="fa fa-link fa-3x text-muted" aria-label="Image is a link"/>
+                                <div t-if="record.type.raw_value == 'url'" class="oi oi-3x text-muted" data-icon="link" aria-label="Image is a link"/>
                                 <img t-elif="webimage" t-attf-src="/web/image/#{record.ir_attachment_id.raw_value}/100x100" width="100" height="100" alt="Document" class="o_attachment_image"/>
                                 <div t-else="" class="o_image o_image_thumbnail" t-att-data-mimetype="record.mimetype.value"/>
                             </div>
diff --git a/addons/product/views/product_pricelist_item_views.xml b/addons/product/views/product_pricelist_item_views.xml
index da5a10dcf2ac6f..b3b1d114f8aa6e 100644
--- a/addons/product/views/product_pricelist_item_views.xml
+++ b/addons/product/views/product_pricelist_item_views.xml
@@ -220,7 +220,8 @@
                                     class="oe_inline"
                                     widget="monetary"
                                     options="{'field_digits': True}"/>
-                                <i class="fa fa-long-arrow-right mx-2 oe_edit_only"
+                                <i class="oi mx-2 oe_edit_only"
+                                    data-icon="east"
                                     aria-label="Arrow icon" title="Arrow"/>
                                 <field name="price_max_margin"
                                     string="Max. Margin"
diff --git a/addons/product/views/product_pricelist_views.xml b/addons/product/views/product_pricelist_views.xml
index 0b4c1da6d01c9c..91384d55265361 100644
--- a/addons/product/views/product_pricelist_views.xml
+++ b/addons/product/views/product_pricelist_views.xml
@@ -38,7 +38,7 @@
                     <t t-name="card" class="flex-row fw-bolder">
                         <field name="name"/>
                         <div class="ms-auto align-items-center">
-                            <i class="fa fa-money" role="img" aria-label="Currency" title="Currency"></i> <field name="currency_id"/>
+                            <i class="oi" data-icon="payments" role="img" aria-label="Currency" title="Currency"></i> <field name="currency_id"/>
                         </div>
                     </t>
                 </templates>
diff --git a/addons/product/views/product_template_views.xml b/addons/product/views/product_template_views.xml
index 2e461a34e985ad..5e333cd7782d18 100644
--- a/addons/product/views/product_template_views.xml
+++ b/addons/product/views/product_template_views.xml
@@ -88,7 +88,7 @@
 
             <button name="action_open_documents" position="before">
                 <button name="%(product.product_variant_action)d" type="action"
-                    icon="fa-sitemap" class="oe_stat_button"
+                    icon="account_tree" class="oe_stat_button"
                     invisible="product_variant_count &lt;= 1"
                     groups="product.group_product_variant">
                     <field string="Variants" name="product_variant_count" widget="statinfo" />
diff --git a/addons/product/views/product_views.xml b/addons/product/views/product_views.xml
index 6038b682ccdf8b..bc7b0b27a21611 100644
--- a/addons/product/views/product_views.xml
+++ b/addons/product/views/product_views.xml
@@ -43,7 +43,7 @@
                         <button class="oe_stat_button"
                                 name="action_open_documents"
                                 type="object"
-                                icon="fa-file-text-o">
+                                icon="article">
                             <field string="Documents" name="product_document_count" widget="statinfo"/>
                         </button>
                     </div>
@@ -813,10 +813,10 @@ action = {
                 <searchpanel>
                     <field name="categ_id"
                            string="Categories"
-                           icon="fa-th-list"/>
+                           icon="view_list"/>
                     <field name="product_tag_ids"
                            string="Tags"
-                           icon="fa-th-list"
+                           icon="view_list"
                            enable_counters="1"
                            select="multi"/>
                 </searchpanel>
diff --git a/addons/product/views/uom_views.xml b/addons/product/views/uom_views.xml
index 15cdf17aa0fc0b..33c1e2edb35a65 100644
--- a/addons/product/views/uom_views.xml
+++ b/addons/product/views/uom_views.xml
@@ -21,7 +21,7 @@
                 <div class="oe_button_box" name="button_box">
                     <button
                         class="oe_stat_button"
-                        icon="fa-barcode"
+                        icon="barcode"
                         type="object"
                         context="{'default_uom_id': id}"
                         name="action_open_packaging_barcodes">
diff --git a/addons/product_expiry/views/production_lot_views.xml b/addons/product_expiry/views/production_lot_views.xml
index c5370e8ca4478d..4018b9c6b2f205 100644
--- a/addons/product_expiry/views/production_lot_views.xml
+++ b/addons/product_expiry/views/production_lot_views.xml
@@ -66,7 +66,7 @@
             </xpath>
             <xpath expr="//field[@name='name']" position="after">
                 <div>
-                    <span title="Alert" class="fa fa-exclamation-triangle text-danger me-2"
+                    <span title="Alert" class="oi text-danger me-2" data-icon="warning"
                           invisible="product_qty &lt;= 0 or not product_expiry_alert or not expiration_date"/>
                     <field name="alert_date" widget='remaining_days' class="d-inline-block"/>
                 </div>
diff --git a/addons/project/static/src/actions/client_actions.js b/addons/project/static/src/actions/client_actions.js
index e8795809802061..023d26d70adb0e 100644
--- a/addons/project/static/src/actions/client_actions.js
+++ b/addons/project/static/src/actions/client_actions.js
@@ -18,7 +18,7 @@ export function showTemplateUndoNotification(
         buttons: [
             {
                 name: _t("Undo"),
-                icon: "fa-undo",
+                icon: "undo",
                 onClick: async () => {
                     const res = await env.services.orm.call(model, undoMethod, [recordId]);
                     if (undoCallback) {
diff --git a/addons/project/static/src/components/done_checkmark/task_done_checkmark.scss b/addons/project/static/src/components/done_checkmark/task_done_checkmark.scss
index ec00bd0724422a..a57c81b3fa4a96 100644
--- a/addons/project/static/src/components/done_checkmark/task_done_checkmark.scss
+++ b/addons/project/static/src/components/done_checkmark/task_done_checkmark.scss
@@ -1,14 +1,14 @@
 a.o_todo_done_button {
     margin: 0px 5px;
     @include o-hover-text-color($gray-400, $o-success);
-    &:hover:before {
-        content: "\f058";
+    &:hover {
+        --o-mi-fill: 1;
     }
 
     &.done_button_enabled {
         @include o-hover-text-color($o-success, $gray-400);
-        &:hover:before {
-            content: "\f05d";
+        &:hover {
+            --o-mi-fill: 0;
         }
     }
 }
diff --git a/addons/project/static/src/components/done_checkmark/task_done_checkmark.xml b/addons/project/static/src/components/done_checkmark/task_done_checkmark.xml
index 32865d58384909..9c00c4708ebf25 100644
--- a/addons/project/static/src/components/done_checkmark/task_done_checkmark.xml
+++ b/addons/project/static/src/components/done_checkmark/task_done_checkmark.xml
@@ -5,7 +5,9 @@
         <xpath expr="//CheckBox" position="replace">
             <a title="Mark as done"
                t-on-click.stop="this.onChange"
-               t-attf-class="o_todo_done_button ps-0 fa fa-lg fa-check-circle{{!this.reached.isReached ? '-o' : ' done_button_enabled'}}"/>
+               class="o_todo_done_button oi oi-lg ps-0"
+               t-att-class="{'oi-filled done_button_enabled': reached.isReached}"
+               data-icon="check_circle"/>
         </xpath>
     </t>
 
diff --git a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.js b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.js
index 979c1350a65ac4..c3f9a71e74692f 100644
--- a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.js
+++ b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.js
@@ -23,12 +23,18 @@ export class ProjectTaskStateSelection extends StateSelectionField {
             isStateButtonHighlighted: false,
         });
         this.icons = {
+            "02_changes_requested": "error",
+            "1_done": "check_circle",
+            "1_canceled": "cancel",
+            "04_waiting_normal": "hourglass_empty",
+        };
+        this.classIcons = {
+            "02_changes_requested": "oi oi-lg",
+            "1_done": "oi oi-lg oi-filled",
+            "1_canceled": "oi oi-lg oi-filled",
+            "04_waiting_normal": "oi oi-lg",
             "01_in_progress": "o_status",
             "03_approved": "o_status o_status_green",
-            "02_changes_requested": "fa fa-lg fa-exclamation-circle",
-            "1_done": "fa fa-lg fa-check-circle",
-            "1_canceled": "fa fa-lg fa-times-circle",
-            "04_waiting_normal": "fa fa-lg fa-hourglass-o",
         };
         this.colorIcons = {
             "01_in_progress": "",
@@ -104,6 +110,10 @@ export class ProjectTaskStateSelection extends StateSelectionField {
         return this.icons[value] || "";
     }
 
+    stateClassIcon(value) {
+        return this.classIcons[value] || "";
+    }
+
     /**
      * @override
      */
diff --git a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.scss b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.scss
index f751bb59dc30b3..c6f3b8c0366150 100644
--- a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.scss
+++ b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.scss
@@ -6,14 +6,14 @@
         margin-top: -0.5px;
     }
 
-    .fa-lg {
+    .oi-lg {
         font-size: 1.75em;
         margin-top: -2.5px;
         max-width: 20px;
         max-height: 20px;
     }
 
-    .fa-hourglass-o {
+    [data-icon="hourglass_empty"] {
         font-size: 1.4em !important;
         margin-top: 0.5px !important;
     }
@@ -21,7 +21,7 @@
     .o_task_state_list_view {
         height: $o-line-size;
 
-        .fa-lg {
+        .oi-lg {
             font-size: 1.315em;
             vertical-align: -6%;
         }
@@ -29,7 +29,7 @@
             width: $o-bubble-color-size;
             height: $o-bubble-color-size;
         }
-        .fa-hourglass-o {
+        [data-icon="hourglass_empty"] {
             font-size: 1.15em !important;
             padding-left: 1px !important;
         }
@@ -41,7 +41,7 @@
 }
 
 .project_task_state_selection_menu {
-    .fa {
+    .oi {
         margin-top: -1.5px;
         font-size: 1.315em;
         vertical-align: -6%;
@@ -61,7 +61,7 @@
 }
 
 .o_field_task_stage_with_state_selection {
-    .fa-lg {
+    .oi-lg {
         font-size: 1.57em;
     }
 }
diff --git a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml
index 237a5d49c678f5..7d8e47f1d692f4 100644
--- a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml
+++ b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml
@@ -5,7 +5,8 @@
             <attribute name="tabindex">-1</attribute>
         </xpath>
         <xpath expr="//t[@t-if='this.props.readonly']/button/span[1]" position="attributes">
-            <attribute name="t-attf-class">{{ this.stateIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }}</attribute>
+            <attribute name="t-attf-class">{{ this.stateClassIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }}</attribute>
+            <attribute name="t-attf-data-icon">{{ this.stateIcon(this.currentValue) }}</attribute>
         </xpath>
         <xpath expr="//t[@t-if='this.props.readonly']/button" position="attributes">
             <attribute name="t-att-title">this.label</attribute>
@@ -14,7 +15,7 @@
         <xpath expr="//t[@t-if='this.props.readonly']" position="after">
             <t t-elif="this.currentValue == '04_waiting_normal' and this.isView(['activity', 'kanban', 'list', 'calendar'])">
                 <button class="d-flex align-items-center btn fw-normal p-0 justify-content-center " title="This task is blocked by another unfinished task" t-att-class="{'o_task_state_list_view': this.isView(['list'])}">
-                    <i class="fa fa-lg fa-hourglass-o text-info"></i>
+                    <i class="oi oi-lg text-info" data-icon="hourglass_empty"></i>
                 </button>
             </t>
         </xpath>
@@ -27,7 +28,7 @@
                         t-att-class="{'o_task_state_list_view': this.isView(['list'])}"
                         t-on-click.stop="this.toggleState"
                 >
-                    <i t-attf-class="{{ this.stateIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }} {{ ['1_done', '1_canceled'].includes(this.currentValue) and this.isView(['activity', 'kanban']) ? 'opacity-50' : '' }}"></i>
+                    <i t-attf-class="{{ this.stateClassIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }} {{ ['1_done', '1_canceled'].includes(this.currentValue) and this.isView(['activity', 'kanban']) ? 'opacity-50' : '' }}" t-attf-data-icon="{{ this.stateIcon(this.currentValue) }}"></i>
                 </button>
                 <button t-else="" class="o_state_button btn oe_highlight rounded-pill" style="white-space: nowrap;" tabindex="-1"
                     t-attf-class="#{this.currentValue == '1_done' ? 'btn-success' : 'btn-outline-secondary'}"
@@ -38,7 +39,7 @@
                         <span class="o_status_label">
                             <t t-if="this.state.isStateButtonHighlighted">
                                 <span class="text-success oe_highlight">
-                                    <i class="fa fa-fw fa-check"/>
+                                    <i class="oi oi-fw" data-icon="check"/>
                                     Mark as done
                                 </span>
                             </t>
@@ -54,12 +55,12 @@
         <!-- Normal dropdown mode toggle button (displayed on the card/record by default) -->
         <xpath expr="//Dropdown/button/div" position="replace">
             <div t-if="this.isView(['activity', 'kanban', 'list', 'calendar']) or this.env.isSmall" class="d-flex align-items-center" t-att-class="{'o_task_state_list_view': this.isView(['list'])}" t-att-title="this.label">
-                <i t-if="this.currentValue == '04_waiting_normal'" t-attf-class="{{ this.stateIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }}" style="color: #4A4F59;"/>
-                <i t-else="" t-attf-class="{{ this.stateIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }} {{ ['1_done', '1_canceled'].includes(this.currentValue) and this.isView(['activity', 'kanban']) ? 'opacity-50' : '' }}"/>
+                <i t-if="this.currentValue == '04_waiting_normal'" t-attf-class="{{ this.stateClassIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }}" t-attf-data-icon="{{ this.stateIcon(this.currentValue) }}" style="color: #4A4F59;"/>
+                <i t-else="" t-attf-class="{{ this.stateClassIcon(this.currentValue) }} {{ this.statusColor(this.currentValue) }} {{ ['1_done', '1_canceled'].includes(this.currentValue) and this.isView(['activity', 'kanban']) ? 'opacity-50' : '' }}" t-attf-data-icon="{{ this.stateIcon(this.currentValue) }}"/>
             </div>
             <div t-else="" class="d-flex align-items-center">
                 <t t-if="this.currentValue == '04_waiting_normal'">
-                    <i class="fa fa-fw fa-hourglass-o"/>
+                    <i class="oi oi-fw" data-icon="hourglass_empty"/>
                     <span class="o_status_label" title="This task is blocked by another unfinished task">
                         Waiting
                     </span>
@@ -89,7 +90,8 @@
         </xpath>
         <!-- Approval mode dropdown button (class)-->
         <xpath expr="//CheckboxItem/span[1]" position="attributes">
-            <attribute name="t-attf-class" separator=" " add="{{ this.stateIcon(option[0]) }}" remove="o_status"></attribute>
+            <attribute name="t-attf-class" separator=" " add="{{ this.stateClassIcon(option[0]) }}" remove="o_status"></attribute>
+            <attribute name="t-attf-data-icon">{{ this.stateIcon(option[0]) }}</attribute>
         </xpath>
         <xpath expr="//CheckboxItem/span[2]" position="attributes">
             <attribute name="t-attf-class">{{ this.statusColor(option[0]) }}</attribute>
diff --git a/addons/project/static/src/components/subtask_kanban_list/subtask_kanban_list.xml b/addons/project/static/src/components/subtask_kanban_list/subtask_kanban_list.xml
index e8e0499171f5e2..d7015271286ba7 100644
--- a/addons/project/static/src/components/subtask_kanban_list/subtask_kanban_list.xml
+++ b/addons/project/static/src/components/subtask_kanban_list/subtask_kanban_list.xml
@@ -33,7 +33,7 @@
                             onBlur.bind="this._onBlur" />
                     </t>
                     <t t-else="">
-                        <i class="fa fa-plus my-2"/> Add Sub-task
+                        <i class="oi my-2" data-icon="add"/> Add Sub-task
                     </t>
                 </div>
             </div>
diff --git a/addons/project/static/src/project_sharing/search/control_panel/control_panel.xml b/addons/project/static/src/project_sharing/search/control_panel/control_panel.xml
index 6435bb3102be38..74392e0b2bd5d3 100644
--- a/addons/project/static/src/project_sharing/search/control_panel/control_panel.xml
+++ b/addons/project/static/src/project_sharing/search/control_panel/control_panel.xml
@@ -14,7 +14,7 @@
     </t>
 
     <t t-name="project.ProjectSharingControlPanelNavigationButton">
-        <a class="btn btn-link" href="/my/projects" title="Go back to 'My Projects'"><i class="fa fa-arrow-left"/></a>
+        <a class="btn btn-link" href="/my/projects" title="Go back to 'My Projects'"><i class="oi" data-icon="arrow_back"/></a>
     </t>
 
 </templates>
diff --git a/addons/project/static/src/scss/project_dashboard.scss b/addons/project/static/src/scss/project_dashboard.scss
index 611db9184305ad..b0cb22b95eca43 100644
--- a/addons/project/static/src/scss/project_dashboard.scss
+++ b/addons/project/static/src/scss/project_dashboard.scss
@@ -43,8 +43,10 @@
                     }
 
                     &:after {
-                        content: "\f086";
-                        font: normal normal normal 14px/1 FontAwesome;
+                        --o-mi-fill: 1;
+
+                        content: "forum";
+                        font: normal normal normal 14px/1 'material_symbols_sharp';
                     }
                 }
             }
diff --git a/addons/project/static/src/views/components/project_template_buttons.scss b/addons/project/static/src/views/components/project_template_buttons.scss
index 30021f78d98105..eb0d05add97840 100644
--- a/addons/project/static/src/views/components/project_template_buttons.scss
+++ b/addons/project/static/src/views/components/project_template_buttons.scss
@@ -15,7 +15,7 @@
                         color: $btn-link-hover-color !important;
                     }
 
-                    &.fa-trash:hover {
+                    &[data-icon="delete"]:hover {
                         color: $o-danger !important;
                     }
                 }
diff --git a/addons/project/static/src/views/components/project_template_buttons.xml b/addons/project/static/src/views/components/project_template_buttons.xml
index 2f27eb0d9ecb3a..2c84096e0f5736 100644
--- a/addons/project/static/src/views/components/project_template_buttons.xml
+++ b/addons/project/static/src/views/components/project_template_buttons.xml
@@ -2,8 +2,8 @@
 <templates>
     <t t-name="project.ProjectTemplateButtons">
         <div class="btn-group o_template_icon_group ms-auto d-flex ps-1" t-if="this.isProjectManager">
-            <i role="button" t-on-click.stop="this.onEditClick" class="btn btn-link fa fa-pencil fs-3"></i>
-            <i role="button" t-on-click.stop="this.onDeleteClick" class="btn text-danger fa fa-trash fs-3"></i>
+            <i role="button" t-on-click.stop="this.onEditClick" class="btn btn-link oi oi-filled fs-3" data-icon="edit"></i>
+            <i role="button" t-on-click.stop="this.onDeleteClick" class="btn text-danger oi oi-filled fs-3" data-icon="delete"></i>
         </div>
     </t>
 </templates>
diff --git a/addons/project/static/src/views/project_task_calendar/project_task_calendar_filter_section/project_task_calendar_filter_section.xml b/addons/project/static/src/views/project_task_calendar/project_task_calendar_filter_section/project_task_calendar_filter_section.xml
index 60dc5c5a6fb132..35c201287c9e75 100644
--- a/addons/project/static/src/views/project_task_calendar/project_task_calendar_filter_section/project_task_calendar_filter_section.xml
+++ b/addons/project/static/src/views/project_task_calendar/project_task_calendar_filter_section/project_task_calendar_filter_section.xml
@@ -4,7 +4,7 @@
     <t t-name="project.ProjectTaskCalendarFilterSection.filter" t-inherit="web.CalendarFilterSection.filter" t-inherit-mode="primary">
         <xpath expr="//span[@t-out='filter.label']" position="before">
             <span t-if="this.props.model.isCheckProject and !filter.value" class="text-danger pe-1">
-                <i class="fa fa-lock"/>
+                <i class="oi" data-icon="lock"/>
             </span>
         </xpath>
     </t>
diff --git a/addons/project/static/src/views/project_task_control_panel/project_task_control_panel.xml b/addons/project/static/src/views/project_task_control_panel/project_task_control_panel.xml
index dbf7cd5c7108c3..4e61454f6b843a 100644
--- a/addons/project/static/src/views/project_task_control_panel/project_task_control_panel.xml
+++ b/addons/project/static/src/views/project_task_control_panel/project_task_control_panel.xml
@@ -6,7 +6,7 @@
             <t t-if="this.showTaskOptions and !this.env.isSmall or this.env.isSmall and !this.state.embeddedInfos.embeddedActions?.length">
                 <Dropdown>
                     <button class="btn btn-secondary" t-att-title="this.taskOptionsTitle">
-                        <i class="fa fa-sliders"/>
+                        <i class="oi" data-icon="tune" aria-hidden="true"/>
                     </button>
                     <t t-set-slot="content">
                         <DropdownItem onSelected="() => this.onClickShowSubtasks()" class="this.state.showSubtasks ? 'selected' : ''">
@@ -31,7 +31,7 @@
         <t t-if="this.env.isSmall and this.state.embeddedInfos.embeddedActions?.length">
             <Dropdown menuClass="'o_combined_mobile_dropdown'">
                 <button class="btn btn-secondary">
-                    <i class="fa fa-sliders" />
+                    <i class="oi" data-icon="tune" />
                 </button>
                 <t t-set-slot="content">
                     <DropdownItem
diff --git a/addons/project/static/src/views/project_task_form/project_task_form_controller.js b/addons/project/static/src/views/project_task_form/project_task_form_controller.js
index 41af6d6a213231..d6f21a83de4da5 100644
--- a/addons/project/static/src/views/project_task_form/project_task_form_controller.js
+++ b/addons/project/static/src/views/project_task_form/project_task_form_controller.js
@@ -61,7 +61,7 @@ export class ProjectTaskFormController extends FormControllerWithHTMLExpander {
             ...super.getStaticActionMenuItems(),
             openHistoryDialog: {
                 sequence: 15,
-                icon: "fa fa-history",
+                icon: "history",
                 description: _t("Version History"),
                 callback: () => this.openHistoryDialog(),
             },
diff --git a/addons/project/static/src/views/project_task_kanban/project_task_kanban_examples.js b/addons/project/static/src/views/project_task_kanban/project_task_kanban_examples.js
index 341fb03eb42c80..56da33763a5992 100644
--- a/addons/project/static/src/views/project_task_kanban/project_task_kanban_examples.js
+++ b/addons/project/static/src/views/project_task_kanban/project_task_kanban_examples.js
@@ -5,8 +5,8 @@ import { markup } from "@odoo/owl";
 
 const greenBullet = markup`<span class="o_status d-inline-block o_status_green"></span>`;
 const orangeBullet = markup`<span class="o_status d-inline-block text-warning"></span>`;
-const star = markup`<a style="color: gold;" class="fa fa-star"></a>`;
-const clock = markup`<a class="fa fa-clock-o"></a>`;
+const star = markup`<a style="color: gold;" class="oi oi-filled" data-icon="star"></a>`;
+const clock = markup`<a class="oi" data-icon="schedule"></a>`;
 
 const exampleData = {
     applyExamplesText: _t("Use This For My Project"),
diff --git a/addons/project/static/src/views/widget/subtask_counter.xml b/addons/project/static/src/views/widget/subtask_counter.xml
index a39c29a2b0bf42..9e4e19102f4a3e 100644
--- a/addons/project/static/src/views/widget/subtask_counter.xml
+++ b/addons/project/static/src/views/widget/subtask_counter.xml
@@ -6,7 +6,7 @@
         <a t-att-title="this.counterTitle"
            class="subtask_list_button btn-link text-dark"
            t-on-click.prevent="() => this.onClick()">
-            <i class="fa fa-level-down me-1"></i>
+            <i class="oi me-1" data-icon="subdirectory_arrow_right"></i>
             <t t-out="this.counterDisplay"/>
         </a>
     </t>
diff --git a/addons/project/static/src/xml/project_task_kanban_examples.xml b/addons/project/static/src/xml/project_task_kanban_examples.xml
index acde6c3133d78e..da5e76215c6e56 100644
--- a/addons/project/static/src/xml/project_task_kanban_examples.xml
+++ b/addons/project/static/src/xml/project_task_kanban_examples.xml
@@ -2,19 +2,19 @@
 <templates xml:space="preserve">
 
     <t t-name="project.example.generic">
-      Prioritize your tasks by marking important ones using the <a style="color: gold;" class="fa fa-star"></a> button.
+      Prioritize your tasks by marking important ones using the <a style="color: gold;" class="oi oi-filled" data-icon="star"></a> button.
       <br/><br/>
       Use the <span class="o_status d-inline-block o_status_green"></span> state to inform your colleagues that a task is approved for the next stage. 
       <br/>
       Use the <span class="o_status d-inline-block bg-warning"></span> state to indicate a request for changes or a need for discussion on a task.
       <br/><br/>
-      Use the <span class="fa fa-check-circle text-success d-inline-block"></span> state to mark the task as complete.
+      Use the <span class="oi oi-filled text-success d-inline-block" data-icon="check_circle"></span> state to mark the task as complete.
       <br/>
-      Use the <span class="fa fa-times-circle text-danger d-inline-block"></span> state to mark the task as cancelled.
+      Use the <span class="oi oi-filled text-danger d-inline-block" data-icon="cancel"></span> state to mark the task as cancelled.
       <br/><br/>
-      Look for the <span class="fa fa-hourglass-o d-inline-block"></span> icon to see tasks waiting on other ones. Once a task is marked as complete or cancelled, all of its dependencies will be unblocked.
+      Look for the <span class="oi d-inline-block" data-icon="hourglass_empty"></span> icon to see tasks waiting on other ones. Once a task is marked as complete or cancelled, all of its dependencies will be unblocked.
       <br/><br/>
-      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+      Use the <a class="oi" data-icon="schedule"></a> icon to organize your daily activities.
     </t>
 
     <t t-name="project.example.agilescrum">
@@ -22,16 +22,16 @@
       <br/>
       Use the <span class="o_status d-inline-block bg-warning"></span> state to indicate a request for changes or a need for discussion on a task.
       <br/><br/>
-      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+      Use the <a class="oi" data-icon="schedule"></a> icon to organize your daily activities.
       <br/><br/>
-      <a class="fa fa-lightbulb-o"></a> Sort your tasks by sprint using milestones, tags, or a dedicated property. At the end of each sprint, just pick the remaining tasks in your list and move them all at once to the next sprint by editing the milestone, tag, or property.
+      <a class="oi" data-icon="lightbulb"></a> Sort your tasks by sprint using milestones, tags, or a dedicated property. At the end of each sprint, just pick the remaining tasks in your list and move them all at once to the next sprint by editing the milestone, tag, or property.
     </t>
 
     <t t-name="project.example.digitalmarketing">
       Everyone can propose ideas, and the Editor marks the best ones as <span class="o_status d-inline-block o_status_green"></span>.<br/>
       Attach all documents or links to the task directly, to have all research information centralized. 
       <br/>
-      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+      Use the <a class="oi" data-icon="schedule"></a> icon to organize your daily activities.
     </t>
   
     <t t-name="project.example.customerfeedback">
@@ -40,7 +40,7 @@
       <span class="o_status d-inline-block o_status_green"></span> and which feedback is
       moved to the "Refused" column.
       <br/>
-      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+      Use the <a class="oi" data-icon="schedule"></a> icon to organize your daily activities.
     </t>
 
     <t t-name="project.example.consulting">
@@ -49,7 +49,7 @@
       <span class="o_status d-inline-block bg-warning"></span> to define if the project is
       ready for the next step.
       <br/>
-      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+      Use the <a class="oi" data-icon="schedule"></a> icon to organize your daily activities.
     </t>
 
     <t t-name="project.example.researchproject">
@@ -57,15 +57,15 @@
       <span class="o_status d-inline-block o_status_green"></span> and <span class="o_status d-inline-block bg-warning"></span>
       to signalize what is the current status of your Idea.
       <br/>
-      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+      Use the <a class="oi" data-icon="schedule"></a> icon to organize your daily activities.
     </t>
 
     <t t-name="project.example.tshirtprinting">
       Communicate with customers on the task using the email gateway. Attach logo designs to the task, so that information flows from
       designers to the workers who print the t-shirt. <br/>Organize priorities amongst orders using the
-      <a style="color: gold;" class="fa fa-star"></a> icon.
+      <a style="color: gold;" class="oi oi-filled" data-icon="star"></a> icon.
       <br/>
-      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+      Use the <a class="oi" data-icon="schedule"></a> icon to organize your daily activities.
     </t>
 
 </templates>
diff --git a/addons/project/static/tests/project_project.test.js b/addons/project/static/tests/project_project.test.js
index c568d1b078f526..d1f4059c39bffe 100644
--- a/addons/project/static/tests/project_project.test.js
+++ b/addons/project/static/tests/project_project.test.js
@@ -28,8 +28,8 @@ test("project.project (list) show archive/unarchive action for project manager",
     await mountView(listViewParams);
     await contains("input.form-check-input").click();
     await contains(`.o_cp_action_menus .dropdown-toggle`).click();
-    expect(`.oi-archive`).toHaveCount(1, { message: "Archive action should be visible" });
-    expect(`.oi-unarchive`).toHaveCount(1, { message: "Unarchive action should be visible" });
+    expect(`[data-icon="archive"]`).toHaveCount(1, { message: "Archive action should be visible" });
+    expect(`[data-icon="unarchive"]`).toHaveCount(1, { message: "Unarchive action should be visible" });
 });
 
 test("project.project (list) hide archive/unarchive action for project user", async () => {
diff --git a/addons/project/static/tests/project_task_calendar.test.js b/addons/project/static/tests/project_task_calendar.test.js
index aae792fc960ca6..99d784c2f8a7aa 100644
--- a/addons/project/static/tests/project_task_calendar.test.js
+++ b/addons/project/static/tests/project_task_calendar.test.js
@@ -311,8 +311,8 @@ test("project.task (calendar): toggle sub-tasks", async () => {
     ];
     await mountView(calendarMountParams);
     expect(".o_event").toHaveCount(1);
-    expect(".o_control_panel_navigation button i.fa-sliders").toHaveCount(1);
-    await click(".o_control_panel_navigation button i.fa-sliders");
+    expect(".o_control_panel_navigation button i[data-icon='tune']").toHaveCount(1);
+    await click(".o_control_panel_navigation button i[data-icon='tune']");
     await waitFor("span.o-dropdown-item");
     expect("span.o-dropdown-item").toHaveText("Show Sub-Tasks");
     await click("span.o-dropdown-item");
diff --git a/addons/project/static/tests/project_task_kanban_view.test.js b/addons/project/static/tests/project_task_kanban_view.test.js
index f04ad1a66e37cd..12cec2026a2a5c 100644
--- a/addons/project/static/tests/project_task_kanban_view.test.js
+++ b/addons/project/static/tests/project_task_kanban_view.test.js
@@ -83,8 +83,8 @@ test("project.task (kanban): toggle sub-tasks", async () => {
     ];
     await mountView(viewParams);
     expect(".o_kanban_record").toHaveCount(1);
-    expect(".o_control_panel_navigation button i.fa-sliders").toHaveCount(1);
-    await click(".o_control_panel_navigation button i.fa-sliders");
+    expect(".o_control_panel_navigation button i[data-icon='tune']").toHaveCount(1);
+    await click(".o_control_panel_navigation button i[data-icon='tune']");
     await waitFor("span.o-dropdown-item");
     expect("span.o-dropdown-item").toHaveText("Show Sub-Tasks");
     await click("span.o-dropdown-item");
diff --git a/addons/project/static/tests/project_task_list_view.test.js b/addons/project/static/tests/project_task_list_view.test.js
index c587140b67aa94..395bbc35a7eccb 100644
--- a/addons/project/static/tests/project_task_list_view.test.js
+++ b/addons/project/static/tests/project_task_list_view.test.js
@@ -73,8 +73,8 @@ test("project.task (list): toggle sub-tasks", async () => {
         `,
     });
     expect(".o_data_row").toHaveCount(1);
-    expect(".o_control_panel_navigation button i.fa-sliders").toHaveCount(1);
-    await click(".o_control_panel_navigation button i.fa-sliders");
+    expect(".o_control_panel_navigation button i[data-icon='tune']").toHaveCount(1);
+    await click(".o_control_panel_navigation button i[data-icon='tune']");
     await waitFor("span.o-dropdown-item");
     expect("span.o-dropdown-item").toHaveText("Show Sub-Tasks");
     await click("span.o-dropdown-item");
diff --git a/addons/project/static/tests/project_task_priority_switch.test.js b/addons/project/static/tests/project_task_priority_switch.test.js
index 29d524e2bbe353..6b7aa7048b2335 100644
--- a/addons/project/static/tests/project_task_priority_switch.test.js
+++ b/addons/project/static/tests/project_task_priority_switch.test.js
@@ -20,13 +20,13 @@ test("project.task (form): check ProjectTaskPrioritySwitch", async () => {
         `,
     });
 
-    expect("div[name='priority'] .fa-star-o").toHaveCount(1, {
-        message: "The low priority should display the fa-star-o (empty) icon",
+    expect("div[name='priority'] [data-icon='star']").toHaveCount(1, {
+        message: "The low priority should display the star (empty) icon",
     });
     await press("alt+r");
     await animationFrame();
-    expect("div[name='priority'] .fa-star").toHaveCount(1, {
+    expect("div[name='priority'] [data-icon='star'].oi-filled").toHaveCount(1, {
         message:
-            "After using the alt+r hotkey the priority should be set to high and the widget should display the fa-star (filled) icon",
+            "After using the alt+r hotkey the priority should be set to high and the widget should display the star (filled) icon",
     });
 });
diff --git a/addons/project/static/tests/project_task_state_selection.test.js b/addons/project/static/tests/project_task_state_selection.test.js
index 6c80bc64bdb49c..e5501536c9a95d 100644
--- a/addons/project/static/tests/project_task_state_selection.test.js
+++ b/addons/project/static/tests/project_task_state_selection.test.js
@@ -35,12 +35,12 @@ test("project.task (kanban): check task state widget", async () => {
 
     await click(".o-dropdown--menu span.text-danger");
     await animationFrame();
-    expect("div[name='state']:first-child button.dropdown-toggle i.fa-times-circle").toBeVisible({
+    expect("div[name='state']:first-child button.dropdown-toggle i[data-icon='cancel']").toBeVisible({
         message:
-            "If the canceled state as been selected, the fa-times-circle icon should be displayed",
+            "If the canceled state as been selected, the cancel icon should be displayed",
     });
 
-    await click("div[name='state'] i.fa-hourglass-o");
+    await click("div[name='state'] i[data-icon='hourglass_empty']");
     await animationFrame();
     expect(".o-dropdown--menu").toHaveCount(0, {
         message: "When trying to click on the waiting icon, no dropdown menu should display",
diff --git a/addons/project/static/tests/project_task_subtask.test.js b/addons/project/static/tests/project_task_subtask.test.js
index 2a456ce5153298..1b1ab93272e6b6 100644
--- a/addons/project/static/tests/project_task_subtask.test.js
+++ b/addons/project/static/tests/project_task_subtask.test.js
@@ -198,7 +198,7 @@ test("project.task (kanban): check closed subtask count update", async () => {
 
     await click(inProgressStatesSelector);
     await animationFrame();
-    await click(".project_task_state_selection_menu .fa-check-circle");
+    await click(".project_task_state_selection_menu [data-icon='check_circle']");
     await animationFrame();
     expect(inProgressStatesSelector).toHaveCount(0, {
         message: "The state of the subtask should no longer be in progress",
diff --git a/addons/project/static/tests/project_task_template_dropdown.test.js b/addons/project/static/tests/project_task_template_dropdown.test.js
index 7ab460307a47dd..8c86e56061f13f 100644
--- a/addons/project/static/tests/project_task_template_dropdown.test.js
+++ b/addons/project/static/tests/project_task_template_dropdown.test.js
@@ -119,7 +119,7 @@ for (const [viewType, newButtonClass] of [
         await hover("button.dropdown-item:contains('Template Task 1')");
         await animationFrame();
 
-        await contains(".o_template_icon_group:first > i.fa-trash").click();
+        await contains(".o_template_icon_group:first > i[data-icon='delete'].oi-filled").click();
         expect(".modal-body").toHaveCount(1, {
             message: "A confirmation modal should appear when deleting a template",
         });
@@ -128,7 +128,7 @@ for (const [viewType, newButtonClass] of [
         expect.verifySteps(["unlink"]);
 
         await animationFrame();
-        await contains(".o_template_icon_group:first > i.fa-pencil").click();
+        await contains(".o_template_icon_group:first > i[data-icon='edit']").click();
         expect.verifySteps(["task template opened"]);
 
     });
diff --git a/addons/project/static/tests/tours/project_task_history.js b/addons/project/static/tests/tours/project_task_history.js
index 0285582d46a1ae..a701a8049293bf 100644
--- a/addons/project/static/tests/tours/project_task_history.js
+++ b/addons/project/static/tests/tours/project_task_history.js
@@ -76,7 +76,7 @@ registry.category("web_tour.tours").add("project_task_history_tour", {
         ...changeDescriptionContentAndSave("3"),
         {
             content: "Open History Dialog",
-            trigger: ".o_form_view .o_cp_action_menus i.fa-cog",
+            trigger: ".o_form_view .o_cp_action_menus i[data-icon='settings']",
             run: "click",
         },
         {
@@ -84,7 +84,7 @@ registry.category("web_tour.tours").add("project_task_history_tour", {
         },
         {
             content: "Open History Dialog",
-            trigger: ".o_popover .o_menu_item:has(i.fa-history):contains(Version history)",
+            trigger: ".o_popover .o_menu_item:has(i[data-icon='history']):contains(Version history)",
             run: "click",
         },
         {
@@ -180,7 +180,7 @@ registry.category("web_tour.tours").add("project_task_history_tour", {
         },
         {
             content: "Open History Dialog",
-            trigger: ".o_cp_action_menus i.fa-cog",
+            trigger: ".o_cp_action_menus i[data-icon='settings']",
             run: "click",
         },
         {
@@ -188,7 +188,7 @@ registry.category("web_tour.tours").add("project_task_history_tour", {
         },
         {
             content: "Open History Dialog",
-            trigger: ".o_menu_item i.fa-history",
+            trigger: ".o_menu_item i[data-icon='history']",
             run: "click",
         },
         {
@@ -229,13 +229,13 @@ registry.category("web_tour.tours").add("project_task_last_history_steps_tour",
         ...stepUtils.saveForm(),
     {
         content: "Open History Dialog",
-        trigger: ".o_cp_action_menus i.fa-cog",
+        trigger: ".o_cp_action_menus i[data-icon='settings']",
         run: "click",
     }, {
         trigger: ".dropdown-menu",
     }, {
         content: "Open History Dialog",
-        trigger: ".o_menu_item i.fa-history",
+        trigger: ".o_menu_item i[data-icon='history']",
         run: "click",
     }, {
         trigger: ".modal .html-history-dialog.html-history-loaded",
diff --git a/addons/project/static/tests/tours/project_update_tour_tests.js b/addons/project/static/tests/tours/project_update_tour_tests.js
index b6814dc7ce8324..7f92b201b7b198 100644
--- a/addons/project/static/tests/tours/project_update_tour_tests.js
+++ b/addons/project/static/tests/tours/project_update_tour_tests.js
@@ -128,7 +128,7 @@ registry.category("web_tour.tours").add('project_update_tour', {
     trigger: "button[name='action_view_tasks']",
     run: "click",
 }, {
-    trigger: ".o_control_panel_navigation button i.fa-sliders",
+    trigger: ".o_control_panel_navigation button i[data-icon='tune']",
     content: 'Open embedded actions',
     run: "click",
 }, {
diff --git a/addons/project/views/account_analytic_account_views.xml b/addons/project/views/account_analytic_account_views.xml
index 77ef04f0925550..dc15c2ed045a84 100644
--- a/addons/project/views/account_analytic_account_views.xml
+++ b/addons/project/views/account_analytic_account_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <xpath expr="//button[@name='%(analytic.account_analytic_line_action)d']" position="before">
                 <button class="oe_stat_button" type="object" name="action_view_projects"
-                    icon="fa-puzzle-piece" invisible="project_count == 0">
+                    icon="extension" invisible="project_count == 0">
                     <field string="Projects" name="project_count" widget="statinfo"/>
                 </button>
             </xpath>
diff --git a/addons/project/views/project_milestone_views.xml b/addons/project/views/project_milestone_views.xml
index 99298383c3e0a3..da64cd1da775e7 100644
--- a/addons/project/views/project_milestone_views.xml
+++ b/addons/project/views/project_milestone_views.xml
@@ -10,7 +10,7 @@
                         <button name="%(project.action_view_task_from_milestone)d"
                                 type="action"
                                 class="oe_stat_button"
-                                icon="fa-check"
+                                icon="check"
                                 context="{'default_project_id': project_id}"
                                 groups="project.group_project_milestone"
                                 close="1"
diff --git a/addons/project/views/project_portal_project_task_templates.xml b/addons/project/views/project_portal_project_task_templates.xml
index 10447ec8a0ec08..8b239f8f53a24b 100644
--- a/addons/project/views/project_portal_project_task_templates.xml
+++ b/addons/project/views/project_portal_project_task_templates.xml
@@ -2,15 +2,16 @@
 <odoo>
     <template id="portal_my_tasks_priority_widget_template" name="Priority Widget Template">
         <t t-set="priority_label" t-value="priority_labels[task.priority]"/>
-        <span t-attf-class="o_priority_star d-inline-block fa fa-star#{' text-warning' if task.priority != '0' else '-o opacity-75'} #{classes if classes else ''}" t-att-title="priority_label"/>
-        <span t-attf-class="o_priority_star d-inline-block fa fa-star#{' text-warning' if task.priority in ['2', '3'] else '-o opacity-75'} #{classes if classes else ''}" t-att-title="priority_label"/>
-        <span t-attf-class="o_priority_star d-inline-block fa fa-star#{' text-warning' if task.priority == '3' else '-o opacity-75'} #{classes if classes else ''}" t-att-title="priority_label"/>
+        <span t-attf-class="o_priority_star d-inline-block oi #{'oi-filled text-warning' if task.priority != '0' else 'opacity-75'} #{classes if classes else ''}" data-icon="star" t-att-title="priority_label"/>
+        <span t-attf-class="o_priority_star d-inline-block oi #{'oi-filled text-warning' if task.priority in ['2', '3'] else 'opacity-75'} #{classes if classes else ''}" data-icon="star" t-att-title="priority_label"/>
+        <span t-attf-class="o_priority_star d-inline-block oi #{'oi-filled text-warning' if task.priority == '3' else 'opacity-75'} #{classes if classes else ''}" data-icon="star" t-att-title="priority_label"/>
     </template>
 
     <template id="portal_my_tasks_state_widget_template" name="Status Widget Template">
         <span
             t-att-title="dict(task.fields_get(allfields=['state'])['state']['selection'])[task.state]"
-            t-attf-class="#{'fa' if task.state in ['1_done','1_canceled','04_waiting_normal'] else 'o_status rounded-circle' } #{'fa-check-circle text-success' if task.state == '1_done' else 'fa-times-circle text-danger' if task.state == '1_canceled' else 'bg-warning' if task.state == '02_changes_requested' else 'bg-success' if task.state == '03_approved' else 'fa-hourglass-o' if task.state == '04_waiting_normal' else ''}"
+            t-attf-class="#{'oi' if task.state in ['1_done','1_canceled','04_waiting_normal'] else 'o_status rounded-circle' } #{'oi-filled text-success' if task.state == '1_done' else 'oi-filled text-danger' if task.state == '1_canceled' else 'bg-warning' if task.state == '02_changes_requested' else 'bg-success' if task.state == '03_approved' else '' if task.state == '04_waiting_normal' else ''}"
+            t-attf-data-icon="#{'check_circle' if task.state == '1_done' else 'cancel' if task.state == '1_canceled' else '' if task.state == '03_approved' else 'hourglass_empty' if task.state == '04_waiting_normal' else ''}"
         />
     </template>
     <template id="portal_my_tasks_badge_widget_template" name="badge Widget Template">
diff --git a/addons/project/views/project_project_views.xml b/addons/project/views/project_project_views.xml
index 772d370a3bcf15..5c2ec1affbab47 100644
--- a/addons/project/views/project_project_views.xml
+++ b/addons/project/views/project_project_views.xml
@@ -41,7 +41,7 @@
                     </header>
                 <sheet string="Project">
                     <div class="oe_button_box" name="button_box" groups="base.group_user">
-                        <button class="oe_stat_button" type="object" name="action_view_tasks" icon="fa-check">
+                        <button class="oe_stat_button" type="object" name="action_view_tasks" icon="check">
                             <div class="o_field_widget o_stat_info">
                                 <field class="o_stat_text" name="label_tasks" readonly="1"/>
                                 <span class="o_stat_value">
@@ -53,9 +53,9 @@
                             </div>
                         </button>
                         <button class="oe_stat_button" name="action_get_list_view" type="object" groups="project.group_project_milestone" invisible="not allow_milestones or milestone_count &lt;= 0 or is_template">
-                            <i class="fa o_button_icon fa-check" invisible="next_milestone_status == False or next_milestone_status != 'on_track'" title="On Track"/>
-                            <i class="fa o_button_icon fa-check text-success" invisible="next_milestone_status != 'next_track'" title="On Track"/>
-                            <i class="fa o_button_icon fa-check text-danger" invisible="next_milestone_status != 'off_track'" title="Off Track"/>
+                            <i class="oi o_button_icon" data-icon="check" invisible="next_milestone_status == False or next_milestone_status != 'on_track'" title="On Track"/>
+                            <i class="oi o_button_icon text-success" data-icon="check" invisible="next_milestone_status != 'next_track'" title="On Track"/>
+                            <i class="oi o_button_icon text-danger" data-icon="check" invisible="next_milestone_status != 'off_track'" title="Off Track"/>
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_text">Milestones</span>
                                 <span class="o_stat_value">
@@ -73,7 +73,7 @@
                             <span class="o_field_widget ps-2">)</span>
                         </button>
                         <button class="oe_stat_button" type="object" name="action_project_task_burndown_chart_report"
-                            icon="fa-area-chart" groups="project.group_project_user">
+                            icon="area_chart" groups="project.group_project_user">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Burndown<br/> Chart</span>
                             </div>
@@ -101,19 +101,19 @@
                     <group>
                         <div>
                             <div class="o_input_box">
-                                <i class="o_input_box_overlay_start fa fa-user" title="Customer" name="partner_id"/>
+                                <i class="o_input_box_overlay_start oi oi-filled" data-icon="person" title="Customer" name="partner_id"/>
                                 <field name="partner_id" nolabel="1" widget="res_partner_many2one" placeholder="Select Customer" context="{'show_address': True}"/>
                             </div>
                             <div class="o_input_box" invisible="not partner_phone">
-                                <i class="o_input_box_overlay_start fa fa-phone" title="Phone"/>
+                                <i class="o_input_box_overlay_start oi oi-filled" data-icon="phone" title="Phone"/>
                                 <field name="partner_phone" nolabel="1" widget="phone"/>
                             </div>
                             <div class="o_input_box" invisible="not partner_email">
-                                <i class="o_input_box_overlay_start fa fa-envelope" title="Email"/>
+                                <i class="o_input_box_overlay_start oi oi-filled" data-icon="mail" title="Email"/>
                                 <field name="partner_email" nolabel="1" widget="email"/>
                             </div>
                             <div class="o_input_box">
-                                <i class="o_input_box_overlay_start fa fa-tag" title="Tags"/>
+                                <i class="o_input_box_overlay_start oi" data-icon="label" title="Tags"/>
                                 <field name="tag_ids" nolabel="1" widget="many2many_tags" placeholder="Select Tags" options="{'color_field': 'color', 'on_tag_click': 'edit_color'}"/>
                             </div>
                         </div>
@@ -163,10 +163,10 @@
                                     <field name="privacy_visibility" widget="radio"/>
                                     <field name="company_id" groups="base.group_multi_company" options="{'no_create': True}" placeholder="Visible to all"/>
                                     <div colspan="2" class="text-muted o_input_box" invisible="access_instruction_message == ''">
-                                        <i class="o_input_box_overlay_start fa fa-lightbulb-o" title="Info"/><field name="access_instruction_message" nolabel="1"/>
+                                        <i class="o_input_box_overlay_start oi" data-icon="lightbulb" title="Info"/><field name="access_instruction_message" nolabel="1"/>
                                     </div>
                                     <div colspan="2" class="text-muted o_input_box" invisible="privacy_visibility_warning == ''">
-                                        <i class="o_input_box_overlay_start fa fa-warning" title="Warning"/><field name="privacy_visibility_warning" nolabel="1"/>
+                                        <i cclass="o_input_box_overlay_start oi" data-icon="warning" title="Warning"/><field name="privacy_visibility_warning" nolabel="1"/>
                                     </div>
                                 </group>
                                 <div class="o_col">
@@ -504,20 +504,20 @@
                                 </div>
                                 <div class="o_project_kanban_body min-w-0 pb-4 me-2">
                                     <span name="partner_name" class="text-muted d-flex align-items-baseline" t-if="record.partner_id.value">
-                                        <span class="fa fa-user me-2" aria-label="Partner" title="Partner"></span><field class="text-truncate" name="partner_id"/>
+                                        <span class="oi oi-filled me-2" data-icon="person" aria-label="Partner" title="Partner"></span><field class="text-truncate" name="partner_id"/>
                                     </span>
                                     <div t-if="record.date.raw_value or record.date_start.raw_value" class="text-muted d-flex align-items-baseline">
-                                        <span class="fa fa-clock-o me-2" title="Dates"/>
+                                        <span class="oi me-2" data-icon="schedule" title="Dates"/>
                                         <field name="date_start" widget="daterange" options="{'end_date_field': 'date'}"/>
                                     </div>
                                     <div t-if="record.alias_email.value" class="text-muted text-truncate" t-att-title="record.alias_email.value">
-                                        <span class="fa fa-envelope-o me-2" aria-label="Domain Alias" title="Domain Alias"></span><field name="alias_email"/>
+                                        <span class="oi me-2" data-icon="mail" aria-label="Domain Alias" title="Domain Alias"></span><field name="alias_email"/>
                                     </div>
                                     <div t-if="record.show_ratings.raw_value and record.rating_count.raw_value &gt; 0" class="d-flex text-muted">
                                         <b class="me-1">
-                                            <span class="fa mt4 fa-smile-o fw-bolder text-success" t-if="record.rating_avg.raw_value &gt;= 3.66" title="Average Rating: Happy" role="img" aria-label="Happy face"/>
-                                            <span class="fa mt4 fa-meh-o fw-bolder text-warning" t-elif="record.rating_avg.raw_value &gt;= 2.33" title="Average Rating: Neutral" role="img" aria-label="Neutral face"/>
-                                            <span class="fa mt4 fa-frown-o fw-bolder text-danger" t-else="" title="Average Rating: Unhappy" role="img" aria-label="Unhappy face"/>
+                                            <span class="oi mt4 fw-bolder text-success" data-icon="sentiment_satisfied" t-if="record.rating_avg.raw_value &gt;= 3.66" title="Average Rating: Happy" role="img" aria-label="Happy face"/>
+                                            <span class="oi mt4 fw-bolder text-warning" data-icon="sentiment_neutral" t-elif="record.rating_avg.raw_value &gt;= 2.33" title="Average Rating: Neutral" role="img" aria-label="Neutral face"/>
+                                            <span class="oi mt4 fw-bolder text-danger" data-icon="sentiment_sad" t-else="" title="Average Rating: Unhappy" role="img" aria-label="Unhappy face"/>
                                         </b>
                                         <t t-if="record.rating_avg.raw_value % 1 == 0">
                                             <field name="rating_avg" nolabel="1" widget="float" digits="[1, 0]"/>
@@ -545,7 +545,7 @@
                                             type="object"
                                             t-attf-title="#{record.milestone_count_reached.value} Milestones reached out of #{record.milestone_count.value}"
                                         >
-                                            <span class="fa fa-flag me-1"/>
+                                            <span class="oi oi-filled me-1" data-icon="flag"/>
                                             <field name="milestone_count_reached"/>/<field name="milestone_count"/>
                                         </a>
                                     </div>
diff --git a/addons/project/views/project_sharing_project_task_views.xml b/addons/project/views/project_sharing_project_task_views.xml
index 1e7864a6d1e1f2..2887bb1ca43b49 100644
--- a/addons/project/views/project_sharing_project_task_views.xml
+++ b/addons/project/views/project_sharing_project_task_views.xml
@@ -54,7 +54,7 @@
                     <field t-if="record.date_deadline.raw_value" name="date_deadline" invisible="state in ['1_done', '1_canceled']" widget="remaining_days"/>
                     <field t-if="record.displayed_image_id.value" groups="base.group_user" name="displayed_image_id" widget="attachment_image"/>
                     <footer t-if="!selection_mode">
-                        <field name="priority" class="pt-1" widget="priority"/>
+                        <field name="priority" widget="priority"/>
                         <div class="d-flex ms-auto text-truncate">
                             <span t-if="record.portal_user_names.raw_value.length > 0" class="pe-2 text-truncate" t-att-title="record.portal_user_names.raw_value">
                                 <t t-set="user_count" t-value="record.portal_user_names.raw_value.split(',').length"/>
@@ -115,23 +115,23 @@
                 </header>
                 <div groups="base.group_user" role="status" class="alert alert-info alert-dismissible rounded-0 fade show d-print-none css_editable_mode_hidden">
                     <div class="text-center">This is a preview of how the project will look when it's shared with customers and they have editing access.
-                        <a name="action_redirect_to_project_task_form" type="object"><i class="oi oi-arrow-right me-1"/>Back to edit mode</a>
+                        <a name="action_redirect_to_project_task_form" type="object"><i class="oi me-1" data-icon="east"/>Back to edit mode</a>
                     </div>
                 </div>
                 <sheet string="Task">
                     <div class="oe_button_box" name="button_box">
                         <field name="display_parent_task_button" invisible="1"/>
                         <field name="recurrence_id" invisible="1" />
-                        <button name="action_project_sharing_view_parent_task" type="object" class="oe_stat_button" icon="fa-check" invisible="not display_parent_task_button">
+                        <button name="action_project_sharing_view_parent_task" type="object" class="oe_stat_button" icon="check" invisible="not display_parent_task_button">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Parent Task</span>
                             </div>
                         </button>
                         <button name="action_project_sharing_recurring_tasks" type="object" invisible="not active or not recurrence_id or not allow_recurring_tasks"
-                            class="oe_stat_button" icon="fa-repeat" context="{'default_user_ids': [(6, 0, [uid])]}">
+                            class="oe_stat_button" icon="redo" context="{'default_user_ids': [(6, 0, [uid])]}">
                             <field name="recurring_count" widget="statinfo" string="Recurring Tasks"/>
                         </button>
-                        <button name="action_project_sharing_open_subtasks" type="object" class="oe_stat_button" icon="fa-check"
+                        <button name="action_project_sharing_open_subtasks" type="object" class="oe_stat_button" icon="check"
                             invisible="not id or subtask_count == 0" context="{
                                 'default_user_ids': [(6, 0, [uid])],
                                 'default_project_id': project_id,
@@ -140,7 +140,7 @@
                             <field name="subtask_count" widget="statinfo" string="Sub-tasks"/>
                             <field name="display_in_project" invisible="True"/>
                         </button>
-                        <button name="action_project_sharing_open_blocking" type="object" invisible="not dependent_tasks_count or not allow_task_dependencies" class="oe_stat_button" icon="fa-check">
+                        <button name="action_project_sharing_open_blocking" type="object" invisible="not dependent_tasks_count or not allow_task_dependencies" class="oe_stat_button" icon="check">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_text">Blocked Tasks</span>
                                 <span class="o_stat_value ">
diff --git a/addons/project/views/project_task_views.xml b/addons/project/views/project_task_views.xml
index e2f41805201781..573901d3175352 100644
--- a/addons/project/views/project_task_views.xml
+++ b/addons/project/views/project_task_views.xml
@@ -385,9 +385,9 @@
                         <field name="rating_avg" invisible="1"/>
                         <field name="rating_active" invisible="1"/>
                         <button name="action_open_ratings" type="object" invisible="rating_count == 0 or not rating_active or has_template_ancestor or has_project_template" class="oe_stat_button">
-                            <i class="fa fa-fw o_button_icon fa-smile-o text-success" invisible="rating_avg &lt; 3.66" title="Happy"/>
-                            <i class="fa fa-fw o_button_icon fa-meh-o text-warning" invisible="rating_avg &lt; 2.33 or rating_avg &gt;= 3.66" title="Neutral"/>
-                            <i class="fa fa-fw o_button_icon fa-frown-o text-danger" invisible="rating_avg &gt;= 2.33" title="Unhappy"/>
+                            <i class="oi oi-fw o_button_icon" data-icon="sentiment_satisfied" invisible="rating_avg &lt; 3.66" title="Happy"/>
+                            <i class="oi oi-fw o_button_icon" data-icon="sentiment_neutral" invisible="rating_avg &lt; 2.33 or rating_avg &gt;= 3.66" title="Neutral"/>
+                            <i class="oi oi-fw o_button_icon" data-icon="sentiment_sad" invisible="rating_avg &gt;= 2.33" title="Unhappy"/>
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value"><field name="rating_avg_text" nolabel="1"/></span>
                                 <span class="o_stat_text">Last Rating</span>
@@ -395,15 +395,15 @@
                         </button>
                         <!-- Dummy tag used to organize buttons -->
                         <span id="end_rating_buttons" invisible="1"/>
-                        <button name="action_open_parent_task" type="object" class="oe_stat_button" icon="fa-check" invisible="not parent_id">
+                        <button name="action_open_parent_task" type="object" class="oe_stat_button" icon="check" invisible="not parent_id">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Parent Task</span>
                             </div>
                         </button>
-                        <button name="action_recurring_tasks" type="object" invisible="not active or not recurrence_id or not allow_recurring_tasks" class="oe_stat_button" icon="fa-repeat" groups="project.group_project_recurring_tasks">
+                        <button name="action_recurring_tasks" type="object" invisible="not active or not recurrence_id or not allow_recurring_tasks" class="oe_stat_button" icon="redo" groups="project.group_project_recurring_tasks">
                             <field name="recurring_count" widget="statinfo" string="Recurring Tasks"/>
                         </button>
-                        <button name="%(project_task_action_sub_task)d" type="action" class="oe_stat_button" icon="fa-check"
+                        <button name="%(project_task_action_sub_task)d" type="action" class="oe_stat_button" icon="check"
                             invisible="not id or subtask_count == 0"
                             context="{
                                 'default_project_id': project_id,
@@ -421,7 +421,7 @@
                                 </span>
                             </div>
                         </button>
-                        <button name="action_dependent_tasks" type="object" invisible="dependent_tasks_count == 0 or not allow_task_dependencies" class="oe_stat_button" icon="fa-check" groups="project.group_project_task_dependencies">
+                        <button name="action_dependent_tasks" type="object" invisible="dependent_tasks_count == 0 or not allow_task_dependencies" class="oe_stat_button" icon="check" groups="project.group_project_task_dependencies">
                             <field name="dependent_tasks_count" widget="statinfo" string="Blocked Tasks" />
                         </button>
                         <!-- Dummy tag used to organize buttons -->
@@ -468,7 +468,7 @@
                             <div id="date_deadline_and_recurring_task" class="o_input_box">
                                 <field name="date_deadline" nolabel="1" decoration-danger="date_deadline and date_deadline &lt; current_date and state not in ['1_done', '1_canceled']"/>
                                 <field name="recurring_task" nolabel="1" class="w-auto w-lg-100"
-                                       widget="boolean_icon" options="{'icon': 'fa-repeat'}"
+                                       widget="boolean_icon" options="{'icon': 'redo'}"
                                        invisible="not active or parent_id or not allow_recurring_tasks"
                                        groups="project.group_project_recurring_tasks"/>
                             </div>
@@ -711,7 +711,7 @@
                         <t t-name="card">
                             <main t-att-class="['1_done', '1_canceled'].includes(record.state.raw_value) ? 'opacity-50' : ''">
                                 <a t-if="record.parent_id.raw_value" class="o_kanban_parent mw-100 me-auto pe-3 btn-link o_small-fs text-dark text-truncate" title="See Parent Task" name="action_open_parent_task" type="object" role="button">
-                                    <i class="fa fa-level-down me-1"/>
+                                    <i class="oi me-1" data-icon="subdirectory_arrow_right"/>
                                     <field name="parent_id"/>
                                 </a>
                                 <field name="name" class="fw-bold fs-5"/>
@@ -728,12 +728,12 @@
                                     <div class="d-flex align-items-center gap-1">
                                         <field name="activity_ids" widget="kanban_activity" style="margin-right: 2px"/>
                                         <b t-if="record.rating_active.raw_value and record.rating_count.raw_value &gt; 0">
-                                            <span class="fa fa-fw fa-smile-o text-success rating_face" t-if="record.rating_avg.raw_value &gt;= 3.66" title="Average Rating: Happy" role="img" aria-label="Happy face"/>
-                                            <span class="fa fa-fw fa-meh-o text-warning rating_face" t-elif="record.rating_avg.raw_value &gt;= 2.33" title="Average Rating: Neutral" role="img" aria-label="Neutral face"/>
-                                            <span class="fa fa-fw fa-frown-o text-danger rating_face" t-else="" title="Average Rating: Unhappy" role="img" aria-label="Unhappy face"/>
+                                            <span class="oi oi-fw o_button_icon text-success rating_face" data-icon="sentiment_satisfied" t-if="record.rating_avg.raw_value &gt;= 3.66" title="Average Rating: Happy" role="img" aria-label="Happy face"/>
+                                            <span class="oi oi-fw o_button_icon text-warning rating_face" data-icon="sentiment_neutral" t-elif="record.rating_avg.raw_value &gt;= 2.33" title="Average Rating: Neutral" role="img" aria-label="Neutral face"/>
+                                            <span class="oi oi-fw o_button_icon text-danger rating_face" data-icon="sentiment_sad" t-else="" title="Average Rating: Unhappy" role="img" aria-label="Unhappy face"/>
                                         </b>
                                         <a t-if="!record.project_id.raw_value" class="text-muted" style="font-size: 17px; margin-left: 1.5px">
-                                            <i title="Private Task" class="fa fa-lock"/>
+                                            <i title="Private Task" class="oi" data-icon="lock"/>
                                         </a>
                                         <t t-if="record.project_id.raw_value and record.subtask_count.raw_value">
                                             <widget name="subtask_counter" class="me-1"/>
@@ -909,7 +909,7 @@
                                 <field name="name" display="full" class="o_text_block"/>
                                 <div t-att-title="record.project_id.value" invisible="context.get('default_project_id', False)">
                                     <field t-if="record.project_id.value" name="project_id" muted="1" class="o_text_block"/>
-                                    <div t-else="" class="fst-italic text-muted"><i class="fa fa-lock"/> Private</div>
+                                    <div t-else="" class="fst-italic text-muted"><i class="oi" data-icon="lock"/> Private</div>
                                 </div>
                             </div>
                             <div class="d-flex justify-content-end gap-2 flex-grow-1">
diff --git a/addons/project/views/res_partner_views.xml b/addons/project/views/res_partner_views.xml
index 4cc9b7b69b87cf..6d10e33df0449d 100644
--- a/addons/project/views/res_partner_views.xml
+++ b/addons/project/views/res_partner_views.xml
@@ -7,7 +7,7 @@
             <field name="priority" eval="8"/>
             <field name="arch" type="xml">
                 <div name="button_box" position="inside">
-                    <button class="oe_stat_button" type="object" name="action_view_tasks" groups="project.group_project_user" icon="fa-check">
+                    <button class="oe_stat_button" type="object" name="action_view_tasks" groups="project.group_project_user" icon="check">
                         <field  string="Tasks" name="task_count" widget="statinfo"/>
                     </button>
                 </div>
diff --git a/addons/project_mrp/views/mrp_production_views.xml b/addons/project_mrp/views/mrp_production_views.xml
index f78bf7fb6cf437..8bbd1c2c0a3587 100644
--- a/addons/project_mrp/views/mrp_production_views.xml
+++ b/addons/project_mrp/views/mrp_production_views.xml
@@ -17,7 +17,7 @@
         <field name="inherit_id" ref="mrp.mrp_production_form_view"/>
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
-                <button name="action_open_project" type="object" class="oe_stat_button" icon="fa-puzzle-piece"
+                <button name="action_open_project" type="object" class="oe_stat_button" icon="extension"
                     invisible="not project_id" groups="project.group_project_user">
                     <div class="o_stat_info">
                         <span class="o_stat_text">Project</span>
diff --git a/addons/project_mrp/views/project_project_views.xml b/addons/project_mrp/views/project_project_views.xml
index db2902ece6432e..0c867d74114d77 100644
--- a/addons/project_mrp/views/project_project_views.xml
+++ b/addons/project_mrp/views/project_project_views.xml
@@ -6,11 +6,11 @@
         <field name="inherit_id" ref="project.edit_project"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
-                <button class="oe_stat_button" type="object" name="action_view_mrp_bom" icon="fa-flask"
+                <button class="oe_stat_button" type="object" name="action_view_mrp_bom" icon="science"
                     groups="mrp.group_mrp_user" invisible="bom_count == 0">
                     <field string="Bills of Materials" name="bom_count" widget="statinfo"/>
                 </button>
-                <button class="oe_stat_button" type="object" name="action_view_mrp_production" icon="fa-wrench"
+                <button class="oe_stat_button" type="object" name="action_view_mrp_production" icon="build"
                     groups="mrp.group_mrp_user" invisible="production_count == 0">
                     <field string="Manufacturing Orders" name="production_count" widget="statinfo"/>
                 </button>
diff --git a/addons/project_purchase/views/project_project.xml b/addons/project_purchase/views/project_project.xml
index 287fcafa5ac0ea..fbd063585f65a4 100644
--- a/addons/project_purchase/views/project_project.xml
+++ b/addons/project_purchase/views/project_project.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="project.edit_project"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
-                <button class="oe_stat_button" type="object" name="action_open_project_purchase_orders" icon="fa-credit-card"
+                <button class="oe_stat_button" type="object" name="action_open_project_purchase_orders" icon="credit_card"
                     groups="purchase.group_purchase_user" invisible="purchase_orders_count == 0">
                     <field string="Purchase Orders" name="purchase_orders_count" widget="statinfo"/>
                 </button>
diff --git a/addons/project_todo/static/src/components/todo_done_checkmark/todo_done_checkmark.xml b/addons/project_todo/static/src/components/todo_done_checkmark/todo_done_checkmark.xml
index 5fc71f7af4b89b..6437bd26172013 100644
--- a/addons/project_todo/static/src/components/todo_done_checkmark/todo_done_checkmark.xml
+++ b/addons/project_todo/static/src/components/todo_done_checkmark/todo_done_checkmark.xml
@@ -7,12 +7,16 @@
                t-on-click.stop="this.onDoneToggled"
                t-on-mouseleave="this.actualizeDoneState"
                t-on-mouseover="this.freezeDoneState"
-               t-attf-class="o_todo_done_button fa fa-lg fa-check-circle{{!this.stateDone.isDone ? '-o' : ' done_button_enabled'}}"/>
+               class="o_todo_done_button oi oi-lg"
+               t-att-class="{'oi-filled done_button_enabled': this.stateDone.isDone}"
+               data-icon="check_circle"/>
         </t>
         <t t-else="">
             <a t-att-title="this.stateDone.isDone ? 'Mark as to-do' : 'Mark as done'"
                t-on-click.stop="this.onDoneToggled"
-               t-attf-class="o_todo_done_button_mobile fa fa-lg fa-check-circle{{!this.stateDone.isDone ? '-o' : ' done_button_enabled'}}"/>
+               class="o_todo_done_button_mobile oi oi-lg"
+               t-att-class="{'oi-filled done_button_enabled': this.stateDone.isDone}"
+               data-icon="check_circle"/>
         </t>
     </t>
 
diff --git a/addons/project_todo/static/src/views/todo_form/todo_form_control_panel.xml b/addons/project_todo/static/src/views/todo_form/todo_form_control_panel.xml
index 45307084ec6d29..a7256bb741d39b 100644
--- a/addons/project_todo/static/src/views/todo_form/todo_form_control_panel.xml
+++ b/addons/project_todo/static/src/views/todo_form/todo_form_control_panel.xml
@@ -11,7 +11,7 @@
                 t-attf-class="btn btn-light btn-chatter todo_toggle_chatter #{this.state.displayChatter ? 'active' : '' }"
                 t-on-click="this.toggleChatter"
             >
-                <i class="fa fa-comments"/>
+                <i class="oi oi-filled" data-icon="forum"/>
             </a>
         </xpath>
     </t>
diff --git a/addons/project_todo/static/src/views/todo_form/todo_form_controller.js b/addons/project_todo/static/src/views/todo_form/todo_form_controller.js
index 8cf966c44b724b..ef350914b6c57c 100644
--- a/addons/project_todo/static/src/views/todo_form/todo_form_controller.js
+++ b/addons/project_todo/static/src/views/todo_form/todo_form_controller.js
@@ -35,7 +35,7 @@ export class TodoFormController extends FormControllerWithHTMLExpander {
             ...super.getStaticActionMenuItems(),
             openHistoryDialog: {
                 sequence: 50,
-                icon: "fa fa-history",
+                icon: "history",
                 description: _t("Version History"),
                 callback: () => this.openHistoryDialog(),
             },
diff --git a/addons/project_todo/static/tests/tours/project_task_activities_split.js b/addons/project_todo/static/tests/tours/project_task_activities_split.js
index da4f1947809238..29c588211199c6 100644
--- a/addons/project_todo/static/tests/tours/project_task_activities_split.js
+++ b/addons/project_todo/static/tests/tours/project_task_activities_split.js
@@ -14,7 +14,7 @@ registry.category("web_tour.tours").add('project_task_activities_split', {
             content: 'Task "New Task!" is listed in the activity view',
             trigger: 'td.o_data_cell:contains("New Task!")',
         }, {
-            trigger: ".o_control_panel_navigation button i.fa-sliders",
+            trigger: ".o_control_panel_navigation button i[data-icon='tune']",
             content: "Open embedded actions dropdown",
             run: "click",
         }, {
diff --git a/addons/project_todo/static/tests/tours/project_todo_history.js b/addons/project_todo/static/tests/tours/project_todo_history.js
index 91e4aff40aa9a0..f53de53312c21b 100644
--- a/addons/project_todo/static/tests/tours/project_todo_history.js
+++ b/addons/project_todo/static/tests/tours/project_todo_history.js
@@ -55,7 +55,7 @@ registry.category("web_tour.tours").add("project_todo_history_tour", {
     },
     {
         content: "Open History Dialog",
-        trigger: ".o_form_view .o_cp_action_menus i.fa-cog",
+        trigger: ".o_form_view .o_cp_action_menus i[data-icon='settings']",
         run: "click",
     },
     {
@@ -63,7 +63,7 @@ registry.category("web_tour.tours").add("project_todo_history_tour", {
     },
     {
         content: "Open History Dialog",
-        trigger: ".o_menu_item i.fa-history",
+        trigger: ".o_menu_item i[data-icon='history']",
         run: "click",
 
     }, {
diff --git a/addons/project_todo/static/tests/tours/project_todo_main_functions.js b/addons/project_todo/static/tests/tours/project_todo_main_functions.js
index 5121a423d602bc..e54161e2eb9d12 100644
--- a/addons/project_todo/static/tests/tours/project_todo_main_functions.js
+++ b/addons/project_todo/static/tests/tours/project_todo_main_functions.js
@@ -124,7 +124,7 @@ registry.category("web_tour.tours").add('project_todo_main_functions', {
 },
 {
     isActive: ["auto"],
-    trigger: ".ui-autocomplete > li > a:not(:has(i.fa))",
+    trigger: ".ui-autocomplete > li > a:not(:has(i.oi))",
     run: "click",
 }, {
     trigger: '.o_field_widget[name="name"] textarea',
diff --git a/addons/purchase/models/res_partner.py b/addons/purchase/models/res_partner.py
index eca7c37863f65a..0bd4f79ec5a34e 100644
--- a/addons/purchase/models/res_partner.py
+++ b/addons/purchase/models/res_partner.py
@@ -49,7 +49,7 @@ def _compute_application_statistics_hook(self):
         if not self.env.user.has_group('purchase.group_purchase_user'):
             return data_list
         for partner in self.filtered(lambda partner: partner.purchase_order_count):
-            stat_info = {'iconClass': 'fa-credit-card', 'value': partner.purchase_order_count, 'label': _('Purchases')}
+            stat_info = {'icon': 'credit_card', 'value': partner.purchase_order_count, 'label': _('Purchases')}
             data_list[partner.id].append(stat_info)
         return data_list
 
diff --git a/addons/purchase/static/src/toaster_button/toaster_button_widget.xml b/addons/purchase/static/src/toaster_button/toaster_button_widget.xml
index f606c5be20da96..355a041e3f40f5 100644
--- a/addons/purchase/static/src/toaster_button/toaster_button_widget.xml
+++ b/addons/purchase/static/src/toaster_button/toaster_button_widget.xml
@@ -4,7 +4,7 @@
     <t t-name="purchase.ButtonWithNotification">
         <button t-on-click="this.onClick" t-att-name="this.props.method" type="button"
                 t-attf-class="btn oe_inline btn-link {{ this.props.additionalClasses || '' }}" t-att-title="this.props.title">
-            <i class="fa fa-fw o_button_icon fa-info-circle"/>
+            <i class="oi oi-fw o_button_icon" data-icon="info"/>
         </button>
     </t>
 
diff --git a/addons/purchase/static/src/views/purchase_dashboard.xml b/addons/purchase/static/src/views/purchase_dashboard.xml
index 879d2e97d1eac8..9abd2f105cb7f0 100644
--- a/addons/purchase/static/src/views/purchase_dashboard.xml
+++ b/addons/purchase/static/src/views/purchase_dashboard.xml
@@ -18,7 +18,7 @@
                                     <div class="fs-2">
                                         <span t-out="this.purchaseData['global']['draft']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['global']['draft']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['global']['draft']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['global']['draft']['priority']"/>
                                         </span>
                                     </div>New
                                 </a>
@@ -29,7 +29,7 @@
                                     <div class="fs-2">
                                         <span t-out="this.purchaseData['global']['sent']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['global']['sent']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['global']['sent']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['global']['sent']['priority']"/>
                                         </span>
                                     </div>RFQ Sent
                                 </a>
@@ -43,7 +43,7 @@
                                     <div class="fs-2">
                                         <span t-out="this.purchaseData['global']['late']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['global']['late']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['global']['late']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['global']['late']['priority']"/>
                                         </span>
                                     </div>Late RFQ
                                 </a>
@@ -58,7 +58,7 @@
                                     <div class="fs-2">
                                         <span t-out="this.purchaseData['global']['not_acknowledged']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['global']['not_acknowledged']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['global']['not_acknowledged']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['global']['not_acknowledged']['priority']"/>
                                         </span>
                                     </div>Not Acknowledged
                                 </a>
@@ -73,7 +73,7 @@
                                     <div class="fs-2">
                                         <span t-out="this.purchaseData['global']['late_receipt']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['global']['late_receipt']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['global']['late_receipt']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['global']['late_receipt']['priority']"/>
                                         </span>
                                     </div>Late Receipt
                                 </a>
@@ -91,7 +91,7 @@
                                     <div>
                                         <span t-out="this.purchaseData['my']['draft']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['my']['draft']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['my']['draft']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['my']['draft']['priority']"/>
                                         </span>
                                     </div>
                                 </a>
@@ -101,7 +101,7 @@
                                     <div>
                                         <span t-out="this.purchaseData['my']['sent']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['my']['sent']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['my']['sent']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['my']['sent']['priority']"/>
                                         </span>
                                     </div>
                                 </a>
@@ -112,7 +112,7 @@
                                     <div>
                                         <span t-out="this.purchaseData['my']['late']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['my']['late']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['my']['late']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['my']['late']['priority']"/>
                                         </span>
                                     </div>
                                 </a>
@@ -124,7 +124,7 @@
                                     <div>
                                         <span t-out="this.purchaseData['my']['not_acknowledged']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['my']['not_acknowledged']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['my']['not_acknowledged']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['my']['not_acknowledged']['priority']"/>
                                         </span>
                                     </div>
                                 </a>
@@ -135,7 +135,7 @@
                                     <div>
                                         <span t-out="this.purchaseData['my']['late_receipt']['all']"/>
                                         <span class="ps-4" t-if="this.purchaseData['my']['late_receipt']['priority']">
-                                            <span class="o_priority_star fa fa-star "/> <span t-out="this.purchaseData['my']['late_receipt']['priority']"/>
+                                            <span class="o_priority_star oi oi-filled" data-icon="star"/> <span t-out="this.purchaseData['my']['late_receipt']['priority']"/>
                                         </span>
                                     </div>
                                 </a>
diff --git a/addons/purchase/static/tests/tours/tour_helper.js b/addons/purchase/static/tests/tours/tour_helper.js
index 28208e230a68fe..2e6791d3564bbd 100644
--- a/addons/purchase/static/tests/tours/tour_helper.js
+++ b/addons/purchase/static/tests/tours/tour_helper.js
@@ -119,7 +119,7 @@ export const purchaseForm = {
 
 export const productCatalog = {
     addProduct(productName) {
-        const trigger = `.o_kanban_record:contains("${productName}") button:has(.oi-plus,.fa-shopping-cart)`;
+        const trigger = `.o_kanban_record:contains("${productName}") button:has([data-icon="add"],[data-icon="shopping_cart"]`;
         return [{ trigger, run: "click" }];
     },
 
@@ -137,7 +137,7 @@ export const productCatalog = {
 
     /** Remove a product from the PO by clicking the "trash" button */
     removeProduct(productName) {
-        const trigger = `.o_kanban_record:contains("${productName}") button:has(.fa-trash)`;
+        const trigger = `.o_kanban_record:contains("${productName}") button:has([data-icon="delete"].oi-filled)`;
         return [{ trigger, run: "click" }];
     },
 
diff --git a/addons/purchase/views/account_move_views.xml b/addons/purchase/views/account_move_views.xml
index f402bc270c1587..a79b79cf761bf3 100644
--- a/addons/purchase/views/account_move_views.xml
+++ b/addons/purchase/views/account_move_views.xml
@@ -38,7 +38,7 @@
                         name="action_purchase_matching"
                         type="object"
                         groups="purchase.group_purchase_user"
-                        icon="fa-bullseye"
+                        icon="crisis_alert"
                         invisible="not partner_id or move_type not in ('in_invoice', 'in_refund') or is_purchase_matched">
                     <div class="o_field_statinfo">
                         <span class="o_stat_text">Purchase Matching</span>
@@ -48,7 +48,7 @@
                         name="action_view_source_purchase_orders"
                         type="object"
                         groups="purchase.group_purchase_user"
-                        icon="fa-pencil-square-o"
+                        icon="edit_square"
                         invisible="purchase_order_count == 0 or move_type not in ('out_invoice', 'out_refund', 'in_invoice', 'in_refund', 'out_receipt', 'in_receipt')">
                     <field string="Purchases" name="purchase_order_name" widget="statinfo" invisible="purchase_order_count != 1"/>
                     <field string="Purchases" name="purchase_order_count" widget="statinfo" invisible="purchase_order_count == 1"/>
diff --git a/addons/purchase/views/analytic_account_views.xml b/addons/purchase/views/analytic_account_views.xml
index 37d6954dd6f145..f358e4100dfc8d 100644
--- a/addons/purchase/views/analytic_account_views.xml
+++ b/addons/purchase/views/analytic_account_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
                 <button class="oe_stat_button" type="object" name="action_view_purchase_orders"
-                    icon="fa-credit-card" invisible="purchase_order_count == 0"
+                    icon="credit_card" invisible="purchase_order_count == 0"
                     groups="purchase.group_purchase_user">
                     <field string="Purchase Orders" name="purchase_order_count" widget="statinfo"/>
                 </button>
diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index 1efba22553acf9..ffc625347252b4 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -78,10 +78,10 @@
                       </td>
                       <td id="order_badge" class="text-center">
                           <span t-if="order.invoice_status == 'to invoice'" class="badge rounded-pill text-bg-info">
-                              <i class="fa fa-fw fa-file-text" role="img" aria-label="Waiting for Bill" title="Waiting for Bill"></i><span class="d-none d-md-inline"> Waiting for Bill</span>
+                              <i class="oi oi-fw oi-filled" data-icon="article" role="img" aria-label="Waiting for Bill" title="Waiting for Bill"></i><span class="d-none d-md-inline"> Waiting for Bill</span>
                           </span>
                           <span t-if="order.state == 'cancel'" class="badge rounded-pill text-bg-secondary">
-                              <i class="fa fa-fw fa-remove" role="img" aria-label="Cancelled" title="Cancelled"></i><span class="d-none d-md-inline"> Cancelled</span>
+                              <i class="oi oi-fw" data-icon="close" role="img" aria-label="Cancelled" title="Cancelled"></i><span class="d-none d-md-inline"> Cancelled</span>
                           </span>
                       </td>
                       <td id="order_total" class="text-end"><span t-field="order.amount_total"/></td>
@@ -105,7 +105,7 @@
               </t>
               <t t-set="entries">
                   <div class="d-flex flex-column gap-4 mt-3">
-                      <a class="btn btn-secondary o_print_btn o_portal_invoice_print" t-att-href="order.get_portal_url(report_type='pdf')" id="print_invoice_report" title="View Details" role="button" target="_blank"><i class="fa fa-print me-1"/>Download / Print</a>
+                      <a class="btn btn-secondary o_print_btn o_portal_invoice_print" t-att-href="order.get_portal_url(report_type='pdf')" id="print_invoice_report" title="View Details" role="button" target="_blank"><i class="oi me-1" data-icon="print"/>Download / Print</a>
                       <div class="navspy flex-grow-1 ps-0" t-ignore="true" role="complementary">
                           <ul class="nav flex-column bs-sidenav"></ul>
                       </div>
@@ -242,9 +242,9 @@
                                       </a>
                                       <div class="small d-lg-inline-block">Date: <span class="text-muted" t-field="i.invoice_date"/></div>
                                   </div>
-                                  <span t-if="i.payment_state in ('paid', 'in_payment')" class="badge rounded-pill text-bg-success small"><i class="fa fa-fw fa-check"/>Paid</span>
-                                  <span t-elif="i.payment_state == 'reversed'" class="badge rounded-pill text-bg-success small"><i class="fa fa-fw fa-check"/>Reversed</span>
-                                  <span t-else="" class="small badge rounded-pill text-bg-primary"><i class="fa fa-fw fa-clock-o"/>Waiting Payment</span>
+                                  <span t-if="i.payment_state in ('paid', 'in_payment')" class="badge rounded-pill text-bg-success small"><i class="oi oi-fw" data-icon="check"/>Paid</span>
+                                  <span t-elif="i.payment_state == 'reversed'" class="badge rounded-pill text-bg-success small"><i class="oi oi-fw" data-icon="check"/>Reversed</span>
+                                  <span t-else="" class="small badge rounded-pill text-bg-primary"><i class="oi oi-fw" data-icon="schedule"/>Waiting Payment</span>
                               </div>
                           </t>
                       </ul>
diff --git a/addons/purchase/views/product_views.xml b/addons/purchase/views/product_views.xml
index 2cbbfdbc4fb1b3..4e2b4f3619cf8e 100644
--- a/addons/purchase/views/product_views.xml
+++ b/addons/purchase/views/product_views.xml
@@ -106,7 +106,7 @@
                 <button name="action_open_documents" position="after">
                     <button class="oe_stat_button" name="action_view_po"
                             groups="purchase.group_purchase_user"
-                            type="object" icon="fa-credit-card" invisible="not purchase_ok"
+                            type="object" icon="credit_card" invisible="not purchase_ok"
                             help="Purchased in the last 365 days. Incoming represents confirmed purchase orders not received or partially received">
                         <div class="o_field_widget o_stat_info" invisible="is_storable == True">
                             <span class="o_stat_value d-flex gap-1">
@@ -147,7 +147,7 @@
                 <div name="button_box" position="inside">
                     <button class="oe_stat_button" name="action_view_po"
                             groups="purchase.group_purchase_user"
-                            type="object" icon="fa-credit-card" invisible="not purchase_ok"
+                            type="object" icon="credit_card" invisible="not purchase_ok"
                             help="Purchased in the last 365 days. Incoming represents confirmed sales order not received, or partially received">
                         <div class="o_field_widget o_stat_info" invisible="is_storable == True">
                             <span class="o_stat_value d-flex gap-1">
diff --git a/addons/purchase/views/purchase_views.xml b/addons/purchase/views/purchase_views.xml
index d44f250a890ed9..a2c73bed1d15f1 100644
--- a/addons/purchase/views/purchase_views.xml
+++ b/addons/purchase/views/purchase_views.xml
@@ -169,7 +169,7 @@
                                 name="action_bill_matching"
                                 type="object"
                                 groups="account.group_account_invoice"
-                                icon="fa-bullseye"
+                                icon="crisis_alert"
                                 invisible="not partner_id or state != 'purchase' or not partner_bill_count or invoice_status == 'invoiced'">
                             <div class="o_field_statinfo">
                                 <span class="o_stat_text">Bill Matching</span>
@@ -177,13 +177,13 @@
                         </button>
                         <button type="object"  name="action_view_invoice"
                             class="oe_stat_button"
-                            icon="fa-pencil-square-o" invisible="invoice_count == 0 or state in ('draft', 'sent', 'to approve')">
+                            icon="edit_square" invisible="invoice_count == 0 or state in ('draft', 'sent', 'to approve')">
                             <field name="invoice_count" widget="statinfo" string="Vendor Bills"/>
                             <field name='invoice_ids' invisible="1"/>
                         </button>
                         <button type="object"  name="action_purchase_comparison"
                             class="oe_stat_button" invisible="not show_comparison"
-                            icon="fa-dollar">
+                            icon="attach_money">
                             <div class="o_field_statinfo">
                                 <span class="o_stat_text">Price Comparison</span>
                             </div>
@@ -192,7 +192,7 @@
                     </div>
                     <div class="badge rounded-pill text-bg-secondary float-end fs-6 border-0"
                         invisible="not locked">
-                        <i class="fa fa-lock"/>
+                        <i class="oi" data-icon="lock"/>
                         Locked
                     </div>
                     <div class="oe_title">
@@ -229,7 +229,7 @@
                                     and previous information from the RFQ."
                                     name="button_reset_date_order"
                                     type="object"
-                                    icon="fa-refresh"
+                                    icon="refresh"
                                     class="btn-link p-0 ms-2"
                                     invisible="date_order and date_order &gt;= context_today().strftime('%Y-%m-%d')"/>
                             </div>
diff --git a/addons/purchase/views/res_config_settings_views.xml b/addons/purchase/views/res_config_settings_views.xml
index cdab695e5da228..c0eba69dad5cb7 100644
--- a/addons/purchase/views/res_config_settings_views.xml
+++ b/addons/purchase/views/res_config_settings_views.xml
@@ -48,7 +48,7 @@
                             <field name="group_product_variant"/>
                             <div class="content-group" invisible="not group_product_variant">
                                 <div class="mt8">
-                                    <button name="%(product.attribute_action)d" icon="oi-arrow-right" type="action" string="Attributes" class="btn-link"/>
+                                    <button name="%(product.attribute_action)d" icon="east" type="action" string="Attributes" class="btn-link"/>
                                 </div>
                             </div>
                         </setting>
@@ -60,7 +60,7 @@
                             <field name="group_uom"/>
                             <div class="content-group">
                                 <div class="mt8" invisible="not group_uom">
-                                    <button name="%(uom.product_uom_form_action)d" icon="oi-arrow-right"
+                                    <button name="%(uom.product_uom_form_action)d" icon="east"
                                             type="action" string="Units &amp; Packagings" class="btn-link"/>
                                 </div>
                             </div>
diff --git a/addons/purchase/views/res_partner_views.xml b/addons/purchase/views/res_partner_views.xml
index fb6e4cd98de778..7a92409adab895 100644
--- a/addons/purchase/views/res_partner_views.xml
+++ b/addons/purchase/views/res_partner_views.xml
@@ -66,7 +66,7 @@
                 <div name="button_box" position="inside">
                     <button class="oe_stat_button" name="%(purchase.act_res_partner_2_purchase_order)d" type="action"
                         groups="purchase.group_purchase_user"
-                        icon="fa-credit-card">
+                        icon="credit_card">
                         <field string="Purchases" name="purchase_order_count" widget="statinfo"/>
                     </button>
                 </div>
diff --git a/addons/purchase_alternative/views/purchase_views.xml b/addons/purchase_alternative/views/purchase_views.xml
index 93fb47d0712d10..275ed35aec5ab3 100644
--- a/addons/purchase_alternative/views/purchase_views.xml
+++ b/addons/purchase_alternative/views/purchase_views.xml
@@ -11,8 +11,8 @@
                         <div class="d-flex gap-5">
                             <button name="action_create_alternative" type="object" class="btn-link d-block" help="Create a call for tender by adding alternative requests for quotation to different vendors.
                                 Make your choice by selecting the best combination of lead time, OTD and/or total amount.
-                                By comparing product lines you can also decide to order some products from one vendor and others from another vendor." string="Create Alternative" icon="fa-copy"/>
-                            <button name="action_compare_alternative_lines" type="object" class="btn-link d-block" string="Compare Product Lines" icon="fa-bar-chart" invisible="not alternative_po_ids"/>
+                                By comparing product lines you can also decide to order some products from one vendor and others from another vendor." string="Create Alternative" icon="content_copy"/>
+                            <button name="action_compare_alternative_lines" type="object" class="btn-link d-block" string="Compare Product Lines" icon="bar_chart" invisible="not alternative_po_ids"/>
                         </div>
                     </group>
                     <field name="alternative_po_ids" readonly="not id" widget="many2many_alt_pos" context="{'quotation_only': True}">
@@ -63,9 +63,9 @@
                 <field name="currency_id" column_invisible="True"/> <!-- Invisible fields -->
                 <field name="price_total_cc" string="Company Total" widget="monetary"/>
                 <field name="company_currency_id" column_invisible="True"/> <!-- Invisible fields -->
-                <button name="action_choose" string="Choose" type="object" class="o_clear_qty_buttons" icon="fa-bullseye"
+                <button name="action_choose" string="Choose" type="object" class="o_clear_qty_buttons" icon="crisis_alert"
                     invisible="product_qty &lt;= 0.0 or state in ['cancel', 'purchase']"/>
-                <button name="action_clear_quantities" string="Clear" type="object" class="o_clear_qty_buttons" icon="fa-times"
+                <button name="action_clear_quantities" string="Clear" type="object" class="o_clear_qty_buttons" icon="close"
                     invisible="product_qty &lt;= 0.0 or state in ['cancel', 'purchase']"/>
             </list>
         </field>
diff --git a/addons/purchase_mrp/views/mrp_production_views.xml b/addons/purchase_mrp/views/mrp_production_views.xml
index 99ca8b8fdd28f1..dfe52010aba7fa 100644
--- a/addons/purchase_mrp/views/mrp_production_views.xml
+++ b/addons/purchase_mrp/views/mrp_production_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="mrp.mrp_production_form_view"/>
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_view_mrp_production_childs']" position="before">
-                <button class="oe_stat_button" name="action_view_purchase_orders" type="object" icon="fa-credit-card" groups="purchase.group_purchase_user" invisible="purchase_order_count == 0">
+                <button class="oe_stat_button" name="action_view_purchase_orders" type="object" icon="credit_card" groups="purchase.group_purchase_user" invisible="purchase_order_count == 0">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="purchase_order_count"/></span>
                         <span class="o_stat_text">Purchases</span>
diff --git a/addons/purchase_mrp/views/purchase_order_views.xml b/addons/purchase_mrp/views/purchase_order_views.xml
index 75204179e14168..a102c6c2f03c05 100644
--- a/addons/purchase_mrp/views/purchase_order_views.xml
+++ b/addons/purchase_mrp/views/purchase_order_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="purchase.purchase_order_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
-                <button class="oe_stat_button" name="action_view_mrp_productions" type="object" icon="fa-wrench" invisible="mrp_production_count == 0" groups="mrp.group_mrp_user">
+                <button class="oe_stat_button" name="action_view_mrp_productions" type="object" icon="build" invisible="mrp_production_count == 0" groups="mrp.group_mrp_user">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="mrp_production_count"/></span>
                         <span class="o_stat_text">Manufacturing</span>
diff --git a/addons/purchase_product_matrix/static/src/js/purchase_product_field.xml b/addons/purchase_product_matrix/static/src/js/purchase_product_field.xml
index e7386610e1b9d7..d0418db5716fba 100644
--- a/addons/purchase_product_matrix/static/src/js/purchase_product_field.xml
+++ b/addons/purchase_product_matrix/static/src/js/purchase_product_field.xml
@@ -7,7 +7,8 @@
             <button
                 t-if="!this.props.readonly and this.isConfigurableTemplate"
                 type="button"
-                class="btn btn-link fa fa-pencil px-2"
+                class="btn btn-link oi oi-filled px-2"
+                data-icon="edit"
                 tabindex="-1"
                 draggable="false"
                 t-att-aria-label="this.configurationButtonHelp"
diff --git a/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js b/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
index 927e3d5a489c9d..01b76250b258c2 100644
--- a/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
+++ b/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
@@ -58,7 +58,7 @@ registry.category("web_tour.tours").add('purchase_matrix_tour', {
     trigger: '.o_field_pol_product_many2one',
     run: "click",
 }, {
-    trigger: '[name=product_template_id] button.fa-pencil', // edit the matrix
+    trigger: '[name=product_template_id] button[data-icon="edit"]', // edit the matrix
     run: "click",
 }, {
     trigger: '.o_matrix_input_table',
diff --git a/addons/purchase_repair/views/purchase_views.xml b/addons/purchase_repair/views/purchase_views.xml
index 50940494388ad2..c731b5fe2a85b6 100644
--- a/addons/purchase_repair/views/purchase_views.xml
+++ b/addons/purchase_repair/views/purchase_views.xml
@@ -8,7 +8,7 @@
             <xpath expr="//button[@name='action_view_invoice']" position="after">
                 <button
                     class="oe_stat_button" name="action_view_repair_orders" type="object"
-                    icon="fa-wrench" groups="stock.group_stock_user"
+                    icon="build" groups="stock.group_stock_user"
                     invisible="repair_count == 0">
                     <div class="o_field_widget o_stat_info">
                         <field name="repair_count" string="Repair Orders" widget="statinfo"/>
diff --git a/addons/purchase_repair/views/repair_views.xml b/addons/purchase_repair/views/repair_views.xml
index e77dd4ad337f8c..27a43f597ff3db 100644
--- a/addons/purchase_repair/views/repair_views.xml
+++ b/addons/purchase_repair/views/repair_views.xml
@@ -8,7 +8,7 @@
             <xpath expr="//button[@name='action_view_sale_order']" position="after">
                 <button
                     class="oe_stat_button" name="action_view_purchase_orders" type="object"
-                    icon="fa-credit-card" groups="purchase.group_purchase_user"
+                    icon="credit_card" groups="purchase.group_purchase_user"
                     invisible="purchase_count == 0 or state == 'draft'">
                     <div class="o_field_widget o_stat_info">
                         <field name="purchase_count" string="Purchase Orders" widget="statinfo"/>
diff --git a/addons/purchase_requisition/views/purchase_requisition_views.xml b/addons/purchase_requisition/views/purchase_requisition_views.xml
index cfeb3893414e85..86c8c49257d89e 100644
--- a/addons/purchase_requisition/views/purchase_requisition_views.xml
+++ b/addons/purchase_requisition/views/purchase_requisition_views.xml
@@ -47,7 +47,7 @@
             </header>
             <sheet>
                 <div class="oe_button_box" name="button_box">
-                    <button name="%(action_purchase_requisition_list)d" type="action" class="oe_stat_button" icon="fa-list-alt"
+                    <button name="%(action_purchase_requisition_list)d" type="action" class="oe_stat_button" icon="list_alt"
                         invisible="state == 'draft'" context="{'default_currency_id': currency_id}">
                         <field name="order_count" widget="statinfo" string="RFQs/Orders"/>
                     </button>
diff --git a/addons/purchase_stock/report/report_stock_rule.xml b/addons/purchase_stock/report/report_stock_rule.xml
index a29d3bac55fe3a..84dc6d8031ac05 100644
--- a/addons/purchase_stock/report/report_stock_rule.xml
+++ b/addons/purchase_stock/report/report_stock_rule.xml
@@ -17,16 +17,16 @@
         </xpath>
         <xpath expr="//div[hasclass('o_report_stock_rule_rule_name')]/span" position="before">
             <t t-if="rule[0].action == 'buy'">
-                <i class="fa fa-credit-card fa-fw" t-attf-style="color: #{color};"/>
+                <i class="oi oi-fw" data-icon="credit_card" t-attf-style="color: #{color};"/>
             </t>
         </xpath>
         <xpath expr="//div[hasclass('o_report_stock_rule_legend')]" position="inside">
             <div class="o_report_stock_rule_legend_line">
                 <div class="o_report_stock_rule_legend_label">Buy</div>
                 <div class="o_report_stock_rule_legend_symbol">
-                    <div class="fa fa-credit-card fa-fw" t-attf-style="color: #{color};"/>
+                    <div class="oi oi-fw" data-icon="credit_card" t-attf-style="color: #{color};"/>
                 </div>
             </div>
         </xpath>
     </template>
-</odoo>
\ No newline at end of file
+</odoo>
diff --git a/addons/purchase_stock/static/src/product_catalog/search/search_panel.xml b/addons/purchase_stock/static/src/product_catalog/search/search_panel.xml
index db311010645d5f..a194e28985bc53 100644
--- a/addons/purchase_stock/static/src/product_catalog/search/search_panel.xml
+++ b/addons/purchase_stock/static/src/product_catalog/search/search_panel.xml
@@ -32,7 +32,7 @@
     <t t-name="PurchaseSuggest.SearchPanel.Header">
         <header name="search_panel_suggestion" class="d-flex ps-2">
             <div class=" text-uppercase cursor-default" t-att-title="this.tooltipTitle">
-                <i class="fa fa-lg fa-lightbulb-o text-primary me-2"/>
+                <i class="oi oi-lg text-primary me-2" data-icon="lightbulb"/>
                 <b class="me-2">Suggest</b>
             </div>
             <div class="d-flex align-items-center ms-auto">
diff --git a/addons/purchase_stock/static/tests/product_catalog.test.js b/addons/purchase_stock/static/tests/product_catalog.test.js
index 96b47bff934981..bf38edf5b296d5 100644
--- a/addons/purchase_stock/static/tests/product_catalog.test.js
+++ b/addons/purchase_stock/static/tests/product_catalog.test.js
@@ -109,7 +109,7 @@ test("Adding products from purchase catalog with suggestion feature ON.", async
     });
 
     // ---- 1: Test adding product without suggested qty
-    await click(".o_product_catalog_kanban_record:nth-of-type(1) button:has(i.fa-shopping-cart)");
+    await click(".o_product_catalog_kanban_record:nth-of-type(1) button:has(i[data-icon='shopping_cart'])");
     await runAllTimers(); // for skipping the debounce delay
     expect(
         ".o_product_catalog_kanban_record:nth-of-type(1) input[name='product_catalog_quantity_input']"
@@ -119,7 +119,7 @@ test("Adding products from purchase catalog with suggestion feature ON.", async
     expect(
         ".o_product_catalog_kanban_record:nth-of-type(2) div[name='kanban_purchase_suggest'] span:visible:contains('10')"
     ).toHaveCount(1, { message: "Suggested qty div should be visible on card #2" });
-    await click(".o_product_catalog_kanban_record:nth-of-type(2) button:has(i.fa-shopping-cart)");
+    await click(".o_product_catalog_kanban_record:nth-of-type(2) button:has(i[data-icon='shopping_cart'])");
     await runAllTimers(); // for skipping the debounce delay
     expect(
         ".o_product_catalog_kanban_record:nth-of-type(2) input[name='product_catalog_quantity_input']"
diff --git a/addons/purchase_stock/views/purchase_views.xml b/addons/purchase_stock/views/purchase_views.xml
index a22d1080a2d0fb..b09acb3abe34ed 100644
--- a/addons/purchase_stock/views/purchase_views.xml
+++ b/addons/purchase_stock/views/purchase_views.xml
@@ -16,7 +16,7 @@
                 <button type="object"
                     name="action_view_picking"
                     class="oe_stat_button"
-                    icon="fa-truck" invisible="incoming_picking_count == 0" groups="stock.group_stock_user">
+                    icon="local_shipping" invisible="incoming_picking_count == 0" groups="stock.group_stock_user">
                     <field name="incoming_picking_count" widget="statinfo" string="Receipt" help="Incoming Shipments"/>
                 </button>
             </xpath>
@@ -28,8 +28,8 @@
             </xpath>
             <xpath expr="//page/field[@name='order_line']/list/field[@name='product_qty']" position="after">
                 <field name="forecasted_issue" column_invisible="True"/>
-                <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="fa-area-chart" invisible="not id or not forecasted_issue or not is_storable" class="text-danger"/>
-                <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="fa-area-chart" invisible="not id or forecasted_issue or not is_storable"/>
+                <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="area_chart" invisible="not id or not forecasted_issue or not is_storable" class="text-danger"/>
+                <button type="object" name="action_product_forecast_report" title="Forecast Report" icon="area_chart" invisible="not id or forecasted_issue or not is_storable"/>
             </xpath>
             <xpath expr="//div[@name='date_planned_div']" position="inside">
                 <button name="%(action_purchase_vendor_delay_report)d" class="oe_link ps-0 pb-0 pt-sm-0" type="action" context="{'search_default_partner_id': partner_id}" invisible="not partner_id or on_time_rate &lt; 0">
diff --git a/addons/purchase_stock/views/res_partner_views.xml b/addons/purchase_stock/views/res_partner_views.xml
index b733233580fad3..61b1d27d1dce31 100644
--- a/addons/purchase_stock/views/res_partner_views.xml
+++ b/addons/purchase_stock/views/res_partner_views.xml
@@ -9,7 +9,7 @@
                 <xpath expr="//field[@name='purchase_order_count']/.." position="after">
                     <button class="oe_stat_button" name="%(action_purchase_vendor_delay_report)d" type="action"
                         groups="purchase.group_purchase_user"
-                        icon="fa-truck"
+                        icon="local_shipping"
                         context="{'search_default_partner_id': id}"
                         invisible="on_time_rate &lt; 0">
                         <div class="o_form_field o_stat_info">
diff --git a/addons/purchase_stock/views/stock_lot_views.xml b/addons/purchase_stock/views/stock_lot_views.xml
index ed83b81833e0a1..949f9d99f63229 100644
--- a/addons/purchase_stock/views/stock_lot_views.xml
+++ b/addons/purchase_stock/views/stock_lot_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('oe_button_box')]/button" position="before">
                 <button class="oe_stat_button" name="action_view_po"
-                        type="object" icon="fa-credit-card" help="Purchase Orders"
+                        type="object" icon="credit_card" help="Purchase Orders"
                         invisible="purchase_order_count == 0 or not display_complete">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value">
diff --git a/addons/rating/views/rating_rating_views.xml b/addons/rating/views/rating_rating_views.xml
index 5a0b6be1fbcc73..a2e029384f613b 100644
--- a/addons/rating/views/rating_rating_views.xml
+++ b/addons/rating/views/rating_rating_views.xml
@@ -122,26 +122,26 @@
                             <aside class="col-3 me-2">
                                 <div class="display-3 fw-bold text-center text-primary mb-2" t-out="val_stars"/>
                                 <i t-foreach="[...Array(val_integer).keys()]" t-as="num"  t-key="num"
-                                    class="fa fa-star"
+                                    class="oi oi-filled" data-icon="star"
                                     aria-label="A star"
                                     role="img"/>
                                 <i t-if="val_decimal"
-                                    class="fa fa-star-half-o"
+                                    class="oi" data-icon="star_half"
                                     aria-label="Half a star"
                                     role="img"/>
                                 <i t-foreach="[...Array(empty_star).keys()]" t-as="num" t-key="num"
-                                    class="fa fa-star text-black-25"
+                                    class="oi oi-filled text-black-25" data-icon="star"
                                     aria-label="A star"
                                     role="img"/>
                             </aside>
                             <main class="col">
                                 <field name="partner_id" class="fw-bold fs-5"/>
                                 <div class="mt0">
-                                    <i class="fa fa-folder me-2" aria-label="Open folder"></i>
+                                    <i class="oi oi-filled me-2" data-icon="folder" aria-label="Open folder"></i>
                                     <a type="object" name="action_open_rated_object" t-att-title="record.res_name.raw_value">
                                         <field name="res_name" />
                                     </a>
-                                    <div><i class="fa fa-clock-o me-2" aria-label="Create date"/> <field name="rated_on" /></div>
+                                    <div><i class="oi me-2" data-icon="schedule" aria-label="Create date"/> <field name="rated_on" /></div>
                                     <field name="feedback" class="mt-2"/>
                                 </div>
                             </main>
diff --git a/addons/rating/views/rating_templates.xml b/addons/rating/views/rating_templates.xml
index 0e4477aeeb4179..25dece77eba2b9 100644
--- a/addons/rating/views/rating_templates.xml
+++ b/addons/rating/views/rating_templates.xml
@@ -8,7 +8,7 @@
                         <div class="oe_structure" id="oe_structure_rating_header_thanks_you"/>
                         <h3 class="text-center mt-4 pb-2">Thank you for your feedback!</h3>
                         <a t-att-href="web_base_url" class="d-block text-decoration-none text-center mb-4">
-                            <i class="fa fa-arrow-left me-1"/> Back to the Homepage
+                            <i class="oi me-1" data-icon="arrow_back"/> Back to the Homepage
                         </a>
                         <div class="oe_structure" id="oe_structure_rating_footer_thanks_you"/>
                     </div>
diff --git a/addons/repair/views/account_move_views.xml b/addons/repair/views/account_move_views.xml
index ed83a7814186f2..b3e2439ecedeb9 100644
--- a/addons/repair/views/account_move_views.xml
+++ b/addons/repair/views/account_move_views.xml
@@ -12,7 +12,7 @@
                     string="Repair Order"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-wrench"
+                    icon="build"
                     invisible="not repair_order_id"
                     groups="stock.group_stock_user"
                 />
diff --git a/addons/repair/views/repair_views.xml b/addons/repair/views/repair_views.xml
index 104650d2f9f1ab..5e466755f7e799 100644
--- a/addons/repair/views/repair_views.xml
+++ b/addons/repair/views/repair_views.xml
@@ -81,7 +81,7 @@
                <sheet string="Repairs order">
                     <div class="oe_button_box" name="button_box">
                         <!-- No groups attribute on the next button as "stock.group_stock_user" is needed for Repair, and as this group is granted 'sale.order' read/write accesses in sale_stock module (forcefully loaded as transitive dependency) -->
-                        <button name="action_view_sale_order" type="object" string="Sale Order" icon="fa-dollar" class="oe_stat_button" invisible="not sale_order_id">
+                        <button name="action_view_sale_order" type="object" string="Sale Order" icon="attach_money" class="oe_stat_button" invisible="not sale_order_id">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_value">
                                     <field name="sale_order_id" widget="statinfo" nolabel="1" class="mr4"/>
@@ -89,10 +89,10 @@
                                 <span class="o_stat_text">Sale Order</span>
                             </div>
                         </button>
-                        <button name="%(action_repair_move_lines)d" type="action" string="Product Moves" class="oe_stat_button" icon="fa-exchange" invisible="state not in ['done', 'cancel']"/>
+                        <button name="%(action_repair_move_lines)d" type="action" string="Product Moves" class="oe_stat_button" icon="swap_horiz" invisible="state not in ['done', 'cancel']"/>
                         <button name="action_view_invoice"
                             type="object"
-                            icon="fa-pencil-square-o"
+                            icon="edit_square"
                             class="oe_stat_button"
                             invisible="not invoice_count">
                             <field name="invoice_count" widget="statinfo" string="Invoices"/>
@@ -114,7 +114,7 @@
                             <label for="lot_id" invisible="tracking not in ['serial', 'lot']"/>
                             <div class="o_row" invisible="tracking not in ['serial', 'lot']">
                                 <field name="lot_id" context="{'default_product_id': product_id}" groups="stock.group_production_lot" invisible="tracking not in ['serial', 'lot']" readonly="state == 'done'" required="state=='done' and tracking in ['serial', 'lot']"/>
-                                <button name="action_generate_serial" type="object" class="btn btn-primary fa fa-plus-square-o" aria-label="Creates a new serial/lot number" title="Creates a new serial/lot number" role="img" invisible="lot_id"/>
+                                <button name="action_generate_serial" type="object" class="btn btn-primary oi" data-icon="add_box" aria-label="Creates a new serial/lot number" title="Creates a new serial/lot number" role="img" invisible="lot_id"/>
                             </div>
                             <label for="product_qty" invisible="not product_id" groups="base.group_no_one"/>
                             <div class="o_row" invisible="not product_id" groups="base.group_no_one">
diff --git a/addons/repair/views/sale_order_views.xml b/addons/repair/views/sale_order_views.xml
index 170259198ea1b5..707a6a26aea75a 100644
--- a/addons/repair/views/sale_order_views.xml
+++ b/addons/repair/views/sale_order_views.xml
@@ -11,7 +11,7 @@
                     name="action_show_repair"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-wrench"
+                    icon="build"
                     invisible="repair_count == 0"
                     groups="stock.group_stock_user"
                 >
diff --git a/addons/repair/views/stock_lot_views.xml b/addons/repair/views/stock_lot_views.xml
index d146d471d87915..61adb785922d15 100644
--- a/addons/repair/views/stock_lot_views.xml
+++ b/addons/repair/views/stock_lot_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="stock.view_production_lot_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('oe_button_box')]/button" position="before">
-                <button class="oe_stat_button" name="action_view_ro" type="object" icon="fa-wrench" help="Repair Orders"
+                <button class="oe_stat_button" name="action_view_ro" type="object" icon="build" help="Repair Orders"
                         invisible="repair_part_count == 0 or not display_complete">
                     <div class="o_field_widget o_stat_info">
                         <div class="o_field_widget o_stat_info align-items-baseline flex-row gap-1 me-1">
@@ -17,7 +17,7 @@
                         </div>
                     </div>
                 </button>
-                <button name="action_lot_open_repairs" icon="fa-wrench" class="oe_stat_button" type="object">
+                <button name="action_lot_open_repairs" icon="build" class="oe_stat_button" type="object">
                     <div class="o_field_widget o_stat_info">
                         <div class="o_field_widget o_stat_info align-items-baseline flex-row gap-1 me-1">
                           <span class="o_stat_text">To Do:</span>
diff --git a/addons/repair/views/stock_picking_views.xml b/addons/repair/views/stock_picking_views.xml
index 30daa6d5fc5737..1fcb1c72d6a865 100644
--- a/addons/repair/views/stock_picking_views.xml
+++ b/addons/repair/views/stock_picking_views.xml
@@ -38,7 +38,7 @@
             <xpath expr="//button[@name='action_see_packages']" position="after">
                 <field name="repair_ids" invisible="1"/>
                 <button name="action_view_repairs" type="object"
-                        class="oe_stat_button" icon="fa-wrench"
+                        class="oe_stat_button" icon="build"
                         invisible="nbr_repairs == 0">
                         <field name="nbr_repairs" string="Repair Orders" widget="statinfo"/>
                 </button>
diff --git a/addons/resource/views/resource_calendar_views.xml b/addons/resource/views/resource_calendar_views.xml
index 75e4b0785524de..b6518b75f3f01a 100644
--- a/addons/resource/views/resource_calendar_views.xml
+++ b/addons/resource/views/resource_calendar_views.xml
@@ -28,7 +28,7 @@
                     <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" invisible="active"/>
                     <div class="oe_button_box" name="button_box">
                         <button name="%(resource_calendar_leaves_action_from_calendar)d" type="action"
-                                icon="fa-plane"
+                                icon="travel"
                                 class="oe_stat_button"
                                 groups="base.group_no_one">
                                 <div class="o_field_widget o_stat_info">
@@ -36,7 +36,7 @@
                                 </div>
                         </button>
                         <button name="%(resource_resource_action_from_calendar)d" type="action"
-                                icon="fa-cogs"
+                                icon="settings_applications"
                                 class="oe_stat_button"
                                 groups="base.group_user">
                                 <div class="o_field_widget o_stat_info">
@@ -57,11 +57,11 @@
                             <group name="switch_calendar">
                                 <label for="switch_calendar_type" string="2 Week's Calendar" class="o_form_label"/>
                                 <button name="switch_calendar_type" invisible="two_weeks_calendar" type="object"
-                                    icon="fa-square-o" title="Switch to 2-weeks calendar" class="btn p-0"
+                                    icon="square" title="Switch to 2-weeks calendar" class="btn p-0"
                                     confirm="Are you sure you want to switch to a 2-week calendar? All work entries will be lost."
                                     confirm-label="Switch"/>
                                 <button name="switch_calendar_type" invisible="not two_weeks_calendar" type="object"
-                                    icon="fa-check-square" title="Switch to 1-week calendar" class="btn p-0"
+                                    icon="check_box" icon_class="oi-filled" title="Switch to 1-week calendar" class="btn p-0"
                                     confirm="Are you sure you want to switch to a 1-week calendar? All work entries will be lost."
                                     confirm-label="Switch"/>
                             </group>
diff --git a/addons/resource_mail/static/src/views/fields/many2many_avatar_resource/many2many_avatar_resource_field.xml b/addons/resource_mail/static/src/views/fields/many2many_avatar_resource/many2many_avatar_resource_field.xml
index ea2862559c23e0..172cb89dfd42da 100644
--- a/addons/resource_mail/static/src/views/fields/many2many_avatar_resource/many2many_avatar_resource_field.xml
+++ b/addons/resource_mail/static/src/views/fields/many2many_avatar_resource/many2many_avatar_resource_field.xml
@@ -2,8 +2,8 @@
 <templates>
     <t t-name="resource_mail.Many2ManyAvatarResourceField.option" t-inherit="web.Many2ManyTagsAvatarField.option">
         <xpath expr="//span[hasclass('o_avatar_many2x_autocomplete')]/img" position="before">
-            <i t-if="autoCompleteItemScope.record.resource_type === 'material'" class="o_material_resource fa fa-wrench rounded text-center me-2
-            d-flex align-items-center justify-content-center" t-attf-class="o_colorlist_item_color_{{ autoCompleteItemScope.record.color }}"/>
+            <i t-if="autoCompleteItemScope.record.resource_type === 'material'" class="o_material_resource oi rounded text-center me-2
+            d-flex align-items-center justify-content-center" data-icon="build" t-attf-class="o_colorlist_item_color_{{ autoCompleteItemScope.record.color }}"/>
         </xpath>
         <xpath expr="//span[hasclass('o_avatar_many2x_autocomplete')]/img" position="attributes">
             <attribute name="t-if" add="&amp;&amp; autoCompleteItemScope.record.resource_type !== 'material'" separator=" "/>
@@ -16,13 +16,13 @@
         </t>
         <t t-else="">
             <span class="o_tag position-relative d-inline-flex align-items-center user-select-none mw-100 opacity-trigger-hover" tabindex="-1" t-att-data-tooltip="this.props.tooltip" t-att-aria-label="this.props.tooltip" t-on-click="(ev) => this.props.onAvatarClick(ev.target)">
-                <i class="fa fa-wrench o_avatar o_m2m_avatar position-relative rounded p-1" t-attf-class="o_colorlist_item_color_{{ this.props.color }}"/>
+                <i class="oi oi-filled o_avatar o_m2m_avatar position-relative rounded p-1" data-icon="build" t-attf-class="o_colorlist_item_color_{{ this.props.color }}"/>
                 <t t-if="this.props.text">
                     <div class="o_tag_badge_text position-relative ms-1" t-out="this.props.text"/>
                 </t>
                 <t t-if="this.props.onDelete">
                     <a class="o_delete d-flex align-items-center btn btn-link position-relative py-0 px-1 text-danger opacity-75 opacity-100-hover" href="#" tabindex="0" aria-label="Delete" data-tooltip="Delete" t-on-click.stop.prevent="() => this.props.onDelete()">
-                        <i class="oi oi-close align-text-top"/>
+                        <i class="oi align-text-top" data-icon="close_small"/>
                     </a>
                 </t>
             </span>
diff --git a/addons/resource_mail/static/src/views/fields/many2one_avatar_resource/kanban_many2one_avatar_resource_field.xml b/addons/resource_mail/static/src/views/fields/many2one_avatar_resource/kanban_many2one_avatar_resource_field.xml
index fe2a6c3365c7d4..16304ac2747428 100644
--- a/addons/resource_mail/static/src/views/fields/many2one_avatar_resource/kanban_many2one_avatar_resource_field.xml
+++ b/addons/resource_mail/static/src/views/fields/many2one_avatar_resource/kanban_many2one_avatar_resource_field.xml
@@ -9,7 +9,7 @@
                 <t t-if="this.props.record.data.resource_type === 'material'">
                     <span class="o_avatar o_m2o_avatar">
                         <span class="d-inline-flex align-items-center justify-content-center rounded o_material_resource cursor-default me-1" t-att-title="value.display_name">
-                            <i class="fa fa-wrench"/>
+                            <i class="oi" data-icon="build"/>
                         </span>
                     </span>
                 </t>
@@ -21,7 +21,7 @@
                 <span class="o_avatar_many2x_autocomplete o_avatar d-flex align-items-center">
                     <t t-if="autoCompleteItemScope.record.resource_type === 'material'">
                         <span class="d-inline-flex align-items-center justify-content-center rounded o_material_resource cursor-default me-1" t-att-title="autoCompleteItemScope.record.id">
-                            <i class="fa fa-wrench"/>
+                            <i class="oi" data-icon="build"/>
                         </span>
                     </t>
                     <t t-elif="autoCompleteItemScope.record.resource_type === 'user'">
diff --git a/addons/resource_mail/static/src/views/fields/many2one_avatar_resource/many2one_avatar_resource_field.xml b/addons/resource_mail/static/src/views/fields/many2one_avatar_resource/many2one_avatar_resource_field.xml
index 69a7a1b52abe81..5a0e3209d53fc6 100644
--- a/addons/resource_mail/static/src/views/fields/many2one_avatar_resource/many2one_avatar_resource_field.xml
+++ b/addons/resource_mail/static/src/views/fields/many2one_avatar_resource/many2one_avatar_resource_field.xml
@@ -9,7 +9,7 @@
                 <t t-if="this.props.record.data.resource_type === 'material'">
                     <span class="o_avatar o_m2o_avatar">
                         <span class="d-inline-flex align-items-center justify-content-center rounded o_material_resource cursor-default me-1" t-att-title="value.display_name">
-                            <i class="fa fa-wrench"/>
+                            <i class="oi" data-icon="build"/>
                         </span>
                     </span>
                 </t>
@@ -22,7 +22,7 @@
                     <span class="o_avatar_many2x_autocomplete o_avatar d-flex align-items-center">
                         <t t-if="autoCompleteItemScope.record.resource_type === 'material'">
                             <span class="d-inline-flex align-items-center justify-content-center rounded o_material_resource cursor-default me-1" t-att-title="autoCompleteItemScope.record.id">
-                                <i class="fa fa-wrench"/>
+                                <i class="oi" data-icon="build"/>
                             </span>
                         </t>
                         <t t-elif="autoCompleteItemScope.record.resource_type === 'user'">
diff --git a/addons/resource_mail/static/tests/many2many_avatar_resource.test.js b/addons/resource_mail/static/tests/many2many_avatar_resource.test.js
index 04bfd18bfd607c..4d55a081c843c3 100644
--- a/addons/resource_mail/static/tests/many2many_avatar_resource.test.js
+++ b/addons/resource_mail/static/tests/many2many_avatar_resource.test.js
@@ -19,7 +19,7 @@ beforeEach(async () => {
     /* 1. Create data
         3 type of resources will be tested in the widget:
         - material resource (resourceComputer)
-            - fa-wrench should be used instead of avatar
+            - "build" icon should be used instead of avatar
             - clicking the icon should not open any popover
         - human resource not linked to a user (resourceMarie)
             (- avatar of the resource should not be displayed)
@@ -84,7 +84,7 @@ test("many2many_avatar_resource widget in form view", async () => {
             </form>`,
     });
     await contains("img.o_m2m_avatar", { count: 2 });
-    await contains(".fa-wrench", { count: 1 });
+    await contains("[data-icon='build']", { count: 1 });
     // Second and third records in widget should display employee avatars
     const avatarImages = queryAll(".many2many_tags_avatar_field_container .o_tag img");
     expect(avatarImages[0]).toHaveAttribute(
@@ -96,7 +96,7 @@ test("many2many_avatar_resource widget in form view", async () => {
         `/web/image/resource.resource/${data.resourcePierreId}/avatar_128`
     );
     // 1. Clicking on material resource's icon
-    await click(".many2many_tags_avatar_field_container .o_tag i.fa-wrench");
+    await click(".many2many_tags_avatar_field_container .o_tag i[data-icon='build']");
     await contains(".o_avatar_card", { count: 0 });
 
     // 2. Clicking on human resource's avatar with no user associated
@@ -140,9 +140,9 @@ test("many2many_avatar_resource widget in list view", async () => {
         "Two human resources with avatar should be displayed",
     );
     await contains(
-        "i.fa-wrench.o_m2m_avatar",
+        "i[data-icon='build'].o_m2m_avatar",
         { count: 1, target: row1 },
-        "One material resource with fa-wrench icon should be displayed",
+        "One material resource with 'build' icon should be displayed",
     );
     await contains(
         "div.o_tag_badge_text",
@@ -166,7 +166,7 @@ test("many2many_avatar_resource widget in list view", async () => {
     expect(tagMarie).toHaveAttribute("data-src", `/web/image/resource.resource/${data.resourceMarieId}/avatar_128`);
     expect(tagPierre).toHaveAttribute("data-src", `/web/image/resource.resource/${data.resourcePierreId}/avatar_128`);
     // 1. Clicking on material resource's icon
-    await click(".many2many_tags_avatar_field_container .o_tag i.fa-wrench");
+    await click(".many2many_tags_avatar_field_container .o_tag i[data-icon='build']");
     await contains(".o_avatar_card", { count: 0 });
     // 2. Clicking on human resource's avatar with no user associated
     await click(tagMarie);
@@ -226,9 +226,9 @@ test("many2many_avatar_resource widget in kanban view", async () => {
         "Two human resources with avatar should be displayed",
     );
     await contains(
-        "i.fa-wrench.o_m2m_avatar",
+        "i[data-icon='build'].o_m2m_avatar",
         { count: 1, target: card1 },
-        "One material resource with fa-wrench icon should be displayed",
+        "One material resource with 'build' icon should be displayed",
     );
     await contains(
         "div.o_tag_badge_text",
@@ -268,7 +268,7 @@ test("many2many_avatar_resource widget in kanban view", async () => {
     expect(tagMarie).toHaveAttribute("data-src", `/web/image/resource.resource/${data.resourceMarieId}/avatar_128`);
     expect(tagPierre).toHaveAttribute("data-src", `/web/image/resource.resource/${data.resourcePierreId}/avatar_128`);
     // 1. Clicking on material resource's icon
-    await click(".many2many_tags_avatar_field_container .o_tag i.fa-wrench");
+    await click(".many2many_tags_avatar_field_container .o_tag i[data-icon='build']");
     await contains(".o_avatar_card", { count: 0 });
     // 2. Clicking on human resource's avatar with no user associated
     await click(tagMarie);
diff --git a/addons/resource_mail/static/tests/many2one_avatar_resource.test.js b/addons/resource_mail/static/tests/many2one_avatar_resource.test.js
index 66573959e6ad5c..76648329608d59 100644
--- a/addons/resource_mail/static/tests/many2one_avatar_resource.test.js
+++ b/addons/resource_mail/static/tests/many2one_avatar_resource.test.js
@@ -18,7 +18,7 @@ beforeEach(async () => {
     /* 1. Create data
         3 type of records tested:
         - Task linked to a material resource (resourceComputer)
-            - fa-wrench should be used instead of avatar
+            - "build" icon should be used instead of avatar
             - clicking the icon should not open any popover
         - Task linked to a human resource not linked to a user (resourceMarie)
             (- avatar of the resource should not be displayed)
@@ -104,8 +104,8 @@ test("many2one_avatar_resource widget in list view", async () => {
             </list>`,
     });
     await contains(".o_m2o_avatar", { count: 3 });
-    // fa-wrench should be displayed for the first task
-    await contains(".o_m2o_avatar > span.o_material_resource > i.fa-wrench");
+    // "build" icon should be displayed for the first task
+    await contains(".o_m2o_avatar > span.o_material_resource > i[data-icon='build']");
     // Second and third slots should display employee avatar
     await contains(".o_field_many2one_avatar_resource img", { count: 2 });
     await contains(".o_field_many2one_avatar_resource a", { count: 0 });
@@ -124,8 +124,8 @@ test("many2one_avatar_resource widget in kanban view", async () => {
             </kanban>`,
     });
     await contains(".o_m2o_avatar", { count: 3 });
-    // fa-wrench should be displayed for the first task
-    await contains(".o_m2o_avatar > span.o_material_resource > i.fa-wrench");
+    // "build" icon should be displayed for the first task
+    await contains(".o_m2o_avatar > span.o_material_resource > i[data-icon='build']");
     // Second and third slots should display employee avatar
     await contains(".o_field_many2one_avatar_resource img", { count: 2 });
     expect(queryFirst(".o_field_many2one_avatar_resource img").getAttribute("data-src")).toBe(
diff --git a/addons/sale/models/res_partner.py b/addons/sale/models/res_partner.py
index 53c9fc437ec441..35692a33d731d9 100644
--- a/addons/sale/models/res_partner.py
+++ b/addons/sale/models/res_partner.py
@@ -57,7 +57,7 @@ def _compute_application_statistics_hook(self):
             return data_list
         for partner in self.filtered("sale_order_count"):
             data_list[partner.id].append({
-                "iconClass": "fa-usd",
+                "icon": "attach_money",
                 "value": partner.sale_order_count,
                 "label": self.env._("Sale Orders"),
             })
diff --git a/addons/sale/static/src/js/product/product.xml b/addons/sale/static/src/js/product/product.xml
index e28abb15258716..ce7900f7277f99 100644
--- a/addons/sale/static/src/js/product/product.xml
+++ b/addons/sale/static/src/js/product/product.xml
@@ -90,7 +90,7 @@
                     t-att-class="{'disabled': !this.env.isPossibleCombination(this.props)}"
                     t-on-click="() => this.env.addProduct(this.props.product_tmpl_id)"
                 >
-                    <i class="oi oi-plus" role="img"/>
+                    <i class="oi" data-icon="add" role="img"/>
                     <span name="add_button" class="ms-2 d-none d-md-inline">Add</span>
                 </button>
             </td>
diff --git a/addons/sale/static/src/js/quantity_availability/qty_at_date_widget.xml b/addons/sale/static/src/js/quantity_availability/qty_at_date_widget.xml
index e72d9dd06926ef..c749bda7e5a79a 100644
--- a/addons/sale/static/src/js/quantity_availability/qty_at_date_widget.xml
+++ b/addons/sale/static/src/js/quantity_availability/qty_at_date_widget.xml
@@ -5,7 +5,8 @@
         <a t-att-tabindex="this.props.record.data.display_qty_widget ? '0' : '-1'"
             t-on-click="this.showPopup"
             t-att-class="!this.props.record.data.display_qty_widget ? 'invisible' : ''"
-            t-attf-class="fa fa-area-chart cursor-pointer {{ this.calcData.forecasted_issue }}"
+            t-attf-class="oi cursor-pointer {{ this.calcData.forecasted_issue }}"
+            data-icon="area_chart"
         />
     </t>
 
diff --git a/addons/sale/static/src/js/quantity_buttons/quantity_buttons.xml b/addons/sale/static/src/js/quantity_buttons/quantity_buttons.xml
index 854cf689846bfc..366d58dfe30ac3 100644
--- a/addons/sale/static/src/js/quantity_buttons/quantity_buttons.xml
+++ b/addons/sale/static/src/js/quantity_buttons/quantity_buttons.xml
@@ -9,7 +9,7 @@
                 t-att-disabled="this.props.isMinusButtonDisabled"
                 t-on-click="this.decreaseQuantity"
             >
-                <i class="oi oi-minus"/>
+                <i class="oi" data-icon="remove"/>
             </button>
             <input
                 class="form-control quantity text-center"
@@ -25,7 +25,7 @@
                 t-att-disabled="this.props.isPlusButtonDisabled"
                 t-on-click="this.increaseQuantity"
             >
-                <i class="oi oi-plus"/>
+                <i class="oi" data-icon="add"/>
             </button>
         </div>
     </t>
diff --git a/addons/sale/static/src/js/sale_action_helper/sale_action_helper.xml b/addons/sale/static/src/js/sale_action_helper/sale_action_helper.xml
index 9ab8347c3385d5..26751dfbc816d6 100644
--- a/addons/sale/static/src/js/sale_action_helper/sale_action_helper.xml
+++ b/addons/sale/static/src/js/sale_action_helper/sale_action_helper.xml
@@ -11,7 +11,7 @@
                             role="button"
                             t-on-click="this.openVideoPreview"
                         >
-                            <i class="position-absolute top-50 start-50 translate-middle w-auto h-auto z-1 fa fa-4x fa-play-circle"/>
+                            <i class="oi oi-4x oi-filled position-absolute top-50 start-50 translate-middle w-auto h-auto z-1" data-icon="play_circle"/>
                             <div class="position-absolute top-0 end-0 w-100 h-100"/>
                             <img src="/sale/static/src/img/sales_quotation_thumbnail.webp" class="img w-100"/>
                         </a>
diff --git a/addons/sale/static/src/js/sale_order_line_field/sale_order_line_field.xml b/addons/sale/static/src/js/sale_order_line_field/sale_order_line_field.xml
index 899378aa71f34e..e33ae749f2a0b3 100644
--- a/addons/sale/static/src/js/sale_order_line_field/sale_order_line_field.xml
+++ b/addons/sale/static/src/js/sale_order_line_field/sale_order_line_field.xml
@@ -21,21 +21,21 @@
             <td t-elif="this.isCombo(record)" class="o_list_section_options w-print-0 p-print-0 text-center">
                 <Dropdown position="'bottom-end'" t-if="!this.props.readonly">
                     <button class="btn d-table-cell border-0 py-0 px-1 cursor-pointer">
-                        <i class="fa fa-ellipsis-v"/>
+                        <i class="oi" data-icon="more_vert"/>
                     </button>
                     <t t-set-slot="content">
                         <DropdownItem
                             t-if="this.getPreviousRecords(record)"
                             onSelected="() => this.moveCombo(record, 'up')"
                         >
-                            <i class="me-1 fa fa-fw fa-arrow-up"/>
+                            <i class="oi oi-fw me-1" data-icon="arrow_upward"/>
                             <span>Move Up</span>
                         </DropdownItem>
                         <DropdownItem
                             t-if="this.getNextRecords(record)"
                             onSelected="() => this.moveCombo(record, 'down')"
                         >
-                            <i class="me-1 fa fa-fw fa-arrow-down"/>
+                            <i class="oi oi-fw me-1" data-icon="arrow_downward"/>
                             <span>Move Down</span>
                         </DropdownItem>
                         <t t-if="hasDeleteButton">
@@ -43,7 +43,7 @@
                                 onSelected="() => this.onDeleteRecord(record)"
                                 class="'text-danger'"
                             >
-                                <i class="me-1 fa fa-fw fa-trash"/>
+                                <i class="oi oi-fw oi-filled me-1" data-icon="delete"/>
                                 <span>Delete</span>
                             </DropdownItem>
                         </t>
diff --git a/addons/sale/static/src/js/tours/product_configurator_tour_utils.js b/addons/sale/static/src/js/tours/product_configurator_tour_utils.js
index b689d22ee096e2..2d232c53652abf 100644
--- a/addons/sale/static/src/js/tours/product_configurator_tour_utils.js
+++ b/addons/sale/static/src/js/tours/product_configurator_tour_utils.js
@@ -50,7 +50,7 @@ function decreaseProductQuantity(productName) {
         trigger: `
             ${productSelector(productName)}
             td.o_sale_product_configurator_qty
-            button:has(i.oi-minus)
+            button:has(i[data-icon="remove"])
         `,
         run: 'click',
     };
@@ -62,7 +62,7 @@ function increaseProductQuantity(productName) {
         trigger: `
             ${productSelector(productName)}
             td.o_sale_product_configurator_qty
-            button:has(i.oi-plus)
+            button:has(i[data-icon="add"])
         `,
         run: 'click',
     };
diff --git a/addons/sale/static/src/js/tours/sale.js b/addons/sale/static/src/js/tours/sale.js
index a1b8fc70764292..3a0def7289eb4e 100644
--- a/addons/sale/static/src/js/tours/sale.js
+++ b/addons/sale/static/src/js/tours/sale.js
@@ -67,7 +67,7 @@ registry.category("web_tour.tours").add("sale_tour", {
             run: "click",
         },
         {
-            trigger: ".oi-arrow-right", // Wait for product creation
+            trigger: "[data-icon='east']", // Wait for product creation
         },
         {
             trigger: ".o_field_widget[name='price_unit'] input",
diff --git a/addons/sale/static/src/js/tours/tour_utils.js b/addons/sale/static/src/js/tours/tour_utils.js
index 1009f76ae9f011..07d2eb01a6da84 100644
--- a/addons/sale/static/src/js/tours/tour_utils.js
+++ b/addons/sale/static/src/js/tours/tour_utils.js
@@ -95,7 +95,7 @@ export function editLineMatching(productName, text) {
 
 export function editConfiguration() {
     return {
-        trigger: '[name=product_template_id] button.fa-pencil',
+        trigger: '[name=product_template_id] button[data-icon="edit"]',
         run: 'click',
     }
 }
diff --git a/addons/sale/static/src/xml/sale_product_field.xml b/addons/sale/static/src/xml/sale_product_field.xml
index 205d8cf7e42871..ffca9a45bf6aa0 100644
--- a/addons/sale/static/src/xml/sale_product_field.xml
+++ b/addons/sale/static/src/xml/sale_product_field.xml
@@ -8,7 +8,8 @@
             <button
                 t-if="!this.props.readonly and this.hasConfigurationButton"
                 type="button"
-                class="btn btn-secondary fa fa-pencil px-2"
+                class="btn btn-secondary oi oi-filled px-2"
+                data-icon="edit"
                 tabindex="-1"
                 draggable="false"
                 t-att-aria-label="this.configurationButtonHelp"
diff --git a/addons/sale/static/tests/tours/mail_attachment_removal_test_tour.js b/addons/sale/static/tests/tours/mail_attachment_removal_test_tour.js
index c70ecced635557..3baf8f180f5991 100644
--- a/addons/sale/static/tests/tours/mail_attachment_removal_test_tour.js
+++ b/addons/sale/static/tests/tours/mail_attachment_removal_test_tour.js
@@ -15,7 +15,7 @@ registry.category("web_tour.tours").add("mail_attachment_removal_tour", {
     },
     {
         content: "delete attachment",
-        trigger: ".o_field_widget[name='attachment_ids'] li > button .fa-times",
+        trigger: ".o_field_widget[name='attachment_ids'] li > button [data-icon='close']",
         run: "click"
     },
     {
diff --git a/addons/sale/static/tests/tours/sale_catalog.js b/addons/sale/static/tests/tours/sale_catalog.js
index 619fb9a86279dc..f7a7916fff582e 100644
--- a/addons/sale/static/tests/tours/sale_catalog.js
+++ b/addons/sale/static/tests/tours/sale_catalog.js
@@ -50,12 +50,12 @@ registry.category("web_tour.tours").add('sale_catalog', {
         },
         {
             content: "Add the product to the SO",
-            trigger: '.o_kanban_record:contains("Restricted Product") .fa-shopping-cart',
+            trigger: '.o_kanban_record:contains("Restricted Product") [data-icon="shopping_cart"]',
             run: 'click',
         },
         {
             content: "Wait for product to be added",
-            trigger: '.o_kanban_record:contains("Restricted Product"):not(:has(.fa-shopping-cart))',
+            trigger: '.o_kanban_record:contains("Restricted Product"):not(:has([data-icon="shopping_cart"]))',
         },
         {
             content: "Input a custom quantity",
@@ -64,7 +64,7 @@ registry.category("web_tour.tours").add('sale_catalog', {
         },
         {
             content: "Increase the quantity",
-            trigger: '.o_kanban_record:contains("Restricted Product") .oi-plus',
+            trigger: '.o_kanban_record:contains("Restricted Product") [data-icon="add"]',
             run: 'click',
         },
         {
diff --git a/addons/sale/views/account_views.xml b/addons/sale/views/account_views.xml
index d2f70ae7ebf965..aa574176819c1a 100644
--- a/addons/sale/views/account_views.xml
+++ b/addons/sale/views/account_views.xml
@@ -50,7 +50,7 @@
                 <button class="oe_stat_button"
                         name="action_view_source_sale_orders"
                         type="object"
-                        icon="fa-pencil-square-o"
+                        icon="edit_square"
                         invisible="sale_order_count == 0 or move_type not in ('out_invoice', 'out_refund', 'in_invoice', 'in_refund', 'out_receipt', 'in_receipt')">
                     <field string="Sale Orders" name="sale_order_count" widget="statinfo"/>
                 </button>
@@ -58,7 +58,7 @@
                     name="action_view_services_analytic_lines"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-bars"
+                    icon="menu"
                     invisible="service_line_count == 0"
                 >
                     <field name="service_line_count" string="Services" widget="statinfo"/>
diff --git a/addons/sale/views/payment_views.xml b/addons/sale/views/payment_views.xml
index 21d29d8065881f..d12bb640a6b77d 100644
--- a/addons/sale/views/payment_views.xml
+++ b/addons/sale/views/payment_views.xml
@@ -19,7 +19,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('oe_button_box')]" position="inside">
                 <button name="action_view_sales_orders" type="object"
-                        class="oe_stat_button" icon="fa-money"
+                        class="oe_stat_button" icon="payments"
                         invisible="sale_order_ids_nbr == 0">
                     <field name="sale_order_ids_nbr" widget="statinfo" string="Sales Order(s)"/>
                 </button>
diff --git a/addons/sale/views/product_views.xml b/addons/sale/views/product_views.xml
index ebfde41c0b6cab..3368f73969c8c2 100644
--- a/addons/sale/views/product_views.xml
+++ b/addons/sale/views/product_views.xml
@@ -47,7 +47,7 @@
                 <button class="oe_stat_button"
                     name="action_view_sales"
                     type="object"
-                    icon="fa-signal"
+                    icon="signal_cellular_4_bar"
                     help="Sold in the last 365 days. Outgoing represents confirmed sales orders not delivered, or partially delivered"
                     groups="sales_team.group_sale_salesman"
                     invisible="not sale_ok">
@@ -90,7 +90,7 @@
             <button name="action_open_documents" position="after">
                 <button class="oe_stat_button"
                     name="action_view_sales"
-                    type="object" icon="fa-signal"
+                    type="object" icon="signal_cellular_4_bar"
                     help="Sold in the last 365 days. Outgoing represents confirmed sales orders not delivered, or partially delivered"
                     groups="sales_team.group_sale_salesman"
                     invisible="not sale_ok">
diff --git a/addons/sale/views/res_partner_views.xml b/addons/sale/views/res_partner_views.xml
index 5a06554bb880fa..c655a43558c8bb 100644
--- a/addons/sale/views/res_partner_views.xml
+++ b/addons/sale/views/res_partner_views.xml
@@ -29,7 +29,7 @@
                     type="action"
                     name="sale.act_res_partner_2_sale_order"
                     groups="sales_team.group_sale_salesman"
-                    icon="fa-usd">
+                    icon="attach_money">
                     <field string="Sales" name="sale_order_count" widget="statinfo"/>
                 </button>
             </div>
diff --git a/addons/sale/views/sale_order_views.xml b/addons/sale/views/sale_order_views.xml
index 92037d912cf608..7b6e55142c7efd 100644
--- a/addons/sale/views/sale_order_views.xml
+++ b/addons/sale/views/sale_order_views.xml
@@ -45,8 +45,8 @@
             <calendar string="Sales Orders" create="0" mode="month" date_start="activity_date_deadline" color="state" event_limit="5" quick_create="0">
                 <field name="currency_id" invisible="1"/>
                 <field name="state" filters="1" invisible="1"/>
-                <field name="activity_ids" options="{'icon': 'fa fa-clock-o'}" invisible="not activity_ids"/>
-                <field name="partner_id" avatar_field="avatar_128" options="{'icon': 'fa fa-users'}"/>
+                <field name="activity_ids" options="{'icon': 'schedule'}" invisible="not activity_ids"/>
+                <field name="partner_id" avatar_field="avatar_128" options="{'icon': 'group', 'icon_class': 'oi-filled'}"/>
                 <field name="amount_total" widget="monetary"/>
                 <field name="payment_term_id"/>
             </calendar>
@@ -484,14 +484,14 @@
                     <button name="action_view_invoice"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-pencil-square-o"
+                        icon="edit_square"
                         invisible="invoice_count == 0">
                         <field name="invoice_count" widget="statinfo" string="Invoices"/>
                     </button>
                 </div>
                 <div class="badge rounded-pill text-bg-secondary float-end fs-6 border-0"
                     invisible="not locked">
-                    <i class="fa fa-lock"/>
+                    <i class="oi" data-icon="lock"/>
                     Locked
                 </div>
                 <div class="oe_title">
@@ -605,7 +605,8 @@
                                     <group invisible="display_type">
                                         <label for="product_id"/>
                                         <div class="d-flex align-items-baseline">
-                                            <span class="fa fa-exclamation-triangle text-warning me-1"
+                                            <span class="oi text-warning me-1"
+                                                data-icon="warning"
                                                 title="This product is archived"
                                                 invisible="state not in ['draft', 'sent'] or not is_product_archived"
                                             />
@@ -884,7 +885,8 @@
                                             <main class="col">
                                                 <div class="row">
                                                     <div class="col">
-                                                        <span class="fa fa-exclamation-triangle text-warning me-1"
+                                                        <span class="oi text-warning me-1"
+                                                            data-icon="warning"
                                                             title="This product is archived"
                                                             invisible="state not in ['draft', 'sent'] or not is_product_archived"
                                                         />
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index 4f98ff1129ebfd..175a7dd43fe6b0 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -42,9 +42,9 @@
                         <td class="text-end"><span t-field="quotation.validity_date"/></td>
                         <td class="text-center">
                             <span t-if="quotation.state == 'cancel'" class="badge rounded-pill text-bg-danger">
-                                <i class="fa fa-fw fa-remove"/> Cancelled</span>
+                                <i class="oi oi-fw" data-icon="close"/> Cancelled</span>
                             <span t-if="quotation.is_expired" class="badge rounded-pill text-bg-danger">
-                                <i class="fa fa-fw fa-clock-o"/> Expired</span>
+                                <i class="oi oi-fw" data-icon="schedule"/> Expired</span>
                         </td>
                         <td class="text-end">
                             <span t-field="quotation.amount_total"/>
@@ -153,7 +153,7 @@
                                 data-bs-target="#modalaccept"
                                 href="#"
                             > <!-- If paying by link, signing is skipped. -->
-                                <i class="fa fa-check"/>
+                                <i class="oi" data-icon="check"/>
                                 <t t-if="sale_order._has_to_be_paid()"> Sign &amp; Pay</t>
                                 <t t-else=""> Accept &amp; Sign</t>
                             </a>
@@ -171,7 +171,7 @@
                                 href="#"
                                 t-att-class="'btn btn-primary' if not sale_order.transaction_ids else 'btn btn-light'"
                             >
-                                <i class="fa fa-check"/>
+                                <i class="oi" data-icon="check"/>
                                 <t t-if="not sale_order.signature
                                              and sale_order._has_to_be_paid()
                                              and not payment_amount"> Accept &amp; Pay</t>
@@ -181,7 +181,7 @@
                                 id="print_invoice_sidebar_button"
                                 class="o_download_pdf d-flex gap-2 flex-lg-column flex-xl-row flex-wrap"
                             >
-                                <a class="btn btn-light o_print_btn o_portal_invoice_print flex-grow-1" t-att-href="sale_order.get_portal_url(report_type='pdf')" id="print_invoice_report" title="View Details" role="button" target="_blank"><i class="fa fa-print me-1"/>View Details</a>
+                                <a class="btn btn-light o_print_btn o_portal_invoice_print flex-grow-1" t-att-href="sale_order.get_portal_url(report_type='pdf')" id="print_invoice_report" title="View Details" role="button" target="_blank"><i class="oi me-1" data-icon="print"/>View Details</a>
                             </div>
                         </div>
 
@@ -298,7 +298,7 @@
                                 </main>
                                 <footer class="modal-footer">
                                     <button type="submit" t-att-id="sale_order.id" class="btn btn-danger">
-                                        <i class="fa fa-times"></i> Reject
+                                        <i class="oi" data-icon="close"></i> Reject
                                     </button>
                                     <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                                         Discard
@@ -334,12 +334,12 @@
 
                     <div t-if="sale_order.state == 'cancel'" class="alert alert-danger alert-dismissible d-print-none" role="alert">
                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
-                        <strong>This quotation has been cancelled.</strong> <a role="button" href="#discussion"><i class="fa fa-comment"/> Contact us to get a new quotation.</a>
+                        <strong>This quotation has been cancelled.</strong> <a role="button" href="#discussion"><i class="oi oi-filled" data-icon="chat_bubble"/> Contact us to get a new quotation.</a>
                     </div>
 
                     <div t-if="sale_order.is_expired" class="alert alert-warning alert-dismissible d-print-none" role="alert">
                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
-                        <strong>This offer expired!</strong> <a role="button" href="#discussion"><i class="fa fa-comment"/> Contact us to get a new quotation.</a>
+                        <strong>This offer expired!</strong> <a role="button" href="#discussion"><i class="oi oi-filled" data-icon="chat_bubble"/> Contact us to get a new quotation.</a>
                     </div>
 
                     <!-- main content -->
@@ -352,18 +352,18 @@
 
                         <t t-if="sale_order._has_to_be_signed()">
                             <div class="col-sm-auto mt8">
-                                <a role="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#"><i class="fa fa-check"/><t t-if="sale_order._has_to_be_paid()"> Sign &amp; Pay</t><t t-else=""> Accept &amp; Sign</t></a>
+                                <a role="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#"><i class="oi" data-icon="check"/><t t-if="sale_order._has_to_be_paid()"> Sign &amp; Pay</t><t t-else=""> Accept &amp; Sign</t></a>
                             </div>
                             <div class="col-sm-auto mt8">
-                                <a role="button" class="btn btn-light" href="#discussion"><i class="fa fa-comment"/> Feedback</a>
+                                <a role="button" class="btn btn-light" href="#discussion"><i class="oi oi-filled" data-icon="chat_bubble"/> Feedback</a>
                             </div>
                             <div class="col-sm-auto mt8">
-                                <a role="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modaldecline" href="#"> <i class="fa fa-times"/> Reject</a>
+                                <a role="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modaldecline" href="#"> <i class="oi" data-icon="close"/> Reject</a>
                             </div>
                         </t>
                         <div t-elif="sale_order._has_to_be_paid()" class="col-sm-auto mt8">
                             <a role="button" data-bs-toggle="modal" data-bs-target="#modalaccept" href="#" t-att-class="'%s' % ('btn btn-light' if sale_order.transaction_ids else 'btn btn-primary')">
-                                <i class="fa fa-check"/> <t t-if="not sale_order.signature">Accept &amp; Pay</t><t t-else="">Pay Now</t>
+                                <i class="oi" data-icon="check"/> <t t-if="not sale_order.signature">Accept &amp; Pay</t><t t-else="">Pay Now</t>
                             </a>
                         </div>
                     </div>
@@ -614,7 +614,7 @@
                         </t>
                         <small t-if="sale_order.partner_id == sale_order.partner_invoice_id == sale_order.env.user.partner_id">
                             <a class="small" t-attf-href="/my/account?redirect={{sale_order.get_portal_url()}}">
-                                <i class="fa fa-fw fa-pencil"/>
+                                <i class="oi oi-fw oi-filled" data-icon="edit"/>
                             </a>
                         </small>
                     </h5>
@@ -645,16 +645,16 @@
                                         <span t-out="i.name"/>
                                     </a>
                                     <div t-if="i.payment_state in ('paid', 'in_payment')" class="small badge rounded-pill text-bg-success orders_label_text_align">
-                                        <i class="fa fa-fw fa-check"/> Paid
+                                        <i class="oi oi-fw" data-icon="check"/> Paid
                                     </div>
                                     <div t-elif="i.payment_state == 'reversed'" class="small badge text-bg-success orders_label_text_align">
-                                        <i class="fa fa-fw fa-check"/> Reversed
+                                        <i class="oi oi-fw" data-icon="check"/> Reversed
                                     </div>
                                     <div t-elif="authorized_tx_ids" class="small badge rounded-pill text-bg-success orders_label_text_align">
-                                        <i class="fa fa-fw fa-check"/> Authorized
+                                        <i class="oi oi-fw" data-icon="check"/> Authorized
                                     </div>
                                     <div t-else="" class="small badge rounded-pill text-bg-info orders_label_text_align">
-                                        <i class="fa fa-fw fa-clock-o"/> Waiting Payment
+                                        <i class="oi oi-fw" data-icon="schedule"/> Waiting Payment
                                     </div>
                                 </div>
                                 <div class="small d-lg-inline-block">Date: <span class="text-muted" t-field="i.invoice_date"/></div>
diff --git a/addons/sale/views/utm_campaign_views.xml b/addons/sale/views/utm_campaign_views.xml
index a8433d4c721827..a4f82abeb685d2 100644
--- a/addons/sale/views/utm_campaign_views.xml
+++ b/addons/sale/views/utm_campaign_views.xml
@@ -19,7 +19,7 @@
                     groups="sales_team.group_sale_salesman" type="object" name="action_redirect_to_quotations"
                     class="btn-outline-primary rounded-pill me-1 order-2">
                     <span class="badge">
-                        <i class="fa fa-fw fa-money me-1" aria-label="Quotations" role="img"/>
+                        <i class="oi oi-fw me-1" data-icon="payments" aria-label="Quotations" role="img"/>
                         <field name="quotation_count"/>
                     </span>
                 </a>
@@ -34,11 +34,11 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('oe_button_box')]" position="inside">
                 <button name="action_redirect_to_invoiced"
-                    type="object" class="oe_stat_button order-1" icon="fa-usd" groups="sales_team.group_sale_salesman">
+                    type="object" class="oe_stat_button order-1" icon="attach_money" groups="sales_team.group_sale_salesman">
                     <field name="invoiced_amount" widget="statinfo" string="Revenues"/>
                 </button>
                 <button name="action_redirect_to_quotations"
-                    type="object" class="oe_stat_button order-2" icon="fa-money" groups="sales_team.group_sale_salesman">
+                    type="object" class="oe_stat_button order-2" icon="payments" groups="sales_team.group_sale_salesman">
                     <field name="quotation_count" widget="statinfo" string="Quotations"/>
                 </button>
             </xpath>
diff --git a/addons/sale/wizard/res_config_settings_views.xml b/addons/sale/wizard/res_config_settings_views.xml
index b4a2c84ca05430..559bab4c295912 100644
--- a/addons/sale/wizard/res_config_settings_views.xml
+++ b/addons/sale/wizard/res_config_settings_views.xml
@@ -14,7 +14,7 @@
                             <field name="group_product_variant"/>
                             <div class="content-group" invisible="not group_product_variant">
                                 <div class="mt8">
-                                    <button name="%(product.attribute_action)d" icon="oi-arrow-right" type="action" string="Attributes" class="btn-link"/>
+                                    <button name="%(product.attribute_action)d" icon="east" type="action" string="Attributes" class="btn-link"/>
                                 </div>
                             </div>
                         </setting>
@@ -25,7 +25,7 @@
                             <field name="group_uom"/>
                             <div class="content-group" invisible="not group_uom">
                                 <div class="mt8">
-                                    <button name="%(uom.product_uom_form_action)d" icon="oi-arrow-right" type="action" string="Units &amp; Packagings" class="btn-link"/>
+                                    <button name="%(uom.product_uom_form_action)d" icon="east" type="action" string="Units &amp; Packagings" class="btn-link"/>
                                 </div>
                             </div>
                         </setting>
@@ -41,7 +41,7 @@
                             <field name="group_product_pricelist"/>
                             <div class="content-group" invisible="not group_product_pricelist">
                                 <div class="mt16">
-                                    <button name="%(product.product_pricelist_action2)d" icon="oi-arrow-right" type="action" string="Pricelists" groups="product.group_product_pricelist" class="btn-link"/>
+                                    <button name="%(product.product_pricelist_action2)d" icon="east" type="action" string="Pricelists" groups="product.group_product_pricelist" class="btn-link"/>
                                 </div>
                             </div>
                         </setting>
@@ -97,7 +97,7 @@
                                     string="View Alternatives"
                                     type="action"
                                     name='%(payment.action_payment_provider)d'
-                                    icon="oi-arrow-right"
+                                    icon="east"
                                     class="btn btn-link oe_inline"
                                 />
                             </div>
@@ -122,7 +122,7 @@
                                     string="View Other Providers"
                                     type="action"
                                     name="%(payment.action_payment_provider)d"
-                                    icon="oi-arrow-right"
+                                    icon="east"
                                     class="btn btn-link col-auto"
                                 />
                             </div>
@@ -132,7 +132,8 @@
                                 <label for="quotation_validity_days"/>
                                 <field name="quotation_validity_days" class="text-center" style="width: 3rem;"/>
                                 <div class="d-inline-block">days</div>
-                                <span class="fa fa-lg fa-building-o p-2"
+                                <span class="oi oi-lg p-2"
+                                      data-icon="business"
                                       title="Values set here are company-specific."
                                       groups="base.group_multi_company"/>
                             </div>
diff --git a/addons/sale_crm/tests/test_res_partner.py b/addons/sale_crm/tests/test_res_partner.py
index fcef0154626862..cd9ae668e541a1 100644
--- a/addons/sale_crm/tests/test_res_partner.py
+++ b/addons/sale_crm/tests/test_res_partner.py
@@ -101,11 +101,11 @@ def test_application_stat_info(self):
         for partner, expected in zip(
             (contact_company_1, contact_1, contact_1_1, contact_1_2),
             (
-                [{'iconClass': 'fa-star', 'label': 'Opportunities', 'value': 4},
-                 {'iconClass': 'fa-usd', 'label': 'Sale Orders', 'value': 2}],
-                [{'iconClass': 'fa-star', 'label': 'Opportunities', 'value': 3},
-                 {'iconClass': 'fa-usd', 'label': 'Sale Orders', 'value': 1}],
-                [{'iconClass': 'fa-star', 'label': 'Opportunities', 'value': 2}],
+                [{'icon': 'star', 'iconClass': 'oi-filled', 'label': 'Opportunities', 'value': 4},
+                 {'icon': 'attach_money', 'label': 'Sale Orders', 'value': 2}],
+                [{'icon': 'star', 'iconClass': 'oi-filled', 'label': 'Opportunities', 'value': 3},
+                 {'icon': 'attach_money', 'label': 'Sale Orders', 'value': 1}],
+                [{'icon': 'star', 'iconClass': 'oi-filled', 'label': 'Opportunities', 'value': 2}],
                 False,
             ),
             strict=True,
diff --git a/addons/sale_crm/views/crm_lead_views.xml b/addons/sale_crm/views/crm_lead_views.xml
index f4d3b76ce0d750..26994e6f471c4d 100644
--- a/addons/sale_crm/views/crm_lead_views.xml
+++ b/addons/sale_crm/views/crm_lead_views.xml
@@ -16,11 +16,11 @@
                 </button>
                 <button name="action_schedule_meeting" position="after">
                     <button class="oe_stat_button" type="object"
-                        name="action_view_sale_quotation" icon="fa-pencil-square-o" invisible="type == 'lead'">
+                        name="action_view_sale_quotation" icon="edit_square" invisible="type == 'lead'">
                         <field name="quotation_count" widget="statinfo" string="Quotations"/>
                     </button>
                     <button class="oe_stat_button" type="object" invisible="sale_order_count == 0 or type == 'lead'"
-                        name="action_view_sale_order" icon="fa-usd">
+                        name="action_view_sale_order" icon="attach_money">
                         <div class="o_field_widget o_stat_info">
                             <span class="o_stat_value"><field name="sale_amount_total" widget="monetary" options="{'currency_field': 'company_currency'}"/></span>
                             <span class="o_stat_text"> Orders</span>
diff --git a/addons/sale_expense/views/hr_expense_views.xml b/addons/sale_expense/views/hr_expense_views.xml
index 32c9d01e171dce..665c18199bd245 100644
--- a/addons/sale_expense/views/hr_expense_views.xml
+++ b/addons/sale_expense/views/hr_expense_views.xml
@@ -9,7 +9,7 @@
             <button name="action_open_account_move" position="after">
                 <button name="action_open_sale_order"
                     class="oe_stat_button"
-                    icon="fa-money"
+                    icon="payments"
                     type="object"
                     invisible="not sale_order_id">
                     <field name="sale_order_id" widget="statinfo" string="Sales Order"/>
diff --git a/addons/sale_expense/views/sale_order_views.xml b/addons/sale_expense/views/sale_order_views.xml
index adef8cb52d3349..5186d74a66e50e 100644
--- a/addons/sale_expense/views/sale_order_views.xml
+++ b/addons/sale_expense/views/sale_order_views.xml
@@ -11,7 +11,7 @@
                     name="%(sale_expense.hr_expense_action_from_sale_order)d"
                     type="action"
                     class="oe_stat_button"
-                    icon="fa-money"
+                    icon="payments"
                     invisible="expense_count == 0"
                 >
                     <field name="expense_count" widget="statinfo" string="Expenses"/>
diff --git a/addons/sale_gelato/views/product_template_views.xml b/addons/sale_gelato/views/product_template_views.xml
index 5fb7bfa90bad9d..aad321640a7703 100644
--- a/addons/sale_gelato/views/product_template_views.xml
+++ b/addons/sale_gelato/views/product_template_views.xml
@@ -40,12 +40,14 @@
                         <i
                             title="All print images are set"
                             invisible="gelato_missing_images"
-                            class="fa fa-check-circle text-success fs-3 me-3"
+                            class="oi oi-filled text-success fs-3 me-3"
+                            data-icon="check_circle"
                         />
                         <i
                             title="Some print images are missing"
                             invisible="not gelato_missing_images"
-                            class="fa fa-question-circle text-danger fs-3 me-3"
+                            class="oi text-danger fs-3 me-3"
+                            data-icon="help"
                         />
                     </div>
                     <button
diff --git a/addons/sale_gelato/wizards/res_config_settings_views.xml b/addons/sale_gelato/wizards/res_config_settings_views.xml
index 8a48c25cebf315..b37f2b12223bdd 100644
--- a/addons/sale_gelato/wizards/res_config_settings_views.xml
+++ b/addons/sale_gelato/wizards/res_config_settings_views.xml
@@ -20,7 +20,7 @@
                         string="Manage Delivery Methods"
                         type="action"
                         name="%(delivery.action_delivery_carrier_form)d"
-                        icon="oi-arrow-right"
+                        icon="east"
                         class="btn-link"
                         context="{'search_default_delivery_type': 'gelato'}"
                     />
diff --git a/addons/sale_loyalty/views/sale_order_views.xml b/addons/sale_loyalty/views/sale_order_views.xml
index f914a4a38ffeb2..a0fd15d47cdc06 100644
--- a/addons/sale_loyalty/views/sale_order_views.xml
+++ b/addons/sale_loyalty/views/sale_order_views.xml
@@ -12,7 +12,7 @@
                     name="action_view_gift_cards"
                     class="oe_stat_button"
                     type="object"
-                    icon="fa-gift"
+                    icon="card_giftcard"
                     invisible="gift_card_count == 0"
                 >
                     <field string="Gift Cards" name="gift_card_count" widget="statinfo"/>
diff --git a/addons/sale_loyalty/views/sale_portal_templates.xml b/addons/sale_loyalty/views/sale_portal_templates.xml
index ece94c388dfb76..e24bad6ce3b057 100644
--- a/addons/sale_loyalty/views/sale_portal_templates.xml
+++ b/addons/sale_loyalty/views/sale_portal_templates.xml
@@ -37,7 +37,7 @@
                                 (<span t-out="gift_card._format_points(order._get_real_points_for_coupon(gift_card, post_confirm=True))"/>)
                                 <strong t-out="gift_card.code"/>
                                 <button class="btn btn-sm btn-secondary copy-to-clipboard" t-att-data-clipboard-text="gift_card.code">
-                                    <span class="fa fa-clipboard"/> Copy
+                                    <span class="oi" data-icon="assignment"/> Copy
                                 </button>
                             </td>
                         </t>
diff --git a/addons/sale_management/static/src/fields/sale_order_line_field/sale_order_line_field.xml b/addons/sale_management/static/src/fields/sale_order_line_field/sale_order_line_field.xml
index 5b1a1970cb9ac9..e7bcb4c2280a28 100644
--- a/addons/sale_management/static/src/fields/sale_order_line_field/sale_order_line_field.xml
+++ b/addons/sale_management/static/src/fields/sale_order_line_field/sale_order_line_field.xml
@@ -7,7 +7,7 @@
                 onSelected="() => this.toggleIsOptional(record)"
                 attrs="{ 'class': this.disableOptionalButton(record) ? 'disabled' : '' }"
             >
-                <i class="me-1 fa fa-fw fa-dot-circle-o"/>
+                <i class="oi oi-fw me-1" data-icon="radio_button_checked"/>
                 <span t-if="record.data.is_optional">Unset Optional</span>
                 <span t-else="">Set Optional</span>
             </DropdownItem>
diff --git a/addons/sale_management/static/src/fields/sale_order_template_line_field/sale_order_template_line_field.xml b/addons/sale_management/static/src/fields/sale_order_template_line_field/sale_order_template_line_field.xml
index 2bed3bbcba48ae..3b83393a45cdf5 100644
--- a/addons/sale_management/static/src/fields/sale_order_template_line_field/sale_order_template_line_field.xml
+++ b/addons/sale_management/static/src/fields/sale_order_template_line_field/sale_order_template_line_field.xml
@@ -11,7 +11,7 @@
                 onSelected="() => this.toggleIsOptional(record)"
                 attrs="{ 'class': this.disableOptionalButton(record) ? 'disabled' : '' }"
             >
-                <i class="me-1 fa fa-fw fa-dot-circle-o"/>
+                <i class="me-1 oi oi-fw" data-icon="radio_button_checked"/>
                 <span t-if="record.data.is_optional">Unset Optional</span>
                 <span t-else="">Set Optional</span>
             </DropdownItem>
diff --git a/addons/sale_management/views/res_config_settings_views.xml b/addons/sale_management/views/res_config_settings_views.xml
index e128f7d40a130d..c9ec13a0cf6870 100644
--- a/addons/sale_management/views/res_config_settings_views.xml
+++ b/addons/sale_management/views/res_config_settings_views.xml
@@ -18,7 +18,7 @@
                             <field name="company_so_template_id" class="oe_inline"/>
                         </div>
                         <div class="mt8">
-                            <button name="%(sale_management.sale_order_template_action)d" icon="oi-arrow-right" type="action" string="Quotation Templates" class="btn-link"/>
+                            <button name="%(sale_management.sale_order_template_action)d" icon="east" type="action" string="Quotation Templates" class="btn-link"/>
                         </div>
                     </div>
                 </setting>
diff --git a/addons/sale_management/views/sale_order_template_views.xml b/addons/sale_management/views/sale_order_template_views.xml
index 39d5c5df5b422c..7d66a0181aaddc 100644
--- a/addons/sale_management/views/sale_order_template_views.xml
+++ b/addons/sale_management/views/sale_order_template_views.xml
@@ -101,7 +101,7 @@
                                     required="not display_type"/>
                                 <widget
                                     name="section_state"
-                                    options="{'is_optional': 'fa fa-dot-circle-o'}"
+                                    options="{'is_optional': 'radio_button_checked'}"
                                 />
                             </list>
                         </field>
diff --git a/addons/sale_management/views/sale_order_views.xml b/addons/sale_management/views/sale_order_views.xml
index ba1fdf868d9e30..904c279db12f87 100644
--- a/addons/sale_management/views/sale_order_views.xml
+++ b/addons/sale_management/views/sale_order_views.xml
@@ -29,7 +29,7 @@
             </xpath>
 
             <widget name="section_state" position="attributes">
-                <attribute name="options">{'is_optional': 'fa fa-dot-circle-o'}</attribute>
+                <attribute name="options">{'is_optional': 'radio_button_checked'}</attribute>
             </widget>
         </field>
     </record>
diff --git a/addons/sale_management/views/sale_portal_templates.xml b/addons/sale_management/views/sale_portal_templates.xml
index e118ec1070a0ec..db74077687f4fd 100644
--- a/addons/sale_management/views/sale_portal_templates.xml
+++ b/addons/sale_management/views/sale_portal_templates.xml
@@ -13,7 +13,7 @@
                         t-att-data-line-id="line.id"
                         t-att-data-remove="True"
                     >
-                        <span class="fa fa-minus"/>
+                        <span class="oi" data-icon="remove"/>
                     </a>
                 </span>
                 <input
@@ -30,7 +30,7 @@
                         href="#"
                         t-att-data-line-id="line.id"
                     >
-                        <span class="fa fa-plus"/>
+                        <span class="oi" data-icon="add"/>
                     </a>
                 </span>
             </div>
diff --git a/addons/sale_mrp/views/mrp_production_views.xml b/addons/sale_mrp/views/mrp_production_views.xml
index 27cfa821f7a78d..ba1b4c2eb259d6 100644
--- a/addons/sale_mrp/views/mrp_production_views.xml
+++ b/addons/sale_mrp/views/mrp_production_views.xml
@@ -7,7 +7,7 @@
         <field name="inherit_id" ref="mrp.mrp_production_form_view"/>
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_view_mrp_production_childs']" position="before">
-                <button class="oe_stat_button" name="action_view_sale_orders" type="object" icon="fa-dollar" invisible="sale_order_count == 0" groups="sales_team.group_sale_salesman">
+                <button class="oe_stat_button" name="action_view_sale_orders" type="object" icon="attach_money" invisible="sale_order_count == 0" groups="sales_team.group_sale_salesman">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="sale_order_count"/></span>
                         <span class="o_stat_text">Sale</span>
@@ -16,4 +16,4 @@
             </xpath>
         </field>
     </record>
-</data></odoo>
\ No newline at end of file
+</data></odoo>
diff --git a/addons/sale_mrp/views/sale_order_views.xml b/addons/sale_mrp/views/sale_order_views.xml
index d77a116acc6b77..a60105245447c9 100644
--- a/addons/sale_mrp/views/sale_order_views.xml
+++ b/addons/sale_mrp/views/sale_order_views.xml
@@ -11,7 +11,7 @@
                     name="action_view_mrp_production"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-wrench"
+                    icon="build"
                     invisible="mrp_production_count == 0"
                     groups="mrp.group_mrp_user">
                     <field name="mrp_production_count" widget="statinfo" string="Manufacturing"/>
diff --git a/addons/sale_mrp/views/sale_portal_templates.xml b/addons/sale_mrp/views/sale_portal_templates.xml
index 4ff54e0bde5306..f67c29221382be 100644
--- a/addons/sale_mrp/views/sale_portal_templates.xml
+++ b/addons/sale_mrp/views/sale_portal_templates.xml
@@ -24,19 +24,19 @@
                             </div>
                             <span t-if="mo.state in ['to_close', 'done']"
                                 class="small badge text-bg-success orders_label_text_align">
-                                <i class="fa fa-fw fa-check"/> <b>Manufactured</b>
+                                <i class="oi oi-fw" data-icon="check"/> <b>Manufactured</b>
                             </span>
                             <span t-elif="mo.state == 'cancel'"
                                 class="small badge text-bg-danger orders_label_text_align">
-                                <i class="fa fa-fw fa-times"/> <b>Cancelled</b>
+                                <i class="oi oi-fw" data-icon="close"/> <b>Cancelled</b>
                             </span>
                             <span t-elif="mo.state in ['confirmed']"
                                 class="small badge text-bg-info orders_label_text_align">
-                                <i class="fa fa-fw fa-clock-o"/> <b>Confirmed</b>
+                                <i class="oi oi-fw" data-icon="schedule"/> <b>Confirmed</b>
                             </span>
                             <span t-elif="mo.state in ['progress']"
                                 class="small badge text-bg-warning orders_label_text_align">
-                                <i class="fa fa-fw fa-clock-o"/> <b>In progress</b>
+                                <i class="oi oi-fw" data-icon="schedule"/> <b>In progress</b>
                             </span>
                         </div>
                     </t>
diff --git a/addons/sale_pdf_quote_builder/views/product_document_views.xml b/addons/sale_pdf_quote_builder/views/product_document_views.xml
index 2a4a6a1dc3fc1f..f85032678b2b3c 100644
--- a/addons/sale_pdf_quote_builder/views/product_document_views.xml
+++ b/addons/sale_pdf_quote_builder/views/product_document_views.xml
@@ -13,7 +13,8 @@
                     string="Configure dynamic fields"
                     help="Configure the path to fill the form fields."
                     class="btn btn-link"
-                    icon="fa-pencil"
+                    icon="edit"
+                    icon_class="oi-filled"
                     groups="base.group_system"
                 />
             </field>
diff --git a/addons/sale_pdf_quote_builder/views/quotation_document_views.xml b/addons/sale_pdf_quote_builder/views/quotation_document_views.xml
index 20f9482d379a4c..80206086932c3e 100644
--- a/addons/sale_pdf_quote_builder/views/quotation_document_views.xml
+++ b/addons/sale_pdf_quote_builder/views/quotation_document_views.xml
@@ -27,7 +27,8 @@
                                     string="Configure dynamic fields"
                                     help="Mark fields as safe to fill in the quote."
                                     class="btn btn-link"
-                                    icon="fa-pencil"
+                                    icon="edit"
+                                    icon_class="oi-filled"
                                     colspan="2"
                                     groups="base.group_system,base.group_no_one"
                                     invisible="not (raw and form_field_ids)"
diff --git a/addons/sale_pdf_quote_builder/views/sale_order_template_views.xml b/addons/sale_pdf_quote_builder/views/sale_order_template_views.xml
index b84c0eb9fab666..3034f6c8c28e89 100644
--- a/addons/sale_pdf_quote_builder/views/sale_order_template_views.xml
+++ b/addons/sale_pdf_quote_builder/views/sale_order_template_views.xml
@@ -31,14 +31,14 @@
                                 name="documentation_link"
                                 path="/_downloads/c2c6ce32294dfddffcfefcf2775f7a09/pdfquotebuilderexamples.zip"
                                 label=" Download examples"
-                                icon="fa-arrow-right"
+                                icon="arrow_forward"
                             />
                             <a
                                 href="https://www.youtube.com/watch?v=SIvlo2JFU_U"
                                 target="_blank"
                                 invisible="not quotation_document_ids"
                             >
-                                <i class="fa fa-arrow-right"/> Link to the demo video
+                                <i class="oi" data-icon="arrow_forward"/> Link to the demo video
                             </a>
                             <iframe
                                 title="Quote Builder Demo Video"
diff --git a/addons/sale_pdf_quote_builder/wizards/res_config_settings_views.xml b/addons/sale_pdf_quote_builder/wizards/res_config_settings_views.xml
index cbf8ae32ddf4d7..a8adafe105c066 100644
--- a/addons/sale_pdf_quote_builder/wizards/res_config_settings_views.xml
+++ b/addons/sale_pdf_quote_builder/wizards/res_config_settings_views.xml
@@ -9,7 +9,7 @@
             <div name="sale_pdf_module_settings" position="inside">
                 <button
                     name="%(sale_pdf_quote_builder.quotation_document_action)d"
-                    icon="oi-arrow-right"
+                    icon="east"
                     type="action"
                     string="Headers/Footers"
                     class="btn-link"
diff --git a/addons/sale_project/static/src/components/so_line_create_button/so_line_create_button.xml b/addons/sale_project/static/src/components/so_line_create_button/so_line_create_button.xml
index 410ebaf1a99b47..9d7581e2635b69 100644
--- a/addons/sale_project/static/src/components/so_line_create_button/so_line_create_button.xml
+++ b/addons/sale_project/static/src/components/so_line_create_button/so_line_create_button.xml
@@ -12,7 +12,7 @@
                 data-tooltip="Create Sales Order"
                 t-on-click="this.openSalesOrderDialog"
             >
-                <i class="fa fa-plus"/>
+                <i class="oi" data-icon="add"/>
             </button>
         </div>
     </t>
diff --git a/addons/sale_project/static/tests/tours/project_create_sol_tour.js b/addons/sale_project/static/tests/tours/project_create_sol_tour.js
index 8c4435f657c091..b31ddf7043ab50 100644
--- a/addons/sale_project/static/tests/tours/project_create_sol_tour.js
+++ b/addons/sale_project/static/tests/tours/project_create_sol_tour.js
@@ -21,7 +21,7 @@ registry.category("web_tour.tours").add('project_create_sol_tour', {
         run: "click",
     }, {
         isActive: ["auto"],
-        trigger: ".ui-autocomplete > li > a:not(:has(i.fa))",
+        trigger: ".ui-autocomplete > li > a:not(:has(i.oi))",
         content: "Select the customer in the autocomplete dropdown",
         run: "click",
     },
diff --git a/addons/sale_project/views/project_sharing_views.xml b/addons/sale_project/views/project_sharing_views.xml
index fc972ec5e74e92..db6f65ed22c4d4 100644
--- a/addons/sale_project/views/project_sharing_views.xml
+++ b/addons/sale_project/views/project_sharing_views.xml
@@ -11,7 +11,7 @@
                 <field name="display_sale_order_button" invisible="1"/>
                 <field name="allow_billable" invisible="1"/>
                 <button class="oe_stat_button"
-                        type="object" name="action_project_sharing_view_so" icon="fa-dollar"
+                        type="object" name="action_project_sharing_view_so" icon="attach_money"
                         invisible="not display_sale_order_button">
                         <div class="o_stat_info">
                             <span class="o_stat_text">Sales Order</span>
diff --git a/addons/sale_project/views/project_task_views.xml b/addons/sale_project/views/project_task_views.xml
index e8ea1598418166..26d052e028ccba 100644
--- a/addons/sale_project/views/project_task_views.xml
+++ b/addons/sale_project/views/project_task_views.xml
@@ -57,7 +57,7 @@
                     class="oe_stat_button"
                     type="object"
                     name="action_view_sos"
-                    icon="fa-dollar"
+                    icon="attach_money"
                     invisible="not display_sales_stat_buttons or sale_order_count == 0 or is_template"
                     groups="sales_team.group_sale_salesman_all_leads"
                     context="{
@@ -78,7 +78,7 @@
                     class="oe_stat_button"
                     type="object"
                     name="action_view_sos"
-                    icon="fa-id-card-o"
+                    icon="badge"
                     invisible="not display_sales_stat_buttons or sale_order_count != 0 or is_template"
                     groups="sales_team.group_sale_salesman_all_leads"
                     context="{
@@ -95,11 +95,11 @@
                         </span>
                     </div>
                 </button>
-                <button class="oe_stat_button" type="object" name="action_open_project_invoices" icon="fa-pencil-square-o"
+                <button class="oe_stat_button" type="object" name="action_open_project_invoices" icon="edit_square"
                     groups="account.group_account_readonly" invisible="not account_id or invoice_count == 0">
                     <field string="Invoices" name="invoice_count" widget="statinfo"/>
                 </button>
-                <button class="oe_stat_button" type="object" name="action_open_project_vendor_bills" icon="fa-pencil-square-o"
+                <button class="oe_stat_button" type="object" name="action_open_project_vendor_bills" icon="edit_square"
                     groups="account.group_account_readonly" invisible="vendor_bill_count == 0">
                     <field string="Vendor Bills" name="vendor_bill_count" widget="statinfo"/>
                 </button>
@@ -116,13 +116,13 @@
                 </button>
             </xpath>
             <xpath expr="//button[@name='action_project_task_burndown_chart_report']" position="after">
-                <button class="oe_stat_button" type="object" name="action_view_sols" icon="fa-dollar"
+                <button class="oe_stat_button" type="object" name="action_view_sols" icon="attach_money"
                     groups="sales_team.group_sale_salesman_all_leads" invisible="not display_sales_stat_buttons">
                     <field string="Sales Items" name="sale_order_line_count" widget="statinfo"/>
                 </button>
             </xpath>
             <xpath expr="//button[@name='action_view_all_rating']" position="after">
-                <button class="oe_stat_button" type="object" name="action_customer_preview" icon="fa-globe icon" invisible="not partner_id or not allow_billable or privacy_visibility not in ['invited_users', 'portal'] or is_template">
+                <button class="oe_stat_button" type="object" name="action_customer_preview" icon="public" invisible="not partner_id or not allow_billable or privacy_visibility not in ['invited_users', 'portal'] or is_template">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_text">Customer View</span>
                     </div>
@@ -161,7 +161,7 @@
                         options="{'no_create': True}"
                     />
                     <span
-                        class="fa fa-exclamation-triangle text-warning"
+                        class="oi text-warning" data-icon="warning"
                         title="The sales order associated with this project has been cancelled. We recommend either updating the sales order item or cancelling this project in alignment with the cancellation of the sales order."
                         invisible="sale_order_state != 'cancel'"/>
                 </div>
@@ -190,7 +190,7 @@
         <field name="arch" type="xml">
             <xpath expr="//span[@id='start_rating_buttons']" position="before">
                 <button class="oe_stat_button"
-                        type="object" name="action_view_so" icon="fa-dollar"
+                        type="object" name="action_view_so" icon="attach_money"
                         invisible="not sale_order_id or has_template_ancestor or has_project_template"
                         groups="sales_team.group_sale_salesman">
                         <div class="o_stat_info">
@@ -235,7 +235,8 @@
                         widget="so_line_create_button"
                         placeholder="Non-billable"/>
                     <span
-                        class="fa fa-exclamation-triangle text-warning"
+                        class="oi text-warning"
+                        data-icon="warning"
                         title="The sales order associated with this task has been cancelled. We recommend either updating the sales order item or cancelling this task in alignment with the cancellation of the sales order."
                         invisible="sale_order_state != 'cancel'"/>
                 </div>
@@ -344,7 +345,7 @@
                 </group>
             </xpath>
             <xpath expr="//button[@name='%(project.action_view_task_from_milestone)d']" position="before">
-                <button name="action_view_sale_order" type="object" class="oe_stat_button" icon="fa-dollar" invisible="not sale_line_id">
+                <button name="action_view_sale_order" type="object" class="oe_stat_button" icon="attach_money" invisible="not sale_line_id">
                     <div class="o_stat_info">
                         <span class="o_stat_text">Sales Order</span>
                     </div>
diff --git a/addons/sale_project/views/sale_order_views.xml b/addons/sale_project/views/sale_order_views.xml
index 835a51e3bc87d6..51e34b5a299cb4 100644
--- a/addons/sale_project/views/sale_order_views.xml
+++ b/addons/sale_project/views/sale_order_views.xml
@@ -12,7 +12,7 @@
                     name="action_view_project_ids"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-check"
+                    icon="check"
                     invisible="not show_project_button"
                     groups="project.group_project_user"
                 >
@@ -35,7 +35,7 @@
                     name="action_view_milestone"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-check-square-o"
+                    icon="check_box"
                     invisible="not is_product_milestone or not project_ids or state == 'draft'"
                     groups="project.group_project_milestone"
                 >
diff --git a/addons/sale_purchase/views/purchase_order_views.xml b/addons/sale_purchase/views/purchase_order_views.xml
index e1ccb08f50bff8..2ce4ebfc94df9c 100644
--- a/addons/sale_purchase/views/purchase_order_views.xml
+++ b/addons/sale_purchase/views/purchase_order_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="purchase.purchase_order_form"/>
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
-                <button class="oe_stat_button" name="action_view_sale_orders" type="object" icon="fa-dollar" groups='sales_team.group_sale_salesman' invisible="sale_order_count == 0">
+                <button class="oe_stat_button" name="action_view_sale_orders" type="object" icon="attach_money" groups='sales_team.group_sale_salesman' invisible="sale_order_count == 0">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value"><field name="sale_order_count"/></span>
                         <span class="o_stat_text">Sale</span>
diff --git a/addons/sale_purchase/views/sale_order_views.xml b/addons/sale_purchase/views/sale_order_views.xml
index fad784b4fa1501..96911f32ad78cc 100644
--- a/addons/sale_purchase/views/sale_order_views.xml
+++ b/addons/sale_purchase/views/sale_order_views.xml
@@ -11,7 +11,7 @@
                     name="action_view_purchase_orders"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-credit-card"
+                    icon="credit_card"
                     invisible="purchase_order_count == 0"
                     groups="purchase.group_purchase_user">
                     <field name="purchase_order_count" widget="statinfo" string="Purchase"/>
diff --git a/addons/sale_stock/static/src/widgets/qty_at_date_widget.xml b/addons/sale_stock/static/src/widgets/qty_at_date_widget.xml
index 2992c536400a5e..bf1f421f57fdc2 100644
--- a/addons/sale_stock/static/src/widgets/qty_at_date_widget.xml
+++ b/addons/sale_stock/static/src/widgets/qty_at_date_widget.xml
@@ -5,7 +5,8 @@
         <a t-att-tabindex="this.props.record.data.display_qty_widget ? '0' : '-1'"
             t-on-click="this.showPopup"
             t-att-class="!this.props.record.data.display_qty_widget ? 'invisible' : ''"
-            t-attf-class="fa fa-area-chart cursor-pointer {{ this.calcData.forecasted_issue ? 'text-danger' : '' }}"
+            t-attf-class="oi cursor-pointer {{ this.calcData.forecasted_issue ? 'text-danger' : '' }}"
+            data-icon="area_chart"
         />
     </t>
 
@@ -73,7 +74,7 @@
         </table>
         <button t-if="!this.props.record.data.is_mto" class="text-start btn btn-link"
             type="button" t-on-click="this.openForecast">
-            <i class="oi oi-fw o_button_icon oi-arrow-right"></i>
+            <i class="oi oi-fw o_button_icon" data-icon="east"></i>
             View Forecast
         </button>
         </div>
diff --git a/addons/sale_stock/views/sale_order_views.xml b/addons/sale_stock/views/sale_order_views.xml
index 72e6fea570f20c..f92a9b509ea2ff 100644
--- a/addons/sale_stock/views/sale_order_views.xml
+++ b/addons/sale_stock/views/sale_order_views.xml
@@ -12,7 +12,7 @@
                     name="action_view_delivery"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-truck"
+                    icon="local_shipping"
                     invisible="delivery_count == 0"
                     groups="stock.group_stock_user,sales_team.group_sale_salesman"
                 >
diff --git a/addons/sale_stock/views/sale_stock_portal_template.xml b/addons/sale_stock/views/sale_stock_portal_template.xml
index 8ef06877a06090..120cc5fb844221 100644
--- a/addons/sale_stock/views/sale_stock_portal_template.xml
+++ b/addons/sale_stock/views/sale_stock_portal_template.xml
@@ -24,7 +24,7 @@
                                 </a>
                                 <div t-if="picking.state == 'done'">
                                     <span class="small badge rounded-pill text-bg-success orders_label_text_align">
-                                        <i class="fa fa-fw fa-truck"/> Shipped
+                                        <i class="oi oi-fw" data-icon="local_shipping"/> Shipped
                                     </span>
                                     <a class="badge rounded-pill text-bg-secondary orders_label_text_align" target="_blank"
                                         t-att-href="'/my/picking/return/pdf/%s?%s' % (picking.id, keep_query())">
@@ -33,11 +33,11 @@
                                 </div>
                                 <span t-elif="picking.state == 'cancel'"
                                     class="small badge rounded-pill text-bg-danger orders_label_text_align">
-                                    <i class="fa fa-fw fa-times"/>Cancelled
+                                    <i class="oi oi-fw" data-icon="close"/>Cancelled
                                 </span>
                                 <span t-elif="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
                                     class="small badge rounded-pill text-bg-info orders_label_text_align">
-                                    <i class="fa fa-fw fa-clock-o"/>Preparation
+                                    <i class="oi oi-fw" data-icon="schedule"/>Preparation
                                 </span>
                             </div>
                             <div class="small d-lg-inline-block" t-if="picking.date_done or picking.scheduled_date">
@@ -68,15 +68,15 @@
                             </a>
                             <span t-if="picking.state == 'done'"
                                 class="small badge rounded-pill text-bg-success orders_label_text_align">
-                                <i class="fa fa-fw fa-truck"/> Received
+                                <i class="oi oi-fw" data-icon="local_shipping"/> Received
                             </span>
                             <span t-elif="picking.state == 'cancel'"
                                 class="small badge rounded-pill text-bg-danger orders_label_text_align">
-                                <i class="fa fa-fw fa-times"/> Cancelled
+                                <i class="oi oi-fw" data-icon="close"/> Cancelled
                             </span>
                             <span t-elif="picking.state in ['draft', 'waiting', 'confirmed', 'assigned']"
                                 class="small badge rounded-pill text-bg-info orders_label_text_align">
-                                <i class="fa fa-fw fa-clock-o"/> Awaiting arrival
+                                <i class="oi oi-fw" data-icon="schedule"/> Awaiting arrival
                             </span>
                         </div>
                         <div class="small d-lg-inline-block">
diff --git a/addons/sale_stock/views/stock_lot_views.xml b/addons/sale_stock/views/stock_lot_views.xml
index 702fa7b97a2b87..9bbe5215217bb4 100644
--- a/addons/sale_stock/views/stock_lot_views.xml
+++ b/addons/sale_stock/views/stock_lot_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('oe_button_box')]/button" position="before">
                 <button class="oe_stat_button" name="action_view_so"
-                        type="object" icon="fa-pencil-square-o" help="Sale Orders"
+                        type="object" icon="edit_square" help="Sale Orders"
                         invisible="sale_order_count == 0 or not display_complete">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value">
diff --git a/addons/sale_timesheet/static/src/scss/sale_timesheet_portal.scss b/addons/sale_timesheet/static/src/scss/sale_timesheet_portal.scss
index 4898a5b8bcaf36..b8dbbffc1e65b0 100644
--- a/addons/sale_timesheet/static/src/scss/sale_timesheet_portal.scss
+++ b/addons/sale_timesheet/static/src/scss/sale_timesheet_portal.scss
@@ -3,12 +3,12 @@
         a {
             text-decoration: none;
             &:after {
-                content: "\f0d7";
-                font-family: 'FontAwesome';
+                content: "arrow_drop_down";
+                font-family: 'material_symbols_sharp';
             }
             &.collapsed:after {
-                content: "\f0da";
-                font-family: 'FontAwesome';
+                content: "arrow_right";
+                font-family: 'material_symbols_sharp';
             }
         }
     }
diff --git a/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js b/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js
index 3eb41e2af76031..28b08e7eba4bde 100644
--- a/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js
+++ b/addons/sale_timesheet/static/tests/tours/sale_timesheet_tour.js
@@ -204,7 +204,7 @@ registry.category("web_tour.tours").add('sale_timesheet_tour', {
     content: 'Select a Sales Order Item as Default Sales Order Item for each task in this project.',
     run: "edit S",
 }, {
-    trigger: '[name="sale_line_id"] ul.ui-autocomplete > li:first-child > a:not(:has(i.fa))',
+    trigger: '[name="sale_line_id"] ul.ui-autocomplete > li:first-child > a:not(:has(i.oi))',
     content: 'Select the Sales Order Item in the autocomplete dropdown.',
     run: "click",
 },
@@ -224,7 +224,7 @@ registry.category("web_tour.tours").add('sale_timesheet_tour', {
     content: 'Select an employee to link a Sales Order Item on his timesheets into this project.',
     run: 'click',
 }, {
-    trigger: '[name="employee_id"] ul.ui-autocomplete > li:first-child > a:not(:has(i.fa))',
+    trigger: '[name="employee_id"] ul.ui-autocomplete > li:first-child > a:not(:has(i.oi))',
     content: 'Select the first employee in the autocomplete dropdown',
     run: "click",
 }, {
@@ -233,7 +233,7 @@ registry.category("web_tour.tours").add('sale_timesheet_tour', {
     tooltipPosition: 'bottom',
     run: "edit S",
 }, {
-    trigger: '[name=sale_line_id] ul.ui-autocomplete > li:first-child > a:not(:has(i.fa))',
+    trigger: '[name=sale_line_id] ul.ui-autocomplete > li:first-child > a:not(:has(i.oi))',
     content: 'Select the first Sales Order Item in the autocomplete dropdown.',
     run: "click",
 }, {
@@ -271,7 +271,7 @@ registry.category("web_tour.tours").add('sale_timesheet_tour', {
     content: 'Select the first sale order of the list',
     run: "edit Prepaid",
 }, {
-    trigger: 'ul.ui-autocomplete > li:first-child > a:not(:has(i.fa))',
+    trigger: 'ul.ui-autocomplete > li:first-child > a:not(:has(i.oi))',
     content: 'Select the first item on the autocomplete dropdown',
     run: "click",
 }, {
@@ -283,7 +283,7 @@ registry.category("web_tour.tours").add('sale_timesheet_tour', {
     content: 'Open the project',
     run: "click",
 }, {
-    trigger: ".o_control_panel_navigation button i.fa-sliders",
+    trigger: ".o_control_panel_navigation button i[data-icon='tune']",
     content: 'Open embedded actions',
     run: "click",
 }, {
diff --git a/addons/sale_timesheet/views/account_analytic_line_views.xml b/addons/sale_timesheet/views/account_analytic_line_views.xml
index 09a1180c4a5876..da1f8b7d87c775 100644
--- a/addons/sale_timesheet/views/account_analytic_line_views.xml
+++ b/addons/sale_timesheet/views/account_analytic_line_views.xml
@@ -56,7 +56,7 @@
                 <div class="o_row" invisible="not allow_billable" groups="sales_team.group_sale_salesman">
                     <field name="so_line" widget="so_line_field" options='{"no_create": True}' context="{'create': False, 'edit': False, 'delete': False, 'with_price_unit': True}" readonly="readonly_timesheet" placeholder="Non-billable"/>
                     <span
-                        class="fa fa-exclamation-triangle text-warning"
+                        class="oi text-warning" data-icon="warning"
                         title="The sales order associated with this timesheet entry has been cancelled."
                         invisible="sale_order_state != 'cancel'"
                     />
@@ -66,12 +66,12 @@
                 <t groups="sales_team.group_sale_salesman">
                     <field name="order_id" invisible="1"/>
                     <field name="reinvoice_move_id" invisible="1"/>
-                    <button name="action_sale_order_from_timesheet" type="object" class="oe_stat_button" icon="fa-dollar" invisible="not order_id">
+                    <button name="action_sale_order_from_timesheet" type="object" class="oe_stat_button" icon="attach_money" invisible="not order_id">
                         <div class="o_stat_info">
                             <span class="o_stat_text">Sales Order</span>
                         </div>
                     </button>
-                    <button name="action_invoice_from_timesheet" type="object" class="oe_stat_button" icon="fa-pencil-square-o" invisible="not reinvoice_move_id">
+                    <button name="action_invoice_from_timesheet" type="object" class="oe_stat_button" icon="edit_square" invisible="not reinvoice_move_id">
                         <div class="o_stat_info">
                             <span class="o_stat_text">Invoice</span>
                         </div>
diff --git a/addons/sale_timesheet/views/account_invoice_views.xml b/addons/sale_timesheet/views/account_invoice_views.xml
index faa52e2778430d..3f4db18a6112a6 100644
--- a/addons/sale_timesheet/views/account_invoice_views.xml
+++ b/addons/sale_timesheet/views/account_invoice_views.xml
@@ -64,7 +64,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
                 <field name="timesheet_count" invisible="1"/>
-                <button name="%(sale_timesheet.action_timesheet_from_invoice)d" type="action" class="oe_stat_button" icon="fa-clock-o" invisible="timesheet_count == 0" groups="hr_timesheet.group_hr_timesheet_user">
+                <button name="%(sale_timesheet.action_timesheet_from_invoice)d" type="action" class="oe_stat_button" icon="schedule" invisible="timesheet_count == 0" groups="hr_timesheet.group_hr_timesheet_user">
                     <div class="o_field_widget o_stat_info">
                         <span class="o_stat_value">
                             <field name="timesheet_total_duration" class="mr4" nolabel="1"/>
diff --git a/addons/sale_timesheet/views/project_task_views.xml b/addons/sale_timesheet/views/project_task_views.xml
index aab6ecfe45009a..cac837d39a64eb 100644
--- a/addons/sale_timesheet/views/project_task_views.xml
+++ b/addons/sale_timesheet/views/project_task_views.xml
@@ -95,7 +95,7 @@
                         </form>
                     </field>
                     <p class="text-muted">
-                        <i class="fa fa-lightbulb-o"/>
+                        <i class="oi" data-icon="lightbulb"/>
                         <span>
                             Define the rate at which an employee's time is billed based on their expertise, skills, or experience.
                             To bill the same service at a different rate, create separate sales order items.
diff --git a/addons/sale_timesheet/views/res_config_settings_views.xml b/addons/sale_timesheet/views/res_config_settings_views.xml
index ef843a0c9a5689..31ca9108f58788 100644
--- a/addons/sale_timesheet/views/res_config_settings_views.xml
+++ b/addons/sale_timesheet/views/res_config_settings_views.xml
@@ -10,7 +10,7 @@
             <xpath expr="//div[@name='section_leaves']" position="before">
                 <block title="Billing">
                     <setting string="Time Billing" help="Sell services and invoice time spent" id="time_billing_setting">
-                        <button name="%(sale_timesheet.product_template_action_default_services)d" string="Configure your services" type="action" class="btn-link" icon="oi-arrow-right"/>
+                        <button name="%(sale_timesheet.product_template_action_default_services)d" string="Configure your services" type="action" class="btn-link" icon="east"/>
                     </setting>
                     <setting help="Timesheets taken into account when invoicing your time" name="invoice_policy">
                         <field name="invoice_policy" widget="upgrade_boolean"/>
diff --git a/addons/sale_timesheet/views/sale_order_views.xml b/addons/sale_timesheet/views/sale_order_views.xml
index a8faa188a6e157..059b4d3776baf3 100644
--- a/addons/sale_timesheet/views/sale_order_views.xml
+++ b/addons/sale_timesheet/views/sale_order_views.xml
@@ -11,7 +11,7 @@
                     name="action_view_timesheet"
                     type="object"
                     class="oe_stat_button"
-                    icon="fa-clock-o"
+                    icon="schedule"
                     invisible="not show_hours_recorded_button"
                     groups="hr_timesheet.group_hr_timesheet_user"
                 >
diff --git a/addons/sales_team/views/crm_team_member_views.xml b/addons/sales_team/views/crm_team_member_views.xml
index f2afe25c5f4c3c..caecab56c97a57 100644
--- a/addons/sales_team/views/crm_team_member_views.xml
+++ b/addons/sales_team/views/crm_team_member_views.xml
@@ -60,7 +60,7 @@
                         <main class="ms-3">
                             <field name="user_id" class="fw-bold fs-5"/>
                             <a type="open" class="nav-link p-0" name="crm_team_id_field">
-                                <i class="fa fa-fw me-1 fa-users text-primary" title="Sales Team"/>
+                                <i class="oi oi-fw oi-filled me-1 text-primary" data-icon="group" title="Sales Team"/>
                                 <field name="crm_team_id"/>
                             </a>
                         </main>
@@ -124,11 +124,11 @@
                                 <field name="company_id"/>
                             </div>
                             <div colspan="2" class="d-flex align-items-baseline" invisible="not user_id">
-                                <i class="fa fa-fw me-1 fa-envelope text-primary" title="Email"/>
+                                <i class="oi oi-fw oi-filled me-1 text-primary" data-icon="mail" title="Email"/>
                                 <field name="email" nolabel="1" placeholder="Email"/>
                             </div>
                             <div colspan="2" class="d-flex align-items-baseline" invisible="not user_id">
-                                <i class="fa fa-fw me-1 fa-phone text-primary" title="Phone"/>
+                                <i class="oi oi-fw oi-filled me-1 text-primary" data-icon="phone" title="Phone"/>
                                 <field name="phone" nolabel="1" placeholder="Phone"/>
                             </div>
                         </div>
diff --git a/addons/sales_team/views/crm_team_views.xml b/addons/sales_team/views/crm_team_views.xml
index c6a0ac4a062674..81185562d961ec 100644
--- a/addons/sales_team/views/crm_team_views.xml
+++ b/addons/sales_team/views/crm_team_views.xml
@@ -67,7 +67,7 @@
                                             <main class="ms-3">
                                                 <field name="name" class="fw-bold fs-5"/>
                                                 <div class="d-flex align-items-baseline text-break" invisible="not email">
-                                                    <i class="fa fa-envelope me-1" role="img" aria-label="Email" title="Email"/><field name="email"/>
+                                                    <i class="oi oi-filled me-1" data-icon="mail" role="img" aria-label="Email" title="Email"/><field name="email"/>
                                                 </div>
                                             </main>
                                         </t>
diff --git a/addons/sms/static/src/components/phone_field/phone_field.js b/addons/sms/static/src/components/phone_field/phone_field.js
index 9068bc1e8ec9c3..5c9f400e1d3ec4 100644
--- a/addons/sms/static/src/components/phone_field/phone_field.js
+++ b/addons/sms/static/src/components/phone_field/phone_field.js
@@ -26,7 +26,7 @@ patch(PhoneField.prototype, {
         return [
             ...super.actionButtons,
             {
-                icon: "fa-mobile",
+                icon: "smartphone",
                 onSelected: async () => {
                     await this.props.record.save();
                     this.action.doAction(
diff --git a/addons/sms/static/src/components/sms_widget/fields_sms_widget.xml b/addons/sms/static/src/components/sms_widget/fields_sms_widget.xml
index 2ddc3cf4624242..567a3e679c35f6 100644
--- a/addons/sms/static/src/components/sms_widget/fields_sms_widget.xml
+++ b/addons/sms/static/src/components/sms_widget/fields_sms_widget.xml
@@ -2,19 +2,19 @@
 
 <templates xml:space="preserve">
     <t t-name="sms.SmsWidget" t-inherit="mail.EmojisTextField" t-inherit-mode="primary">
-        <xpath expr="//div[hasclass('o_field_input_buttons')]/button[hasclass('fa-magic')]" position="replace"/>
+        <xpath expr="//div[hasclass('o_field_input_buttons')]/button[@data-icon='wand_stars']" position="replace"/>
         <xpath expr="/*[last()]/*[last()]" position="after">
             <div class="o_sms_container mt-3">
                 <span class="text-muted o_sms_count me-1">
                     <t t-out="this.nbrChar"/>/<t t-out="160 * this.nbrSMS" /> <t t-out="this.nbrCharExplanation" /> | <t t-out="this.nbrSMS"/> SMS (<t t-out="this.encoding"/>)
                     <a href="https://iap-services.odoo.com/iap/sms/pricing" target="_blank"
-                        title="SMS Pricing" aria-label="SMS Pricing" class="fa fa-lg fa-info-circle align-middle"/>
+                        title="SMS Pricing" aria-label="SMS Pricing" class="oi oi-lg align-middle" data-icon="info"/>
                 </span>
                 <button t-if="this.props.dynamicPlaceholder"
                     class="btn btn-link py-0 border-0"
                     title="Insert Field"
                     t-on-click="this.onDynamicPlaceholderOpen"
-                ><span class="fa fa-magic me-1"/><span>Insert Field</span></button>
+                ><span class="oi oi-fw me-1" data-icon="wand_stars"/><span>Insert Field</span></button>
             </div>
         </xpath>
         <xpath expr="//div[hasclass('o_field_input_buttons')]" position="attributes">
diff --git a/addons/sms/static/src/core/notification_model_patch.js b/addons/sms/static/src/core/notification_model_patch.js
index cce81f9f29fc01..ef1de5d9560753 100644
--- a/addons/sms/static/src/core/notification_model_patch.js
+++ b/addons/sms/static/src/core/notification_model_patch.js
@@ -36,7 +36,7 @@ const notificationPatch = {
     },
     get icon() {
         if (this.notification_type === "sms") {
-            return "fa fa-mobile";
+            return "smartphone";
         }
         return super.icon;
     },
diff --git a/addons/sms/static/tests/thread/message_patch.test.js b/addons/sms/static/tests/thread/message_patch.test.js
index 280227f6cad664..7c45ae036f277b 100644
--- a/addons/sms/static/tests/thread/message_patch.test.js
+++ b/addons/sms/static/tests/thread/message_patch.test.js
@@ -16,7 +16,7 @@ test("Notification Processing", async () => {
     await start();
     await openFormView("res.partner", partnerId);
     await _assertContainsSmsNotification();
-    await _assertContainsPopoverWithIcon("fa-hourglass-half");
+    await _assertContainsPopoverWithIcon("hourglass_bottom");
 });
 
 test("Notification Pending", async () => {
@@ -24,14 +24,14 @@ test("Notification Pending", async () => {
     await start();
     await openFormView("res.partner", partnerId);
     await _assertContainsSmsNotification();
-    await _assertContainsPopoverWithIcon("fa-paper-plane-o");
+    await _assertContainsPopoverWithIcon("send");
 });
 
 test("Notification Sent", async () => {
     const { partnerId } = await _prepareSmsNotification("sent");
     await start();
     await openFormView("res.partner", partnerId);
-    await _assertContainsPopoverWithIcon("fa-check");
+    await _assertContainsPopoverWithIcon("check");
 });
 
 test("Notification Error", async () => {
@@ -66,13 +66,13 @@ const _assertContainsSmsNotification = async () => {
     await contains(".o-mail-Message");
     await contains(".o-mail-Message-notification");
     await contains(".o-mail-Message-notification i");
-    await contains(".o-mail-Message-notification i.fa-mobile");
+    await contains(".o-mail-Message-notification i[data-icon='smartphone']");
 };
 
 const _assertContainsPopoverWithIcon = async (iconClassName) => {
     await click(".o-mail-Message-notification");
     await contains(".o-mail-MessageNotificationPopover");
     await contains(".o-mail-MessageNotificationPopover i");
-    await contains(`.o-mail-MessageNotificationPopover i.${iconClassName}`);
+    await contains(`.o-mail-MessageNotificationPopover i[data-icon="${iconClassName}"]`);
     await contains(".o-mail-MessageNotificationPopover", { text: "Someone" });
 };
diff --git a/addons/sms/views/iap_account_views.xml b/addons/sms/views/iap_account_views.xml
index 08c1d188628ac1..289cff36fd6498 100644
--- a/addons/sms/views/iap_account_views.xml
+++ b/addons/sms/views/iap_account_views.xml
@@ -8,15 +8,15 @@
             <field name="arch" type="xml">
                 <xpath expr="//sheet" position="before">
                     <div role="status" class="alert alert-danger mb-0" invisible="service_name != 'sms' or (state != 'unregistered' and state)">
-                        <i class="fa fa-warning"/> You cannot send SMS while your account is not registered.
+                        <i class="oi" data-icon="warning"/> You cannot send SMS while your account is not registered.
                         <button type="object"
                             name="action_open_registration_wizard" class="btn-link p-0">
-                            <i class="oi oi-arrow-right"/>
+                            <i class="oi" data-icon="east"/>
                             Register
                         </button>
                     </div>
                     <div role="status" class="alert alert-danger mb-0" invisible="service_name != 'sms' or (state != 'banned')">
-                        <i class="fa fa-warning"/> An error occurred with your account. Please contact the support for more information...
+                        <i class="oi" data-icon="warning"/> An error occurred with your account. Please contact the support for more information...
                     </div>
                 </xpath>
                 <xpath expr="//button[@name='action_buy_credits']" position="attributes">
@@ -28,7 +28,7 @@
                         <field name="sender_name" class="oe_inline" invisible="not sender_name"/>
                         <button type="object" invisible="sender_name"
                             name="action_open_sender_name_wizard" class="btn-link p-0">
-                            <i class="oi oi-arrow-right"/>
+                            <i class="oi" data-icon="east"/>
                             Set Sender Name
                         </button>
                     </div>
diff --git a/addons/sms/views/res_partner_views.xml b/addons/sms/views/res_partner_views.xml
index d1b2b9e3ed220d..b33de65b41f802 100644
--- a/addons/sms/views/res_partner_views.xml
+++ b/addons/sms/views/res_partner_views.xml
@@ -13,7 +13,7 @@
             </xpath>
             <xpath expr="//field[@name='phone']" position="before">
                 <field name="phone_blacklisted" invisible="1"/>
-                <button name="phone_action_blacklist_remove" class="fa fa-ban text-danger"
+                <button name="phone_action_blacklist_remove" class="oi text-danger" data-icon="block"
                     title="This phone number is blacklisted for SMS Marketing. Click to unblacklist."
                     type="object" context="{'default_phone': phone}" groups="base.group_user"
                     invisible="not phone_blacklisted"/>
diff --git a/addons/sms/views/sms_sms_views.xml b/addons/sms/views/sms_sms_views.xml
index cff9593e925ca2..73636b6c3c6853 100644
--- a/addons/sms/views/sms_sms_views.xml
+++ b/addons/sms/views/sms_sms_views.xml
@@ -41,9 +41,9 @@
                 <field name="partner_id"/>
                 <field name="failure_type"/>
                 <field name="state" widget="badge" decoration-info="state == 'outgoing'" decoration-muted="state == 'canceled'" decoration-success="state == 'sent'" decoration-danger="state == 'error'"/>
-                <button name="send" string="Send Now" type="object" icon="fa-paper-plane" invisible="state != 'outgoing'"/>
-                <button name="action_set_outgoing" string="Retry" type="object" icon="fa-repeat" invisible="state not in ('error', 'canceled')"/>
-                <button name="action_set_canceled" string="Cancel" type="object" icon="fa-times-circle" invisible="state not in ('error', 'outgoing')"/>
+                <button name="send" string="Send Now" type="object" icon="send" icon_class="oi-filled" invisible="state != 'outgoing'"/>
+                <button name="action_set_outgoing" string="Retry" type="object" icon="redo" icon_class="oi-filled" invisible="state not in ('error', 'canceled')"/>
+                <button name="action_set_canceled" string="Cancel" type="object" icon="cancel" invisible="state not in ('error', 'outgoing')"/>
             </list>
         </field>
     </record>
diff --git a/addons/sms/views/sms_template_views.xml b/addons/sms/views/sms_template_views.xml
index 50faa2279d8417..36274b353e79a0 100644
--- a/addons/sms/views/sms_template_views.xml
+++ b/addons/sms/views/sms_template_views.xml
@@ -18,7 +18,7 @@
                         <button name="action_create_sidebar_action" type="object"
                                 groups="base.group_no_one"
                                 class="oe_stat_button"
-                                invisible="sidebar_action_id" icon="fa-plus"
+                                invisible="sidebar_action_id" icon="add"
                                 help="Add a contextual action on the related model to open a sms composer with this template">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_text">Add</span>
@@ -27,7 +27,7 @@
                         </button>
                         <button name="action_unlink_sidebar_action" type="object"
                                 groups="base.group_no_one"
-                                class="oe_stat_button" icon="fa-minus"
+                                class="oe_stat_button" icon="remove"
                                 invisible="not sidebar_action_id"
                                 help="Remove the contextual action of the related model" widget="statinfo">
                             <div class="o_field_widget o_stat_info">
@@ -35,7 +35,7 @@
                                 <span class="o_stat_text">Context Action</span>
                             </div>
                         </button>
-                        <button class="oe_stat_button" name="%(sms_template_preview_action)d" icon="fa-search-plus" type="action" target="new">
+                        <button class="oe_stat_button" name="%(sms_template_preview_action)d" icon="zoom_in" type="action" target="new">
                             <div class="o_field_widget o_stat_info">
                                 <span class="o_stat_text">Preview</span>
                             </div>
diff --git a/addons/sms_twilio/views/res_config_settings_views.xml b/addons/sms_twilio/views/res_config_settings_views.xml
index 7e3080a4305310..0d32da8e4be766 100644
--- a/addons/sms_twilio/views/res_config_settings_views.xml
+++ b/addons/sms_twilio/views/res_config_settings_views.xml
@@ -10,7 +10,7 @@
                 <xpath expr="//widget[@service_name='sms']" position="before">
                     <field name="sms_provider" class="o_light_label" widget="radio" options="{'horizontal': true}" required="True"/>
                     <div class="content-group" invisible="sms_provider != 'twilio'">
-                        <button name="action_open_sms_twilio_account_manage" icon="oi-arrow-right"
+                        <button name="action_open_sms_twilio_account_manage" icon="east"
                                 type="object" class="btn-link"
                                 string="Configure Twilio Account"/>
                     </div>
diff --git a/addons/sms_twilio/wizard/sms_twilio_account_manage_views.xml b/addons/sms_twilio/wizard/sms_twilio_account_manage_views.xml
index 65b7e8a7986c64..f069acd1d9f7fa 100644
--- a/addons/sms_twilio/wizard/sms_twilio_account_manage_views.xml
+++ b/addons/sms_twilio/wizard/sms_twilio_account_manage_views.xml
@@ -16,7 +16,7 @@
                             role="button"
                             href="https://www.odoo.com/documentation/latest/applications/marketing/sms_marketing/twilio.html">
                             Need help ?
-                            <i class="fa fa-external-link" aria-hidden="true"/>
+                            <i class="oi" data-icon="open_in_new" aria-hidden="true"/>
                         </a>
                     </div>
                     <field name="sms_twilio_auth_token" password="True" placeholder="abcde12345abcde12345abcde12345ab"
@@ -25,7 +25,7 @@
                     <div class="d-flex align-items-center">
                         <field name="test_number" placeholder="+1 555-123-4567" class="w-auto"/>
                         <button name="action_send_test" string="Send test SMS"
-                            icon="fa-send" type="object"
+                            icon="send" icon_class="oi-filled" type="object"
                             class="btn btn-link w-auto ms-1 p-0"/>
                     </div>
                 </group>
@@ -33,7 +33,7 @@
                     <button
                         class="btn btn-secondary" colspan="2"
                         type="object" name="action_reload_numbers"
-                        string="Load from Twilio" icon="fa-refresh"/>
+                        string="Load from Twilio" icon="refresh"/>
                     <field name="sms_twilio_number_ids" colspan="2" nolabel="1">
                         <list editable="bottom">
                             <field name="sequence" widget="handle"/>
diff --git a/addons/snailmail/static/src/core/notification_model_patch.js b/addons/snailmail/static/src/core/notification_model_patch.js
index 2b0f256c6547da..2249d7b44fed69 100644
--- a/addons/snailmail/static/src/core/notification_model_patch.js
+++ b/addons/snailmail/static/src/core/notification_model_patch.js
@@ -6,7 +6,7 @@ import { _t } from "@web/core/l10n/translation";
 const notificationPatch = {
     get icon() {
         if (this.notification_type === "snail") {
-            return "fa fa-paper-plane";
+            return "send";
         }
         return super.icon;
     },
@@ -15,17 +15,22 @@ const notificationPatch = {
         if (this.notification_type === "snail") {
             switch (this.notification_status) {
                 case "sent":
-                    return "fa fa-check";
+                    return "check";
                 case "ready":
-                    return "fa fa-clock-o";
+                    return "schedule";
                 case "canceled":
-                    return "fa fa-trash-o";
+                    return "delete";
                 default:
-                    return "fa fa-exclamation text-danger";
+                    return "priority_high";
             }
         }
         return super.statusIcon;
     },
+    get statusIconClass() {
+        if (["sent", "ready", "canceled"].includes(this.notification_status)) {
+            return "text-danger";
+        }
+    },
     get failureMessage() {
         switch (this.failure_type) {
             case "sn_credit":
diff --git a/addons/snailmail/static/src/core_ui/snailmail_notification_popover.xml b/addons/snailmail/static/src/core_ui/snailmail_notification_popover.xml
index 1209f5c0c50447..7ffffdb64de6cd 100644
--- a/addons/snailmail/static/src/core_ui/snailmail_notification_popover.xml
+++ b/addons/snailmail/static/src/core_ui/snailmail_notification_popover.xml
@@ -5,7 +5,7 @@
         <xpath expr="//div[hasclass('o-mail-MessageNotificationPopover')]" position="replace">
             <t t-if="this.props.message.message_type === 'snailmail'">
                 <div class="o-snailmail-SnailmailNotificationPopover m-2" t-attf-class="{{ this.className }}">
-                    <i class="me-2 fa-fw" t-att-class="this.props.message.notification_ids[0].statusIcon" role="img"/>
+                    <i class="oi oi-fw me-2" t-att-class="this.props.message.notification_ids[0].statusIconClass" t-att-data-icon="this.props.message.notification_ids[0].statusIcon" role="img"/>
                     <span t-out="this.props.message.notification_ids[0].statusTitle"/>
                     <span t-if="this.props.message.notification_ids[0].isFailure">(<t t-out="this.props.message.notification_ids[0].failureMessage"/>)</span>
                 </div>
diff --git a/addons/snailmail/static/tests/message/message_patch.test.js b/addons/snailmail/static/tests/message/message_patch.test.js
index bd040ab2edbdb2..dd13fce16bf6f6 100644
--- a/addons/snailmail/static/tests/message/message_patch.test.js
+++ b/addons/snailmail/static/tests/message/message_patch.test.js
@@ -31,8 +31,8 @@ test("Sent", async () => {
     });
     await start();
     await openFormView("res.partner", partnerId);
-    await click(".o-mail-Message-notification i.fa-paper-plane");
-    await contains(".o-snailmail-SnailmailNotificationPopover i.fa-check");
+    await click(".o-mail-Message-notification i[data-icon='send']");
+    await contains(".o-snailmail-SnailmailNotificationPopover i[data-icon='check']");
     await contains(".o-snailmail-SnailmailNotificationPopover", { text: "Sent" });
 });
 
@@ -56,8 +56,8 @@ test("Cancelled", async () => {
     });
     await start();
     await openFormView("res.partner", partnerId);
-    await click(".o-mail-Message-notification i.fa-paper-plane");
-    await contains(".o-snailmail-SnailmailNotificationPopover i.fa-trash-o");
+    await click(".o-mail-Message-notification i[data-icon='send']");
+    await contains(".o-snailmail-SnailmailNotificationPopover i[data-icon='delete']");
     await contains(".o-snailmail-SnailmailNotificationPopover", { text: "Cancelled" });
 });
 
@@ -81,8 +81,8 @@ test("Pending", async () => {
     });
     await start();
     await openFormView("res.partner", partnerId);
-    await click(".o-mail-Message-notification i.fa-paper-plane");
-    await contains(".o-snailmail-SnailmailNotificationPopover i.fa-clock-o");
+    await click(".o-mail-Message-notification i[data-icon='send']");
+    await contains(".o-snailmail-SnailmailNotificationPopover i[data-icon='schedule']");
     await contains(".o-snailmail-SnailmailNotificationPopover", { text: "Awaiting Dispatch" });
 });
 
@@ -107,7 +107,7 @@ test("No Price Available", async () => {
     });
     await start();
     await openFormView("res.partner", partnerId);
-    await click(".o-mail-Message-notification i.fa-paper-plane");
+    await click(".o-mail-Message-notification i[data-icon='send']");
     await contains(".o-snailmail-SnailmailNotificationPopover", {
         text: "(Country Not Supported)",
     });
@@ -134,7 +134,7 @@ test("Credit Error", async () => {
     });
     await start();
     await openFormView("res.partner", partnerId);
-    await click(".o-mail-Message-notification i.fa-paper-plane");
+    await click(".o-mail-Message-notification i[data-icon='send']");
     await contains(".o-snailmail-SnailmailNotificationPopover", {
         text: "(Insufficient Credits)",
     });
@@ -161,7 +161,7 @@ test("Trial Error", async () => {
     });
     await start();
     await openFormView("res.partner", partnerId);
-    await click(".o-mail-Message-notification i.fa-paper-plane");
+    await click(".o-mail-Message-notification i[data-icon='send']");
     await contains(".o-snailmail-SnailmailNotificationPopover", {
         text: "(No IAP Credits)",
     });
@@ -188,7 +188,7 @@ test("Format Error", async () => {
     });
     await start();
     await openFormView("res.partner", partnerId);
-    await click(".o-mail-Message-notification i.fa-paper-plane");
+    await click(".o-mail-Message-notification i[data-icon='send']");
     await contains(".o-snailmail-SnailmailNotificationPopover", {
         text: "(Format Error)",
     });
@@ -211,7 +211,7 @@ test("Missing Required Fields", async () => {
     });
     await start();
     await openFormView("res.partner", partnerId);
-    await click(".o-mail-Message-notification i.fa-paper-plane");
+    await click(".o-mail-Message-notification i[data-icon='send']");
     await contains(".o-snailmail-SnailmailNotificationPopover", {
         text: "(Missing Required Fields)",
     });
diff --git a/addons/snailmail_account/views/res_config_settings_views.xml b/addons/snailmail_account/views/res_config_settings_views.xml
index dfbadf4abcb362..c4b54e0e3e3d76 100644
--- a/addons/snailmail_account/views/res_config_settings_views.xml
+++ b/addons/snailmail_account/views/res_config_settings_views.xml
@@ -11,17 +11,17 @@
                     <div>
                         <field name="snailmail_color"/>
                         <label for="snailmail_color"/>
-                        <span class="fa fa-lg fa-building-o" title="Values set here are company-specific."/>
+                        <span class="oi oi-lg" data-icon="business" title="Values set here are company-specific."/>
                     </div>
                     <div>
                         <field name="snailmail_duplex"/>
                         <label for="snailmail_duplex"/>
-                        <span class="fa fa-lg fa-building-o" title="Values set here are company-specific."/>
+                        <span class="oi oi-lg" data-icon="business" title="Values set here are company-specific."/>
                     </div>
                     <div>
                         <field name="snailmail_cover"/>
                         <label for="snailmail_cover"/>
-                        <span class="fa fa-lg fa-building-o" title="Values set here are company-specific."/>
+                        <span class="oi oi-lg" data-icon="business" title="Values set here are company-specific."/>
                     </div>
                 </div>
                 <widget name="iap_buy_more_credits" service_name="snailmail"/>
diff --git a/addons/spreadsheet/static/src/assets_backend/spreadsheet_binary_field/spreadsheet_binary_field.xml b/addons/spreadsheet/static/src/assets_backend/spreadsheet_binary_field/spreadsheet_binary_field.xml
index 43bbb57a978252..97c528a2c0bb95 100644
--- a/addons/spreadsheet/static/src/assets_backend/spreadsheet_binary_field/spreadsheet_binary_field.xml
+++ b/addons/spreadsheet/static/src/assets_backend/spreadsheet_binary_field/spreadsheet_binary_field.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
     <t t-name="spreadsheet.SpreadsheetBinaryField" t-inherit="web.BinaryField" t-inherit-mode="primary">
         <xpath expr="//t[@name='download']" position="replace"></xpath>
-        <xpath expr="//span[hasclass('fa-download')]" position="replace">
-            <span class="fa fa-file-text-o me-2" />
+        <xpath expr="//span[@data-icon='download']" position="replace">
+            <span class="oi me-2" data-icon="article" />
         </xpath>
     </t>
 </templates>
diff --git a/addons/spreadsheet/static/src/chart/odoo_link/figure_component.xml b/addons/spreadsheet/static/src/chart/odoo_link/figure_component.xml
index 6106f42b632718..5b5941d19ae460 100644
--- a/addons/spreadsheet/static/src/chart/odoo_link/figure_component.xml
+++ b/addons/spreadsheet/static/src/chart/odoo_link/figure_component.xml
@@ -5,7 +5,7 @@
                 t-if="hasOdooLink and !env.isDashboard()"
                 class="o-figure-menu-item o-chart-external-link"
                 t-custom-click="(ev, isMiddleClick) => this.navigateToOdooLink(isMiddleClick)">
-                <span class="fa fa-external-link" />
+                <span class="oi" data-icon="open_in_new" />
             </div>
         </xpath>
     </div>
diff --git a/addons/spreadsheet/static/src/components/share_button/share_button.xml b/addons/spreadsheet/static/src/components/share_button/share_button.xml
index 56456a7eb79321..eda98c232db56a 100644
--- a/addons/spreadsheet/static/src/components/share_button/share_button.xml
+++ b/addons/spreadsheet/static/src/components/share_button/share_button.xml
@@ -9,14 +9,14 @@
       disabled="!this.props.model"
     >
       <button t-att-class="this.togglerClass">
-        <i class="fa fa-share-alt"/>
+        <i class="oi" data-icon="share"/>
         Share
       </button>
       <t t-set-slot="content">
         <t>
           <div class="d-flex px-3">
             <div class="align-self-center d-flex justify-content-center align-items-center flex-shrink-0">
-              <i class="fa fa-globe fa-2x" title="Share to web"></i>
+              <i class="oi oi-2x" data-icon="public" title="Share to web"></i>
             </div>
             <div class="flex-grow-1 px-3">
               <div class="lead">Spreadsheet published</div>
@@ -26,10 +26,10 @@
           <div class=" px-3 o_field_widget o_readonly_modifier o_field_CopyClipboardChar">
             <div t-if="this.state.url" class="d-grid rounded-2 overflow-hidden">
               <span t-out="this.state.url"/>
-              <CopyButton className="'o_btn_char_copy btn-sm'" content="this.state.url" successText="this.copiedText" icon="'fa-clipboard'"/>
+              <CopyButton className="'o_btn_char_copy btn-sm'" content="this.state.url" successText="this.copiedText" icon="'assignment'"/>
             </div>
             <div t-else="" class="o_loading_state d-flex align-items-center justify-content-center">
-              <i class="fa fa-circle-o-notch fa-spin px-2"/><span>Generating sharing link</span>
+              <i class="oi oi-spin px-2" data-icon="autorenew"/><span>Generating sharing link</span>
             </div>
           </div>
         </t>
diff --git a/addons/spreadsheet/static/src/global_filters/components/date_filter_dropdown/date_filter_dropdown.xml b/addons/spreadsheet/static/src/global_filters/components/date_filter_dropdown/date_filter_dropdown.xml
index e6862363d0eaba..2a4b98d60cf92b 100644
--- a/addons/spreadsheet/static/src/global_filters/components/date_filter_dropdown/date_filter_dropdown.xml
+++ b/addons/spreadsheet/static/src/global_filters/components/date_filter_dropdown/date_filter_dropdown.xml
@@ -18,9 +18,9 @@
                 </t>
                 <t t-elif="this.isFixedPeriod(option.type)">
                     <div class="d-flex justify-content-between">
-                        <button class="btn-previous fa fa-caret-left" t-on-click="() => this.selectPrevious(option.type)" />
+                        <button class="btn-previous oi" data-icon="arrow_left" t-on-click="() => this.selectPrevious(option.type)" />
                         <input class="o_input" type="text" t-att-value="this.getDescription(option.type)" readonly="true"/>
-                        <button class="btn-next fa fa-caret-right" t-on-click="() => this.selectNext(option.type)" />
+                        <button class="btn-next oi" data-icon="arrow_right" t-on-click="() => this.selectNext(option.type)" />
                     </div>
                 </t>
             </DropdownItem>
diff --git a/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.xml b/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.xml
index c39267de21bfdd..f18c5ad5cd84d5 100644
--- a/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.xml
+++ b/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.xml
@@ -30,7 +30,7 @@
                         value="this.filterValue?.minimumValue"
                         onValueChanged="(value) => this.onMinimumValueNumericInput(this.filter.id, value)"
                     />
-                    <i class="fa fa-long-arrow-right mx-2"/>
+                    <i class="oi mx-2" data-icon="east"/>
                     <NumericFilterValue
                         value="this.filterValue?.maximumValue"
                         onValueChanged="(value) => this.onMaximumValueNumericInput(this.filter.id, value)"
@@ -55,7 +55,8 @@
                                     msgType="'error'"/>
             </span>
             <i t-if="this.isValid and this.props.showClear and this.getters.isGlobalFilterActive(this.filter.id)"
-                class="fa fa-times btn btn-link text-muted ms-1 mt-1"
+                class="oi btn btn-link text-muted ms-1 mt-1"
+                data-icon="close"
                 title="Clear"
                 t-on-click="() => this.clear(this.filter.id)"/>
         </div>
diff --git a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.css b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.css
index 3d67e1f95af3ec..bc408d2aed4602 100644
--- a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.css
+++ b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.css
@@ -2082,7 +2082,7 @@
       font: bold 16px sans-serif;
     }
   }
-  .fa-small {
+  .oi-small {
     font-size: 14px;
   }
 
@@ -2947,7 +2947,7 @@
       pointer-events: none;
     }
 
-    .fa-stack {
+    .oi-stack {
       /* reset stack size which is doubled by default */
       width: 18px;
       height: 18px;
@@ -2958,7 +2958,7 @@
       left: -1px;
       top: -1px;
 
-      .fa-question-circle {
+      [data-icon="help"] {
         color: var(--os-primary-button-bg);
       }
     }
@@ -2975,7 +2975,7 @@
     }
 
     .o-composer-assistant-container {
-      .fa-times-circle {
+      [data-icon="cancel"] {
         color: var(--os-primary-button-bg);
       }
     }
diff --git a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js
index b6014b7e3f5f06..895cacd308f0f2 100644
--- a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js
+++ b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.js
@@ -63873,7 +63873,8 @@ class ChartDashboardMenu extends Component {
         return {
             id: "fullScreenChart",
             label: isFullScreen ? _t("Exit Full Screen") : _t("Full Screen"),
-            class: `text-muted fa ${isFullScreen ? "fa-compress" : "fa-expand"}`,
+            class: "oi text-muted",
+            icon: isFullScreen ? "close_fullscreen" : "expand_content",
             onClick: () => {
                 this.fullScreenFigureStore.toggleFullScreenFigure(figureId);
             },
diff --git a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.xml b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.xml
index eb8655598a75c3..a6e3c64b878fcb 100644
--- a/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.xml
+++ b/addons/spreadsheet/static/src/o_spreadsheet/o_spreadsheet.xml
@@ -65,7 +65,7 @@
             t-if="env.model.getters.isReadonly()"
             class="o-readonly-toolbar d-flex flex-grow-1 align-items-center text-muted">
             <span>
-              <i class="fa fa-eye"/>
+              <i class="oi" data-icon="visibility"/>
               Readonly Access
             </span>
           </div>
@@ -476,7 +476,7 @@
         <div class="d-flex flex-fill align-items-center bottom-bar-menu border-top border-bottom">
           <Ripple>
             <div class="py-1 px-1 mx-2 ribbon-toggler" t-on-click="toggleRibbon">
-              <i class="o-icon fa fa-cog"/>
+              <i class="o-icon oi oi-filled" data-icon="settings"/>
             </div>
           </Ripple>
           <BottomBar onClick="props.onClick"/>
@@ -492,7 +492,7 @@
           class="o-previous-button px-3 py-1 mx-2 rounded"
           t-on-click="onClickBack"
           t-att-title="backTitle">
-          <i class="fa fa-angle-left"/>
+          <i class="oi" data-icon="keyboard_arrow_left"/>
         </div>
         <span class="d-flex align-items-center" t-out="state.title"/>
       </div>
@@ -729,14 +729,14 @@
           t-if="props.onToggleCollapsePanel"
           class="o-collapse-panel o-sidePanelAction rounded"
           t-on-click="props.onToggleCollapsePanel">
-          <i class="fa fa-angle-double-right"/>
+          <i class="oi" data-icon="keyboard_double_arrow_right"/>
         </div>
         <div class="o-sidePanelTitle o-fw-bold ms-2" t-out="getTitle()"/>
         <div
           t-if="props.isPinned"
           class="o-pin-panel o-sidePanelAction ms-auto rounded active"
           t-on-click="props.onTogglePinPanel">
-          <i class="fa fa-thumb-tack"/>
+          <i class="oi" data-icon="push_pin"/>
         </div>
         <div class="o-sidePanelClose o-sidePanelAction rounded" t-on-click="props.onCloseSidePanel">
           ✕
@@ -773,13 +773,13 @@
         <div
           t-if="props.onToggleCollapsePanel"
           class="o-collapse-panel o-sidePanelAction rounded mb-1">
-          <i class="fa fa-angle-double-left"/>
+          <i class="oi" data-icon="keyboard_double_arrow_left"/>
         </div>
         <div
           t-if="props.isPinned"
           class="o-pin-panel o-sidePanelAction ms-auto rounded active"
           t-on-click="props.onTogglePinPanel">
-          <i class="fa fa-thumb-tack"/>
+          <i class="oi" data-icon="push_pin"/>
         </div>
         <div
           class="o-sidePanelClose o-sidePanelAction rounded mb-1"
@@ -901,14 +901,14 @@
           class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
           t-att-class="state.panel !== 'configuration' ? 'inactive' : ''"
           t-on-click="switchPanel.bind(this, 'configuration')">
-          <i class="fa fa-sliders me-1"/>
+          <i class="oi me-1" data-icon="tune"/>
           Configuration
         </div>
         <div
           class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
           t-att-class="state.panel !== 'design' ? 'inactive' : ''"
           t-on-click="switchPanel.bind(this, 'design')">
-          <i class="fa fa-paint-brush me-1"/>
+          <i class="oi me-1" data-icon="design_services"/>
           Design
         </div>
       </div>
@@ -1161,7 +1161,8 @@
               <t t-set="errorMessage" t-value="getHugeDimensionErrorMessage(col)"/>
               <i
                 t-if="errorMessage"
-                class="text-warning fa fa-exclamation-triangle"
+                class="oi text-warning"
+                data-icon="warning"
                 t-att-title="errorMessage"
               />
             </t>
@@ -1202,7 +1203,8 @@
               <t t-set="errorMessage" t-value="getHugeDimensionErrorMessage(row)"/>
               <i
                 t-if="errorMessage"
-                class="text-warning fa fa-exclamation-triangle"
+                class="oi text-warning"
+                data-icon="warning"
                 t-att-title="errorMessage"
               />
             </t>
@@ -1284,13 +1286,14 @@
         <t t-if="measure.isHidden" t-set="hideTitle">Show</t>
         <t t-else="" t-set="hideTitle">Hide</t>
         <i
-          t-att-class="measure.isHidden ? 'fa fa-eye-slash': 'fa fa-eye'"
+          t-att-data-icon="measure.isHidden ? 'visibility_off': 'visibility'"
           t-att-title="hideTitle"
-          class="o-button-icon pe-1 ps-2"
+          class="o-button-icon oi pe-1 ps-2"
           t-on-click="toggleMeasureVisibility"
         />
         <i
-          class="o-button-icon pe-1 ps-2 fa fa-cog"
+          class="o-button-icon oi oi-filled pe-1 ps-2"
+          data-icon="settings"
           title="Show values as"
           t-on-click="openShowValuesAs"
         />
@@ -1378,7 +1381,8 @@
         <div class="d-flex flex-rows" t-on-pointerdown.stop="">
           <t t-slot="upper-right-icons"/>
           <i
-            class="o-button-icon fa fa-trash pe-1 ps-2"
+            class="o-button-icon oi oi-filled pe-1 ps-2"
+            data-icon="delete"
             t-if="props.onRemoved"
             t-on-click="() => props.onRemoved(props.dimension)"
           />
@@ -1423,7 +1427,8 @@
       />
       <div t-if="props.isDirty" class="d-flex align-items-center">
         <i
-          class="o-button-icon pe-0 fa fa-undo"
+          class="o-button-icon pe-0 oi"
+          data-icon="undo"
           title="Discard all changes"
           t-on-click="() => props.discard()"
         />
@@ -1458,7 +1463,8 @@
                 selectContentOnFocus="true"
               />
               <i
-                class="o-button-icon ps-3 fa fa-trash"
+                class="o-button-icon oi oi-filled ps-3"
+                data-icon="delete"
                 t-on-click="() => this.onDeleteGroup(group_index)"
               />
             </div>
@@ -2483,7 +2489,8 @@
 
   <t t-name="o-spreadsheet-CogWheelMenu">
     <span
-      class="fa fa-cog os-cog-wheel-menu-icon o-button-icon"
+      class="oi oi-filled os-cog-wheel-menu-icon o-button-icon"
+      data-icon="settings"
       t-on-click="toggleMenu"
       t-ref="button"
     />
@@ -3102,14 +3109,14 @@
           class="o-sidePanel-tab o-panel-configuration d-flew flex-grow-1 text-center"
           t-att-class="store.panel !== 'configuration' ? 'inactive' : ''"
           t-on-click="switchPanel.bind(this, 'configuration')">
-          <i class="fa fa-sliders me-1"/>
+          <i class="oi me-1" data-icon="tune"/>
           Configuration
         </div>
         <div
           class="o-sidePanel-tab o-panel-design d-flew flex-grow-1 text-center"
           t-att-class="store.panel !== 'design' ? 'inactive' : ''"
           t-on-click="switchPanel.bind(this, 'design')">
-          <i class="fa fa-paint-brush me-1"/>
+          <i class="oi me-1" data-icon="design_services"/>
           Design
         </div>
       </div>
@@ -5272,12 +5279,12 @@
   </t>
   <t t-name="o-spreadsheet-Icon.CLIPBOARD">
     <div class="o-icon">
-      <i class="fa fa-clipboard"/>
+      <i class="oi" data-icon="assignment"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.COPY">
     <div class="o-icon">
-      <i class="fa fa-clone"/>
+      <i class="oi" data-icon="content_copy"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CUT">
@@ -5335,7 +5342,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.SHOW">
     <div class="o-icon">
-      <i class="fa fa-eye"/>
+      <i class="oi" data-icon="visibility"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FORMULA">
@@ -5468,22 +5475,22 @@
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CHART">
     <div class="o-icon">
-      <i class="fa fa-bar-chart"/>
+      <i class="oi" data-icon="bar_chart"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_IMAGE">
     <div class="o-icon">
-      <i class="fa fa-file-image-o"/>
+      <i class="oi" data-icon="image"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_LINK">
     <div class="o-icon">
-      <i class="fa fa-link"/>
+      <i class="oi" data-icon="link"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CHECKBOX">
     <div class="o-icon">
-      <i class="fa fa-check-square-o"/>
+      <i class="oi" data-icon="check_box"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_DROPDOWN">
@@ -5591,7 +5598,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.IRREGULARITY_MAP">
     <div class="o-icon">
-      <i class="fa fa-align-center fa-rotate-270"/>
+      <i class="oi oi-rotate-270" data-icon="format_align_center"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_RIGHT">
@@ -5774,57 +5781,57 @@
 
   <t t-name="o-spreadsheet-Icon.EDIT">
     <div class="o-icon">
-      <i class="fa fa-pencil-square-o"/>
+      <i class="oi" data-icon="edit_square"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.EXTERNAL">
     <div class="o-icon">
-      <i class="fa fa-external-link"/>
+      <i class="oi" data-icon="open_in_new"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.UNLINK">
     <div class="o-icon">
-      <i class="fa fa-chain-broken"/>
+      <i class="oi" data-icon="link_off"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_UP">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-up"/>
+    <div class="o-icon oi-small">
+      <i class="oi" data-icon="arrow_drop_up"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_DOWN">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-down"/>
+    <div class="o-icon oi-small">
+      <i class="oi" data-icon="arrow_drop_down"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_RIGHT">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-right"/>
+    <div class="o-icon oi-small">
+      <i class="oi" data-icon="arrow_right"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CARET_LEFT">
-    <div class="o-icon fa-small">
-      <i class="fa fa-caret-left"/>
+    <div class="o-icon oi-small">
+      <i class="oi" data-icon="arrow_left"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.TRASH">
     <div class="o-icon">
-      <i class="fa fa-trash-o"/>
+      <i class="oi" data-icon="delete"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.TRASH_FILLED">
     <div class="o-icon">
-      <i class="fa fa-trash"/>
+      <i class="oi oi-filled" data-icon="delete"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.REFRESH">
     <div class="o-icon">
-      <i class="fa fa-refresh"/>
+      <i class="oi" data-icon="refresh"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.EXCHANGE">
     <div class="o-icon">
-      <i class="fa fa-exchange"/>
+      <i class="oi" data-icon="swap_horiz"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ARROW_DOWN">
@@ -5927,17 +5934,17 @@
   </t>
   <t t-name="o-spreadsheet-Icon.SORT_ASCENDING">
     <div class="o-icon">
-      <i class="fa fa-sort-alpha-asc"/>
+      <i class="oi" data-icon="sort_by_alpha"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SORT_DESCENDING">
     <div class="o-icon">
-      <i class="fa fa-sort-alpha-desc"/>
+      <i class="oi" data-icon="sort_by_alpha"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DATA_CLEANUP">
     <div class="o-icon">
-      <i class="fa fa-magic"/>
+      <i class="oi" data-icon="wand_stars"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON">
@@ -5950,17 +5957,17 @@
   </t>
   <t t-name="o-spreadsheet-Icon.FILTER_ICON_ACTIVE">
     <div class="o-icon filter-icon-active">
-      <i class="fa fa-filter"/>
+      <i class="oi oi-filled" data-icon="filter_alt"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SEARCH">
     <div class="o-icon">
-      <i class="fa fa-search"/>
+      <i class="oi" data-icon="search"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ZOOM">
     <div class="o-icon">
-      <i class="fa fa-search-plus"/>
+      <i class="oi" data-icon="zoom_in"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CHECK">
@@ -5994,8 +6001,8 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION">
-    <div class="o-icon fa-small">
-      <i class="fa fa-exclamation-triangle"/>
+    <div class="o-icon oi-small">
+      <i class="oi" data-icon="warning"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SPLIT_TEXT">
@@ -6008,7 +6015,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.ERROR">
     <div class="o-icon">
-      <i class="fa fa-exclamation-circle"/>
+      <i class="oi" data-icon="error"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DISPLAY_HEADER">
@@ -6237,12 +6244,12 @@
   </t>
   <t t-name="o-spreadsheet-Icon.HIDE_SHEET">
     <div class="o-icon">
-      <i class="fa fa-eye-slash"/>
+      <i class="oi" data-icon="visibility_off"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DOWNLOAD">
     <div class="o-icon">
-      <i class="fa fa-download"/>
+      <i class="oi oi-fw" data-icon="download"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CAROUSEL">
@@ -6287,7 +6294,7 @@
   </t>
   <t t-name="o-spreadsheet-Icon.DARK_MODE">
     <div class="o-icon">
-      <i class="fa fa-moon-o"/>
+      <i class="oi" data-icon="dark_mode"/>
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-0">
@@ -7132,7 +7139,7 @@
           t-att-class="{'active': menuState.isOpen}"
           t-ref="carouselTabsDropdown"
           t-on-click="toggleMenu">
-          <div class="fa fa-angle-down"/>
+          <div class="oi" data-icon="keyboard_arrow_down"/>
           <MenuPopover
             t-if="menuState.isOpen"
             menuId="menuId"
@@ -7145,17 +7152,17 @@
         <div
           t-if="env.isDashboard()"
           t-att-title="fullScreenButtonTitle"
-          class="o-carousel-full-screen-button fa o-carousel-button rounded p-1 ms-1"
+          class="o-carousel-full-screen-button oi o-carousel-button rounded p-1 ms-1"
           t-att-class="{
-            'fa-compress': props.isFullScreen,
-            'fa-expand': !props.isFullScreen,
             'invisible': selectedCarouselItem?.type !== 'chart',
           }"
+          t-attf-data-icon="{{ props.isFullScreen ? 'close_fullscreen' : 'expand_content'}}"
           t-on-click="toggleFullScreen"
         />
         <div
           t-if="!env.isDashboard()"
-          class="o-carousel-menu-button o-carousel-button fa fa-ellipsis-v rounded ms-1"
+          class="o-carousel-menu-button o-carousel-button oi rounded ms-1"
+          data-icon="more_vert"
           t-on-click="openContextMenu"
         />
       </div>
@@ -7322,6 +7329,7 @@
           <div
             t-attf-class=" {{item.class}}"
             class="o-chart-dashboard-item btn border-0 lh-1 p-1 d-flex align-items-center justify-content-center"
+            t-attf-data-icon=" {{item.icon}}"
             t-att-title="item.label"
             t-on-click="item.onClick"
             t-att-data-id="item.id">
@@ -7329,7 +7337,8 @@
           </div>
         </t>
         <button
-          class="o-chart-dashboard-item btn text-muted lh-1 p-1 fa fa-ellipsis-v"
+          class="o-chart-dashboard-item oi btn text-muted lh-1 p-1"
+          data-icon="more_vert"
           t-on-click="openContextMenu"
         />
       </div>
@@ -7615,9 +7624,9 @@
           t-on-click.stop="openAssistant"
           t-on-pointerdown.prevent.stop=""
           t-on-pointerup.stop=""
-          class="fa-stack position-absolute translate-middle force-open-assistant fs-4">
-          <i class="fa fa-circle fa-stack-1x fa-inverse"/>
-          <i class="fa fa-question-circle fa-stack-1x"/>
+          class="oi-stack position-absolute translate-middle force-open-assistant fs-4">
+          <i class="oi oi-filled oi-stack-1x" data-icon="circle"/>
+          <i class="oi oi-stack-1x" data-icon="help"/>
         </span>
         <div
           class="o-composer w-100 text-start"
@@ -7658,9 +7667,9 @@
           role="button"
           t-on-click="closeAssistant"
           t-on-pointerdown.prevent.stop=""
-          class="fa-stack position-absolute top-0 start-100 translate-middle fs-4">
-          <i class="fa fa-circle fa-stack-1x fa-inverse"/>
-          <i class="fa fa-times-circle fa-stack-1x"/>
+          class="oi-stack position-absolute top-0 start-100 translate-middle fs-4">
+          <i class="oi oi-filled oi-stack-1x" data-icon="circle"/>
+          <i class="oi oi-filled oi-stack-1x" data-icon="cancel"/>
         </span>
         <div class="o-composer-assistant overflow-auto" t-att-style="assistantStyle">
           <FunctionDescriptionProvider
diff --git a/addons/spreadsheet/static/tests/global_filters/filter_value_component.test.js b/addons/spreadsheet/static/tests/global_filters/filter_value_component.test.js
index edac88bc576fc1..a1eab22f5573a5 100644
--- a/addons/spreadsheet/static/tests/global_filters/filter_value_component.test.js
+++ b/addons/spreadsheet/static/tests/global_filters/filter_value_component.test.js
@@ -215,7 +215,7 @@ test("Filter with showClear should display the clear icon", async function () {
         filter: model.getters.getGlobalFilter("42"),
         showClear: true,
     });
-    expect(".fa-times").toHaveCount(1);
+    expect("[data-icon='close']").toHaveCount(1);
 });
 
 test("Filter without showClear should not display the clear icon", async function () {
@@ -231,7 +231,7 @@ test("Filter without showClear should not display the clear icon", async functio
         model,
         filter: model.getters.getGlobalFilter("42"),
     });
-    expect(".fa-times").toHaveCount(0);
+    expect("[data-icon='close']").toHaveCount(0);
 });
 
 test("relational filter with a contextual domain", async function () {
diff --git a/addons/spreadsheet/static/tests/widgets/spreadsheet_binary_field.test.js b/addons/spreadsheet/static/tests/widgets/spreadsheet_binary_field.test.js
index c6609a487af0ac..2def87a70bc4f4 100644
--- a/addons/spreadsheet/static/tests/widgets/spreadsheet_binary_field.test.js
+++ b/addons/spreadsheet/static/tests/widgets/spreadsheet_binary_field.test.js
@@ -47,7 +47,7 @@ test("Download button for dashboard json file should be hidden in list view", as
                     />
                 </list>`,
     });
-    expect(`.o_field_widget[name="spreadsheet_binary_data"] .fa-download`).toHaveCount(0, {
+    expect(`.o_field_widget[name="spreadsheet_binary_data"] [data-icon="download"]`).toHaveCount(0, {
         message: "The download button should be hidden",
     });
 });
diff --git a/addons/spreadsheet/views/public_readonly_spreadsheet_templates.xml b/addons/spreadsheet/views/public_readonly_spreadsheet_templates.xml
index 982c409e083dd1..05ed13a2b9ba93 100644
--- a/addons/spreadsheet/views/public_readonly_spreadsheet_templates.xml
+++ b/addons/spreadsheet/views/public_readonly_spreadsheet_templates.xml
@@ -16,7 +16,7 @@
                 <div class="fst-italic flex-fill ps-3">
                     <t t-if="is_frozen">Frozen and copied on <span t-field="share.create_date"/></t>
                     <div class="d-inline-flex" t-if="props['downloadExcelUrl']">
-                        <a class="btn btn-secondary o_download_btn" t-att-href="props['downloadExcelUrl']" title="Download"><i class="fa fa-download"/></a>
+                        <a class="btn btn-secondary o_download_btn" t-att-href="props['downloadExcelUrl']" title="Download"><i class="oi oi-fw" data-icon="download"/></a>
                     </div>
                 </div>
                 <div class="nav d-table my-auto">
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/chart/chart_dashboard_menu.scss b/addons/spreadsheet_dashboard/static/src/bundle/chart/chart_dashboard_menu.scss
index 207e1f0f6d86e3..04b7cf44b14783 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/chart/chart_dashboard_menu.scss
+++ b/addons/spreadsheet_dashboard/static/src/bundle/chart/chart_dashboard_menu.scss
@@ -34,9 +34,9 @@
     }
 
     option::checkmark {
-        font: .7em/1em FontAwesome;
+        font: .7em/1em 'material_symbols_sharp';
         color: $link-color;
-        content: "\f00c";
+        content: "check";
     }
 
     option:checked {
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.scss b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.scss
index 5e06604cc27587..e62c82971275d2 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.scss
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.scss
@@ -111,11 +111,13 @@
     .o_dashboard_star {
         margin: auto 0;
         cursor: pointer;
-        &.fa-star-o {
+
+        &[data-icon="star"] {
             @include o-hover-text-color($o-main-color-muted, $o-main-favorite-color);
-        }
-        &.fa-star {
-            color: $o-main-favorite-color;
+
+            &.oi-filled {
+                color: $o-main-favorite-color;
+            }
         }
     }
 }
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
index 498db65c63cd2f..e62681be70d69f 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
@@ -25,7 +25,9 @@
                     t-if="this.loader.getActiveDashboard()"
                     title="Toggle favorite"
                     t-on-click="this.toggleFavorite"
-                    t-attf-class="o_dashboard_star align-middle lh-base fa fa-lg fa-star{{!this.loader.getActiveDashboard().data.is_favorite ? '-o' : ''}}"
+                    class="o_dashboard_star oi oi-lg align-middle lh-base"
+                    t-att-class="{'oi-filled': this.loader.getActiveDashboard().data.is_favorite}"
+                    data-icon="star"
                 />
                 <div class="ms-1 o_search_toggler" t-if="this.env.isSmall">
                     <t t-component="this.searchBarToggler.component" t-props="this.searchBarToggler.props"/>
@@ -62,7 +64,7 @@
         <div class="bg-view h-100 o_search_panel_sidebar cursor-pointer" t-on-click="this.toggleSidebar">
             <div class="d-flex">
                 <button title="Open sidebar" aria-label="Open sidebar" class="btn btn-light btn-sm m-1 mb-2 p-2">
-                    <i class="oi oi-lg oi-panel-right fa-flip-horizontal"/>
+                    <i class="oi oi-lg" data-icon="dock_to_right"/>
                 </button>
                 <div class="mx-auto" t-if="this.loader.getActiveDashboard()">
                     <span class="fw-bolder" t-out="this.activeDashboardGroupName"/>
@@ -76,7 +78,7 @@
     <t t-name="spreadsheet_dashboard.DashboardAction.Expanded">
         <div class="o_spreadsheet_dashboard_search_panel o_search_panel flex-grow-0 border-end flex-shrink-0 pe-2 pb-5 ps-4 h-100 bg-view overflow-auto position-relative pt-4">
             <button title="Close sidebar" aria-label="Close sidebar" t-if="!this.env.isSmall and this.loader.getActiveDashboard()" class="btn btn-light btn-sm end-0 m-1 mb-2 position-absolute px-2 py-1 top-0 z-1" t-on-click="this.toggleSidebar">
-                <i class="oi oi-lg oi-panel-right fa-flip-horizontal"/>
+                <i class="oi oi-lg" data-icon="dock_to_right"/>
             </button>
             <div class="mt-2"/>
             <section t-foreach="this.getDashboardGroups()" t-as="group" t-key="group.id" class="o_search_panel_section o_search_panel_category mt-4">
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_date_filter/dashboard_date_filter.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_date_filter/dashboard_date_filter.xml
index 3af6f1d1a8d7a2..60ae78e88c71fe 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_date_filter/dashboard_date_filter.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_date_filter/dashboard_date_filter.xml
@@ -3,7 +3,7 @@
     <t t-name="spreadsheet_dashboard.DashboardDateFilter">
         <Dropdown navigationOptions="{ 'shouldFocusChildInput': false }">
             <button class="btn btn-secondary o-btn-date-filter">
-                <i class="fa fa-calendar me-2"/>
+                <i class="oi oi-filled me-2" data-icon="calendar_today"/>
                 <span class="o-date-filter-value" t-out="this.inputValue"/>
             </button>
             <t t-set-slot="content">
@@ -15,10 +15,10 @@
             </t>
         </Dropdown>
         <button class="btn btn-secondary ms-1 btn-previous-date" t-on-click="this.selectPrevious" t-att-disabled="this.props.value === undefined">
-            <i class="fa fa-caret-left"/>
+            <i class="oi" data-icon="arrow_left"/>
         </button>
         <button class="btn btn-secondary ms-1 btn-next-date" t-on-click="this.selectNext" t-att-disabled="this.props.value === undefined">
-            <i class="fa fa-caret-right"/>
+            <i class="oi" data-icon="arrow_right"/>
         </button>
     </t>
 </templates>
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_facet/dashboard_facet.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_facet/dashboard_facet.xml
index 76251775a3b8ff..59ffbcea717a9c 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_facet/dashboard_facet.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_facet/dashboard_facet.xml
@@ -6,7 +6,7 @@
             <div class="o_searchview_facet_label position-relative rounded-start-2 px-1 rounded-end-0 p-0 btn btn-primary" t-on-click.stop="this.props.onClick">
                 <small class="px-1" t-out="this.props.facet.title"/>
                 <span class="position-absolute start-0 top-0 bottom-0 end-0 bg-inherit opacity-0 opacity-100-hover">
-                    <i class="fa fa-fw fa-cog"></i>
+                    <i class="oi oi-fw oi-filled" data-icon="settings"></i>
                 </span>
             </div>
             <div class="o_facet_values position-relative d-flex flex-wrap align-items-center rounded-end-2 text-wrap overflow-hidden">
@@ -16,7 +16,7 @@
                     <small class="o_facet_value text-truncate" t-out="value" t-att-title="value"/>
                 </span>
             </div>
-            <button class="o_facet_remove oi oi-close btn btn-link py-0 px-2 text-danger d-print-none" title="Remove" t-on-click.stop="this.props.clearFilter" />
+            <button class="o_facet_remove oi btn btn-link py-0 px-2 text-danger d-print-none" data-icon="close_small" title="Remove" t-on-click.stop="this.props.clearFilter" />
         </div>
     </t>
 </templates>
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_search_bar/dashboard_search_bar.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_search_bar/dashboard_search_bar.xml
index 6149311c6d06f3..8ca1cf9cf2646f 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_search_bar/dashboard_search_bar.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_search_bar/dashboard_search_bar.xml
@@ -18,7 +18,7 @@
                     <div
                         class="o_searchview form-control d-flex align-items-center py-1 border-end-0 gap-1">
                         <button class="btn border-0 p-0" t-on-click="this.onSearchClick">
-                            <i class="oi oi-search me-2"></i>
+                            <i class="oi me-2" data-icon="search"></i>
                         </button>
                         <div
                             class="o_searchview_input_container d-flex flex-grow-1 flex-wrap gap-1 mw-100">
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_search_bar_menu/dashboard_search_bar_menu.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_search_bar_menu/dashboard_search_bar_menu.xml
index a64e2741d34ba3..060a243d966a6a 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_search_bar_menu/dashboard_search_bar_menu.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_search_bar_menu/dashboard_search_bar_menu.xml
@@ -27,7 +27,7 @@
                     <button t-if="this.filterHasClearButton(item)"
                         class="btn btn-link px-2 text-danger fs-4"
                         t-on-click="() => this.clearFilter(item.globalFilter.id)">
-                        <i class="fa fa-times"></i>
+                        <i class="oi" data-icon="close"></i>
                     </button>
                 </div>
             </div>
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml
index e354c4595160f0..a9b00a7f0de70d 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/mobile_search_panel/mobile_search_panel.xml
@@ -6,7 +6,7 @@
                 <div class="o_spreadsheet_dashboard_search_panel o_search_panel o_searchview o_mobile_search">
                     <div class="o_mobile_search_header">
                         <button type="button" class="o_mobile_search_button btn w-100 d-flex justify-content-start align-items-center" t-on-click="() => this.state.isOpen = false">
-                            <i class="oi oi-arrow-left" />
+                            <i class="oi" data-icon="west"/>
                             <strong class="ml8">BACK</strong>
                         </button>
                     </div>
@@ -35,7 +35,7 @@
             </t>
         </t>
         <div t-elif="this.props.groups.length" t-on-click="this.openDashboardSelection" class="d-flex align-items-center">
-            <i class="oi oi-lg oi-panel-right fa-flip-horizontal"/>
+            <i class="oi oi-lg" data-icon="dock_to_right"/>
             <div t-out="this.searchBarText" class="o_search_panel_current_selection text-truncate ms-2 me-auto"/>
         </div>
     </div>
diff --git a/addons/spreadsheet_dashboard/static/tests/dashboard/dashboard_action.test.js b/addons/spreadsheet_dashboard/static/tests/dashboard/dashboard_action.test.js
index 32c29417778e66..aa4d5ba53967ea 100644
--- a/addons/spreadsheet_dashboard/static/tests/dashboard/dashboard_action.test.js
+++ b/addons/spreadsheet_dashboard/static/tests/dashboard/dashboard_action.test.js
@@ -255,7 +255,7 @@ test("share dashboard from dashboard view", async function () {
         },
     });
     expect(".spreadsheet_share_dropdown").toHaveCount(0);
-    await contains("i.fa-share-alt").click();
+    await contains("i[data-icon='share']").click();
     await animationFrame();
     expect(".spreadsheet_share_dropdown .o_loading_state").toHaveText("Generating sharing link");
     def.resolve();
@@ -263,7 +263,7 @@ test("share dashboard from dashboard view", async function () {
     expect(".spreadsheet_share_dropdown .o_loading_state").toHaveCount(0);
     expect.verifySteps(["dashboard_shared", "share url copied"]);
     expect(".o_field_CopyClipboardChar").toHaveText("localhost:8069/share/url/132465");
-    await contains(".fa-clipboard").click();
+    await contains("[data-icon='assignment']").click();
     expect.verifySteps(["share url copied"]);
 });
 
@@ -293,17 +293,17 @@ test("Changing filter values will create a new share", async function () {
             }
         },
     });
-    await contains("i.fa-share-alt").click();
+    await contains("i[data-icon='share']").click();
     await animationFrame();
     expect(".o_field_CopyClipboardChar").toHaveText(`localhost:8069/share/url/1`);
 
-    await contains("i.fa-share-alt").click(); // close share dropdown
+    await contains("i[data-icon='share']").click(); // close share dropdown
 
-    await contains("i.fa-share-alt").click();
+    await contains("i[data-icon='share']").click();
     await animationFrame();
     expect(".o_field_CopyClipboardChar").toHaveText(`localhost:8069/share/url/1`);
 
-    await contains("i.fa-share-alt").click();
+    await contains("i[data-icon='share']").click();
     const year = luxon.DateTime.local().year;
     expect(".o_control_panel_actions .o_facet_value").toHaveText(String(year));
     await contains(".o_searchview_facet_label").click();
@@ -311,7 +311,7 @@ test("Changing filter values will create a new share", async function () {
     await contains(".o-dropdown-item[data-id='year'] .btn-previous").click();
     await contains(".o-filter-values-footer .btn-primary").click();
 
-    await contains("i.fa-share-alt").click();
+    await contains("i[data-icon='share']").click();
     await animationFrame();
     expect(".o_field_CopyClipboardChar").toHaveText(`localhost:8069/share/url/2`);
 });
@@ -324,7 +324,7 @@ test("Should toggle favorite status of a dashboard when the 'Favorite' icon is c
     await createSpreadsheetDashboard();
     expect(".o_search_panel_section").toHaveCount(2);
     await contains(".o_dashboard_star").click();
-    expect(".o_dashboard_star").toHaveClass("fa-star", {
+    expect(".o_dashboard_star.oi-filled").toHaveAttribute("data-icon", "star", {
         message: "The star should be filled",
     });
     expect(".o_search_panel_section").toHaveCount(3);
@@ -333,7 +333,7 @@ test("Should toggle favorite status of a dashboard when the 'Favorite' icon is c
         "FAVORITES"
     );
     await contains(".o_dashboard_star").click();
-    expect(".o_dashboard_star").not.toHaveClass("fa-star", {
+    expect(".o_dashboard_star:not(.oi-filled)").not.toHaveAttribute("data-icon", "star", {
         message: "The star should not be filled",
     });
     expect.verifySteps(["action_toggle_favorite"]);
diff --git a/addons/spreadsheet_dashboard/views/spreadsheet_dashboard_views.xml b/addons/spreadsheet_dashboard/views/spreadsheet_dashboard_views.xml
index 4abc66968ae12f..6fda25cbe6699a 100644
--- a/addons/spreadsheet_dashboard/views/spreadsheet_dashboard_views.xml
+++ b/addons/spreadsheet_dashboard/views/spreadsheet_dashboard_views.xml
@@ -11,7 +11,7 @@
                 <field name="group_ids" widget="many2many_tags" required="1"/>
                 <field name="company_ids" options="{'no_create': True}" widget="many2many_tags" groups="base.group_multi_company" placeholder="Visible to all"/>
                 <field name="is_published" widget="boolean_toggle"/>
-                <button name="action_open_dashboard" type="object" string="View" icon="fa-eye"/>
+                <button name="action_open_dashboard" type="object" string="View" icon="visibility"/>
             </list>
         </field>
     </record>
diff --git a/addons/stock/models/stock_package.py b/addons/stock/models/stock_package.py
index b22fcc16693339..43c6aba1155187 100644
--- a/addons/stock/models/stock_package.py
+++ b/addons/stock/models/stock_package.py
@@ -131,7 +131,7 @@ def _compute_json_popover(self):
                 'title': self.env._("Multiple destinations"),
                 'msg': self.env._("This package is currently set to be sent in %(location_names_list)s.", location_names_list=location_names),
                 'color': 'text-warning',
-                'icon': 'fa-exclamation-triangle',
+                'icon': 'warning',
             })
 
     @api.depends('move_line_ids')
diff --git a/addons/stock/models/stock_quant.py b/addons/stock/models/stock_quant.py
index 836809d2123e9d..b482f991b18a2c 100644
--- a/addons/stock/models/stock_quant.py
+++ b/addons/stock/models/stock_quant.py
@@ -423,7 +423,7 @@ def action_view_inventory(self):
                     {}
                 </p>
                 <p>
-                    {} <span class="fa fa-cog"/>
+                    {} <span class="oi oi-filled" data-icon="settings"/>
                 </p>
                 """.format(escape(_('Your stock is currently empty')),
                            escape(_('Press the "New" button to define the quantity for a product in your stock or import quantities from a spreadsheet via the Actions menu'))),
diff --git a/addons/stock/report/report_stock_reception.xml b/addons/stock/report/report_stock_reception.xml
index 2d773bac1a352e..640d9a0a027eb5 100644
--- a/addons/stock/report/report_stock_reception.xml
+++ b/addons/stock/report/report_stock_reception.xml
@@ -66,7 +66,7 @@
                         <tr class="bg-light">
                             <th>
                                 <span t-field="source[0].display_name" t-options="{'widget': 'barcode', 'width': 200, 'height': 30}">Display Name</span>
-                                <i t-if="source[0].priority == '1'" class="o_priority o_priority_star fa fa-star"/>
+                                <i t-if="source[0].priority == '1'" class="o_priority o_priority_star oi oi-filled" data-icon="star"/>
                                 <a name="source_link" href="#" t-att-res-model="source[0]._name" view-type="form" t-att-res-id="source[0].id">
                                     <span t-out="source[0].display_name">DEMO_SOURCE_DISPLAY_NAME</span>
                                 </a>
diff --git a/addons/stock/report/report_stockpicking_operations.xml b/addons/stock/report/report_stockpicking_operations.xml
index 4d0a4087a51067..cc9d9561b7599c 100644
--- a/addons/stock/report/report_stockpicking_operations.xml
+++ b/addons/stock/report/report_stockpicking_operations.xml
@@ -270,7 +270,7 @@
                             </table>
 
                             <t t-set="no_reserved_product" t-value="o.move_ids.filtered(lambda x: x.product_uom_qty &gt; x.quantity and x.move_line_ids and x.state!='done')"/>
-                            <p t-if="o.state in ['draft', 'waiting', 'confirmed'] or no_reserved_product"><i class="fa fa-exclamation-triangle" />
+                            <p t-if="o.state in ['draft', 'waiting', 'confirmed'] or no_reserved_product"><i class="oi" data-icon="warning" />
                                 All products could not be reserved. Click on the "Check Availability" button to try to reserve products.
                             </p>
                             <p t-else=""/>
diff --git a/addons/stock/static/src/client_actions/stock_traceability_report_backend.xml b/addons/stock/static/src/client_actions/stock_traceability_report_backend.xml
index 3755da00d35fcb..d6d2c3942e97ac 100644
--- a/addons/stock/static/src/client_actions/stock_traceability_report_backend.xml
+++ b/addons/stock/static/src/client_actions/stock_traceability_report_backend.xml
@@ -51,12 +51,12 @@
                             <span t-attf-style="margin-left: {{line.level}}px"/>
                             <t t-if="hasUpDown and line.is_used ">
                                 <span role="img" title="Traceability Report" aria-label="Traceability Report" t-on-click.prevent="() => this.onClickUpDownStream(line)">
-                                    <i class="fa fa-fw fa-level-up fa-rotate-270"/>
+                                    <i class="oi oi-fw oi-rotate-270" data-icon="subdirectory_arrow_left"/>
                                 </span>
                             </t>
                             <t t-elif="line.unfoldable">
                                 <span class="o_stock_reports_unfoldable o_stock_reports_caret_icon" t-on-click="() => this.toggleLine(line)">
-                                    <i class="fa fa-fw" t-att-class="line.isFolded ? 'fa-caret-right' : 'fa-caret-down'" role="img" aria-label="Unfold" title="Unfold"/>
+                                    <i class="oi oi-fw" t-att-data-icon="line.isFolded ? 'arrow_right' : 'arrow_drop_down'" role="img" aria-label="Unfold" title="Unfold"/>
                                 </span>
                             </t>
                         </t>
diff --git a/addons/stock/static/src/components/reception_report_line/stock_reception_report_line.xml b/addons/stock/static/src/components/reception_report_line/stock_reception_report_line.xml
index 5e17b1273c3889..ca315899f6fb33 100644
--- a/addons/stock/static/src/components/reception_report_line/stock_reception_report_line.xml
+++ b/addons/stock/static/src/components/reception_report_line/stock_reception_report_line.xml
@@ -5,7 +5,7 @@
         <td t-out="this.data.product.display_name"/>
         <td>
             <t t-out="this.formatFloat(this.data.quantity)"/> <t t-if="this.props.showUom" t-out="this.data.uom"/>
-            <button class="btn btn-link fa fa-area-chart" t-on-click="this.onClickForecast" name="forecasted_report_link"/>
+            <button class="btn btn-link oi" data-icon="area_chart" t-on-click="this.onClickForecast" name="forecasted_report_link"/>
         </td>
         <td t-if="this.data.is_qty_assignable">
             <button t-if="!this.data.is_assigned"
diff --git a/addons/stock/static/src/components/reception_report_table/stock_reception_report_table.xml b/addons/stock/static/src/components/reception_report_table/stock_reception_report_table.xml
index e7d7e3ffbe8def..c4f1eed82bca9e 100644
--- a/addons/stock/static/src/components/reception_report_table/stock_reception_report_table.xml
+++ b/addons/stock/static/src/components/reception_report_table/stock_reception_report_table.xml
@@ -5,7 +5,7 @@
         <thead>
             <tr class="bg-light">
                 <th>
-                    <i t-if="this.props.source[0].priority == '1'" class="o_priority o_priority_star fa fa-star"/>
+                    <i t-if="this.props.source[0].priority == '1'" class="o_priority o_priority_star oi oi-filled" data-icon="star"/>
                     <a href="#" t-on-click.prevent="() => this.onClickLink(this.props.source[0].model, this.props.source[0].id, 'form')" t-out="this.props.source[0].name"/>
                     <span t-if="this.props.source.length > 1">
                         (<a href="#" t-on-click.prevent="() => this.onClickLink(this.props.source[1].model, this.props.source[1].id, 'form')" t-out="this.props.source[1].name"/>)
@@ -23,7 +23,7 @@
                 <th>
                     <button t-if="this.hasMovesIn" t-on-click="this.onClickPrintLabels" class="btn btn-sm btn-primary" t-att-disabled="this.isPrintLabelDisabled" name="print_labels">
                         <span class="d-none d-sm-block">Print Labels</span>
-                        <span class="d-block d-sm-none fa fa-print"/>
+                        <span class="d-block d-sm-none oi" data-icon="print"/>
                     </button>
                 </th>
             </tr>
diff --git a/addons/stock/static/src/fields/stock_picking_locked_statusbar_field.xml b/addons/stock/static/src/fields/stock_picking_locked_statusbar_field.xml
index 490393258d125c..4f323c48c89759 100644
--- a/addons/stock/static/src/fields/stock_picking_locked_statusbar_field.xml
+++ b/addons/stock/static/src/fields/stock_picking_locked_statusbar_field.xml
@@ -4,7 +4,11 @@
     <t t-name="stock.PickingLockedStatusBarField.ItemLabel">
         <span t-out="item.label"/>
         <t t-if="['done', 'cancel'].includes(item.value) and item.isSelected">
-            <i t-attf-class="fa fa-fw ms-1 #{this.isLocked ? 'fa-lock text-success' : 'fa-unlock text-warning'}"/>
+            <i
+                class="oi oi-fw ms-1"
+                t-att-class="this.isLocked ? 'text-success' : 'text-warning'"
+                t-att-data-icon="this.isLocked ? 'lock' : 'lock_open'"
+            />
         </t>
     </t>
 
diff --git a/addons/stock/static/src/scss/forecasted_details.scss b/addons/stock/static/src/scss/forecasted_details.scss
index 3db768d621594f..acb9aa4af6cc5e 100644
--- a/addons/stock/static/src/scss/forecasted_details.scss
+++ b/addons/stock/static/src/scss/forecasted_details.scss
@@ -1,10 +1,10 @@
 .o_stock_forecast {
   button[data-bs-toggle="collapse"] i::before {
-    content: "\f078"; /* fa-chevron-down */
+    content: "expand_more";
   }
 
   button[data-bs-toggle="collapse"].collapsed i::before {
-    content: "\f054"; /* fa-chevron-right */
+    content: "chevron_right";
   }
 
   thead.o_forecasted_details_main_header tr th {
diff --git a/addons/stock/static/src/scss/report_stock_reception.scss b/addons/stock/static/src/scss/report_stock_reception.scss
index 4de9ad9c33c662..324f2a9eebb334 100644
--- a/addons/stock/static/src/scss/report_stock_reception.scss
+++ b/addons/stock/static/src/scss/report_stock_reception.scss
@@ -3,7 +3,7 @@
     .o_priority {
         &.o_priority_star {
             font-size: 1.35em;
-            &.fa-star {
+            &[data-icon="star"].oi-filled {
                 color: gold;
             }
         }
diff --git a/addons/stock/static/src/scss/stock_forecasted.scss b/addons/stock/static/src/scss/stock_forecasted.scss
index c8310cbdca3e65..ab091a65b78999 100644
--- a/addons/stock/static/src/scss/stock_forecasted.scss
+++ b/addons/stock/static/src/scss/stock_forecasted.scss
@@ -6,21 +6,23 @@
         &.o_priority_star {
             background-color: transparent;
             font-size: 1.35em;
-            &.fa-star-o {
+
+            &[data-icon="star"] {
                 color: #a8a8a8;
+
                 &:hover {
+                    --o-mi-fill: 1;
+
                     color: gold;
-                    &:before{
-                        content: "\f005";
-                    }
                 }
-            }
-            &.fa-star {
-                color: gold;
-                &:hover {
-                    color: #a8a8a8;
-                    &:before{
-                        content: "\f006";
+
+                &.oi-filled {
+                    color: gold;
+
+                    &:hover {
+                        --o-mi-fill: 0;
+
+                        color: #a8a8a8;
                     }
                 }
             }
diff --git a/addons/stock/static/src/scss/stock_traceability_report.scss b/addons/stock/static/src/scss/stock_traceability_report.scss
index 99fd3cd23c5804..90b3a710da7465 100644
--- a/addons/stock/static/src/scss/stock_traceability_report.scss
+++ b/addons/stock/static/src/scss/stock_traceability_report.scss
@@ -61,7 +61,7 @@
         visibility: hidden;
     }
     div.o_stock_reports_web_action,
-    span.o_stock_reports_web_action, i.fa,
+    span.o_stock_reports_web_action, i.oi,
     span.o_stock_reports_unfoldable, span.o_stock_reports_foldable, a.o_stock_reports_web_action  {
         cursor: pointer;
     }
diff --git a/addons/stock/static/src/stock_forecasted/forecasted_details.xml b/addons/stock/static/src/stock_forecasted/forecasted_details.xml
index e850c2c9f4d3fd..a7bdfa4d8036a4 100644
--- a/addons/stock/static/src/stock_forecasted/forecasted_details.xml
+++ b/addons/stock/static/src/stock_forecasted/forecasted_details.xml
@@ -23,7 +23,7 @@
                                     data-bs-toggle="collapse"
                                     t-attf-data-bs-target=".collapseGroup_#{line.product.id}"
                                     aria-expanded="true" t-attf-aria-controls=".collapseGroup_#{line.product.id}">
-                                    <i class="icon fa"/>
+                                    <i class="icon oi"/>
                                 </button>
                             </td>
                             <td colspan="5" class="fw-bold text-uppercase border-0">
@@ -67,7 +67,9 @@
                         <td name="quantity_cell" class="text-end"><t t-attf-class="#{(!line.replenishment_filled and 'text-danger')" t-out="this._formatFloat(line.quantity)"/> <t t-out="line.uom_id.display_name"/></td>
                         <td class="border-end-0 o_forecasted_details_line_button" t-attf-class="#{(!line.replenishment_filled and 'table-danger') or (line.is_matched and 'table-info')}" name="usedby_cell">
                             <button t-if="line.move_out and line.move_out.picking_id"
-                                t-attf-class="o_priority o_priority_star me-1 fa fa-star#{line.move_out.picking_id.priority=='1' ? '' : '-o'}"
+                                class="o_priority o_priority_star oi me-1"
+                                t-att-class="{'oi-filled': line.move_out.picking_id.priority=='1'}"
+                                data-icon="star"
                                 t-on-click="() => this._onClickChangePriority('stock.picking', line.move_out.picking_id)"
                                 name="change_priority_link"/>
                             <a t-if="line.document_out"
diff --git a/addons/stock/static/src/stock_forecasted/forecasted_warehouse_filter.xml b/addons/stock/static/src/stock_forecasted/forecasted_warehouse_filter.xml
index 611a7228f0463a..863ffdab0f47cc 100644
--- a/addons/stock/static/src/stock_forecasted/forecasted_warehouse_filter.xml
+++ b/addons/stock/static/src/stock_forecasted/forecasted_warehouse_filter.xml
@@ -5,7 +5,7 @@
         <div t-if="this.displayWarehouseFilter" class="btn-group">
             <Dropdown items="this.warehousesItems">
                 <button class="btn btn-secondary">
-                    <span class="fa fa-home"/> Warehouse: <t t-out="this.activeWarehouse.name"/>
+                    <span class="oi" data-icon="home"/> Warehouse: <t t-out="this.activeWarehouse.name"/>
                 </button>
             </Dropdown>
         </div>
diff --git a/addons/stock/static/src/views/picking_form/stock_move_product_label.xml b/addons/stock/static/src/views/picking_form/stock_move_product_label.xml
index 5bddbb2f1ac59b..25ada4dd7d0eef 100644
--- a/addons/stock/static/src/views/picking_form/stock_move_product_label.xml
+++ b/addons/stock/static/src/views/picking_form/stock_move_product_label.xml
@@ -5,7 +5,8 @@
             <Many2One t-props="this.m2oProps" t-on-keydown="this.onM2oInputKeydown"/>
             <t t-if="this.showLabelVisibilityToggler">
                 <button
-                    class="o_input_box_overlay_end btn btn-link fa fa-bars"
+                    class="o_input_box_overlay_end btn btn-link oi"
+                    data-icon="menu"
                     id="labelVisibilityButtonId"
                     data-tooltip="Click or press enter to add a description"
                     t-on-click="() => this.switchLabelVisibility()"
diff --git a/addons/stock/static/src/views/search/stock_orderpoint_search_panel.xml b/addons/stock/static/src/views/search/stock_orderpoint_search_panel.xml
index 023c1bfd813a61..e7c802d7f60df6 100644
--- a/addons/stock/static/src/views/search/stock_orderpoint_search_panel.xml
+++ b/addons/stock/static/src/views/search/stock_orderpoint_search_panel.xml
@@ -5,7 +5,7 @@
         <xpath expr="//div[contains(@class, 'o_search_panel')]" position="inside">
             <section class="o_search_panel_section o_search_panel_filter">
                 <header class="o_search_panel_section_header pt-4 pb-2 text-uppercase cursor-default">
-                    <i t-attf-class="fa fa-clock-o o_search_panel_section_icon text-warning me-2" />
+                    <i class="oi o_search_panel_section_icon text-warning me-2" data-icon="schedule"/>
                     <b>Horizon</b>
                 </header>
 
diff --git a/addons/stock/static/src/views/search/stock_report_search_panel.xml b/addons/stock/static/src/views/search/stock_report_search_panel.xml
index 3487aaedbc1b1d..8a36aaf1c0d821 100644
--- a/addons/stock/static/src/views/search/stock_report_search_panel.xml
+++ b/addons/stock/static/src/views/search/stock_report_search_panel.xml
@@ -5,7 +5,7 @@
     <xpath expr="//div/section[1]" position="before">
         <section t-if="this.warehouses.length > 1" class="o_search_panel_section o_search_panel_warehouse">
             <header class="o_search_panel_section_header pt-4 pb-2 text-uppercase o_cursor_default">
-                <i t-attf-class="fa fa-filter o_search_panel_section_icon text-warning me-2"/>
+                <i t-attf-class="oi oi-filled o_search_panel_section_icon text-warning me-2" data-icon="filter_alt"/>
                 <b>Warehouses</b>
             </header>
             <ul class="list-group d-block o_search_panel_field">
diff --git a/addons/stock/static/src/widgets/popover_widget.js b/addons/stock/static/src/widgets/popover_widget.js
index 786d1aad5a7a78..08564351eaeaa8 100644
--- a/addons/stock/static/src/widgets/popover_widget.js
+++ b/addons/stock/static/src/widgets/popover_widget.js
@@ -16,7 +16,7 @@ export class PopoverComponent extends Component {
  * Widget Popover for JSON field (char), renders a popover above an icon button on click
  * {
  *  'msg': '<CONTENT OF THE POPOVER>' required if not 'popoverTemplate' is given,
- *  'icon': '<FONT AWESOME CLASS>' default='fa-info-circle',
+ *  'icon': '<MATERIAL SYMBOLS NAME>' default='info',
  *  'color': '<COLOR CLASS OF ICON>' default='text-primary',
  *  'position': <POSITION OF THE POPOVER> default='top',
  *  'popoverTemplate': '<TEMPLATE OF THE POPOVER>' default='stock.popoverContent'
@@ -35,7 +35,7 @@ export class PopoverWidgetField extends Component {
         const position = this.jsonValue.position || "top";
         this.popover = usePopover(this.constructor.components.Popover, { position });
         this.color = this.jsonValue.color || 'text-primary';
-        this.icon = this.jsonValue.icon || 'fa-info-circle';
+        this.icon = this.jsonValue.icon || 'info';
     }
 
     showPopup(ev){
diff --git a/addons/stock/static/src/widgets/popover_widget.xml b/addons/stock/static/src/widgets/popover_widget.xml
index c38960c510274e..86d2d72f933e2f 100644
--- a/addons/stock/static/src/widgets/popover_widget.xml
+++ b/addons/stock/static/src/widgets/popover_widget.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="stock.popoverButton">
-        <a tabindex="0" t-on-click.stop="this.showPopup" t-attf-class="p-1 fa #{ this.icon || 'fa-info-circle'} #{ this.color || 'text-primary'}"/>
+        <a tabindex="0" t-on-click.stop="this.showPopup" class="oi p-1" t-attf-class="#{ this.color || 'text-primary' }" t-attf-data-icon="#{ this.icon || 'info' }"/>
     </t>
 
     <div t-name="stock.popoverContent" class="m-3">
diff --git a/addons/stock/static/src/widgets/stock_rescheduling_popover.js b/addons/stock/static/src/widgets/stock_rescheduling_popover.js
index 19387e6e122f60..bd884292f64206 100644
--- a/addons/stock/static/src/widgets/stock_rescheduling_popover.js
+++ b/addons/stock/static/src/widgets/stock_rescheduling_popover.js
@@ -29,7 +29,7 @@ export class StockRescheculingPopover extends PopoverWidgetField {
     setup(){
         super.setup();
         this.color = this.jsonValue.color || 'text-danger';
-        this.icon = this.jsonValue.icon || 'fa-exclamation-triangle';
+        this.icon = this.jsonValue.icon || 'warning';
     }
 
     showPopup(ev){
diff --git a/addons/stock/static/tests/popover_widget.test.js b/addons/stock/static/tests/popover_widget.test.js
index a51b393797b97b..4cda4cb0627cd4 100644
--- a/addons/stock/static/tests/popover_widget.test.js
+++ b/addons/stock/static/tests/popover_widget.test.js
@@ -28,8 +28,8 @@ test("Test creation/usage form popover widget", async () => {
         resId: 1,
     });
     expect(".popover").toHaveCount(0);
-    expect(".fa-info-circle.text-danger").toHaveCount(1);
-    await contains(".fa-info-circle.text-danger").click();
+    expect("[data-icon='info'].text-danger").toHaveCount(1);
+    await contains("[data-icon='info'].text-danger").click();
     expect(".popover").toHaveCount(1);
     expect(".popover").toHaveText("JS Master\nvar that = self // why not?");
 });
diff --git a/addons/stock/views/product_views.xml b/addons/stock/views/product_views.xml
index 48deddf57775c4..e70b64459f0295 100644
--- a/addons/stock/views/product_views.xml
+++ b/addons/stock/views/product_views.xml
@@ -10,7 +10,7 @@
                 <div name="button_box" position="inside">
                     <button string="Putaway Rules"
                         class="oe_stat_button"
-                        icon="fa-random" name="%(category_open_putaway)d" type="action"
+                        icon="shuffle" name="%(category_open_putaway)d" type="action"
                         groups="stock.group_stock_multi_locations"/>
                 </div>
                 <group name="first" position="after">
@@ -216,7 +216,7 @@
                         <label for="route_ids" invisible="not has_available_route_ids"/>
                         <div invisible="not has_available_route_ids">
                             <field name="route_ids" class="mb-0" widget="many2many_checkboxes"/>
-                            <button id="stock.view_diagram_button" string="View Diagram" type="action" name="%(action_open_routes)d" icon="oi-arrow-right"
+                            <button id="stock.view_diagram_button" string="View Diagram" type="action" name="%(action_open_routes)d" icon="east"
                                 class="btn btn-link pt-0" context="{'default_product_tmpl_id': id}"/>
                         </div>
                         <field name="route_from_categ_ids" widget="many2many_tags" invisible="not route_from_categ_ids"/>
@@ -330,7 +330,7 @@
                                 name="action_product_forecast_report"
                                 invisible="not show_forecasted_qty_status_button"
                                 context="{'default_product_id': id, 'active_model': 'product.template'}"
-                                class="oe_stat_button" icon="fa-area-chart">
+                                class="oe_stat_button" icon="area_chart">
                                 <div class="d-flex flex-row gap-1 ms-1">
                                     <div class="o_field_widget o_stat_info flex-column align-items-end gap-1">
                                         <span class="o_stat_value">
@@ -360,7 +360,7 @@
                             <button type="object"
                                 name= "action_view_stock_move_lines"
                                 invisible="type != 'consu'"
-                                class="oe_stat_button" icon="fa-exchange"
+                                class="oe_stat_button" icon="swap_horiz"
                                 groups="stock.group_stock_user">
                                 <div class="d-flex flex-column">
                                     <div class="o_field_widget o_stat_info align-items-baseline flex-row gap-1 me-1">
@@ -375,7 +375,7 @@
                             </button>
                             <button name="action_view_orderpoints" type="object"
                                 invisible="type != 'consu' or nbr_reordering_rules != 1"
-                                class="oe_stat_button" icon="fa-refresh">
+                                class="oe_stat_button" icon="refresh">
                                 <div class="d-flex flex-column">
                                     <div class="o_field_widget o_stat_info align-items-baseline flex-row gap-1 me-1">
                                         <span class="o_stat_text">Min:</span>
@@ -390,20 +390,20 @@
                             <button type="object"
                                 name="action_view_orderpoints"
                                 invisible="not is_storable or nbr_reordering_rules == 1"
-                                class="oe_stat_button" icon="fa-refresh">
+                                class="oe_stat_button" icon="refresh">
                                 <field name="nbr_reordering_rules" widget="statinfo"/>
                             </button>
                             <button type="object"
                                 name="action_open_product_lot"
                                 invisible="tracking not in ['lot', 'serial']"
-                                class="oe_stat_button" icon="fa-bars" groups="stock.group_production_lot">
+                                class="oe_stat_button" icon="menu" groups="stock.group_production_lot">
                                 <div class="o_stat_info">
                                     <span class="o_stat_text">Lot/Serial Numbers</span>
                                 </div>
                             </button>
                             <button type="object"
                                 name="action_view_related_putaway_rules"
-                                class="oe_stat_button" icon="fa-random" groups="stock.group_stock_multi_locations"
+                                class="oe_stat_button" icon="shuffle" groups="stock.group_stock_multi_locations"
                                 invisible="type == 'service'"
                                 context="{
                                     'invisible_handle': True,
@@ -418,7 +418,7 @@
                                 groups="stock.group_stock_multi_locations"
                                 invisible="type == 'service'"
                                 class="oe_stat_button"
-                                icon="fa-cubes"/>
+                                icon="inventory_2"/>
                         </t>
                     </div>
                     <xpath expr="//button[@name='%(action_open_routes)d']" position="attributes">
@@ -447,7 +447,7 @@
                                 name="action_product_tmpl_forecast_report"
                                 invisible="not show_forecasted_qty_status_button"
                                 context="{'default_product_tmpl_id': id}"
-                                class="oe_stat_button" icon="fa-area-chart">
+                                class="oe_stat_button" icon="area_chart">
                                 <div class="d-flex flex-row gap-1 ms-1">
                                     <div class="o_field_widget o_stat_info flex-column align-items-end gap-1">
                                         <span class="o_stat_value">
@@ -481,7 +481,7 @@
                             <button type="object"
                                 name="action_view_orderpoints"
                                 invisible="not is_storable or nbr_reordering_rules != 1"
-                                class="oe_stat_button" icon="fa-refresh">
+                                class="oe_stat_button" icon="refresh">
                                 <div class="d-flex flex-column">
                                     <div class="o_field_widget o_stat_info align-items-baseline flex-row gap-1 me-1">
                                         <span class="o_stat_text">Min:</span>
@@ -497,13 +497,13 @@
                                 name="action_view_orderpoints"
                                 invisible="not is_storable or nbr_reordering_rules == 1"
                                 class="oe_stat_button"
-                                icon="fa-refresh">
+                                icon="refresh">
                                 <field name="nbr_reordering_rules" widget="statinfo"/>
                             </button>
                             <button type="object"
                                 name= "action_view_stock_move_lines"
                                 invisible="type != 'consu'"
-                                class="oe_stat_button" icon="fa-exchange"
+                                class="oe_stat_button" icon="swap_horiz"
                                 groups="stock.group_stock_user">
                                 <div class="d-flex flex-column">
                                     <div class="o_field_widget o_stat_info align-items-baseline flex-row gap-1 me-1">
@@ -519,14 +519,14 @@
                             <button type="object"
                                 name="action_open_product_lot"
                                 invisible="tracking not in ['lot', 'serial']"
-                                class="oe_stat_button" icon="fa-bars" groups="stock.group_production_lot">
+                                class="oe_stat_button" icon="menu" groups="stock.group_production_lot">
                                 <div class="o_stat_info">
                                     <span class="o_stat_text">Lot/Serial Numbers</span>
                                 </div>
                             </button>
                             <button type="object"
                                 name="action_view_related_putaway_rules"
-                                class="oe_stat_button" icon="fa-random" groups="stock.group_stock_multi_locations"
+                                class="oe_stat_button" icon="shuffle" groups="stock.group_stock_multi_locations"
                                 invisible="type == 'service'"
                                 context="{
                                     'invisible_handle': True,
@@ -541,7 +541,7 @@
                                 groups="stock.group_stock_multi_locations"
                                 invisible="type == 'service'"
                                 class="oe_stat_button"
-                                icon="fa-cubes">
+                                icon="inventory_2">
                                 <div class="o_stat_info">
                                     <span class="o_stat_text">Storage Capacities</span>
                                 </div>
@@ -588,13 +588,13 @@
                     <field name="virtual_available" string="Forecasted" optional="hide" sum="Total Forecasted"/>
                     <field name="uom_id" widget="many2one_uom" groups="uom.group_uom" options="{'no_create': True}"/>
                     <button name="%(stock_move_line_action)d" string="History" type="action" class="btn-link"
-                        icon="fa-history" context="{'search_default_product_id': id, 'default_product_id': id}"/>
+                        icon="history" context="{'search_default_product_id': id, 'default_product_id': id}"/>
                     <button name="action_view_orderpoints" string="Replenishment" type="object" class="btn-link"
-                        icon="fa-refresh" context="{'search_default_product_id': id, 'is_stock_report': True}" />
+                        icon="refresh" context="{'search_default_product_id': id, 'is_stock_report': True}" />
                     <button name="%(action_view_quants)d" string="Locations" type="action" class="btn-link" groups="stock.group_stock_multi_locations"
-                        icon="fa-cubes" context="{'search_default_product_id': id, 'default_product_id': id}" invisible="qty_available == 0"/>
+                        icon="inventory_2" context="{'search_default_product_id': id, 'default_product_id': id}" invisible="qty_available == 0"/>
                     <button name="action_product_forecast_report" string="Forecast" type="object" class="btn-link"
-                        icon="fa-area-chart" context="{'default_product_id': id}" invisible="incoming_qty == 0 and outgoing_qty == 0"/>
+                        icon="area_chart" context="{'default_product_id': id}" invisible="incoming_qty == 0 and outgoing_qty == 0"/>
                 </list>
             </field>
         </record>
@@ -614,7 +614,7 @@
                 </filter>
                 <filter name="real_stock_negative" position="after">
                     <searchpanel>
-                        <field name="categ_id" icon="fa-filter" string="Category" enable_counters="1"/>
+                        <field name="categ_id" icon="filter_alt" icon_class="oi-filled" string="Category" enable_counters="1"/>
                     </searchpanel>
                 </filter>
             </field>
diff --git a/addons/stock/views/res_config_settings_views.xml b/addons/stock/views/res_config_settings_views.xml
index c2c979cfd9953a..3cbd95b9e82509 100644
--- a/addons/stock/views/res_config_settings_views.xml
+++ b/addons/stock/views/res_config_settings_views.xml
@@ -139,7 +139,7 @@
                                 <field name="group_product_variant"/>
                                 <div class="content-group">
                                     <div class="mt8" invisible="not group_product_variant">
-                                        <button name="%(product.attribute_action)d" icon="oi-arrow-right" type="action" string="Attributes" class="btn-link"/>
+                                        <button name="%(product.attribute_action)d" icon="east" type="action" string="Attributes" class="btn-link"/>
                                     </div>
                                 </div>
                             </setting>
@@ -147,7 +147,7 @@
                                 <field name="group_uom"/>
                                 <div class="content-group">
                                     <div class="mt8" invisible="not group_uom">
-                                        <button name="%(uom.product_uom_form_action)d" icon="oi-arrow-right" type="action" string="Units &amp; Packagings" class="btn-link"/>
+                                        <button name="%(uom.product_uom_form_action)d" icon="east" type="action" string="Units &amp; Packagings" class="btn-link"/>
                                     </div>
                                 </div>
                             </setting>
@@ -189,7 +189,7 @@
                                 <field name="group_stock_multi_locations"/>
                                 <div class="content-group">
                                     <div class="mt8" invisible="not group_stock_multi_locations">
-                                        <button name="%(stock.action_location_form)d" icon="oi-arrow-right" type="action" string="Locations" class="btn-link"/><br/>
+                                        <button name="%(stock.action_location_form)d" icon="east" type="action" string="Locations" class="btn-link"/><br/>
                                     </div>
                                 </div>
                             </setting>
@@ -197,7 +197,7 @@
                                 <field name="group_stock_adv_location"/>
                                 <div class="content-group">
                                     <div class="mt8" invisible="not group_stock_adv_location">
-                                        <button name="%(stock.action_warehouse_form)d" icon="oi-arrow-right" type="action" string="Set Warehouse Routes" class="btn-link"/>
+                                        <button name="%(stock.action_warehouse_form)d" icon="east" type="action" string="Set Warehouse Routes" class="btn-link"/>
                                     </div>
                                 </div>
                             </setting>
diff --git a/addons/stock/views/res_partner_views.xml b/addons/stock/views/res_partner_views.xml
index 6964320f75d8c0..4251805258ed11 100644
--- a/addons/stock/views/res_partner_views.xml
+++ b/addons/stock/views/res_partner_views.xml
@@ -37,7 +37,7 @@
                 <button type="object"
                     name="action_view_stock_serial"
                     context="{'create': False}"
-                    class="oe_stat_button" icon="fa-bars" groups="stock.group_production_lot">
+                    class="oe_stat_button" icon="menu" groups="stock.group_production_lot">
                     <div class="o_stat_info">
                         <span class="o_stat_text">Lots/Serial Numbers</span>
                     </div>
diff --git a/addons/stock/views/stock_location_views.xml b/addons/stock/views/stock_location_views.xml
index 8cb2849b7a384c..26c055d1f55191 100644
--- a/addons/stock/views/stock_location_views.xml
+++ b/addons/stock/views/stock_location_views.xml
@@ -18,10 +18,10 @@
                     <div class="oe_button_box" name="button_box">
                         <button string="Putaway Rules"
                                 class="oe_stat_button"
-                                icon="fa-random" name="%(location_open_putaway)d" type="action"
+                                icon="shuffle" name="%(location_open_putaway)d" type="action"
                                 groups="stock.group_stock_multi_locations" context="{'default_company_id': company_id}"/>
                         <button string="Products"
-                                class="oe_stat_button" icon="fa-th-list"
+                                class="oe_stat_button" icon="view_list"
                                 type="action" name="stock.act_product_location_open"/>
                     </div>
                     <widget name="web_ribbon" title="Archived" bg_color="text-bg-danger" invisible="active"/>
diff --git a/addons/stock/views/stock_lot_views.xml b/addons/stock/views/stock_lot_views.xml
index 40502777be3eb0..fb7d87bc2abd7c 100644
--- a/addons/stock/views/stock_lot_views.xml
+++ b/addons/stock/views/stock_lot_views.xml
@@ -12,21 +12,21 @@
                 <div class="oe_button_box" name="button_box"
                      invisible="not display_complete">
                         <button class="oe_stat_button" name="action_lot_open_transfers"
-                                type="object" icon="fa-truck" help="Transfers"
+                                type="object" icon="local_shipping" help="Transfers"
                                 invisible="delivery_count == 0">
                             <field name="delivery_count" widget="statinfo" string="Transfers"/>
                         </button>
-                        <button name="action_lot_open_quants" groups="stock.group_stock_multi_locations" icon="fa-arrows" class="oe_stat_button" type="object">
+                        <button name="action_lot_open_quants" groups="stock.group_stock_multi_locations" icon="open_with" class="oe_stat_button" type="object">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Location</span>
                             </div>
                         </button>
-                        <button name="%(action_stock_report)d" icon="oi-arrow-up" class="oe_stat_button" type="action">
+                        <button name="%(action_stock_report)d" icon="north_west" class="oe_stat_button" type="action">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Traceability</span>
                             </div>
                         </button>
-                        <button name="action_open_scrap_moves" class="oe_stat_button" type="object" invisible="not is_scrap" icon="fa-trash">
+                        <button name="action_open_scrap_moves" class="oe_stat_button" type="object" invisible="not is_scrap" icon="delete" icon_class="oi-filled">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Scraps</span>
                             </div>
diff --git a/addons/stock/views/stock_move_views.xml b/addons/stock/views/stock_move_views.xml
index 9a8e829267254d..4ca43cf85f79c3 100644
--- a/addons/stock/views/stock_move_views.xml
+++ b/addons/stock/views/stock_move_views.xml
@@ -101,7 +101,7 @@
                             <field name="product_id" readonly="state == 'done'" class="fw-bold fs-5"/>
                             <a name="action_show_details"
                                 title="Show details"
-                                class="o_icon_button fa fa-list" type="object"
+                                class="o_icon_button oi" data-icon="format_list_bulleted" type="object"
                                 invisible="not show_details_visible"/>
                             <div invisible="not is_inventory">
                                 <span>Initial Demand <field name="product_uom_qty" readonly="state == 'done'"/></span><br/>
diff --git a/addons/stock/views/stock_orderpoint_views.xml b/addons/stock/views/stock_orderpoint_views.xml
index 1577458ab74b48..34ce47a3a7223a 100644
--- a/addons/stock/views/stock_orderpoint_views.xml
+++ b/addons/stock/views/stock_orderpoint_views.xml
@@ -38,11 +38,11 @@
                 <field name="warehouse_id" options="{'no_create': True}" groups="stock.group_stock_multi_warehouses" optional="hide"/>
                 <field name="qty_on_hand" force_save="1"/>
                 <field name="qty_forecast" force_save="1"/>
-                <button name="action_product_forecast_report" type="object" icon="fa-area-chart" title="Forecast Report" invisible="not id or unwanted_replenish"/>
-                <button name="action_product_forecast_report" type="object" icon="fa-warning text-warning" title="Due to receipts scheduled in the future, you might end up with excessive stock . Check the Forecasted Report  before reordering" invisible="not id or not unwanted_replenish"/>
+                <button name="action_product_forecast_report" type="object" icon="area_chart" title="Forecast Report" invisible="not id or unwanted_replenish"/>
+                <button name="action_product_forecast_report" type="object" icon="warning" icon_class="text-warning" title="Due to receipts scheduled in the future, you might end up with excessive stock . Check the Forecasted Report  before reordering" invisible="not id or not unwanted_replenish"/>
                 <field name="route_id" widget="stock.forced_placeholder" options="{'no_create': True, 'no_open': True, 'placeholder_field': 'route_id_placeholder'}" optional="hidden" decoration-muted="not route_id"/>
-                <button name="action_stock_replenishment_info" type="object" icon="fa-info-circle" title="Replenishment Information" invisible="not id or show_supply_warning"/>
-                <button name="action_stock_replenishment_info" type="object" icon="fa-warning text-warning" title="Your product is missing a way to be replenished (Route, Vendor, Bill of Materials)." invisible="not id or not show_supply_warning"/>
+                <button name="action_stock_replenishment_info" type="object" icon="info" title="Replenishment Information" invisible="not id or show_supply_warning"/>
+                <button name="action_stock_replenishment_info" type="object" icon="warning" icon_class="text-warning" title="Your product is missing a way to be replenished (Route, Vendor, Bill of Materials)." invisible="not id or not show_supply_warning"/>
                 <field name="trigger" optional="hide"/>
                 <field name="product_min_qty" string="Min" optional="show"/>
                 <field name="product_max_qty" string="Max" optional="show"/>
@@ -50,16 +50,16 @@
                 <field name="qty_to_order_to_max" column_invisible="true"/>
                 <field name="qty_to_order" widget="stock.max_qty_to_order" readonly="trigger == 'auto'"/>
                 <field name="qty_to_order_manual" column_invisible="True"/>
-                <button name="action_remove_manual_qty_to_order" type="object" icon="fa-undo" title="Remove manually entered value and replace by the quantity to order based on the forecasted quantities" invisible="not qty_to_order_manual"/>
-                <button name="action_remove_manual_qty_to_order" type="object" icon="fa-undo" title="-" class="disabled opacity-0" invisible="qty_to_order_manual"/>
+                <button name="action_remove_manual_qty_to_order" type="object" icon="undo" title="Remove manually entered value and replace by the quantity to order based on the forecasted quantities" invisible="not qty_to_order_manual"/>
+                <button name="action_remove_manual_qty_to_order" type="object" icon="undo" title="-" class="disabled opacity-0" invisible="qty_to_order_manual"/>
                 <field name="product_uom_name" string="Unit" groups="uom.group_uom"/>
                 <field name="deadline_date" string="Deadline" optional="hide" decoration-danger="deadline_date &lt; current_date"/>
                 <field name="company_id" optional="hide" readonly="1" groups="base.group_multi_company"/>
-                <button name="action_replenish" string="Order" type="object" class="o_replenish_buttons" icon="fa-truck"
+                <button name="action_replenish" string="Order" type="object" class="o_replenish_buttons" icon="local_shipping"
                     invisible="qty_to_order &lt;= 0.0"/>
-                <button name="action_replenish_auto" string="Automate" type="object" class="o_replenish_buttons" icon="fa-refresh"
+                <button name="action_replenish_auto" string="Automate" type="object" class="o_replenish_buttons" icon="refresh"
                     invisible="qty_to_order &lt;= 0.0 or trigger == 'auto'"/>
-                <button name="%(action_orderpoint_snooze)d" string="Snooze" type="action" class="text-warning" icon="fa-bell-slash"
+                <button name="%(action_orderpoint_snooze)d" string="Snooze" type="action" class="text-warning" icon="notifications_off" icon_class="oi-filled"
                     invisible="trigger != 'manual'" context="{'default_orderpoint_ids': [id]}"/>
             </list>
         </field>
@@ -92,7 +92,7 @@
                 <searchpanel>
                     <field name="location_id" string="Locations" groups="stock.group_stock_multi_locations" enable_counters="1"/>
                     <field name="trigger" string="Trigger" enable_counters="1"/>
-                    <field name="product_category_id" icon="fa-filter" string="Category" select="multi" enable_counters="1"/>
+                    <field name="product_category_id" icon="filter_alt" icon_class="oi-filled" string="Category" select="multi" enable_counters="1"/>
                 </searchpanel>
             </search>
         </field>
@@ -141,7 +141,7 @@
                             <div class="o_input_box">
                                 <field name="product_min_qty"/>
                                 <field name="product_uom_name" class="o_input_box_overlay_end o_input_box_overlay_inline"/>
-                                <button name="stock.action_stock_replenishment_info" class="o_input_box_overlay_end o_input_box_overlay_inline" string="Forecast Description" type="action" icon="fa-area-chart" invisible="not id"/>
+                                <button name="stock.action_stock_replenishment_info" class="o_input_box_overlay_end o_input_box_overlay_inline" string="Forecast Description" type="action" icon="area_chart" invisible="not id"/>
                             </div>
                             <label for="product_max_qty"/>
                             <div class="o_input_box">
diff --git a/addons/stock/views/stock_package_views.xml b/addons/stock/views/stock_package_views.xml
index ec2b29bee46b69..48d5f5af37bd02 100644
--- a/addons/stock/views/stock_package_views.xml
+++ b/addons/stock/views/stock_package_views.xml
@@ -32,7 +32,7 @@
                     <div class="oe_button_box" name="button_box">
                         <button class="oe_stat_button" name="action_view_picking"
                         string="Package Transfers" type="object"
-                        widget="statinfo" icon="oi-arrows-v"/>
+                        widget="statinfo" icon="height"/>
                     </div>
                     <div class="oe_title">
                         <label for="name" string="Package Reference"/>
diff --git a/addons/stock/views/stock_picking_type_views.xml b/addons/stock/views/stock_picking_type_views.xml
index 22ead8351996f2..f59fc03dde8393 100644
--- a/addons/stock/views/stock_picking_type_views.xml
+++ b/addons/stock/views/stock_picking_type_views.xml
@@ -138,7 +138,7 @@
                                         Odoo opens a PDF preview by default. If you (Enterprise users only) want to print instantly,
                                         install the IoT App on a computer that is on the same local network as the
                                         barcode operator and configure the routing of the reports.
-                                        <widget name="documentation_link" path="/applications/productivity/iot/devices/printer.html" label=" Documentation" icon="fa-arrow-right"/>
+                                        <widget name="documentation_link" path="/applications/productivity/iot/devices/printer.html" label=" Documentation" icon="arrow_forward"/>
                                     </div>
                                     <field name="auto_print_delivery_slip" string="Delivery Slip"/>
                                     <field name="auto_print_return_slip" string="Return Slip"/>
diff --git a/addons/stock/views/stock_picking_views.xml b/addons/stock/views/stock_picking_views.xml
index 31277db78198b4..1cc9af6a38e84c 100644
--- a/addons/stock/views/stock_picking_views.xml
+++ b/addons/stock/views/stock_picking_views.xml
@@ -139,35 +139,35 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button name="action_see_returns" type="object"
-                            class="oe_stat_button" icon="fa-rotate-left"
+                            class="oe_stat_button" icon="undo"
                             invisible="return_count == 0">
                             <field string="Returns" name="return_count" widget="statinfo"/>
                         </button>
                         <button name="action_see_move_scrap" string="Scraps" type="object"
-                            class="oe_stat_button" icon="oi-arrows-v"
+                            class="oe_stat_button" icon="height"
                             invisible="not has_scrap_move"/>
                         <button name="action_see_packages" string="Packages" type="object"
-                            class="oe_stat_button" icon="fa-cubes"
+                            class="oe_stat_button" icon="inventory_2"
                             invisible="state == 'done' or not packages_count" groups="stock.group_tracking_lot">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Packages</span>
                             </div>
                         </button>
                         <button name="action_see_package_histories" string="Packages" type="object"
-                            class="oe_stat_button" icon="fa-cubes"
+                            class="oe_stat_button" icon="inventory_2"
                             invisible="state != 'done' or not packages_count" groups="stock.group_tracking_lot">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Packages</span>
                             </div>
                         </button>
-                        <button name="%(action_stock_report)d" icon="oi-arrow-up" class="oe_stat_button" type="action" invisible="state != 'done' or not has_tracking" groups="stock.group_production_lot">
+                        <button name="%(action_stock_report)d" icon="north" class="oe_stat_button" type="action" invisible="state != 'done' or not has_tracking" groups="stock.group_production_lot">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Traceability</span>
                             </div>
                         </button>
                         <button name="action_view_reception_report" type="object"
                             context="{'default_picking_ids': [id]}"
-                            class="oe_stat_button" icon="fa-list"
+                            class="oe_stat_button" icon="format_list_bulleted"
                             invisible="not show_allocation"
                             groups="stock.group_reception_report">
                             <div class="o_stat_info">
@@ -177,7 +177,7 @@
                         <!-- Use the following button to avoid onchange on one2many -->
                         <button name="action_picking_move_tree"
                             class="oe_stat_button"
-                            icon="oi-arrows-v"
+                            icon="height"
                             type="object"
                             help="List view of operations"
                             groups="base.group_no_one"
@@ -189,7 +189,7 @@
                         </button>
                         <button name="action_detailed_operations"
                             class="oe_stat_button"
-                            icon="fa-bars"
+                            icon="menu"
                             type="object"
                             help="List view of detailed operations">
                             <div class="o_form_field o_stat_info">
@@ -198,7 +198,7 @@
                         </button>
                         <button name="action_next_transfer"
                             class="oe_stat_button"
-                            icon="fa-exchange"
+                            icon="swap_horiz"
                             type="object"
                             help="List view of next transfers"
                             invisible="not show_next_pickings">
diff --git a/addons/stock/views/stock_quant_views.xml b/addons/stock/views/stock_quant_views.xml
index ccede868124761..03db330264d98e 100644
--- a/addons/stock/views/stock_quant_views.xml
+++ b/addons/stock/views/stock_quant_views.xml
@@ -144,8 +144,8 @@
                 <field name="available_quantity" optional="hide" sum="Total Available"/>
                 <field name="uom_id" groups="uom.group_uom" widget="many2one_uom"/>
                 <field name="lot_properties" optional="hide"/>
-                <button name="action_view_stock_moves" string="History" type="object" class="btn-link" icon="fa-history"/>
-                <button name="action_view_orderpoints" string="Replenishment" type="object" context="{'default_product_id': product_id, 'search_default_location_id': location_id}" class="btn-link" icon="fa-refresh"/>
+                <button name="action_view_stock_moves" string="History" type="object" class="btn-link" icon="history"/>
+                <button name="action_view_orderpoints" string="Replenishment" type="object" context="{'default_product_id': product_id, 'search_default_location_id': location_id}" class="btn-link" icon="refresh"/>
             </list>
         </field>
     </record>
@@ -315,9 +315,9 @@ in this location. That leads to a negative stock.
                 <field name="uom_id" groups="uom.group_uom"/>
                 <field name='company_id' groups="base.group_multi_company" optional="hide"/>
                 <field name="lot_properties" optional="hide"/>
-                <button name="action_inventory_history" type="object" class="btn btn-link text-info" icon="fa-history" string="History"/>
-                <button name="action_apply_inventory" type="object" string="Apply" class="btn btn-link" icon="fa-save" invisible="not inventory_quantity_set"/>
-                <button name="action_clear_inventory_quantity" type="object" string="Clear" class="btn text-warning" icon="fa-times" invisible="not inventory_quantity_set"/>
+                <button name="action_inventory_history" type="object" class="btn btn-link text-info" icon="history" string="History"/>
+                <button name="action_apply_inventory" type="object" string="Apply" class="btn btn-link" icon="save" invisible="not inventory_quantity_set"/>
+                <button name="action_clear_inventory_quantity" type="object" string="Clear" class="btn text-warning" icon="close" invisible="not inventory_quantity_set"/>
             </list>
         </field>
     </record>
diff --git a/addons/stock/views/stock_storage_category_views.xml b/addons/stock/views/stock_storage_category_views.xml
index a933fdf095257d..4de19383a6e765 100644
--- a/addons/stock/views/stock_storage_category_views.xml
+++ b/addons/stock/views/stock_storage_category_views.xml
@@ -8,7 +8,7 @@
                 <field name="company_id" invisible="1"/>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button name="%(action_storage_category_locations)d" string="Locations" type="action" class="oe_stat_button" icon="oi-arrows-v"/>
+                        <button name="%(action_storage_category_locations)d" string="Locations" type="action" class="oe_stat_button" icon="height"/>
                     </div>
                     <group>
                         <group>
diff --git a/addons/stock/views/stock_warehouse_views.xml b/addons/stock/views/stock_warehouse_views.xml
index 3523e4dc969ee7..cd45e639733bb9 100644
--- a/addons/stock/views/stock_warehouse_views.xml
+++ b/addons/stock/views/stock_warehouse_views.xml
@@ -10,7 +10,7 @@
                         <div class="oe_button_box" name="button_box">
                             <button name="action_view_all_routes"
                                     string="Routes"
-                                    icon="fa-refresh"
+                                    icon="refresh"
                                     class="oe_stat_button"
                                     type="object">
                                     <div class="o_stat_info">
@@ -19,7 +19,7 @@
                             </button>
                             <button name="action_open_internal_locations"
                                     string="Locations"
-                                    icon="fa-th"
+                                    icon="grid_view"
                                     class="oe_stat_button"
                                     type="object"
                                     groups="stock.group_stock_multi_locations">
diff --git a/addons/stock_account/static/src/stock_valuation/filters/filter_date.xml b/addons/stock_account/static/src/stock_valuation/filters/filter_date.xml
index 2fe6e6be2091bc..187bc9d3ba8032 100644
--- a/addons/stock_account/static/src/stock_valuation/filters/filter_date.xml
+++ b/addons/stock_account/static/src/stock_valuation/filters/filter_date.xml
@@ -3,7 +3,7 @@
     <t t-name="stock_account.StockValuationReport.FilterDate">
         <div id="filter_date" t-custom-ref="filterDate" class="d-print-none" t-on-click="this.onDateClick">
             <button class="btn btn-secondary">
-                <i class="fa fa-calendar me-1"/>As of <t t-out="this.date"/>
+                <i class="oi oi-filled me-1" data-icon="calendar_today"/>As of <t t-out="this.date"/>
             </button>
         </div>
         <div class="d-none d-print-block">
diff --git a/addons/stock_account/static/src/stock_valuation/filters/filter_options.xml b/addons/stock_account/static/src/stock_valuation/filters/filter_options.xml
index 298c40fdb2ced0..08ea5f358dca68 100644
--- a/addons/stock_account/static/src/stock_valuation/filters/filter_options.xml
+++ b/addons/stock_account/static/src/stock_valuation/filters/filter_options.xml
@@ -3,7 +3,7 @@
     <t t-name="stock_account.StockValuationReport.FilterOptions">
         <Dropdown>
             <button class="btn btn-secondary" disabled="true">
-                <i class="fa fa-sliders me-1"/>Options
+                <i class="oi me-1" data-icon="tune"/>Options
             </button>
 
             <!-- <t t-set-slot="content">
diff --git a/addons/stock_account/static/src/stock_valuation/filters/filter_warehouses.xml b/addons/stock_account/static/src/stock_valuation/filters/filter_warehouses.xml
index e42181759182af..ef86888ba56270 100644
--- a/addons/stock_account/static/src/stock_valuation/filters/filter_warehouses.xml
+++ b/addons/stock_account/static/src/stock_valuation/filters/filter_warehouses.xml
@@ -3,7 +3,7 @@
     <t t-name="stock_account.StockValuationReport.FilterWarehouses">
         <Dropdown>
             <button class="btn btn-secondary" disabled="true">
-                <i class="fa fa-filter me-1"/>All Warehouses
+                <i class="oi oi-filled me-1" data-icon="filter_alt"/>All Warehouses
             </button>
 
             <!-- <t t-set-slot="content">
diff --git a/addons/stock_account/static/src/stock_valuation/line/line.xml b/addons/stock_account/static/src/stock_valuation/line/line.xml
index 684ba7ec621bca..e2ef21a0a8596b 100644
--- a/addons/stock_account/static/src/stock_valuation/line/line.xml
+++ b/addons/stock_account/static/src/stock_valuation/line/line.xml
@@ -21,7 +21,9 @@
                 <button t-attf-class="btn btn_foldable#{this.props.sublines ? '' : '_empty'}"
                         t-att-tabindex="this.props.lines ? 0 : -1">
                     <i t-if="this.hasSublines"
-                        t-attf-class="fa fa-folder#{this.state.displaySublines ? '-open' : ''}-o"/>
+                        class="oi"
+                        t-att-class="{'oi-filled': this.state.displaySubline}"
+                        t-att-data-icon="this.state.displaySubline ? 'folder_open' : 'folder'"/>
                 </button>
             </td>
         </tr>
diff --git a/addons/stock_account/static/src/stock_valuation/line/toggle_line.xml b/addons/stock_account/static/src/stock_valuation/line/toggle_line.xml
index 0ecf9bbffe3ca0..79a6903ca9c56f 100644
--- a/addons/stock_account/static/src/stock_valuation/line/toggle_line.xml
+++ b/addons/stock_account/static/src/stock_valuation/line/toggle_line.xml
@@ -4,7 +4,8 @@
        t-inherit="stock_account.StockValuationReport.InventoryValuationLine"
        t-inherit-mode="primary">
         <xpath expr="//div[hasclass('wrapper')]//button//i" position="attributes">
-            <attribute name="t-attf-class">fa fa-#{this.state.displaySublines ? 'check-' : ''}square-o</attribute>
+            <attribute name="t-att-class"/>
+            <attribute name="t-att-data-icon">this.state.displaySublines ? 'check_box' : 'square'</attribute>
         </xpath>
         <xpath expr="//t[@t-foreach='this.props.sublines']//StockValuationReportLine" position="replace">
             <t t-if="line.lines">
diff --git a/addons/stock_delivery/views/delivery_view.xml b/addons/stock_delivery/views/delivery_view.xml
index 50697b11a8b5c6..0a51cf41093825 100644
--- a/addons/stock_delivery/views/delivery_view.xml
+++ b/addons/stock_delivery/views/delivery_view.xml
@@ -26,7 +26,7 @@
                         <label for="carrier_tracking_ref"/>
                         <div name="tracking">
                             <field name="carrier_tracking_ref" class="oe_inline text-break"/>
-                            <button type='object' class="oe_link" icon="oi-arrow-right" confirm="Cancelling a delivery may not be undoable. Are you sure you want to continue?" name="cancel_shipment" string="Cancel" invisible="not carrier_tracking_ref or delivery_type in ['fixed', 'base_on_rule'] or not delivery_type or state != 'done'"/>
+                            <button type='object' class="oe_link" icon="east" confirm="Cancelling a delivery may not be undoable. Are you sure you want to continue?" name="cancel_shipment" string="Cancel" invisible="not carrier_tracking_ref or delivery_type in ['fixed', 'base_on_rule'] or not delivery_type or state != 'done'"/>
                         </div>
                         <label for="weight" string="Weight"/>
                         <div class="o_input_box">
@@ -41,7 +41,7 @@
                     </group>
                 </xpath>
                 <div name="button_box" position="inside">
-                    <button type="object" name="open_website_url" class="oe_stat_button" icon='fa-truck' string="Tracking"
+                    <button type="object" name="open_website_url" class="oe_stat_button" icon="local_shipping" string="Tracking"
                          invisible="not carrier_tracking_ref or not carrier_id or delivery_type == 'grid'" />
                 </div>
                 <xpath expr="/form/header/button[last()]" position="after">
diff --git a/addons/stock_dropshipping/views/purchase_order_views.xml b/addons/stock_dropshipping/views/purchase_order_views.xml
index 3246c4b9caf491..8ab5cbb719f082 100644
--- a/addons/stock_dropshipping/views/purchase_order_views.xml
+++ b/addons/stock_dropshipping/views/purchase_order_views.xml
@@ -9,7 +9,7 @@
                 <button type="object"
                     name="action_view_dropship"
                     class="oe_stat_button"
-                    icon="fa-truck"
+                    icon="local_shipping"
                     invisible="dropship_picking_count == 0" groups="stock.group_stock_user">
                     <field name="dropship_picking_count" widget="statinfo" string="Dropship"/>
                 </button>
diff --git a/addons/stock_dropshipping/views/sale_order_views.xml b/addons/stock_dropshipping/views/sale_order_views.xml
index 974b4e17c11c31..cc95daccc6f315 100644
--- a/addons/stock_dropshipping/views/sale_order_views.xml
+++ b/addons/stock_dropshipping/views/sale_order_views.xml
@@ -12,7 +12,7 @@
                         name="action_view_dropship"
                         type="object"
                         class="oe_stat_button"
-                        icon="fa-truck"
+                        icon="local_shipping"
                         invisible="dropship_picking_count == 0"
                         groups="stock.group_stock_user">
                         <field name="dropship_picking_count" widget="statinfo" string="Dropship"/>
diff --git a/addons/stock_landed_costs/views/account_move_views.xml b/addons/stock_landed_costs/views/account_move_views.xml
index ee5e14e29b7277..c44753691fe27d 100644
--- a/addons/stock_landed_costs/views/account_move_views.xml
+++ b/addons/stock_landed_costs/views/account_move_views.xml
@@ -10,7 +10,7 @@
                     <field name="landed_costs_ids" invisible="1"/>
                     <button string="Landed Costs" type="object"
                         name="action_view_landed_costs"
-                        class="oe_stat_button" icon="fa-plus-square"
+                        class="oe_stat_button" icon="add_box" icon_class="oi-filled"
                         invisible="not landed_costs_ids"/>
                 </t>
             </xpath>
diff --git a/addons/stock_landed_costs/views/stock_landed_cost_views.xml b/addons/stock_landed_costs/views/stock_landed_cost_views.xml
index f023b60b234fb7..ee9e4bbec5237c 100644
--- a/addons/stock_landed_costs/views/stock_landed_cost_views.xml
+++ b/addons/stock_landed_costs/views/stock_landed_cost_views.xml
@@ -15,7 +15,7 @@
                     </header>
                     <sheet>
                         <div class="oe_button_box" name="button_box">
-                            <button class="oe_stat_button" name="action_view_pickings" icon="fa-truck"
+                            <button class="oe_stat_button" name="action_view_pickings" icon="local_shipping"
                                 type="object" invisible="pickings_count == 0">
                                 <field name="pickings_count" string="Transfers" widget="statinfo"/>
                             </button>
@@ -159,7 +159,7 @@
                             </div>
                             <div class="row">
                                 <div class="col-6">
-                                    <i class="fa fa-clock-o" title="Date" role="img" aria-label="Date"/><field name="date"/>
+                                    <i class="oi" data-icon="schedule" title="Date" role="img" aria-label="Date"/><field name="date"/>
                                 </div>
                                 <field name="account_journal_id" class="col-6 text-end" readonly="state == 'done'"/>
                             </div>
diff --git a/addons/stock_maintenance/views/maintenance_views.xml b/addons/stock_maintenance/views/maintenance_views.xml
index 77ea1654aceacc..4b4d923edbacf6 100644
--- a/addons/stock_maintenance/views/maintenance_views.xml
+++ b/addons/stock_maintenance/views/maintenance_views.xml
@@ -9,7 +9,7 @@
             <button name="%(maintenance.hr_equipment_request_action_from_equipment)d" position="before">
                 <button type="object"
                     name="action_open_matched_serial"
-                    icon="fa-bars" class="oe_stat_button"
+                    icon="menu" class="oe_stat_button"
                     invisible="not match_serial">
                     <field string="Serial Number" name="serial_no" widget="statinfo"/>
                 </button>
diff --git a/addons/stock_maintenance/views/stock_location.xml b/addons/stock_maintenance/views/stock_location.xml
index a28d78045d07b4..287ca3d502a87f 100644
--- a/addons/stock_maintenance/views/stock_location.xml
+++ b/addons/stock_maintenance/views/stock_location.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('oe_button_box')]" position="inside">
                 <button class="oe_stat_button" name="action_view_equipments_records"
-                    type="object" icon="fa-wrench"
+                    type="object" icon="build"
                     invisible="equipment_count == 0">
                     <div class="o_stat_info">
                         <span class="o_stat_value">
diff --git a/addons/stock_picking_batch/views/stock_picking_batch_views.xml b/addons/stock_picking_batch/views/stock_picking_batch_views.xml
index 9e73d7e449f567..3509d68dcdd6ea 100644
--- a/addons/stock_picking_batch/views/stock_picking_batch_views.xml
+++ b/addons/stock_picking_batch/views/stock_picking_batch_views.xml
@@ -113,7 +113,7 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button name="action_see_packages" string="Packages" type="object"
-                            class="oe_stat_button" icon="fa-cubes"
+                            class="oe_stat_button" icon="inventory_2"
                             groups="stock.group_tracking_lot">
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Packages</span>
@@ -121,7 +121,7 @@
                         </button>
                         <button name="action_batch_detailed_operations"
                                 class="oe_stat_button"
-                                icon="fa-bars"
+                                icon="menu"
                                 type="object"
                                 help="List view of detailed operations">
                                 <div class="o_form_field o_stat_info">
@@ -129,7 +129,7 @@
                                 </div>
                         </button>
                         <button name="action_view_reception_report" string="Allocation" type="object"
-                            class="oe_stat_button" icon="fa-list"
+                            class="oe_stat_button" icon="format_list_bulleted"
                             invisible="not show_allocation"
                             groups="stock.group_reception_report"/>
                     </div>
@@ -204,7 +204,7 @@
                             <field name="description"/>
                         </div>
                         <div t-if="record.scheduled_date.raw_value">
-                            <i class="fa fa-calendar text-primary me-2" title="Calendar"/>
+                            <i class="oi oi-filled text-primary me-2" data-icon="calendar_today" title="Calendar"/>
                             <field name="scheduled_date"/>
                         </div>
                         <footer class="mt-auto">
diff --git a/addons/stock_picking_batch/views/stock_picking_views.xml b/addons/stock_picking_batch/views/stock_picking_views.xml
index 3eea5ff482e468..2c03dcb4505303 100644
--- a/addons/stock_picking_batch/views/stock_picking_views.xml
+++ b/addons/stock_picking_batch/views/stock_picking_views.xml
@@ -9,7 +9,7 @@
                 <button type="object"
                         name="action_view_batch"
                         class="oe_stat_button"
-                        icon="fa-truck"
+                        icon="local_shipping"
                         string="Batch"
                         invisible="not batch_id"/>
             </div>
diff --git a/addons/survey/static/src/interactions/survey_form.js b/addons/survey/static/src/interactions/survey_form.js
index 6868ffba10052b..4137aed9530617 100644
--- a/addons/survey/static/src/interactions/survey_form.js
+++ b/addons/survey/static/src/interactions/survey_form.js
@@ -1434,13 +1434,13 @@ export class SurveyForm extends Interaction {
                 buttonEl.classList.add(`bg-${isCorrect ? "success" : "danger"}`, "text-white");
                 // For the user incorrect answers, replace the empty check icon by a crossed check icon
                 if (!isCorrect && buttonEl.classList.contains("o_survey_selected")) {
-                    let fromIcon = "fa-check-circle";
-                    let toIcon = "fa-times-circle";
+                    let fromIcon = "check_circle";
+                    let toIcon = "cancel";
                     if (questionType === "multiple_choice") {
-                        fromIcon = "fa-check-square";
-                        toIcon = "fa-times-rectangle"; // fa-times-square doesn't exist in fontawesome 4.7
+                        fromIcon = "check_box";
+                        toIcon = "cancel";
                     }
-                    buttonEl.querySelector(`i.${fromIcon}`)?.classList.replace(fromIcon, toIcon);
+                    buttonEl.querySelector(`i.[data-icon="${fromIcon}"]`)?.setAttribute("data-icon", toIcon);
                 }
             }
         }
diff --git a/addons/survey/static/src/interactions/survey_image_zoomer_templates.xml b/addons/survey/static/src/interactions/survey_image_zoomer_templates.xml
index 7443515329ad8f..deb43a33092ed8 100644
--- a/addons/survey/static/src/interactions/survey_image_zoomer_templates.xml
+++ b/addons/survey/static/src/interactions/survey_image_zoomer_templates.xml
@@ -12,10 +12,10 @@
                         <img class="o_survey_img_zoom_image img img-fluid mh-75 mw-75 m-auto object-fit-contain" t-att-src="sourceImage" alt="Zoomed Image"/>
                         <div class="position-absolute bottom-0 d-flex gap-2 mb-3">
                             <button type="button" class="o_survey_img_zoom_in_btn btn btn-dark" aria-label="Zoom in">
-                                <span class="fa fa-plus"/>
+                                <span class="oi" data-icon="add"/>
                             </button>
                             <button type="button" class="o_survey_img_zoom_out_btn btn btn-dark" aria-label="Zoom out">
-                                <span class="fa fa-minus"/>
+                                <span class="oi" data-icon="remove"/>
                             </button>
                         </div>
                     </div>
diff --git a/addons/survey/static/src/interactions/survey_session_leaderboard.js b/addons/survey/static/src/interactions/survey_session_leaderboard.js
index c193cf8b079c69..b286b83bb1070c 100644
--- a/addons/survey/static/src/interactions/survey_session_leaderboard.js
+++ b/addons/survey/static/src/interactions/survey_session_leaderboard.js
@@ -180,9 +180,11 @@ export class SurveySessionLeaderboard extends Interaction {
                 const caretEl = item.querySelector(".o_survey_session_leaderboard_caret");
                 this.waitForTimeout(() => {
                     if (improved) {
-                        caretEl.classList.add("fa-caret-up", "text-success");
+                        caretEl.classList.add("text-success");
+                        caretEl.dataset.icon = "arrow_drop_up";
                     } else {
-                        caretEl.classList.add('fa-caret-down', 'text-danger');
+                        caretEl.classList.add('text-danger');
+                        caretEl.dataset.icon = "arrow_drop_down";
                     }
                 }, 25); // Sync with the label change below
                 this.animatePositionLabel(
diff --git a/addons/survey/static/src/question_page/description_page_field.xml b/addons/survey/static/src/question_page/description_page_field.xml
index 064c19a7f1651c..891af0034fb53b 100644
--- a/addons/survey/static/src/question_page/description_page_field.xml
+++ b/addons/survey/static/src/question_page/description_page_field.xml
@@ -4,12 +4,12 @@
     <t t-name="survey.CharField" t-inherit="web.CharField">
         <xpath expr="//div[@class='o_field_input_buttons']" position="inside">
             <button type="button" title="Open section" class="btn btn-link o_input_box_overlay_end" t-on-click.stop="this.onExternalBtnClick">
-                <i class="fa fa-external-link"/>
+                <i class="oi" data-icon="open_in_new"/>
             </button>
         </xpath>
         <xpath expr="//span[@t-out='this.formattedValue']" position="after">
             <button class="btn btn-link o_input_box_overlay_end" t-if="this.props.record.data.is_page">
-                <i class="fa fa-pencil"/>
+                <i class="oi oi-filled" data-icon="edit"/>
             </button>
         </xpath>
     </t>
diff --git a/addons/survey/static/src/scss/survey_templates_results.scss b/addons/survey/static/src/scss/survey_templates_results.scss
index 78375ce6fb1c8d..34767f28afbe70 100644
--- a/addons/survey/static/src/scss/survey_templates_results.scss
+++ b/addons/survey/static/src/scss/survey_templates_results.scss
@@ -64,10 +64,10 @@
 
 .o_survey_results_question {
     .o_survey_results_question_header {
-        div[aria-expanded="false"] i.oi-chevron-up {
+        div[aria-expanded="false"] i[data-icon="arrow_right"] {
             display: none;
         }
-        div[aria-expanded="true"] i.oi-chevron-down {
+        div[aria-expanded="true"] i[data-icon="arrow_drop_down"] {
             display: none;
         }
     }
diff --git a/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.xml b/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.xml
index 29626608f4bc96..dd0affc30ec450 100644
--- a/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.xml
+++ b/addons/survey/static/src/views/widgets/survey_question_trigger/survey_question_trigger.xml
@@ -4,7 +4,10 @@
     <t t-name="survey.surveyQuestionTrigger">
         <button t-if="this.props.record.data.triggering_question_ids.records.length" disabled="disabled" t-custom-ref="survey_question_trigger"
                 class="btn btn-link px-1 py-0 pe-auto" t-att-class="this.state.surveyIconWarning ? 'opacity-100' : 'icon_rotates'">
-            <i class="fa fa-fw o_button_icon " t-att-class="this.state.surveyIconWarning ? 'fa-exclamation-triangle text-warning' : 'fa-code-fork'"
+            <i
+               class="o_button_icon oi oi-fw"
+               t-att-class="{'text-warning': this.state.surveyIconWarning}"
+               t-att-data-icon="this.state.surveyIconWarning ? 'warning' : 'fork_right'"
                t-att-data-tooltip="this.state.triggerTooltip"/>
         </button>
     </t>
diff --git a/addons/survey/static/src/xml/survey_paginated_results_rows_template.xml b/addons/survey/static/src/xml/survey_paginated_results_rows_template.xml
index 582112b1e1dfc4..b71f95fac834f0 100644
--- a/addons/survey/static/src/xml/survey_paginated_results_rows_template.xml
+++ b/addons/survey/static/src/xml/survey_paginated_results_rows_template.xml
@@ -20,7 +20,7 @@
                             <a class="text-primary filter-add-answer d-print-none"
                                 data-model-short-key="L" t-att-data-record-id="input_line.id"
                                 role="button" aria-label="Filter surveys" title="Only show survey results having selected this answer">
-                                <i class="fa fa-filter"/>
+                                <i class="oi oi-filled" data-icon="filter_alt"/>
                             </a>
                         </div>
                     </t>
diff --git a/addons/survey/static/tests/components/description_page_field.test.js b/addons/survey/static/tests/components/description_page_field.test.js
index 6049a4e0ecaae0..52958dcb85b434 100644
--- a/addons/survey/static/tests/components/description_page_field.test.js
+++ b/addons/survey/static/tests/components/description_page_field.test.js
@@ -64,12 +64,12 @@ test("button is visible in the edited record and allows to open that record", as
         `,
     });
     expect("td.o_survey_description_page_cell").toHaveCount(2);
-    expect("button i.fa-external-link").toHaveCount(0);
+    expect("button i[data-icon='open_in_new']").toHaveCount(0);
 
     await contains(".o_data_cell").click();
-    expect(".o_data_row button i.fa-external-link").toHaveCount(1);
+    expect(".o_data_row button i[data-icon='open_in_new']").toHaveCount(1);
     expect(".modal .o_form_view").toHaveCount(0);
 
-    await contains("button i.fa-external-link").click();
+    await contains("button i[data-icon='open_in_new']").click();
     expect(".modal .o_form_view").toHaveCount(1);
 });
diff --git a/addons/survey/static/tests/tours/survey_form.js b/addons/survey/static/tests/tours/survey_form.js
index 66e59ec25f7dcc..20c11c8922702e 100644
--- a/addons/survey/static/tests/tours/survey_form.js
+++ b/addons/survey/static/tests/tours/survey_form.js
@@ -70,17 +70,17 @@ registry.category("web_tour.tours").add('survey_tour_test_survey_form_triggers',
     },
     {
         content: "Check that Question 2 has 'normal' trigger icon",
-        trigger: "tr:contains('Question 2') button i.fa-code-fork",
+        trigger: "tr:contains('Question 2') button i[data-icon='fork_right']",
     }, {
         content: "Check that Question 3 has 'normal' trigger icon",
-        trigger: "tr:contains('Question 3') button i.fa-code-fork",
+        trigger: "tr:contains('Question 3') button i[data-icon='fork_right']",
     }, {
         content: "Move Question 3 above its trigger (Question 2)",
         trigger: "div[name=question_and_page_ids] table tr:eq(3) div[name=sequence]",
         run: "drag_and_drop(div[name=question_and_page_ids] table tr:eq(2))",
     }, {
         content: "Check that Question 3 has 'warning' trigger icon",
-        trigger: "tr:contains('Question 3') button i.fa-exclamation-triangle",
+        trigger: "tr:contains('Question 3') button i[data-icon='warning']",
     }, {
         content: "Open that question to check the server's misplacement evaluation agrees",
         trigger: "tr.o_data_row td:contains('Question 3')",
@@ -116,7 +116,7 @@ registry.category("web_tour.tours").add('survey_tour_test_survey_form_triggers',
     },
     {
         content: "Check that Question 3 has its 'normal' trigger icon back",
-        trigger: "tr:contains('Question 3') button i.fa-code-fork",
+        trigger: "tr:contains('Question 3') button i[data-icon='fork_right']",
     }, {
         content: "Move Question 3 back below Question 2",
         trigger: "div[name=question_and_page_ids] table tr:eq(2) div[name=sequence]",
@@ -157,7 +157,7 @@ registry.category("web_tour.tours").add('survey_tour_test_survey_form_triggers',
         run: "drag_and_drop(div[name=question_and_page_ids] table tr:eq(4))",
     }, {
         content: "Check that Question 3 has 'warning' trigger icon",
-        trigger: "tr:contains('Question 3') button i.fa-exclamation-triangle",
+        trigger: "tr:contains('Question 3') button i[data-icon='warning']",
     }, {
         content: "Open that question again",
         trigger: "tr.o_data_row td:contains('Question 3')",
@@ -185,7 +185,7 @@ registry.category("web_tour.tours").add('survey_tour_test_survey_form_triggers',
     },
     {
         content: "Check that Question 3 has its 'normal' trigger icon back",
-        trigger: "tr:contains('Question 3') button i.fa-code-fork",
+        trigger: "tr:contains('Question 3') button i[data-icon='fork_right']",
     }, {
         content: "Move Question 1 back above Question 2",
         trigger: "div[name=question_and_page_ids] table tr:eq(3) div[name=sequence]",
@@ -214,7 +214,7 @@ registry.category("web_tour.tours").add('survey_tour_test_survey_form_triggers',
         trigger: "div[name=question_and_page_ids] tr:contains('Question 3') div.o_widget_survey_question_trigger:not(:has(button)):not(:visible)",
     }, {
         content: "Check that Question 2 however still has a trigger icon",
-        trigger: "tr:contains('Question 2') button i.fa-code-fork",
+        trigger: "tr:contains('Question 2') button i[data-icon='fork_right']",
     }, {
         content: "Delete Question 1",
         trigger: "tr:contains('Question 1') button[name=delete]",
diff --git a/addons/survey/views/res_partner_views.xml b/addons/survey/views/res_partner_views.xml
index ca9d59fa030519..0577aad04c717c 100644
--- a/addons/survey/views/res_partner_views.xml
+++ b/addons/survey/views/res_partner_views.xml
@@ -15,7 +15,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
                 <button class="oe_stat_button" type="object"
-                    icon="fa-trophy" name="action_view_certifications"
+                    icon="trophy" icon_class="oi-filled" name="action_view_certifications"
                      groups="survey.group_survey_user"
                     invisible="certifications_count == 0 or is_company">
                     <div class="o_field_widget o_stat_info">
@@ -25,7 +25,7 @@
                     </div>
                 </button>
                 <button class="oe_stat_button" type="object"
-                    icon="fa-trophy" name="action_view_certifications"
+                    icon="trophy" icon_class="oi-filled" name="action_view_certifications"
                     groups="survey.group_survey_user"
                     invisible="certifications_company_count == 0 or not is_company">
                     <div class="o_field_widget o_stat_info">
diff --git a/addons/survey/views/survey_question_views.xml b/addons/survey/views/survey_question_views.xml
index 494414dffc54e9..b12dc42292abfa 100644
--- a/addons/survey/views/survey_question_views.xml
+++ b/addons/survey/views/survey_question_views.xml
@@ -25,16 +25,21 @@
                     <div invisible="is_page" class="mb-0">
                         <field name="question_type" nolabel="1" widget="badges_selection" required="not is_page"
                             options="{'icon_mapping': {
-                                'simple_choice': 'fa-dot-circle-o',
-                                'multiple_choice': 'fa-check-square-o',
-                                'text_box': 'fa-bars',
-                                'char_box': 'fa-minus',
-                                'numerical_box': 'fa-hashtag',
-                                'scale': 'fa-smile-o',
-                                'date': 'fa-calendar-o',
-                                'datetime': 'fa-calendar',
-                                'time': 'fa-clock-o',
-                                'matrix': 'fa-th',    
+                                'simple_choice': 'radio_button_checked',
+                                'multiple_choice': 'check_box',
+                                'text_box': 'menu',
+                                'char_box': 'remove',
+                                'numerical_box': 'tag',
+                                'scale': 'sentiment_satisfied',
+                                'date': 'calendar_today',
+                                'datetime': 'calendar_today',
+                                'time': 'schedule',
+                                'matrix': 'grid_view',
+                            },
+                            'icon_class_mapping': {
+                                'multiple_choice': 'oi-filled',
+                                'date': 'oi-filled',
+                                'datetime': 'oi-filled',
                             }}"/>
                     </div>
                     <div class="oe_title">
@@ -159,7 +164,7 @@
                                                invisible="question_type != 'datetime'"
                                                required="validation_required and question_type == 'datetime' and not validation_max_datetime"/>
 
-                                        <i class="fa fa-long-arrow-right mx-2" aria-label="Arrow icon" title="Arrow"/>
+                                        <i class="oi mx-2" data-icon="east" aria-label="Arrow icon" title="Arrow"/>
                                         <!-- Maxima -->
                                         <field name="validation_length_max" class="o_survey_question_validation_inline" nolabel="1" placeholder="Maximum"
                                                invisible="question_type != 'char_box'"
diff --git a/addons/survey/views/survey_survey_views.xml b/addons/survey/views/survey_survey_views.xml
index c77fce5b0e0cb8..8af2ed63cf7e0a 100644
--- a/addons/survey/views/survey_survey_views.xml
+++ b/addons/survey/views/survey_survey_views.xml
@@ -30,20 +30,20 @@
                             type="object"
                             class="oe_stat_button"
                             invisible="access_mode == 'public'"
-                            icon="fa-envelope-o">
+                            icon="mail">
                             <field string="Registered" name="answer_count" widget="statinfo"/>
                         </button>
                         <button name="action_survey_user_input_certified"
                             type="object"
                             class="oe_stat_button"
                             invisible="not certification"
-                            icon="fa-trophy">
+                            icon="trophy" icon_class="oi-filled">
                             <field string="Certified" name="success_count" widget="statinfo"/>
                         </button>
                         <button name="action_survey_user_input_completed"
                             type="object"
                             class="oe_stat_button"
-                            icon="fa-check-square-o">
+                            icon="check_box">
                             <field string="Participants" name="answer_done_count" widget="statinfo"/>
                         </button>
                     </div>
@@ -54,12 +54,15 @@
                         options="{
                             'allowed_selection_field': 'allowed_survey_types',
                             'icon_mapping': {
-                                'survey': 'fa-edit',
-                                'live_session': 'fa-bar-chart-o',
-                                'assessment': 'fa-mortar-board',
-                                'custom': 'fa-paint-brush',
-                                'recruitment': 'fa-suitcase',
-                                'appraisal': 'fa-star-half-empty'
+                                'survey': 'edit',
+                                'live_session': 'bar_chart',
+                                'assessment': 'school',
+                                'custom': 'design_services',
+                                'recruitment': 'luggage',
+                                'appraisal': 'star_half'
+                            },
+                            'icon_class_mapping': {
+                                'survey': 'oi-filled'
                             }
                         }"/>
                     <div class="oe_title w-100">
@@ -105,7 +108,7 @@
                                     <field name="triggering_question_ids" column_invisible="True"/>
                                     <field name="triggering_answer_ids" column_invisible="True" widget="many2many_tags"/> <!-- widget to fetch display_name -->
                                     <widget name="survey_question_trigger" width="30px"/>
-                                    <button name="copy" type="object" icon="fa-clone" title="Duplicate Question"/>
+                                    <button name="copy" type="object" icon="content_copy" title="Duplicate Question"/>
                                     <control>
                                         <create name="add_question_control" string="Add a question"/>
                                         <create name="add_section_control" string="Add a section" context="{'default_is_page': True, 'default_questions_selection': 'all'}"/>
@@ -162,7 +165,7 @@
                                             <field name="certification_report_layout" placeholder="Pick a Style..." class="w-50"/>
                                             <button name="action_survey_preview_certification_template"
                                                 string="Preview" type="object"
-                                                icon="fa-external-link"  target="_blank" class="btn-link pt-0"/>
+                                                icon="open_in_new"  target="_blank" class="btn-link pt-0"/>
                                         </div>
                                     </div>
                                     <field name="certification_mail_template_id"
@@ -234,7 +237,7 @@
                 <field name="certification" column_invisible="True"/>
                 <field name="title"/>
                 <button name="certification" type="button" disabled="disabled"
-                    icon="fa-trophy" title="Certification" aria-label="Certification"
+                    icon="trophy" icon_class="oi-filled" title="Certification" aria-label="Certification"
                     invisible="not certification"/>
                 <field name="user_id" widget="many2one_avatar_user"/>
                 <field name="answer_duration_avg" widget="float_time"/>
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 67804be89a6d6a..002961fd75e905 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -466,7 +466,8 @@
                    t-att-data-max-date="question.validation_max_date">
             </input>
             <i t-if="not survey_form_readonly"
-                class="fa fa-calendar position-absolute end-0 top-50 translate-middle pe-1 text-muted pe-none"
+                class="oi oi-filled position-absolute end-0 top-50 translate-middle pe-1 text-muted pe-none"
+                data-icon="calendar_today"
                 aria-hidden="true"/>
         </div>
     </template>
@@ -481,7 +482,8 @@
                    t-att-data-min-date="question.validation_min_datetime"
                    t-att-data-max-date="question.validation_max_datetime"/>
             <i t-if="not survey_form_readonly"
-                class="fa fa-calendar position-absolute end-0 top-50 translate-middle pe-1 text-muted pe-none"
+                class="oi oi-filled position-absolute end-0 top-50 translate-middle pe-1 text-muted pe-none"
+                data-icon="calendar_today"
                 aria-hidden="true"/>
         </div>
     </template>
@@ -532,11 +534,13 @@
                                 selection_key_class.f="position-relative o_survey_radio_btn d-flex ms-auto"/>
                             <t t-if="has_correct_answer">
                                 <i t-if="label.is_correct"
-                                    class="d-inline fa fa-check text-success ms-auto"
+                                    class="d-inline oi text-success ms-auto"
+                                    data-icon="check"
                                     aria-label="Correct"
                                     role="img"/>
                                 <i t-elif="answer_selected and not label.is_correct"
-                                    class="d-inline fa fa-times text-danger ms-auto"
+                                    class="d-inline oi text-danger ms-auto"
+                                    data-icon="close"
                                     aria-label="Incorrect"
                                     role="img"/>
                             </t>
@@ -603,12 +607,14 @@
                             <t t-call="survey.survey_selection_key"
                                 selection_key_class.f="position-relative d-flex ms-auto"/>
                             <t t-if="has_correct_answer and label.is_correct and (not answer_selected or answer_selected)">
-                                <i class="fa fa-check fa-fw ms-auto text-success"
+                                <i class="oi oi-fw ms-auto text-success"
+                                    data-icon="check"
                                     aria-label="Correct"
                                     role="img"/>
                             </t>
                             <t t-if="answer_line and not label.is_correct and has_correct_answer">
-                                <i class="fa fa-times fa-fw ms-auto text-danger"
+                                <i class="oi oi-fw ms-auto text-danger"
+                                    data-icon="close"
                                     aria-label="Incorrect"
                                     role="img"/>
                             </t>
diff --git a/addons/survey/views/survey_templates_management.xml b/addons/survey/views/survey_templates_management.xml
index 991e5e0501e4ca..ecf0fe8d6fee94 100644
--- a/addons/survey/views/survey_templates_management.xml
+++ b/addons/survey/views/survey_templates_management.xml
@@ -104,12 +104,12 @@
             <p class="mb-1">This is a Test Survey Entry.</p>
             <div class="survey_button_form_view_hook d-inline-block">
                 <a t-if="env.user.has_group('survey.group_survey_user')" class="alert-link" t-attf-href="/odoo/action-survey.action_survey_form/{{survey.id}}">
-                    <i class="oi oi-fw oi-arrow-right"/>Go to Survey</a>
+                    <i class="oi oi-fw" data-icon="east"/>Go to Survey</a>
             </div>
         </div>
         <div groups="survey.group_survey_user" t-if="survey.scoring_type != 'no_scoring' and survey.scoring_max_obtainable &lt;= 0"
             t-ignore="true" class="alert alert-warning p-2 border-0 rounded-0 d-print-none css_editable_mode_hidden mb-0 text-center">
-            <i class="fa fa-exclamation-triangle"/> It is currently not possible to pass this assessment because no question is configured to give any points.
+            <i class="oi" data-icon="warning"/> It is currently not possible to pass this assessment because no question is configured to give any points.
         </div>
     </template>
 
@@ -173,7 +173,7 @@
                 value="previous"
                 t-att-data-previous-page-id="previous_page_id"
                 aria-label="Go to previous question">
-                <i class="oi oi-chevron-left p-2" aria-hidden="true"/>
+                <i class="oi p-2" data-icon="chevron_backward" aria-hidden="true"/>
             </button>
             <t t-set="can_go_forward"
                 t-value="survey and survey.questions_layout in ['page_per_question', 'page_per_section'] and answer and answer.state != 'done' and not answer.is_session_answer"/>
@@ -183,7 +183,7 @@
                 t-att-value="'next' if not survey_last else 'finish'"
                 t-att-aria-label="'Submit survey' if survey_last else 'Go to next question'">
                 <t t-if="survey_last">Submit</t>
-                <i class="oi oi-chevron-right p-2" aria-hidden="true"/>
+                <i class="oi p-2" data-icon="chevron_forward" aria-hidden="true"/>
             </button>
         </div>
     </template>
diff --git a/addons/survey/views/survey_templates_print.xml b/addons/survey/views/survey_templates_print.xml
index 9476236efbe729..11be771fed865b 100644
--- a/addons/survey/views/survey_templates_print.xml
+++ b/addons/survey/views/survey_templates_print.xml
@@ -22,7 +22,7 @@
                                         class="o_survey_user_results_print btn btn-light d-print-none"
                                         title="Print Results"
                                         aria-label="Print Results">
-                                        <i class="fa fa-print" aria-hidden="true"/>
+                                        <i class="oi" data-icon="print" aria-hidden="true"/>
                                     </a>
                                 </div>
                                 <div t-if="graph_data" class="o_survey_result mt-5 px-5">
diff --git a/addons/survey/views/survey_templates_statistics.xml b/addons/survey/views/survey_templates_statistics.xml
index f98f5c81335ab6..4cd71fca918fe7 100644
--- a/addons/survey/views/survey_templates_statistics.xml
+++ b/addons/survey/views/survey_templates_statistics.xml
@@ -24,7 +24,7 @@
                 <h1 class="h3" t-field="survey.title"/>
                 <div class="btn-group">
                     <button class="o_survey_results_print btn btn-light d-print-none" aria-label="Print" title="Print">
-                        <i class="fa fa-print" aria-hidden="true"/>
+                        <i class="oi" data-icon="print" aria-hidden="true"/>
                     </button>
                 </div>
             </div>
@@ -40,7 +40,8 @@
                     <div class="border rounded p-3">
                         <div class="d-flex align-items-center justify-content-between">
                             <h4 class="mb-0" t-out="survey.question_count"/>
-                            <i class="fa fa-question-circle rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                            <i class="oi rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                                data-icon="help"
                                 aria-hidden="true"/>
                         </div>
                         <span class="text-muted">Questions</span>
@@ -50,7 +51,8 @@
                     <div class="border rounded p-3">
                         <div class="d-flex align-items-center justify-content-between">
                             <h4 class="mb-0" t-out="survey.answer_count"/>
-                            <i class="fa fa-address-card rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                            <i class="oi oi-filled rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                                data-icon="contact_mail"
                                 aria-hidden="true"/>
                         </div>
                         <span class="text-muted">Registered</span>
@@ -60,7 +62,8 @@
                     <div class="border rounded p-3">
                         <div class="d-flex align-items-center justify-content-between">
                             <h4 class="mb-0" t-out="survey.answer_done_count"/>
-                            <i class="fa fa-check-circle rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                            <i class="oi oi-filled rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                                data-icon="check_circle"
                                 aria-hidden="true"/>
                         </div>
                         <span class="text-muted">Completed</span>
@@ -71,7 +74,8 @@
                         <div class="d-flex align-items-center justify-content-between">
                             <h4 class="mb-0"><t t-call="survey.survey_remove_unnecessary_decimals"
                         value_to_format="survey_data['global_success_rate']"/>%</h4>
-                            <i class="fa fa-trophy rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                            <i class="oi oi-filled rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                                data-icon="trophy"
                                 aria-hidden="true"/>
                         </div>
                         <span class="text-muted">Success rate</span>
@@ -81,7 +85,8 @@
                     <div class="border rounded p-3">
                         <div class="d-flex align-items-center justify-content-between">
                             <h4 class="mb-0" t-out="survey.answer_duration_avg" t-options="{'widget': 'float_time'}"/>
-                            <i class="fa fa-clock-o rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                            <i class="oi rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                                data-icon="schedule"
                                 aria-hidden="true"/>
                         </div>
                         <span class="text-muted">Avg. Duration</span>
@@ -91,7 +96,8 @@
                     <div class="border rounded p-3">
                         <div class="d-flex align-items-center justify-content-between">
                             <h4 class="mb-0"><t t-out="round(survey.answer_score_avg, 2)"/>%</h4>
-                            <i class="fa fa-star rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                            <i class="oi oi-filled rounded-2 p-2 text-primary-emphasis bg-primary-subtle"
+                                data-icon="star"
                                 aria-hidden="true"/>
                         </div>
                         <span class="text-muted">Avg. Score</span>
@@ -140,8 +146,8 @@
                             <span t-out="len(question_data['answer_input_ids'])"/>
                             <span class="text-muted">Responded</span>
                         </small>
-                        <i class="oi oi-chevron-up d-print-none" role="img"/>
-                        <i class="oi oi-chevron-down d-print-none" role="img"/>
+                        <i class="oi d-print-none" data-icon="keyboard_arrow_up" role="img"/>
+                        <i class="oi d-print-none" data-icon="keyboard_arrow_down" role="img"/>
                     </div>
                 </div>
             </div>
@@ -153,17 +159,17 @@
                         <a t-if="question.question_type in ['simple_choice', 'multiple_choice', 'matrix', 'scale']"
                             t-att-href="'#survey_graph_question_%d' % question.id" t-att-aria-controls="'survey_graph_question_%d' % question.id"
                             data-bs-toggle="tab" role="tab" class="o_survey_results_data_tab btn btn-light py-1 px-2 active" aria-label="Charts">
-                            <i t-if="question.question_type == 'simple_choice'" class="fa fa-pie-chart me-2"/>
-                            <i t-else="" class="fa fa-fw fa-bar-chart-o" aria-hidden="true"/><span class="d-none d-lg-inline ms-2">Charts</span>
+                            <i t-if="question.question_type == 'simple_choice'" class="oi me-2" data-icon="pie_chart"/>
+                            <i t-else="" class="oi oi-fw" data-icon="bar_chart" aria-hidden="true"/><span class="d-none d-lg-inline ms-2">Charts</span>
                         </a>
                         <a t-elif="question.question_type in ['numerical_box', 'date', 'datetime']"
                             t-att-href="'#survey_stats_question_%d' % question.id" t-att-aria-controls="'survey_stats_question_%d' % question.id"
                             data-bs-toggle="tab" role="tab" class="o_survey_results_data_tab btn btn-light py-1 px-2 active" aria-label="Stats">
-                            <i class="fa fa-fw fa-trophy" aria-hidden="true"/><span class="d-none d-lg-inline ms-2">Stats</span>
+                            <i class="oi oi-fw oi-filled" data-icon="trophy" aria-hidden="true"/><span class="d-none d-lg-inline ms-2">Stats</span>
                         </a>
                         <a t-att-href="'#survey_data_question_%d' % question.id" t-att-aria-controls="'survey_data_question_%d' % question.id"
                             data-bs-toggle="tab" role="tab" class="o_survey_results_data_tab btn btn-light py-1 px-2" aria-label="Answers">
-                            <i class="fa fa-fw fa-bars" aria-hidden="true"/><span class="d-none d-lg-inline ms-2">Answers</span>
+                            <i class="oi oi-fw" data-icon="menu" aria-hidden="true"/><span class="d-none d-lg-inline ms-2">Answers</span>
                         </a>
                     </div>
                     <!-- Question info -->
@@ -272,7 +278,7 @@
                         </li>
                         <li class="ms-auto" t-if="search_filters or search_finished or search_passed_or_failed">
                             <button class="o_survey_results_topbar_clear_filters btn btn-link px-0">
-                                <i class="fa fa-trash me-2"/>Remove filters
+                                <i class="oi oi-filled me-2" data-icon="delete"/>Remove filters
                             </button>
                         </li>
                     </ul>
@@ -284,7 +290,8 @@
                                         <span t-out="filter_data['question']" t-att-title="filter_data['question']"/> -
                                         <span t-out="filter_data['answer']"/>
                                     </span>
-                                    <i class="oi oi-close filter-remove-answer ms-auto text-primary cursor-pointer"
+                                    <i class="oi filter-remove-answer ms-auto text-primary cursor-pointer"
+                                        data-icon="close"
                                         t-att-data-model-short-key="filter_data['model_short_key']"
                                         t-att-data-row-id="filter_data['row_id']"
                                         t-att-data-record-id="filter_data['record_id']"></i>
@@ -335,17 +342,17 @@
                                 <t t-if="question.question_type == 'numerical_box'">
                                     <t t-set="right_answer" t-value="common_line[0] == question.answer_numerical_box"/>
                                     <span><t t-call="survey.survey_remove_unnecessary_decimals" value_to_format="common_line[0]"/></span>
-                                    <i t-if="right_answer" class="fa fa-check"/>
+                                    <i t-if="right_answer" class="oi" data-icon="check"/>
                                 </t>
                                 <t t-elif="question.question_type == 'date'">
                                     <t t-set="right_answer" t-value="common_line[0] == question.answer_date"/>
                                     <span t-out="common_line[0]" t-options='{"widget": "date"}'/>
-                                    <i t-if="right_answer" class="fa fa-check"/>
+                                    <i t-if="right_answer" class="oi" data-icon="check"/>
                                 </t>
                                 <t t-elif="question.question_type == 'datetime'">
                                     <t t-set="right_answer" t-value="common_line[0] == question.answer_datetime"/>
                                     <span t-out="common_line[0]" t-options='{"widget": "datetime"}'/>
-                                    <i t-if="right_answer" class="fa fa-check"/>
+                                    <i t-if="right_answer" class="oi" data-icon="check"/>
                                 </t>
                             </td>
                             <td><span t-out="common_line[1]"></span></td>
@@ -412,7 +419,7 @@
                                         <t t-call="survey.survey_remove_unnecessary_decimals" value_to_format="choice_data['value']"/>
                                     </span>
                                     <span t-else="" t-out="choice_data['value']"/>
-                                    <i t-if="question.is_scored_question and choice_data['suggested_answer'].is_correct" class="fa fa-check"/>
+                                    <i t-if="question.is_scored_question and choice_data['suggested_answer'].is_correct" class="oi" data-icon="check"/>
                                 </p>
                             </td>
                             <td t-if="question_has_image_answers">
@@ -424,7 +431,8 @@
                                 <span t-out="round(choice_data['count'] * 100.0/ (len(question_data['answer_line_done_ids']) or 1), 2)"></span> %
                                 <span t-out="choice_data['count_text']" class="badge text-bg-primary"/>
                                 <i t-if="choice_data['suggested_answer'].id and choice_data['count']"
-                                    class="fa fa-filter filter-add-answer d-print-none cursor-pointer text-primary"
+                                    class="oi oi-filled filter-add-answer d-print-none cursor-pointer text-primary"
+                                    data-icon="filter_alt"
                                     data-model-short-key="A" t-att-data-record-id="choice_data['suggested_answer'].id"
                                     role="img" aria-label="Filter surveys" title="Only show survey results having selected this answer"/>
                             </td>
@@ -470,7 +478,8 @@
                                 <div class="d-flex align-items-center gap-1 justify-content-end">
                                     <span t-out="round(column_data['count'] * 100.0/ (len(question_data['answer_input_done_ids']) or 1), 2)"></span> %
                                     <span class="badge text-bg-primary" t-out="column_data['count']"></span>
-                                    <i t-if="column_data['count']" class="fa fa-filter text-primary filter-add-answer d-print-none"
+                                    <i t-if="column_data['count']" class="oi oi-filled text-primary filter-add-answer d-print-none"
+                                        data-icon="filter_alt"
                                         data-model-short-key="A"
                                         t-att-data-row-id="choice_data['row'].id"
                                         t-att-data-record-id="column_data['suggested_answer'].id" role="img" aria-label="Filter surveys"
diff --git a/addons/survey/views/survey_templates_user_input_session.xml b/addons/survey/views/survey_templates_user_input_session.xml
index 00442b62146feb..e35ae0b01d3599 100644
--- a/addons/survey/views/survey_templates_user_input_session.xml
+++ b/addons/survey/views/survey_templates_user_input_session.xml
@@ -57,11 +57,11 @@
                 <div class="o_survey_session_open_link d-flex flex-column flex-md-row align-items-center gap-3 gap-md-0 justify-content-between px-5 py-4 rounded-3 bg-black-50">
                     <div class="fs-5 o_survey_session_copy cursor-pointer">
                         <a class="o_survey_session_copy_url text-white" href="#" t-out="survey.session_link" aria-label="Copy session link"/>
-                        <i class="fa fa-copy ms-2" aria-hidden="true"/>
+                        <i class="oi ms-2" data-icon="content_copy" aria-hidden="true"/>
                     </div>
                     <a role="button" class="o_survey_session_navigation_next btn btn-lg btn-fill-light w-100 w-md-auto">
                         <span class="o_survey_session_navigation_next_label">Start</span>
-                        <i class="oi oi-chevron-right" aria-hidden="true"/>
+                        <i class="oi" data-icon="chevron_forward" aria-hidden="true"/>
                     </a>
                 </div>
             </div>
@@ -127,14 +127,15 @@
             </div>
             <a role="button"
                 href="#"
-                class="oi oi-chevron-left o_survey_session_navigation o_survey_session_navigation_previous position-absolute start-0 ms-3 rounded p-3 bg-black-50 text-white z-3"
+                class="oi o_survey_session_navigation o_survey_session_navigation_previous position-absolute start-0 ms-3 rounded p-3 bg-black-50 text-white z-3"
+                data-icon="chevron_backward"
                 aria-label="Previous Question"/>
             <a role="button"
                 href="#"
                 class="o_survey_session_navigation o_survey_session_navigation_next position-absolute end-0 me-3 rounded p-3 bg-black-50 text-white z-3"
                 aria-label="Next Question">
                 <span class="o_survey_session_navigation_next_label me-2 d-none d-md-inline" aria-hidden="true"/>
-                <i class="fw-bold oi oi-chevron-right" aria-hidden="true"/>
+                <i class="fw-bold oi" data-icon="chevron_forward" aria-hidden="true"/>
             </a>
             <div class="o_survey_session_manage_container d-flex flex-column p-5 bg-black-50 rounded">
                 <div class="o_survey_session_description_done d-none o_container_small">
@@ -177,7 +178,7 @@
                         <div class="ms-2">
                             <a href="#" role="button" class="o_survey_session_close btn border-light text-light">End the Session</a>
                             <a href="#" role="button" class="o_survey_session_close btn btn-light" t-att-data-show-results="True">
-                                <i class="fa fa-bar-chart" aria-hidden="true"/> Results
+                                <i class="oi" data-icon="bar_chart" aria-hidden="true"/> Results
                             </a>
                         </div>
                     </div>
@@ -204,7 +205,7 @@
                     t-att-data-current-score="str(current_score)"
                     t-att-data-updated-score="str(round(score.get('updated_score', 0)))"
                     t-att-data-max-question-score="str(round(max_question_score))">
-                    <i class="o_survey_session_leaderboard_caret fa"/>
+                    <i class="o_survey_session_leaderboard_caret oi"/>
                     <div class="d-inline-block fw-bold align-top position-relative">
                         <div class="d-inline-block me-2 o_survey_session_leaderboard_position">
                             <t t-out="str(score_index + 1)"/>.
diff --git a/addons/survey/views/survey_user_views.xml b/addons/survey/views/survey_user_views.xml
index 5b19c4b7141c68..ef04b4a5553297 100644
--- a/addons/survey/views/survey_user_views.xml
+++ b/addons/survey/views/survey_user_views.xml
@@ -51,7 +51,7 @@
                             type="object"
                             class="oe_stat_button"
                             invisible="attempts_count == 1"
-                            icon="fa-files-o">
+                            icon="content_copy">
                             <field string="Attempts" name="attempts_count" widget="statinfo"/>
                         </button>
                     </div>
diff --git a/addons/survey_crm/views/survey_survey_views.xml b/addons/survey_crm/views/survey_survey_views.xml
index babec2d2d050c2..cd2fe1c6577b2e 100644
--- a/addons/survey_crm/views/survey_survey_views.xml
+++ b/addons/survey_crm/views/survey_survey_views.xml
@@ -13,7 +13,8 @@
                     type="object"
                     class="oe_stat_button"
                     invisible="not (survey_type in ['survey', 'live_session', 'custom'] and lead_count != 0)"
-                    icon="fa-star">
+                    icon="star"
+                    icon_class="oi-filled">
                     <field string="Leads" name="lead_count" widget="statinfo"/>
                 </button>
             </xpath>
@@ -23,7 +24,7 @@
             </xpath>
 
             <xpath expr="//list//field[@name='title']" position="after">
-                <button type="button" icon="fa-star" title="This question generates leads"
+                <button type="button" icon="star" icon_class="oi-filled" title="This question generates leads"
                         invisible="not (survey_type in ['survey', 'live_session', 'custom'] and generate_lead)"/>
             </xpath>
         </field>
diff --git a/addons/survey_crm/views/survey_user_views.xml b/addons/survey_crm/views/survey_user_views.xml
index d3297cc4eaeddd..5184e40fd6fb8e 100644
--- a/addons/survey_crm/views/survey_user_views.xml
+++ b/addons/survey_crm/views/survey_user_views.xml
@@ -9,7 +9,7 @@
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_redirect_to_attempts']" position="after">
                 <button class="oe_stat_button"
-                        icon="fa-star"
+                        icon="star" icon_class="oi-filled"
                         invisible="not lead_id"
                         name="action_redirect_lead"
                         type="object">
diff --git a/addons/test_base_automation/static/tests/tour/base_automation_tour.js b/addons/test_base_automation/static/tests/tour/base_automation_tour.js
index 7140f5fa0e5f6a..f927a787bf4c67 100644
--- a/addons/test_base_automation/static/tests/tour/base_automation_tour.js
+++ b/addons/test_base_automation/static/tests/tour/base_automation_tour.js
@@ -30,7 +30,7 @@ registry.category("web_tour.tours").add("test_base_automation", {
         },
         {
             content: "Select model contact",
-            trigger: ".dropdown-menu li a:contains(Contact):not(:has(.fa-spin))",
+            trigger: ".dropdown-menu li a:contains(Contact):not(:has(.oi-spin))",
             run: "click",
         },
         {
@@ -104,7 +104,7 @@ registry.category("web_tour.tours").add("test_base_automation_on_tag_added", {
         },
         {
             trigger:
-                ".dropdown-menu li a:contains(test_base_automation.project):not(:has(.fa-spin))",
+                ".dropdown-menu li a:contains(test_base_automation.project):not(:has(.oi-spin))",
             run: "click",
         },
         {
@@ -147,7 +147,7 @@ registry.category("web_tour.tours").add("test_base_automation_on_tag_added", {
             run: "edit test",
         },
         {
-            trigger: ".dropdown-menu li a:contains(test):not(:has(.fa-spin))",
+            trigger: ".dropdown-menu li a:contains(test):not(:has(.oi-spin))",
             run: "click",
         },
         {
@@ -220,7 +220,7 @@ registry.category("web_tour.tours").add("test_base_automation_on_tag_added", {
             run: "edit High",
         },
         {
-            trigger: ".dropdown-menu li a:contains(High):not(:has(.fa-spin))",
+            trigger: ".dropdown-menu li a:contains(High):not(:has(.oi-spin))",
             run: "click",
         },
         {
@@ -345,7 +345,7 @@ registry.category("web_tour.tours").add("test_kanban_automation_view_create_acti
             trigger: "div[name='action_server_ids']:contains(Create Contact with name NameX)",
         },
         {
-            trigger: "body:has(.fa.fa-plus-square:count(1))",
+            trigger: "body:has([data-icon='add_box']:count(1))",
         },
     ],
 });
@@ -540,7 +540,7 @@ registry.category("web_tour.tours").add("test_form_view_custom_reference_field",
         },
         {
             trigger:
-                ".o_field_widget[name='trg_field_ref'] .o-autocomplete--dropdown-menu:not(:has(a .fa-spin):contains(test stage\nSearch more...)",
+                ".o_field_widget[name='trg_field_ref'] .o-autocomplete--dropdown-menu:not(:has(a .oi-spin):contains(test stage\nSearch more...)",
         },
         {
             content: "Open select",
@@ -561,7 +561,7 @@ registry.category("web_tour.tours").add("test_form_view_custom_reference_field",
         },
         {
             trigger:
-                ".o_field_widget[name='trg_field_ref'] .o-autocomplete--dropdown-menu:not(:has(a .fa-spin):contains(test stage\nSearch more...)",
+                ".o_field_widget[name='trg_field_ref'] .o-autocomplete--dropdown-menu:not(:has(a .oi-spin):contains(test stage\nSearch more...)",
         },
         {
             trigger: ".o_form_button_cancel",
diff --git a/addons/test_event_full/static/src/js/tests/test_template_reference_field_widget.test.js b/addons/test_event_full/static/src/js/tests/test_template_reference_field_widget.test.js
index c6b85bd7cc150c..9ab31995977c82 100644
--- a/addons/test_event_full/static/src/js/tests/test_template_reference_field_widget.test.js
+++ b/addons/test_event_full/static/src/js/tests/test_template_reference_field_widget.test.js
@@ -72,10 +72,10 @@ test("Reference field displays right icons", async () => {
     // each field cell will be the field of a different record (1 field/line)
     expect(".o_field_cell").toHaveCount(3);
     expect(".o_field_cell.o_EventMailTemplateReferenceField_cell").toHaveCount(3);
-    expect(".o_field_cell:eq(0) .fa-envelope").toHaveCount(1);
-    expect(".o_field_cell:eq(1) .fa-mobile").toHaveCount(1);
-    expect(".o_field_cell:eq(2) .fa-envelope").toHaveCount(0);
-    expect(".o_field_cell:eq(2) .fa-mobile").toHaveCount(0);
+    expect(".o_field_cell:eq(0) [data-icon='mail'].oi-filled").toHaveCount(1);
+    expect(".o_field_cell:eq(1) [data-icon='smartphone']").toHaveCount(1);
+    expect(".o_field_cell:eq(2) [data-icon='mail'].oi-filled").toHaveCount(0);
+    expect(".o_field_cell:eq(2) [data-icon='smartphone']").toHaveCount(0);
 
     // select a sms.template instead of mail.template
 
@@ -91,8 +91,8 @@ test("Reference field displays right icons", async () => {
     await click(".o_list_renderer");
     await animationFrame();
 
-    expect(".o_field_cell:eq(0) .fa-mobile").toHaveCount(1);
-    expect(".o_field_cell:eq(0) .fa-envelope").toHaveCount(0);
+    expect(".o_field_cell:eq(0) [data-icon='smartphone']").toHaveCount(1);
+    expect(".o_field_cell:eq(0) [data-icon='mail'].oi-filled").toHaveCount(0);
 
     // select a some other model to check it has no icon
 
@@ -107,8 +107,8 @@ test("Reference field displays right icons", async () => {
     await click(".o_list_renderer");
     await animationFrame();
 
-    expect(".o_field_cell:eq(0) .fa-mobile").toHaveCount(0);
-    expect(".o_field_cell:eq(0) .fa-envelope").toHaveCount(0);
+    expect(".o_field_cell:eq(0) [data-icon='smartphone']").toHaveCount(0);
+    expect(".o_field_cell:eq(0) [data-icon='mail'].oi-filled").toHaveCount(0);
 
     // select no record for the model
 
@@ -119,6 +119,6 @@ test("Reference field displays right icons", async () => {
     await click(".o_list_renderer");
     await animationFrame();
 
-    expect(".o_field_cell:eq(1) .fa-mobile").toHaveCount(0);
-    expect(".o_field_cell:eq(1) .fa-envelope").toHaveCount(0);
+    expect(".o_field_cell:eq(1) [data-icon='smartphone']").toHaveCount(0);
+    expect(".o_field_cell:eq(1) [data-icon='mail'].oi-filled").toHaveCount(0);
 });
diff --git a/addons/test_event_full/static/src/js/tours/wevent_register_tour.js b/addons/test_event_full/static/src/js/tours/wevent_register_tour.js
index aecfdb3f5df7c1..9720bdb7b49e19 100644
--- a/addons/test_event_full/static/src/js/tours/wevent_register_tour.js
+++ b/addons/test_event_full/static/src/js/tours/wevent_register_tour.js
@@ -9,13 +9,13 @@ const reminderToggleSteps = function (talkName, reminderOn, toggleReminder) {
     if (reminderOn) {
         steps = steps.concat([{
             content: `Check Favorite for ${talkName} was already on`,
-            trigger: "div.o_wetrack_js_reminder i.fa-bell",
+            trigger: "div.o_wetrack_js_reminder i[data-icon='notifications'].oi-filled",
         }]);
     }
     else {
         steps = steps.concat([{
             content: `Check Favorite for ${talkName} was off`,
-            trigger: "div.o_wetrack_js_reminder i.fa-bell-o",
+            trigger: "div.o_wetrack_js_reminder i[data-icon='notifications']",
         }]);
         if (toggleReminder) {
             steps = steps.concat([{
@@ -37,7 +37,7 @@ const reminderToggleSteps = function (talkName, reminderOn, toggleReminder) {
             }
             steps = steps.concat([{
                 content: `Check Favorite for ${talkName} is now on`,
-                trigger: "div.o_wetrack_js_reminder i.fa-bell",
+                trigger: "div.o_wetrack_js_reminder i[data-icon='notifications'].oi-filled",
             }]);
         }
     }
diff --git a/addons/test_mail/static/tests/activity.test.js b/addons/test_mail/static/tests/activity.test.js
index 607cb97677be6b..b07b07e164d434 100644
--- a/addons/test_mail/static/tests/activity.test.js
+++ b/addons/test_mail/static/tests/activity.test.js
@@ -61,7 +61,7 @@ testMailModels.MailActivity._views = {
     form: `
         <form>
             <footer>
-                <button string="Delete" type="object" name="unlink" icon="fa-trash" class="btn-danger ms-auto"/>
+                <button string="Delete" type="object" name="unlink" icon="delete" icon_class="oi-filled" class="btn-danger ms-auto"/>
             </footer>
         </form>`,
 };
diff --git a/addons/test_sale_product_configurators/static/tests/tours/event_sale_with_product_configurator_ui.js b/addons/test_sale_product_configurators/static/tests/tours/event_sale_with_product_configurator_ui.js
index 9afa0213ce2f6e..592432e396911c 100644
--- a/addons/test_sale_product_configurators/static/tests/tours/event_sale_with_product_configurator_ui.js
+++ b/addons/test_sale_product_configurators/static/tests/tours/event_sale_with_product_configurator_ui.js
@@ -12,7 +12,7 @@ registry.category("web_tour.tours").add("event_sale_with_product_configurator_to
         ...tourUtils.addProduct("Registration Event (TEST variants)"),
         {
             trigger:
-            'tr:has(div[name="o_sale_product_configurator_name"]:contains("Memorabilia")) button:has(i.oi-plus)',
+            'tr:has(div[name="o_sale_product_configurator_name"]:contains("Memorabilia")) button:has(i[data-icon="add"])',
             run: "click",
         },
         {
diff --git a/addons/test_sale_product_configurators/static/tests/tours/product_configurator_optional_products_ui.js b/addons/test_sale_product_configurators/static/tests/tours/product_configurator_optional_products_ui.js
index 02946fd3e7ef0a..6ee6ed9cabd30e 100644
--- a/addons/test_sale_product_configurators/static/tests/tours/product_configurator_optional_products_ui.js
+++ b/addons/test_sale_product_configurators/static/tests/tours/product_configurator_optional_products_ui.js
@@ -10,19 +10,19 @@ registry.category("web_tour.tours").add('sale_product_configurator_optional_prod
         ...tourUtils.selectCustomer("Tajine Saucisse"),
         ...tourUtils.addProduct("Customizable Desk (TEST)"),
         {
-            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Office Chair Black")) button:has(i.oi-plus)',
+            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Office Chair Black")) button:has(i[data-icon="add"])',
             run: "click",
         },
         {
-            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Customizable Desk")) button:has(i.oi-plus)',
+            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Customizable Desk")) button:has(i[data-icon="add"])',
             run: "click",
         },
         {
-            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Chair floor protection")) button:has(i.oi-plus)',
+            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Chair floor protection")) button:has(i[data-icon="add"])',
             run: "click",
         },
         {
-            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Conference Chair")) button:has(i.oi-plus)',
+            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Conference Chair")) button:has(i[data-icon="add"])',
             run: "click",
         },
         {
@@ -30,7 +30,7 @@ registry.category("web_tour.tours").add('sale_product_configurator_optional_prod
             run: "click",
         },
         {
-            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Conference Chair")) button:has(i.oi-plus)',
+            trigger: 'tr:has(div[name="o_sale_product_configurator_name"]:contains("Conference Chair")) button:has(i[data-icon="add"])',
             run: "click",
         },
         {
diff --git a/addons/test_website/models/model.py b/addons/test_website/models/model.py
index b9d3e646ca9ef3..7815210c4797d9 100644
--- a/addons/test_website/models/model.py
+++ b/addons/test_website/models/model.py
@@ -43,7 +43,7 @@ def _search_get_detail(self, website, order, options):
                 'name': {'name': 'name', 'type': 'text', 'match': True},
                 'website_url': {'name': 'name', 'type': 'text', 'truncate': False},
             },
-            'icon': 'fa-check-square-o',
+            'icon': 'check_box',
             'order': 'name asc, id desc',
         }
 
diff --git a/addons/test_website/static/tests/tours/image_link.js b/addons/test_website/static/tests/tours/image_link.js
index 29b1f20271a7af..c7782540621bec 100644
--- a/addons/test_website/static/tests/tours/image_link.js
+++ b/addons/test_website/static/tests/tours/image_link.js
@@ -78,7 +78,7 @@ registerWebsitePreviewTour(
         {
             content: "check popover content has mail URL",
             trigger:
-                ".o-we-linkpopover:has(.fa-envelope-o) a.o_we_url_link[href='mailto:test@test.com']:contains(mailto:test@test.com)",
+                ".o-we-linkpopover:has([data-icon='mail']) a.o_we_url_link[href='mailto:test@test.com']:contains(mailto:test@test.com)",
         },
         {
             content: "enter phone URL",
@@ -90,7 +90,7 @@ registerWebsitePreviewTour(
         {
             content: "check popover content has phone URL",
             trigger:
-                ".o-we-linkpopover:has(.fa-phone) a.o_we_url_link[href='tel:555-2368']:contains(tel:555-2368)",
+                ".o-we-linkpopover:has([data-icon='phone']) a.o_we_url_link[href='tel:555-2368']:contains(tel:555-2368)",
         },
         {
             content: "remove URL",
diff --git a/addons/test_website/static/tests/tours/replace_media.js b/addons/test_website/static/tests/tours/replace_media.js
index 4ec6d6805e9428..5bc71a5725841b 100644
--- a/addons/test_website/static/tests/tours/replace_media.js
+++ b/addons/test_website/static/tests/tours/replace_media.js
@@ -84,7 +84,7 @@ registerWebsitePreviewTour(
         {
             content: "select an icon",
             trigger:
-                ".o_select_media_dialog:has(.nav-link.active:contains('Icons')) .tab-content span.fa-heart",
+                ".o_select_media_dialog:has(.nav-link.active:contains('Icons')) .tab-content span[data-icon='favorite']",
             run: "click",
         },
         {
@@ -98,7 +98,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "select icon",
-            trigger: ":iframe .s_picture figure span.fa-heart",
+            trigger: ":iframe .s_picture figure span[data-icon='favorite']",
             run: "click",
         },
         {
@@ -149,7 +149,7 @@ registerWebsitePreviewTour(
         {
             content: "select an icon",
             trigger:
-                ".o_select_media_dialog:has(.nav-link.active:contains('Icons')) .tab-content span.fa-heart",
+                ".o_select_media_dialog:has(.nav-link.active:contains('Icons')) .tab-content span[data-icon='favorite']",
             run: "click",
         },
         {
@@ -163,7 +163,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "select icon",
-            trigger: ":iframe .s_picture figure span.fa-heart",
+            trigger: ":iframe .s_picture figure span[data-icon='favorite']",
             run: "click",
         },
         {
diff --git a/addons/test_website/static/tests/tours/systray.js b/addons/test_website/static/tests/tours/systray.js
index bddd880213fabf..a7a991f16458cc 100644
--- a/addons/test_website/static/tests/tours/systray.js
+++ b/addons/test_website/static/tests/tours/systray.js
@@ -133,7 +133,7 @@ const canEditInBackEnd = () => [
     },
     {
         content: "Return to website",
-        trigger: ".o-form-buttonbox .fa-globe",
+        trigger: ".o-form-buttonbox [data-icon='public']",
         run: "click",
     },
 ];
@@ -150,7 +150,7 @@ const canViewInBackEnd = () => [
     },
     {
         content: "Return to website",
-        trigger: ".o-form-buttonbox .fa-globe",
+        trigger: ".o-form-buttonbox [data-icon='public']",
         run: "click",
     },
 ];
diff --git a/addons/test_website/tests/test_qweb.py b/addons/test_website/tests/test_qweb.py
index 68ad09b91b61d3..dcdc6abc8e2291 100644
--- a/addons/test_website/tests/test_qweb.py
+++ b/addons/test_website/tests/test_qweb.py
@@ -27,7 +27,7 @@ def test_qweb_cdn(self):
 
         demo = self.env['res.users'].search([('login', '=', 'demo')])[0]
         demo.write({"signature": '''<span class="toto">
-                span<span class="fa"></span><img src="/web/image/1"/>
+                span<span class="oi"></span><img src="/web/image/1"/>
             </span>'''})
 
         demo_env = self.env(user=demo)
@@ -72,7 +72,7 @@ def test_qweb_cdn(self):
         <a href="http://test.cdn/web/content/local_link">x</a>
         <span style="background-image: url(&#39;http://test.cdn/web/image/2&#39;)">xxx</span>
         <div widget="html"><span class="toto">
-                span<span class="fa"></span><img src="http://test.cdn/web/image/1" loading="lazy">
+                span<span class="oi"></span><img src="http://test.cdn/web/image/1" loading="lazy">
             </span></div>
         <div widget="image"><img src="http://test.cdn/web/image/res.users/%(user_id)s/avatar_1920/%(filename)s" class="img img-fluid" alt="%(alt)s" loading="lazy"/></div>
     </body>
diff --git a/addons/test_website/tests/test_website_controller_page.py b/addons/test_website/tests/test_website_controller_page.py
index 8b7eedd6e62de3..3ff94ab7638218 100644
--- a/addons/test_website/tests/test_website_controller_page.py
+++ b/addons/test_website/tests/test_website_controller_page.py
@@ -29,11 +29,11 @@ def setUpClass(cls):
                 <div t-attf-class="listing_layout_switcher btn-group ms-3" t-att-data-active-classes="_activeClasses" t-att-data-view-id="view_id">
                     <input type="radio" class="btn-check" name="wstudio_layout" id="o_wstudio_apply_grid" value="grid" t-att-checked="'checked' if layout_mode != 'list' else None"/>
                     <label t-attf-class="btn btn-light #{_activeClasses if layout_mode != 'list' else None} o_wstudio_apply_grid" title="Grid" for="o_wstudio_apply_grid">
-                        <i class="fa fa-th-large"/>
+                        <i class="oi" data-icon="view_module"/>
                     </label>
                     <input type="radio" class="btn-check" name="wstudio_layout" id="o_wstudio_apply_list" t-att-checked="'checked' if layout_mode == 'list' else None" value="list"/>
                     <label t-attf-class="btn btn-light #{_activeClasses if layout_mode == 'list' else None} o_wstudio_apply_list" title="List" for="o_wstudio_apply_list">
-                        <i class="oi oi-view-list"/>
+                        <i class="oi" data-icon="view_list"view_list/>
                     </label>
                 </div>
 
diff --git a/addons/test_website/views/test_model_multi_website_views.xml b/addons/test_website/views/test_model_multi_website_views.xml
index ae58a1da1cbaaa..997d926eb3f161 100644
--- a/addons/test_website/views/test_model_multi_website_views.xml
+++ b/addons/test_website/views/test_model_multi_website_views.xml
@@ -11,7 +11,7 @@
                 <t t-name="card">
                     <field name="name" class="text-truncate fw-bolder mb-auto"/>
                     <div class="text-muted fw-bolder" t-if="record.website_id.value" groups="website.group_multi_website">
-                        <i class="fa fa-globe me-1" title="Website"/>
+                        <i class="oi me-1" data-icon="public" title="Website"/>
                         <field name="website_id"/>
                     </div>
                     <div class="d-flex border-top mt-2 pt-2">
diff --git a/addons/transifex/static/src/views/fields/translation_dialog.xml b/addons/transifex/static/src/views/fields/translation_dialog.xml
index c7343f4bfa6c0d..d81c85d8f9ea08 100644
--- a/addons/transifex/static/src/views/fields/translation_dialog.xml
+++ b/addons/transifex/static/src/views/fields/translation_dialog.xml
@@ -3,8 +3,8 @@
 
 <t t-inherit="web.TranslationDialog" t-inherit-mode="extension">
     <xpath expr="//div[hasclass('row')]/div/t" position="after">
-        <a t-if="term.transifex_url" t-attf-href="#{term.transifex_url}" title="Contribute" target="_blank"> <i class="fa fa-globe"/></a>
+        <a t-if="term.transifex_url" t-attf-href="#{term.transifex_url}" title="Contribute" target="_blank"> <i class="oi" data-icon="public"/></a>
     </xpath>
 </t>
 
-</templates>
\ No newline at end of file
+</templates>
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index e9322ddb013b4a..6fa14b12bbcbfd 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -546,23 +546,15 @@
             '/web/static/lib/fullcalendar/timegrid/index.global.js',
             '/web/static/lib/fullcalendar/list/index.global.js',
         ],
-        # Icons bundles: font-awesome, odoo_ui_icons and both combined. Only the
-        # combination should probably be used. But it is split to allow FA
-        # preload on the frontend.
-        'web.fontawesome': [
-            '/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2',
-            '/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff',
-            '/web/static/src/libs/fontawesome/css/font-awesome.css',
-        ],
         'web.odoo_ui_icons': [
             '/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2',
             '/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff',
-            '/web/static/lib/odoo_ui_icons/style.css',
+            '/web/static/lib/odoo_ui_icons/odoo_ui_icons.css',
         ],
         'web.icons_fonts': [
-            ('include', 'web.fontawesome'),
             ('include', 'web.odoo_ui_icons'),
-            'web/static/src/scss/fontawesome_overridden.scss',  # some are fa classes... but using odoo_ui_icons font
+            'web/static/src/libs/materialsymbols/*.css',
+            'web/static/src/webclient/icons.scss',
         ],
     },
     'bootstrap': True,  # load translations for login screen,
diff --git a/addons/web/models/ir_ui_view.py b/addons/web/models/ir_ui_view.py
index 62d09e10d7b206..e5eee5d446ac62 100644
--- a/addons/web/models/ir_ui_view.py
+++ b/addons/web/models/ir_ui_view.py
@@ -12,6 +12,7 @@ def get_view_info(self):
             type_: {
                 'display_name': display_name,
                 'icon': _view_info[type_]['icon'],
+                'icon_class': _view_info[type_].get('icon_class', ''),
                 'multi_record': _view_info[type_].get('multi_record', True),
             }
             for (type_, display_name)
@@ -21,11 +22,11 @@ def get_view_info(self):
 
     def _get_view_info(self):
         return {
-            'list': {'icon': 'oi oi-view-list'},
-            'form': {'icon': 'fa fa-address-card', 'multi_record': False},
-            'graph': {'icon': 'fa fa-area-chart'},
-            'pivot': {'icon': 'oi oi-view-pivot'},
-            'kanban': {'icon': 'oi oi-view-kanban'},
-            'calendar': {'icon': 'fa fa-calendar'},
-            'search': {'icon': 'oi oi-search'},
+            'list': {'icon': 'view_list'},
+            'form': {'icon': 'contact_mail', 'icon_class': 'oi-filled', 'multi_record': False},
+            'graph': {'icon': 'area_chart'},
+            'pivot': {'icon': 'oi_view-pivot'},
+            'kanban': {'icon': 'oi_view-kanban'},
+            'calendar': {'icon': 'calendar_today', 'icon_class': 'oi-filled'},
+            'search': {'icon': 'search'},
         }
diff --git a/addons/web/static/img/enterprise_upgrade.jpg b/addons/web/static/img/enterprise_upgrade.jpg
deleted file mode 100644
index 3b30a3ca05b629..00000000000000
Binary files a/addons/web/static/img/enterprise_upgrade.jpg and /dev/null differ
diff --git a/addons/web/static/lib/hoot/core/expect.js b/addons/web/static/lib/hoot/core/expect.js
index 8c8c40b88db68d..98bf4f6ffdd7c3 100644
--- a/addons/web/static/lib/hoot/core/expect.js
+++ b/addons/web/static/lib/hoot/core/expect.js
@@ -371,7 +371,7 @@ function valueMatches(value, matcher) {
 }
 
 const AMPERSAND = makeLabel("&", null);
-const ARROW_RIGHT = makeLabelIcon("fa fa-arrow-right text-sm");
+const ARROW_RIGHT = makeLabelIcon("arrow_forward");
 
 const R_LINE_RETURN = /\n+/g;
 const R_NOT = /\[([\w\s]*)!([\w\s]*)\]/g;
diff --git a/addons/web/static/lib/hoot/hoot_utils.js b/addons/web/static/lib/hoot/hoot_utils.js
index 77c9004ba94b5d..cdfc22edc4abad 100644
--- a/addons/web/static/lib/hoot/hoot_utils.js
+++ b/addons/web/static/lib/hoot/hoot_utils.js
@@ -2027,37 +2027,37 @@ export class MockEventTarget extends EventTarget {
 export const CASE_EVENT_TYPES = {
     assertion: {
         value: 0b1,
-        icon: "fa-check",
+        icon: "check",
         color: "emerald",
     },
     error: {
         value: 0b10,
-        icon: "fa-exclamation",
+        icon: "priority_high",
         color: "rose",
     },
     interaction: {
         value: 0b100,
-        icon: "fa-bolt",
+        icon: "flash_on",
         color: "purple",
     },
     query: {
         value: 0b1000,
-        icon: "fa-search text-sm",
+        icon: "search",
         color: "amber",
     },
     server: {
         value: 0b10000,
-        icon: "fa-globe",
+        icon: "public",
         color: "lime",
     },
     step: {
         value: 0b100000,
-        icon: "fa-arrow-right text-sm",
+        icon: "arrow_forward",
         color: "orange",
     },
     time: {
         value: 0b1000000,
-        icon: "fa fa-hourglass text-sm",
+        icon: "hourglass_empty",
         color: "blue",
     },
 };
diff --git a/addons/web/static/lib/hoot/tests/hoot-dom/dom.test.js b/addons/web/static/lib/hoot/tests/hoot-dom/dom.test.js
index a3acfa156f6fa3..3523157a80a93f 100644
--- a/addons/web/static/lib/hoot/tests/hoot-dom/dom.test.js
+++ b/addons/web/static/lib/hoot/tests/hoot-dom/dom.test.js
@@ -851,7 +851,7 @@ describe(parseUrl(import.meta.url), () => {
             expect(() => $$`[href=/]`).toThrow(); // missing quotes
             expect(
                 () =>
-                    $$`_o_wblog_posts_loop:has(span:has(i.fa-calendar-o):has(a[href="/blog?search=a"])):has(span:has(i.fa-search):has(a[href^="/blog?date_begin"]))`
+                    $$`_o_wblog_posts_loop:has(span:has(i[data-icon="calendar_today"]):has(a[href="/blog?search=a"])):has(span:has(i[data-icon="search"]):has(a[href^="/blog?date_begin"]))`
             ).toThrow(); // nested :has statements
         });
 
diff --git a/addons/web/static/lib/hoot/tests/index.html b/addons/web/static/lib/hoot/tests/index.html
index e5f7ff5d76d9b6..e404f4048b603c 100644
--- a/addons/web/static/lib/hoot/tests/index.html
+++ b/addons/web/static/lib/hoot/tests/index.html
@@ -83,7 +83,7 @@
         <!-- Test assets -->
         <script src="/web/static/lib/owl/owl.js"></script>
         <link rel="stylesheet" href="/web/static/lib/hoot/ui/hoot_style.css" />
-        <link rel="stylesheet" href="/web/static/src/libs/fontawesome/css/font-awesome.css" />
+        <link rel="stylesheet" href="/web/static/src/libs/materialsymbols/materialsymbols.css" />
 
         <!-- Test suites -->
         <script src="./index.js" type="module" defer></script>
diff --git a/addons/web/static/lib/hoot/ui/hoot_buttons.js b/addons/web/static/lib/hoot/ui/hoot_buttons.js
index 7eef54c1de5f6c..2335928cdcfb81 100644
--- a/addons/web/static/lib/hoot/ui/hoot_buttons.js
+++ b/addons/web/static/lib/hoot/ui/hoot_buttons.js
@@ -53,7 +53,7 @@ export class HootButtons extends Component {
                 t-att-title="isRunning ? 'Stop (Esc)' : 'Run'"
                 t-att-disabled="this.state.disable"
             >
-                <i t-attf-class="fa fa-{{ isRunning ? 'stop' : 'play' }}" />
+                <i t-attf-class="oi oi-filled" t-att-data-icon="isRunning ? 'stop' : 'play_arrow'" />
                 <span t-out="isRunning ? 'Stop' : 'Run'" />
             </button>
             <t t-if="showAll or showFailed">
@@ -62,7 +62,7 @@ export class HootButtons extends Component {
                     class="bg-btn px-2 py-1 transition-colors animate-slide-left"
                     t-on-click.stop="this.onToggleClick"
                 >
-                    <i class="fa fa-caret-down transition" t-att-class="{ 'rotate-180': this.state.open }" />
+                    <i class="oi transition" data-icon="arrow_drop_down" t-att-class="{ 'rotate-180': this.state.open }" />
                 </button>
             </t>
             </div>
diff --git a/addons/web/static/lib/hoot/ui/hoot_config_menu.js b/addons/web/static/lib/hoot/ui/hoot_config_menu.js
index 47b3fc92609de9..97a8403d5e3214 100644
--- a/addons/web/static/lib/hoot/ui/hoot_config_menu.js
+++ b/addons/web/static/lib/hoot/ui/hoot_config_menu.js
@@ -49,7 +49,7 @@ export class HootConfigMenu extends Component {
                             t-att-title="presetKey ? preset.label : 'No preset'"
                             t-on-click.stop="() => this.onPresetChange(presetKey)"
                         >
-                            <i t-attf-class="fa w-5 h-5 {{ preset.icon or 'fa-ban' }}" />
+                            <i class="oi w-5 h-5" t-attf-data-icon="{{ preset.icon or 'block' }}" />
                         </button>
                     </t>
                 </div>
@@ -67,7 +67,7 @@ export class HootConfigMenu extends Component {
                         t-att-title="order.title"
                         t-on-click.stop="() => this.setExecutionOrder(order.value)"
                     >
-                        <i class="fa w-5 h-5" t-att-class="{ [order.icon]: true }"/>
+                        <i t-attf-class="oi w-5 h-5 #{[order.icon_class]}" t-att-data-icon="[order.icon]"/>
                     </button>
                 </t>
             </div>
@@ -85,7 +85,7 @@ export class HootConfigMenu extends Component {
                         title="Generate new random seed"
                         t-on-click.stop="this.resetSeed"
                     >
-                        <i class="fa fa-repeat" />
+                        <i class="oi" data-icon="redo" />
                     </button>
                     <HootCopyButton text="this.config.random.toString()" />
                 </small>
@@ -200,7 +200,7 @@ export class HootConfigMenu extends Component {
                         t-attf-title="{{ isDisplayed ? 'Hide' : 'Show' }} {{ sType }} events"
                         t-on-click.stop="(ev) => this.toggleEventType(ev, sType)"
                     >
-                        <i class="fa" t-att-class="this.CASE_EVENT_TYPES[sType].icon" />
+                        <i class="oi" t-att-class="this.CASE_EVENT_TYPES[sType].icon_class" t-att-data-icon="this.CASE_EVENT_TYPES[sType].icon"/>
                     </button>
                 </t>
             </div>
@@ -223,7 +223,7 @@ export class HootConfigMenu extends Component {
                     <t t-else="">
                         none
                     </t>
-                    <i t-attf-class="fa fa-sort-numeric-{{ this.uiState.sortResults or 'desc' }}" />
+                    <i class="oi" data-icon="sort" t-att-class="{ 'oi-flip-vertical': this.uiState.sortResults === 'desc' }" />
                 </span>
             </button>
             <label
@@ -254,7 +254,7 @@ export class HootConfigMenu extends Component {
                 title="Toggle the color scheme of the UI"
                 t-on-click.stop="this.toggleColorScheme"
             >
-                <i t-attf-class="fa fa-{{ this.color.scheme === 'light' ? 'moon' : 'sun' }}-o w-4 h-4" />
+                <i class="oi w-4 h-4" t-att-data-icon="this.color.scheme === 'light' ? 'dark_mode' : 'light_mode'" />
                 Color scheme
             </button>
 
@@ -271,9 +271,9 @@ export class HootConfigMenu extends Component {
     CASE_EVENT_TYPES = CASE_EVENT_TYPES;
 
     executionOrders = [
-        { value: "fifo", title: "First in, first out", icon: "fa-sort-numeric-asc" },
-        { value: "lifo", title: "Last in, first out", icon: "fa-sort-numeric-desc" },
-        { value: "random", title: "Random", icon: "fa-random" },
+        { value: "fifo", title: "First in, first out", icon: "sort", icon_class: "oi-flip-vertical" },
+        { value: "lifo", title: "Last in, first out", icon: "sort" },
+        { value: "random", title: "Random", icon: "shuffle" },
     ];
     LOG_LEVELS = $entries(LOG_LEVELS)
         .filter(([, value]) => value)
diff --git a/addons/web/static/lib/hoot/ui/hoot_copy_button.js b/addons/web/static/lib/hoot/ui/hoot_copy_button.js
index f32980a7eba3da..06d67eda23345b 100644
--- a/addons/web/static/lib/hoot/ui/hoot_copy_button.js
+++ b/addons/web/static/lib/hoot/ui/hoot_copy_button.js
@@ -26,7 +26,7 @@ export class HootCopyButton extends Component {
                 title="copy to clipboard"
                 t-on-click.stop="this.onClick"
             >
-                <i class="fa fa-clipboard" />
+                <i class="oi" data-icon="assignment" />
             </button>
         </t>
     `;
diff --git a/addons/web/static/lib/hoot/ui/hoot_debug_toolbar.js b/addons/web/static/lib/hoot/ui/hoot_debug_toolbar.js
index 4605c9d3532a91..d773914c4df630 100644
--- a/addons/web/static/lib/hoot/ui/hoot_debug_toolbar.js
+++ b/addons/web/static/lib/hoot/ui/hoot_debug_toolbar.js
@@ -163,7 +163,8 @@ export class HootDebugToolBar extends Component {
             <div class="flex flex-col w-full overflow-hidden rounded shadow bg-gray-200 dark:bg-gray-800">
                 <div class="flex items-center gap-2 px-2">
                     <i
-                        class="fa fa-bug text-cyan p-2"
+                        class="oi text-cyan p-2"
+                        data-icon="bug_report"
                         t-att-class="{ 'cursor-move': !this.state.open }"
                         t-ref="handle"
                     />
@@ -173,7 +174,7 @@ export class HootDebugToolBar extends Component {
                             title="Exit debug mode (Ctrl + Esc)"
                             t-on-click.stop="this.exitDebugMode"
                         >
-                            <i class="fa fa-sign-out" />
+                            <i class="oi" data-icon="logout" />
                         </button>
                         <t t-if="this.done">
                             <button
@@ -181,7 +182,7 @@ export class HootDebugToolBar extends Component {
                                 title="Restart test (F5)"
                                 t-on-click.stop="this.refresh"
                             >
-                                <i class="fa fa-refresh" />
+                                <i class="oi" data-icon="refresh" />
                             </button>
                         </t>
                     </div>
@@ -218,7 +219,7 @@ export class HootDebugToolBar extends Component {
                         />
                     </button>
                     <button class="p-2" t-on-click="this.toggleConfig">
-                        <i class="fa fa-cog" />
+                        <i class="oi oi-filled" data-icon="settings" />
                     </button>
                 </div>
                 <t t-if="this.state.open">
diff --git a/addons/web/static/lib/hoot/ui/hoot_dropdown.js b/addons/web/static/lib/hoot/ui/hoot_dropdown.js
index 0106e262c77a50..b3a974feaf570b 100644
--- a/addons/web/static/lib/hoot/ui/hoot_dropdown.js
+++ b/addons/web/static/lib/hoot/ui/hoot_dropdown.js
@@ -34,7 +34,7 @@ export class HootDropdown extends Component {
                         bg-base text-base mt-1 shadow rounded z-2"
                 >
                     <button class="fixed end-2 top-2 p-1 text-rose sm:hidden" t-on-click="() => this.state.open = false">
-                        <i class="fa fa-times w-5 h-5" />
+                        <i class="oi w-5 h-5" data-icon="close"/>
                     </button>
                     <t t-slot="menu" open="state.open" />
                 </div>
diff --git a/addons/web/static/lib/hoot/ui/hoot_job_buttons.js b/addons/web/static/lib/hoot/ui/hoot_job_buttons.js
index 9737876588368b..e7f0f6f5fb2b8b 100644
--- a/addons/web/static/lib/hoot/ui/hoot_job_buttons.js
+++ b/addons/web/static/lib/hoot/ui/hoot_job_buttons.js
@@ -29,7 +29,7 @@ export class HootJobButtons extends Component {
                 class="'hoot-btn-link border border-primary text-emerald rounded transition-colors'"
                 title="'Run this ' + type + ' only'"
             >
-                <i class="fa fa-play w-5 h-5" />
+                <i class="oi oi-filled w-5 h-5" data-icon="play_arrow" />
             </HootLink>
             <t t-if="type === 'test'">
                 <HootLink
@@ -38,7 +38,7 @@ export class HootJobButtons extends Component {
                     class="'hoot-btn-link border border-primary text-emerald rounded transition-colors'"
                     title="'Run this ' + type + ' only in debug mode'"
                 >
-                    <i class="fa fa-bug w-5 h-5" />
+                    <i class="oi w-5 h-5" data-icon="bug_report" />
                 </HootLink>
             </t>
             <HootLink
@@ -47,7 +47,7 @@ export class HootJobButtons extends Component {
                 class="'hoot-btn-link border border-primary text-rose rounded transition-colors'"
                 title="'Ignore ' + type"
             >
-                <i class="fa fa-ban w-5 h-5" />
+                <i class="oi w-5 h-5" data-icon="block" />
             </HootLink>
         </div>
     `;
diff --git a/addons/web/static/lib/hoot/ui/hoot_log_counters.js b/addons/web/static/lib/hoot/ui/hoot_log_counters.js
index 3caee4f7a19357..4b1f6cd18936db 100644
--- a/addons/web/static/lib/hoot/ui/hoot_log_counters.js
+++ b/addons/web/static/lib/hoot/ui/hoot_log_counters.js
@@ -26,7 +26,7 @@ export class HootLogCounters extends Component {
                 class="flex items-center gap-1 text-rose"
                 t-attf-title="{{ this.props.logs.error }} error log(s) (check the console)"
             >
-                <i class="fa fa-times-circle" />
+                <i class="oi oi-filled" data-icon="cancel" />
                 <strong t-out="this.props.logs.error" />
             </span>
         </t>
@@ -35,7 +35,7 @@ export class HootLogCounters extends Component {
                 class="flex items-center gap-1 text-amber"
                 t-attf-title="{{ this.props.logs.warn }} warning log(s) (check the console)"
             >
-                <i class="fa fa-exclamation-triangle" />
+                <i class="oi" data-icon="warning" />
                 <strong t-out="this.props.logs.warn" />
             </span>
         </t>
diff --git a/addons/web/static/lib/hoot/ui/hoot_main.js b/addons/web/static/lib/hoot/ui/hoot_main.js
index 92545a936873c5..0b1dc9fe00a41c 100644
--- a/addons/web/static/lib/hoot/ui/hoot_main.js
+++ b/addons/web/static/lib/hoot/ui/hoot_main.js
@@ -93,7 +93,7 @@ export class HootMain extends Component {
                         <HootSearch />
                         <HootDropdown buttonClassName="'bg-btn'">
                             <t t-set-slot="toggler" t-slot-scope="dropdownState">
-                                <i class="fa fa-cog transition" t-att-class="{ 'rotate-90': dropdownState.open }" />
+                                <i class="oi oi-filled transition" t-att-class="{ 'rotate-90': dropdownState.open }" data-icon="settings" />
                             </t>
                             <t t-set-slot="menu">
                                 <HootConfigMenu />
diff --git a/addons/web/static/lib/hoot/ui/hoot_reporting.js b/addons/web/static/lib/hoot/ui/hoot_reporting.js
index e98d56f99350e4..ca5c916e8d17ec 100644
--- a/addons/web/static/lib/hoot/ui/hoot_reporting.js
+++ b/addons/web/static/lib/hoot/ui/hoot_reporting.js
@@ -197,7 +197,7 @@ export class HootReporting extends Component {
                                             class="flex items-center gap-1 text-emerald"
                                             t-on-click.stop="() => this.filterResults('passed')"
                                         >
-                                            <i class="fa fa-check-circle" />
+                                            <i class="oi oi-filled" data-icon="check_circle" />
                                             <strong t-out="this.runnerReporting.passed" />
                                         </button>
                                         tests passed
@@ -209,7 +209,7 @@ export class HootReporting extends Component {
                                             class="flex items-center gap-1 text-rose"
                                             t-on-click.stop="() => this.filterResults('failed')"
                                         >
-                                            <i class="fa fa-times-circle" />
+                                            <i class="oi oi-filled" data-icon="cancel" />
                                             <strong t-out="this.runnerReporting.failed" />
                                         </button>
                                         tests failed
@@ -221,7 +221,7 @@ export class HootReporting extends Component {
                                             class="flex items-center gap-1 text-cyan"
                                             t-on-click.stop="() => this.filterResults('skipped')"
                                         >
-                                            <i class="fa fa-pause-circle" />
+                                            <i class="oi oi-filled" data-icon="pause_circle" />
                                             <strong t-out="this.runnerReporting.skipped" />
                                         </button>
                                         tests skipped
@@ -233,7 +233,7 @@ export class HootReporting extends Component {
                                             class="flex items-center gap-1 text-purple"
                                             t-on-click.stop="() => this.filterResults('todo')"
                                         >
-                                            <i class="fa fa-exclamation-circle" />
+                                            <i class="oi" data-icon="error" />
                                             <strong t-out="this.runnerReporting.todo" />
                                         </button>
                                         tests to do
diff --git a/addons/web/static/lib/hoot/ui/hoot_search.js b/addons/web/static/lib/hoot/ui/hoot_search.js
index 27c6e3702f78fc..3e574f681b89aa 100644
--- a/addons/web/static/lib/hoot/ui/hoot_search.js
+++ b/addons/web/static/lib/hoot/ui/hoot_search.js
@@ -362,7 +362,7 @@ export class HootSearch extends Component {
                             t-att-disabled="isRunning"
                             t-on-change="this.toggleExact"
                         />
-                        <i class="fa fa-quote-right text-gray transition-colors" />
+                        <i class="oi text-gray transition-colors" data-icon="format_quote" />
                     </label>
                     <label
                         class="hoot-search-icon cursor-pointer p-1"
@@ -377,7 +377,7 @@ export class HootSearch extends Component {
                             t-att-disabled="isRunning"
                             t-on-change="this.toggleRegExp"
                         />
-                        <i class="fa fa-asterisk text-gray transition-colors" />
+                        <i class="oi text-gray transition-colors" data-icon="emergency" />
                     </label>
                     <label
                         class="hoot-search-icon cursor-pointer p-1"
@@ -391,7 +391,7 @@ export class HootSearch extends Component {
                             t-att-disabled="isRunning"
                             t-on-change="this.toggleDebug"
                         />
-                        <i class="fa fa-bug text-gray transition-colors" />
+                        <i class="oi text-gray transition-colors" data-icon="bug_report" />
                     </label>
                 </div>
                 <t t-if="this.state.showDropdown">
diff --git a/addons/web/static/lib/hoot/ui/hoot_side_bar.js b/addons/web/static/lib/hoot/ui/hoot_side_bar.js
index 2e5043b467253d..596d1aaeb8180f 100644
--- a/addons/web/static/lib/hoot/ui/hoot_side_bar.js
+++ b/addons/web/static/lib/hoot/ui/hoot_side_bar.js
@@ -57,11 +57,12 @@ export class HootSideBarSuite extends Component {
     static template = xml`
         <t t-if="this.props.hasSuites">
             <i
-                class="fa fa-chevron-right text-xs transition"
+                class="oi text-xs transition"
                 t-att-class="{
                     'rotate-90': this.props.unfolded,
                     'opacity-25': !this.props.reporting.failed and !this.props.reporting.tests
                 }"
+                data-icon="chevron_right"
             />
         </t>
         <span t-ref="root" t-att-class="this.getClassName()" t-out="this.props.name" />
@@ -167,7 +168,7 @@ export class HootSideBar extends Component {
                         t-att-title="this.state.hideEmpty ? 'Show all suites' : 'Hide other suites'"
                         t-on-click.stop="this.toggleHideEmpty"
                     >
-                        <i t-attf-class="fa fa-{{ this.state.hideEmpty ? 'eye' : 'eye-slash' }}" />
+                        <i class="oi" t-att-data-icon="this.state.hideEmpty ? 'visibility' : 'visibility_off'" />
                     </button>
                 </t>
                 <t t-set="expanded" t-value="this.unfoldedIds.size === this.env.runner.suites.size" />
@@ -177,7 +178,7 @@ export class HootSideBar extends Component {
                     t-attf-title="{{ expanded ? 'Collapse' : 'Expand' }} all"
                     t-on-click.stop="() => this.toggleExpand(expanded)"
                 >
-                    <i t-attf-class="fa fa-{{ expanded ? 'compress' : 'expand' }}" />
+                    <i class="oi" t-att-data-icon="expanded ? 'close_fullscreen' : 'expand_content'" />
                 </button>
             </form>
             <ul class="overflow-x-hidden overflow-y-auto" t-ref="suites-list">
diff --git a/addons/web/static/lib/hoot/ui/hoot_status_panel.js b/addons/web/static/lib/hoot/ui/hoot_status_panel.js
index 557df77096c2a4..7bea5744f97a8a 100644
--- a/addons/web/static/lib/hoot/ui/hoot_status_panel.js
+++ b/addons/web/static/lib/hoot/ui/hoot_status_panel.js
@@ -124,7 +124,7 @@ export class HootStatusPanel extends Component {
                     Ready
                 </t>
                 <t t-elif="this.runnerState.status === 'running'">
-                    <i t-if="this.state.debug" class="text-cyan fa fa-bug" title="Debugging" />
+                    <i t-if="this.state.debug" class="text-cyan oi" data-icon="bug_report" title="Debugging" />
                     <div
                         t-else=""
                         class="animate-spin shrink-0 grow-0 w-4 h-4 border-2 border-emerald border-t-transparent rounded-full"
@@ -141,7 +141,7 @@ export class HootStatusPanel extends Component {
                         <t t-if="this.env.runner.aborted">, run aborted by user</t>)
                     </span>
                     <span class="md:hidden flex items-center gap-1">
-                        <i class="fa fa-clock-o" />
+                        <i class="oi" data-icon="schedule" />
                         <strong class="text-primary" t-out="this.env.runner.totalTime" />
                     </span>
                 </t>
@@ -160,7 +160,7 @@ export class HootStatusPanel extends Component {
                         t-on-click.stop="() => this.filterResults('passed')"
                         t-attf-title="Show {{ this.runnerReporting.passed }} passed tests"
                     >
-                        <i class="fa fa-check-circle" />
+                        <i class="oi oi-filled" data-icon="check_circle" />
                         <t t-out="this.runnerReporting.passed" />
                     </button>
                 </t>
@@ -171,7 +171,7 @@ export class HootStatusPanel extends Component {
                         t-on-click.stop="() => this.filterResults('failed')"
                         t-attf-title="Show {{ this.runnerReporting.failed }} failed tests"
                     >
-                        <i class="fa fa-times-circle" />
+                        <i class="oi oi-filled" data-icon="cancel" />
                         <t t-out="this.runnerReporting.failed" />
                     </button>
                 </t>
@@ -182,7 +182,7 @@ export class HootStatusPanel extends Component {
                         t-on-click.stop="() => this.filterResults('skipped')"
                         t-attf-title="Show {{ this.runnerReporting.skipped }} skipped tests"
                     >
-                        <i class="fa fa-pause-circle" />
+                        <i class="oi oi-filled" data-icon="pause_circle" />
                         <t t-out="this.runnerReporting.skipped" />
                     </button>
                 </t>
@@ -193,7 +193,7 @@ export class HootStatusPanel extends Component {
                         t-on-click.stop="() => this.filterResults('todo')"
                         t-attf-title="Show {{ this.runnerReporting.todo }} tests to do"
                     >
-                        <i class="fa fa-exclamation-circle" />
+                        <i class="oi" data-icon="error" />
                         <t t-out="this.runnerReporting.todo" />
                     </button>
                 </t>
@@ -206,7 +206,7 @@ export class HootStatusPanel extends Component {
                             t-att-disabled="this.uiState.resultsPage === 0"
                             t-on-click.stop="this.previousPage"
                         >
-                            <i class="fa fa-chevron-left" />
+                            <i class="oi" data-icon="chevron_left" />
                         </button>
                         <strong class="text-primary" t-out="this.uiState.resultsPage + 1" />
                         <span class="text-gray">/</span>
@@ -217,7 +217,7 @@ export class HootStatusPanel extends Component {
                             t-att-disabled="this.uiState.resultsPage === lastPage"
                             t-on-click.stop="this.nextPage"
                         >
-                            <i class="fa fa-chevron-right" />
+                            <i class="oi" data-icon="chevron_right" />
                         </button>
                     </div>
                 </t>
diff --git a/addons/web/static/lib/hoot/ui/hoot_style.css b/addons/web/static/lib/hoot/ui/hoot_style.css
index a6566deed41cd3..265617c62e5774 100644
--- a/addons/web/static/lib/hoot/ui/hoot_style.css
+++ b/addons/web/static/lib/hoot/ui/hoot_style.css
@@ -98,15 +98,50 @@ ul {
 }
 
 /*---------------------------------------------------------------------------*/
-/* Font awesome default size                                                 */
+/* Icon default size                                                         */
 /*---------------------------------------------------------------------------*/
 
-.fa {
+.oi {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 0.75rem;
-    height: 0.75rem;
+    font-family: var(--icon-font-family, "material_symbols_sharp");
+    font-style: normal;
+    font-size: var(--oi-font-size, 1em);
+    font-variation-settings: "FILL" var(--o-mi-fill, 0), "opsz" 24;
+    font-weight: 400 !important;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    vertical-align: -11.5%;
+    speak: never;
+    -webkit-font-smoothing: antialiased;
+    -webkit-font-feature-settings: 'liga';
+    -moz-osx-font-smoothing: grayscale;
+    -moz-font-feature-settings: 'liga';
+}
+
+.oi:before {
+    transform: scale(1.214285);
+    display: inline-block;
+    content: attr(data-icon);
+    text-rendering: geometricPrecision;
+    font-size: var(--oi-font-size, 1em);
+}
+
+.oi-filled {
+    --o-mi-fill: 1;
+}
+
+.oi-flip-horizontal {
+    transform: scale(-1, 1);
+}
+
+.oi-flip-vertical {
+    transform: scale(1, -1);
 }
 
 /*---------------------------------------------------------------------------*/
diff --git a/addons/web/static/lib/hoot/ui/hoot_technical_value.js b/addons/web/static/lib/hoot/ui/hoot_technical_value.js
index ef156c0e159d0a..fb891d8a64e531 100644
--- a/addons/web/static/lib/hoot/ui/hoot_technical_value.js
+++ b/addons/web/static/lib/hoot/ui/hoot_technical_value.js
@@ -116,7 +116,7 @@ export class HootTechnicalValue extends Component {
                 >
                     <t t-if="labelSize[1] > 0">
                         <i
-                            class="fa fa-caret-right"
+                            class="oi" data-icon="arrow_right"
                             t-att-class="{ 'rotate-90': this.state.open }"
                         />
                     </t>
diff --git a/addons/web/static/lib/hoot/ui/hoot_test_result.js b/addons/web/static/lib/hoot/ui/hoot_test_result.js
index 86cad9593c438f..7063baebad5ebf 100644
--- a/addons/web/static/lib/hoot/ui/hoot_test_result.js
+++ b/addons/web/static/lib/hoot/ui/hoot_test_result.js
@@ -94,7 +94,7 @@ const DOC_URL = `https://www.odoo.com/documentation/18.0/developer/reference/fro
 
 const ERROR_TEMPLATE = /* xml */ `
     <div class="text-rose flex items-center gap-1 px-2 truncate">
-        <i class="fa fa-exclamation" />
+        <i class="oi" data-icon="priority_high" />
         <strong t-esc="event.label" />
         <span class="flex truncate" t-esc="event.message.join(' ')" />
     </div>
@@ -114,7 +114,7 @@ const EVENT_TEMPLATE = /* xml */ `
             <t t-esc="event.number + '.'" />
         </t>
         <t t-else="">
-            <i class="fa" t-att-class="eventIcon" />
+            <i class="oi" t-att-class="eventIconClass" t-att-data-icon="eventIcon" />
         </t>
         <a
             class="hover:text-primary flex gap-1 items-center"
@@ -123,9 +123,9 @@ const EVENT_TEMPLATE = /* xml */ `
             target="_blank"
         >
             <t t-if="event.flags">
-                <i t-if="event.hasFlag('rejects')" class="fa fa-times" />
-                <i t-elif="event.hasFlag('resolves')" class="fa fa-arrow-right" />
-                <i t-if="event.hasFlag('not')" class="fa fa-exclamation" />
+                <i t-if="event.hasFlag('rejects')" class="oi" data-icon="close" />
+                <i t-elif="event.hasFlag('resolves')" class="oi" data-icon="arrow_forward" />
+                <i t-if="event.hasFlag('not')" class="oi" data-icon="priority_high" />
             </t>
             <strong t-esc="event.label" />
         </a>
@@ -269,6 +269,7 @@ export class HootTestResult extends Component {
                         <t t-foreach="this.filteredEvents[index]" t-as="event" t-key="event_index">
                             <t t-set="sType" t-value="this.getTypeName(event.type)" />
                             <t t-set="eventIcon" t-value="this.CASE_EVENT_TYPES[sType].icon" />
+                            <t t-set="eventIconClass" t-value="this.CASE_EVENT_TYPES[sType].icon_class" />
                             <t t-set="eventColor" t-value="
                                 'pass' in event ?
                                     (event.pass ? 'emerald' : 'rose') :
diff --git a/addons/web/static/lib/hoot/ui/setup_hoot_ui.js b/addons/web/static/lib/hoot/ui/setup_hoot_ui.js
index c1472c4aca64d0..67b9dd44c00dd4 100644
--- a/addons/web/static/lib/hoot/ui/setup_hoot_ui.js
+++ b/addons/web/static/lib/hoot/ui/setup_hoot_ui.js
@@ -175,7 +175,7 @@ export async function setupHootUI() {
 
         container.shadowRoot.append(
             createStyleElement(colorStyleContent),
-            createLinkElement("/web/static/src/libs/fontawesome/css/font-awesome.css"),
+            createLinkElement("/web/static/src/libs/materialsymbols/materialsymbols.css"),
             prismStyleLink,
             // Hoot-specific style is loaded last to take priority over other stylesheets
             createLinkElement("/web/static/lib/hoot/ui/hoot_style.css")
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 89e106a6ae03e9..1fda0e5a6be448 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 a5bc26b36cc756..a2c998d513a1a6 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/odoo_ui_icons.css b/addons/web/static/lib/odoo_ui_icons/odoo_ui_icons.css
new file mode 100644
index 00000000000000..d2f2f6e05ce169
--- /dev/null
+++ b/addons/web/static/lib/odoo_ui_icons/odoo_ui_icons.css
@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'odoo_ui_icons';
+  src: /* see web.odoo_ui_icons asset */
+    url('/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2') format('woff2'),
+    url('/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
diff --git a/addons/web/static/lib/odoo_ui_icons/style.css b/addons/web/static/lib/odoo_ui_icons/style.css
deleted file mode 100644
index 53bdcf87ab5190..00000000000000
--- a/addons/web/static/lib/odoo_ui_icons/style.css
+++ /dev/null
@@ -1,113 +0,0 @@
-@font-face {
-  font-family: 'odoo_ui_icons';
-  src: /* see web.odoo_ui_icons asset */
-    url('/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2') format('woff2'),
-    url('/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-
-.oi {
-  display: inline-block;
-  font-family: 'odoo_ui_icons' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.oi-view-pivot:before { content: '\e800'; }
-.oi-text-break:before { content: '\e801'; }
-.oi-text-inline:before { content: '\e802'; }
-.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-text-wrap:before { content: '\e815'; }
-.oi-view-cohort:before { content: '\e816'; }
-.oi-view-list:before { content: '\e817'; }
-.oi-gif-picker:before { content: '\e82e'; }
-.oi-chevron-down:before { content: '\e839'; }
-.oi-chevron-left:before { content: '\e83a'; }
-.oi-chevron-right:before { content: '\e83b'; }
-.oi-chevron-up:before { content: '\e83c'; }
-.oi-arrows-h:before { content: '\e83d'; }
-.oi-arrows-v:before { content: '\e83e'; }
-.oi-arrow-down-left:before { content: '\e83f'; }
-.oi-arrow-down-right:before { content: '\e840'; }
-.oi-arrow-down:before { content: '\e841'; }
-.oi-arrow-left:before { content: '\e842'; }
-.oi-arrow-right:before { content: '\e843'; }
-.oi-arrow-up-left:before { content: '\e844'; }
-.oi-arrow-up-right:before { content: '\e845'; }
-.oi-arrow-up:before { content: '\e846'; }
-.oi-draggable:before { content: '\e847'; }
-.oi-view:before { content: '\e861'; }
-.oi-archive:before { content: '\e862'; }
-.oi-unarchive:before { content: '\e863'; }
-.oi-text-effect:before { content: '\e827'; }
-.oi-smile-add:before { content: '\e84e'; }
-.oi-close:before { content: '\e852'; }
-.oi-food-delivery:before { content: '\e82a'; }
-.oi-schedule-today:before { content: '\e82c'; }
-.oi-schedule-tomorrow:before { content: '\e82d'; }
-.oi-schedule-later:before { content: '\e804'; }
-.oi-activity:before { content: '\e82f'; }
-.oi-activity-plus:before { content: '\e830'; }
-.oi-numpad:before { content: '\e833'; }
-.oi-transfer:before { content: '\e834'; }
-.oi-suitcase:before { content: '\e835'; }
-.oi-suitcase-plus:before { content: '\e832'; }
-.oi-merge:before { content: '\e836'; }
-.oi-record:before { content: '\e837'; }
-.oi-backspace-o:before { content: '\e838'; }
-.oi-user:before { content: '\e805'; }
-.oi-user-plus:before { content: '\e831'; }
-.oi-users:before { content: '\e807'; }
-.oi-ellipsis-h:before { content: '\e867'; }
-.oi-ellipsis-v:before { content: '\e868'; }
-.oi-plus:before { content: '\e809'; }
-.oi-minus:before { content: '\e80b'; }
-.oi-star-plus:before { content: '\e87c'; }
-.oi-subtitle:before { content: '\e80e'; }
-.oi-threads:before { content: '\e818'; }
-.oi-kickstarter:before { content: '\e819'; }
-.oi-x:before { content: '\e81a'; }
-.oi-x-square:before { content: '\e848'; }
-.oi-tiktok:before { content: '\e81b'; }
-.oi-bluesky:before { content: '\e81c'; }
-.oi-google-play:before { content: '\e81d'; }
-.oi-strava:before { content: '\e80f'; }
-.oi-discord:before { content: '\e811'; }
-.oi-bring-front:before { content: '\e84c'; }
-.oi-send-back:before { content: '\e84d'; }
-.oi-life-ring-plus:before { content: '\e849'; }
-.oi-phone-in-talk:before { content: '\e850'; }
-.oi-phone-times:before { content: '\e851'; }
-
-/* RTL adaptations. */
-/* Flip directional icons by 180 degree. */
-/* ---------------------------------------------------------------------------- */
-.o_rtl .oi-chevron-left,
-.o_rtl .oi-chevron-right,
-.o_rtl .oi-arrow-down-left,
-.o_rtl .oi-arrow-down-right,
-.o_rtl .oi-arrow-left,
-.o_rtl .oi-arrow-right,
-.o_rtl .oi-arrow-up-left,
-.o_rtl .oi-arrow-up-right {
-  transform: rotate(180deg);
-}
diff --git a/addons/web/static/src/core/action_swiper/action_swiper.js b/addons/web/static/src/core/action_swiper/action_swiper.js
index 3179393f932694..76c31680ad381e 100644
--- a/addons/web/static/src/core/action_swiper/action_swiper.js
+++ b/addons/web/static/src/core/action_swiper/action_swiper.js
@@ -30,6 +30,7 @@ export class ActionSwiper extends Component {
             shape: {
                 action: { type: Function, optional: true },
                 icon: { type: String, optional: true },
+                icon_class: { type: String, optional: true },
                 bgColor: { type: String, optional: true },
                 slot: { type: Object, optional: true },
             },
@@ -40,6 +41,7 @@ export class ActionSwiper extends Component {
             shape: {
                 action: { type: Function, optional: true },
                 icon: { type: String, optional: true },
+                icon_class: { type: String, optional: true },
                 bgColor: { type: String, optional: true },
                 slot: { type: Object, optional: true },
             },
diff --git a/addons/web/static/src/core/action_swiper/action_swiper.xml b/addons/web/static/src/core/action_swiper/action_swiper.xml
index e5cc438bb20e45..b70d49777fbf2b 100644
--- a/addons/web/static/src/core/action_swiper/action_swiper.xml
+++ b/addons/web/static/src/core/action_swiper/action_swiper.xml
@@ -12,7 +12,7 @@
                                     <t t-if="this.localizedProps.onRightSwipe.slot" t-component="this.localizedProps.onRightSwipe.slot.component" t-props="this.localizedProps.onRightSwipe.slot.props" />
                                 </t>
                                 <div t-else="" class="h-100 w-100 d-flex align-items-center justify-content-center rounded-end" t-att-class="this.localizedProps.onRightSwipe.bgColor">
-                                    <i class="fa fa-2x" t-att-class="this.localizedProps.onRightSwipe.icon"/>
+                                    <i class="oi oi-2x" t-att-class="this.localizedProps.onRightSwipe.icon_class" t-att-data-icon="this.localizedProps.onRightSwipe.icon"/>
                                 </div>
                             </div>
                         </t>
@@ -22,7 +22,7 @@
                                     <t t-if="this.localizedProps.onLeftSwipe.slot" t-component="this.localizedProps.onLeftSwipe.slot.component" t-props="this.localizedProps.onLeftSwipe.slot.props" />
                                 </t>
                                 <div t-else="" class="h-100 w-100 d-flex align-items-center justify-content-center rounded-start" t-att-class="this.localizedProps.onLeftSwipe.bgColor">
-                                    <i class="fa fa-2x" t-att-class="this.localizedProps.onLeftSwipe.icon"/>
+                                    <i class="oi oi-2x" t-att-class="this.localizedProps.onLeftSwipe.icon_class" t-att-data-icon="this.localizedProps.onLeftSwipe.icon"/>
                                 </div>
                             </div>
                         </t>
diff --git a/addons/web/static/src/core/autocomplete/autocomplete.xml b/addons/web/static/src/core/autocomplete/autocomplete.xml
index 6e2e7f4acd1437..8d716c37a346e8 100644
--- a/addons/web/static/src/core/autocomplete/autocomplete.xml
+++ b/addons/web/static/src/core/autocomplete/autocomplete.xml
@@ -44,7 +44,7 @@
                                     class="o_loading dropdown-item ui-menu-item-wrapper"
                                     aria-selected="true"
                                 >
-                                    <i class="fa fa-spin fa-circle-o-notch" /> <t t-out="source.placeholder" />
+                                    <i class="oi oi-spin" data-icon="autorenew" /> <t t-out="source.placeholder" />
                                 </a>
                             </li>
                         </t>
diff --git a/addons/web/static/src/core/barcode/barcode_dialog.xml b/addons/web/static/src/core/barcode/barcode_dialog.xml
index 570d3d53cdf155..aeef905c4aa389 100644
--- a/addons/web/static/src/core/barcode/barcode_dialog.xml
+++ b/addons/web/static/src/core/barcode/barcode_dialog.xml
@@ -6,7 +6,7 @@
                                  t-props="this.props" onError.bind="this.onError" onResult.bind="this.onResult"/>
             <div t-else="" t-custom-ref="videoPreview"
                  class="h-100 d-flex flex-column justify-content-center align-items-center gap-1">
-                <i class="fa fa-2x fa-camera text-muted"></i>
+                <i class="oi-2x text-muted" data-icon="photo_camera"></i>
                 <strong>Unable to access camera</strong>
                 <span class="text-center text-muted" t-out="this.state.errorMessage"/>
             </div>
diff --git a/addons/web/static/src/core/bottom_sheet/bottom_sheet.scss b/addons/web/static/src/core/bottom_sheet/bottom_sheet.scss
index 826248baf7dbb0..0dd4144c047122 100644
--- a/addons/web/static/src/core/bottom_sheet/bottom_sheet.scss
+++ b/addons/web/static/src/core/bottom_sheet/bottom_sheet.scss
@@ -214,10 +214,10 @@
             @include o-position-absolute(50%, $list-group-item-padding-x);
             transform: translateY(-50%);
             color: $o-action;
-            // .fa
+            // .oi
             text-rendering: auto;
-            font: normal normal normal 14px/1 FontAwesome;
-            // .fa-check
+            font: normal normal normal 14px/1 'material_symbols_sharp';
+            // [data-icon="check"]
             content: "";
         }
     }
@@ -263,15 +263,13 @@
 
             @include o-position-absolute(var(--dropdown-item-padding-y), $list-group-item-padding-x);
             padding-block: map-get($spacers, 2);
-            // .fa
+            // .oi
             text-rendering: auto;
-            font: normal normal normal 14px/1 FontAwesome;
-            // .fa-caret-down
-            content: "\f0d7";
+            font: normal normal normal 14px/1 'material_symbols_sharp';
+            content: "arrow_drop_down";
         }
         &.open::after {
-            // .fa-caret-up
-            content: "\f0d8";
+            content: "arrow_drop_up";
         }
     }
 
diff --git a/addons/web/static/src/core/color_picker/color_picker.scss b/addons/web/static/src/core/color_picker/color_picker.scss
index 2c3dabb5ee3732..79317d333083f7 100644
--- a/addons/web/static/src/core/color_picker/color_picker.scss
+++ b/addons/web/static/src/core/color_picker/color_picker.scss
@@ -85,10 +85,10 @@ $o-we-color-success: #00ff9e !default;
 
 .color-combination-button.selected h1 {
     &::before {
-        content: "\f00c";
+        content: "check";
         margin-right: $o-we-item-spacing;
         font-size: 0.8em;
-        font-family: FontAwesome;
+        font-family: 'material_symbols_sharp';
         color: $o-we-color-success;
     }
 }
diff --git a/addons/web/static/src/core/color_picker/color_picker.xml b/addons/web/static/src/core/color_picker/color_picker.xml
index 94631cf1e9c564..b598191e7077c9 100644
--- a/addons/web/static/src/core/color_picker/color_picker.xml
+++ b/addons/web/static/src/core/color_picker/color_picker.xml
@@ -8,7 +8,7 @@
                 <Dropdown>
                     <button class="btn btn-light d-flex justify-content-between w-100 border border-dark">
                         <span class="px-1" t-out="this.state.activeTab"/>
-                        <i class="fa fa-caret-down ms-2"/>
+                        <i class="oi ms-2" data-icon="arrow_drop_down"/>
                     </button>
                     <t t-set-slot="content">
                         <t t-foreach="this.tabs" t-as="item" t-key="item.id">
@@ -29,7 +29,8 @@
                 </t>
             </t>
             <div class="flex-grow-1" />
-            <button t-attf-class="btn btn-sm fa fa-trash #{ this.isDarkTheme ? 'btn-secondary' : 'btn-light'}"
+            <button t-attf-class="btn btn-sm oi oi-filled #{ this.isDarkTheme ? 'btn-secondary' : 'btn-light'}"
+                    data-icon="delete"
                     title="Reset"
                     t-on-click="this.onColorApply"
                     t-on-mouseover="this.onColorHover"
diff --git a/addons/web/static/src/core/colorlist/colorlist.scss b/addons/web/static/src/core/colorlist/colorlist.scss
index 536707d6d073da..2df73081975589 100644
--- a/addons/web/static/src/core/colorlist/colorlist.scss
+++ b/addons/web/static/src/core/colorlist/colorlist.scss
@@ -36,8 +36,8 @@
                 justify-content: center;
                 align-items: center;
                 color: var(--color, #{$body-color});
-                font: normal normal normal 1em/1 FontAwesome;
-                content: "\f00c";
+                font: normal normal normal var(--ColorListField-Entry-minWidth, o-to-rem(20px))/1 "material_symbols_sharp";
+                content: "check";
             }
         }
 
diff --git a/addons/web/static/src/core/commands/command_palette.xml b/addons/web/static/src/core/commands/command_palette.xml
index 36eae047108040..5206cc2b10afde 100644
--- a/addons/web/static/src/core/commands/command_palette.xml
+++ b/addons/web/static/src/core/commands/command_palette.xml
@@ -14,8 +14,8 @@
               aria-haspopup="listbox"
           />
           <div class="input-group-text border-0 bg-transparent">
-              <i t-if="this.state.isLoading" title="Loading..." role="img" aria-label="Loading..." class="fa fa-circle-o-notch fa-spin"/>
-              <i t-else="" t-att-title="this.state.placeholder" role="img"  t-att-aria-label="this.state.placeholder" class="oi oi-search"/>
+              <i t-if="this.state.isLoading" title="Loading..." role="img" aria-label="Loading..." class="oi oi-spin" data-icon="autorenew"/>
+              <i t-else="" t-att-title="this.state.placeholder" role="img"  t-att-aria-label="this.state.placeholder" class="oi" data-icon="search"/>
           </div>
         </div>
 
diff --git a/addons/web/static/src/core/copy_button/copy_button.js b/addons/web/static/src/core/copy_button/copy_button.js
index 756e87a1c0fb69..17a3799bc69e10 100644
--- a/addons/web/static/src/core/copy_button/copy_button.js
+++ b/addons/web/static/src/core/copy_button/copy_button.js
@@ -12,6 +12,7 @@ export class CopyButton extends Component {
         disabled: { type: Boolean, optional: true },
         successText: { type: String, optional: true },
         icon: { type: String, optional: true },
+        icon_class: { type: String, optional: true },
         content: { type: [String, Object, Function], optional: true },
     };
 
diff --git a/addons/web/static/src/core/copy_button/copy_button.xml b/addons/web/static/src/core/copy_button/copy_button.xml
index 7842286747d384..08617ec9256e44 100644
--- a/addons/web/static/src/core/copy_button/copy_button.xml
+++ b/addons/web/static/src/core/copy_button/copy_button.xml
@@ -10,7 +10,7 @@
             t-attf-class="btn o_clipboard_button {{ this.props.className || '' }}"
             t-on-click.stop="this.onClick"
         >
-            <span class="mx-1" t-attf-class="fa {{ this.props.icon || 'fa-clipboard' }}"/>
+            <span class="oi mx-1" t-att-class="this.props.icon_class" t-attf-data-icon="{{ this.props.icon || 'assignment' }}"/>
             <span t-if="this.props.copyText" t-out="this.props.copyText"/>
         </button>
     </t>
diff --git a/addons/web/static/src/core/datetime/datetime_picker.xml b/addons/web/static/src/core/datetime/datetime_picker.xml
index 6aac4814d68ae1..5123e014f8783a 100644
--- a/addons/web/static/src/core/datetime/datetime_picker.xml
+++ b/addons/web/static/src/core/datetime/datetime_picker.xml
@@ -60,7 +60,7 @@
                     showSeconds="this.props.rounding === 0"
                     inputCssClass="'o_input'"
                 />
-                <i t-if="this.state.timeValues[0] and this.state.timeValues[1]" class="fa fa-long-arrow-right"/>
+                <i t-if="this.state.timeValues[0] and this.state.timeValues[1]" class="oi" data-icon="east"/>
                 <TimePicker
                     t-if="this.state.timeValues[1]"
                     value="this.state.timeValues[1]"
@@ -110,7 +110,7 @@
                     tabindex="-1"
                     data-available-offline=""
                 >
-                    <i class="oi oi-chevron-left" t-att-title="this.activePrecisionLevel.prevTitle" />
+                    <i class="oi" data-icon="chevron_backward" t-att-title="this.activePrecisionLevel.prevTitle" />
                 </button>
                 <button
                     class="o_next btn btn-sm opacity-75 opacity-100-hover"
@@ -118,7 +118,7 @@
                     tabindex="-1"
                     data-available-offline=""
                 >
-                    <i class="oi oi-chevron-right" t-att-title="this.activePrecisionLevel.nextTitle" />
+                    <i class="oi" data-icon="chevron_forward" t-att-title="this.activePrecisionLevel.nextTitle" />
                 </button>
                 <button
                     class="o_zoom_out o_datetime_button btn opacity-75 opacity-100-hover text-truncate"
diff --git a/addons/web/static/src/core/datetime/datetime_picker_popover.xml b/addons/web/static/src/core/datetime/datetime_picker_popover.xml
index 60a3a844c19b7e..20326b94a57035 100644
--- a/addons/web/static/src/core/datetime/datetime_picker_popover.xml
+++ b/addons/web/static/src/core/datetime/datetime_picker_popover.xml
@@ -11,7 +11,7 @@
                         t-on-click="this.props.pickerProps.onReset"
                         data-available-offline=""
                     >
-                        <i class="fa fa-eraser" />
+                        <i class="oi" data-icon="ink_eraser" />
                     </button>
                     <button
                         class="btn btn-sm btn-primary"
diff --git a/addons/web/static/src/core/debug/debug_menu.xml b/addons/web/static/src/core/debug/debug_menu.xml
index 04b9155b5d7e65..411b95fd079cbc 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 @@
                 position="'bottom-end'"
             >
                 <button t-att-class="`o-dropdown--narrow ${this.env.inDialog?'btn btn-link':''}`">
-                    <i class="fa fa-bug" role="img" aria-label="Open developer tools"/>
+                    <i class="oi oi-lg" data-icon="bug_report" role="img" aria-label="Open developer tools"/>
                 </button>
                 <t t-set-slot="content">
                     <t t-foreach="this.sectionEntries" t-as="entry" t-key="entry[0]">
diff --git a/addons/web/static/src/core/dialog/dialog.scss b/addons/web/static/src/core/dialog/dialog.scss
index 6defe5203bbaac..3cc932be43ac39 100644
--- a/addons/web/static/src/core/dialog/dialog.scss
+++ b/addons/web/static/src/core/dialog/dialog.scss
@@ -108,7 +108,7 @@
             }
 
             .modal-header {
-                button.oi-arrow-left, .o_expand_button {
+                button[data-icon="west"], .o_expand_button {
                     // Use BS default btn-close padding logic
                     padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
                 }
@@ -118,7 +118,7 @@
                     margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
                 }
 
-                button.oi-arrow-left {
+                button[data-icon="west"] {
                     // Invert BS default btn-close margin logic
                     margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x));
                 }
diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index 5dffbc610036dc..5b400dba1679f5 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -33,13 +33,15 @@
 
     <t t-name="web.Dialog.header">
         <t t-if="fullscreen">
-            <button class="btn oi oi-arrow-left oi-large" aria-label="Close" tabindex="-1" t-on-click="dismiss" data-available-offline=""/>
+            <button class="btn oi oi-lg" data-icon="west" aria-label="Close" tabindex="-1" t-on-click="dismiss" data-available-offline=""/>
         </t>
         <h4 class="modal-title text-wrap text-break fs-3 flex-grow-1" t-att-class="{ 'me-auto ms-3': fullscreen }">
             <t t-out="window.String(this.props.title)"/>
         </h4>
         <t t-if="onExpand">
-            <button type="button" class="fa fa-expand btn opacity-50 opacity-100-hover o_expand_button" aria-label="Expand" tabindex="-1" t-on-click="onExpand" data-available-offline=""/>
+            <button type="button" class="btn opacity-50 opacity-100-hover o_expand_button" aria-label="Expand" tabindex="-1" t-on-click="onExpand" data-available-offline="">
+                <i class="oi oi-lg" data-icon="expand_content"/>
+            </button>
         </t>
         <t t-if="!fullscreen">
             <button type="button" class="btn-close" title="Close" t-att-class="{'position-sm-absolute top-0 end-0': this.design == 'minimal' and !onExpand }" aria-label="Close" tabindex="-1" t-on-click="dismiss" data-available-offline=""/>
diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index 16ece6e3382789..1b0a2229959e29 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -40,8 +40,8 @@
         gap: 5px;
 
         &:after {
-            content: "\f0d7";
-            font-family: FontAwesome;
+            content: "arrow_drop_down";
+            font-family: 'material_symbols_sharp';
             display: inline-block;
             margin-left: auto;
 
diff --git a/addons/web/static/src/core/dropzone/dropzone.xml b/addons/web/static/src/core/dropzone/dropzone.xml
index 7377cdcaf6ec15..47e2a722b36649 100644
--- a/addons/web/static/src/core/dropzone/dropzone.xml
+++ b/addons/web/static/src/core/dropzone/dropzone.xml
@@ -11,7 +11,7 @@
         t-custom-ref="root"
     >
         <t t-slot="default">
-            <h4>Drag Files Here <i class="fa fa-download"/></h4>
+            <h4>Drag Files Here <i class="oi oi-fw" data-icon="download"/></h4>
         </t>
     </div>
 </t>
diff --git a/addons/web/static/src/core/emoji_picker/emoji_picker.scss b/addons/web/static/src/core/emoji_picker/emoji_picker.scss
index ccbcde60021c6f..f0f07317e2d478 100644
--- a/addons/web/static/src/core/emoji_picker/emoji_picker.scss
+++ b/addons/web/static/src/core/emoji_picker/emoji_picker.scss
@@ -56,7 +56,7 @@
 
     .o-EmojiPicker-sectionIcon + small,
     .o-EmojiPicker-empty + span,
-    .o-EmojiPicker-search input:focus + .oi-search {
+    .o-EmojiPicker-search input:focus + [data-icon="search"] {
         color: var(--EmojiPicker-text-color, $text-muted);
     }
 
@@ -91,7 +91,7 @@
             color: var(--EmojiPicker-text-color, $input-placeholder-color);
         }
 
-        & + .oi-search {
+        & + [data-icon="search"] {
             color: var(--EmojiPicker-text-color, $body-color);
         }
     }
diff --git a/addons/web/static/src/core/emoji_picker/emoji_picker.xml b/addons/web/static/src/core/emoji_picker/emoji_picker.xml
index 19ad018d8a07d5..274d9a1a706d39 100644
--- a/addons/web/static/src/core/emoji_picker/emoji_picker.xml
+++ b/addons/web/static/src/core/emoji_picker/emoji_picker.xml
@@ -19,7 +19,7 @@
                         <t t-if="this.props.state" t-set="localState" t-value="this.props.state" />
                         <t t-else="" t-set="localState" t-value="this.state" />
                     </t>
-                    <i class="oi oi-search px-2 py-1 fs-7 rounded-start-0 rounded-3 o-active opacity-50" title="Search..." role="img" aria-label="Search..."/>
+                    <i class="oi px-2 py-1 fs-7 rounded-start-0 rounded-3 o-active opacity-50" data-icon="search" title="Search..." role="img" aria-label="Search..."/>
                 </span>
             </div>
             <t t-set="itemIndex" t-value="0"/>
@@ -107,9 +107,9 @@
         t-on-click="this.onClickToNextCategories"
     >
         <span class="position-relative">
-            <i class="oi oi-chevron-right fa-fw smaller opacity-0"/>
-            <i class="oi oi-chevron-right fa-fw smaller position-absolute opacity-75" style="left: 3px; transform: translateY(75%);"/>
-            <i class="oi oi-chevron-right fa-fw smaller position-absolute opacity-75" style="left: -3px; transform: translateY(75%);"/>
+            <i class="oi oi-fw smaller opacity-0" data-icon="chevron_forward"/>
+            <i class="oi oi-fw smaller position-absolute opacity-75" data-icon="chevron_forward" style="left: 3px; transform: translateY(75%);"/>
+            <i class="oi oi-fw smaller position-absolute opacity-75" data-icon="chevron_forward" style="left: -3px; transform: translateY(75%);"/>
         </span>
     </span>
 </t>
@@ -121,9 +121,9 @@
         t-on-click="this.onClickToPreviousCategories"
     >
         <span class="position-relative">
-            <i class="oi oi-chevron-left fa-fw smaller opacity-0"/>
-            <i class="oi oi-chevron-left fa-fw smaller position-absolute opacity-75" style="left: 3px; transform: translateY(75%);"/>
-            <i class="oi oi-chevron-left fa-fw smaller position-absolute opacity-75" style="left: -3px; transform: translateY(75%);"/>
+            <i class="oi oi-fw smaller opacity-0" data-icon="chevron_backward"/>
+            <i class="oi oi-fw smaller position-absolute opacity-75" data-icon="chevron_backward" style="left: 3px; transform: translateY(75%);"/>
+            <i class="oi oi-fw smaller position-absolute opacity-75" data-icon="chevron_backward" style="left: -3px; transform: translateY(75%);"/>
         </span>
     </span>
 </t>
diff --git a/addons/web/static/src/core/errors/error_dialogs.xml b/addons/web/static/src/core/errors/error_dialogs.xml
index 06c6459d62bc76..e9546c0cfdc230 100644
--- a/addons/web/static/src/core/errors/error_dialogs.xml
+++ b/addons/web/static/src/core/errors/error_dialogs.xml
@@ -60,7 +60,7 @@
                     <summary class="mb-1 link-info"><span t-out="this.state.showTraceback ? this.constructor.hideTracebackButtonText : this.constructor.showTracebackButtonText"/><span t-if="!this.state.showTraceback" t-out="`(${this.logDate})`" class="ms-1 text-400 small"/></summary>
                     <div class="text-bg-100 clearfix mt-2 position-relative o_error_detail pb-2">
                         <button class="btn position-absolute top-0 end-0 pt-2 btn-link link-body-emphasis" t-custom-ref="copyButton" t-on-click="this.onClickClipboard" data-available-offline="">
-                            <span class="fa fa-clipboard"/>
+                            <span class="oi" data-icon="assignment"/>
                         </button>
                         <div class="ps-1 pt-1 ps-md-3 pt-md-3">
                             <p class="m-0"><b t-out="this.title or this.constructor.title"></b></p>
diff --git a/addons/web/static/src/core/file_upload/file_upload_progress_bar.xml b/addons/web/static/src/core/file_upload/file_upload_progress_bar.xml
index 055fadb774299e..d1a5ade3976765 100644
--- a/addons/web/static/src/core/file_upload/file_upload_progress_bar.xml
+++ b/addons/web/static/src/core/file_upload/file_upload_progress_bar.xml
@@ -3,7 +3,7 @@
     <t t-name="web.FileUploadProgressBar">
         <div class="position-absolute top-0 start-0 h-100 w-100">
             <div class="o-file-upload-progress-bar-value h-100" t-custom-ref="bar" t-att-style="'width: ' + (this.props.fileUpload.progress * 100) + '%;'"/>
-            <span class="position-absolute top-0 end-0 cursor-pointer o-file-upload-progress-bar-abort fa fa-times-circle" title="Cancel Upload" aria-label="Cancel Upload" t-on-click.stop.prevent="this.onCancel"/>
+            <span class="position-absolute top-0 end-0 cursor-pointer o-file-upload-progress-bar-abort oi oi-filled" data-icon="cancel" title="Cancel Upload" aria-label="Cancel Upload" t-on-click.stop.prevent="this.onCancel"/>
         </div>
     </t>
 </templates>
diff --git a/addons/web/static/src/core/file_viewer/file_viewer.xml b/addons/web/static/src/core/file_viewer/file_viewer.xml
index 17e8334310ad90..cbe698015f623d 100644
--- a/addons/web/static/src/core/file_viewer/file_viewer.xml
+++ b/addons/web/static/src/core/file_viewer/file_viewer.xml
@@ -6,10 +6,10 @@
             <div class="o-FileViewer flex-column align-items-center d-flex w-100 h-100" tabindex="0" t-custom-ref="autofocus" t-on-keydown.stop="(ev) => this.onKeydown(ev)">
                 <div class="o-FileViewer-header position-absolute top-0 d-flex w-100" t-on-click.stop="">
                     <div t-if="this.isViewable" class="d-flex align-items-center ms-4 me-2">
-                        <i t-if="this.state.file.isImage" class="fa fa-picture-o" role="img" title="Image"/>
-                        <i t-if="this.state.file.isPdf" class="fa fa-file-text" role="img" title="PDF file"/>
-                        <i t-if="this.state.file.isText" class="fa fa-file-text" role="img" title="Text file"/>
-                        <i t-if="this.state.file.isVideo" class="fa fa-video-camera" role="img" title="Video"/>
+                        <i t-if="this.state.file.isImage" class="oi" data-icon="image" role="img" title="Image"/>
+                        <i t-if="this.state.file.isPdf" class="oi oi-filled" data-icon="article" role="img" title="PDF file"/>
+                        <i t-if="this.state.file.isText" class="oi oi-filled" data-icon="article" role="img" title="Text file"/>
+                        <i t-if="this.state.file.isVideo" class="oi oi-filled" data-icon="videocam" role="img" title="Video"/>
                     </div>
                     <div class="d-flex align-items-center ms-4 overflow-auto">
                         <span class="text-truncate" t-out="this.state.file.name"/>
@@ -17,19 +17,19 @@
                     <div class="flex-grow-1"/>
                     <div class="o-FileViewer-download o-FileViewer-headerButton d-flex align-items-center px-3 cursor-pointer" role="button" title="Download" t-on-click.stop="">
                         <a t-att-href="this.state.file.downloadUrl" class="text-reset d-flex align-items-baseline" download="">
-                            <i class="fa fa-download fa-fw me-1" role="img"/>
+                            <i class="oi oi-fw me-1" data-icon="download" role="img"/>
                             <span>Download</span>
                         </a>
                     </div>
 
                     <div t-on-click.stop="this.close" class="o-FileViewer-headerButton d-flex align-items-center mb-0 px-3 h4 text-reset cursor-pointer" role="button" title="Close (Esc)" aria-label="Close">
-                        <i class="fa fa-fw fa-times" role="img"/>
+                        <i class="oi oi-fw" data-icon="close" role="img"/>
                     </div>
                 </div>
                 <div t-on-click.stop="this.close" t-on-mousemove="this.onMouseMoveImage" t-on-touchmove.prevent="this.onTouchMoveImage" class="o-FileViewer-main position-absolute top-0 bottom-0 start-0 end-0 align-items-center justify-content-center d-flex" t-att-class="{ 'o_with_img overflow-hidden': this.state.file.isImage }">
                     <div t-if="this.state.file.isImage" class="o-FileViewer-zoomer position-absolute align-items-center justify-content-center d-flex w-100 h-100" t-custom-ref="zoomer">
                         <div t-if="!this.state.imageLoaded" class="position-absolute">
-                            <i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin text-white" role="img" title="Loading"/>
+                            <i class="oi oi-3x oi-fw oi-spin text-white" data-icon="autorenew" role="img" title="Loading"/>
                         </div>
                         <img t-on-click.stop="" t-on-load="this.onImageLoaded" t-on-wheel="this.onWheelImage" t-on-mousedown.stop="this.onMouseDownImage" t-on-mouseup.stop="this.onMouseUpImage" t-on-touchstart="this.onTouchStartImage" t-on-touchend="this.onTouchEndImage" class="o-FileViewer-view o-FileViewer-viewImage mw-100 mh-100" t-att-class="{'transition-base': !this.hasTouch}" t-att-src="this.state.file.defaultSource" t-att-style="this.imageStyle" draggable="false" alt="Viewer" t-custom-ref="image"/>
                     </div>
@@ -42,32 +42,32 @@
                 </div>
                 <div t-if="this.state.file.isImage" class="position-absolute bottom-0 d-flex" t-custom-ref="imageToolbar" role="toolbar">
                     <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click.stop="this.zoomIn" title="Zoom In (+)" role="button">
-                        <i class="fa fa-fw fa-plus" role="img"/>
+                        <i class="oi oi-fw" data-icon="add" role="img"/>
                     </div>
                     <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': this.state.scale === 1 }" t-on-click.stop="this.resetZoom" role="button" title="Reset Zoom (0)">
-                        <i class="fa fa-fw fa-search" role="img"/>
+                        <i class="oi oi-fw" data-icon="search" role="img"/>
                     </div>
                     <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': this.state.scale === this.minScale }" t-on-click.stop="this.zoomOut" title="Zoom Out (-)" role="button">
-                        <i class="fa fa-fw fa-minus" role="img"/>
+                        <i class="oi oi-fw" data-icon="remove" role="img"/>
                     </div>
                     <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click.stop="this.rotate" title="Rotate (r)" role="button">
-                        <i class="fa fa-fw fa-repeat" role="img"/>
+                        <i class="oi oi-fw" data-icon="redo" role="img"/>
                     </div>
                     <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click.stop="this.onClickPrint" title="Print" role="button">
-                        <i class="fa fa-fw fa-print" role="img"/>
+                        <i class="oi oi-fw" data-icon="print" role="img"/>
                     </div>
                     <div class="o-FileViewer-download o-FileViewer-toolbarButton p-3 rounded-0 cursor-pointer" title="Download" role="button" t-on-click.stop="">
                         <a t-att-href="this.state.file.downloadUrl" class="text-reset" download="">
-                            <i class="fa fa-download fa-fw" role="img"/>
+                            <i class="oi oi-fw" data-icon="download" role="img"/>
                         </a>
                     </div>
                 </div>
                 <t t-if="this.props.files.length > 1">
                     <div class="o-FileViewer-navigation position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle bg-dark text-white" t-on-click.stop="this.previous" title="Previous (Left-Arrow)" aria-label="Previous" role="button">
-                        <span class="oi oi-chevron-left" role="img"/>
+                        <span class="oi" data-icon="chevron_backward" role="img"/>
                     </div>
                     <div class="o-FileViewer-navigation position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle bg-dark text-white" t-on-click.stop="this.next" title="Next (Right-Arrow)" aria-label="Next" role="button">
-                        <span class="oi oi-chevron-right" role="img"/>
+                        <span class="oi" data-icon="chevron_forward" role="img"/>
                     </div>
                 </t>
             </div>
diff --git a/addons/web/static/src/core/install_scoped_app/install_scoped_app.xml b/addons/web/static/src/core/install_scoped_app/install_scoped_app.xml
index 7a4b71a6b2b012..f68202c9f32eb7 100644
--- a/addons/web/static/src/core/install_scoped_app/install_scoped_app.xml
+++ b/addons/web/static/src/core/install_scoped_app/install_scoped_app.xml
@@ -6,7 +6,7 @@
                     <path fill="#000" d="M8 8V1a1 1 0 1 1 2 0v8a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h7z"></path>
                 </svg>
             </button>
-            <i t-if="!this.state.showInstallUI" class="fa fa-circle-o-notch fa-spin fa-2x text-primary position-absolute"/>
+            <i t-if="!this.state.showInstallUI" class="oi oi-spin oi-2x text-primary position-absolute" data-icon="autorenew"/>
             <div t-attf-class="h-100 w-100 d-flex align-items-center justify-content-center flex-column fade {{this.state.showInstallUI ? 'show': ''}}">
                 <div class="d-flex align-items-center justify-content-center flex-wrap gap-3 m-4 mw-75 mw-md-50">
                     <img style="height:100px;width:100px;" class="rounded-4 p-4 bg-white shadow" t-att-src="this.state.manifest.icons?.[0]?.src"/>
@@ -14,7 +14,7 @@
                         <div class="d-flex align-items-center">
                             <h1 class="mb-0" t-out="this.state.manifest.name"></h1>
                             <Dropdown t-if="this.pwa.isAvailable" menuClass="'p-2'">
-                                <button class="btn btn-link fa fa-pencil" />
+                                <button class="btn btn-link oi oi-filled" data-icon="edit" />
                                 <t t-set-slot="content">
                                     <label class="mb-1">Application name</label>
                                     <input class="form-control" t-att-value="this.state.manifest.name" t-on-change="this.onChangeName"/>
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector.xml b/addons/web/static/src/core/model_field_selector/model_field_selector.xml
index 5f52e45a833d24..6a6d6275aea4c5 100644
--- a/addons/web/static/src/core/model_field_selector/model_field_selector.xml
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector.xml
@@ -6,7 +6,7 @@
             <div class="o_model_field_selector_value flex-grow-1 h-100" tabindex="0" t-att-data-tooltip="this.state.displayNames.join(' > ')" data-tooltip-position="top">
                 <t t-foreach="this.state.displayNames" t-as="displayName" t-key="displayName_index">
                     <t t-if="!displayName_first">
-                        <i class="oi oi-chevron-right m-1" role="img" aria-label="Followed by" data-tooltip="Followed by" />
+                        <i class="oi m-1" data-icon="chevron_forward" role="img" aria-label="Followed by" data-tooltip="Followed by" />
                     </t>
                     <span t-attf-class="o_model_field_selector_chain_part text-truncate d-inline-block align-middle mb-1 #{this.props.readonly ? 'border-0 fw-bolder' : 'px-1'}">
                         <t t-out="displayName" />
@@ -14,10 +14,10 @@
                 </t>
             </div>
             <div t-if="!this.props.readonly and this.state.isInvalid" class="o_model_field_selector_controls ms-2" tabindex="0">
-                <i class="fa fa-exclamation-triangle text-warning o_model_field_selector_warning" role="alert"  aria-label="Invalid field chain" data-tooltip="Invalid field chain"/>
+                <i class="oi text-warning o_model_field_selector_warning" data-icon="warning" role="alert"  aria-label="Invalid field chain" data-tooltip="Invalid field chain"/>
             </div>
             <div t-if="!this.props.readonly and this.props.allowEmpty and this.state.displayNames.length" class="o_model_field_selector_controls ms-2" tabindex="0">
-                <i class="fa fa-times" t-on-click.stop="this.clear" aria-label="Clear" data-tooltip="Clear"/>
+                <i class="oi" data-icon="close" t-on-click.stop="this.clear" aria-label="Clear" data-tooltip="Clear"/>
             </div>
         </div>
     </t>
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml
index 6d1fb3bd57eb6b..e21ac0a2894d4d 100644
--- a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml
@@ -6,7 +6,8 @@
             <div class="border-bottom p-2 text-dark fw-bolder">
                 <div class="d-flex justify-content-between align-items-center">
                     <t t-if="this.state.page.previousPage">
-                        <i class="o_model_field_selector_popover_prev_page btn btn-link oi oi-arrow-left ms-n2 text-dark"
+                        <i class="o_model_field_selector_popover_prev_page btn btn-link oi ms-n2 text-dark"
+                        data-icon="west"
                            data-tooltip="Previous"
                            role="img"
                            aria-label="Previous"
@@ -16,7 +17,8 @@
                     <div class="o_model_field_selector_popover_title px-2 text-truncate">
                         <t t-out="this.state.page.title"/>
                     </div>
-                    <i class="o_model_field_selector_popover_close btn btn-link me-n2 fa fa-times text-dark"
+                    <i class="o_model_field_selector_popover_close btn btn-link me-n2 oi text-dark"
+                       data-icon="times"
                        data-tooltip="Close"
                        role="img"
                        aria-label="Close"
@@ -53,7 +55,7 @@
                                     t-att-aria-label="label"
                                     t-on-click.stop="() => this.followRelation(fieldDef)"
                                 >
-                                    <i class="oi oi-chevron-right o_model_field_selector_popover_relation_icon" role="img"/>
+                                    <i class="oi o_model_field_selector_popover_relation_icon" data-icon="chevron_forward" role="img"/>
                                 </button>
                             </t>
                         </li>
diff --git a/addons/web/static/src/core/notebook/notebook.xml b/addons/web/static/src/core/notebook/notebook.xml
index 685175e5fbeba9..5199855bc369fb 100644
--- a/addons/web/static/src/core/notebook/notebook.xml
+++ b/addons/web/static/src/core/notebook/notebook.xml
@@ -7,7 +7,7 @@
                 <ul t-attf-class="nav nav-tabs {{ this.props.orientation === 'horizontal' ? 'flex-row flex-nowrap' : 'flex-column p-0' }}">
                     <li t-foreach="this.navItems" t-as="navItem" t-key="navItem[0]" class="nav-item flex-nowrap" t-if="navItem[1].isVisible" t-attf-class="{{ navItem[1].isDisabled ? 'disabled' : '' }}">
                         <button class="nav-link" t-att-class="{'active position-relative cursor-default z-1': navItem[0] === this.state.currentPage, 'p-3 rounded-0': this.props.orientation === 'vertical', 'o_page_invalid': this.invalidPages.has(navItem[0])}" t-attf-class="{{ navItem[1].className || '' }}" t-att-name="navItem[1].name" t-on-click="() => this.activatePage(navItem[0])" role="tab" tabindex="0" data-available-offline="">
-                            <i t-if="this.props.icons and this.props.icons[navItem[0]]" t-attf-class="fa {{ this.props.icons[navItem[0]] }} me-2" />
+                            <i t-if="this.props.icons and this.props.icons[navItem[0]]"  class="oi me-2" t-att-data-icon="this.props.icons[navItem[0]]" />
                             <t t-out="navItem[1].title" />
                         </button>
                     </li>
diff --git a/addons/web/static/src/core/notifications/notification.js b/addons/web/static/src/core/notifications/notification.js
index 339b34ec07504b..dea586acc2e05e 100644
--- a/addons/web/static/src/core/notifications/notification.js
+++ b/addons/web/static/src/core/notifications/notification.js
@@ -28,6 +28,7 @@ export class Notification extends Component {
                 shape: {
                     name: { type: String },
                     icon: { type: String, optional: true },
+                    icon_class: { type: String, optional: true },
                     primary: { type: Boolean, optional: true },
                     onClick: Function,
                 },
diff --git a/addons/web/static/src/core/notifications/notification.xml b/addons/web/static/src/core/notifications/notification.xml
index bb7d3217d013d6..42b817ea749d3f 100644
--- a/addons/web/static/src/core/notifications/notification.xml
+++ b/addons/web/static/src/core/notifications/notification.xml
@@ -15,8 +15,8 @@
                     <div t-if="this.props.buttons.length" class="o_notification_buttons justify-content-end w-50">
                         <button t-foreach="this.props.buttons" t-as="button" type="button" t-key="button_index" t-attf-class="btn btn-link" t-on-click="button.onClick">
                             <t t-if="button.icon">
-                                <i t-if="button.icon.indexOf('fa-') === 0" role="img" t-att-aria-label="button.name" t-att-title="button.name" t-attf-class="fa fa-fw {{button.icon}} me-1"/>
-                                <img t-else="" t-att-src="button.icon" t-att-alt="button.name"/>
+                                <!-- To check -->
+                                <i role="img" t-att-aria-label="button.name" t-att-title="button.name" class="oi oi-fw me-1" t-att-class="button.icon_class" t-att-data-icon="button.icon"/>
                             </t>
                             <span class="fw-bolder" t-out="button.name"/>
                         </button>
diff --git a/addons/web/static/src/core/pager/pager.xml b/addons/web/static/src/core/pager/pager.xml
index a396cd81a421ab..98f6820ccf84ed 100644
--- a/addons/web/static/src/core/pager/pager.xml
+++ b/addons/web/static/src/core/pager/pager.xml
@@ -23,12 +23,12 @@
                 <button type="button" class="btn btn-secondary o_pager_previous px-2 rounded-start" aria-label="Previous" tabindex="-1"
                     data-tooltip="Previous" t-att-data-hotkey="this.props.withAccessKey ? 'p' : false" data-available-offline=""
                     t-att-disabled="this.state.isDisabled or this.isSinglePage"  t-on-click.stop="() => this.navigate(-1)">
-                    <i class="oi oi-chevron-left"/>
+                    <i class="oi" data-icon="chevron_backward"/>
                 </button>
                 <button type="button" class="btn btn-secondary o_pager_next px-2 rounded-end" aria-label="Next" tabindex="-1"
                     data-tooltip="Next" t-att-data-hotkey="this.props.withAccessKey ? 'n' : false" data-available-offline=""
                     t-att-disabled="this.state.isDisabled or this.isSinglePage" t-on-click.stop="() => this.navigate(1)">
-                    <i class="oi oi-chevron-right"/>
+                    <i class="oi" data-icon="chevron_forward"/>
                 </button>
             </span>
         </nav>
diff --git a/addons/web/static/src/core/select_menu/select_menu.scss b/addons/web/static/src/core/select_menu/select_menu.scss
index 68936a9236cd2a..2b050f520123ee 100644
--- a/addons/web/static/src/core/select_menu/select_menu.scss
+++ b/addons/web/static/src/core/select_menu/select_menu.scss
@@ -56,8 +56,8 @@
         &:before {
             @include o-position-absolute($top: 50%);
             transform: translateY(-50%);
-            content: "\f002";
-            font-family: 'FontAwesome';
+            content: "search";
+            font-family: 'material_symbols_sharp';
         }
     }
 
diff --git a/addons/web/static/src/core/select_menu/select_menu.xml b/addons/web/static/src/core/select_menu/select_menu.xml
index a12d1af02094b0..2786adcd65087d 100644
--- a/addons/web/static/src/core/select_menu/select_menu.xml
+++ b/addons/web/static/src/core/select_menu/select_menu.xml
@@ -56,7 +56,7 @@
                             <t t-slot="default" />
                         </span>
                         <span t-if="this.canDeselect" t-on-click.stop="this.onInputClear" class="o_select_menu_toggler_clear position-absolute top-50 end-0 me-3">
-                            <i class="fa fa-times"></i>
+                            <i class="oi" data-icon="close"></i>
                         </span>
                         <span class="o_select_menu_caret align-self-center" />
                     </button>
diff --git a/addons/web/static/src/core/signature/name_and_signature.xml b/addons/web/static/src/core/signature/name_and_signature.xml
index df943de3a5e15e..31f164ef502ce9 100644
--- a/addons/web/static/src/core/signature/name_and_signature.xml
+++ b/addons/web/static/src/core/signature/name_and_signature.xml
@@ -72,7 +72,7 @@
 
                         <div t-if="this.state.signMode === 'auto'" class="o_web_sign_auto_select_style col-auto">
                             <Dropdown>
-                                <button type="button" class="btn btn-link fa fa-font o-dropdown-caret"/>
+                                <button type="button" class="btn btn-link oi o-dropdown-caret" data-icon="text_fields"/>
                                 <t t-set-slot="content">
                                     <t t-foreach="this.fonts" t-as="font" t-key="font_index">
                                         <DropdownItem onSelected="() => this.onSelectFont(font_index)">
@@ -84,12 +84,12 @@
                         </div>
 
                         <div t-if="this.state.signMode === 'draw'" t-attf-class="o_web_sign_draw_clear col-auto">
-                            <a role="button" href="#" t-on-click.prevent="this.onClickSignDrawClear" class="btn btn-link fa fa-trash"/>
+                            <a role="button" href="#" t-on-click.prevent="this.onClickSignDrawClear" class="btn btn-link oi oi-filled" data-icon="delete"/>
                         </div>
 
                         <div t-if="this.state.signMode === 'load'" class="o_web_sign_load_file col-auto">
                             <button type="button" id="loadFileXml" t-on-click="this.uploadFile"
-                                class="btn btn-link fa fa-upload" />
+                                class="btn btn-link oi" data-icon="upload" />
                             <input t-custom-ref="signInputLoad" type="file" accept="image/png, image/jpeg" role="button" name="files[]" class="d-none" t-on-change="this.onChangeSignLoadInput"/>
                         </div>
                     </div>
diff --git a/addons/web/static/src/core/tags_list/avatar_tag.xml b/addons/web/static/src/core/tags_list/avatar_tag.xml
index a906b09bca9d43..3a744bdd40b11b 100644
--- a/addons/web/static/src/core/tags_list/avatar_tag.xml
+++ b/addons/web/static/src/core/tags_list/avatar_tag.xml
@@ -14,7 +14,7 @@
             </t>
             <t t-if="this.props.onDelete">
                 <a class="o_delete d-flex align-items-center opacity-100-hover btn btn-link position-relative py-0 px-1 text-danger opacity-0" href="#" tabindex="-1" aria-label="Delete" data-tooltip="Delete" t-on-click.stop.prevent="() => this.props.onDelete()">
-                    <i class="oi oi-close align-text-center"/>
+                    <i class="oi align-text-center" data-icon="close_small"/>
                 </a>
             </t>
         </span>
diff --git a/addons/web/static/src/core/tags_list/badge_tag.xml b/addons/web/static/src/core/tags_list/badge_tag.xml
index 508dd55bb2200f..8c3cc6add202f4 100644
--- a/addons/web/static/src/core/tags_list/badge_tag.xml
+++ b/addons/web/static/src/core/tags_list/badge_tag.xml
@@ -8,7 +8,7 @@
             </t>
             <t t-if="this.props.onDelete">
                 <a class="o_delete ps-1 opacity-75 opacity-100-hover" href="#" tabindex="-1" t-att-aria-label="this.props.crossTooltip" t-att-data-tooltip="this.props.crossTooltip" t-on-click.stop.prevent="() => this.props.onDelete()">
-                    <i class="oi oi-close"/>
+                    <i class="oi" data-icon="close_small"/>
                 </a>
             </t>
         </span>
diff --git a/addons/web/static/src/core/tags_list/badge_tag_dot.xml b/addons/web/static/src/core/tags_list/badge_tag_dot.xml
index d6b0788a2a7912..e04696e8c13df5 100644
--- a/addons/web/static/src/core/tags_list/badge_tag_dot.xml
+++ b/addons/web/static/src/core/tags_list/badge_tag_dot.xml
@@ -4,7 +4,7 @@
         <xpath expr="//t[@t-slot='default']" position="replace">
             <t t-set-slot="default">
                 <div class="o_tag_badge_text o_badge_text o_tag_color_basic fw-bold">
-                    <i t-if="this.dotColor" class="fa fa-circle me-1" t-attf-style="color:{{this.dotColor}};"/>
+                    <i t-if="this.dotColor" class="oi oi-filled me-1" data-icon="circle" t-attf-style="color:{{this.dotColor}};"/>
                     <t t-out="this.props.text"/>
                 </div>
             </t>
diff --git a/addons/web/static/src/core/tree_editor/tree_editor.xml b/addons/web/static/src/core/tree_editor/tree_editor.xml
index d78cab4acb34cd..cf3a3ec325ffa1 100644
--- a/addons/web/static/src/core/tree_editor/tree_editor.xml
+++ b/addons/web/static/src/core/tree_editor/tree_editor.xml
@@ -45,7 +45,7 @@
                     t-on-mouseenter="(ev) => this.highlightNode(ev.target, true)"
                     t-on-mouseleave="(ev) => this.highlightNode(ev.target, false)"
                 >
-                    <i class="fa fa-sitemap" />
+                    <i class="oi" data-icon="account_tree" />
                 </button>
                 <button
                     t-else=""
@@ -56,7 +56,7 @@
                     t-on-mouseenter="(ev) => this.highlightNode(ev.target, true)"
                     t-on-mouseleave="(ev) => this.highlightNode(ev.target, false)"
                 >
-                    <i class="fa fa-plus" />
+                    <i class="oi" data-icon="add" />
                 </button>
             </t>
             <button
@@ -67,7 +67,7 @@
                 t-on-mouseenter="(ev) => this.highlightNode(ev.target, true)"
                 t-on-mouseleave="(ev) => this.highlightNode(ev.target, false)"
             >
-                <i class="fa fa-trash" />
+                <i class="oi oi-filled" data-icon="delete" />
             </button>
         </div>
     </t>
@@ -169,8 +169,8 @@
             <div t-attf-class="o_tree_editor_editor #{_classes}">
                 <div class="o_input d-flex align-items-center">
                     <span class="flex-grow-1 text-truncate" t-out="info.stringify(value)" />
-                    <i role="alert" class="fa fa-exclamation-triangle text-warning mx-2" t-att-data-tooltip="(typeof info.message === 'function') ? info.message(value) : info.message" />
-                    <i class="fa fa-times" data-tooltip="Clear" t-on-click="() => update(info.defaultValue())" />
+                    <i role="alert" class="oi text-warning mx-2" data-icon="warning" t-att-data-tooltip="(typeof info.message === 'function') ? info.message(value) : info.message" />
+                    <i class="oi" data-icon="close" data-tooltip="Clear" t-on-click="() => update(info.defaultValue())" />
                 </div>
             </div>
         </t>
diff --git a/addons/web/static/src/core/tree_editor/tree_editor_components.xml b/addons/web/static/src/core/tree_editor/tree_editor_components.xml
index 9f583c1a6aea2f..0ae78801841105 100644
--- a/addons/web/static/src/core/tree_editor/tree_editor_components.xml
+++ b/addons/web/static/src/core/tree_editor/tree_editor_components.xml
@@ -22,7 +22,7 @@
                 <t t-set="value" t-value="this.props.value[0]" />
                 <t t-set="update" t-value="(val) => this.update(0, val)" />
             </t>
-            <i class="fa fa-long-arrow-right mx-2" aria-label="Arrow icon" title="Arrow" />
+            <i class="oi mx-2" data-icon="east" aria-label="Arrow icon" title="Arrow" />
             <t t-call="web.TreeEditor.Editor">
                 <t t-set="_classes" t-value="'overflow-hidden flex-grow-1'"/>
                 <t t-set="info" t-value="this.props.editorInfo" />
diff --git a/addons/web/static/src/core/user_switch/user_switch.xml b/addons/web/static/src/core/user_switch/user_switch.xml
index 2112d9fcbf39b5..1a8ba6ac24d445 100644
--- a/addons/web/static/src/core/user_switch/user_switch.xml
+++ b/addons/web/static/src/core/user_switch/user_switch.xml
@@ -12,12 +12,12 @@
                                     <img class="o_avatar o_user_avatar rounded me-2" t-attf-src="{{this.getAvatarUrl(user)}}" t-att-alt="user.login"/>
                                     <t t-out="user.name" />
                                 </span>
-                                <i class="fa fa-times" title="Remove user from switcher" t-on-click.stop="() => this.remove(user)"/>
+                                <i class="oi" data-icon="close" title="Remove user from switcher" t-on-click.stop="() => this.remove(user)"/>
                             </button>
                         </t>
                     </div>
                     <button type="button" class="btn btn-link btn-sm w-100" t-on-click="() => this.fillForm()">
-                        <i class="fa fa-user-circle-o"/> <span class="ms-1">Use another user</span>
+                        <i class="oi" data-icon="account_circle"/> <span class="ms-1">Use another user</span>
                     </button>
                 </div>
             </t>
diff --git a/addons/web/static/src/core/utils/ui.js b/addons/web/static/src/core/utils/ui.js
index bcac6ec2d7f36d..7bb370960d1720 100644
--- a/addons/web/static/src/core/utils/ui.js
+++ b/addons/web/static/src/core/utils/ui.js
@@ -221,8 +221,8 @@ export function getPreviousTabableElement(container = document.body) {
 }
 
 /**
- * Gives the button a loading effect by disabling it and adding a `fa` spinner
- * icon. The existing button `fa` icons will be hidden through css.
+ * Gives the button a loading effect by disabling it and adding a `oi` spinner
+ * icon. The existing button `oi` icons will be hidden through css.
  *
  * @param {HTMLElement} btnEl - the button to disable/load
  * @return {function} a callback function that will restore the button to its
@@ -234,7 +234,8 @@ export function addLoadingEffect(btnEl) {
     btnEl.classList.add("o_btn_loading", "disabled", "pe-none");
     btnEl.disabled = true;
     const loaderEl = document.createElement("span");
-    loaderEl.classList.add("fa", "fa-circle-o-notch", "fa-spin", "me-2");
+    loaderEl.classList.add("oi", "oi-spin", "me-2");
+    loaderEl.dataset.icon = "autorenew";
     btnEl.prepend(loaderEl);
     return () => {
         btnEl.classList.remove("o_btn_loading", "disabled", "pe-none");
diff --git a/addons/web/static/src/libs/fontawesome/css/font-awesome.css b/addons/web/static/src/libs/fontawesome/css/font-awesome.css
deleted file mode 100644
index 8820b70bbb2987..00000000000000
--- a/addons/web/static/src/libs/fontawesome/css/font-awesome.css
+++ /dev/null
@@ -1,2296 +0,0 @@
-/*!
- *  Based on Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */
-/* FONT PATH
- * -------------------------- */
-@font-face {
-  font-family: 'FontAwesome';
-  src: /* see web.fontawesome asset */
-    url('/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2') format('woff2'),
-    url('/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-.fa {
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-/* matches 'oi-large' utility-class */
-.fa-lg {
-  font-size: 1.315em;
-  vertical-align: -6%;
-}
-.fa-2x {
-  font-size: 2em;
-}
-.fa-3x {
-  font-size: 3em;
-}
-.fa-4x {
-  font-size: 4em;
-}
-.fa-5x {
-  font-size: 5em;
-}
-.fa-fw {
-  width: 1.28571429em;
-  text-align: center;
-}
-.fa-ul {
-  padding-left: 0;
-  margin-left: 2.14285714em;
-  list-style-type: none;
-}
-.fa-ul > li {
-  position: relative;
-}
-.fa-li {
-  position: absolute;
-  left: -2.14285714em;
-  width: 2.14285714em;
-  top: 0.14285714em;
-  text-align: center;
-}
-.fa-li.fa-lg {
-  left: -1.85714286em;
-}
-.fa-border {
-  padding: .2em .25em .15em;
-  border: solid 0.08em #eeeeee;
-  border-radius: .1em;
-}
-.fa-pull-left {
-  float: left;
-}
-.fa-pull-right {
-  float: right;
-}
-.fa.fa-pull-left {
-  margin-right: .3em;
-}
-.fa.fa-pull-right {
-  margin-left: .3em;
-}
-.fa-spin {
-  animation: fa-spin 2s infinite linear;
-}
-.fa-pulse {
-  animation: fa-spin 1s infinite steps(8);
-}
-@keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(359deg);
-  }
-}
-.fa-rotate-90 {
-  transform: rotate(90deg);
-}
-.fa-rotate-180 {
-  transform: rotate(180deg);
-}
-.fa-rotate-270 {
-  transform: rotate(270deg);
-}
-.fa-flip-horizontal {
-  transform: scale(-1, 1);
-}
-.fa-flip-vertical {
-  transform: scale(1, -1);
-}
-:root .fa-rotate-90,
-:root .fa-rotate-180,
-:root .fa-rotate-270,
-:root .fa-flip-horizontal,
-:root .fa-flip-vertical {
-  filter: none;
-}
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-.fa-stack-1x,
-.fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-.fa-stack-1x {
-  line-height: inherit;
-}
-.fa-stack-2x {
-  font-size: 2em;
-}
-.fa-inverse {
-  color: #ffffff;
-}
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-   readers do not read off random characters that represent icons */
-.fa-glass:before {
-  content: "\f000";
-}
-.fa-music:before {
-  content: "\f001";
-}
-.fa-search:before {
-  content: "\f002";
-}
-.fa-envelope-o:before {
-  content: "\f003";
-}
-.fa-heart:before {
-  content: "\f004";
-}
-.fa-star:before {
-  content: "\f005";
-}
-.fa-star-o:before {
-  content: "\f006";
-}
-.fa-user:before {
-  content: "\f007";
-}
-.fa-film:before {
-  content: "\f008";
-}
-.fa-th-large:before {
-  content: "\f009";
-}
-.fa-th:before {
-  content: "\f00a";
-}
-.fa-th-list:before {
-  content: "\f00b";
-}
-.fa-check:before {
-  content: "\f00c";
-}
-.fa-remove:before,
-.fa-close:before,
-.fa-times:before {
-  content: "\f00d";
-}
-.fa-search-plus:before {
-  content: "\f00e";
-}
-.fa-search-minus:before {
-  content: "\f010";
-}
-.fa-power-off:before {
-  content: "\f011";
-}
-.fa-signal:before {
-  content: "\f012";
-}
-.fa-gear:before,
-.fa-cog:before {
-  content: "\f013";
-}
-.fa-trash-o:before {
-  content: "\f014";
-}
-.fa-home:before {
-  content: "\f015";
-}
-.fa-file-o:before {
-  content: "\f016";
-}
-.fa-clock-o:before {
-  content: "\f017";
-}
-.fa-road:before {
-  content: "\f018";
-}
-.fa-download:before {
-  content: "\f019";
-}
-.fa-arrow-circle-o-down:before {
-  content: "\f01a";
-}
-.fa-arrow-circle-o-up:before {
-  content: "\f01b";
-}
-.fa-inbox:before {
-  content: "\f01c";
-}
-.fa-play-circle-o:before {
-  content: "\f01d";
-}
-.fa-rotate-right:before,
-.fa-repeat:before {
-  content: "\f01e";
-}
-.fa-refresh:before {
-  content: "\f021";
-}
-.fa-list-alt:before {
-  content: "\f022";
-}
-.fa-lock:before {
-  content: "\f023";
-}
-.fa-flag:before {
-  content: "\f024";
-}
-.fa-headphones:before {
-  content: "\f025";
-}
-.fa-volume-off:before {
-  content: "\f026";
-}
-.fa-volume-down:before {
-  content: "\f027";
-}
-.fa-volume-up:before {
-  content: "\f028";
-}
-.fa-qrcode:before {
-  content: "\f029";
-}
-.fa-barcode:before {
-  content: "\f02a";
-}
-.fa-tag:before {
-  content: "\f02b";
-}
-.fa-tags:before {
-  content: "\f02c";
-}
-.fa-book:before {
-  content: "\f02d";
-}
-.fa-bookmark:before {
-  content: "\f02e";
-}
-.fa-print:before {
-  content: "\f02f";
-}
-.fa-camera:before {
-  content: "\f030";
-}
-.fa-font:before {
-  content: "\f031";
-}
-.fa-bold:before {
-  content: "\f032";
-}
-.fa-italic:before {
-  content: "\f033";
-}
-.fa-text-height:before {
-  content: "\f034";
-}
-.fa-text-width:before {
-  content: "\f035";
-}
-.fa-align-left:before {
-  content: "\f036";
-}
-.fa-align-center:before {
-  content: "\f037";
-}
-.fa-align-right:before {
-  content: "\f038";
-}
-.fa-align-justify:before {
-  content: "\f039";
-}
-.fa-list:before {
-  content: "\f03a";
-}
-.fa-dedent:before,
-.fa-outdent:before {
-  content: "\f03b";
-}
-.fa-indent:before {
-  content: "\f03c";
-}
-.fa-video-camera:before {
-  content: "\f03d";
-}
-.fa-photo:before,
-.fa-image:before,
-.fa-picture-o:before {
-  content: "\f03e";
-}
-.fa-pencil:before {
-  content: "\f040";
-}
-.fa-map-marker:before {
-  content: "\f041";
-}
-.fa-adjust:before {
-  content: "\f042";
-}
-.fa-tint:before {
-  content: "\f043";
-}
-.fa-edit:before,
-.fa-pencil-square-o:before {
-  content: "\f044";
-}
-.fa-share-square-o:before {
-  content: "\f045";
-}
-.fa-check-square-o:before {
-  content: "\f046";
-}
-.fa-arrows:before {
-  content: "\f047";
-}
-.fa-step-backward:before {
-  content: "\f048";
-}
-.fa-fast-backward:before {
-  content: "\f049";
-}
-.fa-backward:before {
-  content: "\f04a";
-}
-.fa-play:before {
-  content: "\f04b";
-}
-.fa-pause:before {
-  content: "\f04c";
-}
-.fa-stop:before {
-  content: "\f04d";
-}
-.fa-forward:before {
-  content: "\f04e";
-}
-.fa-fast-forward:before {
-  content: "\f050";
-}
-.fa-step-forward:before {
-  content: "\f051";
-}
-.fa-eject:before {
-  content: "\f052";
-}
-.fa-chevron-left:before {
-  content: "\f053";
-}
-.fa-chevron-right:before {
-  content: "\f054";
-}
-.fa-plus-circle:before {
-  content: "\f055";
-}
-.fa-minus-circle:before {
-  content: "\f056";
-}
-.fa-times-circle:before {
-  content: "\f057";
-}
-.fa-check-circle:before {
-  content: "\f058";
-}
-.fa-question-circle:before {
-  content: "\f059";
-}
-.fa-info-circle:before {
-  content: "\f05a";
-}
-.fa-crosshairs:before {
-  content: "\f05b";
-}
-.fa-times-circle-o:before {
-  content: "\f05c";
-}
-.fa-check-circle-o:before {
-  content: "\f05d";
-}
-.fa-ban:before {
-  content: "\f05e";
-}
-.fa-arrow-left:before {
-  content: "\f060";
-}
-.fa-arrow-right:before {
-  content: "\f061";
-}
-.fa-arrow-up:before {
-  content: "\f062";
-}
-.fa-arrow-down:before {
-  content: "\f063";
-}
-.fa-mail-forward:before,
-.fa-share:before {
-  content: "\f064";
-}
-.fa-expand:before {
-  content: "\f065";
-}
-.fa-compress:before {
-  content: "\f066";
-}
-.fa-plus:before {
-  content: "\f067";
-}
-.fa-minus:before {
-  content: "\f068";
-}
-.fa-asterisk:before {
-  content: "\f069";
-}
-.fa-exclamation-circle:before {
-  content: "\f06a";
-}
-.fa-gift:before {
-  content: "\f06b";
-}
-.fa-leaf:before {
-  content: "\f06c";
-}
-.fa-fire:before {
-  content: "\f06d";
-}
-.fa-eye:before {
-  content: "\f06e";
-}
-.fa-eye-slash:before {
-  content: "\f070";
-}
-.fa-warning:before,
-.fa-exclamation-triangle:before {
-  content: "\f071";
-}
-.fa-plane:before {
-  content: "\f072";
-}
-.fa-calendar:before {
-  content: "\f073";
-}
-.fa-random:before {
-  content: "\f074";
-}
-.fa-comment:before {
-  content: "\f075";
-}
-.fa-magnet:before {
-  content: "\f076";
-}
-.fa-chevron-up:before {
-  content: "\f077";
-}
-.fa-chevron-down:before {
-  content: "\f078";
-}
-.fa-retweet:before {
-  content: "\f079";
-}
-.fa-shopping-cart:before {
-  content: "\f07a";
-}
-.fa-folder:before {
-  content: "\f07b";
-}
-.fa-folder-open:before {
-  content: "\f07c";
-}
-.fa-arrows-v:before {
-  content: "\f07d";
-}
-.fa-arrows-h:before {
-  content: "\f07e";
-}
-.fa-bar-chart-o:before,
-.fa-bar-chart:before {
-  content: "\f080";
-}
-.fa-twitter-square:before {
-  content: "\f081";
-}
-.fa-facebook-square:before {
-  content: "\f082";
-}
-.fa-camera-retro:before {
-  content: "\f083";
-}
-.fa-key:before {
-  content: "\f084";
-}
-.fa-gears:before,
-.fa-cogs:before {
-  content: "\f085";
-}
-.fa-comments:before {
-  content: "\f086";
-}
-.fa-thumbs-o-up:before {
-  content: "\f087";
-}
-.fa-thumbs-o-down:before {
-  content: "\f088";
-}
-.fa-star-half:before {
-  content: "\f089";
-}
-.fa-heart-o:before {
-  content: "\f08a";
-}
-.fa-sign-out:before {
-  content: "\f08b";
-}
-.fa-linkedin-square:before {
-  content: "\f08c";
-}
-.fa-thumb-tack:before {
-  content: "\f08d";
-}
-.fa-external-link:before {
-  content: "\f08e";
-}
-.fa-sign-in:before {
-  content: "\f090";
-}
-.fa-trophy:before {
-  content: "\f091";
-}
-.fa-github-square:before {
-  content: "\f092";
-}
-.fa-upload:before {
-  content: "\f093";
-}
-.fa-lemon-o:before {
-  content: "\f094";
-}
-.fa-phone:before {
-  content: "\f095";
-}
-.fa-square-o:before {
-  content: "\f096";
-}
-.fa-bookmark-o:before {
-  content: "\f097";
-}
-.fa-phone-square:before {
-  content: "\f098";
-}
-.fa-twitter:before {
-  content: "\f099";
-}
-.fa-facebook-f:before,
-.fa-facebook:before {
-  content: "\f09a";
-}
-.fa-github:before {
-  content: "\f09b";
-}
-.fa-unlock:before {
-  content: "\f09c";
-}
-.fa-credit-card:before {
-  content: "\f09d";
-}
-.fa-feed:before,
-.fa-rss:before {
-  content: "\f09e";
-}
-.fa-hdd-o:before {
-  content: "\f0a0";
-}
-.fa-bullhorn:before {
-  content: "\f0a1";
-}
-.fa-bell:before {
-  content: "\f0f3";
-}
-.fa-certificate:before {
-  content: "\f0a3";
-}
-.fa-hand-o-right:before {
-  content: "\f0a4";
-}
-.fa-hand-o-left:before {
-  content: "\f0a5";
-}
-.fa-hand-o-up:before {
-  content: "\f0a6";
-}
-.fa-hand-o-down:before {
-  content: "\f0a7";
-}
-.fa-arrow-circle-left:before {
-  content: "\f0a8";
-}
-.fa-arrow-circle-right:before {
-  content: "\f0a9";
-}
-.fa-arrow-circle-up:before {
-  content: "\f0aa";
-}
-.fa-arrow-circle-down:before {
-  content: "\f0ab";
-}
-.fa-globe:before {
-  content: "\f0ac";
-}
-.fa-wrench:before {
-  content: "\f0ad";
-}
-.fa-tasks:before {
-  content: "\f0ae";
-}
-.fa-filter:before {
-  content: "\f0b0";
-}
-.fa-briefcase:before {
-  content: "\f0b1";
-}
-.fa-arrows-alt:before {
-  content: "\f0b2";
-}
-.fa-group:before,
-.fa-users:before {
-  content: "\f0c0";
-}
-.fa-chain:before,
-.fa-link:before {
-  content: "\f0c1";
-}
-.fa-cloud:before {
-  content: "\f0c2";
-}
-.fa-flask:before {
-  content: "\f0c3";
-}
-.fa-cut:before,
-.fa-scissors:before {
-  content: "\f0c4";
-}
-.fa-copy:before,
-.fa-files-o:before {
-  content: "\f0c5";
-}
-.fa-paperclip:before {
-  content: "\f0c6";
-}
-.fa-save:before,
-.fa-floppy-o:before {
-  content: "\f0c7";
-}
-.fa-square:before {
-  content: "\f0c8";
-}
-.fa-navicon:before,
-.fa-reorder:before,
-.fa-bars:before {
-  content: "\f0c9";
-}
-.fa-list-ul:before {
-  content: "\f0ca";
-}
-.fa-list-ol:before {
-  content: "\f0cb";
-}
-.fa-strikethrough:before {
-  content: "\f0cc";
-}
-.fa-underline:before {
-  content: "\f0cd";
-}
-.fa-table:before {
-  content: "\f0ce";
-}
-.fa-magic:before {
-  content: "\f0d0";
-}
-.fa-truck:before {
-  content: "\f0d1";
-}
-.fa-pinterest:before {
-  content: "\f0d2";
-}
-.fa-pinterest-square:before {
-  content: "\f0d3";
-}
-.fa-google-plus-square:before {
-  content: "\f0d4";
-}
-.fa-google-plus:before {
-  content: "\f0d5";
-}
-.fa-money:before {
-  content: "\f0d6";
-}
-.fa-caret-down:before {
-  content: "\f0d7";
-}
-.fa-caret-up:before {
-  content: "\f0d8";
-}
-.fa-caret-left:before {
-  content: "\f0d9";
-}
-.fa-caret-right:before {
-  content: "\f0da";
-}
-.fa-columns:before {
-  content: "\f0db";
-}
-.fa-unsorted:before,
-.fa-sort:before {
-  content: "\f0dc";
-}
-.fa-sort-down:before,
-.fa-sort-desc:before {
-  content: "\f0dd";
-}
-.fa-sort-up:before,
-.fa-sort-asc:before {
-  content: "\f0de";
-}
-.fa-envelope:before {
-  content: "\f0e0";
-}
-.fa-linkedin:before {
-  content: "\f0e1";
-}
-.fa-rotate-left:before,
-.fa-undo:before {
-  content: "\f0e2";
-}
-.fa-legal:before,
-.fa-gavel:before {
-  content: "\f0e3";
-}
-.fa-dashboard:before,
-.fa-tachometer:before {
-  content: "\f0e4";
-}
-.fa-comment-o:before {
-  content: "\f0e5";
-}
-.fa-comments-o:before {
-  content: "\f0e6";
-}
-.fa-flash:before,
-.fa-bolt:before {
-  content: "\f0e7";
-}
-.fa-sitemap:before {
-  content: "\f0e8";
-}
-.fa-umbrella:before {
-  content: "\f0e9";
-}
-.fa-paste:before,
-.fa-clipboard:before {
-  content: "\f0ea";
-}
-.fa-lightbulb-o:before {
-  content: "\f0eb";
-}
-.fa-exchange:before {
-  content: "\f0ec";
-}
-.fa-cloud-download:before {
-  content: "\f0ed";
-}
-.fa-cloud-upload:before {
-  content: "\f0ee";
-}
-.fa-user-md:before {
-  content: "\f0f0";
-}
-.fa-stethoscope:before {
-  content: "\f0f1";
-}
-.fa-suitcase:before {
-  content: "\f0f2";
-}
-.fa-bell-o:before {
-  content: "\f0a2";
-}
-.fa-coffee:before {
-  content: "\f0f4";
-}
-.fa-cutlery:before {
-  content: "\f0f5";
-}
-.fa-file-text-o:before {
-  content: "\f0f6";
-}
-.fa-building-o:before {
-  content: "\f0f7";
-}
-.fa-hospital-o:before {
-  content: "\f0f8";
-}
-.fa-ambulance:before {
-  content: "\f0f9";
-}
-.fa-medkit:before {
-  content: "\f0fa";
-}
-.fa-fighter-jet:before {
-  content: "\f0fb";
-}
-.fa-beer:before {
-  content: "\f0fc";
-}
-.fa-h-square:before {
-  content: "\f0fd";
-}
-.fa-plus-square:before {
-  content: "\f0fe";
-}
-.fa-angle-double-left:before {
-  content: "\f100";
-}
-.fa-angle-double-right:before {
-  content: "\f101";
-}
-.fa-angle-double-up:before {
-  content: "\f102";
-}
-.fa-angle-double-down:before {
-  content: "\f103";
-}
-.fa-angle-left:before {
-  content: "\f104";
-}
-.fa-angle-right:before {
-  content: "\f105";
-}
-.fa-angle-up:before {
-  content: "\f106";
-}
-.fa-angle-down:before {
-  content: "\f107";
-}
-.fa-desktop:before {
-  content: "\f108";
-}
-.fa-laptop:before {
-  content: "\f109";
-}
-.fa-tablet:before {
-  content: "\f10a";
-}
-.fa-mobile-phone:before,
-.fa-mobile:before {
-  content: "\f10b";
-}
-.fa-circle-o:before {
-  content: "\f10c";
-}
-.fa-quote-left:before {
-  content: "\f10d";
-}
-.fa-quote-right:before {
-  content: "\f10e";
-}
-.fa-spinner:before {
-  content: "\f110";
-}
-.fa-circle:before {
-  content: "\f111";
-}
-.fa-mail-reply:before,
-.fa-reply:before {
-  content: "\f112";
-}
-.fa-github-alt:before {
-  content: "\f113";
-}
-.fa-folder-o:before {
-  content: "\f114";
-}
-.fa-folder-open-o:before {
-  content: "\f115";
-}
-.fa-smile-o:before {
-  content: "\f118";
-}
-.fa-frown-o:before {
-  content: "\f119";
-}
-.fa-meh-o:before {
-  content: "\f11a";
-}
-.fa-gamepad:before {
-  content: "\f11b";
-}
-.fa-keyboard-o:before {
-  content: "\f11c";
-}
-.fa-flag-o:before {
-  content: "\f11d";
-}
-.fa-flag-checkered:before {
-  content: "\f11e";
-}
-.fa-terminal:before {
-  content: "\f120";
-}
-.fa-code:before {
-  content: "\f121";
-}
-.fa-mail-reply-all:before,
-.fa-reply-all:before {
-  content: "\f122";
-}
-.fa-star-half-empty:before,
-.fa-star-half-full:before,
-.fa-star-half-o:before {
-  content: "\f123";
-}
-.fa-location-arrow:before {
-  content: "\f124";
-}
-.fa-crop:before {
-  content: "\f125";
-}
-.fa-code-fork:before {
-  content: "\f126";
-}
-.fa-unlink:before,
-.fa-chain-broken:before {
-  content: "\f127";
-}
-.fa-question:before {
-  content: "\f128";
-}
-.fa-info:before {
-  content: "\f129";
-}
-.fa-exclamation:before {
-  content: "\f12a";
-}
-.fa-superscript:before {
-  content: "\f12b";
-}
-.fa-subscript:before {
-  content: "\f12c";
-}
-.fa-eraser:before {
-  content: "\f12d";
-}
-.fa-puzzle-piece:before {
-  content: "\f12e";
-}
-.fa-microphone:before {
-  content: "\f130";
-}
-.fa-microphone-slash:before {
-  content: "\f131";
-}
-.fa-shield:before {
-  content: "\f132";
-}
-.fa-calendar-o:before {
-  content: "\f133";
-}
-.fa-fire-extinguisher:before {
-  content: "\f134";
-}
-.fa-rocket:before {
-  content: "\f135";
-}
-.fa-maxcdn:before {
-  content: "\f136";
-}
-.fa-chevron-circle-left:before {
-  content: "\f137";
-}
-.fa-chevron-circle-right:before {
-  content: "\f138";
-}
-.fa-chevron-circle-up:before {
-  content: "\f139";
-}
-.fa-chevron-circle-down:before {
-  content: "\f13a";
-}
-.fa-html5:before {
-  content: "\f13b";
-}
-.fa-css3:before {
-  content: "\f13c";
-}
-.fa-anchor:before {
-  content: "\f13d";
-}
-.fa-unlock-alt:before {
-  content: "\f13e";
-}
-.fa-bullseye:before {
-  content: "\f140";
-}
-.fa-ellipsis-h:before {
-  content: "\f141";
-}
-.fa-ellipsis-v:before {
-  content: "\f142";
-}
-.fa-rss-square:before {
-  content: "\f143";
-}
-.fa-play-circle:before {
-  content: "\f144";
-}
-.fa-ticket:before {
-  content: "\f145";
-}
-.fa-minus-square:before {
-  content: "\f146";
-}
-.fa-minus-square-o:before {
-  content: "\f147";
-}
-.fa-level-up:before {
-  content: "\f148";
-}
-.fa-level-down:before {
-  content: "\f149";
-}
-.fa-check-square:before {
-  content: "\f14a";
-}
-.fa-pencil-square:before {
-  content: "\f14b";
-}
-.fa-external-link-square:before {
-  content: "\f14c";
-}
-.fa-share-square:before {
-  content: "\f14d";
-}
-.fa-compass:before {
-  content: "\f14e";
-}
-.fa-toggle-down:before,
-.fa-caret-square-o-down:before {
-  content: "\f150";
-}
-.fa-toggle-up:before,
-.fa-caret-square-o-up:before {
-  content: "\f151";
-}
-.fa-toggle-right:before,
-.fa-caret-square-o-right:before {
-  content: "\f152";
-}
-.fa-euro:before,
-.fa-eur:before {
-  content: "\f153";
-}
-.fa-gbp:before {
-  content: "\f154";
-}
-.fa-dollar:before,
-.fa-usd:before {
-  content: "\f155";
-}
-.fa-rupee:before,
-.fa-inr:before {
-  content: "\f156";
-}
-.fa-cny:before,
-.fa-rmb:before,
-.fa-yen:before,
-.fa-jpy:before {
-  content: "\f157";
-}
-.fa-ruble:before,
-.fa-rouble:before,
-.fa-rub:before {
-  content: "\f158";
-}
-.fa-won:before,
-.fa-krw:before {
-  content: "\f159";
-}
-.fa-bitcoin:before,
-.fa-btc:before {
-  content: "\f15a";
-}
-.fa-file:before {
-  content: "\f15b";
-}
-.fa-file-text:before {
-  content: "\f15c";
-}
-.fa-sort-alpha-asc:before {
-  content: "\f15d";
-}
-.fa-sort-alpha-desc:before {
-  content: "\f15e";
-}
-.fa-sort-amount-asc:before {
-  content: "\f160";
-}
-.fa-sort-amount-desc:before {
-  content: "\f161";
-}
-.fa-sort-numeric-asc:before {
-  content: "\f162";
-}
-.fa-sort-numeric-desc:before {
-  content: "\f163";
-}
-.fa-thumbs-up:before {
-  content: "\f164";
-}
-.fa-thumbs-down:before {
-  content: "\f165";
-}
-.fa-youtube-square:before {
-  content: "\f166";
-}
-.fa-youtube:before {
-  content: "\f167";
-}
-.fa-xing:before {
-  content: "\f168";
-}
-.fa-xing-square:before {
-  content: "\f169";
-}
-.fa-youtube-play:before {
-  content: "\f16a";
-}
-.fa-dropbox:before {
-  content: "\f16b";
-}
-.fa-stack-overflow:before {
-  content: "\f16c";
-}
-.fa-instagram:before {
-  content: "\f16d";
-}
-.fa-flickr:before {
-  content: "\f16e";
-}
-.fa-adn:before {
-  content: "\f170";
-}
-.fa-bitbucket:before {
-  content: "\f171";
-}
-.fa-bitbucket-square:before {
-  content: "\f172";
-}
-.fa-tumblr:before {
-  content: "\f173";
-}
-.fa-tumblr-square:before {
-  content: "\f174";
-}
-.fa-long-arrow-down:before {
-  content: "\f175";
-}
-.fa-long-arrow-up:before {
-  content: "\f176";
-}
-.fa-long-arrow-left:before {
-  content: "\f177";
-}
-.fa-long-arrow-right:before {
-  content: "\f178";
-}
-.fa-apple:before {
-  content: "\f179";
-}
-.fa-windows:before {
-  content: "\f17a";
-}
-.fa-android:before {
-  content: "\f17b";
-}
-.fa-linux:before {
-  content: "\f17c";
-}
-.fa-dribbble:before {
-  content: "\f17d";
-}
-.fa-skype:before {
-  content: "\f17e";
-}
-.fa-foursquare:before {
-  content: "\f180";
-}
-.fa-trello:before {
-  content: "\f181";
-}
-.fa-female:before {
-  content: "\f182";
-}
-.fa-male:before {
-  content: "\f183";
-}
-.fa-gittip:before,
-.fa-gratipay:before {
-  content: "\f184";
-}
-.fa-sun-o:before {
-  content: "\f185";
-}
-.fa-moon-o:before {
-  content: "\f186";
-}
-.fa-archive:before {
-  content: "\f187";
-}
-.fa-bug:before {
-  content: "\f188";
-}
-.fa-vk:before {
-  content: "\f189";
-}
-.fa-weibo:before {
-  content: "\f18a";
-}
-.fa-renren:before {
-  content: "\f18b";
-}
-.fa-pagelines:before {
-  content: "\f18c";
-}
-.fa-stack-exchange:before {
-  content: "\f18d";
-}
-.fa-arrow-circle-o-right:before {
-  content: "\f18e";
-}
-.fa-arrow-circle-o-left:before {
-  content: "\f190";
-}
-.fa-toggle-left:before,
-.fa-caret-square-o-left:before {
-  content: "\f191";
-}
-.fa-dot-circle-o:before {
-  content: "\f192";
-}
-.fa-wheelchair:before {
-  content: "\f193";
-}
-.fa-vimeo-square:before {
-  content: "\f194";
-}
-.fa-turkish-lira:before,
-.fa-try:before {
-  content: "\f195";
-}
-.fa-plus-square-o:before {
-  content: "\f196";
-}
-.fa-space-shuttle:before {
-  content: "\f197";
-}
-.fa-slack:before {
-  content: "\f198";
-}
-.fa-envelope-square:before {
-  content: "\f199";
-}
-.fa-wordpress:before {
-  content: "\f19a";
-}
-.fa-openid:before {
-  content: "\f19b";
-}
-.fa-institution:before,
-.fa-bank:before,
-.fa-university:before {
-  content: "\f19c";
-}
-.fa-mortar-board:before,
-.fa-graduation-cap:before {
-  content: "\f19d";
-}
-.fa-yahoo:before {
-  content: "\f19e";
-}
-.fa-google:before {
-  content: "\f1a0";
-}
-.fa-reddit:before {
-  content: "\f1a1";
-}
-.fa-reddit-square:before {
-  content: "\f1a2";
-}
-.fa-stumbleupon-circle:before {
-  content: "\f1a3";
-}
-.fa-stumbleupon:before {
-  content: "\f1a4";
-}
-.fa-delicious:before {
-  content: "\f1a5";
-}
-.fa-digg:before {
-  content: "\f1a6";
-}
-.fa-pied-piper-pp:before {
-  content: "\f1a7";
-}
-.fa-pied-piper-alt:before {
-  content: "\f1a8";
-}
-.fa-drupal:before {
-  content: "\f1a9";
-}
-.fa-joomla:before {
-  content: "\f1aa";
-}
-.fa-language:before {
-  content: "\f1ab";
-}
-.fa-fax:before {
-  content: "\f1ac";
-}
-.fa-building:before {
-  content: "\f1ad";
-}
-.fa-child:before {
-  content: "\f1ae";
-}
-.fa-paw:before {
-  content: "\f1b0";
-}
-.fa-spoon:before {
-  content: "\f1b1";
-}
-.fa-cube:before {
-  content: "\f1b2";
-}
-.fa-cubes:before {
-  content: "\f1b3";
-}
-.fa-behance:before {
-  content: "\f1b4";
-}
-.fa-behance-square:before {
-  content: "\f1b5";
-}
-.fa-steam:before {
-  content: "\f1b6";
-}
-.fa-steam-square:before {
-  content: "\f1b7";
-}
-.fa-recycle:before {
-  content: "\f1b8";
-}
-.fa-automobile:before,
-.fa-car:before {
-  content: "\f1b9";
-}
-.fa-cab:before,
-.fa-taxi:before {
-  content: "\f1ba";
-}
-.fa-tree:before {
-  content: "\f1bb";
-}
-.fa-spotify:before {
-  content: "\f1bc";
-}
-.fa-deviantart:before {
-  content: "\f1bd";
-}
-.fa-soundcloud:before {
-  content: "\f1be";
-}
-.fa-database:before {
-  content: "\f1c0";
-}
-.fa-file-pdf-o:before {
-  content: "\f1c1";
-}
-.fa-file-word-o:before {
-  content: "\f1c2";
-}
-.fa-file-excel-o:before {
-  content: "\f1c3";
-}
-.fa-file-powerpoint-o:before {
-  content: "\f1c4";
-}
-.fa-file-photo-o:before,
-.fa-file-picture-o:before,
-.fa-file-image-o:before {
-  content: "\f1c5";
-}
-.fa-file-zip-o:before,
-.fa-file-archive-o:before {
-  content: "\f1c6";
-}
-.fa-file-sound-o:before,
-.fa-file-audio-o:before {
-  content: "\f1c7";
-}
-.fa-file-movie-o:before,
-.fa-file-video-o:before {
-  content: "\f1c8";
-}
-.fa-file-code-o:before {
-  content: "\f1c9";
-}
-.fa-vine:before {
-  content: "\f1ca";
-}
-.fa-codepen:before {
-  content: "\f1cb";
-}
-.fa-jsfiddle:before {
-  content: "\f1cc";
-}
-.fa-life-bouy:before,
-.fa-life-buoy:before,
-.fa-life-saver:before,
-.fa-support:before,
-.fa-life-ring:before {
-  content: "\f1cd";
-}
-.fa-circle-o-notch:before {
-  content: "\f1ce";
-}
-.fa-ra:before,
-.fa-resistance:before,
-.fa-rebel:before {
-  content: "\f1d0";
-}
-.fa-ge:before,
-.fa-empire:before {
-  content: "\f1d1";
-}
-.fa-git-square:before {
-  content: "\f1d2";
-}
-.fa-git:before {
-  content: "\f1d3";
-}
-.fa-y-combinator-square:before,
-.fa-yc-square:before,
-.fa-hacker-news:before {
-  content: "\f1d4";
-}
-.fa-tencent-weibo:before {
-  content: "\f1d5";
-}
-.fa-qq:before {
-  content: "\f1d6";
-}
-.fa-wechat:before,
-.fa-weixin:before {
-  content: "\f1d7";
-}
-.fa-send:before,
-.fa-paper-plane:before {
-  content: "\f1d8";
-}
-.fa-send-o:before,
-.fa-paper-plane-o:before {
-  content: "\f1d9";
-}
-.fa-history:before {
-  content: "\f1da";
-}
-.fa-circle-thin:before {
-  content: "\f1db";
-}
-.fa-header:before {
-  content: "\f1dc";
-}
-.fa-paragraph:before {
-  content: "\f1dd";
-}
-.fa-sliders:before {
-  content: "\f1de";
-}
-.fa-share-alt:before {
-  content: "\f1e0";
-}
-.fa-share-alt-square:before {
-  content: "\f1e1";
-}
-.fa-bomb:before {
-  content: "\f1e2";
-}
-.fa-soccer-ball-o:before,
-.fa-futbol-o:before {
-  content: "\f1e3";
-}
-.fa-tty:before {
-  content: "\f1e4";
-}
-.fa-binoculars:before {
-  content: "\f1e5";
-}
-.fa-plug:before {
-  content: "\f1e6";
-}
-.fa-slideshare:before {
-  content: "\f1e7";
-}
-.fa-twitch:before {
-  content: "\f1e8";
-}
-.fa-yelp:before {
-  content: "\f1e9";
-}
-.fa-newspaper-o:before {
-  content: "\f1ea";
-}
-.fa-wifi:before {
-  content: "\f1eb";
-}
-.fa-calculator:before {
-  content: "\f1ec";
-}
-.fa-paypal:before {
-  content: "\f1ed";
-}
-.fa-google-wallet:before {
-  content: "\f1ee";
-}
-.fa-cc-visa:before {
-  content: "\f1f0";
-}
-.fa-cc-mastercard:before {
-  content: "\f1f1";
-}
-.fa-cc-discover:before {
-  content: "\f1f2";
-}
-.fa-cc-amex:before {
-  content: "\f1f3";
-}
-.fa-cc-paypal:before {
-  content: "\f1f4";
-}
-.fa-cc-stripe:before {
-  content: "\f1f5";
-}
-.fa-bell-slash:before {
-  content: "\f1f6";
-}
-.fa-bell-slash-o:before {
-  content: "\f1f7";
-}
-.fa-trash:before {
-  content: "\f1f8";
-}
-.fa-copyright:before {
-  content: "\f1f9";
-}
-.fa-at:before {
-  content: "\f1fa";
-}
-.fa-eyedropper:before {
-  content: "\f1fb";
-}
-.fa-paint-brush:before {
-  content: "\f1fc";
-}
-.fa-birthday-cake:before {
-  content: "\f1fd";
-}
-.fa-area-chart:before {
-  content: "\f1fe";
-}
-.fa-pie-chart:before {
-  content: "\f200";
-}
-.fa-line-chart:before {
-  content: "\f201";
-}
-.fa-lastfm:before {
-  content: "\f202";
-}
-.fa-lastfm-square:before {
-  content: "\f203";
-}
-.fa-toggle-off:before {
-  content: "\f204";
-}
-.fa-toggle-on:before {
-  content: "\f205";
-}
-.fa-bicycle:before {
-  content: "\f206";
-}
-.fa-bus:before {
-  content: "\f207";
-}
-.fa-ioxhost:before {
-  content: "\f208";
-}
-.fa-angellist:before {
-  content: "\f209";
-}
-.fa-cc:before {
-  content: "\f20a";
-}
-.fa-shekel:before,
-.fa-sheqel:before,
-.fa-ils:before {
-  content: "\f20b";
-}
-.fa-meanpath:before {
-  content: "\f20c";
-}
-.fa-buysellads:before {
-  content: "\f20d";
-}
-.fa-connectdevelop:before {
-  content: "\f20e";
-}
-.fa-dashcube:before {
-  content: "\f210";
-}
-.fa-forumbee:before {
-  content: "\f211";
-}
-.fa-leanpub:before {
-  content: "\f212";
-}
-.fa-sellsy:before {
-  content: "\f213";
-}
-.fa-shirtsinbulk:before {
-  content: "\f214";
-}
-.fa-simplybuilt:before {
-  content: "\f215";
-}
-.fa-skyatlas:before {
-  content: "\f216";
-}
-.fa-cart-plus:before {
-  content: "\f217";
-}
-.fa-cart-arrow-down:before {
-  content: "\f218";
-}
-.fa-diamond:before {
-  content: "\f219";
-}
-.fa-ship:before {
-  content: "\f21a";
-}
-.fa-user-secret:before {
-  content: "\f21b";
-}
-.fa-motorcycle:before {
-  content: "\f21c";
-}
-.fa-street-view:before {
-  content: "\f21d";
-}
-.fa-heartbeat:before {
-  content: "\f21e";
-}
-.fa-venus:before {
-  content: "\f221";
-}
-.fa-mars:before {
-  content: "\f222";
-}
-.fa-mercury:before {
-  content: "\f223";
-}
-.fa-intersex:before,
-.fa-transgender:before {
-  content: "\f224";
-}
-.fa-transgender-alt:before {
-  content: "\f225";
-}
-.fa-venus-double:before {
-  content: "\f226";
-}
-.fa-mars-double:before {
-  content: "\f227";
-}
-.fa-venus-mars:before {
-  content: "\f228";
-}
-.fa-mars-stroke:before {
-  content: "\f229";
-}
-.fa-mars-stroke-v:before {
-  content: "\f22a";
-}
-.fa-mars-stroke-h:before {
-  content: "\f22b";
-}
-.fa-neuter:before {
-  content: "\f22c";
-}
-.fa-genderless:before {
-  content: "\f22d";
-}
-.fa-facebook-official:before {
-  content: "\f230";
-}
-.fa-pinterest-p:before {
-  content: "\f231";
-}
-.fa-whatsapp:before {
-  content: "\f232";
-}
-.fa-server:before {
-  content: "\f233";
-}
-.fa-user-plus:before {
-  content: "\f234";
-}
-.fa-user-times:before {
-  content: "\f235";
-}
-.fa-hotel:before,
-.fa-bed:before {
-  content: "\f236";
-}
-.fa-viacoin:before {
-  content: "\f237";
-}
-.fa-train:before {
-  content: "\f238";
-}
-.fa-subway:before {
-  content: "\f239";
-}
-.fa-medium:before {
-  content: "\f23a";
-}
-.fa-yc:before,
-.fa-y-combinator:before {
-  content: "\f23b";
-}
-.fa-optin-monster:before {
-  content: "\f23c";
-}
-.fa-opencart:before {
-  content: "\f23d";
-}
-.fa-expeditedssl:before {
-  content: "\f23e";
-}
-.fa-battery-4:before,
-.fa-battery:before,
-.fa-battery-full:before {
-  content: "\f240";
-}
-.fa-battery-3:before,
-.fa-battery-three-quarters:before {
-  content: "\f241";
-}
-.fa-battery-2:before,
-.fa-battery-half:before {
-  content: "\f242";
-}
-.fa-battery-1:before,
-.fa-battery-quarter:before {
-  content: "\f243";
-}
-.fa-battery-0:before,
-.fa-battery-empty:before {
-  content: "\f244";
-}
-.fa-mouse-pointer:before {
-  content: "\f245";
-}
-.fa-i-cursor:before {
-  content: "\f246";
-}
-.fa-object-group:before {
-  content: "\f247";
-}
-.fa-object-ungroup:before {
-  content: "\f248";
-}
-.fa-sticky-note:before {
-  content: "\f249";
-}
-.fa-sticky-note-o:before {
-  content: "\f24a";
-}
-.fa-cc-jcb:before {
-  content: "\f24b";
-}
-.fa-cc-diners-club:before {
-  content: "\f24c";
-}
-.fa-clone:before {
-  content: "\f24d";
-}
-.fa-balance-scale:before {
-  content: "\f24e";
-}
-.fa-hourglass-o:before {
-  content: "\f250";
-}
-.fa-hourglass-1:before,
-.fa-hourglass-start:before {
-  content: "\f251";
-}
-.fa-hourglass-2:before,
-.fa-hourglass-half:before {
-  content: "\f252";
-}
-.fa-hourglass-3:before,
-.fa-hourglass-end:before {
-  content: "\f253";
-}
-.fa-hourglass:before {
-  content: "\f254";
-}
-.fa-hand-grab-o:before,
-.fa-hand-rock-o:before {
-  content: "\f255";
-}
-.fa-hand-stop-o:before,
-.fa-hand-paper-o:before {
-  content: "\f256";
-}
-.fa-hand-scissors-o:before {
-  content: "\f257";
-}
-.fa-hand-lizard-o:before {
-  content: "\f258";
-}
-.fa-hand-spock-o:before {
-  content: "\f259";
-}
-.fa-hand-pointer-o:before {
-  content: "\f25a";
-}
-.fa-hand-peace-o:before {
-  content: "\f25b";
-}
-.fa-trademark:before {
-  content: "\f25c";
-}
-.fa-registered:before {
-  content: "\f25d";
-}
-.fa-creative-commons:before {
-  content: "\f25e";
-}
-.fa-gg:before {
-  content: "\f260";
-}
-.fa-gg-circle:before {
-  content: "\f261";
-}
-.fa-tripadvisor:before {
-  content: "\f262";
-}
-.fa-odnoklassniki:before {
-  content: "\f263";
-}
-.fa-odnoklassniki-square:before {
-  content: "\f264";
-}
-.fa-get-pocket:before {
-  content: "\f265";
-}
-.fa-wikipedia-w:before {
-  content: "\f266";
-}
-.fa-safari:before {
-  content: "\f267";
-}
-.fa-chrome:before {
-  content: "\f268";
-}
-.fa-firefox:before {
-  content: "\f269";
-}
-.fa-opera:before {
-  content: "\f26a";
-}
-.fa-internet-explorer:before {
-  content: "\f26b";
-}
-.fa-tv:before,
-.fa-television:before {
-  content: "\f26c";
-}
-.fa-contao:before {
-  content: "\f26d";
-}
-.fa-500px:before {
-  content: "\f26e";
-}
-.fa-amazon:before {
-  content: "\f270";
-}
-.fa-calendar-plus-o:before {
-  content: "\f271";
-}
-.fa-calendar-minus-o:before {
-  content: "\f272";
-}
-.fa-calendar-times-o:before {
-  content: "\f273";
-}
-.fa-calendar-check-o:before {
-  content: "\f274";
-}
-.fa-industry:before {
-  content: "\f275";
-}
-.fa-map-pin:before {
-  content: "\f276";
-}
-.fa-map-signs:before {
-  content: "\f277";
-}
-.fa-map-o:before {
-  content: "\f278";
-}
-.fa-map:before {
-  content: "\f279";
-}
-.fa-commenting:before {
-  content: "\f27a";
-}
-.fa-commenting-o:before {
-  content: "\f27b";
-}
-.fa-houzz:before {
-  content: "\f27c";
-}
-.fa-vimeo:before {
-  content: "\f27d";
-}
-.fa-black-tie:before {
-  content: "\f27e";
-}
-.fa-fonticons:before {
-  content: "\f280";
-}
-.fa-reddit-alien:before {
-  content: "\f281";
-}
-.fa-edge:before {
-  content: "\f282";
-}
-.fa-credit-card-alt:before {
-  content: "\f283";
-}
-.fa-codiepie:before {
-  content: "\f284";
-}
-.fa-modx:before {
-  content: "\f285";
-}
-.fa-fort-awesome:before {
-  content: "\f286";
-}
-.fa-usb:before {
-  content: "\f287";
-}
-.fa-product-hunt:before {
-  content: "\f288";
-}
-.fa-mixcloud:before {
-  content: "\f289";
-}
-.fa-scribd:before {
-  content: "\f28a";
-}
-.fa-pause-circle:before {
-  content: "\f28b";
-}
-.fa-pause-circle-o:before {
-  content: "\f28c";
-}
-.fa-stop-circle:before {
-  content: "\f28d";
-}
-.fa-stop-circle-o:before {
-  content: "\f28e";
-}
-.fa-shopping-bag:before {
-  content: "\f290";
-}
-.fa-shopping-basket:before {
-  content: "\f291";
-}
-.fa-hashtag:before {
-  content: "\f292";
-}
-.fa-bluetooth:before {
-  content: "\f293";
-}
-.fa-bluetooth-b:before {
-  content: "\f294";
-}
-.fa-percent:before {
-  content: "\f295";
-}
-.fa-gitlab:before {
-  content: "\f296";
-}
-.fa-wpbeginner:before {
-  content: "\f297";
-}
-.fa-wpforms:before {
-  content: "\f298";
-}
-.fa-envira:before {
-  content: "\f299";
-}
-.fa-universal-access:before {
-  content: "\f29a";
-}
-.fa-wheelchair-alt:before {
-  content: "\f29b";
-}
-.fa-question-circle-o:before {
-  content: "\f29c";
-}
-.fa-blind:before {
-  content: "\f29d";
-}
-.fa-audio-description:before {
-  content: "\f29e";
-}
-.fa-volume-control-phone:before {
-  content: "\f2a0";
-}
-.fa-braille:before {
-  content: "\f2a1";
-}
-.fa-assistive-listening-systems:before {
-  content: "\f2a2";
-}
-.fa-asl-interpreting:before,
-.fa-american-sign-language-interpreting:before {
-  content: "\f2a3";
-}
-.fa-deafness:before,
-.fa-hard-of-hearing:before,
-.fa-deaf:before {
-  content: "\f2a4";
-}
-.fa-glide:before {
-  content: "\f2a5";
-}
-.fa-glide-g:before {
-  content: "\f2a6";
-}
-.fa-signing:before,
-.fa-sign-language:before {
-  content: "\f2a7";
-}
-.fa-low-vision:before {
-  content: "\f2a8";
-}
-.fa-viadeo:before {
-  content: "\f2a9";
-}
-.fa-viadeo-square:before {
-  content: "\f2aa";
-}
-.fa-snapchat:before {
-  content: "\f2ab";
-}
-.fa-snapchat-ghost:before {
-  content: "\f2ac";
-}
-.fa-snapchat-square:before {
-  content: "\f2ad";
-}
-.fa-pied-piper:before {
-  content: "\f2ae";
-}
-.fa-first-order:before {
-  content: "\f2b0";
-}
-.fa-yoast:before {
-  content: "\f2b1";
-}
-.fa-themeisle:before {
-  content: "\f2b2";
-}
-.fa-google-plus-circle:before,
-.fa-google-plus-official:before {
-  content: "\f2b3";
-}
-.fa-fa:before,
-.fa-font-awesome:before {
-  content: "\f2b4";
-}
-.fa-handshake-o:before {
-  content: "\f2b5";
-}
-.fa-envelope-open:before {
-  content: "\f2b6";
-}
-.fa-envelope-open-o:before {
-  content: "\f2b7";
-}
-.fa-linode:before {
-  content: "\f2b8";
-}
-.fa-address-book:before {
-  content: "\f2b9";
-}
-.fa-address-book-o:before {
-  content: "\f2ba";
-}
-.fa-vcard:before,
-.fa-address-card:before {
-  content: "\f2bb";
-}
-.fa-vcard-o:before,
-.fa-address-card-o:before {
-  content: "\f2bc";
-}
-.fa-user-circle:before {
-  content: "\f2bd";
-}
-.fa-user-circle-o:before {
-  content: "\f2be";
-}
-.fa-user-o:before {
-  content: "\f2c0";
-}
-.fa-id-badge:before {
-  content: "\f2c1";
-}
-.fa-drivers-license:before,
-.fa-id-card:before {
-  content: "\f2c2";
-}
-.fa-drivers-license-o:before,
-.fa-id-card-o:before {
-  content: "\f2c3";
-}
-.fa-quora:before {
-  content: "\f2c4";
-}
-.fa-free-code-camp:before {
-  content: "\f2c5";
-}
-.fa-telegram:before {
-  content: "\f2c6";
-}
-.fa-thermometer-4:before,
-.fa-thermometer:before,
-.fa-thermometer-full:before {
-  content: "\f2c7";
-}
-.fa-thermometer-3:before,
-.fa-thermometer-three-quarters:before {
-  content: "\f2c8";
-}
-.fa-thermometer-2:before,
-.fa-thermometer-half:before {
-  content: "\f2c9";
-}
-.fa-thermometer-1:before,
-.fa-thermometer-quarter:before {
-  content: "\f2ca";
-}
-.fa-thermometer-0:before,
-.fa-thermometer-empty:before {
-  content: "\f2cb";
-}
-.fa-shower:before {
-  content: "\f2cc";
-}
-.fa-bathtub:before,
-.fa-s15:before,
-.fa-bath:before {
-  content: "\f2cd";
-}
-.fa-podcast:before {
-  content: "\f2ce";
-}
-.fa-window-maximize:before {
-  content: "\f2d0";
-}
-.fa-window-minimize:before {
-  content: "\f2d1";
-}
-.fa-window-restore:before {
-  content: "\f2d2";
-}
-.fa-times-rectangle:before,
-.fa-window-close:before {
-  content: "\f2d3";
-}
-.fa-times-rectangle-o:before,
-.fa-window-close-o:before {
-  content: "\f2d4";
-}
-.fa-bandcamp:before {
-  content: "\f2d5";
-}
-.fa-grav:before {
-  content: "\f2d6";
-}
-.fa-etsy:before {
-  content: "\f2d7";
-}
-.fa-imdb:before {
-  content: "\f2d8";
-}
-.fa-ravelry:before {
-  content: "\f2d9";
-}
-.fa-eercast:before {
-  content: "\f2da";
-}
-.fa-microchip:before {
-  content: "\f2db";
-}
-.fa-snowflake-o:before {
-  content: "\f2dc";
-}
-.fa-superpowers:before {
-  content: "\f2dd";
-}
-.fa-wpexplorer:before {
-  content: "\f2de";
-}
-.fa-meetup:before {
-  content: "\f2e0";
-}
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.visually-hidden-focusable:active,
-.visually-hidden-focusable:focus {
-  position: static;
-  width: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-}
diff --git a/addons/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff b/addons/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff
deleted file mode 100644
index 400014a4b06eee..00000000000000
Binary files a/addons/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff and /dev/null differ
diff --git a/addons/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2 b/addons/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2
deleted file mode 100644
index 4d13fc60404b91..00000000000000
Binary files a/addons/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2 and /dev/null differ
diff --git a/addons/web/static/src/libs/materialsymbols/MaterialSymbols-400brd.woff2 b/addons/web/static/src/libs/materialsymbols/MaterialSymbols-400brd.woff2
new file mode 100644
index 00000000000000..b5069a7cbf7e3b
Binary files /dev/null and b/addons/web/static/src/libs/materialsymbols/MaterialSymbols-400brd.woff2 differ
diff --git a/addons/web/static/src/libs/materialsymbols/MaterialSymbolsRounded_wgth-400_opsz-24.woff2 b/addons/web/static/src/libs/materialsymbols/MaterialSymbolsRounded_wgth-400_opsz-24.woff2
new file mode 100644
index 00000000000000..1a42933d00430b
Binary files /dev/null and b/addons/web/static/src/libs/materialsymbols/MaterialSymbolsRounded_wgth-400_opsz-24.woff2 differ
diff --git a/addons/web/static/src/libs/materialsymbols/MaterialSymbolsSharp_wgth-400_opsz-24.woff2 b/addons/web/static/src/libs/materialsymbols/MaterialSymbolsSharp_wgth-400_opsz-24.woff2
new file mode 100644
index 00000000000000..01153a23083edd
Binary files /dev/null and b/addons/web/static/src/libs/materialsymbols/MaterialSymbolsSharp_wgth-400_opsz-24.woff2 differ
diff --git a/addons/web/static/src/libs/materialsymbols/materialsymbols.css b/addons/web/static/src/libs/materialsymbols/materialsymbols.css
new file mode 100644
index 00000000000000..e7b136a593704c
--- /dev/null
+++ b/addons/web/static/src/libs/materialsymbols/materialsymbols.css
@@ -0,0 +1,10 @@
+@font-face {
+    font-family: "material_symbols_sharp";
+    font-style: normal;
+    src: url(MaterialSymbolsSharp_wgth-400_opsz-24.woff2) format('woff2');
+}
+@font-face {
+    font-family: "material_symbols_rounded";
+    font-style: normal;
+    src: url(MaterialSymbolsRounded_wgth-400_opsz-24.woff2) format('woff2');
+}
diff --git a/addons/web/static/src/model/relational_model/record.js b/addons/web/static/src/model/relational_model/record.js
index beb6919849496d..2899f67571d421 100644
--- a/addons/web/static/src/model/relational_model/record.js
+++ b/addons/web/static/src/model/relational_model/record.js
@@ -1201,7 +1201,7 @@ export class Record extends DataPoint {
                 this.model._closeUrgentSaveNotification = this.model.notification.add(
                     _t(
                         `Heads up! Your recent changes are too large to save automatically. Please click the %(uploadIcon)s button now to ensure your work is saved before you exit this tab.`,
-                        { uploadIcon: markup`<i class="fa fa-cloud-upload fa-fw"></i>` }
+                        { uploadIcon: markup`<i class="oi oi-fw" data-icon="cloud_upload"></i>` }
                     ),
                     { sticky: true }
                 );
diff --git a/addons/web/static/src/public/database_manager.create_form.qweb.html b/addons/web/static/src/public/database_manager.create_form.qweb.html
index c3c3613a3002bd..3a005301e6bb8e 100644
--- a/addons/web/static/src/public/database_manager.create_form.qweb.html
+++ b/addons/web/static/src/public/database_manager.create_form.qweb.html
@@ -17,7 +17,7 @@
         <div class="col-md-8">
             <div class="input-group">
                 <input id="password" type="password" name="password" class="form-control" required="required" autocomplete="off"/>
-                <span class="fa fa-eye o_little_eye input-group-text" aria-hidden="true" style="cursor: pointer;"></span>
+                <span class="oi o_little_eye input-group-text" data-icon="visibility" aria-hidden="true" style="cursor: pointer;"></span>
             </div>
         </div>
     </div>
diff --git a/addons/web/static/src/public/database_manager.master_input.qweb.html b/addons/web/static/src/public/database_manager.master_input.qweb.html
index 4760bddab663ea..f7b325a3f902c4 100644
--- a/addons/web/static/src/public/database_manager.master_input.qweb.html
+++ b/addons/web/static/src/public/database_manager.master_input.qweb.html
@@ -26,7 +26,7 @@
                         autofocus="autofocus"
                         type="password"
                         autocomplete="current-password" />
-                    <span class="fa fa-eye o_little_eye input-group-text" aria-hidden="true" style="cursor: pointer;"></span>
+                    <span class="oi o_little_eye input-group-text" data-icon="visibility" aria-hidden="true" style="cursor: pointer;"></span>
                 </div>
             </div>
         </div>
diff --git a/addons/web/static/src/public/database_manager.qweb.html b/addons/web/static/src/public/database_manager.qweb.html
index 2692027f8b1bd0..384d18dbb5011a 100644
--- a/addons/web/static/src/public/database_manager.qweb.html
+++ b/addons/web/static/src/public/database_manager.qweb.html
@@ -3,7 +3,7 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title>Odoo</title>
     <link rel="shortcut icon" href="/web/static/img/favicon.ico" type="image/x-icon" />
-    <link rel="stylesheet" href="/web/static/src/libs/fontawesome/css/font-awesome.css" />
+    <link rel="stylesheet" href="/web/static/src/libs/materialsymbols/materialsymbols.css" />
     <link rel="stylesheet" href="/web/static/lib/bootstrap/dist/css/bootstrap.css" />
     <script src="/web/static/lib/bootstrap/js/dist/util/index.js" ></script>
     <script src="/web/static/lib/bootstrap/js/dist/dom/data.js" ></script>
@@ -50,20 +50,20 @@
                             <div class="list-group-item d-flex align-items-center">
                                 <a t-attf-href="/odoo?db={{ db }}" class="d-block flex-grow-1">
                                     <t t-if="db in incompatible_databases">
-                                        <i class="icon fa fa-warning float-end text-warning" title="This database may not be compatible"></i>
+                                        <i class="icon oi float-end text-warning" data-icon="warning" title="This database may not be compatible"></i>
                                     </t>
                                     <t t-out="db" />
                                 </a>
                                 <t t-if="manage">
                                     <div class="btn-group btn-group-sm float-end">
                                         <button type="button" t-att-data-db="db" data-bs-target=".o_database_backup" class="o_database_action btn btn-primary">
-                                            <i class="fa fa-floppy-o fa-fw"></i> Backup
+                                            <i class="oi oi-fw" data-icon="save"></i> Backup
                                         </button>
                                         <button type="button" t-att-data-db="db" data-bs-target=".o_database_duplicate" class="o_database_action btn btn-secondary">
-                                            <i class="fa fa-files-o fa-fw"></i> Duplicate
+                                            <i class="oi oi-fw" data-icon="content_copy"></i> Duplicate
                                         </button>
                                         <button type="button" t-att-data-db="db" data-bs-target=".o_database_delete" class="o_database_action btn btn-danger">
-                                            <i class="fa fa-trash-o fa-fw"></i> Delete
+                                            <i class="oi oi-fw" data-icon="delete"></i> Delete
                                         </button>
                                     </div>
                                 </t>
@@ -185,7 +185,7 @@ <h4 class="modal-title">Set Master Password</h4>
                                 <div class="col-md-7">
                                     <div class="input-group">
                                         <input id="master_pwd_new" type="password" name="master_pwd_new" class="form-control" required="required" autocomplete="new-password"/>
-                                        <span class="fa fa-eye o_little_eye input-group-text" aria-hidden="true" style="cursor: pointer;"></span>
+                                        <span class="oi o_little_eye input-group-text" data-icon="visibility" aria-hidden="true" style="cursor: pointer;"></span>
                                     </div>
                                 </div>
                             </div>
diff --git a/addons/web/static/src/public/show_password.js b/addons/web/static/src/public/show_password.js
index c6cb11e56c6e8b..4241cef8d03e05 100644
--- a/addons/web/static/src/public/show_password.js
+++ b/addons/web/static/src/public/show_password.js
@@ -12,10 +12,7 @@ export class ShowPassword extends Interaction {
             "t-att-type": () => this.showPassword ? "text" : "password",
         },
         ".o_show_password > i": {
-            "t-att-class": () => ({
-                "fa-eye": !this.showPassword,
-                "fa-eye-slash": !!this.showPassword,
-            }),
+            "t-att-data-icon": () => this.showPassword ? "visibility_off" : "visibility",
         },
     };
 }
diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index 86813e43c3276a..f55117d808aeb0 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -89,7 +89,7 @@
 
 // Review $link-decoration behavior
 @if $link-decoration and $link-decoration != none {
-    .btn:not(.btn-link), .nav-link, .dropdown-item, .page-link, .breadcrumb-item > a, .badge, .fa {
+    .btn:not(.btn-link), .nav-link, .dropdown-item, .page-link, .breadcrumb-item > a, .badge, .oi {
         &, &:hover, &:focus {
             text-decoration: none;
         }
diff --git a/addons/web/static/src/scss/bootstrap_review_backend.scss b/addons/web/static/src/scss/bootstrap_review_backend.scss
index 9205c5c26e3e0a..b4bd4c9b62b8eb 100644
--- a/addons/web/static/src/scss/bootstrap_review_backend.scss
+++ b/addons/web/static/src/scss/bootstrap_review_backend.scss
@@ -125,7 +125,7 @@ $-o-theme-text-colors: map-merge($theme-colors, $o-theme-text-colors);
 
     @each $-name, $-color in $-o-theme-text-colors{
         &.btn-#{$-name}, &.text-#{$-name} {
-            @include o-btn-link-variant($o-gray-600!important, o-text-color($-name) or $-color!important);
+            @include o-btn-link-variant($o-main-text-color!important, o-text-color($-name) or $-color!important);
         }
     }
 }
@@ -260,7 +260,7 @@ $-o-bg-colors-custom: null;
 .btn-link {
     @each $-name, $-color in $o-text-colors-custom{
         &.btn-#{$-name}, &.text-#{$-name} {
-            @include o-btn-link-variant($o-gray-600!important, o-text-color($-name) or $-color!important);
+            @include o-btn-link-variant($o-main-text-color!important, o-text-color($-name) or $-color!important);
         }
     }
 }
diff --git a/addons/web/static/src/scss/fontawesome_overridden.scss b/addons/web/static/src/scss/fontawesome_overridden.scss
deleted file mode 100644
index 53efc793c80cf4..00000000000000
--- a/addons/web/static/src/scss/fontawesome_overridden.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-// Some icons that we wanted to complete the font-awesome library have been
-// imported into Odoo UI Icons (oi-*), but we keep some old fa variant classes
-// to maintain compatibility.
-%additional-fa-classes {
-    font-family: 'odoo_ui_icons' !important;
-}
-.fa.fa-tiktok {
-    @extend %additional-fa-classes;
-
-    &::before {
-        content: '\e81b';
-    }
-}
-// Don't write `.fa.fa-twitter` or this will be considered like a new icon in
-// the media dialog. The css here is just about overriding the existing twitter
-// icon and should not be considered as a new icon, otherwise those icons will
-// be shown twice in the media dialog. Grep: `iconsParser` and `fontIcons`.
-.fa-twitter.fa {
-    @extend %additional-fa-classes;
-
-    &::before {
-        content: '\e81a';
-    }
-}
-.fa-twitter-square.fa {
-    @extend %additional-fa-classes;
-
-    &::before {
-        content: '\e848';
-    }
-}
-.fa.fa-discord {
-    @extend %additional-fa-classes;
-
-    &::before {
-        content: '\e811';
-    }
-}
-.fa.fa-google-play {
-    @extend %additional-fa-classes;
-
-    &::before {
-        content: "\e81d";
-    }
-}
-.fa.fa-strava {
-    @extend %additional-fa-classes;
-
-    &::before {
-        content: "\e80f";
-    }
-}
-.fa.fa-bluesky {
-    @extend %additional-fa-classes;
-
-    &::before {
-        content: "\e81c";
-    }
-}
-.fa.fa-kickstarter {
-    @extend %additional-fa-classes;
-
-    &::before {
-        content: "\e819";
-    }
-}
-.fa.fa-threads {
-    @extend %additional-fa-classes;
-
-    &::before {
-        content: "\e818";
-    }
-}
-
-// This is rtl language specific fix
-// It will override the font awesome symbols and flip them 180 degree
-.o_rtl {
-    .fa {
-        &.fa-align-right,
-        &.fa-align-left,
-        &.fa-chevron-right,
-        &.fa-chevron-left,
-        &.fa-arrow-right,
-        &.fa-arrow-left,
-        &.fa-hand-o-right,
-        &.fa-hand-o-left,
-        &.fa-arrow-circle-right,
-        &.fa-arrow-circle-left,
-        &.fa-caret-right,
-        &.fa-caret-left,
-        &.fa-rotate-right,
-        &.fa-rotate-left,
-        &.fa-angle-double-right,
-        &.fa-angle-double-left,
-        &.fa-angle-right,
-        &.fa-angle-left,
-        &.fa-quote-right,
-        &.fa-quote-left,
-        &.fa-chevron-circle-right,
-        &.fa-chevron-circle-left,
-        &.fa-long-arrow-right,
-        &.fa-long-arrow-left,
-        &.fa-toggle-right,
-        &.fa-toggle-left,
-        &.fa-caret-square-o-right,
-        &.fa-arrow-circle-o-left,
-        &.fa-arrow-circle-o-right,
-        &.fa-caret-square-o-left {
-            transform: rotate(180deg);
-        }
-    }
-}
diff --git a/addons/web/static/src/scss/ui.scss b/addons/web/static/src/scss/ui.scss
index 7f6e4eb77d9329..df500caab66330 100644
--- a/addons/web/static/src/scss/ui.scss
+++ b/addons/web/static/src/scss/ui.scss
@@ -15,7 +15,7 @@
 .o_btn_loading {
     opacity: $btn-disabled-opacity;
 
-    .fa:not(.fa-spin) {
+    .oi:not(.oi-spin) {
         display: none;
     }
 }
@@ -176,7 +176,7 @@ span.o_force_ltr {
 
 .modal {
     .o_cp_action_menus {
-        .o-dropdown:has(.fa-cog) {
+        .o-dropdown:has([data-icon="settings"]) {
             display: none;
         }
     }
diff --git a/addons/web/static/src/search/action_menus/action_menus.xml b/addons/web/static/src/search/action_menus/action_menus.xml
index 39f65bcc2f413e..fcfa155b7badf5 100644
--- a/addons/web/static/src/search/action_menus/action_menus.xml
+++ b/addons/web/static/src/search/action_menus/action_menus.xml
@@ -6,7 +6,7 @@
             <div t-if="this.props.items.print?.length" class="d-inline-block">
                 <Dropdown beforeOpen.bind="this.loadPrintItems">
                     <button class="btn btn-secondary" data-hotkey="shift+u">
-                        <i class="fa fa-print me-1"/>
+                        <i class="oi me-1" data-icon="print"/>
                         <span class="o_dropdown_title" t-out="this.props.printDropdownTitle"/>
                     </button>
                     <t t-set-slot="content">
@@ -24,7 +24,7 @@
             <div t-if="this.actionItems.length" class="d-inline-block">
                 <Dropdown>
                     <button class="btn btn-secondary" data-hotkey="u" data-available-offline="">
-                        <i class="fa fa-cog me-1"/>
+                        <i class="oi oi-filled me-1" data-icon="settings"/>
                         <span class="o_dropdown_title">Actions</span>
                     </button>
                     <t t-set-slot="content">
@@ -37,7 +37,7 @@
                              t-else=""
                              class="{ [item.class]: !!item.class, 'o_menu_item': true, 'pe-none text-muted opacity-50': offline.offline and !item.availableOffline }"
                              onSelected="() => this.onItemSelected(item)">
-                                <i t-if="item.icon" t-att-class="item.icon + ' me-1 fa-fw oi-fw'"/>
+                                <i t-if="item.icon" class="oi oi-fw me-1" t-att-class="item.icon_class" t-att-data-icon="item.icon"/>
                                 <t t-out="item.description"/>
                             </DropdownItem>
                             <t t-set="currentGroup" t-value="item.groupNumber"/>
diff --git a/addons/web/static/src/search/breadcrumbs/breadcrumbs.xml b/addons/web/static/src/search/breadcrumbs/breadcrumbs.xml
index fabf2bb57b5e9b..4a2cf1e60849c4 100644
--- a/addons/web/static/src/search/breadcrumbs/breadcrumbs.xml
+++ b/addons/web/static/src/search/breadcrumbs/breadcrumbs.xml
@@ -10,7 +10,7 @@
         <div t-if="collapsedBreadcrumbs.length || previousBreadcrumb" class="o_breadcrumb d-flex flex-row flex-md-column align-self-stretch justify-content-between min-w-0">
             <t t-if="this.env.isSmall">
                 <button class="o_back_button btn btn-link d-print-none px-1 py-0" t-on-click.prevent="previousBreadcrumb.onSelected" data-available-offline="">
-                    <i class="oi oi-fw oi-arrow-left"/>
+                    <i class="oi oi-fw" data-icon="west"/>
                 </button>
             </t>
             <t t-else="">
@@ -18,7 +18,7 @@
                     <li t-if="collapsedBreadcrumbs.length" class="breadcrumb-item d-inline-flex">
                         <Dropdown>
                             <button class="btn btn-light btn-sm px-1 p-0">
-                                <i class="oi oi-ellipsis-h align-middle"/>
+                                <i class="oi align-middle" data-icon="more_horiz"/>
                             </button>
                             <t t-set-slot="content">
                                 <t t-foreach="collapsedBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
diff --git a/addons/web/static/src/search/cog_menu/cog_menu.xml b/addons/web/static/src/search/cog_menu/cog_menu.xml
index ddcfae9d40651a..6fd4ae9a906938 100644
--- a/addons/web/static/src/search/cog_menu/cog_menu.xml
+++ b/addons/web/static/src/search/cog_menu/cog_menu.xml
@@ -6,7 +6,7 @@
             <div class="lh-1">
                 <Dropdown menuClass="'lh-base'" beforeOpen.bind="this.loadPrintItems">
                     <button class="d-print-none btn" t-att-class="this.env.isSmall ? 'btn-secondary' : 'lh-sm p-0 border-0'" data-hotkey="u" data-tooltip="Actions" aria-label="Actions menu" data-available-offline="">
-                        <i class="fa fa-fw fa-cog"/>
+                        <i class="oi oi-fw oi-filled" data-icon="settings"/>
                     </button>
 
                     <t t-set-slot="content">
@@ -14,7 +14,7 @@
                         <t t-if="this.state.printItems.length">
                             <Dropdown t-if="this.state.printItems.length > 1">
                                 <button>
-                                    <i class="fa fa-print me-1"/> <t t-out="this.props.printDropdownTitle"/>
+                                    <i class="oi me-1" data-icon="print"/> <t t-out="this.props.printDropdownTitle"/>
                                 </button>
                                 <t t-set-slot="content">
                                     <DropdownItem
@@ -31,7 +31,7 @@
                             </Dropdown>
 
                             <DropdownItem t-else="" class="'o_menu_item'" attrs="{ 'aria-label': this.getPrintItemAriaLabel(this.state.printItems[0]) }" onSelected="() => this.onItemSelected(this.state.printItems[0])">
-                                <i class="fa fa-print me-1"/> <t t-out="this.state.printItems[0].description"/>
+                                <i class="oi me-1" data-icon="print"/> <t t-out="this.state.printItems[0].description"/>
                             </DropdownItem>
                         </t>
 
@@ -47,7 +47,7 @@
                                 class="{ [item.class]: !!item.class, 'o_menu_item': true, 'pe-none text-muted opacity-50': offline.offline and !(item.availableOffline and !env.model.root.isNew) }"
                                 onSelected="() => this.onItemSelected(item)"
                             >
-                                <i t-if="item.icon" t-att-class="item.icon" class="fa-fw oi-fw me-1"/>
+                                <i t-if="item.icon" class="oi oi-fw me-1" t-att-class="item.icon_class" t-att-data-icon="item.icon"/>
                                 <t t-out="item.description"/>
                             </DropdownItem>
 
diff --git a/addons/web/static/src/search/control_panel/control_panel.scss b/addons/web/static/src/search/control_panel/control_panel.scss
index 9bd8e2d8c4ffcc..8a7bd5e638e467 100644
--- a/addons/web/static/src/search/control_panel/control_panel.scss
+++ b/addons/web/static/src/search/control_panel/control_panel.scss
@@ -153,9 +153,9 @@
     .o_save_current_view {
         &:before {
             margin-inline-end: map-get($spacers, 1);
-            font-family: FontAwesome;
+            font-family: 'material_symbols_sharp';
             opacity: $o-opacity-muted;
-            content: "\f0c7";
+            content: "save";
         }
     }
 }
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 9bb2feaa0f7821..832c3aec9edc42 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -25,7 +25,7 @@
                         <t t-if="this.display.buttons" t-slot="control-panel-buttons"/>
                         <Dropdown t-if="this.env.isSmall" menuClass="'o-control-panel-adaptive-dropdown'" onOpened.bind="this.dropdownifyButtons">
                             <button class="btn btn-secondary o-control-panel-adaptive-dropdown" title="More">
-                                <i class="oi oi-fw oi-ellipsis-v" />
+                                <i class="oi oi-fw" data-icon="more_vert"/>
                             </button>
                             <t t-set-slot="content">
                                 <t t-if="this.display.buttons" t-slot="control-panel-buttons"/>
@@ -86,14 +86,14 @@
                             t-att-class="{active: this.state.embeddedInfos.showEmbedded}"
                             t-on-click="this.onClickShowEmbedded"
                             title="View related documents">
-                        <i class="fa fa-sliders" />
+                        <i class="oi" data-icon="tune" />
                     </button>
                     <t t-if="this.env.config.viewSwitcherEntries?.length > 1">
                         <div t-if="this.env.isSmall" class="o_cp_switch_buttons btn-group d-print-none">
                             <Dropdown menuClass="{o_cp_switch_buttons: true, o_custom_bottom_sheet: true }">
                                 <button class="btn btn-secondary" data-available-offline="">
                                     <t t-set="activeView" t-value="this.env.config.viewSwitcherEntries.find((view) => view.active)"/>
-                                    <i class="oi-fw" t-att-class="activeView.icon"/>
+                                    <i class="oi oi-fw" t-att-data-icon="activeView.icon"/>
                                 </button>
                                 <t t-set-slot="content">
                                     <t t-foreach="this.env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
@@ -102,7 +102,7 @@
                                             attrs="{ 'data-available-offline': this.isViewAvailable(view)}"
                                             onSelected="() => this.switchView(view.type)"
                                             class="{ 'selected': view.active }">
-                                                <i class="oi-fw" t-att-class="view.icon"/>
+                                                <i class="oi oi-fw" t-att-data-icon="view.icon"/>
                                                 <span class="ms-1" t-out="view.name"/>
                                         </DropdownItem>
                                     </t>
@@ -119,7 +119,7 @@
                                     t-custom-click="(ev, isMiddleClick) => this.switchView(view.type, isMiddleClick)"
                                     t-att-aria-label="view.name + ' View'"
                                 >
-                                    <i class="oi-fw" t-att-class="view.icon" />
+                                    <i class="oi" t-att-class="view.icon_class"  t-att-data-icon="view.icon"/>
                                 </button>
                             </t>
                         </nav>
@@ -133,7 +133,7 @@
     <t t-name="web.embeddedActionsDropdown">
         <Dropdown menuClass="'o_embedded_actions_dropdown_menu'">
             <button name="openEmbeddedActions" class="btn btn-secondary">
-                <i class="fa fa-fw fa-sliders"/>
+                <i class="oi oi-fw" data-icon="tune"/>
             </button>
             <t t-set-slot="content">
                 <t t-foreach="this.state.embeddedInfos.embeddedActions" t-as="action" t-key="action.id">
@@ -144,7 +144,7 @@
                     >
                         <div class="d-flex p-0 pe-1 align-items-center justify-content-between">
                             <span t-out="action.name"/>
-                            <i t-if="action.is_deletable" class="o_icon_right btn btn-link text-danger p-0 position-absolute end-0 fa fa-trash-o" title="Delete item" t-on-click.stop="() => this.openConfirmationDialog(action)" />
+                            <i t-if="action.is_deletable" class="o_icon_right btn btn-link text-danger p-0 position-absolute end-0 oi" data-icon="delete" title="Delete item" t-on-click.stop="() => this.openConfirmationDialog(action)" />
                         </div>
                     </DropdownItem>
                 </t>
diff --git a/addons/web/static/src/search/search_arch_parser.js b/addons/web/static/src/search/search_arch_parser.js
index 066c88fce66968..471ea05ad7f05a 100644
--- a/addons/web/static/src/search/search_arch_parser.js
+++ b/addons/web/static/src/search/search_arch_parser.js
@@ -365,6 +365,7 @@ export class SearchArchParser {
                 expand: evaluateBooleanExpr(attrs.expand),
                 fieldName: attrs.name,
                 icon: attrs.icon || null,
+                icon_class: attrs.icon_class || null,
                 id: nextSectionId++,
                 limit: evaluateExpr(attrs.limit || String(DEFAULT_LIMIT)),
                 type,
@@ -372,7 +373,8 @@ export class SearchArchParser {
             };
             if (type === "category") {
                 section.activeValueId = this.searchPanelDefaults[attrs.name];
-                section.icon = section.icon || "fa-folder";
+                section.icon = section.icon || "folder";
+                section.icon_class = section.icon_class || "oi-filled";
                 section.hierarchize = evaluateBooleanExpr(attrs.hierarchize || "1");
                 section.depth = attrs.depth ? parseInt(attrs.depth) : 0;
                 section.values.set(false, {
@@ -386,7 +388,8 @@ export class SearchArchParser {
             } else {
                 section.domain = attrs.domain || "[]";
                 section.groupBy = attrs.groupby || null;
-                section.icon = section.icon || "fa-filter";
+                section.icon = section.icon || "filter_alt";
+                section.icon_class = section.icon_class || "oi-filled";
                 hasFilterWithDomain = hasFilterWithDomain || section.domain !== "[]";
             }
             this.sections.push([section.id, section]);
diff --git a/addons/web/static/src/search/search_bar/offline_search_bar.xml b/addons/web/static/src/search/search_bar/offline_search_bar.xml
index 1d8e18af3e2ef3..6382b1d61ea0e9 100644
--- a/addons/web/static/src/search/search_bar/offline_search_bar.xml
+++ b/addons/web/static/src/search/search_bar/offline_search_bar.xml
@@ -13,16 +13,16 @@
             >
                 <div class="d-flex w-100">
                     <div class="form-control d-print-contents d-flex align-items-center py-1 border-end-0 rounded-end-0" role="search" aria-autocomplete="list">
-                        <i class="d-print-none oi oi-search me-2" role="img"/>
+                        <i class="d-print-none oi me-2" data-icon="search" role="img"/>
                         <div class="d-flex flex-grow-1 flex-wrap gap-1 mw-100">
                             <t t-call="web.OfflineSearchBar.Facets">
                                 <t t-set="facets" t-value="this.currentSearch.facets"/>
                             </t>
                             <div t-if="this.canRemoveSearch()" class="o_searchview_facet d-print-none rounded-2 bg-200 px-1 cursor-pointer" data-tooltip="Clear search" t-on-click.stop="this.onRemoveSearch">
-                                <i class="oi oi-close small"/>
+                                <i class="oi small" data-icon="close"/>
                             </div>
                             <div t-elif="this.currentSearch.facets.length" class="o_searchview_facet d-print-none rounded-2 bg-200 px-1 opacity-50" data-tooltip="Can't remove that search">
-                                <i class="oi oi-close small"/>
+                                <i class="oi small" data-icon="close"/>
                             </div>
                             <input type="text"
                                 class="o_input d-print-none flex-grow-1 w-auto border-0"
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index 5a6330d0610293..1a805a4e4c025d 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -23,7 +23,7 @@
                         'btn btn-favourite': facet.type == 'favorite'
                     }"
                     >
-                    <i t-if="facet.icon" class="small fa-fw" t-att-class="facet.icon" role="image"/>
+                    <i t-if="facet.icon" class="oi oi-fw oi-filled small" t-att-class="{'oi-flip-vertical': facet.type == 'groupBy' and env.searchModel.orderByCount === 'Asc'}" t-att-data-icon="facet.icon" role="image"/>
                     <small t-else="" class="px-1" t-out="facet.title"/>
 
                     <!-- Editable facets' overlay -->
@@ -31,13 +31,13 @@
                         class="position-absolute start-0 top-0 bottom-0 end-0 bg-inherit opacity-0 opacity-100-hover"
                         t-att-class="{'px-2 transition-base': !facet.icon}"
                         >
-                        <i class="fa fa-fw fa-pencil"/>
+                        <i class="oi oi-fw oi-filled" data-icon="edit"/>
                     </span>
                     <span t-if="this.env.searchModel.canOrderByCount and facet.type === 'groupBy' and !this.env.searchModel.orderByCount"
                         class="position-absolute start-0 top-0 bottom-0 end-0 bg-inherit opacity-0 opacity-100-hover"
                         t-att-class="{'px-2 transition-base': !facet.icon}"
                         >
-                        <i class="fa fa-fw fa-sort"/>
+                        <i class="oi oi-fw" data-icon="swap_vert"/>
                     </span>
                 </div>
 
@@ -46,7 +46,7 @@
                         <em t-if="!facetValue_first" class="o_facet_values_sep small fw-bold mx-1 opacity-50" t-out="facet.separator"/>
                         <small class="o_facet_value text-truncate" t-out="facetValue" t-att-title="facet.tooltip or facetValue"/>
                     </t>
-                    <button class="o_facet_remove oi oi-close btn btn-link py-0 px-2 text-danger d-print-none"
+                    <button class="o_facet_remove oi btn btn-link py-0 px-2 text-danger d-print-none" data-icon="close_small"
                         aria-label="Remove"
                         title="Remove"
                         t-on-click="() => this.onFacetRemove(facet)"
@@ -70,7 +70,7 @@
                         href="#"
                         t-on-click.stop.prevent="() => this.toggleItem(item, !item.isExpanded)"
                         >
-                        <i t-attf-class="fa fa-caret-{{ item.isExpanded ? 'down' : 'right' }}"/>
+                        <i class="oi" t-attf-data-icon="{{ item.isExpanded ? 'arrow_drop_down' : 'arrow_right' }}"/>
                     </a>
                 </t>
                 <a href="#" t-on-click.prevent="" t-att-class="{'ps-3 pe-2 text-truncate': item.isFieldProperty }" t-att-title="item.title">
@@ -105,7 +105,7 @@
                         title="Search..."
                         t-on-click="this.onClickSearchIcon"
                     >
-                        <i class="o_searchview_icon oi oi-search me-2"
+                        <i class="o_searchview_icon oi me-2" data-icon="search"
                             role="img"
                         />
                     </button>
diff --git a/addons/web/static/src/search/search_bar/search_bar_toggler.xml b/addons/web/static/src/search/search_bar/search_bar_toggler.xml
index b359644ed59aa0..997c5d060a332c 100644
--- a/addons/web/static/src/search/search_bar/search_bar_toggler.xml
+++ b/addons/web/static/src/search/search_bar/search_bar_toggler.xml
@@ -3,13 +3,13 @@
 
     <t t-name="web.SearchBar.Toggler">
         <button t-if="this.props.isSmall" t-attf-class="btn btn-secondary {{ this.props.showSearchBar ? 'active' : '' }}" t-on-click="this.props.toggleSearchBar">
-            <i class="fa fa-fw fa-search"/>
+            <i class="oi oi-fw" data-icon="search"/>
         </button>
     </t>
 
     <t t-name="web.SearchBar.Toggler.Offline">
         <button t-if="this.props.isSmall" t-att-disabled="this.isDisabled" t-attf-class="btn btn-secondary {{ this.props.showSearchBar ? 'active' : '' }}" t-on-click="this.props.toggleSearchBar" data-available-offline="">
-            <i class="fa fa-fw fa-search"/>
+            <i class="oi oi-fw" data-icon="search"/>
         </button>
     </t>
 
diff --git a/addons/web/static/src/search/search_bar_menu/search_bar_menu.xml b/addons/web/static/src/search/search_bar_menu/search_bar_menu.xml
index 43ae4c85f45dad..f01f7747742471 100644
--- a/addons/web/static/src/search/search_bar_menu/search_bar_menu.xml
+++ b/addons/web/static/src/search/search_bar_menu/search_bar_menu.xml
@@ -18,7 +18,7 @@
                 <t t-if="this.env.searchModel.searchMenuTypes.has('filter')">
                     <div class="o_dropdown_container o_filter_menu w-100 w-lg-auto h-100 px-3 mb-4 mb-lg-0 border-end">
                         <div class="px-3 fs-5 mb-2">
-                            <i class="me-2 text-primary" t-att-class="this.facet_icons.filter"/>
+                            <i class="oi oi-filled me-2 text-primary" t-att-data-icon="this.facet_icons.filter"/>
                             <h5 class="o_dropdown_title d-inline">Filters</h5>
                         </div>
                         <t t-set="currentGroup" t-value="null"/>
@@ -64,7 +64,7 @@
                 <t t-if="this.env.searchModel.searchMenuTypes.has('groupBy')">
                     <div class="o_dropdown_container o_group_by_menu w-100 w-lg-auto h-100 px-3 mb-4 mb-lg-0 border-end">
                         <div class="px-3 fs-5 mb-2">
-                            <i class="me-2 text-action" t-att-class="this.facet_icons.groupBy"/>
+                            <i class="oi me-2 text-action" t-att-data-icon="this.facet_icons.groupBy"/>
                             <h5 class="o_dropdown_title d-inline">Group By</h5>
                         </div>
                         <t t-set="currentGroup" t-value="null"/>
@@ -116,7 +116,7 @@
                         <t t-set="sharedFavoritesItems" t-value="this.sharedFavorites" />
                         <t t-set="favoriteItems" t-value="this.favorites" />
                         <div class="px-3 fs-5 mb-2">
-                            <i class="me-2 text-favourite" t-att-class="this.facet_icons.favorite"/>
+                            <i class="oi oi-filled me-2 text-favourite" t-att-data-icon="this.facet_icons.favorite"/>
                             <h5 class="o_dropdown_title d-inline">Favorites</h5>
                         </div>
                         <t t-foreach="favoriteItems" t-as="item" t-key="item.id">
@@ -154,7 +154,8 @@
         >
             <span class="d-flex p-0 align-items-center justify-content-between">
                 <span t-out="item.description" t-att-title="item.description.length > 15 ? item.description : ''" class="text-truncate flex-grow-1"/>
-                <i class="ms-1 fa fa-pencil"
+                <i class="oi oi-filled ms-1"
+                    data-icon="edit"
                     title="Edit favorite"
                     t-on-click.stop="() => this.editFavorite(item.id)"
                 />
diff --git a/addons/web/static/src/search/search_panel/search_panel.js b/addons/web/static/src/search/search_panel/search_panel.js
index 21d80da89ab447..7cf707b4fc34af 100644
--- a/addons/web/static/src/search/search_panel/search_panel.js
+++ b/addons/web/static/src/search/search_panel/search_panel.js
@@ -235,6 +235,7 @@ export class SearchPanel extends Component {
             selection.push({
                 values: orderedCategoryNames,
                 icon: category.icon,
+                icon_class: category.icon_class,
                 color: category.color,
             });
         }
@@ -249,7 +250,7 @@ export class SearchPanel extends Component {
     getFilterSelection() {
         const filters = this.env.searchModel.getSections(isFilter);
         const selection = [];
-        for (const { groups, values, icon, color } of filters) {
+        for (const { groups, values, icon, icon_class, color } of filters) {
             let filterValues;
             if (groups) {
                 filterValues = Object.keys(groups)
@@ -259,7 +260,7 @@ export class SearchPanel extends Component {
                 filterValues = nameOfCheckedValues(values);
             }
             if (filterValues.length) {
-                selection.push({ values: filterValues, icon, color });
+                selection.push({ values: filterValues, icon, icon_class, color });
             }
         }
         return selection;
diff --git a/addons/web/static/src/search/search_panel/search_panel.scss b/addons/web/static/src/search/search_panel/search_panel.scss
index 8145ff0aefc94d..6baf05ad128b73 100644
--- a/addons/web/static/src/search/search_panel/search_panel.scss
+++ b/addons/web/static/src/search/search_panel/search_panel.scss
@@ -68,9 +68,17 @@
 }
 
 .o_search_panel_sidebar {
-    writing-mode: vertical-rl;
-    text-orientation: mixed;
     width: 3rem;
+
+    .o_search_panel_category {
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+    }
+    .o_search_panel_section_icon {
+        writing-mode: initial;
+        text-orientation: initial;
+    }
+
     @include media-breakpoint-up(md) {
         border-right: $border-width solid $border-color;
     }
diff --git a/addons/web/static/src/search/search_panel/search_panel.xml b/addons/web/static/src/search/search_panel/search_panel.xml
index 98191fed645755..abd6a0a0c90de8 100644
--- a/addons/web/static/src/search/search_panel/search_panel.xml
+++ b/addons/web/static/src/search/search_panel/search_panel.xml
@@ -17,7 +17,7 @@
         <t t-set="filters" t-value="this.getFilterSelection()" />
         <div class="d-flex">
             <button class="o_search_panel_sidebar_button btn btn-light btn-sm m-2 px-1 py-2" title="Open sidebar" aria-label="Open sidebar">
-                <i class="oi oi-panel-right fa-flip-horizontal"/>
+                <i class="oi" data-icon="left_panel_open"/>
             </button>
             <div class="o_search_panel_current_selection text-truncate mx-auto">
                 <t t-if="!categories.length and !filters.length">
@@ -27,7 +27,9 @@
                     <t t-foreach="categories" t-as="category" t-key="category_index">
                         <span class="o_search_panel_category mb-2">
                             <i t-if="category.icon"
-                                t-attf-class="o_search_panel_section_icon fa {{ category.icon }} fa-rotate-90 mb-2"
+                                class="o_search_panel_section_icon oi mb-2"
+                                t-att-class="category.icon_class"
+                                t-att-data-icon="category.icon"
                                 t-att-style="category.color and ('color: ' + category.color)"
                             />
                             <t t-out="category.values.join(' / ')" />
@@ -36,7 +38,9 @@
                     <t t-foreach="filters" t-as="filter" t-key="filter_index">
                         <span class="o_search_panel_filter mb-2">
                             <i t-if="filter.icon"
-                                t-attf-class="o_search_panel_section_icon fa {{ filter.icon }} fa-rotate-90 mb-2"
+                                class="o_search_panel_section_icon oi mb-2"
+                                t-att-class="filter.icon_class"
+                                t-att-data-icon="filter.icon"
                                 t-att-style="filter.color and ('color: ' + filter.color)"
                             />
                             <t t-out="filter.values.join(', ')" />
@@ -54,7 +58,7 @@
          t-custom-ref="root">
         <div t-if="!this.env.isSmall" class="d-flex align-items-center pt-2">
             <button class="btn btn-light btn-sm ms-auto" t-on-click="this.toggleSidebar">
-                <i class="oi oi-fw oi-panel-right fa-flip-horizontal"/>
+                <i class="oi" data-icon="left_panel_close"/>
             </button>
         </div>
         <div t-if="!this.sections or this.sections.length === 0" class="o_search_panel_empty_state me-3">
@@ -68,7 +72,7 @@
             <header
                 class="o_search_panel_section_header ps-2 pb-2 text-uppercase cursor-default"
                 t-attf-class="{{section_first ? 'pt-2' : 'pt-3'}}">
-                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{!section.color &amp;&amp; section.type == 'filter' ? 'text-warning' : !section.color ? 'text-primary': ''}} me-2"
+                <i t-attf-class="oi o_search_panel_section_icon {{!section.color &amp;&amp; section.type == 'filter' ? 'text-warning' : !section.color ? 'text-primary': ''}} me-2" t-att-class="section.icon_class" t-att-data-icon="section.icon"
                     t-att-style="section.color and ('color: ' + section.color)"
                 />
                 <b t-out="section.description"/>
@@ -160,7 +164,7 @@
             </div>
             <Dropdown t-foreach="this.sections" t-as="section" t-key="section.id" state="this.getDropdownState(section.id)" menuClass="'my-2 mx-1'" onOpened.bind="this.updateGroupHeadersChecked">
                 <span class="btn btn-secondary my-2 mx-1 o-dropdown-caret">
-                    <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{!section.color &amp;&amp; section.type == 'filter' ? 'text-warning' : !section.color ? 'text-primary': ''}} me-2"
+                    <i t-attf-class="oi o_search_panel_section_icon {{!section.color &amp;&amp; section.type == 'filter' ? 'text-warning' : !section.color ? 'text-primary': ''}} me-2" t-att-class="section.icon_class" t-att-data-icon="section.icon"
                         t-att-style="section.color and ('color: ' + section.color)"
                     />
                     <b class="pe-2" t-if="section.type !== 'category' || !this.state.active[section.id]" t-out="section.description"/>
@@ -202,11 +206,10 @@
                     <button class="o_toggle_fold btn border-0 p-0 px-1 flex-shrink-0 lh-sm text-center">
                         <i
                             t-if="value.childrenIds.length"
-                            class="fa"
-                            t-att-class="{
-                                'fa-caret-down' : this.state.expanded[section.id][valueId],
-                                'fa-caret-right':  !this.state.expanded[section.id][valueId]
-                            }"
+                            class="oi"
+                            t-attf-data-icon="{{
+                                this.state.expanded[section.id][valueId] ? 'arrow_drop_down' : 'arrow_right'
+                            }}"
                             />
                     </button>
                     <span
diff --git a/addons/web/static/src/search/search_panel/search_view.scss b/addons/web/static/src/search/search_panel/search_view.scss
index a3980088d1dcdd..ec43ef99904ade 100644
--- a/addons/web/static/src/search/search_panel/search_view.scss
+++ b/addons/web/static/src/search/search_panel/search_view.scss
@@ -59,7 +59,7 @@
     .o_add_condition {
         line-height: 1.1;
 
-        .fa {
+        .oi {
             font-size: $font-size-lg;
         }
     }
diff --git a/addons/web/static/src/search/utils/misc.js b/addons/web/static/src/search/utils/misc.js
index 70b299370eed02..00705753d3cd3f 100644
--- a/addons/web/static/src/search/utils/misc.js
+++ b/addons/web/static/src/search/utils/misc.js
@@ -1,9 +1,9 @@
 export const FACET_ICONS = {
-    filter: "fa fa-filter",
-    groupBy: "oi oi-group",
-    groupByAsc: "fa fa-sort-numeric-asc",
-    groupByDesc: "fa fa-sort-numeric-desc",
-    favorite: "fa fa-star",
+    filter: "filter_alt",
+    groupBy: "stacks",
+    groupByAsc: "sort",
+    groupByDesc: "sort",
+    favorite: "star",
 };
 
 export const FACET_COLORS = {
diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
index 66e9d43f8c3b67..661a415db94e9a 100644
--- a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
@@ -18,7 +18,7 @@
     <t t-name="web.CalendarCommonPopover.popover">
         <div class="card-header d-flex justify-content-between py-2 pe-2">
             <span class="popover-header border-0 text-truncate">
-                <i t-if="this.props.record.titleIcon" t-attf-class="me-2 {{this.props.record.titleIcon}}"/>
+                <i t-if="this.props.record.titleIcon" class="oi me-2" t-att-data-icon="this.props.record.titleIcon"/>
                 <span t-out="this.props.record.title" t-att-data-tooltip="this.props.record.title"/>
             </span>
             <span class="o_cw_popover_close ms-4 mt-2 me-2" t-on-click.stop="() => this.props.close()">
@@ -36,11 +36,11 @@
     <t t-name="web.CalendarCommonPopover.body">
         <ul class="list-group list-group-flush">
             <li t-if="this.date" class="list-group-item">
-                <i class="fa fa-fw fa-calendar text-400" />
+                <i class="oi oi-fw oi-filled text-400" data-icon="calendar_today"/>
                 <span class="fw-bold ms-2" t-out="this.date" /> <small t-if="this.dateDuration != 'All day'"><b t-out="this.dateDuration" /></small>
             </li>
             <li t-if="this.time" class="list-group-item">
-                <i class="fa fa-fw fa-clock-o text-400" />
+                <i class="oi oi-fw text-400" data-icon="schedule" />
                 <span class="fw-bold ms-2" t-out="this.time" /> <small t-if="this.timeDuration"><b t-out="`(${this.timeDuration})`" /></small>
             </li>
         </ul>
@@ -53,7 +53,7 @@
                         <li class="list-group-item d-flex text-nowrap" t-att-class="fieldInfo.attrs.class"  t-att-data-tooltip="fieldType === 'html' ? '' : this.getFormattedValue(fieldId, slot.record)">
                             <span class="fw-bold me-2" t-if="!fieldInfo.options.noLabel and fieldInfo.type !== 'properties'">
                                 <t t-if="fieldInfo.options.icon">
-                                    <i t-attf-class="fa-fw {{fieldInfo.options.icon}} text-400" />
+                                    <i class="oi oi-fw text-400" t-attf-class="{{fieldInfo.options.icon_class}}" t-attf-data-icon="{{fieldInfo.options.icon}}" />
                                 </t>
                                 <t t-else="">
                                     <t t-out="fieldInfo.string" />
diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml
index 9759aed9179afc..afb086cdbcb4a6 100644
--- a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.xml
@@ -11,7 +11,7 @@
                 <t> </t>
             </t>
             <div class="o_event_title">
-                <i area-hidden="true" t-if="titleIcon" t-attf-class="me-2 {{titleIcon}}"/>
+                <i area-hidden="true" t-if="titleIcon" class="oi me-2" t-att-data-icon="titleIcon"/>
                 <t t-out="title"/>
             </div>
     </t>
diff --git a/addons/web/static/src/views/calendar/calendar_controller.xml b/addons/web/static/src/views/calendar/calendar_controller.xml
index c68a4568d73bd1..0b3e0684efc179 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.xml
+++ b/addons/web/static/src/views/calendar/calendar_controller.xml
@@ -24,13 +24,13 @@
                                 title="Previous"
                                 aria-label="Previous"
                                 t-on-click.stop="() => this.setDate('previous')"
-                            ><i class="oi oi-arrow-left"/></button>
+                            ><i class="oi" data-icon="west"/></button>
                             <button
                                 class="o_calendar_button_next btn btn-secondary d-none d-md-block"
                                 title="Next"
                                 aria-label="Next"
                                 t-on-click.stop="() => this.setDate('next')"
-                            ><i class="oi oi-arrow-right"/></button>
+                            ><i class="oi" data-icon="east"/></button>
                         </div>
                         <ViewScaleSelector scales="this.scales" currentScale="this.model.scale" isWeekendVisible="this.state.isWeekendVisible" setScale.bind="this.setScale" toggleWeekendVisibility.bind="this.toggleWeekendVisibility" dropdownClass="'d-print-none order-3 order-lg-0'"/>
                         <button
diff --git a/addons/web/static/src/views/calendar/calendar_controller_mobile.scss b/addons/web/static/src/views/calendar/calendar_controller_mobile.scss
index 0d04bbf3cdc743..61d253d9e62c88 100644
--- a/addons/web/static/src/views/calendar/calendar_controller_mobile.scss
+++ b/addons/web/static/src/views/calendar/calendar_controller_mobile.scss
@@ -5,7 +5,7 @@
             padding: 0 map-get($spacers, 2);
             min-height: 30px;
 
-            .fa-filter {
+            [data-icon="filter_alt"] {
                 min-height: 1.59rem;
                 line-height: 1.59rem;
             }
diff --git a/addons/web/static/src/views/calendar/calendar_filter_section/calendar_filter_section.xml b/addons/web/static/src/views/calendar/calendar_filter_section/calendar_filter_section.xml
index 3a397321a58187..94913276680287 100644
--- a/addons/web/static/src/views/calendar/calendar_filter_section/calendar_filter_section.xml
+++ b/addons/web/static/src/views/calendar/calendar_filter_section/calendar_filter_section.xml
@@ -27,8 +27,8 @@
                     >
                         <span class="o_cw_filter_label fw-bolder text-truncate flex-grow-1" t-out="this.section.label"/>
                         <i
-                            class="o_cw_filter_collapse_icon fa ms-1"
-                            t-attf-class="fa-caret-{{ this.state.collapsed ? 'left' : 'down' }}"
+                            class="o_cw_filter_collapse_icon oi ms-1"
+                            t-attf-data-icon="{{ this.state.collapsed ? 'arrow_left' : 'arrow_drop_down' }}"
                         />
                     </label>
                 </div>
@@ -93,7 +93,7 @@
                     aria-label="Remove this favorite from the list"
                     t-on-click="(ev) => this.onFilterRemoveBtnClick(filter, ev)"
                 >
-                    <i class="oi oi-close"/>
+                    <i class="oi" data-icon="close_small"/>
                 </button>
             </t>
         </div>
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
index f9009107337cd5..e3a837fbcdcd5b 100644
--- a/addons/web/static/src/views/calendar/calendar_renderer.scss
+++ b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -107,10 +107,12 @@
             border: none;
 
             &:before {
+                --o-mi-fill: 1;
+
                 z-index: 2;
                 display: inline-block;
-                font-family: Fontawesome;
-                content: '\f111'; // fa-circle
+                font-family: "material_symbols_sharp";
+                content: 'circle';
             }
 
             &:hover {
@@ -120,7 +122,7 @@
             &.o_event_hatched:before {
                 --o-event-bg: var(--fc-event-text-color);
 
-                content: "\f1db"; // fa-circle-thin
+                content: "radio_button_unchecked";
             }
         }
     }
diff --git a/addons/web/static/src/views/calendar/calendar_schedule_section/calendar_schedule_section.xml b/addons/web/static/src/views/calendar/calendar_schedule_section/calendar_schedule_section.xml
index 6bf41691f98073..20c88dc06bd91c 100644
--- a/addons/web/static/src/views/calendar/calendar_schedule_section/calendar_schedule_section.xml
+++ b/addons/web/static/src/views/calendar/calendar_schedule_section/calendar_schedule_section.xml
@@ -18,7 +18,7 @@
                 t-att-data-res-id="event.id" 
                 t-on-click="() => this.openRecord(event)"
             >
-                <i class="oi oi-draggable o_event_to_schedule_handle"/>
+                <i class="oi o_event_to_schedule_handle" data-icon="drag_indicator"/>
                 <span class="ps-1" t-out="event.display_name" t-att-title="event.display_name"/>
             </div>
         </div>
diff --git a/addons/web/static/src/views/calendar/calendar_side_panel/calendar_side_panel.xml b/addons/web/static/src/views/calendar/calendar_side_panel/calendar_side_panel.xml
index dc927bfd380663..7b3486285d7531 100644
--- a/addons/web/static/src/views/calendar/calendar_side_panel/calendar_side_panel.xml
+++ b/addons/web/static/src/views/calendar/calendar_side_panel/calendar_side_panel.xml
@@ -7,7 +7,7 @@
             </div>
             <div class="o_calendar_sidepanel" t-att-class="{ 'd-none': this.props.model.meta.canScheduleEvents and this.state.isDragging }">
                 <button t-if="!this.env.isSmall" class="btn btn-light btn-sm end-0 m-2 position-absolute px-2 py-1 top-0 z-1" t-on-click="() => this.props.toggleSidePanel()">
-                    <i class="oi oi-panel-right"/>
+                    <i class="oi" data-icon="dock_to_left"/>
                 </button>
                 <DatePicker t-if="this.showDatePicker" t-props="this.datePickerProps" />
                 <div class="o_calendar_sidepanel_content px-3">
@@ -25,7 +25,7 @@
         <div t-elif="!this.env.isSmall" class="o_calendar_sidebar flex-grow-0 flex-shrink-0 bg-view h-100 cursor-pointer d-print-none" t-on-click="() => this.props.toggleSidePanel()">
             <div class="d-flex">
                 <button class="btn btn-light btn-sm m-2 p-1 py-2">
-                    <i class="oi oi-panel-right"/>
+                    <i class="oi" data-icon="dock_to_left"/>
                 </button>
                 <t t-foreach="this.filters" t-as="filter" t-key="filter_index">
                     <div class="m-2 mt-0 p-1" t-att-class="{ 'text-muted': !filter.active }">
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss
index 5c0e57984d366b..99006c10267aa6 100644
--- a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss
@@ -19,7 +19,7 @@
 
             &:before {
                 margin-right: map-get($spacers, 1);
-                font-family: FontAwesome;
+                font-family: 'material_symbols_sharp';
                 font-size: $o-font-size-base-smaller;
                 color: var(--o-cw-popover-color, #{$info});
                 content: '\f111';
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
index ef40d589433263..49d532b4b233b4 100644
--- a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
@@ -41,7 +41,7 @@
     <t t-name="web.CalendarYearPopover.footer">
         <t t-if="this.props.model.canCreate">
             <a href="#" class="btn-link o_cw_popover_create" t-on-click.prevent="this.onCreateButtonClick">
-                <i class="fa fa-plus" />
+                <i class="oi" data-icon="add" />
                 Create
             </a>
         </t>
@@ -63,7 +63,7 @@
         >
             <span t-if="record.startHour"><t t-out="record.startHour" /></span>
             <span>
-                <i area-hidden="true" t-if="record.titleIcon" t-attf-class="me-2 {{record.titleIcon}}"/>
+                <i area-hidden="true" t-if="record.titleIcon" class="oi me-2" t-att-data-icon="record.titleIcon"/>
                 <t t-out="record.title"/>
             </span>
         </a>
diff --git a/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.js b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.js
index 8033522f6ed13d..85fb326d968436 100644
--- a/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.js
+++ b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.js
@@ -10,7 +10,7 @@ export class CalendarMobileFilterPanel extends Component {
         toggleSidePanel: Function,
     };
     get caretDirection() {
-        return this.props.sidePanelShown ? "down" : "left";
+        return this.props.sidePanelShown ? "keyboard_arrow_down" : "chevron_backward";
     }
     getFilterColor(filter) {
         return `o_color_${getColor(filter.colorIndex)}`;
diff --git a/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml
index db3e9db89d08ec..524dbeeeef9423 100644
--- a/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml
+++ b/addons/web/static/src/views/calendar/mobile_filter_panel/calendar_mobile_filter_panel.xml
@@ -8,14 +8,18 @@
                     <t t-if="section.filters.length gt 0">
                         <t t-foreach="this.getSortedFilters(section)" t-as="filter" t-key="filter.value">
                             <span t-if="filter.active" class="d-flex align-items-center text-nowrap ms-1 me-2">
-                                <i class="fa fa-fw" t-att-class="this.getFilterColor(filter) !== 'o_color_false' ? 'fa-circle ' + this.getFilterColor(filter) : 'fa-circle-o'"/>
+                                <i
+                                    class="oi oi-fw"
+                                    t-att-class="this.getFilterColor(filter) !== 'o_color_false' ? 'oi-filled' + this.getFilterColor(filter) : ''"
+                                    data-icon="circle"
+                                />
                                 <span name="filter_label" class="ms-1 fw-bold text-nowrap" t-out="filter.label" />
                             </span>
                         </t>
                     </t>
                 </t>
             </div>
-            <i t-attf-class="oi fa-fw oi-chevron-{{this.caretDirection}} ms-2" name="expand_filter_button"/>
+            <i class="oi oi-fw ms-2" t-attf-data-icon="{{this.caretDirection}}" name="expand_filter_button"/>
         </div>
     </t>
 
diff --git a/addons/web/static/src/views/fields/badges_selection/badges_selection_field.js b/addons/web/static/src/views/fields/badges_selection/badges_selection_field.js
index da601e6322bdb3..5ffe74d89ee381 100644
--- a/addons/web/static/src/views/fields/badges_selection/badges_selection_field.js
+++ b/addons/web/static/src/views/fields/badges_selection/badges_selection_field.js
@@ -9,14 +9,17 @@ export class BadgesSelectionField extends Component {
     static props = {
         ...standardFieldProps,
         iconMapping: { type: Object, optional: true },
+        iconClassMapping: { type: Object, optional: true },
         allowedSelectionField: { type: String, optional: true },
         badgeLimit: { type: Number, optional: true },
         placeholder: { type: String, optional: true },
         defaultIcon: { type: String, optional: true },
+        defaultIconClass: { type: String, optional: true },
         canDeselect: { type: Boolean, optional: true },
     };
     static defaultProps = {
         iconMapping: {},
+        iconClassMapping: {},
     };
     static components = {
         BaseBadgesField,
@@ -34,7 +37,8 @@ export class BadgesSelectionField extends Component {
         // Map icons to options
         return options.map(([value, label]) => {
             const icon = this.props.iconMapping[value] ?? this.props.defaultIcon;
-            return [value, label, icon];
+            const iconClass = this.props.iconClassMapping[value] ?? '';
+            return [value, label, icon, iconClass];
         });
     }
 
@@ -94,6 +98,7 @@ export const badgesSelectionField = {
         badgeLimit: options.badge_limit,
         canDeselect: !dynamicInfo.required,
         iconMapping: options.icon_mapping,
+        iconClassMapping: options.icon_class_mapping,
         allowedSelectionField: options.allowed_selection_field,
     }),
 };
diff --git a/addons/web/static/src/views/fields/badges_selection/base_badges_field.xml b/addons/web/static/src/views/fields/badges_selection/base_badges_field.xml
index e2543bbcd27a4c..23741dc0b775a1 100644
--- a/addons/web/static/src/views/fields/badges_selection/base_badges_field.xml
+++ b/addons/web/static/src/views/fields/badges_selection/base_badges_field.xml
@@ -26,7 +26,7 @@
                             t-on-click="() => this.onChange(option[0])"
                         >
                             <t t-if="option[2]">
-                                <span t-att-class="`fa ${option[2]} pe-1`"/>
+                                <span class="oi pe-1" t-att-class="option[3]" t-att-data-icon="option[2]"/>
                             </t>
                             <span t-out="option[1]" t-att-value="this.stringify(option[0])"/>
                         </span>
diff --git a/addons/web/static/src/views/fields/binary/binary_field.scss b/addons/web/static/src/views/fields/binary/binary_field.scss
index 1c831adb313cda..4af648be968320 100644
--- a/addons/web/static/src/views/fields/binary/binary_field.scss
+++ b/addons/web/static/src/views/fields/binary/binary_field.scss
@@ -2,7 +2,7 @@
     color: $input-placeholder-color;
     background: transparent;
 
-    .btn.fa-upload.o_input_box_overlay_end {
+    .btn[data-icon="upload"] .o_input_box_overlay_end {
         top: 0 !important;
         right: 0 !important;
     }
diff --git a/addons/web/static/src/views/fields/binary/binary_field.xml b/addons/web/static/src/views/fields/binary/binary_field.xml
index b8bec7c8033f15..295f4e716868d3 100644
--- a/addons/web/static/src/views/fields/binary/binary_field.xml
+++ b/addons/web/static/src/views/fields/binary/binary_field.xml
@@ -12,7 +12,8 @@
                     >
                         <t name="download" t-if="this.props.record.resId and !this.props.record.dirty">
                             <button
-                                class="btn btn-link fa fa-download o_download_file_button o_input_box_overlay_end"
+                                class="btn btn-link oi o_download_file_button o_input_box_overlay_end"
+                                data-icon="download"
                                 data-tooltip="Download"
                                 aria-label="Download"
                                 t-on-click="this.onFileDownload"
@@ -27,7 +28,8 @@
                             </t>
                         </t>
                         <button
-                            class="btn btn-link fa fa-trash o_clear_file_button o_input_box_overlay_end"
+                            class="btn btn-link oi oi-filled o_clear_file_button o_input_box_overlay_end"
+                            data-icon="delete"
                             data-tooltip="Clear"
                             aria-label="Clear"
                             t-on-click="() => this.update({})"
@@ -45,7 +47,7 @@
                         <t t-set-slot="toggler">
                             <div class="o_input_box text-start">
                                 Upload your file
-                                <button class="o_input_box_overlay_end btn btn-link fa fa-upload" />
+                                <button class="o_input_box_overlay_end btn btn-link oi" data-icon="upload" />
                             </div>
                         </t>
                     </FileUploader>
@@ -54,7 +56,7 @@
         </t>
         <t t-elif="this.props.record.resId and this.props.record.data[this.props.name]">
             <a class="o_form_uri" href="#" t-on-click.prevent="this.onFileDownload">
-                <span class="fa fa-download me-2" />
+                <span class="oi me-2" data-icon="download" />
                 <t t-if="this.fileName" t-out="this.fileName" />
             </a>
         </t>
@@ -68,7 +70,7 @@
                     onUploaded.bind="this.update"
                 >
                     <t t-set-slot="toggler">
-                        <i class="fa fa-upload fa-fw"/> Upload your file
+                        <i class="oi oi-fw" data-icon="upload"/> Upload your file
                     </t>
                 </FileUploader>
             </label>
diff --git a/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.js b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.js
index 64f8c705ed1c4d..a0fa9521670e6a 100644
--- a/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.js
+++ b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.js
@@ -17,7 +17,7 @@ export class BooleanFavoriteField extends Component {
     };
 
     get iconClass() {
-        return this.props.record.data[this.props.name] ? "fa fa-star" : "fa fa-star-o";
+        return this.props.record.data[this.props.name] ? "oi-filled" : "";
     }
 
     get label() {
diff --git a/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.scss b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.scss
index 71a9b30fb30f16..311492b0a1e57a 100644
--- a/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.scss
+++ b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.scss
@@ -1,13 +1,14 @@
 .o_field_widget {
     .o_favorite {
-        i.fa {
+        i.oi {
             font-size: var(--Favorite-font-size, 1rem);
         }
-        i.fa-star-o {
+        i[data-icon="star"] {
             @include o-hover-text-color($o-main-color-muted, $o-main-favorite-color);
-        }
-        i.fa-star {
-            color: $o-main-favorite-color;
+
+            &.oi-filled {
+                color: $o-main-favorite-color;
+            }
         }
     }
 }
diff --git a/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.xml b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.xml
index 5ac072b768f017..594138e9b3c4e8 100644
--- a/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.xml
+++ b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.BooleanFavoriteField">
         <button class="o_favorite btn btn-link btn-link-inline" t-att-class="{'pe-none o_disabled' : this.props.readonly}" t-on-click.prevent.stop="this.update" data-available-offline="">
-            <i t-att-class="this.iconClass" role="img" t-att-title="this.label" t-att-aria-label="this.label"/>
+            <i class="oi" t-att-class="this.iconClass" data-icon="star" role="img" t-att-title="this.label" t-att-aria-label="this.label"/>
             <t t-if="!this.props.readonly and !this.props.noLabel" t-out="this.label"/>
         </button>
     </t>
diff --git a/addons/web/static/src/views/fields/boolean_icon/boolean_icon_field.js b/addons/web/static/src/views/fields/boolean_icon/boolean_icon_field.js
index 5fa1d9f787ac52..c52c9c4bcc52a1 100644
--- a/addons/web/static/src/views/fields/boolean_icon/boolean_icon_field.js
+++ b/addons/web/static/src/views/fields/boolean_icon/boolean_icon_field.js
@@ -8,10 +8,11 @@ export class BooleanIconField extends Component {
     static props = {
         ...standardFieldProps,
         icon: { type: String, optional: true },
+        icon_class: { type: String, optional: true },
         label: { type: String, optional: true },
     };
     static defaultProps = {
-        icon: "fa-check-square-o",
+        icon: "check_box",
     };
 
     update() {
@@ -32,6 +33,7 @@ export const booleanIconField = {
     supportedTypes: ["boolean"],
     extractProps: ({ options, string }) => ({
         icon: options.icon,
+        icon_class: options.icon_class,
         label: string,
     }),
 };
diff --git a/addons/web/static/src/views/fields/boolean_icon/boolean_icon_field.xml b/addons/web/static/src/views/fields/boolean_icon/boolean_icon_field.xml
index defbcaa86dd1c3..c9b5e0c204c09a 100644
--- a/addons/web/static/src/views/fields/boolean_icon/boolean_icon_field.xml
+++ b/addons/web/static/src/views/fields/boolean_icon/boolean_icon_field.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.BooleanIconField">
         <button t-attf-class="btn {{this.props.record.data[this.props.name] ? 'btn-primary' : 'btn-outline-primary'}}" t-att-data-tooltip="this.props.label" t-on-click.prevent.stop="this.update" data-available-offline="">
-            <i t-attf-class="fa {{this.props.icon}}" />
+            <i class="oi" t-att-data-icon="this.props.icon" />
         </button>
     </t>
 
diff --git a/addons/web/static/src/views/fields/char/char_field.xml b/addons/web/static/src/views/fields/char/char_field.xml
index 89b07ff0d418c4..93d358ed576589 100644
--- a/addons/web/static/src/views/fields/char/char_field.xml
+++ b/addons/web/static/src/views/fields/char/char_field.xml
@@ -27,7 +27,8 @@
                     record="this.props.record"
                 />
                 <button t-if="this.hasDynamicPlaceholder"
-                    class="btn btn-link fa fa-magic o_input_box_overlay_end"
+                    class="btn btn-link oi o_input_box_overlay_end"
+                    data-icon="wand_stars"
                     title="Insert Field"
                     t-on-click="this.onDynamicPlaceholderOpen"
                 />
diff --git a/addons/web/static/src/views/fields/contact_statistics/contact_statistics.xml b/addons/web/static/src/views/fields/contact_statistics/contact_statistics.xml
index 35cebbf1b8368f..8d3ba38205f03e 100644
--- a/addons/web/static/src/views/fields/contact_statistics/contact_statistics.xml
+++ b/addons/web/static/src/views/fields/contact_statistics/contact_statistics.xml
@@ -4,7 +4,7 @@
     <t t-name="web.ContactStatisticsField">
         <div class="d-inline-flex flex-wrap gap-3">
             <span t-foreach="this.list" t-as="data" t-key="data_index" t-att-aria-label="data.label" t-att-title="data.label" t-att-data-tooltip="data.label">
-                <i t-attf-class="fa fa-fw me-1 pe-none {{data.iconClass}}" role="img"/>
+                <i class="oi oi-fw me-1 pe-none" t-att-class="data.iconClass" t-att-data-icon="data.icon" role="img"/>
                 <t t-out="data.value"/>
             </span>
         </div>
diff --git a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js
index 0a3db0d9b6f95e..da13671dae2f82 100644
--- a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js
+++ b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js
@@ -63,7 +63,7 @@ export class CopyClipboardCharField extends CopyClipboardField {
     static components = { Field: CharField, CopyButton };
 
     get copyButtonIcon() {
-        return "fa-clipboard";
+        return "assignment";
     }
 }
 
@@ -71,7 +71,7 @@ export class CopyClipboardURLField extends CopyClipboardField {
     static components = { Field: UrlField, CopyButton };
 
     get copyButtonIcon() {
-        return "fa-link";
+        return "link";
     }
 }
 
diff --git a/addons/web/static/src/views/fields/datetime/datetime_field.xml b/addons/web/static/src/views/fields/datetime/datetime_field.xml
index 71b8dbe604a016..465f93ab7374ac 100644
--- a/addons/web/static/src/views/fields/datetime/datetime_field.xml
+++ b/addons/web/static/src/views/fields/datetime/datetime_field.xml
@@ -3,7 +3,7 @@
     <t t-name="web.DateTimeField">
         <t t-set="showSeparator" t-value="this.shouldShowSeparator()" />
         <div class="d-flex gap-2 align-items-center" t-custom-ref="root">
-            <i t-if="!this.props.readonly" class="fa fa-calendar d-none d-touch-inline-flex" />
+            <i t-if="!this.props.readonly" class="oi oi-filled d-none d-touch-inline-flex" data-icon="calendar_today" />
             <!-- Start date -->
             <t t-if="this.props.readonly">
                 <span t-if="!this.isEmpty(this.startDateField)" class="text-truncate" t-out="window.String(this.getFormattedValue(0))" t-att-data-tooltip="this.getFormattedValue(0, true)"/>
@@ -40,7 +40,7 @@
 
             <!-- Separator -->
             <t t-if="showSeparator">
-                <i class="fa fa-long-arrow-right" aria-label="Arrow icon" title="Arrow" />
+                <i class="oi" data-icon="east" aria-label="Arrow icon" title="Arrow" />
             </t>
 
             <!-- End date -->
diff --git a/addons/web/static/src/views/fields/domain/domain_field.xml b/addons/web/static/src/views/fields/domain/domain_field.xml
index 19641db99b5531..d0eec39daae0b5 100644
--- a/addons/web/static/src/views/fields/domain/domain_field.xml
+++ b/addons/web/static/src/views/fields/domain/domain_field.xml
@@ -7,13 +7,13 @@
             <t t-if="resModel">
                 <t t-if="this.props.isFoldable and this.state.folded and this.state.isValid !== false">
                     <div class="d-flex align-items-center" t-on-click="() => this.state.folded = false">
-                        <i data-tooltip="Modify filter" class="fa fa-lg fa-caret-right pe-2"/>
+                        <i data-tooltip="Modify filter" class="oi oi-lg pe-2" data-icon="arrow_right"/>
                         <div class="d-print-contents">
                             <t t-if="!this.state.facets.length">
                                 <span>Match <strong>all records</strong></span>
                                 <t t-if="!this.props.readonly">
                                     <button class="btn btn-sm btn-primary o_domain_add_first_node_button mx-2" t-on-click.stop="() => this.addCondition()">
-                                        <i class="fa fa-plus"/> Add condition
+                                        <i class="oi" data-icon="add"/> Add condition
                                     </button>
                                 </t>
                             </t>
@@ -23,7 +23,7 @@
                                     tabindex="0"
                                     >
                                     <div class="o_searchview_facet_label rounded-start-2 btn btn-primary rounded-end-0 p-0" role="button">
-                                        <i class="px-1 small fa fa-filter" role="image"/>
+                                        <i class="px-1 small oi oi-filled" data-icon="filter_alt" role="image"/>
                                     </div>
                                     <div class="o_facet_values d-flex align-items-center px-2 bg-200 rounded-end-2 text-wrap">
                                         <small class="o_facet_value" t-out="facet"/>
@@ -41,7 +41,7 @@
                 <t t-else="">
                     <div class="d-flex">
                         <a t-if="this.props.isFoldable and this.state.isValid" t-on-click="this.fold">
-                            <i class="fa fa-lg fa-caret-down pe-2"></i>
+                            <i class="oi oi-lg pe-2" data-icon="arrow_drop_down"></i>
                         </a>
                         <DomainSelector
                             resModel="resModel"
@@ -54,9 +54,9 @@
                         />
                     </div>
                     <div class="o_field_domain_panel d-flex align-items-center gap-2 mt-1">
-                        <i class="oi oi-arrow-right" role="img" aria-label="Domain" title="Domain" />
+                        <i class="oi" data-icon="east" role="img" aria-label="Domain" title="Domain" />
                         <t t-if="this.state.isValid === null and this.state.recordCount === null">
-                            <i class="fa fa-circle-o-notch fa-spin ms-2" role="img" aria-label="Loading" title="Loading" />
+                            <i class="oi oi-spin ms-2" data-icon="autorenew" role="img" aria-label="Loading" title="Loading" />
                         </t>
                         <t t-else="">
                             <t t-if="this.state.isValid">
@@ -66,12 +66,13 @@
                             </t>
                             <t t-else="">
                                 <span class="text-warning" role="alert">
-                                    <i class="fa fa-exclamation-triangle" role="img" aria-label="Warning" title="Warning" /> Invalid domain
+                                    <i class="oi" data-icon="warning" role="img" aria-label="Warning" title="Warning" /> Invalid domain
                                 </span>
                             </t>
                             <t t-if="!!this.env.debug and !this.props.readonly">
                                 <button
-                                    class="btn btn-sm btn-icon fa fa-refresh o_refresh_count"
+                                    class="btn btn-sm btn-icon oi o_refresh_count"
+                                    data-icon="refresh"
                                     role="img"
                                     aria-label="Refresh"
                                     title="Refresh"
diff --git a/addons/web/static/src/views/fields/dynamic_placeholder_popover.xml b/addons/web/static/src/views/fields/dynamic_placeholder_popover.xml
index 8654fd4894dd6d..1b59ac39c37f3f 100644
--- a/addons/web/static/src/views/fields/dynamic_placeholder_popover.xml
+++ b/addons/web/static/src/views/fields/dynamic_placeholder_popover.xml
@@ -6,14 +6,16 @@
             <div class="o_model_field_selector_popover" t-on-keydown="this.onInputKeydown" tabindex="-1">
                 <div class="border-bottom p-2">
                     <div class="d-flex justify-content-between align-items-center text-dark fw-bolder">
-                        <i class="btn btn-link me-n2 fa fa-arrow-left text-dark"
+                        <i class="btn btn-link oi me-n2 text-dark"
+                           data-icon="arrow_back"
                            title="Back"
                            role="img"
                            aria-label="Back"
                            t-on-click="this.onBack"
                         />
                         <div class="o_model_field_selector_popover_title">Enter a default value</div>
-                        <i class="o_model_field_selector_popover_close btn btn-link me-n2 fa fa-times text-dark"
+                        <i class="o_model_field_selector_popover_close btn btn-link oi me-n2 text-dark"
+                           data-icon="close"
                            title="Close"
                            role="img"
                            aria-label="Close"
diff --git a/addons/web/static/src/views/fields/fields.scss b/addons/web/static/src/views/fields/fields.scss
index c1277fa7bcce3f..362b6b4f20db54 100644
--- a/addons/web/static/src/views/fields/fields.scss
+++ b/addons/web/static/src/views/fields/fields.scss
@@ -241,12 +241,12 @@
             transition: opacity ease 400ms;
             min-width: 35px;
 
-            > button.fa {
+            > button.oi {
                 border: none;
                 background-color: transparent;
             }
 
-            > .fa {
+            > .oi {
                 padding: 4px;
                 margin: 5px;
                 cursor: pointer;
@@ -256,7 +256,7 @@
             .o_form_image_controls{
                 position: initial;
                 opacity: 1;
-                > .fa{
+                > .oi {
                     width: 50%;
                     padding: 6px;
                     margin: 0px;
diff --git a/addons/web/static/src/views/fields/handle/handle_field.xml b/addons/web/static/src/views/fields/handle/handle_field.xml
index a9f928c0a9720c..3b9ba6d45a4966 100644
--- a/addons/web/static/src/views/fields/handle/handle_field.xml
+++ b/addons/web/static/src/views/fields/handle/handle_field.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.HandleField">
-        <span class="o_row_handle oi oi-draggable ui-sortable-handle" t-att-class="{ 'o_disabled': this.props.readonly }" t-on-click.stop="" />
+        <span class="o_row_handle oi ui-sortable-handle" data-icon="drag_indicator" t-att-class="{ 'o_disabled': this.props.readonly }" t-on-click.stop="" />
     </t>
 
 </templates>
diff --git a/addons/web/static/src/views/fields/image/image_field.xml b/addons/web/static/src/views/fields/image/image_field.xml
index 91037c10fe556c..84baa3ae14dc7a 100644
--- a/addons/web/static/src/views/fields/image/image_field.xml
+++ b/addons/web/static/src/views/fields/image/image_field.xml
@@ -14,7 +14,7 @@
                             class="o_select_file_button btn btn-light border-0 rounded-circle m-1 p-1"
                             data-tooltip="Edit"
                             aria-label="Edit">
-                            <i class="fa fa-pencil fa-fw"/>
+                            <i class="oi oi-fw oi-filled" data-icon="edit"/>
                         </button>
                     </t>
                     <button
@@ -23,7 +23,7 @@
                         data-tooltip="Clear"
                         aria-label="Clear"
                         t-on-click="this.onFileRemove">
-                        <i class="fa fa-trash-o fa-fw"/>
+                        <i class="oi oi-fw" data-icon="delete"/>
                     </button>
                 </FileUploader>
             </div>
diff --git a/addons/web/static/src/views/fields/json_checkboxes/json_checkboxes_field.xml b/addons/web/static/src/views/fields/json_checkboxes/json_checkboxes_field.xml
index 44f001c54a7c7a..0cfc28064daf51 100644
--- a/addons/web/static/src/views/fields/json_checkboxes/json_checkboxes_field.xml
+++ b/addons/web/static/src/views/fields/json_checkboxes/json_checkboxes_field.xml
@@ -14,7 +14,7 @@
                         <t t-out="checkbox_value.label" />
                     </CheckBox>
                     <i t-if="checkbox_value.question_circle"
-                       class="fa fa-question-circle"
+                       class="oi" data-icon="help"
                        role="img"
                        aria-label="Warning"
                        t-att-title="checkbox_value.question_circle"/>
diff --git a/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
index ba9d786c792016..8f180f953d68e5 100644
--- a/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
+++ b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
@@ -18,7 +18,7 @@
                     resId="this.props.record.resId or 0"
                 >
                     <button class="btn btn-secondary o_attach" data-tooltip="Attach">
-                        <span class="fa fa-paperclip" aria-label="Attach"/> <t t-out="this.uploadText"/>
+                        <span class="oi" data-icon="attach_file" aria-label="Attach"/> <t t-out="this.uploadText"/>
                     </button>
                 </FileInput>
             </div>
@@ -49,7 +49,7 @@
                 </div>
             </div>
 
-            <div class="o_attachment_uploaded"><i class="text-success fa fa-check" role="img" aria-label="Uploaded" title="Uploaded"/></div>
+            <div class="o_attachment_uploaded"><i class="oi text-success" data-icon="check" role="img" aria-label="Uploaded" title="Uploaded"/></div>
             <div t-if="editable" class="o_attachment_delete" t-on-click.stop="() => this.onFileRemove(file.id)"><span role="img" aria-label="Delete" title="Delete">×</span></div>
         </div>
     </div>
diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml
index a6ac6adac424f9..80495a5c26ef0b 100644
--- a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml
+++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml
@@ -8,7 +8,7 @@
             t-custom-ref="many2ManyTagsField"
         >
             <t t-if="this.canDisplayQuickAssignAvatar">
-                <a class="o_quick_assign fa o_m2m_avatar btn-link d-flex align-items-center text-dark" href="#" role="button" tabindex="0" t-attf-class="{{ this.tags.length ? 'fa-pencil' : 'fa-user-plus' }}" t-att-data-tooltip="this.assignBtnTooltip" t-att-aria-label="this.assignBtnTooltip" t-on-click.stop.prevent="this.openPopover"/>
+                <a class="o_quick_assign o_m2m_avatar btn-link oi oi-filled d-flex align-items-center text-dark" href="#" role="button" tabindex="0" t-attf-data-icon="{{ this.tags.length ? 'edit' : 'person_add' }}" t-att-data-tooltip="this.assignBtnTooltip" t-att-aria-label="this.assignBtnTooltip" t-on-click.stop.prevent="this.openPopover"/>
             </t>
             <TagsList t-props="this.tagsListProps" t-slot-scope="tag">
                 <Tag t-props="tag.props"/>
diff --git a/addons/web/static/src/views/fields/many2one/many2one.xml b/addons/web/static/src/views/fields/many2one/many2one.xml
index 41c78591455a8f..1cfbe5ab90f79e 100644
--- a/addons/web/static/src/views/fields/many2one/many2one.xml
+++ b/addons/web/static/src/views/fields/many2one/many2one.xml
@@ -9,7 +9,7 @@
             <t t-elif="!this.props.readonly">
                 <span class="o_avatar o_m2o_avatar d-flex">
                     <a class="o_quick_assign btn-link d-flex align-items-center text-dark" href="#" role="button" tabindex="-1" aria-label="Assign" data-tooltip="Assign" t-on-click.stop.prevent="(e) => this.openAssignPopover(e.currentTarget)">
-                        <i class="fa fa-user-plus"/>
+                        <i class="oi oi-filled" data-icon="person_add"/>
                     </a>
                 </span>
             </t>
diff --git a/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.xml b/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.xml
index 4ad4229a87d5f3..7ae6a8c3133d9d 100644
--- a/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.xml
+++ b/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.xml
@@ -11,19 +11,22 @@
                     >
                         <t t-set-slot="toggler">
                             <button
-                                class="btn btn-secondary fa fa-pencil o_select_file_button"
+                                class="btn btn-secondary oi oi-filled o_select_file_button"
+                                data-icon="edit"
                                 data-tooltip="Edit"
                                 aria-label="Edit"
                             />
                         </t>
                             <button
-                                class="btn btn-secondary fa fa-download"
+                                class="btn btn-secondary oi"
+                                data-icon="download"
                                 data-tooltip="Download"
                                 aria-label="Download"
                                 t-on-click="this.onFileDownload"
                             />
                         <button
-                            class="btn btn-secondary fa fa-trash o_clear_file_button"
+                            class="btn btn-secondary oi oi-filled o_clear_file_button"
+                            data-icon="edit"
                             data-tooltip="Clear"
                             aria-label="Clear"
                             t-on-click="this.onFileRemove"
diff --git a/addons/web/static/src/views/fields/priority/priority_field.scss b/addons/web/static/src/views/fields/priority/priority_field.scss
index 79b24d90eedfe7..da702d93ec0023 100644
--- a/addons/web/static/src/views/fields/priority/priority_field.scss
+++ b/addons/web/static/src/views/fields/priority/priority_field.scss
@@ -2,11 +2,12 @@
     gap: 0.5em;
     > .o_priority_star {
         font-size: 1.25em !important;
-        &.fa-star-o {
+        &[data-icon="star"] {
             color: $o-main-color-muted;
-        }
-        &.fa-star {
-            color: $o-main-favorite-color;
+
+            &.oi-filled {
+                color: $o-main-favorite-color;
+            }
         }
     }
 }
diff --git a/addons/web/static/src/views/fields/priority/priority_field.xml b/addons/web/static/src/views/fields/priority/priority_field.xml
index 48f9d074010ec5..984ae6ec2f9a23 100644
--- a/addons/web/static/src/views/fields/priority/priority_field.xml
+++ b/addons/web/static/src/views/fields/priority/priority_field.xml
@@ -7,9 +7,10 @@
                 <t t-if="!value_first">
                     <t t-if="this.props.readonly">
                         <span
-                            class="o_priority_star fa o_disabled"
+                            class="o_priority_star oi o_disabled"
+                            data-icon="star"
                             role="radio"
-                            t-att-class="value_index lte this.index ? 'fa-star' : 'fa-star-o'"
+                            t-att-class="{'oi-filled': value_index lte this.index}"
                             tabindex="0"
                             t-att-data-tooltip="this.getTooltip(value[1])"
                             t-att-aria-checked="value_index === this.index ? 'true' : 'false'"
@@ -18,9 +19,10 @@
                     </t>
                     <t t-else="">
                         <button
-                            class="o_priority_star btn btn-link btn-link-inline fa p-0"
+                            class="o_priority_star btn btn-link btn-link-inline oi p-0"
+                            data-icon="star"
                             role="radio"
-                            t-att-class="value_index lte this.index ? 'fa-star' : 'fa-star-o opacity-25 opacity-100-hover'"
+                            t-att-class="value_index lte this.index ? 'oi-filled' : 'opacity-25 opacity-100-hover'"
                             tabindex="0"
                             t-att-data-tooltip="this.getTooltip(value[1])"
                             t-att-aria-checked="value_index === this.index ? 'true' : 'false'"
diff --git a/addons/web/static/src/views/fields/properties/properties_definition_field.xml b/addons/web/static/src/views/fields/properties/properties_definition_field.xml
index 7095f040c9822f..8eb0f212d8d4ae 100644
--- a/addons/web/static/src/views/fields/properties/properties_definition_field.xml
+++ b/addons/web/static/src/views/fields/properties/properties_definition_field.xml
@@ -10,7 +10,7 @@
                 <button
                     class="btn btn-link text-break m-0"
                     t-on-click="this.onPropertyCreateEmpty">
-                    <i class="fa fa-plus"/>
+                    <i class="oi" data-icon="add"/>
                     Add Property
                 </button>
             </div>
diff --git a/addons/web/static/src/views/fields/properties/properties_field.js b/addons/web/static/src/views/fields/properties/properties_field.js
index 523f1bd3709950..2781caf129ccae 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.js
+++ b/addons/web/static/src/views/fields/properties/properties_field.js
@@ -168,7 +168,7 @@ export class PropertiesField extends Component {
         useSortable({
             enable: () => !this.props.readonly && this.state.canChangeDefinition,
             ref: this.propertiesRef,
-            handle: ".o_field_property_label .oi-draggable",
+            handle: ".o_field_property_label [data-icon='drag_indicator']",
             // on mono-column layout, allow to move before a separator to make the usage more fluid
             elements:
                 this.renderedColumnsCount === 1
@@ -238,7 +238,7 @@ export class PropertiesField extends Component {
         useSortable({
             enable: () => !this.props.readonly && this.state.canChangeDefinition,
             ref: this.propertiesRef,
-            handle: ".o_field_property_group_label .oi-draggable",
+            handle: ".o_field_property_group_label [data-icon='drag_indicator']",
             elements: ".o_property_group:not([property-name=''])",
             cursor: "grabbing",
             onDragStart: ({ element }) => {
diff --git a/addons/web/static/src/views/fields/properties/properties_field.scss b/addons/web/static/src/views/fields/properties/properties_field.scss
index 48a7493fb34606..e8864eeed0d02f 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.scss
+++ b/addons/web/static/src/views/fields/properties/properties_field.scss
@@ -55,12 +55,12 @@
 .o_field_property_label {
     width: 180px;
 
-    .fa-caret-down,
-    .fa-caret-right {
+    [data-icon="arrow_drop_down"],
+    [data-icon="arrow_right"] {
         width: 8px;
     }
     .o_field_property_open_popover,
-    .oi-draggable {
+    [data-icon='drag_indicator'] {
         cursor: pointer;
         font-size: 15px;
         @include o-hover-text-color($o-main-color-muted, $o-main-text-color);
@@ -104,7 +104,7 @@
 }
 
 .o_field_properties {
-    .oi-draggable {
+    [data-icon='drag_indicator'] {
         cursor: grab;
     }
     @include media-breakpoint-down(sm) {
diff --git a/addons/web/static/src/views/fields/properties/properties_field.xml b/addons/web/static/src/views/fields/properties/properties_field.xml
index e5843112691ce8..f41bce030cc0bd 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.xml
+++ b/addons/web/static/src/views/fields/properties/properties_field.xml
@@ -13,15 +13,16 @@
                             t-att-class="{'invisible': propertiesListGroup.columnSeparator, 'folded': propertiesListGroup.isFolded}"
                             t-on-click="() => this.onSeparatorClick(propertiesListGroup.name)">
                             <div t-if="foldable" class="me-2">
-                                <i class="fa fa-fw" t-att-class="propertiesListGroup.isFolded ? 'fa-caret-right' : 'fa-caret-down'"/>
+                                <i class="oi oi-fw" t-att-data-icon="propertiesListGroup.isFolded ? 'arrow_right' : 'arrow_drop_down'"/>
                             </div>
                             <span t-if="propertiesListGroup.title" t-out="propertiesListGroup.title"/>
                             <i
                                 t-if="this.state.isInEditMode and !propertiesListGroup.columnSeparator"
-                                class="o_field_property_open_popover fa fa-pencil ms-3"
+                                class="o_field_property_open_popover oi oi-filled ms-3"
+                                data-icon="edit"
                                 t-on-click.prevent.stop="(event) => this.onPropertyEdit(event, propertiesListGroup.name)"/>
                             <i t-if="this.state.isInEditMode"
-                                class="oi oi-draggable ms-1 d-none d-sm-block"/>
+                                class="oi ms-1 d-none d-sm-block" data-icon="drag_indicator"/>
                         </div>
                     </div>
                     <div
@@ -50,10 +51,11 @@
                             </i>
                             <i
                                 t-if="this.state.isInEditMode"
-                                class="o_field_property_open_popover fa fa-pencil ms-2"
+                                class="o_field_property_open_popover oi oi-filled ms-2"
+                                data-icon="edit"
                                 t-on-click="(event) => this.onPropertyEdit(event, propertyConfiguration.name)"/>
                             <i t-if="this.state.isInEditMode"
-                                class="oi oi-draggable ms-1 d-none d-sm-block mt-1"/>
+                                class="oi ms-1 d-none d-sm-block mt-1" data-icon="drag_indicator"/>
                         </label>
                         <div class="o_property_field_value">
                             <PropertyValue
@@ -84,7 +86,7 @@
                             t-if="this.state.isInEditMode and this.definitionRecordId"
                             class="btn btn-link text-break m-0"
                             t-on-click="this.onPropertyCreate">
-                            <i class="fa fa-plus"/>
+                            <i class="oi" data-icon="add"/>
                             Add Property
                         </button>
                     </div>
diff --git a/addons/web/static/src/views/fields/properties/property_definition.xml b/addons/web/static/src/views/fields/properties/property_definition.xml
index 104fabeb8a9f67..e03766282f4275 100644
--- a/addons/web/static/src/views/fields/properties/property_definition.xml
+++ b/addons/web/static/src/views/fields/properties/property_definition.xml
@@ -3,13 +3,13 @@
     <t t-name="web.PropertyDefinition">
         <div class="o_field_property_definition o_field_widget o_form_view d-block" t-custom-ref="propertyDefinition">
             <div t-if="this.env.isSmall" class="d-flex justify-content-between px-3 border-bottom">
-                <button class="btn oi oi-arrow-left my-2" t-on-click="() => this.props.close()"/>
+                <button class="btn oi my-2" data-icon="west" t-on-click="() => this.props.close()"/>
                 <button
                     t-if="!this.props.readonly and this.props.canChangeDefinition"
                     class="btn pe-0 text-danger float-end o_field_property_definition_delete"
                     title="Remove Property"
                     t-on-click="this.props.onDelete">
-                    <i class="fa fa-trash"/> Delete
+                    <i class="oi oi-filled" data-icon="delete"/> Delete
                 </button>
             </div>
             <div class="o_modal_container p-3 o_inner_group grid">
@@ -104,7 +104,7 @@
                             className="'d-inline-block me-2'"
                         />
                         <div t-if="this.state.matchingRecordsCount !== undefined" class="d-inline-block">
-                            <i class="oi oi-arrow-right" role="img" title="Domain"/>
+                            <i class="oi" data-icon="east" role="img" title="Domain"/>
                             <button class="btn btn-sm btn-secondary" type="button"
                                 t-on-click.stop="this.onButtonDomainClick">
                                 <t t-out="this.state.matchingRecordsCount"/> record(s)
@@ -194,7 +194,7 @@
                     class="ms-auto btn btn-danger o_field_property_definition_delete"
                     title="Remove Property"
                     t-on-click="this.props.onDelete">
-                    <i class="fa fa-trash"/> Delete
+                    <i class="oi oi-filled" data-icon="delete"/> Delete
                 </button>
             </div>
         </div>
diff --git a/addons/web/static/src/views/fields/properties/property_definition_selection.scss b/addons/web/static/src/views/fields/properties/property_definition_selection.scss
index bcdcd555ae89a7..380ccee388588d 100644
--- a/addons/web/static/src/views/fields/properties/property_definition_selection.scss
+++ b/addons/web/static/src/views/fields/properties/property_definition_selection.scss
@@ -1,5 +1,5 @@
 .o_field_property_selection {
-    .fa-star {
+    [data-icon="star"].oi-filled {
         color: $o-main-favorite-color;
     }
 }
diff --git a/addons/web/static/src/views/fields/properties/property_definition_selection.xml b/addons/web/static/src/views/fields/properties/property_definition_selection.xml
index 278bf61f3aa9c8..840de88bb8ad06 100644
--- a/addons/web/static/src/views/fields/properties/property_definition_selection.xml
+++ b/addons/web/static/src/views/fields/properties/property_definition_selection.xml
@@ -9,7 +9,7 @@
                     class="o_field_property_selection_option d-flex flex-row align-items-center justify-content-between mb-2 rounded"
                     t-att-option-name="option[0]">
                     <i t-if="!this.props.readonly and this.props.canChangeDefinition"
-                        class="o_field_property_selection_drag oi oi-draggable ui-sortable-handle me-2 text-center"/>
+                        class="o_field_property_selection_drag oi ui-sortable-handle me-2 text-center" data-icon="drag_indicator"/>
                     <span t-if="this.props.readonly" t-out="option[1]"/>
                     <input
                         t-else=""
@@ -25,14 +25,14 @@
                         class="btn btn-link m-0 p-0 text-muted fs-5"
                         title="Select Default"
                         t-on-click="() => this.onOptionSetDefault(option_index)">
-                        <i t-att-class="option[0] === this.props.default ? 'fa fa-star align-bottom' : 'fa fa-star-o align-bottom'"/>
+                        <i class="oi align-bottom" t-att-class="{'oi-filled': option[0] === this.props.default}" data-icon="star"/>
                     </button>
                     <button
                         t-if="!this.props.readonly"
                         class="btn btn-link link-danger ms-2 p-0 fs-5"
                         title="Remove Property"
                         t-on-click="() => this.onOptionDelete(option_index)">
-                        <i class="fa fa-trash-o align-bottom"/>
+                        <i class="oi align-bottom" data-icon="delete"/>
                     </button>
                 </div>
                 <button
@@ -40,7 +40,7 @@
                     class="btn btn-link btn-sm"
                     t-on-click="() => this.onOptionCreate(this.options.length)"
                     t-custom-ref="addButton">
-                    <i class="fa fa-plus"/>
+                    <i class="oi" data-icon="add"/>
                     Add a Value
                 </button>
             </div>
diff --git a/addons/web/static/src/views/fields/relational_utils.xml b/addons/web/static/src/views/fields/relational_utils.xml
index 5bd4c18e719430..ef85710a4fb736 100644
--- a/addons/web/static/src/views/fields/relational_utils.xml
+++ b/addons/web/static/src/views/fields/relational_utils.xml
@@ -56,7 +56,7 @@
 
         <t t-if="this.props.delete and this.displayDeleteButton">
             <button class="btn btn-secondary d-flex flex-nowrap align-items-center justify-content-center gap-1 ms-md-auto o_btn_remove" t-on-click="this.remove" data-hotkey="k">
-                <i class="fa fa-trash"/>
+                <i class="oi oi-filled" data-icon="delete"/>
                 <t t-if="this.props.deleteButtonLabel" t-out="this.props.deleteButtonLabel"/>
                 <t t-else="">Remove</t>
             </button>
diff --git a/addons/web/static/src/views/fields/timezone_mismatch/timezone_mismatch_field.xml b/addons/web/static/src/views/fields/timezone_mismatch/timezone_mismatch_field.xml
index 983fec1b98c8b9..e71b74ede66fc6 100644
--- a/addons/web/static/src/views/fields/timezone_mismatch/timezone_mismatch_field.xml
+++ b/addons/web/static/src/views/fields/timezone_mismatch/timezone_mismatch_field.xml
@@ -4,7 +4,8 @@
     <t t-name="web.TimezoneMismatchField" t-inherit="web.SelectionField" t-inherit-mode="primary">
         <xpath expr="." position="inside">
             <span t-if="this.mismatch"
-                class="o_tz_warning fa fa-exclamation-triangle position-static align-self-center m-0 ms-2"
+                class="o_tz_warning oi position-static align-self-center m-0 ms-2"
+                data-icon="warning"
                 t-att-title="this.mismatchTitle" />
         </xpath>
     </t>
diff --git a/addons/web/static/src/views/fields/x2many/x2many_field.xml b/addons/web/static/src/views/fields/x2many/x2many_field.xml
index 04f7c2839d3274..b1a88309b587b3 100644
--- a/addons/web/static/src/views/fields/x2many/x2many_field.xml
+++ b/addons/web/static/src/views/fields/x2many/x2many_field.xml
@@ -21,6 +21,7 @@
                                 className="`${control.className}`"
                                 clickParams="control.clickParams"
                                 icon="control.icon"
+                                icon_class="control.icon_class"
                                 record="this.props.record.data[this.props.name]"
                                 string="control.string"
                                 title="control.title"
diff --git a/addons/web/static/src/views/form/button_box/button_box.xml b/addons/web/static/src/views/form/button_box/button_box.xml
index afa25324eb884c..dfe6397483e154 100644
--- a/addons/web/static/src/views/form/button_box/button_box.xml
+++ b/addons/web/static/src/views/form/button_box/button_box.xml
@@ -8,7 +8,7 @@
             <Dropdown position="!this.env.isSmall ? 'bottom-end' : ''" menuClass="'o-form-buttonbox p-0 border-0 ' + (!this.env.isSmall ? 'o_dropdown_more' : 'o-form-buttonbox-small')">
                 <button class="o_button_more btn d-flex justify-content-center align-items-center" t-att-class="!this.env.isSmall ? 'o-dropdown-caret btn-outline-secondary' : 'btn-secondary'" data-available-offline="">
                     <span t-if="!this.env.isSmall">More</span>
-                    <i t-else="" class="fa fa-fw fa-bolt lh-base" aria-hidden="true"/>
+                    <i t-else="" class="oi oi-lg oi-fw" data-icon="widgets" aria-hidden="true"/>
                 </button>
                 <t t-set-slot="content">
                     <DropdownItem t-foreach="this.additionalButtons" t-as="button" t-key="button_value" class="'d-flex flex-column p-0'">
diff --git a/addons/web/static/src/views/form/form_controller.js b/addons/web/static/src/views/form/form_controller.js
index ec07fe2bdfb860..668f01cc5795e3 100644
--- a/addons/web/static/src/views/form/form_controller.js
+++ b/addons/web/static/src/views/form/form_controller.js
@@ -559,7 +559,7 @@ export class FormController extends Component {
             addPropertyFieldValue: {
                 isAvailable: () => activeActions.addPropertyFieldValue,
                 sequence: 10,
-                icon: "fa fa-cogs",
+                icon: "settings_applications",
                 description: this.propertiesState.editable
                     ? _t("Save Properties")
                     : _t("Edit Properties"),
@@ -573,7 +573,7 @@ export class FormController extends Component {
             duplicate: {
                 isAvailable: () => activeActions.create && activeActions.duplicate,
                 sequence: 30,
-                icon: "fa fa-clone",
+                icon: "content_copy",
                 description: _t("Duplicate"),
                 callback: () => this.duplicateRecord(),
             },
@@ -582,7 +582,7 @@ export class FormController extends Component {
                 availableOffline: true,
                 sequence: 40,
                 description: _t("Archive"),
-                icon: "oi oi-archive",
+                icon: "archive",
                 callback: () => {
                     this.dialogService.add(ConfirmationDialog, this.archiveDialogProps);
                 },
@@ -591,7 +591,7 @@ export class FormController extends Component {
                 isAvailable: () => this.archiveEnabled && !this.model.root.isActive,
                 availableOffline: true,
                 sequence: 45,
-                icon: "oi oi-unarchive",
+                icon: "unarchive",
                 description: _t("Unarchive"),
                 callback: () => this.model.root.unarchive(),
             },
@@ -599,7 +599,8 @@ export class FormController extends Component {
                 isAvailable: () => activeActions.delete && !this.model.root.isNew,
                 availableOffline: true,
                 sequence: 50,
-                icon: "fa fa-trash-o",
+                icon: "delete",
+                icon_class: "oi-filled",
                 description: _t("Delete"),
                 class: "text-danger",
                 callback: () => this.deleteRecord(),
diff --git a/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml b/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
index 54c57541102e36..3efd749b4f332a 100644
--- a/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
+++ b/addons/web/static/src/views/form/form_status_indicator/form_status_indicator.xml
@@ -13,7 +13,7 @@
                     aria-label="Save manually"
                     data-available-offline=""
                     t-custom-ref="save">
-                    <i class="fa fa-cloud-upload fa-fw" />
+                    <i class="oi oi-fw" data-icon="cloud_upload" />
                 </button>
                 <button
                     type="button"
@@ -23,14 +23,14 @@
                     data-tooltip="Discard all changes"
                     data-available-offline=""
                     aria-label="Discard all changes">
-                    <i class="fa fa-times fa-fw" />
+                    <i class="oi oi-fw" data-icon="close" />
                 </button>
             </div>
             <span
                 t-if="!this.props.model.root.isNew and this.indicatorMode === 'invalid'"
                 class="text-danger small ms-2"
                 data-tooltip="Unable to save. Correct the issue or discard all changes">
-                <i class="fa fa-warning" />
+                <i class="oi" data-icon="warning" />
             </span>
         </div>
     </t>
diff --git a/addons/web/static/src/views/form/setting/setting.scss b/addons/web/static/src/views/form/setting/setting.scss
index 95a1a9043139c2..99828ad90acfce 100644
--- a/addons/web/static/src/views/form/setting/setting.scss
+++ b/addons/web/static/src/views/form/setting/setting.scss
@@ -14,7 +14,7 @@
     border-left: 1px solid $border-color;
     padding-left: 12px;
 
-    .o_form_label + .fa, .o_form_label + .o_doc_link {
+    .o_form_label + .oi, .o_form_label + .o_doc_link {
         margin-left: map-get($spacers, 2);
    }
 
diff --git a/addons/web/static/src/views/form/setting/setting.xml b/addons/web/static/src/views/form/setting/setting.xml
index eda1ddba5c60af..0bcde04d19ed18 100644
--- a/addons/web/static/src/views/form/setting/setting.xml
+++ b/addons/web/static/src/views/form/setting/setting.xml
@@ -13,13 +13,13 @@
                     <span class="o_form_label"><t t-out="this.labelString"/></span>
                 </t>
                 <t t-if="this.labelString and this.props.info">
-                    <span class="fa fa-info-circle" t-att-title="this.props.info"/>
+                    <span class="oi" data-icon="info" t-att-title="this.props.info"/>
                 </t>
                 <t t-if="this.labelString and this.props.documentation">
-                    <DocumentationLink path="this.props.documentation" icon="'fa-question-circle'"/>
+                    <DocumentationLink path="this.props.documentation" icon="'help'"/>
                 </t>
                 <t t-if="this.displayCompanyDependentIcon">
-                    <span class="fa fa-lg fa-building-o" title="Values set here are company-specific."/>
+                    <span class="oi oi-lg" data-icon="business" title="Values set here are company-specific."/>
                 </t>
                 <t t-if="this.labelString and this.props.help">
                     <div class="text-muted"><t t-out="this.props.help"/></div>
diff --git a/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml
index 1b3187c6748542..022fa5f3be24d4 100644
--- a/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml
+++ b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml
@@ -9,7 +9,7 @@
                 <t t-if="firstSlot" t-slot="{{ firstSlot }}" />
                 <Dropdown t-if="otherSlots.length">
                     <button class="btn btn-secondary" title="More">
-                        <i class="oi oi-fw oi-ellipsis-v" />
+                        <i class="oi oi-fw" data-icon="more_vert"/>
                     </button>
                     <t t-set-slot="content">
                         <t t-foreach="otherSlots" t-as="slot" t-key="slot">
diff --git a/addons/web/static/src/views/graph/graph_controller.xml b/addons/web/static/src/views/graph/graph_controller.xml
index fd1083e656d5a5..b1fa233eae5e1f 100644
--- a/addons/web/static/src/views/graph/graph_controller.xml
+++ b/addons/web/static/src/views/graph/graph_controller.xml
@@ -11,15 +11,15 @@
             />
         </div>
         <div class="btn-group" role="toolbar" aria-label="Change graph">
-            <button class="btn btn-secondary fa fa-bar-chart o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
+            <button class="btn btn-secondary oi o_graph_button" data-icon="bar_chart" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
                 t-on-click="() => this.onModeSelected('bar')"
                 t-att-class="{ active: this.model.metaData.mode === 'bar' }"
             />
-            <button class="btn btn-secondary fa fa-line-chart o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
+            <button class="btn btn-secondary oi o_graph_button" data-icon="show_chart" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
                 t-on-click="() => this.onModeSelected('line')"
                 t-att-class="{ active: this.model.metaData.mode === 'line' }"
             />
-            <button class="btn btn-secondary fa fa-pie-chart o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
+            <button class="btn btn-secondary oi o_graph_button" data-icon="pie_chart" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
                 t-on-click="() => this.onModeSelected('pie')"
                 t-att-class="{ active: this.model.metaData.mode === 'pie' }"
             />
@@ -41,11 +41,11 @@
             />
         </div>
         <div t-if="this.model.metaData.mode !== 'pie'" class="btn-group" role="toolbar" aria-label="Sort graph" name="toggleOrderToolbar">
-            <button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
+            <button class="btn btn-secondary oi o_graph_button" data-icon="sort" data-tooltip="Descending" aria-label="Descending"
                 t-on-click="() => this.toggleOrder('DESC')"
                 t-att-class="{ active: this.model.metaData.order === 'DESC' }"
             />
-            <button class="btn btn-secondary fa fa-sort-amount-asc o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
+            <button class="btn btn-secondary oi oi-flip-vertical o_graph_button o_sort_asc" data-icon="sort" data-tooltip="Ascending" aria-label="Ascending"
                 t-on-click="() => this.toggleOrder('ASC')"
                 t-att-class="{ active: this.model.metaData.order === 'ASC' }"
             />
diff --git a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
index 8872e442bf86a7..9092fd869af5b4 100644
--- a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
+++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
@@ -8,7 +8,7 @@
                     Add <t t-out="this.relatedFieldName"/>
                 </div>
                 <button class="o_quick_create_button btn d-flex align-items-center justify-content-between flex-nowrap py-0 px-1">
-                    <i class="fa fa-angle-double-right" role="img" aria-label="Add column" title="Add column" />
+                    <i class="oi" data-icon="keyboard_double_arrow_right" role="img" aria-label="Add column" title="Add column" />
                 </button>
             </div>
             <div t-else="" class="pt-3 pb-2">
@@ -23,10 +23,10 @@
                             t-on-keydown="this.onInputKeydown"
                         />
                         <button class="btn btn-primary o_kanban_add" type="button" t-on-click="this.validate">
-                            <i class="fa fa-check"/>
+                            <i class="oi" data-icon="check"/>
                         </button>
                         <button class="btn btn-danger o_kanban_remove" type="button" t-on-click="this.fold">
-                            <i class="fa fa-times"/>
+                            <i class="oi" data-icon="close"/>
                         </button>
                     </div>
                 </div>
diff --git a/addons/web/static/src/views/kanban/kanban_controller.js b/addons/web/static/src/views/kanban/kanban_controller.js
index e98a1fe2510e9f..cc267da36360f6 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.js
+++ b/addons/web/static/src/views/kanban/kanban_controller.js
@@ -373,21 +373,21 @@ export class KanbanController extends Component {
             export: {
                 isAvailable: () => this.isExportEnable,
                 sequence: 10,
-                icon: "fa fa-upload",
+                icon: "upload",
                 description: _t("Export"),
                 callback: () => this.exportRecords(),
             },
             duplicate: {
                 isAvailable: () => this.props.archInfo.activeActions.duplicate,
                 sequence: 30,
-                icon: "fa fa-clone",
+                icon: "content_copy",
                 description: _t("Duplicate"),
                 callback: () => this.model.root.duplicateRecords(),
             },
             archive: {
                 isAvailable: () => this.archiveEnabled,
                 sequence: 40,
-                icon: "oi oi-archive",
+                icon: "archive",
                 description: _t("Archive"),
                 callback: () =>
                     this.model.root.toggleArchiveWithConfirmation(true, this.archiveDialogProps),
@@ -395,14 +395,15 @@ export class KanbanController extends Component {
             unarchive: {
                 isAvailable: () => this.archiveEnabled,
                 sequence: 45,
-                icon: "oi oi-unarchive",
+                icon: "unarchive",
                 description: _t("Unarchive"),
                 callback: () => this.model.root.toggleArchiveWithConfirmation(false),
             },
             delete: {
                 isAvailable: () => this.props.archInfo.activeActions.delete,
                 sequence: 50,
-                icon: "fa fa-trash-o",
+                icon: "delete",
+                icon_class: "oi-filled",
                 description: _t("Delete"),
                 class: "text-danger",
                 callback: () =>
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index 04d1da409bbcf6..5be4e166a2371e 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -310,7 +310,7 @@
                 padding: 0 .15rem;
                 height: map-get($font-sizes, 4) * $line-height-lg;
 
-                .fa-caret-left {
+                [data-icon="arrow_left"] {
                     margin-right: 0.2rem;
                 }
             }
@@ -318,7 +318,7 @@
             &:hover button.o_column_unfold {
                 padding: 0;
 
-                .fa-caret-left {
+                [data-icon="arrow_left"] {
                     margin-right: 0.5rem;
                 }
             }
diff --git a/addons/web/static/src/views/kanban/kanban_controller.xml b/addons/web/static/src/views/kanban/kanban_controller.xml
index ea4d5279f64d22..d42c0cfb0fe0e9 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.xml
+++ b/addons/web/static/src/views/kanban/kanban_controller.xml
@@ -15,6 +15,7 @@
                             defaultRank="'btn-secondary'"
                             domain="this.props.domain"
                             icon="button.icon"
+                            icon_class="button.icon_class"
                             string="button.string"
                             title="button.title"
                             attrs="button.attrs"
@@ -34,6 +35,7 @@
                                     defaultRank="'btn-secondary'"
                                     domain="this.props.domain"
                                     icon="button.icon"
+                                    icon_class="button.icon_class"
                                     string="button.string"
                                     title="button.title"
                                     attrs="button.attrs"
@@ -58,6 +60,7 @@
                                     defaultRank="'btn-secondary'"
                                     domain="this.props.domain"
                                     icon="button.icon"
+                                    icon_class="button.icon_class"
                                     string="button.string"
                                     title="button.title"
                                     attrs="button.attrs"
diff --git a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.scss b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.scss
index e866803abed04a..f1f86a37ecd7b5 100644
--- a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.scss
+++ b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.scss
@@ -13,10 +13,11 @@
             @include o-position-absolute(.5rem, .5rem);
             overflow: hidden;
             border-radius: 100%;
-            font: normal normal normal 1rem/0.87 FontAwesome;
+            font: normal normal normal 1rem/1 "material_symbols_sharp";
             color: $o-action;
             backdrop-filter: brightness(100);
-            content: "\f058"; //fa-check-circle
+            content: "check";
+            aspect-ratio: 1;
         }
     }
 }
diff --git a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
index 96b864c3ea0be5..bdf7ff32d06eb0 100644
--- a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
+++ b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
@@ -30,7 +30,7 @@
                             class="btn btn-primary"
                             t-on-click="this.uploadImage"
                         >
-                            <i class="fa fa-cloud-upload me-1" aria-hidden="true"/>
+                            <i class="oi me-1" data-icon="cloud_upload" aria-hidden="true"/>
                             Upload New
                         </button>
                 </FileInput>
diff --git a/addons/web/static/src/views/kanban/kanban_header.js b/addons/web/static/src/views/kanban/kanban_header.js
index f01c8ba16962e1..59f0b506e9fb22 100644
--- a/addons/web/static/src/views/kanban/kanban_header.js
+++ b/addons/web/static/src/views/kanban/kanban_header.js
@@ -80,7 +80,7 @@ export class KanbanHeader extends Component {
                             o_kanban_toggle_fold: true,
                             disabled: this.props.list.model.useSampleModel,
                         }),
-                        icon: "fa-compress",
+                        icon: "close_fullscreen",
                     },
                 ],
                 ...registry.category("group_config_items").getEntries(),
diff --git a/addons/web/static/src/views/kanban/kanban_header.xml b/addons/web/static/src/views/kanban/kanban_header.xml
index c9750f27e5a6d2..e64a52f6a6f03b 100644
--- a/addons/web/static/src/views/kanban/kanban_header.xml
+++ b/addons/web/static/src/views/kanban/kanban_header.xml
@@ -19,12 +19,12 @@
                 <t t-if="this.env.isSmall or !this.group.isFolded">
                     <GroupConfigMenu t-props="this.configMenuProps"/>
                     <button t-if="this.canQuickCreate()" class="o_kanban_quick_add d-print-none btn pe-2 me-n2" t-on-click="() => this.quickCreate()">
-                        <i class="fa fa-plus opacity-75 opacity-100-hover" role="img" aria-label="Quick add" title="Quick add"/>
+                        <i class="oi opacity-75 opacity-100-hover" data-icon="add_2" role="img" aria-label="Quick add" title="Quick add"/>
                     </button>
                 </t>
                 <button t-else="" class="o_column_unfold btn d-flex align-items-center justify-content-between flex-nowrap transition-base">
-                    <i class="fa fa-caret-left transition-base" role="img" aria-label="Unfold" title="Unfold" />
-                    <i class="fa fa-caret-right" role="img" aria-label="Unfold" title="Unfold" />
+                    <i class="oi transition-base" data-icon="arrow_left" role="img" aria-label="Unfold" title="Unfold" />
+                    <i class="oi" data-icon="arrow_right" role="img" aria-label="Unfold" title="Unfold" />
                 </button>
             </div>
             <div t-if="(this.env.isSmall or !this.group.isFolded) and this.progressBar" class="o_kanban_counter position-relative d-flex align-items-center justify-content-between" t-att-class="{ 'opacity-25': !this.group.count }">
diff --git a/addons/web/static/src/views/kanban/kanban_record.xml b/addons/web/static/src/views/kanban/kanban_record.xml
index eb19926b6d237b..27d8e1e8bfecf2 100644
--- a/addons/web/static/src/views/kanban/kanban_record.xml
+++ b/addons/web/static/src/views/kanban/kanban_record.xml
@@ -22,8 +22,8 @@
     <t t-name="web.KanbanRecordMenu">
         <div t-if="this.showMenu" class="o_dropdown_kanban bg-transparent position-absolute end-0 top-0 w-auto">
             <Dropdown menuClass="'o-dropdown--kanban-record-menu'" position="'bottom-end'">
-                <button class="btn o-no-caret rounded-0 px-1" title="Dropdown menu">
-                    <span class="oi oi-ellipsis-v"/>
+                <button class="btn btn-light o-no-caret rounded-0 px-1" title="Dropdown menu">
+                    <i class="oi oi-lg" data-icon="more_vert"/>
                 </button>
                 <t t-set-slot="content">
                     <KanbanDropdownMenuWrapper>
diff --git a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
index 21aaddc5acaa3a..179d1db3f83ddd 100644
--- a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
+++ b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
@@ -21,7 +21,7 @@
                 </button>
                 <span class="flex-grow-1"></span>
                 <button class="btn btn-secondary o_kanban_cancel" t-on-click="() => this.cancel(true)" data-available-offline="">
-                    <i class="fa fa-trash" />
+                    <i class="oi oi-filled" data-icon="delete" />
                 </button>
             </div>
         </div>
diff --git a/addons/web/static/src/views/list/export_all/export_all.xml b/addons/web/static/src/views/list/export_all/export_all.xml
index c6917133040aab..a2a5d2205a8fb2 100644
--- a/addons/web/static/src/views/list/export_all/export_all.xml
+++ b/addons/web/static/src/views/list/export_all/export_all.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.ExportAll">
         <DropdownItem class="'o_export_all_menu'" onSelected.bind="this.onDirectExportData">
-            <i class="fa fa-fw fa-upload me-1"/>Export
+            <i class="oi oi-fw me-1" data-icon="upload"/>Export
         </DropdownItem>
     </t>
 
diff --git a/addons/web/static/src/views/list/list_confirmation_dialog.xml b/addons/web/static/src/views/list/list_confirmation_dialog.xml
index e11fc3c321d762..6ba906ba606ac8 100644
--- a/addons/web/static/src/views/list/list_confirmation_dialog.xml
+++ b/addons/web/static/src/views/list/list_confirmation_dialog.xml
@@ -56,7 +56,7 @@
                         </tbody>
                     </table>
                     <div t-if="this.showTip" class="alert alert-info d-flex align-items-center mt-3">
-                        <i class="fa fa-lightbulb-o fa-lg me-4"></i>
+                        <i class="oi oi-lg me-4" data-icon="lightbulb"></i>
                         <div class="text-muted">
                             <t t-if="this.showNumberTip">
                                 <div>Use the operators "+=", "-=", "*=" and "/=" to update the current value.</div>
diff --git a/addons/web/static/src/views/list/list_controller.js b/addons/web/static/src/views/list/list_controller.js
index 6170e60c1a5b2b..30bd97ba8d3740 100644
--- a/addons/web/static/src/views/list/list_controller.js
+++ b/addons/web/static/src/views/list/list_controller.js
@@ -433,14 +433,14 @@ export class ListController extends Component {
             export: {
                 isAvailable: () => this.isExportEnable,
                 sequence: 10,
-                icon: "fa fa-upload",
+                icon: "upload",
                 description: _t("Export"),
                 callback: () => this.exportRecords(),
             },
             duplicate: {
                 isAvailable: () => this.activeActions.duplicate,
                 sequence: 30,
-                icon: "fa fa-clone",
+                icon: "content_copy",
                 description: _t("Duplicate"),
                 callback: () => this.model.root.duplicateRecords(),
             },
@@ -448,7 +448,7 @@ export class ListController extends Component {
                 isAvailable: () => this.archiveEnabled,
                 availableOffline: true,
                 sequence: 40,
-                icon: "oi oi-archive",
+                icon: "archive",
                 description: _t("Archive"),
                 callback: () =>
                     this.model.root.toggleArchiveWithConfirmation(true, this.archiveDialogProps),
@@ -457,7 +457,7 @@ export class ListController extends Component {
                 isAvailable: () => this.archiveEnabled,
                 availableOffline: true,
                 sequence: 45,
-                icon: "oi oi-unarchive",
+                icon: "unarchive",
                 description: _t("Unarchive"),
                 callback: () => this.model.root.toggleArchiveWithConfirmation(false),
             },
@@ -465,7 +465,8 @@ export class ListController extends Component {
                 isAvailable: () => this.activeActions.delete,
                 availableOffline: true,
                 sequence: 50,
-                icon: "fa fa-trash-o",
+                icon: "delete",
+                icon_class: "oi-filled",
                 description: _t("Delete"),
                 class: "text-danger",
                 callback: () => this.onDeleteSelectedRecords(),
diff --git a/addons/web/static/src/views/list/list_controller.xml b/addons/web/static/src/views/list/list_controller.xml
index 3282927d69fa1a..e2d402bae9c5dd 100644
--- a/addons/web/static/src/views/list/list_controller.xml
+++ b/addons/web/static/src/views/list/list_controller.xml
@@ -15,6 +15,7 @@
                             defaultRank="'btn-secondary'"
                             domain="this.props.domain"
                             icon="button.icon"
+                            icon_class="button.icon_class"
                             string="button.string"
                             title="button.title"
                             attrs="button.attrs"
@@ -46,6 +47,7 @@
                                     defaultRank="'btn-secondary'"
                                     domain="this.props.domain"
                                     icon="button.icon"
+                                    icon_class="button.icon_class"
                                     string="button.string"
                                     title="button.title"
                                     attrs="button.attrs"
@@ -67,6 +69,7 @@
                                     defaultRank="'btn-secondary'"
                                     domain="this.props.domain"
                                     icon="button.icon"
+                                    icon_class="button.icon_class"
                                     string="button.string"
                                     title="button.title"
                                     attrs="button.attrs"
diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index 302198b02102b3..baa9c396ee3d58 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -918,13 +918,20 @@ export class ListRenderer extends Component {
         return (sortable || options.allow_order) && hasLabel;
     }
 
-    getSortableIconClass(column) {
+    getSortableIcon(column) {
         const { orderBy } = this.props.list;
-        const classNames = this.isSortable(column) ? ["fa"] : ["d-none"];
         if (orderBy.length && orderBy[0].name === column.name) {
-            classNames.push(orderBy[0].asc ? "fa-sort-asc" : "fa-sort-desc");
+            return orderBy[0].asc ? "arrow_upward" : "arrow_downward";
         } else {
-            classNames.push("fa-sort", "opacity-0", "opacity-100-hover");
+            return "swap_vert";
+        }
+    }
+
+    getSortableIconClass(column) {
+        const { orderBy } = this.props.list;
+        const classNames = this.isSortable(column) ? ["oi"] : ["d-none"];
+        if (!(orderBy.length && orderBy[0].name === column.name)) {
+            classNames.push("opacity-0", "opacity-100-hover");
         }
 
         return classNames.join(" ");
diff --git a/addons/web/static/src/views/list/list_renderer.scss b/addons/web/static/src/views/list/list_renderer.scss
index f403bd93139a12..f56ba323095920 100644
--- a/addons/web/static/src/views/list/list_renderer.scss
+++ b/addons/web/static/src/views/list/list_renderer.scss
@@ -131,10 +131,6 @@
                 display: table-cell;
                 @include text-truncate();
 
-                .o_field_priority .fa, .o_field_list_activity .fa {
-                    line-height: $o-line-size;
-                }
-
                 &.o_list_text {
                     white-space: pre-wrap;
                 }
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index aa1525522855f4..098a0268cf3111 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -34,7 +34,7 @@
                                         <span class="d-block min-w-0 text-truncate flex-grow-1 flex-shrink-1" t-att-class="isNumeric ? 'o_list_number_th' : ''"
                                               t-out="column.label"/>
                                         <div class="o_list_header_label_spacer"/>
-                                        <i class="o_list_sortable_icon" t-att-class="this.getSortableIconClass(column)"/>
+                                        <i class="o_list_sortable_icon" t-att-class="this.getSortableIconClass(column)" t-att-data-icon="this.getSortableIcon(column)"/>
                                     </div>
                                     <span
                                           class="o_resize position-absolute top-0 end-0 bottom-0 ps-1 bg-black-25 opacity-0 opacity-50-hover z-1"
@@ -49,7 +49,7 @@
                             <div t-if="this.displayOptionalFields or this.hasOptionalOpenFormViewColumn" class="o_optional_columns_dropdown d-print-none text-center border-top-0">
                                 <Dropdown position="'bottom-end'" menuRef="this.optionalColumnsDropdownRef">
                                     <button class="btn p-0" tabindex="-1" data-available-offline="">
-                                        <i class="o_optional_columns_dropdown_toggle oi oi-fw oi-settings-adjust"/>
+                                        <i class="o_optional_columns_dropdown_toggle oi oi-fw" data-icon="tune"/>
                                     </button>
 
                                     <t t-set-slot="content">
@@ -110,10 +110,10 @@
                                     t-on-keydown="(ev) => this.onGroupInputKeydown(ev)"
                                 />
                                 <button class="btn btn-primary o_list_group_confirm" type="button" t-on-click="this.addNewGroup">
-                                    <i class="fa fa-check"/>
+                                    <i class="oi" data-icon="check"/>
                                 </button>
                                 <button class="btn btn-danger o_list_group_cancel" type="button" t-on-click="() => this.state.showGroupInput = false">
-                                    <i class="fa fa-times"/>
+                                    <i class="oi" data-icon="close"/>
                                 </button>
                             </div>
                         </td>
@@ -162,6 +162,7 @@
                             className="`${control.className} ${control_index !== 0 ? 'ml16' : ''}`"
                             clickParams="control.clickParams"
                             icon="control.icon"
+                            icon_class="control.icon_class"
                             attrs="control.attrs"
                             record="this.props.list"
                             string="control.string"
@@ -219,7 +220,7 @@
                     <t t-else="">Click to collapse all groups</t>
                 </div>
                 <div class="d-flex align-items-center">
-                    <span t-attf-class="o_group_caret fa fa-fw {{group.isFolded ? 'fa-caret-right' : 'fa-caret-down' }} me-1"
+                    <span class="o_group_caret oi oi-fw me-1" t-attf-data-icon="{{ group.isFolded ? 'arrow_right' : 'arrow_drop_down' }}"
                         t-attf-style="--o-list-group-level: {{this.getGroupLevel(group)}}"/>
                     <span class="fw-normal">
                         <t t-out="this.odoomark(group.displayName)"/>
@@ -237,6 +238,7 @@
                                         className="button.className"
                                         clickParams="button.clickParams"
                                         icon="button.icon"
+                                        icon_class="button.icon_class"
                                         record="group.record"
                                         string="button.string"
                                         title="button.title"
@@ -322,6 +324,7 @@
                                     defaultRank="button.defaultRank"
                                     disabled="button.disabled"
                                     icon="button.icon"
+                                    icon_class="button.icon_class"
                                     record="record"
                                     string="button.string"
                                     title="button.title"
@@ -365,12 +368,11 @@
                         t-on-click.stop="hasDeleteButton ? (ev) => this.onRemoveCellClicked(record, ev) : () => {}"
                         tabindex="-1"
                     >
-                        <button class="fa d-print-none"
+                        <button class="oi d-print-none"
                             t-if="hasDeleteButton"
-                            t-att-class="{
-                                'fa-trash-o': !useUnlink and this.activeActions.delete,
-                                'fa-times': useUnlink and this.activeActions.unlink,
-                            }"
+                            t-attf-data-icon="{{
+                                !useUnlink and this.activeActions.delete ? 'delete' : useUnlink and this.activeActions.unlink ? 'close' : ''
+                            }}"
                             name="delete"
                             aria-label="Delete row"
                             tabindex="-1"
diff --git a/addons/web/static/src/views/pivot/pivot_controller.xml b/addons/web/static/src/views/pivot/pivot_controller.xml
index 7016e22d59c818..a12b264643a3a2 100644
--- a/addons/web/static/src/views/pivot/pivot_controller.xml
+++ b/addons/web/static/src/views/pivot/pivot_controller.xml
@@ -12,9 +12,9 @@
             </div>
             <div class="btn-group" role="toolbar" aria-label="Pivot settings">
                 <t t-set="noDataDisplayed" t-value="!this.model.hasData() || !this.model.metaData.activeMeasures.length"/>
-                <button class="btn btn-secondary fa fa-exchange o_pivot_flip_button" t-on-click="this.onFlipButtonClicked" data-tooltip="Flip axis" aria-label="Flip axis" t-attf-disabled="{{noDataDisplayed ? 'disabled' : false}}"/>
-                <button class="btn btn-secondary fa fa-arrows o_pivot_expand_button" t-on-click="this.onExpandButtonClicked" data-tooltip="Expand all" aria-label="Expand all" t-attf-disabled="{{noDataDisplayed ? 'disabled' : false}}"/>
-                <button class="btn btn-secondary fa fa-download o_pivot_download" t-on-click="this.onDownloadButtonClicked" data-tooltip="Download xlsx" aria-label="Download xlsx" t-attf-disabled="{{noDataDisplayed ? 'disabled' : false}}"/>
+                <button class="btn btn-secondary oi o_pivot_flip_button" data-icon="swap_horiz" t-on-click="this.onFlipButtonClicked" data-tooltip="Flip axis" aria-label="Flip axis" t-attf-disabled="{{noDataDisplayed ? 'disabled' : false}}"/>
+                <button class="btn btn-secondary oi o_pivot_expand_button" data-icon="open_with" t-on-click="this.onExpandButtonClicked" data-tooltip="Expand all" aria-label="Expand all" t-attf-disabled="{{noDataDisplayed ? 'disabled' : false}}"/>
+                <button class="btn btn-secondary oi o_pivot_download" data-icon="download" t-on-click="this.onDownloadButtonClicked" data-tooltip="Download xlsx" aria-label="Download xlsx" t-attf-disabled="{{noDataDisplayed ? 'disabled' : false}}"/>
             </div>
         </div>
     </t>
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index 292bcfcf1cbc9b..d2216828bd182a 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -133,7 +133,7 @@
             t-on-pointerdown.capture.stop.synthetic=""
             t-on-click.stop.synthetic="(ev) => this.onHeaderClick(ev, cell, isXAxis)"
         >
-            <i t-attf-class="fa fa-{{ cell.isLeaf ? 'plus-square' : 'minus-square-o' }} me-1"/>
+            <i class="oi me-1" t-att-class="{'oi-filled': cell.isLeaf}" t-attf-data-icon="{{ cell.isLeaf ? 'add_box' : 'indeterminate_check_box' }}"/>
             <span t-out="cell.title"/>
         </th>
     </t>
@@ -144,7 +144,7 @@
                 o_pivot_sort_order_desc: cell.order === 'desc',
             }" t-on-click.prevent="() => this.onMeasureClick(cell)" t-on-mouseover="this.onMouseEnter" t-on-mouseout="this.onMouseLeave">
             <t t-out="cell.title"/>
-            <i t-if="cell.order === 'asc' || cell.order ==='desc'" t-attf-class="fa fa-caret-{{ cell.order === 'asc' ? 'up' : 'down' }} ms-1"/>
+            <i t-if="cell.order === 'asc' || cell.order ==='desc'" class="oi ms-1" t-attf-data-icon="{{ cell.order === 'asc' ? 'arrow_drop_up' : 'arrow_drop_down' }}"/>
         </th>
     </t>
 
diff --git a/addons/web/static/src/views/utils.js b/addons/web/static/src/views/utils.js
index d98d7b83e16243..194328d75188aa 100644
--- a/addons/web/static/src/views/utils.js
+++ b/addons/web/static/src/views/utils.js
@@ -232,6 +232,7 @@ export function processButton(node) {
         className: node.getAttribute("class") || "",
         disabled: !!node.getAttribute("disabled") || false,
         icon: node.getAttribute("icon") || false,
+        icon_class: node.getAttribute("icon_class") || "",
         title: node.getAttribute("title") || undefined,
         string: node.getAttribute("string") || undefined,
         options: JSON.parse(node.getAttribute("options") || "{}"),
diff --git a/addons/web/static/src/views/view_button/view_button.js b/addons/web/static/src/views/view_button/view_button.js
index 06e9205647c36d..9dc8c8236de737 100644
--- a/addons/web/static/src/views/view_button/view_button.js
+++ b/addons/web/static/src/views/view_button/view_button.js
@@ -21,16 +21,9 @@ const odooToBootstrapClasses = {
 
 function iconFromString(iconString) {
     const icon = {};
-    if (iconString.startsWith("fa-")) {
-        icon.tag = "i";
-        icon.class = `o_button_icon fa fa-fw ${iconString}`;
-    } else if (iconString.startsWith("oi-")) {
-        icon.tag = "i";
-        icon.class = `o_button_icon oi oi-fw ${iconString}`;
-    } else {
-        icon.tag = "img";
-        icon.src = iconString;
-    }
+    icon.tag = "i";
+    icon.class = `o_button_icon oi`;
+    icon.name = iconString;
     return icon;
 }
 
@@ -45,6 +38,7 @@ export class ViewButton extends Component {
         "context?",
         "clickParams?",
         "icon?",
+        "icon_class?",
         "defaultRank?",
         "disabled?",
         "size?",
@@ -60,6 +54,7 @@ export class ViewButton extends Component {
         className: "",
         clickParams: {},
         attrs: {},
+        icon_class: "",
     };
 
     setup() {
diff --git a/addons/web/static/src/views/view_button/view_button.xml b/addons/web/static/src/views/view_button/view_button.xml
index 6587b8aa668783..38592bf437f22d 100644
--- a/addons/web/static/src/views/view_button/view_button.xml
+++ b/addons/web/static/src/views/view_button/view_button.xml
@@ -18,7 +18,7 @@
         t-att-tabindex="this.props.tabindex"
         t-custom-click.stop="onClick"
     >
-      <t t-if="this.icon" t-tag="this.icon.tag" t-att-class="this.icon.class + (this.buttonLabel ? ' me-1' : '')" t-att-src="this.icon.src"/>
+      <t t-if="this.icon" t-tag="this.icon.tag" t-att-class="this.icon.class + (this.buttonLabel ? ' me-1' : '') + ' ' + this.props.icon_class" t-att-src="this.icon.src" t-att-data-icon="this.icon.name"/>
       <t t-slot="contents"><span t-if="this.buttonLabel" t-out="this.buttonLabel"/></t>
     </t>
   </t>
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index 39e3358b423826..44ae338d576ccd 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -17,7 +17,7 @@ import { toStringExpression, BUTTON_CLICK_PARAMS } from "./utils";
 
 import { xml } from "@odoo/owl";
 
-const BUTTON_STRING_PROPS = ["string", "size", "title", "icon", "id", "disabled"];
+const BUTTON_STRING_PROPS = ["string", "size", "title", "icon", "icon_class", "id", "disabled"];
 const INTERP_REGEXP = /(\{\{|#\{)(.*?)(\}{1,2})/g;
 
 /**
diff --git a/addons/web/static/src/views/view_components/group_config_menu.js b/addons/web/static/src/views/view_components/group_config_menu.js
index dea828a6a3f7ab..b2614a41fd0a88 100644
--- a/addons/web/static/src/views/view_components/group_config_menu.js
+++ b/addons/web/static/src/views/view_components/group_config_menu.js
@@ -30,6 +30,7 @@ export class GroupConfigMenu extends Component {
             label: desc.label,
             class: typeof desc.class === "function" ? desc.class(args) : desc.class,
             icon: desc.icon,
+            icon_class: desc.icon_class,
             isVisible: typeof desc.isVisible === "function" ? desc.isVisible(args) : desc.isVisible,
             method: typeof desc.method === "function" ? desc.method : this[desc.method].bind(this),
         }));
@@ -88,7 +89,8 @@ groupConfigItems.add(
         label: _t("Edit"),
         isVisible: ({ permissions }) => permissions.canEditGroup,
         class: "o_group_edit",
-        icon: "fa-pencil",
+        icon: "edit",
+        icon_class: "oi-filled",
         method: "editGroup",
     },
     { sequence: 20 }
@@ -99,7 +101,8 @@ groupConfigItems.add(
         label: _t("Delete"),
         isVisible: ({ permissions }) => permissions.canDeleteGroup,
         class: "o_group_delete text-danger",
-        icon: "fa-trash",
+        icon: "delete",
+        icon_class: "oi-filled",
         method: "deleteGroup",
     },
     { sequence: 30 }
diff --git a/addons/web/static/src/views/view_components/group_config_menu.xml b/addons/web/static/src/views/view_components/group_config_menu.xml
index 6580f03fa05cc1..ad8fae83528b64 100644
--- a/addons/web/static/src/views/view_components/group_config_menu.xml
+++ b/addons/web/static/src/views/view_components/group_config_menu.xml
@@ -4,12 +4,12 @@
         <div class="o_group_config d-print-none d-flex">
             <Dropdown menuClass="'o-dropdown--group-config-menu'" position="'bottom-end'">
                 <button class="btn px-2 py-0" tabindex="-1">
-                    <i class="fa fa-gear opacity-50 opacity-100-hover" role="img" aria-label="Settings" title="Settings"/>
+                    <i class="oi oi-filled ar opacity-50 opacity-100-hover" data-icon="settings" role="img" aria-label="Settings" title="Settings"/>
                 </button>
                 <t t-set-slot="content">
                     <t t-foreach="this.configItems" t-as="item" t-key="item.key">
                         <DropdownItem t-if="item.isVisible" class="item.class" onSelected="() => item.method()">
-                            <i t-if="item.icon" class="fa pe-2" t-att-class="item.icon"/>
+                            <i t-if="item.icon" class="oi pe-2" t-att-class="item.icon_class" t-att-data-icon="item.icon"/>
                             <t t-out="item.label"/>
                         </DropdownItem>
                     </t>
diff --git a/addons/web/static/src/views/view_components/multi_create_popover.xml b/addons/web/static/src/views/view_components/multi_create_popover.xml
index e14307de669dc8..4e2a9235e9159c 100644
--- a/addons/web/static/src/views/view_components/multi_create_popover.xml
+++ b/addons/web/static/src/views/view_components/multi_create_popover.xml
@@ -12,7 +12,7 @@
                         onInvalid="() => this.setMultiCreateTimeRange({start: null})"
                         showSeconds="false"
                     />
-                    <i class="fa fa-arrow-right"/>
+                    <i class="oi" data-icon="arrow_forward"/>
                     <TimePicker
                         inputCssClass="'o_input'"
                         value="this.multiCreateData.timeRange.end"
diff --git a/addons/web/static/src/views/view_components/multi_selection_buttons.xml b/addons/web/static/src/views/view_components/multi_selection_buttons.xml
index 17df73a0f9693a..9936c774d84bf4 100644
--- a/addons/web/static/src/views/view_components/multi_selection_buttons.xml
+++ b/addons/web/static/src/views/view_components/multi_selection_buttons.xml
@@ -7,7 +7,7 @@
                 <span class="list-group-item active d-flex align-items-center pe-0 py-0 rounded-1 gap-1 flex-grow-1">
                     <b t-out="this.props.reactive.nbSelected"/> selected
                     <button data-tooltip="Unselect All" class="o_unselect_all btn btn-link ms-auto border-0" t-on-click="() => this.props.reactive.onCancel()">
-                        <i class="oi oi-close"/>
+                        <i class="oi" data-icon="close_small"/>
                     </button>
                 </span>
             </div>
@@ -15,7 +15,7 @@
                 Add
             </button>
             <button t-if="this.props.reactive.nbSelected > 0" class="btn btn-secondary" data-tooltip="Delete" t-on-click="() => this.onDelete()">
-                <i class="fa fa-trash text-danger"/>
+                <i class="oi oi-filled text-danger" data-icon="delete"/>
             </button>
         </div>
     </t>
diff --git a/addons/web/static/src/views/view_components/report_view_measures.xml b/addons/web/static/src/views/view_components/report_view_measures.xml
index 48fcb3eb6998c6..139d348c64d884 100644
--- a/addons/web/static/src/views/view_components/report_view_measures.xml
+++ b/addons/web/static/src/views/view_components/report_view_measures.xml
@@ -5,7 +5,7 @@
       <Dropdown>
         <button class="btn btn-primary o_report_measures">
           <t t-if="!this.props.multiSelect and this.props.activeMeasures.length" t-out="this.props.measures[this.props.activeMeasures[0]].string"/>
-          <t t-else="">Measures</t> <i class="fa fa-caret-down ms-1"/>
+          <t t-else="">Measures</t> <i class="oi ms-1" data-icon="arrow_drop_down"/>
         </button>
         <t t-set-slot="content">
           <t t-foreach="this.props.measures" t-as="measure" t-key="measure_value.name">
diff --git a/addons/web/static/src/views/view_components/selection_box.xml b/addons/web/static/src/views/view_components/selection_box.xml
index f605c9ab685ce1..43d3f1da9fe98a 100644
--- a/addons/web/static/src/views/view_components/selection_box.xml
+++ b/addons/web/static/src/views/view_components/selection_box.xml
@@ -11,12 +11,12 @@
                         class="o_select_domain btn btn-sm btn-info p-1 ms-2 me-n2 border-0 fw-normal"
                         title="Select all records matching the search"
                         t-on-click="this.onSelectDomain">
-                        <i class="oi oi-fw oi-arrow-right"/>
+                        <i class="oi oi-fw" data-icon="east"/>
                         Select all <span t-if="this.isRecordCountTrustable"><t t-out="this.nbTotal"/><t t-if="this.hasLimitedCount">+</t></span>
                     </button>
                 </t>
                 <button title="Unselect All" class="o_unselect_all btn btn-link ms-auto border-0" data-available-offline="" t-on-click="this.onUnselectAll">
-                    <i class="oi oi-close"/>
+                    <i class="oi" data-icon="close_small"/>
                 </button>
             </span>
             <button t-if="this.env.isSmall and !this.isDomainSelected and (!this.isRecordCountTrustable or this.nbTotal > this.nbSelected)"
diff --git a/addons/web/static/src/views/view_dialogs/export_data_dialog.xml b/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
index 55ca6dfee09e53..4bcb613c9b54d8 100644
--- a/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
+++ b/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
@@ -14,10 +14,10 @@
     <t t-name="web.ExportDataItem">
         <div t-att-data-field_id="this.props.field.id" t-attf-class="o_export_tree_item cursor-pointer position-relative ps-4 {{ this.state.subfields.length ? 'o_expanded mb-2' : '' }} {{ this.props.field.parent ? '' : 'pe-3'}}" role="treeitem" t-on-click.stop="() => this.toggleItem(this.props.field.id, true)" t-on-dblclick="() => this.onDoubleClick(this.props.field.id)">
             <div t-attf-class="o_tree_column d-flex align-items-center {{ this.props.field.required ? 'fw-bolder' : ''}}">
-                <span t-if="this.props.isFieldExpandable(this.props.field.id)" t-attf-class="ms-n3 float-start o_expand_parent small oi {{ this.state.subfields.length ? 'oi-chevron-down' : 'oi-chevron-right' }}" role="img" aria-label="Show sub-fields" title="Show sub-fields" />
+                <span t-if="this.props.isFieldExpandable(this.props.field.id)" class="ms-n3 float-start o_expand_parent small oi" t-attf-data-icon="{{ this.state.subfields.length ? 'keyboard_arrow_down' : 'chevron_forward' }}" role="img" aria-label="Show sub-fields" title="Show sub-fields" />
                 <span t-if="this.props.isDebug and this.props.field.id" class="overflow-hidden w-100" t-out="`${this.props.field.string} (${this.props.field.id})`" />
                 <span t-else="" class="overflow-hidden w-100" t-out="this.props.field.string" />
-                <span title="Select field" t-attf-class="fa fa-plus float-end m-1 o_add_field {{ this.isFieldSelected(this.props.field.id) ? 'o_inactive opacity-25' : '' }}" t-on-click.stop="(ev) => !this.isFieldSelected(this.props.field.id) and this.props.onAdd(this.props.field.id)" />
+                <span title="Select field" t-attf-class="oi float-end m-1 o_add_field {{ this.isFieldSelected(this.props.field.id) ? 'o_inactive opacity-25' : '' }}" data-icon="add" t-on-click.stop="(ev) => !this.isFieldSelected(this.props.field.id) and this.props.onAdd(this.props.field.id)" />
             </div>
                 <t t-foreach="this.state.subfields" t-as="field" t-key="field.id">
                     <ExportDataItem
@@ -90,15 +90,15 @@
                             </t>
                             <t t-if="this.state.isEditingTemplate">
                                 <button t-if="this.state.templateId === 'new_template'" type="button" class="btn btn-secondary ms-1 o_save_list_btn" t-on-click.stop="this.onSaveExportTemplate">
-                                    <i class="fa fa-floppy-o" />
+                                    <i class="oi" data-icon="save"/>
                                 </button>
                                 <button type="button" class="btn btn-secondary ms-1 o_cancel_list_btn" t-on-click.stop="this.onCancelExportTemplate">
-                                    <i t-attf-class="fa {{ this.state.templateId === 'new_template' ? 'fa-times' : 'fa-undo' }}" />
+                                    <i class="oi" t-attf-data-icon="{{ this.state.templateId === 'new_template' ? 'close' : 'undo' }}" />
                                 </button>
                             </t>
                             <t t-else="">
                                 <button t-if="this.state.templateId" type="button" class="btn btn-secondary ms-1 o_delete_exported_list" t-on-click.stop="this.onDeleteExportTemplate">
-                                    <i class="fa fa-trash" />
+                                    <i class="oi oi-filled" data-icon="delete" />
                                 </button>
                             </t>
                         </div>
@@ -107,9 +107,9 @@
                         <ul class="o_fields_list list-unstyled" t-custom-ref="draggable">
                             <t t-foreach="this.state.exportList" t-as="field" t-key="field.id">
                                 <li t-attf-class="o_export_field d-inline-block w-100 {{ this.state.isSmall ? '' : 'o_export_field_sortable' }}" t-att-data-field_id="field.id">
-                                    <span t-if="!this.state.isSmall" class="fa fa-sort o_sort_field mx-1" t-attf-style="opacity:{{ this.state.exportList.length === 1 ? 0 : 1 }}" />
+                                    <span t-if="!this.state.isSmall" class="oi o_sort_field mx-1" data-icon="swap_vert" t-attf-style="opacity:{{ this.state.exportList.length === 1 ? 0 : 1 }}" />
                                     <span t-out="this.isDebug and field.id ? `${field.string} (${field.id})` : field.string" />
-                                    <span class="fa fa-trash m-1 pe-2 float-end o_remove_field cursor-pointer" t-att-title="this.removeFieldText" t-on-click.stop="() => this.onRemoveItemExportList(field.id)" />
+                                    <span class="oi oi-filled m-1 pe-2 float-end o_remove_field cursor-pointer" data-icon="delete" t-att-title="this.removeFieldText" t-on-click.stop="() => this.onRemoveItemExportList(field.id)" />
                                 </li>
                             </t>
                         </ul>
diff --git a/addons/web/static/src/views/widgets/documentation_link/documentation_link.js b/addons/web/static/src/views/widgets/documentation_link/documentation_link.js
index 4b55b99999c2c4..0edee96b2931d5 100644
--- a/addons/web/static/src/views/widgets/documentation_link/documentation_link.js
+++ b/addons/web/static/src/views/widgets/documentation_link/documentation_link.js
@@ -13,6 +13,7 @@ export class DocumentationLink extends Component {
         path: { type: String },
         label: { type: String, optional: true },
         icon: { type: String, optional: true },
+        icon_class: { type: String, optional: true },
         alertLink: { type: Boolean, optional: true },
     };
 
@@ -42,11 +43,12 @@ export class DocumentationLink extends Component {
 export const documentationLink = {
     component: DocumentationLink,
     extractProps: ({ attrs }) => {
-        const { path, label, icon, alert_link } = attrs;
+        const { path, label, icon, icon_class, alert_link } = attrs;
         return {
             path,
             label,
             icon,
+            icon_class,
             alertLink: Boolean(alert_link),
         };
     },
diff --git a/addons/web/static/src/views/widgets/documentation_link/documentation_link.xml b/addons/web/static/src/views/widgets/documentation_link/documentation_link.xml
index 9fcc1482d2e9ec..3dd6be8422689a 100644
--- a/addons/web/static/src/views/widgets/documentation_link/documentation_link.xml
+++ b/addons/web/static/src/views/widgets/documentation_link/documentation_link.xml
@@ -3,11 +3,11 @@
     <t t-name="web.DocumentationLink">
         <a t-att-href="this.url" title="Documentation" t-att-class="this.classes" target="_blank">
             <t t-if="!this.props.icon and !this.props.label">
-                <i class="fa fa-external-link" aria-hidden="true"></i>
+                <i class="oi" data-icon="open_in_new" aria-hidden="true"></i>
                 <span>View Documentation</span>
             </t>
             <t t-else="">
-                <i t-if="this.props.icon" class="fa pe-1" t-att-class="this.props.icon"></i>
+                <i t-if="this.props.icon" class="oi pe-1" t-att-class="this.props.icon_class" t-att-data-icon="this.props.icon"></i>
                 <span t-out="this.props.label"/>
             </t>
         </a>
diff --git a/addons/web/static/src/webclient/actions/action_install_kiosk_pwa.xml b/addons/web/static/src/webclient/actions/action_install_kiosk_pwa.xml
index 206350bcb8142a..810842e842a43c 100644
--- a/addons/web/static/src/webclient/actions/action_install_kiosk_pwa.xml
+++ b/addons/web/static/src/webclient/actions/action_install_kiosk_pwa.xml
@@ -3,7 +3,7 @@
     <t t-name="web.ActionInstallKioskPWA">
         <div class="text-center my-3">
             <div class="fs-2 mb-2">From your Kiosk, open this URL:</div>
-            <i class="fa fa-share-square-o me-1 mb-3"/><a t-att-href="this.url" target="_blank" t-out="this.url"></a>
+            <i class="oi me-1 mb-3" data-icon="share"/><a t-att-href="this.url" target="_blank" t-out="this.url"></a>
         </div>
         <footer class="border-top d-flex p-3 justify-content-center justify-content-md-end flex-wrap gap-1 w-100">
             <button class="btn btn-secondary" special="cancel" t-on-click="() => this.dialog.closeAll()">Close</button>
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 c9793eb25be73e..6abad973c2a476 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.xml
@@ -20,8 +20,8 @@
               <span class="o_burger_menu_username px-2"><t t-out="this.user.name"/></span>
             </small>
             <div class="d-flex align-items-center h-100 bg-transparent">
-                <button t-if="this.router.shareUrl and this.isDisplayStandalone" class="o_sidebar_share fa fa-share-alt btn border-0 fs-5 text-reset" aria-label="Share URL" title="Share URL" t-on-click.stop="() => this._shareUrl()"/>
-                <button class="o_sidebar_close oi oi-close btn border-0 fs-3 text-reset" aria-label="Close menu" title="Close menu" t-on-click.stop="() => this._closeBurger()"/>
+                <button t-if="this.router.shareUrl and this.isDisplayStandalone" class="o_sidebar_share oi btn border-0 fs-5 text-reset" data-icon="family_history" aria-label="Share URL" title="Share URL" t-on-click.stop="() => this._shareUrl()"/>
+                <button class="o_sidebar_close oi btn border-0 fs-3 text-reset" data-icon="close_small" aria-label="Close menu" title="Close menu" t-on-click.stop="() => this._closeBurger()"/>
             </div>
         </div>
         <nav class="o_burger_menu_content flex-grow-1 flex-shrink-1 overflow-auto o_burger_menu_app">
diff --git a/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml b/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
index 47d495436c8bc2..c438de39433178 100644
--- a/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
+++ b/addons/web/static/src/webclient/burger_menu/mobile_switch_company_menu/mobile_switch_company_menu.xml
@@ -4,7 +4,7 @@
 <t t-name="web.MobileSwitchCompanyMenu">
     <div class="o_burger_menu_companies p-3 pb-0">
         <div class="w-100" t-on-click="() => this.toggleCollapsible()">
-            <i t-if="this.hasLotsOfCompanies" class="fa me-2" style="width: 10px" t-att-class="{ 'fa-caret-right': !this.state.isOpen, 'fa-caret-down': this.state.isOpen }"/>
+            <i t-if="this.hasLotsOfCompanies" class="oi me-2" style="width: 10px" t-attf-data-icon="{{ state.isOpen ? 'arrow_drop_down' : 'arrow_right' }}"/>
             <span class="mb-3 fs-4">Companies</span>
         </div>
         <div t-if="this.show" class="mt-2">
diff --git a/addons/web/static/src/webclient/debug/debug_items.xml b/addons/web/static/src/webclient/debug/debug_items.xml
index 73a7d3c71c3fc0..9c0c88b70cd496 100644
--- a/addons/web/static/src/webclient/debug/debug_items.xml
+++ b/addons/web/static/src/webclient/debug/debug_items.xml
@@ -24,14 +24,14 @@
                         <tr style="--table-bg: var(--table-striped-bg)">
                             <th colspan="2"><span t-esc="module.display_name" /></th>
                             <th class="text-end"><span t-esc="module.code_lines" /></th>
-                            <th class="text-end" ><i class="fa fa-check" t-if="module.code_lines" /></th>
+                            <th class="text-end" ><i class="oi" data-icon="check" t-if="module.code_lines" /></th>
                             <th/>
                         </tr>
                         <tr t-foreach="module.records" t-as="record" t-key="record_index">
                             <td class="ps-4"  t-out="record.display_name" />
                             <td t-out="record.model ?? ''" />
                             <td class="text-end" t-out="record.code_lines" />
-                            <td class="text-end" ><i class="fa fa-check" t-if="record.billable" /></td>
+                            <td class="text-end" ><i class="oi" data-icon="check" t-if="record.billable" /></td>
                             <td><button t-if="record.model" class="btn btn-link" t-custom-click="(ev, isMiddleClick) => this.viewRecord(record, isMiddleClick)">View</button></td>
                         </tr>
                     </t>
diff --git a/addons/web/static/src/webclient/debug/profiling/profiling_item.xml b/addons/web/static/src/webclient/debug/profiling/profiling_item.xml
index ee5e68c5d4547d..d00391d7d3ff66 100644
--- a/addons/web/static/src/webclient/debug/profiling/profiling_item.xml
+++ b/addons/web/static/src/webclient/debug/profiling/profiling_item.xml
@@ -68,7 +68,7 @@
                     </t>
                 </div>
                 <a href="#" t-on-click.prevent="this.openProfiles" t-attf-class="btn btn-light align-self-baseline {{this.profiling.state.isEnabled ? 'py-2' : ''}}">
-                    <i class="o_open_profiling oi oi-launch" />
+                    <i class="o_open_profiling oi" data-icon="open_in_browser"/>
                 </a>
             </div>
         </DropdownItem>
diff --git a/addons/web/static/src/webclient/debug/profiling/profiling_systray_item.xml b/addons/web/static/src/webclient/debug/profiling/profiling_systray_item.xml
index 73dd7e6b06bf34..08127079ac4a57 100644
--- a/addons/web/static/src/webclient/debug/profiling/profiling_systray_item.xml
+++ b/addons/web/static/src/webclient/debug/profiling/profiling_systray_item.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.ProfilingSystrayItem">
         <div class="d-flex align-items-center">
-            <i class="fa fa-circle text-danger o_debug_recording" />
+            <i class="oi oi-filled text-danger o_debug_recording" data-icon="circle" />
         </div>
     </t>
 
diff --git a/addons/web/static/src/webclient/icons.scss b/addons/web/static/src/webclient/icons.scss
index 711710bb28d4c8..4db760709b3b94 100644
--- a/addons/web/static/src/webclient/icons.scss
+++ b/addons/web/static/src/webclient/icons.scss
@@ -1,48 +1,69 @@
 // = Icons
+// version 0.2.1
 // ============================================================================
 
-
 // Sizes
 // ----------------------------------------------------------------------------
 
-$oi-default-size: 1em;   // Normally 13px
+$oi-default-size: 1em;   // Normally 14px
 $oi-fw-ratio: 1.28571429; // Matches .fa-fw
+$ms-size-multiplier: 1.214285; // Compensate pictogram's inner spacing
 
-$oi-sizes: (
-    'small': (
-        'font-size': .769em,    // ~ 10px
-        'vertical-align': 10%,
-    ),
-    'normal': (
-        'font-size': $oi-default-size,
-    ),
-    'large': (
-        'font-size': 1.315em,   // ~ 17px
-        'vertical-align': -6%,
-    ),
-    'larger': (
-        'font-size': 1.462em,   // ~ 19px
-        'vertical-align': -10%,
-    ),
-);
+// ================================
+// MIXINS
+// ================================
 
-// Force font-weight to normal
-// ----------------------------------------------------------------------------
-.oi, .fa {
-    font-weight: $font-weight-normal;
+@mixin material-icon-base {
+    display: inline-block;
+    font-family: var(--icon-font-family, #{$ms-font-family});
+    font-style: normal;
+    font-size: var(--oi-font-size, #{$default-icon-size});
+    font-variation-settings: "FILL" var(--o-mi-fill, 0), "opsz" 24;
+    font-weight: 400 !important;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    vertical-align: -11.5%;
+    speak: never;
+    -webkit-font-smoothing: antialiased;
+    -webkit-font-feature-settings: 'liga';
+    -moz-osx-font-smoothing: grayscale;
+    -moz-font-feature-settings: 'liga';
+
+    &:before {
+        transform: scale(1.214285);
+        display: inline-block;
+        content: attr(data-icon);
+        text-rendering: geometricPrecision;
+        font-size: var(--oi-font-size, $oi-default-size);
+    }
 }
 
+@mixin icon-content($icon-name) {
+    &::before {
+        content: $icon-name;
+    }
+}
+
+@mixin rotate($degrees) {
+    -webkit-transform: rotate(#{$degrees}deg);
+    transform: rotate(#{$degrees}deg);
+}
+
+@mixin flip($x: 1, $y: 1) {
+    -webkit-transform: scale($x, $y);
+    transform: scale($x, $y);
+}
+
+
+
 // Define base-classes' properties using CSS variables.
 // Allows to dinamically update rules according to the context and eventual
 // utility classes.
 // ----------------------------------------------------------------------------
-.oi, .fa {
-    &:before {
-        font-size: var(--oi-font-size, $oi-default-size);
-        vertical-align: var(--oi-vertical-align, 0);
-        text-rendering: geometricPrecision;
-    }
-}
 
 .oi-fw {
     width: calc(#{$oi-fw-ratio} * var(--oi-font-size, #{$oi-default-size}));
@@ -51,19 +72,19 @@ $oi-sizes: (
 
 // Print CSS variables for each size/breakpoint
 // ----------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-        $-infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-        @each $-key, $-values in $oi-sizes {
-            .oi#{$-infix}-#{$-key} {
-                @each $-rule, $-value in $-values {
-                    @include print-variable('oi-#{$-rule}', $-value);
-                }
-            }
-        }
-    }
-}
+// @each $breakpoint in map-keys($grid-breakpoints) {
+//     @include media-breakpoint-up($breakpoint) {
+//         $-infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+//         @each $-key, $-values in $oi-sizes {
+//             .oi#{$-infix}-#{$-key} {
+//                 @each $-rule, $-value in $-values {
+//                     @include print-variable('oi-#{$-rule}', $-value);
+//                 }
+//             }
+//         }
+//     }
+// }
 
 // Rely on animations already defined by FontAwesome
 // ----------------------------------------------------------------------------
@@ -75,12 +96,6 @@ $oi-sizes: (
     animation: fa-spin 1s infinite steps(8);
 }
 
-.o_barcode {
-    -webkit-mask: url('/web/static/img/barcode.svg') center/contain no-repeat;
-    mask: url('/web/static/img/barcode.svg') center/contain no-repeat;
-    background-color: $o-brand-primary;
-}
-
 .o_fa_stack {
     display: grid;
     align-items: baseline;
@@ -95,3 +110,3796 @@ $oi-sizes: (
         font-size: 2em;
     }
 }
+
+// ================================
+// SCSS VARIABLES
+// ================================
+
+$ms-font-family: 'material_symbols_rounded';
+$oi-font-family: 'odoo_ui_icons';
+$default-icon-size: $oi-default-size;
+// TODO : review large size and get rid of $fa- variables
+$fa-lg-size: $oi-default-size * 1.25;
+$fa-fw-width: 1.28571em;
+
+// Icon sizing map
+$icon-sizes: (
+    'lg': $fa-lg-size,
+    '2x': $fa-lg-size * 2,
+    '3x': $fa-lg-size * 3,
+    '4x': $fa-lg-size * 4,
+    '5x': $fa-lg-size * 5,
+    '6x': 6em,
+    '7x': 7em,
+    '8x': 8em,
+    '9x': 9em,
+    '10x': 10em,
+);
+
+
+// ================================
+// BASE CLASSES
+// ================================
+
+// Generic class for Material Symbols and OI extended library icons.
+.oi {
+    @include material-icon-base;
+}
+
+// To remove after the switch
+.mi, .fa {
+    @include material-icon-base;
+}
+
+// ================================
+// ODOO ICONS override mapping
+/* Kept for compatibility with website made prior saas-19.3 */
+/* ---------------------------------------------------------------------------- */
+.oi-threads:before { content: '\e818'; }
+.oi-kickstarter:before { content: '\e819'; }
+.oi-x:before { content: '\e81a'; }
+.oi-x-square:before { content: '\e848'; }
+.oi-tiktok:before { content: '\e81b'; }
+.oi-bluesky:before { content: '\e81c'; }
+.oi-google-play:before { content: '\e81d'; }
+.oi-strava:before { content: '\e80f'; }
+.oi-discord:before { content: '\e811'; }
+.oi-view-pivot:before { content: '\e800'; }
+.oi-view-cohort:before { content: '\e816'; }
+.oi-studio:before { content: '\e813'; }
+.oi-odoo:before { content: '\e806'; }
+
+/* Custom icon mapping */
+/* ---------------------------------------------------------------------------- */
+
+$oi-custom-icons: (
+    // Brands
+    "threads": ('value': '\e818'),
+    "kickstarter": ('value': '\e819'),
+    "x": ('value': '\e81a'),
+    "twitter": ('value': '\e81a'),
+    "x-square": ('value': '\e848'),
+    "twitter-square": ('value': '\e848'),
+    "tiktok": ('value': '\e81b'),
+    "bluesky": ('value': '\e81c'),
+    "google-play": ('value': '\e81d'),
+    "strava": ('value': '\e80f'),
+    "discord": ('value': '\e811'),
+    "amazon": ('value': '\e801'),
+    "angellist": ('value': '\e802'),
+    "bandcamp": ('value': '\e803'),
+    "binoculars": ('value': '\e804'),
+    "bitbucket-square": ('value': '\e805'),
+    "bitbucket": ('value': '\e807'),
+    "black-tie": ('value': '\e808'),
+    "bomb": ('value': '\e809'),
+    "buysellads": ('value': '\e80a'),
+    "cc-amex": ('value': '\e80b'),
+    "github-square": ('value': '\e80c'),
+    "500px": ('value': '\e80d'),
+    "adn": ('value': '\e80e'),
+    "android": ('value': '\e810'),
+    "apple": ('value': '\e812'),
+    "behance-square": ('value': '\e814'),
+    "behance": ('value': '\e815'),
+    "birthday-cake": ('value': '\e817'),
+    "chrome": ('value': '\e822'),
+    "codepen": ('value': '\e823'),
+    "codiepie": ('value': '\e824'),
+    "connectdevelop": ('value': '\e825'),
+    "contao": ('value': '\e826'),
+    "creative-commons": ('value': '\e827'),
+    "css3": ('value': '\e828'),
+    "delicious": ('value': '\e82a'),
+    "deviantart": ('value': '\e82b'),
+    "digg": ('value': '\e82c'),
+    "dribbble": ('value': '\e82d'),
+    "dropbox": ('value': '\e82e'),
+    "drupal": ('value': '\e82f'),
+    "edge": ('value': '\e830'),
+    "eercast": ('value': '\e831'),
+    "empire": ('value': '\e832'),
+    "envira": ('value': '\e833'),
+    "etsy": ('value': '\e834'),
+    "expeditedssl": ('value': '\e835'),
+    "fa": ('value': '\e836'),
+    "facebook-official": ('value': '\e837'),
+    "facebook-square": ('value': '\e838'),
+    "facebook": ('value': '\e839'),
+    "firefox": ('value': '\e83a'),
+    "first-order": ('value': '\e83b'),
+    "flickr": ('value': '\e83c'),
+    "fonticons": ('value': '\e83d'),
+    "fort-awesome": ('value': '\e83e'),
+    "forumbee": ('value': '\e83f'),
+    "foursquare": ('value': '\e840'),
+    "free-code-camp": ('value': '\e841'),
+    "get-pocket": ('value': '\e842'),
+    "gg-circle": ('value': '\e843'),
+    "gg": ('value': '\e844'),
+    "git-square": ('value': '\e845'),
+    "git": ('value': '\e846'),
+    "github-alt": ('value': '\e847'),
+    "github": ('value': '\e849'),
+    "gitlab": ('value': '\e84a'),
+    "gittip": ('value': '\e84b'),
+    "glide-g": ('value': '\e84c'),
+    "glide": ('value': '\e84d'),
+    "google-plus-circle": ('value': '\e84e'),
+    "google-plus-square": ('value': '\e84f'),
+    "google-plus": ('value': '\e850'),
+    "google-wallet": ('value': '\e851'),
+    "google": ('value': '\e852'),
+    "grav": ('value': '\e853'),
+    "hacker-news": ('value': '\e854'),
+    "hand-lizard-o": ('value': '\e855'),
+    "hand-peace-o": ('value': '\e856'),
+    "hand-scissors-o": ('value': '\e857'),
+    "hand-spock-o": ('value': '\e858'),
+    "houzz": ('value': '\e859'),
+    "html5": ('value': '\e85a'),
+    "imdb": ('value': '\e85b'),
+    "instagram": ('value': '\e85c'),
+    "internet-explorer": ('value': '\e85d'),
+    "ioxhost": ('value': '\e85e'),
+    "joomla": ('value': '\e85f'),
+    "jsfiddle": ('value': '\e860'),
+    "lastfm-square": ('value': '\e861'),
+    "lastfm": ('value': '\e862'),
+    "leanpub": ('value': '\e863'),
+    "lemon-o": ('value': '\e864'),
+    "linkedin-square": ('value': '\e865'),
+    "linkedin": ('value': '\e866'),
+    "linode": ('value': '\e867'),
+    "linux": ('value': '\e868'),
+    "magnet": ('value': '\e869'),
+    "maxcdn": ('value': '\e86e'),
+    "meanpath": ('value': '\e86f'),
+    "medium": ('value': '\e870'),
+    "meetup": ('value': '\e871'),
+    "mercury": ('value': '\e872'),
+    "mixcloud": ('value': '\e873'),
+    "modx": ('value': '\e874'),
+    "neuter": ('value': '\e875'),
+    "odnoklassniki-square": ('value': '\e876'),
+    "odnoklassniki": ('value': '\e877'),
+    "opencart": ('value': '\e878'),
+    "openid": ('value': '\e879'),
+    "opera": ('value': '\e87a'),
+    "optin-monster": ('value': '\e87b'),
+    "pagelines": ('value': '\e87c'),
+    "paypal": ('value': '\e87d'),
+    "cc-paypal": ('value': '\e81f'),
+    "pied-piper-alt": ('value': '\e87e'),
+    "pied-piper-pp": ('value': '\e87f'),
+    "pied-piper": ('value': '\e880'),
+    "pinterest-p": ('value': '\e881'),
+    "pinterest-square": ('value': '\e882'),
+    "pinterest": ('value': '\e883'),
+    "product-hunt": ('value': '\e884'),
+    "qq": ('value': '\e885'),
+    "quora": ('value': '\e886'),
+    "ra": ('value': '\e887'),
+    "ravelry": ('value': '\e888'),
+    "reddit-alien": ('value': '\e889'),
+    "reddit-square": ('value': '\e88a'),
+    "reddit": ('value': '\e88b'),
+    "renren": ('value': '\e88c'),
+    "safari": ('value': '\e88d'),
+    "scribd": ('value': '\e88e'),
+    "sellsy": ('value': '\e88f'),
+    "shirtsinbulk": ('value': '\e890'),
+    "simplybuilt": ('value': '\e891'),
+    "skyatlas": ('value': '\e892'),
+    "skype": ('value': '\e893'),
+    "slack": ('value': '\e894'),
+    "slideshare": ('value': '\e895'),
+    "snapchat-ghost": ('value': '\e896'),
+    "snapchat-square": ('value': '\e897'),
+    "snapchat": ('value': '\e898'),
+    "soundcloud": ('value': '\e899'),
+    "spotify": ('value': '\e89a'),
+    "stack-exchange": ('value': '\e89b'),
+    "stack-overflow": ('value': '\e89c'),
+    "steam-square": ('value': '\e89d'),
+    "steam": ('value': '\e89e'),
+    "stumbleupon-circle": ('value': '\e89f'),
+    "stumbleupon": ('value': '\e8a0'),
+    "superpowers": ('value': '\e8a1'),
+    "telegram": ('value': '\e8a2'),
+    "weibo": ('value': '\e820'),
+    "tencent-weibo": ('value': '\e8a3'),
+    "themeisle": ('value': '\e8a4'),
+    "trademark": ('value': '\e8a5'),
+    "trello": ('value': '\e8a6'),
+    "tripadvisor": ('value': '\e8a7'),
+    "tumblr-square": ('value': '\e8a8'),
+    "tumblr": ('value': '\e8a9'),
+    "twitch": ('value': '\e8aa'),
+    "user-secret": ('value': '\e8ab'),
+    "viacoin": ('value': '\e8ae'),
+    "viadeo-square": ('value': '\e8af'),
+    "viadeo": ('value': '\e8b0'),
+    "vimeo-square": ('value': '\e8b1'),
+    "vimeo": ('value': '\e8b2'),
+    "vine": ('value': '\e8b3'),
+    "vk": ('value': '\e8b4'),
+    "wechat": ('value': '\e8b5'),
+    "whatsapp": ('value': '\e8b6'),
+    "wikipedia-w": ('value': '\e8b7'),
+    "windows": ('value': '\e8b8'),
+    "wordpress": ('value': '\e8b9'),
+    "wpbeginner": ('value': '\e8ba'),
+    "wpexplorer": ('value': '\e8bb'),
+    "wpforms": ('value': '\e8bc'),
+    "xing-square": ('value': '\e8bd'),
+    "xing": ('value': '\e8be'),
+    "y-combinator": ('value': '\e8bf'),
+    "yahoo": ('value': '\e8c0'),
+    "yelp": ('value': '\e8c1'),
+    "youtube-play": ('value': '\e8c2'),
+    "youtube-square": ('value': '\e8c3'),
+    "youtube": ('value': '\e8c4'),
+    "cc-diners-club": ('value': '\e8c5'),
+    "cc-stripe": ('value': '\e8c6'),
+    "cc-visa": ('value': '\e8c7'),
+    "cc-jcb": ('value': '\e8c8'),
+    "dashcube": ('value': '\e8c9'),
+    "cc-mastercard": ('value': '\e8ca'),
+    "cc-discover": ('value': '\e8cb'),
+    // Views
+    "view-pivot": ('value': '\e800','rtl': true),
+    "view-cohort": ('value': '\e816', 'rtl': true),
+    "view-kanban": ('value': '\e81e'),
+    "studio": ('value': '\e813'),
+    // Misc
+    "odoo": ('value': '\e806'),
+    "mars-double": ('value': '\e86a'),
+    "mars-stroke-h": ('value': '\e86b'),
+    "mars-stroke-v": ('value': '\e86c'),
+    "mars-stroke": ('value': '\e86d'),
+    "venus-double": ('value': '\e8ac'),
+    "venus-mars": ('value': '\e8ad'),
+    //Apps
+    "app_documents": ('value': '\e821'),
+);
+
+.oi {
+    @each $icon-name, $icon-content in $oi-custom-icons {
+        // Add "oi_" prefix to avoid conflict with Material Symbols icon names
+        &[data-icon="oi_#{$icon-name}"] {
+            --icon-font-family: #{$oi-font-family};
+
+            &:before {
+                content: '#{map-get($icon-content, 'value')}';
+            }
+
+            @if index($icon-content, 'rtl') {
+                .o_rtl & {
+                    transform: rotateY(180deg);
+                }
+            }
+        }
+    }
+}
+
+/* RTL adaptations - Flip directional icons by 180 degree. */
+/* ---------------------------------------------------------------------------- */
+
+$ms-rtl-icons:
+    "arrow_back",
+    "arrow_back_2",
+    "arrow_back_ios",
+    "arrow_back_ios_new",
+    "arrow_circle_left",
+    "arrow_circle_right",
+    "arrow_forward",
+    "arrow_forward_ios",
+    "arrow_insert",
+    "arrow_left",
+    "arrow_left_alt",
+    "arrow_menu_close",
+    "arrow_menu_open",
+    "arrow_outward",
+    "arrow_right",
+    "arrow_right_alt",
+    "arrow_top_left",
+    "arrow_top_right",
+    "double_arrow",
+    "keyboard_arrow_left",
+    "keyboard_arrow_right",
+    "keyboard_double_arrow_left",
+    "keyboard_double_arrow_right",
+    "line_end_arrow",
+    "line_end_arrow_notch",
+    "line_start_arrow",
+    "line_start_arrow_notch",
+    "mobile_arrow_up_right",
+    "play_arrow",
+    "subdirectory_arrow_left",
+    "subdirectory_arrow_right",
+    "arrows_more_down",
+    "arrows_more_up",
+    "chevron_backward",
+    "chevron_forward",
+    "chevron_left",
+    "chevron_right",
+    "east",
+    "west",
+    "north_east",
+    "north_west",
+    "south_east",
+    "south_west",
+    "turn_left",
+    "turn_right",
+    "turn_sharp_left",
+    "turn_sharp_right",
+    "turn_slight_left",
+    "turn_slight_right",
+    "u_turn_left",
+    "u_turn_right",
+    "horizontal_align_left",
+    "horizontal_align_right";
+
+.o_rtl {
+    @each $icon in $ms-rtl-icons {
+        [data-icon="#{$icon}"] {
+            transform: rotateY(180deg);
+        }
+    }
+}
+
+// ================================
+// ODOO ICONS TO MATERIAL SYMBOLS MAPPING
+// ================================
+
+.oi-text-break {
+    @include material-icon-base;
+    @include icon-content("format_image_front");
+}
+.oi-text-inline {
+    @include material-icon-base;
+    @include icon-content("format_image_inline_left");
+}
+.oi-voip {
+    @include material-icon-base;
+    @include icon-content("tty");
+    --o-ms-fill: 1;
+}
+
+.oi-search {
+    @include material-icon-base;
+    @include icon-content("search");
+}
+.oi-group {
+    @include material-icon-base;
+    @include icon-content("stacks");
+}
+.oi-settings-adjust {
+    @include material-icon-base;
+    @include icon-content("tune");
+}
+.oi-apps {
+    @include material-icon-base;
+    @include icon-content("apps");
+}
+.oi-panel-right {
+    @include material-icon-base;
+    @include icon-content("dock_to_left");
+    // @include icon-content("dock_to_right");
+}
+.oi-launch {
+    @include material-icon-base;
+    @include icon-content("open_in_browser");
+}
+
+.oi-text-wrap {
+    @include material-icon-base;
+    @include icon-content("text_wrap");
+}
+
+.oi-gif-picker {
+    @include material-icon-base;
+    @include icon-content("gif_box");
+}
+.oi-chevron-down {
+    @include material-icon-base;
+    @include icon-content("keyboard_arrow_down");
+}
+.oi-chevron-left {
+    @include material-icon-base;
+    // @include icon-content("arrow_back_ios_new");
+    @include icon-content("chevron_backward");
+}
+.oi-chevron-right {
+    @include material-icon-base;
+    // @include icon-content("arrow_forward_ios");
+    @include icon-content("chevron_forward");
+}
+.oi-chevron-up {
+    @include material-icon-base;
+    @include icon-content("keyboard_arrow_up");
+}
+.oi-arrows-h {
+    @include material-icon-base;
+    @include icon-content("arrow_range");
+}
+.oi-arrows-v {
+    @include material-icon-base;
+    @include icon-content("height");
+}
+.oi-arrow-down-left {
+    @include material-icon-base;
+    @include icon-content("south_west");
+}
+.oi-arrow-down-right {
+    @include material-icon-base;
+    @include icon-content("south_east");
+}
+.oi-arrow-down {
+    @include material-icon-base;
+    @include icon-content("south");
+}
+.oi-arrow-left {
+    @include material-icon-base;
+    @include icon-content("west");
+}
+.oi-arrow-right {
+    @include material-icon-base;
+    @include icon-content("east");
+}
+.oi-arrow-up-left {
+    @include material-icon-base;
+    @include icon-content("north_west");
+}
+.oi-arrow-up-right {
+    @include material-icon-base;
+    @include icon-content("north_east");
+}
+.oi-arrow-up {
+    @include material-icon-base;
+    @include icon-content("north");
+}
+.oi-draggable {
+    @include material-icon-base;
+    @include icon-content("drag_indicator");
+}
+.oi-view {
+    @include material-icon-base;
+    @include icon-content("toolbar");
+}
+.oi-archive {
+    @include material-icon-base;
+    @include icon-content("archive");
+}
+.oi-unarchive {
+    @include material-icon-base;
+    @include icon-content("unarchive");
+}
+.oi-text-effect {
+    @include material-icon-base;
+    @include icon-content("stylus_laser_pointer");
+}
+.oi-smile-add {
+    @include material-icon-base;
+    @include icon-content("add_reaction");
+}
+.oi-close {
+    @include material-icon-base;
+    @include icon-content("close_small");
+}
+.oi-food-delivery {
+    @include material-icon-base;
+    @include icon-content("shopping_bag_speed");
+}
+.oi-schedule-today {
+    @include material-icon-base;
+    @include icon-content("early_on");
+}
+.oi-schedule-tomorrow {
+    @include material-icon-base;
+    @include icon-content("event_upcoming");
+}
+.oi-schedule-later {
+    @include material-icon-base;
+    @include icon-content("calendar_clock");
+}
+.oi-activity {
+    @include material-icon-base;
+    @include icon-content("schedule");
+}
+.oi-activity-plus {
+    @include material-icon-base;
+    @include icon-content("alarm_add");
+}
+.oi-numpad {
+    @include material-icon-base;
+    @include icon-content("dialpad");
+}
+.oi-transfer {
+    @include material-icon-base;
+    @include icon-content("sync_alt");
+}
+.oi-suitcase {
+    @include material-icon-base;
+    @include icon-content("work");
+}
+.oi-suitcase-plus {
+    @include material-icon-base;
+    @include icon-content("person_add");
+}
+.oi-merge {
+    @include material-icon-base;
+    @include icon-content("call_merge");
+}
+.oi-record {
+    @include material-icon-base;
+    @include icon-content("graphic_eq");
+}
+.oi-backspace-o {
+    @include material-icon-base;
+    @include icon-content("backspace");
+}
+.oi-user {
+    @include material-icon-base;
+    @include icon-content("person");
+    --o-ms-fill: 1;
+}
+.oi-user-plus {
+    @include material-icon-base;
+    @include icon-content("person_add");
+    --o-mi-fill: 1;
+}
+.oi-users {
+    @include material-icon-base;
+    @include icon-content("group");
+    --o-mi-fill: 1;
+}
+.oi-ellipsis-h {
+    @include material-icon-base;
+    @include icon-content("more_horiz");
+}
+.oi-ellipsis-v {
+    @include material-icon-base;
+    @include icon-content("more_vert");
+}
+.oi-plus {
+    @include material-icon-base;
+    @include icon-content("add");
+}
+.oi-minus {
+    @include material-icon-base;
+    @include icon-content("remove");
+}
+.oi-star-plus {
+    @include material-icon-base;
+    @include icon-content("star");
+}
+.oi-subtitle {
+    @include material-icon-base;
+    @include icon-content("subtitles");
+}
+.oi-bring-front {
+    @include material-icon-base;
+    @include icon-content("flip_to_front");
+}
+.oi-send-back {
+    @include material-icon-base;
+    @include icon-content("flip_to_back");
+}
+.oi-life-ring-plus {
+    @include material-icon-base;
+    @include icon-content("support");
+}
+
+.oi.oi-view-list {
+    @include material-icon-base;
+    @include icon-content("view_list");
+}
+
+.oi.oi-view-kanban {
+    @include material-icon-base;
+    @include icon-content("view_kanban");
+}
+
+
+// ================================
+// FONT AWESOME 4 TO MATERIAL SYMBOLS MAPPING
+// ================================
+
+.fa-500px {
+    @include icon-content("\e80d");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-address-book {
+    @include icon-content("contact_page");
+    --o-mi-fill: 1;
+}
+
+.fa-address-book-o {
+    @include icon-content("contact_page");
+}
+
+.fa-address-card,
+.fa-vcard {
+    @include icon-content("contact_mail");
+    --o-mi-fill: 1;
+}
+
+.fa-address-card-o,
+.fa-vcard-o {
+    @include icon-content("contact_mail");
+}
+
+.fa-adjust {
+    @include icon-content("contrast");
+}
+
+.fa-adn {
+    @include icon-content("\e80e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-align-center {
+    @include icon-content("format_align_center");
+}
+
+.fa-align-justify {
+    @include icon-content("format_align_justify");
+}
+
+.fa-align-left {
+    @include icon-content("format_align_left");
+}
+
+.fa-align-right {
+    @include icon-content("format_align_right");
+}
+
+.fa-amazon {
+    @include icon-content("\e801");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-ambulance {
+    @include icon-content("emergency");
+}
+
+.fa-american-sign-language-interpreting,
+.fa-asl-interpreting {
+    @include icon-content("sign_language");
+}
+
+.fa-anchor {
+    @include icon-content("anchor");
+}
+
+.fa-android {
+    @include icon-content("\e810");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-angellist {
+    @include icon-content("\e802");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-angle-double-down {
+    @include icon-content("keyboard_double_arrow_down");
+}
+
+.fa-angle-double-left {
+    @include icon-content("keyboard_double_arrow_left");
+}
+
+.fa-angle-double-right {
+    @include icon-content("keyboard_double_arrow_right");
+}
+
+.fa-angle-double-up {
+    @include icon-content("keyboard_double_arrow_up");
+}
+
+.fa-angle-down {
+    @include icon-content("keyboard_arrow_down");
+}
+
+.fa-angle-left {
+    @include icon-content("keyboard_arrow_left");
+}
+
+.fa-angle-right {
+    @include icon-content("keyboard_arrow_right");
+}
+
+.fa-angle-up {
+    @include icon-content("keyboard_arrow_up");
+}
+
+.fa-apple {
+    @include icon-content("\e812");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-archive {
+    @include icon-content("archive");
+}
+
+.fa-area-chart {
+    @include icon-content("area_chart");
+}
+
+.fa-arrow-circle-down {
+    @include icon-content("arrow_circle_down");
+    --o-mi-fill: 1;
+}
+
+.fa-arrow-circle-left {
+    @include icon-content("arrow_circle_left");
+    --o-mi-fill: 1;
+}
+
+.fa-arrow-circle-o-down {
+    @include icon-content("arrow_circle_down");
+}
+
+.fa-arrow-circle-o-left {
+    @include icon-content("arrow_circle_left");
+}
+
+.fa-arrow-circle-o-right {
+    @include icon-content("arrow_circle_right");
+}
+
+.fa-arrow-circle-o-up {
+    @include icon-content("arrow_circle_up");
+}
+
+.fa-arrow-circle-right {
+    @include icon-content("arrow_circle_right");
+    --o-mi-fill: 1;
+}
+
+.fa-arrow-circle-up {
+    @include icon-content("arrow_circle_up");
+    --o-mi-fill: 1;
+}
+
+.fa-arrow-down {
+    @include icon-content("arrow_downward");
+}
+
+.fa-arrow-left {
+    @include icon-content("arrow_back");
+}
+
+.fa-arrow-right {
+    @include icon-content("arrow_forward");
+}
+
+.fa-arrow-up {
+    @include icon-content("arrow_upward");
+}
+
+.fa-arrows {
+    @include icon-content("open_with");
+}
+
+.fa-arrows-alt {
+    @include icon-content("open_with");
+}
+
+.fa-arrows-h {
+    @include icon-content("swap_horiz");
+}
+
+.fa-arrows-v {
+    @include icon-content("swap_vert");
+}
+
+.fa-assistive-listening-systems {
+    @include icon-content("hearing");
+}
+
+.fa-asterisk {
+    @include icon-content("emergency");
+}
+
+.fa-at {
+    @include icon-content("alternate_email");
+}
+
+.fa-audio-description {
+    @include icon-content("audio_description");
+}
+
+.fa-automobile,
+.fa-car {
+    @include icon-content("directions_car");
+}
+
+.fa-backward {
+    @include icon-content("fast_rewind");
+}
+
+.fa-balance-scale {
+    @include icon-content("balance");
+}
+
+.fa-ban {
+    @include icon-content("block");
+}
+
+.fa-bandcamp {
+    @include icon-content("\e803");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-bank,
+.fa-institution,
+.fa-university {
+    @include icon-content("account_balance");
+}
+
+.fa-bar-chart,
+.fa-bar-chart-o {
+    @include icon-content("bar_chart");
+}
+
+.fa-barcode {
+    @include icon-content("barcode");
+}
+
+.fa-bars,
+.fa-navicon,
+.fa-reorder {
+    @include icon-content("menu");
+}
+
+.fa-bath,
+.fa-bathtub,
+.fa-s15 {
+    @include icon-content("bathtub");
+}
+
+.fa-battery,
+.fa-battery-4,
+.fa-battery-full {
+    @include icon-content("battery_full");
+}
+
+.fa-battery-0,
+.fa-battery-empty {
+    @include icon-content("battery_0_bar");
+}
+
+.fa-battery-1,
+.fa-battery-quarter {
+    @include icon-content("battery_2_bar");
+}
+
+.fa-battery-2,
+.fa-battery-half {
+    @include icon-content("battery_3_bar");
+}
+
+.fa-battery-3,
+.fa-battery-three-quarters {
+    @include icon-content("battery_5_bar");
+}
+
+.fa-bed,
+.fa-hotel {
+    @include icon-content("bed");
+}
+
+.fa-beer {
+    @include icon-content("sports_bar");
+}
+
+.fa-behance {
+    @include icon-content("\e815");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-behance-square {
+    @include icon-content("\e814");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-bell {
+    @include icon-content("notifications");
+    --o-mi-fill: 1;
+}
+
+.fa-bell-o {
+    @include icon-content("notifications");
+}
+
+.fa-bell-slash {
+    @include icon-content("notifications_off");
+    --o-mi-fill: 1;
+}
+
+.fa-bell-slash-o {
+    @include icon-content("notifications_off");
+}
+
+.fa-bicycle {
+    @include icon-content("directions_bike");
+}
+
+.fa-binoculars {
+    @include icon-content("\e804");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-birthday-cake {
+    @include icon-content("cake");
+}
+
+.fa-bitbucket {
+    @include icon-content("\e807");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-bitbucket-square {
+    @include icon-content("\e805");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-bitcoin,
+.fa-btc {
+    @include icon-content("currency_bitcoin");
+}
+
+.fa-black-tie {
+    @include icon-content("\e808");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-blind {
+    @include icon-content("blind");
+}
+
+.fa-bluetooth {
+    @include icon-content("bluetooth");
+}
+
+.fa-bluetooth-b {
+    @include icon-content("bluetooth");
+}
+
+.fa-bold {
+    @include icon-content("format_bold");
+}
+
+.fa-bolt,
+.fa-flash {
+    @include icon-content("flash_on");
+}
+
+.fa-bomb {
+    @include icon-content("\e809");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-book {
+    @include icon-content("book");
+}
+
+.fa-bookmark {
+    @include icon-content("bookmark");
+    --o-mi-fill: 1;
+}
+
+.fa-bookmark-o {
+    @include icon-content("bookmark");
+}
+
+.fa-braille {
+    @include icon-content("grain");
+}
+
+.fa-briefcase {
+    @include icon-content("work");
+}
+
+.fa-bug {
+    @include icon-content("bug_report");
+}
+
+.fa-building {
+    @include icon-content("business");
+    --o-mi-fill: 1;
+}
+
+.fa-building-o {
+    @include icon-content("business");
+}
+
+.fa-bullhorn {
+    @include icon-content("campaign");
+}
+
+.fa-bullseye {
+    @include icon-content("crisis_alert");
+}
+
+.fa-bus {
+    @include icon-content("directions_bus");
+}
+
+.fa-buysellads {
+    @include icon-content("\e80a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-cab,
+.fa-taxi {
+    @include icon-content("local_taxi");
+}
+
+.fa-calculator {
+    @include icon-content("calculate");
+}
+
+.fa-calendar {
+    @include icon-content("calendar_today");
+    --o-mi-fill: 1;
+}
+
+.fa-calendar-check-o {
+    @include icon-content("event_available");
+}
+
+.fa-calendar-minus-o {
+    @include icon-content("event_busy");
+}
+
+.fa-calendar-o {
+    @include icon-content("calendar_today");
+}
+
+.fa-calendar-plus-o {
+    @include icon-content("calendar_add_on");
+}
+
+.fa-calendar-times-o {
+    @include icon-content("event_busy");
+}
+
+.fa-camera {
+    @include icon-content("photo_camera");
+}
+
+.fa-camera-retro {
+    @include icon-content("camera_alt");
+}
+
+.fa-caret-down {
+    @include icon-content("arrow_drop_down");
+}
+
+.fa-caret-left {
+    @include icon-content("arrow_left");
+}
+
+.fa-caret-right {
+    @include icon-content("arrow_right");
+}
+
+.fa-caret-square-o-down,
+.fa-toggle-down {
+    @include icon-content("arrow_drop_down_circle");
+}
+
+.fa-caret-square-o-left,
+.fa-toggle-left {
+    @include icon-content("arrow_circle_left");
+}
+
+.fa-caret-square-o-right,
+.fa-toggle-right {
+    @include icon-content("arrow_circle_right");
+}
+
+.fa-caret-square-o-up,
+.fa-toggle-up {
+    @include icon-content("arrow_drop_up");
+}
+
+.fa-caret-up {
+    @include icon-content("arrow_drop_up");
+}
+
+.fa-cart-arrow-down {
+    @include icon-content("shopping_cart_checkout");
+}
+
+.fa-cart-plus {
+    @include icon-content("add_shopping_cart");
+}
+
+.fa-cc {
+    @include icon-content("closed_caption");
+}
+
+.fa-cc-amex {
+    @include icon-content("\e80b");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-cc-diners-club {
+    @include icon-content("\e8c5");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-cc-discover {
+    @include icon-content("\e8cb");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-cc-jcb {
+    @include icon-content("\e8c8");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-cc-mastercard {
+    @include icon-content("\e8ca");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-cc-paypal {
+    @include icon-content("\e81f");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-cc-stripe {
+    @include icon-content("\e8c6");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-cc-visa {
+    @include icon-content("\e8c7");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-certificate {
+    @include icon-content("verified");
+}
+
+.fa-chain,
+.fa-link {
+    @include icon-content("link");
+}
+
+.fa-chain-broken,
+.fa-unlink {
+    @include icon-content("link_off");
+}
+
+.fa-check {
+    @include icon-content("check");
+}
+
+.fa-check-circle {
+    @include icon-content("check_circle");
+    --o-mi-fill: 1;
+}
+
+.fa-check-circle-o {
+    @include icon-content("check_circle");
+}
+
+.fa-check-square {
+    @include icon-content("check_box");
+    --o-mi-fill: 1;
+}
+
+.fa-check-square-o {
+    @include icon-content("check_box");
+}
+
+.fa-chevron-circle-down {
+    @include icon-content("expand_circle_down");
+    --o-mi-fill: 1;
+}
+
+.fa-chevron-circle-left {
+    @include icon-content("arrow_circle_left");
+    --o-mi-fill: 1;
+}
+
+.fa-chevron-circle-right {
+    @include icon-content("arrow_circle_right");
+    --o-mi-fill: 1;
+}
+
+.fa-chevron-circle-up {
+    @include icon-content("expand_circle_up");
+    --o-mi-fill: 1;
+}
+
+.fa-chevron-down {
+    @include icon-content("expand_more");
+}
+
+.fa-chevron-left {
+    @include icon-content("chevron_left");
+}
+
+.fa-chevron-right {
+    @include icon-content("chevron_right");
+}
+
+.fa-chevron-up {
+    @include icon-content("expand_less");
+}
+
+.fa-child {
+    @include icon-content("child_care");
+}
+
+.fa-chrome {
+    @include icon-content("\e822");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-circle {
+    @include icon-content("circle");
+    --o-mi-fill: 1;
+}
+
+.fa-circle-o {
+    @include icon-content("circle");
+}
+
+.fa-circle-o-notch {
+    @include icon-content("autorenew");
+}
+
+.fa-circle-thin {
+    @include icon-content("radio_button_unchecked");
+}
+
+.fa-clipboard {
+    @include icon-content("assignment");
+}
+
+.fa-clock-o {
+    @include icon-content("schedule");
+}
+
+.fa-clone {
+    @include icon-content("content_copy");
+}
+
+.fa-close,
+.fa-remove,
+.fa-times {
+    @include icon-content("close");
+}
+
+.fa-cloud {
+    @include icon-content("cloud");
+}
+
+.fa-cloud-download {
+    @include icon-content("cloud_download");
+}
+
+.fa-cloud-upload {
+    @include icon-content("cloud_upload");
+}
+
+.fa-cny,
+.fa-jpy,
+.fa-rmb,
+.fa-yen {
+    @include icon-content("currency_yen");
+}
+
+.fa-code {
+    @include icon-content("code");
+}
+
+.fa-code-fork {
+    @include icon-content("fork_right");
+}
+
+.fa-codepen {
+    @include icon-content("\e823");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-codiepie {
+    @include icon-content("\e824");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-coffee {
+    @include icon-content("coffee");
+}
+
+.fa-cog,
+.fa-gear {
+    @include icon-content("settings");
+    --o-mi-fill: 1;
+}
+
+.fa-cogs,
+.fa-gears {
+    @include icon-content("settings_applications");
+}
+
+.fa-columns {
+    @include icon-content("view_column");
+}
+
+.fa-comment {
+    @include icon-content("chat_bubble");
+    --o-mi-fill: 1;
+}
+
+.fa-comment-o {
+    @include icon-content("chat_bubble");
+}
+
+.fa-commenting {
+    @include icon-content("mode_comment");
+    --o-mi-fill: 1;
+}
+
+.fa-commenting-o {
+    @include icon-content("mode_comment");
+}
+
+.fa-comments {
+    @include icon-content("forum");
+    --o-mi-fill: 1;
+}
+
+.fa-comments-o {
+    @include icon-content("forum");
+}
+
+.fa-compass {
+    @include icon-content("explore");
+}
+
+.fa-compress {
+    @include icon-content("close_fullscreen");
+}
+
+.fa-connectdevelop {
+    @include icon-content("\e825");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-contao {
+    @include icon-content("\e826");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-copy,
+.fa-files-o {
+    @include icon-content("content_copy");
+}
+
+.fa-copyright {
+    @include icon-content("copyright");
+}
+
+.fa-creative-commons {
+    @include icon-content("\e827");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-credit-card {
+    @include icon-content("credit_card");
+}
+
+.fa-credit-card-alt {
+    @include icon-content("credit_card");
+}
+
+.fa-crop {
+    @include icon-content("crop");
+}
+
+.fa-crosshairs {
+    @include icon-content("my_location");
+}
+
+.fa-css3 {
+    @include icon-content("\e828");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-cube {
+    @include icon-content("deployed_code");
+}
+
+.fa-cubes {
+    @include icon-content("inventory_2");
+}
+
+.fa-cut,
+.fa-scissors {
+    @include icon-content("content_cut");
+}
+
+.fa-cutlery {
+    @include icon-content("restaurant");
+}
+
+.fa-dashboard,
+.fa-tachometer {
+    @include icon-content("speed");
+}
+
+.fa-dashcube {
+    @include icon-content("\e8c9");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-database {
+    @include icon-content("database");
+}
+
+.fa-deaf,
+.fa-deafness,
+.fa-hard-of-hearing {
+    @include icon-content("hearing_disabled");
+}
+
+.fa-dedent,
+.fa-outdent {
+    @include icon-content("format_indent_decrease");
+}
+
+.fa-delicious {
+    @include icon-content("\e82a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-desktop {
+    @include icon-content("desktop_windows");
+}
+
+.fa-deviantart {
+    @include icon-content("\e82b");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-diamond {
+    @include icon-content("diamond");
+}
+
+.fa-digg {
+    @include icon-content("\e82c");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-dollar,
+.fa-usd {
+    @include icon-content("attach_money");
+}
+
+.fa-dot-circle-o {
+    @include icon-content("radio_button_checked");
+}
+
+.fa-download {
+    @include icon-content("download");
+}
+
+.fa-dribbble {
+    @include icon-content("\e82d");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-drivers-license,
+.fa-id-card {
+    @include icon-content("badge");
+    --o-mi-fill: 1;
+}
+
+.fa-drivers-license-o,
+.fa-id-card-o {
+    @include icon-content("badge");
+}
+
+.fa-dropbox {
+    @include icon-content("\e82e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-drupal {
+    @include icon-content("\e82f");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-edge {
+    @include icon-content("\e830");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-edit {
+    @include icon-content("edit");
+    --o-mi-fill: 1;
+}
+
+.fa-eercast {
+    @include icon-content("\e831");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-eject {
+    @include icon-content("eject");
+}
+
+.fa-ellipsis-h {
+    @include icon-content("more_horiz");
+}
+
+.fa-ellipsis-v {
+    @include icon-content("more_vert");
+}
+
+.fa-empire,
+.fa-ge {
+    @include icon-content("\e832");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-envelope {
+    @include icon-content("mail");
+    --o-mi-fill: 1;
+}
+
+.fa-envelope-o {
+    @include icon-content("mail");
+}
+
+.fa-envelope-open {
+    @include icon-content("drafts");
+    --o-mi-fill: 1;
+}
+
+.fa-envelope-open-o {
+    @include icon-content("drafts");
+}
+
+.fa-envelope-square {
+    @include icon-content("mail");
+    --o-mi-fill: 1;
+}
+
+.fa-envira {
+    @include icon-content("\e833");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-eraser {
+    @include icon-content("ink_eraser");
+}
+
+.fa-etsy {
+    @include icon-content("\e834");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-eur,
+.fa-euro {
+    @include icon-content("euro");
+}
+
+.fa-exchange {
+    @include icon-content("swap_horiz");
+}
+
+.fa-exclamation {
+    @include icon-content("priority_high");
+}
+
+.fa-exclamation-circle {
+    @include icon-content("error");
+}
+
+.fa-exclamation-triangle,
+.fa-warning {
+    @include icon-content("warning");
+}
+
+.fa-expand {
+    @include icon-content("expand_content");
+}
+
+.fa-expeditedssl {
+    @include icon-content("\e835");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-external-link {
+    @include icon-content("open_in_new");
+}
+
+.fa-external-link-square {
+    @include icon-content("open_in_new");
+}
+
+.fa-eye {
+    @include icon-content("visibility");
+}
+
+.fa-eye-slash {
+    @include icon-content("visibility_off");
+}
+
+.fa-eyedropper {
+    @include icon-content("colorize");
+}
+
+.fa-fa,
+.fa-font-awesome {
+    @include icon-content("\e83e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-facebook,
+.fa-facebook-f {
+    @include icon-content("\e839");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-facebook-official {
+    @include icon-content("\e837");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-facebook-square {
+    @include icon-content("\e838");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-fast-backward {
+    @include icon-content("fast_rewind");
+}
+
+.fa-fast-forward {
+    @include icon-content("fast_forward");
+}
+
+.fa-fax {
+    @include icon-content("fax");
+}
+
+.fa-feed,
+.fa-rss {
+    @include icon-content("rss_feed");
+}
+
+.fa-female {
+    @include icon-content("female");
+}
+
+.fa-fighter-jet {
+    @include icon-content("flight");
+}
+
+.fa-file {
+    @include icon-content("description");
+    --o-mi-fill: 1;
+}
+
+.fa-file-archive-o,
+.fa-file-zip-o {
+    @include icon-content("folder_zip");
+}
+
+.fa-file-audio-o,
+.fa-file-sound-o {
+    @include icon-content("audio_file");
+}
+
+.fa-file-code-o {
+    @include icon-content("code");
+}
+
+.fa-file-excel-o {
+    @include icon-content("table_chart");
+}
+
+.fa-file-image-o,
+.fa-file-photo-o,
+.fa-file-picture-o {
+    @include icon-content("image");
+}
+
+.fa-file-movie-o,
+.fa-file-video-o {
+    @include icon-content("movie");
+}
+
+.fa-file-o {
+    @include icon-content("description");
+}
+
+.fa-file-pdf-o {
+    @include icon-content("picture_as_pdf");
+}
+
+.fa-file-powerpoint-o {
+    @include icon-content("slideshow");
+}
+
+.fa-file-text {
+    @include icon-content("article");
+    --o-mi-fill: 1;
+}
+
+.fa-file-text-o {
+    @include icon-content("article");
+}
+
+.fa-file-word-o {
+    @include icon-content("description");
+}
+
+.fa-film {
+    @include icon-content("movie");
+}
+
+.fa-filter {
+    @include icon-content("filter_alt");
+    --o-mi-fill: 1;
+}
+
+.fa-fire {
+    @include icon-content("whatshot");
+}
+
+.fa-fire-extinguisher {
+    @include icon-content("fire_extinguisher");
+}
+
+.fa-firefox {
+    @include icon-content("\e83a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-first-order {
+    @include icon-content("\e83b");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-flag {
+    @include icon-content("flag");
+    --o-mi-fill: 1;
+}
+
+.fa-flag-checkered {
+    @include icon-content("sports_score");
+}
+
+.fa-flag-o {
+    @include icon-content("flag");
+}
+
+.fa-flask {
+    @include icon-content("science");
+}
+
+.fa-flickr {
+    @include icon-content("\e83c");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-floppy-o,
+.fa-save {
+    @include icon-content("save");
+}
+
+.fa-folder {
+    @include icon-content("folder");
+    --o-mi-fill: 1;
+}
+
+.fa-folder-o {
+    @include icon-content("folder");
+}
+
+.fa-folder-open {
+    @include icon-content("folder_open");
+    --o-mi-fill: 1;
+}
+
+.fa-folder-open-o {
+    @include icon-content("folder_open");
+}
+
+.fa-font {
+    @include icon-content("text_fields");
+}
+
+.fa-fonticons {
+    @include icon-content("\e83d");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-fort-awesome {
+    @include icon-content("\e83e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-forumbee {
+    @include icon-content("\e83f");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-forward {
+    @include icon-content("forward");
+}
+
+.fa-foursquare {
+    @include icon-content("\e840");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-free-code-camp {
+    @include icon-content("\e841");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-frown-o {
+    @include icon-content("sentiment_sad");
+}
+
+.fa-futbol-o,
+.fa-soccer-ball-o {
+    @include icon-content("sports_soccer");
+}
+
+.fa-gamepad {
+    @include icon-content("stadia_controller");
+}
+
+.fa-gavel,
+.fa-legal {
+    @include icon-content("gavel");
+}
+
+.fa-gbp {
+    @include icon-content("currency_pound");
+}
+
+.fa-genderless {
+    @include icon-content("radio_button_unchecked");
+}
+
+.fa-get-pocket {
+    @include icon-content("\e842");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-gg {
+    @include icon-content("\e844");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-gg-circle {
+    @include icon-content("\e843");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-gift {
+    @include icon-content("card_giftcard");
+}
+
+.fa-git {
+    @include icon-content("\e846");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-git-square {
+    @include icon-content("\e845");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-github {
+    @include icon-content("\e849");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-github-alt {
+    @include icon-content("\e847");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-github-square {
+    @include icon-content("\e80c");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-gitlab {
+    @include icon-content("\e84a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-gittip,
+.fa-gratipay {
+    @include icon-content("\e84b");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-glass {
+    @include icon-content("local_bar");
+}
+
+.fa-glide {
+    @include icon-content("\e84d");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-glide-g {
+    @include icon-content("\e84c");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-globe {
+    @include icon-content("public");
+}
+
+.fa-google {
+    @include icon-content("\e852");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-google-plus {
+    @include icon-content("\e850");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-google-plus-circle,
+.fa-google-plus-official {
+    @include icon-content("\e84e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-google-plus-square {
+    @include icon-content("\e84f");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-google-wallet {
+    @include icon-content("\e851");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-graduation-cap,
+.fa-mortar-board {
+    @include icon-content("school");
+}
+
+.fa-grav {
+    @include icon-content("\e853");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-group,
+.fa-users {
+    @include icon-content("group");
+    --o-mi-fill: 1;
+}
+
+.fa-h-square {
+    @include icon-content("local_hospital");
+}
+
+.fa-hacker-news,
+.fa-y-combinator-square,
+.fa-yc-square {
+    @include icon-content("\e854");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-hand-grab-o,
+.fa-hand-rock-o {
+    @include icon-content("back_hand");
+}
+
+.fa-hand-lizard-o {
+    @include icon-content("\e855");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-hand-o-down {
+    @include icon-content("pan_tool_alt");
+}
+
+.fa-hand-o-left {
+    @include icon-content("arrow_back");
+}
+
+.fa-hand-o-right {
+    @include icon-content("arrow_forward");
+}
+
+.fa-hand-o-up {
+    @include icon-content("back_hand");
+}
+
+.fa-hand-paper-o,
+.fa-hand-stop-o {
+    @include icon-content("back_hand");
+}
+
+.fa-hand-peace-o {
+    @include icon-content("\e856");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-hand-pointer-o {
+    @include icon-content("pan_tool_alt");
+}
+
+.fa-hand-scissors-o {
+    @include icon-content("\e857");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-hand-spock-o {
+    @include icon-content("\e858");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-handshake-o {
+    @include icon-content("handshake");
+}
+
+.fa-hashtag {
+    @include icon-content("tag");
+}
+
+.fa-hdd-o {
+    @include icon-content("storage");
+}
+
+.fa-header {
+    @include icon-content("title");
+}
+
+.fa-headphones {
+    @include icon-content("headphones");
+}
+
+.fa-heart {
+    @include icon-content("favorite");
+    --o-mi-fill: 1;
+}
+
+.fa-heart-o {
+    @include icon-content("favorite");
+}
+
+.fa-heartbeat {
+    @include icon-content("cardiology");
+}
+
+.fa-history {
+    @include icon-content("history");
+}
+
+.fa-home {
+    @include icon-content("home");
+}
+
+.fa-hospital-o {
+    @include icon-content("local_hospital");
+}
+
+.fa-hourglass {
+    @include icon-content("hourglass_empty");
+}
+
+.fa-hourglass-1,
+.fa-hourglass-start {
+    @include icon-content("hourglass_top");
+}
+
+.fa-hourglass-2,
+.fa-hourglass-half {
+    @include icon-content("hourglass_bottom");
+}
+
+.fa-hourglass-3,
+.fa-hourglass-end {
+    @include icon-content("hourglass_disabled");
+}
+
+.fa-hourglass-o {
+    @include icon-content("hourglass_empty");
+}
+
+.fa-houzz {
+    @include icon-content("\e859");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-html5 {
+    @include icon-content("\e85a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-i-cursor {
+    @include icon-content("text_fields");
+}
+
+.fa-id-badge {
+    @include icon-content("badge");
+}
+
+.fa-ils,
+.fa-shekel,
+.fa-sheqel {
+    @include icon-content("₪");
+}
+
+.fa-image,
+.fa-photo,
+.fa-picture-o {
+    @include icon-content("image");
+}
+
+.fa-imdb {
+    @include icon-content("\e85b");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-inbox {
+    @include icon-content("inbox");
+}
+
+.fa-indent {
+    @include icon-content("format_indent_increase");
+}
+
+.fa-industry {
+    @include icon-content("factory");
+}
+
+.fa-info {
+    @include icon-content("info");
+}
+
+.fa-info-circle {
+    @include icon-content("info");
+}
+
+.fa-inr,
+.fa-rupee {
+    @include icon-content("currency_rupee");
+}
+
+.fa-instagram {
+    @include icon-content("\e85c");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-internet-explorer {
+    @include icon-content("\e85d");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-intersex,
+.fa-transgender {
+    @include icon-content("transgender");
+}
+
+.fa-ioxhost {
+    @include icon-content("\e85e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-italic {
+    @include icon-content("format_italic");
+}
+
+.fa-joomla {
+    @include icon-content("\e85f");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-jsfiddle {
+    @include icon-content("\e860");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-key {
+    @include icon-content("key");
+}
+
+.fa-keyboard-o {
+    @include icon-content("keyboard");
+}
+
+.fa-krw,
+.fa-won {
+    @include icon-content("￦");
+}
+
+.fa-language {
+    @include icon-content("translate");
+}
+
+.fa-laptop {
+    @include icon-content("laptop");
+}
+
+.fa-lastfm {
+    @include icon-content("\e862");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-lastfm-square {
+    @include icon-content("\e861");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-leaf {
+    @include icon-content("eco");
+}
+
+.fa-leanpub {
+    @include icon-content("\e863");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-lemon-o {
+    @include icon-content("\e864");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-level-down {
+    @include icon-content("subdirectory_arrow_right");
+}
+
+.fa-level-up {
+    @include icon-content("subdirectory_arrow_left");
+}
+
+.fa-life-bouy,
+.fa-life-buoy,
+.fa-life-ring,
+.fa-life-saver,
+.fa-support {
+    @include icon-content("support");
+}
+
+.fa-lightbulb-o {
+    @include icon-content("lightbulb");
+}
+
+.fa-line-chart {
+    @include icon-content("show_chart");
+}
+
+.fa-linkedin {
+    @include icon-content("\e866");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-linkedin-square {
+    @include icon-content("\e865");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-linode {
+    @include icon-content("\e867");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-linux {
+    @include icon-content("\e868");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-list {
+    @include icon-content("format_list_bulleted");
+}
+
+.fa-list-alt {
+    @include icon-content("list_alt");
+}
+
+.fa-list-ol {
+    @include icon-content("format_list_numbered");
+}
+
+.fa-list-ul {
+    @include icon-content("format_list_bulleted");
+}
+
+.fa-location-arrow {
+    @include icon-content("my_location");
+}
+
+.fa-lock {
+    @include icon-content("lock");
+}
+
+.fa-long-arrow-down {
+    @include icon-content("south");
+}
+
+.fa-long-arrow-left {
+    @include icon-content("west");
+}
+
+.fa-long-arrow-right {
+    @include icon-content("east");
+}
+
+.fa-long-arrow-up {
+    @include icon-content("north");
+}
+
+.fa-low-vision {
+    @include icon-content("visibility_off");
+}
+
+.fa-magic {
+    @include icon-content("wand_stars");
+}
+
+.fa-magnet {
+    @include icon-content("\e869");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-mail-forward,
+.fa-share {
+    @include icon-content("share");
+}
+
+.fa-mail-reply,
+.fa-reply {
+    @include icon-content("reply");
+}
+
+.fa-mail-reply-all,
+.fa-reply-all {
+    @include icon-content("reply_all");
+}
+
+.fa-male {
+    @include icon-content("male");
+}
+
+.fa-map {
+    @include icon-content("map");
+}
+
+.fa-map-marker {
+    @include icon-content("location_on");
+}
+
+.fa-map-o {
+    @include icon-content("map");
+}
+
+.fa-map-pin {
+    @include icon-content("push_pin");
+}
+
+.fa-map-signs {
+    @include icon-content("signpost");
+}
+
+.fa-mars {
+    @include icon-content("male");
+}
+
+.fa-mars-double {
+    @include icon-content("\e86a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-mars-stroke {
+    @include icon-content("\e86d");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-mars-stroke-h {
+    @include icon-content("\e86b");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-mars-stroke-v {
+    @include icon-content("\e86c");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-maxcdn {
+    @include icon-content("\e86e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-meanpath {
+    @include icon-content("\e86f");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-medium {
+    @include icon-content("\e870");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-medkit {
+    @include icon-content("medical_services");
+}
+
+.fa-meetup {
+    @include icon-content("\e871");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-meh-o {
+    @include icon-content("sentiment_neutral");
+}
+
+.fa-mercury {
+    @include icon-content("\e872");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-microchip {
+    @include icon-content("memory");
+}
+
+.fa-microphone {
+    @include icon-content("mic");
+}
+
+.fa-microphone-slash {
+    @include icon-content("mic_off");
+}
+
+.fa-minus {
+    @include icon-content("remove");
+}
+
+.fa-minus-circle {
+    @include icon-content("remove_circle");
+}
+
+.fa-minus-square {
+    @include icon-content("indeterminate_check_box");
+    --o-mi-fill: 1;
+}
+
+.fa-minus-square-o {
+    @include icon-content("indeterminate_check_box");
+}
+
+.fa-mixcloud {
+    @include icon-content("\e873");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-mobile,
+.fa-mobile-phone {
+    @include icon-content("smartphone");
+}
+
+.fa-modx {
+    @include icon-content("\e874");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-money {
+    @include icon-content("payments");
+}
+
+.fa-moon-o {
+    @include icon-content("dark_mode");
+}
+
+.fa-motorcycle {
+    @include icon-content("two_wheeler");
+}
+
+.fa-mouse-pointer {
+    @include icon-content("mouse");
+}
+
+.fa-music {
+    @include icon-content("music_note");
+}
+
+.fa-neuter {
+    @include icon-content("\e875");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-newspaper-o {
+    @include icon-content("newspaper");
+}
+
+.fa-object-group {
+    @include icon-content("select_all");
+}
+
+.fa-object-ungroup {
+    @include icon-content("deselect");
+}
+
+.fa-odnoklassniki {
+    @include icon-content("\e877");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-odnoklassniki-square {
+    @include icon-content("\e876");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-opencart {
+    @include icon-content("\e878");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-openid {
+    @include icon-content("\e879");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-opera {
+    @include icon-content("\e87a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-optin-monster {
+    @include icon-content("\e87b");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-pagelines {
+    @include icon-content("\e87c");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-paint-brush {
+    @include icon-content("design_services");
+}
+
+.fa-paper-plane,
+.fa-send {
+    @include icon-content("send");
+    --o-mi-fill: 1;
+}
+
+.fa-paper-plane-o,
+.fa-send-o {
+    @include icon-content("send");
+}
+
+.fa-paperclip {
+    @include icon-content("attach_file");
+}
+
+.fa-paragraph {
+    @include icon-content("format_paragraph");
+}
+
+.fa-paste {
+    @include icon-content("content_paste");
+}
+
+.fa-pause {
+    @include icon-content("pause");
+}
+
+.fa-pause-circle {
+    @include icon-content("pause_circle");
+    --o-mi-fill: 1;
+}
+
+.fa-pause-circle-o {
+    @include icon-content("pause_circle");
+}
+
+.fa-paw {
+    @include icon-content("pets");
+}
+
+.fa-paypal {
+    @include icon-content("\e87d");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-pencil {
+    @include icon-content("edit");
+    --o-mi-fill: 1;
+}
+
+.fa-pencil-square {
+    @include icon-content("edit_square");
+    --o-mi-fill: 1;
+}
+
+.fa-pencil-square-o {
+    @include icon-content("edit_square");
+}
+
+
+.fa-percent {
+    @include icon-content("percent");
+}
+
+.fa-phone {
+    @include icon-content("phone");
+    --o-mi-fill: 1;
+}
+
+.fa-phone-square {
+    @include icon-content("phone");
+    --o-mi-fill: 1;
+}
+
+.fa-pie-chart {
+    @include icon-content("pie_chart");
+}
+
+.fa-pied-piper {
+    @include icon-content("\e880");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-pied-piper-alt {
+    @include icon-content("\e87e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-pied-piper-pp {
+    @include icon-content("\e87f");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-pinterest {
+    @include icon-content("\e883");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-pinterest-p {
+    @include icon-content("\e881");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-pinterest-square {
+    @include icon-content("\e882");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-plane {
+    @include icon-content("travel");
+}
+
+.fa-play {
+    @include icon-content("play_arrow");
+}
+
+.fa-play-circle {
+    @include icon-content("play_circle");
+    --o-mi-fill: 1;
+}
+
+.fa-play-circle-o {
+    @include icon-content("play_circle");
+}
+
+.fa-plug {
+    @include icon-content("power");
+}
+
+.fa-plus {
+    @include icon-content("add");
+}
+
+.fa-plus-circle {
+    @include icon-content("add_circle");
+}
+
+.fa-plus-square {
+    @include icon-content("add_box");
+    --o-mi-fill: 1;
+}
+
+.fa-plus-square-o {
+    @include icon-content("add_box");
+}
+
+.fa-podcast {
+    @include icon-content("podcasts");
+}
+
+.fa-power-off {
+    @include icon-content("power_settings_new");
+}
+
+.fa-print {
+    @include icon-content("print");
+}
+
+.fa-product-hunt {
+    @include icon-content("\e884");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-puzzle-piece {
+    @include icon-content("extension");
+}
+
+.fa-qq {
+    @include icon-content("\e885");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-qrcode {
+    @include icon-content("qr_code");
+}
+
+.fa-question {
+    @include icon-content("help");
+}
+
+.fa-question-circle {
+    @include icon-content("help");
+}
+
+.fa-question-circle-o {
+    @include icon-content("help_outline");
+}
+
+.fa-quora {
+    @include icon-content("\e886");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-quote-left {
+    @include icon-content("format_quote");
+}
+
+.fa-quote-right {
+    @include icon-content("format_quote");
+}
+
+.fa-ra,
+.fa-rebel,
+.fa-resistance {
+    @include icon-content("\e887");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-random {
+    @include icon-content("shuffle");
+}
+
+.fa-ravelry {
+    @include icon-content("\e888");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-recycle {
+    @include icon-content("recycling");
+}
+
+.fa-reddit {
+    @include icon-content("\e88b");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-reddit-alien {
+    @include icon-content("\e889");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-reddit-square {
+    @include icon-content("\e88a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-refresh {
+    @include icon-content("refresh");
+}
+
+.fa-registered {
+    @include icon-content("Ⓡ");
+}
+
+.fa-renren {
+    @include icon-content("\e88c");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-repeat,
+.fa-rotate-right {
+    @include icon-content("redo");
+}
+
+.fa-retweet {
+    @include icon-content("repeat");
+}
+
+.fa-road {
+    @include icon-content("road");
+}
+
+.fa-rocket {
+    @include icon-content("rocket_launch");
+}
+
+.fa-rotate-left,
+.fa-undo {
+    @include icon-content("undo");
+}
+
+.fa-rouble,
+.fa-rub,
+.fa-ruble {
+    @include icon-content("currency_ruble");
+}
+
+.fa-rss-square {
+    @include icon-content("rss_feed");
+}
+
+.fa-safari {
+    @include icon-content("\e88d");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-scribd {
+    @include icon-content("\e88e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-search {
+    @include icon-content("search");
+}
+
+.fa-search-minus {
+    @include icon-content("zoom_out");
+}
+
+.fa-search-plus {
+    @include icon-content("zoom_in");
+}
+
+.fa-sellsy {
+    @include icon-content("\e88f");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-server {
+    @include icon-content("dns");
+}
+
+.fa-share-alt {
+    // Mostly used for Hierarchy view
+    @include icon-content("family_history");
+}
+
+.fa-share-alt-square {
+    @include icon-content("share");
+}
+
+.fa-share-square {
+    @include icon-content("share");
+}
+
+.fa-share-square-o {
+    @include icon-content("share");
+}
+
+.fa-shield {
+    @include icon-content("security");
+}
+
+.fa-ship {
+    @include icon-content("directions_boat");
+}
+
+.fa-shirtsinbulk {
+    @include icon-content("\e890");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-shopping-bag {
+    @include icon-content("shopping_bag");
+}
+
+.fa-shopping-basket {
+    @include icon-content("shopping_basket");
+}
+
+.fa-shopping-cart {
+    @include icon-content("shopping_cart");
+}
+
+.fa-shower {
+    @include icon-content("shower");
+}
+
+.fa-sign-in {
+    @include icon-content("login");
+}
+
+.fa-sign-language,
+.fa-signing {
+    @include icon-content("sign_language");
+}
+
+.fa-sign-out {
+    @include icon-content("logout");
+}
+
+.fa-signal {
+    @include icon-content("signal_cellular_4_bar");
+}
+
+.fa-simplybuilt {
+    @include icon-content("\e891");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-sitemap {
+    @include icon-content("account_tree");
+}
+
+.fa-skyatlas {
+    @include icon-content("\e892");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-skype {
+    @include icon-content("\e893");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-slack {
+    @include icon-content("\e894");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-sliders {
+    @include icon-content("tune");
+}
+
+.fa-slideshare {
+    @include icon-content("\e895");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-smile-o {
+    @include icon-content("sentiment_satisfied");
+}
+
+.fa-snapchat {
+    @include icon-content("\e898");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-snapchat-ghost {
+    @include icon-content("\e896");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-snapchat-square {
+    @include icon-content("\e897");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-snowflake-o {
+    @include icon-content("ac_unit");
+}
+
+.fa-sort,
+.fa-unsorted {
+    @include icon-content("swap_vert");
+}
+
+.fa-sort-alpha-asc {
+    @include icon-content("sort_by_alpha");
+}
+
+.fa-sort-alpha-desc {
+    @include icon-content("sort_by_alpha");
+}
+
+.fa-sort-amount-asc {
+    @include icon-content("sort");
+}
+
+.fa-sort-amount-desc {
+    @include icon-content("sort");
+}
+
+.fa-sort-asc,
+.fa-sort-up {
+    @include icon-content("arrow_upward");
+}
+
+.fa-sort-desc,
+.fa-sort-down {
+    @include icon-content("arrow_downward");
+}
+
+.fa-sort-numeric-asc {
+    @include icon-content("sort");
+}
+
+.fa-sort-numeric-desc {
+    @include icon-content("sort");
+}
+
+.fa-soundcloud {
+    @include icon-content("\e899");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-space-shuttle {
+    @include icon-content("rocket");
+}
+
+.fa-spinner {
+    @include icon-content("progress_activity");
+}
+
+.fa-spoon {
+    @include icon-content("restaurant");
+}
+
+.fa-spotify {
+    @include icon-content("\e89a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-square {
+    @include icon-content("square");
+    --o-mi-fill: 1;
+}
+
+.fa-square-o {
+    @include icon-content("square");
+}
+
+.fa-stack-exchange {
+    @include icon-content("\e89b");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-stack-overflow {
+    @include icon-content("\e89c");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-star {
+    @include icon-content("star");
+    --o-mi-fill: 1;
+}
+
+.fa-star-half {
+    @include icon-content("star_half");
+}
+
+.fa-star-half-empty,
+.fa-star-half-full,
+.fa-star-half-o {
+    @include icon-content("star_half");
+}
+
+.fa-star-o {
+    @include icon-content("star");
+}
+
+.fa-steam {
+    @include icon-content("\e89e");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-steam-square {
+    @include icon-content("\e89d");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-step-backward {
+    @include icon-content("skip_previous");
+}
+
+.fa-step-forward {
+    @include icon-content("skip_next");
+}
+
+.fa-stethoscope {
+    @include icon-content("stethoscope");
+}
+
+.fa-sticky-note {
+    @include icon-content("sticky_note_2");
+    --o-mi-fill: 1;
+}
+
+.fa-sticky-note-o {
+    @include icon-content("sticky_note_2");
+}
+
+.fa-stop {
+    @include icon-content("stop");
+}
+
+.fa-stop-circle {
+    @include icon-content("stop_circle");
+    --o-mi-fill: 1;
+}
+
+.fa-stop-circle-o {
+    @include icon-content("stop_circle");
+}
+
+.fa-street-view {
+    @include icon-content("streetview");
+}
+
+.fa-strikethrough {
+    @include icon-content("strikethrough_s");
+}
+
+.fa-stumbleupon {
+    @include icon-content("\e8a0");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-stumbleupon-circle {
+    @include icon-content("\e89f");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-subscript {
+    @include icon-content("subscript");
+}
+
+.fa-subway {
+    @include icon-content("subway");
+}
+
+.fa-suitcase {
+    @include icon-content("luggage");
+}
+
+.fa-sun-o {
+    @include icon-content("light_mode");
+}
+
+.fa-superpowers {
+    @include icon-content("\e8a1");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-superscript {
+    @include icon-content("superscript");
+}
+
+.fa-table {
+    @include icon-content("table_chart");
+}
+
+.fa-tablet {
+    @include icon-content("tablet");
+}
+
+.fa-tag {
+    @include icon-content("label");
+}
+
+.fa-tags {
+    @include icon-content("sell");
+}
+
+.fa-tasks {
+    @include icon-content("checklist");
+}
+
+.fa-telegram {
+    @include icon-content("\e8a2");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-television,
+.fa-tv {
+    @include icon-content("tv");
+}
+
+.fa-tencent-weibo {
+    @include icon-content("\e8a3");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-terminal {
+    @include icon-content("terminal");
+}
+
+.fa-text-height {
+    @include icon-content("height");
+}
+
+.fa-text-width {
+    @include icon-content("width");
+}
+
+.fa-th {
+    @include icon-content("grid_view");
+}
+
+.fa-th-large {
+    @include icon-content("view_module");
+}
+
+.fa-th-list {
+    @include icon-content("view_list");
+}
+
+.fa-themeisle {
+    @include icon-content("\e8a4");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-thermometer,
+.fa-thermometer-4,
+.fa-thermometer-full {
+    @include icon-content("device_thermostat");
+}
+
+.fa-thermometer-0,
+.fa-thermometer-empty {
+    @include icon-content("device_thermostat");
+}
+
+.fa-thermometer-1,
+.fa-thermometer-quarter {
+    @include icon-content("device_thermostat");
+}
+
+.fa-thermometer-2,
+.fa-thermometer-half {
+    @include icon-content("device_thermostat");
+}
+
+.fa-thermometer-3,
+.fa-thermometer-three-quarters {
+    @include icon-content("device_thermostat");
+}
+
+.fa-thumb-tack {
+    @include icon-content("push_pin");
+}
+
+.fa-thumbs-down {
+    @include icon-content("thumb_down");
+    --o-mi-fill: 1;
+}
+
+.fa-thumbs-o-down {
+    @include icon-content("thumb_down");
+}
+
+.fa-thumbs-o-up {
+    @include icon-content("thumb_up");
+}
+
+.fa-thumbs-up {
+    @include icon-content("thumb_up");
+    --o-mi-fill: 1;
+}
+
+.fa-ticket {
+    @include icon-content("confirmation_number");
+}
+
+.fa-times-circle {
+    @include icon-content("cancel");
+    --o-mi-fill: 1;
+}
+
+.fa-times-circle-o {
+    @include icon-content("cancel");
+}
+
+.fa-times-rectangle,
+.fa-window-close {
+    @include icon-content("cancel");
+    --o-mi-fill: 1;
+}
+
+.fa-times-rectangle-o,
+.fa-window-close-o {
+    @include icon-content("cancel");
+}
+
+.fa-tint {
+    @include icon-content("water_drop");
+}
+
+.fa-toggle-off {
+    @include icon-content("toggle_off");
+}
+
+.fa-toggle-on {
+    @include icon-content("toggle_on");
+}
+
+.fa-trademark {
+    @include icon-content("\e8a5");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-train {
+    @include icon-content("train");
+}
+
+.fa-transgender-alt {
+    @include icon-content("transgender");
+}
+
+.fa-trash {
+    @include icon-content("delete");
+    --o-mi-fill: 1;
+}
+
+.fa-trash-o {
+    @include icon-content("delete");
+}
+
+.fa-tree {
+    @include icon-content("park");
+}
+
+.fa-trello {
+    @include icon-content("\e8a6");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-tripadvisor {
+    @include icon-content("\e8a7");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-trophy {
+    @include icon-content("trophy");
+    --o-mi-fill: 1;
+}
+
+.fa-truck {
+    @include icon-content("local_shipping");
+}
+
+.fa-try,
+.fa-turkish-lira {
+    @include icon-content("currency_lira");
+}
+
+.fa-tty {
+    @include icon-content("tty");
+}
+
+.fa-tumblr {
+    @include icon-content("\e8a9");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-tumblr-square {
+    @include icon-content("\e8a8");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-twitch {
+    @include icon-content("\e8aa");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-twitter {
+    @include icon-content("\e81a");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-twitter-square {
+    @include icon-content("\e848");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-umbrella {
+    @include icon-content("umbrella");
+}
+
+.fa-underline {
+    @include icon-content("format_underlined");
+}
+
+.fa-universal-access {
+    @include icon-content("accessibility");
+}
+
+.fa-unlock {
+    @include icon-content("lock_open");
+}
+
+.fa-unlock-alt {
+    @include icon-content("no_encryption");
+}
+
+.fa-upload {
+    @include icon-content("upload");
+}
+
+.fa-usb {
+    @include icon-content("usb");
+}
+
+.fa-user {
+    @include icon-content("person");
+    --o-mi-fill: 1;
+}
+
+.fa-user-circle {
+    @include icon-content("account_circle");
+    --o-mi-fill: 1;
+}
+
+.fa-user-circle-o {
+    @include icon-content("account_circle");
+}
+
+.fa-user-md {
+    @include icon-content("medical_services");
+}
+
+.fa-user-o {
+    @include icon-content("person");
+}
+
+.fa-user-plus {
+    @include icon-content("person_add");
+    --o-mi-fill: 1;
+}
+
+.fa-user-secret {
+    @include icon-content("\e8ab");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-user-times {
+    @include icon-content("person_remove");
+    --o-mi-fill: 1;
+}
+
+.fa-venus {
+    @include icon-content("female");
+}
+
+.fa-venus-double {
+    @include icon-content("\e8ac");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-venus-mars {
+    @include icon-content("\e8ad");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-viacoin {
+    @include icon-content("\e8ae");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-viadeo {
+    @include icon-content("\e8b0");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-viadeo-square {
+    @include icon-content("\e8af");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-video-camera {
+    @include icon-content("videocam");
+    --o-mi-fill: 1;
+}
+
+.fa-vimeo {
+    @include icon-content("\e8b2");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-vimeo-square {
+    @include icon-content("\e8b1");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-vine {
+    @include icon-content("\e8b3");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-vk {
+    @include icon-content("\e8b4");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-volume-control-phone {
+    @include icon-content("phone_in_talk");
+}
+
+.fa-volume-down {
+    @include icon-content("volume_down");
+}
+
+.fa-volume-off {
+    @include icon-content("volume_off");
+}
+
+.fa-volume-up {
+    @include icon-content("volume_up");
+}
+
+.fa-wechat,
+.fa-weixin {
+    @include icon-content("\e8b5");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-weibo {
+    @include icon-content("e820");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-whatsapp {
+    @include icon-content("\e8b6");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-wheelchair {
+    @include icon-content("accessible");
+}
+
+.fa-wheelchair-alt {
+    @include icon-content("accessible");
+}
+
+.fa-wifi {
+    @include icon-content("wifi");
+}
+
+.fa-wikipedia-w {
+    @include icon-content("\e8b7");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-window-maximize {
+    @include icon-content("fullscreen");
+}
+
+.fa-window-minimize {
+    @include icon-content("minimize");
+}
+
+.fa-window-restore {
+    @include icon-content("fullscreen_exit");
+}
+
+.fa-windows {
+    @include icon-content("\e8b8");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-wordpress {
+    @include icon-content("\e8b9");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-wpbeginner {
+    @include icon-content("\e8ba");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-wpexplorer {
+    @include icon-content("\e8bb");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-wpforms {
+    @include icon-content("\e8bc");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-wrench {
+    @include icon-content("build");
+}
+
+.fa-xing {
+    @include icon-content("\e8be");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-xing-square {
+    @include icon-content("\e8bd");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-y-combinator,
+.fa-yc {
+    @include icon-content("\e8bf");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-yahoo {
+    @include icon-content("\e8c0");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-yelp {
+    @include icon-content("\e8c1");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-youtube {
+    @include icon-content("\e8c4");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-youtube-play {
+    @include icon-content("\e8c2");
+    --icon-font-family: #{$oi-font-family};
+}
+
+.fa-youtube-square {
+    @include icon-content("\e8c3");
+    --icon-font-family: #{$oi-font-family};
+}
+
+// ================================
+// UTILITY CLASSES & ADVANCED FEATURES
+// ================================
+
+// Dynamic size generation using SCSS loops
+@each $name, $size in $icon-sizes {
+    .fa-#{$name},
+    .oi-#{$name} {
+        font-size: $size;
+
+        @if $name == 'lg' {
+            // line-height: 0.75em;
+            // vertical-align: -15%;
+
+            line-height: 0.5;
+            vertical-align: -40%;
+        }
+    }
+}
+
+// fa-stack, what should we do ?
+// Temporary kept for compatibility.
+.oi-stack, .fa-stack {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    vertical-align: middle;
+}
+
+.oi-stack-1x, .oi-stack-2x,
+.fa-stack-1x, .fa-stack-2x {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+
+.oi-stack-2x, .fa-stack-2x {
+    font-size: 2em;
+}
+
+// Fixed width for consistent alignment
+// To remove after the switch
+.fa-fw {
+    width: $fa-fw-width;
+    text-align: center;
+}
+
+// Rotation classes using mixin
+.fa-rotate-90,
+.oi-rotate-90 {
+    @include rotate(90);
+}
+
+.fa-rotate-180,
+.oi-rotate-180 {
+    @include rotate(180);
+}
+
+.fa-rotate-270,
+.oi-rotate-270 {
+    @include rotate(270);
+}
+
+// Flipping classes using mixin
+.fa-flip-horizontal,
+.oi-flip-horizontal {
+    @include flip(-1, 1);
+}
+
+.fa-flip-vertical,
+.oi-flip-vertical {
+    @include flip(1, -1);
+}
+
+// Spinning animation
+.fa-spin,
+.oi-spin {
+    -webkit-animation: fa-spin 2s infinite linear;
+    animation: fa-spin 2s infinite linear;
+}
+
+@-webkit-keyframes fa-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+    }
+}
+
+@keyframes fa-spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(359deg);
+    }
+}
+
+// ================================
+// MATERIAL SYMBOLS ADVANCED FEATURES
+// ================================
+
+// Predefined Material Symbols variants
+.oi-filled {
+    --o-mi-fill: 1;
+}
+.oi-outlined {
+    --o-mi-fill: 0;
+}
diff --git a/addons/web/static/src/webclient/menus/menu_command_item.xml b/addons/web/static/src/webclient/menus/menu_command_item.xml
index 35f907acd0c427..5ff752e5e0cc74 100644
--- a/addons/web/static/src/webclient/menus/menu_command_item.xml
+++ b/addons/web/static/src/webclient/menus/menu_command_item.xml
@@ -5,7 +5,7 @@
     <div class="o_command_default position-relative d-flex align-items-center px-4 py-2 cursor-pointer">
       <img t-if="this.props.webIconData" class="me-2 o_app_icon position-relative rounded-1" t-attf-src="{{this.props.webIconData}}"/>
       <div t-else="" class="me-2 o_app_icon d-flex align-items-center justify-content-center">
-        <i t-att-class="`${this.props.webIcon.iconClass} fa-2x`" t-attf-style="color:{{this.props.webIcon.color}}"></i>
+        <i class="oi oi-2x" t-att-data-icon="`${this.props.webIcon.iconClass}`" t-attf-style="color:{{this.props.webIcon.color}}"></i>
       </div>
       <t t-slot="name"/>
       <span class="ms-auto flex-shrink-0">
diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss
index b96c6b05a1482d..8dcc0b976c3e8e 100644
--- a/addons/web/static/src/webclient/navbar/navbar.scss
+++ b/addons/web/static/src/webclient/navbar/navbar.scss
@@ -139,8 +139,15 @@
             }
 
             .o_menu_brand_icon {
-                width: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2} + #{map-get($spacers, 1)});
+                --MenuBrandIcon-width: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2} + #{map-get($spacers, 1)});
+
+                width: var(--MenuBrandIcon-width);
+                font-size: var(--MenuBrandIcon-width);
                 object-fit: cover;
+
+                &:before {
+                    transform: none;
+                }
             }
         }
     }
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index 39e0d9e4f0ab50..b3a7aad5953cc4 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -82,7 +82,7 @@
       <div t-if="!this.isScopedApp" class="o_navbar_apps_menu">
         <Dropdown>
           <button data-hotkey="h" title="Home Menu" data-available-offline="">
-            <i class="oi oi-apps" />
+            <i class="oi" data-icon="apps"/>
           </button>
           <t t-set-slot="content">
             <DropdownItem
@@ -102,15 +102,15 @@
   </t>
 
   <t t-name="web.NavBar.AppsMenu.Sidebar">
-    <i class="fa fa-bars" aria-hidden="true"/>
+    <i class="oi" data-icon="menu" aria-hidden="true"/>
     <t t-custom-portal="'body'">
       <Transition name="'o-app-menu-sidebar'" visible="this.state.isAppMenuSidebarOpened" leaveDuration="200" t-slot-scope="transition">
         <div class="o_app_menu_sidebar position-fixed top-0 bottom-0 end-100 d-flex flex-column flex-nowrap" t-att-class="transition.className" t-on-touchstart.stop="this._onSwipeStart" t-on-touchend.stop="this._onSwipeEnd">
           <div class="o_sidebar_topbar d-flex align-items-center justify-content-between flex-shrink-0 py-0 fs-4">
               <small class="d-flex align-items-center justify-content-between ms-2">
-                  <a href="/odoo" class="btn btn-primary" t-on-click.prevent="this.onAllAppsBtnClick"><i class="oi oi-apps"></i><span class="px-2">All Apps</span></a>
+                  <a href="/odoo" class="btn btn-primary" t-on-click.prevent="this.onAllAppsBtnClick"><i class="oi" data-icon="apps"></i><span class="px-2">All Apps</span></a>
               </small>
-              <button class="o_sidebar_close oi oi-close btn d-flex align-items-center h-100 bg-transparent border-0 fs-2 text-reset" aria-label="Close menu" title="Close menu" t-on-click.stop="this._closeAppMenuSidebar" data-available-offline=""/>
+              <button class="o_sidebar_close oi btn d-flex align-items-center h-100 bg-transparent border-0 fs-2 text-reset" data-icon="close" aria-label="Close menu" title="Close menu" t-on-click.stop="this._closeAppMenuSidebar" data-available-offline=""/>
           </div>
           <nav class="o_burger_menu_content flex-grow-1 flex-shrink-1 overflow-auto o_burger_menu_app">
                 <div t-if="!this.state.isAllAppsMenuOpened and this.currentApp" class="d-flex align-items-center m-3 mb-0">
@@ -240,7 +240,7 @@
     <div class="o_menu_sections_more">
       <Dropdown>
         <button title="More Menu" t-att-data-hotkey="hotkey">
-          <i class="fa fa-plus"/>
+          <i class="oi" data-icon="add"/>
         </button>
 
         <t t-set-slot="content">
diff --git a/addons/web/static/src/webclient/offline_systray/offline_systray.xml b/addons/web/static/src/webclient/offline_systray/offline_systray.xml
index f127affd182383..ecd9bb8ad8f5bc 100644
--- a/addons/web/static/src/webclient/offline_systray/offline_systray.xml
+++ b/addons/web/static/src/webclient/offline_systray/offline_systray.xml
@@ -20,7 +20,7 @@
                 data-available-offline=""
                 t-on-click="() => this.offlineService.checkConnection()"
                 data-tooltip="Click to check connection and Sync">
-                <i t-attf-class="{{ this.labelIcon }} me-1"/><t t-esc="this.labelText"></t><i t-if="this.offlineService.hasScheduledCalls" class="fa fa-caret-down ms-2"/>
+                <i t-attf-class="{{ this.labelIcon }} me-1"/><t t-esc="this.labelText"></t><i t-if="this.offlineService.hasScheduledCalls" class="oi ms-2" data-icon="arrow_drop_down"/>
             </button>
             <t t-set-slot="content">
                 <div class="o_offline_systray_content px-2">
@@ -56,7 +56,8 @@
                                 </div>
                                 <div>
                                     <button
-                                        class="btn btn-link text-danger fa fa-trash py-0"
+                                        class="btn btn-link text-danger oi oi-filled py-0"
+                                        data-icon="delete"
                                         title="Discard offline changes"
                                         data-available-offline=""
                                         t-on-click.stop="() => this.discard(element.id)"/>
diff --git a/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.js b/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.js
index ab60edb2f2b547..31f44fc9a5ba9a 100644
--- a/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.js
+++ b/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.js
@@ -52,13 +52,15 @@ class ResUserGroupIdsPrivilegeField extends Component {
             btn: true,
             "btn-link": true,
             "py-0": true,
-            fa: true,
-            "fa-info-circle": !isDisjoint,
-            "fa-exclamation-triangle": isDisjoint,
+            "oi": true,
             "link-danger": isDisjoint,
         };
     }
 
+    get infoButtonIcon() {
+        return this.isDisjoint ? "warning" : "info";
+    }
+
     get isDisjoint() {
         return this.disjointGroupIds.length > 0;
     }
diff --git a/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.scss b/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.scss
index fd48c8ce1ef06e..62cdf4d9baa9b1 100644
--- a/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.scss
+++ b/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.scss
@@ -16,7 +16,7 @@
         @include o-custom-checkbox($danger);
     }
 
-    .o_group_info_button.fa-info-circle {
+    .o_group_info_button[data-icon="info"] {
         opacity: 0.2;
         &:hover {
             opacity: 1;
diff --git a/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.xml b/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.xml
index aa04a85b6479a1..94a10379e39f61 100644
--- a/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.xml
+++ b/addons/web/static/src/webclient/res_user_group_ids_field/res_user_group_ids_privilege_field.xml
@@ -5,7 +5,7 @@
     <div class="d-flex justify-content-between w-100" t-att-class="{'o_is_implied': this.isImplied, 'o_is_disjoint': this.isDisjoint}">
         <SelectionField t-if="this.type == 'selection'" t-props="this.props" placeholder="this.impliedGroupDisplayName"/>
         <BooleanField t-else="" t-props="this.props"/>
-        <button t-if="this.isDebug" t-att-class="this.infoButtonClassnames" type="button" t-on-click="this.onClickInfoButton" tabindex="-1"/>
+        <button t-if="this.isDebug" t-att-class="this.infoButtonClassnames" t-att-data-icon="this.infoButtonIcon" type="button" t-on-click="this.onClickInfoButton" tabindex="-1"/>
     </div>
 </t>
 
diff --git a/addons/web/static/src/webclient/settings_form_view/fields/upgrade_dialog.xml b/addons/web/static/src/webclient/settings_form_view/fields/upgrade_dialog.xml
index 73d11513763321..d0a02b98b50804 100644
--- a/addons/web/static/src/webclient/settings_form_view/fields/upgrade_dialog.xml
+++ b/addons/web/static/src/webclient/settings_form_view/fields/upgrade_dialog.xml
@@ -7,12 +7,12 @@
                 <div class="w-100 w-md-50">
                     Get this feature and much more with Odoo Enterprise!
                     <ul class="list-unstyled">
-                        <li><i class="fa fa-check"></i> Access to all Enterprise Apps</li>
-                        <li><i class="fa fa-check"></i> New design</li>
-                        <li><i class="fa fa-check"></i> Mobile support</li>
-                        <li><i class="fa fa-check"></i> Upgrade to future versions</li>
-                        <li><i class="fa fa-check"></i> Bugfixes guarantee</li>
-                        <li><a href="http://www.odoo.com/editions?utm_source=db&amp;utm_medium=enterprise" target="_blank"><i class="fa fa-plus"></i> And more</a></li>
+                        <li><i class="oi" data-icon="check"></i> Access to all Enterprise Apps</li>
+                        <li><i class="oi" data-icon="check"></i> New design</li>
+                        <li><i class="oi" data-icon="check"></i> Mobile support</li>
+                        <li><i class="oi" data-icon="check"></i> Upgrade to future versions</li>
+                        <li><i class="oi" data-icon="check"></i> Bugfixes guarantee</li>
+                        <li><a href="http://www.odoo.com/editions?utm_source=db&amp;utm_medium=enterprise" target="_blank"><i class="oi" data-icon="add"></i> And more</a></li>
                     </ul>
                 </div>
                 <div class="o_video_embed w-100 w-md-50 ratio ratio-16x9">
diff --git a/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml b/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
index 6cff3f13ea0bb8..3ae0991fffbf4e 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
+++ b/addons/web/static/src/webclient/settings_form_view/settings_form_view.xml
@@ -8,7 +8,7 @@
             <t t-set-slot="control-panel-actions">
                 <div class="o_cp_searchview d-flex w-100" role="search">
                     <div class="o_searchview form-control d-flex align-items-center py-1" role="search" aria-autocomplete="list">
-                        <i class="o_searchview_icon oi oi-search me-2" role="img" aria-label="Search..." title="Search..." />
+                        <i class="o_searchview_icon oi me-2" data-icon="search" role="img" aria-label="Search..." title="Search..." />
                         <div class="o_searchview_input_container d-flex flex-grow-1 flex-wrap gap-1">
                             <input type="text" class="o_searchview_input o_input flex-grow-1 w-auto border-0" accesskey="Q" placeholder="Search..." role="searchbox" t-custom-model="this.searchState.value" t-custom-ref="autofocus"/>
                         </div>
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_item.xml b/addons/web/static/src/webclient/switch_company_menu/switch_company_item.xml
index 250f617783d648..a4a91d54d8fb35 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_item.xml
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_item.xml
@@ -23,7 +23,7 @@
             t-on-click.stop="() => this.toggleCompany()"
         >
             <span class="btn border-0 px-2" t-att-class="this.isCompanyAllowed ? 'btn-link text-primary' : 'disabled'">
-                <i class="fa fa-fw py-1" t-att-class="this.isCompanySelected ? 'fa-check-square text-primary' : 'fa-square-o'"/>
+                <i class="oi oi-fw py-1" t-att-class="{'oi-filled text-primary': this.isCompanySelected}" t-att-data-icon="this.isCompanySelected ? 'check_box' : 'square'"/>
             </span>
         </div>
 
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.js b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.js
index 2763e432926a47..99aa9294a2ffc1 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.js
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.js
@@ -272,13 +272,21 @@ export class SwitchCompanyMenu extends Component {
         if (
             this.visibleCompanies.every((c) => this.companySelector.isCompanySelected(c.company.id))
         ) {
-            return "fa-check-square text-primary";
+            return "check_box";
         } else if (
             this.visibleCompanies.some((c) => this.companySelector.isCompanySelected(c.company.id))
         ) {
-            return "fa-minus-square-o";
+            return "indeterminate_check_box";
         } else {
-            return "fa-square-o";
+            return "square";
+        }
+    }
+
+    get selectAllIconClass() {
+        if (
+            this.visibleCompanies.every((c) => this.companySelector.isCompanySelected(c.company.id))
+        ) {
+            return "oi-filled text-primary";
         }
     }
 
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 0d6a9254849c9e..17970cecf1b9cb 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
@@ -13,7 +13,7 @@
             disabled="this.isSingleCompany"
         >
             <button data-hotkey="shift+u" t-att-disabled="this.isSingleCompany" t-att-title="this.user.activeCompany.name" class="o_switch_company_menu d-none d-md-flex">
-                <i class="fa fa-building d-lg-none"/>
+                <i class="oi oi-filled d-lg-none" data-icon="business"/>
                 <span class="oe_topbar_name d-none d-lg-block text-truncate" t-out="this.user.activeCompany.name"/>
             </button>
 
@@ -34,14 +34,14 @@
             t-on-click="() => this.selectAll()"
         >
             <span class="btn border-0 pt-2 px-2" t-att-class="this.selectAllClass">
-                <i class="fa fa-fw" t-att-class="this.selectAllIcon"/>
+                <i class="oi oi-fw" t-att-class="this.selectAllIconClass" t-att-data-icon="this.selectAllIcon"/>
             </span>
         </div>
         <div
             class="form-control d-flex align-items-center py-1"
             role="search"
         >
-            <i class="oi oi-search me-2" role="img" aria-label="Search..." title="Search..."/>
+            <i class="oi me-2" data-icon="search" role="img" aria-label="Search..." title="Search..."/>
             <div class="d-flex flex-grow-1 flex-wrap gap-1">
                 <input
                     t-on-input="this.onSearch"
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.xml b/addons/web/static/src/webclient/user_menu/user_menu.xml
index be66c6c8ac52db..284ef0a81a7ec5 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.xml
+++ b/addons/web/static/src/webclient/user_menu/user_menu.xml
@@ -9,7 +9,7 @@
                     <small class="oe_topbar_name d-none ms-2 text-start smaller lh-1 text-truncate"  t-att-class="{'d-lg-inline-block' : this.env.debug}" style="max-width: 200px">
                         <t t-out="this.userName"/>
                         <mark class="d-block font-monospace text-truncate">
-                            <i class="fa fa-database oi-small me-1"/><t t-out="this.dbName"/>
+                            <i class="oi oi-sm me-1" data-icon="database"/><t t-out="this.dbName"/>
                         </mark>
                     </small>
                 </button>
diff --git a/addons/web/static/src/webclient/user_menu/user_menu_items.js b/addons/web/static/src/webclient/user_menu/user_menu_items.js
index 1444fffc2f7761..18d8aa8c8416ca 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu_items.js
+++ b/addons/web/static/src/webclient/user_menu/user_menu_items.js
@@ -145,7 +145,7 @@ export function shareUrlMenuItem(env) {
         description: markup`
             <div class="d-flex align-items-center justify-content-between w-100">
                 <span>${_t("Share")}</span>
-                <span class="fa fa-share-alt"></span>
+                <span class="oi" data-icon="family_history"></span>
             </div>`,
         callback: router.shareUrl,
         sequence: 25,
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index 81847b8de1823c..f6cc5ba7fae242 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -79,10 +79,10 @@ kbd {
     &:not(.dropdown-item_active_noarrow) {
       &:before {
         @include o-position-absolute(0);
-        transform: translate(-1.5em, 90%);
-        font: .7em/1em FontAwesome;
+        transform: translate(-1.25em, 50%);
+        font: 1em/1 "material_symbols_sharp";
         color: $link-color;
-        content: "\f00c";
+        content: "check";
       }
 
       &.disabled:before {
@@ -97,11 +97,11 @@ kbd {
   &.active, &.selected {
     &::after {
       @include o-position-absolute(0, $left: 90%);
-      transform: translate(0, 90%);
-      font: .7em/1em FontAwesome;
+      transform: translate(0, 50%);
+      font: 1em/1 "material_symbols_sharp";
       color: $link-color;
       display: inline-block;
-      content: "\f00c";
+      content: "check";
       border: 0;
     }
 
@@ -149,7 +149,7 @@ kbd {
         }
       }
 
-      &:has(.fa-fw:only-child, .oi-fw:only-child) {
+      &:has(.oi-fw:only-child, .oi-fw:only-child) {
           padding: $o-touch-btn-with-icon-padding;
       }
   }
diff --git a/addons/web/static/tests/_framework/search_test_helpers.js b/addons/web/static/tests/_framework/search_test_helpers.js
index 0809dd1cb6ebda..d45bf3ead5e834 100644
--- a/addons/web/static/tests/_framework/search_test_helpers.js
+++ b/addons/web/static/tests/_framework/search_test_helpers.js
@@ -13,7 +13,7 @@ const ensureSearchView = async () => {
         queryAll`.o_control_panel_navigation`.length &&
         !queryAll`.o_searchview`.length
     ) {
-        await contains(`.o_control_panel_navigation .fa-search`).click();
+        await contains(`.o_control_panel_navigation [data-icon="search"]`).click();
     }
 };
 
@@ -217,7 +217,7 @@ export async function toggleFavoriteMenu() {
  */
 export async function editFavorite(text) {
     await ensureSearchBarMenu();
-    await contains(`.o_favorite_menu .o_menu_item:text(${text}) i.fa-pencil`, {
+    await contains(`.o_favorite_menu .o_menu_item:text(${text}) i[data-icon="edit"]`, {
         visible: false,
     }).click();
 }
diff --git a/addons/web/static/tests/_framework/start.hoot.js b/addons/web/static/tests/_framework/start.hoot.js
index a9c3729f5ba71a..2f3d78397fce40 100644
--- a/addons/web/static/tests/_framework/start.hoot.js
+++ b/addons/web/static/tests/_framework/start.hoot.js
@@ -13,14 +13,14 @@ function beforeFocusRequired(test) {
 }
 
 definePreset("desktop", {
-    icon: "fa-desktop",
+    icon: "desktop_windows",
     label: "Desktop",
     size: [1366, 768],
     tags: ["-mobile"],
     touch: false,
 });
 definePreset("mobile", {
-    icon: "fa-mobile font-bold",
+    icon: "smartphone",
     label: "Mobile",
     size: [375, 667],
     tags: ["-desktop"],
diff --git a/addons/web/static/tests/core/action_swiper.test.js b/addons/web/static/tests/core/action_swiper.test.js
index 2e4a12f62f1f75..bf7e0712b9a5cc 100644
--- a/addons/web/static/tests/core/action_swiper.test.js
+++ b/addons/web/static/tests/core/action_swiper.test.js
@@ -54,7 +54,7 @@ test("render only its target on non-touch devices", async () => {
         static components = { ActionSwiper };
         static template = xml`
                 <div class="d-flex">
-                    <ActionSwiper onLeftSwipe="{action: () => {}, icon: 'fa-circle', bgColor: 'bg-warning'}">
+                    <ActionSwiper onLeftSwipe="{action: () => {}, icon: 'circle', icon_class: 'oi-filled', bgColor: 'bg-warning'}">
                         <div class="target-component"/>
                     </ActionSwiper>
                 </div>
@@ -70,7 +70,8 @@ test("only render the necessary divs", async () => {
         props: {
             onRightSwipe: {
                 action: () => {},
-                icon: "fa-circle",
+                icon: "circle",
+                icon_class: "oi-filled",
                 bgColor: "bg-warning",
             },
             slots: {},
@@ -82,7 +83,8 @@ test("only render the necessary divs", async () => {
         props: {
             onLeftSwipe: {
                 action: () => {},
-                icon: "fa-circle",
+                icon: "circle",
+                icon_class: "oi-filled",
                 bgColor: "bg-warning",
             },
             slots: {},
@@ -100,7 +102,8 @@ test("render with the height of its content", async () => {
                 <div class="o-container d-flex" style="width: 200px; height: 200px; overflow: auto">
                     <ActionSwiper onRightSwipe = "{
                         action: () => this.onRightSwipe(),
-                        icon: 'fa-circle',
+                        icon: 'circle',
+                        icon_class: 'oi-filled',
                         bgColor: 'bg-warning'
                     }">
                         <div class="target-component" style="height: 800px">This element is very high and
@@ -131,7 +134,8 @@ test("can perform actions by swiping to the right", async () => {
             <div class="d-flex">
                 <ActionSwiper onRightSwipe = "{
                     action: () => this.onRightSwipe(),
-                    icon: 'fa-circle',
+                    icon: 'circle',
+                    icon_class: 'oi-filled',
                     bgColor: 'bg-warning'
                 }">
                     <div class="target-component" style="width: 200px; height: 80px">Test</div>
@@ -193,12 +197,12 @@ test("can perform actions by swiping in both directions", async () => {
                         <ActionSwiper
                             onRightSwipe = "{
                                 action: () => this.onRightSwipe(),
-                                icon: 'fa-circle',
+                                icon_class: 'oi-filled',
                                 bgColor: 'bg-warning'
                             }"
                             onLeftSwipe = "{
                                 action: () => this.onLeftSwipe(),
-                                icon: 'fa-check',
+                                icon: 'check',
                                 bgColor: 'bg-success'
                             }">
                                 <div class="target-component" style="width: 250px; height: 80px">Swipe in both directions</div>
@@ -271,12 +275,13 @@ test("invert the direction of swipes when language is rtl", async () => {
                         <ActionSwiper
                             onRightSwipe = "{
                                 action: () => this.onRightSwipe(),
-                                icon: 'fa-circle',
+                                icon: 'circle',
+                                icon_class: 'oi-filled',
                                 bgColor: 'bg-warning'
                             }"
                             onLeftSwipe = "{
                                 action: () => this.onLeftSwipe(),
-                                icon: 'fa-check',
+                                icon: 'check',
                                 bgColor: 'bg-success'
                             }">
                                 <div class="target-component" style="width: 250px; height: 80px">Swipe in both directions</div>
@@ -311,12 +316,12 @@ test("swiping when the swiper contains scrollable areas", async () => {
                 <ActionSwiper
                     onRightSwipe = "{
                         action: () => this.onRightSwipe(),
-                        icon: 'fa-circle',
+                        icon_class: 'oi-filled',
                         bgColor: 'bg-warning'
                     }"
                     onLeftSwipe = "{
                         action: () => this.onLeftSwipe(),
-                        icon: 'fa-check',
+                        icon: 'check',
                         bgColor: 'bg-success'
                     }">
                         <div class="target-component" style="width: 200px; height: 300px">
@@ -479,12 +484,12 @@ test("preventing swipe on scrollable areas when language is rtl", async () => {
                 <ActionSwiper
                     onRightSwipe="{
                         action: () => this.onRightSwipe(),
-                        icon: 'fa-circle',
+                        icon_class: 'oi-filled',
                         bgColor: 'bg-warning'
                     }"
                     onLeftSwipe="{
                         action: () => this.onLeftSwipe(),
-                        icon: 'fa-check',
+                        icon: 'check',
                         bgColor: 'bg-success'
                     }">
                         <div class="target-component" style="width: 200px; height: 300px">
@@ -627,7 +632,7 @@ const prom = new Deferred();
                 <div class="d-flex">
                    <ActionSwiper animationType="'forwards'" onRightSwipe = "{
                        action: () => this.onRightSwipe(),
-                       icon: 'fa-circle',
+                       icon_class: 'oi-filled',
                        bgColor: 'bg-warning',
                    }">
                        <span>test</span>
diff --git a/addons/web/static/tests/core/autocomplete.test.js b/addons/web/static/tests/core/autocomplete.test.js
index e26d0050a8ac76..cea5bd8e894c21 100644
--- a/addons/web/static/tests/core/autocomplete.test.js
+++ b/addons/web/static/tests/core/autocomplete.test.js
@@ -377,22 +377,22 @@ test("open twice should not display previous results", async () => {
     await runAllTimers();
     expect(".o-autocomplete .dropdown-menu").toHaveCount(1);
     expect(".o-autocomplete--dropdown-item").toHaveCount(1);
-    expect(".o-autocomplete--dropdown-item .fa-spin").toHaveCount(1); // loading
+    expect(".o-autocomplete--dropdown-item .oi-spin").toHaveCount(1); // loading
 
     def.resolve();
     await animationFrame();
     expect(".o-autocomplete--dropdown-item").toHaveCount(3);
-    expect(".fa-spin").toHaveCount(0);
+    expect(".oi-spin").toHaveCount(0);
 
     def = new Deferred();
     await contains(".o-autocomplete input").fill("A", { confirm: false });
     await runAllTimers();
     expect(".o-autocomplete--dropdown-item").toHaveCount(1);
-    expect(".o-autocomplete--dropdown-item .fa-spin").toHaveCount(1); // loading
+    expect(".o-autocomplete--dropdown-item .oi-spin").toHaveCount(1); // loading
     def.resolve();
     await runAllTimers();
     expect(".o-autocomplete--dropdown-item").toHaveCount(2);
-    expect(".fa-spin").toHaveCount(0);
+    expect(".oi-spin").toHaveCount(0);
 
     await contains(queryFirst(".o-autocomplete--dropdown-item")).click();
     expect(".o-autocomplete .dropdown-menu").toHaveCount(0);
@@ -403,7 +403,7 @@ test("open twice should not display previous results", async () => {
     await runAllTimers();
     expect(".o-autocomplete .dropdown-menu").toHaveCount(1);
     expect(".o-autocomplete--dropdown-item").toHaveCount(1);
-    expect(".o-autocomplete--dropdown-item .fa-spin").toHaveCount(1); // loading
+    expect(".o-autocomplete--dropdown-item .oi-spin").toHaveCount(1); // loading
 });
 
 test("press enter on autocomplete with empty source", async () => {
diff --git a/addons/web/static/tests/core/color_picker.test.js b/addons/web/static/tests/core/color_picker.test.js
index c9743c0c966506..f54daeb89d1a4c 100644
--- a/addons/web/static/tests/core/color_picker.test.js
+++ b/addons/web/static/tests/core/color_picker.test.js
@@ -22,7 +22,7 @@ test("basic rendering", async () => {
     });
     expect(".o_font_color_selector").toHaveCount(1);
     expect(".o_font_color_selector .btn-tab").toHaveCount(2);
-    expect(".o_font_color_selector .btn.fa-trash").toHaveCount(1);
+    expect(".o_font_color_selector .btn[data-icon='delete'].oi-filled").toHaveCount(1);
     expect(".o_font_color_selector .o_colorpicker_section").toHaveCount(1);
     expect(".o_font_color_selector .o_colorpicker_section .o_color_button").toHaveCount(5);
     expect(".o_font_color_selector .o_color_section .o_color_button[data-color]").toHaveCount(
diff --git a/addons/web/static/tests/core/commands/command_palette.test.js b/addons/web/static/tests/core/commands/command_palette.test.js
index ba301d6d6a6a25..f70816b7fe4f7e 100644
--- a/addons/web/static/tests/core/commands/command_palette.test.js
+++ b/addons/web/static/tests/core/commands/command_palette.test.js
@@ -1562,15 +1562,15 @@ test("display spinner while loading results from providers", async () => {
     });
 
     await animationFrame();
-    expect(".o_command_palette_search i.oi.oi-search").toHaveCount(1);
-    expect(".o_command_palette_search i.fa.fa-circle-o-notch").toHaveCount(0);
+    expect(".o_command_palette_search i[data-icon='search']").toHaveCount(1);
+    expect(".o_command_palette_search i[data-icon='autorenew']").toHaveCount(0);
     await click(".o_command_palette_search input");
     await edit("? blabla");
     await runAllTimers();
-    expect(".o_command_palette_search i.oi.oi-search").toHaveCount(0);
-    expect(".o_command_palette_search i.fa.fa-circle-o-notch").toHaveCount(1);
+    expect(".o_command_palette_search i[data-icon='search']").toHaveCount(0);
+    expect(".o_command_palette_search i[data-icon='autorenew']").toHaveCount(1);
     provideDef.resolve();
     await animationFrame();
-    expect(".o_command_palette_search i.oi.oi-search").toHaveCount(1);
-    expect(".o_command_palette_search i.fa.fa-circle-o-notch").toHaveCount(0);
+    expect(".o_command_palette_search i[data-icon='search']").toHaveCount(1);
+    expect(".o_command_palette_search i[data-icon='autorenew']").toHaveCount(0);
 });
diff --git a/addons/web/static/tests/core/debug/debug_manager.test.js b/addons/web/static/tests/core/debug/debug_manager.test.js
index 20c34e265feeeb..f11cc13f6e4357 100644
--- a/addons/web/static/tests/core/debug/debug_manager.test.js
+++ b/addons/web/static/tests/core/debug/debug_manager.test.js
@@ -146,7 +146,7 @@ describe("DebugMenu", () => {
             props: { close: () => {} },
         });
         expect(".o_dialog").toHaveCount(1);
-        expect(".o_dialog .o_debug_manager .fa-bug").toHaveCount(0);
+        expect(".o_dialog .o_debug_manager [data-icon='bug_report']").toHaveCount(0);
     });
 
     test("Display the DebugMenu correctly in a ActionDialog if debug mode is enabled", async () => {
@@ -190,7 +190,7 @@ describe("DebugMenu", () => {
             props: { close: () => {} },
         });
         expect(".o_dialog").toHaveCount(1);
-        expect(".o_dialog .o_debug_manager .fa-bug").toHaveCount(1);
+        expect(".o_dialog .o_debug_manager [data-icon='bug_report']").toHaveCount(1);
         await contains(".o_dialog .o_debug_manager button").click();
         expect(".dropdown-menu .dropdown-item").toHaveCount(2);
         // Check that global debugManager elements are not displayed (global_1)
diff --git a/addons/web/static/tests/core/domain_field.test.js b/addons/web/static/tests/core/domain_field.test.js
index 4ab7d6b84d3578..c22598c74eea35 100644
--- a/addons/web/static/tests/core/domain_field.test.js
+++ b/addons/web/static/tests/core/domain_field.test.js
@@ -603,13 +603,13 @@ test("domain field: does not wait for the count to render", async function () {
             </form>`,
     });
 
-    expect(".o_field_domain_panel .fa-circle-o-notch.fa-spin").toHaveCount(1);
+    expect(".o_field_domain_panel [data-icon='autorenew'].oi-spin").toHaveCount(1);
     expect(".o_field_domain_panel .o_domain_show_selection_button").toHaveCount(0);
 
     def.resolve();
     await animationFrame();
 
-    expect(".o_field_domain_panel .fa-circle-o-notch .fa-spin").toHaveCount(0);
+    expect(".o_field_domain_panel [data-icon='autorenew'] .oi-spin").toHaveCount(0);
     expect(".o_field_domain_panel .o_domain_show_selection_button").toHaveCount(1);
     expect(".o_domain_show_selection_button").toHaveText("2 record(s)");
 });
@@ -993,7 +993,7 @@ test("debug input corrections don't need a focus out to be saved", async functio
     await contains(".o_form_button_save").click();
     expect(".o_field_domain").toHaveClass("o_field_invalid");
     await contains(SELECTORS.debugArea).edit("[('id', '=', 1)]", { confirm: false });
-    expect(".o_form_status_indicator span i.fa-warning").toHaveCount(0);
+    expect(".o_form_status_indicator span i[data-icon='warning']").toHaveCount(0);
     expect(".o_form_button_save[disabled]").toHaveCount(0);
     expect(".o_form_button_save").toHaveCount(1);
 });
@@ -1141,7 +1141,7 @@ test("foldable domain field unfolds and hides caret when domain is invalid", asy
             </form>`,
     });
     expect(".o_field_domain span").toHaveText("Invalid domain");
-    expect(".fa-caret-down").toHaveCount(0);
+    expect("[data-icon='arrow_drop_down']").toHaveCount(0);
     expect(".o_domain_selector_row").toHaveText("This domain is not supported.\nReset domain");
     await contains(".o_domain_selector_row button").click();
     expect(".o_field_domain span:first").toHaveText("Match all records");
diff --git a/addons/web/static/tests/core/dropdown/dropdown.test.js b/addons/web/static/tests/core/dropdown/dropdown.test.js
index 93f0133412b127..12fc64d6c47805 100644
--- a/addons/web/static/tests/core/dropdown/dropdown.test.js
+++ b/addons/web/static/tests/core/dropdown/dropdown.test.js
@@ -788,7 +788,7 @@ test("don't close dropdown outside the active element", async () => {
     expect(DROPDOWN_MENU).toHaveCount(1);
 
     if (getMockEnv().isSmall) {
-        await click(".modal-dialog .oi-arrow-left");
+        await click(".modal-dialog [data-icon='west']");
     } else {
         await click(".modal-dialog .btn-close");
     }
diff --git a/addons/web/static/tests/core/dropdown/dropdown_item.test.js b/addons/web/static/tests/core/dropdown/dropdown_item.test.js
index 7660edc43111b4..2b4926e9a0d086 100644
--- a/addons/web/static/tests/core/dropdown/dropdown_item.test.js
+++ b/addons/web/static/tests/core/dropdown/dropdown_item.test.js
@@ -135,8 +135,8 @@ test("'active' and 'selected' classes shows a checked icon", async () => {
     await animationFrame();
 
     expect(getHexcode(".o-dropdown-item.no-check", ":before")).toEqual("none");
-    expect(getHexcode(".o-dropdown-item.selected", ":before")).toEqual("\\f00c");
-    expect(getHexcode(".o-dropdown-item.active", ":before")).toEqual("\\f00c");
+    expect(getHexcode(".o-dropdown-item.selected", ":before")).toEqual("\\63");
+    expect(getHexcode(".o-dropdown-item.active", ":before")).toEqual("\\63");
 });
 
 test.tags("mobile");
diff --git a/addons/web/static/tests/core/errors/error_dialogs.test.js b/addons/web/static/tests/core/errors/error_dialogs.test.js
index 8eb709112972a8..902dd46a70fb0b 100644
--- a/addons/web/static/tests/core/errors/error_dialogs.test.js
+++ b/addons/web/static/tests/core/errors/error_dialogs.test.js
@@ -131,7 +131,7 @@ test("button clipboard copy error traceback", async () => {
     });
     await click("main summary");
     await animationFrame();
-    await click(".fa-clipboard");
+    await click("[data-icon='assignment']");
     await tick();
 });
 
@@ -156,7 +156,7 @@ test("Display a tooltip on clicking copy button", async () => {
     });
     await click("main summary");
     await animationFrame();
-    await click(".fa-clipboard");
+    await click("[data-icon='assignment']");
 });
 
 test("WarningDialog", async () => {
diff --git a/addons/web/static/tests/core/install_scoped_app.test.js b/addons/web/static/tests/core/install_scoped_app.test.js
index fbf8f6ddf2b2cc..84c25fc8154628 100644
--- a/addons/web/static/tests/core/install_scoped_app.test.js
+++ b/addons/web/static/tests/core/install_scoped_app.test.js
@@ -63,17 +63,17 @@ test("Installation page displays the app info correctly", async () => {
     expect(".o_install_scoped_app").toHaveCount(1);
     expect(".o_install_scoped_app h1").toHaveText("My App");
     expect(".o_install_scoped_app img").toHaveAttribute("data-src", "/fake_image_src");
-    expect(".fa-pencil").toHaveCount(0);
+    expect("[data-icon='edit']").toHaveCount(0);
     expect("button.btn-primary").toHaveCount(0);
     expect("div.bg-info").toHaveCount(1);
     expect("div.bg-info").toHaveText("You can install the app from the browser menu");
     browser.dispatchEvent(beforeInstallPromptEvent);
     await animationFrame();
-    expect(".fa-pencil").toHaveCount(1);
+    expect("[data-icon='edit']").toHaveCount(1);
     expect("div.bg-info").toHaveCount(0);
     expect("button.btn-primary").toHaveCount(1);
     expect("button.btn-primary").toHaveText("Install");
-    await contains(".fa-pencil").click();
+    await contains("[data-icon='edit']").click();
     await contains("input").edit("<Otto&", { confirm: "blur" });
     expect.verifySteps(["URL replace"]);
 });
diff --git a/addons/web/static/tests/core/model_field_selector.test.js b/addons/web/static/tests/core/model_field_selector.test.js
index d12bac5e09148a..04d1a1e0e79a00 100644
--- a/addons/web/static/tests/core/model_field_selector.test.js
+++ b/addons/web/static/tests/core/model_field_selector.test.js
@@ -870,28 +870,28 @@ test("clear button (allowEmpty=true)", async () => {
 
     expect(getModelFieldSelectorValues()).toEqual(["baaarrr"]);
     expect(".o_model_field_selector_warning").toHaveCount(1);
-    expect(".o_model_field_selector .fa.fa-times").toHaveCount(1);
+    expect(".o_model_field_selector [data-icon='close']").toHaveCount(1);
 
     // clear when popover is not open
-    await contains(".o_model_field_selector .fa.fa-times").click();
+    await contains(".o_model_field_selector [data-icon='close']").click();
     expect(getModelFieldSelectorValues()).toEqual([]);
     expect(".o_model_field_selector_warning").toHaveCount(0);
-    expect(".o_model_field_selector .fa.fa-times").toHaveCount(0);
+    expect(".o_model_field_selector [data-icon='close']").toHaveCount(0);
     expect.verifySteps([`path is ""`]);
 
     await openModelFieldSelectorPopover();
     await contains(".o_model_field_selector_popover_item_name").click();
     expect(getModelFieldSelectorValues()).toEqual(["Bar"]);
     expect(".o_model_field_selector_warning").toHaveCount(0);
-    expect(".o_model_field_selector .fa.fa-times").toHaveCount(1);
+    expect(".o_model_field_selector [data-icon='close']").toHaveCount(1);
     expect.verifySteps([`path is "bar"`]);
 
     // clear when popover is open
     await openModelFieldSelectorPopover();
-    await contains(".o_model_field_selector .fa.fa-times").click();
+    await contains(".o_model_field_selector [data-icon='close']").click();
     expect(getModelFieldSelectorValues()).toEqual([]);
     expect(".o_model_field_selector_warning").toHaveCount(0);
-    expect(".o_model_field_selector .fa.fa-times").toHaveCount(0);
+    expect(".o_model_field_selector [data-icon='close']").toHaveCount(0);
     expect.verifySteps([`path is ""`]);
 });
 
diff --git a/addons/web/static/tests/core/notebook.test.js b/addons/web/static/tests/core/notebook.test.js
index ea4f741468bb33..b34cefa430e723 100644
--- a/addons/web/static/tests/core/notebook.test.js
+++ b/addons/web/static/tests/core/notebook.test.js
@@ -341,18 +341,18 @@ test("icons can be given for each page tab", async () => {
         static props = ["*"];
         get icons() {
             return {
-                1: "fa-trash",
-                3: "fa-pencil",
+                1: "delete",
+                3: "edit",
             };
         }
     }
 
     await mountWithCleanup(Parent);
-    expect(".nav-item:nth-child(1) i").toHaveClass("fa-trash");
+    expect(".nav-item:nth-child(1) i").toHaveAttribute("data-icon", "delete");
     expect(".nav-item:nth-child(1)").toHaveText("page1");
     expect(".nav-item:nth-child(2) i").toHaveCount(0);
     expect(".nav-item:nth-child(2)").toHaveText("page2");
-    expect(".nav-item:nth-child(3) i").toHaveClass("fa-pencil");
+    expect(".nav-item:nth-child(3) i").toHaveAttribute("data-icon", "edit");
     expect(".nav-item:nth-child(3)").toHaveText("page3");
 });
 
diff --git a/addons/web/static/tests/core/scroller.test.js b/addons/web/static/tests/core/scroller.test.js
index 554fc340045213..ca8a3802e5b8ce 100644
--- a/addons/web/static/tests/core/scroller.test.js
+++ b/addons/web/static/tests/core/scroller.test.js
@@ -16,7 +16,7 @@ test("Ignore empty hrefs", async () => {
                 <a href="#" class="inactive_link">This link does nothing</a>
                 <button class="btn btn-secondary">
                     <a href="#">
-                        <i class="fa fa-trash"/>
+                        <i class="oi oi-filled" data-icon="delete"/>
                     </a>
                 </button>
             </div>`;
@@ -30,7 +30,7 @@ test("Ignore empty hrefs", async () => {
     await click(".inactive_link");
     await animationFrame();
 
-    await click(".fa.fa-trash");
+    await click("[data-icon='delete'].oi-filled");
     await animationFrame();
 
     expect(browser.location.hash).toBe("#testscroller");
diff --git a/addons/web/static/tests/core/tree_editor/condition_tree_editor_test_helpers.js b/addons/web/static/tests/core/tree_editor/condition_tree_editor_test_helpers.js
index 72c290a7423401..e0467db838ec7f 100644
--- a/addons/web/static/tests/core/tree_editor/condition_tree_editor_test_helpers.js
+++ b/addons/web/static/tests/core/tree_editor/condition_tree_editor_test_helpers.js
@@ -177,7 +177,7 @@ export const SELECTORS = {
     operatorEditor: ".o_tree_editor_condition > .o_tree_editor_editor:nth-child(2)",
     valueEditor: ".o_tree_editor_condition > .o_tree_editor_editor:nth-child(3)",
     editor: ".o_tree_editor_editor",
-    clearNotSupported: ".o_input .fa-times",
+    clearNotSupported: ".o_input [data-icon='close']",
     tag: ".o_input .o_tag",
     toggleArchive: ".form-switch",
     complexCondition: ".o_tree_editor_complex_condition",
diff --git a/addons/web/static/tests/interactions/caps_lock_warning.test.js b/addons/web/static/tests/interactions/caps_lock_warning.test.js
index 6c0c9119974af3..79a3a84e3ccd5a 100644
--- a/addons/web/static/tests/interactions/caps_lock_warning.test.js
+++ b/addons/web/static/tests/interactions/caps_lock_warning.test.js
@@ -55,7 +55,7 @@ test("show the password, type something, and then hide the password back, caps l
                 <input type="password" name="password" id="password"
                 class="form-control"/>
                 <button type="button" class="btn btn-sm border o_show_password">
-                    <i class="fa fa-eye"></i>
+                    <i class="oi" data-icon="visibility"></i>
                 </button>
             </div>
         </div>`;
diff --git a/addons/web/static/tests/interactions/show_password.test.js b/addons/web/static/tests/interactions/show_password.test.js
index fe44ccdc3ba631..a5fd1cc4ab559e 100644
--- a/addons/web/static/tests/interactions/show_password.test.js
+++ b/addons/web/static/tests/interactions/show_password.test.js
@@ -10,7 +10,7 @@ const template = `
     <div class="input-group">
         <input type="password" id="password" class="form-control" required="required" name="visibility_password" />
         <button class="btn border border-start-0 o_show_password" type="button">
-            <i class="fa fa-eye"></i>
+            <i class="oi" data-icon="visibility"></i>
         </button>
     </div>
 `;
diff --git a/addons/web/static/tests/public/interaction.test.js b/addons/web/static/tests/public/interaction.test.js
index a8f7eb12e4e897..82a127e5219fa7 100644
--- a/addons/web/static/tests/public/interaction.test.js
+++ b/addons/web/static/tests/public/interaction.test.js
@@ -2526,12 +2526,12 @@ describe("locked", () => {
         });
 
         test("should be added when the handler takes more than 400ms", async () => {
-            expect("span.fa-spin").toHaveCount(0);
+            expect("span.oi-spin").toHaveCount(0);
             await click("button");
             // Advance time more than the debounce delay of makeButtonHandler
             // (400ms) but less than the handler duration.
             await advanceTime(500);
-            expect("span.fa-spin").toHaveCount(1);
+            expect("span.oi-spin").toHaveCount(1);
             expect.verifySteps(["loading added"]);
             await advanceTime(handlerDuration);
             expect.verifySteps(["handler done"]);
@@ -2539,14 +2539,14 @@ describe("locked", () => {
 
         test("should never be added when the handler takes less than 400ms", async () => {
             handlerDuration = 100;
-            expect("span.fa-spin").toHaveCount(0);
+            expect("span.oi-spin").toHaveCount(0);
             await click("button");
             // Advance time more than the handler duration but less than the
             // debounce delay of makeButtonHandler (400ms).
             await advanceTime(200);
             expect.verifySteps(["handler done"]);
             await advanceTime(1000);
-            expect("span.fa-spin").toHaveCount(0);
+            expect("span.oi-spin").toHaveCount(0);
             expect.verifySteps([], {
                 message:
                     "Loading effect should never be added in the DOM for handlers shorter than 400ms",
diff --git a/addons/web/static/tests/search/action_menus.test.js b/addons/web/static/tests/search/action_menus.test.js
index 268f106781ef10..5519ca975441b4 100644
--- a/addons/web/static/tests/search/action_menus.test.js
+++ b/addons/web/static/tests/search/action_menus.test.js
@@ -159,7 +159,7 @@ test("render ActionMenus in form view", async () => {
     ]);
 
     // select CogMenu
-    await contains(`div.o_control_panel_breadcrumbs_actions i.fa-cog`).click();
+    await contains(`div.o_control_panel_breadcrumbs_actions i[data-icon="settings"]`).click();
 
     // select Print dropdown
     await contains(`button.o-dropdown:contains(Print)`).click();
@@ -176,7 +176,7 @@ test("render ActionMenus in form view", async () => {
     await contains(`button.o_form_button_save`).click();
     expect(`.o_pager_counter`).toHaveText("2 / 2");
     expect.verifySteps(["onchange", "web_save"]);
-    await contains(`div.o_control_panel_breadcrumbs_actions i.fa-cog`).click();
+    await contains(`div.o_control_panel_breadcrumbs_actions i[data-icon="settings"]`).click();
     await contains(`button.o-dropdown:contains(Print)`).click();
     expect(queryAllTexts(`.o-dropdown--menu-submenu span.o-dropdown-item`)).toEqual([
         "Some Report always visible",
@@ -187,7 +187,7 @@ test("render ActionMenus in form view", async () => {
     // switch back to first record
     await contains(`.o_pager_previous`).click();
     expect(`.o_pager_counter`).toHaveText("1 / 2");
-    await contains(`div.o_control_panel_breadcrumbs_actions i.fa-cog`).click();
+    await contains(`div.o_control_panel_breadcrumbs_actions i[data-icon="settings"]`).click();
     await contains(`button.o-dropdown:contains(Print)`).click();
     expect(queryAllTexts(`.o-dropdown--menu-submenu span.o-dropdown-item`)).toEqual([
         "Some Report always visible",
@@ -314,7 +314,7 @@ test("[Offline] render ActionMenus in form view", async () => {
     await setOffline(true);
 
     // select CogMenu
-    await contains(`div.o_control_panel_breadcrumbs_actions i.fa-cog`).click();
+    await contains(`div.o_control_panel_breadcrumbs_actions i[data-icon='settings']`).click();
 
     expect(queryAllTexts(`.o-dropdown--menu span.o-dropdown-item`)).toEqual([
         "No report available.",
diff --git a/addons/web/static/tests/search/control_panel.test.js b/addons/web/static/tests/search/control_panel.test.js
index a967216d1fc09e..1ea831a71a5c1b 100644
--- a/addons/web/static/tests/search/control_panel.test.js
+++ b/addons/web/static/tests/search/control_panel.test.js
@@ -73,8 +73,8 @@ test("view switcher", async () => {
         { resModel: "foo" },
         {
             viewSwitcherEntries: [
-                { type: "list", active: true, icon: "oi-view-list", name: "List" },
-                { type: "kanban", icon: "oi-view-kanban", name: "Kanban" },
+                { type: "list", active: true, icon: "view_list", name: "List" },
+                { type: "kanban", icon: "oi_view-kanban", name: "Kanban" },
             ],
         }
     );
@@ -84,10 +84,10 @@ test("view switcher", async () => {
     const views = queryAll`.o_switch_view`;
     expect(views[0]).toHaveAttribute("data-tooltip", "List");
     expect(views[0]).toHaveClass("active");
-    expect(`.o_switch_view:eq(0) .oi-view-list`).toHaveCount(1);
+    expect(`.o_switch_view:eq(0) [data-icon='view_list']`).toHaveCount(1);
     expect(views[1]).toHaveAttribute("data-tooltip", "Kanban");
     expect(views[1]).not.toHaveClass("active");
-    expect(`.o_switch_view:eq(1) .oi-view-kanban`).toHaveCount(1);
+    expect(`.o_switch_view:eq(1) [data-icon='oi_view-kanban']`).toHaveCount(1);
 
     getService("action").switchView = (viewType) => expect.step(viewType);
     await click(views[1]);
@@ -101,8 +101,8 @@ test("view switcher (middle click)", async () => {
         { resModel: "foo" },
         {
             viewSwitcherEntries: [
-                { type: "list", active: true, icon: "oi-view-list", name: "List" },
-                { type: "kanban", icon: "oi-view-kanban", name: "Kanban" },
+                { type: "list", active: true, icon: "view_list", name: "List" },
+                { type: "kanban", icon: "oi_view-kanban", name: "Kanban" },
             ],
         }
     );
@@ -123,8 +123,8 @@ test("views aria labels", async () => {
         { resModel: "foo" },
         {
             viewSwitcherEntries: [
-                { type: "list", active: true, icon: "oi-view-list", name: "List" },
-                { type: "kanban", icon: "oi-view-kanban", name: "Kanban" },
+                { type: "list", active: true, icon: "view_list", name: "List" },
+                { type: "kanban", icon: "oi_view-kanban", name: "Kanban" },
             ],
         }
     );
@@ -141,8 +141,8 @@ test("view switcher on mobile", async () => {
         { resModel: "foo" },
         {
             viewSwitcherEntries: [
-                { type: "list", active: true, icon: "oi-view-list", name: "List" },
-                { type: "kanban", icon: "oi-view-kanban", name: "Kanban" },
+                { type: "list", active: true, icon: "view_list", name: "List" },
+                { type: "kanban", icon: "oi_view-kanban", name: "Kanban" },
             ],
         }
     );
@@ -156,10 +156,10 @@ test("view switcher on mobile", async () => {
     const views = queryAll`.dropdown-item`;
     expect(views[0]).toHaveText("List");
     expect(views[0]).toHaveClass("selected");
-    expect(queryAll(`.oi-view-list`, { root: views[0] })).toHaveCount(1);
+    expect(queryAll(`[data-icon='view_list']`, { root: views[0] })).toHaveCount(1);
     expect(views[1]).toHaveText("Kanban");
     expect(views[1]).not.toHaveClass("selected");
-    expect(queryAll(`.oi-view-kanban`, { root: views[1] })).toHaveCount(1);
+    expect(queryAll(`[data-icon='oi_view-kanban']`, { root: views[1] })).toHaveCount(1);
 
     getService("action").switchView = (viewType) => expect.step(viewType);
     await click(views[1]);
@@ -270,8 +270,8 @@ test("Control panel is shown/hide on top when scrolling", async () => {
         { resModel: "foo" },
         {
             viewSwitcherEntries: [
-                { type: "list", active: true, icon: "oi-view-list", name: "List" },
-                { type: "kanban", icon: "oi-view-kanban", name: "Kanban" },
+                { type: "list", active: true, icon: "view_list", name: "List" },
+                { type: "kanban", icon: "oi_view-kanban", name: "Kanban" },
             ],
         }
     );
diff --git a/addons/web/static/tests/search/search_bar.test.js b/addons/web/static/tests/search/search_bar.test.js
index 2dfa3d8de59ca3..69d947ca8bdbde 100644
--- a/addons/web/static/tests/search/search_bar.test.js
+++ b/addons/web/static/tests/search/search_bar.test.js
@@ -299,7 +299,7 @@ test("search input is focused when being toggled", async () => {
         searchViewId: false,
     });
     expect(".o_searchview input").toHaveCount(0);
-    await contains(`button .fa-search`).click();
+    await contains(`button [data-icon="search"]`).click();
     expect(".o_searchview input").toHaveCount(1);
     expect(queryFirst`.o_searchview input`).toBeFocused();
 });
@@ -1357,29 +1357,29 @@ test("search a property", async () => {
     await animationFrame();
     await runAllTimers();
     expect(`.o-dropdown-item.focus`).toHaveText("Search Properties");
-    expect(".o-dropdown-item.focus:only .fa-caret-down").toHaveCount(1);
+    expect(".o-dropdown-item.focus:only [data-icon='arrow_drop_down']").toHaveCount(1);
     // move on the many2one property
     await keyDown("ArrowRight", { repeat: false });
     await animationFrame();
     await runAllTimers();
     expect(`.o-dropdown-item.focus`).toHaveText("My Partner (Bar 1)");
-    expect(".o-dropdown-item.focus:only .fa-caret-right").toHaveCount(1);
+    expect(".o-dropdown-item.focus:only [data-icon='arrow_right']").toHaveCount(1);
     // move on the many2many property
     await keyDown("ArrowDown");
     await animationFrame();
     expect(`.o-dropdown-item.focus`).toHaveText("My Partners (Bar 1)");
-    expect(".o-dropdown-item.focus:only .fa-caret-right").toHaveCount(1);
+    expect(".o-dropdown-item.focus:only [data-icon='arrow_right']").toHaveCount(1);
     // move on the many2one property again
     await keyDown("ArrowUp");
     await animationFrame();
     expect(`.o-dropdown-item.focus`).toHaveText("My Partner (Bar 1)");
-    expect(".o-dropdown-item.focus:only .fa-caret-right").toHaveCount(1);
+    expect(".o-dropdown-item.focus:only [data-icon='arrow_right']").toHaveCount(1);
     // unfold the many2one
     await keyDown("ArrowRight");
     await animationFrame();
     await runAllTimers();
     expect(`.o-dropdown-item.focus`).toHaveText("My Partner (Bar 1)");
-    expect(".o-dropdown-item.focus:only .fa-caret-down").toHaveCount(1);
+    expect(".o-dropdown-item.focus:only [data-icon='arrow_drop_down']").toHaveCount(1);
     // select the first many2one
     await keyDown("ArrowRight", { repeat: false });
     await animationFrame();
@@ -1390,25 +1390,25 @@ test("search a property", async () => {
     await animationFrame();
     await runAllTimers();
     expect(`.o-dropdown-item.focus`).toHaveText("My Partner (Bar 1)");
-    expect(".o-dropdown-item.focus:only .fa-caret-down").toHaveCount(1);
+    expect(".o-dropdown-item.focus:only [data-icon='arrow_drop_down']").toHaveCount(1);
     // fold the parent
     await keyDown("ArrowLeft");
     await animationFrame();
     await runAllTimers();
     expect(`.o-dropdown-item.focus`).toHaveText("My Partner (Bar 1)");
-    expect(".o-dropdown-item.focus:only .fa-caret-right").toHaveCount(1);
+    expect(".o-dropdown-item.focus:only [data-icon='arrow_right']").toHaveCount(1);
     // go up on the properties field
     await keyDown("ArrowLeft");
     await animationFrame();
     await runAllTimers();
     expect(`.o-dropdown-item.focus`).toHaveText("Search Properties");
-    expect(".o-dropdown-item.focus:only .fa-caret-down").toHaveCount(1);
+    expect(".o-dropdown-item.focus:only [data-icon='arrow_drop_down']").toHaveCount(1);
     // fold the properties field
     await keyDown("ArrowLeft");
     await animationFrame();
     await runAllTimers();
     expect(`.o-dropdown-item.focus`).toHaveText("Search Properties");
-    expect(".o-dropdown-item.focus:only .fa-caret-right").toHaveCount(1);
+    expect(".o-dropdown-item.focus:only [data-icon='arrow_right']").toHaveCount(1);
 });
 
 test("search a property: definition record id in the context", async () => {
@@ -1914,41 +1914,41 @@ test("order by count resets when there is no group left", async () => {
     await selectGroup("bool");
     await selectGroup("bar");
     await toggleMenuItem("Foo");
-    expect(".fa-sort").toHaveCount(1);
-    await contains(".fa-sort", { visible: false }).click();
-    expect(".fa-sort-numeric-desc").toHaveCount(1);
-    await contains(".fa-sort-numeric-desc").click();
-    expect(".fa-sort-numeric-asc").toHaveCount(1);
+    expect("[data-icon='swap_vert']").toHaveCount(1);
+    await contains("[data-icon='swap_vert']", { visible: false }).click();
+    expect("[data-icon='sort']").toHaveCount(1);
+    await contains("[data-icon='sort']").click();
+    expect("[data-icon='sort']").toHaveCount(1);
 
     await toggleSearchBarMenu();
     await toggleMenuItem("Foo");
-    expect(".fa-sort-numeric-asc").toHaveCount(1);
+    expect("[data-icon='sort']").toHaveCount(1);
 
     await toggleMenuItem("Foo");
     await toggleMenuItem("Bool");
-    expect(".fa-sort-numeric-asc").toHaveCount(1);
+    expect("[data-icon='sort']").toHaveCount(1);
     await toggleMenuItem("Bar");
-    expect(".fa-sort-numeric-asc").toHaveCount(0);
+    expect("[data-icon='sort']").toHaveCount(0);
 
     await toggleMenuItem("Bar");
-    expect(".fa-sort-numeric-asc").toHaveCount(0);
-    expect(".fa-sort").toHaveCount(1);
-    await contains(".fa-sort", { visible: false }).click();
-    await contains(".fa-sort-numeric-desc").click();
-    expect(".fa-sort-numeric-asc").toHaveCount(1);
+    expect("[data-icon='sort']").toHaveCount(0);
+    expect("[data-icon='swap_vert']").toHaveCount(1);
+    await contains("[data-icon='swap_vert']", { visible: false }).click();
+    await contains("[data-icon='sort']").click();
+    expect("[data-icon='sort']").toHaveCount(1);
     await toggleSearchBarMenu();
     await toggleMenuItem("Bool");
-    expect(".fa-sort-numeric-asc").toHaveCount(1);
+    expect("[data-icon='sort']").toHaveCount(1);
 
     await contains(".o_facet_remove").click();
-    expect(".fa-sort-numeric-asc").toHaveCount(1);
+    expect("[data-icon='sort']").toHaveCount(1);
     await contains(".o_facet_remove").click();
     expect(".o_searchview_facet").toHaveCount(0);
 
     await toggleSearchBarMenu();
     await toggleMenuItem("Bar");
-    expect(".fa-sort-numeric-asc").toHaveCount(0);
-    expect(".fa-sort").toHaveCount(1);
+    expect("[data-icon='sort']").toHaveCount(0);
+    expect("[data-icon='swap_vert']").toHaveCount(1);
 });
 
 test("subitems have a load more item if there is more records available", async () => {
diff --git a/addons/web/static/tests/search/search_bar_menu/favorite_menu.test.js b/addons/web/static/tests/search/search_bar_menu/favorite_menu.test.js
index 8c2f1ae38815b8..0e67715eca6fa8 100644
--- a/addons/web/static/tests/search/search_bar_menu/favorite_menu.test.js
+++ b/addons/web/static/tests/search/search_bar_menu/favorite_menu.test.js
@@ -43,7 +43,7 @@ test("simple rendering with no favorite (without ability to save)", async () =>
     );
 
     await toggleSearchBarMenu();
-    expect(`.o_favorite_menu .fa.fa-star`).toHaveCount(1);
+    expect(`.o_favorite_menu [data-icon="star"].oi-filled`).toHaveCount(1);
     expect(`.o_favorite_menu .o_dropdown_title`).toHaveText(/^favorites$/i);
     expect(`.o_favorite_menu`).toHaveCount(1);
     expect(`.o_favorite_menu .o_menu_item`).toHaveCount(0);
@@ -63,7 +63,7 @@ test("simple rendering with no favorite", async () => {
     );
 
     await toggleSearchBarMenu();
-    expect(`.o_favorite_menu .fa.fa-star`).toHaveCount(1);
+    expect(`.o_favorite_menu [data-icon="star"].oi-filled`).toHaveCount(1);
     expect(`.o_favorite_menu .o_dropdown_title`).toHaveText(/^favorites$/i);
     expect(`.o_favorite_menu`).toHaveCount(1);
     expect(`.o_favorite_menu .dropdown-divider`).toHaveCount(0);
diff --git a/addons/web/static/tests/search/search_from_url.test.js b/addons/web/static/tests/search/search_from_url.test.js
index 11382f2c39c0a7..3f7bd6b624e48f 100644
--- a/addons/web/static/tests/search/search_from_url.test.js
+++ b/addons/web/static/tests/search/search_from_url.test.js
@@ -125,7 +125,7 @@ test("URL with groupBy and orderBy activates ordered groupBy", async () => {
         searchViewId: false,
     });
     expect(`.o_searchview .o_searchview_facet`).toHaveCount(1);
-    expect(`.fa-sort-numeric-desc`).toHaveCount(1); // OrderBy desc icon
+    expect(`[data-icon="sort"]:not(.oi-flip-vertical`).toHaveCount(1); // OrderBy desc icon
     expect(searchBar.env.searchModel.groupBy).toEqual(["partner_id"]);
     expect(searchBar.env.searchModel.orderBy).toEqual([{ asc: false, name: "__count" }]);
 });
@@ -145,7 +145,7 @@ test("URL with filter + groupBy + orderBy activates filters", async () => {
     expect(`.o_searchview .o_searchview_facet`).toHaveCount(2); // One for the shared filter and one for the groupby
     expect(searchBar.env.searchModel.domain).toEqual([["state", "=", "sent"]]);
     expect(searchBar.env.searchModel.groupBy).toEqual(["partner_id"]);
-    expect(`.fa-sort-numeric-asc`).toHaveCount(1); // OrderBy ascending icon
+    expect(`[data-icon="sort"].oi-flip-vertical`).toHaveCount(1); // OrderBy ascending icon
     expect(searchBar.env.searchModel.orderBy).toEqual([{ asc: true, name: "__count" }]);
 
     // Regenerating the url should give the same result as before, without the "?"
@@ -454,7 +454,7 @@ test("hotkey sharing copies complex search to clipboard", async () => {
     await toggleMenuItem("Cool Vendors");
     await toggleMenuItem("Vendor");
 
-    await click(".o_searchview .oi-group"); // Facet click to trigger orderBy
+    await click(".o_searchview [data-icon='stacks']"); // Facet click to trigger orderBy
     await animationFrame();
 
     await press(["alt", "shift", "h"]);
diff --git a/addons/web/static/tests/search/search_model.test.js b/addons/web/static/tests/search/search_model.test.js
index cc2e0d1ed00941..a100780d1188a9 100644
--- a/addons/web/static/tests/search/search_model.test.js
+++ b/addons/web/static/tests/search/search_model.test.js
@@ -494,7 +494,8 @@ test("parsing a searchpanel field select one", async () => {
             expand: false,
             fieldName: "company_id",
             hierarchize: true,
-            icon: "fa-folder",
+            icon: "folder",
+            icon_class: "oi-filled",
             id: 1,
             limit: 200,
             parentField: "parent_id",
@@ -564,7 +565,8 @@ test("parsing a searchpanel field select multi", async () => {
             expand: false,
             fieldName: "company_id",
             groupBy: null,
-            icon: "fa-filter",
+            icon: "filter_alt",
+            icon_class: "oi-filled",
             id: 1,
             limit: 200,
             type: "filter",
diff --git a/addons/web/static/tests/search/search_panel_desktop.test.js b/addons/web/static/tests/search/search_panel_desktop.test.js
index 91a144bbe3f413..1a4d91f7d43455 100644
--- a/addons/web/static/tests/search/search_panel_desktop.test.js
+++ b/addons/web/static/tests/search/search_panel_desktop.test.js
@@ -255,7 +255,7 @@ test("basic rendering of a component with search panel", async () => {
     expect(`.o_search_panel_section`).toHaveCount(2);
 
     const firstSection = `.o_search_panel_section:eq(0)`;
-    expect(`${firstSection} .o_search_panel_section_header i`).toHaveClass("fa-folder");
+    expect(`${firstSection} .o_search_panel_section_header i`).toHaveAttribute("data-icon", "folder");
     expect(`${firstSection} .o_search_panel_section_header`).toHaveText(/company/i);
     expect(`${firstSection} .o_search_panel_category_value`).toHaveCount(3);
     expect(`${firstSection} .o_search_panel_category_value:first .active`).toHaveCount(1);
@@ -266,7 +266,7 @@ test("basic rendering of a component with search panel", async () => {
     ]);
 
     const secondSection = `.o_search_panel_section:eq(1)`;
-    expect(`${secondSection} .o_search_panel_section_header i`).toHaveClass("fa-filter");
+    expect(`${secondSection} .o_search_panel_section_header i`).toHaveAttribute("data-icon", "filter_alt");
     expect(`${secondSection} .o_search_panel_section_header`).toHaveText(/category/i);
     expect(`${secondSection} .o_search_panel_filter_value`).toHaveCount(2);
     expect(queryAllTexts`${secondSection} .o_search_panel_filter_value`).toEqual([
@@ -587,8 +587,8 @@ test("sections with custom icon and color", async () => {
         search: /* xml */ `
             <search>
                 <searchpanel view_types="toy">
-                    <field name="company_id" icon="fa-car" color="blue" enable_counters="1"/>
-                    <field name="state" select="multi" icon="fa-star" color="#000" enable_counters="1"/>
+                    <field name="company_id" icon="directions_car" color="blue" enable_counters="1"/>
+                    <field name="state" select="multi" icon="star" icon_class="oi-filled" color="#000" enable_counters="1"/>
                 </searchpanel>
             </search>
         `,
@@ -598,9 +598,9 @@ test("sections with custom icon and color", async () => {
         searchViewId: false,
     });
 
-    expect(`.o_search_panel_section_header:eq(0) i`).toHaveClass("fa-car");
+    expect(`.o_search_panel_section_header:eq(0) i`).toHaveAttribute("data-icon", "directions_car");
     expect(`.o_search_panel_section_header:eq(0) i`).toHaveStyle({ color: "rgb(0, 0, 255)" });
-    expect(`.o_search_panel_section_header:eq(1) i`).toHaveClass("fa-star");
+    expect(`.o_search_panel_section_header:eq(1) i`).toHaveAttribute("data-icon", "star");
     expect(`.o_search_panel_section_header:eq(1) i`).toHaveStyle({ color: "rgb(0, 0, 0)" });
     expect(component.domain).toEqual([]);
 });
@@ -1047,7 +1047,7 @@ test("can (un)fold parent category values", async () => {
     expect(`.o_search_panel_category_value:contains(agrolait) .o_toggle_fold > i`).toHaveCount(1);
     expect(
         `.o_search_panel_category_value header:contains(agrolait) .o_toggle_fold > i`
-    ).toHaveClass("fa-caret-right");
+    ).toHaveAttribute("data-icon", "arrow_right");
     expect(`.o_search_panel_category_value`).toHaveCount(3);
 
     // unfold agrolait
@@ -1056,7 +1056,7 @@ test("can (un)fold parent category values", async () => {
     ).click();
     expect(
         `.o_search_panel_category_value header:contains(agrolait) .o_toggle_fold > i`
-    ).toHaveClass("fa-caret-down");
+    ).toHaveAttribute("data-icon", "arrow_drop_down");
     expect(`.o_search_panel_category_value`).toHaveCount(5);
 
     // fold agrolait
@@ -1065,7 +1065,7 @@ test("can (un)fold parent category values", async () => {
     ).click();
     expect(
         `.o_search_panel_category_value header:contains(agrolait) .o_toggle_fold > i`
-    ).toHaveClass("fa-caret-right");
+    ).toHaveAttribute("data-icon", "arrow_right");
     expect(`.o_search_panel_category_value`).toHaveCount(3);
 });
 
@@ -1095,14 +1095,14 @@ test("fold status is kept at reload", async () => {
     await contains(queryFirst`.o_search_panel_category_value > header:contains(agrolait)`).click();
     expect(
         queryFirst`.o_search_panel_category_value > header:contains(agrolait) .o_toggle_fold > i`
-    ).toHaveClass("fa-caret-down");
+    ).toHaveAttribute("data-icon", "arrow_drop_down");
     expect(`.o_search_panel_category_value`).toHaveCount(5);
 
     await toggleSearchBarMenu();
     await toggleMenuItem("True Domain");
     expect(
         queryFirst`.o_search_panel_category_value > header:contains(agrolait) .o_toggle_fold > i`
-    ).toHaveClass("fa-caret-down");
+    ).toHaveAttribute("data-icon", "arrow_drop_down");
     expect(`.o_search_panel_category_value`).toHaveCount(5);
 });
 
diff --git a/addons/web/static/tests/tours/user_switch_tour.js b/addons/web/static/tests/tours/user_switch_tour.js
index 35c44ab6848365..dcbaffdf7d374a 100644
--- a/addons/web/static/tests/tours/user_switch_tour.js
+++ b/addons/web/static/tests/tours/user_switch_tour.js
@@ -66,7 +66,7 @@ registry.category("web_tour.tours").add("test_user_switch", {
         },
         {
             content: "Display the login form",
-            trigger: ".o_user_switch .fa-user-circle-o",
+            trigger: ".o_user_switch [data-icon='account_circle']",
             run: "click",
         },
         {
@@ -138,7 +138,7 @@ registry.category("web_tour.tours").add("test_user_switch", {
         },
         {
             content: "Display the login form",
-            trigger: ".o_user_switch .fa-user-circle-o",
+            trigger: ".o_user_switch [data-icon='account_circle']",
             run: "click",
         },
         {
@@ -160,7 +160,7 @@ registry.category("web_tour.tours").add("test_user_switch", {
         },
         {
             content: "Remove the admin user from page",
-            trigger: ".o_user_switch .d-flex:first-child .fa-times",
+            trigger: ".o_user_switch .d-flex:first-child [data-icon='close']",
             run: "click",
         },
         {
diff --git a/addons/web/static/tests/views/calendar/calendar_multi_create.test.js b/addons/web/static/tests/views/calendar/calendar_multi_create.test.js
index ffbc31bea6a8a8..026cdbd0644357 100644
--- a/addons/web/static/tests/views/calendar/calendar_multi_create.test.js
+++ b/addons/web/static/tests/views/calendar/calendar_multi_create.test.js
@@ -445,8 +445,8 @@ test("multi_create: basic creation (datetime field)", async () => {
     await runAllTimers();
     await animationFrame();
     await expect(".o_popover").toHaveCount(1);
-    await expect(".o_popover .fa-clock-o").toHaveCount(1);
-    await expect(".o_popover .list-group-item:has(.fa-clock-o)").toHaveText(
+    await expect(".o_popover [data-icon='schedule']").toHaveCount(1);
+    await expect(".o_popover .list-group-item:has([data-icon='schedule'])").toHaveText(
         "08:00 - 11:30 (3 hours, 30 minutes)"
     );
     await expect(".o_popover .o_field_widget[name='name']").toHaveText("Time off");
@@ -457,8 +457,8 @@ test("multi_create: basic creation (datetime field)", async () => {
     await runAllTimers();
     await animationFrame();
     await expect(".o_popover").toHaveCount(1);
-    await expect(".o_popover .fa-clock-o").toHaveCount(1);
-    await expect(".o_popover .list-group-item:has(.fa-clock-o)").toHaveText(
+    await expect(".o_popover [data-icon='schedule']").toHaveCount(1);
+    await expect(".o_popover .list-group-item:has([data-icon='schedule'])").toHaveText(
         "08:00 - 11:30 (3 hours, 30 minutes)"
     );
     await expect(".o_popover .o_field_widget[name='user_id']").toHaveText("user 3");
@@ -640,7 +640,7 @@ test("multi_create: delete", async () => {
     await drop(".fc-day[data-date='2019-04-03']");
     await animationFrame();
 
-    await contains(".o_multi_selection_buttons .btn .fa-trash").click();
+    await contains(".o_multi_selection_buttons .btn [data-icon='delete'].oi-filled").click();
     await animationFrame();
     expect(".o_dialog .modal-body").toHaveText(
         "Are you sure you want to delete the 3 selected records?"
@@ -854,7 +854,7 @@ test(`multi_create: no button "Delete" if no record selected`, async () => {
 
     await contains(".fc-day[data-date='2019-03-04']").click();
     expect(".o_multi_selection_buttons").toHaveCount(1);
-    expect(".o_multi_selection_buttons .btn .fa-trash").toHaveCount(0);
+    expect(".o_multi_selection_buttons .btn [data-icon='delete'].oi-filled").toHaveCount(0);
 });
 
 test.tags("desktop");
diff --git a/addons/web/static/tests/views/calendar/calendar_test_helpers.js b/addons/web/static/tests/views/calendar/calendar_test_helpers.js
index 1a926cc1f9ae4c..ecc7558bfe8504 100644
--- a/addons/web/static/tests/views/calendar/calendar_test_helpers.js
+++ b/addons/web/static/tests/views/calendar/calendar_test_helpers.js
@@ -473,7 +473,7 @@ export async function selectAllDayRange(startDate, endDate) {
 }
 export async function closeCwPopOver() {
     if (getMockEnv().isSmall) {
-        await contains(`.oi-arrow-left`).click();
+        await contains(`[data-icon="west"]`).click();
     } else {
         await contains(`.o_cw_popover_close`).click();
     }
diff --git a/addons/web/static/tests/views/calendar/calendar_view.test.js b/addons/web/static/tests/views/calendar/calendar_view.test.js
index e7e855711eebf3..ec8e8186cc7200 100644
--- a/addons/web/static/tests/views/calendar/calendar_view.test.js
+++ b/addons/web/static/tests/views/calendar/calendar_view.test.js
@@ -1197,7 +1197,7 @@ test(`create and change events on mobile`, async () => {
     // click on an existing event to open the formViewDialog
     await clickEvent(4);
     const container = ".modal";
-    const closeButton = ".oi-arrow-left";
+    const closeButton = "[data-icon='west']";
     expect(container).toHaveCount(1);
     expect(`${container} .o_cw_popover_edit`).toHaveCount(1);
     expect(`${container} .o_cw_popover_delete`).toHaveCount(1);
@@ -4456,7 +4456,7 @@ test(`edit record and attempt to create a record with "create" attribute set to
     // click on an existing event to open the formViewDialog
     await clickEvent(4);
     const popover = getMockEnv().isSmall ? ".modal" : ".o_cw_popover";
-    const closeButton = getMockEnv().isSmall ? ".oi-arrow-left" : ".o_cw_popover_close";
+    const closeButton = getMockEnv().isSmall ? `[data-icon="west"]` : ".o_cw_popover_close";
     expect(popover).toHaveCount(1);
     expect(`${popover} .o_cw_popover_edit`).toHaveCount(1);
     expect(`${popover} .o_cw_popover_delete`).toHaveCount(1);
diff --git a/addons/web/static/tests/views/fields/badges_many2one_field.test.js b/addons/web/static/tests/views/fields/badges_many2one_field.test.js
index e527f38d15f39c..8cc4db5f86ff7d 100644
--- a/addons/web/static/tests/views/fields/badges_many2one_field.test.js
+++ b/addons/web/static/tests/views/fields/badges_many2one_field.test.js
@@ -39,8 +39,8 @@ class Product extends models.Model {
     icon = fields.Char("icon");
 
     _records = [
-        { id: 37, display_name: "xphone", color: 6, icon: "fa-mobile" },
-        { id: 41, display_name: "xpad", color: 7, icon: "fa-check" },
+        { id: 37, display_name: "xphone", color: 6, icon: "smartphone" },
+        { id: 41, display_name: "xpad", color: 7, icon: "check" },
     ];
 }
 
@@ -89,14 +89,14 @@ test("BadgesMany2OneField: verify icons are fetched via search_read and displaye
         arch: `
             <form>
                 <field name="product_id" widget="badges_many2one"
-                    options="{'default_icon': 'fa-cog', 'related_icon_field': 'icon'}"/>
+                    options="{'default_icon': 'settings', 'related_icon_field': 'icon'}"/>
             </form>`,
     });
 
     // Check if icons are rendered
-    expect("span.o_selection_badge:eq(0) span.fa-cog").toHaveCount(1);
-    expect("span.o_selection_badge:eq(1) span.fa-mobile").toHaveCount(1);
-    expect("span.o_selection_badge:eq(2) span.fa-check").toHaveCount(1);
+    expect("span.o_selection_badge:eq(0) span[data-icon='settings']").toHaveCount(1);
+    expect("span.o_selection_badge:eq(1) span[data-icon='smartphone']").toHaveCount(1);
+    expect("span.o_selection_badge:eq(2) span[data-icon='check']").toHaveCount(1);
 
     expect.verifySteps(["search_read_triggered"]);
 });
diff --git a/addons/web/static/tests/views/fields/badges_selection_field.test.js b/addons/web/static/tests/views/fields/badges_selection_field.test.js
index 0b5a787fcaff20..3a663bad20a73c 100644
--- a/addons/web/static/tests/views/fields/badges_selection_field.test.js
+++ b/addons/web/static/tests/views/fields/badges_selection_field.test.js
@@ -40,7 +40,7 @@ class Product extends models.Model {
     color = fields.Integer("color");
     icon = fields.Char("icon");
     _records = [
-        { id: 37, display_name: "xphone", name: "xphone", color: 6, icon: "fa-mobile" },
+        { id: 37, display_name: "xphone", name: "xphone", color: 6, icon: "smartphone" },
         { id: 41, display_name: "xpad", name: "xpad", color: 7, icon: false },
     ];
 }
@@ -142,15 +142,15 @@ test("BadgesSelectionField: selection type with icon_mapping and default_icon",
         arch: `
             <form>
                 <field name="color" widget="badges_selection" options="{
-                    'icon_mapping': {'black': 'fa-moon-o'},
-                    'default_icon': 'fa-gratipay'
+                    'icon_mapping': {'black': 'dark_mode'},
+                    'default_icon': 'oi_gratipay'
                 }"/>
             </form>`,
     });
     // 'black' should use the mapping
-    expect("span.o_selection_badge:contains(Black) span.fa-moon-o").toHaveCount(1);
+    expect("span.o_selection_badge:contains(Black) span[data-icon='dark_mode']").toHaveCount(1);
     // 'red' should use the default icon
-    expect("span.o_selection_badge:contains(Red) span.fa-gratipay").toHaveCount(1);
+    expect("span.o_selection_badge:contains(Red) span[data-icon='oi_gratipay']").toHaveCount(1);
 });
 
 test("BadgesSelectionField: switching to SelectMenu when badge_limit is exceeded", async () => {
diff --git a/addons/web/static/tests/views/fields/binary_field.test.js b/addons/web/static/tests/views/fields/binary_field.test.js
index 2575c53ac974ef..a1147c33d0cea9 100644
--- a/addons/web/static/tests/views/fields/binary_field.test.js
+++ b/addons/web/static/tests/views/fields/binary_field.test.js
@@ -70,7 +70,7 @@ test("BinaryField is correctly rendered (readonly)", async () => {
         `,
     });
 
-    expect(`.o_field_widget[name="document"] a > .fa-download`).toHaveCount(1, {
+    expect(`.o_field_widget[name="document"] a > [data-icon="download"]`).toHaveCount(1, {
         message: "the binary field should be rendered as a downloadable link in readonly",
     });
     expect(`.o_field_widget[name="document"]`).toHaveText("coucou.txt", {
@@ -127,7 +127,7 @@ test("BinaryField is correctly rendered", async () => {
         `,
     });
 
-    expect(`.o_field_widget[name="document"] a > .fa-download`).toHaveCount(0, {
+    expect(`.o_field_widget[name="document"] a > [data-icon="download"]`).toHaveCount(0, {
         message: "the binary field should not be rendered as a downloadable link in edit",
     });
     expect(`.o_field_widget[name="document"].o_field_binary .o_input`).toHaveValue("coucou.txt", {
@@ -154,7 +154,7 @@ test("BinaryField is correctly rendered", async () => {
     document.addEventListener("click", downloadOnClick);
     after(() => document.removeEventListener("click", downloadOnClick));
 
-    await click(`.fa-download`);
+    await click(`[data-icon="download"]`);
     await deferred;
     expect.verifySteps(["/web/content"]);
 
@@ -169,7 +169,7 @@ test("BinaryField is correctly rendered", async () => {
     });
 
     await clickSave();
-    expect(`.o_field_widget[name="document"] a > .fa-download`).toHaveCount(0, {
+    expect(`.o_field_widget[name="document"] a > [data-icon="download"]`).toHaveCount(0, {
         message:
             "the binary field should not render as a downloadable link since we removed the file",
     });
@@ -198,13 +198,13 @@ test("BinaryField is correctly rendered (isDirty)", async () => {
     const file = new File(["test"], "fake_file.txt", { type: "text/plain" });
     await setInputFiles([file]);
     await waitFor(`.o_form_button_save:visible`);
-    expect(`.o_field_widget[name="document"] .fa-download`).toHaveCount(0, {
+    expect(`.o_field_widget[name="document"] [data-icon="download"]`).toHaveCount(0, {
         message:
             "the binary field should not be rendered as a downloadable since the record is dirty",
     });
 
     await clickSave();
-    expect(`.o_field_widget[name="document"] .fa-download`).toHaveCount(1, {
+    expect(`.o_field_widget[name="document"] [data-icon="download"]`).toHaveCount(1, {
         message:
             "the binary field should render as a downloadable link since the record is not dirty",
     });
@@ -221,7 +221,7 @@ test("file name field is not defined", async () => {
     expect(`.o_field_binary`).toHaveText("", {
         message: "there should be no text since the name field is not in the view",
     });
-    expect(`.o_field_binary .fa-download`).toBeVisible({
+    expect(`.o_field_binary [data-icon="download"]`).toBeVisible({
         message: "download icon should be visible",
     });
 });
@@ -317,7 +317,7 @@ test("readonly in create mode does not download", async () => {
     expect(`.o_field_widget[name="document"] a`).toHaveCount(0, {
         message: "The link to download the binary should not be present",
     });
-    expect(`.o_field_widget[name="document"] a > .fa-download`).toHaveCount(0, {
+    expect(`.o_field_widget[name="document"] a > [data-icon="download"]`).toHaveCount(0, {
         message: "The download icon should not be present",
     });
     expect.verifySteps([]);
@@ -355,7 +355,7 @@ test("new record has no download button", async () => {
         type: "form",
         arch: `<form><field name="document" filename="foo"/></form>`,
     });
-    expect(`button.fa-download`).toHaveCount(0);
+    expect(`button[data-icon="download"]`).toHaveCount(0);
 });
 
 test("filename doesn't exceed 255 bytes", async () => {
diff --git a/addons/web/static/tests/views/fields/boolean_favorite_field.test.js b/addons/web/static/tests/views/fields/boolean_favorite_field.test.js
index 380f879b6cc73b..6023038a3c701e 100644
--- a/addons/web/static/tests/views/fields/boolean_favorite_field.test.js
+++ b/addons/web/static/tests/views/fields/boolean_favorite_field.test.js
@@ -45,7 +45,7 @@ test("FavoriteField in kanban view", async () => {
             </kanban>
         `,
     });
-    expect(`.o_kanban_record .o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(1, {
+    expect(`.o_kanban_record .o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(1, {
         message: "should be favorite",
     });
     expect(`.o_kanban_record .o_field_widget .o_favorite`).toHaveText("Remove from Favorites", {
@@ -54,7 +54,7 @@ test("FavoriteField in kanban view", async () => {
 
     // click on favorite
     await contains(`.o_field_widget .o_favorite`).click();
-    expect(`.o_kanban_record .o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(0, {
+    expect(`.o_kanban_record .o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(0, {
         message: "should not be favorite",
     });
     expect(`.o_kanban_record .o_field_widget .o_favorite`).toHaveText("Add to Favorites", {
@@ -85,7 +85,7 @@ test("FavoriteField saves changes by default", async () => {
 
     // click on favorite
     await contains(`.o_field_widget .o_favorite`).click();
-    expect(`.o_kanban_record .o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(0, {
+    expect(`.o_kanban_record .o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(0, {
         message: "should not be favorite",
     });
     expect(`.o_kanban_record .o_field_widget .o_favorite`).toHaveText("Add to Favorites", {
@@ -116,7 +116,7 @@ test("FavoriteField does not save if autosave option is set to false", async ()
 
     // click on favorite
     await contains(`.o_field_widget .o_favorite`).click();
-    expect(`.o_kanban_record .o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(0, {
+    expect(`.o_kanban_record .o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(0, {
         message: "should not be favorite",
     });
     expect(`.o_kanban_record .o_field_widget .o_favorite`).toHaveText("Add to Favorites", {
@@ -136,7 +136,7 @@ test("FavoriteField in form view", async () => {
         type: "form",
         arch: `<form><field name="bar" widget="boolean_favorite"/></form>`,
     });
-    expect(`.o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(1, {
+    expect(`.o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(1, {
         message: "should be favorite",
     });
     expect(`.o_field_widget .o_favorite`).toHaveText("Remove from Favorites", {
@@ -146,10 +146,10 @@ test("FavoriteField in form view", async () => {
     // click on favorite
     await contains(`.o_field_widget .o_favorite`).click();
     expect.verifySteps(["save"]);
-    expect(`.o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(0, {
+    expect(`.o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(0, {
         message: "should not be favorite",
     });
-    expect(`.o_field_widget .o_favorite i.fa.fa-star-o`).toHaveCount(1, {
+    expect(`.o_field_widget .o_favorite i[data-icon="star"]:not(.oi-filled)`).toHaveCount(1, {
         message: "should not be favorite",
     });
     expect(`.o_field_widget .o_favorite`).toHaveText("Add to Favorites", {
@@ -159,7 +159,7 @@ test("FavoriteField in form view", async () => {
     // click on favorite
     await contains(`.o_field_widget .o_favorite`).click();
     expect.verifySteps(["save"]);
-    expect(`.o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(1, {
+    expect(`.o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(1, {
         message: "should be favorite",
     });
     expect(`.o_field_widget .o_favorite`).toHaveText("Remove from Favorites", {
@@ -180,25 +180,25 @@ test("FavoriteField in editable list view without label", async () => {
             </list>
         `,
     });
-    expect(`.o_data_row:first .o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(1, {
+    expect(`.o_data_row:first .o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(1, {
         message: "should be favorite",
     });
 
     // switch to edit mode
     await contains(`tbody td:not(.o_list_record_selector)`).click();
-    expect(`.o_data_row:first .o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(1, {
+    expect(`.o_data_row:first .o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(1, {
         message: "should be favorite",
     });
 
     // click on favorite
     await contains(`.o_data_row .o_field_widget .o_favorite`).click();
-    expect(`.o_data_row:first .o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(0, {
+    expect(`.o_data_row:first .o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(0, {
         message: "should not be favorite",
     });
 
     // save
     await contains(`.o_list_button_save`).click();
-    expect(`.o_data_row:first .o_field_widget .o_favorite i.fa.fa-star-o`).toHaveCount(1, {
+    expect(`.o_data_row:first .o_field_widget .o_favorite i[data-icon="star"]:not(.oi-filled)`).toHaveCount(1, {
         message: "should not be favorite",
     });
 });
@@ -245,7 +245,7 @@ test("FavoriteField in kanban view with readonly attribute", async () => {
             </kanban>
         `,
     });
-    expect(`.o_kanban_record .o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(1, {
+    expect(`.o_kanban_record .o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(1, {
         message: "should be favorite",
     });
     expect(`.o_kanban_record .o_field_widget .o_favorite`).toHaveClass("pe-none");
@@ -255,7 +255,7 @@ test("FavoriteField in kanban view with readonly attribute", async () => {
     // click on favorite
     await contains(`.o_field_widget .o_favorite`).click();
     // expect nothing to change since its readonly
-    expect(`.o_kanban_record .o_field_widget .o_favorite i.fa.fa-star`).toHaveCount(1, {
+    expect(`.o_kanban_record .o_field_widget .o_favorite i[data-icon="star"].oi-filled`).toHaveCount(1, {
         message: "should remain favorite",
     });
     expect.verifySteps([]);
diff --git a/addons/web/static/tests/views/fields/boolean_icon_field.test.js b/addons/web/static/tests/views/fields/boolean_icon_field.test.js
index f1670e39f41373..ce3d8b8782f3c2 100644
--- a/addons/web/static/tests/views/fields/boolean_icon_field.test.js
+++ b/addons/web/static/tests/views/fields/boolean_icon_field.test.js
@@ -19,16 +19,16 @@ test("BooleanIcon field in form view", async () => {
         type: "form",
         arch: `
             <form>
-                <field name="bar" widget="boolean_icon" options="{'icon': 'fa-recycle'}" />
-                <field name="foo" widget="boolean_icon" options="{'icon': 'fa-trash'}" />
+                <field name="bar" widget="boolean_icon" options="{'icon': 'recycling'}" />
+                <field name="foo" widget="boolean_icon" options="{'icon': 'delete'}" />
             </form>`,
     });
     expect(".o_field_boolean_icon button").toHaveCount(2);
     expect("[name='bar'] button").toHaveAttribute("data-tooltip", "Bar field");
-    expect("[name='bar'] button.btn-primary i.fa-recycle").toHaveCount(1);
-    expect("[name='foo'] button.btn-outline-primary i.fa-trash").toHaveCount(1);
+    expect("[name='bar'] button.btn-primary i[data-icon='recycling']").toHaveCount(1);
+    expect("[name='foo'] button.btn-outline-primary i[data-icon='delete']").toHaveCount(1);
 
     await click("[name='bar'] button");
     await animationFrame();
-    expect("[name='bar'] button.btn-outline-primary i.fa-recycle").toHaveCount(1);
+    expect("[name='bar'] button.btn-outline-primary i[data-icon='recycling']").toHaveCount(1);
 });
diff --git a/addons/web/static/tests/views/fields/date_field.test.js b/addons/web/static/tests/views/fields/date_field.test.js
index c6f78276afa69b..c476ef36689433 100644
--- a/addons/web/static/tests/views/fields/date_field.test.js
+++ b/addons/web/static/tests/views/fields/date_field.test.js
@@ -635,6 +635,6 @@ test("DateField contains a calendar icon on touch devices", async () => {
     // The icon is only visible on touch devices, using css rules
     document.body.classList.add("o_touch_device");
     await mountView({ type: "form", resModel: "res.partner", resId: 1 });
-    expect(".fa-calendar").toHaveCount(1);
-    expect(".fa-calendar").toBeVisible();
+    expect("[data-icon='calendar_today']").toHaveCount(1);
+    expect("[data-icon='calendar_today']").toBeVisible();
 });
diff --git a/addons/web/static/tests/views/fields/daterange_field.test.js b/addons/web/static/tests/views/fields/daterange_field.test.js
index 40c5a8949b8fea..910ff401e46036 100644
--- a/addons/web/static/tests/views/fields/daterange_field.test.js
+++ b/addons/web/static/tests/views/fields/daterange_field.test.js
@@ -1001,7 +1001,7 @@ test("related start date, required, both start date and end date set", async ()
     });
 
     expect(".o_field_daterange button:eq(0)").toHaveValue("02/03/2017");
-    expect(".fa-long-arrow-right").toHaveCount(1);
+    expect("[data-icon='east']").toHaveCount(1);
     expect(".o_field_daterange button:eq(1)").toHaveValue("02/03/2017");
 });
 
@@ -1018,7 +1018,7 @@ test("list daterange with start date and empty end date", async () => {
     });
 
     expect(".o_field_daterange").toHaveText("Feb 3, 2017");
-    expect(".o_field_daterange .fa-long-arrow-right").toHaveCount(0);
+    expect(".o_field_daterange [data-icon='east']").toHaveCount(0);
 });
 
 test("list daterange with empty start date and end date", async () => {
@@ -1036,7 +1036,7 @@ test("list daterange with empty start date and end date", async () => {
     });
 
     expect(".o_field_daterange").toHaveText("Feb 3, 2017");
-    expect(".o_field_daterange .fa-long-arrow-right").toHaveCount(0);
+    expect(".o_field_daterange [data-icon='east']").toHaveCount(0);
 });
 
 test("list daterange: column widths", async () => {
@@ -1234,7 +1234,7 @@ test("there is no arrow between the dates with option always_range if nothing is
     await contains(".o_form_button_save").click();
     await animationFrame();
     expect(".o_datetime_picker").toHaveCount(0);
-    expect(".fa-long-arrow-right").toHaveCount(1);
+    expect("[data-icon='east']").toHaveCount(1);
 });
 
 test("invalid empty date with optional end date", async () => {
@@ -1487,6 +1487,6 @@ test("DateRangeField contains a calendar icon on touch devices", async () => {
         resId: 1,
     });
     expect(".o_field_daterange .o_input").toHaveCount(2);
-    expect(".fa-calendar").toHaveCount(1);
-    expect(".fa-calendar").toBeVisible();
+    expect("[data-icon='calendar_today']").toHaveCount(1);
+    expect("[data-icon='calendar_today']").toBeVisible();
 });
diff --git a/addons/web/static/tests/views/fields/datetime_field.test.js b/addons/web/static/tests/views/fields/datetime_field.test.js
index c859016dff0e63..23c8432a836d79 100644
--- a/addons/web/static/tests/views/fields/datetime_field.test.js
+++ b/addons/web/static/tests/views/fields/datetime_field.test.js
@@ -717,6 +717,6 @@ test("DateTimeField contains a calendar icon on touch devices", async () => {
             <field name="datetime"/>
         </form>`,
     });
-    expect(".fa-calendar").toHaveCount(1);
-    expect(".fa-calendar").toBeVisible();
+    expect("[data-icon='calendar_today']").toHaveCount(1);
+    expect("[data-icon='calendar_today']").toBeVisible();
 });
diff --git a/addons/web/static/tests/views/fields/email_field.test.js b/addons/web/static/tests/views/fields/email_field.test.js
index 3c2c08a8918de5..886aa345fd2f4c 100644
--- a/addons/web/static/tests/views/fields/email_field.test.js
+++ b/addons/web/static/tests/views/fields/email_field.test.js
@@ -28,7 +28,7 @@ test("in form view", async () => {
     });
     expect(`.o_field_email input[type="email"]`).toHaveCount(1);
     expect(`.o_field_email input[type="email"]`).toHaveValue("john.doe@odoo.com");
-    expect(`.o_field_email a i.fa-envelope`).toHaveCount(1);
+    expect(`.o_field_email a i[data-icon="mail"].oi-filled`).toHaveCount(1);
     expect(`.o_field_email a`).toHaveAttribute("href", "mailto:john.doe@odoo.com");
     await fieldInput("email").edit("new@odoo.com");
     expect(`.o_field_email input[type="email"]`).toHaveValue("new@odoo.com");
diff --git a/addons/web/static/tests/views/fields/integer_field.test.js b/addons/web/static/tests/views/fields/integer_field.test.js
index 3ca522a5139052..5370faa205e30a 100644
--- a/addons/web/static/tests/views/fields/integer_field.test.js
+++ b/addons/web/static/tests/views/fields/integer_field.test.js
@@ -107,11 +107,11 @@ test("no need to focus out of the input to save the record after correcting an i
     expect(".o_field_widget input").toHaveValue("10");
     await fieldInput("price").edit("a");
     expect(".o_field_widget input").toHaveValue("a");
-    expect(".o_form_status_indicator span i.fa-warning").toHaveCount(1);
+    expect(".o_form_status_indicator span i[data-icon='warning']").toHaveCount(1);
     expect(".o_form_button_save[disabled]").toHaveCount(1);
     await fieldInput("price").edit("1");
     expect(".o_field_widget input").toHaveValue("1");
-    expect(".o_form_status_indicator span i.fa-warning").toHaveCount(0);
+    expect(".o_form_status_indicator span i[data-icon='warning']").toHaveCount(0);
     expect(".o_form_button_save[disabled]").toHaveCount(0);
     await clickSave(); // makes sure there is an enabled save button
 });
diff --git a/addons/web/static/tests/views/fields/json_checkboxes_field.test.js b/addons/web/static/tests/views/fields/json_checkboxes_field.test.js
index bd44757960a7da..7960fa8303241e 100644
--- a/addons/web/static/tests/views/fields/json_checkboxes_field.test.js
+++ b/addons/web/static/tests/views/fields/json_checkboxes_field.test.js
@@ -153,11 +153,11 @@ test("JsonCheckBoxesField (question circle)", async () => {
             </form>`,
     });
 
-    expect("div.o_field_widget div.form-check:eq(0) ~ i.fa-question-circle").toHaveCount(0, {
+    expect("div.o_field_widget div.form-check:eq(0) ~ i[data-icon='help']").toHaveCount(0, {
         message: "first checkbox should not have a question circle",
     });
     expect(
-        "div.o_field_widget div.form-check:eq(1) ~ i.fa-question-circle[title='Some info about this']"
+        "div.o_field_widget div.form-check:eq(1) ~ i[data-icon='help'][title='Some info about this']"
     ).toHaveCount(1, {
         message: "second checkbox should have a question circle",
     });
diff --git a/addons/web/static/tests/views/fields/many2many_field.test.js b/addons/web/static/tests/views/fields/many2many_field.test.js
index 4e2329e0a130c8..3dbfaf83caf8c5 100644
--- a/addons/web/static/tests/views/fields/many2many_field.test.js
+++ b/addons/web/static/tests/views/fields/many2many_field.test.js
@@ -254,7 +254,8 @@ test("many2many kanban: edition", async () => {
                                 <div>
                                     <a
                                         type="delete"
-                                        class="fa fa-times float-end delete_icon"
+                                        class="oi float-end delete_icon"
+                                        data-icon="close"
                                     />
                                     <field name="name"/>
                                 </div>
@@ -420,7 +421,7 @@ test("many2many kanban: create action disabled", async () => {
                         <templates>
                             <t t-name="card">
                                 <div>
-                                    <a type="delete" class="fa fa-times float-end delete_icon"/>
+                                    <a type="delete" class="oi float-end delete_icon" data-icon="close"/>
                                     <field name="name"/>
                                 </div>
                             </t>
@@ -730,7 +731,7 @@ test("many2many list (editable): edition", async () => {
         message: "name of first subrecord should be the one in DB",
     });
     expect(".o_list_record_remove").toHaveCount(2);
-    expect("td.o_list_record_remove button").toHaveClass("fa fa-times");
+    expect("td.o_list_record_remove button").toHaveAttribute("data-icon", "close");
     expect(".o_field_x2many_list_row_add").toHaveCount(1);
 
     // edit existing subrecord
diff --git a/addons/web/static/tests/views/fields/many2one_field.test.js b/addons/web/static/tests/views/fields/many2one_field.test.js
index cf9011fb7f1695..10f4195093863a 100644
--- a/addons/web/static/tests/views/fields/many2one_field.test.js
+++ b/addons/web/static/tests/views/fields/many2one_field.test.js
@@ -3810,7 +3810,7 @@ test("external_button performs a doAction by default", async () => {
     });
 
     await selectFieldDropdownItem("trululu", "first record");
-    expect(".o_field_widget .o_external_button .oi-arrow-right").toHaveCount(1);
+    expect(".o_field_widget .o_external_button [data-icon='east']").toHaveCount(1);
     await contains(".o_field_widget .o_external_button", { visible: false }).click();
 
     expect.verifySteps(["get_formview_action"]);
@@ -3830,7 +3830,7 @@ test("external_button opens a FormViewDialog in dialogs", async () => {
     expect(".modal").toHaveCount(1);
 
     await selectFieldDropdownItem("trululu", "first record");
-    expect(".o_field_widget .o_external_button .oi-launch").toHaveCount(1);
+    expect(".o_field_widget .o_external_button [data-icon='open_in_browser']").toHaveCount(1);
     await contains(".o_field_widget .o_external_button", { visible: false }).click();
 
     expect.verifySteps(["get_formview_id"]);
@@ -3895,7 +3895,7 @@ test("keep changes when editing related record in a dialog", async () => {
     await contains(".o_field_widget[name=foo] input").edit("some value", { confirm: false });
     await runAllTimers();
     await selectFieldDropdownItem("trululu", "first record");
-    expect(".o_field_widget .o_external_button .oi-launch").toHaveCount(1);
+    expect(".o_field_widget .o_external_button [data-icon='open_in_browser']").toHaveCount(1);
     await contains(".o_field_widget .o_external_button", { visible: false }).click();
     expect(".modal").toHaveCount(2);
 
diff --git a/addons/web/static/tests/views/fields/one2many_field.test.js b/addons/web/static/tests/views/fields/one2many_field.test.js
index 8222e2874e37f5..47dc51ad94a394 100644
--- a/addons/web/static/tests/views/fields/one2many_field.test.js
+++ b/addons/web/static/tests/views/fields/one2many_field.test.js
@@ -2571,7 +2571,7 @@ test("edition of one2many field with pager", async () => {
                         <templates>
                             <t t-name="card">
                                 <div>
-                                    <a type="delete" class="fa fa-times float-end delete_icon"/>
+                                    <a type="delete" class="oi float-end delete_icon" data-icon="close"/>
                                     <field name="name"/>
                                 </div>
                             </t>
@@ -2721,7 +2721,7 @@ test("edition of one2many field with pager on desktop", async () => {
                         <templates>
                             <t t-name="card">
                                 <div>
-                                    <a type="delete" class="fa fa-times float-end delete_icon"/>
+                                    <a type="delete" class="oi float-end delete_icon" data-icon="close"/>
                                     <field name="name"/>
                                 </div>
                             </t>
@@ -3558,7 +3558,7 @@ test("one2many kanban: edition", async () => {
                         <templates>
                             <t t-name="card">
                                 <div>
-                                    <a type="delete" class="fa fa-times float-end delete_icon"/>
+                                    <a type="delete" class="oi float-end delete_icon" data-icon="close"/>
                                     <field name="name"/>
                                     <field name="color"/>
                                 </div>
@@ -3663,7 +3663,7 @@ test("one2many kanban: create action disabled", async () => {
                         <templates>
                             <t t-name="card">
                                 <div>
-                                    <a type="delete" class="fa fa-times float-end delete_icon"/>
+                                    <a type="delete" class="oi float-end delete_icon" data-icon="close"/>
                                     <field name="name"/>
                                 </div>
                             </t>
@@ -5967,7 +5967,7 @@ test("one2many list with action button", async () => {
                 <field name="p">
                     <list>
                         <field name="foo"/>
-                        <button name="method_name" type="object" icon="fa-plus"/>
+                        <button name="method_name" type="object" icon="add"/>
                     </list>
                 </field>
             </form>`,
@@ -5999,7 +5999,7 @@ test("one2many kanban with action button", async () => {
                         <templates>
                             <t t-name="card">
                                 <field name="foo"/>
-                                <button name="method_name" type="object" class="fa fa-plus"/>
+                                <button name="method_name" type="object" class="oi" data-icon="add"/>
                             </t>
                         </templates>
                     </kanban>
@@ -6783,8 +6783,8 @@ test("one2many field with virtual ids with kanban button", async () => {
                         <templates>
                             <t t-name="card">
                                 <field name="foo"/>
-                                <button type="object" class="btn btn-link fa fa-shopping-cart" name="button_warn" string="button_warn" warn="warn" />
-                                <button type="object" class="btn btn-link fa fa-shopping-cart" name="button_disabled" string="button_disabled" />
+                                <button type="object" class="btn btn-link oi" data-icon="shopping_cart" name="button_warn" string="button_warn" warn="warn" />
+                                <button type="object" class="btn btn-link oi" data-icon="shopping_cart" name="button_disabled" string="button_disabled" />
                             </t>
                         </templates>
                     </kanban>
@@ -9594,7 +9594,7 @@ test("one2many add a line should not crash if orderedResIDs is not set on mobile
             </form>`,
     });
 
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     await contains('button[name="post"]').click();
     await contains(".o_field_x2many_list_row_add button").click();
     expect(".o_data_row.o_selected_row").toHaveCount(1);
@@ -13124,7 +13124,7 @@ test("modifiers based on x2many", async () => {
     expect("[name='name'].o_readonly_modifier").toHaveCount(1);
     expect("[name='int_field'].o_required_modifier").toHaveCount(1);
 
-    await contains("button.fa-trash-o").click();
+    await contains("button[data-icon='delete']").click();
     expect("button.my_button").toHaveCount(0);
     expect("[name='name'].o_readonly_modifier").toHaveCount(0);
     expect("[name='int_field'].o_required_modifier").toHaveCount(0);
diff --git a/addons/web/static/tests/views/fields/pdf_viewer_field.test.js b/addons/web/static/tests/views/fields/pdf_viewer_field.test.js
index e1fe9ae240cc09..3f8d9876afb242 100644
--- a/addons/web/static/tests/views/fields/pdf_viewer_field.test.js
+++ b/addons/web/static/tests/views/fields/pdf_viewer_field.test.js
@@ -104,6 +104,6 @@ test("PdfViewerField: upload file and download it", async () => {
     await setInputFiles(file);
     await waitFor("iframe.o_pdfview_iframe");
     await clickSave();
-    await click(".fa-download");
+    await click("[data-icon='download']");
     expect.verifySteps(["ir.actions.act_url", "browser_open:_blank"]);
 });
diff --git a/addons/web/static/tests/views/fields/phone_field.test.js b/addons/web/static/tests/views/fields/phone_field.test.js
index 322e31407dcc95..67420ed6326354 100644
--- a/addons/web/static/tests/views/fields/phone_field.test.js
+++ b/addons/web/static/tests/views/fields/phone_field.test.js
@@ -74,8 +74,8 @@ test("PhoneField in form view on normal screens (edit)", async () => {
     });
     expect(`input[type="tel"]`).toHaveCount(1);
     expect(`input[type="tel"]`).toHaveValue("yop");
-    expect(".o_field_phone button i.fa-phone").toHaveCount(1);
-    await assertUrl(`.o_field_widget button i.fa-phone`, "tel:yop");
+    expect(".o_field_phone button i[data-icon='phone']").toHaveCount(1);
+    await assertUrl(`.o_field_widget button i[data-icon='phone']`, "tel:yop");
 
     // change value in edit mode
     await click(`input[type="tel"]`);
diff --git a/addons/web/static/tests/views/fields/priority_field.test.js b/addons/web/static/tests/views/fields/priority_field.test.js
index 28f16f73751152..ca73181e09597c 100644
--- a/addons/web/static/tests/views/fields/priority_field.test.js
+++ b/addons/web/static/tests/views/fields/priority_field.test.js
@@ -65,11 +65,11 @@ test("PriorityField when not set", async () => {
         message:
             "should have two stars for representing each possible value: no star, one star and two stars",
     });
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star").toHaveCount(0, {
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(0, {
         message: "should have no full star since there is no value",
     });
 
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star-o").toHaveCount(2, {
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(2, {
         message: "should have two empty stars since there is no value",
     });
 });
@@ -117,16 +117,16 @@ test("PriorityField in form view", async () => {
 
     expect(".o_field_widget .o_priority:not(.o_field_empty)").toHaveCount(1);
     expect(".o_field_widget .o_priority button.o_priority_star").toHaveCount(2);
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star").toHaveCount(1);
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star-o").toHaveCount(1);
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(1);
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(1);
 
     // click on the second star in edit mode
-    await click(".o_field_widget .o_priority button.o_priority_star.fa-star-o:last");
+    await click(".o_field_widget .o_priority button.o_priority_star[data-icon='star']:last");
     await animationFrame();
 
     expect(".o_field_widget .o_priority button.o_priority_star").toHaveCount(2);
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star").toHaveCount(2);
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star-o").toHaveCount(0);
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(2);
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(0);
 });
 
 test.tags("desktop");
@@ -148,18 +148,18 @@ test("PriorityField hover a star in form view", async () => {
 
     expect(".o_field_widget .o_priority:not(.o_field_empty)").toHaveCount(1);
     expect(".o_field_widget .o_priority button.o_priority_star").toHaveCount(2);
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star").toHaveCount(1);
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star-o").toHaveCount(1);
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(1);
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(1);
 
     // hover last star
-    const star = ".o_field_widget .o_priority button.o_priority_star.fa-star-o:last";
+    const star = ".o_field_widget .o_priority button.o_priority_star[data-icon='star']:last";
     await hover(star);
     await animationFrame();
     expect(".o_field_widget .o_priority button.o_priority_star").toHaveCount(2);
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star").toHaveCount(2, {
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(2, {
         message: "should temporary have two full stars since we are hovering the third value",
     });
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star-o").toHaveCount(0, {
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(0, {
         message: "should temporary have no empty star since we are hovering the third value",
     });
 
@@ -167,8 +167,8 @@ test("PriorityField hover a star in form view", async () => {
     await animationFrame();
 
     expect(".o_field_widget .o_priority button.o_priority_star").toHaveCount(2);
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star").toHaveCount(1);
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star-o").toHaveCount(1);
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(1);
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(1);
 });
 
 test("PriorityField can write after adding a record -- kanban", async () => {
@@ -196,23 +196,23 @@ test("PriorityField can write after adding a record -- kanban", async () => {
                 </templates>
             </kanban>`,
     });
-    expect(".o_kanban_record .fa-star").toHaveCount(0);
+    expect(".o_kanban_record [data-icon='star'].oi-filled").toHaveCount(0);
 
-    await click(".o_priority button.o_priority_star.fa-star-o");
+    await click(".o_priority button.o_priority_star[data-icon='star']");
     // wait for web_save
     await animationFrame();
     expect.verifySteps(['web_save [[1],{"selection":"1"}]']);
-    expect(".o_kanban_record .fa-star").toHaveCount(1);
+    expect(".o_kanban_record [data-icon='star'].oi-filled").toHaveCount(1);
     await click(".o_control_panel_main_buttons .o-kanban-button-new");
     await animationFrame();
     await animationFrame();
     await click(".o_kanban_quick_create .o_kanban_add");
     await animationFrame();
     expect.verifySteps(["web_save [[],{}]"]);
-    await click(".o_priority button.o_priority_star.fa-star-o");
+    await click(".o_priority button.o_priority_star[data-icon='star']");
     await animationFrame();
     expect.verifySteps([`web_save [[6],{"selection":"1"}]`]);
-    expect(".o_kanban_record .fa-star").toHaveCount(2);
+    expect(".o_kanban_record [data-icon='star'].oi-filled").toHaveCount(2);
 });
 
 test("PriorityField in editable list view", async () => {
@@ -228,10 +228,10 @@ test("PriorityField in editable list view", async () => {
         message:
             "should have two stars for representing each possible value: no star, one star and two stars",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star").toHaveCount(1, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(1, {
         message: "should have one full star since the value is the second value",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(1, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(1, {
         message: "should have one empty star since the value is the second value",
     });
 
@@ -243,10 +243,10 @@ test("PriorityField in editable list view", async () => {
         message:
             "should have two stars for representing each possible value: no star, one star and two stars",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star").toHaveCount(1, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(1, {
         message: "should have one full star since the value is the second value",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(1, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(1, {
         message: "should have one empty star since the value is the second value",
     });
 
@@ -258,24 +258,24 @@ test("PriorityField in editable list view", async () => {
         message:
             "should have two stars for representing each possible value: no star, one star and two stars",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star").toHaveCount(1, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(1, {
         message: "should have one full star since the value is the second value",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(1, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(1, {
         message: "should have one empty star since the value is the second value",
     });
 
     // click on the first star in readonly mode
-    await click(".o_priority button.o_priority_star.fa-star");
+    await click(".o_priority button.o_priority_star[data-icon='star'].oi-filled");
     await animationFrame();
 
     expect(".o_data_row:first-child .o_priority button.o_priority_star").toHaveCount(2, {
         message: "should still have two stars",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star").toHaveCount(0, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(0, {
         message: "should now have no full star since the value is the first value",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(2, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(2, {
         message: "should now have two empty stars since the value is the first value",
     });
 
@@ -286,24 +286,24 @@ test("PriorityField in editable list view", async () => {
     expect(".o_data_row:first-child .o_priority button.o_priority_star").toHaveCount(2, {
         message: "should still have two stars",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star").toHaveCount(0, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(0, {
         message: "should now have no full star since the value is the first value",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(2, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(2, {
         message: "should now have two empty stars since the value is the first value",
     });
 
     // Click on second star in edit mode
-    await click(".o_priority button.o_priority_star.fa-star-o:last");
+    await click(".o_priority button.o_priority_star[data-icon='star']:last");
     await animationFrame();
 
     expect(".o_data_row:last-child .o_priority button.o_priority_star").toHaveCount(2, {
         message: "should still have two stars",
     });
-    expect(".o_data_row:last-child .o_priority button.o_priority_star.fa-star").toHaveCount(2, {
+    expect(".o_data_row:last-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(2, {
         message: "should now have two full stars since the value is the third value",
     });
-    expect(".o_data_row:last-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(0, {
+    expect(".o_data_row:last-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(0, {
         message: "should now have no empty star since the value is the third value",
     });
 
@@ -314,10 +314,10 @@ test("PriorityField in editable list view", async () => {
     expect(".o_data_row:last-child .o_priority button.o_priority_star").toHaveCount(2, {
         message: "should still have two stars",
     });
-    expect(".o_data_row:last-child .o_priority button.o_priority_star.fa-star").toHaveCount(2, {
+    expect(".o_data_row:last-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(2, {
         message: "should now have two full stars since the value is the third value",
     });
-    expect(".o_data_row:last-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(0, {
+    expect(".o_data_row:last-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(0, {
         message: "should now have no empty star since the value is the third value",
     });
 });
@@ -336,23 +336,23 @@ test("PriorityField hover in editable list view", async () => {
         message:
             "should have two stars for representing each possible value: no star, one star and two stars",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star").toHaveCount(1, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(1, {
         message: "should have one full star since the value is the second value",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(1, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(1, {
         message: "should have one empty star since the value is the second value",
     });
 
     // hover last star
-    const star = ".o_data_row:first-child .o_priority button.o_priority_star.fa-star-o:last";
+    const star = ".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star']:last";
     await hover(star);
     await animationFrame();
 
     expect(".o_data_row:first-child .o_priority button.o_priority_star").toHaveCount(2);
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star").toHaveCount(2, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(2, {
         message: "should temporary have two full stars since we are hovering the third value",
     });
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(0, {
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(0, {
         message: "should temporary have no empty star since we are hovering the third value",
     });
 
@@ -360,8 +360,8 @@ test("PriorityField hover in editable list view", async () => {
     await animationFrame();
 
     expect(".o_data_row:first-child .o_priority button.o_priority_star").toHaveCount(2);
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star").toHaveCount(1);
-    expect(".o_data_row:first-child .o_priority button.o_priority_star.fa-star-o").toHaveCount(1);
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(1);
+    expect(".o_data_row:first-child .o_priority button.o_priority_star[data-icon='star']:not(.oi-filled)").toHaveCount(1);
 });
 
 test("PriorityField with readonly attribute", async () => {
@@ -377,19 +377,19 @@ test("PriorityField with readonly attribute", async () => {
         arch: '<form><field name="selection" widget="priority" readonly="1"/></form>',
     });
 
-    expect("span.o_priority_star.fa.fa-star-o.o_disabled").toHaveCount(2, {
+    expect("span.o_priority_star[data-icon='star'].o_disabled").toHaveCount(2, {
         message: "stars of priority widget should rendered with span tag if readonly",
     });
-    await hover(".o_priority_star.fa-star-o:last");
+    await hover(".o_priority_star[data-icon='star']:last");
     await animationFrame();
     expect.step("hover");
-    expect(".o_field_widget .o_priority button.o_priority_star.fa-star").toHaveCount(0, {
+    expect(".o_field_widget .o_priority button.o_priority_star[data-icon='star'].oi-filled").toHaveCount(0, {
         message: "should have no full stars on hover since the field is readonly",
     });
-    await click(".o_priority_star.fa-star-o:last");
+    await click(".o_priority_star[data-icon='star']:last");
     await animationFrame();
     expect.step("click");
-    expect("span.o_priority_star.fa.fa-star-o.o_disabled").toHaveCount(2, {
+    expect("span.o_priority_star[data-icon='star'].o_disabled").toHaveCount(2, {
         message: "should still have two stars",
     });
     expect.verifySteps(["hover", "click"]);
@@ -403,7 +403,7 @@ test('PriorityField edited by the smart action "Set priority..."', async () => {
         resId: 1,
     });
 
-    expect("button.fa-star").toHaveCount(1);
+    expect("button[data-icon='star'].oi-filled").toHaveCount(1);
 
     await press(["control", "k"]);
     await animationFrame();
@@ -414,7 +414,7 @@ test('PriorityField edited by the smart action "Set priority..."', async () => {
     expect(queryAllTexts(".o_command")).toEqual(["Normal", "Blocked", "Done"]);
     await click("#o_command_2");
     await animationFrame();
-    expect("button.fa-star").toHaveCount(2);
+    expect("button[data-icon='star'].oi-filled").toHaveCount(2);
 });
 
 test("PriorityField - auto save record when field toggled", async () => {
@@ -432,7 +432,7 @@ test("PriorityField - auto save record when field toggled", async () => {
                 </sheet>
             </form>`,
     });
-    await click(".o_field_widget .o_priority button.o_priority_star.fa-star-o:last");
+    await click(".o_field_widget .o_priority button.o_priority_star[data-icon='star']:last");
     await animationFrame();
     expect.verifySteps(["web_save"]);
 });
@@ -453,7 +453,7 @@ test("PriorityField - prevent auto save with autosave option", async () => {
             </form>`,
     });
 
-    await click(".o_field_widget .o_priority button.o_priority_star.fa-star-o:last");
+    await click(".o_field_widget .o_priority button.o_priority_star[data-icon='star']:last");
     await animationFrame();
     expect.verifySteps([]);
 });
diff --git a/addons/web/static/tests/views/fields/properties_field.test.js b/addons/web/static/tests/views/fields/properties_field.test.js
index 426def9473c99b..01f7ff6aef0932 100644
--- a/addons/web/static/tests/views/fields/properties_field.test.js
+++ b/addons/web/static/tests/views/fields/properties_field.test.js
@@ -130,7 +130,7 @@ function getGroups() {
 }
 
 function getPropertyHandleElement(propertyName) {
-    return queryFirst(`*[property-name='${propertyName}'] .oi-draggable`);
+    return queryFirst(`*[property-name='${propertyName}'] [data-icon="drag_indicator"]`);
 }
 
 class Partner extends models.Model {
@@ -500,13 +500,13 @@ test("properties: selection", async () => {
 
     // Check the default option, must be the third one"
     expect(
-        ".o_property_field_popover .o_field_property_selection_option:nth-child(1) .fa-star"
+        ".o_property_field_popover .o_field_property_selection_option:nth-child(1) [data-icon='star'].oi-filled"
     ).toHaveCount(0);
     expect(
-        ".o_property_field_popover .o_field_property_selection_option:nth-child(2) .fa-star"
+        ".o_property_field_popover .o_field_property_selection_option:nth-child(2) [data-icon='star'].oi-filled"
     ).toHaveCount(0);
     expect(
-        ".o_property_field_popover .o_field_property_selection_option:nth-child(3) .fa-star"
+        ".o_property_field_popover .o_field_property_selection_option:nth-child(3) [data-icon='star'].oi-filled"
     ).toHaveCount(1);
     expect(".o_property_field_popover .o_field_property_definition_type input").toHaveValue(
         "Selection"
@@ -518,7 +518,7 @@ test("properties: selection", async () => {
         queryAllValues(".o_property_field_popover .o_field_property_selection_option input");
 
     // Create a new selection option
-    await click(".o_field_property_selection .fa-plus");
+    await click(".o_field_property_selection [data-icon='add']");
     await animationFrame();
     expect(getOptions()).toHaveCount(4, { message: "Should have added the new option" });
     expect(queryFirst("input", { root: getOptions()[3] })).toBeFocused({
@@ -554,7 +554,7 @@ test("properties: selection", async () => {
     expect(queryFirst("input", { root: getOptions()[2] })).toBeFocused();
 
     // Remove the second option
-    await click(".o_field_property_selection_option:nth-child(2) .fa-trash-o");
+    await click(".o_field_property_selection_option:nth-child(2) [data-icon='delete']");
     await animationFrame();
     expect(getOptionsValues()).toEqual(["A", "C", "New option"], {
         message: "Should have removed the second option",
@@ -1974,7 +1974,7 @@ test("properties: form view and falsy domain, properties are empty", async () =>
 
     // create the first property
     await toggleActionMenu();
-    await click(".o-dropdown--menu span .fa-cogs");
+    await click(".o-dropdown--menu span [data-icon='settings_applications']");
     await animationFrame();
     expect(".o_test_properties_not_empty").toHaveCount(1);
 });
@@ -2177,7 +2177,7 @@ test("properties: save separator folded state", async () => {
 
     // return true if the given separator is folded
     const foldState = (separatorName) =>
-        !queryFirst(`div[property-name='${separatorName}'] .o_field_property_label .fa-caret-down`);
+        !queryFirst(`div[property-name='${separatorName}'] .o_field_property_label [data-icon='arrow_drop_down']`);
 
     const assertFolded = (values) => {
         expect(values.length).toBe(4);
@@ -2229,7 +2229,7 @@ test("properties: separators drag and drop", async () => {
     ]);
 
     const getPropertyHandleElement = (propertyName) =>
-        queryFirst(`*[property-name='${propertyName}'] .oi-draggable`);
+        queryFirst(`*[property-name='${propertyName}'] [data-icon="drag_indicator"]`);
 
     await toggleActionMenu();
     await toggleMenuItem("Edit Properties"); // Start the edition mode
@@ -2931,7 +2931,7 @@ test("properties definition: test display and edit", async () => {
     expect(".o_field_property_selection_option").toHaveCount(3, {
         message: "Only the 3 options from the demo data should be displayed.",
     });
-    await click(".o_field_property_selection .fa-plus");
+    await click(".o_field_property_selection [data-icon='add']");
     await animationFrame();
     await edit("New option");
     await closePopover();
diff --git a/addons/web/static/tests/views/fields/stat_info_field.test.js b/addons/web/static/tests/views/fields/stat_info_field.test.js
index 33bda9efea60e0..d1c2eb527ccf2d 100644
--- a/addons/web/static/tests/views/fields/stat_info_field.test.js
+++ b/addons/web/static/tests/views/fields/stat_info_field.test.js
@@ -23,10 +23,11 @@ test("StatInfoField formats decimal precision", async () => {
         resId: 1,
         arch: /* xml */ `
             <form>
-                <button class="oe_stat_button" name="items" icon="fa-gear">
+            <!-- // TODO: add oi-filled -->
+                <button class="oe_stat_button" name="items" icon="settings">
                     <field name="qux" widget="statinfo" />
                 </button>
-                <button class="oe_stat_button" name="money" icon="fa-money">
+                <button class="oe_stat_button" name="money" icon="payments">
                     <field name="monetary" widget="statinfo" />
                 </button>
             </form>
@@ -49,7 +50,8 @@ test("StatInfoField with 'hide_trailing_zeros' option", async () => {
         resId: 1,
         arch: /* xml */ `
             <form>
-                <button class="oe_stat_button" name="items" icon="fa-gear">
+            <!-- // TODO: add oi-filled -->
+                <button class="oe_stat_button" name="items" icon="settings">
                     <field name="bar" widget="statinfo" options="{'hide_trailing_zeros': true}" />
                 </button>
             </form>
@@ -68,7 +70,8 @@ test("StatInfoField widget on a chart fields", async () => {
         resId: 1,
         arch: /* xml */ `
             <form>
-                <button class="oe_stat_button" name="items" icon="fa-gear">
+            <!-- // TODO: add oi-filled -->
+                <button class="oe_stat_button" name="items" icon="settings">
                     <field name="foo" widget="statinfo" />
                 </button>
             </form>
@@ -86,7 +89,8 @@ test("StatInfoField widget on a char field (unset value)", async () => {
         resId: 1,
         arch: /* xml */ `
             <form>
-                <button class="oe_stat_button" name="items" icon="fa-gear">
+            <!-- // TODO: add oi-filled -->
+                <button class="oe_stat_button" name="items" icon="settings">
                     <field name="foo" widget="statinfo" />
                 </button>
             </form>
@@ -105,7 +109,8 @@ test("StatInfoField widget on a one2many field (one record)", async () => {
         resId: 2,
         arch: /* xml */ `
             <form>
-                <button class="oe_stat_button" name="items" icon="fa-gear">
+            <!-- // TODO: add oi-filled -->
+                <button class="oe_stat_button" name="items" icon="settings">
                     <field name="child_ids" widget="statinfo" />
                 </button>
             </form>
@@ -126,7 +131,8 @@ test("StatInfoField widget on a one2many field (multiple records)", async () =>
         resId: 2,
         arch: /* xml */ `
             <form>
-                <button class="oe_stat_button" name="items" icon="fa-gear">
+            <!-- // TODO: add oi-filled -->
+                <button class="oe_stat_button" name="items" icon="settings">
                     <field name="child_ids" widget="statinfo" />
                 </button>
             </form>
@@ -147,7 +153,8 @@ test("StatInfoField widget on a many2one field", async () => {
         resId: 2,
         arch: /* xml */ `
             <form>
-                <button class="oe_stat_button" name="items" icon="fa-gear">
+            <!-- // TODO: add oi-filled -->
+                <button class="oe_stat_button" name="items" icon="settings">
                     <field name="parent_id" widget="statinfo" />
                 </button>
             </form>
@@ -166,7 +173,8 @@ test("StatInfoField in form view on desktop", async () => {
         arch: /* xml */ `
             <form>
                 <div class="oe_button_box" name="button_box">
-                    <button class="oe_stat_button" name="items" type="object" icon="fa-gear">
+                <!-- // TODO: add oi-filled -->
+                    <button class="oe_stat_button" name="items" type="object" icon="settings">
                         <field name="int_field" widget="statinfo" />
                     </button>
                 </div>
@@ -194,7 +202,8 @@ test("StatInfoField in form view on mobile", async () => {
         arch: /* xml */ `
             <form>
                 <div class="oe_button_box" name="button_box">
-                    <button class="oe_stat_button" name="items" type="object" icon="fa-gear">
+                <!-- // TODO: add oi-filled -->
+                    <button class="oe_stat_button" name="items" type="object" icon="settings">
                         <field name="int_field" widget="statinfo" />
                     </button>
                 </div>
@@ -224,7 +233,8 @@ test("StatInfoField in form view with specific label_field on desktop", async ()
             <form>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button class="oe_stat_button" name="items" type="object" icon="fa-gear">
+                    <!-- // TODO: add oi-filled -->
+                        <button class="oe_stat_button" name="items" type="object" icon="settings">
                             <field string="Useful stat button" name="int_field" widget="statinfo" options="{'label_field': 'foo'}" />
                         </button>
                     </div>
@@ -257,7 +267,8 @@ test("StatInfoField in form view with specific label_field on mobile", async ()
             <form>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button class="oe_stat_button" name="items" type="object" icon="fa-gear">
+                    <!-- // TODO: add oi-filled -->
+                        <button class="oe_stat_button" name="items" type="object" icon="settings">
                             <field string="Useful stat button" name="int_field" widget="statinfo" options="{'label_field': 'foo'}" />
                         </button>
                     </div>
@@ -291,7 +302,8 @@ test("StatInfoField in form view with no label on desktop", async () => {
             <form>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button class="oe_stat_button" name="items" type="object" icon="fa-gear">
+                    <!-- // TODO: add oi-filled -->
+                        <button class="oe_stat_button" name="items" type="object" icon="settings">
                             <field string="Useful stat button" name="int_field" widget="statinfo" nolabel="1" />
                         </button>
                     </div>
@@ -320,7 +332,8 @@ test("StatInfoField in form view with no label on mobile", async () => {
             <form>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button class="oe_stat_button" name="items" type="object" icon="fa-gear">
+                    <!-- // TODO: add oi-filled -->
+                        <button class="oe_stat_button" name="items" type="object" icon="settings">
                             <field string="Useful stat button" name="int_field" widget="statinfo" nolabel="1" />
                         </button>
                     </div>
diff --git a/addons/web/static/tests/views/form/form_renderer.test.js b/addons/web/static/tests/views/form/form_renderer.test.js
index 4f8aa57b4d19ed..1cb7f78081c6e0 100644
--- a/addons/web/static/tests/views/form/form_renderer.test.js
+++ b/addons/web/static/tests/views/form/form_renderer.test.js
@@ -144,7 +144,7 @@ test("compile a button with id on mobile", async () => {
         type: "form",
         resId: 1,
     });
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     expect(`button[id=action_button]`).toHaveCount(1);
 });
 
diff --git a/addons/web/static/tests/views/form/form_view.test.js b/addons/web/static/tests/views/form/form_view.test.js
index baa399c04f2947..511d482e1df0ab 100644
--- a/addons/web/static/tests/views/form/form_view.test.js
+++ b/addons/web/static/tests/views/form/form_view.test.js
@@ -3262,7 +3262,7 @@ test(`form with custom cog action that has a confirmation target="new" action`,
     await getService("action").doAction(1);
     expect(".o_form_view").toHaveCount(1);
 
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     await contains(`.o-dropdown-item:contains(Sort of confirmation dialog)`).click();
     expect(".o_dialog").toHaveCount(1);
 
@@ -3318,14 +3318,14 @@ test(`buttons in form view`, async () => {
                 </header>
                 <sheet>
                     <group>
-                        <button string="Geolocate" name="geo_localize" icon="fa-check" type="object"/>
+                        <button string="Geolocate" name="geo_localize" icon="check" type="object"/>
                     </group>
                 </sheet>
             </form>
         `,
         resId: 2,
     });
-    expect(`button.btn i.fa.fa-check`).toHaveCount(1);
+    expect(`button.btn i[data-icon="check"]`).toHaveCount(1);
     expect(`.o_form_statusbar button`).toHaveCount(2);
     expect(`button.child_ids[name="post"]:contains(Confirm)`).toHaveCount(1);
 
@@ -3430,7 +3430,7 @@ test(`buttons should be in .o_statusbar_buttons in form view header on mobile`,
     });
 
     expect(`.o_statusbar_buttons > button:eq(0)`).toHaveAttribute("name", "0");
-    await contains(".o_statusbar_buttons .dropdown-toggle:has(.oi-ellipsis-v)").click();
+    await contains(".o_statusbar_buttons .dropdown-toggle:has([data-icon='more_vert'])").click();
     expect(`.o-dropdown--menu div.o_field_widget`).toHaveAttribute("name", "foo");
 });
 
@@ -3518,7 +3518,7 @@ test(`buttons in form view, new record`, async () => {
                 </header>
                 <sheet>
                     <group>
-                        <button string="Geolocate" name="geo_localize" icon="fa-check" type="object"/>
+                        <button string="Geolocate" name="geo_localize" icon="check" type="object"/>
                     </group>
                 </sheet>
             </form>
@@ -5871,10 +5871,10 @@ test(`handling dirty state: switching to another record`, async () => {
     await contains(`.o_form_button_save`).click();
     await contains(`.o_pager_next`).click();
     expect(`.o_breadcrumb`).toHaveText("second record");
-    expect(`.o_priority .fa-star-o`).toHaveCount(2);
+    expect(`.o_priority [data-icon="star"]:not(.oi-filled)`).toHaveCount(2);
 
-    await contains(`.o_priority .fa-star-o`).click();
-    expect(`.o_priority .fa-star`).toHaveCount(1);
+    await contains(`.o_priority [data-icon="star"]:not(.oi-filled)`).click();
+    expect(`.o_priority [data-icon="star"].oi-filled`).toHaveCount(1);
 
     await contains(`.o_pager_next`).click();
     expect(`.o_breadcrumb`).toHaveText("first record");
@@ -5917,7 +5917,7 @@ test(`handling dirty state: switching to another record on desktop`, async () =>
     await contains(`.o_pager_next`).click();
     expect(`.o_pager_counter`).toHaveText("2 / 2");
 
-    await contains(`.o_priority .fa-star-o`).click();
+    await contains(`.o_priority [data-icon="star"]:not(.oi-filled)`).click();
 
     await contains(`.o_pager_next`).click();
     expect(`.o_pager_counter`).toHaveText("1 / 2");
@@ -6605,7 +6605,7 @@ test(`button box is rendered in create mode`, async () => {
         arch: `
             <form>
                 <div name="button_box" class="oe_button_box">
-                    <button type="object" class="oe_stat_button" icon="fa-check-square">
+                    <button type="object" class="oe_stat_button oi-filled" icon="check_box">
                         <field name="bar"/>
                     </button>
                 </div>
@@ -6627,7 +6627,7 @@ test(`button box is not rendered in form views in dialogs`, async () => {
         arch: `
             <form>
                 <div name="button_box" class="oe_button_box">
-                    <button type="object" class="oe_stat_button" icon="fa-check-square">
+                    <button type="object" class="oe_stat_button oi-filled" icon="check_box">
                         <field name="bar"/>
                     </button>
                 </div>
@@ -6768,7 +6768,7 @@ test(`delete a line in a one2many while editing another line`, async () => {
     });
     await contains(`.o_data_cell:eq(0)`).click();
     await contains(`.o_field_widget[name=name] input`).clear();
-    await contains(`.fa-trash-o:eq(1)`).click();
+    await contains(`[data-icon="delete"]:eq(1)`).click();
     expect(`.o_data_row`).toHaveCount(2);
     expect(`.o_data_cell:eq(0)`).toHaveClass(["o_invalid_cell"]);
 });
@@ -7521,7 +7521,7 @@ test(`display something else than a button in a buttonbox on desktop`, async ()
         arch: `
             <form>
                 <div name="button_box" class="oe_button_box">
-                    <button type="recordect" class="oe_stat_button" icon="fa-check-square">
+                    <button type="recordect" class="oe_stat_button oi-filled" icon="check_box">
                         <field name="bar"/>
                     </button>
                     <label/>
@@ -7543,7 +7543,7 @@ test(`display something else than a button in a buttonbox on mobile`, async () =
         arch: `
             <form>
                 <div name="button_box" class="oe_button_box">
-                    <button type="recordect" class="oe_stat_button" icon="fa-check-square">
+                    <button type="recordect" class="oe_stat_button oi-filled" icon="check_box">
                         <field name="bar"/>
                     </button>
                     <label/>
@@ -7574,7 +7574,7 @@ test(`invisible fields are not considered as visible in a buttonbox on desktop`,
                     <field name="state" invisible="1"/>
                     <field name="date" invisible="1"/>
                     <field name="datetime" invisible="1"/>
-                    <button type="recordect" class="oe_stat_button" icon="fa-check-square"/>
+                    <button type="recordect" class="oe_stat_button oi-filled" icon="check_box"/>
                 </div>
             </form>
         `,
@@ -7600,7 +7600,7 @@ test(`invisible fields are not considered as visible in a buttonbox on mobile`,
                     <field name="state" invisible="1"/>
                     <field name="date" invisible="1"/>
                     <field name="datetime" invisible="1"/>
-                    <button type="recordect" class="oe_stat_button" icon="fa-check-square"/>
+                    <button type="recordect" class="oe_stat_button oi-filled" icon="check_box"/>
                 </div>
             </form>
         `,
@@ -7632,10 +7632,10 @@ test(`display correctly buttonbox, in large size class`, async () => {
         arch: `
             <form>
                 <div name="button_box" class="oe_button_box">
-                    <button type="recordect" class="oe_stat_button" icon="fa-check-square">
+                    <button type="recordect" class="oe_stat_button oi-filled" icon="check_box">
                         <field name="bar"/>
                     </button>
-                    <button type="recordect" class="oe_stat_button" icon="fa-check-square">
+                    <button type="recordect" class="oe_stat_button oi-filled" icon="check_box">
                         <field name="foo"/>
                     </button>
                 </div>
@@ -8022,7 +8022,7 @@ test(`render stat button with string inline on desktop`, async () => {
             <form>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button string="Inventory Moves" class="oe_stat_button" icon="oi-arrows-v"/>
+                        <button string="Inventory Moves" class="oe_stat_button" icon="height"/>
                     </div>
                 </sheet>
             </form>
@@ -8041,7 +8041,7 @@ test(`render stat button with string inline on mobile`, async () => {
             <form>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button string="Inventory Moves" class="oe_stat_button" icon="oi-arrows-v"/>
+                        <button string="Inventory Moves" class="oe_stat_button" icon="height"/>
                     </div>
                 </sheet>
             </form>
@@ -8276,7 +8276,7 @@ test(`correct amount of buttons`, async () => {
     });
 
     const buttons = Array(8).join(`
-        <button type="recordect" class="oe_stat_button" icon="fa-check-square">
+        <button type="recordect" class="oe_stat_button oi-filled" icon="check_box">
             <field name="bar"/>
         </button>
     `);
@@ -8665,7 +8665,7 @@ test(`support anchor tags with action type`, async () => {
         type: "form",
         arch: `
             <form>
-                <a type="action" name="42" class="btn-primary"><i class="oi oi-arrow-right"/> Click me !</a>
+                <a type="action" name="42" class="btn-primary"><i class="oi" data-icon="east"/> Click me !</a>
             </form>
         `,
         resId: 1,
@@ -9241,7 +9241,7 @@ test(`buttons are disabled until status bar action is resolved`, async () => {
         resId: 1,
     });
     // Contains invisible buttons that are only displayed under xl screens
-    expect(`.o_control_panel_breadcrumbs button:not(.fa):not(:disabled)`).toHaveCount(3);
+    expect(`.o_control_panel_breadcrumbs button:not(.oi):not(:disabled)`).toHaveCount(3);
     expect(`.o_form_statusbar button:not(:disabled)`).toHaveCount(2);
     expect(`.o-form-buttonbox button:not(:disabled)`).toHaveCount(1);
 
@@ -9249,13 +9249,13 @@ test(`buttons are disabled until status bar action is resolved`, async () => {
     await animationFrame();
 
     // The unresolved promise lets us check the state of the buttons
-    expect(`.o_control_panel_breadcrumbs button:not(.fa):disabled`).toHaveCount(3);
+    expect(`.o_control_panel_breadcrumbs button:not(.oi):disabled`).toHaveCount(3);
     expect(`.o_form_statusbar button:disabled`).toHaveCount(2);
     expect(`.o-form-buttonbox button:disabled`).toHaveCount(1);
 
     deferred.resolve();
     await animationFrame();
-    expect(`.o_control_panel_breadcrumbs button:not(.fa):not(:disabled)`).toHaveCount(3);
+    expect(`.o_control_panel_breadcrumbs button:not(.oi):not(:disabled)`).toHaveCount(3);
     expect(`.o_form_statusbar button:not(:disabled)`).toHaveCount(2);
     expect(`.o-form-buttonbox button:not(:disabled)`).toHaveCount(1);
 });
@@ -10043,7 +10043,7 @@ test(`support header button as widgets on form statusbar on mobile`, async () =>
         type: "form",
         arch: `<form><header><widget name="attach_document" string="Attach document"/></header></form>`,
     });
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     expect(`button.o_attachment_button`).toHaveCount(1);
     expect(`span.o_attach_document`).toHaveText("Attach document");
 });
@@ -10076,7 +10076,7 @@ test("support header button as widgets in submenu on form statusbar on mobile",
         </header></form>`,
     });
 
-    await contains(".o_statusbar_buttons button:has(.oi-ellipsis-v)").click();
+    await contains(".o_statusbar_buttons button:has([data-icon='more_vert'])").click();
     expect(".o-dropdown--menu button:contains(Upload Test)").toHaveCount(1);
     await contains(".o-dropdown--menu button:contains(Upload Test)").click();
     expect(".o-dropdown--menu button:contains(Upload Test)").toHaveCount(1);
@@ -11814,7 +11814,7 @@ test(`setting : boolean field`, async () => {
             <form>
                 <setting help="this is bar" documentation="/applications/technical/web/settings/this_is_a_test.html">
                     <field name="bar"/>
-                    <button name="buttonName" icon="oi-arrow-right" type="action" string="Manage Users" class="btn-link"/>
+                    <button name="buttonName" icon="east" type="action" string="Manage Users" class="btn-link"/>
                 </setting>
             </form>
         `,
@@ -11850,7 +11850,7 @@ test(`setting : char field`, async () => {
     expect(`.o_setting_left_pane > *`).toHaveCount(0);
     expect(`.o_form_label`).toHaveText("Foo");
     expect(`.text-muted`).toHaveText("this is foo");
-    expect(`.fa-building-o`).toHaveCount(1);
+    expect(`[data-icon="business"]`).toHaveCount(1);
     expect(`.o_field_char input`).toHaveCount(1);
 });
 
@@ -11887,7 +11887,7 @@ test(`action button in x2many should display a notification if the record is vir
                 <field name="child_ids">
                     <list editable="bottom">
                         <field name="foo"/>
-                        <button class="oe_stat_button" name="test_action" type="object" icon="fa-check">MyButton</button>
+                        <button class="oe_stat_button" name="test_action" type="object" icon="check">MyButton</button>
                     </list>
                 </field>
             </form>
@@ -13044,7 +13044,7 @@ test(`statusbar buttons are correctly rendered in mobile`, async () => {
 
     expect(".o_statusbar_buttons button:eq(0)").toHaveText("Confirm");
     // open the dropdown
-    await contains(".o_statusbar_buttons button:has(.oi-ellipsis-v)").click();
+    await contains(".o_statusbar_buttons button:has([data-icon='more_vert'])").click();
     await animationFrame();
     expect(".o-dropdown--menu:visible").toHaveCount(1, { message: "dropdown should be visible" });
     expect(".o-dropdown--menu button").toHaveCount(1, {
@@ -13075,11 +13075,11 @@ test(`statusbar widgets should appear in the CogMenu dropdown`, async () => {
 
     expect(".o_statusbar_buttons button:eq(0)").toHaveText("Attach document");
     // Now there should an action dropdown, because there are two visible buttons
-    expect(".o_statusbar_buttons button:has(.oi-ellipsis-v)").toHaveCount(1, {
+    expect(".o_statusbar_buttons button:has([data-icon='more_vert'])").toHaveCount(1, {
         message: "should have 'More' dropdown",
     });
 
-    await contains(".o_statusbar_buttons button:has(.oi-ellipsis-v)").click();
+    await contains(".o_statusbar_buttons button:has([data-icon='more_vert'])").click();
     expect(".o-dropdown--menu button").toHaveCount(1, {
         message: "should have 1 button in the dropdown",
     });
@@ -13087,7 +13087,7 @@ test(`statusbar widgets should appear in the CogMenu dropdown`, async () => {
     // change display_name to update buttons modifiers and make one button visible
     await contains(".o_field_widget[name=name] input").edit("first record");
     expect(".o_statusbar_buttons button:eq(0)").toHaveText("Attach document");
-    expect(".o_statusbar_buttons button:has(.oi-ellipsis-v)").toHaveCount(0, {
+    expect(".o_statusbar_buttons button:has([data-icon='more_vert'])").toHaveCount(0, {
         message: "shouldn't have 'More' dropdown",
     });
 });
@@ -13120,23 +13120,23 @@ test(`CogMenu dropdown's open/close state shouldn't be modified after 'onchange'
             `,
     });
 
-    expect(".o_cp_action_menus button:has(.fa-cog)").toHaveCount(1, {
+    expect(".o_cp_action_menus button:has([data-icon='settings'])").toHaveCount(1, {
         message: "statusbar should contain a dropdown",
     });
-    expect(".o_cp_action_menus button:has(.fa-cog)").not.toHaveClass("show", {
+    expect(".o_cp_action_menus button:has([data-icon='settings'])").not.toHaveClass("show", {
         message: "dropdown should be opened",
     });
 
     await contains(".o_field_widget[name=name] input").edit("before onchange");
-    await contains(".o_cp_action_menus button:has(.fa-cog)").click();
-    expect(".o_cp_action_menus button:has(.fa-cog)").toHaveClass("show", {
+    await contains(".o_cp_action_menus button:has([data-icon='settings'])").click();
+    expect(".o_cp_action_menus button:has([data-icon='settings'])").toHaveClass("show", {
         message: "dropdown should be opened",
     });
 
     onchangeDef.resolve({ value: { name: "after onchange" } });
     await animationFrame();
     expect(".o_field_widget[name=name] input").toHaveValue("after onchange");
-    expect(".o_cp_action_menus button:has(.fa-cog)").toHaveClass("show", {
+    expect(".o_cp_action_menus button:has([data-icon='settings'])").toHaveClass("show", {
         message: "dropdown should be opened",
     });
 });
@@ -13262,7 +13262,7 @@ test(`preserve current scroll position on form view while closing dialog`, async
     });
 
     // click on back button
-    await contains(".modal .modal-header .oi-arrow-left").click();
+    await contains(".modal .modal-header [data-icon='west']").click();
 
     expect(window.scrollY).toBe(265, { message: "Should have scrolled 265 px vertically" });
     expect(window.scrollX).toBe(0, { message: "Should be 0 px from left as it is" });
@@ -13306,7 +13306,7 @@ test("attach_document widget also works inside a dropdown", async () => {
         `,
     });
 
-    await contains(".o_statusbar_buttons button:has(.oi-ellipsis-v)").click();
+    await contains(".o_statusbar_buttons button:has([data-icon='more_vert'])").click();
     await contains(".o_attach_document").click();
     await manuallyDispatchProgrammaticEvent(fileInput, "change");
     await animationFrame();
diff --git a/addons/web/static/tests/views/graph/graph_test_helpers.js b/addons/web/static/tests/views/graph/graph_test_helpers.js
index 694d8dd159ea9e..dbc9b108bc5754 100644
--- a/addons/web/static/tests/views/graph/graph_test_helpers.js
+++ b/addons/web/static/tests/views/graph/graph_test_helpers.js
@@ -85,7 +85,7 @@ export const checkTooltip = (view, { title, lines }, index, datasetIndex = null)
 /**
  * @param {"asc" | "desc"} direction
  */
-export const clickSort = (direction) => contains(`.fa-sort-amount-${direction}`).click();
+export const clickSort = (direction) => contains(`.o_sort_${direction}`).click();
 
 /**
  * @param {GraphView} view
diff --git a/addons/web/static/tests/views/graph/graph_view.test.js b/addons/web/static/tests/views/graph/graph_view.test.js
index cd12337b9baa49..1945008be57ba2 100644
--- a/addons/web/static/tests/views/graph/graph_view.test.js
+++ b/addons/web/static/tests/views/graph/graph_view.test.js
@@ -2202,48 +2202,48 @@ test("graph view sort by measure", async () => {
         `,
     });
 
-    expect(".fa-sort-amount-asc").toHaveCount(1);
-    expect(".fa-sort-amount-desc").toHaveCount(1);
+    expect("[data-icon='sort'].oi-flip-vertical").toHaveCount(1);
+    expect("[data-icon='sort']:not(.oi-flip-vertical)").toHaveCount(1);
 
     checkLegend(view, []);
     checkMeasure("Count");
-    expect(".fa-sort-amount-desc").toHaveClass("active");
+    expect("[data-icon='sort']:not(.oi-flip-vertical)").toHaveClass("active");
     checkDatasets(view, "data", { data: [4, 3, 1] });
 
     await clickSort("asc");
 
-    expect(".fa-sort-amount-asc").toHaveClass("active");
+    expect("[data-icon='sort'].oi-flip-vertical").toHaveClass("active");
     checkDatasets(view, "data", { data: [1, 3, 4] });
 
     await clickSort("desc");
 
-    expect(".fa-sort-amount-desc").toHaveClass("active");
+    expect("[data-icon='sort']:not(.oi-flip-vertical)").toHaveClass("active");
     checkDatasets(view, "data", { data: [4, 3, 1] });
 
     // again click on descending button to deactivate order
     await clickSort("desc");
 
-    expect(".fa-sort-amount-desc").not.toHaveClass("active");
+    expect("[data-icon='sort']:not(.oi-flip-vertical)").not.toHaveClass("active");
     checkDatasets(view, "data", { data: [4, 1, 3] });
 
     // set line mode
     await selectMode("line");
-    expect(".fa-sort-amount-asc").toHaveCount(1);
-    expect(".fa-sort-amount-desc").toHaveCount(1);
+    expect("[data-icon='sort'].oi-flip-vertical").toHaveCount(1);
+    expect("[data-icon='sort']:not(.oi-flip-vertical)").toHaveCount(1);
 
     checkLegend(view, []);
     checkMeasure("Count");
-    expect(".fa-sort-amount-desc").not.toHaveClass("active");
+    expect("[data-icon='sort']:not(.oi-flip-vertical)").not.toHaveClass("active");
     checkDatasets(view, "data", { data: [4, 1, 3] });
 
     await clickSort("asc");
 
-    expect(".fa-sort-amount-asc").toHaveClass("active");
+    expect("[data-icon='sort'].oi-flip-vertical").toHaveClass("active");
     checkDatasets(view, "data", { data: [1, 3, 4] });
 
     await clickSort("desc");
 
-    expect(".fa-sort-amount-desc").toHaveClass("active");
+    expect("[data-icon='sort']:not(.oi-flip-vertical)").toHaveClass("active");
     checkDatasets(view, "data", { data: [4, 3, 1] });
 });
 
@@ -2268,18 +2268,18 @@ test("graph view sort by measure for grouped data", async () => {
 
     await clickSort("asc");
 
-    expect(".fa-sort-amount-asc").toHaveClass("active");
+    expect("[data-icon='sort']").toHaveClass("active");
     checkDatasets(view, "data", [{ data: [1, 3, 1] }, { data: [0, 0, 3] }, { data: [1, 3, 4] }]);
 
     await clickSort("desc");
 
-    expect(".fa-sort-amount-desc").toHaveClass("active");
+    expect("[data-icon='sort']").toHaveClass("active");
     checkDatasets(view, "data", [{ data: [1, 3, 1] }, { data: [3, 0, 0] }, { data: [4, 3, 1] }]);
 
     // again click on descending button to deactivate order
     await clickSort("desc");
 
-    expect(".fa-sort-amount-desc").not.toHaveClass("active");
+    expect("[data-icon='sort']").not.toHaveClass("active");
     checkDatasets(view, "data", [{ data: [1, 1, 3] }, { data: [3, 0, 0] }, { data: [4, 1, 3] }]);
 });
 
@@ -2317,7 +2317,7 @@ test("graph view sort by measure for multiple grouped data", async () => {
 
     await clickSort("asc");
 
-    expect(".fa-sort-amount-asc").toHaveClass("active");
+    expect("[data-icon='sort']").toHaveClass("active");
     checkDatasets(view, "data", [
         { data: [1, 1, 2, 2] },
         { data: [0, 1, 0, 0] },
@@ -2327,7 +2327,7 @@ test("graph view sort by measure for multiple grouped data", async () => {
 
     await clickSort("desc");
 
-    expect(".fa-sort-amount-desc").toHaveClass("active");
+    expect("[data-icon='sort']").toHaveClass("active");
     checkDatasets(view, "data", [
         { data: [1, 0, 0, 0] },
         { data: [2, 1, 2, 1] },
@@ -2338,7 +2338,7 @@ test("graph view sort by measure for multiple grouped data", async () => {
     // again click on descending button to deactivate order
     await clickSort("desc");
 
-    expect(".fa-sort-amount-desc").not.toHaveClass("active");
+    expect("[data-icon='sort']").not.toHaveClass("active");
     checkDatasets(view, "data", [
         { data: [1, 0, 0, 0] },
         { data: [1, 2, 1, 2] },
diff --git a/addons/web/static/tests/views/kanban/kanban_column_progressbar.test.js b/addons/web/static/tests/views/kanban/kanban_column_progressbar.test.js
index 62713d786a436e..8d3d0cd5b43d52 100644
--- a/addons/web/static/tests/views/kanban/kanban_column_progressbar.test.js
+++ b/addons/web/static/tests/views/kanban/kanban_column_progressbar.test.js
@@ -2351,7 +2351,7 @@ test("[Offline] search in kanban with progressbar", async () => {
     expect(queryAllTexts(".o_kanban_record")).toEqual(["blip", "blip"]);
     expect(".o_kanban_record.o_disabled_offline").toHaveCount(2);
 
-    await contains(".o_searchview_facet .oi-close").click();
+    await contains(".o_searchview_facet [data-icon='close']").click();
     expect(".o_kanban_group").toHaveCount(2);
     expect(queryAllTexts(".o_kanban_counter")).toEqual(["", ""]);
     expect(".o_column_progress").toHaveClass("opacity-50 pe-none");
diff --git a/addons/web/static/tests/views/kanban/kanban_view.test.js b/addons/web/static/tests/views/kanban/kanban_view.test.js
index 1337600003e8b7..a0e8f67e82d4ee 100644
--- a/addons/web/static/tests/views/kanban/kanban_view.test.js
+++ b/addons/web/static/tests/views/kanban/kanban_view.test.js
@@ -460,7 +460,7 @@ test("Hide tooltip when user click inside a kanban headers item", async () => {
     await runAllTimers();
     expect(".o-tooltip").toHaveCount(1);
 
-    await contains(".o_kanban_group:first-child .o_kanban_header_title .fa-gear", {
+    await contains(".o_kanban_group:first-child .o_kanban_header_title [data-icon='settings']", {
         visible: false,
     }).click();
     expect(".o-tooltip").toHaveCount(0);
@@ -1845,7 +1845,7 @@ test("priority field should not be editable when missing access rights", async (
     });
     // Try to fill one star in the priority field of the first record
     await contains(".o_kanban_record:first-child .o_priority_star:first-child").click();
-    expect(".o_kanban_record:first-child .o_priority .fa-star-o").toHaveCount(2, {
+    expect(".o_kanban_record:first-child .o_priority [data-icon='star']").toHaveCount(2, {
         message: "first record should still contain 2 empty stars",
     });
 });
@@ -4693,7 +4693,7 @@ test("support styling of anchor tags with action type", async function (assert)
                 <templates>
                     <div t-name="card">
                         <field name="foo"/>
-                        <a type="action" name="42" class="btn-primary" style="margin-left: 10px"><i class="oi oi-arrow-right"/> Click me !</a>
+                        <a type="action" name="42" class="btn-primary" style="margin-left: 10px"><i class="oi" data-icon="east"/> Click me !</a>
                     </div>
                 </templates>
             </kanban>`,
@@ -8831,7 +8831,7 @@ test(`kanban with custom cog action that has a confirmation target="new" action`
     await keyDown("alt");
     await contains(".o_kanban_record:nth-of-type(1)").click();
     expect(".o_selection_box").toHaveCount(1);
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     await contains(`.o-dropdown-item:contains(Sort of confirmation dialog)`).click();
     expect(".o_dialog").toHaveCount(1);
 
@@ -9903,7 +9903,7 @@ test(`[Offline] use offline searchbar`, async () => {
         "Filter Blip",
     ]);
 
-    await contains(".o_offline_search_bar .o_searchview_facet .oi-close").click(); // remove search
+    await contains(".o_offline_search_bar .o_searchview_facet [data-icon='close']").click(); // remove search
     expect(".o_offline_search_bar .o_searchview_facet").toHaveCount(0);
     expect(".o_kanban_group").toHaveCount(0);
     expect(".o_kanban_record:not(.o_kanban_ghost)").toHaveCount(4);
@@ -10048,7 +10048,7 @@ test(`[Offline] keep facets name when coming back online (favorite filter)`, asy
 
     // Switch offline and visit available filters
     await setOffline(true);
-    await contains(".o_searchview_facet .oi-close").click();
+    await contains(".o_searchview_facet [data-icon='close']").click();
     expect(".o_kanban_record:not(.o_kanban_ghost)").toHaveCount(4);
     await toggleSearchBarMenu();
     await contains(".o_search_bar_menu_offline .o-dropdown-item:eq(0)").click();
@@ -10057,7 +10057,7 @@ test(`[Offline] keep facets name when coming back online (favorite filter)`, asy
     // Switch back online
     await setOffline(false);
     expect(queryAllTexts(".o_searchview .o_facet_values")).toEqual(["My favorite"]);
-    expect(".o_searchview_facet .fa-star").toHaveCount(1);
+    expect(".o_searchview_facet [data-icon='star']").toHaveCount(1);
 
     await toggleSearchBarMenu();
     await toggleMenuItem("GroupBy Blip");
diff --git a/addons/web/static/tests/views/list/column_widths.test.js b/addons/web/static/tests/views/list/column_widths.test.js
index fef675f522bcf1..d50fa0ed333dc9 100644
--- a/addons/web/static/tests/views/list/column_widths.test.js
+++ b/addons/web/static/tests/views/list/column_widths.test.js
@@ -576,7 +576,7 @@ test(`width computation: no record, nameless and stringless buttons`, async () =
             <list>
                 <field name="foo"/>
                 <button string="choucroute"/>
-                <button icon="fa-heart"/>
+                <button icon="favorite" icon_class="oi-filled"/>
             </list>
         `,
     });
@@ -828,10 +828,10 @@ test(`width computation: button with width in arch`, async () => {
             <list>
                 <field name="foo"/>
                 <button string="choucroute"/>
-                <button icon="fa-heart" width="25px"/>
-                <button icon="fa-cog" width="59px"/>
-                <button icon="fa-list"/>
-                <button icon="fa-play"/>
+                <button icon="favorite" icon_class="oi-filled" width="25px"/>
+                <button icon="settings" icon_class="oi-filled" width="59px"/>
+                <button icon="format_list_bulleted"/>
+                <button icon="play_arrow"/>
             </list>
         `,
     });
@@ -1636,7 +1636,7 @@ test(`resize: unnamed columns cannot be resized`, async () => {
                     <field name="o2m">
                         <list editable="top">
                             <field name="display_name"/>
-                            <button name="the_button" icon="fa-heart"/>
+                            <button name="the_button" icon="favorite" icon_class="oi-filled"/>
                         </list>
                     </field>
                 </sheet>
diff --git a/addons/web/static/tests/views/list/list_view.test.js b/addons/web/static/tests/views/list/list_view.test.js
index 0b686f24fac92c..f31f00d371f28b 100644
--- a/addons/web/static/tests/views/list/list_view.test.js
+++ b/addons/web/static/tests/views/list/list_view.test.js
@@ -218,7 +218,7 @@ defineModels([Foo, Bar, Currency, ResCompany, ResPartner, ResUsers]);
 
 async function clickControlPanelAction(buttonName) {
     if (getMockEnv().isSmall) {
-        await contains(".o_control_panel_breadcrumbs .o_cp_action_menus .fa-cog").click();
+        await contains(".o_control_panel_breadcrumbs .o_cp_action_menus [data-icon='settings']").click();
         await contains(`.o-dropdown-item button[name="${buttonName}"]`).click();
     } else {
         await contains(`.o_control_panel_actions button[name="${buttonName}"]`).click();
@@ -1076,11 +1076,11 @@ test(`list view with adjacent buttons`, async () => {
         type: "list",
         arch: `
             <list>
-                <button name="a" type="object" icon="fa-car"/>
+                <button name="a" type="object" icon="directions_car"/>
                 <field name="foo"/>
-                <button name="x" type="object" icon="fa-star"/>
-                <button name="y" type="object" icon="fa-refresh"/>
-                <button name="z" type="object" icon="fa-exclamation"/>
+                <button name="x" type="object" icon="star" icon_class="oi-filled"/>
+                <button name="y" type="object" icon="refresh"/>
+                <button name="z" type="object" icon="priority_high"/>
             </list>
         `,
     });
@@ -1096,14 +1096,14 @@ test(`list view with adjacent buttons and invisible field and button`, async ()
         resModel: "foo",
         arch: `
             <list>
-                <button name="a" type="object" icon="fa-car"/>
+                <button name="a" type="object" icon="directions_car"/>
                 <field name="foo" column_invisible="1"/>
                 <!--Here the column_invisible=1 is used to simulate a group on the case that the user
                     don't have the rights to see the button.-->
-                <button name="b" type="object" icon="fa-car" column_invisible="1"/>
-                <button name="x" type="object" icon="fa-star"/>
-                <button name="y" type="object" icon="fa-refresh"/>
-                <button name="z" type="object" icon="fa-exclamation"/>
+                <button name="b" type="object" icon="directions_car" column_invisible="1"/>
+                <button name="x" type="object" icon="star" icon_class="oi-filled"/>
+                <button name="y" type="object" icon="refresh"/>
+                <button name="z" type="object" icon="priority_high"/>
             </list>
         `,
     });
@@ -1120,11 +1120,11 @@ test(`list view with adjacent buttons and invisible field (modifier)`, async ()
         type: "list",
         arch: `
             <list>
-                <button name="a" type="object" icon="fa-car"/>
+                <button name="a" type="object" icon="directions_car"/>
                 <field name="foo" invisible="foo == 'blip'"/>
-                <button name="x" type="object" icon="fa-star"/>
-                <button name="y" type="object" icon="fa-refresh"/>
-                <button name="z" type="object" icon="fa-exclamation"/>
+                <button name="x" type="object" icon="star" icon_class="oi-filled"/>
+                <button name="y" type="object" icon="refresh"/>
+                <button name="z" type="object" icon="priority_high"/>
             </list>
         `,
     });
@@ -1140,11 +1140,11 @@ test(`list view with adjacent buttons and optional field`, async () => {
         type: "list",
         arch: `
             <list>
-                <button name="a" type="object" icon="fa-car"/>
+                <button name="a" type="object" icon="directions_car"/>
                 <field name="foo" optional="hide"/>
-                <button name="x" type="object" icon="fa-star"/>
-                <button name="y" type="object" icon="fa-refresh"/>
-                <button name="z" type="object" icon="fa-exclamation"/>
+                <button name="x" type="object" icon="star" icon_class="oi-filled"/>
+                <button name="y" type="object" icon="refresh"/>
+                <button name="z" type="object" icon="priority_high"/>
             </list>
         `,
     });
@@ -1176,7 +1176,7 @@ test(`wait the view reload before closing the dialog (save)`, async () => {
         arch: `
             <list editable="bottom">
                 <field name="foo"/>
-                <button name="a" type="object" icon="fa-car"/>
+                <button name="a" type="object" icon="directions_car"/>
             </list>
         `,
     });
@@ -1217,7 +1217,7 @@ test(`wait the view reload before closing the dialog (cancel)`, async () => {
         arch: `
             <list editable="bottom">
                 <field name="foo"/>
-                <button name="a" type="object" icon="fa-car"/>
+                <button name="a" type="object" icon="directions_car"/>
             </list>
         `,
     });
@@ -1243,9 +1243,9 @@ test(`list view with adjacent buttons with invisible modifier`, async () => {
         arch: `
             <list>
                 <field name="foo"/>
-                <button name="x" type="object" icon="fa-star" invisible="foo == 'blip'"/>
-                <button name="y" type="object" icon="fa-refresh" invisible="foo == 'yop'"/>
-                <button name="z" type="object" icon="fa-exclamation" invisible="foo == 'gnap'"/>
+                <button name="x" type="object" icon="star" icon_class="oi-filled" invisible="foo == 'blip'"/>
+                <button name="y" type="object" icon="refresh" invisible="foo == 'yop'"/>
+                <button name="z" type="object" icon="priority_high" invisible="foo == 'gnap'"/>
             </list>
         `,
     });
@@ -1255,9 +1255,9 @@ test(`list view with adjacent buttons with invisible modifier`, async () => {
     expect(`.o_data_row`).toHaveCount(4);
     expect(`.o_data_row td.o_list_button`).toHaveCount(4);
     expect(queryAllTexts(`.o_data_cell`)).toEqual(["yop", "", "blip", "", "gnap", "", "blip", ""]);
-    expect(`td button i.fa-star`).toHaveCount(2);
-    expect(`td button i.fa-refresh`).toHaveCount(3);
-    expect(`td button i.fa-exclamation`).toHaveCount(3);
+    expect(`td button i[data-icon="star"].oi-filled`).toHaveCount(2);
+    expect(`td button i[data-icon="refresh"]`).toHaveCount(3);
+    expect(`td button i[data-icon="priority_high"]`).toHaveCount(3);
 });
 
 test(`list view with adjacent buttons with width attribute`, async () => {
@@ -1267,20 +1267,20 @@ test(`list view with adjacent buttons with width attribute`, async () => {
         arch: `
             <list>
                 <field name="foo"/>
-                <button icon="fa-play"/>
-                <button icon="fa-heart" width="25px"/>
-                <button icon="fa-cog"/>
-                <button icon="fa-list"/>
+                <button icon="play_arrow"/>
+                <button icon="favorite" icon_class="oi-filled" width="25px"/>
+                <button icon="settings" icon_class="oi-filled"/>
+                <button icon="format_list_bulleted"/>
             </list>
         `,
     });
     expect(`th:not(.o_list_record_selector)`).toHaveCount(4, {
         message: "adjacent buttons with no width in the arch must be grouped in a single column",
     });
-    expect(".o_data_row td:not(.o_list_record_selector):eq(1) .fa-play").toHaveCount(1);
-    expect(".o_data_row td:not(.o_list_record_selector):eq(2) .fa-heart").toHaveCount(1);
-    expect(".o_data_row td:not(.o_list_record_selector):eq(3) .fa-cog").toHaveCount(1);
-    expect(".o_data_row td:not(.o_list_record_selector):eq(3) .fa-list").toHaveCount(1);
+    expect(".o_data_row td:not(.o_list_record_selector):eq(1) [data-icon='play_arrow']").toHaveCount(1);
+    expect(".o_data_row td:not(.o_list_record_selector):eq(2) [data-icon='favorite']").toHaveCount(1);
+    expect(".o_data_row td:not(.o_list_record_selector):eq(3) [data-icon='settings']").toHaveCount(1);
+    expect(".o_data_row td:not(.o_list_record_selector):eq(3) [data-icon='format_list_bulleted']").toHaveCount(1);
 });
 
 test(`list view with icon buttons`, async () => {
@@ -1291,17 +1291,17 @@ test(`list view with icon buttons`, async () => {
         type: "list",
         arch: `
             <list>
-                <button name="x" type="object" icon="fa-asterisk"/>
-                <button name="x" type="object" icon="fa-star" class="o_yeah"/>
-                <button name="x" type="object" icon="fa-refresh" string="Refresh" class="o_yeah"/>
-                <button name="x" type="object" icon="fa-exclamation" string="Danger" class="o_yeah btn-danger"/>
+                <button name="x" type="object" icon="emergency"/>
+                <button name="x" type="object" icon="star" icon_class="oi-filled" class="o_yeah"/>
+                <button name="x" type="object" icon="refresh" string="Refresh" class="o_yeah"/>
+                <button name="x" type="object" icon="priority_high" string="Danger" class="o_yeah btn-danger"/>
             </list>
         `,
     });
-    expect(`button.btn.btn-link i.fa.fa-asterisk`).toHaveCount(1);
-    expect(`button.btn.btn-link.o_yeah i.fa.fa-star`).toHaveCount(1);
-    expect(`button.btn.btn-link.o_yeah:contains(Refresh) i.fa.fa-refresh`).toHaveCount(1);
-    expect(`button.btn.btn-danger.o_yeah:contains(Danger) i.fa.fa-exclamation`).toHaveCount(1);
+    expect(`button.btn.btn-link i[data-icon="emergency"]`).toHaveCount(1);
+    expect(`button.btn.btn-link.o_yeah i[data-icon="star"].oi-filled`).toHaveCount(1);
+    expect(`button.btn.btn-link.o_yeah:contains(Refresh) i[data-icon="refresh"]`).toHaveCount(1);
+    expect(`button.btn.btn-danger.o_yeah:contains(Danger) i[data-icon="priority_high"]`).toHaveCount(1);
     expect(`button.btn.btn-link.btn-danger`).toHaveCount(0);
 });
 
@@ -1311,8 +1311,8 @@ test(`list view with disabled button`, async () => {
         type: "list",
         arch: `
             <list>
-                <button name="a" icon="fa-coffee"/>
-                <button name="b" icon="fa-car" disabled="disabled"/>
+                <button name="a" icon="coffee"/>
+                <button name="b" icon="directions_car" disabled="disabled"/>
             </list>
         `,
     });
@@ -1370,10 +1370,10 @@ test(`list view: action button in controlPanel basic rendering on mobile`, async
         `,
     });
     expect(`.o_control_panel_actions > *`).toHaveCount(0);
-    await contains(".o_control_panel_breadcrumbs .o_cp_action_menus .fa-cog").click();
+    await contains(".o_control_panel_breadcrumbs .o_cp_action_menus [data-icon='settings']").click();
     expect(queryAllTexts(`.o-dropdown--menu .o-dropdown-item`)).toEqual(["Export"]);
     await clickRecordSelector();
-    await contains(".o_control_panel_breadcrumbs .o_cp_action_menus .fa-cog").click();
+    await contains(".o_control_panel_breadcrumbs .o_cp_action_menus [data-icon='settings']").click();
     expect(queryAllTexts(`.o-dropdown--menu .o-dropdown-item`)).toEqual([
         "plaf",
         "Export",
@@ -1381,7 +1381,7 @@ test(`list view: action button in controlPanel basic rendering on mobile`, async
         "Delete",
     ]);
     await clickRecordSelector();
-    await contains(".o_control_panel_breadcrumbs .o_cp_action_menus .fa-cog").click();
+    await contains(".o_control_panel_breadcrumbs .o_cp_action_menus [data-icon='settings']").click();
     expect(queryAllTexts(`.o-dropdown--menu .o-dropdown-item`)).toEqual(["Export"]);
 });
 
@@ -1462,7 +1462,7 @@ test(`list view: action button in controlPanel with display='always' on mobile`,
     ]);
 
     await clickRecordSelector();
-    await contains(".o_control_panel_breadcrumbs .o_cp_action_menus .fa-cog").click();
+    await contains(".o_control_panel_breadcrumbs .o_cp_action_menus [data-icon='settings']").click();
     expect(queryAllTexts(`.o-dropdown--menu .o-dropdown-item`)).toEqual([
         "",
         "default-selection",
@@ -2192,7 +2192,7 @@ test(`discard a new record in editable="top" list with less than 4 records`, asy
     expect(`tbody tr:eq(0)`).toHaveClass("o_selected_row");
 
     if (getMockEnv().isSmall) {
-        await contains(".o_control_panel_main_buttons button > .oi-ellipsis-v").click();
+        await contains(".o_control_panel_main_buttons button > [data-icon='more_vert']").click();
         expect(`.o_list_button_discard`).toHaveCount(0);
         expect(`.o_control_panel .o_list_button_add`).toHaveCount(1);
     } else {
@@ -3359,12 +3359,12 @@ test(`change a record field in readonly should change same record in other group
     await contains(`.o_group_header`).click(); // open Value 1 group
     await contains(`.o_group_header:eq(1)`).click(); // open Value 2 group
     expect(queryAllTexts(`.o_list_char`)).toEqual(["yop", "blip", "yop"]);
-    expect(`.o_priority_star.fa-star`).toHaveCount(0, {
+    expect(`.o_priority_star[data-icon="star"].oi-filled`).toHaveCount(0, {
         message: "should not have any starred records",
     });
 
     await contains(`.o_priority_star`).click();
-    expect(`.o_priority_star.fa-star`).toHaveCount(2, {
+    expect(`.o_priority_star[data-icon="star"].oi-filled`).toHaveCount(2, {
         message: "both 'yop' records should have been starred",
     });
     expect.verifySteps(["web_save"]);
@@ -7364,7 +7364,7 @@ test(`can display button in edit mode`, async () => {
         arch: `
             <list editable="top">
                 <field name="foo"/>
-                <button name="notafield" type="object" icon="fa-asterisk" class="o_yeah"/>
+                <button name="notafield" type="object" icon="emergency" class="o_yeah"/>
             </list>
         `,
     });
@@ -8380,7 +8380,7 @@ test(`edit button does not trigger fold group`, async () => {
             <list>
                 <field name="foo"/>
                 <groupby name="currency_id">
-                    <button name="edit" type="edit" icon="fa-edit" title="Edit"/>
+                    <button name="edit" type="edit" icon="edit" icon_class="oi-filled" title="Edit"/>
                 </groupby>
             </list>
         `,
@@ -8525,7 +8525,7 @@ test(`list view, editable, without data`, async () => {
                 <field name="foo"/>
                 <field name="date"/>
                 <field name="m2o"/>
-                <button type="object" icon="fa-plus-square" name="method"/>
+                <button type="object" icon="add_box" icon_class="oi-filled" name="method"/>
             </list>
         `,
         noContentHelp: "click to add a partner",
@@ -8583,12 +8583,12 @@ test(`list view, editable, with a button`, async () => {
         arch: `
             <list editable="top">
                 <field name="foo"/>
-                <button string="abc" icon="fa-phone" type="object" name="schedule_another_phonecall"/>
+                <button string="abc" icon="phone" type="object" name="schedule_another_phonecall"/>
             </list>
         `,
     });
     await contains(`.o_list_button_add`).click();
-    expect(`table button i.o_button_icon.fa-phone`).toHaveCount(1, {
+    expect(`table button i.o_button_icon[data-icon="phone"]`).toHaveCount(1, {
         message: "should have rendered a button",
     });
     expect(`table button:eq(0)`).toHaveProperty("disabled", false, {
@@ -8784,7 +8784,7 @@ test(`click on a button in a list view`, async () => {
         arch: `
             <list>
                 <field name="foo"/>
-                <button string="a button" name="button_action" icon="fa-car" type="object"/>
+                <button string="a button" name="button_action" icon="directions_car" type="object"/>
             </list>
         `,
     });
@@ -8798,7 +8798,7 @@ test(`click on a button in a list view`, async () => {
     expect(`tbody .o_list_button`).toHaveCount(4, {
         message: "there should be one button per row",
     });
-    expect(`.o_data_row .o_list_button .o_button_icon.fa.fa-car`).toHaveCount(4);
+    expect(`.o_data_row .o_list_button .o_button_icon[data-icon="directions_car"]`).toHaveCount(4);
 
     await contains(`.o_data_row .o_list_button button`).click();
     // should have reloaded the view (after the action is complete)
@@ -8822,7 +8822,7 @@ test("click on a button in a list view on second page", async () => {
         arch: `
             <list limit="3">
                 <field name="foo"/>
-                <button string="a button" name="button_action" icon="fa-car" type="object"/>
+                <button string="a button" name="button_action" icon="directions_car" type="object"/>
             </list>
         `,
     });
@@ -8850,7 +8850,7 @@ test(`invisible attrs in readonly and editable list`, async () => {
         type: "list",
         arch: `
             <list editable="top">
-                <button string="a button" name="button_action" icon="fa-car" type="object" invisible="id == 1"/>
+                <button string="a button" name="button_action" icon="directions_car" type="object" invisible="id == 1"/>
                 <field name="int_field"/>
                 <field name="qux"/>
                 <field name="foo" invisible="id == 1"/>
@@ -9006,7 +9006,7 @@ test(`list view with nested groups`, async () => {
     // basic rendering tests
     expect(`.o_group_header`).toHaveCount(2);
     expect(queryAllTexts(`.o_group_name`, { inline: true })).toEqual(["Value 1 4", "Value 2 2"]);
-    expect(`.o_group_name .fa-caret-right`).toHaveCount(2);
+    expect(`.o_group_name [data-icon="arrow_right"]`).toHaveCount(2);
     expect(`.o_group_header:eq(0) span:first`).toHaveStyle({ "--o-list-group-level": "0" });
     expect(queryAllTexts(`.o_group_header .o_list_number`)).toEqual(["16", "14"]);
 
@@ -9020,7 +9020,7 @@ test(`list view with nested groups`, async () => {
         "yop 1",
         "Value 2 2",
     ]);
-    expect(`.o_group_name:eq(0) .fa-caret-down`).toHaveCount(1);
+    expect(`.o_group_name:eq(0) [data-icon="arrow_drop_down"]`).toHaveCount(1);
     expect(`.o_group_header:eq(1) span:first`).toHaveStyle({ "--o-list-group-level": "1" });
     expect(queryAllTexts(`.o_group_header .o_list_number`)).toEqual([
         "16",
@@ -9052,7 +9052,7 @@ test(`list view with nested groups`, async () => {
     await contains(`.o_group_header:eq(1)`).click();
     expect.verifySteps([]);
     expect(`.o_group_header`).toHaveCount(2);
-    expect(`.o_group_name .fa-caret-right`).toHaveCount(2);
+    expect(`.o_group_name [data-icon='arrow_right']`).toHaveCount(2);
     expect(`.o_data_row`).toHaveCount(0);
 });
 
@@ -13093,13 +13093,13 @@ test(`grouped list edition with boolean_favorite widget`, async () => {
     });
 
     await contains(`.o_group_header`).click();
-    expect(`.o_data_row:eq(0) .fa-star`).toHaveCount(1, {
+    expect(`.o_data_row:eq(0) [data-icon="star"].oi-filled`).toHaveCount(1, {
         message: "boolean value of the first record should be true",
     });
 
-    await contains(".o_data_row:eq(0) .fa-star", { visible: false }).click();
+    await contains(".o_data_row:eq(0) [data-icon='star'].oi-filled", { visible: false }).click();
     expect.verifySteps(["web_save"]);
-    expect(`.o_data_row:eq(0) .fa-star-o`).toHaveCount(1, {
+    expect(`.o_data_row:eq(0) [data-icon="star"]`).toHaveCount(1, {
         message: "boolean value of the first record should have been updated",
     });
 });
@@ -17126,7 +17126,7 @@ test(`list view does not crash when clicked button cell`, async () => {
     await mountView({
         resModel: "foo",
         type: "list",
-        arch: `<list><button name="a" type="object" icon="fa-car"/></list>`,
+        arch: `<list><button name="a" type="object" icon="directions_car"/></list>`,
     });
     expect(`.o_data_row:eq(0) td.o_list_button`).toHaveCount(1);
     await contains(`.o_data_row:eq(0) td.o_list_button`).click();
@@ -17168,7 +17168,7 @@ test(`sort on a non sortable field with allow_order option`, async () => {
     expect(queryAllProperties(`[name=bar] input`, "checked")).toEqual([false, true, true]);
     expect(`th[data-name=bar]`).toHaveClass("o_column_sortable");
     expect(`th[data-name=bar]`).toHaveClass("table-active");
-    expect(`th[data-name=bar] i`).toHaveClass("fa-sort-asc");
+    expect(`th[data-name=bar] i`).toHaveAttribute("data-icon", "arrow_upward");
 });
 
 test(`sort rows in a grouped list view`, async () => {
@@ -17185,7 +17185,7 @@ test(`sort rows in a grouped list view`, async () => {
     await contains(`th[data-name=int_field]`).click();
     expect(queryAllTexts(`.o_data_cell`)).toEqual(["9", "10", "17"]);
     expect(`th[data-name=int_field]`).toHaveClass("o_column_sortable");
-    expect(`th[data-name=int_field] i`).toHaveClass("fa-sort-asc");
+    expect(`th[data-name=int_field] i`).toHaveAttribute("data-icon", "arrow_upward");
 });
 
 test.tags("desktop");
@@ -19008,7 +19008,7 @@ test("selection is properly displayed (single page) on mobile", async () => {
 
     expect(".o_data_row").toHaveCount(4);
     expect(".o_selection_box").toHaveCount(0);
-    expect(".o_control_panel .fa-search").toHaveCount(1);
+    expect(".o_control_panel [data-icon='search']").toHaveCount(1);
 
     // select a record
     await contains(".o_data_row:nth-child(1)").drag();
@@ -19034,7 +19034,7 @@ test("selection is properly displayed (single page) on mobile", async () => {
     // unselect all
     await unselectAllRecords();
     expect(".o_selection_box").toHaveCount(0);
-    expect(".o_control_panel .fa-search").toHaveCount(1);
+    expect(".o_control_panel [data-icon='search']").toHaveCount(1);
 });
 
 test.tags("mobile");
@@ -19426,7 +19426,7 @@ test(`list with custom cog action that has a confirmation target="new" action`,
     expect(".o_list_view").toHaveCount(1);
 
     await selectAllRecords();
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     await contains(`.o-dropdown-item:contains(Sort of confirmation dialog)`).click();
     expect(".o_dialog").toHaveCount(1);
 
@@ -19943,9 +19943,9 @@ test(`cache web_read_group: do not send opening_info if not necessary`, async ()
     // Do not follow the same steps as earlier, directly remove the filter
     if (getMockEnv().isSmall) {
         // Toggle searchbar in mobile
-        await contains(`.o_control_panel_navigation .fa-search`).click();
+        await contains(`.o_control_panel_navigation [data-icon="search"]`).click();
     }
-    await contains(".o_searchview_facet .oi-close").click();
+    await contains(".o_searchview_facet [data-icon='close']").click();
     expect(`.o_group_header`).toHaveCount(4);
 
     expect.verifyErrors([
@@ -20199,7 +20199,7 @@ test(`[Offline] cache web_search_read: enable filter online/offline`, async () =
     expect(".o_search_bar_menu_offline .o-dropdown-item").toHaveCount(1);
     await contains(".o_search_bar_menu_offline .o-dropdown-item").click();
     expect(queryAllTexts(`.o_list_char`)).toEqual(["blip", "blip"]);
-    await contains(".o_searchview_facet .oi-close").click();
+    await contains(".o_searchview_facet [data-icon='close']").click();
     expect(queryAllTexts(`.o_list_char`)).toEqual(["yop", "blip", "gnap", "blip"]);
 
     expect.verifyErrors([
diff --git a/addons/web/static/tests/views/view.test.js b/addons/web/static/tests/views/view.test.js
index b4d6bff3801631..07afbd5fba960a 100644
--- a/addons/web/static/tests/views/view.test.js
+++ b/addons/web/static/tests/views/view.test.js
@@ -45,7 +45,7 @@ class ToyControllerImp extends ToyController {
 
 before(() => {
     patchWithCleanup(serverState.view_info, {
-        toy: { multi_record: true, display_name: "Toy", icon: "fab fa-android" },
+        toy: { multi_record: true, display_name: "Toy", icon: "oi_android" },
     });
     viewRegistry.add("toy", toyView);
     viewRegistry.add("toy_imp", { ...toyView, Controller: ToyControllerImp });
diff --git a/addons/web/static/tests/views/view_dialogs/export_data_dialog.test.js b/addons/web/static/tests/views/view_dialogs/export_data_dialog.test.js
index d7b9a328a738b6..8e2f3d5499c15f 100644
--- a/addons/web/static/tests/views/view_dialogs/export_data_dialog.test.js
+++ b/addons/web/static/tests/views/view_dialogs/export_data_dialog.test.js
@@ -267,7 +267,7 @@ test("Export dialog: interacting with export templates", async () => {
     await contains(".o_export_tree_item:nth-child(2) .o_add_field").click();
     expect(`.o_exported_lists_select`).toHaveCount(1);
     expect(`.o_save_list_btn`).toHaveCount(0);
-    expect(`.o_cancel_list_btn .fa-undo`).toHaveCount(1);
+    expect(`.o_cancel_list_btn [data-icon="undo"]`).toHaveCount(1);
     expect(`.o_fields_list .o_export_field`).toHaveCount(2);
     await contains(".o_cancel_list_btn").click();
     expect(`.o_fields_list .o_export_field`).toHaveCount(1, {
diff --git a/addons/web/static/tests/views/widgets/document_link.test.js b/addons/web/static/tests/views/widgets/document_link.test.js
index 84a399dcb87f10..6c580cd7d99749 100644
--- a/addons/web/static/tests/views/widgets/document_link.test.js
+++ b/addons/web/static/tests/views/widgets/document_link.test.js
@@ -27,7 +27,7 @@ test("documentation_link: default label and icon", async () => {
     });
     expect(".o_doc_link").toHaveText("View Documentation");
     expect("a.alert-link").toHaveCount(0);
-    expect(".o_doc_link .fa-external-link").toHaveCount(1);
+    expect(".o_doc_link [data-icon='open_in_new']").toHaveCount(1);
 });
 
 test("documentationLink: alert-link", async () => {
@@ -65,7 +65,7 @@ test("documentation_link: given label", async () => {
         </form>`,
     });
     expect(".o_doc_link").toHaveText("docdoc");
-    expect(".o_doc_link .fa").toHaveCount(0);
+    expect(".o_doc_link .oi").toHaveCount(0);
 });
 
 test("documentation_link: given icon", async () => {
@@ -75,11 +75,11 @@ test("documentation_link: given icon", async () => {
         arch: /* xml */ `
         <form>
             <field name="bar"/>
-            <widget name="documentation_link" path="/this_is_a_test.html" icon="fa-question-circle"/>
+            <widget name="documentation_link" path="/this_is_a_test.html" icon="help"/>
         </form>`,
     });
     expect(".o_doc_link").toHaveText("");
-    expect(".o_doc_link .fa-question-circle").toHaveCount(1);
+    expect(".o_doc_link [data-icon='help']").toHaveCount(1);
 });
 
 test("documentation_link: given label and icon", async () => {
@@ -89,11 +89,11 @@ test("documentation_link: given label and icon", async () => {
         arch: /* xml */ `
         <form>
             <field name="bar"/>
-            <widget name="documentation_link" path="/this_is_a_test.html" label="docdoc" icon="fa-question-circle"/>
+            <widget name="documentation_link" path="/this_is_a_test.html" label="docdoc" icon="help"/>
         </form>`,
     });
     expect(".o_doc_link").toHaveText("docdoc");
-    expect(".o_doc_link .fa-question-circle").toHaveCount(1);
+    expect(".o_doc_link [data-icon='help']").toHaveCount(1);
 });
 
 test("documentation_link: relative path", async () => {
diff --git a/addons/web/static/tests/views/widgets/signature.test.js b/addons/web/static/tests/views/widgets/signature.test.js
index ae333713d101c2..dfabe66817aa44 100644
--- a/addons/web/static/tests/views/widgets/signature.test.js
+++ b/addons/web/static/tests/views/widgets/signature.test.js
@@ -103,7 +103,7 @@ test("Signature widget renders a Sign button on mobile", async () => {
         </form>`,
     });
 
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     expect("button.o_sign_button").toHaveClass("btn-secondary", {
         message: `The button must have the 'btn-secondary' class as "highlight=0"`,
     });
@@ -171,7 +171,7 @@ test("Signature widget: full_name option on mobile", async () => {
         </form>`,
     });
 
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     // Clicks on the sign button to open the sign modal.
     await click("span.o_sign_label");
     await waitFor(".modal .modal-body");
@@ -217,7 +217,7 @@ test("Signature widget: highlight option on mobile", async () => {
         </form>`,
     });
 
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     expect("button.o_sign_button").toHaveClass("btn-primary", {
         message: `The button must have the 'btn-primary' class as "highlight=1"`,
     });
@@ -260,7 +260,7 @@ test("Signature widget works inside of a dropdown", async () => {
     await contains(".o_field_widget[name=display_name] input").edit("test");
 
     // open the signature dialog
-    await contains(".o_statusbar_buttons button:has(.oi-ellipsis-v").click();
+    await contains(".o_statusbar_buttons button:has([data-icon='more_vert']").click();
     await contains(".o_widget_signature button.o_sign_button").click();
     await waitFor(".modal .modal-body");
 
diff --git a/addons/web/static/tests/webclient/actions/concurrency.test.js b/addons/web/static/tests/webclient/actions/concurrency.test.js
index a04c8ad915a8c5..07311c785a435e 100644
--- a/addons/web/static/tests/webclient/actions/concurrency.test.js
+++ b/addons/web/static/tests/webclient/actions/concurrency.test.js
@@ -692,7 +692,7 @@ test("dialog will only open once for two rapid actions with the target new", asy
 test.tags("desktop");
 test("local state, global state, and race conditions", async () => {
     patchWithCleanup(serverState.view_info, {
-        toy: { multi_record: true, display_name: "Toy", icon: "fab fa-android" },
+        toy: { multi_record: true, display_name: "Toy", icon: "oi_android" },
     });
     Partner._views = {
         toy: `<toy/>`,
diff --git a/addons/web/static/tests/webclient/actions/effect.test.js b/addons/web/static/tests/webclient/actions/effect.test.js
index 7388bc17f1b71b..d77a17ee56dd37 100644
--- a/addons/web/static/tests/webclient/actions/effect.test.js
+++ b/addons/web/static/tests/webclient/actions/effect.test.js
@@ -162,7 +162,7 @@ test("on close with effect in xml on mobile", async () => {
 
     await mountWithCleanup(WebClient);
     await getService("action").doAction(6);
-    await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+    await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
     await contains("button[name=object]").click();
     expect(".o_reward").toHaveCount(1);
     expect(".o_reward .o_reward_msg_content").toHaveText("rainBowInXML");
diff --git a/addons/web/static/tests/webclient/actions/embedded_action.test.js b/addons/web/static/tests/webclient/actions/embedded_action.test.js
index c6fa2418cc5a44..bcaf9122cf1bd2 100644
--- a/addons/web/static/tests/webclient/actions/embedded_action.test.js
+++ b/addons/web/static/tests/webclient/actions/embedded_action.test.js
@@ -57,7 +57,7 @@ class Partner extends models.Model {
             <form>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button class="oe_stat_button" type="action" name="1" icon="fa-star" context="{'default_partner': id}">
+                        <button class="oe_stat_button" type="action" name="1" icon="star" icon_class="oi-filled" context="{'default_partner': id}">
                             <field string="Partners" name="o2m" widget="statinfo"/>
                         </button>
                     </div>
@@ -278,10 +278,10 @@ test("can display embedded actions linked to the current action", async () => {
     await getService("action").doAction(1);
     expect(".o_control_panel").toHaveCount(1, { message: "should have rendered a control panel" });
     expect(".o_kanban_view").toHaveCount(1, { message: "should have rendered a kanban view" });
-    expect(".o_control_panel_navigation > button > i.fa-sliders").toHaveCount(1, {
+    expect(".o_control_panel_navigation > button > i[data-icon='tune']").toHaveCount(1, {
         message: "should display the toggle embedded button",
     });
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     expect(".o_embedded_actions").toHaveCount(1, { message: "should display the embedded" });
     expect(".o_embedded_actions > button > span").toHaveText("Partners Action 1", {
         message:
@@ -300,7 +300,7 @@ test("can display embedded actions linked to the current action", async () => {
 test("can toggle visibility of embedded actions", async () => {
     await mountWithCleanup(WebClient);
     await getService("action").doAction(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     expect(".o_popover.dropdown-menu .dropdown-item").toHaveCount(4, {
         message: "Three embedded actions should be displayed in the dropdown + button 'Save View'",
@@ -327,7 +327,7 @@ test("can toggle visibility of embedded actions", async () => {
 test("can click on a embedded action and execute the corresponding action (with xml_id)", async () => {
     await mountWithCleanup(WebClient);
     await getService("action").doAction(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     await contains(
         ".o_popover.dropdown-menu .dropdown-item > div > span:contains('Embedded Action 2')"
@@ -354,7 +354,7 @@ test("can click on a embedded action and execute the corresponding action (with
         views: [[false, "kanban"]],
     }));
     await getService("action").doAction(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     await contains(
         ".o_popover.dropdown-menu .dropdown-item > div > span:contains('Embedded Action 3')"
@@ -381,7 +381,7 @@ test("breadcrumbs are updated when clicking on embeddeds", async () => {
         views: [[false, "kanban"]],
     }));
     await getService("action").doAction(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     await contains(
         ".o_popover.dropdown-menu .dropdown-item > div > span:contains('Embedded Action 2')"
@@ -426,7 +426,7 @@ test("a view coming from a embedded can be saved in the embedded actions", async
     });
     await mountWithCleanup(WebClient);
     await getService("action").doAction(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     await contains(
         ".o_popover.dropdown-menu .dropdown-item > div > span:contains('Embedded Action 2')"
@@ -492,7 +492,7 @@ test("a view coming from a embedded with python_method can be saved in the embed
     });
     await mountWithCleanup(WebClient);
     await getService("action").doAction(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     await contains(
         ".o_popover.dropdown-menu .dropdown-item > div > span:contains('Embedded Action 3')"
@@ -531,13 +531,13 @@ test("a view coming from a embedded with python_method can be saved in the embed
 test("the embedded actions should not be displayed when switching view", async () => {
     await mountWithCleanup(WebClient);
     await getService("action").doAction(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     await contains(
         ".o_popover.dropdown-menu .dropdown-item > div > span:contains('Embedded Action 2')"
     ).click();
     await contains(".o_embedded_actions > button > span:contains('Embedded Action 2')").click();
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await contains("button.o_switch_view.o_kanban").click();
     expect(".o_embedded_actions").toHaveCount(0, {
         message: "The embedded actions menu should not be displayed",
@@ -548,7 +548,7 @@ test("User can move the main (first) embedded action", async () => {
     mockTouch(true);
     await mountWithCleanup(WebClient);
     await getService("action").doAction(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     await contains(
         ".o_popover.dropdown-menu .dropdown-item > div > span:contains('Embedded Action 2')"
@@ -572,7 +572,7 @@ test("User can move the main (first) embedded action", async () => {
 test("User can unselect the main (first) embedded action", async () => {
     await mountWithCleanup(WebClient);
     await getService("action").doAction(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     const dropdownItem =
         ".o_popover.dropdown-menu .dropdown-item > div > span:contains('Partners Action 1')";
@@ -607,7 +607,7 @@ test("User should be redirected to the first embedded action set in user setting
         name: 1,
         type: "action",
     });
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     expect(".o_embedded_actions > button:first-child").toHaveClass("active", {
         message: "First embedded action in order should have the 'active' class",
     });
@@ -633,7 +633,7 @@ test("execute a regular action from an embedded action", async () => {
     await getService("action").doAction(1);
     expect(".o_kanban_view").toHaveCount(1);
 
-    await contains(".o_control_panel_navigation button .fa-sliders").click();
+    await contains(".o_control_panel_navigation button [data-icon='tune']").click();
     expect(".o_control_panel .o_embedded_actions button:not(.dropdown-toggle)").toHaveCount(1);
 
     await waitFor(".o_popover.dropdown-menu");
@@ -665,7 +665,7 @@ test("custom embedded action loaded first", async () => {
         type: "action",
     });
     expect(".o_list_view").toHaveCount(1);
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     expect(".o_embedded_actions > button:first-child").toHaveClass("active", {
         message: "First embedded action in order should have the 'active' class",
     });
@@ -698,7 +698,7 @@ test("test get_embedded_actions_settings rpc args", async () => {
     await getService("action").doAction(1, {
         additionalContext: { active_id: 5 },
     });
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     expect.verifySteps(["get_embedded_actions_settings"]);
 });
 
@@ -729,7 +729,7 @@ test("an action containing embedded actions should reload if the page is refresh
     await mountWithCleanup(WebClient);
     await getService("action").doAction(1);
     // First, we create a new (custom) embedded action based on the current one
-    await contains(".o_control_panel_navigation > button > i.fa-sliders").click();
+    await contains(".o_control_panel_navigation > button > i[data-icon='tune']").click();
     await waitFor(".o_popover.dropdown-menu");
     await contains(".o_save_current_view ").click();
     await contains(".o_save_favorite ").click();
diff --git a/addons/web/static/tests/webclient/actions/target.test.js b/addons/web/static/tests/webclient/actions/target.test.js
index 737474de88eb85..6e9e034fdc2fe9 100644
--- a/addons/web/static/tests/webclient/actions/target.test.js
+++ b/addons/web/static/tests/webclient/actions/target.test.js
@@ -265,7 +265,7 @@ describe("new", () => {
         expect.verifySteps(["/web/webclient/translations", "/web/webclient/load_menus"]);
         await getService("action").doAction(4);
         expect.verifySteps(["/web/action/load", "get_views", "onchange"]);
-        await contains(`.o_cp_action_menus button:has(.fa-cog)`).click();
+        await contains(`.o_cp_action_menus button:has([data-icon="settings"])`).click();
         await contains(`button[name="5"]`).click();
         expect.verifySteps(["web_save", "/web/action/load", "get_views", "onchange"]);
         expect(".modal").toHaveCount(1);
@@ -662,7 +662,7 @@ describe("fullscreen", () => {
             </form>`;
         Partner._views["form,666"] = `
             <form>
-                <button type="action" name="15" icon="fa-star" context="{'default_partner': id}" class="oe_stat_button"/>
+                <button type="action" name="15" icon="star" icon_class="oi-filled" context="{'default_partner': id}" class="oe_stat_button"/>
             </form>`;
 
         await mountWithCleanup(WebClient);
diff --git a/addons/web/static/tests/webclient/actions/window_action.test.js b/addons/web/static/tests/webclient/actions/window_action.test.js
index a8d45744e1496c..412121ec3d3337 100644
--- a/addons/web/static/tests/webclient/actions/window_action.test.js
+++ b/addons/web/static/tests/webclient/actions/window_action.test.js
@@ -85,7 +85,7 @@ class Partner extends models.Model {
             <form>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button class="oe_stat_button" type="action" name="1" icon="fa-star" context="{'default_partner': id}">
+                        <button class="oe_stat_button" type="action" name="1" icon="star" icon_class="oi-filled" context="{'default_partner': id}">
                             <field string="Partners" name="o2m" widget="statinfo"/>
                         </button>
                     </div>
@@ -727,7 +727,7 @@ test("A new form view can be reloaded after a failed one", async () => {
     expect(browser.location.pathname).toBe("/odoo/action-3/1");
 
     // Delete the current record
-    await contains(".o_cp_action_menus .fa-cog").click();
+    await contains(".o_cp_action_menus [data-icon='settings']").click();
     await contains(".o_menu_item:contains(Delete)").click();
     expect(".modal").toHaveCount(1, { message: "a confirm modal should be displayed" });
     await contains(".modal-footer button.btn-danger").click();
@@ -2061,7 +2061,7 @@ test("execute a contextual action from a form view", async () => {
     expect(".o_form_view").toHaveCount(1);
 
     // execute the custom action from the action menu
-    await contains(".o_cp_action_menus .fa-cog").click();
+    await contains(".o_cp_action_menus [data-icon='settings']").click();
     await toggleMenuItem("Favorite Ponies");
     expect(".o_list_view").toHaveCount(1);
 });
@@ -2729,7 +2729,7 @@ test("click on breadcrumb of a deleted record", async () => {
         "First record",
     ]);
     // open action menu and delete
-    await contains(".o_cp_action_menus .fa-cog").click();
+    await contains(".o_cp_action_menus [data-icon='settings']").click();
     await toggleMenuItem("Delete");
     expect(".o_dialog").toHaveCount(1);
 
diff --git a/addons/web/static/tests/webclient/clickbot.test.js b/addons/web/static/tests/webclient/clickbot.test.js
index 842dfeedc23a86..601561413d8782 100644
--- a/addons/web/static/tests/webclient/clickbot.test.js
+++ b/addons/web/static/tests/webclient/clickbot.test.js
@@ -550,7 +550,7 @@ test("clickbot show rpc error when an error dialog is detected", async () => {
                 <details>
                     <summary class="mb-1 link-info"><span>See technical details</span><span class="ms-1 text-400 small">(10/Apr/2024 00:00:04)</span></summary>
                     <div class="text-bg-100 clearfix mt-2 position-relative o_error_detail pb-2">
-                        <button class="btn position-absolute top-0 end-0 pt-2 btn-link link-body-emphasis" data-available-offline=""><span class="fa fa-clipboard"></span></button>
+                        <button class="btn position-absolute top-0 end-0 pt-2 btn-link link-body-emphasis" data-available-offline=""><span class="oi" data-icon="assignment"></span></button>
                         <div class="ps-1 pt-1 ps-md-3 pt-md-3">
                             <p class="m-0"><b>Odoo Server Error</b></p>
                             <p class="d-block small text-info">ERROR INFO</p>
diff --git a/addons/web/static/tests/webclient/mobile/burger_menu.test.js b/addons/web/static/tests/webclient/mobile/burger_menu.test.js
index ad19134cfeaedc..0439e5ffa09e6e 100644
--- a/addons/web/static/tests/webclient/mobile/burger_menu.test.js
+++ b/addons/web/static/tests/webclient/mobile/burger_menu.test.js
@@ -142,7 +142,7 @@ test("Burger menu closes when click on menu item", async () => {
         queryAll(".o_app_menu_sidebar nav.o_burger_menu_content", { root: document.body })
     ).toHaveText("App2");
 
-    await contains(".oi-apps", { root: document.body }).click();
+    await contains("[data-icon='apps']", { root: document.body }).click();
     expect(
         queryAll(".o_app_menu_sidebar nav.o_burger_menu_content", { root: document.body })
     ).toHaveText("App0\nApp1\nApp2");
diff --git a/addons/web/static/tests/webclient/mobile/burger_user_menu.test.js b/addons/web/static/tests/webclient/mobile/burger_user_menu.test.js
index f62dbe3fe9768c..3d65bdb86d8951 100644
--- a/addons/web/static/tests/webclient/mobile/burger_user_menu.test.js
+++ b/addons/web/static/tests/webclient/mobile/burger_user_menu.test.js
@@ -70,7 +70,7 @@ test("can be rendered", async () => {
     userMenuRegistry.add("html_item", () => ({
         type: "item",
         id: "html",
-        description: markup`<div>HTML<i class="fa fa-check px-2"></i></div>`,
+        description: markup`<div>HTML<i class="oi px-2" data-icon="check"></i></div>`,
         callback: () => {
             expect.step("callback html_item");
         },
diff --git a/addons/web/static/tests/webclient/mobile/mobile_switch_company.test.js b/addons/web/static/tests/webclient/mobile/mobile_switch_company.test.js
index 8678c4dfa888aa..5540c041dc06f1 100644
--- a/addons/web/static/tests/webclient/mobile/mobile_switch_company.test.js
+++ b/addons/web/static/tests/webclient/mobile/mobile_switch_company.test.js
@@ -51,17 +51,17 @@ test("basic rendering", async () => {
     expect(".o_burger_menu_companies").toHaveClass("o_burger_menu_companies");
     expect("[data-company-id]").toHaveCount(3);
     expect(".log_into").toHaveCount(3);
-    expect(".fa-check-square").toHaveCount(1);
-    expect(".fa-square-o").toHaveCount(2);
+    expect("[data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-icon='square']").toHaveCount(2);
 
     expect(".o_switch_company_item:eq(0)").toHaveText("Hermit");
     expect(".o_switch_company_item:eq(0)").toHaveClass("alert-secondary");
     expect(".o_switch_company_item:eq(1)").toHaveText("Herman's");
     expect(".o_switch_company_item:eq(2)").toHaveText("Heroes TM");
 
-    expect(".o_switch_company_item i:eq(0)").toHaveClass("fa-check-square");
-    expect(".o_switch_company_item i:eq(1)").toHaveClass("fa-square-o");
-    expect(".o_switch_company_item i:eq(2)").toHaveClass("fa-square-o");
+    expect(".o_switch_company_item i:eq(0)").toHaveAttribute("data-icon", "check_box");
+    expect(".o_switch_company_item i:eq(1)").toHaveAttribute("data-icon", "square");
+    expect(".o_switch_company_item i:eq(2)").toHaveAttribute("data-icon", "square");
 
     expect(".o_burger_menu_companies").toHaveText("Companies\nHermit\nHerman's\nHeroes TM");
 });
@@ -77,8 +77,8 @@ test("companies can be toggled: toggle a second company", async () => {
     expect(user.activeCompanies.map((c) => c.id)).toEqual([1]);
     expect(user.activeCompany.id).toBe(1);
     expect("[data-company-id]").toHaveCount(3);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(2);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(2);
 
     /**
      *   [x] **Company 1**
@@ -86,8 +86,8 @@ test("companies can be toggled: toggle a second company", async () => {
      *   [ ] Company 3
      */
     await toggleCompany(1);
-    expect("[data-company-id] .fa-check-square").toHaveCount(2);
-    expect("[data-company-id] .fa-square-o").toHaveCount(1);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(2);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(1);
     await clickConfirm();
     expect(cookie.get("cids")).toEqual("1-2");
 });
@@ -102,8 +102,8 @@ test("can toggle multiple companies at once", async () => {
     expect(user.activeCompanies.map((c) => c.id)).toEqual([1]);
     expect(user.activeCompany.id).toBe(1);
     expect("[data-company-id]").toHaveCount(3);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(2);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(2);
 
     /**
      *   [ ] **Company 1**  -> toggle all
@@ -113,8 +113,8 @@ test("can toggle multiple companies at once", async () => {
     await toggleCompany(0);
     await toggleCompany(1);
     await toggleCompany(2);
-    expect("[data-company-id] .fa-check-square").toHaveCount(2);
-    expect("[data-company-id] .fa-square-o").toHaveCount(1);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(2);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(1);
 
     expect.verifySteps([]);
     await clickConfirm();
@@ -134,8 +134,8 @@ test("single company selected: toggling it off will keep it", async () => {
     expect(user.activeCompanies.map((c) => c.id)).toEqual([1]);
     expect(user.activeCompany.id).toBe(1);
     expect("[data-company-id]").toHaveCount(3);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(2);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(2);
 
     /**
      *   [ ] **Company 1**  -> toggle off
@@ -147,8 +147,8 @@ test("single company selected: toggling it off will keep it", async () => {
     expect(cookie.get("cids")).toEqual("1");
     expect(user.activeCompanies.map((c) => c.id)).toEqual([1]);
     expect(user.activeCompany.id).toBe(1);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(2);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(2);
 });
 
 test("single company mode: companies can be logged in", async () => {
@@ -162,8 +162,8 @@ test("single company mode: companies can be logged in", async () => {
     expect(user.activeCompanies.map((c) => c.id)).toEqual([1]);
     expect(user.activeCompany.id).toBe(1);
     expect("[data-company-id]").toHaveCount(3);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(2);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(2);
 
     /**
      *   [ ] **Company 1**
@@ -186,8 +186,8 @@ test("multi company mode: log into a non selected company", async () => {
     expect(user.activeCompanies.map((c) => c.id)).toEqual([3, 1]);
     expect(user.activeCompany.id).toBe(3);
     expect("[data-company-id]").toHaveCount(3);
-    expect("[data-company-id] .fa-check-square").toHaveCount(2);
-    expect("[data-company-id] .fa-square-o").toHaveCount(1);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(2);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(1);
 
     /**
      *   [x] Company 1
@@ -210,8 +210,8 @@ test("multi company mode: log into an already selected company", async () => {
     expect(user.activeCompanies.map((c) => c.id)).toEqual([2, 3]);
     expect(user.activeCompany.id).toBe(2);
     expect("[data-company-id]").toHaveCount(3);
-    expect("[data-company-id] .fa-check-square").toHaveCount(2);
-    expect("[data-company-id] .fa-square-o").toHaveCount(1);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(2);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(1);
 
     /**
      *   [ ] Company 1
@@ -233,8 +233,8 @@ test("companies can be logged in even if some toggled within delay", async () =>
     expect(user.activeCompanies.map((c) => c.id)).toEqual([1]);
     expect(user.activeCompany.id).toBe(1);
     expect("[data-company-id]").toHaveCount(3);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(2);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(2);
 
     /**
      *   [ ] **Company 1**  -> toggled
@@ -258,7 +258,7 @@ test("show confirm and reset buttons only when selection has changed", async ()
 
 test("No collapse and no search input when less that 10 companies", async () => {
     await mountWithCleanup(MobileSwitchCompanyMenu);
-    expect(".o_burger_menu_companies .fa-caret-right").toHaveCount(0);
+    expect(".o_burger_menu_companies [data-icon='arrow_right']").toHaveCount(0);
     expect(".o_burger_menu_companies .visually-hidden input").toHaveCount(1);
 });
 
diff --git a/addons/web/static/tests/webclient/res_user_group_ids_field.test.js b/addons/web/static/tests/webclient/res_user_group_ids_field.test.js
index 966b516b0ababd..8822248c9b531f 100644
--- a/addons/web/static/tests/webclient/res_user_group_ids_field.test.js
+++ b/addons/web/static/tests/webclient/res_user_group_ids_field.test.js
@@ -704,13 +704,13 @@ test("disjoint groups", async () => {
         resId: 1,
     });
 
-    expect(".o_group_info_button.fa-info-circle:not(.invisible)").toHaveCount(3);
-    expect(".o_group_info_button.fa-exclamation-triangle:not(.invisible)").toHaveCount(0);
+    expect(".o_group_info_button[data-icon='info']:not(.invisible)").toHaveCount(3);
+    expect(".o_group_info_button[data-icon='warning']:not(.invisible)").toHaveCount(0);
     expect(".o_is_disjoint").toHaveCount(0);
 
     await contains(".o_inner_group:eq(3) input[type=checkbox]").click();
-    expect(".o_group_info_button.fa-info-circle:not(.invisible)").toHaveCount(2);
-    expect(".o_group_info_button.fa-exclamation-triangle:not(.invisible)").toHaveCount(2);
+    expect(".o_group_info_button[data-icon='info']:not(.invisible)").toHaveCount(2);
+    expect(".o_group_info_button[data-icon='warning']:not(.invisible)").toHaveCount(2);
     expect(".o_is_disjoint").toHaveCount(2);
 
     await contains(".o_inner_group:eq(3) .o_group_info_button").click();
diff --git a/addons/web/static/tests/webclient/settings_form_view/settings_form_view.test.js b/addons/web/static/tests/webclient/settings_form_view/settings_form_view.test.js
index 7b548d4175244b..0bff25290c6c0c 100644
--- a/addons/web/static/tests/webclient/settings_form_view/settings_form_view.test.js
+++ b/addons/web/static/tests/webclient/settings_form_view/settings_form_view.test.js
@@ -113,7 +113,7 @@ test("change setting on nav bar click in base settings on desktop", async () =>
                     <block title="Title of group Bar">
                         <setting help="this is bar" info="this is bar info" documentation="/applications/technical/web/settings/this_is_a_test.html">
                             <field name="bar"/>
-                            <button name="buttonName" icon="oi-arrow-right" type="action" string="Manage Users" class="btn-link"/>
+                            <button name="buttonName" icon="east" type="action" string="Manage Users" class="btn-link"/>
                         </setting>
                         <setting>
                             <label string="Big BAZ" for="baz"/>
@@ -164,8 +164,8 @@ test("change setting on nav bar click in base settings on desktop", async () =>
     expect(".o_searchview input").toBeFocused({ message: "searchview input should be focused" });
     expect(".app_settings_block:not(.d-none) .app_settings_header").toHaveCount(1);
     expect(".o_setting_box a").toHaveCount(2);
-    expect(".o_setting_box span.fa:eq(0)").toHaveAttribute("title", "this is bar info");
-    expect(".o_setting_box span.fa:eq(1)").toHaveAttribute("title", "this is foo info");
+    expect(".o_setting_box span.oi:eq(0)").toHaveAttribute("title", "this is bar info");
+    expect(".o_setting_box span.oi:eq(1)").toHaveAttribute("title", "this is foo info");
     expect(".o_setting_box a:eq(0)").toHaveAttribute(
         "href",
         "https://www.odoo.com/documentation/1.0/applications/technical/web/settings/this_is_a_test.html"
@@ -264,7 +264,7 @@ test("change setting on nav bar click in base settings on mobile", async () => {
                     <block title="Title of group Bar">
                         <setting help="this is bar" info="this is bar info" documentation="/applications/technical/web/settings/this_is_a_test.html">
                             <field name="bar"/>
-                            <button name="buttonName" icon="oi-arrow-right" type="action" string="Manage Users" class="btn-link"/>
+                            <button name="buttonName" icon="east" type="action" string="Manage Users" class="btn-link"/>
                         </setting>
                         <setting>
                             <label string="Big BAZ" for="baz"/>
@@ -314,8 +314,8 @@ test("change setting on nav bar click in base settings on mobile", async () => {
     expect(".o_form_editable").not.toHaveClass("o_form_nosheet");
     expect(".app_settings_block:not(.d-none) .app_settings_header").toHaveCount(1);
     expect(".o_setting_box a").toHaveCount(2);
-    expect(".o_setting_box span.fa:eq(0)").toHaveAttribute("title", "this is bar info");
-    expect(".o_setting_box span.fa:eq(1)").toHaveAttribute("title", "this is foo info");
+    expect(".o_setting_box span.oi:eq(0)").toHaveAttribute("title", "this is bar info");
+    expect(".o_setting_box span.oi:eq(1)").toHaveAttribute("title", "this is foo info");
     expect(".o_setting_box a:eq(0)").toHaveAttribute(
         "href",
         "https://www.odoo.com/documentation/1.0/applications/technical/web/settings/this_is_a_test.html"
@@ -2136,7 +2136,7 @@ test("BinaryField is correctly rendered in Settings form view", async () => {
             </form>
         `,
     });
-    expect('.o_field_widget[name="file"] .fa-download').toHaveCount(1, {
+    expect('.o_field_widget[name="file"] [data-icon="download"]').toHaveCount(1, {
         message: "Download button should be display in settings form view",
     });
     expect('.o_field_widget[name="file"].o_field_binary .o_input').toHaveValue("coucou.txt", {
@@ -2159,7 +2159,7 @@ test("BinaryField is correctly rendered in Settings form view", async () => {
         }
     };
     after(on(document, "click", onDownloadClick));
-    await click(".fa-download");
+    await click("[data-icon='download']");
     await def;
 
     await click(".o_field_binary .o_clear_file_button");
@@ -2375,7 +2375,7 @@ test("settings search is accent-insensitive", async () => {
                     <block title="Title of group Bâr">
                         <setting help="this is bàr" documentation="/applications/technical/web/settings/this_is_a_test.html">
                             <field name="bar"/>
-                            <button name="buttonName" icon="oi-arrow-right" type="action" string="Manage Users" class="btn-link"/>
+                            <button name="buttonName" icon="east" type="action" string="Manage Users" class="btn-link"/>
                         </setting>
                         <setting>
                             <label string="Big BÄZ" for="baz"/>
diff --git a/addons/web/static/tests/webclient/switch_company_menu.test.js b/addons/web/static/tests/webclient/switch_company_menu.test.js
index 3078029a031c3b..c205c553e3d198 100644
--- a/addons/web/static/tests/webclient/switch_company_menu.test.js
+++ b/addons/web/static/tests/webclient/switch_company_menu.test.js
@@ -59,10 +59,10 @@ test("basic rendering", async () => {
 
     expect("[data-company-id] [role=menuitemcheckbox]").toHaveCount(5);
     expect(".log_into").toHaveCount(5);
-    expect(".fa-check-square").toHaveCount(1);
-    expect(".fa-square-o").toHaveCount(4);
-    expect(".dropdown-item:has(.fa-check-square)").toHaveText("Hermit");
-    expect(".dropdown-item:has(.fa-square-o):eq(0)").toHaveText("Herman's");
+    expect("[data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-icon='square']").toHaveCount(4);
+    expect(".dropdown-item:has([data-icon='check_box'].oi-filled)").toHaveText("Hermit");
+    expect(".dropdown-item:has([data-icon='square']):eq(0)").toHaveText("Herman's");
     expect(".dropdown-menu").toHaveText("Hermit\nHerman's\nHeroes TM\nHercules\nHulk");
 });
 
@@ -80,8 +80,8 @@ test("companies can be toggled: toggle a second company", async () => {
     expect(user.activeCompany.id).toBe(3);
     await openCompanyMenu();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(4);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(4);
     expect(queryAllAttributes("[data-company-id] [role=menuitemcheckbox]", "aria-checked")).toEqual(
         ["true", "false", "false", "false", "false"]
     );
@@ -102,8 +102,8 @@ test("companies can be toggled: toggle a second company", async () => {
      */
     await toggleCompany(1);
     expect(".dropdown-menu").toHaveCount(1, { message: "dropdown is still opened" });
-    expect("[data-company-id] .fa-check-square").toHaveCount(2);
-    expect("[data-company-id] .fa-square-o").toHaveCount(3);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(2);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(3);
     expect(queryAllAttributes("[data-company-id] [role=menuitemcheckbox]", "aria-checked")).toEqual(
         ["true", "true", "false", "false", "false"]
     );
@@ -132,8 +132,8 @@ test("can toggle multiple companies at once", async () => {
     expect(user.activeCompany.id).toBe(3);
     await openCompanyMenu();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(4);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(4);
 
     /**
      *   [ ] Hermit          -> toggle all
@@ -146,8 +146,8 @@ test("can toggle multiple companies at once", async () => {
     await toggleCompany(1);
     await toggleCompany(2);
     expect(".dropdown-menu").toHaveCount(1, { message: "dropdown is still opened" });
-    expect("[data-company-id] .fa-check-square").toHaveCount(4);
-    expect("[data-company-id] .fa-square-o").toHaveCount(1);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(4);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(1);
 
     expect.verifySteps([]);
     await clickConfirm();
@@ -170,8 +170,8 @@ test("single company selected: toggling it off will keep it", async () => {
     expect(user.activeCompany.id).toBe(3);
     await openCompanyMenu();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(4);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(4);
 
     /**
      *   [x] **Hermit**  -> toggle off
@@ -188,8 +188,8 @@ test("single company selected: toggling it off will keep it", async () => {
     expect(user.activeCompany.id).toBe(3);
 
     await openCompanyMenu();
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(4);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(4);
 });
 
 test("single company mode: companies can be logged in", async () => {
@@ -206,8 +206,8 @@ test("single company mode: companies can be logged in", async () => {
     expect(user.activeCompany.id).toBe(3);
     await openCompanyMenu();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(4);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(4);
 
     /**
      *   [ ] Hermit
@@ -236,8 +236,8 @@ test("multi company mode: log into a non selected company", async () => {
     expect(user.activeCompany.id).toBe(3);
     await openCompanyMenu();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(2);
-    expect("[data-company-id] .fa-square-o").toHaveCount(3);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(2);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(3);
 
     /**
      *   [x] Hermit
@@ -266,8 +266,8 @@ test("multi company mode: log into an already selected company", async () => {
     expect(user.activeCompany.id).toBe(2);
     await openCompanyMenu();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(2);
-    expect("[data-company-id] .fa-square-o").toHaveCount(3);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(2);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(3);
 
     /**
      *   [ ] Hermit
@@ -295,8 +295,8 @@ test("companies can be logged in even if some toggled within delay", async () =>
     expect(user.activeCompany.id).toBe(3);
     await openCompanyMenu();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(4);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(4);
 
     /**
      *   [ ] Hermit         -> toggled
@@ -341,8 +341,8 @@ test("single company mode: from company loginto branch", async () => {
     expect(user.activeCompany.id).toBe(3);
     await contains(".dropdown-toggle").click();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(4);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(4);
 
     /**
      *   [ ] Hermit
@@ -370,8 +370,8 @@ test("single company mode: from branch loginto company", async () => {
     expect(user.activeCompany.id).toBe(1);
     await contains(".dropdown-toggle").click();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(3);
-    expect("[data-company-id] .fa-square-o").toHaveCount(2);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(3);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(2);
 
     /**
      *   [x] Hermit    -> log into
@@ -399,8 +399,8 @@ test("single company mode: from leaf (only one company in branch selected) login
     expect(user.activeCompany.id).toBe(1);
     await contains(".dropdown-toggle").click();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(4);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(4);
 
     /**
      *   [ ] Hermit
@@ -428,8 +428,8 @@ test("multi company mode: switching company doesn't deselect already selected on
     expect(user.activeCompany.id).toBe(1);
     await contains(".dropdown-toggle").click();
     expect("[data-company-id]").toHaveCount(5);
-    expect("[data-company-id] .fa-check-square").toHaveCount(4);
-    expect("[data-company-id] .fa-square-o").toHaveCount(1);
+    expect("[data-company-id] [data-icon='check_box'].oi-filled").toHaveCount(4);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(1);
 
     /**
      *   [ ] Hermit
@@ -590,21 +590,21 @@ test("select and de-select all", async () => {
     await animationFrame();
 
     // One company is selected, there should be a check box with minus inside
-    expect("[role=menuitemcheckbox][title='Deselect all'] i").toHaveClass("fa-minus-square-o");
+    expect("[role=menuitemcheckbox][title='Deselect all'] i").toHaveAttribute("data-icon", "indeterminate_check_box");
 
     await contains("[role=menuitemcheckbox][title='Deselect all']").click();
     // No company is selected, there should be a empty check box
-    expect("[role=menuitemcheckbox][title='Select all'] i").toHaveClass("fa-square-o");
+    expect("[role=menuitemcheckbox][title='Select all'] i").toHaveAttribute("data-icon", "square");
     expect(".o_switch_company_item:has([role=menuitemcheckbox][aria-checked=true])").toHaveCount(0);
 
     await contains("[role=menuitemcheckbox][title='Select all']").click();
     // All companies are selected, there should be a checked check box
-    expect("[role=menuitemcheckbox][title='Deselect all'] i").toHaveClass("fa-check-square");
+    expect("[role=menuitemcheckbox][title='Deselect all'] i").toHaveAttribute("data-icon", "check_box");
     expect(".o_switch_company_item:has([role=menuitemcheckbox][aria-checked=true])").toHaveCount(5);
 
     await contains("[role=menuitemcheckbox][title='Deselect all']").click();
     // No company is selected, there should be a empty check box
-    expect("[role=menuitemcheckbox][title='Select all'] i").toHaveClass("fa-square-o");
+    expect("[role=menuitemcheckbox][title='Select all'] i").toHaveAttribute("data-icon", "square");
     expect(".o_switch_company_item:has([role=menuitemcheckbox][aria-checked=true])").toHaveCount(0);
 });
 
@@ -666,8 +666,8 @@ test("disallowed companies in between allowed companies are not enabled", async
     expect(user.activeCompany.id).toBe(3);
     await openCompanyMenu();
     expect("[data-company-id]").toHaveCount(3);
-    expect("[data-company-id] .fa-check-square").toHaveCount(1);
-    expect("[data-company-id] .fa-square-o").toHaveCount(2);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(1);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(2);
 
     /**
      *   [x] Parent -> toggle
@@ -679,6 +679,6 @@ test("disallowed companies in between allowed companies are not enabled", async
 
     await openCompanyMenu();
     await toggleCompany(0);
-    expect("[data-company-id] .fa-check-square").toHaveCount(0);
-    expect("[data-company-id] .fa-square-o").toHaveCount(3);
+    expect("[data-company-id] [data-icon='check_box']").toHaveCount(0);
+    expect("[data-company-id] [data-icon='square']").toHaveCount(3);
 });
diff --git a/addons/web/views/base_document_layout_views.xml b/addons/web/views/base_document_layout_views.xml
index 33c507f61e8a4e..1ffc356ab495a6 100644
--- a/addons/web/views/base_document_layout_views.xml
+++ b/addons/web/views/base_document_layout_views.xml
@@ -22,7 +22,7 @@
                                 <field name="primary_color" widget="color" class="w-auto m-0 me-1"/>
                                 <field name="secondary_color" widget="color" class="w-auto m-0"/>
                                 <a class="o_custom_colors btn btn-secondary btn-sm position-relative ms-2" role="button" title="Reset to logo colors" invisible="not custom_colors">
-                                    <i class="fa fa-repeat"/> Reset
+                                    <i class="oi" data-icon="redo"/> Reset
                                     <field name="custom_colors" class="position-absolute top-0 start-0 w-100 h-100 opacity-0" nolabel="1"/>
                                 </a>
                             </div>
diff --git a/addons/web/views/speedscope_config_wizard.xml b/addons/web/views/speedscope_config_wizard.xml
index 55ec94b4a32353..5d2e8d56279a4b 100644
--- a/addons/web/views/speedscope_config_wizard.xml
+++ b/addons/web/views/speedscope_config_wizard.xml
@@ -82,8 +82,8 @@
                                 <input type="hidden" name="profile_id" t-att-value="profile_str" />
                                 
                                 <div class="mt-3">
-                                    <button type="submit" class="btn btn-secondary" name="action" value="speedscope_download_json"><i class="fa fa-download"/> (json)</button>
-                                    <button type="submit" class="btn btn-secondary" name="action" value="speedscope_download_html"><i class="fa fa-download"/> (html)</button>
+                                    <button type="submit" class="btn btn-secondary" name="action" value="speedscope_download_json"><i class="oi oi-fw" data-icon="download"/> (json)</button>
+                                    <button type="submit" class="btn btn-secondary" name="action" value="speedscope_download_html"><i class="oi oi-fw" data-icon="download"/> (html)</button>
                                     <button type="submit" class="btn btn-primary" name="action" value="speedscope_open">Open</button>
                                 </div>
                             </form>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 106e271ebbd5e1..ba1b7d4b5e4ef9 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -40,8 +40,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1"/>
       </xpath>
       <xpath expr="//head/link[last()]" position="after">
-        <t t-call-assets="web.fontawesome" t-binary="True"/>
-        <t t-call-assets="web.odoo_ui_icons" t-binary="True"/>
+        <t t-call-assets="web.icons_fonts" t-binary="True"/>
         <t t-call-assets="web.assets_frontend" t-js="false"/>
       </xpath>
       <xpath expr="//head/script[@id='web.layout.odooscript']" position="after">
@@ -141,7 +140,7 @@
                     <label for="db" class="col-form-label">Database</label>
                     <div class="input-group">
                         <input type="text" name="db" t-att-value="request.db" id="db" class="form-control" required="required" readonly="readonly"/>
-                        <a role="button" href="/web/database/selector" class="btn border border-start-0">Select <i class="fa fa-database" role="img" aria-label="Database" title="Database"></i></a>
+                        <a role="button" href="/web/database/selector" class="btn border border-start-0">Select <i class="oi" data-icon="database" role="img" aria-label="Database" title="Database"></i></a>
                     </div>
                 </div>
 
@@ -157,7 +156,7 @@
                     <div class="input-group mb-1">
                         <input type="password" placeholder="Enter your password" name="password" id="password" class="form-control" required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" maxlength="4096"/>
                         <button type="button" class="btn btn-sm border border-start-0 o_show_password">
-                            <i class="fa fa-eye"/>
+                            <i class="oi" data-icon="visibility"/>
                         </button>
                     </div>
                 </div>
@@ -210,7 +209,7 @@
             <em class="d-block my-3 small text-center text-muted">- or -</em>
             <div class="list-group">
                 <a t-foreach="auth_btns" t-as="p" t-attf-class="{{p.get('list_item_class')}} list-group-item list-group-item-action d-flex align-items-center gap-2 py-2" t-att-href="p.get('auth_link') or '#'">
-                    <i t-att-class="p['css_class']" role="presentation"/>
+                    <i t-att-class="p['css_class']" t-att-data-icon="p.get('icon') or 'login'" role="presentation"/>
                     <span class="mx-auto" t-out="p['body']"/>
                 </a>
             </div>
diff --git a/addons/web_hierarchy/models/ir_ui_view.py b/addons/web_hierarchy/models/ir_ui_view.py
index ce1d68e9a6948c..322d101e5ded55 100644
--- a/addons/web_hierarchy/models/ir_ui_view.py
+++ b/addons/web_hierarchy/models/ir_ui_view.py
@@ -54,4 +54,4 @@ def _validate_tag_hierarchy(self, node, name_manager, node_info):
             self._raise_view_error(msg, node)
 
     def _get_view_info(self):
-        return {'hierarchy': {'icon': 'fa fa-share-alt fa-rotate-90'}} | super()._get_view_info()
+        return {'hierarchy': {'icon': 'family_history'}} | super()._get_view_info()
diff --git a/addons/web_hierarchy/static/src/hierarchy_arch_parser.js b/addons/web_hierarchy/static/src/hierarchy_arch_parser.js
index f30a0bf701b3b5..c9dee53ef25f67 100644
--- a/addons/web_hierarchy/static/src/hierarchy_arch_parser.js
+++ b/addons/web_hierarchy/static/src/hierarchy_arch_parser.js
@@ -10,7 +10,7 @@ export class HierarchyArchParser {
             activeActions: getActiveActions(xmlDoc),
             defaultOrder: stringToOrderBy(xmlDoc.getAttribute("default_order") || null),
             draggable: false,
-            icon: "fa-share-alt fa-rotate-90 align-text-top",
+            icon: "family_history",
             parentFieldName: "parent_id",
             fieldNodes: {},
             templateDocs: {},
diff --git a/addons/web_hierarchy/static/src/hierarchy_card.xml b/addons/web_hierarchy/static/src/hierarchy_card.xml
index 8409fdf937c8fb..8b81e3a3bd937e 100644
--- a/addons/web_hierarchy/static/src/hierarchy_card.xml
+++ b/addons/web_hierarchy/static/src/hierarchy_card.xml
@@ -9,7 +9,7 @@
                         class="btn p-0"
                         t-on-click.synthetic="this.onClickArrowUp"
                 >
-                    <i class="fa fa-chevron-up"/>
+                    <i class="oi" data-icon="expand_less"/>
                 </button>
             </div>
             <div class="o_hierarchy_node w-100 h-100 d-flex flex-column justify-content-between border"
@@ -45,7 +45,7 @@
                         </span>
                         <span class="text-end" style="grid-column: 3;">
                             <t t-out="this.props.node.childResIds.length"/>
-                            <i class="fa ps-1" t-att-class="this.props.archInfo.icon"/>
+                            <i class="oi ps-1" t-att-data-icon="this.props.archInfo.icon"/>
                         </span>
                     </t>
                     <t t-else="">
diff --git a/addons/web_hierarchy/static/tests/hierarchy_view.test.js b/addons/web_hierarchy/static/tests/hierarchy_view.test.js
index 3e906339becc1e..17c984d820e6b6 100644
--- a/addons/web_hierarchy/static/tests/hierarchy_view.test.js
+++ b/addons/web_hierarchy/static/tests/hierarchy_view.test.js
@@ -115,7 +115,7 @@ test("load hierarchy view", async () => {
     expect(".o_hierarchy_node_button.btn-primary").toHaveCount(1);
     expect(".o_hierarchy_node_button.btn-primary.d-grid").toHaveCount(1);
     expect(".o_hierarchy_node_button.btn-primary.rounded-0").toHaveCount(1);
-    expect(".o_hierarchy_node_button.btn-primary .fa-rotate-90.align-text-top").toHaveCount(1);
+    expect(".o_hierarchy_node_button.btn-primary [data-icon='family_history']").toHaveCount(1);
     expect(".o_hierarchy_node_button.btn-primary").toHaveText("Unfold\n1");
 
     expect(".o_hierarchy_row:eq(0) .o_hierarchy_node").toHaveCount(1);
@@ -365,11 +365,11 @@ test("fetch parent record", async () => {
     expect(".o_hierarchy_row:eq(0) .o_hierarchy_node_content").toHaveText("Josephine\nAlbert");
 
     expect(".o_hierarchy_row:eq(1) .o_hierarchy_node_content").toHaveText("Louis\nJosephine");
-    expect(".o_hierarchy_node_container button .fa-chevron-up").toHaveCount(1, {
+    expect(".o_hierarchy_node_container button [data-icon='expand_less']").toHaveCount(1, {
         message:
             "Button to fetch the parent node should be visible on the first node displayed in the view.",
     });
-    await contains(".o_hierarchy_node_container button .fa-chevron-up").click();
+    await contains(".o_hierarchy_node_container button [data-icon='expand_less']").click();
     expect(".o_hierarchy_row").toHaveCount(3);
     expect(".o_hierarchy_node").toHaveCount(4);
     expect(".o_hierarchy_separator").toHaveCount(2);
@@ -410,16 +410,16 @@ test("fetch parent when there are many records without the same parent in the sa
         "Louis\nJosephine",
         "Albert",
     ]);
-    expect(".o_hierarchy_node_container button .fa-chevron-up").toHaveCount(2);
-    await contains(".o_hierarchy_node_container button .fa-chevron-up").click();
+    expect(".o_hierarchy_node_container button [data-icon='expand_less']").toHaveCount(2);
+    await contains(".o_hierarchy_node_container button [data-icon='expand_less']").click();
     expect(".o_hierarchy_row").toHaveCount(2);
     expect(".o_hierarchy_node").toHaveCount(2);
     expect(queryAllTexts(".o_hierarchy_node_content")).toEqual([
         "Georges\nAlbert",
         "Lisa\nGeorges",
     ]);
-    expect(".o_hierarchy_node_container button .fa-chevron-up").toHaveCount(1);
-    await contains(".o_hierarchy_node_container button .fa-chevron-up").click();
+    expect(".o_hierarchy_node_container button [data-icon='expand_less']").toHaveCount(1);
+    await contains(".o_hierarchy_node_container button [data-icon='expand_less']").click();
     expect(".o_hierarchy_row").toHaveCount(3);
     expect(".o_hierarchy_node").toHaveCount(4);
 });
@@ -445,8 +445,8 @@ test("fetch parent when parent record is in the same row", async () => {
 
     expect(".o_hierarchy_row").toHaveCount(1);
     expect(".o_hierarchy_node_container").toHaveCount(5);
-    expect(".o_hierarchy_node_container button .fa-chevron-up").toHaveCount(4);
-    await contains(".o_hierarchy_node_container button .fa-chevron-up").click();
+    expect(".o_hierarchy_node_container button [data-icon='expand_less']").toHaveCount(4);
+    await contains(".o_hierarchy_node_container button [data-icon='expand_less']").click();
     expect(".o_hierarchy_row").toHaveCount(2);
     expect(".o_hierarchy_node").toHaveCount(3);
     expect(queryAllTexts(".o_hierarchy_node_content")).toEqual([
@@ -478,7 +478,7 @@ test("fetch parent of node with children displayed", async () => {
 
     expect(".o_hierarchy_row").toHaveCount(1);
     expect(".o_hierarchy_node_container").toHaveCount(5);
-    expect(".o_hierarchy_node_container button .fa-chevron-up").toHaveCount(4);
+    expect(".o_hierarchy_node_container button [data-icon='expand_less']").toHaveCount(4);
     const georgesNode = queryOne(
         ".o_hierarchy_node_container:has(button[name=hierarchy_search_parent_node]):eq(0)"
     );
@@ -499,7 +499,7 @@ test("fetch parent of node with children displayed", async () => {
     ]);
     expect(".o_hierarchy_row:eq(1) .o_hierarchy_node").toHaveCount(1);
     expect(".o_hierarchy_row:eq(1) .o_hierarchy_node_content").toHaveText("Lisa\nGeorges");
-    await contains(".o_hierarchy_node_container button .fa-chevron-up").click();
+    await contains(".o_hierarchy_node_container button [data-icon='expand_less']").click();
     expect(".o_hierarchy_row").toHaveCount(3);
     expect(".o_hierarchy_node").toHaveCount(4);
 });
@@ -1132,7 +1132,7 @@ test("check default icon is correctly used inside button to display child nodes"
         "Unfold\n1"
     );
     expect(
-        ".o_hierarchy_node button[name=hierarchy_search_subsidiaries] i.fa-share-alt.fa-rotate-90.align-text-top"
+        ".o_hierarchy_node button[name=hierarchy_search_subsidiaries] i[data-icon='family_history']"
     ).toHaveCount(1, {
         message:
             "The default icon of the hierarchy view should be displayed inside the button to unfold the node.",
@@ -1142,7 +1142,7 @@ test("check default icon is correctly used inside button to display child nodes"
 test("use other icon used next to Unfold string displayed inside the button", async () => {
     Employee._views["hierarchy"] = Employee._views["hierarchy"].replace(
         "<hierarchy>",
-        "<hierarchy icon='fa-users'>"
+        "<hierarchy icon='group'>"
     );
     await mountView({
         type: "hierarchy",
@@ -1155,7 +1155,7 @@ test("use other icon used next to Unfold string displayed inside the button", as
     expect(".o_hierarchy_node button[name=hierarchy_search_subsidiaries].btn-primary").toHaveText(
         "Unfold\n1"
     );
-    expect(".o_hierarchy_node button[name=hierarchy_search_subsidiaries] i.fa-users").toHaveCount(
+    expect(".o_hierarchy_node button[name=hierarchy_search_subsidiaries] i[data-icon='group']").toHaveCount(
         1,
         {
             message:
diff --git a/addons/web_tour/static/src/js/tour_recorder/tour_recorder.js b/addons/web_tour/static/src/js/tour_recorder/tour_recorder.js
index 195707be1810d3..94697e1243bc86 100644
--- a/addons/web_tour/static/src/js/tour_recorder/tour_recorder.js
+++ b/addons/web_tour/static/src/js/tour_recorder/tour_recorder.js
@@ -242,7 +242,7 @@ export class TourRecorder extends Component {
                 root: this.state.editedElement.parentElement,
             });
             this.state.steps.push({
-                trigger: `.o-autocomplete--dropdown-item > a:contains('${selectedRow.textContent}'), .fa-circle-o-notch`,
+                trigger: `.o-autocomplete--dropdown-item > a:contains('${selectedRow.textContent}'), [data-icon='autorenew']`,
                 run: "click",
             });
             this.state.editedElement = undefined;
diff --git a/addons/web_tour/static/src/js/tour_recorder/tour_recorder.xml b/addons/web_tour/static/src/js/tour_recorder/tour_recorder.xml
index be06e622f75bee..bd1f69fe7a83bb 100644
--- a/addons/web_tour/static/src/js/tour_recorder/tour_recorder.xml
+++ b/addons/web_tour/static/src/js/tour_recorder/tour_recorder.xml
@@ -4,7 +4,7 @@
     <div t-custom-ref="tour_recorder" class="d-flex position-fixed ms-2 mb-2 p-1 rounded bg-primary shadow-sm o_tour_recorder" t-attf-style="left: {{this.state.position.x}}px; bottom: {{this.state.position.y}}px;">
         <div class="d-flex align-items-center">
             <div class="bg-primary text-secondary o_tour_recorder_handler px-1" style="cursor: grab;">
-                <span class="oi oi-draggable"/>
+                <span class="oi" data-icon="drag_indicator"/>
             </div>
             <button class="o_button_record btn btn-primary " t-on-click.prevent.stop="this.toggleRecording">
                 <span class="px-2 me-1 rounded-circle" t-att-class="this.state.recording ? 'bg-danger': 'bg-white'" role="status" aria-hidden="true"></span>
@@ -33,7 +33,7 @@
                                             <t t-out="step.trigger"/>
                                             <span t-if="step.run and step.run != 'click'" class="fst-italic fw-lighter"><br/>(run: <t t-out="step.run"/>) </span>
                                         </td>
-                                        <td><button class="o_button_delete_step btn btn-link text-danger fa fa-trash mx-1" t-on-click.prevent.stop="() => this.removeStep(step_index)"/></td>
+                                        <td><button class="o_button_delete_step btn btn-link oi oi-filled text-danger mx-1" data-icon="delete" t-on-click.prevent.stop="() => this.removeStep(step_index)"/></td>
                                     </tr>
                                 </t>
                             </tbody>
@@ -43,7 +43,7 @@
             </Dropdown>
             <Dropdown t-if="this.state.steps.length" position="'top-end'">
                 <button class="o_button_save btn btn-primary px-2 rounded-0" data-tooltip="Save">
-                    <i class="fa fa-cloud-upload"></i>
+                    <i class="oi" data-icon="cloud_upload"></i>
                 </button>
                 <t t-set-slot="content">
                     <div class="o_tour_recorder p-1" style="width: 400px;">
@@ -75,7 +75,7 @@
                     </div>
                 </t>
             </Dropdown>
-            <button class="btn btn-primary o_tour_recorder_close_button" t-on-click.prevent.stop="this.openCloseRecorderDialog" data-tooltip="Close"><i class="fa fa-close"></i></button>
+            <button class="btn btn-primary o_tour_recorder_close_button" t-on-click.prevent.stop="this.openCloseRecorderDialog" data-tooltip="Close"><i class="oi" data-icon="close"></i></button>
         </div>
     </div>
 </t>
diff --git a/addons/web_tour/static/src/tour_utils.js b/addons/web_tour/static/src/tour_utils.js
index 357d290e8b02e8..9a1b240b0f01d4 100644
--- a/addons/web_tour/static/src/tour_utils.js
+++ b/addons/web_tour/static/src/tour_utils.js
@@ -116,7 +116,7 @@ export const stepUtils = {
                     const buttonOutSideDropdownMenu = queryFirst(
                         `.o_statusbar_buttons button:enabled:contains('${innerTextButton}')`
                     );
-                    const node = queryFirst(".o_statusbar_buttons button:has(.oi-ellipsis-v)");
+                    const node = queryFirst(".o_statusbar_buttons button:has([data-icon='more_vert'])");
                     if (!buttonOutSideDropdownMenu && node) {
                         await click(node);
                     }
@@ -141,7 +141,7 @@ export const stepUtils = {
         return [
             {
                 isActive: ["mobile"],
-                trigger: `.modal:not(.o_inactive_modal) .o_control_panel_navigation .btn .fa-search`,
+                trigger: `.modal:not(.o_inactive_modal) .o_control_panel_navigation .btn [data-icon="search"]`,
                 tooltipPosition: "bottom",
                 run: "click",
             },
diff --git a/addons/web_tour/static/tests/tour_recorder.test.js b/addons/web_tour/static/tests/tour_recorder.test.js
index 25c53a71f23ee4..3e08bf6a25dcab 100644
--- a/addons/web_tour/static/tests/tour_recorder.test.js
+++ b/addons/web_tour/static/tests/tour_recorder.test.js
@@ -389,7 +389,7 @@ test("Selecting item in autocomplete field through Enter", async () => {
     await press("Enter");
     checkTourSteps([
         ".o-autocomplete--input",
-        ".o-autocomplete--dropdown-item > a:contains('World'), .fa-circle-o-notch",
+        ".o-autocomplete--dropdown-item > a:contains('World'), [data-icon='autorenew']",
     ]);
     expect(tourRecorder.state.steps.map((s) => s.run)).toEqual(["click", "click"]);
 });
diff --git a/addons/web_unsplash/static/description/unsplash_interface.png b/addons/web_unsplash/static/description/unsplash_interface.png
index 841ebb6d75c80e..a1afe0e145e649 100644
Binary files a/addons/web_unsplash/static/description/unsplash_interface.png and b/addons/web_unsplash/static/description/unsplash_interface.png differ
diff --git a/addons/web_unsplash/views/res_config_settings_view.xml b/addons/web_unsplash/views/res_config_settings_view.xml
index 0eeb25183ef895..997bebe1b37cea 100644
--- a/addons/web_unsplash/views/res_config_settings_view.xml
+++ b/addons/web_unsplash/views/res_config_settings_view.xml
@@ -16,7 +16,7 @@
                         <field name="unsplash_app_id"/>
                     </div>
                     <div>
-                        <widget name="documentation_link" path="/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-access-key" label=" Generate an Access Key" icon="oi oi-arrow-right" class="oe_link"/>
+                        <widget name="documentation_link" path="/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-access-key" label=" Generate an Access Key" icon="east" class="oe_link"/>
                     </div>
                 </div>
             </div>
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 8df4cb589fc6d0..22076af5f73030 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -237,6 +237,7 @@
             "website/static/src/mail/core/common/**/*",
         ],
         'web.assets_frontend': [
+            ('include', 'web.icons_fonts'),
             'html_builder/static/src/utils/scrolling.js',
             'website/static/src/interactions/**/*',
             'website/static/src/core/**/*',
diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 82105a2857a799..3c0d95948ec3fe 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -640,7 +640,7 @@ def autocomplete(self, search_type=None, term=None, order=None, limit=5, max_nb_
             mapping = record['_mapping']
             model = request.env[record['model']]
             mapped = {
-                '_fa': record.get('_fa'),
+                '_icon': record.get('_icon'),
             }
             for mapped_name, field_meta in mapping.items():
                 value = record.get(field_meta.get('name'))
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index 76a837f38717e3..e9a363a6b8eb32 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -227,7 +227,7 @@
                             <div class="container s_allow_columns">
                                 <div class="row">
                                     <div class="col-lg-12" style="text-align: center;">
-                                        <i class="fa fa-paper-plane fa-2x mb-3 rounded-circle text-bg-success" role="presentation"/>
+                                        <i class="oi oi-filled oi-2x mb-3 rounded-circle text-bg-success" data-icon="send" role="presentation"/>
                                         <h1 class="fw-bolder">Thank You!</h1>
                                         <p class="lead">Your message has been sent. <br/>We will get back to you shortly.</p>
                                         <a href="/">Go to Homepage</a>
@@ -466,7 +466,8 @@
         <field name="iap_page_code">about_us</field>
         <field name="sequence">1</field>
         <field name="page_view_id" ref="aboutus"/>
-        <field name="icon">fa-building</field>
+        <field name="icon">business</field>
+        <field name="icon_class"></field>
         <field name="menu_company">True</field>
         <field name="menu_sequence">50</field>
         <field name="feature_url">/about-us</field>
@@ -477,7 +478,8 @@
         <field name="iap_page_code">our_services</field>
         <field name="sequence">3</field>
         <field name="page_view_id" ref="our_services"/>
-        <field name="icon">fa-handshake-o</field>
+        <field name="icon">handshake</field>
+        <field name="icon_class"></field>
         <field name="menu_sequence">30</field>
         <field name="feature_url">/our-services</field>
     </record>
@@ -487,7 +489,8 @@
         <field name="iap_page_code">pricing</field>
         <field name="sequence">4</field>
         <field name="page_view_id" ref="pricing"/>
-        <field name="icon">fa-random</field>
+        <field name="icon">shuffle</field>
+        <field name="icon_class"></field>
         <field name="menu_sequence">35</field>
         <field name="feature_url">/pricing</field>
     </record>
@@ -499,7 +502,8 @@
         <field name="sequence">6</field>
         <field name="website_config_preselection">blog</field>
         <field name="module_id" ref="base.module_website_blog"/>
-        <field name="icon">fa-rss</field>
+        <field name="icon">rss_feed</field>
+        <field name="icon_class"></field>
         <field name="menu_company">True</field>
         <field name="menu_sequence">40</field>
         <field name="feature_url">/blog</field>
@@ -509,7 +513,8 @@
         <field name="description">Publish job opportunities</field>
         <field name="sequence">8</field>
         <field name="module_id" ref="base.module_website_hr_recruitment"/>
-        <field name="icon">fa-address-card</field>
+        <field name="icon">contact_mail</field>
+        <field name="icon_class">oi-filled</field>
     </record>
     <record id="feature_module_shop" model="website.configurator.feature">
         <field name="name">Shop</field>
@@ -517,7 +522,8 @@
         <field name="sequence">9</field>
         <field name="website_config_preselection">online_store</field>
         <field name="module_id" ref="base.module_website_sale"/>
-        <field name="icon">fa-shopping-cart</field>
+        <field name="icon">shopping_cart</field>
+        <field name="icon_class"></field>
         <field name="menu_sequence">15</field>
         <field name="feature_url">/shop</field>
     </record>
@@ -527,7 +533,8 @@
         <field name="sequence">10</field>
         <field name="website_config_preselection">event</field>
         <field name="module_id" ref="base.module_website_event"/>
-        <field name="icon">fa-ticket</field>
+        <field name="icon">confirmation_number</field>
+        <field name="icon_class"></field>
         <field name="menu_sequence">20</field>
         <field name="feature_url">/event</field>
     </record>
@@ -536,7 +543,8 @@
         <field name="description">Chat with visitors to improve traction</field>
         <field name="sequence">12</field>
         <field name="module_id" ref="base.module_website_livechat"/>
-        <field name="icon">fa-comments</field>
+        <field name="icon">forum</field>
+        <field name="icon_class">oi-filled</field>
     </record>
     <record id="feature_module_elearning" model="website.configurator.feature">
         <field name="name">eLearning</field>
@@ -544,7 +552,8 @@
         <field name="sequence">13</field>
         <field name="website_config_preselection">elearning</field>
         <field name="module_id" ref="base.module_website_slides"/>
-        <field name="icon">fa-graduation-cap</field>
+        <field name="icon">school</field>
+        <field name="icon_class"></field>
         <field name="menu_sequence">25</field>
         <field name="feature_url">/slides</field>
     </record>
diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index 51c93def524dfb..932c3560662944 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -321,7 +321,7 @@
                                             <div class="col-6">
                                                 <t t-foreach="bs_theme_colors" t-as="color">
                                                     <div t-attf-class="alert alert-#{color[0]} d-flex align-items-center" role="alert">
-                                                        <i class="fa fa-info-circle fa-lg fa-stack d-flex align-items-center justify-content-center me-3 p-2 rounded-1"/>
+                                                        <i class="oi oi-lg oi-stack d-flex align-items-center justify-content-center me-3 p-2 rounded-1" data-icon="info"/>
                                                         <div>
                                                             An example alert with an icon
                                                         </div>
diff --git a/addons/website/models/mixins.py b/addons/website/models/mixins.py
index f9944d4cec93d6..31982310f12e6e 100644
--- a/addons/website/models/mixins.py
+++ b/addons/website/models/mixins.py
@@ -744,7 +744,7 @@ def _search_fetch(self, search_detail, search, limit, order):
     def _search_render_results(self, fetch_fields, mapping, icon, limit):
         results_data = self.read(fetch_fields)[:limit]
         for result in results_data:
-            result['_fa'] = icon
+            result['_icon'] = icon
             result['_mapping'] = mapping
         html_fields = [config['name'] for config in mapping.values() if config.get('html')]
         if html_fields:
diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index dacad2939c3458..37c644a9e32448 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -687,6 +687,7 @@ def configurator_init(self):
             'description': feature.description,
             'type': 'page' if feature.page_view_id else 'app',
             'icon': feature.icon,
+            'icon_class': feature.icon_class,
             'website_config_preselection': feature.website_config_preselection,
             'module_state': feature.module_id.state,
         } for feature in configurator_features]
diff --git a/addons/website/models/website_configurator_feature.py b/addons/website/models/website_configurator_feature.py
index 39847bac1e4422..61390632dbd62f 100644
--- a/addons/website/models/website_configurator_feature.py
+++ b/addons/website/models/website_configurator_feature.py
@@ -16,6 +16,7 @@ class WebsiteConfiguratorFeature(models.Model):
     name = fields.Char(translate=True)
     description = fields.Char(translate=True)
     icon = fields.Char()
+    icon_class = fields.Char()
     iap_page_code = fields.Char(help='Page code used to tell IAP website_service for which page a snippet list should be generated')
     website_config_preselection = fields.Char(help='Comma-separated list of website type/purpose for which this feature should be pre-selected')
     page_view_id = fields.Many2one('ir.ui.view', ondelete='cascade')
diff --git a/addons/website/models/website_page.py b/addons/website/models/website_page.py
index c984cfb1fa155d..21c0173b9fcd2d 100644
--- a/addons/website/models/website_page.py
+++ b/addons/website/models/website_page.py
@@ -273,7 +273,7 @@ def _search_get_detail(self, website, order, options):
             'search_fields': search_fields,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-file-o',
+            'icon': 'description',
         }
 
     @api.model
diff --git a/addons/website/static/src/builder/builder_urlpicker.xml b/addons/website/static/src/builder/builder_urlpicker.xml
index fd931845735ce6..388ff6b9d4cfe2 100644
--- a/addons/website/static/src/builder/builder_urlpicker.xml
+++ b/addons/website/static/src/builder/builder_urlpicker.xml
@@ -29,7 +29,7 @@
                 onChange.bind="this.onChange"
             />
             <button class="btn" title="Preview this URL in a new tab" t-on-click="this.openPreviewUrl">
-                <i class="fa fa-fw fa-external-link"/>
+                <i class="oi oi-fw" data-icon="open_in_new"/>
             </button>
         </xpath>
     </t>
diff --git a/addons/website/static/src/builder/plugins/carousel_cards_option.xml b/addons/website/static/src/builder/plugins/carousel_cards_option.xml
index 264dac67fc8e0c..5131851360834d 100644
--- a/addons/website/static/src/builder/plugins/carousel_cards_option.xml
+++ b/addons/website/static/src/builder/plugins/carousel_cards_option.xml
@@ -9,8 +9,8 @@
 
         <BuilderRow label.translate="Position" level="1" t-if="this.isActiveItem('toggle_card_img_opt')">
             <BuilderButtonGroup applyTo="'.s_card'">
-                <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" classAction="'flex-lg-row'" iconImg="'/website/static/src/img/snippets_options/pos_left.svg'"/>
-                <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" classAction="'flex-lg-row-reverse'" iconImg="'/website/static/src/img/snippets_options/pos_right.svg'"/>
+                <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" classAction="'flex-lg-row'" icon="'horizontal_align_left'"/>
+                <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" classAction="'flex-lg-row-reverse'" icon="'horizontal_align_right'"/>
             </BuilderButtonGroup>
         </BuilderRow>
 
diff --git a/addons/website/static/src/builder/plugins/carousel_option.xml b/addons/website/static/src/builder/plugins/carousel_option.xml
index 0c921876a3b58b..4ae06ff1d484ec 100644
--- a/addons/website/static/src/builder/plugins/carousel_option.xml
+++ b/addons/website/static/src/builder/plugins/carousel_option.xml
@@ -80,27 +80,27 @@
             t-att-aria-label="sameLangDir ? backward : forward"
             t-att-class="{ disabled: !this.state.hasMultiItems }"
             t-on-click="sameLangDir ? slidePrev : slideNext">
-        <span class="fa fa-fw fa-angle-left"/>
+        <span class="oi oi-fw" data-icon="keyboard_arrow_left"/>
     </button>
     <button class="btn btn-primary py-0 px-1 me-2"
             t-att-title="sameLangDir ? forward : backward"
             t-att-aria-label="sameLangDir ? forward : backward"
             t-att-class="{ disabled: !this.state.hasMultiItems }"
             t-on-click="sameLangDir ? slideNext : slidePrev">
-        <span class="fa fa-fw fa-angle-right"/>
+        <span class="oi oi-fw" data-icon="keyboard_arrow_right"/>
     </button>
     <button class="btn btn-success ms-0 py-0 px-1 me-1"
             title="Add Slide"
             aria-label="Add Slide"
             t-on-click="this.addSlide">
-        <span class="oi fa-fw oi-plus"/>
+        <span class="oi oi-fw" data-icon="add"/>
     </button>
     <button class="btn btn-danger py-0 px-1"
             t-att-class="{ disabled: !this.state.hasMultiItems }"
             title="Remove Slide"
             aria-label="Remove Slide"
             t-on-click="this.removeSlide">
-        <span class="oi fa-fw oi-minus"/>
+        <span class="oi oi-fw" data-icon="remove"/>
     </button>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/floating_blocks/floating_blocks_option.xml b/addons/website/static/src/builder/plugins/floating_blocks/floating_blocks_option.xml
index 76516801eb560b..0d2f03f92cfe85 100644
--- a/addons/website/static/src/builder/plugins/floating_blocks/floating_blocks_option.xml
+++ b/addons/website/static/src/builder/plugins/floating_blocks/floating_blocks_option.xml
@@ -46,11 +46,11 @@
     <BuilderRow label.translate="Vert. Alignment" tooltip.translate="Vertical Alignment" t-if="this.state.isMobileView">
         <BuilderButtonGroup>
             <BuilderButton title.translate="Align Top" classAction="'align-self-start'"
-                    iconImg="'/html_builder/static/img/snippets_options/align_solo_top.svg'"/>
+                    icon="'vertical_align_top'"/>
             <BuilderButton title.translate="Align Middle" classAction="'align-self-center'"
-                    iconImg="'/html_builder/static/img/snippets_options/align_solo_middle.svg'"/>
+                    icon="'vertical_align_center'"/>
             <BuilderButton title.translate="Align Bottom" classAction="'align-self-end'"
-                    iconImg="'/html_builder/static/img/snippets_options/align_solo_bottom.svg'"/>
+                    icon="'vertical_align_bottom'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/website/static/src/builder/plugins/font/add_font_dialog.xml b/addons/website/static/src/builder/plugins/font/add_font_dialog.xml
index 1dde78446a7774..c7a9df0acb2edf 100644
--- a/addons/website/static/src/builder/plugins/font/add_font_dialog.xml
+++ b/addons/website/static/src/builder/plugins/font/add_font_dialog.xml
@@ -89,7 +89,7 @@
         <t t-set-slot="footer">
             <button class="btn btn-primary" t-att-disabled="this.state.loading" t-on-click="this.onClickSave">
                 <t t-if="this.state.loading">
-                    <i class="fa fa-icon fa-icon"/>
+                    <i class="oi oi-spin" data-icon="autorenew"/>
                 </t>
                 Save and Reload
             </button>
diff --git a/addons/website/static/src/builder/plugins/font_awesome_option.xml b/addons/website/static/src/builder/plugins/font_awesome_option.xml
index f8ffbaeec60cec..f7b1369e3d3108 100644
--- a/addons/website/static/src/builder/plugins/font_awesome_option.xml
+++ b/addons/website/static/src/builder/plugins/font_awesome_option.xml
@@ -13,10 +13,10 @@
     <BuilderRow label.translate="Size" t-if="this.state.showSize">
         <BuilderButtonGroup>
             <BuilderButton action="'faResize'" actionParam="''" title.translate="Size 1x">1x</BuilderButton>
-            <BuilderButton action="'faResize'" actionParam="'fa-2x'" title.translate="Size 2x">2x</BuilderButton>
-            <BuilderButton action="'faResize'" actionParam="'fa-3x'" title.translate="Size 3x">3x</BuilderButton>
-            <BuilderButton action="'faResize'" actionParam="'fa-4x'" title.translate="Size 4x">4x</BuilderButton>
-            <BuilderButton action="'faResize'" actionParam="'fa-5x'" title.translate="Size 5x">5x</BuilderButton>
+            <BuilderButton action="'faResize'" actionParam="'oi-2x'" title.translate="Size 2x">2x</BuilderButton>
+            <BuilderButton action="'faResize'" actionParam="'oi-3x'" title.translate="Size 3x">3x</BuilderButton>
+            <BuilderButton action="'faResize'" actionParam="'oi-4x'" title.translate="Size 4x">4x</BuilderButton>
+            <BuilderButton action="'faResize'" actionParam="'oi-5x'" title.translate="Size 5x">5x</BuilderButton>
         </BuilderButtonGroup>
     </BuilderRow>
 
diff --git a/addons/website/static/src/builder/plugins/font_awesome_option_plugin.js b/addons/website/static/src/builder/plugins/font_awesome_option_plugin.js
index 33334e2e0509cb..54a030e8139a2a 100644
--- a/addons/website/static/src/builder/plugins/font_awesome_option_plugin.js
+++ b/addons/website/static/src/builder/plugins/font_awesome_option_plugin.js
@@ -19,7 +19,7 @@ export class FaResizeAction extends ClassAction {
     static id = "faResize";
     apply(context) {
         const { editingElement } = context;
-        editingElement.classList.remove("fa-1x", "fa-lg");
+        editingElement.classList.remove("oi-1x", "oi-lg");
         super.apply(context);
     }
 }
diff --git a/addons/website/static/src/builder/plugins/form/form_option.xml b/addons/website/static/src/builder/plugins/form/form_option.xml
index b289119ab8b22b..909955784d266c 100644
--- a/addons/website/static/src/builder/plugins/form/form_option.xml
+++ b/addons/website/static/src/builder/plugins/form/form_option.xml
@@ -34,7 +34,7 @@
         </BuilderSelect>
         <BuilderButton t-if="this.isActiveItem('show_message_opt')"
                        title.translate="Edit Message"
-                       icon="'fa-eye'"
+                       icon="'visibility'"
                        preview="false"
                        action="'toggleEndMessage'"/>
     </BuilderRow>
@@ -60,7 +60,7 @@
                         <t t-out="record.display_name"/>
                     </BuilderSelectItem>
                 </BuilderSelect>
-                <BuilderButton t-if="field.createAction" className="'fa fa-fw fa-plus'"
+                <BuilderButton t-if="field.createAction" icon="'add'" iconClass="'oi-fw'"
                     title.translate="Create New"
                     action="'promptSaveRedirect'" actionParam="field.createAction"
                 />
@@ -152,11 +152,11 @@
     <BuilderRow label.translate="Position" level="1">
         <BuilderButtonGroup action="'selectLabelPosition'">
             <BuilderButton title.translate="Hide" actionValue="'none'">
-                <i class="fa fa-eye-slash"/>
+                <i class="oi" data-icon="visibility_off"/>
             </BuilderButton>
-            <BuilderButton title.translate="Top" actionValue="'top'" iconImg="'/website/static/src/img/snippets_options/pos_top.svg'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" actionValue="'left'" iconImg="'/website/static/src/img/snippets_options/pos_left.svg'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" actionValue="'right'" iconImg="'/website/static/src/img/snippets_options/pos_right.svg'"/>
+            <BuilderButton title.translate="Top" actionValue="'top'" icon="'vertical_align_top'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" actionValue="'left'" icon="'horizontal_align_left'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" actionValue="'right'" icon="'horizontal_align_right'"/>
         </BuilderButtonGroup>
     </BuilderRow>
     <BuilderRow label.translate="Link to country">
@@ -286,7 +286,7 @@
         <BuilderButton id="'error_message_opt'"
             t-if="!this.isActiveItem('no_requirement_opt')"
             title.translate="Add predefined error message"
-            className="'fa ' + (this.isActiveItem('error_message_opt') ? 'fa-eye' : 'fa-eye-slash')"
+            icon="this.isActiveItem('error_message_opt') ? 'visibility' : 'visibility_off'"
             preview="false"
             action="'setCustomErrorMessage'"/>
     </BuilderRow>
diff --git a/addons/website/static/src/builder/plugins/highlight/highlight_configurator.xml b/addons/website/static/src/builder/plugins/highlight/highlight_configurator.xml
index 6f10403c879ce8..0cbe8c458df609 100644
--- a/addons/website/static/src/builder/plugins/highlight/highlight_configurator.xml
+++ b/addons/website/static/src/builder/plugins/highlight/highlight_configurator.xml
@@ -13,7 +13,7 @@
                 </t>
                 <t t-else="" t-out="this.highlightIdToName[this.state.highlightId]"/>
             </button>
-            <button class="btn btn-sm btn-light fa fa-trash" title="Reset" t-on-click="this.deleteHighlight"/>
+            <button class="btn btn-sm btn-light oi oi-filled" data-icon="delete" title="Reset" t-on-click="this.deleteHighlight"/>
         </div>
     </div>
 
diff --git a/addons/website/static/src/builder/plugins/highlight/highlight_plugin.js b/addons/website/static/src/builder/plugins/highlight/highlight_plugin.js
index 06757c850510de..922d644fdfe560 100644
--- a/addons/website/static/src/builder/plugins/highlight/highlight_plugin.js
+++ b/addons/website/static/src/builder/plugins/highlight/highlight_plugin.js
@@ -297,7 +297,7 @@ class HighlightToolbarButton extends Component {
     };
     static template = xml`
         <button t-custom-ref="root" t-attf-class="btn btn-light o-select-highlight {{this.highlightState.highlightId ? 'active' : ''}}" t-on-click="this.openHighlightConfigurator" t-att-title="this.props.title">
-            <i class="fa oi oi-text-effect oi-fw py-1"/>
+            <i class="oi oi-fw py-1" data-icon="stylus_laser_pointer"/>
         </button>
     `;
 
diff --git a/addons/website/static/src/builder/plugins/highlight/stacking_component.js b/addons/website/static/src/builder/plugins/highlight/stacking_component.js
index 592649acd5b8c9..25cb1e7624a2fd 100644
--- a/addons/website/static/src/builder/plugins/highlight/stacking_component.js
+++ b/addons/website/static/src/builder/plugins/highlight/stacking_component.js
@@ -18,7 +18,7 @@ export class StackingComponent extends Component {
         <t t-foreach="this.stack" t-as="componentSpec" t-key="componentSpec.id">
             <div data-prevent-closing-overlay="true" t-if="componentSpec_last" t-attf-class="{{this.props.class}} {{componentSpec_last ? '': 'd-none' }}" t-att-style="this.props.style">
                 <div t-if="this.stack.length > 1 || componentSpec.title" class="d-flex align-items-center">
-                    <button t-if="this.stack.length > 1 and componentSpec.withPrevious" class="fa fa-angle-left btn btn-secondary bg-transparent border-0" t-on-click="this.props.stackState.pop"></button>
+                    <button t-if="this.stack.length > 1 and componentSpec.withPrevious" class="oi btn btn-secondary bg-transparent border-0" data-icon="keyboard_arrow_left" t-on-click="this.props.stackState.pop"></button>
                     <span t-out="componentSpec.title" t-att-class="{ 'cursor-pointer': componentSpec.withPrevious }" t-on-click="this.props.stackState.pop"/>
                 </div>
                 <t t-component="componentSpec.component" t-props="componentSpec.props" />
diff --git a/addons/website/static/src/builder/plugins/layout_option/grid_column_option.xml b/addons/website/static/src/builder/plugins/layout_option/grid_column_option.xml
index d5e221d08e2fcb..51ac2685a235f1 100644
--- a/addons/website/static/src/builder/plugins/layout_option/grid_column_option.xml
+++ b/addons/website/static/src/builder/plugins/layout_option/grid_column_option.xml
@@ -3,8 +3,8 @@
 
 <t t-name="website.GridColumnsOption">
     <BuilderRow label.translate="Padding" tooltip.translate="Vertical and Horizontal padding">
-        <BuilderNumberInput action="'setGridColumnsPadding'" actionParam="'--grid-item-padding-y'" unit="'px'" prefixIcon="'oi oi-arrows-v'"/>
-        <BuilderNumberInput action="'setGridColumnsPadding'" actionParam="'--grid-item-padding-x'" unit="'px'" prefixIcon="'oi oi-arrows-h'"/>
+        <BuilderNumberInput action="'setGridColumnsPadding'" actionParam="'--grid-item-padding-y'" unit="'px'" prefixIcon="'height'"/>
+        <BuilderNumberInput action="'setGridColumnsPadding'" actionParam="'--grid-item-padding-x'" unit="'px'" prefixIcon="'arrow_range'"/>
     </BuilderRow>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/layout_option/spacing_option.xml b/addons/website/static/src/builder/plugins/layout_option/spacing_option.xml
index 977da6542edfb2..5e4af8ffd917c7 100644
--- a/addons/website/static/src/builder/plugins/layout_option/spacing_option.xml
+++ b/addons/website/static/src/builder/plugins/layout_option/spacing_option.xml
@@ -3,8 +3,8 @@
 
 <t t-name="website.SpacingOption">
     <BuilderRow label.translate="Spacing" tooltip.translate="Vertical and Horizontal spacing" level="this.props.level" applyTo="this.props.applyTo">
-        <BuilderNumberInput action="'setGridSpacing'" actionParam="'row-gap'" unit="'px'" default="0" prefixIcon="'oi oi-arrows-v'"/>
-        <BuilderNumberInput action="'setGridSpacing'" actionParam="'column-gap'" unit="'px'" default="0" max="60" prefixIcon="'oi oi-arrows-h'"/>
+        <BuilderNumberInput action="'setGridSpacing'" actionParam="'row-gap'" unit="'px'" default="0" prefixIcon="'height'"/>
+        <BuilderNumberInput action="'setGridSpacing'" actionParam="'column-gap'" unit="'px'" default="0" max="60" prefixIcon="'arrow_range'"/>
     </BuilderRow>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/options/accordion_option.xml b/addons/website/static/src/builder/plugins/options/accordion_option.xml
index 5cf6fffa9a986e..63df347308cf38 100644
--- a/addons/website/static/src/builder/plugins/options/accordion_option.xml
+++ b/addons/website/static/src/builder/plugins/options/accordion_option.xml
@@ -36,12 +36,12 @@
         </BuilderRow>
         <BuilderRow label.translate="Active" level="1" t-if="this.isActiveItem('accordion_icons_custom_opt')">
             <BuilderButton action="'defineCustomIcon'" actionParam="{ isActiveIcon: true }" preview="false">
-                <i class="fa fa-fw fa-refresh me-1"/> Replace Icon
+                <i class="oi oi-fw me-1" data-icon="refresh"/> Replace Icon
             </BuilderButton>
         </BuilderRow>
         <BuilderRow label.translate="Inactive" level="1" t-if="this.isActiveItem('accordion_icons_custom_opt')">
             <BuilderButton action="'defineCustomIcon'" actionParam="{ isActiveIcon: false }" preview="false">
-                <i class="fa fa-fw fa-refresh me-1"/> Replace Icon
+                <i class="oi oi-fw me-1" data-icon="refresh"/> Replace Icon
             </BuilderButton>
         </BuilderRow>
         <BuilderRow label.translate="Transition" level="1" t-if="this.isActiveItem('accordion_icons_custom_opt')">
@@ -56,10 +56,10 @@
             <BuilderButtonGroup>
                 <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left"
                     classAction="'justify-content-end flex-row-reverse o_icons_position_reversed'"
-                    iconImg="'/website/static/src/img/snippets_options/pos_left.svg'"/>
+                    icon="'horizontal_align_left'"/>
                 <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right"
                     classAction="'justify-content-between'"
-                    iconImg="'/website/static/src/img/snippets_options/pos_right.svg'"/>
+                    icon="'horizontal_align_right'"/>
             </BuilderButtonGroup>
         </BuilderRow>
     </BuilderContext>
diff --git a/addons/website/static/src/builder/plugins/options/accordion_option_plugin.js b/addons/website/static/src/builder/plugins/options/accordion_option_plugin.js
index bb9c342451b7fe..de410b565765a9 100644
--- a/addons/website/static/src/builder/plugins/options/accordion_option_plugin.js
+++ b/addons/website/static/src/builder/plugins/options/accordion_option_plugin.js
@@ -62,8 +62,8 @@ export class CustomAccordionIconAction extends BuilderAction {
         const accordionButtonEls = editingElement.querySelectorAll(
             ":scope > .accordion-item > .accordion-button"
         );
-        const activeCustomIcon = editingElement.dataset.activeCustomIcon || "fa fa-arrow-up";
-        const inactiveCustomIcon = editingElement.dataset.inactiveCustomIcon || "fa fa-arrow-down";
+        const activeCustomIcon = editingElement.dataset.activeCustomIcon || "arrow_upward";
+        const inactiveCustomIcon = editingElement.dataset.inactiveCustomIcon || "arrow_downward";
         if (value) {
             if (value === "custom") {
                 editingElement.dataset.activeCustomIcon = activeCustomIcon;
@@ -90,14 +90,16 @@ export class CustomAccordionIconAction extends BuilderAction {
                 customIconActiveEl.className = customIconsClasses;
                 customIconActiveEl.classList.add("o_custom_icon_active");
                 const customIconActiveIEl = document.createElement("i");
-                customIconActiveIEl.className = activeCustomIcon;
+                customIconActiveIEl.className = "oi";
+                customIconActiveIEl.dataset.icon = activeCustomIcon;
                 customIconActiveEl.appendChild(customIconActiveIEl);
                 el.appendChild(customIconActiveEl);
                 const customIconInactiveEl = document.createElement("span");
                 customIconInactiveEl.className = customIconsClasses;
                 customIconInactiveEl.classList.add("o_custom_icon_inactive");
                 const customIconInactiveIEl = document.createElement("i");
-                customIconInactiveIEl.className = inactiveCustomIcon;
+                customIconInactiveIEl.className = "oi";
+                customIconInactiveIEl.dataset.icon = inactiveCustomIcon;
                 customIconInactiveEl.appendChild(customIconInactiveIEl);
                 el.appendChild(customIconInactiveEl);
             });
diff --git a/addons/website/static/src/builder/plugins/options/animate_text.xml b/addons/website/static/src/builder/plugins/options/animate_text.xml
index e373ca66bd4d38..ac2eb0f40941ee 100644
--- a/addons/website/static/src/builder/plugins/options/animate_text.xml
+++ b/addons/website/static/src/builder/plugins/options/animate_text.xml
@@ -1,7 +1,7 @@
 <templates xml:space="preserve">
     <t t-name="website_builder.AnimateText">
         <button t-custom-ref="root" class="btn btn-light" t-att-class="{ active: this.state.isActive }" t-att-title="this.props.title" t-att="{ disabled: this.state.isDisabled }" t-on-click="this.onClick">
-            <span class="fa fa-play fa-fw"></span>
+            <span class="oi oi-fw" data-icon="play_arrow"></span>
         </button>
     </t>
 
@@ -9,7 +9,7 @@
         <div class="o_animate_text_popover p-2" data-prevent-closing-overlay="true" t-custom-ref="content">
             <AnimateOption dropdownClass="''" requireAnimation="true">
                 <t t-set-slot="animationRowTrailing">
-                    <button class="btn btn-sm btn-light fa fa-trash" title="Reset" t-on-click="this.props.onReset"/>
+                    <button class="btn btn-sm btn-light oi oi-filled" data-icon="delete" title="Reset" t-on-click="this.props.onReset"/>
                 </t>
             </AnimateOption>
         </div>
diff --git a/addons/website/static/src/builder/plugins/options/avatars_option.xml b/addons/website/static/src/builder/plugins/options/avatars_option.xml
index 2175321075a1c8..49c5fa92b36e08 100644
--- a/addons/website/static/src/builder/plugins/options/avatars_option.xml
+++ b/addons/website/static/src/builder/plugins/options/avatars_option.xml
@@ -15,9 +15,9 @@
 
     <BuilderRow label.translate="Alignment">
         <BuilderButtonGroup>
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" classAction="''" icon="'fa-fw fa-align-left'"/>
-            <BuilderButton title.translate="Center" classAction="'o_avatars_center'" icon="'fa-fw fa-align-center'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" classAction="'o_avatars_end'" icon="'fa-fw fa-align-right'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" classAction="''" icon="'format_align_left'" iconClass="'oi-fw'" />
+            <BuilderButton title.translate="Center" classAction="'o_avatars_center'" icon="'format_align_center'" iconClass="'oi-fw'" />
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" classAction="'o_avatars_end'" icon="'format_align_right'" iconClass="'oi-fw'" />
         </BuilderButtonGroup>
     </BuilderRow>
 
@@ -34,8 +34,8 @@
 
     <BuilderRow label.translate="Direction" t-if="this.isActiveItem('avatars_label_opt')" level="1">
         <BuilderButtonGroup>
-            <BuilderButton className="'fa fa-fw fa-long-arrow-right'" title.translate="Row" classAction="'flex-row'"/>
-            <BuilderButton className="'fa fa-fw fa-long-arrow-down'" title.translate="Column" classAction="'flex-column'"/>
+            <BuilderButton icon="'east'" iconClass="'oi-fw'" title.translate="Row" classAction="'flex-row'"/>
+            <BuilderButton icon="'south'" iconClass="'oi-fw'" title.translate="Column" classAction="'flex-column'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 
@@ -51,13 +51,13 @@
 
 <t t-name="website.AvatarsHeaderMiddleButtons">
     <button class="btn btn-success-color-hover ms-0 py-0 px-1 me-1" aria-label="Add Avatar" t-on-click="this.addAvatar">
-        <span class="oi oi-fw oi-plus"/>
-        <span class="oi oi-user"/>
+        <span class="oi oi-fw" data-icon="add"/>
+        <span class="oi oi-filled" data-icon="person"/>
     </button>
     <button class="btn btn-danger-color-hover py-0 px-1 me-3" t-att-disabled="this.state.disableRemoveButton"
             aria-label="Remove Avatar" t-on-click="this.removeAvatar">
-        <span class="oi oi-fw oi-minus"/>
-        <span class="oi oi-user"/>
+        <span class="oi oi-fw" data-icon="remove"/>
+        <span class="oi oi-filled" data-icon="person"/>
     </button>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/options/background_option.xml b/addons/website/static/src/builder/plugins/options/background_option.xml
index a9cdd45eeed268..d86d33b767fb0b 100644
--- a/addons/website/static/src/builder/plugins/options/background_option.xml
+++ b/addons/website/static/src/builder/plugins/options/background_option.xml
@@ -9,7 +9,9 @@
                 title.translate="Add a background video"
                 titleActive.translate="Remove the background video"
                 preview="false"
-                className="'fa fa-fw fa-film px-2'"
+                className="'px-2'"
+                icon="'movie'"
+                iconClass="'oi-fw'"
                 id="'toggle_bg_video_id'"
             />
         </t>
diff --git a/addons/website/static/src/builder/plugins/options/background_video_option.xml b/addons/website/static/src/builder/plugins/options/background_video_option.xml
index e32b974474a706..40d0e03a83a23f 100644
--- a/addons/website/static/src/builder/plugins/options/background_video_option.xml
+++ b/addons/website/static/src/builder/plugins/options/background_video_option.xml
@@ -4,7 +4,7 @@
 <t t-name="website.BackgroundVideoOption">
     <BuilderRow t-if="this.isActiveItem('toggle_bg_video_id')" label.translate="Video" level="1" preview="false">
         <BuilderButton title.translate="Edit video" type="'success'" action="'replaceBgVideo'">Replace</BuilderButton>
-        <BuilderButton title.translate="Remove video" icon="'oi-close'" action="'removeBgVideo'" className="'btn-danger-color-hover'"/>
+        <BuilderButton title.translate="Remove video" icon="'close_small'" action="'removeBgVideo'" className="'btn-danger-color-hover'"/>
     </BuilderRow>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/options/blockquote_option.xml b/addons/website/static/src/builder/plugins/options/blockquote_option.xml
index 7b28411efbc15f..ef9a51814f72b1 100644
--- a/addons/website/static/src/builder/plugins/options/blockquote_option.xml
+++ b/addons/website/static/src/builder/plugins/options/blockquote_option.xml
@@ -19,9 +19,9 @@
         </BuilderRow>
         <BuilderRow label.translate="Alignment" t-if="!this.isActiveItem('so_width_100')" level="1">
             <BuilderButtonGroup>
-                <BuilderButton ltrRtlMapping="'left-right'" classAction="'me-auto'" icon="'fa-align-left'" title.translate="Left"/>
-                <BuilderButton icon="'fa-align-center'" title.translate="Center" classAction="'mx-auto'"/>
-                <BuilderButton ltrRtlMapping="'left-right'" classAction="'ms-auto'" icon="'fa-align-right'" title.translate="Right"/>
+                <BuilderButton ltrRtlMapping="'left-right'" classAction="'me-auto'" icon="'format_align_left'" title.translate="Left"/>
+                <BuilderButton icon="'format_align_center'" title.translate="Center" classAction="'mx-auto'"/>
+                <BuilderButton ltrRtlMapping="'left-right'" classAction="'ms-auto'" icon="'format_align_right'" title.translate="Right"/>
             </BuilderButtonGroup>
         </BuilderRow>
     </t>
diff --git a/addons/website/static/src/builder/plugins/options/card_image_option.xml b/addons/website/static/src/builder/plugins/options/card_image_option.xml
index 47cd207f57f810..d4efe5b3c8f1f9 100644
--- a/addons/website/static/src/builder/plugins/options/card_image_option.xml
+++ b/addons/website/static/src/builder/plugins/options/card_image_option.xml
@@ -10,23 +10,23 @@
                     id="'card_img_top_opt'"
                     classAction="'o_card_img_top'"
                     actionParam="'card-img-top'"
-                    iconImg="'/website/static/src/img/snippets_options/pos_top.svg'"
+                    icon="'vertical_align_top'"
                     title.translate="Top"/>
                 <BuilderButton ltrRtlMapping="'left-right'"
                     classAction="'o_card_img_horizontal flex-lg-row'"
                     actionParam="'rounded-start'"
-                    iconImg="'/website/static/src/img/snippets_options/pos_left.svg'"
+                    icon="'horizontal_align_left'"
                     title.translate="Left"/>
                 <BuilderButton ltrRtlMapping="'left-right'"
                     classAction="'o_card_img_horizontal flex-lg-row-reverse'"
                     actionParam="'rounded-end'"
-                    iconImg="'/website/static/src/img/snippets_options/pos_right.svg'"
+                    icon="'horizontal_align_right'"
                     title.translate="Right"/>
                 <BuilderButton
                     id="'card_img_bottom_opt'"
                     classAction="'o_card_img_bottom flex-column-reverse'"
                     actionParam="'card-img-bottom'"
-                    iconImg="'/website/static/src/img/snippets_options/pos_bottom.svg'"
+                    icon="'vertical_align_bottom'"
                     title.translate="Bottom"/>
             </BuilderButtonGroup>
 
@@ -34,7 +34,7 @@
             <BuilderButton
                 action="'removeCoverImage'"
                 preview="false"
-                icon="'oi-close'"
+                icon="'close_small'"
                 className="'o_we_bg_danger'"
                 title.translate="Remove Cover"/>
         </t>
diff --git a/addons/website/static/src/builder/plugins/options/card_image_position_option.xml b/addons/website/static/src/builder/plugins/options/card_image_position_option.xml
index 566b6b2b866d43..0116487c7c6d23 100644
--- a/addons/website/static/src/builder/plugins/options/card_image_position_option.xml
+++ b/addons/website/static/src/builder/plugins/options/card_image_position_option.xml
@@ -4,7 +4,7 @@
 <t t-name="website.CardImagePositionOption">
     <BuilderRow label="this.props.label" level="this.props.level" t-if="this.state.show">
         <BuilderButton
-            icon="'fa-crosshairs'"
+            icon="'my_location'"
             preview="false"
             action="'coverImagePositionOverlay'"/>
     </BuilderRow>
diff --git a/addons/website/static/src/builder/plugins/options/card_width_option.xml b/addons/website/static/src/builder/plugins/options/card_width_option.xml
index c471f88919cd3c..acdb83271a0941 100644
--- a/addons/website/static/src/builder/plugins/options/card_width_option.xml
+++ b/addons/website/static/src/builder/plugins/options/card_width_option.xml
@@ -14,9 +14,9 @@
     </BuilderRow>
     <BuilderRow t-if="this.getItemValue('card_width') !== '100%'" label.translate="Alignment" level="1">
         <BuilderButtonGroup action="'setCardAlignment'">
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-left'" title.translate="Left" actionParam="'me-auto'"/>
-            <BuilderButton icon="'fa-align-center'" title.translate="Center" actionParam="'mx-auto'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-right'" title.translate="Right" actionParam="'ms-auto'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_left'" title.translate="Left" actionParam="'me-auto'"/>
+            <BuilderButton icon="'format_align_center'" title.translate="Center" actionParam="'mx-auto'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_right'" title.translate="Right" actionParam="'ms-auto'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/website/static/src/builder/plugins/options/chart_option.xml b/addons/website/static/src/builder/plugins/options/chart_option.xml
index 1f5bca55fa79b0..72b5a0ba979b38 100644
--- a/addons/website/static/src/builder/plugins/options/chart_option.xml
+++ b/addons/website/static/src/builder/plugins/options/chart_option.xml
@@ -52,7 +52,9 @@
                 <th t-on-click.capture="this.onButtonCellClick">
                     <BuilderButton
                         action="'addColumn'"
-                        className="'add_column fa fa-fw fa-plus text-success d-inline-block'"
+                        className="'add_column text-success d-inline-block'"
+                        icon="'add'"
+                        iconClass="'oi-fw'"
                         title.translate="Add Dataset"
                         type="''"
                         preview="false"/>
@@ -80,7 +82,9 @@
                     <BuilderButton t-if="this.domState.data.labels.length > 1"
                         action="'removeRow'"
                         actionParam="label_index"
-                        className="'o_builder_matrix_remove_row visually-hidden-focusable text-danger fa fa-fw fa-minus'"
+                        className="'o_builder_matrix_remove_row visually-hidden-focusable text-danger'"
+                        icon="'remove'"
+                        iconClass="'oi-fw'"
                         title.translate="Remove Row"
                         type="''"
                         preview="false"/>
@@ -91,7 +95,9 @@
                 <th t-on-click.capture="this.onButtonCellClick">
                     <BuilderButton
                         action="'addRow'"
-                        className="'add_row fa fa-fw fa-plus text-success d-inline-block'"
+                        className="'add_row text-success d-inline-block'"
+                        icon="'add'"
+                        iconClass="'oi-fw'"
                         title.translate="Add Row"
                         type="''"
                         preview="false"/>
@@ -101,7 +107,9 @@
                         <BuilderButton t-if="this.domState.data.datasets.length > 1"
                             action="'removeColumn'"
                             actionParam="dataset.key"
-                            className="'o_builder_matrix_remove_col visually-hidden-focusable text-danger fa fa-fw fa-minus'"
+                            className="'o_builder_matrix_remove_col visually-hidden-focusable text-danger'"
+                            icon="'remove'"
+                            iconClass="'oi-fw'"
                             title.translate="Remove Column"
                             type="''"
                             preview="false"/>
diff --git a/addons/website/static/src/builder/plugins/options/countdown_option.xml b/addons/website/static/src/builder/plugins/options/countdown_option.xml
index 96e9b8eaacb9ee..20b971f41b916b 100644
--- a/addons/website/static/src/builder/plugins/options/countdown_option.xml
+++ b/addons/website/static/src/builder/plugins/options/countdown_option.xml
@@ -16,7 +16,7 @@
                        t-if="!this.isActiveItem('no_end_action_opt') and !this.isActiveItem('redirect_end_action_opt')"
                        action="'previewEndMessage'"
                        preview="false"
-                       icon="'fa-eye'"/>
+                       icon="'visibility'"/>
     </BuilderRow>
     <BuilderRow t-if="this.isActiveItem('redirect_end_action_opt')"
                 label.translate="URL">
@@ -159,9 +159,9 @@
         </BuilderRow>
         <BuilderRow label.translate="Alignment" level="2">
             <BuilderButtonGroup applyTo="'.s_countdown_inline_wrapper'">
-                <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-left'" title.translate="Left" classAction="''"/>
-                <BuilderButton icon="'fa-align-center'" title.translate="Center" classAction="'align-self-center text-center'"/>
-                <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-right'" title.translate="Right" classAction="'align-self-end text-end'"/>
+                <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_left'" title.translate="Left" classAction="''"/>
+                <BuilderButton icon="'format_align_center'" title.translate="Center" classAction="'align-self-center text-center'"/>
+                <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_right'" title.translate="Right" classAction="'align-self-end text-end'"/>
             </BuilderButtonGroup>
         </BuilderRow>
         <BuilderRow label.translate="Font Monospace" applyTo="'.s_countdown_inline'" level="2">
diff --git a/addons/website/static/src/builder/plugins/options/cover_properties_option.xml b/addons/website/static/src/builder/plugins/options/cover_properties_option.xml
index ff5a3c50652ba2..bd336f09f734ba 100644
--- a/addons/website/static/src/builder/plugins/options/cover_properties_option.xml
+++ b/addons/website/static/src/builder/plugins/options/cover_properties_option.xml
@@ -7,8 +7,8 @@
         <!-- todo adapt when colorpicker is implemented: snippet_options_background_color_widget-->
         <BuilderColorPicker title.translate="Color" styleAction="'background-color'"/>
         <BuilderButtonGroup>
-            <BuilderButton action="'setCoverBackground'" actionParam="true" preview="false" title.translate="Image" className="'ms-auto fa fa-fw fa-camera'"/>
-            <BuilderButton action="'setCoverBackground'" actionParam="false" title.translate="None" className="'fa fa-fw fa-ban'"/>
+            <BuilderButton action="'setCoverBackground'" actionParam="true" preview="false" title.translate="Image" icon="'photo_camera'" iconClass="'oi-fw'" className="'ms-auto'"/>
+            <BuilderButton action="'setCoverBackground'" actionParam="false" title.translate="None" icon="'block'" iconClass="'oi-fw'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 
diff --git a/addons/website/static/src/builder/plugins/options/dynamic_snippet_option.xml b/addons/website/static/src/builder/plugins/options/dynamic_snippet_option.xml
index 6a3c28c32d5795..5354d44df01a9f 100644
--- a/addons/website/static/src/builder/plugins/options/dynamic_snippet_option.xml
+++ b/addons/website/static/src/builder/plugins/options/dynamic_snippet_option.xml
@@ -46,8 +46,8 @@
     </BuilderRow>
     <BuilderRow label.translate="Cover Image" t-if="isSingleMode and !!this.showCoverImageOption?.()">
         <BuilderButtonGroup>
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" classAction="'s_dynamic_snippet_cover_left'" iconImg="'/website/static/src/img/snippets_options/pos_left.svg'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" classAction="''" iconImg="'/website/static/src/img/snippets_options/pos_right.svg'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" classAction="'s_dynamic_snippet_cover_left'" icon="'horizontal_align_left'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" classAction="''" icon="'horizontal_align_right'"/>
         </BuilderButtonGroup>
     </BuilderRow>
     <BuilderRow id="this.number_of_records_opt_row" label.translate="Fetched Elements" t-if="!!this.dynamicOptionParams.domState.filterId or isSingleMode">
diff --git a/addons/website/static/src/builder/plugins/options/ecomm_categories_showcase_option.xml b/addons/website/static/src/builder/plugins/options/ecomm_categories_showcase_option.xml
index 49eda37566ca6e..23a76c14d3c9cc 100644
--- a/addons/website/static/src/builder/plugins/options/ecomm_categories_showcase_option.xml
+++ b/addons/website/static/src/builder/plugins/options/ecomm_categories_showcase_option.xml
@@ -57,7 +57,7 @@
         <attribute name="applyTo">'.s_ecomm_categories_showcase_content'</attribute>
     </xpath>
     <xpath expr="//BuilderButton[@classAction=&quot;'justify-content-end'&quot;]" position="after">
-        <BuilderButton classAction="'justify-content-between'" title.translate="Align Between" iconImg="'/html_builder/static/img/snippets_options/align_solo_between.svg'"/>
+        <BuilderButton classAction="'justify-content-between'" title.translate="Align Between" icon="'align_space_even'"/>
     </xpath>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/options/embed_code_option.xml b/addons/website/static/src/builder/plugins/options/embed_code_option.xml
index 83a034250c988c..6be9f218c4d113 100644
--- a/addons/website/static/src/builder/plugins/options/embed_code_option.xml
+++ b/addons/website/static/src/builder/plugins/options/embed_code_option.xml
@@ -11,9 +11,9 @@
     </BuilderRow>
     <BuilderRow label.translate="Alignment">
         <BuilderButtonGroup>
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" classAction="'text-start'" icon="'fa-fw fa-align-left'"/>
-            <BuilderButton title.translate="Center" classAction="'text-center'" icon="'fa-fw fa-align-center'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" classAction="'text-end'" icon="'fa-fw fa-align-right'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Left" classAction="'text-start'" icon="'format_align_left'" iconClass="'oi-fw"/>
+            <BuilderButton title.translate="Center" classAction="'text-center'" icon="'format_align_center'" iconClass="'oi-fw"/>
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Right" classAction="'text-end'" icon="'format_align_right'" iconClass="'oi-fw"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/website/static/src/builder/plugins/options/gallery_element_option.xml b/addons/website/static/src/builder/plugins/options/gallery_element_option.xml
index 49cd276e623d3c..d45390f4b3eac4 100644
--- a/addons/website/static/src/builder/plugins/options/gallery_element_option.xml
+++ b/addons/website/static/src/builder/plugins/options/gallery_element_option.xml
@@ -5,22 +5,22 @@
     <BuilderRow label.translate="Re-order" disabled="!this.state.hasMultiItems">
         <BuilderButtonGroup preview="false" action="'setGalleryElementPosition'">
             <BuilderButton ltrRtlMapping="'first-last'" isLabelLinkedToContent="true"
-                icon="'fa-angle-double-left'"
+                icon="'keyboard_double_arrow_left'"
                 title.translate="Move to first"
                 actionValue="'first'"
                 className="!this.state.hasMultiItems || this.state.isFirstItem ? 'disabled' : ''"/>
             <BuilderButton ltrRtlMapping="'prev-next'" isLabelLinkedToContent="true"
-                icon="'fa-angle-left'"
+                icon="'keyboard_arrow_left'"
                 title.translate="Move to previous"
                 actionValue="'prev'"
                 className="!this.state.hasMultiItems ? 'disabled' : ''"/>
             <BuilderButton ltrRtlMapping="'prev-next'" isLabelLinkedToContent="true"
-                icon="'fa-angle-right'"
+                icon="'keyboard_arrow_right'"
                 title.translate="Move to next"
                 actionValue="'next'"
                 className="!this.state.hasMultiItems ? 'disabled' : ''"/>
             <BuilderButton ltrRtlMapping="'first-last'" isLabelLinkedToContent="true"
-                icon="'fa-angle-double-right'"
+                icon="'keyboard_double_arrow_right'"
                 title.translate="Move to last"
                 actionValue="'last'"
                 className="!this.state.hasMultiItems || this.state.isLastItem ? 'disabled' : ''"/>
diff --git a/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_api_key_dialog.xml b/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_api_key_dialog.xml
index 280bf49797b16b..c9403a55ddd813 100644
--- a/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_api_key_dialog.xml
+++ b/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_api_key_dialog.xml
@@ -5,7 +5,7 @@
             <label class="col-sm-2 col-form-label" for="pin_address">API Key</label>
             <div class="col">
                 <div class="input-group">
-                    <div class="input-group-text"><i class="fa fa-key"/></div>
+                    <div class="input-group-text"><i class="oi" data-icon="key"/></div>
                     <input type="text" class="form-control" id="api_key_input"
                             t-att-class="{ 'is-invalid': this.state.apiKeyValidation and !this.state.apiKeyValidation.isValid and this.state.apiKeyValidation.message }"
                             t-custom-model="this.state.apiKey"
@@ -18,12 +18,12 @@
                     Hint: How to use Google Map on your website (Contact Us page and as a snippet)
                     <br/>
                     <a target="_blank" href="https://console.developers.google.com/flows/enableapi?apiid=maps-backend.googleapis.com,static-maps-backend.googleapis.com,places-backend.googleapis.com&amp;keyType=CLIENT_SIDE&amp;reusekey=true">
-                        <i class="oi oi-arrow-right"/>
+                        <i class="oi" data-icon="east"/>
                         Create a Google Project and Get a Key
                     </a>
                     <br/>
                     <a target="_blank" href="https://cloud.google.com/maps-platform/pricing">
-                        <i class="oi oi-arrow-right"/>
+                        <i class="oi" data-icon="east"/>
                         Enable billing on your Google Project
                     </a>
                 </div>
diff --git a/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_option.scss b/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_option.scss
index 05579191b1ba41..bae3b3011848eb 100644
--- a/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_option.scss
+++ b/addons/website/static/src/builder/plugins/options/google_maps_option/google_maps_option.scss
@@ -42,8 +42,8 @@
             margin-left: -1em;
 
             &::after {
-                content: '\f041';
-                font-family: FontAwesome;
+                content: 'location_on';
+                font-family: 'material_symbols_sharp';
             }
         }
 
diff --git a/addons/website/static/src/builder/plugins/options/header/header_elements_option.xml b/addons/website/static/src/builder/plugins/options/header/header_elements_option.xml
index 6c5b50d098497a..05e3899693138e 100644
--- a/addons/website/static/src/builder/plugins/options/header/header_elements_option.xml
+++ b/addons/website/static/src/builder/plugins/options/header/header_elements_option.xml
@@ -36,7 +36,8 @@
     <BuilderRow label.translate="Actions" action="'websiteConfig'">
         <BuilderButton
             title.translate="Search Bar"
-            className="'fa fa-search flex-grow-1'"
+            className="'flex-grow-1'"
+            icon="'search'"
             actionParam="{
                 views: ['website.header_search_box'],
                 resetViewArch: true,
@@ -45,7 +46,9 @@
         <t t-set="language_ids" t-value="this.env.services.website.currentWebsite.language_ids || []"/>
         <BuilderButton t-if="language_ids.length > 1"
             title.translate="Language Selector"
-            className="'fa fa-flag flex-grow-1'"
+            className="'flex-grow-1'"
+            icon="'flag'"
+            iconClass="'oi-filled'"
             actionParam="{
                 views: ['website.header_language_selector'],
                 resetViewArch: true,
@@ -53,7 +56,8 @@
         />
         <BuilderButton
             title.translate="Sign In"
-            className="'fa fa-sign-in flex-grow-1'"
+            className="'flex-grow-1'"
+            icon="'login'"
             actionParam="{
                 views: ['portal.user_sign_in'],
                 resetViewArch: true,
diff --git a/addons/website/static/src/builder/plugins/options/header/header_navigation_option.xml b/addons/website/static/src/builder/plugins/options/header/header_navigation_option.xml
index 582a85f9515ea1..a82783c1c79007 100644
--- a/addons/website/static/src/builder/plugins/options/header/header_navigation_option.xml
+++ b/addons/website/static/src/builder/plugins/options/header/header_navigation_option.xml
@@ -45,14 +45,14 @@
         <BuilderButtonGroup action="'websiteConfig'" t-if="this.hasSomeViews(['website.template_header_hamburger', 'website.template_header_sidebar'])">
             <BuilderButton ltrRtlMapping="'position'"
                 title.translate="Left"
-                icon="'fa-long-arrow-left'"
+                icon="'west'"
                 actionParam="{
                     views: [],
                     vars: { 'hamburger-position': 'left' }
                 }"/>
             <BuilderButton ltrRtlMapping="'position'"
                 title.translate="Right"
-                icon="'fa-long-arrow-right'"
+                icon="'east'"
                 actionParam="{
                     views: ['website.template_header_hamburger_align_right', 'website.template_header_sidebar_position_right'],
                     vars: { 'hamburger-position': 'right' }
@@ -62,19 +62,19 @@
         <BuilderSelect action="'websiteConfig'">
             <BuilderSelectItem ltrRtlMapping="'align'" actionParam="{ views: align_left_views }">
                 <div title="Align Left">
-                    <i class="fa fa-align-left fa-fw" role="img" aria-hidden="true"/>
+                    <i class="oi oi-fw" data-icon="format_align_left" role="img" aria-hidden="true"/>
                     <span class="visually-hidden">Align Left</span>
                 </div>
             </BuilderSelectItem>
             <BuilderSelectItem actionParam="{ views: align_center_views }">
                 <div title="Center">
-                    <i class="fa fa-align-center fa-fw" role="img" aria-hidden="true"/>
+                    <i class="oi oi-fw" data-icon="format_align_center" role="img" aria-hidden="true"/>
                     <span class="visually-hidden">Center</span>
                 </div>
             </BuilderSelectItem>
             <BuilderSelectItem ltrRtlMapping="'align'" actionParam="{ views: align_right_views }">
                 <div title="Align Right">
-                    <i class="fa fa-align-right fa-fw" role="img" aria-hidden="true"/>
+                    <i class="oi oi-fw" data-icon="format_align_right" role="img" aria-hidden="true"/>
                     <span class="visually-hidden">Align Right</span>
                 </div>
             </BuilderSelectItem>
@@ -85,33 +85,33 @@
         <BuilderButtonGroup action="'websiteConfig'">
             <BuilderButton ltrRtlMapping="'position'"
                 title.translate="Left"
-                icon="'fa-long-arrow-left'"
+                icon="'west'"
                 actionParam="{
                     views: ['website.template_header_mobile_position_left'],
                     vars: { 'hamburger-position-mobile': 'left' }
                 }"/>
             <BuilderButton ltrRtlMapping="'position'"
                 title.translate="Right"
-                icon="'fa-long-arrow-right'"
+                icon="'east'"
                 actionParam="{ views: [], vars: { 'hamburger-position-mobile': 'right' } }"/>
         </BuilderButtonGroup>
 
         <BuilderSelect action="'websiteConfig'">
             <BuilderSelectItem ltrRtlMapping="'align'" actionParam="{ views: [] }">
                 <div title="Align Left">
-                    <i class="fa fa-align-left fa-fw" role="img" aria-hidden="true"/>
+                    <i class="oi oi-fw" data-icon="format_align_left" role="img" aria-hidden="true"/>
                     <span class="visually-hidden">Align Left</span>
                 </div>
             </BuilderSelectItem>
             <BuilderSelectItem actionParam="{ views: ['website.template_header_mobile_align_center'] }">
                 <div title="Center">
-                    <i class="fa fa-align-center fa-fw" role="img" aria-hidden="true"/>
+                    <i class="oi oi-fw" data-icon="format_align_center" role="img" aria-hidden="true"/>
                     <span class="visually-hidden">Center</span>
                 </div>
             </BuilderSelectItem>
             <BuilderSelectItem ltrRtlMapping="'align'" actionParam="{ views: ['website.template_header_mobile_align_right'] }">
                 <div title="Align Right">
-                    <i class="fa fa-align-right fa-fw" role="img" aria-hidden="true"/>
+                    <i class="oi oi-fw" data-icon="format_align_right" role="img" aria-hidden="true"/>
                     <span class="visually-hidden">Align Right</span>
                 </div>
             </BuilderSelectItem>
diff --git a/addons/website/static/src/builder/plugins/options/media_list_item_option.xml b/addons/website/static/src/builder/plugins/options/media_list_item_option.xml
index daaf7fc025e295..3bbd27c15dced0 100644
--- a/addons/website/static/src/builder/plugins/options/media_list_item_option.xml
+++ b/addons/website/static/src/builder/plugins/options/media_list_item_option.xml
@@ -45,15 +45,10 @@
     <BuilderRow label.translate="Text Position" applyTo="':scope > .row'">
         <!-- Don't use the standard Vert. Alignement option to not suggest
             Equal Height, which is useless for this snippet. -->
-        <BuilderButtonGroup t-if="this.isActiveItem('media_left_opt')">
-            <BuilderButton title.translate="Align Top" classAction="'align-items-start'" iconImg="'/website/static/src/img/snippets_options/align_top_right.svg'"/>
-            <BuilderButton title.translate="Align Middle" classAction="'align-items-center'" iconImg="'/website/static/src/img/snippets_options/align_middle_right.svg'"/>
-            <BuilderButton title.translate="Align Bottom" classAction="'align-items-end'" iconImg="'/website/static/src/img/snippets_options/align_bottom_right.svg'"/>
-        </BuilderButtonGroup>
-        <BuilderButtonGroup t-if="!this.isActiveItem('media_left_opt')">
-            <BuilderButton title.translate="Align Top" classAction="'align-items-start'" iconImg="'/html_builder/static/img/snippets_options/align_top.svg'"/>
-            <BuilderButton title.translate="Align Middle" classAction="'align-items-center'" iconImg="'/html_builder/static/img/snippets_options/align_middle.svg'"/>
-            <BuilderButton title.translate="Align Bottom" classAction="'align-items-end'" iconImg="'/html_builder/static/img/snippets_options/align_bottom.svg'"/>
+        <BuilderButtonGroup>
+            <BuilderButton title.translate="Align Top" classAction="'align-items-start'" icon="'vertical_align_top'"/>
+            <BuilderButton title.translate="Align Middle" classAction="'align-items-center'" icon="'vertical_align_center'"/>
+            <BuilderButton title.translate="Align Bottom" classAction="'align-items-end'" icon="'vertical_align_bottom'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/website/static/src/builder/plugins/options/navtabs_header_buttons.xml b/addons/website/static/src/builder/plugins/options/navtabs_header_buttons.xml
index 08aae2830b63a9..7fcc0797dfcc9a 100644
--- a/addons/website/static/src/builder/plugins/options/navtabs_header_buttons.xml
+++ b/addons/website/static/src/builder/plugins/options/navtabs_header_buttons.xml
@@ -6,14 +6,14 @@
             title="Add Tab"
             aria-label="Add Tab"
             t-on-click="this.addItem">
-        <span class="oi oi-fw oi-plus mt-1" aria-hidden="true"/>
+        <span class="oi oi-fw mt-1" data-icon="add" aria-hidden="true"/>
     </button>
     <button class="btn py-0 px-1"
             t-att-class="this.state.tabEls.length gt 2 ? 'btn-danger' : 'disabled text-muted'"
             title="Remove Tab"
             aria-label="Remove Tab"
             t-on-click="this.removeItem">
-        <span class="oi oi-fw oi-minus mt-1" aria-hidden="true"/>
+        <span class="oi oi-fw mt-1" data-icon="remove" aria-hidden="true"/>
     </button>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/options/navtabs_style_option.xml b/addons/website/static/src/builder/plugins/options/navtabs_style_option.xml
index b748fb8ab2bb1f..8c8f8bed72af3e 100644
--- a/addons/website/static/src/builder/plugins/options/navtabs_style_option.xml
+++ b/addons/website/static/src/builder/plugins/options/navtabs_style_option.xml
@@ -42,11 +42,11 @@
     </t>
     <BuilderRow label.translate="Slide">
         <BuilderButtonGroup applyTo="'.s_tabs_content'">
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Slide to left" icon="'fa-fw fa-long-arrow-left'" classAction="'s_tabs_slide_right'"/>
-            <BuilderButton icon="'fa-fw fa-long-arrow-up'" title.translate="Slide up" classAction="'s_tabs_slide_down'"/>
-            <BuilderButton icon="'fa-fw fa-long-arrow-down'" title.translate="Slide down" classAction="'s_tabs_slide_up'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Slide to right" icon="'fa-fw fa-long-arrow-right'" classAction="'s_tabs_slide_left'"/>
-            <BuilderButton icon="'fa-fw fa-ban'" title.translate="No Slide Effect" classAction="''"/>
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Slide to left" icon="'west'" classAction="'s_tabs_slide_right'" iconClass="'oi-fw'"/>
+            <BuilderButton icon="'north'" title.translate="Slide up" classAction="'s_tabs_slide_down'" iconClass="'oi-fw'"/>
+            <BuilderButton icon="'south'" title.translate="Slide down" classAction="'s_tabs_slide_up'" iconClass="'oi-fw'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" title.translate="Slide to right" icon="'east'" classAction="'s_tabs_slide_left'" iconClass="'oi-fw'"/>
+            <BuilderButton icon="'block'" title.translate="No Slide Effect" classAction="''" iconClass="'oi-fw'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/website/static/src/builder/plugins/options/navtabs_style_option_plugin.js b/addons/website/static/src/builder/plugins/options/navtabs_style_option_plugin.js
index a2b5823c6fed70..d6bca5854d15d6 100644
--- a/addons/website/static/src/builder/plugins/options/navtabs_style_option_plugin.js
+++ b/addons/website/static/src/builder/plugins/options/navtabs_style_option_plugin.js
@@ -63,7 +63,8 @@ export class NavTabsStyleOptionPlugin extends Plugin {
         if (previousNavItemEl) {
             const direction = isVertical ? "up" : reverseButtons ? "right" : "left";
             buttons.push({
-                class: `fa fa-fw fa-angle-${direction}`,
+                class: "oi oi-fw",
+                icon: `keyboard_arrow_${direction}`,
                 title: isVertical
                     ? _t("Move up")
                     : this.isEditableRTL
@@ -76,7 +77,8 @@ export class NavTabsStyleOptionPlugin extends Plugin {
         if (nextNavItemEl) {
             const direction = isVertical ? "down" : reverseButtons ? "left" : "right";
             buttons.push({
-                class: `fa fa-fw fa-angle-${direction}`,
+                class: "oi oi-fw",
+                icon: `keyboard_arrow_${direction}`,
                 title: isVertical
                     ? _t("Move down")
                     : this.isEditableRTL
diff --git a/addons/website/static/src/builder/plugins/options/scroll_button_option.xml b/addons/website/static/src/builder/plugins/options/scroll_button_option.xml
index c34f3b501c954a..8f78697cff4a25 100644
--- a/addons/website/static/src/builder/plugins/options/scroll_button_option.xml
+++ b/addons/website/static/src/builder/plugins/options/scroll_button_option.xml
@@ -29,11 +29,11 @@
         </BuilderRow>
         <BuilderRow label.translate="Size" level="1" applyTo="':scope > .o_scroll_button > i'">
             <BuilderButtonGroup>
-                <BuilderButton classAction="'fa-1x'" title.translate="Size 1x">1x</BuilderButton>
-                <BuilderButton classAction="'fa-2x'" title.translate="Size 2x">2x</BuilderButton>
-                <BuilderButton classAction="'fa-3x'" title.translate="Size 3x">3x</BuilderButton>
-                <BuilderButton classAction="'fa-4x'" title.translate="Size 4x">4x</BuilderButton>
-                <BuilderButton classAction="'fa-5x'" title.translate="Size 5x">5x</BuilderButton>
+                <BuilderButton classAction="'oi-1x'" title.translate="Size 1x">1x</BuilderButton>
+                <BuilderButton classAction="'oi-2x'" title.translate="Size 2x">2x</BuilderButton>
+                <BuilderButton classAction="'oi-3x'" title.translate="Size 3x">3x</BuilderButton>
+                <BuilderButton classAction="'oi-4x'" title.translate="Size 4x">4x</BuilderButton>
+                <BuilderButton classAction="'oi-5x'" title.translate="Size 5x">5x</BuilderButton>
             </BuilderButtonGroup>
         </BuilderRow>
         <BuilderRow label.translate="Colors" level="1" applyTo="':scope > .o_scroll_button'">
diff --git a/addons/website/static/src/builder/plugins/options/scroll_button_option_plugin.js b/addons/website/static/src/builder/plugins/options/scroll_button_option_plugin.js
index 69e70ebd924f10..2314e58144522a 100644
--- a/addons/website/static/src/builder/plugins/options/scroll_button_option_plugin.js
+++ b/addons/website/static/src/builder/plugins/options/scroll_button_option_plugin.js
@@ -39,7 +39,8 @@ class ScrollButtonManager {
         anchor.title = _t("Scroll down to next section");
 
         const arrow = document.createElement("i");
-        arrow.classList.add("fa", "fa-angle-down", "fa-3x");
+        arrow.classList.add("oi", "oi-3x");
+        arrow.dataset.icon = "keyboard_arrow_down";
         anchor.appendChild(arrow);
 
         return anchor;
diff --git a/addons/website/static/src/builder/plugins/options/social_media_links.xml b/addons/website/static/src/builder/plugins/options/social_media_links.xml
index 8acd5909d82e9c..956292e0dc7c3f 100644
--- a/addons/website/static/src/builder/plugins/options/social_media_links.xml
+++ b/addons/website/static/src/builder/plugins/options/social_media_links.xml
@@ -9,7 +9,7 @@
                 <tr t-foreach="this.computeItems()" t-as="item" t-key="item.fabricatedKey" t-att-data-id="item.id">
                     <td>
                         <button class="btn o_drag_handle ps-0">
-                            <i class="oi oi-draggable"/>
+                            <i class="oi" data-icon="drag_indicator"/>
                         </button>
                     </td>
                     <td width="100%">
@@ -35,7 +35,9 @@
                         />
                         <div t-else="">
                             <BuilderButton
-                                className="'fa fa-fw fa-minus text-danger bg-transparent border-0'"
+                                className="'text-danger bg-transparent border-0'"
+                                icon="'remove'"
+                                iconClass="'oi-fw'"
                                 title.translate="Remove link"
                                 action="'deleteSocialMediaLink'"
                                 applyTo="`a:nth-of-type(${item.domPosition})`"
@@ -54,7 +56,7 @@
 
 <t t-name="website.example_social_media_link">
     <a href="https://www.example.com" target="_blank" aria-label="example">
-        <i class="fa rounded shadow-sm o_editable_media fa-pencil"/>
+        <i class="oi oi-filled rounded shadow-sm o_editable_media" data-icon="edit"/>
     </a>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/options/social_media_option.xml b/addons/website/static/src/builder/plugins/options/social_media_option.xml
index 59b20b406111f0..bb6321c3a98f4d 100644
--- a/addons/website/static/src/builder/plugins/options/social_media_option.xml
+++ b/addons/website/static/src/builder/plugins/options/social_media_option.xml
@@ -13,11 +13,11 @@
     </BuilderRow>
 
     <BuilderRow label.translate="Layout">
-        <BuilderSelect applyTo="'.fa, .social_media_img'">
+        <BuilderSelect applyTo="'.oi, .social_media_img'">
             <BuilderSelectItem classAction="'rounded shadow-sm'">Square</BuilderSelectItem>
             <BuilderSelectItem classAction="'rounded-empty-circle shadow-sm'">Circle</BuilderSelectItem>
             <BuilderSelectItem classAction="'rounded-circle shadow-sm'">Disk</BuilderSelectItem>
-            <BuilderSelectItem classAction="'fa-stack'">None</BuilderSelectItem>
+            <BuilderSelectItem classAction="'oi-stack'">None</BuilderSelectItem>
         </BuilderSelect>
     </BuilderRow>
 
@@ -25,8 +25,8 @@
     <BuilderRange
         withNumberInput="true"
         action="'resetSocialMediaIconSize'"
-        applyTo="'.fa, .social_media_img'"
-        styleAction="{ mainParam: '--fa-icon-size', extraClass: 'o_sm_custom_size' }"
+        applyTo="'.oi, .social_media_img'"
+        styleAction="{ mainParam: '--oi-icon-size', extraClass: 'o_sm_custom_size' }"
         unit="'px'"
         saveUnit="'rem'"
         min="40"
@@ -46,7 +46,7 @@
     </BuilderRow>
 
     <BuilderRow label.translate="Background Color">
-        <BuilderColorPicker applyTo="'.fa'" styleAction="'background-color'"/>
+        <BuilderColorPicker applyTo="'.oi'" styleAction="'background-color'"/>
     </BuilderRow>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/options/social_media_option_plugin.js b/addons/website/static/src/builder/plugins/options/social_media_option_plugin.js
index 9760878fbda347..8a7fe4af579973 100644
--- a/addons/website/static/src/builder/plugins/options/social_media_option_plugin.js
+++ b/addons/website/static/src/builder/plugins/options/social_media_option_plugin.js
@@ -34,82 +34,82 @@ const socialMediaInfo = new Map(
         facebook: {
             recorded: true,
             label: _t("Facebook"),
-            iconClass: "fa-facebook",
+            iconClass: "oi_facebook",
             extraHostnameRegex: /(^|\.)fb\.(com|me)$/,
         },
         twitter: {
             recorded: true,
             label: _t("X"),
-            iconClass: "fa-twitter",
+            iconClass: "oi_x",
             extraHostnameRegex: /(^|\.)x\.com$/,
         },
         linkedin: {
             recorded: true,
             label: _t("LinkedIn"),
-            iconClass: "fa-linkedin",
+            iconClass: "oi_linkedin",
         },
         youtube: {
             recorded: true,
             label: _t("YouTube"),
-            iconClass: "fa-youtube-play",
+            iconClass: "oi_youtube-play",
             extraHostnameRegex: /(^|\.)youtu\.be$/,
         },
         instagram: {
             recorded: true,
             label: _t("Instagram"),
-            iconClass: "fa-instagram",
+            iconClass: "oi_instagram",
             extraHostnameRegex: /(^|\.)instagr\.(am|com)$/,
         },
         github: {
             recorded: true,
             label: _t("GitHub"),
-            iconClass: "fa-github",
+            iconClass: "oi_github",
         },
         tiktok: {
             recorded: true,
             label: _t("TikTok"),
-            iconClass: "fa-tiktok",
+            iconClass: "oi_tiktok",
         },
         discord: {
             recorded: true,
             label: _t("Discord"),
-            iconClass: "fa-discord",
+            iconClass: "oi_discord",
         },
         "google-play": {
             label: _t("Google Play"),
-            iconClass: "fa-google-play",
+            iconClass: "oi_google-play",
             // Without this, the default finds 'google' instead
             extraHostnameRegex: /(^|\.)play\.google\.com$/,
         },
         google: {
             label: _t("Google"),
-            iconClass: "fa-google",
+            iconClass: "oi_google",
         },
         whatsapp: {
             label: _t("Whatsapp"),
-            iconClass: "fa-whatsapp",
+            iconClass: "oi_whatsapp",
             extraHostnameRegex: /(^|\.)wa\.me$/,
         },
         pinterest: {
             label: _t("Pinterest"),
-            iconClass: "fa-pinterest-p",
+            iconClass: "oi_pinterest-p",
         },
         kickstarter: {
             label: _t("Kickstarter"),
-            iconClass: "fa-kickstarter",
+            iconClass: "oi_kickstarter",
         },
         strava: {
             label: _t("Strava"),
-            iconClass: "fa-strava",
+            iconClass: "oi_strava",
         },
         bluesky: {
             label: _t("Bluesky"),
-            iconClass: "fa-bluesky",
+            iconClass: "oi_bluesky",
             extraHostnameRegex: /(^|\.)bsky\.(app|social)$/,
         },
         threads: {
             label: _t("Threads"),
-            iconClass: "fa-threads",
+            iconClass: "oi_threads",
         },
     })
 );
@@ -274,9 +274,10 @@ export class SocialMediaOptionPlugin extends Plugin {
             renderToFragment("website.example_social_media_link").children[0];
         this.removeSocialMediaClasses(el);
         this.removeIconClasses(el);
-        el.querySelector(ICON_SELECTOR)?.classList.add(
-            socialMediaInfo.get(socialMediaName)?.iconClass || "fa-pencil"
+        el.querySelector(ICON_SELECTOR)?.setAttribute('data-icon',
+            socialMediaInfo.get(socialMediaName)?.iconClass || "edit"
         );
+        console.log(socialMediaInfo.get(socialMediaName))
         if (socialMediaName) {
             el.href = `/website/social/${encodeURIComponent(socialMediaName)}`;
             el.classList.add(`s_social_media_${socialMediaName}`);
@@ -309,9 +310,9 @@ export class SocialMediaOptionPlugin extends Plugin {
     removeIconClasses(el) {
         const iconEl = el.querySelector(ICON_SELECTOR);
         if (iconEl) {
-            // Remove every fa classes except fa-x sizes.
+            // Remove every oi classes except oi-x sizes.
             for (const c of iconEl.classList) {
-                if (/^fa-[^0-9]/.test(c)) {
+                if (/^oi-[^0-9]/.test(c)) {
                     iconEl.classList.remove(c);
                 }
             }
@@ -369,7 +370,7 @@ export class ResetSocialMediaIconSizeAction extends BuilderAction {
     static id = "resetSocialMediaIconSize";
     apply({ editingElement }) {
         [...editingElement.classList]
-            .filter((className) => /^fa-[2-5]x$/.test(className))
+            .filter((className) => /^oi-[2-5]x$/.test(className))
             .forEach((className) => editingElement.classList.remove(className));
     }
 }
@@ -426,6 +427,7 @@ export class EditSocialMediaLinkAction extends BuilderAction {
     static id = "editSocialMediaLink";
     static dependencies = ["socialMediaOptionPlugin"];
     apply({ editingElement, params: { mainParam }, value }) {
+        console.log('salut')
         if (!value) {
             editingElement.remove();
         }
@@ -441,13 +443,13 @@ export class EditSocialMediaLinkAction extends BuilderAction {
         } else if (info.name) {
             fonts.computeFonts();
             iconClass = fonts.fontIcons[0].alias
-                .filter((el) => el.replace(/^fa-/, "").includes(info.name))
+                .filter((el) => el.replace(/^oi-/, "").includes(info.name))
                 .reduce((a, b) => (a.length && a.length <= b.length ? a : b), "");
         }
 
         if (iconClass) {
             this.dependencies.socialMediaOptionPlugin.removeIconClasses(editingElement);
-            editingElement.querySelector(ICON_SELECTOR)?.classList.add(iconClass);
+            editingElement.querySelector(ICON_SELECTOR)?.setAttribute("data-icon", iconClass);
         }
     }
 }
diff --git a/addons/website/static/src/builder/plugins/options/table_of_content_option.xml b/addons/website/static/src/builder/plugins/options/table_of_content_option.xml
index f8b1a36688ede4..64643b2763c1e8 100644
--- a/addons/website/static/src/builder/plugins/options/table_of_content_option.xml
+++ b/addons/website/static/src/builder/plugins/options/table_of_content_option.xml
@@ -16,9 +16,9 @@
 <t t-name="website.TableOfContentNavbarOption">
     <BuilderRow label.translate="Position" action="'navbarPosition'">
         <BuilderButtonGroup>
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-long-arrow-left'" title.translate="Left" actionParam="'left'"/>
-            <BuilderButton icon="'fa-long-arrow-up'" title.translate="Top" actionParam="'top'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-long-arrow-right'" title.translate="Right" actionParam="'right'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'west'" title.translate="Left" actionParam="'left'"/>
+            <BuilderButton icon="'north'" title.translate="Top" actionParam="'top'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'east'" title.translate="Right" actionParam="'right'"/>
         </BuilderButtonGroup>
     </BuilderRow>
     <BuilderRow label.translate="Sticky" tooltip.translate="Keep this element fixed while scrolling">
diff --git a/addons/website/static/src/builder/plugins/options/timeline_list_option.xml b/addons/website/static/src/builder/plugins/options/timeline_list_option.xml
index e9f97e5b64595d..1cfb250b40b7a0 100644
--- a/addons/website/static/src/builder/plugins/options/timeline_list_option.xml
+++ b/addons/website/static/src/builder/plugins/options/timeline_list_option.xml
@@ -16,9 +16,9 @@
 
     <BuilderRow label.translate="Alignment">
         <BuilderButtonGroup applyTo="'.s_timeline_list_wrapper'">
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-left'" title.translate="Align Left" classAction="'justify-content-start'"/>
-            <BuilderButton icon="'fa-align-center'" title.translate="Align Center" classAction="'justify-content-center'"/>
-            <BuilderButton ltrRtlMapping="'left-right'" icon="'fa-align-right'" title.translate="Align Right" classAction="'justify-content-end'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_left'" title.translate="Align Left" classAction="'justify-content-start'"/>
+            <BuilderButton icon="'format_align_center'" title.translate="Align Center" classAction="'justify-content-center'"/>
+            <BuilderButton ltrRtlMapping="'left-right'" icon="'format_align_right'" title.translate="Align Right" classAction="'justify-content-end'"/>
         </BuilderButtonGroup>
     </BuilderRow>
 </t>
diff --git a/addons/website/static/src/builder/plugins/options/timeline_option_plugin.js b/addons/website/static/src/builder/plugins/options/timeline_option_plugin.js
index 064a003087a18f..eca9ef7dfbbd9e 100644
--- a/addons/website/static/src/builder/plugins/options/timeline_option_plugin.js
+++ b/addons/website/static/src/builder/plugins/options/timeline_option_plugin.js
@@ -42,7 +42,8 @@ export class TimelineOptionPlugin extends Plugin {
         const direction = hasPreviousCard !== reverseButtons ? "left" : "right";
         return [
             {
-                class: `fa fa-fw fa-angle-${direction}`,
+                class: "oi oi-fw",
+                icon: `keyboard_arrow_${direction}`,
                 title: hasPreviousCard !== this.isEditableRTL ? _t("Move left") : _t("Move right"),
                 handler: this.moveTimelineCard.bind(this),
             },
diff --git a/addons/website/static/src/builder/plugins/options/visibility_option.xml b/addons/website/static/src/builder/plugins/options/visibility_option.xml
index 74618a12403300..8b6bc5e8028f25 100644
--- a/addons/website/static/src/builder/plugins/options/visibility_option.xml
+++ b/addons/website/static/src/builder/plugins/options/visibility_option.xml
@@ -2,11 +2,9 @@
 <templates xml:space="preserve">
 
 <t t-name="website.DeviceVisibility">
-    <BuilderButton className="'o-hb-btn-has-img-icon btn-danger-color-active'" action="'toggleDeviceVisibility'" actionParam="'no_desktop'" preview="false" title.translate="Hide on Desktop" titleActive.translate="Show on Desktop">
-		<Image src="'/html_builder/static/img/options/desktop_invisible.svg'" style="'width: 12px'"/>
+    <BuilderButton className="'o-hb-btn-has-img-icon btn-danger-color-active'" action="'toggleDeviceVisibility'" actionParam="'no_desktop'" preview="false" title.translate="Hide on Desktop" titleActive.translate="Show on Desktop" icon="'desktop_access_disabled'">
 	</BuilderButton>
-    <BuilderButton className="'o-hb-btn-has-img-icon btn-danger-color-active'" action="'toggleDeviceVisibility'" actionParam="'no_mobile'" preview="false" title.translate="Hide on Mobile" titleActive.translate="Show on Mobile">
-		<Image src="'/html_builder/static/img/options/mobile_invisible.svg'" style="'width: 12px'" />
+    <BuilderButton className="'o-hb-btn-has-img-icon btn-danger-color-active'" action="'toggleDeviceVisibility'" actionParam="'no_mobile'" preview="false" title.translate="Hide on Mobile" titleActive.translate="Show on Mobile" icon="'mobile_off'">
 	</BuilderButton>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/snippets_powerbox_plugin.js b/addons/website/static/src/builder/plugins/snippets_powerbox_plugin.js
index a96812dc734880..45d5476899dab3 100644
--- a/addons/website/static/src/builder/plugins/snippets_powerbox_plugin.js
+++ b/addons/website/static/src/builder/plugins/snippets_powerbox_plugin.js
@@ -14,7 +14,7 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_alert",
                 title: _t("Alert"),
                 description: _t("Insert an alert snippet"),
-                icon: "fa-info",
+                icon: "info",
                 run: this.insertSnippet.bind(this, "s_alert"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -22,7 +22,7 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_rating",
                 title: _t("Rating"),
                 description: _t("Insert a rating snippet"),
-                icon: "fa-star-half-o",
+                icon: "star_half",
                 run: this.insertSnippet.bind(this, "s_rating"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -30,7 +30,8 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_card",
                 title: _t("Card"),
                 description: _t("Insert a card snippet"),
-                icon: "fa-sticky-note",
+                icon: "sticky_note_2",
+                icon_class: "oi-filled",
                 run: this.insertSnippet.bind(this, "s_card"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -38,7 +39,7 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_share",
                 title: _t("Share"),
                 description: _t("Insert a share snippet"),
-                icon: "fa-share-square-o",
+                icon: "share",
                 run: this.insertSnippet.bind(this, "s_share"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -46,7 +47,8 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_text_highlight",
                 title: _t("Text Highlight"),
                 description: _t("Insert a text highlight snippet"),
-                icon: "fa-sticky-note",
+                icon: "sticky_note_2",
+                icon_class: "oi-filled",
                 run: this.insertSnippet.bind(this, "s_text_highlight"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -54,7 +56,7 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_chart",
                 title: _t("Chart"),
                 description: _t("Insert a chart snippet"),
-                icon: "fa-bar-chart",
+                icon: "bar_chart",
                 run: this.insertSnippet.bind(this, "s_chart"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -62,7 +64,7 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_progress_bar",
                 title: _t("Progress Bar"),
                 description: _t("Insert a progress bar snippet"),
-                icon: "fa-spinner",
+                icon: "progress_activity",
                 run: this.insertSnippet.bind(this, "s_progress_bar"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -70,7 +72,7 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_badge",
                 title: _t("Badge"),
                 description: _t("Insert a badge snippet"),
-                icon: "fa-tags",
+                icon: "sell",
                 run: this.insertSnippet.bind(this, "s_badge"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -78,7 +80,7 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_blockquote",
                 title: _t("Blockquote"),
                 description: _t("Insert a blockquote snippet"),
-                icon: "fa-quote-left",
+                icon: "format_quote",
                 run: this.insertSnippet.bind(this, "s_blockquote"),
                 isAvailable: isHtmlContentSupported,
             },
@@ -86,7 +88,7 @@ export class SnippetsPowerboxPlugin extends Plugin {
                 id: "s_hr",
                 title: _t("Separator"),
                 description: _t("Insert a horizontal separator snippet"),
-                icon: "fa-minus",
+                icon: "remove",
                 run: this.insertSnippet.bind(this, "s_hr"),
                 isAvailable: isHtmlContentSupported,
             },
diff --git a/addons/website/static/src/builder/plugins/theme/theme_button_option.xml b/addons/website/static/src/builder/plugins/theme/theme_button_option.xml
index 81322f52b82192..cb398b561ecedb 100644
--- a/addons/website/static/src/builder/plugins/theme/theme_button_option.xml
+++ b/addons/website/static/src/builder/plugins/theme/theme_button_option.xml
@@ -32,20 +32,21 @@
         <BuilderRow label.translate="Font Family">
             <ThemeFontFamilyOption
                 cssVariable="'buttons-font'"
-                buttonIcon="'fa-trash'"
+                buttonIcon="'delete'"
+                buttonIconClass="'oi-filled'"
                 buttonTitle.translate="Reset to Default Font Family"/>
         </BuilderRow>
         <BuilderRow label.translate="Padding" tooltip.translate="Vertical and Horizontal padding" action="'customizeWebsiteVariable'">
-            <BuilderNumberInput actionParam="'btn-padding-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
-            <BuilderNumberInput actionParam="'btn-padding-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
+            <BuilderNumberInput actionParam="'btn-padding-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'height'"/>
+            <BuilderNumberInput actionParam="'btn-padding-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'arrow_range'"/>
             <t t-set-slot="collapse">
                 <BuilderRow label.translate="Small" tooltip.translate="Vertical and Horizontal padding" level="1">
-                    <BuilderNumberInput actionParam="'btn-padding-y-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
-                    <BuilderNumberInput actionParam="'btn-padding-x-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
+                    <BuilderNumberInput actionParam="'btn-padding-y-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'height'"/>
+                    <BuilderNumberInput actionParam="'btn-padding-x-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'arrow_range'"/>
                 </BuilderRow>
                 <BuilderRow label.translate="Large" tooltip.translate="Vertical and Horizontal padding" level="1">
-                    <BuilderNumberInput actionParam="'btn-padding-y-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
-                    <BuilderNumberInput actionParam="'btn-padding-x-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
+                    <BuilderNumberInput actionParam="'btn-padding-y-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'height'"/>
+                    <BuilderNumberInput actionParam="'btn-padding-x-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'arrow_range'"/>
                 </BuilderRow>
             </t>
         </BuilderRow>
diff --git a/addons/website/static/src/builder/plugins/theme/theme_colors_option.xml b/addons/website/static/src/builder/plugins/theme/theme_colors_option.xml
index 1f3bfda14e3946..ed44f3bea741f8 100644
--- a/addons/website/static/src/builder/plugins/theme/theme_colors_option.xml
+++ b/addons/website/static/src/builder/plugins/theme/theme_colors_option.xml
@@ -67,7 +67,7 @@
                                             <div class="d-flex flex-column h-100 justify-content-center">
                                                 <BuilderSelect action="'changeColorPalette'" actionParam="'color-palettes-name'" dropdownContainerClass="'o-color-palette-dropdown'">
                                                     <t t-set-slot="fixedButton">
-                                                        <Image class="'h-100'" src="'/website/static/src/img/snippets_options/palette.svg'"/>
+                                                        <i class="oi oi-filled fs-4" data-icon="palette"/>
                                                     </t>
                                                     <t t-foreach="this.palettes" t-as="palette" t-key="palette.name">
                                                         <BuilderSelectItem actionValue="`'${palette.name}'`">
diff --git a/addons/website/static/src/builder/plugins/theme/theme_fontfamily_option.js b/addons/website/static/src/builder/plugins/theme/theme_fontfamily_option.js
index 025e3b4162b725..f7ee94ba24d17f 100644
--- a/addons/website/static/src/builder/plugins/theme/theme_fontfamily_option.js
+++ b/addons/website/static/src/builder/plugins/theme/theme_fontfamily_option.js
@@ -9,6 +9,7 @@ export class ThemeFontFamilyOption extends BaseOptionComponent {
     static props = {
         cssVariable: String,
         buttonIcon: String,
+        buttonIconClass: String,
         buttonTitle: String,
     };
     static components = {
diff --git a/addons/website/static/src/builder/plugins/theme/theme_fontfamily_option.xml b/addons/website/static/src/builder/plugins/theme/theme_fontfamily_option.xml
index 02ece060553aa8..365e047634d818 100644
--- a/addons/website/static/src/builder/plugins/theme/theme_fontfamily_option.xml
+++ b/addons/website/static/src/builder/plugins/theme/theme_fontfamily_option.xml
@@ -12,6 +12,7 @@
         actionParam="this.props.cssVariable"
         className="'btn-danger-color-hover'"
         icon="this.props.buttonIcon"
+        iconClass="this.props.buttonIconClass"
         title="this.props.buttonTitle"/>
 </t>
 
diff --git a/addons/website/static/src/builder/plugins/theme/theme_headings_option.xml b/addons/website/static/src/builder/plugins/theme/theme_headings_option.xml
index 9ba962e459b439..3d86d4e5b56118 100644
--- a/addons/website/static/src/builder/plugins/theme/theme_headings_option.xml
+++ b/addons/website/static/src/builder/plugins/theme/theme_headings_option.xml
@@ -25,14 +25,15 @@
         <BuilderRow label.translate="Font Family" tooltip.translate="Heading 1">
             <ThemeFontFamilyOption
                 cssVariable="'headings-font'"
-                buttonIcon="'fa-trash'"
+                buttonIcon="'delete'"
+                buttonIconClass="'oi-filled'"
                 buttonTitle.translate="Reset to Default Font Family"/>
             <t t-set-slot="collapse">
                 <t t-foreach="[2, 3, 4, 5, 6]" t-as="depth" t-key="depth">
                     <BuilderRow level="1" label="heading_label + ' ' + depth">
                         <ThemeFontFamilyOption
                             cssVariable="'h' + depth + '-font'"
-                            buttonIcon="'fa-remove'"
+                            buttonIcon="'close'"
                             buttonTitle.translate="Reset to Headings Font Family"/>
                     </BuilderRow>
                 </t>
@@ -40,7 +41,7 @@
                     <BuilderRow level="1" label="display_label + ' ' + depth">
                         <ThemeFontFamilyOption
                             cssVariable="'display-' + depth + '-font'"
-                            buttonIcon="'fa-remove'"
+                            buttonIcon="'close'"
                             buttonTitle.translate="Reset to Headings Font Family"/>
                     </BuilderRow>
                 </t>
diff --git a/addons/website/static/src/builder/plugins/theme/theme_shadow_option.xml b/addons/website/static/src/builder/plugins/theme/theme_shadow_option.xml
index 6e18a62a64c748..779f1982b14a02 100644
--- a/addons/website/static/src/builder/plugins/theme/theme_shadow_option.xml
+++ b/addons/website/static/src/builder/plugins/theme/theme_shadow_option.xml
@@ -5,8 +5,8 @@
     <div t-custom-ref="root" />
     <BuilderContext action="'customizeWebsiteVariable'">
         <BuilderRow label.translate="Normal" initialExpandAnim="this.shadowSizeToShow === 'shadow'" tooltip.translate="Horizontal and Vertical Offset">
-            <BuilderNumberInput actionParam="'box-shadow-offset-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
-            <BuilderNumberInput actionParam="'box-shadow-offset-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
+            <BuilderNumberInput actionParam="'box-shadow-offset-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'arrow_range'"/>
+            <BuilderNumberInput actionParam="'box-shadow-offset-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'height'"/>
             <t t-set-slot="collapse">
                 <BuilderRow label.translate="Color" level="1">
                     <BuilderColorPicker actionParam="'box-shadow-color'" enabledTabs="['solid', 'custom']"/>
@@ -20,8 +20,8 @@
             </t>
         </BuilderRow>
         <BuilderRow label.translate="Small" initialExpandAnim="this.shadowSizeToShow === 'shadow-sm'" tooltip.translate="Horizontal and Vertical Offset">
-            <BuilderNumberInput actionParam="'box-shadow-sm-offset-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
-            <BuilderNumberInput actionParam="'box-shadow-sm-offset-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
+            <BuilderNumberInput actionParam="'box-shadow-sm-offset-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'arrow_range'"/>
+            <BuilderNumberInput actionParam="'box-shadow-sm-offset-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'height'"/>
             <t t-set-slot="collapse">
                 <BuilderRow label.translate="Color" level="1">
                     <BuilderColorPicker actionParam="'box-shadow-sm-color'" enabledTabs="['solid', 'custom']"/>
@@ -35,8 +35,8 @@
             </t>
         </BuilderRow>
         <BuilderRow label.translate="Large" initialExpandAnim="this.shadowSizeToShow === 'shadow-lg'" tooltip.translate="Horizontal and Vertical Offset">
-            <BuilderNumberInput actionParam="'box-shadow-lg-offset-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
-            <BuilderNumberInput actionParam="'box-shadow-lg-offset-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
+            <BuilderNumberInput actionParam="'box-shadow-lg-offset-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'arrow_range'"/>
+            <BuilderNumberInput actionParam="'box-shadow-lg-offset-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'height'"/>
             <t t-set-slot="collapse">
                 <BuilderRow label.translate="Color" level="1">
                     <BuilderColorPicker actionParam="'box-shadow-lg-color'" enabledTabs="['solid', 'custom']"/>
diff --git a/addons/website/static/src/builder/plugins/theme/theme_tab.xml b/addons/website/static/src/builder/plugins/theme/theme_tab.xml
index 3c01f10fa1352a..d5aa996bc6e594 100644
--- a/addons/website/static/src/builder/plugins/theme/theme_tab.xml
+++ b/addons/website/static/src/builder/plugins/theme/theme_tab.xml
@@ -55,7 +55,9 @@
                 id="'body_bg_image_opt'"
                 title.translate="Image"
                 preview="false"
-                className="'ms-auto fa fa-fw fa-camera px-2'"
+                className="'ms-auto px-2'"
+                icon="'photo_camera'"
+                iconClass="'oi-fw'"
             />
         </BuilderRow>
         <BuilderRow label.translate="Background" level="1" t-if="!this.isActiveItem('layout_full_opt')">
@@ -67,7 +69,7 @@
             <BuilderButton action="'replaceBodyBgImage'" title.translate="Replace Image" preview="false" type="'global'">
                 Replace
             </BuilderButton>
-            <BuilderButton action="'removeBodyBgImage'" preview="false" icon="'oi-close'" className="'btn-danger-color-hover'"/>
+            <BuilderButton action="'removeBodyBgImage'" preview="false" icon="'close_small'" className="'btn-danger-color-hover'"/>
             <ImageSize/>
         </BuilderRow>
         <BuilderRow label.translate="Position" level="1" t-if="this.isActiveItem('body_bg_image_opt')">
@@ -75,7 +77,7 @@
                 <BuilderSelectItem actionValue="'image'">Cover</BuilderSelectItem>
                 <BuilderSelectItem actionValue="'pattern'" id="'body_bg_repeat_opt'">Repeat pattern</BuilderSelectItem>
             </BuilderSelect>
-            <BuilderButton icon="'fa-crosshairs'" title.translate="Background Position" preview="false" action="'bodyBgPositionOverlay'"/>
+            <BuilderButton icon="'my_location'" title.translate="Background Position" preview="false" action="'bodyBgPositionOverlay'"/>
         </BuilderRow>
         <BuilderContext t-if="this.isActiveItem('body_bg_repeat_opt')" action="'customizeWebsiteVariable'">
             <BuilderRow label.translate="Width" level="2">
@@ -86,6 +88,12 @@
             </BuilderRow>
         </BuilderContext>
     </BuilderContext>
+    <BuilderRow label.translate="Icons">
+        <BuilderButtonGroup action="'customizeWebsiteVariable'" actionParam="'icon-font-family'">
+            <BuilderButton className="'w-50'" actionValue="'material_symbols_rounded'">Rounded</BuilderButton>
+            <BuilderButton className="'w-50'" actionValue="''">Sharp</BuilderButton>
+        </BuilderButtonGroup>
+    </BuilderRow>
 </t>
 
 <t t-name="website.ThemeParagraphOption">
@@ -127,16 +135,16 @@
 <t t-name="website.ThemeInputOption">
     <BuilderContext preview="false">
         <BuilderRow label.translate="Padding" tooltip.translate="Vertical and Horizontal padding" action="'customizeWebsiteVariable'">
-            <BuilderNumberInput actionParam="'input-padding-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
-            <BuilderNumberInput actionParam="'input-padding-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
+            <BuilderNumberInput actionParam="'input-padding-y'" unit="'px'" saveUnit="'rem'" prefixIcon="'height'"/>
+            <BuilderNumberInput actionParam="'input-padding-x'" unit="'px'" saveUnit="'rem'" prefixIcon="'arrow_range'"/>
             <t t-set-slot="collapse">
                 <BuilderRow label.translate="Small" tooltip.translate="Vertical and Horizontal padding" level="1">
-                    <BuilderNumberInput actionParam="'input-padding-y-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
-                    <BuilderNumberInput actionParam="'input-padding-x-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
+                    <BuilderNumberInput actionParam="'input-padding-y-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'height'"/>
+                    <BuilderNumberInput actionParam="'input-padding-x-sm'" unit="'px'" saveUnit="'rem'" prefixIcon="'arrow_range'"/>
                 </BuilderRow>
                 <BuilderRow label.translate="Large" tooltip.translate="Vertical and Horizontal padding" level="1">
-                    <BuilderNumberInput actionParam="'input-padding-y-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-v'"/>
-                    <BuilderNumberInput actionParam="'input-padding-x-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'oi oi-arrows-h'"/>
+                    <BuilderNumberInput actionParam="'input-padding-y-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'height'"/>
+                    <BuilderNumberInput actionParam="'input-padding-x-lg'" unit="'px'" saveUnit="'rem'" prefixIcon="'arrow_range'"/>
                 </BuilderRow>
             </t>
         </BuilderRow>
diff --git a/addons/website/static/src/builder/plugins/translation/options/translate_webpage_option.xml b/addons/website/static/src/builder/plugins/translation/options/translate_webpage_option.xml
index 0a06c571f3390c..a65a036de64c2f 100644
--- a/addons/website/static/src/builder/plugins/translation/options/translate_webpage_option.xml
+++ b/addons/website/static/src/builder/plugins/translation/options/translate_webpage_option.xml
@@ -7,7 +7,7 @@
             tooltip.translate="Translate the whole content with AI">
             <BuilderButton action="'translateWebpageAI'" type="'success'">
                 <t t-if="this.translationState.isTranslating">
-                    <i class="fa fa-circle-o-notch fa-spin lh-1"/> Translating...
+                    <i class="oi oi-spin lh-1" data-icon="autorenew"/> Translating...
                 </t>
                 <t t-else="" t-out="this.env.services.website.currentWebsite.metadata.langName"/>
             </BuilderButton>
diff --git a/addons/website/static/src/builder/website_options.xml b/addons/website/static/src/builder/website_options.xml
index f2d40ab26f74b2..2eed8cbed7709d 100644
--- a/addons/website/static/src/builder/website_options.xml
+++ b/addons/website/static/src/builder/website_options.xml
@@ -2,8 +2,8 @@
 
 <templates xml:space="preserve">
 <t t-name="website.BuilderOptions">
-    <t t-set="socialMediaElementsSelector" t-value="'.s_social_media i.fa, .s_share i.fa, .social_media_img'"/>
-    <t t-set="replaceMediaOptionSelector" t-value="'img, .media_iframe_video, span.fa, i.fa'"/>
+    <t t-set="socialMediaElementsSelector" t-value="'.s_social_media i.oi, .s_share i.oi, .social_media_img'"/>
+    <t t-set="replaceMediaOptionSelector" t-value="'img, .media_iframe_video, span.oi, i.oi'"/>
     <t t-set="replaceMediaOptionExclude" t-value="'[data-oe-xpath], ' + socialMediaElementsSelector"/>
     <!-- Hook to extend the builder context (extra t-set values, selectors, ...). -->
     <t id="context_hook"/>
@@ -83,13 +83,13 @@
             <replace_media_option
                 t-att-selector="replaceMediaOptionSelector"
                 t-attf-exclude="{{replaceMediaOptionExclude}}"/>
-            <font_awesome_option selector="span.fa, i.fa, .social_media_img" exclude="[data-oe-xpath]"/>
+            <font_awesome_option selector="span.oi, i.oi, .social_media_img" exclude="[data-oe-xpath]"/>
             <video_size_option selector=".media_iframe_video"/>
             <image_tool_option selector="img" exclude="[data-oe-type='image'] > img"/>
             <image_pop_up_option template="website.ImagePopUpOption" selector="img" exclude="a img, header img, footer img, .s_image_gallery img, .o_product_detail_img_wrapper img"/>
             <image_and_fa_option
                 template="html_builder.ImageAndFaOption"
-                selector="span.fa, i.fa, img"
+                selector="span.oi, i.oi, img"
                 t-attf-exclude="[data-oe-type='image'] > img, [data-oe-xpath], {{socialMediaElementsSelector}}"/>
             <dynamic_svg_option t-att-selector="this.dynamicSVGSelector"/>
             <grid_image_option selector="img"/>
@@ -116,8 +116,8 @@
             exclude=".o_grid_item_image"/>
 
         <animate_option
-            selector=".o_animable, section .row > div, img, .fa, .btn"
-            t-attf-exclude="[data-oe-xpath], .o_not-animable, .s_col_no_resize.row > div, .s_col_no_resize, .s_social_media i.fa, .s_share i.fa, .s_website_form_submit, {{socialMediaElementsSelector}}, {{this.specialBlockquoteSelector}}"/>
+            selector=".o_animable, section .row > div, img, .oi, .btn"
+            t-attf-exclude="[data-oe-xpath], .o_not-animable, .s_col_no_resize.row > div, .s_col_no_resize, .s_social_media i.oi, .s_share i.oi, .s_website_form_submit, {{socialMediaElementsSelector}}, {{this.specialBlockquoteSelector}}"/>
         <animate_option selector=".s_social_media, .s_share" t-att-applyTo="socialMediaElementsSelector"/>
         <visibility_option selector="section, .s_hr"/>
         <device_visibility_option
diff --git a/addons/website/static/src/client_actions/configurator/configurator.scss b/addons/website/static/src/client_actions/configurator/configurator.scss
index a7d06ac0b1af5f..d5543361aae1ab 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.scss
+++ b/addons/website/static/src/client_actions/configurator/configurator.scss
@@ -140,14 +140,14 @@
                     outline: unset;
                 }
 
-                &.o_step_todo .fa-angle-down {
+                &.o_step_todo [data-icon="keyboard_arrow_down"] {
                     transform: translateY(-0.26em);
                 }
 
                 &.o_step_completed {
                     transition: all 300ms ease;
 
-                    .fa-angle-down {
+                    [data-icon="keyboard_arrow_down"] {
                         @include o-position-absolute($right: 0);
                         opacity:0;
                     }
@@ -155,7 +155,7 @@
                     &:hover, &.show, &:has([data-bs-toggle]:focus-visible) {
                         padding-right: 1.3rem !important;
 
-                        .fa-angle-down {
+                        [data-icon="keyboard_arrow_down"] {
                             transition: all 300ms ease 100ms;
                             opacity:1;
                         }
@@ -172,7 +172,7 @@
                 }
             }
 
-            .dropdown-item, .fa-angle-down, .ui-menu-item a, .ui-menu-item a.ui-state-active {
+            .dropdown-item, [data-icon="keyboard_arrow_down"], .ui-menu-item a, .ui-menu-item a.ui-state-active {
                 font-size: .5em;
                 font-weight: inherit;
             }
diff --git a/addons/website/static/src/client_actions/configurator/configurator.xml b/addons/website/static/src/client_actions/configurator/configurator.xml
index eefc491c688dc3..90c180958ae21b 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.xml
+++ b/addons/website/static/src/client_actions/configurator/configurator.xml
@@ -43,7 +43,7 @@
                                 <i class="text-primary" t-if="this.state.selectedType">
                                     <t t-out="this.state.getSelectedType(this.state.selectedType).label"/>
                                 </i>
-                                <i class="fa fa-angle-down ms-auto ps-2" role="img"/>
+                                <i class="oi ms-auto ps-2" data-icon="keyboard_arrow_down" role="img"/>
                             </span>
                         </button>
                         <div id="selectTypeMenu"
@@ -96,7 +96,7 @@
                                 <t t-if="this.state.selectedPurpose">
                                     <t t-out="this.state.getSelectedPurpose(this.state.selectedPurpose).label"/>
                                 </t>
-                                <i class="fa fa-angle-down ms-auto ps-2" role="img"/>
+                                <i class="oi ms-auto ps-2" data-icon="keyboard_arrow_down" role="img"/>
                             </span>
                         </button>
                         <div id="selectPurposeMenu" class="dropdown-menu border-0 shadow-lg show" role="menu" aria-labelledby="selectPurposeToggle">
@@ -128,14 +128,14 @@
                         <button t-on-click="this.uploadLogo" t-attf-class="o_configurator_logo_upload position-relative btn btn-link rounded bg-100 overflow-hidden d-flex flex-grow-1 justify-content-center align-items-center text-decoration-none {{this.state.logo? 'h-50' : ''}}">
                             <input type="file" class="logo_selection_input" t-on-change="this.changeLogo" style="display:none" name="logo_selection" t-custom-ref="logoSelectionInput" accept="image/*"/>
                             <div class="h3 o_configurator_logo_button text-center">
-                                <i t-attf-class="fa fa-cloud-upload {{this.state.logo? 'fa-4x' : 'fa-6x'}}"></i>
+                                <i t-attf-class="oi {{this.state.logo? 'oi-4x' : 'oi-6x'}}" data-icon="cloud_upload"></i>
                                 <div class="text-center">Upload <span t-if="this.state.logo">a new image</span>
                                 </div>
                             </div>
                             <div t-if="this.state.logo" class="o_configurator_logo_wrapper position-absolute d-flex justify-content-center align-items-center bg-white w-100 h-100">
                                 <img style="height: 120px" t-attf-src="{{this.state.logo}}" alt="Logo"/>
                             </div>
-                            <i t-if="this.state.logo" class="fa fa-2x fa-times-circle text-danger position-absolute top-0 end-0 pe-2 pt-2" t-on-click="this.removeLogo"/>
+                            <i t-if="this.state.logo" class="oi oi-2x oi-filled text-danger position-absolute top-0 end-0 pe-2 pt-2" data-icon="cancel" t-on-click="this.removeLogo"/>
                         </button>
                         <div t-if="this.state.recommendedPalette" class="w-75 mx-auto px-2 pt-3" style="max-width: 184px;">
                             <button t-attf-class="palette_card o_btn_reset w-100 rounded-pill overflow-hidden d-flex {{this.state.getSelectedPaletteName() == 'recommendedPalette' ? 'selected' : ''}}"
@@ -145,7 +145,7 @@
                                 <div class="color_sample w-100" t-attf-style="background-color: {{this.state.recommendedPalette.color2}}"/>
                             </button>
                             <button class="btn btn-primary btn-lg text-nowrap mt-3 d-block mx-auto" t-on-click="() => this.selectPalette('recommendedPalette')">
-                                Let's go!<i class="fa fa-angle-right text-white-50 ps-2" role="img"/>
+                                Let's go!<i class="oi text-white-50 ps-2" data-icon="keyboard_arrow_right" role="img"/>
                             </button>
                         </div>
                     </div>
@@ -195,13 +195,13 @@
                                      role="button">
                                     <div class="h3 card-body py-3 px-4 mb-0">
                                         <t t-if="isInstalled">
-                                            <i t-attf-class="o_configurator_feature_status fa fa-check-circle text-success" title="Already installed"/>
+                                            <i t-attf-class="o_configurator_feature_status oi oi-filled text-success" data-icon="check_circle" title="Already installed"/>
                                         </t>
                                         <t t-else="">
-                                            <i t-attf-class="o_configurator_feature_status fa {{feature.selected ? 'fa-check-circle text-success' : 'fa-circle-o text-300'}}" />
+                                            <i t-attf-class="o_configurator_feature_status oi {{feature.selected ? 'oi-filled text-success' : 'text-300'}}" t-attf-data-icon="{{feature.selected ? 'check_circle' : 'circle'}}" />
                                         </t>
                                         <div t-attf-class="h2 mb-0 card-title d-flex align-items-center {{isInstalled ? 'text-muted' : ''}}">
-                                            <i t-attf-class="me-2 fa {{feature.icon}} {{isInstalled ? 'text-muted' : (feature.type == 'page' ? 'text-info' : 'text-warning')}}"/>
+                                            <i t-attf-class="me-2 oi {{isInstalled ? 'text-muted' : (feature.type == 'page' ? 'text-info' : 'text-warning')}} {{feature.icon_class}}" t-attf-data-icon="{{feature.icon}}"/>
                                             <h3 class="m-1">
                                                 <t t-out="feature.name"/>
                                             </h3>
diff --git a/addons/website/static/src/client_actions/website_dashboard/website_dashboard.xml b/addons/website/static/src/client_actions/website_dashboard/website_dashboard.xml
index 0e48339529e9ee..de9eb482613ec3 100644
--- a/addons/website/static/src/client_actions/website_dashboard/website_dashboard.xml
+++ b/addons/website/static/src/client_actions/website_dashboard/website_dashboard.xml
@@ -43,7 +43,7 @@
                 </div>
                 <div class="o_buttons text-center">
                     <h3>Easily track your visitor with Plausible</h3>
-                    <DocumentationLink path="'/applications/websites/website/reporting/plausible.html'" label.translate="How to connect Plausible ?" icon="'oi oi-arrow-right me-1'"/>
+                    <DocumentationLink path="'/applications/websites/website/reporting/plausible.html'" label.translate="How to connect Plausible ?" icon="'east'"/>
                 </div>
             </div>
         </div>
diff --git a/addons/website/static/src/client_actions/website_preview/create_page_message.xml b/addons/website/static/src/client_actions/website_preview/create_page_message.xml
index cfa3acdea57343..22c50308b305c7 100644
--- a/addons/website/static/src/client_actions/website_preview/create_page_message.xml
+++ b/addons/website/static/src/client_actions/website_preview/create_page_message.xml
@@ -6,7 +6,7 @@
     <div>
         <div class="alert alert-warning alert-dismissible m-0 rounded-0 border-0">
             <div class="container d-flex align-items-center">
-                <i class="fa fa-lg fa-info-circle me-2"></i>
+                <i class="oi oi-lg me-2" data-icon="info"></i>
                 <span class="me-auto">This page does not exist yet. Would you like to create it?</span>
                 <a role="button" class="btn btn-primary" t-on-click="this.props.createPage">Create Page</a>
             </div>
diff --git a/addons/website/static/src/client_actions/website_preview/edit_in_backend.xml b/addons/website/static/src/client_actions/website_preview/edit_in_backend.xml
index ce5c1359a1fb08..0c828923714214 100644
--- a/addons/website/static/src/client_actions/website_preview/edit_in_backend.xml
+++ b/addons/website/static/src/client_actions/website_preview/edit_in_backend.xml
@@ -4,7 +4,7 @@
     <div class="o_website_edit_in_backend d-flex">
         <span class="o_website_systray_separator d-none d-md-block w-0 border-start"/>
         <a href="#" class="o_nav_entry btn d-flex align-items-center mx-1 border-0 rounded-0 px-2 px-md-3" accesskey="e" t-on-click="this.editInBackend">
-            <span class="fa fa-cog d-block d-md-none"/>
+            <span class="oi oi-filled d-block d-md-none" data-icon="settings"/>
             <span class="d-none d-md-block" t-out="this.state.mainObjectName"/>
         </a>
     </div>
diff --git a/addons/website/static/src/client_actions/website_preview/edit_website_systray_item.xml b/addons/website/static/src/client_actions/website_preview/edit_website_systray_item.xml
index 69aaaaf68d4757..0e5f1d40a52ce6 100644
--- a/addons/website/static/src/client_actions/website_preview/edit_website_systray_item.xml
+++ b/addons/website/static/src/client_actions/website_preview/edit_website_systray_item.xml
@@ -7,12 +7,12 @@
                 class="o-website-btn-custo-primary btn d-flex align-items-center rounded-0 border-0 px-3"
                 t-on-click="this.onClickEditPage"
                 accesskey="a">
-            <span t-if="this.websiteContext.edition" role="img" aria-label="Loading" class="fa fa-circle-o-notch fa-spin"/>
+            <span t-if="this.websiteContext.edition" role="img" aria-label="Loading" class="oi oi-spin" data-icon="autorenew"/>
             <t t-else="">Edit</t>
         </button>
         <Dropdown t-else="">
             <button class="o-website-btn-custo-primary o-dropdown-toggle-custo btn rounded-0 border-0 px-3" accesskey="a" t-on-click="this.onEditDropdownClick">
-                <span t-if="this.websiteContext.edition" role="img" aria-label="Loading" class="fa fa-circle-o-notch fa-spin"/>
+                <span t-if="this.websiteContext.edition" role="img" aria-label="Loading" class="oi oi-spin" data-icon="autorenew"/>
                 <t t-else="">Edit</t>
             </button>
             <t t-set-slot="content">
diff --git a/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.scss b/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.scss
index f947522a8a9030..470b869851c27f 100644
--- a/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.scss
+++ b/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.scss
@@ -1,5 +1,5 @@
 .o_mobile_preview_active {
-    span.fa {
+    span.oi {
         color: $o-success;
     }
 }
diff --git a/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.xml b/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.xml
index d4f34b61e57f27..b2406f85a272d3 100644
--- a/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.xml
+++ b/addons/website/static/src/client_actions/website_preview/mobile_preview_systray.xml
@@ -5,7 +5,8 @@
          t-att-class="{ 'o_mobile_preview_active': this.state.isMobile }">
         <a href="#" accesskey="v" class="o_nav_entry mx-1 px-3"
            t-on-click="this.onClick">
-            <span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-2x fa-mobile"/>
+            <span title="Mobile preview" role="img" aria-label="Mobile preview" class="oi oi-lg"
+                  t-att-data-icon="this.state.isMobile? 'monitor' : 'mobile_2'"/>
         </a>
     </div>
 </t>
diff --git a/addons/website/static/src/client_actions/website_preview/new_content_systray_item.js b/addons/website/static/src/client_actions/website_preview/new_content_systray_item.js
index bca8d161e4d484..3a5c7862250d41 100644
--- a/addons/website/static/src/client_actions/website_preview/new_content_systray_item.js
+++ b/addons/website/static/src/client_actions/website_preview/new_content_systray_item.js
@@ -248,7 +248,7 @@ export class NewContentSystrayItem extends Component {
                 this.state.newContentElements = this.state.newContentElements.map((el) => {
                     if (el.moduleXmlId === element.moduleXmlId) {
                         el.status = MODULE_STATUS.INSTALLING;
-                        el.icon = xml`<i class="fa fa-spin fa-circle-o-notch"/>`;
+                        el.icon = xml`<i class="oi oi-spin" data-icon="autorenew"/>`;
                         el.title = sprintf(this.newContentText.installPleaseWait, name);
                     }
                     return el;
@@ -262,7 +262,7 @@ export class NewContentSystrayItem extends Component {
                     this.state.newContentElements = this.state.newContentElements.map((el) => {
                         if (el.moduleXmlId === element.moduleXmlId) {
                             el.status = MODULE_STATUS.FAILED_TO_INSTALL;
-                            el.icon = xml`<i class="fa fa-exclamation-triangle"/>`;
+                            el.icon = xml`<i class="oi" data-icon="warning"/>`;
                             el.title = sprintf(this.newContentText.failed, name);
                         }
                         return el;
diff --git a/addons/website/static/src/client_actions/website_preview/website_switcher_systray_item.xml b/addons/website/static/src/client_actions/website_preview/website_switcher_systray_item.xml
index 8ffee4b97cb0ff..c5f8aec1277454 100644
--- a/addons/website/static/src/client_actions/website_preview/website_switcher_systray_item.xml
+++ b/addons/website/static/src/client_actions/website_preview/website_switcher_systray_item.xml
@@ -6,10 +6,10 @@
             <button data-hotkey="w" class="mx-1 border-0">
                 <div class="d-none d-md-flex align-items-md-center">
                     <span t-out="this.websiteService.currentWebsite?.name" class="me-2 text-truncate" style="max-width: 200px"/>
-                    <i class="fa fa-caret-down"/>
+                    <i class="oi" data-icon="arrow_drop_down"/>
                 </div>
                 <div class="d-md-none">
-                    <i class="fa fa-globe"/>
+                    <i class="oi" data-icon="public"/>
                 </div>
             </button>
             <t t-set-slot="content">
@@ -19,7 +19,7 @@
                         class="element.class"
                         attrs="element.dataset">
                         <t t-if="!element.domain">
-                            <span class="fa fa-warning me-2 text-warning"/>
+                            <span class="oi me-2 text-warning" data-icon="warning"/>
                         </t>
                         <t t-out="element.name"/>
                     </DropdownItem>
diff --git a/addons/website/static/src/components/dialog/add_page_dialog.xml b/addons/website/static/src/components/dialog/add_page_dialog.xml
index 819e07f1d3f631..bd6e578f158c80 100644
--- a/addons/website/static/src/components/dialog/add_page_dialog.xml
+++ b/addons/website/static/src/components/dialog/add_page_dialog.xml
@@ -50,7 +50,7 @@
     <div class="container-fluid py-3 py-xl-4">
         <div class="row g-0">
             <div t-if="this.props.isCustom and !this.props.templates.length" class="col-12 alert alert-info d-flex">
-                <i class="fa fa-2x fa-info-circle me-3"/>
+                <i class="oi oi-2x me-3" data-icon="info"/>
                 To add your page to this category, open the page properties: "Site -&gt; Properties".<br/>
                 Then enable the "Is a Template" option.
             </div>
@@ -94,7 +94,7 @@
                             t-att-aria-controls="'pane_' + page.id"
                             t-custom-ref="{{this.state.activePageId === page.id ? 'autofocus' : page.id}}"
                         >
-                            <span t-if="page.isPreloading" class="fa fa-spin fa-circle-o-notch me-1"/>
+                            <span t-if="page.isPreloading" class="oi oi-spin me-1" data-icon="autorenew"/>
                             <t t-out="page.title"/>
                         </button>
                     </t>
diff --git a/addons/website/static/src/components/dialog/dialog.scss b/addons/website/static/src/components/dialog/dialog.scss
index 97e3186ced1257..267a43616b56c7 100644
--- a/addons/website/static/src/components/dialog/dialog.scss
+++ b/addons/website/static/src/components/dialog/dialog.scss
@@ -19,7 +19,7 @@
         input {
             padding-right: 23px;
         }
-        .fa {
+        .oi {
             font-size: 1rem;
         }
     }
diff --git a/addons/website/static/src/components/dialog/edit_menu.xml b/addons/website/static/src/components/dialog/edit_menu.xml
index aa1e35dc2b30d5..66bc99f4a2600f 100644
--- a/addons/website/static/src/components/dialog/edit_menu.xml
+++ b/addons/website/static/src/components/dialog/edit_menu.xml
@@ -21,7 +21,8 @@
                     <input id="url_input" t-on-input="this.onUrlInput" t-custom-ref="url-input" type="text"
                         t-custom-model="this.state.url" class="form-control" t-att-class="{ 'is-invalid': this.state.invalidUrl }"/>
                     <i t-if="this.state.pageNotFound and !this.state.invalidUrl"
-                        class="fa fa-info-circle text-warning position-absolute top-50 end-0 translate-middle-y me-2"
+                        class="oi text-warning position-absolute top-50 end-0 translate-middle-y me-2"
+                        data-icon="info"
                         data-tooltip="Page not found" data-tooltip-position="top" data-tooltip-delay="0">
                     </i>
                 </div>
@@ -34,23 +35,25 @@
 <t t-name="website.MenuRow">
     <li class="mb-1" t-att-data-menu-id="this.props.menu.fields['id']" t-att-data-is-mega-menu="this.props.menu.fields['is_mega_menu'] ? 'true' : undefined">
         <div class="input-group mb-1">
-            <span class="input-group-text bg-view oi oi-draggable align-content-center p-2 border-end-0 text-muted"
-                role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
+            <span class="input-group-text bg-view oi align-content-center p-2 border-end-0 text-muted"
+                data-icon="drag_indicator" role="img" aria-label="Dropdown menu" title="Dropdown menu"/>
             <span class="form-control d-flex align-items-center bg-view ms-0 border-start-0 border-end-0">
                 <span t-on-dblclick="this.edit" class="js_menu_label o_text_overflow flex-grow-1">
                     <t t-out="this.props.menu.fields['name']"/>
                 </span>
                 <span t-if="this.props.menu.fields['is_mega_menu']" class="badge text-bg-primary rounded-pill">Mega Menu</span>
-                <i t-if="this.props.menu.is_homepage" class="fa fa-home ms-3" role="img" aria-label="Home" title="Home"/>
+                <i t-if="this.props.menu.is_homepage" class="oi ms-3" data-icon="home" role="img" aria-label="Home" title="Home"/>
             </span>
             <div class="input-group-text bg-view p-0 ms-0 border-start-0">
                 <button type="button" t-if="this.props.menu.page_not_found and !this.props.menu.children.length" t-on-click="this.createPage"
                     class="btn btn-sm btn-outline-primary me-1">Create Page</button>
                 <button t-on-click="this.edit" type="button"
-                    class="btn js_edit_menu fa fa-pencil text-muted px-2 rounded-0 h-100"
+                    class="btn js_edit_menu oi oi-filled text-muted px-2 rounded-0 h-100"
+                    data-icon="edit"
                     aria-label="Edit Menu Item" title="Edit Menu Item"/>
                 <button t-on-click="this.delete" type="button"
-                    class="btn js_delete_menu fa fa-trash-o text-danger px-2 rounded-0 h-100"
+                    class="btn js_delete_menu oi text-danger px-2 rounded-0 h-100"
+                    data-icon="delete"
                     aria-label="Delete Menu Item" title="Delete Menu Item"/>
             </div>
         </div>
@@ -72,14 +75,14 @@
         <div class="d-flex mt-4 justify-content-between align-items-end">
             <div class="d-flex flex-column">
                 <a href="#" t-on-click="() => this.addMenu(false)">
-                    <i class="fa fa-plus-circle me-1"/> Add Menu Item
+                    <i class="oi me-1" data-icon="add_circle"/> Add Menu Item
                 </a>
                 <a href="#" t-on-click="() => this.addMenu(true)">
-                    <i class="fa fa-plus-circle me-1"/> Add Mega Menu Item
+                    <i class="oi me-1" data-icon="add_circle"/> Add Mega Menu Item
                 </a>
             </div>
             <small class="text-muted">
-                <i class="fa fa-info-circle me-1"/> Drag to the right to get a submenu
+                <i class="oi me-1" data-icon="info"/> Drag to the right to get a submenu
             </small>
         </div>
     </WebsiteDialog>
diff --git a/addons/website/static/src/components/dialog/page_properties.xml b/addons/website/static/src/components/dialog/page_properties.xml
index f371e01de0da47..3ee760763d80f3 100644
--- a/addons/website/static/src/components/dialog/page_properties.xml
+++ b/addons/website/static/src/components/dialog/page_properties.xml
@@ -31,7 +31,7 @@
                 t-attf-aria-controls="collapseDependencies{{ dependency_index }}"
                 t-attf-href="#collapseDependencies{{ dependency_index }}"
                 aria-expanded="false">
-                    <i class="fa fa-caret-right me-1"/>
+                    <i class="oi me-1" data-icon="arrow_right"/>
                     <t t-out="dependency"/>:
                     <span class="text-muted"> <t t-out="dependency_value.length"/> found(s)</span>
                 </a>
@@ -89,8 +89,8 @@
 
 <t t-name="website.PagePropertiesDialogButtons" t-inherit="web.FormViewDialog.ToOne.buttons">
     <xpath expr="//button[hasclass('o_form_button_cancel')]" position="after">
-        <button class="btn btn-link order-last ms-auto" t-on-click="this.props.clonePage"><i class="fa fa-fw fa-clone"/>Duplicate Page</button>
-        <button class="btn btn-link order-last" t-on-click="this.props.deletePage"><i class="fa fa-fw fa-trash"/>Delete Page</button>
+        <button class="btn btn-link order-last ms-auto" t-on-click="this.props.clonePage"><i class="oi oi-fw" data-icon="content_copy"/>Duplicate Page</button>
+        <button class="btn btn-link order-last" t-on-click="this.props.deletePage"><i class="oi oi-fw oi-filled" data-icon="delete"/>Delete Page</button>
     </xpath>
 </t>
 
diff --git a/addons/website/static/src/components/dialog/seo.js b/addons/website/static/src/components/dialog/seo.js
index 13c483b097a3a3..220d88ce2f2886 100644
--- a/addons/website/static/src/components/dialog/seo.js
+++ b/addons/website/static/src/components/dialog/seo.js
@@ -860,7 +860,7 @@ export class SeoChecks extends Component {
                     if (imgLinkEl?.src) {
                         label = imgLinkEl.src.split("/").pop();
                         isImageLink = true;
-                    } else if (el.querySelector(".fa")) {
+                    } else if (el.querySelector(".oi")) {
                         label =
                             el.ariaLabel || el.title || el.href.split("/").filter(Boolean).pop();
                         isImageLink = true;
diff --git a/addons/website/static/src/components/dialog/seo.scss b/addons/website/static/src/components/dialog/seo.scss
index b4938120f65486..88bab7ea5d5290 100644
--- a/addons/website/static/src/components/dialog/seo.scss
+++ b/addons/website/static/src/components/dialog/seo.scss
@@ -46,8 +46,8 @@
                 &:after {
                     @include o-position-absolute(2px, 3px);
                     display: inline-block;
-                    content: "\f00c";
-                    font-family: FontAwesome;
+                    content: "check";
+                    font-family: 'material_symbols_sharp';
                     color: white;
                     font-size: 12px;
                 }
diff --git a/addons/website/static/src/components/dialog/seo.xml b/addons/website/static/src/components/dialog/seo.xml
index a1fe8d0356aa16..4b01c44edc1f36 100644
--- a/addons/website/static/src/components/dialog/seo.xml
+++ b/addons/website/static/src/components/dialog/seo.xml
@@ -15,7 +15,7 @@
                 <MetaImage active="image.active" custom="image.custom" src="image.src" selectImage="src => this.selectImage(src)"/>
             </t>
             <button class="o_meta_img_upload o_btn_reset mb-2 me-2" title="Click to choose more images" t-on-click="this.openMediaDialog">
-                <i class="fa fa-upload"/>
+                <i class="oi" data-icon="upload"/>
             </button>
         </div>
     </section>
@@ -27,31 +27,31 @@
         <td class="text-center o_seo_mentioned_keyword">
             <div t-if="this.usedInH1">
                 <span class="visually-hidden" t-out="this.translatedStrings.usedInH1"/>
-                <i aria-hidden="true" class="fa fa-check text-success" t-att-title="this.translatedStrings.usedInH1"/>
+                <i aria-hidden="true" class="oi text-success" data-icon="check" t-att-title="this.translatedStrings.usedInH1"/>
             </div>
         </td>
         <td class="text-center o_seo_mentioned_keyword">
             <div t-if="this.usedInH2">
                 <span class="visually-hidden" t-out="this.translatedStrings.usedInH2"/>
-                <i aria-hidden="true" class="fa fa-check text-success" t-att-title="this.translatedStrings.usedInH2"/>
+                <i aria-hidden="true" class="oi text-success" data-icon="check" t-att-title="this.translatedStrings.usedInH2"/>
             </div>
         </td>
         <td class="text-center o_seo_mentioned_keyword">
             <div t-if="this.usedInTitle">
                 <span class="visually-hidden" t-out="this.translatedStrings.usedInTitle"/>
-                <i aria-hidden="true" class="fa fa-check text-success" t-att-title="this.translatedStrings.usedInTitle"/>
+                <i aria-hidden="true" class="oi text-success" data-icon="check" t-att-title="this.translatedStrings.usedInTitle"/>
             </div>
         </td>
         <td class="text-center o_seo_mentioned_keyword">
             <div t-if="this.usedInDescription">
                 <span class="visually-hidden" t-out="this.translatedStrings.usedInDescription"/>
-                <i aria-hidden="true" class="fa fa-check text-success" t-att-title="this.translatedStrings.usedInDescription"/>
+                <i aria-hidden="true" class="oi text-success" data-icon="check" t-att-title="this.translatedStrings.usedInDescription"/>
             </div>
         </td>
         <td class="text-center o_seo_mentioned_keyword">
             <div t-if="this.usedInContent">
                 <span class="visually-hidden" t-out="this.translatedStrings.usedInContent"/>
-                <i aria-hidden="true" class="fa fa-check text-success" t-att-title="this.translatedStrings.usedInContent"/>
+                <i aria-hidden="true" class="oi text-success" data-icon="check" t-att-title="this.translatedStrings.usedInContent"/>
             </div>
         </td>
         <td class="o_seo_keyword_suggestion">
@@ -64,11 +64,11 @@
                 </t>
             </ul>
         </td>
-        <td class="text-center"><a target="_blank" t-att-href="this.getGoogleTrendsURL()" t-att-title="this.translatedStrings.googleTrendsTitle"><i class="fa fa-external-link opacity-75 mt-1"/></a></td>
+        <td class="text-center"><a target="_blank" t-att-href="this.getGoogleTrendsURL()" t-att-title="this.translatedStrings.googleTrendsTitle"><i class="oi opacity-75 mt-1" data-icon="open_in_new"/></a></td>
         <td class="text-center" t-on-click="() => this.props.removeKeyword(this.props.keyword)">
             <button class="border-0 oe_remove text-danger" t-att-title="this.translatedStrings.removeBtn">
                 <span class="visually-hidden" t-out="this.translatedStrings.removeBtn"/>
-                <i class="fa fa-trash" aria-hidden="true"/>
+                <i class="oi oi-filled" data-icon="delete" aria-hidden="true"/>
             </button>
         </td>
     </tr>
@@ -80,7 +80,7 @@
             Images Optimization
         </h4>
         <t t-if="!this.state.altAttributes.filter(alt => !alt.decorative and alt.alt == '').length > 0">
-            <p><i class="fa fa-check text-success me-2"></i>No warning on images</p>
+            <p><i class="oi text-success me-2" data-icon="check"></i>No warning on images</p>
         </t>
         <div class="row">
             <t t-foreach="this.state.altAttributes" t-as="img" t-key="img.id">
@@ -92,7 +92,7 @@
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" t-att-id="'decorative-' + img.id" t-custom-model="img.decorative" t-on-change="() => this.imgUpdated(img)"/>
                             <label t-att-for="'decorative-' + img.id">Mark as decorative
-                                <i class="fa fa-question-circle text-primary" data-tooltip-position="right" data-tooltip="The alt attribute is used to describe the image, optimizing both accessibility and SEO. If you select this option, the image will be hidden from screen readers and not considered for your SEO."/>
+                                <i class="oi text-primary" data-icon="help" data-tooltip-position="right" data-tooltip="The alt attribute is used to describe the image, optimizing both accessibility and SEO. If you select this option, the image will be hidden from screen readers and not considered for your SEO."/>
                             </label>
                         </div>
                         <div t-if="!img.decorative" class="input-group mt-2">
@@ -107,7 +107,7 @@
             Broken Links
         </h4>
         <div class="mt-2" t-if="this.state.checkingLinks">
-            <div><i class="fa fa-spin fa-circle-o-notch text-info me-2"></i>Checking hyperlinks...</div>
+            <div><i class="oi oi-spin text-info me-2" data-icon="autorenew"></i>Checking hyperlinks...</div>
             <div class="progress rounded mt-2" style="height: 10px;">
                 <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" t-att-aria-valuenow="this.state.counterLinks" aria-valuemin="0" t-att-aria-valuemax="this.state.totalLinks" t-attf-style="width:#{(this.state.counterLinks / this.state.totalLinks) * 100}%;" aria-label="Progress bar"/>
             </div>
@@ -115,7 +115,7 @@
         <div class="mt-2" t-elif="this.state.checkedLinks">
             <t t-if="this.seoContext.brokenLinks.length > 0">
                 <t t-if="!this.seoContext.brokenLinks.filter(link => link.broken).length">
-                    <p><i class="fa fa-check text-success me-2"></i>No broken link</p>
+                    <p><i class="oi text-success me-2" data-icon="check"></i>No broken link</p>
                 </t>
                 <t t-foreach="this.seoContext.brokenLinks" t-as="link" t-key="link_index">
                      <div t-if="!link.remove" class="row align-items-center mb-2">
@@ -124,7 +124,7 @@
                 </t>
             </t>
             <t t-else="">
-                <p><i class="fa fa-check text-success me-2"></i>No broken link</p>
+                <p><i class="oi text-success me-2" data-icon="check"></i>No broken link</p>
             </t>
         </div>
     </section>
@@ -133,7 +133,7 @@
 <t t-name="website.BrokenLink">
     <div class="col-2">
         <label class="align-middle text-truncate w-100" t-att-title="this.link.label">
-            <i t-if="this.link.isImageLink" class="fa fa-picture-o text-400 me-2"/>
+            <i t-if="this.link.isImageLink" class="oi text-400 me-2" data-icon="image"/>
             <t t-out="this.link.label"/>
         </label>
     </div>
@@ -239,7 +239,7 @@
                 <div class="alert alert-info py-2 rounded-0 border-0">
                     <span class="text-info">Need help to optimize?</span>
                     <button class="btn btn-link ps-1" t-on-click="this.autoFill">
-                        <i class="oi oi-fw oi-arrow-right me-1"/>
+                        <i class="oi oi-fw me-1" data-icon="east"/>
                         <span>Fill with AI</span>
                     </button>
                 </div>
@@ -247,14 +247,14 @@
             <div class="col-lg-5">
                 <div class="mb-3">
                     <label for="website_meta_title">
-                        Title <i class="fa fa-question-circle text-primary" data-tooltip-position="right" t-att-data-tooltip="this.titleTooltip"/>
+                        Title <i class="oi text-primary" data-icon="help" data-tooltip-position="right" t-att-data-tooltip="this.titleTooltip"/>
                     </label>
                     <input type="text" t-custom-model="this.seoContext.title" t-att-disabled="!this.props.canEditTitle" class="form-control" t-att-placeholder="this.props.defaultTitle" maxlength="70" size="70" t-custom-ref="autofocus"/>
                 </div>
                 <div class="mb-3">
                     <div class="d-flex justify-content-between align-items-center">
                         <label for="website_meta_description">
-                            Description <i class="fa fa-question-circle text-primary" data-tooltip-position="right" t-att-data-tooltip="this.props.previewDescription"/>
+                            Description <i class="oi text-primary" data-icon="help" data-tooltip-position="right" t-att-data-tooltip="this.props.previewDescription"/>
                         </label>
                         <t t-if="this.descriptionWarning.length">
                             <small class="text-warning" t-out="this.descriptionWarning"/>
@@ -264,7 +264,7 @@
                 </div>
                 <div class="mb-3" t-if='this.props.canEditUrl'>
                     <label for="website_seo_name">
-                        Custom Url <i class="fa fa-question-circle text-primary" data-tooltip-position="right" t-att-data-tooltip="this.props.seoNameHelp" />
+                        Custom Url <i class="oi text-primary" data-icon="help" data-tooltip-position="right" t-att-data-tooltip="this.props.seoNameHelp" />
                     </label>
                     <div class="input-group">
                         <div class="input-group-prepend">
@@ -280,7 +280,7 @@
             </div>
             <div class="col-lg-7">
                 <label>
-                    Preview <i class="fa fa-question-circle text-primary" data-tooltip-position="right"
+                    Preview <i class="oi text-primary" data-icon="help" data-tooltip-position="right"
                         data-tooltip="See how this page might look in search results and on social media."/>
                 </label>
                 <div class="card mb0 p-0">
diff --git a/addons/website/static/src/components/fields/redirect_field.xml b/addons/website/static/src/components/fields/redirect_field.xml
index 9863304265bb04..57630d64bf9d2e 100644
--- a/addons/website/static/src/components/fields/redirect_field.xml
+++ b/addons/website/static/src/components/fields/redirect_field.xml
@@ -9,7 +9,7 @@
         <t t-set="textClass" t-if="Object.hasOwn(this.props.record.data, 'publish_on') and this.props.record.data.publish_on">text-warning</t>
         <t t-set="textClass" t-elif="this.props.record.data[this.props.name]">text-success</t>
         <t t-set="textClass" t-else="">text-danger</t>
-        <i class="fa fa-fw o_button_icon fa-globe" t-att-class="textClass"/>
+        <i class="o_button_icon oi oi-fw" data-icon="public" t-att-class="textClass"/>
         <div class="o_stat_info">
             <span class="o_stat_text">Go to<br/>Website</span>
         </div>
diff --git a/addons/website/static/src/components/media_dialog/media_dialog.js b/addons/website/static/src/components/media_dialog/media_dialog.js
index c54f01a20d797b..60e6f18cc71204 100644
--- a/addons/website/static/src/components/media_dialog/media_dialog.js
+++ b/addons/website/static/src/components/media_dialog/media_dialog.js
@@ -12,7 +12,7 @@ patch(MediaDialog.prototype, {
         ) {
             classes.push("social_media_img");
             for (const element of this.props.node.classList) {
-                if (element.match(/fa-\d{1}x/) || element == "small_social_icon") {
+                if (element.match(/oi-\d{1}x/) || element == "small_social_icon") {
                     classes.push(element);
                 }
             }
diff --git a/addons/website/static/src/components/resource_editor/resource_editor.scss b/addons/website/static/src/components/resource_editor/resource_editor.scss
index 5fb1aaadd039aa..5b362dc5c8b5a9 100644
--- a/addons/website/static/src/components/resource_editor/resource_editor.scss
+++ b/addons/website/static/src/components/resource_editor/resource_editor.scss
@@ -71,8 +71,8 @@ $o-we-ace-color: #2F3129 !default;
                 &::after {
                     @include o-position-absolute(-100%, 0, -100%, 0);
                     @include ace-line-error-mixin;
-                    font-family: FontAwesome;
-                    content: "\f071";
+                    font-family: 'material_symbols_sharp';
+                    content: "warning";
                 }
             }
         }
diff --git a/addons/website/static/src/components/resource_editor/resource_editor.xml b/addons/website/static/src/components/resource_editor/resource_editor.xml
index 61a8dcacd3bb3b..00b1d4eb7d14e4 100644
--- a/addons/website/static/src/components/resource_editor/resource_editor.xml
+++ b/addons/website/static/src/components/resource_editor/resource_editor.xml
@@ -57,14 +57,14 @@
                     </div>
                 </label>
                 <div class="d-flex gap-2">
-                    <button class="btn btn-primary" t-on-click="this.onSave"><i t-if="this.state.saving" class="fa fa-circle-o-notch fa-spin mr8"/>Save</button>
+                    <button class="btn btn-primary" t-on-click="this.onSave"><i t-if="this.state.saving" class="oi oi-spin mr8" data-icon="autorenew"/>Save</button>
                     <button class="btn btn-secondary" t-on-click="this.props.close">Close</button>
                 </div>
             </div>
             <div t-if="this.state.currentResource" id="resource-editor-id">
                 <div class="float-end">
                     <button t-if="this.state.type !== 'xml' and this.isCustomResource(this.state.currentResource.url)" type="button" class="btn btn-sm btn-danger" t-on-click="this.onReset">
-                        <i class="fa fa-undo"/>
+                        <i class="oi" data-icon="undo"/>
                         Reset
                     </button>
                     <button t-if="this.state.type === 'xml'" type="button" class="btn btn-sm btn-link" t-on-click="this.onFormat">Format</button>
@@ -85,7 +85,7 @@
     </t>
 
     <t t-name="website.ResourceEditor.ResourceLabel">
-        <i t-if="resource.customized or resource.dirty" t-att-class="{ 'fa fa-floppy-o mr8': true, 'text-warning': resource.dirty, 'text-success': resource.customized }"/>
+        <i t-if="resource.customized or resource.dirty" t-att-class="{ 'oi mr8': true, 'text-warning': resource.dirty, 'text-success': resource.customized }" data-icon="save"/>
         <t t-out="label"/>
     </t>
 
diff --git a/addons/website/static/src/components/resource_editor/resource_editor_warning.xml b/addons/website/static/src/components/resource_editor/resource_editor_warning.xml
index 057dd8eb065078..4af81cca1c3c5c 100644
--- a/addons/website/static/src/components/resource_editor/resource_editor_warning.xml
+++ b/addons/website/static/src/components/resource_editor/resource_editor_warning.xml
@@ -7,7 +7,7 @@
             <div>
                 <h1 class="fs-2 text-dark mb-4">Your changes might be lost</h1>
                 <p class="mb-3">
-                    <i class="fa fa-info-circle"></i>
+                    <i class="oi" data-icon="info"></i>
                     Warning: Your changes may be overwritten after updates.
                     To understand why,
                     <a href="https://www.odoo.com/documentation/latest/administration/upgrade.html" target="_blank" class="link-primary">read more here</a>.
diff --git a/addons/website/static/src/components/views/page_list.js b/addons/website/static/src/components/views/page_list.js
index 42dd14e54afe75..0b5249bc78494e 100644
--- a/addons/website/static/src/components/views/page_list.js
+++ b/addons/website/static/src/components/views/page_list.js
@@ -46,7 +46,7 @@ export class PageListController extends listView.Controller {
         if (Object.prototype.hasOwnProperty.call(this.props.fields, "is_published")) {
             menuItems.publish = {
                 sequence: 15,
-                icon: "fa fa-globe",
+                icon: "public",
                 description: _t("Publish"),
                 callback: async () => {
                     this.dialogService.add(ConfirmationDialog, {
@@ -61,7 +61,7 @@ export class PageListController extends listView.Controller {
             };
             menuItems.unpublish = {
                 sequence: 16,
-                icon: "fa fa-chain-broken",
+                icon: "link_off",
                 description: _t("Unpublish"),
                 callback: async () => this.togglePublished(false),
             };
diff --git a/addons/website/static/src/components/views/page_list.xml b/addons/website/static/src/components/views/page_list.xml
index 9cd83431d27ef0..9c5865b880be4e 100644
--- a/addons/website/static/src/components/views/page_list.xml
+++ b/addons/website/static/src/components/views/page_list.xml
@@ -4,7 +4,7 @@
 <t t-name="website.PageListRenderer.RecordRow" t-inherit="web.ListRenderer.RecordRow">
     <xpath expr="//Field//ancestor::td/*[1]" position="before">
         <t t-if="column.name === 'name' and record.data.is_homepage and record.mode !== 'edit'">
-            <i class="fa fa-fw fa-home fa-lg" title="Home page of the current website"/>
+            <i class="oi oi-fw oi-lg" data-icon="home" title="Home page of the current website"/>
         </t>
     </xpath>
 </t>
diff --git a/addons/website/static/src/components/views/theme_preview.xml b/addons/website/static/src/components/views/theme_preview.xml
index 0906a7e747e295..08fb05cfc7f3a4 100644
--- a/addons/website/static/src/components/views/theme_preview.xml
+++ b/addons/website/static/src/components/views/theme_preview.xml
@@ -15,7 +15,7 @@
         </xpath>
         <xpath expr="//*[hasclass('o_control_panel_main_buttons')]" position="inside">
             <button class="o_switch_theme btn btn-secondary d-none d-md-inline-block me-1" t-on-click.stop="this.back">
-                <i class="oi oi-arrow-left" role="img" aria-label="Go Back"/>
+                <i class="oi" data-icon="west" role="img" aria-label="Go Back"/>
             </button>
         </xpath>
         <xpath expr="//*[hasclass('o_control_panel_actions')]" position="attributes">
@@ -26,11 +26,11 @@
                 <div class="btn-group">
                     <input class="btn-check" id="themeViewerDesktop" type="radio" name="viewer" data-mode='desktop' autocomplete="off" checked="checked"/>
                     <label class="btn btn-secondary" for="themeViewerDesktop" t-on-click="this.onDesktopClick">
-                        <i class="fa fa-fw fa-desktop" role="img" aria-label="Desktop"/>
+                        <i class="oi oi-fw" data-icon="desktop_windows" role="img" aria-label="Desktop"/>
                     </label>
                     <input class="btn-check"  id="themeViewerMobile" type="radio" name="viewer" data-mode='mobile' autocomplete="off"/>
                     <label class="btn btn-secondary" for="themeViewerMobile" t-on-click="this.onMobileClick">
-                        <i class="fa fa-fw fa-mobile" role="img" aria-label="Mobile"/>
+                        <i class="oi oi-fw" data-icon="smartphone" role="img" aria-label="Mobile"/>
                     </label>
                 </div>
             </div>
@@ -71,7 +71,7 @@
         <xpath expr="//div[hasclass('o_control_panel_actions')]" position="replace"/>
         <xpath expr="//div[hasclass('o_control_panel_navigation')]" position="replace">
             <a class="btn btn-secondary align-self-center" t-on-click="this.close" aria-label="Close" data-tooltip="Close">
-                <i class="oi oi-close" role="img" aria-label="close"/>
+                <i class="oi" data-icon="close_small" role="img" aria-label="close"/>
             </a>
         </xpath>
     </t>
diff --git a/addons/website/static/src/components/website_loader/website_loader.xml b/addons/website/static/src/components/website_loader/website_loader.xml
index 22b36e56b53927..52ff37be7b126c 100644
--- a/addons/website/static/src/components/website_loader/website_loader.xml
+++ b/addons/website/static/src/components/website_loader/website_loader.xml
@@ -8,7 +8,7 @@
             <a t-if="this.state.showCloseButton"
                href="#" class="btn" style="position: absolute; right: 0; top: 0; margin: 15px;"
                t-on-click="this.close">
-                <i class="oi oi-close oi-large" role="presentation"/>
+                <i class="oi oi-lg" data-icon="close_small" role="presentation"/>
             </a>
 
             <div class="o_website_loader_odoo_logo mb-5" style="height: 31px; width: 78px;"/>
@@ -18,23 +18,23 @@
             <div t-else="">Building your website...</div>
             <div class="mt-3"/>
             <div t-if="['text', 'images', 'generic'].includes(this.currentWaitingMessage.flag)" class="o_website_loader_tip d-flex gap-2 h3-fs mb-2">
-                <div><i class="o_website_loader_check fa fa-check fa-fw text-success" role="presentation"/></div>
+                <div><i class="o_website_loader_check oi oi-fw text-success" data-icon="check" role="presentation"/></div>
                 <span class="o_website_loader_done">Applying your colors and design.</span>
             </div>
             <div t-if="['text', 'generic'].includes(this.currentWaitingMessage.flag)" class="o_website_loader_tip d-flex gap-2 h3-fs mb-2">
-                <div><i class="o_website_loader_check fa fa-check fa-fw text-success" role="presentation"/></div>
+                <div><i class="o_website_loader_check oi oi-fw text-success" data-icon="check" role="presentation"/></div>
                 <span class="o_website_loader_done">Searching your images.</span>
             </div>
             <div t-if="['text', 'generic'].includes(this.currentWaitingMessage.flag)" class="o_website_loader_tip d-flex gap-2 h3-fs mb-2">
-                <div><i class="o_website_loader_check fa fa-check fa-fw text-success" role="presentation"/></div>
+                <div><i class="o_website_loader_check oi oi-fw text-success" data-icon="check" role="presentation"/></div>
                 <span class="o_website_loader_done">Adapting Building Blocks.</span>
             </div>
             <div t-if="['generic'].includes(this.currentWaitingMessage.flag)" class="o_website_loader_tip d-flex gap-2 h3-fs mb-2">
-                <div><i class="o_website_loader_check fa fa-check fa-fw text-success" role="presentation"/></div>
+                <div><i class="o_website_loader_check oi oi-fw text-success" data-icon="check" role="presentation"/></div>
                 <span class="o_website_loader_done">Generating inspiring text.</span>
             </div>
             <div t-if="this.state.showWaitingMessages" class="o_website_loader_tip d-flex gap-2 h3-fs">
-                <div><i class="fa fa-circle-o-notch fa-spin fa-fw"/></div><div><t t-out="this.currentWaitingMessage.description"/></div>
+                <div><i class="oi oi-spin oi-fw" data-icon="autorenew"/></div><div><t t-out="this.currentWaitingMessage.description"/></div>
             </div>
 
             <p class="o_website_loader_tip mt-auto mb-3">
diff --git a/addons/website/static/src/img/backgrounds/la.jpg b/addons/website/static/src/img/backgrounds/la.jpg
index 38bba3bb254970..d7adeb1b8ce866 100644
Binary files a/addons/website/static/src/img/backgrounds/la.jpg and b/addons/website/static/src/img/backgrounds/la.jpg differ
diff --git a/addons/website/static/src/img/snippets_options/desktop_invisible.svg b/addons/website/static/src/img/snippets_options/desktop_invisible.svg
deleted file mode 100644
index f4c01ab7666810..00000000000000
--- a/addons/website/static/src/img/snippets_options/desktop_invisible.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 465 462" xmlns="http://www.w3.org/2000/svg">
-<path d="M456.969 9.84743L454.026 6.90425C444.956 -2.16512 429.098 -1.01124 418.605 9.48152L10.8984 417.188C0.405681 427.681 -0.748186 443.539 8.32118 452.609L11.2644 455.552C20.3337 464.621 36.1919 463.467 46.6847 452.975L454.392 45.2678C464.884 34.775 466.038 18.9168 456.969 9.84743Z"/>
-<path d="M346.673 26.269H39.1908C17.8303 26.269 0.5 43.6036 0.5 64.9695V322.973C0.5 336.409 7.35309 348.251 17.752 355.19L114.47 258.472H62.9696C56.9597 258.472 52.0878 253.601 52.0878 247.591V88.7515C52.0878 82.7417 56.9597 77.8697 62.9696 77.8697H295.072L346.673 26.269Z"/>
-<path d="M296.331 258.472H402.32C408.33 258.472 413.202 253.601 413.202 247.591V141.602L464.79 90.0139V322.973C464.79 344.339 447.46 361.674 426.099 361.674H271.336L284.233 400.375H342.269C352.949 400.375 361.614 409.042 361.614 419.725C361.614 430.408 352.949 439.075 342.269 439.075H123.021C120.837 439.075 118.734 438.708 116.771 438.033L154.429 400.375H181.057L193.954 361.674H193.13L226.244 328.56C228.268 329.181 230.417 329.516 232.645 329.516C244.665 329.516 254.409 319.772 254.409 307.753C254.409 305.525 254.074 303.376 253.452 301.352L296.331 258.472Z"/>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/desktop_visible.svg b/addons/website/static/src/img/snippets_options/desktop_visible.svg
deleted file mode 100644
index 3875c52e124f6d..00000000000000
--- a/addons/website/static/src/img/snippets_options/desktop_visible.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 513 457" xmlns="http://www.w3.org/2000/svg">
-<path d="M43.1667 0.887085H469.833C493.389 0.887085 512.5 20.003 512.5 43.5645V328.081C512.5 351.642 493.389 370.758 469.833 370.758H299.167L313.389 413.435H377.389C389.167 413.435 398.722 422.993 398.722 434.774C398.722 446.555 389.167 456.113 377.389 456.113H135.611C123.878 456.113 114.278 446.51 114.278 434.774C114.278 423.038 123.878 413.435 135.611 413.435H199.611L213.833 370.758H43.1667C19.6111 370.758 0.5 351.642 0.5 328.081V43.5645C0.5 20.003 19.6111 0.887085 43.1667 0.887085ZM443.611 256.952C450.239 256.952 455.611 251.579 455.611 244.952V69.7903C455.611 63.1629 450.239 57.7903 443.611 57.7903H69.3889C62.7615 57.7903 57.3889 63.1629 57.3889 69.7903V244.952C57.3889 251.579 62.7615 256.952 69.3889 256.952H443.611ZM256.5 335.296C269.755 335.296 280.5 324.551 280.5 311.296C280.5 298.041 269.755 287.296 256.5 287.296C243.245 287.296 232.5 298.041 232.5 311.296C232.5 324.551 243.245 335.296 256.5 335.296Z"/>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/image_left.svg b/addons/website/static/src/img/snippets_options/image_left.svg
deleted file mode 100644
index 66fc80d9d10d6c..00000000000000
--- a/addons/website/static/src/img/snippets_options/image_left.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy_5" transform="translate(-137 -5)">
-      <g class="image_left" transform="translate(137 5)">
-        <rect width="8" height="11" x="16" fill="#B8B8B8" class="o_subdle"/>
-        <path fill="#FFF" d="M0 0h13v11H0V0zm1 1h11v9H1V1zm3.438 2.286c0 .357-.119.66-.356.91s-.525.375-.863.375c-.339 0-.627-.125-.864-.375A1.275 1.275 0 0 1 2 3.286c0-.357.118-.661.355-.911S2.88 2 3.22 2c.338 0 .626.125.863.375s.356.554.356.91zm6.5 2.571v3H2V7.571L4.031 5.43 5.047 6.5l3.25-3.429 2.64 2.786z" class="o_graphic"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/image_right.svg b/addons/website/static/src/img/snippets_options/image_right.svg
deleted file mode 100644
index 8cc4ddca000987..00000000000000
--- a/addons/website/static/src/img/snippets_options/image_right.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy_5" transform="translate(-171 -5)">
-      <g class="image_right" transform="translate(171 5)">
-        <rect width="8" height="11" fill="#B8B8B8" class="o_subdle"/>
-        <path fill="#FFF" d="M11 0h13v11H11V0zm1 1h11v9H12V1zm3.438 2.286c0 .357-.119.66-.356.91s-.525.375-.863.375c-.339 0-.627-.125-.864-.375a1.275 1.275 0 0 1-.355-.91c0-.357.118-.661.355-.911S13.88 2 14.22 2c.338 0 .626.125.863.375s.355.554.355.91zm6.5 2.571v3H13V7.571l2.031-2.142L16.047 6.5l3.25-3.429 2.64 2.786z" class="o_graphic"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/mobile_invisible.svg b/addons/website/static/src/img/snippets_options/mobile_invisible.svg
deleted file mode 100644
index 187770e3dd4171..00000000000000
--- a/addons/website/static/src/img/snippets_options/mobile_invisible.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 566.93 566.93" xmlns="http://www.w3.org/2000/svg">
-    <rect transform="translate(283.46 -117.41) rotate(45)" x="255.56" y="-16.93" width="55.81" height="600.8"
-          rx="25.61"/>
-    <path d="m395.46 399.46a12 12 0 0 1-12 12h-128.4l-115.68 115.69a47.8 47.8 0 0 0 32.08 12.31h224a48 48 0 0 0 48-48v-268.4l-48 48zm-112 108a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/>
-    <path d="m171.46 87.46a12 12 0 0 1 12-12h200a11.89 11.89 0 0 1 6.48 1.93l37.61-37.61a47.82 47.82 0 0 0-32.09-12.32h-224a48 48 0 0 0-48 48v268.41l48-48z"/>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/mobile_visible.svg b/addons/website/static/src/img/snippets_options/mobile_visible.svg
deleted file mode 100644
index 6b1888f9c75af4..00000000000000
--- a/addons/website/static/src/img/snippets_options/mobile_visible.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.93 566.93">
-    <defs>
-        <clipPath id="clip-path">
-            <rect x="123.46" y="27.46" width="320" height="512" fill="none"/>
-        </clipPath>
-    </defs>
-    <g clip-path="url(#clip-path)">
-        <path d="M395.46,27.46h-224a48,48,0,0,0-48,48v416a48,48,0,0,0,48,48h224a48,48,0,0,0,48-48v-416a48,48,0,0,0-48-48m-112,480a32,32,0,1,1,32-32,32,32,0,0,1-32,32m112-108a12,12,0,0,1-12,12h-200a12,12,0,0,1-12-12v-312a12,12,0,0,1,12-12h200a12,12,0,0,1,12,12Z"/>
-    </g>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/palette.svg b/addons/website/static/src/img/snippets_options/palette.svg
deleted file mode 100644
index 00411e68226df1..00000000000000
--- a/addons/website/static/src/img/snippets_options/palette.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23" height="23" viewBox="0 0 23 23" version="1.1">
-    <g fill="#FFF">
-        <path class="o_graphic" d="M 11 2.9 C 9.3 3 7.7 3.6 6.3 4.6 C 5.9 5 5.3 5.5 4.9 5.9 C 3.8 7.3 3.1 8.9 2.9 10.7 C 2.9 11 2.9 12 2.9 12.3 C 3.1 14.4 4 16.2 5.4 17.6 C 6.1 18.3 6.8 18.8 7.7 19.2 C 8.9 19.8 10.1 20.1 11.3 20.1 C 11.7 20.1 11.8 20.1 11.9 20.1 C 12.4 19.9 12.7 19.5 12.9 19 C 12.9 18.9 12.9 18.5 12.9 18.3 C 12.8 18.2 12.7 17.9 12.6 17.8 C 12.3 17.4 12.2 17.2 12.2 16.8 C 12.2 16.5 12.2 16.4 12.3 16.1 C 12.5 15.7 12.9 15.5 13.3 15.4 C 13.4 15.3 13.5 15.3 14.6 15.3 C 15.9 15.3 16 15.3 16.4 15.2 C 17.6 14.9 18.6 14.2 19.3 13.2 C 20 12.1 20.2 11 20 9.6 C 19.7 7.3 18.3 5.3 16.2 4.1 C 15.1 3.5 13.8 3.1 12.5 2.9 C 12.2 2.9 11.3 2.9 11 2.9 Z M 9.5 4.8 C 10.2 5 10.6 5.7 10.5 6.4 C 10.5 6.7 10.4 7 10.1 7.3 C 9.4 8 8.2 7.7 7.8 6.9 C 7.7 6.7 7.7 6.5 7.7 6.3 C 7.6 6.1 7.7 5.9 7.8 5.7 C 8 5.2 8.3 4.9 8.8 4.8 C 9 4.8 9.3 4.8 9.5 4.8 Z M 14.2 4.8 C 14.8 4.9 15.2 5.4 15.3 5.9 C 15.4 6.1 15.3 6.4 15.3 6.6 C 15.2 6.9 15 7.2 14.8 7.4 C 14.1 7.9 13.2 7.7 12.7 7.1 C 12.3 6.5 12.4 5.7 12.8 5.2 C 13 5.1 13.2 4.9 13.4 4.9 C 13.7 4.8 14 4.8 14.2 4.8 Z M 6.4 8.6 C 7 8.7 7.5 9.1 7.6 9.7 C 7.7 9.9 7.7 10.2 7.6 10.4 C 7.4 11.4 6.3 11.8 5.4 11.3 C 5.2 11.1 5 10.8 4.8 10.5 C 4.8 10.3 4.8 10.3 4.8 10.1 C 4.8 9.8 4.8 9.8 4.8 9.6 C 4.9 9.4 5 9.2 5.2 9 C 5.5 8.7 6 8.6 6.4 8.6 Z M 17.1 8.7 C 17.4 8.7 17.6 8.8 17.8 9 C 18 9.2 18.1 9.4 18.2 9.6 C 18.2 9.8 18.2 9.8 18.2 10.1 C 18.2 10.3 18.2 10.3 18.2 10.5 C 18 10.8 17.8 11.1 17.6 11.3 C 16.7 11.8 15.6 11.4 15.4 10.4 C 15.3 10.2 15.3 9.9 15.4 9.7 C 15.5 9.1 16 8.7 16.5 8.6 C 16.7 8.6 17 8.6 17.1 8.7 Z M 17.1 8.7 "/>
-    </g>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_bottom.svg b/addons/website/static/src/img/snippets_options/pos_bottom.svg
deleted file mode 100644
index f4a839880543e0..00000000000000
--- a/addons/website/static/src/img/snippets_options/pos_bottom.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy_8" transform="translate(-240 -5)">
-      <g class="pos_bottom" transform="translate(240 5)">
-        <rect width="20" height="12" class="bg"/>
-        <polygon fill="#D8D8D8" points="9.426 2.444 6 2.444 6 5.556 9.426 5.556 9.426 8 14 4 9.426 0" class="o_graphic" transform="rotate(90 10 4)"/>
-        <rect width="16" height="1" x="2" y="10" fill="#D8D8D8" class="o_subdle"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_left.svg b/addons/website/static/src/img/snippets_options/pos_left.svg
deleted file mode 100644
index 446e392b13bc59..00000000000000
--- a/addons/website/static/src/img/snippets_options/pos_left.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy_8" transform="translate(-172 -5)">
-      <g class="pos_left" transform="translate(172 5)">
-        <rect width="20" height="12" class="bg"/>
-        <polygon fill="#D8D8D8" points="11.054 4.444 7 4.444 7 7.556 11.054 7.556 11.054 10 17 6 11.054 2" class="o_graphic" transform="matrix(-1 0 0 1 24 0)"/>
-        <rect width="1" height="12" x="4" fill="#D8D8D8" class="o_subdle"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_right.svg b/addons/website/static/src/img/snippets_options/pos_right.svg
deleted file mode 100644
index 8990d7cdaf27ac..00000000000000
--- a/addons/website/static/src/img/snippets_options/pos_right.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy_8" transform="translate(-138 -5)">
-      <g class="pos_right" transform="translate(138 5)">
-        <rect width="20" height="12" class="bg"/>
-        <polygon fill="#D8D8D8" points="7.054 4.444 3 4.444 3 7.556 7.054 7.556 7.054 10 13 6 7.054 2" class="o_graphic"/>
-        <rect width="1" height="12" x="15" fill="#D8D8D8" class="o_subdle"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/website/static/src/img/snippets_options/pos_top.svg b/addons/website/static/src/img/snippets_options/pos_top.svg
deleted file mode 100644
index df5adfe19be303..00000000000000
--- a/addons/website/static/src/img/snippets_options/pos_top.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
-  <g fill="none" fill-rule="evenodd" class="symbols">
-    <g class="3_buttons_copy_8" transform="translate(-204 -5)">
-      <g class="pos_top" transform="translate(204 5)">
-        <rect width="20" height="12" class="bg"/>
-        <polygon fill="#D8D8D8" points="9.426 5.444 6 5.444 6 8.556 9.426 8.556 9.426 11 14 7 9.426 3" class="o_graphic" transform="rotate(-90 10 7)"/>
-        <rect width="16" height="1" x="2" fill="#D8D8D8" class="o_subdle"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/addons/website/static/src/interactions/image_gallery.edit.js b/addons/website/static/src/interactions/image_gallery.edit.js
index ba521bb9353518..6e809ef4724575 100644
--- a/addons/website/static/src/interactions/image_gallery.edit.js
+++ b/addons/website/static/src/interactions/image_gallery.edit.js
@@ -4,7 +4,7 @@ import { registry } from "@web/core/registry";
 export class ImageGalleryEdit extends Interaction {
     static selector = ".s_image_gallery";
     static selectorNotHas =
-        "img, a.o_link_readonly, span.fa.object-fit-cover, div.media_iframe_video";
+        "img, a.o_link_readonly, span.oi.object-fit-cover, div.media_iframe_video";
     dynamicContent = {
         ".o_empty_gallery_alert": {
             "t-on-click": this.onAddImage.bind(this),
diff --git a/addons/website/static/src/interactions/image_gallery.edit.xml b/addons/website/static/src/interactions/image_gallery.edit.xml
index 47e4d92e2285ea..ec5f8d685fc73b 100644
--- a/addons/website/static/src/interactions/image_gallery.edit.xml
+++ b/addons/website/static/src/interactions/image_gallery.edit.xml
@@ -4,7 +4,7 @@
 <t t-name="website.empty_image_gallery_alert">
     <div class="container">
 	    <div class="alert alert-info o_empty_gallery_alert text-center o_not_editable" contentEditable="false">
-	        <i class="fa fa-plus-circle"/>
+	        <i class="oi" data-icon="add_circle"/>
 	        <span class="o_add_images"> Add Images</span>
 	    </div>
     </div>
diff --git a/addons/website/static/src/js/backend/view_hierarchy/hierarchy_navbar.xml b/addons/website/static/src/js/backend/view_hierarchy/hierarchy_navbar.xml
index fbacdf68cd27ad..80a8fa3d28a26f 100644
--- a/addons/website/static/src/js/backend/view_hierarchy/hierarchy_navbar.xml
+++ b/addons/website/static/src/js/backend/view_hierarchy/hierarchy_navbar.xml
@@ -19,7 +19,7 @@
         <div class="o_search input-group ms-auto col-8 col-sm-6 col-md-4 col-xl-3" role="search">
             <input type="search" name="search" class="form-control border-info" placeholder="Name, id or key" t-on-keydown="this.onInputKeydown" t-custom-ref="search"/>
             <button type="submit" class="btn btn-info" aria-label="Search" title="Search" t-on-click="this.onInputClick">
-                <i class="fa fa-search"/>
+                <i class="oi" data-icon="search"/>
             </button>
         </div>
     </nav>
diff --git a/addons/website/static/src/js/backend/view_hierarchy/view_hierarchy.xml b/addons/website/static/src/js/backend/view_hierarchy/view_hierarchy.xml
index 6d2f031ef5b325..320c43e009297e 100644
--- a/addons/website/static/src/js/backend/view_hierarchy/view_hierarchy.xml
+++ b/addons/website/static/src/js/backend/view_hierarchy/view_hierarchy.xml
@@ -13,7 +13,7 @@
                 <div t-if="this.siblingViews.length > 0" class="alert alert-info m-1 p-1">
                     Multiple tree exists for this view
                     <a t-foreach="this.siblingViews" t-as="siblingView" t-key="siblingView.id" href="#" class="o_load_hierarchy" t-on-click.stop.prevent="() => this.onShowHierarchy(siblingView.id)">
-                        <i class="oi oi-arrow-right me-1"/>
+                        <i class="oi me-1" data-icon="east"/>
                         <t t-out="siblingView.display_name"/>
                         &lt;<t t-out="siblingView.key"/>&gt;
                         <t t-if="siblingView.website_id">
@@ -30,18 +30,18 @@
 <t t-name="website.report_viewhierarchy_children">
     <p t-on-click="() => this.onCollapseClick(viewTree)"
     t-attf-class="o_tree_entry mb-0 d-flex align-items-center {{viewTree.active ? '': 'text-muted fw-normal'}} {{viewTree.inherit_children.length ? 'o_has_child' : ''}} {{this.state.searchedView.id === viewTree.id ? 'o_search_found border border-info rounded px-2': ''}}">
-        <i t-if="this.hasChildToUnfold(viewTree)" t-attf-class="js_fold o_fold_icon fa {{ viewTree.collapsed ? 'fa-plus-square-o' : 'fa-minus-square-o' }} me-1"/>
-        <i t-if="viewTree.arch_updated" class="fa fa-pencil-square me-1 o_text_pink" title="This view arch has been modified"/>
+        <i t-if="this.hasChildToUnfold(viewTree)" t-attf-class="js_fold o_fold_icon oi me-1" t-attf-data-icon="{{ viewTree.collapsed ? 'add_box' : 'indeterminate_check_box' }}"/>
+        <i t-if="viewTree.arch_updated" class="oi oi-filled me-1 o_text_pink" data-icon="edit_square" title="This view arch has been modified"/>
         <!-- Yellow bg to highlight requested view as google does -->
         <span class="js_fold" t-att-style="this.viewId === viewTree.id ? 'background-color: yellow': ''">
             <t t-out="viewTree.name"/> (<span class="fw-bold" t-out="viewTree.key"/>)
             <span class="o_text_orange" t-if="viewTree.website_name" t-out="`[${viewTree.website_name}]`"/>
         </span>
         <a href="#" t-on-click.stop.prevent="() => this.openFormView(viewTree.id)">
-            <i class="fa fa-eye ms-2 text-muted" title="Go to View"/>
+            <i class="oi ms-2 text-muted" data-icon="visibility" title="Go to View"/>
         </a>
         <a class="o_show_diff" href="#" t-on-click.stop.prevent="() => this.onShowDiffClick(viewTree.id)">
-            <i class="fa fa-files-o ms-2 text-muted" title="Show Arch Diff"/>
+            <i class="oi ms-2 text-muted" data-icon="content_copy" title="Show Arch Diff"/>
         </a>
         <t t-if="this.state.searchedView.id === viewTree.id">
             <span class="o_tab_hint text-info ms-auto small fst-italic pe-2">Press &lt;Tab&gt; for next [<t t-out="this.state.searchedView.index+1"/>/<t t-out="this.state.searchedView.total"/>]</span>
diff --git a/addons/website/static/src/js/content/auto_hide_menu.js b/addons/website/static/src/js/content/auto_hide_menu.js
index 897a0e458d1536..ba7cc7d4a7a92e 100644
--- a/addons/website/static/src/js/content/auto_hide_menu.js
+++ b/addons/website/static/src/js/content/auto_hide_menu.js
@@ -267,7 +267,8 @@ async function autoHideMenu(el, options) {
         dropdownMenu.className = "dropdown-menu";
         extraItemsToggle.className = "nav-item dropdown o_extra_menu_items";
         extraItemsToggle.setAttribute("role", "presentation");
-        extraItemsToggleIcon.className = "oi oi-plus";
+        extraItemsToggleIcon.className = "oi";
+        extraItemsToggleIcon.dataset.icon = "add";
         const extraItemsToggleAriaLabel = el.closest("[data-extra-items-toggle-aria-label]")
             ?.dataset.extraItemsToggleAriaLabel;
         Object.entries({
diff --git a/addons/website/static/src/js/tours/tour_utils.js b/addons/website/static/src/js/tours/tour_utils.js
index 2d6c33486d25f0..8e6c934aa46619 100644
--- a/addons/website/static/src/js/tours/tour_utils.js
+++ b/addons/website/static/src/js/tours/tour_utils.js
@@ -464,7 +464,7 @@ export function unfoldOptionsGroup(name) {
     return [
         {
             content: `Unfold the "${name}" group`,
-            trigger: `.options-container[data-container-title="${name}"] .options-container-label i.fa-caret-right`,
+            trigger: `.options-container[data-container-title="${name}"] .options-container-label i[data-icon='arrow_right']`,
             run: "click",
         },
     ];
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 235dbc7f8c5040..0b58cc532234e4 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -187,7 +187,7 @@ $-editor-messages-margin-x: 2%;
 }
 
 // fontawesome
-#wrap.o_savable .fa {
+#wrap.o_savable .oi {
     cursor: pointer;
 }
 
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index 2e0042fd630e50..ed12b9d468cb8f 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -23,8 +23,10 @@ $o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
             transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
 
             &:after {
-                content: "\f057"; // fa-times-circle
-                font-family: 'FontAwesome';
+                --o-mi-fill: 1;
+
+                content: "cancel";
+                font-family: 'material_symbols_sharp';
                 color: white;
                 transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
             }
@@ -34,7 +36,9 @@ $o-we-switch-inactive-color: rgba($text-muted, 0.4) !default;
             background: $o-brand-primary;
 
             &:after {
-                content: "\f058"; // fa-check-circle
+                --o-mi-fill: 1;
+
+                content: "check_circle";
                 margin-left: ($o-we-switch-size * 1.7) - $o-we-switch-size;
             }
         }
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 30b884706e54b8..872474e3846f2f 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -534,8 +534,8 @@ $-navbar-mobile-bg-color: o-color('menu-custom') or o-color('menu');
             &:after {
                 height: 100%;
                 background: none;
-                font-family: 'odoo_ui_icons';
-                content: '\e839';
+                font-family: 'material_symbols_sharp';
+                content: 'keyboard_arrow_down';
             }
         }
     }
@@ -736,10 +736,7 @@ font[class*='bg-'] {
     object-fit: cover;
 }
 // Icons
-.fa {
-    font-family: "FontAwesome" !important;
-}
-.fa, .social_media_img {
+.fa, .oi, .social_media_img {
     $-size: map-get($spacers, 5);
 
     &.rounded-circle,
@@ -751,12 +748,12 @@ font[class*='bg-'] {
         display: inline-block;
         vertical-align: middle;
         text-align: center;
-        // fa-1x is not ouput
+        // oi-1x is not ouput
         width: $-size;
         height: $-size;
         line-height: $-size;
         @for $i from 2 through 5 {
-            &.fa-#{$i}x {
+            &.fa-#{$i}x, &.oi-#{$i}x {
                 width: $-size + $i;
                 height: $-size + $i;
                 line-height: $-size + $i;
@@ -1090,7 +1087,7 @@ $-o-carousel-controllers-size: var(--CarouselControllers-size, #{map-get($spacer
         background-image: none;
         color: $body-color;
         &:before {
-            font-family: "FontAwesome";
+            font-family: 'material_symbols_sharp';
             display: inline-block;
             background-color: #fff;
         }
@@ -1118,8 +1115,8 @@ $-o-carousel-controllers-size: var(--CarouselControllers-size, #{map-get($spacer
     // Default
     &.s_carousel_default {
         // Controls - chevron
-        .carousel-control-prev-icon:before { content: "\f053" #{"/*rtl:'\f054'*/"}; margin-left: 1.5rem; }
-        .carousel-control-next-icon:before { content: "\f054" #{"/*rtl:'\f053'*/"}; margin-right: 1.5rem; }
+        .carousel-control-prev-icon:before { content: "chevron_left" #{"/*rtl:'chevron_right'*/"}; margin-left: 1.5rem; }
+        .carousel-control-next-icon:before { content: "chevron_right" #{"/*rtl:'chevron_left'*/"}; margin-right: 1.5rem; }
         .carousel-control-prev-icon:before,
         .carousel-control-next-icon:before {
             background-color: rgba(0,0,0,0);
@@ -1144,8 +1141,8 @@ $-o-carousel-controllers-size: var(--CarouselControllers-size, #{map-get($spacer
             border: 0.5rem solid rgba(0,0,0,0);
         }
         // Controls - caret
-        .carousel-control-prev-icon:before { content: "\f0d9"; }
-        .carousel-control-next-icon:before { content: "\f0da"; }
+        .carousel-control-prev-icon:before { content: "arrow_left"; }
+        .carousel-control-next-icon:before { content: "arrow_right"; }
         .carousel-control-prev-icon:before,
         .carousel-control-next-icon:before {
             width: 2rem;
@@ -1170,8 +1167,8 @@ $-o-carousel-controllers-size: var(--CarouselControllers-size, #{map-get($spacer
         // Controls - arrow
         .carousel-control-prev { margin-left: 1.5rem; }
         .carousel-control-next { margin-right: 1.5rem; }
-        .carousel-control-prev-icon:before { content: "\f060"; }
-        .carousel-control-next-icon:before { content: "\f061"; }
+        .carousel-control-prev-icon:before { content: "arrow_back"; }
+        .carousel-control-next-icon:before { content: "arrow_forward"; }
         .carousel-control-prev-icon:before,
         .carousel-control-next-icon:before {
             width: 4rem;
@@ -1203,8 +1200,8 @@ $-o-carousel-controllers-size: var(--CarouselControllers-size, #{map-get($spacer
         }
         .carousel-control-prev { margin-left: 3rem; }
         .carousel-control-next { margin-right: 3rem; }
-        .carousel-control-prev-icon:before { content: "\f104"; }
-        .carousel-control-next-icon:before { content: "\f105"; }
+        .carousel-control-prev-icon:before { content: "keyboard_arrow_left"; }
+        .carousel-control-next-icon:before { content: "keyboard_arrow_right"; }
         .carousel-control-prev-icon:before,
         .carousel-control-next-icon:before {
             width: 2rem;
@@ -2054,9 +2051,9 @@ header {
     }
 
     .o_mega_menu_toggle::after {
-        content: '\e83b';
+        content: 'chevron_forward';
         border: none;
-        font-family: 'odoo_ui_icons';
+        font-family: 'material_symbols_sharp';
     }
 
     .o_mega_menu_left .o_mega_menu {
@@ -3377,7 +3374,7 @@ input[value*="data-oe-translation-source-sha"] {
         font-size: 0.875em;
     }
     a {
-        .fa-stack{
+        .fa-stack, .oi-stack {
             /*
             Ensures consistent size and padding around icons when the
             layout is set to "none" and the size is "huge" or "large".
@@ -3386,7 +3383,7 @@ input[value*="data-oe-translation-source-sha"] {
             s_social_media/000.scss and s_share/000.scss).
             */
             @for $i from 2 through 3 {
-                &.fa-#{$i}x {
+                &.fa-#{$i}x, &.oi-#{$i}x {
                     width: $-size + $i;
                     height: $-size + $i;
                     line-height: $-size + $i;
diff --git a/addons/website/static/src/snippets/s_accordion/000.scss b/addons/website/static/src/snippets/s_accordion/000.scss
index 499f92e1a85e10..ab03f11135e891 100644
--- a/addons/website/static/src/snippets/s_accordion/000.scss
+++ b/addons/website/static/src/snippets/s_accordion/000.scss
@@ -14,9 +14,9 @@
         &:after {
             margin: 0;
             background: none;
-            font-family: 'odoo_ui_icons';
+            font-family: 'material_symbols_sharp';
             text-align: center;
-            content: '\e839';
+            content: 'keyboard_arrow_down';
         }
     }
 
diff --git a/addons/website/static/src/snippets/s_badge/000.scss b/addons/website/static/src/snippets/s_badge/000.scss
index ad469ab2157b56..38715e945f6a1d 100644
--- a/addons/website/static/src/snippets/s_badge/000.scss
+++ b/addons/website/static/src/snippets/s_badge/000.scss
@@ -4,7 +4,7 @@
     margin: $s-badge-margin;
     border-radius: if($s-badge-border-radius != null, $s-badge-border-radius, $badge-border-radius);
 
-    .fa {
+    .fa, .oi {
         margin: $s-badge-i-margin;
     }
 }
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
index 9daca171640d37..60392775c21002 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
@@ -3,13 +3,13 @@
     <t t-name="website.s_dynamic_snippet.carousel.arrows">
         <div class="o_carousel_arrow_wrap align-items-center pe-none">
             <a t-attf-href="##{unique_id}" class="carousel-control-prev position-relative pe-auto" data-bs-slide="prev" role="button" aria-label="Previous" title="Previous">
-                <span class="o_carousel_arrow oi oi-chevron-left p-3"/>
+                <span class="o_carousel_arrow oi p-3" data-icon="chevron_backward"/>
                 <span class="visually-hidden">Previous</span>
             </a>
         </div>
         <div class="o_carousel_arrow_wrap align-items-center justify-content-end pe-none">
             <a t-attf-href="##{unique_id}" class="carousel-control-next position-relative pe-auto" data-bs-slide="next" role="button" aria-label="Next" title="Next">
-                <span class="o_carousel_arrow oi oi-chevron-right p-3"/>
+                <span class="o_carousel_arrow oi p-3" data-icon="chevron_forward"/>
                 <span class="visually-hidden">Next</span>
             </a>
         </div>
diff --git a/addons/website/static/src/snippets/s_faq_collapse/000.scss b/addons/website/static/src/snippets/s_faq_collapse/000.scss
index ae902accb056b1..2ffaccc9ed2c7b 100644
--- a/addons/website/static/src/snippets/s_faq_collapse/000.scss
+++ b/addons/website/static/src/snippets/s_faq_collapse/000.scss
@@ -10,14 +10,14 @@
             border-radius: 0;
             outline: none;
             &:before {
-                content: '\f056';
-                font-family: 'FontAwesome';
+                content: 'remove_circle';
+                font-family: 'material_symbols_sharp';
                 color: $gray-600;
                 position: absolute;
                 margin-left: -1.5em;
             }
             &.collapsed:before {
-                content: '\f055';
+                content: 'remove_circle';
             }
             &:hover,
             &:focus {
diff --git a/addons/website/static/src/snippets/s_floating_blocks/floating_blocks.edit.xml b/addons/website/static/src/snippets/s_floating_blocks/floating_blocks.edit.xml
index 4c7b83390fe9ab..eb8c26561948c9 100644
--- a/addons/website/static/src/snippets/s_floating_blocks/floating_blocks.edit.xml
+++ b/addons/website/static/src/snippets/s_floating_blocks/floating_blocks.edit.xml
@@ -4,7 +4,7 @@
     <t t-name="website.s_floating_blocks.alert.empty">
         <div class="container">
             <div role="dialog" class="s_floating_blocks_alert_empty alert alert-info mx-auto text-center" style="width: var(--breakpoint-sm)" aria-label="Floating blocks alert">
-                <i class="fa fa-plus-circle"/>
+                <i class="oi" data-icon="add_circle"/>
                 <span class="o_add_images"> Add Cards</span><br />
                 <small><strong>TIP:</strong> You need at least two cards to perform the effect</small>
             </div>
diff --git a/addons/website/static/src/snippets/s_image_gallery/001.scss b/addons/website/static/src/snippets/s_image_gallery/001.scss
index 9684b1963505c1..b89b6a01ecd9ec 100644
--- a/addons/website/static/src/snippets/s_image_gallery/001.scss
+++ b/addons/website/static/src/snippets/s_image_gallery/001.scss
@@ -177,7 +177,7 @@
             .carousel {
                 .carousel-control-prev {
                     .fa:before {
-                        content: "\f104";
+                        content: "keyboard_arrow_left";
                     }
                     .oi:before, .fa:before {
                         padding-right: 2px;
@@ -185,7 +185,7 @@
                 }
                 .carousel-control-next {
                     .fa:before {
-                        content: "\f105";
+                        content: "keyboard_arrow_right";
                     }
                     .oi:before, .fa:before {
                         padding-left: 2px;
@@ -214,12 +214,10 @@
         &.s_image_gallery_indicators_arrows_rounded {
             .carousel {
                 .carousel-control-prev {
-                    .fa:before { content: "\f060"; }
-                    .oi:before { content: "\e842"; }
+                    .oi:before { content: "arrow_back"; }
                 }
                 .carousel-control-next {
-                    .fa:before { content: "\f061"; }
-                    .oi:before { content: "\e843"; }
+                    .oi:before { content: "arrow_forward"; }
                 }
                 .carousel-control-prev,
                 .carousel-control-next {
diff --git a/addons/website/static/src/snippets/s_product_list/000.scss b/addons/website/static/src/snippets/s_product_list/000.scss
index dd239342cb81ea..354c1a2d4cfb2e 100644
--- a/addons/website/static/src/snippets/s_product_list/000.scss
+++ b/addons/website/static/src/snippets/s_product_list/000.scss
@@ -34,7 +34,7 @@
                     font-size: 12px;
                 }
 
-                .fa {
+                .fa, .oi {
                     @include font-size(18px);
                     padding-right: 5px;
 
diff --git a/addons/website/static/src/snippets/s_searchbar/000.xml b/addons/website/static/src/snippets/s_searchbar/000.xml
index ff23cff9f89914..90771133e93f70 100644
--- a/addons/website/static/src/snippets/s_searchbar/000.xml
+++ b/addons/website/static/src/snippets/s_searchbar/000.xml
@@ -19,7 +19,7 @@
         <div class="d-flex align-items-center flex-wrap o_search_result_item">
             <t t-if="widget.displayImage">
                 <img t-if="result['image_url']" t-att-src="result['image_url']" class="flex-shrink-0 o_image_64_contain"/>
-                <i t-else="" t-attf-class="o_image_64_contain text-center pt16 fa #{result['_fa']}" style="font-size: 34px;"/>
+                <i t-else="" class="o_image_64_contain text-center pt16 oi" t-att-data-icon="result['_icon']" style="font-size: 34px;"/>
             </t>
             <div class="o_search_result_item_detail px-3">
                 <t t-set="description" t-value="parts['description'] and widget.displayDescription and result['description']"/>
diff --git a/addons/website/static/src/snippets/s_share/000.scss b/addons/website/static/src/snippets/s_share/000.scss
index ea60ceea209f77..8ba57e36727aa5 100644
--- a/addons/website/static/src/snippets/s_share/000.scss
+++ b/addons/website/static/src/snippets/s_share/000.scss
@@ -3,7 +3,7 @@
     user-select: none;
     // Default icon size used by the builder RangeWithNumberInput control
     // Inherit to icons so the option panel reads 40px initially
-    --fa-icon-size: 40px;
+    --oi-icon-size: 40px;
     $-size: map-get($spacers, 5);
     > * {
         display: inline-block;
@@ -13,7 +13,7 @@
         margin: 0 .4rem 0 0;
     }
     a {
-        i.fa, .social_media_img {
+        i.fa, i.oi, .social_media_img {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -21,21 +21,22 @@
             &.o_sm_custom_size {
                 // Always scale the icon glyph size, regardless of layout
                 // Keep roughly the default 16px glyph for a 40px disk (0.4 ratio)
-                font-size: calc(var(--fa-icon-size) * 0.4) !important;
+                font-size: calc(var(--oi-icon-size) * 0.4) !important;
             }
             // For non-stack layouts, also control the visual container
-            &.o_sm_custom_size:not(.fa-stack) {
-                width: var(--fa-icon-size) !important;
-                height: var(--fa-icon-size) !important;
-                line-height: var(--fa-icon-size) !important;
+            &.o_sm_custom_size:not(.fa-stack):not(.oi-stack) {
+                width: var(--oi-icon-size) !important;
+                height: var(--oi-icon-size) !important;
+                line-height: var(--oi-icon-size) !important;
             }
             &[class*="o_cc"] {
                 background-color: var(--o-cc-bg);
             }
-            &:not(.small_social_icon, .fa-2x, .fa-3x, .fa-4x, .fa-5x) {
+            &:not(.small_social_icon, .fa-2x, .fa-3x, .fa-4x, .fa-5x, .oi-2x, .oi-3x, .oi-4x, .oi-5x) {
                 &.rounded-circle,
                 &.rounded,
-                &.fa-stack {
+                &.fa-stack,
+                &.oi-stack {
                     width: $-size - .5rem;
                     height: $-size - .5rem;
                 }
diff --git a/addons/website/static/src/snippets/s_social_media/000.scss b/addons/website/static/src/snippets/s_social_media/000.scss
index 5d7f4fa093b5a2..51b8dfaedfbf2d 100644
--- a/addons/website/static/src/snippets/s_social_media/000.scss
+++ b/addons/website/static/src/snippets/s_social_media/000.scss
@@ -3,7 +3,7 @@
     user-select: none;
     // Default icon size used by the builder RangeWithNumberInput control
     // Inherit to icons so the option panel reads 40px initially
-    --fa-icon-size: 40px;
+    --oi-icon-size: 40px;
     $-size: map-get($spacers, 5);
     > * {
         display: inline-block;
@@ -13,7 +13,7 @@
         margin: 0 .4rem 0 0;
     }
     a {
-        i.fa, span.fa, .social_media_img {
+        i.fa, span.fa, i.oi, span.oi, .social_media_img {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -21,21 +21,22 @@
             &.o_sm_custom_size {
                 // Always scale the icon glyph size, regardless of layout
                 // Keep roughly the default 16px glyph for a 40px disk (0.4 ratio)
-                font-size: calc(var(--fa-icon-size) * 0.4) !important;
+                font-size: calc(var(--oi-icon-size) * 0.4) !important;
             }
             // For non-stack layouts, also control the visual container
-            &.o_sm_custom_size:not(.fa-stack) {
-                width: var(--fa-icon-size) !important;
-                height: var(--fa-icon-size) !important;
-                line-height: var(--fa-icon-size) !important;
+            &.o_sm_custom_size:not(.oi-stack) {
+                width: var(--oi-icon-size) !important;
+                height: var(--oi-icon-size) !important;
+                line-height: var(--oi-icon-size) !important;
             }
             &[class*="o_cc"] {
                 background-color: var(--o-cc-bg);
             }
-            &:not(.small_social_icon, .fa-2x, .fa-3x, .fa-4x, .fa-5x) {
+            &:not(.small_social_icon, .fa-2x, .fa-3x, .fa-4x, .fa-5x, .oi-2x, .oi-3x, .oi-4x, .oi-5x) {
                 &.rounded-circle,
                 &.rounded,
-                &.fa-stack {
+                &.fa-stack,
+                &.oi-stack {
                     width: $-size - .5rem;
                     height: $-size - .5rem;
                 }
diff --git a/addons/website/static/src/xml/website_form.xml b/addons/website/static/src/xml/website_form.xml
index 05e501520f2a3e..b2a616aad93e45 100644
--- a/addons/website/static/src/xml/website_form.xml
+++ b/addons/website/static/src/xml/website_form.xml
@@ -4,21 +4,21 @@
     <!-- Success status -->
     <t t-name="website.s_website_form_status_success">
         <span id="s_website_form_result" class="me-2 small text-success">
-            <i class="fa fa-paper-plane me-1" role="img" aria-hidden="true" title="Success"/>The form has been sent successfully.
+            <i class="oi oi-filled me-1" data-icon="send" role="img" aria-hidden="true" title="Success"/>The form has been sent successfully.
         </span>
     </t>
 
     <!-- Error status -->
     <t t-name="website.s_website_form_status_error">
         <span id="s_website_form_result" class="me-2 small text-danger">
-            <i class="fa fa-close me-1" role="img" aria-hidden="true" title="Error"/>
+            <i class="oi me-1" data-icon="close" role="img" aria-hidden="true" title="Error"/>
             <t t-out="message"/>
         </span>
     </t>
 
     <t t-name="website.s_website_form_status_custom_error">
         <span class="s_website_form_custom_error me-2 small text-danger">
-            <i class="fa fa-close me-1" role="presentation"/>
+            <i class="oi me-1" data-icon="close" role="presentation"/>
             <t t-out="message"/>
         </span>
     </t>
@@ -28,7 +28,7 @@
         <div class="o_file_block col-4">
             <div class="o_file_wrap mb-1 px-2 py-1">
                 <div class="o_file_name d-inline-block w-75 pt-1" t-att-title="this.fileName" t-out="this.fileName"/>
-                <i class="o_file_delete fa fa-times mt-1 float-end"/>
+                <i class="o_file_delete oi mt-1 float-end" data-icon="close"/>
             </div>
         </div>
     </t>
diff --git a/addons/website/static/src/xml/website_form_editor.xml b/addons/website/static/src/xml/website_form_editor.xml
index 94ee29f7b18baa..2f9c66f53b1872 100644
--- a/addons/website/static/src/xml/website_form_editor.xml
+++ b/addons/website/static/src/xml/website_form_editor.xml
@@ -6,7 +6,7 @@
         <div class="s_website_form_end_message d-none">
             <div class="oe_structure">
                 <section class="s_text_block o_colored_level rounded px-5 text-center" data-snippet="s_text_block">
-                    <i class="fa fa-paper-plane fa-2x mb-3 rounded-circle text-bg-success" role="img" aria-hidden="true" title="Success"/>
+                    <i class="oi oi-filled oi-2x mb-3 rounded-circle text-bg-success" data-icon="send" role="img" aria-hidden="true" title="Success"/>
                     <h1 class="fw-bolder">Thank you for your feedback!</h1>
                     <p class="lead mb-0">Our team will message you back as soon as possible.</p>
                     <p class="lead">In the meantime we invite you to visit our <a class="o_translate_inline" href="/">website</a>.</p>
@@ -188,7 +188,7 @@
                         t-att-placeholder="field.placeholder"
                         t-att-id="field.id"
                 />
-                <div class="input-group-text o_input_group_date_icon"><i class="fa fa-calendar"></i></div>
+                <div class="input-group-text o_input_group_date_icon"><i class="oi oi-filled" data-icon="calendar_today"></i></div>
             </div>
         </t>
     </t>
@@ -206,7 +206,7 @@
                         t-att-placeholder="field.placeholder"
                         t-att-id="field.id"
                 />
-                <div class="input-group-text o_input_group_date_icon"><i class="fa fa-calendar"></i></div>
+                <div class="input-group-text o_input_group_date_icon"><i class="oi oi-filled" data-icon="calendar_today"></i></div>
             </div>
         </t>
     </t>
diff --git a/addons/website/static/tests/builder/custom_tab/builder_components/website_colorpicker.test.js b/addons/website/static/tests/builder/custom_tab/builder_components/website_colorpicker.test.js
index a64b840f592b77..c14d37e4d50483 100644
--- a/addons/website/static/tests/builder/custom_tab/builder_components/website_colorpicker.test.js
+++ b/addons/website/static/tests/builder/custom_tab/builder_components/website_colorpicker.test.js
@@ -33,7 +33,7 @@ test("should remove o_cc color on reset", async () => {
     await contains(":iframe .test-options-target").click();
     expect(".options-container").toBeDisplayed();
     await contains(".we-bg-options-container .o_we_color_preview").click();
-    await click(".o-overlay-item .fa-trash");
+    await click(".o-overlay-item [data-icon='delete'].oi-filled");
     await animationFrame();
     expect(":iframe .test-options-target").toHaveClass("test-options-target");
     expect(":iframe .test-options-target").not.toHaveClass("o_cc o_cc3");
diff --git a/addons/website/static/tests/builder/custom_tab/container_buttons.test.js b/addons/website/static/tests/builder/custom_tab/container_buttons.test.js
index 039c19e2bd5bc7..073dfb09d726ec 100644
--- a/addons/website/static/tests/builder/custom_tab/container_buttons.test.js
+++ b/addons/website/static/tests/builder/custom_tab/container_buttons.test.js
@@ -336,7 +336,8 @@ test("applying option container button should wait for actions in progress", asy
         getButtons(target) {
             return [
                 {
-                    class: "test_button fa fa-shield",
+                    class: "test_button oi",
+                    icon: "security",
                     title: "Test",
                     handler: () => {
                         target.classList.add("overlayButton");
diff --git a/addons/website/static/tests/builder/image_shape.test.js b/addons/website/static/tests/builder/image_shape.test.js
index 62db5f4a054f69..ec50b7d18a0270 100644
--- a/addons/website/static/tests/builder/image_shape.test.js
+++ b/addons/website/static/tests/builder/image_shape.test.js
@@ -256,7 +256,7 @@ describe("flip shape axis", () => {
             "html_builder/geometric/geo_tetris"
         );
 
-        await contains(`[data-action-id="flipImageShape"]:has(.oi-arrows-h)`).click();
+        await contains(`[data-action-id="flipImageShape"]:has([data-icon="arrow_range"])`).click();
         // ensure the shape action has been applied
         await editor.shared.operation.next(() => {});
 
@@ -280,8 +280,8 @@ describe("flip shape axis", () => {
             "html_builder/geometric/geo_tetris"
         );
 
-        await contains(`[data-action-id="flipImageShape"]:has(.oi-arrows-h)`).click();
-        await contains(`[data-action-id="flipImageShape"]:has(.oi-arrows-h)`).click();
+        await contains(`[data-action-id="flipImageShape"]:has([data-icon="arrow_range"])`).click();
+        await contains(`[data-action-id="flipImageShape"]:has([data-icon="arrow_range"])`).click();
         // ensure the shape action has been applied
         await editor.shared.operation.next(() => {});
 
@@ -305,7 +305,7 @@ describe("flip shape axis", () => {
             "html_builder/geometric/geo_tetris"
         );
 
-        await contains(`[data-action-id="flipImageShape"]:has(.oi-arrows-v)`).click();
+        await contains(`[data-action-id="flipImageShape"]:has([data-icon="height"])`).click();
         // ensure the shape action has been applied
         await editor.shared.operation.next(() => {});
 
@@ -329,8 +329,8 @@ describe("flip shape axis", () => {
             "html_builder/geometric/geo_tetris"
         );
 
-        await contains(`[data-action-id="flipImageShape"]:has(.oi-arrows-h)`).click();
-        await contains(`[data-action-id="flipImageShape"]:has(.oi-arrows-v)`).click();
+        await contains(`[data-action-id="flipImageShape"]:has([data-icon="arrow_range"])`).click();
+        await contains(`[data-action-id="flipImageShape"]:has([data-icon="height"])`).click();
         // ensure the shape action has been applied
         await editor.shared.operation.next(() => {});
 
@@ -356,7 +356,7 @@ describe("rotate shape", () => {
             "html_builder/geometric/geo_tetris"
         );
 
-        await contains(`[data-action-id="rotateImageShape"]:has(.fa-rotate-left)`).click();
+        await contains(`[data-action-id="rotateImageShape"]:has([data-icon="undo"])`).click();
         // ensure the shape action has been applied
         await waitSidebarUpdated();
         expect(`:iframe .test-options-target img`).toHaveAttribute("data-shape-rotate", "270");
@@ -379,8 +379,8 @@ describe("rotate shape", () => {
             "html_builder/geometric/geo_tetris"
         );
 
-        await contains(`[data-action-id="rotateImageShape"]:has(.fa-rotate-left)`).click();
-        await contains(`[data-action-id="rotateImageShape"]:has(.fa-rotate-right)`).click();
+        await contains(`[data-action-id="rotateImageShape"]:has([data-icon="undo"])`).click();
+        await contains(`[data-action-id="rotateImageShape"]:has([data-icon="redo"])`).click();
         // ensure the shape action has been applied
         await editor.shared.operation.next(() => {});
 
@@ -405,7 +405,7 @@ describe("rotate shape", () => {
             "html_builder/geometric/geo_tetris"
         );
 
-        await contains(`[data-action-id="rotateImageShape"]:has(.fa-rotate-right)`).click();
+        await contains(`[data-action-id="rotateImageShape"]:has([data-icon="redo"])`).click();
         // ensure the shape action has been applied
         await editor.shared.operation.next(() => {});
 
@@ -793,8 +793,8 @@ test("Should reset shape transformation with reset button and when switching sha
     expect(imgSelector).not.toHaveAttribute("data-shape-flip");
     expect(imgSelector).not.toHaveAttribute("data-shape-rotate");
 
-    await contains(`[data-action-id="flipImageShape"]:has(.oi-arrows-h)`).click();
-    await contains(`[data-action-id="rotateImageShape"]:has(.fa-rotate-right)`).click();
+    await contains(`[data-action-id="flipImageShape"]:has([data-icon="arrow_range"])`).click();
+    await contains(`[data-action-id="rotateImageShape"]:has([data-icon="redo"])`).click();
     await waitSidebarUpdated();
 
     expect(imgSelector).toHaveAttribute("data-shape-flip", "x");
diff --git a/addons/website/static/tests/builder/invisibility_options.test.js b/addons/website/static/tests/builder/invisibility_options.test.js
index 53f54aaf79b452..d6e4b1f43ccd04 100644
--- a/addons/website/static/tests/builder/invisibility_options.test.js
+++ b/addons/website/static/tests/builder/invisibility_options.test.js
@@ -140,8 +140,8 @@ test("hide on mobile and toggle mobile view", async () => {
     await contains("button[data-action-id='toggleDeviceVisibility']:last").click();
     await contains("button[data-action='mobile']").click();
     expect(":iframe .col-lg-3").not.toHaveClass("o_snippet_override_invisible");
-    expect(queryOne(".o_we_invisible_el_panel .o_we_invisible_entry i")).toHaveClass(
-        "fa-eye-slash"
+    expect(queryOne(".o_we_invisible_el_panel .o_we_invisible_entry i")).toHaveAttribute("data-icon",
+        "visibility_off"
     );
 
     await contains("button[data-action='mobile']").click();
@@ -156,12 +156,12 @@ test("Hide element conditionally", async () => {
     await contains("div[data-action-id='forceVisible']:contains(Conditionally)").click();
     expect(":iframe section").toHaveClass("o_snippet_invisible");
     expect(".o_we_invisible_el_panel .o_we_invisible_entry").toHaveCount(1);
-    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveClass("fa-eye");
+    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveAttribute("data-icon", "visibility");
 
     await contains(".o_we_invisible_el_panel .o_we_invisible_entry").click();
     expect(":iframe section.o_snippet_invisible").toHaveClass("o_conditional_hidden");
     expect(":iframe section").toHaveAttribute("data-invisible", "1");
-    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveClass("fa-eye-slash");
+    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveAttribute("data-icon", "visibility_off");
 
     await contains(".o_we_invisible_el_panel .o_we_invisible_entry").click();
     expect(":iframe section.o_snippet_invisible").not.toHaveClass("o_conditional_hidden");
@@ -180,17 +180,17 @@ test("Show conditionally hidden elements should not be tracked in history", asyn
     await contains("div[data-action-id='forceVisible']:contains(Conditionally)").click();
     expect(":iframe section").toHaveClass("o_snippet_invisible");
     expect(".o_we_invisible_el_panel .o_we_invisible_entry").toHaveCount(1);
-    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveClass("fa-eye");
+    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveAttribute("data-icon", "visibility");
 
     await contains(".o_we_invisible_el_panel .o_we_invisible_entry").click();
     expect(":iframe section.o_snippet_invisible").toHaveClass("o_conditional_hidden");
     expect(":iframe section").toHaveAttribute("data-invisible", "1");
-    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveClass("fa-eye-slash");
+    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveAttribute("data-icon", "visibility_off");
 
     setSelection({ anchorNode: queryOne(":iframe p:not([data-selection-placeholder])"), anchorOffset: 1 });
     await insertText(getEditor(), "x"); // something to undo
     undo(getEditor());
     expect(":iframe section.o_snippet_invisible").toHaveClass("o_conditional_hidden");
     expect(":iframe section").toHaveAttribute("data-invisible", "1");
-    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveClass("fa-eye-slash");
+    expect(".o_we_invisible_el_panel .o_we_invisible_entry i").toHaveAttribute("data-icon", "visibility_off");
 });
diff --git a/addons/website/static/tests/builder/invisible_elements.test.js b/addons/website/static/tests/builder/invisible_elements.test.js
index 05bb17e6c4f4d0..98f6bedd5c3e78 100644
--- a/addons/website/static/tests/builder/invisible_elements.test.js
+++ b/addons/website/static/tests/builder/invisible_elements.test.js
@@ -24,14 +24,14 @@ test("click on invisible elements in the invisible elements tab (check eye icon)
     expect(queryOne(".o_we_invisible_el_panel .o_we_invisible_entry")).toHaveText(
         "Invisible Element"
     );
-    expect(queryOne(".o_we_invisible_el_panel .o_we_invisible_entry i")).toHaveClass(
-        "fa-eye-slash"
+    expect(queryOne(".o_we_invisible_el_panel .o_we_invisible_entry i")).toHaveAttribute("data-icon",
+        "visibility_off"
     );
     await contains(".o_we_invisible_el_panel .o_we_invisible_entry").click();
-    expect(queryOne(".o_we_invisible_el_panel .o_we_invisible_entry i")).toHaveClass("fa-eye");
+    expect(queryOne(".o_we_invisible_el_panel .o_we_invisible_entry i")).toHaveAttribute("data-icon", "visibility");
     await contains(".o_we_invisible_el_panel .o_we_invisible_entry").click();
-    expect(queryOne(".o_we_invisible_el_panel .o_we_invisible_entry i")).toHaveClass(
-        "fa-eye-slash"
+    expect(queryOne(".o_we_invisible_el_panel .o_we_invisible_entry i")).toHaveAttribute("data-icon",
+        "visibility_off"
     );
 });
 
@@ -86,11 +86,11 @@ test("Add an element on the invisible elements tab", async () => {
         ".o_add_snippet_dialog .o_add_snippet_iframe:iframe .o_snippet_preview_wrap"
     ).click();
     await waitForEndOfOperation();
-    expect(".o_we_invisible_el_panel .o_we_invisible_entry:contains('Test') .fa-eye").toHaveCount(
+    expect(".o_we_invisible_el_panel .o_we_invisible_entry:contains('Test') [data-icon='visibility']").toHaveCount(
         1
     );
     expect(
-        ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Invisible Element') .fa-eye-slash"
+        ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Invisible Element') [data-icon='visibility_off']"
     ).toHaveCount(1);
 });
 
@@ -132,7 +132,7 @@ test("desktop option undo after override", async () => {
         "[data-action-id='toggleDeviceVisibility'][data-action-param='no_desktop']"
     ).click();
     expect(":iframe section").not.toHaveClass("o_snippet_override_invisible");
-    await contains(".o_we_invisible_entry .fa-eye-slash").click();
+    await contains(".o_we_invisible_entry [data-icon='visibility_off']").click();
     expect(":iframe section").toHaveClass("o_snippet_override_invisible");
     builder.getEditor().shared.history.undo();
     expect(":iframe section").not.toHaveClass("o_snippet_override_invisible");
diff --git a/addons/website/static/tests/builder/linkpopover_website.test.js b/addons/website/static/tests/builder/linkpopover_website.test.js
index 03788bab3f922a..e6f4a27dc7695d 100644
--- a/addons/website/static/tests/builder/linkpopover_website.test.js
+++ b/addons/website/static/tests/builder/linkpopover_website.test.js
@@ -172,7 +172,7 @@ test("LinkPopover opens in full composer", async () => {
     await insertText(htmlEditor, "test");
     const node = queryOne(".odoo-editor-editable div");
     setSelection({ anchorNode: node, anchorOffset: 0, focusNode: node, focusOffset: 1 });
-    await mailClick(".o-we-toolbar .fa-link");
+    await mailClick(".o-we-toolbar [data-icon='link']");
     await waitFor(".o-we-linkpopover");
     await animationFrame();
     expect(".o-we-linkpopover").toHaveCount(1);
diff --git a/addons/website/static/tests/builder/overlay_buttons.test.js b/addons/website/static/tests/builder/overlay_buttons.test.js
index 69c20757e22118..a66728a19f6c46 100644
--- a/addons/website/static/tests/builder/overlay_buttons.test.js
+++ b/addons/website/static/tests/builder/overlay_buttons.test.js
@@ -44,28 +44,28 @@ test("Use the 'move arrows' overlay buttons", async () => {
 
     await contains(":iframe section").click();
     expect(".overlay .o_overlay_options").toHaveCount(1);
-    expect(".overlay .fa-angle-down").toHaveCount(1);
-    expect(".overlay .fa-angle-up").toHaveCount(0);
-    expect(".overlay .fa-angle-left, .overlay .fa-angle-right").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_down']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_up']").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_left'], .overlay [data-icon='keyboard_arrow_right']").toHaveCount(0);
 
     await contains(":iframe .col-lg-5").click();
     expect(".overlay .o_overlay_options").toHaveCount(1);
-    expect(".overlay .fa-angle-right").toHaveCount(1);
-    expect(".overlay .fa-angle-left").toHaveCount(0);
-    expect(".overlay .fa-angle-up, .overlay .fa-angle-down").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_right']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_left']").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_up'], .overlay [data-icon='keyboard_arrow_down']").toHaveCount(0);
 
     await contains(":iframe .col-lg-3").click();
-    expect(".overlay .fa-angle-right").toHaveCount(0);
-    expect(".overlay .fa-angle-left").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_right']").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_left']").toHaveCount(1);
 
     await contains(":iframe .col-lg-4").click();
-    expect(".overlay .fa-angle-right").toHaveCount(1);
-    expect(".overlay .fa-angle-left").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_right']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_left']").toHaveCount(1);
 
-    await contains(".overlay .fa-angle-left").click();
+    await contains(".overlay [data-icon='keyboard_arrow_left']").click();
     expect(":iframe .col-lg-4:nth-child(1)").toHaveCount(1);
-    expect(".overlay .fa-angle-right").toHaveCount(1);
-    expect(".overlay .fa-angle-left").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_right']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_left']").toHaveCount(0);
 });
 
 test("Full-width columns use vertical move arrows", async () => {
@@ -85,19 +85,19 @@ test("Full-width columns use vertical move arrows", async () => {
     );
 
     await contains(":iframe .col-lg-12:nth-child(1)").click();
-    expect(".overlay .fa-angle-up").toHaveCount(0);
-    expect(".overlay .fa-angle-down").toHaveCount(1);
-    expect(".overlay .fa-angle-left, .overlay .fa-angle-right").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_up']").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_down']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_left'], .overlay [data-icon='keyboard_arrow_right']").toHaveCount(0);
 
     await contains(":iframe .col-lg-12:nth-child(2)").click();
-    expect(".overlay .fa-angle-up").toHaveCount(1);
-    expect(".overlay .fa-angle-down").toHaveCount(1);
-    expect(".overlay .fa-angle-left, .overlay .fa-angle-right").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_up']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_down']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_left'], .overlay [data-icon='keyboard_arrow_right']").toHaveCount(0);
 
     await contains(":iframe .col-lg-12:nth-child(3)").click();
-    expect(".overlay .fa-angle-up").toHaveCount(1);
-    expect(".overlay .fa-angle-down").toHaveCount(0);
-    expect(".overlay .fa-angle-left, .overlay .fa-angle-right").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_up']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_down']").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_left'], .overlay [data-icon='keyboard_arrow_right']").toHaveCount(0);
 });
 
 test("Use the 'move arrows' overlay buttons within an editable div", async () => {
@@ -129,28 +129,28 @@ test("Use the 'move arrows' overlay buttons within an editable div", async () =>
 
     await contains(":iframe section").click();
     expect(".overlay .o_overlay_options").toHaveCount(1);
-    expect(".overlay .fa-angle-down").toHaveCount(1);
-    expect(".overlay .fa-angle-up").toHaveCount(0);
-    expect(".overlay .fa-angle-left, .overlay .fa-angle-right").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_down']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_up']").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_left'], .overlay [data-icon='keyboard_arrow_right']").toHaveCount(0);
 
     await contains(":iframe .col-lg-5").click();
     expect(".overlay .o_overlay_options").toHaveCount(1);
-    expect(".overlay .fa-angle-right").toHaveCount(1);
-    expect(".overlay .fa-angle-left").toHaveCount(0);
-    expect(".overlay .fa-angle-up, .overlay .fa-angle-down").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_right']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_left']").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_up'], .overlay [data-icon='keyboard_arrow_down']").toHaveCount(0);
 
     await contains(":iframe .col-lg-3").click();
-    expect(".overlay .fa-angle-right").toHaveCount(0);
-    expect(".overlay .fa-angle-left").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_right']").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_left']").toHaveCount(1);
 
     await contains(":iframe .col-lg-4").click();
-    expect(".overlay .fa-angle-right").toHaveCount(1);
-    expect(".overlay .fa-angle-left").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_right']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_left']").toHaveCount(1);
 
-    await contains(".overlay .fa-angle-left").click();
+    await contains(".overlay [data-icon='keyboard_arrow_left']").click();
     expect(":iframe .col-lg-4:nth-child(1)").toHaveCount(1);
-    expect(".overlay .fa-angle-right").toHaveCount(1);
-    expect(".overlay .fa-angle-left").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_right']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_left']").toHaveCount(0);
 });
 
 test("Use the 'grid' overlay buttons", async () => {
@@ -206,13 +206,13 @@ test("Refresh the overlay buttons when toggling the mobile preview", async () =>
     await contains(":iframe .g-col-lg-4").click();
     await contains("[data-action='mobile']").click();
     expect(".overlay .o_send_back, .overlay .o_bring_front").toHaveCount(0);
-    expect(".overlay .fa-angle-up").toHaveCount(1);
-    expect(".overlay .fa-angle-down").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_up']").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_down']").toHaveCount(1);
 
     await contains("[data-action='mobile']").click();
     expect(".overlay .o_send_back").toHaveCount(1);
     expect(".overlay .o_bring_front").toHaveCount(1);
-    expect(".overlay .fa-angle-left, .overlay .fa-angle-right").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_left'], .overlay [data-icon='keyboard_arrow_right']").toHaveCount(0);
 });
 
 test("Use the 'remove' overlay buttons: removing a grid item", async () => {
@@ -510,8 +510,8 @@ test("Should hide 'move up' button when previous sibling is 'o_we_no_overlay'",
     expect(".overlay .o_overlay_options").toHaveCount(1);
 
     // Can't move up since the previous sibling is excluded
-    expect(".overlay .fa-angle-up").toHaveCount(0);
+    expect(".overlay [data-icon='keyboard_arrow_up']").toHaveCount(0);
 
     // Moving down is still valid
-    expect(".overlay .fa-angle-down").toHaveCount(1);
+    expect(".overlay [data-icon='keyboard_arrow_down']").toHaveCount(1);
 });
diff --git a/addons/website/static/tests/builder/preview_mode.test.js b/addons/website/static/tests/builder/preview_mode.test.js
index 5e6e395461eb4b..dad493df96444e 100644
--- a/addons/website/static/tests/builder/preview_mode.test.js
+++ b/addons/website/static/tests/builder/preview_mode.test.js
@@ -32,7 +32,7 @@ test("do not update builder if in preview mode", async () => {
     await contains(":iframe .test-options-target").click();
     await contains("[data-action-id='customAction']").hover();
     expect("[data-class-action='b2_class']").not.toHaveCount();
-    expect(".o-snippets-top-actions .fa-undo").not.toBeEnabled();
+    expect(".o-snippets-top-actions [data-icon='undo']").not.toBeEnabled();
 });
 
 class CustomAction extends BuilderAction {
diff --git a/addons/website/static/tests/builder/save.test.js b/addons/website/static/tests/builder/save.test.js
index 93150b0c8af9a1..1f428c7653bb1c 100644
--- a/addons/website/static/tests/builder/save.test.js
+++ b/addons/website/static/tests/builder/save.test.js
@@ -57,7 +57,7 @@ test("nothing to save", async () => {
     const { getEditor, getEditableContent } = await setupWebsiteBuilder(exampleContent);
     await modifyText(getEditor(), getEditableContent());
     await animationFrame();
-    await contains(".o-snippets-menu button.fa-undo").click();
+    await contains(".o-snippets-menu button[data-icon='undo']").click();
     await contains(".o-snippets-top-actions button:contains(Save)").click();
     expect(resultSave.length).toBe(0);
     expect(":iframe #wrap").not.toHaveClass("o_dirty");
@@ -248,13 +248,13 @@ test("reload should reopen the builder with the reloadable target, and the same
         delayReload: async () => await deferred.promise,
     });
     await contains(":iframe .test-option").click();
-    expect(".options-container-header:has(i.fa-caret-right)").toHaveCount(1);
-    expect(".options-container-header:has(i.fa-caret-down)").toHaveCount(1);
+    expect(".options-container-header:has(i[data-icon='arrow_right'])").toHaveCount(1);
+    expect(".options-container-header:has(i[data-icon='arrow_drop_down'])").toHaveCount(1);
     await unfoldAllOptionsGroups();
     await contains("[data-action-id=testAction]").click();
     expect(":iframe .test-option").toHaveAttribute("data-applied");
-    expect(".options-container-header:has(i.fa-caret-right)").toHaveCount(0);
-    expect(".options-container-header:has(i.fa-caret-down)").toHaveCount(2);
+    expect(".options-container-header:has(i[data-icon='arrow_right'])").toHaveCount(0);
+    expect(".options-container-header:has(i[data-icon='arrow_drop_down'])").toHaveCount(2);
     deferred.resolve();
     expect.verifySteps(["save"]);
     await animationFrame();
@@ -264,8 +264,8 @@ test("reload should reopen the builder with the reloadable target, and the same
     // resets to initial content
     expect(":iframe .test-option").not.toHaveAttribute("data-applied");
 
-    expect(".options-container-header:has(i.fa-caret-right)").toHaveCount(0);
-    expect(".options-container-header:has(i.fa-caret-down)").toHaveCount(2);
+    expect(".options-container-header:has(i[data-icon='arrow_right'])").toHaveCount(0);
+    expect(".options-container-header:has(i[data-icon='arrow_drop_down'])").toHaveCount(2);
 });
 
 test("preview shouldn't let o_dirty", async () => {
@@ -334,7 +334,7 @@ test("Drag and drop from sidebar should only mark the concerned elements as dirt
     expect(":iframe #wrap").not.toHaveClass("o_dirty");
     expect(":iframe .o_dirty").toHaveCount(1);
     // Undo
-    await contains(".o-website-builder_sidebar .fa-undo").click();
+    await contains(".o-website-builder_sidebar [data-icon='undo']").click();
     expect(":iframe .o_dirty").toHaveCount(0);
 
     // Dragging in inner view then in outer view should only apply dirty on the
@@ -350,7 +350,7 @@ test("Drag and drop from sidebar should only mark the concerned elements as dirt
     expect(":iframe #wrap").toHaveClass("o_dirty");
     expect(":iframe .o_dirty").toHaveCount(1);
     // Undo
-    await contains(".o-website-builder_sidebar .fa-undo").click();
+    await contains(".o-website-builder_sidebar [data-icon='undo']").click();
     expect(":iframe .o_dirty").toHaveCount(0);
 
     // Dragging over the views then dropping in the sidebar to cancel should not
@@ -398,7 +398,7 @@ test("Drag and drop from the page should only mark the concerned elements as dir
     await dragUtils.moveTo(":iframe .s_dummy_snippet_1 .oe_drop_zone:nth-child(3)");
     await dragUtils.drop(getDragMoveHelper());
     await waitForEndOfOperation();
-    expect(".o-website-builder_sidebar .fa-undo").toHaveAttribute("disabled");
+    expect(".o-website-builder_sidebar [data-icon='undo']").toHaveAttribute("disabled");
     expect(":iframe .o_dirty").toHaveCount(0);
 
     // Dragging across views and dropping in the original one should only apply
@@ -416,7 +416,7 @@ test("Drag and drop from the page should only mark the concerned elements as dir
     expect(":iframe .view_2.o_savable").not.toHaveClass("o_dirty");
     expect(":iframe .o_dirty").toHaveCount(1);
     // Undo
-    await contains(".o-website-builder_sidebar .fa-undo").click();
+    await contains(".o-website-builder_sidebar [data-icon='undo']").click();
     expect(":iframe .o_dirty").toHaveCount(0);
 
     // Dragging across views and dropping in another one should only apply dirty
@@ -433,7 +433,7 @@ test("Drag and drop from the page should only mark the concerned elements as dir
     expect(":iframe .view_2.o_savable").toHaveClass("o_dirty");
     expect(":iframe .o_dirty").toHaveCount(2);
     // Undo
-    await contains(".o-website-builder_sidebar .fa-undo").click();
+    await contains(".o-website-builder_sidebar [data-icon='undo']").click();
     expect(":iframe .o_dirty").toHaveCount(0);
 });
 
diff --git a/addons/website/static/tests/builder/snippet_custom.test.js b/addons/website/static/tests/builder/snippet_custom.test.js
index 8f1e8f1b70d889..004fb375c09f5a 100644
--- a/addons/website/static/tests/builder/snippet_custom.test.js
+++ b/addons/website/static/tests/builder/snippet_custom.test.js
@@ -82,7 +82,7 @@ test("Renaming custom snippets don't make an orm call", async () => {
     });
 
     await contains(
-        ".o_add_snippet_dialog .o_add_snippet_iframe:iframe .o_custom_snippet_edit button > .fa-pencil"
+        ".o_add_snippet_dialog .o_add_snippet_iframe:iframe .o_custom_snippet_edit button > [data-icon='edit']"
     ).click();
     expect(".o-overlay-item .modal-dialog:contains('Rename the block')").toHaveCount(1);
     await contains(".o-overlay-item .modal-dialog input#inputConfirmation").fill("new custom name");
diff --git a/addons/website/static/tests/builder/snippets_menu.test.js b/addons/website/static/tests/builder/snippets_menu.test.js
index 49288b4b78c12d..6237db4a86b284 100644
--- a/addons/website/static/tests/builder/snippets_menu.test.js
+++ b/addons/website/static/tests/builder/snippets_menu.test.js
@@ -80,12 +80,12 @@ test("undo and redo buttons", async () => {
         '<div id="wrap" class="oe_structure oe_empty o_savable o_dirty" data-oe-model="ir.ui.view" data-oe-id="539" data-oe-field="arch" data-editor-message-default="true" data-editor-message="DRAG BUILDING BLOCKS HERE" contenteditable="true"> <p> Texta </p> </div>'
     );
     await animationFrame();
-    await click(".o-snippets-menu button.fa-undo");
+    await click(".o-snippets-menu button[data-icon='undo']");
     await animationFrame();
     expect(editor.editable).toHaveInnerHTML(
         '<div id="wrap" class="oe_structure oe_empty o_savable" data-oe-model="ir.ui.view" data-oe-id="539" data-oe-field="arch" data-editor-message-default="true" data-editor-message="DRAG BUILDING BLOCKS HERE" contenteditable="true"> <p> Text </p> </div>'
     );
-    await click(".o-snippets-menu button.fa-repeat");
+    await click(".o-snippets-menu button[data-icon='redo']");
     expect(editor.editable).toHaveInnerHTML(
         '<div id="wrap" class="oe_structure oe_empty o_savable o_dirty" data-oe-model="ir.ui.view" data-oe-id="539" data-oe-field="arch" data-editor-message-default="true" data-editor-message="DRAG BUILDING BLOCKS HERE" contenteditable="true"> <p> Texta </p> </div>'
     );
diff --git a/addons/website/static/tests/builder/theme_tab/palette.test.js b/addons/website/static/tests/builder/theme_tab/palette.test.js
index 5e90e90846ed52..e7556ed31fced4 100644
--- a/addons/website/static/tests/builder/theme_tab/palette.test.js
+++ b/addons/website/static/tests/builder/theme_tab/palette.test.js
@@ -28,7 +28,7 @@ test("theme tab: warning on palette change", async () => {
     await contains(".o-snippets-tabs button[data-name=theme]").click();
     await contains(".o-tab-content .o-hb-theme-color-slider-btn").click();
     await contains(
-        ".o_theme_tab [data-src='/website/static/src/img/snippets_options/palette.svg']"
+        ".o_theme_tab [data-icon='palette']"
     ).click();
     await contains(`[data-action-value="'default-light-1'"] .o-color-palette-pill span`).click();
     expect(".o_dialog").toHaveCount(1);
@@ -36,7 +36,7 @@ test("theme tab: warning on palette change", async () => {
     expect(".o_dialog").toHaveCount(0);
     expect.verifySteps([]);
     await contains(
-        ".o_theme_tab [data-src='/website/static/src/img/snippets_options/palette.svg']"
+        ".o_theme_tab [data-icon='palette']"
     ).click();
     await contains(`[data-action-value="'default-light-1'"] .o-color-palette-pill span`).click();
     expect(".o_dialog").toHaveCount(1);
@@ -67,7 +67,7 @@ test("theme tab: no warning on palette change", async () => {
     await contains(".o-snippets-tabs button[data-name=theme]").click();
     await contains(".o-tab-content .o-hb-theme-color-slider-btn").click();
     await contains(
-        ".o_theme_tab [data-src='/website/static/src/img/snippets_options/palette.svg']"
+        ".o_theme_tab [data-icon='palette']"
     ).click();
     await contains(`[data-action-value="'default-light-1'"] .o-color-palette-pill span`).click();
     await def.promise;
diff --git a/addons/website/static/tests/builder/theme_tab/reload.test.js b/addons/website/static/tests/builder/theme_tab/reload.test.js
index ce499004043594..a3d751186ac571 100644
--- a/addons/website/static/tests/builder/theme_tab/reload.test.js
+++ b/addons/website/static/tests/builder/theme_tab/reload.test.js
@@ -42,7 +42,7 @@ test("hide invisible element after reload from 'theme' tab should stay on 'theme
     expect(":iframe .s_invisible_el").toHaveAttribute("data-applied");
 
     await contains(
-        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i.fa-eye"
+        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i[data-icon='visibility']"
     ).click();
     expect(":iframe .o_snippet_invisible").toHaveAttribute("data-invisible", "1");
 
@@ -61,12 +61,12 @@ test("hide invisible element after reload from 'theme' tab should stay on 'theme
     expect(".o-snippets-tabs button[data-name=theme]").toHaveClass("active");
 
     await contains(
-        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i.fa-eye"
+        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i[data-icon='visibility']"
     ).click();
     expect(":iframe .s_invisible_el").not.toHaveAttribute("data-applied");
 
     expect(
         ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i"
-    ).toHaveClass("fa-eye-slash");
+    ).toHaveAttribute("data-icon", "visibility_off");
     expect(".o-snippets-tabs button[data-name=theme]").toHaveClass("active");
 });
diff --git a/addons/website/static/tests/builder/translation.test.js b/addons/website/static/tests/builder/translation.test.js
index 457cddb26c1473..6858890def225d 100644
--- a/addons/website/static/tests/builder/translation.test.js
+++ b/addons/website/static/tests/builder/translation.test.js
@@ -58,7 +58,7 @@ test("show invisible elements in translate mode", async () => {
 
     expect(":iframe .o_snippet_invisible").toHaveAttribute("data-invisible", "1");
     await contains(
-        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i.fa-eye-slash"
+        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i[data-icon='visibility_off']"
     ).click();
     expect(":iframe .o_snippet_invisible").not.toHaveAttribute("data-invisible");
 });
@@ -68,12 +68,12 @@ test("show+hide invisible elements in translate mode do not switch away from cus
     expect(".o_customize_tab").toHaveCount(1);
     expect(":iframe .o_snippet_invisible").toHaveAttribute("data-invisible", "1");
     await contains(
-        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i.fa-eye-slash"
+        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i[data-icon='visibility_off']"
     ).click();
     expect(".o_customize_tab").toHaveCount(1);
     expect(":iframe .o_snippet_invisible").not.toHaveAttribute("data-invisible");
     await contains(
-        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i.fa-eye"
+        ".o_we_invisible_el_panel  .o_we_invisible_entry:contains('Invisible Element') i[data-icon='visibility']"
     ).click();
     expect(".o_customize_tab").toHaveCount(1);
     expect(":iframe .o_snippet_invisible").toHaveAttribute("data-invisible", "1");
@@ -240,7 +240,7 @@ test("translate attribute history", async () => {
             translated ? " oe_translated" : ""
         }" loading="lazy" title="${titleName}" style="" data-oe-translation-state="to_translate"></img>`;
     expect(wrapEl).toHaveInnerHTML(getImg({ titleName: "titre", translated: true }));
-    await contains(".o-snippets-menu button.fa-undo").click();
+    await contains(".o-snippets-menu button[data-icon='undo']").click();
     expect(wrapEl).toHaveInnerHTML(getImg({ titleName: "title", translated: false }));
     await contains(":iframe img").click();
     expect(".modal .modal-body input").toHaveValue("title");
diff --git a/addons/website/static/tests/builder/website_builder/animate_option.test.js b/addons/website/static/tests/builder/website_builder/animate_option.test.js
index da6a61d178dd00..399c521e1cbbe3 100644
--- a/addons/website/static/tests/builder/website_builder/animate_option.test.js
+++ b/addons/website/static/tests/builder/website_builder/animate_option.test.js
@@ -477,7 +477,7 @@ describe("animate text in toolbar", () => {
         expect(":iframe span:contains('bc')").not.toHaveClass("o_anim_fade_in");
 
         // undo restore the classes
-        await contains("button.fa-undo").click();
+        await contains("button[data-icon='undo']").click();
         expect(":iframe span:contains('bc')").not.toHaveClass("o_anim_rotate_in");
         expect(":iframe span:contains('bc')").toHaveClass("o_anim_fade_in");
 
diff --git a/addons/website/static/tests/builder/website_builder/background_option.test.js b/addons/website/static/tests/builder/website_builder/background_option.test.js
index 9f6535e22bce39..a78d9486bc20b8 100644
--- a/addons/website/static/tests/builder/website_builder/background_option.test.js
+++ b/addons/website/static/tests/builder/website_builder/background_option.test.js
@@ -110,21 +110,21 @@ test("Change the background position and apply", async () => {
     await dragAndDropBgImage();
     await contains(".o_we_image_position_overlay .btn-primary").click();
     expect(".o_we_image_position_overlay").toHaveCount(0);
-    expect("button.fa-undo").toBeEnabled();
+    expect("button[data-icon='undo']").toBeEnabled();
 });
 
 test("Change the background position and discard", async () => {
     await dragAndDropBgImage();
     await contains(".o_we_image_position_overlay .btn-danger").click();
     expect(".o_we_image_position_overlay").toHaveCount(0);
-    expect("button.fa-undo").not.toBeEnabled();
+    expect("button[data-icon='undo']").not.toBeEnabled();
 });
 
 test("Change the background position and click out of the iframe", async () => {
     await dragAndDropBgImage();
     await contains(".o_customize_tab").click();
     expect(".o_we_image_position_overlay").toHaveCount(0);
-    expect("button.fa-undo").not.toBeEnabled();
+    expect("button[data-icon='undo']").not.toBeEnabled();
 });
 
 test("Background position overlay layout", async () => {
@@ -611,7 +611,7 @@ test("Connections shape do not update if it is inside an invisible element", asy
         }
     );
     await contains(":iframe #section1").click();
-    await contains(".overlay .fa-angle-down").click();
+    await contains(".overlay [data-icon='keyboard_arrow_down']").click();
     let shapeData = JSON.parse(queryOne(":iframe #section1").dataset.oeShapeData);
     expect(shapeData.colors.c5).toBe(HEX_GREEN);
     await contains(
@@ -619,7 +619,7 @@ test("Connections shape do not update if it is inside an invisible element", asy
     ).click();
     await waitSidebarUpdated();
     await contains(".o_we_invisible_entry").click();
-    await contains(".overlay .fa-angle-up").click();
+    await contains(".overlay [data-icon='keyboard_arrow_up']").click();
     shapeData = JSON.parse(queryOne(":iframe #section1").dataset.oeShapeData);
     expect(shapeData.colors.c5).toBe(HEX_GREEN);
 });
diff --git a/addons/website/static/tests/builder/website_builder/button_option.test.js b/addons/website/static/tests/builder/website_builder/button_option.test.js
index f1a08d8fdc00bd..717b8f5edddc4e 100644
--- a/addons/website/static/tests/builder/website_builder/button_option.test.js
+++ b/addons/website/static/tests/builder/website_builder/button_option.test.js
@@ -16,25 +16,25 @@ test("Drag & drop a 'Button' snippet in a <div> should put it inside a <p>", asy
     const { getEditableContent } = await setupWebsiteBuilder(`<div><p>Text</p></div>`);
     const contentEl = getEditableContent();
     expect(contentEl).toHaveInnerHTML(`<div><p>Text</p></div>`);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     const { moveTo, drop } = await contains(
         ".o-website-builder_sidebar [name='Button'] .o_snippet_thumbnail"
     ).drag();
     expect(":iframe .oe_drop_zone:nth-child(1)").toHaveCount(1);
     expect(":iframe .oe_drop_zone:nth-child(3)").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await moveTo(":iframe .oe_drop_zone");
     expect(":iframe .oe_drop_zone.invisible:nth-child(1)").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await drop(getDragHelper());
     await waitForEndOfOperation();
     expect(contentEl).toHaveInnerHTML(
         `<div><p>\ufeff<a class="btn btn-primary" href="/contactus">\ufeffButton\ufeff</a>\ufeff</p><p>Text</p></div>`
     );
-    expect(".o-website-builder_sidebar .fa-undo").toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").toBeEnabled();
 });
 
 test("Drag & drop a 'Button' snippet should align the button style with the button before it", async () => {
@@ -45,25 +45,25 @@ test("Drag & drop a 'Button' snippet should align the button style with the butt
     expect(contentEl).toHaveInnerHTML(
         `<div><a href="http://test.com" class="btn btn-fill-secondary" style="line-height: 50px;">ButtonStyled</a></div>`
     );
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     const { moveTo, drop } = await contains(
         ".o-website-builder_sidebar [name='Button'] .o_snippet_thumbnail"
     ).drag();
     expect(":iframe .oe_drop_zone:nth-child(1)").toHaveCount(1);
     expect(":iframe .oe_drop_zone:nth-child(3)").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await moveTo(":iframe .oe_drop_zone:nth-child(3)");
     expect(":iframe .oe_drop_zone.invisible:nth-child(3)").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await drop(getDragHelper());
     await waitForEndOfOperation();
     expect(contentEl).toHaveInnerHTML(
         `<div><a href="http://test.com" class="btn btn-fill-secondary mb-2" style="line-height: 50px;"> ButtonStyled </a> <a class="btn mb-2 btn-fill-secondary" href="/contactus"> Button </a></div>`
     );
-    expect(".o-website-builder_sidebar .fa-undo").toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").toBeEnabled();
 });
 
 test("Drag & drop a 'Button' snippet over a dropzone should preview it correctly", async () => {
@@ -76,13 +76,13 @@ test("Drag & drop a 'Button' snippet over a dropzone should preview it correctly
         `<div><a href="http://test.com" class="btn btn-fill-secondary">ButtonStyled</a>
          <p style="padding-bottom: 50px;"><a href="http://test.com" class="btn btn-fill-secondary">ButtonStyled in a p</a></p></div>`
     );
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     const { moveTo, drop } = await contains(
         ".o-website-builder_sidebar [name='Button'] .o_snippet_thumbnail"
     ).drag();
     expect(":iframe .oe_drop_zone").toHaveCount(5);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await moveTo(":iframe .oe_drop_zone");
     expect(":iframe .oe_drop_zone.invisible").toHaveCount(1);
@@ -93,7 +93,7 @@ test("Drag & drop a 'Button' snippet over a dropzone should preview it correctly
     expect(":iframe [data-snippet='s_button']").not.toHaveClass("mb-2 btn-fill-secondary");
     expect(":iframe [data-snippet='s_button']").toHaveClass("btn-primary");
 
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await drop(getDragHelper());
     await waitForEndOfOperation();
@@ -102,7 +102,7 @@ test("Drag & drop a 'Button' snippet over a dropzone should preview it correctly
          <p style="padding-bottom: 50px;"><a href="http://test.com" class="btn btn-fill-secondary"> ButtonStyled in a p </a></p>
          <p><a class="btn btn-primary" href="/contactus"> Button </a></p></div>`
     );
-    expect(".o-website-builder_sidebar .fa-undo").toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").toBeEnabled();
 });
 
 test("Custom button is not wrapped in <p> when dropped near sibling button", async () => {
diff --git a/addons/website/static/tests/builder/website_builder/customize_website_color.test.js b/addons/website/static/tests/builder/website_builder/customize_website_color.test.js
index 745f2f83045a0c..3efc03b9f79899 100644
--- a/addons/website/static/tests/builder/website_builder/customize_website_color.test.js
+++ b/addons/website/static/tests/builder/website_builder/customize_website_color.test.js
@@ -125,7 +125,7 @@ test("BuilderColorPicker with action “customizeWebsiteColor” is correctly di
     // Clear clears everything
     expect.step("reset");
     await contains("button.o_we_color_preview").click();
-    await contains(".o_font_color_selector .fa-trash").click();
+    await contains(".o_font_color_selector [data-icon='delete'].oi-filled").click();
     // Should wait for 3 ticks (debounced): customizeWebsiteColors, customizeWebsiteVariables, reloadBundles
     await def.promise;
     expect.verifySteps([
diff --git a/addons/website/static/tests/builder/website_builder/drag_and_drop.test.js b/addons/website/static/tests/builder/website_builder/drag_and_drop.test.js
index a47967bba9e47f..6609c185bb814c 100644
--- a/addons/website/static/tests/builder/website_builder/drag_and_drop.test.js
+++ b/addons/website/static/tests/builder/website_builder/drag_and_drop.test.js
@@ -18,7 +18,7 @@ test("Drag and drop a section and then undo", async () => {
     await setupWebsiteBuilderWithSnippet(["s_text_image", "s_three_columns"]);
     await contains(":iframe section.s_text_image").click();
     expect(".overlay .o_overlay_options .o_move_handle.o_draggable").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     const { moveTo, drop } = await contains(".o_overlay_options .o_move_handle").drag();
     expect(":iframe .oe_drop_zone").toHaveCount(2);
@@ -33,9 +33,9 @@ test("Drag and drop a section and then undo", async () => {
     expect(":iframe .oe_drop_zone").toHaveCount(0);
     expect(":iframe section.s_text_image:nth-child(2)").toHaveCount(1);
     await waitForEndOfOperation();
-    expect(".o-website-builder_sidebar .fa-undo").toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").toBeEnabled();
 
-    await contains(".o-website-builder_sidebar .fa-undo").click();
+    await contains(".o-website-builder_sidebar [data-icon='undo']").click();
     expect(":iframe section.s_text_image:nth-child(1)").toHaveCount(1);
 });
 
@@ -43,7 +43,7 @@ test("Drag and drop at the same position should not add a step in the history",
     await setupWebsiteBuilderWithSnippet(["s_text_image", "s_three_columns"]);
     await contains(":iframe section.s_text_image").click();
     expect(".overlay .o_overlay_options .o_move_handle.o_draggable").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     const { moveTo, drop } = await contains(".o_overlay_options .o_move_handle").drag();
     expect(":iframe .oe_drop_zone").toHaveCount(2);
@@ -60,7 +60,7 @@ test("Drag and drop at the same position should not add a step in the history",
     expect(":iframe .oe_drop_zone").toHaveCount(0);
     expect(":iframe section.s_text_image:nth-child(1)").toHaveCount(1);
     await waitForEndOfOperation();
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 });
 
 test("Drag and drop at the same place a section with connection shape", async () => {
@@ -84,7 +84,7 @@ test("Drag and drop a column toggles the grid mode", async () => {
     });
     await contains(":iframe section.s_text_image .row > div:nth-child(1)").click();
     expect(".overlay .o_overlay_options .o_move_handle.o_draggable").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
     expect(":iframe section.s_text_image .row").not.toHaveClass("o_grid_mode");
 
     const { moveTo, drop } = await contains(".o_overlay_options .o_move_handle").drag();
@@ -102,7 +102,7 @@ test("Drag and drop a column toggles the grid mode", async () => {
     expect(":iframe section.s_text_image .row > .o_we_drag_helper").toHaveCount(0);
     expect(":iframe section.s_text_image .row.o_grid_mode > .o_grid_item").toHaveCount(2);
     await waitForEndOfOperation();
-    expect(".o-website-builder_sidebar .fa-undo").toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").toBeEnabled();
 });
 
 test("Drag and drop an image should drag the closest draggable element but not if it is a section", async () => {
@@ -168,7 +168,7 @@ test("Drag and drop an inner content as a grid item", async () => {
     await dragUtils.drop(getDragHelper());
     await waitForEndOfOperation();
     expect(":iframe .o_grid_item:only-child div.s_alert").toHaveCount(1);
-    await contains(".o-website-builder_sidebar .fa-undo").click();
+    await contains(".o-website-builder_sidebar [data-icon='undo']").click();
     expect(":iframe div.s_alert").toHaveCount(0);
 
     // Drag over the grid and drop it as a grid item.
@@ -192,7 +192,7 @@ test("Drag and drop an inner content as a grid item", async () => {
         gridColumnStart: 1,
         gridColumnEnd: 7,
     });
-    await contains(".o-website-builder_sidebar .fa-undo").click();
+    await contains(".o-website-builder_sidebar [data-icon='undo']").click();
     expect(":iframe div.s_alert").toHaveCount(0);
 
     // Drop near the grid (should become a grid item in the top left corner).
diff --git a/addons/website/static/tests/builder/website_builder/form_option.test.js b/addons/website/static/tests/builder/website_builder/form_option.test.js
index fdc0755db10674..1db00d20eb9e67 100644
--- a/addons/website/static/tests/builder/website_builder/form_option.test.js
+++ b/addons/website/static/tests/builder/website_builder/form_option.test.js
@@ -770,7 +770,7 @@ describe("Many2one Field", () => {
     });
 
     test("Update button", async () => {
-        await contains(".we-bg-options-container .fa-refresh").click();
+        await contains(".we-bg-options-container [data-icon='refresh']").click();
         expect(addRecordButtonSelector).toHaveProperty("disabled", true, {
             message: "Add button should be disabled when all records are included",
         });
@@ -789,16 +789,16 @@ describe("Many2one Field", () => {
     });
 
     describe("Dialog", () => {
-        const dialogButtonSelector = ".we-bg-options-container .fa-gear";
+        const dialogButtonSelector = ".we-bg-options-container [data-icon='settings']";
 
         test("Add all and remove all", async () => {
             await contains(dialogButtonSelector).click();
             // Add all
-            await contains(".modal-dialog .o_left_panel .fa-plus").click();
+            await contains(".modal-dialog .o_left_panel [data-icon='add']").click();
             await expectElementCount(".modal-dialog .o_left_panel .o_list_item", 0);
             await expectElementCount(".modal-dialog .o_right_panel .o_list_item", records.length);
             // Remove all
-            await contains(".modal-dialog .o_right_panel .fa-minus").click();
+            await contains(".modal-dialog .o_right_panel [data-icon='remove']").click();
             await expectElementCount(".modal-dialog .o_right_panel .o_list_item", 0);
             await expectElementCount(".modal-dialog .o_left_panel .o_list_item", records.length);
 
diff --git a/addons/website/static/tests/builder/website_builder/highlight.test.js b/addons/website/static/tests/builder/website_builder/highlight.test.js
index dff5c9fca39e3d..096479e776710e 100644
--- a/addons/website/static/tests/builder/website_builder/highlight.test.js
+++ b/addons/website/static/tests/builder/website_builder/highlight.test.js
@@ -175,7 +175,7 @@ test("Remove format on highlight does not create an empty node", async () => {
             .filter(Boolean);
     expect("p>.o_text_highlight_freehand_2").toHaveCount(1);
     expect(selectedHighlights(editor)).toHaveLength(1);
-    await contains(".o-we-toolbar .fa-eraser").click();
+    await contains(".o-we-toolbar [data-icon='ink_eraser']").click();
     expect("p>.o_text_highlight_freehand_2").toHaveCount(1);
     expect(selectedHighlights(editor)).toHaveLength(0);
 });
diff --git a/addons/website/static/tests/builder/website_builder/icon_snippet.test.js b/addons/website/static/tests/builder/website_builder/icon_snippet.test.js
index 1c36a291837ad9..272fea1240f879 100644
--- a/addons/website/static/tests/builder/website_builder/icon_snippet.test.js
+++ b/addons/website/static/tests/builder/website_builder/icon_snippet.test.js
@@ -16,7 +16,7 @@ async function dragIcon() {
     expect(":iframe .oe_drop_zone:nth-child(3)").toHaveCount(1);
     await moveTo(":iframe .oe_drop_zone");
     expect(":iframe .oe_drop_zone.invisible:nth-child(1)").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
     await drop(getDragHelper());
     expect(".o_select_media_dialog").toHaveCount(1);
 }
@@ -25,16 +25,16 @@ test("Drag & drop an 'Icon' snippet opens the dialog to select an icon", async (
     const { getEditableContent } = await setupWebsiteBuilder(`<div><p>Icon</p></div>`);
     const contentEl = getEditableContent();
     expect(contentEl).toHaveInnerHTML(`<div><p>Icon</p></div>`);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
     await dragIcon();
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
     // Discard first attempt
     await contains(".o_select_media_dialog button:contains('Discard')").click();
-    expect(":iframe p span.fa-heart").toHaveCount(0);
+    expect(":iframe p span[data-icon='favorite']").toHaveCount(0);
     // Drag again and select heart
     await dragIcon();
-    await contains(".o_select_media_dialog .font-icons-icons span.fa-heart").click();
+    await contains(".o_select_media_dialog .font-icons-icons span[data-icon='favorite']").click();
     expect(".o_select_media_dialog").toHaveCount(0);
-    expect(":iframe p span.fa-heart").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").toBeEnabled();
+    expect(":iframe p span[data-icon='favorite']").toHaveCount(1);
+    expect(".o-website-builder_sidebar [data-icon='undo']").toBeEnabled();
 });
diff --git a/addons/website/static/tests/builder/website_builder/image_gallery.test.js b/addons/website/static/tests/builder/website_builder/image_gallery.test.js
index c475c0c2b8790c..20fb34f1ec7cb8 100644
--- a/addons/website/static/tests/builder/website_builder/image_gallery.test.js
+++ b/addons/website/static/tests/builder/website_builder/image_gallery.test.js
@@ -148,9 +148,9 @@ test("Change gallery restore the container to the cloned equivalent image", asyn
     // The container include the new image equivalent to the old selected image
     expectOptionContainerToInclude(queryOne(":iframe img[data-index='1']"));
 
-    await contains(".o-snippets-top-actions .fa-undo").click();
+    await contains(".o-snippets-top-actions [data-icon='undo']").click();
     expectOptionContainerToInclude(queryOne(":iframe img[data-index='1']"));
-    await contains(".o-snippets-top-actions .fa-repeat").click();
+    await contains(".o-snippets-top-actions [data-icon='redo']").click();
     expectOptionContainerToInclude(queryOne(":iframe img[data-index='1']"));
 });
 
diff --git a/addons/website/static/tests/builder/website_builder/image_snippet_option.test.js b/addons/website/static/tests/builder/website_builder/image_snippet_option.test.js
index 3aa8ed43940a47..efbd82fc8f4d71 100644
--- a/addons/website/static/tests/builder/website_builder/image_snippet_option.test.js
+++ b/addons/website/static/tests/builder/website_builder/image_snippet_option.test.js
@@ -30,7 +30,7 @@ test("Drag & drop an 'Image' snippet opens the dialog to select an image", async
     const { getEditableContent } = await setupWebsiteBuilder(`<div><p>Text</p></div>`);
     const contentEl = getEditableContent();
     expect(contentEl).toHaveInnerHTML(`<div><p>Text</p></div>`);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     const { moveTo, drop } = await contains(
         ".o-website-builder_sidebar [name='Image'] .o_snippet_thumbnail"
@@ -40,12 +40,12 @@ test("Drag & drop an 'Image' snippet opens the dialog to select an image", async
 
     await moveTo(":iframe .oe_drop_zone");
     expect(":iframe .oe_drop_zone.invisible:nth-child(1)").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await drop(getDragHelper());
     await new Promise((resolve) => setTimeout(resolve, 600));
     expect(".o_select_media_dialog").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await contains(".o_select_media_dialog .o_button_area[aria-label='logo']").click();
     await waitForEndOfOperation();
@@ -53,14 +53,14 @@ test("Drag & drop an 'Image' snippet opens the dialog to select an image", async
 
     expect(":iframe div img[src^='data:image/webp;base64,']").toHaveCount(1);
     expect(":iframe img").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").toBeEnabled();
 });
 
 test("Drag & drop an 'Image' snippet does not add a step in the history if we cancel the dialog", async () => {
     const { getEditableContent } = await setupWebsiteBuilder(`<div><p>Text</p></div>`);
     const contentEl = getEditableContent();
     expect(contentEl).toHaveInnerHTML(`<div><p>Text</p></div>`);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     const { moveTo, drop } = await contains(
         ".o-website-builder_sidebar [name='Image'] .o_snippet_thumbnail"
@@ -70,19 +70,19 @@ test("Drag & drop an 'Image' snippet does not add a step in the history if we ca
 
     await moveTo(":iframe .oe_drop_zone");
     expect(":iframe .oe_drop_zone.invisible:nth-child(1)").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await drop(getDragHelper());
     await new Promise((resolve) => setTimeout(resolve, 600));
     expect(".o_select_media_dialog").toHaveCount(1);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 
     await contains(".o_select_media_dialog button.btn-close").click();
     expect(".o_select_media_dialog").toHaveCount(0);
     await waitForEndOfOperation();
 
     expect(contentEl).toHaveInnerHTML(`<div><p>Text</p></div>`);
-    expect(".o-website-builder_sidebar .fa-undo").not.toBeEnabled();
+    expect(".o-website-builder_sidebar [data-icon='undo']").not.toBeEnabled();
 });
 
 test("Check that all the `on_snippet_dropped_handlers` work with the correct snippet when dropping a snippet", async () => {
diff --git a/addons/website/static/tests/builder/website_builder/menu_data.test.js b/addons/website/static/tests/builder/website_builder/menu_data.test.js
index 19ab7131e52c30..5aa0cb17d73dac 100644
--- a/addons/website/static/tests/builder/website_builder/menu_data.test.js
+++ b/addons/website/static/tests/builder/website_builder/menu_data.test.js
@@ -42,7 +42,7 @@ describe("NavbarLinkPopover", () => {
         setSelection({ anchorNode: el.querySelector(".nav-link > span"), anchorOffset: 0 });
         await waitFor(".o-we-linkpopover");
         // remove link button replaced with sitemap button
-        expect(".o-we-linkpopover:has(i.fa-chain-broken)").toHaveCount(0);
+        expect(".o-we-linkpopover:has(i[data-icon='link_off'])").toHaveCount(0);
         expect(".o-we-linkpopover:has(button.js_edit_menu)").toHaveCount(1);
         // selection outside a top menu link
         setSelection({ anchorNode: el.querySelector("p"), anchorOffset: 0 });
diff --git a/addons/website/static/tests/builder/website_builder/popup_option.test.js b/addons/website/static/tests/builder/website_builder/popup_option.test.js
index 42dfc09c7065e6..b0c123dd6e4d72 100644
--- a/addons/website/static/tests/builder/website_builder/popup_option.test.js
+++ b/addons/website/static/tests/builder/website_builder/popup_option.test.js
@@ -118,10 +118,10 @@ describe("Popup options: popup in page before edit", () => {
 
     test("closing s_popup with the X button updates the invisible elements panel", async () => {
         await expectToTriggerEvent(":iframe .s_popup .modal", "shown.bs.modal", () =>
-            contains(".o_we_invisible_entry .fa-eye-slash").click()
+            contains(".o_we_invisible_entry [data-icon='visibility_off']").click()
         );
         await waitFor(":iframe .s_popup .modal", { visible: true });
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility");
         expect(":iframe .s_popup .modal").toBeVisible();
         expect(":iframe .s_popup").not.toHaveClass("d-none");
         await expectToTriggerEvent(":iframe .s_popup .modal", "hidden.bs.modal", () =>
@@ -129,7 +129,7 @@ describe("Popup options: popup in page before edit", () => {
         );
         expect(":iframe .s_popup .modal").not.toBeVisible();
         expect(":iframe .s_popup").toHaveClass("d-none");
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye-slash");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility_off");
         // Ensure that no mutations were registered in the history.
         // `addStep` return the created step, or false if there was no mutations
         expect(builder.getEditor().shared.history.addStep()).toBe(false);
@@ -138,31 +138,31 @@ describe("Popup options: popup in page before edit", () => {
     test("editing s_popup, then closing it, then undo show it again", async () => {
         const editor = builder.getEditor();
         await expectToTriggerEvent(":iframe .s_popup .modal", "shown.bs.modal", () =>
-            contains(".o_we_invisible_entry .fa-eye-slash").click()
+            contains(".o_we_invisible_entry [data-icon='visibility_off']").click()
         );
         await waitFor(":iframe .s_popup .modal", { visible: true });
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility");
         expect(":iframe .s_popup .modal").toBeVisible();
         setSelection({ anchorNode: queryOne(":iframe .s_popup section p"), anchorOffset: 0 });
         await insertText(editor, "Other content");
         await expectToTriggerEvent(":iframe .s_popup .modal", "hidden.bs.modal", () =>
             contains(":iframe .s_popup div.js_close_popup").click()
         );
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye-slash");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility_off");
         expect(":iframe .s_popup .modal").not.toBeVisible();
         expect(editor.shared.history.canUndo()).toBe(true);
         await expectToTriggerEvent(":iframe .s_popup .modal", "shown.bs.modal", () => undo(editor));
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility");
         expect(":iframe .s_popup .modal").toBeVisible();
     });
 
     test("changing background color of s_popup, then closing it, then undo, then redo keep it visible", async () => {
         const editor = builder.getEditor();
         await expectToTriggerEvent(":iframe .s_popup .modal", "shown.bs.modal", () =>
-            contains(".o_we_invisible_entry .fa-eye-slash").click()
+            contains(".o_we_invisible_entry [data-icon='visibility_off']").click()
         );
         await waitFor(":iframe .s_popup .modal", { visible: true });
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye");
+        expect(".o_we_invisible_entry [data-icon='visibility']").toHaveAttribute('data-icon', 'visibility');
         expect(":iframe .s_popup .modal").toBeVisible();
         await contains("[data-label=Backdrop] button.o_we_color_preview").click();
         await contains("button.o_color_button[data-color='#FF0000']").click();
@@ -173,11 +173,11 @@ describe("Popup options: popup in page before edit", () => {
         await expectToTriggerEvent(":iframe .s_popup .modal", "hidden.bs.modal", () =>
             contains(":iframe .s_popup div.js_close_popup").click()
         );
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye-slash");
+        expect(".o_we_invisible_entry [data-icon='visibility_off']").toHaveAttribute("data-icon", "visibility_off");
         expect(":iframe .s_popup .modal").not.toBeVisible();
         expect(editor.shared.history.canUndo()).toBe(true);
         await expectToTriggerEvent(":iframe .s_popup .modal", "shown.bs.modal", () => undo(editor));
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye");
+        expect(".o_we_invisible_entry [data-icon='visibility']").toHaveAttribute('data-icon', 'visibility');
         expect(":iframe .s_popup .modal").toBeVisible();
         redo(editor);
         expect(":iframe .s_popup .modal").toHaveStyle({
@@ -192,26 +192,26 @@ describe("Popup options: popup in page before edit", () => {
         await contains(":iframe .s_cover").click();
         await contains("button:contains(Grid)").click(); // arbitrary thing to undo
         await expectToTriggerEvent(":iframe .s_popup .modal", "shown.bs.modal", () =>
-            contains(".o_we_invisible_entry .fa-eye-slash").click()
+            contains(".o_we_invisible_entry [data-icon='visibility_off']").click()
         );
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility");
         await expectToTriggerEvent(":iframe .s_popup .modal", "hidden.bs.modal", () =>
             undo(builder.getEditor())
         );
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye-slash");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility_off");
     });
 
     test("emptied s_popup are removed and the options are updated correctly", async () => {
         const editor = builder.getEditor();
         await expectToTriggerEvent(":iframe .s_popup .modal", "shown.bs.modal", () =>
-            contains(".o_we_invisible_entry .fa-eye-slash").click()
+            contains(".o_we_invisible_entry [data-icon='visibility_off']").click()
         );
         await waitFor(":iframe .s_popup .modal", { visible: true });
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility");
         expect(":iframe .s_popup .modal").toBeVisible();
 
         await contains(":iframe section p:contains('Popup content')").click();
-        await contains("div[data-container-title='Block'] button.fa-trash").click();
+        await contains("div[data-container-title='Block'] button[data-icon='delete'].oi-filled").click();
         expect(":iframe .s_popup").toHaveCount(0);
         expect("div[data-container-title='Block']").toHaveCount(0);
 
@@ -235,9 +235,9 @@ describe("Popup options: popup in page before edit", () => {
         expect(":iframe .s_popup").toHaveCount(1);
         expect("div[data-container-title='Block']").toHaveCount(1);
 
-        contains(".o_we_invisible_entry .fa-eye").click();
+        contains(".o_we_invisible_entry [data-icon='visibility']").click();
         await animationFrame();
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye-slash");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility_off");
 
         expect(editor.shared.history.canRedo()).toBe(true);
         redo(editor);
@@ -250,6 +250,6 @@ describe("Popup options: popup in page before edit", () => {
         await animationFrame();
         expect(":iframe .s_popup").toHaveCount(1);
         expect("div[data-container-title='Block']").toHaveCount(1);
-        expect(".o_we_invisible_entry .fa").toHaveClass("fa-eye");
+        expect(".o_we_invisible_entry .oi").toHaveAttribute("data-icon", "visibility");
     });
 });
diff --git a/addons/website/static/tests/builder/website_builder/searchbar_option.test.js b/addons/website/static/tests/builder/website_builder/searchbar_option.test.js
index 25bd73be834c7e..342f57d45e0d53 100644
--- a/addons/website/static/tests/builder/website_builder/searchbar_option.test.js
+++ b/addons/website/static/tests/builder/website_builder/searchbar_option.test.js
@@ -15,7 +15,7 @@ const searchbarHTML = (orderBy) => `
             <div role="search" class="input-group ">
                 <input type="search" name="search" class="search-query form-control oe_search_box" placeholder="Search..." data-limit="5" data-order-by="${orderBy}" autocomplete="off" data-search-type="pages" data-display-description="true">
                 <button type="submit" aria-label="Search" title="Search" class="btn oe_search_button btn-primary">
-                    <i class="oi oi-search" contenteditable="false"></i>
+                    <i class="oi" data-icon="search" contenteditable="false"></i>
                 </button>
             </div>
         <input name="order" type="hidden" class="o_search_order_by" value="${orderBy}">
diff --git a/addons/website/static/tests/builder/website_builder/size_option.test.js b/addons/website/static/tests/builder/website_builder/size_option.test.js
index 399b425e99efe5..edef7848b1f14c 100644
--- a/addons/website/static/tests/builder/website_builder/size_option.test.js
+++ b/addons/website/static/tests/builder/website_builder/size_option.test.js
@@ -18,9 +18,9 @@ test("Size option should be present when scroll down button is enabled", async (
     await contains("[data-label='Scroll Down Button'] input").click();
     await waitFor(sizeOptionSelector);
     expect(`${sizeOptionSelector} .o-hb-button-group button`).toHaveCount(5);
-    await contains(`[data-class-action='fa-2x']`).click();
+    await contains(`[data-class-action='oi-2x']`).click();
     const scrollDownButtonEl = queryOne(":iframe .o_scroll_button");
-    const angleDownIconEl = scrollDownButtonEl.querySelector(".fa-angle-down");
+    const angleDownIconEl = scrollDownButtonEl.querySelector("[data-icon='keyboard_arrow_down']");
     const computedStyle = getComputedStyle(scrollDownButtonEl);
     const iconFontSize = getComputedStyle(angleDownIconEl).fontSize;
     expect(computedStyle.width).toBe(iconFontSize);
diff --git a/addons/website/static/tests/builder/website_builder/social_media.test.js b/addons/website/static/tests/builder/website_builder/social_media.test.js
index aa1a7b2b78e62b..d49da193cd8945 100644
--- a/addons/website/static/tests/builder/website_builder/social_media.test.js
+++ b/addons/website/static/tests/builder/website_builder/social_media.test.js
@@ -63,7 +63,7 @@ async function testSocialSnippetOptions(snippetName, containerTitle, iconName) {
     expect(":iframe .no_icon_color").toHaveCount(1);
     const textColor = "rgb(255, 0, 0)";
     core.getEditableContent().style.color = textColor;
-    const icon = await queryOne(`${snippetSelector} a .fa-${iconName}`);
+    const icon = await queryOne(`${snippetSelector} a [data-icon="${iconName}"]`);
     if (icon) {
         const iconColor = getComputedStyle(icon).color;
         expect(iconColor).toBe(textColor);
@@ -96,14 +96,14 @@ async function testSocialSnippetOptions(snippetName, containerTitle, iconName) {
     );
     await edit("70");
     await animationFrame();
-    expect(`${snippetSelector} > a > i`).toHaveStyle("--fa-icon-size: 4.375rem");
+    expect(`${snippetSelector} > a > i`).toHaveStyle("--oi-icon-size: 4.375rem");
 
     await click(
         `[data-container-title='${containerTitle}'] [data-label='Size'] input[type='number']`
     );
     await edit("100");
     await animationFrame();
-    expect(`${snippetSelector} > a > i`).toHaveStyle("--fa-icon-size: 6.25rem");
+    expect(`${snippetSelector} > a > i`).toHaveStyle("--oi-icon-size: 6.25rem");
 }
 
 test("add social medias", async () => {
@@ -235,7 +235,7 @@ test("reorder social medias", async () => {
     expect(":iframe a:nth-of-type(2)").toHaveAttribute("href", "/website/social/twitter");
     expect(":iframe a:nth-of-type(3)").toHaveAttribute("href", "https://www.example.com");
 
-    await contains(".o-snippets-top-actions button.fa-undo").click();
+    await contains(".o-snippets-top-actions button[data-icon='undo']").click();
 
     // fb link not in the dom should stay just after x link
     expect("tr:nth-child(1) input[type=text]").toHaveValue("https://x.com/odoo");
@@ -304,9 +304,9 @@ test("Edit share icon", async () => {
 });
 
 test("Social Media snippet options are correct", async () => {
-    await testSocialSnippetOptions("s_social_media", "Social Media", "github");
+    await testSocialSnippetOptions("s_social_media", "Social Media", "oi_github");
 });
 
 test("Share snippet options are correct", async () => {
-    await testSocialSnippetOptions("s_share", "Share", "facebook");
+    await testSocialSnippetOptions("s_share", "Share", "oi_facebook");
 });
diff --git a/addons/website/static/tests/builder/website_builder/timeline_option.test.js b/addons/website/static/tests/builder/website_builder/timeline_option.test.js
index 9c721e2d6c0579..0ed6721ee71862 100644
--- a/addons/website/static/tests/builder/website_builder/timeline_option.test.js
+++ b/addons/website/static/tests/builder/website_builder/timeline_option.test.js
@@ -32,10 +32,10 @@ test("add a date in timeline", async () => {
 test("Use the overlay buttons of a timeline card", async () => {
     await setupWebsiteBuilderWithSnippet("s_timeline");
     await contains(":iframe .s_timeline_card").click();
-    expect(".o_overlay_options .fa-angle-right").toHaveCount(1);
-    expect(".o_overlay_options .fa-angle-left").toHaveCount(0);
+    expect(".o_overlay_options [data-icon='keyboard_arrow_right']").toHaveCount(1);
+    expect(".o_overlay_options [data-icon='keyboard_arrow_left']").toHaveCount(0);
 
-    await contains(".o_overlay_options .fa-angle-right").click();
-    expect(".o_overlay_options .fa-angle-right").toHaveCount(0);
-    expect(".o_overlay_options .fa-angle-left").toHaveCount(1);
+    await contains(".o_overlay_options [data-icon='keyboard_arrow_right']").click();
+    expect(".o_overlay_options [data-icon='keyboard_arrow_right']").toHaveCount(0);
+    expect(".o_overlay_options [data-icon='keyboard_arrow_left']").toHaveCount(1);
 });
diff --git a/addons/website/static/tests/interactions/listing_layout.test.js b/addons/website/static/tests/interactions/listing_layout.test.js
index fbf02f48324148..d61d083029d631 100644
--- a/addons/website/static/tests/interactions/listing_layout.test.js
+++ b/addons/website/static/tests/interactions/listing_layout.test.js
@@ -17,11 +17,11 @@ test("listing_layout toggle to list mode", async () => {
                 <div class="listing_layout_switcher btn-group" data-active-classes="border-primary" data-view-id="123">
                     <input id="apply_grid" type="radio" class="btn-check" value="grid" checked="checked">
                     <label title="Grid" for="apply_grid" class="btn">
-                        <i class="fa fa-th-large"></i>
+                        <i class="oi" data-icon="view_module"></i>
                     </label>
                     <input id="apply_list" type="radio" class="btn-check" value="list">
                     <label title="List" for="apply_list" class="btn">
-                        <i class="oi oi-view-list"></i>
+                        <i class="oi" data-icon="view_list"></i>
                     </label>
                 </div>
             </section>
@@ -67,11 +67,11 @@ test("listing_layout toggle to grid mode", async () => {
                 <div class="listing_layout_switcher btn-group" data-active-classes="border-primary" data-view-id="123">
                     <input id="apply_grid" type="radio" class="btn-check" value="grid">
                     <label title="Grid" for="apply_grid" class="btn">
-                        <i class="fa fa-th-large"></i>
+                        <i class="oi" data-icon="view_module"></i>
                     </label>
                     <input id="apply_list" type="radio" class="btn-check" value="list" checked="checked">
                     <label title="List" for="apply_list" class="btn">
-                        <i class="oi oi-view-list"></i>
+                        <i class="oi" data-icon="view_list"></i>
                     </label>
                 </div>
             </section>
diff --git a/addons/website/static/tests/interactions/snippets/faq_horizontal.test.js b/addons/website/static/tests/interactions/snippets/faq_horizontal.test.js
index be2a765fc5d58b..e8ed0164ac180c 100644
--- a/addons/website/static/tests/interactions/snippets/faq_horizontal.test.js
+++ b/addons/website/static/tests/interactions/snippets/faq_horizontal.test.js
@@ -36,7 +36,7 @@ const getTemplate = function (headerType) {
                             <img src="/web/image/website.s_faq_horizontal_default_image_1" class="img img-fluid rounded" style="width: 100% !important;" alt="" loading="lazy" data-mimetype="image/webp" data-attachment-id="278" data-original-id="278" data-original-src="/website/static/src/img/snippets_demo/s_faq_horizontal_1.webp" data-mimetype-before-conversion="image/webp">
                             <p><br>The first step in the onboarding process is <b>account creation</b>. This involves signing up on our platform using your email address or social media accounts. Once you’ve created an account, you will receive a confirmation email with a link to activate your account. Upon activation, you’ll be prompted to complete your profile, which includes setting up your preferences, adding any necessary payment information, and selecting the initial features or modules you wish to use.</p>
                             <p>Next, you will be introduced to our <b>setup wizard</b>, which is designed to guide you through the basic configuration of the platform. The wizard will help you configure essential settings such as language, time zone, and notifications.</p>
-                            <p><a href="#">Read More <i class="fa fa-angle-right" role="img"></i></a></p>
+                            <p><a href="#">Read More <i class="oi" data-icon="keyboard_arrow_right" role="img"></i></a></p>
                         </span>
                         </article>
                     </div>
diff --git a/addons/website/static/tests/interactions/snippets/form.edit.test.js b/addons/website/static/tests/interactions/snippets/form.edit.test.js
index 93d052fa27cd3e..6f5e735683f67e 100644
--- a/addons/website/static/tests/interactions/snippets/form.edit.test.js
+++ b/addons/website/static/tests/interactions/snippets/form.edit.test.js
@@ -23,7 +23,7 @@ const formXml = `
                                     <div class="s_website_form_datetime input-group date">
                                         <input type="text" class="form-control datetimepicker-input s_website_form_input" name="When" placeholder="" id="onbni9ji3oa" value="1735722000"/>
                                         <div class="input-group-text o_input_group_date_icon">
-                                            <i class="fa fa-calendar"/>
+                                            <i class="oi oi-filled" data-icon="calendar_today"/>
                                         </div>
                                     </div>
                                 </div>
diff --git a/addons/website/static/tests/interactions/snippets/gallery_slider.test.js b/addons/website/static/tests/interactions/snippets/gallery_slider.test.js
index d3ba6530b33ebf..f34fbb32b317a4 100644
--- a/addons/website/static/tests/interactions/snippets/gallery_slider.test.js
+++ b/addons/website/static/tests/interactions/snippets/gallery_slider.test.js
@@ -136,7 +136,7 @@ const defaultOldLightbox = `
             </div>
             <ul class="carousel-indicators">
                 <li class="o_indicators_left text-center d-none" aria-label="Previous" title="Previous">
-                    <i class="oi oi-chevron-left"></i>
+                    <i class="oi" data-icon="chevron_backward"></i>
                 </li>
                 <li data-bs-target="#slideshow_3" data-bs-slide-to="0" class="" style="background-image: url(/web/image/website.library_image_03)"></li>
                 <li data-bs-target="#slideshow_3" data-bs-slide-to="1" style="background-image: url(/web/image/website.library_image_10)" class=""></li>
@@ -144,7 +144,7 @@ const defaultOldLightbox = `
                 <li data-bs-target="#slideshow_3" data-bs-slide-to="3" style="background-image: url(/web/image/website.library_image_05)" class="active" aria-current="true"></li><li data-bs-target="#slideshow_3" data-bs-slide-to="4" style="background-image: url(/web/image/website.library_image_14)"></li>
                 <li data-bs-target="#slideshow_3" data-bs-slide-to="5" style="background-image: url(/web/image/website.library_image_16)" class=""></li>
                 <li class="o_indicators_right text-center d-none" aria-label="Next" title="Next">
-                    <i class="oi oi-chevron-right"></i>
+                    <i class="oi" data-icon="chevron_forward"></i>
                 </li>
             </ul>
         </div>
diff --git a/addons/website/static/tests/interactions/snippets/search_bar.test.js b/addons/website/static/tests/interactions/snippets/search_bar.test.js
index 87602ba8f9b6b9..9a992e056ac4e0 100644
--- a/addons/website/static/tests/interactions/snippets/search_bar.test.js
+++ b/addons/website/static/tests/interactions/snippets/search_bar.test.js
@@ -23,7 +23,7 @@ const searchTemplate = /* html */ `
                     data-order-by="name asc"
                     autocomplete="off"/>
             <button type="submit" aria-label="Search" title="Search" class="btn oe_search_button border border-start-0 px-4 bg-o-color-4">
-                <i class="oi oi-search"></i>
+                <i class="oi" data-icon="search"></i>
             </button>
         </div>
         <input name="order" type="hidden" class="o_search_order_by" value="test desc"/>
@@ -44,17 +44,17 @@ function supportAutocomplete() {
         return {
             results: [
                 {
-                    _fa: "fa-file-o",
+                    _icon: "description",
                     name: "Xyz 1",
                     website_url: "/website/test/xyz-1",
                 },
                 {
-                    _fa: "fa-file-o",
+                    _icon: "description",
                     name: "Xyz 2",
                     website_url: "/website/test/xyz-2",
                 },
                 {
-                    _fa: "fa-file-o",
+                    _icon: "description",
                     name: "Xyz 3",
                     website_url: "/website/test/xyz-3",
                 },
diff --git a/addons/website/static/tests/interactions/snippets/search_bar_results.test.js b/addons/website/static/tests/interactions/snippets/search_bar_results.test.js
index 760d9553857070..7b3aeb7e42d506 100644
--- a/addons/website/static/tests/interactions/snippets/search_bar_results.test.js
+++ b/addons/website/static/tests/interactions/snippets/search_bar_results.test.js
@@ -19,7 +19,7 @@ const searchTemplate = `
                     autocomplete="off"
             />
             <button type="submit" aria-label="Search" title="Search" class="btn oe_search_button border border-start-0 px-4 bg-o-color-4">
-                <i class="oi oi-search"></i>
+                <i class="oi" data-icon="search"></i>
             </button>
         </div>
         <input name="order" type="hidden" class="o_search_order_by" value="test desc"/>
diff --git a/addons/website/static/tests/tours/auto_hide_menu.js b/addons/website/static/tests/tours/auto_hide_menu.js
index d3d71b5111b5a8..072ba674aaaf0c 100644
--- a/addons/website/static/tests/tours/auto_hide_menu.js
+++ b/addons/website/static/tests/tours/auto_hide_menu.js
@@ -8,7 +8,7 @@ let numNavChildren;
 const addNavItem = [
     {
         content: "Add a menu item",
-        trigger: ".modal-dialog .fa-plus-circle:first-child",
+        trigger: ".modal-dialog [data-icon='add_circle']:first-child",
         run: "click",
     },
     {
diff --git a/addons/website/static/tests/tours/conditional_visibility.js b/addons/website/static/tests/tours/conditional_visibility.js
index 33889709b7c488..90b6f92d0c0089 100644
--- a/addons/website/static/tests/tours/conditional_visibility.js
+++ b/addons/website/static/tests/tours/conditional_visibility.js
@@ -32,13 +32,13 @@ const snippets = [
     },
 ];
 function checkEyeIcon(snippetName, visible) {
-    const eyeIcon = visible ? "fa-eye" : "fa-eye-slash";
+    const eyeIcon = visible ? "visibility" : "visibility_off";
     const openOrClose = visible ? "open" : "close";
     const endExplanation = `should be ${openOrClose} in the "Invisible Elements" panel`;
     const invisibleElPanel = "o_we_invisible_el_panel";
     return {
         content: `The eye icon of ${snippetName} ${endExplanation}`,
-        trigger: `.${invisibleElPanel} .o_we_invisible_entry:contains("${snippetName}") i.${eyeIcon}`,
+        trigger: `.${invisibleElPanel} .o_we_invisible_entry:contains("${snippetName}") i[data-icon="${eyeIcon}"]`,
     };
 }
 function checkEyesIconAfterSave(footerIsHidden = true) {
@@ -181,7 +181,7 @@ registerWebsitePreviewTour(
         ...clickOnSnippet(snippets[0]),
         {
             content: "Click on the 'move down' option",
-            trigger: ".o_overlay_options button.fa-angle-down",
+            trigger: ".o_overlay_options button[data-icon='keyboard_arrow_down']",
             run: "click",
         },
         ...checkEyesIconAfterSave(),
diff --git a/addons/website/static/tests/tours/create_missing_page.js b/addons/website/static/tests/tours/create_missing_page.js
index 3d7b9fa5e19fb7..33618d051c6e52 100644
--- a/addons/website/static/tests/tours/create_missing_page.js
+++ b/addons/website/static/tests/tours/create_missing_page.js
@@ -56,9 +56,9 @@ registerWebsitePreviewTour(
         // the tour fails when the new menu is in the extra menu.
         {
             content: "Drag the new menu item at the top",
-            trigger: '.oe_menu_editor li:contains("Zoé’s Diner") .oi-draggable',
+            trigger: '.oe_menu_editor li:contains("Zoé’s Diner") [data-icon="drag_indicator"]',
             run(helpers) {
-                return helpers.drag_and_drop('.oe_menu_editor li:contains("Home") .oi-draggable', {
+                return helpers.drag_and_drop('.oe_menu_editor li:contains("Home") [data-icon="drag_indicator"]', {
                     position: {
                         top: 20,
                     },
@@ -152,10 +152,10 @@ registerWebsitePreviewTour(
         // the tour fails when the new menu is in the extra menu.
         {
             content: "Drag the new menu item at the top",
-            trigger: '.oe_menu_editor li:contains("The Sea Hotel") .oi-draggable',
+            trigger: '.oe_menu_editor li:contains("The Sea Hotel") [data-icon="drag_indicator"]',
             run(helpers) {
                 return helpers.drag_and_drop(
-                    '.oe_menu_editor li:contains("Zoé’s Diner") .oi-draggable',
+                    '.oe_menu_editor li:contains("Zoé’s Diner") [data-icon="drag_indicator"]',
                     {
                         position: {
                             top: 20,
diff --git a/addons/website/static/tests/tours/edit_megamenu.js b/addons/website/static/tests/tours/edit_megamenu.js
index 64a3eaea5673c5..d244d92ba3ae42 100644
--- a/addons/website/static/tests/tours/edit_megamenu.js
+++ b/addons/website/static/tests/tours/edit_megamenu.js
@@ -339,7 +339,7 @@ const createDropdown = function (name) {
         },
         {
             content: "Move the dropdown item into the dropdown",
-            trigger: '.oe_menu_editor li:contains("' + name + " item" + '") .oi-draggable',
+            trigger: '.oe_menu_editor li:contains("' + name + " item" + '") [data-icon="drag_indicator"]',
             run(helpers) {
                 return helpers.drag_and_drop('.oe_menu_editor li:contains("' + name + '")', {
                     position: {
@@ -493,7 +493,7 @@ registerWebsitePreviewTour(
         }),
         {
             content: "Switch to desktop view",
-            trigger: "button:has(> span.fa-mobile)",
+            trigger: "button:has(> span[data-icon='smartphone'])",
             run: "click",
         },
         // Check desktop visibility while editing
diff --git a/addons/website/static/tests/tours/edit_menus.js b/addons/website/static/tests/tours/edit_menus.js
index 217e6508e82105..1322da77271c63 100644
--- a/addons/website/static/tests/tours/edit_menus.js
+++ b/addons/website/static/tests/tours/edit_menus.js
@@ -298,7 +298,7 @@ registerWebsitePreviewTour(
         },
         {
             content: `Drag "Modnar !!" menu below "Home" menu`,
-            trigger: '.oe_menu_editor li:contains("Modnar !!") .oi-draggable',
+            trigger: '.oe_menu_editor li:contains("Modnar !!") [data-icon="drag_indicator"]',
             run(helpers) {
                 return helpers.drag_and_drop('.oe_menu_editor li:contains("Home")', {
                     position: {
@@ -311,7 +311,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Drag 'Modnar !!' item as a child of the 'Home' item",
-            trigger: '.oe_menu_editor li:contains("Modnar !!") .oi-draggable',
+            trigger: '.oe_menu_editor li:contains("Modnar !!") [data-icon="drag_indicator"]',
             run: 'drag_and_drop .oe_menu_editor li:contains("Modnar !!") .form-control',
         },
         {
@@ -321,9 +321,9 @@ registerWebsitePreviewTour(
         // Drag the Mega menu to the first position.
         {
             content: "Drag Mega at the top",
-            trigger: '.oe_menu_editor li:contains("Megaaaaa!") .oi-draggable',
+            trigger: '.oe_menu_editor li:contains("Megaaaaa!") [data-icon="drag_indicator"]',
             run(helpers) {
-                return helpers.drag_and_drop('.oe_menu_editor li:contains("Home") .oi-draggable', {
+                return helpers.drag_and_drop('.oe_menu_editor li:contains("Home") [data-icon="drag_indicator"]', {
                     position: {
                         top: 20,
                     },
@@ -502,7 +502,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Nest 'new_nested_menu' under 'new_menu'",
-            trigger: '.oe_menu_editor li:contains("new_nested_menu") .oi-draggable',
+            trigger: '.oe_menu_editor li:contains("new_nested_menu") [data-icon="drag_indicator"]',
             run(helpers) {
                 return helpers.drag_and_drop(
                     ".oe_menu_editor li:contains('new_menu') .form-control",
@@ -515,10 +515,10 @@ registerWebsitePreviewTour(
         {
             content: "Drag 'Modnar !!' below 'new_menu'",
             trigger:
-                '.oe_menu_editor li:contains("Home") > ul > li:contains("Modnar !!") .oi-draggable',
+                '.oe_menu_editor li:contains("Home") > ul > li:contains("Modnar !!") [data-icon="drag_indicator"]',
             run(helpers) {
                 return helpers.drag_and_drop(
-                    '.oe_menu_editor li:contains("new_menu") .oi-draggable',
+                    '.oe_menu_editor li:contains("new_menu") [data-icon="drag_indicator"]',
                     {
                         position: "bottom",
                     }
@@ -527,7 +527,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Nest 'Modnar !!' under 'new_menu'",
-            trigger: '.oe_menu_editor li:contains("Modnar !!") .oi-draggable',
+            trigger: '.oe_menu_editor li:contains("Modnar !!") [data-icon="drag_indicator"]',
             run(helpers) {
                 return helpers.drag_and_drop(
                     ".oe_menu_editor li:contains('new_menu') .form-control",
@@ -545,10 +545,10 @@ registerWebsitePreviewTour(
         {
             content: "Move 'Modnar !!' below 'new_nested_menu' inside the 'new_menu'",
             trigger:
-                '.oe_menu_editor  li:contains("new_menu") > ul > li:contains("Modnar !!") .oi-draggable',
+                '.oe_menu_editor  li:contains("new_menu") > ul > li:contains("Modnar !!") [data-icon="drag_indicator"]',
             run(helpers) {
                 return helpers.drag_and_drop(
-                    ".oe_menu_editor  li:contains('new_menu') > ul > li:contains('new_nested_menu') .oi-draggable",
+                    ".oe_menu_editor  li:contains('new_menu') > ul > li:contains('new_nested_menu') [data-icon='drag_indicator']",
                     {
                         position: "bottom",
                     }
diff --git a/addons/website/static/tests/tours/grid_layout.js b/addons/website/static/tests/tours/grid_layout.js
index 350628f1379dd5..958c2afa403ac2 100644
--- a/addons/website/static/tests/tours/grid_layout.js
+++ b/addons/website/static/tests/tours/grid_layout.js
@@ -43,7 +43,7 @@ registerWebsitePreviewTour(
         },
         {
             content: `Target the "Text - Image" group`,
-            trigger: `.options-container[data-container-title="Text - Image"]:has(.options-container-label i.fa-caret-right) button[title="Select only this block"]`,
+            trigger: `.options-container[data-container-title="Text - Image"]:has(.options-container-label i[data-icon='arrow_right']) button[title="Select only this block"]`,
             run: "click",
         },
         {
diff --git a/addons/website/static/tests/tours/media_dialog.js b/addons/website/static/tests/tours/media_dialog.js
index 65e89283374212..5509b717c18a37 100644
--- a/addons/website/static/tests/tours/media_dialog.js
+++ b/addons/website/static/tests/tours/media_dialog.js
@@ -131,21 +131,21 @@ registerWebsitePreviewTour(
         }),
         {
             content: "Open MediaDialog from a snippet icon",
-            trigger: ":iframe .s_social_media .fa-instagram",
+            trigger: ":iframe .s_social_media [data-icon='oi_instagram']",
             run: "dblclick",
         },
         {
             content: "Pick the same icon",
-            trigger: ".o_select_media_dialog .o_we_attachment_selected.fa-instagram",
+            trigger: ".o_select_media_dialog .o_we_attachment_selected[data-icon='oi_instagram']",
             run: "click",
         },
         {
             content: "Check if the icon remains the same",
-            trigger: ":iframe .s_social_media .fa-instagram",
+            trigger: ":iframe .s_social_media [data-icon='oi_instagram']",
         },
         {
             content: "Open MediaDialog again",
-            trigger: ":iframe .s_social_media .fa-instagram",
+            trigger: ":iframe .s_social_media [data-icon='oi_instagram']",
             run: "dblclick",
         },
         {
@@ -155,7 +155,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Check if the icon remains the same",
-            trigger: ":iframe .s_social_media .fa-instagram",
+            trigger: ":iframe .s_social_media [data-icon='oi_instagram']",
         },
         ...clickOnSave(),
     ]
@@ -193,12 +193,12 @@ registerWebsitePreviewTour(
         {
             content: "Select an icon",
             trigger:
-                ".o_select_media_dialog:has(.nav-link.active:contains('Icons')) .tab-content span.fa-heart",
+                ".o_select_media_dialog:has(.nav-link.active:contains('Icons')) .tab-content span[data-icon='favorite']",
             run: "click",
         },
         {
             content: "Checks that the icon doesn't have a shape",
-            trigger: ":iframe .s_text_image .fa-heart:not([data-shape])",
+            trigger: ":iframe .s_text_image [data-icon='favorite']:not([data-shape])",
         },
     ]
 );
@@ -250,7 +250,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Verify that the icon was inserted",
-            trigger: ":iframe .s_text_block p > span.fa",
+            trigger: ":iframe .s_text_block p > span.oi",
         },
     ]
 );
diff --git a/addons/website/static/tests/tours/popup_visibility_option.js b/addons/website/static/tests/tours/popup_visibility_option.js
index 19f0a7a3479202..42b1d13c042e4e 100644
--- a/addons/website/static/tests/tours/popup_visibility_option.js
+++ b/addons/website/static/tests/tours/popup_visibility_option.js
@@ -23,11 +23,11 @@ registerWebsitePreviewTour(
         },
         {
             content: "Check that the popup is visible.",
-            trigger: ".o_we_invisible_root_parent i.fa-eye",
+            trigger: ".o_we_invisible_root_parent i[data-icon='visibility']",
         },
         {
             content: "Check that the banner is invisible.",
-            trigger: "ul .o_we_invisible_entry i.fa-eye-slash",
+            trigger: "ul .o_we_invisible_entry i[data-icon='visibility_off']",
         },
     ]
 );
diff --git a/addons/website/static/tests/tours/snippet_image.js b/addons/website/static/tests/tours/snippet_image.js
index 5c6510d711c5dd..f3bb38663d3c8c 100644
--- a/addons/website/static/tests/tours/snippet_image.js
+++ b/addons/website/static/tests/tours/snippet_image.js
@@ -37,7 +37,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Click on the 'undo' button",
-            trigger: ".o-snippets-top-actions button.fa-undo",
+            trigger: ".o-snippets-top-actions button[data-icon='undo']",
             run: "click",
         },
         {
diff --git a/addons/website/static/tests/tours/snippet_popup_add_remove.js b/addons/website/static/tests/tours/snippet_popup_add_remove.js
index 8d77e6c68ff85f..9a4c437535249f 100644
--- a/addons/website/static/tests/tours/snippet_popup_add_remove.js
+++ b/addons/website/static/tests/tours/snippet_popup_add_remove.js
@@ -74,7 +74,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Click on the 'undo' button.",
-            trigger: ".o-snippets-top-actions button.fa-undo",
+            trigger: ".o-snippets-top-actions button[data-icon='undo']",
             run: "click",
         },
         {
diff --git a/addons/website/static/tests/tours/snippet_popup_and_animations.js b/addons/website/static/tests/tours/snippet_popup_and_animations.js
index c79f1629a343be..53a9805a3cccf5 100644
--- a/addons/website/static/tests/tours/snippet_popup_and_animations.js
+++ b/addons/website/static/tests/tours/snippet_popup_and_animations.js
@@ -157,7 +157,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Close the Popup",
-            trigger: ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Popup') i.fa-eye",
+            trigger: ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Popup') i[data-icon='visibility']",
             run: "click",
         },
         {
@@ -215,7 +215,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Click on the 'undo' button",
-            trigger: ".o-snippets-top-actions button.fa-undo",
+            trigger: ".o-snippets-top-actions button[data-icon='undo']",
             run: "click",
         },
         {
diff --git a/addons/website/static/tests/tours/snippet_shape_image.js b/addons/website/static/tests/tours/snippet_shape_image.js
index 039d56207fb918..8b87d0459a0436 100644
--- a/addons/website/static/tests/tours/snippet_shape_image.js
+++ b/addons/website/static/tests/tours/snippet_shape_image.js
@@ -14,7 +14,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Click on the remove shape button",
-            trigger: "div[data-label='Shape'] i.oi-close",
+            trigger: "div[data-label='Shape'] i[data-icon=['close']",
             run: "click",
         },
         {
diff --git a/addons/website/static/tests/tours/snippet_social_media.js b/addons/website/static/tests/tours/snippet_social_media.js
index 8be47fab40d0e3..55441f136e41b1 100644
--- a/addons/website/static/tests/tours/snippet_social_media.js
+++ b/addons/website/static/tests/tours/snippet_social_media.js
@@ -40,7 +40,7 @@ const replaceIconByImage = function (url) {
     return [
         {
             content: "Replace the icon by an image",
-            trigger: `:iframe .s_social_media a[href='${url}'] i.fa`,
+            trigger: `:iframe .s_social_media a[href='${url}'] i.oi`,
             run: "dblclick",
         },
         {
@@ -138,9 +138,9 @@ registerWebsitePreviewTour(
                 ":has(a:eq(4)[href='/website/social/github'])" +
                 ":has(a:eq(5)[href='/website/social/tiktok'])" +
                 ":has(a:eq(6)[href='/website/social/discord'])" +
-                ":has(a:eq(7)[href='https://www.youtu.be/y7TlnAv6cto']:has(i.fa-youtube-play))" +
-                ":has(a:eq(8)[href='https://whatever.it/1EdSw9X']:has(i.fa-pencil))" +
-                ":has(a:eq(9)[href='https://instagr.am/odoo.official/']:has(i.fa-instagram))",
+                ":has(a:eq(7)[href='https://www.youtu.be/y7TlnAv6cto']:has(i[data-icon='oi_youtube-play']))" +
+                ":has(a:eq(8)[href='https://whatever.it/1EdSw9X']:has(i[data-icon='edit']))" +
+                ":has(a:eq(9)[href='https://instagr.am/odoo.official/']:has(i[data-icon='oi_instagram']))",
         },
         // Create a custom link, not officially supported, ensure icon is found.
         {
@@ -152,7 +152,7 @@ registerWebsitePreviewTour(
             content: "Ensure paypal icon is found",
             trigger:
                 ":iframe .s_social_media" +
-                ":has(a:eq(7)[href='https://www.paypal.com/abc']:has(i.fa-paypal))",
+                ":has(a:eq(7)[href='https://www.paypal.com/abc']:has(i[data-icon='oi_paypal']))",
         },
         ...preventRaceConditionStep,
         {
@@ -163,7 +163,7 @@ registerWebsitePreviewTour(
         {
             content: "Ensure custom link was removed",
             trigger:
-                ':iframe .s_social_media:has(a:eq(7)[href="https://whatever.it/1EdSw9X"]:has(i.fa-pencil))',
+                ':iframe .s_social_media:has(a:eq(7)[href="https://whatever.it/1EdSw9X"]:has(i[data-icon="edit"]))',
         },
         {
             content: "Click on the toggle to show Facebook",
@@ -182,8 +182,8 @@ registerWebsitePreviewTour(
                 ":has(a:eq(5)[href='/website/social/tiktok'])" +
                 ":has(a:eq(6)[href='/website/social/discord'])" +
                 ":has(a:eq(7)[href='/website/social/facebook'])" +
-                ":has(a:eq(8)[href='https://whatever.it/1EdSw9X']:has(i.fa-pencil))" +
-                ":has(a:eq(9)[href='https://instagr.am/odoo.official/']:has(i.fa-instagram))",
+                ":has(a:eq(8)[href='https://whatever.it/1EdSw9X']:has(i[data-icon='edit']))" +
+                ":has(a:eq(9)[href='https://instagr.am/odoo.official/']:has(i[data-icon='oi_instagram']))",
         },
         {
             content: "Change url of the DB instagram link",
@@ -199,12 +199,12 @@ registerWebsitePreviewTour(
         }),
         {
             content: "Check if we can still change custom icons",
-            trigger: ':iframe .s_social_media a[href="https://whatever.it/1EdSw9X"] i.fa-pencil',
+            trigger: ':iframe .s_social_media a[href="https://whatever.it/1EdSw9X"] i[data-icon="edit"]',
             run: "dblclick",
         },
         {
             content: "Select a new icon",
-            trigger: ".o_select_media_dialog .fa-heart",
+            trigger: ".o_select_media_dialog [data-icon='favorite']",
             run: "click",
         },
         {
@@ -219,8 +219,8 @@ registerWebsitePreviewTour(
                 ":has(a:eq(5)[href='/website/social/tiktok'])" +
                 ":has(a:eq(6)[href='/website/social/discord'])" +
                 ":has(a:eq(7)[href='/website/social/facebook'])" +
-                ":has(a:eq(8)[href='https://whatever.it/1EdSw9X']:has(i.fa-heart))" +
-                ":has(a:eq(9)[href='https://instagr.am/odoo.official/']:has(i.fa-instagram))",
+                ":has(a:eq(8)[href='https://whatever.it/1EdSw9X']:has(i[data-icon='favorite']))" +
+                ":has(a:eq(9)[href='https://instagr.am/odoo.official/']:has(i[data-icon='oi_instagram']))",
         },
         ...unfoldOptionsGroup("Social Media"),
         // Create a social network but replace its icon by an image before setting
diff --git a/addons/website/static/tests/tours/snippet_visibility_option.js b/addons/website/static/tests/tours/snippet_visibility_option.js
index 6fccafb5303468..6ee7f3e9d39656 100644
--- a/addons/website/static/tests/tours/snippet_visibility_option.js
+++ b/addons/website/static/tests/tours/snippet_visibility_option.js
@@ -54,7 +54,7 @@ registerWebsitePreviewTour(
             run: () => {
                 const isBlockInvisible = document
                     .querySelector("li .o_we_invisible_entry i")
-                    .classList.contains("fa-eye-slash");
+                    .dataset.icon.contains("visibility_off");
                 const isColumnEntryDisplayed = document.querySelector(
                     "li li .o_we_invisible_entry"
                 );
@@ -72,7 +72,7 @@ registerWebsitePreviewTour(
                 const isSubentryDisplayed = document.querySelector("li .o_we_invisible_entry");
                 const isPopupInvisible = document
                     .querySelector(".o_we_invisible_root_parent > i")
-                    .classList.contains("fa-eye-slash");
+                    .dataset.icon.contains("visibility_off");
                 if (!!isSubentryDisplayed || !isPopupInvisible) {
                     console.error("Visibility issue detected with the elements.");
                 }
@@ -95,13 +95,13 @@ registerWebsitePreviewTour(
             run: () => {
                 const isPopupVisible = document
                     .querySelector(".o_we_invisible_root_parent i")
-                    .classList.contains("fa-eye");
+                    .dataset.icon.contains("visibility");
                 const isBannerVisible = document
                     .querySelector("li .o_we_invisible_entry i")
-                    .classList.contains("fa-eye");
+                    .dataset.icon.contains("visibility");
                 const isColumnInvisible = document
                     .querySelector("li li .o_we_invisible_entry i")
-                    .classList.contains("fa-eye-slash");
+                    .dataset.icon.contains("visibility_off");
                 if (!isPopupVisible || !isBannerVisible || !isColumnInvisible) {
                     console.error("Visibility issue detected with the elements.");
                 }
@@ -119,7 +119,7 @@ registerWebsitePreviewTour(
                 const isSubentryDisplayed = document.querySelector("li .o_we_invisible_entry");
                 const isPopupInvisible = document
                     .querySelector(".o_we_invisible_root_parent > i")
-                    .classList.contains("fa-eye-slash");
+                    .dataset.icon.contains("visibility_off");
                 if (!!isSubentryDisplayed || !isPopupInvisible) {
                     console.error("Visibility issue detected with the elements.");
                 }
@@ -137,13 +137,13 @@ registerWebsitePreviewTour(
             run: () => {
                 const isPopupVisible = document
                     .querySelector(".o_we_invisible_root_parent i")
-                    .classList.contains("fa-eye");
+                    .dataset.icon.contains("visibility");
                 const isBannerVisible = document
                     .querySelector("li .o_we_invisible_entry i")
-                    .classList.contains("fa-eye");
+                    .dataset.icon.contains("visibility");
                 const isColumnInvisible = document
                     .querySelector("li li .o_we_invisible_entry i")
-                    .classList.contains("fa-eye-slash");
+                    .dataset.icon.contains("visibility_off");
                 if (!isPopupVisible || !isBannerVisible || !isColumnInvisible) {
                     console.error("Visibility issue detected with the elements.");
                 }
diff --git a/addons/website/static/tests/tours/website_form_editor.js b/addons/website/static/tests/tours/website_form_editor.js
index e2d61c79d715d4..2a2ca2a30fec4d 100644
--- a/addons/website/static/tests/tours/website_form_editor.js
+++ b/addons/website/static/tests/tours/website_form_editor.js
@@ -736,7 +736,7 @@ registerWebsitePreviewTour(
         {
             content: "Check that the delete button is disabled and shows the tooltip",
             trigger:
-                '.options-container-header span[title=\'The field "subject" is mandatory for the action "Send an E-mail".\'] > button.fa-trash[disabled]',
+                '.options-container-header span[title=\'The field "subject" is mandatory for the action "Send an E-mail".\'] > button[data-icon="delete"].oi-filled[disabled]',
         },
         ...changeOptionInPopover("Field", "Visibility Rule", "Visible only if"),
         ...selectButtonByData("Your Name", "[data-action-value='Philippe of Belgium']"),
@@ -1080,7 +1080,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Check the form was sent (success page without form)",
-            trigger: ':iframe body:not(:has([data-snippet="s_website_form"])) .fa-paper-plane',
+            trigger: ':iframe body:not(:has([data-snippet="s_website_form"])) [data-icon="send"]',
         },
         {
             content: "Go back to the form",
@@ -1104,7 +1104,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Check the form was again sent (success page without form)",
-            trigger: ':iframe body:not(:has([data-snippet="s_website_form"])) .fa-paper-plane',
+            trigger: ':iframe body:not(:has([data-snippet="s_website_form"])) [data-icon="send"]',
         },
     ]
 );
@@ -1256,7 +1256,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Check the form was again sent (success page without form)",
-            trigger: ":iframe body:not(:has([data-snippet='s_website_form'])) .fa-paper-plane",
+            trigger: ":iframe body:not(:has([data-snippet='s_website_form'])) [data-icon='send']",
         },
     ]
 );
diff --git a/addons/website/static/tests/tours/website_update_column_count.js b/addons/website/static/tests/tours/website_update_column_count.js
index ad3c0892aa2650..5bbe660ba55f0d 100644
--- a/addons/website/static/tests/tours/website_update_column_count.js
+++ b/addons/website/static/tests/tours/website_update_column_count.js
@@ -89,7 +89,7 @@ registerWebsitePreviewTour(
         },
         {
             content: `Target the "Columns" group`,
-            trigger: `.options-container[data-container-title="Columns"]:has(.options-container-label i.fa-caret-right) button[title="Select only this block"]`,
+            trigger: `.options-container[data-container-title="Columns"]:has(.options-container-label i[data-icon='arrow_right']) button[title="Select only this block"]`,
             run: "click",
         },
         {
diff --git a/addons/website/tests/test_fuzzy.py b/addons/website/tests/test_fuzzy.py
index 2151b0eeaa76ad..59abffef59dafd 100644
--- a/addons/website/tests/test_fuzzy.py
+++ b/addons/website/tests/test_fuzzy.py
@@ -153,7 +153,7 @@ def _autocomplete(self, term):
                 self.assertDictEqual(self.expectedParts, suggestions['parts'],
                                      f"Parts should contain {self.expectedParts.keys()}")
             for result in suggestions['results']:
-                self.assertEqual("fa-file-o", result['_fa'], "Expect an fa icon")
+                self.assertEqual("description", result['_icon'], "Expect an oi icon")
                 for field in suggestions['parts'].keys():
                     value = result[field]
                     if value:
diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
index 789d197ae8e917..0d34fec4f8bc18 100644
--- a/addons/website/views/res_config_settings_views.xml
+++ b/addons/website/views/res_config_settings_views.xml
@@ -49,7 +49,7 @@
                                 <field name="website_default_lang_id" options="{'no_open': True, 'no_create': True}" required="website_id"/>
                             </div>
                             <div class="mt8">
-                                <button type="action" name="%(base.action_view_base_language_install)d" string="Install new languages" class="btn-link" icon="oi-arrow-right"/>
+                                <button type="action" name="%(base.action_view_base_language_install)d" string="Install new languages" class="btn-link" icon="east"/>
                             </div>
                         </setting>
                         <setting string="Website Identification" help="Set your website's name and favicon, displayed in the browser tab next to the page title.">
@@ -79,7 +79,7 @@
                             <field name="auth_signup_uninvited" class="o_light_label" widget="radio" options="{'horizontal': true}" required="True"/>
                             <div class="content-group" invisible="auth_signup_uninvited == 'b2b'">
                                 <div class="mt8">
-                                    <button type="object" name="action_open_template_user" string="Default Access Rights" icon="oi-arrow-right" class="btn-link"/>
+                                    <button type="object" name="action_open_template_user" string="Default Access Rights" icon="east" class="btn-link"/>
                                 </div>
                             </div>
                         </setting>
@@ -112,7 +112,7 @@
                                     name="%(website.backend_dashboard)d"
                                     string=" See Analytics Report"
                                     class="btn-link fw-normal border-0"
-                                    icon="oi-arrow-right d-inline me-auto"
+                                    icon="east"
                                 />
                             </div>
                             <div invisible="not has_plausible_shared_key">
@@ -121,7 +121,7 @@
                                     name="documentation_link"
                                     path="/applications/websites/website/reporting/analytics.html#analytics-plausible"
                                     label=" How to create my Plausible Shared Link"
-                                    icon="oi oi-arrow-right"
+                                    icon="east"
                                 />
                             </div>
                         </setting>
@@ -144,7 +144,7 @@
                                     name="documentation_link"
                                     path="/applications/websites/website/reporting/analytics.html#analytics-google-analytics"
                                     label=" How to get my Measurement ID"
-                                    icon="oi oi-arrow-right"
+                                    icon="east"
                                 />
                             </div>
                         </setting>
@@ -178,7 +178,7 @@
                             groups="base.group_no_one"
                         >
                             <div class="mt4">
-                                <button type="object" name="action_open_robots" string="Edit robots.txt" class="btn-link" icon="fa-android" noSaveDialog="true"/>
+                                <button type="object" name="action_open_robots" string="Edit robots.txt" class="btn-link" icon="oi_android" noSaveDialog="true"/>
                             </div>
                         </setting>
                         <setting
@@ -208,7 +208,7 @@
                                     name="documentation_link"
                                     path="/applications/websites/website/configuration/google_search_console.html"
                                     label=" How to?"
-                                    icon="oi oi-arrow-right"
+                                    icon="east"
                                 />
                             </div>
                         </setting>
@@ -231,7 +231,7 @@
                                 <div class="mt4">
                                     <button type="object" name="action_open_blocked_third_party_domains"
                                         string="Add domains to the block list" class="btn-link"
-                                        icon="fa-ban" noSaveDialog="true"/>
+                                        icon="block" noSaveDialog="true"/>
                                 </div>
                             </div>
                         </setting>
diff --git a/addons/website/views/snippets/s_alert.xml b/addons/website/views/snippets/s_alert.xml
index 4e56071a9eec55..a6cb1ff53edd95 100644
--- a/addons/website/views/snippets/s_alert.xml
+++ b/addons/website/views/snippets/s_alert.xml
@@ -3,7 +3,7 @@
 
 <template id="s_alert" name="Alert">
     <div class="s_alert s_alert_md alert alert-info w-100 clearfix" role="alert" data-vcss="001">
-        <i class="fa fa-lg fa-info-circle fa-stack d-flex align-items-center justify-content-center me-3 p-2 rounded-1 s_alert_icon"/>
+        <i class="oi oi-lg oi-stack d-flex align-items-center justify-content-center me-3 p-2 rounded-1 s_alert_icon" data-icon="info"/>
         <div class="s_alert_content">
             <p>Explain the benefits you offer. <br/>Don't write about products or services here, write about solutions.</p>
         </div>
diff --git a/addons/website/views/snippets/s_badge.xml b/addons/website/views/snippets/s_badge.xml
index 439c6565f89b43..144d714a88089a 100644
--- a/addons/website/views/snippets/s_badge.xml
+++ b/addons/website/views/snippets/s_badge.xml
@@ -3,7 +3,7 @@
 
 <template name="Badge" id="s_badge">
     <span class="s_badge badge text-bg-secondary o_animable" data-name="Badge" data-vxml="001">
-        <i class="fa fa-fw fa-folder o_not-animable"/>Category
+        <i class="oi oi-fw oi-filled o_not-animable" data-icon="folder"/>Category
     </span>
 </template>
 
diff --git a/addons/website/views/snippets/s_banner.xml b/addons/website/views/snippets/s_banner.xml
index 545e76f9c99ffe..3316e4dbc13783 100644
--- a/addons/website/views/snippets/s_banner.xml
+++ b/addons/website/views/snippets/s_banner.xml
@@ -11,7 +11,7 @@
                     <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                     <p><br/></p>
                     <p>
-                        <a t-att-href="cta_btn_href" class="btn btn-lg btn-primary o_translate_inline">Start Now <span class="fa fa-angle-right ms-2"/></a>
+                        <a t-att-href="cta_btn_href" class="btn btn-lg btn-primary o_translate_inline">Start Now <span class="oi ms-2" data-icon="keyboard_arrow_right"/></a>
                     </p>
                 </div>
                 <div class="o_grid_item o_grid_item_image g-col-lg-4 g-height-10 col-lg-4 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 2; grid-area: 1 / 8 / 11 / 12;">
@@ -24,7 +24,7 @@
                     <blockquote class="s_blockquote s_blockquote_with_line o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-100 mx-auto p-4 fst-normal shadow" data-vcss="001" data-snippet="s_blockquote" data-name="Blockquote">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
                         <p class="s_blockquote_quote my-auto">"Write a quote here from one of your customers. Quotes are a great way to build confidence in your products."</p>
                         <div class="s_blockquote_infos d-flex gap-2 flex-row align-items-start justify-content-start w-100 text-start">
diff --git a/addons/website/views/snippets/s_bento_grid.xml b/addons/website/views/snippets/s_bento_grid.xml
index b3795f9fe673f8..5227437cbe1522 100644
--- a/addons/website/views/snippets/s_bento_grid.xml
+++ b/addons/website/views/snippets/s_bento_grid.xml
@@ -43,7 +43,7 @@
                     <blockquote class="s_blockquote o_animable position-relative d-flex flex-column gap-4 w-100 mx-auto p-1 fst-normal s_blockquote_default" data-vcss="001" data-snippet="s_blockquote" data-name="Blockquote">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"></i>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"></i>
                         </div>
                         <h2 class="h3-fs" style="text-align: center;">Expert's Review</h2>
                         <p class="s_blockquote_quote lead" style="text-align: center;">
diff --git a/addons/website/views/snippets/s_bento_grid_avatars.xml b/addons/website/views/snippets/s_bento_grid_avatars.xml
index 9fe8b7b26ff15d..9099dbda52a049 100644
--- a/addons/website/views/snippets/s_bento_grid_avatars.xml
+++ b/addons/website/views/snippets/s_bento_grid_avatars.xml
@@ -26,7 +26,7 @@
                     <h2 class="h4-fs">30% off wooden desks</h2>
                     <p>Enjoy 30% on all our wooden desks and elevate your workspace.</p>
                     <a href="#" title="" role="button" class="btn btn-secondary">
-                        Start saving&#160;&#160;<span class="fa fa-long-arrow-right" role="img"/>
+                        Start saving&#160;&#160;<span class="oi" data-icon="east" role="img"/>
                     </a>
                 </div>
                 <div class="o_grid_item g-col-lg-4 g-height-9 col-lg-4 rounded o_cc o_cc2 o_colored_level"
@@ -35,7 +35,7 @@
                     <blockquote class="s_blockquote s_blockquote_default o_cc o_cc2 o_animable position-relative d-flex flex-column gap-4 w-100 mx-auto p-1 fst-normal" data-vcss="001" data-snippet="s_blockquote" data-name="Blockquote">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
                         <p class="s_blockquote_quote my-auto lead h5-fs" style="text-align: center;">
                             “Our furniture balances style, comfort, and sustainability.”<br/>
diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml
index 0f1a7c2ef4bd33..8f708a8452d895 100644
--- a/addons/website/views/snippets/s_blockquote.xml
+++ b/addons/website/views/snippets/s_blockquote.xml
@@ -5,7 +5,7 @@
     <blockquote class="s_blockquote s_blockquote_with_line o_cc o_cc2 o_animable position-relative d-flex flex-column gap-4 w-100 mx-auto p-4 fst-normal" data-vcss="001">
         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
         </div>
         <p class="s_blockquote_quote my-auto">" Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services. "</p>
         <div class="s_blockquote_infos d-flex gap-2 flex-row align-items-start justify-content-start w-100 text-start">
diff --git a/addons/website/views/snippets/s_company_team_detail.xml b/addons/website/views/snippets/s_company_team_detail.xml
index 1aa375c3d27db2..4b6fe980cee732 100644
--- a/addons/website/views/snippets/s_company_team_detail.xml
+++ b/addons/website/views/snippets/s_company_team_detail.xml
@@ -17,13 +17,13 @@
                     <div class="s_social_media o_not_editable text-start no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h5 class="s_social_media_title d-none">Social Media</h5>
                         <a href="/website/social/github" class="s_social_media_github" target="_blank" aria-label="GitHub">
-                            <i class="fa fa-github o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_github"/>
                         </a>
                         <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
-                            <i class="fa fa-linkedin o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                         </a>
                     </div>
                 </div>
@@ -37,13 +37,13 @@
                     <div class="s_social_media o_not_editable text-start no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h4 class="s_social_media_title d-none h5-fs">Social Media</h4>
                         <a href="/website/social/github" class="s_social_media_github" target="_blank" aria-label="GitHub">
-                            <i class="fa fa-github o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_github"/>
                         </a>
                         <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
-                            <i class="fa fa-linkedin o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                         </a>
                     </div>
                 </div>
@@ -57,13 +57,13 @@
                     <div class="s_social_media o_not_editable text-start no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h4 class="s_social_media_title d-none h5-fs">Social Media</h4>
                         <a href="/website/social/github" class="s_social_media_github" target="_blank" aria-label="GitHub">
-                            <i class="fa fa-github o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_github"/>
                         </a>
                         <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
-                            <i class="fa fa-linkedin o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                         </a>
                     </div>
                 </div>
@@ -77,13 +77,13 @@
                     <div class="s_social_media o_not_editable text-start no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h4 class="s_social_media_title d-none h5-fs">Social Media</h4>
                         <a href="/website/social/github" class="s_social_media_github" target="_blank" aria-label="GitHub">
-                            <i class="fa fa-github o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_github"/>
                         </a>
                         <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
-                            <i class="fa fa-linkedin o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                         </a>
                     </div>
                 </div>
@@ -97,13 +97,13 @@
                     <div class="s_social_media o_not_editable text-start no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h4 class="s_social_media_title d-none h5-fs">Social Media</h4>
                         <a href="/website/social/github" class="s_social_media_github" target="_blank" aria-label="GitHub">
-                            <i class="fa fa-github o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_github"/>
                         </a>
                         <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
-                            <i class="fa fa-linkedin o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                         </a>
                     </div>
                 </div>
@@ -117,13 +117,13 @@
                     <div class="s_social_media o_not_editable text-start no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h4 class="s_social_media_title d-none h5-fs">Social Media</h4>
                         <a href="/website/social/github" class="s_social_media_github" target="_blank" aria-label="GitHub">
-                            <i class="fa fa-github o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_github"/>
                         </a>
                         <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
-                            <i class="fa fa-linkedin o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram o_editable_media fa-stack"/>
+                            <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                         </a>
                     </div>
                 </div>
diff --git a/addons/website/views/snippets/s_comparisons.xml b/addons/website/views/snippets/s_comparisons.xml
index 3d9074bb62a675..fecc76398c5eeb 100644
--- a/addons/website/views/snippets/s_comparisons.xml
+++ b/addons/website/views/snippets/s_comparisons.xml
@@ -20,10 +20,10 @@
                             <p class="card-text small">Ideal for newcomers. Essential features to kickstart sales and marketing. Perfect for small teams.</p>
                             <a href="/contactus" class="btn btn-outline-primary w-100 mb-3">Start Now</a>
                             <ul class="list-group list-group-flush text-start">
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  Sales &amp; marketing for 2</li>
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  Account management</li>
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-times text-danger" role="img"/>  No customization</li>
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-times text-danger" role="img"/>  No support</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  Sales &amp; marketing for 2</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  Account management</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-danger" data-icon="close" role="img"/>  No customization</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-danger" data-icon="close" role="img"/>  No support</li>
                             </ul>
                         </div>
                         <div class="card-footer text-center">
@@ -42,10 +42,10 @@
                             <p class="card-text small">Comprehensive tools for growing businesses. Optimize your processes and productivity across your team.</p>
                             <a href="/contactus" class="btn btn-primary w-100 mb-3">Start Now</a>
                             <ul class="list-group list-group-flush text-start">
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  Complete CRM for any team</li>
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  Access all modules</li>
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  Limited customization</li>
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  Email support</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  Complete CRM for any team</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  Access all modules</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  Limited customization</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  Email support</li>
                             </ul>
                         </div>
                         <div class="card-footer text-center">
@@ -64,10 +64,10 @@
                             <p class="card-text small">Advanced solution for enterprises. Cutting-edge features and top-tier support for maximum performance.</p>
                             <a href="/contactus" class="btn btn-outline-primary w-100 mb-3">Contact Us</a>
                             <ul class="list-group list-group-flush text-start">
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  Unlimited CRM support</li>
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  All modules &amp; features</li>
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  Unlimited customization</li>
-                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="fa fa-check text-success" role="img"/>  24/7 toll-free support</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  Unlimited CRM support</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  All modules &amp; features</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  Unlimited customization</li>
+                                <li class="list-group-item px-0 bg-transparent text-reset"><i class="oi text-success" data-icon="check" role="img"/>  24/7 toll-free support</li>
                             </ul>
                         </div>
                         <div class="card-footer text-center">
diff --git a/addons/website/views/snippets/s_comparisons_horizontal.xml b/addons/website/views/snippets/s_comparisons_horizontal.xml
index 45adf5e39514aa..1bc0ce597fcc45 100644
--- a/addons/website/views/snippets/s_comparisons_horizontal.xml
+++ b/addons/website/views/snippets/s_comparisons_horizontal.xml
@@ -22,10 +22,10 @@
                                 </div>
                                 <div class="col-12 col-lg-6">
                                     <ul class="list-group list-group-flush text-start">
-                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="fa fa-check-circle-o"/>  Complete CRM for any team</li>
-                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="fa fa-check-circle-o"/>  Access all modules</li>
-                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="fa fa-check-circle-o"/>  Limited Customization</li>
-                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="fa fa-check-circle-o"/>  Email support</li>
+                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="oi" data-icon="check_circle"/>  Complete CRM for any team</li>
+                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="oi" data-icon="check_circle"/>  Access all modules</li>
+                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="oi" data-icon="check_circle"/>  Limited Customization</li>
+                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="oi" data-icon="check_circle"/>  Email support</li>
                                     </ul>
                                 </div>
                             </div>
@@ -50,11 +50,11 @@
                                 </div>
                                 <div class="col-12 col-lg-6">
                                     <ul class="list-group list-group-flush text-start">
-                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="fa fa-check-circle-o"/>  PaaS Access</li>
-                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="fa fa-check-circle-o"/>  Unlimited CRM support</li>
-                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="fa fa-check-circle-o"/>  All modules &amp; features</li>
-                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="fa fa-check-circle-o"/>  Unlimited customization</li>
-                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="fa fa-check-circle-o"/>  24/7 Support</li>
+                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="oi" data-icon="check_circle"/>  PaaS Access</li>
+                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="oi" data-icon="check_circle"/>  Unlimited CRM support</li>
+                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="oi" data-icon="check_circle"/>  All modules &amp; features</li>
+                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="oi" data-icon="check_circle"/>  Unlimited customization</li>
+                                        <li class="list-group-item px-0 bg-transparent text-reset"><span class="oi" data-icon="check_circle"/>  24/7 Support</li>
                                     </ul>
                                 </div>
                             </div>
diff --git a/addons/website/views/snippets/s_contact_info.xml b/addons/website/views/snippets/s_contact_info.xml
index ba0bb9229e00e8..5deb64702ed979 100644
--- a/addons/website/views/snippets/s_contact_info.xml
+++ b/addons/website/views/snippets/s_contact_info.xml
@@ -11,7 +11,7 @@
                 </div>
                 <div class="o_grid_item g-col-lg-6 g-height-2 col-lg-6 col-10 offset-1 order-lg-0" style="order: 3; --grid-item-padding-x: 0px; --grid-item-padding-y: 16px; grid-area: 6 / 1 / 8 / 7; z-index: 2;" data-name="Info block">
                     <h3 class="h5-fs">
-                        <i class="fa fa-fw fa-envelope-o" role="presentation"/>
+                        <i class="oi oi-fw" data-icon="mail" role="presentation"/>
                         Email
                     </h3>
                     <p>
@@ -20,7 +20,7 @@
                 </div>
                 <div class="o_grid_item g-col-lg-6 g-height-2 col-lg-6 col-10 offset-1 order-lg-0" style="order: 4; --grid-item-padding-x: 0px; --grid-item-padding-y: 16px; grid-area: 8 / 1 / 10 / 7; z-index: 3;" data-name="Info block">
                     <h3 class="h5-fs">
-                        <i class="fa fa-fw fa-phone" role="presentation"/>
+                        <i class="oi oi-fw oi-filled" data-icon="phone" role="presentation"/>
                         Phone
                     </h3>
                     <p>
@@ -29,7 +29,7 @@
                 </div>
                 <div class="o_grid_item g-col-lg-6 g-height-2 col-lg-6 col-10 offset-1 order-lg-0" style="order: 5; --grid-item-padding-x: 0px; --grid-item-padding-y: 16px; grid-area: 10 / 1 / 12 / 7; z-index: 4;" data-name="Info block">
                     <h3 class="h5-fs">
-                        <i class="fa fa-fw fa-building-o" role="presentation"/>
+                        <i class="oi oi-fw" data-icon="business" role="presentation"/>
                         Office
                     </h3>
                     <p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;3575 Fake Buena Vista Avenue</p>
diff --git a/addons/website/views/snippets/s_countdown.xml b/addons/website/views/snippets/s_countdown.xml
index 28f4de84614585..94252733cc9eb9 100644
--- a/addons/website/views/snippets/s_countdown.xml
+++ b/addons/website/views/snippets/s_countdown.xml
@@ -36,7 +36,7 @@
     <t t-set="metrics" t-value="[days, hours, minutes, seconds]"/>
     <div class="o_template_default o_count_inline_text o_colored_item alert mb-0">
         <p>
-            <i class="fa fa-clock-o"/> Sale ends in
+            <i class="oi" data-icon="schedule"/> Sale ends in
             <span class="o_not_editable oe_unremovable" contenteditable="false">
                 <t t-foreach="metrics" t-as="metric">
                     <span class="o_count_item">
@@ -92,7 +92,7 @@
     <t t-set="metrics" t-value="[days, hours, minutes, seconds]"/>
     <div class="o_template_text o_count_inline_text">
         <p>
-            <i class="fa fa-clock-o"/> Sale ends in
+            <i class="oi" data-icon="schedule"/> Sale ends in
             <span class="o_not_editable oe_unremovable" contenteditable="false">
                 <t t-foreach="metrics" t-as="metric">
                     <span class="o_count_item o_colored_text">
diff --git a/addons/website/views/snippets/s_cta_badge.xml b/addons/website/views/snippets/s_cta_badge.xml
index 546aef62fefec0..80f8e67a62e22a 100644
--- a/addons/website/views/snippets/s_cta_badge.xml
+++ b/addons/website/views/snippets/s_cta_badge.xml
@@ -3,7 +3,7 @@
 
 <template name="CTA Badge" id="s_cta_badge">
     <span class="s_cta_badge d-inline-block my-3 border rounded py-2 px-3 o_cc o_cc1 o_animable" data-name="CTA Badge" style="border-radius: 32px !important;">
-        <i class="fa fa-fw fa-info-circle o_not-animable" role="img"/> What's new&#160;? <a href="#">Explore&#160;<i class="fa fa-long-arrow-right" role="img"/></a>
+        <i class="oi oi-fw o_not-animable" data-icon="info" role="img"/> What's new&#160;? <a href="#">Explore&#160;<i class="oi" data-icon="east" role="img"/></a>
     </span>
 </template>
 
diff --git a/addons/website/views/snippets/s_cta_card.xml b/addons/website/views/snippets/s_cta_card.xml
index e86fdd17c68100..3306319198ed3d 100644
--- a/addons/website/views/snippets/s_cta_card.xml
+++ b/addons/website/views/snippets/s_cta_card.xml
@@ -15,9 +15,9 @@
                         <div class="card-body p-4">
                             <h3 class="card-title h5-fs">What you will get</h3>
                             <br/>
-                            <p><i class="fa fa-check text-o-color-1" role="img"/>&#160;&#160;Wonderful experience</p>
-                            <p><i class="fa fa-check text-o-color-1" role="img"/>&#160;&#160;Quick support</p>
-                            <p><i class="fa fa-check text-o-color-1" role="img"/>&#160;&#160;Complete access</p>
+                            <p><i class="oi text-o-color-1" data-icon="check" role="img"/>&#160;&#160;Wonderful experience</p>
+                            <p><i class="oi text-o-color-1" data-icon="check" role="img"/>&#160;&#160;Quick support</p>
+                            <p><i class="oi text-o-color-1" data-icon="check" role="img"/>&#160;&#160;Complete access</p>
                             <a t-att-href="cta_btn_href" class="btn btn-primary w-100"><t t-out="cta_btn_text">Contact us</t></a>
                         </div>
                     </div>
diff --git a/addons/website/views/snippets/s_discovery.xml b/addons/website/views/snippets/s_discovery.xml
index 21256ba94c32de..adb176318ce706 100644
--- a/addons/website/views/snippets/s_discovery.xml
+++ b/addons/website/views/snippets/s_discovery.xml
@@ -5,7 +5,7 @@
     <section class="s_discovery pt136 pb136">
         <div class="container" style="text-align: center;">
             <span class="s_cta_badge o_cc o_cc1 d-inline-block my-3 border rounded py-2 px-3 o_animable" data-snippet="s_cta_badge" data-name="CTA Badge" style="border-radius: 32px !important;">
-                <i class="fa fa-fw fa-info-circle o_not-animable" role="img"/> What's new&#160;? <a href="#">Explore&#160;<i class="fa fa-long-arrow-right" role="img"/></a>
+                <i class="oi oi-fw o_not-animable" data-icon="info" role="img"/> What's new&#160;? <a href="#">Explore&#160;<i class="oi" data-icon="east" role="img"/></a>
             </span>
             <h1 class="display-2" style="text-align: center;">Discover our solutions</h1>
             <p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
diff --git a/addons/website/views/snippets/s_dynamic_snippet.xml b/addons/website/views/snippets/s_dynamic_snippet.xml
index c659aed6009e85..a1dd1b96bb7a29 100644
--- a/addons/website/views/snippets/s_dynamic_snippet.xml
+++ b/addons/website/views/snippets/s_dynamic_snippet.xml
@@ -3,7 +3,7 @@
     <template id="website.s_dynamic_snippet_template">
         <t t-set="snippet_title_default">Our latest content</t>
         <t t-set="snippet_description_default">Check out what's new in our company !</t>
-        <t t-set="snippet_button_text_default">See All <i class="fa fa-long-arrow-right ms-2" role="img"/></t>
+        <t t-set="snippet_button_text_default">See All <i class="oi ms-2" data-icon="east" role="img"/></t>
         <section t-att-data-snippet="snippet_name"
             t-attf-class="#{snippet_name} #{snippet_classes} s_dynamic o_dynamic_snippet_loading pt64 pb64"
             t-att-data-custom-template-data="custom_template_data or '{}'"
diff --git a/addons/website/views/snippets/s_empowerment.xml b/addons/website/views/snippets/s_empowerment.xml
index f0c3a4c8c1b0bb..dc61351ddebae3 100644
--- a/addons/website/views/snippets/s_empowerment.xml
+++ b/addons/website/views/snippets/s_empowerment.xml
@@ -7,7 +7,7 @@
             <div class="row o_grid_mode" data-row-count="12">
                 <div class="o_grid_item g-height-12 g-col-lg-7 col-lg-7" style="grid-area: 1 / 1 / 13 / 8; --grid-item-padding-x: 24px;">
                     <span class="s_cta_badge d-inline-block my-3 border rounded py-2 px-3 o_cc o_cc1 o_animable" data-snippet="s_cta_badge" data-name="CTA Badge" style="border-radius: 32px !important;">
-                        <i class="fa fa-fw fa-info-circle o_not-animable" role="img"/> What's new&#160;? <a href="#">Explore&#160;<i class="fa fa-long-arrow-right" role="img"/></a>
+                        <i class="oi oi-fw o_not-animable" data-icon="info" role="img"/> What's new&#160;? <a href="#">Explore&#160;<i class="oi" data-icon="east" role="img"/></a>
                     </span>
                     <h1 class="display-4">Empowering Your Success<br/>with Every Solution.</h1>
                     <p><br/></p>
diff --git a/addons/website/views/snippets/s_faq_horizontal.xml b/addons/website/views/snippets/s_faq_horizontal.xml
index 35e58e625e8c48..adbfdef0971872 100644
--- a/addons/website/views/snippets/s_faq_horizontal.xml
+++ b/addons/website/views/snippets/s_faq_horizontal.xml
@@ -24,7 +24,7 @@
                             <img src="/web/image/website.s_faq_horizontal_default_image_1" class="img img-fluid rounded" style="width: 100% !important" alt=""/>
                             <p><br/>The first step in the onboarding process is <b>account creation</b>. This involves signing up on our platform using your email address or social media accounts. Once you’ve created an account, you will receive a confirmation email with a link to activate your account. Upon activation, you’ll be prompted to complete your profile, which includes setting up your preferences, adding any necessary payment information, and selecting the initial features or modules you wish to use.</p>
                             <p>Next, you will be introduced to our <b>setup wizard</b>, which is designed to guide you through the basic configuration of the platform. The wizard will help you configure essential settings such as language, time zone, and notifications.</p>
-                            <p><a class="o_translate_inline" href="#">Read More <i class="fa fa-angle-right" role="img"/></a></p>
+                            <p><a class="o_translate_inline" href="#">Read More <i class="oi" data-icon="keyboard_arrow_right" role="img"/></a></p>
                         </span>
                     </article>
                 </div>
diff --git a/addons/website/views/snippets/s_features.xml b/addons/website/views/snippets/s_features.xml
index 08e813a68b3995..03379274218224 100644
--- a/addons/website/views/snippets/s_features.xml
+++ b/addons/website/views/snippets/s_features.xml
@@ -11,7 +11,7 @@
                     <div class="s_hr pt-4 pb32">
                         <hr class="w-100 mx-auto"/>
                     </div>
-                    <i class="s_features_icon fa fa-paper-plane-o mb-3 rounded bg-o-color-3" role="img"/>
+                    <i class="s_features_icon oi mb-3 rounded bg-o-color-3" data-icon="send" role="img"/>
                     <div class="overflow-hidden">
                         <h3 class="h5-fs">Reliability</h3>
                         <p>Consistent performance and uptime ensure efficient, reliable service with minimal interruptions and quick response times.</p>
@@ -21,7 +21,7 @@
                     <div class="s_hr pt-4 pb32">
                         <hr class="w-100 mx-auto"/>
                     </div>
-                    <i class="s_features_icon fa fa-credit-card mb-3 rounded bg-o-color-3" role="img"/>
+                    <i class="s_features_icon oi mb-3 rounded bg-o-color-3" data-icon="credit_card" role="img"/>
                     <div class="overflow-hidden">
                         <h3 class="h5-fs">Performance</h3>
                         <p>Speed and efficiency ensure tasks are completed quickly and resources are used optimally, enhancing productivity and satisfaction.</p>
@@ -31,7 +31,7 @@
                     <div class="s_hr pt-4 pb32">
                         <hr class="w-100 mx-auto"/>
                     </div>
-                    <i class="s_features_icon fa fa-flag-o mb-3 rounded bg-o-color-3" role="img"/>
+                    <i class="s_features_icon oi mb-3 rounded bg-o-color-3" data-icon="flag" role="img"/>
                     <div class="overflow-hidden">
                         <h3 class="h5-fs">Scalability</h3>
                         <p>Growth capability is a system's ability to scale and adapt, meeting increasing demands and evolving needs for long-term success.</p>
diff --git a/addons/website/views/snippets/s_features_grid.xml b/addons/website/views/snippets/s_features_grid.xml
index 06df488b4ffa3b..a18cb411400331 100644
--- a/addons/website/views/snippets/s_features_grid.xml
+++ b/addons/website/views/snippets/s_features_grid.xml
@@ -15,21 +15,21 @@
                             </div>
                         </div>
                         <div class="col-lg-12 py-3" data-name="Box">
-                            <i class="fa fa-flag-o rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" role="img"/>
+                            <i class="oi rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" data-icon="flag" role="img"/>
                             <div class="s_features_grid_content mb-0 d-flex flex-column">
                                 <h3 class="h5-fs">Change Icons</h3>
                                 <p>Double click an icon to replace it with one of your choice.</p>
                             </div>
                         </div>
                         <div class="col-lg-12 py-3" data-name="Box">
-                            <i class="fa fa-files-o rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" role="img"/>
+                            <i class="oi rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" data-icon="content_copy" role="img"/>
                             <div class="s_features_grid_content d-flex flex-column">
                                 <h3 class="h5-fs">Duplicate</h3>
                                 <p>Duplicate blocks and columns to add more features.</p>
                             </div>
                         </div>
                         <div class="col-lg-12 py-3" data-name="Box">
-                            <i class="fa fa-trash-o rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" role="img"/>
+                            <i class="oi rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" data-icon="delete" role="img"/>
                             <div class="s_features_grid_content d-flex flex-column">
                                 <h3 class="h5-fs">Delete Blocks</h3>
                                 <p>Select and delete blocks to remove features.</p>
@@ -47,21 +47,21 @@
                             </div>
                         </div>
                         <div class="col-lg-12 py-3" data-name="Box">
-                            <i class="fa fa-magic rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" role="img"/>
+                            <i class="oi rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" data-icon="wand_stars" role="img"/>
                             <div class="s_features_grid_content d-flex flex-column">
                                 <h3 class="h5-fs">Great Value</h3>
                                 <p>Turn every feature into a benefit for your reader.</p>
                             </div>
                         </div>
                         <div class="col-lg-12 py-3" data-name="Box">
-                            <i class="fa fa-eyedropper rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" role="img"/>
+                            <i class="oi rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" data-icon="colorize" role="img"/>
                             <div class="s_features_grid_content d-flex flex-column">
                                 <h3 class="h5-fs">Edit Styles</h3>
                                 <p>You can edit colors and backgrounds to highlight features.</p>
                             </div>
                         </div>
                         <div class="col-lg-12 py-3" data-name="Box">
-                            <i class="fa fa-picture-o rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" role="img"/>
+                            <i class="oi rounded bg-o-color-3 s_features_grid_icon float-start flex-shrink-0" data-icon="image" role="img"/>
                             <div class="s_features_grid_content d-flex flex-column">
                                 <h3 class="h5-fs">Sample Icons</h3>
                                 <p>All these icons are completely free for commercial use.</p>
diff --git a/addons/website/views/snippets/s_features_wave.xml b/addons/website/views/snippets/s_features_wave.xml
index aaf0ecd3b37fa2..5da53f98ad55cb 100644
--- a/addons/website/views/snippets/s_features_wave.xml
+++ b/addons/website/views/snippets/s_features_wave.xml
@@ -10,37 +10,37 @@
             <p><br/></p>
             <div class="row">
                 <div class="col-lg-4 pt24 pb24">
-                    <i class="fa fa-thumbs-o-up d-block mx-auto border rounded fa-2x" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
+                    <i class="oi oi-2x d-block mx-auto border rounded" data-icon="thumb_up" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
                     <br/>
                     <h3 class="h4-fs" style="text-align: center;">Reliability</h3>
                     <p style="text-align: center;">Consistent performance and uptime ensure efficient, reliable service with minimal interruptions and quick response times.</p>
                 </div>
                 <div class="col-lg-4 pt24 pb24">
-                    <i class="fa fa-star-o d-block mx-auto border rounded fa-2x" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
+                    <i class="oi oi-2x d-block mx-auto border rounded" data-icon="star" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
                     <br/>
                     <h3 class="h4-fs" style="text-align: center;">Performance</h3>
                     <p style="text-align: center;">Speed and efficiency ensure tasks are completed quickly and resources are used optimally, enhancing productivity and satisfaction.</p>
                 </div>
                 <div class="col-lg-4 pt24 pb24">
-                    <i class="fa fa-flag-o d-block mx-auto border rounded fa-2x" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
+                    <i class="oi oi-2x d-block mx-auto border rounded" data-icon="flag" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
                     <br/>
                     <h3 class="h4-fs" style="text-align: center;">Scalability</h3>
                     <p style="text-align: center;">Growth capability is a system's ability to scale and adapt, meeting increasing demands and evolving needs for long-term success.</p>
                 </div>
                 <div class="col-lg-4 pt24 pb24">
-                    <i class="fa fa-edit d-block mx-auto border rounded fa-2x" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
+                    <i class="oi oi-2x oi-filled d-block mx-auto border rounded" data-icon="edit" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
                     <br/>
                     <h3 class="h4-fs" style="text-align: center;">Customizable Settings</h3>
                     <p style="text-align: center;">Tailor the platform to your needs, offering flexibility and control over your user experience.</p>
                 </div>
                 <div class="col-lg-4 pt24 pb24">
-                    <i class="fa fa-user-o d-block mx-auto border rounded fa-2x" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
+                    <i class="oi oi-2x d-block mx-auto border rounded" data-icon="person" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
                     <br/>
                     <h3 class="h4-fs" style="text-align: center;">User-Friendly Interface</h3>
                     <p style="text-align: center;">The intuitive design ensures smooth navigation, enhancing user experience without needing technical expertise.</p>
                 </div>
                 <div class="col-lg-4 pt24 pb24">
-                    <i class="fa fa-smile-o d-block mx-auto border rounded fa-2x" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
+                    <i class="oi oi-2x d-block mx-auto border rounded" data-icon="sentiment_satisfied" style="background-color: rgba(0, 0, 0, 0);" role="presentation"/>
                     <br/>
                     <h3 class="h4-fs" style="text-align: center;">24/7 Customer Support</h3>
                     <p style="text-align: center;">Round-the-clock assistance is available, ensuring issues are resolved quickly, keeping your operations running smoothly.</p>
diff --git a/addons/website/views/snippets/s_icon.xml b/addons/website/views/snippets/s_icon.xml
index 0872ab2c83b43f..c7bfd726df0f9e 100644
--- a/addons/website/views/snippets/s_icon.xml
+++ b/addons/website/views/snippets/s_icon.xml
@@ -3,7 +3,7 @@
 
 <template id="s_icon" name="Icon">
     <div class="s_icon">
-        <span class="fa fa-heart" />
+        <span class="oi oi-filled" data-icon="favorite" />
     </div>
 </template>
 
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index e98e363d72e90d..797eaf6ad67c86 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -13,7 +13,7 @@
                         <div class="col-lg-8 s_media_list_body">
                             <h3>Media heading</h3>
                             <p>Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fits your needs.</p>
-                            <a href="#">Discover more <i class="fa fa-long-arrow-right align-middle ms-1"/></a>
+                            <a href="#">Discover more <i class="oi align-middle ms-1" data-icon="east"/></a>
                         </div>
                     </div>
                 </div>
@@ -36,7 +36,7 @@
                         <div class="col-lg-8 s_media_list_body">
                             <h3>Post heading</h3>
                             <p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
-                            <a href="#">Continue reading <i class="fa fa-long-arrow-right align-middle ms-1"/></a>
+                            <a href="#">Continue reading <i class="oi align-middle ms-1" data-icon="east"/></a>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml b/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
index 9ff9a510ae4060..94b8ee14309169 100644
--- a/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
+++ b/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
@@ -9,15 +9,18 @@
                 <div class="col-12 col-lg-4">
                     <nav class="nav flex-column w-100">
                         <t t-call="website.s_mega_menu_big_icons_subtitles_item"
-                            _icon_classes.f="fa-user bg-o-color-1"
+                            _icon_classes.f="oi-filled bg-o-color-1"
+                            _icon.f="group"
                             _title.translate="About us"
                             _text.translate="Discover our culture and our values"/>
                         <t t-call="website.s_mega_menu_big_icons_subtitles_item"
-                            _icon_classes.f="fa-newspaper-o bg-o-color-2"
+                            _icon_classes.f="bg-o-color-2"
+                            _icon.f="newspaper"
                             _title.translate="Blog"
                             _text.translate="Latests news and case studies"/>
                         <t t-call="website.s_mega_menu_big_icons_subtitles_item"
-                            _icon_classes.f="fa-calendar bg-o-color-3"
+                            _icon_classes.f="oi-filled bg-o-color-3"
+                            _icon.f="calendar_today"
                             _title.translate="Events"
                             _text.translate="Our seminars and trainings for you"/>
                     </nav>
@@ -25,15 +28,18 @@
                 <div class="col-12 col-lg-4">
                     <nav class="nav flex-column w-100">
                         <t t-call="website.s_mega_menu_big_icons_subtitles_item"
-                            _icon_classes.f="fa-star bg-o-color-5"
+                            _icon_classes.f="oi-filled bg-o-color-5"
+                            _icon.f="star"
                             _title.translate="Customers"
                             _text.translate="They trust us since years"/>
                         <t t-call="website.s_mega_menu_big_icons_subtitles_item"
-                            _icon_classes.f="fa-handshake-o bg-o-color-3"
+                            _icon_classes.f="bg-o-color-3"
+                            _icon.f="handshake"
                             _title.translate="Services"
                             _text.translate="Find the perfect solution for you"/>
                         <t t-call="website.s_mega_menu_big_icons_subtitles_item"
-                            _icon_classes.f="fa-paint-brush bg-o-color-2"
+                            _icon_classes.f="bg-o-color-2"
+                            _icon.f="design_services"
                             _title.translate="Portfolio"
                             _text.translate="Discover our realisations"/>
                     </nav>
@@ -41,15 +47,18 @@
                 <div class="col-12 col-lg-4">
                     <nav class="nav flex-column w-100">
                         <t t-call="website.s_mega_menu_big_icons_subtitles_item"
-                            _icon_classes.f="fa-question-circle bg-o-color-1"
+                            _icon_classes.f="bg-o-color-1"
+                            _icon.f="help"
                             _title.translate="F.A.Q."
                             _text.translate="All informations you need"/>
                         <t t-call="website.s_mega_menu_big_icons_subtitles_item"
-                            _icon_classes.f="fa-shopping-basket bg-o-color-5"
+                            _icon_classes.f="bg-o-color-5"
+                            _icon.f="shopping_basket"
                             _title.translate="Points of sale"
                             _text.translate="Find a store near you"/>
                         <t t-call="website.s_mega_menu_big_icons_subtitles_item"
-                            _icon_classes.f="fa-legal bg-o-color-3"
+                            _icon_classes.f="bg-o-color-3"
+                            _icon.f="gavel"
                             _title.translate="Legal Notice"
                             _text.translate="Discover our legal notice"/>
                     </nav>
@@ -62,7 +71,7 @@
 <template id="s_mega_menu_big_icons_subtitles_item">
     <a href="#" class="nav-link px-2 my-2 rounded text-wrap" data-name="Menu Item">
         <div class="d-flex align-items-center">
-            <i t-attf-class="fa rounded rounded-circle me-3 #{_icon_classes}"/>
+            <i t-attf-class="oi rounded rounded-circle me-3 #{_icon_classes}" t-att-data-icon="_icon"/>
             <div class="flex-grow-1">
                 <h4 class="mt-0 mb-0" t-out="_title"/>
                 <span class="small"><t t-out="_text"/></span>
diff --git a/addons/website/views/snippets/s_mega_menu_little_icons.xml b/addons/website/views/snippets/s_mega_menu_little_icons.xml
index da05d958d854cd..2236348dff4837 100644
--- a/addons/website/views/snippets/s_mega_menu_little_icons.xml
+++ b/addons/website/views/snippets/s_mega_menu_little_icons.xml
@@ -8,15 +8,15 @@
                 <div class="col-12 col-lg-3 py-2 d-flex align-items-center">
                     <nav class="nav flex-column">
                         <a href="#" class="nav-link px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-eye fa-fw me-2"></i>
+                            <i class="s_mega_menu_little_icons_icon oi oi-fw me-2" data-icon="visibility"></i>
                             <b>About us</b>
                         </a>
                         <a href="#" class="nav-link px-2 text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-group fa-fw me-2"></i>
+                            <i class="s_mega_menu_little_icons_icon oi oi-fw oi-filled me-2" data-icon="group"></i>
                             <b>Partners</b>
                         </a>
                         <a href="#" class="nav-link px-2 text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-star-o fa-fw me-2"></i>
+                            <i class="s_mega_menu_little_icons_icon oi oi-fw me-2" data-icon="star"></i>
                             <b>Customers</b>
                         </a>
                     </nav>
@@ -24,15 +24,15 @@
                 <div class="col-12 col-lg-3 py-2 d-flex align-items-center">
                     <nav class="nav flex-column">
                         <a href="#" class="nav-link px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-tags fa-fw me-2"></i>
+                            <i class="s_mega_menu_little_icons_icon oi oi-fw me-2" data-icon="sell"></i>
                             <b>Products</b>
                         </a>
                         <a href="#" class="nav-link px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-handshake-o fa-fw me-2"></i>
+                            <i class="s_mega_menu_little_icons_icon oi oi-fw me-2" data-icon="handshake"></i>
                             <b>Services</b>
                         </a>
                         <a href="#" class="nav-link px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-headphones fa-fw me-2"></i>
+                            <i class="s_mega_menu_little_icons_icon oi oi-fw me-2" data-icon="headphones"></i>
                             <b>Help center</b>
                         </a>
                     </nav>
@@ -40,15 +40,15 @@
                 <div class="col-12 col-lg-3 py-2 d-flex align-items-center">
                     <nav class="nav flex-column">
                         <a href="#" class="nav-link px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-newspaper-o fa-fw me-2"></i>
+                            <i class="s_mega_menu_little_icons_icon oi oi-fw me-2" data-icon="newspaper"></i>
                             <b>Our blog</b>
                         </a>
                         <a href="#" class="nav-link px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-calendar fa-fw me-2"></i>
+                            <i class="s_mega_menu_little_icons_icon oi oi-fw oi-filled me-2" data-icon="calendar_today"></i>
                             <b>Events</b>
                         </a>
                         <a href="#" class="nav-link px-2 rounded text-wrap" data-name="Menu Item">
-                            <i class="s_mega_menu_little_icons_icon fa fa-map-o fa-fw me-2"></i>
+                            <i class="s_mega_menu_little_icons_icon oi oi-fw me-2" data-icon="map"></i>
                             <b>Guides</b>
                         </a>
                     </nav>
diff --git a/addons/website/views/snippets/s_mega_menu_odoo_menu.xml b/addons/website/views/snippets/s_mega_menu_odoo_menu.xml
index 319f9c424a65f1..b9877a6454536c 100644
--- a/addons/website/views/snippets/s_mega_menu_odoo_menu.xml
+++ b/addons/website/views/snippets/s_mega_menu_odoo_menu.xml
@@ -63,28 +63,28 @@
                     <div class="s_social_media text-center o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                         <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
                         <a href="/website/social/facebook" class="s_social_media_facebook me-3 ms-3" target="_blank" aria-label="Facebook">
-                            <i class="fa fa-2x fa-facebook m-1 o_editable_media"/>
+                            <i class="oi oi-2x m-1 o_editable_media" data-icon="oi_facebook"/>
                         </a>
                         <a href="/website/social/twitter" class="s_social_media_twitter me-3 ms-3" target="_blank" aria-label="X">
-                            <i class="fa fa-2x fa-twitter m-1 o_editable_media"/>
+                            <i class="oi oi-2x m-1 o_editable_media" data-icon="oi_x"/>
                         </a>
                         <a href="/website/social/linkedin" class="s_social_media_linkedin me-3 ms-3" target="_blank" aria-label="LinkedIn">
-                            <i class="fa fa-2x fa-linkedin m-1 o_editable_media"/>
+                            <i class="oi oi-2x m-1 o_editable_media" data-icon="oi_linkedin"/>
                         </a>
                         <a href="/website/social/github" class="s_social_media_github me-3 ms-3" target="_blank" aria-label="GitHub">
-                            <i class="fa fa-2x fa-github m-1 o_editable_media"/>
+                            <i class="oi oi-2x m-1 o_editable_media" data-icon="oi_github"/>
                         </a>
                         <a href="/website/social/youtube" class="s_social_media_youtube me-3 ms-3" target="_blank" aria-label="YouTube">
-                            <i class="fa fa-2x fa-youtube-play m-1 o_editable_media"/>
+                            <i class="oi oi-2x m-1 o_editable_media" data-icon="oi_youtube-play"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram me-3 ms-3" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-2x fa-instagram m-1 o_editable_media"/>
+                            <i class="oi oi-2x m-1 o_editable_media" data-icon="oi_instagram"/>
                         </a>
                         <a href="/website/social/tiktok" class="s_social_media_tiktok me-3 ms-3" target="_blank" aria-label="TikTok">
-                            <i class="fa fa-2x fa-tiktok m-1 o_editable_media"/>
+                            <i class="oi oi-2x m-1 o_editable_media" data-icon="oi_tiktok"/>
                         </a>
                         <a href="/website/social/discord" class="s_social_media_discord me-3 ms-3" target="_blank" aria-label="Discord">
-                            <i class="fa fa-2x fa-discord m-1 o_editable_media"/>
+                            <i class="oi oi-2x m-1 o_editable_media" data-icon="oi_discord"/>
                         </a>
                     </div>
                 </div>
diff --git a/addons/website/views/snippets/s_mega_menu_thumbnails.xml b/addons/website/views/snippets/s_mega_menu_thumbnails.xml
index 57e3937747d8da..ee3553259f11f8 100644
--- a/addons/website/views/snippets/s_mega_menu_thumbnails.xml
+++ b/addons/website/views/snippets/s_mega_menu_thumbnails.xml
@@ -58,22 +58,22 @@
             <div class="container row mx-auto px-0 w-100 align-items-center">
                 <div class="col-12 col-lg-3 d-flex justify-content-center align-items-center py-2">
                     <p class="text-muted align-middle m-0">
-                        <i class="s_mega_menu_thumbnails_icon fa fa-cube me-2"></i> Free returns
+                        <i class="s_mega_menu_thumbnails_icon oi me-2" data-icon="deployed_code"></i> Free returns
                     </p>
                 </div>
                 <div class="col-12 col-lg-3 d-flex justify-content-center align-items-center py-2">
                     <p class="text-muted align-middle m-0">
-                        <i class="s_mega_menu_thumbnails_icon fa fa-shopping-basket me-2"></i> Pickup in store
+                        <i class="s_mega_menu_thumbnails_icon oi me-2" data-icon="shopping_basket"></i> Pickup in store
                     </p>
                 </div>
                 <div class="col-12 col-lg-3 d-flex justify-content-center align-items-center py-2">
                     <p class="text-muted align-middle m-0">
-                        <i class="s_mega_menu_thumbnails_icon fa fa-truck me-2"></i> Express delivery
+                        <i class="s_mega_menu_thumbnails_icon oi me-2" data-icon="local_shipping"></i> Express delivery
                     </p>
                 </div>
                 <div class="col-12 col-lg-3 py-2">
                     <a href="#" class="btn btn-secondary d-block">
-                        <i class="s_mega_menu_thumbnails_icon fa fa-comments me-2"></i> Contact us
+                        <i class="s_mega_menu_thumbnails_icon oi oi-filled me-2" data-icon="forum"></i> Contact us
                     </a>
                 </div>
             </div>
diff --git a/addons/website/views/snippets/s_quotes_carousel.xml b/addons/website/views/snippets/s_quotes_carousel.xml
index c325ff7a091c53..724a5816483c11 100644
--- a/addons/website/views/snippets/s_quotes_carousel.xml
+++ b/addons/website/views/snippets/s_quotes_carousel.xml
@@ -12,7 +12,7 @@
                     <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_with_icon o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-50 mx-auto p-5 fst-normal" data-vcss="001">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
                         <p class="s_blockquote_quote my-auto h4-fs" style="text-align:center;">" Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services. "</p>
                         <div class="s_blockquote_infos d-flex gap-2 flex-column align-items-center w-100 text-center">
@@ -31,7 +31,7 @@
                     <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_with_icon o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-50 mx-auto p-5 fst-normal" data-vcss="001">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
                         <p class="s_blockquote_quote my-auto h4-fs" style="text-align:center;">" Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services. "</p>
                         <div class="s_blockquote_infos d-flex gap-2 flex-column align-items-center w-100 text-center">
@@ -50,7 +50,7 @@
                     <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_with_icon o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-50 mx-auto p-5 fst-normal" data-vcss="001">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
                         <p class="s_blockquote_quote my-auto h4-fs" style="text-align:center;">" Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services. "</p>
                         <div class="s_blockquote_infos d-flex gap-2 flex-column align-items-center w-100 text-center">
diff --git a/addons/website/views/snippets/s_quotes_carousel_compact.xml b/addons/website/views/snippets/s_quotes_carousel_compact.xml
index 97dc99bddb6663..a8fa4dde7cd72f 100644
--- a/addons/website/views/snippets/s_quotes_carousel_compact.xml
+++ b/addons/website/views/snippets/s_quotes_carousel_compact.xml
@@ -14,7 +14,7 @@
                             <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_default o_animable position-relative d-flex flex-column gap-4 w-100 me-auto my-4 p-1 fst-normal" data-vcss="001">
                                 <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                                 <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                                    <i class="s_blockquote_icon fa fa-quote-right fa-3x d-block mx-auto" role="img"/>
+                                    <i class="s_blockquote_icon oi oi-3x d-block mx-auto" data-icon="format_quote" role="img"/>
                                 </div>
                                 <p class="s_blockquote_quote my-auto h2-fs">" This company transformed our business. <br/>Their solutions are innovative and reliable. "</p>
                                 <div class="s_blockquote_infos gap-2 flex-row align-items-start justify-content-start w-100 text-start">
@@ -37,7 +37,7 @@
                             <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_default o_animable position-relative d-flex flex-column gap-4 w-100 me-auto my-4 p-1 fst-normal" data-vcss="001">
                                 <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                                 <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                                    <i class="s_blockquote_icon fa fa-quote-right fa-3x d-block mx-auto" role="img"/>
+                                    <i class="s_blockquote_icon oi oi-3x d-block mx-auto" data-icon="format_quote" role="img"/>
                                 </div>
                                 <p class="s_blockquote_quote my-auto h2-fs">" A trusted partner for growth. <br/>Professional, efficient, and always ahead of the curve. "</p>
                                 <div class="s_blockquote_infos gap-2 flex-row align-items-start justify-content-start w-100 text-start">
@@ -60,7 +60,7 @@
                             <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_default o_animable position-relative d-flex flex-column gap-4 w-100 me-auto my-4 p-1 fst-normal" data-vcss="001">
                                 <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                                 <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                                    <i class="s_blockquote_icon fa fa-quote-right fa-3x d-block mx-auto" role="img"/>
+                                    <i class="s_blockquote_icon oi oi-3x d-block mx-auto" data-icon="format_quote" role="img"/>
                                 </div>
                                 <p class="s_blockquote_quote my-auto h2-fs">" Outstanding service and results! <br/>They exceeded our expectations in every project. "</p>
                                 <div class="s_blockquote_infos gap-2 flex-row align-items-start justify-content-start w-100 text-start">
diff --git a/addons/website/views/snippets/s_quotes_carousel_minimal.xml b/addons/website/views/snippets/s_quotes_carousel_minimal.xml
index 88673ec2779db8..d41704c66d92c5 100644
--- a/addons/website/views/snippets/s_quotes_carousel_minimal.xml
+++ b/addons/website/views/snippets/s_quotes_carousel_minimal.xml
@@ -12,7 +12,7 @@
                     <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_with_icon o_animable position-relative d-flex flex-column gap-4 w-75 mx-auto my-4 p-5 fst-normal" data-vcss="001">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right fa-3x d-block mx-auto" role="img"/>
+                            <i class="s_blockquote_icon oi oi-3x d-block mx-auto" data-icon="format_quote" role="img"/>
                         </div>
                         <p class="s_blockquote_quote my-auto h3-fs" style="text-align:center;">" This company transformed our business. <br/>Their solutions are innovative and reliable. "</p>
                         <div class="s_blockquote_infos d-flex gap-2 flex-column align-items-center w-100 text-center">
@@ -31,7 +31,7 @@
                     <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_with_icon o_animable position-relative d-flex flex-column gap-4 w-75 mx-auto my-4 p-5 fst-normal" data-vcss="001">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right fa-3x d-block mx-auto" role="img"/>
+                            <i class="s_blockquote_icon oi oi-3x d-block mx-auto" data-icon="format_quote" role="img"/>
                         </div>
                         <p class="s_blockquote_quote my-auto h3-fs" style="text-align:center;">" A trusted partner for growth. <br/>Professional, efficient, and always ahead of the curve. "</p>
                         <div class="s_blockquote_infos d-flex gap-2 flex-column align-items-center w-100 text-center">
@@ -50,7 +50,7 @@
                     <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_with_icon o_animable position-relative d-flex flex-column gap-4 w-75 mx-auto my-4 p-5 fst-normal" data-vcss="001">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right fa-3x d-block mx-auto" role="img"/>
+                            <i class="s_blockquote_icon oi oi-3x d-block mx-auto" data-icon="format_quote" role="img"/>
                         </div>
                         <p class="s_blockquote_quote my-auto h3-fs" style="text-align:center;">" Outstanding service and results! <br/>They exceeded our expectations in every project. "</p>
                         <div class="s_blockquote_infos d-flex gap-2 flex-column align-items-center w-100 text-center">
diff --git a/addons/website/views/snippets/s_rating.xml b/addons/website/views/snippets/s_rating.xml
index a5d17a01c8fbf0..06c179d3844aab 100644
--- a/addons/website/views/snippets/s_rating.xml
+++ b/addons/website/views/snippets/s_rating.xml
@@ -2,17 +2,17 @@
 <odoo>
 
 <template id="s_rating" name="Rating">
-    <div class="s_rating s_rating_no_title pt16 pb16" data-vcss="001" data-icon="fa-star" aria-label="3 out of 5 stars">
+    <div class="s_rating s_rating_no_title pt16 pb16" data-vcss="001" data-rating-icon="star" aria-label="3 out of 5 stars">
         <strong class="s_rating_title">Rating</strong>
         <div class="s_rating_icons o_not_editable">
             <span class="s_rating_active_icons" style="color: #f3cc00;">
-                <i class="fa fa-star" role="presentation"/>
-                <i class="fa fa-star" role="presentation"/>
-                <i class="fa fa-star" role="presentation"/>
+                <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                <i class="oi oi-filled" data-icon="star" role="presentation"/>
             </span>
             <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                <i class="fa fa-star" role="presentation"/>
-                <i class="fa fa-star" role="presentation"/>
+                <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                <i class="oi oi-filled" data-icon="star" role="presentation"/>
             </span>
         </div>
     </div>
diff --git a/addons/website/views/snippets/s_references.xml b/addons/website/views/snippets/s_references.xml
index 8f88256005d10a..aa19307dbc840e 100644
--- a/addons/website/views/snippets/s_references.xml
+++ b/addons/website/views/snippets/s_references.xml
@@ -7,7 +7,7 @@
             <h2 style="text-align: center;">Partners and references</h2>
             <p class="lead" style="text-align: center;">Use this section to boost your company's credibility.</p>
             <p style="text-align: center;">
-                <a class="o_translate_inline" href="#">See our case studies <i class="fa fa-long-arrow-right ms-2"/></a>
+                <a class="o_translate_inline" href="#">See our case studies <i class="oi ms-2" data-icon="east"/></a>
             </p>
             <p><br/></p>
             <div class="row">
diff --git a/addons/website/views/snippets/s_references_social.xml b/addons/website/views/snippets/s_references_social.xml
index 9154286c226be1..e65a4826694a63 100644
--- a/addons/website/views/snippets/s_references_social.xml
+++ b/addons/website/views/snippets/s_references_social.xml
@@ -14,13 +14,13 @@
                     <div class="s_social_media o_not_editable text-center no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h4 class="s_social_media_title d-none">Social Media</h4>
                         <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
-                            <i class="fa fa-facebook rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_facebook"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_instagram"/>
                         </a>
                         <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="X">
-                            <i class="fa fa-twitter rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_x"/>
                         </a>
                     </div>
                 </div>
@@ -31,13 +31,13 @@
                     <div class="s_social_media o_not_editable text-center no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h4 class="s_social_media_title d-none">Social Media</h4>
                         <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
-                            <i class="fa fa-facebook rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_facebook"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_instagram"/>
                         </a>
                         <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="X">
-                            <i class="fa fa-twitter rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_x"/>
                         </a>
                     </div>
                 </div>
@@ -48,13 +48,13 @@
                     <div class="s_social_media o_not_editable text-center no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h4 class="s_social_media_title d-none">Social Media</h4>
                         <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
-                            <i class="fa fa-facebook rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_facebook"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_instagram"/>
                         </a>
                         <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="X">
-                            <i class="fa fa-twitter rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_x"/>
                         </a>
                     </div>
                 </div>
@@ -65,13 +65,13 @@
                     <div class="s_social_media o_not_editable text-center no_icon_color" data-snippet="s_social_media" data-name="Social Media">
                         <h4 class="s_social_media_title d-none">Social Media</h4>
                         <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
-                            <i class="fa fa-facebook rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_facebook"/>
                         </a>
                         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                            <i class="fa fa-instagram rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_instagram"/>
                         </a>
                         <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="X">
-                            <i class="fa fa-twitter rounded shadow-sm o_editable_media"/>
+                            <i class="oi rounded shadow-sm o_editable_media" data-icon="oi_x"/>
                         </a>
                     </div>
                 </div>
diff --git a/addons/website/views/snippets/s_reviews_wall.xml b/addons/website/views/snippets/s_reviews_wall.xml
index 8bf34974d75461..cd061e699cb9db 100644
--- a/addons/website/views/snippets/s_reviews_wall.xml
+++ b/addons/website/views/snippets/s_reviews_wall.xml
@@ -11,19 +11,19 @@
                     <blockquote class="s_blockquote s_blockquote_default o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-100 h-100 mx-auto p-4 rounded fst-normal" data-vcss="001" data-snippet="s_blockquote" data-name="Review" style="border-radius: 6.4px !important;">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <strong class="s_rating_title">Rating</strong>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
@@ -41,19 +41,19 @@
                     <blockquote class="s_blockquote s_blockquote_default o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-100 h-100 mx-auto p-4 rounded fst-normal" data-vcss="001" data-snippet="s_blockquote" data-name="Review" style="border-radius: 6.4px !important;">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <strong class="s_rating_title">Rating</strong>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
@@ -71,19 +71,19 @@
                     <blockquote class="s_blockquote s_blockquote_default o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-100 h-100 mx-auto p-4 rounded fst-normal" data-vcss="001" data-snippet="s_blockquote" data-name="Review" style="border-radius: 6.4px !important;">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <strong class="s_rating_title">Rating</strong>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
@@ -101,19 +101,19 @@
                     <blockquote class="s_blockquote s_blockquote_default o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-100 h-100 mx-auto p-4 rounded fst-normal" data-vcss="001" data-snippet="s_blockquote" data-name="Review" style="border-radius: 6.4px !important;">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <strong class="s_rating_title">Rating</strong>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
@@ -131,19 +131,19 @@
                     <blockquote class="s_blockquote s_blockquote_default o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-100 h-100 mx-auto p-4 rounded fst-normal" data-vcss="001" data-snippet="s_blockquote" data-name="Review" style="border-radius: 6.4px !important;">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <strong class="s_rating_title">Rating</strong>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
@@ -161,19 +161,19 @@
                     <blockquote class="s_blockquote s_blockquote_default o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-100 h-100 mx-auto p-4 rounded fst-normal" data-vcss="001" data-snippet="s_blockquote" data-name="Review" style="border-radius: 6.4px !important;">
                         <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                         <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
-                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
+                            <i class="s_blockquote_icon oi d-block mx-auto rounded bg-o-color-1"  data-icon="format_quote" role="img"/>
                         </div>
-                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-icon="fa-star" aria-label="4 out of 5 stars">
+                        <div class="s_rating s_rating_no_title" data-snippet="s_rating" data-name="Rating" data-vcss="001" data-rating-icon="star" aria-label="4 out of 5 stars">
                             <strong class="s_rating_title">Rating</strong>
                             <div class="s_rating_icons o_not_editable">
                                 <span class="s_rating_active_icons" style="color: #f3cc00;">
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                                 <span class="s_rating_inactive_icons" style="color: var(--border-color);">
-                                    <i class="fa fa-star" role="presentation"/>
+                                    <i class="oi oi-filled" data-icon="star" role="presentation"/>
                                 </span>
                             </div>
                         </div>
diff --git a/addons/website/views/snippets/s_share.xml b/addons/website/views/snippets/s_share.xml
index 2623e5c952a559..7cbc93146bb45b 100644
--- a/addons/website/views/snippets/s_share.xml
+++ b/addons/website/views/snippets/s_share.xml
@@ -5,22 +5,22 @@
     <div t-attf-class="s_share text-start o_no_link_popover #{_classes}" t-ignore="#{_ignore}">   
         <h4 t-if="not _no_title" class="s_share_title d-none">Share</h4>
         <a t-if="not _exclude_share_links or not 'facebook' in _exclude_share_links" href="https://www.facebook.com/sharer/sharer.php?u={url}" t-attf-class="s_share_facebook #{_link_classes}" target="_blank" aria-label="Facebook">
-            <i t-attf-class="fa fa-facebook #{not _link_classes and 'rounded shadow-sm'} small_social_icon"/>
+            <i t-attf-class="oi #{not _link_classes and 'rounded shadow-sm'} small_social_icon" data-icon="oi_facebook"/>
         </a>
         <a t-if="not _exclude_share_links or not 'twitter' in _exclude_share_links" href="https://twitter.com/intent/tweet?text={title}&amp;url={url}" t-attf-class="s_share_twitter #{_link_classes}" target="_blank" aria-label="X">
-            <i t-attf-class="fa fa-twitter #{not _link_classes and 'rounded shadow-sm'} small_social_icon"/>
+            <i t-attf-class="oi #{not _link_classes and 'rounded shadow-sm'} small_social_icon" data-icon="oi_x"/>
         </a>
         <a t-if="not _exclude_share_links or not 'linkedin' in _exclude_share_links" href="https://www.linkedin.com/sharing/share-offsite/?url={url}" t-attf-class="s_share_linkedin #{_link_classes}" target="_blank" aria-label="LinkedIn">
-            <i t-attf-class="fa fa-linkedin #{not _link_classes and 'rounded shadow-sm'} small_social_icon"/>
+            <i t-attf-class="oi #{not _link_classes and 'rounded shadow-sm'} small_social_icon" data-icon="oi_linkedin"/>
         </a>
         <a t-if="not _exclude_share_links or not 'whatsapp' in _exclude_share_links" href="https://wa.me/?text={title}" t-attf-class="s_share_whatsapp #{_link_classes}" target="_blank" aria-label="WhatsApp">
-            <i t-attf-class="fa fa-whatsapp #{not _link_classes and 'rounded shadow-sm'} small_social_icon"/>
+            <i t-attf-class="oi #{not _link_classes and 'rounded shadow-sm'} small_social_icon" data-icon="oi_whatsapp"/>
         </a>
         <a t-if="not _exclude_share_links or not 'pinterest' in _exclude_share_links" href="https://pinterest.com/pin/create/button/?url={url}&amp;media={media}&amp;description={title}" t-attf-class="s_share_pinterest #{_link_classes}" target="_blank" aria-label="Pinterest">
-            <i t-attf-class="fa fa-pinterest #{not _link_classes and 'rounded shadow-sm'} small_social_icon"/>
+            <i t-attf-class="oi #{not _link_classes and 'rounded shadow-sm'} small_social_icon" data-icon="oi_pinterest"/>
         </a>
         <a t-if="not _exclude_share_links or not 'email' in _exclude_share_links" href="mailto:?body={url}&amp;subject={title}" t-attf-class="s_share_email #{_link_classes}" aria-label="Email">
-            <i t-attf-class="fa fa-envelope #{not _link_classes and 'rounded shadow-sm'} small_social_icon"/>
+            <i t-attf-class="oi #{not _link_classes and 'rounded shadow-sm'} small_social_icon" data-icon="mail"/>
         </a>
     </div>
 </template>
diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml
index abf737ef3aca73..d0fbc16efb1b9b 100644
--- a/addons/website/views/snippets/s_showcase.xml
+++ b/addons/website/views/snippets/s_showcase.xml
@@ -13,21 +13,21 @@
                             <p class="lead">A features section highlights your product’s key attributes, engaging visitors and boosting conversions.</p>
                         </div>
                         <div class="col-12 pt8 pb8" data-name="Feature">
-                            <i class="s_showcase_icon fa fa-star-o me-auto rounded float-start bg-o-color-3" role="img"/>
+                            <i class="s_showcase_icon oi me-auto rounded float-start bg-o-color-3" data-icon="star" role="img"/>
                             <div class="d-flex flex-column">
                                 <h3 class="s_showcase_title h5-fs">Highlights Key Attributes</h3>
                                 <p>A feature section allows you to clearly showcase the main benefits and unique aspects of your product.</p>
                             </div>
                         </div>
                         <div class="col-12 pt8 pb8" data-name="Feature">
-                            <i class="s_showcase_icon fa fa-user-o me-auto rounded float-start bg-o-color-3" role="img"/>
+                            <i class="s_showcase_icon oi me-auto rounded float-start bg-o-color-3" data-icon="person" role="img"/>
                             <div class="d-flex flex-column">
                                 <h3 class="s_showcase_title h5-fs">Engages Visitors</h3>
                                 <p>It captures your visitors' attention and helps them quickly understand the value of your product.</p>
                             </div>
                         </div>
                         <div class="col-12 pt8 pb8" data-name="Feature">
-                            <i class="s_showcase_icon fa fa-heart-o me-auto rounded float-start bg-o-color-3" role="img"/>
+                            <i class="s_showcase_icon oi me-auto rounded float-start bg-o-color-3" data-icon="favorite" role="img"/>
                             <div class="d-flex flex-column">
                                 <h3 class="s_showcase_title h5-fs">Boosts Conversions</h3>
                                 <p>Organizing and presenting key information effectively increases the likelihood of turning your visitors into customers.</p>
diff --git a/addons/website/views/snippets/s_social_media.xml b/addons/website/views/snippets/s_social_media.xml
index 0b9680554b445e..de0e4b021193ce 100644
--- a/addons/website/views/snippets/s_social_media.xml
+++ b/addons/website/views/snippets/s_social_media.xml
@@ -9,28 +9,28 @@ title stay editable after a save (see SOCIAL_MEDIA_TITLE_CONTENTEDITABLE).
     <div t-attf-class="s_social_media text-start o_not_editable #{_classes}" contenteditable="false">
         <h4 class="s_social_media_title d-none" contenteditable="true">Social Media</h4>
         <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
-            <i class="fa fa-facebook rounded shadow-sm o_editable_media small_social_icon"/>
+            <i class="oi rounded shadow-sm o_editable_media small_social_icon" data-icon="oi_facebook"/>
         </a>
         <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="X">
-            <i class="fa fa-twitter rounded shadow-sm o_editable_media small_social_icon"/>
+            <i class="oi rounded shadow-sm o_editable_media small_social_icon" data-icon="oi_x"/>
         </a>
         <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
-            <i class="fa fa-linkedin rounded shadow-sm o_editable_media small_social_icon"/>
+            <i class="oi rounded shadow-sm o_editable_media small_social_icon" data-icon="oi_linkedin"/>
         </a>
         <a href="/website/social/youtube" class="s_social_media_youtube" target="_blank" aria-label="YouTube">
-            <i class="fa fa-youtube-play rounded shadow-sm o_editable_media small_social_icon"/>
+            <i class="oi rounded shadow-sm o_editable_media small_social_icon" data-icon="oi_youtube-play"/>
         </a>
         <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-            <i class="fa fa-instagram rounded shadow-sm o_editable_media small_social_icon"/>
+            <i class="oi rounded shadow-sm o_editable_media small_social_icon" data-icon="oi_instagram"/>
         </a>
         <a href="/website/social/github" class="s_social_media_github" target="_blank" aria-label="GitHub">
-            <i class="fa fa-github rounded shadow-sm o_editable_media small_social_icon"/>
+            <i class="oi rounded shadow-sm o_editable_media small_social_icon" data-icon="oi_github"/>
         </a>
         <a href="/website/social/tiktok" class="s_social_media_tiktok" target="_blank" aria-label="TikTok">
-            <i class="fa fa-tiktok rounded shadow-sm o_editable_media small_social_icon"/>
+            <i class="oi rounded shadow-sm o_editable_media small_social_icon" data-icon="oi_tiktok"/>
         </a>
         <a href="/website/social/discord" class="s_social_media_discord" target="_blank" aria-label="Discord">
-            <i class="fa fa-discord rounded shadow-sm o_editable_media small_social_icon"/>
+            <i class="oi rounded shadow-sm o_editable_media small_social_icon" data-icon="oi_discord"/>
         </a>
     </div>
 </template>
diff --git a/addons/website/views/snippets/s_splash_intro.xml b/addons/website/views/snippets/s_splash_intro.xml
index 51ffa07cbb9d12..3d39a3844077ae 100644
--- a/addons/website/views/snippets/s_splash_intro.xml
+++ b/addons/website/views/snippets/s_splash_intro.xml
@@ -17,7 +17,7 @@
             </div>
         </div>
         <a class="o_scroll_button rounded-circle align-items-center justify-content-center mx-auto mb-4 o_cc o_cc1 o_not_editable" href="#" title="Scroll down to next section">
-            <i class="fa fa-angle-down fa-2x"/>
+            <i class="oi oi-2x" data-icon="keyboard_arrow_down"/>
         </a>
     </section>
 </template>
diff --git a/addons/website/views/snippets/s_website_form_info.xml b/addons/website/views/snippets/s_website_form_info.xml
index c9bb6838a96245..8d7de66bb72b5d 100644
--- a/addons/website/views/snippets/s_website_form_info.xml
+++ b/addons/website/views/snippets/s_website_form_info.xml
@@ -13,15 +13,15 @@
                     <p style="text-align: left;">We'd love to hear from you! Whether you have questions, feedback, or need support, our team is here to help. Simply fill out the form below, and we aim to respond to all inquiries within 24 hours. Thank you for getting in touch!</p>
                 </div>
                 <div class="o_grid_item g-col-lg-5 g-height-3 col-lg-5 col-12" style="--grid-item-padding-x: 0px; --grid-item-padding-y: 8px; grid-area: 10 / 1 / 13 / 6; z-index: 3;">
-                    <i class="fa fa-fw fa-envelope o_not-animable" role="img"/>
+                    <i class="oi oi-fw oi-filled o_not-animable" data-icon="mail" role="img"/>
                     &#160;&#160;yourcompany@example.com
                     <br/>
                     <br/>
-                    <i class="fa fa-fw fa-phone o_not-animable" role="img"/>
+                    <i class="oi oi-fw oi-filled o_not-animable" data-icon="phone" role="img"/>
                     &#160;&#160; +32(0)499 123 456
                     <br/>
                     <br/>
-                    <i class="fa fa-fw fa-map-marker o_not-animable" role="img"/>
+                    <i class="oi oi-fw o_not-animable" data-icon="location_on" role="img"/>
                     &#160;&#160;Brussels, Belgium
                 </div>
                 <div class="o_grid_item g-col-lg-6 g-height-12 col-lg-6 col-12" style="--grid-item-padding-x: 0px; grid-area: 1 / 7 / 13 / 13; z-index: 4;">
diff --git a/addons/website/views/website_controller_pages_views.xml b/addons/website/views/website_controller_pages_views.xml
index de3285934966e0..a1ec9e003dc3a7 100644
--- a/addons/website/views/website_controller_pages_views.xml
+++ b/addons/website/views/website_controller_pages_views.xml
@@ -76,7 +76,7 @@
                         </div>
                     </div>
                      <div class="d-md-flex align-items-center gap-3" data-section="more-info">
-                        <i class="fa fa-2x fa-arrow-right text-primary" title="URL" />
+                        <i class="oi oi-2x text-primary" data-icon="arrow_forward" title="URL" />
                         <field name="url_demo" widget="url" />
                     </div>
             </t>
diff --git a/addons/website/views/website_pages_views.xml b/addons/website/views/website_pages_views.xml
index 1f7f41d1eb2363..2ddc8074c31118 100644
--- a/addons/website/views/website_pages_views.xml
+++ b/addons/website/views/website_pages_views.xml
@@ -45,7 +45,7 @@
                 <label for="is_in_menu" string="In Menu"/>
                 <div class="o_row">
                     <field name="is_in_menu" widget="boolean_toggle" options="{'autosave': False}"/>
-                    <button type="action" name="%(website.open_custom_menu)d" context="{'xmlid': 'website.menu_edit_menu'}" string="Edit Menu" class="btn-link" icon="oi-arrow-right"/>
+                    <button type="action" name="%(website.open_custom_menu)d" context="{'xmlid': 'website.menu_edit_menu'}" string="Edit Menu" class="btn-link" icon="east"/>
                 </div>
                 <!-- is_homepage toggle auto-save is enabled to update the current homepage for assigning parent_id -->
                 <field name="is_homepage" string="Is Homepage" widget="boolean_toggle"/>
@@ -135,7 +135,7 @@
 
             <field name="website_id" groups="website.group_multi_website"/>
 
-            <button name="action_page_debug_view" type="object" title="Settings" icon="fa-bug fa-lg" groups="base.group_no_one"/>
+            <button name="action_page_debug_view" type="object" title="Settings" icon="bug_report" icon_class="oi-lg" groups="base.group_no_one"/>
         </list>
     </field>
 </record>
@@ -151,12 +151,12 @@
             <templates>
                 <t t-name="card">
                     <div class="text-truncate fw-bold fs-3">
-                        <i t-if="record.is_homepage.raw_value" class="fa fa-home pe-2"
+                        <i t-if="record.is_homepage.raw_value" class="oi pe-2" data-icon="home"
                             title="Home page of the current website"/>
                         <field name="name" />
                     </div>
                     <div t-if="record.website_id.value" class="text-truncate fw-bold text-muted" groups="website.group_multi_website">
-                        <i class="fa fa-globe me-1" title="Website"/>
+                        <i class="oi me-1" data-icon="public" title="Website"/>
                         <field name="website_id" groups="website.group_multi_website"/>
                     </div>
                     <field name="website_url" class="text-truncate fw-bold text-primary mb-auto"/>
@@ -173,7 +173,7 @@
                             groups="base.group_no_one"
                             title="Settings"
                             type="object"
-                            icon="fa-bug"
+                            icon="bug_report"
                         />
                     </div>
                 </t>
@@ -230,7 +230,7 @@
             <label for="key"/>
             <div class='o_row'>
                 <field name="key"/>
-                <button title="Show site map" invisible="type != 'qweb'" name="website.action_website_view_hierarchy" icon="fa-sitemap" type="action" class="btn btn-link"/>
+                <button title="Show site map" invisible="type != 'qweb'" name="website.action_website_view_hierarchy" icon="account_tree" type="action" class="btn btn-link"/>
             </div>
             <field name="first_page_id" invisible="not page_ids" />
             <label for="visibility"/>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 7dd49d1f3c59eb..9ec7e58f84c93a 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -39,7 +39,7 @@
             t-if="submenu.is_mega_menu and is_vertical_nav"
             t-attf-class="o_mega_nav o_cc1 position-fixed top-0 #{offcanvas_is_leftside and 'start-0' or 'end-0'} invisible d-flex align-items-center w-100"
         >
-            <button class="btn nav-link oi oi-chevron-left ms-n2 px-2"/>
+            <button class="btn nav-link oi ms-n2 px-2" data-icon="chevron_backward"/>
         </div>
         <!-- Is a dropdown in desktop -> becomes accordion in Mobile / Sidebar / Hamburger -->
         <div t-elif="is_accordion_nav" class="accordion-item">
@@ -354,7 +354,9 @@
                 <path fill="#FFF" d="M8 8V1a1 1 0 1 1 2 0v8a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h7z"/>
             </svg>
             <div class="o_frontend_to_backend_buttons d-flex">
-                <a href="#" title="Go to your Odoo Apps" class="o_frontend_to_backend_apps_btn fa fa-th d-flex align-items-center justify-content-center text-decoration-none" data-bs-toggle="dropdown"/>
+                <a href="#" title="Go to your Odoo Apps" class="o_frontend_to_backend_apps_btn d-flex align-items-center justify-content-center text-decoration-none" data-bs-toggle="dropdown">
+                    <i class="oi oi-lg" data-icon="apps" aria-hidden="true"/>
+                </a>
                 <div class="dropdown-menu o_frontend_to_backend_apps_menu" role="menu">
                     <a role="menuitem" class="dropdown-item" t-out="menu['name']"
                        t-as="menu" t-foreach="env['ir.ui.menu'].with_context(force_action=True).load_menus_root()['children']"
@@ -681,7 +683,7 @@
                     <t t-call="portal.user_dropdown"
                         _icon="true"
                         _item_class.f="dropdown"
-                        _icon_class.f="fa-stack"
+                        _icon_class.f="oi-stack"
                         _link_class.f="o_navlink_background btn d-flex align-items-center rounded-circle p-1 pe-2 text-reset"
                         _dropdown_menu_class.f="dropdown-menu-end"/>
                 </ul>
@@ -1072,7 +1074,7 @@
                         <t t-call="portal.user_dropdown"
                             _icon="true"
                             _item_class.f="dropdown"
-                            _icon_class.f="fa-stack"
+                            _icon_class.f="oi-stack"
                             _link_class.f="btn d-flex align-items-center rounded-circle p-1 pe-3 text-reset o_navlink_background"
                             _dropdown_menu_class.f="dropdown-menu-end"/>
                         <!-- Language Selector -->
@@ -1160,7 +1162,7 @@
                             <t t-call="portal.user_dropdown"
                                 _user_name="true"
                                 _icon="true"
-                                _icon_class.f="fa-stack"
+                                _icon_class.f="oi-stack"
                                 _item_class.f="dropdown"
                                 _link_class.f="btn d-flex align-items-center border-0 fw-bold text-reset o_navlink_trigger_hover"
                                 _icon_wrap_class.f="position-relative me-2 p-2 rounded-circle o_navlink_background transition-base"
@@ -1738,23 +1740,23 @@
                         <div class="col-lg-4 offset-lg-1 pt24 pb24">
                             <h5>Connect with us</h5>
                             <ul class="list-unstyled">
-                                <li><i class="fa fa-comment fa-fw me-2"/><a href="/contactus">Contact us</a></li>
-                                <li><i class="fa fa-envelope fa-fw me-2"/><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></li>
-                                <li><i class="fa fa-phone fa-fw me-2"/><a href="tel:+1 555-555-5556"><span class="o_force_ltr">+1 555-555-5556</span></a></li>
+                                <li><i class="oi oi-filled oi-fw me-2" data-icon="chat_bubble"/><a href="/contactus">Contact us</a></li>
+                                <li><i class="oi oi-filled oi-fw me-2" data-icon="mail"/><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></li>
+                                <li><i class="oi oi-filled oi-fw me-2" data-icon="phone"/><a href="tel:+1 555-555-5556"><span class="o_force_ltr">+1 555-555-5556</span></a></li>
                             </ul>
                             <div class="s_social_media text-start o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
-                                    <i class="fa fa-facebook rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_facebook"/>
                                 </a>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="X">
-                                    <i class="fa fa-twitter rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
-                                    <i class="fa fa-linkedin rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_linkedin"/>
                                 </a>
                                 <a href="/" class="text-800" aria-label="Extra page">
-                                    <i class="fa fa-home rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="home"/>
                                 </a>
                             </div>
                         </div>
@@ -1782,22 +1784,22 @@
                         <div class="col-lg-4 offset-lg-3 pb48">
                             <p><b>My Company</b><br/>8000 Marina Blvd, Suite 300 <br/> Brisbane CA 94005 <br/>United States</p>
                             <ul class="list-unstyled mb-2">
-                                <li><i class="fa fa-phone fa-fw me-2"/><span class="o_force_ltr"><a href="tel:+1 555-555-5556">+1 555-555-5556</a></span></li>
-                                <li><i class="fa fa-envelope fa-fw me-2"/><span><a href="mailto:hello@mycompany.com">hello@mycompany.com</a></span></li>
+                                <li><i class="oi oi-filled oi-fw me-2" data-icon="phone"/><span class="o_force_ltr"><a href="tel:+1 555-555-5556">+1 555-555-5556</a></span></li>
+                                <li><i class="oi oi-filled oi-fw me-2" data-icon="mail"/><span><a href="mailto:hello@mycompany.com">hello@mycompany.com</a></span></li>
                             </ul>
                             <div class="s_social_media text-start o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
-                                    <i class="fa fa-facebook rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_facebook"/>
                                 </a>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
-                                    <i class="fa fa-twitter rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
-                                    <i class="fa fa-instagram rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_instagram"/>
                                 </a>
                                 <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
-                                    <i class="fa fa-linkedin rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_linkedin"/>
                                 </a>
                             </div>
                         </div>
@@ -1818,13 +1820,13 @@
                             <div class="s_social_media text-center o_not_editable no_icon_color" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
-                                    <i class="fa fa-facebook rounded-empty-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-empty-circle shadow-sm o_editable_media" data-icon="oi_facebook"/>
                                 </a>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="X">
-                                    <i class="fa fa-twitter rounded-empty-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-empty-circle shadow-sm o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
-                                    <i class="fa fa-linkedin rounded-empty-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-empty-circle shadow-sm o_editable_media" data-icon="oi_linkedin"/>
                                 </a>
                             </div>
                             <div class="s_hr pt24 pb24" data-snippet="s_hr" data-name="Separator">
@@ -1884,17 +1886,17 @@
                         <div class="col-lg-2 col-10 offset-1 offset-lg-0 pb16">
                             <h5>Follow us</h5>
                             <ul class="list-unstyled">
-                                <li><i class="fa fa-fw fa-facebook-square me-2"/><a href="/website/social/facebook" target="_blank">Facebook</a></li>
-                                <li><i class="fa fa-fw fa-twitter-square me-2"/><a href="/website/social/twitter" target="_blank">X</a></li>
-                                <li><i class="fa fa-fw fa-linkedin-square me-2"/><a href="/website/social/linkedin" target="_blank">Linkedin</a></li>
-                                <li><i class="fa fa-fw fa-instagram me-2"/><a href="/website/social/instagram" target="_blank">Instagram</a></li>
+                                <li><i class="oi oi-fw me-2" data-icon="oi_facebook-square"/><a href="/website/social/facebook" target="_blank">Facebook</a></li>
+                                <li><i class="oi oi-fw me-2" data-icon="oi_x-square"/><a href="/website/social/twitter" target="_blank">X</a></li>
+                                <li><i class="oi oi-fw me-2" data-icon="oi_linkedin-square"/><a href="/website/social/linkedin" target="_blank">Linkedin</a></li>
+                                <li><i class="oi oi-fw me-2" data-icon="oi_instagram"/><a href="/website/social/instagram" target="_blank">Instagram</a></li>
                             </ul>
                         </div>
                         <div class="col-lg-3 col-10 offset-1 offset-lg-0 pb16">
                             <h5>Get in touch</h5>
                             <ul class="list-unstyled">
-                                <li><i class="fa fa-fw fa-envelope me-2"/><a href="mailto:info@yourcompany.com">info@yourcompany.com</a></li>
-                                <li><i class="fa fa-fw fa-phone me-2"/><a href="tel:+1 555-555-5556"><span class="o_force_ltr">+1 555-555-5556"</span></a></li>
+                                <li><i class="oi oi-fw oi-filled me-2" data-icon="mail"/><a href="mailto:info@yourcompany.com">info@yourcompany.com</a></li>
+                                <li><i class="oi oi-fw oi-filled me-2" data-icon="phone"/><a href="tel:+1 555-555-5556"><span class="o_force_ltr">+1 555-555-5556"</span></a></li>
                             </ul>
                         </div>
                         <div class="col-lg-3 col-10 offset-1 offset-lg-0 pb16">
@@ -1934,13 +1936,13 @@
                             <div class="s_social_media no_icon_color o_not_editable text-center" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
-                                    <i class="fa fa-facebook fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_facebook"/>
                                 </a>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
-                                    <i class="fa fa-twitter fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
-                                    <i class="fa fa-instagram fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                                 </a>
                             </div>
                         </div>
@@ -1973,13 +1975,13 @@
                             <div class="s_social_media text-start no_icon_color o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h6 class="s_social_media_title d-block mb-2" contenteditable="true">Follow us</h6>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
-                                    <i class="fa fa-twitter fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
-                                    <i class="fa fa-linkedin fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                                 </a>
                                 <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
-                                    <i class="fa fa-instagram fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                                 </a>
                             </div>
                         </div>
@@ -2065,22 +2067,22 @@
                             <a href="#" class="o_translate_inline btn btn-primary">Get in touch</a>
                         </div>
                         <div class="col-lg-4">
-                            <i class="fa fa-envelope fa-fw me-2"/><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a>
+                            <i class="oi oi-filled oi-fw me-2" data-icon="mail"/><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a>
                         </div>
                         <div class="col-lg-4 pb24">
-                            <i class="fa fa-phone fa-fw me-2"/><a href="tel:+1 555-555-5556"><span class="o_force_ltr">+1 555-555-5556</span></a>
+                            <i class="oi oi-filled oi-fw me-2" data-icon="phone"/><a href="tel:+1 555-555-5556"><span class="o_force_ltr">+1 555-555-5556</span></a>
                         </div>
                         <div class="col-lg-2 offset-lg-2 pb24">
                             <div class="s_social_media text-start o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-none" contenteditable="true">Follow Us</h5>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
-                                    <i class="fa fa-facebook rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_facebook"/>
                                 </a>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="X">
-                                    <i class="fa fa-twitter rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
-                                    <i class="fa fa-instagram rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi rounded-circle shadow-sm o_editable_media" data-icon="oi_instagram"/>
                                 </a>
                             </div>
                         </div>
@@ -2150,19 +2152,19 @@
                             <div class="s_social_media text-start o_not_editable no_icon_color" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <p class="s_social_media_title d-none" contenteditable="true">Follow us</p>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
-                                    <i class="fa fa-twitter fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
-                                    <i class="fa fa-linkedin fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                                 </a>
                                 <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
-                                    <i class="fa fa-instagram fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                                 </a>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
-                                    <i class="fa fa-facebook fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_facebook"/>
                                 </a>
                                 <a href="/website/social/youtube" class="s_social_media_youtube" target="_blank">
-                                    <i class="fa fa-youtube-play fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_youtube-play"/>
                                 </a>
                             </div>
                         </div>
@@ -2266,19 +2268,19 @@
                             <div class="s_social_media text-start o_not_editable no_icon_color" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <p class="s_social_media_title d-none" contenteditable="true">Follow us</p>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
-                                    <i class="fa fa-twitter fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
-                                    <i class="fa fa-linkedin fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                                 </a>
                                 <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
-                                    <i class="fa fa-instagram fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                                 </a>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
-                                    <i class="fa fa-facebook fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_facebook"/>
                                 </a>
                                 <a href="/website/social/youtube" class="s_social_media_youtube" target="_blank">
-                                    <i class="fa fa-youtube-play fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_youtube-play"/>
                                 </a>
                             </div>
                         </div>
@@ -2395,19 +2397,19 @@
                             <div class="s_social_media text-start o_not_editable no_icon_color" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <p class="s_social_media_title d-none" contenteditable="true">Follow us</p>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
-                                    <i class="fa fa-twitter fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
-                                    <i class="fa fa-linkedin fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_linkedin"/>
                                 </a>
                                 <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
-                                    <i class="fa fa-instagram fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_instagram"/>
                                 </a>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
-                                    <i class="fa fa-facebook fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_facebook"/>
                                 </a>
                                 <a href="/website/social/youtube" class="s_social_media_youtube" target="_blank">
-                                    <i class="fa fa-youtube-play fa-stack o_editable_media"/>
+                                    <i class="oi oi-stack o_editable_media" data-icon="oi_youtube-play"/>
                                 </a>
                             </div>
                         </div>
@@ -2474,19 +2476,19 @@
                             <div class="s_social_media text-start o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                                 <h5 class="s_social_media_title d-block mb-2" contenteditable="true">Follow us</h5>
                                 <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
-                                    <i class="fa fa-twitter fa-stack rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi-stack rounded-circle shadow-sm o_editable_media" data-icon="oi_x"/>
                                 </a>
                                 <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
-                                    <i class="fa fa-linkedin fa-stack rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi-stack rounded-circle shadow-sm o_editable_media" data-icon="oi_linkedin"/>
                                 </a>
                                 <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
-                                    <i class="fa fa-instagram fa-stack rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi-stack rounded-circle shadow-sm o_editable_media" data-icon="oi_instagram"/>
                                 </a>
                                 <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
-                                    <i class="fa fa-facebook fa-stack rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi-stack rounded-circle shadow-sm o_editable_media" data-icon="oi_facebook"/>
                                 </a>
                                 <a href="/website/social/youtube" class="s_social_media_youtube" target="_blank">
-                                    <i class="fa fa-youtube-play fa-stack rounded-circle shadow-sm o_editable_media"/>
+                                    <i class="oi-stack rounded-circle shadow-sm o_editable_media" data-icon="oi_youtube-play"/>
                                 </a>
                             </div>
                         </div>
@@ -2556,7 +2558,7 @@
                href="#top"
                title="Scroll To Top"
                class="btn btn-primary rounded-circle d-flex align-items-center justify-content-center">
-                <span class="oi fa-1x oi-chevron-up"/>
+                <span class="oi" data-icon="keyboard_arrow_up"/>
             </a>
         </div>
     </xpath>
@@ -2938,13 +2940,13 @@
                 <form class="offset-md-3 col-md-6" method="POST">
                     <div class="alert alert-info mt32" t-if="not request.params.get('visibility_password')">
                         <div class="h5 text-center">
-                            <i class="fa fa-lock fa-2x"/><br/>
+                            <i class="oi oi-2x" data-icon="lock"/><br/>
                             <span class="mt-1">A password is required to access this page.</span>
                         </div>
                     </div>
                     <div class="alert alert-warning mt32" t-else="">
                         <div class="h5 text-center">
-                            <i class="fa fa-lock fa-2x"/><br/>
+                            <i class="oi oi-2x" data-icon="lock"/><br/>
                             <span class="mt-1">Wrong password</span>
                         </div>
                     </div>
@@ -2954,7 +2956,7 @@
                             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                             <input type="password" id="password" class="form-control" required="required" name="visibility_password" />
                           <button class="btn border border-start-0 o_show_password" type="button">
-                            <i class="fa fa-eye"></i>
+                            <i class="oi" data-icon="visibility"></i>
                           </button>
                         </div>
                     </div>
@@ -3123,7 +3125,7 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
         <t t-set="search_placeholder">Search...</t>
         <input type="search" name="search" t-att-class="'search-query form-control oe_search_box %s %s' % (_input_classes or '', '' if default_style else 'border-0 bg-light')" t-att-placeholder="placeholder if placeholder else search_placeholder" t-att-value="search"/>
         <button type="submit" t-att-class="'btn oe_search_button %s' % (_submit_classes or ('btn-primary' if default_style else 'btn-light'))" aria-label="Search" title="Search">
-            <i class="oi oi-search"/>
+            <i class="oi" data-icon="search"/>
             <span t-if="search" class="oe_search_found">
                 <small>(<t t-out="search_count or 0"/> found)</small>
             </span>
@@ -3227,7 +3229,7 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
     <a t-att-href="result.get('website_url')" class="dropdown-item p-2 text-wrap">
         <div class="d-flex align-items-center flex-wrap o_search_result_item">
             <img t-if="result.get('image_url')" t-att-src="result.get('image_url')" role="presentation" alt="" class="flex-shrink-0 o_image_64_contain"/>
-            <i t-else="" t-att-class="'o_image_64_contain text-center pt16 fa %s' % result.get('_fa')" style="font-size: 34px;"/>
+            <i t-else="" class="o_image_64_contain text-center pt16 oi" t-att-data-icon="result.get('_icon')" style="font-size: 34px;"/>
             <div class="o_search_result_item_detail px-3">
                 <t t-set="description" t-value="result.get('description')"/>
                 <t t-set="extra_link" t-value="result.get('extra_link_url') and result.get('extra_link')"/>
@@ -3303,7 +3305,8 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
                     </p>
                     <span
                         t-if="not step_last"
-                        class="fa fa-angle-right d-inline-block align-middle mx-3 text-muted fs-5"
+                        class="oi d-inline-block align-middle mx-3 text-muted fs-5"
+                        data-icon="keyboard_arrow_right"
                     />
                 </div>
             </span>
@@ -3319,7 +3322,8 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
                     </p>
                     <span
                         t-if="not step_last"
-                        class="fa fa-angle-right d-inline-block align-middle mx-3 text-muted fs-5"
+                        class="oi d-inline-block align-middle mx-3 text-muted fs-5"
+                        data-icon="keyboard_arrow_right"
                     />
                 </div>
             </a>
@@ -3343,16 +3347,16 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
                 <div class="s_social_media o_not_editable oe_unmovable oe_unremovable" data-snippet="s_social_media" data-name="Social Media">
                     <h5 class="s_social_media_title d-none">Follow us</h5>
                     <a href="/website/social/facebook" class="s_social_media_facebook o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank" aria-label="Facebook">
-                        <i class="fa fa-facebook fa-stack p-1 o_editable_media"/>
+                        <i class="oi-stack p-1 o_editable_media" data-icon="oi_facebook"/>
                     </a>
                     <a href="/website/social/twitter" class="s_social_media_twitter o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank" aria-label="X">
-                        <i class="fa fa-twitter fa-stack p-1 o_editable_media"/>
+                        <i class="oi-stack p-1 o_editable_media" data-icon="oi_x"/>
                     </a>
                     <a href="/website/social/linkedin" class="s_social_media_linkedin o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank" aria-label="LinkedIn">
-                        <i class="fa fa-linkedin fa-stack p-1 o_editable_media"/>
+                        <i class="oi-stack p-1 o_editable_media" data-icon="oi_linkedin"/>
                     </a>
                     <a href="/website/social/instagram" class="s_social_media_instagram o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank" aria-label="Instagram">
-                        <i class="fa fa-instagram fa-stack p-1 o_editable_media"/>
+                        <i class="oi-stack p-1 o_editable_media" data-icon="instagram"/>
                     </a>
                 </div>
             </div>
@@ -3390,7 +3394,7 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
                     </div>
                 </div>
                 <a t-attf-class="btn rounded-circle p-1 lh-1 #{_button_classes or 'bg-o-color-3'} o_not_editable" data-bs-target="#o_search_modal" data-bs-toggle="modal" role="button" title="Search" href="#">
-                    <i class="oi oi-search fa-stack lh-lg"/>
+                    <i class="oi oi-stack lh-lg" data-icon="search"/>
                 </a>
             </t>
             <t t-else="">
@@ -3413,15 +3417,15 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
             <t t-elif="_txt_elt_content == 'list'">
                 <div t-attf-class="s_text_block d-flex flex-column flex-lg-row gap-1 gap-lg-4 align-items-lg-center #{_div_class}" data-name="Text">
                     <small class="d-flex align-items-center">
-                        <i class="fa fa-1x fa-fw fa-usd fa-stack me-1"/>
+                        <i class="oi oi-1x oi-fw oi-stack me-1" data-icon="attach_money"/>
                         Low Price Guarantee
                     </small>
                     <small class="d-flex align-items-center">
-                        <i class="fa fa-1x fa-fw fa-shopping-basket fa-stack me-1"/>
+                        <i class="oi oi-1x oi-fw oi-stack me-1" data-icon="shopping_basket"/>
                         30 Days Online Returns
                     </small>
                     <small class="d-flex align-items-center">
-                        <i class="fa fa-1x fa-fw fa-truck fa-stack me-1"/>
+                        <i class="oi oi-1x oi-fw oi-stack me-1" data-icon="local_shipping"/>
                         Standard Shipping
                     </small>
                 </div>
@@ -3430,13 +3434,13 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
                 <div t-attf-class="s_text_block #{_div_class}" data-name="Text">
                     <a href="tel:+1 555-555-5556" class="nav-link o_nav-link_secondary">
                         <small>
-                            <i class="fa fa-1x fa-fw fa-phone me-1"/>͏ <!-- Empty character needed to be able to delete the icon. -->
+                            <i class="oi oi-1x oi-fw oi-filled me-1" data-icon="phone"/>͏ <!-- Empty character needed to be able to delete the icon. -->
                             <span class="o_force_ltr">+1 555-555-5556</span>
                         </small>
                     </a>
                     <a href="mailto:info@yourcompany.example.com" class="nav-link o_nav-link_secondary">
                         <small>
-                            <i class="fa fa-1x fa-fw fa-envelope me-1"/>
+                            <i class="oi oi-1x oi-fw oi-filled me-1" data-icon="mail"/>
                             info@yourcompany.example.com
                         </small>
                     </a>
@@ -3445,14 +3449,14 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
             <t t-elif="_txt_elt_content == 'mail'">
                 <div t-attf-class="s_text_block #{_div_class}" data-name="Text">
                     <a href="mailto:info@yourcompany.example.com" class="nav-link o_nav-link_secondary">
-                        <small><i class="fa fa-1x fa-fw fa-envelope me-1"/> info@yourcompany.example.com</small>
+                        <small><i class="oi oi-1x oi-fw oi-filled me-1" data-icon="mail"/> info@yourcompany.example.com</small>
                     </a>
                 </div>
             </t>
             <t t-elif="_txt_elt_content == 'mail_stretched'">
                 <div t-attf-class="s_text_block #{_div_class}" data-name="Text">
                     <a href="tel:+1 555-555-5556" class="nav-link o_nav-link_secondary p-2 o_navlink_background_hover d-flex align-items-center h-100 text-reset">
-                        <i class="fa fa-1x fa-fw fa-phone me-1"/>
+                        <i class="oi oi-1x oi-fw i-filled me-1" data-icon="phone"/>
                         <span class="o_force_ltr"><small>+1 555-555-5556</small></span>
                     </a>
                 </div>
@@ -3460,7 +3464,7 @@ Sitemap: <t t-out="url_root"/>sitemap.xml
             <t t-else="">
                 <div t-attf-class="s_text_block #{_div_class}" data-name="Text">
                     <a href="tel:+1 555-555-5556" class="nav-link o_nav-link_secondary p-2">
-                        <i class="fa fa-1x fa-fw fa-phone me-1"/>
+                        <i class="oi oi-1x oi-fw oi-filled me-1" data-icon="phone"/>
                         <span class="o_force_ltr"><small>+1 555-555-5556</small></span>
                     </a>
                 </div>
diff --git a/addons/website/views/website_visitor_views.xml b/addons/website/views/website_visitor_views.xml
index 10a50b749fe49d..0edda1989d2c86 100644
--- a/addons/website/views/website_visitor_views.xml
+++ b/addons/website/views/website_visitor_views.xml
@@ -97,8 +97,8 @@
                                     <div class="d-flex flex-grow-1 flex-column my-0 my-lg-2">
                                         <div class="d-flex">
                                             <field name="display_name" class="fw-bold"/>
-                                            <span t-if="record.is_connected.raw_value" class="fa fa-circle text-success ms-2 my-1" aria-label="Online" title="Online"/>
-                                            <span t-else="" class="fa fa-circle text-danger ms-2 my-1" aria-label="Offline" title="Offline"/>
+                                            <span t-if="record.is_connected.raw_value" class="oi oi-filled text-success ms-2 my-1" data-icon="circle" aria-label="Online" title="Online"/>
+                                            <span t-else="" class="oi oi-filled text-danger ms-2 my-1" data-icon="circle" aria-label="Offline" title="Offline"/>
                                         </div>
                                         <!-- Double check is necessary for sample view (or error image are shown) -->
                                         <div t-if="record.country_id.raw_value and record.country_flag.raw_value">
@@ -152,23 +152,23 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button class="oe_stat_button o_stat_button_info" disabled="1" invisible="not is_connected">
-                            <i class="fa fa-fw o_button_icon fa-circle text-success" title="Connected"/>
+                            <i class="oi oi-filled oi-fw o_button_icon text-success" data-icon="circle" title="Connected"/>
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Connected</span>
                             </div>
                         </button>
                         <button class="oe_stat_button o_stat_button_info" disabled="1" invisible="is_connected">
-                            <i class="fa fa-fw o_button_icon fa-circle text-danger" title="Offline"/>
+                            <i class="oi oi-filled oi-fw o_button_icon text-danger" data-icon="circle" title="Offline"/>
                             <div class="o_stat_info">
                                 <span class="o_stat_text">Offline</span>
                             </div>
                         </button>
-                        <button id="w_visitor_visit_counter" class="oe_stat_button o_stat_button_info" disabled="1" icon="fa-globe">
+                        <button id="w_visitor_visit_counter" class="oe_stat_button o_stat_button_info" disabled="1" icon="public">
                             <field name="visit_count" widget="statinfo" string="Visits"/>
                         </button>
                         <button name="%(website.website_visitor_page_action)d" type="action"
                                 class="oe_stat_button"
-                                icon="fa-tags">
+                                icon="sell">
                             <field name="visitor_page_count" widget="statinfo" string="Page Views"/>
                         </button>
                     </div>
@@ -213,7 +213,7 @@
                 <field name="page_ids" widget="many2many_tags" string="Pages"/>
                 <field name="last_visited_page_id" string="Last Page" optional="hide"/>
                 <button string="Email" name="action_send_mail" type="object"
-                    icon="fa-envelope" invisible="not email"/>
+                    icon="mail" icon_class="oi-filled" invisible="not email"/>
             </list>
         </field>
     </record>
diff --git a/addons/website_blog/models/website_blog.py b/addons/website_blog/models/website_blog.py
index a06cb6dc6a0a18..60cd74fe9a431b 100644
--- a/addons/website_blog/models/website_blog.py
+++ b/addons/website_blog/models/website_blog.py
@@ -123,7 +123,7 @@ def _search_get_detail(self, website, order, options):
             'search_fields': search_fields,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-rss-square',
+            'icon': 'rss_feed',
             'order': 'name desc, id desc' if 'name desc' in order else 'name asc, id desc',
         }
 
@@ -355,7 +355,7 @@ def _search_get_detail(self, website, order, options):
             'search_fields': search_fields,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-rss',
+            'icon': 'rss_feed',
         }
 
     def _search_render_results(self, fetch_fields, mapping, icon, limit):
diff --git a/addons/website_blog/static/src/img/blog_1.jpeg b/addons/website_blog/static/src/img/blog_1.jpeg
index cd737525e9a0c9..be7840375825dd 100644
Binary files a/addons/website_blog/static/src/img/blog_1.jpeg and b/addons/website_blog/static/src/img/blog_1.jpeg differ
diff --git a/addons/website_blog/static/src/img/blog_2.jpeg b/addons/website_blog/static/src/img/blog_2.jpeg
index d1e6ebb3885945..cddc3f5cdd5787 100644
Binary files a/addons/website_blog/static/src/img/blog_2.jpeg and b/addons/website_blog/static/src/img/blog_2.jpeg differ
diff --git a/addons/website_blog/static/tests/tours/blog_manager_tour.js b/addons/website_blog/static/tests/tours/blog_manager_tour.js
index 21c7d166daea38..6b74cc2dbc109c 100644
--- a/addons/website_blog/static/tests/tours/blog_manager_tour.js
+++ b/addons/website_blog/static/tests/tours/blog_manager_tour.js
@@ -74,6 +74,6 @@ registerWebsitePreviewTour("blog_no_manager", {}, () => [
     },
     {
         content: "Check if delete action is available or not",
-        trigger: ".o_popover:not(:has(i.fa-trash-o))",
+        trigger: ".o_popover:not(:has(i[data-icon='delete']))",
     },
 ]);
diff --git a/addons/website_blog/static/tests/tours/blog_search_with_date.js b/addons/website_blog/static/tests/tours/blog_search_with_date.js
index c5087d056c2ad7..43c46eba5e4177 100644
--- a/addons/website_blog/static/tests/tours/blog_search_with_date.js
+++ b/addons/website_blog/static/tests/tours/blog_search_with_date.js
@@ -12,7 +12,7 @@ registry.category("web_tour.tours").add("blog_autocomplete_with_date", {
             expectUnloadPage: true,
         },
         {
-            trigger: '#o_wblog_posts_loop span:has(i.fa-calendar-o):has(a[href="/blog"])',
+            trigger: '#o_wblog_posts_loop span:has(i[data-icon="calendar_today"]):has(a[href="/blog"])',
         },
         {
             content: "Enter search term",
@@ -24,13 +24,13 @@ registry.category("web_tour.tours").add("blog_autocomplete_with_date", {
         },
         {
             content: "Wait for suggestions then click on search icon",
-            trigger: ".o_searchbar_form button:has(i.oi-search)",
+            trigger: ".o_searchbar_form button:has(i[data-icon='search'])",
             run: "click",
             expectUnloadPage: true,
         },
         {
             content: "Ensure both filters are applied",
-            trigger: `#o_wblog_posts_loop:has(span a[href="/blog?search=a"]):has(span i.fa-calendar-o):has(span a[href^="/blog?date_begin"]):has(span i.fa-search)`,
+            trigger: `#o_wblog_posts_loop:has(span a[href="/blog?search=a"]):has(span i[data-icon="calendar_today"]):has(span a[href^="/blog?date_begin"]):has(span i[data-icon="search"])`,
         },
     ],
 });
diff --git a/addons/website_blog/static/tests/tours/blog_tags_tour.js b/addons/website_blog/static/tests/tours/blog_tags_tour.js
index c48ddc31281c02..d63d8079e9ca0a 100644
--- a/addons/website_blog/static/tests/tours/blog_tags_tour.js
+++ b/addons/website_blog/static/tests/tours/blog_tags_tour.js
@@ -51,7 +51,7 @@ registerWebsitePreviewTour(
         ...clickOnSnippet("#o_wblog_post_top .o_wblog_post_page_cover"),
         {
             content: "Remove tag",
-            trigger: "[data-label='Tags'] table tr:has(input[data-name='testtag']) button.fa-minus",
+            trigger: "[data-label='Tags'] table tr:has(input[data-name='testtag']) button[data-icon='remove']",
             run: "click",
         },
         {
@@ -81,7 +81,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Verify we are still on the backend",
-            trigger: ":iframe span:contains(adventure) i.fa-tag",
+            trigger: ":iframe span:contains(adventure) i[data-icon='label']",
         },
     ]
 );
diff --git a/addons/website_blog/static/tests/tours/blog_tags_with_date.js b/addons/website_blog/static/tests/tours/blog_tags_with_date.js
index 32af5ec5673127..f0eb17b76ea8a8 100644
--- a/addons/website_blog/static/tests/tours/blog_tags_with_date.js
+++ b/addons/website_blog/static/tests/tours/blog_tags_with_date.js
@@ -46,7 +46,7 @@ registerWebsitePreviewTour(
         },
         {
             content: "Check date filter has been added",
-            trigger: ":iframe #o_wblog_posts_loop span>i.fa-calendar-o",
+            trigger: ":iframe #o_wblog_posts_loop span>i[data-icon='calendar_today']",
         },
         {
             content:
@@ -56,12 +56,12 @@ registerWebsitePreviewTour(
         },
         {
             content: "Remove the date filter",
-            trigger: ":iframe #o_wblog_posts_loop span:has(i.fa-calendar-o) a",
+            trigger: ":iframe #o_wblog_posts_loop span:has(i[data-icon='calendar_today']) a",
             run: "click",
         },
         {
             content: "Date filter should not be present",
-            trigger: ":iframe #o_wblog_posts_loop span:not(:has(i.fa-calendar-o))",
+            trigger: ":iframe #o_wblog_posts_loop span:not(:has(i[data-icon='calendar_today']))",
         },
         {
             content:
diff --git a/addons/website_blog/views/snippets/s_blog_posts.xml b/addons/website_blog/views/snippets/s_blog_posts.xml
index 57f19435c70bcd..576b26006e7f4b 100644
--- a/addons/website_blog/views/snippets/s_blog_posts.xml
+++ b/addons/website_blog/views/snippets/s_blog_posts.xml
@@ -210,7 +210,7 @@
                 <t t-call="website_blog.s_dynamic_snippet_template_teaser"
                     teaser_custom_class.f="lead h4-fs"/>
             </a>
-            <a class="btn btn-primary d-lg-none w-100 w-sm-auto mt-4" t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']">Read Now <i class="fa fa-long-arrow-right" role="presentation"/></a>
+            <a class="btn btn-primary d-lg-none w-100 w-sm-auto mt-4" t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']">Read Now <i class="oi" data-icon="east" role="presentation"/></a>
         </div>
     </t>
 </template>
@@ -234,7 +234,7 @@
                     <t t-call="website_blog.s_dynamic_snippet_template_category"/>
                 </div>
                 <t t-call="website_blog.s_dynamic_snippet_template_teaser" teaser_custom_class.f="lead"/>
-                <a class="btn btn-primary" t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']">Read Now <i class="fa fa-long-arrow-right" role="presentation"/></a>
+                <a class="btn btn-primary" t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']">Read Now <i class="oi" data-icon="east" role="presentation"/></a>
             </div>
             <div class="col-lg-5 order-1 order-lg-2 h-auto mb-4 mb-lg-0">
                 <t t-call="website.record_cover"
@@ -266,7 +266,7 @@
                     <t t-call="website_blog.s_dynamic_snippet_template_category"/>
                 </div>
                 <p class="lead" t-field="record.subtitle"/>
-                <a class="btn btn-primary w-100 w-sm-auto" t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']">Read Now <i class="fa fa-long-arrow-right" role="presentation"/></a>
+                <a class="btn btn-primary w-100 w-sm-auto" t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']">Read Now <i class="oi" data-icon="east" role="presentation"/></a>
             </div>
             <div class="col-12 col-sm-4 mb-3 mb-lg-0">
                 <t t-call="website.record_cover"
@@ -294,7 +294,7 @@
                             in <span t-field="record.blog_id.name"/>
                         </span>
                     </span>
-                    <span class="text-primary text-nowrap">Read Now <i class="fa fa-long-arrow-right"/></span>
+                    <span class="text-primary text-nowrap">Read Now <i class="oi" data-icon="east"/></span>
                 </span>
             </a>
         </div>
diff --git a/addons/website_blog/views/snippets/s_dynamic_snippet_blog_posts_preview_data.xml b/addons/website_blog/views/snippets/s_dynamic_snippet_blog_posts_preview_data.xml
index b50c1e00113386..d898b6186dfb2c 100644
--- a/addons/website_blog/views/snippets/s_dynamic_snippet_blog_posts_preview_data.xml
+++ b/addons/website_blog/views/snippets/s_dynamic_snippet_blog_posts_preview_data.xml
@@ -62,7 +62,7 @@
                         <p>Sierra Tarahumara, popularly known as Copper Canyon is situated in Mexico. The area is a favorite destination among those...</p>
                     </div>
                     <div class="card-footer d-flex justify-content-between mt-auto border-0 p-3 pt-0 bg-transparent small">
-                        <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
+                        <span><i class="oi me-2" data-icon="account_circle" role="presentation"/> Marc Demo</span>
                         <span class="text-muted">In <a href="#">Travel</a></span>
                     </div>
                 </div>
@@ -78,7 +78,7 @@
                         <p>So you're going abroad, you've chosen your destination and now you have to choose a hotel. Ten years ago, you'd have...</p>
                     </div>
                     <div class="card-footer d-flex justify-content-between mt-auto border-0 p-3 pt-0 bg-transparent small">
-                        <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
+                        <span><i class="oi me-2" data-icon="account_circle" role="presentation"/> Marc Demo</span>
                         <span class="text-muted">In <a href="#">Travel</a></span>
                     </div>
                 </div>
@@ -94,7 +94,7 @@
                         <p>Maui helicopter tours are a great way to see the island from a different perspective and have a fun adventure...</p>
                     </div>
                     <div class="card-footer d-flex justify-content-between mt-auto border-0 p-3 pt-0 bg-transparent small">
-                        <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
+                        <span><i class="oi me-2" data-icon="account_circle" role="presentation"/> Marc Demo</span>
                         <span class="text-muted">In <a href="#">Travel</a></span>
                     </div>
                 </div>
@@ -110,7 +110,7 @@
                         <p>Buying the right telescope to take your love of astronomy to the next level is a big next step in the development...</p>
                     </div>
                     <div class="card-footer d-flex justify-content-between mt-auto border-0 p-3 pt-0 bg-transparent small">
-                        <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
+                        <span><i class="oi me-2" data-icon="account_circle" role="presentation"/> Marc Demo</span>
                         <span class="text-muted">In <a href="#">Astronomy</a></span>
                     </div>
                 </div>
@@ -133,7 +133,7 @@
                             <p class="mt-1 mb-0 lead">An exciting mix of relaxation, culture, history, wildlife and hiking.</p>
                         </div>
                         <div class="d-flex justify-content-between small">
-                            <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
+                            <span><i class="oi me-2" data-icon="account_circle" role="presentation"/> Marc Demo</span>
                             <span class="text-muted">In <a href="#">Travel</a></span>
                         </div>
                     </div>
@@ -153,7 +153,7 @@
                             <p class="mt-1 mb-0 lead">Facts you should bear in mind.</p>
                         </div>
                         <div class="d-flex justify-content-between small">
-                            <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
+                            <span><i class="oi me-2" data-icon="account_circle" role="presentation"/> Marc Demo</span>
                             <span class="text-muted">In <a href="#">Travel</a></span>
                         </div>
                     </div>
@@ -173,7 +173,7 @@
                             <p class="mt-1 mb-0 lead">A great way to discover hidden places</p>
                         </div>
                         <div class="d-flex justify-content-between small">
-                            <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
+                            <span><i class="oi me-2" data-icon="account_circle" role="presentation"/> Marc Demo</span>
                             <span class="text-muted">In <a href="#">Travel</a></span>
                         </div>
                     </div>
@@ -185,7 +185,7 @@
         <div class="s_dialog_preview row row-cols-3 g-4">
             <div class="col">
                 <div class="d-flex align-items-center small">
-                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
+                    <span><i class="oi me-2" data-icon="account_circle" role="presentation"/>Marc Demo</span>
                     <span class="text-muted"> • Mar 13, 2025</span>
                 </div>
                 <h4 class="mt-2">Sierra Tarahumara</h4>
@@ -193,7 +193,7 @@
             </div>
             <div class="col">
                 <div class="d-flex align-items-center small">
-                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
+                    <span><i class="oi me-2" data-icon="account_circle" role="presentation"/>Marc Demo</span>
                     <span class="text-muted"> • Mar 13, 2025</span>
                 </div>
                 <h4 class="mt-2">How to choose the right hotel</h4>
@@ -201,7 +201,7 @@
             </div>
             <div class="col">
                 <div class="d-flex align-items-center small">
-                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
+                    <span><i class="oi me-2" data-icon="account_circle" role="presentation"/>Marc Demo</span>
                     <span class="text-muted"> • Mar 13, 2025</span>
                 </div>
                 <h4 class="mt-2">Maui helicopter tours</h4>
@@ -209,7 +209,7 @@
             </div>
             <div class="col">
                 <div class="d-flex align-items-center small">
-                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
+                    <span><i class="oi me-2" data-icon="account_circle" role="presentation"/>Marc Demo</span>
                     <span class="text-muted"> • Mar 13, 2025</span>
                 </div>
                 <h4 class="mt-2">Buying A Telescope</h4>
@@ -217,7 +217,7 @@
             </div>
             <div class="col">
                 <div class="d-flex align-items-center small">
-                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
+                    <span><i class="oi me-2" data-icon="account_circle" role="presentation"/>Marc Demo</span>
                     <span class="text-muted"> • Mar 13, 2025</span>
                 </div>
                 <h4 class="mt-2">How To Look Up</h4>
@@ -225,7 +225,7 @@
             </div>
             <div class="col">
                 <div class="d-flex align-items-center small">
-                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
+                    <span><i class="oi me-2" data-icon="account_circle" role="presentation"/>Marc Demo</span>
                     <span class="text-muted"> • Mar 13, 2025</span>
                 </div>
                 <h4 class="mt-2">Beyond The Eye</h4>
@@ -238,7 +238,7 @@
     <template id="s_dynamic_snippet_blog_posts_single_full_preview_data" name="Single Blog Preview Data">
         <div class="s_dialog_preview">
             <h2 class="display-3-fs">How to choose the right hotel</h2>
-            <span class="d-block my-3 text-muted"><i class="fa fa-user-circle-o me-2" role="presentation"/><span>Marc Demo</span> • <span>Mar 13, 2025</span> • <a href="#">Travel</a></span>
+            <span class="d-block my-3 text-muted"><i class="oi me-2" data-icon="account_circle" role="presentation"/><span>Marc Demo</span> • <span>Mar 13, 2025</span> • <a href="#">Travel</a></span>
             <p class="lead h4-fs">So you're going abroad, you've chosen your destination and now you have to choose a hotel. Ten years ago, you'd have probably visited your local travel agent and trusted the face-to-face advice you we...</p>
         </div>
     </template>
@@ -246,9 +246,9 @@
         <div class="s_dialog_preview row my-4">
             <div class="col-lg-7 pe-5 align-content-center">
                 <h2>Sierra Tarahumara</h2>
-                <span class="d-block my-2 text-muted"><i class="fa fa-user-circle-o me-2" role="presentation"/><span>Marc Demo</span> • <span>Mar 13, 2025</span> • <a href="#">Travel</a></span>
+                <span class="d-block my-2 text-muted"><i class="oi me-2" data-icon="account_circle" role="presentation"/><span>Marc Demo</span> • <span>Mar 13, 2025</span> • <a href="#">Travel</a></span>
                 <p class="lead">Sierra Tarahumara, popularly known as Copper Canyon is situated in Mexico. The area is a favorite destination among those seeking an adventurous vacation. Copper Canyon is one of the six gorges in the...</p>
-                <a class="btn btn-primary" href="#">Read Now <i class="fa fa-long-arrow-right ms-2" role="presentation"/></a>
+                <a class="btn btn-primary" href="#">Read Now <i class="oi ms-2" data-icon="east" role="presentation"/></a>
             </div>
             <div class="col-lg-5">
                 <div class="ratio ratio-16x9">
@@ -265,10 +265,10 @@
             <div class="col-8">
                 <h2>How to choose the right hotel</h2>
                 <div class="mb-2">
-                    <span class="text-muted"><i class="fa fa-user-circle-o me-2" role="presentation"/><span>Marc Demo</span> • <span>Mar 13, 2025</span> • <a href="#">Travel</a></span>
+                    <span class="text-muted"><i class="oi me-2" data-icon="account_circle" role="presentation"/><span>Marc Demo</span> • <span>Mar 13, 2025</span> • <a href="#">Travel</a></span>
                 </div>
                 <p class="lead">Facts you should bear in mind.</p>
-                <a class="btn btn-primary" href="#">Read Now <i class="fa fa-long-arrow-right" role="presentation"/></a>
+                <a class="btn btn-primary" href="#">Read Now <i class="oi" data-icon="east" role="presentation"/></a>
             </div>
         </div>
     </template>
@@ -279,7 +279,7 @@
                     <span class="badge text-bg-primary">NEW</span>
                     <strong>Sierra Tarahumara</strong>
                     <span class="text-muted">Marc Demo in Travel</span>
-                    <span class="text-primary">Read Now <i class="fa fa-long-arrow-right" role="presentation"/></span>
+                    <span class="text-primary">Read Now <i class="oi" data-icon="east" role="presentation"/></span>
                 </span>
             </div>
         </div>
diff --git a/addons/website_blog/views/website_blog_components.xml b/addons/website_blog/views/website_blog_components.xml
index d220d5b192993a..80179bd6939605 100644
--- a/addons/website_blog/views/website_blog_components.xml
+++ b/addons/website_blog/views/website_blog_components.xml
@@ -34,7 +34,7 @@
                        data-bs-toggle="offcanvas"
                        data-bs-target="#o_wblog_offcanvas"
                        aria-controls="o_wblog_offcanvas">
-                        <i class="fa fa-navicon" role="img"/>
+                        <i class="oi" data-icon="menu" role="img"/>
                     </a>
                     <div id="o_wblog_offcanvas" class="offcanvas offcanvas-end d-lg-none">
                         <div class="offcanvas-header">
@@ -103,7 +103,7 @@
         <t t-foreach="tags" t-as="tag">
             <t t-if="tag.post_ids">
                 <span t-if="dismissibleBtn and tag.id in active_tag_ids" t-attf-class="align-items-baseline d-inline-flex ps-2 rounded mb-2 o_filter_tag #{'o_color_%s' % tag.color}">
-                    <i class="fa fa-tag me-2"/>
+                    <i class="oi me-2" data-icon="label"/>
                     <t t-out="tag.name"/>
                     <a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}" class="btn border-0 py-1 post_link text-reset" t-att-rel="len(active_tag_ids) and 'nofollow'">×</a>
                 </span>
@@ -166,7 +166,7 @@
         <li t-if="len(blogs) &gt; 1" class="breadcrumb-item d-none d-lg-inline"><a href="/blog">All Blogs</a></li>
         <li class="breadcrumb-item">
             <a t-attf-href="#{blog_url(tag=None, date_begin=None, date_end=None)}">
-                <i class="oi oi-chevron-left d-lg-none me-1" role="presentation"/><t t-out="blog.name"/>
+                <i class="oi d-lg-none me-1" data-icon="chevron_backward" role="presentation"/><t t-out="blog.name"/>
             </a>
         </li>
         <li class="breadcrumb-item text-truncate active d-none d-lg-inline"><span t-out="blog_post.name"/></li>
@@ -176,7 +176,7 @@
 <!--  Template: Blog Post Information-->
 <template id="blog_post_info" name="Blog Post Info">
     <div id="o_wblog_post_info" class="text-muted mb-2">
-        <i class="fa fa-clock-o fa-fw"/>
+        <i class="oi oi-fw" data-icon="schedule"/>
         <span t-if="blog_post.published_date" t-field="blog_post.published_date" class="text-muted" t-options="{'format': 'long', 'date_only': 'true'}"/>
         <span t-elif="blog_post.publish_on" t-field="blog_post.publish_on" class="text-muted" t-options="{'format': 'long', 'date_only': 'true'}"/>
         <span style="display: inline-flex">by
@@ -186,7 +186,7 @@
         </span>
         <t t-if="is_view_active('website_blog.opt_blog_post_comment')">
             <span t-if="blog_post.message_ids" class="text-nowrap o_not_editable">|
-            <i class="fa fa-comment ms-1 text-muted"/>
+            <i class="oi oi-filled ms-1 text-muted" data-icon="chat_bubble"/>
             <a href="#discussion">
                 <t t-out="len(blog_post.message_ids)"/>
                 <t t-if="len(blog_post.message_ids) > 1">Comments</t>
@@ -209,7 +209,7 @@ Options:
 <template id="sidebar_blog_index" name="Sidebar - Blog page">
     <div id="o_wblog_sidebar" class="w-100">
         <div class="oe_structure" id="oe_structure_blog_sidebar_index_1"/>
-        <a t-if="blog" title="RSS" t-attf-href="/blog/#{slug(blog)}/feed" class="fa fa-rss-square float-end"/>
+        <a t-if="blog" title="RSS" t-attf-href="/blog/#{slug(blog)}/feed" class="oi float-end" data-icon="rss_feed"/>
         <div class="o_wblog_sidebar_block pb-5">
             <h6 class="text-uppercase pb-2 mb-4 border-bottom fw-bold">About us</h6>
             <div>
diff --git a/addons/website_blog/views/website_blog_posts_loop.xml b/addons/website_blog/views/website_blog_posts_loop.xml
index 8c342f3b53a938..ac4daa43c7ff9c 100644
--- a/addons/website_blog/views/website_blog_posts_loop.xml
+++ b/addons/website_blog/views/website_blog_posts_loop.xml
@@ -22,17 +22,17 @@ according to the enabled options.
                 <div class="btn-group btn-group-sm">
                     <a t-attf-class="btn #{state == 'published' and 'btn-success' or 'bg-white border'}"
                        t-attf-href="#{state == 'published' and blog_url(state='') or blog_url(state='published')}">
-                        <i t-attf-class="fa me-1 #{state == 'published' and 'fa-check-square-o' or 'fa-square-o'}"/>
+                        <i class="oi me-1" t-attf-data-icon="#{state == 'published' and 'check_box' or 'square'}"/>
                         Published (<t t-out="state_info['published']" />)
                     </a>
                     <a t-attf-class="btn #{state == 'unpublished' and 'btn-success' or 'bg-white border'}"
                        t-attf-href="#{state == 'unpublished' and blog_url(state='') or blog_url(state='unpublished')}">
-                        <i t-attf-class="fa me-1 #{state == 'unpublished' and 'fa-check-square-o' or 'fa-square-o'}"/>
+                        <i class="oi me-1" t-attf-data-icon="#{state == 'unpublished' and 'check_box' or 'square'}"/>
                         Unpublished (<t t-out="state_info['unpublished']" />)
                     </a>
                     <a t-attf-class="btn #{state == 'scheduled' and 'btn-success' or 'btn-default bg-white border'}"
                        t-attf-href="#{state == 'scheduled' and blog_url(state='') or blog_url(state='scheduled')}">
-                        <i t-attf-class="fa me-1 #{state == 'scheduled' and 'fa-check-square-o' or 'fa-square-o'}"/>
+                        <i class="oi me-1" t-attf-data-icon="#{state == 'scheduled' and 'check_box' or 'square'}"/>
                         Scheduled (<t t-out="state_info['scheduled']" />)
                     </a>
                 </div>
@@ -49,7 +49,7 @@ according to the enabled options.
                     <t t-else="">Articles</t>
                 </div>
                 <span t-if="search" class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
-                    <i class="fa fa-search me-2 text-muted"/>
+                    <i class="oi me-2 text-muted" data-icon="search"/>
                     <t t-out="search"/>
                     <a t-att-href="blog_url(search=False, tag=tag)" class="btn border-0 py-1 post_link">×</a>
                 </span>
@@ -63,7 +63,7 @@ according to the enabled options.
                     <t t-call="website_blog.tags_list" tags="other_tags" dismissibleBtn="True"/>
                 </t>
                 <span t-if="date_begin" class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
-                    <i class="fa fa-calendar-o me-2 text-muted"/>
+                    <i class="oi me-2 text-muted" data-icon="calendar_today"/>
                     <t t-out="date_begin" t-options="{'widget': 'date', 'format': 'MMM yyyy'}"/>
                     <a t-attf-href="#{blog_url(date_begin=False, date_end=False, tag=tag)}" class="btn border-0 py-1 post_link">×</a>
                 </span>
@@ -118,7 +118,7 @@ according to the enabled options.
                             </div>
                             <div t-else="" class="mt-3">
                                 <a t-attf-href="/blog/#{slug(blog_post.blog_id)}/#{slug(blog_post)}" class="btn btn-primary">
-                                    Read more <i class="oi oi-chevron-right ms-2"/>
+                                    Read more <i class="oi ms-2" data-icon="chevron_forward"/>
                                 </a>
                             </div>
                         </t>
@@ -171,11 +171,11 @@ according to the enabled options.
             <time t-if="blog_post.published_date" t-field="blog_post.published_date" class="text-nowrap fw-bold px-2" t-options="{'widget': 'datetime', 'date_only': 'true', 'format': 'medium'}"/>
             <time t-elif="blog_post.publish_on" t-field="blog_post.publish_on" class="text-nowrap fw-bold px-2" t-options="{'widget': 'datetime', 'date_only': 'true', 'format': 'medium'}"/>
             <div t-if="is_view_active('website_blog.opt_posts_loop_show_stats')" class="px-2">
-                <b class="text-nowrap" title="Comments"><i class="fa fa-comment text-muted me-1"/><t t-out="len(blog_post.message_ids)"/></b>
-                <b class="text-nowrap ps-2" title="Views"><i class="fa fa-eye text-muted me-1"/><t t-out="blog_post.visits"/></b>
+                <b class="text-nowrap" title="Comments"><i class="oi oi-filled text-muted me-1" data-icon="chat_bubble"/><t t-out="len(blog_post.message_ids)"/></b>
+                <b class="text-nowrap ps-2" title="Views"><i class="oi text-muted me-1" data-icon="visibility"/><t t-out="blog_post.visits"/></b>
             </div>
             <b t-if="posts_list_show_parent_blog" class="text-nowrap text-truncate px-2">
-                <i class="fa fa-folder-open text-muted"/>
+                <i class="oi oi-filled text-muted" data-icon="folder_open"/>
                 <a t-attf-href="/blog/#{slug(blog_post.blog_id)}" t-field="blog_post.blog_id"/>
             </b>
         </div>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 6cf79447b5a840..d1c08860017063 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -194,7 +194,7 @@ list of filtered posts (by date or tag).
                         <a t-if="{'o_full_screen_height', 'o_half_screen_height', 'cover_full', 'cover_mid'}.intersection(resize_classes)"
                             id="o_wblog_post_content_jump" href="#o_wblog_post_main"
                             class="css_editable_mode_hidden justify-content-center align-items-center rounded-circle mx-auto mb-5 text-decoration-none">
-                            <i class="fa fa-angle-down fa-3x text-white" aria-label="To blog content" title="To blog content"/>
+                            <i class="oi oi-3x text-white" data-icon="keyboard_arrow_down" aria-label="To blog content" title="To blog content"/>
                         </a>
                     </div>
                 </t>
@@ -380,7 +380,7 @@ list of filtered posts (by date or tag).
 
                             <div t-attf-class="o_wblog_toggle #{next_cover_is_full and 'mb-n5'}">
                                 <span class="h4 d-inline-block py-1 px-2 rounded-1 text-white">
-                                    <i class="fa fa-angle-right fa-3x text-white" aria-label="Read next" title="Read Next"/>
+                                    <i class="oi oi-3x text-white" data-icon="keyboard_arrow_right" aria-label="Read next" title="Read Next"/>
                                 </span>
                             </div>
 
diff --git a/addons/website_blog/views/website_pages_views.xml b/addons/website_blog/views/website_pages_views.xml
index 1620b71dfdfcd0..7343656c159345 100644
--- a/addons/website_blog/views/website_pages_views.xml
+++ b/addons/website_blog/views/website_pages_views.xml
@@ -67,13 +67,13 @@
                         <div class="col-8 fw-bolder">
                             <field class="d-block text-truncate" name="name"/>
                             <div class="text-muted" t-if="record.website_id.value" groups="website.group_multi_website">
-                                <i class="fa fa-globe me-1" title="Website"/>
+                                <i class="oi me-1" data-icon="public" title="Website"/>
                                 <field name="website_id"/>
                             </div>
                         </div>
                         <field name="blog_id" class="col-4 text-end fw-bolder"/>
                         <div class="col-8">
-                            <i class="fa fa-clock-o me-1" role="img" aria-label="Post date" title="Post date"/>
+                            <i class="oi me-1" data-icon="schedule" role="img" aria-label="Post date" title="Post date"/>
                             <t t-if="record.published_date.value">
                                 <field name="published_date"/>
                             </t>
diff --git a/addons/website_cf_turnstile/views/res_config_settings_view.xml b/addons/website_cf_turnstile/views/res_config_settings_view.xml
index d4db56a25c62b1..2f59adce414f22 100644
--- a/addons/website_cf_turnstile/views/res_config_settings_view.xml
+++ b/addons/website_cf_turnstile/views/res_config_settings_view.xml
@@ -18,7 +18,7 @@
                     </div>
                     <div>
                         <a href="https://blog.cloudflare.com/turnstile-private-captcha-alternative/" class="oe_link" target="_blank">
-                            <i class="oi oi-arrow-right"/> More info
+                            <i class="oi" data-icon="east"/> More info
                         </a>
                     </div>
                 </div>
diff --git a/addons/website_crm/views/crm_lead_views.xml b/addons/website_crm/views/crm_lead_views.xml
index edea42fe9c15ef..edda8be42430f5 100644
--- a/addons/website_crm/views/crm_lead_views.xml
+++ b/addons/website_crm/views/crm_lead_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="crm.crm_lead_view_form"/>
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_schedule_meeting']" position="after">
-                <button name="action_redirect_to_page_views" type="object" class="oe_stat_button" icon="fa-eye"
+                <button name="action_redirect_to_page_views" type="object" class="oe_stat_button" icon="visibility"
                         invisible="visitor_page_count == 0">
                     <field name="visitor_page_count" widget="statinfo" string="Page views"/>
                 </button>
diff --git a/addons/website_crm/views/website_visitor_views.xml b/addons/website_crm/views/website_visitor_views.xml
index a0bbe00a8fe6e5..52d350d62d8d8b 100644
--- a/addons/website_crm/views/website_visitor_views.xml
+++ b/addons/website_crm/views/website_visitor_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="website.website_visitor_view_form"/>
         <field name="arch" type="xml">
             <xpath expr="//button[@id='w_visitor_visit_counter']" position="before">
-                <button name="%(website_crm.crm_lead_action_from_visitor)d" type="action" class="oe_stat_button" icon="fa-star"
+                <button name="%(website_crm.crm_lead_action_from_visitor)d" type="action" class="oe_stat_button" icon="star" icon_class="oi-filled"
                         groups="sales_team.group_sale_salesman"
                         invisible="lead_count == 0">
                     <field name="lead_count" widget="statinfo" string="Leads"/>
diff --git a/addons/website_crm_iap_reveal/views/crm_reveal_views.xml b/addons/website_crm_iap_reveal/views/crm_reveal_views.xml
index abd52cd850d0d5..215c921f0773e3 100644
--- a/addons/website_crm_iap_reveal/views/crm_reveal_views.xml
+++ b/addons/website_crm_iap_reveal/views/crm_reveal_views.xml
@@ -7,13 +7,13 @@
             <form>
                 <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button name="action_get_opportunity_tree_view" class="oe_stat_button" type="object" icon="fa-star" invisible="lead_type != 'opportunity' and opportunity_count == 0">
+                        <button name="action_get_opportunity_tree_view" class="oe_stat_button" type="object" icon="star" icon_class="oi-filled" invisible="lead_type != 'opportunity' and opportunity_count == 0">
                             <div class="o_stat_info">
                                 <field name="opportunity_count"/>
                                 <span class="o_stat_text"> Opportunities </span>
                             </div>
                         </button>
-                        <button name="action_get_lead_tree_view" class="oe_stat_button" type="object" icon="fa-star" groups="crm.group_use_lead" invisible="lead_type != 'lead' and lead_count == 0">
+                        <button name="action_get_lead_tree_view" class="oe_stat_button" type="object" icon="star" icon_class="oi-filled" groups="crm.group_use_lead" invisible="lead_type != 'lead' and lead_count == 0">
                             <div class="o_stat_info">
                                 <field name="lead_count"/>
                                 <span class="o_stat_text"> Leads </span>
diff --git a/addons/website_crm_livechat/views/website_crm_lead_views.xml b/addons/website_crm_livechat/views/website_crm_lead_views.xml
index 7628c249fb756e..c6c6e6caa76dbc 100644
--- a/addons/website_crm_livechat/views/website_crm_lead_views.xml
+++ b/addons/website_crm_livechat/views/website_crm_lead_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="website_crm.crm_lead_view_form"/>
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_redirect_to_page_views']" position="after">
-                <button name="action_redirect_to_livechat_sessions" type="object" class="oe_stat_button" icon="fa-comment"
+                <button name="action_redirect_to_livechat_sessions" type="object" class="oe_stat_button" icon="chat_bubble" icon_class="oi-filled"
                         invisible="visitor_sessions_count == 0" groups="im_livechat.im_livechat_group_user">
                     <field name="visitor_sessions_count" widget="statinfo" string="Sessions"/>
                 </button>
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index 83e9f2d4b1523f..2478dde5ea2020 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -51,7 +51,7 @@
     </xpath>
     <xpath expr="//div[@t-elif='not partners']" position="after">
         <div t-elif="fallback_all_countries" class="mt-4 alert alert-primary alert-dismissible fade show" role="alert">
-            <i class="fa fa-info-circle me-2"/>
+            <i class="oi me-2" data-icon="info"/>
             There are no matching partners found for the selected country. Displaying results across all countries instead.
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
@@ -159,10 +159,10 @@
             <!-- modal end -->
             <div class="btn-group ms-2">
                 <button class="btn btn-light border-primary active">
-                    <i class="fa fa-th-large"/>
+                    <i class="oi" data-icon="view_module"/>
                 </button>
                 <button class="btn btn-light" data-bs-toggle="modal" data-bs-target=".partner_map_modal">
-                    <i class="fa fa-map-marker" role="img" aria-label="Open map" title="Open map"/>
+                    <i class="oi" data-icon="location_on" role="img" aria-label="Open map" title="Open map"/>
                 </button>
             </div>
         </t>
@@ -186,7 +186,7 @@
 <template id="partner_detail" inherit_id="website_partnership.partner_detail">
     <xpath expr="//a[@id='link_back_to_partners']" position="replace">
         <a t-attf-href="/partners#{ current_grade and '/grade/%s' % slug(current_grade) or '' }#{ current_country and '/country/%s' % slug(current_country) or '' }" aria-label="Back to resellers list">
-            <i class="oi oi-chevron-left me-2"/>Back
+            <i class="oi me-2" data-icon="chevron_backward"/>Back
         </a>
     </xpath>
 </template>
@@ -376,7 +376,7 @@
                     <span t-field="lead.name"/>
                     <span title="Rating" role="img" t-attf-aria-label="Rating: #{lead.priority} on 3" class="fs-6">
                         <t t-foreach="range(1, 4)" t-as="i">
-                            <span t-attf-class="fa fa-lg fa-star#{' text-warning' if i &lt;= int(lead.priority) else '-o'}"/>
+                            <span t-attf-class="oi oi-lg #{'oi-filled text-warning' if i &lt;= int(lead.priority) else ''}" data-icon="star"/>
                         </t>
                     </span>
                 </h4>
@@ -392,10 +392,10 @@
                                     <span t-if="not lead.partner_name" itemprop="name" t-field="lead.contact_name"/>
                                 </div>
                                 <div t-if="lead.phone">
-                                    <span class="fa fa-phone" role="img" aria-label="Phone" title="Phone"/> <span itemprop="telephone" t-field="lead.phone" />
+                                    <span class="oi oi-filled" data-icon="phone" role="img" aria-label="Phone" title="Phone"/> <span itemprop="telephone" t-field="lead.phone" />
                                 </div>
                                 <div t-if="lead.email_from">
-                                    <span class="fa fa-envelope" role="img" aria-label="Email" title="Email"/> <span itemprop="email" t-field="lead.email_from" />
+                                    <span class="oi oi-filled" data-icon="mail" role="img" aria-label="Email" title="Email"/> <span itemprop="email" t-field="lead.email_from" />
                                 </div>
                             </address>
                         </td>
@@ -545,7 +545,7 @@
                 <div class="d-flex justify-content-between align-items-center gap-2">
                     <p class="mb-0 fw-bold">Stage:</p>
                     <div t-foreach="stages[::-1]" t-as="stage" class="d-flex justify-content-between align-items-center gap-2">
-                        <i t-if="not stage_first" class="oi oi-chevron-right small" style="opacity: 0.5"/>
+                        <i t-if="not stage_first" class="oi small" data-icon="chevron_forward" style="opacity: 0.5"/>
                         <button type="button" t-att-data="stage.id" t-att-opp="opportunity.id" t-attf-class="btn btn-sm px-2 opp-stage-button #{'btn-light' if opportunity.stage_id.name != stage.name else 'btn-primary disabled'}">
                             <span t-field="stage.name"/>
                         </button>
@@ -562,7 +562,7 @@
                                 <t t-else="" t-out="opportunity.expected_revenue"/> at  </span>
                             <span class="badge text-bg-info"><span t-field="opportunity.probability"/>%</span>
                         </h5>
-                        <button type="button" data-bs-toggle="modal" data-bs-target=".modal_edit_opp" class="btn btn-link btn-sm"><i class="fa fa-pencil me-1"/>Edit</button>
+                        <button type="button" data-bs-toggle="modal" data-bs-target=".modal_edit_opp" class="btn btn-link btn-sm"><i class="oi oi-filled me-1" data-icon="edit"/>Edit</button>
                     </div>
                     <div class="row mb-2">
                         <strong class="col-12 col-sm-4">Expected Closing</strong>
@@ -576,7 +576,7 @@
                         <div class="col">
                             <span class="" title="Rating" role="img" t-attf-aria-label="Rating: #{opportunity.priority} on 4">
                                 <t t-foreach="range(1, 4)" t-as="i">
-                                    <span t-attf-class="fa text-warning fa-lg fa-star#{'' if i &lt;= int(opportunity.priority) else '-o'}" role="img" t-att-aria-label="'Star %d of 3' % i"/>
+                                    <span t-attf-class="oi oi-lg text-warning #{'oi-filled' if i &lt;= int(opportunity.priority) else ''}" data-icon="star" role="img" t-att-aria-label="'Star %d of 3' % i"/>
                                 </t>
                             </span>
                         </div>
@@ -598,7 +598,7 @@
                 <div class="col-lg-6 offset-lg-1 col-xl-5 offset-xl-2">
                     <div class="d-flex justify-content-between py-2 mb-3 border-bottom align-items-center">
                         <h5 class="card-title mb-0">Contact</h5>
-                        <button type="button" data-bs-toggle="modal" data-bs-target=".modal_edit_contact" class="btn btn-link btn-sm"><i class="fa fa-pencil me-1"/>Edit</button>
+                        <button type="button" data-bs-toggle="modal" data-bs-target=".modal_edit_contact" class="btn btn-link btn-sm"><i class="oi oi-filled me-1" data-icon="edit"/>Edit</button>
                     </div>
                     <div class="row mb-3" t-if="opportunity.partner_name or opportunity.email_from or opportunity.contact_name">
                         <strong class="col-12 col-sm-3">Customer</strong>
@@ -618,7 +618,7 @@
                             <address t-if="opportunity.street or opportunity.street2 or opportunity.city or opportunity.zip or opportunity.state_id or opportunity.country_id"
                             class="col d-flex align-items-baseline mb-0 mt-2">
                                 <div class="d-flex flex-nowrap gap-3">
-                                    <div class="fa fa-map-marker fa-fw text-muted"></div>
+                                    <div class="oi oi-fw text-muted" data-icon="location_on"></div>
                                     <div>
                                         <div t-if="opportunity.street"><span t-field="opportunity.street"/></div>
                                         <span t-else="" class="text-muted"> - </span>
@@ -672,22 +672,22 @@
                                                 <div class="input-group">
                                                     <label class="radio-inline">
                                                         <input type="radio" name="PriorityRadioOptions" value="0" t-att-checked="opportunity.priority not in ['1','2','3']" aria-label="Rating: 0 on 3" title="Rating: 0 on 3"/>
-                                                        <i class="ms-1 fa fa-star-o"></i>
+                                                        <i class="ms-1 oi" data-icon="star"></i>
                                                     </label>
                                                     <label class="radio-inline ms-2">
                                                         <input type="radio" name="PriorityRadioOptions" value="1" t-att-checked="opportunity.priority == '1'" aria-label="Rating: 1 on 3" title="Rating: 1 on 3"/>
-                                                        <i class="ms-1 fa text-warning fa-star"></i>
+                                                        <i class="oi oi-filled ms-1 text-warning" data-icon="star"></i>
                                                     </label>
                                                     <label class="radio-inline ms-2">
                                                         <input type="radio" name="PriorityRadioOptions" value="2" t-att-checked="opportunity.priority == '2'" aria-label="Rating: 2 on 3" title="Rating: 2 on 3"/>
-                                                        <i class="ms-1 fa text-warning fa-star"></i>
-                                                        <i class="ms-1 fa text-warning fa-star"></i>
+                                                        <i class="oi oi-filled ms-1 text-warning" data-icon="star"></i>
+                                                        <i class="oi oi-filled ms-1 text-warning" data-icon="star"></i>
                                                     </label>
                                                     <label class="radio-inline ms-2">
                                                         <input type="radio" name="PriorityRadioOptions" value="3" t-att-checked="opportunity.priority == '3'" aria-label="Rating: 3 on 3" title="Rating: 3 on 3"/>
-                                                        <i class="ms-1 fa text-warning fa-star"></i>
-                                                        <i class="ms-1 fa text-warning fa-star"></i>
-                                                        <i class="ms-1 fa text-warning fa-star"></i>
+                                                        <i class="oi oi-filled ms-1 text-warning" data-icon="star"></i>
+                                                        <i class="oi oi-filled ms-1 text-warning" data-icon="star"></i>
+                                                        <i class="oi oi-filled ms-1 text-warning" data-icon="star"></i>
                                                     </label>
                                                 </div>
                                             </div>
@@ -697,7 +697,7 @@
                                                     <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-out="opportunity.date_deadline"/></t>
                                                     <input type="text" data-widget="datetime-picker" data-widget-type="date" name="date_deadline" t-att-value="date_formatted" class="datetimepicker-input form-control date_deadline" t-att-name="prefix"/>
                                                     <span class="input-group-text o_input_group_date_icon">
-                                                        <span class="fa fa-calendar" role="img" aria-label="Calendar"></span>
+                                                        <span class="oi oi-filled" data-icon="calendar_today" role="img" aria-label="Calendar"></span>
                                                     </span>
                                                 </div>
                                             </div>
@@ -722,7 +722,7 @@
                                                     <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-out="user_activity.date_deadline"/></t>
                                                     <input type="text" data-widget="datetime-picker" data-widget-type="date" name="activity_date_deadline" t-att-value="date_formatted" class="form-control activity_date_deadline datetimepicker-input" t-att-name="prefix"/>
                                                     <span class="input-group-text o_input_group_date_icon">
-                                                        <span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span>
+                                                        <span class="oi oi-filled" data-icon="calendar_today" role="img" aria-label="Calendar" title="Calendar"></span>
                                                     </span>
                                                 </div>
                                             </div>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index 017531495c558a..c79c27770dda30 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -12,14 +12,14 @@
                             <div class="input-group" role="search">
                                 <input type="text" name="search" class="search-query form-control border-0 bg-light" placeholder="Search" t-att-value="post.get('search', '')"/>
                                 <button type="submit" aria-label="Search" title="Search" class="oe_search_button btn btn-light">
-                                    <i class="oi oi-search"/>
+                                    <i class="oi" data-icon="search"/>
                                 </button>
                             </div>
                         </form>
                         <button class="btn btn-light position-relative ms-2 d-lg-none"
                             data-bs-toggle="offcanvas"
                             data-bs-target="#o_wc_offcanvas">
-                            <i class="fa fa-sliders"/>
+                            <i class="oi" data-icon="tune"/>
                         </button>
                     </div>
                 </section>
@@ -108,7 +108,7 @@
                                     <div class="accordion-body">
                                         <div class="d-flex flex-wrap align-items-center gap-1 mb-4" t-if="len(tags)">
                                             <a class="badge text-bg-info" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
-                                                <span class="fa fa-1x fa-tags"/> All </a>
+                                                <span class="oi oi-1x" data-icon="sell"/> All </a>
                                             <t t-foreach="tags" t-as="o_tag">
                                                 <a t-attf-class="badge text-bg-#{o_tag.classname}" t-out="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
                                                 t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
@@ -126,7 +126,7 @@
                         <a href="/customers">See all customers</a>
                     </div>
                     <div t-elif="fallback_all_countries" class="alert alert-primary alert-dismissible fade show" role="alert">
-                        <i class="fa fa-info-circle me-2"/>
+                        <i class="oi me-2" data-icon="info"/>
                         There are no matching customers found for the selected country. Displaying results across all countries instead.
                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                     </div>
@@ -181,10 +181,10 @@
             <!-- modal end -->
             <div class="btn-group ms-2">
                 <button class="btn btn-light border-primary active">
-                    <i class="fa fa-th-large"/>
+                    <i class="oi" data-icon="view_module"/>
                 </button>
                 <button class="btn btn-light" data-bs-toggle="modal" data-bs-target=".customer_map_modal">
-                    <i class="fa fa-map-marker" role="img" aria-label="Open map" title="Open map"/>
+                    <i class="oi" data-icon="location_on" role="img" aria-label="Open map" title="Open map"/>
                 </button>
             </div>
         </t>
@@ -238,7 +238,7 @@
     <xpath expr="//section[hasclass('o_wcrm_filters_top')]" position="after">
         <div class="d-flex flex-wrap align-items-center gap-2 my-4" t-if="len(tags)">
             <a class="badge text-bg-info" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
-                <span class="fa fa-1x fa-tags"/> All
+                <span class="oi oi-1x" data-icon="sell"/> All
             </a>
             <t t-foreach="tags" t-as="o_tag">
                 <a t-attf-class="text-bg-#{o_tag.classname} badge" t-out="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
@@ -256,7 +256,7 @@
         <div class="container mb-3">
             <div class="row">
                 <div class="mt-4 mb-3" t-if="not edit_page">
-                    <a t-attf-href="/customers" aria-label="Back to references list"><i class="oi oi-chevron-left me-2"/>Back to references</a>
+                    <a t-attf-href="/customers" aria-label="Back to references list"><i class="oi me-2" data-icon="chevron_backward"/>Back to references</a>
                 </div>
                 <t t-set="right_column">
                     <div id="right_column"><t t-call="website_customer.references_block"/></div>
diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml
index a6735cbe4cfe1b..1d3a840e1d70f1 100644
--- a/addons/website_event/data/event_demo.xml
+++ b/addons/website_event/data/event_demo.xml
@@ -12,7 +12,7 @@
                 <p class="mb-3">This event is also an opportunity to showcase our partners' case studies, methodology or developments. Be there and see directly from the source the features of the version 12!
                 </p>
                 <div class="text-bg-light border-start border-2 border-secondary p-3">
-                    <p class="mb-0"><i class="fa fa-info-circle me-2"/>This event and all the conferences are in <b>English</b>!</p>
+                    <p class="mb-0"><i class="oi me-2" data-icon="info"/>This event and all the conferences are in <b>English</b>!</p>
                 </div>
                 <h2 class="mb-2 h5-fs">What's new?</h2>
                 <ul class="mb-5">
diff --git a/addons/website_event/models/event_event.py b/addons/website_event/models/event_event.py
index 860cce5b89958c..ba66c3b9cd26e7 100644
--- a/addons/website_event/models/event_event.py
+++ b/addons/website_event/models/event_event.py
@@ -639,7 +639,7 @@ def search_in_address(env, search_term):
             'search_extra': search_in_address,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-ticket',
+            'icon': 'confirmation_number',
             # for website_event main controller:
             'dates': dates,
             'current_date': current_date,
@@ -656,7 +656,7 @@ def _search_render_results(self, fetch_fields, mapping, icon, limit):
                 begin = self.env['ir.qweb.field.date'].record_to_html(event, 'date_begin', {})
                 end = self.env['ir.qweb.field.date'].record_to_html(event, 'date_end', {})
                 data['range'] = (
-                    Markup('{} <i class="fa fa-long-arrow-right"></i> {}').format(begin, end)
+                    Markup('{} <i class="oi" data-icon="east"></i> {}').format(begin, end)
                     if begin != end else begin
                 )
             data['tag_ids'] = event.tag_ids.read(['name'])
diff --git a/addons/website_event/static/src/img/event_cover_0.jpg b/addons/website_event/static/src/img/event_cover_0.jpg
index c77c47f21da497..3c67cd23406245 100644
Binary files a/addons/website_event/static/src/img/event_cover_0.jpg and b/addons/website_event/static/src/img/event_cover_0.jpg differ
diff --git a/addons/website_event/static/src/img/event_cover_1.jpg b/addons/website_event/static/src/img/event_cover_1.jpg
index 0dc8960e79d443..a9773614a2a055 100644
Binary files a/addons/website_event/static/src/img/event_cover_1.jpg and b/addons/website_event/static/src/img/event_cover_1.jpg differ
diff --git a/addons/website_event/static/src/img/event_cover_2.jpg b/addons/website_event/static/src/img/event_cover_2.jpg
index 6fda12d4a3cb0a..4d79f68dfc0abb 100644
Binary files a/addons/website_event/static/src/img/event_cover_2.jpg and b/addons/website_event/static/src/img/event_cover_2.jpg differ
diff --git a/addons/website_event/static/src/img/event_cover_3.jpg b/addons/website_event/static/src/img/event_cover_3.jpg
index 4ccf99f23e8f1b..7ced89f214f809 100644
Binary files a/addons/website_event/static/src/img/event_cover_3.jpg and b/addons/website_event/static/src/img/event_cover_3.jpg differ
diff --git a/addons/website_event/static/src/img/event_cover_4.jpg b/addons/website_event/static/src/img/event_cover_4.jpg
index 157a101a679281..e8cb6b26c6b919 100644
Binary files a/addons/website_event/static/src/img/event_cover_4.jpg and b/addons/website_event/static/src/img/event_cover_4.jpg differ
diff --git a/addons/website_event/static/src/img/event_cover_5.jpg b/addons/website_event/static/src/img/event_cover_5.jpg
index 89070a4f629741..3a6cc42c72a095 100644
Binary files a/addons/website_event/static/src/img/event_cover_5.jpg and b/addons/website_event/static/src/img/event_cover_5.jpg differ
diff --git a/addons/website_event/static/src/img/event_past_0.jpg b/addons/website_event/static/src/img/event_past_0.jpg
index 0c070fbed27260..2bfbe3a7c1c028 100644
Binary files a/addons/website_event/static/src/img/event_past_0.jpg and b/addons/website_event/static/src/img/event_past_0.jpg differ
diff --git a/addons/website_event/static/src/img/event_training_0.jpg b/addons/website_event/static/src/img/event_training_0.jpg
index 2a2897f8ae76f0..d947a69101803b 100644
Binary files a/addons/website_event/static/src/img/event_training_0.jpg and b/addons/website_event/static/src/img/event_training_0.jpg differ
diff --git a/addons/website_event/static/src/snippets/s_searchbar/000.xml b/addons/website_event/static/src/snippets/s_searchbar/000.xml
index 9ee90a8622709d..da91065fbed3f2 100644
--- a/addons/website_event/static/src/snippets/s_searchbar/000.xml
+++ b/addons/website_event/static/src/snippets/s_searchbar/000.xml
@@ -5,7 +5,7 @@
     <t t-inherit="website.s_searchbar.autocomplete" t-inherit-mode="extension">
         <xpath expr="//div[@class='o_search_result_item_detail px-3']" position="inside">
             <span t-if="result['address_name']" class="small">
-                <span class="fa fa-map-marker"/> <t t-out="result['address_name']"/>
+                <span class="oi" data-icon="location_on"/> <t t-out="result['address_name']"/>
             </span>
         </xpath>
     </t>
diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index f9778b9db472a1..45c5c5c7b3bdca 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -89,7 +89,7 @@
                 <button class="o_not_editable btn btn-light position-relative ms-2 d-lg-none"
                     data-bs-toggle="offcanvas"
                     data-bs-target="#o_wevent_index_offcanvas">
-                    <i class="fa fa-sliders"/>
+                    <i class="oi" data-icon="tune"/>
                 </button>
             </div>
             <t t-if="search_tags" t-call="website_event.searched_tags"/>
@@ -144,7 +144,7 @@
                 <t t-out="tag.display_name"/>
                 <span t-att-data-post="keep_event_url(tags=slugify_tags(search_tags.ids, toggle_tag_id=tag.id), prevent_redirect=True)"
                     class="post_link cursor-pointer btn border-0 py-1 px-2 text-reset opacity-75-hover">
-                    <i class="oi oi-close" role="img"/>
+                    <i class="oi" data-icon="close_small" role="img"/>
                 </span>
             </span>
         </t>
@@ -307,7 +307,7 @@
         <p t-else="">We couldn't find any event scheduled at this moment.</p>
         <div class="o_not_editable my-3" groups="event.group_event_user">
             <a class="o_wevent_cta btn" target="_blank" href="/odoo/action-event.action_event_view?view_type=form">
-                <span class="fa fa-plus me-1"/> Create an Event
+                <span class="oi me-1" data-icon="add"/> Create an Event
             </a>
         </div>
     </div>
@@ -336,7 +336,7 @@
                                     </div>
                                     <div class="o_wevent_event_country_flag">
                                         <img t-if="event.country_id and event.country_id.image_url" class="h-100 align-baseline" t-att-src="event.country_id.image_url" t-att-alt="event.country_id.name"/>
-                                        <i t-elif="not event.country_id" class="fa fa-video-camera h-100"/>
+                                        <i t-elif="not event.country_id" class="oi oi-filled h-100" data-icon="videocam"/>
                                     </div>
                                 </div>
                                 <div t-elif="not event.is_multi_slots" t-attf-class="o_wevent_event_date position-absolute shadow-sm o_not_editable #{(not opt_events_list_columns) and 'left'} ">
@@ -360,7 +360,7 @@
                                 </span>
                                 <!-- Participating -->
                                 <small t-if="event.is_participating" class="o_wevent_participating position-absolute bottom-0 px-3 py-2 w-100 text-bg-success">
-                                    <i class="fa fa-check me-2"/>Registered
+                                    <i class="oi me-2" data-icon="check"/>Registered
                                 </small>
                                 <!-- Scheduled -->
                                 <small t-if="event.publish_on" class="o_wevent_scheduled  position-absolute bottom-0 px-3 py-2 w-100 text-bg-warning">
@@ -389,7 +389,7 @@
                             <div t-if="not opt_events_list_columns" class="d-inline-flex flex-wrap gap-3">
                                 <!-- Location (List View) -->
                                 <div class="d-flex align-items-center">
-                                    <i class="fa fa-map-marker me-2 text-muted" title="Location"/>
+                                    <i class="oi me-2 text-muted" data-icon="location_on" title="Location"/>
                                     <small class="o_not_editable fw-bold text-muted" itemprop="location"
                                         t-out="event.address_id"
                                         t-options="{'widget': 'contact', 'fields': ['city', 'country_id'], 'null_text': 'Online event', 'no_marker': 'true'}"/>
@@ -419,12 +419,12 @@
                                         <t t-else="">Registrations Closed</t>
                                     </small>
                                     <button type="button" class="btn btn-light mt-auto">
-                                        Event Info <i class="fa fa-chevron-right"/>
+                                        Event Info <i class="oi" data-icon="chevron_right"/>
                                     </button>
                                 </t>
                                 <t t-else="">
                                     <button type="button" class="btn btn-primary mt-auto">
-                                        Get Tickets <i class="fa fa-chevron-right"/>
+                                        Get Tickets <i class="oi" data-icon="chevron_right"/>
                                     </button>
                                 </t>
                             </div>
diff --git a/addons/website_event/views/event_templates_page.xml b/addons/website_event/views/event_templates_page.xml
index 7e8cf895f5cdbb..86ea3df78c69ce 100644
--- a/addons/website_event/views/event_templates_page.xml
+++ b/addons/website_event/views/event_templates_page.xml
@@ -25,11 +25,11 @@
         <!-- Mobile -->
         <div id="o_wevent_submenu_mobile" class="container d-flex d-lg-none align-items-center py-3 pb-lg-2">
             <a t-if="navbar_back_url" t-att-href="navbar_back_url" t-att-title="navbar_back_title or 'Go back'">
-                <i class="oi oi-chevron-left"/>
+                <i class="oi" data-icon="chevron_backward"/>
                 <span t-out="navbar_back_text or 'Go back'"/>
             </a>
             <a t-else="" href="/event" title="All Events">
-                <i class="oi oi-chevron-left"/>
+                <i class="oi" data-icon="chevron_backward"/>
                 <span>All Events</span>
             </a>
             <!-- Add Register additional CTA button, in addition to menus -->
@@ -88,7 +88,7 @@
 <template id="navbar_dropdown" name="Event Navbar Dropdown">
    <div t-if="len(event.menu_id.child_id) &gt; 1" t-attf-class="dropdown o-dropdown--no-caret {{not is_rendering_cta and 'ms-auto' or 'ms-2'}}">
         <button class="dropdown-toggle o-no-caret btn btn-light" data-bs-toggle="dropdown" aria-expanded="false">
-            <i class="fa fa-bars" role="img"/>
+            <i class="oi" data-icon="menu" role="img"/>
         </button>
         <ul class="dropdown-menu" t-att-data-menu_name="editable and 'Event Menu'" t-att-data-content_menu_id="editable and event.menu_id.id" role="menu">
             <li><span class="h6-fs dropdown-header" t-field="event.name"/></li>
diff --git a/addons/website_event/views/event_templates_page_registration.xml b/addons/website_event/views/event_templates_page_registration.xml
index b4d6a842e8d417..6a23d2847fd3fd 100644
--- a/addons/website_event/views/event_templates_page_registration.xml
+++ b/addons/website_event/views/event_templates_page_registration.xml
@@ -40,7 +40,7 @@
             <div class="container d-flex flex-grow-1 h-100 w-100">
                 <div id="o_wevent_event_main_cover_content" class="d-flex flex-column align-items-baseline w-100 py-3">
                     <span t-if="event.is_participating" class="badge text-bg-success o_wevent_badge">
-                        <i class="fa fa-check me-2" role="img"/>Registered
+                        <i class="oi me-2" data-icon="check" role="img"/>Registered
                     </span>
                     <div class="w-100 mt-auto">
                         <h2 t-field="event.name" itemprop="name" placeholder="Event Title" class="mt-3"/>
@@ -74,7 +74,7 @@
 
                                 <div id="o_wevent_event_main_cover_content" class="p-3 mt-auto">
                                     <span t-if="event.is_participating" class="badge text-bg-success o_wevent_badge">
-                                        <i class="fa fa-check me-2" role="img"/>Registered
+                                        <i class="oi me-2" data-icon="check" role="img"/>Registered
                                     </span>
                                     <h1 t-field="event.name" itemprop="name" placeholder="Event Title" class="mt-3 h2-fs"/>
                                     <p class="lead" t-field="event.subtitle" placeholder="Event Subtitle"/>
@@ -133,7 +133,7 @@
                         </div>
                         <div t-elif="opt_event_location_block" class="o_wevent_sidebar_block o_wevent_bordered_block pb-3 mb-4">
                             <h6 class="o_wevent_sidebar_title">Location</h6>
-                            <i class="fa fa-map-marker" title="Location"/> Online event
+                            <i class="oi" data-icon="location_on" title="Location"/> Online event
                         </div>
                         <!-- Organizer -->
                         <div t-if="opt_event_organizer_block and event.organizer_id" class="o_wevent_sidebar_block o_wevent_bordered_block pb-3 mb-4" itemprop="organizer" itemscope="itemscope" itemtype="http://schema.org/Organization">
@@ -251,7 +251,7 @@
                 <div class="small">
                     <time t-out="event.date_begin" t-att-datetime="event.date_begin" class="d-block lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'MMMM Y', 'date_only': 'true'}"/>
                     <time t-out="event.date_begin"  t-att-datetime="event.date_begin" class="fw-bold lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
-                    <i class="fa fa-long-arrow-right mx-1 text-muted" role="img"/>
+                    <i class="oi mx-1 text-muted" data-icon="east" role="img"/>
                     <time t-out="event.date_end"  t-att-datetime="event.date_end" class="fw-bold lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
                     <span t-if="website_visitor_timezone != event.date_tz" class="d-block lh-1" t-out="event.date_tz"/>
                 </div>
@@ -453,7 +453,7 @@
             </a>
             <a t-else="" class="btn btn-primary" title="Join online" target="_blank"
                 t-att-href="event.event_url or event.website_url">
-                Join online <i class="ms-1 fa fa-globe"/>
+                Join online <i class="oi ms-1" data-icon="public"/>
             </a>
         </div>
     </div>
@@ -462,7 +462,7 @@
 <!-- Button to configure Tickets -->
 <template id="registration_configure_tickets_button" name="Registration Configure Ticket Button">
     <a t-attf-class="o_not_editable text-nowrap {{linkClasses or '' }}" t-attf-href="/odoo/event.event/{{event.id}}?menu_id={{backend_menu_id}}" role="link"  title="Configure event tickets">
-        <i class="fa fa-gear me-1" role="img" aria-label="Configure" title="Configure event tickets"/><em>Configure Tickets</em>
+        <i class="oi oi-filled me-1" data-icon="settings" role="img" aria-label="Configure" title="Configure event tickets"/><em>Configure Tickets</em>
     </a>
 </template>
 
@@ -494,7 +494,7 @@
                     <!-- If some tickets expired and there is only one type left, we keep the same layout -->
                     <t t-if="len(event.event_ticket_ids) &gt; 1">
                         <span t-if="not event.event_registrations_open" class="text-danger">
-                            <i class="fa fa-ban me-2"/>Sold Out
+                            <i class="oi me-2" data-icon="block"/>Sold Out
                         </span>
                         <div id="o_wevent_tickets_collapse" class="modal-body collapse show">
                             <div t-foreach="tickets" t-as="ticket"
@@ -537,7 +537,7 @@
                                                 <button
                                                     class="btn d-md-inline-block border-0 pe-2" data-increment-type="minus" type="button"
                                                     t-att-disabled="True" t-attf-data-input-name="nb_register-#{ticket.id}">
-                                                    <i class="oi oi-minus text-600"/>
+                                                    <i class="oi text-600" data-icon="remove"/>
                                                 </button>
                                                 <input
                                                     class="o_wevent_input_nb_tickets form-control text-center border-0 p-0"
@@ -546,7 +546,7 @@
                                                 <button
                                                     class="btn d-md-inline-block border-0 ps-2" data-increment-type="plus" type="button"
                                                     t-attf-data-input-name="nb_register-#{ticket.id}">
-                                                    <i class="oi oi-plus text-600"/>
+                                                    <i class="oi text-600" data-icon="add"/>
                                                 </button>
                                             </div>
                                             <div>
@@ -614,7 +614,7 @@
                                             <button
                                                 class="btn d-md-inline-block border-0 pe-2" data-increment-type="minus" type="button"
                                                 t-attf-data-input-name="nb_register-#{register_id}">
-                                                <i class="oi oi-minus text-600"/>
+                                                <i class="oi text-600" data-icon="remove"/>
                                             </button>
                                             <input
                                                 class="o_wevent_input_nb_tickets form-control quantity text-center border-0 p-0"
@@ -623,7 +623,7 @@
                                             <button
                                                 class="btn d-md-inline-block border-0 ps-2" data-increment-type="plus" type="button"
                                                 t-att-disabled="seats_max == 1" t-attf-data-input-name="nb_register-#{register_id}">
-                                                <i class="oi oi-plus text-600"/>
+                                                <i class="oi text-600" data-icon="add"/>
                                             </button>
                                         </div>
                                         <div>
@@ -635,7 +635,7 @@
                                 </t>
                                 <t t-else="">
                                     <span itemprop="availability" content="http://schema.org/SoldOut" class="text-danger">
-                                        <i class="fa fa-ban me-2"/>Sold Out
+                                        <i class="oi me-2" data-icon="block"/>Sold Out
                                     </span>
                                 </t>
                             </div>
@@ -680,12 +680,12 @@
                         <ul class="pagination d-flex flex-nowrap gap-3 user-select-none">
                             <li class="o_wevent_slot_previous page-item">
                                 <button class="btn btn-link text-decoration-none p-1">
-                                    <i class="fa fa-caret-left me-2"/><small>Previous</small>
+                                    <i class="oi me-2" data-icon="arrow_left"/><small>Previous</small>
                                 </button>
                             </li>
                             <li class="o_wevent_slot_next page-item">
                                 <button class="btn btn-link text-decoration-none p-1">
-                                    <small>Next</small><i class="fa fa-caret-right ms-2"/>
+                                    <small>Next</small><i class="oi ms-2" data-icon="arrow_right"/>
                                 </button>
                             </li>
                         </ul>
diff --git a/addons/website_event/views/snippets/s_event_upcoming_snippet_preview_data.xml b/addons/website_event/views/snippets/s_event_upcoming_snippet_preview_data.xml
index 25a846359cfce7..16fef263bc4704 100644
--- a/addons/website_event/views/snippets/s_event_upcoming_snippet_preview_data.xml
+++ b/addons/website_event/views/snippets/s_event_upcoming_snippet_preview_data.xml
@@ -167,11 +167,11 @@
                     <div class="o_cc o_cc5 position-absolute top-100 start-50 w-75 d-flex gap-5 mx-0 px-4 py-3 rounded" style="transform: translate(-50%, -50%);">
                         <div class="me-5">
                             <p class="mb-2 fw-bold">Time</p>
-                            <span><i class="fa fa-clock-o me-2" role="presentation"/>8:15 PM</span>
+                            <span><i class="oi me-2" data-icon="schedule" role="presentation"/>8:15 PM</span>
                         </div>
                         <div>
                             <p class="mb-2 fw-bold">Location</p>
-                            <span><i class="fa fa-map-marker me-2" role="presentation"/>Los Angeles, CA, United States</span>
+                            <span><i class="oi me-2" data-icon="location_on" role="presentation"/>Los Angeles, CA, United States</span>
                         </div>
                         <div class="d-flex align-items-center justify-content-end ms-auto">
                             <p class="h4-fs mb-0 me-3 pe-3">August 23, 2025</p>
@@ -202,7 +202,7 @@
                         <div class="flex-grow-1">
                             <a href="#" class="btn btn-lg btn-primary">Register Now</a>
                         </div>
-                        <span class="fs-5"><i class="fa fa-map-marker me-2" role="presentation"/>Los Angeles, CA, United States</span>
+                        <span class="fs-5"><i class="oi me-2" data-icon="location_on" role="presentation"/>Los Angeles, CA, United States</span>
                     </div>
                 </div>
             </div>
@@ -220,12 +220,12 @@
                     <div class="card o_cc o_cc1 border-0 shadow">
                         <div class="card-body p-4">
                             <strong>Date</strong>
-                            <p><i class="fa fa-calendar me-2" role="presentation"/>August 23, 2025</p>
+                            <p><i class="oi oi-filled me-2" data-icon="calendar_today" role="presentation"/>August 23, 2025</p>
                             <strong>Time</strong>
-                            <p><i class="fa fa-clock-o me-2" role="presentation"/>8:15 PM</p>
+                            <p><i class="oi me-2" data-icon="schedule" role="presentation"/>8:15 PM</p>
                             <strong>Location</strong>
-                            <p><i class="fa fa-map-marker me-2" role="presentation"/>Los Los Angeles, CA, United States</p>
-                            <a href="#" class="btn btn-primary w-100">Register<i class="fa fa-long-arrow-right ms-2" role="presentation"/></a>
+                            <p><i class="oi me-2" data-icon="location_on" role="presentation"/>Los Los Angeles, CA, United States</p>
+                            <a href="#" class="btn btn-primary w-100">Register<i class="oi ms-2" data-icon="east" role="presentation"/></a>
                         </div>
                     </div>
                 </div>
@@ -236,10 +236,10 @@
         <div class="s_dialog_preview my-4">
             <div class="text-center">
                 <span class="o_cc o_cc1 d-inline-flex align-items-center justify-content-center gap-3 border rounded py-2 px-3 rounded-pill">
-                    <i class="fa fa-calendar" role="presentation"/>
+                    <i class="oi oi-filled" data-icon="calendar_today" role="presentation"/>
                     <strong>Harmony Under the Stars</strong>
                     <span class="text-muted">August 23, 2025 - 8:15 PM</span>
-                    <span class="text-primary">Register <i class="fa fa-long-arrow-right" role="presentation"/></span>
+                    <span class="text-primary">Register <i class="oi" data-icon="east" role="presentation"/></span>
                 </span>
             </div>
         </div>
@@ -249,15 +249,15 @@
             <div class="col-lg-6 pe-5 align-content-center">
                 <h2>Innovations in Technology and Society</h2>
                 <p class="lead">Shaping tomorrow through ideas that transform how we live today.</p>
-                <a class="btn btn-primary" href="#">Register <i class="fa fa-long-arrow-right ms-2" role="presentation"/></a>
+                <a class="btn btn-primary" href="#">Register <i class="oi ms-2" data-icon="east" role="presentation"/></a>
                 <div class="d-flex gap-5 mt-5">
                     <div>
                         <p class="text-muted">Date</p>
-                        <span><i class="fa fa-calendar me-2" role="presentation"/>August 23, 2025 at 8:15 PM</span>
+                        <span><i class="oi oi-filled me-2" data-icon="calendar_today" role="presentation"/>August 23, 2025 at 8:15 PM</span>
                     </div>
                     <div>
                         <p class="text-muted">Location</p>
-                        <span><i class="fa fa-map-marker me-2" role="presentation"/>Los Angeles, CA, United States</span>
+                        <span><i class="oi me-2" data-icon="location_on" role="presentation"/>Los Angeles, CA, United States</span>
                     </div>
                 </div>
             </div>
diff --git a/addons/website_event/views/snippets/s_events.xml b/addons/website_event/views/snippets/s_events.xml
index 4c175f8e03c926..f582cd80d52d8c 100644
--- a/addons/website_event/views/snippets/s_events.xml
+++ b/addons/website_event/views/snippets/s_events.xml
@@ -155,14 +155,14 @@
                     <div t-if="events_event_time_active" class="me-lg-5 order-1 order-lg-0">
                         <p class="mb-2 fw-bold">Time</p>
                         <span>
-                            <i class="fa fa-clock-o me-2" role="img"/>
+                            <i class="oi me-2" data-icon="schedule" role="img"/>
                             <span t-out="record.date_begin" t-options="{'widget': 'datetime', 'time_only': 'true', 'format': 'short', 'tz_name': record.date_tz}"/>
                         </span>
                     </div>
                     <div t-if="events_event_location_active" class="order-1 order-lg-0">
                         <p class="mb-2 fw-bold">Location</p>
                         <div class="d-flex align-items-center">
-                            <i class="fa fa-map-marker me-2" role="img"/>
+                            <i class="oi me-2" data-icon="location_on" role="img"/>
                             <span t-field="record.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true', 'null_text': 'Online event'}"/>
                         </div>
                     </div>
@@ -205,7 +205,7 @@
                         <a t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']" class="btn btn-lg btn-primary w-100 w-lg-auto text-nowrap">Register Now</a>
                     </div>
                     <div t-if="events_event_location_active" class="d-flex align-items-center fs-5">
-                        <i class="fa fa-map-marker me-2" role="img"/>
+                        <i class="oi me-2" data-icon="location_on" role="img"/>
                         <span t-field="record.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true', 'null_text': 'Online event'}"/>
                     </div>
                 </div>
@@ -232,19 +232,19 @@
                 <div class="s_card card o_cc o_cc1 w-100 w-md-auto border-0 shadow" data-snippet="s_card" data-name="Card" data-vxml="001">
                     <div class="card-body p-4">
                         <strong>Date</strong>
-                        <p><i class="fa fa-calendar me-2" role="img"/><span t-out="record.date_begin" t-options="{'widget': 'datetime', 'date_only': 'true', 'format': 'long', 'tz_name': record.date_tz}"/></p>
+                        <p><i class="oi oi-filled me-2" data-icon="calendar_today" role="img"/><span t-out="record.date_begin" t-options="{'widget': 'datetime', 'date_only': 'true', 'format': 'long', 'tz_name': record.date_tz}"/></p>
                         <div t-if="events_event_time_active" class="s_events_event_time">
                             <strong>Time</strong>
-                            <p><i class="fa fa-clock-o me-2" role="img"/><span t-out="record.date_begin" t-options="{'widget': 'datetime', 'time_only': 'true', 'format': 'short', 'tz_name': record.date_tz}"/></p>
+                            <p><i class="oi me-2" data-icon="schedule" role="img"/><span t-out="record.date_begin" t-options="{'widget': 'datetime', 'time_only': 'true', 'format': 'short', 'tz_name': record.date_tz}"/></p>
                         </div>
                         <div t-if="events_event_location_active">
                             <strong>Location</strong>
                             <div class="d-flex align-items-center mb-2">
-                                <i class="fa fa-map-marker me-2" role="img"/>
+                                <i class="oi me-2" data-icon="location_on" role="img"/>
                                 <span t-field="record.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true', 'null_text': 'Online event'}"/>
                             </div>
                         </div>
-                        <a t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']" class="btn btn-primary w-100"><t t-out="cta_btn_text">Register<i class="fa fa-long-arrow-right ms-2" role="img"/></t></a>
+                        <a t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']" class="btn btn-primary w-100"><t t-out="cta_btn_text">Register<i class="oi ms-2" data-icon="east" role="img"/></t></a>
                     </div>
                 </div>
             </div>
@@ -263,7 +263,7 @@
                 <span class="s_cta_badge o_cc o_cc1 d-inline-flex align-items-center justify-content-center flex-wrap gap-3 my-3 border rounded py-2 px-3 text-break" style="border-radius: 32px !important;" data-snippet="s_cta_badge">
                     <t t-if="events_event_location_active">
                         <img t-if="record.country_id" t-att-src="record.country_id.image_url"/>
-                        <i t-else="" class="fa fa-calendar text-primary"/>
+                        <i t-else="" class="oi oi-filled text-primary" data-icon="calendar_today"/>
                     </t>
                     <strong class="text-nowrap" t-field="record.name"/>
                     <span class="text-muted text-nowrap">
@@ -272,7 +272,7 @@
                             - <span t-out="record.date_begin" t-options="{'widget': 'datetime', 'time_only': 'true', 'format': 'short', 'tz_name': record.date_tz}"/>
                         </span>
                     </span>
-                    <span class="text-primary text-nowrap">Register Now <i class="fa fa-long-arrow-right"/></span>
+                    <span class="text-primary text-nowrap">Register Now <i class="oi" data-icon="east"/></span>
                 </span>
             </a>
         </div>
@@ -289,17 +289,17 @@
             <div class="col-12 col-lg-6 d-flex d-lg-block flex-column align-content-center align-items-start order-2 order-lg-1">
                 <h2 t-field="record.name"/>
                 <p class="lead" t-field="record.subtitle"/>
-                <a class="btn btn-primary w-100 w-sm-auto mt-4 mt-lg-0 order-last order-lg-auto" t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']">Register Now <i class="fa fa-long-arrow-right" role="presentation"/></a>
+                <a class="btn btn-primary w-100 w-sm-auto mt-4 mt-lg-0 order-last order-lg-auto" t-att-href="data['call_to_action_url']" t-att-title="'Read ' + data['name']">Register Now <i class="oi" data-icon="east" role="presentation"/></a>
                 <div class="d-flex flex-wrap mt-lg-5">
                     <div class="me-5 mb-3">
                         <p class="text-muted">Date</p>
-                        <span><i class="fa fa-calendar me-2" role="img"/><span t-out="record.date_begin" t-options="{'widget': 'datetime', 'date_only': 'true', 'format': 'long', 'tz_name': record.date_tz}"/></span>
+                        <span><i class="oi oi-filled me-2" data-icon="calendar_today" role="img"/><span t-out="record.date_begin" t-options="{'widget': 'datetime', 'date_only': 'true', 'format': 'long', 'tz_name': record.date_tz}"/></span>
                         <span t-if="events_event_time_active">at <span t-out="record.date_begin" t-options="{'widget': 'datetime', 'time_only': 'true', 'format': 'short', 'tz_name': record.date_tz}"/></span>
                     </div>
                     <div t-if="events_event_location_active">
                         <p class="text-muted">Location</p>
                         <div class="d-flex align-items-center">
-                            <i class="fa fa-map-marker me-2" role="img"/>
+                            <i class="oi me-2" data-icon="location_on" role="img"/>
                             <span t-field="record.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true', 'null_text': 'Online event'}"/>
                         </div>
                     </div>
diff --git a/addons/website_event/views/website_pages_views.xml b/addons/website_event/views/website_pages_views.xml
index fbebd66d71601d..92e8a530f41334 100644
--- a/addons/website_event/views/website_pages_views.xml
+++ b/addons/website_event/views/website_pages_views.xml
@@ -64,7 +64,7 @@
         </xpath>
         <xpath expr="//main" position="inside">
             <div class="text-muted" t-if="record.website_id.value" groups="website.group_multi_website">
-                <i class="fa fa-globe me-1" title="Website"/>
+                <i class="oi me-1" data-icon="public" title="Website"/>
                 <field name="website_id"/>
             </div>
         </xpath>
diff --git a/addons/website_event/views/website_visitor_views.xml b/addons/website_event/views/website_visitor_views.xml
index b9cf30a390a94b..a3728e844145a7 100644
--- a/addons/website_event/views/website_visitor_views.xml
+++ b/addons/website_event/views/website_visitor_views.xml
@@ -20,7 +20,7 @@
             <xpath expr="//button[@id='w_visitor_visit_counter']" position="before">
                 <button name="%(website_event.event_registration_action_from_visitor)d"
                     type="action"
-                    class="oe_stat_button" icon="fa-ticket"
+                    class="oe_stat_button" icon="confirmation_number"
                     groups="event.group_event_user"
                     invisible="event_registration_count == 0">
                     <field name="event_registration_count" widget="statinfo" string="Registrations"/>
diff --git a/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml b/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml
index e6f28460e43cc0..d1c5882f5d9d00 100644
--- a/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml
+++ b/addons/website_event_booth/static/src/xml/event_booth_registration_templates.xml
@@ -19,11 +19,11 @@
             <div class="d-flex flex-column">
                 <span t-if="contact.name" t-out="contact.name" class="fw-bold"/>
                 <span t-if="contact.email">
-                    <i class="fa fa-fw fa-envelope me-2"/>
+                    <i class="oi oi-fw oi-filled me-2" data-icon="mail"/>
                     <t t-out="contact.email"/>
                 </span>
                 <span t-if="contact.phone">
-                    <i class="fa fa-fw fa-phone me-2"/>
+                    <i class="oi oi-fw oi-filled me-2" data-icon="phone"/>
                     <t t-out="contact.phone"/>
                 </span>
             </div>
diff --git a/addons/website_event_booth/views/event_booth_registration_templates.xml b/addons/website_event_booth/views/event_booth_registration_templates.xml
index 945a2c9b2db560..866ed2a8e33ac2 100644
--- a/addons/website_event_booth/views/event_booth_registration_templates.xml
+++ b/addons/website_event_booth/views/event_booth_registration_templates.xml
@@ -6,7 +6,7 @@
             <div class="d-flex flex-wrap align-items-center justify-content-between mt-3">
                 <div class="d-flex align-items-center">
                     <a class="d-inline d-md-none btn btn-light me-2" t-attf-href="/event/#{slug(event)}/booth?#{keep_query('booth_category_id', 'booth_ids')}" title="Go back">
-                        <i class="oi oi-chevron-left" role="img"/>
+                        <i class="oi" data-icon="chevron_backward" role="img"/>
                     </a>
                     <h1 class="my-0 h3-fs">Get A Booth</h1>
                 </div>
@@ -51,7 +51,7 @@
                     </div>
                 </div>
                 <div class="o_wbooth_registration_error_section alert alert-danger d-none mt-4" role="alert">
-                    <i class="fa fa-exclamation-triangle me-2" role="img" aria-label="Error" title="Error"/>
+                    <i class="oi me-2" data-icon="warning" role="img" aria-label="Error" title="Error"/>
                     <span class="o_wbooth_registration_error_message"/>
                     <a class="o_wbooth_registration_error_signin d-none"
                         t-attf-href="/web/login?redirect={{redirect_url}}">
diff --git a/addons/website_event_booth/views/event_booth_templates.xml b/addons/website_event_booth/views/event_booth_templates.xml
index 983aa3e5123bee..a0c5700d72b202 100644
--- a/addons/website_event_booth/views/event_booth_templates.xml
+++ b/addons/website_event_booth/views/event_booth_templates.xml
@@ -30,7 +30,7 @@
                             <p>Check our <a class="o_translate_inline" href="/event" title="List of Future Events" aria-label="Link to list of future events">list of future events</a>.</p>
                             <div class="o_not_editable my-3" groups="event.group_event_manager">
                                 <a class="btn o_wevent_cta mb-4" target="_blank" t-attf-href="/odoo/event.event/{{event.id}}">
-                                    <span class="fa fa-gear me-1"/> Configure Booths
+                                    <span class="oi oi-filled me-1" data-icon="settings"/> Configure Booths
                                 </a>
                             </div>
                         </div>
@@ -82,7 +82,7 @@
                                 <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                                     <h5 class="my-0">Location</h5>
                                     <div t-if="event.exhibition_map" class="ms-2 small">
-                                        <a class="text-decoration-none text-center" href="#" data-bs-toggle="modal" data-bs-target="#mapModal"><i class="fa fa-map-o me-1"/>View Plan</a>
+                                        <a class="text-decoration-none text-center" href="#" data-bs-toggle="modal" data-bs-target="#mapModal"><i class="oi me-1" data-icon="map"/>"View Plan</a>
                                         <div role="dialog" id="mapModal" class="modal" tabindex="-1">
                                             <div class="modal-dialog modal-lg">
                                                 <div class="modal-content">
@@ -97,7 +97,7 @@
                                 <div class="col-12 o_wbooth_booths d-flex flex-wrap align-items-center gap-2" t-att-data-selected-booth-ids="selected_booth_ids or ''"/>
                                 <div class="row">
                                     <div class="alert alert-danger col-12 o_wbooth_unavailable_booth_alert d-none" role="alert">
-                                        <i class="fa fa-exclamation-triangle"/>
+                                        <i class="oi" data-icon="warning"/>
                                         <span>Sorry, several booths are now sold out. Please change your choices before validating again.</span>
                                     </div>
                                 </div>
@@ -123,14 +123,14 @@
         <ul class="o_wevent_booth_order_progress d-none d-md-block list-unstyled px-3 py-2 text-bg-light rounded m-0">
             <li t-attf-class="position-relative float-start m-0 text-center">
                 <a t-if="step!='STEP_BOOTH_SELECTION'" class="d-inline-flex align-items-center text-decoration-none" t-attf-href="/event/#{slug(event)}/booth?#{keep_query('booth_category_id', 'booth_ids')}">
-                    <span>Booth Selection</span><span class="fa fa-angle-right d-inline-block align-middle mx-2 mx-lg-3 opacity-75"/>
+                    <span>Booth Selection</span><span class="oi d-inline-block align-middle mx-2 mx-lg-3 opacity-75" data-icon="keyboard_arrow_right"/>
                 </a>
                 <span t-else="" class="d-inline-flex align-items-center text-decoration-none text-reset">
-                    <span>Booth Selection</span><span class="fa fa-angle-right d-inline-block align-middle mx-2 mx-lg-3 opacity-75"/>
+                    <span>Booth Selection</span><span class="oi d-inline-block align-middle mx-2 mx-lg-3 opacity-75" data-icon="keyboard_arrow_right"/>
                 </span>
             </li>
             <li t-attf-class="d-inline-flex align-items-center position-relative float-start m-0 text-center #{'' if step=='STEP_DETAILS_FORM' else 'opacity-75'}">
-                Contact Details<span class="fa fa-angle-right d-inline-block align-middle mx-2 mx-lg-3 opacity-75"/>
+                Contact Details<span class="oi d-inline-block align-middle mx-2 mx-lg-3 opacity-75" data-icon="keyboard_arrow_right"/>
             </li>
             <li class="position-relative float-start m-0 text-center opacity-75">
                 <span>Confirmed</span>
diff --git a/addons/website_event_booth_exhibitor/views/event_booth_views.xml b/addons/website_event_booth_exhibitor/views/event_booth_views.xml
index ff46758db40993..e672b413bf11a7 100644
--- a/addons/website_event_booth_exhibitor/views/event_booth_views.xml
+++ b/addons/website_event_booth_exhibitor/views/event_booth_views.xml
@@ -9,7 +9,7 @@
         <field name="arch" type="xml">
             <div name="button_box" position="inside">
                 <button name="action_view_sponsor" type="object" class="oe_stat_button"
-                        icon="fa-black-tie" string="Sponsor" invisible="not sponsor_id">
+                        icon="oi_black-tie" string="Sponsor" invisible="not sponsor_id">
                 </button>
             </div>
         </field>
diff --git a/addons/website_event_exhibitor/models/event_sponsor.py b/addons/website_event_exhibitor/models/event_sponsor.py
index 58ff386959bec5..5a2a1bf0d1588f 100644
--- a/addons/website_event_exhibitor/models/event_sponsor.py
+++ b/addons/website_event_exhibitor/models/event_sponsor.py
@@ -187,7 +187,7 @@ def _search_get_detail(self, website, order, options):
             'search_fields': ['name', 'website_description'],
             'fetch_fields': ['name', 'website_url', 'website_description'],
             'mapping': mapping,
-            'icon': 'fa-black-tie',
+            'icon': 'oi_black-tie',
             'order': order,
         }
 
diff --git a/addons/website_event_exhibitor/static/src/components/exhibitor_connect_closed_dialog/exhibitor_connect_closed_dialog.xml b/addons/website_event_exhibitor/static/src/components/exhibitor_connect_closed_dialog/exhibitor_connect_closed_dialog.xml
index 3d6904e60de51d..f429723aa8b7c5 100644
--- a/addons/website_event_exhibitor/static/src/components/exhibitor_connect_closed_dialog/exhibitor_connect_closed_dialog.xml
+++ b/addons/website_event_exhibitor/static/src/components/exhibitor_connect_closed_dialog/exhibitor_connect_closed_dialog.xml
@@ -59,13 +59,13 @@
                             </div>
                             <span class="text-muted" t-if="this.sponsorData.subtitle" t-out="this.sponsorData.subtitle"/>
                             <span t-if="this.sponsorData.url">
-                                <i class="fa fa-globe me-2"/><a t-att-href="this.sponsorData.url"><span t-out="this.sponsorData.url"/></a>
+                                <i class="oi me-2" data-icon="public"/><a t-att-href="this.sponsorData.url"><span t-out="this.sponsorData.url"/></a>
                             </span>
                             <span t-if="this.sponsorData.email">
-                                <i class="fa fa-envelope me-2"/><a t-att-mailto="this.sponsorData.email"><span t-out="this.sponsorData.email"/></a>
+                                <i class="oi oi-filled me-2" data-icon="mail"/><a t-att-mailto="this.sponsorData.email"><span t-out="this.sponsorData.email"/></a>
                             </span>
                             <span t-if="this.sponsorData.phone">
-                                <i class="fa fa-phone me-2"/><span t-out="this.sponsorData.phone"/>
+                                <i class="oi oi-filled me-2" data-icon="phone"/><span t-out="this.sponsorData.phone"/>
                             </span>
                         </div>
                         <img t-if="this.sponsorData.country_flag_url"
diff --git a/addons/website_event_exhibitor/views/event_event_views.xml b/addons/website_event_exhibitor/views/event_event_views.xml
index f6594c62116348..026f90528844a3 100644
--- a/addons/website_event_exhibitor/views/event_event_views.xml
+++ b/addons/website_event_exhibitor/views/event_event_views.xml
@@ -11,7 +11,7 @@
                 <button name="%(event_sponsor_action_from_event)d"
                         type="action"
                         class="oe_stat_button"
-                        icon="fa-black-tie">
+                        icon="oi_black-tie">
                     <field name="sponsor_count" string="Sponsors" widget="statinfo"/>
                 </button>
             </field>
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
index 8d9d8029ce7be6..be9f2a9d3c24bb 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml
@@ -53,7 +53,7 @@
             <button class="btn btn-light position-relative ms-2 d-lg-none"
                 data-bs-toggle="offcanvas"
                 data-bs-target="#o_wevent_exhibitors_offcanvas">
-                <i class="fa fa-sliders"/>
+                <i class="oi" data-icon="tune"/>
             </button>
         </div>
     </div>
@@ -214,7 +214,7 @@
         <p t-else="">We could not find any exhibitor at this moment.</p>
         <div class="o_not_editable my-3" groups="event.group_event_user">
             <a class="btn o_wevent_cta" target="_blank" t-att-href="'/odoo/%s/action-website_event_exhibitor.event_sponsor_action_from_event' % event.id">
-                <span class="fa fa-plus me-1"/> Add Exhibitors
+                <span class="oi me-1" data-icon="add"/> Add Exhibitors
             </a>
         </div>
     </div>
@@ -294,7 +294,7 @@
     <div class="d-flex flex-wrap align-items-center mb-3">
         <t t-foreach="search_countries" t-as="country">
             <span class="o_search_tag d-flex align-items-baseline ps-2 my-2 me-2 border rounded bg-white">
-                <i class="fa fa-tag me-2 text-muted"/>
+                <i class="oi me-2 text-muted" data-icon="label"/>
                 <t t-out="country.display_name"/>
                 <span t-att-data-post="'/event/%s/exhibitors?%s' % (
                     slug(event),
@@ -304,7 +304,7 @@
         </t>
         <t t-foreach="search_sponsorships" t-as="sponsorship">
             <span class="o_search_tag d-flex align-items-baseline ps-2 my-2 me-2 border rounded bg-white">
-                <i class="fa fa-tag me-2 text-muted"/>
+                <i class="oi me-2 text-muted" data-icon="label"/>
                 <t t-out="sponsorship.display_name"/>
                 <span t-att-data-post="'/event/%s/exhibitors?%s' % (
                     slug(event),
diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
index 24dd5ccf9f511a..52e1d58804ab9c 100644
--- a/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
+++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_page.xml
@@ -93,16 +93,16 @@
                         <span t-if="website_visitor_timezone != sponsor.event_id.date_tz">(<t t-out="event.date_tz"/>)</span>
                     </div>
                     <div t-if="sponsor.url" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-globe me-2"/><a t-att-href="sponsor.url"><span t-field="sponsor.url"/></a>
+                        <i class="oi me-2" data-icon="public"/><a t-att-href="sponsor.url"><span t-field="sponsor.url"/></a>
                     </div>
                     <div t-elif="sponsor.partner_id.website" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-globe me-2"/><a t-att-href="sponsor.partner_id.website"><span t-field="sponsor.partner_id.website"/></a>
+                        <i class="oi me-2" data-icon="public"/><a t-att-href="sponsor.partner_id.website"><span t-field="sponsor.partner_id.website"/></a>
                     </div>
                     <div t-if="sponsor.email" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-envelope me-2"/><a t-att-mailto="sponsor.email"><span t-field="sponsor.email"/></a>
+                        <i class="oi oi-filled me-2" data-icon="mail"/><a t-att-mailto="sponsor.email"><span t-field="sponsor.email"/></a>
                     </div>
                     <div t-if="sponsor.phone" class="d-flex text-break align-items-baseline">
-                        <i class="fa fa-phone me-2"/><span t-field="sponsor.phone"/>
+                        <i class="oi oi-filled me-2" data-icon="phone"/><span t-field="sponsor.phone"/>
                     </div>
                 </div>
                 <a t-if="sponsor.partner_id.country_id"
@@ -139,7 +139,7 @@
                 <span class="h5 m-3">Other exhibitors</span>
                 <a href="#collapse_exhibitor_aside" data-bs-toggle="collapse"
                    class="o_wevent_online_page_aside_collapse o_wevent_collapse_link stretched-link d-lg-none p-2 text-decoration-none text-reset collapsed">
-                    <i class="oi oi-chevron-down d-lg-none"/>
+                    <i class="oi d-lg-none" data-icon="keyboard_arrow_down"/>
                 </a>
             </div>
             <ul id="collapse_exhibitor_aside" class="list-group list-group-flush collapse d-lg-block">
diff --git a/addons/website_event_exhibitor/views/event_sponsor_views.xml b/addons/website_event_exhibitor/views/event_sponsor_views.xml
index e286afb3e5bd70..3eff6f4bc79913 100644
--- a/addons/website_event_exhibitor/views/event_sponsor_views.xml
+++ b/addons/website_event_exhibitor/views/event_sponsor_views.xml
@@ -107,7 +107,7 @@
                                 invisible="exhibitor_type == 'sponsor'"/>
                             <div class="o_row" invisible="exhibitor_type == 'sponsor'">
                                 <field name="hour_from" widget="float_time" nolabel="1" class="oe_inline"/>
-                                <i class="fa fa-long-arrow-right mx-2" aria-label="Arrow icon" title="Arrow"/>
+                                <i class="oi mx-2" data-icon="east" aria-label="Arrow icon" title="Arrow"/>
                                 <field name="hour_to" widget="float_time" nolabel="1" class="oe_inline"/>
                                 <field name="event_date_tz" nolabel="1" class="oe_inline"/>
                             </div>
diff --git a/addons/website_event_exhibitor/views/event_templates_sponsor.xml b/addons/website_event_exhibitor/views/event_templates_sponsor.xml
index 416d0c300b25f5..49509b67e2f4e0 100644
--- a/addons/website_event_exhibitor/views/event_templates_sponsor.xml
+++ b/addons/website_event_exhibitor/views/event_templates_sponsor.xml
@@ -12,7 +12,7 @@
                         <t t-set="popover_content">
                             <div t-field="sponsor.name" class="h5"/>
                             <div t-if="sponsor.url" class="d-flex align-items-baseline">
-                                <i class="fa fa-globe me-2"/><a t-att-href="sponsor.url" t-field="sponsor.url" class="text-truncate"/>
+                                <i class="oi me-2" data-icon="public"/><a t-att-href="sponsor.url" t-field="sponsor.url" class="text-truncate"/>
                             </div>
                         </t>
                         <a class="o_wevent_sponsor o_wevent_sponsor_card h-100 rounded text-decoration-none position-relative" tabindex="0" role="button"
diff --git a/addons/website_event_sale/views/website_event_templates.xml b/addons/website_event_sale/views/website_event_templates.xml
index aaba77badf5e53..3d46c26513e7a3 100644
--- a/addons/website_event_sale/views/website_event_templates.xml
+++ b/addons/website_event_sale/views/website_event_templates.xml
@@ -91,7 +91,7 @@
             <t t-set="has_paying_ticket" t-value="any(ticket.get('price', 0) > 0 for ticket in tickets)"/>
             <button t-if="website.account_on_checkout == 'mandatory' and website.is_public_user() and has_paying_ticket" class="btn btn-primary" type="submit">
                 <span>Sign In</span>
-                <span class="fa fa-sign-in"/>
+                <span class="oi" data-icon="login"/>
             </button>
             <button t-else="" type="submit" class="btn btn-primary">
                 <span t-if="has_paying_ticket">Go to Payment</span>
diff --git a/addons/website_event_sale/views/website_sale_templates.xml b/addons/website_event_sale/views/website_sale_templates.xml
index aad9587f35d7ab..e9bfb66bc53ef8 100644
--- a/addons/website_event_sale/views/website_sale_templates.xml
+++ b/addons/website_event_sale/views/website_sale_templates.xml
@@ -47,7 +47,7 @@
                                 <div class="container d-flex flex-grow-1 h-100 w-100">
                                     <div id="o_wevent_event_main_cover_content" class="d-flex flex-column align-items-baseline w-100 p-3">
                                         <span t-if="event.is_participating" class="badge text-bg-success o_wevent_badge">
-                                            <i class="fa fa-check me-2" role="img"/>Registered
+                                            <i class="oi me-2" data-icon="check" role="img"/>Registered
                                         </span>
                                         <div class="w-100 mt-auto">
                                             <h2 t-field="event.name" itemprop="name" placeholder="Event Title" class="mt-3"/>
diff --git a/addons/website_event_track/models/event_track.py b/addons/website_event_track/models/event_track.py
index ca5c7d50c47704..ec8829d159bcd8 100644
--- a/addons/website_event_track/models/event_track.py
+++ b/addons/website_event_track/models/event_track.py
@@ -518,7 +518,7 @@ def _search_get_detail(self, website, order, options):
             'search_fields': ['name', 'partner_name'],
             'fetch_fields': ['name', 'website_url', 'partner_name', 'description'],
             'mapping': mapping,
-            'icon': 'fa-microphone',
+            'icon': 'mic',
             'order': order,
         }
 
diff --git a/addons/website_event_track/static/src/interactions/event_track_reminder.js b/addons/website_event_track/static/src/interactions/event_track_reminder.js
index 638405c712b5be..8343300e977064 100644
--- a/addons/website_event_track/static/src/interactions/event_track_reminder.js
+++ b/addons/website_event_track/static/src/interactions/event_track_reminder.js
@@ -14,12 +14,12 @@ export class WebsiteEventTrackReminder extends Interaction {
             "t-on-click.prevent.stop": this.debounced(this.onReminderToggleClick, 500, true),
             "t-on-mouseover.withTarget": (ev, targetEl) => {
                 if (!this.reminderOn){
-                    targetEl.classList.replace("fa-bell-o", "fa-bell");
+                    targetEl.classList.add('oi-filled');
                 }
             },
             "t-on-mouseout.withTarget": (ev, targetEl) => {
                 if (!this.reminderOn){
-                    targetEl.classList.replace("fa-bell", "fa-bell-o");
+                    targetEl.classList.remove('oi-filled');
                 }
             },
         },
@@ -78,14 +78,14 @@ export class WebsiteEventTrackReminder extends Interaction {
                         title: _t("Allow push notifications?"),
                         body: _t("You have to enable push notifications to get reminders for your favorite tracks."),
                     });
-                    this.bellSelectorEl.classList.replace("fa-bell-o", "fa-bell");
+                    this.bellSelectorEl.classList.add("oi-filled");
                     this.bellSelectorEl.setAttribute("title", _t("Favorite On"));
                 } else {
                     this.notification.add(_t("Talk removed from your Favorites"), {
                         type: "info",
                     });
                     this.favoriteAddedConfirmation = "";
-                    this.bellSelectorEl.classList.replace("fa-bell", "fa-bell-o");
+                    this.bellSelectorEl.classList.remove("oi-filled");
                     this.bellSelectorEl.setAttribute("title", _t("Set Favorite"));
                 }
             }
diff --git a/addons/website_event_track/static/src/scss/event_track_templates.scss b/addons/website_event_track/static/src/scss/event_track_templates.scss
index c79ec8eee15d92..5704460d6abd3b 100644
--- a/addons/website_event_track/static/src/scss/event_track_templates.scss
+++ b/addons/website_event_track/static/src/scss/event_track_templates.scss
@@ -7,11 +7,9 @@
         padding: 0;
     }
 
-    i {
-        &.fa-bell,&.fa-bell-o {
-            color: $o-gray-600;
-            -webkit-text-stroke-color: $o-gray-600;
-        }
+    i[data-icon="notifications"] {
+        color: $o-gray-600;
+        -webkit-text-stroke-color: $o-gray-600;
     }
 }
 
diff --git a/addons/website_event_track/static/src/snippets/s_searchbar/000.xml b/addons/website_event_track/static/src/snippets/s_searchbar/000.xml
index 1ada48fe0c3849..ae78786e67890a 100644
--- a/addons/website_event_track/static/src/snippets/s_searchbar/000.xml
+++ b/addons/website_event_track/static/src/snippets/s_searchbar/000.xml
@@ -4,7 +4,7 @@
     <t t-inherit="website.s_searchbar.autocomplete" t-inherit-mode="extension">
         <xpath expr="//div[@class='o_search_result_item_detail px-3']" position="inside">
             <span t-if="result['partner_name']" class="small">
-                <span class="fa fa-fw fa-user-circle-o"/> <t t-out="result['partner_name']"/>
+                <span class="oi oi-fw" data-icon="account_circle"/> <t t-out="result['partner_name']"/>
             </span>
         </xpath>
     </t>
diff --git a/addons/website_event_track/views/event_event_views.xml b/addons/website_event_track/views/event_event_views.xml
index 38a713b4af1caf..4a9524236257e7 100644
--- a/addons/website_event_track/views/event_event_views.xml
+++ b/addons/website_event_track/views/event_event_views.xml
@@ -11,7 +11,7 @@
                 <button name="%(action_event_track_from_event)d"
                         type="action"
                         class="oe_stat_button"
-                        icon="fa-microphone">
+                        icon="mic">
                     <field name="track_count" string="Tracks" widget="statinfo"/>
                 </button>
             </div>
diff --git a/addons/website_event_track/views/event_templates.xml b/addons/website_event_track/views/event_templates.xml
index 7324575d8932ab..8be1820e5af599 100644
--- a/addons/website_event_track/views/event_templates.xml
+++ b/addons/website_event_track/views/event_templates.xml
@@ -67,9 +67,9 @@
                     <div class="col-12 card-body">
                         <div class="h2 mb-3">You're offline!</div>
                         <div class="alert alert-info text-center">
-                            <span class="fa-stack fa-4x">
-                                <i class="fa fa-wifi fa-stack-1x"></i>
-                                <i class="fa fa-ban fa-stack-2x text-muted"></i>
+                            <span class="oi-stack oi-4x">
+                                <i class="oi oi-stack-1x" data-icon="wifi"></i>
+                                <i class="oi oi-stack-2x text-muted" data-icon="block"></i>
                             </span>
                             <p>This page hasn't been saved for offline reading yet.<br/>Please check your network connection.</p>
                             <p>
diff --git a/addons/website_event_track/views/event_track_templates_agenda.xml b/addons/website_event_track/views/event_track_templates_agenda.xml
index 86c3c403b85e5d..67d0ce80ec1856 100644
--- a/addons/website_event_track/views/event_track_templates_agenda.xml
+++ b/addons/website_event_track/views/event_track_templates_agenda.xml
@@ -14,7 +14,7 @@
                     <p t-else="">We could not find any track at this moment.</p>
                     <div class="o_not_editable my-3" groups="event.group_event_user">
                         <a class="o_wevent_cta btn" target="_blank" t-att-href="'/odoo/%s/action-website_event_track.action_event_track_from_event' % event.id">
-                            <span class="fa fa-plus me-1"/> Schedule Tracks
+                            <span class="oi me-1" data-icon="add"/> Schedule Tracks
                         </a>
                     </div>
                 </div>
@@ -54,7 +54,7 @@
             <div class="input-group">
                 <input type="text" class="form-control search-query oe_search_box border-0 text-bg-light" placeholder="Filter Tracks" id="event_track_search"/>
                 <div class="btn oe_search_button btn-light">
-                    <i class="fa fa-filter" role="img"/>
+                    <i class="oi oi-filled" data-icon="filter_alt" role="img"/>
                 </div>
             </div>
         </div>
diff --git a/addons/website_event_track/views/event_track_templates_list.xml b/addons/website_event_track/views/event_track_templates_list.xml
index 226a37d85ad52c..c47567d86b537f 100644
--- a/addons/website_event_track/views/event_track_templates_list.xml
+++ b/addons/website_event_track/views/event_track_templates_list.xml
@@ -68,7 +68,7 @@
                 <button class="btn btn-light position-relative ms-2 d-lg-none"
                     data-bs-toggle="offcanvas"
                     data-bs-target="#o_wevent_talk_offcanvas">
-                    <i class="fa fa-sliders"/>
+                    <i class="oi" data-icon="tune"/>
                 </button>
             </div>
         </div>
@@ -193,7 +193,7 @@
         <p t-else="">We could not find any track at this moment.</p>
         <div class="o_not_editable my-3" groups="event.group_event_user">
             <a class="o_wevent_cta btn" target="_blank" t-att-href="'/odoo/%s/action-website_event_track.action_event_track_from_event' % event.id">
-                <span class="fa fa-plus me-1"/> Schedule Tracks
+                <span class="oi me-1" data-icon="add"/> Schedule Tracks
             </a>
         </div>
     </div>
@@ -250,7 +250,7 @@
                         t-attf-aria-controls="collapse_session_list_{{ tracks_info_index }}"
                         t-att-aria-expanded="'false' if tracks_info['default_collapsed'] else 'true'"
                         data-bs-toggle="collapse">
-                        <i class="oi oi-chevron-down"/>
+                        <i class="oi" data-icon="keyboard_arrow_down"/>
                     </a>
                     <hr class="mt-2 mb-2"/>
                 </div>
@@ -306,7 +306,7 @@
                     <span t-if="option_track_wishlist and (track.is_track_upcoming or track.is_reminder_on or (not track.date and not track.event_id.is_finished))" class="position-absolute h3 mt-2 me-2" style="right: 0; top: 0;">
                         <t t-call="website_event_track.track_widget_reminder" reminder_light="True"/>
                     </span>
-                    <i class="fa fa-glass fa-2x mx-2 mb-3 position-absolute text-white-75" style="right:0; bottom: 0;"/>
+                    <i class="oi oi-2x mx-2 mb-3 position-absolute text-white-75" data-icon="local_bar" style="right:0; bottom: 0;"/>
                 </div>
             </header>
             <div class="col-12">
@@ -372,7 +372,7 @@
                 </div>
                 <span t-if="tracks_date and today_tz &lt;= tracks_date and track.location_id">-</span>
                 <div t-if="track.location_id">
-                    <i class="fa fa-map-marker" role="img"/> <span t-field="track.location_id"/>
+                    <i class="oi" data-icon="location_on" role="img"/> <span t-field="track.location_id"/>
                 </div>
             </div>
             <!-- reminder -->
@@ -416,7 +416,7 @@
     <div t-if="search_wishlist or search_tags" class="d-flex flex-wrap align-items-center my-3 gap-2">
         <span t-if="search_wishlist"
             class="align-items-baseline border d-inline-flex rounded">
-            <i class="fa fa-bell mx-2 text-muted"/> Favorite Talks
+            <i class="oi oi-filled mx-2 text-muted" data-icon="notifications"/> Favorite Talks
             <a t-att-href="'/event/%s/track?%s' % (slug(event), keep_query('*', search_wishlist=''))"
                 class="btn border-0 py-1">
                 ×
@@ -425,7 +425,7 @@
 
         <t t-foreach="search_tags" t-as="tag">
             <span class="align-items-baseline border d-inline-flex rounded">
-                <i class="fa fa-tag mx-2 text-muted"/>
+                <i class="oi mx-2 text-muted" data-icon="label"/>
                 <t t-out="tag.display_name"/>
                 <span t-att-data-post="'/event/%s/track?%s' % (slug(event), keep_query('*', tags=str((search_tags - tag).ids), prevent_redirect=True))"
                     class="post_link cursor-pointer btn border-0 py-1">
diff --git a/addons/website_event_track/views/event_track_templates_page.xml b/addons/website_event_track/views/event_track_templates_page.xml
index 841a91cb87ceb8..134533d9f1fb92 100644
--- a/addons/website_event_track/views/event_track_templates_page.xml
+++ b/addons/website_event_track/views/event_track_templates_page.xml
@@ -38,19 +38,19 @@
 
 <template id="event_track_content_partner_info">
     <div class="mb-1 align-items-baseline text-break" t-if="track.partner_function">
-        <i class="fa fa-briefcase me-2"/><span t-out="track.partner_function"/>
+        <i class="oi me-2" data-icon="work"/><span t-out="track.partner_function"/>
         <t t-if="track.partner_company_name">
             <span> at </span><span t-out="track.partner_company_name"/>
         </t>
     </div>
     <div class="mb-1 align-items-baseline text-break" t-if="track.partner_id.website">
-        <i class="fa fa-globe me-2"/><a t-att-href="track.partner_id.website"><span t-field="track.partner_id.website"/></a>
+        <i class="oi me-2" data-icon="public"/><a t-att-href="track.partner_id.website"><span t-field="track.partner_id.website"/></a>
     </div>
     <div class="mb-1 align-items-baseline text-break" t-if="track.partner_email">
-        <i class="fa fa-envelope me-2"/><a t-att-mailto="track.partner_email"><span t-field="track.partner_email"/></a>
+        <i class="oi oi-filled me-2" data-icon="mail"/><a t-att-mailto="track.partner_email"><span t-field="track.partner_email"/></a>
     </div>
     <div class="mb-1 align-items-baseline text-break" t-if="track.partner_phone">
-        <i class="fa fa-phone me-2"/><span t-field="track.partner_phone"/>
+        <i class="oi oi-filled me-2" data-icon="phone"/><span t-field="track.partner_phone"/>
     </div>
 </template>
 
@@ -199,7 +199,7 @@
                     </li>
                 </ul>
                 <a href="#collapse_track_aside" data-bs-toggle="collapse" class="o_wevent_collapse_link stretched-link d-md-none px-3 text-decoration-none o_wevent_online_page_aside_collapse collapsed">
-                    <i class="oi oi-chevron-down d-md-none"/>
+                    <i class="oi d-md-none" data-icon="keyboard_arrow_down"/>
                 </a>
             </div>
             <div id="collapse_track_aside"
diff --git a/addons/website_event_track/views/event_track_templates_proposal.xml b/addons/website_event_track/views/event_track_templates_proposal.xml
index 0c41ad1d96f7fc..2e9986a74a1bfd 100644
--- a/addons/website_event_track/views/event_track_templates_proposal.xml
+++ b/addons/website_event_track/views/event_track_templates_proposal.xml
@@ -112,7 +112,7 @@
                             <div class="o_form_buttons col-12 d-flex align-items-center pt16 pb48">
                                 <button type="submit" class="btn btn-primary o_wetrack_proposal_submit_button">Submit Proposal</button>
                                 <span class="o_wetrack_proposal_error_section text-danger d-none ml8">
-                                    <i class="fa fa-close mr4" role="img" aria-label="Error" title="Error"/>
+                                    <i class="oi mr4" data-icon="close" role="img" aria-label="Error" title="Error"/>
                                     <span class="o_wetrack_proposal_error_message"/>
                                 </span>
                             </div>
diff --git a/addons/website_event_track/views/event_track_templates_reminder.xml b/addons/website_event_track/views/event_track_templates_reminder.xml
index 5be77b66a86e8e..02b9f50f91335c 100644
--- a/addons/website_event_track/views/event_track_templates_reminder.xml
+++ b/addons/website_event_track/views/event_track_templates_reminder.xml
@@ -12,7 +12,7 @@
     <div t-att-class="'o_wetrack_js_reminder %s %s' % (_btn_style, _btn_size)" role="button"
          t-att-data-track-id="track.id"
          t-att-data-reminder-on="bool(track.is_reminder_on)">
-        <i t-att-class="'o_wetrack_js_reminder_bell fa fa-bell%s %s' % ('' if track.is_reminder_on else '-o', 'text-white' if reminder_light and not light_theme else 'text-dark')"
+        <i t-att-class="'o_wetrack_js_reminder_bell oi %s %s' % ('oi-filled' if track.is_reminder_on else '', 'text-white' if reminder_light and not light_theme else 'text-dark')" data-icon="notifications"
            t-att-title="'Favorite On' if track.is_reminder_on else 'Set Favorite'"
            t-att-data-is-reminder-light="reminder_light"></i>
     </div>
diff --git a/addons/website_event_track/views/event_track_views.xml b/addons/website_event_track/views/event_track_views.xml
index c21052425ce6c7..58684ce3947869 100644
--- a/addons/website_event_track/views/event_track_views.xml
+++ b/addons/website_event_track/views/event_track_views.xml
@@ -138,7 +138,7 @@
                 <sheet string="Track">
                     <div class="oe_button_box" name="button_box">
                         <button name="%(website_event_track.website_visitor_action_from_track)d"
-                            type="action" class="oe_stat_button" icon="fa-bell"
+                            type="action" class="oe_stat_button" icon="notifications" icon_class="oi-filled"
                             groups="event.group_event_user" invisible="wishlist_visitor_count == 0">
                             <field name="wishlist_visitor_count" string="Wishlisted By" widget="statinfo"/>
                         </button>
diff --git a/addons/website_event_track/views/website_visitor_views.xml b/addons/website_event_track/views/website_visitor_views.xml
index dc9d428105cb79..93fec5dc3c6fea 100644
--- a/addons/website_event_track/views/website_visitor_views.xml
+++ b/addons/website_event_track/views/website_visitor_views.xml
@@ -20,7 +20,7 @@
             <xpath expr="//button[@id='w_visitor_visit_counter']" position="before">
                 <button name="%(website_event_track.event_track_action_from_visitor)d"
                     type="action"
-                    class="oe_stat_button" icon="fa-ticket"
+                    class="oe_stat_button" icon="confirmation_number"
                     groups="event.group_event_manager"
                     invisible="event_track_wishlisted_count == 0">
                     <field name="event_track_wishlisted_count" widget="statinfo" string="Tracks"/>
diff --git a/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml b/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml
index 538a36745006f2..157514bbd2428e 100644
--- a/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml
+++ b/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml
@@ -34,7 +34,7 @@
         <div class="d-flex w-100 flex-column align-items-end">
             <div class="p-2 rounded owevent_track_suggestion_next position-relative">
                 <div class="text-white text-end owevent_track_suggestion_close_wrapper">
-                    <i class="fa fa-remove owevent_track_suggestion_close position-absolute"/>
+                    <i class="oi owevent_track_suggestion_close position-absolute" data-icon="close"/>
                 </div>
                 <span class="text-white">Up Next: </span>
                 <span class="text-primary fw-bold pe-4" t-out="suggestion.name"/>
diff --git a/addons/website_event_track_live/views/event_track_templates_list.xml b/addons/website_event_track_live/views/event_track_templates_list.xml
index d5b66cf74a97be..4ba08a9970cb8d 100644
--- a/addons/website_event_track_live/views/event_track_templates_list.xml
+++ b/addons/website_event_track_live/views/event_track_templates_list.xml
@@ -11,7 +11,7 @@
     <!-- ADD YOUTUBE ICON -->
     <xpath expr="//div[hasclass('col-12')]//span[@t-field='track.name']" position="before">
         <i t-if="track.date and track.youtube_video_url and (track.is_track_soon or track.is_track_live or track.is_youtube_replay)"
-            class="fa fa-youtube-play text-danger me-1"/>
+            class="oi text-danger me-1" data-icon="oi_youtube-play"/>
     </xpath>
 </template>
 
diff --git a/addons/website_event_track_live/views/event_track_templates_page.xml b/addons/website_event_track_live/views/event_track_templates_page.xml
index 857a09f281e03a..49a0449f2c8c37 100644
--- a/addons/website_event_track_live/views/event_track_templates_page.xml
+++ b/addons/website_event_track_live/views/event_track_templates_page.xml
@@ -27,7 +27,7 @@
             t-att-data-track-website-image-url="track.website_image_url"
             t-att-data-youtube-video-id="track.youtube_video_id">
             <div class="position-absolute o_wevent_event_track_live_loading w-100 d-flex align-items-center justify-content-center text-white h4">
-                <i class="fa fa-spin fa-circle-o-notch position-relative"/>
+                <i class="oi oi-spin position-relative" data-icon="autorenew"/>
                 <span class="ps-2">Loading Video...</span>
             </div>
             <div id="o_wevent_youtube_iframe_container" class="w-100"/>
diff --git a/addons/website_event_track_quiz/static/src/interactions/quiz.js b/addons/website_event_track_quiz/static/src/interactions/quiz.js
index ccc4fcb71e3f2e..9957dde5e5f591 100644
--- a/addons/website_event_track_quiz/static/src/interactions/quiz.js
+++ b/addons/website_event_track_quiz/static/src/interactions/quiz.js
@@ -103,15 +103,15 @@ export class Quiz extends Interaction {
             const questionId = questionEl.dataset.questionId;
             const answer = this.quiz.answers[questionId];
             for (const answerEl of questionEl.querySelectorAll("a.o_quiz_quiz_answer")) {
-                for (const iEl of answerEl.querySelectorAll("i.fa")) {
+                for (const iEl of answerEl.querySelectorAll("i.oi")) {
                     iEl.classList.add("d-none");
                 }
                 if (answerEl.querySelector("input[type=radio]").checked) {
                     if (answer.is_correct) {
-                        answerEl.querySelector("i.fa-check-circle").classList.remove("d-none");
+                        answerEl.querySelector("i[data-icon='check_circle']").classList.remove("d-none");
                     } else {
                         answerEl.querySelector("label input").checked = false;
-                        answerEl.querySelector("i.fa-times-circle").classList.remove("d-none");
+                        answerEl.querySelector("i[data-icon='cancel']").classList.remove("d-none");
                     }
                     if (answer.awarded_points > 0) {
                         this.renderAt("quiz.badge", {
@@ -119,7 +119,7 @@ export class Quiz extends Interaction {
                         }, answerEl);
                     }
                 } else {
-                    answerEl.querySelector("i.fa-circle").classList.remove("d-none");
+                    answerEl.querySelector("i[data-icon='circle'].oi-filled").classList.remove("d-none");
                 }
             }
             const listEl = questionEl.querySelector(".list-group");
@@ -148,10 +148,10 @@ export class Quiz extends Interaction {
     resetQuiz() {
         for (const questionEl of this.el.querySelectorAll(".o_quiz_js_quiz_question")) {
             for (const answerEl of questionEl.querySelectorAll("a.o_quiz_quiz_answer")) {
-                for (const iEl of answerEl.querySelectorAll("i.fa")) {
+                for (const iEl of answerEl.querySelectorAll("i.oi")) {
                     iEl.classList.add("d-none");
                 }
-                answerEl.querySelector("i.fa-circle").classList.remove("d-none");
+                answerEl.querySelector("i[data-icon='circle'].oi-filled").classList.remove("d-none");
                 answerEl.querySelector("span.badge")?.remove();
                 answerEl.querySelector("input[type=radio]").checked = false;
             }
diff --git a/addons/website_event_track_quiz/static/src/scss/event_quiz.scss b/addons/website_event_track_quiz/static/src/scss/event_quiz.scss
index d80e668c2d327a..b2e75d475a95b3 100644
--- a/addons/website_event_track_quiz/static/src/scss/event_quiz.scss
+++ b/addons/website_event_track_quiz/static/src/scss/event_quiz.scss
@@ -33,7 +33,7 @@ $o-wslides-fs-side-width: 300px;
         .list-group-item  {
             @include font-size(1rem);
 
-            input:checked + i.fa-circle {
+            input:checked + [data-icon="circle"] {
                 color: $primary !important;
             }
         }
@@ -50,7 +50,7 @@ $o-wslides-fs-side-width: 300px;
 
     a.o_quiz_js_quiz_is_correct {
         color: black;
-        input:checked + i.fa-check-circle-o {
+        input:checked + i[data-icon="check_circle"]:not(.oi-filled) {
             color: $primary !important;
         }
     }
diff --git a/addons/website_event_track_quiz/static/src/xml/quiz_templates.xml b/addons/website_event_track_quiz/static/src/xml/quiz_templates.xml
index e84ae7235d6bd7..c8c21951a76524 100644
--- a/addons/website_event_track_quiz/static/src/xml/quiz_templates.xml
+++ b/addons/website_event_track_quiz/static/src/xml/quiz_templates.xml
@@ -20,9 +20,9 @@
                                         t-att-name="question.id"
                                         t-att-value="answer.id"
                                         class="d-none"/>
-                                    <i t-att-class="'fa fa-circle text-400' + (!(this.widget.track.completed &amp;&amp; answer.is_correct) ? '' : ' d-none')"></i>
-                                    <i class="fa fa-times-circle text-danger d-none"></i>
-                                    <i t-att-class="'fa fa-check-circle text-success' + (this.widget.track.completed &amp;&amp; answer.is_correct ? '' :  ' d-none')"></i>
+                                    <i t-att-class="'oi oi-filled text-400' + (!(this.widget.track.completed &amp;&amp; answer.is_correct) ? '' : ' d-none')" data-icon="circle"></i>
+                                    <i class="oi oi-filled text-danger d-none" data-icon="cancel"></i>
+                                    <i t-att-class="'oi oi-filled text-success' + (this.widget.track.completed &amp;&amp; answer.is_correct ? '' :  ' d-none')" data-icon="check_circle"></i>
                                 </label>
                                 <span t-out="answer.text_value"/>
                             </a>
@@ -44,7 +44,7 @@
     <t t-name="quiz.comment">
         <t t-if="answer.is_correct">
             <div class="o_quiz_quiz_answer_info list-group-item list-group-item-success">
-                <i class="fa fa-info-circle"/>
+                <i class="oi" data-icon="info"/>
                 Correct.
                 <t t-if="answer.comment">
                     <br/>
@@ -54,7 +54,7 @@
         </t>
         <t t-else="">
             <div class="o_quiz_quiz_answer_info list-group-item list-group-item-danger">
-                <i class="fa fa-info-circle"/>
+                <i class="oi" data-icon="info"/>
                 Incorrect. <t t-if="answer.correct_answer">The correct answer was: <t t-out="answer.correct_answer"/></t>
                 <t t-if="answer.comment">
                     <br/>
diff --git a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
index 6ea659a0ede378..c1cd217fb0edab 100644
--- a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
+++ b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
@@ -35,19 +35,19 @@
 <template id="pager_nobox" name="Pager (not box display)">
     <ul t-if="pager['page_count'] > 1" t-attf-class="o_wprofile_pager fw-bold pagination m-0">
         <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
-            <a t-att-href=" pager['page_first']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-step-backward"/></a>
+            <a t-att-href=" pager['page_first']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="oi" data-icon="skip_previous"/></a>
         </li>
         <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
-            <a t-att-href=" pager['page_previous']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-caret-left"/></a>
+            <a t-att-href=" pager['page_previous']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="oi" data-icon="arrow_left"/></a>
         </li>
         <t t-foreach="pager['pages']" t-as="page">
             <li t-attf-class="page-item #{'active disabled bg-primary rounded-circle' if page['num'] == pager['page']['num'] else ''}"> <a t-att-href="page['url']" class="page-link" t-out="page['num']"/></li>
         </t>
         <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == pager['page_count'] else ''}">
-            <a t-att-href="pager['page_next']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="fa fa-caret-right"/></a>
+            <a t-att-href="pager['page_next']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="oi" data-icon="arrow_right"/></a>
         </li>
         <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == pager['page_count'] else ''}">
-            <a t-att-href=" pager['page_last']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="fa fa-step-forward"/></a>
+            <a t-att-href=" pager['page_last']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="oi" data-icon="skip_next"/></a>
         </li>
     </ul>
 </template>
@@ -99,7 +99,7 @@
                 <form t-attf-action="#{'/event/%s/community/leaderboard/results' % (slug(event))}" role="search" method="get">
                     <div class="input-group ms-1 position-relative">
                         <button class="btn btn-link text-white rounded-0 pe-1" type="submit" aria-label="Search" title="Search">
-                            <i class="fa fa-search"></i>
+                            <i class="oi" data-icon="search"></i>
                         </button>
                         <input type="text" class="form-control rounded-0" name="search" placeholder="Search Attendees" t-att-value="searched_name or ''"/>
                     </div>
@@ -111,13 +111,13 @@
                 <div class="btn-group w-100 position-relative" role="group" aria-label="Mobile sub-nav">
 
                     <div class="btn-group ms-1 position-static me-2">
-                        <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
+                        <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="oi" data-icon="search"></i></a>
                         <div class="dropdown-menu dropdown-menu-end w-100" style="right: 10px;">
                             <form class="px-3" t-attf-action="#{'/event/%s/community/leaderboard' % (slug(event))}" role="search" method="get">
                                 <div class="input-group">
                                     <input type="text" class="form-control" name="search" placeholder="Search users"/>
                                     <button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
-                                        <i class="fa fa-search"/>
+                                        <i class="oi" data-icon="search"/>
                                     </button>
                                 </div>
                             </form>
diff --git a/addons/website_event_track_quiz/views/event_quiz_templates.xml b/addons/website_event_track_quiz/views/event_quiz_templates.xml
index 524fd7fa070c9c..6b3fabe947c838 100644
--- a/addons/website_event_track_quiz/views/event_quiz_templates.xml
+++ b/addons/website_event_track_quiz/views/event_quiz_templates.xml
@@ -37,9 +37,9 @@
                                 t-att-value="answer['id']"
                                 class="d-none"
                                 t-att-disabled="quiz_completed"/>
-                            <i t-att-class="'fa fa-circle text-400 %s' % ('d-none' if quiz_completed and answer['is_correct'] else '')"/>
-                            <i class="fa fa-times-circle text-danger d-none"></i>
-                            <i t-att-class="'fa fa-check-circle text-success %s' % ('d-none' if not (quiz_completed and answer['is_correct']) else '')"></i>
+                            <i t-att-class="'oi oi-filled text-400 %s' % ('d-none' if quiz_completed and answer['is_correct'] else '')" data-icon="circle"/>
+                            <i class="oi oi-filled text-danger d-none" data-icon="cancel"></i>
+                            <i t-att-class="'oi oi-filled text-success %s' % ('d-none' if not (quiz_completed and answer['is_correct']) else '')" data-icon="check_circle"></i>
                         </label>
                         <span t-out="answer['text_value']"/>
                     </a>
diff --git a/addons/website_event_track_quiz/views/event_track_views.xml b/addons/website_event_track_quiz/views/event_track_views.xml
index 507962a1829957..a6ab8b622fe60d 100644
--- a/addons/website_event_track_quiz/views/event_track_views.xml
+++ b/addons/website_event_track_quiz/views/event_track_views.xml
@@ -14,7 +14,7 @@
             </field>
             <field name='is_published' position="before">
                 <button name="action_view_quiz" type="object" class="oe_stat_button"
-                    string="Go to Quiz" icon="fa-question-circle" widget="stat_info"
+                    string="Go to Quiz" icon="help" widget="stat_info"
                     invisible="not quiz_id"
                     groups="event.group_event_user">
                 </button>
diff --git a/addons/website_forum/models/forum_forum.py b/addons/website_forum/models/forum_forum.py
index 6008448f158375..b746de46fd9ae0 100644
--- a/addons/website_forum/models/forum_forum.py
+++ b/addons/website_forum/models/forum_forum.py
@@ -338,7 +338,7 @@ def _search_get_detail(self, website, order, options):
             'search_fields': search_fields,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-comments-o',
+            'icon': 'forum',
             'order': 'name desc, id desc' if 'name desc' in order else 'name asc, id desc',
         }
 
diff --git a/addons/website_forum/models/forum_post.py b/addons/website_forum/models/forum_post.py
index 577bed5eb3e459..ea7cd180bf7043 100644
--- a/addons/website_forum/models/forum_post.py
+++ b/addons/website_forum/models/forum_post.py
@@ -930,7 +930,7 @@ def _search_get_detail(self, website, order, options):
             'search_fields': search_fields,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-comment-o',
+            'icon': 'forum',
             'order': order,
         }
 
diff --git a/addons/website_forum/models/forum_tag.py b/addons/website_forum/models/forum_tag.py
index 494f573c716bab..06c4cd7d3ee96a 100644
--- a/addons/website_forum/models/forum_tag.py
+++ b/addons/website_forum/models/forum_tag.py
@@ -68,6 +68,6 @@ def _search_get_detail(self, website, order, options):
             'search_fields': search_fields,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-tag',
+            'icon': 'label',
             'order': ','.join(filter(lambda f: 'is_published' not in f, order.split(','))),
         }
diff --git a/addons/website_forum/static/src/interactions/loader_loading.js b/addons/website_forum/static/src/interactions/loader_loading.js
index 15b6b46ea3152b..d039166b20ae56 100644
--- a/addons/website_forum/static/src/interactions/loader_loading.js
+++ b/addons/website_forum/static/src/interactions/loader_loading.js
@@ -23,7 +23,8 @@ document.addEventListener('DOMContentLoaded', () => {
         loadingElement.classList.add('o_wysiwyg_loading');
         var loadingIcon = document.createElement('i');
         loadingIcon.classList.add('text-600', 'text-center',
-            'fa', 'fa-circle-o-notch', 'fa-spin', 'fa-2x');
+            'oi', 'oi-spin', 'oi-2x');
+        loadingIcon.dataset.icon = "autorenew";
         loadingElement.appendChild(loadingIcon);
         wrapper.appendChild(loadingElement);
 
diff --git a/addons/website_forum/static/src/interactions/website_forum.js b/addons/website_forum/static/src/interactions/website_forum.js
index 1fec432a9f5564..fd69d814dcf417 100644
--- a/addons/website_forum/static/src/interactions/website_forum.js
+++ b/addons/website_forum/static/src/interactions/website_forum.js
@@ -437,9 +437,9 @@ export class WebsiteForum extends Interaction {
             styleForIncorrect.call(toggler.classList, "opacity-50");
             const answerBorder = answer.querySelector("div .border-start");
             styleForCorrect.call(answerBorder.classList, "border-success");
-            const togglerIcon = toggler.querySelector(".fa");
-            styleForCorrect.call(togglerIcon.classList, "fa-check-circle", "text-success");
-            styleForIncorrect.call(togglerIcon.classList, "fa-check-circle-o");
+            const togglerIcon = toggler.querySelector(".oi");
+            togglerIcon.dataset.icon = "check_circle";
+            styleForCorrect.call(togglerIcon.classList, "oi-filled", "text-success");
             const correctBadge = answer.querySelector(".o_wforum_answer_correct_badge");
             styleForCorrect.call(correctBadge.classList, "d-inline");
             styleForIncorrect.call(correctBadge.classList, "d-none");
@@ -454,10 +454,10 @@ export class WebsiteForum extends Interaction {
         const data = await this.waitFor(rpc(currentTargetEl.dataset.href));
         currentTargetEl.classList.toggle("opacity-50", !data);
         currentTargetEl.classList.toggle("opacity-100-hover", !data);
-        const currentTargetEl_icon = currentTargetEl.querySelector(".fa");
-        currentTargetEl_icon.classList.toggle("fa-star-o", !data);
+        const currentTargetEl_icon = currentTargetEl.querySelector(".oi");
         currentTargetEl_icon.classList.toggle("o_wforum_gold", data);
-        currentTargetEl_icon.classList.toggle("fa-star", data);
+        currentTargetEl_icon.classList.toggle("oi-filled", data);
+        currentTargetEl_icon.dataset.icon = "star";
     }
 
     /**
diff --git a/addons/website_forum/static/src/xml/public_templates.xml b/addons/website_forum/static/src/xml/public_templates.xml
index 3dda58fe0b7d7c..d9a829b8f085b1 100644
--- a/addons/website_forum/static/src/xml/public_templates.xml
+++ b/addons/website_forum/static/src/xml/public_templates.xml
@@ -14,14 +14,14 @@
                         <div t-if="state != 'pending'" class="share-icons text-center text-primary">
                             <div class="s_share o_no_link_popover">
                                 <a href="https://www.facebook.com/sharer/sharer.php?u={url}" class="s_share_facebook" target="_blank" aria-label="Facebook">
-                                    <i class="fa fa-facebook rounded shadow-sm"/>
+                                    <i class="oi rounded shadow-sm" data-icon="oi_facebook"/>
                                 </a>
                                 <t t-set="_hashtags" t-value="target_type ? (' %23' + target_type) : ''"></t>
                                 <a t-attf-href="https://twitter.com/intent/tweet?text={title}#{_hashtags}&amp;url={url}" class="s_share_twitter" target="_blank" aria-label="Twitter">
-                                    <i class="fa fa-twitter rounded shadow-sm"/>
+                                    <i class="oi rounded shadow-sm" data-icon="oi_x"/>
                                 </a>
                                 <a href="https://www.linkedin.com/sharing/share-offsite/?url={url}" class="s_share_linkedin" target="_blank" aria-label="LinkedIn">
-                                    <i class="fa fa-linkedin rounded shadow-sm"/>
+                                    <i class="oi rounded shadow-sm" data-icon="oi_linkedin"/>
                                 </a>
                             </div>
                         </div>
diff --git a/addons/website_forum/static/tests/tours/website_forum_question.js b/addons/website_forum/static/tests/tours/website_forum_question.js
index 08fc40c4f65a3b..37c872b18d5756 100644
--- a/addons/website_forum/static/tests/tours/website_forum_question.js
+++ b/addons/website_forum/static/tests/tours/website_forum_question.js
@@ -66,7 +66,7 @@ registry.category("web_tour.tours").add('forum_question', {
         expectUnloadPage: true,
     }, {
         content: "This page contain new created question.",
-        trigger: '#wrap:has(.fa-star)',
+        trigger: '#wrap:has([data-icon="star"].oi-filled)',
     },
     {
         trigger: ".o_wforum_question:contains(marc demo)",
diff --git a/addons/website_forum/views/base_contact_templates.xml b/addons/website_forum/views/base_contact_templates.xml
index e27bc4803ec962..3368c8a121648f 100644
--- a/addons/website_forum/views/base_contact_templates.xml
+++ b/addons/website_forum/views/base_contact_templates.xml
@@ -11,15 +11,15 @@
                             <span t-field="object.website" class="o_forum_tooltip_line"/>
                         </a>
                 </div>
-                <b class="mt-4"><i class="fa fa-diamond text-secondary"/> <t t-out="object.karma"/></b>
+                <b class="mt-4"><i class="oi text-secondary" data-icon="diamond"/> <t t-out="object.karma"/></b>
                 <div t-if="options.get('badges')" style="display: inline-block">
                     <t t-out="separator"/>
                     <b>|</b>
-                    <span class="fa fa-trophy o-text-gold ms-2" role="img" aria-label="Gold badge" title="Gold badge"/>
+                    <span class="oi oi-filled o-text-gold ms-2" data-icon="trophy" role="img" aria-label="Gold badge" title="Gold badge"/>
                     <t t-out="object.gold_badge"/>
-                    <span class="fa fa-trophy o-text-silver ms-2" role="img" aria-label="Silver badge" title="Silver badge"/>
+                    <span class="oi oi-filled o-text-silver ms-2" data-icon="trophy" role="img" aria-label="Silver badge" title="Silver badge"/>
                     <t t-out="object.silver_badge"/>
-                    <span class="fa fa-trophy o-text-bronze ms-2" role="img" aria-label="Bronze badge" title="Bronze badge"/>
+                    <span class="oi oi-filled o-text-bronze ms-2" data-icon="trophy" role="img" aria-label="Bronze badge" title="Bronze badge"/>
                     <t t-out="object.bronze_badge"/>
                 </div>
                 <t t-out="0"/>
diff --git a/addons/website_forum/views/forum_forum_templates.xml b/addons/website_forum/views/forum_forum_templates.xml
index 5039389301e550..90dc29b415bdec 100644
--- a/addons/website_forum/views/forum_forum_templates.xml
+++ b/addons/website_forum/views/forum_forum_templates.xml
@@ -24,17 +24,17 @@
                     <th class="o_wforum_table_posters"></th>
                     <th class="o_wforum_table_replies small fw-normal text-center">
                         <a class="text-muted" t-attf-href="?#{ keep_query('search', 'filters', 'my', 'create_uid', sorting='child_count asc' if sorting == 'child_count desc' else 'child_count desc') }">
-                            Replies <i t-attf-class="fa fa-caret-#{ 'down' if sorting == 'child_count desc' else 'up' } #{ not sorting.startswith('child_count') and 'd-none ' }"></i>
+                            Replies <i t-attf-class="oi #{ not sorting.startswith('child_count') and 'd-none ' }" t-attf-data-icon="#{ 'arrow_drop_down' if sorting == 'child_count desc' else 'arrow_drop_up' } "></i>
                         </a>
                     </th>
                     <th class="o_wforum_table_views small fw-normal text-center">
                         <a class="text-muted" t-attf-href="?#{ keep_query('search', 'filters', 'my', 'create_uid', sorting='views asc' if sorting == 'views desc' else 'views desc') }">
-                            Views <i t-attf-class="fa fa-caret-#{'down' if sorting == 'views desc' else 'up'}  #{ not sorting.startswith('views') and 'd-none ' }"></i>
+                            Views <i t-attf-class="oi #{ not sorting.startswith('views') and 'd-none ' }" t-attf-data-icon="#{'arrow_drop_down' if sorting == 'views desc' else 'arrow_drop_up'}"></i>
                         </a>
                     </th>
                     <th class="o_wforum_table_activity small fw-normal text-center">
                         <a class="text-muted" t-attf-href="?#{ keep_query('search', 'filters', 'my', 'create_uid', sorting='last_activity_date asc' if sorting == 'last_activity_date desc' else 'last_activity_date desc') }">
-                            Activity <i t-attf-class="fa fa-caret-#{ 'down' if sorting == 'last_activity_date desc' else 'up'}  #{ 'd-none ' if not sorting.startswith('last_activity') else '' }"></i>
+                            Activity <i t-attf-class="oi #{ 'd-none ' if not sorting.startswith('last_activity') else '' }" t-attf-data-icon="#{ 'arrow_drop_down' if sorting == 'last_activity_date desc' else 'arrow_drop_up'}"></i>
                         </a>
                     </th>
                 </tr>
@@ -59,7 +59,7 @@
         <div t-if="forum and forum.has_pending_post" class="alert border" role="alert">
             <b>You already have a pending post.</b><br/>
             <p>Please wait for a moderator to validate your previous post before continuing.</p>
-            <a t-attf-href="/forum/#{ slug(forum) }" title="All Topics"><i class="fa fa-angle-left me-2"/>Back to All Posts</a>
+            <a t-attf-href="/forum/#{ slug(forum) }" title="All Topics"><i class="oi me-2" data-icon="keyboard_arrow_left"/>Back to All Posts</a>
         </div>
 
         <form t-else="" t-attf-action="/forum/#{slug(forum)}/new" method="post" role="form" class="tag_text js_website_submit_form js_wforum_submit_form o_wforum_readable mt-lg-3">
@@ -73,14 +73,14 @@
                     <div class="form-text small text-muted">
                         <a data-bs-toggle="collapse" href="#newQuestionExample" role="button" aria-expanded="false" aria-controls="newQuestionExample">
                             Example
-                            <i class="fa fa-question-circle"/>
+                            <i class="oi" data-icon="help"/>
                         </a>
                         <div class="collapse" id="newQuestionExample">
                             <div class="mt-2 text-success">
-                                <i class="fa fa-check"/> How to configure TPS and TVQ's canadian taxes?
+                                <i class="oi" data-icon="check"/> How to configure TPS and TVQ's canadian taxes?
                             </div>
                             <div class="text-danger">
-                                <i class="fa fa-times"/> Good morning to all! Please, can someone help solve my tax computation problem in Canada? Thanks!
+                                <i class="oi" data-icon="close"/> Good morning to all! Please, can someone help solve my tax computation problem in Canada? Thanks!
                             </div>
                         </div>
                     </div>
@@ -94,7 +94,7 @@
                         <t t-out="question_content"/>
                     </textarea>
                     <div class="d-flex">
-                        <span class="form-text small text-muted me-1"><i class="fa fa-lightbulb-o"></i> Tip:</span>
+                        <span class="form-text small text-muted me-1"><i class="oi" data-icon="lightbulb"></i> Tip:</span>
                         <div class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
                             <div class="carousel-inner">
                                 <div class="carousel-item active">
@@ -163,15 +163,15 @@
                     <div class="form-text small text-muted">
                         <a data-bs-toggle="collapse" href="#newQuestionExample" role="button" aria-expanded="false" aria-controls="newQuestionExample">
                             Example
-                            <i class="fa fa-question-circle"/>
+                            <i class="oi" data-icon="help"/>
                         </a>
                         <div class="collapse" id="newQuestionExample">
                             <div class="my-2">Use a clear, explicit and concise title</div>
                             <div class="text-success">
-                                <i class="fa fa-check"/> How to configure TPS and TVQ's canadian taxes?
+                                <i class="oi" data-icon="check"/> How to configure TPS and TVQ's canadian taxes?
                             </div>
                             <div class="text-danger">
-                                <i class="fa fa-times"/> Good morning to all! Please, can someone help solve my tax computation problem in Canada? Thanks!
+                                <i class="oi" data-icon="close"/> Good morning to all! Please, can someone help solve my tax computation problem in Canada? Thanks!
                             </div>
                         </div>
                     </div>
@@ -183,7 +183,7 @@
                 <div class="col">
                     <textarea name="content" id="content" required="required" class="form-control o_wysiwyg_loader" t-att-data-karma="forum.karma_editor" t-out="post.content" t-att-content="post.content"/>
                     <div t-if="not is_answer" class="d-flex mb-2">
-                        <span class="form-text small text-muted me-1"><i class="fa fa-lightbulb-o"></i> Tip:</span>
+                        <span class="form-text small text-muted me-1"><i class="oi" data-icon="lightbulb"></i> Tip:</span>
                         <div class="carousel slide" data-bs-ride="carousel">
                             <div class="carousel-inner">
                                 <div class="carousel-item active">
diff --git a/addons/website_forum/views/forum_forum_templates_layout.xml b/addons/website_forum/views/forum_forum_templates_layout.xml
index 37add7dd119fc3..e2807e9ec520f3 100644
--- a/addons/website_forum/views/forum_forum_templates_layout.xml
+++ b/addons/website_forum/views/forum_forum_templates_layout.xml
@@ -31,7 +31,7 @@
             <div class="flex-grow-1">
                 <div class="o_wforum_breadcrumb_root_single d-flex align-items-center mb-2">
                     <a t-if="breadcrumb_kind == 'base'" t-attf-href="/forum/#{ _forum_slug }">
-                        <i class="d-inline-block fa fa-angle-left me-2 small"/><t t-out="_forum_name"/>
+                        <i class="oi d-inline-block me-2 small" data-icon="keyboard_arrow_left"/><t t-out="_forum_name"/>
                     </a>
                     <button class="btn d-lg-none position-relative ms-auto p-2" data-bs-toggle="offcanvas" data-bs-target="#o_wforum_offcanvas">
                         <span class="navbar-toggler-icon"/>
@@ -40,7 +40,7 @@
                 <div class="d-flex gap-2 align-items-baseline">
                     <h1 t-attf-class="col-lg-10 my-0 h3" t-out="question.name"/>
                     <div class="col d-flex justify-content-end align-items-center">
-                        <i t-if="question.state == 'close'" class="fa fa-lock ms-2 fs-4" title="Closed" data-bs-toggle="tooltip" data-bs-placement="top"/>
+                        <i t-if="question.state == 'close'" class="oi ms-2 fs-4" data-icon="lock" title="Closed" data-bs-toggle="tooltip" data-bs-placement="top"/>
                         <span t-elif="not question.active" class="badge text-bg-danger">
                             <t t-if="question.state!='offensive'">Deleted</t>
                             <t t-if="question.state=='offensive'">Offensive</t>
@@ -51,7 +51,8 @@
                         <a t-elif="uid" type="button" aria-label="Favorite"
                             t-attf-data-href="/forum/#{slug(question.forum_id)}/question/#{slug(question)}/toggle_favourite"
                             t-attf-class="o_wforum_favourite_toggle btn btn-lg #{ 'opacity-50' if not question.user_favourite else '' } opacity-hover-100 p-0">
-                            <i t-attf-class="position-relative fa #{'o_wforum_gold fa-star ' if question.user_favourite else 'fa-star-o '}"
+                            <i t-attf-class="position-relative oi #{'o_wforum_gold oi-filled' if question.user_favourite else ''}"
+                                data-icon="star"
                                 data-bs-toggle="tooltip"
                                 data-bs-placement="top"
                                 title="Favorite"/>
@@ -95,14 +96,14 @@
             </div>
             <div t-if="tag or tags or search or question_count or page_name or website_forum_action" t-attf-class="d-flex justify-content-lg-end gap-2 flex-grow-1 flex-wrap flex-md-nowrap w-100 w-lg-auto #{'mw-xl-75' if search else 'mw-xl-50'}">
                 <span t-if="tag and not tags" class="btn btn-light rounded ps-2">
-                    <span t-if="tag"><i class="fa fa-tag me-1 opacity-50"/><t t-out="tag.name"/></span>
+                    <span t-if="tag"><i class="oi me-1 opacity-50" data-icon="label"/><t t-out="tag.name"/></span>
                     <a t-attf-href="#{ url_for('/forum') }/#{ _forum_slug }?#{ keep_query('search', 'sorting', 'my', 'create_uid') }"
-                       class="p-1 text-decoration-none text-reset opacity-50"><i class="oi oi-close d-inline-block"/></a>
+                       class="p-1 text-decoration-none text-reset opacity-50"><i class="oi d-inline-block" data-icon="close_small"/></a>
                 </span>
                 <span t-if="search" class="btn btn-light rounded ps-2">
                     <em t-if="search" class="text-muted">"<t t-out="search"/>"</em>
                     <a t-attf-href="?#{ keep_query('sorting', 'my') }" class="p-1 text-decoration-none text-reset opacity-50">
-                        <i class="oi oi-close d-inline-block"/>
+                        <i class="oi d-inline-block" data-icon="close_small"/>
                     </a>
                 </span>
                 <div t-if="question_count or tags" class="dropdown ms-lg-auto">
@@ -189,7 +190,7 @@
                 </t>
                 <button t-if="website_forum_action and not queue_type == 'close' and posts_ids" type="button" class="o_wforum_btn_filter_tool btn btn-secondary"
                     data-bs-toggle="modal" data-bs-target="#markAllAsSpam">
-                    <i class="fa fa-bug me-1"/>Filter Tool
+                    <i class="oi me-1" data-icon="bug_report"/>Filter Tool
                 </button>
             </div>
         </t>
@@ -237,7 +238,7 @@
         </div>
         <div t-if="forum" class="o_wforum_sidebar_footer mt-3 px-3 pb-2 text-center">
             <a class="btn btn-sm btn-link" t-attf-href="/forum/#{slug(forum)}/faq">
-                <i class="fa fa-info-circle fa-fw"/> About this forum
+                <i class="oi oi-fw" data-icon="info"/> About this forum
             </a>
         </div>
     </aside>
@@ -252,7 +253,7 @@
             <t t-call="website_forum.user_sidebar_body"/>
             <div t-if="forum" class="mb-2 d-flex justify-content-center align-items-end flex-grow-1">
                 <a class="btn btn-sm btn-link" t-att-href="_forum_path + '/faq'">
-                    <i class="fa fa-info-circle fa-fw"/> About this forum
+                    <i class="oi oi-fw" data-icon="info"/> About this forum
                 </a>
             </div>
         </div>
@@ -286,42 +287,42 @@
         <t t-set="location" t-valuef="#{ _forum_path }#{ ('/tag/' + slug(tag) + '/questions') if (tag and not tags) else '' }?"/>
         <!-- All Posts -->
         <a t-attf-class="nav-link my-1 py-1 #{ 'rounded text-bg-light disabled' if request.httprequest.path ==  _forum_path and no_filters and not any([my, queue_type, tags]) else 'text-reset' }" t-att-href="location">
-            <i t-attf-class="fa fa-list fa-fw #{ 'opacity-50' if request.httprequest.path != _forum_path or my or queue_type else '' }"/> All Posts
+            <i t-attf-class="oi oi-fw #{ 'opacity-50' if request.httprequest.path != _forum_path or my or queue_type else '' }" data-icon="format_list_bulleted"/> All Posts
         </a>
         <t t-if="uid">
             <!-- My Posts -->
             <a t-attf-class="nav-link my-1 py-1 #{ 'rounded text-bg-light disabled' if my == 'mine' else 'text-reset' }" t-att-href="location + keep_query('search', 'filters', 'sorting', my='mine')">
-                <i t-attf-class="fa fa-user-circle fa-fw #{ 'opacity-50' if my != 'mine' else ''}"/> My Posts
+                <i t-attf-class="oi oi-filled oi-fw #{ 'opacity-50' if my != 'mine' else ''}" data-icon="account_circle"/> My Posts
             </a>
 
             <!-- My Favourites -->
             <a t-attf-class="nav-link my-1 py-1 #{ 'rounded text-bg-light disabled' if my == 'favourites' else 'text-reset' }" t-att-href="location + keep_query( 'search', 'filters', 'sorting', my='favourites')">
-                <i t-attf-class="fa fa-star fa-fw #{ 'opacity-50' if my != 'favourites' else ''}"/> Favourites
+                <i t-attf-class="oi oi-filled oi-fw #{ 'opacity-50' if my != 'favourites' else ''}" data-icon="star"/> Favourites
             </a>
         </t>
         <!-- People -->
         <a t-attf-class="nav-link my-1 py-1 text-reset" t-attf-href="/profile/users">
-            <i class="fa fa-users fa-fw opacity-50"/> People
+            <i class="oi oi-filled oi-fw opacity-50" data-icon="group"/> People
         </a>
 
         <!-- Badges -->
         <a t-attf-class="nav-link my-1 py-1 text-reset" t-attf-href="/profile/ranks_badges">
-            <i class="fa fa-shield fa-fw opacity-50"/> Badges
+            <i class="oi oi-fw opacity-50" data-icon="security"/> Badges
         </a>
     </div>
     <div t-if="forum and user.karma>=forum.karma_moderate" class="o_wforum_sidebar_section pt-3">
         <!-- Moderation Tools -->
         <div class="px-3 pb-1 fw-bold">Moderation tools</div>
         <a t-attf-class="nav-link my-1 py-1 #{ 'rounded text-bg-light disabled' if queue_type == 'validation' else 'text-reset'}" t-attf-href="/forum/#{_forum_slug}/validation_queue">
-            <i t-attf-class="fa fa-check-square-o fa-fw #{ 'opacity-50' if queue_type != 'validation' else ''}"/> To Validate
+            <i t-attf-class="oi oi-fw #{ 'opacity-50' if queue_type != 'validation' else ''}" data-icon="check_box"/> To Validate
             <span id="count_posts_queue_validation" t-attf-class="badge #{ 'text-bg-warning' if forum.count_posts_waiting_validation > 0 else 'd-none'}" t-out="forum.count_posts_waiting_validation"/>
         </a>
         <a t-attf-class="nav-link my-1 py-1 #{'rounded text-bg-light disabled' if queue_type == 'offensive' or queue_type == 'flagged' else 'text-reset'}" t-attf-href="/forum/#{_forum_slug}/flagged_queue">
-            <i t-attf-class="fa fa-flag fa-fw #{ 'opacity-50' if queue_type != 'flagged' else ''}"/> Flagged
+            <i t-attf-class="oi oi-filled oi-fw #{ 'opacity-50' if queue_type != 'flagged' else ''}" data-icon="flag"/> Flagged
             <span id="count_posts_queue_flagged" t-attf-class="badge #{ 'text-bg-danger' if forum.count_flagged_posts > 0 else 'd-none'}" t-out="forum.count_flagged_posts"/>
         </a>
         <a t-attf-class="nav-link my-1 py-1 #{ 'rounded text-bg-light disabled' if queue_type == 'close' else 'text-reset'}" t-attf-href="/forum/#{_forum_slug}/closed_posts">
-            <i t-attf-class="fa fa-window-close fa-fw #{ 'opacity-50' if queue_type != 'close' else '' }"/> Closed
+            <i t-attf-class="oi oi-filled oi-fw #{ 'opacity-50' if queue_type != 'close' else '' }" data-icon="cancel"/> Closed
         </a>
     </div>
     <div t-if="forum and forum.tag_most_used_ids" class="o_wforum_sidebar_section pt-3">
@@ -333,7 +334,7 @@
         <a t-foreach="forum.tag_most_used_ids" t-as="tag"
             t-attf-href="#{ _forum_path }/tag/#{ slug(tag) }/questions?#{ keep_query( 'search', 'sorting', 'my', 'filters') }"
             t-attf-class="nav-link my-1 py-1 text-reset">
-            <i class="fa fa-tag fa-fw small opacity-50"/>
+            <i class="oi oi-fw small opacity-50" data-icon="label"/>
             <t t-out="tag.name"/>
         </a>
     </div>
@@ -341,7 +342,7 @@
         <div class="px-3 pb-1 fw-bold">My forums</div>
         <t t-foreach="my_other_forums.sorted(lambda f: f.name.casefold())" t-as="my_forum">
             <a class="nav-link my-1 py-1 text-reset" t-attf-href="/forum/#{slug(my_forum)}">
-                <i class="fa fa-file-o fa-fw opacity-50"/>
+                <i class="oi oi-fw opacity-50" data-icon="description"/>
                 <t t-out="my_forum.name"/>
             </a>
         </t>
@@ -407,9 +408,9 @@
             </span>
             <span t-if="original_search">Showing results for <em class="fw-bold" t-out="search"/> instead.</span>
             <div t-if="question_count == 0 and (not forum or forum.total_posts != 0)" class="mt-3 text-start">
-                <p><i class="fa fa-check fa-fw me-1"/>Check your spelling and try again.</p>
-                <p><i class="fa fa-check fa-fw me-1"/>Try searching for one or two words.</p>
-                <p><i class="fa fa-check fa-fw me-1"/>Be less specific in your wording for a wider search result.</p>
+                <p><i class="oi oi-fw me-1" data-icon="check"/>Check your spelling and try again.</p>
+                <p><i class="oi oi-fw me-1" data-icon="check"/>Try searching for one or two words.</p>
+                <p><i class="oi oi-fw me-1" data-icon="check"/>Be less specific in your wording for a wider search result.</p>
             </div>
             <span t-elif="forum and forum.total_posts == 0">Because there are no posts in this forum yet.</span>
             <div class="mt-3">
@@ -429,7 +430,7 @@
         <h1 class="mt-4">Question not found!</h1>
         <p>Sorry, this question is not available anymore.</p>
         <p>
-            <a class="btn-link o_translate_inline" t-attf-href="/forum"><i class="oi oi-arrow-right display-inline-block"/> Return to questions list</a>
+            <a class="btn-link o_translate_inline" t-attf-href="/forum"><i class="oi display-inline-block" data-icon="east"/> Return to questions list</a>
         </p>
     </t>
 </template>
diff --git a/addons/website_forum/views/forum_forum_templates_moderation.xml b/addons/website_forum/views/forum_forum_templates_moderation.xml
index 29558ae9b6d066..d904a7c0014b88 100644
--- a/addons/website_forum/views/forum_forum_templates_moderation.xml
+++ b/addons/website_forum/views/forum_forum_templates_moderation.xml
@@ -77,13 +77,13 @@
                         <div class="me-2 text-muted">Filter by:</div>
                         <ul class="nav nav-tabs border-bottom-0" id="myTab" role="tablist">
                             <li class="nav-item">
-                                <a class="nav-link active spam_menu" id="user-tab" data-bs-toggle="tab" href="#spam_user" role="tab" aria-controls="user" aria-selected="true"><i class="fa fa-user"/> User</a>
+                                <a class="nav-link active spam_menu" id="user-tab" data-bs-toggle="tab" href="#spam_user" role="tab" aria-controls="user" aria-selected="true"><i class="oi oi-filled" data-icon="person"/> User</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link spam_menu" id="country-tab" data-bs-toggle="tab" href="#spam_country" role="tab" aria-controls="spam_country" aria-selected="false"><i class="fa fa-flag"/> Country</a>
+                                <a class="nav-link spam_menu" id="country-tab" data-bs-toggle="tab" href="#spam_country" role="tab" aria-controls="spam_country" aria-selected="false"><i class="oi oi-filled" data-icon="flag"/> Country</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link spam_menu" id="character-tab" data-bs-toggle="tab" href="#spam_character" role="tab" aria-controls="spam_character" aria-selected="false"><i class="fa fa-font"/> Text</a>
+                                <a class="nav-link spam_menu" id="character-tab" data-bs-toggle="tab" href="#spam_character" role="tab" aria-controls="spam_character" aria-selected="false"><i class="oi" data-icon="text_fields"/> Text</a>
                             </li>
                         </ul>
                         <button type="button" class="btn-close align-self-start" data-bs-dismiss="modal"></button>
@@ -171,7 +171,7 @@
                                     show_name="True"
                                     compact="True"/>
                                 <small class="text-muted">
-                                    <i class="fa fa-calendar ms-4 me-1"/><span t-field="question.write_date" t-options='{"format":"short"}'/>
+                                    <i class="oi oi-filled ms-4 me-1" data-icon="calendar_today"/><span t-field="question.write_date" t-options='{"format":"short"}'/>
                                 </small>
                             </div>
                         </div>
@@ -187,7 +187,7 @@
                                 show_name="True"
                                 compact="True"/>
                             <small class="text-muted">
-                                <i class="fa fa-calendar ms-4 me-1"/><span t-field="question.write_date" t-options='{"format":"short"}'/>
+                                <i class="oi oi-filled ms-4 me-1" data-icon="calendar_today"/><span t-field="question.write_date" t-options='{"format":"short"}'/>
                             </small>
                         </div>
                     </div>
@@ -197,14 +197,16 @@
                             <t t-if="queue_type == 'close'" t-call="website_forum.link_button"
                                 url.f="/forum/#{ slug(forum) }/question/#{ slug(question) }/reopen"
                                 label.translate="Reopen"
-                                icon.f="fa fa-folder-open"
+                                icon.f="folder_open"
+                                icon_class.f="oi-filled"
                                 karma="question.karma_close if not question.can_close else 0"
                                 form_classes.f="d-flex"
                                 classes.f="btn-outline-primary flex-grow-1"/>
                             <t t-if="queue_type == 'close'" t-call="website_forum.link_button"
                                 url.f="#{ post_url }/delete"
                                 label.translate="Delete"
-                                icon.f="fa fa-trash"
+                                icon.f="delete"
+                                icon_class.f="oi-filled"
                                 karma="question.karma_unlink if not question.can_unlink else 0"
                                 form_classes.f="d-flex"
                                 classes.f="btn-outline-danger flex-grow-1"/>
@@ -212,17 +214,17 @@
                             <form t-else="" method="POST" t-attf-action="#{ post_url }/validate" title="Validate" aria-label="Validate">
                                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                 <button type="submit" class="btn btn-outline-success w-100 flex-grow-1">
-                                    <i class="fa fa-check"/><span class="ms-2">Accept</span>
+                                    <i class="oi" data-icon="check"/><span class="ms-2">Accept</span>
                                 </button>
                             </form>
                             <form t-if="queue_type == 'validation'" method="POST" t-attf-action="#{ post_url }/refuse" title="Refuse" aria-label="Refuse">
                                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                 <button type="submit" class="btn btn-outline-danger w-100 flex-grow-1">
-                                    <i class="fa fa-times"/><span class="ms-2">Reject</span>
+                                    <i class="oi" data-icon="close"/><span class="ms-2">Reject</span>
                                 </button>
                             </form>
-                            <a t-if="queue_type == 'flagged'" t-attf-href="#{ post_url }/ask_for_mark_as_offensive" aria-label="Mark as offensive" title="Mark as offensive" class="btn btn-outline-danger flex-grow-1"><i class="fa fa-times"/><span class="ms-2">Offensive</span></a>
-                            <a t-if="queue_type == 'offensive'" href="#" disabled="disabled" aria-label="Offensive" title="Offensive" class="btn btn-outline-danger flex-grow-1"><i class="fa fa-times"/><span class="ms-2">Offensive</span></a>
+                            <a t-if="queue_type == 'flagged'" t-attf-href="#{ post_url }/ask_for_mark_as_offensive" aria-label="Mark as offensive" title="Mark as offensive" class="btn btn-outline-danger flex-grow-1"><i class="oi" data-icon="close"/><span class="ms-2">Offensive</span></a>
+                            <a t-if="queue_type == 'offensive'" href="#" disabled="disabled" aria-label="Offensive" title="Offensive" class="btn btn-outline-danger flex-grow-1"><i class="oi" data-icon="close"/><span class="ms-2">Offensive</span></a>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website_forum/views/forum_forum_templates_post.xml b/addons/website_forum/views/forum_forum_templates_post.xml
index e913a199ca0540..fe70f67de4ec24 100644
--- a/addons/website_forum/views/forum_forum_templates_post.xml
+++ b/addons/website_forum/views/forum_forum_templates_post.xml
@@ -10,12 +10,14 @@
                 title="Your favourite"
                 aria-label="Your favourite"
                 data-bs-toggle="tooltip"
-                class="fa fa-star o_wforum_gold"/>
+                class="oi oi-filled o_wforum_gold"
+                data-icon="star"/>
             <small t-if="question.message_is_follower and not (my == 'followed' or hide_fav_icon)"
                 title="You're following this post"
                 aria-label="You're following this post"
                 data-bs-toggle="tooltip"
-                class="fa fa-bell"/>
+                class="oi oi-filled"
+                data-icon="notifications"/>
             <a t-attf-href="/forum/#{slug(question.forum_id)}/#{slug(question)}#{ ('/#answer-%s' % answer.id) if answer else '' }"
                 t-attf-title="Read: #{question.name}"
                 t-attf-class="stretched-link text-body #{_link_classes}">
@@ -25,7 +27,7 @@
                   title="Solved"
                   aria-label="Solved"
                   class="badge bg-success">
-                    <i class="fa fa-check me-1"/>Solved
+                    <i class="oi me-1" data-icon="check"/>Solved
             </span>
         </div>
     </div>
@@ -65,7 +67,7 @@
                     <div t-if="not answer">Created on <span t-field="question.create_date" t-options='{"format": "d MMM yy "}'/></div>
                     <div t-if="answer">Answered on <span t-field="answer.create_date" t-options='{"format": "d MMM yy "}'/></div>
                     <div class="text-muted" title="Last Activity">
-                        <i class="fa fa-calendar me-1"/><span t-field="question.last_activity_date" t-options='{"format":"short"}'/>
+                        <i class="oi oi-filled me-1" data-icon="calendar_today"/><span t-field="question.last_activity_date" t-options='{"format":"short"}'/>
                     </div>
                 </div>
             </div>
@@ -98,11 +100,11 @@
         </td>
         <td class="o_wforum_reply_count order-3 d-flex d-lg-table-cell flex-column text-end text-lg-center">
             <a t-if="question.child_count" class="text-reset" t-attf-href="/forum/#{ slug(question.forum_id) }/#{ slug(question) }">
-                <i class="fa fa-reply me-1 d-lg-none" />
+                <i class="oi me-1 d-lg-none" data-icon="reply"/>
                 <t t-out="question.child_count"/>
             </a>
             <span t-else="" class="opacity-50">
-                <i class="fa fa-reply me-1 d-lg-none" />
+                <i class="oi me-1 d-lg-none" data-icon="reply"/>
                 0
             </span>
             <div class="d-lg-none flex-grow-1"/>
@@ -130,7 +132,7 @@
             <img t-if="uid" t-attf-class="o_wforum_avatar me-2 rounded-circle" t-att-src="request.website.image_url(user, 'avatar_128', '24x24')" alt="Avatar"/>
             <h4 class="my-0">Your Answer</h4>
         </div>
-        <button class="o_wforum_expand_toggle btn fa fa-expand ms-auto" data-bs-toggle="collapse"/>
+        <button class="o_wforum_expand_toggle btn oi ms-auto" data-icon="expand_content" data-bs-toggle="collapse"/>
     </div>
     <t t-if="request.params.get('nocontent')">
         <p class="alert alert-danger" role="alert">You cannot post an empty answer</p>
@@ -196,9 +198,9 @@
                     As a moderator you can either <b>Accept</b> or <b>Reject</b> this post.</p>
                 <div>
                     <a role="button" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/validate" type="button" class="btn btn-success">
-                        <i class="fa fa-check fa-fw me-1"/>Accept</a>
+                        <i class="oi oi-fw me-1" data-icon="check"/>Accept</a>
                     <a role="button" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/refuse" type="button" class="btn btn-danger">
-                        <i class="fa fa-times fa-fw me-1"/>Reject</a>
+                        <i class="oi oi-fw me-1" data-icon="close"/>Reject</a>
                 </div>
             </div>
             <div t-if="question.state == 'pending' and user.karma &lt; forum.karma_moderate" class="alert alert-warning mb-0 text-center" role="status" >
@@ -231,7 +233,8 @@
                     <t t-call="website_forum.link_button"
                         url="'/forum/' + slug(forum) + '/question/' + slug(question) + '/reopen'"
                         label.translate="Reopen"
-                        icon.f="fa-folder-open"
+                        icon.f="folder_open"
+                        icon_class.f="oi-filled"
                         karma="question.karma_close if not question.can_close else 0"
                         classes.f="btn-info"/>
                 </div>
@@ -258,7 +261,7 @@
                         data-bs-toggle="collapse"
                         data-bs-target=".answer_collapse"
                         href="#">
-                        <i class="fa fa-reply me-1"/>Reply
+                        <i class="oi me-1" data-icon="reply"/>Reply
                     </a>
                 </div>
                 <t t-if="question.state != 'close' and question.active != False and question.can_answer and forum">
@@ -363,7 +366,10 @@
                                 data-bs-toggle="tooltip"
                                 t-attf-data-target="#answer-#{post_id.id}"
                                 t-attf-data-href="/forum/#{ slug(question.forum_id) }/post/#{ slug(answer) }/toggle_correct">
-                                <i t-attf-class="fa fa-lg #{ 'fa-check-circle text-success' if answer.is_correct else 'fa-check-circle-o' }"/>
+                                <i
+                                    t-attf-class="oi oi-lg #{ 'oi-filled text-success' if answer.is_correct else '' }"
+                                    t-attf-data-icon="#{ 'check_circle' if answer.is_correct else 'check_circle' }"
+                                />
                             </a>
                         </t>
                     </t>
@@ -376,19 +382,19 @@
                                     data-bs-toggle="collapse" data-bs-target=".answer_collapse"
                                     href="#"
                                 >
-                                    <i class="fa fa-reply me-1"/>Reply
+                                    <i class="oi me-1" data-icon="reply"/>Reply
                                 </a>
                             </div>
                             <a t-if="user_answer" class="btn btn-sm btn-primary"
                                 t-attf-href="#answer-#{user_answer.id}"
                             >
-                                View my answer <i class="oi oi-arrow-right ms-1"/>
+                                View my answer <i class="oi ms-1" data-icon="east"/>
                             </a>
                         </t>
                         <div class="d-flex ms-auto me-2" t-if="post_id == answer and post_id.create_uid.id == uid">
                             <a class="btn btn-sm btn-outline-primary"
                                 t-attf-href="/forum/#{slug(forum)}/question/#{slug(question)}/edit_answer">
-                                <i class="fa fa-pencil"/>
+                                <i class="oi oi-filled" data-icon="edit"/>
                                 Edit<span class="d-none d-lg-inline"> your answer</span>
                             </a>
                         </div>
@@ -398,23 +404,23 @@
                                t-att-data-bs-toggle="'collapse' if post_id.can_comment else None"
                                t-attf-href="##{ _answer_comment_collapse_uid if post_id == answer else _question_comment_collapse_uid}"
                             >
-                                <i t-attf-class="fa fa-comment #{ 'karma_required' if not post_id.can_comment else ''}" title="Comment" data-bs-toggle="tooltip" data-bs-placement="top" />
+                                <i t-attf-class="oi oi-filled #{ 'karma_required' if not post_id.can_comment else ''}" data-icon="chat_bubble" title="Comment" data-bs-toggle="tooltip" data-bs-placement="top" />
                             </a>
                             <div class="dropdown">
                                 <a type="button" class="btn opacity-50 opacity-100-hover px-2" data-bs-toggle="dropdown">
-                                    <i class="fa fa-share-alt" data-bs-toggle="tooltip" data-bs-placement="top" title="Share"/>
+                                    <i class="oi" data-icon="family_history" data-bs-toggle="tooltip" data-bs-placement="top" title="Share"/>
                                 </a>
                                 <div class="dropdown-menu css_editable_mode_hidden">
                                     <div class="s_share o_no_link_popover text-center">
                                         <a href="https://www.facebook.com/sharer/sharer.php?u={url}" class="s_share_facebook" target="_blank" aria-label="Facebook">
-                                            <i class="fa fa-facebook fa-stack"/>
+                                            <i class="oi oi-stack" data-icon="oi_facebook"/>
                                         </a>
                                         <t t-set="_hashtags" t-value="(' %23' + post_type) if post_type else ''"/>
                                         <a t-attf-href="https://twitter.com/intent/tweet?text={title}#{_hashtags}&amp;url={url}" class="s_share_twitter" target="_blank" aria-label="Twitter">
-                                            <i class="fa fa-twitter fa-stack"/>
+                                            <i class="oi oi-stack" data-icon="oi_x"/>
                                         </a>
                                         <a href="https://www.linkedin.com/sharing/share-offsite/?url={url}" class="s_share_linkedin" target="_blank" aria-label="LinkedIn">
-                                            <i class="fa fa-linkedin fa-stack"/>
+                                            <i class="oi oi-stack" data-icon="oi_linkedin"/>
                                         </a>
                                     </div>
                                 </div>
@@ -436,7 +442,7 @@
 
 <template id="post_dropdown">
     <a class="btn opacity-50 opacity-100-hover px-2" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        <i class="oi oi-ellipsis-h"  data-bs-toggle="tooltip" data-bs-placement="top" title="More"/>
+        <i class="oi" data-icon="more_horiz"  data-bs-toggle="tooltip" data-bs-placement="top" title="More"/>
     </a>
     <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
         <t t-if="post_id == question">
@@ -444,52 +450,55 @@
                 url="'/forum/' + slug(forum) +'/question/' + slug(post_id) + '/reopen'"
                 label.translate="Reopen"
                 inDropdown="True"
-                icon.f="fa-undo fa-fw"
+                icon.f="undo"
                 karma="post_id.karma_close if not post_id.can_close else 0"/>
         </t>
         <t t-call="website_forum.link_button"
             url="'/forum/' + slug(forum) +'/post/' + slug(post_id) + '/edit'"
             label.translate="Edit"
             inDropdown="True"
-            icon.f="fa-pencil fa-fw"
+            icon.f="edit"
+            icon_class.f="oi-fw"
             karma="post_id.karma_edit if not post_id.can_edit else 0"/>
         <t t-if="post_id == question">
             <t t-if="post_id.state != 'close'" t-call="website_forum.link_button"
                 url="'/forum/' + slug(forum) +'/question/' + slug(post_id) + '/ask_for_close'"
                 label.translate="Close"
                 inDropdown="True"
-                icon.f="fa-times fa-fw"
+                icon.f="close"
                 karma="post_id.karma_close if not post_id.can_close else 0"/>
             <t t-if="not post_id.active and post_id.state != 'offensive'" t-call="website_forum.link_button"
                 url="'/forum/' + slug(forum) +'/question/' + slug(post_id) + '/undelete'"
                 label.translate="Undelete"
                 inDropdown="True"
-                icon.f="fa-upload fa-fw"
+                icon.f="upload"
                 karma="post_id.karma_unlink if not post_id.can_unlink else 0"/>
             <t t-if="not post_id.active and post_id.state == 'offensive'" t-call="website_forum.link_button"
                 url="'/forum/' + slug(forum) +'/post/' + slug(post_id) + '/validate'"
                 label.translate="Validate"
                 inDropdown="True"
-                icon.f="fa-check fa-fw"
+                icon.f="check"
                 karma="post_id.forum_id.karma_moderate if not post_id.can_moderate else 0"/>
         </t>
         <t t-else="" t-call="website_forum.link_button"
             url.f="/forum/#{slug(forum)}/post/#{slug(post_id)}/convert_to_comment"
             label.translate="Convert to Comment"
             inDropdown="True"
-            icon.f="fa-comment fa-fw"
+            icon.f="chat_bubble"
+            icon_class.f="oi-filled"
             karma="post_id.karma_comment_convert if not post_id.can_comment_convert else 0"/>
         <t t-if="post_id.active" t-call="website_forum.link_button"
             url="'/forum/' + slug(forum) +'/question/' + slug(post_id) + '/delete'"
             label.translate="Delete"
             inDropdown="True"
-            icon.f="fa-trash-o fa-fw"
+            icon.f="delete"
             karma="post_id.karma_unlink if not post_id.can_unlink else 0"/>
         <t t-if="post_id.active and post_id.state != 'flagged'" t-call="website_forum.link_button"
             url="'/forum/' + slug(forum) +'/post/' + slug(post_id) + '/flag'"
             label.translate="Flag"
             inDropdown="True"
-            icon="'fa-flag-o' if not post_id.can_flag else 'fa-flag'"
+            icon.f="flag"
+            icon_class="'' if not post_id.can_flag else 'oi-filled'"
             karma="post_id.forum_id.karma_flag if not post_id.can_flag else 0"
             classes.f="o_wforum_flag "
             object="post_id"/>
@@ -541,7 +550,7 @@
                 </div>
                 <div t-if="can_interact_with_post" class="dropdown ms-auto">
                     <a class="btn text-muted" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        <i class="oi oi-ellipsis-h"/>
+                        <i class="oi" data-icon="more_horiz"/>
                     </a>
                     <div class="dropdown-menu">
                         <t t-set="comment_url" t-valuef="/forum/#{ slug(forum) }/post/#{ slug(object) }/comment/#{ slug(message) }"/>
@@ -550,7 +559,8 @@
                             label.translate="Delete"
                             title.translate="Delete"
                             inDropdown="True"
-                            icon.f="fa-trash-o text-muted"
+                            icon.f="delete"
+                            icon_class.f="text-muted"
                             classes.f="comment_delete"
                             karma="unlink_comment_required_karma if not can_unlink_comment and unlink_comment_required_karma else 0"/>
                         <t t-if="message.create_uid.id not in question.child_ids.create_uid.ids">
@@ -558,7 +568,8 @@
                                 url.f="#{ comment_url }/convert_to_answer"
                                 label.translate="Convert to answer"
                                 inDropdown="True"
-                                icon.f="fa-magic text-muted"
+                                icon.f="wand_stars"
+                                icon_class.f="text-muted"
                                 karma="object.karma_comment_convert if not object.can_comment_convert else 0"/>
                         </t>
                     </div>
diff --git a/addons/website_forum/views/forum_forum_templates_tools.xml b/addons/website_forum/views/forum_forum_templates_tools.xml
index b151f14f7e9e17..55eae1f3596107 100644
--- a/addons/website_forum/views/forum_forum_templates_tools.xml
+++ b/addons/website_forum/views/forum_forum_templates_tools.xml
@@ -7,18 +7,18 @@
 
 <template id="show_flag_validator">
     <a href="#" t-att-data-post-id="object.id" t-attf-data-action="validate" t-attf-class="o_wforum_flag_validator flag_validator btn btn-success #{'' if object.state == 'flagged' else 'd-none'} my-2 me-2" title="Validate" data-bs-toggle="tooltip" data-bs-placement="top">
-        <i class="fa fa-check"/> Accept
+        <i class="oi" data-icon="check"/> Accept
     </a>
     <a href="#" t-attf-data-action="/forum/#{object.id}/ask_for_mark_as_offensive" t-attf-class="o_wforum_flag_mark_as_offensive flag_validator #{'' if object.state == 'flagged' else 'd-none'} btn btn-danger my-2 me-2" title="Mark as Offensive"  data-bs-toggle="tooltip" data-bs-placement="top">
-        <i class="fa fa-times"/> Reject
+        <i class="oi" data-icon="close"/> Reject
     </a>
 </template>
 
 <template id="link_button">
     <form t-attf-method="#{form_method or 'POST'}" t-att-action="url" t-attf-class="#{form_classes}">
         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-        <button t-if="label" t-attf-class="#{('fa ' + icon) if icon and not label else ''} #{ 'dropdown-item ps-3' if inDropdown else 'btn'} #{classes}#{ ' karma_required text-muted' if karma > 0 else ''}" t-attf-data-karma="#{karma}" t-att-title="title">
-            <i t-if="icon and label" t-attf-class="fa fa-fw #{icon} #{ 'me-1' if inDropdown else ''}"/>
+        <button t-if="label" t-attf-class="#{('oi ' + icon + icon_class) if icon and not label else ''} #{ 'dropdown-item ps-3' if inDropdown else 'btn'} #{classes}#{ ' karma_required text-muted' if karma > 0 else ''}" t-attf-data-karma="#{karma}" t-att-title="title">
+            <i t-if="icon and label" t-attf-class="oi oi-fw #{icon} #{icon_class} #{ 'me-1' if inDropdown else ''}"/>
             <t t-out="label"/>
         </button>
         <t t-if="flag_validator" t-call="website_forum.show_flag_validator"/>
@@ -110,7 +110,7 @@
             t-att-data-karma="forum.karma_upvote"
             t-att-data-can-upvote="can_upvote"
             aria-label="Upvote" title="Upvote">
-            <i class="fa fa-caret-up" data-bs-toggle="tooltip" data-bs-placement="top" title="Upvote"/>
+            <i class="oi" data-icon="arrow_drop_up" data-bs-toggle="tooltip" data-bs-placement="top" title="Upvote"/>
         </button>
         <small t-attf-class="vote_count #{ 'text-success' if own_vote == 1 else 'text-danger' if own_vote == -1 else ('text-muted opacity-75' if post.vote_count == 0 and not own_vote else '') }"
             t-out="post.vote_count"/>
@@ -120,7 +120,7 @@
             t-att-data-karma="forum.karma_downvote"
             t-att-data-can-downvote="can_downvote"
             aria-label="Downvote" title="Downvote">
-            <i class="fa fa-caret-down" data-bs-toggle="tooltip" data-bs-placement="top" title="Downvote"/>
+            <i class="oi" data-icon="arrow_drop_down" data-bs-toggle="tooltip" data-bs-placement="top" title="Downvote"/>
         </button>
         <t t-out="0"/>
     </div>
diff --git a/addons/website_forum/views/forum_forum_views.xml b/addons/website_forum/views/forum_forum_views.xml
index 6ed52a02f60b14..b3d63c5000d3fc 100644
--- a/addons/website_forum/views/forum_forum_views.xml
+++ b/addons/website_forum/views/forum_forum_views.xml
@@ -25,7 +25,7 @@
                 <form string="Forum">
                     <sheet>
                         <div class="oe_button_box" name="button_box">
-                            <button name="%(forum_post_action_forum_main)d" type="action" class="oe_stat_button" icon="fa-comments">
+                            <button name="%(forum_post_action_forum_main)d" type="action" class="oe_stat_button" icon="forum" icon_class="oi-filled">
                                 <div class="o_form_field o_stat_info">
                                     <span class="o_stat_value">
                                         <field name="total_posts" />
@@ -33,7 +33,7 @@
                                     <span class="o_stat_text">Posts</span>
                                 </div>
                             </button>
-                            <button name="%(forum_post_action_favorites)d" class="oe_stat_button" icon="fa-star" type="action">
+                            <button name="%(forum_post_action_favorites)d" class="oe_stat_button" icon="star" icon_class="oi-filled" type="action">
                                 <div class="o_form_field o_stat_info">
                                     <span class="o_stat_value">
                                         <field name="total_favorites" />
@@ -41,7 +41,7 @@
                                     <span class="o_stat_text">Favorites</span>
                                 </div>
                             </button>
-                            <button type="object" class="oe_stat_button" icon="fa-globe" name="go_to_website">
+                            <button type="object" class="oe_stat_button" icon="public" name="go_to_website">
                                 <div class="o_form_field o_stat_info">
                                     <span class="o_stat_text">Go to <br/>Website</span>
                                 </div>
diff --git a/addons/website_forum/views/forum_post_views.xml b/addons/website_forum/views/forum_post_views.xml
index ea23f57de32d2a..e3dad782232796 100644
--- a/addons/website_forum/views/forum_post_views.xml
+++ b/addons/website_forum/views/forum_post_views.xml
@@ -8,7 +8,7 @@
         <form string="Forum Post">
             <sheet>
                 <div class="oe_button_box" name="button_box">
-                    <button type="object" class="oe_stat_button" icon="fa-globe" name="go_to_website">
+                    <button type="object" class="oe_stat_button" icon="public" name="go_to_website">
                         <div class="o_form_field o_stat_info">
                             <span class="o_stat_text">Go to <br/>Website</span>
                         </div>
@@ -136,15 +136,15 @@
                 <t t-name="card">
                     <field name="name" class="text-truncate fw-bold"/>
                     <div class="text-muted text-truncate fw-bold" t-if="record.website_id.value" groups="website.group_multi_website">
-                        <i class="fa fa-globe me-1" title="Website"/>
+                        <i class="oi me-1" data-icon="public" title="Website"/>
                         <field name="website_id"/>
                     </div>
                     <div class="text-muted text-truncate fw-bold">
-                        <i class="fa fa-comments-o me-1" title="Forum"/><field name="forum_id"/>
+                        <i class="oi me-1" data-icon="forum" title="Forum"/><field name="forum_id"/>
                         <span t-if="!record.parent_id.raw_value" class="ms-3"><field name="child_count"/> Answers</span>
                     </div>
                     <div class="row">
-                        <div class="col-6 text-primary"><i class="fa fa-eye me-1" title="Views"/><field name="views"/></div>
+                        <div class="col-6 text-primary"><i class="oi me-1" data-icon="visibility" title="Views"/><field name="views"/></div>
                         <div class="col-6"><field name="create_uid" widget="many2one_avatar_user" class="float-end"/></div>
                     </div>
                 </t>
diff --git a/addons/website_forum/views/forum_templates_mail.xml b/addons/website_forum/views/forum_templates_mail.xml
index 2e34c959b68ae7..76418867a9313e 100644
--- a/addons/website_forum/views/forum_templates_mail.xml
+++ b/addons/website_forum/views/forum_templates_mail.xml
@@ -8,22 +8,22 @@
             t-att-data-unsubscribe="'unsubscribe' if 'unsubscribe' in request.params else None">
             <div t-if="icons_design and not env.user._is_public()" class="js_follow_icons_container">
                 <button t-attf-class="btn js_unfollow_btn #{btn_classes}">
-                    <i t-attf-class="fa fa-fw fa-minus-circle #{icons_classes}" data-bs-toggle="tooltip" data-bs-placement="top" title="Unfollow"/>
+                    <i t-attf-class="oi oi-fw #{icons_classes}" data-icon="remove_circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Unfollow"/>
                 </button>
                 <button t-attf-class="btn js_follow_btn #{btn_classes} #{follow_btn_classes}">
-                    <i t-attf-class="fa fa-fw fa-plus-circle #{icons_classes}" data-bs-toggle="tooltip" data-bs-placement="top" title="Follow"/>
+                    <i t-attf-class="oi oi-fw #{icons_classes}" data-icon="add_circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Follow"/>
                 </button>
             </div>
             <span t-elif="env.user._is_public() and icons_design" class="js_follow_icons_container">
                 <button t-attf-class="btn js_unfollow_btn #{btn_classes}">
-                    <i t-attf-class="fa fa-fw fa-minus-circle #{icons_classes}" data-bs-toggle="tooltip" data-bs-placement="top" title="Unfollow"/>
+                    <i t-attf-class="oi oi-fw #{icons_classes}" data-icon="remove_circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Unfollow"/>
                 </button>
                 <button t-attf-class="btn follow_btn #{btn_classes}" data-bs-toggle="modal" t-attf-data-bs-target="#o_wmail_follow_modal_#{object.id}">
-                    <i t-attf-class="fa fa-fw fa-plus-circle #{icons_classes}" data-bs-toggle="tooltip" data-bs-placement="top" title="Follow"/>
+                    <i t-attf-class="oi oi-fw #{icons_classes}" data-icon="add_circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Follow"/>
                 </button>
             </span>
             <t t-else="">
-                <button href="#" t-attf-class="btn btn-primary js_unfollow_btn #{btn_classes}"><i class="fa fa-fw fa-check me-1"/>Following</button>
+                <button href="#" t-attf-class="btn btn-primary js_unfollow_btn #{btn_classes}"><i class="oi oi-fw me-1" data-icon="check"/>Following</button>
                 <button href="#" t-attf-class="btn btn-outline-primary js_follow_btn #{btn_classes}">Follow</button>
             </t>
             <div role="dialog" class="modal fade" t-attf-id="o_wmail_follow_modal_#{object.id}" aria-hidden="True">
@@ -41,7 +41,7 @@
                                    placeholder="your email..."
                                    groups="base.group_public"/>
                             <button type="submit" href="#" t-attf-class="btn btn-primary js_follow_btn">Subscribe</button>
-                            <button href="#" t-attf-class="btn btn-secondary js_unfollow_btn"><i class="fa fa-fw fa-check me-1"/>Following</button>
+                            <button href="#" t-attf-class="btn btn-secondary js_unfollow_btn"><i class="oi oi-fw me-1" data-icon="check"/>Following</button>
                         </form>
                     </div>
                 </div>
diff --git a/addons/website_forum/views/website_profile_templates.xml b/addons/website_forum/views/website_profile_templates.xml
index 69d8fc342334a2..e36e342ead3b4f 100644
--- a/addons/website_forum/views/website_profile_templates.xml
+++ b/addons/website_forum/views/website_profile_templates.xml
@@ -16,9 +16,9 @@
                     <th><small class="fw-bold">Votes</small></th>
                     <td>
                         <span>
-                            <i class="fa fa-thumbs-up text-success" role="img" aria-label="Positive votes" title="Positive votes"/>
+                            <i class="oi oi-filled text-success" data-icon="thumb_up" role="img" aria-label="Positive votes" title="Positive votes"/>
                             <span class="fw-bold" t-out="up_votes"/>
-                            <i class="fa fa-thumbs-down text-danger ms-3" role="img" aria-label="Negative votes" title="Negative votes"/>
+                            <i class="oi oi-filled text-danger ms-3" data-icon="thumb_down" role="img" aria-label="Negative votes" title="Negative votes"/>
                             <span class="fw-bold" t-out="down_votes"/>
                         </span>
                     </td>
@@ -47,7 +47,7 @@
                             <div class="dropdown" id="o_wprofile_forum_activity_filter" role="tablist">
                                 <button class="btn btn-light dropdown-toggle" type="button" id="o_wprofile_forum_activity_filter_button"
                                         data-bs-toggle="dropdown" aria-expanded="false">
-                                    <i class="fa fa-filter"/><span class="o_wprofile_forum_activity_filter_label ms-2"/>
+                                    <i class="oi oi-filled" data-icon="filter_alt"/><span class="o_wprofile_forum_activity_filter_label ms-2"/>
                                 </button>
                                 <ul class="dropdown-menu" aria-labelledby="o_wprofile_forum_activity_filter_button">
                                     <li t-if="uid == user.id">
@@ -75,7 +75,7 @@
                                         placeholder="Search Questions..."/>
                                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                     <button type="submit" class="btn btn-light" aria-label="Search" title="Search">
-                                        <i class="oi oi-search"/>
+                                        <i class="oi" data-icon="search"/>
                                     </button>
                                 </div>
                             </form>
@@ -86,7 +86,7 @@
                                         placeholder="Search Answers..."/>
                                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                     <button type="submit" class="btn btn-light" aria-label="Search" title="Search">
-                                        <i class="oi oi-search"/>
+                                        <i class="oi" data-icon="search"/>
                                     </button>
                                 </div>
                             </form>
@@ -108,7 +108,7 @@
                                     <t t-else="">You have not posted any questions yet.</t>
                                     <br />
                                     <a href="/forum/" class="btn btn-link px-0">
-                                        <i class="oi oi-arrow-right d-inline-block"/> Go to Forums
+                                        <i class="oi d-inline-block" data-icon="east"/> Go to Forums
                                     </a>
                                 </div>
                                 <t t-else="">
@@ -117,7 +117,7 @@
                                         <t t-else="">This user hasn't posted any questions yet.</t>
                                         <br/>
                                         <a href="/forum/" class="btn btn-link px-0">
-                                            <i class="oi oi-arrow-right d-inline-block"/> Go to Forums
+                                            <i class="oi d-inline-block" data-icon="east"/> Go to Forums
                                         </a>
                                     </div>
                                 </t>
@@ -151,7 +151,7 @@
                                     <t t-else="">You have not answered any questions yet.</t>
                                     <br />
                                     <a href="/forum/" class="btn btn-link px-0">
-                                        <i class="oi oi-arrow-right d-inline-block"/> Go to Forums
+                                        <i class="oi d-inline-block" data-icon="east"/> Go to Forums
                                     </a>
                                 </div>
                                 <div t-else="" class="text-muted">
@@ -159,7 +159,7 @@
                                     <t t-else="">This user hasn't answered any questions yet.</t>
                                     <br/>
                                     <a href="/forum/" class="btn btn-link px-0">
-                                        <i class="oi oi-arrow-right d-inline-block"/> Go to Forums
+                                        <i class="oi d-inline-block" data-icon="east"/> Go to Forums
                                     </a>
                                 </div>
                             </div>
@@ -199,9 +199,9 @@
     <template id="forum_filter_tag" name="Filtering Forum Tag">
         <t t-if="forum_filtered">
             <span class="d-inline-flex align-items-center gap-2 rounded py-1 ps-2 pe-0 bg-200 small">
-                <i class="fa fa-filter text-muted"/>
+                <i class="oi oi-filled text-muted" data-icon="filter_alt"/>
                 <t t-out="forum_filtered"/>
-                <a t-attf-href="/profile/user/#{user.id}" class="oi oi-close btn m-n1 text-muted"/>
+                <a t-attf-href="/profile/user/#{user.id}" class="oi btn m-n1 text-muted" data-icon="close_small"/>
             </span>
         </t>
     </template>
@@ -234,8 +234,8 @@
     <template id="user_votes" name="Forum User Votes">
         <div t-foreach="vote_post" t-as="vote" class="card mb-2">
             <div class="card-body">
-                <span t-if="vote.vote == '1'" class="fa fa-thumbs-up text-success me-2" role="img" aria-label="Positive vote" title="Positive vote"/>
-                <span t-if="vote.vote == '-1'" class="fa fa-thumbs-down text-warning me-2" role="img" aria-label="Negative vote" title="Negative vote"/>
+                <span t-if="vote.vote == '1'" class="oi oi-filled text-success me-2" data-icon="thumb_up" role="img" aria-label="Positive vote" title="Positive vote"/>
+                <span t-if="vote.vote == '-1'" class="oi oi-filled text-warning me-2" data-icon="thumb_down" role="img" aria-label="Negative vote" title="Negative vote"/>
                 <span t-field="vote.post_id.create_date"/>
                 <a t-if="vote.post_id.parent_id" class="ms-2" t-attf-href="/forum/#{ slug(vote.post_id.forum_id) }/#{ vote.post_id.parent_id.id }/#answer-#{ vote.post_id.id }" t-out="vote.post_id.parent_id.name"/>
                 <a t-else="" class="text-black ms-2" t-attf-href="/forum/#{ slug(vote.post_id.forum_id) }/#{ vote.post_id.id }" t-out="vote.post_id.name"/>
@@ -245,7 +245,7 @@
             <div t-if="my_profile" class="text-muted">
                 Help moderating the forums by upvoting and downvoting posts. <br />
                 <a href="/forum/" class="btn-link">
-                    <i class="fa fa-arrow-right"></i> Go To Forums
+                    <i class="oi" data-icon="arrow_forward"></i> Go To Forums
                 </a>
             </div>
             <p t-else="" class="text-muted">You haven't given any votes yet.</p>
diff --git a/addons/website_hr_recruitment/data/hr_job_demo.xml b/addons/website_hr_recruitment/data/hr_job_demo.xml
index 20f5c2a9ad2a44..a4122778734d04 100644
--- a/addons/website_hr_recruitment/data/hr_job_demo.xml
+++ b/addons/website_hr_recruitment/data/hr_job_demo.xml
@@ -6,71 +6,71 @@
         <field name="website_rating" type="html">
             <!-- ratings -->
             <div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Customer Relationship</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Personal Evolution</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Autonomy</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Administrative Work</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Technical Expertise</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
@@ -168,7 +168,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-gift mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="card_giftcard" role="img"/>
                             <h3 class="h5-fs">Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
@@ -176,7 +176,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-bar-chart mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="bar_chart" role="img"/>
                             <h3 class="h5-fs">Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
@@ -184,7 +184,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-futbol-o mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="sports_soccer" role="img"/>
                             <h3 class="h5-fs">Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
@@ -192,7 +192,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-coffee mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="coffee" role="img"/>
                             <h3 class="h5-fs">Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -231,73 +231,73 @@
         <field name="website_rating" type="html">
             <!-- ratings -->
             <div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Problem-solving</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Skill Development</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Autonomy</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Client Interaction</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Management</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
@@ -391,7 +391,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-gift mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="card_giftcard" role="img"/>
                             <h3 class="h5-fs">Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
@@ -399,7 +399,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-bar-chart mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="bar_chart" role="img"/>
                             <h3 class="h5-fs">Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
@@ -407,7 +407,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-futbol-o mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="sports_soccer" role="img"/>
                             <h3 class="h5-fs">Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
@@ -415,7 +415,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-coffee mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="coffee" role="img"/>
                             <h3 class="h5-fs">Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -454,71 +454,71 @@
         <field name="website_rating" type="html">
             <!-- ratings -->
             <div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Customer Relationship</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Personal Evolution</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Innovation</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Administrative Work</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Technical Expertise</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
@@ -616,7 +616,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-gift mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="card_giftcard" role="img"/>
                             <h3 class="h5-fs">Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
@@ -624,7 +624,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-bar-chart mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="bar_chart" role="img"/>
                             <h3 class="h5-fs">Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
@@ -632,7 +632,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-futbol-o mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="sports_soccer" role="img"/>
                             <h3 class="h5-fs">Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
@@ -640,7 +640,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-coffee mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="coffee" role="img"/>
                             <h3 class="h5-fs">Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -678,71 +678,71 @@
         <field name="website_rating" type="html">
             <!-- ratings -->
             <div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Technology Strategy</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Leadership</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Collaboration</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Administrative Work</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Cybersecurity</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
@@ -853,71 +853,71 @@
         <field name="website_rating" type="html">
             <!-- ratings -->
             <div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Learning</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Adaptability</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Autonomy</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Problem-Solving</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Be enthusiastic</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
@@ -1015,7 +1015,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-gift mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="card_giftcard" role="img"/>
                             <h3 class="h5-fs">Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
@@ -1023,7 +1023,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-bar-chart mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="bar_chart" role="img"/>
                             <h3 class="h5-fs">Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
@@ -1031,7 +1031,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-futbol-o mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="sports_soccer" role="img"/>
                             <h3 class="h5-fs">Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
@@ -1039,7 +1039,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-coffee mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="coffee" role="img"/>
                             <h3 class="h5-fs">Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
@@ -1077,73 +1077,73 @@
         <field name="website_rating" type="html">
             <!-- ratings -->
             <div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Talent Acquisition</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Compliance and Regulations</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Diversity and Inclusion</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Conflict Resolution</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
-                <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+                <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
                     <strong class="s_rating_title">Technical Expertise</strong>
                     <div class="s_rating_icons o_not_editable">
                         <span class="s_rating_active_icons text-primary">
-                            <i class="fa fa-star"/>
+                            <i class="oi oi-filled" data-icon="star"/>
                         </span>
                         <span class="s_rating_inactive_icons text-primary">
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
-                            <i class="fa fa-star-o"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
+                            <i class="oi" data-icon="star"/>
                         </span>
                     </div>
                 </div>
@@ -1239,7 +1239,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-gift mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="card_giftcard" role="img"/>
                             <h3 class="h5-fs">Perks</h3>
                             <p>A full-time position <br/>Attractive salary package.</p>
                         </div>
@@ -1247,7 +1247,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-bar-chart mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="bar_chart" role="img"/>
                             <h3 class="h5-fs">Trainings</h3>
                             <p>12 days / year, including <br/>6 of your choice.</p>
                         </div>
@@ -1255,7 +1255,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-futbol-o mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="sports_soccer" role="img"/>
                             <h3 class="h5-fs">Sport Activity</h3>
                             <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                         </div>
@@ -1263,7 +1263,7 @@
                             <div class="s_hr pt-4 pb32">
                                 <hr class="w-100 mx-auto"/>
                             </div>
-                            <i class="fa fa-coffee mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                            <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="coffee" role="img"/>
                             <h3 class="h5-fs">Eat &amp; Drink</h3>
                             <p>Fruit, coffee and <br/>snacks provided.</p>
                         </div>
diff --git a/addons/website_hr_recruitment/models/hr_job.py b/addons/website_hr_recruitment/models/hr_job.py
index 4ad08f617fd1a2..8385ee630484f0 100644
--- a/addons/website_hr_recruitment/models/hr_job.py
+++ b/addons/website_hr_recruitment/models/hr_job.py
@@ -150,5 +150,5 @@ def _search_get_detail(self, website, order, options):
             'search_fields': search_fields,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-briefcase',
+            'icon': 'work',
         }
diff --git a/addons/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg b/addons/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg
deleted file mode 100644
index 3267c63cb62d38..00000000000000
Binary files a/addons/website_hr_recruitment/static/src/img/1010054_10151543538268963_186969588_n.jpg and /dev/null differ
diff --git a/addons/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg b/addons/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg
deleted file mode 100644
index 84f904bf5b8f9c..00000000000000
Binary files a/addons/website_hr_recruitment/static/src/img/1017407_10151536656083963_857938319_n.jpg and /dev/null differ
diff --git a/addons/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg b/addons/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg
deleted file mode 100644
index 932214258fa158..00000000000000
Binary files a/addons/website_hr_recruitment/static/src/img/1044326_10151536655788963_587131144_n.jpg and /dev/null differ
diff --git a/addons/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg b/addons/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg
deleted file mode 100644
index e0a4c12220cc99..00000000000000
Binary files a/addons/website_hr_recruitment/static/src/img/882207_10151545507603963_1381082528_o.jpg and /dev/null differ
diff --git a/addons/website_hr_recruitment/static/src/scss/website_hr_recruitment.scss b/addons/website_hr_recruitment/static/src/scss/website_hr_recruitment.scss
index d6fdb61c9be5e6..72eeede053f905 100644
--- a/addons/website_hr_recruitment/static/src/scss/website_hr_recruitment.scss
+++ b/addons/website_hr_recruitment/static/src/scss/website_hr_recruitment.scss
@@ -1,7 +1,7 @@
 .o_website_hr_recruitment_jobs_list {
     #jobs_grid {
         .o_job_infos {
-            .fa {
+            .oi {
                 color: theme-color('secondary');
                 margin-right: .5rem;
             }
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index ae3975dda2c2e1..19dbf2bba11cf1 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -72,11 +72,11 @@
                                                 <span t-field="job.address_id" class="fw-light" t-options='{"widget": "contact", "fields": ["city"], "no_tag_br": True, "null_text": "Remote"}'/>
                                                 <div t-if="job.department_id"
                                                         class="d-inline-flex align-items-center">
-                                                    <i class="fa fa-sitemap fa-fw"/><span t-field="job.department_id" class="fw-light" t-options='{"fields": ["name"], "no_tag_br": True}'/>
+                                                    <i class="oi oi-fw" data-icon="account_tree"/><span t-field="job.department_id" class="fw-light" t-options='{"fields": ["name"], "no_tag_br": True}'/>
                                                 </div>
                                                 <div t-if="job.employee_type_id"
                                                         class="d-inline-flex align-items-center">
-                                                    <i class="fa fa-suitcase fa-fw" title="Employment type" role="img" aria-label="Employment type"/><span t-field="job.employee_type_id" class="fw-light"/>
+                                                    <i class="oi oi-fw" data-icon="luggage" title="Employment type" role="img" aria-label="Employment type"/><span t-field="job.employee_type_id" class="fw-light"/>
                                                 </div>
                                             </div>
                                         </div>
@@ -108,7 +108,7 @@
                     <!-- Title -->
                     <span class="navbar-brand h4 my-0 me-auto">
                         <a t-attf-href="/jobs">
-                            <i class="fa fa-long-arrow-left text-primary me-2"/>All Jobs
+                            <i class="oi text-primary me-2" data-icon="west"/>All Jobs
                         </a>
                     </span>
                 </div>
@@ -268,7 +268,7 @@
                                                 <span class="s_website_form_label_content">LinkedIn Profile</span>
                                             </label>
                                             <div class="col-sm" >
-                                                <i class="fa fa-linkedin fa-2x o_linkedin_icon"></i>
+                                                <i class="oi oi-2x o_linkedin_icon" data-icon="linkedin"></i>
                                                 <input id="recruitment4" type="text"
                                                     class="form-control s_website_form_input pl64"
                                                     placeholder="e.g. https://www.linkedin.com/in/fpodoo"
@@ -345,7 +345,7 @@
                     </section>
                     <section class="col-12 col-md-3 ps-5">
                         <a role="button" t-attf-href="/jobs/#{slug(job)}" class="btn btn-outline-primary btn-lg mb16 o_apply_description_link">
-                            <i class="oi oi-arrow-left"></i> Job Description
+                            <i class="oi" data-icon="west"></i> Job Description
                         </a>
                         <div t-if="job.name" class="d-flex flex-column align-items-baseline">
                             <span class="text-muted small">Job</span>
@@ -382,71 +382,71 @@
 <template id="default_website_rating">
     <!-- ratings -->
     <div>
-        <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+        <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
             <strong class="s_rating_title">Customer Relationship</strong>
             <div class="s_rating_icons o_not_editable">
                 <span class="s_rating_active_icons text-primary">
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
                 </span>
                 <span class="s_rating_inactive_icons text-primary">
                 </span>
             </div>
         </div>
-        <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+        <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
             <strong class="s_rating_title">Personal Evolution</strong>
             <div class="s_rating_icons o_not_editable">
                 <span class="s_rating_active_icons text-primary">
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
                 </span>
                 <span class="s_rating_inactive_icons text-primary">
                 </span>
             </div>
         </div>
-        <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+        <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
             <strong class="s_rating_title">Autonomy</strong>
             <div class="s_rating_icons o_not_editable">
                 <span class="s_rating_active_icons text-primary">
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
                 </span>
                 <span class="s_rating_inactive_icons text-primary">
-                    <i class="fa fa-star-o"/>
+                    <i class="oi" data-icon="star"/>
                 </span>
             </div>
         </div>
-        <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+        <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
             <strong class="s_rating_title">Administrative Work</strong>
             <div class="s_rating_icons o_not_editable">
                 <span class="s_rating_active_icons text-primary">
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
                 </span>
                 <span class="s_rating_inactive_icons text-primary">
-                    <i class="fa fa-star-o"/>
-                    <i class="fa fa-star-o"/>
-                    <i class="fa fa-star-o"/>
+                    <i class="oi" data-icon="star"/>
+                    <i class="oi" data-icon="star"/>
+                    <i class="oi" data-icon="star"/>
                 </span>
             </div>
         </div>
-        <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
+        <div class="s_rating pb8" data-vcss="001" data-rating-icon="star" data-snippet="s_rating">
             <strong class="s_rating_title">Technical Expertise</strong>
             <div class="s_rating_icons o_not_editable">
                 <span class="s_rating_active_icons text-primary">
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
-                    <i class="fa fa-star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
+                    <i class="oi oi-filled" data-icon="star"/>
                 </span>
                 <span class="s_rating_inactive_icons text-primary">
                 </span>
@@ -545,7 +545,7 @@
                     <div class="s_hr pt-4 pb32">
                         <hr class="w-100 mx-auto"/>
                     </div>
-                    <i class="fa fa-gift mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                    <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="card_giftcard" role="img"/>
                     <h3 class="h5-fs">Perks</h3>
                     <p>A full-time position <br/>Attractive salary package.</p>
                 </div>
@@ -553,7 +553,7 @@
                     <div class="s_hr pt-4 pb32">
                         <hr class="w-100 mx-auto"/>
                     </div>
-                    <i class="fa fa-bar-chart mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                    <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="bar_chart" role="img"/>
                     <h3 class="h5-fs">Trainings</h3>
                     <p>12 days / year, including <br/>6 of your choice.</p>
                 </div>
@@ -561,7 +561,7 @@
                     <div class="s_hr pt-4 pb32">
                         <hr class="w-100 mx-auto"/>
                     </div>
-                    <i class="fa fa-futbol-o mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                    <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="sports_soccer" role="img"/>
                     <h3 class="h5-fs">Sport Activity</h3>
                     <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                 </div>
@@ -569,7 +569,7 @@
                     <div class="s_hr pt-4 pb32">
                         <hr class="w-100 mx-auto"/>
                     </div>
-                    <i class="fa fa-coffee mb-3 rounded fs-5 bg-o-color-3" role="img"/>
+                    <i class="oi mb-3 rounded fs-5 bg-o-color-3" data-icon="coffee" role="img"/>
                     <h3 class="h5-fs">Eat &amp; Drink</h3>
                     <p>Fruit, coffee and <br/>snacks provided.</p>
                 </div>
@@ -660,8 +660,8 @@
                                                     </div>
                                                     <div class="row">
                                                         <ul class="list-unstyled mb-0">
-                                                            <li t-if="job_sudo.recruiter_id.work_phone"><i class="fa fa-phone fa-fw me-2"></i><span class="o_force_ltr" t-field="job_sudo.recruiter_id.work_phone"/></li>
-                                                            <li class="d-inline-flex align-items-baseline"><i class="fa fa-envelope fa-fw me-2"></i><span><a class="text-break" t-attf-href="mailto:#{job_sudo.recruiter_id.work_email}" t-field="job_sudo.recruiter_id.work_email"/></span></li>
+                                                            <li t-if="job_sudo.recruiter_id.work_phone"><i class="oi oi-filled oi-fw me-2" data-icon="phone"></i><span class="o_force_ltr" t-field="job_sudo.recruiter_id.work_phone"/></li>
+                                                            <li class="d-inline-flex align-items-baseline"><i class="oi oi-filled oi-fw me-2" data-icon="mail"></i><span><a class="text-break" t-attf-href="mailto:#{job_sudo.recruiter_id.work_email}" t-field="job_sudo.recruiter_id.work_email"/></span></li>
                                                         </ul>
                                                     </div>
                                                 </div>
@@ -718,7 +718,7 @@
             data-bs-toggle="offcanvas"
             data-bs-target="#o_jobs_offcanvas"
         >
-            <i class="fa fa-sliders"/>
+            <i class="oi" data-icon="tune"/>
         </button>
     </div>
     <!-- Off canvas filters on mobile-->
@@ -1071,9 +1071,9 @@
                             </div>
                             <div>
                                 <ul class="list-unstyled text-nowrap">
-                                    <li><i class="fa fa-comment fa-fw me-2"></i><span><a href="/contactus">Contact us</a></span></li>
-                                    <li><i class="fa fa-envelope fa-fw me-2"></i><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
-                                    <li><i class="fa fa-phone fa-fw me-2"></i><span class="o_force_ltr"><a href="tel:+1 (650) 555-0187">+1 (650) 555-0187</a></span></li>
+                                    <li><i class="oi oi-filled oi-fw me-2" data-icon="chat_bubble"></i><span><a href="/contactus">Contact us</a></span></li>
+                                    <li><i class="oi oi-filled oi-fw me-2" data-icon="mail"></i><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
+                                    <li><i class="oi oi-filled oi-fw me-2" data-icon="phone"></i><span class="o_force_ltr"><a href="tel:+1 (650) 555-0187">+1 (650) 555-0187</a></span></li>
                                 </ul>
                                 <!-- Social media -->
                                 <t t-snippet-call="website.s_social_media"/>
diff --git a/addons/website_links/static/src/xml/recent_link.xml b/addons/website_links/static/src/xml/recent_link.xml
index b9a9e8f6d63d89..4ed48fbf5ffd61 100644
--- a/addons/website_links/static/src/xml/recent_link.xml
+++ b/addons/website_links/static/src/xml/recent_link.xml
@@ -26,7 +26,7 @@
             </div>
             <div class="col-2 d-flex align-items-start align-items-lg-center justify-content-center text-break">
                 <a role="button" target="_blank" t-att-href="url" class="btn btn-secondary">
-                    <span class="d-none d-lg-inline-block me-1">Visit Link</span><i class="fa fa-external-link"/>
+                    <span class="d-none d-lg-inline-block me-1">Visit Link</span><i class="oi" data-icon="open_in_new"/>
                 </a>
             </div>
         </a>
diff --git a/addons/website_links/views/link_tracker_views.xml b/addons/website_links/views/link_tracker_views.xml
index cb07542c8c5c02..8b4eab27db57ad 100644
--- a/addons/website_links/views/link_tracker_views.xml
+++ b/addons/website_links/views/link_tracker_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="link_tracker.link_tracker_view_tree"/>
         <field name="arch" type="xml">
             <xpath expr="//field[@name='source_id']" position="after">
-                <button name="action_visit_page_statistics" type="object" string="Statistics" icon="fa-bar-chart"/>
+                <button name="action_visit_page_statistics" type="object" string="Statistics" icon="bar_chart"/>
             </xpath>
         </field>
     </record>
diff --git a/addons/website_links/views/website_links_graphs.xml b/addons/website_links/views/website_links_graphs.xml
index fb0b9cec7aa99b..3d0c6e39a3775c 100644
--- a/addons/website_links/views/website_links_graphs.xml
+++ b/addons/website_links/views/website_links_graphs.xml
@@ -36,10 +36,10 @@
                                         <a role="button" class="o_website_links_ok_edit btn btn-sm btn-primary o_translate_inline" href="#">ok</a> or
                                         <a class="o_website_links_cancel_edit o_translate_inline" href="#">cancel</a>
                                     </span>
-                                    <a t-attf-class="#{'' if can_create_link_tracker_code else 'd-none'} o_website_links_edit_code o_translate_inline" aria-label="Edit code" title="Edit code"><span class="fa fa-pencil gray"></span></a>
-                                    <a class="copy-to-clipboard btn btn-sm btn-primary o_translate_inline" t-att-data-clipboard-text="short_url"><i class="fa fa-copy me-2"/>Copy</a>
+                                    <a t-attf-class="#{'' if can_create_link_tracker_code else 'd-none'} o_website_links_edit_code o_translate_inline" aria-label="Edit code" title="Edit code"><span class="oi oi-filled gray" data-icon="edit"></span></a>
+                                    <a class="copy-to-clipboard btn btn-sm btn-primary o_translate_inline" t-att-data-clipboard-text="short_url"><i class="oi me-2" data-icon="content_copy"/>Copy</a>
                                     <a class="download-qr-code btn btn-sm btn-primary o_translate_inline" t-attf-href="/report/barcode/QR/#{quote_plus(short_url)}?width=500&amp;height=500&amp;download=1">
-                                        <i class="fa fa-qrcode align-middle me-2"/>Download QR Code
+                                        <i class="oi align-middle me-2" data-icon="qr_code"/>Download QR Code
                                     </a>
                                 </p>
                                 <p class='o_website_links_code_error' style='color:red;font-weight:bold'></p>
@@ -54,7 +54,7 @@
                                 <p class="truncate_text" t-att-title="redirected_url">
                                     <t t-out="redirected_url"/>
                                 </p>
-                                <a class="copy-to-clipboard btn btn-sm btn-primary" t-att-data-clipboard-text="redirected_url"><i class="fa fa-copy me-2"/>Copy</a>
+                                <a class="copy-to-clipboard btn btn-sm btn-primary" t-att-data-clipboard-text="redirected_url"><i class="oi me-2" data-icon="content_copy"/>Copy</a>
                             </div>
                         </div>
                         <div t-if="campaign_id" class="row">
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index a99480a1a21e99..3e00ad6ee62048 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -53,9 +53,9 @@
                                             <a role="button" class="o_website_links_ok_edit btn btn-sm btn-primary o_translate_inline" href="#">ok</a> or
                                             <a class="o_website_links_cancel_edit o_translate_inline" href="#">cancel</a>
                                         </span>
-                                        <a t-attf-class="#{'' if can_create_link_tracker_code else 'd-none'} o_website_links_edit_code o_translate_inline" aria-label="Edit code" title="Edit code"><i class="fa fa-pencil gray"/></a>
-                                        <a class="copy-to-clipboard btn btn-success text-nowrap o_translate_inline"><i class="fa fa-copy me-2"/>Copy</a>
-                                        <a class="download-qr-code btn btn-info text-nowrap o_translate_inline"><i class="fa fa-qrcode align-middle me-2"/>Download QR Code</a>
+                                        <a t-attf-class="#{'' if can_create_link_tracker_code else 'd-none'} o_website_links_edit_code o_translate_inline" aria-label="Edit code" title="Edit code"><i class="oi oi-filled gray" data-icon="edit"/></a>
+                                        <a class="copy-to-clipboard btn btn-success text-nowrap o_translate_inline"><i class="oi me-2" data-icon="content_copy"/>Copy</a>
+                                        <a class="download-qr-code btn btn-info text-nowrap o_translate_inline"><i class="oi align-middle me-2" data-icon="qr_code"/>Download QR Code</a>
                                     </p>
                                 </div>
                                 <div class="offset-md-3 col-md-9 px-2">
diff --git a/addons/website_livechat/static/src/core/web/livechat_channel_info_list_patch.xml b/addons/website_livechat/static/src/core/web/livechat_channel_info_list_patch.xml
index e698203756f8d0..c77db72a97275b 100644
--- a/addons/website_livechat/static/src/core/web/livechat_channel_info_list_patch.xml
+++ b/addons/website_livechat/static/src/core/web/livechat_channel_info_list_patch.xml
@@ -6,7 +6,7 @@
             <div t-if="visitor?.pageVisitHistoryText" class="d-flex flex-column bg-inherit gap-1">
                 <h6 class="pt-3">Recent page views</h6>
                 <div t-if="visitor.website_id">
-                    <i class="me-1 fa fa-globe" aria-label="Website"/>
+                    <i class="me-1 oi" data-icon="public" aria-label="Website"/>
                     <span t-out="visitor.website_id.name"/>
                 </div>
                 <span t-out="visitor.pageVisitHistoryText"/>
@@ -27,7 +27,7 @@
                         }"
                     >
                         <div class="d-flex align-items-center">
-                            <i class="fa fa-external-link me-2 o-mt-0_5 opacity-75"/>
+                            <i class="oi me-2 o-mt-0_5 opacity-75" data-icon="open_in_new"/>
                             <span>
                                 <t t-if="channel.livechat_end_dt" t-out="this.CLOSED_ON_TEXT(channel)"/>
                                 <t t-else="">Conversation ongoing</t>
diff --git a/addons/website_livechat/views/website_visitor_views.xml b/addons/website_livechat/views/website_visitor_views.xml
index 6f6991f5d5d542..59c5526576bc68 100644
--- a/addons/website_livechat/views/website_visitor_views.xml
+++ b/addons/website_livechat/views/website_visitor_views.xml
@@ -74,7 +74,7 @@
                 </group>
             </xpath>
             <xpath expr="//div[hasclass('oe_button_box')]" position="inside">
-                <button name="%(website_visitor_livechat_session_action)d" type="action" class="oe_stat_button" icon="fa-comment"
+                <button name="%(website_visitor_livechat_session_action)d" type="action" class="oe_stat_button" icon="chat_bubble" icon_class="oi-filled"
                         invisible="session_count == 0">
                     <field name="session_count" widget="statinfo" string="Chats"/>
                 </button>
@@ -90,7 +90,7 @@
             <xpath expr="//field[@name='last_visited_page_id']" position="after">
                 <field name="current_livechat_agent_ids" optional="hide"
                        options="{'no_open': True}" widget="many2many_avatar_user"/>
-                <button name="action_send_chat_request" string="Chat" type="object" icon="fa-comments"
+                <button name="action_send_chat_request" string="Chat" type="object" icon="forum" icon_class="oi-filled"
                         invisible="current_livechat_agent_ids or not is_connected"/>
             </xpath>
         </field>
diff --git a/addons/website_mail/static/src/css/website_mail.scss b/addons/website_mail/static/src/css/website_mail.scss
index 59794e915a8df3..891b5e5e542d01 100644
--- a/addons/website_mail/static/src/css/website_mail.scss
+++ b/addons/website_mail/static/src/css/website_mail.scss
@@ -25,20 +25,24 @@
         }
     }
 
-    .fa:before {
-        content: "\f0f3";
+    .oi:before {
+        --o-mi-fill: 1;
+
+        content: "notifications";
     }
 
-    .js_follow_btn:hover .fa:before {
+    .js_follow_btn:hover .oi:before {
         color: $body-color;
     }
 
-    .js_unfollow_btn .fa:before {
+    .js_unfollow_btn .oi:before {
         color: $primary;
     }
 
-    .js_unfollow_btn:hover .fa:before {
-        content: "\f1f6";
+    .js_unfollow_btn:hover .oi:before {
+        --o-mi-fill: 1
+
+        content: "notifications_off";
         color: $danger;
     }
 }
diff --git a/addons/website_mail/views/website_mail_templates.xml b/addons/website_mail/views/website_mail_templates.xml
index 550530b0a9e2e6..e4c4c4c992b6a9 100644
--- a/addons/website_mail/views/website_mail_templates.xml
+++ b/addons/website_mail/views/website_mail_templates.xml
@@ -13,12 +13,12 @@
             <div t-if="icons_design and not env.user._is_public()" class="js_follow_icons_container">
                 <button class="btn text-reset js_unfollow_btn">
                     <div class="d-flex align-items-center">
-                        <small>Unfollow</small><i class="fa fa-fw ms-1"/>
+                        <small>Unfollow</small><i class="oi oi-fw ms-1"/>
                     </div>
                 </button>
                 <button class="btn text-reset js_follow_btn">
                     <div class="d-flex align-items-center">
-                        <small>Follow</small><i class="fa fa-fw ms-1"/>
+                        <small>Follow</small><i class="oi oi-fw ms-1"/>
                     </div>
                 </button>
             </div>
diff --git a/addons/website_mail_group/views/mail_group_views.xml b/addons/website_mail_group/views/mail_group_views.xml
index 625ef2896f7ee4..d84ca380d49d63 100644
--- a/addons/website_mail_group/views/mail_group_views.xml
+++ b/addons/website_mail_group/views/mail_group_views.xml
@@ -7,7 +7,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[hasclass('oe_button_box')]" position="inside">
                 <button type="object" class="oe_stat_button" name="action_go_to_website">
-                    <i class="fa fa-fw o_button_icon fa-globe text-success" title="Mail group accessible on website"/>
+                    <i class="o_button_icon oi oi-fw text-success" data-icon="public" title="Mail group accessible on website"/>
                     <div class="o_form_field o_stat_info">
                         <span class="o_stat_text">Go to <br/>Website</span>
                     </div>
diff --git a/addons/website_mass_mailing/views/snippets/s_newsletter_benefits_popup.xml b/addons/website_mass_mailing/views/snippets/s_newsletter_benefits_popup.xml
index cc6cd1fc25d0f8..ad9cbb2796f1e8 100644
--- a/addons/website_mass_mailing/views/snippets/s_newsletter_benefits_popup.xml
+++ b/addons/website_mass_mailing/views/snippets/s_newsletter_benefits_popup.xml
@@ -19,9 +19,9 @@
                                 <div class="col-lg-6 pt24 pb24">
                                     <h2 class="h3-fs">Stay Ahead with weekly insights &amp; updates</h2>
                                     <p class="lead">Join our mailing list to receive carefully curated resources, tips, and updates straight to your inbox.</p>
-                                    <p><i class="fa fa-check text-o-color-1" role="img"/>  Curated Industry Insights</p>
-                                    <p><i class="fa fa-check text-o-color-1" role="img"/>  Expert Tips &amp; How-Tos</p>
-                                    <p><i class="fa fa-check text-o-color-1" role="img"/>  Guides &amp; Resources</p>
+                                    <p><i class="oi text-o-color-1" data-icon="check" role="img"/>  Curated Industry Insights</p>
+                                    <p><i class="oi text-o-color-1" data-icon="check" role="img"/>  Expert Tips &amp; How-Tos</p>
+                                    <p><i class="oi text-o-color-1" data-icon="check" role="img"/>  Guides &amp; Resources</p>
                                     <t t-set="thank_you_message">
                                         <p class="h6-fs text-success">Thanks for registering!</p>
                                     </t>
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index c3f9ad0edbbdec..b63652c8cb0954 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -49,7 +49,7 @@ database, without the s_newsletter_list class. See fixNewsletterListClass.
     <div t-attf-class="s_newsletter_subscribe_form s_newsletter_list js_subscribe #{_contentClasses}" data-vxml="001" data-list-id="0" data-name="Newsletter Form">
         <div class="js_subscribed_wrap d-none">
             <t t-if="thank_you_message" t-out="thank_you_message"/>
-            <p t-else="" class="h4-fs text-center text-success"><i class="fa fa-check-circle-o" role="img"/> Thanks for registering!</p>
+            <p t-else="" class="h4-fs text-center text-success"><i class="oi" data-icon="check_circle" role="img"/> Thanks for registering!</p>
         </div>
         <div class="js_subscribe_wrap">
             <div t-attf-class="{{_wrap_classes or 'input-group'}}">
@@ -142,7 +142,7 @@ database, without the s_newsletter_list class. See fixNewsletterListClass.
                     <h2 class="h1-fs">Subscribe to our newsletter</h2>
                     <p class="lead">Be the first to find out all the latest new, products and trends.</p>
                     <t t-set="thank_you_message">
-                        <p class="h5-fs mt-4 text-success"><i class="fa fa-check-circle-o" role="img"/> Thanks for registering!</p>
+                        <p class="h5-fs mt-4 text-success"><i class="oi" data-icon="check_circle" role="img"/> Thanks for registering!</p>
                     </t>
                     <t t-snippet-call="website_mass_mailing.s_newsletter_subscribe_form"
                         thank_you_message="thank_you_message"
@@ -248,7 +248,7 @@ database, without the s_newsletter_list class. See fixNewsletterListClass.
                 <div class="oe_structure">
                     <section class="s_text_block pt64 pb64 o_colored_level o_cc o_cc2 text-center" data-snippet="s_text_block">
                         <div class="container">
-                            <i class="fa fa-paper-plane fa-2x mb-3 rounded-circle text-bg-success" role="presentation"/>
+                            <i class="oi oi-filled oi-2x mb-3 rounded-circle text-bg-success" data-icon="send" role="presentation"/>
                             <h1 class="fw-bolder">Thank you for subscribing!</h1>
                             <p class="lead">You will now be informed about the latest news.</p>
                         </div>
@@ -351,7 +351,7 @@ database, without the s_newsletter_list class. See fixNewsletterListClass.
                             <div class="oe_structure">
                                 <section class="s_text_block border rounded pt40 pb40 text-center" data-snippet="s_text_block">
                                     <div class="container">
-                                        <i class="fa fa-paper-plane mb-3 rounded-circle text-bg-success" role="presentation"/>
+                                        <i class="oi oi-filled mb-3 rounded-circle text-bg-success" data-icon="send" role="presentation"/>
                                         <h2 class="h4">Thank you for subscribing!</h2>
                                         <p class="text-muted">You will now be informed about the latest news.</p>
                                     </div>
diff --git a/addons/website_mass_mailing_sms/views/snippets/snippets_templates.xml b/addons/website_mass_mailing_sms/views/snippets/snippets_templates.xml
index 1cf87560db2ca8..7b963be40c022d 100644
--- a/addons/website_mass_mailing_sms/views/snippets/snippets_templates.xml
+++ b/addons/website_mass_mailing_sms/views/snippets/snippets_templates.xml
@@ -42,7 +42,7 @@
                     <h2 class="h3-fs" style="text-align: center;">Stay in the Loop !<br/>Get the latest updates</h2>
                     <p style="text-align: center;">Be the first to find out all the latest new, products and trends.</p>
                     <t t-set="thank_you_message">
-                        <p class="h6-fs d-flex flex-column mt-4 text-center text-success"><i class="fa fa-check-circle-o fa-lg" role="img"/> Thanks for registering!</p>
+                        <p class="h6-fs d-flex flex-column mt-4 text-center text-success"><i class="oi oi-lg" data-icon="check_circle" role="img"/> Thanks for registering!</p>
                     </t>
                     <t t-snippet-call="website_mass_mailing_sms.s_newsletter_subscribe_form"
                         thank_you_message="thank_you_message"
diff --git a/addons/website_partnership/views/res_config_settings_views.xml b/addons/website_partnership/views/res_config_settings_views.xml
index bf68cd6c39048a..067909cebd03d1 100644
--- a/addons/website_partnership/views/res_config_settings_views.xml
+++ b/addons/website_partnership/views/res_config_settings_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <xpath expr="//setting[@id='website_partnership_settings']" position="inside">
                 <a class="oe_link fw-bold" href="/partners" target="_blank" invisible="not module_website_partnership">
-                    <i class="oi oi-arrow-right"/>
+                    <i class="oi" data-icon="east"/>
                     Edit Page
                 </a>
             </xpath>
diff --git a/addons/website_partnership/views/website_partnership_templates.xml b/addons/website_partnership/views/website_partnership_templates.xml
index 2734eaab637a9f..bc70f6f01049d2 100644
--- a/addons/website_partnership/views/website_partnership_templates.xml
+++ b/addons/website_partnership/views/website_partnership_templates.xml
@@ -130,7 +130,7 @@
     <xpath expr="//div" position="before">
         <t t-set="contact_details" t-value="False"/>
         <div t-if="not edit_page" class="mt-4 mb-3">
-            <a id="link_back_to_partners" t-attf-href="/partners#{ current_grade and '/grade/%s' % slug(current_grade) or '' }" aria-label="Back to partners list"><i class="oi oi-chevron-left me-2"/>Back</a>
+            <a id="link_back_to_partners" t-attf-href="/partners#{ current_grade and '/grade/%s' % slug(current_grade) or '' }" aria-label="Back to partners list"><i class="oi me-2" data-icon="chevron_backward"/>Back</a>
         </div>
     </xpath>
 
@@ -148,14 +148,14 @@
                 <div id="search_input_group" class="input-group" role="search">
                     <input id="search_input_text" type="text" name="search" class="search-query form-control border-0 bg-light" placeholder="Search" t-att-value="searches.get('search', '')"/>
                     <button type="submit" aria-label="Search" title="Search" class="oe_search_button btn btn-light">
-                        <i class="oi oi-search"/>
+                        <i class="oi" data-icon="search"/>
                     </button>
                 </div>
             </form>
             <button class="btn btn-light position-relative ms-2 d-lg-none"
                 data-bs-toggle="offcanvas"
                 data-bs-target="#o_wcrm_offcanvas">
-                <i class="fa fa-sliders"/>
+                <i class="oi" data-icon="tune"/>
             </button>
         </div>
     </xpath>
diff --git a/addons/website_payment/static/src/website_builder/supported_payment_methods_option_plugin.js b/addons/website_payment/static/src/website_builder/supported_payment_methods_option_plugin.js
index 7c7b645d1305c2..0221ba94fcfe87 100644
--- a/addons/website_payment/static/src/website_builder/supported_payment_methods_option_plugin.js
+++ b/addons/website_payment/static/src/website_builder/supported_payment_methods_option_plugin.js
@@ -23,7 +23,8 @@ export class SupportedPaymentMethodsOptionPlugin extends Plugin {
             return [];
         }
         return [{
-            class: 'fa fa-fw fa-rotate-right btn btn-outline-info',
+            class: 'btn btn-outline-info oi oi-fw',
+            icon: 'redo',
             title: _t("Reload the payment methods"),
             // Force the interaction to call the server again in case the user made backend changes.
             handler: () => this.dependencies.edit_interaction.restartInteractions(editingElement),
diff --git a/addons/website_payment/views/res_config_settings_views.xml b/addons/website_payment/views/res_config_settings_views.xml
index cefe436aa4db37..f21fd4dde6b8f6 100644
--- a/addons/website_payment/views/res_config_settings_views.xml
+++ b/addons/website_payment/views/res_config_settings_views.xml
@@ -113,7 +113,7 @@
                                     type="action"
                                     name="%(payment.action_payment_provider)d"
                                     class="btn btn-link oe_inline"
-                                    icon="oi-arrow-right"
+                                    icon="east"
                                 />
                             </div>
                             <div invisible="not active_provider_id">
@@ -135,7 +135,7 @@
                                     type="action"
                                     name="%(payment.action_payment_provider)d"
                                     class="btn btn-link"
-                                    icon="oi-arrow-right"
+                                    icon="east"
                                 />
                             </div>
                         </div>
diff --git a/addons/website_profile/static/src/components/profile_dialog/profile_dialog.xml b/addons/website_profile/static/src/components/profile_dialog/profile_dialog.xml
index 12a55e7fda7e58..c3609dded25257 100644
--- a/addons/website_profile/static/src/components/profile_dialog/profile_dialog.xml
+++ b/addons/website_profile/static/src/components/profile_dialog/profile_dialog.xml
@@ -12,13 +12,13 @@
                                 <FileUploader onUploaded.bind="this.onUploadProfileImg" acceptedFileExtensions="'image/*'">
                                     <t t-set-slot="toggler">
                                         <button href="#" title="Edit" aria-label="Edit" class="btn btn-primary">
-                                            <i class="fa fa-pencil fa-1g float-sm-none float-md-start"/>
+                                            <i class="oi oi-filled float-sm-none float-md-start" data-icon="edit"/>
                                         </button>
                                     </t>
                                     <t t-slot="default"/>
                                 </FileUploader>
                                 <button href="#" title="Clear" aria-label="Clear" class="btn border-primary" t-on-click="this.onClearProfileImg">
-                                    <i class="fa fa-trash-o float-sm-none float-md-end"></i>
+                                    <i class="oi float-sm-none float-md-end" data-icon="delete"></i>
                                 </button>
                             </div>
                             <div class="my-3 mb-0 pt-2 border-top" t-if="this.isEditingMyProfile">
diff --git a/addons/website_profile/views/gamification_badge_views.xml b/addons/website_profile/views/gamification_badge_views.xml
index f7b3b087f0e83a..93704c8e853691 100644
--- a/addons/website_profile/views/gamification_badge_views.xml
+++ b/addons/website_profile/views/gamification_badge_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="gamification.badge_form_view"/>
         <field name="arch" type="xml">
         	<xpath expr="//div[@name='button_box']" position="inside">
-                <button name="website_publish_button" type="object" class="oe_stat_button" icon="fa-globe">
+                <button name="website_publish_button" type="object" class="oe_stat_button" icon="public">
                     <field name="is_published" widget="website_publish_button"/>
                 </button>
             </xpath>
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 488d355d96af48..d278947c19ffbf 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -8,7 +8,7 @@
                     <!-- Desktop Mode -->
                     <div t-if="url_from" class="o_wprofile_all_users_nav_btn_container col pe-0 flex-grow-0 d-none d-md-flex">
                         <a t-att-href="url_from" class="o_wprofile_all_users_nav_btn btn text-nowrap">
-                            <i class="oi oi-chevron-left small"/> <t t-out="url_from_label"/>
+                            <i class="oi small" data-icon="chevron_backward"/> <t t-out="url_from_label"/>
                         </a>
                     </div>
                     <nav aria-label="breadcrumb" class="col d-none d-md-flex">
@@ -27,7 +27,7 @@
                         <form t-attf-action="/profile/users" role="search" method="get">
                             <div class="input-group o_wprofile_course_nav_search ms-1 position-relative">
                                 <button class="btn btn-link text-white border-1 rounded-0 pe-1 me-2" type="submit" aria-label="Search" title="Search">
-                                    <i class="fa fa-search border-1"></i>
+                                    <i class="oi border-1" data-icon="search"></i>
                                 </button>
                                 <input type="text" class="form-control border-0 rounded-0 bg-transparent text-white ms-auto" name="search" placeholder="Search users"/>
                                 <input type="hidden" name="group_by" t-att-value="group_by"/>
@@ -40,7 +40,7 @@
                         <div class="btn-group d-flex justify-content-between gap-1" role="group" aria-label="Mobile sub-nav">
                             <div t-if="url_from" class="btn-group">
                                 <a t-att-href="url_from" class="btn bg-black-25 text-white">
-                                    <i class="oi oi-chevron-left small"/>
+                                    <i class="oi small" data-icon="chevron_backward"/>
                                 </a>
                             </div>
 
@@ -55,13 +55,13 @@
                             </div>
 
                             <div class="btn-group">
-                                <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-search"></i></a>
+                                <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="oi" data-icon="search"></i></a>
                                 <div class="dropdown-menu dropdown-menu-end w-100">
                                     <form class="px-3" t-attf-action="/profile/users" role="search" method="get">
                                         <div class="input-group">
                                             <input type="text" class="form-control" name="search" placeholder="Search users"/>
                                             <button class="btn btn-primary" type="submit" aria-label="Search" title="Search">
-                                                <i class="fa fa-search"/>
+                                                <i class="oi" data-icon="search"/>
                                             </button>
                                         </div>
                                     </form>
@@ -103,7 +103,7 @@
                             <a class="btn btn-primary d-inline-block d-md-none"
                                 t-if="env.user == user and user.karma != 0"
                                 data-bs-toggle="modal" data-bs-target="#o_wprofile_edit_profile_modal">
-                                <i class="fa fa-pencil me-1"/>EDIT
+                                <i class="oi oi-filled me-1" data-icon="edit"/>EDIT
                             </a>
                         </div>
                     </div>
@@ -116,20 +116,20 @@
                             </h1>
                             <a class="btn o_wprofile_editor btn-primary d-none d-md-inline-block" t-if="(env.user == user and user.karma != 0) or env.user._is_admin()"
                                 t-att-data-user-id="user.id" t-att-data-can-edit-country="'true' if user.partner_id._can_edit_country() else None">
-                                <i class="fa fa-pencil me-2"/>EDIT PROFILE
+                                <i class="oi oi-filled me-2" data-icon="edit"/>EDIT PROFILE
                             </a>
                         </div>
 
                         <div class="d-flex flex-column justify-content-center flex-grow-1 mb-0 mb-md-5">
                             <div t-if="user.partner_id.parent_name" class="lead mb-2">
-                                <i class="fa fa-building-o fa-fw me-1"/><span t-field="user.partner_id.parent_name"/>
+                                <i class="oi oi-fw me-1" data-icon="business"/><span t-field="user.partner_id.parent_name"/>
                             </div>
                             <div t-if="user.city or user.country_id" class="lead mb-2">
-                                <i class="fa fa-map-marker fa-fw me-1"/>
+                                <i class="oi oi-fw me-1" data-icon="location_on"/>
                                 <span t-field="user.city"/><span class="text-nowrap ms-1" t-if="user.country_id">(<span t-field="user.country_id"/>)</span>
                             </div>
                             <div t-if="user.website" class="lead mb-2">
-                                <i class="fa fa-globe fa-fw me-1"/><span t-field="user.website"/>
+                                <i class="oi oi-fw me-1" data-icon="public"/><span t-field="user.website"/>
                             </div>
                         </div>
                     </div>
@@ -197,7 +197,7 @@
                                 <t t-if="env.user == user and user.karma != 0 or env.user._is_admin()">
                                     <a href="#" class="o_wprofile_editor btn btn-link float-end"
                                         t-att-data-user-id="user.id" t-att-data-can-edit-country="'true' if user.partner_id._can_edit_country() else None" data-focus-website-description="true">
-                                        <i class="fa fa-pencil me-1"/>Edit
+                                        <i class="oi oi-filled me-1" data-icon="edit"/>Edit
                                     </a>
                                 </t>
                                 <h5 class="border-bottom pb-1">Biography</h5>
@@ -290,18 +290,18 @@
          <div class="mb-3" t-elif="env.user == user">
             Badges are your collection of achievements. Wear them proudly! <br />
             <a t-if="not user.badge_ids and badge_category" t-attf-href="/profile/ranks_badges?badge_category=#{badge_category}"
-            class="btn-link"><i class="fa fa-arrow-right"/> Get Badges</a>
+            class="btn-link"><i class="oi" data-icon="arrow_forward"/> Get Badges</a>
             <a t-else="" t-attf-href="/profile/ranks_badges"
-            class="btn-link"><i class="fa fa-arrow-right"/> Get Badges</a>
+            class="btn-link"><i class="oi" data-icon="arrow_forward"/> Get Badges</a>
         </div>
         <div t-else="" class="mb-3 d-inline-block">
             <p class="text-muted">No badges yet!</p>
         </div>
         <div t-if="env.user.id != user.id" class="text-end d-inline-block pull-right">
             <a t-if="not user.badge_ids and badge_category" t-attf-href="/profile/ranks_badges?badge_category=#{badge_category}"
-            class="btn-link btn-sm"><i class="oi oi-arrow-right"/> All Badges</a>
+            class="btn-link btn-sm"><i class="oi" data-icon="east"/> All Badges</a>
             <a t-else="" t-attf-href="/profile/ranks_badges"
-            class="btn-link btn-sm"><i class="oi oi-arrow-right me-1"/>All Badges</a>
+            class="btn-link btn-sm"><i class="oi me-1" data-icon="east"/>All Badges</a>
         </div>
     </template>
 
@@ -535,19 +535,19 @@
     <template id="pager_nobox" name="Pager (not box display)">
         <ul t-if="pager['page_count'] > 1" t-attf-class="o_wprofile_pager fw-bold pagination m-0">
             <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
-                <a t-att-href=" pager['page_first']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-step-backward"/></a>
+                <a t-att-href=" pager['page_first']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="oi" data-icon="skip_previous"/></a>
             </li>
             <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
-                <a t-att-href=" pager['page_previous']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-caret-left"/></a>
+                <a t-att-href=" pager['page_previous']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="oi" data-icon="arrow_left"/></a>
             </li>
             <t t-foreach="pager['pages']" t-as="page">
                 <li t-attf-class="page-item #{'active disabled bg-primary rounded-circle' if page['num'] == pager['page']['num'] else ''}"> <a t-att-href="page['url']" class="page-link" t-out="page['num']"/></li>
             </t>
             <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == pager['page_count'] else ''}">
-                <a t-att-href="pager['page_next']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="fa fa-caret-right"/></a>
+                <a t-att-href="pager['page_next']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="oi" data-icon="arrow_right"/></a>
             </li>
             <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == pager['page_count'] else ''}">
-                <a t-att-href=" pager['page_last']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="fa fa-step-forward"/></a>
+                <a t-att-href=" pager['page_last']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="oi" data-icon="skip_next"/></a>
             </li>
         </ul>
     </template>
diff --git a/addons/website_project/views/project_portal_project_task_template.xml b/addons/website_project/views/project_portal_project_task_template.xml
index be05f3ec922e7a..0512b366db8a27 100644
--- a/addons/website_project/views/project_portal_project_task_template.xml
+++ b/addons/website_project/views/project_portal_project_task_template.xml
@@ -8,7 +8,7 @@
                         <t t-if="request.session.get('form_builder_model_model', '') == 'project.task'">
                             <t t-set="task" t-value="request.website._website_form_last_record()"/>
                         </t>
-                        <i class="fa fa-paper-plane fa-2x mb-3 rounded-circle text-bg-success" role="presentation"/>
+                        <i class="oi oi-filled oi-2x mb-3 rounded-circle text-bg-success" data-icon="send" role="presentation"/>
                         <h1 class="fw-bolder">Thank you!</h1>
                         <t t-if="task">
                             <p class="lead mb-0">Your task has been sent.</p>
diff --git a/addons/website_sale/models/product_public_category.py b/addons/website_sale/models/product_public_category.py
index a8474780bd2614..237dca9c5ed6d7 100644
--- a/addons/website_sale/models/product_public_category.py
+++ b/addons/website_sale/models/product_public_category.py
@@ -194,7 +194,7 @@ def _search_get_detail(self, website, order, options):  # noqa: PLR6301
             "search_fields": search_fields,
             "fetch_fields": fetch_fields,
             "mapping": mapping,
-            "icon": "fa-folder-o",
+            "icon": "folder",
             "order": "name desc, id desc" if "name desc" in order else "name asc, id desc",
         }
 
diff --git a/addons/website_sale/models/product_template.py b/addons/website_sale/models/product_template.py
index 3702b80440e3d6..9780b73cba036d 100644
--- a/addons/website_sale/models/product_template.py
+++ b/addons/website_sale/models/product_template.py
@@ -937,7 +937,7 @@ def _search_get_detail(self, website, _order, options):
             "search_fields": search_fields,
             "fetch_fields": fetch_fields,
             "mapping": mapping,
-            "icon": "fa-shopping-cart",
+            "icon": "shopping_cart",
         }
 
     def _search_render_results(self, fetch_fields, mapping, icon, limit):
diff --git a/addons/website_sale/static/src/interactions/add_to_wishlist.js b/addons/website_sale/static/src/interactions/add_to_wishlist.js
index 430cf97fd2e3cb..9cf5f6806c9017 100644
--- a/addons/website_sale/static/src/interactions/add_to_wishlist.js
+++ b/addons/website_sale/static/src/interactions/add_to_wishlist.js
@@ -38,10 +38,9 @@ export class AddToWishlist extends Interaction {
         wishlistUtils.updateWishlistNavBar();
         button.disabled = true;
         if (button.classList.contains('o_add_wishlist')) {
-            const iconEl = button.querySelector('.fa');
+            const iconEl = button.querySelector('.oi');
             if (iconEl) {
-                iconEl.classList.remove('fa-heart-o');
-                iconEl.classList.add('fa-heart');
+                iconEl.classList.add('oi-filled');
             }
         }
     }
diff --git a/addons/website_sale/static/src/interactions/checkout.js b/addons/website_sale/static/src/interactions/checkout.js
index 90a5a3d7cf5251..8e0bba0157768a 100644
--- a/addons/website_sale/static/src/interactions/checkout.js
+++ b/addons/website_sale/static/src/interactions/checkout.js
@@ -607,7 +607,8 @@ export class Checkout extends Interaction {
      */
     _createLoadingElement() {
         const loadingElement = document.createElement('i');
-        loadingElement.classList.add('fa', 'fa-circle-o-notch', 'fa-spin', 'center');
+        loadingElement.classList.add('oi', 'oi-spin', 'center');
+        loadingElement.dataset.icon = "autorenew";
         return loadingElement;
     }
 
diff --git a/addons/website_sale/static/src/js/cart_notification/warning_notification/warning_notification.xml b/addons/website_sale/static/src/js/cart_notification/warning_notification/warning_notification.xml
index 332d441caf5d9a..69c2b98fbc11c3 100644
--- a/addons/website_sale/static/src/js/cart_notification/warning_notification/warning_notification.xml
+++ b/addons/website_sale/static/src/js/cart_notification/warning_notification/warning_notification.xml
@@ -9,7 +9,7 @@
             aria-atomic="true"
         >
             <div class="toast-body">
-                <i class="fa fa-warning pe-2"/>
+                <i class="oi pe-2" data-icon="warning"/>
                 <t t-out="this.props.warning_message"/>
             </div>
         </div>
diff --git a/addons/website_sale/static/src/js/combo_configurator_dialog/combo_configurator_dialog.xml b/addons/website_sale/static/src/js/combo_configurator_dialog/combo_configurator_dialog.xml
index 3bcb4062341042..40f879f55064be 100644
--- a/addons/website_sale/static/src/js/combo_configurator_dialog/combo_configurator_dialog.xml
+++ b/addons/website_sale/static/src/js/combo_configurator_dialog/combo_configurator_dialog.xml
@@ -24,7 +24,7 @@
                 t-on-click="() => this.confirm({goToCart: false})"
                 t-att-disabled="!this.areAllCombosSelected"
             >
-                <i class="fa fa-shopping-cart me-2"/>
+                <i class="oi me-2" data-icon="shopping_cart"/>
                 Add to Cart
             </button>
             <button
@@ -35,7 +35,7 @@
                 t-att-disabled="!this.areAllCombosSelected"
             >
                 Go to Checkout
-                <i class="fa fa-angle-right ms-2"/>
+                <i class="oi ms-2" data-icon="keyboard_arrow_right"/>
             </button>
         </button>
     </t>
diff --git a/addons/website_sale/static/src/js/date_filter_button/date_filter_button.xml b/addons/website_sale/static/src/js/date_filter_button/date_filter_button.xml
index 34fc81efb86d4f..2302b3bac69a19 100644
--- a/addons/website_sale/static/src/js/date_filter_button/date_filter_button.xml
+++ b/addons/website_sale/static/src/js/date_filter_button/date_filter_button.xml
@@ -3,9 +3,9 @@
     <t t-name="website_sale.DateFilterButton">
         <Dropdown position="'bottom-end'">
             <button class="border-0 bg-transparent fw-normal">
-                <i class="fa fa-calendar-o me-2"/>
+                <i class="oi me-2" data-icon="calendar_today"/>
                 <span t-out="this.props.selectedDateFilter.label"/>
-                <i class="fa fa-caret-down ms-2"/>
+                <i class="oi ms-2" data-icon="arrow_drop_down"/>
             </button>
             <t t-set-slot="content">
                 <t t-foreach="this.dateFilters" t-as="filter" t-key="filter.id">
diff --git a/addons/website_sale/static/src/js/product/product.xml b/addons/website_sale/static/src/js/product/product.xml
index 24e6033c96529c..845fc2c0d2e3a4 100644
--- a/addons/website_sale/static/src/js/product/product.xml
+++ b/addons/website_sale/static/src/js/product/product.xml
@@ -43,7 +43,7 @@
             t-if="!this.props.can_be_sold"
             class="text-muted fst-italic"
         >
-            <i class="fa fa-times me-1"/>
+            <i class="oi me-1" data-icon="close"/>
             Not available for sale
         </div>
     </t>
diff --git a/addons/website_sale/static/src/js/product_comparison_bottom_bar/product_comparison_bottom_bar.xml b/addons/website_sale/static/src/js/product_comparison_bottom_bar/product_comparison_bottom_bar.xml
index 88aa5e23afd2f6..2eb9a01827780f 100644
--- a/addons/website_sale/static/src/js/product_comparison_bottom_bar/product_comparison_bottom_bar.xml
+++ b/addons/website_sale/static/src/js/product_comparison_bottom_bar/product_comparison_bottom_bar.xml
@@ -30,7 +30,7 @@
                             aria-controls="comparisonCollapse"
                             aria-label="Show products added to comparison"
                         >
-                            <i class="oi oi-chevron-up" role="presentation"/>
+                            <i class="oi" data-icon="keyboard_arrow_up" role="presentation"/>
                         </button>
                         <ul class="list-unstyled d-none d-xl-flex flex-grow-1 flex-shrink-1 gap-3 overflow-hidden me-auto mb-0">
                             <li
diff --git a/addons/website_sale/static/src/js/product_configurator_dialog/product_configurator_dialog.scss b/addons/website_sale/static/src/js/product_configurator_dialog/product_configurator_dialog.scss
index 5e815840d25e58..7e6d50871b7d7c 100644
--- a/addons/website_sale/static/src/js/product_configurator_dialog/product_configurator_dialog.scss
+++ b/addons/website_sale/static/src/js/product_configurator_dialog/product_configurator_dialog.scss
@@ -1,7 +1,7 @@
 .o_sale_product_configurator_dialog {
     --product-configurator-img-size-lg: 6rem;
 
-    .modal-header .btn.oi-arrow-left {
+    .modal-header .btn[data-icon="west"] {
         padding-left: 0;
     }
 
diff --git a/addons/website_sale/static/src/js/product_configurator_dialog/product_configurator_dialog.xml b/addons/website_sale/static/src/js/product_configurator_dialog/product_configurator_dialog.xml
index 91ba4fb5ee98c8..7db3760b429154 100644
--- a/addons/website_sale/static/src/js/product_configurator_dialog/product_configurator_dialog.xml
+++ b/addons/website_sale/static/src/js/product_configurator_dialog/product_configurator_dialog.xml
@@ -27,7 +27,7 @@
                     t-on-click="() => this.onConfirm({goToCart: false})"
                     t-att-disabled="!this.isPossibleConfiguration() || !this.canBeSold()"
                 >
-                    <i class="fa fa-shopping-cart"/>
+                    <i class="oi" data-icon="shopping_cart"/>
                     Add to cart
                 </button>
                 <button
@@ -37,7 +37,7 @@
                     t-att-disabled="!this.isPossibleConfiguration() || !this.canBeSold()"
                 >
                     Go to Checkout
-                    <i class="fa fa-angle-right ms-2"/>
+                    <i class="oi ms-2" data-icon="keyboard_arrow_right"/>
                 </button>
             </div>
         </button>
diff --git a/addons/website_sale/static/src/js/product_row/product_row.xml b/addons/website_sale/static/src/js/product_row/product_row.xml
index 03826e83f93fd1..6bc8c0b80ebf82 100644
--- a/addons/website_sale/static/src/js/product_row/product_row.xml
+++ b/addons/website_sale/static/src/js/product_row/product_row.xml
@@ -31,7 +31,7 @@
                 class="btn btn-sm btn-light ms-auto rounded-circle p-2 lh-1"
                 aria-label="Remove product from comparison"
             >
-                <i class="oi oi-close"/>
+                <i class="oi" data-icon="close"/>
             </button>
         </div>
     </t>
diff --git a/addons/website_sale/static/src/js/tours/tour_utils.js b/addons/website_sale/static/src/js/tours/tour_utils.js
index 7ac5a15f075766..3a8f81785f403c 100644
--- a/addons/website_sale/static/src/js/tours/tour_utils.js
+++ b/addons/website_sale/static/src/js/tours/tour_utils.js
@@ -23,7 +23,7 @@ export function goToProductPage({
 export function increaseProductPageQuantity() {
     return {
         content: "Increase product quantity",
-        trigger: '.css_quantity button:has(i.oi-plus)',
+        trigger: '.css_quantity button:has(i[data-icon="add"])',
         run: "click",
     }
 }
diff --git a/addons/website_sale/static/src/scss/product_tile.scss b/addons/website_sale/static/src/scss/product_tile.scss
index 256dc49177e102..0738b66c4da54b 100644
--- a/addons/website_sale/static/src/scss/product_tile.scss
+++ b/addons/website_sale/static/src/scss/product_tile.scss
@@ -280,7 +280,7 @@
         --WebsiteRating__star-color: currentColor;
         display: var(--o-wsale-card-rating-display, none);
 
-        .fa-star-o, small.text-muted {
+        [data-icon="star"]:not(.oi-filled), small.text-muted {
             opacity: 0.5;
         }
         small.text-muted {
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 5db0671f91ea2f..2226df18bdf822 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -1728,14 +1728,13 @@ $-product-radius-map: (
 .o_product_page_reviews_title {
     .oi {
         @include font-size(1.4rem);
-
         &:before {
-            content: "\e809";
+            content: "add";
         }
     }
     &:not(.collapsed) {
         .oi:before {
-            content: "\e80b";
+            content: "remove";
         }
     }
 }
diff --git a/addons/website_sale/static/src/scss/website_sale_comparison.scss b/addons/website_sale/static/src/scss/website_sale_comparison.scss
index 0245a13a4243f2..187b77af4a9262 100644
--- a/addons/website_sale/static/src/scss/website_sale_comparison.scss
+++ b/addons/website_sale/static/src/scss/website_sale_comparison.scss
@@ -104,10 +104,10 @@
     box-shadow: 0px -12px 32px rgba($black, .175);
 
     .btn[data-bs-toggle="collapse"] {
-        .oi-chevron-up {
+        [data-icon="keyboard_arrow_up"] {
             transition: transform 0.2s ease-in-out;
         }
-        &[aria-expanded="true"] .oi-chevron-up {
+        &[aria-expanded="true"] [data-icon="keyboard_arrow_up"] {
             transform: rotate(180deg);
         }
     }
diff --git a/addons/website_sale/static/src/scss/website_sale_wishlist.options.scss b/addons/website_sale/static/src/scss/website_sale_wishlist.options.scss
index 9dc2bc8b4ae30e..2491e226fa3d0e 100644
--- a/addons/website_sale/static/src/scss/website_sale_wishlist.options.scss
+++ b/addons/website_sale/static/src/scss/website_sale_wishlist.options.scss
@@ -10,12 +10,13 @@
     --o-wsale-wishlist-btn-display: inline-flex;
 
     .o_add_wishlist {
-        &:hover .fa-heart-o:before, &[disabled] .fa:before {
-            content: "\f004";
+        &:hover [data-icon="favorite"]:before, &[disabled] .oi:before {
+            --o-mi-fill: 1;
+
             color: var(--addWishlist-color-active);
         }
 
-        &[disabled] .fa {
+        &[disabled] .oi {
             animation: bounceIn 1s;
         }
     }
diff --git a/addons/website_sale/static/src/scss/website_sale_wishlist.scss b/addons/website_sale/static/src/scss/website_sale_wishlist.scss
index 1ab7009f9b3d45..280974cdfc44b1 100644
--- a/addons/website_sale/static/src/scss/website_sale_wishlist.scss
+++ b/addons/website_sale/static/src/scss/website_sale_wishlist.scss
@@ -9,7 +9,7 @@
 
     .o_add_wishlist_dyn {
         &.disabled i::before {
-            content: "\f004";
+            --o-mi-fill: 1;
         }
 
         &.btn-lg {
diff --git a/addons/website_sale/static/src/website_builder/add_to_cart_option.js b/addons/website_sale/static/src/website_builder/add_to_cart_option.js
index 044295edf48d23..0bde069312972c 100644
--- a/addons/website_sale/static/src/website_builder/add_to_cart_option.js
+++ b/addons/website_sale/static/src/website_builder/add_to_cart_option.js
@@ -4,8 +4,8 @@ import { _t } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 
 export const addToCartValues = {
-    addToCart: { action: "add_to_cart", icon: "fa-cart-plus", label: _t("Add to Cart") },
-    buyNow: { action: "buy_now", icon: "fa-credit-card", label: _t("Buy Now") },
+    addToCart: { action: "add_to_cart", icon: "add_shopping_cart", label: _t("Add to Cart") },
+    buyNow: { action: "buy_now", icon: "credit_card", label: _t("Buy Now") },
 };
 
 export class AddToCartOption extends BaseOptionComponent {
diff --git a/addons/website_sale/static/src/website_builder/add_to_cart_option_plugin.js b/addons/website_sale/static/src/website_builder/add_to_cart_option_plugin.js
index 4bb3c80a8ac528..06883d24654a54 100644
--- a/addons/website_sale/static/src/website_builder/add_to_cart_option_plugin.js
+++ b/addons/website_sale/static/src/website_builder/add_to_cart_option_plugin.js
@@ -114,19 +114,20 @@ export class AddToCartActionAction extends BuilderAction {
     static id = "addToCartAction";
     static dependencies = ["builderActions"];
     apply({ editingElement, params: { action, icon, label } }) {
-        const classAction = this.dependencies.builderActions.getAction("classAction");
+        const classAction = this.dependencies.builderActions.getAction("dataAttributeAction");
         editingElement.dataset.action = action;
         const buttonEl = editingElement.querySelector(".s_add_to_cart_btn");
         buttonEl.dataset.action = action;
         const iconEl = buttonEl.querySelector("i");
         classAction.apply({
             editingElement: iconEl,
-            params: { mainParam: icon },
+            params: { mainParam: "icon" },
+            value: icon
         });
         buttonEl.lastChild.textContent = label;
     }
     clean({ editingElement, params: { icon } }) {
-        const classAction = this.dependencies.builderActions.getAction("classAction");
+        const classAction = this.dependencies.builderActions.getAction("dataAttributeAction");
 
         delete editingElement.dataset.action;
         const buttonEl = editingElement.querySelector(".s_add_to_cart_btn");
@@ -134,7 +135,7 @@ export class AddToCartActionAction extends BuilderAction {
         const iconEl = buttonEl.querySelector("i");
         classAction.clean({
             editingElement: iconEl,
-            params: { mainParam: icon },
+            params: { mainParam: "icon" },
         });
     }
     isApplied({ editingElement, params: { action } }) {
diff --git a/addons/website_sale/static/src/website_builder/dynamic_snippet_category_options.xml b/addons/website_sale/static/src/website_builder/dynamic_snippet_category_options.xml
index c682a7c9980e23..63edf0636269aa 100644
--- a/addons/website_sale/static/src/website_builder/dynamic_snippet_category_options.xml
+++ b/addons/website_sale/static/src/website_builder/dynamic_snippet_category_options.xml
@@ -26,13 +26,13 @@
             <BuilderRow label.translate="Alignment">
                 <BuilderButtonGroup dataAttributeAction="'alignment'">
                     <BuilderButton dataAttributeActionValue="'left'">
-                        <i class="fa fa-fw fa-align-left"/>
+                        <i class="oi oi-fw" data-icon="format_align_left"/>
                     </BuilderButton>
                     <BuilderButton dataAttributeActionValue="'center'">
-                        <i class="fa fa-fw fa-align-center"/>
+                        <i class="oi oi-fw" data-icon="format_align_center"/>
                     </BuilderButton>
                     <BuilderButton dataAttributeActionValue="'right'">
-                        <i class="fa fa-fw fa-align-right"/>
+                        <i class="oi oi-fw" data-icon="format_align_right"/>
                     </BuilderButton>
                 </BuilderButtonGroup>
             </BuilderRow>
diff --git a/addons/website_sale/static/src/website_builder/product_image_option.xml b/addons/website_sale/static/src/website_builder/product_image_option.xml
index a583304b38d35c..79c44b208fc1d0 100644
--- a/addons/website_sale/static/src/website_builder/product_image_option.xml
+++ b/addons/website_sale/static/src/website_builder/product_image_option.xml
@@ -20,19 +20,19 @@
     <BuilderRow label.translate="Re-order">
         <BuilderButtonGroup preview="false" action="'setPosition'">
             <BuilderButton ltrRtlMapping="'first-last'" isLabelLinkedToContent="true"
-                icon="'fa-angle-double-left'"
+                icon="'keyboard_double_arrow_left'"
                 title.translate="Move to first"
                 actionValue="'first'"/>
             <BuilderButton ltrRtlMapping="'prev-next'" isLabelLinkedToContent="true"
-                icon="'fa-angle-left'"
+                icon="'keyboard_arrow_left'"
                 title.translate="Move to previous"
                 actionValue="'left'"/>
             <BuilderButton ltrRtlMapping="'prev-next'" isLabelLinkedToContent="true"
-                icon="'fa-angle-right'"
+                icon="'keyboard_arrow_right'"
                 title.translate="Move to next"
                 actionValue="'right'"/>
             <BuilderButton ltrRtlMapping="'first-last'" isLabelLinkedToContent="true"
-                icon="'fa-angle-double-right'"
+                icon="'keyboard_double_arrow_right'"
                 title.translate="Move to last"
                 actionValue="'last'"/>
         </BuilderButtonGroup>
diff --git a/addons/website_sale/static/src/website_builder/product_page_option.xml b/addons/website_sale/static/src/website_builder/product_page_option.xml
index e32544f6cc5a59..23b6e6049f4cb1 100644
--- a/addons/website_sale/static/src/website_builder/product_page_option.xml
+++ b/addons/website_sale/static/src/website_builder/product_page_option.xml
@@ -96,13 +96,15 @@
                 title.translate="Image on the left"
                 actionParam="{ previewClass: '' }"
                 actionValue="'regular'"
-                iconImg="'/website/static/src/img/snippets_options/image_left.svg'"
+                icon="'format_image_left'"
+                iconClass="'oi-filled'"
             />
             <BuilderButton ltrRtlMapping="'left-right'"
                 title.translate="Image on the right"
                 actionParam="{ previewClass: 'flex-lg-row-reverse' }"
                 actionValue="'inverse'"
-                iconImg="'/website/static/src/img/snippets_options/image_right.svg'"
+                icon="'format_image_right'"
+                iconClass="'oi-flip-horizontal oi-filled'"
             />
         </BuilderButtonGroup>
     </BuilderRow>
@@ -136,7 +138,7 @@
                 </BuilderSelectItem>
 	            <BuilderSelectItem actionValue="'grid'">
                     <div class="d-flex align-items-center gap-2">
-                        <i class="oi oi-apps"/>Grid
+                        <i class="oi" data-icon="apps"/>Grid
                     </div>
                 </BuilderSelectItem>
 	        </BuilderSelect>
@@ -153,13 +155,15 @@
                 <t t-set="right">Right</t>
                 <BuilderButton t-if="isSameLangDir"
                     title="this.env.langDir.builder === 'ltr' ? left : right"
-                    icon="'fa-fw fa-long-arrow-left'"
+                    iconClass="'oi-fw'"
+                    icon="'west'"
                     actionParam="{ views: ['website_sale.carousel_product_indicators_left'] }"
                 />
-                <BuilderButton icon="'fa-fw fa-long-arrow-down'" actionParam="{ views: ['website_sale.carousel_product_indicators_bottom'] }" title.translate="Bottom"/>
+                <BuilderButton icon="'south'" iconClass="'oi-fw'" actionParam="{ views: ['website_sale.carousel_product_indicators_bottom'] }" title.translate="Bottom"/>
                 <BuilderButton t-if="!isSameLangDir"
                     title="this.env.langDir.builder === 'ltr' ? right : left"
-                    icon="'fa-fw fa-long-arrow-right'"
+                    icon="'east'"
+                    iconClass="'oi-fw'"
                     actionParam="{ views: ['website_sale.carousel_product_indicators_left'] }"
                 />
 	        </BuilderButtonGroup>
@@ -366,7 +370,7 @@
             action="'websiteConfig'"
             actionParam="{ views: ['website_sale.product_buy_now'] }"
         >
-            <i class="fa fa-fw fa-bolt"/>
+            <i class="oi oi-fw" data-icon="flash_on"/>
             Buy Now
         </BuilderButton>
         <BuilderButton title.translate="Select Quantity" className="'o_we_buy_now_btn'"
@@ -381,14 +385,14 @@
             action="'websiteConfig'"
             actionParam="{views:['website_sale.product_add_to_compare']}"
         >
-            <i class="fa fa-fw fa-exchange"/>
+            <i class="oi oi-fw" data-icon="swap_horiz"/>
             Compare
         </BuilderButton>
         <BuilderButton title.translate="Wishlist"
             action="'websiteConfig'"
             actionParam="{views:['website_sale.product_add_to_wishlist']}"
         >
-            <i class="fa fa-fw fa-heart"/>
+            <i class="oi oi-fw oi-filled" data-icon="favorite"/>
             Wishlist
         </BuilderButton>
     </BuilderRow>
diff --git a/addons/website_sale/static/src/website_builder/product_ribbon_options.xml b/addons/website_sale/static/src/website_builder/product_ribbon_options.xml
index ea931b74ee5fc8..415768bc7aa6eb 100644
--- a/addons/website_sale/static/src/website_builder/product_ribbon_options.xml
+++ b/addons/website_sale/static/src/website_builder/product_ribbon_options.xml
@@ -15,7 +15,7 @@
                     <BuilderSelectItem actionValue="ribbon.id" label="ribbon.name">
                         <div>
                             <t t-out="ribbon.name" />
-                            <span t-attf-class="fa fa-arrow-#{ribbon.position} ms-1"/>
+                            <span class="oi ms-1" t-attf-data-icon="#{ribbon.position === 'left' ? 'arrow_back' : 'arrow_forward'}"/>
                             <span
                                 t-attf-class="o_wsale_color_preview ms-1"
                                 t-attf-style="background-color: #{ribbon.bg_color}; border: {{(ribbon.bg_color == '#FFFFFF' || ribbon.bg_color == '') ? '2px solid #CCCCCC' : ''}};"
@@ -32,13 +32,15 @@
                 t-if="!this.isActiveItem('no_ribbon_opt')"
                 t-on-click="() => this.state.ribbonEditMode = !this.state.ribbonEditMode"
                 title.translate="Edit"
-                className="'fa fa-edit'"
+                icon="'edit'"
+                iconClass="'oi-filled'"
             />
             <BuilderButton
                 t-if="!this.state.ribbonEditMode"
                 title.translate="Create"
                 action="'createRibbon'"
-                className="'fa fa-plus text-success border-0'"
+                icon="'add'"
+                className="'text-success border-0'"
                 style="'background-color: transparent !important;'"
                 preview="false"
                 t-on-click="() => this.state.ribbonEditMode = true"
diff --git a/addons/website_sale/static/src/website_builder/products_design_panel.xml b/addons/website_sale/static/src/website_builder/products_design_panel.xml
index 54d0a9790eef1f..2f793b9e4caf83 100644
--- a/addons/website_sale/static/src/website_builder/products_design_panel.xml
+++ b/addons/website_sale/static/src/website_builder/products_design_panel.xml
@@ -153,7 +153,7 @@
                 >
                     <i
                         class="oi me-2"
-                        t-att-class="style.type == 'catalog' ? 'oi-apps' : 'oi-view-list'"
+                        t-att-data-icon="style.type == 'catalog' ? 'apps' : 'view_list'"
                     />
                     <span t-out="style.label"/>
                 </div>
@@ -185,7 +185,7 @@
                         <div t-else="" class="d-flex align-items-center ps-1">
                             <i
                                 class="oi me-2"
-                                t-att-class="style.type == 'catalog' ? 'oi-apps' : 'oi-view-list'"
+                                t-att-data-icon="style.type == 'catalog' ? 'apps' : 'view_list'"
                             />
                             <t t-out="style.label"/>
                         </div>
@@ -202,7 +202,8 @@
         </t>
         <BuilderSlidingPanel
             label.translate="Design"
-            extraClasses="'btn-primary fa fa-paint-brush'"
+            extraClasses="'btn-primary oi'"
+            icon="'design_services'"
             openByDefault="this.props.openByDefault"
         >
             <t t-set-slot="content">
@@ -579,14 +580,14 @@
                 >
                     <BuilderButton
                         title.translate="Add to Cart"
-                        icon="'fa-shopping-cart'"
+                        icon="'shopping_cart'"
                         classAction="'o_wsale_products_opt_has_cta'"
                         id="'wsale_products_opt_add_to_cart'"
                     />
                     <BuilderButton
                         t-if="this.props.recordName === 'shop_opt_products_design_classes'"
                         title.translate="Compare"
-                        icon="'fa-exchange'"
+                        icon="'swap_horiz'"
                         classAction="'o_wsale_products_opt_has_comparison'"
                     />
                     <span/><!-- Spacer -->
@@ -623,7 +624,8 @@
                 >
                     <BuilderButton
                         title.translate="Wishlist"
-                        icon="'fa-heart'"
+                        icon="'favorite'"
+                        iconClass="'oi-filled'"
                         classAction="'o_wsale_products_opt_has_wishlist'"
                     />
                     <BuilderSelect t-if="isOnHoverAvailable">
@@ -665,7 +667,7 @@
                             classAction="'o_wsale_products_opt_actions_promote'">
                             <div class="d-flex align-items-center">
                                 <span class="me-1">Promote</span>
-                                <i class="fa fa-shopping-cart ms-2"/>
+                                <i class="oi ms-2" data-icon="shopping_cart"/>
                             </div>
                         </BuilderSelectItem>
                         <BuilderSelectItem
diff --git a/addons/website_sale/static/src/website_builder/products_item_option.xml b/addons/website_sale/static/src/website_builder/products_item_option.xml
index d99ad3da884df0..28b68d70e180eb 100644
--- a/addons/website_sale/static/src/website_builder/products_item_option.xml
+++ b/addons/website_sale/static/src/website_builder/products_item_option.xml
@@ -23,19 +23,23 @@
                 <BuilderButton ltrRtlMapping="'top-bottom'" isLabelLinkedToContent="true"
                     actionValue="'top'"
                     title.translate="Push to top"
-                    icon="'fa-fw fa-angle-double-left'" />
+                    icon="'keyboard_double_arrow_left'"
+                    iconClass="'oi-fw'" />
                 <BuilderButton ltrRtlMapping="'up-down'" isLabelLinkedToContent="true"
                     actionValue="'up'"
                     title.translate="Push up"
-                    icon="'fa-fw fa-angle-left'" />
+                    icon="'keyboard_arrow_left'"
+                    iconClass="'oi-fw'" />
                 <BuilderButton ltrRtlMapping="'up-down'" isLabelLinkedToContent="true"
                     actionValue="'down'"
                     title.translate="Push down"
-                    icon="'fa-fw fa-angle-right'" />
+                    icon="'keyboard_arrow_right'"
+                    iconClass="'oi-fw'" />
                 <BuilderButton ltrRtlMapping="'top-bottom'" isLabelLinkedToContent="true"
                     actionValue="'bottom'"
                     title.translate="Push to bottom"
-                    icon="'fa-fw fa-angle-double-right'" />
+                    icon="'keyboard_double_arrow_right'"
+                    iconClass="'oi-fw'" />
             </BuilderButtonGroup>
         </BuilderRow>
     </t>
diff --git a/addons/website_sale/static/src/website_builder/website_sale_show_empty_option.xml b/addons/website_sale/static/src/website_builder/website_sale_show_empty_option.xml
index f82f24639ea3cb..a3ee3815f621c0 100644
--- a/addons/website_sale/static/src/website_builder/website_sale_show_empty_option.xml
+++ b/addons/website_sale/static/src/website_builder/website_sale_show_empty_option.xml
@@ -10,14 +10,15 @@
             >
                 <BuilderButton
                     title.translate="Shopping Cart"
-                    icon="'fa-shopping-cart'"
+                    icon="'shopping_cart'"
                     className="'o_btn_show_empty_cart flex-grow-1'"
                     actionParam="{ views: ['!website_sale.header_hide_empty_cart_link'] }"
                 />
 
                 <BuilderButton
                     title.translate="Wishlist"
-                    icon="'fa-heart'"
+                    icon="'favorite'"
+                    iconClass="'oi-filled'"
                     className="'flex-grow-1'"
                     actionParam="{views: ['!website_sale.header_hide_empty_wishlist_link']}"
                 />
diff --git a/addons/website_sale/static/src/xml/website_sale_editor_previews.xml b/addons/website_sale/static/src/xml/website_sale_editor_previews.xml
index 63a47dbef64166..4eab455115e4f3 100644
--- a/addons/website_sale/static/src/xml/website_sale_editor_previews.xml
+++ b/addons/website_sale/static/src/xml/website_sale_editor_previews.xml
@@ -12,7 +12,7 @@
                 t-key="category_placeholder"
                 t-attf-class="d-flex align-items-center gap-3 btn btn-light mb-2 me-3"
             >
-                <i class="fa fa-image fs-2 opacity-25" role="img"/>
+                <i class="oi fs-2 opacity-25" data-icon="image" role="img"/>
                 <div class="placeholder opacity-25" t-att-style="`width: ${(this.c % 3) + 4}rem`"/>
             </div>
         </div>
diff --git a/addons/website_sale/static/src/xml/website_sale_image_viewer.xml b/addons/website_sale/static/src/xml/website_sale_image_viewer.xml
index 005e3df5abe446..e663c8b6cde523 100644
--- a/addons/website_sale/static/src/xml/website_sale_image_viewer.xml
+++ b/addons/website_sale/static/src/xml/website_sale_image_viewer.xml
@@ -8,7 +8,7 @@
                     <div class="o_wsale_image_viewer_header d-flex w-100 text-white">
                         <div class="flex-grow-1"/>
                         <div class="d-flex align-items-center mb-0 px-3 h4 text-reset cursor-pointer">
-                            <span class="fa fa-times" t-on-click="this.data.close"/>
+                            <span class="oi" data-icon="close" t-on-click="this.data.close"/>
                         </div>
                     </div>
                     <!-- Content -->
@@ -60,7 +60,8 @@
                                 role="button"
                             >
                                 <i
-                                    class="oi oi-chevron-left border bg-white text-900"
+                                    class="oi border bg-white text-900"
+                                    data-icon="chevron_backward"
                                     role="img"
                                     aria-label="Previous"
                                     title="Previous"
@@ -75,7 +76,8 @@
                                 role="button"
                             >
                                 <i
-                                    class="oi oi-chevron-right border bg-white text-900"
+                                    class="oi border bg-white text-900"
+                                    data-icon="chevron_forward"
                                     role="img"
                                     aria-label="Next"
                                     title="Next"
diff --git a/addons/website_sale/static/tests/interactions/carousel_product.test.js b/addons/website_sale/static/tests/interactions/carousel_product.test.js
index c0450a230a8bf7..1ce8cfc72157b3 100644
--- a/addons/website_sale/static/tests/interactions/carousel_product.test.js
+++ b/addons/website_sale/static/tests/interactions/carousel_product.test.js
@@ -64,10 +64,10 @@ test("scroll miniatures", async () => {
                         </div>
                     </div>
                     <a class="carousel-control-prev" href="#o-carousel-product" role="button" data-bs-slide="prev">
-                        <i class="oi oi-chevron-left oe_unmovable border bg-white text-900" role="img" aria-label="Previous" title="Previous"></i>
+                        <i class="oi oe_unmovable border bg-white text-900" data-icon="chevron_backward" role="img" aria-label="Previous" title="Previous"></i>
                     </a>
                     <a class="carousel-control-next" href="#o-carousel-product" role="button" data-bs-slide="next">
-                        <i class="oi oi-chevron-right oe_unmovable border bg-white text-900" role="img" aria-label="Next" title="Next"></i>
+                        <i class="oi oe_unmovable border bg-white text-900" data-icon="chevron_forward" role="img" aria-label="Next" title="Next"></i>
                     </a>
                 </div>
                 <div class="o_carousel_product_indicators pt-2 overflow-hidden">
diff --git a/addons/website_sale/static/tests/tours/product_page_zoom.js b/addons/website_sale/static/tests/tours/product_page_zoom.js
index 6e63349afbb4f5..6ca543c6447af8 100644
--- a/addons/website_sale/static/tests/tours/product_page_zoom.js
+++ b/addons/website_sale/static/tests/tours/product_page_zoom.js
@@ -36,7 +36,7 @@ registry.category("web_tour.tours").add('website_sale.product_page_zoom', {
         },
         {
             content: "close the image viewer",
-            trigger: '.o_wsale_image_viewer_header span.fa-times',
+            trigger: '.o_wsale_image_viewer_header span[data-icon="close"]',
             run: "click",
         },
         {
diff --git a/addons/website_sale/static/tests/tours/restricted_editor_ui.js b/addons/website_sale/static/tests/tours/restricted_editor_ui.js
index 35b613cd21972f..899623708bd4a4 100644
--- a/addons/website_sale/static/tests/tours/restricted_editor_ui.js
+++ b/addons/website_sale/static/tests/tours/restricted_editor_ui.js
@@ -45,6 +45,6 @@ registerWebsitePreviewTour("website_sale.restricted_editor_ui", {}, () => [
     },
     {
         content: "Check that you landed on a form view and that the record was unpublished",
-        trigger: '.o-form-buttonbox [name="is_published"] .fa-globe.text-danger',
+        trigger: '.o-form-buttonbox [name="is_published"] [data-icon="public"].text-danger',
     },
 ]);
diff --git a/addons/website_sale/static/tests/tours/update_cart.js b/addons/website_sale/static/tests/tours/update_cart.js
index 9fd7397f30d5fe..0d72d76d4e061b 100644
--- a/addons/website_sale/static/tests/tours/update_cart.js
+++ b/addons/website_sale/static/tests/tours/update_cart.js
@@ -45,7 +45,7 @@ registry.category("web_tour.tours").add("website_sale.update_cart", {
         },
         {
             content: "remove Storage Box",
-            trigger: '#cart_products div:has(a[name="o_cart_line_product_link"]>h6:contains("Storage Box")) button:has(i.oi-minus)',
+            trigger: '#cart_products div:has(a[name="o_cart_line_product_link"]>h6:contains("Storage Box")) button:has(i[data-icon="remove"])',
             run: "click",
         },
         {
@@ -55,7 +55,7 @@ registry.category("web_tour.tours").add("website_sale.update_cart", {
         {
             content: "add one more",
             trigger:
-                '#cart_products div:has(a[name="o_cart_line_product_link"]>h6:contains("Conference Chair")) button:has(i.oi-plus)',
+                '#cart_products div:has(a[name="o_cart_line_product_link"]>h6:contains("Conference Chair")) button:has(i[data-icon="add"])',
             run: "click",
         },
         {
diff --git a/addons/website_sale/static/tests/tours/website_sale_comparison.js b/addons/website_sale/static/tests/tours/website_sale_comparison.js
index 41b272febfceaa..094e948ec61d0a 100644
--- a/addons/website_sale/static/tests/tours/website_sale_comparison.js
+++ b/addons/website_sale/static/tests/tours/website_sale_comparison.js
@@ -34,7 +34,7 @@ registry.category("web_tour.tours").add('website_sale.product_comparison', {
         },
         {
             content: "remove product",
-            trigger: '[name="product_comparison_bottom_bar_row"]:contains("Color T-Shirt") button:has(i.oi-close)',
+            trigger: '[name="product_comparison_bottom_bar_row"]:contains("Color T-Shirt") button:has([data-icon="close"])',
             run: "click",
         },
         {
diff --git a/addons/website_sale/templates/checkout/address_templates.xml b/addons/website_sale/templates/checkout/address_templates.xml
index acb7a3130b7444..4746dc2cf899b6 100644
--- a/addons/website_sale/templates/checkout/address_templates.xml
+++ b/addons/website_sale/templates/checkout/address_templates.xml
@@ -154,7 +154,8 @@
                 </span>
                 <span
                     name="o_pickup_location_selector"
-                    class="btn btn-light fa fa-pencil ms-auto p-3"
+                    class="btn btn-light oi oi-filled ms-auto p-3"
+                    data-icon="edit"
                     title="Change location"
                     aria-label="Change location"
                     t-att-data-location-id="pickup_location_data.get('id')"
@@ -198,7 +199,7 @@
                     title="Add an address"
                     aria-label="Add an address"
                 >
-                    <i class="oi oi-plus me-2"/>Add Address
+                    <i class="oi me-2" data-icon="add"/>Add Address
                 </a>
             </div>
             <t t-call="website_sale.address_list"
@@ -224,7 +225,7 @@
                     title="Add an address"
                     aria-label="Add an address"
                 >
-                    <i class="oi oi-plus me-2"/>Add Address
+                    <i class="oi me-2" data-icon="add"/>Add Address
                 </a>
             </div>
             <div t-if="has_delivery" class="form-check form-switch mt-2">
@@ -339,14 +340,14 @@
     <template id="website_sale.address_edit_button" name="Address edit button">
         <t t-if="xmlid != 'website_sale.confirmation'">
             <a t-if="order.partner_invoice_id.country_id" class="float-end no-decoration" href="/shop/checkout">
-                <i class="fa fa-pencil me-1"/>Edit
+                <i class="oi oi-filled me-1" data-icon="edit"/>Edit
             </a>
             <a
                 t-else=""
                 class="float-end no-decoration"
                 t-attf-href="/shop/address?partner_id={{order.partner_invoice_id.id}}&amp;address_type=billing"
             >
-                <i class="fa fa-pencil me-1"/>Want an invoice?
+                <i class="oi oi-filled me-1" data-icon="edit"/>Want an invoice?
             </a>
         </t>
     </template>
diff --git a/addons/website_sale/templates/checkout/cart_templates.xml b/addons/website_sale/templates/checkout/cart_templates.xml
index 291aee758a8d50..920edfa9f98e02 100644
--- a/addons/website_sale/templates/checkout/cart_templates.xml
+++ b/addons/website_sale/templates/checkout/cart_templates.xml
@@ -159,7 +159,7 @@
                                 title="Remove"
                                 aria-label="Remove"
                             >
-                                <i class="fa fa-fw fa-trash-o"/>
+                                <i class="oi oi-fw" data-icon="delete"/>
                             </button>
                         </div>
                     </div>
@@ -184,7 +184,7 @@
                     aria-label="Remove one"
                     title="Remove one"
                 >
-                    <i class="oi oi-minus position-relative z-1"/>
+                    <i class="oi position-relative z-1" data-icon="remove"/>
                 </button>
                 <input
                     type="text"
@@ -198,7 +198,7 @@
                 <t t-if="line._get_shop_warning(clear=False)">
                     <a href="#" class="btn btn-link">
                         <i
-                            class="fa fa-warning text-warning"
+                            class="oi text-warning" data-icon="warning"
                             t-att-title="line._get_shop_warning()"
                             role="img"
                             aria-label="Warning"
@@ -211,7 +211,7 @@
                     aria-label="Add one"
                     title="Add one"
                 >
-                    <i class="oi oi-plus position-relative z-1"/>
+                    <i class="oi position-relative z-1" data-icon="add"/>
                 </button>
             </t>
             <t t-else="">
@@ -349,7 +349,7 @@
                 aria-controls="quick_reorder_sidebar"
                 t-att-disabled="not order_history"
             >
-                <i class="fa fa-rotate-left me-2"/>Quick reorder
+                <i class="oi me-2" data-icon="undo"/>Quick reorder
             </button>
         </span>
         <t t-call="website_sale.quick_reorder_sidebar"/>
@@ -467,7 +467,7 @@
                                 t-att-data-product-type="order_line.product_id.type"
                                 t-att-data-selected-combo-items="json.dumps(order_line._get_selected_combo_items())"
                             >
-                                <i class="fa fa-cart-plus"/>
+                                <i class="oi" data-icon="add_shopping_cart"/>
                             </button>
                         </div>
                     </div>
@@ -543,7 +543,7 @@
                                     t-att-data-product-type="product.type"
                                     t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
                                 >
-                                    <i class="d-md-none fa fa-shopping-cart" role="presentation"/>
+                                    <i class="oi d-md-none" data-icon="shopping_cart" role="presentation"/>
                                     <span class="d-none d-md-inline">Add to cart</span>
                                 </button>
                             </div>
@@ -581,7 +581,7 @@
                 title="Wishlist"
                 aria-label="Wishlist"
             >
-                <i class="fa fa-fw fa-heart-o"/>
+                <i class="oi oi-fw" data-icon="favorite"/>
             </button>
         </xpath>
     </template>
diff --git a/addons/website_sale/templates/checkout/checkout_templates.xml b/addons/website_sale/templates/checkout/checkout_templates.xml
index 1c1447a09200b7..06c06c9dda05d5 100644
--- a/addons/website_sale/templates/checkout/checkout_templates.xml
+++ b/addons/website_sale/templates/checkout/checkout_templates.xml
@@ -65,7 +65,7 @@
                         t-attf-class="btn btn-primary #{not website_sale_order._is_cart_ready() and 'disabled'} w-100"
                         t-att-href="next_website_checkout_step_href">
                         <span t-field="next_website_checkout_step.main_button_label"/>
-                        <i class="fa fa-angle-right ms-2 fw-light"/>
+                        <i class="oi ms-2 fw-light" data-icon="keyboard_arrow_right"/>
                     </a>
                 </t>
             </t>
@@ -79,13 +79,13 @@
                     t-att-href="previous_website_checkout_step.step_href"
                     class="mt-2 mt-lg-0 text-center"
                 >
-                    <i class="fa fa-angle-left me-2 fw-light"/>
+                    <i class="oi me-2 fw-light" data-icon="keyboard_arrow_left"/>
                     <span t-field="previous_website_checkout_step.back_button_label"/>
                 </a>
             </t>
             <t t-else="">
                 <a t-att-href="'/shop'" class="mt-2 mt-lg-0 text-center">
-                    <i class="fa fa-angle-left me-2 fw-light"/>
+                    <i class="oi me-2 fw-light" data-icon="keyboard_arrow_left"/>
                     Continue shopping
                 </a>
             </t>
@@ -246,7 +246,7 @@
                                     class="o_cart_item_count badge ms-1 top-0 bg-primary"
                                     t-out="str(website_sale_order.cart_quantity)"
                                 />
-                                <i class="fa fa-angle-right ms-2" role="img"/>
+                                <i class="oi ms-2" data-icon="keyboard_arrow_right" role="img"/>
                             </button>
                             <t
                                 t-if="show_navigation_button"
@@ -267,7 +267,7 @@
                                     class="o_wsale_scrollable_table_badge o_wsale_scrollable_table_badge_mobile d-none badge position-absolute start-50 z-1 translate-middle py-2 px-3 pe-none"
                                 >
                                     <t t-out="str(website_sale_order.cart_quantity)"/> items - Scroll for more
-                                    <i class="oi oi-arrow-down ms-1" aria-hidden="true"/>
+                                    <i class="oi ms-1" data-icon="south" aria-hidden="true"/>
                                 </span>
                                 <a href="/shop/cart" class="btn btn-link w-100">
                                     Coupon, Gift card, Promo-code?
@@ -337,7 +337,7 @@
                         class="o_wsale_scrollable_table_badge o_wsale_scrollable_table_badge_desktop badge d-none d-lg-inline py-2 px-3 position-absolute start-50 z-1 translate-middle pe-none"
                     >
                         <t t-out="str(website_sale_order.cart_quantity)"/> items - Scroll for more
-                        <i class="oi oi-arrow-down ms-1" aria-hidden="true"/>
+                        <i class="oi ms-1" data-icon="south" aria-hidden="true"/>
                     </span>
                     <tbody>
                         <tr
@@ -365,7 +365,7 @@
                                         <t t-out="int(line.product_uom_qty)" />
                                         <i
                                             t-if="line._get_shop_warning(clear=False)"
-                                            class="fa fa-warning"
+                                            class="oi" data-icon="warning"
                                             role="img"
                                             t-att-title="line._get_shop_warning()"
                                             aria-label="Warning"
diff --git a/addons/website_sale/templates/checkout/confirmation_templates.xml b/addons/website_sale/templates/checkout/confirmation_templates.xml
index 20712b46bc3083..9b22d8dca78aa1 100644
--- a/addons/website_sale/templates/checkout/confirmation_templates.xml
+++ b/addons/website_sale/templates/checkout/confirmation_templates.xml
@@ -35,7 +35,7 @@
                         target="_blank"
                         aria-label="Download"
                     >
-                        <i class="fa fa-download me-2"/>Download
+                        <i class="oi me-2" data-icon="download"/>Download
                     </a>
                 </div>
                 <div t-else="">
@@ -48,7 +48,7 @@
                             aria-expanded="false"
                             aria-label="Download"
                         >
-                            <i class="fa fa-download me-2"/>Download
+                            <i class="oi me-2" data-icon="download"/>Download
                         </button>
                         <ul class="dropdown-menu" aria-labelledby="downloadDropdown">
                             <li>
@@ -59,7 +59,7 @@
                                     title="Download Sale Order"
                                     aria-label="Download Sale Order"
                                 >
-                                    <i class="fa fa-cart-arrow-down me-2"/>Order
+                                    <i class="oi me-2" data-icon="shopping_cart_checkout"/>Order
                                 </a>
                             </li>
                             <li>
@@ -70,7 +70,7 @@
                                     title="Download Invoice"
                                     aria-label="Download Invoice"
                                 >
-                                    <i class="fa fa-file-text-o me-2"/>Invoice
+                                    <i class="oi me-2" data-icon="article"/>Invoice
                                 </a>
                             </li>
                         </ul>
@@ -131,7 +131,7 @@
                     aria-label="Edit"
                     t-attf-href="/odoo/action-payment.action_payment_provider/{{tx_sudo.provider_id.id}}"
                 >
-                    <i class="fa fa-pencil"/>
+                    <i class="oi oi-filled" data-icon="edit"/>
                 </a>
                 <div>
                     <t t-if="tx_sudo.state == 'pending'">
diff --git a/addons/website_sale/templates/comparison_templates.xml b/addons/website_sale/templates/comparison_templates.xml
index 21b5100027f4e5..59ca4be74c449f 100644
--- a/addons/website_sale/templates/comparison_templates.xml
+++ b/addons/website_sale/templates/comparison_templates.xml
@@ -98,7 +98,7 @@
                                         aria-label="Remove product from comparison"
                                         t-att-data-product-id="product.id"
                                     >
-                                        <i class="oi oi-close"/>
+                                        <i class="oi" data-icon="close_small"/>
                                     </button>
                                 </li>
                             </ul>
@@ -158,7 +158,7 @@
                                                 t-att-data-ptav-ids="json.dumps(product.product_template_attribute_value_ids.ids)"
                                                 t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
                                             >
-                                                <i class="fa fa-shopping-cart me-2" aria-hidden="true"/>Add to Cart
+                                                <i class="oi me-2" data-icon="shopping_cart" aria-hidden="true"/>Add to Cart
                                             </button>
                                         </div>
                                     </div>
@@ -230,7 +230,7 @@
                                 class="btn btn-link ps-0 text-decoration-none"
                                 aria-label="Continue shopping"
                             >
-                                <i class="oi oi-chevron-left me-1"/> Back to shop
+                                <i class="oi me-1" data-icon="chevron_backward"/> Back to shop
                             </a>
                             <button
                                 class="button btn btn-light ms-auto"
@@ -256,7 +256,7 @@
             t-att-data-product-id="product_variant.id"
             t-att-data-product-template-id="product.id"
         >
-            <span class="fa fa-exchange fa-fw o_not-animable"/>
+            <span class="oi oi-fw o_not-animable" data-icon="swap_horiz"/>
             <span class="o_label small ms-2">Compare</span>
         </button>
     </template>
diff --git a/addons/website_sale/templates/product_page_templates.xml b/addons/website_sale/templates/product_page_templates.xml
index dc711e6a9fd8b2..c3037df4642352 100644
--- a/addons/website_sale/templates/product_page_templates.xml
+++ b/addons/website_sale/templates/product_page_templates.xml
@@ -53,7 +53,8 @@
                                             t-att-href="keep('%s/category/%s' % (shop_path, slug(cat)))"
                                         >
                                             <i
-                                                class="oi oi-chevron-left d-lg-none me-1"
+                                                class="oi d-lg-none me-1"
+                                                data-icon="chevron_backward"
                                                 role="img"
                                             />
                                             <t t-out="cat.name"/>
@@ -65,7 +66,7 @@
                                 </li>
                                 <li class="breadcrumb-item d-lg-none">
                                     <a t-att-href="category and keep('%s/category/%s' % (shop_path, slug(cat))) or keep(shop_path)">
-                                        <i class="oi oi-chevron-left me-2" role="img"/>
+                                        <i class="oi me-2" data-icon="chevron_backward" role="img"/>
                                         <t t-if="category.name" t-out="category.name"/>
                                         <t t-else="" t-call="website_sale.all_products_link_name"/>
                                     </a>
@@ -81,7 +82,7 @@
                                     title="Search Products"
                                     href="#"
                                 >
-                                    <i class="oi oi-search" role="presentation"/>
+                                    <i class="oi" data-icon="search" role="presentation"/>
                                 </a>
                             </div>
                         </div>
@@ -175,13 +176,13 @@
                                                 />
                                                 <t
                                                     t-set="icon"
-                                                    t-value="attachment_sudo.type == 'url' and 'fa-link' or 'fa-download'"
+                                                    t-value="attachment_sudo.type == 'url' and 'link' or 'download'"
                                                 />
                                                 <a
                                                     class="list-group-item list-group-item-action"
                                                     t-att-href="'/shop/' + slug(product) + '/document/' + str(document_sudo.id)"
                                                     t-att-target="target">
-                                                    <i t-att-class="'fa ' + icon + ' me-2'"/>
+                                                    <i class="oi me-2" t-att-data-icon="icon"/>
                                                     <t t-out="attachment_sudo.name"/>
                                                 </a>
                                             </t>
@@ -572,7 +573,7 @@
                     t-att-data-product-type="product.type"
                     t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
                 >
-                    <i class="fa fa-shopping-cart me-2"/>
+                    <i class="oi me-2" data-icon="shopping_cart"/>
                     Add to cart
                 </button>
             </div>
@@ -875,7 +876,7 @@
                     aria-label="Remove one"
                     title="Remove one"
                 >
-                    <i class="oi oi-minus text-600"/>
+                    <i class="oi text-600" data-icon="remove"/>
                 </button>
                 <input
                     type="text"
@@ -890,7 +891,7 @@
                     aria-label="Add one"
                     title="Add one"
                 >
-                    <i class="oi oi-plus text-600"/>
+                    <i class="oi text-600" data-icon="add"/>
                 </button>
             </div>
         </div>
@@ -927,7 +928,7 @@
                 t-att-data-product-type="product.type"
                 t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
             >
-                <i class="fa fa-bolt me-2"/>
+                <i class="oi me-2" data-icon="flash_on"/>
                 Buy now
             </button>
         </xpath>
@@ -1102,7 +1103,8 @@
                 <t t-if="len(product_images) > 1">
                     <a class="carousel-control-prev" href="#o-carousel-product" role="button" data-bs-slide="prev">
                         <i
-                            class="oi oi-chevron-left oe_unmovable border bg-white text-900"
+                            class="oi oe_unmovable border bg-white text-900"
+                            data-icon="chevron_backward"
                             role="img"
                             aria-label="Previous"
                             title="Previous"
@@ -1110,7 +1112,8 @@
                     </a>
                     <a class="carousel-control-next" href="#o-carousel-product" role="button" data-bs-slide="next">
                         <i
-                            class="oi oi-chevron-right oe_unmovable border bg-white text-900"
+                            class="oi oe_unmovable border bg-white text-900"
+                            data-icon="chevron_forward"
                             role="img"
                             aria-label="Next"
                             title="Next"
@@ -1168,7 +1171,8 @@
                     />
                     <i
                         t-if="product_image._name == 'product.image' and product_image.embed_code"
-                        class="fa fa-2x fa-play-circle o_product_video_thumb bg-black-50 text-center"
+                        class="oi oi-filled oi-2x o_product_video_thumb bg-black-50 text-center"
+                        data-icon="play_circle"
                     />
                 </li>
             </ol>
@@ -1258,7 +1262,7 @@
                         </t>
                         <t t-else=''>
                             <a target='_blank' t-attf-href='/web/content/product.template/#{product.id}/#{field.name}?download=1'>
-                                <i class='fa fa-file'></i>
+                                <i class="oi oi-filled" data-icon="description"></i>
                             </a>
                         </t>
                         <br/>
@@ -1299,7 +1303,7 @@
                     t-att-data-product-id="product_variant.id"
                     t-att-data-product-template-id="product.id"
                 >
-                    <span class="fa fa-exchange"/>
+                    <span class="oi" data-icon="swap_horiz"/>
                     <span t-att-class="'d-inline ms-2' + (' d-lg-none' if website.product_page_image_width == '50_pc' and not (is_view_active('website_sale.cta_wrapper_boxed') or is_view_active('website_sale.cta_wrapper_large')) or is_view_active('website_sale.product_add_to_wishlist') else '')">Add to compare</span>
                 </button>
             </t>
@@ -1341,7 +1345,7 @@
                 t-att-data-product-template-id="product.id"
                 title="Add to wishlist"
             >
-                <i class="fa fa-heart-o me-2 me-lg-0" role="img" aria-label="Add to wishlist"/>
+                <i class="oi me-2 me-lg-0" data-icon="favorite" role="img" aria-label="Add to wishlist"/>
                 <t
                     t-set="_span_classes"
                     t-valuef="d-inline"
diff --git a/addons/website_sale/templates/product_tile_templates.xml b/addons/website_sale/templates/product_tile_templates.xml
index 404d2c05fa1163..8c387d5e57e081 100644
--- a/addons/website_sale/templates/product_tile_templates.xml
+++ b/addons/website_sale/templates/product_tile_templates.xml
@@ -245,7 +245,7 @@
                     t-att-data-product-type="product.type"
                     t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
                 >
-                    <i class="fa fa-fw fa-shopping-cart o_not-animable" role="presentation"/>
+                    <i class="oi oi-fw o_not-animable" data-icon="shopping_cart" role="presentation"/>
                     <span class="o_label small ms-1">Add to Cart</span>
                 </button>
             </t>
@@ -258,7 +258,7 @@
                     t-att-href="website._get_contact_us_url(product.with_context(display_default_code=False).display_name)"
                     class="o_wsale_product_btn_primary btn btn-outline-primary"
                 >
-                    <i class="fa fa-fw fa-envelope o_not-animable" role="presentation"/>
+                    <i class="oi oi-fw oi-filled o_not-animable" data-icon="mail" role="presentation"/>
                     <span class="o_label small ms-1">Contact Us</span>
                 </a>
             </t>
@@ -308,7 +308,7 @@
                     comparison button
                 -->
                 <div class="o_add_compare_placeholder pe-none opacity-0 btn">
-                    <span class="fa fa-exchange fa-fw"/>
+                    <span class="oi oi-fw" data-icon="swap_horiz"/>
                 </div>
             </t>
         </xpath>
diff --git a/addons/website_sale/templates/sale_portal_templates.xml b/addons/website_sale/templates/sale_portal_templates.xml
index 7e350384b2c5a0..930bbbaa60f798 100644
--- a/addons/website_sale/templates/sale_portal_templates.xml
+++ b/addons/website_sale/templates/sale_portal_templates.xml
@@ -31,7 +31,7 @@
                     class="btn btn-secondary o_wsale_reorder_button oe_website_sale"
                     t-att-data-sale-order-id="sale_order.id"
                 >
-                    <i class="fa fa-rotate-right me-1"/>
+                    <i class="oi me-1" data-icon="redo"/>
                     Order Again
                 </button>
             </t>
diff --git a/addons/website_sale/templates/shop_empty_screens/shop_page_empty_screen.xml b/addons/website_sale/templates/shop_empty_screens/shop_page_empty_screen.xml
index 1698f32b212188..aa4f7cabb3fa6e 100644
--- a/addons/website_sale/templates/shop_empty_screens/shop_page_empty_screen.xml
+++ b/addons/website_sale/templates/shop_empty_screens/shop_page_empty_screen.xml
@@ -11,7 +11,7 @@
                     class="o_wsale_empty_screen_header d-flex align-items-stretch justify-content-end border-bottom"
                     aria-hidden="true"
                 >
-                    <i class="fa fa-lg fa-mobile align-self-center me-3" role="img"/>
+                    <i class="oi oi-lg align-self-center me-3" data-icon="smartphone" role="img"/>
                     <button
                         class="o-dropdown o-dropdown-caret btn btn-light rounded-0 px-2 pe-none"
                         tabindex="-1"
diff --git a/addons/website_sale/templates/shop_page_templates.xml b/addons/website_sale/templates/shop_page_templates.xml
index ab745b9f065e0d..942fe029ec5182 100644
--- a/addons/website_sale/templates/shop_page_templates.xml
+++ b/addons/website_sale/templates/shop_page_templates.xml
@@ -267,7 +267,7 @@
                                         title="Clear Filters"
                                     >
                                         <small class="mx-auto"><b>Clear Filters</b></small>
-                                        <i class="oi oi-close" role="presentation"/>
+                                        <i class="oi" data-icon="close_small" role="presentation"/>
                                     </a>
                                 </div>
                                 <div
@@ -316,7 +316,7 @@
                                                 t-att-href="keep(search=0)"
                                                 class="link-info"
                                             >
-                                                <i class="oi oi-close" role="img"/>
+                                                <i class="oi" data-icon="close_small" role="img"/>
                                             </a>
                                         </span>
                                         <span class="text-muted">in</span>
@@ -326,7 +326,7 @@
                                                 title="Search globally"
                                                 t-att-href="keep(shop_path, search=search)"
                                             >
-                                                <i class="oi oi-close" role="img"/>
+                                                <i class="oi" data-icon="close_small" role="img"/>
                                             </a>
                                         </span>
                                     </t>
@@ -391,7 +391,7 @@
                                                 title="Search Products"
                                                 href="#"
                                             >
-                                                <i class="oi oi-search" role="img"/>
+                                                <i class="oi" data-icon="search" role="img"/>
                                             </a>
                                         </t>
                                         <t
@@ -416,7 +416,7 @@
                                                 data-bs-toggle="offcanvas"
                                                 data-bs-target="#o_wsale_offcanvas"
                                             >
-                                                <i class="oi oi-settings-adjust" role="img"/>
+                                                <i class="oi" data-icon="tune" role="img"/>
                                                 <small t-attf-class="ms-1 {{(hasPricelistDropdown and is_view_active('website_sale.search') and is_view_active('website_sale.sort')) and 'd-none d-md-inline-block'}}">Filters</small>
                                                 <span
                                                     t-if="isFilteringByPrice or attrib_set or tags"
@@ -653,7 +653,7 @@
                     <!-- Prevent editing the content in website builder -->
                     <span t-else="" t-out="dict(website_sale_sortable)[website.shop_default_sort]"/>
                 </span>
-                <i t-if="_icon_classes" t-attf-class="fa fa-sort {{_icon_classes}}" role="img"/>
+                <i t-if="_icon_classes" t-attf-class="oi {{_icon_classes}}" data-icon="swap_vert" role="img"/>
             </a>
             <div class="dropdown-menu dropdown-menu-end" role="menu">
                 <t t-foreach="website_sale_sortable" t-as="sortby">
@@ -1272,7 +1272,7 @@
                             title="Search Products"
                             href="#"
                         >
-                            <i class="oi oi-search" role="img"/>
+                            <i class="oi" data-icon="search" role="img"/>
                         </a>
                     </div>
                     <span
@@ -1290,7 +1290,7 @@
                         data-bs-toggle="offcanvas"
                         data-bs-target="#o_wsale_offcanvas"
                     >
-                        <i class="oi oi-settings-adjust" role="img"/>
+                        <i class="oi" data-icon="tune" role="img"/>
                         <span
                             t-if="isFilteringByPrice or attrib_set or tags"
                             t-attf-class="position-absolute top-0 start-100 translate-middle rounded-circle bg-danger p-1"
diff --git a/addons/website_sale/templates/snippets/product_snippet_template_data.xml b/addons/website_sale/templates/snippets/product_snippet_template_data.xml
index d55d562e8c40ed..2488d6c0422c6b 100644
--- a/addons/website_sale/templates/snippets/product_snippet_template_data.xml
+++ b/addons/website_sale/templates/snippets/product_snippet_template_data.xml
@@ -70,7 +70,7 @@
                         t-att-data-product-template-id="product_template.id"
                         title="Remove from recently viewed"
                     >
-                        <i class="oi oi-close" role="presentation"/>
+                        <i class="oi" data-icon="close_small" role="presentation"/>
                     </button>
                     <div class="o_wsale_product_information flex-grow-1 flex-shrink-1">
                         <t
@@ -99,7 +99,7 @@
                                             t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
                                         >
                                             <!-- Avoid whitespaces undesired gaps -->
-                                            <i class="fa fa-shopping-cart fa-fw" role="presentation"/><span class="o_label small ms-1">Add to Cart</span>
+                                            <i class="oi oi-fw" data-icon="shopping_cart" role="presentation"/><span class="o_label small ms-1">Add to Cart</span>
                                         </button>
                                     </t>
                                     <t t-elif="data.get('prevent_sale')">
@@ -109,7 +109,7 @@
                                             t-att-href="website._get_contact_us_url(product.display_name)"
                                             class="o_wsale_product_btn_primary btn btn-outline-primary"
                                         >
-                                            <i class="fa fa-envelope fa-fw" role="presentation"/>
+                                            <i class="oi oi-fw oi-filled"  data-icon="mail" role="presentation"/>
                                             <span class="o_label small ms-1">Contact Us</span>
                                         </a>
                                     </t>
diff --git a/addons/website_sale/templates/snippets/s_add_to_cart.xml b/addons/website_sale/templates/snippets/s_add_to_cart.xml
index cec917f34b8ddf..90e101553be4b6 100644
--- a/addons/website_sale/templates/snippets/s_add_to_cart.xml
+++ b/addons/website_sale/templates/snippets/s_add_to_cart.xml
@@ -15,7 +15,7 @@
                 data-action="add_to_cart"
                 t-att-data-show-quantity="False"
             >
-                <i class="fa fa-cart-plus me-2"/>Add to Cart
+                <i class="oi me-2" data-icon="add_shopping_cart"/>Add to Cart
             </button>
         </div>
     </template>
diff --git a/addons/website_sale/templates/snippets/s_dynamic_snippet_products_preview_data.xml b/addons/website_sale/templates/snippets/s_dynamic_snippet_products_preview_data.xml
index daa7adaf9f260a..5dfb80816bf2d2 100644
--- a/addons/website_sale/templates/snippets/s_dynamic_snippet_products_preview_data.xml
+++ b/addons/website_sale/templates/snippets/s_dynamic_snippet_products_preview_data.xml
@@ -86,10 +86,10 @@
                 </div>
             </div>
             <a class="carousel-control-prev" data-bs-slide="prev" role="button" aria-label="Previous" title="Previous" href="#s_dynamic_snippet_1">
-                <span class="fa fa-chevron-circle-left fa-2x"></span>
+                <span class="oi oi-filled oi-2x" data-icon="arrow_circle_left"></span>
             </a>
             <a class="carousel-control-next" data-bs-slide="next" role="button" aria-label="Next" title="Next" href="#s_dynamic_snippet_1">
-                <span class="fa fa-chevron-circle-right fa-2x"></span>
+                <span class="oi oi-filled oi-2x" data-icon="arrow_circle_right"></span>
             </a>
         </div>
     </template>
diff --git a/addons/website_sale/templates/snippets/s_mega_menu/big_icons_subtitles.xml b/addons/website_sale/templates/snippets/s_mega_menu/big_icons_subtitles.xml
index af92764ca65d19..c7b73f8e34b152 100644
--- a/addons/website_sale/templates/snippets/s_mega_menu/big_icons_subtitles.xml
+++ b/addons/website_sale/templates/snippets/s_mega_menu/big_icons_subtitles.xml
@@ -29,7 +29,7 @@
                                         <img
                                             t-if="category.image_1920"
                                             t-att-src="image_data_uri(category.image_1920)"
-                                            class="fa rounded rounded-circle shadow me-3"
+                                            class="oi rounded rounded-circle shadow me-3"
                                             alt=""
                                         />
                                         <div class="flex-grow-1">
diff --git a/addons/website_sale/templates/snippets/s_mega_menu/little_icons.xml b/addons/website_sale/templates/snippets/s_mega_menu/little_icons.xml
index 99064f35536e01..382cea2e9e6371 100644
--- a/addons/website_sale/templates/snippets/s_mega_menu/little_icons.xml
+++ b/addons/website_sale/templates/snippets/s_mega_menu/little_icons.xml
@@ -24,7 +24,7 @@
                                     <img
                                         t-if="category.image_1920"
                                         t-att-src="image_data_uri(category.image_1920)"
-                                        class="fa fa-fw me-2"
+                                        class="oi oi-fw me-2"
                                         alt=""
                                     />
                                     <b t-out="category.name"/>
diff --git a/addons/website_sale/templates/snippets/snippet_category_template_data.xml b/addons/website_sale/templates/snippets/snippet_category_template_data.xml
index 9d0fc848a9cb44..9bebcff0c7b72c 100644
--- a/addons/website_sale/templates/snippets/snippet_category_template_data.xml
+++ b/addons/website_sale/templates/snippets/snippet_category_template_data.xml
@@ -71,7 +71,7 @@
         </a>
         <a name="category_button" position="after">
             <p class="s_dynamic_category_arrow position-absolute end-0 bottom-0 mb-3 me-3">
-                <i class="oi oi-arrow-right fa-lg"/>
+                <i class="oi oi-lg" data-icon="east"/>
             </p>
         </a>
     </template>
diff --git a/addons/website_sale/templates/website_templates.xml b/addons/website_sale/templates/website_templates.xml
index 5a22be1f481432..d4d0667dd59a1c 100644
--- a/addons/website_sale/templates/website_templates.xml
+++ b/addons/website_sale/templates/website_templates.xml
@@ -8,7 +8,7 @@
         <li t-attf-class="o_wsale_my_cart #{not show_cart and 'd-none'} #{_item_class}">
             <a href="/shop/cart" t-attf-class="#{_link_class}" aria-label="eCommerce cart">
                 <div t-attf-class="#{_icon_wrap_class}">
-                    <i t-if="_icon" class="fa fa-shopping-cart fa-stack"/>
+                    <i t-if="_icon" class="oi oi-stack" data-icon="shopping_cart"/>
                     <sup t-attf-class="my_cart_quantity badge bg-primary #{_badge_class} #{'d-none' if (website_sale_cart_quantity == 0) else ''}" t-out="website_sale_cart_quantity" t-att-data-order-id="request.session.get('sale_order_id', None) if website_sale_cart_quantity else None"/>
                 </div>
                 <span t-if="_text" t-attf-class="#{_text_class}">My Cart</span>
@@ -33,7 +33,7 @@
         <li t-attf-class="o_wsale_my_wish #{not show_wishes and 'd-none'} #{_item_class}">
             <a href="/shop/wishlist" t-attf-class="#{_link_class}">
                 <div t-attf-class="#{_icon_wrap_class}">
-                    <i t-if="_icon" class="fa fa-1x fa-heart fa-stack"/>
+                    <i t-if="_icon" class="oi oi-1x oi-filled oi-stack" data-icon="favorite"/>
                     <sup
                         t-out="wishcount"
                         t-attf-class="my_wish_quantity o_animate_blink badge bg-primary #{_badge_class} #{'d-none' if (wishcount == 0) else ''}"
@@ -116,7 +116,7 @@
                                 <div class="s_hr pb8" data-snippet="s_hr" data-name="Separator">
                                     <hr class="w-100 mx-auto"/>
                                 </div>
-                                <a href="/shop"><i class="fa fa-long-arrow-right"/> All Products</a>
+                                <a href="/shop"><i class="oi" data-icon="east"/> All Products</a>
                                 <div class="s_hr pt8 pb8" data-snippet="s_hr" data-name="Separator">
                                     <hr class="w-100 mx-auto"/>
                                 </div>
@@ -160,20 +160,20 @@
                                     class="s_badge badge text-bg-primary o_animable"
                                     data-name="Badge"
                                 >
-                                    <i class="fa fa-dollar fa-fw o_not-animable"/> Low Prices
+                                    <i class="oi oi-fw o_not-animable" data-icon="attach_money"/> Low Prices
                                 </span>
                                 <span
                                     class="s_badge badge text-bg-primary o_animable"
                                     data-name="Badge"
                                 >
-                                    <i class="fa fa-shopping-basket fa-fw o_not-animable"/>
+                                    <i class="oi oi-fw o_not-animable" data-icon="shopping_basket"/>
                                     Easy Returns
                                 </span>
                                 <span
                                     class="s_badge badge text-bg-primary o_animable"
                                     data-name="Badge"
                                 >
-                                    <i class="fa fa-truck fa-fw o_not-animable"/> Fast Shipping
+                                    <i class="oi oi-fw o_not-animable" data-icon="local_shipping"/> Fast Shipping
                                 </span>
                                 <div class="s_hr pt8 pb8" data-snippet="s_hr" data-name="Separator">
                                     <hr class="w-100 mx-auto" style="border-top-color: rgba(255, 255, 255, 0);"/>
@@ -194,7 +194,7 @@
                                         target="_blank"
                                         aria-label="Instagram"
                                     >
-                                        <i class="fa fa-instagram o_editable_media rounded shadow-sm"/>
+                                        <i class="oi o_editable_media rounded shadow-sm" data-icon="oi_instagram"/>
                                     </a>
                                     <a
                                         href="/website/social/youtube"
@@ -202,7 +202,7 @@
                                         target="_blank"
                                         aria-label="YouTube"
                                     >
-                                        <i class="fa fa-youtube-play o_editable_media rounded shadow-sm"/>
+                                        <i class="oi o_editable_media rounded shadow-sm" data-icon="oi_youtube-play"/>
                                     </a>
                                     <a
                                         href="/website/social/tiktok"
@@ -210,14 +210,14 @@
                                         target="_blank"
                                         aria-label="TikTok"
                                     >
-                                        <i class="fa fa-tiktok o_editable_media rounded shadow-sm"/>
+                                        <i class="oi o_editable_media rounded shadow-sm" data-icon="oi_tiktok"/>
                                     </a>
                                     <a
                                         href="/website/social/twitter"
                                         class="s_social_media_twitter"
                                         aria-label="Twitter"
                                     >
-                                        <i class="fa fa-twitter o_editable_media rounded shadow-sm"/>
+                                        <i class="oi o_editable_media rounded shadow-sm" data-icon="oi_x"/>
                                     </a>
                                 </div>
                             </div>
diff --git a/addons/website_sale/templates/wishlist_templates.xml b/addons/website_sale/templates/wishlist_templates.xml
index 0581bada4e220b..ff7aaf485dfdfe 100644
--- a/addons/website_sale/templates/wishlist_templates.xml
+++ b/addons/website_sale/templates/wishlist_templates.xml
@@ -76,7 +76,8 @@
                                             >
                                                 <span class="d-inline-flex align-items-baseline">
                                                     <i
-                                                        class="fa fa-fw fa-envelope o_not-animable"
+                                                        class="oi oi-fw oi-filled o_not-animable"
+                                                        data-icon="mail"
                                                         role="presentation"
                                                     />
                                                     <span class="o_label small ms-1">
@@ -96,7 +97,8 @@
                                             >
                                                 <span class="d-inline-flex align-items-baseline">
                                                     <i
-                                                        class="fa fa-fw fa-shopping-cart o_not-animable"
+                                                        class="oi oi-fw o_not-animable"
+                                                        data-icon="shopping_cart"
                                                         role="presentation"
                                                     />
                                                     <span class="o_label small ms-1">
@@ -111,12 +113,12 @@
                                                     aria-label="Add to compare"
                                                     t-att-data-product-id="wish.product_id.id"
                                                 >
-                                                    <i class="fa fa-fw fa-exchange" role="presentation"/>
+                                                    <i class="oi oi-fw" data-icon="swap_horiz" role="presentation"/>
                                                 </button>
 
                                                 <!-- Render placeholder when product is not comparable to ensure alignment -->
                                                 <div t-else="" class="o_add_to_compare_placeholder btn btn-light pe-none opacity-0">
-                                                    <i class="fa fa-exchange fa-fw" aria-hidden="true"/>
+                                                    <i class="oi oi-fw" data-icon="swap_horiz" aria-hidden="true"/>
                                                 </div>
                                             </t>
                                         </div>
@@ -129,7 +131,7 @@
                                             class="btn btn-light o_wish_rm z-3 rounded-pill lh-1"
                                             title="Remove from wishlist"
                                         >
-                                            <i class="oi oi-close" role="presentation"/>
+                                            <i class="oi" data-icon="close" role="presentation"/>
                                         </button>
                                     </t>
                                     <t t-call="website_sale.products_item"
@@ -166,7 +168,8 @@
             t-att-title="in_wish and btnTitleActive or btnTitle"
         >
             <span
-                t-attf-class="fa o_not-animable #{in_wish and 'fa-heart' or 'fa-heart-o'}"
+                t-attf-class="oi o_not-animable #{in_wish and 'oi-filled' or ''}"
+                data-icon="favorite"
                 role="presentation"
             />
             <span t-if="not in_wish" class="o_label small ms-2">Add to wishlist</span>
diff --git a/addons/website_sale/views/delivery_carrier_views.xml b/addons/website_sale/views/delivery_carrier_views.xml
index fdd467c306cb59..c626226ce94bd9 100644
--- a/addons/website_sale/views/delivery_carrier_views.xml
+++ b/addons/website_sale/views/delivery_carrier_views.xml
@@ -60,7 +60,7 @@
                 <field name="website_description"  placeholder="Description displayed on the eCommerce and on online quotations."/>
             </field>
             <button name="toggle_prod_environment" position="before">
-                <button name="website_publish_button" type="object" class="oe_stat_button" icon="fa-globe">
+                <button name="website_publish_button" type="object" class="oe_stat_button" icon="public">
                     <field name="is_published" widget="website_publish_button"/>
                 </button>
             </button>
diff --git a/addons/website_sale/views/res_config_settings_views.xml b/addons/website_sale/views/res_config_settings_views.xml
index 7510b0859de16f..4e507bd201d732 100644
--- a/addons/website_sale/views/res_config_settings_views.xml
+++ b/addons/website_sale/views/res_config_settings_views.xml
@@ -49,7 +49,7 @@
                         type="object"
                         name="action_install_more_provider"
                         class="btn btn-link"
-                        icon="oi-arrow-right"
+                        icon="east"
                     />
                 </setting>
                 <setting string="Display Product Prices" id="website_tax_inclusion_setting">
@@ -129,7 +129,7 @@
                         name="%(product.attribute_action)d"
                         invisible="not group_product_variant"
                         class="btn-link"
-                        icon="oi-arrow-right"
+                        icon="east"
                     />
                 </setting>
                 <setting
@@ -157,7 +157,7 @@
                         groups="product.group_product_pricelist"
                         invisible="not group_product_pricelist"
                         class="btn-link"
-                        icon="oi-arrow-right"
+                        icon="east"
                     />
                 </setting>
                 <setting
@@ -232,7 +232,7 @@
                         </div>
                     </div>
                     <div invisible="not send_abandoned_cart_email" class="mt8">
-                        <button type="object" name="action_open_abandoned_cart_mail_template" string="Customize Abandoned Email Template" class="btn-link" icon="oi-arrow-right"/>
+                        <button type="object" name="action_open_abandoned_cart_mail_template" string="Customize Abandoned Email Template" class="btn-link" icon="east"/>
                     </div>
                 </setting>
                 <setting
@@ -296,7 +296,7 @@
                             name="action_open_product_feeds"
                             string="Manage feeds"
                             class="btn-link"
-                            icon="oi-arrow-right"
+                            icon="east"
                         />
                     </div>
                 </setting>
diff --git a/addons/website_sale/views/website_sale_visitor_views.xml b/addons/website_sale/views/website_sale_visitor_views.xml
index d16a230d37f090..25ae50f1f134cf 100644
--- a/addons/website_sale/views/website_sale_visitor_views.xml
+++ b/addons/website_sale/views/website_sale_visitor_views.xml
@@ -66,7 +66,7 @@
             <xpath expr="//button[@name='%(website.website_visitor_page_action)d']" position="after">
                 <button name="%(website_sale.website_sale_visitor_product_action)d" type="action"
                     class="oe_stat_button"
-                    icon="fa-tags">
+                    icon="sell">
                     <field name="visitor_product_count" widget="statinfo" string="Product Views"/>
                 </button>
             </xpath>
diff --git a/addons/website_sale_autocomplete/views/res_config_settings_views.xml b/addons/website_sale_autocomplete/views/res_config_settings_views.xml
index 9ff3770002dba1..e5bf6566ca0a81 100644
--- a/addons/website_sale_autocomplete/views/res_config_settings_views.xml
+++ b/addons/website_sale_autocomplete/views/res_config_settings_views.xml
@@ -14,12 +14,12 @@
                     </div>
                     <div class="mt8">
                         <a target="_blank" href="https://console.cloud.google.com/getting-started">
-                            <i class="oi oi-arrow-right"/>
+                            <i class="oi" data-icon="east"/>
                             Create a Google Project and get a key
                         </a>
                         <br/>
                         <a target="_blank" href="https://console.cloud.google.com/billing">
-                            <i class="oi oi-arrow-right"/>
+                            <i class="oi" data-icon="east"/>
                             Enable billing on your Google Project
                         </a>
                     </div>
diff --git a/addons/website_sale_collect/static/src/js/click_and_collect_availability/click_and_collect_availability.xml b/addons/website_sale_collect/static/src/js/click_and_collect_availability/click_and_collect_availability.xml
index dd97889c2ab053..7fba90fc719192 100644
--- a/addons/website_sale_collect/static/src/js/click_and_collect_availability/click_and_collect_availability.xml
+++ b/addons/website_sale_collect/static/src/js/click_and_collect_availability/click_and_collect_availability.xml
@@ -9,7 +9,7 @@
                 class="cursor-pointer"
             >
                 <div class="h6">
-                    <i class="fa fa-fw fa-map-marker text-muted"/>
+                    <i class="oi oi-fw text-muted" data-icon="location_on"/>
                     <t
                         t-if="this.state.selectedLocationData.id"
                         t-out="this.state.selectedLocationData.name"
@@ -22,16 +22,16 @@
                             t-if="this.state.inStoreStockData.show_quantity &amp;&amp; this.state.selectedLocationData.id"
                             class="text-muted"
                         >
-                            <i class="fa fa-fw fa-circle text-warning me-1"/>
+                            <i class="oi oi-fw oi-filled text-warning me-1" data-icon="circle"/>
                             <t t-out="this.state.inStoreStockData.quantity"/> <t t-out="this.state.deliveryStockData.uom_name"/>
                             in stock
                         </div>
                         <div t-else="" class="text-muted">
-                            <i class="fa fa-fw fa-circle text-success"/> Available
+                            <i class="oi oi-fw oi-filled text-success" data-icon="circle"/> Available
                         </div>
                     </t>
                     <div t-else="" class="text-muted">
-                        <i class="fa fa-fw fa-circle text-danger"/> Not available
+                        <i class="oi oi-fw oi-filled text-danger" data-icon="circle"/> Not available
                     </div>
                     <a t-if="this.props.showSelectStoreButton" role="button" href="#">
                         <t t-if="this.state.selectedLocationData.id">Change store</t>
@@ -46,10 +46,11 @@
             >
                 <hr/>
                 <div class="h6">
-                    <i class="fa fa-fw fa-truck text-muted"/>
+                    <i class="oi oi-fw text-muted" data-icon="local_shipping"/>
                     Delivery
                     <i
-                        class="fa fa-info-circle cursor-pointer ms-1"
+                        class="oi cursor-pointer ms-1"
+                        data-icon="info"
                         data-tooltip="Restrictions may apply"
                         data-tooltip-delay="0"
                     />
@@ -59,16 +60,16 @@
                         t-if="this.state.deliveryStockData.show_quantity"
                         class="text-muted"
                     >
-                        <i class="fa fa-fw fa-circle text-warning me-1"/>
+                        <i class="oi oi-fw oi-filled text-warning me-1" data-icon="circle"/>
                         <t t-out="this.state.deliveryStockData.quantity"/> <t t-out="this.state.deliveryStockData.uom_name"/>
                         in stock
                     </div>
                     <div t-else="" class="text-muted">
-                        <i class="fa fa-fw fa-circle text-success"/> Available
+                        <i class="oi oi-fw oi-filled text-success" data-icon="circle"/> Available
                     </div>
                 </div>
                 <div t-else="" class="text-muted">
-                    <i class="fa fa-fw fa-circle text-danger"/> Not available
+                    <i class="oi oi-fw oi-filled text-danger" data-icon="circle"/> Not available
                 </div>
             </div>
         </div>
diff --git a/addons/website_sale_collect/static/src/js/location_selector/location/location.xml b/addons/website_sale_collect/static/src/js/location_selector/location/location.xml
index c64f5050053e0b..faba9d85c6bf72 100644
--- a/addons/website_sale_collect/static/src/js/location_selector/location/location.xml
+++ b/addons/website_sale_collect/static/src/js/location_selector/location/location.xml
@@ -7,20 +7,20 @@
                 <t t-if="!!this.props.additionalData.in_store_stock_data.in_stock">
                     <t t-if="!!this.props.additionalData.in_store_stock_data.show_quantity">
                         <span class="badge text-bg-warning mt-1 align-self-start">
-                            <i class="fa fa-circle text-warning me-2"/>
+                            <i class="oi oi-filled text-warning me-2" data-icon="circle"/>
                             <t t-out="this.props.additionalData.in_store_stock_data.quantity"/> <t t-out="this.props.additionalData.in_store_stock_data.uom_name"/>
                             in stock
                         </span>
                     </t>
                     <t t-else="">
                         <span class="badge text-bg-success mt-1 align-self-start">
-                            <i class="fa fa-circle text-success me-2"/>Available
+                            <i class="oi oi-filled text-success me-2" data-icon="circle"/>Available
                         </span>
                     </t>
                 </t>
                 <t t-else="">
                     <span class="badge text-bg-danger mt-1 align-self-start">
-                        <i class="fa fa-circle text-danger me-2"/>Out of stock
+                        <i class="oi oi-filled text-danger me-2" data-icon="circle"/>Out of stock
                     </span>
                 </t>
             </t>
diff --git a/addons/website_sale_collect/views/delivery_form_templates.xml b/addons/website_sale_collect/views/delivery_form_templates.xml
index 748001f0569aa8..890da97bea2251 100644
--- a/addons/website_sale_collect/views/delivery_form_templates.xml
+++ b/addons/website_sale_collect/views/delivery_form_templates.xml
@@ -44,7 +44,8 @@
                     >
                         <button class="alert-link btn btn-link btn-sm p-0">
                             <i
-                                t-attf-class="fa fa-fw {{'fa-refresh' if available_qty else 'fa-trash-o'}}"
+                                class="oi oi-fw"
+                                t-attf-data-icon="{{'refresh' if available_qty else 'delete'}}"
                                 role="presentation"
                                 aria-label="Update cart quantities"
                             />
@@ -72,7 +73,7 @@
                                     t-att-data-line-id="order_line.id"
                                     t-att-data-product-id="order_line.product_id.id"
                                 >
-                                    <i class="fa fa-fw fa-heart-o" role="presentation" aria-label="Add to wishlist"/>
+                                    <i class="oi oi-fw" data-icon="favorite" role="presentation" aria-label="Add to wishlist"/>
                                     Wishlist
                                 </span>
                             </button>
@@ -80,7 +81,7 @@
                                 t-else=""
                                 class="alert-link small"
                             >
-                                <i class="fa fa-fw fa-heart"/> In wishlist
+                                <i class="oi oi-fw oi-filled" data-icon="favorite"/> In wishlist
                             </span>
                         </t>
                     </div>
@@ -115,7 +116,8 @@
         <span name="o_delivery_method_name" position="before">
             <i
                 t-if="request.website.sudo().in_store_dm_id"
-                t-attf-class="fa fa-fw {{'fa-map-marker' if dm.delivery_type == 'in_store' else 'fa-truck'}} me-1"
+                class="oi oi-fw me-1"
+                t-attf-data-icon="{{'location_on' if dm.delivery_type == 'in_store' else 'local_shipping'}}"
                 role="presentation"
                 aria-label="Delivery method"
             />
diff --git a/addons/website_sale_collect/views/res_config_settings_views.xml b/addons/website_sale_collect/views/res_config_settings_views.xml
index 963f1ed41bda6e..37f5bd13963c79 100644
--- a/addons/website_sale_collect/views/res_config_settings_views.xml
+++ b/addons/website_sale_collect/views/res_config_settings_views.xml
@@ -13,7 +13,7 @@
                         name="action_view_in_store_delivery_methods"
                         type="object"
                         class="btn-link"
-                        icon="oi-arrow-right"
+                        icon="east"
                     />
                 </div>
             </setting>
diff --git a/addons/website_sale_comparison/static/tests/tours/website_sale_comparison.js b/addons/website_sale_comparison/static/tests/tours/website_sale_comparison.js
new file mode 100644
index 00000000000000..05d5d20340e5ac
--- /dev/null
+++ b/addons/website_sale_comparison/static/tests/tours/website_sale_comparison.js
@@ -0,0 +1,155 @@
+import { registry } from "@web/core/registry";
+import { clickOnElement } from '@website/js/tours/tour_utils';
+import * as tourUtils from "@website_sale/js/tours/tour_utils";
+
+registry.category("web_tour.tours").add('website_sale.product_comparison', {
+    url: "/shop",
+    steps: () => [
+        // test from shop page
+        {
+            content: "add first product 'Color T-Shirt' in a comparison list",
+            trigger: '.oe_product_cart:contains("Color T-Shirt")',
+            run: "hover && click .oe_product_cart:contains(Color T-Shirt) .o_add_compare",
+        },
+        {
+            content: "check compare button contains one product",
+            trigger: '.o_wsale_comparison_bottom_bar .badge:contains(1)',
+        },
+        {
+            content: "add second product 'Color Pants' in a comparison list",
+            trigger: '.oe_product_cart:contains("Color Pants")',
+            run: "hover && click .oe_product_cart:contains(Color Pants) .o_add_compare",
+        },
+        {
+            content: "check that the compare button contains two products",
+            trigger: '.o_wsale_comparison_bottom_bar .badge:contains(2)',
+        },
+        {
+            content: "check products name are correct in the comparelist",
+            trigger: '[name="product_comparison_bottom_bar_row"]:contains("Color T-Shirt")',
+        },
+        {
+            content: "check products name are correct in the comparelist",
+            trigger: '[name="product_comparison_bottom_bar_row"]:contains("Color Pants")',
+        },
+        {
+            content: "remove product",
+            trigger: '[name="product_comparison_bottom_bar_row"]:contains("Color T-Shirt") button:has([data-icon="close_small"])',
+            run: "click",
+        },
+        {
+            content: "wait for 'Color T-Shirt' to be removed from the popover",
+            trigger: '[name="product_comparison_bottom_bar_row"]:not(:contains("Color T-Shirt"))',
+        },
+        {
+            content: "re-add 'Color T-Shirt' in comparison list",
+            trigger: '.oe_product_cart:contains("Color T-Shirt")',
+            run: "hover && click .oe_product_cart:contains(Color T-Shirt) .o_add_compare",
+        },
+        // test from product page
+        {
+            content: "go to product page of Color Shoes (with variants)",
+            trigger: '.oe_product_cart a:contains("Color Shoes")',
+            run: "click",
+            expectUnloadPage: true,
+        },
+        {
+            content: "check compare button is still there and contains 2 products",
+            trigger: '.o_wsale_comparison_bottom_bar .badge:contains(2)',
+        },
+        {
+            content: "add first variant to comparelist",
+            trigger: '.o_add_compare_dyn',
+            run: "click",
+        },
+        {
+            content: "check the comparelist is now open and contains 3rd product with correct variant",
+            trigger: '[name="product_comparison_bottom_bar_row"]:contains("Color Shoes (Red)")',
+        },
+        {
+            content: "select 2nd variant(Pink Color)",
+            trigger: '.variant_attribute[data-attribute-name="Color"] input[data-value-name="Pink"]:not(:visible)',
+            run: function (actions) {
+                document.querySelector('img[class*="product_detail_img"]').setAttribute('data-image-to-change', 1);
+                actions.click();
+            },
+        },
+        {
+            trigger: 'img[class*="product_detail_img"]:not([data-image-to-change])',
+        },
+        {
+            content: "click on compare button to add in comparison list when variant changed",
+            trigger: '.o_add_compare_dyn',
+            run: "click",
+        },
+        {
+            content: "comparelist contains 4th product with correct variant",
+            trigger: '[name="product_comparison_bottom_bar_row"]:contains("Color Shoes (Red)")',
+        },
+        {
+            content: "check limit is not reached",
+            trigger: ':not(.o_notification:contains("You can compare up to 4 products at a time."))',
+        },
+        {
+            content: "select 3nd variant(Custom)",
+            trigger: '.variant_attribute[data-attribute-name="Color"] input[data-value-name="Blue"]:not(:visible)',
+            run: "click",
+        },
+        {
+            trigger: 'body:not(:has(.carousel-indicators))', // there is 1 image on the custom variant
+        },
+        {
+            content: "click on compare button to add in comparison list when variant changed",
+            trigger: '.o_add_compare_dyn',
+            run: "click",
+        },
+        {
+            content: "check limit is reached",
+            trigger: '.o_notification:contains("You can compare up to 4 products at a time.")',
+        },
+        {
+            content: "click on compare button",
+            trigger: 'a:contains("Compare")',
+            run: "click",
+            expectUnloadPage: true,
+        },
+        // test on compare page
+        {
+            content: "check 1st product contains correct variant",
+            trigger: '.product_summary a:contains("Color Pants (Red)")',
+        },
+        {
+            content: "check 2nd product contains correct variant",
+            trigger: '.product_summary a:contains("Color Shoes (Pink)")',
+        },
+        {
+            content: "check 3rd product is correctly added",
+            trigger: '.product_summary a:contains("Color Shoes (Red)")',
+        },
+        {
+            content: "check 4th product is correctly added",
+            trigger: '.product_summary a:contains("Color T-Shirt")',
+        },
+        {
+            content: "remove Color Shoes (Pink) from compare table",
+            trigger: '#o_comparelist_table .o_comparelist_remove:eq(2)',
+            run: "click",
+            expectUnloadPage: true,
+        },
+        {
+            content: "check color shoes with pink variant is removed",
+            trigger: '#o_comparelist_table:not(:contains("Color Shoes (Pink)"))',
+        },
+        {
+            content: "add product 'Color Pants' to cart",
+            trigger: '.product_summary:contains("Color Pants") button:contains("Add to Cart")',
+            run: "click",
+        },
+        clickOnElement('Add to cart', 'button[name="website_sale_product_configurator_continue_button"]'),
+        tourUtils.goToCart(),
+        ...tourUtils.assertCartContains({
+            productName: "Color Pants",
+            quantity: '1',
+        }),
+    ]
+});
diff --git a/addons/website_sale_comparison/views/templates.xml b/addons/website_sale_comparison/views/templates.xml
new file mode 100644
index 00000000000000..94a0b63a8b1949
--- /dev/null
+++ b/addons/website_sale_comparison/views/templates.xml
@@ -0,0 +1,456 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+    <!-- Inject the comparison button in products cards -->
+    <template
+        id="website_sale_comparison.add_to_compare"
+        inherit_id="website_sale.shop_product_buttons"
+        name="Comparison List Button"
+        priority="32"
+    >
+        <xpath expr="//div[hasclass('o_wsale_product_action_row')]" position="inside">
+            <t
+                t-set="isCompareAvailable"
+                t-value="product and product.valid_product_template_attribute_line_ids"
+            />
+
+            <t t-if="isCompareAvailable" t-call="website_sale.product_tile_element_visibility"
+                visible_element_class.f="o_wsale_products_opt_has_comparison">
+
+                <t
+                    t-set="attrib_categories"
+                    t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"
+                />
+                <t t-set="product_variant_id" t-value="product._get_first_possible_variant_id()"/>
+                <button
+                    t-if="product_variant_id and attrib_categories"
+                    class="btn o_add_compare"
+                    title="Compare"
+                    aria-label="Compare"
+                    t-att-data-product-id="product_variant_id"
+                    t-att-data-product-template-id="product.id"
+                >
+                    <span class="oi oi-fw o_not-animable" data-icon="swap_horiz"/>
+                    <span class="o_label small ms-2">Compare</span>
+                </button>
+
+            </t>
+            <t t-else="" t-call="website_sale.product_tile_element_visibility">
+                <!--
+                    Render a placeholder to ensure alignment between entries with and without
+                    comparison button
+                -->
+                <div class="o_add_compare_placeholder pe-none opacity-0 btn">
+                    <span class="oi oi-fw" data-icon="swap_horiz"/>
+                </div>
+            </t>
+        </xpath>
+    </template>
+
+    <template
+        id="product_add_to_compare"
+        name="Add to comparison in product page"
+        inherit_id="website_sale.cta_wrapper"
+        priority="8"
+    >
+        <xpath expr="//div[@id='product_option_block']" position="inside">
+            <t t-set="attrib_categories" t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"/>
+            <t t-set="product_variant_id" t-value="product._get_first_possible_variant_id()"/>
+            <t
+                t-set="_button_classes"
+                t-valuef="o_add_compare_dyn btn btn-outline-primary order-last flex-grow-1 flex-sm-grow-0"
+            />
+            <t
+                t-if="not is_view_active('website_sale_wishlist.product_add_to_wishlist') and not is_view_active('website_sale.cta_wrapper_default')"
+                t-set="_button_classes"
+                t-value="_button_classes + ' w-100'"
+            />
+            <t
+                t-if="is_view_active('website_sale.cta_wrapper_large')"
+                t-set="_button_classes"
+                t-value="_button_classes + ' btn-lg px-lg-0'"
+            />
+            <button
+                t-if="product_variant_id and attrib_categories"
+                t-att-class="_button_classes"
+                aria-label="Add to compare"
+                title="Add to compare"
+                t-att-data-product-id="product_variant_id"
+                t-att-data-product-template-id="product.id"
+            >
+                <span class="oi" data-icon="swap_horiz"/>
+                <span t-att-class="'d-inline ms-2' + (' d-lg-none' if website.product_page_image_width == '50_pc' and not (is_view_active('website_sale.cta_wrapper_boxed') or is_view_active('website_sale.cta_wrapper_large')) or is_view_active('website_sale_wishlist.product_add_to_wishlist') else '')">Add to compare</span>
+            </button>
+        </xpath>
+    </template>
+
+    <template id="product_attributes_body" inherit_id="website_sale.product" name="Product attributes table">
+        <xpath expr="//div[@id='product_attributes_simple']" position="replace"/>
+        <xpath expr="//div[@id='product_full_description']" position="after">
+            <t t-set="attrib_categories" t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"/>
+            <t t-if="attrib_categories">
+                <section class="pt32 pb32" id="product_full_spec">
+                    <div class="container">
+                        <div class="d-flex justify-content-between align-items-center mb-4">
+                            <h3 class="m-0">Specifications</h3>
+                        </div>
+                        <div id="product_specifications">
+                            <div class="row">
+                                <t t-foreach="attrib_categories" t-as="category">
+                                    <div class="col-lg-6">
+                                        <t t-call="website_sale_comparison.specifications_table"/>
+                                    </div>
+                                </t>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </t>
+        </xpath>
+    </template>
+
+    <template
+        id="accordion_specs_item"
+        name="Specifications Accordion Item"
+        inherit_id="website_sale.product_accordion"
+        active="False"
+    >
+        <xpath expr="//div[@id='more_information_accordion_item']" position="before">
+            <t
+                t-set="attrib_categories"
+                t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"
+            />
+            <t
+                t-set="product_variant_id"
+                t-value="product._get_first_possible_variant_id()"
+            />
+            <t t-if="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()">
+                <t t-foreach="attrib_categories" t-as="category">
+                    <div class="accordion-item">
+                        <div class="accordion-header my-0 h6">
+                            <button
+                                t-out="category.name"
+                                class="accordion-button collapsed fw-medium"
+                                type="button"
+                                data-bs-toggle="collapse"
+                                t-attf-data-bs-target="#category_accordion_{{category_index}}"
+                                aria-expanded="false"
+                                aria-controls="specifications"
+                            >
+                                <t t-if="category_size == 1">Specifications</t>
+                                <t t-else="">Others</t>
+                            </button>
+                        </div>
+                        <div
+                            t-attf-id="category_accordion_{{category_index}}"
+                            class="accordion-collapse collapse"
+                            data-bs-parent="#product_accordion"
+                        >
+                            <div class="accordion-body pt-0">
+                                <t t-call="website_sale_comparison.specifications_table" is_accordion="True"/>
+                            </div>
+                        </div>
+                    </div>
+                </t>
+            </t>
+        </xpath>
+    </template>
+
+    <template id="specifications_table" name="Specifications Table">
+        <table t-attf-class="table {{is_accordion and 'table-sm mb-0'}}">
+            <t t-if="len(attrib_categories) > 1 and not is_accordion">
+                <tr>
+                    <th class="text-start" colspan="2">
+                        <span t-if="category" t-field="category.name"/>
+                        <span t-else="">Others</span>
+                    </th>
+                </tr>
+            </t>
+            <tr
+                t-foreach="attrib_categories[category].filtered(lambda l: len(l.value_ids) > 1)"
+                t-as="ptal"
+            >
+                <t
+                    t-set="hide_border_bottom_classes"
+                    t-value="'border-bottom-0' if ptal_last and is_accordion else ''"
+                />
+                <td t-attf-class="w-25 {{hide_border_bottom_classes}} ps-0">
+                    <span t-field="ptal.attribute_id.name"/>
+                </td>
+                <td t-attf-class="w-75 {{hide_border_bottom_classes}} pe-0 text-muted text-end">
+                    <t t-foreach="ptal.value_ids" t-as="pav">
+                        <span t-field="pav.name"/><t t-if="not pav_last">, </t>
+                    </t>
+                </td>
+            </tr>
+            <t
+                t-set="single_value_attributes"
+                t-value="attrib_categories[category]._prepare_single_value_for_display()"
+            />
+            <tr t-foreach="single_value_attributes" t-as="attribute">
+                <t
+                    t-set="hide_border_bottom_classes"
+                    t-value="'border-bottom-0' if attribute_last and is_accordion else ''"
+                />
+                <td t-attf-class="w-25 {{hide_border_bottom_classes}} ps-0 ">
+                    <span t-field="attribute.name"/>
+                </td>
+                <td t-attf-class="w-75 {{hide_border_bottom_classes}} pe-0 text-muted text-end">
+                    <t t-foreach="single_value_attributes[attribute]" t-as="ptal">
+                        <span t-field="ptal.product_template_value_ids._only_active().name"/><t t-if="not ptal_last">, </t>
+                    </t>
+                </td>
+            </tr>
+        </table>
+    </template>
+
+    <template id="product_compare" name="Comparator Page">
+        <t t-call="website.layout" additional_title.translate="Shop Comparator">
+            <div id="wrap" class="o_wsale_comparison_page">
+                <div class="oe_structure oe_empty" id="oe_structure_website_sale_comparison_product_compare_1"/>
+                <div t-attf-class="oe_website_sale pb-5 #{website.shop_page_container == 'fluid' and 'container-fluid' or 'container'}">
+                    <h1 class="h4 mt-4 mb-3">Compare Products</h1>
+
+                    <!-- Mini sticky product overview (initially hidden) -->
+                    <div
+                        class="o_wsale_comparison_mini_sticky fixed-top d-none bg-body"
+                        id="miniStickyComparison"
+                    >
+                        <div t-attf-class="px-3 #{website.shop_page_container == 'fluid' and 'container-fluid' or 'container'}">
+                            <div class="o_wsale_comparison_scroll_container overflow-x-auto">
+                                <ul class="list-unstyled d-flex align-items-stretch mb-0 py-3">
+                                    <li
+                                        t-foreach="products"
+                                        t-as="product"
+                                        class="o_wsale_compare_table_column flex-shrink-0"
+                                    >
+                                        <a
+                                            t-att-href="product.website_url"
+                                            class="d-flex align-items-center gap-2 text-decoration-none text-truncate"
+                                        >
+                                            <t
+                                                t-set="combination_info"
+                                                t-value="product._get_combination_info_variant()"
+                                            />
+                                            <div class="o_mini_product_img_container flex-shrink-0">
+                                                <img
+                                                    t-att-src="product._get_image_1024_url()"
+                                                    class="img-fluid flex-shrink-0 w-100 h-100 rounded border object-fit-cover"
+                                                    t-att-alt="combination_info['display_name']"
+                                                />
+                                            </div>
+                                            <div class="text-truncate">
+                                                <h6
+                                                    class="flex-grow-1 text-truncate mb-0 small"
+                                                    t-out="combination_info['display_name']"
+                                                />
+                                                <div
+                                                    t-if="not combination_info['prevent_zero_price_sale']"
+                                                    class="text-wrap"
+                                                >
+                                                    <small
+                                                        class="mb-0 h6 text-body"
+                                                        t-out="combination_info['price']"
+                                                        t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
+                                                    />
+                                                    <del
+                                                        t-if="combination_info.get('compare_list_price') and (combination_info['compare_list_price'] &gt; combination_info['price'])"
+                                                        class="ms-1 mb-0 text-muted h6 small"
+                                                        t-out="combination_info['compare_list_price']"
+                                                        t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
+                                                    />
+                                                    <del
+                                                        t-else=""
+                                                        t-attf-class="ms-1 mb-0 text-muted h6 small {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
+                                                        t-out="combination_info['list_price']"
+                                                        t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="overflow-x-auto">
+                        <div
+                            class="table-comparator position-relative"
+                            id="o_comparelist_table"
+                        >
+                            <t
+                                t-set="attrib_categories"
+                                t-value="products._prepare_categories_for_display()"
+                            />
+                            <ul class="list-unstyled d-flex mb-0">
+                                <li
+                                    t-foreach="products"
+                                    t-as="product"
+                                    class="o_wsale_compare_table_column position-relative d-flex flex-column flex-shrink-0"
+                                >
+                                    <t
+                                        t-set="combination_info"
+                                        t-value="product._get_combination_info_variant()"
+                                    />
+                                    <a t-att-href="product.website_url">
+                                        <img
+                                            t-att-src="product._get_image_1024_url()"
+                                            class="img img-fluid w-100 h-100 object-fit-cover border rounded"
+                                            alt="Product image"
+                                        />
+                                    </a>
+                                    <button
+                                        class="o_comparelist_remove btn position-absolute top-0 end-0 mx-3 my-2 p-2 rounded-circle bg-white-75 lh-1"
+                                        aria-label="Remove product from comparison"
+                                        t-att-data-product-id="product.id"
+                                    >
+                                        <i class="oi" data-icon="close_small"/>
+                                    </button>
+                                </li>
+                            </ul>
+                            <ul class="list-unstyled d-flex mb-0 pt-3 pb-5">
+                                <li
+                                    t-foreach="products"
+                                    t-as="product"
+                                    class="o_wsale_compare_table_column position-relative d-flex flex-column flex-shrink-0"
+                                >
+                                    <t
+                                        t-set="combination_info"
+                                        t-value="product._get_combination_info_variant()"
+                                    />
+                                    <div
+                                        id="o_comparelist_product_name"
+                                        class="product_summary d-flex flex-column h-100"
+                                    >
+                                        <a t-att-href="product.website_url">
+                                            <h6 t-out="product.display_name"/>
+                                        </a>
+                                        <span t-if="not combination_info['prevent_zero_price_sale']">
+                                            <span t-out="combination_info['price']"
+                                                  t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
+                                            <del
+                                                t-if="combination_info.get('compare_list_price') and (combination_info['compare_list_price'] &gt; combination_info['price'])"
+                                                class="me-2 text-muted text-nowrap"
+                                                t-out="combination_info['compare_list_price']"
+                                                t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
+                                            />
+                                            <del
+                                                t-else=""
+                                                t-attf-class="text-muted me-2 text-nowrap {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
+                                                t-out="combination_info['list_price']"
+                                                t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
+                                            />
+                                            <small t-if="combination_info.get('base_unit_price')"
+                                                   class="d-block text-muted">
+                                                <t t-call="website_sale.base_unit_price"
+                                                    base_unit_price="combination_info['base_unit_price']"/>
+                                            </small>
+                                        </span>
+                                        <div class="mt-auto pt-3">
+                                            <a
+                                                t-if="combination_info['prevent_zero_price_sale']"
+                                                t-att-href="website.contact_us_button_url + '?subject=' + combination_info['display_name']"
+                                                class="btn btn-primary btn_cta"
+                                            >
+                                               Contact Us
+                                            </a>
+                                            <button
+                                                t-else=""
+                                                name="add_to_cart"
+                                                class="btn btn-primary"
+                                                t-att-data-product-id="product.id"
+                                                t-att-data-product-template-id="product.product_tmpl_id.id"
+                                                t-att-data-product-type="product.product_tmpl_id.type"
+                                                t-att-data-ptav-ids="json.dumps(product.product_template_attribute_value_ids.ids)"
+                                                t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
+                                            >
+                                                <i class="oi me-2" data-icon="shopping_cart" aria-hidden="true"/>Add to Cart
+                                            </button>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                            <div t-foreach="attrib_categories" t-as="category">
+                                <div class="w-100 py-3 bg-light bg-opacity-50">
+                                    <h6 class="d-table position-sticky start-0 mb-0 ps-2">
+                                        <span t-if="category" t-field="category.name"/>
+                                        <t t-else="">Uncategorized</t>
+                                    </h6>
+                                </div>
+                                <ul
+                                    t-foreach="attrib_categories[category]"
+                                    t-as="attribute"
+                                    t-att-class="'list-unstyled d-flex mb-0 py-3 o_ws_category_%d %s' % (category.id, 'border-bottom' if not attribute_last else '')"
+                                >
+                                    <li
+                                        t-foreach="attrib_categories[category][attribute]"
+                                        t-as="product"
+                                        class="o_wsale_compare_table_column d-flex flex-column flex-shrink-0"
+                                    >
+                                        <div id="o_comparelist_attribute">
+                                            <t t-if="attrib_categories[category][attribute][product]">
+                                                <div
+                                                    class="small text-muted"
+                                                    t-field="attribute.name"
+                                                />
+                                                <t
+                                                    t-foreach="attrib_categories[category][attribute][product]"
+                                                    t-as="ptav"
+                                                >
+                                                    <small t-field="ptav.name"/><t t-if="not ptav_last">, </t>
+                                                </t>
+                                            </t>
+                                            <t t-else="">
+                                                <div
+                                                    class="small text-muted"
+                                                    t-field="attribute.name"
+                                                />
+                                                <h6 class="small text-muted mb-0">-</h6>
+                                            </t>
+                                        </div>
+                                    </li>
+                                </ul>
+                            </div>
+                            <t t-if="is_view_active('website_sale.product_tags') and any([product.all_product_tag_ids for product in products])">
+                                <h6 class="d-table position-sticky start-0 mb-0">Tags</h6>
+                                <ul class="list-unstyled d-flex border-bottom mb-0 py-3">
+                                    <li
+                                        t-foreach="products"
+                                        t-as="product"
+                                        class="o_wsale_compare_table_column d-flex flex-column align-items-center flex-shrink-0"
+                                    >
+                                        <div class="small text-muted">Tags</div>
+                                        <t t-call="website_sale.product_tags" all_product_tags="product.all_product_tag_ids"/>
+                                    </li>
+                                </ul>
+                            </t>
+                        </div>
+                    </div>
+                </div>
+                <div class="oe_structure" id="oe_structure_website_sale_comparison_product_compare_2"/>
+                <div class="align-items-end bottom-0 d-flex end-0 justify-content-end o_not_editable p-0 position-absolute top-0 start-0 pe-none">
+                    <div class="o_wsale_comparison_bottom_bar sticky-bottom flex-shrink-0 w-100 bg-body pe-auto">
+                        <div t-attf-class="d-flex align-items-center py-3 #{website.shop_page_container == 'fluid' and 'container-fluid' or 'container'}">
+                            <a
+                                href="/shop"
+                                class="btn btn-link ps-0 text-decoration-none"
+                                aria-label="Continue shopping"
+                            >
+                                <i class="oi me-1" data-icon="chevron_backward"/> Back to shop
+                            </a>
+                            <button
+                                class="button btn btn-light ms-auto"
+                                aria-label="Remove all products from comparison"
+                                name="comparison_clear_all_button"
+                            >
+                                Remove all
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </t>
+    </template>
+
+</odoo>
diff --git a/addons/website_sale_comparison_wishlist/views/templates.xml b/addons/website_sale_comparison_wishlist/views/templates.xml
new file mode 100644
index 00000000000000..5a77432b26262b
--- /dev/null
+++ b/addons/website_sale_comparison_wishlist/views/templates.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="product_wishlist" inherit_id="website_sale_wishlist.product_wishlist">
+        <xpath expr="//div[hasclass('o_wsale_product_action_row')]" position="inside">
+            <t t-if="is_view_active('website_sale_comparison.add_to_compare')">
+                <t t-set="categories" t-value="wish.product_id.product_tmpl_id.valid_product_template_attribute_line_ids._prepare_categories_for_display()"/>
+                <t t-set="product_variant_id" t-value="wish.product_id.product_tmpl_id._get_first_possible_variant_id()"/>
+
+                <button
+                    t-if="product_variant_id and categories"
+                    class="btn btn-light o_add_to_compare d-inline-flex"
+                    aria-label="Add to compare"
+                    t-att-data-product-id="wish.product_id.id"
+                >
+                    <i class="oi oi-fw" data-icon="swap_horiz" role="presentation"/>
+                </button>
+
+                <!-- Render placeholder when product is not comparable to ensure alignment -->
+                <div t-else="" class="o_add_to_compare_placeholder btn btn-light pe-none opacity-0">
+                    <i class="oi oi-fw" data-icon="swap_horiz" aria-hidden="true"/>
+                </div>
+            </t>
+        </xpath>
+    </template>
+</odoo>
diff --git a/addons/website_sale_loyalty/views/loyalty_card_views.xml b/addons/website_sale_loyalty/views/loyalty_card_views.xml
index c5d23aa27b3f4e..9d88da6996f961 100644
--- a/addons/website_sale_loyalty/views/loyalty_card_views.xml
+++ b/addons/website_sale_loyalty/views/loyalty_card_views.xml
@@ -6,7 +6,7 @@
         <field name="inherit_id" ref="loyalty.loyalty_card_view_tree"/>
         <field name="arch" type="xml">
             <button name="action_coupon_send" position="after">
-                <button name="action_coupon_share" string="Share" type="object" icon="fa-share-alt"/>
+                <button name="action_coupon_share" string="Share" type="object" icon="family_history"/>
             </button>
         </field>
     </record>
diff --git a/addons/website_sale_loyalty/views/loyalty_program_views.xml b/addons/website_sale_loyalty/views/loyalty_program_views.xml
index 5bd1ed7e59f02b..7da27be2380456 100644
--- a/addons/website_sale_loyalty/views/loyalty_program_views.xml
+++ b/addons/website_sale_loyalty/views/loyalty_program_views.xml
@@ -43,7 +43,7 @@
                 <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
             </field>
             <field name="company_id" position="after">
-                <button name="action_program_share" string="Share" type="object" icon="fa-share-alt" invisible="program_type != 'promo_code'"/>
+                <button name="action_program_share" string="Share" type="object" icon="family_history" invisible="program_type != 'promo_code'"/>
             </field>
         </field>
     </record>
diff --git a/addons/website_sale_loyalty/wizard/res_config_settings_views.xml b/addons/website_sale_loyalty/wizard/res_config_settings_views.xml
index e4c8359998bd30..a988fe9dc16578 100644
--- a/addons/website_sale_loyalty/wizard/res_config_settings_views.xml
+++ b/addons/website_sale_loyalty/wizard/res_config_settings_views.xml
@@ -12,7 +12,7 @@
                         <button name="%(loyalty.loyalty_program_discount_loyalty_action)d"
                             type="action"
                             string="Loyalty Programs"
-                            icon="oi-arrow-right"
+                            icon="east"
                             class="btn-link"/>
                     </div>
                 </div>
diff --git a/addons/website_sale_slides/static/src/xml/website_slides_unsubscribe.xml b/addons/website_sale_slides/static/src/xml/website_slides_unsubscribe.xml
index 50d47d81e69c33..8b44a2195ff4f8 100644
--- a/addons/website_sale_slides/static/src/xml/website_slides_unsubscribe.xml
+++ b/addons/website_sale_slides/static/src/xml/website_slides_unsubscribe.xml
@@ -5,7 +5,7 @@
         <xpath expr="//t[@t-if=&quot;state.mode === 'leave'&quot;] //p[last()]" position="after">
             <t t-if="this.props.enroll === 'payment'">
                 <p class="d-flex align-items-center gap-3 alert alert-warning mb-0">
-                    <i class="fa fa-exclamation-triangle fa-3x"></i>
+                    <i class="oi oi-3x" data-icon="warning"></i>
                     <div>
                         This course is paid.<br/>
                         Leaving the course and re-enrolling afterwards means that you'll be charged again.
diff --git a/addons/website_sale_slides/views/slide_channel_views.xml b/addons/website_sale_slides/views/slide_channel_views.xml
index a24acd5c3c69ed..2f8a4d427b38dd 100644
--- a/addons/website_sale_slides/views/slide_channel_views.xml
+++ b/addons/website_sale_slides/views/slide_channel_views.xml
@@ -22,7 +22,7 @@
             <xpath expr="//button[@name='action_redirect_to_members']" position="after">
                 <button name="action_view_sales"
                     type="object"
-                    icon="fa-usd"
+                    icon="attach_money"
                     class="oe_stat_button"
                     invisible="enroll != 'payment'"
                     groups="sales_team.group_sale_salesman">
diff --git a/addons/website_sale_slides/views/website_slides_templates.xml b/addons/website_sale_slides/views/website_slides_templates.xml
index ee814130580b3f..be2abc5e06e720 100644
--- a/addons/website_sale_slides/views/website_slides_templates.xml
+++ b/addons/website_sale_slides/views/website_slides_templates.xml
@@ -16,7 +16,7 @@
 <template name="Buy Course To Download Resource" id="slide_aside_training_category_buy_course" inherit_id="website_slides.slide_aside_training_category">
     <xpath expr="//div[hasclass('o_wslides_js_course_join') and hasclass('o_wslides_no_access')]" position="inside">
         <li t-elif="aside_slide.channel_id.enroll == 'payment'" class="text-decoration-none small">
-            <i class="fa fa-download me-1"/>
+            <i class="oi me-1" data-icon="download"/>
             <t t-call="website_sale_slides.course_buy_course_link" for_resources="1" slide="aside_slide"/>
         </li>
     </xpath>
@@ -64,7 +64,7 @@
 <template name="Buy Course To Download Resource Fullscreen" id="slide_fullscreen_sidebar_category_buy_course" inherit_id="website_slides.slide_fullscreen_sidebar_category">
     <xpath expr="//div[hasclass('o_wslides_js_course_join') and hasclass('o_wslides_no_access')]" position="inside">
         <li t-elif="slide.channel_id.enroll == 'payment'" class="o_wslides_fs_slide_link mb-1">
-            <i class="fa fa-download me-1"/>
+            <i class="oi me-1" data-icon="download"/>
             <t t-call="website_sale_slides.course_buy_course_link" for_resources="1"/>
         </li>
     </xpath>
@@ -165,7 +165,7 @@
                 t-att-data-product-type="product.product_tmpl_id.type"
                 t-att-data-show-quantity="False"
             >
-                <i class="fa fa-shopping-cart"></i> Add to Cart
+                <i class="oi" data-icon="shopping_cart"></i> Add to Cart
             </button>
         </div>
     </t>
@@ -187,7 +187,7 @@
             t-att-data-product-type="product.product_tmpl_id.type"
             t-att-data-show-quantity="False"
         >
-            <i class="fa fa-bolt"></i> Buy Now
+            <i class="oi" data-icon="flash_on"></i> Buy Now
         </button>
     </button>
     <button name="add_to_cart" position="attributes">
diff --git a/addons/website_sale_stock/static/src/js/product/product.xml b/addons/website_sale_stock/static/src/js/product/product.xml
index 1ce25171372003..8eb215d03909fd 100644
--- a/addons/website_sale_stock/static/src/js/product/product.xml
+++ b/addons/website_sale_stock/static/src/js/product/product.xml
@@ -23,7 +23,7 @@
             t-if="this.isOutOfStock()"
             class="text-danger fw-bold"
         >
-            <i class="fa fa-times me-1"/>
+            <i class="oi me-1" data-icon="close"/>
             Out of stock
         </div>
     </t>
diff --git a/addons/website_sale_stock/static/src/js/product_card/product_card.xml b/addons/website_sale_stock/static/src/js/product_card/product_card.xml
index d53d9f8790c381..4fff7ca16279a4 100644
--- a/addons/website_sale_stock/static/src/js/product_card/product_card.xml
+++ b/addons/website_sale_stock/static/src/js/product_card/product_card.xml
@@ -21,7 +21,7 @@
                 t-if="!this.props.product.isQuantityAllowed(this.props.quantity)"
                 class="badge text-bg-danger"
             >
-                <i class="fa fa-circle me-2"/>
+                <i class="oi oi-filled me-2" data-icon="circle"/>
                 <span>Out of Stock</span>
             </span>
             <span
@@ -29,7 +29,7 @@
                 class="text-warning"
             >
                 <i
-                    class="fa fa-warning"
+                    class="oi" data-icon="warning"
                     data-toggle="tooltip"
                     data-trigger="click hover focus"
                     t-att-title="this.allQuantitySelectedTooltip"
diff --git a/addons/website_sale_stock/static/src/js/tours/website_sale_stock_reorder_from_portal.js b/addons/website_sale_stock/static/src/js/tours/website_sale_stock_reorder_from_portal.js
index 5d9f19a3631dbb..809e27f2772467 100644
--- a/addons/website_sale_stock/static/src/js/tours/website_sale_stock_reorder_from_portal.js
+++ b/addons/website_sale_stock/static/src/js/tours/website_sale_stock_reorder_from_portal.js
@@ -20,7 +20,7 @@ registry.category("web_tour.tours").add('website_sale_stock_reorder_from_portal'
         },
         {
             content: "Check that there is one product that does not have enough stock",
-            trigger: "div.o_cart_product i.fa.fa-warning[title='You ask for 2 products but only 1 is available.']",
+            trigger: "div.o_cart_product i[data-icon='warning'][title='You ask for 2 products but only 1 is available.']",
         },
     ]
 });
diff --git a/addons/website_sale_stock/static/src/xml/website_sale_stock_product_availability.xml b/addons/website_sale_stock/static/src/xml/website_sale_stock_product_availability.xml
index 09742f2f505fbe..78b2484d6bf2b7 100644
--- a/addons/website_sale_stock/static/src/xml/website_sale_stock_product_availability.xml
+++ b/addons/website_sale_stock/static/src/xml/website_sale_stock_product_availability.xml
@@ -13,7 +13,7 @@
                 <div id="out_of_stock_message" class="d-flex flex-column gap-1 align-items-start">
                     <t t-if="!allow_out_of_stock_order">
                         <div class="badge text-bg-danger">
-                            <i class="fa fa-circle me-2 text-danger"/>Out of Stock
+                            <i class="oi oi-filled me-2 text-danger" data-icon="circle"/>Out of Stock
                         </div>
                     </t>
                     <t t-if="has_out_of_stock_message" t-out="out_of_stock_message"/>
@@ -21,7 +21,7 @@
                 <div id="stock_notification_div" t-if="!allow_out_of_stock_order">
                     <div class="btn btn-link px-0" t-if="!has_stock_notification"
                          id="product_stock_notification_message">
-                        <i class="fa fa-envelope-o me-2"/>Get notified when back in stock
+                        <i class="oi me-2" data-icon="mail"/>Get notified when back in stock
                     </div>
                     <div id="stock_notification_form" class="d-none">
                         <div class="input-group">
@@ -33,7 +33,7 @@
                                 class="btn btn-primary"
                                 t-att-data-product-id="product_id"
                             >
-                                <i class="fa fa-paper-plane"/>
+                                <i class="oi oi-filled" data-icon="send"/>
                             </button>
                         </div>
                         <div id="stock_notification_input_incorrect" class="d-none form-text text-danger">
@@ -44,7 +44,7 @@
                     <div id="stock_notification_success_message"
                          t-att-class="has_stock_notification ? '' : 'd-none'">
                         <div class="py-2 small text-muted">
-                            <i class="fa fa-bell me-2"/>We'll notify you once the product is back in stock
+                            <i class="oi oi-filled me-2" data-icon="notifications"/>We'll notify you once the product is back in stock
                         </div>
                     </div>
                 </div>
@@ -54,7 +54,7 @@
                 t-elif="show_availability and free_qty lte available_threshold"
                 t-attf-class="availability_message_#{product_template} my-3 badge text-bg-warning"
             >
-                <i class="fa fa-circle text-warning me-2" role="presentation"/>
+                <i class="oi oi-filled text-warning me-2" data-icon="circle" role="presentation"/>
                 <t t-out="formatQuantity(free_qty)"/> <t t-out="uom_name" /> in stock
                 <span
                     id="already_in_cart_message"
@@ -84,11 +84,11 @@
                 t-att-data-product-id="product_id"
                 t-att-data-product-template-id="product_id"
             >
-                <i class="fa fa-heart-o me-2"/>Add to wishlist
+                <i class="oi me-2" data-icon="favorite"/>Add to wishlist
             </button>
             <div id="wsale_added_to_your_wishlist_alert" t-att-class="is_in_wishlist ? '' : 'd-none'">
                 <div class="btn btn-outline-primary disabled">
-                    <i class="fa fa-heart me-2"/>Added to your wishlist
+                    <i class="oi oi-filled me-2" data-icon="favorite"/>Added to your wishlist
                 </div>
             </div>
 
diff --git a/addons/website_sale_stock/views/wishlist_templates.xml b/addons/website_sale_stock/views/wishlist_templates.xml
index f9afeb6c4fa854..81ba68359a12a6 100644
--- a/addons/website_sale_stock/views/wishlist_templates.xml
+++ b/addons/website_sale_stock/views/wishlist_templates.xml
@@ -7,7 +7,7 @@
                     t-if="wish.product_id._is_sold_out() and not wish.product_id.allow_out_of_stock_order"
                     class="o_wsale_stock_badge badge text-bg-danger align-self-start align-top"
                 >
-                    <i class="fa fa-circle text-danger me-1" aria-hidden="true"/>
+                    <i class="oi oi-filled text-danger me-1" data-icon="circle" aria-hidden="true"/>
                     Out of stock
                 </span>
             </t>
diff --git a/addons/website_sale_wishlist/static/src/interactions/add_to_wishlist.js b/addons/website_sale_wishlist/static/src/interactions/add_to_wishlist.js
new file mode 100644
index 00000000000000..0577ae2363b308
--- /dev/null
+++ b/addons/website_sale_wishlist/static/src/interactions/add_to_wishlist.js
@@ -0,0 +1,65 @@
+import { rpc } from '@web/core/network/rpc';
+import { registry } from '@web/core/registry';
+import { Interaction } from '@web/public/interaction';
+import wSaleUtils from '@website_sale/js/website_sale_utils';
+import wishlistUtils from '@website_sale_wishlist/js/website_sale_wishlist_utils';
+
+export class AddToWishlist extends Interaction {
+    static selector = '.o_add_wishlist, .o_add_wishlist_dyn';
+    dynamicSelectors = {
+        ...this.dynamicSelectors,
+        _productEl: () => this.el.closest('.js_product'),
+    };
+    dynamicContent = {
+        _root: { 't-on-click': this.addProduct },
+        _productEl: { 't-on-product_changed': this.onProductChanged },
+    };
+
+    /**
+     * Add a product to the wishlist.
+     *
+     * @param {Event} ev
+     */
+    async addProduct(ev) {
+        const button = ev.currentTarget;
+        let productId = parseInt(button.dataset.productId);
+        if (!productId) {
+            const productEl = button.closest('.js_product');
+            productId = await this.waitFor(rpc('/sale/create_product_variant', {
+                product_template_id: parseInt(button.dataset.productTemplateId),
+                product_template_attribute_value_ids: productEl
+                    ? wSaleUtils.getSelectedAttributeValues(productEl) : [],
+            }));
+        }
+        if (!productId || wishlistUtils.getWishlistProductIds().includes(productId)) return;
+
+        await this.waitFor(rpc('/shop/wishlist/add', { product_id: productId }));
+        wishlistUtils.addWishlistProduct(productId);
+        wishlistUtils.updateWishlistNavBar();
+        button.disabled = true;
+        if (button.classList.contains('o_add_wishlist')) {
+            const iconEl = button.querySelector('.oi');
+            if (iconEl) {
+                iconEl.classList.toggle('oi-filled');
+            }
+        }
+    }
+
+    /**
+     * Update the "add to wishlist" button based on the selected variant.
+     *
+     * @param {CustomEvent} event
+     */
+    onProductChanged(event) {
+        const button = event.currentTarget.querySelector('.o_add_wishlist_dyn');
+        if (button) {
+            const { productId } = event.detail;
+            button.disabled = wishlistUtils.getWishlistProductIds().includes(parseInt(productId));
+            button.dataset.productId = productId;
+        }
+    }
+}
+
+registry
+    .category('public.interactions')
+    .add('website_sale_wishlist.add_to_wishlist', AddToWishlist);
diff --git a/addons/website_slides/models/slide_channel.py b/addons/website_slides/models/slide_channel.py
index 34b05da385fa93..c5740fa74f8a29 100644
--- a/addons/website_slides/models/slide_channel.py
+++ b/addons/website_slides/models/slide_channel.py
@@ -1099,7 +1099,7 @@ def _search_get_detail(self, website, order, options):
             'search_fields': search_fields,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-graduation-cap',
+            'icon': 'school',
         }
 
     def _search_render_results(self, fetch_fields, mapping, icon, limit):
diff --git a/addons/website_slides/models/slide_slide.py b/addons/website_slides/models/slide_slide.py
index 7b6d29a7365d15..1136aca1754a93 100644
--- a/addons/website_slides/models/slide_slide.py
+++ b/addons/website_slides/models/slide_slide.py
@@ -112,7 +112,7 @@ class SlideSlide(models.Model):
     image_google_url = fields.Char('Image Link', related='url', readonly=False,
         help="Link of the image (we currently only support Google Drive as source)")
     # content - documents
-    slide_icon_class = fields.Char('Slide Icon fa-class', compute='_compute_slide_icon_class')
+    slide_icon_class = fields.Char('Slide Icon oi-class', compute='_compute_slide_icon_class')
     slide_type = fields.Selection([
         ('image', 'Image'),
         ('article', 'Article'),
@@ -327,19 +327,19 @@ def _compute_category_completion_time(self):
     @api.depends('slide_type')
     def _compute_slide_icon_class(self):
         icon_per_slide_type = {
-            'image': 'fa-file-picture-o',
-            'article': 'fa-file-text-o',
-            'quiz': 'fa-question-circle-o',
-            'pdf': 'fa-file-pdf-o',
-            'sheet': 'fa-file-excel-o',
-            'doc': 'fa-file-word-o',
-            'slides': 'fa-file-powerpoint-o',
-            'youtube_video': 'fa-youtube-play',
-            'google_drive_video': 'fa-play-circle-o',
-            'vimeo_video': 'fa-vimeo',
+            'image': 'image',
+            'article': 'article',
+            'quiz': 'help_outline',
+            'pdf': 'picture_as_pdf',
+            'sheet': 'table_chart',
+            'doc': 'description',
+            'slides': 'slideshow',
+            'youtube_video': 'oi_youtube-play',
+            'google_drive_video': 'play_circle',
+            'vimeo_video': 'oi_vimeo',
         }
         for slide in self:
-            slide.slide_icon_class = icon_per_slide_type.get(slide.slide_type, 'fa-file-o')
+            slide.slide_icon_class = icon_per_slide_type.get(slide.slide_type, 'description')
 
     @api.depends('slide_category', 'source_type', 'video_source_type')
     def _compute_slide_type(self):
@@ -1300,23 +1300,23 @@ def _search_get_detail(self, website, order, options):
             'search_fields': search_fields,
             'fetch_fields': fetch_fields,
             'mapping': mapping,
-            'icon': 'fa-shopping-cart',
+            'icon': 'shopping_cart',
             'order': 'name desc, id desc' if 'name desc' in order else 'name asc, id desc',
         }
 
     def _search_render_results(self, fetch_fields, mapping, icon, limit):
         icon_per_category = {
-            'infographic': 'fa-file-picture-o',
-            'article': 'fa-file-text',
-            'presentation': 'fa-file-pdf-o',
-            'document': 'fa-file-pdf-o',
-            'video': 'fa-play-circle',
-            'quiz': 'fa-question-circle',
-            'link': 'fa-file-code-o', # appears in template "slide_icon"
+            'infographic': 'image',
+            'article': 'article',
+            'presentation': 'picture_as_pdf',
+            'document': 'picture_as_pdf',
+            'video': 'play_circle',
+            'quiz': 'help',
+            'link': 'code', # appears in template "slide_icon"
         }
         results_data = super()._search_render_results(fetch_fields, mapping, icon, limit)
         for slide, data in zip(self, results_data):
-            data['_fa'] = icon_per_category.get(slide.slide_category, 'fa-file-pdf-o')
+            data['_icon'] = icon_per_category.get(slide.slide_category, 'description')
             data['url'] = slide.website_absolute_url
             data['course'] = _('Course: %s', slide.channel_id.name)
             data['course_url'] = slide.channel_id.website_absolute_url
diff --git a/addons/website_slides/static/src/core/web/activity_patch.xml b/addons/website_slides/static/src/core/web/activity_patch.xml
index c877c3acb685b8..5feea72a7786d9 100644
--- a/addons/website_slides/static/src/core/web/activity_patch.xml
+++ b/addons/website_slides/static/src/core/web/activity_patch.xml
@@ -4,10 +4,10 @@
         <xpath expr="//t[@name='tools']" position="replace">
             <t t-if="this.props.activity.request_partner_id and this.props.activity.res_model === 'slide.channel'">
                 <button class="btn btn-link" t-on-click="this.onGrantAccess">
-                    <i class="fa fa-check"/> Grant Access
+                    <i class="oi" data-icon="check"/> Grant Access
                 </button>
                 <button class="btn btn-link" t-on-click="this.onRefuseAccess">
-                    <i class="fa fa-times"/> Refuse Access
+                    <i class="oi" data-icon="close"/> Refuse Access
                 </button>
             </t>
             <t t-else="">$0</t>
diff --git a/addons/website_slides/static/src/img/slide_demo_gardening_2.jpg b/addons/website_slides/static/src/img/slide_demo_gardening_2.jpg
index 69af99a7163961..be8df9580b200d 100644
Binary files a/addons/website_slides/static/src/img/slide_demo_gardening_2.jpg and b/addons/website_slides/static/src/img/slide_demo_gardening_2.jpg differ
diff --git a/addons/website_slides/static/src/img/slide_demo_thumb_l0JZ25VvbwE.jpg b/addons/website_slides/static/src/img/slide_demo_thumb_l0JZ25VvbwE.jpg
index 1afde8b506b762..3cc7598ede9904 100644
Binary files a/addons/website_slides/static/src/img/slide_demo_thumb_l0JZ25VvbwE.jpg and b/addons/website_slides/static/src/img/slide_demo_thumb_l0JZ25VvbwE.jpg differ
diff --git a/addons/website_slides/static/src/img/slide_demo_tree_infographic_2.jpg b/addons/website_slides/static/src/img/slide_demo_tree_infographic_2.jpg
index 76071b34ea357a..2754c12f187e0b 100644
Binary files a/addons/website_slides/static/src/img/slide_demo_tree_infographic_2.jpg and b/addons/website_slides/static/src/img/slide_demo_tree_infographic_2.jpg differ
diff --git a/addons/website_slides/static/src/img/slide_demo_wood_infographic_1.jpg b/addons/website_slides/static/src/img/slide_demo_wood_infographic_1.jpg
index 71985e2eb32394..183a8f5698ddb3 100644
Binary files a/addons/website_slides/static/src/img/slide_demo_wood_infographic_1.jpg and b/addons/website_slides/static/src/img/slide_demo_wood_infographic_1.jpg differ
diff --git a/addons/website_slides/static/src/interactions/slide_like.js b/addons/website_slides/static/src/interactions/slide_like.js
index 4e23ddc014349d..49a8d2092268ad 100644
--- a/addons/website_slides/static/src/interactions/slide_like.js
+++ b/addons/website_slides/static/src/interactions/slide_like.js
@@ -42,20 +42,18 @@ export class SlideLike extends Interaction {
         }))
         if (!data.error) {
             const likeButtonEl = this.el.querySelector('span.o_wslides_js_slide_like_up');
-            const likesIcon = likeButtonEl.querySelector('i.fa');
+            const likesIcon = likeButtonEl.querySelector('i.oi');
             const dislikeButtonEl = this.el.querySelector('span.o_wslides_js_slide_like_down');
-            const dislikesIcon = dislikeButtonEl.querySelector('i.fa');
+            const dislikesIcon = dislikeButtonEl.querySelector('i.oi');
 
             // update 'thumbs-up' button with latest state
             likeButtonEl.dataset.userVote = data.user_vote;
             likeButtonEl.querySelector('span').innerText = data.likes;
-            likesIcon.classList.toggle("fa-thumbs-up", data.user_vote === 1);
-            likesIcon.classList.toggle("fa-thumbs-o-up", data.user_vote !== 1);
+            likesIcon.classList.toggle("oi-filled", data.user_vote === 1);
             // update 'thumbs-down' button with latest state
             dislikeButtonEl.dataset.userVote = data.user_vote;
             dislikeButtonEl.querySelector('span').innerText = data.dislikes;
-            dislikesIcon.classList.toggle("fa-thumbs-down", data.user_vote === -1);
-            dislikesIcon.classList.toggle("fa-thumbs-o-down", data.user_vote !== -1);
+            dislikesIcon.classList.toggle("oi-filled", data.user_vote === -1);
         } else {
             if (data.error === 'public_user') {
                 const tags = {
diff --git a/addons/website_slides/static/src/interactions/slides_course_progressbar.js b/addons/website_slides/static/src/interactions/slides_course_progressbar.js
index bbf0e4016c4a3b..a2a8ad6e721474 100644
--- a/addons/website_slides/static/src/interactions/slides_course_progressbar.js
+++ b/addons/website_slides/static/src/interactions/slides_course_progressbar.js
@@ -66,7 +66,7 @@ export class WebsiteSlidesProgressBar extends Interaction {
             "website.slides.sidebar.done.button",
             {
                 slideId: slide.id,
-                uncompletedIcon: buttonEl.dataset.uncompletedIcon ?? "fa-circle-thin",
+                uncompletedIcon: buttonEl.dataset.uncompletedIcon ?? "radio_button_unchecked",
                 slideCompleted: slide.completed ? 1 : undefined,
                 canSelfMarkUncompleted: slide.canSelfMarkUncompleted ? "True" : "",
                 canSelfMarkCompleted: slide.canSelfMarkCompleted ? "True" : "",
diff --git a/addons/website_slides/static/src/interactions/slides_course_quiz.js b/addons/website_slides/static/src/interactions/slides_course_quiz.js
index b158eeaafe49cd..bb0a766f71d23d 100644
--- a/addons/website_slides/static/src/interactions/slides_course_quiz.js
+++ b/addons/website_slides/static/src/interactions/slides_course_quiz.js
@@ -148,23 +148,23 @@ export class WebsiteSlidesQuiz extends Interaction {
             const questionId = Number(questionEl.dataset.questionId);
             const isCorrect = this.quiz.answers[questionId].is_correct;
             for (const answerEl of questionEl.querySelectorAll("a.o_wslides_quiz_answer")) {
-                for (const iconEl of answerEl.querySelectorAll("i.fa")) {
+                for (const iconEl of answerEl.querySelectorAll("i.oi")) {
                     iconEl.classList.add("d-none");
                 }
                 if (answerEl.querySelector("input[type=radio]").checked) {
                     if (isCorrect) {
                         answerEl.classList.remove("list-group-item-danger");
                         answerEl.classList.add("list-group-item-success");
-                        answerEl.querySelector("i.fa-check-circle").classList.remove("d-none");
+                        answerEl.querySelector("i[data-icon='check_circle']").classList.remove("d-none");
                     } else {
                         answerEl.classList.remove("list-group-item-success");
                         answerEl.classList.add("list-group-item-danger");
-                        answerEl.querySelector("i.fa-times-circle").classList.remove("d-none");
+                        answerEl.querySelector("i[data-icon='cancel']").classList.remove("d-none");
                         answerEl.querySelector("label input").checked = false;
                     }
                 } else {
                     answerEl.classList.remove("list-group-item-danger", "list-group-item-success");
-                    answerEl.querySelector("i.fa-circle").classList.remove("d-none");
+                    answerEl.querySelector("i[data-icon='circle'].oi-filled").classList.remove("d-none");
                 }
             }
             const comment = this.quiz.answers[questionId].comment;
diff --git a/addons/website_slides/static/src/js/public/components/slide_quiz_finish_dialog/slide_quiz_finish_dialog.xml b/addons/website_slides/static/src/js/public/components/slide_quiz_finish_dialog/slide_quiz_finish_dialog.xml
index 6da6f84deda389..5f211be329fc21 100644
--- a/addons/website_slides/static/src/js/public/components/slide_quiz_finish_dialog/slide_quiz_finish_dialog.xml
+++ b/addons/website_slides/static/src/js/public/components/slide_quiz_finish_dialog/slide_quiz_finish_dialog.xml
@@ -42,7 +42,7 @@
                         Check Profile
                     </a>
                     <button t-if="this.props.hasNext" type="button" class="btn btn-light border" t-on-click="this.onClickNext">
-                        Next <i class="oi oi-chevron-right"/>
+                        Next <i class="oi" data-icon="chevron_forward"/>
                     </button>
                     <a t-else="" type="button" href="/slides" class="btn btn-light border">End course</a>
                 </div>
diff --git a/addons/website_slides/static/src/js/public/components/slide_share_dialog/email_sharing_input.xml b/addons/website_slides/static/src/js/public/components/slide_share_dialog/email_sharing_input.xml
index 9ecb4f985d0592..335597acf59b2b 100644
--- a/addons/website_slides/static/src/js/public/components/slide_share_dialog/email_sharing_input.xml
+++ b/addons/website_slides/static/src/js/public/components/slide_share_dialog/email_sharing_input.xml
@@ -8,7 +8,7 @@
                        class="form-control" t-att-class="{'is-invalid': this.state.isInvalid}"
                        t-on-keypress="this.onKeyPress"/>
                 <button type="button" class="btn btn-primary" t-on-click.stop="this.onShareByEmailClick">
-                    <i class="fa fa-envelope-o mx-1"/>Send Email
+                    <i class="oi mx-1" data-icon="mail"/>Send Email
                 </button>
             </div>
             <div t-if="this.state.isDone or this.isWebsiteUser" class="alert alert-info" role="alert">
diff --git a/addons/website_slides/static/src/js/public/components/slide_share_dialog/slide_share_dialog.xml b/addons/website_slides/static/src/js/public/components/slide_share_dialog/slide_share_dialog.xml
index b79dce02d63fb9..cbdf6a10eca56b 100644
--- a/addons/website_slides/static/src/js/public/components/slide_share_dialog/slide_share_dialog.xml
+++ b/addons/website_slides/static/src/js/public/components/slide_share_dialog/slide_share_dialog.xml
@@ -20,23 +20,23 @@
                         <div class="s_share">
                             <a class="btn border bg-white" aria-label="Share on Facebook" title="Share on Facebook"
                                t-on-click.prevent="() => this.onSocialShareClick(`https://www.facebook.com/sharer/sharer.php?u=${this.props.url}`)">
-                                <i class="fa fa-facebook-square fa-fw"/>
+                                <i class="oi oi-fw" data-icon="oi_facebook-square"/>
                             </a>
                             <a class="btn border bg-white" aria-label="Share on X" title="Share on X"
                                t-on-click.prevent="() => this.onSocialShareClick(`https://twitter.com/intent/tweet?text=${this.props.name}&amp;url=${this.props.url}`)">
-                                <i class="fa fa-twitter fa-fw"/>
+                                <i class="oi oi-fw" data-icon="oi_x"/>
                             </a>
                             <a class="btn border bg-white" aria-label="Share on LinkedIn" title="Share on LinkedIn"
                                t-on-click.prevent="() => this.onSocialShareClick(`http://www.linkedin.com/sharing/share-offsite/?url=${this.props.url}`)">
-                                <i class="fa fa-linkedin fa-fw"/>
+                                <i class="oi oi-fw" data-icon="oi_linkedin"/>
                             </a>
                             <a class="btn border bg-white" aria-label="Share on Whatsapp" title="Share on Whatsapp"
                                t-on-click.prevent="() => this.onSocialShareClick(`https://wa.me/?text=${window.location.href}`)">
-                                <i class="fa fa-whatsapp fa-fw"/>
+                                <i class="oi oi-fw" data-icon="oi_whatsapp"/>
                             </a>
                             <a class=" btn border bg-white" aria-label="Share on Pinterest" title="Share on Pinterest"
                                t-on-click.prevent="() => this.onSocialShareClick(`http://pinterest.com/pin/create/button/?url=${window.location.href}`)">
-                                <i class="fa fa-pinterest fa-fw"/>
+                                <i class="oi oi-fw" data-icon="oi_pinterest"/>
                             </a>
                         </div>
                     </div>
diff --git a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_category.xml b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_category.xml
index 567250e6ad797f..32978fc1bc168b 100644
--- a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_category.xml
+++ b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_category.xml
@@ -155,7 +155,7 @@
         <t t-custom-portal="'.o_w_slide_upload_dialog_content'">
             <div class="o_wslides_slide_upload_loading position-absolute h-100 w-100 text-center d-flex flex-column justify-content-center">
                 <h2 class="text-white">
-                    <span class="fa fa-circle-o-notch fa-spin"/>
+                    <span class="oi oi-spin" data-icon="autorenew"/>
                     <span>Loading content...</span>
                 </h2>
             </div>
diff --git a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.js b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.js
index c43a348d64c05d..18021a4ad513c0 100644
--- a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.js
+++ b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.js
@@ -21,11 +21,11 @@ export class SlideUploadDialog extends Component {
         installModuleData: null,
     };
     static categoryData = {
-        document: { icon: "fa-file-pdf-o", label: _t("Presentation / Doc") },
-        infographic: { icon: "fa-file-image-o", label: _t("Image") },
-        article: { icon: "fa-file-text", label: _t("Article") },
-        video: { icon: "fa-file-video-o", label: _t("Video") },
-        quiz: { icon: "fa-question-circle", label: _t("Quiz") },
+        document: { icon: "picture_as_pdf", label: _t("Presentation / Doc") },
+        infographic: { icon: "image", label: _t("Image") },
+        article: { icon: "article", icon_class: "oi-filled", label: _t("Article") },
+        video: { icon: "movie", label: _t("Video") },
+        quiz: { icon: "help", label: _t("Quiz") },
     };
     static components = {
         Dialog,
diff --git a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.xml b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.xml
index 9b27a43137e537..9b900c6b412f3e 100644
--- a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.xml
+++ b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.xml
@@ -107,8 +107,8 @@
     
     <t t-name="website_slides.UploadInProgressDialog">
         <div class="text-center" role="status">
-            <div class="fa-3x">
-                <i class="fa fa-circle-o-notch fa-spin"></i>
+            <div class="oi-3x">
+                <i class="oi oi-spin" data-icon="autorenew"></i>
             </div>
             <h4>Uploading document ...</h4>
         </div>
diff --git a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog_select.js b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog_select.js
index e9e46969b35982..f40901935db5d0 100644
--- a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog_select.js
+++ b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog_select.js
@@ -18,6 +18,7 @@ export class SlideCategoryIcon extends Component {
             type: Object,
             shape: {
                 icon: String,
+                icon_class: String,
                 label: String,
             },
         },
diff --git a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog_select.xml b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog_select.xml
index 27e3e3da120cd5..4f560af6121f45 100644
--- a/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog_select.xml
+++ b/addons/website_slides/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog_select.xml
@@ -36,7 +36,7 @@
             t-att-data-slide-category="this.props.slideCategory"
             class="content-type d-flex flex-column align-items-center mb-4 btn rounded border text-600 p-3"
         >
-            <i t-attf-class="fa #{this.props.categoryData.icon} mb-2 fa-3x"/>
+            <i t-attf-class="oi oi-3x #{this.props.categoryData.icon_class} mb-2" t-attf-data-icon="#{this.props.categoryData.icon}"/>
             <t t-out="this.props.categoryData.label"/>
         </a>
     </t>
@@ -46,7 +46,7 @@
             href="#" t-on-click="() => this.props.onClickInstallModuleIcon(this.props.moduleId)"
             t-att-title="this.props.title"
             t-att-data-module-id="this.props.moduleId">
-            <i class="fa fa-trophy"/> <t t-out="this.props.motivational"/><span class="text-primary"> Install the <t t-out="this.props.title"/> app.</span>
+            <i class="oi oi-filled" data-icon="trophy"/> <t t-out="this.props.motivational"/><span class="text-primary"> Install the <t t-out="this.props.title"/> app.</span>
         </a>
     </t>
 </templates>
diff --git a/addons/website_slides/static/src/js/public/components/slides_course_quiz_question_form/slides_course_quiz_question_form.xml b/addons/website_slides/static/src/js/public/components/slides_course_quiz_question_form/slides_course_quiz_question_form.xml
index 190d242ccd771f..d048d6d4b8cf01 100644
--- a/addons/website_slides/static/src/js/public/components/slides_course_quiz_question_form/slides_course_quiz_question_form.xml
+++ b/addons/website_slides/static/src/js/public/components/slides_course_quiz_question_form/slides_course_quiz_question_form.xml
@@ -24,7 +24,7 @@
             <div>
                 <t t-call="slide.quiz.buttons"/>
                 <div class="ms-2 text-danger o_wslides_js_quiz_validation_error" t-att-class="{ 'd-none': !this.state.error }">
-                    <i class="fa fa-close me-1"/>
+                    <i class="oi me-1" data-icon="close"/>
                     <span class="o_wslides_js_quiz_validation_error_text"><t t-out="this.state.error || ''" /></span>
                 </div>
             </div>
@@ -42,21 +42,23 @@
                                 <a class="o_wslides_js_quiz_is_correct" title="This is the correct answer">
                                     <label class="my-0">
                                         <input class="d-none" type="radio" name="radio" t-att-checked="answer.isCorrect" t-on-change="(event) => this.onIsCorrectClick(answer, event.currentTarget.checked)" />
-                                        <i class="o_wslides_js_quiz_icon fa fa-lg fa-check-circle-o text-muted" />
+                                        <i class="o_wslides_js_quiz_icon oi oi-lg text-muted" data-icon="check_circle"/>
                                     </label>
                                 </a>
                             </div>
                         </div>
                     </div>
                     <i
-                        t-attf-class="o_wslides_js_quiz_icon o_wslides_js_quiz_comment_answer fa fa-lg fa-info-circle col-auto p-md-2 py-2 ps-2 pe-1 #{answer.comment.trim() !== '' ? 'text-primary' : 'text-muted'}"
+                        t-attf-class="o_wslides_js_quiz_icon o_wslides_js_quiz_comment_answer oi oi-lg col-auto p-md-2 py-2 ps-2 pe-1 #{answer.comment.trim() !== '' ? 'text-primary' : 'text-muted'}" data-icon="info"
                         t-on-click="this.onToggleAnswerLineCommentClick" title="Add comment on this answer" />
                     <i
-                        class="o_wslides_js_quiz_icon o_wslides_js_quiz_add_answer fa fa-lg fa-plus-circle col-auto p-md-2 py-2 px-1 text-muted"
+                        class="o_wslides_js_quiz_icon o_wslides_js_quiz_add_answer oi oi-lg col-auto p-md-2 py-2 px-1 text-muted"
+                        data-icon="add_circle"
                         title="Add an answer below this one"
                         t-on-click="() => this.onAddAnswerLineClick(answer)"/>
                     <i
-                        class="o_wslides_js_quiz_icon o_wslides_js_quiz_remove_answer fa fa-lg fa-trash-o col-auto p-md-2 py-2 px-1 text-muted"
+                        class="o_wslides_js_quiz_icon o_wslides_js_quiz_remove_answer oi oi-lg col-auto p-md-2 py-2 px-1 text-muted"
+                        data-icon="delete"
                         title="Remove this answer"
                         t-on-click="() => this.onRemoveAnswerLineClick(answer)"/>
                 </div>
@@ -65,7 +67,8 @@
                         <input t-custom-model="answer.comment" type="text" class="form-control mt-1" placeholder="This is the correct answer, congratulations"/>
                     </div>
                     <i
-                        class="o_wslides_js_quiz_icon o_wslides_js_quiz_remove_answer_comment fa fa-lg fa-trash-o p-2 text-muted col-auto"
+                        class="o_wslides_js_quiz_icon o_wslides_js_quiz_remove_answer_comment oi oi-lg p-2 text-muted col-auto"
+                        data-icon="delete"
                         title="Remove the answer comment"
                         t-on-click="(event) => this.onRemoveAnswerLineCommentClick(event, answer)"/>
                 </div>
diff --git a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
index 52f1ac09df171f..23420a965afe29 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -100,7 +100,7 @@
                 i {
                     line-height: unset;
 
-                    &.fa-flag-checkered {
+                    &[data-icon="sports_score"] {
                         padding-left: 3px;
                         padding-right: 7px;
                     }
@@ -127,7 +127,7 @@
 
     .o_wslides_js_lesson_quiz_question {
         .list-group-item  {
-            input:checked + i.fa-circle {
+            input:checked + i[data-icon="circle"] {
                 color: $primary !important;
             }
         }
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 4c57b6aa1d8a5a..c522112839eef8 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -54,7 +54,7 @@ $line-height-truncate: 1.5em;
     .o_wslides_js_slide_like_down {
         user-select: none;
         min-width: 2rem;
-        > i.fa {
+        > i.oi {
             min-width: 1rem;
         }
         &:not(.disabled) {
@@ -88,7 +88,7 @@ $line-height-truncate: 1.5em;
         .list-group-item  {
             @include font-size(1rem);
 
-            input:checked + i.fa-circle {
+            input:checked + i[data-icon="circle"] {
                 color: $primary !important;
             }
         }
@@ -105,7 +105,7 @@ $line-height-truncate: 1.5em;
 
     a.o_wslides_js_quiz_is_correct {
         color: black;
-        input:checked + i.fa-check-circle-o {
+        input:checked + i[data-icon="check_circle"]:not(.oi-filled) {
             color: $success !important;
         }
     }
@@ -188,16 +188,16 @@ $line-height-truncate: 1.5em;
     }
 
     .o_wslides_js_channel_unsubscribe {
-        > .fa-times {
+        > [data-icon="close"] {
             display: none;
         }
 
         &:hover {
-            > .fa-check {
+            > [data-icon="check"] {
                 display: none;
             }
 
-            > .fa-times {
+            > [data-icon="close"] {
                 display: inline-block;
             }
         }
@@ -479,7 +479,7 @@ $line-height-truncate: 1.5em;
 
         .o_wslides_lesson_aside_list_links i {
             padding-right: 10px;
-            &.fa-flag {
+            &[data-icon="flag"] {
                 padding-right: 6px;
             }
         }
@@ -542,10 +542,10 @@ $line-height-truncate: 1.5em;
 }
 
 .o_wslides_fs_sidebar_section {
-    a[aria-expanded="true"] i.fa-caret-left{
+    a[aria-expanded="true"] i[data-icon="arrow_left"]{
         display: none;
     }
-    a[aria-expanded="false"] i.fa-caret-down{
+    a[aria-expanded="false"] i[data-icon="arrow_drop_down"]{
         display: none;
     }
 }
diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml
index 7ca2292c92e3be..4c08a1584164ec 100644
--- a/addons/website_slides/static/src/xml/slide_quiz.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz.xml
@@ -21,16 +21,16 @@
                                         t-att-name="question.id"
                                         t-att-value="answer.id"
                                         class="d-none"/>
-                                    <i t-att-class="'fa fa-circle text-400' + (!(slide.completed &amp;&amp; answer.is_correct) ? '' : ' d-none')"></i>
-                                    <i class="fa fa-times-circle text-danger d-none"></i>
-                                    <i t-att-class="'fa fa-check-circle text-success' + (slide.completed &amp;&amp; answer.is_correct ? '' :  ' d-none')"></i>
+                                    <i t-att-class="'oi oi-filled text-400' + (!(slide.completed &amp;&amp; answer.is_correct) ? '' : ' d-none')" data-icon="circle"></i>
+                                    <i class="oi oi-filled text-danger d-none" data-icon="cancel"></i>
+                                    <i t-att-class="'oi oi-filled text-success' + (slide.completed &amp;&amp; answer.is_correct ? '' :  ' d-none')" data-icon="check_circle"></i>
                                 </label>
                                 <span t-out="answer.text_value"/>
                             </a>
                             <t t-if="slide.completed and answer.is_correct" t-set="correct_answer_comment" t-value="answer.comment"/>
                         </t>
                         <div t-attf-class="o_wslides_quiz_answer_info list-group-item list-group-item-info #{correct_answer_comment ? '' : 'd-none'}">
-                            <i class="fa fa-info-circle"/>
+                            <i class="oi" data-icon="info"/>
                             <span class="o_wslides_quiz_answer_comment ms-2">
                                 <t t-if="correct_answer_comment" t-out="correct_answer_comment"/>
                             </span>
@@ -109,7 +109,7 @@
                         </span>
                     </span>
                     <div class="ms-3 d-none text-danger o_wslides_js_quiz_submit_error">
-                        <i class="fa fa-close me-1"/>
+                        <i class="oi me-1" data-icon="close"/>
                         <span class="o_wslides_js_quiz_submit_error_text"></span>
                     </div>
                 </div>
@@ -118,7 +118,7 @@
                         Reset
                     </button>
                     <button t-if="slide.completed &amp;&amp; slide.hasNext" class="btn btn-primary o_wslides_quiz_continue">
-                        Continue <i class="oi oi-chevron-right ms-1"/>
+                        Continue <i class="oi ms-1" data-icon="chevron_forward"/>
                     </button>
                 </div>
             </div>
diff --git a/addons/website_slides/static/src/xml/website_slides_sidebar.xml b/addons/website_slides/static/src/xml/website_slides_sidebar.xml
index c5f3448a6c59aa..410c0e01655b2b 100644
--- a/addons/website_slides/static/src/xml/website_slides_sidebar.xml
+++ b/addons/website_slides/static/src/xml/website_slides_sidebar.xml
@@ -10,12 +10,12 @@
             t-att-data-can-self-mark-uncompleted="canSelfMarkUncompleted"
             t-att-data-is-member="isMember"> <!-- The template is only used for members -->
             <button class="o_wslides_button_complete btn btn-sm" t-if="slideCompleted and canSelfMarkUncompleted or !slideCompleted and canSelfMarkCompleted">
-                <i t-if="slideCompleted" class="o_wslides_slide_completed fa fa-check-circle fa-fw text-success fa-lg" t-att-data-slide-id="slideId" title="Mark as not done"/>
-                <i t-else="" t-attf-class="fa #{uncompletedIcon or 'fa-circle-thin'} fa-fw fa-lg" t-att-data-slide-id="slideId" title="Mark as done"/>
+                <i t-if="slideCompleted" class="o_wslides_slide_completed oi oi-filled oi-fw oi-lg text-success" data-icon="check_circle" t-att-data-slide-id="slideId" title="Mark as not done"/>
+                <i t-else="" class="oi oi-fw oi-lg" t-attf-data-icon="#{uncompletedIcon or 'radio_button_unchecked'}" t-att-data-slide-id="slideId" title="Mark as done"/>
             </button>
             <button class="o_wslides_button_complete btn btn-sm border-0" t-else="" disabled="1">
-                <i t-if="slideCompleted" class="o_wslides_slide_completed fa fa-check fa-fw text-success fa-lg" t-att-data-slide-id="slideId" title="Can not be marked as not done"/>
-                <i t-else="" t-attf-class="fa #{uncompletedIcon or 'fa-circle-thin'} fa-fw fa-lg" t-att-data-slide-id="slideId" title="Can not be marked as done"/>
+                <i t-if="slideCompleted" class="o_wslides_slide_completed oi oi-fw oi-lg text-success" data-icon="check" t-att-data-slide-id="slideId" title="Can not be marked as not done"/>
+                <i t-else="" class="oi oi-fw oi-lg" t-attf-data-icon="#{uncompletedIcon or 'radio_button_unchecked'}" t-att-data-slide-id="slideId" title="Can not be marked as done"/>
             </button>
         </div>
     </t>
diff --git a/addons/website_slides/static/tests/tours/slides_course_member.js b/addons/website_slides/static/tests/tours/slides_course_member.js
index 1f64b42c419e64..af9d80530c41d6 100644
--- a/addons/website_slides/static/tests/tours/slides_course_member.js
+++ b/addons/website_slides/static/tests/tours/slides_course_member.js
@@ -163,7 +163,7 @@ registry.category("web_tour.tours").add("course_member", {
             run: "click",
         },
         {
-            trigger: ".modal.modal_shown .modal-body i.fa.fa-star:eq(2)",
+            trigger: ".modal.modal_shown .modal-body i[data-icon='star'].oi-filled:eq(2)",
             run: "click",
         },
         {
@@ -184,7 +184,7 @@ registry.category("web_tour.tours").add("course_member", {
             run: "click",
         },
         {
-            trigger: ".modal.modal_shown .modal-body i.fa.fa-star-o:eq(1)",
+            trigger: ".modal.modal_shown .modal-body i[data-icon='star']:eq(1)",
             run: "click",
         },
         {
diff --git a/addons/website_slides/static/tests/tours/slides_course_review_modification.js b/addons/website_slides/static/tests/tours/slides_course_review_modification.js
index f8c35a42a2683a..8d2c514c85c5f7 100644
--- a/addons/website_slides/static/tests/tours/slides_course_review_modification.js
+++ b/addons/website_slides/static/tests/tours/slides_course_review_modification.js
@@ -74,7 +74,7 @@ registry.category("web_tour.tours").add("course_review_modification", {
             run: "edit Second review",
         },
         {
-            trigger: ".modal.modal_shown .modal-body i.fa.fa-star:eq(2)",
+            trigger: ".modal.modal_shown .modal-body i[data-icon='star'].oi-filled:eq(2)",
             run: "click",
         },
         {
@@ -110,7 +110,7 @@ registry.category("web_tour.tours").add("course_review_modification", {
             run: "edit Second review is edited in rating composer",
         },
         {
-            trigger: ".modal.modal_shown .modal-body i.fa.fa-star:eq(1)",
+            trigger: ".modal.modal_shown .modal-body i[data-icon='star'].oi-filled:eq(1)",
             run: "click",
         },
         {
diff --git a/addons/website_slides/views/res_config_settings_views.xml b/addons/website_slides/views/res_config_settings_views.xml
index bb04bad82e64ea..1e9364a0b23133 100644
--- a/addons/website_slides/views/res_config_settings_views.xml
+++ b/addons/website_slides/views/res_config_settings_views.xml
@@ -27,7 +27,7 @@
                                     <field name="website_slide_google_app_key" class="oe_inline"/>
                                 </div>
                                 <div class="oe_link">
-                                    <a href="https://console.developers.google.com/flows/enableapi?apiid=drive,youtube"><span class="oi oi-arrow-right"/>
+                                    <a href="https://console.developers.google.com/flows/enableapi?apiid=drive,youtube"><span class="oi" data-icon="east"/>
                                         Create a Google Project and Get a Key
                                     </a>
                                 </div>
diff --git a/addons/website_slides/views/res_partner_views.xml b/addons/website_slides/views/res_partner_views.xml
index 52be3ea85fc58e..b1cb01e3744221 100644
--- a/addons/website_slides/views/res_partner_views.xml
+++ b/addons/website_slides/views/res_partner_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <xpath expr="//div[@name='button_box']" position="inside">
                 <button class="oe_stat_button" type="object"
-                    icon="fa-graduation-cap" name="action_view_courses"
+                    icon="school" name="action_view_courses"
                     groups="website_slides.group_website_slides_officer"
                     invisible="slide_channel_count == 0 or is_company">
                     <div class="o_field_widget o_stat_info">
@@ -17,7 +17,7 @@
                     </div>
                 </button>
                 <button class="oe_stat_button" type="object"
-                    icon="fa-graduation-cap" name="action_view_courses"
+                    icon="school" name="action_view_courses"
                     groups="website_slides.group_website_slides_officer"
                     invisible="slide_channel_company_count == 0 or not is_company">
                     <div class="o_field_widget o_stat_info">
diff --git a/addons/website_slides/views/slide_channel_partner_views.xml b/addons/website_slides/views/slide_channel_partner_views.xml
index 17060e46a53e4b..ff57ebab60c921 100644
--- a/addons/website_slides/views/slide_channel_partner_views.xml
+++ b/addons/website_slides/views/slide_channel_partner_views.xml
@@ -51,9 +51,9 @@
                         decoration-warning="channel_enroll == 'payment'"
                         optional="hide"/>
                     <field name="channel_website_id" groups="website.group_multi_website" optional="hide"/>
-                    <button name="action_archive" title="Archive" icon="fa-times" type="object"
+                    <button name="action_archive" title="Archive" icon="close" type="object"
                         invisible="not active"/>
-                    <button name="action_unarchive" title="Unarchive" icon="fa-undo" type="object"
+                    <button name="action_unarchive" title="Unarchive" icon="undo" type="object"
                         invisible="active"/>
                 </list>
             </field>
diff --git a/addons/website_slides/views/slide_channel_views.xml b/addons/website_slides/views/slide_channel_views.xml
index 6cdaf49fe34467..9514267770c8d2 100644
--- a/addons/website_slides/views/slide_channel_views.xml
+++ b/addons/website_slides/views/slide_channel_views.xml
@@ -13,7 +13,7 @@
                     </header>
                     <sheet>
                         <div class="oe_button_box" name="button_box">
-                            <button icon="fa-eye"
+                            <button icon="visibility"
                                 class="oe_stat_button"
                                 groups="website_slides.group_website_slides_officer"
                                 invisible="total_views == 0">
@@ -21,14 +21,14 @@
                             </button>
                             <button name="action_view_slides"
                                 type="object"
-                                icon="fa-files-o"
+                                icon="content_copy"
                                 class="oe_stat_button"
                                 groups="website_slides.group_website_slides_officer">
                                 <field name="total_slides" widget="statinfo" string="Published Contents"/>
                             </button>
                             <button name="action_redirect_to_completed_members"
                                 type="object"
-                                icon="fa-flag-checkered"
+                                icon="sports_score"
                                 class="oe_stat_button"
                                 groups="website_slides.group_website_slides_officer">
                                 <div class="o_field_widget o_stat_info">
@@ -38,7 +38,7 @@
                             </button>
                             <button name="action_redirect_to_members"
                                 type="object"
-                                icon="fa-graduation-cap"
+                                icon="school"
                                 class="oe_stat_button"
                                 groups="website_slides.group_website_slides_officer">
                                 <div class="o_stat_info">
@@ -50,7 +50,7 @@
                             </button>
                              <button name="action_view_ratings"
                                 type="object"
-                                icon="fa-star-half-o"
+                                icon="star_half"
                                 class="oe_stat_button"
                                 groups="website_slides.group_website_slides_officer"
                                 invisible="not allow_comment">
diff --git a/addons/website_slides/views/slide_question_views.xml b/addons/website_slides/views/slide_question_views.xml
index b1db226b0faeab..47bdcf7703ea82 100644
--- a/addons/website_slides/views/slide_question_views.xml
+++ b/addons/website_slides/views/slide_question_views.xml
@@ -7,7 +7,7 @@
             <form string="Quiz">
                 <div invisible="answers_validation_error == ''">
                     <div class="alert alert-info" role="alert" aria-label="Validation error">
-                        <i class="fa fa-info-circle" aria-hidden="true"/>
+                        <i class="oi" data-icon="info" aria-hidden="true"/>
                         <field name="answers_validation_error" class="ms-2" readonly="1"/>
                     </div>
                 </div>
diff --git a/addons/website_slides/views/slide_slide_views.xml b/addons/website_slides/views/slide_slide_views.xml
index 50600ca0bc2a94..dc4c6c426c59d6 100644
--- a/addons/website_slides/views/slide_slide_views.xml
+++ b/addons/website_slides/views/slide_slide_views.xml
@@ -49,23 +49,23 @@
                     <sheet>
                         <div class="oe_button_box" name="button_box">
                             <button name="%(slide_slide_partner_action_from_slide)d"
-                                    class="oe_stat_button" type="action" icon="fa-graduation-cap"
+                                    class="oe_stat_button" type="action" icon="school"
                                     invisible="slide_views == 0">
                                 <field name="slide_views" widget="statinfo" string="Attendees"/>
                             </button>
-                            <button disabled="1" icon="fa-thumbs-up" class="oe_stat_button"
+                            <button disabled="1" icon="thumb_up" icon_class="oi-filled" class="oe_stat_button"
                                 invisible="channel_type == 'training' or likes == 0">
                                 <field class="ms-1" name="likes" widget="statinfo" string="Likes"/>
                              </button>
-                             <button disabled="1" icon="fa-thumbs-down" class="oe_stat_button"
+                             <button disabled="1" icon="thumb_down" icon_class="oi-filled" class="oe_stat_button"
                                 invisible="channel_type == 'training' or dislikes == 0">
                                 <field class="ms-1" name="dislikes" widget="statinfo" string="Dislikes"/>
                              </button>
-                             <button disabled="1" icon="fa-comments" class="oe_stat_button"
+                             <button disabled="1" icon="forum" icon_class="oi-filled" class="oe_stat_button"
                                  invisible="not channel_allow_comment or comments_count == 0">
                                 <field class="ms-1" name="comments_count" widget="statinfo" string="Comments"/>
                             </button>
-                            <button name="action_view_embeds" class="oe_stat_button" type="object" icon="fa-share-alt"
+                            <button name="action_view_embeds" class="oe_stat_button" type="object" icon="family_history"
                                 invisible="embed_count == 0">
                                 <div class="o_stat_info">
                                     <span class="o_stat_value"><field name="embed_count"/></span>
@@ -221,28 +221,28 @@
                                 <footer class="mt-auto d-flex justify-content-between align-items-end pt-0">
                                     <span>
                                         <t t-if="record.slide_category.raw_value == 'infographic'">
-                                            <i class="fa fa-file-image-o me-2" aria-label="Infographic" role="img" title="Infographic"/>
+                                            <i class="oi me-2" data-icon="image" aria-label="Infographic" role="img" title="Infographic"/>
                                         </t>
                                         <t t-elif="record.slide_category.raw_value == 'article'">
-                                            <i class="fa fa-file-code-o me-2" aria-label="article" role="img" title="Article"/>
+                                            <i class="oi me-2" data-icon="code" aria-label="article" role="img" title="Article"/>
                                         </t>
                                         <t t-elif="record.slide_category.raw_value == 'video'">
-                                            <i class="fa fa-file-video-o me-2" aria-label="Video" role="img" title="Video"/>
+                                            <i class="oi me-2" data-icon="movie" aria-label="Video" role="img" title="Video"/>
                                         </t>
                                         <t t-elif="record.slide_category.raw_value == 'quiz'">
-                                            <i class="fa fa-flag me-2" aria-label="Quiz" role="img" title="Quiz"/>
+                                            <i class="oi oi-filled me-2" data-icon="flag" aria-label="Quiz" role="img" title="Quiz"/>
                                         </t>
-                                        <t t-else=""><i class="fa fa-file-pdf-o me-2" aria-label="Document" role="img" title="Document"/></t>
+                                        <t t-else=""><i class="oi me-2" data-icon="picture_as_pdf" aria-label="Document" role="img" title="Document"/></t>
                                         <field name="slide_category"/>
                                     </span>
                                     <span class="d-flex align-items-center">
-                                        <i class="fa fa-clock-o me-2" aria-label="Duration" role="img" title="Duration"/><field name="completion_time" widget="float_time"/>
+                                        <i class="oi me-2" data-icon="schedule" aria-label="Duration" role="img" title="Duration"/><field name="completion_time" widget="float_time"/>
                                     </span>
                                     <span>
-                                        <i class="fa fa-question me-2" aria-label="Number of Questions" role="img" title="Number of Questions"/><field name="questions_count"/>
+                                        <i class="oi me-2" data-icon="help" aria-label="Number of Questions" role="img" title="Number of Questions"/><field name="questions_count"/>
                                     </span>
                                     <span>
-                                        <i class="fa fa-eye me-2" aria-label="Views" role="img" title="Views"/><field name="total_views"/>
+                                        <i class="oi me-2" data-icon="visibility" aria-label="Views" role="img" title="Views"/><field name="total_views"/>
                                     </span>
                                     <field name="user_id" widget="many2one_avatar_user"/>
                                 </footer>
diff --git a/addons/website_slides/views/website_pages_views.xml b/addons/website_slides/views/website_pages_views.xml
index 3be8aac9fe444c..8bb1c8c64340f3 100644
--- a/addons/website_slides/views/website_pages_views.xml
+++ b/addons/website_slides/views/website_pages_views.xml
@@ -43,7 +43,7 @@
         </xpath>
         <xpath expr="//div[@name='card_primary_left']" position="replace">
             <div class="col-6 text-primary" t-if="record.website_id.value" groups="website.group_multi_website">
-                <i class="fa fa-globe me-1" title="Website"/>
+                <i class="oi me-1" data-icon="public" title="Website"/>
                 <field name="website_id"/>
             </div>
         </xpath>
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index a996b792aa7dda..6918d1fca55a2d 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -87,7 +87,7 @@
                         </div>
 
                         <div class="btn-group ms-1 position-static">
-                            <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Search"><i class="fa fa-search"></i></a>
+                            <a class="btn bg-black-25 text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Search"><i class="oi" data-icon="search"></i></a>
                             <div class="dropdown-menu dropdown-menu-end w-100" style="right: 10px;">
                                 <t t-call="website.website_search_box_input"
                                     _classes.f="px-3"
@@ -175,7 +175,7 @@
                                     <a t-att-class="'nav-link %s' % ('active' if active_tab == 'home' else '')"
                                         id="home-tab" data-bs-toggle="pill" href="#home" role="tab" aria-controls="home"
                                         t-att-aria-selected="'true' if active_tab == 'home' else 'false'">
-                                        <i class="fa fa-home"/> Course
+                                        <i class="oi" data-icon="home"/> Course
                                     </a>
                                 </li>
                                 <li t-if="channel.allow_comment" class="nav-item o_wslides_course_header_nav_review" role="presentation">
@@ -273,7 +273,7 @@
                         aria-label="Share Channel" t-att-data-id="channel.id" t-att-data-name="channel.name"
                         t-att-data-url="channel.website_absolute_url" data-is-channel="True"
                         t-att-data-email-sharing="bool(channel.share_channel_template_id)">
-                    <i class="fa fa-share-alt"/> Share
+                    <i class="oi" data-icon="family_history"/> Share
                 </button>
             </div>
         </div>
@@ -286,7 +286,7 @@
            <div t-if="not invite_preview and channel.prerequisite_channel_ids and not channel.prerequisite_user_has_completed" class="text-center">
                 <div class="alert my-0 bg-100">
                     <h6>
-                        <i class="fa fa-lock"/>
+                        <i class="oi" data-icon="lock"/>
                         <span>Course Locked</span>
                     </h6>
                     <div>
@@ -341,7 +341,7 @@
             <div t-if="channel.prerequisite_channel_ids and not channel.prerequisite_user_has_completed" class="text-center">
                 <div class="alert my-0 bg-100">
                     <h6>
-                        <i class="fa fa-lock"/>
+                        <i class="oi" data-icon="lock"/>
                         <span>Course Locked</span>
                     </h6>
                     <div>
@@ -398,12 +398,12 @@
                     img_class.f="rounded-circle me-1"
                     img_style.f="width: 1.4em; height: 1.4em;"/>
                 <h6 class="d-flex flex-grow-1 my-0">You're enrolled</h6>
-                <i class="fa fa-check"/>
-                <i class="fa fa-times"/>
+                <i class="oi" data-icon="check"/>
+                <i class="oi" data-icon="close"/>
             </button>
             <div class="d-flex align-items-center pt-3">
                 <span t-attf-class="o_wslides_channel_completion_completed badge text-bg-success mx-auto #{'d-none' if not channel.completed else ''}">
-                    <i class="fa fa-check"/> Completed
+                    <i class="oi" data-icon="check"/> Completed
                 </span>
                 <div t-attf-class="o_wslides_channel_completion_progressbar #{'d-none' if channel.completed else 'd-flex'} w-100 align-items-center">
                     <div class="progress flex-grow-1 bg-black-50" style="height: 6px;">
@@ -431,7 +431,7 @@
                          t-att-class="'o_wslides_slide_list_category_header position-relative d-flex justify-content-between align-items-center mt8 %s %s' % ('bg-white shadow-sm border-bottom-0' if category_id else 'border-0', 'o_wslides_js_category py-0' if channel.can_upload else 'py-2')">
                         <div t-att-class="'d-flex align-items-center me-auto ps-3 %s' % ('o_wslides_slides_list_drag' if channel.can_publish else '')">
                             <div t-if="channel.can_publish and category_id" class="o_wslides_slides_list_drag py-2 pe-3">
-                                <i class="fa fa-bars"/>
+                                <i class="oi" data-icon="menu"/>
                             </div>
                             <span t-if="category_id" t-field="category['category'].name"/>
                             <small t-if="category_id"
@@ -447,7 +447,7 @@
                                     aria-label="Delete Category"
                                     href="#"
                                     t-att-data-category-id="category_id">
-                                    <i class="fa fa-trash"/>
+                                    <i class="oi oi-filled" data-icon="delete"/>
                                 </a>
                             </div>
                             <div class="d-flex ms-2 o_not_editable">
@@ -466,7 +466,7 @@
                                     t-att-data-category-id="category_id"
                                     t-att-data-can-upload="channel.can_upload"
                                     t-att-data-can-publish="channel.can_publish">
-                                    <i class="fa fa-plus me-1"/> <span class="d-none d-md-inline-block">Add Content</span>
+                                    <i class="oi me-1" data-icon="add"/> <span class="d-none d-md-inline-block">Add Content</span>
                                 </a>
                             </div>
                         </t>
@@ -492,10 +492,10 @@
                 t-att-data-modules-to-install="modules_to_install"
                 t-att-data-channel-id="channel.id"
                 t-att-data-can-upload="channel.can_upload"
-                t-att-data-can-publish="channel.can_publish"><i class="fa fa-plus me-1"/><span>Add Content</span></a>
+                t-att-data-can-publish="channel.can_publish"><i class="oi me-1" data-icon="add"/><span>Add Content</span></a>
             <a class="o_wslides_js_slide_section_add border btn btn-light bg-white" t-attf-channel_id="#{channel.id}"
                 href="#" role="button"
-                groups="website_slides.group_website_slides_officer"><i class="fa fa-folder-o me-1"/><span>Add Section</span></a>
+                groups="website_slides.group_website_slides_officer"><i class="oi me-1" data-icon="folder"/><span>Add Section</span></a>
         </div>
         <t t-if="not channel.slide_ids and channel.can_publish" t-call="website_slides.course_slides_list_sample"/>
         <t t-elif="slide_count == 0 and not channel.can_publish" t-call="website_slides.course_slides_list_placeholder"/>
@@ -523,24 +523,24 @@
             <ul class="list-unstyled pb-1 border-top card">
                 <div class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                 <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
-                    <i class="fa fa-file-text py-2 mx-2"/>
+                    <i class="oi oi-filled py-2 mx-2" data-icon="article"/>
                     <div class="text-truncate me-auto">
                         <span>Asking Question</span>
                     </div>
                     <div class="d-flex flex-row">
                         <span class="badge fw-bold m-1 text-bg-warning">
-                            <i class="fa fa-fw fa-flag"/> 10 xp
+                            <i class="oi oi-filled oi-fw" data-icon="flag"/> 10 xp
                         </span>
                     </div>
                 </li>
                 <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
-                    <i class="fa fa-question-circle py-2 mx-2"/>
+                    <i class="oi py-2 mx-2" data-icon="help"/>
                     <div class="text-truncate me-auto">
                         <span>Asking the right question</span>
                     </div>
                 </li>
                 <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
-                    <i class="fa fa-file-pdf-o py-2 mx-2"/>
+                    <i class="oi py-2 mx-2" data-icon="picture_as_pdf"/>
                     <div class="text-truncate me-auto">
                         <span>Answering Questions</span>
                     </div>
@@ -559,19 +559,19 @@
             <ul class="list-unstyled pb-1 border-top card">
                 <div class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                 <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
-                    <i class="fa fa-file-pdf-o py-2 mx-2"/>
+                    <i class="oi py-2 mx-2" data-icon="picture_as_pdf"/>
                     <div class="text-truncate me-auto">
                         <span>Mathematics</span>
                     </div>
                 </li>
                 <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
-                    <i class="fa fa-file-pdf-o py-2 mx-2"/>
+                    <i class="oi py-2 mx-2" data-icon="picture_as_pdf"/>
                     <div class="text-truncate me-auto">
                         <span>Science</span>
                     </div>
                 </li>
                 <li class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center ps-2 py-1 pe-2">
-                    <i class="fa fa-play py-2 mx-2"/>
+                    <i class="oi py-2 mx-2" data-icon="play_arrow"/>
                     <div class="text-truncate me-auto">
                         <span>Logic</span>
                     </div>
@@ -587,9 +587,9 @@
 <template id="course_slides_list_slide" name="Slide template for a training channel">
     <li t-att-index="j" t-att-data-slide-id="slide.id" t-att-data-category-id="category_id" t-attf-class="o_wslides_slides_list_slide o_wslides_js_list_item bg-white-50 border-top-0 d-flex align-items-center ps-2 #{'py-1 pe-2' if not channel.can_upload else ''}">
         <div t-if="channel.can_publish" class=" o_wslides_slides_list_drag m-2 o_not_editable">
-            <i class="fa fa-sort"></i>
+            <i class="oi" data-icon="swap_vert"></i>
         </div>
-        <i t-attf-class="fa #{slide.slide_icon_class} py-2 mx-2"/>
+        <i class="oi py-2 mx-2" t-attf-data-icon="#{slide.slide_icon_class}"/>
         <div class="text-truncate me-auto">
             <a t-if="not invite_preview and (slide.is_preview or channel.is_member or channel.can_publish)" class="o_wslides_js_slides_list_slide_link" t-attf-href="/slides/slide/#{slug(slide)}">
                 <span t-field="slide.name"/>
@@ -614,7 +614,7 @@
                 New
             </span>
             <span t-if="slide.question_ids" t-att-class="'badge fw-bold m-1 %s' % ('text-bg-success' if channel_progress[slide.id].get('completed') else 'text-bg-warning')">
-                <i t-attf-class="fa fa-fw #{'fa-check' if channel_progress[slide.id].get('completed') else 'fa-flag'}"/>
+                <i class="oi oi-fw oi-filled" t-attf-data-icon="#{'check' if channel_progress[slide.id].get('completed') else 'flag'}"/>
                 <t t-out="channel_progress[slide.id].get('quiz_karma_won', 0) if channel_progress[slide.id].get('completed') else channel_progress[slide.id].get('quiz_karma_gain', 0)"/> xp
             </span>
         </div>
@@ -625,9 +625,9 @@
                 slide_completed="channel_progress[slide.id].get('completed')"
                 use_slide_icon="False"/>
             <span t-if="channel.can_publish" class="d-none d-md-flex">
-                <a t-if="slide.slide_category == 'article'" class="mx-2 o_text_link text-primary o_not_editable" target="_blank" t-attf-href="/slides/slide/#{slug(slide)}?enable_editor=1" title="Edit"><span class="fa fa-pencil"/></a>
-                <a t-else="" class="mx-2 o_text_link text-primary o_not_editable" target="_blank" t-attf-href="/odoo/slide.slide/{{slide.id}}" title="Edit in backend"><span class="fa fa-pencil"/></a>
-                <a href="#" t-att-data-slide-id="slide.id" class="o_text_link text-danger mx-2 o_wslides_js_slide_archive o_not_editable" title="Delete"><span class="fa fa-trash"/></a>
+                <a t-if="slide.slide_category == 'article'" class="mx-2 o_text_link text-primary o_not_editable" target="_blank" t-attf-href="/slides/slide/#{slug(slide)}?enable_editor=1" title="Edit"><span class="oi oi-filled" data-icon="edit"/></a>
+                <a t-else="" class="mx-2 o_text_link text-primary o_not_editable" target="_blank" t-attf-href="/odoo/slide.slide/{{slide.id}}" title="Edit in backend"><span class="oi oi-filled" data-icon="edit"/></a>
+                <a href="#" t-att-data-slide-id="slide.id" class="o_text_link text-danger mx-2 o_wslides_js_slide_archive o_not_editable" title="Delete"><span class="oi oi-filled" data-icon="delete"/></a>
             </span>
         </div>
     </li>
@@ -672,7 +672,7 @@
 
                     <div class="ms-auto d-lg-none" t-if="search_slide_category or search">
                         <a t-att-href="'/slides/%s' % (slug(channel))" class="btn btn-info me-3">
-                            <i class="fa fa-eraser me-1"/>Clear filters
+                            <i class="oi me-1" data-icon="ink_eraser"/>Clear filters
                         </a>
                     </div>
 
@@ -734,7 +734,7 @@
 
                             <div class="me-3 d-none d-lg-inline-block">
                                 <a t-if="search_slide_category or search" t-att-href="'/slides/%s' % (slug(channel))" class="btn btn-sm btn-info ms-1">
-                                    <i class="fa fa-eraser me-1"/>Clear filters
+                                    <i class="oi me-1" data-icon="ink_eraser"/>Clear filters
                                 </a>
                             </div>
 
@@ -742,7 +742,7 @@
                                 <div class="input-group position-relative">
                                     <input type="text" class="form-control border" name="search" placeholder="Search in content" t-att-value="search"/>
                                     <button class="btn border" type="submit" aria-label="Search" title="Search">
-                                        <i class="fa fa-search"/>
+                                        <i class="oi" data-icon="search"/>
                                     </button>
                                 </div>
                             </form>
@@ -779,13 +779,13 @@
                     t-att-data-channel-id="channel.id"
                     t-att-data-can-upload="channel.can_upload"
                     t-att-data-can-publish="channel.can_publish">
-                    <i class="fa fa-cloud-upload me-1"/>Add Content
+                    <i class="oi me-1" data-icon="cloud_upload"/>Add Content
                 </a>
                 <a class="btn btn-secondary py-1 o_wslides_js_slide_section_add"
                     title="Add Section" role="button"
                     href="#"
                     t-att-channel_id="channel.id">
-                    <i class="fa fa-folder-o me-1"/>Add a section
+                    <i class="oi me-1" data-icon="folder"/>Add a section
                 </a>
             </div>
         </div>
@@ -847,7 +847,7 @@
         <div t-else="" class="o_wslides_background_image" style="height:150px">
             <div t-field="slide.channel_id.image_1920" t-options="{'widget': 'image', 'preview_image': 'image_512'}" class="o_wslides_background_image h-100"/>
         </div>
-        <i t-if="channel_progress[slide.id].get('completed')" class="position-absolute py-1 px-2 h5 fa fa-check-circle text-primary" style="right:0; top:0;"/>
+        <i t-if="channel_progress[slide.id].get('completed')" class="oi oi-filled position-absolute py-1 px-2 h5 text-primary" data-icon="check_circle" style="right:0; top:0;"/>
 
         <div class="card-body d-flex flex-column px-3">
             <a t-if="can_access" class="card-title h5 o_wslides_desc_truncate_2" t-attf-href="/slides/slide/#{slug(slide)}#{query_string}" t-out="slide.name"/>
@@ -864,18 +864,18 @@
                     <a t-else="" t-attf-href="/slides/#{slug(slide.channel_id)}/tag/#{slug(tag)}" class="badge text-bg-primary" t-out="tag.name"/>
                 </t>
             </div>
-            <span t-if="channel.is_member and channel_progress[slide.id].get('completed')" class="badge text-bg-success align-self-start"><i class="fa fa-check me-1"/>Completed</span>
+            <span t-if="channel.is_member and channel_progress[slide.id].get('completed')" class="badge text-bg-success align-self-start"><i class="oi me-1" data-icon="check"/>Completed</span>
         </div>
         <div class="card-footer bg-white text-600">
             <div class="d-flex align-items-center small">
                 <span class="fw-bold me-auto" t-field="slide.completion_time" t-options='{"widget": "float_time"}'/>
                 <div class="o_wslides_js_slide_like">
                     <span t-attf-class="d-inline-block text-center o_wslides_js_slide_like_up #{'disabled' if not channel.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
-                        <i t-attf-class="fa fa-1x #{'fa-thumbs-up' if slide.user_vote == 1 else 'fa-thumbs-o-up'}" role="img" aria-label="Likes" title="Like"></i>
+                        <i t-attf-class="oi oi-1x #{'oi-filled' if slide.user_vote == 1 else ''}" data-icon="thumb_up" role="img" aria-label="Likes" title="Like"></i>
                         <span t-field="slide.likes" t-options="{'format_decimalized_number': True}"/>
                     </span>
                     <span t-attf-class="d-inline-block text-center ms-1 o_wslides_js_slide_like_down #{'disabled' if not channel.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
-                        <i t-attf-class="fa fa-1x #{'fa-thumbs-down' if slide.user_vote == -1 else 'fa-thumbs-o-down'}" role="img" aria-label="Dislikes" title="Dislike"></i>
+                        <i t-attf-class="oi oi-1x #{'oi-filled' if slide.user_vote == -1 else ''}" data-icon="thumb_down" role="img" aria-label="Dislikes" title="Dislike"></i>
                         <span t-field="slide.dislikes" t-options="{'format_decimalized_number': True}"/>
                     </span>
                 </div>
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index 175ad992815134..1a52c26483aeaa 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -39,10 +39,10 @@
                     </div>
                     <div class="col-5 d-flex justify-content-between align-items-center">
                         <div t-if="channel.completed" class="badge rounded-pill text-bg-success pull-right">
-                            <i class="fa fa-check"/> Completed
+                            <i class="oi" data-icon="check"/> Completed
                         </div>
                         <t t-elif="not channel.completion">
-                            <small class="text-muted d-none d-md-inline"><i class="fa fa-check me-1" role="img"/>You are enrolled</small>
+                            <small class="text-muted d-none d-md-inline"><i class="oi me-1" data-icon="check" role="img"/>You are enrolled</small>
                             <div class="d-md-none">0 %</div>
                         </t>
                         <t t-else="">
@@ -60,10 +60,10 @@
                     </div>
                     <div t-if="not channel.completed" class="col-2 d-flex flex-row-reverse align-items-center">
                         <a t-if="not channel.completion" role="button" class="btn btn-sm btn-primary" t-attf-href="/slides/#{slug(channel)}">
-                            <span class="d-none d-md-inline me-2 me-md-0">Start now</span><i class="oi oi-arrow-right d-md-none" aria-hidden="true"/>
+                            <span class="d-none d-md-inline me-2 me-md-0">Start now</span><i class="oi d-md-none" data-icon="east" aria-hidden="true"/>
                         </a>
                         <a t-else="" role="button" class="align-items-center" t-attf-href="/slides/#{slug(channel)}">
-                            <span class="me-2 d-none d-md-inline">Continue</span><i class="oi oi-arrow-right" aria-hidden="true"/>
+                            <span class="me-2 d-none d-md-inline">Continue</span><i class="oi" data-icon="east" aria-hidden="true"/>
                         </a>
                     </div>
                     <div t-else="" class="col-2">&amp;nbsp;</div>
@@ -251,13 +251,13 @@
                     title="Search Courses"
                     href="#"
                 >
-                    <i class="oi oi-search" role="img"/>
+                    <i class="oi" data-icon="search" role="img"/>
                 </a>
                 <!-- Mobile Filter button -->
                 <button class="o_not_editable btn btn-light position-relative d-lg-none"
                     data-bs-toggle="offcanvas"
                     data-bs-target="#o_wslides_index_offcanvas">
-                    <i class="fa fa-sliders"/>
+                    <i class="oi" data-icon="tune"/>
                     <span t-if="search_tags or search_my"
                         class="position-absolute top-0 start-100 translate-middle border border-light rounded-circle bg-danger p-1"
                     />
@@ -274,7 +274,7 @@
 <template id="courses_search_tags">
     <t t-if="search_my">
           <span class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
-          <i class="fa fa-tag me-2 text-muted"/>
+          <i class="oi me-2 text-muted" data-icon="label"/>
           My Courses
           <span t-att-data-post="slide_query_url(tag=slugify_tags(search_tags.ids), search=search_term, prevent_redirect=True)"
              class="post_link cursor-pointer btn border-0 py-1">×</span>
@@ -282,7 +282,7 @@
     </t>
     <t t-if="search_term">
           <span class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
-          <i class="fa fa-tag me-2 text-muted"/>
+          <i class="oi me-2 text-muted" data-icon="label"/>
           <t t-out="search_term"/>
           <span t-att-data-post="slide_query_url(tag=slugify_tags(search_tags.ids), my=search_my, slide_category=search_slide_category, prevent_redirect=True)"
                          class="post_link cursor-pointer btn border-0 py-1">×</span>
@@ -290,7 +290,7 @@
     </t>
     <t t-foreach="search_tags" t-as="tag">
         <span class="align-items-baseline border d-inline-flex ps-2 rounded mb-2">
-            <i class="fa fa-tag me-2 text-muted"/>
+            <i class="oi me-2 text-muted" data-icon="label"/>
             <t t-out="tag.display_name"/>
             <span t-att-data-post="slide_query_url(tag=slugify_tags(search_tags.ids, tag.id), my=search_my, search=search_term, slide_category=search_slide_category, prevent_redirect=True)"
                          class="post_link cursor-pointer btn border-0 py-1">×</span>
@@ -376,7 +376,7 @@
                 <small t-if="channel.total_time" t-out="channel.total_time" t-options="{'widget': 'duration', 'unit': 'hour', 'round': 'minute', 'format': 'narrow'}"/>
                 <button class="btn btn-sm btn-primary">Start now</button>
             </t>
-            <span t-elif="channel.is_member and channel.completed" class="badge text-bg-success"><i class="fa fa-check" aria-hidden="true"/> Completed</span>
+            <span t-elif="channel.is_member and channel.completed" class="badge text-bg-success"><i class="oi" data-icon="check" aria-hidden="true"/> Completed</span>
             <t t-else="">
                 <small t-if="channel.total_time" t-out="channel.total_time" t-options="{'widget': 'duration', 'unit': 'hour', 'round': 'minute', 'format': 'narrow'}"/>
                 <small><t t-out="channel.total_slides"/> steps</small>
@@ -499,7 +499,7 @@
                     <div class="lh-1" t-out="challenge.reward_id.name"/>
                     <small class="text-muted" t-out="challenge.reward_id.description"/>
                 </div>
-                <i t-if="challenge_done" class="fa fa-check text-success" aria-label="Done" title="Done" role="img"/>
+                <i t-if="challenge_done" class="oi text-success" data-icon="check" aria-label="Done" title="Done" role="img"/>
             </div>
         </t>
     </div>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index 9fe12cce0ab28c..7cc668c3b61641 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -31,13 +31,13 @@
                                             t-attf-style="width: #{slide.channel_id.completion}%;">
                                         </div>
                                     </div>
-                                    <i class="fa fa-trophy m-0 ms-2 p-0 text-black-50"></i>
+                                    <i class="oi oi-filled m-0 ms-2 p-0 text-black-50" data-icon="trophy"></i>
                                     <small class="ms-2 text-white-50"><span class="o_wslides_progress_percentage" t-out="slide.channel_id.completion"/> %</small>
                                 </div>
                             </div>
                             <div t-attf-class="o_wslides_channel_completion_completed col-12 col-sm-3 #{'d-none' if not slide.channel_id.completed else ''}">
                                 <h2>
-                                    <small><span class="badge text-bg-success fw-normal"><i class="fa fa-check"/> Completed</span></small>
+                                    <small><span class="badge text-bg-success fw-normal"><i class="oi" data-icon="check"/> Completed</span></small>
                                 </h2>
                             </div>
                         </div>
@@ -113,7 +113,7 @@
         <div class="bg-100 text-1000 h6 my-0 text-decoration-none border-bottom d-flex align-items-center justify-content-between">
             <span class="p-2">Course content</span>
             <a href="#collapse_slide_aside" data-bs-toggle="collapse" class="d-lg-none p-2 text-decoration-none o_wslides_lesson_aside_collapse">
-                <i class="oi oi-chevron-down d-lg-none"/>
+                <i class="oi d-lg-none" data-icon="keyboard_arrow_down"/>
             </a>
         </div>
         <ul id="collapse_slide_aside" class="list-unstyled my-0 pb-3 collapse d-lg-block">
@@ -141,8 +141,8 @@
                 <b>Uncategorized</b>
             </t>
             <div class="flex-grow-1"/>
-            <i class="fa fa-fw fa-caret-left" role="img"/>
-            <i class="fa fa-fw fa-caret-down" role="img"/>
+            <i class="oi oi-fw" data-icon="arrow_left" role="img"/>
+            <i class="oi oi-fw" data-icon="arrow_drop_down" role="img"/>
         </a>
         <ul t-attf-class="collapse #{'show' if category_collapsed else ''} p-0 m-0 list-unstyled" t-att-id="('collapse-%s') % (category.id if category else 0)" >
             <t t-set="is_member" t-value="slide.channel_id.is_member"/>
@@ -174,27 +174,27 @@
                         <t t-if="can_access_channel" t-foreach="aside_slide.slide_resource_ids" t-as="resource">
                            <li class="ps-3">
                                 <a t-if="resource.resource_type == 'url'" t-att-href="resource.link" target="new" class="text-decoration-none small">
-                                    <i class="fa fa-link"/><span t-field="resource.name"/>
+                                    <i class="oi" data-icon="link"/><span t-field="resource.name"/>
                                 </a>
                                 <a t-else="" t-att-href="resource.download_url" class="text-decoration-none small">
-                                    <i class="fa fa-download"/><span t-field="resource.name"/>
+                                    <i class="oi oi-fw" data-icon="download"/><span t-field="resource.name"/>
                                 </a>
                             </li>
                         </t>
                         <div t-else="" class="o_wslides_js_course_join o_wslides_no_access ps-3">
                             <li t-if="aside_slide.channel_id.enroll == 'public' or (aside_slide.channel_id.enroll == 'invite' and aside_slide.channel_id.is_member_invited)"
                                 class="text-decoration-none small">
-                                <i class="fa fa-download"/>
+                                <i class="oi oi-fw" data-icon="download"/>
                                 <t t-call="website_slides.join_course_link" for_resources="1"/>
                             </li>
                         </div>
                         <li t-if="aside_slide.question_ids and aside_slide.slide_category != 'quiz'" class="ps-3">
                             <a t-if="can_access" t-att-href="'/slides/slide/%s#lessonQuiz' % (slug(aside_slide))"
                                 class="o_wslides_lesson_aside_list_link text-decoration-none small text-600">
-                                <i class="fa fa-flag text-warning"/> Quiz
+                                <i class="oi oi-filled text-warning" data-icon="flag"/> Quiz
                             </a>
                             <span t-else="" class="o_wslides_lesson_aside_list_link text-decoration-none small text-600 text-muted">
-                                <i class="fa fa-flag text-warning"/> Quiz
+                                <i class="oi oi-filled text-warning" data-icon="flag"/> Quiz
                             </span>
                         </li>
                     </ul>
@@ -211,7 +211,7 @@
         <div class="col-12 col-md order-2 order-md-1 d-flex">
             <div class="d-flex align-items-start overflow-hidden">
                 <h1 class="h4 my-0 d-flex flex_row overflow-hidden">
-                    <i t-attf-class="fa #{slide.slide_icon_class} me-2"/>
+                    <i class="oi me-2" t-attf-data-icon="#{slide.slide_icon_class}"/>
                     <span class="text-truncate" t-field="slide.name"/>
                 </h1>
             </div>
@@ -222,7 +222,7 @@
             <span t-if="slide.question_ids and (slide_completed or quiz_karma_gain)" style="flex-basis: 100%"
                 t-attf-class="mx-2 my-1 badge #{'text-bg-success' if slide_completed else 'text-bg-info'}">
                 <span t-if="slide_completed">
-                    <i class="fa fa-check-circle"/>
+                    <i class="oi oi-filled" data-icon="check_circle"/>
                     <t t-if="quiz_karma_won">
                         <t t-out="quiz_karma_won" />
                         <span>XP</span>
@@ -237,7 +237,7 @@
                 <a t-attf-class="o_wslides_nav_button btn btn-light border my-auto #{'disabled' if not previous_slide else ''} me-2"
                     role="button" t-att-aria-disabled="'true' if not previous_slide else None" aria-label="Previous"
                     t-att-href="'/slides/slide/%s' % (slug(previous_slide)) if previous_slide else '#'">
-                    <i class="oi oi-chevron-left me-2"></i> <span class="d-none d-sm-inline-block">Prev</span>
+                    <i class="oi me-2" data-icon="chevron_backward"></i> <span class="d-none d-sm-inline-block">Prev</span>
                 </a>
                 <t t-if="slide.channel_id.channel_type == 'documentation' and slide.channel_id.is_member">
                     <t t-set="is_quiz" t-value="slide.slide_category == 'quiz' or slide.question_ids"/>
@@ -263,11 +263,11 @@
                 <a t-attf-class="o_wslides_nav_button btn btn-light border my-auto #{'disabled' if not next_slide else ''}"
                     role="button" t-att-aria-disabled="'true' if not next_slide else None" aria-label="Next"
                     t-att-href="'/slides/slide/%s' % (slug(next_slide)) if next_slide else '#'">
-                    <span class="d-none d-sm-inline-block">Next</span> <i class="oi oi-chevron-right ms-2"></i>
+                    <span class="d-none d-sm-inline-block">Next</span> <i class="oi ms-2" data-icon="chevron_forward"></i>
                 </a>
             </div>
             <a class="btn btn-light border ms-2 my-1" role="button" t-att-href="'/slides/slide/%s?fullscreen=1' % (slug(slide))" aria-label="Fullscreen">
-                <i class="fa fa-desktop me-xl-2 my-1"/>
+                <i class="oi me-xl-2 my-1" data-icon="desktop_windows"/>
                 <span class="d-none d-xl-inline-block">Fullscreen</span>
             </a>
             <a class="o_wslides_share btn btn-light border ms-2 my-1" role="button" t-att-data-name="slide.name"
@@ -275,7 +275,7 @@
                t-att-data-email-sharing="bool(slide.channel_id.share_slide_template_id)"
                t-att-data-embed-code="slide.embed_code_external if slide.slide_category in ['video', 'document'] else False"
                aria-label="Share">
-                <i class="fa fa-share-alt me-xl-2 my-1"/>
+                <i class="oi me-xl-2 my-1" data-icon="family_history"/>
                 <span class="d-none d-xl-inline-block">Share</span>
             </a>
         </div>
@@ -308,17 +308,17 @@
         <ul class="nav nav-tabs o_wslides_lesson_nav" role="tablist">
             <li class="nav-item" role="presentation">
                 <a href="#about" aria-controls="about" t-att-class="'nav-link active' if not comments else 'nav-link'" role="tab" data-bs-toggle="tab">
-                    <i class="fa fa-home"></i> About
+                    <i class="oi" data-icon="home"></i> About
                 </a>
             </li>
             <li class="nav-item" role="presentation">
                 <a href="#discuss" aria-controls="discuss" t-att-class="'nav-link active' if comments else 'nav-link'" role="tab" data-bs-toggle="tab">
-                    <i class="fa fa-comments"></i> Comments <t t-if="slide.channel_id.allow_comment">(<span t-out="slide.comments_count"/>)</t>
+                    <i class="oi oi-filled" data-icon="forum"></i> Comments <t t-if="slide.channel_id.allow_comment">(<span t-out="slide.comments_count"/>)</t>
                 </a>
             </li>
             <li class="nav-item" role="presentation" groups="base.group_user">
                 <a href="#statistic" aria-controls="statistic" class="nav-link" role="tab" data-bs-toggle="tab">
-                    <i class="fa fa-bar-chart"></i> Statistics
+                    <i class="oi" data-icon="bar_chart"></i> Statistics
                 </a>
             </li>
         </ul>
@@ -330,11 +330,11 @@
                     <div class="text-muted border-start ps-3">
                         <div class="o_wslides_js_slide_like me-2">
                             <span t-attf-class="o_wslides_js_slide_like_up #{'disabled' if not slide.channel_id.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
-                                <i t-attf-class="fa fa-1x #{'fa-thumbs-up' if slide.user_vote == 1 else 'fa-thumbs-o-up'}" role="img" aria-label="Likes" title="Like"/>
+                                <i t-attf-class="oi oi-1x #{'oi-filled' if slide.user_vote == 1 else ''}" data-icon="thumb_up" role="img" aria-label="Likes" title="Like"/>
                                 <span t-field="slide.likes" t-options="{'format_decimalized_number': True}"/>
                             </span>
                             <span t-attf-class="o_wslides_js_slide_like_down ms-3 #{'disabled' if not slide.channel_id.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
-                                <i t-attf-class="fa fa-1x #{'fa-thumbs-down' if slide.user_vote == -1 else 'fa-thumbs-o-down'}" role="img" aria-label="Dislikes" title="Dislike"/>
+                                <i t-attf-class="oi oi-1x #{'oi-filled' if slide.user_vote == -1 else ''}" data-icon="thumb_down" role="img" aria-label="Dislikes" title="Dislike"/>
                                 <span t-field="slide.dislikes" t-options="{'format_decimalized_number': True}"/>
                             </span>
                         </div>
@@ -487,15 +487,15 @@
         <div class="row d-flex mb-2 mx-0">
             <div class="h4">
                 <small class="text-muted">
-                    <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_sequence_handler fa fa-bars me-1 text-muted" t-if="slide.channel_id.can_upload and not slide_completed" />
+                    <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_sequence_handler oi me-1 text-muted" data-icon="menu" t-if="slide.channel_id.can_upload and not slide_completed" />
                     <t t-if="question_index != NoneType"><span class="o_wslides_quiz_question_sequence" t-out="question_index+1"/>.</t>
                     <t t-else=""><span class="o_wslides_quiz_question_sequence" t-out="question['sequence']"/>.</t>
                 </small>
                 <span t-out="question['question']"/>
             </div>
             <div class="ms-auto o_wslides_js_quiz_edit_del" t-if="slide.channel_id.can_upload and not slide_completed" >
-                <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_edit_question fa fa-pencil-square-o p-1 text-muted"></i>
-                <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_delete_question fa fa-trash p-1 text-muted"></i>
+                <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_edit_question oi p-1 text-muted" data-icon="pencil_square"></i>
+                <i class="o_wslides_js_quiz_icon o_wslides_js_quiz_delete_question oi oi-filled p-1 text-muted" data-icon="delete"></i>
             </div>
         </div>
         <div class="list-group">
@@ -509,16 +509,16 @@
                             t-att-value="answer['id']"
                             class="d-none"
                             t-att-disabled="True if not slide.channel_id.is_member or slide_completed else ''"/>
-                        <i t-att-class="'fa fa-circle text-400 %s' % ('d-none' if slide_completed and answer['is_correct'] else '')"/>
-                        <i class="fa fa-times-circle text-danger d-none"></i>
-                        <i t-att-class="'fa fa-check-circle text-success %s' % ('d-none' if not (slide_completed and answer['is_correct']) else '')"></i>
+                        <i t-att-class="'oi oi-filled text-400 %s' % ('d-none' if slide_completed and answer['is_correct'] else '')" data-icon="circle"/>
+                        <i class="oi oi-filled text-danger d-none" data-icon="cancel"></i>
+                        <i t-att-class="'oi oi-filled text-success %s' % ('d-none' if not (slide_completed and answer['is_correct']) else '')" data-icon="check_circle"></i>
                     </label>
                     <span t-out="answer['text_value']"/>
                 </a>
                 <t t-if="slide_completed and answer['is_correct']" t-set="correct_answer_comment" t-value="answer['comment']"/>
             </t>
             <div t-attf-class="o_wslides_quiz_answer_info list-group-item list-group-item-info #{'' if correct_answer_comment else 'd-none'}">
-                <i class="fa fa-info-circle"/>
+                <i class="oi" data-icon="info"/>
                 <span class="o_wslides_quiz_answer_comment ms-1">
                     <t t-if="correct_answer_comment" t-out="correct_answer_comment"/>
                 </span>
@@ -530,11 +530,11 @@
 <template id="lesson_content_quiz_add_buttons" name="Lesson: Quiz Add Buttons template">
     <div class="o_wslides_js_lesson_quiz_new_question mt-3">
         <a t-attf-class="o_wslides_js_quiz_add o_wslides_js_quiz_add_quiz btn btn-light border #{'d-none ' if slide.question_ids else ''}" role="button">
-            <i class="fa fa-plus me-2"/>
+            <i class="oi me-2" data-icon="add"/>
             <span>Add Quiz</span>
         </a>
         <a t-attf-class="o_wslides_js_quiz_add o_wslides_js_quiz_add_question btn btn-light border ms-3 #{'' if slide.question_ids else 'd-none '}" role="button">
-            <i class="fa fa-plus me-2"/>
+            <i class="oi me-2" data-icon="add"/>
             <span>Add Question</span>
         </a>
     </div>
diff --git a/addons/website_slides/views/website_slides_templates_lesson_embed.xml b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
index a896135cc2728b..cdce397b7f7f69 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_embed.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
@@ -28,7 +28,7 @@
                                     </div>
                                     <div class="col flex-grow-0 d-flex text-nowrap small">
                                         <a class="oe_slide_js_embed_option_link" href="#" data-bs-toggle="modal" t-attf-data-bs-target="#slideShareModal_{{slide.id}}">
-                                            <i class="fa fa-share-alt" aria-label="Share" title="Share"/>
+                                            <i class="oi" data-icon="family_history" aria-label="Share" title="Share"/>
                                             Share
                                         </a>
                                     </div>
@@ -74,7 +74,7 @@
                                 <div id="PDFViewerLoader" class="oe_slides_loader mt-3 mx-2 w-100">
                                     <div class="toast show mx-auto">
                                         <div class="toast-header">
-                                            <i class="fa fa-circle-o-notch fa-spin me-2"/><b>Loading...</b>
+                                            <i class="oi oi-spin me-2" data-icon="autorenew"/><b>Loading...</b>
                                         </div>
                                         <div class="toast-body p-0">
                                             <img class="img-fluid w-100" t-att-src="website.image_url(slide, 'image_256')"/>
@@ -97,26 +97,26 @@
                                             <span class="input-group-text" id="page_count"/>
                                         </div>
                                         <span id="zoomout" class="d-inline ms-2 me-2" title="Zoom out" aria-label="Zoom out" role="button">
-                                            <i class="fa fa-search-minus" />
+                                            <i class="oi" data-icon="zoom_out" />
                                         </span>
                                         <span id="zoomin" class="d-inline" title="Zoom in" aria-label="Zoom in" role="button">
-                                            <i class="fa fa-search-plus" />
+                                            <i class="oi" data-icon="zoom_in" />
                                         </span>
                                     </div>
                                     <div class="col text-center o_slide_navigation_buttons">
-                                        <span id="first" class="me-1 me-sm-2" title="First slide" aria-label="First slide" role="button"><i class="fa fa-step-backward"/></span>
-                                        <span id="previous" class="mx-1 mx-sm-2" title="Previous slide" aria-label="Previous slide" role="button"><i class="fa fa-arrow-circle-left"/></span>
-                                        <span id="next" class="mx-1 mx-sm-2" title="Next slide" aria-label="Next slide" role="button"><i class="fa fa-arrow-circle-right"/></span>
-                                        <span id="last" class="mx-1 mx-sm-2" title="Last slide" aria-label="Last slide" role="button"><i class="fa fa-step-forward"/></span>
+                                        <span id="first" class="me-1 me-sm-2" title="First slide" aria-label="First slide" role="button"><i class="oi" data-icon="skip_previous"/></span>
+                                        <span id="previous" class="mx-1 mx-sm-2" title="Previous slide" aria-label="Previous slide" role="button"><i class="oi oi-filled" data-icon="arrow_circle_left"/></span>
+                                        <span id="next" class="mx-1 mx-sm-2" title="Next slide" aria-label="Next slide" role="button"><i class="oi oi-filled" data-icon="arrow_circle_right"/></span>
+                                        <span id="last" class="mx-1 mx-sm-2" title="Last slide" aria-label="Last slide" role="button"><i class="oi" data-icon="skip_next"/></span>
                                         <a t-if="slide.slide_resource_downloadable" id="download" t-attf-href="/web/content/slide.slide/#{slide.id}/binary_content?download=true"
                                            class="ms-1 ms-sm-2" title="Download Content" aria-label="Download" role="button">
-                                            <i class="fa fa-download" />
+                                            <i class="oi" data-icon="download" />
                                         </a>
                                     </div>
                                     <div class="col-2 col-sm-3 text-end flex-grow-0">
                                         <span id="fullscreen" class="ms-1 ms-sm-2"
                                            title="View fullscreen" aria-label="Fullscreen" role="button">
-                                            <i class="fa fa-arrows-alt"/>
+                                            <i class="oi" data-icon="open_with"/>
                                         </span>
                                     </div>
                                 </div>
@@ -138,7 +138,7 @@
                 </head>
                 <body>
                     <div class="slide-private-view">
-                        <h3 style="border-bottom: 1px solid !important;padding-bottom: 10px;"><i class="fa fa-exclamation-triangle" role="img" aria-label="Attention" title="Attention"></i> This document is private.</h3>
+                        <h3 style="border-bottom: 1px solid !important;padding-bottom: 10px;"><i class="oi" data-icon="warning" role="img" aria-label="Attention" title="Attention"></i> This document is private.</h3>
                     </div>
                 </body>
             </html>
diff --git a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
index 1ac9c8981f03f6..e1cb86b72ce8c0 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -16,7 +16,7 @@
             <div class="o_wslides_slide_fs_header d-flex flex-shrink-0 text-white">
                 <div class="d-flex">
                     <a class="o_wslides_fs_toggle_sidebar d-flex align-items-center px-3" href="#" title="Lessons">
-                        <i class="fa fa-bars"/><span class="d-none d-md-inline-block ms-1">Lessons</span>
+                        <i class="oi" data-icon="menu"/><span class="d-none d-md-inline-block ms-1">Lessons</span>
                     </a>
                     <a class="o_wslides_fs_review d-flex align-items-center" title="Reviews" t-if="slide.channel_id.allow_comment">
                         <t t-call="portal_rating.rating_stars_static_popup_composer"
@@ -33,7 +33,8 @@
                             force_submit_url="'/mail/message/update_content' if last_message_id else False"
                             disable_composer="not channel.can_review"
                             _link_btn_classes.f="d-inline-block text-white fw-light shadow-none"
-                            icon.f="fa fa-pencil"
+                            icon.f="edit"
+                            icon_class.f="oi-filled"
                             _text_classes.f="d-none d-md-inline-block"
                             hide_rating_avg="True"
                             is_fullscreen="True"/>
@@ -41,14 +42,14 @@
                 </div>
                 <div class="d-flex ms-auto">
                     <a class="o_wslides_share d-flex align-items-center px-3" href="#" title="Share">
-                        <i class="fa fa-share-alt"/>
+                        <i class="oi" data-icon="family_history"/>
                         <span class="d-none d-md-inline-block ms-2">Share</span>
                     </a>
                     <a class="d-flex align-items-center px-3 o_wslides_fs_exit_fullscreen" t-attf-href="/slides/slide/#{slug(slide)}" title="Exit Fullscreen">
-                        <i class="fa fa-sign-out"/><span class="d-none d-md-inline-block ms-1">Exit Fullscreen</span>
+                        <i class="oi" data-icon="logout"/><span class="d-none d-md-inline-block ms-1">Exit Fullscreen</span>
                     </a>
                     <a class="d-flex align-items-center px-3" t-attf-href="/slides/#{slug(slide.channel_id)}" title="Back to course">
-                        <i class="fa fa-home"/><span class="d-none d-md-inline-block ms-1">Back to course</span>
+                        <i class="oi" data-icon="home"/><span class="d-none d-md-inline-block ms-1">Back to course</span>
                     </a>
                 </div>
             </div>
@@ -64,7 +65,7 @@
                             </a>
                             <div t-if="not is_public_user">
                                 <span t-attf-class="o_wslides_channel_completion_completed badge text-bg-success #{'d-none' if not slide.channel_id.completed else ''}">
-                                    <i class="fa fa-check"/> Completed
+                                    <i class="oi" data-icon="check"/> Completed
                                 </span>
                                 <div t-attf-class="o_wslides_channel_completion_progressbar #{'d-none' if slide.channel_id.completed else 'd-flex'} w-100 align-items-center">
                                     <div class="progress flex-grow-1 bg-black-50" style="height: 6px;">
@@ -103,8 +104,8 @@
             t-attf-href="#collapse-#{category.id if category else 0}" t-attf-aria-controls="collapse-#{category.id if category else 0}">
             <b t-field="category.name"/>
             <div class="flex-grow-1"/>
-            <i class="fa fa-fw fa-caret-left" role="img"/>
-            <i class="fa fa-fw fa-caret-down" role="img"/>
+            <i class="oi oi-fw" data-icon="arrow_left" role="img"/>
+            <i class="oi oi-fw" data-icon="arrow_drop_down" role="img"/>
         </a>
         <ul t-attf-class="o_wslides_fs_sidebar_section_slides position-relative px-0 pb-1 my-0 mx-n3 collapse #{'show' if category_collapsed else ''}"
             t-attf-id="collapse-#{category.id if category else 0}">
@@ -137,14 +138,14 @@
                         <a t-if="can_access" class="d-block" href="#">
                             <div class="d-flex">
                                 <t t-if="is_member" t-call="website_slides.slide_sidebar_done_button"/>
-                                <i t-else="" t-attf-class="fa #{slide.slide_icon_class} me-2"/>
+                                <i t-else="" class="oi me-2" t-attf-data-icon="#{slide.slide_icon_class}"/>
                                 <div class="o_wslides_fs_slide_name text-truncate" t-out="slide.name"/>
                             </div>
                         </a>
                         <span t-else="" class="d-block" href="#">
                             <div class="d-flex">
                                 <t t-if="is_member" t-call="website_slides.slide_sidebar_done_button"/>
-                                <i t-else="" t-attf-class="fa #{slide.slide_icon_class} me-2 text-600"/>
+                                <i t-else="" class="oi me-2 text-600" t-attf-data-icon="#{slide.slide_icon_class}"/>
                                 <div class="o_wslides_fs_slide_name text-600 text-truncate" t-out="slide.name"/>
                             </div>
                         </span>
@@ -152,17 +153,17 @@
                             <t t-if="can_access_channel" t-foreach="slide.slide_resource_ids" t-as="resource">
                                 <li class="ps-1 mb-1">
                                     <a t-if="resource.resource_type == 'url'" class="o_wslides_fs_slide_link" t-att-href="resource.link" target="_blank">
-                                        <i class="fa fa-link me-2"/><span t-out="resource.name"/>
+                                        <i class="oi me-2" data-icon="link"/><span t-out="resource.name"/>
                                     </a>
                                     <a t-else="" class="o_wslides_fs_slide_link ps-0" t-att-href="resource.download_url">
-                                        <i class="fa fa-download me-2"/><span t-out="resource.name"/>
+                                        <i class="oi me-2" data-icon="download"/><span t-out="resource.name"/>
                                     </a>
                                 </li>
                             </t>
                             <div t-else="" class="o_wslides_js_course_join o_wslides_no_access ps-0">
                                 <li t-if="slide.channel_id.enroll == 'public' or (slide.channel_id.enroll == 'invite' and slide.channel_id.is_member_invited)"
                                     class="o_wslides_fs_slide_link mb-1">
-                                    <i class="fa fa-download me-1"/>
+                                    <i class="oi me-1" data-icon="download"/>
                                     <t t-call="website_slides.join_course_link" for_resources="1"/>
                                 </li>
                             </div>
@@ -183,10 +184,10 @@
                                 t-att-data-session-answers="session_answers"
                                 t-att-data-website-share-url="slide.website_share_url">
                                 <a t-if="can_access" class="o_wslides_fs_slide_quiz o_wslides_fs_slide_name" href="#" t-att-index="i">
-                                    <i class="fa fa-flag-checkered text-warning"/>Quiz
+                                    <i class="oi text-warning" data-icon="sports_score"/>Quiz
                                 </a>
                                 <span t-else="" class="text-600">
-                                    <i class="fa fa-flag-checkered text-warning"/>Quiz
+                                    <i class="oi text-warning" data-icon="sports_score"/>Quiz
                                 </span>
                             </li>
                         </ul>
diff --git a/addons/website_slides/views/website_slides_templates_profile.xml b/addons/website_slides/views/website_slides_templates_profile.xml
index d4c8659cbaf94e..8edaf78945bd10 100644
--- a/addons/website_slides/views/website_slides_templates_profile.xml
+++ b/addons/website_slides/views/website_slides_templates_profile.xml
@@ -18,12 +18,12 @@
                     <div t-elif="env.user == user" class="text-muted d-inline-block">
                         Go through all its content to see a Course in this section. <br />
                         <a href="/slides/" class="btn-link">
-                            <i class="fa fa-arrow-right"></i> Start Learning
+                            <i class="oi" data-icon="arrow_forward"></i> Start Learning
                         </a>
                     </div>
                     <div t-else="" class="text-muted d-inline-block">No completed courses yet!</div>
                     <div t-if="env.user != user" class="text-end d-inline-block pull-right">
-                        <a href="/slides" class="btn btn-link btn-sm"><i class="oi oi-arrow-right me-1"/>All Courses</a>
+                        <a href="/slides" class="btn btn-link btn-sm"><i class="oi me-1" data-icon="east"/>All Courses</a>
                     </div>
                 </div>
                 <div class="mb32">
@@ -32,7 +32,7 @@
                      <p t-elif="env.user == user" class="text-muted">
                         All the courses you attend will appear here. <br />
                         <a href="/slides/" class="btn-link o_translate_inline">
-                            <i class="fa fa-arrow-right"></i> Start Learning
+                            <i class="oi" data-icon="arrow_forward"></i> Start Learning
                         </a>
                     </p>
                     <p t-else="" class="text-muted">No ongoing courses yet!</p>
diff --git a/addons/website_slides/views/website_slides_templates_utils.xml b/addons/website_slides/views/website_slides_templates_utils.xml
index ce7b74b5253721..560cf4c8d7452c 100644
--- a/addons/website_slides/views/website_slides_templates_utils.xml
+++ b/addons/website_slides/views/website_slides_templates_utils.xml
@@ -11,25 +11,25 @@
         <div class="s_share">
             <a t-attf-href="https://www.facebook.com/sharer/sharer.php?u=#{website_share_url}" class="btn border bg-white o_wslides_js_social_share"
                 social-key="facebook" aria-label="Share on Facebook" title="Share on Facebook" target="_blank">
-                <i class="fa fa-facebook-square fa-fw"/>
+                <i class="oi oi-fw" data-icon="oi_facebook-square"/>
             </a>
             <a t-attf-href="https://twitter.com/intent/tweet?text=#{record.name}&amp;url=#{website_share_url}" class="btn border bg-white o_wslides_js_social_share"
                 social-key="twitter" aria-label="Share on X" title="Share on X" target="_blank">
-                <i class="fa fa-twitter fa-fw"/>
+                <i class="oi oi-fw" data-icon="oi_x"/>
             </a>
             <a t-attf-href="http://www.linkedin.com/sharing/share-offsite/?url=#{website_share_url}" class="btn border bg-white o_wslides_js_social_share"
                 social-key="linkedin" aria-label="Share on LinkedIn" title="Share on LinkedIn" target="_blank">
-                <i class="fa fa-linkedin fa-fw"/>
+                <i class="oi oi-fw" data-icon="oi_linkedin"/>
             </a>
             <a t-attf-href="https://wa.me/?text=#{website_share_url}" class="btn border bg-white o_wslides_js_social_share"
                 social-key="whatsapp" aria-label="Share on Whatsapp" title="Share on Whatsapp" target="_blank">
-                <i class="fa fa-whatsapp fa-fw"/>
+                <i class="oi oi-fw" data-icon="oi_whatsapp"/>
             </a>
             <a t-attf-href="http://pinterest.com/pin/create/button/?url=#{website_share_url}"
                 social-key="pinterest"
                 class="btn border bg-white o_wslides_js_social_share"
                 aria-label="Share on Pinterest" title="Share on Pinterest">
-                <i class="fa fa-pinterest fa-fw"/>
+                <i class="oi oi-fw" data-icon="oi_pinterest"/>
             </a>
         </div>
     </div>
@@ -47,7 +47,7 @@
                     t-attf-data-slide-id="#{record.id if record._name == 'slide.slide' else False}"
                     t-attf-data-channel-id="#{record.id if record._name == 'slide.channel' else False}"
                     style="border-top-end-radius: 4px;border-bottom-end-radius: 4px;">
-                    <i class="fa fa-envelope"/> Send Email
+                    <i class="oi oi-filled" data-icon="mail"/> Send Email
                 </button>
             </div>
             <div class="alert alert-info d-none" role="alert">
@@ -73,7 +73,7 @@
                 <t t-out="slide.embed_code_external"/>
             </textarea>
             <button t-att-id="'share_embed_clipboard_button_id_%s' % record.id" class="btn btn-sm btn-primary o_embed_clipboard_button float-end mt-1 p-2" >
-                <i class="fa fa-clipboard"/> Copy Embed Code
+                <i class="oi" data-icon="assignment"/> Copy Embed Code
             </button>
         </div>
         <div t-if="slide.slide_category == 'document' and not embed_hide_starting_page" class="input-group mt-5">
@@ -127,7 +127,7 @@
             readonly="readonly" onclick="this.select();"
             t-att-value="website_share_url"/>
         <button t-att-id="'share_link_clipboard_button_id_%s' % record.id" class="btn btn-sm btn-primary o_clipboard_button" >
-            <i class="fa fa-clipboard"/> Copy Link
+            <i class="oi" data-icon="assignment"/> Copy Link
         </button>
     </div>
 </template>
@@ -139,7 +139,7 @@
 
 <!-- Python equivalent of the JS template "website.slides.sidebar.done.button" -->
 <template id="slide_sidebar_done_button" name="Sidebar Done Button">
-    <t t-set="uncompleted_icon" t-value="use_slide_icon and slide.slide_icon_class or 'fa-circle-thin'"/>
+    <t t-set="uncompleted_icon" t-value="use_slide_icon and slide.slide_icon_class or 'radio_button_unchecked'"/>
     <div t-if="is_member"
         class="o_wslides_sidebar_done_button align-self-start"
         t-att-data-id="slide.id"
@@ -149,12 +149,12 @@
         t-att-data-can-self-mark-uncompleted="slide.can_self_mark_uncompleted"
         t-att-data-is-member="is_member">
         <button class="o_wslides_button_complete btn btn-sm" t-if="slide_completed and slide.can_self_mark_uncompleted or not slide_completed and slide.can_self_mark_completed">
-            <i t-if="slide_completed" class="o_wslides_slide_completed fa fa-check-circle fa-fw text-success fa-lg" t-att-data-slide-id="slide.id" title="Mark as not done"/>
-            <i t-else="" t-attf-class="fa #{uncompleted_icon} fa-fw fa-lg" t-att-data-slide-id="slide.id" title="Mark as done"/>
+            <i t-if="slide_completed" class="o_wslides_slide_completed oi oi-fw oi-lg text-success" data-icon="check_circle" t-att-data-slide-id="slide.id" title="Mark as not done"/>
+            <i t-else="" class="oi oi-fw oi-lg" t-attf-data-icon="#{uncompleted_icon}" t-att-data-slide-id="slide.id" title="Mark as done"/>
         </button>
         <button class="o_wslides_button_complete o_wslides_button_uncompleted btn btn-sm border-0" t-else="" disabled="1">
-            <i t-if="slide_completed" class="o_wslides_slide_completed fa fa-check fa-fw text-success fa-lg" t-att-data-slide-id="slide.id" title="Can not be marked as not done"/>
-            <i t-else="" t-attf-class="fa #{uncompleted_icon} fa-fw fa-lg" t-att-data-slide-id="slide.id" title="Can not be marked as done"/>
+            <i t-if="slide_completed" class="o_wslides_slide_completed oi oi-fw oi-lg text-success" data-icon="check" t-att-data-slide-id="slide.id" title="Can not be marked as not done"/>
+            <i t-else="" class="oi oi-fw oi-lg" t-attf-data-icon="#{uncompleted_icon}" t-att-data-slide-id="slide.id" title="Can not be marked as done"/>
         </button>
     </div>
 </template>
diff --git a/addons/website_slides_forum/views/forum_forum_templates.xml b/addons/website_slides_forum/views/forum_forum_templates.xml
index 55bf254b523fdc..1f5c3d4d6eb191 100644
--- a/addons/website_slides_forum/views/forum_forum_templates.xml
+++ b/addons/website_slides_forum/views/forum_forum_templates.xml
@@ -43,7 +43,7 @@
         </xpath>
         <xpath expr="//t[@t-foreach='sorted_forums']" position="after">
             <div t-if="_forums == courses_discussions" class="d-flex justify-content-center">
-                <a href="/slides" class="btn btn-link">Check out our courses <i class="fa fa-long-arrow-right"/></a>
+                <a href="/slides" class="btn btn-link">Check out our courses <i class="oi" data-icon="east"/></a>
             </div>
         </xpath>
     </template>
diff --git a/addons/website_slides_forum/views/res_config_settings_views.xml b/addons/website_slides_forum/views/res_config_settings_views.xml
index 67be5e9e04806e..9174083b1191d2 100644
--- a/addons/website_slides_forum/views/res_config_settings_views.xml
+++ b/addons/website_slides_forum/views/res_config_settings_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <xpath expr="//setting[@id='website_slide_install_website_slides_forum']" position="inside">
                 <div class="mt8">
-                    <button type="action" name="%(website_slides_forum.forum_forum_action_channel)d" string="Manage Forums" class="btn-link" icon="oi-arrow-right"/>
+                    <button type="action" name="%(website_slides_forum.forum_forum_action_channel)d" string="Manage Forums" class="btn-link" icon="east"/>
                 </div>
             </xpath>
         </field>
diff --git a/addons/website_slides_forum/views/slide_channel_views.xml b/addons/website_slides_forum/views/slide_channel_views.xml
index e02e3484a9767e..49606cfab3e153 100644
--- a/addons/website_slides_forum/views/slide_channel_views.xml
+++ b/addons/website_slides_forum/views/slide_channel_views.xml
@@ -10,7 +10,8 @@
                     type="object"
                     class="oe_stat_button"
                     invisible="not forum_id"
-                    icon="fa-comment">
+                    icon="chat_bubble"
+                    icon_class="oi-filled">
                     <field string="Forum Posts" name="forum_total_posts" widget="statinfo"/>
                 </button>
             </xpath>
diff --git a/addons/website_slides_forum/views/website_slides_templates.xml b/addons/website_slides_forum/views/website_slides_templates.xml
index 2d9f1509ef3748..e6ed7c1d3c1b39 100644
--- a/addons/website_slides_forum/views/website_slides_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_templates.xml
@@ -15,7 +15,7 @@
             <a t-if="(channel.is_member or channel.visibility == 'public') and slide.channel_id.forum_id" id="fullscreen_forum_button"
                 class="d-flex align-items-center px-3" t-attf-href="/forum/#{slug(slide.channel_id.forum_id)}"
                 target="new" title="Forum">
-                <i class="fa fa-comments"/><span class="ms-1 d-none d-md-inline-block">Forum</span>
+                <i class="oi oi-filled" data-icon="forum"/><span class="ms-1 d-none d-md-inline-block">Forum</span>
             </a>
         </xpath>
     </template>
diff --git a/addons/website_slides_survey/models/slide_slide.py b/addons/website_slides_survey/models/slide_slide.py
index 49d41d6146b1ee..d96f91db5375d1 100644
--- a/addons/website_slides_survey/models/slide_slide.py
+++ b/addons/website_slides_survey/models/slide_slide.py
@@ -87,7 +87,7 @@ def _compute_is_preview(self):
     @api.depends('slide_type')
     def _compute_slide_icon_class(self):
         certification = self.filtered(lambda slide: slide.slide_type == 'certification')
-        certification.slide_icon_class = 'fa-trophy'
+        certification.slide_icon_class = 'trophy'
         super(SlideSlide, self - certification)._compute_slide_icon_class()
 
     @api.depends('slide_category', 'source_type')
diff --git a/addons/website_slides_survey/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.js b/addons/website_slides_survey/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.js
index 669f155565f0b5..b2009d1288f623 100644
--- a/addons/website_slides_survey/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.js
+++ b/addons/website_slides_survey/static/src/js/public/components/slide_upload_dialog/slide_upload_dialog.js
@@ -11,7 +11,8 @@ patch(SlideUploadDialog.prototype, {
         this.pagesTemplates["certification"] =
             "website_slides_survey.SlideCategoryTutorial.Certification";
         this.slideCategoryData["certification"] = {
-            icon: "fa-trophy",
+            icon: "trophy",
+            icon_class: "oi-filled",
             label: _t("Certification"),
         };
     },
diff --git a/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml b/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
index c2c2ae15666971..2f7bd9e6f4fb12 100644
--- a/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
+++ b/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
@@ -5,7 +5,7 @@
         <div class="justify-content-center align-self-center text-center">
             <div t-if="slide.category === 'certification' &amp;&amp; !slide.completed" class="">
                 <a class="btn btn-primary" t-att-href="'/slides_survey/slide/get_certification_url?slide_id=' + slide.id" target="_blank">
-                    <i class="fa fa-graduation-cap"/>
+                    <i class="oi" data-icon="school"/>
                     <span t-if="channel.isMember"> Begin Certification</span>
                     <span t-else="">Test Certification</span>
                 </a>
@@ -13,12 +13,12 @@
             <div t-if="slide.category === 'certification' &amp;&amp; slide.completed">
                 <h4 class="mb-3 text-white">Congratulations, you passed the Certification!</h4>
                 <a role="button" class="btn btn-primary" t-att-href="'/survey/' + slide.certificationId + '/get_certification'">
-                    <i class="fa fa-fw fa-trophy" role="img" aria-label="Download certification" title="Download certification"/> Download certification
+                    <i class="oi oi-fw oi-filled" data-icon="trophy" role="img" aria-label="Download certification" title="Download certification"/> Download certification
                 </a>
             </div>
             <div t-if="slide.category === 'certification' &amp;&amp; channel.canUpload" class="mt-3 h6">
                 <a t-att-href="'/odoo/survey.survey/' + slide.certificationId">
-                    <i class="oi oi-arrow-right me-1"/>Add Questions to this Survey
+                    <i class="oi me-1" data-icon="east"/>Add Questions to this Survey
                 </a>
             </div>
         </div>
diff --git a/addons/website_slides_survey/views/res_config_settings_views.xml b/addons/website_slides_survey/views/res_config_settings_views.xml
index 75c603adc8211a..17a35a3a6d6b58 100644
--- a/addons/website_slides_survey/views/res_config_settings_views.xml
+++ b/addons/website_slides_survey/views/res_config_settings_views.xml
@@ -8,7 +8,7 @@
         <field name="arch" type="xml">
             <xpath expr="//setting[@id='website_slide_install_website_slides_survey']" position="inside">
                 <div class="mt8">
-                    <button type="action" name="%(website_slides_survey.survey_survey_action_slides)d" string="Manage Certifications" class="btn-link" icon="oi-arrow-right"/>
+                    <button type="action" name="%(website_slides_survey.survey_survey_action_slides)d" string="Manage Certifications" class="btn-link" icon="east"/>
                 </div>
             </xpath>
         </field>
diff --git a/addons/website_slides_survey/views/slide_channel_views.xml b/addons/website_slides_survey/views/slide_channel_views.xml
index c4eea480e246a6..c0b3ccd99aa566 100644
--- a/addons/website_slides_survey/views/slide_channel_views.xml
+++ b/addons/website_slides_survey/views/slide_channel_views.xml
@@ -9,7 +9,8 @@
                 <button name="action_redirect_to_certified_members"
                     invisible="nbr_certification == 0"
                     type="object"
-                    icon="fa-trophy"
+                    icon="trophy"
+                    icon_class="oi-filled"
                     class="oe_stat_button"
                     groups="website_slides.group_website_slides_officer">
                     <div class="o_field_widget o_stat_info">
diff --git a/addons/website_slides_survey/views/survey_survey_views.xml b/addons/website_slides_survey/views/survey_survey_views.xml
index cbbc05a36032ba..78712a0dac9fce 100644
--- a/addons/website_slides_survey/views/survey_survey_views.xml
+++ b/addons/website_slides_survey/views/survey_survey_views.xml
@@ -42,7 +42,7 @@
                     type="object"
                     class="oe_stat_button"
                     invisible="slide_channel_count == 0"
-                    icon="fa-graduation-cap"
+                    icon="school"
                     groups="website_slides.group_website_slides_officer">
                     <field string="Courses" name="slide_channel_count" widget="statinfo"/>
                 </button>
diff --git a/addons/website_slides_survey/views/survey_templates.xml b/addons/website_slides_survey/views/survey_templates.xml
index 46c2a569423cef..d34cb6766e1459 100644
--- a/addons/website_slides_survey/views/survey_templates.xml
+++ b/addons/website_slides_survey/views/survey_templates.xml
@@ -7,7 +7,7 @@
                     <a role="button" class="o_wslides_share btn btn-light" href="#"
                        t-att-data-id="channel_id.id" t-att-data-name="channel_id.name" t-att-data-url="channel_id.website_absolute_url"
                        data-is-channel="True" t-att-data-email-sharing="bool(channel_id.share_channel_template_id)">
-                        <i class="fa fa-share-alt d-none d-md-inline" aria-label="Share certification" title="Share certification"/>
+                        <i class="oi oi-filled d-none d-md-inline" data-icon="share" aria-label="Share certification" title="Share certification"/>
                         <span class="d-md-none">Share certification</span>
                     </a>
                 </t>
@@ -15,7 +15,7 @@
             <xpath expr="//div[contains(@t-attf-class, 'o_survey_finished')]//h1" position="before">
                 <div t-if="channel_id" class="mb-3">
                     <a t-att-href="channel_id.website_absolute_url">
-                        <i class="oi oi-chevron-left me-2" aria-hidden="true"/>Go back to course
+                        <i class="oi me-2" data-icon="chevron_backward" aria-hidden="true"/>Go back to course
                     </a>
                 </div>
             </xpath>
diff --git a/addons/website_slides_survey/views/website_profile.xml b/addons/website_slides_survey/views/website_profile.xml
index 3b7695d77c1160..b170ba5be5fd84 100644
--- a/addons/website_slides_survey/views/website_profile.xml
+++ b/addons/website_slides_survey/views/website_profile.xml
@@ -27,7 +27,7 @@
                             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                             <div class="input-group-append">
                                 <button type="submit" class="btn btn-light" aria-label="Search" title="Search">
-                                    <i class="oi oi-search"/>
+                                    <i class="oi" data-icon="search"/>
                                 </button>
                             </div>
                         </div>
@@ -37,7 +37,7 @@
                     <p t-if="certification_search_terms">No certification found for the given search term.</p>
                     <p t-else="">You have not taken any certification yet.</p>
                     <a href="/slides?slide_category=certification">
-                        <i class="oi oi-arrow-right"/> See Certifications
+                        <i class="oi" data-icon="east"/> See Certifications
                     </a>
                 </t>
                 <div t-else="" class="card p-3 mb-3" t-foreach="user_inputs" t-as="user_input">
@@ -76,7 +76,7 @@
                                     <small class="fw-bold">Score: <span t-out="certificate.scoring_percentage"/> %</small>
                                     <div class="float-end">
                                         <a role="button" class="float-end" t-att-href="'/survey/%s/get_certification' % certificate.survey_id.id">
-                                            <i class="fa fa-download" aria-label="Download certification" title="Download Certification"/>
+                                            <i class="oi" data-icon="download" aria-label="Download certification" title="Download Certification"/>
                                         </a>
                                         <a role="button" class="o_wslides_share me-2"
                                            t-att-data-id="certificate.slide_id.channel_id.id"
@@ -84,7 +84,7 @@
                                            t-att-data-url="certificate.slide_id.channel_id.website_absolute_url"
                                            t-att-data-email-sharing="bool(certificate.slide_id.channel_id.share_channel_template_id)"
                                            data-is-channel="True">
-                                            <i class="fa fa-share-alt" aria-label="Share" title="Share"/>
+                                            <i class="oi" data-icon="family_history" aria-label="Share" title="Share"/>
                                         </a>
                                     </div>
                                 </div>
@@ -98,14 +98,14 @@
             <div class="text-muted d-inline-block">
                 Certifications are exams that you successfully passed. <br />
                 <a href="/slides?slide_type=certification" class="btn-link">
-                    <i class="fa fa-arrow-right"></i> Get Certified
+                    <i class="oi" data-icon="arrow_forward"></i> Get Certified
                 </a>
             </div>
         </t>
         <t t-else="">
             <div class="text-muted d-inline-block">No certifications yet!</div>
             <div class="text-end d-inline-block pull-right">
-                <a href="/slides?slide_category=certification" class="btn btn-link btn-sm"><i class="oi oi-arrow-right me-1"/>All Certifications</a>
+                <a href="/slides?slide_category=certification" class="btn btn-link btn-sm"><i class="oi me-1" data-icon="east"/>All Certifications</a>
             </div>
         </t>
     </template>
diff --git a/addons/website_slides_survey/views/website_slides_templates_course.xml b/addons/website_slides_survey/views/website_slides_templates_course.xml
index 241269426f3fbd..d3efe0b052aaa1 100644
--- a/addons/website_slides_survey/views/website_slides_templates_course.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_course.xml
@@ -12,7 +12,7 @@
                     <div>Begin your <b>certification</b> today!</div>
 
                     <a t-attf-href="#{'/slides_survey/slide/get_certification_url?slide_id=%s' %(first_slide.id) if first_slide.slide_category == 'certification' and channel.total_slides == 1 else '/slides/slide/%s?fullscreen=1' %(slug(first_slide))}" class="btn btn-success mt-2 mt-sm-0">
-                        <span>Start Now</span><i class="oi oi-chevron-right ms-2 align-middle"/>
+                        <span>Start Now</span><i class="oi ms-2 align-middle" data-icon="chevron_forward"/>
                     </a>
                 </div>
             </xpath>
diff --git a/addons/website_slides_survey/views/website_slides_templates_lesson.xml b/addons/website_slides_survey/views/website_slides_templates_lesson.xml
index 24a35411fdb9e4..3073310f536ffd 100644
--- a/addons/website_slides_survey/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_lesson.xml
@@ -9,7 +9,7 @@
                         id="start_certification"
                         t-att-href="'/slides_survey/slide/get_certification_url?slide_id=%s' %(slide.id)"
                         target="_blank">
-                        <i class="fa fa-fw fa-graduation-cap" role="img"/>
+                        <i class="oi oi-fw" data-icon="school" role="img"/>
                         <t t-if="slide.channel_id.is_member and slide.channel_id.active">Begin Certification</t>
                         <t t-else="">Test Certification</t>
                     </a>
@@ -17,12 +17,12 @@
                 <div t-if="slide.slide_category == 'certification' and channel_progress[slide.id].get('completed')" class="col mt32 mb8 text-center">
                     <h4 class="mb-3">Congratulations, you passed the Certification!</h4>
                     <a role="button" class="btn btn-primary btn-lg" t-att-href="'/survey/%s/get_certification' % slide.survey_id.id">
-                        <i class="fa fa-fw fa-trophy" role="img" aria-label="Download certification" title="Download certification"/> Download certification
+                        <i class="oi oi-fw oi-filled" data-icon="trophy" role="img" aria-label="Download certification" title="Download certification"/> Download certification
                     </a>
                 </div>
                 <div t-if="slide.slide_category == 'certification' and slide.channel_id.can_upload" class="col mb8 d-flex justify-content-center">
                     <a class="my-4" t-att-href="'/odoo/survey.survey/' + str(slide.survey_id.id)">
-                        <i class="oi oi-arrow-right me-1"/>Add Questions to this Survey
+                        <i class="oi me-1" data-icon="east"/>Add Questions to this Survey
                     </a>
                 </div>
             </xpath>
diff --git a/addons/website_slides_survey/views/website_slides_templates_utils.xml b/addons/website_slides_survey/views/website_slides_templates_utils.xml
index f80170c72cfe63..fc40ba3f49b2ea 100644
--- a/addons/website_slides_survey/views/website_slides_templates_utils.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_utils.xml
@@ -4,7 +4,8 @@
 <template id="slide_sidebar_done_button" inherit_id="website_slides.slide_sidebar_done_button">
     <xpath expr="//button[hasclass('o_wslides_button_uncompleted')]/i[1]" position="after">
         <i t-elif="slide_completed and slide.slide_category == 'certification'"
-            class="o_wslides_slide_completed fa fa-check fa-fw text-success fa-lg"
+            class="o_wslides_slide_completed oi oi-fw oi-lg text-success"
+            data-icon="check"
             t-att-data-slide-id="slide.id"
             title="Certifications you have passed cannot be marked as not done"/>
     </xpath>
diff --git a/addons/website_sms/views/website_visitor_views.xml b/addons/website_sms/views/website_visitor_views.xml
index facf501e7a8465..b7fc04c675ecff 100644
--- a/addons/website_sms/views/website_visitor_views.xml
+++ b/addons/website_sms/views/website_visitor_views.xml
@@ -34,7 +34,7 @@
         <field name="inherit_id" ref="website.website_visitor_view_tree"/>
         <field name="arch" type="xml">
             <xpath expr="//button[@name='action_send_mail']" position="after">
-                <button name="action_send_sms" type="object" icon="fa-mobile"
+                <button name="action_send_sms" type="object" icon="smartphone"
                         invisible="not mobile" string="SMS"/>
             </xpath>
         </field>
diff --git a/odoo/addons/base/data/ir_demo_data.xml b/odoo/addons/base/data/ir_demo_data.xml
index ac3afafdf00df2..02ef5bbba96d78 100644
--- a/odoo/addons/base/data/ir_demo_data.xml
+++ b/odoo/addons/base/data/ir_demo_data.xml
@@ -15,7 +15,7 @@
                     <div class="col-12 text-center">
                       <div class="card text-white bg-danger mb-3 w-75 ml64">
                         <div class="card-header">
-                                <span class="fa fa-2x fa-warning" t-translation="off">&amp;nbsp;</span>
+                                <span class="oi oi-2x" data-icon="warning" t-translation="off">&amp;nbsp;</span>
                                 <span class="text-white text-uppercase">Danger Zone</span>
                         </div>
                         <div class="card-body bg-transparent text-center">
diff --git a/odoo/addons/base/rng/common.rng b/odoo/addons/base/rng/common.rng
index 8c27d4174c3b90..967a6ed712e8f5 100644
--- a/odoo/addons/base/rng/common.rng
+++ b/odoo/addons/base/rng/common.rng
@@ -320,6 +320,7 @@
             <rng:optional><rng:attribute name="disabled"/></rng:optional>
             <rng:optional><rng:attribute name="name" /></rng:optional>
             <rng:optional><rng:attribute name="icon" /></rng:optional>
+            <rng:optional><rng:attribute name="icon_class" /></rng:optional>
             <rng:optional><rng:attribute name="string" /></rng:optional>
             <rng:optional><rng:attribute name="type" /></rng:optional>
             <rng:optional><rng:attribute name="special" /></rng:optional>
diff --git a/odoo/addons/base/static/src/css/modules.css b/odoo/addons/base/static/src/css/modules.css
index fabedf7c322e1c..39d4e55430c284 100644
--- a/odoo/addons/base/static/src/css/modules.css
+++ b/odoo/addons/base/static/src/css/modules.css
@@ -13,12 +13,6 @@
 .o_kanban_view.o_modules_kanban .o_kanban_renderer .o_kanban_record .o_dropdown_kanban,
 .o_modules_field .o_modules_kanban .o_kanban_renderer .o_kanban_record .o_dropdown_kanban {
     visibility: visible;
-    opacity: 0.5;
-}
-
-.o_kanban_view.o_modules_kanban .o_kanban_renderer .o_kanban_record:hover .o_dropdown_kanban,
-.o_kanban_view.o_modules_kanban .o_kanban_renderer .o_kanban_record .o_dropdown_kanban.show {
-    opacity: 1;
 }
 
 .o_modules_field .o_modules_kanban .o_kanban_renderer {
diff --git a/odoo/addons/base/tests/test_ir_ui_view.py b/odoo/addons/base/tests/test_ir_ui_view.py
index 1816250b3a9314..9ee7733d97bafc 100644
--- a/odoo/addons/base/tests/test_ir_ui_view.py
+++ b/odoo/addons/base/tests/test_ir_ui_view.py
@@ -1102,7 +1102,7 @@ def test_branding_t0(self):
                 <div role="search">
                     <input type="search" name="search"/>
                     <button type="submit">
-                        <i class="oi-search"/>
+                        <i class="oi" data-icon="search"/>
                     </button>
                 </div>
             </root>
@@ -3449,7 +3449,7 @@ def test_valid_accessibility_icon_text(self):
         )
         self.assertWarning(
             '<form><button icon="fa-warning"/></form>',
-            'A button with icon attribute (fa-warning) must have title in its tag, parents, descendants or have text'
+            'A button with icon attribute (warning) must have title in its tag, parents, descendants or have text'
         )
         self.assertWarning(
             '<form><span class="fa fa-warning"/><label for="key"/><field name="key"/></form>',
diff --git a/odoo/addons/base/views/ir_actions_views.xml b/odoo/addons/base/views/ir_actions_views.xml
index d2f0c76ee2de29..d61385a2585086 100644
--- a/odoo/addons/base/views/ir_actions_views.xml
+++ b/odoo/addons/base/views/ir_actions_views.xml
@@ -60,21 +60,21 @@
                     <sheet>
                         <div class="oe_button_box" name="button_box">
                             <button name="create_action" type="object"
-                                    invisible="binding_model_id" icon="fa-plus-square"
+                                    invisible="binding_model_id" icon="add_box" icon_class="oi-filled"
                                     help="Display an option on related documents to print this report" class="oe_stat_button">
                                     <div class="o_field_widget o_stat_info">
                                         <span class="o_stat_text">Add to the 'Print' menu</span>
                                     </div>
                             </button>
                             <button name="unlink_action" type="object"
-                                    invisible="not binding_model_id" icon="fa-minus-square"
+                                    invisible="not binding_model_id" icon="indeterminate_check_box" icon_class="oi-filled"
                                     help="Remove the contextual action related to this report" class="oe_stat_button">
                                     <div class="o_field_widget o_stat_info">
                                         <span class="o_stat_text">Remove from the 'Print' menu</span>
                                     </div>
                             </button>
                             <button name="associated_view" type="object"
-                                    invisible="report_type not in ['qweb-pdf', 'qweb-html', 'qweb-text']" icon='fa-code'
+                                    invisible="report_type not in ['qweb-pdf', 'qweb-html', 'qweb-text']" icon='code'
                                     class="oe_stat_button">
                                     <div class="o_field_widget o_stat_info">
                                         <span class="o_stat_text">Qweb Views</span>
@@ -357,7 +357,7 @@
                                 name="action_open_parent_action"
                                 invisible="not parent_id"
                                 class="oe_stat_button"
-                                icon="fa-database"
+                                icon="database"
                             >
                                 <div class="o_stat_info">
                                     <span class="o_stat_text">Parent Action</span>
@@ -369,7 +369,7 @@
                                 invisible="not ir_cron_ids or context.key != 'server_action'"
                                 context="{'key': 'ir_cron'}"
                                 class="oe_stat_button"
-                                icon="fa-refresh"
+                                icon="refresh"
                             >
                                 <div class="o_stat_info">
                                     <span class="o_stat_text">Scheduled Action</span>
@@ -398,7 +398,7 @@
                                 <field name="state" widget="badges_selection" options="{'allowed_selection_field': 'allowed_states'}"/>
                             </div>
                             <div class="alert alert-warning" role="alert" invisible="not warning">
-                                <i class="fa fa-warning pe-2" title="Warning"/><field class="d-inline" name="warning" nolabel="1"/>
+                                <i class="oi pe-2" data-icon="warning" title="Warning"/><field class="d-inline" name="warning" nolabel="1"/>
                             </div>
                             <div class="d-flex flex-row flex-wrap gap-2" invisible="state != 'object_write'">
                                 <field name="evaluation_type" class="oe_inline"/>
@@ -491,7 +491,8 @@
                                         <widget name="documentation_link"
                                                 path="/developer/reference/backend/orm.html"
                                                 label="ORM API Documentation"
-                                                icon="oi oi-fw oi-arrow-right me-1"/>
+                                                icon="east"
+                                                icon_class="oi-fw"/>
                                     </p>
                                     <div >
                                         <p>Example of Python code:</p>
@@ -529,26 +530,34 @@ env['res.partner'].create({'name': partner_name})
                             <i
                                 data-name="server_action_icon"
                                 t-att-title="record.state.value"
-                                class="fa fa-fw"
+                                class="oi oi-fw"
                                 t-att-class="{
-                                    'code': 'fa-code',
-                                    'object_create': 'fa-plus-square',
-                                    'object_copy': 'fa-clone',
-                                    'object_write': 'fa-pencil',
-                                    'multi': 'fa-list-ul',
-                                    'mail_post': 'fa-envelope',
-                                    'followers': 'fa-user',
-                                    'remove_followers': 'fa-user-times',
-                                    'next_activity': 'fa-clock-o',
-                                    'sms': 'fa-mobile',
-                                    'webhook': 'fa-paper-plane',
-                                    'whatsapp': 'fa-whatsapp',
-                                    'ai': 'fa-magic',
-                                }[record.state.raw_value] || 'fa-circle-thin'"
+                                    'object_create': 'oi-filled',
+                                    'object_write': 'oi-filled',
+                                    'mail_post': 'oi-filled',
+                                    'followers': 'oi-filled',
+                                    'remove_followers': 'oi-filled',
+                                    'webhook': 'oi-filled',
+                                }[record.state.raw_value]"
+                                t-att-data-icon="{
+                                    'code': 'code',
+                                    'object_create': 'add_box',
+                                    'object_copy': 'content_copy',
+                                    'object_write': 'edit',
+                                    'multi': 'format_list_bulleted',
+                                    'mail_post': 'mail',
+                                    'followers': 'person',
+                                    'remove_followers': 'person_remove',
+                                    'next_activity': 'schedule',
+                                    'sms': 'smartphone',
+                                    'webhook': 'send',
+                                    'whatsapp': 'oi_whatsapp',
+                                    'ai': 'wand_stars',
+                                }[record.state.raw_value] || 'radio_button_unchecked'"
                             />
-                            <i class="fa fa-warning text-warning px-2 m-0" invisible="not warning" t-att-title="record.warning.raw_value"/>
+                            <i class="oi text-warning px-2 m-0" data-icon="warning" invisible="not warning" t-att-title="record.warning.raw_value"/>
                             <field name="name" class="text-truncate" />
-                            <button type="delete" name="delete" class="btn fa fa-trash fa-xl px-3 ms-auto" title="Delete Action" />
+                            <button type="delete" name="delete" class="btn oi oi-filled px-3 ms-auto" data-icon="delete" title="Delete Action" />
                         </t>
                     </templates>
                 </kanban>
@@ -658,10 +667,10 @@ env['res.partner'].create({'name': partner_name})
                     <field name="sequence" widget='handle'/>
                     <field name="action_id"/>
                     <field name="state" readonly="1"/>
-                    <button name="action_launch" invisible="state != 'open'" string="Launch" type="object" icon="fa-cogs" help="Launch Configuration Wizard"/>
+                    <button name="action_launch" invisible="state != 'open'" string="Launch" type="object" icon="settings_applications" help="Launch Configuration Wizard"/>
                     <button name="action_open" invisible="state != 'done'"
                             string="Todo" type="object" help="Set as Todo"
-                            icon="fa-exchange"/>
+                            icon="swap_horiz"/>
                 </list>
             </field>
         </record>
@@ -673,11 +682,11 @@ env['res.partner'].create({'name': partner_name})
                   <header>
                         <button name="action_launch"
                             invisible="state != 'open'" string="Launch"
-                            type="object" icon="fa-cogs" class="oe_highlight"
+                            type="object" icon="settings_applications" class="oe_highlight"
                             help="Launch Configuration Wizard"/>
                         <button name="action_open" invisible="state != 'done'"
                             string="Set as Todo" type="object"
-                            icon="fa-exchange" class="oe_highlight"/>
+                            icon="swap_horiz" class="oe_highlight"/>
                         <field name="state" widget="statusbar" statusbar_visible="open,done" nolabel="1" readonly="1" />
                   </header>
                   <sheet>
diff --git a/odoo/addons/base/views/ir_mail_server_views.xml b/odoo/addons/base/views/ir_mail_server_views.xml
index 1f3eda75f55312..6adf930dac82e7 100644
--- a/odoo/addons/base/views/ir_mail_server_views.xml
+++ b/odoo/addons/base/views/ir_mail_server_views.xml
@@ -27,7 +27,7 @@
                                         <span class="o_form_label">MB</span>
                                     </div>
                                     <button class="btn btn-link pt-0" type="object" name="action_retrieve_max_email_size">
-                                        <i class="fa fa-gear"/> Detect Max Limit
+                                        <i class="oi oi-filled" data-icon="settings"/> Detect Max Limit
                                     </button>
                                 </div>
                             </group>
diff --git a/odoo/addons/base/views/ir_model_views.xml b/odoo/addons/base/views/ir_model_views.xml
index f9568cfce93156..a54bfdeb7e59eb 100644
--- a/odoo/addons/base/views/ir_model_views.xml
+++ b/odoo/addons/base/views/ir_model_views.xml
@@ -138,7 +138,7 @@
                                 </form>
                             </field>
                             <button groups="base.group_no_one"
-                                icon="fa-align-justify"
+                                icon="format_align_justify"
                                 name="%(act_menu_create)d"
                                 string="Create a Menu" type="action"
                                 target="new" />
diff --git a/odoo/addons/base/views/ir_qweb_widget_templates.xml b/odoo/addons/base/views/ir_qweb_widget_templates.xml
index d0f45651ddd8ee..f51a6810a7fd0e 100644
--- a/odoo/addons/base/views/ir_qweb_widget_templates.xml
+++ b/odoo/addons/base/views/ir_qweb_widget_templates.xml
@@ -25,13 +25,13 @@
         <div class="gap-2" t-att-itemprop="options.get('with_microdata') and 'address'" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
 
             <div t-if="address and 'address' in fields" t-attf-class="d-flex align-items-baseline gap-1">
-                <i t-if="not options.get('no_marker')" class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
+                <i t-if="not options.get('no_marker')" class="oi oi-fw" data-icon="location_on" role="img" aria-label="Address" title="Address"/>
                 <span class="w-100 lh-sm text-break d-block" itemprop="streetAddress" t-out="address"/>
             </div>
             <t t-set="has_city" t-value="city and 'city' in fields"/>
             <t t-set="has_state" t-value="object.state_id and object.country_id.state_required"/>
             <div t-if="has_city or (country_id and 'country_id' in fields)" t-attf-class="d-flex align-items-baseline gap-1">
-                <i t-if="not options.get('no_marker')" class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
+                <i t-if="not options.get('no_marker')" class="oi oi-fw" data-icon="location_on" role="img" aria-label="Address" title="Address"/>
                 <span>
                     <div>
                         <t t-if="has_city">
@@ -45,18 +45,18 @@
                 </span>
             </div>
             <div class="d-flex align-items-center gap-1" t-if="phone and 'phone' in fields">
-                <i t-if="not options.get('no_marker') or options.get('phone_icons')" class='fa fa-phone fa-fw' role="img" aria-label="Phone" title="Phone"/> <span class="o_force_ltr" itemprop="telephone" t-out="phone"/>
+                <i t-if="not options.get('no_marker') or options.get('phone_icons')" class="oi oi-filled oi-fw" data-icon="phone" role="img" aria-label="Phone" title="Phone"/> <span class="o_force_ltr" itemprop="telephone" t-out="phone"/>
             </div>
             <div class="d-flex align-items-center gap-1" t-if="mobile and 'mobile' in fields">
-                <i t-if="not options.get('no_marker') or options.get('phone_icons')" class='fa fa-mobile fa-fw' role="img" aria-label="Mobile" title="Mobile"/> <span class="o_force_ltr" itemprop="telephone" t-out="mobile"/>
+                <i t-if="not options.get('no_marker') or options.get('phone_icons')" class="oi oi-fw" data-icon="smartphone" role="img" aria-label="Mobile" title="Mobile"/> <span class="o_force_ltr" itemprop="telephone" t-out="mobile"/>
             </div>
             <!-- Prevent issue with iOS Safari parsing of schema data without telephone itemprops -->
             <div t-if="not (phone and 'phone' in fields) and not (mobile and 'mobile' in fields)" itemprop="telephone"/>
             <div class="d-flex align-items-baseline gap-1" t-if="website and 'website' in fields">
-                <i t-if="not options.get('no_marker')" class='fa fa-globe fa-fw' role="img" aria-label="Website" title="Website"/>
+                <i t-if="not options.get('no_marker')" class="oi oi-fw" data-icon="public" role="img" aria-label="Website" title="Website"/>
                 <a class="text-break w-100" t-att-href="website and '%s%s' % ('http://' if '://' not in website else '',website)"><span itemprop="website" t-out="website"/></a>
             </div>
-            <div class="d-flex align-items-baseline gap-1" t-if="email and 'email' in fields"><i t-if="not options.get('no_marker')" class='fa fa-envelope fa-fw' role="img" aria-label="Email" title="Email"/> <span class="text-break w-100" itemprop="email" t-out="email"/></div>
+            <div class="d-flex align-items-baseline gap-1" t-if="email and 'email' in fields"><i t-if="not options.get('no_marker')" class="oi oi-fw oi-filled" data-icon="mail" role="img" aria-label="Email" title="Email"/> <span class="text-break w-100" itemprop="email" t-out="email"/></div>
         </div>
         <div t-if="vat and 'vat' in fields"><span t-out="vat_label"/>: <span itemprop="vatID" t-out="vat"/></div>
         <t t-if="object.country_id and object.country_id.name_position == 'after'">
@@ -69,7 +69,7 @@
     <address t-ignore="true" class="mb-0">
         <div>
             <div class="d-flex align-items-baseline">
-                <i t-if="not options.get('no_marker')" class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
+                <i t-if="not options.get('no_marker')" class="oi oi-fw" data-icon="location_on" role="img" aria-label="Address" title="Address"/>
                 <span class="w-100 o_force_ltr d-block" t-out="options.get('null_text')"/>
             </div>
         </div>
diff --git a/odoo/addons/base/views/ir_rule_views.xml b/odoo/addons/base/views/ir_rule_views.xml
index 58927b34c5b007..41e9d502494b27 100644
--- a/odoo/addons/base/views/ir_rule_views.xml
+++ b/odoo/addons/base/views/ir_rule_views.xml
@@ -29,7 +29,7 @@
                         <field name="global"/>
                         <field name="groups" nolabel="1" colspan="2"/>
                     </group>
-                    <i class="fa fa-info fa-3x text-info float-start" role="img" aria-label="Info" title="Info"/>
+                    <i class="oi oi-3x text-info float-start" data-icon="info" role="img" aria-label="Info" title="Info"/>
                     <h3>Interaction between rules</h3>
                     <div>
                       <p>
diff --git a/odoo/addons/base/views/res_company_views.xml b/odoo/addons/base/views/res_company_views.xml
index 93bc3d6bdd2add..68ca1e08fa7e7c 100644
--- a/odoo/addons/base/views/res_company_views.xml
+++ b/odoo/addons/base/views/res_company_views.xml
@@ -12,7 +12,7 @@
                                 name="action_all_company_branches"
                                 type="object"
                                 invisible="not all_child_ids"
-                                icon="fa-sitemap"
+                                icon="account_tree"
                                 string="Branches"/>
                     </div>
                     <div class="d-flex gap-2">
@@ -84,11 +84,11 @@
                             <main>
                                 <field class="h5" name="name"/>
                                 <div t-if="record.email.value" class="text-truncate">
-                                    <i class="fa fa-fw me-1 fa-envelope" title="Email"/>
+                                    <i class="oi oi-fw oi-filled me-1" data-icon="mail" title="Email"/>
                                     <field name="email"/>
                                 </div>
                                 <div t-if="record.phone.value" class="text-truncate">
-                                    <i class="fa fa-fw me-1 fa-phone" title="Phone"/>
+                                    <i class="oi oi-fw oi-filled me-1" data-icon="phone" title="Phone"/>
                                     <field name="phone"/>
                                 </div>
                             </main>
diff --git a/odoo/addons/base/views/res_device_views.xml b/odoo/addons/base/views/res_device_views.xml
index 729350234ed1fb..454c57e0f283fe 100644
--- a/odoo/addons/base/views/res_device_views.xml
+++ b/odoo/addons/base/views/res_device_views.xml
@@ -108,8 +108,8 @@
                     <field name="is_current"/>
                     <templates>
                         <t t-name="card" class="flex-row">
-                            <span t-if="record.device_type.raw_value === 'computer'" class="fa fa-laptop fs-1 col-1 mx-auto" title="Computer" role="img" aria-label="Computer"/>
-                            <span t-else="" class="fa fa-mobile fs-1 col-1 mx-auto" title="Mobile" role="img" aria-label="Mobile"/>
+                            <span t-if="record.device_type.raw_value === 'computer'" class="oi fs-1 col-1 mx-auto" data-icon="laptop" title="Computer" role="img" aria-label="Computer"/>
+                            <span t-else="" class="oi fs-1 col-1 mx-auto" data-icon="smartphone" title="Mobile" role="img" aria-label="Mobile"/>
                             <div class="d-flex col-11">
                                 <div class="d-flex flex-column ms-2">
                                     <div class="d-flex align-items-center">
diff --git a/odoo/addons/base/views/res_groups_views.xml b/odoo/addons/base/views/res_groups_views.xml
index 9eb70ee07ef9b7..84bfa5c86741bc 100644
--- a/odoo/addons/base/views/res_groups_views.xml
+++ b/odoo/addons/base/views/res_groups_views.xml
@@ -84,7 +84,7 @@
                 <form string="Groups">
                   <sheet>
                     <div class="oe_button_box" name="button_box">
-                        <button name="action_show_all_users" type="object" groups="base.group_no_one" class="oe_stat_button" icon="fa-users" help="Users having this group (implicitly or explicitly)">
+                        <button name="action_show_all_users" type="object" groups="base.group_no_one" class="oe_stat_button" icon="group" icon_class="oi-filled" help="Users having this group (implicitly or explicitly)">
                             <field string="Users" name="all_users_count" widget="statinfo"/>
                         </button>
                     </div>
diff --git a/odoo/addons/base/views/res_lang_views.xml b/odoo/addons/base/views/res_lang_views.xml
index 1b1a04fbe2176b..4c288fbcb5bb9d 100644
--- a/odoo/addons/base/views/res_lang_views.xml
+++ b/odoo/addons/base/views/res_lang_views.xml
@@ -17,17 +17,17 @@
                     <button name="%(base.action_view_base_language_install)d"
                         string="Activate"
                         type="action"
-                        icon="fa-check"
+                        icon="check"
                         invisible="active"/>
                     <button name="%(base.action_view_base_language_install)d"
                         string="Update"
                         type="action"
-                        icon="fa-refresh"
+                        icon="refresh"
                         invisible="not active"/>
                     <button name="action_archive"
                         string="Disable"
                         type="object"
-                        icon="fa-times"
+                        icon="close"
                         invisible="not active"/>
                 </list>
             </field>
@@ -43,7 +43,7 @@
                             <button name="%(base.action_view_base_language_install)d"
                                 type="action"
                                 class="oe_stat_button"
-                                icon="fa-refresh">
+                                icon="refresh">
                                 <div class="o_field_widget o_stat_info">
                                     <span class="o_stat_text">Activate and Translate</span>
                                 </div>
diff --git a/odoo/addons/base/views/res_partner_views.xml b/odoo/addons/base/views/res_partner_views.xml
index e648519bd3fce0..822b81ae414523 100644
--- a/odoo/addons/base/views/res_partner_views.xml
+++ b/odoo/addons/base/views/res_partner_views.xml
@@ -136,7 +136,7 @@
                             </h1>
                             <label for="parent_id" class="d-md-none"/>
                             <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                <i class="d-none d-md-inline-flex fa fa-building" title="Company"/>
+                                <i class="d-none d-md-inline-flex oi oi-filled" data-icon="business" title="Company"/>
                                 <field name="parent_id"
                                     widget="res_partner_many2one"
                                     placeholder="Company Employer"
@@ -146,13 +146,13 @@
 
                             <label for="email" class="d-md-none"/>
                             <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                <i class="d-none d-md-inline-flex fa fa-envelope" title="Email"/>
+                                <i class="d-none d-md-inline-flex oi oi-filled" data-icon="mail" title="Email"/>
                                 <field name="email" widget="email" required="user_ids" placeholder="Email"/>
                             </div>
 
                             <label for="phone" class="d-md-none"/>
                             <div class="d-flex align-items-baseline w-md-50 gap-2">
-                                <i class="d-none d-md-inline-flex fa fa-phone" title="Phone"/>
+                                <i class="d-none d-md-inline-flex oi oi-filled" data-icon="phone" title="Phone"/>
                                 <field name="phone" widget="phone" placeholder="Phone"/>
                             </div>
                         </group>
@@ -205,25 +205,25 @@
                                                     <field name="name" invisible="not name" class="flex-grow-1 fw-bold"/>
                                                     <field name="type" invisible="name" class="flex-grow-1 fw-bold"/>
                                                     <span t-if="record.type.raw_value != 'contact'" class="text-muted">
-                                                        <i class="fa fa-fw me-1" t-att-class="{'invoice': 'fa-file','delivery': 'fa-truck', 'other': 'fa-cube'}[record.type.raw_value]" role="img" t-att-title="{'invoice': 'Invoice','delivery': 'Delivery', 'other': 'Other'}[record.type.raw_value]"/>
+                                                        <i class="oi oi-fw me-1" t-att-class="{'invoice': 'oi-filled'}[record.type.raw_value]" t-att-data-icon="{'invoice': 'description','delivery': 'local_shipping', 'other': 'deployed_code'}[record.type.raw_value]" role="img" t-att-title="{'invoice': 'Invoice','delivery': 'Delivery', 'other': 'Other'}[record.type.raw_value]"/>
                                                         <field name="type"/> address
                                                     </span>
                                                 </div>
                                                 <div>
                                                     <div t-if="record.email.raw_value" class="text-truncate">
-                                                        <i class="fa fa-fw me-1 fa-envelope" title="Email"/>
+                                                        <i class="oi oi-fw oi-filled me-1" data-icon="mail" title="Email"/>
                                                         <field name="email"/>
                                                     </div>
                                                     <div t-if="record.phone.raw_value">
-                                                        <i class="fa fa-fw me-1 fa-phone" title="Phone"/>
+                                                        <i class="oi oi-fw oi-filled me-1" data-icon="phone" title="Phone"/>
                                                         <field name="phone"/>
                                                     </div>
                                                     <div invisible="not function">
-                                                        <i class="fa fa-fw me-1 fa-suitcase" title="Position"/>
+                                                        <i class="oi oi-fw me-1" data-icon="luggage" title="Position"/>
                                                         <field name="function"/>
                                                     </div>
                                                     <div t-if="record.type.raw_value != 'contact' and (record.city.raw_value or record.country_id.raw_value)">
-                                                        <i class="fa fa-fw me-1 fa-map-marker" title="Location"/>
+                                                        <i class="oi oi-fw me-1" data-icon="location_on" title="Location"/>
                                                         <field name="city"/>
                                                         <span t-if="record.city.raw_value and record.country_id.raw_value">, </span>
                                                         <field name="country_id"/>
@@ -248,15 +248,15 @@
                                                 </h3>
                                                 <div>
                                                     <div class="o_input_box">
-                                                        <i class="o_input_box_overlay_start fa fa-envelope" title="Email"/>
+                                                        <i class="o_input_box_overlay_start oi oi-filled" data-icon="mail" title="Email"/>
                                                         <field name="email" widget="email" context="{'gravatar_image': True}" required="user_ids" placeholder="Email"/>
                                                     </div>
                                                     <div class="o_input_box">
-                                                        <i class="o_input_box_overlay_start fa fa-phone" title="Phone"/>
+                                                        <i class="o_input_box_overlay_start oi oi-filled" data-icon="phone" title="Phone"/>
                                                         <field name="phone" widget="phone" placeholder="Phone"/>
                                                     </div>
                                                     <div invisible="type != 'contact'" class="o_input_box">
-                                                        <i class="o_input_box_overlay_start fa fa-suitcase" title="Position"/>
+                                                        <i class="o_input_box_overlay_start oi oi-filled" data-icon="luggage" title="Position"/>
                                                         <field name="function" placeholder="Job title"/>
                                                     </div>
                                                 </div>
@@ -363,21 +363,21 @@
                                     <p class="mb-0">
                                         <field name="name" invisible="not name" class="fw-bold"/>
                                         <field name="type" invisible="name" class="fw-bold"/>
-                                        <i t-if="record.type.raw_value != 'contact'" t-att-data-tooltip="record.type.value" class="fa ms-2 text-muted" t-att-class="{'invoice': 'fa-file','delivery': 'fa-truck', 'other': 'fa-cube'}[record.type.raw_value]" role="img"/>
+                                        <i t-if="record.type.raw_value != 'contact'" t-att-title="record.type.value" t-att-data-tooltip="record.type.value" class="oi ms-2 text-muted" t-att-class="{'invoice': 'oi-filled'}[record.type.raw_value]" t-att-data-icon="{'invoice': 'description','delivery': 'local_shipping', 'other': 'deployed_code'}[record.type.raw_value]" role="img"/>
                                     </p>
                                     <field invisible="not parent_id" name="parent_id" class="text-muted"/>
                                 </div>
                                 <div>
                                     <div t-if="record.email.raw_value" class="text-truncate">
-                                        <i class="fa fa-fw me-1 fa-envelope text-muted" title="Email"/>
+                                        <i class="oi oi-fw oi-filled me-1 text-muted" data-icon="mail" title="Email"/>
                                         <field name="email"/>
                                     </div>
                                     <div t-if="record.phone.raw_value">
-                                        <i class="fa fa-fw me-1 fa-phone text-muted" title="Phone"/>
+                                        <i class="oi oi-fw oi-filled me-1 text-muted" data-icon="phone" title="Phone"/>
                                         <field name="phone"/>
                                     </div>
                                     <div t-if="record.city.raw_value or record.country_id.raw_value">
-                                        <i class="fa fa-fw me-1 fa-map-marker" title="Location"/>
+                                        <i class="oi oi-fw me-1" data-icon="location_on" title="Location"/>
                                         <field name="city"/>
                                         <span t-if="record.city.raw_value and record.country_id.raw_value">, </span>
                                         <field name="country_id"/>
diff --git a/odoo/addons/base/views/res_users_views.xml b/odoo/addons/base/views/res_users_views.xml
index c8dfa6b37f6c7e..6f9573a59e0613 100644
--- a/odoo/addons/base/views/res_users_views.xml
+++ b/odoo/addons/base/views/res_users_views.xml
@@ -72,18 +72,18 @@
                                 <label for="login" class="d-md-none"/>
                                 <div class="o_input_box">
                                     <field name="email" invisible="1"/> <!-- needed to update partner's email from on_change_login() -->
-                                    <i class="d-none d-md-inline-flex fa fa-envelope" title="Email"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="mail" title="Email"/>
                                     <field name="email_domain_placeholder" invisible="1" /> <!-- needed to compute the placeholder whenever the dialog opens -->
                                     <field name="login" options="{'placeholder_field': 'email_domain_placeholder'}"/>
                                 </div>
                                 <label for="phone" class="d-md-none"/>
                                 <div class="o_input_box">
-                                    <i class="d-none d-md-inline-flex fa fa-phone" title="Phone"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="phone" title="Phone"/>
                                     <field name="phone" widget="phone" placeholder="Phone"/>
                                 </div>
                                 <label for="company_id" class="d-md-none" groups="base.group_multi_company"/>
                                 <div class="o_input_box" groups="base.group_multi_company">
-                                    <i class="d-none d-md-inline-flex fa fa-building" title="Company"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="business" title="Company"/>
                                     <field name="company_id" context="{'user_preference': 0}" placeholder="Company"/>
                                 </div>
                             </group>
@@ -107,13 +107,13 @@
                     </header>
                     <sheet>
                         <div class="oe_button_box" name="button_box">
-                            <button name="action_show_groups" type="object" groups="base.group_no_one" class="oe_stat_button" icon="fa-users" help="Groups that apply to the current user">
+                            <button name="action_show_groups" type="object" groups="base.group_no_one" class="oe_stat_button" icon="group" icon_class="oi-filled" help="Groups that apply to the current user">
                                 <field string="Groups" name="groups_count" widget="statinfo"/>
                             </button>
-                            <button name="action_show_accesses" type="object" groups="base.group_no_one" class="oe_stat_button" icon="fa-lock">
+                            <button name="action_show_accesses" type="object" groups="base.group_no_one" class="oe_stat_button" icon="lock">
                                 <field string="Access Rights" name="accesses_count" widget="statinfo"/>
                             </button>
-                            <button name="action_show_rules" type="object" groups="base.group_no_one" class="oe_stat_button" icon="fa-lock">
+                            <button name="action_show_rules" type="object" groups="base.group_no_one" class="oe_stat_button" icon="lock">
                                 <field string="Record Rules" name="rules_count" widget="statinfo"/>
                             </button>
                         </div>
@@ -140,18 +140,18 @@
                                 </h1>
                                 <label for="login" class="d-md-none"/>
                                 <div name="login" class="o_input_box d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-envelope" title="Login / Email" invisible="login != email"/>
-                                    <i class="d-none d-md-inline-flex fa fa-key" title="Login" invisible="login == email"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="mail" title="Login / Email" invisible="login != email"/>
+                                    <i class="d-none d-md-inline-flex oi" data-icon="key" title="Login" invisible="login == email"/>
                                     <field name="login" placeholder="Login"/>
                                 </div>
                                 <label for="email" class="d-md-none" invisible="login == email"/>
                                 <div name="email" class="o_input_box d-flex align-items-baseline w-md-50 gap-2" invisible="login == email">
-                                    <i class="d-none d-md-inline-flex fa fa-envelope" title="Email"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="mail" title="Email"/>
                                     <field name="email" placeholder="Email"/>
                                 </div>
                                 <label for="phone" class="d-md-none"/>
                                 <div name="phone" class="o_input_box d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-phone" title="Phone"/>
+                                    <i class="d-none d-md-inline-flex oi oi-filled" data-icon="phone" title="Phone"/>
                                     <field name="phone" placeholder="Phone"/>
                                 </div>
                             </group>
@@ -181,7 +181,8 @@
                                             <button
                                                 type="action"
                                                 name="%(base.action_view_base_language_install)d"
-                                                class="btn btn-link fa fa-globe o_input_box_overlay_end"
+                                                class="btn btn-link oi o_input_box_overlay_end"
+                                                data-icon="public"
                                                 groups="base.group_system"
                                                 aria-label="Add a language"
                                                 title="Add a language"/>
@@ -281,16 +282,16 @@
                             <main class="w-100 ps-2 pt-1">
                                 <div>
                                     <div t-if="record.active.raw_value" class="text-success float-end mb4">
-                                        <i class="fa fa-circle" role="img" aria-label="Ok" title="Ok"></i>
+                                        <i class="oi oi-filled" data-icon="circle" role="img" aria-label="Ok" title="Ok"></i>
                                     </div>
                                     <div t-else="" class="text-danger float-end mb4">
-                                        <i class="fa fa-circle" role="img" aria-label="Invalid" title="Invalid"></i>
+                                        <i class="oi oi-filled" data-icon="circle" role="img" aria-label="Invalid" title="Invalid"></i>
                                     </div>
                                     <field class="fw-bold" name="name"/>
                                 </div>
                                 <div>
                                     <span class="mb4 text-truncate" title="Login">
-                                        <i class="fa fa-envelope me-1" role="img" aria-label="Login"></i>
+                                        <i class="oi oi-filled me-1" data-icon="mail" role="img" aria-label="Login"></i>
                                         <field name="login"/>
                                     </span>
                                     <field class="badge rounded-pill float-end" name="lang"/>
@@ -426,12 +427,12 @@
                                 </h1>
                                 <label for="email" class="d-md-none"/>
                                 <div name="email" class="d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-fw fa-envelope" title="Email"/>
+                                    <i class="d-none d-md-inline-flex oi oi-fw oi-filled" data-icon="mail" title="Email"/>
                                     <field name="email" placeholder="Email"/>
                                 </div>
                                 <label for="phone" class="d-md-none"/>
                                 <div name="phone" class="d-flex align-items-baseline w-md-50 gap-2">
-                                    <i class="d-none d-md-inline-flex fa fa-fw fa-phone" title="Phone"/>
+                                    <i class="d-none d-md-inline-flex oi oi-fw oi-filled" data-icon="phone" title="Phone"/>
                                     <field name="phone" placeholder="Phone"/>
                                 </div>
                             </group>
@@ -446,7 +447,8 @@
                                             <button
                                                 type="action"
                                                 name="%(base.action_view_base_language_install)d"
-                                                class="btn btn-link fa fa-globe o_input_box_overlay_end"
+                                                class="btn btn-link oi o_input_box_overlay_end"
+                                                data-icon="public"
                                                 aria-label="Add a language"
                                                 groups="base.group_system"
                                                 title="Add a language"
@@ -542,7 +544,7 @@
                     <field name="name"/>
                     <field name="scope"/>
                     <field name="create_date"/>
-                    <button type="object" name="remove" title="Delete API key." icon="fa-trash"/>
+                    <button type="object" name="remove" title="Delete API key." icon="delete" icon_class="oi-filled"/>
                 </list>
             </field>
         </record>
diff --git a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
index 17e0e71fe983ea..ea4dd163f9c363 100644
--- a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
+++ b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
@@ -906,7 +906,7 @@ stepUtils.autoExpandMoreButtons(),
 },
 {
     isActive: ["mobile"],
-    trigger: ".o_control_panel_navigation .btn .fa-search",
+    trigger: ".o_control_panel_navigation .btn [data-icon='search']",
     run: "click",
 }, {
     isActive: ["desktop"],
diff --git a/odoo/addons/test_tools/tests/test_mail.py b/odoo/addons/test_tools/tests/test_mail.py
index 8beafe44986393..f878583f984d20 100644
--- a/odoo/addons/test_tools/tests/test_mail.py
+++ b/odoo/addons/test_tools/tests/test_mail.py
@@ -519,7 +519,7 @@ def test_is_html_empty(self):
             '<p><br>1</p>', '<p>1<br > </p>', '<p style="margin: 4px">Hello World</p>',
             '<div style="margin: 4px"><p>Hello World</p></div>',
             '<p><span style="font-weight: bolder;"><font style="color: rgb(255, 0, 0);" class=" ">W</font></span><br></p>',
-            '<span class="fa fa-heart"></span>',
+            '<span class="oi" data-icon="favorite"></span>',
             '<i class="fas fa-home"></i>'
         ]
         for content in valid_html_samples:
diff --git a/odoo/addons/test_tools/tests/test_translate.py b/odoo/addons/test_tools/tests/test_translate.py
index fcea03665013ff..a5aa4a447efeec 100644
--- a/odoo/addons/test_tools/tests/test_translate.py
+++ b/odoo/addons/test_tools/tests/test_translate.py
@@ -135,13 +135,13 @@ def test_translate_xml_inline4(self):
         source = """<form string="Form stuff">
                         <div>
                             <label for="stuff"/>
-                            <span class="fa fa-globe" title="Title stuff"/>
+                            <span class="oi" data-icon="public" title="Title stuff"/>
                         </div>
                     </form>"""
         result = xml_translate(terms.append, source)
         self.assertEqual(result, source)
         self.assertItemsEqual(terms,
-            ['Form stuff', '<span class="fa fa-globe" title="Title stuff"/>'])
+            ['Form stuff', '<span class="oi" data-icon="public" title="Title stuff"/>'])
 
     def test_translate_xml_inline5(self):
         """ Test xml_translate() with inline elements with empty translated attrs only. """
@@ -149,7 +149,7 @@ def test_translate_xml_inline5(self):
         source = """<form string="Form stuff">
                         <div>
                             <label for="stuff"/>
-                            <span class="fa fa-globe" title=""/>
+                            <span class="oi" data-icon="public" title=""/>
                         </div>
                     </form>"""
         result = xml_translate(terms.append, source)
@@ -342,10 +342,10 @@ def test_translate_xml_illegal_translations(self):
 
         # text and elements
         make_xml = '<form string="X">{}</form>'.format
-        term = '<i class="fa fa-circle" role="img" aria-label="Invalid" title="Invalid"/>'
+        term = '<i class="oi oi-filled" data-icon="circle" role="img" aria-label="Invalid" title="Invalid"/>'
 
         # {legal: legal}
-        valid = '<i class="fa fa-circle" role="img" aria-label="Non-valide" title="Non-valide"/>X'
+        valid = '<i class="oi oi-filled" data-icon="circle" role="img" aria-label="Non-valide" title="Non-valide"/>X'
         self.assertEqual(
             xml_translate({term: valid}.get, make_xml(term)),
             make_xml(valid),
@@ -353,7 +353,7 @@ def test_translate_xml_illegal_translations(self):
         )
 
         # {legal: illegal(has no text)}
-        invalid = '<i class="fa fa-circle" role="img"/>'
+        invalid = '<i class="oi oi-filled" data-icon="circle" role="img"/>'
         self.assertEqual(
             xml_translate({term: invalid}.get, make_xml(term)),
             make_xml(term),
@@ -427,9 +427,9 @@ def test_translate_html_nbsp(self):
 
     def test_translate_html_i(self):
         """ Test xml_translate() and html_translate() with <i> elements. """
-        source = """<p>A <i class="fa-check"></i> B</p>"""
+        source = """<p>A <i class="oi" data-icon="check"></i> B</p>"""
         result = xml_translate(lambda term: term, source)
-        self.assertEqual(result, """<p>A <i class="fa-check"/> B</p>""")
+        self.assertEqual(result, """<p>A <i class="oi" data-icon="check"/> B</p>""")
         result = html_translate(lambda term: term, source)
         self.assertEqual(result, source)
 
diff --git a/odoo/addons/test_web/static/tests/tours/x2many.js b/odoo/addons/test_web/static/tests/tours/x2many.js
index 592595d4262218..89eb7e86b8985b 100644
--- a/odoo/addons/test_web/static/tests/tours/x2many.js
+++ b/odoo/addons/test_web/static/tests/tours/x2many.js
@@ -379,7 +379,7 @@
 
     {
         content: "switch to the second form view to test one2many with editable list (toggle menu dropdown)",
-        trigger: 'button[data-menu-xmlid="test_orm.menu_main"], li.o_extra_menu_items a i.fa-plus',
+        trigger: 'button[data-menu-xmlid="test_orm.menu_main"], li.o_extra_menu_items a i[data-icon="add"]',
         run: "click",
     }, {
         content: "switch to the second form view to test one2many with editable list (open submenu)",
@@ -513,7 +513,7 @@
     },
     {
         content: "switch to the third form view to test onchange changing one2many (toggle menu dropdown)",
-        trigger: 'button[data-menu-xmlid="test_orm.menu_main"], li.o_extra_menu_items a i.fa-plus',
+        trigger: 'button[data-menu-xmlid="test_orm.menu_main"], li.o_extra_menu_items a i[data-icon="add"]',
         run: "click",
     }, {
         content: "switch to the thied form view to test onchange changing one2many (open submenu)",
diff --git a/odoo/tools/test_reports.py b/odoo/tools/test_reports.py
index 3be3fcf3c1dc59..f530fbb39a110e 100644
--- a/odoo/tools/test_reports.py
+++ b/odoo/tools/test_reports.py
@@ -83,7 +83,7 @@ def try_report_action(cr, uid, action_id, active_model=None, active_ids=None,
                 wizard form.
         :param wiz_buttons: a list of button names, or button icon strings, which
                 should be preferred to press during the wizard.
-                Eg. 'OK' or 'fa-print'
+                Eg. 'OK' or 'print' icon
         :param context:
         :param our_module: the name of the calling module (string), like 'account'
     """
@@ -202,7 +202,7 @@ def _exec_action(action, datas, env):
                     if button.getAttribute('special') == 'cancel':
                         cancel_found = True
                         continue
-                    if button.getAttribute('icon') == 'fa-times-circle':
+                    if button.getAttribute('icon') == 'cancel':
                         cancel_found = True
                         continue
                     if button.getAttribute('default_focus') == '1':