From 81ac7e24c5db0646e3ceb8e79fb690d620d16061 Mon Sep 17 00:00:00 2001
From: Yngrid Coello <yngrid.coello@elastic.co>
Date: Mon, 10 Jul 2023 14:28:30 +0200
Subject: [PATCH] Landing page style changed

---
 .../public/components/app/home/index.tsx      | 363 ++++++++++--------
 .../public/icons/apache.svg                   |  59 +++
 .../public/icons/apm.svg                      |  14 +
 .../public/icons/aws.svg                      |  16 +
 .../public/icons/azure.svg                    |  10 +
 .../public/icons/gcp.svg                      |  26 ++
 .../public/icons/kinesis.svg                  |  21 +
 .../public/icons/kubernetes.svg               |  10 +
 .../public/icons/logging.svg                  |  16 +
 .../public/icons/nginx.svg                    |  13 +
 .../public/icons/opentelemetry.svg            |   1 +
 .../public/icons/system.svg                   |   1 +
 12 files changed, 387 insertions(+), 163 deletions(-)
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/apache.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/apm.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/aws.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/azure.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/gcp.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/kinesis.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/kubernetes.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/logging.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/nginx.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/opentelemetry.svg
 create mode 100644 x-pack/plugins/observability_onboarding/public/icons/system.svg

