diff --git a/frontend/emojis/blobcat.png b/frontend/emojis/blobcat.png
new file mode 100644
index 0000000..761b24c
Binary files /dev/null and b/frontend/emojis/blobcat.png differ
diff --git a/frontend/lib/chat.mjs b/frontend/lib/chat.mjs
index 46cb197..39c8178 100644
--- a/frontend/lib/chat.mjs
+++ b/frontend/lib/chat.mjs
@@ -1,4 +1,5 @@
-import { setDebounce, setVideoTime, setPlaying } from "./watch-session.mjs";
+import { setDebounce, setVideoTime, setPlaying } from "./watch-session.mjs?v=9";
+import { emojify } from "./emojis.mjs?v=9";
 
 const setupChatboxEvents = (socket) => {
   // clear events by just reconstructing the form
@@ -236,7 +237,7 @@ export const logEventToChat = (event) => {
     case "ChatMessage": {
       const messageContent = document.createElement("span");
       messageContent.classList.add("message-content");
-      messageContent.textContent = event.data;
+      messageContent.append(...emojify(event.data));
       printChatMessage(
         "chat-message",
         event.user,
diff --git a/frontend/lib/emojis.mjs b/frontend/lib/emojis.mjs
new file mode 100644
index 0000000..b97c31e
--- /dev/null
+++ b/frontend/lib/emojis.mjs
@@ -0,0 +1,11 @@
+export function emojify(text) {
+  let last = 0;
+  let nodes = [];
+  text.replace(/:([^\s:]+):/g, (match, name, index) => {
+    if(last <= index) nodes.push(document.createTextNode(text.slice(last, index)))
+    nodes.push(Object.assign(new Image(), {src: `/emojis/${name}.png`, className: "emoji", alt: name}))
+    last = index + match.length
+  })
+  if(last < text.length) nodes.push(document.createTextNode(text.slice(last)))
+  return nodes
+}
\ No newline at end of file
diff --git a/frontend/styles.css b/frontend/styles.css
index f1b9d52..7f019fe 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -159,6 +159,13 @@ button.small-button {
   color: unset !important;
 }
 
+.emoji {
+  width: 2ch;
+  height: 2ch;
+  object-fit: contain;
+  margin-bottom: -0.35ch;
+}
+
 #chatbox {
   padding: 0.5em 2em;
   min-height: 8em;