diff --git a/app/assets/javascripts/discourse/helpers/bound-avatar.js.es6 b/app/assets/javascripts/discourse/helpers/bound-avatar.js.es6
index 43cea519d48..a284fb36714 100644
--- a/app/assets/javascripts/discourse/helpers/bound-avatar.js.es6
+++ b/app/assets/javascripts/discourse/helpers/bound-avatar.js.es6
@@ -1,17 +1,12 @@
 import { htmlHelper } from 'discourse-common/lib/helpers';
 import { avatarImg } from 'discourse/lib/utilities';
-import { classesForUser } from 'discourse/helpers/user-avatar';
+import { addExtraUserClasses } from 'discourse/helpers/user-avatar';
 
 export default htmlHelper((user, size) => {
   if (Ember.isEmpty(user)) {
     return "<div class='avatar-placeholder'></div>";
   }
 
-  const avatarTemplate = Em.get(user, 'avatar_template');
-  let args = { size, avatarTemplate };
-  let extraClasses = classesForUser(user).join(' ');
-  if (extraClasses && extraClasses.length) {
-    args.extraClasses = extraClasses;
-  }
-  return avatarImg(args);
+  const avatarTemplate = Ember.get(user, 'avatar_template');
+  return avatarImg(addExtraUserClasses(user, { size, avatarTemplate }));
 });
diff --git a/app/assets/javascripts/discourse/helpers/user-avatar.js.es6 b/app/assets/javascripts/discourse/helpers/user-avatar.js.es6
index 8054631dfab..e20528bd427 100644
--- a/app/assets/javascripts/discourse/helpers/user-avatar.js.es6
+++ b/app/assets/javascripts/discourse/helpers/user-avatar.js.es6
@@ -8,6 +8,14 @@ export function registerCustomAvatarHelper(fn) {
   _customAvatarHelpers.push(fn);
 }
 
+export function addExtraUserClasses(u, args) {
+  let extraClasses = classesForUser(u).join(' ');
+  if (extraClasses && extraClasses.length) {
+    args.extraClasses = extraClasses;
+  }
+  return args;
+}
+
 export function classesForUser(u) {
   let result = [];
   if (_customAvatarHelpers) {
diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6
index db166e66596..0cfc0419148 100644
--- a/app/assets/javascripts/discourse/widgets/header.js.es6
+++ b/app/assets/javascripts/discourse/widgets/header.js.es6
@@ -5,6 +5,7 @@ import DiscourseURL from 'discourse/lib/url';
 import { wantsNewWindow } from 'discourse/lib/intercept-click';
 import { applySearchAutocomplete } from "discourse/lib/search";
 import { ajax } from 'discourse/lib/ajax';
+import { addExtraUserClasses } from 'discourse/helpers/user-avatar';
 
 import { h } from 'virtual-dom';
 
@@ -30,10 +31,12 @@ createWidget('header-notifications', {
   html(attrs) {
     const { user } = attrs;
 
-    const contents = [ avatarImg(this.settings.avatarSize, {
-      template: user.get('avatar_template'),
-      username: user.get('username')
-    }) ];
+    const contents = [
+      avatarImg(this.settings.avatarSize, addExtraUserClasses(user, {
+        template: user.get('avatar_template'),
+        username: user.get('username')
+      }))
+    ];
 
     const unreadNotifications = user.get('unread_notifications');
     if (!!unreadNotifications) {
diff --git a/app/assets/javascripts/discourse/widgets/post.js.es6 b/app/assets/javascripts/discourse/widgets/post.js.es6
index 29618627e69..887493fd45e 100644
--- a/app/assets/javascripts/discourse/widgets/post.js.es6
+++ b/app/assets/javascripts/discourse/widgets/post.js.es6
@@ -17,9 +17,13 @@ export function avatarImg(wanted, attrs) {
   if (!url || url.length === 0) { return; }
   const title = formatUsername(attrs.username);
 
+  let className = 'avatar' + (
+    attrs.extraClasses ? " " + attrs.extraClasses : ""
+  );
+
   const properties = {
     attributes: { alt: '', width: size, height: size, src: Discourse.getURLWithCDN(url), title },
-    className: 'avatar'
+    className
   };
 
   return h('img', properties);