@mirohq/design-system-icons 0.59.0 → 0.60.0

package/react/smiley-plus.tsx

@@ -5,21 +5,55 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconSmileyPlus: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSmileyPlusNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9m7-1v6m3-3h-6'
+      />,
+      <path
+        fill='currentColor'
+        stroke='currentColor'
+        d='M8.4507 8.5h1v1h-1v-1ZM14.4507 8.5h1v1h-1v-1Z'
+      />,
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M7.1001 13c.017.0838.0362.1669.0574.2493.555 2.1563 2.5112 3.7507 4.8424 3.7507 2.4189 0 4.4367-1.7178 4.9-4h-2.0707c-.4119 1.1652-1.5231 2-2.8293 2-1.3052 0-2.4178-.8343-2.8296-2h-2.0702Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconSmileyPlusOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -44,4 +78,25 @@ export const IconSmileyPlus: IconComponentType = forwardRef(
   }
 )
 
+export const IconSmileyPlus: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSmileyPlusNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconSmileyPlusOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconSmileyPlus[iconSymbol] = true

package/react/smiley-sticker.tsx

@@ -5,21 +5,43 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconSmileySticker: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSmileyStickerNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M12.0493 4c-4.4183 0-8 3.5817-8 8 0 3.8179 2.6745 7.0111 6.2521 7.8085.1804.0355.3396-.0154.4774-.1441.1536-.1433.2705-.382.2705-.6644v-1c0-.3656.028-.7247.0821-1.0752-2.3474-.4112-4.1314-2.4596-4.1314-4.9248h2c0 1.5654 1.199 2.8508 2.7287 2.9879 1.1259-2.3584 3.533-3.9879 6.3206-3.9879h1c.2825 0 .5211-.1169.6644-.2705.1287-.1378.1796-.297.1441-.4774-.4337-1.9462-1.5765-3.6252-3.1432-4.7517-1.3102-.942-2.9168-1.4977-4.6525-1.5004h-.0128Zm6.5858 9h-.5858c-2.7614 0-5 2.2386-5 5v.5858l5.5858-5.5858Zm-16.5858-1c0-5.5229 4.4772-10 10-10h.014c2.1708.003 4.1791.6974 5.8167 1.8749 2.525 1.8151 4.1693 4.778 4.1693 8.1251v.4142l-.2929.2929-9 9-.2929.2929h-.4142c-5.5228 0-10-4.4772-10-10Zm5.9507-4h2v2h-2v-2Zm6 0h2v2h-2v-2Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconSmileyStickerOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -44,4 +66,25 @@ export const IconSmileySticker: IconComponentType = forwardRef(
   }
 )
 
+export const IconSmileySticker: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSmileyStickerNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconSmileyStickerOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconSmileySticker[iconSymbol] = true

package/react/smiley.tsx

@@ -5,21 +5,55 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconSmiley: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSmileyNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9Z'
+      />,
+      <path
+        fill='currentColor'
+        stroke='currentColor'
+        d='M8.4507 8.5h1v1h-1v-1ZM14.4507 8.5h1v1h-1v-1Z'
+      />,
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M7.1001 13c.017.0838.0362.1669.0574.2493.555 2.1563 2.5112 3.7507 4.8424 3.7507 2.4189 0 4.4367-1.7178 4.9-4h-2.0707c-.4119 1.1652-1.5231 2-2.8293 2-1.3052 0-2.4178-.8343-2.8296-2h-2.0702Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconSmileyOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -44,4 +78,15 @@ export const IconSmiley: IconComponentType = forwardRef(
   }
 )
 
+export const IconSmiley: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSmileyNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconSmileyOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconSmiley[iconSymbol] = true

package/react/social-facebook.tsx

