Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Replace CSS Modules Class selectors by Emojis.

emoji selectors

⚠️ Applies only while using CSS Modules.

The plugin will create a unique emoji combination for each CSS selector. Compatible with Official Gatsby Sass/Scss and Less plugins.


npm install --save gatsby-plugin-css-modules-emoji

How to use

Add plugin to the end of your gatsby-config.js file. If you’re using Sass/Scss or Less plugin be sure that this plugin comes after them.

module.exports = {
  plugins: [

If you want to configure the plugin, take a look at available options below:

⚠️ Any changes require the server be restarted.

// In your gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-plugin-css-modules-emoji`,
      options: {
        enableOnDevelopment: true, 
        selectorLength: 7, // min selector length is 3 emojis


  • enableOnDevelopment - allows you to disable Emoji selectors while in develop mode. The default value is true.

  • selectorLength - define selector length. The default and minimum required length is 3 emojis.

Browser support

Some of emojis filtered due to Chrome support. Were excluded:

  • Emojis that includes ZWJ (What does ZWJ stand for?)
  • Flags
  • Letter symbols
  • Other emojis that displayed incorrectly in Chrome DevTools
© 2023 Gatsby, Inc.