diff --git a/app/assets/javascripts/work_items/components/work_item_ancestors/disclosure_hierarchy_item.vue b/app/assets/javascripts/work_items/components/work_item_ancestors/disclosure_hierarchy_item.vue
index bf18d2d1a62f29e49f1fe806b8418b61d5b01869..5ba19fb9a82aaa30bae9f85cb85b6cee7ffbde55 100644
--- a/app/assets/javascripts/work_items/components/work_item_ancestors/disclosure_hierarchy_item.vue
+++ b/app/assets/javascripts/work_items/components/work_item_ancestors/disclosure_hierarchy_item.vue
@@ -2,6 +2,7 @@
 <script>
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { GlIcon, GlLink } from '@gitlab/ui';
+import { ISSUABLE_EPIC } from '../../constants';
 
 export default {
   components: {
@@ -31,6 +32,7 @@ export default {
   },
   methods: {
     shouldDisplayIcon(icon) {
+      if (icon === ISSUABLE_EPIC) return true;
       return icon && iconSpriteInfo.icons.includes(icon);
     },
   },
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 23d7e259c8b77b3cc2dbaedd02d687e06576881f..c93d589d339df96dd927059cda2209423f333a4d 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -327,3 +327,5 @@ export const SUPPORTED_PARENT_TYPE_MAP = {
 export const LINKED_ITEMS_ANCHOR = 'linkeditems';
 export const CHILD_ITEMS_ANCHOR = 'childitems';
 export const TASKS_ANCHOR = 'tasks';
+
+export const ISSUABLE_EPIC = 'issue-type-epic';
diff --git a/app/assets/javascripts/work_items/utils.js b/app/assets/javascripts/work_items/utils.js
index 026efa5bdca78e20b1af391047d8fa193fff2bc1..534ac1ccdf24c11580bfe9f12e240b9df6f59f55 100644
--- a/app/assets/javascripts/work_items/utils.js
+++ b/app/assets/javascripts/work_items/utils.js
@@ -7,6 +7,9 @@ import {
   WIDGET_TYPE_NOTES,
   WIDGET_TYPE_START_AND_DUE_DATE,
   WIDGET_TYPE_WEIGHT,
+  ISSUABLE_EPIC,
+  WORK_ITEMS_TYPE_MAP,
+  WORK_ITEM_TYPE_ENUM_EPIC,
 } from './constants';
 
 export const isAssigneesWidget = (widget) => widget.type === WIDGET_TYPE_ASSIGNEES;
@@ -32,10 +35,15 @@ export const findHierarchyWidgetChildren = (workItem) =>
 export const findHierarchyWidgetAncestors = (workItem) =>
   findHierarchyWidgets(workItem?.widgets)?.ancestors?.nodes || [];
 
+export const getWorkItemIcon = (icon) => {
+  if (icon === ISSUABLE_EPIC) return WORK_ITEMS_TYPE_MAP[WORK_ITEM_TYPE_ENUM_EPIC].icon;
+  return icon;
+};
+
 export const formatAncestors = (workItem) =>
   findHierarchyWidgetAncestors(workItem).map((ancestor) => ({
     ...ancestor,
-    icon: ancestor.workItemType?.iconName,
+    icon: getWorkItemIcon(ancestor.workItemType?.iconName),
     href: ancestor.webUrl,
   }));
 
diff --git a/spec/frontend/work_items/components/work_item_ancestors/mock_data.js b/spec/frontend/work_items/components/work_item_ancestors/mock_data.js
index 8e7f99658dea43c7b82b7a2a9134e30e923f453a..484fff81c28510d67b8bfc9e07fa06e2c0e8fa60 100644
--- a/spec/frontend/work_items/components/work_item_ancestors/mock_data.js
+++ b/spec/frontend/work_items/components/work_item_ancestors/mock_data.js
@@ -156,8 +156,8 @@ export const workItemThreeAncestorsQueryResponse = {
                 webUrl: '/gitlab-org/gitlab-test/-/work_items/6',
                 workItemType: {
                   id: 'gid://gitlab/WorkItems::Type/2',
-                  name: 'Issue',
-                  iconName: 'issue-type-issue',
+                  name: 'Epic',
+                  iconName: 'issue-type-epic',
                 },
               },
             ],
diff --git a/spec/frontend/work_items/components/work_item_ancestors/work_item_ancestors_spec.js b/spec/frontend/work_items/components/work_item_ancestors/work_item_ancestors_spec.js
index a9f66b20f06b2ee669b0350acc0ccf87e4590dda..40b202445430741ba6c3164120f66707dcc8107f 100644
--- a/spec/frontend/work_items/components/work_item_ancestors/work_item_ancestors_spec.js
+++ b/spec/frontend/work_items/components/work_item_ancestors/work_item_ancestors_spec.js
@@ -101,6 +101,9 @@ describe('WorkItemAncestors', () => {
 
     it('activates ellipsis option for DisclosureHierarchy component', () => {
       expect(findDisclosureHierarchy().props('withEllipsis')).toBe(true);
+      expect(findDisclosureHierarchy().props('items')).toEqual(
+        expect.objectContaining(formatAncestors(workItemThreeAncestorsQueryResponse.data.workItem)),
+      );
     });
   });
 
diff --git a/spec/frontend/work_items/utils_spec.js b/spec/frontend/work_items/utils_spec.js
index 41545ac830814d06c0efc3de445898b97234bb51..c3d6d55da802c52873b252aa1a757732c8b28524 100644
--- a/spec/frontend/work_items/utils_spec.js
+++ b/spec/frontend/work_items/utils_spec.js
@@ -1,4 +1,9 @@
-import { autocompleteDataSources, markdownPreviewPath, isReference } from '~/work_items/utils';
+import {
+  autocompleteDataSources,
+  markdownPreviewPath,
+  isReference,
+  getWorkItemIcon,
+} from '~/work_items/utils';
 
 describe('autocompleteDataSources', () => {
   beforeEach(() => {
@@ -40,6 +45,12 @@ describe('markdownPreviewPath', () => {
   });
 });
 
+describe('getWorkItemIcon', () => {
+  it.each(['epic', 'issue-type-epic'])('returns epic icon in case of %s', (icon) => {
+    expect(getWorkItemIcon(icon)).toBe('epic');
+  });
+});
+
 describe('isReference', () => {
   it.each`
     referenceId                                | result