icons: add new icon set (#88010)

Best to be reviewed visually in storybook.

**Changes to icon styling**
Our new icon set is based on stroke based styling, as it gives us more
flexibility for adjusting the icon weights with regards to scale. While
this is a nice feature, it poses is a problem given that we only have a
single SvgIcon component that always styles via fill property - for this
reason, a kind prop with value of `path` or `stroke` has been added that
determines how the icon is styled.

This is obviously not ideal, but given that we only have 3 other
instances where SVGIcon is used outside of our icons, I think the
temporary risk is acceptable. The reason why we also cannot remove the
path based styling is because not all of the following Icons can be
converted to stroke based styling, meaning we need an override.
![CleanShot 2025-03-26 at 20 43
25@2x](https://github.com/user-attachments/assets/7a529938-d301-48db-a86b-28794fe05096)

**Changes to icon size**
The new icon set has another breaking change which is where the icons
themselves are not drawn edge to edge, but instead have visual spacing
built into them. This effectively means that the new icons appear much
smaller than our old icons.
![CleanShot 2025-03-26 at 20 51
42@2x](https://github.com/user-attachments/assets/bf45c9d2-05ed-45d1-9e60-aef7f32e693f)

I am personally not convinced that the timing to introduce this many
breaking changes is good, as it creates a lot of visually breaking
changes that we will need to go and adjust on a per case basis. For this
reason, I have effectively disabled the spacing change by adjusting the
viewbox param of the new icons.

This is a wip and the following is still required before this PR can be
merged:
- Lab icon needs a filled state
- Focus icons needs a unfocused counterpart
- IconExclamation needs to be brought back


The following icons have been deprecated:
- IconCircle (deprecated), 
- IconCircleFill (deprecated), 
- IconDiamond (deprecated), 
- IconFileBroken (deprecated), 

The following have been deprecated, but will render a fallback icon when
new UI is enabled
- IconMute becomes IconUnsubscribe
- IconBusiness becomes IconLightning

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: JonasBa

static/app/components/ai/SeerIcon.tsx

@@ -57,7 +57,7 @@ const InteractionWrapper = styled('div')`
 
 const SeerIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
   return (
-    <SvgIcon {...props} ref={ref} viewBox="0 0 30 30">
+    <SvgIcon {...props} ref={ref} viewBox="0 0 30 30" kind="path">
       <path
         d="M14.0407,3.1458L3.5742,17.0376c-.2989.3967-.2327.9584.1501,1.2748l10.4917,8.6705c.3436.284.8405.2838,1.1839-.0005l10.4717-8.6691c.3827-.3169.4483-.8788.1488-1.2753L15.5235,3.1448c-.3719-.4922-1.1115-.4917-1.4828.001Z"
         fill="none"
@@ -94,7 +94,7 @@ SeerIcon.displayName = 'SeerIcon';
 const SeerLoadingIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
   return (
     <InteractionWrapper>
-      <SvgIcon {...props} ref={ref} viewBox="0 0 30 30">
+      <SvgIcon {...props} ref={ref} viewBox="0 0 30 30" kind="path">
         <defs>
           <clipPath id="eaf-dde7-1">
             <rect x="0" y="0" width="30" height="30" />
@@ -156,7 +156,7 @@ const SeerLoadingIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) =>
 const SeerWaitingIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
   return (
     <InteractionWrapper>
-      <SvgIcon {...props} ref={ref} viewBox="0 0 30 30">
+      <SvgIcon {...props} ref={ref} viewBox="0 0 30 30" kind="path">
         <defs>
           <clipPath id="eaf-7216-1">
             <rect x="0" y="0" width="30" height="30" />

static/app/components/badge/iconCellSignal.tsx

@@ -13,7 +13,7 @@ const IconCellSignal = forwardRef<SVGSVGElement, Props>(({bars = 3, ...props}, r
   const thirdBarColor = bars > 2 ? theme.gray300 : theme.gray200;
 
   return (
-    <SvgIcon {...props} ref={ref}>
+    <SvgIcon {...props} ref={ref} kind={'path'}>
       <rect x="0" y="10" width="4" height="5" fill={firstBarColor} rx="1" />
       <rect x="6.2" y="5" width="4" height="10" fill={secondBarColor} rx="1" />
       <rect x="12.4" y="0" width="4" height="15" fill={thirdBarColor} rx="1" />

static/app/icons/iconAdd.tsx

@@ -1,30 +1,45 @@
 import {forwardRef, Fragment} from 'react';
+import {useTheme} from '@emotion/react';
 
 import type {SVGIconProps} from './svgIcon';
 import {SvgIcon} from './svgIcon';
 
-interface Props extends SVGIconProps {
+interface IconAddProps extends SVGIconProps {
+  /**
+   * @deprecated circled variant will be removed.
+   */
   isCircled?: boolean;
 }
 
-const IconAdd = forwardRef<SVGSVGElement, Props>(({isCircled = false, ...props}, ref) => {
-  return (
-    <SvgIcon {...props} ref={ref} data-test-id="icon-add">
-      {isCircled ? (
-        <Fragment>
-          <path d="M11.28,8.75H4.72a.75.75,0,1,1,0-1.5h6.56a.75.75,0,1,1,0,1.5Z" />
-          <path d="M8,12a.76.76,0,0,1-.75-.75V4.72a.75.75,0,0,1,1.5,0v6.56A.76.76,0,0,1,8,12Z" />
-          <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
-        </Fragment>
-      ) : (
-        <Fragment>
-          <path d="M8.75,7.25V2a.75.75,0,0,0-1.5,0V7.25H2a.75.75,0,0,0,0,1.5H7.25V14a.75.75,0,0,0,1.5,0V8.75H14a.75.75,0,0,0,0-1.5Z" />
-        </Fragment>
-      )}
-    </SvgIcon>
-  );
-});
+export const IconAdd = forwardRef<SVGSVGElement, IconAddProps>(
+  ({isCircled = false, ...props}, ref) => {
+    const theme = useTheme();
+    return (
+      <SvgIcon
+        {...props}
+        ref={ref}
+        data-test-id="icon-add"
+        kind={theme.isChonk ? 'stroke' : 'path'}
+      >
+        {theme.isChonk ? (
+          <Fragment>
+            <line x1="13.25" y1="8.01" x2="2.74" y2="8.01" />
+            <line x1="7.99" y1="13.26" x2="7.99" y2="2.75" />
+          </Fragment>
+        ) : isCircled ? (
+          <Fragment>
+            <path d="M11.28,8.75H4.72a.75.75,0,1,1,0-1.5h6.56a.75.75,0,1,1,0,1.5Z" />
+            <path d="M8,12a.76.76,0,0,1-.75-.75V4.72a.75.75,0,0,1,1.5,0v6.56A.76.76,0,0,1,8,12Z" />
+            <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
+          </Fragment>
+        ) : (
+          <Fragment>
+            <path d="M8.75,7.25V2a.75.75,0,0,0-1.5,0V7.25H2a.75.75,0,0,0,0,1.5H7.25V14a.75.75,0,0,0,1.5,0V8.75H14a.75.75,0,0,0,0-1.5Z" />
+          </Fragment>
+        )}
+      </SvgIcon>
+    );
+  }
+);
 
 IconAdd.displayName = 'IconAdd';
-
-export {IconAdd};

static/app/icons/iconArchive.tsx

@@ -1,14 +1,27 @@
-import {forwardRef} from 'react';
+import {forwardRef, Fragment} from 'react';
+import {useTheme} from '@emotion/react';
 
 import type {SVGIconProps} from './svgIcon';
 import {SvgIcon} from './svgIcon';
 
 const IconArchive = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  const theme = useTheme();
+
   return (
-    <SvgIcon {...props} ref={ref}>
-      <path d="m15.28,5.32H.72c-.41,0-.75-.34-.75-.75V.74C-.03.32.3-.01.72-.01h14.56c.41,0,.75.34.75.75v3.83c0,.41-.34.75-.75.75ZM1.47,3.82h13.06V1.49H1.47v2.33Z" />
-      <path d="m12.53,16.03H3.47c-1.52,0-2.75-1.23-2.75-2.75V4.57c0-.41.34-.75.75-.75s.75.34.75.75v8.71c0,.69.56,1.25,1.25,1.25h9.05c.69,0,1.25-.56,1.25-1.25V4.57c0-.41.34-.75.75-.75s.75.34.75.75v8.71c0,1.52-1.23,2.75-2.75,2.75Z" />
-      <path d="m10.67,7.7h-5.08c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h5.08c.41,0,.75.34.75.75s-.34.75-.75.75Z" />
+    <SvgIcon {...props} ref={ref} kind={theme.isChonk ? 'stroke' : 'path'}>
+      {theme.isChonk ? (
+        <Fragment>
+          <path d="m12.25,5.5v6.75c0,.55-.45,1-1,1h-6.5c-.55,0-1-.45-1-1v-6.75" />
+          <rect x="2.75" y="2.75" width="10.5" height="2.75" />
+          <rect x="6.25" y="8.25" width="3.5" height=".5" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path d="m15.28,5.32H.72c-.41,0-.75-.34-.75-.75V.74C-.03.32.3-.01.72-.01h14.56c.41,0,.75.34.75.75v3.83c0,.41-.34.75-.75.75ZM1.47,3.82h13.06V1.49H1.47v2.33Z" />
+          <path d="m12.53,16.03H3.47c-1.52,0-2.75-1.23-2.75-2.75V4.57c0-.41.34-.75.75-.75s.75.34.75.75v8.71c0,.69.56,1.25,1.25,1.25h9.05c.69,0,1.25-.56,1.25-1.25V4.57c0-.41.34-.75.75-.75s.75.34.75.75v8.71c0,1.52-1.23,2.75-2.75,2.75Z" />
+          <path d="m10.67,7.7h-5.08c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h5.08c.41,0,.75.34.75.75s-.34.75-.75.75Z" />
+        </Fragment>
+      )}
     </SvgIcon>
   );
 });

static/app/icons/iconArrow.tsx

@@ -1,4 +1,4 @@
-import {forwardRef} from 'react';
+import {forwardRef, Fragment} from 'react';
 import {css, useTheme} from '@emotion/react';
 
 import type {SVGIconProps} from './svgIcon';
@@ -16,6 +16,7 @@ const IconArrow = forwardRef<SVGSVGElement, ArrowProps>(
       <SvgIcon
         {...props}
         ref={ref}
+        kind={theme.isChonk ? 'stroke' : 'path'}
         css={
           direction
             ? direction === 'down'
@@ -30,8 +31,17 @@ const IconArrow = forwardRef<SVGSVGElement, ArrowProps>(
             : undefined
         }
       >
-        <path d="M13.76,7.32a.74.74,0,0,1-.53-.22L8,1.87,2.77,7.1A.75.75,0,1,1,1.71,6L7.47.28a.74.74,0,0,1,1.06,0L14.29,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,13.76,7.32Z" />
-        <path d="M8,15.94a.75.75,0,0,1-.75-.75V.81a.75.75,0,0,1,1.5,0V15.19A.75.75,0,0,1,8,15.94Z" />
+        {theme.isChonk ? (
+          <Fragment>
+            <line x1="8" y1="14" x2="8" y2="2.25" />
+            <path d="m2.75,6.84L7.29,2.29c.39-.39,1.02-.39,1.41,0l4.54,4.54" />
+          </Fragment>
+        ) : (
+          <Fragment>
+            <path d="M13.76,7.32a.74.74,0,0,1-.53-.22L8,1.87,2.77,7.1A.75.75,0,1,1,1.71,6L7.47.28a.74.74,0,0,1,1.06,0L14.29,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,13.76,7.32Z" />
+            <path d="M8,15.94a.75.75,0,0,1-.75-.75V.81a.75.75,0,0,1,1.5,0V15.19A.75.75,0,0,1,8,15.94Z" />
+          </Fragment>
+        )}
       </SvgIcon>
     );
   }

static/app/icons/iconAsana.tsx

@@ -5,7 +5,7 @@ import {SvgIcon} from './svgIcon';
 
 const IconAsana = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
   return (
-    <SvgIcon {...props} ref={ref}>
+    <SvgIcon {...props} ref={ref} kind="path">
       <path d="M8,.61A3.48,3.48,0,1,1,4.52,4.09,3.48,3.48,0,0,1,8,.61Z" />
       <path d="M1,14.38A3.48,3.48,0,1,0,1,9.45,3.49,3.49,0,0,0,1,14.38Z" />
       <path d="M15,14.38a3.48,3.48,0,1,1,0-4.93A3.49,3.49,0,0,1,15,14.38Z" />

static/app/icons/iconAttachment.tsx

@@ -1,12 +1,18 @@
 import {forwardRef} from 'react';
+import {useTheme} from '@emotion/react';
 
 import type {SVGIconProps} from './svgIcon';
 import {SvgIcon} from './svgIcon';
 
 const IconAttachment = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  const theme = useTheme();
   return (
-    <SvgIcon {...props} ref={ref}>
-      <path d="M4.49,15.79l-.38,0a4.33,4.33,0,0,1-3-1.56A4.41,4.41,0,0,1,1.66,8L10,1a3.33,3.33,0,1,1,4.28,5.1L6,13.06A2.2,2.2,0,0,1,3.17,9.68l8.31-7a.75.75,0,0,1,1,1.15l-8.31,7a.73.73,0,0,0-.25.48.71.71,0,0,0,.16.51.71.71,0,0,0,1,.09l8.31-7A1.84,1.84,0,0,0,14,3.7a1.82,1.82,0,0,0-3-1.56l-8.31,7a2.91,2.91,0,0,0,1.55,5.17,2.89,2.89,0,0,0,2.11-.67l8.38-7a.75.75,0,0,1,1,.1.74.74,0,0,1-.09,1.05l-8.31,7A4.47,4.47,0,0,1,4.49,15.79Z" />
+    <SvgIcon {...props} ref={ref} kind={theme.isChonk ? 'stroke' : 'path'}>
+      {theme.isChonk ? (
+        <path d="m14.19,7.12l-5.13,5.13c-1.46,1.46-3.84,1.46-5.3,0h0c-1.46-1.46-1.46-3.84,0-5.3L7.82,2.87c.98-.98,2.56-.98,3.54,0h0c.98.98.98,2.56,0,3.54l-4.07,4.07c-.49.49-1.28.49-1.77,0h0c-.49-.49-.49-1.28,0-1.77l4.07-4.07" />
+      ) : (
+        <path d="M4.49,15.79l-.38,0a4.33,4.33,0,0,1-3-1.56A4.41,4.41,0,0,1,1.66,8L10,1a3.33,3.33,0,1,1,4.28,5.1L6,13.06A2.2,2.2,0,0,1,3.17,9.68l8.31-7a.75.75,0,0,1,1,1.15l-8.31,7a.73.73,0,0,0-.25.48.71.71,0,0,0,.16.51.71.71,0,0,0,1,.09l8.31-7A1.84,1.84,0,0,0,14,3.7a1.82,1.82,0,0,0-3-1.56l-8.31,7a2.91,2.91,0,0,0,1.55,5.17,2.89,2.89,0,0,0,2.11-.67l8.38-7a.75.75,0,0,1,1,.1.74.74,0,0,1-.09,1.05l-8.31,7A4.47,4.47,0,0,1,4.49,15.79Z" />
+      )}
     </SvgIcon>
   );
 });

static/app/icons/iconBitbucket.tsx

@@ -5,7 +5,7 @@ import {SvgIcon} from './svgIcon';
 
 const IconBitbucket = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
   return (
-    <SvgIcon {...props} ref={ref}>
+    <SvgIcon {...props} ref={ref} kind="path">
       <path d="M15.56.82H.52A.51.51,0,0,0,0,1.32.19.19,0,0,0,0,1.4L2.18,14.61a.7.7,0,0,0,.68.58H13.3a.52.52,0,0,0,.51-.43L16,1.41A.5.5,0,0,0,15.56.82ZM9.68,10.35H6.35l-.9-4.71h5Z" />
     </SvgIcon>
   );

static/app/icons/iconBookmark.tsx

@@ -1,4 +1,7 @@
 import {forwardRef} from 'react';
+import {useTheme} from '@emotion/react';
+
+import {useIconDefaults} from 'sentry/icons/useIconDefaults';
 
 import type {SVGIconProps} from './svgIcon';
 import {SvgIcon} from './svgIcon';
@@ -9,9 +12,21 @@ interface Props extends SVGIconProps {
 
 const IconBookmark = forwardRef<SVGSVGElement, Props>(
   ({isSolid = false, ...props}, ref) => {
+    const theme = useTheme();
+
+    const {color: providedColor = 'currentColor'} = useIconDefaults(props);
+
+    // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+    const color = theme[providedColor] ?? providedColor;
+
     return (
-      <SvgIcon {...props} ref={ref}>
-        {isSolid ? (
+      <SvgIcon {...props} ref={ref} kind={theme.isChonk ? 'stroke' : 'path'}>
+        {theme.isChonk ? (
+          <path
+            fill={isSolid ? color : 'none'}
+            d="m5.25,2.75h5.5c.55,0,1,.45,1,1v9.31c0,.23-.29.34-.44.16l-2.92-3.51c-.2-.24-.57-.24-.77,0l-2.92,3.51c-.15.18-.44.07-.44-.16V3.75c0-.55.45-1,1-1Z"
+          />
+        ) : isSolid ? (
           <path d="M14.09,16a.71.71,0,0,1-.4-.11L8,12.32,2.31,15.88a.76.76,0,0,1-.76,0,.75.75,0,0,1-.39-.66V2.4A2.38,2.38,0,0,1,3.54,0h8.92A2.38,2.38,0,0,1,14.84,2.4V15.24a.75.75,0,0,1-.39.66A.77.77,0,0,1,14.09,16Z" />
         ) : (
           <path d="M14.09,16a.71.71,0,0,1-.4-.11L8,12.32,2.31,15.88a.76.76,0,0,1-.76,0,.75.75,0,0,1-.39-.66V2.4A2.38,2.38,0,0,1,3.54,0h8.92A2.38,2.38,0,0,1,14.84,2.4V15.24a.75.75,0,0,1-.39.66A.77.77,0,0,1,14.09,16ZM8,10.69a.8.8,0,0,1,.4.11l4.94,3.09V2.4a.88.88,0,0,0-.88-.87H3.54a.88.88,0,0,0-.88.87V13.89L7.6,10.8A.8.8,0,0,1,8,10.69Z" />

static/app/icons/iconBroadcast.tsx

@@ -1,13 +1,28 @@
-import {forwardRef} from 'react';
+import {forwardRef, Fragment} from 'react';
+import {useTheme} from '@emotion/react';
 
 import type {SVGIconProps} from './svgIcon';
 import {SvgIcon} from './svgIcon';
 
 const IconBroadcast = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  const theme = useTheme();
   return (
-    <SvgIcon {...props} ref={ref}>
-      <path d="M8,10.2A2.2,2.2,0,1,1,10.2,8,2.21,2.21,0,0,1,8,10.2ZM8,7.3a.7.7,0,1,0,.7.7A.7.7,0,0,0,8,7.3Z" />
-      <path d="M13.13,13.88a.74.74,0,0,1-.53-.22.75.75,0,0,1,0-1.06,6.51,6.51,0,0,0,0-9.2.75.75,0,0,1,0-1.06.75.75,0,0,1,1.06,0,8,8,0,0,1,0,11.32A.73.73,0,0,1,13.13,13.88Zm-10.26,0a.73.73,0,0,1-.53-.22,8,8,0,0,1,0-11.32.75.75,0,0,1,1.06,0,.75.75,0,0,1,0,1.06,6.51,6.51,0,0,0,0,9.2.75.75,0,0,1,0,1.06A.74.74,0,0,1,2.87,13.88Zm8.21-2.05a.74.74,0,0,1-.67-.41.76.76,0,0,1,.15-.88,3.62,3.62,0,0,0,0-5.09.74.74,0,0,1,0-1.06.75.75,0,0,1,1.06,0A5.1,5.1,0,0,1,13.1,8a5,5,0,0,1-1.49,3.61.75.75,0,0,1-.2.15A.78.78,0,0,1,11.08,11.83Zm0-.75h0Zm-6.16.75a.79.79,0,0,1-.53-.22A5.1,5.1,0,0,1,2.9,8,5,5,0,0,1,4.39,4.39l.08-.08a.75.75,0,0,1,1,1.15A3.51,3.51,0,0,0,4.4,8a3.59,3.59,0,0,0,1,2.55.74.74,0,0,1,0,1.06A.75.75,0,0,1,4.92,11.83Z" />
+    <SvgIcon {...props} ref={ref} kind={theme.isChonk ? 'stroke' : 'path'}>
+      {theme.isChonk ? (
+        <Fragment>
+          <path d="m3.86,3.66c-1.14,1.09-1.86,2.63-1.86,4.34s.72,3.26,1.88,4.35" />
+          <path d="m5.97,10.52c-.74-.6-1.22-1.5-1.22-2.52s.48-1.92,1.21-2.51" />
+          <path d="m12.12,12.35c1.15-1.09,1.88-2.64,1.88-4.35s-.72-3.24-1.86-4.34" />
+          <path d="m10.04,5.49c.73.6,1.21,1.49,1.21,2.51s-.48,1.92-1.22,2.52" />
+          <path d="m10.03,10.52c.74-.6,1.22-1.5,1.22-2.52s-.48-1.92-1.21-2.51" />
+          <path d="m5.96,5.49c-.73.6-1.21,1.49-1.21,2.51s.48,1.92,1.22,2.52" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path d="M8,10.2A2.2,2.2,0,1,1,10.2,8,2.21,2.21,0,0,1,8,10.2ZM8,7.3a.7.7,0,1,0,.7.7A.7.7,0,0,0,8,7.3Z" />
+          <path d="M13.13,13.88a.74.74,0,0,1-.53-.22.75.75,0,0,1,0-1.06,6.51,6.51,0,0,0,0-9.2.75.75,0,0,1,0-1.06.75.75,0,0,1,1.06,0,8,8,0,0,1,0,11.32A.73.73,0,0,1,13.13,13.88Zm-10.26,0a.73.73,0,0,1-.53-.22,8,8,0,0,1,0-11.32.75.75,0,0,1,1.06,0,.75.75,0,0,1,0,1.06,6.51,6.51,0,0,0,0,9.2.75.75,0,0,1,0,1.06A.74.74,0,0,1,2.87,13.88Zm8.21-2.05a.74.74,0,0,1-.67-.41.76.76,0,0,1,.15-.88,3.62,3.62,0,0,0,0-5.09.74.74,0,0,1,0-1.06.75.75,0,0,1,1.06,0A5.1,5.1,0,0,1,13.1,8a5,5,0,0,1-1.49,3.61.75.75,0,0,1-.2.15A.78.78,0,0,1,11.08,11.83Zm0-.75h0Zm-6.16.75a.79.79,0,0,1-.53-.22A5.1,5.1,0,0,1,2.9,8,5,5,0,0,1,4.39,4.39l.08-.08a.75.75,0,0,1,1,1.15A3.51,3.51,0,0,0,4.4,8a3.59,3.59,0,0,0,1,2.55.74.74,0,0,1,0,1.06A.75.75,0,0,1,4.92,11.83Z" />
+        </Fragment>
+      )}
     </SvgIcon>
   );
 });