diff --git a/x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx b/x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx
index da2441a1d8b7a..e129fc18a72ce 100644
--- a/x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx
@@ -6,24 +6,53 @@
  */
 
 import {
+  EuiBadge,
+  EuiButton,
+  EuiCard,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiHorizontalRule,
+  EuiIcon,
+  EuiLink,
   EuiSpacer,
-  EuiTitle,
   EuiText,
-  EuiCard,
-  EuiHorizontalRule,
-  EuiButtonEmpty,
-  EuiBadge,
+  EuiTitle,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public';
 import React from 'react';
-import { useKibanaNavigation } from '../../../hooks/use_kibana_navigation';
+import styled from '@emotion/styled';
 import { breadcrumbsApp } from '../../../application/app';
+import { useKibanaNavigation } from '../../../hooks/use_kibana_navigation';
+import apacheIcon from '../../../icons/apache.svg';
+import apmIcon from '../../../icons/apm.svg';
+import awsIcon from '../../../icons/aws.svg';
+import azureIcon from '../../../icons/azure.svg';
+import gcpIcon from '../../../icons/gcp.svg';
+import kinesisIcon from '../../../icons/kinesis.svg';
+import kubernetesIcon from '../../../icons/kubernetes.svg';
+import loggingIcon from '../../../icons/logging.svg';
+import nginxIcon from '../../../icons/nginx.svg';
+import opentelemetryIcon from '../../../icons/opentelemetry.svg';
+import systemIcon from '../../../icons/system.svg';
+
+const StyledItem = styled(EuiFlexItem)`
+  flex-direction: row;
+  &:before {
+    content: '•';
+    width: 5px;
+    height: 5px;
+    margin: 0 20px 0 16px;
+  }
+  > a {
+    min-width: 100%;
+  }
+`;
 
 export function Home() {
   useBreadcrumbs([], breadcrumbsApp);
+  const { euiTheme } = useEuiTheme();
 
   const { navigateToKibanaUrl } = useKibanaNavigation();
 
@@ -43,8 +72,8 @@ export function Home() {
   const handleClickSampleData = () => {
     navigateToKibanaUrl('/app/home#/tutorial_directory/sampleData');
   };
-  const handleClickSkip = () => {
-    navigateToKibanaUrl('/app/observability/overview');
+  const handleClickUploadFile = () => {
+    navigateToKibanaUrl('/app/home#/tutorial_directory/fileDataViz');
   };
 
   return (
@@ -68,7 +97,7 @@ export function Home() {
           <p>
             {i18n.translate('xpack.observability_onboarding.home.description', {
               defaultMessage:
-                'Monitor and gain insights across your cloud-native and distributed systems on a single platform.',
+                'Select your method for collecting data into Observability.',
             })}
           </p>
         </EuiText>
@@ -78,129 +107,79 @@ export function Home() {
         <EuiFlexGroup alignItems="stretch">
           <EuiFlexItem>
             <EuiCard
-              icon={
-                <EuiBadge color="hollow" iconType="bolt">
-                  {i18n.translate(
-                    'xpack.observability_onboarding.card.systemLogs.quickstartBadge',
-                    {
-                      defaultMessage: 'Quickstart',
-                    }
-                  )}
-                </EuiBadge>
-              }
+              icon={<EuiIcon type={systemIcon} size="l" />}
+              betaBadgeProps={{
+                color: 'accent',
+                label: i18n.translate(
+                  'xpack.observability_onboarding.card.systemLogs.quickstartBadge',
+                  { defaultMessage: 'Quickstart' }
+                ),
+              }}
               title={i18n.translate(
                 'xpack.observability_onboarding.card.systemLogs.title',
-                { defaultMessage: 'Collect system logs' }
+                { defaultMessage: 'Stream host system logs' }
               )}
-              selectable={{
-                onClick: handleClickSystemLogs,
-                color: 'primary',
-                fill: true,
-                fullWidth: false,
-                style: { margin: 'auto' },
+              footer={
+                <EuiButton onClick={handleClickSystemLogs} color="primary" fill>
+                  {getStartedLabel}
+                </EuiButton>
+              }
+              style={{
+                borderColor: euiTheme.colors.accent,
+                borderWidth: '2px',
               }}
-              paddingSize="xl"
+              paddingSize="l"
+              display="plain"
+              hasBorder
             >
-              <EuiHorizontalRule
-                margin="m"
-                style={{
-                  marginLeft: 'auto',
-                  marginRight: 'auto',
-                  width: '80%',
-                }}
-              />
+              <EuiSpacer size="s" />
+              <EuiBadge color="hollow">{elasticAgentLabel}</EuiBadge>
+              <EuiSpacer size="m" />
               <EuiText color="subdued" size="s" textAlign="left">
                 <p>
                   {i18n.translate(
                     'xpack.observability_onboarding.card.systemLogs.description1',
                     {
                       defaultMessage:
-                        'The quickest path to onboard log data and start analysing it straight away.',
-                    }
-                  )}
-                </p>
-                <p>
-                  {i18n.translate(
-                    'xpack.observability_onboarding.card.systemLogs.description2',
-                    {
-                      defaultMessage:
-                        'Monitor servers, personal computers and more by collecting logs from your machine.',
+                        'The quickest path to onboard log data from your own machine or server.',
                     }
                   )}
                 </p>
               </EuiText>
+              <EuiSpacer size="s" />
             </EuiCard>
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiCard
-              icon={
-                <EuiBadge color="hollow" iconType="launch">
-                  {i18n.translate(
-                    'xpack.observability_onboarding.card.customLogs.fewMinutesBadge',
-                    { defaultMessage: 'In a few minutes' }
-                  )}
-                </EuiBadge>
-              }
+              icon={<EuiIcon type={loggingIcon} size="l" />}
               title={i18n.translate(
                 'xpack.observability_onboarding.card.customLogs.title',
-                { defaultMessage: 'Collect custom logs' }
+                { defaultMessage: 'Stream log files' }
               )}
-              selectable={{
-                onClick: handleClickCustomLogs,
-                color: 'primary',
-                fill: true,
-                fullWidth: false,
-                style: { margin: 'auto' },
-              }}
-              paddingSize="xl"
+              footer={
+                <EuiButton onClick={handleClickCustomLogs} color="primary" fill>
+                  {getStartedLabel}
+                </EuiButton>
+              }
+              paddingSize="l"
+              display="plain"
+              hasBorder
             >
-              <EuiHorizontalRule
-                margin="m"
-                style={{
-                  marginLeft: 'auto',
-                  marginRight: 'auto',
-                  width: '80%',
-                }}
-              />
+              <EuiSpacer size="s" />
+              <EuiBadge color="hollow">{elasticAgentLabel}</EuiBadge>
+              <EuiSpacer size="m" />
               <EuiText color="subdued" size="s" textAlign="left">
                 <p>
                   {i18n.translate(
                     'xpack.observability_onboarding.card.customLogs.description.text',
                     {
                       defaultMessage:
-                        'Choose what logs to collect, configure an ingest pipeline, and explore your data.',
+                        'Stream any logs into Elastic in a simple way and explore their data.',
                     }
                   )}
                 </p>
-                <ul>
-                  <li>
-                    {i18n.translate(
-                      'xpack.observability_onboarding.card.customLogs.description.example.streamlogs',
-                      { defaultMessage: 'Stream custom logs' }
-                    )}
-                  </li>
-                  <li>
-                    {i18n.translate(
-                      'xpack.observability_onboarding.card.customLogs.description.example.networkStream',
-                      {
-                        defaultMessage: 'Collect network streaming logs',
-                      }
-                    )}
-                  </li>
-                  <li>
-                    {i18n.translate(
-                      'xpack.observability_onboarding.card.customLogs.description.example.uploadLogFile',
-                      { defaultMessage: 'Upload log files' }
-                    )}
-                  </li>
-                  <li>
-                    {i18n.translate(
-                      'xpack.observability_onboarding.card.customLogs.description.example.andMore',
-                      { defaultMessage: '... and more' }
-                    )}
-                  </li>
-                </ul>
               </EuiText>
+              <EuiSpacer size="s" />
             </EuiCard>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -209,98 +188,156 @@ export function Home() {
         <EuiFlexGroup alignItems="stretch">
           <EuiFlexItem>
             <EuiCard
-              betaBadgeProps={{ label: setupGuideBadgeLabel }}
+              icon={
+                <EuiFlexGroup gutterSize="m" justifyContent="center">
+                  <EuiIcon type={apmIcon} size="l" />
+                  <EuiIcon type={opentelemetryIcon} size="l" />
+                </EuiFlexGroup>
+              }
               title={i18n.translate(
                 'xpack.observability_onboarding.card.apm.title',
                 {
-                  defaultMessage:
-                    'Monitor my application performance (APM / tracing)',
+                  defaultMessage: 'Collect application performance data',
                 }
               )}
-              titleSize="xs"
-              paddingSize="xl"
-              onClick={handleClickApmSetupGuide}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiCard
-              betaBadgeProps={{ label: setupGuideBadgeLabel }}
-              title={i18n.translate(
-                'xpack.observability_onboarding.card.k8s.title',
-                { defaultMessage: 'Monitor my kubernetes clusters' }
-              )}
-              titleSize="xs"
-              paddingSize="xl"
-              onClick={handleClickKubernetesSetupGuide}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} style={{ width: '100%' }}>
-        <EuiHorizontalRule margin="l" />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} style={{ width: '100%' }}>
-        <EuiFlexGroup alignItems="stretch">
-          <EuiFlexItem>
-            <EuiCard
-              betaBadgeProps={{
-                label: i18n.translate(
-                  'xpack.observability_onboarding.card.integrations.badgeLabel',
-                  { defaultMessage: 'Integrations' }
-                ),
-              }}
-              title={i18n.translate(
-                'xpack.observability_onboarding.card.integrations.title',
+              description={i18n.translate(
+                'xpack.observability_onboarding.card.apm.description',
                 {
                   defaultMessage:
-                    'Explore 300+ ways of ingesting data with our Integrations',
+                    'Collect traces, logs, and metrics from OpenTelemetry or APM custom agent.',
                 }
               )}
+              footer={
+                <EuiButton onClick={handleClickApmSetupGuide} color="primary">
+                  {getStartedLabel}
+                </EuiButton>
+              }
+              paddingSize="m"
               titleSize="xs"
-              paddingSize="xl"
-              onClick={handleClickIntegrations}
+              display="plain"
+              hasBorder
+              onClick={handleClickApmSetupGuide}
             />
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiCard
-              betaBadgeProps={{
-                label: i18n.translate(
-                  'xpack.observability_onboarding.card.sampleData.badgeLabel',
-                  { defaultMessage: 'Sample data' }
-                ),
-              }}
+              icon={<EuiIcon type={kubernetesIcon} size="l" />}
               title={i18n.translate(
-                'xpack.observability_onboarding.card.sampleData.title',
+                'xpack.observability_onboarding.card.k8s.title',
+                { defaultMessage: 'Collect Kubernetes clusters data' }
+              )}
+              description={i18n.translate(
+                'xpack.observability_onboarding.card.k8s.description',
                 {
                   defaultMessage:
-                    'Explore data, visualizations, and dashboards samples',
+                    'Collect logs and metrics from Kubernetes clusters with Elastic agent.',
                 }
               )}
+              footer={
+                <EuiButton
+                  onClick={handleClickKubernetesSetupGuide}
+                  color="primary"
+                >
+                  {getStartedLabel}
+                </EuiButton>
+              }
               titleSize="xs"
-              paddingSize="xl"
-              onClick={handleClickSampleData}
+              paddingSize="m"
+              display="plain"
+              hasBorder
             />
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem grow={false} style={{ width: '100%' }}>
-        <EuiHorizontalRule margin="l" />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiButtonEmpty
-          onClick={handleClickSkip}
-          data-test-subj="obltOnboardingHomeSkipButton"
-        >
-          {i18n.translate('xpack.observability_onboarding.skipLinkLabel', {
-            defaultMessage: 'Skip for now',
-          })}
-        </EuiButtonEmpty>
+        <EuiCard
+          icon={
+            <EuiFlexGroup
+              gutterSize="m"
+              justifyContent="center"
+              style={{ marginTop: euiTheme.size.l }}
+            >
+              <EuiIcon type={kinesisIcon} size="l" />
+              <EuiIcon type={awsIcon} size="l" />
+              <EuiIcon type={apacheIcon} size="l" />
+              <EuiIcon type={nginxIcon} size="l" />
+              <EuiIcon type={gcpIcon} size="l" />
+              <EuiIcon type={azureIcon} size="l" />
+            </EuiFlexGroup>
+          }
+          title={i18n.translate(
+            'xpack.observability_onboarding.card.integrations.title',
+            {
+              defaultMessage:
+                'Explore 300+ ways of ingesting data with our integrations',
+            }
+          )}
+          footer={
+            <>
+              <EuiButton onClick={handleClickIntegrations} color="primary">
+                {i18n.translate(
+                  'xpack.observability_onboarding.card.integrations.start',
+                  { defaultMessage: 'Start exploring' }
+                )}
+              </EuiButton>
+              <EuiHorizontalRule />
+              <EuiFlexGroup justifyContent="center">
+                <EuiFlexItem grow={false}>
+                  {i18n.translate(
+                    'xpack.observability_onboarding.card.integrations.quickLinks',
+                    { defaultMessage: 'Quick links:' }
+                  )}
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiFlexGroup gutterSize="none">
+                    <EuiLink onClick={handleClickSampleData}>
+                      {i18n.translate(
+                        'xpack.observability_onboarding.card.integrations.sampleData',
+                        { defaultMessage: 'Use sample data' }
+                      )}
+                    </EuiLink>
+                    <StyledItem>
+                      <EuiLink onClick={handleClickUploadFile}>
+                        {i18n.translate(
+                          'xpack.observability_onboarding.card.integrations.uploadFile',
+                          { defaultMessage: 'Upload a file' }
+                        )}
+                      </EuiLink>
+                    </StyledItem>
+                    <StyledItem>
+                      <EuiLink
+                        href="https://www.elastic.co/guide/en/kinesis/current/aws-firehose-setup-guide.html"
+                        target="_blank"
+                        external
+                      >
+                        {i18n.translate(
+                          'xpack.observability_onboarding.card.integrations.awsFirehose',
+                          { defaultMessage: 'AWS Firehose' }
+                        )}
+                      </EuiLink>
+                    </StyledItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiSpacer size="m" />
+            </>
+          }
+          titleSize="xs"
+          paddingSize="none"
+          display="plain"
+          hasBorder
+        />
       </EuiFlexItem>
     </EuiFlexGroup>
   );
 }
 
-const setupGuideBadgeLabel = i18n.translate(
-  'xpack.observability_onboarding.card.setupGuide',
-  { defaultMessage: 'Setup guide' }
+const getStartedLabel = i18n.translate(
+  'xpack.observability_onboarding.card.getStarted',
+  { defaultMessage: 'Get started' }
+);
+
+const elasticAgentLabel = i18n.translate(
+  'xpack.observability_onboarding.card.elasticAgent',
+  { defaultMessage: 'Elastic agent' }
 );
diff --git a/x-pack/plugins/observability_onboarding/public/icons/apache.svg b/x-pack/plugins/observability_onboarding/public/icons/apache.svg
new file mode 100644
index 0000000000000..7a86ab4ce06fc
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/apache.svg
@@ -0,0 +1,59 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Apache" clip-path="url(#clip0_2818_20591)">
+<g id="Group">
+<path id="Vector" d="M17.219 0.13558C16.8454 0.355035 16.2197 0.985385 15.4727 1.89589V1.95192L16.1264 3.16126L16.159 3.18461C16.64 2.49823 17.1256 1.87721 17.6205 1.34959C17.6579 1.30756 17.6765 1.28889 17.6765 1.28889C17.6579 1.30756 17.6392 1.33091 17.6205 1.34959C17.4618 1.52702 16.9762 2.08733 16.2478 3.20795L16.3318 3.22663C16.3318 3.22663 18.0361 3.05854 18.8579 2.91846L18.9046 2.87644C19.166 1.41029 18.6478 0.737914 18.6478 0.737914C18.6478 0.737914 17.9941 -0.317339 17.219 0.13558Z" fill="url(#paint0_linear_2818_20591)"/>
+<path id="Vector_2" d="M14.1427 6.52314C14.3528 6.13559 14.5629 5.75271 14.773 5.38384C14.9925 5.00096 15.2166 4.62742 15.4454 4.26789C15.4594 4.24921 15.4734 4.22587 15.4828 4.20252C15.7069 3.84766 15.931 3.51147 16.1598 3.18462L15.4734 1.89124C15.4221 1.95194 15.3707 2.01731 15.3193 2.08268C15.1232 2.33015 14.9178 2.59162 14.7077 2.87178C14.4695 3.18929 14.2267 3.52548 13.9793 3.88034C13.7505 4.20719 13.517 4.55271 13.2882 4.90291C13.0921 5.20641 12.8913 5.51458 12.6952 5.83676C12.6859 5.85077 12.6812 5.86011 12.6719 5.87411V5.92548L13.5263 7.62042L13.5637 7.63443C13.7551 7.26089 13.9466 6.88734 14.1427 6.52314Z" fill="url(#paint1_linear_2818_20591)"/>
+<path id="Vector_3" d="M10.421 14.8204C10.5751 14.4189 10.7386 14.0126 10.902 13.6017C11.0607 13.2095 11.2195 12.8126 11.3876 12.4157C11.551 12.0189 11.7238 11.622 11.8965 11.2204C12.074 10.8142 12.2514 10.408 12.4335 10.0064C12.6156 9.60952 12.7977 9.21264 12.9845 8.82042C13.0498 8.68034 13.1199 8.53559 13.1899 8.39552C13.3066 8.15271 13.428 7.90991 13.5448 7.67178C13.5494 7.65777 13.5588 7.64843 13.5635 7.63443L12.6716 5.87411C12.6576 5.89746 12.6436 5.92081 12.6296 5.94415C12.4242 6.28501 12.214 6.63054 12.0133 6.9854C11.8078 7.34493 11.607 7.70913 11.4109 8.07801C11.2428 8.39085 11.0841 8.70369 10.9253 9.0212C10.8926 9.08657 10.8646 9.14727 10.8319 9.21264C10.6358 9.61419 10.4631 9.99707 10.3043 10.3706C10.1269 10.7908 9.96812 11.1924 9.82805 11.5753C9.73466 11.8274 9.65528 12.0656 9.57591 12.299C9.5152 12.4951 9.4545 12.6959 9.39847 12.892C9.26306 13.3589 9.151 13.8212 9.05762 14.2881L9.07162 14.3442L9.9261 16.0438L9.95412 16.0578C10.0708 15.7403 10.1922 15.4228 10.3183 15.0959C10.351 15.0025 10.3884 14.9138 10.421 14.8204Z" fill="url(#paint2_linear_2818_20591)"/>
+<path id="Vector_4" d="M9.04816 14.3488C8.93609 14.9138 8.85672 15.4788 8.81469 16.0391C8.81469 16.0578 8.81003 16.0764 8.81003 16.0998C8.52987 15.6515 7.78279 15.2173 7.78279 15.2173C8.31975 15.9924 8.72598 16.7628 8.78668 17.5192C8.50185 17.5799 8.10964 17.4912 7.65205 17.3278C8.12364 17.762 8.47851 17.8834 8.61859 17.9161C8.18434 17.9441 7.73143 18.243 7.27384 18.5838C7.94154 18.313 8.47851 18.2056 8.86606 18.2897C8.25438 20.022 7.64271 21.9364 7.02637 23.9628C7.21314 23.9068 7.3252 23.7807 7.39057 23.608C7.49796 23.2391 8.22637 20.8298 9.361 17.6593C9.39368 17.5706 9.42637 17.4772 9.45905 17.3885C9.46839 17.3652 9.47773 17.3371 9.48707 17.3138C9.60847 16.9823 9.72987 16.6414 9.86061 16.2959C9.88862 16.2165 9.92131 16.1371 9.94932 16.0578V16.0531L9.0575 14.2881C9.0575 14.3115 9.05283 14.3301 9.04816 14.3488Z" fill="url(#paint3_linear_2818_20591)"/>
+<path id="Vector_5" d="M16.2483 3.21262C16.0475 3.52079 15.8281 3.87099 15.5899 4.26787C15.5759 4.28655 15.5666 4.3099 15.5526 4.32857C15.3471 4.6741 15.1323 5.04764 14.9036 5.4632C14.7074 5.81807 14.502 6.20095 14.2872 6.61651C14.1004 6.97605 13.909 7.35426 13.7129 7.76048L13.7549 7.77916L15.9261 7.54569L15.9775 7.50834C16.6358 7.20484 16.93 6.92935 17.2148 6.53246C17.2895 6.42507 17.3689 6.30834 17.4436 6.19161C17.6771 5.82741 17.9059 5.43052 18.1067 5.03363C18.3028 4.65075 18.4755 4.26787 18.6109 3.92702C18.695 3.70756 18.765 3.50678 18.8117 3.32935C18.8537 3.1706 18.8864 3.02118 18.9098 2.8811C18.032 3.03519 16.9534 3.17994 16.2483 3.21262Z" fill="url(#paint4_linear_2818_20591)"/>
+<path id="Vector_6" d="M13.6282 7.94258C13.5535 8.10133 13.4741 8.26476 13.3948 8.42818C13.3107 8.60561 13.222 8.79238 13.1379 8.97916C13.0959 9.07254 13.0492 9.17059 13.0072 9.26398C12.8718 9.55347 12.7411 9.85231 12.601 10.1605C12.4329 10.5387 12.2601 10.9356 12.0874 11.3418C11.9193 11.734 11.7512 12.1356 11.5831 12.5558C11.4197 12.9527 11.2562 13.3636 11.0928 13.7838C10.9434 14.162 10.794 14.5449 10.6446 14.9465C10.6352 14.9651 10.6305 14.9838 10.6212 15.0025C10.4718 15.3994 10.3261 15.8031 10.172 16.2187C10.1673 16.228 10.159 16.2523 10.1543 16.2617L10.1865 16.2688L10.836 16.199L10.8727 16.1838C10.8587 16.1792 10.85 16.1605 10.836 16.1558C11.6951 16.0484 12.8391 15.4041 13.5815 14.6103C13.9224 14.2461 14.2305 13.8118 14.52 13.3076C14.7348 12.9293 14.9309 12.5138 15.1224 12.0515C15.2905 11.65 15.4492 11.2111 15.6033 10.7395C15.4072 10.8422 15.1784 10.9216 14.9309 10.9729C14.8889 10.9823 14.8422 10.9916 14.7955 11.0009C14.7488 11.0103 14.7021 11.015 14.6601 11.0243C15.4632 10.7161 15.9675 10.1185 16.3364 9.39005C16.1263 9.5348 15.7807 9.72157 15.3698 9.81495C15.3138 9.82896 15.2578 9.8383 15.1971 9.84764C15.1831 9.84764 15.1691 9.85231 15.1551 9.85231C15.4352 9.73557 15.6687 9.60484 15.8741 9.45075C15.9162 9.41807 15.9582 9.38538 16.0002 9.34803C16.0609 9.292 16.1216 9.23596 16.1776 9.17993C16.215 9.14258 16.2477 9.10522 16.285 9.0632C16.3644 8.96982 16.4391 8.86709 16.5091 8.75503C16.5325 8.72235 16.5512 8.68499 16.5745 8.65231C16.6025 8.60094 16.6259 8.54958 16.6492 8.49822C16.7613 8.2741 16.85 8.07332 16.92 7.89589C16.9574 7.80717 16.9854 7.72779 17.0134 7.64842C17.0228 7.6204 17.0321 7.58772 17.0461 7.5597C17.0741 7.47565 17.0975 7.40094 17.1162 7.33091C17.1442 7.23285 17.1582 7.15347 17.1675 7.09744C17.1395 7.12079 17.1115 7.13947 17.0741 7.16281C16.8313 7.30756 16.4158 7.4383 16.0796 7.499L16.7426 7.42429L16.0796 7.499C16.0329 7.50834 16.0002 7.51301 15.9628 7.52235C15.966 7.51923 15.2171 7.59841 13.7163 7.75988C13.707 7.76922 13.6516 7.88655 13.6282 7.94258Z" fill="url(#paint5_linear_2818_20591)"/>
+<path id="Vector_7" d="M10.0843 16.436C9.96757 16.7581 9.84617 17.0897 9.72944 17.4258C9.72944 17.4305 9.72477 17.4352 9.72477 17.4399C9.70609 17.4865 9.69208 17.5332 9.67341 17.5846C9.59403 17.8134 9.52399 18.0142 9.36523 18.4811C9.62671 18.6025 9.83683 18.9153 10.0376 19.2749C10.0189 18.906 9.86485 18.5558 9.57068 18.2897C10.8641 18.3457 11.98 18.0188 12.5543 17.0756C12.6057 16.9916 12.6524 16.9029 12.6944 16.8095C12.4329 17.141 12.1061 17.2811 11.4991 17.2484H11.4944H11.4991C12.4003 16.8469 12.8485 16.4593 13.2501 15.8196C13.3434 15.6655 13.4368 15.5021 13.5302 15.32C12.7411 16.1278 11.8306 16.3566 10.8734 16.1838L10.1543 16.2632C10.131 16.3146 10.1076 16.3753 10.0843 16.436Z" fill="url(#paint6_linear_2818_20591)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_2818_20591" x1="16.2405" y1="2.07014" x2="20.3515" y2="0.432102" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F69923"/>
+<stop offset="0.3123" stop-color="#F79A23"/>
+<stop offset="0.8383" stop-color="#E97826"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2818_20591" x1="5.08034" y1="12.064" x2="16.6478" y2="8.68921" gradientUnits="userSpaceOnUse">
+<stop offset="0.3233" stop-color="#9E2064"/>
+<stop offset="0.6302" stop-color="#C92037"/>
+<stop offset="0.7514" stop-color="#CD2335"/>
+<stop offset="1" stop-color="#E97826"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2818_20591" x1="5.45097" y1="13.3666" x2="15.928" y2="12.5055" gradientUnits="userSpaceOnUse">
+<stop offset="0.3233" stop-color="#9E2064"/>
+<stop offset="0.6302" stop-color="#C92037"/>
+<stop offset="0.7514" stop-color="#CD2335"/>
+<stop offset="1" stop-color="#E97826"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2818_20591" x1="6.491" y1="19.367" x2="11.8663" y2="19.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="#282662"/>
+<stop offset="0.09548" stop-color="#662E8D"/>
+<stop offset="0.7882" stop-color="#9F2064"/>
+<stop offset="0.9487" stop-color="#CD2032"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2818_20591" x1="8.01185" y1="25.5941" x2="16.1797" y2="3.39516" gradientUnits="userSpaceOnUse">
+<stop offset="0.3233" stop-color="#9E2064"/>
+<stop offset="0.6302" stop-color="#C92037"/>
+<stop offset="0.7514" stop-color="#CD2335"/>
+<stop offset="1" stop-color="#E97826"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2818_20591" x1="7.70809" y1="19.0681" x2="20.4477" y2="9.71738" gradientUnits="userSpaceOnUse">
+<stop offset="0.3233" stop-color="#9E2064"/>
+<stop offset="0.6302" stop-color="#C92037"/>
+<stop offset="0.7514" stop-color="#CD2335"/>
+<stop offset="1" stop-color="#E97826"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2818_20591" x1="8.79576" y1="22.9357" x2="13.8029" y2="9.72698" gradientUnits="userSpaceOnUse">
+<stop stop-color="#282662"/>
+<stop offset="0.09548" stop-color="#662E8D"/>
+<stop offset="0.7882" stop-color="#9F2064"/>
+<stop offset="0.9487" stop-color="#CD2032"/>
+</linearGradient>
+<clipPath id="clip0_2818_20591">
+<rect width="24" height="24" fill="white" transform="translate(0.998047 0.000183105)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/apm.svg b/x-pack/plugins/observability_onboarding/public/icons/apm.svg
new file mode 100644
index 0000000000000..d663bbe1b5062
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/apm.svg
@@ -0,0 +1,14 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Elastic Logo / APM" clip-path="url(#clip0_2818_20521)">
+<g id="logo">
+<path id="Vector" d="M24.25 9.15527e-05H0.25V7.50009H24.25V9.15527e-05Z" fill="#F04E98"/>
+<path id="Vector_2" d="M7.75 7.50009H24.25C24.25 8.48501 24.056 9.46028 23.6791 10.3702C23.3022 11.2802 22.7497 12.107 22.0533 12.8034C21.3569 13.4998 20.5301 14.0523 19.6201 14.4292C18.7102 14.8061 17.7349 15.0001 16.75 15.0001H7.75V7.50009Z" fill="#343741"/>
+<path id="Vector_3" d="M24.25 17.2501H14.5V24.0001H24.25V17.2501Z" fill="#0077CC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2818_20521">
+<rect width="24" height="24" fill="white" transform="translate(0.25 9.15527e-05)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/aws.svg b/x-pack/plugins/observability_onboarding/public/icons/aws.svg
new file mode 100644
index 0000000000000..af17aa1ceb105
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/aws.svg
@@ -0,0 +1,16 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="AWS" clip-path="url(#clip0_2818_20427)">
+<g id="Group">
+<path id="Vector" d="M7.76183 10.409C7.76183 10.7008 7.79376 10.9375 7.84963 11.111C7.91348 11.2846 7.9933 11.4739 8.10504 11.679C8.14495 11.7421 8.16091 11.8052 8.16091 11.8604C8.16091 11.9393 8.11302 12.0181 8.00926 12.097L7.50643 12.4283C7.43459 12.4757 7.36276 12.4993 7.29891 12.4993C7.21909 12.4993 7.13928 12.4599 7.05946 12.3889C6.94772 12.2706 6.85194 12.1444 6.77213 12.0181C6.69231 11.884 6.6125 11.7342 6.5247 11.5527C5.90214 12.2785 5.11996 12.6413 4.17814 12.6413C3.5077 12.6413 2.97294 12.452 2.58184 12.0734C2.19075 11.6947 1.99121 11.1899 1.99121 10.5589C1.99121 9.88836 2.23066 9.34409 2.71753 8.9339C3.2044 8.52372 3.8509 8.31863 4.67299 8.31863C4.94436 8.31863 5.22372 8.3423 5.51903 8.38174C5.81435 8.42118 6.11765 8.48428 6.4369 8.55528V7.97945C6.4369 7.37995 6.3092 6.96188 6.06177 6.71735C5.80637 6.47282 5.37537 6.3545 4.76079 6.3545C4.48144 6.3545 4.1941 6.38605 3.89879 6.45705C3.60347 6.52804 3.31614 6.61481 3.03679 6.72524C2.90908 6.78046 2.81331 6.81201 2.75743 6.82779C2.70156 6.84356 2.66166 6.85145 2.62973 6.85145C2.51799 6.85145 2.46212 6.77257 2.46212 6.60692V6.2204C2.46212 6.09419 2.47808 5.99954 2.51799 5.94432C2.5579 5.8891 2.62973 5.83389 2.74147 5.77867C3.02082 5.63668 3.35605 5.51836 3.74714 5.42371C4.13823 5.32116 4.55327 5.27383 4.99225 5.27383C5.94205 5.27383 6.63644 5.48681 7.08341 5.91277C7.52239 6.33872 7.74587 6.98555 7.74587 7.85324V10.409H7.76183ZM4.52135 11.608C4.78473 11.608 5.05611 11.5606 5.34344 11.466C5.63077 11.3713 5.88618 11.1978 6.10168 10.9611C6.22939 10.8113 6.32516 10.6456 6.37305 10.4563C6.42094 10.267 6.45287 10.0382 6.45287 9.77004V9.43874C6.2214 9.38353 5.97398 9.3362 5.71857 9.30464C5.46316 9.27309 5.21574 9.25732 4.96831 9.25732C4.43355 9.25732 4.04246 9.35986 3.77907 9.57284C3.51568 9.78582 3.38797 10.0856 3.38797 10.48C3.38797 10.8507 3.48375 11.1268 3.68329 11.3161C3.87484 11.5133 4.1542 11.608 4.52135 11.608ZM10.9305 12.4599C10.7868 12.4599 10.691 12.4362 10.6272 12.381C10.5633 12.3337 10.5075 12.2232 10.4596 12.0734L8.58393 5.97587C8.53604 5.81811 8.51209 5.71557 8.51209 5.66035C8.51209 5.53414 8.57595 5.46315 8.70365 5.46315H9.48584C9.63749 5.46315 9.74124 5.48681 9.79712 5.54203C9.86097 5.58936 9.90886 5.69979 9.95675 5.84966L11.2976 11.0716L12.5428 5.84966C12.5827 5.6919 12.6305 5.58936 12.6944 5.54203C12.7583 5.4947 12.87 5.46315 13.0137 5.46315H13.6522C13.8038 5.46315 13.9076 5.48681 13.9714 5.54203C14.0353 5.58936 14.0912 5.69979 14.1231 5.84966L15.3842 11.1347L16.765 5.84966C16.8128 5.6919 16.8687 5.58936 16.9246 5.54203C16.9884 5.4947 17.0922 5.46315 17.2359 5.46315H17.9781C18.1059 5.46315 18.1777 5.52625 18.1777 5.66035C18.1777 5.69979 18.1697 5.73923 18.1617 5.78656C18.1537 5.83389 18.1378 5.89699 18.1059 5.98376L16.1823 12.0813C16.1344 12.239 16.0786 12.3416 16.0147 12.3889C15.9508 12.4362 15.8471 12.4678 15.7114 12.4678H15.025C14.8733 12.4678 14.7696 12.4441 14.7057 12.3889C14.6419 12.3337 14.586 12.2311 14.5541 12.0734L13.317 6.98555L12.0878 12.0655C12.0479 12.2232 12 12.3258 11.9362 12.381C11.8723 12.4362 11.7606 12.4599 11.6169 12.4599H10.9305ZM21.1867 12.6729C20.7717 12.6729 20.3566 12.6255 19.9576 12.5309C19.5585 12.4362 19.2472 12.3337 19.0397 12.2153C18.912 12.1444 18.8242 12.0655 18.7923 11.9945C18.7603 11.9235 18.7444 11.8446 18.7444 11.7736V11.3713C18.7444 11.2057 18.8082 11.1268 18.9279 11.1268C18.9758 11.1268 19.0237 11.1347 19.0716 11.1505C19.1195 11.1662 19.1913 11.1978 19.2712 11.2293C19.5425 11.3477 19.8378 11.4423 20.1491 11.5054C20.4684 11.5685 20.7797 11.6001 21.0989 11.6001C21.6017 11.6001 21.9928 11.5133 22.2642 11.3398C22.5356 11.1662 22.6793 10.9138 22.6793 10.5904C22.6793 10.3695 22.6074 10.1881 22.4637 10.0382C22.3201 9.88836 22.0487 9.75427 21.6576 9.62806L20.5003 9.27309C19.9177 9.09167 19.4867 8.82347 19.2233 8.46851C18.9599 8.12143 18.8242 7.73492 18.8242 7.32474C18.8242 6.99344 18.896 6.70158 19.0397 6.44916C19.1834 6.19674 19.3749 5.97587 19.6144 5.80233C19.8538 5.62091 20.1252 5.48681 20.4444 5.39215C20.7637 5.2975 21.0989 5.25806 21.4501 5.25806C21.6257 5.25806 21.8093 5.26594 21.9849 5.28961C22.1684 5.31327 22.336 5.34483 22.5037 5.37638C22.6633 5.41582 22.8149 5.45526 22.9586 5.50259C23.1023 5.54992 23.214 5.59724 23.2938 5.64457C23.4056 5.70768 23.4854 5.77078 23.5333 5.84177C23.5812 5.90488 23.6051 5.99165 23.6051 6.10208V6.47282C23.6051 6.63847 23.5413 6.72524 23.4215 6.72524C23.3577 6.72524 23.2539 6.69369 23.1182 6.63058C22.6633 6.42549 22.1525 6.32295 21.5858 6.32295C21.1308 6.32295 20.7717 6.39394 20.5242 6.54381C20.2768 6.69369 20.1491 6.92244 20.1491 7.24585C20.1491 7.46672 20.2289 7.65603 20.3886 7.80591C20.5482 7.95578 20.8435 8.10566 21.2665 8.23975L22.3999 8.59472C22.9746 8.77614 23.3896 9.02856 23.637 9.35197C23.8845 9.67538 24.0042 10.0461 24.0042 10.4563C24.0042 10.7955 23.9323 11.1031 23.7967 11.3713C23.653 11.6395 23.4614 11.8762 23.214 12.0655C22.9666 12.2627 22.6713 12.4047 22.3281 12.5072C21.9689 12.6176 21.5938 12.6729 21.1867 12.6729Z" fill="#252F3E"/>
+<g id="Group_2">
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M22.6953 16.5068C20.0694 18.4236 16.2542 19.4412 12.9738 19.4412C8.37648 19.4412 4.23408 17.761 1.10534 14.9686C0.857912 14.7478 1.08139 14.448 1.37671 14.6216C4.76086 16.562 8.93519 17.7374 13.2532 17.7374C16.1664 17.7374 19.367 17.1379 22.3122 15.9073C22.7512 15.7101 23.1263 16.1913 22.6953 16.5068Z" fill="#FF9900"/>
+<path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd" d="M23.7885 15.2763C23.4532 14.8503 21.5696 15.0712 20.7156 15.1737C20.4602 15.2053 20.4203 14.9844 20.6517 14.8188C22.1523 13.7775 24.6185 14.0773 24.9059 14.4244C25.1932 14.7793 24.8261 17.2167 23.4213 18.3842C23.2058 18.5656 22.9983 18.471 23.0941 18.2343C23.4133 17.4534 24.1237 15.6943 23.7885 15.2763Z" fill="#FF9900"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2818_20427">
+<rect width="24" height="24" fill="white" transform="translate(0.998047 0.000183105)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/azure.svg b/x-pack/plugins/observability_onboarding/public/icons/azure.svg
new file mode 100644
index 0000000000000..1f884406e3687
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/azure.svg
@@ -0,0 +1,10 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Azure" clip-path="url(#clip0_2818_20387)">
+<path id="Vector" d="M14.084 3.00018L7.02323 9.00745L0.998047 19.6179H6.43064L14.084 3.00018ZM15.0232 4.40571L12.0099 12.7386L17.7877 19.8606L6.57879 21.7502H24.9492L15.0232 4.40571Z" fill="#0072C6"/>
+</g>
+<defs>
+<clipPath id="clip0_2818_20387">
+<rect width="24" height="24" fill="white" transform="translate(0.998047 0.000183105)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/gcp.svg b/x-pack/plugins/observability_onboarding/public/icons/gcp.svg
new file mode 100644
index 0000000000000..0b0ed5081ceaa
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/gcp.svg
@@ -0,0 +1,26 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="gcp" clip-path="url(#clip0_2818_16257)">
+<g id="Group">
+<path id="Vector" d="M17.926 22.4867H13.6143C14.0095 22.4867 14.3545 22.2752 14.539 21.9617L20.3913 12.0002L16.696 5.70773L21.007 5.70848C21.376 5.70848 21.7345 5.89673 21.931 6.23348L24.7045 10.9517C25.072 11.5795 25.099 12.3767 24.7045 13.0495L19.7755 21.4382C19.5855 21.7588 19.315 22.0242 18.9908 22.2081C18.6667 22.392 18.3002 22.488 17.9275 22.4867H17.926ZM17.3935 20.3897C17.3935 20.6792 17.632 20.9147 17.926 20.9147C17.9956 20.9154 18.0646 20.9024 18.1291 20.8764C18.1936 20.8503 18.2524 20.8118 18.302 20.7631C18.3516 20.7143 18.3911 20.6562 18.4182 20.5921C18.4453 20.5281 18.4595 20.4593 18.46 20.3897C18.46 20.1002 18.2215 19.8647 17.9268 19.8647C17.8572 19.864 17.7882 19.8771 17.7237 19.9031C17.6592 19.9291 17.6004 19.9676 17.5508 20.0164C17.5012 20.0652 17.4617 20.1233 17.4346 20.1873C17.4075 20.2514 17.3932 20.3202 17.3928 20.3897H17.3935ZM22.5888 12.4547C22.8438 12.5995 23.17 12.5132 23.317 12.2627C23.352 12.2031 23.3748 12.1371 23.3839 12.0685C23.3931 12 23.3884 11.9303 23.3703 11.8636C23.3521 11.7968 23.3208 11.7344 23.2781 11.68C23.2355 11.6255 23.1824 11.5801 23.122 11.5465C22.9995 11.4767 22.8546 11.4577 22.7183 11.4936C22.582 11.5295 22.4652 11.6174 22.393 11.7385C22.358 11.7981 22.3352 11.8641 22.3261 11.9327C22.317 12.0012 22.3216 12.0709 22.3398 12.1376C22.3579 12.2044 22.3892 12.2668 22.4319 12.3212C22.4745 12.3757 22.5276 12.4211 22.588 12.4547H22.5888Z" fill="#DB4437"/>
+<path id="Vector_2" d="M19.7751 2.56222L21.9298 6.23272C21.8348 6.07246 21.6995 5.9398 21.5375 5.84785C21.3754 5.7559 21.1921 5.70786 21.0058 5.70847H9.30132L5.60532 11.9995L3.44982 8.33047C3.35608 8.17152 3.30664 7.99037 3.30664 7.80584C3.30664 7.62132 3.35608 7.44016 3.44982 7.28122L6.22182 2.56222C6.41187 2.24165 6.68235 1.97629 7.00648 1.79238C7.33061 1.60848 7.69715 1.51242 8.06982 1.51372H17.9271C18.6636 1.51372 19.3798 1.89022 19.7751 2.56222ZM8.60307 3.61072C8.60307 3.32122 8.36457 3.08572 8.07057 3.08572C8.001 3.08502 7.93199 3.09806 7.86748 3.12409C7.80296 3.15012 7.74422 3.18862 7.69461 3.23739C7.64501 3.28616 7.60551 3.34424 7.57839 3.40831C7.55127 3.47237 7.53706 3.54115 7.53657 3.61072C7.53657 3.90022 7.77507 4.13572 8.06982 4.13572C8.13932 4.13631 8.20825 4.12319 8.27268 4.09712C8.33711 4.07105 8.39576 4.03253 8.44529 3.98377C8.49481 3.93501 8.53424 3.87696 8.56132 3.81295C8.58839 3.74894 8.60258 3.68022 8.60307 3.61072ZM18.1933 4.06522C18.2537 4.03157 18.3068 3.98618 18.3494 3.93173C18.3921 3.87728 18.4234 3.81486 18.4416 3.74813C18.4597 3.6814 18.4644 3.61172 18.4552 3.54317C18.4461 3.47463 18.4233 3.4086 18.3883 3.34897C18.3161 3.22813 18.1995 3.14037 18.0633 3.10448C17.9272 3.06859 17.7825 3.08743 17.6601 3.15697C17.5997 3.19061 17.5466 3.236 17.5039 3.29045C17.4613 3.3449 17.43 3.40732 17.4118 3.47405C17.3937 3.54078 17.389 3.61046 17.3982 3.67901C17.4073 3.74756 17.43 3.81358 17.4651 3.87322C17.5373 3.99405 17.6539 4.08181 17.79 4.1177C17.9262 4.15359 18.0709 4.13475 18.1933 4.06522Z" fill="#4285F4"/>
+<path id="Vector_3" d="M1.29394 10.9509L3.45019 7.28119C3.25294 7.61794 3.26644 8.01619 3.45019 8.33044L9.30094 18.2927H16.6937L14.5382 21.9617C14.3537 22.2752 14.0087 22.4867 13.6134 22.4867H8.06944C7.69679 22.4879 7.33028 22.3918 7.00617 22.2079C6.68205 22.024 6.41155 21.7587 6.22144 21.4382L1.29394 13.0487C1.10661 12.7309 1.00781 12.3687 1.00781 11.9998C1.00781 11.6309 1.10661 11.2687 1.29394 10.9509ZM3.40894 11.5457C3.28648 11.4759 3.14154 11.457 3.00524 11.4929C2.86895 11.5287 2.75216 11.6166 2.67994 11.7377C2.64503 11.7973 2.62236 11.8634 2.61327 11.9319C2.60418 12.0004 2.60885 12.0701 2.62701 12.1368C2.64517 12.2035 2.67645 12.2659 2.71902 12.3203C2.76159 12.3748 2.8146 12.4202 2.87494 12.4539C3.12994 12.5987 3.45619 12.5124 3.60319 12.2619C3.63822 12.2023 3.66097 12.1363 3.67011 12.0677C3.67925 11.9992 3.6746 11.9295 3.65644 11.8628C3.63827 11.796 3.60695 11.7336 3.56432 11.6792C3.52169 11.6247 3.46861 11.5793 3.40819 11.5457H3.40894ZM7.80244 19.9352C7.74203 19.9688 7.68895 20.0142 7.64631 20.0687C7.60368 20.1231 7.57237 20.1855 7.5542 20.2523C7.53603 20.319 7.53139 20.3887 7.54053 20.4572C7.54967 20.5258 7.57242 20.5918 7.60744 20.6514C7.67965 20.7723 7.7963 20.86 7.93242 20.8959C8.06854 20.9318 8.2133 20.913 8.33569 20.8434C8.39611 20.8098 8.44919 20.7644 8.49182 20.71C8.53445 20.6555 8.56577 20.5931 8.58394 20.5264C8.6021 20.4596 8.60675 20.3899 8.59761 20.3214C8.58847 20.2528 8.56572 20.1868 8.53069 20.1272C8.45849 20.0064 8.34183 19.9186 8.20572 19.8827C8.0696 19.8468 7.92484 19.8657 7.80244 19.9352Z" fill="#F4B400"/>
+<path id="Vector_4" opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M14.5392 21.9617L16.6955 18.2927H14.4687L13.6152 22.486C14.0097 22.486 14.3547 22.276 14.5392 21.9617ZM21.0072 5.70849H16.6955L17.8085 7.60374L21.9312 6.23274C21.8363 6.07234 21.7011 5.93953 21.539 5.84745C21.3769 5.75536 21.1936 5.70721 21.0072 5.70774" fill="black"/>
+<g id="Group_2" opacity="0.1">
+<mask id="mask0_2818_16257" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="7" width="4" height="6">
+<g id="logo_gcp_6a0c84d8-01e4-11ed-aaae-e91212edd8ba_b">
+<path id="Vector_5" d="M3.30762 7.28198H6.71937V12.0002H3.30762V7.28198Z" fill="white"/>
+</g>
+</mask>
+<g mask="url(#mask0_2818_16257)">
+<path id="Vector_6" fill-rule="evenodd" clip-rule="evenodd" d="M3.45054 8.33048L5.60679 12.0002L6.72054 10.105L3.45054 7.28198C3.25329 7.61798 3.26679 8.01698 3.45054 8.33048Z" fill="black"/>
+</g>
+</g>
+<path id="Vector_7" d="M9.30147 18.2927L5.60547 12.0002L9.30147 5.70773H16.695L20.391 12.0002L16.695 18.2927H9.30072H9.30147ZM16.1992 12.0002C16.1992 10.2625 14.7667 8.85473 12.9982 8.85473C11.2305 8.85473 9.79722 10.2625 9.79722 12.0002C9.79722 13.7372 11.2297 15.1457 12.9982 15.1457C14.766 15.1457 16.1992 13.7372 16.1992 12.0002Z" fill="#CCCCCC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2818_16257">
+<rect width="24" height="24" fill="white" transform="translate(0.998047 0.000183105)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/kinesis.svg b/x-pack/plugins/observability_onboarding/public/icons/kinesis.svg
new file mode 100644
index 0000000000000..8a909480f2ca6
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/kinesis.svg
@@ -0,0 +1,21 @@
+<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="logo_kinesis 1" clip-path="url(#clip0_2428_637461)">
+<g id="Group">
+<path id="Vector" d="M0.0341797 13.3994L9.98168 17.9784L19.9287 13.3994L9.98143 12.9872L0.0341797 13.3994Z" fill="#FCBF92"/>
+<path id="Vector_2" d="M10.0123 0.000183105L0.0390625 4.97418V11.9924H11.9981V0.992683L10.0123 0.000183105Z" fill="#9D5025"/>
+<path id="Vector_3" d="M0.0390625 16.9402L10.0183 24.0002L19.9671 16.9402L9.99631 15.4892L0.0390625 16.9402Z" fill="#FCBF92"/>
+<g id="Group_2">
+<path id="Vector_4" d="M10.0117 11.9924H15.2735V4.50345L13.737 3.88895L10.012 4.97545L10.0117 11.9924Z" fill="#9D5025"/>
+<path id="Vector_5" d="M13.7373 11.9925H17.8043V7.13495L16.6411 6.78595L13.7373 7.27895V11.9925Z" fill="#9D5025"/>
+<path id="Vector_6" d="M16.6406 6.4052V11.9924H19.9281L19.9669 6.38045L18.9681 5.98145L16.6406 6.4052Z" fill="#9D5025"/>
+</g>
+<path id="Vector_7" d="M10.0117 0.000183105V11.9924H11.9974V0.992683L10.0117 0.000183105ZM15.2734 4.50343L13.7369 3.88893V11.9924H15.2734V4.50343ZM17.8039 7.13493L16.6407 6.78593V11.9927H17.8039V7.13493ZM18.9682 11.9924H19.9667V6.38018L18.9682 5.98118V11.9924ZM9.98145 14.3942V17.9784L19.9284 15.4989V13.3994L9.98145 14.3942ZM9.98145 20.4612V24.0002L19.9664 19.0077V16.9402L9.98145 20.4612Z" fill="#F68534"/>
+<path id="Vector_8" d="M0.0386797 19.0292L9.98168 24.0002V20.4352L0.0391797 16.9399L0.0386797 19.0292ZM0.0341797 15.4989L9.98168 17.9784V14.3942L0.0341797 13.3992V15.4989Z" fill="#9D5025"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2428_637461">
+<rect width="19.9968" height="24" fill="white" transform="translate(0.00195312 0.000183105)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/kubernetes.svg b/x-pack/plugins/observability_onboarding/public/icons/kubernetes.svg
new file mode 100644
index 0000000000000..aedbb79c31aaf
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/kubernetes.svg
@@ -0,0 +1,10 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Kubernetes" clip-path="url(#clip0_2762_20485)">
+<path id="Vector" d="M12.6679 0.00240417C12.9341 -0.0110958 13.2004 0.0421542 13.4404 0.156904L21.7856 4.1349C22.0008 4.23712 22.1901 4.38658 22.3394 4.57215C22.4888 4.75773 22.5943 4.97462 22.6481 5.20665L24.7106 14.1474C24.7639 14.3791 24.7638 14.62 24.7103 14.8516C24.6567 15.0833 24.5512 15.2998 24.4016 15.4847L18.6289 22.6547C18.3259 23.0297 17.8669 23.2487 17.3816 23.2479L8.12063 23.2502C7.63463 23.2502 7.17563 23.0312 6.87263 22.6554L1.09763 15.4869C0.949159 15.3015 0.844407 15.0849 0.791169 14.8534C0.737931 14.6219 0.737577 14.3813 0.790134 14.1497L2.84888 5.2089C2.9027 4.97666 3.00829 4.75957 3.15777 4.57386C3.30725 4.38815 3.49675 4.2386 3.71213 4.1364L12.0559 0.157654C12.2471 0.0661542 12.4549 0.0136542 12.6671 0.00315417L12.6679 0.00240417ZM12.7504 3.04515C12.4744 3.04515 12.2501 3.29265 12.2501 3.59865L12.2516 3.6129C12.2516 3.65415 12.2494 3.7044 12.2501 3.7404C12.2576 3.9174 12.2951 4.0524 12.3184 4.2144C12.3611 4.5624 12.3956 4.85115 12.3739 5.1189C12.3529 5.22015 12.2786 5.3124 12.2119 5.3769L12.2006 5.58765C10.612 5.71453 9.12718 6.42714 8.03438 7.58715C7.97888 7.54965 7.88288 7.48065 7.85438 7.45965C7.76438 7.47165 7.67438 7.4994 7.55738 7.43115C7.33388 7.28115 7.12988 7.0734 6.88388 6.82365C6.77138 6.70365 6.68888 6.59115 6.55538 6.47565C6.52538 6.4494 6.47813 6.41415 6.44438 6.38715C6.3454 6.30733 6.22343 6.26133 6.09638 6.2559C6.02101 6.25195 5.94576 6.26578 5.87671 6.29627C5.80766 6.32675 5.74675 6.37304 5.69888 6.4314C5.52638 6.6474 5.58188 6.9759 5.82113 7.16641L5.82863 7.1724C5.86163 7.19865 5.90213 7.23241 5.93213 7.25491C6.07463 7.35991 6.20438 7.41391 6.34613 7.49716C6.64463 7.68165 6.89288 7.83465 7.08863 8.0184C7.16588 8.09941 7.17863 8.24341 7.18913 8.30566L7.34963 8.44815C6.46622 9.77043 6.10292 11.3727 6.32963 12.9467L6.12113 13.0067C6.06563 13.0787 5.98838 13.1904 5.90663 13.2242C5.64938 13.3044 5.36063 13.3344 5.01113 13.3704C4.84763 13.3839 4.70588 13.3764 4.53188 13.4087C4.49438 13.4162 4.44038 13.4304 4.39913 13.4402L4.39463 13.4409L4.38713 13.4432C4.09238 13.5144 3.90338 13.7844 3.96413 14.0507C4.02563 14.3169 4.31288 14.4782 4.60913 14.4144L4.61663 14.4137L4.62638 14.4107C4.66763 14.4017 4.71938 14.3912 4.75538 14.3814C4.92638 14.3364 5.05013 14.2689 5.20313 14.2104C5.53313 14.0919 5.80763 13.9929 6.07388 13.9547C6.18563 13.9457 6.30263 14.0229 6.36113 14.0559L6.57863 14.0184C7.06783 15.5268 8.09229 16.8039 9.45863 17.6087L9.36863 17.8262C9.40088 17.9109 9.43688 18.0249 9.41288 18.1082C9.31538 18.3587 9.15038 18.6242 8.96063 18.9189C8.86913 19.0554 8.77538 19.1619 8.69288 19.3179C8.67338 19.3554 8.64788 19.4124 8.62838 19.4522C8.50088 19.7259 8.59463 20.0417 8.84138 20.1602C9.08888 20.2802 9.39713 20.1542 9.53063 19.8789L9.53138 19.8782V19.8767C9.55013 19.8384 9.57713 19.7867 9.59363 19.7499C9.66413 19.5887 9.68738 19.4499 9.73763 19.2932C9.86963 18.9617 9.94238 18.6144 10.1239 18.3977C10.1741 18.3377 10.2551 18.3152 10.3391 18.2927L10.4524 18.0879C11.9349 18.6582 13.5756 18.6625 15.0611 18.0999L15.1676 18.2919C15.2531 18.3197 15.3469 18.3339 15.4226 18.4464C15.5591 18.6789 15.6521 18.9527 15.7654 19.2849C15.8149 19.4409 15.8404 19.5797 15.9109 19.7424C15.9266 19.7784 15.9536 19.8302 15.9724 19.8699C16.1051 20.1452 16.4149 20.2712 16.6624 20.1519C16.9099 20.0334 17.0036 19.7169 16.8754 19.4432C16.8559 19.4042 16.8304 19.3464 16.8101 19.3089C16.7276 19.1529 16.6339 19.0479 16.5424 18.9114C16.3534 18.6167 16.1966 18.3714 16.0999 18.1202C16.0586 17.9904 16.1066 17.9102 16.1374 17.8262C16.1186 17.8044 16.0781 17.6822 16.0549 17.6252C17.4257 16.8137 18.4502 15.5265 18.9334 14.0087C18.9979 14.0192 19.1104 14.0387 19.1471 14.0462C19.2221 13.9967 19.2911 13.9322 19.4269 13.9427C19.6931 13.9817 19.9669 14.0799 20.2969 14.1984C20.4506 14.2569 20.5744 14.3259 20.7454 14.3709C20.7814 14.3807 20.8331 14.3897 20.8744 14.3987L20.8841 14.4017L20.8916 14.4032C21.1879 14.4669 21.4751 14.3049 21.5366 14.0387C21.5966 13.7724 21.4084 13.5024 21.1136 13.4312C21.0709 13.4214 21.0101 13.4049 20.9689 13.3974C20.7949 13.3644 20.6539 13.3727 20.4889 13.3592C20.1401 13.3224 19.8514 13.2924 19.5941 13.2122C19.4891 13.1717 19.4149 13.0472 19.3789 12.9954L19.1764 12.9369C19.2837 12.161 19.2484 11.3721 19.0721 10.6089C18.8955 9.83763 18.5785 9.10544 18.1369 8.4489C18.1879 8.4024 18.2861 8.31616 18.3139 8.2914C18.3214 8.20141 18.3146 8.10766 18.4076 8.00866C18.6041 7.82416 18.8516 7.67115 19.1501 7.4874C19.2926 7.4049 19.4231 7.3509 19.5656 7.2459C19.5979 7.22191 19.6414 7.1844 19.6751 7.1574C19.9151 6.96616 19.9699 6.63765 19.7981 6.4224C19.6256 6.20715 19.2926 6.1869 19.0534 6.37741C19.0189 6.40441 18.9731 6.43965 18.9424 6.46591C18.8081 6.58066 18.7249 6.69465 18.6124 6.8139C18.3664 7.06365 18.1624 7.27216 17.9389 7.4229C17.8421 7.47916 17.7004 7.45965 17.6359 7.4559L17.4461 7.59091C16.3516 6.44469 14.8785 5.73428 13.3001 5.5914C13.2957 5.51719 13.2919 5.44294 13.2889 5.36865C13.2236 5.3064 13.1449 5.25315 13.1254 5.1189C13.1036 4.85115 13.1404 4.5624 13.1824 4.2144C13.2049 4.0524 13.2439 3.9174 13.2499 3.7404C13.2521 3.70065 13.2499 3.6429 13.2499 3.59865C13.2499 3.29265 13.0256 3.04515 12.7496 3.04515H12.7504ZM12.1249 6.91215L11.9764 9.52816L11.9659 9.53341C11.9624 9.61294 11.9375 9.69004 11.8937 9.75652C11.8499 9.82299 11.7888 9.87634 11.7171 9.91089C11.6454 9.94545 11.5657 9.9599 11.4864 9.95273C11.4071 9.94556 11.3312 9.91702 11.2669 9.87016L11.2624 9.87165L9.11438 8.35141C9.93019 7.55062 10.9894 7.04424 12.1249 6.91215ZM13.3759 6.91215C14.5041 7.05156 15.5555 7.55745 16.3684 8.35215L14.2339 9.86341L14.2264 9.8604C14.162 9.90718 14.0862 9.93567 14.0069 9.94285C13.9277 9.95003 13.848 9.93563 13.7763 9.90119C13.7045 9.86675 13.6435 9.81354 13.5995 9.74721C13.5556 9.68087 13.5304 9.60389 13.5266 9.52441L13.5244 9.52365L13.3759 6.91215ZM8.33588 9.32866L10.2964 11.0799L10.2941 11.0904C10.3545 11.1425 10.3996 11.21 10.4245 11.2857C10.4494 11.3615 10.4531 11.4426 10.4354 11.5203C10.4177 11.5981 10.3791 11.6695 10.3238 11.7269C10.2685 11.7844 10.1986 11.8257 10.1216 11.8464L10.1194 11.8539L7.60538 12.5792C7.48014 11.4446 7.73694 10.3008 8.33513 9.32866H8.33588ZM17.1506 9.3294C17.4416 9.8019 17.6629 10.3277 17.7941 10.8992C17.9208 11.4468 17.9575 12.0114 17.9029 12.5709L15.3754 11.8434L15.3739 11.8337C15.2971 11.8127 15.2274 11.7713 15.1722 11.7138C15.1171 11.6564 15.0786 11.585 15.0609 11.5074C15.0432 11.4297 15.0469 11.3488 15.0717 11.2731C15.0964 11.1974 15.1412 11.1298 15.2014 11.0777L15.1999 11.0724L17.1499 9.3294H17.1506ZM12.3476 11.2157H13.1509L13.6504 11.8382L13.4711 12.6167L12.7496 12.9624L12.0266 12.6152L11.8466 11.8374L12.3476 11.2149V11.2157ZM14.9239 13.3487C14.9578 13.3472 14.9918 13.3497 15.0251 13.3562L15.0289 13.3502L17.6299 13.7897C17.2456 14.8672 16.5129 15.7859 15.5479 16.4004L14.5384 13.9659L14.5414 13.9622C14.5132 13.8969 14.5012 13.8258 14.5065 13.7549C14.5118 13.684 14.5342 13.6155 14.5718 13.5551C14.6094 13.4948 14.6611 13.4445 14.7224 13.4085C14.7837 13.3726 14.8529 13.352 14.9239 13.3487ZM10.5559 13.3592C10.628 13.3604 10.6987 13.3793 10.7618 13.4143C10.8249 13.4493 10.8784 13.4992 10.9177 13.5597C10.957 13.6203 10.9808 13.6895 10.987 13.7614C10.9932 13.8332 10.9817 13.9055 10.9534 13.9719L10.9609 13.9809L9.96263 16.3914C9.00417 15.779 8.27467 14.8673 7.88738 13.7979L10.4651 13.3614L10.4696 13.3667C10.4981 13.3614 10.527 13.3589 10.5559 13.3592ZM12.7339 14.4144C12.8052 14.4121 12.876 14.4273 12.9401 14.4587C13.0242 14.4986 13.0933 14.5643 13.1374 14.6462H13.1471L14.4176 16.9389C14.2526 16.9937 14.0831 17.0409 13.9099 17.0807C12.9751 17.2944 11.9992 17.244 11.0914 16.9352L12.3589 14.6477H12.3611C12.3975 14.5797 12.4511 14.5225 12.5165 14.4817C12.5819 14.4409 12.6569 14.418 12.7339 14.4152V14.4144Z" fill="#326CE5"/>
+</g>
+<defs>
+<clipPath id="clip0_2762_20485">
+<rect width="24" height="24" fill="white" transform="translate(0.75 9.15527e-05)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/logging.svg b/x-pack/plugins/observability_onboarding/public/icons/logging.svg
new file mode 100644
index 0000000000000..41d5251b3ea19
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/logging.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="icon-logging-32-color" clip-path="url(#clip0_2762_20222)">
+        <g id="Group 6">
+            <path id="Fill 1" fill-rule="evenodd" clip-rule="evenodd" d="M7.5 15H16.5V13.5H7.5V15Z" fill="#1A1C21"/>
+            <path id="Fill 2" fill-rule="evenodd" clip-rule="evenodd" d="M7.5 11.25H16.5V9.75H7.5V11.25Z" fill="#1A1C21"/>
+            <path id="Fill 3" fill-rule="evenodd" clip-rule="evenodd" d="M7.5 7.5H16.5V6H7.5V7.5Z" fill="#1A1C21"/>
+            <path id="Fill 4" fill-rule="evenodd" clip-rule="evenodd" d="M23.25 4.5H20.25V3.75C20.25 2.92275 20.9228 2.25 21.75 2.25C22.5772 2.25 23.25 2.92275 23.25 3.75V4.5ZM17.25 21.75C16.4227 21.75 15.75 21.0772 15.75 20.25V18H5.25V3.75C5.25 2.92275 5.92275 2.25 6.75 2.25H19.167C18.909 2.69325 18.75 3.20175 18.75 3.75V20.25C18.75 21.0772 18.0772 21.75 17.25 21.75ZM3.75 21.75C2.92275 21.75 2.25 21.0772 2.25 20.25V19.5H14.25V20.25C14.25 20.796 14.3963 21.3083 14.6528 21.75H3.75ZM21.75 0.75H6.75C5.0955 0.75 3.75 2.0955 3.75 3.75V18H0.75V20.25C0.75 21.9045 2.0955 23.25 3.75 23.25H17.25C18.9045 23.25 20.25 21.9045 20.25 20.25V6H24.75V3.75C24.75 2.0955 23.4045 0.75 21.75 0.75Z" fill="#1A1C21"/>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="clip0_2762_20222">
+            <rect width="24" height="24" fill="white" transform="translate(0.75)"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/nginx.svg b/x-pack/plugins/observability_onboarding/public/icons/nginx.svg
new file mode 100644
index 0000000000000..c758f951a1ffa
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/nginx.svg
@@ -0,0 +1,13 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Nginx" clip-path="url(#clip0_2818_20405)">
+<g id="Group">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12.9984 0.000183105L23.3904 6.00018V18.0002L12.9984 24.0002L2.60645 18.0002V6.00018L12.9984 0.000183105Z" fill="#119639"/>
+<path id="Vector_2" d="M9.37556 10.1344V16.4161C9.37556 17.0818 8.8359 17.6215 8.1702 17.6215C7.5045 17.6215 6.96484 17.0818 6.96484 16.4161V7.22419C6.96484 6.1503 8.26325 5.61252 9.02257 6.37192L16.1557 13.5059V7.22419C16.1557 6.55849 16.6953 6.01883 17.361 6.01883C18.0267 6.01883 18.5664 6.55849 18.5664 7.22419V16.4161C18.5664 17.49 17.268 18.0278 16.5087 17.2684L9.37556 10.1344Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2818_20405">
+<rect width="24" height="24" fill="white" transform="translate(0.998047 0.000183105)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/opentelemetry.svg b/x-pack/plugins/observability_onboarding/public/icons/opentelemetry.svg
new file mode 100644
index 0000000000000..1ce99fcc497d0
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/opentelemetry.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 1024.40 1024.40"><style>svg {enable-background:new 0 0 1000 1000}</style><path fill="#f5a800" d="M528.7 545.9c-42 42-42 110.1 0 152.1s110.1 42 152.1 0 42-110.1 0-152.1-110.1-42-152.1 0zm113.7 113.8c-20.8 20.8-54.5 20.8-75.3 0-20.8-20.8-20.8-54.5 0-75.3 20.8-20.8 54.5-20.8 75.3 0 20.8 20.7 20.8 54.5 0 75.3zm36.6-643l-65.9 65.9c-12.9 12.9-12.9 34.1 0 47l257.3 257.3c12.9 12.9 34.1 12.9 47 0l65.9-65.9c12.9-12.9 12.9-34.1 0-47L725.9 16.7c-12.9-12.9-34-12.9-46.9 0zM217.3 858.8c11.7-11.7 11.7-30.8 0-42.5l-33.5-33.5c-11.7-11.7-30.8-11.7-42.5 0L72.1 852l-.1.1-19-19c-10.5-10.5-27.6-10.5-38 0-10.5 10.5-10.5 27.6 0 38l114 114c10.5 10.5 27.6 10.5 38 0s10.5-27.6 0-38l-19-19 .1-.1 69.2-69.2z"/><path fill="#425cc7" d="M565.9 205.9L419.5 352.3c-13 13-13 34.4 0 47.4l90.4 90.4c63.9-46 153.5-40.3 211 17.2l73.2-73.2c13-13 13-34.4 0-47.4L613.3 205.9c-13-13.1-34.4-13.1-47.4 0zm-94 322.3l-53.4-53.4c-12.5-12.5-33-12.5-45.5 0L184.7 663.2c-12.5 12.5-12.5 33 0 45.5l106.7 106.7c12.5 12.5 33 12.5 45.5 0L458 694.1c-25.6-52.9-21-116.8 13.9-165.9z"/></svg>
diff --git a/x-pack/plugins/observability_onboarding/public/icons/system.svg b/x-pack/plugins/observability_onboarding/public/icons/system.svg
new file mode 100644
index 0000000000000..0aba96275e24e
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/icons/system.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M433.41 29.92c-9.81 5.14-15.18 10.04-19.15 17.74-1.87 3.74-9.57 43.43-17.28 88.49-23.58 140.32-43.19 243.98-72.61 384.3l-2.57 12.38-10.27-10.97c-19.61-20.31-45.76-25.92-67.71-14.48-14.71 7.47-24.05 20.31-34.55 46.93-7.7 20.32-9.11 22.18-15.64 23.58-3.97.7-39.22 1.4-78.45 1.4-67.94 0-71.91.23-81.72 4.9C7.54 596.8 1.94 631.82 22.49 651.9c13.08 12.84 17.04 13.31 88.72 13.54 106 0 125.38-3.04 145.69-24.05l7.94-8.17 6.3 13.54c12.14 25.45 28.72 38.76 51.6 41.56 24.52 2.8 42.49-10.97 56.03-43.19 13.31-31.98 39.93-147.56 63.28-272.93 5.6-29.88 10.51-54.4 11.21-54.4.7 0 26.85 140.09 58.14 311.22 31.28 170.91 58.37 314.73 60.24 319.17 4.2 10.51 9.11 15.87 19.85 21.25 18.45 9.57 43.19 3.04 54.4-14.01 5.14-7.71 7.24-16.34 13.07-57.67 12.36-85.22 33.84-204.06 36.87-204.06.7 0 4.67 5.37 8.4 11.91 14.48 24.75 37.82 38.06 66.54 38.29 29.18 0 40.63-9.34 72.15-58.84l16.11-25.21 57.2-1.17c56.5-1.17 57.44-1.17 63.27-6.77 7.94-7.47 11.44-19.15 10.27-34.09-1.4-15.88-8.17-28.72-20.08-37.12l-9.57-6.77-57.43-1.17c-69.58-1.4-77.51-.23-94.33 14.94-6.3 5.84-17.74 19.84-24.98 31.29-7.47 11.44-13.78 20.78-14.01 20.31-.24-.23-2.57-12.61-5.37-27.32-8.64-48.8-19.38-69.81-40.86-80.55-22.41-11.21-48.33-6.31-64.21 11.91-14.47 16.34-30.12 56.03-43.66 110.67-3.5 14.47-6.77 25.68-7.24 24.52-.23-1.4-26.38-142.66-57.9-314.03-63.04-342.74-58.6-323.83-78.21-333.87-10.96-5.61-28.71-6.08-38.51-.71z"/></svg>
\ No newline at end of file