@mirohq/design-system-icons 0.59.1 → 0.60.0

package/react/trash.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 IconTrash: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconTrashNew: 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 8v7'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m6 8 .858 11.1534c.0801 1.042.949 1.8466 1.994 1.8466h6.2959c1.0451 0 1.914-.8046 1.9941-1.8466l.858-11.1534m-15-3h18m-13 0 1-3h6l1 3'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M14 8v7'
+      />
+    )
+  }
+)
+
+export const IconTrashOld: 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,15 @@ export const IconTrash: IconComponentType = forwardRef(
   }
 )
 
+export const IconTrash: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconTrashNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconTrashOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconTrash[iconSymbol] = true

package/react/trophy.tsx

@@ -5,21 +5,54 @@
 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 IconTrophy: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconTrophyNew: 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='M12 15c-2.0412 0-3.5748-.3333-4.5-3-.2078-.5993-.5-2.266-.5-3v-6h10v4l.0001 2c-.0001.7365-.2982 2.4027-.5 3-.9158 2.7096-2.4517 3-4.5001 3Zm0 0v6'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M17 8v-2h4.9999c-.0813 3.5488-2.0222 3.9939-4.9999 4.8539m-10-2.8539v-2h-5c.1445 3.5862 2.0965 4.022 5 4.8547'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M8 21h8'
+      />
+    )
+  }
+)
+
+export const IconTrophyOld: 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 +77,15 @@ export const IconTrophy: IconComponentType = forwardRef(
   }
 )
 
+export const IconTrophy: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconTrophyNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconTrophyOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconTrophy[iconSymbol] = true

package/react/tshirt.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 IconTshirt: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconTshirtNew: 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='M17 9v4M7 9v4'
+      />,
+      <path
+        fill='currentColor'
+        d='M15.0001 4v-1l-1 1h1Zm5.3954 3.5583-.9939.1104.0015.014.002.0138.9904-.1382Zm.6046 4.3313.2675.9635.7229-1.1018-.9904.1383Zm-4 1.1104-.2675-.9636-.7325.2034v.7602h1Zm0 7v1l1-1h-1Zm-10 0h-1l1 1v-1Zm0-7h1v-.7808l-.7575-.1893-.2425.9701Zm-4.0001-1-.9909-.1349.7484 1.105.2425-.9701Zm.6047-4.4417.9909.1349.0017-.0122.0013-.0123-.9939-.1104Zm5.3954-3.5583h1l-1-1v1Zm5 0c0 1.1046-.8955 2-2 2v2c2.2091 0 4-1.7909 4-4h-2Zm1 1h1.4198v-2h-1.4198v2Zm1.4198 0c1.5287 0 2.8129 1.1494 2.9817 2.6687l1.9877-.2209c-.2813-2.5321-2.4216-4.4478-4.9694-4.4478v2Zm2.9852 2.6965.6046 4.3313 1.9808-.2765-.6046-4.3313-1.9808.2765Zm-3.405 5.3035v7h2v-7h-2Zm-8 7v-7h-2v7h2Zm-4.0092-7.8651.6047-4.4417-1.9817-.2698-.6048 4.4417 1.9818.2698Zm.6077-4.4662c.1688-1.5193 1.453-2.6687 2.9817-2.6687v-2c-2.5478 0-4.6881 1.9157-4.9695 4.4478l1.9878.221Zm2.9817-2.6687h1.4198v-2h-1.4198v2Zm4.4198 1c-1.1046 0-2-.8954-2-2h-2c0 2.2091 1.7908 4 4 4v-2Zm5 13h-10v2h10v-2Zm3.7325-8.074-4 1.1104.535 1.9272 4-1.1105-.535-1.9271Zm-13.49 1.1039-4-1-.4851 1.9402 4 1 .4851-1.9402Z'
+      />
+    )
+  }
+)
+
+export const IconTshirtOld: 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,4 +59,15 @@ export const IconTshirt: IconComponentType = forwardRef(
   }
 )
 
+export const IconTshirt: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconTshirtNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconTshirtOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconTshirt[iconSymbol] = true

