Emoji Picker: Emojis suchen & kopieren

Was ist der Emoji Picker?

Ich habe diesen Picker gebaut, weil ich es leid war, das System-Emoji-Panel zu öffnen, nur um dieselben fünf Gesichter zu greifen — und am Ende zwei Minuten zu scrollen. Tippen, klicken, einfügen — das ist der ganze Ablauf. Der Datensatz stammt aus Unicode 15.1 (über 3.700 Emojis), gegliedert in neun Kategorien, mit einer Suche, die Name und Stichwort abgleicht, sechs Fitzpatrick-Hauttönen für Personen-Emojis und einer „Zuletzt verwendet"-Zeile, die merkt, was du in dieser Sitzung kopiert hast.

Hauptfunktionen

Der Datensatz ist Unicode 15.1 — jedes Gesicht, jede Hand, jedes Lebensmittel, jede Flagge und jedes Symbol bis 2023, direkt aus dem Standard übernommen. Die Kategorien sind die neun, die das Unicode-Konsortium definiert: Smileys & Emotion, Personen & Körper, Tiere & Natur, Essen & Trinken, Reisen & Orte, Aktivitäten, Objekte, Symbole und Flaggen. Eine „Zuletzt"-Zeile sitzt neben den Kategorie-Buttons und protokolliert, was du während der Sitzung kopiert hast — gespeichert in localStorage unter RECENT_EMOJIS_KEY und auf MAX_RECENT_EMOJIS Einträge begrenzt.

Die Suche durchsucht sowohl den Emoji-Namen als auch die Stichwortliste — heart liefert ❤️ und auch 💛, 💚, 💙, 💘. Hauttöne folgen der Fitzpatrick-Skala (Standard + fünf Modifikatoren); die Auswahl wird auf jedes Personen-Emoji angewendet, das Modifikatoren unterstützt, während Emojis mit hasSkinTone === false (Objekte, Flaggen, Essen) die Auswahl ignorieren. Beim Klick auf ein Emoji wird in die Zwischenablage geschrieben, ein grüner Check-Overlay blitzt 1,5 Sekunden auf der Kachel auf und ein Toast erscheint — drei Feedback-Ebenen, weil Zwischenablage-Schreibvorgänge leicht zu übersehen sind.

Das Raster ist responsiv: 8 Spalten auf Smartphones, 10 auf Tablets, 12 auf Desktops. Die Höhe ist auf 400px mit vertikalem Scrollen für die größeren Kategorien festgelegt.

So verwendest du es

Öffne den Demnächst verfügbar: Emoji Picker — er startet bei Smileys & Emotion. Klicke einen anderen Kategorie-Button, um zu wechseln. Wenn du einen Hautton möchtest, wähle einen aus der Reihe der sechs winkenden-Hand-Buttons über den Kategorien, bevor du auf ein Emoji klickst; der gewählte Ton wird beim Kopieren angewendet, sodass 👋 mit mittlerem Ton zu 👋🏽 in der Zwischenablage wird. Suchen schlägt Scrollen für alles, was du benennen kannst: Tippe coffee und ☕, 🧋 erscheinen sofort. Lösche das Feld, um zur Kategorie-Ansicht zurückzukehren.

Die „Zuletzt"-Zeile (Uhr-Symbol, ganz links in der Kategorie-Leiste) zeigt deinen Sitzungsverlauf in Kopierreihenfolge. „Zuletzt" speichert das Basis-Emoji ohne Hauttonmodifikator — deine aktuelle Tonauswahl wird beim Kopieren erneut angewendet, sodass Tonwechsel den Verlauf nicht durcheinanderbringen.

Praktische Beispiele

Eine Slack-Nachricht zu einem Launch:

Suche: fire    → klick 🔥
Suche: rocket  → klick 🚀

Beide Kopien landen in „Zuletzt" für die nächste Nachricht.

Eine Länderflagge auswählen, ohne zu wissen, in welcher Reihe sie liegt:

Kategorie Flaggen → Suche: brazil → klick 🇧🇷

Hauttöne in einer Nachricht konsistent halten:

Hautton: dunkel (5. Button) → klick 👍, 🙏, 🤝
Zwischenablage erhält 👍🏿 → 🙏🏿 → 🤝🏿

Tipps und Best Practices

