diff --git a/src/icons/Attributes.tsx b/src/icons/Attributes.tsx
index 81a3633d2..28ed79a3a 100644
--- a/src/icons/Attributes.tsx
+++ b/src/icons/Attributes.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const Attributes = createSvgIcon(
@@ -10,8 +10,7 @@ const Attributes = createSvgIcon(
   />,
   "Attributes"
 );
-Attributes.defaultProps = {
-  viewBox: "0 0 32 32"
-};
 
-export default Attributes;
+export default (props: SvgIconProps) => (
+  <Attributes {...props} viewBox="0 0 32 32" />
+);
diff --git a/src/icons/Channels.tsx b/src/icons/Channels.tsx
index ce815f854..34d1792a4 100644
--- a/src/icons/Channels.tsx
+++ b/src/icons/Channels.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const Channels = createSvgIcon(
@@ -10,8 +10,7 @@ const Channels = createSvgIcon(
   />,
   "Channels"
 );
-Channels.defaultProps = {
-  viewBox: "0 0 32 32"
-};
 
-export default Channels;
+export default (props: SvgIconProps) => (
+  <Channels {...props} viewBox="0 0 32 32" />
+);
diff --git a/src/icons/Navigation.tsx b/src/icons/Navigation.tsx
index 3bdfbebd6..ceaae82b0 100644
--- a/src/icons/Navigation.tsx
+++ b/src/icons/Navigation.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const Navigation = createSvgIcon(
@@ -10,8 +10,7 @@ const Navigation = createSvgIcon(
   />,
   "Navigation"
 );
-Navigation.defaultProps = {
-  viewBox: "0 0 32 32"
-};
 
-export default Navigation;
+export default (props: SvgIconProps) => (
+  <Navigation {...props} viewBox="0 0 32 32" />
+);
diff --git a/src/icons/PageTypes.tsx b/src/icons/PageTypes.tsx
index bae4a1d54..1e3e63b72 100644
--- a/src/icons/PageTypes.tsx
+++ b/src/icons/PageTypes.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const PageTypes = createSvgIcon(
@@ -10,8 +10,7 @@ const PageTypes = createSvgIcon(
   />,
   "PageTypes"
 );
-PageTypes.defaultProps = {
-  viewBox: "0 0 24 25"
-};
 
-export default PageTypes;
+export default (props: SvgIconProps) => (
+  <PageTypes {...props} viewBox="0 0 24 25" />
+);
diff --git a/src/icons/PermissionGroups.tsx b/src/icons/PermissionGroups.tsx
index a41dd7cd8..8f4efadb9 100644
--- a/src/icons/PermissionGroups.tsx
+++ b/src/icons/PermissionGroups.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const PermissionGroups = createSvgIcon(
@@ -10,8 +10,7 @@ const PermissionGroups = createSvgIcon(
   />,
   "PermissionGroups"
 );
-PermissionGroups.defaultProps = {
-  viewBox: "0 0 32 32"
-};
 
-export default PermissionGroups;
+export default (props: SvgIconProps) => (
+  <PermissionGroups {...props} viewBox="0 0 32 32" />
+);
diff --git a/src/icons/ProductTypes.tsx b/src/icons/ProductTypes.tsx
index 69bab989d..c6c317d34 100644
--- a/src/icons/ProductTypes.tsx
+++ b/src/icons/ProductTypes.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const ProductTypes = createSvgIcon(
@@ -12,8 +12,7 @@ const ProductTypes = createSvgIcon(
   </>,
   "ProductTypes"
 );
-ProductTypes.defaultProps = {
-  viewBox: "0 0 44 44"
-};
 
-export default ProductTypes;
+export default (props: SvgIconProps) => (
+  <ProductTypes {...props} viewBox="0 0 44 44" />
+);
diff --git a/src/icons/ShippingMethods.tsx b/src/icons/ShippingMethods.tsx
index 8fe116fdb..04ce531fe 100644
--- a/src/icons/ShippingMethods.tsx
+++ b/src/icons/ShippingMethods.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const ShippingMethods = createSvgIcon(
@@ -10,8 +10,7 @@ const ShippingMethods = createSvgIcon(
   />,
   "ShippingMethods"
 );
-ShippingMethods.defaultProps = {
-  viewBox: "0 0 32 32"
-};
 
-export default ShippingMethods;
+export default (props: SvgIconProps) => (
+  <ShippingMethods {...props} viewBox="0 0 32 32" />
+);
diff --git a/src/icons/SiteSettings.tsx b/src/icons/SiteSettings.tsx
index ecd7d8e6a..192b49ea4 100644
--- a/src/icons/SiteSettings.tsx
+++ b/src/icons/SiteSettings.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const SiteSettings = createSvgIcon(
@@ -18,8 +18,7 @@ const SiteSettings = createSvgIcon(
   </>,
   "SiteSettings"
 );
-SiteSettings.defaultProps = {
-  viewBox: "0 0 32 32"
-};
 
-export default SiteSettings;
+export default (props: SvgIconProps) => (
+  <SiteSettings {...props} viewBox="0 0 32 32" />
+);
diff --git a/src/icons/StaffMembers.tsx b/src/icons/StaffMembers.tsx
index 1520535a9..575a730b6 100644
--- a/src/icons/StaffMembers.tsx
+++ b/src/icons/StaffMembers.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const StaffMembers = createSvgIcon(
@@ -10,8 +10,7 @@ const StaffMembers = createSvgIcon(
   />,
   "StaffMembers"
 );
-StaffMembers.defaultProps = {
-  viewBox: "0 0 32 32"
-};
 
-export default StaffMembers;
+export default (props: SvgIconProps) => (
+  <StaffMembers {...props} viewBox="0 0 32 32" />
+);
diff --git a/src/icons/Taxes.tsx b/src/icons/Taxes.tsx
index 87373560f..9905be6ec 100644
--- a/src/icons/Taxes.tsx
+++ b/src/icons/Taxes.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const Taxes = createSvgIcon(
@@ -10,8 +10,7 @@ const Taxes = createSvgIcon(
   />,
   "Taxes"
 );
-Taxes.defaultProps = {
-  viewBox: "0 0 32 32"
-};
 
-export default Taxes;
+export default (props: SvgIconProps) => (
+  <Taxes {...props} viewBox="0 0 32 32" />
+);
diff --git a/src/icons/Warehouses.tsx b/src/icons/Warehouses.tsx
index 3ab8229f7..1d9f363e1 100644
--- a/src/icons/Warehouses.tsx
+++ b/src/icons/Warehouses.tsx
@@ -1,4 +1,4 @@
-import { createSvgIcon } from "@material-ui/core/utils";
+import { createSvgIcon, SvgIconProps } from "@material-ui/core";
 import React from "react";
 
 const Warehouses = createSvgIcon(
@@ -10,8 +10,7 @@ const Warehouses = createSvgIcon(
   />,
   "Warehouses"
 );
-Warehouses.defaultProps = {
-  viewBox: "0 0 32 32"
-};
 
-export default Warehouses;
+export default (props: SvgIconProps) => (
+  <Warehouses {...props} viewBox="0 0 32 32" />
+);