diff --git a/web/src/App.tsx b/web/src/App.tsx
index 4b126e1..a9f4615 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -38,6 +38,12 @@ export default function App() {
       '😀😁😂🤣😅😊🙂😉😍😘😜🤪🤗🤔🤩🥳😎😴🤤','😇🥰🥺😡🤬😱😭🙈🙉🙊💀👻🤖🎃','👍👎👏🙌🙏🤝💪🔥✨💥🎉🎊','❤️🧡💛💚💙💜🖤🤍🤎💖💘💝','⭐🌟🌈☀️🌙⚡❄️☔🌊🍀','🎵🎶🎧🎤🎸🥁🎹🎺🎻','🍕🍔🍟🌭🌮🍣🍺🍻🍷🥂','🐶🐱🐼🐸🦄🐧🐢🦖🐙','🚀🛸✈️🚁🚗🏎️🚓🚒','🏆🥇🥈🥉🎯🎮🎲🧩']
     return groups.join('').split('');
   }, []);
+
+  function emojiToTwemojiUrl(emoji: string): string {
+    const codePoints = Array.from(emoji).map(ch => ch.codePointAt(0)!.toString(16)).join('-');
+    // twemoji svg assets
+    return `https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/${codePoints}.svg`;
+  }
   const [showBroccoli, setShowBroccoli] = useState<boolean>(false);
   const [flashMap, setFlashMap] = useState<Record<string, boolean>>({});
   const selectedCount = useMemo(() => Object.values(selectedSet).filter(Boolean).length, [selectedSet]);
@@ -477,7 +483,9 @@ export default function App() {
                                   const resp = await fetchSounds(query, activeFolder === '__favs__' ? '__all__' : activeFolder, activeCategoryId || undefined);
                                   setSounds(resp.items); setTotal(resp.total); setFolders(resp.folders);
                                 }catch(err:any){ setError(err?.message||'Badge-Update fehlgeschlagen'); setInfo(null); }
-                              }}>{e}</button>
+                              }}>
+                                <img alt={e} src={emojiToTwemojiUrl(e)} />
+                              </button>
                             ))}
                           </div>,
                           document.body
diff --git a/web/src/styles.css b/web/src/styles.css
index 34185e1..89df455 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -455,7 +455,8 @@ header p {
   z-index: 300000;
   font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", system-ui, sans-serif;
 }
-.emoji-picker button { background: transparent; border: 0; font-size: 1.35rem; line-height: 1.35rem; cursor: pointer; font-family: inherit; }
+.emoji-picker button { background: transparent; border: 0; width: 2rem; height: 2rem; cursor: pointer; font-family: inherit; display: grid; place-items: center; }
+.emoji-picker img { width: 1.6rem; height: 1.6rem; }
 .emoji-picker button:hover { filter: brightness(1.2); }
 .select-item {
   width: 100%; text-align: left; padding: 10px 12px; color: #e7e7ee;