--- a/browser/components/customizableui/content/customizeMode.inc.xul
+++ b/browser/components/customizableui/content/customizeMode.inc.xul
@@ -46,16 +46,17 @@
             <toolbarbutton class="customization-lwtheme-menu-footeritem"
                            label="&customizeMode.lwthemes.menuGetMore;"
                            accesskey="&customizeMode.lwthemes.menuGetMore.accessKey;"
                            tabindex="0"
                            oncommand="gCustomizeMode.getMoreThemes(event);"/>
           </hbox>
         </panel>
       </button>
+#ifdef MOZ_PHOTON_THEME
       <button id="customization-uidensity-button"
               label="&customizeMode.uidensity;"
               class="customizationmode-button"
               type="menu">
         <panel type="arrow" id="customization-uidensity-menu"
                onpopupshowing="gCustomizeMode.onUIDensityMenuShowing();"
                position="topcenter bottomleft"
                flip="none"
@@ -101,16 +102,17 @@
           <spacer hidden="true" id="customization-uidensity-touch-spacer"/>
           <checkbox id="customization-uidensity-autotouchmode-checkbox"
                     hidden="true"
                     label="&customizeMode.uidensity.autoTouchMode.checkbox.label;"
                     oncommand="gCustomizeMode.updateAutoTouchMode(this.checked)"/>
 #endif
         </panel>
       </button>
+#endif
 
       <spacer id="customization-footer-spacer"/>
       <button id="customization-undo-reset-button"
               class="customizationmode-button"
               hidden="true"
               oncommand="gCustomizeMode.undoReset();"
               label="&undoCmd.label;"/>
       <button id="customization-reset-button"

--- a/browser/components/customizableui/test/browser_customizemode_uidensity.js
+++ b/browser/components/customizableui/test/browser_customizemode_uidensity.js
@@ -111,20 +111,30 @@ async function testModeButton(mode, mode
 
   is(Services.prefs.getIntPref(PREF_UI_DENSITY), window.gUIDensity.MODE_NORMAL,
      "UI Density pref should be set to normal.");
 
   await endCustomizing();
 }
 
 add_task(async function test_compact_mode_button() {
+  if (!AppConstants.MOZ_PHOTON_THEME) {
+    ok(true, "Skipping test because Photon is not enabled.");
+    return;
+  }
+
   await testModeButton("compact", window.gUIDensity.MODE_COMPACT);
 });
 
 add_task(async function test_touch_mode_button() {
+  if (!AppConstants.MOZ_PHOTON_THEME) {
+    ok(true, "Skipping test because Photon is not enabled.");
+    return;
+  }
+
   // OSX doesn't get touch mode for now.
   if (AppConstants.platform == "macosx") {
     is(document.getElementById("customization-uidensity-menu-button-touch"), null,
        "There's no touch option on Mac OSX");
     return;
   }
 
   await testModeButton("touch", window.gUIDensity.MODE_TOUCH);

--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -251,18 +251,25 @@
   margin-inline-start: 6px !important;
 }
 
 #customization-uidensity-button > .box-inherit > .box-inherit > .button-icon,
 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
   width: 16px;
   height: 16px;
   border-radius: 2px;
+  background-size: contain;
+}
+
+#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
   background-image: url("chrome://browser/content/default-theme-icon.svg");
-  background-size: contain;
+}
+
+#customization-uidensity-button > .box-inherit > .box-inherit > .button-icon {
+  background-image: url("chrome://browser/skin/customizableui/density-normal.svg");
 }
 
 %ifndef MOZ_PHOTON_THEME
 #main-window[customize-entered] #customization-panel-container {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"),
                     url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"),
                     url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
                     url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
@@ -446,21 +453,32 @@ toolbarpaletteitem[place="toolbar"]:not(
   border: 1px solid transparent;
   margin: 0 -5px 5px;
   padding-top: 0;
   padding-inline-end: 5px;
   padding-bottom: 0;
   padding-inline-start: 0;
 }
 
