@mirohq/design-system-icons 0.1.3-colors.0 → 0.2.0

package/react/{arrow-top-right.tsx → arrow-up.tsx}

@@ -4,18 +4,23 @@ import type { ForwardRefExoticComponent, RefAttributes } from 'react'
 import { StyledIcon } from '../src/icon'
 import type { IconProps } from '../src/icon'
 
-export const IconArrowTopRight: ForwardRefExoticComponent<
+export const IconArrowUp: ForwardRefExoticComponent<
   IconProps & RefAttributes<SVGSVGElement>
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
-      d='M10 5h9v9m0-9L5 19'
+      d='M12 4v17M5 10.41l7-7 7 7'
     />
   )
 )

package/react/bar-three.tsx

@@ -9,8 +9,13 @@ export const IconBarThree: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/check-mark.tsx

@@ -9,8 +9,13 @@ export const IconCheckMark: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/chevron-down.tsx

@@ -9,8 +9,13 @@ export const IconChevronDown: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/chevron-left.tsx

@@ -9,8 +9,13 @@ export const IconChevronLeft: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/chevron-right.tsx

@@ -9,8 +9,13 @@ export const IconChevronRight: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/chevron-up.tsx

@@ -9,8 +9,13 @@ export const IconChevronUp: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/cog.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconCog: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <circle cx={12} cy={12} r={1} stroke='currentColor' strokeWidth={2} />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={2}
+      d='M13.544 3h-3l-1 3-1.446.835L5 6.2 3.5 8.799l2.098 2.366v1.67L3.5 15.2 5 17.799l3.098-.634L9.544 18l1 3h3l1-3 1.446-.835 3.098.634 1.5-2.598-2.098-2.366v-1.67l2.099-2.366-1.5-2.598-3.099.634L14.544 6l-1-3Z'
+    />
+  )
+)

package/react/cross-circle.tsx

@@ -9,14 +9,18 @@ export const IconCrossCircle: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
-    <circle cx={12} cy={12} r={9} stroke='currentColor' strokeWidth={2} />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
-      d='m9 9 6 6m0-6-6 6'
+      d='m9 9 6 6m0-6-6 6m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'
     />
   )
 )

package/react/cross.tsx

@@ -9,8 +9,13 @@ export const IconCross: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/envelope.tsx

@@ -9,22 +9,18 @@ export const IconEnvelope: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
-    <rect
-      width={18}
-      height={14}
-      x={3}
-      y={5}
-      stroke='currentColor'
-      strokeWidth={2}
-      rx={2}
-    />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
-      d='m7 9 3.618 3.459a2 2 0 0 0 2.764 0L17 9'
+      d='m7 9 3.618 3.459a2 2 0 0 0 2.764 0L17 9M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z'
     />
   )
 )

package/react/exclamation-point-circle.tsx

@@ -9,14 +9,19 @@ export const IconExclamationPointCircle: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
-    <circle cx={12} cy={12} r={9} stroke='currentColor' strokeWidth={2} />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <circle cx={12} cy={15.5} r={1} fill='currentColor' />,
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
-      d='M12 7v6m0 3.5v.5'
+      d='M12 8v4m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8.5 3.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z'
     />
   )
 )

package/react/globe.tsx

@@ -9,14 +9,18 @@ export const IconGlobe: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
-    <circle cx={12} cy={12} r={9} stroke='currentColor' strokeWidth={2} />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
-      d='M11.663 3C9.495 4.62 8 8.042 8 12s1.495 7.38 3.663 9m.674-18C14.505 4.62 16 8.042 16 12s-1.495 7.38-3.663 9M4 9h16M4 15h16'
+      d='M11.663 3C9.495 4.62 8 8.042 8 12s1.495 7.38 3.663 9m.674-18C14.505 4.62 16 8.042 16 12s-1.495 7.38-3.663 9M4 9h16M4 15h16m1-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'
     />
   )
 )

