diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
index 35979e0b05dd..63e383d41446 100644
--- a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
+++ b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
@@ -1,18 +1,10 @@
-import type { ReactNode } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
+import type { TooltipLinkList } from '@storybook/components';
 import { Icons } from '@storybook/components';
 import type { ToolbarItem } from '../types';
 
-interface ListItem {
-  id: string;
-  left?: ReactNode;
-  title?: ReactNode;
-  right?: ReactNode;
-  active?: boolean;
-  onClick?: () => void;
-}
-
-type ToolbarMenuListItemProps = {
+export type ToolbarMenuListItemProps = {
   currentValue: string;
   onClick: () => void;
 } & ToolbarItem;
@@ -28,34 +20,18 @@ export const ToolbarMenuListItem = ({
   currentValue,
 }: ToolbarMenuListItemProps) => {
   const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
-  const hasContent = left || right || title;
 
-  const Item: ListItem = {
+  const Item: ComponentProps<typeof TooltipLinkList>['links'][0] = {
     id: value || currentValue,
     active: currentValue === value,
+    right,
+    title,
+    left,
     onClick,
   };
 
-  if (left) {
-    Item.left = left;
-  }
-
-  if (right) {
-    Item.right = right;
-  }
-
-  if (title) {
-    Item.title = title;
-  }
-
   if (icon && !hideIcon) {
-    if (hasContent && !right) {
-      Item.right = Icon;
-    } else if (hasContent && !left) {
-      Item.left = Icon;
-    } else if (!hasContent) {
-      Item.right = Icon;
-    }
+    Item.left = Icon;
   }
 
   return Item;
diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts
index e2b6ef984165..8690955e4a75 100644
--- a/code/ui/components/src/index.ts
+++ b/code/ui/components/src/index.ts
@@ -57,6 +57,7 @@ export { WithTooltip, WithTooltipPure } from './tooltip/lazy-WithTooltip';
 export { TooltipMessage } from './tooltip/TooltipMessage';
 export { TooltipNote } from './tooltip/TooltipNote';
 export { TooltipLinkList } from './tooltip/TooltipLinkList';
+export { default as ListItem } from './tooltip/ListItem';
 
 // Toolbar and subcomponents
 export { Tabs, TabsState, TabBar, TabWrapper } from './tabs/tabs';
@@ -68,6 +69,7 @@ export { AddonPanel } from './addon-panel/addon-panel';
 // Graphics
 export type { IconsProps } from './icon/icon';
 export { Icons, Symbols } from './icon/icon';
+export { icons } from './icon/icons';
 export { StorybookLogo } from './brand/StorybookLogo';
 export { StorybookIcon } from './brand/StorybookIcon';
 
diff --git a/code/ui/components/src/tabs/tabs.hooks.tsx b/code/ui/components/src/tabs/tabs.hooks.tsx
index d6aeb270a672..a3d506137937 100644
--- a/code/ui/components/src/tabs/tabs.hooks.tsx
+++ b/code/ui/components/src/tabs/tabs.hooks.tsx
@@ -60,7 +60,6 @@ export function useList(list: ChildrenList) {
         <>
           <WithTooltip
             interactive
-            withArrows={false}
             visible={isTooltipVisible}
             onVisibleChange={setTooltipVisible}
             placement="bottom"
diff --git a/code/ui/components/src/tooltip/ListItem.tsx b/code/ui/components/src/tooltip/ListItem.tsx
index c6d1a442154a..0caa097aacf5 100644
--- a/code/ui/components/src/tooltip/ListItem.tsx
+++ b/code/ui/components/src/tooltip/ListItem.tsx
@@ -1,8 +1,10 @@
-import type { FC, ReactNode, ComponentProps } from 'react';
+import type { FC, ReactNode, ComponentProps, ReactElement } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 import memoize from 'memoizerific';
 import { transparentize } from 'polished';
+import { Icons } from '../icon/icon';
+import { icons } from '../icon/icons';
 
 export interface TitleProps {
   children?: ReactNode;
@@ -47,53 +49,35 @@ export interface RightProps {
   active?: boolean;
 }
 
-const Right = styled.span<RightProps>(
-  {
-    '& svg': {
-      transition: 'all 200ms ease-out',
-      opacity: 0,
-      height: 12,
-      width: 12,
-      margin: '3px 0',
-      verticalAlign: 'top',
-    },
-    '& path': {
-      fill: 'inherit',
-    },
+const Right = styled.span<RightProps>({
+  display: 'flex',
+  '& svg': {
+    height: 12,
+    width: 12,
+    margin: '3px 0',
+    verticalAlign: 'top',
   },
-  ({ active, theme }) =>
-    active
-      ? {
-          '& svg': {
-            opacity: 1,
-          },
-          '& path': {
-            fill: theme.color.secondary,
-          },
-        }
-      : {}
-);
-
-const Center = styled.span({
-  flex: 1,
-  textAlign: 'left',
-  display: 'inline-flex',
-
-  '& > * + *': {
-    paddingLeft: 10,
+  '& path': {
+    fill: 'inherit',
   },
 });
 
+const Center = styled.span<{ isIndented: boolean }>(
+  {
+    flex: 1,
+    textAlign: 'left',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  ({ isIndented }) => (isIndented ? { marginLeft: 24 } : {})
+);
+
 export interface CenterTextProps {
   active?: boolean;
   disabled?: boolean;
 }
 
 const CenterText = styled.span<CenterTextProps>(
-  {
-    flex: 1,
-    textAlign: 'center',
-  },
   ({ active, theme }) =>
     active
       ? {
@@ -112,17 +96,22 @@ export interface LeftProps {
   active?: boolean;
 }
 
-const Left = styled.span<LeftProps>(({ active, theme }) =>
-  active
-    ? {
-        '& svg': {
-          opacity: 1,
-        },
-        '& path': {
-          fill: theme.color.primary,
-        },
-      }
-    : {}
+const Left = styled.span<LeftProps>(
+  ({ active, theme }) =>
+    active
+      ? {
+          '& svg': {
+            opacity: 1,
+          },
+          '& svg path': {
+            fill: theme.color.secondary,
+          },
+        }
+      : {},
+  () => ({
+    display: 'flex',
+    maxWidth: 14,
+  })
 );
 
 export interface ItemProps {
@@ -188,14 +177,20 @@ export type LinkWrapperType = FC<any>;
 
 export interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href' | 'title'> {
   loading?: boolean;
+  /**
+   * @deprecated ReactNode elements on the right side of the list item are deprecated.
+   * Use `icon` property instead.
+   */
   left?: ReactNode;
   title?: ReactNode;
   center?: ReactNode;
   right?: ReactNode;
+  icon?: keyof typeof icons | ReactElement;
   active?: boolean;
   disabled?: boolean;
   href?: string;
   LinkWrapper?: LinkWrapperType;
+  isIndented?: boolean;
 }
 
 const ListItem: FC<ListItemProps> = ({
@@ -204,8 +199,10 @@ const ListItem: FC<ListItemProps> = ({
   title,
   center,
   right,
+  icon,
   active,
   disabled,
+  isIndented,
   href,
   onClick,
   LinkWrapper,
@@ -214,11 +211,17 @@ const ListItem: FC<ListItemProps> = ({
   const itemProps = getItemProps(onClick, href, LinkWrapper);
   const commonProps = { active, disabled };
 
+  const isStorybookIcon = typeof icon === 'string' && icons[icon];
+
   return (
     <Item {...commonProps} {...rest} {...itemProps}>
-      {left && <Left {...commonProps}>{left}</Left>}
+      {icon ? (
+        <Left {...commonProps}>{isStorybookIcon ? <Icons icon={icon} /> : icon}</Left>
+      ) : (
+        left && <Left {...commonProps}>{left}</Left>
+      )}
       {title || center ? (
-        <Center>
+        <Center isIndented={!left && !icon && isIndented}>
           {title && (
             <Title {...commonProps} loading={loading}>
               {title}
diff --git a/code/ui/components/src/tooltip/Tooltip.tsx b/code/ui/components/src/tooltip/Tooltip.tsx
index 98e8dce76a20..7c748773b6ea 100644
--- a/code/ui/components/src/tooltip/Tooltip.tsx
+++ b/code/ui/components/src/tooltip/Tooltip.tsx
@@ -126,7 +126,7 @@ export interface TooltipProps {
 
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   (
-    { placement, hasChrome, children, arrowProps, tooltipRef, color, withArrows = true, ...props },
+    { placement, hasChrome, children, arrowProps, tooltipRef, color, withArrows, ...props },
     ref
   ) => {
     return (
diff --git a/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx
index 6aed9627a331..e3006e96766b 100644
--- a/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx
+++ b/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx
@@ -1,9 +1,11 @@
 import type { FunctionComponent, MouseEvent, ReactElement } from 'react';
 import React, { Children, cloneElement } from 'react';
 import { action } from '@storybook/addon-actions';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { WithTooltip } from './WithTooltip';
 import { TooltipLinkList } from './TooltipLinkList';
+import { Icons } from '../icon/icon';
+import ellipseUrl from './assets/ellipse.png';
 
 const onLinkClick = action('onLinkClick');
 
@@ -27,24 +29,6 @@ const StoryLinkWrapper: FunctionComponent<StoryLinkWrapperProps> = ({
   });
 };
 
-export const links = [
-  {
-    id: '1',
-    title: 'Link',
-    href: 'http://google.com',
-  },
-  {
-    id: '2',
-    title: 'Link',
-    href: 'http://google.com',
-  },
-  {
-    id: '3',
-    title: 'callback',
-    onClick: action('onClick'),
-  },
-];
-
 export default {
   component: TooltipLinkList,
   decorators: [
@@ -61,18 +45,160 @@ export default {
     ),
   ],
   excludeStories: ['links'],
-} as Meta;
+} satisfies Meta<typeof TooltipLinkList>;
 
-export const Links = {
+type Story = StoryObj<typeof TooltipLinkList>;
+
+export const WithoutIcons = {
   args: {
-    links: links.slice(0, 2),
+    links: [
+      {
+        id: '1',
+        title: 'Link 1',
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+      {
+        id: '2',
+        title: 'Link 2',
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+    ],
     LinkWrapper: StoryLinkWrapper,
   },
-};
+} satisfies Story;
 
-export const LinksAndCallback = {
+export const WithOneIcon = {
   args: {
-    links,
+    links: [
+      {
+        id: '1',
+        title: 'Link 1',
+        center: 'This is an addition description',
+        icon: 'link',
+        href: 'http://google.com',
+      },
+      {
+        id: '2',
+        title: 'Link 2',
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+    ],
     LinkWrapper: StoryLinkWrapper,
   },
-};
+} satisfies Story;
+
+export const ActiveWithoutAnyIcons = {
+  args: {
+    links: [
+      {
+        id: '1',
+        title: 'Link 1',
+        active: true,
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+      {
+        id: '2',
+        title: 'Link 2',
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+    ],
+    LinkWrapper: StoryLinkWrapper,
+  },
+} satisfies Story;
+
+export const ActiveWithSeparateIcon = {
+  args: {
+    links: [
+      {
+        id: '1',
+        title: 'Link 1',
+        icon: 'link',
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+      {
+        id: '2',
+        title: 'Link 2',
+        active: true,
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+    ],
+    LinkWrapper: StoryLinkWrapper,
+  },
+} satisfies Story;
+
+export const ActiveAndIcon = {
+  args: {
+    links: [
+      {
+        id: '1',
+        title: 'Link 1',
+        active: true,
+        icon: 'link',
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+      {
+        id: '2',
+        title: 'Link 2',
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+    ],
+    LinkWrapper: StoryLinkWrapper,
+  },
+} satisfies Story;
+
+export const WithIllustration = {
+  args: {
+    links: [
+      {
+        id: '1',
+        title: 'Link 1',
+        active: true,
+        icon: 'link',
+        right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+      {
+        id: '2',
+        title: 'Link 2',
+        center: 'This is an addition description',
+        right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
+        href: 'http://google.com',
+      },
+    ],
+    LinkWrapper: StoryLinkWrapper,
+  },
+} satisfies Story;
+
+export const WithCustomIcon = {
+  args: {
+    links: [
+      {
+        id: '1',
+        title: 'Link 1',
+        active: true,
+        icon: <Icons icon="linux" />,
+        right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
+        center: 'This is an addition description',
+        href: 'http://google.com',
+      },
+      {
+        id: '2',
+        title: 'Link 2',
+        center: 'This is an addition description',
+        right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
+        href: 'http://google.com',
+      },
+    ],
+    LinkWrapper: StoryLinkWrapper,
+  },
+} satisfies Story;
diff --git a/code/ui/components/src/tooltip/TooltipLinkList.tsx b/code/ui/components/src/tooltip/TooltipLinkList.tsx
index b3bc5e697409..8e3008eb6b64 100644
--- a/code/ui/components/src/tooltip/TooltipLinkList.tsx
+++ b/code/ui/components/src/tooltip/TooltipLinkList.tsx
@@ -28,8 +28,8 @@ export interface TooltipLinkListProps {
   LinkWrapper?: LinkWrapperType;
 }
 
-const Item: FC<TooltipLinkListProps['links'][number]> = (props) => {
-  const { LinkWrapper, onClick: onClickFromProps, id, ...rest } = props;
+const Item: FC<TooltipLinkListProps['links'][number] & { isIndented?: boolean }> = (props) => {
+  const { LinkWrapper, onClick: onClickFromProps, id, isIndented, ...rest } = props;
   const { title, href, active } = rest;
   const onClick = useCallback(
     (event: SyntheticEvent) => {
@@ -47,19 +47,28 @@ const Item: FC<TooltipLinkListProps['links'][number]> = (props) => {
       href={href}
       id={`list-item-${id}`}
       LinkWrapper={LinkWrapper}
+      isIndented={isIndented}
       {...rest}
       {...(hasOnClick ? { onClick } : {})}
     />
   );
 };
 
-export const TooltipLinkList: FC<TooltipLinkListProps> = ({ links, LinkWrapper }) => (
-  <List>
-    {links.map(({ isGatsby, ...p }) => (
-      <Item key={p.id} LinkWrapper={isGatsby ? LinkWrapper : null} {...p} />
-    ))}
-  </List>
-);
+export const TooltipLinkList: FC<TooltipLinkListProps> = ({ links, LinkWrapper }) => {
+  const hasOneLeftElement = links.some((link) => link.left || link.icon);
+  return (
+    <List>
+      {links.map(({ isGatsby, ...p }) => (
+        <Item
+          key={p.id}
+          LinkWrapper={isGatsby ? LinkWrapper : null}
+          isIndented={hasOneLeftElement}
+          {...p}
+        />
+      ))}
+    </List>
+  );
+};
 
 TooltipLinkList.defaultProps = {
   LinkWrapper: ListItem.defaultProps.LinkWrapper,
diff --git a/code/ui/components/src/tooltip/assets/ellipse.png b/code/ui/components/src/tooltip/assets/ellipse.png
new file mode 100644
index 000000000000..b17235199494
Binary files /dev/null and b/code/ui/components/src/tooltip/assets/ellipse.png differ
diff --git a/code/ui/components/src/typings.d.ts b/code/ui/components/src/typings.d.ts
index b7d6bd46cf5b..388e1a012e23 100644
--- a/code/ui/components/src/typings.d.ts
+++ b/code/ui/components/src/typings.d.ts
@@ -1,2 +1,3 @@
 declare module '*.md';
 declare module '*.mdx';
+declare module '*.png';
diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
index cb57d6d6e003..8d22f6aecd8d 100644
--- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
@@ -1,33 +1,21 @@
 import { expect } from '@storybook/jest';
-import type { FunctionComponent } from 'react';
-import React, { Fragment } from 'react';
+import type { ComponentProps } from 'react';
+import React from 'react';
 
 import { TooltipLinkList } from '@storybook/components';
 import { styled } from '@storybook/theming';
 import { within, userEvent, screen } from '@storybook/testing-library';
-import { MenuItemIcon, SidebarMenu, ToolbarMenu } from './Menu';
+import { SidebarMenu, ToolbarMenu } from './Menu';
 import { useMenu } from '../../containers/menu';
 
 export default {
-  component: MenuItemIcon,
+  component: SidebarMenu,
   title: 'Sidebar/Menu',
-  decorators: [
-    (StoryFn: FunctionComponent) => (
-      <Fragment>
-        <StoryFn />
-      </Fragment>
-    ),
-  ],
 };
 
-const fakemenu = [
-  { title: 'has icon', left: <MenuItemIcon icon="check" />, id: 'icon' },
-  {
-    title: 'has imgSrc',
-    left: <MenuItemIcon imgSrc="https://storybook.js.org/images/placeholders/20x20.png" />,
-    id: 'img',
-  },
-  { title: 'has neither', left: <MenuItemIcon />, id: 'non' },
+const fakemenu: ComponentProps<typeof TooltipLinkList>['links'] = [
+  { title: 'has icon', icon: 'link', id: 'icon' },
+  { title: 'has no icon', id: 'non' },
 ];
 
 export const Items = () => <TooltipLinkList links={fakemenu} />;
diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx
index 64c0508e4c67..48a876c05436 100644
--- a/code/ui/manager/src/components/sidebar/Menu.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.tsx
@@ -66,6 +66,10 @@ export interface ListItemIconProps {
   imgSrc?: string;
 }
 
+/**
+ * @deprecated Please use `Icons` from `@storybook/components` instead
+ * Component will be removed in SB 8.0
+ */
 export const MenuItemIcon = ({ icon, imgSrc }: ListItemIconProps) => {
   if (icon) {
     return <Icon icon={icon} />;
diff --git a/code/ui/manager/src/components/sidebar/RefIndicator.tsx b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
index 0d116a63f5c0..3c8cd8b5a375 100644
--- a/code/ui/manager/src/components/sidebar/RefIndicator.tsx
+++ b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
@@ -7,7 +7,6 @@ import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { useStorybookApi } from '@storybook/manager-api';
 
-import { MenuItemIcon } from './Menu';
 import type { RefType } from './types';
 
 import type { getStateType } from './utils';
@@ -222,7 +221,7 @@ export const RefIndicator = React.memo(
               tooltip={
                 <TooltipLinkList
                   links={Object.entries(ref.versions).map(([id, href]) => ({
-                    left: href === ref.url ? <MenuItemIcon icon="check" /> : <span />,
+                    icon: href === ref.url ? 'check' : undefined,
                     id,
                     title: id,
                     href,
diff --git a/code/ui/manager/src/containers/Menu.stories.tsx b/code/ui/manager/src/containers/Menu.stories.tsx
new file mode 100644
index 000000000000..0865f8709748
--- /dev/null
+++ b/code/ui/manager/src/containers/Menu.stories.tsx
@@ -0,0 +1,93 @@
+import type { FunctionComponent, MouseEvent, ReactElement } from 'react';
+import React, { Children, cloneElement } from 'react';
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TooltipLinkList, WithTooltip } from '@storybook/components';
+import { Shortcut } from './menu';
+
+const onLinkClick = action('onLinkClick');
+
+interface StoryLinkWrapperProps {
+  href: string;
+  passHref?: boolean;
+}
+
+const StoryLinkWrapper: FunctionComponent<StoryLinkWrapperProps> = ({
+  href,
+  passHref = false,
+  children,
+}) => {
+  const child = Children.only(children) as ReactElement;
+  return cloneElement(child, {
+    href: passHref && href,
+    onClick: (e: MouseEvent) => {
+      e.preventDefault();
+      onLinkClick(href);
+    },
+  });
+};
+
+export default {
+  component: TooltipLinkList,
+  decorators: [
+    (storyFn) => (
+      <div
+        style={{
+          height: '300px',
+        }}
+      >
+        <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
+          <div>Tooltip</div>
+        </WithTooltip>
+      </div>
+    ),
+  ],
+  excludeStories: ['links'],
+} satisfies Meta<typeof TooltipLinkList>;
+
+type Story = StoryObj<typeof TooltipLinkList>;
+
+export const WithShortcuts = {
+  args: {
+    links: [
+      {
+        id: '1',
+        title: 'Link 1',
+        center: 'This is an addition description',
+        right: <Shortcut keys={['⌘']} />,
+        href: 'http://google.com',
+      },
+      {
+        id: '2',
+        title: 'Link 2',
+        center: 'This is an addition description',
+        right: <Shortcut keys={['⌘', 'K']} />,
+        href: 'http://google.com',
+      },
+    ],
+    LinkWrapper: StoryLinkWrapper,
+  },
+} satisfies Story;
+
+export const WithShortcutsActive = {
+  args: {
+    links: [
+      {
+        id: '1',
+        title: 'Link 1',
+        center: 'This is an addition description',
+        active: true,
+        right: <Shortcut keys={['⌘']} />,
+        href: 'http://google.com',
+      },
+      {
+        id: '2',
+        title: 'Link 2',
+        center: 'This is an addition description',
+        right: <Shortcut keys={['⌘', 'K']} />,
+        href: 'http://google.com',
+      },
+    ],
+    LinkWrapper: StoryLinkWrapper,
+  },
+} satisfies Story;
diff --git a/code/ui/manager/src/containers/menu.tsx b/code/ui/manager/src/containers/menu.tsx
index 9e7bc34e04ef..23408c86f77a 100644
--- a/code/ui/manager/src/containers/menu.tsx
+++ b/code/ui/manager/src/containers/menu.tsx
@@ -1,12 +1,11 @@
 import type { FC } from 'react';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { Badge } from '@storybook/components';
+import { Badge, Icons } from '@storybook/components';
 import type { API } from '@storybook/manager-api';
 import { styled, useTheme } from '@storybook/theming';
 
 import { shortcutToHumanString } from '@storybook/manager-api';
-import { MenuItemIcon } from '../components/sidebar/Menu';
 
 const focusableUIElements = {
   storySearchField: 'storybook-explorer-searchfield',
@@ -14,8 +13,8 @@ const focusableUIElements = {
   storyPanelRoot: 'storybook-panel-root',
 };
 
-const Key = styled.code(({ theme }) => ({
-  width: 16,
+const Key = styled.span(({ theme }) => ({
+  display: 'inline-block',
   height: 16,
   lineHeight: '16px',
   textAlign: 'center',
@@ -25,17 +24,26 @@ const Key = styled.code(({ theme }) => ({
   borderRadius: 2,
   userSelect: 'none',
   pointerEvents: 'none',
-  '& + &': {
-    marginLeft: 2,
-  },
+  padding: '0 6px',
 }));
 
-const Shortcut: FC<{ keys: string[] }> = ({ keys }) => (
+const KeyChild = styled.code(
+  ({ theme }) => `
+  padding: 0;
+
+  & + & {
+    margin-left: 6px;
+  }
+`
+);
+
+export const Shortcut: FC<{ keys: string[] }> = ({ keys }) => (
   <>
-    {keys.map((key, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <Key key={index}>{shortcutToHumanString([key])}</Key>
-    ))}
+    <Key>
+      {keys.map((key, index) => (
+        <KeyChild key={key}>{shortcutToHumanString([key])}</KeyChild>
+      ))}
+    </Key>
   </>
 );
 
@@ -56,9 +64,8 @@ export const useMenu = (
       title: 'About your Storybook',
       onClick: () => api.navigateToSettingsPage('/settings/about'),
       right: api.versionUpdateAvailable() && <Badge status="positive">Update</Badge>,
-      left: <MenuItemIcon />,
     }),
-    [api, enableShortcuts, shortcutKeys]
+    [api]
   );
 
   const releaseNotes = useMemo(
@@ -66,9 +73,8 @@ export const useMenu = (
       id: 'release-notes',
       title: 'Release notes',
       onClick: () => api.navigateToSettingsPage('/settings/release-notes'),
-      left: <MenuItemIcon />,
     }),
-    [api, enableShortcuts, shortcutKeys]
+    [api]
   );
 
   const shortcuts = useMemo(
@@ -77,12 +83,11 @@ export const useMenu = (
       title: 'Keyboard shortcuts',
       onClick: () => api.navigateToSettingsPage('/settings/shortcuts'),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.shortcutsPage} /> : null,
-      left: <MenuItemIcon />,
       style: {
         borderBottom: `4px solid ${theme.appBorderColor}`,
       },
     }),
-    [api, enableShortcuts, shortcutKeys]
+    [api, enableShortcuts, shortcutKeys.shortcutsPage, theme.appBorderColor]
   );
 
   const sidebarToggle = useMemo(
@@ -90,8 +95,9 @@ export const useMenu = (
       id: 'S',
       title: 'Show sidebar',
       onClick: () => api.toggleNav(),
+      active: showNav,
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.toggleNav} /> : null,
-      left: showNav ? <MenuItemIcon icon="check" /> : <MenuItemIcon />,
+      left: showNav ? <Icons icon="check" /> : null,
     }),
     [api, enableShortcuts, shortcutKeys, showNav]
   );
@@ -101,8 +107,9 @@ export const useMenu = (
       id: 'T',
       title: 'Show toolbar',
       onClick: () => api.toggleToolbar(),
+      active: showToolbar,
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.toolbar} /> : null,
-      left: showToolbar ? <MenuItemIcon icon="check" /> : <MenuItemIcon />,
+      left: showToolbar ? <Icons icon="check" /> : null,
     }),
     [api, enableShortcuts, shortcutKeys, showToolbar]
   );
@@ -112,8 +119,9 @@ export const useMenu = (
       id: 'A',
       title: 'Show addons',
       onClick: () => api.togglePanel(),
+      active: showPanel,
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.togglePanel} /> : null,
-      left: showPanel ? <MenuItemIcon icon="check" /> : <MenuItemIcon />,
+      left: showPanel ? <Icons icon="check" /> : null,
     }),
     [api, enableShortcuts, shortcutKeys, showPanel]
   );
@@ -124,7 +132,6 @@ export const useMenu = (
       title: 'Change addons orientation',
       onClick: () => api.togglePanelPosition(),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.panelPosition} /> : null,
-      left: <MenuItemIcon />,
     }),
     [api, enableShortcuts, shortcutKeys]
   );
@@ -134,8 +141,9 @@ export const useMenu = (
       id: 'F',
       title: 'Go full screen',
       onClick: () => api.toggleFullscreen(),
+      active: isFullscreen,
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.fullScreen} /> : null,
-      left: isFullscreen ? 'check' : <MenuItemIcon />,
+      left: isFullscreen ? <Icons icon="check" /> : null,
     }),
     [api, enableShortcuts, shortcutKeys, isFullscreen]
   );
@@ -146,7 +154,6 @@ export const useMenu = (
       title: 'Search',
       onClick: () => api.focusOnUIElement(focusableUIElements.storySearchField),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.search} /> : null,
-      left: <MenuItemIcon />,
     }),
     [api, enableShortcuts, shortcutKeys]
   );
@@ -157,7 +164,6 @@ export const useMenu = (
       title: 'Previous component',
       onClick: () => api.jumpToComponent(-1),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.prevComponent} /> : null,
-      left: <MenuItemIcon />,
     }),
     [api, enableShortcuts, shortcutKeys]
   );
@@ -168,7 +174,6 @@ export const useMenu = (
       title: 'Next component',
       onClick: () => api.jumpToComponent(1),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.nextComponent} /> : null,
-      left: <MenuItemIcon />,
     }),
     [api, enableShortcuts, shortcutKeys]
   );
@@ -179,7 +184,6 @@ export const useMenu = (
       title: 'Previous story',
       onClick: () => api.jumpToStory(-1),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.prevStory} /> : null,
-      left: <MenuItemIcon />,
     }),
     [api, enableShortcuts, shortcutKeys]
   );
@@ -190,7 +194,6 @@ export const useMenu = (
       title: 'Next story',
       onClick: () => api.jumpToStory(1),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.nextStory} /> : null,
-      left: <MenuItemIcon />,
     }),
     [api, enableShortcuts, shortcutKeys]
   );
@@ -201,24 +204,22 @@ export const useMenu = (
       title: 'Collapse all',
       onClick: () => api.collapseAll(),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.collapseAll} /> : null,
-      left: <MenuItemIcon />,
     }),
     [api, enableShortcuts, shortcutKeys]
   );
 
-  const getAddonsShortcuts = (): any[] => {
+  const getAddonsShortcuts = useCallback(() => {
     const addonsShortcuts = api.getAddonsShortcuts();
     const keys = shortcutKeys as any;
     return Object.entries(addonsShortcuts)
-      .filter(([actionName, { showInMenu }]) => showInMenu)
+      .filter(([_, { showInMenu }]) => showInMenu)
       .map(([actionName, { label, action }]) => ({
         id: actionName,
         title: label,
         onClick: () => action(),
         right: enableShortcuts ? <Shortcut keys={keys[actionName]} /> : null,
-        left: <MenuItemIcon />,
       }));
-  };
+  }, [api, enableShortcuts, shortcutKeys]);
 
   return useMemo(
     () => [
@@ -240,7 +241,8 @@ export const useMenu = (
     ],
     [
       about,
-      ...(api.releaseNotesVersion() ? [releaseNotes] : []),
+      api,
+      releaseNotes,
       shortcuts,
       sidebarToggle,
       toolbarToogle,
@@ -253,6 +255,7 @@ export const useMenu = (
       prev,
       next,
       collapse,
+      getAddonsShortcuts,
     ]
   );
 };
diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts
index bcc126d07c7d..ca4dfa361bfb 100644
--- a/code/ui/manager/src/globals/exports.ts
+++ b/code/ui/manager/src/globals/exports.ts
@@ -73,6 +73,7 @@ export default {
     'Img',
     'LI',
     'Link',
+    'ListItem',
     'Loader',
     'OL',
     'P',
@@ -105,6 +106,7 @@ export default {
     'components',
     'createCopyToClipboardFunction',
     'getStoryHref',
+    'icons',
     'interleaveSeparators',
     'nameSpaceClassNames',
     'resetComponents',