Configure custom emoji

(Erick Guan) #1

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

Emoji set

Discourse ship with 4 different emoji sets. They are:

  • Apple/International style
  • Google style
  • Twitter style
  • Emoji One style

You can switch them in Posting site settings or search emoji_set.

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 and drag them into Name field. Filename will be used to name the emoji.

Emoji selector and custom Emoji
Custom smileys not working
How can I add troll emoji to another community?
Can we upload emojis to discourse that aren't included in the existing set?
Retort - a reaction-style plugin for Discourse
There has got to be a way to have a scoring based on the civility of a post, rather than just popularity

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?

(Régis Hanol) #3

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?

(Joe Seyfried) #4

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…

(Régis Hanol) #5

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.

(Erlend Sogge Heggen) #7

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?

(Erick Guan) #8

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

(R.Zhang) #9

Is this Plugin available now?

(Claas Aug.) #10

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;

(David Taylor) #12

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;

(grahamtrump) #13

How can I override the default emojis?

(Christoph) #14

Isn’t that what the OP is about?

(grahamtrump) #15

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?

(Christoph) #16

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

(Elive Linux) #17

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