@mirohq/design-system-icons 0.59.1 → 0.60.0

package/react/presentation-plus.tsx

@@ -5,21 +5,49 @@
 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 IconPresentationPlus: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconPresentationPlusNew: 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='M11 1v2h-6c-1.7254 0-3 1.4831-3 3.1539v9.6923c0 1.6707 1.2746 3.1538 3 3.1538h2.583l-1.25 3h2.1667l1.25-3h4.5l1.25 3h2.1667l-1.25-3h2.5836c1.7254 0 3-1.4831 3-3.1538v-1.8462h-2v1.8462c0 .7083-.5162 1.1538-1 1.1538h-14c-.4838 0-1-.4455-1-1.1538v-9.6923c0-.7084.5162-1.1539 1-1.1539h10v-2h-2v-2h-2Z'
+        clipRule='evenodd'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M15 8h8m-4-4v8'
+      />
+    )
+  }
+)
+
+export const IconPresentationPlusOld: 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 +68,25 @@ export const IconPresentationPlus: IconComponentType = forwardRef(
   }
 )
 
+export const IconPresentationPlus: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconPresentationPlusNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconPresentationPlusOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconPresentationPlus[iconSymbol] = true

package/react/previous.tsx

@@ -5,21 +5,48 @@
 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 IconPrevious: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconPreviousNew: 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='M5 4v16'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m19 7.4142-1.155-1.155-8.845 5.307v.8676l8.845 5.307 1.155-1.155v-9.1716Z'
+      />
+    )
+  }
+)
+
+export const IconPreviousOld: 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,
@@ -37,4 +64,25 @@ export const IconPrevious: IconComponentType = forwardRef(
   }
 )
 
+export const IconPrevious: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconPreviousNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconPreviousOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconPrevious[iconSymbol] = true

package/react/prohibit.tsx

@@ -5,21 +5,48 @@
 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 IconProhibit: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconProhibitNew: 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'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M20.9966 12c0 4.9706-4.0295 9-9 9-4.9706 0-9-4.0294-9-9s4.0294-9 9-9c4.9705 0 9 4.0294 9 9Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m5.5 18.5 13-13'
+      />
+    )
+  }
+)
+
+export const IconProhibitOld: 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,
@@ -33,4 +60,25 @@ export const IconProhibit: IconComponentType = forwardRef(
   }
 )
 
+export const IconProhibit: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconProhibitNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconProhibitOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconProhibit[iconSymbol] = true

package/react/proto-slider.tsx

@@ -30,7 +30,7 @@ export const IconProtoSlider: IconComponentType = forwardRef(
       />,
       <path
         fill='currentColor'
-        d='M2 12c0-.5523.4477-1 1-1h7v2h-7c-.5523 0-1-.4477-1-1ZM17 11h4c.5523 0 1 .4477 1 1'
+        d='M3 11c-.5523 0-1 .4477-1 1s.4477 1 1 1v-2Zm0 2h7v-2h-7v2ZM21 13c.5523 0 1-.4477 1-1s-.4477-1-1-1v2Zm-4 0h4v-2h-4v2Z'
       />
     )
   }

package/react/prototype-format.tsx

@@ -5,21 +5,42 @@
 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 IconPrototypeFormat: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconPrototypeFormatNew: 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'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M10 7h4m-8-2v14c0 1.1046.8954 2 2 2h8c1.1046 0 2-.8954 2-2v-14c0-1.1046-.8954-2-2-2h-8c-1.1046 0-2 .8954-2 2Z'
+      />
+    )
+  }
+)
+
+export const IconPrototypeFormatOld: 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,
@@ -28,7 +49,28 @@ export const IconPrototypeFormat: IconComponentType = forwardRef(
         stroke='currentColor'
         strokeLinecap='round'
         strokeWidth='var(--svg-stroke-width)'
-        d='M11 7h2m-7-2v14c0 1.1046.8954 2 2 2h8c1.1046 0 2-.8954 2-2v-14c0-1.1046-.8954-2-2-2h-8c-1.1046 0-2 .8954-2 2Z'
+        d='M10 7h4m-8-2v14c0 1.1046.8954 2 2 2h8c1.1046 0 2-.8954 2-2v-14c0-1.1046-.8954-2-2-2h-8c-1.1046 0-2 .8954-2 2Z'
+      />
+    )
+  }
+)
+
+export const IconPrototypeFormat: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconPrototypeFormatNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconPrototypeFormatOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
       />
     )
   }

