diff --git a/frontend/app/ui_components/attachment-icon-directive.js b/frontend/app/ui_components/attachment-icon-directive.js
new file mode 100644
index 0000000000..338b7b04b3
--- /dev/null
+++ b/frontend/app/ui_components/attachment-icon-directive.js
@@ -0,0 +1,36 @@
+module.exports = function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      type: '&'
+    },
+    template: '<i class="icon-{{icon}}"></i>',
+    link: function(scope) {
+      var icon, type = scope.type();
+      switch(type) {
+        // images
+        case 'image/png':
+        case 'image/jpg':
+        case 'image/gif':
+          icon = 'image1'
+          break;
+        // documents
+        case 'application/pdf':
+          icon = 'page-pdf';
+          break;
+        case 'application/excel':
+        case 'application/vnd.ms-excel':
+        case 'application/x-excel':
+        case 'application/x-msexcel':
+          icon = 'page-xls';
+          break;
+        default:
+          icon = 'ticket';
+          break;
+      }
+
+      scope.icon = icon;
+    }
+  }
+}
diff --git a/frontend/app/ui_components/index.js b/frontend/app/ui_components/index.js
index 097b5f24e5..0fa0d11a96 100644
--- a/frontend/app/ui_components/index.js
+++ b/frontend/app/ui_components/index.js
@@ -107,5 +107,6 @@ angular.module('openproject.uiComponents')
   .directive('notifications', [require('./notifications-directive')])
   .directive('notificationBox', [require('./notification-box-directive')])
   .directive('uploadProgress', [require('./upload-progress-directive')])
+  .directive('attachmentIcon', [require('./attachment-icon-directive')])
   .filter('ancestorsExpanded', require('./filters/ancestors-expanded-filter'))
   .filter('latestItems', require('./filters/latest-items-filter'));