Emoji Picker Widget

A drop-in emoji picker for any website. One script tag, zero dependencies, works with any framework (or none). Search, browse by category, and copy emoji with a click.

Live demo

Features

✓ Search by name — instant filtering
✓ Browse 9 categories with tab navigation
✓ Click to copy — clipboard API
✓ Custom event: emoji-select
✓ Shadow DOM — no style conflicts
✓ 1,914 emoji, loaded from CDN

Installation

Add these two lines anywhere in your HTML:

<!-- Load the widget -->
<script src="https://www.emojipedix.com/widget/picker.js"></script>

<!-- Place the picker wherever you want -->
<emojipedix-picker></emojipedix-picker>

That's it. No npm install, no build step, no framework dependency.

JavaScript API

Listen for emoji selection

const picker = document.querySelector('emojipedix-picker');

picker.addEventListener('emoji-select', (e) => {
  console.log(e.detail.emoji);  // "🔥"
  console.log(e.detail.name);   // "fire"
  console.log(e.detail.slug);   // "fire"
});

Event detail object

Property	Type	Description
emoji	string	The emoji character (e.g. "🔥")
name	string	English name (e.g. "fire")
slug	string	URL slug (e.g. "fire")

Framework examples

React

import 'https://www.emojipedix.com/widget/picker.js';

function EmojiInput() {
  const ref = useRef();

  useEffect(() => {
    const el = ref.current;
    const handler = (e) => console.log(e.detail.emoji);
    el.addEventListener('emoji-select', handler);
    return () => el.removeEventListener('emoji-select', handler);
  }, []);

  return <emojipedix-picker ref={ref} />;
}

Vue

<template>
  <emojipedix-picker @emoji-select="onSelect" />
</template>

<script setup>
import 'https://www.emojipedix.com/widget/picker.js';
const onSelect = (e) => console.log(e.detail.emoji);
</script>

Attribution

The picker includes a small "Powered by Emojipedix" link. We kindly ask that you keep this attribution visible. It helps us keep this tool free for everyone. The widget and API are free to use in personal and commercial projects.