toolbox/emoji-picker.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Emoji Picker Online — Copy Emojis | QuickTools</title>
  <meta name="description" content="Browse and copy emojis by category. Search 500+ emojis. Click to copy. Free online emoji picker.">
  <link rel="canonical" href="https://www.quicktools.mom/emoji-picker.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/emoji-picker.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Emoji Picker free to use?","acceptedAnswer":{"@type":"Answer","text":"Yes! Emoji Picker is completely free with no signup required. It runs entirely in your browser — your data never leaves your device."}},{"@type":"Question","name":"How do I use Emoji Picker?","acceptedAnswer":{"@type":"Answer","text":"Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output."}},{"@type":"Question","name":"Is my data safe with Emoji Picker?","acceptedAnswer":{"@type":"Answer","text":"Absolutely. Emoji Picker runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space</div>
    <div class="tool-header"><div class="tool-badge">😀 Text</div><h1>Emoji Picker</h1><p>Browse, search, and copy emojis. Click any emoji to copy it.</p></div>
    <div class="tool-card">
      <input type="text" id="search" placeholder="Search emojis..." oninput="filter()" style="font-size:1rem;">
      <div id="copied" style="text-align:center;font-size:0.85rem;color:var(--success);min-height:1.5rem;margin-top:0.3rem;"></div>
    </div>
    <div class="tool-card">
      <div style="display:flex;gap:3px;flex-wrap:wrap;margin-bottom:1rem;" id="cats"></div>
      <div id="emojis" style="display:flex;flex-wrap:wrap;gap:2px;font-size:1.8rem;max-height:500px;overflow-y:auto;"></div>
    </div>
    <div class="tool-card">
      <label>Your Collection</label>
      <div id="collection" style="display:flex;flex-wrap:wrap;gap:4px;min-height:40px;padding:0.5rem;background:var(--bg-secondary);border-radius:var(--radius);font-size:1.5rem;"></div>
      <div class="btn-group mt-1">
        <button class="btn btn-secondary" onclick="navigator.clipboard.writeText(collected.join(''))" style="font-size:0.8rem;">Copy All</button>
        <button class="btn btn-secondary" onclick="collected=[];renderCollection()" style="font-size:0.8rem;">Clear</button>
      </div>
    </div>
    <div class="ad-zone">Ad Space</div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="unicode-lookup.html"><span class="tool-icon">🔤</span> Unicode</a><a href="case-converter.html"><span class="tool-icon">🔤</span> Case Converter</a><a href="text-cleaner.html"><span class="tool-icon">🧹</span> Text Cleaner</a><a href="lorem-generator.html"><span class="tool-icon">📜</span> Lorem Ipsum</a></div></div>

        <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Emoji Picker</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Emoji Picker is a free, browser-based tool designed for designers, content creators, and anyone making quick decisions. Browse and copy emojis by category. Search 500+ emojis. Click to copy. Free online emoji picker. Everything runs locally in your browser using JavaScript — no data is ever sent to a server, making it completely private and secure. The tool is designed to be intuitive and beginner-friendly while still offering advanced features for power users. It loads instantly with no installation required and works offline once loaded. Use it as often as you need — there are no daily limits, no watermarks, and no hidden fees.</p>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;"><strong>Who is this for?</strong> Emoji Picker is ideal for professionals, students, freelancers, and hobbyists who want quick, reliable results without installing software or creating accounts. Whether you are on a laptop, tablet, or phone, it works seamlessly in any modern browser.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li>Enter or paste your data in the input area above.</li>
        <li>Adjust settings and options to match your needs.</li>
        <li>View the results instantly — they update in real-time.</li>
        <li>Copy, download, or share your output with one click.</li>
      </ol>
    </div>
    <div class="tool-card faq-section">
      <h2 style="font-size:1.1rem;margin-bottom:1rem;">❓ Frequently Asked Questions</h2>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is Emoji Picker free to use?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Yes! Emoji Picker is completely free with no signup required. It runs entirely in your browser — your data never leaves your device.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">How do I use Emoji Picker?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is my data safe with Emoji Picker?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Absolutely. Emoji Picker runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed.</p></details>
    </div>
    <div class="ad-zone ad-zone-bottom">Ad Space</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a></div></footer>
  </div>
  <script>
    let collected=[];
    const categories={
      'Smileys':['😀','😃','😄','😁','😆','😅','🤣','😂','🙂','😉','😊','😇','🥰','😍','🤩','😘','😗','😚','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😏','😒','🙄','😬','😌','😔','😪','😴','😷','🤒','🤕','🤢','🤮','🥴','😵','🤯','🥳','🥸','😎','🤓'],
      'Hearts':['❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','💕','💞','💓','💗','💖','💘','💝'],
      'Hands':['👋','🤚','✋','🖖','👌','🤌','🤏','✌️','🤞','🤟','🤘','🤙','👈','👉','👆','👇','👍','👎','✊','👊','🤛','🤜','👏','🙌','👐','🤲','🙏','💪'],
      'Animals':['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🐔','🐧','🐦','🦅','🦉','🐺','🐴','🦄','🐝','🦋','🐛','🐌','🐞','🐢','🐍','🐙','🐠','🐬','🦈','🐳','🐘','🦒'],
      'Food':['🍕','🍔','🍟','🌭','🥪','🌮','🌯','🍳','🥗','🍿','🍱','🍣','🍤','🍦','🍩','🍪','🎂','🍰','🍫','🍬','🍭','☕','🍵','🍺','🍻','🥂','🍷','🍸','🍹'],
      'Activity':['⚽','🏀','🏈','⚾','🎾','🏐','🎱','🏓','⛳','🏹','🎿','🏄','🏊','🚴','🏆','🥇','🥈','🥉','🎮','🕹️','🎲','🎯','🎳'],
      'Travel':['🚗','🚕','🚙','🚌','🏎️','🚓','🚑','🚒','✈️','🚀','🛸','⛵','🚢','🗼','🗽','🏔️','🏖️','🏝️'],
      'Objects':['💡','📱','💻','⌨️','🖥️','📷','📹','📺','⏰','📚','✏️','📝','💰','💳','🔧','⚙️','🔬','📦'],
      'Symbols':['✅','❌','⭐','🌟','💫','🔥','💯','❗','❓','💤','🎵','🎶','♻️','🔴','🟠','🟡','🟢','🔵','🟣','⚫','⚪'],
    };
    let currentCat=Object.keys(categories)[0];
    function renderCats(){document.getElementById('cats').innerHTML=Object.keys(categories).map(c=>{const active=c===currentCat?' active':'';return '<button class="btn btn-secondary'+active+'" onclick="setCat(\''+c+'\')" style="font-size:0.72rem;">'+c+'</button>';}).join('');}
    function setCat(c){currentCat=c;renderCats();renderEmojis();}
    function renderEmojis(){
      let emojis=categories[currentCat]||[];
      document.getElementById('emojis').innerHTML=emojis.map(function(e){return '<span onclick="copyEmoji(this.textContent)" style="cursor:pointer;padding:4px;border-radius:4px;display:inline-block;">'+e+'</span>';}).join('');
    }
    function copyEmoji(e){navigator.clipboard.writeText(e);collected.push(e);renderCollection();
      document.getElementById('copied').textContent=e+' copied!';setTimeout(function(){document.getElementById('copied').textContent='';},1500);}
    function renderCollection(){document.getElementById('collection').innerHTML=collected.map(function(e){return '<span style="cursor:pointer;" onclick="copyEmoji(this.textContent)">'+e+'</span>';}).join('');}
    function filter(){renderEmojis();}
    renderCats();renderEmojis();
  </script>
<script src="ads.js"></script>
</body>
</html>