diff --git a/src/components/PrimaryPanes/SourcesTree.js b/src/components/PrimaryPanes/SourcesTree.js
index 891a55f1b0..a7e095dabc 100644
--- a/src/components/PrimaryPanes/SourcesTree.js
+++ b/src/components/PrimaryPanes/SourcesTree.js
@@ -219,7 +219,8 @@ class SourcesTree extends Component<Props, State> {
       }
 
       const sourceType = sourceTypes[getExtension(source)];
-      return <img className={sourceType || "file"} />;
+      const classNames = classnames("source-icon", sourceType || "file");
+      return <img className={classNames} />;
     }
 
     return <img className="folder" />;
diff --git a/src/components/shared/Svg.css b/src/components/shared/Svg.css
index 15bf309e6b..9673e38939 100644
--- a/src/components/shared/Svg.css
+++ b/src/components/shared/Svg.css
@@ -10,15 +10,17 @@
   fill: var(--theme-splitter-color);
 }
 
-.file,
 .folder,
-.domain {
+.domain,
+.source-icon,
+.file {
   background-color: var(--theme-comment);
 }
 
 .worker,
 .file,
-.folder {
+.folder,
+.source-icon {
   position: relative;
   top: 2px;
 }
@@ -39,7 +41,8 @@
 }
 
 img.domain,
-img.folder {
+img.folder,
+img.source-icon {
   width: 15px;
   height: 15px;
 }
@@ -52,6 +55,22 @@ img.folder {
   mask: url(/images/folder.svg) no-repeat;
 }
 
+img.coffeescript {
+  mask: url(/images/coffeescript.svg) no-repeat;
+}
+
+img.javascript {
+  mask: url(/images/javascript.svg) no-repeat;
+}
+
+img.react {
+  mask: url(/images/react.svg) no-repeat;
+}
+
+img.typescript {
+  mask: url(/images/typescript.svg) no-repeat;
+}
+
 img.file {
   mask: url(/images/file.svg) no-repeat;
   width: 13px;
@@ -60,7 +79,8 @@ img.file {
 
 img.domain,
 img.folder,
-img.file {
+img.file,
+img.source-icon {
   mask-size: 100%;
   margin-inline-end: 5px;
   display: inline-block;