From 5291e087c19693dc7b9d9e421403e324e4f02780 Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Date: Wed, 10 Apr 2024 18:10:28 +0200
Subject: [PATCH] SONAR-21973 Add deprecation notices on all MIUI icons that
 now have an Echoes replacement

---
 .../design-system/src/components/icons/AddNewIcon.tsx    | 7 +++++++
 .../design-system/src/components/icons/BranchIcon.tsx    | 7 +++++++
 .../design-system/src/components/icons/BugIcon.tsx       | 7 +++++++
 .../design-system/src/components/icons/CalendarIcon.tsx  | 7 +++++++
 .../design-system/src/components/icons/CheckIcon.tsx     | 7 +++++++
 .../src/components/icons/ChevronDownIcon.tsx             | 7 +++++++
 .../design-system/src/components/icons/ClockIcon.tsx     | 7 +++++++
 .../design-system/src/components/icons/CloseIcon.tsx     | 7 +++++++
 .../design-system/src/components/icons/CodeSmellIcon.tsx | 7 +++++++
 .../design-system/src/components/icons/CollapseIcon.tsx  | 7 +++++++
 .../design-system/src/components/icons/CommentIcon.tsx   | 7 +++++++
 .../design-system/src/components/icons/CopyIcon.tsx      | 7 +++++++
 .../design-system/src/components/icons/DirectoryIcon.tsx | 7 +++++++
 .../design-system/src/components/icons/DotFillIcon.tsx   | 6 ++++++
 .../design-system/src/components/icons/ExpandIcon.tsx    | 7 +++++++
 .../design-system/src/components/icons/FileIcon.tsx      | 7 +++++++
 .../design-system/src/components/icons/FilterIcon.tsx    | 7 +++++++
 .../design-system/src/components/icons/FlagErrorIcon.tsx | 7 +++++++
 .../design-system/src/components/icons/FlagInfoIcon.tsx  | 7 +++++++
 .../src/components/icons/FlagSuccessIcon.tsx             | 7 +++++++
 .../src/components/icons/FlagWarningIcon.tsx             | 8 ++++++++
 .../src/components/icons/HelperHintIcon.tsx              | 7 +++++++
 .../design-system/src/components/icons/HomeFillIcon.tsx  | 7 +++++++
 .../design-system/src/components/icons/HomeIcon.tsx      | 7 +++++++
 .../src/components/icons/InheritanceIcon.tsx             | 7 +++++++
 .../src/components/icons/IssueLocationIcon.tsx           | 7 +++++++
 .../design-system/src/components/icons/LinkIcon.tsx      | 7 +++++++
 .../design-system/src/components/icons/LockIcon.tsx      | 7 +++++++
 .../src/components/icons/MainBranchIcon.tsx              | 7 +++++++
 .../design-system/src/components/icons/MenuHelpIcon.tsx  | 7 +++++++
 .../design-system/src/components/icons/MenuIcon.tsx      | 7 +++++++
 .../src/components/icons/MenuSearchIcon.tsx              | 7 +++++++
 .../design-system/src/components/icons/MinimizeIcon.tsx  | 7 +++++++
 .../src/components/icons/OpenNewTabIcon.tsx              | 7 +++++++
 .../design-system/src/components/icons/PinIcon.tsx       | 7 +++++++
 .../design-system/src/components/icons/ProjectIcon.tsx   | 7 +++++++
 .../src/components/icons/PullRequestIcon.tsx             | 7 +++++++
 .../src/components/icons/RecommendedIcon.tsx             | 7 +++++++
 .../design-system/src/components/icons/SearchIcon.tsx    | 7 +++++++
 .../src/components/icons/SecurityFindingIcon.tsx         | 7 +++++++
 .../src/components/icons/SecurityHotspotIcon.tsx         | 7 +++++++
 .../src/components/icons/SeverityInfoIcon.tsx            | 7 +++++++
 .../design-system/src/components/icons/StarFillIcon.tsx  | 9 ++++++++-
 .../design-system/src/components/icons/StarIcon.tsx      | 7 +++++++
 .../src/components/icons/StatusConfirmedIcon.tsx         | 7 +++++++
 .../src/components/icons/StatusOpenIcon.tsx              | 7 +++++++
 .../src/components/icons/StatusReopenedIcon.tsx          | 7 +++++++
 .../src/components/icons/StatusResolvedIcon.tsx          | 7 +++++++
 .../design-system/src/components/icons/TestFileIcon.tsx  | 7 +++++++
 .../src/components/icons/UnfoldDownIcon.tsx              | 7 +++++++
 .../design-system/src/components/icons/UnfoldIcon.tsx    | 7 +++++++
 .../design-system/src/components/icons/UnfoldUpIcon.tsx  | 7 +++++++
 .../design-system/src/components/icons/UserGroupIcon.tsx | 7 +++++++
 .../src/components/icons/VulnerabilityIcon.tsx           | 7 +++++++
 54 files changed, 379 insertions(+), 1 deletion(-)

