Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


A gatsby-transformer-remark plugin to add twitter emoji with shortcuts!✨


Install package

yarn add gatsby-remark-twemoji


npm install gatsby-remark-twemoji

Add to your gatsby-config.js

// gatsby-config.js

module.exports = {
  plugins: [
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-prismjs`, // some other remark plugins
            resolve: `gatsby-remark-twemoji-shortcut`,
            options: {
              classname: 'some_classname another_classname', // add additional classname(s) to the emoji
              style: {
                // add additional inline-styling to the emoji
                background: 'gold'
    // ...other plugins
  • The default classname is emoji (from twemoji) and will not be removed when additional classname is set.

  • The default inline styles are as twemoji suggested:

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;

The styles will be merged with default and additional (option) styles. If you pass in a css property which exists in the default, the default style would be overwritten by the additional style.


Just write emoji shortcuts in your markdown and it will be transformed into twitter emojis!

A markdown post like this:

datetime: "2018-06-21 11:00:24"
title: "Twitter Emojis!"
tags: ["emoji", "twitter", "plugin"]

Add twitter emojis with no sweat. :sunglasses::heart::tada::sparkles::1st_place_medal::+1:

This even works with plain emojis! 🌵🐦🐬

Want to skip shortcuts? Sure! Try using backslashes. \:cool\:

What if I put emojis inside a inline code? `🚆:car:🚌`

What if I put emojis inside a code block? 🙉:grinning:🙉

Get turns into this:

That’s it! 🎉


v0.10.0 release - 2018/06/18

:warning: This is currently the most stable version and I strongly recommend user using v0.9.x upgrade to this version.

  • Add feature to skip shortcuts and plain emojis from inline codes or code blocks.

Special Thanks

© 2023 Gatsby, Inc.