@@ -32,7 +32,7 @@ export const IconSocialFacebook: IconComponentType = forwardRef(
         stroke='currentColor'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
-        d='M6.9996 10h.0007'
+        d='M6.9995 10h.0007'
       />,
       <path
         stroke='currentColor'

package/react/social-instagram.tsx

@@ -38,7 +38,7 @@ export const IconSocialInstagram: IconComponentType = forwardRef(
         stroke='currentColor'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
-        d='M11.9998 12h.0007'
+        d='M11.9995 12h.0007'
       />,
       <path
         stroke='currentColor'

package/react/social-linkedin.tsx

@@ -32,7 +32,7 @@ export const IconSocialLinkedin: IconComponentType = forwardRef(
         stroke='currentColor'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
-        d='M11.9998 7h.0007'
+        d='M11.9995 7h.0007'
       />,
       <path
         stroke='currentColor'

package/react/social-looker.tsx

@@ -26,11 +26,11 @@ export const IconSocialLooker: IconComponentType = forwardRef(
       },
       <path
         fill='currentColor'
-        d='M12.1602 2a1.7488 1.7488 0 0 0-1.4506 2.7243l.7469-.7459a.7375.7375 0 1 1 .7006.5067.724.724 0 0 1-.2297-.0368l-.7458.7458a1.7476 1.7476 0 1 0 .9786-3.1941ZM11.4653 7.0932a2.7164 2.7164 0 0 0-.5446-1.637l-.9692.968a1.3896 1.3896 0 0 1-.2655 1.6772l.5268 1.2873a2.7316 2.7316 0 0 0 1.2525-2.2955Z'
+        d='M12.1601 2a1.7487 1.7487 0 0 0-1.4506 2.7243l.7469-.7459a.7375.7375 0 1 1 .4709.4699l-.7459.7458a1.7478 1.7478 0 1 0 .9787-3.1941ZM11.4653 7.0932a2.7164 2.7164 0 0 0-.5446-1.637l-.9692.968a1.3896 1.3896 0 0 1-.2655 1.6772l.5268 1.2873a2.7316 2.7316 0 0 0 1.2525-2.2955Z'
       />,
       <path
         fill='currentColor'
-        d='M8.7565 8.4837h-.0253a1.3906 1.3906 0 1 1 .7638-2.5525l.9597-.9597a2.7327 2.7327 0 1 0-1.7235 4.8554 2.795 2.795 0 0 0 .552-.0548l-.5267-1.2884ZM12.1973 9.597a6.2014 6.2014 0 0 0-1.7909.2622l.7679 1.8763a4.2305 4.2305 0 0 1 1.0219-.1243c1.9957.0006 3.713 1.4107 4.1019 3.3681.3889 1.9574-.659 3.9169-2.5028 4.6803-1.8439.7635-3.9703.1181-5.0788-1.5413-1.1086-1.6594-.8907-3.8708.5205-5.2819a4.2245 4.2245 0 0 1 .9977-.7375l-.7596-1.8709c-2.8313 1.3866-4.1718 4.6766-3.1158 7.647 1.056 2.9705 4.1725 4.6761 7.2437 3.9643 3.0712-.7117 5.1197-3.6143 4.7614-6.7464-.3582-3.1322-3.0093-5.4972-6.1619-5.497l-.0052.001Z'
+        d='M8.7566 8.4837h-.0253a1.3906 1.3906 0 1 1 .7638-2.5525l.9597-.9597a2.7327 2.7327 0 1 0-1.7235 4.8554 2.795 2.795 0 0 0 .552-.0548l-.5267-1.2884ZM12.1973 9.597a6.2014 6.2014 0 0 0-1.7909.2622l.7679 1.8763a4.2305 4.2305 0 0 1 1.0219-.1243c1.9957.0006 3.713 1.4107 4.1019 3.3681.3889 1.9574-.659 3.9169-2.5028 4.6803-1.8439.7635-3.9703.1181-5.0788-1.5413-1.1086-1.6594-.8907-3.8708.5205-5.2819a4.2245 4.2245 0 0 1 .9977-.7375l-.7596-1.8709c-2.8313 1.3866-4.1718 4.6766-3.1158 7.647 1.056 2.9705 4.1725 4.6761 7.2437 3.9643 3.0712-.7117 5.1197-3.6143 4.7614-6.7464-.3582-3.1322-3.0093-5.4972-6.1619-5.497l-.0052.001Z'
       />
     )
   }

package/react/social-twitter.tsx

@@ -32,7 +32,7 @@ export const IconSocialTwitter: IconComponentType = forwardRef(
         stroke='currentColor'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
-        d='M11.9998 12h.0007'
+        d='M11.9995 12h.0007'
       />,
       <path
         stroke='currentColor'

package/react/social-youtube.tsx

@@ -32,7 +32,7 @@ export const IconSocialYoutube: IconComponentType = forwardRef(
         stroke='currentColor'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
-        d='M17.9998 12h.0007'
+        d='M17.9995 12h.0007'
       />,
       <path
         stroke='currentColor'

package/react/sort-ascending.tsx

@@ -5,21 +5,43 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconSortAscending: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSortAscendingNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M17 10v9M13 15l4 4 4-4M3 6h14m-14 6h8m-8 6h6'
+      />
+    )
+  }
+)
+
+export const IconSortAscendingOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -40,4 +62,25 @@ export const IconSortAscending: IconComponentType = forwardRef(
   }
 )
 
+export const IconSortAscending: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSortAscendingNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconSortAscendingOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconSortAscending[iconSymbol] = true

package/react/sort-descending.tsx

@@ -5,21 +5,43 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconSortDescending: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSortDescendingNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M17 14v-9M21 9l-4-4-4 4M3 18h14m-14-6h8m-8-6h6'
+      />
+    )
+  }
+)
+
+export const IconSortDescendingOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -40,4 +62,25 @@ export const IconSortDescending: IconComponentType = forwardRef(
   }
 )
 
