emoji css classes
Branch: master
Clone or download
Latest commit c5c9d5a Nov 18, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
files move files Oct 12, 2016
.gitattributes fix docs Nov 18, 2016
.gitignore initial script Oct 12, 2016
README.md install Nov 18, 2016
index.html move files Oct 12, 2016
index.js move files Oct 12, 2016
package.json 1.0.1 Nov 18, 2016
screenshot.png screenshot Oct 12, 2016


emoji-data-css uses emoji-data spritesheets to generate css files.


npm install emoji-data-css


Choose the emoji set

  • Apple (ap)
  • Google (gl)
  • Twitter (tw)
  • Emoji One (eo)

Choose the size (16, 20, 32, 64, all) and link in your html

<link href="path/to/emoji-data-css/files/eo-32-emoji.css" media="all" rel="stylesheet" />  
<!-- this links to "emoji one" 32x32 css -->

Now you can add emoji classes in your code

<div class="ap ap-smile"></div> <!-- apple smile emoji -->
<div class="gl gl-smile"></div> <!-- google smile emoji -->
<div class="tw tw-smile"></div> <!-- twitter smile emoji -->
<div class="eo eo-smile"></div> <!-- emoji one smile emoji -->

emoji screenshot

If you selected all the sizes file

<div class="ap-32 ap-smile"></div> <!-- apple 32x32 smile emoji in ap-all-emoji.css -->
<div class="gl-64 gl-smile"></div> <!-- google 64x64 smile emoji in gl-all-emoji.css  -->
<div class="tw-16 tw-smile"></div> <!-- twitter 16x16 smile emoji in tw-all-emoji.css -->
<div class="eo-20 eo-smile"></div> <!-- emoji one 20x20 smile emoji in eo-all-emoji.css  -->

full emoji list names

Graphics license