import React, { useState, useMemo, useCallback } from "react"; const EMOJIS = { "Smileys": ["😀","😃","😄","😁","😆","😅","🤣","😂","🙂","🙃","😉","😊","😇","🥰","😍","🤩","😘","😗","😚","😙","🥲","😋","😛","😜","🤪","😝","🤑","🤗","🤭","🤫","🤔","🫡","🤐","🤨","😐","😑","😶","🫥","😏","😒","🙄","😬","🤥","😌","😔","😪","🤤","😴","😷","🤒","🤕","🤢","🤮","🥵","🥶","🥴","😵","🤯","🤠","🥳","🥸","😎","🤓","🧐"], "Gestures": ["👋","🤚","🖐️","✋","🖖","🫱","🫲","🫳","🫴","👌","🤌","🤏","✌️","🤞","🫰","🤟","🤘","🤙","👈","👉","👆","🖕","👇","☝️","🫵","👍","👎","✊","👊","🤛","🤜","👏","🙌","🫶","👐","🤲","🤝","🙏"], "Hearts": ["❤️","🧡","💛","💚","💙","💜","🖤","🤍","🤎","💔","❤️‍🔥","❤️‍🩹","❣️","💕","💞","💓","💗","💖","💘","💝","💟"], "Animals": ["🐶","🐱","🐭","🐹","🐰","🦊","🐻","🐼","🐻‍❄️","🐨","🐯","🦁","🐮","🐷","🐸","🐵","🙈","🙉","🙊","🐔","🐧","🐦","🐤","🦆","🦅","🦉","🦇","🐺","🐗","🐴","🦄","🐝","🪱","🐛","🦋","🐌","🐞","🐜","🪰","🦟","🦗","🕷️","🦂","🐢","🐍","🦎","🐙","🦑","🦐","🦞","🦀","🐡","🐠","🐟","🐬","🐳","🐋","🦈","🐊"], "Food": ["🍎","🍐","🍊","🍋","🍌","🍉","🍇","🍓","🫐","🍈","🍒","🍑","🥭","🍍","🥥","🥝","🍅","🍆","🥑","🥦","🥬","🥒","🌶️","🫑","🌽","🥕","🫒","🧄","🧅","🥔","🍠","🥐","🍞","🥖","🥨","🧀","🥚","🍳","🧈","🥞","🧇","🥓","🥩","🍗","🍖","🌭","🍔","🍟","🍕","🫓","🥪","🥙","🧆","🌮","🌯","🫔","🥗","🥘","🫕","🍝","🍜","🍲","🍛","🍣","🍱","🥟","🦪","🍤","🍙","🍚","🍘","🍥","🥠","🥮","🍢","🍡","🍧","🍨","🍦","🥧","🧁","🍰","🎂","🍮","🍭","🍬","🍫","🍿","🍩","🍪"], "Travel": ["🚗","🚕","🚙","🚌","🚎","🏎️","🚓","🚑","🚒","🚐","🛻","🚚","🚛","🚜","🏍️","🛵","🚲","🛴","🛹","🛼","🚁","🛸","✈️","🛩️","🚀","🛶","⛵","🚤","🛥️","🛳️","⛴️","🚢","⚓","🗼","🗽","🗿","🏰","🏯","🏟️","🎡","🎢","🎠","⛲","⛱️","🏖️","🏝️","🏜️","🌋","⛰️","🏔️","🗻","🏕️"], "Objects": ["⌚","📱","💻","⌨️","🖥️","🖨️","🖱️","💾","💿","📀","📷","📹","🎥","📽️","📞","☎️","📟","📠","📺","📻","🎙️","🎚️","🎛️","⏱️","⏲️","⏰","🕰️","⌛","⏳","🔋","🔌","💡","🔦","🕯️","🪔","🔑","🗝️","🔒","🔓","🧲","🪝","🔨","⛏️","🪓","🔧","🪛","🔩","⚙️","🧰","🪤"], "Symbols": ["❤️","💯","💢","💥","💫","💦","💨","🕳️","💬","💭","🗯️","♠️","♣️","♥️","♦️","🃏","🎴","🀄","🔇","🔈","🔉","🔊","📢","📣","📯","🔔","🔕","🎵","🎶","✅","❌","❓","❔","‼️","⁉️","⭕","✳️","❇️","✴️","🔴","🟠","🟡","🟢","🔵","🟣","⚫","⚪","🟤","🔶","🔷","🔸","🔹"], "Flags": ["🏁","🚩","🎌","🏴","🏳️","🏳️‍🌈","🏳️‍⚧️","🏴‍☠️","🇺🇸","🇬🇧","🇫🇷","🇩🇪","🇯🇵","🇰🇷","🇨🇳","🇹🇼","🇮🇳","🇧🇷","🇦🇺","🇨🇦","🇲🇽","🇪🇸","🇮🇹","🇷🇺","🇸🇪","🇳🇴","🇩🇰","🇫🇮","🇳🇱","🇧🇪","🇨🇭","🇦🇹","🇵🇱","🇵🇹","🇬🇷","🇹🇷","🇹🇭","🇻🇳","🇮🇩","🇵🇭","🇲🇾","🇸🇬","🇿🇦","🇪🇬","🇳🇬","🇰🇪","🇦🇷","🇨🇱","🇨🇴","🇵🇪"], }; const CATEGORIES = Object.keys(EMOJIS); export default function App() { const [search, setSearch] = useState(""); const [active, setActive] = useState(CATEGORIES[0]); const [copied, setCopied] = useState(""); const filtered = useMemo(() => { if (!search.trim()) return EMOJIS[active] || []; const q = search.toLowerCase(); const results = []; for (const cat of CATEGORIES) { if (cat.toLowerCase().includes(q)) { results.push(...EMOJIS[cat]); } } if (results.length > 0) return results; // Keyword fallback for common searches const kw = { smile: "Smileys", happy: "Smileys", face: "Smileys", laugh: "Smileys", wink: "Smileys", hand: "Gestures", thumb: "Gestures", point: "Gestures", wave: "Gestures", clap: "Gestures", heart: "Hearts", love: "Hearts", red: "Hearts", animal: "Animals", dog: "Animals", cat: "Animals", bear: "Animals", bird: "Animals", fish: "Animals", food: "Food", fruit: "Food", eat: "Food", drink: "Food", pizza: "Food", burger: "Food", travel: "Travel", car: "Travel", plane: "Travel", ship: "Travel", rocket: "Travel", object: "Objects", phone: "Objects", computer: "Objects", tool: "Objects", key: "Objects", symbol: "Symbols", check: "Symbols", star: "Symbols", music: "Symbols", flag: "Flags", country: "Flags", nation: "Flags", }; for (const [keyword, cat] of Object.entries(kw)) { if (keyword.includes(q) || q.includes(keyword)) { for (const e of EMOJIS[cat]) { if (!results.includes(e)) results.push(e); } } } return results; }, [search, active]); const copy = useCallback(async (emoji) => { try { await navigator.clipboard.writeText(emoji); setCopied(emoji); setTimeout(() => setCopied(""), 1500); } catch { const ta = document.createElement("textarea"); ta.value = emoji; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); document.body.removeChild(ta); setCopied(emoji); setTimeout(() => setCopied(""), 1500); } }, []); const S = { wrap: { fontFamily: "system-ui, sans-serif", padding: 20, maxWidth: 560, margin: "0 auto", color: "#e2e8f0" }, h2: { fontSize: 22, fontWeight: 700, marginBottom: 4, color: "#f1f5f9" }, sub: { fontSize: 13, color: "#94a3b8", marginBottom: 16 }, input: { width: "100%", padding: "10px 14px", borderRadius: 10, border: "1px solid #334155", background: "#1e293b", color: "#f8fafc", fontSize: 15, outline: "none", marginBottom: 12, boxSizing: "border-box", }, tabs: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }, tab: (a) => ({ padding: "6px 12px", borderRadius: 8, fontSize: 13, fontWeight: 500, cursor: "pointer", border: "1px solid " + (a ? "#6366f1" : "#334155"), background: a ? "#6366f1" : "#1e293b", color: a ? "#fff" : "#94a3b8", transition: "all .15s", }), grid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(44px, 1fr))", gap: 6, maxHeight: 340, overflowY: "auto", padding: 4, }, btn: { fontSize: 28, width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 8, border: "1px solid #334155", background: "#1e293b", cursor: "pointer", transition: "all .15s", }, toast: { position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)", background: "#22c55e", color: "#fff", padding: "8px 20px", borderRadius: 10, fontSize: 15, fontWeight: 600, boxShadow: "0 4px 20px rgba(0,0,0,.3)", zIndex: 999, display: "flex", alignItems: "center", gap: 8, }, }; return (

Emoji Picker

Browse by category or search. Click any emoji to copy it.

setSearch(e.target.value)} /> {!search && (

{CATEGORIES.map((c) => ( setActive(c)}> {c} ))}

)}

{filtered.map((e, i) => ( ))}

{copied && (

Copied {copied}

)}

); }

Explore AI Tools

IP Address Lookup

Emoji Picker

Explore AI Tools

IP Address Lookup

Emoji Picker