+export const IconSortDescending: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSortDescendingNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconSortDescendingOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconSortDescending[iconSymbol] = true

package/react/sparks-filled.tsx

@@ -5,21 +5,47 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconSparksFilled: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSparksFilledNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M19.5 2h-1c0 1.3808-1.1193 2.5-2.5 2.5v1.0001c1.3807 0 2.4999 1.1192 2.5 2.4999h1c.0001-1.3807 1.1193-2.4999 2.5-2.4999v-1.0001c-1.3807 0-2.5-1.1192-2.5-2.5Zm-14 13.9995h-1c0 1.3808-1.1193 2.5-2.5 2.5v1.0001c1.3807 0 2.5 1.1192 2.5 2.4999h1c0-1.3807 1.1193-2.4999 2.5-2.4999v-1.0001c-1.3807 0-2.5-1.1192-2.5-2.5Zm7.966-12.7314c-.2438-1.6922-2.6842-1.6893-2.9279-.0001-.5434 3.767-3.503 6.7267-7.2701 7.2701-1.6892.2437-1.6921 2.6841 0 2.9279 3.767.5429 6.7267 3.5028 7.27 7.2699.2433 1.6866 2.6838 1.695 2.928.0002.5429-3.7675 3.5026-6.7272 7.2701-7.2701 1.6949-.2442 1.6863-2.6847-.0002-2.9279-3.7671-.5434-6.727-3.503-7.2699-7.27Zm-7.8408 8.7338c2.9664-1.0662 5.3105-3.4103 6.3767-6.3767 1.0661 2.9664 3.4104 5.3105 6.3767 6.3767-2.9665 1.0661-5.3106 3.4102-6.3767 6.3768-1.0662-2.9664-3.4102-5.3107-6.3767-6.3768Z'
+        clipRule='evenodd'
+      />,
+      <path
+        fill='currentColor'
+        d='M20.6773 11.5208c-4.2483-.6128-7.5863-3.9505-8.1986-8.1988-.0797-.5532-.8781-.553-.9579 0-.6128 4.2483-3.9505 7.586-8.1987 8.1988-.5532.0798-.5533.8782-.0001.9579 4.2483.6123 7.586 3.9503 8.1988 8.1986.0797.5531.8782.5534.9579.0003.6122-4.2488 3.9501-7.5867 8.1989-8.1989.5532-.0797.5528-.8782-.0003-.9579Z'
+      />
+    )
+  }
+)
+
+export const IconSparksFilledOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -46,4 +72,25 @@ export const IconSparksFilled: IconComponentType = forwardRef(
   }
 )
 
+export const IconSparksFilled: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSparksFilledNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconSparksFilledOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconSparksFilled[iconSymbol] = true

package/react/sparks.tsx

