added font-awesome icons

web/src/FilesTabsPanel.js

@@ -2,6 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import theme from "./theme";
 
+import { TableIcon } from "./icons";
+
 const files = [
   { name: "app.js" },
   { name: "BranchCategory", type: "table", selected: true },
@@ -22,6 +24,14 @@ const FileTabItem = styled.div`
     props.selected ? theme.mainArea.background : "inherit"};
 `;
 
+const FileNameWrapper = styled.span`
+  margin-left: 5px;
+`;
+
 export default function FilesTabsPanel() {
-  return files.map(file => <FileTabItem {...file}>{file.name}</FileTabItem>);
+  return files.map(file => (
+    <FileTabItem {...file}>
+      <TableIcon /><FileNameWrapper>{file.name}</FileNameWrapper>
+    </FileTabItem>
+  ));
 }

web/src/Screen.js

@@ -3,6 +3,10 @@ import theme from "./theme";
 import styled from "styled-components";
 import FilesTabsPanel from "./FilesTabsPanel";
 
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTable } from '@fortawesome/free-solid-svg-icons'
+
 const BodyDiv = styled.div`
   position: fixed;
   top: ${theme.tabsPanel.height}px;
@@ -52,7 +56,7 @@ const StausBar = styled.div`
 export default function Screen({ children }) {
   return (
     <>
-      <IconBar></IconBar>
+      <IconBar><FontAwesomeIcon icon={faTable} color='gray' size='2x'/></IconBar>
       <LeftPanel></LeftPanel>
       <TabsPanel>
         <FilesTabsPanel></FilesTabsPanel>

web/src/icons/TableIcon.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+export default function TableIcon({ size=16 }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 502 502"
+      enable-background="new 0 0 502 502"
+    >
+      <rect
+        x="10"
+        y="66.375"
+        style={{ fill: "#4EC9DC" }}
+        width="482"
+        height="73.896"
+      />
+      <rect
+        x="10"
+        y="140.039"
+        style={{ fill: "#D1DCEB" }}
+        width="482"
+        height="295.586"
+      />
+      <g>
+        <path
+          d="M492,445.625c5.522,0,10-4.477,10-10V66.375c0-5.523-4.478-10-10-10H10c-5.522,0-10,4.477-10,10v369.25
+			c0,5.523,4.478,10,10,10H492z M482,277.832H381.5v-53.896H482V277.832z M20,223.936h100.5v53.896H20V223.936z M361.5,150.271
+			v53.664H261v-53.664H361.5z M241,150.271v53.664H140.5v-53.664H241z M140.5,223.936H241v53.896H140.5V223.936z M261,223.936h100.5
+			v53.896H261V223.936z M381.5,203.936v-53.664H482v53.664H381.5z M120.5,150.271v53.664H20v-53.664H120.5z M20,297.832h100.5
+			v53.896H20V297.832z M140.5,297.832H241v53.896H140.5V297.832z M261,297.832h100.5v53.896H261V297.832z M381.5,297.832H482v53.896
+			H381.5V297.832z M20,130.039V76.375h462v53.664H20z M20,371.729h100.5v53.896H20V371.729z M140.5,371.729H241v53.896H140.5
+			V371.729z M261,371.729h100.5v53.896H261V371.729z M482,425.625H381.5v-53.896H482V425.625z"
+        />
+        <path d="M209,107.625h192c5.522,0,10-4.477,10-10s-4.478-10-10-10H209c-5.522,0-10,4.477-10,10S203.478,107.625,209,107.625z" />
+        <path d="M436,107.625h22c5.522,0,10-4.477,10-10s-4.478-10-10-10h-22c-5.522,0-10,4.477-10,10S430.478,107.625,436,107.625z" />
+      </g>
+    </svg>
+  );
+}

web/src/icons/index.js

@@ -0,0 +1,3 @@
+
+export { default as TableIcon } from "./TableIcon";
+