diff --git a/apps/meteor/app/emoji/client/helpers.ts b/apps/meteor/app/emoji/client/helpers.ts
index 6341fbfe2e1be..ac49033fe1929 100644
--- a/apps/meteor/app/emoji/client/helpers.ts
+++ b/apps/meteor/app/emoji/client/helpers.ts
@@ -57,7 +57,7 @@ export const createEmojiList = (
 			if (!image) {
 				continue;
 			}
-			emojiList.push({ emoji: current, image, emojiHandle: emojiToRender });
+			emojiList.push({ emoji: current, image });
 		}
 	});
 
diff --git a/apps/meteor/app/emoji/client/types.ts b/apps/meteor/app/emoji/client/types.ts
index d4c7341993b58..d6356ef1901b0 100644
--- a/apps/meteor/app/emoji/client/types.ts
+++ b/apps/meteor/app/emoji/client/types.ts
@@ -3,7 +3,6 @@ import type { TranslationKey } from '@rocket.chat/ui-contexts';
 export type EmojiItem = {
 	emoji: string;
 	image: string;
-	emojiHandle: string;
 };
 
 export type EmojiCategory = {
diff --git a/apps/meteor/client/components/message/toolbox/Toolbox.tsx b/apps/meteor/client/components/message/toolbox/Toolbox.tsx
index 71e026948debb..731502428a560 100644
--- a/apps/meteor/client/components/message/toolbox/Toolbox.tsx
+++ b/apps/meteor/client/components/message/toolbox/Toolbox.tsx
@@ -92,18 +92,8 @@ const Toolbox = ({ message, messageContext, room, subscription }: ToolboxProps):
 	return (
 		<MessageToolbox>
 			{recentList.length > 0 &&
-				recentList.slice(0, 3).map(({ emoji, image, emojiHandle }) => {
-					return (
-						<EmojiElement
-							small
-							key={emoji}
-							title={emoji}
-							emoji={emoji}
-							image={image}
-							emojiHandle={emojiHandle}
-							onClick={() => handleSetReaction(emoji)}
-						/>
-					);
+				recentList.slice(0, 3).map(({ emoji, image }) => {
+					return <EmojiElement small key={emoji} title={emoji} emoji={emoji} image={image} onClick={() => handleSetReaction(emoji)} />;
 				})}
 			{actionsQueryResult.data?.message.map((action) => (
 				<MessageToolboxItem
diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx
index d88e526a1073f..3fc0b9b4b3815 100644
--- a/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx
+++ b/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx
@@ -57,20 +57,14 @@ const EmojiCategoryRow = ({
 					<>
 						{categoryKey === CUSTOM_CATEGORY &&
 							emojis.list.map(
-								({ emoji, image, emojiHandle }, index = 1) =>
+								({ emoji, image }, index = 1) =>
 									index < customItemsLimit && (
-										<EmojiElement
-											key={emoji + categoryKey}
-											emoji={emoji}
-											image={image}
-											emojiHandle={emojiHandle}
-											onClick={handleSelectEmoji}
-										/>
+										<EmojiElement key={emoji + categoryKey} emoji={emoji} image={image} onClick={handleSelectEmoji} />
 									),
 							)}
 						{!(categoryKey === CUSTOM_CATEGORY) &&
-							emojis.list.map(({ emoji, image, emojiHandle }) => (
-								<EmojiElement key={emoji + categoryKey} emoji={emoji} image={image} emojiHandle={emojiHandle} onClick={handleSelectEmoji} />
+							emojis.list.map(({ emoji, image }) => (
+								<EmojiElement key={emoji + categoryKey} emoji={emoji} image={image} onClick={handleSelectEmoji} />
 							))}
 					</>
 				</EmojiPickerCategoryWrapper>
diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiElement.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiElement.tsx
index e635ab817e2ff..9dad1e7852d33 100644
--- a/apps/meteor/client/views/composer/EmojiPicker/EmojiElement.tsx
+++ b/apps/meteor/client/views/composer/EmojiPicker/EmojiElement.tsx
@@ -4,7 +4,6 @@ import type { MouseEvent, AllHTMLAttributes } from 'react';
 import React, { memo } from 'react';
 
 import type { EmojiItem } from '../../../../app/emoji/client';
-import Emoji from '../../../components/Emoji';
 import { usePreviewEmoji } from '../../../contexts/EmojiPickerContext';
 
 type EmojiElementProps = EmojiItem & { small?: boolean; onClick: (e: MouseEvent<HTMLElement>) => void } & Omit<
@@ -12,9 +11,13 @@ type EmojiElementProps = EmojiItem & { small?: boolean; onClick: (e: MouseEvent<
 		'is'
 	>;
 
-const EmojiElement = ({ emoji, image, emojiHandle, onClick, small = false, ...props }: EmojiElementProps) => {
+const EmojiElement = ({ emoji, image, onClick, small = false, ...props }: EmojiElementProps) => {
 	const { handlePreview, handleRemovePreview } = usePreviewEmoji();
 
+	if (!image) {
+		return null;
+	}
+
 	const emojiSmallClass = css`
 		> .emoji,
 		.emojione {
@@ -23,7 +26,7 @@ const EmojiElement = ({ emoji, image, emojiHandle, onClick, small = false, ...pr
 		}
 	`;
 
-	const emojiElement = <Emoji emojiHandle={emojiHandle} />;
+	const emojiElement = <div dangerouslySetInnerHTML={{ __html: image }} />;
 
 	return (
 		<IconButton
diff --git a/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx b/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx
index de8ba31c26ba2..a229ab2717e4f 100644
--- a/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx
+++ b/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx
@@ -37,8 +37,8 @@ const SearchingResult = ({ searchResults, handleSelectEmoji }: SearchingResultPr
 				List: SearchingResultWrapper,
 			}}
 			itemContent={(index) => {
-				const { emoji, image, emojiHandle } = searchResults[index] || {};
-				return <EmojiElement emoji={emoji} image={image} emojiHandle={emojiHandle} onClick={handleSelectEmoji} />;
+				const { emoji, image } = searchResults[index] || {};
+				return <EmojiElement emoji={emoji} image={image} onClick={handleSelectEmoji} />;
 			}}
 		/>
 	);