@@ -5,21 +5,43 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconSparks: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSparksNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M13.4689 3.2058c-.2412-1.6939-2.6914-1.7004-2.9338-.0005-.542 3.801-3.5288 6.788-7.3298 7.3299-1.7.2424-1.6933 2.6925.0005 2.9338 3.8004.5413 6.7875 3.5275 7.3294 7.3276.2419 1.6957 2.6917 1.6976 2.9336-.0001.5414-3.8002 3.5275-6.7862 7.3277-7.3277 1.6976-.2419 1.6959-2.6917.0001-2.9335-3.8001-.542-6.7863-3.5291-7.3277-7.3295Zm-7.9029 8.7961c2.9975-1.0704 5.3654-3.4384 6.4358-6.4358 1.0699 2.997 3.4373 5.3652 6.4342 6.4358-2.9968 1.07-5.3641 3.4373-6.4342 6.4341-1.0705-2.9969-3.4386-5.3642-6.4358-6.4341Zm13.934-10.0019h-1c0 1.3808-1.1193 2.5-2.5 2.5v1.0001c1.3806 0 2.4999 1.1192 2.5 2.4999h1c0-1.3807 1.1193-2.4999 2.5-2.4999v-1.0001c-1.3808 0-2.5-1.1192-2.5-2.5Zm-14 13.9995h-1c0 1.3808-1.1193 2.5-2.5 2.5v1.0001c1.3806 0 2.4999 1.1192 2.5 2.4999h1c0-1.3807 1.1193-2.4999 2.5-2.4999v-1.0001c-1.3807 0-2.5-1.1192-2.5-2.5Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconSparksOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -31,7 +53,7 @@ export const IconSparks: IconComponentType = forwardRef(
       />,
       <path
         fill='currentColor'
-        d='M19.7722 2.5045c.0886-.1962.3671-.1962.4557 0l.6667 1.476a.2496.2496 0 0 0 .1249.125l1.4761.6667c.1961.0885.1961.367 0 .4556l-1.4761.6667a.2496.2496 0 0 0-.1249.125l-.6667 1.476c-.0886.1962-.3671.1962-.4557 0l-.6667-1.476a.2496.2496 0 0 0-.1249-.125l-1.4761-.6667c-.1961-.0885-.1961-.367 0-.4556l1.4761-.6667a.2496.2496 0 0 0 .1249-.125l.6667-1.476ZM19.7722 16.5045c.0886-.1962.3671-.1962.4557 0l.6667 1.4761a.25.25 0 0 0 .1249.1249l1.4761.6667c.1961.0885.1961.3671 0 .4556l-1.4761.6667a.25.25 0 0 0-.1249.1249l-.6667 1.4761c-.0886.1962-.3671.1962-.4557 0l-.6667-1.4761a.25.25 0 0 0-.1249-.1249l-1.4761-.6667c-.1961-.0885-.1961-.3671 0-.4556l1.4761-.6667a.25.25 0 0 0 .1249-.1249l.6667-1.4761Z'
+        d='M19.7722 2.5045c.0885-.1962.3671-.1962.4556 0l.6667 1.476a.2504.2504 0 0 0 .1249.125l1.4761.6666c.1962.0886.1962.3671 0 .4557l-1.4761.6667a.2504.2504 0 0 0-.1249.125l-.6667 1.476c-.0885.1962-.3671.1962-.4556 0l-.6667-1.476a.2502.2502 0 0 0-.125-.125l-1.476-.6667c-.1962-.0886-.1962-.367 0-.4557l1.476-.6666a.2502.2502 0 0 0 .125-.125l.6667-1.476ZM19.7722 16.5045c.0885-.1962.3671-.1962.4556 0l.6667 1.476a.2505.2505 0 0 0 .1249.125l1.4761.6667c.1962.0885.1962.3671 0 .4556l-1.4761.6667a.2507.2507 0 0 0-.1249.1249l-.6667 1.4761c-.0885.1962-.3671.1962-.4556 0l-.6667-1.4761a.2505.2505 0 0 0-.125-.1249l-1.476-.6667c-.1962-.0885-.1962-.3671 0-.4556l1.476-.6667a.2504.2504 0 0 0 .125-.125l.6667-1.476Z'
       />,
       <path
         stroke='currentColor'
@@ -42,4 +64,15 @@ export const IconSparks: IconComponentType = forwardRef(
   }
 )
 
+export const IconSparks: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSparksNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconSparksOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconSparks[iconSymbol] = true

package/react/speaker-cross.tsx

@@ -5,21 +5,46 @@
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
 import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
-export const IconSpeakerCross: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconSpeakerCrossNew: IconComponentType = forwardRef(
+  (props, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
+      StyledIcon,
+      {
+        ...props,
+        debug,
+        'aria-hidden': true,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        ref: forwardRef,
+      },
+      <path
+        fill='currentColor'
+        d='m10.5 19-.7071.7071.7071.2929v-1Zm2.5 0v1l1-1h-1Zm-6.5-4 .7071-.7071-.2929-.2929h-.4142v1Zm0-6v1h.4142l.293-.2929-.7072-.7071Zm4-4v-1l-.7071.2929.7071.7071Zm2.5 0h1l-1-1v1Zm-2.5 15h2.5v-2h-2.5v2Zm-4.7071-4.2929 4 4 1.4142-1.4142-4-4-1.4142 1.4142Zm.7071-1.7071h-1.5v2h1.5v-2Zm-2.5-1v-2h-2v2h2Zm1-3h1.5v-2h-1.5v2Zm4.7929-5.7071-4 4 1.4142 1.4142 4-4-1.4142-1.4142Zm3.2071-.2929h-2.5v2h2.5v-2Zm1 15v-14h-2v14h2Zm-10-8c0-.5523.4477-1 1-1v-2c-1.6568 0-3 1.3431-3 3h2Zm1 3c-.5523 0-1-.4477-1-1h-2c0 1.6569 1.3432 3 3 3v-2Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m21 10-5 5m0-5 5 5'
+      />
+    )
+  }
+)
+
+export const IconSpeakerCrossOld: IconComponentType = forwardRef(
+  (props, forwardRef) => {
     const [debug] = useLocalStorage('DEBUG_ICON', false)
     return createElement(
       StyledIcon,
       {
         ...props,
-        weight,
         debug,
         'aria-hidden': true,
-        size,
         viewBox: '0 0 24 24',
         fill: 'none',
         ref: forwardRef,
@@ -39,4 +64,25 @@ export const IconSpeakerCross: IconComponentType = forwardRef(
   }
 )
 
+export const IconSpeakerCross: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconSpeakerCrossNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconSpeakerCrossOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconSpeakerCross[iconSymbol] = true