使用：
- 在桌面或任意位置创建一个 emoji.html 文件
- 复制代码粘贴至文件中
- 右击文件 选择使用浏览器打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Emoji 图标大全</title>
<style>
body { font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif; padding: 20px; background: #f9f9f9; }
h1 { text-align: center; }
h2 { border-left: 10px solid #464646; background-color: #e0e0e0; padding: 5px 0; }
#search { width: 100%; padding: 10px; margin-bottom: 20px; font-size: 16px; }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 10px; font-size: 26px; }
.emoji-item { font-size: 32px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; transition: background 0.2s; }
.emoji-item:hover { background: #e0e0e0; }
</style>
</head>
<body>
<h1>📒 Emoji 图标大全</h1>
<input type="text" id="search" placeholder="搜索 Emoji 分类或图标…">
<div id="emoji-container">
<h2>😃 表情与情绪</h2>
<div class="emoji-grid">
😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😜 🤪 🤨 🧐 🤓 😎 🥸 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑
</div>
<h2>👤 人物与手势</h2>
<div class="emoji-grid">
🙋 🙋♂️ 🙋♀️ 🙆 🙆♂️ 🙆♀️ 🙅 🙅♂️ 🙅♀️ 🙇 🙇♂️ 🙇♀️ 🤦 🤦♂️ 🤦♀️ 🤷 🤷♂️ 🤷♀️ 💁 💁♂️ 💁♀️ 🧏 🧏♂️ 🧏♀️ 🙌 👏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤟 🤘 🤞 ✌️ 🤌 🤏 👌 ✋ 🖐 🖖 🤙 🖕 ☝️ 👇 👉 👈 🫵 🫱 🫲 🫳 🫴 🤲 🙏 💅
</div>
<h2>🐾 动物与自然</h2>
<div class="emoji-grid">
🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐻❄️ 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🐔 🐧 🐦 🐤 🐣 🐥 🦆 🦅 🦉 🦇 🐺 🐗 🐴 🦄 🐝 🐛 🦋 🐌 🐞 🐜 🪲 🪳 🪰 🪱 🦂 🐢 🐍 🦎 🦖 🦕 🐙 🦑 🦐 🦞 🦀 🪼 🐡 🐠 🐟 🐬 🐳 🐋 🦈 🐊 🐆 🐅 🐃 🐂 🐄 🦬 🐪 🐫 🦙 🦒 🐘 🦣 🦏 🦛 🐁 🐀 🐇 🐿 🦫 🦦 🦨 🦥 🐾 🌵 🎄 🌲 🌳 🌴 🪵 🌱 🌿 ☘️ 🍀 🎍 🎋 🍃 🍂 🍁 🍄 🪺 🌾 💐 🌷 🪷 🌹 🥀 🌺 🌸 🌼 🌻 🌞 🌝 🌛 🌜 🌚 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌙 🌎 🌍 🌏 💫 ⭐ 🌟 ✨ ⚡ ☄️ 💥 🌈 🌤 ⛅ 🌥 ☁️ 🌦 🌧 ⛈ 🌩 🌨 ❄️ ☃️ ⛄ 🌬 💨 💧 💦 ☔ 🌊
</div>
<h2>🍔 食物与饮料</h2>
<div class="emoji-grid">
🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🍆 🥑 🫛 🫒 🌽 🥕 🥔 🥒 🧄 🧅 🫚 🫠 🫙 🥜 🫘 🌰 🍞 🥐 🥖 🥨 🥯 🥞 🧇 🧀 🍖 🍗 🥩 🥓 🍔 🍟 🍕 🌭 🥪 🌮 🌯 🫔 🥙 🧆 🥗 🥘 🫕 🥫 🍝 🍜 🍲 🍛 🍣 🍱 🥟 🥠 🥡 🦪 🍤 🍙 🍚 🍘 🍥 🥮 🎂 🍰 🧁 🥧 🍮 🍭 🍬 🍫 🍿 🥜 🍩 🍪 🥛 🍼 ☕ 🍵 🫖 🍶 🍺 🍻 🥂 🍷 🫗 🥃 🍸 🍹 🧉 🥤 🧋 🫙 🧃 🥢 🍽 🍴 🥄 🔪 🫓
</div>
<h2>🚗 交通与地点</h2>
<div class="emoji-grid">
🚗 🚕 🚙 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🛻 🚚 🚛 🚜 🦯 🦽 🦼 🩼 🚲 🛴 🛹 🛼 🚏 🛣 🛤 🛢 ⛽ 🚨 🚥 🚦 🛑 🚧 ⚓ 🛟 ⛵ 🛶 🚤 🛳 ⛴ 🚢 ✈️ 🛩 🛫 🛬 🪂 💺 🚁 🚟 🚠 🚡 🚀 🛸 🪐 🌋 🗻 🏔 🏕 🏖 🏜 🏝 🏞 🏟 🏛 🏗 🧱 🪨 🪵 🛖 🏘 🏚 🏠 🏡 🏢 🏣 🏤 🏥 🏦 🏨 🏩 🏪 🏫 🏬 🏭 🏯 🏰 💒 🗼 🗽 🕌 🛕 🕍 ⛪ 🕋 🛤 🌉 🌁 🌆 🌇 🌃 🌌 🌉 🌊
</div>
<h2>⚽ 活动与运动</h2>
<div class="emoji-grid">
⚽ 🏀 🏈 ⚾ 🥎 🎾 🏐 🏉 🥏 🎱 🪀 🪁 🏓 🏸 🥅 🪃 🥊 🥋 🎽 🛷 ⛷ 🏂 🪂 🏋️♀️ 🏋️♂️ 🤼♀️ 🤼♂️ 🤸♀️ 🤸♂️ ⛹️♀️ ⛹️♂️ 🤺 🤾♀️ 🤾♂️ 🏌️♀️ 🏌️♂️ 🏇 🧘♀️ 🧘♂️ 🏄♀️ 🏄♂️ 🏊♀️ 🏊♂️ 🤽♀️ 🤽♂️ 🚣♀️ 🚣♂️ 🧗♀️ 🧗♂️ 🚵♀️ 🚵♂️ 🚴♀️ 🚴♂️ 🏆 🥇 🥈 🥉 🎖 🏅 🎗 🎟 🎫 🎠 🎡 🎢 🎪 🎭 🎨 🖌 🖍 🎼 🎵 🎶 🎤 🎧 📯 🎷 🎸 🎹 🎺 🪗 🥁 🪘 🪇 🎬 🎥 📷 📸 📹 🎞 📽 🎯 🎮 🕹 🎰 🎲 🧩 🧸 🪅 🪩 🪆 🃏 🀄 🎴
</div>
<h2>🛠 物品与工具</h2>
<div class="emoji-grid">
⌛ ⏳ ⌚ ⏰ ⏱ ⏲ 🕰 🌡 🔋 🔌 💻 🖥 🖨 ⌨ 🖱 🖲 💽 💾 💿 📀 📷 📸 📹 🎥 📞 ☎ 📟 📠 📺 📻 📡 🧭 📡 🔍 🔎 🕯 💡 🔦 🏮 🪔 📔 📕 📖 📗 📘 📙 📚 📓 📒 📃 📜 📄 📰 🗞 📑 🔖 🏷 💰 💴 💵 💶 💷 💸 💳 🧾 💹 💱 💲 ✉ 📧 📩 📤 📥 📦 📫 📪 📬 📭 📮 🗳 🏧 🚮 🚰 ♿ 🚹 🚺 🚻 🚼 🚾 🛗 🛎 🧳 🛍 📿 💎 ⚖ 🔧 🔨 ⚒ 🛠 ⛏ 🪓 🪚 🔩 ⚙ 🪛 🪝 🪜 🧰 🧲 🪠 🪤 🧪 🧫 🧬 🔬 🔭 📡
</div>
<h2>🌐 符号与标志</h2>
<div class="emoji-grid">
❤️ 🧡 💛 💚 💙 💜 🤎 🖤 🤍 💔 ❣ 💕 💞 💓 💗 💖 💘 💝 💟 ☮ ✝ ☪ 🕉 ☸ ✡ 🔯 🕎 ☯ ☦ 🛐 ⛎ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ 🆔 ⚛ 🉑 ☢ ☣ 🆚 🉐 🈹 🈴 🈺 🈷️ 🈶 🈯 🉐 🈸 🈲 🈳 🈚 🈁 🈂️ 🈷️ ✴ 🆚 ✳ ❇ ‼ ⁉ ❓ ❔ ❕ ❗ 〽 ⚠ 🚸 ⛔ 🚫 🚳 🚭 🚯 🚱 🚷 📵 🔞 ☢ ☣ 🛑 🛡 🔰 ♻ 🈯 🏧 🆘 🆗 🆙 🆒 🆓 🆕 🆙 🆖 🆗
</div>
<h2>🏳️🌈 旗帜与国家</h2>
<div class="emoji-grid">
🏳️ 🏴 🏁 🚩 🏳️🌈 🏳️⚧️ 🇨🇳 🇯🇵 🇺🇸 🇬🇧 🇫🇷 🇩🇪 🇷🇺 🇮🇹 🇰🇷 🇨🇦 🇧🇷 🇪🇸 🇦🇺 🇮🇳 🇹🇷 🇸🇦 🇿🇦 🇲🇽 🇸🇪 🇳🇱 🇨🇭 🇦🇷 🇵🇹 🇦🇪 🇸🇬 🇳🇿 🇳🇴 🇵🇱 🇹🇭 🇵🇭 🇮🇩 🇲🇾 🇻🇳 🇵🇰 🇪🇬 🇳🇬 🇦🇹 🇨🇱 🇨🇴
</div>
</div>
<script>
const searchInput = document.getElementById('search');
const emojiContainer = document.getElementById('emoji-container');
searchInput.addEventListener('input', function() {
const query = this.value.toLowerCase();
const sections = emojiContainer.querySelectorAll('h2');
sections.forEach(section => {
const grid = section.nextElementSibling;
if (section.textContent.toLowerCase().includes(query) || grid.textContent.includes(query)) {
section.style.display = '';
grid.style.display = 'flex';
} else {
section.style.display = 'none';
grid.style.display = 'none';
}
});
});
// 点击复制 Emoji
emojiContainer.querySelectorAll('.emoji-grid').forEach(item => {
item.addEventListener('click', (e) => {
console.log(e)
navigator.clipboard.writeText(item.textContent);
item.style.background = '#b3d4fc';
setTimeout(() => item.style.background = '', 300);
});
});
</script>
</body>
</html>