-.customization-uidensity-menu-button,
 .customization-lwtheme-menu-theme[defaulttheme] {
   list-style-image: url(chrome://browser/content/default-theme-icon.svg);
 }
 
+#customization-uidensity-menu-button-normal {
+  list-style-image: url("chrome://browser/skin/customizableui/density-normal.svg");
+}
+
+#customization-uidensity-menu-button-compact {
+  list-style-image: url("chrome://browser/skin/customizableui/density-compact.svg");
+}
+
+#customization-uidensity-menu-button-touch {
+  list-style-image: url("chrome://browser/skin/customizableui/density-touch.svg");
+}
+
 .customization-uidensity-menu-button[active="true"],
 .customization-uidensity-menu-button:hover,
 .customization-lwtheme-menu-theme[active="true"],
 .customization-lwtheme-menu-theme:hover {
   background-color: var(--arrowpanel-dimmed);
   border-color: var(--panel-separator-color);
 }
 

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/customizableui/density-compact.svg
@@ -0,0 +1,21 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/>
+  <path d="M3 1h26c1.1 0 2 .479 2 1.071V14H1V2.071C1 1.479 1.9 1 3 1z" fill="#f9f9fa"/>
+  <path d="M1 13.5h30" fill="none" stroke="#adadb3"/>
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M3.5 7.5h6"/>
+    <path stroke-linejoin="round" d="M6.5 4.5l-3 3 3 3"/>
+  </g>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M18.5 7.5h-6"/>
+    <path stroke-linejoin="round" d="M15.5 4.5l3 3-3 3"/>
+  </g>
+  <g opacity=".8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M28.5 4.5v2h-2"/>
+    <path d="M27.623 9.614a3.03 3.03 0 1 1 .636-3.324"/>
+  </g>
+</svg>

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/customizableui/density-normal.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/>
+  <path d="M3 1h26c1.1 0 2 .627 2 1.4V18H1V2.4C1 1.627 1.9 1 3 1z" fill="#f9f9fa"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M25.5 9.5h-6"/>
+    <path stroke-linejoin="round" d="M22.5 6.5l3 3-3 3"/>
+  </g>
+  <path d="M2 17.5h29" fill="none" stroke="#adadb3"/>
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/>
+  <circle cx="9.5" cy="9.5" r="6" fill="#fff" stroke="#adadb3"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M6.5 9.5h6"/>
+    <path stroke-linejoin="round" d="M9.5 6.5l-3 3 3 3"/>
+  </g>
+</svg>

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/customizableui/density-touch.svg
@@ -0,0 +1,14 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/>
+  <path d="M2.942 1.073l26-.145a1.88 1.88 0 0 1 2.01 1.718l.108 19.27-30 .168L.951 2.813a1.88 1.88 0 0 1 1.991-1.74z" fill="#f9f9fa"/>
+  <path d="M1 21.5h30" fill="none" stroke="#adadb3"/>
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/>
+  <circle cx="15.5" cy="11.5" r="8" fill="#fff" stroke="#adadb3"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M12.5 11.5h6"/>
+    <path stroke-linejoin="round" d="M15.5 8.5l-3 3 3 3"/>
+  </g>
+</svg>

--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -34,16 +34,19 @@
   skin/classic/browser/controlcenter/warning-gray.svg          (../shared/controlcenter/warning-gray.svg)
   skin/classic/browser/controlcenter/warning-yellow.svg        (../shared/controlcenter/warning-yellow.svg)
   skin/classic/browser/customizableui/customizeFavicon.ico     (../shared/customizableui/customizeFavicon.ico)
   skin/classic/browser/customizableui/menuPanel-customizeFinish.png  (../shared/customizableui/menuPanel-customizeFinish.png)
   skin/classic/browser/customizableui/menuPanel-customizeFinish@2x.png  (../shared/customizableui/menuPanel-customizeFinish@2x.png)
 #ifdef MOZ_PHOTON_THEME
   skin/classic/browser/customizableui/empty-overflow-panel.png     (../shared/customizableui/empty-overflow-panel.png)
   skin/classic/browser/customizableui/empty-overflow-panel@2x.png  (../shared/customizableui/empty-overflow-panel@2x.png)
+  skin/classic/browser/customizableui/density-compact.svg      (../shared/customizableui/density-compact.svg)
+  skin/classic/browser/customizableui/density-normal.svg       (../shared/customizableui/density-normal.svg)
+  skin/classic/browser/customizableui/density-touch.svg        (../shared/customizableui/density-touch.svg)
 #else
   skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)
   skin/classic/browser/customizableui/customize-illustration@2x.png  (../shared/customizableui/customize-illustration@2x.png)
   skin/classic/browser/customizableui/customize-illustration-rtl.png  (../shared/customizableui/customize-illustration-rtl.png)
   skin/classic/browser/customizableui/customize-illustration-rtl@2x.png  (../shared/customizableui/customize-illustration-rtl@2x.png)
   skin/classic/browser/customizableui/info-icon-customizeTip.png  (../shared/customizableui/info-icon-customizeTip.png)
   skin/classic/browser/customizableui/info-icon-customizeTip@2x.png  (../shared/customizableui/info-icon-customizeTip@2x.png)
   skin/classic/browser/customizableui/panelarrow-customizeTip.png  (../shared/customizableui/panelarrow-customizeTip.png)