package/react/push-pin-filled.tsx

@@ -5,21 +5,50 @@
 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 IconPushPinFilled: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconPushPinFilledNew: 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'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m6.75 17.25-3.75 3.75'
+      />,
+      <path
+        fill='currentColor'
+        d='m21 7.5-4.5-4.5-5.166 4.7941c-2.4905-.9047-5.3367-.2914-7.334 1.7059l10.5 10.5c1.9973-1.9973 2.6106-4.8435 1.7059-7.334l4.7941-5.166Z'
+      />,
+      <path
+        fill='currentColor'
+        d='m16.5 3 .7071-.7071-1.3873-.0259.6802.733Zm4.5 4.5.733.6802-.0259-1.3873-.7071.7071Zm-9.666.2941-.3415.94.5741.2085.4476-.4155-.6802-.733Zm-7.334 1.7059-.7071-.7071v1.4142l.7071-.7071Zm10.5 10.5-.7071.7071h1.4142l-.7071-.7071Zm1.7059-7.334-.733-.6802-.4155.4476.2086.5741.9399-.3415Zm-.413-8.9589 4.5 4.5 1.4142-1.4142-4.5-4.5-1.4142 1.4142Zm-3.7787 4.82 5.166-4.7941-1.3604-1.466-5.166 4.7941 1.3604 1.466Zm-7.307 1.68c1.7287-1.7288 4.1681-2.2422 6.2853-1.473l.6829-1.8799c-2.8636-1.0403-6.1168-.327-8.3825 1.9387l1.4142 1.4142Zm10.5588 2.8004c.7691 2.1172.2557 4.5566-1.4731 6.2854l1.4142 1.4142c2.2658-2.2657 2.979-5.5188 1.9387-8.3825l-1.8798.6829Zm5.001-6.1877-4.7941 5.166 1.466 1.3604 4.7941-5.166-1.466-1.3604Zm-5.0599 12.4731-10.5-10.5-1.4142 1.4142 10.5 10.5 1.4142-1.4142Z'
+      />
+    )
+  }
+)
+
+export const IconPushPinFilledOld: 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 +73,25 @@ export const IconPushPinFilled: IconComponentType = forwardRef(
   }
 )
 
+export const IconPushPinFilled: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconPushPinFilledNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconPushPinFilledOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconPushPinFilled[iconSymbol] = true

package/react/push-pin.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 IconPushPin: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconPushPinNew: 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'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m9 15-5.5 5.5'
+      />,
+      <path
+        fill='currentColor'
+        d='m16.5 3 .7071-.7071-1.3873-.0259.6802.733Zm4.5 4.5.733.6802-.0259-1.3873-.7071.7071Zm-9.666.2941-.3415.94.5741.2085.4476-.4155-.6802-.733Zm-7.6659 2.0378-.707-.7071v1.4142l.707-.7071Zm10.5 10.5-.7071.7071h1.4142l-.7071-.7071Zm2.0378-7.6659-.733-.6802-.4155.4476.2086.5741.9399-.3415Zm-.413-8.9589 4.5 4.5 1.4142-1.4142-4.5-4.5-1.4142 1.4142Zm-3.7787 4.82 5.166-4.7941-1.3604-1.466-5.166 4.7941 1.3604 1.466Zm-7.307 1.68c1.7287-1.7288 4.1681-2.2422 6.2853-1.473l.6829-1.8799c-2.8636-1.0403-6.1168-.327-8.3825 1.9387l1.4142 1.4142Zm-.332.3319.332-.3319-1.4143-1.4142-.3319.3319 1.4142 1.4142Zm10.5 9.0858-10.5-10.5-1.4142 1.4142 10.5 10.5 1.4142-1.4142Zm-1.0823-.3319-.3319.3319 1.4142 1.4142.3319-.3319-1.4142-1.4142Zm1.4731-6.2854c.7691 2.1172.2557 4.5566-1.4731 6.2854l1.4142 1.4142c2.2658-2.2657 2.979-5.5188 1.9387-8.3825l-1.8798.6829Zm5.001-6.1877-4.7941 5.166 1.466 1.3604 4.7941-5.166-1.466-1.3604Z'
+      />
+    )
+  }
+)
+
+export const IconPushPinOld: 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 +65,15 @@ export const IconPushPin: IconComponentType = forwardRef(
   }
 )
 
