diff --git a/main.js b/main.js
index 1e7ae7d..575acb0 100644
--- a/main.js
+++ b/main.js
@@ -6,6 +6,7 @@ define(function (require, exports, module) {
     ExtensionUtils.loadStyleSheet(module, 'styles/pictonic.css');
 
     require('./services/injector').init();
+    require('./services/preferences').init();
 
     require('./services/onlineTracking').init();
 });
diff --git a/package.json b/package.json
index 6a4d6c4..bdc8a48 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
     "title": "Documents Toolbar",
     "description": "Adds toolbar with a list of open documents on the top of the editor.",
     "homepage": "https://github.com/dnbard/brackets-documents-toolbar",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "author": "Alex Bardanov <dnbard@gmail.com>",
     "license": "MIT",
     "engines": {
diff --git a/services/preferences.js b/services/preferences.js
new file mode 100644
index 0000000..dae5dd6
--- /dev/null
+++ b/services/preferences.js
@@ -0,0 +1,15 @@
+var PreferencesManager = require('preferences/PreferencesManager');
+
+define(function(require, exports){
+    var prefs = PreferencesManager.getExtensionPrefs('dnbard.documents-toolbar');
+
+    exports.init = function(){
+        if (prefs.get('icons') === undefined){
+            prefs.set('icons', true);
+        }
+    }
+
+    exports.get = function(id){
+        return prefs.get(id);
+    }
+});
diff --git a/styles/main.css b/styles/main.css
index 150f1c3..2c69afb 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -31,14 +31,15 @@
 
 .ext-documents .document-icon{
     font-size: 20px;
-    position: absolute;
     top: 5px;
     left: 4px;
+    vertical-align: top;
+    margin-right: 6px;
+    margin-left: -4px;
 }
 
 .ext-documents .document-name{
     padding-right: 4px;
-    margin-left: 14px;
 }
 
 .ext-documents .document:before{
diff --git a/templates/holder.html b/templates/holder.html
index f83dd1e..fd5b126 100644
--- a/templates/holder.html
+++ b/templates/holder.html
@@ -5,7 +5,7 @@
         </span>
         <span data-bind="foreach: documents">
             <span class="document" data-bind="css:{selected: $data._path === $parent.selectedPath(), changed: $parent.isChanged($data)}, click: $parent.onDocumentClick">
-                <span class="document-icon" data-bind="css: $parent.getDocumentIcon($data), style:{color: $parent.getDocumentIconColor($data)}"></span>
+                <span class="document-icon" data-bind="css: $parent.getDocumentIcon($data), style:{color: $parent.getDocumentIconColor($data)}, visible: $parent.iconsEnabled"></span>
                 <span class="document-name" data-bind="text: $data._name"></span>
                 <span class="document-close" data-bind="click: $parent.onDocumentClose">
                     <i class="fa fa-times-circle"></i>
diff --git a/viewmodels/documents.js b/viewmodels/documents.js
index 926c6b9..02e4e4c 100644
--- a/viewmodels/documents.js
+++ b/viewmodels/documents.js
@@ -7,7 +7,8 @@ define(function(require, exports, module){
         _ = require('../vendor/lodash'),
         Icons = require('../services/icons'),
         config = require('../config'),
-        $DocumentManager = $(DocumentManager);
+        $DocumentManager = $(DocumentManager),
+        prefs = require('../services/preferences');
     
     function DocumentsViewModel(){
         var self = this;
@@ -18,6 +19,8 @@ define(function(require, exports, module){
         }, this);
         this.changed = ko.observableArray([]);
 
+        this.iconsEnabled = ko.observable(prefs.get('icons'));
+
         this.onDocumentClick = function(model){
             DocumentManager.getDocumentForPath(model._path)
                 .done(function(doc){