Renaming

code/addons/a11y/src/components/A11YPanel.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { styled } from '@storybook/theming';
 
 import { ActionBar, ScrollArea } from '@storybook/components';
-import { Sync, Check } from '@storybook/icons';
+import { SyncIcon, CheckIcon } from '@storybook/icons';
 
 import type { AxeResults } from 'axe-core';
 import { useChannel, useParameter, useStorybookState } from '@storybook/manager-api';
@@ -22,7 +22,7 @@ export enum RuleType {
   INCOMPLETION,
 }
 
-const Icon = styled(Sync)({
+const Icon = styled(SyncIcon)({
   marginRight: 4,
 });
 
@@ -107,7 +107,7 @@ export const A11YPanel: React.FC = () => {
             'Rerun tests'
           ) : (
             <>
-              <Check /> Tests completed
+              <CheckIcon /> Tests completed
             </>
           ),
         onClick: handleManual,

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Global, styled } from '@storybook/theming';
 import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-import { Accessibility } from '@storybook/icons';
+import { AccessibilityIcon } from '@storybook/icons';
 import { Filters } from './ColorFilters';
 
 const iframeId = 'storybook-preview-iframe';
@@ -145,7 +145,7 @@ export const VisionSimulator = () => {
         onDoubleClick={() => setFilter(null)}
       >
         <IconButton key="filter" active={!!filter} title="Vision simulator">
-          <Accessibility />
+          <AccessibilityIcon />
         </IconButton>
       </WithTooltip>
       <Hidden>

code/addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -6,7 +6,7 @@ import { useParameter, useGlobals } from '@storybook/manager-api';
 import { logger } from '@storybook/client-logger';
 import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-import { Photo } from '@storybook/icons';
+import { PhotoIcon } from '@storybook/icons';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
 import type {
@@ -141,7 +141,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
           title="Change the background of the preview"
           active={selectedBackgroundColor !== 'transparent' || isTooltipVisible}
         >
-          <Photo />
+          <PhotoIcon />
         </IconButton>
       </WithTooltip>
     </Fragment>

code/addons/backgrounds/src/containers/GridSelector.tsx

@@ -4,7 +4,7 @@ import React, { memo } from 'react';
 import { useGlobals, useParameter } from '@storybook/manager-api';
 import { IconButton } from '@storybook/components';
 
-import { Grid } from '@storybook/icons';
+import { GridIcon } from '@storybook/icons';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
 export const GridSelector: FC = memo(function GridSelector() {
@@ -31,7 +31,7 @@ export const GridSelector: FC = memo(function GridSelector() {
         })
       }
     >
-      <Grid />
+      <GridIcon />
     </IconButton>
   );
 });

code/addons/interactions/src/components/Interaction.tsx

@@ -4,7 +4,7 @@ import { type Call, CallStates, type ControlStates } from '@storybook/instrument
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
 
-import { ListUnordered } from '@storybook/icons';
+import { ListUnorderedIcon } from '@storybook/icons';
 import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
@@ -175,7 +175,7 @@ export const Interaction = ({
               tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
             >
               <StyledIconButton containsIcon onClick={toggleCollapsed}>
-                <ListUnordered />
+                <ListUnorderedIcon />
               </StyledIconButton>
             </WithTooltip>
           )}

code/addons/interactions/src/components/Subnav.tsx

@@ -13,7 +13,13 @@ import type { Call, ControlStates } from '@storybook/instrumenter';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
-import { FastForward, PlayBack, PlayNext, Rewind, Sync } from '@storybook/icons';
+import {
+  FastForwardIcon,
+  PlayBackIcon,
+  PlayNextIcon,
+  RewindIcon,
+  SyncIcon,
+} from '@storybook/icons';
 import { StatusBadge } from './StatusBadge';
 
 import type { Controls } from './InteractionsPanel';
@@ -135,7 +141,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.start}
                 disabled={!controlStates.start}
               >
-                <Rewind />
+                <RewindIcon />
               </RewindButton>
             </WithTooltip>
 
