diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css
index 758a68ddb9..490defded6 100644
--- a/src/main/frontend/components/icon.css
+++ b/src/main/frontend/components/icon.css
@@ -1465,6 +1465,30 @@
 
   .ui__button {
     @apply !w-8 !h-8;
+    /* shadcn's :secondary / :outline variants resolve to neutral-gray
+       backgrounds in OG, making selected vs unselected almost
+       indistinguishable. Override per-state with themed chains. */
+    border: 1px solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05))) !important;
+    background-color: transparent !important;
+    color: var(--lx-gray-11, var(--ls-primary-text-color, var(--rx-gray-11))) !important;
+    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+
+    &:hover {
+      /* Themed tertiary teal lift in OG. */
+      @apply bg-gray-03 !important;
+      color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12))) !important;
+    }
+  }
+
+  /* Active (selected) alignment — shadcn's button injects an
+     `as-secondary` class for `:variant :secondary`. Override with the
+     same subtle-bg + accent-outline pattern used for tile selections
+     in icon/asset pickers, so the active button reads as clearly
+     chosen without overwhelming the icon glyph. */
+  .ui__button.as-secondary {
+    @apply !bg-gray-04;
+    border-color: var(--lx-accent-09) !important;
+    color: var(--lx-gray-12, var(--ls-secondary-text-color, var(--rx-gray-12))) !important;
   }
 }