diff --git a/frontend/src/components/search/search-result-item.js b/frontend/src/components/search/search-result-item.js
index 407ddb219a..770d1e2ea0 100644
--- a/frontend/src/components/search/search-result-item.js
+++ b/frontend/src/components/search/search-result-item.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   item: PropTypes.object.isRequired,
@@ -15,11 +17,16 @@ class SearchResultItem extends React.Component {
 
   render() {
     let item = this.props.item;
+    let fileIconSize = Utils.isHiDPI() ? 48 : 24;
+    let fileIconUrl = item.is_dir ? siteRoot + 'media/img/folder-192.png' : Utils.getFileIconUrl(item.name, fileIconSize);
     return (
       <li className="search-result-item" onClick={this.onClickHandler}>
-        <span className="item-content item-name">{item.name}</span>
-        <span className="item-content item-link">{item.link_content}</span>
-        <div className="item-content item-text" dangerouslySetInnerHTML={{__html: item.content}}></div>
+        <img className="item-img" src={fileIconUrl} alt="" />
+        <div className="item-content">
+          <dt className="item-name ellipsis">{item.name}</dt>
+          <dd className="item-link ellipsis">{item.repo_name}/{item.link_content}</dd>
+          <dd className="item-text ellipsis" dangerouslySetInnerHTML={{__html: item.content}}></dd>
+        </div>
       </li>
     );
   }
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index 27d814a906..baadb8874b 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -51,10 +51,11 @@
 }
 
 .search-result-container .search-result-item {
+  display: flex;
   padding: 0.25rem 0.75rem;
   border-left: 2px solid #fff;
-  cursor: pointer;
   font-size: 0.8125rem;
+  cursor: pointer;
 }
 
 .search-result-container .search-result-item:hover {
@@ -62,22 +63,25 @@
   background-color: #eee;
 }
 
-.search-result-item .item-content {
-  font-weight: normal;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.search-result-item .item-img {
+  width: 36px;
+  height: 36px;
 }
-.search-result-item .item-name {
+.search-result-item .item-content {
+  flex: 1;
+  width: 0;
+  margin-left: 0.25rem;
+}
+.item-content .item-name {
   color: #eb8205 !important;
 }
-.search-result-item .item-link {
+.item-content .item-link {
   color: #888;
-}
-.search-result-item .item-text {
   margin: 0;
 }
-.search-result-item .item-text b {
+.item-content .item-text {
+  margin: 0;
+}
+.item-content .item-text b {
   font-weight: bold;
 }