@@ -146,7 +152,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.back}
                 disabled={!controlStates.back}
               >
-                <PlayBack />
+                <PlayBackIcon />
               </StyledIconButton>
             </WithTooltip>
 
@@ -157,7 +163,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.next}
                 disabled={!controlStates.next}
               >
-                <PlayNext />
+                <PlayNextIcon />
               </StyledIconButton>
             </WithTooltip>
 
@@ -168,13 +174,13 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.end}
                 disabled={!controlStates.end}
               >
-                <FastForward />
+                <FastForwardIcon />
               </StyledIconButton>
             </WithTooltip>
 
             <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}>
               <RerunButton aria-label="Rerun" containsIcon onClick={controls.rerun}>
-                <Sync />
+                <SyncIcon />
               </RerunButton>
             </WithTooltip>
           </Group>

code/addons/measure/src/Tool.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
 import { IconButton } from '@storybook/components';
-import { Ruler } from '@storybook/icons';
+import { RulerIcon } from '@storybook/icons';
 import { TOOL_ID, ADDON_ID } from './constants';
 
 export const Tool = () => {
@@ -34,7 +34,7 @@ export const Tool = () => {
       title="Enable measure"
       onClick={toggleMeasure}
     >
-      <Ruler />
+      <RulerIcon />
     </IconButton>
   );
 };

code/addons/outline/src/OutlineSelector.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect } from 'react';
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
 import { IconButton } from '@storybook/components';
-import { Outline } from '@storybook/icons';
+import { OutlineIcon } from '@storybook/icons';
 import { ADDON_ID, PARAM_KEY } from './constants';
 
 export const OutlineSelector = memo(function OutlineSelector() {
@@ -35,7 +35,7 @@ export const OutlineSelector = memo(function OutlineSelector() {
       title="Apply outlines to the preview"
       onClick={toggleOutline}
     >
-      <Outline />
+      <OutlineIcon />
     </IconButton>
   );
 });

code/addons/themes/src/theme-switcher.tsx

@@ -3,7 +3,7 @@ import { useAddonState, useChannel, useGlobals, useParameter } from '@storybook/
 import { styled } from '@storybook/theming';
 import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-import { PaintBrush } from '@storybook/icons';
+import { PaintBrushIcon } from '@storybook/icons';
 import type { ThemeAddonState, ThemeParameters } from './constants';
 import {
   PARAM_KEY,
@@ -75,7 +75,7 @@ export const ThemeSwitcher = () => {
         }}
       >
         <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
-          <PaintBrush />
+          <PaintBrushIcon />
           {label && <IconButtonLabel>{label}</IconButtonLabel>}
         </IconButton>
       </WithTooltip>

code/addons/viewport/src/Tool.tsx

@@ -7,7 +7,7 @@ import { styled, Global, type Theme, withTheme } from '@storybook/theming';
 import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api';
-import { Grow, Transfer } from '@storybook/icons';
+import { GrowIcon, TransferIcon } from '@storybook/icons';
 import { registerShortcuts } from './shortcuts';
 import { PARAM_KEY, ADDON_ID } from './constants';
 import { MINIMAL_VIEWPORTS } from './defaults';
@@ -187,7 +187,7 @@ export const ViewportTool: FC = memo(
               setState({ ...state, selected: responsiveViewport.id });
             }}
           >
