diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index 257ad16d7..dde956eaa 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -103,11 +103,6 @@
   }
 }
 
-.emojione {
-  height: $font-size-medium;
-  width: $font-size-medium;
-}
-
 .conversation-wrap {
   @include background-gray;
   @include margin(0);
diff --git a/app/javascript/dashboard/assets/scss/widgets/_emojiinput.scss b/app/javascript/dashboard/assets/scss/widgets/_emojiinput.scss
deleted file mode 100644
index f4bc48e7c..000000000
--- a/app/javascript/dashboard/assets/scss/widgets/_emojiinput.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-@import '../variables';
-@import '../mixins';
-
-.emoji-dialog {
-  @include elegant-card;
-  background: $color-white;
-  box-sizing: content-box;
-  position: absolute;
-  right: 0;
-  top: -22rem;
-  width: 28.6rem;
-
-  &::before {
-    @include arrow(bottom, $color-white, $space-slab);
-    bottom: -$space-slab;
-    position: absolute;
-    right: $space-two;
-  }
-
-  .emojione {
-    font-size: $font-size-default;
-    margin: $zero;
-  }
-
-  .emoji-row {
-    box-sizing: border-box;
-    height: 180px;
-    overflow-y: auto;
-    padding: $space-small;
-
-    .emoji {
-      border-radius: 4px;
-      display: inline-block;
-      padding: 5px;
-    }
-
-    .emojione {
-      cursor: pointer;
-      float: left;
-      margin: .6rem;
-    }
-  }
-
-  .emoji-category-title {
-    color: $color-heading;
-    font-size: $font-size-small;
-    font-weight: $font-weight-medium;
-    margin: 0;
-    text-transform: capitalize;
-  }
-
-  .emoji-category-heading-decoration {
-    text-align: right;
-  }
-}
-
-.emoji-dialog-header {
-  background-color: $color-body;
-  border-top-left-radius: $space-small;
-  border-top-right-radius: $space-small;
-  padding: $zero $space-smaller;
-
-  ul {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: $space-smaller 0 0;
-
-    >li {
-      align-items: center;
-      cursor: pointer;
-      display: flex;
-      height: $space-medium;
-      justify-content: center;
-      padding: $space-smaller $space-small;
-    }
-
-    .emojione {
-      height: $space-two;
-      width: $space-normal;
-    }
-
-    >.active {
-      background: $color-white;
-      border-top-left-radius: $space-small;
-      border-top-right-radius: $space-small;
-    }
-
-    img,
-    svg {
-      filter: grayscale(100%);
-    }
-  }
-
-  .active {
-
-    img,
-    svg {
-      filter: grayscale(0);
-    }
-  }
-
-  >* {
-    display: table-cell;
-    vertical-align: middle;
-  }
-}
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 58d283acd..be6603976 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -49,7 +49,6 @@
 </template>
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import getEmojiSVG from '../emoji/utils';
 import timeMixin from '../../../mixins/time';
 import BubbleText from './bubble/Text';
 import BubbleImage from './bubble/Image';
@@ -141,9 +140,6 @@ export default {
       };
     },
   },
-  methods: {
-    getEmojiSVG,
-  },
 };
 </script>
 <style lang="scss">
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 58fdf8e58..f56d224a5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -80,14 +80,11 @@
 </template>
 
 <script>
-/* eslint no-console: 0 */
-
 import { mapGetters } from 'vuex';
-import emojione from 'emojione';
 import { mixin as clickaway } from 'vue-clickaway';
 import FileUpload from 'vue-upload-component';
 
