@mirohq/design-system-icons 0.59.1 → 0.60.0

package/react/notepad.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 IconNotepad: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconNotepadNew: 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 4h14v17h-14v-17Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M8 11h8M8 15h8'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M8 2v4M12 2v4M16 2v4'
+      />
+    )
+  }
+)
+
+export const IconNotepadOld: 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 +73,15 @@ export const IconNotepad: IconComponentType = forwardRef(
   }
 )
 
+export const IconNotepad: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconNotepadNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconNotepadOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconNotepad[iconSymbol] = true

package/react/number.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 IconNumber: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconNumberNew: 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='M4 9h17m-18 6h17m-9.5-12-3 18m9.5-18-3 18'
+      />
+    )
+  }
+)
+
+export const IconNumberOld: 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,
@@ -27,11 +48,22 @@ export const IconNumber: IconComponentType = forwardRef(
       <path
         fill='currentColor'
         fillRule='evenodd'
-        d='M11.4864 3.1645c.0908-.5448-.2772-1.06-.822-1.1508-.5448-.0908-1.06.2772-1.1508.822l-.8608 5.1646h-4.6528c-.5523 0-1 .4478-1 1 0 .5523.4477 1 1 1h4.3195l-.6667 4h-4.6528c-.5523 0-1 .4478-1 1 0 .5523.4477 1 1 1h4.3195l-.8059 4.8354c-.0908.5448.2772 1.06.822 1.1508.5448.0908 1.06-.2772 1.1508-.822l.8607-5.1642h4.4724l-.8059 4.8354c-.0908.5448.2772 1.06.822 1.1508.5448.0908 1.06-.2772 1.1508-.822l.8607-5.1642h4.1529c.5523 0 1-.4477 1-1 0-.5522-.4477-1-1-1h-3.8196l.6667-4h4.1529c.5523 0 1-.4477 1-1 0-.5522-.4477-1-1-1h-3.8196l.806-4.8358c.0908-.5448-.2772-1.06-.822-1.1508-.5448-.0908-1.06.2772-1.1508.822l-.8608 5.1646h-4.4724l.806-4.8358Zm2.6664 10.8358.6667-4h-4.4724l-.6667 4h4.4724Z'
+        d='M11.4864 3.1645c.0908-.5448-.2772-1.06-.822-1.1508-.5448-.0908-1.06.2772-1.1508.822l-.8608 5.1646h-4.6528c-.5523 0-1 .4477-1 1s.4477 1 1 1h4.3195l-.6667 4h-4.6528c-.5523 0-1 .4477-1 1s.4477 1 1 1h4.3195l-.8059 4.8354c-.0908.5448.2772 1.06.822 1.1508.5448.0908 1.06-.2773 1.1508-.822l.8607-5.1642h4.4724l-.8059 4.8354c-.0908.5448.2772 1.06.822 1.1508.5448.0908 1.06-.2773 1.1508-.822l.8607-5.1642h4.1529c.5523 0 1-.4477 1-1s-.4477-1-1-1h-3.8196l.6667-4h4.1529c.5523 0 1-.4477 1-1s-.4477-1-1-1h-3.8196l.806-4.8358c.0908-.5448-.2772-1.06-.822-1.1508-.5448-.0908-1.06.2772-1.1508.822l-.8608 5.1646h-4.4724l.806-4.8358Zm2.6664 10.8358.6667-4h-4.4724l-.6667 4h4.4724Z'
         clipRule='evenodd'
       />
     )
   }
 )
 
+export const IconNumber: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconNumberNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconNumberOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconNumber[iconSymbol] = true