-            <Grow />
+            <GrowIcon />
             {styles ? (
               <IconButtonLabel>
                 {isRotated ? `${item.title} (L)` : `${item.title} (P)`}
@@ -218,7 +218,7 @@ export const ViewportTool: FC = memo(
                 setState({ ...state, isRotated: !isRotated });
               }}
             >
-              <Transfer />
+              <TransferIcon />
             </IconButton>
             <ActiveViewportLabel title="Viewport height">
               {styles.height.replace('px', '')}

code/ui/blocks/src/blocks/mdx.tsx

@@ -4,7 +4,7 @@ import { NAVIGATE_URL } from '@storybook/core-events';
 import { Code, components, nameSpaceClassNames } from '@storybook/components';
 import { global } from '@storybook/global';
 import { styled } from '@storybook/theming';
-import { Link as LinkIcon } from '@storybook/icons';
+import { LinkIcon } from '@storybook/icons';
 import { Source } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';

code/ui/blocks/src/components/Toolbar.tsx

@@ -2,7 +2,7 @@ import type { FC, MouseEvent } from 'react';
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
 import { FlexBar, IconButton, IconButtonSkeleton } from '@storybook/components';
-import { Zoom as ZoomIcon, ZoomOut, ZoomReset } from '@storybook/icons';
+import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons';
 
 interface ZoomProps {
   zoom: (val: number) => void;
@@ -44,7 +44,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
       }}
       title="Zoom out"
     >
-      <ZoomOut />
+      <ZoomOutIcon />
     </IconButton>
     <IconButton
       key="zoomreset"
@@ -54,7 +54,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
       }}
       title="Reset zoom"
     >
-      <ZoomReset />
+      <ZoomResetIcon />
     </IconButton>
   </>
 );

code/ui/components/src/components/icon/icon.tsx

