diff --git a/README.md b/README.md
index 7f54c1ff..b221d1fb 100644
--- a/README.md
+++ b/README.md
@@ -219,8 +219,8 @@ The preprocessor optimizes imports from the following packages:
 - import { Add16 } from "carbon-icons-svelte";
 - import { Airplane } from "carbon-pictograms-svelte";
 + import Button from "carbon-components-svelte/src/Button/Button.svelte";
-+ import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
-+ import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
++ import Add16 from "carbon-icons-svelte/lib/Add16.svelte";
++ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
 ```
 
 #### Usage
diff --git a/docs/package.json b/docs/package.json
index 5bdae259..7e3ecc42 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -12,7 +12,7 @@
     "@sveltech/routify": "^1.9.10",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.40",
     "carbon-components-svelte": "../",
-    "carbon-icons-svelte": "^10.45.1",
+    "carbon-icons-svelte": "^11.0.1",
     "clipboard-copy": "^4.0.1",
     "cross-env": "^7.0.3",
     "mdsvex": "^0.9.8",
diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index f8d7d4f4..e4f19608 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -6,7 +6,7 @@
 
   import copy from "clipboard-copy";
   import { CodeSnippet, Button } from "carbon-components-svelte";
-  import Launch16 from "carbon-icons-svelte/lib/Launch16";
+  import Launch from "carbon-icons-svelte/lib/Launch.svelte";
   import { url } from "@sveltech/routify";
   import { theme } from "../store";
 
@@ -27,7 +27,7 @@
         target="_blank"
         size="field"
         href="{themedSrcUrl}"
-        icon="{Launch16}"
+        icon="{Launch}"
       >
         Open in new tab
       </Button>
diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte
index 1e938b1c..bfdbf3eb 100644
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@@ -6,8 +6,8 @@
   export let borderBottom = false;
 
   import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
-  import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32";
-  import Launch20 from "carbon-icons-svelte/lib/Launch20";
+  import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
+  import Launch from "carbon-icons-svelte/lib/Launch.svelte";
 
   $: tileComponent = href ? ClickableTile : Tile;
 </script>
@@ -29,10 +29,11 @@
         </div>
         <div class="card-footer">
           <svelte:component
-            this="{LogoGithub32}"
+            this="{LogoGithub}"
+            size="{32}"
             style="fill: var(--cds-icon-01)"
           />
-          <Launch20 style="fill: var(--cds-icon-01)" />
+          <Launch size="{20}" style="fill: var(--cds-icon-01)" />
         </div>
       </div>
     </svelte:component>
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 1efd7692..3ffae9e5 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -13,7 +13,7 @@
     Tab,
     TabContent,
   } from "carbon-components-svelte";
-  import Code16 from "carbon-icons-svelte/lib/Code16";
+  import Code from "carbon-icons-svelte/lib/Code.svelte";
   import { page, metatags } from "@sveltech/routify";
   import { onMount } from "svelte";
   import { theme } from "../store";
@@ -71,7 +71,7 @@
             target="_blank"
             size="field"
             href="{sourceCode}"
-            icon="{Code16}"
+            icon="{Code}"
           >
             Source code
           </Button>
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index d5eb9632..672f44a3 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -15,7 +15,7 @@
     SideNavMenuItem,
     Tag,
   } from "carbon-components-svelte";
-  import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
+  import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
   import Theme from "../components/Theme.svelte";
 
   const deprecated = [];
@@ -58,7 +58,7 @@
 
     <HeaderUtilities>
       <HeaderActionLink
-        icon="{LogoGithub20}"
+        icon="{LogoGithub}"
         href="https://github.com/carbon-design-system/carbon-components-svelte"
         target="_blank"
       />
diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index 7edd934f..772dd77f 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -1,11 +1,11 @@
 <script>
   import { InlineNotification, Button } from "carbon-components-svelte";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
-  import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
-  import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
-  import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
-  import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
-  import Login16 from "carbon-icons-svelte/lib/Login16";
+  import Add from "carbon-icons-svelte/lib/Add.svelte";
+  import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
+  import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
+  import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
+  import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
+  import Login from "carbon-icons-svelte/lib/Login.svelte";
   import Preview from "../../components/Preview.svelte";
 
   let index = 1;
@@ -43,7 +43,7 @@
   </div>
 </InlineNotification>
 
-<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
+<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
 
 ### Danger ghost button
 
@@ -51,7 +51,7 @@
 
 ### Button with icon
 
-<Button icon={Add16}>With icon</Button>
+<Button icon={Add}>With icon</Button>
 
 ### Icon-only button
 
@@ -61,17 +61,17 @@
   </div>
 </InlineNotification>
 
-<Button iconDescription="Tooltip text" icon={Add16} />
+<Button iconDescription="Tooltip text" icon={Add} />
 
 ### Icon-only, link button
 
-<Button iconDescription="Login" icon={Login16} href="#" />
+<Button iconDescription="Login" icon={Login} href="#" />
 
 ### Icon-only button (custom tooltip position)
 
 The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
 
-<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
+<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />
 
 ### Selected icon-only, ghost button
 
diff --git a/docs/src/pages/components/ButtonSet.svx b/docs/src/pages/components/ButtonSet.svx
index bf4646a3..42f95832 100644
--- a/docs/src/pages/components/ButtonSet.svx
+++ b/docs/src/pages/components/ButtonSet.svx
@@ -4,7 +4,7 @@ source: Button/ButtonSet.svelte
 
 <script>
   import { Button, ButtonSet } from "carbon-components-svelte";
-  import Login16 from "carbon-icons-svelte/lib/Login16";
+  import Login from "carbon-icons-svelte/lib/Login.svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -22,6 +22,6 @@ Buttons in a button set are juxtaposed by default.
 Set `stacked` to `true` to use the stacked variant.
 
 <ButtonSet stacked>
-  <Button icon={Login16}>Log in</Button>
+  <Button icon={Login}>Log in</Button>
   <Button kind="ghost">Sign up</Button>
 </ButtonSet>
\ No newline at end of file
diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx
index fbd14f31..08632dcc 100644
--- a/docs/src/pages/components/ContentSwitcher.svx
+++ b/docs/src/pages/components/ContentSwitcher.svx
@@ -4,8 +4,8 @@ components: ["ContentSwitcher", "Switch"]
 
 <script>
   import { ContentSwitcher, Switch } from "carbon-components-svelte";
-  import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
-  import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
+  import Bullhorn from "carbon-icons-svelte/lib/Bullhorn.svelte";
+  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -33,12 +33,12 @@ components: ["ContentSwitcher", "Switch"]
 <ContentSwitcher>
   <Switch>
     <div style="display: flex; align-items: center;">
-      <Bullhorn16 style="margin-right: 0.5rem;" /> Latest news
+      <Bullhorn style="margin-right: 0.5rem;" /> Latest news
     </div>
   </Switch>
   <Switch>
     <div style="display: flex; align-items: center;">
-      <Analytics16 style="margin-right: 0.5rem;" /> Trending
+      <Analytics style="margin-right: 0.5rem;" /> Trending
     </div>
   </Switch>
 </ContentSwitcher>
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 0df89167..495e3cfe 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -4,7 +4,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
 
 <script>
   import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
-  import Launch16 from "carbon-icons-svelte/lib/Launch16";
+  import Launch from "carbon-icons-svelte/lib/Launch.svelte";
   import Preview from "../../components/Preview.svelte";
 
   const pagination = { pageSize: 5, page: 1}
@@ -146,7 +146,7 @@ The slot name for the table header cells is `"cell-header"`.
   </svelte:fragment>
   <svelte:fragment slot="cell" let:row let:cell>
     {#if cell.key === 'rule' && cell.value === 'Round robin'}
-      <Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
+      <Link icon={Launch} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
     {:else}
       {cell.value}
     {/if}
diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx
index 52bc215f..b8d08cbc 100644
--- a/docs/src/pages/components/Link.svx
+++ b/docs/src/pages/components/Link.svx
@@ -4,7 +4,7 @@ components: ["Link", "OutboundLink"]
 
 <script>
   import { Link, OutboundLink } from "carbon-components-svelte";
-  import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
+  import Carbon from "carbon-icons-svelte/lib/Carbon.svelte"
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -39,7 +39,7 @@ Note that `inline` must be `false` when rendering a link with an icon.
 
 <div>
   Visit the
-  <Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>.
+  <Link href="https://www.carbondesignsystem.com/" icon={Carbon}>Carbon Design System</Link>.
 </div>
 
 ### Large size
diff --git a/docs/src/pages/components/OverflowMenu.svx b/docs/src/pages/components/OverflowMenu.svx
index 3b46d470..0dbe743c 100644
--- a/docs/src/pages/components/OverflowMenu.svx
+++ b/docs/src/pages/components/OverflowMenu.svx
@@ -4,7 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
 
 <script>
   import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
-  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Add from "carbon-icons-svelte/lib/Add.svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -68,7 +68,7 @@ By default, the first overflow menu item is focused when opening the dropdown.
 
 ### Custom trigger icon
 
-<OverflowMenu icon={Add16}>
+<OverflowMenu icon={Add}>
   <OverflowMenuItem text="Manage credentials" />
   <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
   <OverflowMenuItem danger text="Delete service" />
diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx
index 631c992a..f03d10a0 100644
--- a/docs/src/pages/components/Search.svx
+++ b/docs/src/pages/components/Search.svx
@@ -1,5 +1,5 @@
 <script>
-  import Query16 from "carbon-icons-svelte/lib/Query16";
+  import Query from "carbon-icons-svelte/lib/Query.svelte";
   import { Search } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
diff --git a/docs/src/pages/components/StructuredList.svx b/docs/src/pages/components/StructuredList.svx
index 56a8c2df..7ee6308a 100644
--- a/docs/src/pages/components/StructuredList.svx
+++ b/docs/src/pages/components/StructuredList.svx
@@ -4,7 +4,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
 
 <script>
   import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
-  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx
index 19008caf..23f0a41e 100644
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@@ -1,6 +1,6 @@
 <script>
   import { Tag } from "carbon-components-svelte";
-  import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
+  import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -43,7 +43,7 @@
 
 Note: rendering a custom icon cannnot be used with the filterable variant.
 
-<Tag icon={IbmCloud16}>IBM Cloud</Tag>
+<Tag icon={IbmCloud}>IBM Cloud</Tag>
 
 ### Interactive variant
 
diff --git a/docs/src/pages/components/Tooltip.svx b/docs/src/pages/components/Tooltip.svx
index 9b543861..c2905e6e 100644
--- a/docs/src/pages/components/Tooltip.svx
+++ b/docs/src/pages/components/Tooltip.svx
@@ -4,7 +4,7 @@ components: ["Tooltip", "TooltipFooter"]
 
 <script>
   import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte";
-  import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
+  import Catalog from "carbon-icons-svelte/lib/Catalog.svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -57,7 +57,7 @@ By default, the tooltip is triggered by an information icon.
 
 ### Custom icon (component)
 
-<Tooltip triggerText="Resource list" icon={Catalog16}>
+<Tooltip triggerText="Resource list" icon={Catalog}>
   <p>
     Resources are provisioned based on your account's organization.
   </p>
diff --git a/docs/src/pages/components/TooltipIcon.svx b/docs/src/pages/components/TooltipIcon.svx
index 96500eac..6f545f60 100644
--- a/docs/src/pages/components/TooltipIcon.svx
+++ b/docs/src/pages/components/TooltipIcon.svx
@@ -1,29 +1,29 @@
 <script>
   import { TooltipIcon } from "carbon-components-svelte";
-  import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
-  import Filter20 from "carbon-icons-svelte/lib/Filter20";
+  import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
+  import Filter from "carbon-icons-svelte/lib/Filter.svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
 ### Default ("bottom" direction, "center" aligned)
 
-<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
+<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
 
 ### Directions
 
-<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
-<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
-<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
-<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />
+<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
+<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
+<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
+<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter} />
 
 ### Custom tooltip text
 
 Use the "text" slot to customize the tooltip text.
 
-<TooltipIcon icon={Carbon24}>
+<TooltipIcon icon={Carbon}>
   <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
 </TooltipIcon>
 
 ### Disabled
 
-<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
\ No newline at end of file
+<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
\ No newline at end of file
diff --git a/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte b/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
index ca23da37..6ff0f983 100644
--- a/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
+++ b/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
@@ -1,8 +1,8 @@
 <script>
   import { Button } from "carbon-components-svelte";
-  import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
-  import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
-  import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
+  import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
+  import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
+  import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
 
   let index = 1;
 </script>
@@ -11,20 +11,20 @@
   isSelected="{index === 0}"
   kind="ghost"
   iconDescription="Bold"
-  icon="{TextBold16}"
+  icon="{TextBold}"
   on:click="{() => (index = 0)}"
 />
 <Button
   isSelected="{index === 1}"
   kind="ghost"
   iconDescription="Italicize"
-  icon="{TextItalic16}"
+  icon="{TextItalic}"
   on:click="{() => (index = 1)}"
 />
 <Button
   isSelected="{index === 2}"
   kind="ghost"
   iconDescription="Underline"
-  icon="{TextUnderline16}"
+  icon="{TextUnderline}"
   on:click="{() => (index = 2)}"
 />
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
index c639912f..21e92b03 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
@@ -5,8 +5,8 @@
     ContextMenuGroup,
     ContextMenuOption,
   } from "carbon-components-svelte";
-  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
-  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
 
   let selectedIds = [];
 
@@ -18,14 +18,9 @@
     indented
     labelText="Copy"
     shortcutText="⌘C"
-    icon="{CopyFile16}"
-  />
-  <ContextMenuOption
-    indented
-    labelText="Cut"
-    shortcutText="⌘X"
-    icon="{Cut16}"
+    icon="{CopyFile}"
   />
+  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
     <ContextMenuGroup labelText="Export options" bind:selectedIds>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
index 87b4d8a6..d957059e 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
@@ -5,8 +5,8 @@
     ContextMenuGroup,
     ContextMenuOption,
   } from "carbon-components-svelte";
-  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
-  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
 
   let target;
 </script>
@@ -16,14 +16,9 @@
     indented
     labelText="Copy"
     shortcutText="⌘C"
-    icon="{CopyFile16}"
-  />
-  <ContextMenuOption
-    indented
-    labelText="Cut"
-    shortcutText="⌘X"
-    icon="{Cut16}"
+    icon="{CopyFile}"
   />
+  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
     <ContextMenuGroup labelText="Export options">
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
index aa51e7de..c9363250 100644
--- a/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
@@ -5,8 +5,8 @@
     ContextMenuGroup,
     ContextMenuOption,
   } from "carbon-components-svelte";
-  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
-  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
 
   let target;
   let target2;
@@ -20,14 +20,9 @@
     indented
     labelText="Copy"
     shortcutText="⌘C"
-    icon="{CopyFile16}"
-  />
-  <ContextMenuOption
-    indented
-    labelText="Cut"
-    shortcutText="⌘X"
-    icon="{Cut16}"
+    icon="{CopyFile}"
   />
+  <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
     <ContextMenuGroup labelText="Export options">
diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
index 83ff54d4..77681aeb 100644
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
@@ -9,7 +9,7 @@
     ToolbarBatchActions,
     Button,
   } from "carbon-components-svelte";
-  import Save16 from "carbon-icons-svelte/lib/Save16";
+  import Save from "carbon-icons-svelte/lib/Save.svelte";
 
   const headers = [
     { key: "name", value: "Name" },
@@ -34,7 +34,7 @@
 <DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
   <Toolbar>
     <ToolbarBatchActions>
-      <Button icon="{Save16}">Save</Button>
+      <Button icon="{Save}">Save</Button>
     </ToolbarBatchActions>
     <ToolbarContent>
       <ToolbarSearch />
diff --git a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
index 060384f9..e096c3aa 100644
--- a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
+++ b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
@@ -1,13 +1,13 @@
 <script>
   import { Modal } from "carbon-components-svelte";
-  import Send16 from "carbon-icons-svelte/lib/Send16";
+  import Send from "carbon-icons-svelte/lib/Send.svelte";
 </script>
 
 <Modal
   open
   modalHeading="Invite someone"
   primaryButtonText="Send invitation"
-  primaryButtonIcon="{Send16}"
+  primaryButtonIcon="{Send}"
   secondaryButtonText="Cancel"
 >
   <p>Do you really want to invite someone?</p>
diff --git a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
index 04de81c3..465735a0 100644
--- a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
@@ -1,76 +1,74 @@
 <script>
   import { TreeView } from "carbon-components-svelte";
-  import WatsonMachineLearning16 from "carbon-icons-svelte/lib/WatsonMachineLearning16";
-  import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
-  import Blockchain16 from "carbon-icons-svelte/lib/Blockchain16";
-  import DataBase16 from "carbon-icons-svelte/lib/DataBase16";
-  import SignalStrength16 from "carbon-icons-svelte/lib/SignalStrength16";
+  import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
+  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
+  import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
+  import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
+  import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
 
   let activeId = 1;
   let selectedIds = [];
   let children = [
-    { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning16 },
+    { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
     {
       id: 1,
       text: "Analytics",
-      icon: Analytics16,
+      icon: Analytics,
       expanded: true,
       children: [
         {
           id: 2,
           text: "IBM Analytics Engine",
-          icon: Analytics16,
+          icon: Analytics,
           expanded: true,
           children: [
-            { id: 3, text: "Apache Spark", icon: Analytics16 },
-            { id: 4, text: "Hadoop", icon: Analytics16 },
+            { id: 3, text: "Apache Spark", icon: Analytics },
+            { id: 4, text: "Hadoop", icon: Analytics },
           ],
         },
-        { id: 5, text: "IBM Cloud SQL Query", icon: Analytics16 },
-        { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics16 },
+        { id: 5, text: "IBM Cloud SQL Query", icon: Analytics },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics },
       ],
     },
     {
       id: 7,
       text: "Blockchain",
-      icon: Blockchain16,
-      children: [
-        { id: 8, text: "IBM Blockchain Platform", icon: Blockchain16 },
-      ],
+      icon: Blockchain,
+      children: [{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain }],
     },
     {
       id: 9,
       text: "Databases",
-      icon: DataBase16,
+      icon: DataBase,
       children: [
         {
           id: 10,
           text: "IBM Cloud Databases for Elasticsearch",
-          icon: DataBase16,
+          icon: DataBase,
         },
         {
           id: 11,
           text: "IBM Cloud Databases for Enterprise DB",
-          icon: DataBase16,
+          icon: DataBase,
         },
-        { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase16 },
+        { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase },
         {
           id: 13,
           text: "IBM Cloud Databases for PostgreSQL",
-          icon: DataBase16,
+          icon: DataBase,
         },
       ],
     },
     {
       id: 14,
       text: "Integration",
-      icon: SignalStrength16,
+      icon: SignalStrength,
       disabled: true,
       children: [
         {
           id: 15,
           text: "IBM API Connect",
-          icon: SignalStrength16,
+          icon: SignalStrength,
           disabled: true,
         },
       ],
diff --git a/docs/src/pages/framed/UIShell/HeaderNavRail.svelte b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
index 846971c8..d9006aa1 100644
--- a/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte
@@ -16,7 +16,7 @@
     Row,
     Column,
   } from "carbon-components-svelte";
-  import Fade16 from "carbon-icons-svelte/lib/Fade16";
+  import Fade from "carbon-icons-svelte/lib/Fade.svelte";
 
   let isSideNavOpen = false;
 </script>
@@ -39,16 +39,16 @@
 
   <SideNav bind:isOpen="{isSideNavOpen}" rail>
     <SideNavItems>
-      <SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
-      <SideNavLink icon="{Fade16}" text="Link 2" href="/" />
-      <SideNavLink icon="{Fade16}" text="Link 3" href="/" />
-      <SideNavMenu icon="{Fade16}" text="Menu">
+      <SideNavLink icon="{Fade}" text="Link 1" href="/" isSelected />
+      <SideNavLink icon="{Fade}" text="Link 2" href="/" />
+      <SideNavLink icon="{Fade}" text="Link 3" href="/" />
+      <SideNavMenu icon="{Fade}" text="Menu">
         <SideNavMenuItem href="/" text="Link 1" />
         <SideNavMenuItem href="/" text="Link 2" />
         <SideNavMenuItem href="/" text="Link 3" />
       </SideNavMenu>
       <SideNavDivider />
-      <SideNavLink icon="{Fade16}" text="Link 4" href="/" />
+      <SideNavLink icon="{Fade}" text="Link 4" href="/" />
     </SideNavItems>
   </SideNav>
 </Header>
diff --git a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
index 439a95ce..3b6d5029 100644
--- a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
@@ -18,8 +18,8 @@
     Row,
     Column,
   } from "carbon-components-svelte";
-  import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
-  import UserAvatarFilledAlt20 from "carbon-icons-svelte/lib/UserAvatarFilledAlt20";
+  import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
+  import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";
 
   let isSideNavOpen = false;
   let isOpen1 = false;
@@ -31,11 +31,11 @@
     <SkipToContent />
   </svelte:fragment>
   <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
+    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
     <HeaderAction
       bind:isOpen="{isOpen1}"
-      icon="{UserAvatarFilledAlt20}"
-      closeIcon="{UserAvatarFilledAlt20}"
+      icon="{UserAvatarFilledAlt}"
+      closeIcon="{UserAvatarFilledAlt}"
     >
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
index 8695b114..01f1f834 100644
--- a/docs/src/pages/framed/_reset.svelte
+++ b/docs/src/pages/framed/_reset.svelte
@@ -22,7 +22,11 @@
     padding: var(--cds-spacing-06) var(--cds-spacing-05);
   }
 
-  :global(.framed [class^="bx--col"]) {
+  :global(.framed :not(.bx--content) [class^="bx--col"]) {
     outline: 1px solid var(--cds-interactive-04);
   }
+
+  :global(.framed .bx--content [class^="bx--col"]) {
+    outline: 0;
+  }
 </style>
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 1e17a55d..b4f20dd1 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -185,10 +185,10 @@ carbon-components-svelte@../:
   dependencies:
     flatpickr "4.6.9"
 
-carbon-icons-svelte@^10.45.1:
-  version "10.45.1"
-  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.45.1.tgz#210b8d8906bbdc4611dbc06f1030bca26169c2d9"
-  integrity sha512-Uz3byPkSBzjpvLmjt/ZWYJkQG1omfqKh1vzF1FeFYOYqbGOCwc4sHbyF8oet2CseT2cECn1BbEyY4yWvlWYd/w==
+carbon-icons-svelte@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-11.0.1.tgz#65b09832e9e0fa899d631564323e92e6ab878930"
+  integrity sha512-0CCJLmHW3yJ8T9DM2HNGQx304b2VLGY13Xeg6T1cJWeU2oTPIvBbTfveChIULBBI9FIFGLB9m8ZZgeYWEjAAew==
 
 caseless@~0.12.0:
   version "0.12.0"
diff --git a/src/UIShell/HeaderActionLink.svelte b/src/UIShell/HeaderActionLink.svelte
index 3283b398..6993ac6e 100644
--- a/src/UIShell/HeaderActionLink.svelte
+++ b/src/UIShell/HeaderActionLink.svelte
@@ -27,7 +27,7 @@
   {...$$restProps}
 >
   <slot name="icon">
-    <svelte:component this="{icon}" />
+    <svelte:component this="{icon}" size="{20}" />
   </slot>
 </a>