package/react/house.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconHouse: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <path
+      fill='currentColor'
+      d='m12 4.4.707-.707L12 2.986l-.707.707L12 4.4Zm-9.707 8.293a1 1 0 1 0 1.414 1.414l-1.414-1.414Zm18 1.414a1 1 0 0 0 1.414-1.414l-1.414 1.414Zm-9-10.414-9 9 1.414 1.414 9-9-1.414-1.414Zm0 1.414 9 9 1.414-1.414-9-9-1.414 1.414ZM7 19v-8.5H5V19h2Zm0 0H5a2 2 0 0 0 2 2v-2Zm10 0H7v2h10v-2Zm0 0v2a2 2 0 0 0 2-2h-2Zm0-8.5V19h2v-8.5h-2Z'
+    />
+  )
+)

package/react/index.ts

@@ -1,27 +1,41 @@
+export { IconArrowBoxOut } from './arrow-box-out'
+export { IconArrowDownLeft } from './arrow-down-left'
+export { IconArrowDownRight } from './arrow-down-right'
+export { IconArrowDown } from './arrow-down'
 export { IconArrowLeft } from './arrow-left'
 export { IconArrowRight } from './arrow-right'
-export { IconArrowTopRight } from './arrow-top-right'
+export { IconArrowUpLeft } from './arrow-up-left'
+export { IconArrowUpRight } from './arrow-up-right'
+export { IconArrowUp } from './arrow-up'
 export { IconBarThree } from './bar-three'
 export { IconCheckMark } from './check-mark'
 export { IconChevronDown } from './chevron-down'
 export { IconChevronLeft } from './chevron-left'
 export { IconChevronRight } from './chevron-right'
 export { IconChevronUp } from './chevron-up'
+export { IconCog } from './cog'
 export { IconCrossCircle } from './cross-circle'
 export { IconCross } from './cross'
 export { IconEnvelope } from './envelope'
 export { IconExclamationPointCircle } from './exclamation-point-circle'
 export { IconGlobe } from './globe'
-export { IconIconPlaceholder } from './icon-placeholder'
+export { IconHouse } from './house'
 export { IconInformationMarkCircle } from './information-mark-circle'
+export { IconLink } from './link'
 export { IconLockClosed } from './lock-closed'
 export { IconLockOpen } from './lock-open'
+export { IconMagnifyingGlass } from './magnifying-glass'
 export { IconMinus } from './minus'
+export { IconPlaceholder } from './placeholder'
+export { IconPlug } from './plug'
 export { IconPlus } from './plus'
-export { IconQuestionMark } from './question-mark'
-export { IconSearch } from './search'
+export { IconQuestionMarkCircle } from './question-mark-circle'
 export { IconSocialFacebook } from './social-facebook'
 export { IconSocialInstagram } from './social-instagram'
 export { IconSocialLinkedin } from './social-linkedin'
 export { IconSocialTwitter } from './social-twitter'
 export { IconSocialYoutube } from './social-youtube'
+export { IconUserAdd } from './user-add'
+export { IconUser } from './user'
+export { IconUsers } from './users'
+export { IconWallet } from './wallet'

package/react/information-mark-circle.tsx

@@ -9,14 +9,19 @@ export const IconInformationMarkCircle: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
-    <circle cx={12} cy={12} r={9} stroke='currentColor' strokeWidth={2} />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <circle cx={12} cy={8.5} r={1} fill='currentColor' />,
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
-      d='M12 6.5V7m0 4v6'
+      d='M12 12v4m9-4a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8.5-3.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z'
     />
   )
 )

package/react/link.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconLink: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m7.757 11.293-3.182 3.182a3.5 3.5 0 0 0 4.95 4.95l3.182-3.182M10.939 8.11l3.535-3.535a3.5 3.5 0 1 1 4.95 4.95L15.89 13.06m-7.425 2.475 7.071-7.071'
+    />
+  )
+)

package/react/lock-closed.tsx

