diff --git a/app/assets/javascripts/discourse/views/buttons/notifications_button.js b/app/assets/javascripts/discourse/views/buttons/notifications_button.js
index 825c2acbb8f..3bcd2eb0796 100644
--- a/app/assets/javascripts/discourse/views/buttons/notifications_button.js
+++ b/app/assets/javascripts/discourse/views/buttons/notifications_button.js
@@ -15,16 +15,20 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({
   isPrivateMessage: Em.computed.alias('topic.isPrivateMessage'),
   activeItem: Em.computed.alias('topic.details.notification_level'),
 
+  watchingClasses: 'fa fa-exclamation-circle watching',
+  trackingClasses: 'fa fa-circle tracking',
+  mutedClasses: 'fa fa-times-circle muted',
+
   dropDownContent: function() {
     var contents = [], postfix = '';
 
     if (this.get('isPrivateMessage')) { postfix = '_pm'; }
 
     _.each([
-      ['WATCHING', 'watching', 'fa fa-circle heatmap-high'],
-      ['TRACKING', 'tracking', 'fa fa-circle heatmap-low'],
-      ['REGULAR', 'regular', ''],
-      ['MUTED', 'muted', 'fa fa-times-circle']
+      ['WATCHING', 'watching', this.watchingClasses],
+      ['TRACKING', 'tracking', this.trackingClasses],
+      ['REGULAR', 'regular', 'tracking'],
+      ['MUTED', 'muted', this.mutedClasses]
     ], function(pair) {
 
       if (postfix === '_pm' && pair[1] === 'regular') { return; }
@@ -40,6 +44,8 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({
   }.property(),
 
   text: function() {
+    var self = this;
+
     var key = (function() {
       switch (this.get('topic.details.notification_level')) {
         case Discourse.Topic.NotificationLevel.WATCHING: return 'watching';
@@ -51,9 +57,9 @@ Discourse.NotificationsButton = Discourse.DropdownButtonView.extend({
 
     var icon = (function() {
       switch (key) {
-        case 'watching': return '<i class="fa fa-circle heatmap-high"></i>&nbsp;';
-        case 'tracking': return '<i class="fa fa-circle heatmap-low"></i>&nbsp;';
-        case 'muted': return '<i class="fa fa-times-circle"></i>&nbsp;';
+        case 'watching': return '<i class="' + self.watchingClasses + '"></i>&nbsp;';
+        case 'tracking': return '<i class="' + self.trackingClasses +  '"></i>&nbsp;';
+        case 'muted': return '<i class="' + self.mutedClasses + '"></i>&nbsp;';
         default: return '';
       }
     })();
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index eb2aa21267a..e6322e1672b 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -19,7 +19,8 @@ body {
       color: $tertiary_text_color;
     }
   }
-    .coldmap-high {
+
+  .coldmap-high {
     color: $coldmap-high !important;
   }
   .coldmap-med {
diff --git a/app/assets/stylesheets/common/base/notification-options.scss b/app/assets/stylesheets/common/base/notification-options.scss
new file mode 100644
index 00000000000..4e8b834bd70
--- /dev/null
+++ b/app/assets/stylesheets/common/base/notification-options.scss
@@ -0,0 +1,7 @@
+.fa.muted {
+  color: $notification_badge_background_color;
+}
+.fa.tracking, .fa.watching {
+  color: lighten($emphasis_text_color, 20%);
+  font-weight: normal;
+}