diff --git a/docs/package.json b/docs/package.json
index a3772b8b..d0bf6a7b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,6 +13,7 @@
     "autoprefixer": "^10.2.3",
     "carbon-components": "10.46.0",
     "carbon-components-svelte": "../",
+    "carbon-icons-svelte": "^10.38.0",
     "clipboard-copy": "^4.0.1",
     "mdsvex": "^0.8.8",
     "npm-run-all": "^4.1.5",
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 476e9999..ac4413ad 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -845,9 +845,8 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
 carbon-components-svelte@../:
-  version "0.45.0"
+  version "0.47.6"
   dependencies:
-    carbon-icons-svelte "^10.36.0"
     flatpickr "4.6.9"
 
 carbon-components@10.46.0:
@@ -860,10 +859,10 @@ carbon-components@10.46.0:
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-carbon-icons-svelte@^10.36.0:
-  version "10.36.0"
-  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.36.0.tgz#3f269f2c52520d14fcd42161a633afbb7c68b4bf"
-  integrity sha512-YlrHtjdRqMFiptNVpQ4M+gMvpYDoKQydBY5A82thAXIHk9JrbrVLzq6RgJugTijHT8yzMS1zXaw6YYhqL8Qzqw==
+carbon-icons-svelte@^10.38.0:
+  version "10.38.0"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.38.0.tgz#daf74e4a2a826ad994c950a67307b8392d80ca3a"
+  integrity sha512-uEckbbNHFtDzKz+QRx6GxvZcezXXqfDOiaE7mupkiRPkBbALrA9CPJZbI5Q2XW5mpn8lgN3IlTm2u1iJEAlVJw==
 
 caseless@~0.12.0:
   version "0.12.0"
diff --git a/package.json b/package.json
index 4882baa0..f8bd2cfb 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "format": "prettier --write './**/*.{svelte,js,md}'"
   },
   "dependencies": {
-    "carbon-icons-svelte": "^10.36.0",
     "flatpickr": "4.6.9"
   },
   "devDependencies": {
@@ -30,6 +29,7 @@
     "@tsconfig/svelte": "^1.0.10",
     "autoprefixer": "^10.2.4",
     "carbon-components": "10.46.0",
+    "carbon-icons-svelte": "^10.38.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index 2ffed134..da532cfb 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 "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
+  import ChevronRight16 from "../icons/ChevronRight16.svelte";
 
   let initialDisabled = disabled;
 
diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte
index 34179668..bd798afc 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 "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
+  import ChevronRight16 from "../icons/ChevronRight16.svelte";
   import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 1a1ddec0..8484d852 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -89,7 +89,7 @@
   export let ref = null;
 
   import { createEventDispatcher, tick } from "svelte";
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
+  import ChevronDown16 from "../icons/ChevronDown16.svelte";
   import Button from "../Button/Button.svelte";
   import Copy from "../Copy/Copy.svelte";
   import CopyButton from "../CopyButton/CopyButton.svelte";
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 162358c5..ab76c03d 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -97,7 +97,7 @@
   import { createEventDispatcher, afterUpdate, tick } from "svelte";
   import Checkmark16 from "carbon-icons-svelte/lib/Checkmark16/Checkmark16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
-  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
   import ListBox from "../ListBox/ListBox.svelte";
   import ListBoxField from "../ListBox/ListBoxField.svelte";
   import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte
index f96aa078..e2370bef 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 "carbon-icons-svelte/lib/Close20/Close20.svelte";
+  import Close20 from "../icons/Close20.svelte";
 
   const { closeModal, updateLabel } = getContext("ComposedModal");
 
diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index b5df8ec1..ac03391d 100644
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@@ -51,7 +51,7 @@
   import { onMount, getContext, createEventDispatcher, tick } from "svelte";
   import ContextMenu from "./ContextMenu.svelte";
   import Checkmark16 from "carbon-icons-svelte/lib/Checkmark16/Checkmark16.svelte";
-  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
+  import CaretRight16 from "../icons/CaretRight16.svelte";
 
   const dispatch = createEventDispatcher();
   const ctx = getContext("ContextMenu");
diff --git a/src/CopyButton/CopyButton.svelte b/src/CopyButton/CopyButton.svelte
index da001717..78ecd259 100644
--- a/src/CopyButton/CopyButton.svelte
+++ b/src/CopyButton/CopyButton.svelte
@@ -23,7 +23,7 @@
   };
 
   import Copy from "../Copy/Copy.svelte";
