diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
index acc124f64de..ebebe1ba64d 100644
--- a/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -22,11 +22,12 @@ exports[`EuiIcon is rendered 1`] = `
 exports[`EuiIcon props color #885522 is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-customColor-isLoaded"
+  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
   focusable="false"
   height="16"
   role="img"
+  style="color: rgb(136, 85, 34);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
@@ -40,11 +41,12 @@ exports[`EuiIcon props color #885522 is rendered 1`] = `
 exports[`EuiIcon props color #fde is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-customColor-isLoaded"
+  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
   focusable="false"
   height="16"
   role="img"
+  style="color: rgb(255, 221, 238);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
@@ -130,11 +132,12 @@ exports[`EuiIcon props color ghost is rendered 1`] = `
 exports[`EuiIcon props color hsla(270, 60%, 70%, 0.9) is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-customColor-isLoaded"
+  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
   focusable="false"
   height="16"
   role="img"
+  style="color: hsla(270, 60%, 70%, 0.9);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
@@ -184,11 +187,12 @@ exports[`EuiIcon props color primary is rendered 1`] = `
 exports[`EuiIcon props color rgb(100, 150, 200) is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-customColor-isLoaded"
+  class="euiIcon euiIcon-isLoaded emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
   focusable="false"
   height="16"
   role="img"
+  style="color: rgb(100, 150, 200);"
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/icon/icon.styles.ts b/src/components/icon/icon.styles.ts
index 567d7a2d12b..69845e3749a 100644
--- a/src/components/icon/icon.styles.ts
+++ b/src/components/icon/icon.styles.ts
@@ -9,7 +9,6 @@
 import { css, keyframes } from '@emotion/react';
 import { logicalCSS, euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { EuiIconProps } from './icon';
 
 const _iconSize = (size: string) => {
   return `
@@ -30,10 +29,7 @@ const _iconLoading = keyframes`
   }
 `;
 
-export const euiIconStyles = (
-  { euiTheme }: UseEuiTheme,
-  color: EuiIconProps['color']
-) => ({
+export const euiIconStyles = ({ euiTheme }: UseEuiTheme) => ({
   // Base
   euiIcon: css`
     flex-shrink: 0; // Ensures it never scales down below its intended size
@@ -94,9 +90,6 @@ export const euiIconStyles = (
     color: inherit;
   `,
   default: css``,
-  customColor: css`
-    color: ${color};
-  `,
   logoElasticOutline: css`
     // Elastic logo specific colors
     *[fill] {
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 769e28bb4f3..03f35404af0 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -11,6 +11,7 @@ import React, {
   ImgHTMLAttributes,
   ComponentType,
   SVGAttributes,
+  CSSProperties,
 } from 'react';
 import classNames from 'classnames';
 
@@ -240,6 +241,7 @@ export class EuiIconClass extends PureComponent<
       title,
       onIconLoad,
       theme,
+      style,
       ...rest
     } = this.props;
 
@@ -247,6 +249,13 @@ export class EuiIconClass extends PureComponent<
 
     const isCustomColor = color && !isNamedColor(color);
 
+    const optionalCustomStyles: CSSProperties | undefined = isCustomColor
+      ? {
+          color: color,
+          ...style,
+        }
+      : style;
+
     // These icons are a little special and get some extra CSS flexibility
     const isAppIcon = getIsAppIcon(type);
     // App color styles are only applied if no color is passed or if color="default" is passed
@@ -264,12 +273,12 @@ export class EuiIconClass extends PureComponent<
       className
     );
 
-    const styles = euiIconStyles(theme, color);
+    // Emotion styles
+    const styles = euiIconStyles(theme);
     const cssStyles = [
       styles.euiIcon,
       styles[size],
       color && isNamedColor(color) && styles[color as NamedColor],
-      isCustomColor && styles.customColor,
       isElasticLogoOutline && styles.logoElasticOutline,
       isAppIcon && !appIconHasColor && styles.app,
       isLoading && styles.isLoading,
@@ -326,6 +335,7 @@ export class EuiIconClass extends PureComponent<
       return (
         <Svg
           className={classes}
+          style={optionalCustomStyles}
           css={cssStyles}
           tabIndex={tabIndex}
           focusable={focusable}