diff --git a/src/components/icon.style.js b/src/components/icon.style.js
index adc72fc5..67b8abb5 100644
--- a/src/components/icon.style.js
+++ b/src/components/icon.style.js
@@ -8,7 +8,8 @@ export default {
       directives: {
         textColor: '--text',
         textOpacity: 0.5,
-        textOpacityMode: 'mixrgb'
+        textOpacityMode: 'mixrgb',
+        textAuto: 'no-auto'
       }
     }
   ]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index c1f8c730..e9bee453 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -392,12 +392,15 @@ export const init = (extraRuleset, palette) => {
         const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
         const lowerLevelBackground = cache[lowerLevelSelector].background
 
-        const textColor = getTextColor(
-          convert(lowerLevelBackground).rgb,
-          // TODO properly provide "parent" text color?
-          convert(findColor(inheritedTextColor, null, lowerLevelBackground)).rgb,
-          newTextRule.directives.textAuto === 'preserve'
-        )
+        // TODO properly provide "parent" text color?
+        const intendedTextColor = convert(findColor(inheritedTextColor, null, lowerLevelBackground)).rgb
+        const textColor = newTextRule.directives.textAuto === 'no-auto'
+          ? intendedTextColor
+          : getTextColor(
+            convert(lowerLevelBackground).rgb,
+            intendedTextColor,
+            newTextRule.directives.textAuto === 'preserve'
+          )
 
         // Storing color data in lower layer to use as custom css properties
         cache[lowerLevelSelector].textDefined = cache[lowerLevelSelector].textDefined || {}