diff --git a/pagure/static/pagure.css b/pagure/static/pagure.css
index 2403303..88dc224 100644
--- a/pagure/static/pagure.css
+++ b/pagure/static/pagure.css
@@ -788,6 +788,10 @@ ul.changes {
     width: 50%;
 }
 
+#preview img.emojione {
+    width: initial;
+}
+
 #more_gits {
     cursor: pointer;
 }
diff --git a/pagure/templates/issue.html b/pagure/templates/issue.html
index 8aa938a..ff9c8a8 100644
--- a/pagure/templates/issue.html
+++ b/pagure/templates/issue.html
@@ -6,7 +6,9 @@
 
 {% block header %}
 <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
-  rel="stylesheet">
+  rel="stylesheet" />
+<link href="{{ url_for('static', filename='emoji/emojione.sprites.css') }}"
+  rel="stylesheet" />
 {% endblock %}
 
 {% block repo %}
@@ -151,9 +153,24 @@
   var UPLOAD_URL = "{{ url_for('upload_issue', repo=repo.name, issueid=issue.id, username=username) }}";
 </script>
 <script type="text/javascript"
+    src="{{ url_for('static', filename='emoji/jquery.textcomplete.min.js') }}">
+</script>
+<script type="text/javascript"
+    src="{{ url_for('static', filename='emoji/emojione.min.js') }}">
+</script>
+<script type="text/javascript"
   src="{{ url_for('static', filename='upload.js') }}">
 </script>
 <script type="text/javascript">
+
+var emojiStrategy;
+$.getJSON(
+  '{{ url_for("static", filename="emoji/emoji_strategy.json") }}',
+  function( data ) {
+    emojiStrategy =  data;
+  }
+);
+
 {% if authenticated and form %}
 $(document).ready(function() {
   // Set up the drag/drop zone.
@@ -163,10 +180,55 @@ $(document).ready(function() {
   $("#file-picker").on("change", function() {
     doUpload("{{ form.csrf_token.current_token }}", this.files);
   });
+
+
+  $("textarea").textcomplete([ {
+    match: /\B:([\-+\w]*)$/,
+    search: function (term, callback) {
+      var results = [];
+      var results2 = [];
+      var results3 = [];
+      $.each(emojiStrategy,function(shortname,data) {
+        if(shortname.indexOf(term) > -1) { results.push(shortname); }
+        else {
+          if((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
+            results2.push(shortname);
+          }
+          else if((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
+            results3.push(shortname);
+          }
+        }
+      });
+
+      if(term.length >= 3) {
+        results.sort(function(a,b) { return (a.length > b.length); });
+        results2.sort(function(a,b) { return (a.length > b.length); });
+        results3.sort();
+      }
+      var newResults = results.concat(results2).concat(results3);
+
+      callback(newResults);
+    },
+    template: function (shortname) {
+      return '<span class="emojione-'+emojiStrategy[shortname].unicode+'" title=":rabbit:"></span>:'+shortname+':';
+    },
+    replace: function (shortname) {
+      return ':'+shortname+': ';
+    },
+    index: 1,
+    maxCount: 10
+  }
+  ],{
+    footer: '<a href="http://www.emoji.codes" target="_blank">Browse All<span class="arrow">&raquo;</span></a>'
+  });
 });
 {% endif %}
 
 $(function() {
+  emojione.imagePathPNG = '{{url_for("static", filename="emoji/png/") }}';
+  emojione.imageType = 'png';
+  emojione.sprites = true;
+
   $( "#tabs" ).tabs();
 
   $( "#tabs" ).on('tabsactivate',
@@ -183,7 +245,7 @@ $(function() {
               },
               dataType: 'html',
               success: function(res) {
-                  $( "#preview" ).html(res);
+                  $( "#preview" ).html(emojione.toImage(res));
               },
               error: function() {
                   alert('Unable to generate preview!');
@@ -272,6 +334,13 @@ $(function() {
   $(window.onload=highlight_comment());
   $(window).on('hashchange', highlight_comment);
 
+  $(".comment_body").each(function(ind, obj) {
+    var source = $(obj).html();
+    var preview = emojione.toImage(source);
+    $(obj).html(preview);
+  });
+
 });
 </script>
+
 {% endblock %}