@@ -9,24 +9,19 @@ export const IconLockClosed: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <circle cx={12} cy={16} r={1} fill='currentColor' />,
-    <rect
-      width={14}
-      height={10}
-      x={5}
-      y={11}
-      stroke='currentColor'
-      strokeWidth={2}
-      rx={2}
-    />,
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
-      d='M16.5 11V5a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v6'
-    />,
-    <circle cx={12} cy={16} r={1} stroke='currentColor' strokeWidth={2} />
+      d='M16.5 11V5a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v6M7 21h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2Zm6-5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+    />
   )
 )

package/react/lock-open.tsx

@@ -9,24 +9,19 @@ export const IconLockOpen: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <circle cx={12} cy={16} r={1} fill='currentColor' />,
-    <rect
-      width={14}
-      height={10}
-      x={5}
-      y={11}
-      stroke='currentColor'
-      strokeWidth={2}
-      rx={2}
-    />,
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
-      d='M16.5 11V5a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v1.5'
-    />,
-    <circle cx={12} cy={16} r={1} stroke='currentColor' strokeWidth={2} />
+      d='M16.5 11V5a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v1.5M7 21h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2Zm6-5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+    />
   )
 )

package/react/magnifying-glass.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconMagnifyingGlass: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m20 20-5.5-5.5M16 10a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z'
+    />
+  )
+)

package/react/minus.tsx

@@ -9,8 +9,13 @@ export const IconMinus: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/placeholder.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconPlaceholder: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m3 3 18 18m0-18L3 21m18-9a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'
+    />
+  )
+)

package/react/plug.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconPlug: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m12.385 5.9 3.535-3.536m2.122 9.192 3.535-3.535M3.192 20.749l4.95-4.95m2.122-12.02 9.899 9.899-3.536 3.535a5 5 0 0 1-7.07 0l-2.83-2.828a5 5 0 0 1 0-7.071l3.537-3.536Z'
+    />
+  )
+)

package/react/plus.tsx

@@ -9,8 +9,13 @@ export const IconPlus: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/{question-mark.tsx → question-mark-circle.tsx}

@@ -4,19 +4,23 @@ import type { ForwardRefExoticComponent, RefAttributes } from 'react'
 import { StyledIcon } from '../src/icon'
 import type { IconProps } from '../src/icon'
 
-export const IconQuestionMark: ForwardRefExoticComponent<
+export const IconQuestionMarkCircle: ForwardRefExoticComponent<
   IconProps & RefAttributes<SVGSVGElement>
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
-    <circle cx={12} cy={12} r={9} stroke='currentColor' strokeWidth={2} />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
-      d='M9.17 9a3.001 3.001 0 1 1 3.812 3.836c-.522.18-.982.612-.982 1.164v.25m0 2.65v.1'
+      d='M9.17 9a3.001 3.001 0 1 1 3.812 3.836c-.522.18-.982.612-.982 1.164v.25m0 2.65v.1m9-5a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'
     />
   )
 )

package/react/social-facebook.tsx

@@ -9,8 +9,13 @@ export const IconSocialFacebook: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       fill='currentColor'
       d='M22 12.061C22 6.505 17.523 2 12 2S2 6.505 2 12.061c0 5.022 3.657 9.184 8.438 9.939v-7.03h-2.54v-2.91h2.54V9.845c0-2.522 1.492-3.915 3.777-3.915 1.094 0 2.238.197 2.238.197v2.476h-1.26c-1.243 0-1.63.775-1.63 1.57v1.888h2.773l-.443 2.908h-2.33V22c4.78-.755 8.437-4.917 8.437-9.939Z'

package/react/social-instagram.tsx

@@ -9,8 +9,13 @@ export const IconSocialInstagram: ForwardRefExoticComponent<
 > = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
   createElement(
     StyledIcon,
-    { ...props, size, viewBox: '0 0 24 24', fill: 'none', ref: forwardRef },
-    <path d='M0 0h24v24H0z' />,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
     <path
       fill='currentColor'
       d='M8.667 12a3.333 3.333 0 1 0 6.666 0 3.333 3.333 0 0 0-6.666 0Z'