diff --git a/static/js/settings_display.js b/static/js/settings_display.js
index 0851a57af5..f5d5774e05 100644
--- a/static/js/settings_display.js
+++ b/static/js/settings_display.js
@@ -6,7 +6,7 @@ exports.set_up = function () {
     $("#display-settings-status").hide();
 
     $("#user_timezone").val(page_params.timezone);
-    $("#emojiset_select").val(page_params.emojiset);
+    $(".emojiset_choice[value=" + page_params.emojiset + "]").prop("checked", true);
 
     $("#default_language_modal [data-dismiss]").click(function () {
         overlays.close_modal('default_language_modal');
@@ -160,7 +160,7 @@ exports.set_up = function () {
         });
     });
 
-    $("#emojiset_select").change(function () {
+    $(".emojiset_choice").click(function () {
         var emojiset = $(this).val();
         var data = {};
         data.emojiset = JSON.stringify(emojiset);
diff --git a/static/styles/settings.css b/static/styles/settings.css
index bda550befc..4c3de5b234 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -837,6 +837,24 @@ input[type=checkbox].inline-block {
     white-space: normal;
 }
 
+.emojiset_choices {
+    padding-left: 20px;
+    width: 230px;
+}
+
+.emojiset_choices .emoji {
+    height: 22px;
+    width: 22px;
+}
+
+.emojiset_choices label {
+    line-height: 2em;
+}
+
+.emojiset_choices span {
+    float: right;
+}
+
 .open-user-form {
     min-width: initial !important;
 }
diff --git a/static/templates/settings/display-settings.handlebars b/static/templates/settings/display-settings.handlebars
index 1b2a7490af..0a6be7080c 100644
--- a/static/templates/settings/display-settings.handlebars
+++ b/static/templates/settings/display-settings.handlebars
@@ -82,13 +82,23 @@
             </div>
         </div>
 
-        <div class="input-group">
-            <label for="emojiset_select">{{t "Emoji style" }}:</label>
-            <select name="emojiset_select" id="emojiset_select">
+        <h3 class="light">Emoji settings</h3>
+        <div class="input-group side-padded-container">
+            <label>{{t "Emoji style" }}:</label>
+            <div class="emojiset_choices">
                 {{#each page_params.emojiset_choices}}
-                <option value={{@key}}>{{this}}</option>
+                <label>
+                    <input type="radio" class="emojiset_choice" name="emojiset_group" value="{{@key}}" />
+                    {{this}}
+                    <span>
+                        <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f642.png" />
+                        <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f44d.png" />
+                        <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f680.png" />
+                        <img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f4a9.png" />
+                    </span>
+                </label>
                 {{/each}}
-            </select>
+            </div>
             <div id="emojiset_spinner"></div>
         </div>
     </form>