diff --git a/app/assets/javascripts/pretty-text/emoji.js.es6 b/app/assets/javascripts/pretty-text/emoji.js.es6
index 786c31d031a..fe68c164225 100644
--- a/app/assets/javascripts/pretty-text/emoji.js.es6
+++ b/app/assets/javascripts/pretty-text/emoji.js.es6
@@ -35,15 +35,20 @@ export function performEmojiUnescape(string, opts) {
       const emojiVal = isEmoticon ? translations[m] : m.slice(1, m.length - 1);
       const hasEndingColon = m.lastIndexOf(":") === m.length - 1;
       const url = buildEmojiUrl(emojiVal, opts);
+      const classes = isCustomEmoji(emojiVal) ? "emoji emoji-custom" : "emoji";
 
       return url && (isEmoticon || hasEndingColon) ?
-             `<img src='${url}' title='${emojiVal}' alt='${emojiVal}' class='emoji'>` : m;
+             `<img src='${url}' title='${emojiVal}' alt='${emojiVal}' class='${classes}'>` : m;
     });
   }
 
   return string;
 }
 
+export function isCustomEmoji(code) {
+  return extendedEmoji.hasOwnProperty(code.toLowerCase());
+}
+
 export function buildEmojiUrl(code, opts) {
   let url;
   code = code.toLowerCase();
diff --git a/app/assets/javascripts/pretty-text/engines/discourse-markdown/emoji.js.es6 b/app/assets/javascripts/pretty-text/engines/discourse-markdown/emoji.js.es6
index 167209cd471..37d518928bb 100644
--- a/app/assets/javascripts/pretty-text/engines/discourse-markdown/emoji.js.es6
+++ b/app/assets/javascripts/pretty-text/engines/discourse-markdown/emoji.js.es6
@@ -1,5 +1,5 @@
 import { registerOption } from 'pretty-text/pretty-text';
-import { buildEmojiUrl } from 'pretty-text/emoji';
+import { buildEmojiUrl, isCustomEmoji } from 'pretty-text/emoji';
 import { translations } from 'pretty-text/emoji/data';
 
 let _unicodeReplacements;
@@ -38,10 +38,12 @@ export function setup(helper) {
 
   function imageFor(code) {
     code = code.toLowerCase();
-    const url = buildEmojiUrl(code, helper.getOptions());
+    const options = helper.getOptions();
+    const url = buildEmojiUrl(code, options);
     if (url) {
       const title = `:${code}:`;
-      return ['img', { href: url, title, 'class': 'emoji', alt: title }];
+      const classes = isCustomEmoji(code) ? "emoji emoji-custom" : "emoji";
+      return ['img', { href: url, title, 'class': classes, alt: title }];
     }
   }
 
diff --git a/lib/pretty_text.rb b/lib/pretty_text.rb
index 691ff158b5b..d3d6d4ed422 100644
--- a/lib/pretty_text.rb
+++ b/lib/pretty_text.rb
@@ -154,7 +154,10 @@ module PrettyText
       context.eval("__optInput.mentionLookup = __mentionLookup;")
 
       custom_emoji = {}
-      Emoji.custom.map {|e| custom_emoji[e.name] = e.url}
+      Emoji.custom.map do |e|
+        context.eval("__registerEmoji('#{e.name}', '#{e.url}')")
+        custom_emoji[e.name] = e.url
+      end
       context.eval("__optInput.customEmoji = #{custom_emoji.to_json};")
 
       context.eval('__textOptions = __buildOptions(__optInput);')
diff --git a/lib/pretty_text/shims.js b/lib/pretty_text/shims.js
index c156fdb0cd7..ae4803534c3 100644
--- a/lib/pretty_text/shims.js
+++ b/lib/pretty_text/shims.js
@@ -1,6 +1,7 @@
 __PrettyText = require('pretty-text/pretty-text').default;
 __buildOptions = require('pretty-text/pretty-text').buildOptions;
 __performEmojiUnescape = require('pretty-text/emoji').performEmojiUnescape;
+__registerEmoji = require('pretty-text/emoji').registerEmoji;
 
 __utils = require('discourse/lib/utilities');
 __setUnicode = require('pretty-text/engines/discourse-markdown/emoji').setUnicodeReplacements;