diff --git a/server/sonar-web/design-system/src/components/icons/AddNewIcon.tsx b/server/sonar-web/design-system/src/components/icons/AddNewIcon.tsx
index 6eee2ba2f12..83b78dea6b7 100644
--- a/server/sonar-web/design-system/src/components/icons/AddNewIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/AddNewIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 import { CustomIcon, IconProps } from './Icon';
 
+/** @deprecated Use IconPlus from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function AddNewIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
   const theme = useTheme();
 
diff --git a/server/sonar-web/design-system/src/components/icons/BranchIcon.tsx b/server/sonar-web/design-system/src/components/icons/BranchIcon.tsx
index 8bb64ff13a0..579b6595d80 100644
--- a/server/sonar-web/design-system/src/components/icons/BranchIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/BranchIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { GitBranchIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconGitBranch from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const BranchIcon = OcticonHoc(GitBranchIcon, 'BranchIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/BugIcon.tsx b/server/sonar-web/design-system/src/components/icons/BugIcon.tsx
index 7cd88c7773c..d4818cfb8e5 100644
--- a/server/sonar-web/design-system/src/components/icons/BugIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/BugIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconBug from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function BugIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
 
diff --git a/server/sonar-web/design-system/src/components/icons/CalendarIcon.tsx b/server/sonar-web/design-system/src/components/icons/CalendarIcon.tsx
index 85e2096c275..1b600d8b42b 100644
--- a/server/sonar-web/design-system/src/components/icons/CalendarIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/CalendarIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { CalendarIcon as Octicon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconCalendar from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const CalendarIcon = OcticonHoc(Octicon);
diff --git a/server/sonar-web/design-system/src/components/icons/CheckIcon.tsx b/server/sonar-web/design-system/src/components/icons/CheckIcon.tsx
index be2547ddbd9..bde5e4f4698 100644
--- a/server/sonar-web/design-system/src/components/icons/CheckIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/CheckIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconCheck from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function CheckIcon({ fill = 'iconCheck', ...iconProps }: IconProps) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/ChevronDownIcon.tsx b/server/sonar-web/design-system/src/components/icons/ChevronDownIcon.tsx
index e6cd20055a7..208219afd0c 100644
--- a/server/sonar-web/design-system/src/components/icons/ChevronDownIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/ChevronDownIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconChevronDown from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function ChevronDownIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/ClockIcon.tsx b/server/sonar-web/design-system/src/components/icons/ClockIcon.tsx
index 08d8b0a457c..6c8a8231438 100644
--- a/server/sonar-web/design-system/src/components/icons/ClockIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/ClockIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { ClockIcon as OcticonClockIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconClock from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const ClockIcon = OcticonHoc(OcticonClockIcon, 'ClockIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/CloseIcon.tsx b/server/sonar-web/design-system/src/components/icons/CloseIcon.tsx
index af415074de4..2c0daebf409 100644
--- a/server/sonar-web/design-system/src/components/icons/CloseIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/CloseIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { XIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconX from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const CloseIcon = OcticonHoc(XIcon, 'CloseIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/CodeSmellIcon.tsx b/server/sonar-web/design-system/src/components/icons/CodeSmellIcon.tsx
index a34ab55d438..e68cc4113e3 100644
--- a/server/sonar-web/design-system/src/components/icons/CodeSmellIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/CodeSmellIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconCodeSmell from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function CodeSmellIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
 
diff --git a/server/sonar-web/design-system/src/components/icons/CollapseIcon.tsx b/server/sonar-web/design-system/src/components/icons/CollapseIcon.tsx
index 27e37e1a5d5..5040cc57804 100644
--- a/server/sonar-web/design-system/src/components/icons/CollapseIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/CollapseIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconCollapse from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function CollapseIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/CommentIcon.tsx b/server/sonar-web/design-system/src/components/icons/CommentIcon.tsx
index 5eefd181150..f47270b3eba 100644
--- a/server/sonar-web/design-system/src/components/icons/CommentIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/CommentIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { CommentIcon as OcticonCommentIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconComment from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const CommentIcon = OcticonHoc(OcticonCommentIcon, 'CommentIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/CopyIcon.tsx b/server/sonar-web/design-system/src/components/icons/CopyIcon.tsx
index ed30ec0d5c6..700f8612465 100644
--- a/server/sonar-web/design-system/src/components/icons/CopyIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/CopyIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { CopyIcon as OcticonCopyIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconCopy from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const CopyIcon = OcticonHoc(OcticonCopyIcon, 'CopyIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/DirectoryIcon.tsx b/server/sonar-web/design-system/src/components/icons/DirectoryIcon.tsx
index 70ae3fedcee..c3dcaed09df 100644
--- a/server/sonar-web/design-system/src/components/icons/DirectoryIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/DirectoryIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { FileDirectoryIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconDirectory from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const DirectoryIcon = OcticonHoc(FileDirectoryIcon, 'DirectoryIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/DotFillIcon.tsx b/server/sonar-web/design-system/src/components/icons/DotFillIcon.tsx
index e8058cc5134..de58443fb59 100644
--- a/server/sonar-web/design-system/src/components/icons/DotFillIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/DotFillIcon.tsx
@@ -21,4 +21,10 @@
 import { DotFillIcon as OcticonDotFillIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconDot with the isFilled prop from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const DotFillIcon = OcticonHoc(OcticonDotFillIcon, 'DotFillIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/ExpandIcon.tsx b/server/sonar-web/design-system/src/components/icons/ExpandIcon.tsx
index 84cff94c5e3..de74960e9e9 100644
--- a/server/sonar-web/design-system/src/components/icons/ExpandIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/ExpandIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconExpand from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function ExpandIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/FileIcon.tsx b/server/sonar-web/design-system/src/components/icons/FileIcon.tsx
index 3a61725d155..fb2a67c26e5 100644
--- a/server/sonar-web/design-system/src/components/icons/FileIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/FileIcon.tsx
@@ -17,7 +17,14 @@
  * 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 as OcticonFileIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconFile from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const FileIcon = OcticonHoc(OcticonFileIcon, 'FileIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/FilterIcon.tsx b/server/sonar-web/design-system/src/components/icons/FilterIcon.tsx
index 4062982df8e..40a4701b8a6 100644
--- a/server/sonar-web/design-system/src/components/icons/FilterIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/FilterIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { FilterIcon as Icon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconFilter from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const FilterIcon = OcticonHoc(Icon, 'FilterIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/FlagErrorIcon.tsx b/server/sonar-web/design-system/src/components/icons/FlagErrorIcon.tsx
index 99e241c550a..ec53a97d751 100644
--- a/server/sonar-web/design-system/src/components/icons/FlagErrorIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/FlagErrorIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconError from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function FlagErrorIcon({ fill = 'iconError', ...iconProps }: IconProps) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/FlagInfoIcon.tsx b/server/sonar-web/design-system/src/components/icons/FlagInfoIcon.tsx
index 034c05dbd25..04bb2a9cedd 100644
--- a/server/sonar-web/design-system/src/components/icons/FlagInfoIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/FlagInfoIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconInfo from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function FlagInfoIcon({ fill = 'iconInfo', ...iconProps }: IconProps) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/FlagSuccessIcon.tsx b/server/sonar-web/design-system/src/components/icons/FlagSuccessIcon.tsx
index 57bbf8bd2a6..06a597a4983 100644
--- a/server/sonar-web/design-system/src/components/icons/FlagSuccessIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/FlagSuccessIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconCheckCircle from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function FlagSuccessIcon({ fill = 'iconSuccess', ...iconProps }: IconProps) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/FlagWarningIcon.tsx b/server/sonar-web/design-system/src/components/icons/FlagWarningIcon.tsx
index 946deed7355..8f4e1441d80 100644
--- a/server/sonar-web/design-system/src/components/icons/FlagWarningIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/FlagWarningIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconWarning from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function FlagWarningIcon({ fill = 'iconWarning', ...iconProps }: IconProps) {
   const theme = useTheme();
   return (
@@ -32,3 +39,4 @@ export function FlagWarningIcon({ fill = 'iconWarning', ...iconProps }: IconProp
     </CustomIcon>
   );
 }
+FlagWarningIcon.displayName = 'FlagWarningIcon';
diff --git a/server/sonar-web/design-system/src/components/icons/HelperHintIcon.tsx b/server/sonar-web/design-system/src/components/icons/HelperHintIcon.tsx
index 7da2fc7a275..90ad071ca2b 100644
--- a/server/sonar-web/design-system/src/components/icons/HelperHintIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/HelperHintIcon.tsx
@@ -17,6 +17,7 @@
  * 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 { Fragment } from 'react';
 import { themeColor, themeContrast } from '../../helpers/theme';
@@ -26,6 +27,12 @@ type Props = IconProps & {
   raised?: boolean;
 };
 
+/** @deprecated Use IconQuestionMark from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function HelperHintIcon({ raised, ...iconProps }: Props) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/HomeFillIcon.tsx b/server/sonar-web/design-system/src/components/icons/HomeFillIcon.tsx
index 430bd9ab1a5..f4e93da93d7 100644
--- a/server/sonar-web/design-system/src/components/icons/HomeFillIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/HomeFillIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconHome with the isFilled prop from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function HomeFillIcon({ fill = 'iconFavorite', ...iconProps }: IconProps) {
   const theme = useTheme();
   const fillColor = themeColor(fill)({ theme });
diff --git a/server/sonar-web/design-system/src/components/icons/HomeIcon.tsx b/server/sonar-web/design-system/src/components/icons/HomeIcon.tsx
index 9ce42c132af..9b350fdfff5 100644
--- a/server/sonar-web/design-system/src/components/icons/HomeIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/HomeIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { HomeIcon as OcticonHomeIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconHome from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const HomeIcon = OcticonHoc(OcticonHomeIcon, 'HomeIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/InheritanceIcon.tsx b/server/sonar-web/design-system/src/components/icons/InheritanceIcon.tsx
index 908798fc149..6aa6c41ba47 100644
--- a/server/sonar-web/design-system/src/components/icons/InheritanceIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/InheritanceIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconInheritance from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function InheritanceIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
   const theme = useTheme();
   const fillColor = themeColor(fill)({ theme });
diff --git a/server/sonar-web/design-system/src/components/icons/IssueLocationIcon.tsx b/server/sonar-web/design-system/src/components/icons/IssueLocationIcon.tsx
index 42ffebf09fc..d9b9fe01199 100644
--- a/server/sonar-web/design-system/src/components/icons/IssueLocationIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/IssueLocationIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconDot with the isFilled prop from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function IssueLocationIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
   const fillColor = themeColor(fill)({ theme });
diff --git a/server/sonar-web/design-system/src/components/icons/LinkIcon.tsx b/server/sonar-web/design-system/src/components/icons/LinkIcon.tsx
index 84a2c71e9c7..9eb16f90403 100644
--- a/server/sonar-web/design-system/src/components/icons/LinkIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/LinkIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { LinkIcon as Icon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconLink from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const LinkIcon = OcticonHoc(Icon, 'LinkIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/LockIcon.tsx b/server/sonar-web/design-system/src/components/icons/LockIcon.tsx
index fb08b632742..e2aba5a119b 100644
--- a/server/sonar-web/design-system/src/components/icons/LockIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/LockIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { LockIcon as OcticonLockIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconLock from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const LockIcon = OcticonHoc(OcticonLockIcon, 'LockIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/MainBranchIcon.tsx b/server/sonar-web/design-system/src/components/icons/MainBranchIcon.tsx
index 9dd1dc126ef..0de937e2687 100644
--- a/server/sonar-web/design-system/src/components/icons/MainBranchIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/MainBranchIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconBranch from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function MainBranchIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/MenuHelpIcon.tsx b/server/sonar-web/design-system/src/components/icons/MenuHelpIcon.tsx
index 86d2b1fafa7..ed38a889edb 100644
--- a/server/sonar-web/design-system/src/components/icons/MenuHelpIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/MenuHelpIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconQuestionMark from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function MenuHelpIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/MenuIcon.tsx b/server/sonar-web/design-system/src/components/icons/MenuIcon.tsx
index a13d8ee821d..3a3dbe9c129 100644
--- a/server/sonar-web/design-system/src/components/icons/MenuIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/MenuIcon.tsx
@@ -17,10 +17,17 @@
  * 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 { KebabHorizontalIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconMoreVertical from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const MenuIcon = styled(OcticonHoc(KebabHorizontalIcon, 'MenuIcon'))`
   transform: rotate(90deg);
 `;
diff --git a/server/sonar-web/design-system/src/components/icons/MenuSearchIcon.tsx b/server/sonar-web/design-system/src/components/icons/MenuSearchIcon.tsx
index 97ffb395cef..081e8adebfc 100644
--- a/server/sonar-web/design-system/src/components/icons/MenuSearchIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/MenuSearchIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconSearch from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function MenuSearchIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
 
diff --git a/server/sonar-web/design-system/src/components/icons/MinimizeIcon.tsx b/server/sonar-web/design-system/src/components/icons/MinimizeIcon.tsx
index 636c759485c..127e3918343 100644
--- a/server/sonar-web/design-system/src/components/icons/MinimizeIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/MinimizeIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconDash from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function MinimizeIcon({ fill = 'currentColor', ...iconProps }: Readonly<IconProps>) {
   const theme = useTheme();
   return (
diff --git a/server/sonar-web/design-system/src/components/icons/OpenNewTabIcon.tsx b/server/sonar-web/design-system/src/components/icons/OpenNewTabIcon.tsx
index 7a41a75388e..b5ca3715322 100644
--- a/server/sonar-web/design-system/src/components/icons/OpenNewTabIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/OpenNewTabIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { LinkExternalIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconLinkExternal from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const OpenNewTabIcon = OcticonHoc(LinkExternalIcon, 'OpenNewTabIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/PinIcon.tsx b/server/sonar-web/design-system/src/components/icons/PinIcon.tsx
index da30977548b..bafc55e50d7 100644
--- a/server/sonar-web/design-system/src/components/icons/PinIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/PinIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { PinIcon as OcticonPinIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconPin from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const PinIcon = OcticonHoc(OcticonPinIcon, 'PinIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/ProjectIcon.tsx b/server/sonar-web/design-system/src/components/icons/ProjectIcon.tsx
index d30a83589c8..e553f09d892 100644
--- a/server/sonar-web/design-system/src/components/icons/ProjectIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/ProjectIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { ProjectIcon as OcticonProjectIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconProject from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const ProjectIcon = OcticonHoc(OcticonProjectIcon, 'ProjectIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/PullRequestIcon.tsx b/server/sonar-web/design-system/src/components/icons/PullRequestIcon.tsx
index 9c928a9a427..0cc9b256453 100644
--- a/server/sonar-web/design-system/src/components/icons/PullRequestIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/PullRequestIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { GitPullRequestIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconPullrequest from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const PullRequestIcon = OcticonHoc(GitPullRequestIcon, 'PullRequestIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/RecommendedIcon.tsx b/server/sonar-web/design-system/src/components/icons/RecommendedIcon.tsx
index 032b2280000..7a8be83a51b 100644
--- a/server/sonar-web/design-system/src/components/icons/RecommendedIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/RecommendedIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { VerifiedIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconRecommended from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const RecommendedIcon = OcticonHoc(VerifiedIcon, 'RecommendedIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/SearchIcon.tsx b/server/sonar-web/design-system/src/components/icons/SearchIcon.tsx
index bc52fb570f7..cc02b360ee6 100644
--- a/server/sonar-web/design-system/src/components/icons/SearchIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SearchIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { SearchIcon as OcticonSearchIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconSearch from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const SearchIcon = OcticonHoc(OcticonSearchIcon, 'SearchIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/SecurityFindingIcon.tsx b/server/sonar-web/design-system/src/components/icons/SecurityFindingIcon.tsx
index 2b435510b68..a0a3ef93a0c 100644
--- a/server/sonar-web/design-system/src/components/icons/SecurityFindingIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SecurityFindingIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconSecurityFinding from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function SecurityFindingIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
   const fillColor = themeColor(fill)({ theme });
diff --git a/server/sonar-web/design-system/src/components/icons/SecurityHotspotIcon.tsx b/server/sonar-web/design-system/src/components/icons/SecurityHotspotIcon.tsx
index a653e923927..c8298df6614 100644
--- a/server/sonar-web/design-system/src/components/icons/SecurityHotspotIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SecurityHotspotIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconSecurityFinding from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function SecurityHotspotIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
 
diff --git a/server/sonar-web/design-system/src/components/icons/SeverityInfoIcon.tsx b/server/sonar-web/design-system/src/components/icons/SeverityInfoIcon.tsx
index 8dd4dd72e57..a35b214a78a 100644
--- a/server/sonar-web/design-system/src/components/icons/SeverityInfoIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SeverityInfoIcon.tsx
@@ -17,10 +17,17 @@
  * 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, themeContrast } from '../../helpers/theme';
 import { CustomIcon, IconProps } from './Icon';
 
+/** @deprecated Use IconInfo from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function SeverityInfoIcon({ fill = 'iconSeverityInfo', ...iconProps }: IconProps) {
   const theme = useTheme();
 
diff --git a/server/sonar-web/design-system/src/components/icons/StarFillIcon.tsx b/server/sonar-web/design-system/src/components/icons/StarFillIcon.tsx
index 80b66855181..6fcdd73f8d4 100644
--- a/server/sonar-web/design-system/src/components/icons/StarFillIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/StarFillIcon.tsx
@@ -17,13 +17,20 @@
  * 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 { StarFillIcon as OcticonStarFillIcon } from '@primer/octicons-react';
 import { themeColor } from '../../helpers';
 import { OcticonHoc } from './Icon';
 
-// provide a default fill color that is different from the default icon
+/** @deprecated Use IconStar with the isFilled prop from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const StarFillIcon = styled(OcticonHoc(OcticonStarFillIcon))`
+  // provide a default fill color that is different from the default icon
   fill: ${themeColor('iconFavorite')};
 `;
 
diff --git a/server/sonar-web/design-system/src/components/icons/StarIcon.tsx b/server/sonar-web/design-system/src/components/icons/StarIcon.tsx
index de961bb1ef4..d3106b1e560 100644
--- a/server/sonar-web/design-system/src/components/icons/StarIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/StarIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { StarIcon as OcticonStarIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconStar from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const StarIcon = OcticonHoc(OcticonStarIcon, 'StarIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/StatusConfirmedIcon.tsx b/server/sonar-web/design-system/src/components/icons/StatusConfirmedIcon.tsx
index 0c67dbe73ef..078e87740e1 100644
--- a/server/sonar-web/design-system/src/components/icons/StatusConfirmedIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/StatusConfirmedIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconStatusConfirmed from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function StatusConfirmedIcon({ fill = 'iconStatus', ...iconProps }: IconProps) {
   const theme = useTheme();
   const fillColor = themeColor(fill)({ theme });
diff --git a/server/sonar-web/design-system/src/components/icons/StatusOpenIcon.tsx b/server/sonar-web/design-system/src/components/icons/StatusOpenIcon.tsx
index 2b1becc52cd..f860ed59146 100644
--- a/server/sonar-web/design-system/src/components/icons/StatusOpenIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/StatusOpenIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconStatusOpen from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function StatusOpenIcon({ fill = 'iconStatus', ...iconProps }: IconProps) {
   const theme = useTheme();
 
diff --git a/server/sonar-web/design-system/src/components/icons/StatusReopenedIcon.tsx b/server/sonar-web/design-system/src/components/icons/StatusReopenedIcon.tsx
index 737eec9aaac..7c42c34f345 100644
--- a/server/sonar-web/design-system/src/components/icons/StatusReopenedIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/StatusReopenedIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconStatusReopened from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function StatusReopenedIcon({ fill = 'iconStatus', ...iconProps }: IconProps) {
   const theme = useTheme();
   const fillColor = themeColor(fill)({ theme });
diff --git a/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx b/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx
index 10c6077c78d..01cd28daf01 100644
--- a/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/StatusResolvedIcon.tsx
@@ -17,10 +17,17 @@
  * 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, themeContrast } from '../../helpers/theme';
 import { CustomIcon, IconProps } from './Icon';
 
+/** @deprecated Use IconStatusResolved from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function StatusResolvedIcon({ fill = 'iconStatusResolved', ...iconProps }: IconProps) {
   const theme = useTheme();
 
diff --git a/server/sonar-web/design-system/src/components/icons/TestFileIcon.tsx b/server/sonar-web/design-system/src/components/icons/TestFileIcon.tsx
index b42451677f1..bf5c541f2cd 100644
--- a/server/sonar-web/design-system/src/components/icons/TestFileIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/TestFileIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconFileCode from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function TestFileIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
   const fillColor = themeColor(fill)({ theme });
diff --git a/server/sonar-web/design-system/src/components/icons/UnfoldDownIcon.tsx b/server/sonar-web/design-system/src/components/icons/UnfoldDownIcon.tsx
index ccca6c69afc..4ab6276fd90 100644
--- a/server/sonar-web/design-system/src/components/icons/UnfoldDownIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/UnfoldDownIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { FoldDownIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconUnfoldDown from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const UnfoldDownIcon = OcticonHoc(FoldDownIcon, 'UnfoldDownIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/UnfoldIcon.tsx b/server/sonar-web/design-system/src/components/icons/UnfoldIcon.tsx
index 925c0b60e51..7bf4b7277bd 100644
--- a/server/sonar-web/design-system/src/components/icons/UnfoldIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/UnfoldIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { UnfoldIcon as OcticonUnfoldIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconUnfold from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const UnfoldIcon = OcticonHoc(OcticonUnfoldIcon, 'UnfoldIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/UnfoldUpIcon.tsx b/server/sonar-web/design-system/src/components/icons/UnfoldUpIcon.tsx
index 8e74f0d8e5a..02f7bab9e4c 100644
--- a/server/sonar-web/design-system/src/components/icons/UnfoldUpIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/UnfoldUpIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { FoldUpIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconUnfoldUp from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const UnfoldUpIcon = OcticonHoc(FoldUpIcon, 'UnfoldUpIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/UserGroupIcon.tsx b/server/sonar-web/design-system/src/components/icons/UserGroupIcon.tsx
index 1818b366f6e..8c4b4a7e6e9 100644
--- a/server/sonar-web/design-system/src/components/icons/UserGroupIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/UserGroupIcon.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import { PeopleIcon } from '@primer/octicons-react';
 import { OcticonHoc } from './Icon';
 
+/** @deprecated Use IconPeople from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export const UserGroupIcon = OcticonHoc(PeopleIcon, 'UserGroupIcon');
diff --git a/server/sonar-web/design-system/src/components/icons/VulnerabilityIcon.tsx b/server/sonar-web/design-system/src/components/icons/VulnerabilityIcon.tsx
index 44fadd66d17..eda4bbad453 100644
--- a/server/sonar-web/design-system/src/components/icons/VulnerabilityIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/VulnerabilityIcon.tsx
@@ -17,10 +17,17 @@
  * 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';
 
+/** @deprecated Use IconVulnerability from Echoes instead, if possible.
+ *
+ * Be aware that the full icon set is not yet available in Echoes, and therefore you may not be able
+ * to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
+ * warning when revisiting old code, but all new code should use the icons from Echoes.
+ */
 export function VulnerabilityIcon({ fill = 'currentColor', ...iconProps }: IconProps) {
   const theme = useTheme();
 
-- 
2.39.5