diff --git a/public/app/core/components/PageNew/SectionNavItem.test.tsx b/public/app/core/components/PageNew/SectionNavItem.test.tsx
new file mode 100644
index 00000000000..90d92e75462
--- /dev/null
+++ b/public/app/core/components/PageNew/SectionNavItem.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { NavModelItem } from '@grafana/data';
+
+import { SectionNavItem } from './SectionNavItem';
+
+describe('SectionNavItem', () => {
+ it('should only show the img for a section root if both img and icon are present', () => {
+ const item: NavModelItem = {
+ text: 'Test',
+ icon: 'k6',
+ img: 'img',
+ children: [
+ {
+ text: 'Child',
+ },
+ ],
+ };
+
+ render();
+ expect(screen.getByTestId('section-image')).toBeInTheDocument();
+ expect(screen.queryByTestId('section-icon')).not.toBeInTheDocument();
+ });
+});
diff --git a/public/app/core/components/PageNew/SectionNavItem.tsx b/public/app/core/components/PageNew/SectionNavItem.tsx
index 148a3b386f1..9a85a66ee76 100644
--- a/public/app/core/components/PageNew/SectionNavItem.tsx
+++ b/public/app/core/components/PageNew/SectionNavItem.tsx
@@ -28,6 +28,14 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
[styles.noRootMargin]: noRootMargin,
});
+ let icon: React.ReactNode | null = null;
+
+ if (item.img) {
+ icon =
;
+ } else if (item.icon) {
+ icon = ;
+ }
+
return (
<>
- {isSectionRoot && item.icon && }
- {isSectionRoot && item.img &&
}
+ {isSectionRoot && icon}
{getNavTitle(item.id) ?? item.text}
{item.tabSuffix && }