diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 51666014253b..e0f45868d5d2 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -60,7 +60,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
diff --git a/code/addons/a11y/src/components/Report/Item.tsx b/code/addons/a11y/src/components/Report/Item.tsx
index 2d34ee58d745..1830a10771fc 100644
--- a/code/addons/a11y/src/components/Report/Item.tsx
+++ b/code/addons/a11y/src/components/Report/Item.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useState } from 'react';
 
 import { styled } from '@storybook/theming';
-import { Icons } from '@storybook/components';
 
 import type { Result } from 'axe-core';
 import { Info } from './Info';
@@ -11,6 +10,7 @@ import { Tags } from './Tags';
 
 import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',
@@ -21,10 +21,7 @@ const Wrapper = styled.div(({ theme }) => ({
   },
 }));
 
-const Icon = styled(Icons)({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)({
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   verticalAlign: 'inherit',
@@ -75,7 +72,6 @@ export const Item = (props: ItemProps) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index 471b4aa7ff8c..ced523ef8f78 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -59,7 +59,7 @@
   "devDependencies": {
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index dc8f90acc6a0..590bbfaf713a 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -61,7 +61,7 @@
     "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/instrumenter": "workspace:*",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
diff --git a/code/addons/interactions/src/components/List.tsx b/code/addons/interactions/src/components/List.tsx
index 8c420d37102a..75db1d21d99e 100644
--- a/code/addons/interactions/src/components/List.tsx
+++ b/code/addons/interactions/src/components/List.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
-import { Icons, type IconsProps } from '@storybook/components';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const ListWrapper = styled.ul({
   listStyle: 'none',
@@ -18,10 +18,7 @@ const Wrapper = styled.div({
   },
 });
 
-const Icon = styled(Icons)<IconsProps>({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)({
   color: convert(themes.light).textMutedColor,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
@@ -68,7 +65,6 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
             color={convert(themes.light).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
diff --git a/code/addons/interactions/src/components/StatusIcon.tsx b/code/addons/interactions/src/components/StatusIcon.tsx
index a563f6df1521..6586c71322a0 100644
--- a/code/addons/interactions/src/components/StatusIcon.tsx
+++ b/code/addons/interactions/src/components/StatusIcon.tsx
@@ -1,51 +1,44 @@
 import React from 'react';
-import { Icons, type IconsProps } from '@storybook/components';
 import { type Call, CallStates } from '@storybook/instrumenter';
-import { styled } from '@storybook/theming';
+import { styled, useTheme } from '@storybook/theming';
 
 import { transparentize } from 'polished';
-import localTheme from '../theme';
+import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
 
 export interface StatusIconProps {
   status: Call['status'];
-  useSymbol?: IconsProps['useSymbol'];
-  className?: string;
 }
 
-const {
-  colors: {
-    pure: { gray },
-  },
-} = localTheme;
-
-const StyledStatusIcon = styled(Icons)<StatusIconProps>(({ theme, status }) => {
-  const color = {
-    [CallStates.DONE]: theme.color.positive,
-    [CallStates.ERROR]: theme.color.negative,
-    [CallStates.ACTIVE]: theme.color.secondary,
-    [CallStates.WAITING]: transparentize(0.5, gray[500]),
-  }[status];
-  return {
-    width: status === CallStates.WAITING ? 6 : 12,
-    height: status === CallStates.WAITING ? 6 : 12,
-    color,
-    justifySelf: 'center',
-  };
+const WarningContainer = styled.div({
+  width: 14,
+  height: 14,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
 });
 
-export const StatusIcon: React.FC<StatusIconProps> = ({ status, className }) => {
-  const icon = {
-    [CallStates.DONE]: 'check',
-    [CallStates.ERROR]: 'stopalt',
-    [CallStates.ACTIVE]: 'play',
-    [CallStates.WAITING]: 'circle',
-  }[status] as IconsProps['icon'];
-  return (
-    <StyledStatusIcon
-      data-testid={`icon-${status}`}
-      status={status}
-      icon={icon}
-      className={className}
-    />
-  );
+export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => {
+  const theme = useTheme();
+
+  switch (status) {
+    case CallStates.DONE: {
+      return <CheckIcon color={theme.color.positive} data-testid="icon-done" />;
+    }
+    case CallStates.ERROR: {
+      return <StopAltIcon color={theme.color.negative} data-testid="icon-error" />;
+    }
+    case CallStates.ACTIVE: {
+      return <PlayIcon color={theme.color.secondary} data-testid="icon-active" />;
+    }
+    case CallStates.WAITING: {
+      return (
+        <WarningContainer data-testid="icon-waiting">
+          <CircleIcon color={transparentize(0.5, '#CCCCCC')} size={6} />
+        </WarningContainer>
+      );
+    }
+    default: {
+      return null;
+    }
+  }
 };
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index c35b6b08d53b..88e5024ebeef 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -62,6 +62,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
diff --git a/code/addons/jest/src/components/Result.tsx b/code/addons/jest/src/components/Result.tsx
index d50fa6f34a1a..61bacd9e6af7 100644
--- a/code/addons/jest/src/components/Result.tsx
+++ b/code/addons/jest/src/components/Result.tsx
@@ -1,8 +1,8 @@
 import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
-import { Icons } from '@storybook/components';
 // eslint-disable-next-line import/no-named-as-default
 import Message from './Message';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({
   display: 'flex',
@@ -30,10 +30,7 @@ const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({
   },
 }));
 
-const Icon = styled(Icons)(({ theme }) => ({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)(({ theme }) => ({
   color: theme.textMutedColor,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
@@ -66,7 +63,6 @@ export function Result(props: ResultProps) {
         <HeaderBar onClick={onToggle} role="button" status={status}>
           {status === `failed` ? (
             <Icon
-              icon="arrowdown"
               color={convert(themes.light).textMutedColor}
               style={{
                 transform: `rotate(${isOpen ? 0 : -90}deg)`,
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index 7f7d7e785da4..65af4a334371 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -71,7 +71,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index 551f7bf90ae2..65de564fd0e0 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -61,7 +61,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 65ac5f10cce5..4438b576acb4 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -59,7 +59,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
diff --git a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx
index f7d297be6b93..b095b0fb3e24 100644
--- a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx
+++ b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx
@@ -10,6 +10,10 @@ interface ToolbarMenuButtonProps {
   onClick?: () => void;
 }
 
+// We can't remove the Icons component just yet because there's no way for now to import icons
+// in the preview directly. Before having a better solution, we are going to keep the Icons component
+// for now and remove the deprecated warning.
+
 export const ToolbarMenuButton: FC<ToolbarMenuButtonProps> = ({
   active,
   title,
@@ -19,7 +23,7 @@ export const ToolbarMenuButton: FC<ToolbarMenuButtonProps> = ({
 }) => {
   return (
     <IconButton active={active} title={description} onClick={onClick}>
-      {icon && <Icons icon={icon} />}
+      {icon && <Icons icon={icon} __suppressDeprecationWarning={true} />}
       {title ? `\xa0${title}` : null}
     </IconButton>
   );
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index d35deb4fb890..0a11772f6b07 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -55,7 +55,7 @@
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx
index 8d2bfc9aa908..1054d62a5d59 100644
--- a/code/ui/.storybook/preview.tsx
+++ b/code/ui/.storybook/preview.tsx
@@ -11,7 +11,6 @@ import {
   useTheme,
 } from '@storybook/theming';
 import { useArgs, DocsContext as DocsContextProps } from '@storybook/preview-api';
-import { Symbols } from '@storybook/components';
 import type { PreviewWeb } from '@storybook/preview-api';
 import type { ReactRenderer } from '@storybook/react';
 import type { Channel } from '@storybook/channels';
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index bb26603fce09..3b65bd392a3a 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -51,7 +51,7 @@
     "@storybook/csf": "^0.1.2",
     "@storybook/docs-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx b/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx
index 131aab285a1b..7d549c5f45a7 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx
@@ -3,8 +3,9 @@ import React, { useState } from 'react';
 import memoize from 'memoizerific';
 import uniq from 'lodash/uniq.js';
 import { styled } from '@storybook/theming';
-import { WithTooltipPure, Icons, SyntaxHighlighter, codeCommon } from '@storybook/components';
+import { WithTooltipPure, SyntaxHighlighter, codeCommon } from '@storybook/components';
 import type { PropSummaryValue } from './types';
+import { ChevronSmallDownIcon, ChevronSmallUpIcon } from '@storybook/icons';
 
 interface ArgValueProps {
   value?: PropSummaryValue;
@@ -86,10 +87,11 @@ const Detail = styled.div<{ width: string }>(({ theme, width }) => ({
   },
 }));
 
-const ArrowIcon = styled(Icons)({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const ChevronUpIcon = styled(ChevronSmallUpIcon)({
+  marginLeft: 4,
+});
+
+const ChevronDownIcon = styled(ChevronSmallDownIcon)({
   marginLeft: 4,
 });
 
@@ -176,7 +178,7 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
     >
       <Expandable className="sbdocs-expandable">
         <span>{summaryAsString}</span>
-        <ArrowIcon icon={isOpen ? 'arrowup' : 'arrowdown'} />
+        {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
       </Expandable>
     </WithTooltipPure>
   );
diff --git a/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx b/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx
index b23f225584db..450075b56aa7 100644
--- a/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useState } from 'react';
 import { transparentize, lighten } from 'polished';
 import { styled } from '@storybook/theming';
-import { Icons } from '@storybook/components';
+import { ChevronDownIcon, ChevronRightIcon } from '@storybook/icons';
 
 type Level = 'section' | 'subsection';
 
@@ -14,7 +14,21 @@ export interface SectionRowProps {
   colSpan: number;
 }
 
-const ExpanderIcon = styled(Icons)(({ theme }) => ({
+const ExpanderIconDown = styled(ChevronDownIcon)(({ theme }) => ({
+  marginRight: 8,
+  marginLeft: -10,
+  marginTop: -2, // optical alignment
+  height: 12,
+  width: 12,
+  color:
+    theme.base === 'light'
+      ? transparentize(0.25, theme.color.defaultText)
+      : transparentize(0.3, theme.color.defaultText),
+  border: 'none',
+  display: 'inline-block',
+}));
+
+const ExpanderIconRight = styled(ChevronRightIcon)(({ theme }) => ({
   marginRight: 8,
   marginLeft: -10,
   marginTop: -2, // optical alignment
@@ -100,7 +114,6 @@ export const SectionRow: FC<SectionRowProps> = ({
   // @ts-expect-error (Converted from ts-ignore)
   const itemCount = children?.length || 0;
   const caption = level === 'subsection' ? `${itemCount} item${itemCount !== 1 ? 's' : ''}` : '';
-  const icon = expanded ? 'arrowdown' : 'arrowright';
 
   const helperText = `${expanded ? 'Hide' : 'Show'} ${
     level === 'subsection' ? itemCount : label
@@ -114,7 +127,7 @@ export const SectionRow: FC<SectionRowProps> = ({
             {helperText}
           </ClickIntercept>
           <FlexWrapper>
-            <ExpanderIcon icon={icon} />
+            {expanded ? <ExpanderIconDown /> : <ExpanderIconRight />}
             {label}
           </FlexWrapper>
         </Level>
diff --git a/code/ui/blocks/src/components/IconGallery.stories.tsx b/code/ui/blocks/src/components/IconGallery.stories.tsx
index b14417402fdd..0dc183e79311 100644
--- a/code/ui/blocks/src/components/IconGallery.stories.tsx
+++ b/code/ui/blocks/src/components/IconGallery.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Icons as ExampleIcon } from '@storybook/components';
 import { IconItem, IconGallery } from './IconGallery';
+import { AddIcon, FaceHappyIcon, HomeIcon, SubtractIcon } from '@storybook/icons';
 
 export default {
   component: IconGallery,
@@ -9,16 +9,16 @@ export default {
 export const DefaultStyle = () => (
   <IconGallery>
     <IconItem name="add">
-      <ExampleIcon icon="add" />
+      <AddIcon />
     </IconItem>
     <IconItem name="subtract">
-      <ExampleIcon icon="subtract" />
+      <SubtractIcon />
     </IconItem>
     <IconItem name="home">
-      <ExampleIcon icon="home" />
+      <HomeIcon />
     </IconItem>
     <IconItem name="facehappy">
-      <ExampleIcon icon="facehappy" />
+      <FaceHappyIcon />
     </IconItem>
     <IconItem name="bar">
       <img src="https://storybook.js.org/images/placeholders/50x50.png" alt="example" />
diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx
index c9bf13a526c9..ff2eae90a49b 100644
--- a/code/ui/blocks/src/controls/Color.tsx
+++ b/code/ui/blocks/src/controls/Color.tsx
@@ -4,10 +4,11 @@ import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 're
 import convert from 'color-convert';
 import throttle from 'lodash/throttle.js';
 import { styled } from '@storybook/theming';
-import { TooltipNote, WithTooltip, Form, Icons } from '@storybook/components';
+import { TooltipNote, WithTooltip, Form } from '@storybook/components';
 
 import type { ControlProps, ColorValue, ColorConfig, PresetColor } from './types';
 import { getControlId } from './helpers';
+import { MarkupIcon } from '@storybook/icons';
 
 const Wrapper = styled.div({
   position: 'relative',
@@ -74,7 +75,7 @@ const Input = styled(Form.Input)(({ theme }) => ({
   fontFamily: theme.typography.fonts.base,
 }));
 
-const ToggleIcon = styled(Icons)(({ theme }) => ({
+const ToggleIcon = styled(MarkupIcon)(({ theme }) => ({
   position: 'absolute',
   zIndex: 1,
   top: 6,
@@ -358,7 +359,7 @@ export const ColorControl: FC<ColorControlProps> = ({
         onFocus={(e: FocusEvent<HTMLInputElement>) => e.target.select()}
         placeholder="Choose color..."
       />
-      {value ? <ToggleIcon icon="markup" onClick={cycleColorSpace} /> : null}
+      {value ? <ToggleIcon onClick={cycleColorSpace} /> : null}
     </Wrapper>
   );
 };
diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx
index c6b94fc23951..d6c4d2328af0 100644
--- a/code/ui/blocks/src/controls/Object.tsx
+++ b/code/ui/blocks/src/controls/Object.tsx
@@ -3,8 +3,8 @@ import cloneDeep from 'lodash/cloneDeep.js';
 import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react';
 import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { styled, useTheme, type Theme } from '@storybook/theming';
-import { Form, Icons, IconButton, Button } from '@storybook/components';
-import { EyeCloseIcon, EyeIcon } from '@storybook/icons';
+import { Form, IconButton, Button } from '@storybook/components';
+import { AddIcon, EyeCloseIcon, EyeIcon, SubtractIcon } from '@storybook/icons';
 import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { getControlId, getControlSetterButtonId } from './helpers';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
@@ -133,7 +133,7 @@ const ButtonInline = styled.button<{ primary?: boolean }>(({ theme, primary }) =
   order: primary ? 'initial' : 9,
 }));
 
-const ActionIcon = styled(Icons)<{ disabled?: boolean }>(({ theme, icon, disabled }) => ({
+const ActionAddIcon = styled(AddIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({
   display: 'inline-block',
   verticalAlign: 'middle',
   width: 15,
@@ -142,11 +142,22 @@ const ActionIcon = styled(Icons)<{ disabled?: boolean }>(({ theme, icon, disable
   marginLeft: 5,
   cursor: disabled ? 'not-allowed' : 'pointer',
   color: theme.textMutedColor,
-  '&:hover': disabled
-    ? {}
-    : {
-        color: icon === 'subtract' ? theme.color.negative : theme.color.ancillary,
-      },
+  '&:hover': disabled ? {} : { color: theme.color.ancillary },
+  'svg + &': {
+    marginLeft: 0,
+  },
+}));
+
+const ActionSubstractIcon = styled(SubtractIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  width: 15,
+  height: 15,
+  padding: 3,
+  marginLeft: 5,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  color: theme.textMutedColor,
+  '&:hover': disabled ? {} : { color: theme.color.negative },
   'svg + &': {
     marginLeft: 0,
   },
@@ -309,8 +320,8 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
               Save
             </ButtonInline>
           }
-          plusMenuElement={<ActionIcon icon="add" />}
-          minusMenuElement={<ActionIcon icon="subtract" />}
+          plusMenuElement={<ActionAddIcon />}
+          minusMenuElement={<ActionSubstractIcon />}
           inputElement={(_: any, __: any, ___: any, key: string) =>
             key ? <Input onFocus={selectValue} onBlur={dispatchEnterKey} /> : <Input />
           }
diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx
index e2f9835a7c47..574c604b180b 100644
--- a/code/ui/blocks/src/controls/options/Select.tsx
+++ b/code/ui/blocks/src/controls/options/Select.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import type { CSSObject } from '@storybook/theming';
 import { logger } from '@storybook/client-logger';
-import { Icons } from '@storybook/components';
 
 import type { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types';
 
 import { selectedKey, selectedKeys, selectedValues } from './helpers';
 import { getControlId } from '../helpers';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const styleResets: CSSObject = {
   // resets
@@ -102,7 +102,7 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
 
   return (
     <SelectWrapper>
-      <Icons icon="arrowdown" />
+      <ChevronSmallDownIcon />
       <OptionsSelect id={controlId} value={selection} onChange={handleChange}>
         <option key="no-selection" disabled>
           {NO_SELECTION}
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 9c1df8f39fa5..e707c4fdbe98 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -63,7 +63,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/csf": "^0.1.2",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "memoizerific": "^1.11.3",
diff --git a/code/ui/components/src/components/Loader/Loader.tsx b/code/ui/components/src/components/Loader/Loader.tsx
index c4fc4eb68e86..36bce83ad645 100644
--- a/code/ui/components/src/components/Loader/Loader.tsx
+++ b/code/ui/components/src/components/Loader/Loader.tsx
@@ -1,8 +1,8 @@
 import { transparentize } from 'polished';
 import React from 'react';
 import { styled, keyframes } from '@storybook/theming';
-import { Icons } from '../icon/icon';
 import { rotate360 } from '../shared/animation';
+import { LightningOffIcon } from '@storybook/icons';
 
 const LoaderWrapper = styled.div<{ size?: number }>(({ size = 32 }) => ({
   borderRadius: '50%',
@@ -63,7 +63,7 @@ const ProgressMessage = styled.div(({ theme }) => ({
   color: theme.barTextColor,
 }));
 
-const ErrorIcon = styled(Icons)(({ theme }) => ({
+const ErrorIcon = styled(LightningOffIcon)(({ theme }) => ({
   width: 20,
   height: 20,
   marginBottom: '0.5rem',
@@ -107,7 +107,7 @@ export const Loader = ({ progress, error, size, ...props }: LoaderProps) => {
   if (error) {
     return (
       <ProgressWrapper aria-label={error.toString()} aria-live="polite" role="status" {...props}>
-        <ErrorIcon icon="lightningoff" />
+        <ErrorIcon />
         <ProgressMessage>{error.message}</ProgressMessage>
       </ProgressWrapper>
     );
diff --git a/code/ui/components/src/components/icon/icon.stories.tsx b/code/ui/components/src/components/icon/icon.stories.tsx
index d3da4af90ed1..7954853498e6 100644
--- a/code/ui/components/src/components/icon/icon.stories.tsx
+++ b/code/ui/components/src/components/icon/icon.stories.tsx
@@ -90,3 +90,16 @@ export const NoLabels = (args: ComponentProps<typeof Icons>) => (
     </List>
   </>
 );
+
+export const NoDeprecateWarning = (args: ComponentProps<typeof Icons>) => (
+  <>
+    <Header>{Object.keys(icons).length} icons</Header>
+    <List>
+      {Object.keys(icons).map((key) => (
+        <Item minimal key={key}>
+          <Icons icon={key as IconType} aria-label={key} __suppressDeprecationWarning {...args} />
+        </Item>
+      ))}
+    </List>
+  </>
+);
diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx
index b0164ef2a276..0976442b1179 100644
--- a/code/ui/components/src/components/icon/icon.tsx
+++ b/code/ui/components/src/components/icon/icon.tsx
@@ -24,18 +24,27 @@ export interface IconsProps extends ComponentProps<typeof Svg> {
   icon: IconType;
   useSymbol?: boolean;
   onClick?: () => void;
+  __suppressDeprecationWarning?: boolean;
 }
 
 /**
  * @deprecated No longer used, will be removed in Storybook 9.0
  * Please use the `@storybook/icons` package instead.
  * */
-export const Icons = ({ icon, useSymbol, ...props }: IconsProps) => {
-  deprecate(
-    `Use of the deprecated Icons ${
-      `(${icon})` || ''
-    } component detected. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated`
-  );
+export const Icons = ({
+  icon,
+  useSymbol,
+  __suppressDeprecationWarning = false,
+  ...props
+}: IconsProps) => {
+  if (!__suppressDeprecationWarning) {
+    deprecate(
+      `Use of the deprecated Icons ${
+        `(${icon})` || ''
+      } component detected. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated`
+    );
+  }
+
   const findIcon: NewIconTypes = icons[icon] || null;
   if (!findIcon) {
     logger.warn(
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index c8cea8f2ff5c..ec73b110e46a 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -79,7 +79,7 @@
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/router": "workspace:*",
     "@storybook/test": "workspace:*",
diff --git a/code/ui/manager/src/components/sidebar/RefIndicator.tsx b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
index 14cc4089369b..f0c8b4259a52 100644
--- a/code/ui/manager/src/components/sidebar/RefIndicator.tsx
+++ b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
@@ -3,12 +3,20 @@ import type { FC, MouseEventHandler } from 'react';
 import React, { useMemo, useCallback, forwardRef } from 'react';
 
 import type { TooltipLinkListLink } from '@storybook/components';
-import { Icons, WithTooltip, Spaced, TooltipLinkList } from '@storybook/components';
-import { styled } from '@storybook/theming';
+import { WithTooltip, Spaced, TooltipLinkList } from '@storybook/components';
+import { styled, useTheme } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { useStorybookApi } from '@storybook/manager-api';
 
-import { ChevronDownIcon, GlobeIcon } from '@storybook/icons';
+import {
+  AlertIcon,
+  ChevronDownIcon,
+  DocumentIcon,
+  GlobeIcon,
+  LightningIcon,
+  LockIcon,
+  TimeIcon,
+} from '@storybook/icons';
 import type { RefType } from './types';
 
 import type { getStateType } from '../../utils/tree';
@@ -115,22 +123,6 @@ export const MessageWrapper = styled.div({
   overflow: 'hidden',
 });
 
-const BlueIcon = styled(Icons)(({ theme }) => ({
-  color: theme.color.secondary,
-}));
-
-const YellowIcon = styled(Icons)(({ theme }) => ({
-  color: theme.color.gold,
-}));
-
-const RedIcon = styled(Icons)(({ theme }) => ({
-  color: theme.color.negative,
-}));
-
-const GreenIcon = styled(Icons)(({ theme }) => ({
-  color: theme.color.green,
-}));
-
 const Version = styled.div(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
@@ -243,19 +235,24 @@ const ReadyMessage: FC<{
   url: string;
   componentCount: number;
   leafCount: number;
-}> = ({ url, componentCount, leafCount }) => (
-  <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
-    <BlueIcon icon="globe" />
-    <div>
-      <MessageTitle>View external Storybook</MessageTitle>
+}> = ({ url, componentCount, leafCount }) => {
+  const theme = useTheme();
+
+  return (
+    <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
+      <GlobeIcon color={theme.color.secondary} />
       <div>
-        Explore {componentCount} components and {leafCount} stories in a new browser tab.
+        <MessageTitle>View external Storybook</MessageTitle>
+        <div>
+          Explore {componentCount} components and {leafCount} stories in a new browser tab.
+        </div>
       </div>
-    </div>
-  </Message>
-);
+    </Message>
+  );
+};
 
 const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
+  const theme = useTheme();
   const open = useCallback<MouseEventHandler>((e) => {
     e.preventDefault();
     const childWindow = globalWindow.open(loginUrl, `storybook_auth_${id}`, 'resizable,scrollbars');
@@ -273,7 +270,7 @@ const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
 
   return (
     <Message onClick={open}>
-      <YellowIcon icon="lock" />
+      <LockIcon color={theme.color.gold} />
       <div>
         <MessageTitle>Log in required</MessageTitle>
         <div>You need to authenticate to view this Storybook's components.</div>
@@ -282,45 +279,64 @@ const LoginRequiredMessage: FC<RefType> = ({ loginUrl, id }) => {
   );
 };
 
-const ReadDocsMessage: FC = () => (
-  <Message href="https://storybook.js.org/docs/react/sharing/storybook-composition" target="_blank">
-    <GreenIcon icon="document" />
-    <div>
-      <MessageTitle>Read Composition docs</MessageTitle>
-      <div>Learn how to combine multiple Storybooks into one.</div>
-    </div>
-  </Message>
-);
+const ReadDocsMessage: FC = () => {
+  const theme = useTheme();
 
-const ErrorOccurredMessage: FC<{ url: string }> = ({ url }) => (
-  <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
-    <RedIcon icon="alert" />
-    <div>
-      <MessageTitle>Something went wrong</MessageTitle>
-      <div>This external Storybook didn't load. Debug it in a new tab now.</div>
-    </div>
-  </Message>
-);
+  return (
+    <Message
+      href="https://storybook.js.org/docs/react/sharing/storybook-composition"
+      target="_blank"
+    >
+      <DocumentIcon color={theme.color.green} />
+      <div>
+        <MessageTitle>Read Composition docs</MessageTitle>
+        <div>Learn how to combine multiple Storybooks into one.</div>
+      </div>
+    </Message>
+  );
+};
 
-const LoadingMessage: FC<{ url: string }> = ({ url }) => (
-  <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
-    <BlueIcon icon="time" />
-    <div>
-      <MessageTitle>Please wait</MessageTitle>
-      <div>This Storybook is loading.</div>
-    </div>
-  </Message>
-);
+const ErrorOccurredMessage: FC<{ url: string }> = ({ url }) => {
+  const theme = useTheme();
 
-const PerformanceDegradedMessage: FC = () => (
-  <Message
-    href="https://storybook.js.org/docs/react/sharing/storybook-composition#improve-your-storybook-composition"
-    target="_blank"
-  >
-    <YellowIcon icon="lightning" />
-    <div>
-      <MessageTitle>Reduce lag</MessageTitle>
-      <div>Learn how to speed up Composition performance.</div>
-    </div>
-  </Message>
-);
+  return (
+    <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
+      <AlertIcon color={theme.color.negative} />
+      <div>
+        <MessageTitle>Something went wrong</MessageTitle>
+        <div>This external Storybook didn't load. Debug it in a new tab now.</div>
+      </div>
+    </Message>
+  );
+};
+
+const LoadingMessage: FC<{ url: string }> = ({ url }) => {
+  const theme = useTheme();
+
+  return (
+    <Message href={url.replace(/\/?$/, '/index.html')} target="_blank">
+      <TimeIcon color={theme.color.secondary} />
+      <div>
+        <MessageTitle>Please wait</MessageTitle>
+        <div>This Storybook is loading.</div>
+      </div>
+    </Message>
+  );
+};
+
+const PerformanceDegradedMessage: FC = () => {
+  const theme = useTheme();
+
+  return (
+    <Message
+      href="https://storybook.js.org/docs/react/sharing/storybook-composition#improve-your-storybook-composition"
+      target="_blank"
+    >
+      <LightningIcon color={theme.color.gold} />
+      <div>
+        <MessageTitle>Reduce lag</MessageTitle>
+        <div>Learn how to speed up Composition performance.</div>
+      </div>
+    </Message>
+  );
+};
diff --git a/code/ui/manager/src/settings/shortcuts.tsx b/code/ui/manager/src/settings/shortcuts.tsx
index dc02ff9166b0..3af815c72cc1 100644
--- a/code/ui/manager/src/settings/shortcuts.tsx
+++ b/code/ui/manager/src/settings/shortcuts.tsx
@@ -7,8 +7,9 @@ import {
   shortcutToHumanString,
   shortcutMatchesShortcut,
 } from '@storybook/manager-api';
-import { Button, Form, Icons } from '@storybook/components';
+import { Button, Form } from '@storybook/components';
 import SettingsFooter from './SettingsFooter';
+import { CheckIcon } from '@storybook/icons';
 
 const Header = styled.header(({ theme }) => ({
   marginBottom: 20,
@@ -80,7 +81,7 @@ export const Fade = keyframes`
   50% { opacity: 1; }
 `;
 
-export const SuccessIcon = styled(Icons)<{ valid: string }>(
+const SuccessIcon = styled(CheckIcon)<{ valid: string }>(
   ({ valid, theme }) =>
     valid === 'valid'
       ? {
@@ -283,7 +284,7 @@ class ShortcutsScreen extends Component<ShortcutsScreenProps, ShortcutsScreenSta
           readOnly
         />
 
-        <SuccessIcon valid={this.displaySuccessMessage(feature)} icon="check" />
+        <SuccessIcon valid={this.displaySuccessMessage(feature)} />
       </Row>
     ));
 
diff --git a/code/ui/manager/src/utils/status.tsx b/code/ui/manager/src/utils/status.tsx
index c5ab041663fd..db8d580820f4 100644
--- a/code/ui/manager/src/utils/status.tsx
+++ b/code/ui/manager/src/utils/status.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Icons } from '@storybook/components';
 import type { ReactElement } from 'react';
 import type { API_HashEntry, API_StatusState, API_StatusValue } from '@storybook/types';
 
 import { styled } from '@storybook/theming';
 
 import { getDescendantIds } from './tree';
+import { CircleIcon } from '@storybook/icons';
 
-const SmallIcons = styled(Icons)({
+const SmallIcons = styled(CircleIcon)({
   // specificity hack
   '&&&': {
     width: 6,
@@ -24,10 +24,10 @@ const LoadingIcons = styled(SmallIcons)(({ theme: { animation, color, base } })
 export const statusPriority: API_StatusValue[] = ['unknown', 'pending', 'success', 'warn', 'error'];
 export const statusMapping: Record<API_StatusValue, [ReactElement | null, string | null]> = {
   unknown: [null, null],
-  pending: [<LoadingIcons key="icon" icon="circle" />, 'currentColor'],
-  success: [<SmallIcons key="icon" icon="circle" style={{ color: 'green' }} />, 'currentColor'],
-  warn: [<SmallIcons key="icon" icon="circle" style={{ color: 'orange' }} />, '#A15C20'],
-  error: [<SmallIcons key="icon" icon="circle" style={{ color: 'red' }} />, 'brown'],
+  pending: [<LoadingIcons key="icon" />, 'currentColor'],
+  success: [<SmallIcons key="icon" style={{ color: 'green' }} />, 'currentColor'],
+  warn: [<SmallIcons key="icon" style={{ color: 'orange' }} />, '#A15C20'],
+  error: [<SmallIcons key="icon" style={{ color: 'red' }} />, 'brown'],
 };
 
 export const getHighestStatus = (statuses: API_StatusValue[]): API_StatusValue => {
diff --git a/code/yarn.lock b/code/yarn.lock
index 4b509e4df195..343ef7678941 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -4720,7 +4720,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/theming": "workspace:*"
@@ -4767,7 +4767,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/theming": "workspace:*"
@@ -4899,7 +4899,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/instrumenter": "workspace:*"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
@@ -4925,6 +4925,7 @@ __metadata:
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/theming": "workspace:*"
@@ -4980,7 +4981,7 @@ __metadata:
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/types": "workspace:*"
@@ -4999,7 +5000,7 @@ __metadata:
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/types": "workspace:*"
@@ -5039,7 +5040,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/theming": "workspace:*"
@@ -5072,7 +5073,7 @@ __metadata:
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/theming": "workspace:*"
@@ -5190,7 +5191,7 @@ __metadata:
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/docs-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/test": "workspace:*"
@@ -5453,7 +5454,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/test": "workspace:*"
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
@@ -5786,13 +5787,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/icons@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "@storybook/icons@npm:1.2.3"
+"@storybook/icons@npm:^1.2.5":
+  version: 1.2.5
+  resolution: "@storybook/icons@npm:1.2.5"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 510878cc80a844eb5b83460be8e71890743fb9fd70afb3cc46658d3324574d6389542a5dd078c5f613741193d0ac1ff7d2d83b33e447ee0fc1c3699d255ba225
+  checksum: 089622af6de4ab82624d894fbe43688a0eb72f15e6bb8fc19c54fb9f9d7312ce7caf34acebcbd63319dbaef129d8547bc23a5600955d04f6034355e7d82dcfa1
   languageName: node
   linkType: hard
 
@@ -5880,7 +5881,7 @@ __metadata:
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.3"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/router": "workspace:*"
     "@storybook/test": "workspace:*"
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index ff02eca31843..a8fc35a4042e 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -97,11 +97,13 @@ Going through the code blocks in sequence:
 // src/Tool.tsx
 
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-
-import { Icons, IconButton } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { LightningIcon } from '@storybook/icons';
 ```
 
-The [`useGlobals`](./addons-api.md#useglobals) and [`useStorybookApi`](./addons-api.md#usestorybookapi) hooks from the `manager-api` package are used to access the Storybook's APIs, allowing users to interact with the addon, such as enabling or disabling it. The `Icons` and `IconButtons` components from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package render the icons and buttons in the toolbar.
+The [`useGlobals`](./addons-api.md#useglobals) and [`useStorybookApi`](./addons-api.md#usestorybookapi) hooks from the `manager-api` package are used to access the Storybook's APIs, allowing users to interact with the addon, such as enabling or disabling it.
+
+The `IconButton` or `Button` component from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package can be used to render the buttons in the toolbar. The [`@storybook/icons`](https://github.com/storybookjs/icons) package provides a large set of appropriately sized and styled icons to choose from.
 
 ```ts
 // src/Tool.tsx
@@ -129,12 +131,7 @@ export const Tool = memo(function MyAddonSelector() {
   }, [toggleMyTool, api]);
 
   return (
-    <IconButton
-      key={TOOL_ID}
-      active={isActive}
-      title="Apply outlines to the preview"
-      onClick={toggleMyTool}
-    >
+    <IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}>
       <LightningIcon />
     </IconButton>
   );
diff --git a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
index c3b49d30c4fe..b0b63d2259cb 100644
--- a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
+++ b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
@@ -6,7 +6,8 @@ import React, { useCallback } from 'react';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
 import { useGlobals } from '@storybook/manager-api';
 
-import { IconButton, Icons } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { OutlineIcon } from '@storybook/icons';
 
 import { addons } from '@storybook/preview-api';
 
diff --git a/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx b/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx
index 47ed72db11bb..07eac2cfdc2e 100644
--- a/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx
+++ b/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx
@@ -4,7 +4,9 @@
 import React, { memo, useCallback, useEffect } from 'react';
 
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { Icons, IconButton } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { LightningIcon } from '@storybook/icons';
+
 import { ADDON_ID, PARAM_KEY, TOOL_ID } from './constants';
 
 export const Tool = memo(function MyAddonSelector() {
@@ -30,12 +32,7 @@ export const Tool = memo(function MyAddonSelector() {
   }, [toggleMyTool, api]);
 
   return (
-    <IconButton
-      key={TOOL_ID}
-      active={isActive}
-      title="Apply outlines to the preview"
-      onClick={toggleMyTool}
-    >
+    <IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}>
       <LightningIcon />
     </IconButton>
   );
diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
index bb0cf2bb4677..e431fcdc1a37 100644
--- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
@@ -4,8 +4,8 @@
 import React from 'react';
 
 import { addons, types } from '@storybook/manager-api';
-
-import { Icons, IconButton } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { OutlineIcon } from '@storybook/icons';
 
 addons.register('my-addon', () => {
   addons.add('my-addon/toolbar', {
diff --git a/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx b/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx
index 18824f3807f9..437ba9ffb80c 100644
--- a/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx
+++ b/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx
@@ -4,7 +4,9 @@
 import React, { memo, useCallback, useEffect } from 'react';
 
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { Icons, IconButton } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { LightningIcon } from '@storybook/icons';
+
 import { ADDON_ID, PARAM_KEY, TOOL_ID } from './constants';
 
 export const Tool = memo(function MyAddonSelector() {
diff --git a/docs/snippets/common/storybook-addons-api-getchannel.js.mdx b/docs/snippets/common/storybook-addons-api-getchannel.js.mdx
index 2f71041c707d..bea3162a395e 100644
--- a/docs/snippets/common/storybook-addons-api-getchannel.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-getchannel.js.mdx
@@ -4,12 +4,10 @@
 import React, { useCallback } from 'react';
 
 import { FORCE_RE_RENDER } from '@storybook/core-events';
-
 import { addons } from '@storybook/preview-api';
-
 import { useGlobals } from '@storybook/manager-api';
-
-import { IconButton, Icons } from '@storybook/components';
+import { IconButton } from '@storybook/components';
+import { OutlineIcon } from '@storybook/icons';
 
 const ExampleToolbar = () => {
   const [globals, updateGlobals] = useGlobals();
diff --git a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
index 2795207f64b8..f8bd14370873 100644
--- a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
@@ -4,8 +4,8 @@
 import React from 'react';
 
 import { useAddonState } from '@storybook/manager-api';
-
-import { AddonPanel, Button, IconButton } from '@storybook/components';
+import { AddonPanel, IconButton } from '@storybook/components';
+import { LightningIcon } from '@storybook/icons';
 
 export const Panel = () => {
   const [state, setState] = useAddonState('addon-unique-identifier', 'initial state');
diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
index 1550e7812008..72f25bf46061 100644
--- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
@@ -3,9 +3,9 @@
 
 import React, { useEffect, useCallback } from 'react';
 
-import { Icons, IconButton } from '@storybook/components';
-
 import { useStorybookApi } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+import { ChevronDownIcon } from '@storybook/icons';
 
 export const Panel = () => {
   const api = useStorybookApi();