diff --git a/web_src/js/features/comp/TextExpander.js b/web_src/js/features/comp/TextExpander.js
index 128a2ddff0..8777f3a334 100644
--- a/web_src/js/features/comp/TextExpander.js
+++ b/web_src/js/features/comp/TextExpander.js
@@ -1,5 +1,6 @@
 import {matchEmoji, matchMention} from '../../utils/match.js';
-import {emojiString} from '../emoji.js';
+import {emojiHTML, emojiString} from '../emoji.js';
+const {customEmojis} = window.config;
 
 export function initTextExpander(expander) {
   expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
@@ -10,11 +11,16 @@ export function initTextExpander(expander) {
       const ul = document.createElement('ul');
       ul.classList.add('suggestions');
       for (const name of matches) {
-        const emoji = emojiString(name);
         const li = document.createElement('li');
         li.setAttribute('role', 'option');
-        li.setAttribute('data-value', emoji);
-        li.textContent = `${emoji} ${name}`;
+        li.setAttribute('data-value', emojiString(name));
+        if (customEmojis.has(name)) {
+          li.style.gap = '0.25rem';
+          li.innerHTML = emojiHTML(name);
+          li.append(name);
+        } else {
+          li.textContent = `${emojiString(name)} ${name}`;
+        }
         ul.append(li);
       }
 
diff --git a/web_src/js/features/emoji.js b/web_src/js/features/emoji.js
index 76555bfe05..c7a23ecf0f 100644
--- a/web_src/js/features/emoji.js
+++ b/web_src/js/features/emoji.js
@@ -10,6 +10,7 @@ for (const {emoji, aliases} of emojis) {
 }
 
 export const emojiKeys = Object.keys(tempMap).sort((a, b) => {
+  if (b === '+1' && a === '-1') return 1;
   if (a === '+1' || a === '-1') return -1;
   if (b === '+1' || b === '-1') return 1;
   return a.localeCompare(b);
diff --git a/web_src/js/utils/match.js b/web_src/js/utils/match.js
index 17fdfed113..aa53ad1435 100644
--- a/web_src/js/utils/match.js
+++ b/web_src/js/utils/match.js
@@ -1,4 +1,4 @@
-import emojis from '../../../assets/emoji.json';
+import {emojiKeys} from '../features/emoji.js';
 
 const maxMatches = 6;
 
@@ -9,19 +9,14 @@ function sortAndReduce(map) {
 
 export function matchEmoji(queryText) {
   const query = queryText.toLowerCase().replaceAll('_', ' ');
-  if (!query) return emojis.slice(0, maxMatches).map((e) => e.aliases[0]);
+  if (!query) return emojiKeys.slice(0, maxMatches);
 
   // results is a map of weights, lower is better
   const results = new Map();
-  for (const {aliases} of emojis) {
-    const mainAlias = aliases[0];
-    for (const [aliasIndex, alias] of aliases.entries()) {
-      const index = alias.replaceAll('_', ' ').indexOf(query);
-      if (index === -1) continue;
-      const existing = results.get(mainAlias);
-      const rankedIndex = index + aliasIndex;
-      results.set(mainAlias, existing ? existing - rankedIndex : rankedIndex);
-    }
+  for (const emojiKey of emojiKeys) {
+    const index = emojiKey.replaceAll('_', ' ').indexOf(query);
+    if (index === -1) continue;
+    results.set(emojiKey, index);
   }
 
   return sortAndReduce(results);