@mirohq/design-system-icons 0.59.1 → 0.60.0

package/react/clock-counter-clockwise-simple.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 IconClockCounterClockwiseSimple: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconClockCounterClockwiseSimpleNew: 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='M13 20c4.4183 0 8-3.5817 8-8s-3.5817-8-8-8-8 3.5817-8 8v2'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m8 12-3 3-3-3'
+      />,
+      <circle cx={13} cy={12} r={2} fill='currentColor' />
+    )
+  }
+)
+
+export const IconClockCounterClockwiseSimpleOld: 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,
@@ -34,7 +62,28 @@ export const IconClockCounterClockwiseSimple: IconComponentType = forwardRef(
       <path
         stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
-        d='M12 12v.0001'
+        d='M12 11.9999v.0001'
+      />
+    )
+  }
+)
+
+export const IconClockCounterClockwiseSimple: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconClockCounterClockwiseSimpleNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconClockCounterClockwiseSimpleOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
       />
     )
   }

package/react/clock-counter-clockwise.tsx

@@ -25,11 +25,23 @@ export const IconClockCounterClockwiseNew: IconComponentType = forwardRef(
       },
       <path
         stroke='currentColor'
-        strokeLinecap='round'
         strokeWidth='var(--svg-stroke-width)'
-        d='m12 12 3-3m-10.7421 5.0147c-1.1127-4.276 1.4516-8.6442 5.7274-9.7569 4.2759-1.1126 8.6442 1.4517 9.7569 5.7275 1.1126 4.2759-1.4516 8.6442-5.7275 9.7569a8.0132 8.0132 0 0 1-1.999.2597m-11.0157-8.0019 3 3 3-3'
+        d='M13 20c4.4183 0 8-3.5817 8-8s-3.5817-8-8-8-8 3.5817-8 8v2'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m8 12-3 3-3-3'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeMiterlimit={1.414}
+        strokeWidth='var(--svg-stroke-width)'
+        d='m13 12 3-3'
       />,
-      <circle cx={12} cy={12} r={2} fill='currentColor' />
+      <circle cx={13} cy={12} r={2} fill='currentColor' />
     )
   }
 )
@@ -57,7 +69,7 @@ export const IconClockCounterClockwiseOld: IconComponentType = forwardRef(
       <path
         stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
-        d='M12 12v.0001'
+        d='M12 11.9999v.0001'
       />
     )
   }

package/react/clock.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 IconClock: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconClockNew: 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.9966 12h-1v.4146l.2933.2929.7067-.7075Zm2.2968 3.7075.7076.7067 1.4133-1.415-.7075-.7067-1.4134 1.415Zm-1.2968-3.7075v-5h-2v5h2Zm-1.7067.7075 3.0035 3 1.4134-1.415-3.0035-3-1.4134 1.415Zm8.7067-.7075c0 4.4183-3.5817 8-8 8v2c5.5228 0 10-4.4772 10-10h-2Zm-8 8c-4.4183 0-8-3.5817-8-8h-2c0 5.5228 4.4771 10 10 10v-2Zm-8-8c0-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-10v2Z'
+      />
+    )
+  }
+)
+
+export const IconClockOld: 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 IconClock: IconComponentType = forwardRef(
   }
 )
 
+export const IconClock: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconClockNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconClockOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconClock[iconSymbol] = true

package/react/cluster.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 IconCluster: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconClusterNew: 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 22v-4h4v4h-4ZM16 12v3h-3m3-3v-9h-13v12h10m3-3h5v8h-8v-5m-7-4h3m-3-4h6'
+      />
+    )
+  }
+)
+
+export const IconClusterOld: 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,15 @@ export const IconCluster: IconComponentType = forwardRef(
   }
 )
 
+export const IconCluster: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconClusterNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconClusterOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconCluster[iconSymbol] = true

package/react/clustered.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 IconClustered: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconClusteredNew: 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='M6 5c-.5523 0-1 .4477-1 1v2h-2v-2c0-1.6569 1.3431-3 3-3h2v2h-2Zm8 0h-4v-2h4v2Zm4 0h-2v-2h2c1.6569 0 3 1.3431 3 3v2h-2v-2c0-.5523-.4477-1-1-1Zm-13 5v4h-2v-4h2Zm14 4v-4h2v4h-2Zm-14 2v2c0 .5523.4477 1 1 1h2v2h-2c-1.6569 0-3-1.3431-3-3v-2h2Zm14 2v-2h2v2c0 1.6569-1.3431 3-3 3h-2v-2h2c.5523 0 1-.4477 1-1Zm-9 1h4v2h-4v-2Z'
+        clipRule='evenodd'
+      />,
+      <rect width={4} height={4} x={7} y={7} fill='currentColor' rx={1} />,
+      <rect width={4} height={4} x={13} y={7} fill='currentColor' rx={1} />,
+      <rect width={4} height={4} x={7} y={13} fill='currentColor' rx={1} />
+    )
+  }
+)
+
+export const IconClusteredOld: 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,
@@ -43,4 +68,25 @@ export const IconClustered: IconComponentType = forwardRef(
   }
 )
 
