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 b758a4e7d8eb5..a1dfe7e505b1c 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
@@ -3,14 +3,12 @@
  * 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, { useEffect, useMemo, useState } from 'react';
-import { ICON_TYPES, EuiIcon, EuiIconProps } from '@elastic/eui';
+import React from 'react';
+import { EuiIcon, EuiIconProps } from '@elastic/eui';
 import { PackageInfo, PackageListItem } from '../../../../common/types/models';
-import { useLinks } from '../sections/epm/hooks';
+import { usePackageIconType } from '../hooks';
 type Package = PackageInfo | PackageListItem;
 
-const CACHED_ICONS = new Map<string, string>();
-
 export const PackageIcon: React.FunctionComponent<{
   packageName: string;
   version?: string;
@@ -19,58 +17,3 @@ export const PackageIcon: React.FunctionComponent<{
   const iconType = usePackageIconType({ packageName, version, icons });
   return <EuiIcon size="s" type={iconType} {...euiIconProps} />;
 };
-
-interface UsePackageIconType {
-  packageName: string;
-  version?: string;
-  icons?: Package['icons'];
-}
-
-export const usePackageIconType = ({
-  packageName = '',
-  version = '',
-  icons = [],
-}: UsePackageIconType) => {
-  const { toImage } = useLinks();
-  const [iconType, setIconType] = useState<string>(''); // FIXME: use `empty` icon during initialization - see: https://github.com/elastic/kibana/issues/60622
-  const pkgKey = `${packageName}-${version}`;
-  const defaultType = 'package';
-
-  // Generates an icon path or Eui Icon name based on an icon list from the package
-  // or by using the package name against logo icons from Eui
-  const fromInput = useMemo(() => {
-    return (iconList?: Package['icons']) => {
-      const svgIcons = iconList?.filter(iconDef => iconDef.type === 'image/svg+xml');
-      const localIconSrc = Array.isArray(svgIcons) && svgIcons[0]?.src;
-      if (localIconSrc) {
-        CACHED_ICONS.set(pkgKey, toImage(localIconSrc));
-        setIconType(CACHED_ICONS.get(pkgKey) as string);
-        return;
-      }
-
-      const euiLogoIcon = ICON_TYPES.find(key => key.toLowerCase() === `logo${packageName}`);
-      if (euiLogoIcon) {
-        CACHED_ICONS.set(pkgKey, euiLogoIcon);
-        setIconType(euiLogoIcon);
-        return;
-      }
-
-      CACHED_ICONS.set(pkgKey, defaultType);
-      setIconType(defaultType);
-    };
-  }, [packageName, pkgKey, toImage]);
-
-  useEffect(() => {
-    if (CACHED_ICONS.has(pkgKey)) {
-      setIconType(CACHED_ICONS.get(pkgKey) as string);
-      return;
-    }
-
-    // Use API to see if package has icons defined
-    if (icons) {
-      fromInput(icons);
-    }
-  }, [icons, toImage, packageName, version, fromInput, pkgKey]);
-
-  return iconType;
-};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/index.ts
index 5e0695bd3e305..f28601ff55026 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/index.ts
@@ -9,6 +9,7 @@ export { useCore, CoreContext } from './use_core';
 export { useConfig, ConfigContext } from './use_config';
 export { useSetupDeps, useStartDeps, DepsContext } from './use_deps';
 export { useLink } from './use_link';
+export { usePackageIconType } from './use_package_icon_type';
 export { usePagination, Pagination } from './use_pagination';
 export { useDebounce } from './use_debounce';
 export * from './use_request';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_package_icon_type.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_package_icon_type.ts
new file mode 100644
index 0000000000000..ba4af3f3d5d88
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_package_icon_type.ts
@@ -0,0 +1,68 @@
+/*
+ * 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 { useEffect, useMemo, useState } from 'react';
+import { ICON_TYPES } from '@elastic/eui';
+import { PackageInfo, PackageListItem } from '../../../../common/types/models';
+import { useLinks } from '../sections/epm/hooks';
+
+type Package = PackageInfo | PackageListItem;
+
+export interface UsePackageIconType {
+  packageName: Package['name'];
+  version?: Package['version'];
+  icons?: Package['icons'];
+}
+
+const CACHED_ICONS = new Map<string, string>();
+
+export const usePackageIconType = ({
+  packageName = '',
+  version = '',
+  icons = [],
+}: UsePackageIconType) => {
+  const { toImage } = useLinks();
+  const [iconType, setIconType] = useState<string>(''); // FIXME: use `empty` icon during initialization - see: https://github.com/elastic/kibana/issues/60622
+  const pkgKey = `${packageName}-${version}`;
+  const defaultType = 'package';
+
+  // Generates an icon path or Eui Icon name based on an icon list from the package
+  // or by using the package name against logo icons from Eui
+  const fromInput = useMemo(() => {
+    return (iconList?: Package['icons']) => {
+      const svgIcons = iconList?.filter(iconDef => iconDef.type === 'image/svg+xml');
+      const localIconSrc = Array.isArray(svgIcons) && svgIcons[0]?.src;
+      if (localIconSrc) {
+        CACHED_ICONS.set(pkgKey, toImage(localIconSrc));
+        setIconType(CACHED_ICONS.get(pkgKey) as string);
+        return;
+      }
+
+      const euiLogoIcon = ICON_TYPES.find(key => key.toLowerCase() === `logo${packageName}`);
+      if (euiLogoIcon) {
+        CACHED_ICONS.set(pkgKey, euiLogoIcon);
+        setIconType(euiLogoIcon);
+        return;
+      }
+
+      CACHED_ICONS.set(pkgKey, defaultType);
+      setIconType(defaultType);
+    };
+  }, [packageName, pkgKey, toImage]);
+
+  useEffect(() => {
+    if (CACHED_ICONS.has(pkgKey)) {
+      setIconType(CACHED_ICONS.get(pkgKey) || '');
+      return;
+    }
+
+    if (icons) {
+      fromInput(icons);
+    }
+  }, [icons, toImage, packageName, version, fromInput, pkgKey, iconType]);
+
+  return iconType;
+};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx
index 7b29bb0232d67..3239d7b90e3c3 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx
@@ -12,8 +12,7 @@ import { PackageInfo } from '../../../../types';
 import { useSetPackageInstallStatus } from '../../hooks';
 import { Content } from './content';
 import { Header } from './header';
-import { usePackageIconType } from '../../../../components/package_icon';
-import { sendGetPackageInfoByKey } from '../../../../hooks';
+import { sendGetPackageInfoByKey, usePackageIconType } from '../../../../hooks';
 
 export const DEFAULT_PANEL: DetailViewPanelName = 'overview';