1 files changed, 19 insertions, 12 deletions

diff --git a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx
index b9f3f4262..991bf4a2d 100644
--- a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx
+++ b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx
@@ -22,22 +22,29 @@ export default class EmojiPickerPreview extends React.Component {
             let aliases;
             let previewImage;
 
-            if (emoji.aliases) {
+            if (emoji.aliases && emoji.category) {
                 // This is a system emoji which only has a list of aliases
                 name = emoji.aliases[0];
                 aliases = emoji.aliases;
-                previewImage = (<span className='sprite-preview'><img
-                    src='/static/images/img_trans.gif'
-                    className={'  emojisprite-preview emoji-' + emoji.filename + ' '}
-                                                                 /></span>);
+
+                previewImage = (
+                    <span className='sprite-preview'>
+                        <img
+                            src='/static/images/img_trans.gif'
+                            className={'emojisprite-preview emoji-category-' + emoji.category + ' emoji-' + emoji.filename}
+                        />
+                    </span>
+                );
             } else {
                 // This is a custom emoji that matches the model on the server
                 name = emoji.name;
                 aliases = [emoji.name];
-                previewImage = (<img
-                    className='emoji-picker__preview-image'
-                    src={EmojiStore.getEmojiImageUrl(emoji)}
-                                />);
+                previewImage = (
+                    <img
+                        className='emoji-picker__preview-image'
+                        src={EmojiStore.getEmojiImageUrl(emoji)}
+                    />
+                );
             }
 
             return (
@@ -47,9 +54,9 @@ export default class EmojiPickerPreview extends React.Component {
                     </div>
                     <div className='emoji-picker__preview-image-label-box'>
                         <span className='emoji-picker__preview-name'>{name}</span>
-                        <span
-                            className='emoji-picker__preview-aliases'
-                        >{ ':' + aliases[0] + ':'}</span>
+                        <span className='emoji-picker__preview-aliases'>
+                            {':' + aliases[0] + ':'}
+                        </span>
                     </div>
                 </div>
             );