Free Open-Source Emoji Sprite Sheets for JavaScript Apps (emoji-datasource Compatible)

AlexG

We were recently building out a project that needed a beautiful, functional, and open-source emoji system, but one that was reminiscient of the good ‘ol days of the internet. That’s when we found OpenMoji.

It’s a beautiful and classic take on the modern emoji library with exactly what we needed for the project, but there wasn’t a standard sprite sheet we could plug into easily like with the standard Apple, Google, or Twitter emoji sprites via emoji-datasource . So we built our own.

Meet emoji-datasource-openmoji – a drop-in replacement that brings OpenMoji’s gorgeous open-source emoji designs to your project.

spritesheet

What is it?

emoji-datasource-openmoji provides pre-built sprite sheets of all 3,786 OpenMoji emojis (including 1,875 skin tone variants) in a format that’s 100% compatible with emoji-datasource’s grid layout.

This means you can swap out proprietary emoji sprites for open-source ones without changing a single line of your positioning code.

Why use it?

Open source, truly free Unlike Apple, Google, or Twitter emojis, OpenMoji is licensed under CC-BY-SA 4.0. Use them in any project, commercial or personal, without licensing concerns.

Smaller file sizes The WebP format keeps files compact:

  • 32px sprites: 1.0 MB (vs 1.3 MB Apple)
  • 64px sprites: 2.4 MB (vs 3.5 MB Apple)
filesizes

Drop-in compatibility Already using emoji-datasource? Just swap the sprite sheet path:

// Before
const sheet = require('emoji-datasource-apple/img/apple/sheets/32.png');

// After
const sheet = require('emoji-datasource-openmoji/img/sheets/32.webp');

All the sheet_x and sheet_y positions from emoji-datasource work exactly the same.

Use cases

Emoji pickers Build a custom emoji picker with grid-based positioning that matches industry standards.

Chat applications Display consistent emoji across all platforms without licensing restrictions.

Design systems Include open-source emojis in your component library that designers and developers can freely modify.

Offline-first apps Bundle emoji sprites directly in your app without worrying about CDN availability or API limits.

Image description

Get started

npm install emoji-datasource-openmoji

const emojiData = require('emoji-datasource');
const sheets = require('emoji-datasource-openmoji');

// Find an emoji
const emoji = emojiData.find(e => e.short_name === 'grinning');

// Use with CSS background positioning
console.log(emoji.sheet_x, emoji.sheet_y); // Grid position
console.log(sheets.sheet64); // Path to sprite sheet

Links: