SONAR-21656 Replace old icons with MIUI icons

97 files changed, 364 insertions, 2248 deletions

diff --git a/server/sonar-web/design-system/src/components/icons/CollapseIcon.tsx b/server/sonar-web/design-system/src/components/icons/CollapseIcon.tsx
new file mode 100644
index 00000000000..27e37e1a5d5
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/CollapseIcon.tsx
@@ -0,0 +1,36 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers/theme';
+import { CustomIcon, IconProps } from './Icon';
+
+export function CollapseIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
+  const theme = useTheme();
+  return (
+    <CustomIcon {...iconProps}>
+      <path
+        clipRule="evenodd"
+        d="M2.82364 9h4.146a.25.25 0 0 1 .25.25v4.146a.2499.2499 0 0 1-.04199.1391.2503.2503 0 0 1-.11227.0923.24953.24953 0 0 1-.14463.0142.24976.24976 0 0 1-.12811-.0686l-1.543-1.543-2.98844 2.9884a.75009.75009 0 0 1-.52453.2012.75044.75044 0 0 1-.5171-.2196.75.75 0 0 1-.01837-1.0416L4.18964 10.97l-1.543-1.543a.24997.24997 0 0 1-.05439-.27273A.24995.24995 0 0 1 2.82364 9ZM13.396 7.24258H9.24996a.25.25 0 0 1-.25-.25v-4.146a.25.25 0 0 1 .427-.177l1.54304 1.543 3.0112-3.01129a.74997.74997 0 0 1 1.0416.01838.75042.75042 0 0 1 .2196.5171.75005.75005 0 0 1-.2012.52452L12.03 5.27258l1.543 1.543a.2505.2505 0 0 1 .0686.12811.25036.25036 0 0 1-.0142.14463.2503.2503 0 0 1-.0923.11227.2499.2499 0 0 1-.1391.04199Z"
+        fill={themeColor(fill)({ theme })}
+        fillRule="evenodd"
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/design-system/src/components/icons/ExpandIcon.tsx b/server/sonar-web/design-system/src/components/icons/ExpandIcon.tsx
new file mode 100644
index 00000000000..84cff94c5e3
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/ExpandIcon.tsx
@@ -0,0 +1,36 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers/theme';
+import { CustomIcon, IconProps } from './Icon';
+
+export function ExpandIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
+  const theme = useTheme();
+  return (
+    <CustomIcon {...iconProps}>
+      <path
+        clipRule="evenodd"
+        d="M10.604 1h4.146a.24994.24994 0 0 1 .25.25v4.146a.24966.24966 0 0 1-.042.13913.24968.24968 0 0 1-.1122.09226.25028.25028 0 0 1-.1447.01423.25034.25034 0 0 1-.1281-.06862L13.03 4.03l-2.9884 2.98838a.75002.75002 0 0 1-1.06001-1.06L11.97 2.97l-1.543-1.543a.25047.25047 0 0 1-.0686-.1281.25035.25035 0 0 1 .0142-.14463.25027.25027 0 0 1 .0923-.11228A.25.25 0 0 1 10.604 1ZM5.39608 14.9813h-4.146a.2499.2499 0 0 1-.17677-.0732.25007.25007 0 0 1-.07323-.1768v-4.146a.25001.25001 0 0 1 .04199-.1391.25037.25037 0 0 1 .11228-.0923.24953.24953 0 0 1 .14463-.0142.24973.24973 0 0 1 .1281.0686l1.543 1.543L5.98132 8.94a.75.75 0 0 1 1.06 1.06l-3.01124 3.0113 1.543 1.543a.24987.24987 0 0 1 .06862.1281.24996.24996 0 0 1-.10649.2569.24964.24964 0 0 1-.13913.042Z"
+        fill={themeColor(fill)({ theme })}
+        fillRule="evenodd"
+      />
+    </CustomIcon>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/icons/MeasuresIcon.tsx b/server/sonar-web/design-system/src/components/icons/MinimizeIcon.tsx
index 8803ae0febc..636c759485c 100644
--- a/server/sonar-web/src/main/js/components/icons/MeasuresIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/MinimizeIcon.tsx
@@ -17,13 +17,15 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
+import { useTheme } from '@emotion/react';
+import { themeColor } from '../../helpers/theme';
+import { CustomIcon, IconProps } from './Icon';
 
-export default function MeasuresIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
+export function MinimizeIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
+  const theme = useTheme();
   return (
-    <Icon {...iconProps} style={{ fillRule: 'nonzero' }}>
-      <path d="M3.33 6.13h2v6.54h-2zm3.74-2.8h1.86v9.34H7.07zm3.73 5.34h1.87v4H10.8z" fill={fill} />
-    </Icon>
+    <CustomIcon {...iconProps}>
+      <rect fill={themeColor(fill)({ theme })} height="2" rx="1" width="12" x="2" y="11" />
+    </CustomIcon>
   );
 }
diff --git a/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx b/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx
index fd3e9fee74b..34c09a7906e 100644
--- a/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/QualifierIcon.tsx
@@ -29,7 +29,7 @@ interface Props extends IconProps {
   qualifier: string | null | undefined;
 }
 
-export function QualifierIcon({ qualifier, fill, ...iconProps }: Props) {
+export function QualifierIcon({ qualifier, fill, ...iconProps }: Readonly<Props>) {
   const theme = useTheme();
 
   if (!qualifier) {
@@ -49,7 +49,7 @@ export function QualifierIcon({ qualifier, fill, ...iconProps }: Props) {
   return icon ?? null;
 }
 
-function PortfolioIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
+function PortfolioIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
   const theme = useTheme();
 
   return (
@@ -62,7 +62,7 @@ function PortfolioIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   );
 }
 
-function ApplicationIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
+function ApplicationIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
   const theme = useTheme();
 
   return (
@@ -75,7 +75,7 @@ function ApplicationIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   );
 }
 
-function SubPortfolioIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
+function SubPortfolioIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
   const theme = useTheme();
 
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/index.ts b/server/sonar-web/design-system/src/components/icons/index.ts
index 1a5e151422a..fec55fb5a09 100644
--- a/server/sonar-web/design-system/src/components/icons/index.ts
+++ b/server/sonar-web/design-system/src/components/icons/index.ts
@@ -27,11 +27,13 @@ export { ChevronRightIcon } from './ChevronRightIcon';
 export { ClockIcon } from './ClockIcon';
 export { CloseIcon } from './CloseIcon';
 export { CodeSmellIcon } from './CodeSmellIcon';
+export { CollapseIcon } from './CollapseIcon';
 export { CommentIcon } from './CommentIcon';
 export { CopyIcon } from './CopyIcon';
 export { DirectoryIcon } from './DirectoryIcon';
 export { DraggableIcon } from './DraggableIcon';
 export { ExecutionFlowIcon } from './ExecutionFlowIcon';
+export { ExpandIcon } from './ExpandIcon';
 export { FileIcon } from './FileIcon';
 export { FilterIcon } from './FilterIcon';
 export { FlagErrorIcon } from './FlagErrorIcon';
@@ -51,6 +53,7 @@ export { MainBranchIcon } from './MainBranchIcon';
 export { MenuHelpIcon } from './MenuHelpIcon';
 export { MenuIcon } from './MenuIcon';
 export { MenuSearchIcon } from './MenuSearchIcon';
+export { MinimizeIcon } from './MinimizeIcon';
 export { NoDataIcon } from './NoDataIcon';
 export { OpenCloseIndicator } from './OpenCloseIndicator';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index fb5d41f4766..f5f33fcac32 100644
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -661,6 +661,12 @@ export const lightTheme = {
     promotionNotification: COLORS.blueGrey[35],
     promotionNotificationBackground: COLORS.blueGrey[700],
     promotionNotificationSeparator: COLORS.blueGrey[500],
+
+    // Workspace
+    workSpaceViewerBackground: COLORS.blueGrey[25],
+    workSpaceViewerShadow: COLORS.blueGrey[700],
+    workSpaceNavItem: COLORS.white,
+    workSpaceNavItemBackground: COLORS.blueGrey[500],
   },
 
   // contrast colors to be used for text when using a color background with the same name
diff --git a/server/sonar-web/eslint-local-rules/use-componentqualifier-enum.js b/server/sonar-web/eslint-local-rules/use-componentqualifier-enum.js
index 88a10cb3c53..3ccabbf5897 100644
--- a/server/sonar-web/eslint-local-rules/use-componentqualifier-enum.js
+++ b/server/sonar-web/eslint-local-rules/use-componentqualifier-enum.js
@@ -18,7 +18,4 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 const { useEnum } = require('./lib/use-enum');
-module.exports = useEnum(
-  ['APP', 'DIR', 'DEV', 'FIL', 'VW', 'TRK', 'SVW', 'UTS'],
-  'ComponentQualifier'
-);
+module.exports = useEnum(['APP', 'DIR', 'FIL', 'VW', 'TRK', 'SVW', 'UTS'], 'ComponentQualifier');
diff --git a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx
index 6d9b3b4b86f..55de63a2874 100644
--- a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx
+++ b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearchResult.tsx
@@ -18,9 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import classNames from 'classnames';
-import { ClockIcon, ItemLink, TextBold, TextMuted } from 'design-system';
+import { ClockIcon, ItemLink, StarFillIcon, TextBold, TextMuted } from 'design-system';
 import * as React from 'react';
-import FavoriteIcon from '../../../components/icons/FavoriteIcon';
 import { translate } from '../../../helpers/l10n';
 import { getComponentOverviewUrl } from '../../../helpers/urls';
 import { ComponentResult } from './utils';
@@ -56,7 +55,7 @@ export default class GlobalSearchResult extends React.PureComponent<Props> {
         <div className="sw-flex sw-justify-between sw-items-center sw-w-full">
           <TextBold match={component.match} name={component.name} />
           <div className="sw-ml-2">
-            {component.isFavorite && <FavoriteIcon favorite size={16} />}
+            {component.isFavorite && <StarFillIcon />}
             {!component.isFavorite && component.isRecentlyBrowsed && (
               <ClockIcon aria-label={translate('recently_browsed')} />
             )}
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLike.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLike.tsx
index 6805c31b2fc..61b7ef285a1 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLike.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLike.tsx
@@ -19,7 +19,7 @@
  */
 import { ChevronDownIcon, TextMuted } from 'design-system';
 import * as React from 'react';
-import BranchLikeIcon from '../../../../../components/icons/BranchLikeIcon';
+import BranchLikeIcon from '../../../../../components/icon-mappers/BranchLikeIcon';
 import { getBranchLikeDisplayName } from '../../../../../helpers/branch-like';
 import { BranchLike, BranchStatusData } from '../../../../../types/branch-like';
 import QualityGateStatus from './QualityGateStatus';
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/MenuItem.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/MenuItem.tsx
index 39034306b96..3263a64929b 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/MenuItem.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/MenuItem.tsx
@@ -20,7 +20,7 @@
 import classNames from 'classnames';
 import { Badge, ItemButton, TextBold, TextMuted } from 'design-system';
 import * as React from 'react';
-import BranchLikeIcon from '../../../../../components/icons/BranchLikeIcon';
+import BranchLikeIcon from '../../../../../components/icon-mappers/BranchLikeIcon';
 import { getBranchLikeDisplayName, isMainBranch } from '../../../../../helpers/branch-like';
 import { translate } from '../../../../../helpers/l10n';
 import { BranchLike } from '../../../../../types/branch-like';
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormFieldsCCT.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormFieldsCCT.tsx
index b5b8743cad2..70362092ddd 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormFieldsCCT.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormFieldsCCT.tsx
@@ -28,7 +28,7 @@ import {
 } from 'design-system';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import SoftwareImpactSeverityIcon from '../../../components/icons/SoftwareImpactSeverityIcon';
+import SoftwareImpactSeverityIcon from '../../../components/icon-mappers/SoftwareImpactSeverityIcon';
 import {
   CLEAN_CODE_ATTRIBUTES_BY_CATEGORY,
   CLEAN_CODE_CATEGORIES,
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx
index 39caf9fa265..da7cd21b1c1 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx
@@ -20,7 +20,7 @@
 import { HelperHintIcon } from 'design-system';
 import * as React from 'react';
 import DocumentationTooltip from '../../../components/common/DocumentationTooltip';
-import SoftwareImpactSeverityIcon from '../../../components/icons/SoftwareImpactSeverityIcon';
+import SoftwareImpactSeverityIcon from '../../../components/icon-mappers/SoftwareImpactSeverityIcon';
 import { IMPACT_SEVERITIES } from '../../../helpers/constants';
 import { translate } from '../../../helpers/l10n';
 import Facet, { BasicProps } from './Facet';
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/SeveritySelect.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/SeveritySelect.tsx
index fa015724dfa..5b39ade4564 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/SeveritySelect.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/SeveritySelect.tsx
@@ -34,7 +34,7 @@ export interface SeveritySelectProps {
 function Option(props: Readonly<OptionProps<LabelValueSelectOption<IssueSeverity>, false>>) {
   return (
     <components.Option {...props}>
-      <SeverityHelper className="display-flex-center" severity={props.data.value} />
+      <SeverityHelper className="sw-flex sw-items-center" severity={props.data.value} />
     </components.Option>
   );
 }
@@ -44,7 +44,7 @@ function SingleValue(
 ) {
   return (
     <components.SingleValue {...props}>
-      <SeverityHelper className="display-flex-center" severity={props.data.value} />
+      <SeverityHelper className="sw-flex sw-items-center" severity={props.data.value} />
     </components.SingleValue>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/TypeFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/TypeFacet.tsx
index fadac0aea79..c92a3c11697 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/TypeFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/TypeFacet.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import IssueTypeIcon from '../../../components/icons/IssueTypeIcon';
+import IssueTypeIcon from '../../../components/icon-mappers/IssueTypeIcon';
 import { RULE_TYPES } from '../../../helpers/constants';
 import { translate } from '../../../helpers/l10n';
 import Facet, { BasicProps } from './Facet';
@@ -26,7 +26,7 @@ import Facet, { BasicProps } from './Facet';
 export default class TypeFacet extends React.PureComponent<BasicProps> {
   renderName = (type: string) => (
     <>
-      <IssueTypeIcon className="little-spacer-right" query={type} />
+      <IssueTypeIcon className="sw-mr-1" type={type} />
       {translate('issue.type', type)}
     </>
   );
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx
index 5ee99e70149..ca5ddc08eba 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx
@@ -20,7 +20,7 @@
 import { HelperHintIcon } from 'design-system';
 import * as React from 'react';
 import DocumentationTooltip from '../../../components/common/DocumentationTooltip';
-import SoftwareImpactSeverityIcon from '../../../components/icons/SoftwareImpactSeverityIcon';
+import SoftwareImpactSeverityIcon from '../../../components/icon-mappers/SoftwareImpactSeverityIcon';
 import { IMPACT_SEVERITIES } from '../../../helpers/constants';
 import { translate } from '../../../helpers/l10n';
 import { SoftwareImpactSeverity } from '../../../types/clean-code-taxonomy';
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx
index dda75f63084..a3dd605d790 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx
@@ -20,7 +20,7 @@
 import { LinkBox, TextMuted } from 'design-system';
 import * as React from 'react';
 import { Path } from 'react-router-dom';
-import IssueTypeIcon from '../../../components/icons/IssueTypeIcon';
+import IssueTypeIcon from '../../../components/icon-mappers/IssueTypeIcon';
 import MeasureIndicator from '../../../components/measure/MeasureIndicator';
 import {
   DEFAULT_ISSUES_QUERY,
@@ -169,7 +169,7 @@ export default class QualityGateCondition extends React.PureComponent<Props> {
         />
         <div className="sw-flex sw-flex-col sw-text-sm">
           <div className="sw-flex sw-items-center">
-            <IssueTypeIcon className="sw-mr-2" query={metric.key} />
+            <IssueTypeIcon className="sw-mr-2" type={metric.key} />
             <span className="sw-body-sm-highlight sw-text-ellipsis sw-max-w-abs-300">
               {this.getPrimaryText()}
             </span>
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx
index dbcf3ecb876..359543f422c 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx
@@ -21,7 +21,7 @@ import { Card, DiscreetLink } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
-import SonarLintIcon from '../../../components/icons/SonarLintIcon';
+import { SonarLintLogo } from '../../../components/logos/SonarLintLogo';
 import { translate } from '../../../helpers/l10n';
 import { MetricKey } from '../../../types/metrics';
 import { QualityGateStatusCondition } from '../../../types/quality-gates';
@@ -73,7 +73,7 @@ export function SonarLintPromotion({ currentUser, qgConditions }: SonarLintPromo
                 SonarLint
               </DiscreetLink>
               <span className="sw-align-middle">
-                <SonarLintIcon size={16} />
+                <SonarLintLogo size={16} />
               </span>
             </>
           ),
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeRow.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeRow.tsx
index 583032968eb..a4c5369ae30 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchLikeRow.tsx
@@ -28,7 +28,7 @@ import {
 } from 'design-system';
 import * as React from 'react';
 import QualityGateStatus from '../../../app/components/nav/component/branch-like/QualityGateStatus';
-import BranchLikeIcon from '../../../components/icons/BranchLikeIcon';
+import BranchLikeIcon from '../../../components/icon-mappers/BranchLikeIcon';
 import DateFromNow from '../../../components/intl/DateFromNow';
 import {
   getBranchLikeDisplayName,
diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchListRow.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchListRow.tsx
index 30546ed08e3..8d0b663ed8b 100644
--- a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchListRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchListRow.tsx
@@ -30,7 +30,7 @@ import {
 } from 'design-system';
 import * as React from 'react';
 import Tooltip from '../../../components/controls/Tooltip';
-import BranchLikeIcon from '../../../components/icons/BranchLikeIcon';
+import BranchLikeIcon from '../../../components/icon-mappers/BranchLikeIcon';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { isNewCodeDefinitionCompliant } from '../../../helpers/new-code-definition';
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSimpleList.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSimpleList.tsx
index cb53d46f521..6772aa542e6 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSimpleList.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSimpleList.tsx
@@ -19,12 +19,12 @@
  */
 import { withTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Badge, SubnavigationAccordion, themeColor } from 'design-system';
+import { Badge, QualifierIcon, SubnavigationAccordion, themeColor } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import ListFooter from '../../../components/controls/ListFooter';
 import Tooltip from '../../../components/controls/Tooltip';
-import QualifierIcon from '../../../components/icons/QualifierIcon';
+
 import { translate } from '../../../helpers/l10n';
 import { fileFromPath } from '../../../helpers/path';
 import { ComponentQualifier } from '../../../types/component';
@@ -91,10 +91,7 @@ export default function HotspotSimpleList(props: HotspotSimpleListProps) {
                 {filterByFile ? (
                   <Tooltip overlay={filterByFile}>
                     <span>
-                      <QualifierIcon
-                        className="little-spacer-right"
-                        qualifier={ComponentQualifier.File}
-                      />
+                      <QualifierIcon className="sw-mr-1" qualifier={ComponentQualifier.File} />
                       {fileFromPath(filterByFile)}
                     </span>
                   </Tooltip>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetHeader.tsx
index 8a724c25ef3..11e179a5dda 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetHeader.tsx
@@ -19,10 +19,11 @@
  */
 import { withTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ClipboardIconButton, HoverLink, Note, themeBorder, themeColor } from 'design-system';
+import { ClipboardIconButton, Note, QualifierIcon, themeBorder, themeColor } from 'design-system';
 import React from 'react';
 import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
-import QualifierIcon from '../../../components/icons/QualifierIcon';
+
+import { LinkHighlight, LinkStandalone } from '@sonarsource/echoes-react';
 import { translate } from '../../../helpers/l10n';
 import { collapsedDirFromPath, fileFromPath } from '../../../helpers/path';
 import { getBranchLikeUrl } from '../../../helpers/urls';
@@ -57,10 +58,13 @@ function HotspotSnippetHeader(props: HotspotSnippetHeaderProps) {
       <Note className="sw-flex sw-flex-1 sw-flex-wrap sw-gap-2 sw-items-center sw-my-1/2">
         {displayProjectName && (
           <span>
-            <HoverLink to={getBranchLikeUrl(project.key, branchLike)}>
-              <QualifierIcon qualifier={qualifier} className="sw-mr-2" />
+            <LinkStandalone
+              highlight={LinkHighlight.CurrentColor}
+              iconLeft={<QualifierIcon qualifier={qualifier} className="sw-mr-2" />}
+              to={getBranchLikeUrl(project.key, branchLike)}
+            >
               {project.name}
-            </HoverLink>
+            </LinkStandalone>
           </span>
         )}
 
diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/AuthenticationFormField.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/AuthenticationFormField.tsx
index 44c23adcbb7..17b4380adb5 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/authentication/AuthenticationFormField.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/AuthenticationFormField.tsx
@@ -18,12 +18,18 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { FormField, Highlight, InputField, Note, RequiredIcon } from 'design-system';
+import {
+  FlagErrorIcon,
+  FormField,
+  Highlight,
+  InputField,
+  Note,
+  RequiredIcon,
+  TextError,
+} from 'design-system';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import ValidationInput, {
-  ValidationInputErrorPlacement,
-} from '../../../../components/controls/ValidationInput';
+import { isDefined } from '../../../../helpers/types';
 import { DefinitionV2, ExtendedSettingDefinition, SettingType } from '../../../../types/settings';
 import { getPropertyDescription, getPropertyName, isSecuredDefinition } from '../../utils';
 import AuthenticationMultiValueField from './AuthenticationMultiValuesField';
@@ -101,22 +107,29 @@ export default function AuthenticationFormField(props: Readonly<Props>) {
       {!isSecuredDefinition(definition) &&
         definition.type === undefined &&
         !definition.multiValues && (
-          <ValidationInput
-            error={error}
-            errorPlacement={ValidationInputErrorPlacement.Bottom}
-            isValid={false}
-            isInvalid={Boolean(error)}
-          >
+          <>
             <InputField
               size="full"
               id={definition.key}
+              isInvalid={isDefined(error) && error !== ''}
               maxLength={4000}
               name={definition.key}
               onChange={(e) => props.onFieldChange(definition.key, e.currentTarget.value)}
               type="text"
               value={String(settingValue ?? '')}
             />
-          </ValidationInput>
+            {isDefined(error) && error !== '' && (
+              <TextError
+                className="sw-mt-2"
+                text={
+                  <>
+                    <FlagErrorIcon className="sw-mr-1" />
+                    {error}
+                  </>
+                }
+              />
+            )}
+          </>
         )}
     </FormField>
   );
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx
index 719a08495fc..1d4a0e36426 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx
@@ -17,14 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { FlagMessage, InputField, Note, SubHeading, Switch } from 'design-system';
+import { FlagMessage, InputField, Note, RequiredIcon, SubHeading, Switch } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import withAvailableFeatures, {
   WithAvailableFeaturesProps,
 } from '../../../../app/components/available-features/withAvailableFeatures';
 import DocumentationLink from '../../../../components/common/DocumentationLink';
-import MandatoryFieldMarker from '../../../../components/ui/MandatoryFieldMarker';
 import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import { translate } from '../../../../helpers/l10n';
 import { convertGithubApiUrlToLink, stripTrailingSlash } from '../../../../helpers/urls';
@@ -96,7 +95,7 @@ function renderLabel(props: LabelProps) {
   return (
     <label htmlFor={id}>
       {translate('settings.pr_decoration.binding.form', id)}
-      {!optional && <MandatoryFieldMarker />}
+      {!optional && <RequiredIcon />}
     </label>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx
index 3cbee5c857d..47e215da6fd 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx
@@ -24,6 +24,7 @@ import {
   FlagMessage,
   Link,
   Note,
+  RequiredIcon,
   Spinner,
   SubHeading,
   SubTitle,
@@ -31,7 +32,6 @@ import {
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import AlmSettingsInstanceSelector from '../../../../components/devops-platform/AlmSettingsInstanceSelector';
-import MandatoryFieldMarker from '../../../../components/ui/MandatoryFieldMarker';
 import MandatoryFieldsExplanation from '../../../../components/ui/MandatoryFieldsExplanation';
 import { translate } from '../../../../helpers/l10n';
 import { getGlobalSettingsUrl } from '../../../../helpers/urls';
@@ -130,7 +130,7 @@ export default function PRDecorationBindingRenderer(props: PRDecorationBindingRe
             <SubHeading>
               <label htmlFor="name">
                 {translate('settings.pr_decoration.binding.form.name')}
-                <MandatoryFieldMarker className="sw-mr-2" />
+                <RequiredIcon className="sw-mr-2" />
               </label>
             </SubHeading>
             <div className="markdown">
diff --git a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx b/server/sonar-web/src/main/js/components/activity-graph/ChartLegend.tsx
index f6e7ef1a39c..b07e5c0d84d 100644
--- a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/ChartLegend.tsx
@@ -27,7 +27,7 @@ interface Props {
   index: number;
 }
 
-export function ChartLegendIcon({ index, className }: Props) {
+export function ChartLegend({ index, className }: Readonly<Props>) {
   const theme = useTheme() as Theme;
 
   return (
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
index d8f4361c4f5..58767ea47ed 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
@@ -29,8 +29,8 @@ import {
   themeColor,
 } from 'design-system';
 import * as React from 'react';
-import { ChartLegendIcon } from '../../components/icons/ChartLegendIcon';
 import { translateWithParameters } from '../../helpers/l10n';
+import { ChartLegend } from './ChartLegend';
 
 interface Props {
   className?: string;
@@ -61,7 +61,7 @@ export function GraphsLegendItem({
       {showWarning ? (
         <FlagWarningIcon className="sw-mr-2" />
       ) : (
-        <ChartLegendIcon className="sw-mr-2" index={index} />
+        <ChartLegend className="sw-mr-2" index={index} />
       )}
       <span className="sw-body-sm" style={{ color: themeColor('graphCursorLineColor')({ theme }) }}>
         {name}
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContent.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContent.tsx
index 6ed3cb4c8c1..8617d043ed5 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContent.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContent.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { ChartLegendIcon } from '../../components/icons/ChartLegendIcon';
+import { ChartLegend } from './ChartLegend';
 
 interface Props {
   name: string;
@@ -31,7 +31,7 @@ export default function GraphsTooltipsContent({ name, index, translatedName, val
   return (
     <tr className="sw-h-8" key={name}>
       <td className="thin">
-        <ChartLegendIcon className="spacer-right" index={index} />
+        <ChartLegend className="sw-mr-2" index={index} />
       </td>
       <td className="sw-font-bold sw-text-right sw-pr-2 thin">{value}</td>
       <td>{translatedName}</td>
diff --git a/server/sonar-web/src/main/js/components/common/Link.tsx b/server/sonar-web/src/main/js/components/common/Link.tsx
index 56f6dbade96..b6685c4447d 100644
--- a/server/sonar-web/src/main/js/components/common/Link.tsx
+++ b/server/sonar-web/src/main/js/components/common/Link.tsx
@@ -18,11 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as Echoes from '@sonarsource/echoes-react';
+import { OpenNewTabIcon } from 'design-system';
 import * as React from 'react';
 import { Link as ReactRouterDomLink, LinkProps as ReactRouterDomLinkProps } from 'react-router-dom';
 import { isWebUri } from 'valid-url';
 import { translate } from '../../helpers/l10n';
-import DetachIcon from '../icons/DetachIcon';
 
 type OriginalLinkProps = ReactRouterDomLinkProps & React.RefAttributes<HTMLAnchorElement>;
 
@@ -41,8 +41,6 @@ export interface LinkProps extends OriginalLinkProps {
   size?: number;
 }
 
-const DEFAULT_ICON_SIZE = 14;
-
 function Link({ children, size, ...props }: LinkProps, ref: React.ForwardedRef<HTMLAnchorElement>) {
   if (typeof props.to === 'string' && isWebUri(props.to)) {
     // The new React Router DOM's <Link> component no longer supports external links.
@@ -56,11 +54,7 @@ function Link({ children, size, ...props }: LinkProps, ref: React.ForwardedRef<H
         {...anchorProps}
       >
         {anchorProps.target === '_blank' && (
-          <DetachIcon
-            label={translate('opens_in_new_window')}
-            size={size || DEFAULT_ICON_SIZE}
-            className="little-spacer-right"
-          />
+          <OpenNewTabIcon aria-label={translate('opens_in_new_window')} className="sw-mr-1" />
         )}
         {children}
       </a>
diff --git a/server/sonar-web/src/main/js/components/common/MetaLink.tsx b/server/sonar-web/src/main/js/components/common/MetaLink.tsx
index 86ecb5ce07c..752d47a2a8e 100644
--- a/server/sonar-web/src/main/js/components/common/MetaLink.tsx
+++ b/server/sonar-web/src/main/js/components/common/MetaLink.tsx
@@ -17,21 +17,19 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import styled from '@emotion/styled';
-import { CloseIcon, InputField, InteractiveIcon, Link } from 'design-system';
+import { LinkStandalone } from '@sonarsource/echoes-react';
+import { CloseIcon, InputField, InteractiveIcon } from 'design-system';
 import React, { useState } from 'react';
 import isValidUri from '../../app/utils/isValidUri';
 import { translate } from '../../helpers/l10n';
 import { getLinkName } from '../../helpers/projectLinks';
 import { ProjectLink } from '../../types/types';
-import ProjectLinkIcon from '../icons/ProjectLinkIcon';
 
 interface Props {
-  iconOnly?: boolean;
   link: ProjectLink;
 }
 
-export default function MetaLink({ iconOnly, link }: Readonly<Props>) {
+export default function MetaLink({ link }: Readonly<Props>) {
   const [expanded, setExpanded] = useState(false);
 
   const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
@@ -51,14 +49,14 @@ export default function MetaLink({ iconOnly, link }: Readonly<Props>) {
   const isValid = isValidUri(link.url);
   return (
     <li>
-      <StyledLink
-        to={link.url}
-        preventDefault={!isValid}
+      <LinkStandalone
+        hasExternalIcon={false}
         onClick={isValid ? undefined : handleClick}
-        icon={<ProjectLinkIcon type={link.type} />}
+        shouldPreventDefault={!isValid}
+        to={link.url}
       >
-        {!iconOnly && linkTitle}
-      </StyledLink>
+        {linkTitle}
+      </LinkStandalone>
 
       {expanded && (
         <div className="sw-mt-1 sw-flex sw-items-center">
@@ -74,19 +72,3 @@ export default function MetaLink({ iconOnly, link }: Readonly<Props>) {
     </li>
   );
 }
-
-/*
- * Override the spacing to make it smaller
- * 1rem = 16px for the icon width
- * +
- * 0.5 rem = margin '2'
- */
-const StyledLink = styled(Link)`
-  margin-left: 1.5rem;
-
-  & > svg,
-  & > img {
-    margin-right: 0.5rem;
-    margin-left: -1.5rem;
-  }
-`;
diff --git a/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx b/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
deleted file mode 100644
index 5c8665ee692..00000000000
--- a/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { translate } from '../../helpers/l10n';
-import AlertErrorIcon from '../icons/AlertErrorIcon';
-import AlertSuccessIcon from '../icons/AlertSuccessIcon';
-import MandatoryFieldMarker from '../ui/MandatoryFieldMarker';
-import HelpTooltip from './HelpTooltip';
-
-export interface ValidationInputProps {
-  description?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  error?: string;
-  errorPlacement?: ValidationInputErrorPlacement;
-  help?: string;
-  labelHtmlFor?: string;
-  isInvalid: boolean;
-  isValid: boolean;
-  label?: React.ReactNode;
-  required?: boolean;
-  showValidIcon?: boolean;
-}
-
-export enum ValidationInputErrorPlacement {
-  Right,
-  Bottom,
-}
-
-export default function ValidationInput(props: ValidationInputProps) {
-  const {
-    children,
-    className,
-    description,
-    error,
-    errorPlacement = ValidationInputErrorPlacement.Right,
-    help,
-    labelHtmlFor,
-    isInvalid,
-    isValid,
-    label,
-    required,
-    showValidIcon = true,
-  } = props;
-
-  const hasError = isInvalid && error !== undefined;
-
-  let childrenWithStatus: React.ReactNode;
-
-  if (errorPlacement === ValidationInputErrorPlacement.Right) {
-    childrenWithStatus = (
-      <>
-        {children}
-        {showValidIcon && isValid && (
-          <AlertSuccessIcon label={translate('valid_input')} className="spacer-left text-middle" />
-        )}
-        {isInvalid && <AlertErrorIcon className="spacer-left text-middle" />}
-        {hasError && <span className="little-spacer-left text-danger text-middle">{error}</span>}
-      </>
-    );
-  } else {
-    childrenWithStatus = (
-      <>
-        {children}
-        {showValidIcon && isValid && (
-          <AlertSuccessIcon label={translate('valid_input')} className="spacer-left text-middle" />
-        )}
-        <div className="spacer-top" style={{ display: 'flex' }}>
-          {isInvalid && <AlertErrorIcon className="text-middle" />}
-          {hasError && <span className="little-spacer-left text-danger text-middle">{error}</span>}
-        </div>
-      </>
-    );
-  }
-
-  return (
-    <div className={className}>
-      {labelHtmlFor && label && (
-        <label htmlFor={labelHtmlFor}>
-          <span className="text-middle">
-            <strong>{label}</strong>
-            {required && <MandatoryFieldMarker />}
-          </span>
-          {help && <HelpTooltip className="spacer-left" overlay={help} />}
-        </label>
-      )}
-      <div className="little-spacer-top spacer-bottom">{childrenWithStatus}</div>
-      {description && <div className="note abs-width-400">{description}</div>}
-    </div>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/BranchLikeIcon.tsx b/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx
index e1b419eb713..5cea6b31037 100644
--- a/server/sonar-web/src/main/js/components/icons/BranchLikeIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icon-mappers/BranchLikeIcon.tsx
@@ -17,9 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { BranchIcon, MainBranchIcon, PullRequestIcon, ThemeColors } from 'design-system';
+import { BranchIcon, IconProps, MainBranchIcon, PullRequestIcon, ThemeColors } from 'design-system';
 import * as React from 'react';
-import { IconProps } from '../../components/icons/Icon';
 import { isMainBranch, isPullRequest } from '../../helpers/branch-like';
 import { BranchLike } from '../../types/branch-like';
 
@@ -28,7 +27,7 @@ export interface BranchLikeIconProps extends Omit<IconProps, 'fill'> {
   fill?: ThemeColors;
 }
 
-export default function BranchLikeIcon({ branchLike, ...props }: BranchLikeIconProps) {
+export default function BranchLikeIcon({ branchLike, ...props }: Readonly<BranchLikeIconProps>) {
   if (isPullRequest(branchLike)) {
     return <PullRequestIcon fill="pageContentLight" {...props} />;
   } else if (isMainBranch(branchLike)) {
diff --git a/server/sonar-web/src/main/js/components/icons/IssueStatusIcon.tsx b/server/sonar-web/src/main/js/components/icon-mappers/IssueStatusIcon.tsx
index 825cc7ead46..1bcdf1b3f67 100644
--- a/server/sonar-web/src/main/js/components/icons/IssueStatusIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icon-mappers/IssueStatusIcon.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import {
+  IconProps,
   StatusConfirmedIcon,
   StatusOpenIcon,
   StatusReopenedIcon,
@@ -26,7 +27,6 @@ import {
 import * as React from 'react';
 import { IssueStatus } from '../../types/issues';
 import { Dict } from '../../types/types';
-import { IconProps } from './Icon';
 
 interface Props extends IconProps {
   issueStatus: IssueStatus;
diff --git a/server/sonar-web/src/main/js/components/icon-mappers/IssueTypeIcon.tsx b/server/sonar-web/src/main/js/components/icon-mappers/IssueTypeIcon.tsx
index 00704eb9f64..28762ca30f5 100644
--- a/server/sonar-web/src/main/js/components/icon-mappers/IssueTypeIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icon-mappers/IssueTypeIcon.tsx
@@ -17,17 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import classNames from 'classnames';
 import {
   BugIcon,
   CodeSmellIcon,
   IconProps,
   SecurityHotspotIcon,
   VulnerabilityIcon,
-  themeColor,
-  themeContrast,
 } from 'design-system';
 import React from 'react';
 import { IssueType } from '../../types/issues';
@@ -62,22 +57,3 @@ export default function IssueTypeIcon({ type, ...iconProps }: Props) {
       return null;
   }
 }
-
-export function IssueTypeCircleIcon({ className, type, ...iconProps }: Props) {
-  const theme = useTheme();
-  return (
-    <CircleIconContainer
-      className={classNames(
-        'sw-inline-flex sw-items-center sw-justify-center sw-shrink-0 sw-w-6 sw-h-6',
-        className,
-      )}
-    >
-      <IssueTypeIcon fill={themeContrast('issueTypeIcon')({ theme })} type={type} {...iconProps} />
-    </CircleIconContainer>
-  );
-}
-
-const CircleIconContainer = styled.div`
-  background: ${themeColor('issueTypeIcon')};
-  border-radius: 100%;
-`;
diff --git a/server/sonar-web/src/main/js/components/ui/MandatoryFieldMarker.tsx b/server/sonar-web/src/main/js/components/icon-mappers/SeverityIcon.tsx
index 58131d4baa4..8fd49b16a26 100644
--- a/server/sonar-web/src/main/js/components/ui/MandatoryFieldMarker.tsx
+++ b/server/sonar-web/src/main/js/components/icon-mappers/SeverityIcon.tsx
@@ -17,21 +17,38 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import classNames from 'classnames';
+import {
+  IconProps,
+  SeverityBlockerIcon,
+  SeverityCriticalIcon,
+  SeverityInfoIcon,
+  SeverityMajorIcon,
+  SeverityMinorIcon,
+} from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
+import { isDefined } from '../../helpers/types';
+import { Dict } from '../../types/types';
 
-export interface MandatoryFieldMarkerProps {
-  className?: string;
+interface Props extends IconProps {
+  severity: string | null | undefined;
 }
 
-export default function MandatoryFieldMarker({ className }: MandatoryFieldMarkerProps) {
-  return (
-    <em
-      aria-label={translate('field_required')}
-      className={classNames('mandatory little-spacer-left', className)}
-    >
-      *
-    </em>
-  );
+const severityIcons: Dict<(props: IconProps) => React.ReactElement> = {
+  blocker: SeverityBlockerIcon,
+  critical: SeverityCriticalIcon,
+  major: SeverityMajorIcon,
+  minor: SeverityMinorIcon,
+  info: SeverityInfoIcon,
+};
+
+export default function SeverityIcon({ severity, ...iconProps }: Omit<Props, 'label'>) {
+  if (!isDefined(severity)) {
+    return null;
+  }
+
+  const DesiredIcon = severityIcons[severity.toLowerCase()];
+  return DesiredIcon ? (
+    <DesiredIcon {...iconProps} aria-label={translate('severity', severity)} />
+  ) : null;
 }
diff --git a/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx b/server/sonar-web/src/main/js/components/icon-mappers/SoftwareImpactSeverityIcon.tsx
index 6a5f4c40b05..6e3102a68ae 100644
--- a/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icon-mappers/SoftwareImpactSeverityIcon.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import {
+  IconProps,
   SoftwareImpactSeverityHighIcon,
   SoftwareImpactSeverityLowIcon,
   SoftwareImpactSeverityMediumIcon,
@@ -26,7 +27,6 @@ import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { SoftwareImpactSeverity } from '../../types/clean-code-taxonomy';
 import { Dict } from '../../types/types';
-import { IconProps } from './Icon';
 
 interface Props extends IconProps {
   severity: string | null | undefined;
diff --git a/server/sonar-web/src/main/js/components/icons/__tests__/BranchLikeIcon-test.tsx b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/BranchLikeIcon-test.tsx
index fe4608b53ec..f8a372fca84 100644
--- a/server/sonar-web/src/main/js/components/icons/__tests__/BranchLikeIcon-test.tsx
+++ b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/BranchLikeIcon-test.tsx
@@ -20,7 +20,7 @@
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import { mockBranch, mockPullRequest } from '../../../helpers/mocks/branch-like';
-import BranchLikeIcon, { BranchLikeIconProps } from '../BranchLikeIcon';
+import BranchLikeIcon, { BranchLikeIconProps } from '../../icon-mappers/BranchLikeIcon';
 
 it('should render branch icon correctly', () => {
   renderBranchLikeIcon({ branchLike: mockBranch() });
diff --git a/server/sonar-web/src/main/js/components/icons/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap
index 561ef92174d..561ef92174d 100644
--- a/server/sonar-web/src/main/js/components/icons/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/icon-mappers/__tests__/__snapshots__/BranchLikeIcon-test.tsx.snap
diff --git a/server/sonar-web/src/main/js/components/icons/AlertErrorIcon.tsx b/server/sonar-web/src/main/js/components/icons/AlertErrorIcon.tsx
deleted file mode 100644
index e493b7cc8a7..00000000000
--- a/server/sonar-web/src/main/js/components/icons/AlertErrorIcon.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import Icon, { IconProps } from './Icon';
-
-export default function AlertErrorIcon({ fill, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M11.402 10.018q0-0.232-0.17-0.402l-1.616-1.616 1.616-1.616q0.17-0.17 0.17-0.402 0-0.241-0.17-0.411l-0.804-0.804q-0.17-0.17-0.411-0.17-0.232 0-0.402 0.17l-1.616 1.616-1.616-1.616q-0.17-0.17-0.402-0.17-0.241 0-0.411 0.17l-0.804 0.804q-0.17 0.17-0.17 0.411 0 0.232 0.17 0.402l1.616 1.616-1.616 1.616q-0.17 0.17-0.17 0.402 0 0.241 0.17 0.411l0.804 0.804q0.17 0.17 0.411 0.17 0.232 0 0.402-0.17l1.616-1.616 1.616 1.616q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l0.804-0.804q0.17-0.17 0.17-0.411zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z"
-        style={{ fill: fill || colors.red }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/AlertSuccessIcon.tsx b/server/sonar-web/src/main/js/components/icons/AlertSuccessIcon.tsx
deleted file mode 100644
index 2049296b113..00000000000
--- a/server/sonar-web/src/main/js/components/icons/AlertSuccessIcon.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import Icon, { IconProps } from './Icon';
-
-export default function AlertSuccessIcon({ fill, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M12.607 6.554q0-0.25-0.161-0.411l-0.813-0.804q-0.17-0.17-0.402-0.17t-0.402 0.17l-3.643 3.634-2.018-2.018q-0.17-0.17-0.402-0.17t-0.402 0.17l-0.813 0.804q-0.161 0.161-0.161 0.411 0 0.241 0.161 0.402l3.232 3.232q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l4.848-4.848q0.161-0.161 0.161-0.402zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z"
-        style={{ fill: fill || colors.green }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/AlertWarnIcon.tsx b/server/sonar-web/src/main/js/components/icons/AlertWarnIcon.tsx
deleted file mode 100644
index a1edfb4e584..00000000000
--- a/server/sonar-web/src/main/js/components/icons/AlertWarnIcon.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import Icon, { IconProps } from './Icon';
-
-export default function AlertWarnIcon({ fill, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M8 1.143q1.866 0 3.442.92t2.496 2.496.92 3.442-.92 3.442-2.496 2.496-3.442.92-3.442-.92-2.496-2.496-.92-3.442.92-3.442 2.496-2.496T8 1.143zm1.143 11.134v-1.696q0-.125-.08-.21t-.196-.085H7.153q-.116 0-.205.089t-.089.205v1.696q0 .116.089.205t.205.089h1.714q.116 0 .196-.085t.08-.21zm-.018-3.072l.161-5.545q0-.107-.089-.161-.089-.071-.214-.071H7.019q-.125 0-.214.071-.089.054-.089.161l.152 5.545q0 .089.089.156t.214.067h1.652q.125 0 .21-.067t.094-.156z"
-        style={{ fill: fill || colors.orange }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/BackIcon.tsx b/server/sonar-web/src/main/js/components/icons/BackIcon.tsx
deleted file mode 100644
index 8f09280f05a..00000000000
--- a/server/sonar-web/src/main/js/components/icons/BackIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function BackIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M3.6 8.69l4.07 4.13.04.04a.7.7 0 01.12.7.69.69 0 01-.86.4.73.73 0 01-.26-.16L1 8l5.71-5.8.04-.03A.73.73 0 017.13 2l.1-.01c.1.01.2.04.3.09a.7.7 0 01.3.82c-.03.1-.09.19-.16.27L3.61 7.3c3.59-.03 7.18-.14 10.77.01.05 0 .06 0 .1.02a.68.68 0 01.52.61.7.7 0 01-.57.74h-.1z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/BugIcon.tsx b/server/sonar-web/src/main/js/components/icons/BugIcon.tsx
deleted file mode 100644
index 1fa32459fee..00000000000
--- a/server/sonar-web/src/main/js/components/icons/BugIcon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function BugIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M10.09,1.88A2.86,2.86,0,0,0,8,1a2.87,2.87,0,0,0-2.11.87A2.93,2.93,0,0,0,5,4h6A2.93,2.93,0,0,0,10.09,1.88Z"
-        style={{ fill }}
-      />
-      <path
-        d="M14.54,9H13V5.6L14.3,4.42a.5.5,0,0,0,0-.71.49.49,0,0,0-.7,0L12.17,5H3.82L2.34,3.66a.5.5,0,0,0-.67.74L2.94,5.55V9H1.46a.5.5,0,0,0,0,1H3a5.2,5.2,0,0,0,1.05,2.32l-2,1.81a.5.5,0,1,0,.67.74l2-1.82A4.62,4.62,0,0,0,7,14.1V8A1,1,0,0,1,8,7a.94.94,0,0,1,1,.9v6.17A4.55,4.55,0,0,0,11.18,13l2,1.83a.51.51,0,0,0,.33.13.48.48,0,0,0,.37-.17.49.49,0,0,0,0-.7l-2-1.8a5.34,5.34,0,0,0,1-2.29h1.64a.5.5,0,0,0,0-1Z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/BugTrackerIcon.tsx b/server/sonar-web/src/main/js/components/icons/BugTrackerIcon.tsx
deleted file mode 100644
index 2e2f65a503c..00000000000
--- a/server/sonar-web/src/main/js/components/icons/BugTrackerIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function BugTrackerIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M13.5 9.5c1.003.033 1.466 1.952 0 2h-2.618L9.685 9.107 8 14.162 6.096 8.45l-.832 3.05-2.829-.002c-.984-.097-1.369-1.951.065-1.998h1.236l2.168-7.95L8 7.838l1.315-3.945L12.118 9.5H13.5z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/BulletListIcon.tsx b/server/sonar-web/src/main/js/components/icons/BulletListIcon.tsx
deleted file mode 100644
index ee6572beae7..00000000000
--- a/server/sonar-web/src/main/js/components/icons/BulletListIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function BulletListIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M2.968 11.274v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM2.968 8.255v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM2.968 5.235v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM15.045 11.274v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM2.968 2.216v1.51q0 0.102-0.075 0.177t-0.177 0.075h-1.51q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h1.51q0.102 0 0.177 0.075t0.075 0.177zM15.045 8.255v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM15.045 5.235v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177zM15.045 2.216v1.51q0 0.102-0.075 0.177t-0.177 0.075h-10.568q-0.102 0-0.177-0.075t-0.075-0.177v-1.51q0-0.102 0.075-0.177t0.177-0.075h10.568q0.102 0 0.177 0.075t0.075 0.177z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/CalendarIcon.tsx b/server/sonar-web/src/main/js/components/icons/CalendarIcon.tsx
deleted file mode 100644
index efe5a3608c0..00000000000
--- a/server/sonar-web/src/main/js/components/icons/CalendarIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function CalendarIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M2 14h2.25v-2.25H2V14zm2.75 0h2.5v-2.25h-2.5V14zM2 11.25h2.25v-2.5H2v2.5zm2.75 0h2.5v-2.5h-2.5v2.5zM2 8.25h2.25V6H2v2.25zM7.75 14h2.5v-2.25h-2.5V14zm-3-5.75h2.5V6h-2.5v2.25zm6 5.75H13v-2.25h-2.25V14zm-3-2.75h2.5v-2.5h-2.5v2.5zM5 4.5V2.25a.24.24 0 0 0-.074-.176A.24.24 0 0 0 4.75 2h-.5a.24.24 0 0 0-.176.074A.24.24 0 0 0 4 2.25V4.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 5 4.5zm5.75 6.75H13v-2.5h-2.25v2.5zm-3-3h2.5V6h-2.5v2.25zm3 0H13V6h-2.25v2.25zM11 4.5V2.25a.24.24 0 0 0-.074-.176A.24.24 0 0 0 10.75 2h-.5a.24.24 0 0 0-.176.074.24.24 0 0 0-.074.176V4.5a.24.24 0 0 0 .074.176.24.24 0 0 0 .176.074h.5a.24.24 0 0 0 .176-.074A.24.24 0 0 0 11 4.5zm3-.5v10c0 .27-.099.505-.297.703A.961.961 0 0 1 13 15H2a.961.961 0 0 1-.703-.297A.961.961 0 0 1 1 14V4c0-.27.099-.505.297-.703A.961.961 0 0 1 2 3h1v-.75c0-.344.122-.638.367-.883S3.907 1 4.25 1h.5c.344 0 .638.122.883.367S6 1.907 6 2.25V3h3v-.75c0-.344.122-.638.367-.883S9.907 1 10.25 1h.5c.344 0 .638.122.883.367s.367.54.367.883V3h1c.27 0 .505.099.703.297A.961.961 0 0 1 14 4z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/ChevronDownIcon.tsx b/server/sonar-web/src/main/js/components/icons/ChevronDownIcon.tsx
deleted file mode 100644
index d4d3a091b2f..00000000000
--- a/server/sonar-web/src/main/js/components/icons/ChevronDownIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function ChevronDownIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M7.72 11.596L3.119 6.992A.382.382 0 0 1 3 6.713c0-.108.04-.2.118-.279l1.03-1.03a.382.382 0 0 1 .278-.117c.108 0 .201.04.28.117L8 8.7l3.294-3.295a.382.382 0 0 1 .28-.117c.108 0 .2.04.279.117l1.03 1.03a.382.382 0 0 1 .117.28c0 .107-.04.2-.118.278L8.28 11.596a.382.382 0 0 1-.279.117.382.382 0 0 1-.28-.117z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/ChevronRightIcon.tsx b/server/sonar-web/src/main/js/components/icons/ChevronRightIcon.tsx
deleted file mode 100644
index 2e12396135f..00000000000
--- a/server/sonar-web/src/main/js/components/icons/ChevronRightIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function ChevronRightIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M11.596 8.28l-4.604 4.602a.382.382 0 0 1-.279.118.382.382 0 0 1-.279-.118l-1.03-1.03a.382.382 0 0 1-.117-.278c0-.108.04-.201.117-.28L8.7 8 5.404 4.706a.382.382 0 0 1-.117-.28c0-.108.04-.2.117-.279l1.03-1.03A.382.382 0 0 1 6.714 3c.107 0 .2.04.278.118l4.604 4.603a.382.382 0 0 1 .117.279c0 .108-.04.201-.117.28z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/ClearIcon.tsx b/server/sonar-web/src/main/js/components/icons/ClearIcon.tsx
deleted file mode 100644
index 857fa46fb5d..00000000000
--- a/server/sonar-web/src/main/js/components/icons/ClearIcon.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export interface ClearIconProps extends IconProps {
-  thin?: boolean;
-}
-
-export default function ClearIcon({ fill = 'currentColor', thin, ...iconProps }: ClearIconProps) {
-  return (
-    <Icon {...iconProps}>
-      {thin ? (
-        <path
-          d="M14 3.209l-1.209-1.209-4.791 4.791-4.791-4.791-1.209 1.209 4.791 4.791-4.791 4.791 1.209 1.209 4.791-4.791 4.791 4.791 1.209-1.209-4.791-4.791z"
-          style={{ fill }}
-        />
-      ) : (
-        <path
-          d="M14 4.242L11.758 2l-3.76 3.76L4.242 2 2 4.242l3.756 3.756L2 11.758 4.242 14l3.756-3.76 3.76 3.76L14 11.758l-3.76-3.76L14 4.242z"
-          style={{ fill }}
-        />
-      )}
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/CodeSmellIcon.tsx b/server/sonar-web/src/main/js/components/icons/CodeSmellIcon.tsx
deleted file mode 100644
index 0c5b5505341..00000000000
--- a/server/sonar-web/src/main/js/components/icons/CodeSmellIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function CodeSmellIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M8,15.1a7,7,0,1,0-7-7A7,7,0,0,0,8,15.1Zm.74-8.9,1.46-2.52a.29.29,0,0,1,.25-.14.3.3,0,0,1,.15,0,5.26,5.26,0,0,1,2.61,4.53.28.28,0,0,1-.29.29H10a.28.28,0,0,1-.29-.29,1.78,1.78,0,0,0-.88-1.51A.29.29,0,0,1,8.75,6.2Zm.11,3.44A.23.23,0,0,1,9,9.6a.29.29,0,0,1,.25.14l1.46,2.52a.18.18,0,0,1,0,.13.3.3,0,0,1-.15.27,5.3,5.3,0,0,1-5.23,0,.3.3,0,0,1-.1-.4L6.73,9.74A.29.29,0,0,1,7,9.6a.23.23,0,0,1,.14,0A1.79,1.79,0,0,0,8.86,9.64ZM5.33,3.59a.3.3,0,0,1,.41.1L7.2,6.21a.29.29,0,0,1-.1.4,1.79,1.79,0,0,0-.87,1.51.28.28,0,0,1-.29.29H3a.32.32,0,0,1-.32-.29A5.26,5.26,0,0,1,5.33,3.59Z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/CollapseIcon.tsx b/server/sonar-web/src/main/js/components/icons/CollapseIcon.tsx
deleted file mode 100644
index b8d6abe52ae..00000000000
--- a/server/sonar-web/src/main/js/components/icons/CollapseIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function CollapseIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M8 8.509v3.56c0 .138-.05.257-.151.357-.1.101-.22.151-.358.151a.489.489 0 0 1-.357-.15l-1.145-1.145-2.638 2.639a.251.251 0 0 1-.366 0l-.906-.906a.251.251 0 0 1 0-.366l2.639-2.638-1.144-1.145a.489.489 0 0 1-.151-.357c0-.138.05-.257.15-.358.101-.1.22-.151.358-.151h3.56c.138 0 .257.05.358.151.1.1.151.22.151.358zm6-5.34c0 .068-.026.129-.08.182l-2.638 2.638 1.144 1.145c.101.1.151.22.151.357 0 .138-.05.257-.15.358-.101.1-.22.151-.358.151h-3.56a.489.489 0 0 1-.358-.151A.489.489 0 0 1 8 7.491v-3.56c0-.138.05-.257.151-.357.1-.101.22-.151.358-.151.137 0 .257.05.357.15l1.145 1.145 2.638-2.639a.251.251 0 0 1 .366 0l.906.906c.053.053.079.114.079.183z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/ContinuousIntegrationIcon.tsx b/server/sonar-web/src/main/js/components/icons/ContinuousIntegrationIcon.tsx
deleted file mode 100644
index 533e88c68db..00000000000
--- a/server/sonar-web/src/main/js/components/icons/ContinuousIntegrationIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function ContinuousIntegrationIcon({
-  fill = 'currentColor',
-  ...iconProps
-}: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M13.805 9.25c0 .016 0 .04-.008.055C13.133 12.07 10.852 14 7.969 14c-1.524 0-3-.602-4.11-1.656l-1.007 1.008a.497.497 0 0 1-.352.148.504.504 0 0 1-.5-.5V9.5c0-.273.227-.5.5-.5H6c.273 0 .5.227.5.5a.497.497 0 0 1-.148.352l-1.07 1.07a3.988 3.988 0 0 0 6.125-.828c.187-.305.28-.602.413-.914.04-.11.117-.18.235-.18h1.5c.14 0 .25.117.25.25zM14 3v3.5c0 .273-.227.5-.5.5H10a.504.504 0 0 1-.5-.5c0-.133.055-.258.148-.352l1.079-1.078A4.019 4.019 0 0 0 8 4c-1.39 0-2.68.719-3.406 1.906-.188.305-.282.602-.414.914-.04.11-.117.18-.235.18H2.391a.252.252 0 0 1-.25-.25v-.055C2.812 3.922 5.117 2 8 2c1.531 0 3.023.61 4.133 1.656l1.015-1.008A.497.497 0 0 1 13.5 2.5c.273 0 .5.227.5.5z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/DeleteIcon.tsx b/server/sonar-web/src/main/js/components/icons/DeleteIcon.tsx
deleted file mode 100644
index 32a31304069..00000000000
--- a/server/sonar-web/src/main/js/components/icons/DeleteIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function DeleteIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M13.571429 1.8750019h-3.214285l-.251787-.5113283a.64285716.65624976 0 0 0-.5758927-.3636718H6.4678572a.63535718.64859353 0 0 0-.5732142.3636718l-.2517858.5113283H2.4285714A.42857144.43749984 0 0 0 2 2.3125018v.8749996a.42857144.43749984 0 0 0 .4285714.4374999H13.571429A.42857144.43749984 0 0 0 14 3.1875014v-.8749996a.42857144.43749984 0 0 0-.428571-.4374999zM3.4250001 13.769529a1.2857144 1.3124996 0 0 0 1.2830357 1.230468h6.5839282A1.2857144 1.3124996 0 0 0 12.575 13.769529l.567857-9.269528H2.8571428z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/DetachIcon.tsx b/server/sonar-web/src/main/js/components/icons/DetachIcon.tsx
deleted file mode 100644
index fc6c112ef78..00000000000
--- a/server/sonar-web/src/main/js/components/icons/DetachIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function DetachIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M12 9.25v2.5A2.25 2.25 0 0 1 9.75 14h-6.5A2.25 2.25 0 0 1 1 11.75v-6.5A2.25 2.25 0 0 1 3.25 3h5.5c.14 0 .25.11.25.25v.5c0 .14-.11.25-.25.25h-5.5C2.562 4 2 4.563 2 5.25v6.5c0 .688.563 1.25 1.25 1.25h6.5c.688 0 1.25-.563 1.25-1.25v-2.5c0-.14.11-.25.25-.25h.5c.14 0 .25.11.25.25zm3-6.75v4c0 .273-.227.5-.5.5a.497.497 0 0 1-.352-.148l-1.375-1.375L7.68 10.57a.27.27 0 0 1-.18.078.27.27 0 0 1-.18-.078l-.89-.89a.27.27 0 0 1-.078-.18.27.27 0 0 1 .078-.18l5.093-5.093-1.375-1.375A.497.497 0 0 1 10 2.5c0-.273.227-.5.5-.5h4c.273 0 .5.227.5.5z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/DropdownIcon.tsx b/server/sonar-web/src/main/js/components/icons/DropdownIcon.tsx
deleted file mode 100644
index 204a54d0c83..00000000000
--- a/server/sonar-web/src/main/js/components/icons/DropdownIcon.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-interface DropdownIconProps {
-  turned?: boolean;
-}
-
-export default function DropdownIcon({
-  fill = 'currentColor',
-  size = 16,
-  turned = false,
-  ...iconProps
-}: IconProps & DropdownIconProps) {
-  return (
-    <Icon
-      height={size}
-      style={turned ? { transform: 'rotate(180deg)' } : undefined}
-      viewBox="0 0 7 16"
-      width={(size / 16) * 7}
-      {...iconProps}
-    >
-      <path
-        d="M7 6.469a.42.42 0 0 1-.13.307L3.808 9.84a.42.42 0 0 1-.308.13.42.42 0 0 1-.308-.13L.13 6.776A.42.42 0 0 1 0 6.47a.42.42 0 0 1 .13-.308.42.42 0 0 1 .307-.13h6.126a.42.42 0 0 1 .307.13.42.42 0 0 1 .13.308z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/EditIcon.tsx b/server/sonar-web/src/main/js/components/icons/EditIcon.tsx
deleted file mode 100644
index 48fd11b4869..00000000000
--- a/server/sonar-web/src/main/js/components/icons/EditIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function EditIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M4.875 12.986l.721-.72-1.861-1.862-.721.72v.848h1.014v1.014h.847zm4.143-7.35c0-.117-.058-.175-.174-.175a.183.183 0 0 0-.135.056L4.416 9.81a.183.183 0 0 0-.056.135c0 .116.058.174.175.174a.183.183 0 0 0 .134-.056L8.962 5.77a.183.183 0 0 0 .056-.134zM8.59 4.115l3.295 3.295L5.295 14H2v-3.295l6.59-6.59zm5.41.76a.97.97 0 0 1-.293.713l-1.315 1.315-3.295-3.295L10.412 2.3c.19-.2.428-.301.713-.301.28 0 .52.1.72.301l1.862 1.853c.195.206.293.447.293.721z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/EllipsisIcon.tsx b/server/sonar-web/src/main/js/components/icons/EllipsisIcon.tsx
deleted file mode 100644
index a309ac54f5a..00000000000
--- a/server/sonar-web/src/main/js/components/icons/EllipsisIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function EllipsisIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M5.273 7.182v1.636a.818.818 0 0 1-.818.818H2.818A.818.818 0 0 1 2 8.818V7.182c0-.452.366-.818.818-.818h1.637c.451 0 .818.366.818.818zm4.363 0v1.636a.818.818 0 0 1-.818.818H7.182a.818.818 0 0 1-.818-.818V7.182c0-.452.366-.818.818-.818h1.636c.452 0 .818.366.818.818zm4.364 0v1.636a.818.818 0 0 1-.818.818h-1.637a.818.818 0 0 1-.818-.818V7.182c0-.452.367-.818.818-.818h1.637c.452 0 .818.366.818.818z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/ExpandIcon.tsx b/server/sonar-web/src/main/js/components/icons/ExpandIcon.tsx
deleted file mode 100644
index bdae20c5da6..00000000000
--- a/server/sonar-web/src/main/js/components/icons/ExpandIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function ExpandIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M7.898 9.25a.247.247 0 0 1-.078.18l-2.593 2.593 1.125 1.125a.48.48 0 0 1 .148.352.48.48 0 0 1-.148.352A.48.48 0 0 1 6 14H2.5a.48.48 0 0 1-.352-.148A.48.48 0 0 1 2 13.5V10a.48.48 0 0 1 .148-.352A.48.48 0 0 1 2.5 9.5a.48.48 0 0 1 .352.148l1.125 1.125L6.57 8.18a.247.247 0 0 1 .36 0l.89.89a.247.247 0 0 1 .078.18zM14 2.5V6a.48.48 0 0 1-.148.352.48.48 0 0 1-.352.148.48.48 0 0 1-.352-.148l-1.125-1.125L9.43 7.82a.247.247 0 0 1-.36 0l-.89-.89a.247.247 0 0 1 0-.36l2.593-2.593-1.125-1.125A.48.48 0 0 1 9.5 2.5a.48.48 0 0 1 .148-.352A.48.48 0 0 1 10 2h3.5a.48.48 0 0 1 .352.148A.48.48 0 0 1 14 2.5z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx b/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx
deleted file mode 100644
index 5a47faeec29..00000000000
--- a/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import classNames from 'classnames';
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import Icon, { IconProps } from './Icon';
-
-interface Props extends IconProps {
-  favorite: boolean;
-}
-
-export default function FavoriteIcon({ className, favorite, fill, ...iconProps }: Props) {
-  return (
-    <Icon
-      className={classNames('icon-outline', { 'is-filled': favorite }, className)}
-      style={{ color: fill || colors.favoriteColor }}
-      {...iconProps}
-    >
-      <g transform="matrix(0.988024,0,0,0.988024,0.0957953,0.717719)">
-        <path d="M15.428,5.777C15.428,5.908 15.35,6.051 15.195,6.205L11.954,9.366L12.722,13.83C12.728,13.872 12.731,13.932 12.731,14.009C12.731,14.134 12.7,14.24 12.637,14.326C12.575,14.412 12.484,14.455 12.365,14.455C12.252,14.455 12.133,14.42 12.008,14.348L7.999,12.241L3.99,14.348C3.859,14.42 3.74,14.455 3.633,14.455C3.508,14.455 3.414,14.412 3.352,14.326C3.289,14.24 3.258,14.134 3.258,14.009C3.258,13.973 3.264,13.914 3.276,13.83L4.044,9.366L0.794,6.205C0.645,6.045 0.57,5.902 0.57,5.777C0.57,5.557 0.737,5.42 1.07,5.366L5.552,4.714L7.561,0.652C7.674,0.408 7.82,0.286 7.999,0.286C8.177,0.286 8.323,0.408 8.436,0.652L10.445,4.714L14.927,5.366C15.261,5.42 15.427,5.557 15.427,5.777L15.428,5.777Z" />
-      </g>
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/GroupIcon.tsx b/server/sonar-web/src/main/js/components/icons/GroupIcon.tsx
deleted file mode 100644
index dfac1c0d591..00000000000
--- a/server/sonar-web/src/main/js/components/icons/GroupIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import Icon, { IconProps } from './Icon';
-
-export default function GroupIcon({ fill, size = 36, ...iconProps }: IconProps) {
-  return (
-    <Icon viewBox="0 0 36 36" size={size} {...iconProps}>
-      <g transform="matrix(0.0625,0,0,0.0625,3,4)">
-        <path
-          d="M148.25,224C121.25,224.833 99.167,235.5 82,256L48.5,256C34.833,256 23.333,252.625 14,245.875C4.667,239.125 0,229.25 0,216.25C0,157.417 10.333,128 31,128C32,128 35.625,129.75 41.875,133.25C48.125,136.75 56.25,140.292 66.25,143.875C76.25,147.458 86.167,149.25 96,149.25C107.167,149.25 118.25,147.333 129.25,143.5C128.417,149.667 128,155.167 128,160C128,183.167 134.75,204.5 148.25,224ZM416,383.25C416,403.25 409.917,419.042 397.75,430.625C385.583,442.208 369.417,448 349.25,448L130.75,448C110.583,448 94.417,442.208 82.25,430.625C70.083,419.042 64,403.25 64,383.25C64,374.417 64.292,365.792 64.875,357.375C65.458,348.958 66.625,339.875 68.375,330.125C70.125,320.375 72.333,311.333 75,303C77.667,294.667 81.25,286.542 85.75,278.625C90.25,270.708 95.417,263.958 101.25,258.375C107.083,252.792 114.208,248.333 122.625,245C131.042,241.667 140.333,240 150.5,240C152.167,240 155.75,241.792 161.25,245.375C166.75,248.958 172.833,252.958 179.5,257.375C186.167,261.792 195.083,265.792 206.25,269.375C217.417,272.958 228.667,274.75 240,274.75C251.333,274.75 262.583,272.958 273.75,269.375C284.917,265.792 293.833,261.792 300.5,257.375C307.167,252.958 313.25,248.958 318.75,245.375C324.25,241.792 327.833,240 329.5,240C339.667,240 348.958,241.667 357.375,245C365.792,248.333 372.917,252.792 378.75,258.375C384.583,263.958 389.75,270.708 394.25,278.625C398.75,286.542 402.333,294.667 405,303C407.667,311.333 409.875,320.375 411.625,330.125C413.375,339.875 414.542,348.958 415.125,357.375C415.708,365.792 416,374.417 416,383.25ZM160,64C160,81.667 153.75,96.75 141.25,109.25C128.75,121.75 113.667,128 96,128C78.333,128 63.25,121.75 50.75,109.25C38.25,96.75 32,81.667 32,64C32,46.333 38.25,31.25 50.75,18.75C63.25,6.25 78.333,0 96,0C113.667,0 128.75,6.25 141.25,18.75C153.75,31.25 160,46.333 160,64ZM336,160C336,186.5 326.625,209.125 307.875,227.875C289.125,246.625 266.5,256 240,256C213.5,256 190.875,246.625 172.125,227.875C153.375,209.125 144,186.5 144,160C144,133.5 153.375,110.875 172.125,92.125C190.875,73.375 213.5,64 240,64C266.5,64 289.125,73.375 307.875,92.125C326.625,110.875 336,133.5 336,160ZM480,216.25C480,229.25 475.333,239.125 466,245.875C456.667,252.625 445.167,256 431.5,256L398,256C380.833,235.5 358.75,224.833 331.75,224C345.25,204.5 352,183.167 352,160C352,155.167 351.583,149.667 350.75,143.5C361.75,147.333 372.833,149.25 384,149.25C393.833,149.25 403.75,147.458 413.75,143.875C423.75,140.292 431.875,136.75 438.125,133.25C444.375,129.75 448,128 449,128C469.667,128 480,157.417 480,216.25ZM448,64C448,81.667 441.75,96.75 429.25,109.25C416.75,121.75 401.667,128 384,128C366.333,128 351.25,121.75 338.75,109.25C326.25,96.75 320,81.667 320,64C320,46.333 326.25,31.25 338.75,18.75C351.25,6.25 366.333,0 384,0C401.667,0 416.75,6.25 429.25,18.75C441.75,31.25 448,46.333 448,64Z"
-          style={{ fill: fill || colors.gray67 }}
-        />
-      </g>
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/HistoryIcon.tsx b/server/sonar-web/src/main/js/components/icons/HistoryIcon.tsx
deleted file mode 100644
index 23437591789..00000000000
--- a/server/sonar-web/src/main/js/components/icons/HistoryIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function HistoryIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/HouseIcon.tsx b/server/sonar-web/src/main/js/components/icons/HouseIcon.tsx
deleted file mode 100644
index bf3a9361e79..00000000000
--- a/server/sonar-web/src/main/js/components/icons/HouseIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function HouseIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M13.002 8.848v4.168a.56.56 0 0 1-.556.555H9.11v-3.334H6.89v3.334H3.554a.56.56 0 0 1-.556-.555V8.848c0-.018.01-.035.01-.052L8 4.68l4.993 4.116c.009.017.009.034.009.052zm1.936-.6l-.538.643a.289.289 0 0 1-.183.096h-.026a.273.273 0 0 1-.182-.061L8 3.916l-6.009 5.01a.297.297 0 0 1-.208.06.289.289 0 0 1-.183-.095l-.538-.642a.285.285 0 0 1 .035-.391L7.34 2.656a1.07 1.07 0 0 1 1.32 0l2.119 1.772V2.735c0-.157.121-.278.278-.278h1.667c.156 0 .278.121.278.278v3.542l1.901 1.58c.113.096.13.279.035.392z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/Icon.tsx b/server/sonar-web/src/main/js/components/icons/Icon.tsx
deleted file mode 100644
index 16019a6fb75..00000000000
--- a/server/sonar-web/src/main/js/components/icons/Icon.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { uniqueId } from 'lodash';
-import * as React from 'react';
-
-export interface IconProps extends React.HTMLAttributes<SVGSVGElement> {
-  className?: string;
-  fill?: string;
-  size?: number;
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-}
-
-interface Props extends React.HTMLAttributes<SVGSVGElement> {
-  children: React.ReactNode;
-  className?: string;
-  size?: number;
-  style?: React.CSSProperties;
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-
-  // try to avoid using these:
-  width?: number;
-  height?: number;
-  viewBox?: string;
-}
-
-export default function Icon({
-  children,
-  className,
-  size = 16,
-  style,
-  height = size,
-  width = size,
-  viewBox = '0 0 16 16',
-  label,
-  description,
-  'aria-hidden': hidden,
-  ...iconProps
-}: Props) {
-  const id = uniqueId('icon');
-  return (
-    <svg
-      className={className}
-      height={height}
-      style={{
-        fillRule: 'evenodd',
-        clipRule: 'evenodd',
-        strokeLinejoin: 'round',
-        strokeMiterlimit: 1.41421,
-        ...style,
-      }}
-      version="1.1"
-      viewBox={viewBox}
-      width={width}
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      xmlSpace="preserve"
-      aria-describedby={description && !hidden ? id : undefined}
-      {...iconProps}
-    >
-      {label && !hidden && <title>{label}</title>}
-      {description && !hidden && <desc id={id}>{description}</desc>}
-      {children}
-    </svg>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/InfoIcon.tsx b/server/sonar-web/src/main/js/components/icons/InfoIcon.tsx
deleted file mode 100644
index 2b729e0e4e3..00000000000
--- a/server/sonar-web/src/main/js/components/icons/InfoIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function InfoIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M10.333 12.375v-1.458a.288.288 0 0 0-.291-.292h-.875V5.958a.288.288 0 0 0-.292-.291H5.958a.288.288 0 0 0-.291.291v1.459c0 .164.127.291.291.291h.875v2.917h-.875a.288.288 0 0 0-.291.292v1.458c0 .164.127.292.291.292h4.084a.288.288 0 0 0 .291-.292zM9.167 4.208V2.75a.288.288 0 0 0-.292-.292h-1.75a.288.288 0 0 0-.292.292v1.458c0 .164.128.292.292.292h1.75a.288.288 0 0 0 .292-.292zM15 8c0 3.865-3.135 7-7 7s-7-3.135-7-7 3.135-7 7-7 7 3.135 7 7z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/IssueIcon.tsx b/server/sonar-web/src/main/js/components/icons/IssueIcon.tsx
deleted file mode 100644
index f95988e9625..00000000000
--- a/server/sonar-web/src/main/js/components/icons/IssueIcon.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { IssueType } from '../../types/types';
-import BugIcon from './BugIcon';
-import CodeSmellIcon from './CodeSmellIcon';
-import { IconProps } from './Icon';
-import SecurityHotspotIcon from './SecurityHotspotIcon';
-import VulnerabilityIcon from './VulnerabilityIcon';
-
-interface Props extends IconProps {
-  type: IssueType;
-}
-
-export default function IssueIcon({ type, ...iconProps }: Props) {
-  switch (type) {
-    case 'BUG':
-      return <BugIcon {...iconProps} />;
-    case 'VULNERABILITY':
-      return <VulnerabilityIcon {...iconProps} />;
-    case 'CODE_SMELL':
-      return <CodeSmellIcon {...iconProps} />;
-    case 'SECURITY_HOTSPOT':
-      return <SecurityHotspotIcon {...iconProps} />;
-    default:
-      return null;
-  }
-}
diff --git a/server/sonar-web/src/main/js/components/icons/IssueTypeIcon.tsx b/server/sonar-web/src/main/js/components/icons/IssueTypeIcon.tsx
deleted file mode 100644
index 439691c41a1..00000000000
--- a/server/sonar-web/src/main/js/components/icons/IssueTypeIcon.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { IssueType } from '../../types/types';
-import { IconProps } from './Icon';
-import IssueIcon from './IssueIcon';
-
-export interface Props extends IconProps {
-  query: string;
-}
-
-export default function IssueTypeIcon({ query, ...iconProps }: Props) {
-  let type: IssueType;
-
-  switch (query.toLowerCase()) {
-    case 'bug':
-    case 'bugs':
-    case 'new_bugs':
-      type = 'BUG';
-      break;
-    case 'vulnerability':
-    case 'vulnerabilities':
-    case 'new_vulnerabilities':
-      type = 'VULNERABILITY';
-      break;
-    case 'code_smell':
-    case 'code_smells':
-    case 'new_code_smells':
-      type = 'CODE_SMELL';
-      break;
-    case 'security_hotspot':
-    case 'security_hotspots':
-    case 'new_security_hotspots':
-      type = 'SECURITY_HOTSPOT';
-      break;
-    default:
-      return null;
-  }
-
-  return <IssueIcon type={type} {...iconProps} />;
-}
diff --git a/server/sonar-web/src/main/js/components/icons/LinkIcon.tsx b/server/sonar-web/src/main/js/components/icons/LinkIcon.tsx
deleted file mode 100644
index 52491e88950..00000000000
--- a/server/sonar-web/src/main/js/components/icons/LinkIcon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function LinkIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <g transform="matrix(0.823497,0,0,0.823497,1.47008,1.4122)">
-        <path
-          d="M13.501,11.429C13.501,11.191 13.418,10.989 13.251,10.822L11.394,8.965C11.227,8.798 11.025,8.715 10.787,8.715C10.537,8.715 10.323,8.81 10.144,9.001C10.162,9.019 10.219,9.074 10.314,9.166C10.409,9.258 10.473,9.322 10.506,9.358C10.539,9.394 10.583,9.451 10.64,9.528C10.697,9.605 10.735,9.681 10.756,9.756C10.777,9.831 10.787,9.913 10.787,10.002C10.787,10.24 10.704,10.442 10.537,10.609C10.37,10.776 10.168,10.859 9.93,10.859C9.841,10.859 9.759,10.849 9.684,10.828C9.609,10.807 9.533,10.769 9.456,10.712C9.379,10.655 9.322,10.611 9.286,10.578C9.25,10.545 9.186,10.481 9.094,10.386C9.002,10.291 8.947,10.234 8.929,10.216C8.732,10.401 8.634,10.618 8.634,10.868C8.634,11.106 8.717,11.308 8.884,11.475L10.723,13.323C10.884,13.484 11.086,13.564 11.33,13.564C11.568,13.564 11.77,13.487 11.937,13.332L13.25,12.028C13.417,11.861 13.5,11.662 13.5,11.43L13.501,11.429ZM7.224,5.134C7.224,4.896 7.141,4.694 6.974,4.527L5.135,2.679C4.968,2.512 4.766,2.429 4.528,2.429C4.296,2.429 4.094,2.509 3.921,2.67L2.608,3.974C2.441,4.141 2.358,4.34 2.358,4.572C2.358,4.81 2.441,5.012 2.608,5.179L4.465,7.036C4.626,7.197 4.828,7.277 5.072,7.277C5.322,7.277 5.536,7.185 5.715,7C5.697,6.982 5.64,6.927 5.545,6.835C5.45,6.743 5.386,6.679 5.353,6.643C5.32,6.607 5.276,6.55 5.219,6.473C5.162,6.396 5.124,6.32 5.103,6.245C5.082,6.17 5.072,6.088 5.072,5.999C5.072,5.761 5.155,5.559 5.322,5.392C5.489,5.225 5.691,5.142 5.929,5.142C6.018,5.142 6.1,5.152 6.175,5.173C6.25,5.194 6.326,5.232 6.403,5.289C6.48,5.346 6.537,5.39 6.573,5.423C6.609,5.456 6.673,5.52 6.765,5.615C6.857,5.71 6.912,5.767 6.93,5.785C7.127,5.6 7.225,5.383 7.225,5.133L7.224,5.134ZM15.215,11.429C15.215,12.143 14.962,12.747 14.456,13.242L13.143,14.546C12.649,15.04 12.045,15.287 11.33,15.287C10.61,15.287 10.003,15.034 9.509,14.528L7.67,12.68C7.176,12.186 6.929,11.582 6.929,10.867C6.929,10.135 7.191,9.513 7.715,9.001L6.929,8.215C6.417,8.739 5.798,9.001 5.072,9.001C4.358,9.001 3.751,8.751 3.251,8.251L1.394,6.394C0.894,5.894 0.644,5.287 0.644,4.573C0.644,3.859 0.897,3.255 1.403,2.76L2.716,1.456C3.21,0.962 3.814,0.715 4.529,0.715C5.249,0.715 5.856,0.968 6.35,1.474L8.189,3.322C8.683,3.816 8.93,4.42 8.93,5.135C8.93,5.867 8.668,6.489 8.144,7.001L8.93,7.787C9.442,7.263 10.061,7.001 10.787,7.001C11.501,7.001 12.108,7.251 12.608,7.751L14.465,9.608C14.965,10.108 15.215,10.715 15.215,11.429L15.215,11.429Z"
-          style={{ fill }}
-        />
-      </g>
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/LockIcon.tsx b/server/sonar-web/src/main/js/components/icons/LockIcon.tsx
deleted file mode 100644
index de59aeb559b..00000000000
--- a/server/sonar-web/src/main/js/components/icons/LockIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function LockIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M5.455 7.364h5.09v-1.91A2.55 2.55 0 0 0 8 2.91a2.55 2.55 0 0 0-2.545 2.546v1.909zm8.272.954v5.727a.955.955 0 0 1-.954.955H3.227a.955.955 0 0 1-.954-.955V8.318c0-.527.427-.954.954-.954h.318v-1.91C3.545 3.01 5.554 1 8 1s4.455 2.009 4.455 4.455v1.909h.318c.527 0 .954.427.954.954z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/MinimizeIcon.tsx b/server/sonar-web/src/main/js/components/icons/MinimizeIcon.tsx
deleted file mode 100644
index c0d928c4d48..00000000000
--- a/server/sonar-web/src/main/js/components/icons/MinimizeIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function MinimizeIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M14 12.1v1.267c0 .176-.08.325-.239.448a.918.918 0 0 1-.58.185H2.819a.918.918 0 0 1-.58-.185C2.08 13.692 2 13.543 2 13.367V12.1c0-.176.08-.326.239-.449a.918.918 0 0 1 .58-.185h10.363c.227 0 .42.062.58.185.158.123.238.273.238.449z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/OpenCloseIcon.tsx b/server/sonar-web/src/main/js/components/icons/OpenCloseIcon.tsx
deleted file mode 100644
index 403a32390b3..00000000000
--- a/server/sonar-web/src/main/js/components/icons/OpenCloseIcon.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import ChevronDownIcon from './ChevronDownIcon';
-import ChevronRightIcon from './ChevronRightIcon';
-import { IconProps } from './Icon';
-
-interface Props extends IconProps {
-  open: boolean;
-}
-
-export default function OpenCloseIcon({ open, ...iconProps }: Props) {
-  return open ? <ChevronDownIcon {...iconProps} /> : <ChevronRightIcon {...iconProps} />;
-}
diff --git a/server/sonar-web/src/main/js/components/icons/PendingIcon.tsx b/server/sonar-web/src/main/js/components/icons/PendingIcon.tsx
deleted file mode 100644
index cfed18edf71..00000000000
--- a/server/sonar-web/src/main/js/components/icons/PendingIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import Icon, { IconProps } from './Icon';
-
-export default function PendingIcon({ fill, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <g transform="matrix(0.0364583,0,0,0.0364583,1,-0.166667)">
-        <path
-          d="M224,136L224,248C224,250.333 223.25,252.25 221.75,253.75C220.25,255.25 218.333,256 216,256L136,256C133.667,256 131.75,255.25 130.25,253.75C128.75,252.25 128,250.333 128,248L128,232C128,229.667 128.75,227.75 130.25,226.25C131.75,224.75 133.667,224 136,224L192,224L192,136C192,133.667 192.75,131.75 194.25,130.25C195.75,128.75 197.667,128 200,128L216,128C218.333,128 220.25,128.75 221.75,130.25C223.25,131.75 224,133.667 224,136ZM328,224C328,199.333 321.917,176.583 309.75,155.75C297.583,134.917 281.083,118.417 260.25,106.25C239.417,94.083 216.667,88 192,88C167.333,88 144.583,94.083 123.75,106.25C102.917,118.417 86.417,134.917 74.25,155.75C62.083,176.583 56,199.333 56,224C56,248.667 62.083,271.417 74.25,292.25C86.417,313.083 102.917,329.583 123.75,341.75C144.583,353.917 167.333,360 192,360C216.667,360 239.417,353.917 260.25,341.75C281.083,329.583 297.583,313.083 309.75,292.25C321.917,271.417 328,248.667 328,224ZM384,224C384,258.833 375.417,290.958 358.25,320.375C341.083,349.792 317.792,373.083 288.375,390.25C258.958,407.417 226.833,416 192,416C157.167,416 125.042,407.417 95.625,390.25C66.208,373.083 42.917,349.792 25.75,320.375C8.583,290.958 0,258.833 0,224C0,189.167 8.583,157.042 25.75,127.625C42.917,98.208 66.208,74.917 95.625,57.75C125.042,40.583 157.167,32 192,32C226.833,32 258.958,40.583 288.375,57.75C317.792,74.917 341.083,98.208 358.25,127.625C375.417,157.042 384,189.167 384,224Z"
-          style={{ fill: fill || colors.gray67 }}
-        />
-      </g>
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/PlusCircleIcon.tsx b/server/sonar-web/src/main/js/components/icons/PlusCircleIcon.tsx
deleted file mode 100644
index 217874c5d6a..00000000000
--- a/server/sonar-web/src/main/js/components/icons/PlusCircleIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function PlusCircleIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M8 1c3.863 0 7 3.137 7 7s-3.137 7-7 7-7-3.137-7-7 3.137-7 7-7zm3.726 7.985A.274.274 0 0 0 12 8.711V7.289a.274.274 0 0 0-.274-.274H8.985V4.274A.274.274 0 0 0 8.711 4H7.289a.274.274 0 0 0-.274.274v2.741H4.274A.274.274 0 0 0 4 7.289v1.422c0 .152.123.274.274.274h2.741v2.741c0 .151.122.274.274.274h1.422a.274.274 0 0 0 .274-.274V8.985h2.741z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/ProjectLinkIcon.tsx b/server/sonar-web/src/main/js/components/icons/ProjectLinkIcon.tsx
deleted file mode 100644
index e53096d3e0e..00000000000
--- a/server/sonar-web/src/main/js/components/icons/ProjectLinkIcon.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import {
-  FileIcon,
-  HomeIcon,
-  LinkExternalIcon,
-  IconProps as MIUIIconProps,
-  PulseIcon,
-  SyncIcon,
-} from '@primer/octicons-react';
-import React, { FC } from 'react';
-
-interface ProjectLinkIconProps {
-  type: string;
-}
-
-export default function ProjectLinkIcon({ type, ...iconProps }: ProjectLinkIconProps) {
-  const getIcon = (): FC<React.PropsWithChildren<MIUIIconProps>> => {
-    switch (type) {
-      case 'issue':
-        return PulseIcon;
-      case 'homepage':
-        return HomeIcon;
-      case 'ci':
-        return SyncIcon;
-      case 'scm':
-        return FileIcon;
-      default:
-        return LinkExternalIcon;
-    }
-  };
-
-  const Icon = getIcon();
-
-  return <Icon {...iconProps} />;
-}
diff --git a/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx b/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx
deleted file mode 100644
index 46d642dc9b3..00000000000
--- a/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import Icon, { IconProps } from './Icon';
-
-export default function PullRequestIcon({ fill, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M13,11.9L13,5.5C13,5.4 13.232,1.996 7.9,2L9.1,0.8L8.5,0.1L5.9,2.6L8.5,5.1L9.2,4.4L7.905,3.008C12.256,2.99 12,5.4 12,5.5L12,11.9C11.1,12.1 10.5,12.9 10.5,13.8C10.5,14.9 11.4,15.8 12.5,15.8C13.6,15.8 14.5,14.9 14.5,13.8C14.5,12.9 13.9,12.2 13,11.9ZM4,11.9C4.9,12.2 5.5,12.9 5.5,13.8C5.5,14.9 4.6,15.8 3.5,15.8C2.4,15.8 1.5,14.9 1.5,13.8C1.5,12.9 2.1,12.1 3,11.9L3,4.1C2.1,3.9 1.5,3.1 1.5,2.2C1.5,1.1 2.4,0.2 3.5,0.2C4.6,0.2 5.5,1.1 5.5,2.2C5.5,3.1 4.9,3.9 4,4.1L4,11.9ZM12.5,14.9C11.9,14.9 11.5,14.5 11.5,13.9C11.5,13.3 11.9,12.9 12.5,12.9C13.1,12.9 13.5,13.3 13.5,13.9C13.5,14.5 13.1,14.9 12.5,14.9ZM3.5,14.9C2.9,14.9 2.5,14.5 2.5,13.9C2.5,13.3 2.9,12.9 3.5,12.9C4.1,12.9 4.5,13.3 4.5,13.9C4.5,14.5 4.1,14.9 3.5,14.9ZM2.5,2.2C2.5,1.6 2.9,1.2 3.5,1.2C4.1,1.2 4.5,1.6 4.5,2.2C4.5,2.8 4.1,3.2 3.5,3.2C2.9,3.2 2.5,2.8 2.5,2.2Z"
-        style={{ fill: fill || colors.primary }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
deleted file mode 100644
index c0d4d4609fc..00000000000
--- a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import { translate } from '../../helpers/l10n';
-import { Dict } from '../../types/types';
-import Icon, { IconProps } from './Icon';
-
-const qualifierIcons: Dict<(props: IconProps) => React.ReactElement> = {
-  app: ApplicationIcon,
-  dev: DeveloperIcon,
-  dir: DirectoryIcon,
-  fil: FileIcon,
-  svw: SubPortfolioIcon,
-  trk: ProjectIcon,
-  uts: UnitTestIcon,
-  vw: PortfolioIcon,
-};
-
-interface QualifierIconProps extends IconProps {
-  className?: string;
-  fill?: string;
-  qualifier: string | null | undefined;
-}
-
-export default function QualifierIcon({
-  qualifier,
-  className,
-  fill,
-  ...props
-}: QualifierIconProps) {
-  if (!qualifier) {
-    return null;
-  }
-
-  const FoundIcon = qualifierIcons[qualifier.toLowerCase()];
-  const ariaLabel = qualifier ? translate(`qualifier.${qualifier}`) : undefined;
-  return FoundIcon ? (
-    <FoundIcon className={className} fill={fill} label={ariaLabel} {...props} />
-  ) : null;
-}
-
-function ApplicationIcon({ fill, label: ariaLabel, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps} label={ariaLabel}>
-      <path
-        d="M3.014 10.986a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm-5.004-.021c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zm-4.98 1.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM2.984 6a2 2 0 1 1-.001 4.001A2 2 0 0 1 2.984 6zm9.984 0a2 2 0 1 1-.001 4.001A2 2 0 0 1 12.968 6zm-5.004-.021c1.103 0 2 .897 2 2a2 2 0 1 1-2-2zM2.984 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2zM3 1.025a2 2 0 1 1-.001 4.001A2 2 0 0 1 3 1.025zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zM7.98 1.004c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zM3 2.025a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM7.98 2.004a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2z"
-        style={{ fill: fill || colors.primary }}
-      />
-    </Icon>
-  );
-}
-
-function DeveloperIcon({ fill, label: ariaLabel, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps} label={ariaLabel}>
-      <path
-        d="M7.974 8.02a3.5 3.5 0 0 1-2.482-1.017 3.428 3.428 0 0 1-1.028-2.455c0-.927.365-1.8 1.028-2.455a3.505 3.505 0 0 1 2.482-1.017 3.5 3.5 0 0 1 2.482 1.017 3.434 3.434 0 0 1 1.027 2.455c0 .928-.365 1.8-1.027 2.455A3.504 3.504 0 0 1 7.974 8.02zm0-5.778c-1.286 0-2.332 1.034-2.332 2.306s1.046 2.307 2.332 2.307c1.285 0 2.332-1.035 2.332-2.307S9.258 2.242 7.974 2.242zm3.534 6.418c.127.016.243.045.348.086.17.066.302.146.406.246.132.124.253.282.36.47.126.218.226.442.3.668.08.253.15.535.206.838.056.313.095.604.113.867.02.28.03.57.03.862 0 .532-.174.758-.306.882-.142.132-.397.31-.973.31H3.948c-.233 0-.437-.03-.606-.09-.14-.05-.26-.123-.366-.222-.13-.123-.306-.35-.306-.88 0-.294.01-.584.03-.863.018-.263.056-.554.112-.867a6.5 6.5 0 0 1 .207-.838c.073-.226.173-.45.298-.667.108-.19.23-.347.36-.47.106-.1.238-.18.407-.247.105-.04.22-.07.348-.086.202.13.432.277.683.435.342.217.756.4 1.265.564.523.166 1.06.25 1.59.25a5.25 5.25 0 0 0 1.592-.25c.51-.164.923-.348 1.266-.565.25-.158.48-.304.682-.435l-.002.002zm-.244-1.18c-.055 0-.184.066-.387.196-.202.13-.43.276-.685.437-.255.16-.586.307-.994.437-.408.13-.818.196-1.23.196-.41 0-.82-.065-1.228-.196a4.303 4.303 0 0 1-.993-.437c-.255-.16-.484-.306-.686-.437-.202-.13-.33-.196-.386-.196-.374 0-.716.06-1.026.183-.31.12-.572.283-.787.487a3.28 3.28 0 0 0-.57.737 4.662 4.662 0 0 0-.395.888c-.098.303-.18.633-.244.988a9.652 9.652 0 0 0-.128.992c-.02.306-.032.62-.032.942 0 .73.224 1.304.672 1.726.448.42 1.043.632 1.785.632h8.044c.743 0 1.34-.21 1.787-.633.447-.42.67-.996.67-1.725 0-.32-.01-.635-.03-.942a9.159 9.159 0 0 0-.374-1.98c-.098-.304-.23-.6-.395-.888a3.23 3.23 0 0 0-.57-.737 2.404 2.404 0 0 0-.788-.487 2.779 2.779 0 0 0-1.026-.183h-.004z"
-        style={{ fill: fill || colors.primary }}
-      />
-    </Icon>
-  );
-}
-
-function DirectoryIcon({ fill, label: ariaLabel, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps} label={ariaLabel}>
-      <path
-        d="M14 12.286V5.703a.673.673 0 0 0-.195-.5.644.644 0 0 0-.49-.203H6.704a.686.686 0 0 1-.5-.214.707.707 0 0 1-.203-.51v-.57c0-.2-.07-.363-.207-.502A.679.679 0 0 0 5.29 3H2.707a.672.672 0 0 0-.5.204.683.683 0 0 0-.206.5v8.582c0 .2.07.367.206.506.137.14.304.208.5.208h10.61a.66.66 0 0 0 .49-.208.685.685 0 0 0 .194-.506H14zm1-6.598v6.65c0 .458-.152.83-.475 1.16-.324.326-.7.502-1.15.502H2.647c-.452 0-.84-.175-1.162-.503a1.572 1.572 0 0 1-.486-1.158V3.654a1.6 1.6 0 0 1 .486-1.17A1.578 1.578 0 0 1 2.648 2h2.7c.45 0 .84.157 1.164.485.324.328.488.714.488 1.17V4h6.373c.452 0 .83.174 1.152.5.323.33.475.73.475 1.187v.001z"
-        style={{ fill: fill || colors.orange }}
-      />
-    </Icon>
-  );
-}
-
-function FileIcon({ fill, label: ariaLabel, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps} label={ariaLabel}>
-      <path
-        d="M14 15H2V1l7.997.02c1 .034 1.759.758 2.428 1.42.667.663 1.561 1.605 1.574 2.555H14V15zM9 2H3v12h10V6H9V2zm3 10H4v-1h8v1zm0-2H4V9h8v1zm-1.988-5h3.008c-.012-.674-.714-1.443-1.204-1.937-.488-.495-1.039-1.058-1.816-1.055v2.96l.012.032z"
-        style={{ fill: fill || colors.primary }}
-      />
-    </Icon>
-  );
-}
-
-function PortfolioIcon({ fill, label: ariaLabel, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps} label={ariaLabel}>
-      <path
-        d="M14.97 14.97H1.016V1.015H14.97V14.97zm-1-12.955H2.015V13.97H13.97V2.015zm-.973 10.982H9V9h3.997v3.997zM7 12.996H3.004V9H7v3.996zM11.997 10H10v1.997h1.997V10zM6 10H4.004v1.996H6V10zm1-3H3.006V3.006H7V7zm5.985 0H9V3.015h3.985V7zM6 4.006H4.006V6H6V4.006zm5.985.009H10V6h1.985V4.015z"
-        style={{ fill: fill || colors.primary }}
-      />
-    </Icon>
-  );
-}
-
-function ProjectIcon({ fill, label: ariaLabel, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps} label={ariaLabel}>
-      <path
-        d="M14.985 13.988L1 14.005 1.02 5h13.966v8.988h-.001zM1.998 5.995l.006 7.02L14.022 13 14 6.004l-12.002-.01v.001zM3 4.5V4h9.996l.004.5h1l-.005-1.497-11.98.003L2 4.5h1zm1-2v-.504h8.002L12 2.5h1l-.004-1.495H3.003L3 2.5h1z"
-        style={{ fill: fill || colors.primary }}
-      />
-    </Icon>
-  );
-}
-
-function SubPortfolioIcon({ fill, label: ariaLabel, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps} label={ariaLabel}>
-      <path
-        d="M14 7h2v9H7v-2H0V0h14v7zM8 8v7h7V8H8zm3 6H9v-2h2v2zm3 0h-2v-2h2v2zm-1-7V1H1v12h6V7h6zm-7 5H2V8h4v4zm5-1H9V9h2v2zm3 0h-2V9h2v2zM5 9H3v2h2V9zm1-3H2V2h4v4zm6 0H8V2h4v4zM5 3H3v2h2V3zm6 0H9v2h2V3z"
-        style={{ fill: fill || colors.primary }}
-      />
-    </Icon>
-  );
-}
-
-function UnitTestIcon({ fill, label: ariaLabel, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps} label={ariaLabel}>
-      <path
-        d="M14 15H2V1l7.997.02c1.013-.03 1.57.893 2.239 1.555.667.663 1.75 1.47 1.763 2.42H14V15zM9 2H3v12h10V6H9V2zM7 8l-3 2.5L7 13V8zm1 5l3-2.5L8 8v5zm2.012-8h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96l.012.032z"
-        style={{ fill: fill || colors.primary }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/RecommendedIcon.tsx b/server/sonar-web/src/main/js/components/icons/RecommendedIcon.tsx
deleted file mode 100644
index b568a2a5a90..00000000000
--- a/server/sonar-web/src/main/js/components/icons/RecommendedIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function RecommendedIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M15.089 13.199l-1.742-3.736c-0.962 1.401-2.464 2.398-4.203 2.701l1.459 3.128c0.186 0.4 0.764 0.373 0.914-0.040l0.748-2.054 0.154-0.072 2.054 0.748c0.412 0.151 0.804-0.276 0.618-0.675zM8.040 0.384c-3.003 0-5.446 2.443-5.446 5.446s2.443 5.446 5.446 5.446c3.003 0 5.446-2.443 5.446-5.446s-2.443-5.446-5.446-5.446zM10.689 5.429l-0.966 0.941 0.228 1.33c0.070 0.406-0.358 0.711-0.718 0.522l-1.194-0.628-1.194 0.628c-0.363 0.19-0.788-0.118-0.718-0.522l0.228-1.33-0.966-0.941c-0.293-0.286-0.131-0.786 0.274-0.844l1.335-0.194 0.597-1.209c0.181-0.367 0.707-0.368 0.888 0l0.597 1.209 1.335 0.194c0.405 0.059 0.568 0.558 0.274 0.844zM2.732 9.463l-1.742 3.736c-0.187 0.4 0.208 0.825 0.618 0.674l2.054-0.748 0.154 0.072 0.748 2.054c0.15 0.412 0.727 0.441 0.914 0.040l1.459-3.128c-1.739-0.302-3.241-1.3-4.203-2.701z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/SCMIcon.tsx b/server/sonar-web/src/main/js/components/icons/SCMIcon.tsx
deleted file mode 100644
index df5704f5779..00000000000
--- a/server/sonar-web/src/main/js/components/icons/SCMIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function SCMIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M12.557 4.545c.241.247.443.743.443 1.098v7.714c0 .355-.28.643-.625.643h-8.75A.634.634 0 0 1 3 13.357V2.643C3 2.288 3.28 2 3.625 2h5.833c.345 0 .827.208 1.068.455l2.031 2.09zM9.667 2.91v2.518h2.448a.86.86 0 0 0-.144-.275L9.934 3.058a.823.823 0 0 0-.267-.147zm2.5 10.232V6.286H9.458a.634.634 0 0 1-.625-.643V2.857h-5v10.286h8.334z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/SearchIcon.tsx b/server/sonar-web/src/main/js/components/icons/SearchIcon.tsx
deleted file mode 100644
index 5c1c3d1b4f7..00000000000
--- a/server/sonar-web/src/main/js/components/icons/SearchIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function SearchIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M10.308 7.077c0-.89-.316-1.65-.949-2.283a3.111 3.111 0 0 0-2.282-.948c-.89 0-1.65.316-2.283.948a3.111 3.111 0 0 0-.948 2.283c0 .89.316 1.65.948 2.282a3.111 3.111 0 0 0 2.283.949c.89 0 1.65-.316 2.282-.949a3.111 3.111 0 0 0 .949-2.282zm3.692 6c0 .25-.091.466-.274.649a.887.887 0 0 1-.65.274.857.857 0 0 1-.648-.274L9.954 11.26c-.86.596-1.82.894-2.877.894a4.989 4.989 0 0 1-1.972-.4 5.076 5.076 0 0 1-1.623-1.082A5.076 5.076 0 0 1 2.4 9.049 4.989 4.989 0 0 1 2 7.077c0-.688.133-1.345.4-1.972a5.076 5.076 0 0 1 1.082-1.623A5.076 5.076 0 0 1 5.105 2.4 4.989 4.989 0 0 1 7.077 2c.687 0 1.345.133 1.972.4a5.076 5.076 0 0 1 1.623 1.082c.454.454.815.995 1.082 1.623.266.627.4 1.284.4 1.972a4.938 4.938 0 0 1-.894 2.877l2.473 2.474a.883.883 0 0 1 .267.649z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/SecurityHotspotIcon.tsx b/server/sonar-web/src/main/js/components/icons/SecurityHotspotIcon.tsx
deleted file mode 100644
index f477ba1fe7b..00000000000
--- a/server/sonar-web/src/main/js/components/icons/SecurityHotspotIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function SecurityHotspotIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M14.08 3.23a1 1 0 00-.67-.77L8.16 1a1.06 1.06 0 00-.5 0L2.41 2.46a.94.94 0 00-.67.77c-.08.57-.74 5.63 1.14 8.31A9 9 0 007.68 15a.85.85 0 00.23 0 .78.78 0 00.22 0 8.93 8.93 0 004.81-3.46c1.85-2.68 1.21-7.74 1.14-8.31zM12.21 8a6.15 6.15 0 01-.86 2.42A7.92 7.92 0 018 13V8zM8 3v5H3.59a24.29 24.29 0 010-3.82z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/SettingsIcon.tsx b/server/sonar-web/src/main/js/components/icons/SettingsIcon.tsx
deleted file mode 100644
index 2d284582170..00000000000
--- a/server/sonar-web/src/main/js/components/icons/SettingsIcon.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function SettingsIcon({
-  fill = 'currentColor',
-  size = 14,
-  ...iconProps
-}: IconProps) {
-  return (
-    <Icon size={size} viewBox="0 0 14 14" {...iconProps}>
-      <g transform="matrix(0.0364583,0,0,0.0364583,0,-1.16667)">
-        <path
-          d="M256,224C256,206.333 249.75,191.25 237.25,178.75C224.75,166.25 209.667,160 192,160C174.333,160 159.25,166.25 146.75,178.75C134.25,191.25 128,206.333 128,224C128,241.667 134.25,256.75 146.75,269.25C159.25,281.75 174.333,288 192,288C209.667,288 224.75,281.75 237.25,269.25C249.75,256.75 256,241.667 256,224ZM384,196.75L384,252.25C384,254.25 383.333,256.167 382,258C380.667,259.833 379,260.917 377,261.25L330.75,268.25C327.583,277.25 324.333,284.833 321,291C326.833,299.333 335.75,310.833 347.75,325.5C349.417,327.5 350.25,329.583 350.25,331.75C350.25,333.917 349.5,335.833 348,337.5C343.5,343.667 335.25,352.667 323.25,364.5C311.25,376.333 303.417,382.25 299.75,382.25C297.75,382.25 295.583,381.5 293.25,380L258.75,353C251.417,356.833 243.833,360 236,362.5C233.333,385.167 230.917,400.667 228.75,409C227.583,413.667 224.583,416 219.75,416L164.25,416C161.917,416 159.875,415.292 158.125,413.875C156.375,412.458 155.417,410.667 155.25,408.5L148.25,362.5C140.083,359.833 132.583,356.75 125.75,353.25L90.5,380C88.833,381.5 86.75,382.25 84.25,382.25C81.917,382.25 79.833,381.333 78,379.5C57,360.5 43.25,346.5 36.75,337.5C35.583,335.833 35,333.917 35,331.75C35,329.75 35.667,327.833 37,326C39.5,322.5 43.75,316.958 49.75,309.375C55.75,301.792 60.25,295.917 63.25,291.75C58.75,283.417 55.333,275.167 53,267L7.25,260.25C5.083,259.917 3.333,258.875 2,257.125C0.667,255.375 0,253.417 0,251.25L0,195.75C0,193.75 0.667,191.833 2,190C3.333,188.167 4.917,187.083 6.75,186.75L53.25,179.75C55.583,172.083 58.833,164.417 63,156.75C56.333,147.25 47.417,135.75 36.25,122.25C34.583,120.25 33.75,118.25 33.75,116.25C33.75,114.583 34.5,112.667 36,110.5C40.333,104.5 48.542,95.542 60.625,83.625C72.708,71.708 80.583,65.75 84.25,65.75C86.417,65.75 88.583,66.583 90.75,68.25L125.25,95C132.583,91.167 140.167,88 148,85.5C150.667,62.833 153.083,47.333 155.25,39C156.417,34.333 159.417,32 164.25,32L219.75,32C222.083,32 224.125,32.708 225.875,34.125C227.625,35.542 228.583,37.333 228.75,39.5L235.75,85.5C243.917,88.167 251.417,91.25 258.25,94.75L293.75,68C295.25,66.5 297.25,65.75 299.75,65.75C301.917,65.75 304,66.583 306,68.25C327.5,88.083 341.25,102.25 347.25,110.75C348.417,112.083 349,113.917 349,116.25C349,118.25 348.333,120.167 347,122C344.5,125.5 340.25,131.042 334.25,138.625C328.25,146.208 323.75,152.083 320.75,156.25C325.083,164.583 328.5,172.75 331,180.75L376.75,187.75C378.917,188.083 380.667,189.125 382,190.875C383.333,192.625 384,194.583 384,196.75Z"
-          style={{ fill }}
-        />
-      </g>
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx b/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx
deleted file mode 100644
index db88947efb2..00000000000
--- a/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import { translate } from '../../helpers/l10n';
-import { Dict } from '../../types/types';
-import Icon, { IconProps } from './Icon';
-
-interface Props extends IconProps {
-  severity: string | null | undefined;
-}
-
-const severityIcons: Dict<(props: IconProps) => React.ReactElement> = {
-  blocker: BlockerSeverityIcon,
-  critical: CriticalSeverityIcon,
-  major: MajorSeverityIcon,
-  minor: MinorSeverityIcon,
-  info: InfoSeverityIcon,
-};
-
-export default function SeverityIcon({ severity, ...iconProps }: Omit<Props, 'label'>) {
-  if (!severity) {
-    return null;
-  }
-
-  const DesiredIcon = severityIcons[severity.toLowerCase()];
-  return DesiredIcon ? (
-    <DesiredIcon {...iconProps} label={translate('severity', severity)} />
-  ) : null;
-}
-
-function BlockerSeverityIcon(iconProps: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M8 14c-3.311 0-6-2.689-6-6s2.689-6 6-6 6 2.689 6 6-2.689 6-6 6zM7 9h2V4H7v5zm0 3h2v-2H7v2z"
-        style={{ fill: iconProps.fill ?? colors.red, fillRule: 'nonzero' }}
-      />
-    </Icon>
-  );
-}
-
-function CriticalSeverityIcon(iconProps: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 10V7.414l1.893 1.893c.13.124.282.216.457.261a1.006 1.006 0 0 0 1.176-.591 1.01 1.01 0 0 0 .01-.729 1.052 1.052 0 0 0-.229-.355c-1.212-1.212-2.394-2.456-3.638-3.636a1.073 1.073 0 0 0-.169-.123 1.05 1.05 0 0 0-.448-.133h-.104a1.053 1.053 0 0 0-.493.16 1.212 1.212 0 0 0-.162.132C6.08 5.505 4.836 6.687 3.656 7.932a.994.994 0 0 0-.051 1.275c.208.271.548.42.888.389.198-.019.378-.098.535-.218.041-.035.04-.034.079-.071L7 7.414V12h2z"
-        style={{ fill: iconProps.fill ?? colors.red, fillRule: 'nonzero' }}
-      />
-    </Icon>
-  );
-}
-
-function MajorSeverityIcon(iconProps: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm.08 2.903c.071.008.14.019.208.039.138.042.26.114.37.205 1.244 1.146 2.426 2.357 3.639 3.536.1.103.181.218.234.352a1.01 1.01 0 0 1 .001.728 1.002 1.002 0 0 1-1.169.609 1.042 1.042 0 0 1-.46-.255L8 7.295l-2.903 2.822c-.039.036-.039.036-.08.07a1.002 1.002 0 0 1-1.604-.947c.032-.196.122-.37.253-.519C4.847 7.51 6.09 6.362 7.303 5.183c.052-.048.106-.093.167-.131a1.041 1.041 0 0 1 .61-.149z"
-        style={{ fill: iconProps.fill ?? colors.red }}
-      />
-    </Icon>
-  );
-}
-
-function MinorSeverityIcon(iconProps: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 6.586V4H7v4.586L5.107 6.693a1.178 1.178 0 0 0-.165-.134 1.041 1.041 0 0 0-.662-.152 1 1 0 0 0-.587 1.7c1.212 1.212 2.394 2.456 3.638 3.636.094.08.195.146.311.191a1.008 1.008 0 0 0 1.065-.227c1.213-1.212 2.457-2.394 3.637-3.639a.994.994 0 0 0 .051-1.275 1.012 1.012 0 0 0-.888-.389 1.041 1.041 0 0 0-.535.218c-.04.034-.04.034-.079.071L9 8.586z"
-        style={{ fill: iconProps.fill ?? colors.green }}
-      />
-    </Icon>
-  );
-}
-
-function InfoSeverityIcon(iconProps: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 5H7v5h2V7zm0-3H7v2h2V4z"
-        style={{ fill: iconProps.fill ?? colors.darkBlue }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/TagsIcon.tsx b/server/sonar-web/src/main/js/components/icons/TagsIcon.tsx
deleted file mode 100644
index 889c0faa610..00000000000
--- a/server/sonar-web/src/main/js/components/icons/TagsIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function TagsIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M4.303 5.36a.94.94 0 0 0-.944-.945.94.94 0 0 0-.944.944c0 .524.42.944.944.944a.94.94 0 0 0 .944-.944zm7.866 4.246a.95.95 0 0 1-.273.663l-3.62 3.627a.95.95 0 0 1-1.334 0L1.671 8.618C1.295 8.249 1 7.534 1 7.01V3.944A.95.95 0 0 1 1.944 3H5.01c.523 0 1.238.295 1.614.67l5.271 5.265a.98.98 0 0 1 .273.67zm2.831 0a.95.95 0 0 1-.273.663l-3.62 3.627a.98.98 0 0 1-.67.273c-.384 0-.575-.177-.826-.435l3.465-3.465a.95.95 0 0 0 0-1.334L7.805 3.67C7.429 3.295 6.714 3 6.19 3h1.651c.524 0 1.239.295 1.615.67l5.271 5.265a.98.98 0 0 1 .273.67z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/VulnerabilityIcon.tsx b/server/sonar-web/src/main/js/components/icons/VulnerabilityIcon.tsx
deleted file mode 100644
index 2699cc74d9a..00000000000
--- a/server/sonar-web/src/main/js/components/icons/VulnerabilityIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function VulnerabilityIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M12,7.05H6V5a2,2,0,1,1,4,0,1,1,0,0,0,2,0A4,4,0,1,0,4,5V7.06A1.12,1.12,0,0,0,3,8.17V14a1.12,1.12,0,0,0,1.12,1.12H12A1.12,1.12,0,0,0,13.1,14V8.17A1.12,1.12,0,0,0,12,7.05ZM8,13a2,2,0,1,1,2-2A2,2,0,0,1,8,13Z"
-        style={{ fill }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/WarningIcon.tsx b/server/sonar-web/src/main/js/components/icons/WarningIcon.tsx
deleted file mode 100644
index 73d1054ecaa..00000000000
--- a/server/sonar-web/src/main/js/components/icons/WarningIcon.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { colors } from '../../app/theme';
-import Icon, { IconProps } from './Icon';
-
-export default function WarningIcon({ fill, ...iconProps }: IconProps) {
-  return (
-    <Icon {...iconProps}>
-      <path
-        d="M9 12.242v-1.484c0-.14-.11-.258-.25-.258h-1.5c-.14 0-.25.117-.25.258v1.484c0 .14.11.258.25.258h1.5c.14 0 .25-.117.25-.258zM8.984 9.32l.141-3.586a.189.189 0 0 0-.078-.148C9 5.546 8.93 5.5 8.859 5.5H7.141c-.07 0-.141.047-.188.086-.055.039-.078.117-.078.164l.133 3.57c0 .102.117.18.265.18H8.72c.14 0 .258-.078.265-.18zm-.109-7.297l6 11A1 1 0 0 1 14 14.5H2a1 1 0 0 1-.875-1.477l6-11a.994.994 0 0 1 1.75 0z"
-        style={{ fill: fill || colors.warningIconColor }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/__tests__/Icon-test.tsx b/server/sonar-web/src/main/js/components/icons/__tests__/Icon-test.tsx
deleted file mode 100644
index 7838fccda28..00000000000
--- a/server/sonar-web/src/main/js/components/icons/__tests__/Icon-test.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { render } from '@testing-library/react';
-import * as React from 'react';
-import Icon, { IconProps } from '../Icon';
-
-it('should render correctly', () => {
-  renderIcon();
-  expect(document.body.innerHTML).toMatchSnapshot();
-});
-
-function renderIcon(props: Partial<IconProps> = {}) {
-  return render(
-    <Icon {...props}>
-      <path d="test-path" />
-    </Icon>,
-  );
-}
diff --git a/server/sonar-web/src/main/js/components/icons/__tests__/__snapshots__/Icon-test.tsx.snap b/server/sonar-web/src/main/js/components/icons/__tests__/__snapshots__/Icon-test.tsx.snap
deleted file mode 100644
index 8ce95580571..00000000000
--- a/server/sonar-web/src/main/js/components/icons/__tests__/__snapshots__/Icon-test.tsx.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `"<div><svg height="16" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 1.41421;" version="1.1" viewBox="0 0 16 16" width="16" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><path d="test-path"></path></svg></div>"`;
diff --git a/server/sonar-web/src/main/js/components/issue/components/SonarLintBadge.tsx b/server/sonar-web/src/main/js/components/issue/components/SonarLintBadge.tsx
index 6641a8d47f7..ae18f700477 100644
--- a/server/sonar-web/src/main/js/components/issue/components/SonarLintBadge.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/SonarLintBadge.tsx
@@ -17,13 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { HoverLink } from 'design-system';
+import { LinkHighlight, LinkStandalone } from '@sonarsource/echoes-react';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { translate } from '../../../helpers/l10n';
 import Link from '../../common/Link';
 import Tooltip from '../../controls/Tooltip';
-import SonarLintIcon from '../../icons/SonarLintIcon';
+import { SonarLintLogo } from '../../logos/SonarLintLogo';
 
 const SONARLINT_URL =
   'https://www.sonarsource.com/products/sonarlint/features/connected-mode/?referrer=sonarqube-quick-fix';
@@ -42,14 +42,22 @@ function SonarLintBadgeFull() {
       overlay={translate('issue.quick_fix_available_with_sonarlint_no_link')}
       mouseLeaveDelay={0.5}
     >
-      <HoverLink to={SONARLINT_URL} className="sw-flex sw-items-center" isExternal showExternalIcon>
-        <SonarLintIcon
-          className="it__issues-sonarlint-quick-fix"
-          size={20}
-          description={translate('issue.quick_fix_available_with_sonarlint_no_link')}
-        />
-        <span className="sw-ml-1">{translate('issue.quick_fix')}</span>
-      </HoverLink>
+      <LinkStandalone
+        highlight={LinkHighlight.Default}
+        iconLeft={
+          <SonarLintLogo
+            className="it__issues-sonarlint-quick-fix"
+            size={20}
+            description={translate('issue.quick_fix_available_with_sonarlint_no_link')}
+          />
+        }
+        to={SONARLINT_URL}
+        className="sw-flex sw-items-center"
+        isExternal
+        hasExternalIcon
+      >
+        {translate('issue.quick_fix')}
+      </LinkStandalone>
     </Tooltip>
   );
 }
@@ -73,7 +81,7 @@ function SonarLintBadgeCompact() {
       mouseLeaveDelay={0.5}
     >
       <div className="sw-flex sw-items-center">
-        <SonarLintIcon
+        <SonarLintLogo
           className="it__issues-sonarlint-quick-fix"
           size={15}
           description={translate('issue.quick_fix_available_with_sonarlint_no_link')}
diff --git a/server/sonar-web/src/main/js/components/icons/SonarLintIcon.tsx b/server/sonar-web/src/main/js/components/logos/SonarLintLogo.tsx
index 4e4503da2cf..b8949c702f0 100644
--- a/server/sonar-web/src/main/js/components/icons/SonarLintIcon.tsx
+++ b/server/sonar-web/src/main/js/components/logos/SonarLintLogo.tsx
@@ -17,12 +17,36 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { uniqueId } from 'lodash';
 import * as React from 'react';
-import Icon, { IconProps } from './Icon';
+import { isDefined } from '../../helpers/types';
 
-export default function SonarLintIcon(props: IconProps) {
+interface Props {
+  className?: string;
+  size?: number;
+  description?: React.ReactNode;
+}
+
+export function SonarLintLogo({ className, description, size }: Readonly<Props>) {
+  const id = uniqueId('icon');
   return (
-    <Icon {...props} viewBox="0 0 512 512">
+    <svg
+      className={className}
+      height={size}
+      style={{
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        strokeLinejoin: 'round',
+        strokeMiterlimit: 1.41421,
+      }}
+      version="1.1"
+      viewBox="0 0 512 512"
+      width={size}
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      xmlSpace="preserve"
+      aria-describedby={isDefined(description) && description !== '' ? id : undefined}
+    >
+      {isDefined(description) && description !== '' && <desc id={id}>{description}</desc>}
       <defs>
         <path id="a" d="M0 0h512v512H0z" />
       </defs>
@@ -37,6 +61,6 @@ export default function SonarLintIcon(props: IconProps) {
         d="M392.6 244.9c-5.1-10.2-11.5-23-24.1-23-12.5 0-18.9 12.7-24.1 23-4.8 9.5-7.5 14.5-13.5 14.5s-8.7-5-13.5-14.5c-5.1-10.2-11.5-23-24.1-23s-18.9 12.7-24.1 23c-4.8 9.5-7.5 14.5-13.5 14.5s-8.7-5-13.5-14.5c-5.1-10.2-11.5-23-24.1-23s-18.9 12.7-24.1 23c-4.8 9.5-7.5 14.5-13.5 14.5s-8.7-5-13.5-14.5c-5.1-10.2-11.5-23-24.1-23-12.5 0-18.9 12.1-24 22.3 0 0-3.9 8.7-5.6 12.8-1.7 4.1-8.3 19.7-2.3 27.2 3.4 4.2 8.3-1.8 11.1-6.2 2.1-3.4 7.1-13.2 7.1-13.2 5.1-9.1 7.8-14 13.7-14 6 0 8.7 5 13.5 14.5 5.1 10.2 11.5 23 24.1 23 12.5 0 18.9-12.7 24.1-23 4.8-9.5 7.5-14.5 13.5-14.5s8.7 5 13.5 14.5c5.1 10.2 11.5 23 24.1 23 12.5 0 18.9-12.7 24.1-23 4.8-9.5 7.5-14.5 13.5-14.5s8.7 5 13.5 14.5c5.1 10.2 11.5 23 24.1 23s18.9-12.7 24.1-23c4.8-9.5 7.5-14.5 13.5-14.5s8.7 5 13.5 14.5c0 0 2.2 4.3 5.4 9.9 1.4 2.3 6.6 11.1 11.2 10.8 4.1-.3 5.6-13.3 1-24.7-3.1-7.6-7-16.4-7-16.4z"
         style={{ fill: '#cb2029' }}
       />
-    </Icon>
+    </svg>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/permissions/GroupHolder.tsx b/server/sonar-web/src/main/js/components/permissions/GroupHolder.tsx
index d2a1a874c6a..a1a7d38d5ad 100644
--- a/server/sonar-web/src/main/js/components/permissions/GroupHolder.tsx
+++ b/server/sonar-web/src/main/js/components/permissions/GroupHolder.tsx
@@ -17,14 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { Badge, ContentCell, TableRowInteractive } from 'design-system';
+import { Badge, ContentCell, TableRowInteractive, UserGroupIcon } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { isPermissionDefinitionGroup } from '../../helpers/permissions';
 import { getBaseUrl } from '../../helpers/system';
 import { Permissions } from '../../types/permissions';
 import { PermissionDefinitions, PermissionGroup } from '../../types/types';
-import GroupIcon from '../icons/GroupIcon';
 import PermissionCell from './PermissionCell';
 import usePermissionChange from './usePermissionChange';
 
@@ -57,7 +56,7 @@ export default function GroupHolder(props: Props) {
     <TableRowInteractive>
       <ContentCell>
         <div className="sw-flex sw-items-center">
-          <GroupIcon className="sw-mr-4" />
+          <UserGroupIcon className="sw-mr-4" />
           <div className="sw-max-w-abs-800">
             <div className="sw-flex sw-w-fit sw-max-w-full">
               <div className="sw-flex-1 sw-text-ellipsis sw-whitespace-nowrap sw-overflow-hidden  sw-min-w-0">
diff --git a/server/sonar-web/src/main/js/components/shared/SeverityHelper.tsx b/server/sonar-web/src/main/js/components/shared/SeverityHelper.tsx
index 4074502f740..01f55e11098 100644
--- a/server/sonar-web/src/main/js/components/shared/SeverityHelper.tsx
+++ b/server/sonar-web/src/main/js/components/shared/SeverityHelper.tsx
@@ -17,23 +17,23 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { isEmpty } from 'lodash';
 import * as React from 'react';
-import SeverityIcon from '../../components/icons/SeverityIcon';
 import { translate } from '../../helpers/l10n';
+import SeverityIcon from '../icon-mappers/SeverityIcon';
 
 interface Props {
   className?: string;
-  fill?: string;
   severity: string;
 }
 
-export default function SeverityHelper({ className, severity, fill }: Props) {
-  if (!severity) {
+export default function SeverityHelper({ className, severity }: Readonly<Props>) {
+  if (isEmpty(severity)) {
     return null;
   }
   return (
     <span className={className}>
-      <SeverityIcon className="sw-mr-1" fill={fill} severity={severity} aria-hidden />
+      <SeverityIcon className="sw-mr-1" severity={severity} aria-hidden />
       {translate('severity', severity)}
     </span>
   );
diff --git a/server/sonar-web/src/main/js/components/shared/SoftwareImpactPill.tsx b/server/sonar-web/src/main/js/components/shared/SoftwareImpactPill.tsx
index 04bc3626ef1..d4dca929885 100644
--- a/server/sonar-web/src/main/js/components/shared/SoftwareImpactPill.tsx
+++ b/server/sonar-web/src/main/js/components/shared/SoftwareImpactPill.tsx
@@ -24,7 +24,7 @@ import { FormattedMessage } from 'react-intl';
 import { translate } from '../../helpers/l10n';
 import { SoftwareImpactSeverity } from '../../types/clean-code-taxonomy';
 import DocumentationTooltip from '../common/DocumentationTooltip';
-import SoftwareImpactSeverityIcon from '../icons/SoftwareImpactSeverityIcon';
+import SoftwareImpactSeverityIcon from '../icon-mappers/SoftwareImpactSeverityIcon';
 
 export interface Props {
   className?: string;
diff --git a/server/sonar-web/src/main/js/components/shared/StatusHelper.tsx b/server/sonar-web/src/main/js/components/shared/StatusHelper.tsx
index 35c13b6905d..d1ac8b4f964 100644
--- a/server/sonar-web/src/main/js/components/shared/StatusHelper.tsx
+++ b/server/sonar-web/src/main/js/components/shared/StatusHelper.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { IssueStatus } from '../../types/issues';
-import IssueStatusIcon from '../icons/IssueStatusIcon';
+import IssueStatusIcon from '../icon-mappers/IssueStatusIcon';
 
 interface Props {
   className?: string;
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentTitle.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentTitle.tsx
index 7222ffafd16..c81a9328d26 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentTitle.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentTitle.tsx
@@ -18,8 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import QualifierIcon from '../../components/icons/QualifierIcon';
+
+import { QualifierIcon } from 'design-system';
+import { translate } from '../../helpers/l10n';
 import { collapsePath } from '../../helpers/path';
+import { isDefined } from '../../helpers/types';
 import { ComponentDescriptor } from './context';
 
 interface Props {
@@ -31,8 +34,12 @@ export default function WorkspaceComponentTitle({ component, limited }: Props) {
   const { name = '—' } = component;
   return (
     <>
-      {component.qualifier && (
-        <QualifierIcon className="little-spacer-right" qualifier={component.qualifier} />
+      {isDefined(component.qualifier) && (
+        <QualifierIcon
+          aria-label={translate('qualifier', component.qualifier)}
+          className="sw-mr-1"
+          qualifier={component.qualifier}
+        />
       )}
       {limited ? collapsePath(name, 15) : name}
     </>
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
index f4f9f5bb0a4..69b10941cca 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
@@ -17,13 +17,18 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { IconProps, InteractiveIcon } from 'design-system';
+import styled from '@emotion/styled';
+import {
+  CloseIcon,
+  CollapseIcon,
+  ExpandIcon,
+  IconProps,
+  InteractiveIcon,
+  MinimizeIcon,
+  themeColor,
+} from 'design-system';
 import * as React from 'react';
 import { DraggableCore, DraggableData } from 'react-draggable';
-import ClearIcon from '../../components/icons/ClearIcon';
-import CollapseIcon from '../../components/icons/CollapseIcon';
-import ExpandIcon from '../../components/icons/ExpandIcon';
-import MinimizeIcon from '../../components/icons/MinimizeIcon';
 import { translate } from '../../helpers/l10n';
 import Tooltip from '../controls/Tooltip';
 
@@ -44,14 +49,16 @@ export default class WorkspaceHeader extends React.PureComponent<Props> {
 
   render() {
     return (
-      <header className="workspace-viewer-header">
-        <h6 className="workspace-viewer-name">{this.props.children}</h6>
+      <StyledWorkSpaceHeader>
+        <StyledWorkspaceName className="sw-body-sm sw-inline-flex sw-items-center">
+          {this.props.children}
+        </StyledWorkspaceName>
 
         <DraggableCore offsetParent={document.body} onDrag={this.handleDrag}>
-          <div className="workspace-viewer-resize js-resize" />
+          <StyledWorkspaceResizer />
         </DraggableCore>
 
-        <div className="workspace-viewer-actions">
+        <div className="it__workspace-viewer-actions sw-flex sw-gap-1">
           <WorkspaceHeaderButton
             icon={MinimizeIcon}
             onClick={this.props.onCollapse}
@@ -73,27 +80,57 @@ export default class WorkspaceHeader extends React.PureComponent<Props> {
           )}
 
           <WorkspaceHeaderButton
-            icon={ClearIcon}
+            icon={CloseIcon}
             onClick={this.props.onClose}
             tooltipContent="workspace.close"
           />
         </div>
-      </header>
+      </StyledWorkSpaceHeader>
     );
   }
 }
 
+const StyledWorkSpaceHeader = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  height: 1.875rem;
+  padding: 3px 10px;
+  font-weight: 300;
+  background-color: ${themeColor('workSpaceNavItemBackground')};
+  color: ${themeColor('workSpaceNavItem')};
+`;
+
+const StyledWorkspaceName = styled.h6`
+  color: ${themeColor('workSpaceNavItem')};
+`;
+
+const StyledWorkspaceResizer = styled.div`
+  position: absolute;
+  top: 3px;
+  left: 50%;
+  width: 30px;
+  height: 5px;
+  margin-left: -15px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSI1cHgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxLjQxNDIxOyI+PGc+PGcgaWQ9IkxheWVyMSI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLDApIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBzdHlsZT0iZmlsbDojNzc3O2ZpbGwtb3BhY2l0eTowLjU7Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsNCwwKSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgc3R5bGU9ImZpbGw6Izc3NztmaWxsLW9wYWNpdHk6MC41OyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDgsMCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiM3Nzc7ZmlsbC1vcGFjaXR5OjAuNTsiLz48L2c+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwxMiwwKSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgc3R5bGU9ImZpbGw6Izc3NztmaWxsLW9wYWNpdHk6MC41OyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDE2LDApIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBzdHlsZT0iZmlsbDojNzc3O2ZpbGwtb3BhY2l0eTowLjU7Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMjAsMCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiM3Nzc7ZmlsbC1vcGFjaXR5OjAuNTsiLz48L2c+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwyNCwwKSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgc3R5bGU9ImZpbGw6Izc3NztmaWxsLW9wYWNpdHk6MC41OyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDI4LDApIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBzdHlsZT0iZmlsbDojNzc3O2ZpbGwtb3BhY2l0eTowLjU7Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwzKSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgc3R5bGU9ImZpbGw6Izc3NztmaWxsLW9wYWNpdHk6MC41OyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDQsMykiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiM3Nzc7ZmlsbC1vcGFjaXR5OjAuNTsiLz48L2c+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSw4LDMpIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBzdHlsZT0iZmlsbDojNzc3O2ZpbGwtb3BhY2l0eTowLjU7Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMTIsMykiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiM3Nzc7ZmlsbC1vcGFjaXR5OjAuNTsiLz48L2c+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwxNiwzKSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgc3R5bGU9ImZpbGw6Izc3NztmaWxsLW9wYWNpdHk6MC41OyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDIwLDMpIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBzdHlsZT0iZmlsbDojNzc3O2ZpbGwtb3BhY2l0eTowLjU7Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMjQsMykiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiM3Nzc7ZmlsbC1vcGFjaXR5OjAuNTsiLz48L2c+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwyOCwzKSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgc3R5bGU9ImZpbGw6Izc3NztmaWxsLW9wYWNpdHk6MC41OyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsMCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiM3Nzc7ZmlsbC1vcGFjaXR5OjAuNTsiLz48L2c+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSw0LDApIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBzdHlsZT0iZmlsbDojNzc3O2ZpbGwtb3BhY2l0eTowLjU7Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsOCwwKSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgc3R5bGU9ImZpbGw6Izc3NztmaWxsLW9wYWNpdHk6MC41OyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDEyLDApIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBzdHlsZT0iZmlsbDojNzc3O2ZpbGwtb3BhY2l0eTowLjU7Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMTYsMCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiM3Nzc7ZmlsbC1vcGFjaXR5OjAuNTsiLz48L2c+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwyMCwwKSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgc3R5bGU9ImZpbGw6Izc3NztmaWxsLW9wYWNpdHk6MC41OyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDI0LDApIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBzdHlsZT0iZmlsbDojNzc3O2ZpbGwtb3BhY2l0eTowLjU7Ii8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMjgsMCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiM3Nzc7ZmlsbC1vcGFjaXR5OjAuNTsiLz48L2c+PC9nPjwvZz48L3N2Zz4=);
+  cursor: ns-resize;
+`;
+
 interface WorkspaceHeaderButtonProps {
   icon: React.ComponentType<React.PropsWithChildren<IconProps>>;
   onClick: () => void;
   tooltipContent: string;
 }
 
-function WorkspaceHeaderButton({ icon, onClick, tooltipContent }: WorkspaceHeaderButtonProps) {
+function WorkspaceHeaderButton({
+  icon,
+  onClick,
+  tooltipContent,
+}: Readonly<WorkspaceHeaderButtonProps>) {
   return (
     <Tooltip overlay={translate(tooltipContent)}>
       <InteractiveIcon
-        className="workspace-header-icon"
         aria-label={translate(tooltipContent)}
         Icon={icon}
         currentColor
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx
index 3ca507b9cc3..97ea88c06c0 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx
@@ -17,9 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import styled from '@emotion/styled';
 import * as React from 'react';
-import { ComponentDescriptor } from './context';
 import WorkspaceNavComponent from './WorkspaceNavComponent';
+import { ComponentDescriptor } from './context';
 
 export interface Props {
   components: ComponentDescriptor[];
@@ -33,8 +34,8 @@ export default function WorkspaceNav(props: Props) {
   const components = props.components.filter((x) => x.key !== props.open.component);
 
   return (
-    <nav className="workspace-nav">
-      <ul className="workspace-nav-list">
+    <WorkspaceNavStyled>
+      <ul className="sw-float-right">
         {components.map((component) => (
           <WorkspaceNavComponent
             component={component}
@@ -44,6 +45,14 @@ export default function WorkspaceNav(props: Props) {
           />
         ))}
       </ul>
-    </nav>
+    </WorkspaceNavStyled>
   );
 }
+
+const WorkspaceNavStyled = styled.nav`
+  position: fixed;
+  z-index: 451;
+  bottom: 0;
+  right: 0;
+  height: 1.75rem;
+`;
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx
index d687959befc..6448a4b30a5 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { CloseIcon, InteractiveIcon } from 'design-system';
+import { CloseIcon, InteractiveIcon, themeColor } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 
@@ -29,7 +29,7 @@ export interface Props {
 }
 
 export default class WorkspaceNavItem extends React.PureComponent<Props> {
-  handleNameClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+  handleNameClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     event.currentTarget.blur();
     this.props.onOpen();
@@ -37,16 +37,19 @@ export default class WorkspaceNavItem extends React.PureComponent<Props> {
 
   render() {
     return (
-      <StyledWorkspaceNavItem className="workspace-nav-item">
-        <a className="workspace-nav-item-link" href="#" onClick={this.handleNameClick}>
+      <StyledWorkspaceNavItem className="sw-mr-2">
+        <StyledWorkSpaceNavItemButton
+          className="sw-body-sm sw-pr-8 sw-pl-2"
+          onClick={this.handleNameClick}
+        >
           {this.props.children}
-        </a>
+        </StyledWorkSpaceNavItemButton>
         <InteractiveIcon
-          aria-label={translate('close')}
-          className="js-close sw-ml-1 sw-absolute sw-right-1 sw-top-1"
-          onClick={this.props.onClose}
+          aria-label={translate('workspace.close')}
+          className="js-close sw-absolute sw-top-0 sw-right-0 sw-m-1/2"
           currentColor
           Icon={CloseIcon}
+          onClick={this.props.onClose}
           size="small"
         />
       </StyledWorkspaceNavItem>
@@ -55,5 +58,23 @@ export default class WorkspaceNavItem extends React.PureComponent<Props> {
 }
 
 const StyledWorkspaceNavItem = styled.li`
-  color: white;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  color: ${themeColor('workSpaceNavItem')};
+`;
+
+const StyledWorkSpaceNavItemButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  height: 1.75rem;
+  background-color: ${themeColor('workSpaceNavItemBackground')};
+  color: ${themeColor('workSpaceNavItem')};
+
+  &:hover,
+  &:focus {
+    color: ${themeColor('workSpaceNavItem')};
+    opacity: 0.9;
+  }
 `;
diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/Workspace-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/Workspace-test.tsx
index 11334f948d0..12e7f9eadbe 100644
--- a/server/sonar-web/src/main/js/components/workspace/__tests__/Workspace-test.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/__tests__/Workspace-test.tsx
@@ -136,12 +136,12 @@ it('should be resizable', async () => {
 
   expect(ui.workspaceViewerContainer.query()).not.toBeInTheDocument();
 
-  const fileLink = byRole('link', { name: 'qualifier.FIL path/to/component/k1' });
-  expect(fileLink.get()).toBeInTheDocument();
-  await user.click(fileLink.get());
+  const fileButton = byRole('button', { name: 'qualifier.FIL path/to/component/k1' });
+  expect(fileButton.get()).toBeInTheDocument();
+  await user.click(fileButton.get());
 
   await user.click(ui.closeButton.get());
-  expect(fileLink.query()).not.toBeInTheDocument();
+  expect(fileButton.query()).not.toBeInTheDocument();
 });
 
 function renderWorkspace(componentKey = 'k1', branchLike?: BranchLike) {
diff --git a/server/sonar-web/src/main/js/components/workspace/styles.css b/server/sonar-web/src/main/js/components/workspace/styles.css
index 605293dc8d1..5b8a02ddf83 100644
--- a/server/sonar-web/src/main/js/components/workspace/styles.css
+++ b/server/sonar-web/src/main/js/components/workspace/styles.css
@@ -17,48 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-.workspace-nav {
-  position: fixed;
-  z-index: 451;
-  bottom: 0;
-  right: 0;
-  height: 28px;
-}
-
-.workspace-nav-list {
-  float: right;
-}
-
-.workspace-nav-item {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  margin-right: var(--gridSize);
-}
-
-.workspace-nav-item-link {
-  display: inline-flex;
-  align-items: center;
-  height: 28px;
-  padding: 0 calc(3.5 * var(--gridSize)) 0 var(--gridSize);
-  border: none;
-  background-color: var(--gray40);
-  color: #fff;
-  font-size: var(--smallFontSize);
-}
-
-.workspace-nav-item-link:hover,
-.workspace-nav-item-link:focus {
-  color: #fff;
-  opacity: 0.9;
-}
-
-.workspace-nav-item-close {
-  position: absolute;
-  right: 4px;
-  top: 4px;
-}
-
 .workspace-viewer {
   position: fixed;
   z-index: 450;
@@ -70,27 +28,6 @@
   box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175);
 }
 
-.workspace-viewer-header {
-  position: relative;
-  height: 30px;
-  padding: 3px 10px;
-  box-sizing: border-box;
-  background-color: var(--gray40);
-  color: #fff;
-  font-weight: 300;
-}
-
-.workspace-viewer-name {
-  float: left;
-  line-height: var(--controlHeight);
-  color: #fff;
-  font-weight: 400;
-}
-
-.workspace-viewer-name i {
-  margin-top: 3px;
-}
-
 .workspace-viewer-resize {
   position: absolute;
   top: 3px;
@@ -102,19 +39,6 @@
   cursor: ns-resize;
 }
 
-.workspace-viewer-actions {
-  float: right;
-}
-
-.workspace-viewer-actions a {
-  color: inherit;
-}
-
-.workspace-header-icon:hover path,
-.workspace-header-icon:focus path {
-  color: var(--gray40);
-}
-
 .workspace-viewer-container {
   height: calc(40vh - 30px);
   min-height: 100px;