package/react/user-add.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 IconUserAdd: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconUserAddNew: 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='M16.5 7.5c0-2.4853-2.0147-4.5-4.5-4.5s-4.5 2.0147-4.5 4.5 2.0147 4.5 4.5 4.5 4.5-2.0147 4.5-4.5Zm-4.5-2.5c1.3807 0 2.5 1.1193 2.5 2.5s-1.1193 2.5-2.5 2.5-2.5-1.1193-2.5-2.5 1.1193-2.5 2.5-2.5ZM12 13c-3.636 0-6.7306 2.7552-7.0924 6.3732l-.1527 1.5273 1.99.199.1528-1.5273c.2595-2.5956 2.4938-4.5722 5.1023-4.5722v-2Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M18 13v8m-4-4h8'
+      />
+    )
+  }
+)
+
+export const IconUserAddOld: 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,15 @@ export const IconUserAdd: IconComponentType = forwardRef(
   }
 )
 
+export const IconUserAdd: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconUserAddNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconUserAddOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconUserAdd[iconSymbol] = true

package/react/user-arrow-right-up.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 IconUserArrowRightUp: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconUserArrowRightUpNew: 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='M16.5 7.5c0-2.4853-2.0147-4.5-4.5-4.5s-4.5 2.0147-4.5 4.5 2.0147 4.5 4.5 4.5 4.5-2.0147 4.5-4.5Zm-4.5-2.5c1.3807 0 2.5 1.1193 2.5 2.5s-1.1193 2.5-2.5 2.5-2.5-1.1193-2.5-2.5 1.1193-2.5 2.5-2.5ZM12 13c-3.636 0-6.7306 2.7552-7.0924 6.3732l-.1527 1.5273 1.99.199.1528-1.5273c.2595-2.5956 2.4938-4.5722 5.1023-4.5722v-2Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M18.0002 21v-8M18.0002 21v-7'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m14.5 16.5 3.5-3.5 3.5 3.5'
+      />
+    )
+  }
+)
+
+export const IconUserArrowRightUpOld: 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 IconUserArrowRightUp: IconComponentType = forwardRef(
   }
 )
 
+export const IconUserArrowRightUp: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconUserArrowRightUpNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconUserArrowRightUpOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconUserArrowRightUp[iconSymbol] = true

package/react/user-background-blur.tsx

@@ -5,21 +5,70 @@
 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 IconUserBackgroundBlur: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconUserBackgroundBlurNew: 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='M19.018 10h2.5v2.5h-2.5z'
+        transform='rotate(45 19.018 10)'
+      />,
+      <path
+        fill='currentColor'
+        d='M19.018 2.5h2.5v2.5h-2.5z'
+        transform='rotate(45 19.018 2.5)'
+      />,
+      <path
+        fill='currentColor'
+        d='M4.768 10h2.5v2.5h-2.5z'
+        transform='rotate(45 4.768 10)'
+      />,
+      <path
+        fill='currentColor'
+        d='M4.768 2.5h2.5v2.5h-2.5z'
+        transform='rotate(45 4.768 2.5)'
+      />,
+      <circle
+        cx={12}
+        cy={8}
+        r={3}
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m18 21-.1647-1.7022c-.2908-3.005-2.8162-5.2978-5.8353-5.2978-3.019 0-5.5445 2.2928-5.8353 5.2978l-.1647 1.7022'
+      />
+    )
+  }
+)
+
+export const IconUserBackgroundBlurOld: 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 +89,25 @@ export const IconUserBackgroundBlur: IconComponentType = forwardRef(
   }
 )
 
+export const IconUserBackgroundBlur: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconUserBackgroundBlurNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconUserBackgroundBlurOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconUserBackgroundBlur[iconSymbol] = true

package/react/user-cog-plus.tsx

@@ -5,21 +5,63 @@
 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 IconUserCogPlus: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconUserCogPlusNew: 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='M12.9999 4.1602a3.4987 3.4987 0 0 0-1.0498-.1602c-1.933 0-3.5 1.567-3.5 3.5s1.567 3.5 3.5 3.5c1.3962 0 2.6014-.8175 3.1632-2'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m5.7502 21 .1527-1.5273c.3107-3.1068 2.925-5.4727 6.0473-5.4727'
