Narcissistic Pickle Meister

    This package has been deprecated

    Author message:

    Emoji Button is now PicMo! Please install the 'picmo' package, see for details

    TypeScript icon, indicating that this package has built-in type declarations

    4.6.4 • Public • Published

    Emoji Button

    Vanilla JavaScript emoji picker 😎



    Demo and Documentation


    • 💻 Vanilla JS, use with any framework
    • 😀 Use native or Twemoji emojis
    • 🔎 Emoji search
    • 👍🏼 Skin tone variations
    • Recently used emojis
    • ⌨️ Fully keyboard accessible
    • 🎨 Dark, light, and auto themes
    • ⚙️ Add your own custom emoji images
    • 🧩 Extend functionality with plugins

    Browser support

    Emoji Button is supported on all modern browsers supporting the latest JavaScript features. Internet Explorer is not supported.


    If you are using a package manager like yarn or npm, you can install Emoji Button directly from the npm registry:

    npm install @joeattardi/emoji-button

    Basic usage

    First, you'll need a trigger element. This is typically a button, and is used to toggle the emoji picker.

    <button id="emoji-trigger">Emoji</button>

    Once you've added the trigger, you will need to import the EmojiButton class and create a new instance. Various options can be passed to the constructor, which is covered in the API documentation.

    After constructing a picker, it can be shown by calling showPicker or togglePicker on it. These functions expect a reference element as a parameter. The picker is positioned relative to this reference element.

    When an emoji is selected, the picker will emit an emoji event, passing an object containing data about the emoji that was selected. You can then handle the selected emoji however you want.

    For more in depth documentation and examples, please visit

    import { EmojiButton } from '@joeattardi/emoji-button';
    const picker = new EmojiButton();
    const trigger = document.querySelector('#emoji-trigger');
    picker.on('emoji', selection => {
      // handle the selected emoji here
    trigger.addEventListener('click', () => picker.togglePicker(trigger));


    The easiest way to hack on Emoji Button is to use the documentation site. First, you should fork this repository.

    Clone the forked repository

    git clone

    From the repository root

    Install dependencies

    npm install

    Set up the link

    npm link

    Start the build/watch loop

    npm run build:watch

    From the site subdirectory

    Install dependencies

    npm install

    Link the library

    npm link @joeattardi/emoji-button

    Start the documentation site

    npm run develop

    Open the page



    npm i @joeattardi/emoji-button

    DownloadsWeekly Downloads






    Unpacked Size

    276 kB

    Total Files


    Last publish


    • joeattardi