diff --git a/app/soapbox/components/autosuggest_emoji.js b/app/soapbox/components/autosuggest_emoji.js
deleted file mode 100644
index e16d2a2c56..0000000000
Binary files a/app/soapbox/components/autosuggest_emoji.js and /dev/null differ
diff --git a/app/soapbox/components/autosuggest_emoji.tsx b/app/soapbox/components/autosuggest_emoji.tsx
new file mode 100644
index 0000000000..ba6f5671aa
--- /dev/null
+++ b/app/soapbox/components/autosuggest_emoji.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import unicodeMapping from 'soapbox/features/emoji/emoji_unicode_mapping_light';
+import { joinPublicPath } from 'soapbox/utils/static';
+
+type Emoji = {
+  custom: boolean,
+  imageUrl: string,
+  native: string,
+  colons: string,
+}
+
+type UnicodeMapping = {
+  filename: string,
+}
+
+interface IAutosuggestEmoji {
+  emoji: Emoji,
+}
+
+const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
+  let url;
+
+  if (emoji.custom) {
+    url = emoji.imageUrl;
+  } else {
+    // @ts-ignore
+    const mapping: UnicodeMapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
+
+    if (!mapping) {
+      return null;
+    }
+
+    url = joinPublicPath(`packs/emoji/${mapping.filename}.svg`);
+  }
+
+  return (
+    <div className='autosuggest-emoji' data-testid='emoji'>
+      <img
+        className='emojione'
+        src={url}
+        alt={emoji.native || emoji.colons}
+      />
+
+      {emoji.colons}
+    </div>
+  );
+};
+
+export default AutosuggestEmoji;