@@ -72,209 +72,209 @@ export const Symbols = memo<SymbolsProps>(function Symbols({ icons: keys = Objec
 });
 
 export const icons = {
-  user: 'User',
-  useralt: 'UserAlt',
-  useradd: 'UserAdd',
-  users: 'Users',
-  profile: 'Profile',
-  facehappy: 'FaceHappy',
-  faceneutral: 'FaceNeutral',
-  facesad: 'FaceSad',
-  accessibility: 'Accessibility',
-  accessibilityalt: 'AccessibilityAlt',
-  arrowup: 'ChevronUp',
-  arrowdown: 'ChevronDown',
-  arrowleft: 'ChevronLeft',
-  arrowright: 'ChevronRight',
-  arrowupalt: 'ArrowUp',
-  arrowdownalt: 'ArrowDown',
-  arrowleftalt: 'ArrowLeft',
-  arrowrightalt: 'ArrowRight',
-  expandalt: 'ExpandAlt',
-  collapse: 'Collapse',
-  expand: 'Expand',
-  unfold: 'Unfold',
-  transfer: 'Transfer',
-  redirect: 'Redirect',
-  undo: 'Undo',
-  reply: 'Reply',
-  sync: 'Sync',
-  upload: 'Upload',
-  download: 'Download',
-  back: 'Back',
-  proceed: 'Proceed',
-  refresh: 'Refresh',
-  globe: 'Globe',
-  compass: 'Compass',
-  location: 'Location',
-  pin: 'Pin',
-  time: 'Time',
-  dashboard: 'Dashboard',
-  timer: 'Timer',
-  home: 'Home',
-  admin: 'Admin',
-  info: 'Info',
-  question: 'Question',
-  support: 'Support',
-  alert: 'Alert',
-  email: 'Email',
-  phone: 'Phone',
-  link: 'Link',
-  unlink: 'LinkBroken',
-  bell: 'Bell',
-  rss: 'RSS',
-  sharealt: 'ShareAlt',
-  share: 'Share',
-  circle: 'Circle',
-  circlehollow: 'CircleHollow',
-  bookmarkhollow: 'BookmarkHollow',
-  bookmark: 'Bookmark',
-  hearthollow: 'HeartHollow',
-  heart: 'Heart',
-  starhollow: 'StarHollow',
-  star: 'Star',
-  certificate: 'Certificate',
-  verified: 'Verified',
-  thumbsup: 'ThumbsUp',
-  shield: 'Shield',
-  basket: 'Basket',
-  beaker: 'Beaker',
-  hourglass: 'Hourglass',
-  flag: 'Flag',
-  cloudhollow: 'CloudHollow',
-  edit: 'Edit',
-  cog: 'Cog',
-  nut: 'Nut',
-  wrench: 'Wrench',
-  ellipsis: 'Ellipsis',
-  check: 'Check',
-  form: 'Form',
-  batchdeny: 'BatchDeny',
-  batchaccept: 'BatchAccept',
-  controls: 'Controls',
-  plus: 'Plus',
-  closeAlt: 'CloseAlt',
-  cross: 'Cross',
-  trash: 'Trash',
-  pinalt: 'PinAlt',
-  unpin: 'Unpin',
-  add: 'Add',
-  subtract: 'Subtract',
-  close: 'Close',
-  delete: 'Delete',
-  passed: 'Passed',
-  changed: 'Changed',
-  failed: 'Failed',
-  clear: 'Clear',
-  comment: 'Comment',
-  commentadd: 'CommentAdd',
-  requestchange: 'RequestChange',
-  comments: 'Comments',
-  lock: 'Lock',
-  unlock: 'Unlock',
-  key: 'Key',
-  outbox: 'Outbox',
-  credit: 'Credit',
-  button: 'Button',
-  type: 'Type',
-  pointerdefault: 'PointerDefault',
-  pointerhand: 'PointerHand',
-  browser: 'Browser',
-  tablet: 'Tablet',
-  mobile: 'Mobile',
-  watch: 'Watch',
-  sidebar: 'Sidebar',
-  sidebaralt: 'SidebarAlt',
-  sidebaralttoggle: 'SidebarAltToggle',
-  sidebartoggle: 'SidebarToggle',
-  bottombar: 'BottomBar',
-  bottombartoggle: 'BottomBarToggle',
-  cpu: 'CPU',
-  database: 'Database',
-  memory: 'Memory',
-  structure: 'Structure',
-  box: 'Box',
-  power: 'Power',
-  photo: 'Photo',
-  component: 'Component',
-  grid: 'Grid',
-  outline: 'Outline',
-  photodrag: 'PhotoDrag',
-  search: 'Search',
-  zoom: 'Zoom',
-  zoomout: 'ZoomOut',
-  zoomreset: 'ZoomReset',
-  eye: 'Eye',
-  eyeclose: 'EyeClose',
-  lightning: 'Lightning',
-  lightningoff: 'LightningOff',
-  contrast: 'Contrast',
-  switchalt: 'SwitchAlt',
-  mirror: 'Mirror',
-  grow: 'Grow',
-  paintbrush: 'PaintBrush',
-  ruler: 'Ruler',
-  stop: 'Stop',
-  camera: 'Camera',
-  video: 'Video',
-  speaker: 'Speaker',
-  play: 'Play',
-  playback: 'PlayBack',
-  playnext: 'PlayNext',
-  rewind: 'Rewind',
-  fastforward: 'FastForward',
-  stopalt: 'StopAlt',
-  sidebyside: 'SideBySide',
-  stacked: 'Stacked',
-  sun: 'Sun',
-  moon: 'Moon',
-  book: 'Book',
-  document: 'Document',
-  copy: 'Copy',
-  category: 'Category',
-  folder: 'Folder',
-  print: 'Print',
-  graphline: 'GraphLine',
-  calendar: 'Calendar',
-  graphbar: 'GraphBar',
-  menu: 'Menu',
-  menualt: 'Menu',
-  filter: 'Filter',
-  docchart: 'DocChart',
-  doclist: 'DocList',
-  markup: 'Markup',
-  bold: 'Bold',
-  paperclip: 'PaperClip',
-  listordered: 'ListOrdered',
-  listunordered: 'ListUnordered',
-  paragraph: 'Paragraph',
-  markdown: 'Markdown',
-  repository: 'Repo',
-  commit: 'Commit',
-  branch: 'Branch',
-  pullrequest: 'PullRequest',
-  merge: 'Merge',
-  apple: 'Apple',
-  linux: 'Linux',
-  ubuntu: 'Ubuntu',
-  windows: 'Windows',
-  storybook: 'Storybook',
-  azuredevops: 'AzureDevOps',
-  bitbucket: 'Bitbucket',
-  chrome: 'Chrome',
-  chromatic: 'Chromatic',
-  componentdriven: 'ComponentDriven',
-  discord: 'Discord',
-  facebook: 'Facebook',
-  figma: 'Figma',
-  gdrive: 'GDrive',
-  github: 'Github',
-  gitlab: 'Gitlab',
-  google: 'Google',
-  graphql: 'Graphql',
-  medium: 'Medium',
-  redux: 'Redux',
-  twitter: 'Twitter',
-  youtube: 'Youtube',
-  vscode: 'VSCode',
+  user: 'UserIcon',
+  useralt: 'UserAltIcon',
+  useradd: 'UserAddIcon',
+  users: 'UsersIcon',
+  profile: 'ProfileIcon',
+  facehappy: 'FaceHappyIcon',
+  faceneutral: 'FaceNeutralIcon',
+  facesad: 'FaceSadIcon',
+  accessibility: 'AccessibilityIcon',
+  accessibilityalt: 'AccessibilityAltIcon',
+  arrowup: 'ChevronUpIcon',
+  arrowdown: 'ChevronDownIcon',
+  arrowleft: 'ChevronLeftIcon',
+  arrowright: 'ChevronRightIcon',
+  arrowupalt: 'ArrowUpIcon',
+  arrowdownalt: 'ArrowDownIcon',
+  arrowleftalt: 'ArrowLeftIcon',
+  arrowrightalt: 'ArrowRightIcon',
+  expandalt: 'ExpandAltIcon',
+  collapse: 'CollapseIcon',
+  expand: 'ExpandIcon',
+  unfold: 'UnfoldIcon',
+  transfer: 'TransferIcon',
+  redirect: 'RedirectIcon',
+  undo: 'UndoIcon',
+  reply: 'ReplyIcon',
+  sync: 'SyncIcon',
+  upload: 'UploadIcon',
+  download: 'DownloadIcon',
+  back: 'BackIcon',
+  proceed: 'ProceedIcon',
+  refresh: 'RefreshIcon',
+  globe: 'GlobeIcon',
+  compass: 'CompassIcon',
+  location: 'LocationIcon',
+  pin: 'PinIcon',
+  time: 'TimeIcon',
+  dashboard: 'DashboardIcon',
+  timer: 'TimerIcon',
+  home: 'HomeIcon',
+  admin: 'AdminIcon',
+  info: 'InfoIcon',
+  question: 'QuestionIcon',
+  support: 'SupportIcon',
+  alert: 'AlertIcon',
+  email: 'EmailIcon',
+  phone: 'PhoneIcon',
+  link: 'LinkIcon',
+  unlink: 'LinkBrokenIcon',
+  bell: 'BellIcon',
+  rss: 'RSSIcon',
+  sharealt: 'ShareAltIcon',
+  share: 'ShareIcon',
+  circle: 'CircleIcon',
+  circlehollow: 'CircleHollowIcon',
+  bookmarkhollow: 'BookmarkHollowIcon',
+  bookmark: 'BookmarkIcon',
+  hearthollow: 'HeartHollowIcon',
+  heart: 'HeartIcon',
+  starhollow: 'StarHollowIcon',
+  star: 'StarIcon',
+  certificate: 'CertificateIcon',
+  verified: 'VerifiedIcon',
+  thumbsup: 'ThumbsUpIcon',
+  shield: 'ShieldIcon',
+  basket: 'BasketIcon',
+  beaker: 'BeakerIcon',
+  hourglass: 'HourglassIcon',
+  flag: 'FlagIcon',
+  cloudhollow: 'CloudHollowIcon',
+  edit: 'EditIcon',
+  cog: 'CogIcon',
+  nut: 'NutIcon',
+  wrench: 'WrenchIcon',
+  ellipsis: 'EllipsisIcon',
+  check: 'CheckIcon',
+  form: 'FormIcon',
+  batchdeny: 'BatchDenyIcon',
+  batchaccept: 'BatchAcceptIcon',
+  controls: 'ControlsIcon',
+  plus: 'PlusIcon',
+  closeAlt: 'CloseAltIcon',
+  cross: 'CrossIcon',
+  trash: 'TrashIcon',
+  pinalt: 'PinAltIcon',
+  unpin: 'UnpinIcon',
+  add: 'AddIcon',
+  subtract: 'SubtractIcon',
+  close: 'CloseIcon',
+  delete: 'DeleteIcon',
+  passed: 'PassedIcon',
+  changed: 'ChangedIcon',
+  failed: 'FailedIcon',
+  clear: 'ClearIcon',
+  comment: 'CommentIcon',
+  commentadd: 'CommentAddIcon',
+  requestchange: 'RequestChangeIcon',
+  comments: 'CommentsIcon',
+  lock: 'LockIcon',
+  unlock: 'UnlockIcon',
+  key: 'KeyIcon',
+  outbox: 'OutboxIcon',
+  credit: 'CreditIcon',
+  button: 'ButtonIcon',
+  type: 'TypeIcon',
+  pointerdefault: 'PointerDefaultIcon',
+  pointerhand: 'PointerHandIcon',
+  browser: 'BrowserIcon',
+  tablet: 'TabletIcon',
+  mobile: 'MobileIcon',
+  watch: 'WatchIcon',
+  sidebar: 'SidebarIcon',
+  sidebaralt: 'SidebarAltIcon',
+  sidebaralttoggle: 'SidebarAltToggleIcon',
+  sidebartoggle: 'SidebarToggleIcon',
+  bottombar: 'BottomBarIcon',
+  bottombartoggle: 'BottomBarToggleIcon',
+  cpu: 'CPUIcon',
+  database: 'DatabaseIcon',
+  memory: 'MemoryIcon',
+  structure: 'StructureIcon',
+  box: 'BoxIcon',
+  power: 'PowerIcon',
+  photo: 'PhotoIcon',
+  component: 'ComponentIcon',
+  grid: 'GridIcon',
+  outline: 'OutlineIcon',
+  photodrag: 'PhotoDragIcon',
+  search: 'SearchIcon',
+  zoom: 'ZoomIcon',
+  zoomout: 'ZoomOutIcon',
+  zoomreset: 'ZoomResetIcon',
+  eye: 'EyeIcon',
+  eyeclose: 'EyeCloseIcon',
+  lightning: 'LightningIcon',
+  lightningoff: 'LightningOffIcon',
+  contrast: 'ContrastIcon',
+  switchalt: 'SwitchAltIcon',
+  mirror: 'MirrorIcon',
+  grow: 'GrowIcon',
+  paintbrush: 'PaintBrushIcon',
+  ruler: 'RulerIcon',
+  stop: 'StopIcon',
+  camera: 'CameraIcon',
+  video: 'VideoIcon',
+  speaker: 'SpeakerIcon',
+  play: 'PlayIcon',
+  playback: 'PlayBackIcon',
+  playnext: 'PlayNextIcon',
+  rewind: 'RewindIcon',
+  fastforward: 'FastForwardIcon',
+  stopalt: 'StopAltIcon',
+  sidebyside: 'SideBySideIcon',
+  stacked: 'StackedIcon',
+  sun: 'SunIcon',
+  moon: 'MoonIcon',
+  book: 'BookIcon',
+  document: 'DocumentIcon',
+  copy: 'CopyIcon',
+  category: 'CategoryIcon',
+  folder: 'FolderIcon',
+  print: 'PrintIcon',
+  graphline: 'GraphLineIcon',
+  calendar: 'CalendarIcon',
+  graphbar: 'GraphBarIcon',
+  menu: 'MenuIcon',
+  menualt: 'MenuIcon',
+  filter: 'FilterIcon',
+  docchart: 'DocChartIcon',
+  doclist: 'DocListIcon',
+  markup: 'MarkupIcon',
+  bold: 'BoldIcon',
+  paperclip: 'PaperClipIcon',
+  listordered: 'ListOrderedIcon',
+  listunordered: 'ListUnorderedIcon',
+  paragraph: 'ParagraphIcon',
+  markdown: 'MarkdownIcon',
+  repository: 'RepoIcon',
+  commit: 'CommitIcon',
+  branch: 'BranchIcon',
+  pullrequest: 'PullRequestIcon',
+  merge: 'MergeIcon',
+  apple: 'AppleIcon',
+  linux: 'LinuxIcon',
+  ubuntu: 'UbuntuIcon',
+  windows: 'WindowsIcon',
+  storybook: 'StorybookIcon',
+  azuredevops: 'AzureDevOpsIcon',
+  bitbucket: 'BitbucketIcon',
+  chrome: 'ChromeIcon',
+  chromatic: 'ChromaticIcon',
+  componentdriven: 'ComponentDrivenIcon',
+  discord: 'DiscordIcon',
+  facebook: 'FacebookIcon',
+  figma: 'FigmaIcon',
+  gdrive: 'GDriveIcon',
+  github: 'GithubIcon',
+  gitlab: 'GitlabIcon',
+  google: 'GoogleIcon',
+  graphql: 'GraphqlIcon',
+  medium: 'MediumIcon',
+  redux: 'ReduxIcon',
+  twitter: 'TwitterIcon',
+  youtube: 'YoutubeIcon',
+  vscode: 'VSCodeIcon',
 } as const;

code/ui/components/src/components/tooltip/ListItem.stories.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { Eye } from '@storybook/icons';
+import { EyeIcon } from '@storybook/icons';
 import ListItem from './ListItem';
 
 export default {
@@ -11,10 +11,10 @@ export const All = {
     <div>
       <ListItem loading />
       <ListItem title="Default" />
-      <ListItem title="Default icon" right={<Eye />} />
+      <ListItem title="Default icon" right={<EyeIcon />} />
       <ListItem title="title" center="center" right="right" />
       <ListItem active title="active" center="center" right="right" />
-      <ListItem active title="active icon" center="center" right={<Eye />} />
+      <ListItem active title="active icon" center="center" right={<EyeIcon />} />
       <ListItem disabled title="disabled" center="center" right="right" />
     </div>
   ),
@@ -35,21 +35,21 @@ export const Loading = {
 export const DefaultIcon = {
   args: {
     title: 'Default icon',
-    right: <Eye />,
+    right: <EyeIcon />,
   },
 };
 export const ActiveIcon = {
   args: {
     title: 'Active icon',
     active: true,
-    right: <Eye />,
+    right: <EyeIcon />,
   },
 };
 export const ActiveIconLeft = {
   args: {
     title: 'Active icon',
     active: true,
-    left: <Eye />,
+    left: <EyeIcon />,
   },
 };
 export const ActiveIconLeftColored = {

code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx

@@ -2,7 +2,7 @@ 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 { Linux } from '@storybook/icons';
+import { LinuxIcon } from '@storybook/icons';
 import { WithTooltip } from './WithTooltip';
 import { TooltipLinkList } from './TooltipLinkList';
 import ellipseUrl from './assets/ellipse.png';
@@ -186,7 +186,7 @@ export const WithCustomIcon = {
         id: '1',
         title: 'Link 1',
         active: true,
-        icon: <Linux />,
+        icon: <LinuxIcon />,
         right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
         center: 'This is an addition description',
         href: 'http://google.com',

code/yarn.lock

@@ -6686,16 +6686,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0":
-  version: 1.2.1--canary.21.f9be3b6.0
-  resolution: "@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 1a2d9bcf4d95baf08c4c4973652e3e5db4e9e2c4679925d3c5e7ebf5ee478dfba2f4ac50db271fc2796aa0f949f503890ccee4a038d3f8cbe69281d72b6f2e1f
-  languageName: node
-  linkType: hard
-
 "@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0":
   version: 1.2.1--canary.21.f9be3b6.0
   resolution: "@storybook/icons@npm:1.2.1--canary.21.f9be3b6.0"