Hautton- und Kategorieauswahl werden im Komponenten-State gespeichert und aus einem Preset wiederhergestellt (eine Premium-Funktion) — gespeicherte Presets erfassen sowohl selectedSkinTone als auch selectedCategory.

Die Suche ist nicht gerankt. Ergebnisse erscheinen in der natürlichen Reihenfolge des Datensatzes, also liefern breite Begriffe wie heart oder face viele Treffer, enge Begriffe wie anguished einen oder zwei. Wenn eine Suche leer bleibt, probiere ein Synonym: sob statt cry, grin statt big smile, poop wenn brown nicht das Erwartete liefert. Die Namen im Datensatz sind formale Unicode-Namen und passen nicht immer zur umgangssprachlichen Formulierung.

Hauttonmodifikatoren gelten nur für Emojis mit hasSkinTone === true. Flaggen, Essen, Objekte und Symbole bleiben gelb, unabhängig vom gewählten Ton.

Häufige Probleme und Fehlerbehebung

„Zuletzt" ist nach mehreren Kopien leer. Die Liste liest aus localStorage. Private/Inkognito-Fenster und Browser mit deaktiviertem localStorage halten sie nicht — Kopien in der Sitzung erscheinen weiterhin im Speicher, werden aber beim Neuladen zurückgesetzt.

Eingefügtes Emoji erscheint als Kästchen oder Fragezeichen. Die empfangende App oder Plattform unterstützt diesen Unicode-15.1-Codepoint nicht. Emojis aus 2022–2023 rendern möglicherweise nicht auf älteren Android-Versionen, älteren Betriebssystemen oder Apps, die ihre Emoji-Schrift nicht aktualisiert haben. Ältere Emojis aus 2015–2019 funktionieren überall.

Toast zeigt „kopiert", aber die Zwischenablage hat den falschen Ton. Ein Hauttonmodifikator ist ausgewählt. Klicke den linken (Standard) Ton-Button, um den Modifikator zu entfernen, und kopiere erneut.

Datenschutz und Sicherheit

Suche, Kategorie-Filterung, Hauttonanwendung und Zwischenablage-Schreibvorgänge laufen alle lokal. Der vollständige Emoji-Datensatz wird mit dem JavaScript der Seite gebündelt. Keine Suchanfragen, keine kopierten Zeichen und keine Nutzungsdaten werden irgendwohin gesendet. Zuletzt verwendete Emojis liegen in localStorage und bleiben auf deinem Gerät. Nach dem ersten Laden funktioniert der Picker offline.

Häufig gestellte Fragen

Wie funktioniert die Hauttonauswahl?

Hauttöne in Unicode verwenden Fitzpatrick-Modifikator-Codepoints (U+1F3FB bis U+1F3FF), die nach einem Basis-Emoji-Codepoint angehängt werden. Der Picker ruft applySkintone(emoji.emoji, selectedSkinTone) auf, das den Modifikator anhängt, wenn das hasSkinTone-Flag des Emojis true ist. Emojis ohne Hauttonunterstützung werden unmodifiziert kopiert.

Wie viele Emojis kann ich in „Zuletzt" speichern?

Die „Zuletzt"-Liste ist auf MAX_RECENT_EMOJIS Einträge begrenzt. Neue Kopien rücken nach vorn; der älteste Eintrag fällt am Limit heraus. Ein erneutes Kopieren eines Emojis verschiebt es nach vorn, statt es zu duplizieren.

Kann ich in anderen Sprachen als Englisch suchen?

Nein. Die Suche durchsucht Namen und Stichwörter im Datensatz, die die formalen englischen Namen aus dem Unicode-Standard sind. Verwende englische Stichwörter.

Warum erscheint nach dem Klick auf ein Emoji ein grüner Overlay?

Visuelle Bestätigung, dass das Kopieren funktioniert hat. Der Overlay bleibt 1,5 Sekunden (setTimeout(() => setCopiedEmoji(null), 1500)) und verblasst dann. Der Toast an der Seite bestätigt das konkret kopierte Zeichen.

Jetzt Emoji Picker ausprobieren: Demnächst verfügbar: Emoji Picker

Verwandte Tools

• Demnächst verfügbar: ASCII-Tabelle — Zeichencodes für Nicht-Emoji-Zeichen im ASCII-Bereich nachschlagen.
• Demnächst verfügbar: Zufallsauswahl — Zufällige Auswahl aus einer eigenen Liste.