diff --git a/extension.json b/extension.json
index df7f661a3..0550431e5 100644
--- a/extension.json
+++ b/extension.json
@@ -317,7 +317,8 @@
 			},
 			"styles": [
 				"mobile/overlay.less",
-				"mobile/notificationsFilterOverlay.less"
+				"mobile/notificationsFilterOverlay.less",
+				"mobile/NotificationBadge.less"
 			],
 			"messages": [
 				"notifications",
diff --git a/modules/mobile/NotificationBadge.js b/modules/mobile/NotificationBadge.js
index 002a8a80e..2007f5bfb 100644
--- a/modules/mobile/NotificationBadge.js
+++ b/modules/mobile/NotificationBadge.js
@@ -3,9 +3,9 @@ var
 	View = mobile.View,
 	IconButton = mobile.IconButton,
 	notificationIconButton = new IconButton( {
-		icon: 'bellOutline-base20',
+		icon: 'bellOutline-subtle',
 		tagName: 'a',
-		glyphPrefix: 'wikimedia'
+		glyphPrefix: 'echo'
 	} );
 
 /**
diff --git a/modules/mobile/NotificationBadge.less b/modules/mobile/NotificationBadge.less
new file mode 100644
index 000000000..e4a693bc7
--- /dev/null
+++ b/modules/mobile/NotificationBadge.less
@@ -0,0 +1,6 @@
+@import 'mediawiki.skin.variables.less';
+@import 'mediawiki.mixins.less';
+
+.mw-ui-icon-echo-bellOutline-subtle {
+	.cdx-mixin-css-icon( @cdx-icon-bell-outline, @param-fill-color: @color-subtle );
+}
diff --git a/tests/qunit/mobile/test_NotificationBadge.js b/tests/qunit/mobile/test_NotificationBadge.js
index c28168a68..3a1837bbc 100644
--- a/tests/qunit/mobile/test_NotificationBadge.js
+++ b/tests/qunit/mobile/test_NotificationBadge.js
@@ -8,7 +8,7 @@ QUnit.module( 'ext.echo.mobile - NotificationBadge', function () {
 				hasUnseenNotifications: true,
 				notificationCountRaw: 5
 			} );
-		initialExpectationsMet = badge.$el.find( '.mw-ui-icon' ).length === 0;
+		initialExpectationsMet = badge.$el.find( '.mf-icon' ).length === 0;
 
 		badge.setCount( 0 );
 		assert.true( initialExpectationsMet, 'No icon.' );