diff --git a/src-docs/src/views/icon/playground.js b/src-docs/src/views/icon/playground.js
index 9ff0b40a685..84551d4e050 100644
--- a/src-docs/src/views/icon/playground.js
+++ b/src-docs/src/views/icon/playground.js
@@ -9,7 +9,8 @@ export default () => {
   const docgenInfo = Array.isArray(EuiIcon.__docgenInfo)
     ? EuiIcon.__docgenInfo[0]
     : EuiIcon.__docgenInfo;
-  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  const propsToUse = propUtilityForPlayground(docgenInfo.props, true);
 
   propsToUse.type = iconValidator({ ...propsToUse.type }, 'grid');
 
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index adc43f0d494..b4dd9725557 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -84,7 +84,7 @@ export type EuiBadgeProps = {
   /**
    * Props passed to the close button.
    */
-  closeButtonProps?: Partial<PropsOf<EuiIcon>>;
+  closeButtonProps?: Partial<PropsOf<typeof EuiIcon>>;
 } & CommonProps &
   ExclusiveUnion<WithIconOnClick, {}> &
   ExclusiveUnion<
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
index dc03011fdbf..7c0d89a0b33 100644
--- a/src/components/form/form_control_layout/_form_control_layout.scss
+++ b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -1,10 +1,8 @@
-@import '../../icon/variables';
-
 .euiFormControlLayout {
   // Let the height expand as needed
   @include euiFormControlSize($includeAlternates: true);
 
-  $iconSize: map-get($euiIconSizes, 'medium');
+  $iconSize: map-get($euiFormControlIconSizes, 'medium');
   $iconPadding: $euiFormControlPadding;
   $marginBetweenIcons: $euiFormControlPadding / 2;
 
@@ -16,7 +14,7 @@
       padding-right: $iconPadding + ($iconSize + $marginBetweenIcons) * $i;
 
       &[class*='compressed'] {
-        $iconSizeCompressed: map-get($euiIconSizes, 'small');
+        $iconSizeCompressed: map-get($euiFormControlIconSizes, 'small');
         $iconPaddingCompressed: $euiFormControlCompressedPadding;
 
         padding-right: $iconPaddingCompressed + ($iconSizeCompressed + $marginBetweenIcons) * $i;
diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
index 696386a4788..20db7f0a03e 100644
--- a/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -3,8 +3,9 @@
 exports[`EuiIcon is rendered 1`] = `
 <svg
   aria-label="aria-label"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded testClass1 testClass2"
+  class="euiIcon testClass1 testClass2 emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   data-test-subj="test subject string"
   focusable="false"
   height="16"
@@ -22,8 +23,9 @@ exports[`EuiIcon is rendered 1`] = `
 exports[`EuiIcon props color #885522 is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-customColor-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -41,8 +43,9 @@ exports[`EuiIcon props color #885522 is rendered 1`] = `
 exports[`EuiIcon props color #fde is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-customColor-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -60,8 +63,9 @@ exports[`EuiIcon props color #fde is rendered 1`] = `
 exports[`EuiIcon props color accent is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--accent euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-accent-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -78,8 +82,9 @@ exports[`EuiIcon props color accent is rendered 1`] = `
 exports[`EuiIcon props color danger is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--danger euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-danger-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -96,8 +101,9 @@ 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 emotion-euiIcon-m-default-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -114,8 +120,9 @@ exports[`EuiIcon props color default is rendered 1`] = `
 exports[`EuiIcon props color ghost is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--ghost euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-ghost-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -132,8 +139,9 @@ exports[`EuiIcon props color ghost is rendered 1`] = `
 exports[`EuiIcon props color hsla(270, 60%, 70%, 0.9) is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-customColor-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -151,8 +159,9 @@ exports[`EuiIcon props color hsla(270, 60%, 70%, 0.9) is rendered 1`] = `
 exports[`EuiIcon props color inherit is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-inherit-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -169,8 +178,9 @@ exports[`EuiIcon props color inherit is rendered 1`] = `
 exports[`EuiIcon props color primary is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--primary euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-primary-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -187,8 +197,9 @@ exports[`EuiIcon props color primary is rendered 1`] = `
 exports[`EuiIcon props color rgb(100, 150, 200) is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-customColor-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -206,8 +217,9 @@ exports[`EuiIcon props color rgb(100, 150, 200) is rendered 1`] = `
 exports[`EuiIcon props color subdued is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--subdued euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-subdued-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -224,8 +236,9 @@ exports[`EuiIcon props color subdued is rendered 1`] = `
 exports[`EuiIcon props color success is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--success euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-success-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -242,8 +255,9 @@ exports[`EuiIcon props color success is rendered 1`] = `
 exports[`EuiIcon props color text is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-text-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -260,8 +274,9 @@ exports[`EuiIcon props color text is rendered 1`] = `
 exports[`EuiIcon props color warning is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--warning euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-warning-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -278,8 +293,9 @@ exports[`EuiIcon props color warning is rendered 1`] = `
 exports[`EuiIcon props other props are passed through to the icon 1`] = `
 <svg
   aria-label="A Search Icon"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -299,8 +315,9 @@ exports[`EuiIcon props other props are passed through to the icon 1`] = `
 exports[`EuiIcon props size \${size} is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-original-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -317,8 +334,9 @@ exports[`EuiIcon props size \${size} is rendered 1`] = `
 exports[`EuiIcon props size \${size} is rendered 2`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--small euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-s-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -335,8 +353,9 @@ exports[`EuiIcon props size \${size} is rendered 2`] = `
 exports[`EuiIcon props size \${size} is rendered 3`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -353,8 +372,9 @@ exports[`EuiIcon props size \${size} is rendered 3`] = `
 exports[`EuiIcon props size \${size} is rendered 4`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--large euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-l-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -371,8 +391,9 @@ exports[`EuiIcon props size \${size} is rendered 4`] = `
 exports[`EuiIcon props size \${size} is rendered 5`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--xLarge euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-xl-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -389,8 +410,9 @@ exports[`EuiIcon props size \${size} is rendered 5`] = `
 exports[`EuiIcon props size \${size} is rendered 6`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--xxLarge euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-xxl-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -407,8 +429,9 @@ exports[`EuiIcon props size \${size} is rendered 6`] = `
 exports[`EuiIcon props tabIndex renders focusable="false" when -1 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -426,8 +449,9 @@ exports[`EuiIcon props tabIndex renders focusable="false" when -1 1`] = `
 exports[`EuiIcon props tabIndex renders focusable="false" when not provided 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -444,8 +468,9 @@ exports[`EuiIcon props tabIndex renders focusable="false" when not provided 1`]
 exports[`EuiIcon props tabIndex renders focusable="true" when 0 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="true"
   height="16"
   role="img"
@@ -463,8 +488,9 @@ exports[`EuiIcon props tabIndex renders focusable="true" when 0 1`] = `
 exports[`EuiIcon props title and titleId are passed and generate an aria-labelledby 1`] = `
 <svg
   aria-labelledby="id-test"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -486,8 +512,9 @@ exports[`EuiIcon props title and titleId are passed and generate an aria-labelle
 exports[`EuiIcon props type accessibility is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="accessibility"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -504,8 +531,9 @@ exports[`EuiIcon props type accessibility is rendered 1`] = `
 exports[`EuiIcon props type addDataApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="addDataApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -526,8 +554,9 @@ exports[`EuiIcon props type addDataApp is rendered 1`] = `
 exports[`EuiIcon props type advancedSettingsApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="advancedSettingsApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -562,8 +591,9 @@ exports[`EuiIcon props type advancedSettingsApp is rendered 1`] = `
 exports[`EuiIcon props type agentApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="agentApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -584,8 +614,9 @@ exports[`EuiIcon props type agentApp is rendered 1`] = `
 exports[`EuiIcon props type aggregate is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="aggregate"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -603,8 +634,9 @@ exports[`EuiIcon props type aggregate is rendered 1`] = `
 exports[`EuiIcon props type alert is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="alert"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -622,8 +654,9 @@ exports[`EuiIcon props type alert is rendered 1`] = `
 exports[`EuiIcon props type analyzeEvent is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="analyzeEvent"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -643,8 +676,9 @@ exports[`EuiIcon props type analyzeEvent is rendered 1`] = `
 exports[`EuiIcon props type annotation is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="annotation"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -661,8 +695,9 @@ exports[`EuiIcon props type annotation is rendered 1`] = `
 exports[`EuiIcon props type apmApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="apmApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -683,8 +718,9 @@ exports[`EuiIcon props type apmApp is rendered 1`] = `
 exports[`EuiIcon props type apmTrace is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="apmTrace"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -701,8 +737,9 @@ exports[`EuiIcon props type apmTrace is rendered 1`] = `
 exports[`EuiIcon props type appSearchApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="appSearchApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -725,8 +762,9 @@ exports[`EuiIcon props type appSearchApp is rendered 1`] = `
 exports[`EuiIcon props type apps is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="apps"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -743,8 +781,9 @@ exports[`EuiIcon props type apps is rendered 1`] = `
 exports[`EuiIcon props type arrowDown is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="arrowDown"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -764,8 +803,9 @@ exports[`EuiIcon props type arrowDown is rendered 1`] = `
 exports[`EuiIcon props type arrowEnd is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="arrowEnd"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -787,8 +827,9 @@ exports[`EuiIcon props type arrowEnd is rendered 1`] = `
 exports[`EuiIcon props type arrowLeft is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="arrowLeft"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -808,8 +849,9 @@ exports[`EuiIcon props type arrowLeft is rendered 1`] = `
 exports[`EuiIcon props type arrowRight is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="arrowRight"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -829,8 +871,9 @@ exports[`EuiIcon props type arrowRight is rendered 1`] = `
 exports[`EuiIcon props type arrowStart is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="arrowStart"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -852,8 +895,9 @@ exports[`EuiIcon props type arrowStart is rendered 1`] = `
 exports[`EuiIcon props type arrowUp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="arrowUp"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -873,8 +917,9 @@ exports[`EuiIcon props type arrowUp is rendered 1`] = `
 exports[`EuiIcon props type asterisk is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="asterisk"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -891,8 +936,9 @@ exports[`EuiIcon props type asterisk is rendered 1`] = `
 exports[`EuiIcon props type auditbeatApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="auditbeatApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -913,8 +959,9 @@ exports[`EuiIcon props type auditbeatApp is rendered 1`] = `
 exports[`EuiIcon props type beaker is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="beaker"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -931,8 +978,9 @@ exports[`EuiIcon props type beaker is rendered 1`] = `
 exports[`EuiIcon props type bell is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="bell"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -950,8 +998,9 @@ exports[`EuiIcon props type bell is rendered 1`] = `
 exports[`EuiIcon props type bellSlash is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="bellSlash"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -968,8 +1017,9 @@ exports[`EuiIcon props type bellSlash is rendered 1`] = `
 exports[`EuiIcon props type bolt is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="bolt"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -986,8 +1036,9 @@ exports[`EuiIcon props type bolt is rendered 1`] = `
 exports[`EuiIcon props type boxesHorizontal is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="boxesHorizontal"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1004,8 +1055,9 @@ exports[`EuiIcon props type boxesHorizontal is rendered 1`] = `
 exports[`EuiIcon props type boxesVertical is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="boxesVertical"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1022,8 +1074,9 @@ exports[`EuiIcon props type boxesVertical is rendered 1`] = `
 exports[`EuiIcon props type branch is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="branch"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1040,8 +1093,9 @@ exports[`EuiIcon props type branch is rendered 1`] = `
 exports[`EuiIcon props type branchUser is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="branchUser"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1063,8 +1117,9 @@ exports[`EuiIcon props type branchUser is rendered 1`] = `
 exports[`EuiIcon props type broom is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="broom"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1081,8 +1136,9 @@ exports[`EuiIcon props type broom is rendered 1`] = `
 exports[`EuiIcon props type brush is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="brush"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1099,8 +1155,9 @@ exports[`EuiIcon props type brush is rendered 1`] = `
 exports[`EuiIcon props type bug is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="bug"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1117,8 +1174,9 @@ exports[`EuiIcon props type bug is rendered 1`] = `
 exports[`EuiIcon props type bullseye is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="bullseye"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1135,8 +1193,9 @@ exports[`EuiIcon props type bullseye is rendered 1`] = `
 exports[`EuiIcon props type calendar is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="calendar"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1154,8 +1213,9 @@ exports[`EuiIcon props type calendar is rendered 1`] = `
 exports[`EuiIcon props type canvasApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="canvasApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1176,8 +1236,9 @@ exports[`EuiIcon props type canvasApp is rendered 1`] = `
 exports[`EuiIcon props type casesApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="casesApp"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="32"
@@ -1205,8 +1266,9 @@ exports[`EuiIcon props type casesApp is rendered 1`] = `
 exports[`EuiIcon props type check is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="check"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1224,8 +1286,9 @@ exports[`EuiIcon props type check is rendered 1`] = `
 exports[`EuiIcon props type checkInCircleFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="checkInCircleFilled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1243,8 +1306,9 @@ exports[`EuiIcon props type checkInCircleFilled is rendered 1`] = `
 exports[`EuiIcon props type cheer is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="cheer"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1261,8 +1325,9 @@ exports[`EuiIcon props type cheer is rendered 1`] = `
 exports[`EuiIcon props type classificationJob is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="classificationJob"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1283,8 +1348,9 @@ exports[`EuiIcon props type classificationJob is rendered 1`] = `
 exports[`EuiIcon props type clock is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="clock"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1302,8 +1368,9 @@ exports[`EuiIcon props type clock is rendered 1`] = `
 exports[`EuiIcon props type cloudDrizzle is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="cloudDrizzle"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1320,8 +1387,9 @@ exports[`EuiIcon props type cloudDrizzle is rendered 1`] = `
 exports[`EuiIcon props type cloudStormy is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="cloudStormy"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1338,8 +1406,9 @@ exports[`EuiIcon props type cloudStormy is rendered 1`] = `
 exports[`EuiIcon props type cloudSunny is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="cloudSunny"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1356,8 +1425,9 @@ exports[`EuiIcon props type cloudSunny is rendered 1`] = `
 exports[`EuiIcon props type codeApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="codeApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1378,8 +1448,9 @@ exports[`EuiIcon props type codeApp is rendered 1`] = `
 exports[`EuiIcon props type color is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="color"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1396,8 +1467,9 @@ exports[`EuiIcon props type color is rendered 1`] = `
 exports[`EuiIcon props type compute is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="compute"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1421,8 +1493,9 @@ exports[`EuiIcon props type compute is rendered 1`] = `
 exports[`EuiIcon props type console is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="console"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1439,8 +1512,9 @@ exports[`EuiIcon props type console is rendered 1`] = `
 exports[`EuiIcon props type consoleApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="consoleApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1464,8 +1538,9 @@ exports[`EuiIcon props type consoleApp is rendered 1`] = `
 exports[`EuiIcon props type continuityAbove is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="continuityAbove"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1482,8 +1557,9 @@ exports[`EuiIcon props type continuityAbove is rendered 1`] = `
 exports[`EuiIcon props type continuityAboveBelow is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="continuityAboveBelow"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1500,8 +1576,9 @@ exports[`EuiIcon props type continuityAboveBelow is rendered 1`] = `
 exports[`EuiIcon props type continuityBelow is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="continuityBelow"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1518,8 +1595,9 @@ exports[`EuiIcon props type continuityBelow is rendered 1`] = `
 exports[`EuiIcon props type continuityWithin is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="continuityWithin"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1536,8 +1614,9 @@ exports[`EuiIcon props type continuityWithin is rendered 1`] = `
 exports[`EuiIcon props type controlsHorizontal is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="controlsHorizontal"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1555,8 +1634,9 @@ exports[`EuiIcon props type controlsHorizontal is rendered 1`] = `
 exports[`EuiIcon props type controlsVertical is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="controlsVertical"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1574,8 +1654,9 @@ exports[`EuiIcon props type controlsVertical is rendered 1`] = `
 exports[`EuiIcon props type copy is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="copy"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1595,8 +1676,9 @@ exports[`EuiIcon props type copy is rendered 1`] = `
 exports[`EuiIcon props type copyClipboard is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="copyClipboard"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1616,8 +1698,9 @@ exports[`EuiIcon props type copyClipboard is rendered 1`] = `
 exports[`EuiIcon props type createAdvancedJob is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="createAdvancedJob"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1638,8 +1721,9 @@ exports[`EuiIcon props type createAdvancedJob is rendered 1`] = `
 exports[`EuiIcon props type createMultiMetricJob is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="createMultiMetricJob"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1660,8 +1744,9 @@ exports[`EuiIcon props type createMultiMetricJob is rendered 1`] = `
 exports[`EuiIcon props type createPopulationJob is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="createPopulationJob"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1682,8 +1767,9 @@ exports[`EuiIcon props type createPopulationJob is rendered 1`] = `
 exports[`EuiIcon props type createSingleMetricJob is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="createSingleMetricJob"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1704,8 +1790,9 @@ exports[`EuiIcon props type createSingleMetricJob is rendered 1`] = `
 exports[`EuiIcon props type cross is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="cross"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1722,8 +1809,9 @@ exports[`EuiIcon props type cross is rendered 1`] = `
 exports[`EuiIcon props type crossClusterReplicationApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="crossClusterReplicationApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1744,8 +1832,9 @@ exports[`EuiIcon props type crossClusterReplicationApp is rendered 1`] = `
 exports[`EuiIcon props type crossInACircleFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="crossInACircleFilled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1762,8 +1851,9 @@ exports[`EuiIcon props type crossInACircleFilled is rendered 1`] = `
 exports[`EuiIcon props type crosshairs is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="crosshairs"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1780,8 +1870,9 @@ exports[`EuiIcon props type crosshairs is rendered 1`] = `
 exports[`EuiIcon props type currency is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="currency"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1798,8 +1889,9 @@ exports[`EuiIcon props type currency is rendered 1`] = `
 exports[`EuiIcon props type cut is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="cut"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1817,8 +1909,9 @@ exports[`EuiIcon props type cut is rendered 1`] = `
 exports[`EuiIcon props type dashboardApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="dashboardApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1846,8 +1939,9 @@ exports[`EuiIcon props type dashboardApp is rendered 1`] = `
 exports[`EuiIcon props type dataVisualizer is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="dataVisualizer"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1868,8 +1962,9 @@ exports[`EuiIcon props type dataVisualizer is rendered 1`] = `
 exports[`EuiIcon props type database is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="database"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1886,8 +1981,9 @@ exports[`EuiIcon props type database is rendered 1`] = `
 exports[`EuiIcon props type desktop is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="desktop"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1909,8 +2005,9 @@ exports[`EuiIcon props type desktop is rendered 1`] = `
 exports[`EuiIcon props type devToolsApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="devToolsApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1931,8 +2028,9 @@ exports[`EuiIcon props type devToolsApp is rendered 1`] = `
 exports[`EuiIcon props type discoverApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="discoverApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -1953,8 +2051,9 @@ exports[`EuiIcon props type discoverApp is rendered 1`] = `
 exports[`EuiIcon props type document is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="document"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1971,8 +2070,9 @@ exports[`EuiIcon props type document is rendered 1`] = `
 exports[`EuiIcon props type documentEdit is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="documentEdit"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -1989,8 +2089,9 @@ exports[`EuiIcon props type documentEdit is rendered 1`] = `
 exports[`EuiIcon props type documentation is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="documentation"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2013,8 +2114,9 @@ exports[`EuiIcon props type documentation is rendered 1`] = `
 exports[`EuiIcon props type documents is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="documents"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2031,8 +2133,9 @@ exports[`EuiIcon props type documents is rendered 1`] = `
 exports[`EuiIcon props type dot is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="dot"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2051,8 +2154,9 @@ exports[`EuiIcon props type dot is rendered 1`] = `
 exports[`EuiIcon props type doubleArrowLeft is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="doubleArrowLeft"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -2077,8 +2181,9 @@ exports[`EuiIcon props type doubleArrowLeft is rendered 1`] = `
 exports[`EuiIcon props type doubleArrowRight is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="doubleArrowRight"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -2103,8 +2208,9 @@ exports[`EuiIcon props type doubleArrowRight is rendered 1`] = `
 exports[`EuiIcon props type download is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="download"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2124,8 +2230,9 @@ exports[`EuiIcon props type download is rendered 1`] = `
 exports[`EuiIcon props type editorAlignCenter is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorAlignCenter"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2142,8 +2249,9 @@ exports[`EuiIcon props type editorAlignCenter is rendered 1`] = `
 exports[`EuiIcon props type editorAlignLeft is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorAlignLeft"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2160,8 +2268,9 @@ exports[`EuiIcon props type editorAlignLeft is rendered 1`] = `
 exports[`EuiIcon props type editorAlignRight is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorAlignRight"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2178,8 +2287,9 @@ exports[`EuiIcon props type editorAlignRight is rendered 1`] = `
 exports[`EuiIcon props type editorBold is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorBold"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2196,8 +2306,9 @@ exports[`EuiIcon props type editorBold is rendered 1`] = `
 exports[`EuiIcon props type editorChecklist is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorChecklist"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -2215,8 +2326,9 @@ exports[`EuiIcon props type editorChecklist is rendered 1`] = `
 exports[`EuiIcon props type editorCodeBlock is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorCodeBlock"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2233,8 +2345,9 @@ exports[`EuiIcon props type editorCodeBlock is rendered 1`] = `
 exports[`EuiIcon props type editorComment is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorComment"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2251,8 +2364,9 @@ exports[`EuiIcon props type editorComment is rendered 1`] = `
 exports[`EuiIcon props type editorDistributeHorizontal is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorDistributeHorizontal"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2269,8 +2383,9 @@ exports[`EuiIcon props type editorDistributeHorizontal is rendered 1`] = `
 exports[`EuiIcon props type editorDistributeVertical is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorDistributeVertical"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2287,8 +2402,9 @@ exports[`EuiIcon props type editorDistributeVertical is rendered 1`] = `
 exports[`EuiIcon props type editorHeading is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorHeading"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2305,8 +2421,9 @@ exports[`EuiIcon props type editorHeading is rendered 1`] = `
 exports[`EuiIcon props type editorItalic is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorItalic"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2323,8 +2440,9 @@ exports[`EuiIcon props type editorItalic is rendered 1`] = `
 exports[`EuiIcon props type editorItemAlignBottom is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorItemAlignBottom"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2341,8 +2459,9 @@ exports[`EuiIcon props type editorItemAlignBottom is rendered 1`] = `
 exports[`EuiIcon props type editorItemAlignCenter is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorItemAlignCenter"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2359,8 +2478,9 @@ exports[`EuiIcon props type editorItemAlignCenter is rendered 1`] = `
 exports[`EuiIcon props type editorItemAlignLeft is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorItemAlignLeft"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2377,8 +2497,9 @@ exports[`EuiIcon props type editorItemAlignLeft is rendered 1`] = `
 exports[`EuiIcon props type editorItemAlignMiddle is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorItemAlignMiddle"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2395,8 +2516,9 @@ exports[`EuiIcon props type editorItemAlignMiddle is rendered 1`] = `
 exports[`EuiIcon props type editorItemAlignRight is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorItemAlignRight"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2413,8 +2535,9 @@ exports[`EuiIcon props type editorItemAlignRight is rendered 1`] = `
 exports[`EuiIcon props type editorItemAlignTop is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorItemAlignTop"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2431,8 +2554,9 @@ exports[`EuiIcon props type editorItemAlignTop is rendered 1`] = `
 exports[`EuiIcon props type editorLink is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorLink"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2449,8 +2573,9 @@ exports[`EuiIcon props type editorLink is rendered 1`] = `
 exports[`EuiIcon props type editorOrderedList is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorOrderedList"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2467,8 +2592,9 @@ exports[`EuiIcon props type editorOrderedList is rendered 1`] = `
 exports[`EuiIcon props type editorPositionBottomLeft is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorPositionBottomLeft"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2485,8 +2611,9 @@ exports[`EuiIcon props type editorPositionBottomLeft is rendered 1`] = `
 exports[`EuiIcon props type editorPositionBottomRight is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorPositionBottomRight"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2503,8 +2630,9 @@ exports[`EuiIcon props type editorPositionBottomRight is rendered 1`] = `
 exports[`EuiIcon props type editorPositionTopLeft is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorPositionTopLeft"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2521,8 +2649,9 @@ exports[`EuiIcon props type editorPositionTopLeft is rendered 1`] = `
 exports[`EuiIcon props type editorPositionTopRight is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorPositionTopRight"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2539,8 +2668,9 @@ exports[`EuiIcon props type editorPositionTopRight is rendered 1`] = `
 exports[`EuiIcon props type editorRedo is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorRedo"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2557,8 +2687,9 @@ exports[`EuiIcon props type editorRedo is rendered 1`] = `
 exports[`EuiIcon props type editorStrike is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorStrike"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2575,8 +2706,9 @@ exports[`EuiIcon props type editorStrike is rendered 1`] = `
 exports[`EuiIcon props type editorTable is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorTable"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2593,8 +2725,9 @@ exports[`EuiIcon props type editorTable is rendered 1`] = `
 exports[`EuiIcon props type editorUnderline is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorUnderline"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2611,8 +2744,9 @@ exports[`EuiIcon props type editorUnderline is rendered 1`] = `
 exports[`EuiIcon props type editorUndo is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorUndo"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2629,8 +2763,9 @@ exports[`EuiIcon props type editorUndo is rendered 1`] = `
 exports[`EuiIcon props type editorUnorderedList is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="editorUnorderedList"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2647,8 +2782,9 @@ exports[`EuiIcon props type editorUnorderedList is rendered 1`] = `
 exports[`EuiIcon props type email is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="email"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2666,8 +2802,9 @@ exports[`EuiIcon props type email is rendered 1`] = `
 exports[`EuiIcon props type empty is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="empty"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2680,8 +2817,9 @@ exports[`EuiIcon props type empty is rendered 1`] = `
 exports[`EuiIcon props type emsApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="emsApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -2702,8 +2840,9 @@ exports[`EuiIcon props type emsApp is rendered 1`] = `
 exports[`EuiIcon props type eql is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="eql"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2723,8 +2862,9 @@ exports[`EuiIcon props type eql is rendered 1`] = `
 exports[`EuiIcon props type eraser is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="eraser"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2744,8 +2884,9 @@ exports[`EuiIcon props type eraser is rendered 1`] = `
 exports[`EuiIcon props type exit is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="exit"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2763,8 +2904,9 @@ exports[`EuiIcon props type exit is rendered 1`] = `
 exports[`EuiIcon props type expand is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="expand"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2782,8 +2924,9 @@ exports[`EuiIcon props type expand is rendered 1`] = `
 exports[`EuiIcon props type expandMini is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="expandMini"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2801,8 +2944,9 @@ exports[`EuiIcon props type expandMini is rendered 1`] = `
 exports[`EuiIcon props type exportAction is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="exportAction"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2819,8 +2963,9 @@ exports[`EuiIcon props type exportAction is rendered 1`] = `
 exports[`EuiIcon props type eye is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="eye"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2837,8 +2982,9 @@ exports[`EuiIcon props type eye is rendered 1`] = `
 exports[`EuiIcon props type eyeClosed is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="eyeClosed"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2855,8 +3001,9 @@ exports[`EuiIcon props type eyeClosed is rendered 1`] = `
 exports[`EuiIcon props type faceHappy is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="faceHappy"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2873,8 +3020,9 @@ exports[`EuiIcon props type faceHappy is rendered 1`] = `
 exports[`EuiIcon props type faceNeutral is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="faceNeutral"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2892,8 +3040,9 @@ exports[`EuiIcon props type faceNeutral is rendered 1`] = `
 exports[`EuiIcon props type faceSad is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="faceSad"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2910,8 +3059,9 @@ exports[`EuiIcon props type faceSad is rendered 1`] = `
 exports[`EuiIcon props type filebeatApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="filebeatApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -2932,8 +3082,9 @@ exports[`EuiIcon props type filebeatApp is rendered 1`] = `
 exports[`EuiIcon props type filter is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="filter"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2951,8 +3102,9 @@ exports[`EuiIcon props type filter is rendered 1`] = `
 exports[`EuiIcon props type flag is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="flag"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -2969,8 +3121,9 @@ exports[`EuiIcon props type flag is rendered 1`] = `
 exports[`EuiIcon props type fleetApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="fleetApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -3001,8 +3154,9 @@ exports[`EuiIcon props type fleetApp is rendered 1`] = `
 exports[`EuiIcon props type fold is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="fold"
+  data-is-loaded="true"
   focusable="false"
   role="img"
   viewBox="0 0 16 16"
@@ -3017,8 +3171,9 @@ exports[`EuiIcon props type fold is rendered 1`] = `
 exports[`EuiIcon props type folderCheck is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="folderCheck"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3036,8 +3191,9 @@ exports[`EuiIcon props type folderCheck is rendered 1`] = `
 exports[`EuiIcon props type folderClosed is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="folderClosed"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3054,8 +3210,9 @@ exports[`EuiIcon props type folderClosed is rendered 1`] = `
 exports[`EuiIcon props type folderExclamation is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="folderExclamation"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3073,8 +3230,9 @@ exports[`EuiIcon props type folderExclamation is rendered 1`] = `
 exports[`EuiIcon props type folderOpen is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="folderOpen"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3091,8 +3249,9 @@ exports[`EuiIcon props type folderOpen is rendered 1`] = `
 exports[`EuiIcon props type frameNext is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="frameNext"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -3111,8 +3270,9 @@ exports[`EuiIcon props type frameNext is rendered 1`] = `
 exports[`EuiIcon props type framePrevious is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="framePrevious"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -3131,8 +3291,9 @@ exports[`EuiIcon props type framePrevious is rendered 1`] = `
 exports[`EuiIcon props type fullScreen is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="fullScreen"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3150,8 +3311,9 @@ exports[`EuiIcon props type fullScreen is rendered 1`] = `
 exports[`EuiIcon props type fullScreenExit is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="fullScreenExit"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3168,8 +3330,9 @@ exports[`EuiIcon props type fullScreenExit is rendered 1`] = `
 exports[`EuiIcon props type function is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="function"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3186,8 +3349,9 @@ exports[`EuiIcon props type function is rendered 1`] = `
 exports[`EuiIcon props type gear is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="gear"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3204,8 +3368,9 @@ exports[`EuiIcon props type gear is rendered 1`] = `
 exports[`EuiIcon props type gisApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="gisApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -3226,8 +3391,9 @@ exports[`EuiIcon props type gisApp is rendered 1`] = `
 exports[`EuiIcon props type glasses is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="glasses"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3244,8 +3410,9 @@ exports[`EuiIcon props type glasses is rendered 1`] = `
 exports[`EuiIcon props type globe is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="globe"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3262,8 +3429,9 @@ exports[`EuiIcon props type globe is rendered 1`] = `
 exports[`EuiIcon props type grab is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="grab"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3281,8 +3449,9 @@ exports[`EuiIcon props type grab is rendered 1`] = `
 exports[`EuiIcon props type grabHorizontal is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="grabHorizontal"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3300,8 +3469,9 @@ exports[`EuiIcon props type grabHorizontal is rendered 1`] = `
 exports[`EuiIcon props type graphApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="graphApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -3322,8 +3492,9 @@ exports[`EuiIcon props type graphApp is rendered 1`] = `
 exports[`EuiIcon props type grid is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="grid"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3340,8 +3511,9 @@ exports[`EuiIcon props type grid is rendered 1`] = `
 exports[`EuiIcon props type grokApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="grokApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -3362,8 +3534,9 @@ exports[`EuiIcon props type grokApp is rendered 1`] = `
 exports[`EuiIcon props type heart is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="heart"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3380,8 +3553,9 @@ exports[`EuiIcon props type heart is rendered 1`] = `
 exports[`EuiIcon props type heartbeatApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="heartbeatApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -3402,8 +3576,9 @@ exports[`EuiIcon props type heartbeatApp is rendered 1`] = `
 exports[`EuiIcon props type heatmap is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="heatmap"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3420,8 +3595,9 @@ exports[`EuiIcon props type heatmap is rendered 1`] = `
 exports[`EuiIcon props type help is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="help"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3439,8 +3615,9 @@ exports[`EuiIcon props type help is rendered 1`] = `
 exports[`EuiIcon props type home is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="home"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3457,8 +3634,9 @@ exports[`EuiIcon props type home is rendered 1`] = `
 exports[`EuiIcon props type iInCircle is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="iInCircle"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3476,8 +3654,9 @@ exports[`EuiIcon props type iInCircle is rendered 1`] = `
 exports[`EuiIcon props type image is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="image"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3494,8 +3673,9 @@ exports[`EuiIcon props type image is rendered 1`] = `
 exports[`EuiIcon props type importAction is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="importAction"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3512,8 +3692,9 @@ exports[`EuiIcon props type importAction is rendered 1`] = `
 exports[`EuiIcon props type indexClose is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="indexClose"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3530,8 +3711,9 @@ exports[`EuiIcon props type indexClose is rendered 1`] = `
 exports[`EuiIcon props type indexEdit is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="indexEdit"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3548,8 +3730,9 @@ exports[`EuiIcon props type indexEdit is rendered 1`] = `
 exports[`EuiIcon props type indexFlush is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="indexFlush"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3567,8 +3750,9 @@ exports[`EuiIcon props type indexFlush is rendered 1`] = `
 exports[`EuiIcon props type indexManagementApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="indexManagementApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -3592,8 +3776,9 @@ exports[`EuiIcon props type indexManagementApp is rendered 1`] = `
 exports[`EuiIcon props type indexMapping is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="indexMapping"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3610,8 +3795,9 @@ exports[`EuiIcon props type indexMapping is rendered 1`] = `
 exports[`EuiIcon props type indexOpen is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="indexOpen"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3628,8 +3814,9 @@ exports[`EuiIcon props type indexOpen is rendered 1`] = `
 exports[`EuiIcon props type indexPatternApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="indexPatternApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -3650,8 +3837,9 @@ exports[`EuiIcon props type indexPatternApp is rendered 1`] = `
 exports[`EuiIcon props type indexRollupApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="indexRollupApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -3678,8 +3866,9 @@ exports[`EuiIcon props type indexRollupApp is rendered 1`] = `
 exports[`EuiIcon props type indexRuntime is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="indexRuntime"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3699,8 +3888,9 @@ exports[`EuiIcon props type indexRuntime is rendered 1`] = `
 exports[`EuiIcon props type indexSettings is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="indexSettings"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3723,8 +3913,9 @@ exports[`EuiIcon props type indexSettings is rendered 1`] = `
 exports[`EuiIcon props type inputOutput is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="inputOutput"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3747,8 +3938,9 @@ exports[`EuiIcon props type inputOutput is rendered 1`] = `
 exports[`EuiIcon props type inspect is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="inspect"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3765,8 +3957,9 @@ exports[`EuiIcon props type inspect is rendered 1`] = `
 exports[`EuiIcon props type invert is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="invert"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3786,8 +3979,9 @@ exports[`EuiIcon props type invert is rendered 1`] = `
 exports[`EuiIcon props type ip is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="ip"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3804,8 +3998,9 @@ exports[`EuiIcon props type ip is rendered 1`] = `
 exports[`EuiIcon props type keyboardShortcut is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="keyboardShortcut"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3822,8 +4017,9 @@ exports[`EuiIcon props type keyboardShortcut is rendered 1`] = `
 exports[`EuiIcon props type kqlField is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="kqlField"
+  data-is-loaded="true"
   focusable="false"
   height="10"
   role="img"
@@ -3840,8 +4036,9 @@ exports[`EuiIcon props type kqlField is rendered 1`] = `
 exports[`EuiIcon props type kqlFunction is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="kqlFunction"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3858,8 +4055,9 @@ exports[`EuiIcon props type kqlFunction is rendered 1`] = `
 exports[`EuiIcon props type kqlOperand is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="kqlOperand"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3876,8 +4074,9 @@ exports[`EuiIcon props type kqlOperand is rendered 1`] = `
 exports[`EuiIcon props type kqlSelector is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="kqlSelector"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3894,8 +4093,9 @@ exports[`EuiIcon props type kqlSelector is rendered 1`] = `
 exports[`EuiIcon props type kqlValue is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="kqlValue"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3912,8 +4112,9 @@ exports[`EuiIcon props type kqlValue is rendered 1`] = `
 exports[`EuiIcon props type layers is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="layers"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3936,8 +4137,9 @@ exports[`EuiIcon props type layers is rendered 1`] = `
 exports[`EuiIcon props type lensApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="lensApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -3958,8 +4160,9 @@ exports[`EuiIcon props type lensApp is rendered 1`] = `
 exports[`EuiIcon props type lettering is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="lettering"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3977,8 +4180,9 @@ exports[`EuiIcon props type lettering is rendered 1`] = `
 exports[`EuiIcon props type lineDashed is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="lineDashed"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -3995,8 +4199,9 @@ exports[`EuiIcon props type lineDashed is rendered 1`] = `
 exports[`EuiIcon props type lineDotted is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="lineDotted"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -4013,8 +4218,9 @@ exports[`EuiIcon props type lineDotted is rendered 1`] = `
 exports[`EuiIcon props type lineSolid is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="lineSolid"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -4031,8 +4237,9 @@ exports[`EuiIcon props type lineSolid is rendered 1`] = `
 exports[`EuiIcon props type link is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="link"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -4049,8 +4256,9 @@ exports[`EuiIcon props type link is rendered 1`] = `
 exports[`EuiIcon props type list is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="list"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -4067,8 +4275,9 @@ exports[`EuiIcon props type list is rendered 1`] = `
 exports[`EuiIcon props type listAdd is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="listAdd"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -4085,8 +4294,9 @@ exports[`EuiIcon props type listAdd is rendered 1`] = `
 exports[`EuiIcon props type lock is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="lock"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -4103,8 +4313,9 @@ exports[`EuiIcon props type lock is rendered 1`] = `
 exports[`EuiIcon props type lockOpen is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="lockOpen"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -4121,8 +4332,9 @@ exports[`EuiIcon props type lockOpen is rendered 1`] = `
 exports[`EuiIcon props type logoAWS is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoAWS"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4155,8 +4367,9 @@ exports[`EuiIcon props type logoAWS is rendered 1`] = `
 exports[`EuiIcon props type logoAWSMono is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoAWSMono"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4184,8 +4397,9 @@ exports[`EuiIcon props type logoAWSMono is rendered 1`] = `
 exports[`EuiIcon props type logoAerospike is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoAerospike"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4211,8 +4425,9 @@ exports[`EuiIcon props type logoAerospike is rendered 1`] = `
 exports[`EuiIcon props type logoApache is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoApache"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4431,8 +4646,9 @@ exports[`EuiIcon props type logoApache is rendered 1`] = `
 exports[`EuiIcon props type logoAppSearch is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoAppSearch"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4458,8 +4674,9 @@ exports[`EuiIcon props type logoAppSearch is rendered 1`] = `
 exports[`EuiIcon props type logoAzure is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoAzure"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4477,8 +4694,9 @@ exports[`EuiIcon props type logoAzure is rendered 1`] = `
 exports[`EuiIcon props type logoAzureMono is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoAzureMono"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4495,8 +4713,9 @@ exports[`EuiIcon props type logoAzureMono is rendered 1`] = `
 exports[`EuiIcon props type logoBeats is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoBeats"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4522,8 +4741,9 @@ exports[`EuiIcon props type logoBeats is rendered 1`] = `
 exports[`EuiIcon props type logoBusinessAnalytics is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoBusinessAnalytics"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4554,8 +4774,9 @@ exports[`EuiIcon props type logoBusinessAnalytics is rendered 1`] = `
 exports[`EuiIcon props type logoCeph is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoCeph"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="32"
@@ -4574,8 +4795,9 @@ exports[`EuiIcon props type logoCeph is rendered 1`] = `
 exports[`EuiIcon props type logoCloud is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoCloud"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4606,8 +4828,9 @@ exports[`EuiIcon props type logoCloud is rendered 1`] = `
 exports[`EuiIcon props type logoCloudEnterprise is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoCloudEnterprise"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4633,8 +4856,9 @@ exports[`EuiIcon props type logoCloudEnterprise is rendered 1`] = `
 exports[`EuiIcon props type logoCode is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoCode"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4660,8 +4884,9 @@ exports[`EuiIcon props type logoCode is rendered 1`] = `
 exports[`EuiIcon props type logoCodesandbox is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoCodesandbox"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4678,8 +4903,9 @@ exports[`EuiIcon props type logoCodesandbox is rendered 1`] = `
 exports[`EuiIcon props type logoCouchbase is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoCouchbase"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4697,8 +4923,9 @@ exports[`EuiIcon props type logoCouchbase is rendered 1`] = `
 exports[`EuiIcon props type logoDocker is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoDocker"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4717,8 +4944,9 @@ exports[`EuiIcon props type logoDocker is rendered 1`] = `
 exports[`EuiIcon props type logoDropwizard is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoDropwizard"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="32"
@@ -4803,8 +5031,9 @@ exports[`EuiIcon props type logoDropwizard is rendered 1`] = `
 exports[`EuiIcon props type logoElastic is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoElastic"
+  data-is-loaded="true"
   data-type="logoElastic"
   fill="none"
   focusable="false"
@@ -4851,8 +5080,9 @@ exports[`EuiIcon props type logoElastic is rendered 1`] = `
 exports[`EuiIcon props type logoElasticStack is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoElasticStack"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4887,8 +5117,9 @@ exports[`EuiIcon props type logoElasticStack is rendered 1`] = `
 exports[`EuiIcon props type logoElasticsearch is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoElasticsearch"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4919,8 +5150,9 @@ exports[`EuiIcon props type logoElasticsearch is rendered 1`] = `
 exports[`EuiIcon props type logoEnterpriseSearch is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoEnterpriseSearch"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4952,8 +5184,9 @@ exports[`EuiIcon props type logoEnterpriseSearch is rendered 1`] = `
 exports[`EuiIcon props type logoEtcd is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoEtcd"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -4977,8 +5210,9 @@ exports[`EuiIcon props type logoEtcd is rendered 1`] = `
 exports[`EuiIcon props type logoGCP is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoGCP"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5047,8 +5281,9 @@ exports[`EuiIcon props type logoGCP is rendered 1`] = `
 exports[`EuiIcon props type logoGCPMono is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoGCPMono"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5068,8 +5303,9 @@ exports[`EuiIcon props type logoGCPMono is rendered 1`] = `
 exports[`EuiIcon props type logoGithub is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoGithub"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5086,8 +5322,9 @@ exports[`EuiIcon props type logoGithub is rendered 1`] = `
 exports[`EuiIcon props type logoGmail is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoGmail"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5133,8 +5370,9 @@ exports[`EuiIcon props type logoGmail is rendered 1`] = `
 exports[`EuiIcon props type logoGolang is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoGolang"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="32"
@@ -5281,8 +5519,9 @@ exports[`EuiIcon props type logoGolang is rendered 1`] = `
 exports[`EuiIcon props type logoGoogleG is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoGoogleG"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5392,8 +5631,9 @@ exports[`EuiIcon props type logoGoogleG is rendered 1`] = `
 exports[`EuiIcon props type logoHAproxy is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoHAproxy"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="32"
@@ -5480,8 +5720,9 @@ exports[`EuiIcon props type logoHAproxy is rendered 1`] = `
 exports[`EuiIcon props type logoIBM is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoIBM"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5638,8 +5879,9 @@ exports[`EuiIcon props type logoIBM is rendered 1`] = `
 exports[`EuiIcon props type logoIBMMono is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoIBMMono"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5657,8 +5899,9 @@ exports[`EuiIcon props type logoIBMMono is rendered 1`] = `
 exports[`EuiIcon props type logoKafka is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoKafka"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5675,8 +5918,9 @@ exports[`EuiIcon props type logoKafka is rendered 1`] = `
 exports[`EuiIcon props type logoKibana is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoKibana"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5707,8 +5951,9 @@ exports[`EuiIcon props type logoKibana is rendered 1`] = `
 exports[`EuiIcon props type logoKubernetes is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoKubernetes"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5726,8 +5971,9 @@ exports[`EuiIcon props type logoKubernetes is rendered 1`] = `
 exports[`EuiIcon props type logoLogging is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoLogging"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5753,8 +5999,9 @@ exports[`EuiIcon props type logoLogging is rendered 1`] = `
 exports[`EuiIcon props type logoLogstash is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoLogstash"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5780,8 +6027,9 @@ exports[`EuiIcon props type logoLogstash is rendered 1`] = `
 exports[`EuiIcon props type logoMaps is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoMaps"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5807,8 +6055,9 @@ exports[`EuiIcon props type logoMaps is rendered 1`] = `
 exports[`EuiIcon props type logoMemcached is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoMemcached"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5920,8 +6169,9 @@ exports[`EuiIcon props type logoMemcached is rendered 1`] = `
 exports[`EuiIcon props type logoMetrics is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoMetrics"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5952,8 +6202,9 @@ exports[`EuiIcon props type logoMetrics is rendered 1`] = `
 exports[`EuiIcon props type logoMongodb is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoMongodb"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -5995,8 +6246,9 @@ exports[`EuiIcon props type logoMongodb is rendered 1`] = `
 exports[`EuiIcon props type logoMySQL is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoMySQL"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6020,8 +6272,9 @@ exports[`EuiIcon props type logoMySQL is rendered 1`] = `
 exports[`EuiIcon props type logoNginx is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoNginx"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6049,8 +6302,9 @@ exports[`EuiIcon props type logoNginx is rendered 1`] = `
 exports[`EuiIcon props type logoObservability is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoObservability"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6076,8 +6330,9 @@ exports[`EuiIcon props type logoObservability is rendered 1`] = `
 exports[`EuiIcon props type logoOsquery is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoOsquery"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6127,8 +6382,9 @@ exports[`EuiIcon props type logoOsquery is rendered 1`] = `
 exports[`EuiIcon props type logoPhp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoPhp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6264,8 +6520,9 @@ exports[`EuiIcon props type logoPhp is rendered 1`] = `
 exports[`EuiIcon props type logoPostgres is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoPostgres"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6299,8 +6556,9 @@ exports[`EuiIcon props type logoPostgres is rendered 1`] = `
 exports[`EuiIcon props type logoPrometheus is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoPrometheus"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6318,8 +6576,9 @@ exports[`EuiIcon props type logoPrometheus is rendered 1`] = `
 exports[`EuiIcon props type logoRabbitmq is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoRabbitmq"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6337,8 +6596,9 @@ exports[`EuiIcon props type logoRabbitmq is rendered 1`] = `
 exports[`EuiIcon props type logoRedis is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoRedis"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6400,8 +6660,9 @@ exports[`EuiIcon props type logoRedis is rendered 1`] = `
 exports[`EuiIcon props type logoSecurity is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoSecurity"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6427,8 +6688,9 @@ exports[`EuiIcon props type logoSecurity is rendered 1`] = `
 exports[`EuiIcon props type logoSiteSearch is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoSiteSearch"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6459,8 +6721,9 @@ exports[`EuiIcon props type logoSiteSearch is rendered 1`] = `
 exports[`EuiIcon props type logoSketch is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoSketch"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6502,8 +6765,9 @@ exports[`EuiIcon props type logoSketch is rendered 1`] = `
 exports[`EuiIcon props type logoSlack is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoSlack"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6537,8 +6801,9 @@ exports[`EuiIcon props type logoSlack is rendered 1`] = `
 exports[`EuiIcon props type logoUptime is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoUptime"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6564,8 +6829,9 @@ exports[`EuiIcon props type logoUptime is rendered 1`] = `
 exports[`EuiIcon props type logoWebhook is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoWebhook"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6595,8 +6861,9 @@ exports[`EuiIcon props type logoWebhook is rendered 1`] = `
 exports[`EuiIcon props type logoWindows is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoWindows"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6614,8 +6881,9 @@ exports[`EuiIcon props type logoWindows is rendered 1`] = `
 exports[`EuiIcon props type logoWorkplaceSearch is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logoWorkplaceSearch"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6641,8 +6909,9 @@ exports[`EuiIcon props type logoWorkplaceSearch is rendered 1`] = `
 exports[`EuiIcon props type logsApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="logsApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6663,8 +6932,9 @@ exports[`EuiIcon props type logsApp is rendered 1`] = `
 exports[`EuiIcon props type logstashFilter is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logstashFilter"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6681,8 +6951,9 @@ exports[`EuiIcon props type logstashFilter is rendered 1`] = `
 exports[`EuiIcon props type logstashIf is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logstashIf"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6699,8 +6970,9 @@ exports[`EuiIcon props type logstashIf is rendered 1`] = `
 exports[`EuiIcon props type logstashInput is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logstashInput"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6717,8 +6989,9 @@ exports[`EuiIcon props type logstashInput is rendered 1`] = `
 exports[`EuiIcon props type logstashOutput is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logstashOutput"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6735,8 +7008,9 @@ exports[`EuiIcon props type logstashOutput is rendered 1`] = `
 exports[`EuiIcon props type logstashQueue is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="logstashQueue"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6753,8 +7027,9 @@ exports[`EuiIcon props type logstashQueue is rendered 1`] = `
 exports[`EuiIcon props type machineLearningApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="machineLearningApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6775,8 +7050,9 @@ exports[`EuiIcon props type machineLearningApp is rendered 1`] = `
 exports[`EuiIcon props type magnet is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="magnet"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6793,8 +7069,9 @@ exports[`EuiIcon props type magnet is rendered 1`] = `
 exports[`EuiIcon props type magnifyWithExclamation is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="magnifyWithExclamation"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6811,8 +7088,9 @@ exports[`EuiIcon props type magnifyWithExclamation is rendered 1`] = `
 exports[`EuiIcon props type magnifyWithMinus is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="magnifyWithMinus"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6829,8 +7107,9 @@ exports[`EuiIcon props type magnifyWithMinus is rendered 1`] = `
 exports[`EuiIcon props type magnifyWithPlus is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="magnifyWithPlus"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6847,8 +7126,9 @@ exports[`EuiIcon props type magnifyWithPlus is rendered 1`] = `
 exports[`EuiIcon props type managementApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="managementApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -6869,8 +7149,9 @@ exports[`EuiIcon props type managementApp is rendered 1`] = `
 exports[`EuiIcon props type mapMarker is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="mapMarker"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6887,8 +7168,9 @@ exports[`EuiIcon props type mapMarker is rendered 1`] = `
 exports[`EuiIcon props type memory is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="memory"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6908,8 +7190,9 @@ exports[`EuiIcon props type memory is rendered 1`] = `
 exports[`EuiIcon props type menu is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="menu"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -6927,8 +7210,9 @@ exports[`EuiIcon props type menu is rendered 1`] = `
 exports[`EuiIcon props type menuDown is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="menuDown"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6945,8 +7229,9 @@ exports[`EuiIcon props type menuDown is rendered 1`] = `
 exports[`EuiIcon props type menuLeft is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="menuLeft"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6963,8 +7248,9 @@ exports[`EuiIcon props type menuLeft is rendered 1`] = `
 exports[`EuiIcon props type menuRight is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="menuRight"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6981,8 +7267,9 @@ exports[`EuiIcon props type menuRight is rendered 1`] = `
 exports[`EuiIcon props type menuUp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="menuUp"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -6999,8 +7286,9 @@ exports[`EuiIcon props type menuUp is rendered 1`] = `
 exports[`EuiIcon props type merge is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="merge"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7017,8 +7305,9 @@ exports[`EuiIcon props type merge is rendered 1`] = `
 exports[`EuiIcon props type metricbeatApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="metricbeatApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7042,8 +7331,9 @@ exports[`EuiIcon props type metricbeatApp is rendered 1`] = `
 exports[`EuiIcon props type metricsApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="metricsApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7064,8 +7354,9 @@ exports[`EuiIcon props type metricsApp is rendered 1`] = `
 exports[`EuiIcon props type minimize is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="minimize"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7082,8 +7373,9 @@ exports[`EuiIcon props type minimize is rendered 1`] = `
 exports[`EuiIcon props type minus is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="minus"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7104,8 +7396,9 @@ exports[`EuiIcon props type minus is rendered 1`] = `
 exports[`EuiIcon props type minusInCircle is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="minusInCircle"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7123,8 +7416,9 @@ exports[`EuiIcon props type minusInCircle is rendered 1`] = `
 exports[`EuiIcon props type minusInCircleFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="minusInCircleFilled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7142,8 +7436,9 @@ exports[`EuiIcon props type minusInCircleFilled is rendered 1`] = `
 exports[`EuiIcon props type mobile is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="mobile"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7165,8 +7460,9 @@ exports[`EuiIcon props type mobile is rendered 1`] = `
 exports[`EuiIcon props type monitoringApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="monitoringApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7187,8 +7483,9 @@ exports[`EuiIcon props type monitoringApp is rendered 1`] = `
 exports[`EuiIcon props type moon is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="moon"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7205,8 +7502,9 @@ exports[`EuiIcon props type moon is rendered 1`] = `
 exports[`EuiIcon props type nested is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="nested"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7223,8 +7521,9 @@ exports[`EuiIcon props type nested is rendered 1`] = `
 exports[`EuiIcon props type node is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="node"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7241,8 +7540,9 @@ exports[`EuiIcon props type node is rendered 1`] = `
 exports[`EuiIcon props type notebookApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="notebookApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7266,8 +7566,9 @@ exports[`EuiIcon props type notebookApp is rendered 1`] = `
 exports[`EuiIcon props type number is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="number"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7285,8 +7586,9 @@ exports[`EuiIcon props type number is rendered 1`] = `
 exports[`EuiIcon props type offline is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="offline"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7303,8 +7605,9 @@ exports[`EuiIcon props type offline is rendered 1`] = `
 exports[`EuiIcon props type online is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="online"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7321,8 +7624,9 @@ exports[`EuiIcon props type online is rendered 1`] = `
 exports[`EuiIcon props type outlierDetectionJob is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="outlierDetectionJob"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7343,8 +7647,9 @@ exports[`EuiIcon props type outlierDetectionJob is rendered 1`] = `
 exports[`EuiIcon props type package is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="package"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7361,8 +7666,9 @@ exports[`EuiIcon props type package is rendered 1`] = `
 exports[`EuiIcon props type packetbeatApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="packetbeatApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7383,8 +7689,9 @@ exports[`EuiIcon props type packetbeatApp is rendered 1`] = `
 exports[`EuiIcon props type pageSelect is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="pageSelect"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7402,8 +7709,9 @@ exports[`EuiIcon props type pageSelect is rendered 1`] = `
 exports[`EuiIcon props type pagesSelect is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="pagesSelect"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7421,8 +7729,9 @@ exports[`EuiIcon props type pagesSelect is rendered 1`] = `
 exports[`EuiIcon props type paperClip is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="paperClip"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7439,8 +7748,9 @@ exports[`EuiIcon props type paperClip is rendered 1`] = `
 exports[`EuiIcon props type partial is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="partial"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7457,8 +7767,9 @@ exports[`EuiIcon props type partial is rendered 1`] = `
 exports[`EuiIcon props type pause is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="pause"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7475,8 +7786,9 @@ exports[`EuiIcon props type pause is rendered 1`] = `
 exports[`EuiIcon props type payment is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="payment"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -7494,8 +7806,9 @@ exports[`EuiIcon props type payment is rendered 1`] = `
 exports[`EuiIcon props type pencil is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="pencil"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7512,8 +7825,9 @@ exports[`EuiIcon props type pencil is rendered 1`] = `
 exports[`EuiIcon props type percent is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="percent"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7538,8 +7852,9 @@ exports[`EuiIcon props type percent is rendered 1`] = `
 exports[`EuiIcon props type pin is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="pin"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7557,8 +7872,9 @@ exports[`EuiIcon props type pin is rendered 1`] = `
 exports[`EuiIcon props type pinFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="pinFilled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7575,8 +7891,9 @@ exports[`EuiIcon props type pinFilled is rendered 1`] = `
 exports[`EuiIcon props type pipelineApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="pipelineApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7597,8 +7914,9 @@ exports[`EuiIcon props type pipelineApp is rendered 1`] = `
 exports[`EuiIcon props type play is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="play"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7615,8 +7933,9 @@ exports[`EuiIcon props type play is rendered 1`] = `
 exports[`EuiIcon props type playFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="playFilled"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -7634,8 +7953,9 @@ exports[`EuiIcon props type playFilled is rendered 1`] = `
 exports[`EuiIcon props type plus is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="plus"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7652,8 +7972,9 @@ exports[`EuiIcon props type plus is rendered 1`] = `
 exports[`EuiIcon props type plusInCircle is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="plusInCircle"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7671,8 +7992,9 @@ exports[`EuiIcon props type plusInCircle is rendered 1`] = `
 exports[`EuiIcon props type plusInCircleFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="plusInCircleFilled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7689,8 +8011,9 @@ exports[`EuiIcon props type plusInCircleFilled is rendered 1`] = `
 exports[`EuiIcon props type popout is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="popout"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7707,8 +8030,9 @@ exports[`EuiIcon props type popout is rendered 1`] = `
 exports[`EuiIcon props type push is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="push"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7728,8 +8052,9 @@ exports[`EuiIcon props type push is rendered 1`] = `
 exports[`EuiIcon props type questionInCircle is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="questionInCircle"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7746,8 +8071,9 @@ exports[`EuiIcon props type questionInCircle is rendered 1`] = `
 exports[`EuiIcon props type quote is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="quote"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7764,8 +8090,9 @@ exports[`EuiIcon props type quote is rendered 1`] = `
 exports[`EuiIcon props type recentlyViewedApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="recentlyViewedApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7786,8 +8113,9 @@ exports[`EuiIcon props type recentlyViewedApp is rendered 1`] = `
 exports[`EuiIcon props type refresh is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="refresh"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7804,8 +8132,9 @@ exports[`EuiIcon props type refresh is rendered 1`] = `
 exports[`EuiIcon props type regressionJob is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="regressionJob"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7826,8 +8155,9 @@ exports[`EuiIcon props type regressionJob is rendered 1`] = `
 exports[`EuiIcon props type reporter is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="reporter"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7845,8 +8175,9 @@ exports[`EuiIcon props type reporter is rendered 1`] = `
 exports[`EuiIcon props type reportingApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="reportingApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7870,8 +8201,9 @@ exports[`EuiIcon props type reportingApp is rendered 1`] = `
 exports[`EuiIcon props type returnKey is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="returnKey"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7888,8 +8220,9 @@ exports[`EuiIcon props type returnKey is rendered 1`] = `
 exports[`EuiIcon props type save is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="save"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7906,8 +8239,9 @@ exports[`EuiIcon props type save is rendered 1`] = `
 exports[`EuiIcon props type savedObjectsApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="savedObjectsApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7928,8 +8262,9 @@ exports[`EuiIcon props type savedObjectsApp is rendered 1`] = `
 exports[`EuiIcon props type scale is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="scale"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7947,8 +8282,9 @@ exports[`EuiIcon props type scale is rendered 1`] = `
 exports[`EuiIcon props type search is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="search"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -7965,8 +8301,9 @@ exports[`EuiIcon props type search is rendered 1`] = `
 exports[`EuiIcon props type searchProfilerApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="searchProfilerApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -7997,8 +8334,9 @@ exports[`EuiIcon props type searchProfilerApp is rendered 1`] = `
 exports[`EuiIcon props type securityAnalyticsApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="securityAnalyticsApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -8022,8 +8360,9 @@ exports[`EuiIcon props type securityAnalyticsApp is rendered 1`] = `
 exports[`EuiIcon props type securityApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="securityApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -8044,8 +8383,9 @@ exports[`EuiIcon props type securityApp is rendered 1`] = `
 exports[`EuiIcon props type securitySignal is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="securitySignal"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8063,8 +8403,9 @@ exports[`EuiIcon props type securitySignal is rendered 1`] = `
 exports[`EuiIcon props type securitySignalDetected is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="securitySignalDetected"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8082,8 +8423,9 @@ exports[`EuiIcon props type securitySignalDetected is rendered 1`] = `
 exports[`EuiIcon props type securitySignalResolved is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="securitySignalResolved"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8101,8 +8443,9 @@ exports[`EuiIcon props type securitySignalResolved is rendered 1`] = `
 exports[`EuiIcon props type sessionViewer is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="sessionViewer"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8124,8 +8467,9 @@ exports[`EuiIcon props type sessionViewer is rendered 1`] = `
 exports[`EuiIcon props type shard is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="shard"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8142,8 +8486,9 @@ exports[`EuiIcon props type shard is rendered 1`] = `
 exports[`EuiIcon props type share is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="share"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8160,8 +8505,9 @@ exports[`EuiIcon props type share is rendered 1`] = `
 exports[`EuiIcon props type snowflake is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="snowflake"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8179,8 +8525,9 @@ exports[`EuiIcon props type snowflake is rendered 1`] = `
 exports[`EuiIcon props type sortDown is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="sortDown"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8197,8 +8544,9 @@ exports[`EuiIcon props type sortDown is rendered 1`] = `
 exports[`EuiIcon props type sortLeft is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="sortLeft"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8216,8 +8564,9 @@ exports[`EuiIcon props type sortLeft is rendered 1`] = `
 exports[`EuiIcon props type sortRight is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="sortRight"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8234,8 +8583,9 @@ exports[`EuiIcon props type sortRight is rendered 1`] = `
 exports[`EuiIcon props type sortUp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="sortUp"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8252,8 +8602,9 @@ exports[`EuiIcon props type sortUp is rendered 1`] = `
 exports[`EuiIcon props type sortable is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="sortable"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8270,8 +8621,9 @@ exports[`EuiIcon props type sortable is rendered 1`] = `
 exports[`EuiIcon props type spacesApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="spacesApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -8296,8 +8648,9 @@ exports[`EuiIcon props type spacesApp is rendered 1`] = `
 exports[`EuiIcon props type sqlApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="sqlApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -8318,8 +8671,9 @@ exports[`EuiIcon props type sqlApp is rendered 1`] = `
 exports[`EuiIcon props type starEmpty is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="starEmpty"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8337,8 +8691,9 @@ exports[`EuiIcon props type starEmpty is rendered 1`] = `
 exports[`EuiIcon props type starEmptySpace is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="starEmptySpace"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8356,8 +8711,9 @@ exports[`EuiIcon props type starEmptySpace is rendered 1`] = `
 exports[`EuiIcon props type starFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="starFilled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8375,8 +8731,9 @@ exports[`EuiIcon props type starFilled is rendered 1`] = `
 exports[`EuiIcon props type starFilledSpace is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="starFilledSpace"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8394,8 +8751,9 @@ exports[`EuiIcon props type starFilledSpace is rendered 1`] = `
 exports[`EuiIcon props type starMinusEmpty is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="starMinusEmpty"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8413,8 +8771,9 @@ exports[`EuiIcon props type starMinusEmpty is rendered 1`] = `
 exports[`EuiIcon props type starMinusFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="starMinusFilled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8432,8 +8791,9 @@ exports[`EuiIcon props type starMinusFilled is rendered 1`] = `
 exports[`EuiIcon props type starPlusEmpty is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="starPlusEmpty"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8451,8 +8811,9 @@ exports[`EuiIcon props type starPlusEmpty is rendered 1`] = `
 exports[`EuiIcon props type starPlusFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="starPlusFilled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8470,8 +8831,9 @@ exports[`EuiIcon props type starPlusFilled is rendered 1`] = `
 exports[`EuiIcon props type stats is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="stats"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8489,8 +8851,9 @@ exports[`EuiIcon props type stats is rendered 1`] = `
 exports[`EuiIcon props type stop is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="stop"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8508,8 +8871,9 @@ exports[`EuiIcon props type stop is rendered 1`] = `
 exports[`EuiIcon props type stopFilled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="stopFilled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8531,8 +8895,9 @@ exports[`EuiIcon props type stopFilled is rendered 1`] = `
 exports[`EuiIcon props type stopSlash is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="stopSlash"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8549,8 +8914,9 @@ exports[`EuiIcon props type stopSlash is rendered 1`] = `
 exports[`EuiIcon props type storage is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="storage"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8586,8 +8952,9 @@ exports[`EuiIcon props type storage is rendered 1`] = `
 exports[`EuiIcon props type string is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="string"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8605,8 +8972,9 @@ exports[`EuiIcon props type string is rendered 1`] = `
 exports[`EuiIcon props type submodule is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="submodule"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -8626,8 +8994,9 @@ exports[`EuiIcon props type submodule is rendered 1`] = `
 exports[`EuiIcon props type sun is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="sun"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8644,8 +9013,9 @@ exports[`EuiIcon props type sun is rendered 1`] = `
 exports[`EuiIcon props type swatchInput is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="swatchInput"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8674,8 +9044,9 @@ exports[`EuiIcon props type swatchInput is rendered 1`] = `
 exports[`EuiIcon props type symlink is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="symlink"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -8695,8 +9066,9 @@ exports[`EuiIcon props type symlink is rendered 1`] = `
 exports[`EuiIcon props type tableDensityCompact is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tableDensityCompact"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8713,8 +9085,9 @@ exports[`EuiIcon props type tableDensityCompact is rendered 1`] = `
 exports[`EuiIcon props type tableDensityExpanded is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tableDensityExpanded"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8731,8 +9104,9 @@ exports[`EuiIcon props type tableDensityExpanded is rendered 1`] = `
 exports[`EuiIcon props type tableDensityNormal is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tableDensityNormal"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8749,8 +9123,9 @@ exports[`EuiIcon props type tableDensityNormal is rendered 1`] = `
 exports[`EuiIcon props type tableOfContents is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tableOfContents"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8767,8 +9142,9 @@ exports[`EuiIcon props type tableOfContents is rendered 1`] = `
 exports[`EuiIcon props type tag is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tag"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8785,8 +9161,9 @@ exports[`EuiIcon props type tag is rendered 1`] = `
 exports[`EuiIcon props type tear is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tear"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8803,8 +9180,9 @@ exports[`EuiIcon props type tear is rendered 1`] = `
 exports[`EuiIcon props type temperature is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="temperature"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8824,8 +9202,9 @@ exports[`EuiIcon props type temperature is rendered 1`] = `
 exports[`EuiIcon props type timeRefresh is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="timeRefresh"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -8848,8 +9227,9 @@ exports[`EuiIcon props type timeRefresh is rendered 1`] = `
 exports[`EuiIcon props type timeline is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="timeline"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8867,8 +9247,9 @@ exports[`EuiIcon props type timeline is rendered 1`] = `
 exports[`EuiIcon props type timelionApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="timelionApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -8889,8 +9270,9 @@ exports[`EuiIcon props type timelionApp is rendered 1`] = `
 exports[`EuiIcon props type timeslider is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="timeslider"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -8909,8 +9291,9 @@ exports[`EuiIcon props type timeslider is rendered 1`] = `
 exports[`EuiIcon props type tokenAlias is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenAlias"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8928,8 +9311,9 @@ exports[`EuiIcon props type tokenAlias is rendered 1`] = `
 exports[`EuiIcon props type tokenAnnotation is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenAnnotation"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8947,8 +9331,9 @@ exports[`EuiIcon props type tokenAnnotation is rendered 1`] = `
 exports[`EuiIcon props type tokenArray is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenArray"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8966,8 +9351,9 @@ exports[`EuiIcon props type tokenArray is rendered 1`] = `
 exports[`EuiIcon props type tokenBinary is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenBinary"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -8985,8 +9371,9 @@ exports[`EuiIcon props type tokenBinary is rendered 1`] = `
 exports[`EuiIcon props type tokenBoolean is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenBoolean"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9004,8 +9391,9 @@ exports[`EuiIcon props type tokenBoolean is rendered 1`] = `
 exports[`EuiIcon props type tokenClass is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenClass"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9023,8 +9411,9 @@ exports[`EuiIcon props type tokenClass is rendered 1`] = `
 exports[`EuiIcon props type tokenCompletionSuggester is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenCompletionSuggester"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9046,8 +9435,9 @@ exports[`EuiIcon props type tokenCompletionSuggester is rendered 1`] = `
 exports[`EuiIcon props type tokenConstant is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenConstant"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9065,8 +9455,9 @@ exports[`EuiIcon props type tokenConstant is rendered 1`] = `
 exports[`EuiIcon props type tokenDate is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenDate"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9084,8 +9475,9 @@ exports[`EuiIcon props type tokenDate is rendered 1`] = `
 exports[`EuiIcon props type tokenDenseVector is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenDenseVector"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9102,8 +9494,9 @@ exports[`EuiIcon props type tokenDenseVector is rendered 1`] = `
 exports[`EuiIcon props type tokenElement is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenElement"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9121,8 +9514,9 @@ exports[`EuiIcon props type tokenElement is rendered 1`] = `
 exports[`EuiIcon props type tokenEnum is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenEnum"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9140,8 +9534,9 @@ exports[`EuiIcon props type tokenEnum is rendered 1`] = `
 exports[`EuiIcon props type tokenEnumMember is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenEnumMember"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9159,8 +9554,9 @@ exports[`EuiIcon props type tokenEnumMember is rendered 1`] = `
 exports[`EuiIcon props type tokenEvent is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenEvent"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9178,8 +9574,9 @@ exports[`EuiIcon props type tokenEvent is rendered 1`] = `
 exports[`EuiIcon props type tokenException is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenException"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9196,8 +9593,9 @@ exports[`EuiIcon props type tokenException is rendered 1`] = `
 exports[`EuiIcon props type tokenField is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenField"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9215,8 +9613,9 @@ exports[`EuiIcon props type tokenField is rendered 1`] = `
 exports[`EuiIcon props type tokenFile is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenFile"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9233,8 +9632,9 @@ exports[`EuiIcon props type tokenFile is rendered 1`] = `
 exports[`EuiIcon props type tokenFlattened is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenFlattened"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9251,8 +9651,9 @@ exports[`EuiIcon props type tokenFlattened is rendered 1`] = `
 exports[`EuiIcon props type tokenFunction is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenFunction"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9270,8 +9671,9 @@ exports[`EuiIcon props type tokenFunction is rendered 1`] = `
 exports[`EuiIcon props type tokenGeo is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenGeo"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9289,8 +9691,9 @@ exports[`EuiIcon props type tokenGeo is rendered 1`] = `
 exports[`EuiIcon props type tokenHistogram is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenHistogram"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9307,8 +9710,9 @@ exports[`EuiIcon props type tokenHistogram is rendered 1`] = `
 exports[`EuiIcon props type tokenIP is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenIP"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9326,8 +9730,9 @@ exports[`EuiIcon props type tokenIP is rendered 1`] = `
 exports[`EuiIcon props type tokenInterface is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenInterface"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9345,8 +9750,9 @@ exports[`EuiIcon props type tokenInterface is rendered 1`] = `
 exports[`EuiIcon props type tokenJoin is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenJoin"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9365,8 +9771,9 @@ exports[`EuiIcon props type tokenJoin is rendered 1`] = `
 exports[`EuiIcon props type tokenKey is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenKey"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9384,8 +9791,9 @@ exports[`EuiIcon props type tokenKey is rendered 1`] = `
 exports[`EuiIcon props type tokenKeyword is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenKeyword"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9402,8 +9810,9 @@ exports[`EuiIcon props type tokenKeyword is rendered 1`] = `
 exports[`EuiIcon props type tokenMethod is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenMethod"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9421,8 +9830,9 @@ exports[`EuiIcon props type tokenMethod is rendered 1`] = `
 exports[`EuiIcon props type tokenModule is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenModule"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9442,8 +9852,9 @@ exports[`EuiIcon props type tokenModule is rendered 1`] = `
 exports[`EuiIcon props type tokenNamespace is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenNamespace"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9460,8 +9871,9 @@ exports[`EuiIcon props type tokenNamespace is rendered 1`] = `
 exports[`EuiIcon props type tokenNested is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenNested"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9485,8 +9897,9 @@ exports[`EuiIcon props type tokenNested is rendered 1`] = `
 exports[`EuiIcon props type tokenNull is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenNull"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9503,8 +9916,9 @@ exports[`EuiIcon props type tokenNull is rendered 1`] = `
 exports[`EuiIcon props type tokenNumber is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenNumber"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9521,8 +9935,9 @@ exports[`EuiIcon props type tokenNumber is rendered 1`] = `
 exports[`EuiIcon props type tokenObject is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenObject"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9540,8 +9955,9 @@ exports[`EuiIcon props type tokenObject is rendered 1`] = `
 exports[`EuiIcon props type tokenOperator is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenOperator"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9559,8 +9975,9 @@ exports[`EuiIcon props type tokenOperator is rendered 1`] = `
 exports[`EuiIcon props type tokenPackage is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenPackage"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9578,8 +9995,9 @@ exports[`EuiIcon props type tokenPackage is rendered 1`] = `
 exports[`EuiIcon props type tokenParameter is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenParameter"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9597,8 +10015,9 @@ exports[`EuiIcon props type tokenParameter is rendered 1`] = `
 exports[`EuiIcon props type tokenPercolator is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenPercolator"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9617,8 +10036,9 @@ exports[`EuiIcon props type tokenPercolator is rendered 1`] = `
 exports[`EuiIcon props type tokenProperty is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenProperty"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9636,8 +10056,9 @@ exports[`EuiIcon props type tokenProperty is rendered 1`] = `
 exports[`EuiIcon props type tokenRange is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenRange"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9658,8 +10079,9 @@ exports[`EuiIcon props type tokenRange is rendered 1`] = `
 exports[`EuiIcon props type tokenRankFeature is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenRankFeature"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9676,8 +10098,9 @@ exports[`EuiIcon props type tokenRankFeature is rendered 1`] = `
 exports[`EuiIcon props type tokenRankFeatures is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenRankFeatures"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9694,8 +10117,9 @@ exports[`EuiIcon props type tokenRankFeatures is rendered 1`] = `
 exports[`EuiIcon props type tokenRepo is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenRepo"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9713,8 +10137,9 @@ exports[`EuiIcon props type tokenRepo is rendered 1`] = `
 exports[`EuiIcon props type tokenSearchType is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenSearchType"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9736,8 +10161,9 @@ exports[`EuiIcon props type tokenSearchType is rendered 1`] = `
 exports[`EuiIcon props type tokenShape is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenShape"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9755,8 +10181,9 @@ exports[`EuiIcon props type tokenShape is rendered 1`] = `
 exports[`EuiIcon props type tokenString is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenString"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9773,8 +10200,9 @@ exports[`EuiIcon props type tokenString is rendered 1`] = `
 exports[`EuiIcon props type tokenStruct is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenStruct"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9792,8 +10220,9 @@ exports[`EuiIcon props type tokenStruct is rendered 1`] = `
 exports[`EuiIcon props type tokenSymbol is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenSymbol"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9810,8 +10239,9 @@ exports[`EuiIcon props type tokenSymbol is rendered 1`] = `
 exports[`EuiIcon props type tokenTag is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenTag"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9832,8 +10262,9 @@ exports[`EuiIcon props type tokenTag is rendered 1`] = `
 exports[`EuiIcon props type tokenText is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenText"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9850,8 +10281,9 @@ exports[`EuiIcon props type tokenText is rendered 1`] = `
 exports[`EuiIcon props type tokenTokenCount is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenTokenCount"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9868,8 +10300,9 @@ exports[`EuiIcon props type tokenTokenCount is rendered 1`] = `
 exports[`EuiIcon props type tokenVariable is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="tokenVariable"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9887,8 +10320,9 @@ exports[`EuiIcon props type tokenVariable is rendered 1`] = `
 exports[`EuiIcon props type training is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="training"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9905,8 +10339,9 @@ exports[`EuiIcon props type training is rendered 1`] = `
 exports[`EuiIcon props type trash is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="trash"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -9923,8 +10358,9 @@ exports[`EuiIcon props type trash is rendered 1`] = `
 exports[`EuiIcon props type unfold is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="unfold"
+  data-is-loaded="true"
   focusable="false"
   role="img"
   viewBox="0 0 16 16"
@@ -9939,8 +10375,9 @@ exports[`EuiIcon props type unfold is rendered 1`] = `
 exports[`EuiIcon props type unlink is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="unlink"
+  data-is-loaded="true"
   fill="none"
   focusable="false"
   height="16"
@@ -9961,8 +10398,9 @@ exports[`EuiIcon props type unlink is rendered 1`] = `
 exports[`EuiIcon props type upgradeAssistantApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="upgradeAssistantApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -9983,8 +10421,9 @@ exports[`EuiIcon props type upgradeAssistantApp is rendered 1`] = `
 exports[`EuiIcon props type uptimeApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="uptimeApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -10005,8 +10444,9 @@ exports[`EuiIcon props type uptimeApp is rendered 1`] = `
 exports[`EuiIcon props type user is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="user"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10028,8 +10468,9 @@ exports[`EuiIcon props type user is rendered 1`] = `
 exports[`EuiIcon props type userAvatar is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="userAvatar"
+  data-is-loaded="true"
   focusable="false"
   height="18"
   role="img"
@@ -10053,8 +10494,9 @@ exports[`EuiIcon props type userAvatar is rendered 1`] = `
 exports[`EuiIcon props type users is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="users"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10076,8 +10518,9 @@ exports[`EuiIcon props type users is rendered 1`] = `
 exports[`EuiIcon props type usersRolesApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="usersRolesApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -10098,8 +10541,9 @@ exports[`EuiIcon props type usersRolesApp is rendered 1`] = `
 exports[`EuiIcon props type vector is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="vector"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10116,8 +10560,9 @@ exports[`EuiIcon props type vector is rendered 1`] = `
 exports[`EuiIcon props type videoPlayer is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="videoPlayer"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10134,8 +10579,9 @@ exports[`EuiIcon props type videoPlayer is rendered 1`] = `
 exports[`EuiIcon props type visArea is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visArea"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10152,8 +10598,9 @@ exports[`EuiIcon props type visArea is rendered 1`] = `
 exports[`EuiIcon props type visAreaStacked is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visAreaStacked"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10170,8 +10617,9 @@ exports[`EuiIcon props type visAreaStacked is rendered 1`] = `
 exports[`EuiIcon props type visBarHorizontal is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visBarHorizontal"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10188,8 +10636,9 @@ exports[`EuiIcon props type visBarHorizontal is rendered 1`] = `
 exports[`EuiIcon props type visBarHorizontalStacked is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visBarHorizontalStacked"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10206,8 +10655,9 @@ exports[`EuiIcon props type visBarHorizontalStacked is rendered 1`] = `
 exports[`EuiIcon props type visBarVertical is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visBarVertical"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10224,8 +10674,9 @@ exports[`EuiIcon props type visBarVertical is rendered 1`] = `
 exports[`EuiIcon props type visBarVerticalStacked is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visBarVerticalStacked"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10242,8 +10693,9 @@ exports[`EuiIcon props type visBarVerticalStacked is rendered 1`] = `
 exports[`EuiIcon props type visGauge is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visGauge"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10260,8 +10712,9 @@ exports[`EuiIcon props type visGauge is rendered 1`] = `
 exports[`EuiIcon props type visGoal is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visGoal"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10278,8 +10731,9 @@ exports[`EuiIcon props type visGoal is rendered 1`] = `
 exports[`EuiIcon props type visLine is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visLine"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10296,8 +10750,9 @@ exports[`EuiIcon props type visLine is rendered 1`] = `
 exports[`EuiIcon props type visMapCoordinate is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visMapCoordinate"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10314,8 +10769,9 @@ exports[`EuiIcon props type visMapCoordinate is rendered 1`] = `
 exports[`EuiIcon props type visMapRegion is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visMapRegion"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10332,8 +10788,9 @@ exports[`EuiIcon props type visMapRegion is rendered 1`] = `
 exports[`EuiIcon props type visMetric is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visMetric"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10350,8 +10807,9 @@ exports[`EuiIcon props type visMetric is rendered 1`] = `
 exports[`EuiIcon props type visPie is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visPie"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10368,8 +10826,9 @@ exports[`EuiIcon props type visPie is rendered 1`] = `
 exports[`EuiIcon props type visTable is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visTable"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10386,8 +10845,9 @@ exports[`EuiIcon props type visTable is rendered 1`] = `
 exports[`EuiIcon props type visTagCloud is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visTagCloud"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10404,8 +10864,9 @@ exports[`EuiIcon props type visTagCloud is rendered 1`] = `
 exports[`EuiIcon props type visText is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visText"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10422,8 +10883,9 @@ exports[`EuiIcon props type visText is rendered 1`] = `
 exports[`EuiIcon props type visTimelion is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visTimelion"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10440,8 +10902,9 @@ exports[`EuiIcon props type visTimelion is rendered 1`] = `
 exports[`EuiIcon props type visVega is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visVega"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10458,8 +10921,9 @@ exports[`EuiIcon props type visVega is rendered 1`] = `
 exports[`EuiIcon props type visVisualBuilder is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="visVisualBuilder"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10476,8 +10940,9 @@ exports[`EuiIcon props type visVisualBuilder is rendered 1`] = `
 exports[`EuiIcon props type visualizeApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="visualizeApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -10501,8 +10966,9 @@ exports[`EuiIcon props type visualizeApp is rendered 1`] = `
 exports[`EuiIcon props type watchesApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="watchesApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -10529,8 +10995,9 @@ exports[`EuiIcon props type watchesApp is rendered 1`] = `
 exports[`EuiIcon props type wordWrap is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="wordWrap"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10550,8 +11017,9 @@ exports[`EuiIcon props type wordWrap is rendered 1`] = `
 exports[`EuiIcon props type wordWrapDisabled is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="wordWrapDisabled"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10568,8 +11036,9 @@ exports[`EuiIcon props type wordWrapDisabled is rendered 1`] = `
 exports[`EuiIcon props type workplaceSearchApp is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
   data-icon-type="workplaceSearchApp"
+  data-is-loaded="true"
   focusable="false"
   height="32"
   role="img"
@@ -10592,8 +11061,9 @@ exports[`EuiIcon props type workplaceSearchApp is rendered 1`] = `
 exports[`EuiIcon props type wrench is rendered 1`] = `
 <svg
   aria-hidden="true"
-  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
   data-icon-type="wrench"
+  data-is-loaded="true"
   focusable="false"
   height="16"
   role="img"
@@ -10611,7 +11081,7 @@ exports[`EuiIcon renders custom components 1`] = `
 <span
   aria-hidden="true"
   aria-label="heart"
-  class="euiIcon euiIcon--medium"
+  class="euiIcon emotion-euiIcon-m"
   focusable="false"
   role="img"
 >
diff --git a/src/components/icon/_icon.scss b/src/components/icon/_icon.scss
deleted file mode 100644
index d57175f2300..00000000000
--- a/src/components/icon/_icon.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.euiIcon {
-  flex-shrink: 0; // Ensures it never scales down below its intended size
-  display: inline-block;
-  vertical-align: middle;
-  fill: currentColor;
-  transform: translate(0, 0); // Hack to fix Firefox "softness"
-
-  &:focus {
-    opacity: 1; // We often hide icons on hover. Make sure they appear on focus.
-    background: $euiFocusBackgroundColor;
-  }
-}
-
-// App icons are two-toned so get an extra class. This provides the base color.
-.euiIcon--app {
-  fill: $euiTextColor;
-
-  // This provides the default secondary color
-  .euiIcon__fillSecondary {
-    fill: makeGraphicContrastColor($euiColorSuccess);
-  }
-}
-
-.euiIcon-isLoading {
-  opacity: $euiIconLoadingOpacity;
-  background-color: currentColor;
-  border-radius: $euiBorderRadius;
-}
-
-.euiIcon-isLoaded {
-  animation: euiIconLoading $euiAnimSpeedNormal ease-in 0s 1 forwards;
-}
-
-// COLORS
-
-@each $name, $color in $euiIconColors {
-  .euiIcon--#{$name} {
-    // Use color attribute so currentColor can be used in more properties
-    color: $color;
-  }
-}
-
-// Really force all paths to inherit when the color is ghost/text (specifically for logos)
-.euiIcon--ghost:not([data-type='logoElastic']),
-.euiIcon--text:not([data-type='logoElastic']) {
-  *[fill],
-  .euiIcon__fillNegative {
-    fill: currentColor !important; // sass-lint:disable-line no-important
-  }
-}
-
-// Elastic logo specific colors
-.euiIcon--ghost[data-type='logoElastic'],
-.euiIcon--text[data-type='logoElastic'] {
-  *[fill] {
-    fill: none !important; // sass-lint:disable-line no-important
-  }
-
-  .outline {
-    fill: currentColor !important; // sass-lint:disable-line no-important
-  }
-}
-
-// Use the negative fill on SVG elements that need to flip portions
-// of the icon to light and dark compatible modes. You can see this
-// in use on the Elastic logo icons.
-.euiIcon__fillNegative {
-  fill: $euiColorDarkestShade;
-}
-
-// SIZES
-
-@each $name, $size in $euiIconSizes {
-  .euiIcon--#{$name} {
-    @include size($size);
-  }
-}
-
-@keyframes euiIconLoading {
-  0% {
-    opacity: $euiIconLoadingOpacity;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
diff --git a/src/components/icon/_index.scss b/src/components/icon/_index.scss
deleted file mode 100644
index 1838ac2382a..00000000000
--- a/src/components/icon/_index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './variables';
-@import './icon';
diff --git a/src/components/icon/_variables.scss b/src/components/icon/_variables.scss
deleted file mode 100644
index b2844d01dc8..00000000000
--- a/src/components/icon/_variables.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-$euiIconLoadingOpacity: .05;
-
-// Modifier naming and colors.
-$euiIconColors: (
-  accent: makeGraphicContrastColor($euiColorAccent),
-  danger: makeGraphicContrastColor($euiColorDanger),
-  ghost: $euiColorGhost,
-  primary: makeGraphicContrastColor($euiColorPrimary),
-  success: makeGraphicContrastColor($euiColorSuccess),
-  subdued: $euiTextSubduedColor,
-  text: $euiTextColor,
-  warning: makeGraphicContrastColor($euiColorWarning),
-  inherit: inherit
-);
-
-$euiIconSizes: (
-  small: $euiSizeM,
-  medium: $euiSize,
-  large: $euiSizeL,
-  xLarge: $euiSizeXL,
-  xxLarge: $euiSizeXXL
-);
diff --git a/src/components/icon/icon.styles.ts b/src/components/icon/icon.styles.ts
new file mode 100644
index 00000000000..b81897c9bed
--- /dev/null
+++ b/src/components/icon/icon.styles.ts
@@ -0,0 +1,132 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css, keyframes } from '@emotion/react';
+import { logicalCSS, euiCanAnimate } from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+
+const iconSize = (size: string) => {
+  return `
+    ${logicalCSS('width', size)};
+    ${logicalCSS('height', size)};
+  `;
+};
+
+export const iconLoadingOpacity = 0.05;
+
+const iconLoading = keyframes`
+  0% {
+    opacity: ${iconLoadingOpacity};
+  }
+
+  100% {
+    opacity: 1;
+  }
+`;
+
+export const euiIconStyles = ({ euiTheme }: UseEuiTheme) => ({
+  // Base
+  euiIcon: css`
+    flex-shrink: 0; // Ensures it never scales down below its intended size
+    display: inline-block;
+    vertical-align: middle;
+    fill: currentColor;
+    transform: translate(0, 0); // Hack to fix Firefox "softness"
+
+    // Note: This className is hard-coded into our SVGs and cannot be converted to Emotion
+    .euiIcon__fillNegative {
+      // Use the negative fill on SVG elements that need to flip portions
+      // of the icon to light and dark compatible modes. You can see this
+      // in use on the Elastic logo icons.
+      fill: ${euiTheme.colors.darkestShade};
+    }
+  `,
+  // Colors
+  accent: css`
+    color: ${euiTheme.colors.accentText};
+  `,
+  danger: css`
+    color: ${euiTheme.colors.dangerText};
+  `,
+  ghost: css`
+    color: ${euiTheme.colors.ghost};
+
+    // Really force all paths to inherit (specifically for logos)
+    *[fill],
+    .euiIcon__fillNegative {
+      fill: currentColor !important;
+    }
+  `,
+  primary: css`
+    color: ${euiTheme.colors.primaryText};
+  `,
+  success: css`
+    color: ${euiTheme.colors.successText};
+  `,
+  subdued: css`
+    color: ${euiTheme.colors.subduedText};
+  `,
+  text: css`
+    color: ${euiTheme.colors.title};
+
+    // Really force all paths to inherit (specifically for logos)
+    *[fill],
+    .euiIcon__fillNegative {
+      fill: currentColor !important;
+    }
+  `,
+  warning: css`
+    color: ${euiTheme.colors.warningText};
+  `,
+  inherit: css`
+    color: inherit;
+  `,
+  default: css``,
+  customColor: css``,
+  logoElasticOutline: css`
+    // Elastic logo specific colors
+    *[fill] {
+      fill: none !important;
+    }
+
+    .outline {
+      fill: currentColor !important;
+    }
+  `,
+  // Sizes
+  original: css``,
+  s: css(iconSize(euiTheme.size.m)),
+  m: css(iconSize(euiTheme.size.base)),
+  l: css(iconSize(euiTheme.size.l)),
+  xl: css(iconSize(euiTheme.size.xl)),
+  xxl: css(iconSize(euiTheme.size.xxl)),
+  // Variants
+  // App icons are two-toned. This provides the base color.
+  app: css`
+    fill: ${euiTheme.colors.text};
+
+    // Note: This className is hard-coded into our SVGs and cannot be converted to Emotion
+    .euiIcon__fillSecondary {
+      // This provides the default secondary color
+      fill: ${euiTheme.colors.successText};
+    }
+  `,
+  logo: css``,
+  // Loading states
+  isLoading: css`
+    opacity: ${iconLoadingOpacity};
+    background-color: currentColor;
+    border-radius: ${euiTheme.border.radius.small};
+  `,
+  isLoaded: css`
+    ${euiCanAnimate} {
+      animation: ${iconLoading} ${euiTheme.animation.normal} ease-in 0s 1
+        forwards;
+    }
+  `,
+});
diff --git a/src/components/icon/icon.test.tsx b/src/components/icon/icon.test.tsx
index da9c2f88365..abe2d46cbbb 100644
--- a/src/components/icon/icon.test.tsx
+++ b/src/components/icon/icon.test.tsx
@@ -9,8 +9,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 import cheerio from 'cheerio';
-
 import {
   EuiIcon,
   SIZES,
@@ -30,7 +30,7 @@ beforeEach(() => clearIconComponentCache());
 
 const prettyHtml = cheerio.load('');
 
-function testIcon(props: PropsOf<EuiIcon>) {
+function testIcon(props: PropsOf<typeof EuiIcon>) {
   return () => {
     expect.assertions(1);
     return new Promise<void>((resolve) => {
@@ -47,6 +47,8 @@ function testIcon(props: PropsOf<EuiIcon>) {
 describe('EuiIcon', () => {
   test('is rendered', testIcon({ type: 'search', ...requiredProps }));
 
+  shouldRenderCustomStyles(<EuiIcon type="videoPlayer" />);
+
   describe('props', () => {
     describe('other props', () => {
       test(
@@ -127,20 +129,16 @@ describe('EuiIcon', () => {
   describe('appendIconComponentCache', () => {
     it('does nothing if not called', () => {
       const component = mount(<EuiIcon type="videoPlayer" />);
-      expect(
-        component.find('EuiIcon[type="videoPlayer"] > EuiIconEmpty').length
-      ).toBe(1);
+      expect(component.find('svg').prop('data-is-loading')).toEqual(true);
     });
 
-    it('injects the specified icon', () => {
+    it('preloads the specified icon into the cache', () => {
       appendIconComponentCache({
         videoPlayer: EuiIconVideoPlayer,
       });
       const component = mount(<EuiIcon type="videoPlayer" />);
-      expect(
-        component.find('EuiIcon[type="videoPlayer"] > EuiIconVideoPlayer')
-          .length
-      ).toBe(1);
+      // Should not have either data-is-loading attr set to true, because it was pre-loaded
+      expect(component.find('svg').prop('data-is-loading')).not.toEqual(true);
     });
 
     it('does not impact non-loaded icons', () => {
@@ -148,9 +146,7 @@ describe('EuiIcon', () => {
         videoPlayer: EuiIconVideoPlayer,
       });
       const component = mount(<EuiIcon type="accessibility" />);
-      expect(
-        component.find('EuiIcon[type="accessibility"] > EuiIconEmpty').length
-      ).toBe(1);
+      expect(component.find('svg').prop('data-is-loading')).toEqual(true);
     });
   });
 });
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index ac4d8e1a5ce..e46cc606589 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -11,16 +11,24 @@ import React, {
   ImgHTMLAttributes,
   ComponentType,
   SVGAttributes,
+  CSSProperties,
 } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps, keysOf } from '../common';
 
+import { typeToPathMap } from './icon_map';
 import { icon as empty } from './assets/empty';
 import { enqueueStateChange } from '../../services/react';
 
-import { htmlIdGenerator } from '../../services';
-import { colorToClassMap, isNamedColor, NamedColor } from './named_colors';
+import {
+  htmlIdGenerator,
+  withEuiTheme,
+  WithEuiThemeProps,
+} from '../../services';
+export { COLORS } from './named_colors';
+import { isNamedColor, NamedColor } from './named_colors';
+import { euiIconStyles } from './icon.styles';
 
 const getIsAppIcon = (iconType: IconType) => {
   if (typeof iconType !== 'string') return false;
@@ -29,477 +37,17 @@ const getIsAppIcon = (iconType: IconType) => {
   return iconType.endsWith('App') || iconType.endsWith('Job');
 };
 
-const typeToPathMap = {
-  accessibility: 'accessibility',
-  addDataApp: 'app_add_data',
-  advancedSettingsApp: 'app_advanced_settings',
-  agentApp: 'app_fleet',
-  aggregate: 'aggregate',
-  alert: 'alert',
-  analyzeEvent: 'analyzeEvent',
-  annotation: 'annotation',
-  apmApp: 'app_apm',
-  apmTrace: 'apm_trace',
-  appSearchApp: 'app_app_search',
-  apps: 'apps',
-  arrowDown: 'arrow_down',
-  arrowLeft: 'arrow_left',
-  arrowRight: 'arrow_right',
-  arrowUp: 'arrow_up',
-  arrowStart: 'arrowStart',
-  arrowEnd: 'arrowEnd',
-  asterisk: 'asterisk',
-  auditbeatApp: 'app_auditbeat',
-  beaker: 'beaker',
-  bell: 'bell',
-  bellSlash: 'bellSlash',
-  bolt: 'bolt',
-  boxesHorizontal: 'boxes_horizontal',
-  boxesVertical: 'boxes_vertical',
-  branch: 'branch',
-  branchUser: 'branchUser',
-  broom: 'broom',
-  brush: 'brush',
-  bug: 'bug',
-  bullseye: 'bullseye',
-  calendar: 'calendar',
-  canvasApp: 'app_canvas',
-  casesApp: 'app_cases',
-  check: 'check',
-  checkInCircleFilled: 'checkInCircleFilled',
-  cheer: 'cheer',
-  classificationJob: 'ml_classification_job',
-  clock: 'clock',
-  cloudDrizzle: 'cloudDrizzle',
-  cloudStormy: 'cloudStormy',
-  cloudSunny: 'cloudSunny',
-  codeApp: 'app_code',
-  color: 'color',
-  compute: 'compute',
-  console: 'console',
-  consoleApp: 'app_console',
-  continuityAbove: 'continuityAbove',
-  continuityAboveBelow: 'continuityAboveBelow',
-  continuityBelow: 'continuityBelow',
-  continuityWithin: 'continuityWithin',
-  controlsHorizontal: 'controls_horizontal',
-  controlsVertical: 'controls_vertical',
-  copy: 'copy',
-  copyClipboard: 'copy_clipboard',
-  createAdvancedJob: 'ml_create_advanced_job',
-  createMultiMetricJob: 'ml_create_multi_metric_job',
-  createPopulationJob: 'ml_create_population_job',
-  createSingleMetricJob: 'ml_create_single_metric_job',
-  cross: 'cross',
-  crossClusterReplicationApp: 'app_cross_cluster_replication',
-  crossInACircleFilled: 'crossInACircleFilled',
-  crosshairs: 'crosshairs',
-  currency: 'currency',
-  cut: 'cut',
-  dashboardApp: 'app_dashboard',
-  dataVisualizer: 'ml_data_visualizer',
-  database: 'database',
-  desktop: 'desktop',
-  devToolsApp: 'app_devtools',
-  discoverApp: 'app_discover',
-  document: 'document',
-  documentEdit: 'documentEdit',
-  documentation: 'documentation',
-  documents: 'documents',
-  dot: 'dot',
-  doubleArrowLeft: 'doubleArrowLeft',
-  doubleArrowRight: 'doubleArrowRight',
-  download: 'download',
-  editorAlignCenter: 'editor_align_center',
-  editorAlignLeft: 'editor_align_left',
-  editorAlignRight: 'editor_align_right',
-  editorBold: 'editor_bold',
-  editorChecklist: 'editor_checklist',
-  editorCodeBlock: 'editor_code_block',
-  editorComment: 'editor_comment',
-  editorDistributeHorizontal: 'editorDistributeHorizontal',
-  editorDistributeVertical: 'editorDistributeVertical',
-  editorHeading: 'editor_heading',
-  editorItalic: 'editor_italic',
-  editorItemAlignBottom: 'editorItemAlignBottom',
-  editorItemAlignCenter: 'editorItemAlignCenter',
-  editorItemAlignLeft: 'editorItemAlignLeft',
-  editorItemAlignMiddle: 'editorItemAlignMiddle',
-  editorItemAlignRight: 'editorItemAlignRight',
-  editorItemAlignTop: 'editorItemAlignTop',
-  editorLink: 'editor_link',
-  editorOrderedList: 'editor_ordered_list',
-  editorPositionBottomLeft: 'editorPositionBottomLeft',
-  editorPositionBottomRight: 'editorPositionBottomRight',
-  editorPositionTopLeft: 'editorPositionTopLeft',
-  editorPositionTopRight: 'editorPositionTopRight',
-  editorRedo: 'editor_redo',
-  editorStrike: 'editor_strike',
-  editorTable: 'editor_table',
-  editorUnderline: 'editor_underline',
-  editorUndo: 'editor_undo',
-  editorUnorderedList: 'editor_unordered_list',
-  email: 'email',
-  empty: 'empty',
-  emsApp: 'app_ems',
-  eql: 'eql',
-  eraser: 'eraser',
-  exit: 'exit',
-  expand: 'expand',
-  expandMini: 'expandMini',
-  exportAction: 'export',
-  eye: 'eye',
-  eyeClosed: 'eye_closed',
-  faceHappy: 'face_happy',
-  faceNeutral: 'face_neutral',
-  faceSad: 'face_sad',
-  filebeatApp: 'app_filebeat',
-  filter: 'filter',
-  flag: 'flag',
-  fleetApp: 'app_agent',
-  fold: 'fold',
-  folderCheck: 'folder_check',
-  folderClosed: 'folder_closed',
-  folderExclamation: 'folder_exclamation',
-  folderOpen: 'folder_open',
-  frameNext: 'frameNext',
-  framePrevious: 'framePrevious',
-  fullScreen: 'full_screen',
-  fullScreenExit: 'fullScreenExit',
-  function: 'function',
-  gear: 'gear',
-  gisApp: 'app_gis',
-  glasses: 'glasses',
-  globe: 'globe',
-  grab: 'grab',
-  grabHorizontal: 'grab_horizontal',
-  graphApp: 'app_graph',
-  grid: 'grid',
-  grokApp: 'app_grok',
-  heart: 'heart',
-  heartbeatApp: 'app_heartbeat',
-  heatmap: 'heatmap',
-  help: 'help',
-  home: 'home',
-  iInCircle: 'iInCircle',
-  image: 'image',
-  importAction: 'import',
-  indexClose: 'index_close',
-  indexEdit: 'index_edit',
-  indexFlush: 'index_flush',
-  indexManagementApp: 'app_index_management',
-  indexMapping: 'index_mapping',
-  indexOpen: 'index_open',
-  indexPatternApp: 'app_index_pattern',
-  indexRollupApp: 'app_index_rollup',
-  indexRuntime: 'index_runtime',
-  indexSettings: 'index_settings',
-  inputOutput: 'inputOutput',
-  inspect: 'inspect',
-  invert: 'invert',
-  ip: 'ip',
-  keyboardShortcut: 'keyboard_shortcut',
-  kqlField: 'kql_field',
-  kqlFunction: 'kql_function',
-  kqlOperand: 'kql_operand',
-  kqlSelector: 'kql_selector',
-  kqlValue: 'kql_value',
-  layers: 'layers',
-  lensApp: 'app_lens',
-  lettering: 'lettering',
-  lineDashed: 'lineDashed',
-  lineDotted: 'lineDotted',
-  lineSolid: 'lineSolid',
-  link: 'link',
-  list: 'list',
-  listAdd: 'list_add',
-  lock: 'lock',
-  lockOpen: 'lockOpen',
-  logoAWS: 'logo_aws',
-  logoAWSMono: 'logo_aws_mono',
-  logoAerospike: 'logo_aerospike',
-  logoApache: 'logo_apache',
-  logoAppSearch: 'logo_app_search',
-  logoAzure: 'logo_azure',
-  logoAzureMono: 'logo_azure_mono',
-  logoBeats: 'logo_beats',
-  logoBusinessAnalytics: 'logo_business_analytics',
-  logoCeph: 'logo_ceph',
-  logoCloud: 'logo_cloud',
-  logoCloudEnterprise: 'logo_cloud_ece',
-  logoCode: 'logo_code',
-  logoCodesandbox: 'logo_codesandbox',
-  logoCouchbase: 'logo_couchbase',
-  logoDocker: 'logo_docker',
-  logoDropwizard: 'logo_dropwizard',
-  logoElastic: 'logo_elastic',
-  logoElasticStack: 'logo_elastic_stack',
-  logoElasticsearch: 'logo_elasticsearch',
-  logoEnterpriseSearch: 'logo_enterprise_search',
-  logoEtcd: 'logo_etcd',
-  logoGCP: 'logo_gcp',
-  logoGCPMono: 'logo_gcp_mono',
-  logoGithub: 'logo_github',
-  logoGmail: 'logo_gmail',
-  logoGolang: 'logo_golang',
-  logoGoogleG: 'logo_google_g',
-  logoHAproxy: 'logo_haproxy',
-  logoIBM: 'logo_ibm',
-  logoIBMMono: 'logo_ibm_mono',
-  logoKafka: 'logo_kafka',
-  logoKibana: 'logo_kibana',
-  logoKubernetes: 'logo_kubernetes',
-  logoLogging: 'logo_logging',
-  logoLogstash: 'logo_logstash',
-  logoMaps: 'logo_maps',
-  logoMemcached: 'logo_memcached',
-  logoMetrics: 'logo_metrics',
-  logoMongodb: 'logo_mongodb',
-  logoMySQL: 'logo_mysql',
-  logoNginx: 'logo_nginx',
-  logoObservability: 'logo_observability',
-  logoOsquery: 'logo_osquery',
-  logoPhp: 'logo_php',
-  logoPostgres: 'logo_postgres',
-  logoPrometheus: 'logo_prometheus',
-  logoRabbitmq: 'logo_rabbitmq',
-  logoRedis: 'logo_redis',
-  logoSecurity: 'logo_security',
-  logoSiteSearch: 'logo_site_search',
-  logoSketch: 'logo_sketch',
-  logoSlack: 'logo_slack',
-  logoUptime: 'logo_uptime',
-  logoWebhook: 'logo_webhook',
-  logoWindows: 'logo_windows',
-  logoWorkplaceSearch: 'logo_workplace_search',
-  logsApp: 'app_logs',
-  logstashFilter: 'logstash_filter',
-  logstashIf: 'logstash_if',
-  logstashInput: 'logstash_input',
-  logstashOutput: 'logstash_output',
-  logstashQueue: 'logstash_queue',
-  machineLearningApp: 'app_ml',
-  magnet: 'magnet',
-  magnifyWithExclamation: 'magnifyWithExclamation',
-  magnifyWithMinus: 'magnifyWithMinus',
-  magnifyWithPlus: 'magnifyWithPlus',
-  managementApp: 'app_management',
-  mapMarker: 'map_marker',
-  memory: 'memory',
-  menu: 'menu',
-  menuDown: 'menuDown',
-  menuLeft: 'menuLeft',
-  menuRight: 'menuRight',
-  menuUp: 'menuUp',
-  merge: 'merge',
-  metricbeatApp: 'app_metricbeat',
-  metricsApp: 'app_metrics',
-  minimize: 'minimize',
-  minus: 'minus',
-  minusInCircle: 'minus_in_circle',
-  minusInCircleFilled: 'minus_in_circle_filled',
-  mobile: 'mobile',
-  monitoringApp: 'app_monitoring',
-  moon: 'moon',
-  nested: 'nested',
-  node: 'node',
-  notebookApp: 'app_notebook',
-  number: 'number',
-  offline: 'offline',
-  online: 'online',
-  outlierDetectionJob: 'ml_outlier_detection_job',
-  package: 'package',
-  packetbeatApp: 'app_packetbeat',
-  pageSelect: 'pageSelect',
-  pagesSelect: 'pagesSelect',
-  paperClip: 'paper_clip',
-  partial: 'partial',
-  pause: 'pause',
-  payment: 'payment',
-  pencil: 'pencil',
-  percent: 'percent',
-  pin: 'pin',
-  pinFilled: 'pin_filled',
-  pipelineApp: 'app_pipeline',
-  play: 'play',
-  playFilled: 'playFilled',
-  plus: 'plus',
-  plusInCircle: 'plus_in_circle',
-  plusInCircleFilled: 'plus_in_circle_filled',
-  popout: 'popout',
-  push: 'push',
-  questionInCircle: 'question_in_circle',
-  quote: 'quote',
-  recentlyViewedApp: 'app_recently_viewed',
-  refresh: 'refresh',
-  regressionJob: 'ml_regression_job',
-  reporter: 'reporter',
-  reportingApp: 'app_reporting',
-  returnKey: 'return_key',
-  save: 'save',
-  savedObjectsApp: 'app_saved_objects',
-  scale: 'scale',
-  search: 'search',
-  searchProfilerApp: 'app_search_profiler',
-  securityAnalyticsApp: 'app_security_analytics',
-  securityApp: 'app_security',
-  securitySignal: 'securitySignal',
-  securitySignalDetected: 'securitySignalDetected',
-  securitySignalResolved: 'securitySignalResolved',
-  sessionViewer: 'sessionViewer',
-  shard: 'shard',
-  share: 'share',
-  snowflake: 'snowflake',
-  sortDown: 'sort_down',
-  sortLeft: 'sortLeft',
-  sortRight: 'sortRight',
-  sortUp: 'sort_up',
-  sortable: 'sortable',
-  spacesApp: 'app_spaces',
-  sqlApp: 'app_sql',
-  starEmpty: 'star_empty',
-  starEmptySpace: 'star_empty_space',
-  starFilled: 'star_filled',
-  starFilledSpace: 'star_filled_space',
-  starMinusEmpty: 'star_minus_empty',
-  starMinusFilled: 'star_minus_filled',
-  starPlusEmpty: 'starPlusEmpty',
-  starPlusFilled: 'starPlusFilled',
-  stats: 'stats',
-  stop: 'stop',
-  stopFilled: 'stop_filled',
-  stopSlash: 'stop_slash',
-  storage: 'storage',
-  string: 'string',
-  submodule: 'submodule',
-  sun: 'sun',
-  swatchInput: 'swatch_input', // Undocumented on purpose. Has an extra stroke for EuiColorPicker
-  symlink: 'symlink',
-  tableDensityCompact: 'table_density_compact',
-  tableDensityExpanded: 'table_density_expanded',
-  tableDensityNormal: 'table_density_normal',
-  tableOfContents: 'tableOfContents',
-  tag: 'tag',
-  tear: 'tear',
-  temperature: 'temperature',
-  timeline: 'timeline',
-  timelionApp: 'app_timelion',
-  timeRefresh: 'timeRefresh',
-  timeslider: 'timeslider',
-  training: 'training',
-  trash: 'trash',
-  unfold: 'unfold',
-  unlink: 'unlink',
-  upgradeAssistantApp: 'app_upgrade_assistant',
-  uptimeApp: 'app_uptime',
-  user: 'user',
-  userAvatar: 'userAvatar',
-  users: 'users',
-  usersRolesApp: 'app_users_roles',
-  vector: 'vector',
-  videoPlayer: 'videoPlayer',
-  visArea: 'vis_area',
-  visAreaStacked: 'vis_area_stacked',
-  visBarHorizontal: 'vis_bar_horizontal',
-  visBarHorizontalStacked: 'vis_bar_horizontal_stacked',
-  visBarVertical: 'vis_bar_vertical',
-  visBarVerticalStacked: 'vis_bar_vertical_stacked',
-  visGauge: 'vis_gauge',
-  visGoal: 'vis_goal',
-  visLine: 'vis_line',
-  visMapCoordinate: 'vis_map_coordinate',
-  visMapRegion: 'vis_map_region',
-  visMetric: 'vis_metric',
-  visPie: 'vis_pie',
-  visTable: 'vis_table',
-  visTagCloud: 'vis_tag_cloud',
-  visText: 'vis_text',
-  visTimelion: 'vis_timelion',
-  visVega: 'vis_vega',
-  visVisualBuilder: 'vis_visual_builder',
-  visualizeApp: 'app_visualize',
-  watchesApp: 'app_watches',
-  wordWrap: 'wordWrap',
-  wordWrapDisabled: 'wordWrapDisabled',
-  workplaceSearchApp: 'app_workplace_search',
-  wrench: 'wrench',
-  // Token Icon Imports
-  tokenClass: 'tokenClass',
-  tokenProperty: 'tokenProperty',
-  tokenEnum: 'tokenEnum',
-  tokenVariable: 'tokenVariable',
-  tokenMethod: 'tokenMethod',
-  tokenAnnotation: 'tokenAnnotation',
-  tokenException: 'tokenException',
-  tokenInterface: 'tokenInterface',
-  tokenParameter: 'tokenParameter',
-  tokenField: 'tokenField',
-  tokenElement: 'tokenElement',
-  tokenFunction: 'tokenFunction',
-  tokenBoolean: 'tokenBoolean',
-  tokenString: 'tokenString',
-  tokenArray: 'tokenArray',
-  tokenNumber: 'tokenNumber',
-  tokenConstant: 'tokenConstant',
-  tokenObject: 'tokenObject',
-  tokenEvent: 'tokenEvent',
-  tokenKey: 'tokenKey',
-  tokenNull: 'tokenNull',
-  tokenStruct: 'tokenStruct',
-  tokenPackage: 'tokenPackage',
-  tokenOperator: 'tokenOperator',
-  tokenEnumMember: 'tokenEnumMember',
-  tokenRepo: 'tokenRepo',
-  tokenSymbol: 'tokenSymbol',
-  tokenFile: 'tokenFile',
-  tokenModule: 'tokenModule',
-  tokenNamespace: 'tokenNamespace',
-  tokenDate: 'tokenDate',
-  tokenIP: 'tokenIP',
-  tokenNested: 'tokenNested',
-  tokenAlias: 'tokenAlias',
-  tokenShape: 'tokenShape',
-  tokenGeo: 'tokenGeo',
-  tokenRange: 'tokenRange',
-  tokenBinary: 'tokenBinary',
-  tokenJoin: 'tokenJoin',
-  tokenPercolator: 'tokenPercolator',
-  tokenFlattened: 'tokenFlattened',
-  tokenRankFeature: 'tokenRankFeature',
-  tokenRankFeatures: 'tokenRankFeatures',
-  tokenKeyword: 'tokenKeyword',
-  tokenTag: 'tokenTag',
-  tokenCompletionSuggester: 'tokenCompletionSuggester',
-  tokenDenseVector: 'tokenDenseVector',
-  tokenText: 'tokenText',
-  tokenTokenCount: 'tokenTokenCount',
-  tokenSearchType: 'tokenSearchType',
-  tokenHistogram: 'tokenHistogram',
-};
-
 export const TYPES = keysOf(typeToPathMap);
 
 export type EuiIconType = keyof typeof typeToPathMap;
 
 export type IconType = EuiIconType | string | ComponentType;
 
-export const COLORS: NamedColor[] = keysOf(colorToClassMap);
-
 // We accept arbitrary color strings, which are impossible to type.
 export type IconColor = string | NamedColor;
 
-const sizeToClassNameMap = {
-  original: null,
-  s: 'euiIcon--small',
-  m: 'euiIcon--medium',
-  l: 'euiIcon--large',
-  xl: 'euiIcon--xLarge',
-  xxl: 'euiIcon--xxLarge',
-};
-
-export const SIZES: IconSize[] = keysOf(sizeToClassNameMap);
-
-export type IconSize = keyof typeof sizeToClassNameMap;
+export const SIZES = ['original', 's', 'm', 'l', 'xl', 'xxl'] as const;
+export type IconSize = typeof SIZES[number];
 
 export type EuiIconProps = CommonProps &
   Omit<SVGAttributes<SVGElement>, 'type' | 'color' | 'size'> & {
@@ -581,9 +129,12 @@ export const appendIconComponentCache = (iconTypeToIconComponentMap: {
   }
 };
 
-export class EuiIcon extends PureComponent<EuiIconProps, State> {
+export class EuiIconClass extends PureComponent<
+  EuiIconProps & WithEuiThemeProps,
+  State
+> {
   isMounted = true;
-  constructor(props: EuiIconProps) {
+  constructor(props: EuiIconProps & WithEuiThemeProps) {
     super(props);
 
     const { type } = props;
@@ -689,41 +240,46 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
       tabIndex,
       title,
       onIconLoad,
+      theme,
+      style,
       ...rest
     } = this.props;
 
-    const { isLoading, neededLoading } = this.state;
+    const { isLoading, neededLoading, iconTitle } = this.state;
+    const isLoaded = !isLoading && neededLoading;
 
-    let optionalColorClass = null;
-    let optionalCustomStyles: any = null;
+    const isCustomColor = color && !isNamedColor(color);
 
-    if (color) {
-      if (isNamedColor(color)) {
-        optionalColorClass = colorToClassMap[color];
-      } else {
-        optionalCustomStyles = { color: color };
-        optionalColorClass = 'euiIcon--customColor';
-      }
-    }
+    const optionalCustomStyles: CSSProperties | undefined = isCustomColor
+      ? {
+          color: color,
+          ...style,
+        }
+      : style;
 
     // These icons are a little special and get some extra CSS flexibility
     const isAppIcon = getIsAppIcon(type);
-
+    // App color styles are only applied if no color is passed or if color="default" is passed
     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 or if color="default" is passed
-        'euiIcon--app': isAppIcon && !appIconHasColor,
-        'euiIcon-isLoading': isLoading,
-        'euiIcon-isLoaded': !isLoading && neededLoading,
-      },
-      className
-    );
+    // The Elastic logo should be an outline in text and ghost mode
+    const isElasticLogoOutline =
+      type === 'logoElastic' && (color === 'ghost' || color === 'text');
+
+    const classes = classNames('euiIcon', className);
+
+    // Emotion styles
+    const styles = euiIconStyles(theme);
+    const cssStyles = [
+      styles.euiIcon,
+      styles[size],
+      color && isNamedColor(color) && styles[color as NamedColor],
+      isCustomColor && styles.customColor,
+      isElasticLogoOutline && styles.logoElasticOutline,
+      isAppIcon && !appIconHasColor && styles.app,
+      isLoading && styles.isLoading,
+      !isLoading && neededLoading && styles.isLoaded,
+    ];
 
     const icon = this.state.icon || empty;
 
@@ -741,6 +297,7 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
           alt={title ? title : ''}
           src={icon}
           className={classes}
+          css={cssStyles}
           tabIndex={tabIndex}
           {...(rest as ImgHTMLAttributes<HTMLImageElement>)}
         />
@@ -775,11 +332,14 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
         <Svg
           className={classes}
           style={optionalCustomStyles}
+          css={cssStyles}
           tabIndex={tabIndex}
           focusable={focusable}
           role="img"
           title={title}
-          data-icon-type={this.state.iconTitle}
+          data-icon-type={iconTitle}
+          data-is-loaded={isLoaded || undefined}
+          data-is-loading={isLoading || undefined}
           {...titleId}
           {...rest}
           {...hideIconEmpty}
@@ -788,3 +348,5 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
     }
   }
 }
+
+export const EuiIcon = withEuiTheme<EuiIconProps>(EuiIconClass);
diff --git a/src/components/icon/icon_map.ts b/src/components/icon/icon_map.ts
new file mode 100644
index 00000000000..41d054a331a
--- /dev/null
+++ b/src/components/icon/icon_map.ts
@@ -0,0 +1,455 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const typeToPathMap = {
+  accessibility: 'accessibility',
+  addDataApp: 'app_add_data',
+  advancedSettingsApp: 'app_advanced_settings',
+  agentApp: 'app_fleet',
+  aggregate: 'aggregate',
+  alert: 'alert',
+  analyzeEvent: 'analyzeEvent',
+  annotation: 'annotation',
+  apmApp: 'app_apm',
+  apmTrace: 'apm_trace',
+  appSearchApp: 'app_app_search',
+  apps: 'apps',
+  arrowDown: 'arrow_down',
+  arrowLeft: 'arrow_left',
+  arrowRight: 'arrow_right',
+  arrowUp: 'arrow_up',
+  arrowStart: 'arrowStart',
+  arrowEnd: 'arrowEnd',
+  asterisk: 'asterisk',
+  auditbeatApp: 'app_auditbeat',
+  beaker: 'beaker',
+  bell: 'bell',
+  bellSlash: 'bellSlash',
+  bolt: 'bolt',
+  boxesHorizontal: 'boxes_horizontal',
+  boxesVertical: 'boxes_vertical',
+  branch: 'branch',
+  branchUser: 'branchUser',
+  broom: 'broom',
+  brush: 'brush',
+  bug: 'bug',
+  bullseye: 'bullseye',
+  calendar: 'calendar',
+  canvasApp: 'app_canvas',
+  casesApp: 'app_cases',
+  check: 'check',
+  checkInCircleFilled: 'checkInCircleFilled',
+  cheer: 'cheer',
+  classificationJob: 'ml_classification_job',
+  clock: 'clock',
+  cloudDrizzle: 'cloudDrizzle',
+  cloudStormy: 'cloudStormy',
+  cloudSunny: 'cloudSunny',
+  codeApp: 'app_code',
+  color: 'color',
+  compute: 'compute',
+  console: 'console',
+  consoleApp: 'app_console',
+  continuityAbove: 'continuityAbove',
+  continuityAboveBelow: 'continuityAboveBelow',
+  continuityBelow: 'continuityBelow',
+  continuityWithin: 'continuityWithin',
+  controlsHorizontal: 'controls_horizontal',
+  controlsVertical: 'controls_vertical',
+  copy: 'copy',
+  copyClipboard: 'copy_clipboard',
+  createAdvancedJob: 'ml_create_advanced_job',
+  createMultiMetricJob: 'ml_create_multi_metric_job',
+  createPopulationJob: 'ml_create_population_job',
+  createSingleMetricJob: 'ml_create_single_metric_job',
+  cross: 'cross',
+  crossClusterReplicationApp: 'app_cross_cluster_replication',
+  crossInACircleFilled: 'crossInACircleFilled',
+  crosshairs: 'crosshairs',
+  currency: 'currency',
+  cut: 'cut',
+  dashboardApp: 'app_dashboard',
+  dataVisualizer: 'ml_data_visualizer',
+  database: 'database',
+  desktop: 'desktop',
+  devToolsApp: 'app_devtools',
+  discoverApp: 'app_discover',
+  document: 'document',
+  documentEdit: 'documentEdit',
+  documentation: 'documentation',
+  documents: 'documents',
+  dot: 'dot',
+  doubleArrowLeft: 'doubleArrowLeft',
+  doubleArrowRight: 'doubleArrowRight',
+  download: 'download',
+  editorAlignCenter: 'editor_align_center',
+  editorAlignLeft: 'editor_align_left',
+  editorAlignRight: 'editor_align_right',
+  editorBold: 'editor_bold',
+  editorChecklist: 'editor_checklist',
+  editorCodeBlock: 'editor_code_block',
+  editorComment: 'editor_comment',
+  editorDistributeHorizontal: 'editorDistributeHorizontal',
+  editorDistributeVertical: 'editorDistributeVertical',
+  editorHeading: 'editor_heading',
+  editorItalic: 'editor_italic',
+  editorItemAlignBottom: 'editorItemAlignBottom',
+  editorItemAlignCenter: 'editorItemAlignCenter',
+  editorItemAlignLeft: 'editorItemAlignLeft',
+  editorItemAlignMiddle: 'editorItemAlignMiddle',
+  editorItemAlignRight: 'editorItemAlignRight',
+  editorItemAlignTop: 'editorItemAlignTop',
+  editorLink: 'editor_link',
+  editorOrderedList: 'editor_ordered_list',
+  editorPositionBottomLeft: 'editorPositionBottomLeft',
+  editorPositionBottomRight: 'editorPositionBottomRight',
+  editorPositionTopLeft: 'editorPositionTopLeft',
+  editorPositionTopRight: 'editorPositionTopRight',
+  editorRedo: 'editor_redo',
+  editorStrike: 'editor_strike',
+  editorTable: 'editor_table',
+  editorUnderline: 'editor_underline',
+  editorUndo: 'editor_undo',
+  editorUnorderedList: 'editor_unordered_list',
+  email: 'email',
+  empty: 'empty',
+  emsApp: 'app_ems',
+  eql: 'eql',
+  eraser: 'eraser',
+  exit: 'exit',
+  expand: 'expand',
+  expandMini: 'expandMini',
+  exportAction: 'export',
+  eye: 'eye',
+  eyeClosed: 'eye_closed',
+  faceHappy: 'face_happy',
+  faceNeutral: 'face_neutral',
+  faceSad: 'face_sad',
+  filebeatApp: 'app_filebeat',
+  filter: 'filter',
+  flag: 'flag',
+  fleetApp: 'app_agent',
+  fold: 'fold',
+  folderCheck: 'folder_check',
+  folderClosed: 'folder_closed',
+  folderExclamation: 'folder_exclamation',
+  folderOpen: 'folder_open',
+  frameNext: 'frameNext',
+  framePrevious: 'framePrevious',
+  fullScreen: 'full_screen',
+  fullScreenExit: 'fullScreenExit',
+  function: 'function',
+  gear: 'gear',
+  gisApp: 'app_gis',
+  glasses: 'glasses',
+  globe: 'globe',
+  grab: 'grab',
+  grabHorizontal: 'grab_horizontal',
+  graphApp: 'app_graph',
+  grid: 'grid',
+  grokApp: 'app_grok',
+  heart: 'heart',
+  heartbeatApp: 'app_heartbeat',
+  heatmap: 'heatmap',
+  help: 'help',
+  home: 'home',
+  iInCircle: 'iInCircle',
+  image: 'image',
+  importAction: 'import',
+  indexClose: 'index_close',
+  indexEdit: 'index_edit',
+  indexFlush: 'index_flush',
+  indexManagementApp: 'app_index_management',
+  indexMapping: 'index_mapping',
+  indexOpen: 'index_open',
+  indexPatternApp: 'app_index_pattern',
+  indexRollupApp: 'app_index_rollup',
+  indexRuntime: 'index_runtime',
+  indexSettings: 'index_settings',
+  inputOutput: 'inputOutput',
+  inspect: 'inspect',
+  invert: 'invert',
+  ip: 'ip',
+  keyboardShortcut: 'keyboard_shortcut',
+  kqlField: 'kql_field',
+  kqlFunction: 'kql_function',
+  kqlOperand: 'kql_operand',
+  kqlSelector: 'kql_selector',
+  kqlValue: 'kql_value',
+  layers: 'layers',
+  lensApp: 'app_lens',
+  lettering: 'lettering',
+  lineDashed: 'lineDashed',
+  lineDotted: 'lineDotted',
+  lineSolid: 'lineSolid',
+  link: 'link',
+  list: 'list',
+  listAdd: 'list_add',
+  lock: 'lock',
+  lockOpen: 'lockOpen',
+  logoAWS: 'logo_aws',
+  logoAWSMono: 'logo_aws_mono',
+  logoAerospike: 'logo_aerospike',
+  logoApache: 'logo_apache',
+  logoAppSearch: 'logo_app_search',
+  logoAzure: 'logo_azure',
+  logoAzureMono: 'logo_azure_mono',
+  logoBeats: 'logo_beats',
+  logoBusinessAnalytics: 'logo_business_analytics',
+  logoCeph: 'logo_ceph',
+  logoCloud: 'logo_cloud',
+  logoCloudEnterprise: 'logo_cloud_ece',
+  logoCode: 'logo_code',
+  logoCodesandbox: 'logo_codesandbox',
+  logoCouchbase: 'logo_couchbase',
+  logoDocker: 'logo_docker',
+  logoDropwizard: 'logo_dropwizard',
+  logoElastic: 'logo_elastic',
+  logoElasticStack: 'logo_elastic_stack',
+  logoElasticsearch: 'logo_elasticsearch',
+  logoEnterpriseSearch: 'logo_enterprise_search',
+  logoEtcd: 'logo_etcd',
+  logoGCP: 'logo_gcp',
+  logoGCPMono: 'logo_gcp_mono',
+  logoGithub: 'logo_github',
+  logoGmail: 'logo_gmail',
+  logoGolang: 'logo_golang',
+  logoGoogleG: 'logo_google_g',
+  logoHAproxy: 'logo_haproxy',
+  logoIBM: 'logo_ibm',
+  logoIBMMono: 'logo_ibm_mono',
+  logoKafka: 'logo_kafka',
+  logoKibana: 'logo_kibana',
+  logoKubernetes: 'logo_kubernetes',
+  logoLogging: 'logo_logging',
+  logoLogstash: 'logo_logstash',
+  logoMaps: 'logo_maps',
+  logoMemcached: 'logo_memcached',
+  logoMetrics: 'logo_metrics',
+  logoMongodb: 'logo_mongodb',
+  logoMySQL: 'logo_mysql',
+  logoNginx: 'logo_nginx',
+  logoObservability: 'logo_observability',
+  logoOsquery: 'logo_osquery',
+  logoPhp: 'logo_php',
+  logoPostgres: 'logo_postgres',
+  logoPrometheus: 'logo_prometheus',
+  logoRabbitmq: 'logo_rabbitmq',
+  logoRedis: 'logo_redis',
+  logoSecurity: 'logo_security',
+  logoSiteSearch: 'logo_site_search',
+  logoSketch: 'logo_sketch',
+  logoSlack: 'logo_slack',
+  logoUptime: 'logo_uptime',
+  logoWebhook: 'logo_webhook',
+  logoWindows: 'logo_windows',
+  logoWorkplaceSearch: 'logo_workplace_search',
+  logsApp: 'app_logs',
+  logstashFilter: 'logstash_filter',
+  logstashIf: 'logstash_if',
+  logstashInput: 'logstash_input',
+  logstashOutput: 'logstash_output',
+  logstashQueue: 'logstash_queue',
+  machineLearningApp: 'app_ml',
+  magnet: 'magnet',
+  magnifyWithExclamation: 'magnifyWithExclamation',
+  magnifyWithMinus: 'magnifyWithMinus',
+  magnifyWithPlus: 'magnifyWithPlus',
+  managementApp: 'app_management',
+  mapMarker: 'map_marker',
+  memory: 'memory',
+  menu: 'menu',
+  menuDown: 'menuDown',
+  menuLeft: 'menuLeft',
+  menuRight: 'menuRight',
+  menuUp: 'menuUp',
+  merge: 'merge',
+  metricbeatApp: 'app_metricbeat',
+  metricsApp: 'app_metrics',
+  minimize: 'minimize',
+  minus: 'minus',
+  minusInCircle: 'minus_in_circle',
+  minusInCircleFilled: 'minus_in_circle_filled',
+  mobile: 'mobile',
+  monitoringApp: 'app_monitoring',
+  moon: 'moon',
+  nested: 'nested',
+  node: 'node',
+  notebookApp: 'app_notebook',
+  number: 'number',
+  offline: 'offline',
+  online: 'online',
+  outlierDetectionJob: 'ml_outlier_detection_job',
+  package: 'package',
+  packetbeatApp: 'app_packetbeat',
+  pageSelect: 'pageSelect',
+  pagesSelect: 'pagesSelect',
+  paperClip: 'paper_clip',
+  partial: 'partial',
+  pause: 'pause',
+  payment: 'payment',
+  pencil: 'pencil',
+  percent: 'percent',
+  pin: 'pin',
+  pinFilled: 'pin_filled',
+  pipelineApp: 'app_pipeline',
+  play: 'play',
+  playFilled: 'playFilled',
+  plus: 'plus',
+  plusInCircle: 'plus_in_circle',
+  plusInCircleFilled: 'plus_in_circle_filled',
+  popout: 'popout',
+  push: 'push',
+  questionInCircle: 'question_in_circle',
+  quote: 'quote',
+  recentlyViewedApp: 'app_recently_viewed',
+  refresh: 'refresh',
+  regressionJob: 'ml_regression_job',
+  reporter: 'reporter',
+  reportingApp: 'app_reporting',
+  returnKey: 'return_key',
+  save: 'save',
+  savedObjectsApp: 'app_saved_objects',
+  scale: 'scale',
+  search: 'search',
+  searchProfilerApp: 'app_search_profiler',
+  securityAnalyticsApp: 'app_security_analytics',
+  securityApp: 'app_security',
+  securitySignal: 'securitySignal',
+  securitySignalDetected: 'securitySignalDetected',
+  securitySignalResolved: 'securitySignalResolved',
+  sessionViewer: 'sessionViewer',
+  shard: 'shard',
+  share: 'share',
+  snowflake: 'snowflake',
+  sortDown: 'sort_down',
+  sortLeft: 'sortLeft',
+  sortRight: 'sortRight',
+  sortUp: 'sort_up',
+  sortable: 'sortable',
+  spacesApp: 'app_spaces',
+  sqlApp: 'app_sql',
+  starEmpty: 'star_empty',
+  starEmptySpace: 'star_empty_space',
+  starFilled: 'star_filled',
+  starFilledSpace: 'star_filled_space',
+  starMinusEmpty: 'star_minus_empty',
+  starMinusFilled: 'star_minus_filled',
+  starPlusEmpty: 'starPlusEmpty',
+  starPlusFilled: 'starPlusFilled',
+  stats: 'stats',
+  stop: 'stop',
+  stopFilled: 'stop_filled',
+  stopSlash: 'stop_slash',
+  storage: 'storage',
+  string: 'string',
+  submodule: 'submodule',
+  sun: 'sun',
+  swatchInput: 'swatch_input', // Undocumented on purpose. Has an extra stroke for EuiColorPicker
+  symlink: 'symlink',
+  tableDensityCompact: 'table_density_compact',
+  tableDensityExpanded: 'table_density_expanded',
+  tableDensityNormal: 'table_density_normal',
+  tableOfContents: 'tableOfContents',
+  tag: 'tag',
+  tear: 'tear',
+  temperature: 'temperature',
+  timeline: 'timeline',
+  timelionApp: 'app_timelion',
+  timeRefresh: 'timeRefresh',
+  timeslider: 'timeslider',
+  training: 'training',
+  trash: 'trash',
+  unfold: 'unfold',
+  unlink: 'unlink',
+  upgradeAssistantApp: 'app_upgrade_assistant',
+  uptimeApp: 'app_uptime',
+  user: 'user',
+  userAvatar: 'userAvatar',
+  users: 'users',
+  usersRolesApp: 'app_users_roles',
+  vector: 'vector',
+  videoPlayer: 'videoPlayer',
+  visArea: 'vis_area',
+  visAreaStacked: 'vis_area_stacked',
+  visBarHorizontal: 'vis_bar_horizontal',
+  visBarHorizontalStacked: 'vis_bar_horizontal_stacked',
+  visBarVertical: 'vis_bar_vertical',
+  visBarVerticalStacked: 'vis_bar_vertical_stacked',
+  visGauge: 'vis_gauge',
+  visGoal: 'vis_goal',
+  visLine: 'vis_line',
+  visMapCoordinate: 'vis_map_coordinate',
+  visMapRegion: 'vis_map_region',
+  visMetric: 'vis_metric',
+  visPie: 'vis_pie',
+  visTable: 'vis_table',
+  visTagCloud: 'vis_tag_cloud',
+  visText: 'vis_text',
+  visTimelion: 'vis_timelion',
+  visVega: 'vis_vega',
+  visVisualBuilder: 'vis_visual_builder',
+  visualizeApp: 'app_visualize',
+  watchesApp: 'app_watches',
+  wordWrap: 'wordWrap',
+  wordWrapDisabled: 'wordWrapDisabled',
+  workplaceSearchApp: 'app_workplace_search',
+  wrench: 'wrench',
+  // Token Icon Imports
+  tokenClass: 'tokenClass',
+  tokenProperty: 'tokenProperty',
+  tokenEnum: 'tokenEnum',
+  tokenVariable: 'tokenVariable',
+  tokenMethod: 'tokenMethod',
+  tokenAnnotation: 'tokenAnnotation',
+  tokenException: 'tokenException',
+  tokenInterface: 'tokenInterface',
+  tokenParameter: 'tokenParameter',
+  tokenField: 'tokenField',
+  tokenElement: 'tokenElement',
+  tokenFunction: 'tokenFunction',
+  tokenBoolean: 'tokenBoolean',
+  tokenString: 'tokenString',
+  tokenArray: 'tokenArray',
+  tokenNumber: 'tokenNumber',
+  tokenConstant: 'tokenConstant',
+  tokenObject: 'tokenObject',
+  tokenEvent: 'tokenEvent',
+  tokenKey: 'tokenKey',
+  tokenNull: 'tokenNull',
+  tokenStruct: 'tokenStruct',
+  tokenPackage: 'tokenPackage',
+  tokenOperator: 'tokenOperator',
+  tokenEnumMember: 'tokenEnumMember',
+  tokenRepo: 'tokenRepo',
+  tokenSymbol: 'tokenSymbol',
+  tokenFile: 'tokenFile',
+  tokenModule: 'tokenModule',
+  tokenNamespace: 'tokenNamespace',
+  tokenDate: 'tokenDate',
+  tokenIP: 'tokenIP',
+  tokenNested: 'tokenNested',
+  tokenAlias: 'tokenAlias',
+  tokenShape: 'tokenShape',
+  tokenGeo: 'tokenGeo',
+  tokenRange: 'tokenRange',
+  tokenBinary: 'tokenBinary',
+  tokenJoin: 'tokenJoin',
+  tokenPercolator: 'tokenPercolator',
+  tokenFlattened: 'tokenFlattened',
+  tokenRankFeature: 'tokenRankFeature',
+  tokenRankFeatures: 'tokenRankFeatures',
+  tokenKeyword: 'tokenKeyword',
+  tokenTag: 'tokenTag',
+  tokenCompletionSuggester: 'tokenCompletionSuggester',
+  tokenDenseVector: 'tokenDenseVector',
+  tokenText: 'tokenText',
+  tokenTokenCount: 'tokenTokenCount',
+  tokenSearchType: 'tokenSearchType',
+  tokenHistogram: 'tokenHistogram',
+};
diff --git a/src/components/icon/named_colors.tsx b/src/components/icon/named_colors.tsx
index 666e50a40ce..fb27be3a040 100644
--- a/src/components/icon/named_colors.tsx
+++ b/src/components/icon/named_colors.tsx
@@ -6,21 +6,21 @@
  * Side Public License, v 1.
  */
 
-export const colorToClassMap = {
-  default: null,
-  primary: 'euiIcon--primary',
-  success: 'euiIcon--success',
-  accent: 'euiIcon--accent',
-  warning: 'euiIcon--warning',
-  danger: 'euiIcon--danger',
-  text: 'euiIcon--text',
-  subdued: 'euiIcon--subdued',
-  ghost: 'euiIcon--ghost',
-  inherit: 'euiIcon--inherit',
-};
+export const COLORS = [
+  'default',
+  'primary',
+  'success',
+  'accent',
+  'warning',
+  'danger',
+  'text',
+  'subdued',
+  'ghost',
+  'inherit',
+] as const;
 
-export type NamedColor = keyof typeof colorToClassMap;
+export type NamedColor = typeof COLORS[number];
 
-export function isNamedColor(name: string): name is NamedColor {
-  return colorToClassMap.hasOwnProperty(name);
+export function isNamedColor(name: string): boolean {
+  return COLORS.includes(name as NamedColor);
 }
diff --git a/src/components/index.scss b/src/components/index.scss
index dfe65f6ef54..4cdd868f7c2 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -25,7 +25,6 @@
 @import 'flyout/index';
 @import 'form/index';
 @import 'header/index';
-@import 'icon/index';
 @import 'image/index';
 @import 'key_pad_menu/index';
 @import 'list_group/index';
diff --git a/src/components/tool_tip/icon_tip.tsx b/src/components/tool_tip/icon_tip.tsx
index 8aa6b1d0e03..1493357372b 100644
--- a/src/components/tool_tip/icon_tip.tsx
+++ b/src/components/tool_tip/icon_tip.tsx
@@ -40,7 +40,7 @@ export interface EuiIconTipProps {
   // EuiIconTip's `type` is passed to EuiIcon, so we want to exclude `type` from
   // iconProps; however, due to TS's bivariant function arguments `type` could be
   // passed without any error/feedback so we explicitly set it to `never` type
-  iconProps?: Omit<PropsOf<EuiIcon>, 'type'> & { type?: never };
+  iconProps?: Omit<PropsOf<typeof EuiIcon>, 'type'> & { type?: never };
 }
 
 type Props = Omit<EuiToolTipProps, 'children' | 'delay' | 'position'> &
diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss
index b95fb7e6387..e5ae34720d8 100644
--- a/src/global_styling/variables/_form.scss
+++ b/src/global_styling/variables/_form.scss
@@ -41,6 +41,15 @@ $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !d
 $euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 2%, 4%) !default;
 $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
 
+// Icons sizes
+$euiFormControlIconSizes: (
+  small: $euiSizeM,
+  medium: $euiSize,
+  large: $euiSizeL,
+  xLarge: $euiSizeXL,
+  xxLarge: $euiSizeXXL
+);
+
 // Control Layout
 $euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default;
 $euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default;
diff --git a/upcoming_changelogs/5967.md b/upcoming_changelogs/5967.md
new file mode 100644
index 00000000000..4c63bbffdb3
--- /dev/null
+++ b/upcoming_changelogs/5967.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiIcon` to Emotion; removed `$euiIconLoadingOpacity`, `$euiIconColors`, and `$euiIconSizes`
\ No newline at end of file
diff --git a/wiki/creating-icons.md b/wiki/creating-icons.md
index 10aba939b8a..50acdd241a3 100644
--- a/wiki/creating-icons.md
+++ b/wiki/creating-icons.md
@@ -60,7 +60,7 @@ Create a new feature branch against this repo and make the following changes:
 
 _1. Add your glyph to the `EuiIcon` component_
 - Add your SVG file to the `/src/components/icon/svgs` folder
-- Add a reference in the `/src/components/icon/icon.tsx` file (in alphabetical order)
+- Add a reference in the `/src/components/icon/icon_map.ts` file (in alphabetical order)
 
 _2. Display the icon in the docs_
 - Add the icon name to `/src-docs/src/views/icon/icons.js` *