diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx
index 3fe7e6923097..5d6c55307d13 100644
--- a/code/ui/blocks/src/components/Toolbar.tsx
+++ b/code/ui/blocks/src/components/Toolbar.tsx
@@ -1,7 +1,7 @@
 import type { FC, MouseEvent } from 'react';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
-import { FlexBar, IconButton, IconButtonSkeleton } from '@storybook/components';
+import { FlexBar, IconButton } from '@storybook/components';
 import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons';
 
 interface ZoomProps {
@@ -24,41 +24,6 @@ interface LoadingProps {
 
 export type ToolbarProps = BarProps & ZoomProps & EjectProps & LoadingProps;
 
-const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
-  <>
-    <IconButton
-      key="zoomin"
-      onClick={(e: MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-        zoom(0.8);
-      }}
-      title="Zoom in"
-    >
-      <ZoomIcon />
-    </IconButton>
-    <IconButton
-      key="zoomout"
-      onClick={(e: MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-        zoom(1.25);
-      }}
-      title="Zoom out"
-    >
-      <ZoomOutIcon />
-    </IconButton>
-    <IconButton
-      key="zoomreset"
-      onClick={(e: MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-        resetZoom();
-      }}
-      title="Reset zoom"
-    >
-      <ZoomResetIcon />
-    </IconButton>
-  </>
-);
-
 const Bar = styled(FlexBar)({
   position: 'absolute',
   left: 0,
@@ -67,6 +32,21 @@ const Bar = styled(FlexBar)({
   transition: 'transform .2s linear',
 });
 
+const Wrapper = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+});
+
+const IconPlaceholder = styled.div(({ theme }) => ({
+  width: 14,
+  height: 14,
+  borderRadius: 2,
+  margin: '0 7px',
+  backgroundColor: theme.appBorderColor,
+  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+}));
+
 export const Toolbar: FC<ToolbarProps> = ({
   isLoading,
   storyId,
@@ -76,12 +56,43 @@ export const Toolbar: FC<ToolbarProps> = ({
   ...rest
 }) => (
   <Bar {...rest}>
-    <Fragment key="left">
+    <Wrapper key="left">
       {isLoading ? (
-        [1, 2, 3].map((key) => <IconButtonSkeleton key={key} />)
+        [1, 2, 3].map((key) => <IconPlaceholder key={key} />)
       ) : (
-        <Zoom {...{ zoom, resetZoom }} />
+        <>
+          <IconButton
+            key="zoomin"
+            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+              e.preventDefault();
+              zoom(0.8);
+            }}
+            title="Zoom in"
+          >
+            <ZoomIcon />
+          </IconButton>
+          <IconButton
+            key="zoomout"
+            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+              e.preventDefault();
+              zoom(1.25);
+            }}
+            title="Zoom out"
+          >
+            <ZoomOutIcon />
+          </IconButton>
+          <IconButton
+            key="zoomreset"
+            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+              e.preventDefault();
+              resetZoom();
+            }}
+            title="Reset zoom"
+          >
+            <ZoomResetIcon />
+          </IconButton>
+        </>
       )}
-    </Fragment>
+    </Wrapper>
   </Bar>
 );
