diff --git a/package-lock.json b/package-lock.json
index 13b2130b..839687c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19924,6 +19924,11 @@
         "prop-types": "^15.6.1"
       }
     },
+    "react-icons": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
+      "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
+    },
     "react-input-autosize": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
diff --git a/package.json b/package.json
index 6b815e10..446995e1 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "react-firebaseui": "^4.1.0",
     "react-helmet": "^5.2.1",
     "react-hook-form": "^7.1.1",
+    "react-icons": "^4.2.0",
     "react-markdown": "^4.3.1",
     "react-material-ui-carousel": "^2.2.1",
     "react-modal-sheet": "^1.3.2",
diff --git a/src/components/HomeViewComponents/FooterSection.js b/src/components/HomeViewComponents/FooterSection.js
index efcf3ed4..569fbde3 100644
--- a/src/components/HomeViewComponents/FooterSection.js
+++ b/src/components/HomeViewComponents/FooterSection.js
@@ -9,6 +9,7 @@ import {
   Typography,
 } from "@material-ui/core";
 import React, { useState } from "react";
+import {FaInstagram,FaYoutube,FaTwitter,FaGithub} from "react-icons/fa";
 
 function Copyright() {
   return (
@@ -18,13 +19,6 @@ function Copyright() {
   );
 }
 
-const iconList = [
-  "/assets/icon/social icons/twitter.svg",
-  "/assets/icon/social icons/linkedIn.svg",
-  "/assets/icon/social icons/github.svg",
-  "/assets/icon/social icons/youtube_icon.svg",
-];
-
 function FooterSection() {
   const classes = useStyles();
 
@@ -52,11 +46,18 @@ function FooterSection() {
                 learning pattern.
               </Typography>
               <Box className={classes.buttonContainer}>
-                {iconList.map((items, index) => (
-                  <IconButton key={index} className={classes.socialButtons}>
-                    <img src={items} />
-                  </IconButton>
-                ))}
+                <IconButton href="https://www.instagram.com/codeforcause/" target="_blank" aria-label="FaceBook">
+                <FaInstagram />
+                </IconButton>
+                <IconButton href="https://www.youtube.com/c/CodeforCause" target="_blank" aria-label="YouTube">
+                <FaYoutube />
+                </IconButton>
+                <IconButton href="https://twitter.com/codeforcauseIn?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" aria-label="Twitter">
+                <FaTwitter />
+                </IconButton>
+                <IconButton href="https://github.com/codeforcauseorg/edu-client" target="_blank" aria-label="Github">
+                <FaGithub/>
+                </IconButton>
               </Box>
             </Box>
           </Grid>
@@ -64,7 +65,7 @@ function FooterSection() {
             <Box>
               <Typography variant="h4">Explore</Typography>
               <Box mt={3} className={classes.exploreLinks}>
-                <Typography gutterBottom variant="h5">
+                <Typography gutterBottom variant="h5" >
                   Home
                 </Typography>
                 <Typography gutterBottom variant="h5">