Configure custom emoji

Willing to change emojis for your Discourse? Here we go.

Emoji set

Discourse ship with 7 different emoji sets. They are:

  • Apple/International style
  • Google style
  • Twitter style
  • Emoji One style
  • Win10 style
  • Google Classic
  • Facebook Messanger

You can choose the style running (or re-running) the first time wizard or do it via site settings, how many emoji to allow within the topic titles, the number of minimum characters required for auto-completion, to enable or disable shortcuts and translation for inline emojis. Just search for emoji in your site settings.

Customize emojis

It’s also possible to add some emoji for your Discourse site. You can upload emojis to override the default too.

Go to: Discourse Admin - Customize - Emoji.

You can:

  • Enter a name and click Add New Emoji to select a photo as a emoji.
  • Or select multiple files (max 10 at once) and drag them into Name field. Filename will be used to name the emoji.

Resize Custom Emojis

By default all emojis are resized via CSS to 20x20, but this can be overridden with custom CSS.

We recommend using the following to allow custom shape & size emoji to be used. This makes sure they have the correct aspect ratio everywhere, and have their native size whenever they are used in post bodies.

/* Make emojis normal size (don't force square) */

div.topic-post img.emoji[src*="uploads"] { /* All posts */
  width: auto;
  height: auto;
}

div.d-editor-preview img.emoji[src*="uploads"] { /* Editor preview box */
  width: auto;
  height: auto;
}

div.emoji-modal img.emoji[src*="uploads"] { /* Emoji chooser popup */
  height: auto;
}

div.d-editor-textarea-wrapper img.emoji[src*="uploads"] { /* Autocomplete in editor */
  width: auto;
}

div.title-wrapper img.emoji[src*="uploads"] { /* Post titles */
    width: auto;
}

td.main-link img.emoji[src*="uploads"] { /* Post titles in menus */
    width: auto;
}

You can also customize a specific emoji to a certain size by using the following, where XX and YY are the dimensions you would like the emoji to be:

img.emoji[title=":youremoji:"] {
    height: XXpx;
    width: YYpx;
}

Last Reviewed by @SaraDev on 2022-05-24T20:00:00Z

24 Likes