diff --git a/code/ui/components/src/components/bar/button.tsx b/code/ui/components/src/components/bar/button.tsx
index 89c7078050ba..0c45c0ba3fa6 100644
--- a/code/ui/components/src/components/bar/button.tsx
+++ b/code/ui/components/src/components/bar/button.tsx
@@ -2,6 +2,7 @@ import type {
   AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   DetailedHTMLProps,
+  FC,
   ForwardedRef,
   ForwardRefExoticComponent,
   ReactElement,
@@ -142,7 +143,11 @@ const IconButtonSkeletonWrapper = styled.div(() => ({
   height: 28,
 }));
 
-export const IconButtonSkeleton = () => (
+/**
+ * @deprecated
+ * This component will be removed in Storybook 9.0
+ * */
+export const IconButtonSkeleton: FC = () => (
   <IconButtonSkeletonWrapper>
     <IconPlaceholder />
   </IconButtonSkeletonWrapper>
diff --git a/code/ui/components/src/components/tooltip/ListItem.stories.tsx b/code/ui/components/src/components/tooltip/ListItem.stories.tsx
index 008c380cdcd5..ab68b8444ba8 100644
--- a/code/ui/components/src/components/tooltip/ListItem.stories.tsx
+++ b/code/ui/components/src/components/tooltip/ListItem.stories.tsx
@@ -49,14 +49,14 @@ export const ActiveIconLeft = {
   args: {
     title: 'Active icon',
     active: true,
-    left: <EyeIcon />,
+    icon: <EyeIcon />,
   },
 };
 export const ActiveIconLeftColored = {
   args: {
     title: 'Active icon',
     active: true,
-    left: (
+    icon: (
       <Fragment>
         <svg
           width="16"
diff --git a/code/ui/components/src/components/tooltip/ListItem.tsx b/code/ui/components/src/components/tooltip/ListItem.tsx
index ef6b3949105c..404662a0b240 100644
--- a/code/ui/components/src/components/tooltip/ListItem.tsx
+++ b/code/ui/components/src/components/tooltip/ListItem.tsx
@@ -102,12 +102,7 @@ const Left = styled.span<LeftProps>(
   ({ active, theme }) =>
     active
       ? {
-          '& svg': {
-            opacity: 1,
-          },
-          '& svg path:not([fill])': {
-            fill: theme.color.secondary,
-          },
+          color: theme.color.secondary,
         }
       : {},
   () => ({
diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx
index a03ca5ca5911..84186de35444 100644
--- a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx
+++ b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx
@@ -2,7 +2,7 @@ import type { FunctionComponent, MouseEvent, PropsWithChildren, ReactElement } f
 import React, { Children, cloneElement } from 'react';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
-import { LinuxIcon } from '@storybook/icons';
+import { LinkIcon, LinuxIcon } from '@storybook/icons';
 import { WithTooltip } from './WithTooltip';
 import { TooltipLinkList } from './TooltipLinkList';
 import ellipseUrl from './assets/ellipse.png';
@@ -76,7 +76,7 @@ export const WithOneIcon = {
         id: '1',
         title: 'Link 1',
         center: 'This is an addition description',
-        icon: 'link',
+        icon: <LinkIcon />,
         href: 'http://google.com',
       },
       {
@@ -117,7 +117,7 @@ export const ActiveWithSeparateIcon = {
       {
         id: '1',
         title: 'Link 1',
-        icon: 'link',
+        icon: <LinkIcon />,
         center: 'This is an addition description',
         href: 'http://google.com',
       },
@@ -140,7 +140,7 @@ export const ActiveAndIcon = {
         id: '1',
         title: 'Link 1',
         active: true,
-        icon: 'link',
+        icon: <LinkIcon />,
         center: 'This is an addition description',
         href: 'http://google.com',
       },
@@ -162,7 +162,7 @@ export const WithIllustration = {
         id: '1',
         title: 'Link 1',
         active: true,
-        icon: 'link',
+        icon: <LinkIcon />,
         right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
         center: 'This is an addition description',
         href: 'http://google.com',
diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
index c113a632fe7c..e04811e76bf8 100644
--- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
@@ -7,12 +7,13 @@ import { TooltipLinkList } from '@storybook/components';
 import { styled } from '@storybook/theming';
 import { screen, userEvent, within } from '@storybook/testing-library';
 import type { State } from '@storybook/manager-api';
+import { LinkIcon } from '@storybook/icons';
 import { SidebarMenu, ToolbarMenu } from './Menu';
 import { useMenu } from '../../container/Menu';
 import { LayoutProvider } from '../layout/LayoutProvider';
 
 const fakemenu: ComponentProps<typeof TooltipLinkList>['links'] = [
-  { title: 'has icon', icon: 'link', id: 'icon' },
+  { title: 'has icon', icon: <LinkIcon />, id: 'icon' },
   { title: 'has no icon', id: 'non' },
 ];