Emoji Mart – Free Emoji Picker for Web Apps

I always struggled adding emoji reactions to chats and comments. Either write your own picker (hundreds of emojis, categories, skin tones, search…) or pay someone. When I discovered Emoji Mart I never looked back. It’s become my standard solution.

Developed by the folks over at Missive, who make a team email and chat platform, they needed one themselves. It can be used anywhere, including plain HTML using a CDN URL, React, Vue, or any other framework. There are 9 categories of emojis, a search box, light/dark mode, skin tone selection, and even custom emoji support. All the features that were lacking from the dubious free solutions I used prior to discovering this gem.

1How to add an emoji picker to your website

If you don’t want to install anything, you can use the browser version which doesn’t require any build tooling, npm, or anything else. Simply include two <script> tags and you’re good to go:

<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script>
  const picker = new EmojiMart.Picker({
    onEmojiSelect: (emoji) => {
      document.querySelector('#myInput').value += emoji.native
    }
  })
  document.body.appendChild(picker)
</script>

If you’re using React, you need three packages and then you can just use it like any other component. Agent makes this super easy and does everything automatically behind the scenes:

npm install --save emoji-mart @emoji-mart/data @emoji-mart/react

import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

function App() {
  return <Picker data={data} onEmojiSelect={console.log} />
}