refactor: use icons from carbon-icons-svelte@11 (#1227)

* chore: update ignore rules, remove unused files * refactor(icons): use icons from carbon-icons-svelte@11 * docs(time-picker): fix default value * chore: upgrade carbon-icons-svelte to v11 * docs: update examples to use icons from carbon-icons-svelte@11 * docs: update number of icons [ci skip]
2025-09-14 18:01:06 +00:00 · 2022-04-03 11:57:28 -07:00 · 2022-04-03 11:57:28 -07:00 · ba58ba8f00
commit ba58ba8f00
parent 755a8aa5bc
176 changed files with 1410 additions and 2487 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,9 +1,5 @@
-/coverage
-/lib
-/node_modules
+lib
+node_modules
 .DS_Store
-yarn-debug.log*
-yarn-error.log*
-*.tgz
 .vscode
 .idea
--- a/.prettierignore
+++ b/.prettierignore
@ -1,9 +1,9 @@
-/coverage
 /lib
 /css
-/**/__sapper__
-/**/.routify
-/**/dist
-/**/client
-/**/build
+__sapper__
+.svelte-kit
+.routify
+dist
+client
+build
 *.svx
--- a/0
+++ b/0
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -1564,8 +1564,8 @@ None.
 | platformName            | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>        | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;)                                                                                                                                 |
 | persistentHamburgerMenu | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>     | Set to `true` to persist the hamburger menu                                                                                                                                                                                                                      |
 | expansionBreakpoint     | <code>let</code> | No       | <code>number</code>                                  | <code>1056</code>      | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
-| iconMenu                | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the closed state<br />Defaults to `Menu20`                                                                                                                                                                                        |
-| iconClose               | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the opened state<br />Defaults to `Close20`                                                                                                                                                                                       |
+| iconMenu                | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;`                                                                                                                                                                     |
+| iconClose               | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `&lt;Close size={20} /&gt;`                                                                                                                                                                    |

 ### Slots

@ -1589,18 +1589,18 @@ None.
 | :--------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
 | ref        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                        | <code>null</code>              | Obtain a reference to the button HTML element                                                                 |
 | isOpen     | <code>let</code> | Yes      | <code>boolean</code>                                              | <code>false</code>             | Set to `true` to open the panel                                                                               |
-| icon       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>              | <code>undefined</code>         | Specify the icon to render                                                                                    |
-| closeIcon  | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>              | <code>undefined</code>         | Specify the icon to render when the action panel is open                                                      |
+| icon       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>              | <code>undefined</code>         | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;`   |
+| closeIcon  | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>              | <code>undefined</code>         | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;`        |
 | text       | <code>let</code> | No       | <code>string</code>                                               | <code>undefined</code>         | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
 | transition | <code>let</code> | No       | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition      |

 ### Slots

 | Slot name | Default | Props | Fallback                                                               |
-| :-------- | :------ | :---- | :---------------------------------------------------------- |
+| :-------- | :------ | :---- | :--------------------------------------------------------------------- |
 | --        | Yes     | --    | --                                                                     |
-| closeIcon | No      | --    | <code>&lt;svelte:component this="{closeIcon}" /&gt;</code>  |
-| icon      | No      | --    | <code>&lt;svelte:component this="{icon}" /&gt;</code>       |
+| closeIcon | No      | --    | <code>&lt;svelte:component this="{closeIcon}" size="{20}" /&gt;</code> |
+| icon      | No      | --    | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code>      |
 | text      | No      | --    | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code>            |

 ### Events
@ -1624,8 +1624,8 @@ None.
 ### Slots

 | Slot name | Default | Props | Fallback                                                          |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| icon      | No      | --    | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
+| :-------- | :------ | :---- | :---------------------------------------------------------------- |
+| icon      | No      | --    | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |

 ### Events

@ -2569,10 +2569,10 @@ None.
 ### Props

 | Prop name        | Kind             | Reactive | Type                                                 | Default value                                    | Description                                                                   |
-| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
+| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
 | menuRef          | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code>            | <code>null</code>                                | Obtain a reference to the overflow menu element                               |
 | buttonRef        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>           | <code>null</code>                                | Obtain a reference to the trigger button element                              |
-| icon             | <code>let</code> | Yes      | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code>                           | Specify the icon to render                                        |
+| icon             | <code>let</code> | Yes      | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code>                           | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` |
 | open             | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to open the menu                                                |
 | size             | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                        | <code>undefined</code>                           | Specify the size of the overflow menu                                         |
 | direction        | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>                   | <code>"bottom"</code>                            | Specify the direction of the overflow menu relative to the button             |
@ -3056,7 +3056,7 @@ None.
 ### Props

 | Prop name            | Kind             | Reactive | Type                                                 | Default value                                    | Description                                                     |
-| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
+| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
 | ref                  | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>            | <code>null</code>                                | Obtain a reference to the input HTML element                    |
 | expanded             | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true to expand the search input                         |
 | value                | <code>let</code> | Yes      | <code>any</code>                                     | <code>""</code>                                  | Specify the value of the search input                           |
@ -3071,7 +3071,7 @@ None.
 | autofocus            | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to auto focus the search element                  |
 | closeButtonLabelText | <code>let</code> | No       | <code>string</code>                                  | <code>"Clear search input"</code>                | Specify the close button label text                             |
 | labelText            | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>                                  | Specify the label text                                          |
-| icon                 | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code>                           | Specify the icon to render                              |
+| icon                 | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code>                           | Specify the icon to render.<br />Defaults to `&lt;Search /&gt;` |
 | id                   | <code>let</code> | No       | <code>string</code>                                  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                                 |

 ### Slots
@ -4491,7 +4491,7 @@ None.
 ### Props

 | Prop name       | Kind             | Reactive | Type                                                            | Default value                                    | Description                                                                                |
-| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
+| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
 | refIcon         | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the icon HTML element                                                |
 | refTooltip      | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the tooltip HTML element                                             |
 | ref             | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the trigger text HTML element                                        |
@ -4499,7 +4499,7 @@ None.
 | align           | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon                                      |
 | direction       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the button                                    |
 | hideIcon        | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to hide the tooltip icon                                                     |
-| icon            | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>            | <code>undefined</code>                           | Specify the icon to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |
+| icon            | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>            | <code>undefined</code>                           | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
 | iconDescription | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the ARIA label for the tooltip button                                              |
 | iconName        | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the icon name attribute                                                            |
 | tabindex        | <code>let</code> | No       | <code>string</code>                                             | <code>"0"</code>                                 | Set the button tabindex                                                                    |
--- a/MAINTAINERS.md
+++ b/MAINTAINERS.md
@ -1 +0,0 @@
-# Maintainers
--- a/README.md
+++ b/README.md
@ -10,7 +10,7 @@ Design systems facilitate design and development through reuse, consistency, and

 The Carbon Svelte portfolio also includes:

- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components
+- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 1900+ Carbon icons as Svelte components
 - **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
@ -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
--- 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",
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@ -4053,8 +4053,8 @@
      "moduleExports": [],
      "slots": [],
      "events": [
-        { "type": "forwarded", "name": "click", "element": "Close16" },
-        { "type": "forwarded", "name": "keydown", "element": "Close16" }
+        { "type": "forwarded", "name": "click", "element": "Close" },
+        { "type": "forwarded", "name": "keydown", "element": "Close" }
      ],
      "typedefs": [],
      "rest_props": { "type": "InlineComponent", "name": "Loading" }
