--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -770,16 +770,17 @@ html|*#fullscreen-exit-button {
 
 
 /* notification anchors should only be visible when their associated
    notifications are */
 .notification-anchor-icon {
   -moz-user-focus: normal;
 }
 
+.blocked-permission-icon:not([showing]),
 .notification-anchor-icon:not([showing]) {
   display: none;
 }
 
 #invalid-form-popup > description {
   max-width: 280px;
 }
 

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -704,29 +704,29 @@
                    onclick="gIdentityHandler.handleIdentityButtonEvent(event);"
                    onkeypress="gIdentityHandler.handleIdentityButtonEvent(event);"
                    ondragstart="gIdentityHandler.onDragStart(event);">
                 <image id="identity-icon"
                        consumeanchor="identity-box"
                        onclick="PageProxyClickHandler(event);"/>
                 <image id="sharing-icon" mousethrough="always"/>
                 <box id="blocked-permissions-container" align="center" tooltiptext="">
-                  <image data-permission-id="geo" class="notification-anchor-icon geo-icon blocked" role="button"
+                  <image data-permission-id="geo" class="blocked-permission-icon geo-icon" role="button"
                          aria-label="&urlbar.geolocationNotificationAnchor.label;"/>
-                  <image data-permission-id="desktop-notification" class="notification-anchor-icon desktop-notification-icon blocked" role="button"
+                  <image data-permission-id="desktop-notification" class="blocked-permission-icon desktop-notification-icon" role="button"
                          aria-label="&urlbar.webNotsNotificationAnchor3.label;"/>
-                  <image data-permission-id="camera" class="notification-anchor-icon camera-icon blocked" role="button"
+                  <image data-permission-id="camera" class="blocked-permission-icon camera-icon" role="button"
                          aria-label="&urlbar.webRTCShareDevicesNotificationAnchor.label;"/>
-                  <image data-permission-id="indexedDB" class="notification-anchor-icon indexedDB-icon blocked" role="button"
+                  <image data-permission-id="indexedDB" class="blocked-permission-icon indexedDB-icon" role="button"
                          aria-label="&urlbar.indexedDBNotificationAnchor.label;"/>
-                  <image data-permission-id="microphone" class="notification-anchor-icon microphone-icon blocked" role="button"
+                  <image data-permission-id="microphone" class="blocked-permission-icon microphone-icon" role="button"
                          aria-label="&urlbar.webRTCShareMicrophoneNotificationAnchor.label;"/>
-                  <image data-permission-id="screen" class="notification-anchor-icon screen-icon blocked" role="button"
+                  <image data-permission-id="screen" class="blocked-permission-icon screen-icon" role="button"
                          aria-label="&urlbar.webRTCShareScreenNotificationAnchor.label;"/>
-                  <image data-permission-id="pointerLock" class="notification-anchor-icon pointerLock-icon blocked" role="button"
+                  <image data-permission-id="pointerLock" class="blocked-permission-icon pointerLock-icon" role="button"
                          aria-label="&urlbar.pointerLockNotificationAnchor.label;"/>
                 </box>
                 <box id="notification-popup-box"
                      hidden="true"
                      tooltiptext=""
                      onmouseover="document.getElementById('identity-icon').classList.add('no-hover');"
                      onmouseout="document.getElementById('identity-icon').classList.remove('no-hover');"
                      align="center">

--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -6,23 +6,27 @@
 
 #notification-popup-box {
   padding: 5px 0px;
   margin: -5px 0px;
   margin-inline-end: -5px;
   padding-inline-end: 5px;
 }
 
+.notification-anchor-icon,
+.blocked-permission-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
+}
+
 /* This class can be used alone or in combination with the class defining the
    type of icon displayed. This rule must be defined before the others in order
    for its list-style-image to be overridden. */
 .notification-anchor-icon {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: 2px;
 %ifdef MOZ_WIDGET_GTK
   list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16);
 %else
   list-style-image: url(chrome://global/skin/icons/information-16.png);
 %endif
 }
 
 @media (min-resolution: 1.1dppx) {
@@ -71,31 +75,31 @@
 
 /* INDIVIDUAL NOTIFICATIONS */
 
 .popup-notification-icon[popupid="web-notifications"],
 .desktop-notification-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
 }
 
-.desktop-notification-icon.blocked {
+.desktop-notification-icon.blocked-permission-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
 }
 
 .geo-icon {
 %ifdef XP_MACOSX
   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-osx);
 %elif defined(MOZ_WIDGET_GTK)
   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux);
 %else
   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
 %endif
 }
 
-.geo-icon.blocked {
+.geo-icon.blocked-permission-icon {
 %ifdef XP_MACOSX
   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-osx-blocked);
 %elif defined(MOZ_WIDGET_GTK)
   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked);
 %else
   list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
 %endif
 }
@@ -110,17 +114,17 @@
 %endif
 }
 
 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
 .indexedDB-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
 }
 
-.indexedDB-icon.blocked {
+.indexedDB-icon.blocked-permission-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
 }
 
 .login-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
 }
 
 .popup-notification-icon[popupid="password"] {
@@ -132,47 +136,47 @@
   transform: scaleX(-1);
 }
 
 .camera-icon,
 .popup-notification-icon[popupid="webRTC-shareDevices"] {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
 }
 
-.camera-icon.blocked {
+.camera-icon.blocked-permission-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
 }
 
 .microphone-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
 }
 
-.microphone-icon.blocked {
+.microphone-icon.blocked-permission-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
 }
 
 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
 }
 
 .popup-notification-icon[popupid="webRTC-shareScreen"],
 .screen-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
 }
 
-.screen-icon.blocked {
+.screen-icon.blocked-permission-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
 }
 
 .popup-notification-icon[popupid="pointerLock"],
 .pointerLock-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock);
 }
 
-.pointerLock-icon.blocked {
+.pointerLock-icon.blocked-permission-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#pointerLock-blocked);
 }
 
 /* This icon has a block sign in it, so we don't need a blocked version. */
 .popup-icon {
   list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
 }