From 8ca011a0fcdcf0bb61dd1dfd1134a1236d8909cd Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Wed, 15 Nov 2023 10:27:52 -0500
Subject: [PATCH] Update Storybook docs to use PhosphorIcon instead of Icon

---
 .changeset/flat-pianos-relate.md              |  2 +
 .../gallery/sections/cell-section.tsx         | 20 +++-
 .../accordion-section.stories.tsx             | 13 ++-
 .../compact-cell.argtypes.tsx                 | 22 +++--
 .../compact-cell.stories.tsx                  | 92 +++++++++++++------
 .../detail-cell.stories.tsx                   | 82 +++++++++++++----
 .../accessibility.stories.mdx                 |  6 +-
 __docs__/wonder-blocks-color/swatch.tsx       |  6 +-
 .../single-select.stories.tsx                 | 13 +--
 .../i18n-inline-markup.stories.tsx            |  7 +-
 .../accessibility.stories.mdx                 | 38 ++++----
 .../phosphor-icon.argtypes.ts                 | 12 +++
 .../popover-content-core.stories.tsx          | 22 ++---
 .../switch-best-practices.stories.tsx         |  7 +-
 .../wonder-blocks-switch/switch.argtypes.tsx  |  9 +-
 .../accessibility.stories.mdx                 | 52 ++++-------
 .../__tests__/compact-cell.test.tsx           | 13 ++-
 .../src/components/compact-cell.tsx           |  4 +-
 .../src/components/detail-cell.tsx            |  5 +-
 19 files changed, 261 insertions(+), 164 deletions(-)
 create mode 100644 .changeset/flat-pianos-relate.md

