diff --git a/docs/src/pages/components/icons/FontAwesomeIcon.js b/docs/src/pages/components/icons/FontAwesomeIcon.js
index 9432468180bb25..41ad74513f942f 100644
--- a/docs/src/pages/components/icons/FontAwesomeIcon.js
+++ b/docs/src/pages/components/icons/FontAwesomeIcon.js
@@ -30,14 +30,10 @@ export default function FontAwesomeIcon() {
       <Icon
         baseClassName="fas"
         className="fa-plus-circle"
-        style={{ color: green[500] }}
+        sx={{ color: green[500] }}
       />
       <Icon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
-      <Icon
-        baseClassName="fas"
-        className="fa-plus-circle"
-        style={{ fontSize: 30 }}
-      />
+      <Icon baseClassName="fas" className="fa-plus-circle" sx={{ fontSize: 30 }} />
     </Box>
   );
 }
diff --git a/docs/src/pages/components/icons/FontAwesomeIcon.tsx b/docs/src/pages/components/icons/FontAwesomeIcon.tsx
index 0e9220d1712fca..2f8cf9a62a2cb9 100644
--- a/docs/src/pages/components/icons/FontAwesomeIcon.tsx
+++ b/docs/src/pages/components/icons/FontAwesomeIcon.tsx
@@ -30,14 +30,10 @@ export default function FontAwesomeIcon() {
       <Icon
         baseClassName="fas"
         className="fa-plus-circle"
-        style={{ color: green[500] }}
+        sx={{ color: green[500] }}
       />
       <Icon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
-      <Icon
-        baseClassName="fas"
-        className="fa-plus-circle"
-        style={{ fontSize: 30 }}
-      />
+      <Icon baseClassName="fas" className="fa-plus-circle" sx={{ fontSize: 30 }} />
     </Box>
   );
 }
diff --git a/docs/src/pages/components/icons/Icons.js b/docs/src/pages/components/icons/Icons.js
index 410d2bd296eb5e..11b1b2e9d7776d 100644
--- a/docs/src/pages/components/icons/Icons.js
+++ b/docs/src/pages/components/icons/Icons.js
@@ -14,9 +14,9 @@ export default function Icons() {
     >
       <Icon>add_circle</Icon>
       <Icon color="primary">add_circle</Icon>
-      <Icon style={{ color: green[500] }}>add_circle</Icon>
+      <Icon sx={{ color: green[500] }}>add_circle</Icon>
       <Icon fontSize="small">add_circle</Icon>
-      <Icon style={{ fontSize: 30 }}>add_circle</Icon>
+      <Icon sx={{ fontSize: 30 }}>add_circle</Icon>
     </Box>
   );
 }
diff --git a/docs/src/pages/components/icons/Icons.tsx b/docs/src/pages/components/icons/Icons.tsx
index 410d2bd296eb5e..11b1b2e9d7776d 100644
--- a/docs/src/pages/components/icons/Icons.tsx
+++ b/docs/src/pages/components/icons/Icons.tsx
@@ -14,9 +14,9 @@ export default function Icons() {
     >
       <Icon>add_circle</Icon>
       <Icon color="primary">add_circle</Icon>
-      <Icon style={{ color: green[500] }}>add_circle</Icon>
+      <Icon sx={{ color: green[500] }}>add_circle</Icon>
       <Icon fontSize="small">add_circle</Icon>
-      <Icon style={{ fontSize: 30 }}>add_circle</Icon>
+      <Icon sx={{ fontSize: 30 }}>add_circle</Icon>
     </Box>
   );
 }