diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index c1f350dccd6aa6d41be5e80f36d2fab02380d294..5e0ad7acdfd000c589c3fa767c7f264fed071060 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -97,6 +97,7 @@ export default {
               :path="entry.flatPath"
               :type="entry.type"
               :url="entry.webUrl"
+              :mode="entry.mode"
               :submodule-tree-url="entry.treeUrl"
               :lfs-oid="entry.lfsOid"
               :loading-path="loadingPath"
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index d53630163359b4126dfa270befe41f1cd32179d2..615e329f4154b47a444088bc15d8bfc92c471faa 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -66,6 +66,11 @@ export default {
       type: String,
       required: true,
     },
+    mode: {
+      type: String,
+      required: false,
+      default: '',
+    },
     type: {
       type: String,
       required: true,
@@ -140,6 +145,7 @@ export default {
       >
         <file-icon
           :file-name="fullPath"
+          :file-mode="mode"
           :folder="isFolder"
           :submodule="isSubmodule"
           :loading="path === loadingPath"
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index b084ebdf774c6b39357e86047ddd0c75b9018d3f..7484486d6b40c59e481d7b7e6cbb71d8688215d0 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import getIconForFile from './file_icon/file_icon_map';
+import { FILE_SYMLINK_MODE } from '../constants';
 
 /* This is a re-usable vue component for rendering a svg sprite
     icon
@@ -24,6 +25,11 @@ export default {
       type: String,
       required: true,
     },
+    fileMode: {
+      type: String,
+      required: false,
+      default: '',
+    },
 
     folder: {
       type: Boolean,
@@ -60,8 +66,12 @@ export default {
     },
   },
   computed: {
+    isSymlink() {
+      return this.fileMode === FILE_SYMLINK_MODE;
+    },
     spriteHref() {
       const iconName = this.submodule ? 'folder-git' : getIconForFile(this.fileName) || 'file';
+
       return `${gon.sprite_file_icons}#${iconName}`;
     },
     folderIconName() {
@@ -75,13 +85,11 @@ export default {
 </script>
 <template>
   <span>
-    <svg v-if="!loading && !folder" :class="[iconSizeClass, cssClasses]">
-      <use v-bind="{ 'xlink:href': spriteHref }" /></svg
-    ><gl-icon
-      v-if="!loading && folder"
-      :name="folderIconName"
-      :size="size"
-      class="folder-icon"
-    /><gl-loading-icon v-if="loading" :inline="true" />
+    <gl-loading-icon v-if="loading" :inline="true" />
+    <gl-icon v-else-if="isSymlink" name="symlink" :size="size" />
+    <svg v-else-if="!folder" :class="[iconSizeClass, cssClasses]">
+      <use v-bind="{ 'xlink:href': spriteHref }" />
+    </svg>
+    <gl-icon v-else :name="folderIconName" :size="size" class="folder-icon" />
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/constants.js b/app/assets/javascripts/vue_shared/constants.js
index 63ce421271768dfc3788e6d14f1e65badbcca1f6..235beb1f22df08ad071734ec27a2827b7f575bd1 100644
--- a/app/assets/javascripts/vue_shared/constants.js
+++ b/app/assets/javascripts/vue_shared/constants.js
@@ -6,6 +6,8 @@ const INTERVALS = {
   day: 'day',
 };
 
+export const FILE_SYMLINK_MODE = '120000';
+
 export const timeRanges = [
   {
     label: __('30 minutes'),
diff --git a/changelogs/unreleased/symlink-icon-ui.yml b/changelogs/unreleased/symlink-icon-ui.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6a907bec6cb1920b54672381abe863eba5ebfbb9
--- /dev/null
+++ b/changelogs/unreleased/symlink-icon-ui.yml
@@ -0,0 +1,5 @@
+---
+title: Show symlink icon in repository browser
+merge_request: 36524
+author:
+type: fixed
diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
index 005b2c5da1c4a0ff2571750140ce2f4b4f2e6734..0f5b3cd3f5ee38fd0b4bf32ecace6d81b009c275 100644
--- a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
+++ b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
@@ -8,6 +8,7 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
   <file-icon-stub
     aria-hidden="true"
     cssclasses="mr-2"
+    filemode=""
     filename="foo/bar/dummy.md"
     size="18"
   />
diff --git a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
index 97597ed806366a885ffc20557f3e1ad488bde330..ac60fc4917d96e18e14ed47fb0ebea5e7ec1e52d 100644
--- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
+++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
@@ -1,5 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Repository table row component renders a symlink table row 1`] = `
+<tr
+  class="tree-item"
+>
+  <td
+    class="tree-item-file-name cursor-default position-relative"
+  >
+    <a
+      class="tree-item-link str-truncated"
+      data-qa-selector="file_name_link"
+      href="https://test.com"
+    >
+      <file-icon-stub
+        class="mr-1 position-relative text-secondary"
+        cssclasses="position-relative file-icon"
+        filemode="120000"
+        filename="test"
+        size="16"
+      />
+      <span
+        class="position-relative"
+      >
+        test
+      </span>
+    </a>
+     
+    <!---->
+     
+    <!---->
+     
+    <!---->
+  </td>
+   
+  <td
+    class="d-none d-sm-table-cell tree-commit cursor-default"
+  >
+    <gl-skeleton-loading-stub
+      class="h-auto"
+      lines="1"
+    />
+  </td>
+   
+  <td
+    class="tree-time-ago text-right cursor-default"
+  >
+    <gl-skeleton-loading-stub
+      class="ml-auto h-auto w-50"
+      lines="1"
+    />
+  </td>
+</tr>
+`;
+
 exports[`Repository table row component renders table row 1`] = `
 <tr
   class="tree-item"
@@ -15,6 +68,7 @@ exports[`Repository table row component renders table row 1`] = `
       <file-icon-stub
         class="mr-1 position-relative text-secondary"
         cssclasses="position-relative file-icon"
+        filemode=""
         filename="test"
         size="16"
       />
@@ -67,6 +121,7 @@ exports[`Repository table row component renders table row for path with special
       <file-icon-stub
         class="mr-1 position-relative text-secondary"
         cssclasses="position-relative file-icon"
+        filemode=""
         filename="test"
         size="16"
       />
diff --git a/spec/frontend/repository/components/table/index_spec.js b/spec/frontend/repository/components/table/index_spec.js
index 9db90839b29c1c869f361de2a166983e61043c30..ed50f292b8c82f8862e72ac223595975e09424d5 100644
--- a/spec/frontend/repository/components/table/index_spec.js
+++ b/spec/frontend/repository/components/table/index_spec.js
@@ -23,6 +23,15 @@ const MOCK_BLOBS = [
     type: 'blob',
     webUrl: 'http://test.com',
   },
+  {
+    id: '125abc',
+    sha: '125abc',
+    flatPath: 'blob3',
+    name: 'blob3.md',
+    type: 'blob',
+    webUrl: 'http://test.com',
+    mode: '120000',
+  },
 ];
 
 function factory({ path, isLoading = false, entries = {} }) {
@@ -74,7 +83,9 @@ describe('Repository table component', () => {
       },
     });
 
-    expect(vm.find(TableRow).exists()).toBe(true);
-    expect(vm.findAll(TableRow).length).toBe(2);
+    const rows = vm.findAll(TableRow);
+
+    expect(rows.length).toEqual(3);
+    expect(rows.at(2).attributes().mode).toEqual('120000');
   });
 });
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 800a7e586a84050fd97ad5639b12c7fa02e3b038..767b117c798e32249e264a9db1c916ca26815fcd 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -2,6 +2,7 @@ import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import { GlBadge, GlLink, GlIcon } from '@gitlab/ui';
 import TableRow from '~/repository/components/table/row.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
+import { FILE_SYMLINK_MODE } from '~/vue_shared/constants';
 
 let vm;
 let $router;
@@ -48,6 +49,21 @@ describe('Repository table row component', () => {
     });
   });
 
+  it('renders a symlink table row', () => {
+    factory({
+      id: '1',
+      sha: '123',
+      path: 'test',
+      type: 'blob',
+      currentPath: '/',
+      mode: FILE_SYMLINK_MODE,
+    });
+
+    return vm.vm.$nextTick().then(() => {
+      expect(vm.element).toMatchSnapshot();
+    });
+  });
+
   it('renders table row for path with special character', () => {
     factory({
       id: '1',
diff --git a/spec/frontend/vue_shared/components/file_icon_spec.js b/spec/frontend/vue_shared/components/file_icon_spec.js
index 5a385eee60c454b215251e8039f54b17ccd6ea5c..adf0da21f9f0549b6804d0b146831e67029bd0b2 100644
--- a/spec/frontend/vue_shared/components/file_icon_spec.js
+++ b/spec/frontend/vue_shared/components/file_icon_spec.js
@@ -1,12 +1,14 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
+import { FILE_SYMLINK_MODE } from '~/vue_shared/constants';
 
 describe('File Icon component', () => {
   let wrapper;
-  const findIcon = () => wrapper.find('svg');
+  const findSvgIcon = () => wrapper.find('svg');
+  const findGlIcon = () => wrapper.find(GlIcon);
   const getIconName = () =>
-    findIcon()
+    findSvgIcon()
       .find('use')
       .element.getAttribute('xlink:href')
       .replace(`${gon.sprite_file_icons}#`, '');
@@ -27,7 +29,7 @@ describe('File Icon component', () => {
     });
 
     expect(wrapper.element.tagName).toEqual('SPAN');
-    expect(findIcon().exists()).toBeDefined();
+    expect(findSvgIcon().exists()).toBeDefined();
   });
 
   it.each`
@@ -46,8 +48,8 @@ describe('File Icon component', () => {
       folder: true,
     });
 
-    expect(findIcon().exists()).toBe(false);
-    expect(wrapper.find(GlIcon).classes()).toContain('folder-icon');
+    expect(findSvgIcon().exists()).toBe(false);
+    expect(findGlIcon().classes()).toContain('folder-icon');
   });
 
   it('should render a loading icon', () => {
@@ -66,8 +68,19 @@ describe('File Icon component', () => {
       cssClasses: 'extraclasses',
       size,
     });
+    const classes = findSvgIcon().classes();
 
-    expect(findIcon().classes()).toContain(`s${size}`);
-    expect(findIcon().classes()).toContain('extraclasses');
+    expect(classes).toContain(`s${size}`);
+    expect(classes).toContain('extraclasses');
+  });
+
+  it('should render a symlink icon', () => {
+    createComponent({
+      fileName: 'anything',
+      fileMode: FILE_SYMLINK_MODE,
+    });
+
+    expect(findSvgIcon().exists()).toBe(false);
+    expect(findGlIcon().attributes('name')).toBe('symlink');
   });
 });