+      />,
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M18.0694 13.5h-1.3333l-.4445 1.3333-.6427.3711-1.3769-.2818-.6667 1.1547.9325 1.0516v.7422l-.9325 1.0515.6667 1.1548 1.3769-.2818.6427.3711.4445 1.3333h1.3333l.4445-1.3333.6427-.3711 1.3769.2817.6667-1.1547-.9325-1.0515v-.7422l.9325-1.0515-.6667-1.1548-1.3769.2818-.6427-.3711-.4445-1.3333Zm-.6192 5.5c-.8284 0-1.5-.6716-1.5-1.5s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5-.6716 1.5-1.5 1.5Z'
+        clipRule='evenodd'
+      />,
+      <path
+        fill='currentColor'
+        d='m16.7361 13.5-.4743-.1581.4743-.3419v.5Zm1.3333 0v-.5l.4744.3419-.4744.1581Zm-1.7778 1.3333.4744.1581-.2244.275-.25-.4331Zm-.6427.3711.25.433-.3502.0569.1002-.4899Zm-1.3769-.2818-.433-.25.5332-.2398-.1002.4898Zm-.6667 1.1547-.3741.3318-.0589-.5818.433.25Zm.9325 1.0516.3741-.3317.1259.3317h-.5Zm0 .7422h.5l-.1259.3317-.3741-.3317Zm-.9325 1.0515-.433.25.0589-.5817.3741.3317Zm.6667 1.1548.1002.4898-.5332-.2398.433-.25Zm1.3769-.2818-.1002-.4899.3502.0569-.25.433Zm.6427.3711.25-.433.2244.2749-.4744.1581Zm.4445 1.3333v.5l-.4743-.3419.4743-.1581Zm1.3333 0 .4744.1581-.4744.3419v-.5Zm.4445-1.3333-.4744-.1581.2244-.2749.25.433Zm.6427-.3711-.25-.433.3502-.0569-.1002.4899Zm1.3769.2817.433.25-.5332.2399.1002-.4899Zm.6667-1.1547.3741-.3317.0589.5817-.433-.25Zm-.9325-1.0515-.3741.3317-.1259-.3317h.5Zm0-.7422h-.5l.1259-.3317.3741.3317Zm.9325-1.0515.433-.25-.0589.5817-.3741-.3317Zm-.6667-1.1548-.1002-.4898.5332.2398-.433.25Zm-1.3769.2818.1002.4899-.3502-.0569.25-.433Zm-.6427-.3711-.25.433-.2244-.2749.4744-.1581Zm-1.7778-1.8333h1.3333v1h-1.3333v-1Zm-.9188 1.6752.4445-1.3333.9486.3162-.4444 1.3333-.9487-.3162Zm-.4184.0962.6428-.3711.4999.8661-.6427.371-.5-.866Zm-1.0267-.3386 1.3769.2818-.2004.9797-1.377-.2818.2005-.9797Zm-1.1999 1.3945.6667-1.1547.866.5-.6667 1.1547-.866-.5Zm.9914 1.6333-.9325-1.0515.7482-.6635.9325 1.0516-.7482.6634Zm-.1259.4105v-.7422h1v.7422h-1Zm-.8066.7198.9325-1.0516.7482.6635-.9325 1.0516-.7482-.6635Zm.6078 1.7365-.6667-1.1548.866-.5.6667 1.1548-.866.5Zm1.9102-.042-1.377.2818-.2004-.9797 1.3769-.2818.2005.9797Zm.2924.3143-.6427-.3711.5-.866.6427.3711-.5.866Zm.2202 1.0584-.4445-1.3333.9487-.3162.4444 1.3333-.9486.3162Zm1.8076.3419h-1.3333v-1h1.3333v1Zm.9188-1.6752-.4444 1.3333-.9487-.3162.4444-1.3333.9487.3162Zm.4184-.0962-.6427.3711-.5-.866.6427-.3711.5.866Zm1.0267.3386-1.377-.2818.2005-.9797 1.377.2818-.2005.9797Zm1.1999-1.3946-.6667 1.1547-.866-.5.6667-1.1547.866.5Zm-.9914-1.6333.9325 1.0516-.7482.6635-.9325-1.0516.7482-.6635Zm.1259-.4104v.7422h-1v-.7422h1Zm.8066-.7198-.9325 1.0516-.7482-.6635.9325-1.0516.7482.6635Zm-.6078-1.7365.6667 1.1548-.866.5-.6667-1.1548.866-.5Zm-1.9101.042 1.3769-.2818.2005.9797-1.377.2818-.2004-.9797Zm-.2925-.3143.6427.3711-.5.866-.6427-.3711.5-.866Zm-.2201-1.0584.4444 1.3333-.9487.3162-.4444-1.3333.9487-.3162Zm-2.0936 4.1581c0 .5523.4477 1 1 1v1c-1.1046 0-2-.8954-2-2h1Zm1-1c-.5523 0-1 .4477-1 1h-1c0-1.1046.8954-2 2-2v1Zm1 1c0-.5523-.4477-1-1-1v-1c1.1046 0 2 .8954 2 2h-1Zm-1 1c.5523 0 1-.4477 1-1h1c0 1.1046-.8954 2-2 2v-1Z'
+      />,
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M18 2v6m-3-3h6'
+      />
+    )
+  }
+)
+
+export const IconUserCogPlusOld: 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,
@@ -45,4 +87,25 @@ export const IconUserCogPlus: IconComponentType = forwardRef(
   }
 )
 
