Further docs updates

- Clarify prose
- Update all remaining usages of `Icons` component to `@storybook/icons`

docs/addons/writing-addons.md

@@ -97,12 +97,13 @@ Going through the code blocks in sequence:
 // src/Tool.tsx
 
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-
 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 `IconButton` component from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package render the buttons in the toolbar. Any icon from the [`@storybook/icons`](https://storybook.js.org/docs/react/api/icons) package can be used.
+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
@@ -130,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>
   );

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';
 

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() {
@@ -33,7 +35,7 @@ export const Tool = memo(function MyAddonSelector() {
     <IconButton
       key={TOOL_ID}
       active={isActive}
-      title="Apply outlines to the preview"
+      title="Enable my addon"
       onClick={toggleMyTool}
     >
       <LightningIcon />

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', {

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() {

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();

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');

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();