diff --git a/changelog/unreleased/678 b/changelog/unreleased/678
new file mode 100644
index 000000000..076ceef79
--- /dev/null
+++ b/changelog/unreleased/678
@@ -0,0 +1,7 @@
+Enhancement: Added iconUrl to oc-file element
+
+The oc-file element now supports passing an arbitrary URL to be displayed as a file thumbnail.
+It will fall back to the icon name in case the thumbnail could not be loaded.
+
+https://github.com/owncloud/owncloud-design-system/pull/678
+
diff --git a/src/assets/examples/lorem.png b/src/assets/examples/lorem.png
new file mode 100644
index 000000000..a02ced103
Binary files /dev/null and b/src/assets/examples/lorem.png differ
diff --git a/src/elements/OcFile.vue b/src/elements/OcFile.vue
index 334a30dc2..44ac5aa00 100644
--- a/src/elements/OcFile.vue
+++ b/src/elements/OcFile.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="oc-file" @click="onClick" role="button">
-    <oc-icon :name="icon" variation="file-type" class="uk-position-center-left" />
+    <oc-icon :name="icon" :url="iconUrl" variation="file-type" class="uk-position-center-left" />
     <span class="oc-file-name" v-text="name" /><span v-if="extension" class="oc-file-extension"
       >.{{ extension }}</span
     >
@@ -16,13 +16,24 @@ export default {
   release: "1.0.0",
   props: {
     /**
-     * The icon to be used.
+     * The icon name to be used.
      */
     icon: {
       type: String,
       required: false,
       default: "folder",
     },
+    /**
+     * Icon URL.
+     *
+     * Has higher priority than icon name.
+     * In case of failure it will fall back to the icon name if set.
+     */
+    iconUrl: {
+      type: String,
+      required: false
+    },
+
     /**
      * The name of a file.
      * Please note that the name shall not hold the extension
@@ -78,6 +89,17 @@ export default {
         <li>
         </li>
       </ul>
+      <h3 class="uk-heading-divider">
+        Icon URL examples
+      </h3>
+      <ul class="uk-list">
+        <li>
+          <oc-file icon="image" iconUrl="examples/lorem.png" name="file with preview" extension="jpg" />
+        </li>
+        <li>
+          <oc-file icon="image" iconUrl="examples/notfound.png" name="file with preview that failed to load" extension="jpg" />
+        </li>
+      </ul>
       <h3 class="uk-heading-divider">
         Interactions
       </h3>