diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx
index 1a352d8967..6ecfc2a1e9 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx
@@ -23,7 +23,7 @@ import {
   entityRouteParams,
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
-import { useRouteRef } from '@backstage/core-plugin-api';
+import { useApp, useRouteRef } from '@backstage/core-plugin-api';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { scaffolderReactTranslationRef } from '../../../translation';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
@@ -39,6 +39,9 @@ export const TemplateDetailButton = ({
   const { t } = useTranslationRef(scaffolderReactTranslationRef);
   const entityRef = stringifyEntityRef(template);
 
+  const app = useApp();
+  const TemplateIcon = app.getSystemIcon('kind:template') || DescriptionIcon;
+
   return (
     <Tooltip id={`tooltip-${entityRef}`} title={t('cardHeader.detailBtnTitle')}>
       <IconButton
@@ -52,7 +55,7 @@ export const TemplateDetailButton = ({
             to={catalogEntityRoute(entityRouteParams(template))}
             style={{ display: 'flex', alignItems: 'center' }}
           >
-            <DescriptionIcon />
+            <TemplateIcon />
           </Link>
         </Typography>
       </IconButton>
diff --git a/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.test.tsx b/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.test.tsx
index 01274cf6a6..03175786b1 100644
--- a/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.test.tsx
+++ b/plugins/scaffolder/src/alpha/components/TemplateListPage/TemplateListPage.test.tsx
@@ -17,6 +17,7 @@
 import { DefaultStarredEntitiesApi } from '@backstage/plugin-catalog';
 import {
   catalogApiRef,
+  entityRouteRef,
   starredEntitiesApiRef,
 } from '@backstage/plugin-catalog-react';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
@@ -30,6 +31,13 @@ import React from 'react';
 import { rootRouteRef } from '../../../routes';
 import { TemplateListPage } from './TemplateListPage';
 
+const mountedRoutes = {
+  mountedRoutes: {
+    '/': rootRouteRef,
+    '/catalog/:namespace/:kind/:name': entityRouteRef,
+  },
+};
+
 describe('TemplateListPage', () => {
   const mockCatalogApi = catalogApiMock({
     entities: [
@@ -60,7 +68,7 @@ describe('TemplateListPage', () => {
       >
         <TemplateListPage />
       </TestApiProvider>,
-      { mountedRoutes: { '/': rootRouteRef } },
+      mountedRoutes,
     );
 
     expect(getByPlaceholderText('Search')).toBeInTheDocument();
@@ -82,7 +90,7 @@ describe('TemplateListPage', () => {
       >
         <TemplateListPage />
       </TestApiProvider>,
-      { mountedRoutes: { '/': rootRouteRef } },
+      mountedRoutes,
     );
 
     expect(getByRole('menuitem', { name: /All/ })).toBeInTheDocument();
@@ -105,7 +113,7 @@ describe('TemplateListPage', () => {
       >
         <TemplateListPage />
       </TestApiProvider>,
-      { mountedRoutes: { '/': rootRouteRef } },
+      mountedRoutes,
     );
 
     expect(getByText('Categories')).toBeInTheDocument();
@@ -127,7 +135,7 @@ describe('TemplateListPage', () => {
       >
         <TemplateListPage />
       </TestApiProvider>,
-      { mountedRoutes: { '/': rootRouteRef } },
+      mountedRoutes,
     );
 
     expect(getByText('Owner')).toBeInTheDocument();
@@ -150,6 +158,7 @@ describe('TemplateListPage', () => {
       >
         <TemplateListPage />
       </TestApiProvider>,
+      mountedRoutes,
     );
 
     expect(getByText('Tags')).toBeInTheDocument();
@@ -172,7 +181,7 @@ describe('TemplateListPage', () => {
         >
           <TemplateListPage />
         </TestApiProvider>,
-        { mountedRoutes: { '/': rootRouteRef } },
+        mountedRoutes,
       );
       expect(queryByTestId('menu-button')).toBeInTheDocument();
     });
@@ -199,7 +208,7 @@ describe('TemplateListPage', () => {
             }}
           />
         </TestApiProvider>,
-        { mountedRoutes: { '/': rootRouteRef } },
+        mountedRoutes,
       );
       expect(queryByTestId('menu-button')).not.toBeInTheDocument();
     });