diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/package_icon.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/package_icon.tsx
index 1ac222802e7d4..c5a0e600b7d50 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/package_icon.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/package_icon.tsx
@@ -25,7 +25,7 @@ export const PackageIcon: React.FunctionComponent<{
 
 const usePackageIcon = (packageName: string, version?: string, icons?: Package['icons']) => {
   const { toImage } = useLinks();
-  const [iconType, setIconType] = useState<string>('');
+  const [iconType, setIconType] = useState<string>(''); // FIXME: use `empty` icon during initialization - see: https://github.com/elastic/kibana/issues/60622
   const pkgKey = `${packageName}-${version ?? ''}`;
 
   // Generates an icon path or Eui Icon name based on an icon list from the package
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx
index c063155c571d2..8bb7b2553c1b1 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/layout.tsx
@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 import { WithHeaderLayout } from '../../../../layouts';
 import { AgentConfig, PackageInfo } from '../../../../types';
-import { PackageIcon } from '../../../epm/components';
+import { PackageIcon } from '../../../../components/package_icon';
 import { CreateDatasourceFrom, CreateDatasourceStep } from '../types';
 import { CreateDatasourceStepsNavigation } from './navigation';
 
@@ -94,7 +94,12 @@ export const CreateDatasourcePageLayout: React.FunctionComponent<{
                     <EuiDescriptionListDescription>
                       <EuiFlexGroup alignItems="center" gutterSize="s">
                         <EuiFlexItem grow={false}>
-                          <PackageIcon packageName={packageInfo?.name || ''} size="m" />
+                          <PackageIcon
+                            packageName={packageInfo?.name || ''}
+                            version={packageInfo?.version || ''}
+                            icons={packageInfo?.icons}
+                            size="m"
+                          />
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                           {packageInfo?.title || packageInfo?.name || '-'}
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_select_package.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_select_package.tsx
index f90e7f0ab0460..0b48020c3cac1 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_select_package.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_select_package.tsx
@@ -18,7 +18,7 @@ import {
 import { Error } from '../../../components';
 import { AgentConfig, PackageInfo } from '../../../types';
 import { useGetOneAgentConfig, useGetPackages, sendGetPackageInfoByKey } from '../../../hooks';
-import { PackageIcon } from '../../epm/components';
+import { PackageIcon } from '../../../components/package_icon';
 
 export const StepSelectPackage: React.FunctionComponent<{
   agentConfigId: string;
@@ -125,12 +125,12 @@ export const StepSelectPackage: React.FunctionComponent<{
           allowExclusions={false}
           singleSelection={true}
           isLoading={isPackagesLoading}
-          options={packages.map(({ title, name, version }) => {
+          options={packages.map(({ title, name, version, icons }) => {
             const pkgkey = `${name}-${version}`;
             return {
               label: title || name,
               key: pkgkey,
-              prepend: <PackageIcon packageName={name} size="m" />,
+              prepend: <PackageIcon packageName={name} version={version} icons={icons} size="m" />,
               checked: selectedPkgKey === pkgkey ? 'on' : undefined,
             };
           })}
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/index.ts
index 2cb940e2ff40c..41bc2aa258807 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/index.ts
@@ -3,5 +3,3 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-export { PackageIcon } from './package_icon';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_card.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_card.tsx
index d1d7cfc180cad..8ad081cbbabe4 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_card.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_card.tsx
@@ -8,7 +8,7 @@ import styled from 'styled-components';
 import { EuiCard } from '@elastic/eui';
 import { PackageInfo, PackageListItem } from '../../../types';
 import { useLinks } from '../hooks';
-import { PackageIcon } from './package_icon';
+import { PackageIcon } from '../../../components/package_icon';
 
 export interface BadgeProps {
   showInstalledBadge?: boolean;
@@ -40,7 +40,7 @@ export function PackageCard({
       layout="horizontal"
       title={title || ''}
       description={description}
-      icon={<PackageIcon icons={icons} packageName={name} size="l" />}
+      icon={<PackageIcon icons={icons} packageName={name} version={version} size="l" />}
       href={url}
     />
   );
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_icon.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_icon.tsx
deleted file mode 100644
index dd2f46adc3188..0000000000000
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_icon.tsx
+++ /dev/null
@@ -1,26 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-import React from 'react';
-import { ICON_TYPES, EuiIcon, EuiIconProps } from '@elastic/eui';
-import { PackageInfo, PackageListItem } from '../../../types';
-import { useLinks } from '../hooks';
-
-type Package = PackageInfo | PackageListItem;
-
-export const PackageIcon: React.FunctionComponent<{
-  packageName: string;
-  icons?: Package['icons'];
-} & Omit<EuiIconProps, 'type'>> = ({ packageName, icons, ...euiIconProps }) => {
-  const { toImage } = useLinks();
-  // try to find a logo in EUI
-  const euiLogoIcon = ICON_TYPES.find(key => key.toLowerCase() === `logo${packageName}`);
-  const svgIcons = icons?.filter(icon => icon.type === 'image/svg+xml');
-  const localIcon = svgIcons && Array.isArray(svgIcons) && svgIcons[0];
-  const pathToLocal = localIcon && toImage(localIcon.src);
-  const euiIconType = pathToLocal || euiLogoIcon || 'package';
-
-  return <EuiIcon size="s" type={euiIconType} {...euiIconProps} />;
-};