diff --git a/.changeset/flat-pianos-relate.md b/.changeset/flat-pianos-relate.md
new file mode 100644
index 000000000..a845151cc
--- /dev/null
+++ b/.changeset/flat-pianos-relate.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/__docs__/components/gallery/sections/cell-section.tsx b/__docs__/components/gallery/sections/cell-section.tsx
index 507c0d2f9..6fe626a84 100644
--- a/__docs__/components/gallery/sections/cell-section.tsx
+++ b/__docs__/components/gallery/sections/cell-section.tsx
@@ -3,14 +3,15 @@ import {StyleSheet} from "aphrodite";
 
 import {CompactCell, DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {tokens} from "@khanacademy/wonder-blocks-theming";
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
+import {IconMappings} from "../../../wonder-blocks-icon/phosphor-icon.argtypes";
 
 import ComponentTile from "../component-tile";
 import {styles} from "../styles";
 
-export default function BannerSection() {
+export default function CellSection() {
     return (
         <>
             <HeadingLarge id="cell" tag="h3" style={styles.sectionLabel}>
@@ -28,7 +29,10 @@ export default function BannerSection() {
                         <CompactCell
                             title="Intro to rational & irrational numbers"
                             rightAccessory={
-                                <Icon icon={icons.caretRight} size="small" />
+                                <PhosphorIcon
+                                    icon={IconMappings.caretRightBold}
+                                    size="small"
+                                />
                             }
                         />
                     </View>
@@ -48,10 +52,16 @@ export default function BannerSection() {
                             subtitle1={"Subtitle 1 for article item"}
                             subtitle2={"Subtitle 2 for article item"}
                             leftAccessory={
-                                <Icon icon={icons.contentVideo} size="medium" />
+                                <PhosphorIcon
+                                    icon={IconMappings.playCircle}
+                                    size="medium"
+                                />
                             }
                             rightAccessory={
-                                <Icon icon={icons.caretRight} size="small" />
+                                <PhosphorIcon
+                                    icon={IconMappings.caretRightBold}
+                                    size="small"
+                                />
                             }
                         />
                     </View>
diff --git a/__docs__/wonder-blocks-accordion/accordion-section.stories.tsx b/__docs__/wonder-blocks-accordion/accordion-section.stories.tsx
index c3fc53ff8..450ba6c54 100644
--- a/__docs__/wonder-blocks-accordion/accordion-section.stories.tsx
+++ b/__docs__/wonder-blocks-accordion/accordion-section.stories.tsx
@@ -6,7 +6,7 @@ import {AccordionSection} from "@khanacademy/wonder-blocks-accordion";
 import Button from "@khanacademy/wonder-blocks-button";
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {tokens} from "@khanacademy/wonder-blocks-theming";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
@@ -15,6 +15,7 @@ import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-accordion/package.json";
 
 import AccordionSectionArgtypes from "./accordion-section.argtypes";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 /**
  * An AccordionSection displays a section of content that can be shown or
@@ -206,7 +207,10 @@ export const ReactElementInHeader: StoryComponentType = {
                     <DetailCell
                         title="Header for article item"
                         leftAccessory={
-                            <Icon icon={icons.contentVideo} size="medium" />
+                            <PhosphorIcon
+                                icon={IconMappings.playCircle}
+                                size="medium"
+                            />
                         }
                         horizontalRule="none"
                     />
@@ -244,7 +248,10 @@ export const ReactElementInChildren: StoryComponentType = {
                 <DetailCell
                     title="Header for article item"
                     leftAccessory={
-                        <Icon icon={icons.contentVideo} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.playCircle}
+                            size="medium"
+                        />
                     }
                     horizontalRule="none"
                     style={{
diff --git a/__docs__/wonder-blocks-cell/compact-cell.argtypes.tsx b/__docs__/wonder-blocks-cell/compact-cell.argtypes.tsx
index 124ab6386..dd4ecfb07 100644
--- a/__docs__/wonder-blocks-cell/compact-cell.argtypes.tsx
+++ b/__docs__/wonder-blocks-cell/compact-cell.argtypes.tsx
@@ -1,28 +1,30 @@
 import * as React from "react";
 import type {InputType} from "@storybook/csf";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {LabelSmall, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
 
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+
 /**
  * Some pre-defined accessory examples to use in our stories.
  */
 export const AccessoryMappings = {
     withContentArticle: (
-        <Icon icon={icons.contentArticle} size="medium" />
-    ) as React.ReactElement<React.ComponentProps<typeof Icon>>,
+        <PhosphorIcon icon={IconMappings.article} size="medium" />
+    ) as React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>,
     withContentVideo: (
-        <Icon icon={icons.contentVideo} size="medium" />
-    ) as React.ReactElement<React.ComponentProps<typeof Icon>>,
+        <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+    ) as React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>,
     withCaret: (
-        <Icon icon={icons.caretRight} size="medium" />
-    ) as React.ReactElement<React.ComponentProps<typeof Icon>>,
+        <PhosphorIcon icon={IconMappings.caretRight} size="medium" />
+    ) as React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>,
     withText: (<LabelSmall>26.3 GB</LabelSmall>) as React.ReactElement<
         React.ComponentProps<typeof LabelSmall>
     >,
     withIconText: (
         <View style={{alignItems: "center"}}>
-            <Icon icon={icons.info} size="small" />
+            <PhosphorIcon icon={IconMappings.infoBold} size="small" />
             <LabelXSmall>Info</LabelXSmall>
         </View>
     ) as React.ReactElement<React.ComponentProps<typeof View>>,
@@ -51,7 +53,7 @@ export default {
         },
     },
     leftAccessory: {
-        description: `If provided, this adds a left accessory to the cell. Left Accessories can be defined using WB components such as Icon, IconButton, or it can even be used for a custom node/component if needed. What ever is passed in will occupy the "LeftAccessory” area of the Cell.`,
+        description: `If provided, this adds a left accessory to the cell. Left Accessories can be defined using WB components such as PhosphorIcon, IconButton, or it can even be used for a custom node/component if needed. What ever is passed in will occupy the "LeftAccessory” area of the Cell.`,
         control: {type: "select"},
         options: Object.keys(AccessoryMappings) as Array<React.ReactNode>,
         mapping: AccessoryMappings,
@@ -74,7 +76,7 @@ export default {
         },
     },
     rightAccessory: {
-        description: `If provided, this adds a right accessory to the cell. Right Accessories can be defined using WB components such as Icon, IconButton, or it can even be used for a custom node/component if needed. What ever is passed in will occupy the “RightAccessory” area of the Cell.`,
+        description: `If provided, this adds a right accessory to the cell. Right Accessories can be defined using WB components such as PhosphorIcon, IconButton, or it can even be used for a custom node/component if needed. What ever is passed in will occupy the “RightAccessory” area of the Cell.`,
         control: {type: "select"},
         options: Object.keys(AccessoryMappings) as Array<React.ReactNode>,
         mapping: AccessoryMappings,
diff --git a/__docs__/wonder-blocks-cell/compact-cell.stories.tsx b/__docs__/wonder-blocks-cell/compact-cell.stories.tsx
index 38e53e7fb..729cace34 100644
--- a/__docs__/wonder-blocks-cell/compact-cell.stories.tsx
+++ b/__docs__/wonder-blocks-cell/compact-cell.stories.tsx
@@ -6,14 +6,14 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
-import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
 import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 import {CompactCell} from "@khanacademy/wonder-blocks-cell";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import CompactCellArgTypes, {AccessoryMappings} from "./compact-cell.argtypes";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 type StoryComponentType = StoryObj<typeof CompactCell>;
 
@@ -56,7 +56,7 @@ export default {
 export const DefaultCompactCell: StoryComponentType = {
     args: {
         title: "Basic Cell",
-        rightAccessory: <Icon icon={icons.caretRight} />,
+        rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
     },
     parameters: {
         chromatic: {
@@ -72,14 +72,16 @@ export const DefaultCompactCell: StoryComponentType = {
 export const CompactCellLeft: StoryComponentType = () => (
     <CompactCell
         title="Intro to rational & irrational numbers"
-        leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
+        leftAccessory={
+            <PhosphorIcon icon={IconMappings.article} size="medium" />
+        }
     />
 );
 
 CompactCellLeft.parameters = {
     docs: {
         description: {
-            story: "You can create a minimal cell that only uses a title and an Icon that can be placed on the left or right (or both). In this case, we will place the icon on the left to show you how cell is flexible. Note that you can pass any of the existing WB components such as `Icon`, `IconButton`, `Tooltip`, etc.",
+            story: "You can create a minimal cell that only uses a title and an PhosphorIcon that can be placed on the left or right (or both). In this case, we will place the icon on the left to show you how cell is flexible. Note that you can pass any of the existing WB components such as `PhosphorIcon`, `IconButton`, `Tooltip`, etc.",
         },
     },
 };
@@ -91,7 +93,9 @@ export const CompactCellRight: StoryComponentType = {
     render: () => (
         <CompactCell
             title="Intro to rational & irrational numbers"
-            rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+            rightAccessory={
+                <PhosphorIcon icon={IconMappings.caretRight} size="medium" />
+            }
         />
     ),
 };
@@ -99,7 +103,7 @@ export const CompactCellRight: StoryComponentType = {
 CompactCellRight.parameters = {
     docs: {
         description: {
-            story: "You can also create a cell with an accessory placed on the right. Note that you can pass any of the existing WB components such as `Icon`.",
+            story: "You can also create a cell with an accessory placed on the right. Note that you can pass any of the existing WB components such as `PhosphorIcon`.",
         },
     },
 };
@@ -137,18 +141,20 @@ CompactCellWithDifferentHeights.parameters = {
 /**
  * A CompactCell example adding both accessories (left and right)
  */
-const calendarIcon: IconAsset = {
-    small: `M14.22 1.6H13.33V0H11.56V1.6H4.44V0H2.67V1.6H1.78C0.79 1.6 0.01 2.32 0.01 3.2L0 14.4C0 15.28 0.79 16 1.78 16H14.22C15.2 16 16 15.28 16 14.4V3.2C16 2.32 15.2 1.6 14.22 1.6ZM14.22 14.4H1.78V5.6H14.22V14.4ZM3.56 7.2H8V11.2H3.56V7.2Z`,
-};
-
 export const CompactCellBoth: StoryComponentType = {
     name: "CompactCell with both accessories",
     render: () => (
         <CompactCell
             title="Intro to rational & irrational numbers"
-            leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
+            leftAccessory={
+                <PhosphorIcon icon={IconMappings.article} size="medium" />
+            }
             rightAccessory={
-                <Icon icon={calendarIcon} size="medium" color={Color.blue} />
+                <PhosphorIcon
+                    icon={IconMappings.calendar}
+                    size="medium"
+                    color={Color.blue}
+                />
             }
         />
     ),
@@ -157,7 +163,7 @@ export const CompactCellBoth: StoryComponentType = {
 CompactCellBoth.parameters = {
     docs: {
         description: {
-            story: "You can also create a more complex cell with accessories placed on both sides. Note that you can extend the Icon component with custom paths such as the following example.",
+            story: "You can also create a more complex cell with accessories placed on both sides. Note that you can extend the PhosphorIcon component with custom paths such as the following example.",
         },
     },
 };
@@ -167,13 +173,17 @@ export const CompactCellAccessoryStyles: StoryComponentType = {
     render: () => (
         <CompactCell
             title="CompactCell with custom accessory styles"
-            leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
+            leftAccessory={
+                <PhosphorIcon icon={IconMappings.article} size="medium" />
+            }
             leftAccessoryStyle={{
                 minWidth: Spacing.xxLarge_48,
                 alignSelf: "flex-start",
                 alignItems: "flex-start",
             }}
-            rightAccessory={<Icon icon={icons.caretRight} size="small" />}
+            rightAccessory={
+                <PhosphorIcon icon={IconMappings.caretRightBold} size="small" />
+            }
             rightAccessoryStyle={{
                 minWidth: Spacing.large_24,
                 alignSelf: "flex-end",
@@ -201,21 +211,21 @@ export const CompactCellHorizontalRules: StoryComponentType = {
             <CompactCell
                 title="This is a basic cell with an 'inset' horizontal rule"
                 leftAccessory={
-                    <Icon icon={icons.contentArticle} size="medium" />
+                    <PhosphorIcon icon={IconMappings.article} size="medium" />
                 }
                 horizontalRule="inset"
             />
             <CompactCell
                 title="This is a basic cell with a 'full-width' horizontal rule"
                 leftAccessory={
-                    <Icon icon={icons.contentArticle} size="medium" />
+                    <PhosphorIcon icon={IconMappings.article} size="medium" />
                 }
                 horizontalRule="full-width"
             />
             <CompactCell
                 title="This is a basic cell without a horizontal rule"
                 leftAccessory={
-                    <Icon icon={icons.contentArticle} size="medium" />
+                    <PhosphorIcon icon={IconMappings.article} size="medium" />
                 }
                 horizontalRule="none"
             />
@@ -234,8 +244,12 @@ CompactCellHorizontalRules.parameters = {
 export const CompactCellWithCustomStyles: StoryComponentType = () => (
     <CompactCell
         title="CompactCell with a darkBlue background"
-        leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
-        rightAccessory={<Icon icon={calendarIcon} color={Color.white} />}
+        leftAccessory={
+            <PhosphorIcon icon={IconMappings.article} size="medium" />
+        }
+        rightAccessory={
+            <PhosphorIcon icon={IconMappings.calendar} color={Color.white} />
+        }
         style={{
             background: Color.darkBlue,
             color: Color.white,
@@ -260,7 +274,7 @@ CompactCellWithCustomStyles.parameters = {
 export const ClickableCompactCell: StoryComponentType = () => (
     <CompactCell
         title="Intro to rational & irrational numbers"
-        rightAccessory={<Icon icon={icons.caretRight} />}
+        rightAccessory={<PhosphorIcon icon={IconMappings.caretRight} />}
         onClick={() => {}}
         aria-label="Press to navigate to the article"
     />
@@ -283,9 +297,15 @@ export const CompactCellActive: StoryComponentType = () => (
     <CompactCell
         title="Title for article item"
         leftAccessory={
-            <Icon icon={icons.contentVideo} size="medium" color="black" />
+            <PhosphorIcon
+                icon={IconMappings.playCircle}
+                size="medium"
+                color="black"
+            />
+        }
+        rightAccessory={
+            <PhosphorIcon icon={IconMappings.calendarBold} size="small" />
         }
-        rightAccessory={<Icon icon={calendarIcon} size="small" />}
         active={true}
         onClick={() => {}}
     />
@@ -303,7 +323,9 @@ export const CompactCellDisabled: StoryComponentType = () => (
     <CompactCell
         title="Title for article item"
         leftAccessory={AccessoryMappings.withImage}
-        rightAccessory={<Icon icon={calendarIcon} size="small" />}
+        rightAccessory={
+            <PhosphorIcon icon={IconMappings.calendarBold} size="small" />
+        }
         disabled={true}
         onClick={() => {}}
     />
@@ -339,7 +361,10 @@ export const CompactCellsAsListItems: StoryComponentType = {
                 <CompactCell
                     title="Active Cell"
                     leftAccessory={
-                        <Icon icon={icons.contentArticle} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.article}
+                            size="medium"
+                        />
                     }
                     active={true}
                     href="https://khanacademy.org"
@@ -350,7 +375,10 @@ export const CompactCellsAsListItems: StoryComponentType = {
                 <CompactCell
                     title="Cell with default bg color"
                     leftAccessory={
-                        <Icon icon={icons.contentArticle} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.article}
+                            size="medium"
+                        />
                     }
                     href="https://khanacademy.org"
                     horizontalRule="full-width"
@@ -360,7 +388,10 @@ export const CompactCellsAsListItems: StoryComponentType = {
                 <CompactCell
                     title="Cell with a faded background color"
                     leftAccessory={
-                        <Icon icon={icons.contentArticle} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.article}
+                            size="medium"
+                        />
                     }
                     href="https://khanacademy.org"
                     horizontalRule="full-width"
@@ -371,7 +402,10 @@ export const CompactCellsAsListItems: StoryComponentType = {
                 <CompactCell
                     title="Cell with a solid background color"
                     leftAccessory={
-                        <Icon icon={icons.contentArticle} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.article}
+                            size="medium"
+                        />
                     }
                     onClick={() => {}}
                     style={{background: Color.pink}}
diff --git a/__docs__/wonder-blocks-cell/detail-cell.stories.tsx b/__docs__/wonder-blocks-cell/detail-cell.stories.tsx
index 714b91ab0..cfdf75ccd 100644
--- a/__docs__/wonder-blocks-cell/detail-cell.stories.tsx
+++ b/__docs__/wonder-blocks-cell/detail-cell.stories.tsx
@@ -6,13 +6,14 @@ import type {Meta, StoryObj} from "@storybook/react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import DetailCellArgTypes from "./detail-cell.argtypes";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 export default {
     title: "Cell / DetailCell",
@@ -58,8 +59,10 @@ export const DefaultDetailCell: StoryComponentType = {
         title: "Title for article item",
         subtitle1: "Subtitle 1 for article item",
         subtitle2: "Subtitle 2 for article item",
-        leftAccessory: <Icon icon={icons.contentVideo} size="medium" />,
-        rightAccessory: <Icon icon={icons.caretRight} />,
+        leftAccessory: (
+            <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+        ),
+        rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
     },
 };
 
@@ -71,8 +74,12 @@ export const DetailCellActive: StoryComponentType = () => (
         title="Title for article item"
         subtitle1="Subtitle for article item"
         subtitle2="Subtitle for article item"
-        leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
-        rightAccessory={<Icon icon={icons.caretRight} size="small" />}
+        leftAccessory={
+            <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+        }
+        rightAccessory={
+            <PhosphorIcon icon={IconMappings.caretRightBold} size="small" />
+        }
         active={true}
     />
 );
@@ -93,8 +100,12 @@ export const DetailCellDisabled: StoryComponentType = () => (
         title="Title for article item"
         subtitle1="Subtitle for article item"
         subtitle2="Subtitle for article item"
-        leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
-        rightAccessory={<Icon icon={icons.caretRight} size="small" />}
+        leftAccessory={
+            <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+        }
+        rightAccessory={
+            <PhosphorIcon icon={IconMappings.caretRightBold} size="small" />
+        }
         disabled={true}
     />
 );
@@ -115,11 +126,15 @@ export const DetailCellWithCustomStyles: StoryComponentType = () => (
         title="Title for article item"
         subtitle1="Subtitle for article item"
         subtitle2="Subtitle for article item"
-        leftAccessory={<Icon icon={icons.caretLeft} size="small" />}
+        leftAccessory={
+            <PhosphorIcon icon={IconMappings.caretLeftBold} size="small" />
+        }
         leftAccessoryStyle={{
             alignSelf: "flex-start",
         }}
-        rightAccessory={<Icon icon={icons.caretRight} size="small" />}
+        rightAccessory={
+            <PhosphorIcon icon={IconMappings.caretRightBold} size="small" />
+        }
         rightAccessoryStyle={{
             alignSelf: "flex-start",
         }}
@@ -142,8 +157,10 @@ export const ClickableDetailCell: StoryComponentType = () => (
         title="Title for article item"
         subtitle1="Subtitle for article item"
         subtitle2="Subtitle for article item"
-        leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
-        rightAccessory={<Icon icon={icons.caretRight} />}
+        leftAccessory={
+            <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+        }
+        rightAccessory={<PhosphorIcon icon={IconMappings.caretRight} />}
         onClick={() => {}}
         aria-label="Press to navigate to the article"
     />
@@ -171,9 +188,14 @@ export const DetailCellNavigation: StoryComponentType = {
                     title="Data"
                     subtitle2="Subtitle for article item"
                     leftAccessory={
-                        <Icon icon={icons.contentVideo} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.playCircle}
+                            size="medium"
+                        />
+                    }
+                    rightAccessory={
+                        <PhosphorIcon icon={IconMappings.caretRight} />
                     }
-                    rightAccessory={<Icon icon={icons.caretRight} />}
                     href="/math/algebra"
                     aria-label="Press to navigate to the article"
                 />
@@ -181,9 +203,14 @@ export const DetailCellNavigation: StoryComponentType = {
                     title="Geometry"
                     subtitle2="Subtitle for article item"
                     leftAccessory={
-                        <Icon icon={icons.contentVideo} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.playCircle}
+                            size="medium"
+                        />
+                    }
+                    rightAccessory={
+                        <PhosphorIcon icon={IconMappings.caretRight} />
                     }
-                    rightAccessory={<Icon icon={icons.caretRight} />}
                     href="/math/geometry"
                     aria-label="Press to navigate to the article"
                     horizontalRule="none"
@@ -240,7 +267,10 @@ export const DetailCellsAsListItems: StoryComponentType = {
                 <DetailCell
                     title="Active Cell"
                     rightAccessory={
-                        <Icon icon={icons.caretRight} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.caretRight}
+                            size="medium"
+                        />
                     }
                     active={true}
                     href="https://khanacademy.org"
@@ -251,7 +281,10 @@ export const DetailCellsAsListItems: StoryComponentType = {
                 <DetailCell
                     title="Cell with default bg color"
                     rightAccessory={
-                        <Icon icon={icons.caretRight} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.caretRight}
+                            size="medium"
+                        />
                     }
                     href="https://khanacademy.org"
                     horizontalRule="full-width"
@@ -261,7 +294,10 @@ export const DetailCellsAsListItems: StoryComponentType = {
                 <DetailCell
                     title="Disabled Cell"
                     rightAccessory={
-                        <Icon icon={icons.caretRight} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.caretRight}
+                            size="medium"
+                        />
                     }
                     disabled={true}
                     href="https://khanacademy.org"
@@ -272,7 +308,10 @@ export const DetailCellsAsListItems: StoryComponentType = {
                 <DetailCell
                     title="Cell with a faded background color"
                     rightAccessory={
-                        <Icon icon={icons.caretRight} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.caretRight}
+                            size="medium"
+                        />
                     }
                     href="https://khanacademy.org"
                     horizontalRule="full-width"
@@ -283,7 +322,10 @@ export const DetailCellsAsListItems: StoryComponentType = {
                 <DetailCell
                     title="Cell with a solid background color"
                     rightAccessory={
-                        <Icon icon={icons.caretRight} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.caretRight}
+                            size="medium"
+                        />
                     }
                     onClick={() => {}}
                     style={{background: Color.pink}}
diff --git a/__docs__/wonder-blocks-clickable/accessibility.stories.mdx b/__docs__/wonder-blocks-clickable/accessibility.stories.mdx
index ee6a3f2f0..c5854d566 100644
--- a/__docs__/wonder-blocks-clickable/accessibility.stories.mdx
+++ b/__docs__/wonder-blocks-clickable/accessibility.stories.mdx
@@ -4,10 +4,12 @@ import {StyleSheet} from "aphrodite";
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {Body} from "@khanacademy/wonder-blocks-typography";
 
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+
 <Meta
     title="Clickable / Clickable / Accessibility"
     component={Clickable}
@@ -66,7 +68,7 @@ This is an example of a component with an accessible label:
                 onClick={() => {}}
                 aria-label="More information about this subject"
             >
-                {({hovered, focused, pressed}) => <Icon icon={icons.info} />}
+                {({hovered, focused, pressed}) => <PhosphorIcon icon={IconMappings.info} />}
             </Clickable>
         </View>
     </Story>
diff --git a/__docs__/wonder-blocks-color/swatch.tsx b/__docs__/wonder-blocks-color/swatch.tsx
index 7a256375a..2860138c3 100644
--- a/__docs__/wonder-blocks-color/swatch.tsx
+++ b/__docs__/wonder-blocks-color/swatch.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {
     Caption,
@@ -10,8 +10,8 @@ import {
     LabelSmall,
     LabelXSmall,
 } from "@khanacademy/wonder-blocks-typography";
-
 import Color from "@khanacademy/wonder-blocks-color";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 type Segments = 1 | 2 | 3;
 
@@ -21,7 +21,7 @@ const UseType = {
         label: "Text & Icons",
     },
     icons: {
-        content: <Icon icon={icons.hint} />,
+        content: <PhosphorIcon icon={IconMappings.lightbulbBold} />,
         label: "Icons",
     },
 } as const;
diff --git a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
index ef1badec3..1eb572669 100644
--- a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
+++ b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
@@ -6,7 +6,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {TextField} from "@khanacademy/wonder-blocks-form";
-import Icon from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -15,8 +15,6 @@ import {
     HeadingLarge,
     LabelMedium,
 } from "@khanacademy/wonder-blocks-typography";
-
-import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 import {
     SingleSelect,
     OptionItem,
@@ -28,6 +26,7 @@ import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import singleSelectArgtypes from "./base-select.argtypes";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 import {defaultLabels} from "../../packages/wonder-blocks-dropdown/src/util/constants";
 
 type StoryComponentType = StoryObj<typeof SingleSelect>;
@@ -741,10 +740,6 @@ const timeSlotOptions = timeSlots.map((timeSlot) => (
     <OptionItem label={timeSlot} value={timeSlot} />
 ));
 
-const clockIcon: IconAsset = {
-    small: `M0 8C0 3.58 3.58 0 7.99 0C12.42 0 16 3.58 16 8C16 12.42 12.42 16 7.99 16C3.58 16 0 12.42 0 8ZM1.6 8C1.6 11.54 4.46 14.4 8 14.4C11.54 14.4 14.4 11.54 14.4 8C14.4 4.46 11.54 1.6 8 1.6C4.46 1.6 1.6 4.46 1.6 8ZM7.2 4H8.4V8.2L12 10.34L11.4 11.32L7.2 8.8V4Z`,
-};
-
 export const AutoFocusDisabled: StoryComponentType = () => {
     const textFieldRef = React.useRef(null);
     const [value, setValue] = React.useState<any>(null);
@@ -771,9 +766,9 @@ export const AutoFocusDisabled: StoryComponentType = () => {
                             autoComplete="off"
                             style={styles.fullBleed}
                         />
-                        <Icon
+                        <PhosphorIcon
                             color={Color.blue}
-                            icon={clockIcon}
+                            icon={IconMappings.clockBold}
                             size="small"
                             style={styles.icon}
                         />
diff --git a/__docs__/wonder-blocks-i18n/i18n-inline-markup.stories.tsx b/__docs__/wonder-blocks-i18n/i18n-inline-markup.stories.tsx
index 9acaf9417..86b4f32d6 100644
--- a/__docs__/wonder-blocks-i18n/i18n-inline-markup.stories.tsx
+++ b/__docs__/wonder-blocks-i18n/i18n-inline-markup.stories.tsx
@@ -2,13 +2,14 @@ import * as React from "react";
 
 import type {Meta, StoryObj} from "@storybook/react";
 import Color from "@khanacademy/wonder-blocks-color";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Tooltip, {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 
 import {I18nInlineMarkup} from "../../packages/wonder-blocks-i18n/src/components/i18n-inline-markup";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 export default {
     title: "Translations/I18nInlineMarkup",
@@ -110,9 +111,9 @@ export const HandlingTranslationErrors: StoryComponentType = {
                             </TooltipContent>
                         }
                     >
-                        <Icon
+                        <PhosphorIcon
                             size="small"
-                            icon={icons.incorrect}
+                            icon={IconMappings.xCircleBold}
                             color={Color.red}
                         />
                     </Tooltip>
diff --git a/__docs__/wonder-blocks-icon/accessibility.stories.mdx b/__docs__/wonder-blocks-icon/accessibility.stories.mdx
index bd856303e..870fae59c 100644
--- a/__docs__/wonder-blocks-icon/accessibility.stories.mdx
+++ b/__docs__/wonder-blocks-icon/accessibility.stories.mdx
@@ -2,13 +2,15 @@ import {Meta, Story, Canvas} from "@storybook/blocks";
 
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
+import {IconMappings} from "./phosphor-icon.argtypes";
+
 <Meta
     title="Icon / Accessibility"
-    component={Icon}
+    component={PhosphorIcon}
     parameters={{
         previewTabs: {
             canvas: {hidden: true},
@@ -50,20 +52,16 @@ More information about all these points can be found in the
 <Canvas>
     <Story name="Icon contrast">
         <View style={{flexDirection: "row", marginBottom: Spacing.xSmall_8}}>
-            <LabelMedium style={{display: "inline"}}>
-                High contrast icon (GOOD):
-            </LabelMedium>
-            <Icon
-                icon={icons.correct}
+            <LabelMedium>High contrast icon (GOOD):</LabelMedium>
+            <PhosphorIcon
+                icon={IconMappings.checkCircle}
                 style={{color: Color.blue, marginInlineStart: Spacing.xSmall_8}}
             />
         </View>
         <View style={{flexDirection: "row"}}>
-            <LabelMedium style={{display: "inline"}}>
-                Low contrast icon (BAD):
-            </LabelMedium>
-            <Icon
-                icon={icons.incorrect}
+            <LabelMedium>Low contrast icon (BAD):</LabelMedium>
+            <PhosphorIcon
+                icon={IconMappings.xCircle}
                 style={{
                     color: Color.lightBlue,
                     marginInlineStart: Spacing.xSmall_8,
@@ -78,19 +76,15 @@ More information about all these points can be found in the
 <Canvas>
     <Story name="Right to left icons">
         <View style={{flexDirection: "row", direction: "ltr"}}>
-            <Icon icon={icons.caretRight} />
-            <LabelMedium
-                style={{display: "inline", marginInlineStart: Spacing.xSmall_8}}
-            >
-                Left to right
+            <PhosphorIcon icon={IconMappings.caretRight} />
+            <LabelMedium style={{marginInlineStart: Spacing.xSmall_8}}>
+                {"Left to right"}
             </LabelMedium>
         </View>
         <View style={{flexDirection: "row", direction: "rtl"}}>
-            <Icon icon={icons.caretLeft} />
-            <LabelMedium
-                style={{display: "inline", marginInlineStart: Spacing.xSmall_8}}
-            >
-                دائیں سے بائیں
+            <PhosphorIcon icon={IconMappings.caretLeft} />
+            <LabelMedium style={{marginInlineStart: Spacing.xSmall_8}}>
+                {"دائیں سے بائیں"}
             </LabelMedium>
         </View>
     </Story>
diff --git a/__docs__/wonder-blocks-icon/phosphor-icon.argtypes.ts b/__docs__/wonder-blocks-icon/phosphor-icon.argtypes.ts
index 959127fdb..2f801c700 100644
--- a/__docs__/wonder-blocks-icon/phosphor-icon.argtypes.ts
+++ b/__docs__/wonder-blocks-icon/phosphor-icon.argtypes.ts
@@ -2,6 +2,10 @@ import type {InputType} from "@storybook/csf";
 
 import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
 import plusCircleBold from "@phosphor-icons/core/bold/plus-circle-bold.svg";
+import calendar from "@phosphor-icons/core/regular/calendar.svg";
+import calendarBold from "@phosphor-icons/core/bold/calendar-bold.svg";
+import clock from "@phosphor-icons/core/regular/clock.svg";
+import clockBold from "@phosphor-icons/core/bold/clock-bold.svg";
 import xCircle from "@phosphor-icons/core/regular/x-circle.svg";
 import xCircleBold from "@phosphor-icons/core/bold/x-circle-bold.svg";
 import x from "@phosphor-icons/core/regular/x.svg";
@@ -40,6 +44,8 @@ import pencilSimple from "@phosphor-icons/core/regular/pencil-simple.svg";
 import pencilSimpleBold from "@phosphor-icons/core/bold/pencil-simple-bold.svg";
 import play from "@phosphor-icons/core/regular/play.svg";
 import playBold from "@phosphor-icons/core/bold/play-bold.svg";
+import playCircle from "@phosphor-icons/core/regular/play-circle.svg";
+import playCircleBold from "@phosphor-icons/core/bold/play-circle-bold.svg";
 
 import {tokens} from "@khanacademy/wonder-blocks-theming";
 
@@ -49,6 +55,10 @@ import {tokens} from "@khanacademy/wonder-blocks-theming";
 export const IconMappings = {
     plusCircle,
     plusCircleBold,
+    calendar,
+    calendarBold,
+    clock,
+    clockBold,
     caretDown,
     caretDownBold,
     caretUp,
@@ -87,6 +97,8 @@ export const IconMappings = {
     pencilSimpleBold,
     play,
     playBold,
+    playCircle,
+    playCircleBold,
 } as const;
 
 export default {
diff --git a/__docs__/wonder-blocks-popover/popover-content-core.stories.tsx b/__docs__/wonder-blocks-popover/popover-content-core.stories.tsx
index 565beea95..9383d2934 100644
--- a/__docs__/wonder-blocks-popover/popover-content-core.stories.tsx
+++ b/__docs__/wonder-blocks-popover/popover-content-core.stories.tsx
@@ -5,7 +5,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 import Color from "@khanacademy/wonder-blocks-color";
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {
     Body,
@@ -15,8 +15,8 @@ import {
 
 import {PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import packageConfig from "../../packages/wonder-blocks-popover/package.json";
-
 import ComponentInfo from "../../.storybook/components/component-info";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 // NOTE: We are reusing an existing Cell SB Story to test how Popovers can be
 // composed by Cells.
@@ -92,7 +92,7 @@ export const WithIcon: StoryComponentType = {
     args: {
         children: (
             <>
-                <Icon size="large" icon={icons.contentArticle} />
+                <PhosphorIcon size="large" icon={IconMappings.article} />
                 <View>
                     <LabelLarge>This is an article</LabelLarge>
                     <Body>With the content</Body>
@@ -129,10 +129,6 @@ WithDetailCell.parameters = {
 /**
  * Dark custom popover
  */
-const customIcon = {
-    small: "M6.92820 0L13.85640 4L13.85640 12L6.92820 16L0 12L0 4Z",
-} as const;
-
 const CustomPopoverContent = (
     <>
         <HeadingSmall>Custom popover title</HeadingSmall>
@@ -140,8 +136,8 @@ const CustomPopoverContent = (
             <Clickable style={styles.action} onClick={close} id="btn-1">
                 {() => (
                     <>
-                        <Icon
-                            icon={customIcon}
+                        <PhosphorIcon
+                            icon={IconMappings.pencilSimple}
                             color={Color.gold}
                             size="large"
                         />
@@ -152,8 +148,8 @@ const CustomPopoverContent = (
             <Clickable style={styles.action} onClick={close} id="btn-2">
                 {() => (
                     <>
-                        <Icon
-                            icon={customIcon}
+                        <PhosphorIcon
+                            icon={IconMappings.pencilSimple}
                             color={Color.green}
                             size="large"
                         />
@@ -164,8 +160,8 @@ const CustomPopoverContent = (
             <Clickable style={styles.action} onClick={close} id="btn-3">
                 {() => (
                     <>
-                        <Icon
-                            icon={customIcon}
+                        <PhosphorIcon
+                            icon={IconMappings.pencilSimple}
                             color={Color.blue}
                             size="large"
                         />
diff --git a/__docs__/wonder-blocks-switch/switch-best-practices.stories.tsx b/__docs__/wonder-blocks-switch/switch-best-practices.stories.tsx
index a38c590ff..53942e03d 100644
--- a/__docs__/wonder-blocks-switch/switch-best-practices.stories.tsx
+++ b/__docs__/wonder-blocks-switch/switch-best-practices.stories.tsx
@@ -8,12 +8,13 @@ import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import {View} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
 import packageConfig from "../../packages/wonder-blocks-switch/package.json";
 import ComponentInfo from "../../.storybook/components/component-info";
 
 import SwitchArgtypes from "./switch.argtypes";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 type StoryComponentType = StoryObj<typeof Switch>;
 
@@ -146,7 +147,7 @@ export const WithTooltip: StoryComponentType = (() => {
                 <Switch
                     checked={checked}
                     onChange={setChecked}
-                    icon={<Icon icon={icons.hint} />}
+                    icon={<PhosphorIcon icon={IconMappings.lightbulbBold} />}
                 />
             </Tooltip>
         </View>
@@ -202,7 +203,7 @@ export const InsideDetailCell: StoryComponentType = (() => {
                     the switch. Click me all you want and nothing will change.
                 </LabelSmall>
             }
-            leftAccessory={<Icon icon={icons.info} />}
+            leftAccessory={<PhosphorIcon icon={IconMappings.infoBold} />}
             rightAccessory={
                 <Switch
                     id="switch-inside-detail-cell"
diff --git a/__docs__/wonder-blocks-switch/switch.argtypes.tsx b/__docs__/wonder-blocks-switch/switch.argtypes.tsx
index 29f54d91d..ebce14a13 100644
--- a/__docs__/wonder-blocks-switch/switch.argtypes.tsx
+++ b/__docs__/wonder-blocks-switch/switch.argtypes.tsx
@@ -1,11 +1,12 @@
 import * as React from "react";
 
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
-const iconsMap: Record<string, React.ReactElement<typeof Icon>> = {};
+const iconsMap: Record<string, React.ReactElement<typeof PhosphorIcon>> = {};
 
-Object.entries(icons).forEach(([iconLabel, iconValue]) => {
-    iconsMap[iconLabel] = <Icon icon={iconValue} />;
+Object.entries(IconMappings).forEach(([iconLabel, iconValue]) => {
+    iconsMap[iconLabel] = <PhosphorIcon icon={iconValue} />;
 });
 
 export default {
diff --git a/__docs__/wonder-blocks-typography/accessibility.stories.mdx b/__docs__/wonder-blocks-typography/accessibility.stories.mdx
index 975eacbd9..04f507ceb 100644
--- a/__docs__/wonder-blocks-typography/accessibility.stories.mdx
+++ b/__docs__/wonder-blocks-typography/accessibility.stories.mdx
@@ -3,10 +3,12 @@ import {StyleSheet} from "aphrodite";
 
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {Body} from "@khanacademy/wonder-blocks-typography";
 
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+
 <Meta
     title="Typography / Accessibility"
     parameters={{
@@ -54,19 +56,15 @@ More information about all these points and more can be found in the
     <Story name="Font size">
         <View>
             <View style={styles.explanation}>
-                <Icon icon={icons.incorrect} style={styles.incorrect} />
-                <Body>
-                    The following text is too small for body text (10px):
-                </Body>
+                <PhosphorIcon icon={IconMappings.xCircle} style={styles.incorrect} />
+                <Body>The following text is too small for body text (10px):</Body>
             </View>
-            <View style={{fontSize: "10px"}}>
-                <p>The quick brown fox jumps over the lazy dog.</p>
+            <View>
+                <p style={{fontSize: "10px"}}>The quick brown fox jumps over the lazy dog.</p>
             </View>
             <View style={styles.explanation}>
-                <Icon icon={icons.correct} style={styles.correct} />
-                <Body>
-                    The following text is adequate for body text (16px):
-                </Body>
+                <PhosphorIcon icon={IconMappings.checkCircle} style={styles.correct} />
+                <Body>The following text is adequate for body text (16px):</Body>
             </View>
             <Body>The quick brown fox jumps over the lazy dog</Body>
         </View>
@@ -79,23 +77,15 @@ More information about all these points and more can be found in the
     <Story name="Color contrast">
         <View>
             <View style={styles.explanation}>
-                <Icon icon={icons.incorrect} style={styles.incorrect} />
-                <Body>
-                    The color contrast for the following text is too low:
-                </Body>
+                <PhosphorIcon icon={IconMappings.xCircle} style={styles.incorrect} />
+                <Body>The color contrast for the following text is too low:</Body>
             </View>
-            <Body style={{color: Color.offBlack32}}>
-                The quick brown fox jumps over the lazy dog
-            </Body>
+            <Body style={{color: Color.offBlack32}}>The quick brown fox jumps over the lazy dog</Body>
             <View style={styles.explanation}>
-                <Icon icon={icons.correct} style={styles.correct} />
-                <Body>
-                    The color contrast for the following text is adequate:
-                </Body>
+                <PhosphorIcon icon={IconMappings.checkCircle} style={styles.correct} />
+                <Body>The color contrast for the following text is adequate:</Body>
             </View>
-            <Body style={{color: Color.offBlack}}>
-                The quick brown fox jumps over the lazy dog
-            </Body>
+            <Body style={{color: Color.offBlack}}>The quick brown fox jumps over the lazy dog</Body>
         </View>
     </Story>
 </Canvas>
@@ -106,23 +96,21 @@ More information about all these points and more can be found in the
     <Story name="Line spacing">
         <View>
             <View style={styles.explanation}>
-                <Icon icon={icons.incorrect} style={styles.incorrect} />
+                <PhosphorIcon icon={IconMappings.xCircle} style={styles.incorrect} />
                 <Body>The following line spacing is too small:</Body>
             </View>
-            <View style={{lineHeight: 1}}>
-                <p>
-                    Khan Academy offers practice exercises, instructional
+            <View>
+                <p style={{lineHeight: 1}}>Khan Academy offers practice exercises, instructional
                     videos, and a personalized learning dashboard that empower
                     learners to study at their own pace in and outside of the
                     classroom. We tackle math, science, computing, history, art
                     history, economics, and more, including K-14 and test
                     preparation (SAT, Praxis, LSAT) content. We focus on skill
                     mastery to help learners establish strong foundations, so
-                    there's no limit to what they can learn next!
-                </p>
+                    there's no limit to what they can learn next!</p>
             </View>
             <View style={styles.explanation}>
-                <Icon icon={icons.correct} style={styles.correct} />
+                <PhosphorIcon icon={IconMappings.checkCircle} style={styles.correct} />
                 <Body>The following line spacing is adequate:</Body>
             </View>
             <Body>
diff --git a/packages/wonder-blocks-cell/src/components/__tests__/compact-cell.test.tsx b/packages/wonder-blocks-cell/src/components/__tests__/compact-cell.test.tsx
index 11e11bd11..0798b109c 100644
--- a/packages/wonder-blocks-cell/src/components/__tests__/compact-cell.test.tsx
+++ b/packages/wonder-blocks-cell/src/components/__tests__/compact-cell.test.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
+import caretRightIcon from "@phosphor-icons/core/regular/caret-right.svg";
 
 import CompactCell from "../compact-cell";
 
@@ -39,7 +40,10 @@ describe("CompactCell", () => {
             <CompactCell
                 title="Compact cell"
                 leftAccessory={
-                    <Icon icon={icons.caretRight} aria-label="Caret icon" />
+                    <PhosphorIcon
+                        icon={caretRightIcon}
+                        aria-label="Caret icon"
+                    />
                 }
             />,
         );
@@ -56,7 +60,10 @@ describe("CompactCell", () => {
             <CompactCell
                 title="Compact cell"
                 rightAccessory={
-                    <Icon icon={icons.caretRight} aria-label="Caret icon" />
+                    <PhosphorIcon
+                        icon={caretRightIcon}
+                        aria-label="Caret icon"
+                    />
                 }
             />,
         );
diff --git a/packages/wonder-blocks-cell/src/components/compact-cell.tsx b/packages/wonder-blocks-cell/src/components/compact-cell.tsx
index 68876ca0e..fa4b26a49 100644
--- a/packages/wonder-blocks-cell/src/components/compact-cell.tsx
+++ b/packages/wonder-blocks-cell/src/components/compact-cell.tsx
@@ -17,10 +17,12 @@ import type {CellProps} from "../util/types";
  *
  * ```jsx
  * import {CompactCell} from "@khanacademy/wonder-blocks-cell";
+ * import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+ * import caretRightIcon from "@phosphor-icons/core/regular/caret-right.svg";
  *
  * <CompactCell
  *  title="Compact cell"
- *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+ *  rightAccessory={<PhosphorIcon icon={caretRightIcon} size="medium" />}
  * />
  * ```
  */
diff --git a/packages/wonder-blocks-cell/src/components/detail-cell.tsx b/packages/wonder-blocks-cell/src/components/detail-cell.tsx
index 9598b83fd..2de5b7490 100644
--- a/packages/wonder-blocks-cell/src/components/detail-cell.tsx
+++ b/packages/wonder-blocks-cell/src/components/detail-cell.tsx
@@ -63,13 +63,14 @@ type DetailCellProps = CellProps & {
  *
  * ```jsx
  * import {DetailCell} from "@khanacademy/wonder-blocks-cell";
+ * import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
  *
  * <DetailCell
- *  leftAccessory={<Icon icon={icons.contentVideo} size="medium" />}
+ *  leftAccessory={<PhosphorIcon icon={contentVideo} size="medium" />}
  *  subtitle1="Subtitle 1"
  *  title="Detail cell"
  *  subtitle1="Subtitle 2"
- *  rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+ *  rightAccessory={<PhosphorIcon icon={caretRight} size="medium" />}
  * />
  * ```
  */