diff --git a/packages/ui-next/package.json b/packages/ui-next/package.json
index 1a44ab6ce2..558e88b067 100644
--- a/packages/ui-next/package.json
+++ b/packages/ui-next/package.json
@@ -58,6 +58,8 @@
     "@hcengineering/view-resources": "^0.6.0",
     "@hcengineering/presence": "^0.6.0",
     "@hcengineering/presence-resources": "^0.6.0",
+    "@hcengineering/emoji": "^0.6.0",
+    "@hcengineering/emoji-resources": "^0.6.0",
     "@tiptap/core": "^2.11.7",
     "@tiptap/pm": "^2.11.7",
     "fast-equals": "^5.2.2",
diff --git a/packages/ui-next/src/components/ReactionsList.svelte b/packages/ui-next/src/components/ReactionsList.svelte
index ea4ade7df8..feda466df1 100644
--- a/packages/ui-next/src/components/ReactionsList.svelte
+++ b/packages/ui-next/src/components/ReactionsList.svelte
@@ -15,9 +15,10 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { EmojiPopup, showPopup } from '@hcengineering/ui'
+  import { showPopup } from '@hcengineering/ui'
   import { getCurrentAccount, groupByArray } from '@hcengineering/core'
   import { Reaction } from '@hcengineering/communication-types'
+  import emojiPlugin from '@hcengineering/emoji'
 
   import ReactionPresenter from './ReactionPresenter.svelte'
   import IconEmojiAdd from './icons/IconEmojiAdd.svelte'