-  import Copy16 from "carbon-icons-svelte/lib/Copy16/Copy16.svelte";
+  import Copy16 from "../icons/Copy16.svelte";
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 4b833d4e..8acdf8af 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -102,7 +102,7 @@
 
   import { createEventDispatcher, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
+  import ChevronRight16 from "../icons/ChevronRight16.svelte";
   import { InlineCheckbox } from "../Checkbox";
   import { RadioButton } from "../RadioButton";
   import Table from "./Table.svelte";
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index eab38726..4060bf87 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -16,7 +16,7 @@
 
   import { getContext } from "svelte";
   import ArrowUp20 from "carbon-icons-svelte/lib/ArrowUp20/ArrowUp20.svelte";
-  import ArrowsVertical20 from "carbon-icons-svelte/lib/ArrowsVertical20/ArrowsVertical20.svelte";
+  import ArrowsVertical20 from "../icons/ArrowsVertical20.svelte";
 
   const { sortHeader, tableSortable, add } = getContext("DataTable");
 
diff --git a/src/DataTable/ToolbarMenu.svelte b/src/DataTable/ToolbarMenu.svelte
index 80402075..236ab948 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 "carbon-icons-svelte/lib/Settings16";
+  import Settings16 from "../icons/Settings16.svelte";
   import { OverflowMenu } from "../OverflowMenu";
 
   const ctx = getContext("Toolbar");
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index 67eb6e6c..f6c3e8d4 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -56,7 +56,7 @@
   import { getContext } from "svelte";
   import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
-  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
 
   const {
     range,
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 2ab13f4e..67c27d2b 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -98,7 +98,7 @@
 
   import { createEventDispatcher } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
-  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
   import {
     ListBox,
     ListBoxMenu,
diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte
index 6128daa6..7221142e 100644
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@@ -13,7 +13,7 @@
 
   import Close16 from "carbon-icons-svelte/lib/Close16";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import WarningFilled16 from "../icons/WarningFilled16.svelte";
   import { Loading } from "../Loading";
 </script>
 
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index 96d92b45..5671cc33 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@@ -22,7 +22,7 @@
 
   import { createEventDispatcher, afterUpdate, onMount } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
-  import ErrorFilled16 from "carbon-icons-svelte/lib/ErrorFilled16/ErrorFilled16.svelte";
+  import ErrorFilled16 from "../icons/ErrorFilled16.svelte";
   import Loading from "../Loading/Loading.svelte";
 
   const dispatch = createEventDispatcher();
diff --git a/src/Link/OutboundLink.svelte b/src/Link/OutboundLink.svelte
index f37512d6..124324d8 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 "carbon-icons-svelte/lib/Launch16/Launch16.svelte";
+  import Launch16 from "../icons/Launch16.svelte";
 </script>
 
 <Link
diff --git a/src/ListBox/ListBoxMenuIcon.svelte b/src/ListBox/ListBoxMenuIcon.svelte
index d1cd1485..b6f82f2b 100644
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@@ -15,7 +15,7 @@
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import ChevronDown16 from "../icons/ChevronDown16.svelte";
 
   const defaultTranslations = {
     [translationIds.close]: "Close menu",
diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index ef094b4a..3ef0701d 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 "carbon-icons-svelte/lib/Close16";
+  import Close16 from "../icons/Close16.svelte";
 
   const defaultTranslations = {
     [translationIds.clearAll]: "Clear all selected items",
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index f1cee727..cd7ac834 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -81,7 +81,7 @@
   export let ref = null;
 
   import { createEventDispatcher, onMount, afterUpdate } from "svelte";
-  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+  import Close20 from "../icons/Close20.svelte";
   import Button from "../Button/Button.svelte";
 
   const dispatch = createEventDispatcher();
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index c2a1f37e..f1f5e243 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -148,7 +148,7 @@
 
   import { afterUpdate, createEventDispatcher, setContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
-  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
   import Checkbox from "../Checkbox/Checkbox.svelte";
   import {
     ListBox,
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index e7e42823..db65618b 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -20,7 +20,7 @@
   /** Specify the ARIA label for the icon */
   export let iconDescription = "Close icon";
 
-  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+  import Close20 from "../icons/Close20.svelte";
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
diff --git a/src/Notification/NotificationIcon.svelte b/src/Notification/NotificationIcon.svelte
index 5b49cb68..563d6ecb 100644
--- a/src/Notification/NotificationIcon.svelte
+++ b/src/Notification/NotificationIcon.svelte
@@ -19,7 +19,7 @@
   import InformationFilled20 from "carbon-icons-svelte/lib/InformationFilled20/InformationFilled20.svelte";
   import InformationSquareFilled20 from "carbon-icons-svelte/lib/InformationSquareFilled20/InformationSquareFilled20.svelte";
   import WarningFilled20 from "carbon-icons-svelte/lib/WarningFilled20/WarningFilled20.svelte";
-  import WarningAltFilled20 from "carbon-icons-svelte/lib/WarningAltFilled20/WarningAltFilled20.svelte";
+  import WarningAltFilled20 from "../icons/WarningAltFilled20.svelte";
 
   const icons = {
     error: ErrorFilled20,
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index e97246be..7f85e711 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -108,7 +108,7 @@
   import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
-  import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";
+  import EditOff16 from "../icons/EditOff16.svelte";
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index e5ae78fd..8fe8d662 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -62,7 +62,7 @@
   } from "svelte";
   import { writable } from "svelte/store";
   import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte";
-  import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
+  import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte";
 
   const ctxBreadcrumbItem = getContext("BreadcrumbItem");
   const dispatch = createEventDispatcher();
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index 200b3644..3976647b 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -72,7 +72,7 @@
 
   import { createEventDispatcher } from "svelte";
   import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
-  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
+  import CaretRight16 from "../icons/CaretRight16.svelte";
   import Button from "../Button/Button.svelte";
   import Select from "../Select/Select.svelte";
   import SelectItem from "../Select/SelectItem.svelte";
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index d8fe9d3d..ecce3e39 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -25,7 +25,7 @@
 
   import { afterUpdate, createEventDispatcher } from "svelte";
   import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
-  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
+  import CaretRight16 from "../icons/CaretRight16.svelte";
   import PaginationItem from "./PaginationItem.svelte";
   import PaginationOverflow from "./PaginationOverflow.svelte";
   import Button from "../Button/Button.svelte";
diff --git a/src/PaginationNav/PaginationOverflow.svelte b/src/PaginationNav/PaginationOverflow.svelte
index 7f4ccb5c..67d8d1db 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 "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
+  import OverflowMenuHorizontal16 from "../icons/OverflowMenuHorizontal16.svelte";
   import PaginationItem from "./PaginationItem.svelte";
 
   const dispatch = createEventDispatcher();
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index 0ccfbe92..6ecedfef 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -25,7 +25,7 @@
 
   import { onMount, getContext } from "svelte";
   import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16/CheckmarkOutline16.svelte";
-  import Warning16 from "carbon-icons-svelte/lib/Warning16/Warning16.svelte";
+  import Warning16 from "../icons/Warning16.svelte";
 
   let step = {};
 
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index 7539c8df..4ce83af9 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -73,7 +73,7 @@
   import { createEventDispatcher } from "svelte";
   import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
-  import Search16 from "carbon-icons-svelte/lib/Search16/Search16.svelte";
+  import Search16 from "../icons/Search16.svelte";
   import SearchSkeleton from "./SearchSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index 3f4804f2..f46ad513 100644
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@@ -64,7 +64,7 @@
   import { writable } from "svelte/store";
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
-  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
index a7b7f7b5..7ff549f7 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 "carbon-icons-svelte/lib/ChevronDownGlyph/ChevronDownGlyph.svelte";
+  import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte";
 
   const dispatch = createEventDispatcher();
 
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index 71c12a0f..a7174d95 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 "carbon-icons-svelte/lib/Close16/Close16.svelte";
+  import Close16 from "../icons/Close16.svelte";
   import TagSkeleton from "./TagSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index 6eba89fe..5d43749b 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -44,7 +44,7 @@
   /** Obtain a reference to the textarea HTML element */
   export let ref = null;
 
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import WarningFilled16 from "../icons/WarningFilled16.svelte";
 
   $: errorId = `error-${id}`;
 </script>
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index 4bba5b54..7e22a734 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -84,7 +84,7 @@
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
   import View16 from "carbon-icons-svelte/lib/View16/View16.svelte";
-  import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16/ViewOff16.svelte";
+  import ViewOff16 from "../icons/ViewOff16.svelte";
 
   const ctx = getContext("Form");
 
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index e663d9b6..e7a170d3 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -68,7 +68,7 @@
   import { getContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
-  import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";
+  import EditOff16 from "../icons/EditOff16.svelte";
 
   const ctx = getContext("Form");
 
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index 47c4f72b..288d550c 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 "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
+  import ChevronDown16 from "../icons/ChevronDown16.svelte";
 
   let refContent = null;
   let refAbove = null;
diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index 3a4820e1..2738bc03 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 "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
+  import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
 
   const { add, update, selectedValue } = getContext("TileGroup");
 
diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte
index 90fc019a..1a394b15 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 "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
+  import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
 
   const dispatch = createEventDispatcher();
 
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte
index 44164163..b379fc8d 100644
--- a/src/TimePicker/TimePickerSelect.svelte
+++ b/src/TimePicker/TimePickerSelect.svelte
@@ -34,7 +34,7 @@
 
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
-  import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph";
+  import ChevronDownGlyph from "../icons/ChevronDownGlyph.svelte";
 
   const selectedValue = writable(value);
 
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index 590ac926..0635c38c 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -65,7 +65,7 @@
 
   import { createEventDispatcher, afterUpdate, setContext } from "svelte";
   import { writable } from "svelte/store";
-  import Information16 from "carbon-icons-svelte/lib/Information16/Information16.svelte";
+  import Information16 from "../icons/Information16.svelte";
 
   const dispatch = createEventDispatcher();
   const tooltipOpen = writable(open);
diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte
index 07666c37..c6171217 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 "carbon-icons-svelte/lib/CaretDown16/CaretDown16.svelte";
+  import CaretDown16 from "../icons/CaretDown16.svelte";
   import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";
 
   let ref = null;
diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte
index 5204349e..fbaeee25 100644
--- a/src/UIShell/GlobalHeader/Header.svelte
+++ b/src/UIShell/GlobalHeader/Header.svelte
@@ -61,7 +61,7 @@
   export let iconClose = Close20;
 
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
-  import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
+  import Menu20 from "../../icons/Menu20.svelte";
   import { shouldRenderHamburgerMenu } from "../navStore";
   import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
 
diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte
index d7628cb8..4afd13b0 100644
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/UIShell/GlobalHeader/HeaderAction.svelte
@@ -38,7 +38,7 @@
   import { createEventDispatcher } from "svelte";
   import { slide } from "svelte/transition";
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
-  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20/AppSwitcher20.svelte";
+  import AppSwitcher20 from "../../icons/AppSwitcher20.svelte";
   import Icon from "../../Icon/Icon.svelte";
 
   const dispatch = createEventDispatcher();
diff --git a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
index bd181ac2..ea8eec49 100644
--- a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
@@ -14,7 +14,7 @@
 
   import { createEventDispatcher } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20";
-  import Search20 from "carbon-icons-svelte/lib/Search20";
+  import Search20 from "../../icons/Search20.svelte";
   import searchStore from "../searchStore";
 
   const dispatch = createEventDispatcher();
diff --git a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
index 5c351aaa..74334d5a 100644
--- a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
@@ -14,7 +14,7 @@
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import ChevronDown16 from "../../icons/ChevronDown16.svelte";
 </script>
 
 <svelte:window
diff --git a/src/UIShell/HeaderSearch.svelte b/src/UIShell/HeaderSearch.svelte
index 9306e3aa..c8240674 100644
--- a/src/UIShell/HeaderSearch.svelte
+++ b/src/UIShell/HeaderSearch.svelte
@@ -28,7 +28,7 @@
 
   import { createEventDispatcher, tick } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
-  import Search20 from "carbon-icons-svelte/lib/Search20/Search20.svelte";
+  import Search20 from "../icons/Search20.svelte";
 
   const dispatch = createEventDispatcher();
 
diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte
index fa184a13..b16a957b 100644
--- a/src/UIShell/SideNav/HamburgerMenu.svelte
+++ b/src/UIShell/SideNav/HamburgerMenu.svelte
@@ -26,7 +26,7 @@
   export let ref = null;
 
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
-  import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
+  import Menu20 from "../../icons/Menu20.svelte";
 </script>
 
 <button
diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte
index ebbdb6ff..f261cf96 100644
--- a/src/UIShell/SideNav/SideNavMenu.svelte
+++ b/src/UIShell/SideNav/SideNavMenu.svelte
@@ -17,7 +17,7 @@
   /** Obtain a reference to the HTML button element */
   export let ref = null;
 
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
+  import ChevronDown16 from "../../icons/ChevronDown16.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
diff --git a/src/icons/Add16.svelte b/src/icons/Add16.svelte
new file mode 100644
index 00000000..a9e70a19
--- /dev/null
+++ b/src/icons/Add16.svelte
@@ -0,0 +1,51 @@
+<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
new file mode 100644
index 00000000..15797db5
--- /dev/null
+++ b/src/icons/AppSwitcher20.svelte
@@ -0,0 +1,51 @@
+<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/ArrowUp20.svelte b/src/icons/ArrowUp20.svelte
new file mode 100644
index 00000000..dd3a22c1
--- /dev/null
+++ b/src/icons/ArrowUp20.svelte
@@ -0,0 +1,51 @@
+<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/ArrowsVertical20.svelte b/src/icons/ArrowsVertical20.svelte
new file mode 100644
index 00000000..b2e22446
--- /dev/null
+++ b/src/icons/ArrowsVertical20.svelte
@@ -0,0 +1,51 @@
+<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/Calendar16.svelte b/src/icons/Calendar16.svelte
new file mode 100644
index 00000000..0ca68869
--- /dev/null
+++ b/src/icons/Calendar16.svelte
@@ -0,0 +1,51 @@
+<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/CaretDown16.svelte b/src/icons/CaretDown16.svelte
new file mode 100644
index 00000000..0f7db883
--- /dev/null
+++ b/src/icons/CaretDown16.svelte
@@ -0,0 +1,49 @@
+<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/CaretLeft16.svelte b/src/icons/CaretLeft16.svelte
new file mode 100644
index 00000000..e900d052
--- /dev/null
+++ b/src/icons/CaretLeft16.svelte
@@ -0,0 +1,49 @@
+<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/CaretRight16.svelte b/src/icons/CaretRight16.svelte
new file mode 100644
index 00000000..6f6d9b30
--- /dev/null
+++ b/src/icons/CaretRight16.svelte
@@ -0,0 +1,49 @@
+<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/Checkmark16.svelte b/src/icons/Checkmark16.svelte
new file mode 100644
index 00000000..d8aa5223
--- /dev/null
+++ b/src/icons/Checkmark16.svelte
@@ -0,0 +1,49 @@
+<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/CheckmarkFilled16.svelte b/src/icons/CheckmarkFilled16.svelte
new file mode 100644
index 00000000..17f6ac5b
--- /dev/null
+++ b/src/icons/CheckmarkFilled16.svelte
@@ -0,0 +1,54 @@
+<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
new file mode 100644
index 00000000..57828c06
--- /dev/null
+++ b/src/icons/CheckmarkFilled20.svelte
@@ -0,0 +1,55 @@
+<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/CheckmarkOutline16.svelte b/src/icons/CheckmarkOutline16.svelte
new file mode 100644
index 00000000..9d528ba8
--- /dev/null
+++ b/src/icons/CheckmarkOutline16.svelte
@@ -0,0 +1,53 @@
+<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/ChevronDown16.svelte b/src/icons/ChevronDown16.svelte
new file mode 100644
index 00000000..65923e07
--- /dev/null
+++ b/src/icons/ChevronDown16.svelte
@@ -0,0 +1,49 @@
+<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
new file mode 100644
index 00000000..b3497f74
--- /dev/null
+++ b/src/icons/ChevronDownGlyph.svelte
@@ -0,0 +1,49 @@
+<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/ChevronRight16.svelte b/src/icons/ChevronRight16.svelte
new file mode 100644
index 00000000..513dac00
--- /dev/null
+++ b/src/icons/ChevronRight16.svelte
@@ -0,0 +1,49 @@
+<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/Close16.svelte b/src/icons/Close16.svelte
new file mode 100644
index 00000000..4b5be454
--- /dev/null
+++ b/src/icons/Close16.svelte
@@ -0,0 +1,51 @@
+<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
new file mode 100644
index 00000000..6c034c16
--- /dev/null
+++ b/src/icons/Close20.svelte
@@ -0,0 +1,51 @@
+<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/Copy16.svelte b/src/icons/Copy16.svelte
new file mode 100644
index 00000000..39b354f2
--- /dev/null
+++ b/src/icons/Copy16.svelte
@@ -0,0 +1,51 @@
+<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/EditOff16.svelte b/src/icons/EditOff16.svelte
new file mode 100644
index 00000000..36e11ed3
--- /dev/null
+++ b/src/icons/EditOff16.svelte
@@ -0,0 +1,51 @@
+<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/ErrorFilled16.svelte b/src/icons/ErrorFilled16.svelte
new file mode 100644
index 00000000..3068a23a
--- /dev/null
+++ b/src/icons/ErrorFilled16.svelte
@@ -0,0 +1,55 @@
+<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
new file mode 100644
index 00000000..a9b23330
--- /dev/null
+++ b/src/icons/ErrorFilled20.svelte
@@ -0,0 +1,54 @@
+<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/Information16.svelte b/src/icons/Information16.svelte
new file mode 100644
index 00000000..3480b862
--- /dev/null
+++ b/src/icons/Information16.svelte
@@ -0,0 +1,53 @@
+<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/InformationFilled20.svelte b/src/icons/InformationFilled20.svelte
new file mode 100644
index 00000000..e5a7add4
--- /dev/null
+++ b/src/icons/InformationFilled20.svelte
@@ -0,0 +1,54 @@
+<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/InformationSquareFilled20.svelte b/src/icons/InformationSquareFilled20.svelte
new file mode 100644
index 00000000..a3466afc
--- /dev/null
+++ b/src/icons/InformationSquareFilled20.svelte
@@ -0,0 +1,54 @@
+<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/Launch16.svelte b/src/icons/Launch16.svelte
new file mode 100644
index 00000000..8cd06be9
--- /dev/null
+++ b/src/icons/Launch16.svelte
@@ -0,0 +1,51 @@
+<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/Menu20.svelte b/src/icons/Menu20.svelte
new file mode 100644
index 00000000..f3114c8d
--- /dev/null
+++ b/src/icons/Menu20.svelte
@@ -0,0 +1,51 @@
+<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/OverflowMenuHorizontal16.svelte b/src/icons/OverflowMenuHorizontal16.svelte
new file mode 100644
index 00000000..6be5c0a7
--- /dev/null
+++ b/src/icons/OverflowMenuHorizontal16.svelte
@@ -0,0 +1,50 @@
+<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/OverflowMenuVertical16.svelte b/src/icons/OverflowMenuVertical16.svelte
new file mode 100644
index 00000000..4e58797f
--- /dev/null
+++ b/src/icons/OverflowMenuVertical16.svelte
@@ -0,0 +1,50 @@
+<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/Search16.svelte b/src/icons/Search16.svelte
new file mode 100644
index 00000000..10f96e60
--- /dev/null
+++ b/src/icons/Search16.svelte
@@ -0,0 +1,51 @@
+<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
new file mode 100644
index 00000000..222e8d08
--- /dev/null
+++ b/src/icons/Search20.svelte
@@ -0,0 +1,51 @@
+<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/Settings16.svelte b/src/icons/Settings16.svelte
new file mode 100644
index 00000000..45fb70d7
--- /dev/null
+++ b/src/icons/Settings16.svelte
@@ -0,0 +1,53 @@
+<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="Settings16"
+  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.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
+  ></path><path
+    d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
+  ></path>
+  <slot>
+    {#if title}
+      <title>{title}</title>
+    {/if}
+  </slot>
+</svg>
diff --git a/src/icons/Subtract16.svelte b/src/icons/Subtract16.svelte
new file mode 100644
index 00000000..dfc6a297
--- /dev/null
+++ b/src/icons/Subtract16.svelte
@@ -0,0 +1,49 @@
+<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/View16.svelte b/src/icons/View16.svelte
new file mode 100644
index 00000000..a0e37e3e
--- /dev/null
+++ b/src/icons/View16.svelte
@@ -0,0 +1,53 @@
+<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/ViewOff16.svelte b/src/icons/ViewOff16.svelte
new file mode 100644
index 00000000..defef651
--- /dev/null
+++ b/src/icons/ViewOff16.svelte
@@ -0,0 +1,53 @@
+<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/Warning16.svelte b/src/icons/Warning16.svelte
new file mode 100644
index 00000000..16032166
--- /dev/null
+++ b/src/icons/Warning16.svelte
@@ -0,0 +1,53 @@
+<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/WarningAltFilled16.svelte b/src/icons/WarningAltFilled16.svelte
new file mode 100644
index 00000000..519ddd3e
--- /dev/null
+++ b/src/icons/WarningAltFilled16.svelte
@@ -0,0 +1,56 @@
+<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
new file mode 100644
index 00000000..ed0b4d7a
--- /dev/null
+++ b/src/icons/WarningAltFilled20.svelte
@@ -0,0 +1,56 @@
+<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/WarningFilled16.svelte b/src/icons/WarningFilled16.svelte
new file mode 100644
index 00000000..403cc667
--- /dev/null
+++ b/src/icons/WarningFilled16.svelte
@@ -0,0 +1,54 @@
+<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
new file mode 100644
index 00000000..faa4e03c
--- /dev/null
+++ b/src/icons/WarningFilled20.svelte
@@ -0,0 +1,54 @@
+<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>
diff --git a/yarn.lock b/yarn.lock
index ed9eb6a3..0e759b73 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -457,10 +457,10 @@ carbon-components@10.46.0:
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-carbon-icons-svelte@^10.36.0:
-  version "10.36.0"
-  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.36.0.tgz#3f269f2c52520d14fcd42161a633afbb7c68b4bf"
-  integrity sha512-YlrHtjdRqMFiptNVpQ4M+gMvpYDoKQydBY5A82thAXIHk9JrbrVLzq6RgJugTijHT8yzMS1zXaw6YYhqL8Qzqw==
+carbon-icons-svelte@^10.38.0:
+  version "10.38.0"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.38.0.tgz#daf74e4a2a826ad994c950a67307b8392d80ca3a"
+  integrity sha512-uEckbbNHFtDzKz+QRx6GxvZcezXXqfDOiaE7mupkiRPkBbALrA9CPJZbI5Q2XW5mpn8lgN3IlTm2u1iJEAlVJw==
 
 chalk@^2.0.0, chalk@^2.4.1:
   version "2.4.2"