diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
index 26869f8fea574..f0630f89c8984 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
@@ -79,6 +79,13 @@ const FlexItemWithMinWidth = styled(EuiFlexItem)`
   min-width: 0px;
 `;
 
+// to limit size of iconpanel, making the header too big
+const FlexItemWithMaxHeight = styled(EuiFlexItem)`
+  @media (min-width: 768px) {
+    max-height: 60px;
+  }
+`;
+
 function Breadcrumbs({ packageTitle }: { packageTitle: string }) {
   useBreadcrumbs('integration_details_overview', { pkgTitle: packageTitle });
   return null;
@@ -173,7 +180,7 @@ export function Detail() {
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="l">
-            <EuiFlexItem grow={false}>
+            <FlexItemWithMaxHeight grow={false}>
               {isLoading || !packageInfo ? (
                 <LoadingIconPanel />
               ) : (
@@ -184,7 +191,7 @@ export function Detail() {
                   icons={integrationInfo?.icons || packageInfo.icons}
                 />
               )}
-            </EuiFlexItem>
+            </FlexItemWithMaxHeight>
             <EuiFlexItem>
               <EuiFlexGroup alignItems="center" gutterSize="m">
                 <FlexItemWithMinWidth grow={false}>