diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index a9f7748af4..8be07d9a19 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -424,7 +424,7 @@ class DirentListItem extends React.Component {
           </td>
           <td className="text-center">
             <div className="dir-icon">
-              <img src={dirent.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : fileIconUrl} alt='' />
+              <img className="icon" src={dirent.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : fileIconUrl} alt='' />
               {dirent.is_locked && <img className="locked" src={siteRoot + 'media/img/file-locked-32.png'} alt={gettext('locked')} />}
             </div>
           </td>
diff --git a/frontend/src/components/draft-list-view/draft-list-item.js b/frontend/src/components/draft-list-view/draft-list-item.js
index c94f1e3d88..2eedec8904 100644
--- a/frontend/src/components/draft-list-view/draft-list-item.js
+++ b/frontend/src/components/draft-list-view/draft-list-item.js
@@ -58,7 +58,7 @@ class DraftListItem extends React.Component {
     localTime = moment(localTime).fromNow();
     return (
       <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td className="text-center"><img src={siteRoot + 'media/img/file/192/txt.png'} alt='icon' /></td>
+        <td className="text-center"><img className="icon" src={siteRoot + 'media/img/file/192/txt.png'} alt='icon' /></td>
         <td className="name" >
           <a href={draftUrl} target="_blank">{fileName}</a>
         </td>
diff --git a/frontend/src/components/review-list-view/review-list-item.js b/frontend/src/components/review-list-view/review-list-item.js
index 151e69060e..099c4683da 100644
--- a/frontend/src/components/review-list-view/review-list-item.js
+++ b/frontend/src/components/review-list-view/review-list-item.js
@@ -103,7 +103,7 @@ class ReviewListItem extends React.Component {
 
     return (
       <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td className="text-center" style={{width: '4%'}}><img src={siteRoot + 'media/img/file/192/txt.png'} alt="icon"/></td>
+        <td className="text-center" style={{width: '4%'}}><img className="icon" src={siteRoot + 'media/img/file/192/txt.png'} alt="icon"/></td>
         <td style={{width: '26%'}}><a href={reviewUrl} target="_blank">{fileName}</a></td>
         <td className='library' style={{width: '25%'}}>{item.draft_origin_repo_name}</td>
         <td className="update" style={{width: '20%'}}>{localTime}</td>
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index 1b9eb38064..eafd8fb1da 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -293,7 +293,7 @@ class SharedRepoListItem extends React.Component {
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-          <td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
+          <td><img className="icon" src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
           <td><Link to={libPath}>{repo.repo_name}</Link></td>
           <td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
           <td>{repo.size}</td>
@@ -323,7 +323,7 @@ class SharedRepoListItem extends React.Component {
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-          <td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
+          <td><img className="icon" src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
           <td>
             <Link to={libPath}>{repo.repo_name}</Link><br />
             <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
diff --git a/frontend/src/components/tree-dir-view/tree-dir-list.js b/frontend/src/components/tree-dir-view/tree-dir-list.js
index df0b50eebd..7b3894b48d 100644
--- a/frontend/src/components/tree-dir-view/tree-dir-list.js
+++ b/frontend/src/components/tree-dir-view/tree-dir-list.js
@@ -37,7 +37,7 @@ class TreeDirList extends React.Component {
     return (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="text-center">
-          <img src={node.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : siteRoot + 'media/img/file/192/txt.png'} alt='icon'></img>
+          <img className="icon" src={node.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : siteRoot + 'media/img/file/192/txt.png'} alt='icon'></img>
         </td>
         <td className="name">
           <a href={href} onClick={this.onMainNodeClick}>{node.name}</a>
diff --git a/frontend/src/pages/my-libs/item.js b/frontend/src/pages/my-libs/item.js
index 6399353b2c..6917478227 100644
--- a/frontend/src/pages/my-libs/item.js
+++ b/frontend/src/pages/my-libs/item.js
@@ -240,7 +240,7 @@ class Item extends Component {
     const desktopItem = (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-          <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+          <td><img className="icon" src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
           <td>
             {this.state.showChangeLibName && (
               <RenameInput 
@@ -278,7 +278,7 @@ class Item extends Component {
     const mobileItem = (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-          <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+          <td><img className="icon" src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
           <td>
             {data.repo_name ?
               <Link to={data.url}>{data.repo_name}</Link> :
diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js
index 2e2670a0ae..8c39399fd6 100644
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@@ -149,7 +149,7 @@ class Item extends Component {
 
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
+        <td><img className="icon" src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td><Link to={folderUrl}>{item.folder_name}</Link></td>
         {shareTo}
         <td>
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js
index 6d8b8398ff..1d330fe10e 100644
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@@ -169,7 +169,7 @@ class Item extends Component {
 
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
+        <td><img className="icon" src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td><Link to={repoUrl}>{item.repo_name}</Link></td>
         {shareTo}
         <td>
diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js
index ce39f4889a..e34a589c88 100644
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@@ -170,7 +170,7 @@ class Item extends Component {
 
     return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={iconUrl} width="24" /></td>
+        <td><img className="icon" src={iconUrl} width="24" /></td>
         <td>
           {item.is_dir ?
             <Link to={linkUrl}>{item.obj_name}</Link> :
diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js
index 56a6f07303..4006617e43 100644
--- a/frontend/src/pages/share-admin/upload-links.js
+++ b/frontend/src/pages/share-admin/upload-links.js
@@ -128,7 +128,7 @@ class Item extends Component {
 
     return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={iconUrl} width="24" /></td>
+        <td><img className="icon" src={iconUrl} width="24" /></td>
         <td><Link to={uploadUrl}>{item.obj_name}</Link></td>
         <td><Link to={`${siteRoot}library/${item.repo_id}/${item.repo_name}`}>{item.repo_name}</Link></td>
         <td>{item.view_cnt}</td>
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index deb8423673..a5b7310869 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -208,7 +208,7 @@ class Item extends Component {
     const desktopItem = (
       <Fragment>
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-          <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+          <td><img className="icon" src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
           <td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link></td>
           <td>
             {(isPro && data.is_admin) &&
@@ -237,7 +237,7 @@ class Item extends Component {
     const mobileItem = (
       <Fragment>
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-          <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+          <td><img className="icon" src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
           <td>
             <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link><br />
             <span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span>
diff --git a/frontend/src/pages/starred/starred.js b/frontend/src/pages/starred/starred.js
index 40d2edef65..3a6722a811 100644
--- a/frontend/src/pages/starred/starred.js
+++ b/frontend/src/pages/starred/starred.js
@@ -168,7 +168,7 @@ class Item extends Component {
           {
             data.thumbnail_url ?
               <img className="thumbnail" src={data.thumbnail_url} alt="" /> :
-              <img src={data.file_icon_url} alt={gettext('icon')} width="24" />
+              <img className="icon" src={data.file_icon_url} alt={gettext('icon')} width="24" />
           }
         </td>
         <td>
@@ -192,7 +192,7 @@ class Item extends Component {
           {
             data.thumbnail_url ?
               <img className="thumbnail" src={data.thumbnail_url} alt="" /> :
-              <img src={data.file_icon_url} alt={gettext('icon')} width="24" />
+              <img className="icon" src={data.file_icon_url} alt={gettext('icon')} width="24" />
           }
         </td>
         <td>
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 0067b9fd56..2625be6f54 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -844,9 +844,9 @@ table td {
     word-break: break-all;
 }
 
-table td img {
-    width: 1.5rem;
-    height: 1.5rem;
+table td .icon {
+    width: 24px;
+    height: 24px;
 }
 
 .table-thead-hidden thead tr {