diff --git a/addons/knowledge/static/src/components/emoji_picker/emoji_list.xml b/addons/knowledge/static/src/components/emoji_picker/emoji_list.xml
index 6f316d9b919..86d1d0f892c 100644
--- a/addons/knowledge/static/src/components/emoji_picker/emoji_list.xml
+++ b/addons/knowledge/static/src/components/emoji_picker/emoji_list.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-    <t t-name="knowledge.EmojiList" t-inherit="mail.EmojiList" t-inherit-mode="primary" owl="1">
-        <xpath expr="//div[hasclass('o_EmojiList')]" position="before">
+    <t t-name="knowledge.LegacyEmojiList" t-inherit="mail.LegacyEmojiList" t-inherit-mode="primary" owl="1">
+        <xpath expr="//div[hasclass('o_LegacyEmojiList')]" position="before">
             <div class="d-flex justify-content-end p-2">
                 <button class="btn btn-outline-danger w-100" t-on-click="onRemoveEmoji" title="Remove Icon">
                     <i class="fa fa-times-circle"/> Remove Icon
diff --git a/addons/knowledge/static/src/components/emoji_picker/emoji_picker.js b/addons/knowledge/static/src/components/emoji_picker/emoji_picker.js
index 6af19dade90..bdee20d72ea 100644
--- a/addons/knowledge/static/src/components/emoji_picker/emoji_picker.js
+++ b/addons/knowledge/static/src/components/emoji_picker/emoji_picker.js
@@ -3,7 +3,7 @@
 import emojis from '@mail/js/emojis';
 const { Component } = owl;
 
-class Emoji extends Component {
+class LegacyEmoji extends Component {
     /**
      * @override
      */
@@ -14,8 +14,8 @@ class Emoji extends Component {
     }
 }
 
-Emoji.template = 'mail.Emoji';
-Emoji.props = {
+LegacyEmoji.template = 'mail.LegacyEmoji';
+LegacyEmoji.props = {
     emojiView: Object
 };
 
@@ -53,8 +53,8 @@ class EmojiPicker extends Component {
     }
 }
 
-EmojiPicker.template = 'knowledge.EmojiList';
+EmojiPicker.template = 'knowledge.LegacyEmojiList';
 EmojiPicker.props = ['onClickEmoji'];
-EmojiPicker.components = { Emoji };
+EmojiPicker.components = { LegacyEmoji };
 
 export default EmojiPicker;
diff --git a/addons/mail/static/src/components/legacy_emoji/legacy_emoji.js b/addons/mail/static/src/components/legacy_emoji/legacy_emoji.js
new file mode 100644
index 00000000000..3ce3530b110
--- /dev/null
+++ b/addons/mail/static/src/components/legacy_emoji/legacy_emoji.js
@@ -0,0 +1,16 @@
+/** @odoo-module **/
+
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+
+const { Component } = owl;
+
+export class LegacyEmoji extends Component {}
+
+Object.assign(LegacyEmoji, {
+    props: {
+        emojiView: Object,
+    },
+    template: 'mail.LegacyEmoji',
+});
+
+registerMessagingComponent(LegacyEmoji);
diff --git a/addons/mail/static/src/components/legacy_emoji/legacy_emoji.xml b/addons/mail/static/src/components/legacy_emoji/legacy_emoji.xml
new file mode 100644
index 00000000000..834e65f281e
--- /dev/null
+++ b/addons/mail/static/src/components/legacy_emoji/legacy_emoji.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.LegacyEmoji" owl="1">
+        <span class="o_LegacyEmoji p-1 fs-5 o_cursor_pointer" t-on-click="props.emojiView.emojiListView.onClickEmoji" t-att-title="props.emojiView.emoji.description" t-att-data-source="props.emojiView.emoji.sources[0]" t-att-data-unicode="props.emojiView.emoji.unicode" t-attf-class="{{ className }}" t-ref="root">
+            <t t-esc="props.emojiView.emoji.unicode"/>
+        </span>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.js b/addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.js
new file mode 100644
index 00000000000..940bffbe885
--- /dev/null
+++ b/addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.js
@@ -0,0 +1,57 @@
+/** @odoo-module **/
+
+import { useUpdate } from '@mail/component_hooks/use_update';
+import { registerMessagingComponent } from '@mail/utils/messaging_component';
+import { LegacyComponent } from '@web/legacy/legacy_component';
+
+export class LegacyEmojiList extends LegacyComponent {
+
+    /**
+     * @override
+     */
+    setup() {
+        super.setup();
+        useUpdate({ func: () => this._update() });
+    }
+
+    get emojiListView() {
+        return this.props.record;
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _update() {
+        this.trigger('o-popover-compute');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    close() {
+        this.trigger('o-popover-close');
+    }
+
+    /**
+     * Returns whether the given node is self or a children of self.
+     *
+     * @param {Node} node
+     * @returns {boolean}
+     */
+    contains(node) {
+        return Boolean(this.root.el && this.root.el.contains(node));
+    }
+
+}
+
+Object.assign(LegacyEmojiList, {
+    props: { record: Object },
+    template: 'mail.LegacyEmojiList',
+});
+
+registerMessagingComponent(LegacyEmojiList);
diff --git a/addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.scss b/addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.scss
new file mode 100644
index 00000000000..f6b15ac980f
--- /dev/null
+++ b/addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.scss
@@ -0,0 +1,9 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_LegacyEmojiList {
+    // Could be replaced by "d-grid" class after migration to BS5
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+}
diff --git a/addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.xml b/addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.xml
new file mode 100644
index 00000000000..935b446caf1
--- /dev/null
+++ b/addons/mail/static/src/components/legacy_emoji_list/legacy_emoji_list.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.LegacyEmojiList" owl="1">
+        <div class="o_LegacyEmojiList px-1" t-attf-class="{{ className }}" t-ref="root">
+            <t t-if="emojiListView">
+                <t t-foreach="emojiListView.emojiViews" t-as="emojiView" t-key="emojiView.localId">
+                    <LegacyEmoji emojiView="emojiView"/>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>