+export const IconPushPin: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconPushPinNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconPushPinOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconPushPin[iconSymbol] = true

package/react/question-mark-circle.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 IconQuestionMarkCircle: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconQuestionMarkCircleNew: 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='M4 12c0-4.4183 3.5817-8 8-8s8 3.5817 8 8-3.5817 8-8 8-8-3.5817-8-8Zm8-10c-5.5229 0-10 4.4771-10 10 0 5.5228 4.4771 10 10 10 5.5228 0 10-4.4772 10-10 0-5.5229-4.4772-10-10-10Zm0 6c-1.1046 0-2 .8954-2 2h-2c0-2.2091 1.7909-4 4-4 2.2091 0 4 1.7909 4 4 0 1.8638-1.2748 3.4299-3 3.874v1.1221h-2v-1.9961l1-1c1.1046 0 2-.8954 2-2s-.8954-2-2-2Zm1 8v2h-2v-2h2Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconQuestionMarkCircleOld: 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 +61,25 @@ export const IconQuestionMarkCircle: IconComponentType = forwardRef(
   }
 )
 
+export const IconQuestionMarkCircle: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconQuestionMarkCircleNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconQuestionMarkCircleOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconQuestionMarkCircle[iconSymbol] = true

package/react/question-mark.tsx

@@ -5,21 +5,41 @@
 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 IconQuestionMark: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconQuestionMarkNew: 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='M11 19h2v2h-2v-2ZM12 14v-1l-1 1h1Zm4-5c0 1.0314-.4843 2.034-1.2651 2.7932-.7848.7629-1.7941 1.2068-2.7349 1.2068v2c1.5445 0 3.0351-.7093 4.1291-1.7729 1.0978-1.0674 1.8709-2.5648 1.8709-4.2271h-2Zm-8 0c0-1.0314.4843-2.034 1.2651-2.7932.7848-.763 1.7941-1.2068 2.7349-1.2068v-2c-1.5445 0-3.0351.7093-4.129 1.7729-1.0979 1.0674-1.871 2.5648-1.871 4.2271h2Zm4-4c.9408 0 1.9501.4439 2.7349 1.2068.7808.7592 1.2651 1.7618 1.2651 2.7932h2c0-1.6623-.7731-3.1597-1.8709-4.2271-1.094-1.0636-2.5846-1.7729-4.1291-1.7729v2Zm-1 9v3h2v-3h-2Z'
+      />
+    )
+  }
+)
+
+export const IconQuestionMarkOld: 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 +64,25 @@ export const IconQuestionMark: IconComponentType = forwardRef(
   }
 )
 
+export const IconQuestionMark: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconQuestionMarkNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconQuestionMarkOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconQuestionMark[iconSymbol] = true

package/react/quotes.tsx

@@ -5,21 +5,42 @@
 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 IconQuotes: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconQuotesNew: 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'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M10 13h-6c-.5523 0-1-.3557-1-1v-6c0-.5523.4478-1 1-1h5c.5523 0 1 .3557 1 1v7Zm0 0c0 4.6667-3 6-3 6m14-6h-6c-.5523 0-1-.3557-1-1v-6c0-.6443.4477-1 1-1h5c.5523 0 1 .3557 1 1v7Zm0 0c0 4.6667-3 6-3 6'
+      />
+    )
+  }
+)
+
+export const IconQuotesOld: 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 +60,15 @@ export const IconQuotes: IconComponentType = forwardRef(
   }
 )
 
+export const IconQuotes: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconQuotesNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconQuotesOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconQuotes[iconSymbol] = true