4 files changed, 15 insertions, 3 deletions
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 18d5cc34ba..a39520fb4c 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -301,6 +301,14 @@ export default Vue.extend({
 				case 'reacted': {
 					const reaction = body.reaction;
 
+					if (body.emoji) {
+						const emojis = this.appearNote.emojis || [];
+						if (!emojis.includes(body.emoji)) {
+							emojis.push(body.emoji);
+							Vue.set(this.appearNote, 'emojis', emojis);
+						}
+					}
+
 					if (this.appearNote.reactions == null) {
 						Vue.set(this.appearNote, 'reactions', {});
 					}
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index f415887e76..97a2fe1873 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -12,7 +12,7 @@
 			<fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
 			<fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
 			<fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
-			<x-reaction-icon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :no-style="true"/>
+			<x-reaction-icon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :customEmojis="notification.note.emojis" :no-style="true"/>
 		</div>
 	</div>
 	<div class="tail">
diff --git a/src/client/components/reaction-icon.vue b/src/client/components/reaction-icon.vue
index 9155c59440..3c6d56b80a 100644
--- a/src/client/components/reaction-icon.vue
+++ b/src/client/components/reaction-icon.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-emoji :emoji="reaction.startsWith(':') ? null : reaction" :name="reaction.startsWith(':') ? reaction.substr(1, reaction.length - 2) : null" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+<mk-emoji :emoji="reaction.startsWith(':') ? null : reaction" :name="reaction.startsWith(':') ? reaction.substr(1, reaction.length - 2) : null" :customEmojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
 </template>
 
 <script lang="ts">
@@ -12,6 +12,10 @@ export default Vue.extend({
 			type: String,
 			required: true
 		},
+		customEmojis: {
+			required: false,
+			default: () => []
+		},
 		noStyle: {
 			type: Boolean,
 			required: false,
diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue
index 7494fde25f..67774cbb39 100644
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -9,7 +9,7 @@
 	ref="reaction"
 	v-particle
 >
-	<x-reaction-icon :reaction="reaction" ref="icon"/>
+	<x-reaction-icon :reaction="reaction" :customEmojis="note.emojis" ref="icon"/>
 	<span>{{ count }}</span>
 </button>
 </template>