diff --git a/app/assets/javascripts/discourse/widgets/custom-notification-item.js.es6 b/app/assets/javascripts/discourse/widgets/custom-notification-item.js.es6
new file mode 100644
index 00000000000..7eebb36bc89
--- /dev/null
+++ b/app/assets/javascripts/discourse/widgets/custom-notification-item.js.es6
@@ -0,0 +1,24 @@
+import { createWidgetFrom } from "discourse/widgets/widget";
+import { DefaultNotificationItem } from "discourse/widgets/default-notification-item";
+import { formatUsername } from "discourse/lib/utilities";
+import { iconNode } from "discourse-common/lib/icon-library";
+
+createWidgetFrom(DefaultNotificationItem, "custom-notification-item", {
+  title(notificationName, data) {
+    return data.title ? I18n.t(data.title) : "";
+  },
+
+  text(notificationType, notificationName) {
+    const { attrs } = this;
+    const data = attrs.data;
+
+    const username = formatUsername(data.display_username);
+    const description = this.description();
+
+    return I18n.t(data.message, { description, username });
+  },
+
+  icon(notificationName, data) {
+    return iconNode(`notification.${data.message}`);
+  }
+});
diff --git a/app/assets/javascripts/discourse/widgets/default-notification-item.js.es6 b/app/assets/javascripts/discourse/widgets/default-notification-item.js.es6
index 17e17c8c53c..6c96b9fe879 100644
--- a/app/assets/javascripts/discourse/widgets/default-notification-item.js.es6
+++ b/app/assets/javascripts/discourse/widgets/default-notification-item.js.es6
@@ -109,28 +109,20 @@ export const DefaultNotificationItem =
     text(notificationType, notificationName) {
       const { attrs } = this;
       const data = attrs.data;
-      const scope =
-        notificationName === "custom" ? data.message : `notifications.${notificationName}`;
 
       const username = formatUsername(data.display_username);
       const description = this.description();
 
-      return I18n.t(scope, { description, username });
+      return I18n.t(`notifications.${notificationName}`, { description, username });
     },
 
     icon(notificationName, data) {
-      let infoKey =
-        notificationName === "custom" ? data.message : notificationName;
-      return iconNode(`notification.${infoKey}`);
+      return iconNode(`notification.${notificationName}`);
     },
 
     title(notificationName, data) {
       if (notificationName) {
-        if (notificationName === "custom") {
-          return data.title ? I18n.t(data.title) : "";
-        } else {
-          return I18n.t(`notifications.titles.${notificationName}`);
-        }
+        return I18n.t(`notifications.titles.${notificationName}`);
       } else {
         return "";
       }