diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 0b6424a783..2489c5fe13 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -10,7 +10,7 @@ import * as FileActions from '../actions/files';
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
 import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
-import FileIcon from '../../../images/file.svg';
+import FileTypeIcon from './FileTypeIcon';
 
 function parseFileName(name) {
   const nameArray = name.split('.');
@@ -256,6 +256,7 @@ class FileNode extends React.Component {
     const isRoot = this.props.name === 'root';
 
     const { t } = this.props;
+    const { extension } = parseFileName(this.props.name);
 
     return (
       <div className={itemClass}>
@@ -267,7 +268,11 @@ class FileNode extends React.Component {
             <span className="file-item__spacer"></span>
             {isFile && (
               <span className="sidebar__file-item-icon">
-                <FileIcon focusable="false" aria-hidden="true" />
+                <FileTypeIcon
+                  fileExtension={extension}
+                  focusable="false"
+                  aria-hidden="true"
+                />
               </span>
             )}
             {isFolder && (
diff --git a/client/modules/IDE/components/FileTypeIcon.jsx b/client/modules/IDE/components/FileTypeIcon.jsx
new file mode 100644
index 0000000000..c6bab74f4b
--- /dev/null
+++ b/client/modules/IDE/components/FileTypeIcon.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IoLogoHtml5, IoLogoCss3, IoLogoJavascript } from 'react-icons/io';
+import { TbFileTypeXml, TbTxt, TbCsv } from 'react-icons/tb';
+import { VscJson } from 'react-icons/vsc';
+import FileIcon from '../../../images/file.svg';
+
+export default function FileTypeIcon({ fileExtension }) {
+  switch (fileExtension) {
+    case '.html':
+      return (
+        <span>
+          <IoLogoHtml5 />
+        </span>
+      );
+    case '.css':
+      return (
+        <span>
+          <IoLogoCss3 />
+        </span>
+      );
+    case '.js':
+      return (
+        <span>
+          <IoLogoJavascript />
+        </span>
+      );
+    case '.json':
+      return (
+        <span>
+          <VscJson />
+        </span>
+      );
+    case '.xml':
+      return (
+        <span>
+          <TbFileTypeXml />
+        </span>
+      );
+    case '.txt':
+      return (
+        <span>
+          <TbTxt />
+        </span>
+      );
+    case '.csv':
+      return (
+        <span>
+          <TbCsv />
+        </span>
+      );
+    default:
+      return <FileIcon focusable="false" aria-hidden="true" />;
+  }
+}
+
+FileTypeIcon.propTypes = {
+  fileExtension: PropTypes.string.isRequired
+};
diff --git a/package-lock.json b/package-lock.json
index 28c38afc1e..ae4e145c84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,6 +86,7 @@
         "react-ga": "^3.3.0",
         "react-helmet": "^5.1.3",
         "react-i18next": "^11.11.3",
+        "react-icons": "^4.11.0",
         "react-markdown": "^6.0.3",
         "react-redux": "^7.2.4",
         "react-refresh": "^0.14.0",
@@ -40316,6 +40317,14 @@
         "react": ">= 16.8.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
@@ -75462,6 +75471,12 @@
         "html-parse-stringify": "^3.0.1"
       }
     },
+    "react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "requires": {}
+    },
     "react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
diff --git a/package.json b/package.json
index 23b4969df5..b1e7293c6d 100644
--- a/package.json
+++ b/package.json
@@ -230,6 +230,7 @@
     "react-ga": "^3.3.0",
     "react-helmet": "^5.1.3",
     "react-i18next": "^11.11.3",
+    "react-icons": "^4.11.0",
     "react-markdown": "^6.0.3",
     "react-redux": "^7.2.4",
     "react-refresh": "^0.14.0",