diff --git a/site/src/components/file-icon/icons/apache.svg b/site/src/components/file-icon/icons/apache.svg
new file mode 100644
index 0000000..796141e
--- /dev/null
+++ b/site/src/components/file-icon/icons/apache.svg
@@ -0,0 +1,63 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="78.2 24.7 388.6 778.5" enable-background="new 78.2 24.7 388.6 778.5" xml:space="preserve">
+<g>
+	<path fill="#C92037" d="M409.4,28.5c-12.2,7.3-32.6,27.6-56.7,57.1l22.2,42c15.6-22.4,31.5-42.4,47.5-59.6c1.2-1.3,1.9-2,1.9-2
+		c-0.6,0.7-1.3,1.3-1.9,2c-5.2,5.7-20.9,24-44.6,60.5c22.8-1.2,57.9-5.8,86.5-10.8c8.6-47.7-8.3-69.5-8.3-69.5
+		S434.6,13.5,409.4,28.5z"/>
+	<path fill="#555555" d="M371.6,268c0.1,0,0.3,0,0.4-0.1l-3.2,0.3c-0.1,0.1-0.4,0.1-0.6,0.3C369.4,268.3,370.6,268.2,371.6,268z"/>
+	<path fill="#555555" d="M348.9,343.2c-1.7,0.4-3.6,0.7-5.5,1C345.3,343.9,347.2,343.6,348.9,343.2z"/>
+	<path fill="#555555" d="M342,344.3L342,344.3L342,344.3L342,344.3z"/>
+	<path fill="#555555" d="M334.6,381.1c-2.9,0.6-5.8,1-8.7,1.5l0,0c1.5-0.1,3.1-0.4,4.5-0.7C331.8,381.7,333.3,381.4,334.6,381.1z"/>
+	<path opacity="0.35" fill="#555555" enable-background="new    " d="M334.6,381.1c-2.9,0.6-5.8,1-8.7,1.5l0,0
+		c1.5-0.1,3.1-0.4,4.5-0.7C331.8,381.7,333.3,381.4,334.6,381.1z"/>
+	<path fill="#555555" d="M342.1,344.3L342.1,344.3C342,344.3,342,344.3,342.1,344.3c0.4,0,0.9-0.1,1.3-0.1c1.9-0.3,3.8-0.6,5.5-1
+		C346.8,343.6,344.4,343.9,342.1,344.3L342.1,344.3L342.1,344.3z"/>
+	<path opacity="0.35" fill="#555555" enable-background="new    " d="M342.1,344.3L342.1,344.3C342,344.3,342,344.3,342.1,344.3
+		c0.4,0,0.9-0.1,1.3-0.1c1.9-0.3,3.8-0.6,5.5-1C346.8,343.6,344.4,343.9,342.1,344.3L342.1,344.3L342.1,344.3z"/>
+	<path fill="#C92037" d="M309.3,236.1c6.8-12.6,13.7-25,20.5-37.1c7.1-12.5,14.4-24.6,21.8-36.3c0.4-0.7,0.9-1.5,1.3-2
+		c7.3-11.5,14.5-22.5,21.9-33.1l-22.2-41.9c-1.6,2-3.3,4.1-5.1,6.3c-6.4,8-13.1,16.6-19.9,25.7c-7.7,10.3-15.6,21.2-23.7,32.7
+		c-7.4,10.6-15,21.8-22.5,33.3c-6.4,9.9-12.8,19.9-19.2,30.2c-0.3,0.4-0.4,0.7-0.7,1.2l28.9,57.1C296.8,260,303,248,309.3,236.1z"/>
+	<path fill="#C92037" d="M177.4,558.3c-3.8,10.5-7.7,21.2-11.5,32.3c0,0.1-0.1,0.3-0.1,0.4c-0.6,1.6-1.2,3.1-1.6,4.7
+		c-2.6,7.4-4.8,14.1-10,29.2c8.6,3.9,15.4,14.1,21.8,25.7c-0.7-12.1-5.7-23.4-15.1-32.1c42,1.9,78.3-8.7,97-39.5
+		c1.6-2.8,3.2-5.7,4.7-8.7c-8.6,10.8-19,15.4-39,14.2h-0.1h0.1c29.2-13.1,43.9-25.7,56.8-46.5c3.1-4.9,6.1-10.3,9.2-16.3
+		c-25.6,26.3-55.2,33.7-86.5,28.1l-23.4,2.6C178.9,554.4,178.2,556.3,177.4,558.3z"/>
+	<path fill="#C92037" d="M188.3,505.8c5.1-13.1,10.3-26.3,15.6-39.7c5.1-12.8,10.3-25.6,15.7-38.5s10.9-25.9,16.4-38.8
+		c5.7-13.2,11.5-26.3,17.4-39.4c5.8-12.9,11.9-25.9,17.9-38.7c2.2-4.7,4.4-9.2,6.7-13.8c3.8-7.8,7.7-15.7,11.6-23.5
+		c0.1-0.4,0.4-0.9,0.6-1.3l-28.6-57c-0.4,0.7-0.9,1.6-1.5,2.3c-6.7,11-13.5,22.2-20.1,33.7c-6.7,11.6-13.2,23.4-19.6,35.5
+		c-5.4,10.2-10.6,20.3-15.8,30.7c-1,2-2,4.2-3.1,6.3c-6.3,12.9-12.1,25.6-17.2,37.6c-5.8,13.7-10.9,26.7-15.4,39.1
+		c-2.9,8.1-5.7,16-8.1,23.5c-2,6.4-3.9,12.9-5.8,19.3c-4.4,15.1-8,30.2-11,45.4l29.1,57.4c3.8-10.3,7.8-20.6,11.8-31.3
+		C186,511.8,187.2,508.9,188.3,505.8z"/>
+	<path fill="#C92037" d="M143.6,490.6c-3.6,18.3-6.3,36.6-7.6,54.9c0,0.6-0.1,1.3-0.1,1.9c-9-14.5-33.4-28.8-33.3-28.6
+		c17.4,25.3,30.7,50.3,32.6,74.9c-9.3,1.9-22.1-0.9-36.8-6.3c15.4,14.1,26.9,18,31.4,19c-14.1,0.9-28.8,10.6-43.6,21.8
+		c21.7-8.9,39.2-12.4,51.7-9.4C118,675,98.1,737.2,78.2,803.2c6.1-1.7,9.7-6,11.8-11.5c3.5-11.9,27.2-90.4,64.1-193.5
+		c1-2.9,2.2-5.8,3.2-8.9c0.3-0.9,0.6-1.6,0.9-2.5c3.9-10.8,8-21.8,12.2-33.1c1-2.6,1.9-5.1,2.9-7.7v-0.1l-29.1-57.4
+		C143.9,489.3,143.7,489.8,143.6,490.6z"/>
+	<path fill="#C92037" d="M295,277c-0.9,1.7-1.6,3.3-2.5,5.1c-2.5,5.2-5.1,10.5-7.6,15.8c-2.8,5.8-5.5,11.8-8.4,17.9
+		c-1.5,3.1-2.9,6.1-4.4,9.3c-4.4,9.4-8.7,19.2-13.2,29.2c-5.5,12.4-11,25.1-16.7,38.5c-5.4,12.6-10.9,25.9-16.4,39.4
+		c-5.2,12.9-10.6,26.2-16,40c-4.8,12.2-9.6,24.9-14.5,37.8c-0.3,0.6-0.4,1.3-0.7,1.9c-4.8,12.8-9.7,26-14.7,39.5
+		c-0.1,0.3-0.3,0.6-0.3,0.9l23.4-2.6c-0.4-0.1-0.9-0.1-1.5-0.3c28.1-3.5,65.3-24.4,89.2-50.3c11-11.9,21.1-25.9,30.4-42.3
+		c7-12.2,13.4-25.7,19.6-40.8c5.4-13.1,10.6-27.3,15.6-42.7c-6.4,3.3-13.8,5.8-21.9,7.6c-1.5,0.3-2.9,0.6-4.4,0.9
+		c-1.5,0.3-2.9,0.4-4.5,0.7l0,0l0,0l0,0c26.2-10,42.6-29.4,54.5-53.2c-6.8,4.7-18,10.8-31.4,13.8c-1.7,0.4-3.6,0.7-5.5,1
+		c-0.4,0-0.9,0.1-1.5,0.1l0,0l0,0l0,0l0,0l0,0c9-3.8,16.7-8,23.4-13.1c1.5-1,2.8-2.2,4.1-3.3c2-1.7,3.9-3.6,5.8-5.5
+		c1.2-1.3,2.3-2.5,3.5-3.8c2.6-3.1,5.1-6.4,7.3-10c0.7-1.2,1.5-2.2,2-3.3c0.9-1.7,1.7-3.3,2.5-4.9c3.6-7.3,6.5-13.8,8.9-19.6
+		c1.2-2.9,2.2-5.5,3.1-8c0.3-1,0.7-1.9,1-2.9c0.9-2.8,1.7-5.2,2.3-7.4c0.9-3.2,1.5-5.8,1.7-7.7l0,0l0,0c-0.9,0.7-1.9,1.5-3.1,2
+		c-7.8,4.7-21.4,9-32.3,11l21.5-2.3l-21.5,2.3c-0.1,0-0.3,0-0.4,0.1c-1,0.1-2.2,0.3-3.3,0.6c0.1-0.1,0.4-0.1,0.6-0.3l-73.5,8
+		C295.3,276.6,295.2,276.9,295,277z"/>
+	<path fill="#C92037" d="M377.9,128.5c-6.5,10-13.7,21.5-21.4,34.3c-0.4,0.7-0.9,1.3-1.2,2c-6.7,11.2-13.7,23.4-21.1,36.9
+		c-6.4,11.6-13.1,24-20.1,37.5c-6.1,11.6-12.2,24-18.8,37.1l73.5-8c21.4-9.9,31-18.8,40.3-31.7c2.5-3.5,4.9-7.3,7.4-11.2
+		c7.6-11.8,15-24.7,21.5-37.6c6.4-12.5,12.1-24.9,16.3-35.9c2.8-7.1,4.9-13.7,6.5-19.5c1.3-5.1,2.3-9.9,3.2-14.5
+		C435.7,122.7,400.7,127.3,377.9,128.5z"/>
+	<path fill="#555555" d="M330.3,382c-1.5,0.3-2.9,0.4-4.5,0.7l0,0C327.3,382.4,328.7,382.1,330.3,382z"/>
+	<path opacity="0.35" fill="#555555" enable-background="new    " d="M330.3,382c-1.5,0.3-2.9,0.4-4.5,0.7l0,0
+		C327.3,382.4,328.7,382.1,330.3,382z"/>
+	<path fill="#555555" d="M330.3,382c-1.5,0.3-2.9,0.4-4.5,0.7l0,0C327.3,382.4,328.7,382.1,330.3,382z"/>
+	<path fill="#555555" d="M342,344.3c0.4,0,0.9-0.1,1.5-0.1C343,344.2,342.6,344.3,342,344.3L342,344.3z"/>
+	<path opacity="0.35" fill="#555555" enable-background="new    " d="M342,344.3c0.4,0,0.9-0.1,1.5-0.1
+		C343,344.2,342.6,344.3,342,344.3L342,344.3z"/>
+	<path fill="#555555" d="M342,344.3c0.4,0,0.9-0.1,1.5-0.1C343,344.2,342.6,344.3,342,344.3L342,344.3z"/>
+	<path fill="#555555" d="M342.1,344.3L342.1,344.3L342.1,344.3L342.1,344.3L342.1,344.3L342.1,344.3z"/>
+	<path opacity="0.35" fill="#555555" enable-background="new    " d="M342.1,344.3L342.1,344.3L342.1,344.3L342.1,344.3L342.1,344.3
+		L342.1,344.3z"/>
+	<path fill="#555555" d="M342.1,344.3L342.1,344.3L342.1,344.3L342.1,344.3L342.1,344.3L342.1,344.3z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/audio.svg b/site/src/components/file-icon/icons/audio.svg
new file mode 100644
index 0000000..49a6cf3
--- /dev/null
+++ b/site/src/components/file-icon/icons/audio.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 113.4 113.4" enable-background="new 0 0 113.4 113.4" xml:space="preserve">
+<path fill="#A04B90" d="M0,0v113.4h113.4V0H0z M75.2,86.4L53.5,69.1H35.7V44.3h17.9L75.2,27V86.4z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/c.svg b/site/src/components/file-icon/icons/c.svg
new file mode 100644
index 0000000..ffb7ab3
--- /dev/null
+++ b/site/src/components/file-icon/icons/c.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 6.4 8.3" enable-background="new 0 0 6.4 8.3" xml:space="preserve">
+<g>
+	<path fill="#8A3679" d="M6.3,8C6,8.2,5.2,8.3,4.2,8.3C1.4,8.3,0,6.6,0,4.3C0,1.5,2,0,4.4,0c0.9,0,1.7,0.2,2,0.4L6,1.8
+		C5.7,1.7,5.1,1.5,4.5,1.5C3,1.5,1.9,2.4,1.9,4.2c0,1.6,1,2.6,2.6,2.6c0.6,0,1.2-0.1,1.5-0.3L6.3,8z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/coffee.svg b/site/src/components/file-icon/icons/coffee.svg
new file mode 100644
index 0000000..1434fde
--- /dev/null
+++ b/site/src/components/file-icon/icons/coffee.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 256 206" enable-background="new 0 0 256 206" xml:space="preserve">
+<g>
+	<path fill="#3C4D6D" d="M101.6,9.1c0.2,1.4-0.5,2.6-2.8,3.7c-3-1.6-9.5-2.6-14.9-2.1c-5.8,0.5-10.7,2.3-10,6.3
+		c0.9,4,6.5,6.3,16.5,5.4c24.5-2.1,24.2-18.6,60.1-21.9c27.9-2.6,43.5,6.1,45.6,16.5c1.6,8.2-5.1,16.1-25.4,17.7
+		c-17.9,1.6-28.4-3.3-29.3-8.2c-0.5-2.6,0.9-6.3,9.5-7.2c0.9,4,5.8,8.2,17.5,7c8.4-0.7,15.4-3.7,14.4-8.4c-0.9-4.9-9.8-7.7-23.8-6.5
+		c-28.4,2.6-35.4,18.2-59.6,20.3c-17.2,1.6-31.2-4.7-33.1-14C65.8,14.2,65.8,6,83.9,4.4C93.2,3.7,100.7,5.3,101.6,9.1L101.6,9.1z
+		 M10.8,106.4c-7.9,10-11.4,21.7-10.7,33.1s6.3,20.7,15.1,27.9c9.3,7.2,19.3,9.3,30.7,7.2c4.4-0.7,9.3-3,13.7-4.4
+		c-9.3,0-17.2-3-25.1-9.3c-8.6-6.3-14.4-15.1-15.8-25.8c-2.1-10,0-19.3,5.6-27.5c6.3-7.9,14.4-12.3,25.1-13.7
+		c10.7-0.7,20,2.1,29.3,8.6c-2.1-3-5.1-5.1-7.9-7.9c-9.3-6.3-19.3-9.3-31.7-6.3C28,90.6,18.7,96.4,10.8,106.4L10.8,106.4z
+		 M135.6,52.6c-30,0-56.8-3-76.1-7.2c-20.7-5.1-31.7-10.7-31.7-17.9c0-3,1.4-5.6,5.6-8.6c-13,5.1-20,9.3-20,15.8
+		c0.7,7.2,12.3,14.4,36.1,20c22.4,5.6,51,8.6,85.5,8.6c35.2,0,63.1-3,85.5-8.6c23.8-5.6,35.2-13,35.2-20c0-5.1-5.1-10-14.4-13.7
+		c2.1,1.4,3.7,3.7,3.7,6.3c0,7.2-10.7,13-32.4,17.9C192.4,49.6,166.8,52.6,135.6,52.6L135.6,52.6z M221.3,72.6
+		c-22.4,5.1-51,8.6-85.5,8.6c-35.2,0-63.8-3.7-86.2-8.6c-20-5.1-30.7-10.7-34.5-16.5C18.9,81.3,27.6,105,39,126
+		c8.6,13,17.2,24.5,25.8,36.8c3.7,7.2,6.3,14.4,7.9,21.7c5.6,7.9,13.7,13,23.8,15.8c12.3,4.4,25.1,6.3,38.2,5.6h1.4
+		c13,0.7,26.8-1.4,39.4-5.6c9.3-3,17.2-7.9,23.1-15.8h0.7c1.4-7.2,3.7-14.4,7.2-21.7c8.6-12.3,17.2-23.8,25.8-36.8
+		c11.4-20.7,19.3-44.5,23.8-69.9C251.3,62.6,240.6,68.2,221.3,72.6L221.3,72.6z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/css.svg b/site/src/components/file-icon/icons/css.svg
new file mode 100644
index 0000000..8b66cdc
--- /dev/null
+++ b/site/src/components/file-icon/icons/css.svg
@@ -0,0 +1,6 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 85.3 595.3 671.2" enable-background="new 0 85.3 595.3 671.2" xml:space="preserve">
+<path fill="#33A9DC" d="M0,85.3l50.1,602.9l247.5,68.3l243-66.8l54.7-604.4H0z M476.8,281.2l-177.7,75.9h171.6L451,585l-151.9,42.5
+	l-151.9-45.6l-10.6-112.4h75.9l4.6,62.3l80.5,19.7l86.6-25.8l4.6-95.7l-258.2-1.5l-4.6-69.9l179.2-75.9H118.4l-9.1-74.4h373.6
+	L476.8,281.2z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/folder-active.svg b/site/src/components/file-icon/icons/folder-active.svg
new file mode 100644
index 0000000..e26942d
--- /dev/null
+++ b/site/src/components/file-icon/icons/folder-active.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" id="Calque_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="131 284 324.9 276.5"
+	 enable-background="new 131 284 324.9 276.5" xml:space="preserve">
+<title>eye-fill 12 copy 10</title>
+<desc>Created with Sketch.</desc>
+<g sketch:type="MSPage">
+	<g sketch:type="MSShapeGroup">
+		<path fill="#CCCCCC" d="M217.5,314c0.1,0,0.2,0.1,0.3,0.1l32.9,35.2c7.8,9.9,19.6,15.6,32.3,15.6h142.8v165.5H161V314H217.5
+			 M218.8,284h-75.9c-6.6,0-11.9,5.3-11.9,11.9v252.8c0,6.6,5.3,11.9,11.9,11.9h301c6.6,0,11.9-5.3,11.9-11.9V346.9
+			c0-6.5-5.3-11.9-11.9-11.9H283c-3.7,0-7.2-1.9-9.3-4.9l-34.9-37.4C234.4,288,225.4,284,218.8,284L218.8,284z"/>
+	</g>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/folder.svg b/site/src/components/file-icon/icons/folder.svg
new file mode 100644
index 0000000..a1bf103
--- /dev/null
+++ b/site/src/components/file-icon/icons/folder.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" id="Calque_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="131 284 324.9 276.5"
+	 enable-background="new 131 284 324.9 276.5" xml:space="preserve">
+<title>eye-fill 12 copy 10</title>
+<desc>Created with Sketch.</desc>
+<g sketch:type="MSPage">
+	<path sketch:type="MSShapeGroup" fill="#CCCCCC" d="M131,295.9c0-6.6,5.4-11.9,11.9-11.9h75.9c6.6,0,15.6,3.9,20,8.7l34.9,37.4
+		c2.1,3.1,5.5,4.9,9.3,4.9H444c6.6,0,11.9,5.4,11.9,11.9v201.8c0,6.6-5.4,11.9-11.9,11.9h-301c-6.6,0-11.9-5.3-11.9-11.9V295.9z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/font.svg b/site/src/components/file-icon/icons/font.svg
new file mode 100644
index 0000000..61c22df
--- /dev/null
+++ b/site/src/components/file-icon/icons/font.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="111.6 243.8 373.5 355.7" enable-background="new 111.6 243.8 373.5 355.7" xml:space="preserve">
+<path fill="#CCCCCC" d="M230.7,243.8L111.6,599.5h46.1l35.7-111.6H317l37.2,111.6h47.6L275.3,243.8H230.7z M202.4,450.7L236.6,348
+	c6-22.3,11.9-43.2,17.9-64h1.5c4.5,20.8,10.4,41.7,17.9,65.5l34.2,102.7H202.4V450.7z M436,245.3h-20.8l-47.6,142.9h19.3l14.9-44.6
+	h49.1l14.9,44.6h19.3L436,245.3z M404.8,327.2l13.4-41.7c3-8.9,4.5-17.9,7.4-25.3l0,0c1.5,8.9,4.5,16.4,7.4,25.3l13.4,41.7H404.8z"
+	/>
+</svg>
diff --git a/site/src/components/file-icon/icons/git.svg b/site/src/components/file-icon/icons/git.svg
new file mode 100644
index 0000000..7f760fb
--- /dev/null
+++ b/site/src/components/file-icon/icons/git.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="2.6 2.6 91.9 91.9" enable-background="new 2.6 2.6 91.9 91.9" xml:space="preserve">
+<g>
+	<path fill="#F05133" d="M92.7,44.4L52.6,4.3c-2.3-2.3-6.1-2.3-8.4,0l-8.3,8.3l10.6,10.6c2.5-0.8,5.3-0.3,7.2,1.7
+		c2,2,2.5,4.8,1.7,7.3l10.2,10.2c2.5-0.8,5.3-0.3,7.3,1.7c2.8,2.8,2.8,7.2,0,10c-2.8,2.8-7.2,2.8-10,0c-2.1-2.1-2.6-5.1-1.5-7.7
+		l-9.5-9.5v25c0.7,0.3,1.3,0.8,1.9,1.3c2.8,2.8,2.8,7.2,0,10c-2.8,2.7-7.2,2.7-10,0c-2.8-2.8-2.8-7.2,0-10c0.7-0.7,1.5-1.2,2.3-1.5
+		V36.4c-0.8-0.3-1.6-0.9-2.3-1.5c-2.1-2.1-2.6-5.1-1.5-7.7L31.8,16.7L4.3,44.2c-2.3,2.3-2.3,6.1,0,8.4l40.1,40.1
+		c2.3,2.3,6.1,2.3,8.4,0l39.9-39.9C95,50.5,95,46.7,92.7,44.4z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/html.svg b/site/src/components/file-icon/icons/html.svg
new file mode 100644
index 0000000..72ff50b
--- /dev/null
+++ b/site/src/components/file-icon/icons/html.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="55 162.1 485.3 517.8" enable-background="new 55 162.1 485.3 517.8" xml:space="preserve">
+<g>
+	<path fill="#F16529" d="M443.4,314l5.5-56.8H146.4l15.9,172.8h209.4l-7.4,74.2L297.1,521l-67.4-16.8l-4.3-45.2h-60l8,89.9
+		l123.7,31.9h1.2l122.5-31.9l17.1-176.3H218l-5.5-58.6H443.4L443.4,314z M57,162.1h481.4l-44.1,465.6L297,679.9l-196.6-52.2
+		L57,162.1z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/image.svg b/site/src/components/file-icon/icons/image.svg
new file mode 100644
index 0000000..e183ffd
--- /dev/null
+++ b/site/src/components/file-icon/icons/image.svg
@@ -0,0 +1,5 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 123.3 595.3 595.3" enable-background="new 0 123.3 595.3 595.3" xml:space="preserve">
+<path fill="#819B3A" d="M0,123.3v595.3h595.3V123.3H0z M74.4,197.7h446.5v223.2l-74.4-74.4l-74.4,74.4l148.8,148.8v74.4h-74.4
+	L148.8,346.5l-74.4,74.4V197.7z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/jade.svg b/site/src/components/file-icon/icons/jade.svg
new file mode 100644
index 0000000..6cad7fe
--- /dev/null
+++ b/site/src/components/file-icon/icons/jade.svg
@@ -0,0 +1,58 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="14.8 130.7 565.1 579.6" enable-background="new 14.8 130.7 565.1 579.6" xml:space="preserve">
+<path fill="#C1272D" d="M441,449.4c2.5,2.5,3,6.8-0.3,9.1c-7.7,5.2-17.3,4.3-26.2,3.3c-15.2-1.6-33.2-2.2-41.1-16.8l-0.6-0.4
+	c-10-5.4,6.8-9.2,11.5-9.8c10.7-1.3,21.9,1.3,32.3,3.7C425.8,440.6,434.1,442.8,441,449.4L441,449.4z M579.1,675.1
+	c-7,5.1-3.9,13.4-9.1,19.5c-4.9,5.7-16.8,5.5-23.5,5.7c-26.9,0.3-53.6-1.9-80.5,0.3c-6.7,0.6-12.8,1.5-19.3,3.1
+	c-1.9,0.4-5.1,1.6-7.1,0.6c-5.5-2.8-10.4-11.9-17.4-8.9c-6,2.4-10.3,11.2-17.6,5.8c-12.9-9.5-24-0.9-37.5,1.8
+	c-14,2.8-27.5-5.1-41.5-1c-10.4,3-20.2,6.3-31,2.7c-10.9-3.6-13.7-12.1-4.3-19.8c14.7-12.1,32.7-13.8,51.2-12.5
+	c27.7,2.2,55.1,0.3,82.7-1c0.7,0,1.3,0.4,1.5,1c11.8,4.8,19.6-4.9,26.2-12.9c0.9-1,2.5-0.6,3.1,0.4c9.8,14.7,22-1.9,34.4-0.7
+	c3.3,0.3,6.5,1.2,8.3,4.3c0.9,1.3,1,3.3,1.2,4.8c0.6,7.4,10.1,6,9.8-1.8c0-1.2,1.3-2.4,2.5-1.9c9.7,3.9,22.6,9.2,31-1.2
+	c6.8-8.6,7.9-21.3,8.3-32c1.5-28.6-0.6-57.9-2.5-86.3c-1.8-27.7-4.8-56-1.5-83.6c3.3-27.4,3.3-54.3,2.5-82
+	c-0.3-14.4-0.7-28.9-0.1-43.3c0.6-13.2,3-27.4,1.3-40.6c-1.3-11.9-8.3-22-10-33.8c-1.5-10.7,0-21.7,2.5-32.1
+	c1.5-6.5,4.6-14.1,4.5-21c-0.1-5.8-0.6-11.6-0.4-17.4c0.1-2.8-0.4-7.3,1.6-9.7c3.4-4,5.1-9.8-2.7-10.7c-18.6-2.1-37.8-14-55.7-2.7
+	c0.1,3.9,0.6,8.5-0.4,12.4c0.7,1.2,1.6,2.4,2.7,3.4c4.5,1.9,9.1,2.7,13.8,2.7c5.7,0.1,12.1-1.5,17.6-0.9c4.9,0.6,8.8,4.8,7.1,10.1
+	c-1,3.9-4.6,7.3-6.7,10.7c-3.6,6-3.1,14.4-3.1,21.1c-0.3,17.1,0,34.4,0.6,51.5c0.4,14.3,1.9,28.6,3,42.9c0.3,0.3,1.2,0.7,1.2,1.2
+	c0.6,15.9,6,31.8,6.3,47.9c0.1,0.3-4.2,19.8-4.2,19.8c-0.1,20.8-1.9,59.4-1.9,59.4c-0.3,35.6-6.4,70.5-0.1,106
+	c2.5,14.3-2.8,27.8-3.4,42c-0.7,15.5,1.5,31.1-0.7,46.6c0.4,0.9,0.1,2.1-1.2,2.2c-32.4,6.1-65.3,7.3-98.2,5.4
+	c-8.2-0.4-18.2-1.2-25.9,1.9c-3.3,1.3-7.4,3.6-11.2,3c-4.8-0.7-7-4.3-11.6-5.2c-5.5-1-11.2-2.2-16.7-3c-14.6-1.9-28.6-2.8-42.4,3.1
+	c-7.6,3.3-15.5,2.1-23.1-1.2c-8.9-3.7-15.8-8.2-25.6-3.3c-4,1.9-7.6,4-12.1,5.1c-3.7,0.9-7-0.1-10.4-1.3c-7.6-2.8-13.5-3.7-21.6-2.2
+	c0.9,1,0.3,3.4-1.3,3.4c-48.1-2.5-96.3,3.3-144.4,3.6c-2.1,0.6-3.9,3.1-5.4,3.1h-1.5c-1,0-1.5-4-1.2-4.8c-6.5-7-4.9-30.4-4.6-37.4
+	c2.1-44.8-3.7-89.4-5.1-134.1c-0.6-22.3-0.6-44.5,3-66.7c4.2-24.9,4.2-48.7,3.6-73.8c-1-49.3,3.7-98.5,2.2-147.8
+	c0-0.9,0.9-1.2,1.5-0.9c0.1-0.1,0.3-0.3,0.6-0.3c13.2-1.2,27.7-4.9,40.8-1.2c0.3,0.1,0.4,0.3,0.6,0.4l2.1,0.3h14.7
+	c0.6,0,1,0.3,1.2,0.6c25.9,0.3,51.9-2.1,77.8-3.3c9.1-0.4,18.5,0,27.2-2.8c4.6-1.5,9.8-3.7,14.9-3.4c11.8,0.7,24.1,4.6,35.6,7
+	c8.2,1.8,13.8-12.4,21.1-7.7c11.2,7,24,4.5,36.6,4.8c6.7,0.1,13.2-1.2,19.9-1.2c3.6,0,6.7,0.9,10.1,1.8c3.4-0.6,6.4-0.1,10,1
+	c20.1,0.4,40.2-2.2,60.4-1.9c12.2,0.1,25.3,1,36.9-3.4c3-1.2,4.8-2.8,5.7-4.9l-1.3-3c-0.9-1.8-1.8-3.6-3.1-5.1
+	c-12.8-4.3-28-3-41.4-3.6c-18.8-0.7-36.9,1.6-55.5,3.1c-17.3,1.5-35.1,2.4-52.5,1.2c-10.1-0.7-29.5-5.4-38.1,1.6
+	c-0.9,0.6-1.6,0.6-2.5,0c-16.7-13.7-38.4,6.7-57.4,1c-11.3-3.4-22.2-5.5-34.1-4.3c-11.8,1.2-22.8,2.8-34.7,2.7
+	c-25.6-0.1-51.3,1.5-76.9,0.6c-5.5-0.1-11-0.3-16.5-0.9c-4.5-0.6-10.6-2.7-15-1c-7,2.7-8.5,5.1-7.9,7c1.9,1.3-4.8,10.4-4.9,14.9
+	c-0.1,4-0.4,7.9-0.4,11.8c-0.3,17.4-1.5,33.5-5.4,50.4c-2.1,9.1-6.4,21.7-3.1,30.8c2.1,5.8,6.5,9.8,9.1,15.3
+	c4.5,9.5,4.8,21.4,4.3,31.7c-1.5,33.8-1.5,67.7-2.7,101.5c-1.2,33.9-3.3,67.9-2.1,101.8c1,31.4,6.1,63.5,1.9,94.8
+	c-1.3,10.4-13.7,28.9-1.8,36c6.7,4,15,5.1,22.6,5.5c19.2,1,38.5-0.9,57.6-3c7-0.7,14.1-2.2,21.1-2.4c5.5-0.1,10.4,0.4,15.6,2.4
+	c4.5,1.6,11.3,4.8,16.8,4.8c0.3,0.3,8.5-0.3,9.1-2.7c7.1-3,13.2-5.5,22.5-3.6c8.6,1.8,16.8,2.8,25.7,1c4.8-0.9,11.9-1.3,16.7-0.1
+	c0.4,0.1,1.6,1.5,2.1,1.3c1.9-0.7-1.2,2.4-3,3.1c-10.7,4.3-7.3,18-8.6,27.1c-0.1,0.7-1,1.2-1.8,1.2c-4.3,0-10.1,0-12.4-4.5
+	c-4.9-9.4-17-15.5-17,3.6c0,1-0.9,1.6-1.6,1.6c-0.9,0-1.6-0.6-1.6-1.6s-12.5-7.7-14-8.6c-6.1-3.4-13.4-7.3-20.5-4.9
+	c-4.5,1.5-8.3,4-12.4,6c-7.6,9.4-15.5,19.3-26.9,13.2c-2.2-1.2-11.8-9.4-13.4-7.4c-2.7,3-5.5,5.5-9.2,7c-10.1,4-21,3.3-31.7,3.3
+	c-0.7,0-1.5-0.6-1.6-1.3c-0.6-4.3-3-12.8-8.8-7.6l-3.9,3.6c-1.8,1.5-3.6,3.4-5.8,4.3c-7.1,2.8-28.7-0.9-31.7-6
+	c-2.1-3.7-3.1-7.6-3.9-11.8c-1.8-10.4-0.6-21.7-1-32.4c-0.9-26.8-2.8-53-5.2-79.6c-1.2-13.7-2.2-27.5-1.2-41.2
+	c0.6-8.8,0.9-21,5.2-28.9c3.7-6.7,1-11.5-3.7-16.5c-1.2-1.3-1.6-4-1.8-5.7c-0.7-10,0.9-20.2,1.5-30.2c0.4-7.3,1.5-14.6,1.8-22
+	c0.1-5.7-1.2-11-1.6-16.5c-0.1-2.7-0.4-5.8,1.2-8.2c3.4-4.8,2.7-7.3,0.9-12.6c-3.7-10.6,0-23.1,0.7-33.8c0.7-12.8,1.3-25.6,0-38.4
+	c-1.5-14.1-4.2-28-3.3-42.3c0.7-12.8,1.8-24.7,2.4-37.7c1-23.1,1.2-46.7,0.6-69.8c0,1.3,0,5.5-0.1,5.5c0,0-2.1-29.6,10.6-36.8
+	c19-9.4,42.1-7.4,62.7-8.5c26.9-1.2,53.6,1.5,80.5,1.5c15.5,0,31-0.4,46.1-3.7c10.7-2.4,21.3-3.6,32.3-2.8c13.1,0.9,25.9,4.2,39,5.4
+	c12.9,1.2,25.7,0.6,38.7-0.4c28.1-1.9,56.4-1.2,84.7,0l43.9,1.9c6.7,0.3,14.7,1.9,21.3,0.1l12.5-4.3c9.2-2.4,15.6-0.1,24.6,1.9
+	c11,2.7,22.2,5.1,33.2,7.9c3.7-0.9,7.3-1,10.3,1.8c6.1,5.7,0.1,12.6,4.8,19c5.5,7.7,10.4,12.4,11.5,22.3c1,10.6,1.8,21.6-1.6,31.7
+	c-2.2,6.8-5.4,14.3-2.5,21.3c1.8,4.5,4.8,8.9,5.8,13.5c2.2,10.1,2.2,20.4,1.6,30.7c-0.6,11.9-1,23.8-2.5,35.7
+	c-0.9,7.4-3.9,14.9-4.2,22.5c-0.1,6.3,1.8,11.3,3,17.3c3.9,19.5-12.9,31.5-16.1,49.4c-1.6,9.5,9.4,5.5,14,11c3,3.6,1.5,9.8,1,14
+	c-1,10.4,1.9,20.7,1.5,31c-0.7,12.8-4.5,23.7-1.3,36.6c1.8,7.3,3.1,14.6,1.5,21.9c-1.6,7.1-10.1,25.7,1,29c0.4,0.1,0.7,0.6,0.7,1
+	c0,3.3-0.6,5.7-2.1,8.8c-5.1,11.2,2.7,9.1,4.2,16.4c1.3,6.7-2.7,9.2-3.6,15.5c-1.6,10.1,3.6,18.2,3.4,28c-0.1,9.2-5.4,14.4-3.6,22.8
+	c0.6,0,1,0.4,1.2,1.2c0.9,4.6,1.3,9.5-0.3,14.1c-2.2,6.5-4.9,8,2.4,12.1C580.4,672.9,580.1,674.4,579.1,675.1L579.1,675.1z
+	 M455.4,361.3c-4.6-27.7-7.1-56.4-16.4-83c-3.9-11.2-6-23.2-18.9-25.3c-16.8-2.8-11.2,11.3-9.1,24.7c3.4,21,4.8,42,10.1,62.5
+	c3.7,14.1,10.9,31.1-8,19.9c-31.8-18.8-42.7-60.7-55.5-92c-5.8-14-22.3-48.1-33.5-56.4c-5.4-4-32.3-10-37.4-6.5
+	c-11.2,7.6,23.1,60.7,27.8,70.2c10.4,21.1,21.6,42.3,35,61.6c9.5,13.7,24.9,26,3.3,34.2c-22.3,8.5-33-3.9-48.4-15.5
+	c-12.1-9.2-27.4-10.3-42.6-12.2c-41.4-5.2-81.1-0.3-114.4,27.2c-16.2,13.4-26.2,32-34.7,50.9c-2.2,4.8-16.1,46.6-14.1,46.9
+	c-8.3-1.3-3.6-21-14.3-9.5c-9.5,10.3,2.7,39.6,7,49.7c9.7,22.8,19.8,45.1,27.4,68.6c7.7,23.7,9.2,23.1,31.3,25
+	c27.7,2.5,54.8-6,82-9.4c0,0-48.4-29.9,47.2,2.8c21.1,7.3,43.8,5.4,65.9,6.3c15.9-3.7,16.2-31,24.6-43.8
+	c3.1-4.8,18.3-28.9,23.2-30.8c6.8-2.7,16.7,4.5,23.4,5.5c39.9,6.3,52.1-26.5,45.8-58.5c-5.5-28.1-2.2-58.9,1.8-80.8
+	C465.2,386.1,456.7,368.9,455.4,361.3L455.4,361.3z M277.7,701c-4.3-4-10.9-5.1-15-9.2c-2.4-2.4-3-5.2-2.5-7.9l-0.3-0.3
+	c-3-5.5,4-10.4,9.1-8.3c2.5,1,6.5,2.8,6.8,6c0.4,3.9-2.4,6.7-3.1,10.3c2.7,1.6,5.7,5.5,7.1,7.7C281,700.7,278.9,702.1,277.7,701
+	L277.7,701z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/js.svg b/site/src/components/file-icon/icons/js.svg
new file mode 100644
index 0000000..8cfa4b1
--- /dev/null
+++ b/site/src/components/file-icon/icons/js.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 258.3 595.3 448.4" enable-background="new 0 258.3 595.3 448.4" xml:space="preserve">
+<g id="Layer_1">
+	<g>
+		<path fill="#F0DB4F" d="M130.5,265.4h97.9v274.4c0,123.7-59.3,166.8-153.9,166.8c-23.1,0-52.8-3.8-72.2-10.3l10.9-79.2
+			c13.5,4.5,30.9,7.7,50.2,7.7c41.3,0,67-18.7,67-85.7V265.4H130.5z"/>
+		<path fill="#F0DB4F" d="M313.3,599.1c25.8,13.5,67,27.1,108.8,27.1c45.1,0,68.9-18.7,68.9-47.7c0-26.4-20.6-42.6-72.8-60.6
+			c-72.2-25.8-119.8-65.7-119.8-129.5c0-74.1,62.4-130.1,164.3-130.1c49.6,0,85,9.7,110.8,21.9l-22,78.7
+			c-16.7-8.4-48.4-20.6-90.2-20.6c-42.6,0-63.1,20-63.1,41.9c0,27.7,23.8,39.9,80.6,61.9C555.5,470.4,591,510.2,591,572.1
+			c0,72.8-55.3,134.6-174.5,134.6c-49.6,0-98.6-13.5-123-27.1L313.3,599.1z"/>
+	</g>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/json.svg b/site/src/components/file-icon/icons/json.svg
new file mode 100644
index 0000000..02bc980
--- /dev/null
+++ b/site/src/components/file-icon/icons/json.svg
@@ -0,0 +1,20 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0.3 23.2 595 795.6" enable-background="new 0.3 23.2 595 795.6" xml:space="preserve">
+<g transform="matrix( 1, 0, 0, 1, 0,0) ">
+	<g>
+		<g id="a">
+			<path fill="#F0DB4F" d="M243.1,110.3V23.2h-57.8c-29.6,0-52.8,12.8-69.5,38.3c-18.1,27.8-27.1,67.4-27.1,118.7v59.4
+				c0,46.6-5.1,80.3-15.3,101c-11.5,21-31.4,31.6-59.7,31.6H0.3v97.7h13.4c28.3,0,48.2,10.5,59.7,31.6
+				c10.2,18.5,15.3,51.1,15.3,97.7v62.7c0,51.1,9,89.5,27.1,115.3c16.8,27.8,39.9,41.7,69.5,41.7h57.8v-90.9l-48.3-3.4
+				c-7.6-2.2-14-6.9-19.3-13.9c-5.2-7-9-17.5-11.4-31.6c-2.6-13.8-3.9-31.1-3.9-52.2v-45.5c0-39.6-5.8-72.1-17.3-97.7
+				c-12.8-25.5-29.5-45.3-49.9-59.4v-10.5c20.5-11.5,37.1-30,49.9-55.6c11.5-28.1,17.3-60.8,17.3-98.1v-48.8
+				c0-20.8,1.3-38.2,3.9-52.2c2.4-11.5,6.2-22,11.4-31.6c5.2-4.5,11.6-9.1,19.3-13.9L243.1,110.3 M595.3,372.1h-15.3
+				c-27.2,0-46.6-10.5-58.1-31.6c-11.5-20.8-17.3-54.4-17.3-101v-59.4c0-51.4-8.3-90.9-24.8-118.7c-16.8-25.5-39.9-38.3-69.5-38.3
+				h-59.7v87.1l50.3,3.4c6.3,4.8,12.1,9.4,17.3,13.9c5,9.5,8.8,20.1,11.4,31.6c2.6,14,3.9,31.4,3.9,52.2v48.8
+				c0,37.3,6.4,70,19.3,98.1c11.5,25.5,27.6,44.1,48.3,55.6v10.5c-20.7,14-36.8,33.8-48.3,59.4c-12.8,25.5-19.3,58.1-19.3,97.7v45.5
+				c0,21-1.3,38.4-3.9,52.2c-2.6,14-6.4,24.6-11.4,31.6c-5.2,7-11,11.6-17.3,13.9l-50.3,3.4v90.9h59.7c29.6,0,52.8-13.9,69.5-41.7
+				c16.5-25.8,24.8-64.3,24.8-115.3V599c0-46.6,5.8-79.1,17.3-97.7c11.5-21,30.9-31.6,58.1-31.6h15.3V372.1z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/less.svg b/site/src/components/file-icon/icons/less.svg
new file mode 100644
index 0000000..441cafe
--- /dev/null
+++ b/site/src/components/file-icon/icons/less.svg
@@ -0,0 +1,30 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 422.1 199.7" enable-background="new 0 0 422.1 199.7" xml:space="preserve">
+<path fill="#20426E" d="M0,109.2c0-6.3,0-12.2,0-17.5c4.4-2.1,8.9-3.3,12.2-6c5.4-4.4,6.2-11.1,6.2-17.8c0.1-11.5-0.1-23,0.3-34.5
+	C19.5,12.7,29.3,2.6,50.1,0.8c3.6-0.3,7.3-0.7,10.9-0.8C71.2,0,81.3,0,92.3,0c0,2.1,0,4,0,5.9c0,40.1,0,80.3,0,120.4
+	c0,10.2,3.2,14,13.1,16.4c0.8,0.2,1.6,0.3,3.2,0.6c-1.1,6.6-2.2,13-3.3,19.9c-9.1-0.4-17.6-1-25.3-5.5C69.5,151.4,68,141,67.9,130.3
+	C67.7,95.7,67.8,61,67.8,26.4c0-2,0-4,0-7.3c-6.4,0.7-12.6,0.7-18.4,2.3c-5.8,1.5-7.9,6.9-8.1,12.5c-0.3,10.3-0.1,20.7-0.3,31
+	c-0.1,5-0.3,10-1,14.9c-1.2,8.3-5.4,14.9-13.2,19.9c14.1,9.1,14.2,22.9,14.3,36.7c0.1,8.8-0.1,17.7,0.1,26.5
+	c0.3,11.9,4.9,16.5,16.7,17.1c1.3,0.1,2.6,0.2,4.2,0.4c0,6.3,0,12.4,0,19c-11.1-0.4-22-0.6-31.6-7c-8.4-5.6-11.2-14.3-11.6-23.7
+	c-0.5-11.6-0.3-23.3-0.5-35c0-2.3-0.1-4.7-0.4-7C16.7,115.7,11.6,110.7,0,109.2z"/>
+<path fill="#20426E" d="M195.3,138.1c1.1,6,2.2,11.5,2.9,17.1c0.1,1.1-1.3,3.1-2.4,3.5c-19.7,6.1-39.4,8.2-59-0.1
+	c-10.6-4.5-18.3-12.3-22.6-22.9c-7.6-18.9-7.9-38.1,0.8-56.7c11.5-24.7,41.5-35,66.1-23.1c13.8,6.7,20.7,18.5,23.1,33
+	c1.4,8.3,1.3,16.8,1.9,26c-24.4,0-47.8,0-71.1,0c-1.8,12.7,8.2,24.6,21.9,27.1C169.7,144.4,182.2,142.1,195.3,138.1z M180.9,96.8
+	c0.3-15.6-8.6-25.3-22.4-25.3c-13.2,0.1-24,11.4-23.7,25.3C150,96.8,165.3,96.8,180.9,96.8z"/>
+<path fill="#20426E" d="M359.9,199.7c0-6.8,0-12.7,0-19.1c3.1-0.4,6.2-0.7,9.2-1.4c8-1.8,11.4-5.7,11.6-13.9
+	c0.3-10.5-0.1-21,0.3-31.5c0.2-6.1,0.3-12.6,2.2-18.2c2.1-5.8,6.4-10.9,9.7-16.3c0.4,0.2,0.8,0.5,1.2,0.7c-0.1-0.3,0-0.8-0.2-0.9
+	C383,91.5,381.2,80,381,67.9c-0.2-9.7,0-19.3-0.1-29c-0.1-14.5-4.1-18.6-18.5-19.4c-0.7,0-1.3-0.2-2.3-0.3c0-6.3,0-12.5,0-19.1
+	c10.4,0.2,20.4,0.6,29.6,5.7c10,5.6,13.1,15.2,13.6,25.7c0.5,11.8,0.2,23.6,0.5,35.5c0.1,3.5,0.3,7,1.2,10.4
+	c2.3,8.6,8.4,12.8,17.2,13.2c0,6.4,0,12.4,0,18.3c-14,3.3-18.3,8.8-18.4,23.4c-0.1,11.8,0.1,23.7-0.4,35.5
+	c-0.7,18.4-10.6,28.7-29,30.8C369.8,199,365.1,199.3,359.9,199.7z"/>
+<path fill="#20426E" d="M279.2,75.6c-10.7-3.7-21.2-6-32.2-3.9c-4.9,0.9-9.3,3-10.4,8.7c-0.9,4.5,1.5,8.8,6.5,11.8
+	c1.7,1,3.5,1.9,5.3,2.7c3.4,1.4,6.8,2.6,10.2,4c4.4,1.9,8.9,3.7,13.2,5.9c15.9,8.4,18.9,19.5,16,35.6c-2.5,14.1-13.9,19.7-26.7,22
+	c-15.6,2.7-31.1,2.1-46.4-2.8c-3.7-1.2-4.7-2.8-3.8-6.5c1.2-4.8,2.1-9.7,3.3-15.1c4,1.2,7.7,2.3,11.5,3.3c9.6,2.6,19.3,3.6,29.1,1.7
+	c4.5-0.9,8.2-2.7,9.3-7.7c1.1-5.1-1-9.1-5.2-11.5c-5.5-3.1-11.4-5.4-17.1-8.1c-5.6-2.6-11.3-4.9-16.6-8c-17.9-10.2-17.6-41,2.3-51.1
+	c8.8-4.4,18-6.1,27.6-5.4c8.2,0.6,16.4,2.4,24.6,3.8c2.8,0.5,3.9,1.7,3,4.8C281.4,64.9,280.4,70.2,279.2,75.6z"/>
+<path fill="#20426E" d="M364.6,55.4c-1.7,7.4-3.1,13.5-4.4,19.4c-7-1.3-13.7-3-20.6-3.6c-4.7-0.4-9.6,0.3-14.3,1.2
+	c-4.2,0.8-7.2,3.5-7.9,8c-0.7,4.8,1.3,8.6,5.4,10.9c3.7,2.1,7.7,3.8,11.7,5.6c5.6,2.5,11.5,4.5,17,7.2c14.5,7.3,19.7,17.4,17.8,33.9
+	c-1.3,11.6-9.7,20.2-24,23.5c-18.2,4.1-36.2,3.1-54.3-3.8c1.4-6.7,2.7-13.1,4-19.4c7.7,1.7,14.8,4,22.2,4.8
+	c6.4,0.7,12.9,0.2,19.3-0.5c4.1-0.4,7.5-2.7,8.4-7.3c0.9-4.6-0.3-8.6-4.2-10.9c-5.1-3.1-10.6-5.4-16-8c-6.3-3-12.8-5.6-18.8-9
+	c-17.5-10-17.2-40.4,2-50.5c9.5-5,19.6-6.5,30-5.7C346.8,52,355.6,54,364.6,55.4z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/md.svg b/site/src/components/file-icon/icons/md.svg
new file mode 100644
index 0000000..9f056fd
--- /dev/null
+++ b/site/src/components/file-icon/icons/md.svg
@@ -0,0 +1,15 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 208 128" enable-background="new 0 0 208 128" xml:space="preserve">
+<defs>
+	<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="208" height="128">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="0" y="0" width="208" height="128" id="mask">
+	<rect fill="#FFFFFF" filter="url(#Adobe_OpacityMaskFilter)" width="208" height="128"/>
+	<path d="M30,98V30h20l20,25l20-25h20v68H90V59L70,84L50,59v39H30z"/>
+	<path d="M155,98l-30-33h20V30h20v35h20L155,98z"/>
+</mask>
+<path mask="url(#mask)" fill="#CCCCCC" d="M15,0h178c8.3,0,15,6.7,15,15v98c0,8.3-6.7,15-15,15H15c-8.3,0-15-6.7-15-15V15
+	C0,6.7,6.7,0,15,0z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/php.svg b/site/src/components/file-icon/icons/php.svg
new file mode 100644
index 0000000..5a0dea2
--- /dev/null
+++ b/site/src/components/file-icon/icons/php.svg
@@ -0,0 +1,18 @@
+<svg version="1.1" id="Calque_1" xmlns:svg="http://www.w3.org/2000/svg"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 192 96"
+	 enable-background="new 0 0 192 96" xml:space="preserve">
+<g transform="translate(-44.63166,-445.54704)">
+	<g transform="matrix(2,0,0,2,-140.15749,-493.22304)">
+		<path fill="#666797" d="M100,479.5h14.2c4.2,0,7.2,1.2,9.1,3.6c1.9,2.4,2.5,5.6,1.9,9.7c-0.2,1.9-0.8,3.7-1.6,5.5
+			c-0.8,1.8-1.9,3.4-3.4,4.9c-1.8,1.8-3.7,3-5.7,3.5c-2,0.5-4.1,0.7-6.3,0.7h-6.4l-2,10.1h-7.4L100,479.5L100,479.5 M106.2,485.5
+			l-3.2,15.9c0.2,0,0.4,0.1,0.6,0.1c0.2,0,0.5,0,0.7,0c3.4,0,6.2-0.3,8.5-1c2.3-0.7,3.8-3.3,4.6-7.7c0.6-3.7,0-5.8-1.9-6.4
+			c-1.9-0.6-4.2-0.8-7-0.8c-0.4,0-0.8,0.1-1.2,0.1C106.9,485.6,106.5,485.6,106.2,485.5L106.2,485.5"/>
+		<path fill="#666797" d="M133.5,469.4h7.3l-2.1,10.1h6.6c3.6,0.1,6.3,0.8,8.1,2.2c1.8,1.4,2.3,4.1,1.6,8.1l-3.6,17.6H144l3.4-16.9
+			c0.4-1.8,0.2-3-0.3-3.8c-0.6-0.7-1.8-1.1-3.7-1.1l-5.9-0.1l-4.3,21.8h-7.3L133.5,469.4L133.5,469.4"/>
+		<path fill="#666797" d="M162.8,479.5H177c4.2,0,7.2,1.2,9.1,3.6c1.9,2.4,2.5,5.6,1.9,9.7c-0.2,1.9-0.8,3.7-1.6,5.5
+			c-0.8,1.8-1.9,3.4-3.4,4.9c-1.8,1.8-3.7,3-5.7,3.5c-2,0.5-4.1,0.7-6.3,0.7h-6.4l-2,10.1h-7.4L162.8,479.5L162.8,479.5 M169,485.5
+			l-3.2,15.9c0.2,0,0.4,0.1,0.6,0.1c0.2,0,0.5,0,0.7,0c3.4,0,6.2-0.3,8.5-1c2.3-0.7,3.8-3.3,4.6-7.7c0.6-3.7,0-5.8-1.9-6.4
+			c-1.9-0.6-4.2-0.8-7-0.8c-0.4,0-0.8,0.1-1.2,0.1C169.7,485.6,169.3,485.6,169,485.5L169,485.5"/>
+	</g>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/pug.svg b/site/src/components/file-icon/icons/pug.svg
new file mode 100644
index 0000000..5d9f725
--- /dev/null
+++ b/site/src/components/file-icon/icons/pug.svg
@@ -0,0 +1,18 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 222.3 138" enable-background="new 0 0 222.3 138" xml:space="preserve">
+<path fill="#A96454" d="M65.2,4.6c-4.5,0-35.4,7.1-45.1,18.4S0,46.4,0,46.4s17.2,14.1,20.1,20.9s5.4,13.3,6.8,16
+	c1.4,2.7,7.2,2.7,7.2,2.7s1.2-31.4,5.2-47.2C43.7,21.8,51.8,12.3,65.2,4.6z"/>
+<path fill="#A96454" d="M131.5,124.6c0-26.6-18.2-32.5-18.2-32.5s0-3.9,0-13.7c5.8-1.6,7.8-7.5,7.8-7.5s-3.7,3.2-9.7,3.2
+	s-9.7-3.2-9.7-3.2s2,5.9,7.8,7.5c0,9.7,0,13.7,0,13.7S91.1,98,91.1,124.6c0-20.9,15.9-28.5,20.2-28.5S131.5,103.7,131.5,124.6z"/>
+<path fill="#A96454" d="M157.1,4.6c4.5,0,35.4,7.1,45.1,18.4s20.1,23.4,20.1,23.4s-17.2,14.1-20.1,20.9s-5.4,13.3-6.8,16
+	c-1.4,2.7-7.2,2.7-7.2,2.7s-1.2-31.4-5.2-47.2C178.7,21.8,170.5,12.3,157.1,4.6z"/>
+<path fill="#A96454" d="M179.7,40.1c-3.6-17.2-8-21.9-20-30.8c-11.9-8.8-33-9.3-48.6-9.3S74.4,0.5,62.6,9.3
+	c-12,8.9-16.4,13.5-20,30.8c-3.6,17.2-5.4,26.7-5.4,36.7c0,10,2,14.5,4.5,18.3c2.5,3.7,7.2,4.1,8.6,12.6c1.4,8.6,5.3,13.6,8.1,15.3
+	c2.8,1.7,19.7,15,52.8,15s50-13.3,52.8-15c2.8-1.8,6.8-6.8,8.1-15.3c1.4-8.6,6-8.9,8.6-12.6c2.5-3.7,4.5-8.2,4.5-18.3
+	C185.1,66.8,183.3,57.3,179.7,40.1C176.1,22.9,183.3,57.3,179.7,40.1z M49.7,54.7c0-8.4,6.8-15.2,15.2-15.2s15.2,6.8,15.2,15.2
+	c0,2.1-0.4,4.2-1.2,6l-10.2,8.7c-1.2,0.3-2.4,0.5-3.7,0.5C56.5,69.9,49.7,63.1,49.7,54.7z M150.6,125.2c-8.6,7-30.9,8.9-39.4,9
+	c-8.5-0.1-30.8-2-39.4-9c-8.8-7.1-8.9-22.1-7.2-32.9c1.7-10.8,16.1-29.3,32.1-31.1c0.7-6.2,8.8-8.4,14.5-8.4s13.8,2.2,14.5,8.4
+	c16,1.8,30.4,20.3,32.1,31.1C159.5,103.2,159.4,118.1,150.6,125.2z M157.4,69.9c-1.3,0-2.5-0.2-3.7-0.5l-10.2-8.7
+	c-0.8-1.8-1.2-3.9-1.2-6c0-8.4,6.8-15.2,15.2-15.2s15.2,6.8,15.2,15.2S165.8,69.9,157.4,69.9z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/random.svg b/site/src/components/file-icon/icons/random.svg
new file mode 100644
index 0000000..0d46b29
--- /dev/null
+++ b/site/src/components/file-icon/icons/random.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 4.3 8.3" enable-background="new 0 0 4.3 8.3" xml:space="preserve">
+<g>
+	<path fill="#A0A09F" d="M1.1,5.6l0-0.3c0-0.6,0.2-1.2,0.7-1.9C2.2,3,2.5,2.6,2.5,2.2c0-0.4-0.3-0.7-0.9-0.7c-0.4,0-0.9,0.1-1.2,0.4
+		L0,0.5C0.4,0.2,1.2,0,2,0c1.6,0,2.3,0.9,2.3,1.9c0,0.9-0.6,1.5-1,2c-0.4,0.5-0.6,1-0.6,1.5v0.2H1.1z M0.8,7.3
+		c0-0.6,0.4-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1c0,0.6-0.4,1.1-1.1,1.1C1.2,8.3,0.8,7.9,0.8,7.3z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/sass.svg b/site/src/components/file-icon/icons/sass.svg
new file mode 100644
index 0000000..7a336ff
--- /dev/null
+++ b/site/src/components/file-icon/icons/sass.svg
@@ -0,0 +1,28 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-0.1 0.2 512 383.7" enable-background="new -0.1 0.2 512 383.7" xml:space="preserve">
+<path fill="#CF649A" d="M440.6,220.6c-17.9,0.1-33.4,4.4-46.4,10.8c-4.8-9.5-9.6-17.8-10.4-24c-0.9-7.2-2-11.6-0.9-20.2
+	s6.1-20.8,6.1-21.8c-0.1-0.9-1.1-5.3-11.4-5.4c-10.3-0.1-19.2,2-20.2,4.7s-3,8.9-4.3,15.3c-1.8,9.4-20.6,42.7-31.3,60.2
+	c-3.5-6.8-6.5-12.8-7.1-17.6c-0.9-7.2-2-11.6-0.9-20.2s6.1-20.8,6.1-21.8c-0.1-0.9-1.1-5.3-11.4-5.4c-10.3-0.1-19.2,2-20.2,4.7
+	s-2.1,9.1-4.3,15.3c-2.1,6.2-27.1,61.8-33.6,76.3c-3.3,7.4-6.2,13.3-8.3,17.3s-0.1,0.3-0.3,0.7c-1.8,3.4-2.8,5.3-2.8,5.3v0.1
+	c-1.4,2.5-2.9,4.9-3.6,4.9c-0.5,0-1.5-6.7,0.2-15.9c3.7-19.3,12.7-49.4,12.6-50.5c0-0.5,1.7-5.8-5.8-8.5c-7.3-2.7-9.9,1.8-10.5,1.8
+	s-1.1,1.6-1.1,1.6s8.1-33.9-15.5-33.9c-14.8,0-35.2,16.1-45.3,30.8c-6.4,3.5-20,10.9-34.4,18.8c-5.5,3-11.2,6.2-16.6,9.1l-1.1-1.2
+	c-28.6-30.5-81.5-52.1-79.3-93.1c0.8-14.9,6-54.2,101.6-101.8c78.3-39,141-28.3,151.9-4.5c15.5,34-33.5,97.2-114.9,106.3
+	c-31,3.5-47.3-8.5-51.4-13c-4.3-4.7-4.9-4.9-6.5-4c-2.6,1.4-1,5.6,0,8.1c2.4,6.3,12.4,17.5,29.4,23.1c14.9,4.9,51.3,7.6,95.3-9.4
+	c49.3-19.1,87.8-72.1,76.5-116.4c-11.5-45.1-86.3-59.9-157-34.8C121.4,27.4,75.8,50.8,43,81.5C4,117.9-2.2,149.7,0.4,162.9
+	c9.1,47.1,74,77.8,100,100.5c-1.3,0.7-2.5,1.4-3.6,2c-13,6.4-62.5,32.3-74.9,59.7c-14,31,2.2,53.3,13,56.3
+	c33.4,9.3,67.6-7.4,86.1-34.9c18.4-27.5,16.2-63.2,7.7-79.5l-0.3-0.6l10.2-6c6.6-3.9,13.1-7.5,18.8-10.6c-3.2,8.7-5.5,19-6.7,34
+	c-1.4,17.6,5.8,40.4,15.3,49.4c4.2,3.9,9.2,4,12.3,4c11,0,16-9.1,21.5-20c6.8-13.3,12.8-28.7,12.8-28.7s-7.5,41.7,13,41.7
+	c7.5,0,15-9.7,18.4-14.7v0.1c0,0,0.2-0.3,0.6-1c0.8-1.2,1.2-1.9,1.2-1.9v-0.2c3-5.2,9.7-17.1,19.7-36.8
+	c12.9-25.4,25.3-57.2,25.3-57.2s1.2,7.8,4.9,20.6c2.2,7.6,7,15.9,10.7,24c-3,4.2-4.8,6.6-4.8,6.6l0.1,0.1c-2.4,3.2-5.1,6.6-7.9,10
+	c-10.2,12.2-22.4,26.1-24,30.1c-1.9,4.7-1.5,8.2,2.2,11c2.7,2,7.5,2.4,12.6,2c9.2-0.6,15.6-2.9,18.8-4.3c5-1.8,10.7-4.5,16.2-8.5
+	c10-7.4,16.1-17.9,15.5-31.9c-0.3-7.7-2.8-15.3-5.9-22.5c0.9-1.3,1.8-2.6,2.7-4c15.8-23.1,28-48.5,28-48.5s1.2,7.8,4.9,20.6
+	c1.9,6.5,5.7,13.6,9.1,20.6c-14.8,12.1-24.1,26.1-27.3,35.3c-5.9,17-1.3,24.7,7.4,26.5c3.9,0.8,9.5-1,13.7-2.8
+	c5.2-1.7,11.5-4.6,17.3-8.9c10-7.4,19.6-17.7,19.1-31.6c-0.3-6.4-2-12.7-4.3-18.7c12.6-5.2,28.9-8.2,49.6-5.7
+	c44.5,5.2,53.3,33,51.6,44.6c-1.7,11.6-11,18-14.1,20c-3.1,1.9-4.1,2.6-3.8,4c0.4,2.1,1.8,2,4.5,1.6c3.7-0.6,23.4-9.5,24.2-30.9
+	C513,250.3,486.9,220.3,440.6,220.6L440.6,220.6z M97.4,336.3c-14.7,16.1-35.4,22.2-44.2,17c-9.5-5.5-5.8-29.2,12.3-46.3
+	c11-10.4,25.3-20,34.7-25.9c2.1-1.3,5.3-3.2,9.1-5.5c0.6-0.4,1-0.6,1-0.6c0.7-0.4,1.5-0.9,2.3-1.4C119.3,298,112.9,319.4,97.4,336.3
+	L97.4,336.3z M204.9,263.2c-5.1,12.5-15.9,44.6-22.4,42.8c-5.6-1.5-9-25.8-1.1-49.8c4-12.1,12.5-26.5,17.5-32.1
+	c8.1-9,16.9-12,19.1-8.3C220.6,220.6,208.1,255.4,204.9,263.2z M293.6,305.6c-2.2,1.1-4.2,1.9-5.1,1.3c-0.7-0.4,0.9-1.9,0.9-1.9
+	s11.1-11.9,15.5-17.4c2.5-3.2,5.5-6.9,8.7-11.1v1.2C313.6,292.1,299.8,301.7,293.6,305.6z M362,290c-1.6-1.2-1.4-4.9,4-16.5
+	c2.1-4.6,6.9-12.3,15.2-19.6c1,3,1.6,5.9,1.5,8.6C382.6,280.5,369.8,287.2,362,290z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/sql.svg b/site/src/components/file-icon/icons/sql.svg
new file mode 100644
index 0000000..21335b3
--- /dev/null
+++ b/site/src/components/file-icon/icons/sql.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="373.1 216 149.4 176.3" enable-background="new 373.1 216 149.4 176.3" xml:space="preserve">
+<g>
+	<path fill="#E48E00" d="M447.8,392.3c41.9,0,74.7-15,74.7-34.1v-21.5c0-3.1-0.9-6.2-2.7-9.2l-0.1-0.1c1.7-2.9,2.7-6,2.7-9.2v-21.5
+		c0-3.1-0.9-6.2-2.7-9.2l-0.2-0.4c1.8-3,2.9-6.2,2.9-9.5V256c0-2.9-0.8-5.9-2.4-8.8l-0.2-0.3c0.5-1.3,0.8-2.6,0.8-4.1
+		c0-17.4-37.6-26.8-72.9-26.8c-35.3,0-72.9,9.4-72.9,26.8c0,1.4,0.3,2.8,0.8,4.1l-0.2,0.3c-1.6,2.9-2.4,5.9-2.4,8.8v21.5
+		c0,3.3,1,6.5,2.9,9.5l-0.2,0.4c-1.8,3.1-2.6,6.2-2.6,9.2v21.5c0,3.2,1,6.3,2.7,9.2l-0.1,0.1c-1.8,3-2.6,6.2-2.6,9.2v21.5
+		C373.1,377.3,405.9,392.3,447.8,392.3z M381.1,259.6c12,10.2,39.8,15.4,66.7,15.4c26.9,0,54.7-5.3,66.7-15.4v17.9
+		c0,12.3-27.4,26.1-66.7,26.1c-39.3,0-66.7-13.8-66.7-26.1V259.6z M381.1,297.9c12.3,11.2,37.5,18.4,66.7,18.4
+		c29.2,0,54.5-7.2,66.7-18.4v20.2c0,12.3-27.4,26.1-66.7,26.1c-39.3,0-66.7-13.8-66.7-26.1V297.9z M381.1,338
+		c12.3,11.2,37.5,18.4,66.7,18.4c29.2,0,54.5-7.2,66.7-18.4v20.2c0,12.3-27.4,26.1-66.7,26.1c-39.3,0-66.7-13.7-66.7-26.1V338z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/stylus.svg b/site/src/components/file-icon/icons/stylus.svg
new file mode 100644
index 0000000..0d69e13
--- /dev/null
+++ b/site/src/components/file-icon/icons/stylus.svg
@@ -0,0 +1,21 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="38.8 33.4 138.5 141.4" enable-background="new 38.8 33.4 138.5 141.4" xml:space="preserve">
+<g>
+	<path fill="#B3D107" d="M170.8,33.4c1.6,0,3,0.4,4,1.2c1,0.8,1.7,1.9,2.1,3.3c0.4,1.4,0.4,2.9,0.2,4.7c-0.3,1.8-0.9,3.5-1.9,5.2
+		c-0.2,0.2-0.5,0.2-0.8,0c-0.3-0.2-0.5-0.5-0.7-0.8c0.2-1.3-0.2-2.4-1.4-3.3c-1.1-0.9-2.9-1.3-5.3-1.3c-4.5,0-9,1.7-13.5,5
+		c-4.5,3.3-8.9,7.7-13.2,13.2c-4.3,5.5-8.3,11.8-12,18.9c-3.7,7.1-6.9,14.4-9.7,22c-2.7,7.5-4.9,15-6.5,22.5
+		c-1.6,7.4-2.4,14.2-2.4,20.3c0,3.3,0.9,4.9,2.8,4.9c1.3,0,2.6-0.5,3.9-1.6c1.3-1.1,2.7-2.7,4.3-4.9c0.3-0.2,0.6-0.2,0.9,0.1
+		c0.3,0.3,0.4,0.6,0.2,1.1c-2.2,3.3-4.8,6-7.7,8.2c-2.9,2.2-5.6,3.3-8,3.3c-2.1,0-3.5-0.6-4.3-1.8c-0.8-1.2-1.2-2.7-1.2-4.6
+		c0-5.1,1.1-11.6,3.3-19.3c2.2-7.7,5.1-15.8,8.8-24.4c3.7-8.6,7.9-17.1,12.7-25.7c4.8-8.5,9.8-16.2,15-23
+		c5.2-6.8,10.4-12.4,15.7-16.6C161.3,35.6,166.2,33.4,170.8,33.4z"/>
+</g>
+<g>
+	<path fill="#B3D107" d="M45.3,174.9c-1.6,0-3-0.4-4-1.2c-1-0.8-1.7-1.9-2.1-3.3c-0.4-1.4-0.4-2.9-0.2-4.7c0.3-1.8,0.9-3.5,1.9-5.2
+		c0.2-0.2,0.5-0.2,0.8,0c0.3,0.2,0.5,0.5,0.7,0.8c-0.2,1.3,0.2,2.4,1.4,3.3c1.1,0.9,2.9,1.3,5.3,1.3c4.5,0,9-1.7,13.5-5
+		c4.5-3.3,8.9-7.7,13.2-13.2c4.3-5.5,8.3-11.7,12-18.9c3.7-7.1,6.9-14.4,9.7-22c2.7-7.5,4.9-15,6.5-22.5c1.6-7.4,2.4-14.2,2.4-20.3
+		c0-3.3-0.9-4.9-2.8-4.9c-1.3,0-2.6,0.5-3.9,1.6c-1.3,1.1-2.7,2.7-4.3,4.9c-0.3,0.2-0.6,0.2-0.9-0.1c-0.3-0.3-0.4-0.6-0.2-1.1
+		c2.2-3.3,4.8-6,7.7-8.2c2.9-2.2,5.6-3.3,8-3.3c2.1,0,3.5,0.6,4.3,1.8s1.2,2.7,1.2,4.6c0,5.1-1.1,11.6-3.3,19.3
+		c-2.2,7.7-5.1,15.8-8.8,24.4c-3.7,8.6-7.9,17.1-12.7,25.7c-4.8,8.5-9.8,16.2-15,23c-5.2,6.8-10.4,12.4-15.7,16.6
+		C54.8,172.7,49.9,174.9,45.3,174.9z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/svg.svg b/site/src/components/file-icon/icons/svg.svg
new file mode 100644
index 0000000..71920e3
--- /dev/null
+++ b/site/src/components/file-icon/icons/svg.svg
@@ -0,0 +1,15 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="189.2 189.2 221.6 221.6" enable-background="new 189.2 189.2 221.6 221.6" xml:space="preserve">
+<title>SVG Simple Logo Tiny</title>
+<desc>
+	Designed for the SVG Logo Contest in 2006 by Harvey Rayner. It is available under the Creative Commons license for those who have an SVG product or who are using SVG on their site.
+	</desc>
+<path fill="#7F7F7F" d="M189.2,189.2v221.6h221.6V189.2H189.2z M231.7,288.9L231.7,288.9c2.2,2.2,5.3,3.6,8.7,3.6v0
+	c8.2,0,15.7,3.3,21,8.7l0,0c5.4,5.4,8.7,12.8,8.7,21.1c0,16.4-13.3,29.8-29.8,29.8c-16.4,0-29.8-13.3-29.8-29.8h17.4
+	c0,6.8,5.5,12.3,12.3,12.3c6.8,0,12.3-5.5,12.3-12.3c0-3.4-1.4-6.5-3.6-8.7h0c-2.2-2.2-5.3-3.6-8.7-3.6v0c-8.2,0-15.7-3.3-21.1-8.7
+	s-8.7-12.8-8.7-21.1c0-16.4,13.3-29.8,29.8-29.8c16.4,0,29.8,13.3,29.8,29.8h-17.4c0-6.8-5.5-12.3-12.3-12.3
+	c-6.8,0-12.3,5.5-12.3,12.3C228.1,283.6,229.5,286.6,231.7,288.9z M308.7,352h-17.4l-21.1-101.7h17.4l12.3,59.5l12.3-59.5h17.4
+	L308.7,352z M359.5,352c-16.4,0-29.8-13.3-29.8-29.8v0v-42.1h0c0-16.4,13.3-29.8,29.8-29.8s29.8,13.3,29.8,29.8h-17.4
+	c0-6.8-5.5-12.3-12.3-12.3c-6.8,0-12.3,5.5-12.3,12.3v42.1c0,6.8,5.5,12.3,12.3,12.3c6.8,0,12.3-5.5,12.3-12.3v0v-12.3h-12.3v-17.4
+	h0h29.8v29.8h0C389.3,338.7,376,352,359.5,352z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/twig.svg b/site/src/components/file-icon/icons/twig.svg
new file mode 100644
index 0000000..603c574
--- /dev/null
+++ b/site/src/components/file-icon/icons/twig.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 144 250" enable-background="new 0 0 144 250" xml:space="preserve">
+<path fill="#8BB247" d="M41,250c0,0,11-95-41-148c34,14,52,55,52,55S69,98,26,0c59,62,60,162,60,162s31-21,58-7c-56,12-57,95-57,95
+	H41z"/>
+<circle fill="#FFFFFF" cx="58" cy="198" r="6"/>
+<circle fill="#FFFFFF" cx="73" cy="198" r="6"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/txt.svg b/site/src/components/file-icon/icons/txt.svg
new file mode 100644
index 0000000..6083e1a
--- /dev/null
+++ b/site/src/components/file-icon/icons/txt.svg
@@ -0,0 +1,9 @@
+<svg version="1.1" id="Calque_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="11.9 0 89.5 113.4"
+	 enable-background="new 11.9 0 89.5 113.4" xml:space="preserve">
+<title>document_file</title>
+<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+<path fill="#CCCCCC" d="M100.2,0H13.2c-0.7,0-1.2,0.6-1.2,1.3v110.9c0,0.7,0.5,1.3,1.2,1.3h87.1c0.7,0,1.2-0.6,1.2-1.3V1.3
+	C101.5,0.6,100.9,0,100.2,0z M65.6,94.5H23.9v-6h41.8V94.5z M89.5,76.6H23.9v-6h65.6V76.6z M89.5,58.7H23.9v-6h65.6V58.7z
+	 M89.5,40.8H23.9v-6h65.6V40.8z M89.5,22.9H23.9v-6h65.6V22.9z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/video.svg b/site/src/components/file-icon/icons/video.svg
new file mode 100644
index 0000000..f300a82
--- /dev/null
+++ b/site/src/components/file-icon/icons/video.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 113.4 113.4" enable-background="new 0 0 113.4 113.4" xml:space="preserve">
+<path fill="#4B72A1" d="M0,0v113.4h113.4V0H0z M44.2,84.8V28.6l32.1,28.1L44.2,84.8z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/xml.svg b/site/src/components/file-icon/icons/xml.svg
new file mode 100644
index 0000000..56fe4a5
--- /dev/null
+++ b/site/src/components/file-icon/icons/xml.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 13.5 8.7" enable-background="new 0 0 13.5 8.7" xml:space="preserve">
+<g>
+	<path fill="#EF790F" d="M0,4.5l4.5-2.7v1.3L1.1,5v0l3.4,1.9v1.3L0,5.5V4.5z"/>
+	<path fill="#EF790F" d="M4.8,8.7L8.1,0h1L5.8,8.7H4.8z"/>
+	<path fill="#EF790F" d="M13.5,5.6L9,8.2V7L12.5,5v0L9,3.1V1.8l4.5,2.6V5.6z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/icons/yml.svg b/site/src/components/file-icon/icons/yml.svg
new file mode 100644
index 0000000..915e769
--- /dev/null
+++ b/site/src/components/file-icon/icons/yml.svg
@@ -0,0 +1,9 @@
+<svg version="1.1" id="Calque_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="5 10 23 13"
+	 enable-background="new 5 10 23 13" xml:space="preserve">
+<title></title>
+<desc></desc>
+<path fill="#157EFB" d="M25,10H8c-1.7,0-3,1.3-3,3v7c0,1.7,1.3,3,3,3h17c1.7,0,3-1.3,3-3v-7C28,11.3,26.7,10,25,10z M13,14l-2,3v3
+	h-1v-3l-2-3v-1h1v1l1.5,2.2L12,14v-1h1V14z M19,20h-1v-5l-1,2h-0.5H16l-1-2v5h-1v-7h0.5H15l1.5,3l1.5-3h0.5H19V20z M25,20h-5v-7h1v6
+	h4V20z"/>
+</svg>
diff --git a/site/src/components/file-icon/icons/zip.svg b/site/src/components/file-icon/icons/zip.svg
new file mode 100644
index 0000000..1c0af6e
--- /dev/null
+++ b/site/src/components/file-icon/icons/zip.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="5.7 5.7 102.1 102.1" enable-background="new 5.7 5.7 102.1 102.1" xml:space="preserve">
+<g>
+	<path fill="#E8D36B" d="M58,84.2c-3.6,0-6.6,2.9-6.6,6.6c0,3.6,2.9,6.6,6.6,6.6c3.6,0,6.6-2.9,6.6-6.6C64.6,87.2,61.7,84.2,58,84.2
+		z"/>
+	<path fill="#E8D36B" d="M90.7,5.7h-68c-9.4,0-17,7.6-17,17v68c0,9.4,7.6,17,17,17h68c9.4,0,17-7.6,17-17v-68
+		C107.7,13.3,100.1,5.7,90.7,5.7z M51,12.5h12.5v5.4H51V12.5z M51,35h12.5v5.4H51V35z M51,24h12.5v5.4H51V24z M58,101.6
+		c-5.8,0-10.5-4.2-11.3-9.8l3.1-38.5h4.6v-7.9h6.8v7.9h5l3.1,38.9C68.6,97.8,63.8,101.6,58,101.6z"/>
+</g>
+</svg>
diff --git a/site/src/components/file-icon/index.vue b/site/src/components/file-icon/index.vue
new file mode 100644
index 0000000..a6fe49a
--- /dev/null
+++ b/site/src/components/file-icon/index.vue
@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus"></style>
\ No newline at end of file
diff --git a/site/src/components/file-icon/script.js b/site/src/components/file-icon/script.js
new file mode 100644
index 0000000..7786d4f
--- /dev/null
+++ b/site/src/components/file-icon/script.js
@@ -0,0 +1,61 @@
+export default
+{
+    name: 'file-icon',
+
+    data()
+    {
+        return {
+            test: require('./icons/' + 'apache' + '.svg')
+        }
+    },
+
+    props:
+    {
+        extension: { type: String, default: '' }
+    },
+
+    created()
+    {
+        this.icons = {
+            js: ['js'],
+            html: ['html', 'htm'],
+            sass: ['sass', 'scss'],
+            less: ['less'],
+            stylus: ['stylus', 'styl'],
+            css: ['css'],
+            php: ['php'],
+            json: ['json'],
+            jade: ['jade'],
+            pug: ['pug'],
+            md: ['md'],
+            sql: ['sql'],
+            apache: ['htaccess', 'htpasswd'],
+            yml: ['yml'],
+            svg: ['svg'],
+            font: ['eot', 'ttf', 'woff', 'woff2'],
+            image: ['jpeg', 'jpg', 'tiff', 'gif', 'bmp', 'png', 'webp'],
+            video: ['mpeg', 'mpg', 'mp4', 'amv', 'wmv', 'mov', 'avi', 'ogv', 'mkv', 'webm'],
+            audio: ['mp3', 'wav', 'ogg', 'raw'],
+            zip: ['zip', 'rar', '7z', 'gz'],
+            txt: ['txt'],
+            coffee: ['coffee'],
+            git: ['gitignore', 'gitkeep'],
+            xml: ['xml'],
+            twig: ['twig'],
+            c: ['c', 'h']
+        }
+
+        this.icon = 'random'
+
+        for(const iconKey in this.icons)
+        {
+            const iconExtensions = this.icons[ iconKey ]
+            if(iconExtensions.indexOf(this.extension) !== -1)
+            {
+                this.icon = iconKey
+            }
+        }
+
+        this.iconPath = require(`./icons/${this.icon}.svg`)
+    }
+}
\ No newline at end of file
diff --git a/site/src/components/file-icon/style.styl b/site/src/components/file-icon/style.styl
new file mode 100644
index 0000000..e69de29
diff --git a/site/src/components/file-icon/template.html b/site/src/components/file-icon/template.html
new file mode 100644
index 0000000..b01c555
--- /dev/null
+++ b/site/src/components/file-icon/template.html
@@ -0,0 +1,3 @@
+<span>
+    <img :src="iconPath" alt="">
+</span>
\ No newline at end of file
diff --git a/site/src/components/files-tree-file/script.js b/site/src/components/files-tree-file/script.js
index 87dcb24..dc735df 100644
--- a/site/src/components/files-tree-file/script.js
+++ b/site/src/components/files-tree-file/script.js
@@ -1,17 +1,20 @@
+import FileIcon from '@/components/file-icon/'
+
 export default
 {
     name: 'files-tree-file',
 
+    components:
+    {
+        FileIcon
+    },
+
     props:
     {
         depth: { type: Number, default: 0 },
         content: { type: Object }
     },
 
-    created()
-    {
-    },
-
     methods:
     {
         onNameClick()
diff --git a/site/src/components/files-tree-file/style.styl b/site/src/components/files-tree-file/style.styl
index e69de29..c650010 100644
--- a/site/src/components/files-tree-file/style.styl
+++ b/site/src/components/files-tree-file/style.styl
@@ -0,0 +1,9 @@
+.icon
+    display inline-block
+    width 12px
+    height 12px
+
+    img
+        display inline-block
+        width 100%
+        height 100%
\ No newline at end of file
diff --git a/site/src/components/files-tree-file/template.html b/site/src/components/files-tree-file/template.html
index 98e4133..6d68169 100644
--- a/site/src/components/files-tree-file/template.html
+++ b/site/src/components/files-tree-file/template.html
@@ -1,5 +1,8 @@
 <div>
     <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
-        {{ content.name }}
+        <file-icon class="icon" :extension="content.data.extension"></file-icon>
+        <span class="text">
+            {{ content.name }}
+        </span>
     </a>
 </div>
\ No newline at end of file