diff --git a/frontend/src/components/ReactionsGroup.vue b/frontend/src/components/ReactionsGroup.vue
index be996796d..2398c22be 100644
--- a/frontend/src/components/ReactionsGroup.vue
+++ b/frontend/src/components/ReactionsGroup.vue
@@ -4,7 +4,7 @@
       <div class="reactions-viewer-item-container" @click="openPanel" @mouseenter="cancelHide"
         @mouseleave="scheduleHide">
         <template v-if="displayedReactions.length">
-          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ iconMap[r.type] }}</div>
+          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ reactionEmojiMap[r.type] }}</div>
           <div class="reactions-count">{{ totalCount }}</div>
         </template>
         <div v-else class="reactions-viewer-item placeholder">
@@ -24,7 +24,7 @@
     <div v-if="panelVisible" class="reactions-panel" @mouseenter="cancelHide" @mouseleave="scheduleHide">
       <div v-for="t in panelTypes" :key="t" class="reaction-option" @click="toggleReaction(t)"
         :class="{ selected: userReacted(t) }">
-        {{ iconMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
+        {{ reactionEmojiMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
       </div>
     </div>
   </div>
@@ -34,6 +34,7 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import { API_BASE_URL, toast } from '../main'
 import { getToken, authState } from '../utils/auth'
+import { reactionEmojiMap } from '../utils/reactions'
 
 let cachedTypes = null
 const fetchTypes = async () => {
@@ -54,32 +55,6 @@ const fetchTypes = async () => {
   return cachedTypes
 }
 
-const iconMap = {
-  LIKE: '❤️',
-  DISLIKE: '👎',
-  RECOMMEND: '👏',
-  ANGRY: '😡',
-  FLUSHED: '😳',
-  STAR_STRUCK: '🤩',
-  ROFL: '🤣',
-  HOLDING_BACK_TEARS: '🥹',
-  MIND_BLOWN: '🤯',
-  POOP: '💩',
-  CLOWN: '🤡',
-  SKULL: '☠️',
-  FIRE: '🔥',
-  EYES: '👀',
-  FROWN: '☹️',
-  HOT: '🥵',
-  EAGLE: '🦅',
-  SPIDER: '🕷️',
-  BAT: '🦇',
-  CHINA: '🇨🇳',
-  USA: '🇺🇸',
-  JAPAN: '🇯🇵',
-  KOREA: '🇰🇷'
-}
-
 export default {
   name: 'ReactionsGroup',
   props: {
@@ -202,7 +177,7 @@ export default {
     }
 
     return {
-      iconMap,
+      reactionEmojiMap,
       counts,
       totalCount,
       likeCount,
diff --git a/frontend/src/utils/reactions.js b/frontend/src/utils/reactions.js
new file mode 100644
index 000000000..7fa967de7
--- /dev/null
+++ b/frontend/src/utils/reactions.js
@@ -0,0 +1,25 @@
+export const reactionEmojiMap = {
+  LIKE: '❤️',
+  DISLIKE: '👎',
+  RECOMMEND: '👏',
+  ANGRY: '😡',
+  FLUSHED: '😳',
+  STAR_STRUCK: '🤩',
+  ROFL: '🤣',
+  HOLDING_BACK_TEARS: '🥹',
+  MIND_BLOWN: '🤯',
+  POOP: '💩',
+  CLOWN: '🤡',
+  SKULL: '☠️',
+  FIRE: '🔥',
+  EYES: '👀',
+  FROWN: '☹️',
+  HOT: '🥵',
+  EAGLE: '🦅',
+  SPIDER: '🕷️',
+  BAT: '🦇',
+  CHINA: '🇨🇳',
+  USA: '🇺🇸',
+  JAPAN: '🇯🇵',
+  KOREA: '🇰🇷'
+}
diff --git a/frontend/src/views/MessagePageView.vue b/frontend/src/views/MessagePageView.vue
index c04db1f43..af15a4c2d 100644
--- a/frontend/src/views/MessagePageView.vue
+++ b/frontend/src/views/MessagePageView.vue
@@ -304,6 +304,7 @@ import { toast } from '../main'
 import { stripMarkdownLength } from '../utils/markdown'
 import TimeManager from '../utils/time'
 import { hatch } from 'ldrs'
+import { reactionEmojiMap } from '../utils/reactions'
 hatch.register()
 
 export default {
@@ -378,32 +379,6 @@ export default {
       MENTION: 'fas fa-at'
     }
 
-    const reactionEmojiMap = {
-      LIKE: '❤️',
-      DISLIKE: '👎',
-      RECOMMEND: '👏',
-      ANGRY: '😡',
-      FLUSHED: '😳',
-      STAR_STRUCK: '🤩',
-      ROFL: '🤣',
-      HOLDING_BACK_TEARS: '🥹',
-      MIND_BLOWN: '🤯',
-      POOP: '💩',
-      CLOWN: '🤡',
-      SKULL: '☠️',
-      FIRE: '🔥',
-      EYES: '👀',
-      FROWN: '☹️',
-      HOT: '🥵',
-      EAGLE: '🦅',
-      SPIDER: '🕷️',
-      BAT: '🦇',
-      CHINA: '🇨🇳',
-      USA: '🇺🇸',
-      JAPAN: '🇯🇵',
-      KOREA: '🇰🇷'
-    }
-
     const fetchNotifications = async () => {
       try {
         const token = getToken()