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 dceafcda789..e62a8f762d0 100644
--- a/app/assets/javascripts/discourse/templates/components/user-badge.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/components/user-badge.js.handlebars
@@ -2,6 +2,8 @@
   <span {{bind-attr class=":user-badge badgeTypeClassName" data-badge-name="badge.name" title="badge.displayDescription"}}>
     {{#if isIcon}}
       <i {{bind-attr class=":fa badge.icon"}}></i>
+    {{else}}
+      <img {{bind-attr src="badge.icon"}}>
     {{/if}}
     {{badge.displayName}}
     {{#if showGrantCount}}
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 15683b6d09d..39175c13a1b 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -16,6 +16,11 @@
     vertical-align: bottom;
   }
 
+  img {
+    height: 16px;
+    width: 16px;
+  }
+
   &.badge-type-gold .fa {
     color: #ffd700;
   }
@@ -46,6 +51,12 @@
       margin-bottom: 5px;
     }
 
+    img {
+      display: inline-block;
+      width: 55px;
+      height: 55px;
+    }
+
     .count {
       display: block;
       font-size: 0.8em;