diff --git a/frontend/src/metadata/metadata-view/components/cell-formatter/index.js b/frontend/src/metadata/metadata-view/components/cell-formatter/index.js
index db32974d66..2f8f205726 100644
--- a/frontend/src/metadata/metadata-view/components/cell-formatter/index.js
+++ b/frontend/src/metadata/metadata-view/components/cell-formatter/index.js
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
 import { useCollaborators } from '../../hooks';
+import { Utils } from '../../../../utils/utils';
 
 const CellFormatter = ({ readonly, value, field, ...params }) => {
   const { collaborators, collaboratorsCache, updateCollaboratorsCache } = useCollaborators();
@@ -14,6 +15,8 @@ const CellFormatter = ({ readonly, value, field, ...params }) => {
       value,
       field,
       queryUserAPI: window.sfMetadataContext.userService.queryUser,
+      getFileIconUrl: Utils.getFileIconUrl,
+      getFolderIconUrl: Utils.getFolderIconUrl,
     };
   }, [readonly, value, field, collaborators, collaboratorsCache, updateCollaboratorsCache]);
 
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/index.css b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/index.css
index 1a923f7a28..cd89dd5c69 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/index.css
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/index.css
@@ -5,7 +5,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   border-right: 1px solid #eee;
-  padding: 6px 8px;
+  padding: 4px 8px;
   display: flex;
   justify-content: flex-start;
 }
@@ -71,7 +71,7 @@
 /* cell formatter */
 .sf-metadata-result-table-cell .sf-metadata-ui.cell-formatter-container {
   height: 100%;
-  line-height: 20px;
+  line-height: 24px;
   font-size: 14px;
 }
 
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index a2b3a71873..151f8f8669 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -391,17 +391,17 @@ export const Utils = {
   },
 
   getDirentIcon: function (dirent, isBig) {
-    if (!dirent) return mediaUrl + 'img/file/256/' + this.FILEEXT_ICON_MAP['default'];
-    let size = this.isHiDPI() ? 48 : 24;
+    if (!dirent) return mediaUrl + 'img/file/256/' + Utils.FILEEXT_ICON_MAP['default'];
+    let size = Utils.isHiDPI() ? 48 : 24;
     size = isBig ? 192 : size;
     if (dirent.isDir()) {
       let readonly = false;
       if (dirent.permission && (dirent.permission === 'r' || dirent.permission === 'preview')) {
         readonly = true;
       }
-      return this.getFolderIconUrl(readonly, size, dirent.has_been_shared_out);
+      return Utils.getFolderIconUrl(readonly, size, dirent.has_been_shared_out);
     } else {
-      return this.getFileIconUrl(dirent.name);
+      return Utils.getFileIconUrl(dirent.name);
     }
   },
 
@@ -424,15 +424,15 @@ export const Utils = {
   getFileIconUrl: function (filename) {
     let file_ext = '';
     if (filename.lastIndexOf('.') == -1) {
-      return mediaUrl + 'img/file/256/' + this.FILEEXT_ICON_MAP['default'];
+      return mediaUrl + 'img/file/256/' + Utils.FILEEXT_ICON_MAP['default'];
     } else {
       file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
     }
 
-    if (this.FILEEXT_ICON_MAP[file_ext]) {
-      return mediaUrl + 'img/file/256/' + this.FILEEXT_ICON_MAP[file_ext];
+    if (Utils.FILEEXT_ICON_MAP[file_ext]) {
+      return mediaUrl + 'img/file/256/' + Utils.FILEEXT_ICON_MAP[file_ext];
     } else {
-      return mediaUrl + 'img/file/256/' + this.FILEEXT_ICON_MAP['default'];
+      return mediaUrl + 'img/file/256/' + Utils.FILEEXT_ICON_MAP['default'];
     }
   },