diff --git a/.buildkite/scripts/steps/storybooks/build_and_upload.ts b/.buildkite/scripts/steps/storybooks/build_and_upload.ts
index 4e3ff3c75c576..c91eb6a9b8375 100644
--- a/.buildkite/scripts/steps/storybooks/build_and_upload.ts
+++ b/.buildkite/scripts/steps/storybooks/build_and_upload.ts
@@ -17,6 +17,7 @@ const STORYBOOKS = [
   'ci_composite',
   'cloud',
   'coloring',
+  'chart_icons',
   'controls',
   'custom_integrations',
   'dashboard_enhanced',
diff --git a/NOTICE.txt b/NOTICE.txt
index b150cf5673b42..cb1205f317655 100644
--- a/NOTICE.txt
+++ b/NOTICE.txt
@@ -253,6 +253,32 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 Portions of this code are licensed under the following license:
 For license information please see https://edge.fullstory.com/s/fs.js.LICENSE.txt
 
+---
+This code includes a copy of the `normalize-path`
+https://github.com/jonschlinkert/normalize-path/blob/52c3a95ebebc2d98c1ad7606cbafa7e658656899/index.js
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2018, Jon Schlinkert.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
 ---
 This product bundles bootstrap@3.3.6 which is available under a
 "MIT" license.
diff --git a/package.json b/package.json
index 40eb9ce8aa793..73f979aedc2d0 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
     "@kbn/analytics-shippers-fullstory": "link:bazel-bin/packages/analytics/shippers/fullstory",
     "@kbn/apm-config-loader": "link:bazel-bin/packages/kbn-apm-config-loader",
     "@kbn/apm-utils": "link:bazel-bin/packages/kbn-apm-utils",
+    "@kbn/chart-icons": "link:bazel-bin/packages/kbn-chart-icons",
     "@kbn/coloring": "link:bazel-bin/packages/kbn-coloring",
     "@kbn/config": "link:bazel-bin/packages/kbn-config",
     "@kbn/config-mocks": "link:bazel-bin/packages/kbn-config-mocks",
@@ -779,6 +780,7 @@
     "@types/kbn__axe-config": "link:bazel-bin/packages/kbn-axe-config/npm_module_types",
     "@types/kbn__bazel-packages": "link:bazel-bin/packages/kbn-bazel-packages/npm_module_types",
     "@types/kbn__bazel-runner": "link:bazel-bin/packages/kbn-bazel-runner/npm_module_types",
+    "@types/kbn__chart-icons": "link:bazel-bin/packages/kbn-chart-icons/npm_module_types",
     "@types/kbn__ci-stats-core": "link:bazel-bin/packages/kbn-ci-stats-core/npm_module_types",
     "@types/kbn__ci-stats-performance-metrics": "link:bazel-bin/packages/kbn-ci-stats-performance-metrics/npm_module_types",
     "@types/kbn__ci-stats-reporter": "link:bazel-bin/packages/kbn-ci-stats-reporter/npm_module_types",
diff --git a/packages/BUILD.bazel b/packages/BUILD.bazel
index c0957f7ee2bb8..48977f7ef4fc8 100644
--- a/packages/BUILD.bazel
+++ b/packages/BUILD.bazel
@@ -133,6 +133,7 @@ filegroup(
     "//packages/kbn-babel-preset:build",
     "//packages/kbn-bazel-packages:build",
     "//packages/kbn-bazel-runner:build",
+    "//packages/kbn-chart-icons:build",
     "//packages/kbn-ci-stats-core:build",
     "//packages/kbn-ci-stats-performance-metrics:build",
     "//packages/kbn-ci-stats-reporter:build",
@@ -393,6 +394,7 @@ filegroup(
     "//packages/kbn-axe-config:build_types",
     "//packages/kbn-bazel-packages:build_types",
     "//packages/kbn-bazel-runner:build_types",
+    "//packages/kbn-chart-icons:build_types",
     "//packages/kbn-ci-stats-core:build_types",
     "//packages/kbn-ci-stats-performance-metrics:build_types",
     "//packages/kbn-ci-stats-reporter:build_types",
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/icons/index.ts b/packages/kbn-chart-icons/.storybook/main.js
similarity index 65%
rename from src/plugins/chart_expressions/expression_partition_vis/public/icons/index.ts
rename to packages/kbn-chart-icons/.storybook/main.js
index e61bd6557d581..8dc3c5d1518f4 100644
--- a/src/plugins/chart_expressions/expression_partition_vis/public/icons/index.ts
+++ b/packages/kbn-chart-icons/.storybook/main.js
@@ -6,8 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { PieIcon } from './pie';
-export { DonutIcon } from './donut';
-export { TreemapIcon } from './treemap';
-export { MosaicIcon } from './mosaic';
-export { WaffleIcon } from './waffle';
+module.exports = require('@kbn/storybook').defaultConfig;
diff --git a/packages/kbn-chart-icons/BUILD.bazel b/packages/kbn-chart-icons/BUILD.bazel
new file mode 100644
index 0000000000000..b3afcf893fd2e
--- /dev/null
+++ b/packages/kbn-chart-icons/BUILD.bazel
@@ -0,0 +1,138 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "kbn-chart-icons"
+PKG_REQUIRE_NAME = "@kbn/chart-icons"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  exclude = [
+    "**/*.test.*",
+    "**/*.stories.*"
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+# In this array place runtime dependencies, including other packages and NPM packages
+# which must be available for this code to run.
+#
+#  To reference other packages use:
+#    "//repo/relative/path/to/package"
+#    eg. "//packages/kbn-utils"
+#
+#  To reference a NPM package use:
+#    "@npm//name-of-package"
+#    eg. "@npm//lodash"
+RUNTIME_DEPS = [
+  "//packages/kbn-ui-theme",
+  "@npm//react",
+  "@npm//@elastic/eui",
+  "@npm//@emotion/css",
+]
+
+# In this array place dependencies necessary to build the types, which will include the
+# :npm_module_types target of other packages and packages from NPM, including @types/*
+# packages.
+#
+#  To reference the types for another package use:
+#    "//repo/relative/path/to/package:npm_module_types"
+#    eg. "//packages/kbn-utils:npm_module_types"
+#
+#  References to NPM packages work the same as RUNTIME_DEPS
+TYPES_DEPS = [
+  "//packages/kbn-ui-theme:npm_module_types",
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/react",
+  "@npm//@elastic/eui",
+  "@npm//@emotion/css",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  root_input_dir = "src",
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  root_input_dir = "src",
+  web = True,
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ],
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  root_dir = "src",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)
diff --git a/packages/kbn-chart-icons/README.md b/packages/kbn-chart-icons/README.md
new file mode 100644
index 0000000000000..9e6f13e428e5a
--- /dev/null
+++ b/packages/kbn-chart-icons/README.md
@@ -0,0 +1,5 @@
+# @kbn/chart-icons
+
+This package contains svg shared assets used in charts
+
+It can be removes when the [EuiIllustrations](https://github.com/elastic/eui/discussions/5546) initiative is shipped.
diff --git a/packages/kbn-chart-icons/jest.config.js b/packages/kbn-chart-icons/jest.config.js
new file mode 100644
index 0000000000000..771b3dd8ff9b8
--- /dev/null
+++ b/packages/kbn-chart-icons/jest.config.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test/jest_node',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-chart-icons'],
+};
diff --git a/packages/kbn-chart-icons/package.json b/packages/kbn-chart-icons/package.json
new file mode 100644
index 0000000000000..c1f5912c1269e
--- /dev/null
+++ b/packages/kbn-chart-icons/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@kbn/chart-icons",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./target_node/index.js",
+  "browser": "./target_web/index.js",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}
diff --git a/packages/kbn-chart-icons/src/__stories__/icons.stories.tsx b/packages/kbn-chart-icons/src/__stories__/icons.stories.tsx
new file mode 100644
index 0000000000000..a9910001eb923
--- /dev/null
+++ b/packages/kbn-chart-icons/src/__stories__/icons.stories.tsx
@@ -0,0 +1,221 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FC, ComponentType } from 'react';
+import { EuiFlexItem, EuiFlexGroup, EuiEmptyPrompt, EuiForm, IconType } from '@elastic/eui';
+import { ComponentStory } from '@storybook/react';
+
+import {
+  IconCircle,
+  IconTriangle,
+  EuiIconAxisBottom,
+  EuiIconAxisLeft,
+  EuiIconAxisRight,
+  EuiIconAxisTop,
+  IconChartArea,
+  IconChartAreaPercentage,
+  IconChartAreaStacked,
+  IconChartBar,
+  IconChartBarAnnotations,
+  IconChartBarHorizontal,
+  IconChartBarHorizontalPercentage,
+  IconChartBarHorizontalStacked,
+  IconChartBarPercentage,
+  IconChartBarReferenceLine,
+  IconChartBarStacked,
+  IconChartDatatable,
+  IconChartDonut,
+  IconChartLine,
+  IconChartMetric,
+  IconChartMixedXy,
+  IconChartMosaic,
+  IconChartPie,
+  IconChartTreemap,
+  IconChartWaffle,
+  DropIllustration,
+  GlobeIllustration,
+  EuiIconLegend,
+  IconRegionMap,
+  IconChartHeatmap,
+  IconChartHorizontalBullet,
+  IconChartVerticalBullet,
+} from '..';
+
+export default {
+  title: 'Chart Icons',
+  decorators: [(story: Function) => <EuiForm>{story()}</EuiForm>],
+};
+
+const IconsArray: Array<{
+  title: string;
+  Component: ComponentType<{ title: string; titleId: string }>;
+}> = [
+  {
+    title: 'EuiIconAxisBottom',
+    Component: EuiIconAxisBottom,
+  },
+  {
+    title: 'EuiIconAxisLeft',
+    Component: EuiIconAxisLeft,
+  },
+  {
+    title: 'EuiIconAxisRight',
+    Component: EuiIconAxisRight,
+  },
+  {
+    title: 'EuiIconAxisTop',
+    Component: EuiIconAxisTop,
+  },
+  {
+    title: 'IconChartArea',
+    Component: IconChartArea,
+  },
+  {
+    title: 'IconChartAreaPercentage',
+    Component: IconChartAreaPercentage,
+  },
+  {
+    title: 'IconChartAreaStacked',
+    Component: IconChartAreaStacked,
+  },
+  {
+    title: 'IconChartBar',
+    Component: IconChartBar,
+  },
+  {
+    title: 'IconChartBarAnnotations',
+    Component: IconChartBarAnnotations,
+  },
+  {
+    title: 'IconChartBarHorizontal',
+    Component: IconChartBarHorizontal,
+  },
+  {
+    title: 'IconChartBarHorizontalPercentage',
+    Component: IconChartBarHorizontalPercentage,
+  },
+  {
+    title: 'IconChartBarHorizontalStacked',
+    Component: IconChartBarHorizontalStacked,
+  },
+  {
+    title: 'IconChartBarPercentage',
+    Component: IconChartBarPercentage,
+  },
+  {
+    title: 'IconChartBarReferenceLine',
+    Component: IconChartBarReferenceLine,
+  },
+  {
+    title: 'IconChartBarStacked',
+    Component: IconChartBarStacked,
+  },
+  {
+    title: 'IconChartDatatable',
+    Component: IconChartDatatable,
+  },
+  {
+    title: 'IconChartDonut',
+    Component: IconChartDonut,
+  },
+  {
+    title: 'IconChartLine',
+    Component: IconChartLine,
+  },
+  {
+    title: 'IconChartMetric',
+    Component: IconChartMetric,
+  },
+  {
+    title: 'IconChartMixedXy',
+    Component: IconChartMixedXy,
+  },
+  {
+    title: 'IconChartMosaic',
+    Component: IconChartMosaic,
+  },
+  {
+    title: 'IconChartPie',
+    Component: IconChartPie,
+  },
+  {
+    title: 'IconChartTreemap',
+    Component: IconChartTreemap,
+  },
+  {
+    title: 'IconChartWaffle',
+    Component: IconChartWaffle,
+  },
+  {
+    title: 'DropIllustration',
+    Component: DropIllustration,
+  },
+  {
+    title: 'GlobeIllustration',
+    Component: GlobeIllustration,
+  },
+  {
+    title: 'EuiIconLegend',
+    Component: EuiIconLegend,
+  },
+  {
+    title: 'IconCircle',
+    Component: IconCircle,
+  },
+  {
+    title: 'IconTriangle',
+    Component: IconTriangle,
+  },
+  {
+    title: 'IconRegionMap',
+    Component: IconRegionMap,
+  },
+  {
+    title: 'IconChartHeatmap',
+    Component: IconChartHeatmap,
+  },
+  {
+    title: 'IconChartHorizontalBullet',
+    Component: IconChartHorizontalBullet,
+  },
+  {
+    title: 'IconChartVerticalBullet',
+    Component: IconChartVerticalBullet,
+  },
+];
+
+interface RootComponentProps {
+  icons: typeof IconsArray;
+}
+
+function RootComponent(props: RootComponentProps) {
+  return (
+    <EuiFlexGroup direction={'row'} responsive={false} wrap={true}>
+      {props.icons.map((i) => (
+        <EuiFlexItem>
+          <EuiEmptyPrompt
+            style={{ minWidth: '250px' }}
+            hasBorder={true}
+            hasShadow={true}
+            iconType={i.Component as IconType}
+            title={<>{i.title}</>}
+            titleSize={'s'}
+          />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+}
+
+const Template: ComponentStory<FC<RootComponentProps>> = (args) => <RootComponent {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  icons: IconsArray,
+};
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/circle.tsx b/packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx
similarity index 80%
rename from src/plugins/chart_expressions/expression_xy/public/icons/circle.tsx
rename to packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx
index 39bbe5cde74de..d3cb3789138f1 100644
--- a/src/plugins/chart_expressions/expression_xy/public/icons/circle.tsx
+++ b/packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx
@@ -8,9 +8,10 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
-import classnames from 'classnames';
+import { cx } from '@emotion/css';
+import { noFill } from '../common_styles';
 
-export const CircleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     width={16}
     height={16}
@@ -25,7 +26,7 @@ export const CircleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'typ
       stroke="currentColor"
       cx="8"
       cy="8"
-      className={classnames('lensAnnotationIconNoFill', props.className)}
+      className={cx(noFill, props.className)}
       r="7"
     />
   </svg>
diff --git a/x-pack/plugins/lens/public/assets/annotation_icons/index.tsx b/packages/kbn-chart-icons/src/assets/annotation_icons/index.tsx
similarity index 56%
rename from x-pack/plugins/lens/public/assets/annotation_icons/index.tsx
rename to packages/kbn-chart-icons/src/assets/annotation_icons/index.tsx
index 9e641d495582f..a776717cfe3c5 100644
--- a/x-pack/plugins/lens/public/assets/annotation_icons/index.tsx
+++ b/packages/kbn-chart-icons/src/assets/annotation_icons/index.tsx
@@ -1,8 +1,9 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 export { IconCircle } from './circle';
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/triangle.tsx b/packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx
similarity index 83%
rename from src/plugins/chart_expressions/expression_xy/public/icons/triangle.tsx
rename to packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx
index 8ffb8c490d9a4..227dc84335821 100644
--- a/src/plugins/chart_expressions/expression_xy/public/icons/triangle.tsx
+++ b/packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx
@@ -8,9 +8,10 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
-import classnames from 'classnames';
+import { cx } from '@emotion/css';
+import { noFill } from '../common_styles';
 
-export const TriangleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     width="16"
     height="16"
@@ -25,7 +26,7 @@ export const TriangleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 't
       strokeWidth="1"
       stroke="currentColor"
       d="M 6.9 11.612 C 7.64533 12.7953 8.39067 12.7953 9.136 11.612 L 13.11 5.3 C 13.8553 4.11667 13.4827 3.525 11.992 3.525 L 4.044 3.525 C 2.55333 3.525 2.18067 4.11667 2.926 5.3 Z"
-      className={classnames('lensAnnotationIconNoFill', props.className)}
+      className={cx(noFill, props.className)}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/axis_bottom.tsx b/packages/kbn-chart-icons/src/assets/axis_bottom.tsx
similarity index 82%
rename from x-pack/plugins/lens/public/assets/axis_bottom.tsx
rename to packages/kbn-chart-icons/src/assets/axis_bottom.tsx
index 309d41bf24221..c2ad925a962de 100644
--- a/x-pack/plugins/lens/public/assets/axis_bottom.tsx
+++ b/packages/kbn-chart-icons/src/assets/axis_bottom.tsx
@@ -1,11 +1,12 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import * as React from 'react';
+import React from 'react';
 
 export const EuiIconAxisBottom = ({
   title,
diff --git a/x-pack/plugins/lens/public/assets/axis_left.tsx b/packages/kbn-chart-icons/src/assets/axis_left.tsx
similarity index 84%
rename from x-pack/plugins/lens/public/assets/axis_left.tsx
rename to packages/kbn-chart-icons/src/assets/axis_left.tsx
index 9a39a2f43a74d..e4d4361ecfe75 100644
--- a/x-pack/plugins/lens/public/assets/axis_left.tsx
+++ b/packages/kbn-chart-icons/src/assets/axis_left.tsx
@@ -1,11 +1,12 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import * as React from 'react';
+import React from 'react';
 
 export const EuiIconAxisLeft = ({
   title,
diff --git a/x-pack/plugins/lens/public/assets/axis_right.tsx b/packages/kbn-chart-icons/src/assets/axis_right.tsx
similarity index 84%
rename from x-pack/plugins/lens/public/assets/axis_right.tsx
rename to packages/kbn-chart-icons/src/assets/axis_right.tsx
index 4db6fc06d82fa..8316fbe713388 100644
--- a/x-pack/plugins/lens/public/assets/axis_right.tsx
+++ b/packages/kbn-chart-icons/src/assets/axis_right.tsx
@@ -1,11 +1,12 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import * as React from 'react';
+import React from 'react';
 
 export const EuiIconAxisRight = ({
   title,
diff --git a/x-pack/plugins/lens/public/assets/axis_top.tsx b/packages/kbn-chart-icons/src/assets/axis_top.tsx
similarity index 92%
rename from x-pack/plugins/lens/public/assets/axis_top.tsx
rename to packages/kbn-chart-icons/src/assets/axis_top.tsx
index 2c3dc0744c068..d78dfcc113aad 100644
--- a/x-pack/plugins/lens/public/assets/axis_top.tsx
+++ b/packages/kbn-chart-icons/src/assets/axis_top.tsx
@@ -1,11 +1,12 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import * as React from 'react';
+import React from 'react';
 
 export const EuiIconAxisTop = ({
   title,
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/area.tsx b/packages/kbn-chart-icons/src/assets/chart_area.tsx
similarity index 83%
rename from src/plugins/chart_expressions/expression_xy/public/icons/area.tsx
rename to packages/kbn-chart-icons/src/assets/chart_area.tsx
index 010ffaf1fb7ec..a09a9cab956ad 100644
--- a/src/plugins/chart_expressions/expression_xy/public/icons/area.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_area.tsx
@@ -8,8 +8,9 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const AreaIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartArea = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -22,11 +23,11 @@ export const AreaIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M30 6v15a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-6.994 5.865-6.997C20.5 11 23 11 24 11s3-5 6-5z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
     <path
       d="M6 1c3 0 5 6 6 6s3.5-3 6-3c1.667 0 2.944 2.333 3.833 6.999l.309.001c-1.013 0-2.27 0-3.593.002h-.684C15.231 11.007 13 18 12 18s-3.5-3-6-3-5 4-6 4V7c1-1.5 3-6 6-6z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_area_percentage.tsx b/packages/kbn-chart-icons/src/assets/chart_area_percentage.tsx
similarity index 82%
rename from x-pack/plugins/lens/public/assets/chart_area_percentage.tsx
rename to packages/kbn-chart-icons/src/assets/chart_area_percentage.tsx
index 910d5dc817289..07917b1bcabc2 100644
--- a/x-pack/plugins/lens/public/assets/chart_area_percentage.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_area_percentage.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartAreaPercentage = ({
+export const IconChartAreaPercentage = ({
   title,
   titleId,
   ...props
@@ -25,11 +27,11 @@ export const LensIconChartAreaPercentage = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M0 13v8a1 1 0 001 1h28a1 1 0 001-1V9.25c-1.251-.929-2.45-1.734-3.493-2.313a11.028 11.028 0 00-1.478-.703C24.592 6.072 24.25 6 24 6c-.262 0-.63.212-1.126.77-.472.53-.952 1.249-1.458 2.007l-.013.02c-.49.736-1.006 1.51-1.53 2.098C19.37 11.462 18.739 12 18 12c-1.062 0-2.112-.263-3.092-.508l-.03-.007C13.869 11.232 12.929 11 12 11c-.337 0-.729.171-1.2.525-.466.35-.94.822-1.446 1.329l-.015.015c-.49.489-1.01 1.01-1.539 1.406-.529.396-1.137.725-1.8.725-.657 0-1.57-.212-2.48-.424l-.058-.014C2.275 14.287 1.032 14 0 14v-1z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
     <path
       d="M29 0a1 1 0 011 1v6.012c-1.06-.764-2.085-1.437-3.007-1.95a11.93 11.93 0 00-1.616-.765C24.887 4.115 24.418 4 24 4c-.738 0-1.369.538-1.874 1.105-.523.589-1.039 1.362-1.529 2.098l-.013.02c-.506.758-.985 1.476-1.458 2.007-.495.558-.864.77-1.126.77-.928 0-1.867-.232-2.879-.485l-.029-.007C14.112 9.263 13.062 9 12 9c-.663 0-1.271.328-1.8.725-.528.396-1.05.917-1.538 1.406l-.015.015c-.507.507-.98.98-1.447 1.329-.471.354-.863.525-1.2.525-.528 0-1.328-.183-2.311-.412l-.034-.007C2.507 12.314 1.159 12 .001 12V1a1 1 0 011-1h28z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_area_stacked.tsx b/packages/kbn-chart-icons/src/assets/chart_area_stacked.tsx
similarity index 79%
rename from x-pack/plugins/lens/public/assets/chart_area_stacked.tsx
rename to packages/kbn-chart-icons/src/assets/chart_area_stacked.tsx
index 16e1ff849b609..3bfe3cd92b85b 100644
--- a/x-pack/plugins/lens/public/assets/chart_area_stacked.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_area_stacked.tsx
@@ -1,18 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartAreaStacked = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
+export const IconChartAreaStacked = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={31}
@@ -25,11 +23,11 @@ export const LensIconChartAreaStacked = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M0 15.213l.484.091.813.146.762.129C3.779 15.859 5.09 16 6 16c.986 0 1.712-.25 3.166-.966l.281-.14C10.802 14.217 11.381 14 12 14c.507 0 .988.146 1.89.571l1.209.592c1.28.617 1.977.837 2.901.837 1.028 0 1.75-.349 3.119-1.344l.89-.659C23.034 13.252 23.535 13 24 13c.581 0 1.232.185 2.598.718l1.1.436.568.217c.72.27 1.256.438 1.736.532L30 21a1 1 0 01-1 1H1a1 1 0 01-1-1v-5.787z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
     <path
       d="M24 1c1.334 0 3.334 1 6 3v8.842l-.324-.098c-.346-.11-.759-.262-1.273-.462l-1.101-.436-.568-.217-.536-.193C25.277 11.118 24.676 11 24 11c-1.028 0-1.75.349-3.119 1.344l-.89.659c-1.024.745-1.524.997-1.99.997-.508 0-.989-.146-1.89-.571l-1.21-.592c-1.28-.617-1.977-.837-2.9-.837-.987 0-1.713.25-3.167.966l-.281.14C7.198 13.783 6.619 14 6 14l-.334-.007c-1.182-.045-3.08-.317-5.665-.815V9c2 0 4.666 1 6 1 2 0 4-4 6-4s4 1 6 1 4-6 6-6z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
   </svg>
 );
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/bar.tsx b/packages/kbn-chart-icons/src/assets/chart_bar.tsx
similarity index 83%
rename from src/plugins/chart_expressions/expression_xy/public/icons/bar.tsx
rename to packages/kbn-chart-icons/src/assets/chart_bar.tsx
index f134d7871bfde..f33b83fca5362 100644
--- a/src/plugins/chart_expressions/expression_xy/public/icons/bar.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_bar.tsx
@@ -8,8 +8,9 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const BarIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartBar = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -22,11 +23,11 @@ export const BarIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M5 7a1 1 0 011 1v13a1 1 0 01-1 1H1a1 1 0 01-1-1V8a1 1 0 011-1h4zm16-7a1 1 0 011 1v20a1 1 0 01-1 1h-4a1 1 0 01-1-1V1a1 1 0 011-1h4z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M13 11a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4zm16-7a1 1 0 011 1v16a1 1 0 01-1 1h-4a1 1 0 01-1-1V5a1 1 0 011-1h4z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_bar_annotations.tsx b/packages/kbn-chart-icons/src/assets/chart_bar_annotations.tsx
similarity index 73%
rename from x-pack/plugins/lens/public/assets/chart_bar_annotations.tsx
rename to packages/kbn-chart-icons/src/assets/chart_bar_annotations.tsx
index 63fc9023533f6..9472cbc0cd762 100644
--- a/x-pack/plugins/lens/public/assets/chart_bar_annotations.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_bar_annotations.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartBarAnnotations = ({
+export const IconChartBarAnnotations = ({
   title,
   titleId,
   ...props
@@ -25,11 +27,11 @@ export const LensIconChartBarAnnotations = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <g>
       <path
-        className="lensChartIcon__subdued"
+        className={colors.subdued}
         d="M16 8a1 1 0 011-1h4a1 1 0 011 1v13a1 1 0 01-1 1h-4a1 1 0 01-1-1V8zM1 9a1 1 0 00-1 1v11a1 1 0 001 1h4a1 1 0 001-1V10a1 1 0 00-1-1H1zM9 16a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1H9zM25 11a1 1 0 00-1 1v9a1 1 0 001 1h4a1 1 0 001-1v-9a1 1 0 00-1-1h-4z"
       />
       <path
-        className="lensChartIcon__accent"
+        className={colors.accent}
         d="M10 1a1 1 0 011-1h3a1 1 0 011 1h3v4h-3a1 1 0 01-1-1h-2v9a1 1 0 11-2 0V1z"
       />
     </g>
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal.tsx b/packages/kbn-chart-icons/src/assets/chart_bar_horizontal.tsx
similarity index 80%
rename from src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal.tsx
rename to packages/kbn-chart-icons/src/assets/chart_bar_horizontal.tsx
index a2fb843cb095d..dc113a8ab4ad9 100644
--- a/src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_bar_horizontal.tsx
@@ -8,8 +8,13 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const BarHorizontalIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartBarHorizontal = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -22,11 +27,11 @@ export const BarHorizontalIcon = ({ title, titleId, ...props }: Omit<EuiIconProp
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4a1 1 0 011-1h28zM22 0a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h21z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M0 9a1 1 0 011-1h15a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal_percentage.tsx b/packages/kbn-chart-icons/src/assets/chart_bar_horizontal_percentage.tsx
similarity index 87%
rename from src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal_percentage.tsx
rename to packages/kbn-chart-icons/src/assets/chart_bar_horizontal_percentage.tsx
index 6b2bb61a246e1..91e8f2639bfa5 100644
--- a/src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal_percentage.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_bar_horizontal_percentage.tsx
@@ -8,8 +8,9 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const BarHorizontalPercentageIcon = ({
+export const IconChartBarHorizontalPercentage = ({
   title,
   titleId,
   ...props
@@ -26,11 +27,11 @@ export const BarHorizontalPercentageIcon = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M20 16v6H1a1 1 0 01-1-1v-4a1 1 0 011-1h19zm-3-8v6H1.222C.547 14 0 13.552 0 13V9c0-.552.547-1 1.222-1H17zm1-8v6H1.042C.466 6 0 5.552 0 5V1c0-.552.466-1 1.042-1H18z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1h-7v-6h7zm-.222-8C29.453 8 30 8.448 30 9v4c0 .552-.547 1-1.222 1H19V8h9.778zm.18-8C29.534 0 30 .448 30 1v4c0 .552-.466 1-1.042 1H20V0h8.958z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal_stacked.tsx b/packages/kbn-chart-icons/src/assets/chart_bar_horizontal_stacked.tsx
similarity index 87%
rename from src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal_stacked.tsx
rename to packages/kbn-chart-icons/src/assets/chart_bar_horizontal_stacked.tsx
index b399c47d3fc7d..6e5e61e386467 100644
--- a/src/plugins/chart_expressions/expression_xy/public/icons/bar_horizontal_stacked.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_bar_horizontal_stacked.tsx
@@ -8,8 +8,9 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const BarHorizontalStackedIcon = ({
+export const IconChartBarHorizontalStacked = ({
   title,
   titleId,
   ...props
@@ -26,11 +27,11 @@ export const BarHorizontalStackedIcon = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M18 16v6H1a1 1 0 01-1-1v-4a1 1 0 011-1h17zm-3-8v6H1.222C.547 14 0 13.552 0 13V9c0-.552.547-1 1.222-1H15zm1-8v6H1.042C.466 6 0 5.552 0 5V1c0-.552.466-1 1.042-1H16z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1h-9v-6h9zm-9.222-8C20.453 8 21 8.448 21 9v4c0 .552-.547 1-1.222 1H17V8h2.778zm3.18-8C23.534 0 24 .448 24 1v4c0 .552-.466 1-1.042 1H18V0h4.958z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/bar_percentage.tsx b/packages/kbn-chart-icons/src/assets/chart_bar_percentage.tsx
similarity index 82%
rename from src/plugins/chart_expressions/expression_xy/public/icons/bar_percentage.tsx
rename to packages/kbn-chart-icons/src/assets/chart_bar_percentage.tsx
index 64514cea6c012..82a59ebc9be32 100644
--- a/src/plugins/chart_expressions/expression_xy/public/icons/bar_percentage.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_bar_percentage.tsx
@@ -8,8 +8,13 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const BarPercentageIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartBarPercentage = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -22,11 +27,11 @@ export const BarPercentageIcon = ({ title, titleId, ...props }: Omit<EuiIconProp
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M6 13v8a1 1 0 01-1 1H1a1 1 0 01-1-1v-8h6zm8-4v12a1 1 0 01-1 1H9a1 1 0 01-1-1V9h6zm8 4v8a1 1 0 01-1 1h-4a1 1 0 01-1-1v-8h6zm8 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7h6z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M29 0a1 1 0 011 1v11h-6V1a1 1 0 011-1h4zM5 0a1 1 0 011 1v10H0V1a1 1 0 011-1h4zm16 0a1 1 0 011 1v10h-6V1a1 1 0 011-1h4zm-8 0a1 1 0 011 1v6H8V1a1 1 0 011-1h4z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_bar_reference_line.tsx b/packages/kbn-chart-icons/src/assets/chart_bar_reference_line.tsx
similarity index 79%
rename from x-pack/plugins/lens/public/assets/chart_bar_reference_line.tsx
rename to packages/kbn-chart-icons/src/assets/chart_bar_reference_line.tsx
index 447641540a284..d8cca5a3f1192 100644
--- a/x-pack/plugins/lens/public/assets/chart_bar_reference_line.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_bar_reference_line.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartBarReferenceLine = ({
+export const IconChartBarReferenceLine = ({
   title,
   titleId,
   ...props
@@ -25,16 +27,10 @@ export const LensIconChartBarReferenceLine = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <g>
       <path
-        className="lensChartIcon__subdued"
+        className={colors.subdued}
         d="M3.2 4.79997C3.2 4.50542 2.96122 4.26663 2.66667 4.26663H0.533333C0.238784 4.26663 0 4.50542 0 4.79997V6.39997H3.2V4.79997ZM3.2 9.59997H0V13.3333C0 13.6279 0.238784 13.8666 0.533333 13.8666H2.66667C2.96122 13.8666 3.2 13.6279 3.2 13.3333V9.59997ZM8.53333 9.59997H11.7333V13.3333C11.7333 13.6279 11.4946 13.8666 11.2 13.8666H9.06667C8.77211 13.8666 8.53333 13.6279 8.53333 13.3333V9.59997ZM11.7333 6.39997H8.53333V2.66663C8.53333 2.37208 8.77211 2.1333 9.06667 2.1333H11.2C11.4946 2.1333 11.7333 2.37208 11.7333 2.66663V6.39997ZM12.8 9.59997V13.3333C12.8 13.6279 13.0388 13.8666 13.3333 13.8666H15.4667C15.7612 13.8666 16 13.6279 16 13.3333V9.59997H12.8ZM16 6.39997V5.86663C16 5.57208 15.7612 5.3333 15.4667 5.3333H13.3333C13.0388 5.3333 12.8 5.57208 12.8 5.86663V6.39997H16ZM7.46667 11.2C7.46667 10.9054 7.22789 10.6666 6.93333 10.6666H4.8C4.50544 10.6666 4.26667 10.9054 4.26667 11.2V13.3333C4.26667 13.6279 4.50544 13.8666 4.8 13.8666H6.93333C7.22789 13.8666 7.46667 13.6279 7.46667 13.3333V11.2Z"
       />
-      <rect
-        y="7.4668"
-        width="16"
-        height="1.06667"
-        rx="0.533334"
-        className="lensChartIcon__accent"
-      />
+      <rect y="7.4668" width="16" height="1.06667" rx="0.533334" className={colors.accent} />
     </g>
   </svg>
 );
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/bar_stacked.tsx b/packages/kbn-chart-icons/src/assets/chart_bar_stacked.tsx
similarity index 83%
rename from src/plugins/chart_expressions/expression_xy/public/icons/bar_stacked.tsx
rename to packages/kbn-chart-icons/src/assets/chart_bar_stacked.tsx
index 833f3d0e816e6..933be6d5dea7a 100644
--- a/src/plugins/chart_expressions/expression_xy/public/icons/bar_stacked.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_bar_stacked.tsx
@@ -8,8 +8,9 @@
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const BarStackedIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartBarStacked = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -21,12 +22,12 @@ export const BarStackedIcon = ({ title, titleId, ...props }: Omit<EuiIconProps,
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
       d="M6 13v8a1 1 0 01-1 1H1a1 1 0 01-1-1v-8h6zm8-4v12a1 1 0 01-1 1H9a1 1 0 01-1-1V9h6zm8 4v8a1 1 0 01-1 1h-4a1 1 0 01-1-1v-8h6zm8 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7h6z"
     />
     <path
       d="M29 1a1 1 0 011 1v10h-6V2a1 1 0 011-1h4zM5 7a1 1 0 011 1v3H0V8a1 1 0 011-1h4zm16-4a1 1 0 011 1v7h-6V4a1 1 0 011-1h4zm-8-3a1 1 0 011 1v6H8V1a1 1 0 011-1h4z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_datatable.tsx b/packages/kbn-chart-icons/src/assets/chart_datatable.tsx
similarity index 75%
rename from x-pack/plugins/lens/public/assets/chart_datatable.tsx
rename to packages/kbn-chart-icons/src/assets/chart_datatable.tsx
index d6a5cb733e1e1..144d6ddb906f5 100644
--- a/x-pack/plugins/lens/public/assets/chart_datatable.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_datatable.tsx
@@ -1,18 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartDatatable = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
+export const IconChartDatatable = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -25,11 +23,11 @@ export const LensIconChartDatatable = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M11 18a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1v-2a1 1 0 011-1h10zm0-6a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1v-2a1 1 0 011-1h10zm0-6a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1V7a1 1 0 011-1h10zm18-6a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h28z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M20 18a1 1 0 011 1v2a1 1 0 01-.883.993L20 22h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm9 0a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm-9-6a1 1 0 011 1v2a1 1 0 01-.883.993L20 16h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm9 0a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm-9-6a1 1 0 011 1v2a1 1 0 01-.883.993L20 10h-5a1 1 0 01-1-1V7a1 1 0 011-1h5zm9 0a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1V7a1 1 0 011-1h5z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_donut.tsx b/packages/kbn-chart-icons/src/assets/chart_donut.tsx
similarity index 71%
rename from x-pack/plugins/lens/public/assets/chart_donut.tsx
rename to packages/kbn-chart-icons/src/assets/chart_donut.tsx
index f2ce65a1f2e19..bd9e3f59e72a1 100644
--- a/x-pack/plugins/lens/public/assets/chart_donut.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_donut.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartDonut = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartDonut = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -21,11 +23,11 @@ export const LensIconChartDonut = ({ title, titleId, ...props }: Omit<EuiIconPro
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M19.21 21.119a11 11 0 006.595-8.1c.11-.577-.355-1.082-.942-1.082H20.75c-.477 0-.878.342-1.046.788a5.028 5.028 0 11-6.474-6.474c.447-.168.788-.569.788-1.046V1.094c0-.588-.505-1.053-1.082-.943a11 11 0 106.272 20.968h.002z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M22.778 3.176A11 11 0 0017.084.154C16.507.042 16 .507 16 1.095v4.116c0 .475.34.875.784 1.044l.14.055A5.026 5.026 0 0119.7 9.17c.168.445.568.784 1.044.784h4.115c.588 0 1.053-.506.942-1.084a11 11 0 00-3.023-5.694z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_icon.tsx b/packages/kbn-chart-icons/src/assets/chart_heatmap.tsx
similarity index 85%
rename from src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_icon.tsx
rename to packages/kbn-chart-icons/src/assets/chart_heatmap.tsx
index 7a49d53222946..0609c7263f202 100644
--- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_icon.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_heatmap.tsx
@@ -8,11 +8,9 @@
 
 import { EuiIconProps } from '@elastic/eui';
 import React from 'react';
-import { useCommonChartStyles } from '@kbn/charts-plugin/public';
-
-export const HeatmapIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
-  const { chartIcon } = useCommonChartStyles();
+import { colors } from './common_styles';
 
+export const IconChartHeatmap = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
   return (
     <svg
       width={30}
@@ -25,11 +23,11 @@ export const HeatmapIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'ty
     >
       {title ? <title id={titleId}>{title}</title> : null}
       <path
-        css={chartIcon.subdued}
+        className={colors.subdued}
         d="M16 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V1zM0 17a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4zm17-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V9a1 1 0 00-1-1h-4zm-1 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4zm9-17a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1h-4z"
       />
       <path
-        css={chartIcon.accent}
+        className={colors.accent}
         d="M0 1a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1zm0 8a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9zm9-9a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V1a1 1 0 00-1-1H9zM8 9a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H9a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1H9zm15-7a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V9zm1 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4z"
       />
     </svg>
diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/icons/horizontal_bullet_icon.tsx b/packages/kbn-chart-icons/src/assets/chart_horizontal_bullet.tsx
similarity index 80%
rename from src/plugins/chart_expressions/expression_gauge/public/components/icons/horizontal_bullet_icon.tsx
rename to packages/kbn-chart-icons/src/assets/chart_horizontal_bullet.tsx
index 5074f00801109..0765444e857a6 100644
--- a/src/plugins/chart_expressions/expression_gauge/public/components/icons/horizontal_bullet_icon.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_horizontal_bullet.tsx
@@ -8,11 +8,13 @@
 
 import React from 'react';
 import type { EuiIconProps } from '@elastic/eui';
-import { useCommonChartStyles } from '@kbn/charts-plugin/public';
-
-export const HorizontalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
-  const { chartIcon } = useCommonChartStyles();
+import { colors } from './common_styles';
 
+export const IconChartHorizontalBullet = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => {
   return (
     <svg
       width="30"
@@ -25,11 +27,11 @@ export const HorizontalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconP
     >
       {title ? <title id={titleId}>{title}</title> : null}
       <path
-        css={chartIcon.subdued}
+        className={colors.subdued}
         d="M1 13a1 1 0 00-1 1v2a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-2a1 1 0 00-1-1H1z"
       />
       <path
-        css={chartIcon.accent}
+        className={colors.accent}
         d="M0 6a1 1 0 011-1h24a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V6z"
       />
     </svg>
diff --git a/x-pack/plugins/lens/public/assets/chart_line.tsx b/packages/kbn-chart-icons/src/assets/chart_line.tsx
similarity index 83%
rename from x-pack/plugins/lens/public/assets/chart_line.tsx
rename to packages/kbn-chart-icons/src/assets/chart_line.tsx
index 82df68d8fd43c..afaf31b708621 100644
--- a/x-pack/plugins/lens/public/assets/chart_line.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_line.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartLine = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartLine = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -21,11 +23,11 @@ export const LensIconChartLine = ({ title, titleId, ...props }: Omit<EuiIconProp
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M23.434 16.456c.211.553.406.982.58 1.277l.073.119c.038.058.072.105.101.141.52-.04 1.07-.248 2.13-.77l.235-.117C28.198 16.283 28.953 16 30 16v2c-.507 0-.988.146-1.89.571l-1.209.592C25.621 19.78 24.924 20 24 20l-.174-.005c-1.251-.076-1.805-1.036-2.994-4.993L22.93 15c.18.563.335 1.012.505 1.455zM6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.377 0 1.925.863 3.168 4.999L19.07 9a26.766 26.766 0 00-.505-1.457c-.24-.631-.46-1.1-.652-1.395l-.051-.074-.045-.06c-.452.064-.988.375-2.007 1.13l-.691.512-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M0 21c1.123 0 1.852-.477 3.295-1.885l.758-.75.345-.33C5.208 17.275 5.648 17 6 17c.466 0 .967.252 1.99.997l.891.659.458.325C10.424 19.728 11.093 20 12 20c1.325 0 1.996-.772 3.546-3.444l.593-1.028.385-.646C17.328 13.562 17.796 13 18 13h6c1.333 0 1.978-.795 3.452-3.676l.692-1.37.358-.69C29.333 5.7 29.831 5 30 5V3c-1.333 0-1.978.795-3.452 3.676l-.692 1.37-.358.69C24.667 10.3 24.169 11 24 11h-6c-1.325 0-1.996.772-3.546 3.444l-.593 1.028-.385.646C12.672 17.438 12.204 18 12 18c-.466 0-.967-.252-1.99-.997l-.891-.659-.458-.325C7.576 15.272 6.907 15 6 15c-1.123 0-1.852.477-3.295 1.885l-.758.75-.345.33C.792 18.725.352 19 0 19v2z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_metric.tsx b/packages/kbn-chart-icons/src/assets/chart_metric.tsx
similarity index 75%
rename from x-pack/plugins/lens/public/assets/chart_metric.tsx
rename to packages/kbn-chart-icons/src/assets/chart_metric.tsx
index d15be760eec60..4feb162a4607c 100644
--- a/x-pack/plugins/lens/public/assets/chart_metric.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_metric.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartMetric = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartMetric = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -21,11 +23,11 @@ export const LensIconChartMetric = ({ title, titleId, ...props }: Omit<EuiIconPr
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M25 0a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V1a1 1 0 011-1h20zm-9.878 3c-1.887 0-3.265 1.107-3.26 2.61-.005 1.054.67 1.938 1.672 2.157v.067l-.155.03a2.453 2.453 0 00-1.879 2.394C11.495 11.84 12.997 13 15.122 13c2.105 0 3.612-1.16 3.617-2.742-.005-1.217-.903-2.234-2.035-2.424v-.067l.162-.042c.896-.275 1.507-1.12 1.511-2.116C18.373 4.112 16.994 3 15.122 3zm0 5.542c1.036 0 1.796.665 1.806 1.592-.01.898-.718 1.507-1.806 1.507-1.103 0-1.816-.609-1.806-1.507-.01-.932.755-1.592 1.806-1.592zm0-4.164c.908 0 1.53.561 1.54 1.398-.01.85-.651 1.43-1.54 1.43-.903 0-1.55-.584-1.54-1.43-.01-.837.618-1.398 1.54-1.398z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
     <path
       d="M1 18h28a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1v-2a1 1 0 011-1z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_mixed_xy.tsx b/packages/kbn-chart-icons/src/assets/chart_mixed_xy.tsx
similarity index 84%
rename from x-pack/plugins/lens/public/assets/chart_mixed_xy.tsx
rename to packages/kbn-chart-icons/src/assets/chart_mixed_xy.tsx
index bb213217a9fa9..af86b96852dc9 100644
--- a/x-pack/plugins/lens/public/assets/chart_mixed_xy.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_mixed_xy.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartMixedXy = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartMixedXy = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -21,15 +23,15 @@ export const LensIconChartMixedXy = ({ title, titleId, ...props }: Omit<EuiIconP
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M24 16l.186-.002.345-.02.266-.03.334-.058.193-.043.25-.067.223-.07.215-.074.209-.079.305-.124c.166-.07.34-.148.524-.234l.285-.135 1.202-.588c.428-.203.728-.326.966-.396.146-.044.27-.067.384-.076L30 14v7a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-7.994 5.865-7.997L19.032 10l.541 1.205.272.595.29.612c.517 1.069.955 1.842 1.391 2.391.08.1.16.194.241.28.095.101.189.191.283.272l.143.114c.218.164.446.284.69.368.207.071.426.116.662.14l.14.012.154.008L24 16zm6-12v6l-.186.002-.345.02-.266.03-.331.057-.196.044-.25.067-.304.097-.134.047a9.492 9.492 0 00-.386.15l-.128.053c-.166.07-.34.148-.524.234l-.285.135-1.264.618-.352.159-.187.078-.256.095-.178.054a13.872 13.872 0 01-.38-.687l-.16-.311-.233-.47-.016-.472H24c1 0 3-6 6-6z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
     <path
       d="M30 13c-.507 0-.988.146-1.89.571l-1.209.592C25.621 14.78 24.924 15 24 15c-1.384 0-2.003-.865-3.516-4.206l-.637-1.42-.346-.749-.213-.445C18.572 6.698 18.127 6 18 6c-.466 0-.967.252-1.99.997l-.891.659-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.384 0 2.003.865 3.516 4.206l.637 1.42.346.749.213.445C23.428 12.302 23.873 13 24 13c.507 0 .988-.146 1.89-.571l1.209-.592C28.379 11.22 29.076 11 30 11v2z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M6 13v7.889C6 21.503 5.552 22 5 22H1c-.552 0-1-.497-1-1.111V13a1 1 0 011-1h4a1 1 0 011 1zm8-1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4a1 1 0 011 1zm8 5v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4a1 1 0 011-1h4a1 1 0 011 1zm8 2v2a1 1 0 01-1 1h-4a1 1 0 01-1-1v-2a1 1 0 011-1h4a1 1 0 011 1z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_mosaic.tsx b/packages/kbn-chart-icons/src/assets/chart_mosaic.tsx
similarity index 73%
rename from x-pack/plugins/lens/public/assets/chart_mosaic.tsx
rename to packages/kbn-chart-icons/src/assets/chart_mosaic.tsx
index c385f0df1a008..23fe548074d5a 100644
--- a/x-pack/plugins/lens/public/assets/chart_mosaic.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_mosaic.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import type { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartMosaic = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartMosaic = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -20,11 +22,11 @@ export const LensIconChartMosaic = ({ title, titleId, ...props }: Omit<EuiIconPr
   >
     {title ? <title id={titleId} /> : null}
     <path
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
       d="M2 0a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1H2zM2 14a1 1 0 00-1 1v6a1 1 0 001 1h6a1 1 0 001-1v-6a1 1 0 00-1-1H2zM11 13a1 1 0 011-1h6a1 1 0 011 1v8a1 1 0 01-1 1h-6a1 1 0 01-1-1v-8zM12 0a1 1 0 100 2h6a1 1 0 100-2h-6zM21 15a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1h-6a1 1 0 01-1-1v-6zM22 0a1 1 0 00-1 1v4a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1h-6z"
     />
     <path
-      className="lensChartIcon__accent"
+      className={colors.accent}
       d="M11 5a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1V5zM1 7a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1V7zM22 8a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V9a1 1 0 00-1-1h-6z"
     />
   </svg>
diff --git a/x-pack/plugins/lens/public/assets/chart_pie.tsx b/packages/kbn-chart-icons/src/assets/chart_pie.tsx
similarity index 68%
rename from x-pack/plugins/lens/public/assets/chart_pie.tsx
rename to packages/kbn-chart-icons/src/assets/chart_pie.tsx
index 56a18b9d61624..16d59e73603ca 100644
--- a/x-pack/plugins/lens/public/assets/chart_pie.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_pie.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartPie = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartPie = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -21,11 +23,11 @@ export const LensIconChartPie = ({ title, titleId, ...props }: Omit<EuiIconProps
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M17.827 21.189a10.001 10.001 0 005.952-7.148c.124-.578-.343-1.091-.935-1.091H14a1 1 0 01-1-1V3.106c0-.592-.513-1.059-1.092-.935a10 10 0 105.919 19.018z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M22.462 3.538A12.29 12.29 0 0016.094.16C15.512.048 15 .514 15 1.106V10a1 1 0 001 1h8.895c.591 0 1.057-.512.945-1.094a12.288 12.288 0 00-3.378-6.368z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/chart_treemap.tsx b/packages/kbn-chart-icons/src/assets/chart_treemap.tsx
similarity index 64%
rename from x-pack/plugins/lens/public/assets/chart_treemap.tsx
rename to packages/kbn-chart-icons/src/assets/chart_treemap.tsx
index c56fdedfebdf7..587682994102a 100644
--- a/x-pack/plugins/lens/public/assets/chart_treemap.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_treemap.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartTreemap = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartTreemap = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -21,15 +23,15 @@ export const LensIconChartTreemap = ({ title, titleId, ...props }: Omit<EuiIconP
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M0 1a1 1 0 011-1h13a1 1 0 011 1v20a1 1 0 01-1 1H1a1 1 0 01-1-1V1z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
     <path
       d="M17 1a1 1 0 011-1h11a1 1 0 011 1v12a1 1 0 01-1 1H18a1 1 0 01-1-1V1z"
-      className="lensChartIcon__accent"
+      className={colors.accent}
     />
     <path
       d="M29 16H18a1 1 0 00-1 1v4a1 1 0 001 1h11a1 1 0 001-1v-4a1 1 0 00-1-1z"
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
     />
   </svg>
 );
diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/icons/vertical_bullet_icon.tsx b/packages/kbn-chart-icons/src/assets/chart_vertical_bullet.tsx
similarity index 77%
rename from src/plugins/chart_expressions/expression_gauge/public/components/icons/vertical_bullet_icon.tsx
rename to packages/kbn-chart-icons/src/assets/chart_vertical_bullet.tsx
index 49a1e2a817cf7..5cf427af7d238 100644
--- a/src/plugins/chart_expressions/expression_gauge/public/components/icons/vertical_bullet_icon.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_vertical_bullet.tsx
@@ -8,11 +8,13 @@
 
 import React from 'react';
 import type { EuiIconProps } from '@elastic/eui';
-import { useCommonChartStyles } from '@kbn/charts-plugin/public';
-
-export const VerticalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
-  const { chartIcon } = useCommonChartStyles();
+import { colors } from './common_styles';
 
+export const IconChartVerticalBullet = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => {
   return (
     <svg
       width="30"
@@ -25,11 +27,11 @@ export const VerticalBulletIcon = ({ title, titleId, ...props }: Omit<EuiIconPro
     >
       {title ? <title id={titleId}>{title}</title> : null}
       <path
-        css={chartIcon.subdued}
+        className={colors.subdued}
         d="M16 22a1 1 0 01-1-1V4a1 1 0 011-1h4a1 1 0 011 1v17a1 1 0 01-1 1h-4z"
       />
       <path
-        css={chartIcon.accent}
+        className={colors.accent}
         d="M10 0h2a1 1 0 011 1v20a1 1 0 01-1 1h-2a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1V7h-1a1 1 0 010-2h1V2h-1a1 1 0 010-2z"
       />
     </svg>
diff --git a/x-pack/plugins/lens/public/assets/chart_waffle.tsx b/packages/kbn-chart-icons/src/assets/chart_waffle.tsx
similarity index 80%
rename from x-pack/plugins/lens/public/assets/chart_waffle.tsx
rename to packages/kbn-chart-icons/src/assets/chart_waffle.tsx
index b9ee0557faea9..aeeca67a1a511 100644
--- a/x-pack/plugins/lens/public/assets/chart_waffle.tsx
+++ b/packages/kbn-chart-icons/src/assets/chart_waffle.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import type { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const LensIconChartWaffle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+export const IconChartWaffle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     viewBox="0 0 30 22"
     width={30}
@@ -20,11 +22,11 @@ export const LensIconChartWaffle = ({ title, titleId, ...props }: Omit<EuiIconPr
   >
     {title ? <title id={titleId} /> : null}
     <path
-      className="lensChartIcon__accent"
+      className={colors.accent}
       d="M16 1a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V1zM4 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM17 6a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V7a1 1 0 00-1-1h-2zM23 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1h-2zM5 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1H5zM4 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V7zM11 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1h-2zM10 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V7zM11 12a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM22 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V7z"
     />
     <path
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
       d="M22 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM4 19a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM16 19a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM11 18a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM23 18a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM16 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2z"
     />
   </svg>
diff --git a/packages/kbn-chart-icons/src/assets/common_styles.tsx b/packages/kbn-chart-icons/src/assets/common_styles.tsx
new file mode 100644
index 0000000000000..21409b5cb6670
--- /dev/null
+++ b/packages/kbn-chart-icons/src/assets/common_styles.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/css';
+import { euiThemeVars } from '@kbn/ui-theme';
+
+export const colors = {
+  subdued: css`
+    fill: ${euiThemeVars.euiTextSubduedColor};
+  `,
+  accent: css`
+    fill: ${euiThemeVars.euiColorVis0};
+  `,
+};
+
+export const noFill = css`
+  fill: none;
+`;
diff --git a/x-pack/plugins/lens/public/assets/drop_illustration.tsx b/packages/kbn-chart-icons/src/assets/drop_illustration.tsx
similarity index 99%
rename from x-pack/plugins/lens/public/assets/drop_illustration.tsx
rename to packages/kbn-chart-icons/src/assets/drop_illustration.tsx
index acd6d7bf31324..c35d46f48c758 100644
--- a/x-pack/plugins/lens/public/assets/drop_illustration.tsx
+++ b/packages/kbn-chart-icons/src/assets/drop_illustration.tsx
@@ -1,11 +1,12 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import * as React from 'react';
+import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 
 export const DropIllustration = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
diff --git a/x-pack/plugins/lens/public/assets/globe_illustration.tsx b/packages/kbn-chart-icons/src/assets/globe_illustration.tsx
similarity index 98%
rename from x-pack/plugins/lens/public/assets/globe_illustration.tsx
rename to packages/kbn-chart-icons/src/assets/globe_illustration.tsx
index af2f2c7a48e46..b84d39705f632 100644
--- a/x-pack/plugins/lens/public/assets/globe_illustration.tsx
+++ b/packages/kbn-chart-icons/src/assets/globe_illustration.tsx
@@ -1,11 +1,12 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import * as React from 'react';
+import React from 'react';
 import { EuiIconProps } from '@elastic/eui';
 
 export const GlobeIllustration = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
diff --git a/packages/kbn-chart-icons/src/assets/index.ts b/packages/kbn-chart-icons/src/assets/index.ts
new file mode 100644
index 0000000000000..d3d2f968cdcc5
--- /dev/null
+++ b/packages/kbn-chart-icons/src/assets/index.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { IconCircle, IconTriangle } from './annotation_icons';
+
+export { EuiIconAxisBottom } from './axis_bottom';
+export { EuiIconAxisLeft } from './axis_left';
+export { EuiIconAxisRight } from './axis_right';
+export { EuiIconAxisTop } from './axis_top';
+
+export { IconChartArea } from './chart_area';
+export { IconChartAreaPercentage } from './chart_area_percentage';
+export { IconChartAreaStacked } from './chart_area_stacked';
+export { IconChartBar } from './chart_bar';
+export { IconChartBarAnnotations } from './chart_bar_annotations';
+export { IconChartBarHorizontal } from './chart_bar_horizontal';
+export { IconChartBarHorizontalPercentage } from './chart_bar_horizontal_percentage';
+export { IconChartBarHorizontalStacked } from './chart_bar_horizontal_stacked';
+export { IconChartBarPercentage } from './chart_bar_percentage';
+export { IconChartBarReferenceLine } from './chart_bar_reference_line';
+export { IconChartBarStacked } from './chart_bar_stacked';
+export { IconChartDatatable } from './chart_datatable';
+export { IconChartDonut } from './chart_donut';
+export { IconChartLine } from './chart_line';
+export { IconChartMetric } from './chart_metric';
+export { IconChartMixedXy } from './chart_mixed_xy';
+export { IconChartMosaic } from './chart_mosaic';
+export { IconChartPie } from './chart_pie';
+export { IconChartTreemap } from './chart_treemap';
+export { IconChartWaffle } from './chart_waffle';
+export { DropIllustration } from './drop_illustration';
+export { GlobeIllustration } from './globe_illustration';
+export { EuiIconLegend } from './legend';
+export { IconRegionMap } from './region_map';
+export { IconChartHeatmap } from './chart_heatmap';
+export { IconChartHorizontalBullet } from './chart_horizontal_bullet';
+export { IconChartVerticalBullet } from './chart_vertical_bullet';
diff --git a/x-pack/plugins/lens/public/assets/legend.tsx b/packages/kbn-chart-icons/src/assets/legend.tsx
similarity index 84%
rename from x-pack/plugins/lens/public/assets/legend.tsx
rename to packages/kbn-chart-icons/src/assets/legend.tsx
index cde39b222cdd4..ce1a8ef9dcbc4 100644
--- a/x-pack/plugins/lens/public/assets/legend.tsx
+++ b/packages/kbn-chart-icons/src/assets/legend.tsx
@@ -1,11 +1,12 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import * as React from 'react';
+import React from 'react';
 
 export const EuiIconLegend = ({ title, titleId, ...props }: { title: string; titleId: string }) => (
   <svg
diff --git a/x-pack/plugins/maps/public/lens/choropleth_chart/icon.tsx b/packages/kbn-chart-icons/src/assets/region_map.tsx
similarity index 92%
rename from x-pack/plugins/maps/public/lens/choropleth_chart/icon.tsx
rename to packages/kbn-chart-icons/src/assets/region_map.tsx
index ebe0457d8c67c..1de9bdaaa2380 100644
--- a/x-pack/plugins/maps/public/lens/choropleth_chart/icon.tsx
+++ b/packages/kbn-chart-icons/src/assets/region_map.tsx
@@ -1,14 +1,16 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React, { FunctionComponent } from 'react';
 import type { EuiIconProps } from '@elastic/eui';
+import { colors } from './common_styles';
 
-export const Icon: FunctionComponent = ({
+export const IconRegionMap: FunctionComponent = ({
   title,
   titleId,
   ...props
@@ -16,15 +18,15 @@ export const Icon: FunctionComponent = ({
   <svg xmlns="http://www.w3.org/2000/svg" width="30" height="22" viewBox="0 0 30 22" {...props}>
     {title ? <title id={titleId} /> : null}
     <path
-      className="lensChartIcon__accent"
+      className={colors.accent}
       d="M.985.001L1.01 0H7c.325 0 .502.078.602.145.105.07.188.17.254.302A1.46 1.46 0 018 1.01v3.982a1.46 1.46 0 01-.144.562.758.758 0 01-.254.302C7.502 5.922 7.325 6 7 6c-.325 0-.502-.078-.602-.145a.758.758 0 01-.254-.302A1.46 1.46 0 016 4.99v-.012a1.984 1.984 0 00-.006-.135 3.457 3.457 0 00-.35-1.29 2.754 2.754 0 00-.933-1.073C4.248 2.172 3.675 2 3 2H1.009a1.46 1.46 0 01-.562-.144.758.758 0 01-.302-.254C.078 1.502 0 1.325 0 1 0 .675.078.498.145.398A.758.758 0 01.447.144 1.46 1.46 0 01.985.001zM0 21v-5.991l.001-.024a1.46 1.46 0 01.143-.538.757.757 0 01.254-.302C.498 14.078.675 14 1 14h8c.675 0 1.248-.172 1.71-.48.458-.305.75-.704.934-1.073A3.453 3.453 0 0012 11.056v-.046l.002-.025a1.464 1.464 0 01.143-.538.758.758 0 01.254-.302c.1-.067.277-.145.602-.145.325 0 .502.078.602.145.105.07.188.17.254.302a1.464 1.464 0 01.143.538l.001.024V21c0 .325-.078.502-.145.602a.758.758 0 01-.302.254 1.464 1.464 0 01-.538.143h-.013L12.99 22H1.009l-.024-.001a1.464 1.464 0 01-.538-.143.758.758 0 01-.302-.254C.078 21.502 0 21.325 0 21zM27.009 14l-.024.001a1.464 1.464 0 00-.538.143.757.757 0 00-.302.255c-.067.099-.145.276-.145.601v1.991l.001.024a1.464 1.464 0 00.143.538.757.757 0 00.254.302c.1.067.277.145.602.145h1.991l.024-.001a1.464 1.464 0 00.538-.143.757.757 0 00.302-.254c.067-.1.145-.277.145-.602v-1.991l-.001-.024a1.464 1.464 0 00-.143-.538.757.757 0 00-.254-.302c-.1-.067-.277-.145-.602-.145h-1.991z"
     />
     <path
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
       d="M18 3V.981.959a1.424 1.424 0 00-.128-.522.7.7 0 00-.242-.29C17.53.081 17.346 0 17 0h-6c-.325 0-.502.078-.602.145a.758.758 0 00-.254.302 1.464 1.464 0 00-.143.538L10 1.01v4.013a1.984 1.984 0 01-.006.135 3.457 3.457 0 01-.35 1.29 2.754 2.754 0 01-.933 1.073C8.248 7.828 7.675 8 7 8s-1.248-.172-1.711-.48a2.754 2.754 0 01-.933-1.073A3.457 3.457 0 014 5.022V5.01a1.46 1.46 0 00-.144-.563.758.758 0 00-.254-.302C3.502 4.078 3.325 4 3 4H1.009l-.024.001a1.46 1.46 0 00-.538.143.758.758 0 00-.302.254C.078 4.498 0 4.675 0 5v5.991l.001.024a1.46 1.46 0 00.143.538.758.758 0 00.254.303c.1.066.277.144.602.144h8c.325 0 .502-.078.602-.145a.757.757 0 00.254-.302 1.46 1.46 0 00.143-.538L10 10.99v-.025l.001-.02c0-.027.003-.061.005-.102a3.453 3.453 0 01.35-1.29c.184-.369.476-.768.933-1.073C11.752 8.172 12.325 8 13 8s1.248.172 1.71.48c.458.305.75.704.934 1.073A3.453 3.453 0 0116 10.978v4.013l.001.024a1.464 1.464 0 00.143.538.757.757 0 00.254.302c.1.067.277.145.602.145.325 0 .502-.078.602-.145a.758.758 0 00.254-.302 1.464 1.464 0 00.143-.538v-.012l.001-.012V11c0-.675.172-1.248.48-1.711.305-.457.704-.75 1.073-.933A3.456 3.456 0 0120.944 8H20.99l.025-.002a1.46 1.46 0 00.538-.143.758.758 0 00.302-.254c.067-.1.145-.277.145-.602 0-.325-.078-.502-.145-.602a.758.758 0 00-.302-.254 1.46 1.46 0 00-.538-.143h-.017L20.99 6c-.671-.002-1.24-.173-1.702-.48a2.754 2.754 0 01-.933-1.073A3.453 3.453 0 0118 3.022V3z"
     />
     <path
-      className="lensChartIcon__subdued"
+      className={colors.subdued}
       d="M20 3V1.009l.001-.024a1.464 1.464 0 01.143-.538.758.758 0 01.254-.302C20.498.078 20.675 0 21 0h8c.325 0 .502.078.602.145.105.07.188.17.254.302a1.464 1.464 0 01.143.538L30 1.01V11c0 .325-.078.502-.145.602a.758.758 0 01-.302.254 1.464 1.464 0 01-.538.143H29L28.99 12h-7.982l-.024-.001a1.464 1.464 0 01-.538-.143.758.758 0 01-.302-.254c-.067-.1-.145-.277-.145-.602 0-.325.078-.502.145-.602a.758.758 0 01.302-.254 1.464 1.464 0 01.538-.143L21.01 10h.025l.02-.001c.027 0 .061-.003.102-.005a3.456 3.456 0 001.29-.35 2.755 2.755 0 001.073-.933C23.828 8.248 24 7.675 24 7s-.172-1.248-.48-1.711a2.755 2.755 0 00-1.073-.933A3.456 3.456 0 0021.022 4h-.012a1.46 1.46 0 01-.563-.144.757.757 0 01-.302-.254C20.078 3.502 20 3.325 20 3zM20.998 14l-.013.001a1.464 1.464 0 00-.538.143.757.757 0 00-.302.255c-.067.099-.145.276-.145.601 0 .675-.172 1.248-.48 1.71-.305.458-.704.75-1.073.934a3.453 3.453 0 01-1.425.356h-.012l-.025.001a1.464 1.464 0 00-.538.143.757.757 0 00-.302.254c-.067.1-.145.277-.145.602v1.991l.001.024a1.464 1.464 0 00.143.538.757.757 0 00.254.302c.1.067.277.145.602.145h11.991l.024-.001a1.464 1.464 0 00.538-.143.758.758 0 00.302-.254c.067-.1.145-.277.145-.602 0-.325-.078-.502-.145-.602a.758.758 0 00-.302-.254A1.464 1.464 0 0028.99 20H27c-.675 0-1.248-.172-1.71-.48a2.755 2.755 0 01-.934-1.073A3.453 3.453 0 0124 17.022V15c0-.325-.078-.502-.145-.601a.757.757 0 00-.302-.255A1.464 1.464 0 0022.99 14H20.998z"
     />
   </svg>
diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/icons/index.ts b/packages/kbn-chart-icons/src/index.ts
similarity index 73%
rename from src/plugins/chart_expressions/expression_gauge/public/components/icons/index.ts
rename to packages/kbn-chart-icons/src/index.ts
index 79ef0dcad9d7a..f279aa93de165 100644
--- a/src/plugins/chart_expressions/expression_gauge/public/components/icons/index.ts
+++ b/packages/kbn-chart-icons/src/index.ts
@@ -6,5 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { HorizontalBulletIcon } from './horizontal_bullet_icon';
-export { VerticalBulletIcon } from './vertical_bullet_icon';
+export * from './assets';
diff --git a/packages/kbn-chart-icons/tsconfig.json b/packages/kbn-chart-icons/tsconfig.json
new file mode 100644
index 0000000000000..1984d8ed8bbef
--- /dev/null
+++ b/packages/kbn-chart-icons/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "rootDir": "src",
+    "types": [
+      "jest",
+      "node",
+      "react",
+      "@emotion/css/types"
+    ],
+  },
+  "include": [
+    "src/**/*",
+  ]
+}
diff --git a/packages/kbn-ui-shared-deps-npm/webpack.config.js b/packages/kbn-ui-shared-deps-npm/webpack.config.js
index ddcb71fdb2c86..d3739f26e1e38 100644
--- a/packages/kbn-ui-shared-deps-npm/webpack.config.js
+++ b/packages/kbn-ui-shared-deps-npm/webpack.config.js
@@ -71,9 +71,9 @@ module.exports = (_, argv) => {
         // modules from npm
         '@elastic/charts',
         '@elastic/eui',
+        '@elastic/eui/optimize/es/services',
+        '@elastic/eui/optimize/es/services/format',
         '@elastic/eui/dist/eui_charts_theme',
-        '@elastic/eui/lib/services',
-        '@elastic/eui/lib/services/format',
         '@elastic/eui/dist/eui_theme_light.json',
         '@elastic/eui/dist/eui_theme_dark.json',
         '@elastic/numeral',
diff --git a/packages/kbn-ui-shared-deps-src/src/entry.js b/packages/kbn-ui-shared-deps-src/src/entry.js
index bc521a2d72ecc..9114a472ba53e 100644
--- a/packages/kbn-ui-shared-deps-src/src/entry.js
+++ b/packages/kbn-ui-shared-deps-src/src/entry.js
@@ -39,8 +39,8 @@ export const RxjsOperators = require('rxjs/operators');
 export const ElasticNumeral = require('@elastic/numeral');
 export const ElasticCharts = require('@elastic/charts');
 export const ElasticEui = require('@elastic/eui');
-export const ElasticEuiLibServices = require('@elastic/eui/lib/services');
-export const ElasticEuiLibServicesFormat = require('@elastic/eui/lib/services/format');
+export const ElasticEuiLibServices = require('@elastic/eui/optimize/es/services');
+export const ElasticEuiLibServicesFormat = require('@elastic/eui/optimize/es/services/format');
 export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme');
 export const KbnDatemath = require('@kbn/datemath');
 export const ReactBeautifulDnD = require('react-beautiful-dnd');
diff --git a/src/dev/build/build_distributables.ts b/src/dev/build/build_distributables.ts
index a3c2737857a68..fd61eca075a11 100644
--- a/src/dev/build/build_distributables.ts
+++ b/src/dev/build/build_distributables.ts
@@ -83,9 +83,14 @@ export async function buildDistributables(log: ToolingLog, options: BuildOptions
     await run(Tasks.CreatePackageJson);
     await run(Tasks.InstallDependencies);
     await run(Tasks.GeneratePackagesOptimizedAssets);
-    await run(Tasks.DeleteBazelPackagesFromBuildRoot);
+
+    // Run on all source files
+    // **/packages need to be read
+    // before DeleteBazelPackagesFromBuildRoot
     await run(Tasks.CreateNoticeFile);
     await run(Tasks.CreateXPackNoticeFile);
+
+    await run(Tasks.DeleteBazelPackagesFromBuildRoot);
     await run(Tasks.UpdateLicenseFile);
     await run(Tasks.RemovePackageJsonDeps);
     await run(Tasks.CleanPackageManagerRelatedFiles);
diff --git a/src/dev/notice/generate_notice_from_source.ts b/src/dev/notice/generate_notice_from_source.ts
index 8d162154bc5f0..7abfce7891c1a 100644
--- a/src/dev/notice/generate_notice_from_source.ts
+++ b/src/dev/notice/generate_notice_from_source.ts
@@ -6,7 +6,10 @@
  * Side Public License, v 1.
  */
 
-import vfs from 'vinyl-fs';
+import { readFile } from 'fs/promises';
+import { relative } from 'path';
+import globby from 'globby';
+
 import { ToolingLog } from '@kbn/tooling-log';
 
 const NOTICE_COMMENT_RE = /\/\*[\s\n\*]*@notice([\w\W]+?)\*\//g;
@@ -30,45 +33,37 @@ interface Options {
  * into the repository.
  */
 export async function generateNoticeFromSource({ productName, directory, log }: Options) {
-  const globs = ['**/*.{js,less,css,ts,tsx}'];
-
-  const options = {
-    cwd: directory,
-    nodir: true,
-    ignore: [
-      '{node_modules,build,dist,data,built_assets}/**',
-      'packages/*/{node_modules,build,dist}/**',
-      'src/plugins/*/{node_modules,build,dist}/**',
-      'x-pack/{node_modules,build,dist,data}/**',
-      'x-pack/packages/*/{node_modules,build,dist}/**',
-      'x-pack/plugins/**/{node_modules,build,dist}/**',
-      '**/target/**',
-    ],
-  };
+  const select = [
+    '**/*.{js,mjs,scss,css,ts,tsx}',
+    '!{node_modules,build,dist,data,built_assets,shared_built_assets}/**',
+    '!packages/*/{node_modules,build,dist}/**',
+    '!src/plugins/*/{node_modules,build,dist}/**',
+    '!x-pack/{node_modules,build,dist,data}/**',
+    '!x-pack/packages/*/{node_modules,build,dist}/**',
+    '!x-pack/plugins/**/{node_modules,build,dist}/**',
+    '!**/target/**',
+  ];
 
-  log.debug('vfs.src globs', globs);
-  log.debug('vfs.src options', options);
   log.info(`Searching ${directory} for multi-line comments starting with @notice`);
 
-  const files = vfs.src(globs, options);
-  const noticeComments: string[] = [];
-  await new Promise((resolve, reject) => {
-    files
-      .on('data', (file) => {
-        log.verbose(`Checking for @notice comments in ${file.relative}`);
-
-        const source = file.contents.toString('utf8');
-        let match;
-        while ((match = NOTICE_COMMENT_RE.exec(source)) !== null) {
-          log.info(`Found @notice comment in ${file.relative}`);
-          if (!noticeComments.includes(match[1])) {
-            noticeComments.push(match[1]);
-          }
-        }
-      })
-      .on('error', reject)
-      .on('end', resolve);
+  const files = globby.stream(select, {
+    cwd: directory,
+    followSymbolicLinks: false,
+    absolute: true,
   });
+  const noticeComments: string[] = [];
+  for await (const file of files) {
+    const source = await readFile(file, 'utf-8');
+    const relativeFile = relative(directory, file.toString());
+    log.verbose(`Checking for @notice comments in ${relativeFile}`);
+    let match;
+    while ((match = NOTICE_COMMENT_RE.exec(source)) !== null) {
+      log.info(`Found @notice comment in ${relativeFile}`);
+      if (!noticeComments.includes(match[1])) {
+        noticeComments.push(match[1]);
+      }
+    }
+  }
 
   let noticeText = '';
   noticeText += `${productName}\n`;
diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index 89e78848a1366..65035c0c95f72 100644
--- a/src/dev/storybook/aliases.ts
+++ b/src/dev/storybook/aliases.ts
@@ -13,6 +13,7 @@ export const storybookAliases = {
   ci_composite: '.ci/.storybook',
   cloud: 'x-pack/plugins/cloud/.storybook',
   coloring: 'packages/kbn-coloring/.storybook',
+  chart_icons: 'packages/kbn-chart-icons/.storybook',
   controls: 'src/plugins/controls/storybook',
   custom_integrations: 'src/plugins/custom_integrations/storybook',
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx
index 232b522838b8e..b75d613f814a7 100644
--- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx
+++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx
@@ -21,7 +21,6 @@ import {
 } from '../../common';
 import {
   getAccessorsFromArgs,
-  getIcons,
   getMaxValue,
   getMinValue,
   getValueFromAccessor,
@@ -29,6 +28,7 @@ import {
   getGoalConfig,
   computeMinMax,
 } from './utils';
+import { getIcons } from './utils/icons';
 import './index.scss';
 import { GaugeCentralMajorMode } from '../../common/types';
 import { isBulletShape, isRoundShape } from '../../common/utils';
diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/utils/icons.ts b/src/plugins/chart_expressions/expression_gauge/public/components/utils/icons.ts
index 734c64d579da3..33d8427892392 100644
--- a/src/plugins/chart_expressions/expression_gauge/public/components/utils/icons.ts
+++ b/src/plugins/chart_expressions/expression_gauge/public/components/utils/icons.ts
@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
+import { IconChartHorizontalBullet, IconChartVerticalBullet } from '@kbn/chart-icons';
 import { GaugeShape, GaugeShapes } from '../../../common';
-import { HorizontalBulletIcon } from '../icons';
 
 export const getIcons = (type: GaugeShape) =>
   ({
-    [GaugeShapes.HORIZONTAL_BULLET]: HorizontalBulletIcon,
-    [GaugeShapes.VERTICAL_BULLET]: HorizontalBulletIcon,
+    [GaugeShapes.HORIZONTAL_BULLET]: IconChartHorizontalBullet,
+    [GaugeShapes.VERTICAL_BULLET]: IconChartVerticalBullet,
     [GaugeShapes.ARC]: 'visGoal',
     [GaugeShapes.CIRCLE]: 'visGoal',
   }[type]);
diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/utils/index.ts b/src/plugins/chart_expressions/expression_gauge/public/components/utils/index.ts
index 87f6a520ff9eb..639c2a7821b55 100644
--- a/src/plugins/chart_expressions/expression_gauge/public/components/utils/index.ts
+++ b/src/plugins/chart_expressions/expression_gauge/public/components/utils/index.ts
@@ -7,7 +7,6 @@
  */
 
 export * from './accessors';
-export * from './icons';
 export * from './gauge_types';
 export * from './goal_config';
 
diff --git a/src/plugins/chart_expressions/expression_gauge/public/index.ts b/src/plugins/chart_expressions/expression_gauge/public/index.ts
index 6f9924759e4c4..fc40382a8702a 100644
--- a/src/plugins/chart_expressions/expression_gauge/public/index.ts
+++ b/src/plugins/chart_expressions/expression_gauge/public/index.ts
@@ -13,4 +13,3 @@ export function plugin() {
 }
 
 export { getGoalValue, getMaxValue, getMinValue, getValueFromAccessor } from './components/utils';
-export { VerticalBulletIcon, HorizontalBulletIcon } from './components/icons';
diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
index 35a3d54fe58c0..f2db5a25ff429 100644
--- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
+++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
@@ -35,6 +35,7 @@ import {
   LegendSizeToPixels,
 } from '@kbn/visualizations-plugin/common/constants';
 import { DatatableColumn } from '@kbn/expressions-plugin/public';
+import { IconChartHeatmap } from '@kbn/chart-icons';
 import type { HeatmapRenderProps, FilterEvent, BrushEvent } from '../../common';
 import {
   applyPaletteParams,
@@ -47,7 +48,6 @@ import {
   LegendColorPickerWrapper,
 } from '../utils/get_color_picker';
 import { defaultPaletteParams } from '../constants';
-import { HeatmapIcon } from './heatmap_icon';
 import './index.scss';
 
 declare global {
@@ -366,7 +366,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
     );
 
     if (!chartData || !chartData.length) {
-      return <EmptyPlaceholder icon={HeatmapIcon} renderComplete={onRenderChange} />;
+      return <EmptyPlaceholder icon={IconChartHeatmap} renderComplete={onRenderChange} />;
     }
 
     if (!yAxisColumn) {
@@ -567,7 +567,9 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
           <Chart>
             <Settings
               onRenderChange={onRenderChange}
-              noResults={<EmptyPlaceholder icon={HeatmapIcon} renderComplete={onRenderChange} />}
+              noResults={
+                <EmptyPlaceholder icon={IconChartHeatmap} renderComplete={onRenderChange} />
+              }
               onElementClick={interactive ? (onElementClick as ElementClickListener) : undefined}
               showLegend={showLegend ?? args.legend.isVisible}
               legendPosition={args.legend.position}
diff --git a/src/plugins/chart_expressions/expression_heatmap/public/index.ts b/src/plugins/chart_expressions/expression_heatmap/public/index.ts
index f6aa926a8fef2..fbbf8027eb343 100644
--- a/src/plugins/chart_expressions/expression_heatmap/public/index.ts
+++ b/src/plugins/chart_expressions/expression_heatmap/public/index.ts
@@ -11,5 +11,3 @@ import { ExpressionHeatmapPlugin } from './plugin';
 export function plugin() {
   return new ExpressionHeatmapPlugin();
 }
-
-export { HeatmapIcon } from './components/heatmap_icon';
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/icons/donut.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/icons/donut.tsx
deleted file mode 100644
index 3101164bfe88d..0000000000000
--- a/src/plugins/chart_expressions/expression_partition_vis/public/icons/donut.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-import { useCommonChartStyles } from '@kbn/charts-plugin/public';
-
-export const DonutIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
-  const { chartIcon } = useCommonChartStyles();
-
-  return (
-    <svg
-      viewBox="0 0 30 22"
-      width={30}
-      height={22}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-labelledby={titleId}
-      {...props}
-    >
-      {title ? <title id={titleId}>{title}</title> : null}
-      <path
-        d="M19.21 21.119a11 11 0 006.595-8.1c.11-.577-.355-1.082-.942-1.082H20.75c-.477 0-.878.342-1.046.788a5.028 5.028 0 11-6.474-6.474c.447-.168.788-.569.788-1.046V1.094c0-.588-.505-1.053-1.082-.943a11 11 0 106.272 20.968h.002z"
-        css={chartIcon.subdued}
-      />
-      <path
-        d="M22.778 3.176A11 11 0 0017.084.154C16.507.042 16 .507 16 1.095v4.116c0 .475.34.875.784 1.044l.14.055A5.026 5.026 0 0119.7 9.17c.168.445.568.784 1.044.784h4.115c.588 0 1.053-.506.942-1.084a11 11 0 00-3.023-5.694z"
-        css={chartIcon.accent}
-      />
-    </svg>
-  );
-};
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/icons/mosaic.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/icons/mosaic.tsx
deleted file mode 100644
index 1f5c99702f869..0000000000000
--- a/src/plugins/chart_expressions/expression_partition_vis/public/icons/mosaic.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import type { EuiIconProps } from '@elastic/eui';
-import { useCommonChartStyles } from '@kbn/charts-plugin/public';
-
-export const MosaicIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
-  const { chartIcon } = useCommonChartStyles();
-
-  return (
-    <svg
-      viewBox="0 0 30 22"
-      width={30}
-      height={22}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-labelledby={titleId}
-      {...props}
-    >
-      {title ? <title id={titleId} /> : null}
-      <path
-        css={chartIcon.subdued}
-        d="M2 0a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1H2zM2 14a1 1 0 00-1 1v6a1 1 0 001 1h6a1 1 0 001-1v-6a1 1 0 00-1-1H2zM11 13a1 1 0 011-1h6a1 1 0 011 1v8a1 1 0 01-1 1h-6a1 1 0 01-1-1v-8zM12 0a1 1 0 100 2h6a1 1 0 100-2h-6zM21 15a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1h-6a1 1 0 01-1-1v-6zM22 0a1 1 0 00-1 1v4a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1h-6z"
-      />
-      <path
-        css={chartIcon.accent}
-        d="M11 5a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1V5zM1 7a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1V7zM22 8a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V9a1 1 0 00-1-1h-6z"
-      />
-    </svg>
-  );
-};
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/icons/pie.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/icons/pie.tsx
deleted file mode 100644
index 5824b8f40b6e6..0000000000000
--- a/src/plugins/chart_expressions/expression_partition_vis/public/icons/pie.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-import { useCommonChartStyles } from '@kbn/charts-plugin/public';
-
-export const PieIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
-  const { chartIcon } = useCommonChartStyles();
-
-  return (
-    <svg
-      viewBox="0 0 30 22"
-      width={30}
-      height={22}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-labelledby={titleId}
-      {...props}
-    >
-      {title ? <title id={titleId}>{title}</title> : null}
-      <path
-        d="M17.827 21.189a10.001 10.001 0 005.952-7.148c.124-.578-.343-1.091-.935-1.091H14a1 1 0 01-1-1V3.106c0-.592-.513-1.059-1.092-.935a10 10 0 105.919 19.018z"
-        css={chartIcon.subdued}
-      />
-      <path
-        d="M22.462 3.538A12.29 12.29 0 0016.094.16C15.512.048 15 .514 15 1.106V10a1 1 0 001 1h8.895c.591 0 1.057-.512.945-1.094a12.288 12.288 0 00-3.378-6.368z"
-        css={chartIcon.accent}
-      />
-    </svg>
-  );
-};
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/icons/treemap.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/icons/treemap.tsx
deleted file mode 100644
index 781b79505384d..0000000000000
--- a/src/plugins/chart_expressions/expression_partition_vis/public/icons/treemap.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-import { useCommonChartStyles } from '@kbn/charts-plugin/public';
-
-export const TreemapIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
-  const { chartIcon } = useCommonChartStyles();
-
-  return (
-    <svg
-      viewBox="0 0 30 22"
-      width={30}
-      height={22}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-labelledby={titleId}
-      {...props}
-    >
-      {title ? <title id={titleId}>{title}</title> : null}
-      <path
-        d="M0 1a1 1 0 011-1h13a1 1 0 011 1v20a1 1 0 01-1 1H1a1 1 0 01-1-1V1z"
-        css={chartIcon.subdued}
-      />
-      <path
-        d="M17 1a1 1 0 011-1h11a1 1 0 011 1v12a1 1 0 01-1 1H18a1 1 0 01-1-1V1z"
-        css={chartIcon.accent}
-      />
-      <path
-        d="M29 16H18a1 1 0 00-1 1v4a1 1 0 001 1h11a1 1 0 001-1v-4a1 1 0 00-1-1z"
-        css={chartIcon.subdued}
-      />
-    </svg>
-  );
-};
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/icons/waffle.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/icons/waffle.tsx
deleted file mode 100644
index 21e26facd8e15..0000000000000
--- a/src/plugins/chart_expressions/expression_partition_vis/public/icons/waffle.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import type { EuiIconProps } from '@elastic/eui';
-import { useCommonChartStyles } from '@kbn/charts-plugin/public';
-
-export const WaffleIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => {
-  const { chartIcon } = useCommonChartStyles();
-
-  return (
-    <svg
-      viewBox="0 0 30 22"
-      width={30}
-      height={22}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-labelledby={titleId}
-      {...props}
-    >
-      {title ? <title id={titleId} /> : null}
-      <path
-        css={chartIcon.subdued}
-        d="M16 1a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V1zM4 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM17 6a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V7a1 1 0 00-1-1h-2zM23 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1h-2zM5 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1H5zM4 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V7zM11 0a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V1a1 1 0 00-1-1h-2zM10 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V7zM11 12a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM22 7a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V7z"
-      />
-      <path
-        css={chartIcon.accent}
-        d="M22 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM4 19a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM16 19a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM11 18a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM23 18a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM16 13a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2z"
-      />
-    </svg>
-  );
-};
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_icon.ts b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_icon.ts
index cac282553af11..d8b5ad858d764 100644
--- a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_icon.ts
+++ b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_icon.ts
@@ -6,14 +6,20 @@
  * Side Public License, v 1.
  */
 
+import {
+  IconChartWaffle,
+  IconChartMosaic,
+  IconChartPie,
+  IconChartDonut,
+  IconChartTreemap,
+} from '@kbn/chart-icons';
 import { ChartTypes } from '../../common/types';
-import { PieIcon, DonutIcon, TreemapIcon, MosaicIcon, WaffleIcon } from '../icons';
 
 export const getIcon = (chart: ChartTypes) =>
   ({
-    [ChartTypes.PIE]: PieIcon,
-    [ChartTypes.DONUT]: DonutIcon,
-    [ChartTypes.TREEMAP]: TreemapIcon,
-    [ChartTypes.MOSAIC]: MosaicIcon,
-    [ChartTypes.WAFFLE]: WaffleIcon,
+    [ChartTypes.PIE]: IconChartPie,
+    [ChartTypes.DONUT]: IconChartDonut,
+    [ChartTypes.TREEMAP]: IconChartTreemap,
+    [ChartTypes.MOSAIC]: IconChartMosaic,
+    [ChartTypes.WAFFLE]: IconChartWaffle,
   }[chart]);
diff --git a/src/plugins/chart_expressions/expression_xy/common/index.ts b/src/plugins/chart_expressions/expression_xy/common/index.ts
index d9c415f488839..da4c969f47a0c 100755
--- a/src/plugins/chart_expressions/expression_xy/common/index.ts
+++ b/src/plugins/chart_expressions/expression_xy/common/index.ts
@@ -47,6 +47,7 @@ export type {
   ReferenceLineLayerArgs,
   CommonXYDataLayerConfig,
   ReferenceLineLayerConfig,
+  DataDecorationConfigResult,
   AvailableReferenceLineIcon,
   XYExtendedLayerConfigResult,
   CommonXYAnnotationLayerConfig,
diff --git a/src/plugins/chart_expressions/expression_xy/public/definitions/visualizations.ts b/src/plugins/chart_expressions/expression_xy/public/definitions/visualizations.ts
index bb4acd7fa50de..4f4d8aeb69959 100644
--- a/src/plugins/chart_expressions/expression_xy/public/definitions/visualizations.ts
+++ b/src/plugins/chart_expressions/expression_xy/public/definitions/visualizations.ts
@@ -6,30 +6,33 @@
  * Side Public License, v 1.
  */
 
-import { SeriesTypes } from '../../common/constants';
 import {
-  BarIcon,
-  LineIcon,
-  AreaIcon,
-  BarStackedIcon,
-  AreaStackedIcon,
-  BarHorizontalIcon,
-  BarPercentageIcon,
-  AreaPercentageIcon,
-  BarHorizontalStackedIcon,
-  BarHorizontalPercentageIcon,
-} from '../icons';
+  IconChartBarHorizontalPercentage,
+  IconChartBarHorizontalStacked,
+  IconChartBarPercentage,
+  IconChartBarHorizontal,
+  IconChartAreaStacked,
+  IconChartBarStacked,
+  IconChartLine,
+  IconChartBar,
+  IconChartArea,
+  IconChartAreaPercentage,
+} from '@kbn/chart-icons';
+import { SeriesTypes } from '../../common/constants';
 
 export const visualizationDefinitions = [
-  { id: SeriesTypes.BAR, icon: BarIcon },
-  { id: `${SeriesTypes.BAR}_stacked`, icon: BarStackedIcon },
-  { id: `${SeriesTypes.BAR}_horizontal`, icon: BarHorizontalIcon },
-  { id: `${SeriesTypes.BAR}_percentage_stacked`, icon: BarPercentageIcon },
-  { id: `${SeriesTypes.BAR}_horizontal_stacked`, icon: BarHorizontalStackedIcon },
-  { id: `${SeriesTypes.BAR}_horizontal_percentage_stacked`, icon: BarHorizontalPercentageIcon },
-  { id: SeriesTypes.LINE, icon: LineIcon },
-  { id: `${SeriesTypes.LINE}_stacked`, icon: LineIcon },
-  { id: SeriesTypes.AREA, icon: AreaIcon },
-  { id: `${SeriesTypes.AREA}_stacked`, icon: AreaStackedIcon },
-  { id: `${SeriesTypes.AREA}_percentage_stacked`, icon: AreaPercentageIcon },
+  { id: SeriesTypes.BAR, icon: IconChartBar },
+  { id: `${SeriesTypes.BAR}_stacked`, icon: IconChartBarStacked },
+  { id: `${SeriesTypes.BAR}_horizontal`, icon: IconChartBarHorizontal },
+  { id: `${SeriesTypes.BAR}_percentage_stacked`, icon: IconChartBarPercentage },
+  { id: `${SeriesTypes.BAR}_horizontal_stacked`, icon: IconChartBarHorizontalStacked },
+  {
+    id: `${SeriesTypes.BAR}_horizontal_percentage_stacked`,
+    icon: IconChartBarHorizontalPercentage,
+  },
+  { id: `${SeriesTypes.LINE}_stacked`, icon: IconChartLine },
+  { id: SeriesTypes.LINE, icon: IconChartLine },
+  { id: SeriesTypes.AREA, icon: IconChartArea },
+  { id: `${SeriesTypes.AREA}_stacked`, icon: IconChartAreaStacked },
+  { id: `${SeriesTypes.AREA}_percentage_stacked`, icon: IconChartAreaPercentage },
 ];
diff --git a/src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.test.ts b/src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.test.ts
index 35019d75e0554..183a798056edb 100644
--- a/src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.test.ts
+++ b/src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.test.ts
@@ -7,7 +7,7 @@
  */
 
 import { FieldFormat } from '@kbn/field-formats-plugin/common';
-import { DataLayerConfig, YAxisConfigResult } from '../../common';
+import { DataLayerConfig, YAxisConfigResult, DataDecorationConfigResult } from '../../common';
 import { LayerTypes } from '../../common/constants';
 import { Datatable } from '@kbn/expressions-plugin/public';
 import { getAxesConfiguration } from './axes_configuration';
@@ -218,6 +218,20 @@ describe('axes_configuration', () => {
             params: { id: 'currency' },
           },
         },
+        {
+          id: 'yAccessorId5',
+          name: 'Other column',
+          meta: {
+            type: 'number',
+            source: 'esaggs',
+            index: 'indexPatternId',
+            sourceParams: {
+              indexPatternId: 'indexPatternId',
+              type: 'count',
+            },
+            params: { id: 'number' },
+          },
+        },
       ],
     },
   };
@@ -228,6 +242,11 @@ describe('axes_configuration', () => {
       position: 'right',
       type: 'yAxisConfig',
     },
+    {
+      id: '2',
+      position: 'left',
+      type: 'yAxisConfig',
+    },
   ];
 
   const sampleLayer: DataLayerConfig = {
@@ -256,6 +275,7 @@ describe('axes_configuration', () => {
         yAccessorId: { id: 'number', params: {} },
         yAccessorId3: { id: 'currency', params: {} },
         yAccessorId4: { id: 'currency', params: {} },
+        yAccessorId5: { id: 'number', params: {} },
       },
       splitSeriesAccessors: {
         d: { format: { id: 'number', params: {} }, formatter: {} as FieldFormat },
@@ -269,11 +289,35 @@ describe('axes_configuration', () => {
     const formatFactory = jest.fn();
     const groups = getAxesConfiguration([sampleLayer], false, formatFactory, fieldFormats, []);
     expect(groups.length).toEqual(1);
+    expect(groups[0].groupId).toEqual('left');
     expect(groups[0].position).toEqual('left');
     expect(groups[0].series[0].accessor).toEqual('yAccessorId');
     expect(groups[0].series[0].layer).toEqual('first');
   });
 
+  it('should map auto series to defined left axis if formatters match', () => {
+    const formatFactory = jest.fn();
+    const groups = getAxesConfiguration(
+      [
+        {
+          ...sampleLayer,
+          accessors: ['yAccessorId', 'yAccessorId5'],
+          decorations: [{ type: 'dataDecorationConfig', forAccessor: 'yAccessorId', axisId: '2' }],
+        },
+      ],
+      false,
+      formatFactory,
+      fieldFormats,
+      yAxisConfigs
+    );
+    expect(groups.length).toEqual(1);
+    expect(groups[0].groupId).toEqual('axis-2');
+    expect(groups[0].position).toEqual('left');
+    expect(groups[0].series[0].accessor).toEqual('yAccessorId');
+    expect(groups[0].series[1].accessor).toEqual('yAccessorId5');
+    expect(groups[0].series[0].layer).toEqual('first');
+  });
+
   it('should map auto series to right axis if formatters do not match', () => {
     const formatFactory = jest.fn();
     const twoSeriesLayer = { ...sampleLayer, accessors: ['yAccessorId', 'yAccessorId2'] };
@@ -285,13 +329,72 @@ describe('axes_configuration', () => {
     expect(groups[1].series[0].accessor).toEqual('yAccessorId2');
   });
 
-  it('should map auto series to left if left and right are already filled with non-matching series', () => {
+  it('should map auto series to left axis if formatters do not match with defined left axis', () => {
+    const formatFactory = jest.fn();
+    const groups = getAxesConfiguration(
+      [
+        {
+          ...sampleLayer,
+          accessors: ['yAccessorId', 'yAccessorId3'],
+          decorations: [{ type: 'dataDecorationConfig', forAccessor: 'yAccessorId', axisId: '2' }],
+        },
+      ],
+      false,
+      formatFactory,
+      fieldFormats,
+      yAxisConfigs
+    );
+    expect(groups.length).toEqual(2);
+    expect(groups[0].groupId).toEqual('axis-2');
+    expect(groups[0].position).toEqual('left');
+    expect(groups[0].series[0].accessor).toEqual('yAccessorId');
+    expect(groups[0].series[0].layer).toEqual('first');
+    expect(groups[1].groupId).toEqual('right');
+    expect(groups[1].position).toEqual('right');
+    expect(groups[1].series[0].accessor).toEqual('yAccessorId3');
+    expect(groups[1].series[0].layer).toEqual('first');
+  });
+
+  it('should map auto series to defined left axis if defined left and right are already filled with non-matching series', () => {
+    const formatFactory = jest.fn();
+    const threeSeriesLayer = {
+      ...sampleLayer,
+      accessors: ['yAccessorId', 'yAccessorId2', 'yAccessorId3'],
+      decorations: [
+        { type: 'dataDecorationConfig', forAccessor: 'yAccessorId', axisId: '1' },
+        { type: 'dataDecorationConfig', forAccessor: 'yAccessorId2', axisId: '2' },
+      ] as DataDecorationConfigResult[],
+    };
+    const groups = getAxesConfiguration(
+      [threeSeriesLayer],
+      false,
+      formatFactory,
+      fieldFormats,
+      yAxisConfigs
+    );
+    expect(groups.length).toEqual(2);
+    expect(groups[0].groupId).toEqual('axis-1');
+    expect(groups[0].position).toEqual('right');
+    expect(groups[1].groupId).toEqual('axis-2');
+    expect(groups[1].position).toEqual('left');
+    expect(groups[0].series[0].accessor).toEqual('yAccessorId');
+    expect(groups[1].series[0].accessor).toEqual('yAccessorId2');
+    expect(groups[1].series[1].accessor).toEqual('yAccessorId3');
+  });
+
+  it('should map auto series to left if not-defined left and right are already filled with non-matching series', () => {
     const formatFactory = jest.fn();
     const threeSeriesLayer = {
       ...sampleLayer,
       accessors: ['yAccessorId', 'yAccessorId2', 'yAccessorId3'],
     };
-    const groups = getAxesConfiguration([threeSeriesLayer], false, formatFactory, fieldFormats, []);
+    const groups = getAxesConfiguration(
+      [threeSeriesLayer],
+      false,
+      formatFactory,
+      fieldFormats,
+      yAxisConfigs
+    );
     expect(groups.length).toEqual(2);
     expect(groups[0].position).toEqual('left');
     expect(groups[1].position).toEqual('right');
diff --git a/src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.ts b/src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.ts
index f95423ea83854..7f9f6c49824b8 100644
--- a/src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.ts
+++ b/src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.ts
@@ -113,8 +113,13 @@ export function groupAxesByType(
 
   const tablesExist = layers.filter(({ table }) => Boolean(table)).length > 0;
 
-  leftSeriesKeys.push(LEFT_GLOBAL_AXIS_ID);
-  rightSeriesKeys.push(RIGHT_GLOBAL_AXIS_ID);
+  if (!leftSeriesKeys.length) {
+    leftSeriesKeys.push(LEFT_GLOBAL_AXIS_ID);
+  }
+
+  if (!rightSeriesKeys.length) {
+    rightSeriesKeys.push(RIGHT_GLOBAL_AXIS_ID);
+  }
 
   series.auto.forEach((currentSeries) => {
     const leftAxisGroupId = tablesExist
@@ -129,16 +134,23 @@ export function groupAxesByType(
         )
       : undefined;
 
-    let axisGroupId = LEFT_GLOBAL_AXIS_ID;
-
-    if (series[LEFT_GLOBAL_AXIS_ID].length === 0 || leftAxisGroupId) {
-      axisGroupId = leftAxisGroupId || LEFT_GLOBAL_AXIS_ID;
-    } else if (series[RIGHT_GLOBAL_AXIS_ID].length === 0 || rightAxisGroupId) {
-      axisGroupId = rightAxisGroupId || RIGHT_GLOBAL_AXIS_ID;
-    } else if (series[RIGHT_GLOBAL_AXIS_ID].length >= series[LEFT_GLOBAL_AXIS_ID].length) {
-      axisGroupId = LEFT_GLOBAL_AXIS_ID;
+    const rightSeriesCount = rightSeriesKeys.reduce((acc, key) => {
+      return acc + series[key].length;
+    }, 0);
+    const leftSeriesCount = leftSeriesKeys.reduce((acc, key) => {
+      return acc + series[key].length;
+    }, 0);
+
+    let axisGroupId;
+
+    if (leftSeriesCount === 0 || leftAxisGroupId) {
+      axisGroupId = leftAxisGroupId || leftSeriesKeys[0];
+    } else if (rightSeriesCount === 0 || rightAxisGroupId) {
+      axisGroupId = rightAxisGroupId || rightSeriesKeys[0];
+    } else if (rightSeriesCount >= leftSeriesCount) {
+      axisGroupId = leftSeriesKeys[0];
     } else {
-      axisGroupId = RIGHT_GLOBAL_AXIS_ID;
+      axisGroupId = rightSeriesKeys[0];
     }
 
     series[axisGroupId].push(currentSeries);
diff --git a/src/plugins/chart_expressions/expression_xy/public/helpers/icon.ts b/src/plugins/chart_expressions/expression_xy/public/helpers/icon.ts
index 8b4113b3ada11..a74d4196f487d 100644
--- a/src/plugins/chart_expressions/expression_xy/public/helpers/icon.ts
+++ b/src/plugins/chart_expressions/expression_xy/public/helpers/icon.ts
@@ -7,7 +7,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { TriangleIcon, CircleIcon } from '../icons';
+import { IconTriangle, IconCircle } from '@kbn/chart-icons';
 import { AvailableReferenceLineIcons } from '../../common/constants';
 
 export function hasIcon(icon: string | undefined): icon is string {
@@ -56,7 +56,7 @@ export const iconSet = [
     label: i18n.translate('expressionXY.xyChart.iconSelect.circleIconLabel', {
       defaultMessage: 'Circle',
     }),
-    icon: CircleIcon,
+    icon: IconCircle,
     canFill: true,
   },
 
@@ -105,7 +105,7 @@ export const iconSet = [
     label: i18n.translate('expressionXY.xyChart.iconSelect.triangleIconLabel', {
       defaultMessage: 'Triangle',
     }),
-    icon: TriangleIcon,
+    icon: IconTriangle,
     shouldRotate: true,
     canFill: true,
   },
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/area_percentage.tsx b/src/plugins/chart_expressions/expression_xy/public/icons/area_percentage.tsx
deleted file mode 100644
index a51e66b68ba93..0000000000000
--- a/src/plugins/chart_expressions/expression_xy/public/icons/area_percentage.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const AreaPercentageIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M0 13v8a1 1 0 001 1h28a1 1 0 001-1V9.25c-1.251-.929-2.45-1.734-3.493-2.313a11.028 11.028 0 00-1.478-.703C24.592 6.072 24.25 6 24 6c-.262 0-.63.212-1.126.77-.472.53-.952 1.249-1.458 2.007l-.013.02c-.49.736-1.006 1.51-1.53 2.098C19.37 11.462 18.739 12 18 12c-1.062 0-2.112-.263-3.092-.508l-.03-.007C13.869 11.232 12.929 11 12 11c-.337 0-.729.171-1.2.525-.466.35-.94.822-1.446 1.329l-.015.015c-.49.489-1.01 1.01-1.539 1.406-.529.396-1.137.725-1.8.725-.657 0-1.57-.212-2.48-.424l-.058-.014C2.275 14.287 1.032 14 0 14v-1z"
-      className="lensChartIcon__accent"
-    />
-    <path
-      d="M29 0a1 1 0 011 1v6.012c-1.06-.764-2.085-1.437-3.007-1.95a11.93 11.93 0 00-1.616-.765C24.887 4.115 24.418 4 24 4c-.738 0-1.369.538-1.874 1.105-.523.589-1.039 1.362-1.529 2.098l-.013.02c-.506.758-.985 1.476-1.458 2.007-.495.558-.864.77-1.126.77-.928 0-1.867-.232-2.879-.485l-.029-.007C14.112 9.263 13.062 9 12 9c-.663 0-1.271.328-1.8.725-.528.396-1.05.917-1.538 1.406l-.015.015c-.507.507-.98.98-1.447 1.329-.471.354-.863.525-1.2.525-.528 0-1.328-.183-2.311-.412l-.034-.007C2.507 12.314 1.159 12 .001 12V1a1 1 0 011-1h28z"
-      className="lensChartIcon__subdued"
-    />
-  </svg>
-);
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/area_stacked.tsx b/src/plugins/chart_expressions/expression_xy/public/icons/area_stacked.tsx
deleted file mode 100644
index c2b9fbe926328..0000000000000
--- a/src/plugins/chart_expressions/expression_xy/public/icons/area_stacked.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const AreaStackedIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={31}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M0 15.213l.484.091.813.146.762.129C3.779 15.859 5.09 16 6 16c.986 0 1.712-.25 3.166-.966l.281-.14C10.802 14.217 11.381 14 12 14c.507 0 .988.146 1.89.571l1.209.592c1.28.617 1.977.837 2.901.837 1.028 0 1.75-.349 3.119-1.344l.89-.659C23.034 13.252 23.535 13 24 13c.581 0 1.232.185 2.598.718l1.1.436.568.217c.72.27 1.256.438 1.736.532L30 21a1 1 0 01-1 1H1a1 1 0 01-1-1v-5.787z"
-      className="lensChartIcon__accent"
-    />
-    <path
-      d="M24 1c1.334 0 3.334 1 6 3v8.842l-.324-.098c-.346-.11-.759-.262-1.273-.462l-1.101-.436-.568-.217-.536-.193C25.277 11.118 24.676 11 24 11c-1.028 0-1.75.349-3.119 1.344l-.89.659c-1.024.745-1.524.997-1.99.997-.508 0-.989-.146-1.89-.571l-1.21-.592c-1.28-.617-1.977-.837-2.9-.837-.987 0-1.713.25-3.167.966l-.281.14C7.198 13.783 6.619 14 6 14l-.334-.007c-1.182-.045-3.08-.317-5.665-.815V9c2 0 4.666 1 6 1 2 0 4-4 6-4s4 1 6 1 4-6 6-6z"
-      className="lensChartIcon__subdued"
-    />
-  </svg>
-);
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/bar_reference_line.tsx b/src/plugins/chart_expressions/expression_xy/public/icons/bar_reference_line.tsx
deleted file mode 100644
index 95bd8e2a8d0a2..0000000000000
--- a/src/plugins/chart_expressions/expression_xy/public/icons/bar_reference_line.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const BarReferenceLineIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 16 12"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g>
-      <path
-        className="lensChartIcon__subdued"
-        d="M3.2 4.79997C3.2 4.50542 2.96122 4.26663 2.66667 4.26663H0.533333C0.238784 4.26663 0 4.50542 0 4.79997V6.39997H3.2V4.79997ZM3.2 9.59997H0V13.3333C0 13.6279 0.238784 13.8666 0.533333 13.8666H2.66667C2.96122 13.8666 3.2 13.6279 3.2 13.3333V9.59997ZM8.53333 9.59997H11.7333V13.3333C11.7333 13.6279 11.4946 13.8666 11.2 13.8666H9.06667C8.77211 13.8666 8.53333 13.6279 8.53333 13.3333V9.59997ZM11.7333 6.39997H8.53333V2.66663C8.53333 2.37208 8.77211 2.1333 9.06667 2.1333H11.2C11.4946 2.1333 11.7333 2.37208 11.7333 2.66663V6.39997ZM12.8 9.59997V13.3333C12.8 13.6279 13.0388 13.8666 13.3333 13.8666H15.4667C15.7612 13.8666 16 13.6279 16 13.3333V9.59997H12.8ZM16 6.39997V5.86663C16 5.57208 15.7612 5.3333 15.4667 5.3333H13.3333C13.0388 5.3333 12.8 5.57208 12.8 5.86663V6.39997H16ZM7.46667 11.2C7.46667 10.9054 7.22789 10.6666 6.93333 10.6666H4.8C4.50544 10.6666 4.26667 10.9054 4.26667 11.2V13.3333C4.26667 13.6279 4.50544 13.8666 4.8 13.8666H6.93333C7.22789 13.8666 7.46667 13.6279 7.46667 13.3333V11.2Z"
-      />
-      <rect
-        y="7.4668"
-        width="16"
-        height="1.06667"
-        rx="0.533334"
-        className="lensChartIcon__accent"
-      />
-    </g>
-  </svg>
-);
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/index.ts b/src/plugins/chart_expressions/expression_xy/public/icons/index.ts
deleted file mode 100644
index 4ca0b640a3d89..0000000000000
--- a/src/plugins/chart_expressions/expression_xy/public/icons/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-export { BarHorizontalPercentageIcon } from './bar_horizontal_percentage';
-export { BarHorizontalStackedIcon } from './bar_horizontal_stacked';
-export { BarReferenceLineIcon } from './bar_reference_line';
-export { AreaPercentageIcon } from './area_percentage';
-export { BarHorizontalIcon } from './bar_horizontal';
-export { BarPercentageIcon } from './bar_percentage';
-export { AreaStackedIcon } from './area_stacked';
-export { BarStackedIcon } from './bar_stacked';
-export { TriangleIcon } from './triangle';
-export { MixedXyIcon } from './mixed_xy';
-export { CircleIcon } from './circle';
-export { AreaIcon } from './area';
-export { LineIcon } from './line';
-export { BarIcon } from './bar';
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/line.tsx b/src/plugins/chart_expressions/expression_xy/public/icons/line.tsx
deleted file mode 100644
index 6735f58b734ec..0000000000000
--- a/src/plugins/chart_expressions/expression_xy/public/icons/line.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const LineIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M23.434 16.456c.211.553.406.982.58 1.277l.073.119c.038.058.072.105.101.141.52-.04 1.07-.248 2.13-.77l.235-.117C28.198 16.283 28.953 16 30 16v2c-.507 0-.988.146-1.89.571l-1.209.592C25.621 19.78 24.924 20 24 20l-.174-.005c-1.251-.076-1.805-1.036-2.994-4.993L22.93 15c.18.563.335 1.012.505 1.455zM6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.377 0 1.925.863 3.168 4.999L19.07 9a26.766 26.766 0 00-.505-1.457c-.24-.631-.46-1.1-.652-1.395l-.051-.074-.045-.06c-.452.064-.988.375-2.007 1.13l-.691.512-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1z"
-      className="lensChartIcon__subdued"
-    />
-    <path
-      d="M0 21c1.123 0 1.852-.477 3.295-1.885l.758-.75.345-.33C5.208 17.275 5.648 17 6 17c.466 0 .967.252 1.99.997l.891.659.458.325C10.424 19.728 11.093 20 12 20c1.325 0 1.996-.772 3.546-3.444l.593-1.028.385-.646C17.328 13.562 17.796 13 18 13h6c1.333 0 1.978-.795 3.452-3.676l.692-1.37.358-.69C29.333 5.7 29.831 5 30 5V3c-1.333 0-1.978.795-3.452 3.676l-.692 1.37-.358.69C24.667 10.3 24.169 11 24 11h-6c-1.325 0-1.996.772-3.546 3.444l-.593 1.028-.385.646C12.672 17.438 12.204 18 12 18c-.466 0-.967-.252-1.99-.997l-.891-.659-.458-.325C7.576 15.272 6.907 15 6 15c-1.123 0-1.852.477-3.295 1.885l-.758.75-.345.33C.792 18.725.352 19 0 19v2z"
-      className="lensChartIcon__accent"
-    />
-  </svg>
-);
diff --git a/src/plugins/chart_expressions/expression_xy/public/icons/mixed_xy.tsx b/src/plugins/chart_expressions/expression_xy/public/icons/mixed_xy.tsx
deleted file mode 100644
index e16b7f6bed76f..0000000000000
--- a/src/plugins/chart_expressions/expression_xy/public/icons/mixed_xy.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const MixedXyIcon = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M24 16l.186-.002.345-.02.266-.03.334-.058.193-.043.25-.067.223-.07.215-.074.209-.079.305-.124c.166-.07.34-.148.524-.234l.285-.135 1.202-.588c.428-.203.728-.326.966-.396.146-.044.27-.067.384-.076L30 14v7a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-7.994 5.865-7.997L19.032 10l.541 1.205.272.595.29.612c.517 1.069.955 1.842 1.391 2.391.08.1.16.194.241.28.095.101.189.191.283.272l.143.114c.218.164.446.284.69.368.207.071.426.116.662.14l.14.012.154.008L24 16zm6-12v6l-.186.002-.345.02-.266.03-.331.057-.196.044-.25.067-.304.097-.134.047a9.492 9.492 0 00-.386.15l-.128.053c-.166.07-.34.148-.524.234l-.285.135-1.264.618-.352.159-.187.078-.256.095-.178.054a13.872 13.872 0 01-.38-.687l-.16-.311-.233-.47-.016-.472H24c1 0 3-6 6-6z"
-      className="lensChartIcon__accent"
-    />
-    <path
-      d="M30 13c-.507 0-.988.146-1.89.571l-1.209.592C25.621 14.78 24.924 15 24 15c-1.384 0-2.003-.865-3.516-4.206l-.637-1.42-.346-.749-.213-.445C18.572 6.698 18.127 6 18 6c-.466 0-.967.252-1.99.997l-.891.659-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.384 0 2.003.865 3.516 4.206l.637 1.42.346.749.213.445C23.428 12.302 23.873 13 24 13c.507 0 .988-.146 1.89-.571l1.209-.592C28.379 11.22 29.076 11 30 11v2z"
-      className="lensChartIcon__subdued"
-    />
-    <path
-      d="M6 13v7.889C6 21.503 5.552 22 5 22H1c-.552 0-1-.497-1-1.111V13a1 1 0 011-1h4a1 1 0 011 1zm8-1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4a1 1 0 011 1zm8 5v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4a1 1 0 011-1h4a1 1 0 011 1zm8 2v2a1 1 0 01-1 1h-4a1 1 0 01-1-1v-2a1 1 0 011-1h4a1 1 0 011 1z"
-      className="lensChartIcon__subdued"
-    />
-  </svg>
-);
diff --git a/src/plugins/embeddable/public/lib/attribute_service/attribute_service.tsx b/src/plugins/embeddable/public/lib/attribute_service/attribute_service.tsx
index cb93ef13b918d..17a41e841abff 100644
--- a/src/plugins/embeddable/public/lib/attribute_service/attribute_service.tsx
+++ b/src/plugins/embeddable/public/lib/attribute_service/attribute_service.tsx
@@ -45,7 +45,7 @@ export interface AttributeServiceOptions<
     attributes: SavedObjectAttributes,
     savedObjectId?: string
   ) => Promise<{ id?: string } | { error: Error }>;
-  checkForDuplicateTitle: (props: OnSaveProps) => Promise<true>;
+  checkForDuplicateTitle: (props: OnSaveProps) => Promise<boolean>;
   unwrapMethod?: (
     savedObjectId: string
   ) => Promise<AttributeServiceUnwrapResult<SavedObjectAttributes, MetaInfo>>;
diff --git a/x-pack/plugins/fleet/common/services/agent_status.ts b/x-pack/plugins/fleet/common/services/agent_status.ts
index 59ec2b9babd70..7dbfb88192da8 100644
--- a/x-pack/plugins/fleet/common/services/agent_status.ts
+++ b/x-pack/plugins/fleet/common/services/agent_status.ts
@@ -6,11 +6,11 @@
  */
 
 import { AGENT_POLLING_THRESHOLD_MS } from '../constants';
-import type { Agent, AgentStatus } from '../types';
+import type { Agent, AgentStatus, FleetServerAgent } from '../types';
 
 const offlineTimeoutIntervalCount = 10; // 30s*10 = 5m timeout
 
-export function getAgentStatus(agent: Agent): AgentStatus {
+export function getAgentStatus(agent: Agent | FleetServerAgent): AgentStatus {
   const { last_checkin: lastCheckIn } = agent;
 
   if (!agent.active) {
@@ -33,7 +33,15 @@ export function getAgentStatus(agent: Agent): AgentStatus {
   if (agent.last_checkin_status === 'degraded') {
     return 'degraded';
   }
-  if (agent.upgrade_started_at && !agent.upgraded_at) {
+
+  const policyRevision =
+    'policy_revision' in agent
+      ? agent.policy_revision
+      : 'policy_revision_idx' in agent
+      ? agent.policy_revision_idx
+      : undefined;
+
+  if (!policyRevision || (agent.upgrade_started_at && !agent.upgraded_at)) {
     return 'updating';
   }
   if (intervalsSinceLastCheckIn >= offlineTimeoutIntervalCount) {
@@ -76,7 +84,7 @@ export function buildKueryForUpgradingAgents(path: string = '') {
 export function buildKueryForUpdatingAgents(path: string = '') {
   return `(${buildKueryForUpgradingAgents(path)}) or (${buildKueryForEnrollingAgents(
     path
-  )}) or (${buildKueryForUnenrollingAgents(path)})`;
+  )}) or (${buildKueryForUnenrollingAgents(path)}) or (not ${path}policy_revision_idx:*)`;
 }
 
 export function buildKueryForInactiveAgents(path: string = '') {
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
index b87b09c7f58c4..f3023e718eacf 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx
@@ -69,7 +69,7 @@ export const AgentDetailsOverviewSection: React.FunctionComponent<{
               defaultMessage: 'Agent policy',
             }),
             description: agentPolicy ? (
-              <AgentPolicySummaryLine policy={agentPolicy} />
+              <AgentPolicySummaryLine policy={agentPolicy} agent={agent} />
             ) : (
               agent.policy_id || '-'
             ),
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx
index 471c26f89123d..a9e3429732b3c 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx
@@ -449,7 +449,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
 
         return (
           <EuiFlexGroup gutterSize="none" style={{ minWidth: 0 }} direction="column">
-            {agentPolicy && <AgentPolicySummaryLine policy={agentPolicy} />}
+            {agentPolicy && <AgentPolicySummaryLine policy={agentPolicy} agent={agent} />}
             {showWarning && (
               <EuiFlexItem grow={false}>
                 <EuiText color="subdued" size="xs" className="eui-textNoWrap">
diff --git a/x-pack/plugins/fleet/public/components/link_and_revision.test.tsx b/x-pack/plugins/fleet/public/components/link_and_revision.test.tsx
new file mode 100644
index 0000000000000..f2d0a8970cfa3
--- /dev/null
+++ b/x-pack/plugins/fleet/public/components/link_and_revision.test.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import type { TestRenderer } from '../mock';
+import { createFleetTestRendererMock } from '../mock';
+
+import type { AgentPolicy, Agent } from '../types';
+
+import { AgentPolicySummaryLine } from './link_and_revision';
+
+jest.mock('../hooks/use_fleet_status', () => ({
+  FleetStatusProvider: (props: any) => {
+    return props.children;
+  },
+  useFleetStatus: jest.fn().mockReturnValue({}),
+}));
+
+describe('AgentPolicySummaryLine', () => {
+  let testRenderer: TestRenderer;
+
+  const render = (agentPolicy: AgentPolicy, agent?: Agent) =>
+    testRenderer.render(<AgentPolicySummaryLine policy={agentPolicy} agent={agent} />);
+
+  beforeEach(() => {
+    testRenderer = createFleetTestRendererMock();
+  });
+
+  test('it should render policy and revision if no agent is provided', async () => {
+    const results = render({ name: 'test', revision: 2 } as AgentPolicy);
+    expect(results.container.textContent).toBe('testrev. 2');
+  });
+
+  test('it should render policy without revision if the agent do not have revision', async () => {
+    const results = render({ name: 'test', revision: 1 } as AgentPolicy, {} as Agent);
+    expect(results.container.textContent).toBe('test');
+  });
+
+  test('it should render policy with agent revision if an agent is provided', async () => {
+    const results = render(
+      { name: 'test', revision: 2 } as AgentPolicy,
+      { policy_revision: 1 } as Agent
+    );
+    expect(results.container.textContent).toBe('testrev. 1');
+  });
+});
diff --git a/x-pack/plugins/fleet/public/components/link_and_revision.tsx b/x-pack/plugins/fleet/public/components/link_and_revision.tsx
index b56787fbb399c..64d4fa043e160 100644
--- a/x-pack/plugins/fleet/public/components/link_and_revision.tsx
+++ b/x-pack/plugins/fleet/public/components/link_and_revision.tsx
@@ -11,49 +11,54 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import type { CSSProperties } from 'react';
 import React, { memo } from 'react';
 
-import type { AgentPolicy } from '../../common/types';
+import type { AgentPolicy, Agent } from '../../common/types';
 import { useLink } from '../hooks';
 const MIN_WIDTH: CSSProperties = { minWidth: 0 };
 const NO_WRAP_WHITE_SPACE: CSSProperties = { whiteSpace: 'nowrap' };
 
-export const AgentPolicySummaryLine = memo<{ policy: AgentPolicy }>(({ policy }) => {
-  const { getHref } = useLink();
-  const { name, id, revision, is_managed: isManaged } = policy;
-  return (
-    <EuiFlexGroup gutterSize="s" alignItems="baseline" style={MIN_WIDTH} responsive={false}>
-      <EuiFlexItem grow={false} className="eui-textTruncate">
-        <EuiLink
-          className={`eui-textTruncate`}
-          href={getHref('policy_details', { policyId: id })}
-          title={name || id}
-          data-test-subj="agentPolicyNameLink"
-        >
-          {name || id}
-        </EuiLink>
-      </EuiFlexItem>
-      {isManaged && (
-        <EuiIconTip
-          title="Hosted agent policy"
-          content={i18n.translate('xpack.fleet.agentPolicySummaryLine.hostedPolicyTooltip', {
-            defaultMessage:
-              'This policy is managed outside of Fleet. Most actions related to this policy are unavailable.',
-          })}
-          type="lock"
-          size="m"
-          color="subdued"
-        />
-      )}
-      {revision && (
-        <EuiFlexItem grow={true}>
-          <EuiText color="subdued" size="xs" style={NO_WRAP_WHITE_SPACE}>
-            <FormattedMessage
-              id="xpack.fleet.agentPolicySummaryLine.revisionNumber"
-              defaultMessage="rev. {revNumber}"
-              values={{ revNumber: revision }}
-            />
-          </EuiText>
+export const AgentPolicySummaryLine = memo<{ policy: AgentPolicy; agent?: Agent }>(
+  ({ policy, agent }) => {
+    const { getHref } = useLink();
+    const { name, id, is_managed: isManaged } = policy;
+
+    const revision = agent ? agent.policy_revision : policy.revision;
+
+    return (
+      <EuiFlexGroup gutterSize="s" alignItems="baseline" style={MIN_WIDTH} responsive={false}>
+        <EuiFlexItem grow={false} className="eui-textTruncate">
+          <EuiLink
+            className={`eui-textTruncate`}
+            href={getHref('policy_details', { policyId: id })}
+            title={name || id}
+            data-test-subj="agentPolicyNameLink"
+          >
+            {name || id}
+          </EuiLink>
         </EuiFlexItem>
-      )}
-    </EuiFlexGroup>
-  );
-});
+        {isManaged && (
+          <EuiIconTip
+            title="Hosted agent policy"
+            content={i18n.translate('xpack.fleet.agentPolicySummaryLine.hostedPolicyTooltip', {
+              defaultMessage:
+                'This policy is managed outside of Fleet. Most actions related to this policy are unavailable.',
+            })}
+            type="lock"
+            size="m"
+            color="subdued"
+          />
+        )}
+        {revision && (
+          <EuiFlexItem grow={true}>
+            <EuiText color="subdued" size="xs" style={NO_WRAP_WHITE_SPACE}>
+              <FormattedMessage
+                id="xpack.fleet.agentPolicySummaryLine.revisionNumber"
+                defaultMessage="rev. {revNumber}"
+                values={{ revNumber: revision }}
+              />
+            </EuiText>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    );
+  }
+);
diff --git a/x-pack/plugins/fleet/server/services/agents/status.test.ts b/x-pack/plugins/fleet/server/services/agents/status.test.ts
index 8b30edeb5b5f8..7c598bf783c14 100644
--- a/x-pack/plugins/fleet/server/services/agents/status.test.ts
+++ b/x-pack/plugins/fleet/server/services/agents/status.test.ts
@@ -37,6 +37,7 @@ describe('Agent status service', () => {
         _id: 'id',
         _source: {
           active: true,
+          policy_revision_idx: 1,
           last_checkin: new Date().toISOString(),
           local_metadata: {},
           user_provided_metadata: {},
@@ -92,6 +93,7 @@ describe('Agent status service', () => {
         _source: {
           active: true,
           last_checkin: new Date(Date.now() - 10 * AGENT_POLLING_THRESHOLD_MS - 1000).toISOString(),
+          policy_revision_idx: 2,
           local_metadata: {},
           user_provided_metadata: {},
         },
diff --git a/x-pack/plugins/lens/public/app_plugin/app.scss b/x-pack/plugins/lens/public/app_plugin/app.scss
index 58ecce5592937..3aa98ca1640b9 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.scss
+++ b/x-pack/plugins/lens/public/app_plugin/app.scss
@@ -19,25 +19,6 @@
   flex-grow: 1;
 }
 
-.lensChartIcon__subdued {
-  fill: $euiTextSubduedColor;
-
-  .lnsLayerChartSwitch__item-isSelected & {
-    fill: currentColor;
-  }
-}
-
-.lensChartIcon__accent {
-  fill: $euiColorVis0;
-
-  .lnsLayerChartSwitch__item-isSelected & {
-    fill: makeGraphicContrastColor($euiColorVis0, $euiColorDarkShade);
-  }
-}
-.lensAnnotationIconNoFill {
-  fill: none;
-}
-
 .lensAnnotationIconFill {
   fill: $euiColorEmptyShade;
 }
diff --git a/x-pack/plugins/lens/public/app_plugin/app.test.tsx b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
index a2e247cc427c8..03cf38f141f0d 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
@@ -882,8 +882,7 @@ describe('Lens App', () => {
           });
         });
         expect(checkForDuplicateTitle).toHaveBeenCalledWith(
-          expect.objectContaining({ id: '123' }),
-          false,
+          expect.objectContaining({ id: '123', isTitleDuplicateConfirmed: false }),
           onTitleDuplicate,
           expect.anything()
         );
diff --git a/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx b/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
index 6769010d8f721..373d632b2d51e 100644
--- a/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
@@ -251,15 +251,13 @@ export const runSaveLensVisualization = async (
         {
           id: originalSavedObjectId,
           title: docToSave.title,
-          copyOnSave: saveProps.newCopyOnSave,
+          displayName: i18n.translate('xpack.lens.app.saveModalType', {
+            defaultMessage: 'Lens visualization',
+          }),
           lastSavedTitle: lastKnownDoc.title,
-          getEsType: () => 'lens',
-          getDisplayName: () =>
-            i18n.translate('xpack.lens.app.saveModalType', {
-              defaultMessage: 'Lens visualization',
-            }),
+          copyOnSave: saveProps.newCopyOnSave,
+          isTitleDuplicateConfirmed: saveProps.isTitleDuplicateConfirmed,
         },
-        saveProps.isTitleDuplicateConfirmed,
         saveProps.onTitleDuplicate,
         {
           savedObjectsClient,
diff --git a/x-pack/plugins/lens/public/assets/annotation_icons/circle.tsx b/x-pack/plugins/lens/public/assets/annotation_icons/circle.tsx
deleted file mode 100644
index fe19dc7e4c8fc..0000000000000
--- a/x-pack/plugins/lens/public/assets/annotation_icons/circle.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import * as React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-import classnames from 'classnames';
-
-export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    width={16}
-    height={16}
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <circle
-      strokeWidth="1"
-      stroke="currentColor"
-      cx="8"
-      cy="8"
-      className={classnames('lensAnnotationIconNoFill', props.className)}
-      r="7"
-    />
-  </svg>
-);
diff --git a/x-pack/plugins/lens/public/assets/annotation_icons/triangle.tsx b/x-pack/plugins/lens/public/assets/annotation_icons/triangle.tsx
deleted file mode 100644
index 9924c049004cf..0000000000000
--- a/x-pack/plugins/lens/public/assets/annotation_icons/triangle.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import * as React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-import classnames from 'classnames';
-
-export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    width="16"
-    height="16"
-    fill="none"
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      strokeWidth="1"
-      stroke="currentColor"
-      d="M 6.9 11.612 C 7.64533 12.7953 8.39067 12.7953 9.136 11.612 L 13.11 5.3 C 13.8553 4.11667 13.4827 3.525 11.992 3.525 L 4.044 3.525 C 2.55333 3.525 2.18067 4.11667 2.926 5.3 Z"
-      className={classnames('lensAnnotationIconNoFill', props.className)}
-    />
-  </svg>
-);
diff --git a/x-pack/plugins/lens/public/assets/chart_area.tsx b/x-pack/plugins/lens/public/assets/chart_area.tsx
deleted file mode 100644
index 664735205d97e..0000000000000
--- a/x-pack/plugins/lens/public/assets/chart_area.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const LensIconChartArea = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M30 6v15a1 1 0 01-1 1H1a1 1 0 01-1-1v-2c1 0 3.5-4 6-4s5 3 6 3 3.23-6.994 5.865-6.997C20.5 11 23 11 24 11s3-5 6-5z"
-      className="lensChartIcon__accent"
-    />
-    <path
-      d="M6 1c3 0 5 6 6 6s3.5-3 6-3c1.667 0 2.944 2.333 3.833 6.999l.309.001c-1.013 0-2.27 0-3.593.002h-.684C15.231 11.007 13 18 12 18s-3.5-3-6-3-5 4-6 4V7c1-1.5 3-6 6-6z"
-      className="lensChartIcon__subdued"
-    />
-  </svg>
-);
diff --git a/x-pack/plugins/lens/public/assets/chart_bar.tsx b/x-pack/plugins/lens/public/assets/chart_bar.tsx
deleted file mode 100644
index 991c9a6c74ced..0000000000000
--- a/x-pack/plugins/lens/public/assets/chart_bar.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const LensIconChartBar = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M5 7a1 1 0 011 1v13a1 1 0 01-1 1H1a1 1 0 01-1-1V8a1 1 0 011-1h4zm16-7a1 1 0 011 1v20a1 1 0 01-1 1h-4a1 1 0 01-1-1V1a1 1 0 011-1h4z"
-      className="lensChartIcon__subdued"
-    />
-    <path
-      d="M13 11a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4zm16-7a1 1 0 011 1v16a1 1 0 01-1 1h-4a1 1 0 01-1-1V5a1 1 0 011-1h4z"
-      className="lensChartIcon__accent"
-    />
-  </svg>
-);
diff --git a/x-pack/plugins/lens/public/assets/chart_bar_horizontal.tsx b/x-pack/plugins/lens/public/assets/chart_bar_horizontal.tsx
deleted file mode 100644
index dfd25158cc295..0000000000000
--- a/x-pack/plugins/lens/public/assets/chart_bar_horizontal.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const LensIconChartBarHorizontal = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4a1 1 0 011-1h28zM22 0a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h21z"
-      className="lensChartIcon__subdued"
-    />
-    <path
-      d="M0 9a1 1 0 011-1h15a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9z"
-      className="lensChartIcon__accent"
-    />
-  </svg>
-);
diff --git a/x-pack/plugins/lens/public/assets/chart_bar_horizontal_percentage.tsx b/x-pack/plugins/lens/public/assets/chart_bar_horizontal_percentage.tsx
deleted file mode 100644
index a3c79991f2aff..0000000000000
--- a/x-pack/plugins/lens/public/assets/chart_bar_horizontal_percentage.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const LensIconChartBarHorizontalPercentage = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M20 16v6H1a1 1 0 01-1-1v-4a1 1 0 011-1h19zm-3-8v6H1.222C.547 14 0 13.552 0 13V9c0-.552.547-1 1.222-1H17zm1-8v6H1.042C.466 6 0 5.552 0 5V1c0-.552.466-1 1.042-1H18z"
-      className="lensChartIcon__subdued"
-    />
-    <path
-      d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1h-7v-6h7zm-.222-8C29.453 8 30 8.448 30 9v4c0 .552-.547 1-1.222 1H19V8h9.778zm.18-8C29.534 0 30 .448 30 1v4c0 .552-.466 1-1.042 1H20V0h8.958z"
-      className="lensChartIcon__accent"
-    />
-  </svg>
-);
diff --git a/x-pack/plugins/lens/public/assets/chart_bar_horizontal_stacked.tsx b/x-pack/plugins/lens/public/assets/chart_bar_horizontal_stacked.tsx
deleted file mode 100644
index d6abbaa37aaa0..0000000000000
--- a/x-pack/plugins/lens/public/assets/chart_bar_horizontal_stacked.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const LensIconChartBarHorizontalStacked = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M18 16v6H1a1 1 0 01-1-1v-4a1 1 0 011-1h17zm-3-8v6H1.222C.547 14 0 13.552 0 13V9c0-.552.547-1 1.222-1H15zm1-8v6H1.042C.466 6 0 5.552 0 5V1c0-.552.466-1 1.042-1H16z"
-      className="lensChartIcon__subdued"
-    />
-    <path
-      d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1h-9v-6h9zm-9.222-8C20.453 8 21 8.448 21 9v4c0 .552-.547 1-1.222 1H17V8h2.778zm3.18-8C23.534 0 24 .448 24 1v4c0 .552-.466 1-1.042 1H18V0h4.958z"
-      className="lensChartIcon__accent"
-    />
-  </svg>
-);
diff --git a/x-pack/plugins/lens/public/assets/chart_bar_percentage.tsx b/x-pack/plugins/lens/public/assets/chart_bar_percentage.tsx
deleted file mode 100644
index c297ee831f27c..0000000000000
--- a/x-pack/plugins/lens/public/assets/chart_bar_percentage.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const LensIconChartBarPercentage = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      d="M6 13v8a1 1 0 01-1 1H1a1 1 0 01-1-1v-8h6zm8-4v12a1 1 0 01-1 1H9a1 1 0 01-1-1V9h6zm8 4v8a1 1 0 01-1 1h-4a1 1 0 01-1-1v-8h6zm8 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7h6z"
-      className="lensChartIcon__subdued"
-    />
-    <path
-      d="M29 0a1 1 0 011 1v11h-6V1a1 1 0 011-1h4zM5 0a1 1 0 011 1v10H0V1a1 1 0 011-1h4zm16 0a1 1 0 011 1v10h-6V1a1 1 0 011-1h4zm-8 0a1 1 0 011 1v6H8V1a1 1 0 011-1h4z"
-      className="lensChartIcon__accent"
-    />
-  </svg>
-);
diff --git a/x-pack/plugins/lens/public/assets/chart_bar_stacked.tsx b/x-pack/plugins/lens/public/assets/chart_bar_stacked.tsx
deleted file mode 100644
index c5775ce4bf859..0000000000000
--- a/x-pack/plugins/lens/public/assets/chart_bar_stacked.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { EuiIconProps } from '@elastic/eui';
-
-export const LensIconChartBarStacked = ({
-  title,
-  titleId,
-  ...props
-}: Omit<EuiIconProps, 'type'>) => (
-  <svg
-    viewBox="0 0 30 22"
-    width={30}
-    height={22}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      className="lensChartIcon__subdued"
-      d="M6 13v8a1 1 0 01-1 1H1a1 1 0 01-1-1v-8h6zm8-4v12a1 1 0 01-1 1H9a1 1 0 01-1-1V9h6zm8 4v8a1 1 0 01-1 1h-4a1 1 0 01-1-1v-8h6zm8 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7h6z"
-    />
-    <path
-      d="M29 1a1 1 0 011 1v10h-6V2a1 1 0 011-1h4zM5 7a1 1 0 011 1v3H0V8a1 1 0 011-1h4zm16-4a1 1 0 011 1v7h-6V4a1 1 0 011-1h4zm-8-3a1 1 0 011 1v6H8V1a1 1 0 011-1h4z"
-      className="lensChartIcon__accent"
-    />
-  </svg>
-);
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
index 7eff9a5961e83..7f0034ad73366 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
@@ -19,7 +19,7 @@ import { ReactExpressionRendererType } from '@kbn/expressions-plugin/public';
 import { SuggestionPanel, SuggestionPanelProps, SuggestionPanelWrapper } from './suggestion_panel';
 import { getSuggestions } from './suggestion_helpers';
 import { EuiIcon, EuiPanel, EuiToolTip, EuiAccordion } from '@elastic/eui';
-import { LensIconChartDatatable } from '../../assets/chart_datatable';
+import { IconChartDatatable } from '@kbn/chart-icons';
 import { mountWithProvider } from '../../mocks';
 import {
   applyChanges,
@@ -286,7 +286,7 @@ describe('suggestion_panel', () => {
     getSuggestionsMock.mockReturnValue([
       {
         datasourceState: {},
-        previewIcon: LensIconChartDatatable,
+        previewIcon: IconChartDatatable,
         score: 0.5,
         visualizationState: suggestion1State,
         visualizationId: 'testVis',
@@ -317,7 +317,7 @@ describe('suggestion_panel', () => {
 
     expect(instance.find(SELECTORS.SUGGESTIONS_PANEL).find(EuiIcon)).toHaveLength(1);
     expect(instance.find(SELECTORS.SUGGESTIONS_PANEL).find(EuiIcon).prop('type')).toEqual(
-      LensIconChartDatatable
+      IconChartDatatable
     );
   });
 
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx
index 8f32ff75c51f0..1d575d9809ad4 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx
@@ -10,9 +10,9 @@ import { EuiPageContentBody, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { UiActionsStart, VISUALIZE_GEO_FIELD_TRIGGER } from '@kbn/ui-actions-plugin/public';
+import { GlobeIllustration } from '@kbn/chart-icons';
 import { getVisualizeGeoFieldMessage } from '../../../utils';
 import { DragDrop } from '../../../drag_drop';
-import { GlobeIllustration } from '../../../assets/globe_illustration';
 import { APP_ID } from '../../../../common/constants';
 import './geo_field_workspace_panel.scss';
 
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
index 8ab88da685cf0..07e5b0a3e8c1f 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -35,6 +35,7 @@ import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
 import type { DefaultInspectorAdapters } from '@kbn/expressions-plugin/common';
 import type { Datatable } from '@kbn/expressions-plugin/public';
+import { DropIllustration } from '@kbn/chart-icons';
 import { trackUiCounterEvents } from '../../../lens_ui_telemetry';
 import {
   FramePublicAPI,
@@ -51,7 +52,6 @@ import { DragDrop, DragContext, DragDropIdentifier } from '../../../drag_drop';
 import { switchToSuggestion } from '../suggestion_helpers';
 import { buildExpression } from '../expression_helpers';
 import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
-import { DropIllustration } from '../../../assets/drop_illustration';
 import applyChangesIllustrationDark from '../../../assets/render_dark@2x.png';
 import applyChangesIllustrationLight from '../../../assets/render_light@2x.png';
 import {
diff --git a/x-pack/plugins/lens/public/lens_attribute_service.ts b/x-pack/plugins/lens/public/lens_attribute_service.ts
index 6181fbf22ab26..7fe4065ede66d 100644
--- a/x-pack/plugins/lens/public/lens_attribute_service.ts
+++ b/x-pack/plugins/lens/public/lens_attribute_service.ts
@@ -80,12 +80,11 @@ export function getLensAttributeService(
       return checkForDuplicateTitle(
         {
           title: props.newTitle,
-          copyOnSave: false,
+          displayName: DOC_TYPE,
+          isTitleDuplicateConfirmed: props.isTitleDuplicateConfirmed,
           lastSavedTitle: '',
-          getEsType: () => DOC_TYPE,
-          getDisplayName: () => DOC_TYPE,
+          copyOnSave: false,
         },
-        props.isTitleDuplicateConfirmed,
         props.onTitleDuplicate,
         {
           savedObjectsClient,
diff --git a/x-pack/plugins/lens/public/persistence/saved_objects_utils/check_for_duplicate_title.ts b/x-pack/plugins/lens/public/persistence/saved_objects_utils/check_for_duplicate_title.ts
index 8d6ca5c3b7640..c04db1f39ac61 100644
--- a/x-pack/plugins/lens/public/persistence/saved_objects_utils/check_for_duplicate_title.ts
+++ b/x-pack/plugins/lens/public/persistence/saved_objects_utils/check_for_duplicate_title.ts
@@ -6,26 +6,24 @@
  */
 
 import type { OverlayStart, SavedObjectsClientContract } from '@kbn/core/public';
-import type { SavedObject } from '@kbn/saved-objects-plugin/public';
+import { DOC_TYPE } from '../../../common';
 import { SAVE_DUPLICATE_REJECTED } from './constants';
 import { findObjectByTitle } from './find_object_by_title';
 import { displayDuplicateTitleConfirmModal } from './display_duplicate_title_confirm_modal';
+import type { ConfirmModalSavedObjectMeta } from './types';
 
 /**
- * check for an existing SavedObject with the same title in ES
+ * check for an existing saved object with the same title in ES
  * returns Promise<true> when it's no duplicate, or the modal displaying the warning
  * that's there's a duplicate is confirmed, else it returns a rejected Promise<ErrorMsg>
  */
 export async function checkForDuplicateTitle(
-  savedObject: Pick<
-    SavedObject,
-    'id' | 'title' | 'getDisplayName' | 'lastSavedTitle' | 'copyOnSave' | 'getEsType'
-  >,
-  isTitleDuplicateConfirmed: boolean,
+  savedObjectMeta: ConfirmModalSavedObjectMeta,
   onTitleDuplicate: (() => void) | undefined,
   services: { savedObjectsClient: SavedObjectsClientContract; overlays: OverlayStart }
-): Promise<true> {
+): Promise<boolean> {
   const { savedObjectsClient, overlays } = services;
+  const { id, title, isTitleDuplicateConfirmed, lastSavedTitle, copyOnSave } = savedObjectMeta;
 
   // Don't check for duplicates if user has already confirmed save with duplicate title
   if (isTitleDuplicateConfirmed) {
@@ -34,17 +32,13 @@ export async function checkForDuplicateTitle(
 
   // Don't check if the user isn't updating the title, otherwise that would become very annoying to have
   // to confirm the save every time, except when copyOnSave is true, then we do want to check.
-  if (savedObject.title === savedObject.lastSavedTitle && !savedObject.copyOnSave) {
+  if (title === lastSavedTitle && !copyOnSave) {
     return true;
   }
 
-  const duplicate = await findObjectByTitle(
-    savedObjectsClient,
-    savedObject.getEsType(),
-    savedObject.title
-  );
+  const duplicate = await findObjectByTitle(savedObjectsClient, DOC_TYPE, title);
 
-  if (!duplicate || duplicate.id === savedObject.id) {
+  if (!duplicate || duplicate.id === id) {
     return true;
   }
 
@@ -55,5 +49,5 @@ export async function checkForDuplicateTitle(
 
   // TODO: make onTitleDuplicate a required prop and remove UI components from this class
   // Need to leave here until all users pass onTitleDuplicate.
-  return displayDuplicateTitleConfirmModal(savedObject, overlays);
+  return displayDuplicateTitleConfirmModal(savedObjectMeta, overlays);
 }
diff --git a/x-pack/plugins/lens/public/persistence/saved_objects_utils/confirm_modal_promise.tsx b/x-pack/plugins/lens/public/persistence/saved_objects_utils/confirm_modal_promise.tsx
index c788660eea647..9b24a2be54ce2 100644
--- a/x-pack/plugins/lens/public/persistence/saved_objects_utils/confirm_modal_promise.tsx
+++ b/x-pack/plugins/lens/public/persistence/saved_objects_utils/confirm_modal_promise.tsx
@@ -16,7 +16,7 @@ export function confirmModalPromise(
   title = '',
   confirmBtnText = '',
   overlays: OverlayStart
-): Promise<true> {
+): Promise<boolean> {
   return new Promise((resolve, reject) => {
     const cancelButtonText = i18n.translate('xpack.lens.confirmModal.cancelButtonLabel', {
       defaultMessage: 'Cancel',
diff --git a/x-pack/plugins/lens/public/persistence/saved_objects_utils/display_duplicate_title_confirm_modal.ts b/x-pack/plugins/lens/public/persistence/saved_objects_utils/display_duplicate_title_confirm_modal.ts
index 6c5a94c8c3216..e0c61d202da72 100644
--- a/x-pack/plugins/lens/public/persistence/saved_objects_utils/display_duplicate_title_confirm_modal.ts
+++ b/x-pack/plugins/lens/public/persistence/saved_objects_utils/display_duplicate_title_confirm_modal.ts
@@ -7,25 +7,25 @@
 
 import { i18n } from '@kbn/i18n';
 import type { OverlayStart } from '@kbn/core/public';
-import type { SavedObject } from '@kbn/saved-objects-plugin/public';
+import type { ConfirmModalSavedObjectMeta } from './types';
 import { SAVE_DUPLICATE_REJECTED } from './constants';
 import { confirmModalPromise } from './confirm_modal_promise';
 
 export function displayDuplicateTitleConfirmModal(
-  savedObject: Pick<SavedObject, 'title' | 'getDisplayName'>,
+  { title, displayName }: ConfirmModalSavedObjectMeta,
   overlays: OverlayStart
-): Promise<true> {
+): Promise<boolean> {
   const confirmMessage = i18n.translate(
     'xpack.lens.confirmModal.saveDuplicateConfirmationMessage',
     {
       defaultMessage: `A {name} with the title '{title}' already exists. Would you like to save anyway?`,
-      values: { title: savedObject.title, name: savedObject.getDisplayName() },
+      values: { title, name: displayName },
     }
   );
 
   const confirmButtonText = i18n.translate('xpack.lens.confirmModal.saveDuplicateButtonLabel', {
     defaultMessage: 'Save {name}',
-    values: { name: savedObject.getDisplayName() },
+    values: { name: displayName },
   });
   try {
     return confirmModalPromise(confirmMessage, '', confirmButtonText, overlays);
diff --git a/x-pack/plugins/lens/public/persistence/saved_objects_utils/find_object_by_title.test.ts b/x-pack/plugins/lens/public/persistence/saved_objects_utils/find_object_by_title.test.ts
index 0d117220b895b..0e71b30b042e5 100644
--- a/x-pack/plugins/lens/public/persistence/saved_objects_utils/find_object_by_title.test.ts
+++ b/x-pack/plugins/lens/public/persistence/saved_objects_utils/find_object_by_title.test.ts
@@ -6,7 +6,7 @@
  */
 
 import { findObjectByTitle } from './find_object_by_title';
-import { SavedObjectsClientContract, SavedObject } from '@kbn/core/public';
+import { SavedObjectsClientContract, SimpleSavedObject } from '@kbn/core/public';
 import { simpleSavedObjectMock } from '@kbn/core/public/mocks';
 
 describe('findObjectByTitle', () => {
@@ -24,7 +24,8 @@ describe('findObjectByTitle', () => {
   it('matches any case', async () => {
     const indexPattern = simpleSavedObjectMock.create(savedObjectsClient, {
       attributes: { title: 'foo' },
-    } as SavedObject);
+    } as SimpleSavedObject);
+
     savedObjectsClient.find = jest.fn().mockImplementation(() =>
       Promise.resolve({
         savedObjects: [indexPattern],
diff --git a/x-pack/plugins/lens/public/persistence/saved_objects_utils/types.ts b/x-pack/plugins/lens/public/persistence/saved_objects_utils/types.ts
new file mode 100644
index 0000000000000..49772c2db90a2
--- /dev/null
+++ b/x-pack/plugins/lens/public/persistence/saved_objects_utils/types.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/** @internal */
+export interface ConfirmModalSavedObjectMeta {
+  id?: string;
+  title: string;
+  displayName: string;
+  lastSavedTitle: string;
+  copyOnSave: boolean;
+  isTitleDuplicateConfirmed: boolean;
+}
diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
index 9d806b79f8311..dbb3d69588624 100644
--- a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
+++ b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
@@ -9,7 +9,7 @@ import './toolbar_popover.scss';
 import React, { useState } from 'react';
 import { EuiFlexItem, EuiPopover, EuiIcon, EuiPopoverTitle, IconType } from '@elastic/eui';
 import { ToolbarButton, ToolbarButtonProps } from '@kbn/kibana-react-plugin/public';
-import { EuiIconLegend } from '../assets/legend';
+import { EuiIconLegend } from '@kbn/chart-icons';
 
 const typeToIconMap: { [type: string]: string | IconType } = {
   legend: EuiIconLegend as IconType,
diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx
index e40b7b0c079ec..c1986b9ff7ef5 100644
--- a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx
+++ b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx
@@ -14,7 +14,7 @@ import { IAggType } from '@kbn/data-plugin/public';
 import { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
 import { VisualizationContainer } from '../../../visualization_container';
 import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
-import { LensIconChartDatatable } from '../../../assets/chart_datatable';
+import { IconChartDatatable } from '@kbn/chart-icons';
 import { DataContext, DatatableComponent } from './table_basic';
 import { DatatableProps } from '../../../../common/expressions';
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
@@ -369,7 +369,7 @@ describe('DatatableComponent', () => {
       />
     );
     expect(component.find(VisualizationContainer)).toHaveLength(1);
-    expect(component.find(EmptyPlaceholder).prop('icon')).toEqual(LensIconChartDatatable);
+    expect(component.find(EmptyPlaceholder).prop('icon')).toEqual(IconChartDatatable);
   });
 
   test('it renders the table with the given sorting', () => {
diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx
index 0262d3d7cab40..fe0a7da701f2a 100644
--- a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx
+++ b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx
@@ -29,12 +29,12 @@ import {
 } from '@elastic/eui';
 import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
 import { ClickTriggerEvent } from '@kbn/charts-plugin/public';
+import { IconChartDatatable } from '@kbn/chart-icons';
 import type { LensTableRowContextMenuEvent } from '../../../types';
 import type { FormatFactory } from '../../../../common';
 import type { LensGridDirection } from '../../../../common/expressions';
 import { VisualizationContainer } from '../../../visualization_container';
 import { findMinMaxByColumnId } from '../../../shared_components';
-import { LensIconChartDatatable } from '../../../assets/chart_datatable';
 import type {
   DataContextType,
   DatatableRenderProps,
@@ -413,7 +413,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
   if (isEmpty) {
     return (
       <VisualizationContainer className="lnsDataTableContainer">
-        <EmptyPlaceholder icon={LensIconChartDatatable} />
+        <EmptyPlaceholder icon={IconChartDatatable} />
       </VisualizationContainer>
     );
   }
diff --git a/x-pack/plugins/lens/public/visualizations/datatable/visualization.tsx b/x-pack/plugins/lens/public/visualizations/datatable/visualization.tsx
index 36be3492680ea..8b9f2fe4bc4ed 100644
--- a/x-pack/plugins/lens/public/visualizations/datatable/visualization.tsx
+++ b/x-pack/plugins/lens/public/visualizations/datatable/visualization.tsx
@@ -14,13 +14,13 @@ import { PaletteRegistry, CUSTOM_PALETTE } from '@kbn/coloring';
 import { ThemeServiceStart } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
+import { IconChartDatatable } from '@kbn/chart-icons';
 import type {
   SuggestionRequest,
   Visualization,
   VisualizationSuggestion,
   DatasourceLayers,
 } from '../../types';
-import { LensIconChartDatatable } from '../../assets/chart_datatable';
 import { TableDimensionEditor } from './components/dimension_editor';
 import { TableDimensionEditorAdditionalSection } from './components/dimension_editor_addtional_section';
 import { LayerType, layerTypes } from '../../../common';
@@ -56,7 +56,7 @@ export const getDatatableVisualization = ({
   visualizationTypes: [
     {
       id: 'lnsDatatable',
-      icon: LensIconChartDatatable,
+      icon: IconChartDatatable,
       label: visualizationLabel,
       groupLabel: i18n.translate('xpack.lens.datatable.groupLabel', {
         defaultMessage: 'Tabular',
@@ -82,7 +82,7 @@ export const getDatatableVisualization = ({
 
   getDescription() {
     return {
-      icon: LensIconChartDatatable,
+      icon: IconChartDatatable,
       label: visualizationLabel,
     };
   },
@@ -164,7 +164,7 @@ export const getDatatableVisualization = ({
             columnId: col.columnId,
           })),
         },
-        previewIcon: LensIconChartDatatable,
+        previewIcon: IconChartDatatable,
         // tables are hidden from suggestion bar, but used for drag & drop and chart switching
         hide: true,
       },
diff --git a/x-pack/plugins/lens/public/visualizations/gauge/visualization.tsx b/x-pack/plugins/lens/public/visualizations/gauge/visualization.tsx
index a531181a2cba5..8c35a44242955 100644
--- a/x-pack/plugins/lens/public/visualizations/gauge/visualization.tsx
+++ b/x-pack/plugins/lens/public/visualizations/gauge/visualization.tsx
@@ -21,9 +21,8 @@ import {
   getMaxValue,
   getMinValue,
   getValueFromAccessor,
-  VerticalBulletIcon,
-  HorizontalBulletIcon,
 } from '@kbn/expression-gauge-plugin/public';
+import { IconChartHorizontalBullet, IconChartVerticalBullet } from '@kbn/chart-icons';
 import type { DatasourceLayers, OperationMetadata, Visualization } from '../../types';
 import { getSuggestions } from './suggestions';
 import {
@@ -56,14 +55,14 @@ export const isNumericDynamicMetric = (op: OperationMetadata) =>
 
 export const CHART_NAMES = {
   horizontalBullet: {
-    icon: HorizontalBulletIcon,
+    icon: IconChartHorizontalBullet,
     label: i18n.translate('xpack.lens.gaugeHorizontal.gaugeLabel', {
       defaultMessage: 'Gauge horizontal',
     }),
     groupLabel: groupLabelForGauge,
   },
   verticalBullet: {
-    icon: VerticalBulletIcon,
+    icon: IconChartVerticalBullet,
     label: i18n.translate('xpack.lens.gaugeVertical.gaugeLabel', {
       defaultMessage: 'Gauge vertical',
     }),
diff --git a/x-pack/plugins/lens/public/visualizations/heatmap/constants.ts b/x-pack/plugins/lens/public/visualizations/heatmap/constants.ts
index 270d45ce3cec5..51e674048e873 100644
--- a/x-pack/plugins/lens/public/visualizations/heatmap/constants.ts
+++ b/x-pack/plugins/lens/public/visualizations/heatmap/constants.ts
@@ -6,7 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { HeatmapIcon } from '@kbn/expression-heatmap-plugin/public';
+import { IconChartHeatmap } from '@kbn/chart-icons';
 
 export const LENS_HEATMAP_RENDERER = 'lens_heatmap_renderer';
 
@@ -24,7 +24,7 @@ export const CHART_SHAPES = {
 export const CHART_NAMES = {
   heatmap: {
     shapeType: CHART_SHAPES.HEATMAP,
-    icon: HeatmapIcon,
+    icon: IconChartHeatmap,
     label: i18n.translate('xpack.lens.heatmap.heatmapLabel', {
       defaultMessage: 'Heat map',
     }),
diff --git a/x-pack/plugins/lens/public/visualizations/heatmap/toolbar_component.tsx b/x-pack/plugins/lens/public/visualizations/heatmap/toolbar_component.tsx
index b0a80ca297a0a..d14bf621df08e 100644
--- a/x-pack/plugins/lens/public/visualizations/heatmap/toolbar_component.tsx
+++ b/x-pack/plugins/lens/public/visualizations/heatmap/toolbar_component.tsx
@@ -10,6 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
 import { Position } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { LegendSize } from '@kbn/visualizations-plugin/public';
+import { EuiIconAxisLeft, EuiIconAxisBottom } from '@kbn/chart-icons';
 import type { VisualizationToolbarProps } from '../../types';
 import {
   LegendSettingsPopover,
@@ -18,8 +19,6 @@ import {
   AxisTitleSettings,
   TooltipWrapper,
 } from '../../shared_components';
-import { EuiIconAxisLeft } from '../../assets/axis_left';
-import { EuiIconAxisBottom } from '../../assets/axis_bottom';
 import type { HeatmapVisualizationState } from './types';
 import { getDefaultVisualValuesForLayer } from '../../shared_components/datasource_default_values';
 import './toolbar_component.scss';
diff --git a/x-pack/plugins/lens/public/visualizations/heatmap/visualization.tsx b/x-pack/plugins/lens/public/visualizations/heatmap/visualization.tsx
index 2f08a31151401..09548df0a67e4 100644
--- a/x-pack/plugins/lens/public/visualizations/heatmap/visualization.tsx
+++ b/x-pack/plugins/lens/public/visualizations/heatmap/visualization.tsx
@@ -11,11 +11,11 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
 import { Ast } from '@kbn/interpreter';
 import { Position } from '@elastic/charts';
+import { IconChartHeatmap } from '@kbn/chart-icons';
 import { CUSTOM_PALETTE, PaletteRegistry, CustomPaletteParams } from '@kbn/coloring';
 import { ThemeServiceStart } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
-import { HeatmapIcon } from '@kbn/expression-heatmap-plugin/public';
 import type { OperationMetadata, Visualization } from '../../types';
 import type { HeatmapVisualizationState } from './types';
 import { getSuggestions } from './suggestions';
@@ -105,7 +105,7 @@ export const getHeatmapVisualization = ({
   visualizationTypes: [
     {
       id: 'heatmap',
-      icon: HeatmapIcon,
+      icon: IconChartHeatmap,
       label: i18n.translate('xpack.lens.heatmapVisualization.heatmapLabel', {
         defaultMessage: 'Heat map',
       }),
diff --git a/x-pack/plugins/lens/public/visualizations/legacy_metric/metric_suggestions.ts b/x-pack/plugins/lens/public/visualizations/legacy_metric/metric_suggestions.ts
index 32a5831618251..6fa35a8a17821 100644
--- a/x-pack/plugins/lens/public/visualizations/legacy_metric/metric_suggestions.ts
+++ b/x-pack/plugins/lens/public/visualizations/legacy_metric/metric_suggestions.ts
@@ -5,10 +5,10 @@
  * 2.0.
  */
 
+import { IconChartMetric } from '@kbn/chart-icons';
 import { SuggestionRequest, VisualizationSuggestion, TableSuggestion } from '../../types';
 import type { MetricState } from '../../../common/types';
 import { layerTypes } from '../../../common';
-import { LensIconChartMetric } from '../../assets/chart_metric';
 import { legacyMetricSupportedTypes } from './visualization';
 
 /**
@@ -49,7 +49,7 @@ function getSuggestion(table: TableSuggestion): VisualizationSuggestion<MetricSt
   return {
     title,
     score: 0.1,
-    previewIcon: LensIconChartMetric,
+    previewIcon: IconChartMetric,
     state: {
       layerId: table.layerId,
       accessor: col.columnId,
diff --git a/x-pack/plugins/lens/public/visualizations/legacy_metric/visualization.tsx b/x-pack/plugins/lens/public/visualizations/legacy_metric/visualization.tsx
index 5550341a81e8b..361dc066bebf6 100644
--- a/x-pack/plugins/lens/public/visualizations/legacy_metric/visualization.tsx
+++ b/x-pack/plugins/lens/public/visualizations/legacy_metric/visualization.tsx
@@ -14,8 +14,8 @@ import { ThemeServiceStart } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { ColorMode, CustomPaletteState } from '@kbn/charts-plugin/common';
 import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
+import { IconChartMetric } from '@kbn/chart-icons';
 import { getSuggestions } from './metric_suggestions';
-import { LensIconChartMetric } from '../../assets/chart_metric';
 import { Visualization, OperationMetadata, DatasourceLayers } from '../../types';
 import type { MetricState } from '../../../common/types';
 import { layerTypes } from '../../../common';
@@ -181,7 +181,7 @@ export const getLegacyMetricVisualization = ({
   visualizationTypes: [
     {
       id: 'lnsMetric',
-      icon: LensIconChartMetric,
+      icon: IconChartMetric,
       label: i18n.translate('xpack.lens.legacyMetric.label', {
         defaultMessage: 'Legacy Metric',
       }),
@@ -208,7 +208,7 @@ export const getLegacyMetricVisualization = ({
 
   getDescription() {
     return {
-      icon: LensIconChartMetric,
+      icon: IconChartMetric,
       label: i18n.translate('xpack.lens.legacyMetric.label', {
         defaultMessage: 'Legacy Metric',
       }),
diff --git a/x-pack/plugins/lens/public/visualizations/metric/suggestions.test.ts b/x-pack/plugins/lens/public/visualizations/metric/suggestions.test.ts
index 6276e6d3b9b77..47229650e05f7 100644
--- a/x-pack/plugins/lens/public/visualizations/metric/suggestions.test.ts
+++ b/x-pack/plugins/lens/public/visualizations/metric/suggestions.test.ts
@@ -8,7 +8,7 @@
 import { getSuggestions } from './suggestions';
 import { layerTypes } from '../../../common';
 import { MetricVisualizationState } from './visualization';
-import { LensIconChartMetric } from '../../assets/chart_metric';
+import { IconChartMetric } from '@kbn/chart-icons';
 
 const metricColumn = {
   columnId: 'metric-column',
@@ -152,7 +152,7 @@ describe('metric suggestions', () => {
             },
             title: 'Metric',
             hide: true,
-            previewIcon: LensIconChartMetric,
+            previewIcon: IconChartMetric,
             score: 0.51,
           },
         ]);
@@ -182,7 +182,7 @@ describe('metric suggestions', () => {
             },
             title: 'Metric',
             hide: true,
-            previewIcon: LensIconChartMetric,
+            previewIcon: IconChartMetric,
             score: 0.51,
           },
         ]);
@@ -214,7 +214,7 @@ describe('metric suggestions', () => {
             },
             title: 'Metric',
             hide: true,
-            previewIcon: LensIconChartMetric,
+            previewIcon: IconChartMetric,
             score: 0.51,
           },
         ]);
@@ -287,7 +287,7 @@ describe('metric suggestions', () => {
             },
             title: 'Metric',
             hide: true,
-            previewIcon: LensIconChartMetric,
+            previewIcon: IconChartMetric,
             score: 0.52,
           },
         ]);
@@ -319,7 +319,7 @@ describe('metric suggestions', () => {
             },
             title: 'Metric',
             hide: true,
-            previewIcon: LensIconChartMetric,
+            previewIcon: IconChartMetric,
             score: 0.52,
           },
         ]);
@@ -350,7 +350,7 @@ describe('metric suggestions', () => {
           },
           title: 'Metric',
           hide: true,
-          previewIcon: LensIconChartMetric,
+          previewIcon: IconChartMetric,
           score: 0.52,
         },
       ]);
diff --git a/x-pack/plugins/lens/public/visualizations/metric/suggestions.ts b/x-pack/plugins/lens/public/visualizations/metric/suggestions.ts
index cdb11812bc4b8..ae40bf83574f4 100644
--- a/x-pack/plugins/lens/public/visualizations/metric/suggestions.ts
+++ b/x-pack/plugins/lens/public/visualizations/metric/suggestions.ts
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
+import { IconChartMetric } from '@kbn/chart-icons';
 import type { TableSuggestion, Visualization } from '../../types';
-import { LensIconChartMetric } from '../../assets/chart_metric';
 import { layerTypes } from '../../../common';
 import { metricLabel, MetricVisualizationState, supportedDataTypes } from './visualization';
 
@@ -59,7 +59,7 @@ export const getSuggestions: Visualization<MetricVisualizationState>['getSuggest
       layerType: layerTypes.DATA,
     },
     title: metricLabel,
-    previewIcon: LensIconChartMetric,
+    previewIcon: IconChartMetric,
     score: 0.5,
     // don't show suggestions since we're in tech preview
     hide: true,
diff --git a/x-pack/plugins/lens/public/visualizations/metric/visualization.tsx b/x-pack/plugins/lens/public/visualizations/metric/visualization.tsx
index 8651d4b76e95b..596d2596dd5d8 100644
--- a/x-pack/plugins/lens/public/visualizations/metric/visualization.tsx
+++ b/x-pack/plugins/lens/public/visualizations/metric/visualization.tsx
@@ -16,9 +16,9 @@ import { VIS_EVENT_TO_TRIGGER } from '@kbn/visualizations-plugin/public';
 import { LayoutDirection } from '@elastic/charts';
 import { euiLightVars, euiThemeVars } from '@kbn/ui-theme';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { IconChartMetric } from '@kbn/chart-icons';
 import { LayerType } from '../../../common';
 import { getSuggestions } from './suggestions';
-import { LensIconChartMetric } from '../../assets/chart_metric';
 import { Visualization, OperationMetadata, DatasourceLayers, AccessorConfig } from '../../types';
 import { layerTypes } from '../../../common';
 import { GROUP_ID, LENS_METRIC_ID } from './constants';
@@ -166,7 +166,7 @@ export const getMetricVisualization = ({
   visualizationTypes: [
     {
       id: LENS_METRIC_ID,
-      icon: LensIconChartMetric,
+      icon: IconChartMetric,
       label: metricLabel,
       groupLabel: metricGroupLabel,
       showExperimentalBadge: true,
@@ -197,7 +197,7 @@ export const getMetricVisualization = ({
 
   getDescription() {
     return {
-      icon: LensIconChartMetric,
+      icon: IconChartMetric,
       label: metricLabel,
     };
   },
diff --git a/x-pack/plugins/lens/public/visualizations/partition/partition_charts_meta.ts b/x-pack/plugins/lens/public/visualizations/partition/partition_charts_meta.ts
index 6d948ce4332fc..888fe7853b27b 100644
--- a/x-pack/plugins/lens/public/visualizations/partition/partition_charts_meta.ts
+++ b/x-pack/plugins/lens/public/visualizations/partition/partition_charts_meta.ts
@@ -9,11 +9,13 @@ import { i18n } from '@kbn/i18n';
 import type { EuiIconProps } from '@elastic/eui';
 
 import type { DatatableColumn } from '@kbn/expressions-plugin/common';
-import { LensIconChartDonut } from '../../assets/chart_donut';
-import { LensIconChartPie } from '../../assets/chart_pie';
-import { LensIconChartTreemap } from '../../assets/chart_treemap';
-import { LensIconChartMosaic } from '../../assets/chart_mosaic';
-import { LensIconChartWaffle } from '../../assets/chart_waffle';
+import {
+  IconChartDonut,
+  IconChartPie,
+  IconChartTreemap,
+  IconChartMosaic,
+  IconChartWaffle,
+} from '@kbn/chart-icons';
 import {
   CategoryDisplay,
   NumberDisplay,
@@ -140,7 +142,7 @@ const emptySizeRatioOptions: PartitionChartMeta['toolbarPopover']['emptySizeRati
 
 export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
   donut: {
-    icon: LensIconChartDonut,
+    icon: IconChartDonut,
     label: i18n.translate('xpack.lens.pie.donutLabel', {
       defaultMessage: 'Donut',
     }),
@@ -156,7 +158,7 @@ export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
     },
   },
   pie: {
-    icon: LensIconChartPie,
+    icon: IconChartPie,
     label: i18n.translate('xpack.lens.pie.pielabel', {
       defaultMessage: 'Pie',
     }),
@@ -171,7 +173,7 @@ export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
     },
   },
   treemap: {
-    icon: LensIconChartTreemap,
+    icon: IconChartTreemap,
     label: i18n.translate('xpack.lens.pie.treemaplabel', {
       defaultMessage: 'Treemap',
     }),
@@ -186,7 +188,7 @@ export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
     },
   },
   mosaic: {
-    icon: LensIconChartMosaic,
+    icon: IconChartMosaic,
     label: i18n.translate('xpack.lens.pie.mosaiclabel', {
       defaultMessage: 'Mosaic',
     }),
@@ -203,7 +205,7 @@ export const PartitionChartsMeta: Record<PieChartType, PartitionChartMeta> = {
     requiredMinDimensionCount: 2,
   },
   waffle: {
-    icon: LensIconChartWaffle,
+    icon: IconChartWaffle,
     label: i18n.translate('xpack.lens.pie.wafflelabel', {
       defaultMessage: 'Waffle',
     }),
diff --git a/x-pack/plugins/lens/public/visualizations/xy/annotations/helpers.tsx b/x-pack/plugins/lens/public/visualizations/xy/annotations/helpers.tsx
index 480417ab2cbad..4c60934ef9114 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/annotations/helpers.tsx
+++ b/x-pack/plugins/lens/public/visualizations/xy/annotations/helpers.tsx
@@ -13,6 +13,7 @@ import {
   isRangeAnnotation,
 } from '@kbn/event-annotation-plugin/public';
 import { EventAnnotationConfig } from '@kbn/event-annotation-plugin/common';
+import { IconChartBarAnnotations } from '@kbn/chart-icons';
 import { layerTypes } from '../../../../common';
 import type { FramePublicAPI, Visualization } from '../../../types';
 import { isHorizontalChart } from '../state_helpers';
@@ -24,7 +25,6 @@ import {
   getDataLayers,
   isAnnotationsLayer,
 } from '../visualization_helpers';
-import { LensIconChartBarAnnotations } from '../../../assets/chart_bar_annotations';
 import { generateId } from '../../../id_generator';
 
 const MAX_DATE = 8640000000000000;
@@ -106,7 +106,7 @@ export const getAnnotationsSupportedLayer = (
     label: i18n.translate('xpack.lens.xyChart.addAnnotationsLayerLabel', {
       defaultMessage: 'Annotations',
     }),
-    icon: LensIconChartBarAnnotations,
+    icon: IconChartBarAnnotations,
     disabled: !hasDateHistogram,
     toolTipContent: !hasDateHistogram
       ? i18n.translate('xpack.lens.xyChart.addAnnotationsLayerLabelDisabledHelp', {
diff --git a/x-pack/plugins/lens/public/visualizations/xy/reference_line_helpers.tsx b/x-pack/plugins/lens/public/visualizations/xy/reference_line_helpers.tsx
index 293dd8e67db8f..362b63c46eb2d 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/reference_line_helpers.tsx
+++ b/x-pack/plugins/lens/public/visualizations/xy/reference_line_helpers.tsx
@@ -8,6 +8,7 @@
 import { groupBy, partition } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { Datatable } from '@kbn/expressions-plugin/public';
+import { IconChartBarReferenceLine } from '@kbn/chart-icons';
 import { layerTypes } from '../../../common';
 import type { DatasourceLayers, FramePublicAPI, Visualization } from '../../types';
 import { groupAxesByType } from './axes_configuration';
@@ -28,7 +29,6 @@ import {
   isReferenceLayer,
 } from './visualization_helpers';
 import { generateId } from '../../id_generator';
-import { LensIconChartBarReferenceLine } from '../../assets/chart_bar_reference_line';
 import { defaultReferenceLineColor } from './color_assignment';
 
 export interface ReferenceLineBase {
@@ -318,7 +318,7 @@ export const getReferenceSupportedLayer = (
     label: i18n.translate('xpack.lens.xyChart.addReferenceLineLayerLabel', {
       defaultMessage: 'Reference lines',
     }),
-    icon: LensIconChartBarReferenceLine,
+    icon: IconChartBarReferenceLine,
     disabled:
       !filledDataLayers.length ||
       (!dataLayers.some(layerHasNumberHistogram) &&
diff --git a/x-pack/plugins/lens/public/visualizations/xy/types.ts b/x-pack/plugins/lens/public/visualizations/xy/types.ts
index c2ca25c61c42e..8e140b83cb552 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/types.ts
+++ b/x-pack/plugins/lens/public/visualizations/xy/types.ts
@@ -22,16 +22,18 @@ import type {
   YAxisConfig,
 } from '@kbn/expression-xy-plugin/common';
 import { EventAnnotationConfig } from '@kbn/event-annotation-plugin/common';
-import { LensIconChartArea } from '../../assets/chart_area';
-import { LensIconChartAreaStacked } from '../../assets/chart_area_stacked';
-import { LensIconChartAreaPercentage } from '../../assets/chart_area_percentage';
-import { LensIconChartBar } from '../../assets/chart_bar';
-import { LensIconChartBarStacked } from '../../assets/chart_bar_stacked';
-import { LensIconChartBarPercentage } from '../../assets/chart_bar_percentage';
-import { LensIconChartBarHorizontal } from '../../assets/chart_bar_horizontal';
-import { LensIconChartBarHorizontalStacked } from '../../assets/chart_bar_horizontal_stacked';
-import { LensIconChartBarHorizontalPercentage } from '../../assets/chart_bar_horizontal_percentage';
-import { LensIconChartLine } from '../../assets/chart_line';
+import {
+  IconChartArea,
+  IconChartLine,
+  IconChartAreaStacked,
+  IconChartBarHorizontalStacked,
+  IconChartBarHorizontalPercentage,
+  IconChartAreaPercentage,
+  IconChartBar,
+  IconChartBarStacked,
+  IconChartBarPercentage,
+  IconChartBarHorizontal,
+} from '@kbn/chart-icons';
 
 import type { VisualizationType, Suggestion } from '../../types';
 import type { ValueLabelConfig } from '../../../common/types';
@@ -168,7 +170,7 @@ const groupLabelForLineAndArea = i18n.translate('xpack.lens.xyVisualization.line
 export const visualizationTypes: VisualizationType[] = [
   {
     id: 'bar',
-    icon: LensIconChartBar,
+    icon: IconChartBar,
     label: i18n.translate('xpack.lens.xyVisualization.barLabel', {
       defaultMessage: 'Bar vertical',
     }),
@@ -177,7 +179,7 @@ export const visualizationTypes: VisualizationType[] = [
   },
   {
     id: 'bar_horizontal',
-    icon: LensIconChartBarHorizontal,
+    icon: IconChartBarHorizontal,
     label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', {
       defaultMessage: 'H. Bar',
     }),
@@ -188,7 +190,7 @@ export const visualizationTypes: VisualizationType[] = [
   },
   {
     id: 'bar_stacked',
-    icon: LensIconChartBarStacked,
+    icon: IconChartBarStacked,
     label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', {
       defaultMessage: 'Bar vertical stacked',
     }),
@@ -196,7 +198,7 @@ export const visualizationTypes: VisualizationType[] = [
   },
   {
     id: 'bar_percentage_stacked',
-    icon: LensIconChartBarPercentage,
+    icon: IconChartBarPercentage,
     label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarLabel', {
       defaultMessage: 'Bar vertical percentage',
     }),
@@ -204,7 +206,7 @@ export const visualizationTypes: VisualizationType[] = [
   },
   {
     id: 'bar_horizontal_stacked',
-    icon: LensIconChartBarHorizontalStacked,
+    icon: IconChartBarHorizontalStacked,
     label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', {
       defaultMessage: 'H. Stacked bar',
     }),
@@ -215,7 +217,7 @@ export const visualizationTypes: VisualizationType[] = [
   },
   {
     id: 'bar_horizontal_percentage_stacked',
-    icon: LensIconChartBarHorizontalPercentage,
+    icon: IconChartBarHorizontalPercentage,
     label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageBarHorizontalLabel', {
       defaultMessage: 'H. Percentage bar',
     }),
@@ -229,7 +231,7 @@ export const visualizationTypes: VisualizationType[] = [
   },
   {
     id: 'area',
-    icon: LensIconChartArea,
+    icon: IconChartArea,
     label: i18n.translate('xpack.lens.xyVisualization.areaLabel', {
       defaultMessage: 'Area',
     }),
@@ -237,7 +239,7 @@ export const visualizationTypes: VisualizationType[] = [
   },
   {
     id: 'area_stacked',
-    icon: LensIconChartAreaStacked,
+    icon: IconChartAreaStacked,
     label: i18n.translate('xpack.lens.xyVisualization.stackedAreaLabel', {
       defaultMessage: 'Area stacked',
     }),
@@ -245,7 +247,7 @@ export const visualizationTypes: VisualizationType[] = [
   },
   {
     id: 'area_percentage_stacked',
-    icon: LensIconChartAreaPercentage,
+    icon: IconChartAreaPercentage,
     label: i18n.translate('xpack.lens.xyVisualization.stackedPercentageAreaLabel', {
       defaultMessage: 'Area percentage',
     }),
@@ -253,7 +255,7 @@ export const visualizationTypes: VisualizationType[] = [
   },
   {
     id: 'line',
-    icon: LensIconChartLine,
+    icon: IconChartLine,
     label: i18n.translate('xpack.lens.xyVisualization.lineLabel', {
       defaultMessage: 'Line',
     }),
diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts b/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts
index b1313d765ae92..6817046864783 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts
+++ b/x-pack/plugins/lens/public/visualizations/xy/visualization.test.ts
@@ -25,7 +25,7 @@ import type {
 } from './types';
 import { layerTypes } from '../../../common';
 import { createMockDatasource, createMockFramePublicAPI } from '../../mocks';
-import { LensIconChartBar } from '../../assets/chart_bar';
+import { IconChartBar } from '@kbn/chart-icons';
 import type { VisualizeEditorLayersContext } from '@kbn/visualizations-plugin/public';
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks';
@@ -109,7 +109,7 @@ describe('xy_visualization', () => {
     it('should show the preferredSeriesType if there are no layers', () => {
       const desc = xyVisualization.getDescription(mixedState());
 
-      expect(desc.icon).toEqual(LensIconChartBar);
+      expect(desc.icon).toEqual(IconChartBar);
       expect(desc.label).toEqual('Bar vertical');
     });
 
diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization_helpers.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization_helpers.tsx
index c36916f7f0306..46bc1ba8dc551 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/visualization_helpers.tsx
+++ b/x-pack/plugins/lens/public/visualizations/xy/visualization_helpers.tsx
@@ -7,6 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { uniq } from 'lodash';
+import { IconChartBarHorizontal, IconChartBarStacked, IconChartMixedXy } from '@kbn/chart-icons';
 import { DatasourceLayers, OperationMetadata, VisualizationType } from '../../types';
 import {
   State,
@@ -20,9 +21,6 @@ import {
 } from './types';
 import { isHorizontalChart } from './state_helpers';
 import { layerTypes } from '../..';
-import { LensIconChartBarHorizontal } from '../../assets/chart_bar_horizontal';
-import { LensIconChartMixedXy } from '../../assets/chart_mixed_xy';
-import { LensIconChartBarStacked } from '../../assets/chart_bar_stacked';
 import { LayerType } from '../../../common';
 
 export function getAxisName(
@@ -192,7 +190,7 @@ export function getDescription(state?: State) {
 
   if (visualizationType === 'mixed' && isHorizontalChart(state.layers)) {
     return {
-      icon: LensIconChartBarHorizontal,
+      icon: IconChartBarHorizontal,
       label: i18n.translate('xpack.lens.xyVisualization.mixedBarHorizontalLabel', {
         defaultMessage: 'Mixed bar horizontal',
       }),
@@ -201,7 +199,7 @@ export function getDescription(state?: State) {
 
   if (visualizationType === 'mixed') {
     return {
-      icon: LensIconChartMixedXy,
+      icon: IconChartMixedXy,
       label: i18n.translate('xpack.lens.xyVisualization.mixedLabel', {
         defaultMessage: 'Mixed XY',
       }),
@@ -214,7 +212,7 @@ export function getDescription(state?: State) {
   };
 }
 
-export const defaultIcon = LensIconChartBarStacked;
+export const defaultIcon = IconChartBarStacked;
 export const defaultSeriesType = 'bar_stacked';
 
 export const supportedDataLayer = {
@@ -222,7 +220,7 @@ export const supportedDataLayer = {
   label: i18n.translate('xpack.lens.xyChart.addDataLayerLabel', {
     defaultMessage: 'Visualization',
   }),
-  icon: LensIconChartMixedXy,
+  icon: IconChartMixedXy,
 };
 
 // i18n ids cannot be dynamically generated, hence the function below
diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/annotations_config_panel/icon_set.ts b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/annotations_config_panel/icon_set.ts
index 80cf7eccc9622..23a4b6fb52610 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/annotations_config_panel/icon_set.ts
+++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/annotations_config_panel/icon_set.ts
@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { AvailableAnnotationIcon } from '@kbn/event-annotation-plugin/common';
-import { IconTriangle, IconCircle } from '../../../../assets/annotation_icons';
+import { IconTriangle, IconCircle } from '@kbn/chart-icons';
 import { IconSet } from '../shared/icon_select';
 
 export const annotationsIconSet: IconSet<AvailableAnnotationIcon> = [
diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx
index 65d7b94281486..cb02bb796a3aa 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx
+++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx
@@ -18,7 +18,13 @@ import { i18n } from '@kbn/i18n';
 import { isEqual } from 'lodash';
 import { AxisExtentConfig, YScaleType } from '@kbn/expression-xy-plugin/common';
 import { ToolbarButtonProps } from '@kbn/kibana-react-plugin/public';
-import { XYLayerConfig, AxesSettingsConfig } from '../types';
+import {
+  EuiIconAxisBottom,
+  EuiIconAxisLeft,
+  EuiIconAxisRight,
+  EuiIconAxisTop,
+} from '@kbn/chart-icons';
+import { isHorizontalChart } from '../state_helpers';
 import {
   ToolbarPopover,
   useDebouncedValue,
@@ -26,11 +32,7 @@ import {
   RangeInputField,
   BucketAxisBoundsControl,
 } from '../../../shared_components';
-import { isHorizontalChart } from '../state_helpers';
-import { EuiIconAxisBottom } from '../../../assets/axis_bottom';
-import { EuiIconAxisLeft } from '../../../assets/axis_left';
-import { EuiIconAxisRight } from '../../../assets/axis_right';
-import { EuiIconAxisTop } from '../../../assets/axis_top';
+import { XYLayerConfig, AxesSettingsConfig } from '../types';
 import { validateExtent } from '../axes_configuration';
 
 import './axis_settings_popover.scss';
diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx
index 44d9f342cfcd7..d55aa0aa12133 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx
+++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx
@@ -9,12 +9,11 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiIcon, EuiPopover, EuiSelectable, EuiText, EuiPopoverTitle } from '@elastic/eui';
 import { ToolbarButton } from '@kbn/kibana-react-plugin/public';
+import { IconChartBarReferenceLine, IconChartBarAnnotations } from '@kbn/chart-icons';
 import type { VisualizationLayerWidgetProps, VisualizationType } from '../../../types';
 import { State, visualizationTypes, SeriesType } from '../types';
 import { isHorizontalChart, isHorizontalSeries } from '../state_helpers';
 import { StaticHeader } from '../../../shared_components';
-import { LensIconChartBarReferenceLine } from '../../../assets/chart_bar_reference_line';
-import { LensIconChartBarAnnotations } from '../../../assets/chart_bar_annotations';
 import { updateLayer } from '.';
 import { isAnnotationsLayer, isDataLayer, isReferenceLayer } from '../visualization_helpers';
 
@@ -34,7 +33,7 @@ export function LayerHeader(props: VisualizationLayerWidgetProps<State>) {
 function ReferenceLayerHeader() {
   return (
     <StaticHeader
-      icon={LensIconChartBarReferenceLine}
+      icon={IconChartBarReferenceLine}
       label={i18n.translate('xpack.lens.xyChart.layerReferenceLineLabel', {
         defaultMessage: 'Reference lines',
       })}
@@ -45,7 +44,7 @@ function ReferenceLayerHeader() {
 function AnnotationsLayerHeader() {
   return (
     <StaticHeader
-      icon={LensIconChartBarAnnotations}
+      icon={IconChartBarAnnotations}
       label={i18n.translate('xpack.lens.xyChart.layerAnnotationsLabel', {
         defaultMessage: 'Annotations',
       })}
diff --git a/x-pack/plugins/maps/public/lens/choropleth_chart/suggestions.ts b/x-pack/plugins/maps/public/lens/choropleth_chart/suggestions.ts
index a7caa72c6c5df..68a17b4a0da67 100644
--- a/x-pack/plugins/maps/public/lens/choropleth_chart/suggestions.ts
+++ b/x-pack/plugins/maps/public/lens/choropleth_chart/suggestions.ts
@@ -9,8 +9,8 @@ import { partition } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import type { FileLayer } from '@elastic/ems-client';
 import type { SuggestionRequest, VisualizationSuggestion } from '@kbn/lens-plugin/public';
+import { IconRegionMap } from '@kbn/chart-icons';
 import type { ChoroplethChartState } from './types';
-import { Icon } from './icon';
 import { getEmsSuggestion } from './get_ems_suggestion';
 
 /**
@@ -72,7 +72,7 @@ export function getSuggestions(
                 valueAccessor: metric.columnId,
                 regionAccessor: bucket.columnId,
               },
-              previewIcon: Icon,
+              previewIcon: IconRegionMap,
             });
           }
         }
diff --git a/x-pack/plugins/maps/public/lens/choropleth_chart/visualization.tsx b/x-pack/plugins/maps/public/lens/choropleth_chart/visualization.tsx
index 54f459c3f7b38..b6e22ce3cb635 100644
--- a/x-pack/plugins/maps/public/lens/choropleth_chart/visualization.tsx
+++ b/x-pack/plugins/maps/public/lens/choropleth_chart/visualization.tsx
@@ -15,9 +15,9 @@ import { ThemeServiceStart } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { layerTypes } from '@kbn/lens-plugin/public';
 import type { OperationMetadata, SuggestionRequest, Visualization } from '@kbn/lens-plugin/public';
+import { IconRegionMap } from '@kbn/chart-icons';
 import { getSuggestions } from './suggestions';
 import type { ChoroplethChartState } from './types';
-import { Icon } from './icon';
 import { RegionKeyEditor } from './region_key_editor';
 
 const REGION_KEY_GROUP_ID = 'region_key';
@@ -41,7 +41,7 @@ export const getVisualization = ({
   visualizationTypes: [
     {
       id: 'lnsChoropleth',
-      icon: Icon,
+      icon: IconRegionMap,
       label: CHART_LABEL,
       groupLabel: i18n.translate('xpack.maps.lens.groupLabel', {
         defaultMessage: 'Map',
@@ -70,7 +70,7 @@ export const getVisualization = ({
 
   getDescription() {
     return {
-      icon: Icon,
+      icon: IconRegionMap,
       label: CHART_LABEL,
     };
   },
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/metadata.test.ts b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/metadata.test.ts
index 6eb04c9833e27..906b1e3168a70 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/metadata.test.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/metadata.test.ts
@@ -248,30 +248,6 @@ describe('test endpoint routes', () => {
             must: [
               {
                 bool: {
-                  filter: [
-                    {
-                      terms: {
-                        'united.agent.policy_id': [],
-                      },
-                    },
-                    {
-                      exists: {
-                        field: 'united.endpoint.agent.id',
-                      },
-                    },
-                    {
-                      exists: {
-                        field: 'united.agent.agent.id',
-                      },
-                    },
-                    {
-                      term: {
-                        'united.agent.active': {
-                          value: true,
-                        },
-                      },
-                    },
-                  ],
                   must_not: {
                     terms: {
                       'agent.id': [
@@ -280,6 +256,12 @@ describe('test endpoint routes', () => {
                       ],
                     },
                   },
+                  filter: [
+                    { terms: { 'united.agent.policy_id': [] } },
+                    { exists: { field: 'united.endpoint.agent.id' } },
+                    { exists: { field: 'united.agent.agent.id' } },
+                    { term: { 'united.agent.active': { value: true } } },
+                  ],
                 },
               },
               {
@@ -290,13 +272,7 @@ describe('test endpoint routes', () => {
                         filter: [
                           {
                             bool: {
-                              should: [
-                                {
-                                  exists: {
-                                    field: 'united.agent.upgrade_started_at',
-                                  },
-                                },
-                              ],
+                              should: [{ exists: { field: 'united.agent.upgrade_started_at' } }],
                               minimum_should_match: 1,
                             },
                           },
@@ -304,13 +280,7 @@ describe('test endpoint routes', () => {
                             bool: {
                               must_not: {
                                 bool: {
-                                  should: [
-                                    {
-                                      exists: {
-                                        field: 'united.agent.upgraded_at',
-                                      },
-                                    },
-                                  ],
+                                  should: [{ exists: { field: 'united.agent.upgraded_at' } }],
                                   minimum_should_match: 1,
                                 },
                               },
@@ -323,13 +293,7 @@ describe('test endpoint routes', () => {
                       bool: {
                         must_not: {
                           bool: {
-                            should: [
-                              {
-                                exists: {
-                                  field: 'united.agent.last_checkin',
-                                },
-                              },
-                            ],
+                            should: [{ exists: { field: 'united.agent.last_checkin' } }],
                             minimum_should_match: 1,
                           },
                         },
@@ -337,16 +301,20 @@ describe('test endpoint routes', () => {
                     },
                     {
                       bool: {
-                        should: [
-                          {
-                            exists: {
-                              field: 'united.agent.unenrollment_started_at',
-                            },
-                          },
-                        ],
+                        should: [{ exists: { field: 'united.agent.unenrollment_started_at' } }],
                         minimum_should_match: 1,
                       },
                     },
+                    {
+                      bool: {
+                        must_not: {
+                          bool: {
+                            should: [{ exists: { field: 'united.agent.policy_revision_idx' } }],
+                            minimum_should_match: 1,
+                          },
+                        },
+                      },
+                    },
                   ],
                   minimum_should_match: 1,
                 },
@@ -355,13 +323,7 @@ describe('test endpoint routes', () => {
                 bool: {
                   must_not: {
                     bool: {
-                      should: [
-                        {
-                          match: {
-                            'host.ip': '10.140.73.246',
-                          },
-                        },
-                      ],
+                      should: [{ match: { 'host.ip': '10.140.73.246' } }],
                       minimum_should_match: 1,
                     },
                   },
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/query_builders.fixtures.ts b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/query_builders.fixtures.ts
index 31b383f2a033e..30189459ff167 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/query_builders.fixtures.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/query_builders.fixtures.ts
@@ -18,28 +18,10 @@ export const expectedCompleteUnitedIndexQuery = {
             },
           },
           filter: [
-            {
-              terms: {
-                'united.agent.policy_id': ['test-endpoint-policy-id'],
-              },
-            },
-            {
-              exists: {
-                field: 'united.endpoint.agent.id',
-              },
-            },
-            {
-              exists: {
-                field: 'united.agent.agent.id',
-              },
-            },
-            {
-              term: {
-                'united.agent.active': {
-                  value: true,
-                },
-              },
-            },
+            { terms: { 'united.agent.policy_id': ['test-endpoint-policy-id'] } },
+            { exists: { field: 'united.endpoint.agent.id' } },
+            { exists: { field: 'united.agent.agent.id' } },
+            { term: { 'united.agent.active': { value: true } } },
           ],
         },
       },
@@ -53,15 +35,7 @@ export const expectedCompleteUnitedIndexQuery = {
                     filter: [
                       {
                         bool: {
-                          should: [
-                            {
-                              range: {
-                                'united.agent.last_checkin': {
-                                  lt: 'now-300s',
-                                },
-                              },
-                            },
-                          ],
+                          should: [{ range: { 'united.agent.last_checkin': { lt: 'now-300s' } } }],
                           minimum_should_match: 1,
                         },
                       },
@@ -168,6 +142,22 @@ export const expectedCompleteUnitedIndexQuery = {
                                               minimum_should_match: 1,
                                             },
                                           },
+                                          {
+                                            bool: {
+                                              must_not: {
+                                                bool: {
+                                                  should: [
+                                                    {
+                                                      exists: {
+                                                        field: 'united.agent.policy_revision_idx',
+                                                      },
+                                                    },
+                                                  ],
+                                                  minimum_should_match: 1,
+                                                },
+                                              },
+                                            },
+                                          },
                                         ],
                                         minimum_should_match: 1,
                                       },
@@ -191,9 +181,7 @@ export const expectedCompleteUnitedIndexQuery = {
                                         bool: {
                                           should: [
                                             {
-                                              exists: {
-                                                field: 'united.agent.upgrade_started_at',
-                                              },
+                                              exists: { field: 'united.agent.upgrade_started_at' },
                                             },
                                           ],
                                           minimum_should_match: 1,
@@ -204,11 +192,7 @@ export const expectedCompleteUnitedIndexQuery = {
                                           must_not: {
                                             bool: {
                                               should: [
-                                                {
-                                                  exists: {
-                                                    field: 'united.agent.upgraded_at',
-                                                  },
-                                                },
+                                                { exists: { field: 'united.agent.upgraded_at' } },
                                               ],
                                               minimum_should_match: 1,
                                             },
@@ -223,11 +207,7 @@ export const expectedCompleteUnitedIndexQuery = {
                                     must_not: {
                                       bool: {
                                         should: [
-                                          {
-                                            exists: {
-                                              field: 'united.agent.last_checkin',
-                                            },
-                                          },
+                                          { exists: { field: 'united.agent.last_checkin' } },
                                         ],
                                         minimum_should_match: 1,
                                       },
@@ -237,15 +217,23 @@ export const expectedCompleteUnitedIndexQuery = {
                                 {
                                   bool: {
                                     should: [
-                                      {
-                                        exists: {
-                                          field: 'united.agent.unenrollment_started_at',
-                                        },
-                                      },
+                                      { exists: { field: 'united.agent.unenrollment_started_at' } },
                                     ],
                                     minimum_should_match: 1,
                                   },
                                 },
+                                {
+                                  bool: {
+                                    must_not: {
+                                      bool: {
+                                        should: [
+                                          { exists: { field: 'united.agent.policy_revision_idx' } },
+                                        ],
+                                        minimum_should_match: 1,
+                                      },
+                                    },
+                                  },
+                                },
                               ],
                               minimum_should_match: 1,
                             },
@@ -268,11 +256,7 @@ export const expectedCompleteUnitedIndexQuery = {
                             {
                               bool: {
                                 should: [
-                                  {
-                                    match: {
-                                      'united.agent.last_checkin_status': 'error',
-                                    },
-                                  },
+                                  { match: { 'united.agent.last_checkin_status': 'error' } },
                                 ],
                                 minimum_should_match: 1,
                               },
@@ -280,11 +264,7 @@ export const expectedCompleteUnitedIndexQuery = {
                             {
                               bool: {
                                 should: [
-                                  {
-                                    match: {
-                                      'united.agent.last_checkin_status': 'degraded',
-                                    },
-                                  },
+                                  { match: { 'united.agent.last_checkin_status': 'degraded' } },
                                 ],
                                 minimum_should_match: 1,
                               },
@@ -305,9 +285,7 @@ export const expectedCompleteUnitedIndexQuery = {
                                         bool: {
                                           should: [
                                             {
-                                              exists: {
-                                                field: 'united.agent.upgrade_started_at',
-                                              },
+                                              exists: { field: 'united.agent.upgrade_started_at' },
                                             },
                                           ],
                                           minimum_should_match: 1,
@@ -318,11 +296,7 @@ export const expectedCompleteUnitedIndexQuery = {
                                           must_not: {
                                             bool: {
                                               should: [
-                                                {
-                                                  exists: {
-                                                    field: 'united.agent.upgraded_at',
-                                                  },
-                                                },
+                                                { exists: { field: 'united.agent.upgraded_at' } },
                                               ],
                                               minimum_should_match: 1,
                                             },
@@ -337,11 +311,7 @@ export const expectedCompleteUnitedIndexQuery = {
                                     must_not: {
                                       bool: {
                                         should: [
-                                          {
-                                            exists: {
-                                              field: 'united.agent.last_checkin',
-                                            },
-                                          },
+                                          { exists: { field: 'united.agent.last_checkin' } },
                                         ],
                                         minimum_should_match: 1,
                                       },
@@ -351,15 +321,23 @@ export const expectedCompleteUnitedIndexQuery = {
                                 {
                                   bool: {
                                     should: [
-                                      {
-                                        exists: {
-                                          field: 'united.agent.unenrollment_started_at',
-                                        },
-                                      },
+                                      { exists: { field: 'united.agent.unenrollment_started_at' } },
                                     ],
                                     minimum_should_match: 1,
                                   },
                                 },
+                                {
+                                  bool: {
+                                    must_not: {
+                                      bool: {
+                                        should: [
+                                          { exists: { field: 'united.agent.policy_revision_idx' } },
+                                        ],
+                                        minimum_should_match: 1,
+                                      },
+                                    },
+                                  },
+                                },
                               ],
                               minimum_should_match: 1,
                             },
@@ -381,13 +359,7 @@ export const expectedCompleteUnitedIndexQuery = {
                           filter: [
                             {
                               bool: {
-                                should: [
-                                  {
-                                    exists: {
-                                      field: 'united.agent.upgrade_started_at',
-                                    },
-                                  },
-                                ],
+                                should: [{ exists: { field: 'united.agent.upgrade_started_at' } }],
                                 minimum_should_match: 1,
                               },
                             },
@@ -395,13 +367,7 @@ export const expectedCompleteUnitedIndexQuery = {
                               bool: {
                                 must_not: {
                                   bool: {
-                                    should: [
-                                      {
-                                        exists: {
-                                          field: 'united.agent.upgraded_at',
-                                        },
-                                      },
-                                    ],
+                                    should: [{ exists: { field: 'united.agent.upgraded_at' } }],
                                     minimum_should_match: 1,
                                   },
                                 },
@@ -414,13 +380,7 @@ export const expectedCompleteUnitedIndexQuery = {
                         bool: {
                           must_not: {
                             bool: {
-                              should: [
-                                {
-                                  exists: {
-                                    field: 'united.agent.last_checkin',
-                                  },
-                                },
-                              ],
+                              should: [{ exists: { field: 'united.agent.last_checkin' } }],
                               minimum_should_match: 1,
                             },
                           },
@@ -428,16 +388,20 @@ export const expectedCompleteUnitedIndexQuery = {
                       },
                       {
                         bool: {
-                          should: [
-                            {
-                              exists: {
-                                field: 'united.agent.unenrollment_started_at',
-                              },
-                            },
-                          ],
+                          should: [{ exists: { field: 'united.agent.unenrollment_started_at' } }],
                           minimum_should_match: 1,
                         },
                       },
+                      {
+                        bool: {
+                          must_not: {
+                            bool: {
+                              should: [{ exists: { field: 'united.agent.policy_revision_idx' } }],
+                              minimum_should_match: 1,
+                            },
+                          },
+                        },
+                      },
                     ],
                     minimum_should_match: 1,
                   },
@@ -449,13 +413,7 @@ export const expectedCompleteUnitedIndexQuery = {
       },
       {
         bool: {
-          should: [
-            {
-              exists: {
-                field: 'united.endpoint.host.os.name',
-              },
-            },
-          ],
+          should: [{ exists: { field: 'united.endpoint.host.os.name' } }],
           minimum_should_match: 1,
         },
       },
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/support/agent_status.test.ts b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/support/agent_status.test.ts
index f3c5c6b542de5..7f89444b21fa5 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/support/agent_status.test.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/support/agent_status.test.ts
@@ -93,7 +93,7 @@ describe('test filtering endpoint hosts by agent status', () => {
       const status = ['healthy'];
       const kuery = buildStatusesKuery(status);
       const expected =
-        '(not (united.agent.last_checkin < now-300s AND not ((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*))) AND not ( ((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) )) AND not ((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*))) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*)))';
+        '(not (united.agent.last_checkin < now-300s AND not ((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*))) AND not ( ((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*) )) AND not ((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*))) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*)))';
       expect(kuery).toEqual(expected);
     });
 
@@ -101,7 +101,7 @@ describe('test filtering endpoint hosts by agent status', () => {
       const status = ['offline'];
       const kuery = buildStatusesKuery(status);
       const expected =
-        '(united.agent.last_checkin < now-300s AND not ((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*))) AND not ( ((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) ))';
+        '(united.agent.last_checkin < now-300s AND not ((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*))) AND not ( ((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*) ))';
       expect(kuery).toEqual(expected);
     });
 
@@ -109,7 +109,7 @@ describe('test filtering endpoint hosts by agent status', () => {
       const status = ['unhealthy'];
       const kuery = buildStatusesKuery(status);
       const expected =
-        '((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*)))';
+        '((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*)))';
       expect(kuery).toEqual(expected);
     });
 
@@ -117,7 +117,7 @@ describe('test filtering endpoint hosts by agent status', () => {
       const status = ['updating'];
       const kuery = buildStatusesKuery(status);
       const expected =
-        '(((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*))';
+        '(((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*))';
       expect(kuery).toEqual(expected);
     });
 
@@ -132,7 +132,7 @@ describe('test filtering endpoint hosts by agent status', () => {
       const statuses = ['offline', 'unhealthy'];
       const kuery = buildStatusesKuery(statuses);
       const expected =
-        '(united.agent.last_checkin < now-300s AND not ((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*))) AND not ( ((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) ) OR (united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*)))';
+        '(united.agent.last_checkin < now-300s AND not ((united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*))) AND not ( ((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*) ) OR (united.agent.last_checkin_status:error or united.agent.last_checkin_status:degraded) AND not (((united.agent.upgrade_started_at:*) and not (united.agent.upgraded_at:*)) or (not (united.agent.last_checkin:*)) or (united.agent.unenrollment_started_at:*) or (not united.agent.policy_revision_idx:*)))';
       expect(kuery).toEqual(expected);
     });
   });
diff --git a/x-pack/plugins/synthetics/e2e/journeys/alerts/default_email_settings.ts b/x-pack/plugins/synthetics/e2e/journeys/alerts/default_email_settings.ts
index f2504e690965f..ce19d8442d056 100644
--- a/x-pack/plugins/synthetics/e2e/journeys/alerts/default_email_settings.ts
+++ b/x-pack/plugins/synthetics/e2e/journeys/alerts/default_email_settings.ts
@@ -43,7 +43,6 @@ journey('DefaultEmailSettings', async ({ page, params }) => {
   });
 
   step('clear existing settings', async () => {
-    await settings.dismissSyntheticsCallout();
     await page.waitForSelector(byTestId('"default-connectors-input-loaded"'));
     await page.waitForTimeout(10 * 1000);
     const toEmailInput = await page.$(byTestId('toEmailAddressInput'));
diff --git a/x-pack/plugins/synthetics/e2e/journeys/step_duration.journey.ts b/x-pack/plugins/synthetics/e2e/journeys/step_duration.journey.ts
index 1193409d0df94..ba62da5d4a4d7 100644
--- a/x-pack/plugins/synthetics/e2e/journeys/step_duration.journey.ts
+++ b/x-pack/plugins/synthetics/e2e/journeys/step_duration.journey.ts
@@ -30,7 +30,6 @@ journey('StepsDuration', async ({ page, params }) => {
   });
 
   step('Go to monitor details', async () => {
-    await page.click('text=Dismiss');
     await page.click('button:has-text("test-monitor - inline")');
     expect(page.url()).toBe(`${baseUrl}/monitor/dGVzdC1tb25pdG9yLWlubGluZQ==/?${queryParams}`);
   });
diff --git a/x-pack/plugins/synthetics/e2e/journeys/synthetics/getting_started.journey.ts b/x-pack/plugins/synthetics/e2e/journeys/synthetics/getting_started.journey.ts
index 40035e9c70923..2d9f1f888a936 100644
--- a/x-pack/plugins/synthetics/e2e/journeys/synthetics/getting_started.journey.ts
+++ b/x-pack/plugins/synthetics/e2e/journeys/synthetics/getting_started.journey.ts
@@ -46,8 +46,4 @@ journey(`Getting Started Page`, async ({ page, params }: { page: Page; params: a
     await createBasicMonitor();
     await syntheticsApp.confirmAndSave();
   });
-
-  step('it navigates to details page after saving', async () => {
-    await page.click('text=Dismiss');
-  });
 });
diff --git a/x-pack/plugins/synthetics/e2e/journeys/uptime.journey.ts b/x-pack/plugins/synthetics/e2e/journeys/uptime.journey.ts
index 5896b609cf76d..15cca32983e1d 100644
--- a/x-pack/plugins/synthetics/e2e/journeys/uptime.journey.ts
+++ b/x-pack/plugins/synthetics/e2e/journeys/uptime.journey.ts
@@ -28,12 +28,6 @@ journey('uptime', ({ page, params }) => {
     await page.click('[data-test-subj=loginSubmit]');
   });
 
-  step('dismiss synthetics notice', async () => {
-    await page.click('[data-test-subj=uptimeDismissSyntheticsCallout]', {
-      timeout: 60 * 1000,
-    });
-  });
-
   step('change uptime index pattern', async () => {
     await page.click(byTestId('settings-page-link'));
 
diff --git a/x-pack/plugins/synthetics/e2e/page_objects/utils.tsx b/x-pack/plugins/synthetics/e2e/page_objects/utils.tsx
index 024609e2f69ef..74fa8f6c8ce54 100644
--- a/x-pack/plugins/synthetics/e2e/page_objects/utils.tsx
+++ b/x-pack/plugins/synthetics/e2e/page_objects/utils.tsx
@@ -19,12 +19,6 @@ export function utilsPageProvider({ page }: { page: Page }) {
       }
     },
 
-    async dismissSyntheticsCallout() {
-      await page.click('[data-test-subj=uptimeDismissSyntheticsCallout]', {
-        timeout: 60 * 1000,
-      });
-    },
-
     async assertText({ text }: { text: string }) {
       await page.waitForSelector(`text=${text}`);
       expect(await page.$(`text=${text}`)).toBeTruthy();
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/synthetics_callout.test.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/synthetics_callout.test.tsx
deleted file mode 100644
index d5b82a562be3b..0000000000000
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/synthetics_callout.test.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { shallowWithIntl } from '@kbn/test-jest-helpers';
-import React from 'react';
-import { SyntheticsCallout } from './synthetics_callout';
-
-describe('SyntheticsCallout', () => {
-  let setItemMock;
-  let localStorageMock: any;
-
-  beforeEach(() => {
-    setItemMock = jest.fn();
-    localStorageMock = {
-      getItem: jest.fn().mockImplementation(() => null),
-      setItem: setItemMock,
-    };
-
-    global.localStorage = localStorageMock;
-  });
-
-  it('renders component if dismissal flag is unset', () => {
-    expect(shallowWithIntl(<SyntheticsCallout />)).toMatchInlineSnapshot(`
-      <Fragment>
-        <EuiCallOut
-          iconType="beaker"
-          title="Elastic Synthetics"
-        >
-          <p>
-            <FormattedMessage
-              defaultMessage="Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime."
-              id="xpack.synthetics.overview.pageHeader.syntheticsCallout.content"
-              values={Object {}}
-            />
-          </p>
-          <EuiFlexGroup>
-            <EuiFlexItem
-              grow={false}
-            >
-              <EuiButton
-                href="https://www.elastic.co/what-is/synthetic-monitoring"
-              >
-                <FormattedMessage
-                  defaultMessage="Read announcement"
-                  id="xpack.synthetics.overview.pageHeader.syntheticsCallout.announcementLink"
-                  values={Object {}}
-                />
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-            >
-              <EuiButtonEmpty
-                data-test-subj="uptimeDismissSyntheticsCallout"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Dismiss"
-                  id="xpack.synthetics.overview.pageHeader.syntheticsCallout.dismissButtonText"
-                  values={Object {}}
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiCallOut>
-      </Fragment>
-    `);
-  });
-
-  it('returns null if callout has been dismissed', () => {
-    localStorageMock.getItem = jest.fn().mockImplementation(() => 'true');
-    expect(shallowWithIntl(<SyntheticsCallout />)).toEqual({});
-  });
-
-  it('renders the component, and then returns null when dismiss button clicked', () => {
-    localStorageMock.getItem = jest
-      .fn()
-      .mockImplementationOnce(() => null)
-      .mockImplementationOnce(() => 'true');
-    const wrapper = shallowWithIntl(<SyntheticsCallout />);
-    expect(wrapper).toMatchInlineSnapshot(`
-      <Fragment>
-        <EuiCallOut
-          iconType="beaker"
-          title="Elastic Synthetics"
-        >
-          <p>
-            <FormattedMessage
-              defaultMessage="Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime."
-              id="xpack.synthetics.overview.pageHeader.syntheticsCallout.content"
-              values={Object {}}
-            />
-          </p>
-          <EuiFlexGroup>
-            <EuiFlexItem
-              grow={false}
-            >
-              <EuiButton
-                href="https://www.elastic.co/what-is/synthetic-monitoring"
-              >
-                <FormattedMessage
-                  defaultMessage="Read announcement"
-                  id="xpack.synthetics.overview.pageHeader.syntheticsCallout.announcementLink"
-                  values={Object {}}
-                />
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-            >
-              <EuiButtonEmpty
-                data-test-subj="uptimeDismissSyntheticsCallout"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Dismiss"
-                  id="xpack.synthetics.overview.pageHeader.syntheticsCallout.dismissButtonText"
-                  values={Object {}}
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiCallOut>
-      </Fragment>
-    `);
-    wrapper.find('EuiButton').simulate('click');
-    expect(wrapper).toEqual({});
-  });
-});
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/synthetics_callout.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/synthetics_callout.tsx
deleted file mode 100644
index a6c4f06d31c27..0000000000000
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/synthetics_callout.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React, { useState } from 'react';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
-
-const SYNTHETICS_CALLOUT_LS_KEY = 'xpack.uptime.syntheticsCallout.display';
-const shouldShowSyntheticsCallout = () => {
-  let value = localStorage.getItem(SYNTHETICS_CALLOUT_LS_KEY);
-  if (value === null) {
-    localStorage.setItem(SYNTHETICS_CALLOUT_LS_KEY, 'true');
-    value = 'true';
-  }
-  return value === 'true';
-};
-const hideSyntheticsCallout = () => localStorage.setItem(SYNTHETICS_CALLOUT_LS_KEY, 'false');
-
-export const SyntheticsCallout = () => {
-  const [shouldShow, setShouldShow] = useState<boolean>(shouldShowSyntheticsCallout());
-  if (!shouldShow) {
-    return null;
-  }
-  return (
-    <>
-      <EuiCallOut
-        title={i18n.translate('xpack.synthetics.overview.pageHeader.syntheticsCallout.title', {
-          defaultMessage: 'Elastic Synthetics',
-        })}
-        iconType="beaker"
-      >
-        <p>
-          <FormattedMessage
-            id="xpack.synthetics.overview.pageHeader.syntheticsCallout.content"
-            defaultMessage="Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime."
-          />
-        </p>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiButton href="https://www.elastic.co/what-is/synthetic-monitoring">
-              <FormattedMessage
-                id="xpack.synthetics.overview.pageHeader.syntheticsCallout.announcementLink"
-                defaultMessage="Read announcement"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              data-test-subj="uptimeDismissSyntheticsCallout"
-              onClick={() => {
-                if (shouldShow) {
-                  hideSyntheticsCallout();
-                  setShouldShow(false);
-                }
-              }}
-            >
-              <FormattedMessage
-                id="xpack.synthetics.overview.pageHeader.syntheticsCallout.dismissButtonText"
-                defaultMessage="Dismiss"
-              />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiCallOut>
-    </>
-  );
-};
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/routes.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/routes.tsx
index b32144750705b..6fd6ee19534b5 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/routes.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/routes.tsx
@@ -49,7 +49,6 @@ import { MonitorPageTitle, MonitorPageTitleContent } from './components/monitor/
 import { UptimeDatePicker } from './components/common/uptime_date_picker';
 import { CertRefreshBtn } from './components/certificates/cert_refresh_btn';
 import { CertificateTitle } from './components/certificates/certificate_title';
-import { SyntheticsCallout } from './components/overview/synthetics_callout';
 import {
   StepDetailPageChildren,
   StepDetailPageHeader,
@@ -314,7 +313,6 @@ export const PageRouter: FC = () => {
         }) => (
           <Route path={path} key={telemetryId} exact={true}>
             <div className={APP_WRAPPER_CLASS} data-test-subj={dataTestSubj}>
-              <SyntheticsCallout />
               <RouteInit title={title} path={path} telemetryId={telemetryId} />
               <UptimePageTemplateComponent
                 path={path}
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index 09f4a1bae4d4d..16fb1bb3a27d7 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -31326,10 +31326,6 @@
     "xpack.synthetics.overview.duration.label": "Durée",
     "xpack.synthetics.overview.heading": "Moniteurs",
     "xpack.synthetics.overview.monitors.label": "Moniteurs",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.announcementLink": "Lire l'annonce",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.content": "Uptime affiche maintenant l'aperçu du support pour les vérifications scriptées de disponibilité à plusieurs étapes. Cela signifie que vous pouvez interagir avec les éléments d'une page Web et vérifier la disponibilité d'un parcours complet (par exemple, effectuer un achat ou se connecter à un système) au lieu d'effectuer de simples petites vérifications. Veuillez cliquer ci-dessous pour en savoir plus et, si vous souhaitez être l'un des premiers à utiliser ces fonctionnalités, vous pouvez télécharger notre agent d'aperçu synthétique et visualiser vos vérifications synthétiques dans Uptime.",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.dismissButtonText": "Rejeter",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.title": "Elastic Synthetics",
     "xpack.synthetics.overview.pageHeader.title": "Aperçu",
     "xpack.synthetics.overview.pagination.ariaLabel": "Pagination pour l’aperçu du moniteur",
     "xpack.synthetics.overviewPage.overviewCrumb": "Aperçu",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 212c2b9f40ade..a55fc05b8e5bb 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -31304,10 +31304,6 @@
     "xpack.synthetics.overview.duration.label": "期間",
     "xpack.synthetics.overview.heading": "監視",
     "xpack.synthetics.overview.monitors.label": "監視",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.announcementLink": "お知らせを読む",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.content": "アップタイムは、スクリプト化された複数ステップの可用性チェックのサポートをプレビューしています。つまり、単に単一のページのアップ/ダウンのチェックだけではなく、Webページの要素を操作したり、全体的な可用性を確認したりできます（購入やシステムへのサインインなど）。詳細については以下をクリックしてください。これらの機能を先駆けて使用したい場合は、プレビュー合成エージェントをダウンロードし、アップタイムでチェックを表示できます。",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.dismissButtonText": "閉じる",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.title": "Elastic Synthetics",
     "xpack.synthetics.overview.pageHeader.title": "概要",
     "xpack.synthetics.overview.pagination.ariaLabel": "監視概要のページネーション",
     "xpack.synthetics.overviewPage.overviewCrumb": "概要",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 2c6442bcb3b31..3bf1266260e63 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -31336,10 +31336,6 @@
     "xpack.synthetics.overview.duration.label": "持续时间",
     "xpack.synthetics.overview.heading": "监测",
     "xpack.synthetics.overview.monitors.label": "监测",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.announcementLink": "阅读公告",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.content": "Uptime 现在正在预览对脚本化多步骤可用性检查的支持。这意味着您可以与网页元素进行交互，并检查整个过程（例如购买或登录系统）的可用性，而不仅仅是简单的单个页面启动/关闭检查。请单击下面的内容以了解详情，如果您想率先使用这些功能，则可以下载我们的预览组合代理，并在 Uptime 中查看组合检查。",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.dismissButtonText": "关闭",
-    "xpack.synthetics.overview.pageHeader.syntheticsCallout.title": "Elastic Synthetics",
     "xpack.synthetics.overview.pageHeader.title": "概览",
     "xpack.synthetics.overview.pagination.ariaLabel": "监测概述的分页",
     "xpack.synthetics.overviewPage.overviewCrumb": "概览",
diff --git a/x-pack/plugins/ux/public/hooks/use_client_metrics_query.ts b/x-pack/plugins/ux/public/hooks/use_client_metrics_query.ts
index a28e59453b1ee..9ad7af4eb360a 100644
--- a/x-pack/plugins/ux/public/hooks/use_client_metrics_query.ts
+++ b/x-pack/plugins/ux/public/hooks/use_client_metrics_query.ts
@@ -35,11 +35,11 @@ export function useClientMetricsQuery() {
   );
 
   const data = useMemo(() => {
-    if (!esQueryResponse) return {};
+    if (!esQueryResponse?.aggregations) return {};
 
     const {
       hasFetchStartField: { backEnd, totalPageLoadDuration },
-    } = esQueryResponse.aggregations!;
+    } = esQueryResponse.aggregations;
 
     const pkey = percentile.toFixed(1);
 
diff --git a/x-pack/test/fleet_api_integration/apis/agents/status.ts b/x-pack/test/fleet_api_integration/apis/agents/status.ts
index 0d22eeeae6228..63445845f6612 100644
--- a/x-pack/test/fleet_api_integration/apis/agents/status.ts
+++ b/x-pack/test/fleet_api_integration/apis/agents/status.ts
@@ -25,6 +25,7 @@ export default function ({ getService }: FtrProviderContext) {
         index: AGENTS_INDEX,
         body: {
           doc: {
+            policy_revision_idx: 1,
             last_checkin: new Date().toISOString(),
           },
         },
@@ -35,6 +36,7 @@ export default function ({ getService }: FtrProviderContext) {
         index: AGENTS_INDEX,
         body: {
           doc: {
+            policy_revision_idx: 1,
             last_checkin: new Date(Date.now() - 1000 * 60 * 3).toISOString(), // 2m online
           },
         },
@@ -46,6 +48,7 @@ export default function ({ getService }: FtrProviderContext) {
         index: AGENTS_INDEX,
         body: {
           doc: {
+            policy_revision_idx: 1,
             last_checkin: new Date(Date.now() - 1000 * 60 * 6).toISOString(), // 6m offline
           },
         },
@@ -57,27 +60,45 @@ export default function ({ getService }: FtrProviderContext) {
         index: AGENTS_INDEX,
         body: {
           doc: {
+            policy_revision_idx: 1,
             last_checkin: new Date().toISOString(),
             upgrade_started_at: new Date().toISOString(),
           },
         },
       });
-      // 1 agent inactive
+      // 1 agent reassigned to a new policy
       await es.create({
         id: 'agent5',
         refresh: 'wait_for',
         index: AGENTS_INDEX,
-        body: {
-          doc: {
-            active: false,
-            access_api_key_id: 'api-key-4',
-            policy_id: 'policy1',
-            type: 'PERMANENT',
-            local_metadata: { host: { hostname: 'host5' } },
-            user_provided_metadata: {},
-            enrolled_at: '2022-06-21T12:17:25Z',
-            last_checkin: '2022-06-27T12:29:29Z',
-          },
+        document: {
+          active: true,
+          access_api_key_id: 'api-key-4',
+          policy_id: 'policy1',
+          type: 'PERMANENT',
+          local_metadata: { host: { hostname: 'host5' } },
+          user_provided_metadata: {},
+          enrolled_at: '2022-06-21T12:17:25Z',
+          last_checkin: new Date().toISOString(),
+          policy_revision_idx: null,
+        },
+      });
+
+      // 1 agent inactive
+      await es.create({
+        id: 'agent6',
+        refresh: 'wait_for',
+        index: AGENTS_INDEX,
+        document: {
+          active: false,
+          access_api_key_id: 'api-key-4',
+          policy_id: 'policy1',
+          type: 'PERMANENT',
+          policy_revision_idx: 1,
+          local_metadata: { host: { hostname: 'host6' } },
+          user_provided_metadata: {},
+          enrolled_at: '2022-06-21T12:17:25Z',
+          last_checkin: '2022-06-27T12:29:29Z',
         },
       });
     });
@@ -87,16 +108,15 @@ export default function ({ getService }: FtrProviderContext) {
 
     it('should return the status of agents', async () => {
       const { body: apiResponse } = await supertest.get(`/api/fleet/agent_status`).expect(200);
-
       expect(apiResponse).to.eql({
         results: {
           events: 0,
-          total: 4,
+          total: 5,
           online: 2,
           error: 0,
           offline: 1,
-          updating: 1,
-          other: 2,
+          updating: 2,
+          other: 3,
           inactive: 1,
         },
       });
diff --git a/x-pack/test/fleet_api_integration/helpers.ts b/x-pack/test/fleet_api_integration/helpers.ts
index 6e1a2edaf9f75..552c83d3ca890 100644
--- a/x-pack/test/fleet_api_integration/helpers.ts
+++ b/x-pack/test/fleet_api_integration/helpers.ts
@@ -47,23 +47,24 @@ export async function generateAgent(
 
   switch (status) {
     case 'error':
-      data = { last_checkin_status: 'error' };
+      data = { policy_revision_idx: 1, last_checkin_status: 'error' };
       break;
     case 'degraded':
-      data = { last_checkin_status: 'degraded' };
+      data = { policy_revision_idx: 1, last_checkin_status: 'degraded' };
       break;
     case 'offline':
-      data = { last_checkin: '2017-06-07T18:59:04.498Z' };
+      data = { policy_revision_idx: 1, last_checkin: '2017-06-07T18:59:04.498Z' };
       break;
     // Agent with last checkin status as error and currently unenrolling => should displayd updating status
     case 'error-unenrolling':
       data = {
+        policy_revision_idx: 1,
         last_checkin_status: 'error',
         unenrollment_started_at: '2017-06-07T18:59:04.498Z',
       };
       break;
     default:
-      data = { last_checkin: new Date().toISOString() };
+      data = { policy_revision_idx: 1, last_checkin: new Date().toISOString() };
   }
 
   await es.index({
diff --git a/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts b/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts
index 963acca117881..ddfbac948d0fa 100644
--- a/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts
@@ -47,7 +47,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     });
 
     it('displays to define default connector', async () => {
-      await testSubjects.click('uptimeDismissSyntheticsCallout');
       await hideErrorToast();
       await testSubjects.click('uptimeDisplayDefineConnector');
       await testSubjects.existOrFail('uptimeSettingsDefineConnector');
diff --git a/yarn.lock b/yarn.lock
index 0b584c52076c4..605a9619eb39a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3021,6 +3021,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/chart-icons@link:bazel-bin/packages/kbn-chart-icons":
+  version "0.0.0"
+  uid ""
+
 "@kbn/ci-stats-core@link:bazel-bin/packages/kbn-ci-stats-core":
   version "0.0.0"
   uid ""
@@ -6933,6 +6937,10 @@
   version "0.0.0"
   uid ""
 
+"@types/kbn__chart-icons@link:bazel-bin/packages/kbn-chart-icons/npm_module_types":
+  version "0.0.0"
+  uid ""
+
 "@types/kbn__ci-stats-core@link:bazel-bin/packages/kbn-ci-stats-core/npm_module_types":
   version "0.0.0"
   uid ""