+export const IconClustered: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconClusteredNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconClusteredOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconClustered[iconSymbol] = true

package/react/cog.tsx

@@ -5,38 +5,72 @@
 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 IconCogNew: 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,
+    },
+    <circle
+      cx={12}
+      cy={12}
+      r={2}
+      stroke='currentColor'
+      strokeWidth='var(--svg-stroke-width)'
+    />,
+    <path
+      fill='currentColor'
+      d='M10.5442 3v-1a1 1 0 0 0-.9487.6838l.9487.3162Zm3 0 .9487-.3162a1 1 0 0 0-.9487-.6838v1Zm1 3-.9487.3162.1201.36.3287.1898.4999-.866Zm-5 0 .5.866.3287-.1897.12-.36-.9487-.3163Zm4 15v1a.9999.9999 0 0 0 .9487-.6838l-.9487-.3162Zm-3 0-.9487.3162a1 1 0 0 0 .9487.6838v-1Zm-1-3 .9487-.3162-.12-.3601-.3286-.1897-.5.866Zm5 0-.5-.866-.3286.1897-.1201.3601.9487.3162Zm-11.0442-9.201-.866-.5a1 1 0 0 0 .1178 1.1635l.7482-.6635Zm1.5-2.598.2005-.9797a1 1 0 0 0-1.0665.4797l.866.5Zm3.098.634-.2004.9796.3718.0761.3287-.1897-.5-.866Zm-2.5 4.3301 1-.0001v-.3795l-.2517-.2839-.7482.6635Zm14.9905 4.0359.866.5a1.0002 1.0002 0 0 0-.1178-1.1635l-.7482.6635Zm-1.5 2.598-.2005.9797a1 1 0 0 0 1.0665-.4797l-.866-.5Zm-3.0981-.6339.2005-.9797-.3718-.0761-.3287.1897.5.8661Zm2.5-4.3302h-1v.3795l.2518.284.7482-.6635Zm-13.4904 4.9641-.866.5a1 1 0 0 0 1.0665.4797l-.2005-.9797Zm-1.5-2.5981-.7482-.6634a.9999.9999 0 0 0-.1178 1.1634l.866-.5Zm2.0981-2.366.7482.6635.2518-.284v-.3795h-1Zm2.5 4.3301.5-.866-.3286-.1897-.3719.076.2005.9797Zm10.9904-10.964.866-.5a1 1 0 0 0-1.0665-.4798l.2005.9797Zm1.5 2.598.7482.6635a1 1 0 0 0 .1178-1.1635l-.866.5Zm-2.0981 2.366-.7482-.6634-.2518.2839v.3795h1Zm-2.5-4.33-.5.866.3287.1897.3718-.076-.2005-.9798Zm-5.4462-2.835h3v-2h-3v2Zm2.0513-.6838 1 3 1.8974-.6324-1-3-1.8974.6324Zm-3-.6324-1 3 1.8974.6324 1-3-1.8974-.6324Zm3.9487 17.3162h-3v2h3v-2Zm-2.0513.6838-1-3-1.8974.6324 1 3 1.8974-.6324Zm3 .6324 1-3-1.8974-.6324-1 3 1.8974.6324Zm-10.1269-12.0172 1.5-2.598-1.732-1-1.5 2.598 1.732 1Zm.4335-2.1183 3.0981.634.401-1.9595-3.0981-.634-.401 1.9595Zm-2.0477 2.2818 2.098 2.366 1.4965-1.3269-2.0981-2.366-1.4964 1.327Zm16.9706 5.2385-1.5 2.598 1.7321 1 1.5-2.598-1.7321-1Zm-.4335 2.1183-3.098-.6339-.401 1.9594 3.0981.6339.4009-1.9594Zm2.0478-2.2818-2.0981-2.366-1.4964 1.3269 2.0981 2.366 1.4964-1.3269Zm-15.4706 2.7615-1.5-2.5981-1.732 1 1.5 2.5981 1.732-1Zm-1.6179-1.4346 2.0981-2.366-1.4964-1.327-2.098 2.3661 1.4963 1.3269Zm.9523 2.9143 3.0981-.634-.401-1.9594-3.098.634.401 1.9594Zm13.022-12.0778 1.5 2.5981 1.732-1-1.5-2.598-1.732 1Zm1.6178 1.4346-2.0981 2.3661 1.4964 1.3269 2.0981-2.366-1.4964-1.327Zm-.9523-2.9143-3.0981.634.401 1.9594 3.0981-.634-.401-1.9594Zm-10.29 2.4798 1.4462-.835-1-1.732-1.4461.835 1 1.732Zm5.4463-.835 1.4461.835 1-1.7321-1.4462-.835-.9999 1.7321Zm3.4461 4.299v1.6699l2 .0001v-1.6699l-2-.0001Zm-2 5.134-1.4462.835 1 1.732 1.4462-.8349-1-1.7321Zm-5.4461.835-1.4462-.835-1 1.7321 1.4461.8349 1.0001-1.732Zm-3.4462-4.2991v-1.6699l-2 .0001v1.6698h2Z'
+    />
+  )
+})
+
+export const IconCogOld: 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,
+    },
+    <circle cx={12} cy={12} r={2} fill='currentColor' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth='var(--svg-stroke-width)'
+      d='M13.5442 3h-3l-1 3-1.4461.835-3.0981-.634-1.5 2.598 2.098 2.3661.0001 1.6698-2.098 2.366 1.5 2.5981 3.098-.634 1.4461.835 1 3h3l1-3 1.4462-.8349 3.0981.6339 1.5-2.598-2.0981-2.3661v-1.6699l2.0981-2.366-1.5-2.598-3.0981.634-1.4462-.835-1-3Z'
+    />,
+    <path
+      stroke='currentColor'
+      strokeWidth='var(--svg-stroke-width)'
+      d='M12 11.9999v.0001'
+    />
+  )
+})
+
 export const IconCog: IconComponentType = forwardRef(
   ({ size = 'medium', weight = 'normal', ...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,
-      },
-      <circle cx={12} cy={12} r={2} fill='currentColor' />,
-      <path
-        stroke='currentColor'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='var(--svg-stroke-width)'
-        d='M13.5442 3h-3l-1 3-1.4461.835-3.0981-.634-1.5 2.598 2.098 2.3661.0001 1.6698-2.098 2.366 1.5 2.5981 3.098-.634 1.4461.835 1 3h3l1-3 1.4462-.8349 3.0981.6339 1.5-2.598-2.0981-2.3661v-1.6699l2.0981-2.366-1.5-2.598-3.0981.634-1.4462-.835-1-3Z'
-      />,
-      <path
-        stroke='currentColor'
-        strokeWidth='var(--svg-stroke-width)'
-        d='M12 11.9999v.0001'
-      />
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCogNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconCogOld {...props} size={size} weight={weight} ref={forwardRef} />
     )
   }
 )

