diff --git a/app/assets/javascripts/admin/templates/badges.js.handlebars b/app/assets/javascripts/admin/templates/badges.js.handlebars
index 1f27dc71675..57d7ae71008 100644
--- a/app/assets/javascripts/admin/templates/badges.js.handlebars
+++ b/app/assets/javascripts/admin/templates/badges.js.handlebars
@@ -6,7 +6,10 @@
       {{#each}}
       <li>
         <a {{action selectBadge this}} {{bind-attr class="selected:active"}}>
+        <span {{bind-attr class=":user-badge badgeTypeClassName" data-badge-name="name" title="displayDescription"}}>
+          <i {{bind-attr class=":fa icon"}}></i>
           {{displayName}}
+        </span>
           {{#if newBadge}}
             <span class="list-badge">{{i18n filters.new.lower_title}}</span>
           {{/if}}
diff --git a/app/assets/javascripts/discourse/components/user-badge.js.es6 b/app/assets/javascripts/discourse/components/user-badge.js.es6
index 0c616cc12fe..b741620a4d5 100644
--- a/app/assets/javascripts/discourse/components/user-badge.js.es6
+++ b/app/assets/javascripts/discourse/components/user-badge.js.es6
@@ -1,10 +1,6 @@
 export default Ember.Component.extend({
   tagName: 'span',
 
-  badgeTypeClassName: function() {
-    return "badge-type-" + this.get('badge.badge_type.name').toLowerCase();
-  }.property('badge.badge_type.name'),
-
   showGrantCount: function() {
     return this.get('count') && this.get('count') > 1;
   }.property('count'),
diff --git a/app/assets/javascripts/discourse/models/badge.js b/app/assets/javascripts/discourse/models/badge.js
index 7d87a31e4fb..2a4efe640ac 100644
--- a/app/assets/javascripts/discourse/models/badge.js
+++ b/app/assets/javascripts/discourse/models/badge.js
@@ -99,6 +99,10 @@ Discourse.Badge = Discourse.Model.extend({
     }
   },
 
+  badgeTypeClassName: function() {
+    return "badge-type-" + this.get('badge_type.name').toLowerCase();
+  }.property('badge_type.name'),
+
   /**
     Save and update the badge from the server's response.
 
diff --git a/app/assets/javascripts/discourse/templates/components/user-badge.js.handlebars b/app/assets/javascripts/discourse/templates/components/user-badge.js.handlebars
index e62a8f762d0..9d084d9c5fe 100644
--- a/app/assets/javascripts/discourse/templates/components/user-badge.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/components/user-badge.js.handlebars
@@ -1,5 +1,5 @@
 {{#link-to 'badges.show' badge}}
-  <span {{bind-attr class=":user-badge badgeTypeClassName" data-badge-name="badge.name" title="badge.displayDescription"}}>
+  <span {{bind-attr class=":user-badge badge.badgeTypeClassName" data-badge-name="badge.name" title="badge.displayDescription"}}>
     {{#if isIcon}}
       <i {{bind-attr class=":fa badge.icon"}}></i>
     {{else}}