+export const IconUserCogPlus: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconUserCogPlusNew
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    ) : (
+      <IconUserCogPlusOld
+        {...props}
+        size={size}
+        weight={weight}
+        ref={forwardRef}
+      />
+    )
+  }
+)
+
 IconUserCogPlus[iconSymbol] = true

package/react/user-cog.tsx

@@ -5,21 +5,61 @@
 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 IconUserCog: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+export const IconUserCogNew: 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={3.5}
+        cy={3.5}
+        r={3.5}
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        transform='matrix(-1 0 0 1 15.45 4)'
+      />,
+      <path
+        stroke='currentColor'
+        strokeLinejoin='bevel'
+        strokeWidth='var(--svg-stroke-width)'
+        d='m5.7502 21 .1527-1.5273c.3107-3.1068 2.925-5.4727 6.0473-5.4727'
+      />,
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M18.0694 13.5h-1.3333l-.4445 1.3333-.6427.3711-1.3769-.2818-.6667 1.1547.9325 1.0516v.7422l-.9325 1.0515.6667 1.1548 1.3769-.2818.6427.3711.4445 1.3333h1.3333l.4445-1.3333.6427-.3711 1.3769.2817.6667-1.1547-.9325-1.0515v-.7422l.9325-1.0515-.6667-1.1548-1.3769.2818-.6427-.3711-.4445-1.3333Zm-.6192 5.5c-.8284 0-1.5-.6716-1.5-1.5s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5-.6716 1.5-1.5 1.5Z'
+        clipRule='evenodd'
+      />,
+      <path
+        fill='currentColor'
+        d='m16.7361 13.5-.4743-.1581.4743-.3419v.5Zm1.3333 0v-.5l.4744.3419-.4744.1581Zm-1.7778 1.3333.4744.1581-.2244.275-.25-.4331Zm-.6427.3711.25.433-.3502.0569.1002-.4899Zm-1.3769-.2818-.433-.25.5332-.2398-.1002.4898Zm-.6667 1.1547-.3741.3318-.0589-.5818.433.25Zm.9325 1.0516.3741-.3317.1259.3317h-.5Zm0 .7422h.5l-.1259.3317-.3741-.3317Zm-.9325 1.0515-.433.25.0589-.5817.3741.3317Zm.6667 1.1548.1002.4898-.5332-.2398.433-.25Zm1.3769-.2818-.1002-.4899.3502.0569-.25.433Zm.6427.3711.25-.433.2244.2749-.4744.1581Zm.4445 1.3333v.5l-.4743-.3419.4743-.1581Zm1.3333 0 .4744.1581-.4744.3419v-.5Zm.4445-1.3333-.4744-.1581.2244-.2749.25.433Zm.6427-.3711-.25-.433.3502-.0569-.1002.4899Zm1.3769.2817.433.25-.5332.2399.1002-.4899Zm.6667-1.1547.3741-.3317.0589.5817-.433-.25Zm-.9325-1.0515-.3741.3317-.1259-.3317h.5Zm0-.7422h-.5l.1259-.3317.3741.3317Zm.9325-1.0515.433-.25-.0589.5817-.3741-.3317Zm-.6667-1.1548-.1002-.4898.5332.2398-.433.25Zm-1.3769.2818.1002.4899-.3502-.0569.25-.433Zm-.6427-.3711-.25.433-.2244-.2749.4744-.1581Zm-1.7778-1.8333h1.3333v1h-1.3333v-1Zm-.9188 1.6752.4445-1.3333.9486.3162-.4444 1.3333-.9487-.3162Zm-.4184.0962.6428-.3711.4999.8661-.6427.371-.5-.866Zm-1.0267-.3386 1.3769.2818-.2004.9797-1.377-.2818.2005-.9797Zm-1.1999 1.3945.6667-1.1547.866.5-.6667 1.1547-.866-.5Zm.9914 1.6333-.9325-1.0515.7482-.6635.9325 1.0516-.7482.6634Zm-.1259.4105v-.7422h1v.7422h-1Zm-.8066.7198.9325-1.0516.7482.6635-.9325 1.0516-.7482-.6635Zm.6078 1.7365-.6667-1.1548.866-.5.6667 1.1548-.866.5Zm1.9102-.042-1.377.2818-.2004-.9797 1.3769-.2818.2005.9797Zm.2924.3143-.6427-.3711.5-.866.6427.3711-.5.866Zm.2202 1.0584-.4445-1.3333.9487-.3162.4444 1.3333-.9486.3162Zm1.8076.3419h-1.3333v-1h1.3333v1Zm.9188-1.6752-.4444 1.3333-.9487-.3162.4444-1.3333.9487.3162Zm.4184-.0962-.6427.3711-.5-.866.6427-.3711.5.866Zm1.0267.3386-1.377-.2818.2005-.9797 1.377.2818-.2005.9797Zm1.1999-1.3946-.6667 1.1547-.866-.5.6667-1.1547.866.5Zm-.9914-1.6333.9325 1.0516-.7482.6635-.9325-1.0516.7482-.6635Zm.1259-.4104v.7422h-1v-.7422h1Zm.8066-.7198-.9325 1.0516-.7482-.6635.9325-1.0516.7482.6635Zm-.6078-1.7365.6667 1.1548-.866.5-.6667-1.1548.866-.5Zm-1.9101.042 1.3769-.2818.2005.9797-1.377.2818-.2004-.9797Zm-.2925-.3143.6427.3711-.5.866-.6427-.3711.5-.866Zm-.2201-1.0584.4444 1.3333-.9487.3162-.4444-1.3333.9487-.3162Zm-2.0936 4.1581c0 .5523.4477 1 1 1v1c-1.1046 0-2-.8954-2-2h1Zm1-1c-.5523 0-1 .4477-1 1h-1c0-1.1046.8954-2 2-2v1Zm1 1c0-.5523-.4477-1-1-1v-1c1.1046 0 2 .8954 2 2h-1Zm-1 1c.5523 0 1-.4477 1-1h1c0 1.1046-.8954 2-2 2v-1Z'
+      />
+    )
+  }
+)
+
+export const IconUserCogOld: 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,
@@ -45,4 +85,15 @@ export const IconUserCog: IconComponentType = forwardRef(
   }
 )
 
+export const IconUserCog: IconComponentType = forwardRef(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [v1] = useNewDesignLanguage()
+    return v1 ? (
+      <IconUserCogNew {...props} size={size} weight={weight} ref={forwardRef} />
+    ) : (
+      <IconUserCogOld {...props} size={size} weight={weight} ref={forwardRef} />
+    )
+  }
+)
+
 IconUserCog[iconSymbol] = true