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.


Is there a way to keep the original size of emoji images when inserting into text?
Also, are we able to create categories for emoji?

They all are resized via CSS to 20x20. So, you can override that in a custom CSS if you want.

We haven’t seen a need for custom categories yet. How many custom emojis do you have/need/use?

1 Like

Hm. I’m currently contemplating whether or not to revive my own custom Emoji-plugin or go with the Discourse system. My concrete problem is: I need to replace all Emoji. So first, I would need to be able to disable the default Emoji (there is no more “text only” option available), and next, create my own categories for my ~300 own Emoji. Would you think this is feasible at all? Plus, I need “aliases” for the Emoji: :smile: should be accessible by :smile:, and by :) and by :-) (as it is standard, but also for other emoticons as well).

I could guess that others would like to change the complete set, too - but this thread has been very quiet for the last weeks…

I would write a plugin to override the emoji settings and only allow your set. We already support “aliases” :wink:


Sorry for this time delay…

The emoji/emoticon set I’m using contains around 100 images, and right now they’re all in the custom emojis category.
However, I’m planning to use 2 or 3 more sets of emoji/emoticons with similar amounts of images, and I would really appreciate if a native support for this function in the discourse, or via a plugin, is available. This might not be a need for the majority of users, but adding this function would certainly help creating better/funnier discussions and conversations.

I’ve seen this feature in Discuz! forums and Invision forums, and I migrated my forum from Discuz! to Discourse last year. I really miss this feature, but the settings for this in Discuz! aren’t user-friendly at all. I think the more user-friendly Discourse settings could really implement this feature.

English isn’t my native language and I apologize for possible errors.

I’m not entirely clear on what you’re asking for here. Could you start a new #feature topic to explain your use case scenario?

1 Like

Are you talking about inserting some kinds of photos? e.g.

1 Like

Is this Plugin available now?

I have just used the following CSS customization to preserve the size of custom emojis:

body img.emoji-custom {
    height: inherit;
    width: inherit;

This overrides the .emoji size (but only for custom emojis) which is defined here:


For everyone interested. To customize a specific emoji this can be used too :

img.emoji[title=":youremoji:"] {
    height: 50px;
    width: 68px;

We use the following to allow our own custom shape & size emoji to be used. It 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;

How can I override the default emojis?

Isn’t that what the OP is about?

I dont understant what you say? what is OP? :sweat:
I have multi emojis and I want to change the default apple emoji with my owns. How can I do it?

OP is the original post of this topic. The one at the very top of this page.

1 Like

Thanks! this make it working my custom emojis :slight_smile:

Is there a way to customize it for the emails too? I see that the emails still receives the 20px values for the emojis

I added 2 custom emoji and i can see both of them when i publish my post.

The problem is that i cannot see my emoji in the post preview (while i am writing it) nor can i see the emoji in the emoji-selector window.



1 Like

You should do an hard refresh (CTRL+F5) of the page immediately after adding new custom emojis. In this way they should also appear when you start writing their name on the composer.


I did quite a few ctrl+f5’s. I also opened new tabs (ctrl+t) but still no dice.

I’m thinking that the problem could be that i had multiple tabs open so maybe the cache can’t be cleared until all the tabs are closed?

Sidenote: on another computer i can see the emoji both in the preview and in the emoji selector: