From 0a28d64acf1ee7807520baf54c755dbbaa6038f8 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 3 Apr 2022 11:09:06 -0700
Subject: [PATCH] refactor(icons): use icons from carbon-icons-svelte@11

---
 src/Accordion/AccordionItem.svelte            |  7 +--
 src/Accordion/AccordionSkeleton.svelte        |  6 +-
 src/CodeSnippet/CodeSnippet.svelte            |  4 +-
 src/ComboBox/ComboBox.svelte                  | 12 ++--
 src/ComposedModal/ModalHeader.svelte          |  4 +-
 src/ContextMenu/ContextMenuOption.svelte      | 10 ++--
 src/CopyButton/CopyButton.svelte              |  4 +-
 src/DataTable/DataTable.svelte                |  6 +-
 src/DataTable/TableHeader.svelte              | 13 +++--
 src/DataTable/ToolbarMenu.svelte              |  4 +-
 src/DatePicker/DatePickerInput.svelte         | 14 ++---
 src/Dropdown/Dropdown.svelte                  |  8 +--
 src/FileUploader/Filename.svelte              | 12 ++--
 src/InlineLoading/InlineLoading.svelte        |  8 +--
 src/Link/OutboundLink.svelte                  |  4 +-
 src/ListBox/ListBoxMenuIcon.svelte            |  4 +-
 src/ListBox/ListBoxSelection.svelte           |  6 +-
 src/Modal/Modal.svelte                        |  8 ++-
 src/MultiSelect/MultiSelect.svelte            | 10 ++--
 src/Notification/NotificationButton.svelte    |  5 +-
 src/Notification/NotificationIcon.svelte      | 25 +++++----
 src/NumberInput/NumberInput.svelte            | 20 +++----
 src/OverflowMenu/OverflowMenu.svelte          |  8 +--
 src/Pagination/Pagination.svelte              |  8 +--
 src/PaginationNav/PaginationNav.svelte        |  8 +--
 src/PaginationNav/PaginationOverflow.svelte   |  4 +-
 src/ProgressIndicator/ProgressStep.svelte     | 16 +++---
 src/Search/Search.svelte                      |  9 ++-
 src/Select/Select.svelte                      | 16 +++---
 src/Tabs/Tabs.svelte                          |  4 +-
 src/Tag/Tag.svelte                            |  4 +-
 src/TextArea/TextArea.svelte                  |  4 +-
 src/TextInput/PasswordInput.svelte            | 16 +++---
 src/TextInput/TextInput.svelte                | 12 ++--
 src/Tile/ExpandableTile.svelte                |  4 +-
 src/Tile/RadioTile.svelte                     |  7 +--
 src/Tile/SelectableTile.svelte                |  7 +--
 src/TimePicker/TimePickerSelect.svelte        |  4 +-
 src/Tooltip/Tooltip.svelte                    |  8 +--
 src/TreeView/TreeViewNodeList.svelte          |  4 +-
 src/UIShell/HamburgerMenu.svelte              | 18 +++---
 src/UIShell/Header.svelte                     | 16 +++---
 src/UIShell/HeaderAction.svelte               | 18 +++---
 src/UIShell/HeaderNavMenu.svelte              |  4 +-
 src/UIShell/HeaderSearch.svelte               |  8 +--
 src/UIShell/SideNavMenu.svelte                |  4 +-
 src/icons/Add.svelte                          | 28 ++++++++++
 src/icons/Add16.svelte                        | 51 -----------------
 src/icons/AppSwitcher20.svelte                | 51 -----------------
 src/icons/ArrowUp.svelte                      | 28 ++++++++++
 src/icons/ArrowUp20.svelte                    | 51 -----------------
 src/icons/ArrowsVertical.svelte               | 28 ++++++++++
 src/icons/ArrowsVertical20.svelte             | 51 -----------------
 src/icons/Calendar.svelte                     | 28 ++++++++++
 src/icons/Calendar16.svelte                   | 51 -----------------
 src/icons/CaretDown.svelte                    | 26 +++++++++
 src/icons/CaretDown16.svelte                  | 49 ----------------
 src/icons/CaretLeft.svelte                    | 26 +++++++++
 src/icons/CaretLeft16.svelte                  | 49 ----------------
 src/icons/CaretRight.svelte                   | 26 +++++++++
 src/icons/CaretRight16.svelte                 | 49 ----------------
 src/icons/Checkmark.svelte                    | 26 +++++++++
 src/icons/Checkmark16.svelte                  | 49 ----------------
 src/icons/CheckmarkFilled.svelte              | 31 ++++++++++
 src/icons/CheckmarkFilled16.svelte            | 54 ------------------
 src/icons/CheckmarkFilled20.svelte            | 55 ------------------
 src/icons/CheckmarkOutline.svelte             | 30 ++++++++++
 src/icons/CheckmarkOutline16.svelte           | 53 ------------------
 src/icons/ChevronDown.svelte                  | 26 +++++++++
 src/icons/ChevronDown16.svelte                | 49 ----------------
 src/icons/ChevronDownGlyph.svelte             | 49 ----------------
 src/icons/ChevronRight.svelte                 | 26 +++++++++
 src/icons/ChevronRight16.svelte               | 49 ----------------
 ...{CircleDash16.svelte => CircleDash.svelte} | 41 +++-----------
 src/icons/Close.svelte                        | 28 ++++++++++
 src/icons/Close16.svelte                      | 51 -----------------
 src/icons/Close20.svelte                      | 51 -----------------
 src/icons/Copy.svelte                         | 28 ++++++++++
 src/icons/Copy16.svelte                       | 51 -----------------
 src/icons/EditOff.svelte                      | 28 ++++++++++
 src/icons/EditOff16.svelte                    | 51 -----------------
 src/icons/ErrorFilled.svelte                  | 32 +++++++++++
 src/icons/ErrorFilled16.svelte                | 55 ------------------
 src/icons/ErrorFilled20.svelte                | 54 ------------------
 src/icons/Incomplete.svelte                   | 28 ++++++++++
 src/icons/Information.svelte                  | 30 ++++++++++
 src/icons/Information16.svelte                | 53 ------------------
 src/icons/InformationFilled.svelte            | 31 ++++++++++
 src/icons/InformationFilled20.svelte          | 54 ------------------
 src/icons/InformationSquareFilled.svelte      | 31 ++++++++++
 src/icons/InformationSquareFilled20.svelte    | 54 ------------------
 src/icons/Launch.svelte                       | 30 ++++++++++
 src/icons/Launch16.svelte                     | 51 -----------------
 src/icons/Menu.svelte                         | 26 +++++++++
 src/icons/Menu20.svelte                       | 51 -----------------
 src/icons/OverflowMenuHorizontal.svelte       | 27 +++++++++
 src/icons/OverflowMenuHorizontal16.svelte     | 50 -----------------
 src/icons/OverflowMenuVertical.svelte         | 27 +++++++++
 src/icons/OverflowMenuVertical16.svelte       | 50 -----------------
 src/icons/Search.svelte                       | 28 ++++++++++
 src/icons/Search16.svelte                     | 51 -----------------
 src/icons/Search20.svelte                     | 51 -----------------
 src/icons/Settings.svelte                     | 30 ++++++++++
 src/icons/Subtract.svelte                     | 26 +++++++++
 src/icons/Subtract16.svelte                   | 49 ----------------
 src/icons/Switcher.svelte                     | 28 ++++++++++
 src/icons/{Settings16.svelte => View.svelte}  |  0
 src/icons/View16.svelte                       | 53 ------------------
 src/icons/ViewOff.svelte                      | 30 ++++++++++
 src/icons/ViewOff16.svelte                    | 53 ------------------
 src/icons/Warning.svelte                      | 29 ++++++++++
 src/icons/Warning16.svelte                    | 53 ------------------
 src/icons/WarningAltFilled.svelte             | 33 +++++++++++
 src/icons/WarningAltFilled16.svelte           | 56 -------------------
 src/icons/WarningAltFilled20.svelte           | 56 -------------------
 src/icons/WarningFilled.svelte                | 32 +++++++++++
 src/icons/WarningFilled16.svelte              | 54 ------------------
 src/icons/WarningFilled20.svelte              | 54 ------------------
 118 files changed, 1122 insertions(+), 2201 deletions(-)
 create mode 100644 src/icons/Add.svelte
 delete mode 100644 src/icons/Add16.svelte
 delete mode 100644 src/icons/AppSwitcher20.svelte
 create mode 100644 src/icons/ArrowUp.svelte
 delete mode 100644 src/icons/ArrowUp20.svelte
 create mode 100644 src/icons/ArrowsVertical.svelte
 delete mode 100644 src/icons/ArrowsVertical20.svelte
 create mode 100644 src/icons/Calendar.svelte
 delete mode 100644 src/icons/Calendar16.svelte
 create mode 100644 src/icons/CaretDown.svelte
 delete mode 100644 src/icons/CaretDown16.svelte
 create mode 100644 src/icons/CaretLeft.svelte
 delete mode 100644 src/icons/CaretLeft16.svelte
 create mode 100644 src/icons/CaretRight.svelte
 delete mode 100644 src/icons/CaretRight16.svelte
 create mode 100644 src/icons/Checkmark.svelte
 delete mode 100644 src/icons/Checkmark16.svelte
 create mode 100644 src/icons/CheckmarkFilled.svelte
 delete mode 100644 src/icons/CheckmarkFilled16.svelte
 delete mode 100644 src/icons/CheckmarkFilled20.svelte
 create mode 100644 src/icons/CheckmarkOutline.svelte
 delete mode 100644 src/icons/CheckmarkOutline16.svelte
 create mode 100644 src/icons/ChevronDown.svelte
 delete mode 100644 src/icons/ChevronDown16.svelte
 delete mode 100644 src/icons/ChevronDownGlyph.svelte
 create mode 100644 src/icons/ChevronRight.svelte
 delete mode 100644 src/icons/ChevronRight16.svelte
 rename src/icons/{CircleDash16.svelte => CircleDash.svelte} (55%)
 create mode 100644 src/icons/Close.svelte
 delete mode 100644 src/icons/Close16.svelte
 delete mode 100644 src/icons/Close20.svelte
 create mode 100644 src/icons/Copy.svelte
 delete mode 100644 src/icons/Copy16.svelte
 create mode 100644 src/icons/EditOff.svelte
 delete mode 100644 src/icons/EditOff16.svelte
 create mode 100644 src/icons/ErrorFilled.svelte
 delete mode 100644 src/icons/ErrorFilled16.svelte
 delete mode 100644 src/icons/ErrorFilled20.svelte
 create mode 100644 src/icons/Incomplete.svelte
 create mode 100644 src/icons/Information.svelte
 delete mode 100644 src/icons/Information16.svelte
 create mode 100644 src/icons/InformationFilled.svelte
 delete mode 100644 src/icons/InformationFilled20.svelte
 create mode 100644 src/icons/InformationSquareFilled.svelte
 delete mode 100644 src/icons/InformationSquareFilled20.svelte
 create mode 100644 src/icons/Launch.svelte
 delete mode 100644 src/icons/Launch16.svelte
 create mode 100644 src/icons/Menu.svelte
 delete mode 100644 src/icons/Menu20.svelte
 create mode 100644 src/icons/OverflowMenuHorizontal.svelte
 delete mode 100644 src/icons/OverflowMenuHorizontal16.svelte
 create mode 100644 src/icons/OverflowMenuVertical.svelte
 delete mode 100644 src/icons/OverflowMenuVertical16.svelte
 create mode 100644 src/icons/Search.svelte
 delete mode 100644 src/icons/Search16.svelte
 delete mode 100644 src/icons/Search20.svelte
 create mode 100644 src/icons/Settings.svelte
 create mode 100644 src/icons/Subtract.svelte
 delete mode 100644 src/icons/Subtract16.svelte
 create mode 100644 src/icons/Switcher.svelte
 rename src/icons/{Settings16.svelte => View.svelte} (100%)
 delete mode 100644 src/icons/View16.svelte
 create mode 100644 src/icons/ViewOff.svelte
 delete mode 100644 src/icons/ViewOff16.svelte
 create mode 100644 src/icons/Warning.svelte
 delete mode 100644 src/icons/Warning16.svelte
 create mode 100644 src/icons/WarningAltFilled.svelte
 delete mode 100644 src/icons/WarningAltFilled16.svelte
 delete mode 100644 src/icons/WarningAltFilled20.svelte
 create mode 100644 src/icons/WarningFilled.svelte
 delete mode 100644 src/icons/WarningFilled16.svelte
 delete mode 100644 src/icons/WarningFilled20.svelte

diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index da532cfb..e2f96cd2 100644
--- 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>
diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte
index bd798afc..770f0f44 100644
--- 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>
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 1ab20730..23b569e8 100644
--- 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}"
         />
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index ae0967f8..8c56ef8b 100644
--- 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}
diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte
index e2370bef..67d346ae 100644
--- 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>
diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index d67caa80..4a5f9800 100644
--- 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
diff --git a/src/CopyButton/CopyButton.svelte b/src/CopyButton/CopyButton.svelte
index 0738ed14..5891368e 100644
--- 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}"
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 1585656d..91509ceb 100644
--- 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>
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index 8eab24d9..d9ad236c 100644
--- 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"
       />
diff --git a/src/DataTable/ToolbarMenu.svelte b/src/DataTable/ToolbarMenu.svelte
index 1dfbc27b..a769498c 100644
--- 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
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index 2d6d8739..2a2fd815 100644
--- 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}
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 113806b7..95f04c24 100644
--- 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}
diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte
index 4e351c03..b8b21b7b 100644
--- 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"
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index dfbec844..94cf3723 100644
--- 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}"
       />
diff --git a/src/Link/OutboundLink.svelte b/src/Link/OutboundLink.svelte
index 124324d8..16172910 100644
--- 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>
diff --git a/src/ListBox/ListBoxMenuIcon.svelte b/src/ListBox/ListBoxMenuIcon.svelte
index b6f82f2b..0ed8f211 100644
--- 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>
diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index 3ef0701d..93e755ec 100644
--- 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}
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 88beab80..643b2bc4 100644
--- 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"
           />
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index c156f88a..05fbd066 100644
--- 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
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index db65618b..63e1d3b9 100644
--- 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"
   />
diff --git a/src/Notification/NotificationIcon.svelte b/src/Notification/NotificationIcon.svelte
index cc48d177..8e2d61b6 100644
--- 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"
 />
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index b17ca9c7..7504a32b 100644
--- 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>
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index e4fbf7db..e9dd13cc 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -34,7 +34,7 @@
    * Specify the icon to render
    * @type {typeof import("svelte").SvelteComponent}
    */
-  export let icon = OverflowMenuVertical16;
+  export let icon = OverflowMenuVertical;
 
   /**
    * Specify the icon class
@@ -61,8 +61,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 +75,7 @@
   let onMountAfterUpdate = true;
 
   $: if (ctxBreadcrumbItem) {
-    icon = OverflowMenuHorizontal16;
+    icon = OverflowMenuHorizontal;
   }
 
   setContext("OverflowMenu", {
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index d0d31795..5738ae1c 100644
--- 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
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index c5fd5004..f49569d7 100644
--- 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;
diff --git a/src/PaginationNav/PaginationOverflow.svelte b/src/PaginationNav/PaginationOverflow.svelte
index 67d8d1db..3bc6ceed 100644
--- 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>
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index e4ef4ba4..1366c627 100644
--- 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>
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index 9a768a53..0608b682 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -56,7 +56,7 @@
    * Specify the icon to render
    * @type {typeof import("svelte").SvelteComponent}
    */
-  export let icon = Search16;
+  export let icon = Search;
 
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
@@ -65,9 +65,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 Search from "../icons/Search.svelte";
   import SearchSkeleton from "./SearchSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
@@ -162,7 +161,7 @@
         dispatch('clear');
       }}"
     >
-      <svelte:component this="{size === 'xl' ? Close20 : Close16}" />
+      <svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
     </button>
   </div>
 {/if}
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index 4be2e18b..d20504df 100644
--- 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}
diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
index b7b885b0..b04713f1 100644
--- 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"
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index 3862b1a6..b22bc65b 100644
--- 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}
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index 7f109e2e..fba2b8e4 100644
--- 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}"
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index 9c00dae9..15d911e5 100644
--- 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>
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index af2816d9..fc8a9aa4 100644
--- 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}"
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index 1b80d759..14b10297 100644
--- 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}">
diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index 2738bc03..c672711f 100644
--- 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 />
diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte
index 1a394b15..cd0eb86f 100644
--- 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 />
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte
index 3ce0a6c4..c3503909 100644
--- 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"
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index 37ed9b83..2bdc3106 100644
--- 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);
diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte
index c6171217..b30fdd67 100644
--- 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'}"
         />
diff --git a/src/UIShell/HamburgerMenu.svelte b/src/UIShell/HamburgerMenu.svelte
index 7e53049a..fb26c778 100644
--- 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>
diff --git a/src/UIShell/Header.svelte b/src/UIShell/Header.svelte
index 62eae55b..ca4aca4c 100644
--- 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";
 
diff --git a/src/UIShell/HeaderAction.svelte b/src/UIShell/HeaderAction.svelte
index f918e6f4..da47c6da 100644
--- 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">
diff --git a/src/UIShell/HeaderNavMenu.svelte b/src/UIShell/HeaderNavMenu.svelte
index eab88b54..7e847422 100644
--- 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}"
diff --git a/src/UIShell/HeaderSearch.svelte b/src/UIShell/HeaderSearch.svelte
index e7d7a26c..4802bb62 100644
--- 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 Search from "../icons/Search.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -72,7 +72,7 @@
         active = true;
       }}"
     >
-      <Search20 title="Search" />
+      <Search 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>
 
diff --git a/src/UIShell/SideNavMenu.svelte b/src/UIShell/SideNavMenu.svelte
index b5621330..68ac85f2 100644
--- 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}">
diff --git a/src/icons/Add.svelte b/src/icons/Add.svelte
new file mode 100644
index 00000000..6685769d
--- /dev/null
+++ 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>
diff --git a/src/icons/Add16.svelte b/src/icons/Add16.svelte
deleted file mode 100644
index a9e70a19..00000000
--- a/src/icons/Add16.svelte
+++ /dev/null
@@ -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>
diff --git a/src/icons/AppSwitcher20.svelte b/src/icons/AppSwitcher20.svelte
deleted file mode 100644
index 15797db5..00000000
--- a/src/icons/AppSwitcher20.svelte
+++ /dev/null
@@ -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>
diff --git a/src/icons/ArrowUp.svelte b/src/icons/ArrowUp.svelte
new file mode 100644
index 00000000..04f928f9
--- /dev/null
+++ 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>
diff --git a/src/icons/ArrowUp20.svelte b/src/icons/ArrowUp20.svelte
deleted file mode 100644
index dd3a22c1..00000000
--- a/src/icons/ArrowUp20.svelte
+++ /dev/null
@@ -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>
diff --git a/src/icons/ArrowsVertical.svelte b/src/icons/ArrowsVertical.svelte
new file mode 100644
index 00000000..00f42e3f
--- /dev/null
+++ 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>
diff --git a/src/icons/ArrowsVertical20.svelte b/src/icons/ArrowsVertical20.svelte
deleted file mode 100644
index b2e22446..00000000
--- a/src/icons/ArrowsVertical20.svelte
+++ /dev/null
@@ -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>
diff --git a/src/icons/Calendar.svelte b/src/icons/Calendar.svelte
new file mode 100644
index 00000000..650feb03
--- /dev/null
+++ 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>
diff --git a/src/icons/Calendar16.svelte b/src/icons/Calendar16.svelte
deleted file mode 100644
index 0ca68869..00000000
--- a/src/icons/Calendar16.svelte
+++ /dev/null
@@ -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>
diff --git a/src/icons/CaretDown.svelte b/src/icons/CaretDown.svelte
new file mode 100644
index 00000000..18005294
--- /dev/null
+++ 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="M8 0L4 4 0 0z"></path>
+</svg>/svg>
diff --git a/src/icons/CaretDown16.svelte b/src/icons/CaretDown16.svelte
deleted file mode 100644
index 0f7db883..00000000
--- a/src/icons/CaretDown16.svelte
+++ /dev/null
@@ -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>
diff --git a/src/icons/CaretLeft.svelte b/src/icons/CaretLeft.svelte
new file mode 100644
index 00000000..6492d15a
--- /dev/null
+++ 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="M5 8L0 4 5 0z"></path>
+</svg>/svg>
diff --git a/src/icons/CaretLeft16.svelte b/src/icons/CaretLeft16.svelte
deleted file mode 100644
index e900d052..00000000
--- a/src/icons/CaretLeft16.svelte
+++ /dev/null
@@ -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>
diff --git a/src/icons/CaretRight.svelte b/src/icons/CaretRight.svelte
new file mode 100644
index 00000000..df2fe384
--- /dev/null
+++ 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="M0 0L5 4 0 8z"></path>
+</svg>/svg>
diff --git a/src/icons/CaretRight16.svelte b/src/icons/CaretRight16.svelte
deleted file mode 100644
index 6f6d9b30..00000000
--- a/src/icons/CaretRight16.svelte
+++ /dev/null
@@ -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>
diff --git a/src/icons/Checkmark.svelte b/src/icons/Checkmark.svelte
new file mode 100644
index 00000000..50181d20
--- /dev/null
+++ 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>
diff --git a/src/icons/Checkmark16.svelte b/src/icons/Checkmark16.svelte
deleted file mode 100644
index d8aa5223..00000000
--- a/src/icons/Checkmark16.svelte
+++ /dev/null
@@ -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="Checkmark16"
-  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="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/CheckmarkFilled.svelte b/src/icons/CheckmarkFilled.svelte
new file mode 100644
index 00000000..79892183
--- /dev/null
+++ b/src/icons/CheckmarkFilled.svelte
@@ -0,0 +1,31 @@
+<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,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"
+  ></path><path
+    fill="none"
+    d="M14 21.591L9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591z"
+    data-icon-path="inner-path"></path>
+</svg>
diff --git a/src/icons/CheckmarkFilled16.svelte b/src/icons/CheckmarkFilled16.svelte
deleted file mode 100644
index 17f6ac5b..00000000
--- a/src/icons/CheckmarkFilled16.svelte
+++ /dev/null
@@ -1,54 +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="CheckmarkFilled16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"
-  ></path><path
-    d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"
-    data-icon-path="inner-path"
-    opacity="0"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/CheckmarkFilled20.svelte b/src/icons/CheckmarkFilled20.svelte
deleted file mode 100644
index 57828c06..00000000
--- a/src/icons/CheckmarkFilled20.svelte
+++ /dev/null
@@ -1,55 +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="CheckmarkFilled20"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 20 20"
-  fill="currentColor"
-  width="20"
-  height="20"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M10,1c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4,9-9S15,1,10,1z M8.7,13.5l-3.2-3.2l1-1l2.2,2.2l4.8-4.8l1,1L8.7,13.5z"
-  ></path><path
-    fill="none"
-    d="M8.7,13.5l-3.2-3.2l1-1l2.2,2.2l4.8-4.8l1,1L8.7,13.5z"
-    data-icon-path="inner-path"
-    opacity="0"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/CheckmarkOutline.svelte b/src/icons/CheckmarkOutline.svelte
new file mode 100644
index 00000000..66eddcb9
--- /dev/null
+++ b/src/icons/CheckmarkOutline.svelte
@@ -0,0 +1,30 @@
+<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="M14 21.414L9 16.413 10.413 15 14 18.586 21.585 11 23 12.415 14 21.414z"
+  ></path><path
+    d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
+  ></path>
+</svg>
diff --git a/src/icons/CheckmarkOutline16.svelte b/src/icons/CheckmarkOutline16.svelte
deleted file mode 100644
index 9d528ba8..00000000
--- a/src/icons/CheckmarkOutline16.svelte
+++ /dev/null
@@ -1,53 +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="CheckmarkOutline16"
-  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="M14 21.414L9 16.413 10.413 15 14 18.586 21.585 11 23 12.415 14 21.414z"
-  ></path><path
-    d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/ChevronDown.svelte b/src/icons/ChevronDown.svelte
new file mode 100644
index 00000000..73f0b039
--- /dev/null
+++ b/src/icons/ChevronDown.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 16 16"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path>
+</svg>
diff --git a/src/icons/ChevronDown16.svelte b/src/icons/ChevronDown16.svelte
deleted file mode 100644
index 65923e07..00000000
--- a/src/icons/ChevronDown16.svelte
+++ /dev/null
@@ -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="ChevronDown16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/ChevronDownGlyph.svelte b/src/icons/ChevronDownGlyph.svelte
deleted file mode 100644
index b3497f74..00000000
--- a/src/icons/ChevronDownGlyph.svelte
+++ /dev/null
@@ -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="ChevronDownGlyph"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 10 6"
-  fill="currentColor"
-  width="10"
-  height="6"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/ChevronRight.svelte b/src/icons/ChevronRight.svelte
new file mode 100644
index 00000000..e03f34d5
--- /dev/null
+++ b/src/icons/ChevronRight.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 16 16"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width="{size}"
+  height="{size}"
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>
+</svg>
diff --git a/src/icons/ChevronRight16.svelte b/src/icons/ChevronRight16.svelte
deleted file mode 100644
index 513dac00..00000000
--- a/src/icons/ChevronRight16.svelte
+++ /dev/null
@@ -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="ChevronRight16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/CircleDash16.svelte b/src/icons/CircleDash.svelte
similarity index 55%
rename from src/icons/CircleDash16.svelte
rename to src/icons/CircleDash.svelte
index a214819b..d9a6f256 100644
--- a/src/icons/CircleDash16.svelte
+++ b/src/icons/CircleDash.svelte
@@ -1,51 +1,28 @@
 <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;
+  export let size = 16;
 
-  $: ariaLabel = $$props["aria-label"];
-  $: ariaLabelledBy = $$props["aria-labelledby"];
-  $: labelled = ariaLabel || ariaLabelledBy || title;
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
   $: attributes = {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
     "aria-hidden": labelled ? undefined : true,
     role: labelled ? "img" : undefined,
-    focusable: tabindex === "0" ? true : focusable,
-    tabindex,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
   };
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <svg
-  data-carbon-icon="CircleDash16"
-  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}"
+  width="{size}"
+  height="{size}"
   {...attributes}
+  {...$$restProps}
 >
+  {#if title}<title>{title}</title>{/if}
   <path
     d="M7.7 4.7a14.7 14.7 0 00-3 3.1L6.3 9A13.26 13.26 0 018.9 6.3zM4.6 12.3l-1.9-.6A12.51 12.51 0 002 16H4A11.48 11.48 0 014.6 12.3zM2.7 20.4a14.4 14.4 0 002 3.9l1.6-1.2a12.89 12.89 0 01-1.7-3.3zM7.8 27.3a14.4 14.4 0 003.9 2l.6-1.9A12.89 12.89 0 019 25.7zM11.7 2.7l.6 1.9A11.48 11.48 0 0116 4V2A12.51 12.51 0 0011.7 2.7zM24.2 27.3a15.18 15.18 0 003.1-3.1L25.7 23A11.53 11.53 0 0123 25.7zM27.4 19.7l1.9.6A15.47 15.47 0 0030 16H28A11.48 11.48 0 0127.4 19.7zM29.2 11.6a14.4 14.4 0 00-2-3.9L25.6 8.9a12.89 12.89 0 011.7 3.3zM24.1 4.6a14.4 14.4 0 00-3.9-2l-.6 1.9a12.89 12.89 0 013.3 1.7zM20.3 29.3l-.6-1.9A11.48 11.48 0 0116 28v2A21.42 21.42 0 0020.3 29.3z"
   ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
 </svg>
diff --git a/src/icons/Close.svelte b/src/icons/Close.svelte
new file mode 100644
index 00000000..3c1cdc35
--- /dev/null
+++ b/src/icons/Close.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="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+  ></path>
+</svg>
diff --git a/src/icons/Close16.svelte b/src/icons/Close16.svelte
deleted file mode 100644
index 4b5be454..00000000
--- a/src/icons/Close16.svelte
+++ /dev/null
@@ -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="Close16"
-  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 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Close20.svelte b/src/icons/Close20.svelte
deleted file mode 100644
index 6c034c16..00000000
--- a/src/icons/Close20.svelte
+++ /dev/null
@@ -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="Close20"
-  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="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Copy.svelte b/src/icons/Copy.svelte
new file mode 100644
index 00000000..4407ed6a
--- /dev/null
+++ b/src/icons/Copy.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="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
+  ></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path>
+</svg>
diff --git a/src/icons/Copy16.svelte b/src/icons/Copy16.svelte
deleted file mode 100644
index 39b354f2..00000000
--- a/src/icons/Copy16.svelte
+++ /dev/null
@@ -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="Copy16"
-  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="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
-  ></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/EditOff.svelte b/src/icons/EditOff.svelte
new file mode 100644
index 00000000..ef7c2c07
--- /dev/null
+++ b/src/icons/EditOff.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="M30 28.6L3.4 2 2 3.4l10.1 10.1L4 21.6V28h6.4l8.1-8.1L28.6 30 30 28.6zM9.6 26H6v-3.6l7.5-7.5 3.6 3.6L9.6 26zM29.4 6.2L29.4 6.2l-3.6-3.6c-.8-.8-2-.8-2.8 0l0 0 0 0-8 8 1.4 1.4L20 8.4l3.6 3.6L20 15.6l1.4 1.4 8-8C30.2 8.2 30.2 7 29.4 6.2L29.4 6.2zM25 10.6L21.4 7l3-3L28 7.6 25 10.6z"
+  ></path>
+</svg>
diff --git a/src/icons/EditOff16.svelte b/src/icons/EditOff16.svelte
deleted file mode 100644
index 36e11ed3..00000000
--- a/src/icons/EditOff16.svelte
+++ /dev/null
@@ -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="EditOff16"
-  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="M30 28.6L3.4 2 2 3.4l10.1 10.1L4 21.6V28h6.4l8.1-8.1L28.6 30 30 28.6zM9.6 26H6v-3.6l7.5-7.5 3.6 3.6L9.6 26zM29.4 6.2L29.4 6.2l-3.6-3.6c-.8-.8-2-.8-2.8 0l0 0 0 0-8 8 1.4 1.4L20 8.4l3.6 3.6L20 15.6l1.4 1.4 8-8C30.2 8.2 30.2 7 29.4 6.2L29.4 6.2zM25 10.6L21.4 7l3-3L28 7.6 25 10.6z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/ErrorFilled.svelte b/src/icons/ErrorFilled.svelte
new file mode 100644
index 00000000..b64cbcf4
--- /dev/null
+++ b/src/icons/ErrorFilled.svelte
@@ -0,0 +1,32 @@
+<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
+    fill="none"
+    d="M14.9 7.2H17.1V24.799H14.9z"
+    data-icon-path="inner-path"
+    transform="rotate(-45 16 16)"></path><path
+    d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"
+  ></path>
+</svg>
diff --git a/src/icons/ErrorFilled16.svelte b/src/icons/ErrorFilled16.svelte
deleted file mode 100644
index 3068a23a..00000000
--- a/src/icons/ErrorFilled16.svelte
+++ /dev/null
@@ -1,55 +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="ErrorFilled16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z"
-  ></path><path
-    fill="none"
-    d="M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z"
-    data-icon-path="inner-path"
-    opacity="0"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/ErrorFilled20.svelte b/src/icons/ErrorFilled20.svelte
deleted file mode 100644
index a9b23330..00000000
--- a/src/icons/ErrorFilled20.svelte
+++ /dev/null
@@ -1,54 +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="ErrorFilled20"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 20 20"
-  fill="currentColor"
-  width="20"
-  height="20"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
-  ></path><path
-    d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
-    data-icon-path="inner-path"
-    opacity="0"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Incomplete.svelte b/src/icons/Incomplete.svelte
new file mode 100644
index 00000000..bfca384d
--- /dev/null
+++ b/src/icons/Incomplete.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="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"
+  ></path>
+</svg>
diff --git a/src/icons/Information.svelte b/src/icons/Information.svelte
new file mode 100644
index 00000000..f14233db
--- /dev/null
+++ b/src/icons/Information.svelte
@@ -0,0 +1,30 @@
+<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 22L17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22zM16 8a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 8z"
+  ></path><path
+    d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"
+  ></path>
+</svg>
diff --git a/src/icons/Information16.svelte b/src/icons/Information16.svelte
deleted file mode 100644
index 3480b862..00000000
--- a/src/icons/Information16.svelte
+++ /dev/null
@@ -1,53 +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="Information16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"
-  ></path><path
-    d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/InformationFilled.svelte b/src/icons/InformationFilled.svelte
new file mode 100644
index 00000000..c29c9a1b
--- /dev/null
+++ b/src/icons/InformationFilled.svelte
@@ -0,0 +1,31 @@
+<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
+    fill="none"
+    d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
+    data-icon-path="inner-path"></path><path
+    d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
+  ></path>
+</svg>
diff --git a/src/icons/InformationFilled20.svelte b/src/icons/InformationFilled20.svelte
deleted file mode 100644
index e5a7add4..00000000
--- a/src/icons/InformationFilled20.svelte
+++ /dev/null
@@ -1,54 +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="InformationFilled20"
-  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
-    fill="none"
-    d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
-    data-icon-path="inner-path"></path><path
-    d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/InformationSquareFilled.svelte b/src/icons/InformationSquareFilled.svelte
new file mode 100644
index 00000000..f682cfef
--- /dev/null
+++ b/src/icons/InformationSquareFilled.svelte
@@ -0,0 +1,31 @@
+<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
+    fill="none"
+    d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
+    data-icon-path="inner-path"></path><path
+    d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
+  ></path>
+</svg>
diff --git a/src/icons/InformationSquareFilled20.svelte b/src/icons/InformationSquareFilled20.svelte
deleted file mode 100644
index a3466afc..00000000
--- a/src/icons/InformationSquareFilled20.svelte
+++ /dev/null
@@ -1,54 +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="InformationSquareFilled20"
-  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
-    fill="none"
-    d="M16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,13.875H17.125v-8H13v2.25h1.875v5.75H12v2.25h8Z"
-    data-icon-path="inner-path"></path><path
-    d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM16,8a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Launch.svelte b/src/icons/Launch.svelte
new file mode 100644
index 00000000..89133eb2
--- /dev/null
+++ b/src/icons/Launch.svelte
@@ -0,0 +1,30 @@
+<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,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
+  ></path><path
+    d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
+  ></path>
+</svg>
diff --git a/src/icons/Launch16.svelte b/src/icons/Launch16.svelte
deleted file mode 100644
index 8cd06be9..00000000
--- a/src/icons/Launch16.svelte
+++ /dev/null
@@ -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="Launch16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M13,14H3c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5v1H3v10h10V8h1v5C14,13.6,13.6,14,13,14z"
-  ></path><path d="M10 1L10 2 13.3 2 9 6.3 9.7 7 14 2.7 14 6 15 6 15 1z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Menu.svelte b/src/icons/Menu.svelte
new file mode 100644
index 00000000..b8c3fc29
--- /dev/null
+++ b/src/icons/Menu.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="M4 6H28V8H4zM4 24H28V26H4zM4 12H28V14H4zM4 18H28V20H4z"></path>
+</svg>
diff --git a/src/icons/Menu20.svelte b/src/icons/Menu20.svelte
deleted file mode 100644
index f3114c8d..00000000
--- a/src/icons/Menu20.svelte
+++ /dev/null
@@ -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="Menu20"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 20 20"
-  fill="currentColor"
-  width="20"
-  height="20"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/OverflowMenuHorizontal.svelte b/src/icons/OverflowMenuHorizontal.svelte
new file mode 100644
index 00000000..6a6b79a8
--- /dev/null
+++ b/src/icons/OverflowMenuHorizontal.svelte
@@ -0,0 +1,27 @@
+<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}
+  <circle cx="8" cy="16" r="2"></circle><circle cx="16" cy="16" r="2"
+  ></circle><circle cx="24" cy="16" r="2"></circle>
+</svg>
diff --git a/src/icons/OverflowMenuHorizontal16.svelte b/src/icons/OverflowMenuHorizontal16.svelte
deleted file mode 100644
index 6be5c0a7..00000000
--- a/src/icons/OverflowMenuHorizontal16.svelte
+++ /dev/null
@@ -1,50 +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="OverflowMenuHorizontal16"
-  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}
->
-  <circle cx="8" cy="16" r="2"></circle><circle cx="16" cy="16" r="2"
-  ></circle><circle cx="24" cy="16" r="2"></circle>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/OverflowMenuVertical.svelte b/src/icons/OverflowMenuVertical.svelte
new file mode 100644
index 00000000..2d8e1146
--- /dev/null
+++ b/src/icons/OverflowMenuVertical.svelte
@@ -0,0 +1,27 @@
+<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}
+  <circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"
+  ></circle><circle cx="16" cy="24" r="2"></circle>
+</svg>
diff --git a/src/icons/OverflowMenuVertical16.svelte b/src/icons/OverflowMenuVertical16.svelte
deleted file mode 100644
index 4e58797f..00000000
--- a/src/icons/OverflowMenuVertical16.svelte
+++ /dev/null
@@ -1,50 +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="OverflowMenuVertical16"
-  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}
->
-  <circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"
-  ></circle><circle cx="16" cy="24" r="2"></circle>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Search.svelte b/src/icons/Search.svelte
new file mode 100644
index 00000000..f008ae98
--- /dev/null
+++ b/src/icons/Search.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="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
+  ></path>
+</svg>
diff --git a/src/icons/Search16.svelte b/src/icons/Search16.svelte
deleted file mode 100644
index 10f96e60..00000000
--- a/src/icons/Search16.svelte
+++ /dev/null
@@ -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="Search16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Search20.svelte b/src/icons/Search20.svelte
deleted file mode 100644
index 222e8d08..00000000
--- a/src/icons/Search20.svelte
+++ /dev/null
@@ -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="Search20"
-  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="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Settings.svelte b/src/icons/Settings.svelte
new file mode 100644
index 00000000..d31d44bb
--- /dev/null
+++ b/src/icons/Settings.svelte
@@ -0,0 +1,30 @@
+<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,16.76c0-.25,0-.5,0-.76s0-.51,0-.77l1.92-1.68A2,2,0,0,0,29.3,11L26.94,7a2,2,0,0,0-1.73-1,2,2,0,0,0-.64.1l-2.43.82a11.35,11.35,0,0,0-1.31-.75l-.51-2.52a2,2,0,0,0-2-1.61H13.64a2,2,0,0,0-2,1.61l-.51,2.52a11.48,11.48,0,0,0-1.32.75L7.43,6.06A2,2,0,0,0,6.79,6,2,2,0,0,0,5.06,7L2.7,11a2,2,0,0,0,.41,2.51L5,15.24c0,.25,0,.5,0,.76s0,.51,0,.77L3.11,18.45A2,2,0,0,0,2.7,21L5.06,25a2,2,0,0,0,1.73,1,2,2,0,0,0,.64-.1l2.43-.82a11.35,11.35,0,0,0,1.31.75l.51,2.52a2,2,0,0,0,2,1.61h4.72a2,2,0,0,0,2-1.61l.51-2.52a11.48,11.48,0,0,0,1.32-.75l2.42.82a2,2,0,0,0,.64.1,2,2,0,0,0,1.73-1L29.3,21a2,2,0,0,0-.41-2.51ZM25.21,24l-3.43-1.16a8.86,8.86,0,0,1-2.71,1.57L18.36,28H13.64l-.71-3.55a9.36,9.36,0,0,1-2.7-1.57L6.79,24,4.43,20l2.72-2.4a8.9,8.9,0,0,1,0-3.13L4.43,12,6.79,8l3.43,1.16a8.86,8.86,0,0,1,2.71-1.57L13.64,4h4.72l.71,3.55a9.36,9.36,0,0,1,2.7,1.57L25.21,8,27.57,12l-2.72,2.4a8.9,8.9,0,0,1,0,3.13L27.57,20Z"
+  ></path><path
+    d="M16,22a6,6,0,1,1,6-6A5.94,5.94,0,0,1,16,22Zm0-10a3.91,3.91,0,0,0-4,4,3.91,3.91,0,0,0,4,4,3.91,3.91,0,0,0,4-4A3.91,3.91,0,0,0,16,12Z"
+  ></path>
+</svg>
diff --git a/src/icons/Subtract.svelte b/src/icons/Subtract.svelte
new file mode 100644
index 00000000..85192cab
--- /dev/null
+++ b/src/icons/Subtract.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="M8 15H24V17H8z"></path>
+</svg>
diff --git a/src/icons/Subtract16.svelte b/src/icons/Subtract16.svelte
deleted file mode 100644
index dfc6a297..00000000
--- a/src/icons/Subtract16.svelte
+++ /dev/null
@@ -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="Subtract16"
-  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="M8 15H24V17H8z"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Switcher.svelte b/src/icons/Switcher.svelte
new file mode 100644
index 00000000..9b503fff
--- /dev/null
+++ b/src/icons/Switcher.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="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"
+  ></path>
+</svg>
diff --git a/src/icons/Settings16.svelte b/src/icons/View.svelte
similarity index 100%
rename from src/icons/Settings16.svelte
rename to src/icons/View.svelte
diff --git a/src/icons/View16.svelte b/src/icons/View16.svelte
deleted file mode 100644
index a0e37e3e..00000000
--- a/src/icons/View16.svelte
+++ /dev/null
@@ -1,53 +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="View16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M15.5,7.8C14.3,4.7,11.3,2.6,8,2.5C4.7,2.6,1.7,4.7,0.5,7.8c0,0.1,0,0.2,0,0.3c1.2,3.1,4.1,5.2,7.5,5.3	c3.3-0.1,6.3-2.2,7.5-5.3C15.5,8.1,15.5,7.9,15.5,7.8z M8,12.5c-2.7,0-5.4-2-6.5-4.5c1-2.5,3.8-4.5,6.5-4.5s5.4,2,6.5,4.5	C13.4,10.5,10.6,12.5,8,12.5z"
-  ></path><path
-    d="M8,5C6.3,5,5,6.3,5,8s1.3,3,3,3s3-1.3,3-3S9.7,5,8,5z M8,10c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S9.1,10,8,10z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/ViewOff.svelte b/src/icons/ViewOff.svelte
new file mode 100644
index 00000000..c12b3d9b
--- /dev/null
+++ b/src/icons/ViewOff.svelte
@@ -0,0 +1,30 @@
+<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="M5.24,22.51l1.43-1.42A14.06,14.06,0,0,1,3.07,16C5.1,10.93,10.7,7,16,7a12.38,12.38,0,0,1,4,.72l1.55-1.56A14.72,14.72,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16,16,0,0,0,5.24,22.51Z"
+  ></path><path
+    d="M12 15.73a4 4 0 013.7-3.7l1.81-1.82a6 6 0 00-7.33 7.33zM30.94 15.66A16.4 16.4 0 0025.2 8.22L30 3.41 28.59 2 2 28.59 3.41 30l5.1-5.1A15.29 15.29 0 0016 27 16.69 16.69 0 0030.94 16.34 1 1 0 0030.94 15.66zM20 16a4 4 0 01-6 3.44L19.44 14A4 4 0 0120 16zm-4 9a13.05 13.05 0 01-6-1.58l2.54-2.54a6 6 0 008.35-8.35l2.87-2.87A14.54 14.54 0 0128.93 16C26.9 21.07 21.3 25 16 25z"
+  ></path>
+</svg>
diff --git a/src/icons/ViewOff16.svelte b/src/icons/ViewOff16.svelte
deleted file mode 100644
index defef651..00000000
--- a/src/icons/ViewOff16.svelte
+++ /dev/null
@@ -1,53 +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="ViewOff16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M2.6,11.3l0.7-0.7C2.6,9.8,1.9,9,1.5,8c1-2.5,3.8-4.5,6.5-4.5c0.7,0,1.4,0.1,2,0.4l0.8-0.8C9.9,2.7,9,2.5,8,2.5	C4.7,2.6,1.7,4.7,0.5,7.8c0,0.1,0,0.2,0,0.3C1,9.3,1.7,10.4,2.6,11.3z"
-  ></path><path
-    d="M6 7.9c.1-1 .9-1.8 1.8-1.8l.9-.9C7.2 4.7 5.5 5.6 5.1 7.2 5 7.7 5 8.3 5.1 8.8L6 7.9zM15.5 7.8c-.6-1.5-1.6-2.8-2.9-3.7L15 1.7 14.3 1 1 14.3 1.7 15l2.6-2.6c1.1.7 2.4 1 3.7 1.1 3.3-.1 6.3-2.2 7.5-5.3C15.5 8.1 15.5 7.9 15.5 7.8zM10 8c0 1.1-.9 2-2 2-.3 0-.7-.1-1-.3L9.7 7C9.9 7.3 10 7.6 10 8zM8 12.5c-1 0-2.1-.3-3-.8l1.3-1.3c1.4.9 3.2.6 4.2-.8.7-1 .7-2.4 0-3.4l1.4-1.4c1.1.8 2 1.9 2.6 3.2C13.4 10.5 10.6 12.5 8 12.5z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/Warning.svelte b/src/icons/Warning.svelte
new file mode 100644
index 00000000..0988e277
--- /dev/null
+++ b/src/icons/Warning.svelte
@@ -0,0 +1,29 @@
+<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,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"
+  ></path><path d="M15 8H17V19H15zM16 22a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 22z"
+  ></path>
+</svg>
diff --git a/src/icons/Warning16.svelte b/src/icons/Warning16.svelte
deleted file mode 100644
index 16032166..00000000
--- a/src/icons/Warning16.svelte
+++ /dev/null
@@ -1,53 +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="Warning16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"
-  ></path><path
-    d="M7.5 4H8.5V9H7.5zM8 10.2c-.4 0-.8.3-.8.8s.3.8.8.8c.4 0 .8-.3.8-.8S8.4 10.2 8 10.2z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/WarningAltFilled.svelte b/src/icons/WarningAltFilled.svelte
new file mode 100644
index 00000000..d8a767b0
--- /dev/null
+++ b/src/icons/WarningAltFilled.svelte
@@ -0,0 +1,33 @@
+<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
+    fill="none"
+    d="M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z"
+    data-icon-path="inner-path"></path><path
+    d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"
+  ></path><path
+    d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"
+  ></path>
+</svg>
diff --git a/src/icons/WarningAltFilled16.svelte b/src/icons/WarningAltFilled16.svelte
deleted file mode 100644
index 519ddd3e..00000000
--- a/src/icons/WarningAltFilled16.svelte
+++ /dev/null
@@ -1,56 +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="WarningAltFilled16"
-  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
-    fill="none"
-    d="M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z"
-    data-icon-path="inner-path"></path><path
-    d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"
-  ></path><path
-    d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/WarningAltFilled20.svelte b/src/icons/WarningAltFilled20.svelte
deleted file mode 100644
index ed0b4d7a..00000000
--- a/src/icons/WarningAltFilled20.svelte
+++ /dev/null
@@ -1,56 +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="WarningAltFilled20"
-  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
-    fill="none"
-    d="M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z"
-    data-icon-path="inner-path"></path><path
-    d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"
-  ></path><path
-    d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"
-  ></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/WarningFilled.svelte b/src/icons/WarningFilled.svelte
new file mode 100644
index 00000000..51a0d259
--- /dev/null
+++ b/src/icons/WarningFilled.svelte
@@ -0,0 +1,32 @@
+<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,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14C30,8.3,23.7,2,16,2z M14.9,8h2.2v11h-2.2V8z M16,25	c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22c0.8,0,1.5,0.7,1.5,1.5S16.8,25,16,25z"
+  ></path><path
+    fill="none"
+    d="M17.5,23.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22	C16.8,22,17.5,22.7,17.5,23.5z M17.1,8h-2.2v11h2.2V8z"
+    data-icon-path="inner-path"
+    opacity="0"></path>
+</svg>
diff --git a/src/icons/WarningFilled16.svelte b/src/icons/WarningFilled16.svelte
deleted file mode 100644
index 403cc667..00000000
--- a/src/icons/WarningFilled16.svelte
+++ /dev/null
@@ -1,54 +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="WarningFilled16"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 16 16"
-  fill="currentColor"
-  width="16"
-  height="16"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2	c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"
-  ></path><path
-    d="M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8	c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"
-    data-icon-path="inner-path"
-    opacity="0"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>
diff --git a/src/icons/WarningFilled20.svelte b/src/icons/WarningFilled20.svelte
deleted file mode 100644
index faa4e03c..00000000
--- a/src/icons/WarningFilled20.svelte
+++ /dev/null
@@ -1,54 +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="WarningFilled20"
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  on:keyup
-  on:keydown
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 20 20"
-  fill="currentColor"
-  width="20"
-  height="20"
-  class="{className}"
-  preserveAspectRatio="xMidYMid meet"
-  style="{style}"
-  id="{id}"
-  {...attributes}
->
-  <path
-    d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M9.2,5h1.5v7H9.2V5z M10,16c-0.6,0-1-0.4-1-1s0.4-1,1-1	s1,0.4,1,1S10.6,16,10,16z"
-  ></path><path
-    d="M9.2,5h1.5v7H9.2V5z M10,16c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S10.6,16,10,16z"
-    data-icon-path="inner-path"
-    opacity="0"></path>
-  <slot>
-    {#if title}
-      <title>{title}</title>
-    {/if}
-  </slot>
-</svg>