diff --git a/backend/internal/web/ui/icon-button.css b/backend/internal/web/ui/icon-button.css
index a60bdcc..20a82a5 100644
--- a/backend/internal/web/ui/icon-button.css
+++ b/backend/internal/web/ui/icon-button.css
@@ -21,14 +21,37 @@
   outline: none;
 }
 
+/* Solid tone — base colors */
 .ui-icon-button-solid.ui-icon-button-neutral {
   color: var(--color-text-muted);
 }
+.ui-icon-button-solid.ui-icon-button-danger {
+  color: var(--color-status-danger-foreground);
+}
+.ui-icon-button-solid.ui-icon-button-warning {
+  color: var(--color-status-warning-foreground);
+}
+.ui-icon-button-solid.ui-icon-button-success {
+  color: var(--color-status-success-foreground);
+}
 
+/* Solid tone — hover */
 .ui-icon-button-solid.ui-icon-button-neutral:hover {
   background: var(--color-surface-neutral-hover);
   color: var(--color-text-primary);
 }
+.ui-icon-button-solid.ui-icon-button-danger:hover {
+  background: var(--color-status-danger-soft-bg-hover);
+  color: var(--color-status-danger-strong-hover);
+}
+.ui-icon-button-solid.ui-icon-button-warning:hover {
+  background: var(--color-status-warning-soft-bg-hover);
+  color: var(--color-status-warning-strong-hover);
+}
+.ui-icon-button-solid.ui-icon-button-success:hover {
+  background: var(--color-status-success-soft-bg-hover);
+  color: var(--color-status-success-strong-hover);
+}
 
 .borderless-icon-button {
   appearance: none;
@@ -39,10 +62,33 @@
   outline: none;
 }
 
-.ui-icon-button-ghost.ui-icon-button-neutral,
+/* Ghost tone — base colors */
+.ui-icon-button-ghost.ui-icon-button-neutral {
+  color: var(--color-text-faint);
+}
 .ui-icon-button-ghost.ui-icon-button-danger {
   color: var(--color-text-faint);
 }
+.ui-icon-button-ghost.ui-icon-button-warning {
+  color: var(--color-text-faint);
+}
+.ui-icon-button-ghost.ui-icon-button-success {
+  color: var(--color-text-faint);
+}
+
+/* Ghost tone — hover */
+.ui-icon-button-ghost.ui-icon-button-neutral:hover {
+  color: var(--color-text-primary);
+}
+.ui-icon-button-ghost.ui-icon-button-danger:hover {
+  color: var(--color-status-danger-icon-hover);
+}
+.ui-icon-button-ghost.ui-icon-button-warning:hover {
+  color: var(--color-status-warning-strong);
+}
+.ui-icon-button-ghost.ui-icon-button-success:hover {
+  color: var(--color-status-success-strong);
+}
 
 .borderless-icon-button svg {
   height: 1rem;