Fork of the emoji-button package to remove FontAwesome.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Joe Attardi ef8ac84e19 4.6.2 2 years ago
.github/workflows Remove Node 8 and 10 from CI job 4 years ago
css Add overridable CSS variable support 3 years ago
scripts Fix emoji order bug 3 years ago
site Fix XSS vulnerability with custom emojis 2 years ago
src Add more HTML escaping 2 years ago
.babelrc Convert to TypeScript 4 years ago
.eslintrc.js Fix prettier formatting 4 years ago
.gitignore Add custom icons 3 years ago
.prettierrc Fix prettier formatting 4 years ago
LICENSE Create LICENSE 4 years ago Fix quote in README 3 years ago
emoji-test.txt Reformat, update versions 4 years ago
nodejs.yml Add CI workflow 4 years ago
package-lock.json 4.6.2 2 years ago
package.json 4.6.2 2 years ago
rollup.config.js Remove hard coded typings file and generate typings 3 years ago
tsconfig.json Remove hard coded typings file and generate typings 3 years ago

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
npm link

Start the build/watch loop

npm run build:watch

From the site subdirectory

Install dependencies

npm install
npm link @joeattardi/emoji-button

Start the documentation site

npm run develop

Open the page