From 926836e6002927829a1ef8833900cbf5e872df53 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Mon, 26 Apr 2021 20:20:10 +0100
Subject: [PATCH 01/10] Making app icons to inherit parent color when nested in
 specific components

---
 CHANGELOG.md                                  |  1 +
 .../badge/__snapshots__/badge.test.tsx.snap   |  3 +
 src/components/badge/badge.tsx                |  2 +
 .../badge/beta_badge/beta_badge.tsx           |  1 +
 .../collapsed_item_actions.test.tsx.snap      |  1 +
 .../in_memory_table.test.tsx.snap             |  6 ++
 .../button/__snapshots__/button.test.tsx.snap |  3 +
 .../button_content.test.tsx.snap              |  2 +
 src/components/button/button_content.tsx      |  7 +-
 .../__snapshots__/button_empty.test.tsx.snap  |  3 +
 .../__snapshots__/button_group.test.tsx.snap  | 84 +++++++++++++++++++
 .../__snapshots__/button_icon.test.tsx.snap   | 21 +++++
 .../button/button_icon/button_icon.tsx        |  1 +
 src/components/call_out/call_out.tsx          |  1 +
 .../__snapshots__/card_select.test.tsx.snap   |  1 +
 .../__snapshots__/code_block.test.tsx.snap    |  2 +
 .../collapsible_nav.test.tsx.snap             |  8 ++
 .../context_menu/context_menu_item.tsx        |  7 +-
 .../__snapshots__/data_grid.test.tsx.snap     | 39 +++++++++
 .../__snapshots__/filter_button.test.tsx.snap |  1 +
 .../flyout/__snapshots__/flyout.test.tsx.snap | 14 ++++
 .../field_password.test.tsx.snap              |  3 +
 .../__snapshots__/super_select.test.tsx.snap  |  6 ++
 .../icon/__snapshots__/icon.test.tsx.snap     |  2 +-
 src/components/icon/_variables.scss           |  1 +
 src/components/icon/icon.tsx                  |  7 +-
 .../__snapshots__/list_group.test.tsx.snap    |  4 +
 .../list_group_item.test.tsx.snap             |  4 +
 src/components/list_group/list_group_item.tsx |  8 +-
 .../pinnable_list_group.test.tsx.snap         | 12 +++
 .../markdown_editor.test.tsx.snap             | 55 ++++++++++++
 .../__snapshots__/confirm_modal.test.tsx.snap |  2 +
 .../modal/__snapshots__/modal.test.tsx.snap   |  1 +
 .../notification_event.test.tsx.snap          |  2 +
 ...tification_event_read_button.test.tsx.snap |  2 +
 .../__snapshots__/pagination.test.tsx.snap    |  2 +
 .../selectable_list_item.test.tsx.snap        |  1 +
 .../__snapshots__/side_nav.test.tsx.snap      |  8 ++
 .../__snapshots__/suggest_item.test.tsx.snap  |  5 ++
 src/components/suggest/suggest_item.tsx       |  5 +-
 .../table_sort_mobile.test.tsx.snap           |  1 +
 .../table_sort_mobile_item.test.tsx.snap      |  1 +
 .../table_pagination.test.tsx.snap            |  5 ++
 43 files changed, 338 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30837482d3b..6e87ff16db2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed missing i18n tokens for `EuiFilePicker` ([#4750](https://github.com/elastic/eui/pull/4750))
+- Fixed a bug in `EuiIcon` where app icons were getting two-tone colors when nested in specific components ([#4750](https://github.com/elastic/eui/pull/4750))
 
 ## [`32.2.0`](https://github.com/elastic/eui/tree/v32.2.0)
 
diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap
index bd6e2b78737..86874c2eaef 100644
--- a/src/components/badge/__snapshots__/badge.test.tsx.snap
+++ b/src/components/badge/__snapshots__/badge.test.tsx.snap
@@ -309,6 +309,7 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
     </span>
     <span
       class="euiBadge__icon"
+      color="default"
       data-euiicon-type="user"
     />
   </span>
@@ -330,6 +331,7 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
     </span>
     <span
       class="euiBadge__icon"
+      color="default"
       data-euiicon-type="user"
     />
   </span>
@@ -351,6 +353,7 @@ exports[`EuiBadge props iconType is rendered 1`] = `
     </span>
     <span
       class="euiBadge__icon"
+      color="default"
       data-euiicon-type="user"
     />
   </span>
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index 424777cb8f0..c38091a37d9 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -261,6 +261,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
             size="s"
             {...closeButtonProps}
             className={closeClassNames}
+            color="default" // forces app icons to inherit de parent color
           />
         </button>
       );
@@ -270,6 +271,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
           type={iconType}
           size={children ? 's' : 'm'}
           className="euiBadge__icon"
+          color="default" // forces app icons to inherit de parent color
         />
       );
     }
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index 295efb4baaf..abf8eb85087 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -103,6 +103,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
         type={iconType}
         size="m"
         aria-hidden="true"
+        color="default" // forces app icons to inherit de parent color
       />
     );
   }
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
index 40a0fae8a90..3eb101a179f 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`CollapsedItemActions render 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="boxesHorizontal"
         />
       </button>
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 5e4f2a166d4..daab988517a 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -394,11 +394,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 >
                                   <EuiIcon
                                     className="euiButtonContent__icon"
+                                    color="default"
                                     size="m"
                                     type="arrowDown"
                                   >
                                     <span
                                       className="euiButtonContent__icon"
+                                      color="default"
                                       data-euiicon-type="arrowDown"
                                       size="m"
                                     />
@@ -473,12 +475,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 <EuiIcon
                                   aria-hidden="true"
                                   className="euiButtonIcon__icon"
+                                  color="default"
                                   size="m"
                                   type="arrowLeft"
                                 >
                                   <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
+                                    color="default"
                                     data-euiicon-type="arrowLeft"
                                     size="m"
                                   />
@@ -685,12 +689,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 <EuiIcon
                                   aria-hidden="true"
                                   className="euiButtonIcon__icon"
+                                  color="default"
                                   size="m"
                                   type="arrowRight"
                                 >
                                   <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
+                                    color="default"
                                     data-euiicon-type="arrowRight"
                                     size="m"
                                   />
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index fe417604d3f..2669f617cdb 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -185,6 +185,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="default"
       data-euiicon-type="user"
     />
     <span
@@ -206,6 +207,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="default"
       data-euiicon-type="user"
     />
     <span
@@ -227,6 +229,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="default"
       data-euiicon-type="user"
     />
     <span
diff --git a/src/components/button/__snapshots__/button_content.test.tsx.snap b/src/components/button/__snapshots__/button_content.test.tsx.snap
index 9743a74a55b..d438c7f3a60 100644
--- a/src/components/button/__snapshots__/button_content.test.tsx.snap
+++ b/src/components/button/__snapshots__/button_content.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`EuiButtonContent props iconSide is rendered 1`] = `
 >
   <span
     class="euiButtonContent__icon"
+    color="default"
     data-euiicon-type="bolt"
   />
   <span />
@@ -38,6 +39,7 @@ exports[`EuiButtonContent props iconType is rendered 1`] = `
 >
   <span
     class="euiButtonContent__icon"
+    color="default"
     data-euiicon-type="bolt"
   />
   <span />
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index 525f1b8dc17..187419df59c 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -79,7 +79,12 @@ export const EuiButtonContent: FunctionComponent<
     );
   } else if (iconType) {
     buttonIcon = (
-      <EuiIcon className="euiButtonContent__icon" type={iconType} size="m" />
+      <EuiIcon
+        className="euiButtonContent__icon"
+        type={iconType}
+        size="m"
+        color="default" // forces app icons to inherit de parent color
+      />
     );
   }
 
diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
index 75b3d5d0257..f833d7eed95 100644
--- a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
+++ b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -200,6 +200,7 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="default"
       data-euiicon-type="user"
     />
     <span
@@ -221,6 +222,7 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="default"
       data-euiicon-type="user"
     />
     <span
@@ -242,6 +244,7 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="default"
       data-euiicon-type="user"
     />
     <span
diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
index 1f842553f42..fa099dc1621 100644
--- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
+++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -46,6 +47,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -68,6 +70,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -104,6 +107,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -129,6 +133,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -158,6 +163,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -196,6 +202,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -217,6 +224,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -239,6 +247,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -275,6 +284,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -300,6 +310,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -329,6 +340,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -367,6 +379,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -388,6 +401,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -410,6 +424,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -446,6 +461,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -471,6 +487,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -500,6 +517,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -538,6 +556,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -559,6 +578,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -581,6 +601,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -617,6 +638,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -642,6 +664,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -671,6 +694,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -709,6 +733,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -730,6 +755,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -752,6 +778,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -788,6 +815,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -813,6 +841,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -842,6 +871,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -880,6 +910,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -901,6 +932,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -923,6 +955,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -959,6 +992,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -984,6 +1018,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1013,6 +1048,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1051,6 +1087,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1072,6 +1109,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1094,6 +1132,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1130,6 +1169,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1155,6 +1195,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1184,6 +1225,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1222,6 +1264,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1243,6 +1286,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1265,6 +1309,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1301,6 +1346,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1326,6 +1372,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1355,6 +1402,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1393,6 +1441,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1414,6 +1463,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1436,6 +1486,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1472,6 +1523,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1497,6 +1549,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1526,6 +1579,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1566,6 +1620,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1588,6 +1643,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1610,6 +1666,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1650,6 +1707,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1672,6 +1730,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1694,6 +1753,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1732,6 +1792,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1753,6 +1814,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1775,6 +1837,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1811,6 +1874,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1836,6 +1900,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1865,6 +1930,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1903,6 +1969,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1924,6 +1991,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1946,6 +2014,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -1982,6 +2051,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2007,6 +2077,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2036,6 +2107,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2072,6 +2144,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2098,6 +2171,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2127,6 +2201,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2165,6 +2240,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2186,6 +2262,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2208,6 +2285,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2248,6 +2326,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2269,6 +2348,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2291,6 +2371,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2329,6 +2410,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2354,6 +2436,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
@@ -2383,6 +2466,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="bolt"
         />
         <span
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
index a049951047e..8c87ad8f717 100644
--- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
+++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`EuiButtonIcon is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -24,6 +25,7 @@ exports[`EuiButtonIcon props color accent is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -38,6 +40,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -52,6 +55,7 @@ exports[`EuiButtonIcon props color ghost is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -66,6 +70,7 @@ exports[`EuiButtonIcon props color primary is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -80,6 +85,7 @@ exports[`EuiButtonIcon props color subdued is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -94,6 +100,7 @@ exports[`EuiButtonIcon props color success is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -108,6 +115,7 @@ exports[`EuiButtonIcon props color text is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -122,6 +130,7 @@ exports[`EuiButtonIcon props color warning is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -136,6 +145,7 @@ exports[`EuiButtonIcon props display base is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -150,6 +160,7 @@ exports[`EuiButtonIcon props display empty is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -164,6 +175,7 @@ exports[`EuiButtonIcon props display fill is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -180,6 +192,7 @@ exports[`EuiButtonIcon props href secures the rel attribute when the target is _
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </a>
@@ -194,6 +207,7 @@ exports[`EuiButtonIcon props iconType is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -209,6 +223,7 @@ exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -224,6 +239,7 @@ exports[`EuiButtonIcon props isDisabled renders a button even when href is defin
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -239,6 +255,7 @@ exports[`EuiButtonIcon props isSelected is rendered as false 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -254,6 +271,7 @@ exports[`EuiButtonIcon props isSelected is rendered as true 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -268,6 +286,7 @@ exports[`EuiButtonIcon props size m is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -282,6 +301,7 @@ exports[`EuiButtonIcon props size s is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
@@ -296,6 +316,7 @@ exports[`EuiButtonIcon props size xs is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="user"
   />
 </button>
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index e4c3f456c6e..805c38c7f7f 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -190,6 +190,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
         type={iconType}
         size={iconSize}
         aria-hidden="true"
+        color="default" // forces app icons to inherit de parent color
       />
     );
   }
diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx
index 05c1b738b52..951ee666fc6 100644
--- a/src/components/call_out/call_out.tsx
+++ b/src/components/call_out/call_out.tsx
@@ -84,6 +84,7 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
           type={iconType}
           size="m"
           aria-hidden="true"
+          color="default" // forces app icons to inherit de parent color
         />
       );
     }
diff --git a/src/components/card/__snapshots__/card_select.test.tsx.snap b/src/components/card/__snapshots__/card_select.test.tsx.snap
index e582accadd9..8efba752c74 100644
--- a/src/components/card/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/__snapshots__/card_select.test.tsx.snap
@@ -91,6 +91,7 @@ exports[`EuiCardSelect props isSelected 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="default"
       data-euiicon-type="check"
     />
     <span
diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index ef8ac23e3f6..ead03336c3f 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -112,6 +112,7 @@ console.log(some);
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="copy"
           />
         </button>
@@ -167,6 +168,7 @@ console.log(some);
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="fullScreen"
       />
     </button>
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 43e9a28299f..6138bb64aa9 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -59,6 +59,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="cross"
           />
           <span
@@ -111,6 +112,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="cross"
           />
           <span
@@ -165,6 +167,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="cross"
           />
           <span
@@ -213,6 +216,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="cross"
           />
           <span
@@ -261,6 +265,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="cross"
           />
           <span
@@ -308,6 +313,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="cross"
           />
           <span
@@ -356,6 +362,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="cross"
           />
           <span
@@ -409,6 +416,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="cross"
           />
           <span
diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx
index 69dff079b3c..ed039404462 100644
--- a/src/components/context_menu/context_menu_item.tsx
+++ b/src/components/context_menu/context_menu_item.tsx
@@ -122,7 +122,12 @@ export class EuiContextMenuItem extends Component<Props> {
       switch (typeof icon) {
         case 'string':
           iconInstance = (
-            <EuiIcon type={icon} size="m" className="euiContextMenu__icon" />
+            <EuiIcon
+              type={icon}
+              size="m"
+              className="euiContextMenu__icon"
+              color="default" // forces app icons to inherit de parent color
+            />
           );
           break;
 
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index e6012c01c02..d3b9b664104 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
           >
             <span
               class="euiButtonContent__icon"
+              color="default"
               data-euiicon-type="arrowDown"
             />
             <span
@@ -53,6 +54,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="arrowLeft"
         />
       </a>
@@ -116,6 +118,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="arrowRight"
         />
       </button>
@@ -155,10 +158,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="eyeClosed"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="eyeClosed"
           />
         </EuiIcon>
@@ -212,10 +217,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortUp"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortUp"
           />
         </EuiIcon>
@@ -293,10 +300,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortDown"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortDown"
           />
         </EuiIcon>
@@ -365,10 +374,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortLeft"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortLeft"
           />
         </EuiIcon>
@@ -413,10 +424,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortRight"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortRight"
           />
         </EuiIcon>
@@ -511,10 +524,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortUp"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortUp"
           />
         </EuiIcon>
@@ -592,10 +607,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortDown"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortDown"
           />
         </EuiIcon>
@@ -691,10 +708,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="eyeClosed"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="eyeClosed"
           />
         </EuiIcon>
@@ -730,10 +749,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortUp"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortUp"
           />
         </EuiIcon>
@@ -769,10 +790,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortDown"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortDown"
           />
         </EuiIcon>
@@ -807,10 +830,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortLeft"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortLeft"
           />
         </EuiIcon>
@@ -845,10 +870,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
+          color="default"
           type="sortRight"
         >
           <span
             className="euiListGroupItem__icon"
+            color="default"
             data-euiicon-type="sortRight"
           />
         </EuiIcon>
@@ -933,6 +960,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
+                  color="default"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -961,6 +989,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
+                  color="default"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -982,6 +1011,7 @@ Array [
           >
             <span
               class="euiButtonContent__icon"
+              color="default"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -1272,6 +1302,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
+                  color="default"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -1300,6 +1331,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
+                  color="default"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -1321,6 +1353,7 @@ Array [
           >
             <span
               class="euiButtonContent__icon"
+              color="default"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -1908,6 +1941,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
+                  color="default"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -1936,6 +1970,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
+                  color="default"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -1957,6 +1992,7 @@ Array [
           >
             <span
               class="euiButtonContent__icon"
+              color="default"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -2246,6 +2282,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
+                  color="default"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -2274,6 +2311,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
+                  color="default"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -2295,6 +2333,7 @@ Array [
           >
             <span
               class="euiButtonContent__icon"
+              color="default"
               data-euiicon-type="fullScreen"
             />
             <span
diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
index 49000bbd392..d58011ce8d0 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -50,6 +50,7 @@ exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
+      color="default"
       data-euiicon-type="user"
     />
     <span
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 2630b879a82..44a3c9a1d9b 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -31,6 +31,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -74,6 +75,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -146,6 +148,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -189,6 +192,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -231,6 +235,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -274,6 +279,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -317,6 +323,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -359,6 +366,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -401,6 +409,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -443,6 +452,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -485,6 +495,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -527,6 +538,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -569,6 +581,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -611,6 +624,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
diff --git a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index 5ad961f6786..8e9a3a83cf1 100644
--- a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -112,6 +112,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
+      color="default"
       data-euiicon-type="eye"
     />
   </button>
@@ -155,6 +156,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
+      color="default"
       data-euiicon-type="eye"
     />
   </button>
@@ -336,6 +338,7 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
+      color="default"
       data-euiicon-type="eye"
     />
   </button>
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index 67b727bb3e9..9c0a8ed64ec 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -213,6 +213,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
+                    color="default"
                     data-euiicon-type="empty"
                   />
                   <span
@@ -234,6 +235,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
+                    color="default"
                     data-euiicon-type="empty"
                   />
                   <span
@@ -489,6 +491,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
+                    color="default"
                     data-euiicon-type="check"
                   />
                   <span
@@ -511,6 +514,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
+                    color="default"
                     data-euiicon-type="empty"
                   />
                   <span
@@ -648,6 +652,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
+                    color="default"
                     data-euiicon-type="empty"
                   />
                   <span
@@ -669,6 +674,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
+                    color="default"
                     data-euiicon-type="empty"
                   />
                   <span
diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
index afd0e8ffc22..dc40d8224ae 100644
--- a/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`EuiIcon props color danger is rendered 1`] = `
 exports[`EuiIcon props color default is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon euiIcon--medium euiIcon--default euiIcon-isLoaded"
   focusable="false"
   height="16"
   role="img"
diff --git a/src/components/icon/_variables.scss b/src/components/icon/_variables.scss
index 95999f18c84..925df34591c 100644
--- a/src/components/icon/_variables.scss
+++ b/src/components/icon/_variables.scss
@@ -11,6 +11,7 @@ $euiIconColors: (
   subdued: $euiTextSubduedColor,
   text: $euiTextColor,
   warning: makeGraphicContrastColor($euiColorWarning),
+  default: inherit
 );
 
 $euiIconSizes: (
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index ecd2273742d..69b461f2a46 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -452,7 +452,7 @@ export type EuiIconType = keyof typeof typeToPathMap;
 export type IconType = EuiIconType | string | ComponentType;
 
 const colorToClassMap = {
-  default: null,
+  default: 'euiIcon--default',
   primary: 'euiIcon--primary',
   secondary: 'euiIcon--secondary',
   success: 'euiIcon--success',
@@ -691,12 +691,15 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
       typeof type === 'string' &&
       (/.+App$/.test(type) || /.+Job$/.test(type) || type === 'dataVisualizer');
 
+    // parent is not one of
+
     const classes = classNames(
       'euiIcon',
       sizeToClassNameMap[size],
       optionalColorClass,
       {
-        'euiIcon--app': isAppIcon,
+        // The app icon only gets the .euiIcon--app class if no color is passed
+        'euiIcon--app': isAppIcon && !color,
         'euiIcon-isLoading': isLoading,
         'euiIcon-isLoaded': !isLoading && neededLoading,
       },
diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
index 71255ad552e..cdb3ad44734 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`EuiListGroup listItems is rendered 1`] = `
     >
       <span
         class="euiListGroupItem__icon"
+        color="default"
         data-euiicon-type="stop"
       />
       <span
@@ -51,6 +52,7 @@ exports[`EuiListGroup listItems is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="bell"
       />
     </button>
@@ -117,6 +119,7 @@ exports[`EuiListGroup listItems is rendered with color 1`] = `
     >
       <span
         class="euiListGroupItem__icon"
+        color="default"
         data-euiicon-type="stop"
       />
       <span
@@ -148,6 +151,7 @@ exports[`EuiListGroup listItems is rendered with color 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="bell"
       />
     </button>
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
index bd8575d76ef..c12b987664e 100644
--- a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -124,6 +124,7 @@ exports[`EuiListGroupItem props extraAction can be disabled 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
+      color="default"
       data-euiicon-type="empty"
     />
   </button>
@@ -152,6 +153,7 @@ exports[`EuiListGroupItem props extraAction is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
+      color="default"
       data-euiicon-type="empty"
     />
   </button>
@@ -242,6 +244,7 @@ exports[`EuiListGroupItem props iconType is rendered 1`] = `
   >
     <span
       class="euiListGroupItem__icon"
+      color="default"
       data-euiicon-type="empty"
     />
     <span
@@ -437,6 +440,7 @@ exports[`EuiListGroupItem throws a warning if both iconType and icon are provide
   >
     <span
       class="euiListGroupItem__icon"
+      color="default"
       data-euiicon-type="empty"
     />
     <span
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index 311858b2ff9..c4b03e3646b 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -184,7 +184,13 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   let iconNode;
 
   if (iconType) {
-    iconNode = <EuiIcon className="euiListGroupItem__icon" type={iconType} />;
+    iconNode = (
+      <EuiIcon
+        className="euiListGroupItem__icon"
+        type={iconType}
+        color="default" // forces app icons to inherit de parent color
+      />
+    );
 
     if (icon) {
       console.warn(
diff --git a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
index b76b4ec00e2..34dc20aad01 100644
--- a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
+++ b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     >
       <span
         class="euiListGroupItem__icon"
+        color="default"
         data-euiicon-type="stop"
       />
       <span
@@ -32,6 +33,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -57,6 +59,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="bell"
       />
     </button>
@@ -85,6 +88,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -112,6 +116,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -140,6 +145,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -177,6 +183,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     >
       <span
         class="euiListGroupItem__icon"
+        color="default"
         data-euiicon-type="stop"
       />
       <span
@@ -195,6 +202,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -220,6 +228,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="bell"
       />
     </button>
@@ -248,6 +257,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -275,6 +285,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -303,6 +314,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="pinFilled"
       />
     </button>
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index b4287e13d2d..c8dfb2c18d7 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -37,6 +38,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -55,6 +57,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -70,6 +73,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -85,6 +89,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -103,6 +108,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="quote"
           />
         </button>
@@ -118,6 +124,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -133,6 +140,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -151,6 +159,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -165,6 +174,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="eye"
         />
         <span
@@ -203,6 +213,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
@@ -241,6 +252,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -256,6 +268,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -274,6 +287,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -289,6 +303,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -304,6 +319,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -322,6 +338,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="quote"
           />
         </button>
@@ -337,6 +354,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -352,6 +370,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -370,6 +389,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -384,6 +404,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="eye"
         />
         <span
@@ -422,6 +443,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
@@ -460,6 +482,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -475,6 +498,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -493,6 +517,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -508,6 +533,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -523,6 +549,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -541,6 +568,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="quote"
           />
         </button>
@@ -556,6 +584,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -571,6 +600,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -589,6 +619,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -603,6 +634,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="eye"
         />
         <span
@@ -641,6 +673,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
@@ -679,6 +712,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -694,6 +728,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -712,6 +747,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -727,6 +763,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -742,6 +779,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -760,6 +798,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="quote"
           />
         </button>
@@ -775,6 +814,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -790,6 +830,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -808,6 +849,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -822,6 +864,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="eye"
         />
         <span
@@ -860,6 +903,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
@@ -898,6 +942,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -913,6 +958,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -931,6 +977,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -946,6 +993,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -961,6 +1009,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -979,6 +1028,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="quote"
           />
         </button>
@@ -994,6 +1044,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -1009,6 +1060,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -1027,6 +1079,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -1041,6 +1094,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <span
           class="euiButtonContent__icon"
+          color="default"
           data-euiicon-type="eye"
         />
         <span
@@ -1079,6 +1133,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
+            color="default"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index e1606316408..bd29458cbed 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -33,6 +33,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
@@ -145,6 +146,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index 58f69991d6f..73fee3a180b 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -33,6 +33,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="cross"
         />
       </button>
diff --git a/src/components/notification/__snapshots__/notification_event.test.tsx.snap b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
index 48b183b4629..95e0a952bb5 100644
--- a/src/components/notification/__snapshots__/notification_event.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
@@ -403,6 +403,7 @@ exports[`EuiNotificationEvent props isRead  is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
+        color="default"
         data-euiicon-type="dot"
       />
     </button>
@@ -748,6 +749,7 @@ exports[`EuiNotificationEvent props primaryActionProps is rendered 1`] = `
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="download"
           />
           <span
diff --git a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap
index 5f5e8afb49a..64772b27bf5 100644
--- a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap
@@ -11,6 +11,7 @@ exports[`EuiNotificationEventReadButton is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="dot"
   />
 </button>
@@ -27,6 +28,7 @@ exports[`EuiNotificationEventReadButton renders isRead to false 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
+    color="default"
     data-euiicon-type="dot"
   />
 </button>
diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
index b97502ca296..1e6b71099c4 100644
--- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap
+++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`EuiPagination is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
+      color="default"
       data-euiicon-type="arrowLeft"
     />
   </button>
@@ -52,6 +53,7 @@ exports[`EuiPagination is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
+      color="default"
       data-euiicon-type="arrowRight"
     />
   </button>
diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
index 959f8e4dedb..b899d930ee6 100644
--- a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
+++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
@@ -140,6 +140,7 @@ exports[`EuiSelectableListItem props isFocused 1`] = `
         >
           <span
             class="euiBadge__icon"
+            color="default"
             data-euiicon-type="returnKey"
           />
         </span>
diff --git a/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap b/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
index 73cc96f3a23..7001685dd68 100644
--- a/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
+++ b/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`EuiSideNav is rendered 1`] = `
     >
       <span
         class="euiButtonContent__icon"
+        color="default"
         data-euiicon-type="apps"
       />
       <span
@@ -41,6 +42,7 @@ exports[`EuiSideNav props isOpenOnMobile defaults to false 1`] = `
     >
       <span
         class="euiButtonContent__icon"
+        color="default"
         data-euiicon-type="apps"
       />
       <span
@@ -67,6 +69,7 @@ exports[`EuiSideNav props isOpenOnMobile is rendered when specified as true 1`]
     >
       <span
         class="euiButtonContent__icon"
+        color="default"
         data-euiicon-type="apps"
       />
       <span
@@ -93,6 +96,7 @@ exports[`EuiSideNav props items is rendered 1`] = `
     >
       <span
         class="euiButtonContent__icon"
+        color="default"
         data-euiicon-type="apps"
       />
       <span
@@ -181,6 +185,7 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
     >
       <span
         class="euiButtonContent__icon"
+        color="default"
         data-euiicon-type="apps"
       />
       <span
@@ -305,6 +310,7 @@ exports[`EuiSideNav props items renders items using a specified callback 1`] = `
     >
       <span
         class="euiButtonContent__icon"
+        color="default"
         data-euiicon-type="apps"
       />
       <span
@@ -373,6 +379,7 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
     >
       <span
         class="euiButtonContent__icon"
+        color="default"
         data-euiicon-type="apps"
       />
       <span
@@ -461,6 +468,7 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
     >
       <span
         class="euiButtonContent__icon"
+        color="default"
         data-euiicon-type="apps"
       />
       <span
diff --git a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
index df2c7e9e403..11e03b7cabf 100644
--- a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
+++ b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`EuiSuggestItem is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint1"
   >
     <span
+      color="default"
       data-euiicon-type="search"
     />
   </span>
@@ -29,6 +30,7 @@ exports[`props descriptionDisplay as wrap is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <span
+      color="default"
       data-euiicon-type="kqlValue"
     />
   </span>
@@ -53,6 +55,7 @@ exports[`props item with no description has expanded label is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <span
+      color="default"
       data-euiicon-type="kqlValue"
     />
   </span>
@@ -72,6 +75,7 @@ exports[`props labelDisplay as expand is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <span
+      color="default"
       data-euiicon-type="kqlValue"
     />
   </span>
@@ -96,6 +100,7 @@ exports[`props labelWidth is 30% is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <span
+      color="default"
       data-euiicon-type="kqlValue"
     />
   </span>
diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx
index 292b53595b2..44955df20b8 100644
--- a/src/components/suggest/suggest_item.tsx
+++ b/src/components/suggest/suggest_item.tsx
@@ -167,7 +167,10 @@ export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps> = ({
   const innerContent = (
     <React.Fragment>
       <span className={`euiSuggestItem__type ${colorClass}`}>
-        <EuiIcon type={type.iconType} />
+        <EuiIcon
+          type={type.iconType}
+          color="default" // forces app icons to inherit de parent color
+        />
       </span>
       <span className={labelClassNames}>{label}</span>
       {description && (
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
index d71fd0ff744..c24a25a8a00 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`EuiTableSortMobile is rendered 1`] = `
         >
           <span
             class="euiButtonContent__icon"
+            color="default"
             data-euiicon-type="arrowDown"
           />
           <span
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap
index c04f0629a79..8be05006d85 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`EuiTableSortMobileItem is rendered 1`] = `
   >
     <span
       class="euiContextMenu__icon"
+      color="default"
       data-euiicon-type="empty"
     />
     <span
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index 7acfbfce5c4..5fef93cc603 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`EuiTablePagination is rendered 1`] = `
           >
             <span
               class="euiButtonContent__icon"
+              color="default"
               data-euiicon-type="arrowDown"
             />
             <span
@@ -52,6 +53,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="arrowLeft"
         />
       </button>
@@ -171,6 +173,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="arrowRight"
         />
       </button>
@@ -203,6 +206,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="arrowLeft"
         />
       </button>
@@ -322,6 +326,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
+          color="default"
           data-euiicon-type="arrowRight"
         />
       </button>

From 492000e821f554fb4eb3f98e4fc86e0d35fa3622 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 27 Apr 2021 10:47:35 +0100
Subject: [PATCH 02/10] Improving example

---
 src-docs/src/views/icon/icon_colors_apps.js | 22 +++++++++++++++++++--
 src-docs/src/views/icon/icon_example.js     |  8 +++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/icon/icon_colors_apps.js b/src-docs/src/views/icon/icon_colors_apps.js
index 173dc34f9c4..72981da2670 100644
--- a/src-docs/src/views/icon/icon_colors_apps.js
+++ b/src-docs/src/views/icon/icon_colors_apps.js
@@ -32,7 +32,7 @@ export default () => (
         className="eui-textCenter"
         grow={false}
         style={{ minWidth: 96 }}>
-        <EuiIcon type="gisApp" color="text" size="xl" />
+        <EuiIcon type="gisApp" color="default" size="xl" />
       </EuiSplitPanel.Inner>
       <EuiSplitPanel.Inner paddingSize="s" color="subdued">
         <EuiCodeBlock
@@ -40,7 +40,7 @@ export default () => (
           isCopyable
           transparentBackground
           paddingSize="m">
-          {'<EuiIcon type="gisApp" color="text" size="xl" />'}
+          {'<EuiIcon type="gisApp" color="default" size="xl" />'}
         </EuiCodeBlock>
       </EuiSplitPanel.Inner>
     </EuiSplitPanel.Outer>
@@ -63,6 +63,24 @@ export default () => (
       </EuiSplitPanel.Inner>
     </EuiSplitPanel.Outer>
     <EuiSpacer />
+    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
+      <EuiSplitPanel.Inner
+        className="eui-textCenter"
+        grow={false}
+        style={{ minWidth: 96 }}>
+        <EuiIcon type="gisApp" color="text" size="xl" />
+      </EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
+        <EuiCodeBlock
+          language="html"
+          isCopyable
+          transparentBackground
+          paddingSize="m">
+          {'<EuiIcon type="gisApp" color="text" size="xl" />'}
+        </EuiCodeBlock>
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+    <EuiSpacer />
     <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
       <EuiSplitPanel.Inner
         className="eui-textCenter"
diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js
index 7304a732430..84a5f49d6c3 100644
--- a/src-docs/src/views/icon/icon_example.js
+++ b/src-docs/src/views/icon/icon_example.js
@@ -203,7 +203,9 @@ export const IconExample = {
             <p>
               Two-tone icons, like our app style icons, will behave similarly to
               normal glyphs when provided a specific color by applying the color
-              to <strong>all</strong> the shapes within.
+              to <strong>all</strong> the shapes within. Most of the time, you
+              just need to pass <EuiCode>color="default"</EuiCode> to force the
+              icon to inherit its color from its parent.
             </p>
           </EuiText>
           <EuiSpacer />
@@ -218,8 +220,8 @@ export const IconExample = {
           <p>
             The <EuiCode>type</EuiCode> prop can accept a valid enum, string or
             React SVG Element. When using a custom SVG, please make sure it sits
-            on a square canvas and preferably utilizes one of EUI&apos;s sizes
-            (<EuiCode>16x16</EuiCode> or <EuiCode>32x32</EuiCode>).
+            on a square canvas and preferably utilizes one of EUI&apos;s sizes (
+            <EuiCode>16x16</EuiCode> or <EuiCode>32x32</EuiCode>).
           </p>
           <p>
             When using custom SVGs for simple glyphs,{' '}

From cc5cc1bd47a010d7995a508801f60d665cdc2e2a Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 27 Apr 2021 11:03:03 +0100
Subject: [PATCH 03/10] CL

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e87ff16db2..5850bcfb0a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 **Bug fixes**
 
 - Fixed missing i18n tokens for `EuiFilePicker` ([#4750](https://github.com/elastic/eui/pull/4750))
-- Fixed a bug in `EuiIcon` where app icons were getting two-tone colors when nested in specific components ([#4750](https://github.com/elastic/eui/pull/4750))
+- Fixed a bug in `EuiIcon` where two-tone icons were not inheriting their parent color when nested in specific components ([#4760](https://github.com/elastic/eui/pull/4760))
 
 ## [`32.2.0`](https://github.com/elastic/eui/tree/v32.2.0)
 

From 878e8bdd003ace4ae9e0df507bb7e579126bb5cf Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 27 Apr 2021 11:07:43 +0100
Subject: [PATCH 04/10] Improving comment msg

---
 src/components/badge/badge.tsx                    | 4 ++--
 src/components/badge/beta_badge/beta_badge.tsx    | 2 +-
 src/components/button/button_content.tsx          | 2 +-
 src/components/button/button_icon/button_icon.tsx | 2 +-
 src/components/call_out/call_out.tsx              | 2 +-
 src/components/context_menu/context_menu_item.tsx | 2 +-
 src/components/list_group/list_group_item.tsx     | 2 +-
 src/components/suggest/suggest_item.tsx           | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index c38091a37d9..c67cf072248 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -261,7 +261,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
             size="s"
             {...closeButtonProps}
             className={closeClassNames}
-            color="default" // forces app icons to inherit de parent color
+            color="default" // forces two-tone icons to inherit their parent color
           />
         </button>
       );
@@ -271,7 +271,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
           type={iconType}
           size={children ? 's' : 'm'}
           className="euiBadge__icon"
-          color="default" // forces app icons to inherit de parent color
+          color="default" // forces two-tone icons to inherit their parent color
         />
       );
     }
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index abf8eb85087..bfcac47f340 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -103,7 +103,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
         type={iconType}
         size="m"
         aria-hidden="true"
-        color="default" // forces app icons to inherit de parent color
+        color="default" // forces two-tone icons to inherit their parent color
       />
     );
   }
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index 187419df59c..4736bc72662 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -83,7 +83,7 @@ export const EuiButtonContent: FunctionComponent<
         className="euiButtonContent__icon"
         type={iconType}
         size="m"
-        color="default" // forces app icons to inherit de parent color
+        color="default" // forces two-tone icons to inherit their parent color
       />
     );
   }
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index 805c38c7f7f..8ae5c051671 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -190,7 +190,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
         type={iconType}
         size={iconSize}
         aria-hidden="true"
-        color="default" // forces app icons to inherit de parent color
+        color="default" // forces two-tone icons to inherit their parent color
       />
     );
   }
diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx
index 951ee666fc6..99527a23d5d 100644
--- a/src/components/call_out/call_out.tsx
+++ b/src/components/call_out/call_out.tsx
@@ -84,7 +84,7 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
           type={iconType}
           size="m"
           aria-hidden="true"
-          color="default" // forces app icons to inherit de parent color
+          color="default" // forces two-tone icons to inherit their parent color
         />
       );
     }
diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx
index ed039404462..2420169ca56 100644
--- a/src/components/context_menu/context_menu_item.tsx
+++ b/src/components/context_menu/context_menu_item.tsx
@@ -126,7 +126,7 @@ export class EuiContextMenuItem extends Component<Props> {
               type={icon}
               size="m"
               className="euiContextMenu__icon"
-              color="default" // forces app icons to inherit de parent color
+              color="default" // forces two-tone icons to inherit their parent color
             />
           );
           break;
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index c4b03e3646b..4908d39d30b 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -188,7 +188,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
       <EuiIcon
         className="euiListGroupItem__icon"
         type={iconType}
-        color="default" // forces app icons to inherit de parent color
+        color="default" // forces two-tone icons to inherit their parent color
       />
     );
 
diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx
index 44955df20b8..9a99fcad0d4 100644
--- a/src/components/suggest/suggest_item.tsx
+++ b/src/components/suggest/suggest_item.tsx
@@ -169,7 +169,7 @@ export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps> = ({
       <span className={`euiSuggestItem__type ${colorClass}`}>
         <EuiIcon
           type={type.iconType}
-          color="default" // forces app icons to inherit de parent color
+          color="default" // forces two-tone icons to inherit their parent color
         />
       </span>
       <span className={labelClassNames}>{label}</span>

From f8dfdac4b5fea7b785d0adf13bd8025fa890afd8 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 28 Apr 2021 16:16:22 +0100
Subject: [PATCH 05/10] Adding color inherit

---
 .../badge/__snapshots__/badge.test.tsx.snap   |   6 +-
 src/components/badge/badge.tsx                |   4 +-
 .../badge/beta_badge/beta_badge.tsx           |   2 +-
 .../collapsed_item_actions.test.tsx.snap      |   2 +-
 .../in_memory_table.test.tsx.snap             |  12 +-
 .../button/__snapshots__/button.test.tsx.snap |   6 +-
 .../button_content.test.tsx.snap              |   4 +-
 src/components/button/button_content.tsx      |   2 +-
 .../__snapshots__/button_empty.test.tsx.snap  |   6 +-
 .../__snapshots__/button_group.test.tsx.snap  | 168 +++++++++---------
 .../__snapshots__/button_icon.test.tsx.snap   |  42 ++---
 .../button/button_icon/button_icon.tsx        |   2 +-
 src/components/call_out/call_out.tsx          |   2 +-
 .../__snapshots__/card_select.test.tsx.snap   |   2 +-
 .../__snapshots__/code_block.test.tsx.snap    |   4 +-
 .../collapsible_nav.test.tsx.snap             |  16 +-
 .../context_menu/context_menu_item.tsx        |   2 +-
 .../__snapshots__/data_grid.test.tsx.snap     |  78 ++++----
 .../__snapshots__/filter_button.test.tsx.snap |   2 +-
 .../flyout/__snapshots__/flyout.test.tsx.snap |  28 +--
 .../field_password.test.tsx.snap              |   6 +-
 .../__snapshots__/super_select.test.tsx.snap  |  12 +-
 .../health/__snapshots__/health.test.tsx.snap |  22 +++
 .../icon/__snapshots__/icon.test.tsx.snap     |  19 +-
 src/components/icon/_variables.scss           |   2 +-
 src/components/icon/icon.tsx                  |   3 +-
 .../__snapshots__/list_group.test.tsx.snap    |   8 +-
 .../list_group_item.test.tsx.snap             |   8 +-
 src/components/list_group/list_group_item.tsx |   2 +-
 .../pinnable_list_group.test.tsx.snap         |  24 +--
 .../markdown_editor.test.tsx.snap             | 110 ++++++------
 .../__snapshots__/confirm_modal.test.tsx.snap |   4 +-
 .../modal/__snapshots__/modal.test.tsx.snap   |   2 +-
 .../notification_event.test.tsx.snap          |   4 +-
 ...tification_event_read_button.test.tsx.snap |   4 +-
 .../__snapshots__/pagination.test.tsx.snap    |   4 +-
 .../selectable_list_item.test.tsx.snap        |   2 +-
 .../__snapshots__/side_nav.test.tsx.snap      |  16 +-
 .../__snapshots__/suggest_item.test.tsx.snap  |  10 +-
 src/components/suggest/suggest_item.tsx       |   2 +-
 .../table_sort_mobile.test.tsx.snap           |   2 +-
 .../table_sort_mobile_item.test.tsx.snap      |   2 +-
 .../table_pagination.test.tsx.snap            |  10 +-
 43 files changed, 354 insertions(+), 314 deletions(-)

diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap
index 86874c2eaef..b4e2750db4d 100644
--- a/src/components/badge/__snapshots__/badge.test.tsx.snap
+++ b/src/components/badge/__snapshots__/badge.test.tsx.snap
@@ -309,7 +309,7 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
     </span>
     <span
       class="euiBadge__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
   </span>
@@ -331,7 +331,7 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
     </span>
     <span
       class="euiBadge__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
   </span>
@@ -353,7 +353,7 @@ exports[`EuiBadge props iconType is rendered 1`] = `
     </span>
     <span
       class="euiBadge__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
   </span>
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index c67cf072248..7f7d50eb4f9 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -259,9 +259,9 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
           <EuiIcon
             type={iconType}
             size="s"
+            color="inherit" // forces the icon to inherit its parent color
             {...closeButtonProps}
             className={closeClassNames}
-            color="default" // forces two-tone icons to inherit their parent color
           />
         </button>
       );
@@ -271,7 +271,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
           type={iconType}
           size={children ? 's' : 'm'}
           className="euiBadge__icon"
-          color="default" // forces two-tone icons to inherit their parent color
+          color="inherit" // forces the icon to inherit its parent color
         />
       );
     }
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index bfcac47f340..76026d9b9f3 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -103,7 +103,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
         type={iconType}
         size="m"
         aria-hidden="true"
-        color="default" // forces two-tone icons to inherit their parent color
+        color="inherit" // forces the icon to inherit its parent color
       />
     );
   }
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
index 3eb101a179f..4a2fae3ea4b 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`CollapsedItemActions render 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="boxesHorizontal"
         />
       </button>
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 2fc12089a08..6773be8bf0a 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -395,13 +395,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 >
                                   <EuiIcon
                                     className="euiButtonContent__icon"
-                                    color="default"
+                                    color="inherit"
                                     size="s"
                                     type="arrowDown"
                                   >
                                     <span
                                       className="euiButtonContent__icon"
-                                      color="default"
+                                      color="inherit"
                                       data-euiicon-type="arrowDown"
                                       size="s"
                                     />
@@ -476,14 +476,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 <EuiIcon
                                   aria-hidden="true"
                                   className="euiButtonIcon__icon"
-                                  color="default"
+                                  color="inherit"
                                   size="m"
                                   type="arrowLeft"
                                 >
                                   <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
-                                    color="default"
+                                    color="inherit"
                                     data-euiicon-type="arrowLeft"
                                     size="m"
                                   />
@@ -692,14 +692,14 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                 <EuiIcon
                                   aria-hidden="true"
                                   className="euiButtonIcon__icon"
-                                  color="default"
+                                  color="inherit"
                                   size="m"
                                   type="arrowRight"
                                 >
                                   <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
-                                    color="default"
+                                    color="inherit"
                                     data-euiicon-type="arrowRight"
                                     size="m"
                                   />
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 2669f617cdb..044185d87c3 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -185,7 +185,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
@@ -207,7 +207,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
@@ -229,7 +229,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
diff --git a/src/components/button/__snapshots__/button_content.test.tsx.snap b/src/components/button/__snapshots__/button_content.test.tsx.snap
index d438c7f3a60..aad7370431c 100644
--- a/src/components/button/__snapshots__/button_content.test.tsx.snap
+++ b/src/components/button/__snapshots__/button_content.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`EuiButtonContent props iconSide is rendered 1`] = `
 >
   <span
     class="euiButtonContent__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="bolt"
   />
   <span />
@@ -39,7 +39,7 @@ exports[`EuiButtonContent props iconType is rendered 1`] = `
 >
   <span
     class="euiButtonContent__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="bolt"
   />
   <span />
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index cecb9ca1300..037bdec3270 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -85,7 +85,7 @@ export const EuiButtonContent: FunctionComponent<
         className="euiButtonContent__icon"
         type={iconType}
         size={iconSize}
-        color="default" // forces two-tone icons to inherit their parent color
+        color="inherit" // forces the icon to inherit its parent color
       />
     );
   }
diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
index f833d7eed95..4736340ff80 100644
--- a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
+++ b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -200,7 +200,7 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
@@ -222,7 +222,7 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
@@ -244,7 +244,7 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
index fa099dc1621..63ab960d8e1 100644
--- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
+++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -47,7 +47,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -70,7 +70,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -107,7 +107,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -133,7 +133,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -163,7 +163,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -202,7 +202,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -224,7 +224,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -247,7 +247,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -284,7 +284,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -310,7 +310,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -340,7 +340,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -379,7 +379,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -401,7 +401,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -424,7 +424,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -461,7 +461,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -487,7 +487,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -517,7 +517,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -556,7 +556,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -578,7 +578,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -601,7 +601,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -638,7 +638,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -664,7 +664,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -694,7 +694,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -733,7 +733,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -755,7 +755,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -778,7 +778,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -815,7 +815,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -841,7 +841,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -871,7 +871,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -910,7 +910,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -932,7 +932,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -955,7 +955,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -992,7 +992,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1018,7 +1018,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1048,7 +1048,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1087,7 +1087,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1109,7 +1109,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1132,7 +1132,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1169,7 +1169,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1195,7 +1195,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1225,7 +1225,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1264,7 +1264,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1286,7 +1286,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1309,7 +1309,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1346,7 +1346,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1372,7 +1372,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1402,7 +1402,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1441,7 +1441,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1463,7 +1463,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1486,7 +1486,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1523,7 +1523,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1549,7 +1549,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1579,7 +1579,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1620,7 +1620,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1643,7 +1643,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1666,7 +1666,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1707,7 +1707,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1730,7 +1730,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1753,7 +1753,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1792,7 +1792,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1814,7 +1814,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1837,7 +1837,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1874,7 +1874,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1900,7 +1900,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1930,7 +1930,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1969,7 +1969,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -1991,7 +1991,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2014,7 +2014,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2051,7 +2051,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2077,7 +2077,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2107,7 +2107,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2144,7 +2144,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2171,7 +2171,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2201,7 +2201,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2240,7 +2240,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2262,7 +2262,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2285,7 +2285,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2326,7 +2326,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2348,7 +2348,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2371,7 +2371,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2410,7 +2410,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2436,7 +2436,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
@@ -2466,7 +2466,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="bolt"
         />
         <span
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
index 8c87ad8f717..5acdd8ddc52 100644
--- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
+++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`EuiButtonIcon is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -25,7 +25,7 @@ exports[`EuiButtonIcon props color accent is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -40,7 +40,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -55,7 +55,7 @@ exports[`EuiButtonIcon props color ghost is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -70,7 +70,7 @@ exports[`EuiButtonIcon props color primary is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -85,7 +85,7 @@ exports[`EuiButtonIcon props color subdued is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -100,7 +100,7 @@ exports[`EuiButtonIcon props color success is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -115,7 +115,7 @@ exports[`EuiButtonIcon props color text is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -130,7 +130,7 @@ exports[`EuiButtonIcon props color warning is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -145,7 +145,7 @@ exports[`EuiButtonIcon props display base is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -160,7 +160,7 @@ exports[`EuiButtonIcon props display empty is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -175,7 +175,7 @@ exports[`EuiButtonIcon props display fill is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -192,7 +192,7 @@ exports[`EuiButtonIcon props href secures the rel attribute when the target is _
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </a>
@@ -207,7 +207,7 @@ exports[`EuiButtonIcon props iconType is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -223,7 +223,7 @@ exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -239,7 +239,7 @@ exports[`EuiButtonIcon props isDisabled renders a button even when href is defin
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -255,7 +255,7 @@ exports[`EuiButtonIcon props isSelected is rendered as false 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -271,7 +271,7 @@ exports[`EuiButtonIcon props isSelected is rendered as true 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -286,7 +286,7 @@ exports[`EuiButtonIcon props size m is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -301,7 +301,7 @@ exports[`EuiButtonIcon props size s is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
@@ -316,7 +316,7 @@ exports[`EuiButtonIcon props size xs is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="user"
   />
 </button>
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index 8ae5c051671..5d0339cf2bc 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -190,7 +190,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
         type={iconType}
         size={iconSize}
         aria-hidden="true"
-        color="default" // forces two-tone icons to inherit their parent color
+        color="inherit" // forces the icon to inherit its parent color
       />
     );
   }
diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx
index 99527a23d5d..b42a12f491e 100644
--- a/src/components/call_out/call_out.tsx
+++ b/src/components/call_out/call_out.tsx
@@ -84,7 +84,7 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
           type={iconType}
           size="m"
           aria-hidden="true"
-          color="default" // forces two-tone icons to inherit their parent color
+          color="inherit" // forces the icon to inherit its parent color
         />
       );
     }
diff --git a/src/components/card/__snapshots__/card_select.test.tsx.snap b/src/components/card/__snapshots__/card_select.test.tsx.snap
index 8efba752c74..e09a992e541 100644
--- a/src/components/card/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/__snapshots__/card_select.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`EuiCardSelect props isSelected 1`] = `
   >
     <span
       class="euiButtonContent__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="check"
     />
     <span
diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index ead03336c3f..39a0a510ba2 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -112,7 +112,7 @@ console.log(some);
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="copy"
           />
         </button>
@@ -168,7 +168,7 @@ console.log(some);
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="fullScreen"
       />
     </button>
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 6138bb64aa9..ab021c7d1a5 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -59,7 +59,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="cross"
           />
           <span
@@ -112,7 +112,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="cross"
           />
           <span
@@ -167,7 +167,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="cross"
           />
           <span
@@ -216,7 +216,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="cross"
           />
           <span
@@ -265,7 +265,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="cross"
           />
           <span
@@ -313,7 +313,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="cross"
           />
           <span
@@ -362,7 +362,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="cross"
           />
           <span
@@ -416,7 +416,7 @@ Array [
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="cross"
           />
           <span
diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx
index 2420169ca56..11f6aefc5d8 100644
--- a/src/components/context_menu/context_menu_item.tsx
+++ b/src/components/context_menu/context_menu_item.tsx
@@ -126,7 +126,7 @@ export class EuiContextMenuItem extends Component<Props> {
               type={icon}
               size="m"
               className="euiContextMenu__icon"
-              color="default" // forces two-tone icons to inherit their parent color
+              color="inherit" // forces the icon to inherit its parent color
             />
           );
           break;
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index d3b9b664104..469c1f9c2a3 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
           >
             <span
               class="euiButtonContent__icon"
-              color="default"
+              color="inherit"
               data-euiicon-type="arrowDown"
             />
             <span
@@ -54,7 +54,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="arrowLeft"
         />
       </a>
@@ -118,7 +118,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="arrowRight"
         />
       </button>
@@ -158,12 +158,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="eyeClosed"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="eyeClosed"
           />
         </EuiIcon>
@@ -217,12 +217,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortUp"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortUp"
           />
         </EuiIcon>
@@ -300,12 +300,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortDown"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortDown"
           />
         </EuiIcon>
@@ -374,12 +374,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortLeft"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortLeft"
           />
         </EuiIcon>
@@ -424,12 +424,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortRight"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortRight"
           />
         </EuiIcon>
@@ -524,12 +524,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortUp"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortUp"
           />
         </EuiIcon>
@@ -607,12 +607,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortDown"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortDown"
           />
         </EuiIcon>
@@ -708,12 +708,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="eyeClosed"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="eyeClosed"
           />
         </EuiIcon>
@@ -749,12 +749,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortUp"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortUp"
           />
         </EuiIcon>
@@ -790,12 +790,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortDown"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortDown"
           />
         </EuiIcon>
@@ -830,12 +830,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortLeft"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortLeft"
           />
         </EuiIcon>
@@ -870,12 +870,12 @@ exports[`EuiDataGrid render column actions renders various column actions config
       >
         <EuiIcon
           className="euiListGroupItem__icon"
-          color="default"
+          color="inherit"
           type="sortRight"
         >
           <span
             className="euiListGroupItem__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="sortRight"
           />
         </EuiIcon>
@@ -960,7 +960,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
-                  color="default"
+                  color="inherit"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -989,7 +989,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
-                  color="default"
+                  color="inherit"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -1011,7 +1011,7 @@ Array [
           >
             <span
               class="euiButtonContent__icon"
-              color="default"
+              color="inherit"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -1302,7 +1302,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
-                  color="default"
+                  color="inherit"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -1331,7 +1331,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
-                  color="default"
+                  color="inherit"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -1353,7 +1353,7 @@ Array [
           >
             <span
               class="euiButtonContent__icon"
-              color="default"
+              color="inherit"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -1941,7 +1941,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
-                  color="default"
+                  color="inherit"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -1970,7 +1970,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
-                  color="default"
+                  color="inherit"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -1992,7 +1992,7 @@ Array [
           >
             <span
               class="euiButtonContent__icon"
-              color="default"
+              color="inherit"
               data-euiicon-type="fullScreen"
             />
             <span
@@ -2282,7 +2282,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
-                  color="default"
+                  color="inherit"
                   data-euiicon-type="listAdd"
                 />
                 <span
@@ -2311,7 +2311,7 @@ Array [
               >
                 <span
                   class="euiButtonContent__icon"
-                  color="default"
+                  color="inherit"
                   data-euiicon-type="tableDensityExpanded"
                 />
                 <span
@@ -2333,7 +2333,7 @@ Array [
           >
             <span
               class="euiButtonContent__icon"
-              color="default"
+              color="inherit"
               data-euiicon-type="fullScreen"
             />
             <span
diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
index d58011ce8d0..275fe5c8995 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
   >
     <span
       class="euiButtonContent__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="user"
     />
     <span
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 44a3c9a1d9b..87e945ced75 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -31,7 +31,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -75,7 +75,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -148,7 +148,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -192,7 +192,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -235,7 +235,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -279,7 +279,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -323,7 +323,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -366,7 +366,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -409,7 +409,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -452,7 +452,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -495,7 +495,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -538,7 +538,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -581,7 +581,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -624,7 +624,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
diff --git a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index 8e9a3a83cf1..68f5d12316e 100644
--- a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -112,7 +112,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="eye"
     />
   </button>
@@ -156,7 +156,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="eye"
     />
   </button>
@@ -338,7 +338,7 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="eye"
     />
   </button>
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index 9c0a8ed64ec..732e64ac9c5 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -213,7 +213,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
-                    color="default"
+                    color="inherit"
                     data-euiicon-type="empty"
                   />
                   <span
@@ -235,7 +235,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
-                    color="default"
+                    color="inherit"
                     data-euiicon-type="empty"
                   />
                   <span
@@ -491,7 +491,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
-                    color="default"
+                    color="inherit"
                     data-euiicon-type="check"
                   />
                   <span
@@ -514,7 +514,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
-                    color="default"
+                    color="inherit"
                     data-euiicon-type="empty"
                   />
                   <span
@@ -652,7 +652,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
-                    color="default"
+                    color="inherit"
                     data-euiicon-type="empty"
                   />
                   <span
@@ -674,7 +674,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
                 >
                   <span
                     class="euiContextMenu__icon"
-                    color="default"
+                    color="inherit"
                     data-euiicon-type="empty"
                   />
                   <span
diff --git a/src/components/health/__snapshots__/health.test.tsx.snap b/src/components/health/__snapshots__/health.test.tsx.snap
index 6e89b94c363..0c2581fea23 100644
--- a/src/components/health/__snapshots__/health.test.tsx.snap
+++ b/src/components/health/__snapshots__/health.test.tsx.snap
@@ -133,6 +133,28 @@ exports[`EuiHealth props color ghost is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiHealth props color inherit is rendered 1`] = `
+<div
+  class="euiHealth euiHealth--textSizeS"
+>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+  >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        color="inherit"
+        data-euiicon-type="dot"
+      />
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    />
+  </div>
+</div>
+`;
+
 exports[`EuiHealth props color primary is rendered 1`] = `
 <div
   class="euiHealth euiHealth--textSizeS"
diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
index dc40d8224ae..002e3bbbe54 100644
--- a/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`EuiIcon props color danger is rendered 1`] = `
 exports[`EuiIcon props color default is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--default euiIcon-isLoaded"
+  class="euiIcon euiIcon--medium euiIcon-isLoaded"
   focusable="false"
   height="16"
   role="img"
@@ -140,6 +140,23 @@ exports[`EuiIcon props color hsla(270, 60%, 70%, 0.9) is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props color inherit is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded"
+  focusable="false"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props color primary is rendered 1`] = `
 <svg
   aria-hidden="true"
diff --git a/src/components/icon/_variables.scss b/src/components/icon/_variables.scss
index 925df34591c..beb69441815 100644
--- a/src/components/icon/_variables.scss
+++ b/src/components/icon/_variables.scss
@@ -11,7 +11,7 @@ $euiIconColors: (
   subdued: $euiTextSubduedColor,
   text: $euiTextColor,
   warning: makeGraphicContrastColor($euiColorWarning),
-  default: inherit
+  inherit: inherit
 );
 
 $euiIconSizes: (
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 69b461f2a46..2f49aa15952 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -452,7 +452,7 @@ export type EuiIconType = keyof typeof typeToPathMap;
 export type IconType = EuiIconType | string | ComponentType;
 
 const colorToClassMap = {
-  default: 'euiIcon--default',
+  default: null,
   primary: 'euiIcon--primary',
   secondary: 'euiIcon--secondary',
   success: 'euiIcon--success',
@@ -462,6 +462,7 @@ const colorToClassMap = {
   text: 'euiIcon--text',
   subdued: 'euiIcon--subdued',
   ghost: 'euiIcon--ghost',
+  inherit: 'euiIcon--inherit',
 };
 
 export const COLORS: NamedColor[] = keysOf(colorToClassMap);
diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
index cdb3ad44734..81f44ee88c4 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`EuiListGroup listItems is rendered 1`] = `
     >
       <span
         class="euiListGroupItem__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="stop"
       />
       <span
@@ -52,7 +52,7 @@ exports[`EuiListGroup listItems is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="bell"
       />
     </button>
@@ -119,7 +119,7 @@ exports[`EuiListGroup listItems is rendered with color 1`] = `
     >
       <span
         class="euiListGroupItem__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="stop"
       />
       <span
@@ -151,7 +151,7 @@ exports[`EuiListGroup listItems is rendered with color 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="bell"
       />
     </button>
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
index c12b987664e..d6aa694e28e 100644
--- a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`EuiListGroupItem props extraAction can be disabled 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="empty"
     />
   </button>
@@ -153,7 +153,7 @@ exports[`EuiListGroupItem props extraAction is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="empty"
     />
   </button>
@@ -244,7 +244,7 @@ exports[`EuiListGroupItem props iconType is rendered 1`] = `
   >
     <span
       class="euiListGroupItem__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="empty"
     />
     <span
@@ -440,7 +440,7 @@ exports[`EuiListGroupItem throws a warning if both iconType and icon are provide
   >
     <span
       class="euiListGroupItem__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="empty"
     />
     <span
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index 4908d39d30b..f2f8816a7ac 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -188,7 +188,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
       <EuiIcon
         className="euiListGroupItem__icon"
         type={iconType}
-        color="default" // forces two-tone icons to inherit their parent color
+        color="inherit" // forces the icon to inherit its parent color
       />
     );
 
diff --git a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
index 34dc20aad01..aa7c6a98106 100644
--- a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
+++ b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     >
       <span
         class="euiListGroupItem__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="stop"
       />
       <span
@@ -33,7 +33,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -59,7 +59,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="bell"
       />
     </button>
@@ -88,7 +88,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -116,7 +116,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -145,7 +145,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -183,7 +183,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     >
       <span
         class="euiListGroupItem__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="stop"
       />
       <span
@@ -202,7 +202,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -228,7 +228,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="bell"
       />
     </button>
@@ -257,7 +257,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -285,7 +285,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="pinFilled"
       />
     </button>
@@ -314,7 +314,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="pinFilled"
       />
     </button>
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index c8dfb2c18d7..06f266ff588 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -38,7 +38,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -57,7 +57,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -73,7 +73,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -89,7 +89,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -108,7 +108,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="quote"
           />
         </button>
@@ -124,7 +124,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -140,7 +140,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -159,7 +159,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -174,7 +174,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="eye"
         />
         <span
@@ -213,7 +213,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
@@ -252,7 +252,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -268,7 +268,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -287,7 +287,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -303,7 +303,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -319,7 +319,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -338,7 +338,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="quote"
           />
         </button>
@@ -354,7 +354,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -370,7 +370,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -389,7 +389,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -404,7 +404,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="eye"
         />
         <span
@@ -443,7 +443,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
@@ -482,7 +482,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -498,7 +498,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -517,7 +517,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -533,7 +533,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -549,7 +549,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -568,7 +568,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="quote"
           />
         </button>
@@ -584,7 +584,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -600,7 +600,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -619,7 +619,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -634,7 +634,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="eye"
         />
         <span
@@ -673,7 +673,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
@@ -712,7 +712,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -728,7 +728,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -747,7 +747,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -763,7 +763,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -779,7 +779,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -798,7 +798,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="quote"
           />
         </button>
@@ -814,7 +814,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -830,7 +830,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -849,7 +849,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -864,7 +864,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="eye"
         />
         <span
@@ -903,7 +903,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
@@ -942,7 +942,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorBold"
           />
         </button>
@@ -958,7 +958,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorItalic"
           />
         </button>
@@ -977,7 +977,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorUnorderedList"
           />
         </button>
@@ -993,7 +993,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorOrderedList"
           />
         </button>
@@ -1009,7 +1009,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownCheckmark"
           />
         </button>
@@ -1028,7 +1028,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="quote"
           />
         </button>
@@ -1044,7 +1044,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorCodeBlock"
           />
         </button>
@@ -1060,7 +1060,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorLink"
           />
         </button>
@@ -1079,7 +1079,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="editorComment"
           />
         </button>
@@ -1094,7 +1094,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <span
           class="euiButtonContent__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="eye"
         />
         <span
@@ -1133,7 +1133,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
           <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="MarkdownLogo"
           />
         </button>
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index bd29458cbed..cf1cddd9f35 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -33,7 +33,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
@@ -146,7 +146,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index 73fee3a180b..23ccb522185 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -33,7 +33,7 @@ Array [
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="cross"
         />
       </button>
diff --git a/src/components/notification/__snapshots__/notification_event.test.tsx.snap b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
index 95e0a952bb5..cd51452d26c 100644
--- a/src/components/notification/__snapshots__/notification_event.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event.test.tsx.snap
@@ -403,7 +403,7 @@ exports[`EuiNotificationEvent props isRead  is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="dot"
       />
     </button>
@@ -749,7 +749,7 @@ exports[`EuiNotificationEvent props primaryActionProps is rendered 1`] = `
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="download"
           />
           <span
diff --git a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap
index 64772b27bf5..bafe9b2353a 100644
--- a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap
+++ b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiNotificationEventReadButton is rendered 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="dot"
   />
 </button>
@@ -28,7 +28,7 @@ exports[`EuiNotificationEventReadButton renders isRead to false 1`] = `
   <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
-    color="default"
+    color="inherit"
     data-euiicon-type="dot"
   />
 </button>
diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
index 1e6b71099c4..8d50f580d46 100644
--- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap
+++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`EuiPagination is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="arrowLeft"
     />
   </button>
@@ -53,7 +53,7 @@ exports[`EuiPagination is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="arrowRight"
     />
   </button>
diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
index b899d930ee6..77300df2a7f 100644
--- a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
+++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
@@ -140,7 +140,7 @@ exports[`EuiSelectableListItem props isFocused 1`] = `
         >
           <span
             class="euiBadge__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="returnKey"
           />
         </span>
diff --git a/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap b/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
index 7001685dd68..9c2d3c6c5d6 100644
--- a/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
+++ b/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`EuiSideNav is rendered 1`] = `
     >
       <span
         class="euiButtonContent__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="apps"
       />
       <span
@@ -42,7 +42,7 @@ exports[`EuiSideNav props isOpenOnMobile defaults to false 1`] = `
     >
       <span
         class="euiButtonContent__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="apps"
       />
       <span
@@ -69,7 +69,7 @@ exports[`EuiSideNav props isOpenOnMobile is rendered when specified as true 1`]
     >
       <span
         class="euiButtonContent__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="apps"
       />
       <span
@@ -96,7 +96,7 @@ exports[`EuiSideNav props items is rendered 1`] = `
     >
       <span
         class="euiButtonContent__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="apps"
       />
       <span
@@ -185,7 +185,7 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
     >
       <span
         class="euiButtonContent__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="apps"
       />
       <span
@@ -310,7 +310,7 @@ exports[`EuiSideNav props items renders items using a specified callback 1`] = `
     >
       <span
         class="euiButtonContent__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="apps"
       />
       <span
@@ -379,7 +379,7 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
     >
       <span
         class="euiButtonContent__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="apps"
       />
       <span
@@ -468,7 +468,7 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
     >
       <span
         class="euiButtonContent__icon"
-        color="default"
+        color="inherit"
         data-euiicon-type="apps"
       />
       <span
diff --git a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
index 11e03b7cabf..8b3e44d1143 100644
--- a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
+++ b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`EuiSuggestItem is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint1"
   >
     <span
-      color="default"
+      color="inherit"
       data-euiicon-type="search"
     />
   </span>
@@ -30,7 +30,7 @@ exports[`props descriptionDisplay as wrap is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <span
-      color="default"
+      color="inherit"
       data-euiicon-type="kqlValue"
     />
   </span>
@@ -55,7 +55,7 @@ exports[`props item with no description has expanded label is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <span
-      color="default"
+      color="inherit"
       data-euiicon-type="kqlValue"
     />
   </span>
@@ -75,7 +75,7 @@ exports[`props labelDisplay as expand is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <span
-      color="default"
+      color="inherit"
       data-euiicon-type="kqlValue"
     />
   </span>
@@ -100,7 +100,7 @@ exports[`props labelWidth is 30% is rendered 1`] = `
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
     <span
-      color="default"
+      color="inherit"
       data-euiicon-type="kqlValue"
     />
   </span>
diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx
index 9a99fcad0d4..5e552b2fed7 100644
--- a/src/components/suggest/suggest_item.tsx
+++ b/src/components/suggest/suggest_item.tsx
@@ -169,7 +169,7 @@ export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps> = ({
       <span className={`euiSuggestItem__type ${colorClass}`}>
         <EuiIcon
           type={type.iconType}
-          color="default" // forces two-tone icons to inherit their parent color
+          color="inherit" // forces the icon to inherit its parent color
         />
       </span>
       <span className={labelClassNames}>{label}</span>
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
index c24a25a8a00..653726f99b3 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`EuiTableSortMobile is rendered 1`] = `
         >
           <span
             class="euiButtonContent__icon"
-            color="default"
+            color="inherit"
             data-euiicon-type="arrowDown"
           />
           <span
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap
index 8be05006d85..91f244eb9ec 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiTableSortMobileItem is rendered 1`] = `
   >
     <span
       class="euiContextMenu__icon"
-      color="default"
+      color="inherit"
       data-euiicon-type="empty"
     />
     <span
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index 5fef93cc603..0fa07f8016b 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`EuiTablePagination is rendered 1`] = `
           >
             <span
               class="euiButtonContent__icon"
-              color="default"
+              color="inherit"
               data-euiicon-type="arrowDown"
             />
             <span
@@ -53,7 +53,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="arrowLeft"
         />
       </button>
@@ -173,7 +173,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="arrowRight"
         />
       </button>
@@ -206,7 +206,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="arrowLeft"
         />
       </button>
@@ -326,7 +326,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
-          color="default"
+          color="inherit"
           data-euiicon-type="arrowRight"
         />
       </button>

From 9150ad15d6c62fa4ddc0bff5d20c6af16ca14ac1 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 28 Apr 2021 16:51:04 +0100
Subject: [PATCH 06/10] Checking if icon has color applied

---
 src/components/icon/icon.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 2f49aa15952..5253ec9a1ab 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -692,15 +692,16 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
       typeof type === 'string' &&
       (/.+App$/.test(type) || /.+Job$/.test(type) || type === 'dataVisualizer');
 
-    // parent is not one of
+    const appIconHasColor = color && color !== 'default';
 
+    // parent is not one of
     const classes = classNames(
       'euiIcon',
       sizeToClassNameMap[size],
       optionalColorClass,
       {
-        // The app icon only gets the .euiIcon--app class if no color is passed
-        'euiIcon--app': isAppIcon && !color,
+        // The app icon only gets the .euiIcon--app class if no color is passed or if color="default" is passed
+        'euiIcon--app': isAppIcon && !appIconHasColor,
         'euiIcon-isLoading': isLoading,
         'euiIcon-isLoaded': !isLoading && neededLoading,
       },

From de8af1cca53d80ae5db224b6fc7e6ed047de3abb Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 28 Apr 2021 18:55:18 +0100
Subject: [PATCH 07/10] Color inherit example

---
 src-docs/src/views/icon/icon_colors_apps.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src-docs/src/views/icon/icon_colors_apps.js b/src-docs/src/views/icon/icon_colors_apps.js
index 72981da2670..4a711373ebc 100644
--- a/src-docs/src/views/icon/icon_colors_apps.js
+++ b/src-docs/src/views/icon/icon_colors_apps.js
@@ -27,6 +27,24 @@ export default () => (
       </EuiSplitPanel.Inner>
     </EuiSplitPanel.Outer>
     <EuiSpacer />
+    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
+      <EuiSplitPanel.Inner
+        className="eui-textCenter"
+        grow={false}
+        style={{ minWidth: 96 }}>
+        <EuiIcon type="gisApp" color="inherit" size="xl" />
+      </EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
+        <EuiCodeBlock
+          language="html"
+          isCopyable
+          transparentBackground
+          paddingSize="m">
+          {'<EuiIcon type="gisApp" color="inherit" size="xl" />'}
+        </EuiCodeBlock>
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+    <EuiSpacer />
     <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
       <EuiSplitPanel.Inner
         className="eui-textCenter"

From cc40fb9ed6240a5c8f1508a5637bda7145fb7496 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 30 Apr 2021 15:34:42 +0100
Subject: [PATCH 08/10] Addressing PR review

---
 CHANGELOG.md                                  |   4 +-
 src-docs/src/views/badge/badge_with_icon.js   |   2 +
 src-docs/src/views/badge/beta_badge.js        |   2 +
 src-docs/src/views/button/button_empty.js     |  24 ++-
 src-docs/src/views/button/button_icon.js      |  28 ++++
 src-docs/src/views/button/button_with_icon.js |  28 ++--
 src-docs/src/views/call_out/info.js           |   2 +-
 .../src/views/context_menu/context_menu.js    |  16 +-
 src-docs/src/views/icon/icon_colors.js        |   2 +-
 src-docs/src/views/icon/icon_colors_apps.js   | 152 ++++++------------
 src-docs/src/views/icon/icon_example.js       |   9 +-
 .../list_group/list_group_link_actions.js     |  30 +++-
 src/components/list_group/list_group_item.tsx |  11 +-
 13 files changed, 167 insertions(+), 143 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5860808f613..e07076c9e94 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,11 @@
 
 **Bug fixes**
 
-- Fixed a bug in `EuiIcon` where two-tone icons were not inheriting their parent color when nested in specific components ([#4760](https://github.com/elastic/eui/pull/4760))
 - Fixed `initialFocus` prop functionality in `EuiPopover` ([#4768](https://github.com/elastic/eui/pull/4768))
 - Fixed `description` prop in `EuiTable`([#4754](https://github.com/elastic/eui/pull/4754))
+- Added `inherit` color option to `EuiIcon` to force two-tone (app) icons to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
+- Updated `[EuiBetaBadge, EuiBadge, EuiButtonIcon, EuiButtonContent, EuiCallOut, EuiContextMenuItem, EuiListGroupItem]` icon usage to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
+- Added `iconProps` prop to `EuiListGroupItem` ([#4760](https://github.com/elastic/eui/pull/4760))
 
 ## [`32.3.0`](https://github.com/elastic/eui/tree/v32.3.0)
 
diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js
index 32605f416fb..3fa4168d769 100644
--- a/src-docs/src/views/badge/badge_with_icon.js
+++ b/src-docs/src/views/badge/badge_with_icon.js
@@ -10,6 +10,8 @@ export default () => (
 
     <EuiBadge iconType="check">Default</EuiBadge>
 
+    <EuiBadge iconType="lensApp">Primary with an app icon</EuiBadge>
+
     <EuiBadge iconType="returnKey" />
   </div>
 );
diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js
index f956c8e8765..b5a66e96d75 100644
--- a/src-docs/src/views/badge/beta_badge.js
+++ b/src-docs/src/views/badge/beta_badge.js
@@ -16,6 +16,8 @@ export default () => (
     />
     &emsp;
     <EuiBetaBadge label="Lab" iconType="beaker" />
+    &emsp;
+    <EuiBetaBadge label="Lens" iconType="lensApp" />
     <EuiSpacer />
     <EuiTitle size="s">
       <h3>
diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js
index 01c0fbe4fd7..0be22747a4b 100644
--- a/src-docs/src/views/button/button_empty.js
+++ b/src-docs/src/views/button/button_empty.js
@@ -51,7 +51,7 @@ export default () => (
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty onClick={() => {}} iconType="arrowDown">
-          Icon left
+          Primary with icon left
         </EuiButtonEmpty>
       </EuiFlexItem>
 
@@ -59,8 +59,26 @@ export default () => (
         <EuiButtonEmpty
           onClick={() => {}}
           iconType="arrowDown"
-          iconSide="right">
-          Icon right
+          iconSide="right"
+          size="xs">
+          Extra small with icon right
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty color="text" onClick={() => {}} iconType="dashboardApp">
+          Text with app icon left
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          color="text"
+          onClick={() => {}}
+          iconType="dashboardApp"
+          iconSide="right"
+          size="xs">
+          Extra small with app icon right
         </EuiButtonEmpty>
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js
index 6dd0be767b1..2ea144b06b2 100644
--- a/src-docs/src/views/button/button_icon.js
+++ b/src-docs/src/views/button/button_icon.js
@@ -88,5 +88,33 @@ export default () => (
         />
       </EuiFlexItem>
     </EuiFlexGroup>
+    <EuiSpacer size="m" />
+    <EuiTitle size="xxs">
+      <h3>Icons inherit by default the button color</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon iconType="heart" aria-label="Heart" color="accent" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          iconType="dashboardApp"
+          aria-label="Dashboard"
+          color="success"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="trash"
+          aria-label="Delete"
+          color="danger"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon display="base" iconType="lensApp" aria-label="Lens" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </>
 );
diff --git a/src-docs/src/views/button/button_with_icon.js b/src-docs/src/views/button/button_with_icon.js
index c11c1381350..c37f314d94f 100644
--- a/src-docs/src/views/button/button_with_icon.js
+++ b/src-docs/src/views/button/button_with_icon.js
@@ -10,25 +10,25 @@ export default () => (
   <div>
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiButton onClick={() => {}} iconType="arrowUp">
+        <EuiButton onClick={() => {}} iconType="heart">
           Primary
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton fill iconType="arrowDown" onClick={() => {}}>
+        <EuiButton fill iconType="lensApp" onClick={() => {}}>
           Filled
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton iconType="arrowLeft" size="s" onClick={() => {}}>
+        <EuiButton iconType="heart" size="s" onClick={() => {}}>
           small
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton iconType="arrowRight" size="s" fill onClick={() => {}}>
+        <EuiButton iconType="lensApp" size="s" fill onClick={() => {}}>
           small and filled
         </EuiButton>
       </EuiFlexItem>
@@ -36,17 +36,13 @@ export default () => (
 
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiButton iconSide="right" onClick={() => {}} iconType="arrowUp">
+        <EuiButton iconSide="right" onClick={() => {}} iconType="heart">
           Primary
         </EuiButton>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiButton
-          iconSide="right"
-          fill
-          iconType="arrowDown"
-          onClick={() => {}}>
+        <EuiButton iconSide="right" fill iconType="lensApp" onClick={() => {}}>
           Filled
         </EuiButton>
       </EuiFlexItem>
@@ -54,7 +50,7 @@ export default () => (
       <EuiFlexItem grow={false}>
         <EuiButton
           iconSide="right"
-          iconType="arrowLeft"
+          iconType="heart"
           size="s"
           onClick={() => {}}>
           small
@@ -64,7 +60,7 @@ export default () => (
       <EuiFlexItem grow={false}>
         <EuiButton
           iconSide="right"
-          iconType="arrowRight"
+          iconType="lensApp"
           size="s"
           fill
           onClick={() => {}}>
@@ -78,7 +74,7 @@ export default () => (
         <EuiButton
           iconSide="right"
           onClick={() => {}}
-          iconType="arrowUp"
+          iconType="heart"
           isDisabled>
           Disabled
         </EuiButton>
@@ -88,7 +84,7 @@ export default () => (
         <EuiButton
           iconSide="right"
           fill
-          iconType="arrowDown"
+          iconType="lensApp"
           onClick={() => {}}
           isDisabled>
           Filled
@@ -98,7 +94,7 @@ export default () => (
       <EuiFlexItem grow={false}>
         <EuiButton
           iconSide="right"
-          iconType="arrowLeft"
+          iconType="heart"
           size="s"
           onClick={() => {}}
           isDisabled>
@@ -109,7 +105,7 @@ export default () => (
       <EuiFlexItem grow={false}>
         <EuiButton
           iconSide="right"
-          iconType="arrowRight"
+          iconType="lensApp"
           size="s"
           fill
           onClick={() => {}}
diff --git a/src-docs/src/views/call_out/info.js b/src-docs/src/views/call_out/info.js
index c16d671d272..4ca71ab210d 100644
--- a/src-docs/src/views/call_out/info.js
+++ b/src-docs/src/views/call_out/info.js
@@ -22,7 +22,7 @@ export default () => (
 
     <EuiCallOut
       title="Callouts can exist as just a title. Simply omit the child content."
-      iconType="gear"
+      iconType="lensApp"
     />
 
     <EuiSpacer size="m" />
diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js
index 90973c95a23..90ce0f2f9f9 100644
--- a/src-docs/src/views/context_menu/context_menu.js
+++ b/src-docs/src/views/context_menu/context_menu.js
@@ -28,7 +28,7 @@ export default () => {
       items: [
         {
           name: 'Handle an onClick',
-          icon: <EuiIcon type="search" size="m" />,
+          icon: 'search',
           onClick: () => {
             closePopover();
           },
@@ -41,12 +41,12 @@ export default () => {
         },
         {
           name: 'Nest panels',
-          icon: 'user',
+          icon: 'wrench',
           panel: 1,
         },
         {
-          name: 'You can add a tooltip',
-          icon: 'user',
+          name: 'Add a tooltip',
+          icon: 'document',
           toolTipTitle: 'Optional tooltip',
           toolTipContent: 'Optional content for a tooltip',
           toolTipPosition: 'right',
@@ -54,6 +54,14 @@ export default () => {
             closePopover();
           },
         },
+        {
+          name: 'Use an app icon',
+          icon: 'visualizeApp',
+        },
+        {
+          name: 'Pass an icon as a component to customize it',
+          icon: <EuiIcon type="trash" size="m" color="danger" />,
+        },
         {
           name: 'Disabled option',
           icon: 'user',
diff --git a/src-docs/src/views/icon/icon_colors.js b/src-docs/src/views/icon/icon_colors.js
index 09dce2b5b08..33dd70f6dab 100644
--- a/src-docs/src/views/icon/icon_colors.js
+++ b/src-docs/src/views/icon/icon_colors.js
@@ -14,6 +14,7 @@ import {
 
 const iconColors = [
   'default',
+  'inherit',
   'primary',
   'success',
   'accent',
@@ -22,7 +23,6 @@ const iconColors = [
   'text',
   'subdued',
   'ghost',
-  '#490',
   '#DA8B45',
   '#DDDDDD',
 ];
diff --git a/src-docs/src/views/icon/icon_colors_apps.js b/src-docs/src/views/icon/icon_colors_apps.js
index 4a711373ebc..07d1600631f 100644
--- a/src-docs/src/views/icon/icon_colors_apps.js
+++ b/src-docs/src/views/icon/icon_colors_apps.js
@@ -1,120 +1,58 @@
 import React from 'react';
 
+import classNames from 'classnames';
+
 import {
+  EuiFlexGrid,
+  EuiFlexItem,
   EuiIcon,
+  EuiPanel,
   EuiSpacer,
   EuiCodeBlock,
-  EuiSplitPanel,
+  EuiCopy,
 } from '../../../../src/components';
 
+const iconColors = [
+  'default',
+  'inherit',
+  'primary',
+  'success',
+  'accent',
+  'warning',
+  'danger',
+  'text',
+  'subdued',
+  'ghost',
+  '#DA8B45',
+  '#DDDDDD',
+];
+
 export default () => (
   <>
-    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
-      <EuiSplitPanel.Inner
-        className="eui-textCenter"
-        grow={false}
-        style={{ minWidth: 96 }}>
-        <EuiIcon type="gisApp" size="xl" />
-      </EuiSplitPanel.Inner>
-      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
-        <EuiCodeBlock
-          language="html"
-          isCopyable
-          transparentBackground
-          paddingSize="m">
-          {'<EuiIcon type="gisApp" size="xl" />'}
-        </EuiCodeBlock>
-      </EuiSplitPanel.Inner>
-    </EuiSplitPanel.Outer>
-    <EuiSpacer />
-    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
-      <EuiSplitPanel.Inner
-        className="eui-textCenter"
-        grow={false}
-        style={{ minWidth: 96 }}>
-        <EuiIcon type="gisApp" color="inherit" size="xl" />
-      </EuiSplitPanel.Inner>
-      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
-        <EuiCodeBlock
-          language="html"
-          isCopyable
-          transparentBackground
-          paddingSize="m">
-          {'<EuiIcon type="gisApp" color="inherit" size="xl" />'}
-        </EuiCodeBlock>
-      </EuiSplitPanel.Inner>
-    </EuiSplitPanel.Outer>
-    <EuiSpacer />
-    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
-      <EuiSplitPanel.Inner
-        className="eui-textCenter"
-        grow={false}
-        style={{ minWidth: 96 }}>
-        <EuiIcon type="gisApp" color="default" size="xl" />
-      </EuiSplitPanel.Inner>
-      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
-        <EuiCodeBlock
-          language="html"
-          isCopyable
-          transparentBackground
-          paddingSize="m">
-          {'<EuiIcon type="gisApp" color="default" size="xl" />'}
-        </EuiCodeBlock>
-      </EuiSplitPanel.Inner>
-    </EuiSplitPanel.Outer>
-    <EuiSpacer />
-    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
-      <EuiSplitPanel.Inner
-        className="eui-textCenter"
-        grow={false}
-        style={{ minWidth: 96 }}>
-        <EuiIcon type="gisApp" color="primary" size="xl" />
-      </EuiSplitPanel.Inner>
-      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
-        <EuiCodeBlock
-          language="html"
-          isCopyable
-          transparentBackground
-          paddingSize="m">
-          {'<EuiIcon type="gisApp" color="primary" size="xl" />'}
-        </EuiCodeBlock>
-      </EuiSplitPanel.Inner>
-    </EuiSplitPanel.Outer>
-    <EuiSpacer />
-    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
-      <EuiSplitPanel.Inner
-        className="eui-textCenter"
-        grow={false}
-        style={{ minWidth: 96 }}>
-        <EuiIcon type="gisApp" color="text" size="xl" />
-      </EuiSplitPanel.Inner>
-      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
-        <EuiCodeBlock
-          language="html"
-          isCopyable
-          transparentBackground
-          paddingSize="m">
-          {'<EuiIcon type="gisApp" color="text" size="xl" />'}
-        </EuiCodeBlock>
-      </EuiSplitPanel.Inner>
-    </EuiSplitPanel.Outer>
+    <EuiCodeBlock language="html" isCopyable paddingSize="m">
+      {'<EuiIcon type="gisApp" color="primary" />'}
+    </EuiCodeBlock>
     <EuiSpacer />
-    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
-      <EuiSplitPanel.Inner
-        className="eui-textCenter"
-        grow={false}
-        style={{ minWidth: 96 }}>
-        <EuiIcon type="gisApp" color="#DA8B45" size="xl" />
-      </EuiSplitPanel.Inner>
-      <EuiSplitPanel.Inner paddingSize="s" color="subdued">
-        <EuiCodeBlock
-          language="html"
-          isCopyable
-          transparentBackground
-          paddingSize="m">
-          {'<EuiIcon type="gisApp" color="#DA8B45" size="xl" />'}
-        </EuiCodeBlock>
-      </EuiSplitPanel.Inner>
-    </EuiSplitPanel.Outer>
+    <EuiFlexGrid direction="column" columns={3}>
+      {iconColors.map((iconColor) => (
+        <EuiFlexItem key={iconColor}>
+          <EuiCopy display="block" textToCopy={`color="${iconColor}"`}>
+            {(copy) => (
+              <EuiPanel
+                hasShadow={false}
+                hasBorder={false}
+                onClick={copy}
+                className={classNames({
+                  guideDemo__ghostBackground: iconColor === 'ghost',
+                })}
+                paddingSize="s">
+                <EuiIcon type="gisApp" color={iconColor} />
+                &emsp; <small>{iconColor}</small>
+              </EuiPanel>
+            )}
+          </EuiCopy>
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGrid>
   </>
 );
diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js
index 84a5f49d6c3..ba12d9b6d91 100644
--- a/src-docs/src/views/icon/icon_example.js
+++ b/src-docs/src/views/icon/icon_example.js
@@ -203,15 +203,14 @@ export const IconExample = {
             <p>
               Two-tone icons, like our app style icons, will behave similarly to
               normal glyphs when provided a specific color by applying the color
-              to <strong>all</strong> the shapes within. Most of the time, you
-              just need to pass <EuiCode>color="default"</EuiCode> to force the
-              icon to inherit its color from its parent.
+              to <strong>all</strong> the shapes within. You can force the icon
+              to match the parent's text color by passing{' '}
+              <EuiCode>color="inherit"</EuiCode> to the icon.
             </p>
           </EuiText>
-          <EuiSpacer />
-          <AppIconColors />
         </>
       ),
+      demo: <AppIconColors />,
     },
     {
       title: 'Custom SVGs',
diff --git a/src-docs/src/views/list_group/list_group_link_actions.js b/src-docs/src/views/list_group/list_group_link_actions.js
index 56f41d90960..6cbdd4518a5 100644
--- a/src-docs/src/views/list_group/list_group_link_actions.js
+++ b/src-docs/src/views/list_group/list_group_link_actions.js
@@ -6,6 +6,7 @@ export default () => {
   const [favorite1, setFavorite1] = useState(undefined);
   const [favorite2, setFavorite2] = useState('link2');
   const [favorite3, setFavorite3] = useState(undefined);
+  const [favorite4, setFavorite4] = useState(undefined);
 
   const link1Clicked = () => {
     setFavorite1(favorite1 === 'link1' ? undefined : 'link1');
@@ -28,6 +29,13 @@ export default () => {
     }
   };
 
+  const link4Clicked = () => {
+    setFavorite4(favorite4 === 'link4' ? undefined : 'link4');
+    if (favorite3 === undefined) {
+      document.activeElement.blur();
+    }
+  };
+
   return (
     <EuiListGroup maxWidth={288}>
       <EuiListGroupItem
@@ -48,7 +56,7 @@ export default () => {
 
       <EuiListGroupItem
         id="link2"
-        iconType="beaker"
+        iconType="visualizeApp"
         onClick={() => {}}
         label="EUI button link"
         extraAction={{
@@ -63,8 +71,9 @@ export default () => {
 
       <EuiListGroupItem
         id="link3"
+        iconType="lensApp"
+        iconProps={{ color: 'default' }}
         onClick={() => {}}
-        iconType="broom"
         label="EUI button link"
         extraAction={{
           color: 'subdued',
@@ -73,12 +82,27 @@ export default () => {
           iconSize: 's',
           'aria-label': 'Favorite link3',
           alwaysShow: favorite3 === 'link3',
-          isDisabled: true,
         }}
       />
 
       <EuiListGroupItem
         id="link4"
+        onClick={() => {}}
+        iconType="broom"
+        label="EUI button link"
+        extraAction={{
+          color: 'subdued',
+          onClick: link4Clicked,
+          iconType: favorite4 === 'link4' ? 'starFilled' : 'starEmpty',
+          iconSize: 's',
+          'aria-label': 'Favorite link4',
+          alwaysShow: favorite3 === 'link4',
+          isDisabled: true,
+        }}
+      />
+
+      <EuiListGroupItem
+        id="link5"
         iconType="brush"
         isDisabled
         label="EUI button link"
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index f2f8816a7ac..3879059da04 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -30,7 +30,7 @@ import React, {
 import classNames from 'classnames';
 
 import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../button';
-import { EuiIcon, IconType } from '../icon';
+import { EuiIcon, IconType, EuiIconProps } from '../icon';
 import { EuiToolTip } from '../tool_tip';
 import { useInnerText } from '../inner_text';
 import { ExclusiveUnion, CommonProps } from '../common';
@@ -108,9 +108,14 @@ export type EuiListGroupItemProps = CommonProps &
      */
     iconType?: IconType;
 
+    /**
+     * Further extend the props applied to EuiIcon
+     */
+    iconProps?: Omit<EuiIconProps, 'type' | 'size'>;
+
     /**
      * Custom node to pass as the icon. Cannot be used in conjunction
-     * with `iconType`.
+     * with `iconType` and `iconProps`.
      */
     icon?: ReactElement;
 
@@ -155,6 +160,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   className,
   iconType,
   icon,
+  iconProps,
   extraAction,
   onClick,
   size = 'm',
@@ -189,6 +195,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
         className="euiListGroupItem__icon"
         type={iconType}
         color="inherit" // forces the icon to inherit its parent color
+        {...iconProps}
       />
     );
 

From 60a5d4588d68616b904015a932a2a65911c04367 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 30 Apr 2021 18:14:38 +0100
Subject: [PATCH 09/10] WIP

---
 src-docs/src/views/badge/badge_with_icon.js | 4 +++-
 src-docs/src/views/button/button_empty.js   | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js
index 3fa4168d769..ebad29e2b76 100644
--- a/src-docs/src/views/badge/badge_with_icon.js
+++ b/src-docs/src/views/badge/badge_with_icon.js
@@ -10,7 +10,9 @@ export default () => (
 
     <EuiBadge iconType="check">Default</EuiBadge>
 
-    <EuiBadge iconType="lensApp">Primary with an app icon</EuiBadge>
+    <EuiBadge iconType="lensApp" color="primary">
+      Primary with an app icon
+    </EuiBadge>
 
     <EuiBadge iconType="returnKey" />
   </div>
diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js
index 0be22747a4b..c0d860b759e 100644
--- a/src-docs/src/views/button/button_empty.js
+++ b/src-docs/src/views/button/button_empty.js
@@ -64,7 +64,9 @@ export default () => (
           Extra small with icon right
         </EuiButtonEmpty>
       </EuiFlexItem>
+    </EuiFlexGroup>
 
+    <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty color="text" onClick={() => {}} iconType="dashboardApp">
           Text with app icon left

From b5d4d2e4a9bf605a0ed6097a7cd0a8415170bc52 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 30 Apr 2021 18:29:30 +0100
Subject: [PATCH 10/10] CL and list group icon props

---
 CHANGELOG.md                                  | 7 ++++---
 src/components/list_group/list_group_item.tsx | 6 +++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e07076c9e94..45f2e8f2d90 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,12 +1,13 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `inherit` color option to `EuiIcon` to force two-tone (app) icons to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
+- Updated `EuiBetaBadge, EuiBadge, EuiButtonIcon, EuiButtonContent, EuiCallOut, EuiContextMenuItem, EuiListGroupItem` icon usage to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
+- Added `iconProps` prop to `EuiListGroupItem` ([#4760](https://github.com/elastic/eui/pull/4760))
+
 **Bug fixes**
 
 - Fixed `initialFocus` prop functionality in `EuiPopover` ([#4768](https://github.com/elastic/eui/pull/4768))
 - Fixed `description` prop in `EuiTable`([#4754](https://github.com/elastic/eui/pull/4754))
-- Added `inherit` color option to `EuiIcon` to force two-tone (app) icons to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
-- Updated `[EuiBetaBadge, EuiBadge, EuiButtonIcon, EuiButtonContent, EuiCallOut, EuiContextMenuItem, EuiListGroupItem]` icon usage to inherit their parent's color ([#4760](https://github.com/elastic/eui/pull/4760))
-- Added `iconProps` prop to `EuiListGroupItem` ([#4760](https://github.com/elastic/eui/pull/4760))
 
 ## [`32.3.0`](https://github.com/elastic/eui/tree/v32.3.0)
 
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index 3879059da04..e1b6ca3acf4 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -111,7 +111,7 @@ export type EuiListGroupItemProps = CommonProps &
     /**
      * Further extend the props applied to EuiIcon
      */
-    iconProps?: Omit<EuiIconProps, 'type' | 'size'>;
+    iconProps?: Omit<EuiIconProps, 'type'>;
 
     /**
      * Custom node to pass as the icon. Cannot be used in conjunction
@@ -192,10 +192,10 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   if (iconType) {
     iconNode = (
       <EuiIcon
-        className="euiListGroupItem__icon"
-        type={iconType}
         color="inherit" // forces the icon to inherit its parent color
         {...iconProps}
+        type={iconType}
+        className={classNames('euiListGroupItem__icon', iconProps?.className)}
       />
     );