diff --git a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
index b296cb13..bd181ac2 100644
--- a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
@@ -15,7 +15,6 @@
   import { createEventDispatcher } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20";
   import Search20 from "carbon-icons-svelte/lib/Search20";
-  import { Icon } from "../../Icon";
   import searchStore from "../searchStore";
 
   const dispatch = createEventDispatcher();
@@ -96,7 +95,7 @@
         }
       }}"
     >
-      <Icon title="Search" tabindex="0" render="{Search20}" />
+      <svelte:component this="{Search20}" title="Search" tabindex="0" />
     </button>
     <input
       bind:this="{elInput}"
@@ -130,7 +129,7 @@
         }
       }}"
     >
-      <Icon title="Close" tabindex="0" render="{Close20}" />
+      <svelte:component this="{Close20}" title="Close" tabindex="0" />
     </button>
   </div>
 </div>
diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte
index 7cbad33e..067b848f 100644
--- a/src/UIShell/SideNav/HamburgerMenu.svelte
+++ b/src/UIShell/SideNav/HamburgerMenu.svelte
@@ -13,13 +13,12 @@
 
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
   import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
-  import { Icon } from "../../Icon";
 </script>
 
 <button
   bind:this="{ref}"
   type="button"
-  title="Open menu"
+  title="{ariaLabel}"
   aria-label="{ariaLabel}"
   class:bx--header__action="{true}"
   class:bx--header__menu-trigger="{true}"
@@ -28,8 +27,5 @@
   on:click
   on:click="{() => (isOpen = !isOpen)}"
 >
-  <Icon
-    title="{isOpen ? 'Close' : 'Open Menu'}"
-    render="{isOpen ? Close20 : Menu20}"
-  />
+  <svelte:component this="{isOpen ? Close20 : Menu20}" />
 </button>
diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte
index eca2e042..33244600 100644
--- a/src/UIShell/SideNav/SideNavLink.svelte
+++ b/src/UIShell/SideNav/SideNavLink.svelte
@@ -22,8 +22,6 @@
 
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
-
-  import Icon from "../../Icon/Icon.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}">
@@ -42,7 +40,7 @@
         class:bx--side-nav__icon="{true}"
         class:bx--side-nav__icon--small="{true}"
       >
-        <Icon render="{icon}" />
+        <svelte:component this="{icon}" />
       </div>
     {/if}
     <span class:bx--side-nav__link-text="{true}">{text}</span>
diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte
index c68bb5df..0625f3ac 100644
--- a/src/UIShell/SideNav/SideNavMenu.svelte
+++ b/src/UIShell/SideNav/SideNavMenu.svelte
@@ -18,7 +18,6 @@
   export let ref = null;
 
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
-  import Icon from "../../Icon/Icon.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@@ -35,7 +34,7 @@
   >
     {#if icon}
       <div class:bx--side-nav__icon="{true}">
-        <Icon render="{icon}" />
+        <svelte:component this="{icon}" />
       </div>
     {/if}
     <span class:bx--side-nav__submenu-title="{true}">{text}</span>
@@ -44,7 +43,7 @@
       class:bx--side-nav__icon--small="{true}"
       class:bx--side-nav__submenu-chevron="{true}"
     >
-      <Icon title="Open Menu" tabindex="0" render="{ChevronDown16}" />
+      <svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" />
     </div>
   </button>
   <ul role="menu" class:bx--side-nav__menu="{true}">