This repo provides EmojiOne spritesheets in various sprite sizes.

There's also a Sass mixin that generates CSS for given sizes with support for retina.

This repo provides emoji from the old version 2 of EmojiOne. This is because version 2 is free to use by everyone, whereas version 3 requires purchasing a costy license for commercial use. See license information below.

• Why
• Available sizes
• Including spritesheets and Sass mixins into your project
• Serving from a free CDN
• Using the Sass mixin
  • Example usage
• License
• Development
  • Rebuilding stylesheets
  • Updating file size table
  • Updating the table of content

EmojiOne is an awesome & free collection of emoji.

Unfortunately, its PNG sprites aren't very usable because:

• No sprite sizes below 64px are provided.
• The spritesheets have a 1px padding between sprites, making it impossible to downscale them.
• Spritesheets aren't hosted on their official CDN.
• Resizing emoji rendered via PNG sprites is a pain.

This repo provides EmojiOne spritesheets in the following sprite sizes: 10-32, 64, 128.

The reason other sizes aren't provided is because other stylesheets turn out larger in file size than next stylesheet whose sprite size is a power of two (e. g. file size for 48 is larger than file size for 64).

As for size 256, sprity crashes when source emoji size is larger than 128, so we were unable to generate it. If you need sprite size of 256, you should revert to the official EmojiOne spritesheet of size 512.

If your frontend doesn't have a build pipeline, skip this step and instead download files manually.

To avoid downloading all spritesheets from this repo, it recommended that you import individual spritesheets that you need with Bower.

1. Open latest commit in this GitHub repo in order to fix the version.

2. Open the spritesheet that you need from the dist/ folder.

3. Click Download or Raw to open the file directly.

4. Copy the URL.

5. Use it in Bower like this:

    bower install -S emojione-png-sprite-<size>=<url>
   

6. Repeat for every size that you need.

7. Import the Sass file in a similar way:

    bower install -S emojione-png-sprite-sass=<url>
   

Then you need to configure your build pipeline to include the spritesheets into your app distribution, e. g. move to the public/ folder.

RawGit.com is a free CDN for GitHub-hosted files powered by StackPath.com.

Here's how you can use it.

1. Open latest commit in this GitHub repo in order to fix the version (very important!).
2. Open the spritesheet that you need from the dist/ folder.
3. Click Raw to open the file directly.
4. Copy the URL.
5. Paste the URL into the top field on RawGit.com.
6. Copy the resulting URL from the bottom-left field. That's your permanent CDN URL!

Note that RawGit is very reliable, but it provides no guarantees and should not be used for applications that demand 100% uptime.

Import the Sass file into your stylesheet:

@import "bower_components/emojione-png-sprites-sass/style.scss";

Note that you may need to configure Sass include paths and adjust the import path.

This makes the sprity-emojione mixin available. It accepts three arguments:

Say, we want emoji HTML elements to be 20px in size. For non-retina screens, we'll need spites of the same size: 20px. Fo For retina screens, we want the emoji to be displayed in double and triple quality.

But 40 and 60 sprite sizes aren't available, so we'll use the next size larger than 40, which is 64. It's also larger than 60, so we'll need only one additional spritesheet for both 2x and 3x retina.

We're gonna serve the spritesheets from these paths on the web server:

/assets/emojione-png-sprites/sprite-20.png
/assets/emojione-png-sprites/sprite-64.png

Import the mixin into your Sass stylesheet and invoke it like this:

@import "bower_components/emojione-png-sprites-sass/style.scss";

@include sprity-emojione(20, "/assets/emojione-png-sprites", (2: 64));

This mixin invocation will make EmojiOne emoji have CSS width and height of 20px.

For non-retina screens, the spritesheet with sprite size 20 will be used.

For retina screens with a scale factor of 2 or more (DPI >= 192), the spritesheet with sprite size 64 will be used.

The resulting CSS will be:

// Applied when importing the spritesheet
.emojione {
  display: inline-block;
  background-repeat: no-repeat;
  font-size: inherit;
  line-height: normal;
  text-indent: -9999em;
  vertical-align: middle;
}

// Applied when calling the mixin
.emojione {
  width: 20px;
  height: 20px;
  background-image: url("/assets/emojione-png-sprites/sprite-20.png");
  background-size: 20px;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (        min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  .emojione {
    background-image: url("/assets/emojione-png-sprites/sprite-64.png");
  }
}

.emojione-1f46e-1f3fc {
  background-position: 0 0px;
}

.emojione-0023-20e3 {
  background-position: 0 -20px;
}

/* ... */

Code from this repo is provided under the MIT license.

Graphical artwork is a derivative work based on the 2.2.7 branch of EmojiOne Artwork, distributed under the Creative Commons Attribution 4.0 International license.

1. Install Node, Yarn and pngcrush
2. Clone this repo and cd into it
3. Install dependencies:
   • bower install
   • yarn install
4. Run node index.js

Regenerating and compressing stylesheets will take some time.

Use ls -alhF to get file sizes.

Use this regex to extract size and filename:

/^.*?([\d,] [A-Z]).*?([\w|.|-] )$/gm

Use https://lolmaus.github.io/tocdown/ with first two checkboxes enabled.