diff --git a/.eslintignore b/.eslintignore
index f2cb85620..3bb5359f5 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,2 @@
-/libs/spark-icons/defaults/templateSvgIcon.tsx 
+/libs/spark-icons/defaults/templateSvgIcon.js
 /libs/spark-icons/src/* 
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index 26971497c..9223f27df 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,4 @@
 /dist
 /coverage
-/libs/spark-icons/defaults/templateSvgIcon.tsx 
+/libs/spark-icons/defaults/templateSvgIcon.js
 /libs/spark-icons/src/* 
\ No newline at end of file
diff --git a/libs/spark-icons/defaults/templateSvgIcon.tsx b/libs/spark-icons/defaults/templateSvgIcon.js
similarity index 100%
rename from libs/spark-icons/defaults/templateSvgIcon.tsx
rename to libs/spark-icons/defaults/templateSvgIcon.js
diff --git a/libs/spark-icons/scripts/builder.js b/libs/spark-icons/scripts/builder.js
index dcec1041c..55dedc1f5 100644
--- a/libs/spark-icons/scripts/builder.js
+++ b/libs/spark-icons/scripts/builder.js
@@ -266,7 +266,7 @@ export async function main(options) {
 
     const [svgPaths, template] = await Promise.all([
       globAsync(path.join(options.svgDir, options.glob)),
-      fse.readFile(path.join(__dirname, '../defaults/templateSvgIcon.tsx'), {
+      fse.readFile(path.join(__dirname, '../defaults/templateSvgIcon.js'), {
         encoding: 'utf8',
       }),
     ]);
diff --git a/libs/spark-icons/src/utils/createSvgIcon.tsx b/libs/spark-icons/src/utils/createSvgIcon.tsx
index 6e0409c89..d1fce8703 100644
--- a/libs/spark-icons/src/utils/createSvgIcon.tsx
+++ b/libs/spark-icons/src/utils/createSvgIcon.tsx
@@ -3,13 +3,13 @@
 
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
+import { SvgIconProps as MuiSvgIconProps } from '@material-ui/core';
 
 export default function createSvgIcon(
   path: React.ReactNode,
   displayName: string
 ): typeof SvgIcon {
-  // @ts-expect-error Parameter 'props' implicitly has an 'any' type.
-  const Component = (props, ref) => (
+  const Component = (props: MuiSvgIconProps, ref: React.ForwardedRef<SVGSVGElement>) => (
     <SvgIcon ref={ref} {...props}>
       {path}
     </SvgIcon>
@@ -21,11 +21,7 @@ export default function createSvgIcon(
     Component.displayName = `${displayName}Icon`;
   }
 
-  // @ts-expect-error Property 'muiName' does not exist on type 'OverridableComponent<SvgIconTypeMap<{}, "svg">>'.
-  Component.muiName = SvgIcon.muiName;
+  Component.muiName = "SvgIcon";
 
-  // @ts-expect-error ype 'MemoExoticComponent<ForwardRefExoticComponent<Pick<any, string | number | symbol> & RefAttributes<SVGSVGElement>>>' is not assignable to type 'OverridableComponent<SvgIconTypeMap<{}, "svg">>'.
-  // Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'Element'.
-  // Type 'null' is not assignable to type 'ReactElement<any, any>'.
-  return React.memo(React.forwardRef(Component));
+  return React.memo(React.forwardRef(Component)) as typeof SvgIcon;
 }
diff --git a/libs/spark/stories/navbar.stories.tsx b/libs/spark/stories/navbar.stories.tsx
index 177ce8a68..3efacbfe6 100644
--- a/libs/spark/stories/navbar.stories.tsx
+++ b/libs/spark/stories/navbar.stories.tsx
@@ -27,7 +27,7 @@ const Template = (args: NavBarProps) => (
     <Toolbar>
       <PrendaMonogramDark fontSize="62px" />
       <NavbarLink href="/">
-        <HomeDuotoneIcon fillColor="transparent" />
+        <HomeDuotoneIcon />
         <span>Dashboard</span>
       </NavbarLink>
       <NavbarLink href="/" aria-current="page">
@@ -43,7 +43,7 @@ const Template = (args: NavBarProps) => (
         <span>0</span>
       </NavbarLink>
       <UserMenu>
-        <UserDuotoneIcon fillColor="pink" />
+        <UserDuotoneIcon htmlColor="pink" color="inherit" />
       </UserMenu>
     </Toolbar>
   </NavBar>