diff --git a/public/app/core/components/AppChrome/TopSearchBar.tsx b/public/app/core/components/AppChrome/TopSearchBar.tsx
index f82fea10577..b5a54d5b9e1 100644
--- a/public/app/core/components/AppChrome/TopSearchBar.tsx
+++ b/public/app/core/components/AppChrome/TopSearchBar.tsx
@@ -2,10 +2,12 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Dropdown, Icon, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { Dropdown, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { useSelector } from 'app/types';
 
+import { Branding } from '../Branding/Branding';
+
 import { NewsContainer } from './News/NewsContainer';
 import { OrganizationSwitcher } from './Organization/OrganizationSwitcher';
 import { QuickAdd } from './QuickAdd/QuickAdd';
@@ -26,7 +28,7 @@ export function TopSearchBar() {
     <div className={styles.layout}>
       <TopSearchBarSection>
         <a className={styles.logo} href="/" title="Go to home">
-          <Icon name="grafana" size="xl" />
+          <Branding.MenuLogo className={styles.img} />
         </a>
         <OrganizationSwitcher />
       </TopSearchBarSection>
@@ -74,6 +76,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
       justifyContent: 'flex-start',
     },
   }),
+  img: css({
+    height: theme.spacing(3),
+    width: theme.spacing(3),
+  }),
   logo: css({
     display: 'flex',
   }),