package/react/office.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 IconOffice: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconOfficeNew: 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='M9 7h2v2h-2zM13 7h2v2h-2zM9 11h2v2h-2zM13 11h2v2h-2zM5 3v-1l-1 1h1Zm14 0h1l-1-1v1Zm-9 18v1l1-1h-1Zm0-5v-1l-1 1h1Zm4 0h1l-1-1v1Zm0 5h-1l1 1v-1Zm-9-17h14v-2h-14v2Zm1 15v-16h-2v16h2Zm1 1c-.5523 0-1-.4477-1-1h-2c0 1.6569 1.3431 3 3 3v-2Zm3 0h-3v2h3v-2Zm1 1v-5h-2v5h2Zm-1-4h4v-2h-4v2Zm3-1v5h2v-5h-2Zm4 4h-3v2h3v-2Zm1-1c0 .5523-.4477 1-1 1v2c1.6569 0 3-1.3431 3-3h-2Zm0-16v16h2v-16h-2Z'
+      />
+    )
+  }
+)
+
+export const IconOfficeOld: 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 +59,15 @@ export const IconOffice: IconComponentType = forwardRef(
   }
 )
 
+export const IconOffice: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconOfficeNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconOfficeOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconOffice[iconSymbol] = true

package/react/org-chart.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 IconOrgChart: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconOrgChartNew: 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='M4 17c0-.5523.4477-1 1-1h4c.5523 0 1 .4477 1 1v3c0 .5523-.4477 1-1 1h-4c-.5523 0-1-.4477-1-1v-3ZM14 17c0-.5523.4477-1 1-1h4c.5523 0 1 .4477 1 1v3c0 .5523-.4477 1-1 1h-4c-.5523 0-1-.4477-1-1v-3ZM9 5c0-.5523.4477-1 1-1h4c.5523 0 1 .4477 1 1v3c0 .5523-.4477 1-1 1h-4c-.5523 0-1-.4477-1-1v-3Z'
+      />,
+      <path
+        fill='currentColor'
+        d='M7 13v-1l-1 1h1Zm10 0h1l-1-1v1Zm-11 0v3h2v-3h-2Zm10 0v3h2v-3h-2Zm-9 1h5v-2h-5v2Zm5 0h5v-2h-5v2Zm1-1v-4h-2v4h2Z'
+      />
+    )
+  }
+)
+
+export const IconOrgChartOld: 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,
@@ -35,4 +61,25 @@ export const IconOrgChart: IconComponentType = forwardRef(
   }
 )
 
+export const IconOrgChart: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconOrgChartNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconOrgChartOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconOrgChart[iconSymbol] = true

package/react/orientation-horizontal.tsx

@@ -5,21 +5,53 @@
 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 IconOrientationHorizontal: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconOrientationHorizontalNew: 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,
+      },
+      <rect
+        width={18}
+        height={8}
+        x={3}
+        y={3}
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={1}
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m19 15 3 3-3 3M2 18h19'
+      />
+    )
+  }
+)
+
+export const IconOrientationHorizontalOld: 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,
@@ -35,4 +67,25 @@ export const IconOrientationHorizontal: IconComponentType = forwardRef(
   }
 )
 
+export const IconOrientationHorizontal: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconOrientationHorizontalNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconOrientationHorizontalOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconOrientationHorizontal[iconSymbol] = true

package/react/orientation-vertical.tsx

@@ -5,21 +5,59 @@
 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 IconOrientationVertical: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconOrientationVerticalNew: 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,
+      },
+      <rect
+        width={8}
+        height={18}
+        x={3}
+        y={3}
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={1}
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M18 2v18'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m21 18-3 3-3-3'
+      />
+    )
+  }
+)
+
+export const IconOrientationVerticalOld: 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,
@@ -35,4 +73,25 @@ export const IconOrientationVertical: IconComponentType = forwardRef(
   }
 )
 
+export const IconOrientationVertical: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconOrientationVerticalNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconOrientationVerticalOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconOrientationVertical[iconSymbol] = true

