workflow icons added

replace icons with spectrum workflow icons 4.0.0

- design icons replaced
- nav items replaced

to do
- portal
- data grid
- automation canvas

packages/bbui/package.json

@@ -28,7 +28,7 @@
     "dist"
   ],
   "dependencies": {
-    "@adobe/spectrum-css-workflow-icons": "1.2.1",
+    "@adobe/spectrum-css-workflow-icons": "4.0.0",
     "@budibase/shared-core": "0.0.0",
     "@budibase/string-templates": "0.0.0",
     "@spectrum-css/accordion": "3.0.24",

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -53,7 +53,7 @@
       aria-hidden="true"
       aria-label={icon}
     >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
+      <use xlink:href="#icon-{icon}" />
     </svg>
   {/if}
   {#if $$slots}

packages/bbui/src/Banner/Banner.svelte

@@ -27,7 +27,7 @@
       focusable="false"
       aria-hidden="true"
     >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
+      <use xlink:href="#icon-{icon}" />
     </svg>
     <div class="spectrum-Toast-body">
       <div class="spectrum-Toast-content row-content">

packages/bbui/src/Button/Button.svelte

@@ -54,7 +54,7 @@
         aria-hidden="true"
         aria-label={icon}
       >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
+        <use xlink:href="#icon-{icon}" />
       </svg>
     {/if}
     {#if $$slots && !reverse}

packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte

@@ -24,7 +24,7 @@
 <Button
   bind:ref={anchor}
   {size}
-  icon="ChevronDown"
+  icon="chevron-down-size300"
   {quiet}
   primary={quiet}
   cta={!quiet}

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -22,7 +22,7 @@
     <div class="property-group-name" on:click={onHeaderClick}>
       <div class="name">{name}</div>
       {#if collapsible}
-        <Icon size="S" name={show ? "Remove" : "Add"} />
+        <Icon size="S" name={show ? "remove" : "add"} />
       {/if}
     </div>
   {/if}

packages/bbui/src/FancyForm/FancySelect.svelte

@@ -90,7 +90,7 @@
   </div>
 
   <div class="align arrow-alignment">
-    <Icon name="ChevronDown" />
+    <Icon name="chevron-down-size300" />
   </div>
 </FancyField>
 

packages/bbui/src/Form/Core/DatePicker/DateInput.svelte

@@ -41,7 +41,7 @@
         focusable="false"
         aria-hidden="true"
       >
-        <use xlink:href="#spectrum-icon-18-Alert" />
+        <use xlink:href="#icon-Alert" />
       </svg>
     {/if}
     <input

packages/bbui/src/Form/Core/DateRangePicker.svelte

@@ -13,7 +13,7 @@
     enableTime={false}
   />
   <div class="arrow">
-    <Icon name="ChevronRight" />
+    <Icon name="chevron-right" />
   </div>
   <CoreDatePicker
     value={toDate}

packages/bbui/src/Form/Core/Dropzone.svelte

@@ -197,14 +197,14 @@
           class:visible={selectedImageIdx > 0}
           on:click={navigateLeft}
         >
-          <Icon name="ChevronLeft" />
+          <Icon name="chevron-left" />
         </div>
         <div
           class="nav right"
           class:visible={selectedImageIdx < fileCount - 1}
           on:click={navigateRight}
         >
-          <Icon name="ChevronRight" />
+          <Icon name="chevron-right" />
         </div>
         {#if maximum !== 1}
           <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>

packages/bbui/src/Form/Core/EnvDropdown.svelte

@@ -114,9 +114,7 @@
         hbsValue.length ? removeVariable() : openPopover()
       }}
     >
-      <use
+      <use xlink:href={`#icon-${!hbsValue.length ? "Key" : "Close"}`} />
-        xlink:href={`#spectrum-icon-18-${!hbsValue.length ? "Key" : "Close"}`}
-      />
     </svg>
 
     <input
@@ -190,7 +188,7 @@
             focusable="false"
             aria-hidden="true"
           >
-            <use xlink:href="#spectrum-icon-18-Add" />
+            <use xlink:href="#icon-Add" />
           </svg>
           <div class="primary-text">Add Variable</div>
         </div>
@@ -201,7 +199,7 @@
             focusable="false"
             aria-hidden="true"
           >
-            <use xlink:href="#spectrum-icon-18-ArrowUp" />
+            <use xlink:href="#icon-order-one-up" />
           </svg>
           <div class="primary-text">Upgrade plan</div>
         </div>

packages/bbui/src/Form/Core/Picker.svelte

@@ -235,7 +235,7 @@
             {#if option.tag}
               <span class="option-tag">
                 <Tags>
-                  <Tag icon="LockClosed">{option.tag}</Tag>
+                  <Tag icon="lock">{option.tag}</Tag>
                 </Tags>
               </span>
             {/if}

packages/bbui/src/Form/Core/PickerDropdown.svelte

@@ -120,7 +120,7 @@
         style="color: {iconData?.color}"
         focusable="false"
       >
-        <use xlink:href="#spectrum-icon-18-{iconData?.icon}" />
+        <use xlink:href="#icon-{iconData?.icon}" />
       </svg>
     {/if}
     <input

packages/bbui/src/Form/Core/Search.svelte

@@ -52,7 +52,7 @@
       focusable="false"
       aria-hidden="true"
     >
-      <use xlink:href="#spectrum-icon-18-Magnify" />
+      <use xlink:href="#icon-search" />
     </svg>
     <input
       {disabled}

packages/bbui/src/Form/Field.svelte

@@ -21,7 +21,7 @@
       <div class="error">{error}</div>
     {:else if helpText}
       <div class="helpText">
-        <Icon name="HelpOutline" /> <span>{helpText}</span>
+        <Icon name="help-circle" /> <span>{helpText}</span>
       </div>
     {/if}
   </div>

packages/bbui/src/Icon/Icon.svelte

@@ -5,7 +5,7 @@
     TooltipType,
   } from "../Tooltip/AbsTooltip.svelte"
 
-  export let name = "Add"
+  export let name = "add"
   export let hidden = false
   export let size = "M"
   export let hoverable = false
@@ -45,7 +45,7 @@
     >
       <use
         style="pointer-events: none;"
-        xlink:href="#spectrum-icon-18-{name}"
+        xlink:href="#icon-{name.toLowerCase()}"
       />
     </svg>
   </div>

packages/bbui/src/IconPicker/IconPicker.svelte

@@ -30,7 +30,7 @@
         "Sandbox",
         "Project",
         "Organisations",
-        "Magnify",
+        "search",
         "Launch",
         "Car",
         "Camera",

packages/bbui/src/InlineAlert/InlineAlert.svelte

@@ -34,7 +34,7 @@
     focusable="false"
     aria-hidden="true"
   >
-    <use xlink:href="#spectrum-icon-18-{icon}" />
+    <use xlink:href="#icon-{icon}" />
   </svg>
   <div class="spectrum-InLineAlert-header">{header}</div>
   <slot>

packages/bbui/src/List/ListItem.svelte

@@ -44,7 +44,7 @@
   <div class="list-item__right">
     <slot name="right" />
     {#if showArrow}
-      <Icon name="ChevronRight" />
+      <Icon name="chevron-right" />
     {/if}
   </div>
 </a>

packages/bbui/src/Notification/Notification.svelte

@@ -21,7 +21,7 @@
       focusable="false"
       aria-hidden="true"
     >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
+      <use xlink:href="#icon-{icon}" />
     </svg>
   {/if}
   <div class="spectrum-Toast-body" class:actionBody={!!action}>

packages/bbui/src/SideNavigation/Item.svelte

@@ -38,7 +38,7 @@
         focusable="false"
         aria-hidden="true"
       >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
+        <use xlink:href="#icon-{icon}" />
       </svg>
     {/if}
     <slot />

packages/bbui/src/Table/Table.svelte

@@ -370,7 +370,7 @@
                     class="spectrum-Icon spectrum-Table-autoIcon"
                     focusable="false"
                   >
-                    <use xlink:href="#spectrum-icon-18-MagicWand" />
+                    <use xlink:href="#icon-MagicWand" />
                   </svg>
                 {/if}
                 {#if sortColumn === field}
@@ -388,7 +388,7 @@
                     focusable="false"
                     on:click={e => editColumn(e, field)}
                   >
-                    <use xlink:href="#spectrum-icon-18-Edit" />
+                    <use xlink:href="#icon-edit" />
                   </svg>
                 {/if}
               </div>
@@ -462,7 +462,7 @@
                   class="spectrum-Icon spectrum-Icon--sizeXXL"
                   focusable="false"
                 >
-                  <use xlink:href="#spectrum-icon-18-Table" />
+                  <use xlink:href="#icon-table" />
                 </svg>
                 <div>{placeholderText}</div>
               </div>

packages/bbui/src/Tabs/Tab.svelte

@@ -84,7 +84,7 @@
         aria-hidden="true"
         aria-label="Folder"
       >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
+        <use xlink:href="#icon-{icon}" />
       </svg>
     {/if}
     <span class="spectrum-Tabs-itemLabel">{title}</span>
@@ -110,7 +110,7 @@
         aria-hidden="true"
         aria-label="Folder"
       >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
+        <use xlink:href="#icon-{icon}" />
       </svg>
     {/if}
     <span class="spectrum-Tabs-itemLabel">{title}</span>

packages/bbui/src/Tags/Tag.svelte

@@ -26,7 +26,7 @@
       aria-hidden="true"
       aria-label="Tag"
     >
-      <use xlink:href="#spectrum-icon-24-{icon}" />
+      <use xlink:href="#icon-{icon}" />
     </svg>
   {/if}
   <span class="spectrum-Tags-itemLabel"><slot /></span>

packages/bbui/src/Tooltip/TooltipWrapper.svelte

@@ -17,7 +17,7 @@
           class:icon-small={size === "M" || size === "S"}
           on:focus
         >
-          <Icon name="InfoOutline" size="S" {disabled} hoverable />
+          <Icon name="info-circle" size="S" {disabled} hoverable />
         </div>
       </AbsTooltip>
     </div>

packages/bbui/src/TreeView/Item.svelte

@@ -28,7 +28,7 @@
         aria-hidden="true"
         aria-label="Layers"
       >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
+        <use xlink:href="#icon-{icon}" />
       </svg>
     {/if}
     <span class="spectrum-TreeView-itemLabel">{title}</span>

packages/bbui/src/spectrum-icons-vite.js

@@ -1,5 +1,5 @@
 import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg?raw"
-import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw"
+import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/assets/svg-spriteSheet/icons.svg?raw"
 
 export default () => {
   loadIconSet("Spectrum UI Icons", SpectrumUIIcons)

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte

@@ -181,7 +181,7 @@
             {#if isDisabled && !syncAutomationsEnabled && !triggerAutomationRunEnabled && lockedFeatures.includes(action.stepId)}
               <div class="tag-color">
                 <Tags>
-                  <Tag icon="LockClosed">Premium</Tag>
+                  <Tag icon="lock">Premium</Tag>
                 </Tags>
               </div>
             {:else if isDisabled}

packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte

@@ -160,7 +160,7 @@
           tooltipPosition={TooltipPosition.Top}
           hoverable
           disabled={branchIdx == 0}
-          name="ArrowLeft"
+          name="chevron-left"
         />
         <Icon
           on:click={() => {
@@ -175,7 +175,7 @@
           tooltipPosition={TooltipPosition.Top}
           hoverable
           disabled={isLast}
-          name="ArrowRight"
+          name="chevron-right"
         />
       </div>
     </FlowItemHeader>
@@ -193,7 +193,7 @@
           </PropField>
           <div class="footer">
             <Icon
-              name="InfoOutline"
+              name="info-circle"
               size="S"
               color="var(--spectrum-global-color-gray-700)"
             />

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte

@@ -85,8 +85,8 @@
 
     <div class="zoom">
       <div class="group">
-        <ActionButton icon="Add" quiet on:click={draggable.zoomIn} />
+        <ActionButton icon="zoom-in" quiet on:click={draggable.zoomIn} />
-        <ActionButton icon="Remove" quiet on:click={draggable.zoomOut} />
+        <ActionButton icon="zoom-out" quiet on:click={draggable.zoomOut} />
       </div>
     </div>
 
@@ -101,7 +101,6 @@
   </div>
   <div class="controls">
     <Button
-      icon={"Play"}
       cta
       disabled={!automation?.definition?.trigger}
       on:click={() => {
@@ -111,7 +110,11 @@
       Run test
     </Button>
     <div class="buttons">
-      <Icon disabled={!$automationStore.testResults} size="M" name="Multiple" />
+      <Icon
+        disabled={!$automationStore.testResults}
+        size="M"
+        name="list-multi-select"
+      />
       <div
         class:disabled={!$automationStore.testResults}
         on:click={() => {

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -234,7 +234,7 @@
                     style="color:var(--spectrum-global-color-gray-700);"
                     focusable="false"
                   >
-                    <use xlink:href="#spectrum-icon-18-Reuse" />
+                    <use xlink:href="#icon-refresh" />
                   </svg>
                   <div class="iconAlign">
                     <Detail size="S">Looping</Detail>
@@ -243,17 +243,15 @@
 
                 <div class="blockTitle">
                   <AbsTooltip type="negative" text="Remove looping">
-                    <Icon
+                    <Icon on:click={removeLooping} hoverable name="delete" />
-                      on:click={removeLooping}
-                      hoverable
-                      name="DeleteOutline"
-                    />
                   </AbsTooltip>
 
                   <div style="margin-left: 10px;" on:click={() => {}}>
                     <Icon
                       hoverable
-                      name={showLooping ? "ChevronDown" : "ChevronUp"}
+                      name={showLooping
+                        ? "chevron-down-size300"
+                        : "chevron-right"}
                     />
                   </div>
                 </div>
@@ -324,7 +322,7 @@
                   <InfoDisplay
                     title={triggerInfo.title}
                     body="This trigger is tied to your '{triggerInfo.tableName}' table"
-                    icon="InfoOutline"
+                    icon="info-circle"
                   />
                 {/if}
               </Layout>

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte

@@ -17,7 +17,7 @@
   {#if !block.branchNode}
     <Icon
       hoverable
-      name="Branch3"
+      name="share-android"
       on:click={() => {
         dispatch("branch")
       }}
@@ -29,7 +29,7 @@
   {/if}
   <Icon
     hoverable
-    name="AddCircle"
+    name="add-circle"
     on:click={() => {
       actionModal.show()
     }}

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte

@@ -128,7 +128,7 @@
           style="color:var(--spectrum-global-color-gray-700);"
           focusable="false"
         >
-          <use xlink:href="#spectrum-icon-18-{block.icon}" />
+          <use xlink:href="#icon-{block.icon}" />
         </svg>
       {/if}
       <div class="iconAlign">
@@ -186,7 +186,7 @@
               dispatch("toggle")
             }}
             hoverable
-            name={open ? "ChevronUp" : "ChevronDown"}
+            name={open ? "chevron-down-size300" : "chevron-right"}
           />
         </div>
       {/if}
@@ -201,12 +201,12 @@
         {#if !showTestStatus}
           {#if !isHeaderTrigger && !isLooped && !isBranch && (block?.features?.[Features.LOOPING] || !block.features)}
             <AbsTooltip type="info" text="Add looping">
-              <Icon on:click={addLooping} hoverable name="RotateCW" />
+              <Icon on:click={addLooping} hoverable name="rotate-cw" />
             </AbsTooltip>
           {/if}
           {#if !isHeaderTrigger}
             <AbsTooltip type="negative" text="Delete step">
-              <Icon on:click={deleteStep} hoverable name="DeleteOutline" />
+              <Icon on:click={deleteStep} hoverable name="delete" />
             </AbsTooltip>
           {/if}
         {/if}
@@ -220,7 +220,7 @@
               dispatch("toggle")
             }}
             hoverable
-            name={open ? "ChevronUp" : "ChevronDown"}
+            name={open ? "chevron-down-size300" : "chevron-right"}
           />
         {/if}
       </div>
@@ -228,7 +228,7 @@
         <div class="error-container">
           <AbsTooltip type="negative" text={automationNameError}>
             <div class="error-icon">
-              <Icon size="S" name="Alert" />
+              <Icon size="S" name="alert-triangle" />
             </div>
           </AbsTooltip>
         </div>

packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte

@@ -61,7 +61,7 @@
 {#if isBranch}
   <div class="split-branch-btn">
     <ActionButton
-      icon="AddCircle"
+      icon="add-circle"
       on:click={() => {
         automationStore.actions.branchAutomation(pathToCurrentNode, automation)
       }}

packages/builder/src/components/automation/AutomationPanel/AutomationNavItem.svelte

@@ -119,7 +119,7 @@
   selectedBy={$userSelectedResourceMap[automation._id]}
   disabled={automation.disabled}
 >
-  <Icon on:click={openContextMenu} size="S" hoverable name="MoreSmallList" />
+  <Icon on:click={openContextMenu} size="S" hoverable name="more" />
 </NavItem>
 
 <ConfirmDialog

packages/builder/src/components/automation/AutomationPanel/UpdateAutomationModal.svelte

@@ -61,7 +61,7 @@
       target="_blank"
       href="https://docs.budibase.com/docs/automation-steps"
     >
-      <Icon name="InfoOutline" />
+      <Icon name="info-circle" />
       <span>Learn about automations</span>
     </a>
   </ModalContent>

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -695,7 +695,7 @@
                       "_blank"
                     )}
                   size="XS"
-                  name="InfoOutline"
+                  name="info-circle"
                 />
               {/if}
             </div>

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -302,7 +302,7 @@
     bind:this={popoverAnchor}
   >
     <ActionButton
-      icon="Add"
+      icon="add"
       fullWidth
       on:click={() => {
         customPopover.show()

packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte

@@ -92,7 +92,7 @@
       />
     </div>
   {/each}
-  <Button quiet secondary icon="Add" on:click={addField}>Add field</Button>
+  <Button quiet secondary icon="add" on:click={addField}>Add field</Button>
 </div>
 
 <style>

packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte

@@ -71,7 +71,7 @@
     target="_blank"
     href="https://docs.budibase.com/docs/trigger"
   >
-    <Icon name="InfoOutline" />
+    <Icon name="info-circle" />
     <span>Learn about webhooks</span>
   </a>
 </ModalContent>

packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte

@@ -52,7 +52,7 @@
 <DetailPopover title="Import data" bind:this={popover}>
   <svelte:fragment slot="anchor" let:open>
     <ActionButton
-      icon="DataUpload"
+      icon="upload"
       quiet
       on:click={openPopover}
       {disabled}

packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte

@@ -128,7 +128,7 @@
 <DetailPopover title="Select access role" {showPopover}>
   <svelte:fragment slot="anchor" let:open>
     <ActionButton
-      icon="LockClosed"
+      icon="lock"
       selected={open || highlight}
       quiet
       accentColor={highlight ? "#ff0000" : null}

packages/builder/src/components/backend/DataTable/buttons/grid/ColumnsSettingContent.svelte

@@ -193,7 +193,7 @@
                 relationshipPanelAnchor = e.currentTarget
               }}
               size="S"
-              icon="ChevronRight"
+              icon="chevron-right"
               quiet
               selected={relationshipFieldName === column.name}
             />

packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte

@@ -136,7 +136,7 @@
         <div>
           <ListItem
             title="Row is created"
-            icon="TableRowAddBottom"
+            icon="add"
             hoverable
             on:click={() => createAutomation(TriggerStepID.ROW_SAVED)}
             iconColor="var(--spectrum-global-color-gray-600)"
@@ -145,7 +145,7 @@
         <div>
           <ListItem
             title="Row is updated"
-            icon="Refresh"
+            icon="refresh"
             hoverable
             on:click={() => createAutomation(TriggerStepID.ROW_UPDATED)}
             iconColor="var(--spectrum-global-color-gray-600)"

packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte

@@ -29,7 +29,7 @@
 <DetailPopover title="Screens" bind:this={popover}>
   <svelte:fragment slot="anchor" let:open>
     <ActionButton
-      icon="WebPage"
+      icon="web-page"
       selected={open || screenCount}
       quiet
       accentColor="#364800"
@@ -52,7 +52,7 @@
     </List>
   {/if}
   <div>
-    <Button secondary icon="WebPage" on:click={generateScreen}>
+    <Button secondary icon="web-page" on:click={generateScreen}>
       Generate app screen
     </Button>
   </div>

packages/builder/src/components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <ActionButton on:click={() => (open = true)} icon="Help" quiet>
+  <ActionButton on:click={() => (open = true)} icon="help-circle" quiet>
     Why can't I edit this table?
   </ActionButton>
 </div>

packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte

@@ -190,7 +190,7 @@
 
 <DetailPopover bind:this={popover} title="Configure calculations" width={480}>
   <svelte:fragment slot="anchor" let:open>
-    <ActionButton icon="WebPage" quiet on:click={openPopover} selected={open}>
+    <ActionButton icon="web-page" quiet on:click={openPopover} selected={open}>
       Configure calculations{count ? `: ${count}` : ""}
     </ActionButton>
   </svelte:fragment>
@@ -231,7 +231,7 @@
   <div class="buttons">
     <ActionButton
       quiet
-      icon="Add"
+      icon="add"
       on:click={addCalc}
       disabled={calculations.length >= 5}
     >

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -645,7 +645,7 @@
           type="info"
           text={"Rich text includes support for images, link"}
         >
-          <Icon size="XS" name="InfoOutline" />
+          <Icon size="XS" name="info-circle" />
         </AbsTooltip>
       </div>
 
@@ -698,7 +698,7 @@
                 ? null
                 : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
             >
-              <Icon size="XS" name="InfoOutline" />
+              <Icon size="XS" name="info-circle" />
             </AbsTooltip>
           </div>
           <Toggle

packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte

@@ -161,7 +161,7 @@
     {/each}
   </div>
   <div on:click={addNewInput} class="add-option">
-    <Icon name="Add" />
+    <Icon name="add" />
     <div>Add option</div>
   </div>
 </div>

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavItem/DatasourceNavItem.svelte

@@ -67,7 +67,7 @@
     />
   </div>
   {#if datasource._id !== BUDIBASE_INTERNAL_DB_ID}
-    <Icon on:click={openContextMenu} size="S" hoverable name="MoreSmallList" />
+    <Icon on:click={openContextMenu} size="S" hoverable name="more" />
   {/if}
 </NavItem>
 <UpdateDatasourceModal {datasource} bind:this={editModal} />

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -68,7 +68,7 @@
 <div class="hierarchy-items-container">
   {#if showAppUsersTable}
     <NavItem
-      icon="UserGroup"
+      icon="user-group"
       text={appUsersTableName}
       selected={$isActive("./table/:tableId") &&
         $tables.selected?._id === TableNames.USERS}
@@ -77,7 +77,7 @@
     />
   {/if}
   <NavItem
-    icon="UserAdmin"
+    icon="users-lock"
     text="Manage roles"
     selected={$isActive("./roles")}
     on:click={() => $goto("./roles")}

packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte

@@ -87,7 +87,7 @@
   on:click={() => goto(`./query/${query._id}`)}
   selectedBy={$userSelectedResourceMap[query._id]}
 >
-  <Icon size="S" hoverable name="MoreSmallList" on:click={openContextMenu} />
+  <Icon size="S" hoverable name="more" on:click={openContextMenu} />
 </NavItem>
 
 <ConfirmDialog

packages/builder/src/components/backend/RoleEditor/Controls.svelte

@@ -11,12 +11,12 @@
 <div class="control top-right">
   <div class="group">
     <ActionButton
-      icon="Add"
+      icon="zoom-in"
       quiet
       on:click={() => flow.zoomIn({ duration: ZoomDuration })}
     />
     <ActionButton
-      icon="Remove"
+      icon="zoom-out"
       quiet
       on:click={() => flow.zoomOut({ duration: ZoomDuration })}
     />
@@ -24,7 +24,7 @@
   <Button secondary on:click={layoutAndFit}>Auto layout</Button>
 </div>
 <div class="control bottom-right">
-  <Button icon="Add" cta on:click={createRole}>Add role</Button>
+  <Button icon="add" cta on:click={createRole}>Add role</Button>
 </div>
 
 <style>

packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte

@@ -61,7 +61,7 @@
   on:click
 >
   {#if table._id !== TableNames.USERS}
-    <Icon s on:click={openContextMenu} hoverable name="MoreSmallList" />
+    <Icon s on:click={openContextMenu} hoverable name="more" />
   {/if}
 </NavItem>
 <EditModal {table} bind:this={editModal} />

packages/builder/src/components/commandPalette/CommandPalette.svelte

@@ -84,7 +84,7 @@
     {
       type: "Support",
       name: "Raise Github Discussion",
-      icon: "Help",
+      icon: "help-circle",
       action: () =>
         window.open(`https://github.com/Budibase/budibase/discussions/new`),
     },
@@ -130,7 +130,7 @@
     ...$sortedScreens.map(screen => ({
       type: "Screen",
       name: screen.routing.route,
-      icon: "WebPage",
+      icon: "web-page",
       action: () => {
         $goto(`./design/${screen._id}/${screen._id}-screen`)
       },

packages/builder/src/components/common/CodeEditor/index.js

@@ -54,7 +54,7 @@ const toSpectrumIcon = name => {
     aria-label="${name}-section-icon"
     style="color:var(--spectrum-global-color-gray-700)"
   >
-    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-${name}" />
+    <use style="pointer-events: none;" xlink:href="#icon-${name}" />
   </svg>`
 }
 

packages/builder/src/components/common/NavHeader.svelte

@@ -68,7 +68,7 @@
     class="addButton"
     class:rotate={search}
   >
-    <Icon name="Add" hoverable hoverColor="var(--ink)" />
+    <Icon name="add" hoverable hoverColor="var(--ink)" />
   </div>
 </div>
 

packages/builder/src/components/common/NavItem.svelte

@@ -104,7 +104,7 @@
         class="icon arrow"
         on:click={onIconClick}
       >
-        <Icon size="S" name="ChevronRight" />
+        <Icon size="S" name="chevron-right" />
       </div>
     {/if}
 

packages/builder/src/components/common/TemplateCard.svelte

@@ -28,7 +28,7 @@
         style="color: white"
         focusable="false"
       >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
+        <use xlink:href="#icon-{icon}" />
       </svg>
     </div>
     <div class={overlayEnabled ? "template-thumbnail-action-overlay" : ""}>

packages/builder/src/components/common/UndoRedoControl.svelte

@@ -37,13 +37,13 @@
   {#if showButtonGroup}
     <div class="group">
       <ActionButton
-        icon="Undo"
+        icon="undo"
         quiet
         on:click={store.undo}
         disabled={!$store.canUndo}
       />
       <ActionButton
-        icon="Redo"
+        icon="redo"
         quiet
         on:click={store.redo}
         disabled={!$store.canRedo}
@@ -51,13 +51,13 @@
     </div>
   {:else}
     <Icon
-      name="Undo"
+      name="undo"
       hoverable
       on:click={store.undo}
       disabled={!$store.canUndo}
     />
     <Icon
-      name="Redo"
+      name="redo"
       hoverable
       on:click={store.redo}
       disabled={!$store.canRedo}

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -52,7 +52,7 @@
     JavaScript: "JavaScript",
   }
   const SidePanels = {
-    Bindings: "FlashOn",
+    Bindings: "effects",
     Evaluation: "Play",
     Snippets: "Code",
   }

packages/builder/src/components/common/bindings/BindingSidePanel.svelte

@@ -158,7 +158,7 @@
     {#if selectedCategory}
       <div class="header">
         <Icon
-          name="BackAndroid"
+          name="step-backward"
           hoverable
           size="S"
           on:click={() => (selectedCategory = null)}
@@ -211,7 +211,7 @@
               name={categoryIcons[categoryName]}
             />
             <span class="category-name">{categoryName} </span>
-            <span class="category-chevron"><Icon name="ChevronRight" /></span>
+            <span class="category-chevron"><Icon name="chevron-right" /></span>
           </li>
         {/each}
       </ul>

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -73,7 +73,7 @@
   />
   {#if !disabled}
     <div class="icon" on:click={bindingDrawer.show}>
-      <Icon size="S" name="FlashOn" />
+      <Icon size="S" name="effects" />
     </div>
   {/if}
 </div>

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -83,7 +83,7 @@
         bindingDrawer.show()
       }}
     >
-      <Icon size="S" name="FlashOn" />
+      <Icon size="S" name="effects" />
     </div>
   {/if}
 </div>

packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte

@@ -178,7 +178,7 @@
         bindingDrawer.show()
       }}
     >
-      <Icon size="S" name="FlashOn" />
+      <Icon size="S" name="effects" />
     </div>
   {/if}
 </div>

packages/builder/src/components/common/bindings/SnippetSidePanel.svelte

@@ -131,7 +131,7 @@
         <div class="title">
           Snippets
           <Tags>
-            <Tag icon="LockClosed">Premium</Tag>
+            <Tag icon="lock">Premium</Tag>
           </Tags>
         </div>
       {/if}

packages/builder/src/components/deploy/AppActions.svelte

@@ -163,7 +163,7 @@
         <div class="app-action" id="builder-app-users-button">
           <ActionButton
             quiet
-            icon="UserGroup"
+            icon="user-group"
             on:click={() => {
               builderStore.showBuilderSidePanel()
             }}
@@ -179,7 +179,7 @@
         <ActionButton
           disabled={$sortedScreens.length === 0}
           quiet
-          icon="PlayCircle"
+          icon="play"
           on:click={previewApp}
         >
           Preview
@@ -200,12 +200,14 @@
     >
       <div bind:this={appActionPopoverAnchor}>
         <div class="app-action">
-          <Icon name={$appPublished ? "GlobeCheck" : "GlobeStrike"} />
+          <Icon name={$appPublished ? "publish" : "publish-no"} />
           <TourWrap stepKeys={[TOUR_STEP_KEYS.BUILDER_APP_PUBLISH]}>
             <span class="publish-open" id="builder-app-publish-button">
               Publish
               <Icon
-                name={appActionPopoverOpen ? "ChevronUp" : "ChevronDown"}
+                name={appActionPopoverOpen
+                  ? "chevron-right"
+                  : "chevron-down-size300"}
                 size="M"
               />
             </span>
@@ -239,7 +241,7 @@
               >
                 {$appStore.url}
                 {#if $appPublished}
-                  <Icon size="S" name="LinkOut" />
+                  <Icon size="S" name="open-in" />
                 {/if}
               </span>
             </Body>

packages/builder/src/components/design/Panel.svelte

@@ -58,7 +58,7 @@
     </div>
     {#if showAddButton}
       <div class="add-button" on:click={onClickAddButton}>
-        <Icon name="Add" />
+        <Icon name="add" />
       </div>
     {/if}
     {#if showCloseButton}

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveFields.svelte

@@ -75,7 +75,7 @@
     />
   {/each}
   <div style="margin-top: 10px">
-    <Button icon="AddCircle" secondary on:click={addField}>
+    <Button icon="add-circle" secondary on:click={addField}>
       Add
       {fieldLabel}
     </Button>

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte

@@ -155,7 +155,7 @@
       {/if}
       <div class="column">
         <div class="buttons wide">
-          <Button secondary icon="Add" on:click={addColumn}>Add column</Button>
+          <Button secondary icon="add" on:click={addColumn}>Add column</Button>
           <Button secondary quiet on:click={addAllColumns}>
             Add all columns
           </Button>

packages/builder/src/components/design/settings/controls/FormStepControls.svelte

@@ -32,7 +32,7 @@
       <ActionButton
         size="S"
         secondary
-        icon="ChevronLeft"
+        icon="chevron-left"
         disabled={currentStep === 0}
         on:click={() => {
           stepAction("previousStep")
@@ -44,7 +44,7 @@
         size="S"
         secondary
         disabled={currentStep === stepCount - 1}
-        icon="ChevronRight"
+        icon="chevron-right"
         on:click={() => {
           stepAction("nextStep")
         }}

packages/builder/src/components/design/settings/controls/OptionsEditor/OptionsDrawer.svelte

@@ -52,7 +52,7 @@
         </div>
       {/if}
       <div>
-        <Button icon="AddCircle" size="M" on:click={addOption} secondary>
+        <Button icon="add-circle" size="M" on:click={addOption} secondary>
           Add Option
         </Button>
       </div>

packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte

@@ -9,7 +9,7 @@
 
 <div>
   <Tags>
-    <Tag icon="LockClosed">{title}</Tag>
+    <Tag icon="lock">{title}</Tag>
   </Tags>
 </div>
 

packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte

@@ -280,7 +280,7 @@
           </div>
         {/if}
         <div>
-          <Button secondary icon="Add" on:click={addCondition}>
+          <Button secondary icon="add" on:click={addCondition}>
             Add condition
           </Button>
         </div>

packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte

@@ -378,7 +378,7 @@
           </div>
         {/if}
         <div class="button">
-          <Button secondary icon="Add" on:click={addRule}>Add Rule</Button>
+          <Button secondary icon="add" on:click={addRule}>Add Rule</Button>
         </div>
       </Layout>
     </Layout>

packages/builder/src/components/integration/KeyValueBuilder.svelte

@@ -176,7 +176,7 @@
       {#if menuItems?.length > 0 && showMenu}
         <ActionMenu>
           <div slot="control" class="control icon">
-            <Icon size="S" hoverable name="MoreSmallList" />
+            <Icon size="S" hoverable name="more" />
           </div>
           {#each menuItems as item}
             <MenuItem on:click={() => item.onClick(field)}>
@@ -192,7 +192,7 @@
   <div>
     <ActionButton
       disabled={actionButtonDisabled}
-      icon="Add"
+      icon="add"
       secondary
       thin
       outline

packages/builder/src/components/integration/QueryViewerSidePanel/index.svelte

@@ -16,7 +16,7 @@
 
 <Panel
   showCloseButton
-  closeButtonIcon="RailRightClose"
+  closeButtonIcon="step-forward"
   onClickCloseButton={onClose}
   title="Query results"
   icon={"SQLQuery"}

packages/builder/src/components/integration/index.svelte

@@ -139,7 +139,7 @@
                               query.fields.steps[index].key
                             query.fields.steps[index].key = target
                           }}
-                          icon="ChevronUp"
+                          icon="chevron-up"
                         />
                       {/if}
                       {#if index < query.fields.steps.length - 1}
@@ -153,7 +153,7 @@
                               query.fields.steps[index].key
                             query.fields.steps[index].key = target
                           }}
-                          icon="ChevronDown"
+                          icon="chevron-down-size300"
                         />
                       {/if}
                     </div>
@@ -201,7 +201,7 @@
               <Icon
                 disabled={!editable}
                 hoverable
-                name="AddCircle"
+                name="add-circle"
                 size="S"
                 readOnly={!editable}
                 on:click={() => {

packages/builder/src/components/portal/page/Breadcrumb.svelte

@@ -9,7 +9,7 @@
   <a href={url}>
     {text}
   </a>
-  <Icon name="ChevronRight" />
+  <Icon name="chevron-right" />
 </div>
 
 <style>

packages/builder/src/components/start/AppRow.svelte

@@ -111,12 +111,7 @@
           </Button>
         </div>
         <div class="row-action">
-          <Icon
+          <Icon on:click={openContextMenu} size="S" hoverable name="more" />
-            on:click={openContextMenu}
-            size="S"
-            hoverable
-            name="MoreSmallList"
-          />
         </div>
       {:else}
         <!-- this can happen if an app builder has app user access to an app -->

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -18,29 +18,47 @@
 
   let iconsList = [
     "Apps",
-    "Actions",
+    "animation",
-    "ConversionFunnel",
+    "interaction",
-    "App",
+    "text-numbers",
-    "Briefcase",
+    "Apps-all",
-    "Money",
+    "briefcase",
-    "ShoppingCart",
+    "shopping-cart",
-    "Form",
+    "radio-button",
-    "Help",
+    "Help-circle",
-    "Monitoring",
-    "Sandbox",
     "Project",
-    "Organisations",
+    "buildings",
-    "Magnify",
+    "search",
-    "Launch",
+    "promote",
-    "Car",
+    "camera",
-    "Camera",
+    "bug",
-    "Bug",
+    "channel",
-    "Channel",
+    "calendar",
-    "Calculator",
+    "check-box",
-    "Calendar",
+    "clock",
-    "GraphDonut",
+    "collection",
-    "GraphBarHorizontal",
+    "comment",
-    "Demographic",
+    "community",
+    "data",
+    "email",
+    "emoji",
+    "file",
+    "filmstrip",
+    "flag",
+    "heart",
+    "image",
+    "lightbulb",
+    "lighten",
+    "logo",
+    "pattern",
+    "publish",
+    "ribbon",
+    "social-network",
+    "stamp-clone",
+    "star",
+    "table",
+    "template",
+    "web-page",
   ]
 
   const save = async () => {
@@ -61,9 +79,17 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
+  <div class="color-selection">
+    <div>
+      <Label size="XL">Select a color</Label>
+    </div>
+    <div class="color-selection-item">
+      <ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
+    </div>
+  </div>
   <div class="scrollable-icons">
     <div class="title-spacing">
-      <Label>Select an icon</Label>
+      <Label size="XL">Select an icon</Label>
     </div>
     <div class="grid">
       {#each iconsList as item}
@@ -72,50 +98,51 @@
           class:selected={item === name}
           on:click={() => (name = item)}
         >
-          <Icon name={item} />
+          <Icon name={item} {color} size="XL" />
         </div>
       {/each}
     </div>
   </div>
-  <div class="color-selection">
-    <div>
-      <Label>Select a color</Label>
-    </div>
-    <div class="color-selection-item">
-      <ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
-    </div>
-  </div>
 </ModalContent>
 
 <style>
   .scrollable-icons {
     overflow-y: auto;
-    height: 230px;
+    height: auto;
   }
 
   .grid {
     display: grid;
-    grid-gap: 20px;
+    grid-gap: 10px;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(7, 1fr);
   }
 
   .color-selection {
     display: flex;
     align-items: center;
+    margin-bottom: 12px;
   }
 
   .color-selection-item {
-    margin-left: 20px;
+    margin-left: 12px;
   }
 
   .title-spacing {
-    margin-bottom: 20px;
+    margin-bottom: 12px;
   }
 
   .icon-item {
     cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+    border-radius: 8px;
+    border: 1px solid transparent;
   }
   .icon-item.selected {
-    color: var(--spectrum-global-color-blue-600);
+    background-color: var(--spectrum-global-color-gray-200);
+    border: 1px solid var(--spectrum-global-color-gray-300);
   }
 </style>

packages/builder/src/components/start/getAppContextMenuItems.js

@@ -15,7 +15,7 @@ const getAppContextMenuItems = ({
       callback: onDuplicate,
     },
     {
-      icon: "Export",
+      icon: "download",
       name: "Export latest edited app",
       keyBind: null,
       visible: true,
@@ -23,7 +23,7 @@ const getAppContextMenuItems = ({
       callback: onExportDev,
     },
     {
-      icon: "Export",
+      icon: "download",
       name: "Export latest published app",
       keyBind: null,
       visible: true,

packages/builder/src/dataBinding.js

@@ -761,7 +761,7 @@ const getRoleBindings = () => {
       runtimeBinding: `'${role._id}'`,
       readableBinding: `Role.${role.uiMetadata.displayName}`,
       category: "Role",
-      icon: "UserGroup",
+      icon: "user-group",
       display: { type: "string", name: role.uiMetadata.displayName },
     }
   })

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -559,7 +559,7 @@
       class="header"
     >
       {#if invitingFlow}
-        <Icon name="BackAndroid" />
+        <Icon name="step-backward" />
       {/if}
       <Heading size="S">{invitingFlow ? "Invite new user" : "Users"}</Heading>
     </div>
@@ -569,7 +569,7 @@
       {/if}
       <Icon
         color="var(--spectrum-global-color-gray-600)"
-        name="RailRightClose"
+        name="step-forward"
         hoverable
         on:click={() => {
           builderStore.hideBuilderSidePanel()

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -134,7 +134,7 @@
     {#if $appStore.initialised}
       <div class="topleftnav">
         <a href={$url("../../portal/apps")} class="linkWrapper back-to-apps">
-          <Icon size="S" hoverable name="BackAndroid" />
+          <Icon size="XL" hoverable name="home" />
         </a>
         <Tabs {selected} size="M">
           {#each $layout.children as { path, title }}
@@ -204,8 +204,7 @@
     display: contents;
   }
   .back-to-apps :global(.icon) {
-    margin-left: 12px;
+    margin-right: 10px;
-    margin-right: 12px;
   }
   .loading {
     min-height: 100%;

packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte

@@ -57,7 +57,7 @@
               class="spectrum-Icon"
               focusable="false"
             >
-              <use xlink:href="#spectrum-icon-18-WorkflowAdd" />
+              <use xlink:href="#icon-add" />
             </svg>
             <Heading size="M">You have no automations</Heading>
             <Body size="M">Let's fix that. Call the bots!</Body>

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Authentication/RestAuthenticationBuilder.svelte

@@ -70,7 +70,7 @@
     />
   {/if}
   <div>
-    <ActionButton on:click={() => openConfigModal()} icon="Add"
+    <ActionButton on:click={() => openConfigModal()} icon="add"
       >Add authentication</ActionButton
     >
   </div>

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Headers.svelte

@@ -46,7 +46,7 @@
     bindings={restBindings}
   />
   <div>
-    <ActionButton icon="Add" on:click={() => addHeader.addEntry()}>
+    <ActionButton icon="add" on:click={() => addHeader.addEntry()}>
       Add header
     </ActionButton>
   </div>

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte

@@ -63,7 +63,7 @@
     {:else}
       <div class="icon" class:open>
         <Icon
-          name="Add"
+          name="add"
           size="L"
           color="var(--spectrum-global-color-gray-600)"
         />
@@ -78,7 +78,7 @@
         hoverable
         on:click={() => (calculation = false)}
         selected={!calculation}
-        icon="Rail"
+        icon="step-forward"
       />
     </div>
     <div>

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte

@@ -205,7 +205,7 @@
       <Icon
         on:click={openTableContextMenu}
         hoverable
-        name="MoreSmallList"
+        name="more"
         color="var(--spectrum-global-color-gray-600)"
         hoverColor="var(--spectrum-global-color-gray-900)"
       />
@@ -231,7 +231,7 @@
           <Icon
             on:click={e => openViewContextMenu(e, view)}
             hoverable
-            name="MoreSmallList"
+            name="more"
             color="var(--spectrum-global-color-gray-600)"
             hoverColor="var(--spectrum-global-color-gray-900)"
           />
@@ -256,7 +256,7 @@
           <Icon
             on:click={e => openViewContextMenu(e, view)}
             hoverable
-            name="MoreSmallList"
+            name="more"
             color="var(--spectrum-global-color-gray-600)"
             hoverColor="var(--spectrum-global-color-gray-900)"
           />
@@ -273,7 +273,11 @@
   {#if overflowedViews.length}
     <ActionMenu align="right" bind:this={overflowMenu}>
       <div slot="control" let:open>
-        <ActionButton icon="ChevronDown" quiet selected={open || viewHidden}>
+        <ActionButton
+          icon="chevron-down-size300"
+          quiet
+          selected={open || viewHidden}
+        >
           {overflowedViews.length} more
         </ActionButton>
       </div>
@@ -293,7 +297,7 @@
             >
               <MenuItem icon={viewHidden ? "Checkmark" : null}>
                 {view.name}
-                <Icon slot="right" name="ChevronRight" />
+                <Icon slot="right" name="chevron-right" />
               </MenuItem>
             </a>
           </div>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte

@@ -280,7 +280,7 @@
         <Body size="S">Add your first condition to get started.</Body>
       {/if}
       <div>
-        <Button secondary icon="Add" on:click={addCondition}>
+        <Button secondary icon="add" on:click={addCondition}>
           Add condition
         </Button>
       </div>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte

@@ -3,7 +3,7 @@
 
   export let title
   export let body
-  export let icon = "HelpOutline"
+  export let icon = "help-circle"
   export let quiet = false
   export let warning = false
   export let error = false

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte

@@ -94,7 +94,7 @@
           </div>
         {/if}
         <div>
-          <ActionButton quiet icon="Add" on:click={addSubLink}>
+          <ActionButton quiet icon="add" on:click={addSubLink}>
             Add link
           </ActionButton>
         </div>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte

@@ -25,13 +25,13 @@
   import { getBindableProperties } from "dataBinding"
 
   const positionOptions = [
-    { value: "Top", barIcon: "PaddingTop" },
+    { value: "Top", barIcon: "web-page" },
-    { value: "Left", barIcon: "PaddingLeft" },
+    { value: "Left", barIcon: "layout" },
   ]
   const alignmentOptions = [
-    { value: "Left", barIcon: "TextAlignLeft" },
+    { value: "Left", barIcon: "text-align-left" },
-    { value: "Center", barIcon: "TextAlignCenter" },
+    { value: "Center", barIcon: "text-align-center" },
-    { value: "Right", barIcon: "TextAlignRight" },
+    { value: "Right", barIcon: "text-align-right" },
   ]
   const widthOptions = ["Max", "Large", "Medium", "Small"]
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <div class="info">
-  <Icon name="InfoOutline" size="S" />
+  <Icon name="info-circle" size="S" />
   <Body size="S">These settings apply to all screens</Body>
 </div>
 <Layout noPadding gap="S">

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte

@@ -13,7 +13,7 @@
 {#if $selectedScreen}
   <Panel
     title={$selectedScreen.routing.route}
-    icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
+    icon={$selectedScreen.routing.route === "/" ? "Home" : "web-page"}
     borderLeft
     wide
   >

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -289,7 +289,7 @@
     class:active={isAddingComponent}
     on:click={toggleAddComponent}
   >
-    <Icon size="XL" name="Add">Component</Icon>
+    <Icon size="XL" name="add">Component</Icon>
   </div>
 </div>
 <ConfirmDialog

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -138,7 +138,7 @@
         <Icon
           size="S"
           hoverable
-          name="MoreSmallList"
+          name="more"
           on:click={e => openContextMenu(e, component, opened)}
         />
       </NavItem>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getComponentContextMenuItems.js

@@ -24,23 +24,23 @@ const getContextMenuItems = (component, componentCollapsed) => {
     {
       icon: "Delete",
       name: "Delete",
-      keyBind: "!BackAndroid",
+      keyBind: "⌫",
       visible: true,
       disabled: false,
       callback: () => keyboardEvent("Delete"),
     },
     {
-      icon: "ChevronUp",
+      icon: "order-one-up",
       name: "Move up",
-      keyBind: "Ctrl+!ArrowUp",
+      keyBind: "Ctrl+↑",
       visible: true,
       disabled: false,
       callback: () => keyboardEvent("ArrowUp", true),
     },
     {
-      icon: "ChevronDown",
+      icon: "order-one-down",
       name: "Move down",
-      keyBind: "Ctrl+!ArrowDown",
+      keyBind: "Ctrl+↓",
       visible: true,
       disabled: false,
       callback: () => keyboardEvent("ArrowDown", true),
@@ -70,7 +70,7 @@ const getContextMenuItems = (component, componentCollapsed) => {
       callback: () => keyboardEvent("c", true),
     },
     {
-      icon: "LayersSendToBack",
+      icon: "paste",
       name: "Paste",
       keyBind: "Ctrl+V",
       visible: true,
@@ -78,7 +78,7 @@ const getContextMenuItems = (component, componentCollapsed) => {
       callback: () => keyboardEvent("v", true),
     },
     {
-      icon: "Export",
+      icon: "download",
       name: "Eject block",
       keyBind: "Ctrl+E",
       visible: isBlock && canEject,
@@ -86,33 +86,33 @@ const getContextMenuItems = (component, componentCollapsed) => {
       callback: () => keyboardEvent("e", true),
     },
     {
-      icon: "TreeExpand",
+      icon: "maximize",
       name: "Expand",
-      keyBind: "!ArrowRight",
+      keyBind: "→",
       visible: hasChildren,
       disabled: !componentCollapsed,
       callback: () => keyboardEvent("ArrowRight", false),
     },
     {
-      icon: "TreeExpandAll",
+      icon: "maximize",
       name: "Expand All",
-      keyBind: "Ctrl+!ArrowRight",
+      keyBind: "Ctrl+→",
       visible: hasChildren,
       disabled: !componentCollapsed,
       callback: () => keyboardEvent("ArrowRight", true),
     },
     {
-      icon: "TreeCollapse",
+      icon: "minimize",
       name: "Collapse",
-      keyBind: "!ArrowLeft",
+      keyBind: "←",
       visible: hasChildren,
       disabled: componentCollapsed,
       callback: () => keyboardEvent("ArrowLeft", false),
     },
     {
-      icon: "TreeCollapseAll",
+      icon: "minimize",
       name: "Collapse All",
-      keyBind: "Ctrl+!ArrowLeft",
+      keyBind: "Ctrl+←",
       visible: hasChildren,
       disabled: componentCollapsed,
       callback: () => keyboardEvent("ArrowLeft", true),

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/getScreenContextMenuItems.js

@@ -27,7 +27,7 @@ const getContextMenuItems = (component, showCopy) => {
       callback: () => storeComponentForCopy(false),
     },
     {
-      icon: "LayersSendToBack",
+      icon: "paste",
       name: "Paste",
       keyBind: "Ctrl+V",
       visible: true,