@ -4437,7 +4437,7 @@
        {
          "name": "iconMenu",
          "kind": "let",
-          "description": "Specify the icon to render for the closed state\nDefaults to `Menu20`",
+          "description": "Specify the icon to render for the closed state.\nDefaults to `<Menu size={20} />`",
          "type": "typeof import(\"svelte\").SvelteComponent",
          "isFunction": false,
          "isFunctionDeclaration": false,
@ -4447,7 +4447,7 @@
        {
          "name": "iconClose",
          "kind": "let",
-          "description": "Specify the icon to render for the opened state\nDefaults to `Close20`",
+          "description": "Specify the icon to render for the opened state.\nDefaults to `<Close size={20} />`",
          "type": "typeof import(\"svelte\").SvelteComponent",
          "isFunction": false,
          "isFunctionDeclaration": false,
@ -4488,7 +4488,7 @@
        {
          "name": "icon",
          "kind": "let",
-          "description": "Specify the icon to render",
+          "description": "Specify the icon to render when the action panel is closed.\nDefaults to `<Switcher size={20} />`",
          "type": "typeof import(\"svelte\").SvelteComponent",
          "isFunction": false,
          "isFunctionDeclaration": false,
@ -4498,7 +4498,7 @@
        {
          "name": "closeIcon",
          "kind": "let",
-          "description": "Specify the icon to render when the action panel is open",
+          "description": "Specify the icon to render when the action panel is open.\nDefaults to `<Close size={20} />`",
          "type": "typeof import(\"svelte\").SvelteComponent",
          "isFunction": false,
          "isFunctionDeclaration": false,
@ -4544,13 +4544,13 @@
        {
          "name": "closeIcon",
          "default": false,
-          "fallback": "<svelte:component this=\"{closeIcon}\" />",
+          "fallback": "<svelte:component this=\"{closeIcon}\" size=\"{20}\" />",
          "slot_props": "{}"
        },
        {
          "name": "icon",
          "default": false,
-          "fallback": "<svelte:component this=\"{icon}\" />",
+          "fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
          "slot_props": "{}"
        },
        {
@ -4619,7 +4619,7 @@
        {
          "name": "icon",
          "default": false,
-          "fallback": "<svelte:component this=\"{icon}\" />",
+          "fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
          "slot_props": "{}"
        }
      ],
@ -7371,7 +7371,7 @@
        {
          "name": "icon",
          "kind": "let",
-          "description": "Specify the icon to render",
+          "description": "Specify the icon to render.\nDefaults to `<OverflowMenuVertical />`",
          "type": "typeof import(\"svelte\").SvelteComponent",
          "isFunction": false,
          "isFunctionDeclaration": false,
@ -9183,7 +9183,7 @@
        {
          "name": "icon",
          "kind": "let",
-          "description": "Specify the icon to render",
+          "description": "Specify the icon to render.\nDefaults to `<Search />`",
          "type": "typeof import(\"svelte\").SvelteComponent",
          "isFunction": false,
          "isFunctionDeclaration": false,
@ -12860,7 +12860,7 @@
        {
          "name": "icon",
          "kind": "let",
-          "description": "Specify the icon to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)",
+          "description": "Specify the icon to render for the tooltip button.\nDefault to `<Information />`",
          "type": "typeof import(\"svelte\").SvelteComponent",
          "isFunction": false,
          "isFunctionDeclaration": false,
--- 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>
--- 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>
--- 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>
--- 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"
      />
--- 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

--- 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>
--- 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>
--- 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}
--- 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
--- 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" />
--- 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>
--- 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>

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

--- a/docs/src/pages/components/TimePicker.svx
+++ b/docs/src/pages/components/TimePicker.svx
@ -10,11 +10,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
 ### Default

 <TimePicker labelText="Cron job" placeholder="hh:mm">
-  <TimePickerSelect value="PM">
+  <TimePickerSelect value="pm">
    <SelectItem value="am" text="AM" />
    <SelectItem value="pm" text="PM" />
  </TimePickerSelect>
-  <TimePickerSelect value="PDT">
+  <TimePickerSelect value="pdt">
    <SelectItem value="pdt" text="PDT" />
    <SelectItem value="gmt" text="GMT" />
  </TimePickerSelect>
@ -23,11 +23,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
 ### Light variant

 <TimePicker light labelText="Cron job" placeholder="hh:mm">
-  <TimePickerSelect value="PM">
+  <TimePickerSelect value="pm">
    <SelectItem value="am" text="AM" />
    <SelectItem value="pm" text="PM" />
  </TimePickerSelect>
-  <TimePickerSelect value="PDT">
+  <TimePickerSelect value="pdt">
    <SelectItem value="pdt" text="PDT" />
    <SelectItem value="gmt" text="GMT" />
  </TimePickerSelect>
@ -36,11 +36,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
 ### Extra-large size

 <TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
-  <TimePickerSelect value="PM">
+  <TimePickerSelect value="pm">
    <SelectItem value="am" text="AM" />
    <SelectItem value="pm" text="PM" />
  </TimePickerSelect>
-  <TimePickerSelect value="PDT">
+  <TimePickerSelect value="pdt">
    <SelectItem value="pdt" text="PDT" />
    <SelectItem value="gmt" text="GMT" />
  </TimePickerSelect>
@ -49,11 +49,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
 ### Small size

 <TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
-  <TimePickerSelect value="PM">
+  <TimePickerSelect value="pm">
    <SelectItem value="am" text="AM" />
    <SelectItem value="pm" text="PM" />
  </TimePickerSelect>
-  <TimePickerSelect value="PDT">
+  <TimePickerSelect value="pdt">
    <SelectItem value="pdt" text="PDT" />
    <SelectItem value="gmt" text="GMT" />
  </TimePickerSelect>
@ -62,11 +62,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
 ### Invalid state

 <TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
-  <TimePickerSelect value="PM">
+  <TimePickerSelect value="pm">
    <SelectItem value="am" text="AM" />
    <SelectItem value="pm" text="PM" />
  </TimePickerSelect>
-  <TimePickerSelect value="PDT">
+  <TimePickerSelect value="pdt">
    <SelectItem value="pdt" text="PDT" />
    <SelectItem value="gmt" text="GMT" />
  </TimePickerSelect>
@ -76,11 +76,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
 ### Disabled state

 <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
-  <TimePickerSelect value="PM" disabled>
+  <TimePickerSelect value="pm" disabled>
    <SelectItem value="am" text="AM" />
    <SelectItem value="pm" text="PM" />
  </TimePickerSelect>
-  <TimePickerSelect value="PDT" disabled>
+  <TimePickerSelect value="pdt" disabled>
    <SelectItem value="pdt" text="PDT" />
    <SelectItem value="gmt" text="GMT" />
  </TimePickerSelect>
--- 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>
--- 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} />
+<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
--- 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)}"
 />
--- 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>
--- 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">
--- 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">
--- 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 />
--- 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>
--- 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,
        },
      ],
--- 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>
--- 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>
--- 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>
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@ -268,7 +268,7 @@
        <TileCard
          borderBottom
          title="Carbon Icons Svelte"
-          subtitle="7000+ icons"
+          subtitle="1900+ icons"
          target="_blank"
          href="https://github.com/carbon-design-system/carbon-icons-svelte"
        />
--- 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"
--- a/package.json
+++ b/package.json
@ -28,7 +28,7 @@
    "autoprefixer": "^10.4.4",
    "carbon-components": "10.56.0",
    "carbon-components-10.47": "npm:carbon-components@10.47",
-    "carbon-icons-svelte": "^10.45.1",
+    "carbon-icons-svelte": "^11.0.1",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.3",
    "postcss": "^8.4.12",
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@ -15,7 +15,7 @@
  export let iconDescription = "Expand/Collapse";

  import { onMount, getContext } from "svelte";
-  import ChevronRight16 from "../icons/ChevronRight16.svelte";
+  import ChevronRight from "../icons/ChevronRight.svelte";

  let initialDisabled = disabled;

@ -68,10 +68,7 @@
      }
    }}"
  >
-    <ChevronRight16
-      class="bx--accordion__arrow"
-      aria-label="{iconDescription}"
-    />
+    <ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
    <div class:bx--accordion__title="{true}">
      <slot name="title">{title}</slot>
    </div>
