diff --git a/client/src/assets/icons/APIIcon.js b/client/src/assets/icons/API-icon.tsx
similarity index 92%
rename from client/src/assets/icons/APIIcon.js
rename to client/src/assets/icons/API-icon.tsx
index c798554d83..8e14713fc7 100644
--- a/client/src/assets/icons/APIIcon.js
+++ b/client/src/assets/icons/API-icon.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function APIIcon(props) {
+function APIIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/D3Icon.js b/client/src/assets/icons/D3-icon.tsx
similarity index 87%
rename from client/src/assets/icons/D3Icon.js
rename to client/src/assets/icons/D3-icon.tsx
index 3e7a8341e2..8793dd6722 100644
--- a/client/src/assets/icons/D3Icon.js
+++ b/client/src/assets/icons/D3-icon.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function D3Icon(props) {
+function D3Icon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/FreeCodeCampLogo.js b/client/src/assets/icons/FreeCodeCamp-logo.tsx
similarity index 99%
rename from client/src/assets/icons/FreeCodeCampLogo.js
rename to client/src/assets/icons/FreeCodeCamp-logo.tsx
index 7c035e37c3..b325af856f 100644
--- a/client/src/assets/icons/FreeCodeCampLogo.js
+++ b/client/src/assets/icons/FreeCodeCamp-logo.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function FreeCodeCampLogo() {
+function FreeCodeCampLogo(): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/JavaScriptIcon.js b/client/src/assets/icons/JavaScript-icon.tsx
similarity index 90%
rename from client/src/assets/icons/JavaScriptIcon.js
rename to client/src/assets/icons/JavaScript-icon.tsx
index 00afba058e..08b41ad8d0 100644
--- a/client/src/assets/icons/JavaScriptIcon.js
+++ b/client/src/assets/icons/JavaScript-icon.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function JavaScriptIcon(props) {
+function JavaScriptIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/ReactIcon.js b/client/src/assets/icons/React-icon.tsx
similarity index 96%
rename from client/src/assets/icons/ReactIcon.js
rename to client/src/assets/icons/React-icon.tsx
index 037a66d193..a170d652de 100644
--- a/client/src/assets/icons/ReactIcon.js
+++ b/client/src/assets/icons/React-icon.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ReactIcon(props) {
+function ReactIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/TensorflowIcon.js b/client/src/assets/icons/Tensorflow-icon.tsx
similarity index 84%
rename from client/src/assets/icons/TensorflowIcon.js
rename to client/src/assets/icons/Tensorflow-icon.tsx
index acc0f31321..341d1c64ac 100644
--- a/client/src/assets/icons/TensorflowIcon.js
+++ b/client/src/assets/icons/Tensorflow-icon.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function TensorflowIcon(props) {
+function TensorflowIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/Algorithm.js b/client/src/assets/icons/algorithm.tsx
similarity index 92%
rename from client/src/assets/icons/Algorithm.js
rename to client/src/assets/icons/algorithm.tsx
index 3b4ec28558..e92de43686 100644
--- a/client/src/assets/icons/Algorithm.js
+++ b/client/src/assets/icons/algorithm.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Algorithm(props) {
+function Algorithm(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/Analytics.js b/client/src/assets/icons/analytics.tsx
similarity index 93%
rename from client/src/assets/icons/Analytics.js
rename to client/src/assets/icons/analytics.tsx
index 3d1263b173..39aef5ef00 100644
--- a/client/src/assets/icons/Analytics.js
+++ b/client/src/assets/icons/analytics.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Analytics(props) {
+function Analytics(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/Caret.js b/client/src/assets/icons/caret.tsx
similarity index 93%
rename from client/src/assets/icons/Caret.js
rename to client/src/assets/icons/caret.tsx
index 62e07f4361..70cd4e0573 100644
--- a/client/src/assets/icons/Caret.js
+++ b/client/src/assets/icons/caret.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-function Caret() {
+function Caret(): JSX.Element {
   return (
     <svg viewBox='0 0 100 100' width='25px'>
       <polygon
diff --git a/client/src/assets/icons/CertificationIcon.js b/client/src/assets/icons/certification-icon.tsx
similarity index 97%
rename from client/src/assets/icons/CertificationIcon.js
rename to client/src/assets/icons/certification-icon.tsx
index 0d7dc9edb3..83e1af3870 100644
--- a/client/src/assets/icons/CertificationIcon.js
+++ b/client/src/assets/icons/certification-icon.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 
-function CertificationIcon() {
+function CertificationIcon(): JSX.Element {
   return (
     <svg
       height='248.21'
diff --git a/client/src/assets/icons/Clipboard.js b/client/src/assets/icons/clipboard.tsx
similarity index 92%
rename from client/src/assets/icons/Clipboard.js
rename to client/src/assets/icons/clipboard.tsx
index f9a76382fd..e8bbdf5560 100644
--- a/client/src/assets/icons/Clipboard.js
+++ b/client/src/assets/icons/clipboard.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Clipboard(props) {
+function Clipboard(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/Cup.js b/client/src/assets/icons/cup.tsx
similarity index 95%
rename from client/src/assets/icons/Cup.js
rename to client/src/assets/icons/cup.tsx
index 05b72a63aa..673a973bab 100644
--- a/client/src/assets/icons/Cup.js
+++ b/client/src/assets/icons/cup.tsx
@@ -1,10 +1,9 @@
-/* eslint-disable max-len */
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
-
-function Cup(props) {
+function Cup(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -57,6 +56,5 @@ function Cup(props) {
 }
 
 Cup.displayName = 'Cup';
-Cup.propTypes = propTypes;
 
 export default Cup;
diff --git a/client/src/assets/icons/DefaultAvatar.js b/client/src/assets/icons/default-avatar.tsx
similarity index 98%
rename from client/src/assets/icons/DefaultAvatar.js
rename to client/src/assets/icons/default-avatar.tsx
index c676992997..0f03fc9f73 100644
--- a/client/src/assets/icons/DefaultAvatar.js
+++ b/client/src/assets/icons/default-avatar.tsx
@@ -1,8 +1,9 @@
-/* eslint-disable max-len */
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function DefaultAvatar(props) {
+function DefaultAvatar(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/DonateWithPayPal.js b/client/src/assets/icons/donate-with-PayPal.tsx
similarity index 96%
rename from client/src/assets/icons/DonateWithPayPal.js
rename to client/src/assets/icons/donate-with-PayPal.tsx
index 936aaed203..c9f8cbce0a 100644
--- a/client/src/assets/icons/DonateWithPayPal.js
+++ b/client/src/assets/icons/donate-with-PayPal.tsx
@@ -2,9 +2,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
-
-function DonateWithPayPal(props) {
+function DonateWithPayPal(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -56,6 +56,5 @@ function DonateWithPayPal(props) {
 }
 
 DonateWithPayPal.displayName = 'DonateWithPayPal';
-DonateWithPayPal.propTypes = propTypes;
 
 export default DonateWithPayPal;
diff --git a/client/src/assets/icons/Fail.js b/client/src/assets/icons/fail.tsx
similarity index 84%
rename from client/src/assets/icons/Fail.js
rename to client/src/assets/icons/fail.tsx
index 6ee7ba7f61..0e23347b02 100644
--- a/client/src/assets/icons/Fail.js
+++ b/client/src/assets/icons/fail.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function RedFail() {
+function RedFail(): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -20,16 +20,12 @@ function RedFail() {
           r='95'
           stroke='(var--primary-color)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
         />
         <rect
           fill='var(--primary-background)'
           height='30'
           stroke='var(--primary-background)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
           transform='rotate(-45, 100, 103.321)'
           width='128.85878'
           x='35'
@@ -40,8 +36,6 @@ function RedFail() {
           height='30'
           stroke='var(--primary-background)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
           transform='rotate(45, 99.5, 104)'
           width='128.85878'
           x='35'
diff --git a/client/src/assets/icons/GreenNotCompleted.js b/client/src/assets/icons/green-not-completed.tsx
similarity index 82%
rename from client/src/assets/icons/GreenNotCompleted.js
rename to client/src/assets/icons/green-not-completed.tsx
index af506fbf75..52cf480ee7 100644
--- a/client/src/assets/icons/GreenNotCompleted.js
+++ b/client/src/assets/icons/green-not-completed.tsx
@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
-
-function GreenNotCompleted(props) {
+function GreenNotCompleted(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -25,8 +25,6 @@ function GreenNotCompleted(props) {
             r='95'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             strokeWidth='10'
           />
         </g>
@@ -36,6 +34,5 @@ function GreenNotCompleted(props) {
 }
 
 GreenNotCompleted.displayName = 'GreenNotCompleted';
-GreenNotCompleted.propTypes = propTypes;
 
 export default GreenNotCompleted;
diff --git a/client/src/assets/icons/GreenPass.js b/client/src/assets/icons/green-pass.tsx
similarity index 85%
rename from client/src/assets/icons/GreenPass.js
rename to client/src/assets/icons/green-pass.tsx
index c5eddb7af7..e2ff150bd4 100644
--- a/client/src/assets/icons/GreenPass.js
+++ b/client/src/assets/icons/green-pass.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function GreenPass(props) {
+function GreenPass(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -23,16 +25,12 @@ function GreenPass(props) {
             r='95'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
           />
           <rect
             fill='var(--primary-background)'
             height='30'
             stroke='var(--primary-background)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-45, 120, 106.321)'
             width='128.85878'
             x='55.57059'
@@ -43,8 +41,6 @@ function GreenPass(props) {
             height='30'
             stroke='var(--primary-background)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(45, 66.75, 123.75)'
             width='80.66548'
             x='26.41726'
diff --git a/client/src/assets/icons/Heart.js b/client/src/assets/icons/heart.tsx
similarity index 90%
rename from client/src/assets/icons/Heart.js
rename to client/src/assets/icons/heart.tsx
index 2867d24d84..93d0d25070 100644
--- a/client/src/assets/icons/Heart.js
+++ b/client/src/assets/icons/heart.tsx
@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
-
-function Heart(props) {
+function Heart(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -36,6 +36,5 @@ function Heart(props) {
 }
 
 Heart.displayName = 'Heart';
-Heart.propTypes = propTypes;
 
 export default Heart;
diff --git a/client/src/assets/icons/index.js b/client/src/assets/icons/index.js
deleted file mode 100644
index c8a1a5dd80..0000000000
--- a/client/src/assets/icons/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import ResponsiveDesign from './ResponsiveDesign';
-import JavaScriptIcon from './JavaScriptIcon';
-import ReactIcon from './ReactIcon';
-import D3Icon from './D3Icon';
-import APIIcon from './APIIcon';
-import Clipboard from './Clipboard';
-import PythonIcon from './PythonIcon';
-import Analytics from './Analytics';
-import Shield from './Shield';
-import TensorflowIcon from './TensorflowIcon';
-import Algorithm from './Algorithm';
-
-const generateIconComponent = (superBlock, className) => {
-  const iconMap = {
-    'responsive-web-design': ResponsiveDesign,
-    'javascript-algorithms-and-data-structures': JavaScriptIcon,
-    'front-end-libraries': ReactIcon,
-    'data-visualization': D3Icon,
-    'apis-and-microservices': APIIcon,
-    'quality-assurance': Clipboard,
-    'scientific-computing-with-python': PythonIcon,
-    'data-analysis-with-python': Analytics,
-    'information-security': Shield,
-    'machine-learning-with-python': TensorflowIcon,
-    'coding-interview-prep': Algorithm
-  };
-  // fallback in case super block doesn't exist and for tests
-  const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
-
-  return <Icon className={className} />;
-};
-
-export { generateIconComponent };
diff --git a/client/src/assets/icons/index.tsx b/client/src/assets/icons/index.tsx
new file mode 100644
index 0000000000..3fe4a33b3d
--- /dev/null
+++ b/client/src/assets/icons/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import ResponsiveDesign from './responsive-design';
+import JavaScriptIcon from './JavaScript-icon';
+import ReactIcon from './React-icon';
+import D3Icon from './D3-icon';
+import APIIcon from './API-icon';
+import Clipboard from './clipboard';
+import PythonIcon from './python-icon';
+import Analytics from './analytics';
+import Shield from './shield';
+import TensorflowIcon from './Tensorflow-icon';
+import Algorithm from './algorithm';
+
+const iconMap = {
+  'responsive-web-design': ResponsiveDesign,
+  'javascript-algorithms-and-data-structures': JavaScriptIcon,
+  'front-end-libraries': ReactIcon,
+  'data-visualization': D3Icon,
+  'apis-and-microservices': APIIcon,
+  'quality-assurance': Clipboard,
+  'scientific-computing-with-python': PythonIcon,
+  'data-analysis-with-python': Analytics,
+  'information-security': Shield,
+  'machine-learning-with-python': TensorflowIcon,
+  'coding-interview-prep': Algorithm
+};
+
+type SuperBlock = keyof typeof iconMap;
+
+const generateIconComponent = (
+  superBlock: SuperBlock,
+  className: string
+): JSX.Element => {
+  // fallback in case super block doesn't exist and for tests
+  const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
+
+  return <Icon className={className} />;
+};
+
+export { generateIconComponent };
diff --git a/client/src/assets/icons/Initial.js b/client/src/assets/icons/initial.tsx
similarity index 94%
rename from client/src/assets/icons/Initial.js
rename to client/src/assets/icons/initial.tsx
index 82eba13614..3dc99c0774 100644
--- a/client/src/assets/icons/Initial.js
+++ b/client/src/assets/icons/initial.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Initial(props) {
+function Initial(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -21,8 +23,6 @@ function Initial(props) {
           r='95'
           stroke='var(--primary-color)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
         />
         <svg
           height='200'
diff --git a/client/src/assets/icons/IntroInformation.js b/client/src/assets/icons/intro-information.tsx
similarity index 81%
rename from client/src/assets/icons/IntroInformation.js
rename to client/src/assets/icons/intro-information.tsx
index 81c3965acb..79ff1c56ca 100644
--- a/client/src/assets/icons/IntroInformation.js
+++ b/client/src/assets/icons/intro-information.tsx
@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
-
-function IntroInformation(props) {
+function IntroInformation(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -25,8 +25,6 @@ function IntroInformation(props) {
             r='95'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             strokeWidth='10'
           />
           <circle
@@ -36,8 +34,6 @@ function IntroInformation(props) {
             r='45'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             strokeWidth='10'
           />
         </g>
@@ -47,6 +43,5 @@ function IntroInformation(props) {
 }
 
 IntroInformation.displayName = 'IntroInformation';
-IntroInformation.propTypes = propTypes;
 
 export default IntroInformation;
diff --git a/client/src/assets/icons/LinkButton.js b/client/src/assets/icons/link-button.tsx
similarity index 87%
rename from client/src/assets/icons/LinkButton.js
rename to client/src/assets/icons/link-button.tsx
index 2501f384d7..799df61f90 100644
--- a/client/src/assets/icons/LinkButton.js
+++ b/client/src/assets/icons/link-button.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
-export default function LinkButton(props) {
+export default function LinkButton(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   return (
     <svg
       aria-hidden='true'
diff --git a/client/src/assets/icons/PythonIcon.js b/client/src/assets/icons/python-icon.tsx
similarity index 91%
rename from client/src/assets/icons/PythonIcon.js
rename to client/src/assets/icons/python-icon.tsx
index a9f562ff7e..5d1188488a 100644
--- a/client/src/assets/icons/PythonIcon.js
+++ b/client/src/assets/icons/python-icon.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function PythonIcon(props) {
+function PythonIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/ResponsiveDesign.js b/client/src/assets/icons/responsive-design.tsx
similarity index 86%
rename from client/src/assets/icons/ResponsiveDesign.js
rename to client/src/assets/icons/responsive-design.tsx
index e32cb6f302..0e5e398954 100644
--- a/client/src/assets/icons/ResponsiveDesign.js
+++ b/client/src/assets/icons/responsive-design.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ResponsiveDesign(props) {
+function ResponsiveDesign(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/Shield.js b/client/src/assets/icons/shield.tsx
similarity index 88%
rename from client/src/assets/icons/Shield.js
rename to client/src/assets/icons/shield.tsx
index dcfbc2d09f..cb6c408abb 100644
--- a/client/src/assets/icons/Shield.js
+++ b/client/src/assets/icons/shield.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Shield(props) {
+function Shield(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
diff --git a/client/src/assets/icons/Spacer.js b/client/src/assets/icons/spacer.tsx
similarity index 78%
rename from client/src/assets/icons/Spacer.js
rename to client/src/assets/icons/spacer.tsx
index e1bdfbf4c5..d6dff8c718 100644
--- a/client/src/assets/icons/Spacer.js
+++ b/client/src/assets/icons/spacer.tsx
@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Spacer(props) {
+// eslint-disable-next-line
+function Spacer(props: any): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -10,6 +11,7 @@ function Spacer(props) {
       <svg
         className='tick'
         height='50'
+        paddingTop='5'
         viewBox='-10 -45 200 200'
         width='50'
         xmlns='http://www.w3.org/2000/svg'
@@ -17,7 +19,7 @@ function Spacer(props) {
       >
         <g>
           <title>{t('icons.spacer')}</title>
-          <rect fillOpacity='0' height='200' paddingtop='5' width='200' />
+          <rect fillOpacity='0' height='200' width='200' />
         </g>
       </svg>
     </Fragment>
diff --git a/client/src/assets/icons/ToggleCheck.js b/client/src/assets/icons/toggle-check.tsx
similarity index 83%
rename from client/src/assets/icons/ToggleCheck.js
rename to client/src/assets/icons/toggle-check.tsx
index 07165d29c7..7e3e341d56 100644
--- a/client/src/assets/icons/ToggleCheck.js
+++ b/client/src/assets/icons/toggle-check.tsx
@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ToggleCheck(props) {
+function ToggleCheck(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -21,8 +23,6 @@ function ToggleCheck(props) {
             fill='white'
             height='60'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-45, 66.75, 123.75)'
             width='148.85878'
             x='65.57059'
@@ -32,8 +32,6 @@ function ToggleCheck(props) {
             fill='white'
             height='60'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(45, 66.75, 123.75)'
             width='120.66548'
             x='-42.41726'
@@ -43,8 +41,6 @@ function ToggleCheck(props) {
             fill='black'
             height='30'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-45, 66.75, 123.75)'
             width='128.85878'
             x='65.57059'
@@ -54,8 +50,6 @@ function ToggleCheck(props) {
             fill='black'
             height='30'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-135, 66.75, 123.75)'
             width='88.85878'
             x='68.57059'
diff --git a/client/src/client-only-routes/ShowCertification.js b/client/src/client-only-routes/ShowCertification.js
index d70975eaac..7c2c8a8415 100644
--- a/client/src/client-only-routes/ShowCertification.js
+++ b/client/src/client-only-routes/ShowCertification.js
@@ -7,7 +7,7 @@ import { createSelector } from 'reselect';
 import { Grid, Row, Col, Image, Button } from '@freecodecamp/react-bootstrap';
 
 import ShowProjectLinks from './ShowProjectLinks';
-import FreeCodeCampLogo from '../assets/icons/FreeCodeCampLogo';
+import FreeCodeCampLogo from '../assets/icons/FreeCodeCamp-logo';
 // eslint-disable-next-line max-len
 import DonateForm from '../components/Donation/DonateForm';
 import { Trans, useTranslation } from 'react-i18next';
diff --git a/client/src/components/Donation/DonationModal.js b/client/src/components/Donation/DonationModal.js
index 8ae23380a8..984ee544e4 100644
--- a/client/src/components/Donation/DonationModal.js
+++ b/client/src/components/Donation/DonationModal.js
@@ -6,8 +6,8 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Modal, Button, Col, Row } from '@freecodecamp/react-bootstrap';
 import { Spacer } from '../helpers';
-import Heart from '../../assets/icons/Heart';
-import Cup from '../../assets/icons/Cup';
+import Heart from '../../assets/icons/heart';
+import Cup from '../../assets/icons/cup';
 import DonateForm from './DonateForm';
 import { modalDefaultDonation } from '../../../../config/donation-settings';
 import { useTranslation } from 'react-i18next';
diff --git a/client/src/components/Header/components/NavLogo.js b/client/src/components/Header/components/NavLogo.js
index 8e91d185a5..49b3917a1b 100644
--- a/client/src/components/Header/components/NavLogo.js
+++ b/client/src/components/Header/components/NavLogo.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import FreeCodeCampLogo from '../../../assets/icons/FreeCodeCampLogo';
+import FreeCodeCampLogo from '../../../assets/icons/FreeCodeCamp-logo';
 
 function NavLogo() {
   return <FreeCodeCampLogo />;
diff --git a/client/src/components/Map/index.js b/client/src/components/Map/index.js
index 3675c3f59b..cfdf208240 100644
--- a/client/src/components/Map/index.js
+++ b/client/src/components/Map/index.js
@@ -5,7 +5,7 @@ import i18next from 'i18next';
 import { generateIconComponent } from '../../assets/icons';
 
 import { Link, Spacer } from '../helpers';
-import LinkButton from '../../assets/icons/LinkButton';
+import LinkButton from '../../assets/icons/link-button';
 import './map.css';
 import { isAuditedCert } from '../../../../utils/is-audited';
 import envData from '../../../../config/env.json';
diff --git a/client/src/components/helpers/avatar-renderer.tsx b/client/src/components/helpers/avatar-renderer.tsx
index ad40555154..1c7d598795 100644
--- a/client/src/components/helpers/avatar-renderer.tsx
+++ b/client/src/components/helpers/avatar-renderer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Image } from '@freecodecamp/react-bootstrap';
-import DefaultAvatar from '../../assets/icons/DefaultAvatar';
+import DefaultAvatar from '../../assets/icons/default-avatar';
 import { defaultUserImage } from '../../../../config/misc';
 import { borderColorPicker } from '.';
 import { useTranslation } from 'react-i18next';
diff --git a/client/src/components/helpers/toggle-button.tsx b/client/src/components/helpers/toggle-button.tsx
index 898cb28311..9ffdecb2ed 100644
--- a/client/src/components/helpers/toggle-button.tsx
+++ b/client/src/components/helpers/toggle-button.tsx
@@ -5,8 +5,8 @@ import {
 } from '@freecodecamp/react-bootstrap';
 
 import './toggle-button.css';
-import ToggleCheck from '../../assets/icons/ToggleCheck';
-import Spacer from '../../assets/icons/Spacer';
+import ToggleCheck from '../../assets/icons/toggle-check';
+import Spacer from '../../assets/icons/spacer';
 
 interface ButtonProps {
   name: string;
diff --git a/client/src/components/profile/components/TimeLine.js b/client/src/components/profile/components/TimeLine.js
index 8aa216bb28..071d8f1e2e 100644
--- a/client/src/components/profile/components/TimeLine.js
+++ b/client/src/components/profile/components/TimeLine.js
@@ -23,7 +23,7 @@ import {
 } from '../../../../../utils';
 
 import { maybeUrlRE } from '../../../utils';
-import CertificationIcon from '../../../assets/icons/CertificationIcon';
+import CertificationIcon from '../../../assets/icons/certification-icon';
 
 import { langCodes } from '../../../../../config/i18n/all-langs';
 import envData from '../../../../../config/env.json';
diff --git a/client/src/templates/Challenges/components/Challenge-Title.js b/client/src/templates/Challenges/components/Challenge-Title.js
index 2ca72b7406..fcecdb4287 100644
--- a/client/src/templates/Challenges/components/Challenge-Title.js
+++ b/client/src/templates/Challenges/components/Challenge-Title.js
@@ -4,7 +4,7 @@ import { Link } from '../../../components/helpers/index';
 import i18next from 'i18next';
 
 import './challenge-title.css';
-import GreenPass from '../../../assets/icons/GreenPass';
+import GreenPass from '../../../assets/icons/green-pass';
 import BreadCrumb from './BreadCrumb';
 
 const propTypes = {
diff --git a/client/src/templates/Challenges/components/CompletionModalBody.js b/client/src/templates/Challenges/components/CompletionModalBody.js
index 1af6745b0f..83847f0ca7 100644
--- a/client/src/templates/Challenges/components/CompletionModalBody.js
+++ b/client/src/templates/Challenges/components/CompletionModalBody.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import BezierEasing from 'bezier-easing';
-import GreenPass from '../../../assets/icons/GreenPass';
+import GreenPass from '../../../assets/icons/green-pass';
 import { withTranslation } from 'react-i18next';
 
 const propTypes = {
diff --git a/client/src/templates/Challenges/components/Test-Suite.js b/client/src/templates/Challenges/components/Test-Suite.js
index bf6a8bb0cb..903d2c64ab 100644
--- a/client/src/templates/Challenges/components/Test-Suite.js
+++ b/client/src/templates/Challenges/components/Test-Suite.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import GreenPass from '../../../assets/icons/GreenPass';
-import Fail from '../../../assets/icons/Fail';
-import Initial from '../../../assets/icons/Initial';
+import GreenPass from '../../../assets/icons/green-pass';
+import Fail from '../../../assets/icons/fail';
+import Initial from '../../../assets/icons/initial';
 
 import './test-suite.css';
 
diff --git a/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap b/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
index 4953c740fe..293a4fe488 100644
--- a/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
+++ b/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
@@ -71,16 +71,12 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
             r="95"
             stroke="var(--primary-color)"
             strokeDasharray="null"
-            strokeLinecap="null"
-            strokeLinejoin="null"
           />
           <rect
             fill="var(--primary-background)"
             height="30"
             stroke="var(--primary-background)"
             strokeDasharray="null"
-            strokeLinecap="null"
-            strokeLinejoin="null"
             transform="rotate(-45, 120, 106.321)"
             width="128.85878"
             x="55.57059"
@@ -91,8 +87,6 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
             height="30"
             stroke="var(--primary-background)"
             strokeDasharray="null"
-            strokeLinecap="null"
-            strokeLinejoin="null"
             transform="rotate(45, 66.75, 123.75)"
             width="80.66548"
             x="26.41726"
diff --git a/client/src/templates/Challenges/components/__snapshots__/CompletionModalBody.test.js.snap b/client/src/templates/Challenges/components/__snapshots__/CompletionModalBody.test.js.snap
index c07104cca5..5e9fe99584 100644
--- a/client/src/templates/Challenges/components/__snapshots__/CompletionModalBody.test.js.snap
+++ b/client/src/templates/Challenges/components/__snapshots__/CompletionModalBody.test.js.snap
@@ -28,16 +28,12 @@ exports[`<CompletionModalBody /> matches snapshot 1`] = `
           r="95"
           stroke="var(--primary-color)"
           stroke-dasharray="null"
-          stroke-linecap="null"
-          stroke-linejoin="null"
         />
         <rect
           fill="var(--primary-background)"
           height="30"
           stroke="var(--primary-background)"
           stroke-dasharray="null"
-          stroke-linecap="null"
-          stroke-linejoin="null"
           transform="rotate(-45, 120, 106.321)"
           width="128.85878"
           x="55.57059"
@@ -48,8 +44,6 @@ exports[`<CompletionModalBody /> matches snapshot 1`] = `
           height="30"
           stroke="var(--primary-background)"
           stroke-dasharray="null"
-          stroke-linecap="null"
-          stroke-linejoin="null"
           transform="rotate(45, 66.75, 123.75)"
           width="80.66548"
           x="26.41726"
diff --git a/client/src/templates/Introduction/components/Block.js b/client/src/templates/Introduction/components/Block.js
index 5fa04530e2..b55df9a13f 100644
--- a/client/src/templates/Introduction/components/Block.js
+++ b/client/src/templates/Introduction/components/Block.js
@@ -9,9 +9,9 @@ import ScrollableAnchor from 'react-scrollable-anchor';
 import { makeExpandedBlockSelector, toggleBlock } from '../redux';
 import { completedChallengesSelector, executeGA } from '../../../redux';
 import Challenges from './Challenges';
-import Caret from '../../../assets/icons/Caret';
-import GreenPass from '../../../assets/icons/GreenPass';
-import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
+import Caret from '../../../assets/icons/caret';
+import GreenPass from '../../../assets/icons/green-pass';
+import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 import { isAuditedCert } from '../../../../../utils/is-audited';
 import envData from '../../../../../config/env.json';
 import { Link } from '../../../components/helpers/';
diff --git a/client/src/templates/Introduction/components/CertChallenge.js b/client/src/templates/Introduction/components/CertChallenge.js
index 24e4f4f1fa..c42485f117 100644
--- a/client/src/templates/Introduction/components/CertChallenge.js
+++ b/client/src/templates/Introduction/components/CertChallenge.js
@@ -5,9 +5,9 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { withTranslation } from 'react-i18next';
 
-import CertificationIcon from '../../../assets/icons/CertificationIcon';
-import GreenPass from '../../../assets/icons/GreenPass';
-import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
+import CertificationIcon from '../../../assets/icons/certification-icon';
+import GreenPass from '../../../assets/icons/green-pass';
+import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 import { certificatesByNameSelector } from '../../../redux';
 import { CurrentCertsType, User } from '../../../redux/prop-types';
 import { certMap } from '../../../resources/certAndProjectMap';
diff --git a/client/src/templates/Introduction/components/CertificationCard.js b/client/src/templates/Introduction/components/CertificationCard.js
index b88ffeddf6..d2ed807e26 100644
--- a/client/src/templates/Introduction/components/CertificationCard.js
+++ b/client/src/templates/Introduction/components/CertificationCard.js
@@ -4,7 +4,7 @@ import ScrollableAnchor from 'react-scrollable-anchor';
 import { useTranslation } from 'react-i18next';
 
 import ClaimCertSteps from './ClaimCertSteps';
-import Caret from '../../../assets/icons/Caret';
+import Caret from '../../../assets/icons/caret';
 
 const propTypes = {
   certSlug: PropTypes.string,
diff --git a/client/src/templates/Introduction/components/Challenges.js b/client/src/templates/Introduction/components/Challenges.js
index d182794fa6..5f5ac31616 100644
--- a/client/src/templates/Introduction/components/Challenges.js
+++ b/client/src/templates/Introduction/components/Challenges.js
@@ -7,8 +7,8 @@ import { Link } from 'gatsby';
 import { withTranslation } from 'react-i18next';
 
 import { completedChallengesSelector, executeGA } from '../../../redux';
-import GreenPass from '../../../assets/icons/GreenPass';
-import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
+import GreenPass from '../../../assets/icons/green-pass';
+import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 
 const mapStateToProps = state => {
   return createSelector(completedChallengesSelector, completedChallenges => ({
diff --git a/client/src/templates/Introduction/components/ClaimCertSteps.js b/client/src/templates/Introduction/components/ClaimCertSteps.js
index 6f8bc4e191..16995f83a5 100644
--- a/client/src/templates/Introduction/components/ClaimCertSteps.js
+++ b/client/src/templates/Introduction/components/ClaimCertSteps.js
@@ -5,9 +5,9 @@ import { withTranslation, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
-import IntroInformation from '../../../assets/icons/IntroInformation';
-import GreenPass from '../../../assets/icons/GreenPass';
-import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
+import IntroInformation from '../../../assets/icons/intro-information';
+import GreenPass from '../../../assets/icons/green-pass';
+import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 import { userSelector } from '../../../redux';
 import { User } from '../../../redux/prop-types';