diff --git a/app/assets/stylesheets/arclight/modules/icons.scss b/app/assets/stylesheets/arclight/modules/icons.scss
index 0ee42bed..1fa15787 100644
--- a/app/assets/stylesheets/arclight/modules/icons.scss
+++ b/app/assets/stylesheets/arclight/modules/icons.scss
@@ -1,3 +1,6 @@
+:root {
+  --al-online-icon-color: #{$online-icon-color};
+}
 .toggle-bookmark,
 .breadcrumb-item,
 .document,
@@ -9,7 +12,7 @@
 }
 
 .al-online-content-icon .blacklight-icons svg {
-  fill: $online-icon-color;
+  fill: var(--al-online-icon-color);
 }
 
 .btn > .bi:first-child {
diff --git a/app/assets/stylesheets/arclight/modules/search_results.scss b/app/assets/stylesheets/arclight/modules/search_results.scss
index 58621d0a..7fca77a4 100644
--- a/app/assets/stylesheets/arclight/modules/search_results.scss
+++ b/app/assets/stylesheets/arclight/modules/search_results.scss
@@ -1,3 +1,7 @@
+:root {
+  --al-content-icon-color: #{$secondary};
+}
+
 .documents-list {
   margin-bottom: $spacer;
 
@@ -43,10 +47,7 @@
 
 article.document {
   .blacklight-icons svg {
-    fill: $secondary;
-  }
-  .al-online-content-icon .blacklight-icons svg {
-    fill: $online-icon-color;
+    fill: var(--al-content-icon-color);
   }
   div.breadcrumb-links,
   dd.al-document-abstract-or-scope,