From da850e4dfb1dab39ffc9c6f00045d8de53d58f5e Mon Sep 17 00:00:00 2001
From: Kshitij Kotasthane <kshitij.kotasthane@gmail.com>
Date: Fri, 2 Oct 2020 13:01:07 -0400
Subject: [PATCH] Changed EuiIcon mock to render as span instead of div (#4099)

---
 CHANGELOG.md                                  |   1 +
 .../__snapshots__/accordion.test.tsx.snap     |  22 +--
 .../badge/__snapshots__/badge.test.tsx.snap   |   6 +-
 .../collapsed_item_actions.test.tsx.snap      |   2 +-
 .../in_memory_table.test.tsx.snap             |   6 +-
 .../__snapshots__/breadcrumbs.test.tsx.snap   |  12 +-
 .../button/__snapshots__/button.test.tsx.snap |   6 +-
 .../button_content.test.tsx.snap              |   4 +-
 .../__snapshots__/button_empty.test.tsx.snap  |   6 +-
 .../__snapshots__/button_icon.test.tsx.snap   |   2 +-
 .../card/__snapshots__/card.test.tsx.snap     |   2 +-
 .../__snapshots__/card_select.test.tsx.snap   |   2 +-
 .../__snapshots__/code_block.test.tsx.snap    |   4 +-
 .../collapsible_nav.test.tsx.snap             |  16 +-
 .../collapsible_nav_group.test.tsx.snap       |   8 +-
 .../__snapshots__/color_picker.test.tsx.snap  |  48 +++---
 .../color_palette_picker.test.tsx.snap        |  14 +-
 .../__snapshots__/combo_box.test.tsx.snap     |   4 +-
 .../__snapshots__/comment.test.tsx.snap       |  10 +-
 .../__snapshots__/comment_list.test.tsx.snap  |   2 +-
 .../comment_timeline.test.tsx.snap            |   4 +-
 .../__snapshots__/context_menu.test.tsx.snap  |  14 +-
 .../context_menu_item.test.tsx.snap           |   2 +-
 .../context_menu_panel.test.tsx.snap          |  16 +-
 .../__snapshots__/control_bar.test.tsx.snap   |  28 ++--
 .../__snapshots__/data_grid.test.tsx.snap     | 118 +++++++-------
 .../__snapshots__/date_picker.test.tsx.snap   |   2 +-
 .../date_picker_range.test.tsx.snap           |   2 +-
 .../__snapshots__/empty_prompt.test.tsx.snap  |   4 +-
 .../__snapshots__/expression.test.tsx.snap    |   4 +-
 .../__snapshots__/facet_button.test.tsx.snap  |   2 +-
 .../__snapshots__/filter_button.test.tsx.snap |   2 +-
 .../filter_select_item.test.tsx.snap          |   2 +-
 .../flyout/__snapshots__/flyout.test.tsx.snap |  20 +--
 .../field_password.test.tsx.snap              |  28 ++--
 .../__snapshots__/file_picker.test.tsx.snap   |   2 +-
 .../form_control_layout.test.tsx.snap         |  10 +-
 ..._control_layout_clear_button.test.tsx.snap |   2 +-
 ...m_control_layout_custom_icon.test.tsx.snap |   4 +-
 ...orm_control_layout_delimited.test.tsx.snap |   2 +-
 .../__snapshots__/super_select.test.tsx.snap  |  30 ++--
 .../super_select_control.test.tsx.snap        |  16 +-
 .../switch/__snapshots__/switch.test.tsx.snap |   8 +-
 .../__snapshots__/header_logo.test.tsx.snap   |   8 +-
 .../__snapshots__/header_links.test.tsx.snap  |   2 +-
 .../header_section_item_button.test.tsx.snap  |   2 +-
 .../health/__snapshots__/health.test.tsx.snap |   2 +-
 src/components/icon/icon.testenv.tsx          |   2 +-
 .../image/__snapshots__/image.test.tsx.snap   |   2 +-
 .../link/__snapshots__/link.test.tsx.snap     |   2 +-
 .../__snapshots__/list_group.test.tsx.snap    |   8 +-
 .../list_group_item.test.tsx.snap             |   6 +-
 .../pinnable_list_group.test.tsx.snap         |  24 +--
 .../loading_kibana.test.tsx.snap              |   8 +-
 .../markdown_editor.test.tsx.snap             |  22 +--
 .../__snapshots__/confirm_modal.test.tsx.snap |   4 +-
 .../modal/__snapshots__/modal.test.tsx.snap   |   2 +-
 .../__snapshots__/nav_drawer.test.tsx.snap    |  44 +++---
 .../__snapshots__/pagination.test.tsx.snap    |   4 +-
 .../selectable_list_item.test.tsx.snap        |  20 +--
 .../selectable_search.test.tsx.snap           |   6 +-
 ...selectable_template_sitewide.test.tsx.snap |  10 +-
 .../__snapshots__/side_nav.test.tsx.snap      |  20 +--
 .../steps/__snapshots__/step.test.tsx.snap    |   6 +-
 .../step_horizontal.test.tsx.snap             |   8 +-
 .../__snapshots__/step_number.test.tsx.snap   |   6 +-
 .../steps_horizontal.test.tsx.snap            |   2 +-
 .../__snapshots__/suggest_input.test.tsx.snap |   2 +-
 .../__snapshots__/suggest_item.test.tsx.snap  |   6 +-
 .../table_sort_mobile.test.tsx.snap           |   2 +-
 .../table_sort_mobile_item.test.tsx.snap      |   2 +-
 .../table_pagination.test.tsx.snap            |  10 +-
 .../global_toast_list.test.tsx.snap           |  16 +-
 .../toast/__snapshots__/toast.test.tsx.snap   |   2 +-
 .../token/__snapshots__/token.test.tsx.snap   | 146 +++++++++---------
 .../__snapshots__/icon_tip.test.tsx.snap      |   8 +-
 .../tour_step_indicator.test.tsx.snap         |   6 +-
 .../__snapshots__/tree_view.test.tsx.snap     |   8 +-
 78 files changed, 464 insertions(+), 463 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80b8d345cd3..c48ad19ab97 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `max-width: 100%` to `EuiKeyPadMenu` to allow it to shrink when its container is smaller than its fixed width ([ #4092](https://github.com/elastic/eui/pull/4092))
+- Changed `EuiIcon` test mock to render as `span` instead of `div` ([#4099](https://github.com/elastic/eui/pull/4099))
 
 **Bug fixes**
 
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index d44de7e8d9d..020d001c37e 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
             size="m"
             type="arrowRight"
           >
-            <div
+            <span
               className="euiAccordion__icon"
               data-euiicon-type="arrowRight"
               size="m"
@@ -92,7 +92,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
             size="m"
             type="arrowRight"
           >
-            <div
+            <span
               className="euiAccordion__icon euiAccordion__icon-isOpen"
               data-euiicon-type="arrowRight"
               size="m"
@@ -141,7 +141,7 @@ exports[`EuiAccordion is rendered 1`] = `
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon"
           data-euiicon-type="arrowRight"
         />
@@ -217,7 +217,7 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon"
           data-euiicon-type="arrowRight"
         />
@@ -261,7 +261,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon"
           data-euiicon-type="arrowRight"
         />
@@ -305,7 +305,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon"
           data-euiicon-type="arrowRight"
         />
@@ -345,7 +345,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon"
           data-euiicon-type="arrowRight"
         />
@@ -392,7 +392,7 @@ exports[`EuiAccordion props forceState is rendered 1`] = `
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon"
           data-euiicon-type="arrowRight"
         />
@@ -436,7 +436,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon euiAccordion__icon-isOpen"
           data-euiicon-type="arrowRight"
         />
@@ -480,7 +480,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon"
           data-euiicon-type="arrowRight"
         />
@@ -531,7 +531,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon"
           data-euiicon-type="arrowRight"
         />
diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap
index 4c326db3643..bd6e2b78737 100644
--- a/src/components/badge/__snapshots__/badge.test.tsx.snap
+++ b/src/components/badge/__snapshots__/badge.test.tsx.snap
@@ -307,7 +307,7 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
     >
       Content
     </span>
-    <div
+    <span
       class="euiBadge__icon"
       data-euiicon-type="user"
     />
@@ -328,7 +328,7 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
     >
       Content
     </span>
-    <div
+    <span
       class="euiBadge__icon"
       data-euiicon-type="user"
     />
@@ -349,7 +349,7 @@ exports[`EuiBadge props iconType is rendered 1`] = `
     >
       Content
     </span>
-    <div
+    <span
       class="euiBadge__icon"
       data-euiicon-type="user"
     />
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
index 775331b52a1..0ecfdaf9f61 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`CollapsedItemActions render 1`] = `
         data-test-subj="euiCollapsedItemActionsButton"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="boxesHorizontal"
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index a182dd61cc6..4be0d7d09a0 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -406,7 +406,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                       size="m"
                                       type="arrowDown"
                                     >
-                                      <div
+                                      <span
                                         className="euiButtonContent__icon"
                                         data-euiicon-type="arrowDown"
                                         size="m"
@@ -486,7 +486,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                   size="m"
                                   type="arrowLeft"
                                 >
-                                  <div
+                                  <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
                                     data-euiicon-type="arrowLeft"
@@ -698,7 +698,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                   size="m"
                                   type="arrowRight"
                                 >
-                                  <div
+                                  <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
                                     data-euiicon-type="arrowRight"
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
index d4fa97dc334..0e37e6eb929 100644
--- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
+++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
         type="button"
       >
         … 
-        <div
+        <span
           data-euiicon-type="arrowDown"
         />
       </button>
@@ -174,7 +174,7 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
         type="button"
       >
         … 
-        <div
+        <span
           data-euiicon-type="arrowDown"
         />
       </button>
@@ -310,7 +310,7 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
         type="button"
       >
         … 
-        <div
+        <span
           data-euiicon-type="arrowDown"
         />
       </button>
@@ -385,7 +385,7 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = `
         type="button"
       >
         … 
-        <div
+        <span
           data-euiicon-type="arrowDown"
         />
       </button>
@@ -440,7 +440,7 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
         type="button"
       >
         … 
-        <div
+        <span
           data-euiicon-type="arrowDown"
         />
       </button>
@@ -496,7 +496,7 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
         type="button"
       >
         … 
-        <div
+        <span
           data-euiicon-type="arrowDown"
         />
       </button>
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 8e699c46818..fb283b97522 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -183,7 +183,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
   <span
     class="euiButtonContent euiButton__content"
   >
-    <div
+    <span
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
@@ -204,7 +204,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
   <span
     class="euiButtonContent euiButtonContent--iconRight euiButton__content"
   >
-    <div
+    <span
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
@@ -225,7 +225,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
   <span
     class="euiButtonContent euiButton__content"
   >
-    <div
+    <span
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
diff --git a/src/components/button/__snapshots__/button_content.test.tsx.snap b/src/components/button/__snapshots__/button_content.test.tsx.snap
index 0625a6a37f6..9743a74a55b 100644
--- a/src/components/button/__snapshots__/button_content.test.tsx.snap
+++ b/src/components/button/__snapshots__/button_content.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`EuiButtonContent props iconSide is rendered 1`] = `
 <span
   class="euiButtonContent euiButtonContent--iconRight"
 >
-  <div
+  <span
     class="euiButtonContent__icon"
     data-euiicon-type="bolt"
   />
@@ -36,7 +36,7 @@ exports[`EuiButtonContent props iconType is rendered 1`] = `
 <span
   class="euiButtonContent"
 >
-  <div
+  <span
     class="euiButtonContent__icon"
     data-euiicon-type="bolt"
   />
diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
index 1057914bafe..fbb99a7e457 100644
--- a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
+++ b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -183,7 +183,7 @@ exports[`EuiButtonEmpty props iconSide left is rendered 1`] = `
   <span
     class="euiButtonContent euiButtonEmpty__content"
   >
-    <div
+    <span
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
@@ -204,7 +204,7 @@ exports[`EuiButtonEmpty props iconSide right is rendered 1`] = `
   <span
     class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
-    <div
+    <span
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
@@ -225,7 +225,7 @@ exports[`EuiButtonEmpty props iconType is rendered 1`] = `
   <span
     class="euiButtonContent euiButtonEmpty__content"
   >
-    <div
+    <span
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
index 2cbec77a5c1..1bc0254d9c4 100644
--- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
+++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -97,7 +97,7 @@ exports[`EuiButtonIcon props iconType is rendered 1`] = `
   class="euiButtonIcon euiButtonIcon--primary"
   type="button"
 >
-  <div
+  <span
     aria-hidden="true"
     class="euiButtonIcon__icon"
     data-euiicon-type="user"
diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index 60cb0c1fe33..4500c6e8f0f 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -218,7 +218,7 @@ exports[`EuiCard props icon 1`] = `
   <div
     class="euiCard__top"
   >
-    <div
+    <span
       class="myIconClass euiCard__icon"
       data-euiicon-type="apmApp"
     />
diff --git a/src/components/card/__snapshots__/card_select.test.tsx.snap b/src/components/card/__snapshots__/card_select.test.tsx.snap
index 68e7b3ff67a..e582accadd9 100644
--- a/src/components/card/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/__snapshots__/card_select.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`EuiCardSelect props isSelected 1`] = `
   <span
     class="euiButtonContent euiButtonEmpty__content"
   >
-    <div
+    <span
       class="euiButtonContent__icon"
       data-euiicon-type="check"
     />
diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index 5674dc2a4d4..adfedc4c68a 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -105,7 +105,7 @@ console.log(some);
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="copy"
@@ -158,7 +158,7 @@ console.log(some);
       class="euiButtonIcon euiButtonIcon--text euiCodeBlock__fullScreenButton"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="fullScreen"
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 63f6bd526d4..f27ad237dd6 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -60,7 +60,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -114,7 +114,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -170,7 +170,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -220,7 +220,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -270,7 +270,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -318,7 +318,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
         <span
           class="euiButtonContent euiButtonEmpty__content"
         >
-          <div
+          <span
             class="euiButtonContent__icon"
             data-euiicon-type="cross"
           />
@@ -367,7 +367,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
@@ -422,7 +422,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="cross"
             />
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index 3206df2643f..71d8af929ce 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
-        <div
+        <span
           data-euiicon-type="bolt"
           data-test-subj="DTS"
         />
@@ -97,7 +97,7 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
-        <div
+        <span
           data-euiicon-type="bolt"
         />
       </div>
@@ -133,7 +133,7 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
-        <div
+        <span
           data-euiicon-type="bolt"
         />
       </div>
@@ -252,7 +252,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
       <span
         class="euiAccordion__iconWrapper"
       >
-        <div
+        <span
           class="euiAccordion__icon"
           data-euiicon-type="arrowRight"
         />
diff --git a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
index ca0fe575960..09098871832 100644
--- a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
+++ b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`renders EuiColorPicker 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="swatchInput"
@@ -52,7 +52,7 @@ exports[`renders EuiColorPicker 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -101,7 +101,7 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="swatchInput"
@@ -119,7 +119,7 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
             class="euiFormControlLayoutClearButton"
             type="button"
           >
-            <div
+            <span
               class="euiFormControlLayoutClearButton__icon"
               data-euiicon-type="cross"
             />
@@ -127,7 +127,7 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -176,7 +176,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="swatchInput"
@@ -192,7 +192,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -240,7 +240,7 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="stopSlash"
@@ -256,7 +256,7 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -304,7 +304,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="stopSlash"
@@ -320,7 +320,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -368,7 +368,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="stopSlash"
@@ -384,7 +384,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -438,7 +438,7 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="swatchInput"
@@ -454,7 +454,7 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -508,7 +508,7 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="swatchInput"
@@ -524,7 +524,7 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -573,7 +573,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="swatchInput"
@@ -589,7 +589,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -639,7 +639,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="swatchInput"
@@ -655,7 +655,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -704,7 +704,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="swatchInput"
@@ -720,7 +720,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -953,7 +953,7 @@ exports[`renders readOnly EuiColorPicker 1`] = `
                 <span
                   class="euiFormControlLayoutCustomIcon"
                 >
-                  <div
+                  <span
                     aria-hidden="true"
                     class="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="swatchInput"
diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
index 1caaa17f5cc..bbddf2aec64 100644
--- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
+++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -89,7 +89,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -149,7 +149,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -209,7 +209,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -269,7 +269,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -321,7 +321,7 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -378,7 +378,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index 255d1c85d47..5fc55e9c15a 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`EuiComboBox is rendered 1`] = `
           data-test-subj="comboBoxToggleListButton"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
@@ -299,7 +299,7 @@ exports[`props options list is rendered 1`] = `
           data-test-subj="comboBoxToggleListButton"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
diff --git a/src/components/comment_list/__snapshots__/comment.test.tsx.snap b/src/components/comment_list/__snapshots__/comment.test.tsx.snap
index a2293959a2c..c4cd24693e3 100644
--- a/src/components/comment_list/__snapshots__/comment.test.tsx.snap
+++ b/src/components/comment_list/__snapshots__/comment.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`EuiComment is rendered 1`] = `
       <div
         class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
       >
-        <div
+        <span
           data-euiicon-type="user"
         />
       </div>
@@ -57,7 +57,7 @@ exports[`EuiComment props event is rendered 1`] = `
       <div
         class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
       >
-        <div
+        <span
           data-euiicon-type="user"
         />
       </div>
@@ -152,7 +152,7 @@ exports[`EuiComment props timestamp is rendered 1`] = `
       <div
         class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
       >
-        <div
+        <span
           data-euiicon-type="user"
         />
       </div>
@@ -201,7 +201,7 @@ exports[`EuiComment props type is rendered 1`] = `
       <div
         class="euiCommentTimeline__icon--default euiCommentTimeline__icon--update"
       >
-        <div
+        <span
           data-euiicon-type="dot"
         />
       </div>
@@ -243,7 +243,7 @@ exports[`EuiComment renders a body 1`] = `
       <div
         class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
       >
-        <div
+        <span
           data-euiicon-type="user"
         />
       </div>
diff --git a/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap
index e341916f82f..1fd36c2957d 100644
--- a/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap
+++ b/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiCommentList is rendered 1`] = `
         <div
           class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
         >
-          <div
+          <span
             data-euiicon-type="user"
           />
         </div>
diff --git a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
index 7da312647b8..3da336665e8 100644
--- a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
+++ b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`EuiCommentTimeline is rendered 1`] = `
     <div
       class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
     >
-      <div
+      <span
         data-euiicon-type="user"
       />
     </div>
@@ -55,7 +55,7 @@ exports[`EuiCommentTimeline props type is rendered 1`] = `
     <div
       class="euiCommentTimeline__icon--default euiCommentTimeline__icon--update"
     >
-      <div
+      <span
         data-euiicon-type="dot"
       />
     </div>
diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
index 170e66b1299..7ac48c9edfc 100644
--- a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
+++ b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
@@ -152,7 +152,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
       <span
         class="euiContextMenu__itemLayout"
       >
-        <div
+        <span
           class="euiContextMenu__icon"
           data-euiicon-type="arrowLeft"
         />
@@ -191,7 +191,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
       <span
         class="euiContextMenu__itemLayout"
       >
-        <div
+        <span
           class="euiContextMenu__icon"
           data-euiicon-type="arrowLeft"
         />
@@ -222,7 +222,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
       <span
         class="euiContextMenu__itemLayout"
       >
-        <div
+        <span
           class="euiContextMenu__icon"
           data-euiicon-type="arrowLeft"
         />
@@ -247,7 +247,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
             >
               2a
             </span>
-            <div
+            <span
               class="euiContextMenu__arrow"
               data-euiicon-type="arrowRight"
             />
@@ -265,7 +265,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
             >
               2b
             </span>
-            <div
+            <span
               class="euiContextMenu__arrow"
               data-euiicon-type="arrowRight"
             />
@@ -283,7 +283,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
             >
               2c
             </span>
-            <div
+            <span
               class="euiContextMenu__arrow"
               data-euiicon-type="arrowRight"
             />
@@ -311,7 +311,7 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
       <span
         class="euiContextMenu__itemLayout"
       >
-        <div
+        <span
           class="euiContextMenu__icon"
           data-euiicon-type="arrowLeft"
         />
diff --git a/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap
index e08df7401a3..7e7f5a111a1 100644
--- a/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap
+++ b/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`EuiContextMenuItem props hasPanel is rendered 1`] = `
     <span
       class="euiContextMenuItem__text"
     />
-    <div
+    <span
       class="euiContextMenu__arrow"
       data-euiicon-type="arrowRight"
     />
diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap
index 10fdc5edf2b..9e274d3cc9d 100644
--- a/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap
+++ b/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap
@@ -152,7 +152,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
       <span
         class="euiContextMenu__itemLayout"
       >
-        <div
+        <span
           class="euiContextMenu__icon"
           data-euiicon-type="arrowLeft"
         />
@@ -191,7 +191,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
       <span
         class="euiContextMenu__itemLayout"
       >
-        <div
+        <span
           class="euiContextMenu__icon"
           data-euiicon-type="arrowLeft"
         />
@@ -222,7 +222,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
       <span
         class="euiContextMenu__itemLayout"
       >
-        <div
+        <span
           class="euiContextMenu__icon"
           data-euiicon-type="arrowLeft"
         />
@@ -247,7 +247,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
             >
               2a
             </span>
-            <div
+            <span
               class="euiContextMenu__arrow"
               data-euiicon-type="arrowRight"
             />
@@ -265,7 +265,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
             >
               2b
             </span>
-            <div
+            <span
               class="euiContextMenu__arrow"
               data-euiicon-type="arrowRight"
             />
@@ -283,7 +283,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
             >
               2c
             </span>
-            <div
+            <span
               class="euiContextMenu__arrow"
               data-euiicon-type="arrowRight"
             />
@@ -311,7 +311,7 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
       <span
         class="euiContextMenu__itemLayout"
       >
-        <div
+        <span
           class="euiContextMenu__icon"
           data-euiicon-type="arrowLeft"
         />
@@ -361,7 +361,7 @@ exports[`EuiContextMenuPanel props onClose renders a button as a title 1`] = `
     <span
       class="euiContextMenu__itemLayout"
     >
-      <div
+      <span
         class="euiContextMenu__icon"
         data-euiicon-type="arrowLeft"
       />
diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
index aae4df037aa..1008506cfd0 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`EuiControlBar is rendered 1`] = `
     <div
       class="euiControlBar__divider"
     />
-    <div
+    <span
       aria-label="Sample Icon"
       class="euiControlBar__icon"
       color="danger"
@@ -197,7 +197,7 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
               <div
                 class="euiControlBar__divider"
               />
-              <div
+              <span
                 aria-label="Sample Icon"
                 class="euiControlBar__icon"
                 color="danger"
@@ -353,7 +353,7 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
               key="sample_icon4"
               type="alert"
             >
-              <div
+              <span
                 aria-label="Sample Icon"
                 className="euiControlBar__icon"
                 color="danger"
@@ -512,7 +512,7 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
               <div
                 class="euiControlBar__divider"
               />
-              <div
+              <span
                 aria-label="Sample Icon"
                 class="euiControlBar__icon"
                 color="danger"
@@ -668,7 +668,7 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
               key="sample_icon4"
               type="alert"
             >
-              <div
+              <span
                 aria-label="Sample Icon"
                 className="euiControlBar__icon"
                 color="danger"
@@ -826,7 +826,7 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
               <div
                 class="euiControlBar__divider"
               />
-              <div
+              <span
                 aria-label="Sample Icon"
                 class="euiControlBar__icon"
                 color="danger"
@@ -982,7 +982,7 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
               key="sample_icon4"
               type="alert"
             >
-              <div
+              <span
                 aria-label="Sample Icon"
                 className="euiControlBar__icon"
                 color="danger"
@@ -1209,7 +1209,7 @@ exports[`EuiControlBar props position is rendered 1`] = `
           key="sample_icon4"
           type="alert"
         >
-          <div
+          <span
             aria-label="Sample Icon"
             className="euiControlBar__icon"
             color="danger"
@@ -1352,7 +1352,7 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
               <div
                 class="euiControlBar__divider"
               />
-              <div
+              <span
                 aria-label="Sample Icon"
                 class="euiControlBar__icon"
                 color="danger"
@@ -1508,7 +1508,7 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
               key="sample_icon4"
               type="alert"
             >
-              <div
+              <span
                 aria-label="Sample Icon"
                 className="euiControlBar__icon"
                 color="danger"
@@ -1666,7 +1666,7 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
               <div
                 class="euiControlBar__divider"
               />
-              <div
+              <span
                 aria-label="Sample Icon"
                 class="euiControlBar__icon"
                 color="danger"
@@ -1827,7 +1827,7 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
               key="sample_icon4"
               type="alert"
             >
-              <div
+              <span
                 aria-label="Sample Icon"
                 className="euiControlBar__icon"
                 color="danger"
@@ -1990,7 +1990,7 @@ exports[`EuiControlBar props size is rendered 1`] = `
               <div
                 class="euiControlBar__divider"
               />
-              <div
+              <span
                 aria-label="Sample Icon"
                 class="euiControlBar__icon"
                 color="danger"
@@ -2146,7 +2146,7 @@ exports[`EuiControlBar props size is rendered 1`] = `
               key="sample_icon4"
               type="alert"
             >
-              <div
+              <span
                 aria-label="Sample Icon"
                 className="euiControlBar__icon"
                 color="danger"
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 081603dffd0..11e4f169c68 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
           <span
             class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="arrowDown"
             />
@@ -90,7 +90,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
         href="#htmlId"
         rel="noreferrer"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="arrowLeft"
@@ -153,7 +153,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
         disabled=""
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="arrowRight"
@@ -197,7 +197,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="eyeClosed"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="eyeClosed"
           />
@@ -246,7 +246,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortUp"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortUp"
           />
@@ -295,7 +295,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortDown"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortDown"
           />
@@ -343,7 +343,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortLeft"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortLeft"
           />
@@ -391,7 +391,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortRight"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortRight"
           />
@@ -481,7 +481,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortUp"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortUp"
           />
@@ -530,7 +530,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortDown"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortDown"
           />
@@ -605,7 +605,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="eyeClosed"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="eyeClosed"
           />
@@ -644,7 +644,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortUp"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortUp"
           />
@@ -683,7 +683,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortDown"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortDown"
           />
@@ -721,7 +721,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortLeft"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortLeft"
           />
@@ -759,7 +759,7 @@ exports[`EuiDataGrid render column actions renders various column actions config
           className="euiListGroupItem__icon"
           type="sortRight"
         >
-          <div
+          <span
             className="euiListGroupItem__icon"
             data-euiicon-type="sortRight"
           />
@@ -842,7 +842,7 @@ Array [
               <span
                 class="euiButtonContent euiButtonEmpty__content"
               >
-                <div
+                <span
                   class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
@@ -870,7 +870,7 @@ Array [
               <span
                 class="euiButtonContent euiButtonEmpty__content"
               >
-                <div
+                <span
                   class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
@@ -891,7 +891,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
@@ -949,7 +949,7 @@ Array [
                     <div
                       class="euiPopover__anchor"
                     >
-                      <div
+                      <span
                         aria-label="Header actions"
                         color="text"
                         data-euiicon-type="arrowDown"
@@ -985,7 +985,7 @@ Array [
                     <div
                       class="euiPopover__anchor"
                     >
-                      <div
+                      <span
                         aria-label="Header actions"
                         color="text"
                         data-euiicon-type="arrowDown"
@@ -1046,7 +1046,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -1103,7 +1103,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -1166,7 +1166,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -1223,7 +1223,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -1286,7 +1286,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -1343,7 +1343,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -1416,7 +1416,7 @@ Array [
               <span
                 class="euiButtonContent euiButtonEmpty__content"
               >
-                <div
+                <span
                   class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
@@ -1444,7 +1444,7 @@ Array [
               <span
                 class="euiButtonContent euiButtonEmpty__content"
               >
-                <div
+                <span
                   class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
@@ -1465,7 +1465,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
@@ -1538,7 +1538,7 @@ Array [
                     <div
                       class="euiPopover__anchor"
                     >
-                      <div
+                      <span
                         aria-label="Header actions"
                         color="text"
                         data-euiicon-type="arrowDown"
@@ -1574,7 +1574,7 @@ Array [
                     <div
                       class="euiPopover__anchor"
                     >
-                      <div
+                      <span
                         aria-label="Header actions"
                         color="text"
                         data-euiicon-type="arrowDown"
@@ -1699,7 +1699,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -1756,7 +1756,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -1917,7 +1917,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -1974,7 +1974,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -2135,7 +2135,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -2192,7 +2192,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -2311,7 +2311,7 @@ Array [
               <span
                 class="euiButtonContent euiButtonEmpty__content"
               >
-                <div
+                <span
                   class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
@@ -2339,7 +2339,7 @@ Array [
               <span
                 class="euiButtonContent euiButtonEmpty__content"
               >
-                <div
+                <span
                   class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
@@ -2360,7 +2360,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
@@ -2418,7 +2418,7 @@ Array [
                     <div
                       class="euiPopover__anchor"
                     >
-                      <div
+                      <span
                         aria-label="Header actions"
                         color="text"
                         data-euiicon-type="arrowDown"
@@ -2456,7 +2456,7 @@ Array [
                     <div
                       class="euiPopover__anchor"
                     >
-                      <div
+                      <span
                         aria-label="Header actions"
                         color="text"
                         data-euiicon-type="arrowDown"
@@ -2517,7 +2517,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -2574,7 +2574,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -2637,7 +2637,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -2694,7 +2694,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -2757,7 +2757,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -2814,7 +2814,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -2884,7 +2884,7 @@ Array [
               <span
                 class="euiButtonContent euiButtonEmpty__content"
               >
-                <div
+                <span
                   class="euiButtonContent__icon"
                   data-euiicon-type="listAdd"
                 />
@@ -2912,7 +2912,7 @@ Array [
               <span
                 class="euiButtonContent euiButtonEmpty__content"
               >
-                <div
+                <span
                   class="euiButtonContent__icon"
                   data-euiicon-type="tableDensityExpanded"
                 />
@@ -2933,7 +2933,7 @@ Array [
           <span
             class="euiButtonContent euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="fullScreen"
             />
@@ -2991,7 +2991,7 @@ Array [
                     <div
                       class="euiPopover__anchor"
                     >
-                      <div
+                      <span
                         aria-label="Header actions"
                         color="text"
                         data-euiicon-type="arrowDown"
@@ -3027,7 +3027,7 @@ Array [
                     <div
                       class="euiPopover__anchor"
                     >
-                      <div
+                      <span
                         aria-label="Header actions"
                         color="text"
                         data-euiicon-type="arrowDown"
@@ -3088,7 +3088,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -3145,7 +3145,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -3208,7 +3208,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -3265,7 +3265,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -3328,7 +3328,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
@@ -3385,7 +3385,7 @@ Array [
                             title="Click or hit enter to interact with cell content"
                             type="button"
                           >
-                            <div
+                            <span
                               aria-hidden="true"
                               class="euiButtonIcon__icon"
                               data-euiicon-type="expandMini"
diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
index 024c17758df..3100f370605 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
+++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -958,7 +958,7 @@ exports[`EuiDatePicker popoverPlacement top-end is rendered 1`] = `
                       className="euiFormControlLayoutCustomIcon__icon"
                       type="calendar"
                     >
-                      <div
+                      <span
                         aria-hidden="true"
                         className="euiFormControlLayoutCustomIcon__icon"
                         data-euiicon-type="calendar"
diff --git a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
index 97f683ed143..acbd017f4bc 100644
--- a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
+++ b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`EuiDatePickerRange is rendered 1`] = `
             <span
               class="euiFormControlLayoutCustomIcon"
             >
-              <div
+              <span
                 aria-hidden="true"
                 class="euiFormControlLayoutCustomIcon__icon"
                 data-euiicon-type="calendar"
diff --git a/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap b/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
index b93126155c6..faf354d4355 100644
--- a/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
+++ b/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
   class="euiEmptyPrompt testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     color="subdued"
     data-euiicon-type="arrowUp"
   />
@@ -99,7 +99,7 @@ exports[`EuiEmptyPrompt props iconType renders alone 1`] = `
 <div
   class="euiEmptyPrompt"
 >
-  <div
+  <span
     color="subdued"
     data-euiicon-type="arrowUp"
   />
diff --git a/src/components/expression/__snapshots__/expression.test.tsx.snap b/src/components/expression/__snapshots__/expression.test.tsx.snap
index 191c32ab740..9a2b5381789 100644
--- a/src/components/expression/__snapshots__/expression.test.tsx.snap
+++ b/src/components/expression/__snapshots__/expression.test.tsx.snap
@@ -136,7 +136,7 @@ exports[`EuiExpression props descriptionWidth changes the description&apos;s wid
   >
     42
   </span>
-  <div
+  <span
     class="euiExpression__icon"
     color="danger"
     data-euiicon-type="alert"
@@ -214,7 +214,7 @@ exports[`EuiExpression props isInvalid renders error state 1`] = `
   >
     42
   </span>
-  <div
+  <span
     class="euiExpression__icon"
     color="danger"
     data-euiicon-type="alert"
diff --git a/src/components/facet/__snapshots__/facet_button.test.tsx.snap b/src/components/facet/__snapshots__/facet_button.test.tsx.snap
index 4351f7215ee..f82a60fedee 100644
--- a/src/components/facet/__snapshots__/facet_button.test.tsx.snap
+++ b/src/components/facet/__snapshots__/facet_button.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`EuiFacetButton props icon is rendered 1`] = `
   <span
     class="euiFacetButton__content"
   >
-    <div
+    <span
       class="euiFacetButton__icon"
       data-euiicon-type="dot"
     />
diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
index 407cccfed90..49000bbd392 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
   <span
     class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
   >
-    <div
+    <span
       class="euiButtonContent__icon"
       data-euiicon-type="user"
     />
diff --git a/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
index 2cbc746edea..f5806f1168f 100644
--- a/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`EuiFilterSelectItem is rendered 1`] = `
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
-      <div
+      <span
         data-euiicon-type="empty"
       />
     </div>
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 959e4f1f304..76c3b55f3ed 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`EuiFlyout is rendered 1`] = `
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
@@ -71,7 +71,7 @@ exports[`EuiFlyout props accepts div props 1`] = `
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
@@ -143,7 +143,7 @@ exports[`EuiFlyout props max width can be set to a custom number 1`] = `
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
@@ -186,7 +186,7 @@ exports[`EuiFlyout props max width can be set to a custom value and measurement
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
@@ -228,7 +228,7 @@ exports[`EuiFlyout props max width can be set to a default 1`] = `
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
@@ -272,7 +272,7 @@ Array [
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="cross"
@@ -317,7 +317,7 @@ Array [
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="cross"
@@ -360,7 +360,7 @@ exports[`EuiFlyout props size l is rendered 1`] = `
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
@@ -402,7 +402,7 @@ exports[`EuiFlyout props size m is rendered 1`] = `
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
@@ -444,7 +444,7 @@ exports[`EuiFlyout props size s is rendered 1`] = `
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
diff --git a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index aab9f4059f0..599a3020f62 100644
--- a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`EuiFieldPassword is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -55,7 +55,7 @@ exports[`EuiFieldPassword props compressed is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -85,7 +85,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -109,7 +109,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
     title="Show password as plain text. Note: this will visually expose your password on the screen."
     type="button"
   >
-    <div
+    <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
       data-euiicon-type="eye"
@@ -137,7 +137,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -152,7 +152,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
     title="Show password as plain text. Note: this will visually expose your password on the screen."
     type="button"
   >
-    <div
+    <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
       data-euiicon-type="eye"
@@ -180,7 +180,7 @@ exports[`EuiFieldPassword props fullWidth is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -212,7 +212,7 @@ exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -242,7 +242,7 @@ exports[`EuiFieldPassword props isLoading is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -284,7 +284,7 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -319,7 +319,7 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -333,7 +333,7 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
     title="Show password as plain text. Note: this will visually expose your password on the screen."
     type="button"
   >
-    <div
+    <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
       data-euiicon-type="eye"
@@ -361,7 +361,7 @@ exports[`EuiFieldPassword props type password is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
@@ -391,7 +391,7 @@ exports[`EuiFieldPassword props type text is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="lock"
diff --git a/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap b/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap
index 2b334160412..6368bb0e3b3 100644
--- a/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap
+++ b/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiFilePicker is rendered 1`] = `
       class="euiFilePicker__prompt"
       id="htmlId"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiFilePicker__icon"
         data-euiicon-type="importAction"
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
index 99773e466a1..9006e021d07 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
         data-test-subj="clearButton"
         type="button"
       >
-        <div
+        <span
           class="euiFormControlLayoutClearButton__icon"
           data-euiicon-type="cross"
         />
@@ -63,7 +63,7 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="alert"
@@ -88,7 +88,7 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
         class="euiFormControlLayoutCustomIcon customClass"
         data-test-subj="myIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="alert"
@@ -112,7 +112,7 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="alert"
@@ -136,7 +136,7 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="alert"
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
index ea446b013a4..3f297b5086f 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`EuiFormControlLayoutClearButton is rendered 1`] = `
   data-test-subj="clearButton"
   type="button"
 >
-  <div
+  <span
     class="euiFormControlLayoutClearButton__icon"
     data-euiicon-type="cross"
   />
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap
index 7215b218ab0..af807acae14 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`EuiFormControlLayoutCustomIcon is rendered as button 1`] = `
   data-test-subj="customIcon"
   type="button"
 >
-  <div
+  <span
     aria-hidden="true"
     class="euiFormControlLayoutCustomIcon__icon"
     data-euiicon-type="alert"
@@ -19,7 +19,7 @@ exports[`EuiFormControlLayoutCustomIcon is rendered as span 1`] = `
   class="euiFormControlLayoutCustomIcon customClass"
   data-test-subj="customIcon"
 >
-  <div
+  <span
     aria-hidden="true"
     class="euiFormControlLayoutCustomIcon__icon"
     data-euiicon-type="alert"
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap
index d31af264e1a..892e4340618 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a node 1`]
       <div
         class="euiTextColor euiTextColor--subdued"
       >
-        <div
+        <span
           data-euiicon-type="alert"
         />
       </div>
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index 3b1bcc78ef1..7d4bcc0abcc 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`EuiSuperSelect is rendered 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -87,7 +87,7 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -136,7 +136,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -192,7 +192,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
               <span
                 class="euiContextMenu__itemLayout"
               >
-                <div
+                <span
                   class="euiContextMenu__icon"
                   data-euiicon-type="empty"
                 />
@@ -213,7 +213,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
               <span
                 class="euiContextMenu__itemLayout"
               >
-                <div
+                <span
                   class="euiContextMenu__icon"
                   data-euiicon-type="empty"
                 />
@@ -274,7 +274,7 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -329,7 +329,7 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -385,7 +385,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -443,7 +443,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
               <span
                 class="euiContextMenu__itemLayout"
               >
-                <div
+                <span
                   class="euiContextMenu__icon"
                   data-euiicon-type="check"
                 />
@@ -465,7 +465,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
               <span
                 class="euiContextMenu__itemLayout"
               >
-                <div
+                <span
                   class="euiContextMenu__icon"
                   data-euiicon-type="empty"
                 />
@@ -525,7 +525,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -581,7 +581,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
               <span
                 class="euiContextMenu__itemLayout"
               >
-                <div
+                <span
                   class="euiContextMenu__icon"
                   data-euiicon-type="empty"
                 />
@@ -602,7 +602,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
               <span
                 class="euiContextMenu__itemLayout"
               >
-                <div
+                <span
                   class="euiContextMenu__icon"
                   data-euiicon-type="empty"
                 />
@@ -661,7 +661,7 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
@@ -711,7 +711,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
           <span
             class="euiFormControlLayoutCustomIcon"
           >
-            <div
+            <span
               aria-hidden="true"
               class="euiFormControlLayoutCustomIcon__icon"
               data-euiicon-type="arrowDown"
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
index 6217c1b5847..1d95624e85a 100644
--- a/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
@@ -32,7 +32,7 @@ Array [
         <span
           class="euiFormControlLayoutCustomIcon"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
@@ -74,7 +74,7 @@ Array [
         <span
           class="euiFormControlLayoutCustomIcon"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
@@ -116,7 +116,7 @@ Array [
         <span
           class="euiFormControlLayoutCustomIcon"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
@@ -158,7 +158,7 @@ Array [
         <span
           class="euiFormControlLayoutCustomIcon"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
@@ -200,7 +200,7 @@ Array [
         <span
           class="euiFormControlLayoutCustomIcon"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
@@ -242,7 +242,7 @@ Array [
         <span
           class="euiFormControlLayoutCustomIcon"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
@@ -287,7 +287,7 @@ Array [
         <span
           class="euiFormControlLayoutCustomIcon"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
@@ -331,7 +331,7 @@ Array [
         <span
           class="euiFormControlLayoutCustomIcon"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
diff --git a/src/components/form/switch/__snapshots__/switch.test.tsx.snap b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
index 467f89e4cad..5f25970c713 100644
--- a/src/components/form/switch/__snapshots__/switch.test.tsx.snap
+++ b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
@@ -21,11 +21,11 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
       <span
         class="euiSwitch__track"
       >
-        <div
+        <span
           class="euiSwitch__icon"
           data-euiicon-type="cross"
         />
-        <div
+        <span
           class="euiSwitch__icon euiSwitch__icon--checked"
           data-euiicon-type="check"
         />
@@ -64,11 +64,11 @@ exports[`EuiSwitch is rendered 1`] = `
       <span
         class="euiSwitch__track"
       >
-        <div
+        <span
           class="euiSwitch__icon"
           data-euiicon-type="cross"
         />
-        <div
+        <span
           class="euiSwitch__icon euiSwitch__icon--checked"
           data-euiicon-type="check"
         />
diff --git a/src/components/header/__snapshots__/header_logo.test.tsx.snap b/src/components/header/__snapshots__/header_logo.test.tsx.snap
index 1e7a1218bda..7e1c1a274f1 100644
--- a/src/components/header/__snapshots__/header_logo.test.tsx.snap
+++ b/src/components/header/__snapshots__/header_logo.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`EuiHeaderLogo is rendered 1`] = `
   data-test-subj="test subject string"
   rel="noreferrer"
 >
-  <div
+  <span
     aria-label="Elastic"
     class="euiHeaderLogo__icon"
     data-euiicon-type="logoElastic"
@@ -21,7 +21,7 @@ exports[`EuiHeaderLogo renders href 1`] = `
   href="#"
   rel="noreferrer"
 >
-  <div
+  <span
     aria-label="Elastic"
     class="euiHeaderLogo__icon"
     data-euiicon-type="logoElastic"
@@ -35,7 +35,7 @@ exports[`EuiHeaderLogo renders href with rel 1`] = `
   href="#"
   rel="noreferrer"
 >
-  <div
+  <span
     aria-label="Elastic"
     class="euiHeaderLogo__icon"
     data-euiicon-type="logoElastic"
@@ -49,7 +49,7 @@ exports[`EuiHeaderLogo renders optional props 1`] = `
   rel="noreferrer"
   style="color:red"
 >
-  <div
+  <span
     aria-label="Moby Dick"
     class="euiHeaderLogo__icon"
     data-euiicon-type="alert"
diff --git a/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap b/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap
index 462e604a24e..aa42a20fce1 100644
--- a/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap
+++ b/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`EuiHeaderLinks popover props is rendered 1`] = `
         class="euiHeaderSectionItem__button customButtonClass"
         type="button"
       >
-        <div
+        <span
           data-euiicon-type="bolt"
         />
       </button>
diff --git a/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap b/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap
index b4f4cc2aa97..a8f3b53c283 100644
--- a/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap
+++ b/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`EuiHeaderSectionItemButton renders notification as a dot 1`] = `
   class="euiHeaderSectionItem__button"
   type="button"
 >
-  <div
+  <span
     class="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot"
     color="accent"
     data-euiicon-type="dot"
diff --git a/src/components/health/__snapshots__/health.test.tsx.snap b/src/components/health/__snapshots__/health.test.tsx.snap
index b98b662987a..73887a83a4a 100644
--- a/src/components/health/__snapshots__/health.test.tsx.snap
+++ b/src/components/health/__snapshots__/health.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiHealth is rendered 1`] = `
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
-      <div
+      <span
         data-euiicon-type="dot"
       />
     </div>
diff --git a/src/components/icon/icon.testenv.tsx b/src/components/icon/icon.testenv.tsx
index 79238e13d4c..e6d28224e7b 100644
--- a/src/components/icon/icon.testenv.tsx
+++ b/src/components/icon/icon.testenv.tsx
@@ -20,7 +20,7 @@
 import React, { ComponentType } from 'react';
 
 export const EuiIcon = ({ type, ...rest }: any) => (
-  <div
+  <span
     data-euiicon-type={
       typeof type === 'string' ? type : type.displayName || type.name
     }
diff --git a/src/components/image/__snapshots__/image.test.tsx.snap b/src/components/image/__snapshots__/image.test.tsx.snap
index c3c34e6ec58..5b2746594ec 100644
--- a/src/components/image/__snapshots__/image.test.tsx.snap
+++ b/src/components/image/__snapshots__/image.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`EuiImage is rendered and allows full screen 1`] = `
       data-test-subj="test subject string"
       src="/cat.jpg"
     />
-    <div
+    <span
       class="euiImage__icon"
       color="ghost"
       data-euiicon-type="fullScreen"
diff --git a/src/components/link/__snapshots__/link.test.tsx.snap b/src/components/link/__snapshots__/link.test.tsx.snap
index 6a9c5d7cf8b..16d5594bdf3 100644
--- a/src/components/link/__snapshots__/link.test.tsx.snap
+++ b/src/components/link/__snapshots__/link.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`EuiLink it is an external link 1`] = `
   href="/baz/bing"
   rel="noreferrer"
 >
-  <div
+  <span
     aria-label="External link"
     class="euiLink__externalIcon"
     data-euiicon-type="popout"
diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
index fa17640dfcb..1efa993f0a1 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiListGroup listItems is rendered 1`] = `
     <span
       class="euiListGroupItem__text"
     >
-      <div
+      <span
         class="euiListGroupItem__icon"
         data-euiicon-type="stop"
       />
@@ -48,7 +48,7 @@ exports[`EuiListGroup listItems is rendered 1`] = `
       class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="bell"
@@ -115,7 +115,7 @@ exports[`EuiListGroup listItems is rendered with color 1`] = `
     <span
       class="euiListGroupItem__text"
     >
-      <div
+      <span
         class="euiListGroupItem__icon"
         data-euiicon-type="stop"
       />
@@ -145,7 +145,7 @@ exports[`EuiListGroup listItems is rendered with color 1`] = `
       class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="bell"
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
index 9c569eca67c..3c776e89d9b 100644
--- a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -121,7 +121,7 @@ exports[`EuiListGroupItem props extraAction is rendered 1`] = `
     class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
     type="button"
   >
-    <div
+    <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
       data-euiicon-type="empty"
@@ -212,7 +212,7 @@ exports[`EuiListGroupItem props iconType is rendered 1`] = `
   <span
     class="euiListGroupItem__text"
   >
-    <div
+    <span
       class="euiListGroupItem__icon"
       data-euiicon-type="empty"
     />
@@ -407,7 +407,7 @@ exports[`EuiListGroupItem throws a warning if both iconType and icon are provide
   <span
     class="euiListGroupItem__text"
   >
-    <div
+    <span
       class="euiListGroupItem__icon"
       data-euiicon-type="empty"
     />
diff --git a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
index 929b0a9eeb2..13d6ac746f1 100644
--- a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
+++ b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     <span
       class="euiListGroupItem__text"
     >
-      <div
+      <span
         class="euiListGroupItem__icon"
         data-euiicon-type="stop"
       />
@@ -29,7 +29,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       title="Pin Label with iconType to the top"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="pinFilled"
@@ -54,7 +54,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="bell"
@@ -82,7 +82,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       title="Pin Active link to the top"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="pinFilled"
@@ -109,7 +109,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       title="Unpin Button with onClick to the top"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="pinFilled"
@@ -137,7 +137,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
       title="Pin Link with href to the top"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="pinFilled"
@@ -175,7 +175,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     <span
       class="euiListGroupItem__text"
     >
-      <div
+      <span
         class="euiListGroupItem__icon"
         data-euiicon-type="stop"
       />
@@ -192,7 +192,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       title="Pin item"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="pinFilled"
@@ -217,7 +217,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="bell"
@@ -245,7 +245,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       title="Pin item"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="pinFilled"
@@ -272,7 +272,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       title="Unpin item"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="pinFilled"
@@ -300,7 +300,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
       title="Pin item"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiButtonIcon__icon"
         data-euiicon-type="pinFilled"
diff --git a/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap b/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap
index 46bd39e7d6e..86f82e37056 100644
--- a/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap
+++ b/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`EuiLoadingKibana is rendered 1`] = `
   <span
     class="euiLoadingKibana__icon"
   >
-    <div
+    <span
       data-euiicon-type="logoKibana"
     />
   </span>
@@ -23,7 +23,7 @@ exports[`EuiLoadingKibana size l is rendered 1`] = `
   <span
     class="euiLoadingKibana__icon"
   >
-    <div
+    <span
       data-euiicon-type="logoKibana"
     />
   </span>
@@ -37,7 +37,7 @@ exports[`EuiLoadingKibana size m is rendered 1`] = `
   <span
     class="euiLoadingKibana__icon"
   >
-    <div
+    <span
       data-euiicon-type="logoKibana"
     />
   </span>
@@ -51,7 +51,7 @@ exports[`EuiLoadingKibana size xl is rendered 1`] = `
   <span
     class="euiLoadingKibana__icon"
   >
-    <div
+    <span
       data-euiicon-type="logoKibana"
     />
   </span>
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index fa8ec22d1a4..628c25a8f8d 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="editorBold"
@@ -34,7 +34,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="editorItalic"
@@ -52,7 +52,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="editorUnorderedList"
@@ -67,7 +67,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="editorOrderedList"
@@ -82,7 +82,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="MarkdownCheckmark"
@@ -100,7 +100,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="quote"
@@ -115,7 +115,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="editorCodeBlock"
@@ -130,7 +130,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="editorLink"
@@ -148,7 +148,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="editorComment"
@@ -163,7 +163,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       <span
         class="euiButtonContent euiButtonEmpty__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="eye"
         />
@@ -199,7 +199,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
           class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
           type="button"
         >
-          <div
+          <span
             aria-hidden="true"
             class="euiButtonIcon__icon"
             data-euiicon-type="MarkdownLogo"
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 110dc3f5ba2..3df7aedd8c9 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -26,7 +26,7 @@ Array [
         class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
@@ -132,7 +132,7 @@ Array [
         class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index 81b29c3435b..d10325d6a86 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -26,7 +26,7 @@ Array [
         class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="cross"
diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.tsx.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.tsx.snap
index 5eac35416fc..13c15106bd0 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.tsx.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
                 data-test-subj="navDrawerExpandButton-isCollapsed"
                 type="button"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="menuRight"
                 />
@@ -57,7 +57,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
                 data-name="Recently viewed"
                 type="button"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="clock"
                 />
@@ -82,7 +82,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
                 data-name="Favorites"
                 type="button"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="starEmpty"
                 />
@@ -111,7 +111,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="canvasApp"
                 />
@@ -136,7 +136,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="discoverApp"
                 />
@@ -161,7 +161,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="visualizeApp"
                 />
@@ -186,7 +186,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="dashboardApp"
                 />
@@ -211,7 +211,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="machineLearningApp"
                 />
@@ -295,7 +295,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
                 data-test-subj="navDrawerExpandButton-isCollapsed"
                 type="button"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="menuRight"
                 />
@@ -324,7 +324,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="canvasApp"
                 />
@@ -349,7 +349,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="discoverApp"
                 />
@@ -374,7 +374,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="visualizeApp"
                 />
@@ -399,7 +399,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="dashboardApp"
                 />
@@ -424,7 +424,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="machineLearningApp"
                 />
@@ -508,7 +508,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
                 data-test-subj="navDrawerExpandButton-isCollapsed"
                 type="button"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="menuRight"
                 />
@@ -537,7 +537,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
                 data-name="Recently viewed"
                 type="button"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="clock"
                 />
@@ -562,7 +562,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
                 data-name="Favorites"
                 type="button"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="starEmpty"
                 />
@@ -591,7 +591,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="canvasApp"
                 />
@@ -616,7 +616,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="discoverApp"
                 />
@@ -641,7 +641,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="visualizeApp"
                 />
@@ -666,7 +666,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="dashboardApp"
                 />
@@ -691,7 +691,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
                 href="#"
                 rel="noreferrer"
               >
-                <div
+                <span
                   class="euiListGroupItem__icon"
                   data-euiicon-type="machineLearningApp"
                 />
diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
index f89a978ebe5..85c340bad16 100644
--- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap
+++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiPagination is rendered 1`] = `
     data-test-subj="pagination-button-previous"
     type="button"
   >
-    <div
+    <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
       data-euiicon-type="arrowLeft"
@@ -49,7 +49,7 @@ exports[`EuiPagination is rendered 1`] = `
     data-test-subj="pagination-button-next"
     type="button"
   >
-    <div
+    <span
       aria-hidden="true"
       class="euiButtonIcon__icon"
       data-euiicon-type="arrowRight"
diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
index d3f7b1d969b..959f8e4dedb 100644
--- a/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
+++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiSelectableListItem is rendered 1`] = `
   <span
     class="euiSelectableListItem__content"
   >
-    <div
+    <span
       class="euiSelectableListItem__icon"
       data-euiicon-type="empty"
     />
@@ -31,7 +31,7 @@ exports[`EuiSelectableListItem props append 1`] = `
   <span
     class="euiSelectableListItem__content"
   >
-    <div
+    <span
       class="euiSelectableListItem__icon"
       data-euiicon-type="empty"
     />
@@ -57,7 +57,7 @@ exports[`EuiSelectableListItem props checked is off 1`] = `
   <span
     class="euiSelectableListItem__content"
   >
-    <div
+    <span
       class="euiSelectableListItem__icon"
       color="text"
       data-euiicon-type="cross"
@@ -78,7 +78,7 @@ exports[`EuiSelectableListItem props checked is on 1`] = `
   <span
     class="euiSelectableListItem__content"
   >
-    <div
+    <span
       class="euiSelectableListItem__icon"
       color="text"
       data-euiicon-type="check"
@@ -100,7 +100,7 @@ exports[`EuiSelectableListItem props disabled 1`] = `
   <span
     class="euiSelectableListItem__content"
   >
-    <div
+    <span
       class="euiSelectableListItem__icon"
       data-euiicon-type="empty"
     />
@@ -120,7 +120,7 @@ exports[`EuiSelectableListItem props isFocused 1`] = `
   <span
     class="euiSelectableListItem__content"
   >
-    <div
+    <span
       class="euiSelectableListItem__icon"
       data-euiicon-type="empty"
     />
@@ -138,7 +138,7 @@ exports[`EuiSelectableListItem props isFocused 1`] = `
         <span
           class="euiBadge__content"
         >
-          <div
+          <span
             class="euiBadge__icon"
             data-euiicon-type="returnKey"
           />
@@ -158,7 +158,7 @@ exports[`EuiSelectableListItem props onFocusBadge can be custom 1`] = `
   <span
     class="euiSelectableListItem__content"
   >
-    <div
+    <span
       class="euiSelectableListItem__icon"
       data-euiicon-type="empty"
     />
@@ -178,7 +178,7 @@ exports[`EuiSelectableListItem props onFocusBadge can be true 1`] = `
   <span
     class="euiSelectableListItem__content"
   >
-    <div
+    <span
       class="euiSelectableListItem__icon"
       data-euiicon-type="empty"
     />
@@ -198,7 +198,7 @@ exports[`EuiSelectableListItem props prepend 1`] = `
   <span
     class="euiSelectableListItem__content"
   >
-    <div
+    <span
       class="euiSelectableListItem__icon"
       data-euiicon-type="empty"
     />
diff --git a/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap b/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
index feaf6298b59..1ed7e795479 100644
--- a/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
+++ b/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`EuiSelectableSearch is rendered 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="search"
@@ -63,7 +63,7 @@ exports[`EuiSelectableSearch props defaultValue 1`] = `
       <span
         class="euiFormControlLayoutCustomIcon"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="search"
@@ -78,7 +78,7 @@ exports[`EuiSelectableSearch props defaultValue 1`] = `
         class="euiFormControlLayoutClearButton"
         type="button"
       >
-        <div
+        <span
           class="euiFormControlLayoutClearButton__icon"
           data-euiicon-type="cross"
         />
diff --git a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
index 161fb7bc286..31f15226f58 100644
--- a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
+++ b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
             <span
               class="euiFormControlLayoutCustomIcon"
             >
-              <div
+              <span
                 aria-hidden="true"
                 class="euiFormControlLayoutCustomIcon__icon"
                 data-euiicon-type="search"
@@ -79,7 +79,7 @@ exports[`EuiSelectableTemplateSitewide props popoverButton is not rendered with
             <span
               class="euiFormControlLayoutCustomIcon"
             >
-              <div
+              <span
                 aria-hidden="true"
                 class="euiFormControlLayoutCustomIcon__icon"
                 data-euiicon-type="search"
@@ -161,7 +161,7 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
             <span
               class="euiFormControlLayoutCustomIcon"
             >
-              <div
+              <span
                 aria-hidden="true"
                 class="euiFormControlLayoutCustomIcon__icon"
                 data-euiicon-type="search"
@@ -207,7 +207,7 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
             <span
               class="euiFormControlLayoutCustomIcon"
             >
-              <div
+              <span
                 aria-hidden="true"
                 class="euiFormControlLayoutCustomIcon__icon"
                 data-euiicon-type="search"
@@ -253,7 +253,7 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = `
             <span
               class="euiFormControlLayoutCustomIcon"
             >
-              <div
+              <span
                 aria-hidden="true"
                 class="euiFormControlLayoutCustomIcon__icon"
                 data-euiicon-type="search"
diff --git a/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap b/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
index 831a2bb215e..032b1414c53 100644
--- a/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
+++ b/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`EuiSideNav is rendered 1`] = `
       <span
         class="euiSideNav__mobileTitle"
       />
-      <div
+      <span
         aria-hidden="true"
         class="euiSideNav__mobileIcon"
         data-euiicon-type="apps"
@@ -43,7 +43,7 @@ exports[`EuiSideNav props isOpenOnMobile defaults to false 1`] = `
       <span
         class="euiSideNav__mobileTitle"
       />
-      <div
+      <span
         aria-hidden="true"
         class="euiSideNav__mobileIcon"
         data-euiicon-type="apps"
@@ -70,7 +70,7 @@ exports[`EuiSideNav props isOpenOnMobile is rendered when specified as true 1`]
       <span
         class="euiSideNav__mobileTitle"
       />
-      <div
+      <span
         aria-hidden="true"
         class="euiSideNav__mobileIcon"
         data-euiicon-type="apps"
@@ -97,7 +97,7 @@ exports[`EuiSideNav props items is rendered 1`] = `
       <span
         class="euiSideNav__mobileTitle"
       />
-      <div
+      <span
         aria-hidden="true"
         class="euiSideNav__mobileIcon"
         data-euiicon-type="apps"
@@ -157,7 +157,7 @@ exports[`EuiSideNav props items is rendered 1`] = `
               >
                 C
               </span>
-              <div
+              <span
                 color="subdued"
                 data-euiicon-type="arrowDown"
               />
@@ -184,7 +184,7 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
       <span
         class="euiSideNav__mobileTitle"
       />
-      <div
+      <span
         aria-hidden="true"
         class="euiSideNav__mobileIcon"
         data-euiicon-type="apps"
@@ -309,7 +309,7 @@ exports[`EuiSideNav props items renders items using a specified callback 1`] = `
       <span
         class="euiSideNav__mobileTitle"
       />
-      <div
+      <span
         aria-hidden="true"
         class="euiSideNav__mobileIcon"
         data-euiicon-type="apps"
@@ -378,7 +378,7 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
       <span
         class="euiSideNav__mobileTitle"
       />
-      <div
+      <span
         aria-hidden="true"
         class="euiSideNav__mobileIcon"
         data-euiicon-type="apps"
@@ -440,7 +440,7 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
               >
                 C
               </span>
-              <div
+              <span
                 color="subdued"
                 data-euiicon-type="arrowDown"
               />
@@ -467,7 +467,7 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
       <span
         class="euiSideNav__mobileTitle"
       />
-      <div
+      <span
         aria-hidden="true"
         class="euiSideNav__mobileIcon"
         data-euiicon-type="apps"
diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap
index 8b37dfdc1b2..e4d3691745c 100644
--- a/src/components/steps/__snapshots__/step.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`EuiStep props status complete is rendered 1`] = `
       aria-label="Step 1"
       class="euiStepNumber euiStepNumber--complete euiStep__circle"
     >
-      <div
+      <span
         aria-label="complete"
         class="euiStepNumber__icon"
         data-euiicon-type="check"
@@ -104,7 +104,7 @@ exports[`EuiStep props status danger is rendered 1`] = `
       aria-label="Step 1"
       class="euiStepNumber euiStepNumber--danger euiStep__circle"
     >
-      <div
+      <span
         aria-label="has errors"
         class="euiStepNumber__icon"
         data-euiicon-type="cross"
@@ -193,7 +193,7 @@ exports[`EuiStep props status warning is rendered 1`] = `
       aria-label="Step 1"
       class="euiStepNumber euiStepNumber--warning euiStep__circle"
     >
-      <div
+      <span
         aria-label="has warnings"
         class="euiStepNumber__icon"
         data-euiicon-type="alert"
diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
index da66b8e0136..d97b08a18d7 100644
--- a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`EuiStepHorizontal props isComplete 1`] = `
   <div
     class="euiStepNumber euiStepNumber--complete euiStepHorizontal__number"
   >
-    <div
+    <span
       aria-label="complete"
       class="euiStepNumber__icon"
       data-euiicon-type="check"
@@ -98,7 +98,7 @@ exports[`EuiStepHorizontal props status complete is rendered 1`] = `
   <div
     class="euiStepNumber euiStepNumber--complete euiStepHorizontal__number"
   >
-    <div
+    <span
       aria-label="complete"
       class="euiStepNumber__icon"
       data-euiicon-type="check"
@@ -127,7 +127,7 @@ exports[`EuiStepHorizontal props status danger is rendered 1`] = `
   <div
     class="euiStepNumber euiStepNumber--danger euiStepHorizontal__number"
   >
-    <div
+    <span
       aria-label="has errors"
       class="euiStepNumber__icon"
       data-euiicon-type="cross"
@@ -206,7 +206,7 @@ exports[`EuiStepHorizontal props status warning is rendered 1`] = `
   <div
     class="euiStepNumber euiStepNumber--warning euiStepHorizontal__number"
   >
-    <div
+    <span
       aria-label="has warnings"
       class="euiStepNumber__icon"
       data-euiicon-type="alert"
diff --git a/src/components/steps/__snapshots__/step_number.test.tsx.snap b/src/components/steps/__snapshots__/step_number.test.tsx.snap
index 1e4f20d5e96..8ed8f738513 100644
--- a/src/components/steps/__snapshots__/step_number.test.tsx.snap
+++ b/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`EuiStepNumber props status complete is rendered 1`] = `
 <div
   class="euiStepNumber euiStepNumber--complete"
 >
-  <div
+  <span
     aria-label="complete"
     class="euiStepNumber__icon"
     data-euiicon-type="check"
@@ -38,7 +38,7 @@ exports[`EuiStepNumber props status danger is rendered 1`] = `
 <div
   class="euiStepNumber euiStepNumber--danger"
 >
-  <div
+  <span
     aria-label="has errors"
     class="euiStepNumber__icon"
     data-euiicon-type="cross"
@@ -66,7 +66,7 @@ exports[`EuiStepNumber props status warning is rendered 1`] = `
 <div
   class="euiStepNumber euiStepNumber--warning"
 >
-  <div
+  <span
     aria-label="has warnings"
     class="euiStepNumber__icon"
     data-euiicon-type="alert"
diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
index 86f32424d51..596f37dac60 100644
--- a/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
+++ b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`EuiStepsHorizontal is rendered 1`] = `
     <div
       class="euiStepNumber euiStepNumber--complete euiStepHorizontal__number"
     >
-      <div
+      <span
         aria-label="complete"
         class="euiStepNumber__icon"
         data-euiicon-type="check"
diff --git a/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap
index ffe31cb271b..d41a307ea1e 100644
--- a/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap
+++ b/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`EuiSuggestInput is rendered 1`] = `
         <span
           class="euiToolTipAnchor"
         >
-          <div
+          <span
             class="euiSuggestInput__statusIcon"
             color="accent"
             data-euiicon-type="dot"
diff --git a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
index 5614e5858c2..257e231306d 100644
--- a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
+++ b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`EuiSuggestItem is rendered 1`] = `
   <span
     class="euiSuggestItem__type euiSuggestItem__type--tint1"
   >
-    <div
+    <span
       data-euiicon-type="search"
     />
   </span>
@@ -31,7 +31,7 @@ exports[`props item with no description has expanded label is rendered 1`] = `
   <span
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
-    <div
+    <span
       data-euiicon-type="kqlValue"
     />
   </span>
@@ -53,7 +53,7 @@ exports[`props labelDisplay as expand is rendered 1`] = `
   <span
     class="euiSuggestItem__type euiSuggestItem__type--tint2"
   >
-    <div
+    <span
       data-euiicon-type="kqlValue"
     />
   </span>
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
index 88f3bc4bfb8..e225bccb53c 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`EuiTableSortMobile is rendered 1`] = `
         <span
           class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
         >
-          <div
+          <span
             class="euiButtonContent__icon"
             data-euiicon-type="arrowDown"
           />
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap
index e99791c209b..c04f0629a79 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile_item.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`EuiTableSortMobileItem is rendered 1`] = `
   <span
     class="euiContextMenu__itemLayout"
   >
-    <div
+    <span
       class="euiContextMenu__icon"
       data-euiicon-type="empty"
     />
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index be2a5cbd66e..a1242310499 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`EuiTablePagination is rendered 1`] = `
           <span
             class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
           >
-            <div
+            <span
               class="euiButtonContent__icon"
               data-euiicon-type="arrowDown"
             />
@@ -49,7 +49,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         data-test-subj="pagination-button-previous"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="arrowLeft"
@@ -168,7 +168,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         data-test-subj="pagination-button-next"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="arrowRight"
@@ -200,7 +200,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         data-test-subj="pagination-button-previous"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="arrowLeft"
@@ -319,7 +319,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         data-test-subj="pagination-button-next"
         type="button"
       >
-        <div
+        <span
           aria-hidden="true"
           class="euiButtonIcon__icon"
           data-euiicon-type="arrowRight"
diff --git a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap
index f10f37c2ec1..c64329ca29d 100644
--- a/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap
+++ b/src/components/toast/__snapshots__/global_toast_list.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`EuiGlobalToastList props side can be changed to left 1`] = `
       class="euiToastHeader euiToastHeader--withBody"
       data-test-subj="euiToastHeader"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiToastHeader__icon"
         data-euiicon-type="check"
@@ -48,7 +48,7 @@ exports[`EuiGlobalToastList props side can be changed to left 1`] = `
       data-test-subj="toastCloseButton"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         data-euiicon-type="cross"
       />
@@ -74,7 +74,7 @@ exports[`EuiGlobalToastList props side can be changed to left 1`] = `
       class="euiToastHeader euiToastHeader--withBody"
       data-test-subj="euiToastHeader"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiToastHeader__icon"
         data-euiicon-type="alert"
@@ -91,7 +91,7 @@ exports[`EuiGlobalToastList props side can be changed to left 1`] = `
       data-test-subj="toastCloseButton"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         data-euiicon-type="cross"
       />
@@ -126,7 +126,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
       class="euiToastHeader euiToastHeader--withBody"
       data-test-subj="euiToastHeader"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiToastHeader__icon"
         data-euiicon-type="check"
@@ -143,7 +143,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
       data-test-subj="toastCloseButton"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         data-euiicon-type="cross"
       />
@@ -169,7 +169,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
       class="euiToastHeader euiToastHeader--withBody"
       data-test-subj="euiToastHeader"
     >
-      <div
+      <span
         aria-hidden="true"
         class="euiToastHeader__icon"
         data-euiicon-type="alert"
@@ -186,7 +186,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
       data-test-subj="toastCloseButton"
       type="button"
     >
-      <div
+      <span
         aria-hidden="true"
         data-euiicon-type="cross"
       />
diff --git a/src/components/toast/__snapshots__/toast.test.tsx.snap b/src/components/toast/__snapshots__/toast.test.tsx.snap
index 62ab0d83a88..83129ea01b4 100644
--- a/src/components/toast/__snapshots__/toast.test.tsx.snap
+++ b/src/components/toast/__snapshots__/toast.test.tsx.snap
@@ -195,7 +195,7 @@ exports[`EuiToast Props iconType is rendered 1`] = `
           size="m"
           type="user"
         >
-          <div
+          <span
             aria-hidden="true"
             className="euiToastHeader__icon"
             data-euiicon-type="user"
diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap
index 1004a14d3d0..3f220f267f6 100644
--- a/src/components/token/__snapshots__/token.test.tsx.snap
+++ b/src/components/token/__snapshots__/token.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`EuiToken is rendered 1`] = `
   class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     aria-label="aria-label"
     data-euiicon-type="dot"
   />
@@ -17,7 +17,7 @@ exports[`EuiToken props color can be a custom hex 1`] = `
   class="euiToken euiToken--circle euiToken--dark euiToken--small"
   style="background-color:#FF0000;color:#000000"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -27,7 +27,7 @@ exports[`EuiToken props color euiColorVis0 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis0 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -37,7 +37,7 @@ exports[`EuiToken props color euiColorVis1 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis1 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -47,7 +47,7 @@ exports[`EuiToken props color euiColorVis2 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis2 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -57,7 +57,7 @@ exports[`EuiToken props color euiColorVis3 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis3 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -67,7 +67,7 @@ exports[`EuiToken props color euiColorVis4 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis4 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -77,7 +77,7 @@ exports[`EuiToken props color euiColorVis5 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis5 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -87,7 +87,7 @@ exports[`EuiToken props color euiColorVis6 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis6 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -97,7 +97,7 @@ exports[`EuiToken props color euiColorVis7 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis7 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -107,7 +107,7 @@ exports[`EuiToken props color euiColorVis8 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis8 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -117,7 +117,7 @@ exports[`EuiToken props color euiColorVis9 is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis9 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -127,7 +127,7 @@ exports[`EuiToken props color gray is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -137,7 +137,7 @@ exports[`EuiToken props fill dark is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--circle euiToken--dark euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -147,7 +147,7 @@ exports[`EuiToken props fill light is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -157,7 +157,7 @@ exports[`EuiToken props fill none is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--circle euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -167,7 +167,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenAlias is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis3 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenAlias"
   />
 </span>
@@ -177,7 +177,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenAnnotation is rendered
 <span
   class="euiToken euiToken--euiColorVis5 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenAnnotation"
   />
 </span>
@@ -187,7 +187,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenArray is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenArray"
   />
 </span>
@@ -197,7 +197,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenBinary is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis4 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenBinary"
   />
 </span>
@@ -207,7 +207,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenBoolean is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenBoolean"
   />
 </span>
@@ -217,7 +217,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenClass is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis1 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenClass"
   />
 </span>
@@ -227,7 +227,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenCompletionSuggester is
 <span
   class="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenCompletionSuggester"
   />
 </span>
@@ -237,7 +237,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenConstant is rendered 1`
 <span
   class="euiToken euiToken--euiColorVis0 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenConstant"
   />
 </span>
@@ -247,7 +247,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenDate is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenDate"
   />
 </span>
@@ -257,7 +257,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenDenseVector is rendered
 <span
   class="euiToken euiToken--euiColorVis2 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenDenseVector"
   />
 </span>
@@ -267,7 +267,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenElement is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis3 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenElement"
   />
 </span>
@@ -277,7 +277,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenEnum is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis3 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenEnum"
   />
 </span>
@@ -287,7 +287,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenEnumMember is rendered
 <span
   class="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenEnumMember"
   />
 </span>
@@ -297,7 +297,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenEvent is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis4 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenEvent"
   />
 </span>
@@ -307,7 +307,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenException is rendered 1
 <span
   class="euiToken euiToken--euiColorVis0 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenException"
   />
 </span>
@@ -317,7 +317,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenField is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis0 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenField"
   />
 </span>
@@ -327,7 +327,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenFile is rendered 1`] =
 <span
   class="euiToken euiToken--gray euiToken--rectangle euiToken--dark euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenFile"
   />
 </span>
@@ -337,7 +337,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenFlattened is rendered 1
 <span
   class="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenFlattened"
   />
 </span>
@@ -347,7 +347,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenFunction is rendered 1`
 <span
   class="euiToken euiToken--euiColorVis2 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenFunction"
   />
 </span>
@@ -357,7 +357,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenGeo is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis5 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenGeo"
   />
 </span>
@@ -367,7 +367,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenHistogram is rendered 1
 <span
   class="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenHistogram"
   />
 </span>
@@ -377,7 +377,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenIP is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenIP"
   />
 </span>
@@ -387,7 +387,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenInterface is rendered 1
 <span
   class="euiToken euiToken--euiColorVis9 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenInterface"
   />
 </span>
@@ -397,7 +397,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenJoin is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis5 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenJoin"
   />
 </span>
@@ -407,7 +407,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenKey is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis5 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenKey"
   />
 </span>
@@ -417,7 +417,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenKeyword is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenKeyword"
   />
 </span>
@@ -427,7 +427,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenMethod is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis2 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenMethod"
   />
 </span>
@@ -437,7 +437,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenModule is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis4 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenModule"
   />
 </span>
@@ -447,7 +447,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenNamespace is rendered 1
 <span
   class="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenNamespace"
   />
 </span>
@@ -457,7 +457,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenNested is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis2 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenNested"
   />
 </span>
@@ -467,7 +467,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenNull is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis2 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenNull"
   />
 </span>
@@ -477,7 +477,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenNumber is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenNumber"
   />
 </span>
@@ -487,7 +487,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenObject is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis3 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenObject"
   />
 </span>
@@ -497,7 +497,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenOperator is rendered 1`
 <span
   class="euiToken euiToken--euiColorVis4 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenOperator"
   />
 </span>
@@ -507,7 +507,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenPackage is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenPackage"
   />
 </span>
@@ -517,7 +517,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenParameter is rendered 1
 <span
   class="euiToken euiToken--euiColorVis4 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenParameter"
   />
 </span>
@@ -527,7 +527,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenPercolator is rendered
 <span
   class="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenPercolator"
   />
 </span>
@@ -537,7 +537,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenProperty is rendered 1`
 <span
   class="euiToken euiToken--euiColorVis2 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenProperty"
   />
 </span>
@@ -547,7 +547,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenRange is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis4 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenRange"
   />
 </span>
@@ -557,7 +557,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenRankFeature is rendered
 <span
   class="euiToken euiToken--euiColorVis8 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenRankFeature"
   />
 </span>
@@ -567,7 +567,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenRankFeatures is rendere
 <span
   class="euiToken euiToken--euiColorVis3 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenRankFeatures"
   />
 </span>
@@ -577,7 +577,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenRepo is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis1 euiToken--rectangle euiToken--dark euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenRepo"
   />
 </span>
@@ -587,7 +587,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenSearchType is rendered
 <span
   class="euiToken euiToken--euiColorVis5 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenSearchType"
   />
 </span>
@@ -597,7 +597,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenShape is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis8 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenShape"
   />
 </span>
@@ -607,7 +607,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenString is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenString"
   />
 </span>
@@ -617,7 +617,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenStruct is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenStruct"
   />
 </span>
@@ -627,7 +627,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenSymbol is rendered 1`]
 <span
   class="euiToken euiToken--euiColorVis0 euiToken--rectangle euiToken--dark euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenSymbol"
   />
 </span>
@@ -637,7 +637,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenText is rendered 1`] =
 <span
   class="euiToken euiToken--euiColorVis3 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenText"
   />
 </span>
@@ -647,7 +647,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenTokenCount is rendered
 <span
   class="euiToken euiToken--euiColorVis4 euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenTokenCount"
   />
 </span>
@@ -657,7 +657,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenVariable is rendered 1`
 <span
   class="euiToken euiToken--euiColorVis7 euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="tokenVariable"
   />
 </span>
@@ -667,7 +667,7 @@ exports[`EuiToken props shape circle is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -677,7 +677,7 @@ exports[`EuiToken props shape rectangle is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--rectangle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -687,7 +687,7 @@ exports[`EuiToken props shape square is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--square euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -697,7 +697,7 @@ exports[`EuiToken props size l is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--large"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -707,7 +707,7 @@ exports[`EuiToken props size m is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--medium"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -717,7 +717,7 @@ exports[`EuiToken props size s is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
@@ -727,7 +727,7 @@ exports[`EuiToken props size xs is rendered 1`] = `
 <span
   class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--xsmall"
 >
-  <div
+  <span
     data-euiicon-type="dot"
   />
 </span>
diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap
index e4fee190cc2..231a953b0a5 100644
--- a/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap
+++ b/src/components/tool_tip/__snapshots__/icon_tip.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`EuiIconTip is rendered 1`] = `
 <span
   class="euiToolTipAnchor"
 >
-  <div
+  <span
     aria-label="aria-label"
     data-euiicon-type="questionInCircle"
     tabindex="0"
@@ -16,7 +16,7 @@ exports[`EuiIconTip props color is rendered as the icon color 1`] = `
 <span
   class="euiToolTipAnchor"
 >
-  <div
+  <span
     aria-label="Info"
     color="warning"
     data-euiicon-type="questionInCircle"
@@ -29,7 +29,7 @@ exports[`EuiIconTip props size is rendered as the icon size 1`] = `
 <span
   class="euiToolTipAnchor"
 >
-  <div
+  <span
     aria-label="Info"
     data-euiicon-type="questionInCircle"
     tabindex="0"
@@ -41,7 +41,7 @@ exports[`EuiIconTip props type is rendered as the icon 1`] = `
 <span
   class="euiToolTipAnchor"
 >
-  <div
+  <span
     aria-label="Info"
     data-euiicon-type="alert"
     tabindex="0"
diff --git a/src/components/tour/__snapshots__/tour_step_indicator.test.tsx.snap b/src/components/tour/__snapshots__/tour_step_indicator.test.tsx.snap
index c32147cafe0..4e457642e43 100644
--- a/src/components/tour/__snapshots__/tour_step_indicator.test.tsx.snap
+++ b/src/components/tour/__snapshots__/tour_step_indicator.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`EuiTourStepIndicator can be complete 1`] = `
   class="euiTourStepIndicator euiTourStepIndicator--complete testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     aria-label="complete"
     class="euiStepNumber__icon"
     color="subdued"
@@ -21,7 +21,7 @@ exports[`EuiTourStepIndicator can be incomplete 1`] = `
   class="euiTourStepIndicator euiTourStepIndicator--incomplete testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     aria-label="incomplete"
     class="euiStepNumber__icon"
     color="subdued"
@@ -36,7 +36,7 @@ exports[`EuiTourStepIndicator is rendered 1`] = `
   class="euiTourStepIndicator euiTourStepIndicator--active testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     aria-current="step"
     aria-label="active"
     class="euiStepNumber__icon"
diff --git a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap
index af2750215fd..690ed768a0f 100644
--- a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap
+++ b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`EuiTreeView is rendered 1`] = `
         <span
           class="euiTreeView__iconWrapper"
         >
-          <div
+          <span
             data-euiicon-type="folderOpen"
           />
         </span>
@@ -64,7 +64,7 @@ exports[`EuiTreeView is rendered 1`] = `
                 <span
                   class="euiTreeView__iconWrapper"
                 >
-                  <div
+                  <span
                     data-euiicon-type="document"
                   />
                 </span>
@@ -91,7 +91,7 @@ exports[`EuiTreeView is rendered 1`] = `
                 <span
                   class="euiTreeView__iconWrapper"
                 >
-                  <div
+                  <span
                     data-euiicon-type="arrowRight"
                   />
                 </span>
@@ -118,7 +118,7 @@ exports[`EuiTreeView is rendered 1`] = `
                 <span
                   class="euiTreeView__iconWrapper"
                 >
-                  <div
+                  <span
                     data-euiicon-type="arrowRight"
                   />
                 </span>