diff --git a/opentech/static_src/src/javascript/components/search.js b/opentech/static_src/src/javascript/components/search.js
index 0941b9eb760ed0d386bf85c5a4cb16e0be9170bb..b36fff10f5c4da79c1ecee2f8edde1ec815da2f6 100644
--- a/opentech/static_src/src/javascript/components/search.js
+++ b/opentech/static_src/src/javascript/components/search.js
@@ -23,6 +23,9 @@ class Search {
 
         // add modifier to header__inner when the menu is open to style search element
         document.querySelector('.header__inner--menu-open').classList.toggle('header__inner--search-open');
+
+        // add modifier to header to be able to change header icon colours
+        document.querySelector('.header').classList.toggle('search-open');
     }
 }
 
diff --git a/opentech/static_src/src/sass/components/_icon.scss b/opentech/static_src/src/sass/components/_icon.scss
index bff84f08ed6e90b8b1dabf71b99e6bab7a271ff0..7db3b1eae6780e904d9ec0b687258f0c5ae5917e 100644
--- a/opentech/static_src/src/sass/components/_icon.scss
+++ b/opentech/static_src/src/sass/components/_icon.scss
@@ -36,8 +36,8 @@
         width: 15px;
         height: 15px;
         margin-right: 5px;
-        fill: $color--white;
         transition: fill $transition;
+        fill: $color--white;
 
         .button:hover & {
             fill: $color--dark-blue;
@@ -46,5 +46,9 @@
         .header--has-bg-image & {
             fill: $color--dark-blue;
         }
+
+        .search-open & {
+            fill: $color--white;
+        }
     }
 }