diff --git a/app/javascript/flavours/glitch/features/emoji/emoji_html.tsx b/app/javascript/flavours/glitch/features/emoji/emoji_html.tsx
index fdda62a3e6..b1939c4fda 100644
--- a/app/javascript/flavours/glitch/features/emoji/emoji_html.tsx
+++ b/app/javascript/flavours/glitch/features/emoji/emoji_html.tsx
@@ -1,5 +1,7 @@
 import type { ComponentPropsWithoutRef, ElementType } from 'react';
 
+import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
+
 import { useEmojify } from './hooks';
 import type { CustomEmojiMapArg } from './types';
 
@@ -12,7 +14,7 @@ type EmojiHTMLProps<Element extends ElementType = 'div'> = Omit<
   as?: Element;
 };
 
-export const EmojiHTML = <Element extends ElementType>({
+export const ModernEmojiHTML = <Element extends ElementType>({
   extraEmojis,
   htmlString,
   as: asElement, // Rename for syntax highlighting
@@ -29,3 +31,18 @@ export const EmojiHTML = <Element extends ElementType>({
     <Wrapper {...props} dangerouslySetInnerHTML={{ __html: emojifiedHtml }} />
   );
 };
+
+export const EmojiHTML = <Element extends ElementType>(
+  props: EmojiHTMLProps<Element>,
+) => {
+  if (isModernEmojiEnabled()) {
+    return <ModernEmojiHTML {...props} />;
+  }
+  const Wrapper = props.as ?? 'div';
+  return (
+    <Wrapper
+      {...props}
+      dangerouslySetInnerHTML={{ __html: props.htmlString }}
+    />
+  );
+};
diff --git a/app/javascript/flavours/glitch/features/emoji/hooks.ts b/app/javascript/flavours/glitch/features/emoji/hooks.ts
index c5c2773100..a985c3e97f 100644
--- a/app/javascript/flavours/glitch/features/emoji/hooks.ts
+++ b/app/javascript/flavours/glitch/features/emoji/hooks.ts
@@ -8,7 +8,6 @@ import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
 
 import { toSupportedLocale } from './locale';
 import { determineEmojiMode } from './mode';
-import { emojifyElement } from './render';
 import type {
   CustomEmojiMapArg,
   EmojiAppState,
@@ -39,6 +38,7 @@ export function useEmojify(text: string, extraEmojis?: CustomEmojiMapArg) {
     async (input: string) => {
       const wrapper = document.createElement('div');
       wrapper.innerHTML = input;
+      const { emojifyElement } = await import('./render');
       const result = await emojifyElement(wrapper, appState, extra);
       if (result) {
         setEmojifiedText(result.innerHTML);