package/react/paint-bucket.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 IconPaintBucket: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconPaintBucketNew: 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='m3.4142 11.5858 7.5858-7.5858 7 7-7.5858 7.5858c-.781.781-2.0474.781-2.8284 0l-4.1716-4.1716c-.781-.781-.781-2.0474 0-2.8284ZM12 10l-6-6'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M21 19c0 1.1046-.8954 2-2 2s-2-.8954-2-2c0-1.5 2-4 2-4s2 2.5 2 4Z'
+      />
+    )
+  }
+)
+
+export const IconPaintBucketOld: 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 +71,25 @@ export const IconPaintBucket: IconComponentType = forwardRef(
   }
 )
 
+export const IconPaintBucket: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconPaintBucketNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconPaintBucketOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconPaintBucket[iconSymbol] = true

package/react/palette.tsx

@@ -5,21 +5,45 @@
 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 IconPalette: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconPaletteNew: 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='m4.5 17-.831.5563 1.8237-.4361-.9927-.1202Zm6.5 0-.9111-.4122.9111.4122Zm3 3.9.2213.9752-.2213-.9752Zm-10-8.9c0-4.4183 3.5817-8 8-8v-2c-5.5229 0-10 4.4771-10 10h2Zm8-8c4.4183 0 8 3.5817 8 8h2c0-5.5229-4.4772-10-10-10v2Zm-6.669 12.4437c-.8472-1.2657-1.331-2.7919-1.331-4.4437h-2c0 2.0485.6017 3.9618 1.669 5.5563l1.662-1.1126Zm.1617.6765c.0633-.5225.3776-1.6209 1.0085-2.5642.6242-.9331 1.4404-1.556 2.4988-1.556v-2c-1.983 0-3.336 1.2104-4.1612 2.444-.8183 1.2234-1.2334 2.625-1.3316 3.4358l1.9855.2404Zm3.5073-4.1202c.4558 0 1.0071.238 1.3095.7194.2764.4401.4823 1.3147-.2206 2.8684l1.8222.8244c.8805-1.9463.8363-3.5717.0919-4.7566-.7184-1.1436-1.9588-1.6556-3.003-1.6556v2Zm11-1c0 3.8224-2.6748 7.1201-6.2213 7.9248l.4426 1.9504c4.4695-1.0142 7.7787-5.1312 7.7787-9.8752h-2Zm-9.9111 4.5878c-.4226.9341-.6064 1.8-.5296 2.5823.079.8037.429 1.4613.9601 1.9379 1.0138.9101 2.5161 1.0363 3.7019.7672l-.4426-1.9504c-.8142.1847-1.5621.0192-1.9233-.3051-.1566-.1405-.2752-.3358-.3056-.6451-.0325-.3308.0337-.8383.3613-1.5624l-1.8222-.8244Z'
+      />,
+      <circle cx={10.25} cy={7.25} r={1.25} fill='currentColor' />,
+      <circle cx={14.25} cy={7.75} r={1.25} fill='currentColor' />,
+      <circle cx={16.75} cy={10.75} r={1.25} fill='currentColor' />,
+      <circle cx={16.25} cy={14.75} r={1.25} fill='currentColor' />
+    )
+  }
+)
+
+export const IconPaletteOld: 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 +61,15 @@ export const IconPalette: IconComponentType = forwardRef(
   }
 )
 
+export const IconPalette: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconPaletteNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconPaletteOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconPalette[iconSymbol] = true

package/react/paper-plane-filled-right.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 IconPaperPlaneFilledRight: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconPaperPlaneFilledRightNew: 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='m4.4788 2.1221 16.5 9v1.7558l-16.5 9-1.4275-1.1941 2.5612-7.6838h8.3874v-2h-8.3874l-2.5612-7.6838 1.4275-1.1941Z'
+      />
+    )
+  }
+)
+
+export const IconPaperPlaneFilledRightOld: 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 +59,25 @@ export const IconPaperPlaneFilledRight: IconComponentType = forwardRef(
   }
 )
 
+export const IconPaperPlaneFilledRight: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconPaperPlaneFilledRightNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconPaperPlaneFilledRightOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconPaperPlaneFilledRight[iconSymbol] = true