package/react/coins-checked.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 IconCoinsChecked: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCoinsCheckedNew: 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='M8 22c.7013 0 1.3744-.0602 2-.1707v-1.9969c-.6984.1314-1.4162.1676-2 .1676-1.2138 0-3.0066-.1564-4-1v-1.7639c1.0615.475 2.4633.7639 4 .7639.7013 0 1.3744-.0602 2-.1707v-1.9969c-.6984.1314-1.4162.1676-2 .1676-1.2138 0-3.0066-.1564-4-1v-1.7639c1.0615.475 2.4633.7639 4 .7639 1.5367 0 2.9385-.2889 4-.7639v1.7639h2v-3.1707c.6256.1105 1.2987.1707 2 .1707 1.5367 0 2.9385-.2889 4-.7639v1.7639h2v-8c0-1.6568-2.6863-3-6-3s-6 1.3432-6 3v3.1707c-.6256-.1105-1.2987-.1707-2-.1707-3.3137 0-6 1.3431-6 3v8c0 1.6569 2.6863 3 6 3Zm12-17c-.9934-.8436-2.7862-1-4-1s-3.0066.1564-4 1c.9934.8436 2.7862 1 4 1s3.0066-.1564 4-1Zm0 2.2361c-1.0615.475-2.4633.7639-4 .7639-1.5367 0-2.9385-.2889-4-.7639v1.5278c.5801.2596 1.0586.5748 1.402.929.8695.247 1.8451.3071 2.598.3071 1.2138 0 3.0066-.1564 4-1v-1.7639Zm-8 3.7639c-.9934-.8436-2.7862-1-4-1s-3.0066.1564-4 1c.9934.8436 2.7862 1 4 1s3.0066-.1564 4-1Z'
+        clipRule='evenodd'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m13 18.5 3 3 4.5-6.5'
+      />
+    )
+  }
+)
+
+export const IconCoinsCheckedOld: 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 +74,25 @@ export const IconCoinsChecked: IconComponentType = forwardRef(
   }
 )
 
