diff --git a/frontend/src/components/dirent-detail/dirent-details.js b/frontend/src/components/dirent-detail/dirent-details.js
index b1010861eb..1de2e3c9e6 100644
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
-import { siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import DetailListView from './detail-list-view';
 import RepoInfo from '../../models/repo-info';
@@ -95,17 +94,23 @@ class DirentDetail extends React.Component {
 
   render() {
     let { dirent } = this.props;
-    let size = Utils.isHiDPI() ? 48 : 24;
-
-    let iconUrl = '';
+    
+    let smallIconUrl = '';
+    let bigIconUrl = '';
+    let smallIconSize = Utils.isHiDPI() ? 48 : 24;
+    let bigIconSize = 192;
     if (dirent.type === 'file') {
-      iconUrl = Utils.getFileIconUrl(dirent.name, size);
+      smallIconUrl = Utils.getFileIconUrl(dirent.name, smallIconSize);
+      bigIconUrl = Utils.getFileIconUrl(dirent.name, bigIconSize);
     } else {
       let isReadOnly = false;
       if (dirent.permission === 'r' || dirent.permission === 'preview') {
         isReadOnly = true;
       }
-      iconUrl = Utils.getFolderIconUrl({isReadOnly, size});
+      let options = {isReadOnly: isReadOnly, size: smallIconSize};
+      smallIconUrl = Utils.getFolderIconUrl(options);
+      options.size = bigIconSize;
+      bigIconUrl = Utils.getFolderIconUrl(options);
     }
 
     return (
@@ -113,13 +118,13 @@ class DirentDetail extends React.Component {
         <div className="detail-header">
           <div className="detail-control sf2-icon-x1" onClick={this.props.onItemDetailsClose}></div>
           <div className="detail-title dirent-title">
-            <div><img src={iconUrl} width="24" alt="" /></div>{' '}
+            <img src={smallIconUrl} width="24" height="24" alt="" />{' '}
             <span className="name ellipsis" title={dirent.name}>{dirent.name}</span>
           </div>
         </div>
         <div className="detail-body dirent-info">
           <div className="img">
-            <img src={iconUrl} width="96" alt="" />
+            <img src={bigIconUrl} width="96" alt="" />
           </div>
           {this.state.direntDetail && 
             <div className="dirent-table-container">
diff --git a/frontend/src/components/dirent-detail/lib-details.js b/frontend/src/components/dirent-detail/lib-details.js
index c9e87276d0..00bfd64009 100644
--- a/frontend/src/components/dirent-detail/lib-details.js
+++ b/frontend/src/components/dirent-detail/lib-details.js
@@ -57,7 +57,7 @@ class LibDetail extends React.Component {
         <div className="detail-header">
           <div className="detail-control sf2-icon-x1" onClick={this.props.closeDetails}></div>
           <div className="detail-title dirent-title">
-            <div><img src={titleIcon} width="24" alt="" /></div>{'  '}
+            <img src={titleIcon} width="24" height="24" alt="" />{'  '}
             <span className="name ellipsis" title={repo.repo_name}>{repo.repo_name}</span>
           </div>
         </div>