diff --git a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
index eff153839..6470053df 100644
--- a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
@@ -11,9 +11,10 @@ export class HeaderCheckboxIcon extends React.Component<IconProps> {
       <SpanBox
         css={{
           display: 'flex',
-          '--inner-color': 'white',
+          '--inner-color': 'var(--colors-thHeaderIconInner)',
           '--ring-color': 'var(--colors-thHeaderIconRing)',
           '&:hover': {
+            '--inner-color': 'white',
             '--ring-fill': '#007AFF',
             '--ring-color': '#007AFF',
           },
diff --git a/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
index 16e878737..4a580bb03 100644
--- a/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
@@ -11,9 +11,10 @@ export class HeaderToggleGridIcon extends React.Component<IconProps> {
       <SpanBox
         css={{
           display: 'flex',
-          '--inner-color': 'white',
+          '--inner-color': 'var(--colors-thHeaderIconInner)',
           '--ring-color': 'var(--colors-thHeaderIconRing)',
           '&:hover': {
+            '--inner-color': 'white',
             '--ring-fill': '#007AFF',
             '--ring-color': '#007AFF',
           },
diff --git a/packages/web/components/elements/icons/HeaderToggleListIcon.tsx b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
index 63cf27655..6ea8cf88b 100644
--- a/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
@@ -7,16 +7,14 @@ import React from 'react'
 
 export class HeaderToggleListIcon extends React.Component<IconProps> {
   render() {
-    const size = (this.props.size || 26).toString()
-    const color = (this.props.color || '#2A2A2A').toString()
-
     return (
       <SpanBox
         css={{
           display: 'flex',
-          '--inner-color': 'white',
+          '--inner-color': 'var(--colors-thHeaderIconInner)',
           '--ring-color': 'var(--colors-thHeaderIconRing)',
           '&:hover': {
+            '--inner-color': 'white',
             '--ring-fill': '#007AFF',
             '--ring-color': '#007AFF',
           },