+export const IconCoinsChecked: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCoinsCheckedNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconCoinsCheckedOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconCoinsChecked[iconSymbol] = true

package/react/coins-slash.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 IconCoinsSlash: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconCoinsSlashNew: 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='m14 14.2418-2.7727-2.7727c-.995.4363-2.2855.5305-3.2273.5305-1.2138 0-3.0066-.1564-4-1 .9934-.8436 2.7862-1 4-1 .5585 0 1.2395.0331 1.9088.151l-2.1486-2.1486c-3.2026.0629-5.7602 1.381-5.7602 2.9976v8c0 1.6569 2.6863 3 6 3s6-1.3431 6-3v-4.7578Zm8-5.2418v-4c0-1.6568-2.6863-3-6-3s-6 1.3432-6 3c0 1.6569 2.6863 3 6 3 1.5367 0 2.9385-.2889 4-.7639v1.7639h2Zm-2-4c-.9934-.8436-2.7862-1-4-1s-3.0066.1564-4 1c.9934.8436 2.7862 1 4 1s3.0066-.1564 4-1Zm-12 8.9996c1.5367 0 2.9385-.2889 4-.7639v1.7639c-.9934.8436-2.7862 1-4 1s-3.0066-.1564-4-1v-1.7639c1.0615.475 2.4633.7639 4 .7639Zm0 4c1.5367 0 2.9385-.2889 4-.7639v1.7639c-.9934.8436-2.7862 1-4 1s-3.0066-.1564-4-1v-1.7639c1.0615.475 2.4633.7639 4 .7639Z'
+        clipRule='evenodd'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m19.5 21.5-15.5-18.5'
+      />,
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M20 17h2v-12c0-1.6568-2.6863-3-6-3s-6 1.3432-6 3h2c.9934-.8436 2.7862-1 4-1s3.0066.1564 4 1c-.9934.8436-2.7862 1-4 1-.3042 0-.6448-.0098-1-.0378v1.9963c.3252.0273.6593.0415 1 .0415 1.5367 0 2.9385-.2889 4-.7639v1.7639c-.9934.8436-2.7862 1-4 1-.3042 0-.6448-.0098-1-.0378v1.9963c.3252.0273.6593.0415 1 .0415 1.5367 0 2.9385-.2889 4-.7639v1.7639c-.5156.4378-1.2465.6906-2 .8324v1.9969c.7452-.1317 1.4229-.3349 2-.5932v1.7639Z'
+        clipRule='evenodd'
+      />
+    )
+  }
+)
+
+export const IconCoinsSlashOld: 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,
@@ -36,11 +70,29 @@ export const IconCoinsSlash: IconComponentType = forwardRef(
         clipRule='evenodd'
       />,
       <path
-        stroke='currentColor'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='var(--svg-stroke-width)'
-        d='m20.875 20.875-16.875-16.875'
+        fill='currentColor'
+        d='M3.2929 4.7071c-.3905-.3905-.3905-1.0237 0-1.4142.3905-.3905 1.0237-.3905 1.4142 0l-1.4142 1.4142Zm16.875 16.875-16.875-16.875 1.4142-1.4142 16.875 16.875-1.4142 1.4142Z'
+      />
+    )
+  }
+)
+
+export const IconCoinsSlash: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconCoinsSlashNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconCoinsSlashOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
       />
     )
   }

package/react/columns-three.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 IconColumnsThree: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconColumnsThreeNew: 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={18}
+        x={3}
+        y={3}
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        rx={2}
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M7 3v18M17 3v18'
+      />
+    )
+  }
+)
+
+export const IconColumnsThreeOld: 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 +72,25 @@ export const IconColumnsThree: IconComponentType = forwardRef(
   }
 )
 
+export const IconColumnsThree: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconColumnsThreeNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconColumnsThreeOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconColumnsThree[iconSymbol] = true