@@ -34,11 +35,11 @@
     event.stopPropagation()
     emojiPopupOpened = true
     showPopup(
-      EmojiPopup,
+      emojiPlugin.component.EmojiPopup,
       {},
       event.target as HTMLElement,
       (result) => {
-        const emoji = result?.emoji
+        const emoji = result?.text
         emojiPopupOpened = false
         if (emoji == null) {
           return
diff --git a/packages/ui-next/src/components/message/MessageActionsPanel.svelte b/packages/ui-next/src/components/message/MessageActionsPanel.svelte
index 2abb6dcc6d..644267dacf 100644
--- a/packages/ui-next/src/components/message/MessageActionsPanel.svelte
+++ b/packages/ui-next/src/components/message/MessageActionsPanel.svelte
@@ -14,9 +14,10 @@
 -->
 
 <script lang="ts">
-  import { showPopup, EmojiPopup } from '@hcengineering/ui'
+  import { showPopup } from '@hcengineering/ui'
   import { Message } from '@hcengineering/communication-types'
   import { createEventDispatcher } from 'svelte'
+  import emojiPlugin from '@hcengineering/emoji'
 
   import IconEmoji from '../icons/IconEmoji.svelte'
   import IconMessageMultiple from '../icons/IconMessageMultiple.svelte'
@@ -42,12 +43,12 @@
         action: (event: MouseEvent): void => {
           isOpened = true
           showPopup(
-            EmojiPopup,
+            emojiPlugin.component.EmojiPopup,
             {},
             event.target as HTMLElement,
             async (result) => {
               isOpened = false
-              const emoji = result?.emoji
+              const emoji = result?.text
               if (emoji == null) {
                 return
               }
diff --git a/packages/ui-next/src/components/message/MessagePresenter.svelte b/packages/ui-next/src/components/message/MessagePresenter.svelte
index 665f53d2c1..fe4c978e0d 100644
--- a/packages/ui-next/src/components/message/MessagePresenter.svelte
+++ b/packages/ui-next/src/components/message/MessagePresenter.svelte
@@ -19,11 +19,12 @@
   import { getClient } from '@hcengineering/presentation'
   import { Card } from '@hcengineering/card'
   import { getCurrentAccount } from '@hcengineering/core'
-  import { EmojiPopup, getEventPositionElement, showPopup, Action as MenuAction } from '@hcengineering/ui'
+  import { getEventPositionElement, showPopup, Action as MenuAction } from '@hcengineering/ui'
   import { PersonPreviewProvider, personByPersonIdStore } from '@hcengineering/contact-resources'
   import type { SocialID } from '@hcengineering/communication-types'
   import { AttachmentPreview } from '@hcengineering/attachment-resources'
   import { Message, MessageType } from '@hcengineering/communication-types'
+  import emojiPlugin from '@hcengineering/emoji'
 
   import MessageContentViewer from './MessageContentViewer.svelte'
   import { AvatarSize } from '../../types'
@@ -130,11 +131,11 @@
           icon: IconEmoji,
           action: async (): Promise<void> => {
             showPopup(
-              EmojiPopup,
+              emojiPlugin.component.EmojiPopup,
               {},
               event.target as HTMLElement,
               async (result) => {
-                const emoji = result?.emoji
+                const emoji = result?.text
                 if (emoji == null) {
                   return
                 }
diff --git a/packages/ui-next/src/utils.ts b/packages/ui-next/src/utils.ts
index 7f57bf85e1..2979a4455e 100644
--- a/packages/ui-next/src/utils.ts
+++ b/packages/ui-next/src/utils.ts
@@ -12,12 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-import { EmojiPopup, showPopup } from '@hcengineering/ui'
+import { showPopup } from '@hcengineering/ui'
 import { getCurrentAccount, type Markup } from '@hcengineering/core'
 import { markupToJSON, jsonToMarkup } from '@hcengineering/text'
 import { markupToMarkdown, markdownToMarkup } from '@hcengineering/text-markdown'
 import { type Message } from '@hcengineering/communication-types'
 import { getCommunicationClient } from '@hcengineering/presentation'
+import emojiPlugin from '@hcengineering/emoji'
 
 import IconAt from './components/icons/IconAt.svelte'
 import IconEmoji from './components/icons/IconEmoji.svelte'
@@ -39,7 +40,7 @@ export const defaultMessageInputActions: TextInputAction[] = [
     icon: IconEmoji,
     action: (element, editorHandler) => {
       showPopup(
-        EmojiPopup,
+        emojiPlugin.component.EmojiPopup,
         {},
         element,
         (emoji) => {
@@ -47,7 +48,7 @@ export const defaultMessageInputActions: TextInputAction[] = [
             return
           }
 
-          editorHandler.insertText(emoji)
+          editorHandler.insertText(emoji.text)
           editorHandler.focus()
         },
         () => {}
diff --git a/plugins/activity-resources/package.json b/plugins/activity-resources/package.json
index 02077bf077..ad106a1096 100644
--- a/plugins/activity-resources/package.json
+++ b/plugins/activity-resources/package.json
@@ -52,6 +52,8 @@
     "@hcengineering/view": "^0.6.13",
     "@hcengineering/view-resources": "^0.6.0",
     "@hcengineering/communication-types": "0.1.172",
+    "@hcengineering/emoji": "^0.6.0",
+    "@hcengineering/emoji-resources": "^0.6.0",
     "svelte": "^4.2.19"
   }
 }
diff --git a/plugins/activity-resources/src/components/reactions/Reactions.svelte b/plugins/activity-resources/src/components/reactions/Reactions.svelte
index 54ddcdfca6..55c93da75f 100644
--- a/plugins/activity-resources/src/components/reactions/Reactions.svelte
+++ b/plugins/activity-resources/src/components/reactions/Reactions.svelte
@@ -16,8 +16,9 @@
   import { createEventDispatcher } from 'svelte'
   import { Reaction } from '@hcengineering/activity'
   import { Doc, getCurrentAccount, PersonId } from '@hcengineering/core'
-  import { EmojiPopup, IconAdd, showPopup, tooltip, type Emojis } from '@hcengineering/ui'
+  import { IconAdd, showPopup, tooltip } from '@hcengineering/ui'
   import { includesAny } from '@hcengineering/contact'
+  import emojiPlugin, { type Emojis } from '@hcengineering/emoji'
 
   import ReactionsTooltip from './ReactionsTooltip.svelte'
   import { updateDocReactions } from '../../utils'
@@ -55,8 +56,8 @@
     ev.preventDefault()
     ev.stopPropagation()
     opened = true
-    showPopup(EmojiPopup, {}, ev.target as HTMLElement, async (emoji: Emojis) => {
-      if (emoji?.emoji !== undefined) await updateDocReactions(reactions, object, emoji.emoji)
+    showPopup(emojiPlugin.component.EmojiPopup, {}, ev.target as HTMLElement, async (emoji: Emojis) => {
+      if (emoji?.text !== undefined) await updateDocReactions(reactions, object, emoji.text)
       opened = false
     })
   }
diff --git a/plugins/activity-resources/src/components/reactions/ReactionsPreview.svelte b/plugins/activity-resources/src/components/reactions/ReactionsPreview.svelte
index dc301115c9..88a069f88c 100644
--- a/plugins/activity-resources/src/components/reactions/ReactionsPreview.svelte
+++ b/plugins/activity-resources/src/components/reactions/ReactionsPreview.svelte
@@ -16,8 +16,9 @@
 <script lang="ts">
   import activity, { ActivityMessage, Reaction } from '@hcengineering/activity'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { EmojiPopup, showPopup, type Emojis } from '@hcengineering/ui'
+  import { showPopup } from '@hcengineering/ui'
   import { SortingOrder } from '@hcengineering/core'
+  import emojiPlugin, { type Emojis } from '@hcengineering/emoji'
 
   import { updateDocReactions } from '../../utils'
 
@@ -65,8 +66,8 @@
 
     e.stopPropagation()
     e.preventDefault()
-    showPopup(EmojiPopup, {}, e.target as HTMLElement, (emoji: Emojis) => {
-      if (emoji?.emoji !== undefined) void updateDocReactions(reactions, message, emoji.emoji)
+    showPopup(emojiPlugin.component.EmojiPopup, {}, e.target as HTMLElement, (emoji: Emojis) => {
+      if (emoji?.text !== undefined) void updateDocReactions(reactions, message, emoji.text)
     })
   }
 </script>
diff --git a/plugins/activity-resources/src/utils.ts b/plugins/activity-resources/src/utils.ts
index b685b164b5..53d480128e 100644
--- a/plugins/activity-resources/src/utils.ts
+++ b/plugins/activity-resources/src/utils.ts
@@ -2,7 +2,6 @@ import type { ActivityMessage, Reaction } from '@hcengineering/activity'
 import core, { getCurrentAccount, isOtherHour, type Doc, type Ref, type Space } from '@hcengineering/core'
 import { getClient, isSpace } from '@hcengineering/presentation'
 import {
-  EmojiPopup,
   closePopup,
   getCurrentResolvedLocation,
   getEventPositionElement,
@@ -11,6 +10,7 @@ import {
   type EmojiWithGroup, isCustomEmoji
 } from '@hcengineering/ui'
 import { type AttributeModel } from '@hcengineering/view'
+import emojiPlugin from '@hcengineering/emoji'
 import { get } from 'svelte/store'
 
 import { savedMessagesStore } from './activity'
@@ -61,9 +61,8 @@ export async function addReactionAction (
 
   closePopup()
 
-  showPopup(EmojiPopup, {}, element, (emoji: EmojiWithGroup) => {
-    // TODO: add custom emoji
-    if (!isCustomEmoji(emoji) && emoji?.emoji !== undefined) void updateDocReactions(reactions, message, emoji.emoji)
+  showPopup(emojiPlugin.component.EmojiPopup, {}, element, (emoji) => {
+    if (emoji?.text !== undefined) void updateDocReactions(reactions, message, emoji.text)
     params?.onClose?.()
   })
   params?.onOpen?.()
diff --git a/plugins/emoji-resources/src/components/EmojiPopup.svelte b/plugins/emoji-resources/src/components/EmojiPopup.svelte
index bd21609041..9c3ab690fd 100644
--- a/plugins/emoji-resources/src/components/EmojiPopup.svelte
+++ b/plugins/emoji-resources/src/components/EmojiPopup.svelte
@@ -102,6 +102,7 @@
     addFrequentlyEmojis(emoji)
     dispatch('close', {
       text: selected,
+      codes: isCustomEmoji(emoji) ? undefined : emoji.hexcode.split('-').map((hc) => parseInt(hc, 16)),
       url: isCustomEmoji(emoji) ? emoji.url : undefined
     })
   }
diff --git a/plugins/task-resources/package.json b/plugins/task-resources/package.json
index 9eb01c7576..d3b116fae3 100644
--- a/plugins/task-resources/package.json
+++ b/plugins/task-resources/package.json
@@ -63,6 +63,8 @@
     "@hcengineering/kanban": "^0.6.0",
     "@hcengineering/contact-resources": "^0.6.0",
     "@hcengineering/setting": "^0.6.17",
-    "@hcengineering/setting-resources": "^0.6.0"
+    "@hcengineering/setting-resources": "^0.6.0",
+    "@hcengineering/emoji": "^0.6.0",
+    "@hcengineering/emoji-resources": "^0.6.0"
   }
 }
diff --git a/plugins/task-resources/src/components/state/CreateStatePopup.svelte b/plugins/task-resources/src/components/state/CreateStatePopup.svelte
index a7659eec9d..0a13b0f0c0 100644
--- a/plugins/task-resources/src/components/state/CreateStatePopup.svelte
+++ b/plugins/task-resources/src/components/state/CreateStatePopup.svelte
@@ -19,9 +19,9 @@
   import { clearSettingsStore, settingsStore } from '@hcengineering/setting-resources'
   import { ProjectType, TaskType, calculateStatuses, createState } from '@hcengineering/task'
   import {
+    Component,
     ButtonIcon,
     ButtonMenu,
-    EmojiPopup,
     IconCopy,
     IconDelete,
     IconSettings,
@@ -38,6 +38,7 @@
   } from '@hcengineering/ui'
   import { ColorsPopup, statusStore } from '@hcengineering/view-resources'
   import view from '@hcengineering/view-resources/src/plugin'
+  import emojiPlugin from '@hcengineering/emoji'
   import { taskTypeStore, typeStore } from '../..'
   import task from '../../plugin'
   import ApproveStatusRenamePopup from './ApproveStatusRenamePopup.svelte'
@@ -432,11 +433,12 @@
             }}
           />
         {:else}
-          <EmojiPopup
-            embedded
-            selected={Array.isArray(color) ? fromCodePoint(...color) : color ? fromCodePoint(color) : undefined}
-            disabled={readonly}
-            kind={'default'}
+          <Component is={emojiPlugin.component.EmojiPopup}
+            props={{
+              selected: Array.isArray(color) ? fromCodePoint(...color) : color ? fromCodePoint(color) : undefined,
+              disabled: readonly,
+              kind: 'default'
+            }}
             on:close={(evt) => {
               if (readonly) return
               color = evt.detail.codes
diff --git a/plugins/view-resources/package.json b/plugins/view-resources/package.json
index 613d0755bc..49d9be2492 100644
--- a/plugins/view-resources/package.json
+++ b/plugins/view-resources/package.json
@@ -58,6 +58,8 @@
     "@hcengineering/text-editor-resources": "^0.6.0",
     "@hcengineering/analytics": "^0.6.0",
     "@hcengineering/query": "^0.6.12",
+    "@hcengineering/emoji": "^0.6.0",
+    "@hcengineering/emoji-resources": "^0.6.0",
     "fast-equals": "^5.2.2"
   }
 }
diff --git a/plugins/view-resources/src/components/IconPicker.svelte b/plugins/view-resources/src/components/IconPicker.svelte
index ccbf843135..2f45cda0f8 100644
--- a/plugins/view-resources/src/components/IconPicker.svelte
+++ b/plugins/view-resources/src/components/IconPicker.svelte
@@ -16,15 +16,15 @@
   import { Asset, Metadata } from '@hcengineering/platform'
   import {
     ButtonIcon,
-    EmojiPopup,
     TabsControl,
     fromCodePoint,
     Scroller,
     getPlatformColor,
     getPlatformColorDef,
     themeStore,
-    Label
+    Label, Component
   } from '@hcengineering/ui'
+  import emojiPlugin from '@hcengineering/emoji'
   import { createEventDispatcher } from 'svelte'
   import { iconsLibrary } from '../icons'
   import view from '../plugin'
@@ -96,9 +96,10 @@
           {/if}
         </div>
       {:else}
-        <EmojiPopup
-          embedded
-          selected={Array.isArray(color) ? fromCodePoint(...color) : fromCodePoint(color)}
+        <Component is={emojiPlugin.component.EmojiPopup}
+          props={{
+            selected: Array.isArray(color) ? fromCodePoint(...color) : color ? fromCodePoint(color) : undefined
+          }}
           on:close={(evt) => {
             dispatch('close', { icon: iconWithEmoji, color: evt.detail.codes })
           }}