diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
index 79e859b69a..21684c624b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
@@ -33,6 +33,18 @@
     background-color: @gray-10;
 }
 
+.umb-media-grid__item-file-icon > span {
+    color: @white;
+    background: @gray-4;
+    padding: 1px 3px;
+    font-size: 10px;
+    line-height: 130%;
+    display: block;
+    margin-top: -30px;
+    margin-left: -10px;
+    position: relative;
+}
+
 .umb-media-grid__item.-selected {
     box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
 }
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 1855a3a6b0..fabe7c2291 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -363,13 +363,30 @@ ul.color-picker li {
     text-align: center;
 }
 
-.umb-sortable-thumbnails .umb-icon-holder .icon{
+.umb-sortable-thumbnails .umb-icon-holder .icon {
     font-size: 40px;
     line-height: 50px;
     color: @gray-3;
     display: block;
 }
 
+.umb-sortable-thumbnails .umb-icon-holder .file-icon > span {
+    color: @white;
+    background: @gray-4;
+    padding: 1px 3px;
+    font-size: 10px;
+    line-height: 130%;
+    display: block;
+    margin-top: -30px;
+    width: 2em;
+}
+
+.umb-sortable-thumbnails .umb-icon-holder .file-icon + small {
+    display: block;
+    margin-top: 1em;
+}
+
+
 .umb-sortable-thumbnails .umb-sortable-thumbnails__wrapper {
     width: 124px;
     height: 124px;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
index 9df33e7e0e..bad1ccc1ce 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -21,8 +21,10 @@
             <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail && item.extension != 'svg'" src="assets/img/transparent.png" alt="{{item.name}}" draggable="false" />
 
             <!-- Icon for files -->
-            <i class="umb-media-grid__item-icon {{item.icon}}" ng-if="!item.thumbnail && item.extension != 'svg'"></i>
-
+            <span class="umb-media-grid__item-file-icon" ng-if="!item.thumbnail && item.extension != 'svg'">
+                <i class="umb-media-grid__item-icon {{item.icon}}"></i>
+                <span>.{{item.extension}}</span>
+            </span>
         </div>
     </div>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
index fd28929616..2efed8b3e8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
@@ -17,7 +17,10 @@
 
                 <!-- FILE -->
                 <span class="umb-icon-holder" ng-hide="image.thumbnail || image.metaData.umbracoExtension.Value === 'svg' || image.extension === 'svg'">
-                    <i class="icon {{image.icon}} large"></i>
+                    <span class="file-icon">
+                        <i class="icon {{image.icon}} large"></i>
+                        <span>.{{image.extension}}</span>
+                    </span>
                     <small>{{image.name}}</small>
                 </span>