diff --git a/public/js/emojionearea.js b/public/js/emojionearea.js
index 1d9fb1d..9b89a05 100644
--- a/public/js/emojionearea.js
+++ b/public/js/emojionearea.js
@@ -269,6 +269,11 @@ document = window.document || {};
                     emoji: ""
                 },
 
+                custom_emoji: {
+                    icon: "yum",
+                    title: "Custom emoji",
+                    emoji: "",
+                },
                 smileys_people: {
                     icon: "yum",
                     title: "Smileys & People",
@@ -968,7 +973,7 @@ document = window.document || {};
         var mainBlock = div('category-block').attr({"data-tone": 0}).prependTo(emojisList);
 
         $.each(options.filters, function(filter, params) {
-            var skin = 0;
+            let skin = 0;
             if (filter === 'recent' && !self.recentEmojis) {
                 return;
             }
@@ -981,13 +986,13 @@ document = window.document || {};
                 .wrapInner(shortnameTo(params.icon, self.emojiTemplateAlt))
                 .appendTo(filters);
             } else if (options.tones) {
-                skin = 5;
+                skin = 6;
             } else {
                 return;
             }
 
             do {
-                var category,
+                let category,
                     items = params.emoji.replace(/[\s,;]+/g, '|');
 
                 if (skin === 0) {
@@ -1001,27 +1006,46 @@ document = window.document || {};
                         "data-tone": skin
                     }).appendTo(emojisList);
                 }
+                if( filter === "custom_emoji"){
+                    let titleTab = params.title;
+                    $.ajax({
+                        url: "https://"+$('#data_api').attr('data-instance')+"/api/v1/custom_emojis",
+                        context: document.body
+                    }).done(function(customEmoji) {
+                        for(var i = 0 ; i < customEmoji.length ; i++) {
+                            var element = $('<i class="emojibtn" role="button" data-name=":'+customEmoji[i].shortcode+':" title="'+customEmoji[i].shortcode+'"><img class="emojioneemoji" src="'+customEmoji[i].url+'" data-src="'+customEmoji[i].url+'"/></i>)');
+                            element.on('click', function () {
+                                pasteHtmlAtCaret(shortnameTo($(this).attr('data-name'), self.emojiTemplate));
+                            })
+                            category.append(element);
+                        }
 
-                if (skin > 0) {
-                    category.hide();
-                    items = items.split('|').join('_tone' + skin + '|') + '_tone' + skin;
+                        $('<div class="emojionearea-category-title"/>').text(titleTab).prependTo(category);
+                    });
+                }else {
+
+                    if (skin > 0) {
+                        category.hide();
+                        items = items.split('|').join('_tone' + skin + '|') + '_tone' + skin;
+                    }
+
+                    if (filter === 'recent') {
+                        items = getRecent();
+                    }
+
+                    items = shortnameTo(items,
+                        self.sprite ?
+                            '<i class="emojibtn" role="button" data-name="{name}" title="{friendlyName}"><i class="emojione-{uni}"></i></i>' :
+                            '<i class="emojibtn" role="button" data-name="{name}" title="{friendlyName}"><img class="emojioneemoji lazy-emoji" data-src="{img}"/></i>',
+                        true).split('|').join('');
+                    category.html(items);
+                    $('<div class="emojionearea-category-title"/>').text(params.title).prependTo(category);
                 }
-
-                if (filter === 'recent') {
-                    items = getRecent();
-                }
-
-                items = shortnameTo(items,
-                    self.sprite ?
-                        '<i class="emojibtn" role="button" data-name="{name}" title="{friendlyName}"><i class="emojione-{uni}"></i></i>' :
-                        '<i class="emojibtn" role="button" data-name="{name}" title="{friendlyName}"><img class="emojioneemoji lazy-emoji" data-src="{img}"/></i>',
-                    true).split('|').join('');
-
-                category.html(items);
-                $('<div class="emojionearea-category-title"/>').text(params.title).prependTo(category);
             } while (--skin > 0);
         });
 
+
+
         options.filters = null;
         if (!self.sprite) {
             self.lasyEmoji = emojisList.find(".lazy-emoji");