-import EmojiInput from '../emoji/EmojiInput';
+import EmojiInput from 'shared/components/emoji/EmojiInput';
 import CannedResponse from './CannedResponse';
 import ResizableTextArea from 'shared/components/ResizableTextArea';
 import {
@@ -284,9 +281,7 @@ export default {
       this.$refs.messageInput.focus();
     },
     emojiOnClick(emoji) {
-      this.message = emojione.shortnameToUnicode(
-        `${this.message}${emoji.shortname} `
-      );
+      this.message = `${this.message}${emoji} `;
     },
     clearMessage() {
       this.message = '';
diff --git a/app/javascript/dashboard/components/widgets/emoji/EmojiInput.vue b/app/javascript/dashboard/components/widgets/emoji/EmojiInput.vue
deleted file mode 100644
index 693680281..000000000
--- a/app/javascript/dashboard/components/widgets/emoji/EmojiInput.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <div role="dialog" class="emoji-dialog">
-    <header class="emoji-dialog-header" role="menu">
-      <ul>
-        <li
-          v-for="category in categoryList"
-          :key="category.key"
-          :class="{ active: selectedKey === category.key }"
-          @click="changeCategory(category)"
-        >
-          <div
-            role="menuitem"
-            class="emojione"
-            @click="changeCategory(category)"
-            v-html="` ${getEmojiUnicode(`:${category.emoji}:`)}`"
-          ></div>
-        </li>
-      </ul>
-    </header>
-    <div class="emoji-row">
-      <h5 class="emoji-category-title">
-        {{ selectedKey }}
-      </h5>
-      <div
-        v-for="emoji in filteredSelectedEmojis"
-        :key="emoji.shortname"
-        role="menuitem"
-        class="emojione"
-        track-by="$index"
-        @click="onClick(emoji)"
-        v-html="getEmojiUnicode(emoji.shortname)"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-restricted-syntax */
-import strategy from 'emojione/emoji.json';
-import categoryList from './categories';
-import { getEmojiUnicode } from './utils';
-
-export default {
-  props: ['onClick'],
-  data() {
-    return {
-      selectedKey: 'people',
-      categoryList,
-      selectedEmojis: {},
-    };
-  },
-  computed: {
-    emojis() {
-      const emojiArr = {};
-
-      // categorise and nest emoji
-      // sort ensures that modifiers appear unmodified keys
-      const keys = Object.keys(strategy);
-      for (const key of keys) {
-        const value = strategy[key];
-
-        // skip unknown categoryList
-        if (value.category !== 'modifier') {
-          if (!emojiArr[value.category]) emojiArr[value.category] = {};
-          const match = key.match(/(.*?)_tone(.*?)$/);
-
-          if (match) {
-            // this check is to stop the plugin from failing in the case that the
-            // emoji strategy miscategorizes tones - which was the case here:
-            const unmodifiedEmojiExists = !!emojiArr[value.category][match[1]];
-            if (unmodifiedEmojiExists) {
-              emojiArr[value.category][match[1]][match[2]] = value;
-            }
-          } else {
-            emojiArr[value.category][key] = [value];
-          }
-        }
-      }
-      return emojiArr;
-    },
-    filteredSelectedEmojis() {
-      const emojis = this.selectedEmojis;
-      const filteredEmojis = Object.keys(emojis)
-        .map(key => {
-          const emoji = emojis[key];
-          const [lastEmoji] = emoji.slice(-1);
-          return { ...lastEmoji, key };
-        })
-        .filter(emoji => {
-          const { shortname } = emoji;
-          if (shortname) {
-            return this.filterEmoji(shortname);
-          }
-          return false;
-        });
-      return filteredEmojis;
-    },
-  },
-  // On mount render initial emoji
-  mounted() {
-    this.getInitialEmoji();
-  },
-  methods: {
-    // Change category and associated emojis
-    changeCategory(category) {
-      this.selectedKey = category.key;
-      this.selectedEmojis = this.emojis[this.selectedKey];
-    },
-
-    // Filter non-existant or irregular unicode characters
-    filterEmoji(shortName) {
-      return shortName !== ':relaxed:' && shortName !== ':frowning2:';
-    },
-    // Get inital emojis
-    getInitialEmoji() {
-      this.selectedEmojis = this.emojis.people;
-    },
-    getEmojiUnicode,
-  },
-};
-</script>
-<style lang="scss" scoped>
-@import '~dashboard/assets/scss/widgets/emojiinput';
-</style>
diff --git a/app/javascript/dashboard/components/widgets/emoji/categories.js b/app/javascript/dashboard/components/widgets/emoji/categories.js
deleted file mode 100644
index a6ddfec6c..000000000
--- a/app/javascript/dashboard/components/widgets/emoji/categories.js
+++ /dev/null
@@ -1,42 +0,0 @@
-export default [ // eslint-disable-line
-  {
-    key: 'people',
-    title: 'People',
-    emoji: 'smile',
-  },
-  {
-    key: 'nature',
-    title: 'Nature',
-    emoji: 'hamster',
-  },
-  {
-    key: 'food',
-    title: 'Food & Drink',
-    emoji: 'pizza',
-  },
-  {
-    key: 'activity',
-    title: 'Activity',
-    emoji: 'soccer',
-  },
-  {
-    key: 'travel',
-    title: 'Travel & Places',
-    emoji: 'earth_americas',
-  },
-  {
-    key: 'objects',
-    title: 'Objects',
-    emoji: 'bulb',
-  },
-  {
-    key: 'symbols',
-    title: 'Symbols',
-    emoji: 'clock9',
-  },
-  {
-    key: 'flags',
-    title: 'Flags',
-    emoji: 'flag_gb',
-  },
-];
diff --git a/app/javascript/dashboard/components/widgets/emoji/utils.js b/app/javascript/dashboard/components/widgets/emoji/utils.js
deleted file mode 100644
index 7a17ab4c2..000000000
--- a/app/javascript/dashboard/components/widgets/emoji/utils.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import emojione from 'emojione';
-/* eslint-disable */
-export default function (value, method = 'shortnameToImage') {
-  return emojione[method](value);
-}
-
-export function getEmojiUnicode(value) {
-  return emojione.shortnameToUnicode(value);
-}
diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
new file mode 100644
index 000000000..784eb8027
--- /dev/null
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -0,0 +1,154 @@
+<template>
+  <div role="dialog" class="emoji-dialog">
+    <header class="emoji-dialog--header" role="menu">
+      <ul>
+        <li
+          v-for="category in Object.keys(emojis)"
+          :key="category"
+          :class="{ active: selectedKey === category }"
+          @click="changeCategory(category)"
+        >
+          <button
+            class="emoji--item"
+            @click="changeCategory(category)"
+            v-html="emojis[category][0]"
+          />
+        </li>
+      </ul>
+    </header>
+    <div class="emoji--row">
+      <h5 class="emoji-category--title">
+        {{ selectedKey }}
+      </h5>
+      <button
+        v-for="emoji in emojis[selectedKey]"
+        :key="emoji"
+        class="emoji--item"
+        track-by="$index"
+        @click="onClick(emoji)"
+        v-html="emoji"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import emojis from './emojis.json';
+
+export default {
+  props: {
+    onClick: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      selectedKey: 'Smileys & Emotion',
+      emojis,
+    };
+  },
+  methods: {
+    changeCategory(category) {
+      this.selectedKey = category;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/**
+ * All the units used below are pixels due to variable name conflict in widget and dashboard
+ **/
+@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/mixins';
+
+$space-smaller: 4px;
+$space-small: 8px;
+$space-one: 10px;
+$space-slab: 12px;
+$space-normal: 16px;
+$space-two: 20px;
+$space-medium: 24px;
+
+$font-size-small: 14px;
+$font-size-default: 16px;
+$font-size-medium: 18px;
+
+.emoji-dialog {
+  @include elegant-card;
+  background: $color-white;
+  border-radius: $space-small;
+  box-sizing: content-box;
+  position: absolute;
+  right: 0;
+  top: -22 * $space-one;
+  width: 32 * $space-one;
+
+  &::before {
+    @include arrow(bottom, $color-white, $space-slab);
+    bottom: -$space-slab;
+    position: absolute;
+    right: $space-two;
+  }
+
+  .emoji--item {
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    font-size: $font-size-medium;
+    margin: 0;
+    padding: 0;
+  }
+
+  .emoji--row {
+    box-sizing: border-box;
+    height: $space-one * 18;
+    overflow-y: auto;
+    padding: $space-smaller $space-normal;
+
+    .emoji--item {
+      float: left;
+      margin: $space-smaller;
+      line-height: 1.5;
+    }
+  }
+
+  .emoji-category--title {
+    color: $color-heading;
+    font-size: $font-size-small;
+    font-weight: 500;
+    line-height: 1.5;
+    margin: 0;
+    text-transform: capitalize;
+  }
+}
+
+.emoji-dialog--header {
+  background-color: $color-body;
+  border-top-left-radius: $space-small;
+  border-top-right-radius: $space-small;
+  padding: 0 $space-smaller;
+
+  ul {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: $space-smaller 0 0;
+
+    > li {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      height: 2.4 * $space-one;
+      justify-content: center;
+      padding: $space-smaller $space-small;
+    }
+
+    > .active {
+      background: $color-white;
+      border-top-left-radius: $space-smaller;
+      border-top-right-radius: $space-smaller;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/shared/components/emoji/emojis.json b/app/javascript/shared/components/emoji/emojis.json
new file mode 100644
index 000000000..797594b04
--- /dev/null
+++ b/app/javascript/shared/components/emoji/emojis.json
@@ -0,0 +1 @@
+{"Smileys & Emotion":["😀","😃","😄","😁","😆","😅","🤣","😂","🙂","🙃","😉","😊","😇","🥰","😍","🤩","😘","😗","😚","😙","😋","😛","😜","🤪","😝","🤑","🤗","🤭","🤫","🤔","🤐","🤨","😐","😑","😶","😏","😒","🙄","😬","🤥","😌","😔","😪","🤤","😴","😷","🤒","🤕","🤢","🤮","🤧","🥵","🥶","🥴","😵","🤯","🤠","🥳","😎","🤓","🧐","😕","😟","🙁","😮","😯","😲","😳","🥺","😦","😧","😨","😰","😥","😢","😭","😱","😖","😣","😞","😓","😩","😫","🥱","😤","😡","😠","🤬","😈","👿","💀","☠️","💩","🤡","👹","👺","👻","👽","👾","🤖","😺","😸","😹","😻","😼","😽","🙀","😿","😾","🙈","🙉","🙊","💋","💌","💘","💝","💖","💗","💓","💞","💕","💟","❣️","💔","❤️","🧡","💛","💚","💙","💜","🤎","🖤","🤍","💯","💢","💥","💫","💦","💨","🕳️","🕳","💣","💬","🗨","🗯️","🗯","💭","💤"],"People & Body":["👋","🤚","🖐","✋","🖖","👌","🤏","✌️","🤞","🤟","🤘","🤙","👈","👉","👆","🖕","👇","☝️","👍","👎","✊","👊","🤛","🤜","👏","🙌","👐","🤲","🤝","🙏","✍️","💅","🤳","💪","🦾","🦿","🦵","🦶","👂","🦻","👃","🧠","🦷","🦴","👀","👁️","👁","👅","👄","👶","🧒","👦","👧","🧑","👱","👨","🧔","👩","🧓","👴","👵","🙍","🙎","🙅","🙆","💁","🙋","🧏","🙇","🤦","🤷","🧑‍⚕️","🧑‍⚕","🧑‍🎓","🧑‍🏫","🧑‍⚖️","🧑‍⚖","🧑‍🌾","🧑‍🍳","🧑‍🔧","🧑‍🏭","🧑‍💼","🧑‍🔬","🧑‍💻","🧑‍🎤","🧑‍🎨","🧑‍✈️","🧑‍✈","🧑‍🚀","🧑‍🚒","👮","🕵️","💂","👷","🤴","👸","👳","👲","🧕","🤵","👰","🤰","🤱","👼","🎅","🤶","🦸","🦹","🧙","🧚","🧛","🧜","🧝","🧞","🧟","💆","💇","🚶","🧍","🧎","🧑‍🦯","👨‍🦯","👩‍🦯","🧑‍🦼","👨‍🦼","👩‍🦼","🧑‍🦽","👨‍🦽","👩‍🦽","🏃","💃","🕺","🕴️","👯","🧖","🧗","🤺","🏇","⛷️","🏂","🏌️","🏄","🚣","🏊","⛹️","⛹","🏋️","🏋","🚴","🚵","🤸","🤼","🤽","🤾","🤹","🧘","🛀","🛌","👭","👫","👬","💏","💑","👪","🗣️","🗣","👤","👥","👣"],"Animals & Nature":["🐵","🐒","🦍","🦧","🐶","🐕","🦮","🐕‍🦺","🐩","🐺","🦊","🦝","🐱","🐈","🦁","🐯","🐅","🐆","🐴","🐎","🦄","🦓","🦌","🐮","🐂","🐃","🐄","🐷","🐖","🐗","🐽","🐏","🐑","🐐","🐪","🐫","🦙","🦒","🐘","🦏","🦛","🐭","🐁","🐀","🐹","🐰","🐇","🐿️","🐿","🦔","🦇","🐻","🐻‍❄️","🐨","🐼","🦥","🦦","🦨","🦘","🦡","🐾","🦃","🐔","🐓","🐣","🐤","🐥","🐦","🐧","🕊️","🕊","🦅","🦆","🦢","🦉","🦩","🦚","🦜","🐸","🐊","🐢","🦎","🐍","🐲","🐉","🦕","🦖","🐳","🐋","🐬","🐟","🐠","🐡","🦈","🐙","🐚","🐌","🦋","🐛","🐜","🐝","🐞","🦗","🕷️","🕷","🕸️","🕸","🦂","🦟","🦠","💐","🌸","💮","🏵️","🏵","🌹","🥀","🌺","🌻","🌼","🌷","🌱","🌲","🌳","🌴","🌵","🌾","🌿","☘️","☘","🍀","🍁","🍂","🍃"],"Food & Drink":["🍇","🍈","🍉","🍊","🍋","🍌","🍍","🥭","🍎","🍏","🍐","🍑","🍒","🍓","🥝","🍅","🥥","🥑","🍆","🥔","🥕","🌽","🌶️","🌶","🥒","🥬","🥦","🧄","🧅","🍄","🥜","🌰","🍞","🥐","🥖","🥨","🥯","🥞","🧇","🧀","🍖","🍗","🥩","🥓","🍔","🍟","🍕","🌭","🥪","🌮","🌯","🥙","🧆","🥚","🍳","🥘","🍲","🥣","🥗","🍿","🧈","🧂","🥫","🍱","🍘","🍙","🍚","🍛","🍜","🍝","🍠","🍢","🍣","🍤","🍥","🥮","🍡","🥟","🥠","🥡","🦀","🦞","🦐","🦑","🦪","🍦","🍧","🍨","🍩","🍪","🎂","🍰","🧁","🥧","🍫","🍬","🍭","🍮","🍯","🍼","🥛","☕","🍵","🍶","🍾","🍷","🍸","🍹","🍺","🍻","🥂","🥃","🥤","🧃","🧉","🧊","🥢","🍽","🍴","🥄","🔪","🏺"],"Travel & Places":["🌍","🌎","🌏","🌐","🗺️","🗾","🧭","🏔️","⛰️","🌋","🗻","🏕️","🏖️","🏜️","🏝️","🏞️","🏟️","🏛️","🏗️","🧱","🏘️","🏚️","🏠","🏡","🏢","🏣","🏤","🏥","🏦","🏨","🏩","🏪","🏫","🏬","🏭","🏯","🏰","💒","🗼","🗽","⛪","🕌","🛕","🕍","⛩️","⛩","🕋","⛲","⛺","🌁","🌃","🏙️","🏙","🌄","🌅","🌆","🌇","🌉","♨️","🎠","🎡","🎢","💈","🎪","🚂","🚃","🚄","🚅","🚆","🚇","🚈","🚉","🚊","🚝","🚞","🚋","🚌","🚍","🚎","🚐","🚑","🚒","🚓","🚔","🚕","🚖","🚗","🚘","🚙","🚚","🚛","🚜","🏎️","🏎","🏍️","🏍","🛵","🦽","🦼","🛺","🚲","🛴","🛹","🚏","🛣️","🛣","🛤️","🛤","🛢️","🛢","⛽","🚨","🚥","🚦","🛑","🚧","⚓","⛵","🛶","🚤","🛳️","🛳","⛴️","⛴","🛥️","🛥","🚢","✈️","🛩️","🛩","🛫","🛬","🪂","💺","🚁","🚟","🚠","🚡","🛰️","🛰","🚀","🛸","🛎️","🛎","🧳","⌛","⏳","⌚","⏰","⏱️","⏱","⏲️","⏲","🕰️","🕰","🕛","🕧","🕐","🕜","🕑","🕝","🕒","🕞","🕓","🕟","🕔","🕠","🕕","🕡","🕖","🕢","🕗","🕣","🕘","🕤","🕙","🕥","🕚","🕦","🌑","🌒","🌓","🌔","🌕","🌖","🌗","🌘","🌙","🌚","🌛","🌜","🌡️","🌡","☀️","🌝","🌞","🪐","⭐","🌟","🌠","🌌","☁️","⛅","⛈️","⛈","🌤️","🌤","🌥️","🌥","🌦️","🌦","🌧️","🌧","🌨️","🌨","🌩️","🌩","🌪️","🌪","🌫️","🌫","🌬️","🌬","🌀","🌈","🌂","☂️","☔","⛱️","⛱","⚡","❄️","☃️","☄️","🔥","💧","🌊"],"Activities":["🎃","🎄","🎆","🎇","🧨","✨","🎈","🎉","🎊","🎋","🎍","🎎","🎏","🎐","🎑","🧧","🎀","🎁","🎗️","🎗","🎟️","🎟","🎫","🎖️","🎖","🏆","🏅","🥇","🥈","🥉","⚽","⚾","🥎","🏀","🏐","🏈","🏉","🎾","🥏","🎳","🏏","🏑","🏒","🥍","🏓","🏸","🥊","🥋","🥅","⛳","⛸️","⛸","🎣","🤿","🎽","🎿","🛷","🥌","🎯","🪀","🪁","🎱","🔮","🧿","🎮","🕹️","🎰","🎲","🧩","🧸","♟️","🃏","🀄","🎴","🎭","🖼️","🎨","🧵","🧶"],"Objects":["👓","🕶️","🕶","🥽","🥼","🦺","👔","👕","👖","🧣","🧤","🧥","🧦","👗","👘","🥻","🩱","🩲","🩳","👙","👚","👛","👜","👝","🛍️","🛍","🎒","👞","👟","🥾","🥿","👠","👡","🩰","👢","👑","👒","🎩","🎓","🧢","⛑️","⛑","📿","💄","💍","💎","🔇","🔈","🔉","🔊","📢","📣","📯","🔔","🔕","🎼","🎵","🎶","🎙️","🎙","🎚️","🎚","🎛️","🎛","🎤","🎧","📻","🎷","🎸","🎹","🎺","🎻","🪕","🥁","📱","📲","☎️","☎","📞","📟","📠","🔋","🔌","💻","🖥️","🖥","🖨️","🖨","⌨️","🖱️","🖱","🖲️","🖲","💽","💾","💿","📀","🧮","🎥","🎞️","🎞","📽️","📽","🎬","📺","📷","📸","📹","📼","🔍","🔎","🕯️","🕯","💡","🔦","🏮","🪔","📔","📕","📖","📗","📘","📙","📚","📓","📒","📃","📜","📄","📰","🗞️","🗞","📑","🔖","🏷️","🏷","💰","💴","💵","💶","💷","💸","💳","🧾","💹","✉️","📧","📨","📩","📤","📥","📦","📫","📪","📬","📭","📮","🗳️","🗳","✏️","✒️","✒","🖋️","🖋","🖊️","🖊","🖌️","🖌","🖍️","🖍","📝","💼","📁","📂","🗂️","🗂","📅","📆","🗒️","🗒","🗓️","🗓","📇","📈","📉","📊","📋","📌","📍","📎","🖇️","🖇","📏","📐","✂️","✂","🗃️","🗃","🗄️","🗄","🗑️","🗑","🔒","🔓","🔏","🔐","🔑","🗝️","🗝","🔨","🪓","⛏️","⛏","⚒️","🛠️","🛠","🗡️","🗡","⚔️","🔫","🏹","🛡️","🛡","🔧","🔩","⚙️","🗜️","🗜","⚖️","🦯","🔗","⛓️","⛓","🧰","🧲","⚗️","⚗","🧪","🧫","🧬","🔬","🔭","📡","💉","🩸","💊","🩹","🩺","🚪","🛏️","🛋","🪑","🚽","🚿","🛁","🪒","🧴","🧷","🧹","🧺","🧻","🧼","🧽","🧯","🛒","🚬","⚰️","⚱️","🗿"],"Symbols":["🏧","🚮","🚰","♿","🚹","🚺","🚻","🚼","🚾","🛂","🛃","🛄","🛅","⚠️","🚸","⛔","🚫","🚳","🚭","🚯","🚱","🚷","📵","🔞","☢️","☣️","⬆️","↗️","➡️","↘️","⬇️","↙️","⬅️","↖️","↩️","↪️","⤴️","⤵️","🔃","🔄","🔙","🔚","🔛","🔜","🔝","🛐","⚛️","🕉️","🕉","✡️","☸️","☯️","✝️","☦️","☪️","☮️","🕎","🔯","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓","⛎","🔀","🔁","🔂","▶️","⏩","⏭️","⏭","⏯️","⏯","◀️","⏪","⏮️","⏮","🔼","⏫","🔽","⏬","⏸️","⏸","⏹️","⏹","⏺️","⏺","⏏️","🎦","🔅","🔆","📶","📳","📴","✖️","➕","➖","➗","♾️","❓","❗","♻️","♻","⚜️","🔱","📛","🔰","⭕","✅","☑️","✔️","❌","❎","➰","➿","✳️","✴️","❇️","©","™️","🔟","🔠","🔡","🔢","🔣","🔤","🅰️","🅰","🆎","🅱️","🅱","🆑","🆒","🆓","ℹ️","ℹ","🆔","Ⓜ️","Ⓜ","🆕","🆖","🅾️","🅾","🆗","🅿️","🅿","🆘","🆙","🆚","🈁","🈂️","🈂","🈷️","🈷","🈶","🈯","🉐","🈹","🈚","🈲","🉑","🈸","🈴","🈳","㊗️","㊗","㊙️","㊙","🈺","🈵","🔴","🟠","🟡","🟢","🔵","🟣","🟤","⚫","⚪","🟥","🟧","🟨","🟩","🟦","🟪","🟫","⬛","⬜","◼️","◼","◻️","◻","◾","◽","▪️","▪","▫️","▫","🔶","🔷","🔸","🔹","🔺","🔻","💠","🔘","🔳","🔲"],"Flags":["🏁","🚩","🎌","🏴","🏳️","🇦🇨","🇦🇩","🇦🇪","🇦🇫","🇦🇬","🇦🇮","🇦🇱","🇦🇲","🇦🇴","🇦🇶","🇦🇷","🇦🇸","🇦🇹","🇦🇺","🇦🇼","🇦🇽","🇦🇿","🇧🇦","🇧🇧","🇧🇩","🇧🇪","🇧🇫","🇧🇬","🇧🇭","🇧🇮","🇧🇯","🇧🇱","🇧🇲","🇧🇳","🇧🇴","🇧🇶","🇧🇷","🇧🇸","🇧🇹","🇧🇻","🇧🇼","🇧🇾","🇧🇿","🇨🇦","🇨🇨","🇨🇩","🇨🇫","🇨🇬","🇨🇭","🇨🇮","🇨🇰","🇨🇱","🇨🇲","🇨🇳","🇨🇴","🇨🇵","🇨🇷","🇨🇺","🇨🇻","🇨🇼","🇨🇽","🇨🇾","🇨🇿","🇩🇪","🇩🇬","🇩🇯","🇩🇰","🇩🇲","🇩🇴","🇩🇿","🇪🇦","🇪🇨","🇪🇪","🇪🇬","🇪🇭","🇪🇷","🇪🇸","🇪🇹","🇪🇺","🇫🇮","🇫🇯","🇫🇰","🇫🇲","🇫🇴","🇫🇷","🇬🇦","🇬🇧","🇬🇩","🇬🇪","🇬🇫","🇬🇬","🇬🇭","🇬🇮","🇬🇱","🇬🇲","🇬🇳","🇬🇵","🇬🇶","🇬🇷","🇬🇸","🇬🇹","🇬🇺","🇬🇼","🇬🇾","🇭🇰","🇭🇲","🇭🇳","🇭🇷","🇭🇹","🇭🇺","🇮🇨","🇮🇩","🇮🇪","🇮🇱","🇮🇲","🇮🇳","🇮🇴","🇮🇶","🇮🇷","🇮🇸","🇮🇹","🇯🇪","🇯🇲","🇯🇴","🇯🇵","🇰🇪","🇰🇬","🇰🇭","🇰🇮","🇰🇲","🇰🇳","🇰🇵","🇰🇷","🇰🇼","🇰🇾","🇰🇿","🇱🇦","🇱🇧","🇱🇨","🇱🇮","🇱🇰","🇱🇷","🇱🇸","🇱🇹","🇱🇺","🇱🇻","🇱🇾","🇲🇦","🇲🇨","🇲🇩","🇲🇪","🇲🇫","🇲🇬","🇲🇭","🇲🇰","🇲🇱","🇲🇲","🇲🇳","🇲🇴","🇲🇵","🇲🇶","🇲🇷","🇲🇸","🇲🇹","🇲🇺","🇲🇻","🇲🇼","🇲🇽","🇲🇾","🇲🇿","🇳🇦","🇳🇨","🇳🇪","🇳🇫","🇳🇬","🇳🇮","🇳🇱","🇳🇴","🇳🇵","🇳🇷","🇳🇺","🇳🇿","🇴🇲","🇵🇦","🇵🇪","🇵🇫","🇵🇬","🇵🇭","🇵🇰","🇵🇱","🇵🇲","🇵🇳","🇵🇷","🇵🇸","🇵🇹","🇵🇼","🇵🇾","🇶🇦","🇷🇪","🇷🇴","🇷🇸","🇷🇺","🇷🇼","🇸🇦","🇸🇧","🇸🇨","🇸🇩","🇸🇪","🇸🇬","🇸🇭","🇸🇮","🇸🇯","🇸🇰","🇸🇱","🇸🇲","🇸🇳","🇸🇴","🇸🇷","🇸🇸","🇸🇹","🇸🇻","🇸🇽","🇸🇾","🇸🇿","🇹🇦","🇹🇨","🇹🇩","🇹🇫","🇹🇬","🇹🇭","🇹🇯","🇹🇰","🇹🇱","🇹🇲","🇹🇳","🇹🇴","🇹🇷","🇹🇹","🇹🇻","🇹🇼","🇹🇿","🇺🇦","🇺🇬","🇺🇲","🇺🇳","🇺🇸","🇺🇾","🇺🇿","🇻🇦","🇻🇨","🇻🇪","🇻🇬","🇻🇮","🇻🇳","🇻🇺","🇼🇫","🇼🇸","🇽🇰","🇾🇪","🇾🇹","🇿🇦","🇿🇲","🇿🇼","🏴󠁧󠁢󠁥󠁮󠁧󠁿","🏴󠁧󠁢󠁳󠁣󠁴󠁿","🏴󠁧󠁢󠁷󠁬󠁳󠁿"]}
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index aeae3366e..53bf55328 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -34,12 +34,11 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import emojione from 'emojione';
 import { mixin as clickaway } from 'vue-clickaway';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea';
-import EmojiInput from 'dashboard/components/widgets/emoji/EmojiInput';
+import EmojiInput from 'shared/components/emoji/EmojiInput';
 import configMixin from '../mixins/configMixin';
 
 export default {
@@ -110,11 +109,8 @@ export default {
       }
     },
     emojiOnClick(emoji) {
-      this.userInput = emojione.shortnameToUnicode(
-        `${this.userInput}${emoji.shortname} `
-      );
+      this.userInput = `${this.userInput}${emoji} `;
     },
-
     onBlur() {
       this.toggleTyping('off');
     },
diff --git a/package.json b/package.json
index 68ea85738..9c9e3056c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "copy-text-to-clipboard": "^2.1.1",
     "core-js": "3",
     "dotenv": "^8.0.0",
-    "emojione": "~2.2.7",
     "foundation-sites": "~6.5.3",
     "highlight.js": "^9.15.10",
     "ionicons": "~2.0.1",
diff --git a/yarn.lock b/yarn.lock
index e876d347a..99c7cbf3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3857,11 +3857,6 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emojione@~2.2.7:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/emojione/-/emojione-2.2.7.tgz#46457cf6b9b2f8da13ae8a2e4e547de06ee15e96"
-  integrity sha1-RkV89rmy+NoTroouTlR94G7hXpY=
-
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"