--- a/src/Accordion/AccordionSkeleton.svelte
+++ b/src/Accordion/AccordionSkeleton.svelte
@ -17,7 +17,7 @@
  /** Set to `false` to close the first accordion item */
  export let open = true;

-  import ChevronRight16 from "../icons/ChevronRight16.svelte";
+  import ChevronRight from "../icons/ChevronRight.svelte";
  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>

@ -41,7 +41,7 @@
      class:bx--accordion__item--active="{true}"
    >
      <span class:bx--accordion__heading="{true}">
-        <ChevronRight16 class="bx--accordion__arrow" />
+        <ChevronRight class="bx--accordion__arrow" />
        <SkeletonText class="bx--accordion__title" />
      </span>
      <div class="bx--accordion__content">
@ -54,7 +54,7 @@
  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
    <li class="bx--accordion__item">
      <span class="bx--accordion__heading">
-        <ChevronRight16 class="bx--accordion__arrow" />
+        <ChevronRight class="bx--accordion__arrow" />
        <SkeletonText class="bx--accordion__title" />
      </span>
    </li>
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@ -89,7 +89,7 @@
  export let ref = null;

  import { createEventDispatcher, tick, onMount } from "svelte";
-  import ChevronDown16 from "../icons/ChevronDown16.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";
  import Button from "../Button/Button.svelte";
  import CopyButton from "../CopyButton/CopyButton.svelte";
  import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
@ -243,7 +243,7 @@
        }}"
      >
        <span class:bx--snippet-btn--text="{true}">{expandText}</span>
-        <ChevronDown16
+        <ChevronDown
          class="bx--icon-chevron--down bx--snippet__icon"
          aria-label="{expandText}"
        />
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@ -100,9 +100,9 @@
  export let listRef = null;

  import { createEventDispatcher, afterUpdate, tick } from "svelte";
-  import Checkmark16 from "../icons/Checkmark16.svelte";
-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
-  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
+  import Checkmark from "../icons/Checkmark.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
  import ListBox from "../ListBox/ListBox.svelte";
  import ListBoxField from "../ListBox/ListBoxField.svelte";
  import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
@ -314,10 +314,10 @@
        }}"
      />
      {#if invalid}
-        <WarningFilled16 class="bx--list-box__invalid-icon" />
+        <WarningFilled class="bx--list-box__invalid-icon" />
      {/if}
      {#if !invalid && warn}
-        <WarningAltFilled16
+        <WarningAltFilled
          class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
        />
      {/if}
@ -368,7 +368,7 @@
              {itemToString(item)}
            </slot>
            {#if selectedItem && selectedItem.id === item.id}
-              <Checkmark16 class="bx--list-box__menu-item__selected-icon" />
+              <Checkmark class="bx--list-box__menu-item__selected-icon" />
            {/if}
          </ListBoxMenuItem>
        {/each}
--- a/src/ComposedModal/ModalHeader.svelte
+++ b/src/ComposedModal/ModalHeader.svelte
@ -21,7 +21,7 @@
  export let iconDescription = "Close";

  import { getContext } from "svelte";
-  import Close20 from "../icons/Close20.svelte";
+  import Close from "../icons/Close.svelte";

  const { closeModal, updateLabel } = getContext("ComposedModal");

@ -57,6 +57,6 @@
    on:click
    on:click="{closeModal}"
  >
-    <Close20 class="bx--modal-close__icon {closeIconClass}" />
+    <Close size="{20}" class="bx--modal-close__icon {closeIconClass}" />
  </button>
 </div>
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@ -50,8 +50,8 @@

  import { onMount, getContext, createEventDispatcher, tick } from "svelte";
  import ContextMenu from "./ContextMenu.svelte";
-  import Checkmark16 from "../icons/Checkmark16.svelte";
-  import CaretRight16 from "../icons/CaretRight16.svelte";
+  import Checkmark from "../icons/Checkmark.svelte";
+  import CaretRight from "../icons/CaretRight.svelte";

  const dispatch = createEventDispatcher();
  const ctx = getContext("ContextMenu");
@ -145,7 +145,7 @@

      if (selected) {
        if (ctxGroup) ctxGroup.addOption({ id });
-        icon = Checkmark16;
+        icon = Checkmark;
      } else {
        icon = undefined;
      }
@ -158,7 +158,7 @@

      if (selected) {
        if (ctxRadioGroup) ctxRadioGroup.setOption({ id });
-        icon = Checkmark16;
+        icon = Checkmark;
      } else {
        icon = undefined;
      }
@ -253,7 +253,7 @@
      <span class:bx--menu-option__label="{true}" title="{labelText}">
        <slot name="labelText">{labelText}</slot>
      </span>
-      <div class:bx--menu-option__info="{true}"><CaretRight16 /></div>
+      <div class:bx--menu-option__info="{true}"><CaretRight /></div>
    </div>

    <ContextMenu
--- a/src/CopyButton/CopyButton.svelte
+++ b/src/CopyButton/CopyButton.svelte
@ -27,7 +27,7 @@
  };

  import { createEventDispatcher, onMount } from "svelte";
-  import Copy16 from "../icons/Copy16.svelte";
+  import Copy from "../icons/Copy.svelte";

  const dispatch = createEventDispatcher();

@ -71,7 +71,7 @@
    }
  }}"
 >
-  <Copy16 class="bx--snippet__icon" />
+  <Copy class="bx--snippet__icon" />
  <span
    aria-hidden="true"
    class:bx--assistive-text="{true}"
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@ -114,7 +114,7 @@

  import { createEventDispatcher, setContext } from "svelte";
  import { writable, derived } from "svelte/store";
-  import ChevronRight16 from "../icons/ChevronRight16.svelte";
+  import ChevronRight from "../icons/ChevronRight.svelte";
  import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
  import RadioButton from "../RadioButton/RadioButton.svelte";
  import Table from "./Table.svelte";
@ -286,7 +286,7 @@
                  dispatch('click:header--expand', { expanded });
                }}"
              >
-                <ChevronRight16 class="bx--table-expand__svg" />
+                <ChevronRight class="bx--table-expand__svg" />
              </button>
            {/if}
          </th>
@ -413,7 +413,7 @@
                    });
                  }}"
                >
-                  <ChevronRight16 class="bx--table-expand__svg" />
+                  <ChevronRight class="bx--table-expand__svg" />
                </button>
              {/if}
            </TableCell>
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@ -15,8 +15,8 @@
  export let id = "ccs-" + Math.random().toString(36);

  import { getContext } from "svelte";
-  import ArrowUp20 from "../icons/ArrowUp20.svelte";
-  import ArrowsVertical20 from "../icons/ArrowsVertical20.svelte";
+  import ArrowUp from "../icons/ArrowUp.svelte";
+  import ArrowsVertical from "../icons/ArrowsVertical.svelte";

  const { sortHeader, tableSortable } = getContext("DataTable");

@ -46,8 +46,13 @@
      <div class:bx--table-header-label="{true}">
        <slot />
      </div>
-      <ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
-      <ArrowsVertical20
+      <ArrowUp
+        size="{20}"
+        aria-label="{ariaLabel}"
+        class="bx--table-sort__icon"
+      />
+      <ArrowsVertical
+        size="{20}"
        aria-label="{ariaLabel}"
        class="bx--table-sort__icon-unsorted"
      />
--- a/src/DataTable/ToolbarMenu.svelte
+++ b/src/DataTable/ToolbarMenu.svelte
@ -2,7 +2,7 @@
  /** @extends {"../OverflowMenu/OverflowMenu.svelte"} OverflowMenuProps */

  import { getContext } from "svelte";
-  import Settings16 from "../icons/Settings16.svelte";
+  import Settings from "../icons/Settings.svelte";
  import OverflowMenu from "../OverflowMenu/OverflowMenu.svelte";

  const ctx = getContext("Toolbar");
