diff --git a/app/components/directory-listing/template.hbs b/app/components/directory-listing/template.hbs
index efeee21..fc56a37 100644
--- a/app/components/directory-listing/template.hbs
+++ b/app/components/directory-listing/template.hbs
@@ -8,6 +8,7 @@
   <tbody>
     {{#each items as |item|}}
     <tr>
+      <td class="icon">{{item-icon type=item.type}}</td>
       <td class="name">{{item.name}}</td>
       <td class="type">{{item.type}}</td>
     </tr>
diff --git a/app/components/item-icon/component.js b/app/components/item-icon/component.js
new file mode 100644
index 0000000..b32642a
--- /dev/null
+++ b/app/components/item-icon/component.js
@@ -0,0 +1,9 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+
+  classNames: ['item-icon'],
+
+  type: null,
+
+});
diff --git a/app/components/item-icon/template.hbs b/app/components/item-icon/template.hbs
new file mode 100644
index 0000000..82d3970
--- /dev/null
+++ b/app/components/item-icon/template.hbs
@@ -0,0 +1 @@
+<img src="/img/file-icons/{{type}}.svg">
\ No newline at end of file
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 45576a9..7b9388f 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -11,4 +11,5 @@ body {
   padding: 0;
 }
 
-@import "components/directory_listing";
+@import "components/directory-listing";
+@import "components/item-icon";
diff --git a/app/styles/components/_directory_listing.scss b/app/styles/components/_directory-listing.scss
similarity index 83%
rename from app/styles/components/_directory_listing.scss
rename to app/styles/components/_directory-listing.scss
index 0923e1e..ada968c 100644
--- a/app/styles/components/_directory_listing.scss
+++ b/app/styles/components/_directory-listing.scss
@@ -18,6 +18,10 @@
       td {
         padding: 1rem 1.5rem;
 
+        &.icon {
+          width: 1rem;
+          padding-right: 0;
+        }
         &.type {
           color: #aaa;
         }
diff --git a/app/styles/components/_item-icon.scss b/app/styles/components/_item-icon.scss
new file mode 100644
index 0000000..572f379
--- /dev/null
+++ b/app/styles/components/_item-icon.scss
@@ -0,0 +1,8 @@
+.item-icon {
+
+  img {
+    height: 1.2rem;
+    vertical-align: middle;
+  }
+
+}
diff --git a/public/img/file-icons/folder.svg b/public/img/file-icons/folder.svg
new file mode 100644
index 0000000..2fdfff5
--- /dev/null
+++ b/public/img/file-icons/folder.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 216 180" enable-background="new 0 0 216 180" xml:space="preserve">
+<path fill="#333" d="M212,24H94.1408L79.328,1.7813C78.586,0.668,77.338,0,76,0H4C1.7912,0,0,1.7893,0,4v24v16v116.0117
+	C0,171.0353,8.9608,180,19.9764,180h176.0472C207.0392,180,216,171.0353,216,160.0117V44V28C216,25.7893,214.2088,24,212,24z
+	 M208,40H8v-8h84h116V40z M8,8h65.8592l10.666,16H8V8z M208,160.0117C208,166.6213,202.6268,172,196.0236,172H19.9764
+	C13.3732,172,8,166.6213,8,160.0117V48h200V160.0117z"/>
+</svg>
diff --git a/tests/integration/components/directory-listing/component-test.js b/tests/integration/components/directory-listing/component-test.js
index ef9adfd..23e24cb 100644
--- a/tests/integration/components/directory-listing/component-test.js
+++ b/tests/integration/components/directory-listing/component-test.js
@@ -13,6 +13,6 @@ test('it renders directory items', function(assert) {
 
   this.render(hbs`{{directory-listing items=items}}`);
 
-  assert.equal(this.$('table tbody tr:first td:first').text(), 'documents');
-  assert.equal(this.$('table tbody tr:first td:last').text(), 'folder');
+  assert.equal(this.$('table tbody tr:first td:nth-of-type(2)').text(), 'documents');
+  assert.equal(this.$('table tbody tr:first td:nth-of-type(3)').text(), 'folder');
 });
diff --git a/tests/integration/components/item-icon/component-test.js b/tests/integration/components/item-icon/component-test.js
new file mode 100644
index 0000000..d74d975
--- /dev/null
+++ b/tests/integration/components/item-icon/component-test.js
@@ -0,0 +1,12 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('item-icon', 'Integration | Component | item icon', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  this.render(hbs`{{item-icon type='folder'}}`);
+
+  assert.equal(this.$('img').attr('src'), '/img/file-icons/folder.svg');
+});