diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index 3ff846277..1c39bc6aa 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -20,7 +20,7 @@
   <div class="property-group-name" on:click={onHeaderClick}>
     <div class:thin class="name">{name}</div>
     <div class="icon">
-      <Icon s name={show ? 'Remove' : 'Add'} />
+      <Icon size="S" name={show ? "Remove" : "Add"} />
     </div>
   </div>
   <div class="property-panel" class:show>
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 5e421cd75..847896178 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -6,26 +6,18 @@
   export let direction = "n"
   export let name = "Add"
   export let hidden = false
-  export let s = false
-  export let m = false
-  export let l = false
-  export let xl = false
+  export let size = "M"
   export let hoverable = false
   export let disabled = false
 
   $: rotation = directions.indexOf(direction) * 45
-  $: useDefault = ![s, m, l, xl].includes(true)
 </script>
 
 <svg
   on:click
   class:hoverable
   class:disabled
-  class:spectrum-Icon--sizeS={s}
-  class:spectrum-Icon--sizeM={m || useDefault}
-  class:spectrum-Icon--sizeL={l}
-  class:spectrum-Icon--sizeXL={xl}
-  class="spectrum-Icon"
+  class="spectrum-Icon spectrum-Icon--size{size}"
   focusable="false"
   aria-hidden={hidden}
   aria-label={name}
diff --git a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
index f85bb0486..e1f2fe78d 100644
--- a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
+++ b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
@@ -30,7 +30,7 @@
 <div>
   <Input readonly value={fullWebhookURL(value)} />
   <div class="icon" on:click={() => copyToClipboard()}>
-    <Icon s name="Copy" />
+    <Icon size="S" name="Copy" />
   </div>
 </div>
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
index cc54d599d..35d8368e0 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@@ -22,7 +22,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
index 99fe974e8..47f50c273 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
@@ -15,7 +15,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index 881321664..235c889cd 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -36,7 +36,7 @@
     on:change={event => onChange(event.detail)}
     {placeholder} />
   <div class="icon" on:click={bindingDrawer.show}>
-    <Icon s name="FlashOn" />
+    <Icon size="S" name="FlashOn" />
   </div>
 </div>
 <Drawer bind:this={bindingDrawer} {title}>
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index e60ab52e5..4e2e1f6e1 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -29,13 +29,13 @@
   <div class="content">
     {#if withArrow}
       <div class:opened class="icon arrow">
-        <Icon s name="ChevronRight" />
+        <Icon size="S" name="ChevronRight" />
       </div>
     {/if}
 
     <slot name="icon" />
     {#if icon}
-      <div class="icon"><Icon s name={icon} /></div>
+      <div class="icon"><Icon size="S" name={icon} /></div>
     {/if}
     <div class="text">{text}</div>
     {#if withActions}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
index 8cf46facc..949077362 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
@@ -68,7 +68,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
   <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
index f76541a3b..3871880bf 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
@@ -41,7 +41,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
index b6ec6b7e0..899551d5b 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -25,7 +25,7 @@
 
 <ActionMenu>
   <div slot="control" class="icon">
-    <Icon s hoverable name="MoreSmallList" />
+    <Icon size="S" hoverable name="MoreSmallList" />
   </div>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 62fe463bb..fdd01f497 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -120,7 +120,7 @@
               on:click={() => deleteAction(index)}
               style="margin-left: auto;"
             >
-              <Icon s hoverable name="Close" />
+              <Icon size="S" hoverable name="Close" />
             </div>
           </div>
         {/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index b9a0095a1..59aff93be 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -87,7 +87,7 @@
       class="icon"
       data-cy={`${key}-binding-button`}
       on:click={bindingDrawer.show}>
-      <Icon s name="FlashOn" />
+      <Icon size="S" name="FlashOn" />
     </div>
     <Drawer bind:this={bindingDrawer} title={capitalise(key)}>
       <svelte:fragment slot="description">
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 0715fa030..4ef1a886c 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -20,7 +20,7 @@
 
 <div class="root">
   <Heading m>Your Apps</Heading>
-  <Divider m />
+  <Divider size="M" />
   {#await promise}
     <div class="spinner-container">
       <Spinner size="30" />