@ -15,7 +15,7 @@

 <OverflowMenu
  bind:menuRef
-  icon="{Settings16}"
+  icon="{Settings}"
  {...$$restProps}
  class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
  flipped
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@ -54,9 +54,9 @@
  export let ref = null;

  import { getContext } from "svelte";
-  import Calendar16 from "../icons/Calendar16.svelte";
-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
-  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
+  import Calendar from "../icons/Calendar.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";

  const {
    range,
@ -138,22 +138,20 @@
    />
    {#if !$hasCalendar}
      {#if invalid}
-        <WarningFilled16
+        <WarningFilled
          class="bx--date-picker__icon bx--date-picker__icon--invalid"
        />
      {/if}
      {#if !invalid && warn}
-        <WarningAltFilled16
+        <WarningAltFilled
          class="bx--date-picker__icon bx--date-picker__icon--warn"
        />
      {/if}
    {/if}
    {#if $hasCalendar}
-      <Calendar16
-        role="img"
+      <Calendar
        class="bx--date-picker__icon"
        aria-label="{iconDescription}"
-        title="{iconDescription}"
        on:click="{openCalendar}"
      />
    {/if}
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@ -101,8 +101,8 @@
  export let ref = null;

  import { createEventDispatcher } from "svelte";
-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
-  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
  import {
    ListBox,
    ListBoxMenu,
@ -190,10 +190,10 @@
    warnText="{warnText}"
  >
    {#if invalid}
-      <WarningFilled16 class="bx--list-box__invalid-icon" />
+      <WarningFilled class="bx--list-box__invalid-icon" />
    {/if}
    {#if !invalid && warn}
-      <WarningAltFilled16
+      <WarningAltFilled
        class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
      />
    {/if}
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@ -11,9 +11,9 @@
  /** Set to `true` to indicate an invalid state */
  export let invalid = false;

-  import Close16 from "../icons/Close16.svelte";
-  import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
+  import Close from "../icons/Close.svelte";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
  import Loading from "../Loading/Loading.svelte";
 </script>

@ -28,9 +28,9 @@

 {#if status === "edit"}
  {#if invalid}
-    <WarningFilled16 class="bx--file-invalid" />
+    <WarningFilled class="bx--file-invalid" />
  {/if}
-  <Close16
+  <Close
    aria-label="{iconDescription}"
    title="{iconDescription}"
    class="bx--file-close"
@ -41,7 +41,7 @@
 {/if}

 {#if status === "complete"}
-  <CheckmarkFilled16
+  <CheckmarkFilled
    aria-label="{iconDescription}"
    title="{iconDescription}"
    class="bx--file-complete"
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@ -21,8 +21,8 @@
  export let successDelay = 1500;

  import { createEventDispatcher, afterUpdate, onMount } from "svelte";
-  import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
-  import ErrorFilled16 from "../icons/ErrorFilled16.svelte";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import ErrorFilled from "../icons/ErrorFilled.svelte";
  import Loading from "../Loading/Loading.svelte";

  const dispatch = createEventDispatcher();
@ -56,12 +56,12 @@
 >
  <div class:bx--inline-loading__animation="{true}">
    {#if status === "error"}
-      <ErrorFilled16
+      <ErrorFilled
        class="bx--inline-loading--error"
        title="{iconDescription}"
      />
    {:else if status === "finished"}
-      <CheckmarkFilled16
+      <CheckmarkFilled
        class="bx--inline-loading__checkmark-container"
        title="{iconDescription}"
      />
--- a/src/Link/OutboundLink.svelte
+++ b/src/Link/OutboundLink.svelte
@ -2,7 +2,7 @@
  /** @extends {"./Link.svelte"} LinkProps */

  import Link from "./Link.svelte";
-  import Launch16 from "../icons/Launch16.svelte";
+  import Launch from "../icons/Launch.svelte";
 </script>

 <Link
@ -12,7 +12,7 @@
  on:mouseenter
  on:mouseleave
  target="_blank"
-  icon="{Launch16}"
+  icon="{Launch}"
 >
  <slot />
 </Link>
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@ -15,7 +15,7 @@
   */
  export let translateWithId = (id) => defaultTranslations[id];

-  import ChevronDown16 from "../icons/ChevronDown16.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";

  const defaultTranslations = {
    [translationIds.close]: "Close menu",
@ -31,5 +31,5 @@
  {...$$restProps}
  on:click|preventDefault
 >
-  <ChevronDown16 aria-label="{description}" title="{description}" />
+  <ChevronDown aria-label="{description}" title="{description}" />
 </div>
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@ -28,7 +28,7 @@
  export let ref = null;

  import { createEventDispatcher, getContext } from "svelte";
-  import Close16 from "../icons/Close16.svelte";
+  import Close from "../icons/Close.svelte";

  const defaultTranslations = {
    [translationIds.clearAll]: "Clear all selected items",
@ -75,7 +75,7 @@
      aria-label="{translationIds.clearAll}"
      title="{description}"
    >
-      <Close16 />
+      <Close />
    </div>
  </div>
 {:else}
@ -101,6 +101,6 @@
    }}"
  >
    {#if selectionCount !== undefined}{selectionCount}{/if}
-    <Close16 />
+    <Close />
  </div>
 {/if}
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@ -90,7 +90,7 @@
  export let ref = null;

  import { createEventDispatcher, onMount, afterUpdate } from "svelte";
-  import Close20 from "../icons/Close20.svelte";
+  import Close from "../icons/Close.svelte";
  import Button from "../Button/Button.svelte";

  const dispatch = createEventDispatcher();
@ -228,7 +228,8 @@
            open = false;
          }}"
        >
-          <Close20
+          <Close
+            size="{20}"
            aria-label="{iconDescription}"
            class="bx--modal-close__icon"
          />
@ -253,7 +254,8 @@
            open = false;
          }}"
        >
-          <Close20
+          <Close
+            size="{20}"
            aria-label="{iconDescription}"
            class="bx--modal-close__icon"
          />
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@ -161,8 +161,8 @@
  export let highlightedId = null;

  import { afterUpdate, createEventDispatcher, setContext } from "svelte";
-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
-  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
  import Checkbox from "../Checkbox/Checkbox.svelte";
  import {
    ListBox,
@ -300,10 +300,10 @@
      {checked.length > 0 && 'bx--multi-select--selected'}"
  >
    {#if invalid}
-      <WarningFilled16 class="bx--list-box__invalid-icon" />
+      <WarningFilled class="bx--list-box__invalid-icon" />
    {/if}
    {#if !invalid && warn}
-      <WarningAltFilled16
+      <WarningAltFilled
        class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
      />
    {/if}
@ -431,7 +431,7 @@
          value="{inputValue}"
        />
        {#if invalid}
-          <WarningFilled16 class="bx--list-box__invalid-icon" />
+          <WarningFilled class="bx--list-box__invalid-icon" />
        {/if}
        {#if inputValue}
          <ListBoxSelection
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@ -9,7 +9,7 @@
   * Specify the icon to render
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let icon = Close20;
+  export let icon = Close;

  /**
   * Specify the title of the icon
@ -20,7 +20,7 @@
  /** Specify the ARIA label for the icon */
  export let iconDescription = "Close icon";

-  import Close20 from "../icons/Close20.svelte";
+  import Close from "../icons/Close.svelte";
 </script>

 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -38,6 +38,7 @@
 >
  <svelte:component
    this="{icon}"
+    size="{20}"
    title="{title}"
    class="bx--{notificationType}-notification__close-icon"
  />
--- a/src/Notification/NotificationIcon.svelte
+++ b/src/Notification/NotificationIcon.svelte
@ -14,25 +14,26 @@
  /** Specify the ARIA label for the icon */
  export let iconDescription = "Closes notification";

-  import CheckmarkFilled20 from "../icons/CheckmarkFilled20.svelte";
-  import ErrorFilled20 from "../icons/ErrorFilled20.svelte";
-  import InformationFilled20 from "../icons/InformationFilled20.svelte";
-  import InformationSquareFilled20 from "../icons/InformationSquareFilled20.svelte";
-  import WarningFilled20 from "../icons/WarningFilled20.svelte";
-  import WarningAltFilled20 from "../icons/WarningAltFilled20.svelte";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import ErrorFilled from "../icons/ErrorFilled.svelte";
+  import InformationFilled from "../icons/InformationFilled.svelte";
+  import InformationSquareFilled from "../icons/InformationSquareFilled.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";

  const icons = {
-    error: ErrorFilled20,
-    "info-square": InformationSquareFilled20,
-    info: InformationFilled20,
-    success: CheckmarkFilled20,
-    warning: WarningFilled20,
-    "warning-alt": WarningAltFilled20,
+    error: ErrorFilled,
+    "info-square": InformationSquareFilled,
+    info: InformationFilled,
+    success: CheckmarkFilled,
+    warning: WarningFilled,
+    "warning-alt": WarningAltFilled,
  };
 </script>

 <svelte:component
  this="{icons[kind]}"
+  size="{20}"
  title="{iconDescription}"
  class="bx--{notificationType}-notification__icon"
 />
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@ -100,11 +100,11 @@
  export let ref = null;

  import { createEventDispatcher } from "svelte";
-  import Add16 from "../icons/Add16.svelte";
-  import Subtract16 from "../icons/Subtract16.svelte";
-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
-  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
-  import EditOff16 from "../icons/EditOff16.svelte";
+  import Add from "../icons/Add.svelte";
+  import Subtract from "../icons/Subtract.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import EditOff from "../icons/EditOff.svelte";

  const defaultTranslations = {
    [translationIds.increment]: "Increment number",
@ -207,15 +207,15 @@
        on:blur
      />
      {#if invalid}
-        <WarningFilled16 class="bx--number__invalid" />
+        <WarningFilled class="bx--number__invalid" />
      {/if}
      {#if !invalid && warn}
-        <WarningAltFilled16
+        <WarningAltFilled
          class="bx--number__invalid bx--number__invalid--warning"
        />
      {/if}
      {#if readonly}
-        <EditOff16 class="bx--text-input__readonly-icon" />
+        <EditOff class="bx--text-input__readonly-icon" />
      {/if}
      {#if !hideSteppers}
        <div class:bx--number__controls="{true}">
@ -231,7 +231,7 @@
            }}"
            disabled="{disabled}"
          >
-            <Subtract16 class="down-icon" />
+            <Subtract class="down-icon" />
          </button>
          <div class:bx--number__rule-divider="{true}"></div>
          <button
@ -246,7 +246,7 @@
            }}"
            disabled="{disabled}"
          >
-            <Add16 class="up-icon" />
+            <Add class="up-icon" />
          </button>
          <div class:bx--number__rule-divider="{true}"></div>
        </div>
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@ -31,10 +31,11 @@
  export let menuOptionsClass = undefined;

  /**
-   * Specify the icon to render
+   * Specify the icon to render.
+   * Defaults to `<OverflowMenuVertical />`
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let icon = OverflowMenuVertical16;
+  export let icon = OverflowMenuVertical;

  /**
   * Specify the icon class
@ -61,8 +62,8 @@
    afterUpdate,
  } from "svelte";
  import { writable } from "svelte/store";
-  import OverflowMenuVertical16 from "../icons/OverflowMenuVertical16.svelte";
-  import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte";
+  import OverflowMenuVertical from "../icons/OverflowMenuVertical.svelte";
+  import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";

  const ctxBreadcrumbItem = getContext("BreadcrumbItem");
  const dispatch = createEventDispatcher();
@ -75,7 +76,7 @@
  let onMountAfterUpdate = true;

  $: if (ctxBreadcrumbItem) {
-    icon = OverflowMenuHorizontal16;
+    icon = OverflowMenuHorizontal;
  }

  setContext("OverflowMenu", {
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@ -71,8 +71,8 @@
  export let id = "ccs-" + Math.random().toString(36);

  import { afterUpdate, createEventDispatcher } from "svelte";
-  import CaretLeft16 from "../icons/CaretLeft16.svelte";
-  import CaretRight16 from "../icons/CaretRight16.svelte";
+  import CaretLeft from "../icons/CaretLeft.svelte";
+  import CaretRight from "../icons/CaretRight.svelte";
  import Button from "../Button/Button.svelte";
  import Select from "../Select/Select.svelte";
  import SelectItem from "../Select/SelectItem.svelte";
@ -161,7 +161,7 @@
      kind="ghost"
      tooltipAlignment="center"
      tooltipPosition="top"
-      icon="{CaretLeft16}"
+      icon="{CaretLeft}"
      iconDescription="{backwardText}"
      disabled="{backButtonDisabled}"
      class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
@ -176,7 +176,7 @@
      kind="ghost"
      tooltipAlignment="end"
      tooltipPosition="top"
-      icon="{CaretRight16}"
+      icon="{CaretRight}"
      iconDescription="{forwardText}"
      disabled="{forwardButtonDisabled}"
      class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@ -24,8 +24,8 @@
  export let backwardText = "Previous page";

  import { afterUpdate, createEventDispatcher } from "svelte";
-  import CaretLeft16 from "../icons/CaretLeft16.svelte";
-  import CaretRight16 from "../icons/CaretRight16.svelte";
+  import CaretLeft from "../icons/CaretLeft.svelte";
+  import CaretRight from "../icons/CaretRight.svelte";
  import PaginationItem from "./PaginationItem.svelte";
  import PaginationOverflow from "./PaginationOverflow.svelte";
  import Button from "../Button/Button.svelte";
@ -76,7 +76,7 @@
        tooltipPosition="bottom"
        iconDescription="{backwardText}"
        disabled="{!loop && page === 0}"
-        icon="{CaretLeft16}"
+        icon="{CaretLeft}"
        on:click="{() => {
          if (page - 1 < 0) {
            if (loop) page = total - 1;
@ -133,7 +133,7 @@
        tooltipPosition="bottom"
        iconDescription="{forwardText}"
        disabled="{!loop && page === total - 1}"
-        icon="{CaretRight16}"
+        icon="{CaretRight}"
        on:click="{() => {
          if (page + 1 >= total) {
            if (loop) page = 0;
--- a/src/PaginationNav/PaginationOverflow.svelte
+++ b/src/PaginationNav/PaginationOverflow.svelte
@ -10,7 +10,7 @@
  export let count = 0;

  import { createEventDispatcher } from "svelte";
-  import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte";
+  import OverflowMenuHorizontal from "../icons/OverflowMenuHorizontal.svelte";
  import PaginationItem from "./PaginationItem.svelte";

  const dispatch = createEventDispatcher();
@ -40,7 +40,7 @@
        {/each}
      </select>
      <div class:bx--pagination-nav__select-icon-wrapper="{true}">
-        <OverflowMenuHorizontal16 class="bx--pagination-nav__select-icon" />
+        <OverflowMenuHorizontal class="bx--pagination-nav__select-icon" />
      </div>
    </div>
  </li>
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@ -24,10 +24,10 @@
  export let id = "ccs-" + Math.random().toString(36);

  import { onMount, getContext } from "svelte";
-  import CheckmarkOutline16 from "../icons/CheckmarkOutline16.svelte";
-  import Warning16 from "../icons/Warning16.svelte";
-  import CircleDash16 from "../icons/CircleDash16.svelte";
-  import Incomplete16 from "../icons/Incomplete16.svelte";
+  import CheckmarkOutline from "../icons/CheckmarkOutline.svelte";
+  import Warning from "../icons/Warning.svelte";
+  import CircleDash from "../icons/CircleDash.svelte";
+  import Incomplete from "../icons/Incomplete.svelte";

  let step = {};

@ -84,13 +84,13 @@
    }}"
  >
    {#if invalid}
-      <Warning16 class="bx--progress__warning" title="{description}" />
+      <Warning class="bx--progress__warning" title="{description}" />
    {:else if current}
-      <Incomplete16 title="{description}" />
+      <Incomplete title="{description}" />
    {:else if complete}
-      <CheckmarkOutline16 title="{description}" />
+      <CheckmarkOutline title="{description}" />
    {:else}
-      <CircleDash16 title="{description}" />
+      <CircleDash title="{description}" />
    {/if}
    <slot props="{{ class: 'bx--progress-label' }}">
      <p class:bx--progress-label="{true}">{label}</p>
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@ -53,10 +53,11 @@
  export let labelText = "";

  /**
-   * Specify the icon to render
+   * Specify the icon to render.
+   * Defaults to `<Search />`
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let icon = Search16;
+  export let icon = IconSearch;

  /** Set an id for the input element */
  export let id = "ccs-" + Math.random().toString(36);
@ -65,9 +66,8 @@
  export let ref = null;

  import { createEventDispatcher } from "svelte";
-  import Close16 from "../icons/Close16.svelte";
-  import Close20 from "../icons/Close20.svelte";
-  import Search16 from "../icons/Search16.svelte";
+  import Close from "../icons/Close.svelte";
+  import IconSearch from "../icons/IconSearch.svelte";
  import SearchSkeleton from "./SearchSkeleton.svelte";

  const dispatch = createEventDispatcher();
@ -162,7 +162,7 @@
        dispatch('clear');
      }}"
    >
-      <svelte:component this="{size === 'xl' ? Close20 : Close16}" />
+      <svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
    </button>
  </div>
 {/if}
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@ -65,9 +65,9 @@

  import { createEventDispatcher, setContext, afterUpdate } from "svelte";
  import { writable } from "svelte/store";
-  import ChevronDown16 from "../icons/ChevronDown16.svelte";
-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
-  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";

  const dispatch = createEventDispatcher();
  const selectedValue = writable(selected);
@ -129,9 +129,9 @@
          >
            <slot />
          </select>
-          <ChevronDown16 class="bx--select__arrow" />
+          <ChevronDown class="bx--select__arrow" />
          {#if invalid}
-            <WarningFilled16 class="bx--select__invalid-icon" />
+            <WarningFilled class="bx--select__invalid-icon" />
          {/if}
        </div>
        {#if invalid}
@ -173,12 +173,12 @@
        >
          <slot />
        </select>
-        <ChevronDown16 class="bx--select__arrow" />
+        <ChevronDown class="bx--select__arrow" />
        {#if invalid}
-          <WarningFilled16 class="bx--select__invalid-icon" />
+          <WarningFilled class="bx--select__invalid-icon" />
        {/if}
        {#if !invalid && warn}
-          <WarningAltFilled16
+          <WarningAltFilled
            class="bx--select__invalid-icon bx--select__invalid-icon--warning"
          />
        {/if}
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@ -22,7 +22,7 @@

  import { createEventDispatcher, afterUpdate, setContext } from "svelte";
  import { writable, derived } from "svelte/store";
-  import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";

  const dispatch = createEventDispatcher();

@ -137,7 +137,7 @@
    >
      {#if currentTab}{currentTab.label}{/if}
    </a>
-    <ChevronDownGlyph aria-hidden="true" title="{iconDescription}" />
+    <ChevronDown aria-hidden="true" title="{iconDescription}" />
  </div>
  <ul
    role="tablist"
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@ -35,7 +35,7 @@
  export let id = "ccs-" + Math.random().toString(36);

  import { createEventDispatcher } from "svelte";
-  import Close16 from "../icons/Close16.svelte";
+  import Close from "../icons/Close.svelte";
  import TagSkeleton from "./TagSkeleton.svelte";

  const dispatch = createEventDispatcher();
@ -89,7 +89,7 @@
      on:mouseenter
      on:mouseleave
    >
-      <Close16 />
+      <Close />
    </button>
  </div>
 {:else if interactive}
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@ -53,7 +53,7 @@
  /** Obtain a reference to the textarea HTML element */
  export let ref = null;

-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";

  $: errorId = `error-${id}`;
 </script>
@ -90,7 +90,7 @@
    data-invalid="{invalid || undefined}"
  >
    {#if invalid}
-      <WarningFilled16 class="bx--text-area__invalid-icon" />
+      <WarningFilled class="bx--text-area__invalid-icon" />
    {/if}
    <textarea
      bind:this="{ref}"
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@ -81,10 +81,10 @@
  export let ref = null;

  import { getContext } from "svelte";
-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
-  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
-  import View16 from "../icons/View16.svelte";
-  import ViewOff16 from "../icons/ViewOff16.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import View from "../icons/View.svelte";
+  import ViewOff from "../icons/ViewOff.svelte";

  const ctx = getContext("Form");

@ -154,10 +154,10 @@
      data-invalid="{invalid || undefined}"
    >
      {#if invalid}
-        <WarningFilled16 class="bx--text-input__invalid-icon" />
+        <WarningFilled class="bx--text-input__invalid-icon" />
      {/if}
      {#if !invalid && warn}
-        <WarningAltFilled16
+        <WarningAltFilled
          class="bx--text-input__invalid-icon
            bx--text-input__invalid-icon--warning"
        />
@ -213,9 +213,9 @@
          </span>
        {/if}
        {#if type === "text"}
-          <ViewOff16 class="bx--icon-visibility-off" />
+          <ViewOff class="bx--icon-visibility-off" />
        {:else}
-          <View16 class="bx--icon-visibility-on" />
+          <View class="bx--icon-visibility-on" />
        {/if}
      </button>
    </div>
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@ -71,9 +71,9 @@
  export let readonly = false;

  import { createEventDispatcher, getContext } from "svelte";
-  import WarningFilled16 from "../icons/WarningFilled16.svelte";
-  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
-  import EditOff16 from "../icons/EditOff16.svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import EditOff from "../icons/EditOff.svelte";

  const ctx = getContext("Form");
  const dispatch = createEventDispatcher();
@ -163,16 +163,16 @@
      class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
    >
      {#if invalid}
-        <WarningFilled16 class="bx--text-input__invalid-icon" />
+        <WarningFilled class="bx--text-input__invalid-icon" />
      {/if}
      {#if !invalid && warn}
-        <WarningAltFilled16
+        <WarningAltFilled
          class="bx--text-input__invalid-icon
            bx--text-input__invalid-icon--warning"
        />
      {/if}
      {#if readonly}
-        <EditOff16 class="bx--text-input__readonly-icon" />
+        <EditOff class="bx--text-input__readonly-icon" />
      {/if}
      <input
        bind:this="{ref}"
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@ -33,7 +33,7 @@
  export let ref = null;

  import { afterUpdate } from "svelte";
-  import ChevronDown16 from "../icons/ChevronDown16.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";

  let refAbove = null;

@ -83,7 +83,7 @@
    </div>
    <div class:bx--tile__chevron="{true}">
      <span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
-      <ChevronDown16 />
+      <ChevronDown />
    </div>
    <div class:bx--tile-content="{true}">
      <span class:bx--tile-content__below-the-fold="{true}">
--- a/src/Tile/RadioTile.svelte
+++ b/src/Tile/RadioTile.svelte
@ -24,7 +24,7 @@
  export let name = "";

  import { getContext } from "svelte";
-  import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";

  const { add, update, selectedValue } = getContext("TileGroup");

@ -71,10 +71,7 @@
  on:mouseleave
 >
  <span class:bx--tile__checkmark="{true}">
-    <CheckmarkFilled16
-      aria-label="{iconDescription}"
-      title="{iconDescription}"
-    />
+    <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
  </span>
  <span class:bx--tile-content="{true}">
    <slot />
--- a/src/Tile/SelectableTile.svelte
+++ b/src/Tile/SelectableTile.svelte
@ -33,7 +33,7 @@
  export let ref = null;

  import { createEventDispatcher } from "svelte";
-  import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";

  const dispatch = createEventDispatcher();

@ -80,10 +80,7 @@
  }}"
 >
  <span class:bx--tile__checkmark="{true}">
-    <CheckmarkFilled16
-      aria-label="{iconDescription}"
-      title="{iconDescription}"
-    />
+    <CheckmarkFilled aria-label="{iconDescription}" title="{iconDescription}" />
  </span>
  <span class:bx--tile-content="{true}">
    <slot />
--- a/src/TimePicker/TimePickerSelect.svelte
+++ b/src/TimePicker/TimePickerSelect.svelte
@ -28,7 +28,7 @@

  import { setContext } from "svelte";
  import { writable } from "svelte/store";
-  import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";

  const selectedValue = writable(value);

@ -73,7 +73,7 @@
  >
    <slot />
  </select>
-  <ChevronDownGlyph
+  <ChevronDown
    aria-label="{iconDescription}"
    title="{iconDescription}"
    class="bx--select__arrow"
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@ -29,11 +29,11 @@
  export let hideIcon = false;

  /**
-   * Specify the icon to render for the tooltip button
-   * Icon size must be 16px (e.g., `Add16`, `Task16`)
+   * Specify the icon to render for the tooltip button.
+   * Default to `<Information />`
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let icon = Information16;
+  export let icon = Information;

  /** Specify the ARIA label for the tooltip button */
  export let iconDescription = "";
@ -70,7 +70,7 @@

  import { createEventDispatcher, afterUpdate, setContext } from "svelte";
  import { writable } from "svelte/store";
-  import Information16 from "../icons/Information16.svelte";
+  import Information from "../icons/Information.svelte";

  const dispatch = createEventDispatcher();
  const tooltipOpen = writable(open);
--- a/src/TreeView/TreeViewNodeList.svelte
+++ b/src/TreeView/TreeViewNodeList.svelte
@ -21,7 +21,7 @@
  export let icon = undefined;

  import { afterUpdate, getContext } from "svelte";
-  import CaretDown16 from "../icons/CaretDown16.svelte";
+  import CaretDown from "../icons/CaretDown.svelte";
  import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";

  let ref = null;
@ -142,7 +142,7 @@
          toggleNode(node);
        }}"
      >
-        <CaretDown16
+        <CaretDown
          class="bx--tree-parent-node__toggle-icon {expanded &&
            'bx--tree-parent-node__toggle-icon--expanded'}"
        />
--- a/src/UIShell/HamburgerMenu.svelte
+++ b/src/UIShell/HamburgerMenu.svelte
@ -9,24 +9,24 @@
  export let isOpen = false;

  /**
-   * Specify the icon to render for the closed state
-   * Defaults to `Menu20`
+   * Specify the icon to render for the closed state.
+   * Defaults to `<Menu size={20} />`
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let iconMenu = Menu20;
+  export let iconMenu = Menu;

  /**
-   * Specify the icon to render for the opened state
-   * Defaults to `Close20`
+   * Specify the icon to render for the opened state.
+   * Defaults to `<Close size={20} />`
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let iconClose = Close20;
+  export let iconClose = Close;

  /** Obtain a reference to the HTML button element */
  export let ref = null;

-  import Close20 from "../icons/Close20.svelte";
-  import Menu20 from "../icons/Menu20.svelte";
+  import Close from "../icons/Close.svelte";
+  import Menu from "../icons/Menu.svelte";
 </script>

 <button
@ -41,5 +41,5 @@
  on:click
  on:click="{() => (isOpen = !isOpen)}"
 >
-  <svelte:component this="{isOpen ? iconClose : iconMenu}" />
+  <svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
 </button>
--- a/src/UIShell/Header.svelte
+++ b/src/UIShell/Header.svelte
@ -47,21 +47,21 @@
  export let ref = null;

  /**
-   * Specify the icon to render for the closed state
-   * Defaults to `Menu20`
+   * Specify the icon to render for the closed state.
+   * Defaults to `<Menu size={20} />`
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let iconMenu = Menu20;
+  export let iconMenu = Menu;

  /**
-   * Specify the icon to render for the opened state
-   * Defaults to `Close20`
+   * Specify the icon to render for the opened state.
+   * Defaults to `<Close size={20} />`
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let iconClose = Close20;
+  export let iconClose = Close;

-  import Close20 from "../icons/Close20.svelte";
-  import Menu20 from "../icons/Menu20.svelte";
+  import Close from "../icons/Close.svelte";
+  import Menu from "../icons/Menu.svelte";
  import { shouldRenderHamburgerMenu } from "./navStore";
  import HamburgerMenu from "./HamburgerMenu.svelte";

--- a/src/UIShell/HeaderAction.svelte
+++ b/src/UIShell/HeaderAction.svelte
@ -3,16 +3,18 @@
  export let isOpen = false;

  /**
-   * Specify the icon to render
+   * Specify the icon to render when the action panel is closed.
+   * Defaults to `<Switcher size={20} />`
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let icon = AppSwitcher20;
+  export let icon = Switcher;

  /**
-   * Specify the icon to render when the action panel is open
+   * Specify the icon to render when the action panel is open.
+   * Defaults to `<Close size={20} />`
   * @type {typeof import("svelte").SvelteComponent}
   */
-  export let closeIcon = Close20;
+  export let closeIcon = Close;

  /**
   * Specify the text
@ -33,8 +35,8 @@

  import { createEventDispatcher } from "svelte";
  import { slide } from "svelte/transition";
-  import Close20 from "../icons/Close20.svelte";
-  import AppSwitcher20 from "../icons/AppSwitcher20.svelte";
+  import Close from "../icons/Close.svelte";
+  import Switcher from "../icons/Switcher.svelte";

  const dispatch = createEventDispatcher();

@ -65,11 +67,11 @@
 >
  {#if isOpen}
    <slot name="closeIcon">
-      <svelte:component this="{closeIcon}" />
+      <svelte:component this="{closeIcon}" size="{20}" />
    </slot>
  {:else}
    <slot name="icon">
-      <svelte:component this="{icon}" />
+      <svelte:component this="{icon}" size="{20}" />
    </slot>
  {/if}
  <slot name="text">
--- 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>

--- a/src/UIShell/HeaderNavMenu.svelte
+++ b/src/UIShell/HeaderNavMenu.svelte
@ -16,7 +16,7 @@

  import { setContext } from "svelte";
  import { writable } from "svelte/store";
-  import ChevronDown16 from "../icons/ChevronDown16.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";

  const selectedItems = writable({});

@ -92,7 +92,7 @@
    on:blur
  >
    {text}
-    <ChevronDown16 class="bx--header__menu-arrow" />
+    <ChevronDown class="bx--header__menu-arrow" />
  </a>
  <ul
    bind:this="{menuRef}"
--- a/src/UIShell/HeaderSearch.svelte
+++ b/src/UIShell/HeaderSearch.svelte
@ -27,8 +27,8 @@
  export let selectedResultIndex = 0;

  import { createEventDispatcher, tick } from "svelte";
-  import Close20 from "../icons/Close20.svelte";
-  import Search20 from "../icons/Search20.svelte";
+  import Close from "../icons/Close.svelte";
+  import IconSearch from "../icons/IconSearch.svelte";

  const dispatch = createEventDispatcher();

@ -72,7 +72,7 @@
        active = true;
      }}"
    >
-      <Search20 title="Search" />
+      <IconSearch size="{20}" title="Search" />
    </button>
    <input
      bind:this="{ref}"
@ -125,7 +125,7 @@
        dispatch('clear');
      }}"
    >
-      <Close20 title="Close" />
+      <Close size="{20}" title="Close" />
    </button>
  </div>

--- a/src/UIShell/SideNavMenu.svelte
+++ b/src/UIShell/SideNavMenu.svelte
@ -17,7 +17,7 @@
  /** Obtain a reference to the HTML button element */
  export let ref = null;

-  import ChevronDown16 from "../icons/ChevronDown16.svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";
 </script>

 <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@ -45,7 +45,7 @@
      class:bx--side-nav__icon--small="{true}"
      class:bx--side-nav__submenu-chevron="{true}"
    >
-      <svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" />
+      <svelte:component this="{ChevronDown}" title="Open Menu" tabindex="0" />
    </div>
  </button>
  <ul role="menu" class:bx--side-nav__menu="{true}">
--- a/src/icons/Add.svelte
+++ b/src/icons/Add.svelte
@ -0,0 +1,28 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
+  ></path>
+</svg>
--- a/src/icons/Add16.svelte
+++ b/src/icons/Add16.svelte
@ -1,51 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let id = undefined;
-  export let tabindex = undefined;
-  export let focusable = false;
-  export let title = undefined;
-  export let style = undefined;
-
-  $: ariaLabel = $$props["aria-label"];
-  $: ariaLabelledBy = $$props["aria-labelledby"];
-  $: labelled = ariaLabel || ariaLabelledBy || title;
-  $: attributes = {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-hidden": labelled ? undefined : true,
-    role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : focusable,
-    tabindex,
-  };
-</script>
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<svg
-  data-carbon-icon="Add16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 32 32"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
--- a/src/icons/AppSwitcher20.svelte
+++ b/src/icons/AppSwitcher20.svelte
@ -1,51 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let id = undefined;
-  export let tabindex = undefined;
-  export let focusable = false;
-  export let title = undefined;
-  export let style = undefined;
-
-  $: ariaLabel = $$props["aria-label"];
-  $: ariaLabelledBy = $$props["aria-labelledby"];
-  $: labelled = ariaLabel || ariaLabelledBy || title;
-  $: attributes = {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-hidden": labelled ? undefined : true,
-    role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : focusable,
-    tabindex,
-  };
-</script>
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<svg
-  data-carbon-icon="AppSwitcher20"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 32 32"
-  fill="currentColor"
-  width="20"
-  height="20"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
--- a/src/icons/ArrowUp.svelte
+++ b/src/icons/ArrowUp.svelte
@ -0,0 +1,28 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M16 4L6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4z"
+  ></path>
+</svg>
--- a/src/icons/ArrowUp20.svelte
+++ b/src/icons/ArrowUp20.svelte
@ -1,51 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let id = undefined;
-  export let tabindex = undefined;
-  export let focusable = false;
-  export let title = undefined;
-  export let style = undefined;
-
-  $: ariaLabel = $$props["aria-label"];
-  $: ariaLabelledBy = $$props["aria-labelledby"];
-  $: labelled = ariaLabel || ariaLabelledBy || title;
-  $: attributes = {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-hidden": labelled ? undefined : true,
-    role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : focusable,
-    tabindex,
-  };
-</script>
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<svg
-  data-carbon-icon="ArrowUp20"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 32 32"
-  fill="currentColor"
-  width="20"
-  height="20"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M16 4L6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
--- a/src/icons/ArrowsVertical.svelte
+++ b/src/icons/ArrowsVertical.svelte
@ -0,0 +1,28 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
+  ></path>
+</svg>
--- a/src/icons/ArrowsVertical20.svelte
+++ b/src/icons/ArrowsVertical20.svelte
@ -1,51 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let id = undefined;
-  export let tabindex = undefined;
-  export let focusable = false;
-  export let title = undefined;
-  export let style = undefined;
-
-  $: ariaLabel = $$props["aria-label"];
-  $: ariaLabelledBy = $$props["aria-labelledby"];
-  $: labelled = ariaLabel || ariaLabelledBy || title;
-  $: attributes = {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-hidden": labelled ? undefined : true,
-    role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : focusable,
-    tabindex,
-  };
-</script>
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<svg
-  data-carbon-icon="ArrowsVertical20"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 32 32"
-  fill="currentColor"
-  width="20"
-  height="20"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
--- a/src/icons/Calendar.svelte
+++ b/src/icons/Calendar.svelte
@ -0,0 +1,28 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20	V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"
+  ></path>
+</svg>
--- a/src/icons/Calendar16.svelte
+++ b/src/icons/Calendar16.svelte
@ -1,51 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let id = undefined;
-  export let tabindex = undefined;
-  export let focusable = false;
-  export let title = undefined;
-  export let style = undefined;
-
-  $: ariaLabel = $$props["aria-label"];
-  $: ariaLabelledBy = $$props["aria-labelledby"];
-  $: labelled = ariaLabel || ariaLabelledBy || title;
-  $: attributes = {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-hidden": labelled ? undefined : true,
-    role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : focusable,
-    tabindex,
-  };
-</script>
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<svg
-  data-carbon-icon="Calendar16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 32 32"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20	V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
--- a/src/icons/CaretDown.svelte
+++ b/src/icons/CaretDown.svelte
@ -0,0 +1,26 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M24 12L16 22 8 12z"></path>
+</svg>
--- a/src/icons/CaretDown16.svelte
+++ b/src/icons/CaretDown16.svelte
@ -1,49 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let id = undefined;
-  export let tabindex = undefined;
-  export let focusable = false;
-  export let title = undefined;
-  export let style = undefined;
-
-  $: ariaLabel = $$props["aria-label"];
-  $: ariaLabelledBy = $$props["aria-labelledby"];
-  $: labelled = ariaLabel || ariaLabelledBy || title;
-  $: attributes = {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-hidden": labelled ? undefined : true,
-    role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : focusable,
-    tabindex,
-  };
-</script>
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<svg
-  data-carbon-icon="CaretDown16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 32 32"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path d="M24 12L16 22 8 12z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
--- a/src/icons/CaretLeft.svelte
+++ b/src/icons/CaretLeft.svelte
@ -0,0 +1,26 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M20 24L10 16 20 8z"></path>
+</svg>
--- a/src/icons/CaretLeft16.svelte
+++ b/src/icons/CaretLeft16.svelte
@ -1,49 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let id = undefined;
-  export let tabindex = undefined;
-  export let focusable = false;
-  export let title = undefined;
-  export let style = undefined;
-
-  $: ariaLabel = $$props["aria-label"];
-  $: ariaLabelledBy = $$props["aria-labelledby"];
-  $: labelled = ariaLabel || ariaLabelledBy || title;
-  $: attributes = {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-hidden": labelled ? undefined : true,
-    role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : focusable,
-    tabindex,
-  };
-</script>
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<svg
-  data-carbon-icon="CaretLeft16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 32 32"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path d="M20 24L10 16 20 8z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
--- a/src/icons/CaretRight.svelte
+++ b/src/icons/CaretRight.svelte
@ -0,0 +1,26 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M12 8L22 16 12 24z"></path>
+</svg>
--- a/src/icons/CaretRight16.svelte
+++ b/src/icons/CaretRight16.svelte
@ -1,49 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let id = undefined;
-  export let tabindex = undefined;
-  export let focusable = false;
-  export let title = undefined;
-  export let style = undefined;
-
-  $: ariaLabel = $$props["aria-label"];
-  $: ariaLabelledBy = $$props["aria-labelledby"];
-  $: labelled = ariaLabel || ariaLabelledBy || title;
-  $: attributes = {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-hidden": labelled ? undefined : true,
-    role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : focusable,
-    tabindex,
-  };
-</script>
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<svg
-  data-carbon-icon="CaretRight16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 32 32"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path d="M12 8L22 16 12 24z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
--- a/src/icons/Checkmark.svelte
+++ b/src/icons/Checkmark.svelte
@ -0,0 +1,26 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path>
+</svg>
--- a/Show more
+++ b/Show more