diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
index 05f93f5c73ce1..53142b292e25a 100644
--- a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
@@ -13,6 +13,7 @@ import {
 } from '@rocket.chat/ui-composer';
 import { useTranslation, useUserPreference, useLayout, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
+import * as emojione from 'emoji-toolkit';
 import type { ReactElement, FormEvent, MouseEvent, ClipboardEvent } from 'react';
 import { memo, useRef, useReducer, useCallback, useSyncExternalStore } from 'react';
 
@@ -155,7 +156,9 @@ const MessageBox = ({
 		}
 
 		const ref = messageComposerRef.current as HTMLElement;
-		chat.emojiPicker.open(ref, (emoji: string) => chat.composer?.insertText(` :${emoji}: `));
+		chat.emojiPicker.open(ref, (emoji: string) => {
+			chat.composer?.insertText(` ${emojione.shortnameToUnicode(`:${emoji}:`)} `);
+		});
 	});
 
 	const handleSendMessage = useEffectEvent(() => {
diff --git a/apps/meteor/client/views/room/composer/messageBox/types/emoji-toolkit.ts b/apps/meteor/client/views/room/composer/messageBox/types/emoji-toolkit.ts
new file mode 100644
index 0000000000000..8e8ac155a965e
--- /dev/null
+++ b/apps/meteor/client/views/room/composer/messageBox/types/emoji-toolkit.ts
@@ -0,0 +1,3 @@
+declare module 'emoji-toolkit' {
+	export function shortnameToUnicode(emoji: string): string;
+}