@mirohq/design-system-icons 0.1.0

package/react/arrow-right.tsx

@@ -0,0 +1,21 @@
+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 IconArrowRight: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M20 12H3m10.59-7 7 7-7 7'
+    />
+  )
+)

package/react/arrow-top-right.tsx

@@ -0,0 +1,21 @@
+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 IconArrowTopRight: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M10 5h9v9m0-9L5 19'
+    />
+  )
+)

package/react/bar-three.tsx

@@ -0,0 +1,21 @@
+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 IconBarThree: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M21 5H3m18 7H3m18 7H3'
+    />
+  )
+)

package/react/check-mark.tsx

@@ -0,0 +1,21 @@
+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 IconCheckMark: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m5 11 5 5 9-9'
+    />
+  )
+)

package/react/chevron-down.tsx

@@ -0,0 +1,21 @@
+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 IconChevronDown: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m6 9.5 6 6 6-6'
+    />
+  )
+)

package/react/chevron-left.tsx

@@ -0,0 +1,21 @@
+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 IconChevronLeft: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m14.5 6-6 6 6 6'
+    />
+  )
+)

package/react/chevron-right.tsx

@@ -0,0 +1,21 @@
+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 IconChevronRight: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m9.5 6 6 6-6 6'
+    />
+  )
+)

package/react/chevron-up.tsx

@@ -0,0 +1,21 @@
+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 IconChevronUp: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m6 14.5 6-6 6 6'
+    />
+  )
+)

package/react/cross-circle.tsx

@@ -0,0 +1,22 @@
+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 IconCrossCircle: 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} />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m9 9 6 6m0-6-6 6'
+    />
+  )
+)

package/react/cross.tsx

@@ -0,0 +1,21 @@
+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 IconCross: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m6 6 12 12m0-12L6 18'
+    />
+  )
+)

package/react/envelope.tsx

@@ -0,0 +1,30 @@
+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 IconEnvelope: 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' />,
+    <rect
+      width={18}
+      height={14}
+      x={3}
+      y={5}
+      stroke='currentColor'
+      strokeWidth={2}
+      rx={2}
+    />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m7 9 3.618 3.459a2 2 0 0 0 2.764 0L17 9'
+    />
+  )
+)

package/react/exclamation-point-circle.tsx

@@ -0,0 +1,22 @@
+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 IconExclamationPointCircle: 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} />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M12 7v6m0 3.5v.5'
+    />
+  )
+)

package/react/globe.tsx

@@ -0,0 +1,22 @@
+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 IconGlobe: 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} />,
+    <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'
+    />
+  )
+)

package/react/icon-placeholder.tsx

@@ -0,0 +1,22 @@
+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 IconIconPlaceholder: 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} />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m3 3 18 18m0-18L3 21'
+    />
+  )
+)

package/react/index.ts

@@ -0,0 +1,27 @@
+export { IconArrowLeft } from './arrow-left'
+export { IconArrowRight } from './arrow-right'
+export { IconArrowTopRight } from './arrow-top-right'
+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 { 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 { IconInformationMarkCircle } from './information-mark-circle'
+export { IconLockClosed } from './lock-closed'
+export { IconLockOpen } from './lock-open'
+export { IconMinus } from './minus'
+export { IconPlus } from './plus'
+export { IconQuestionMark } from './question-mark'
+export { IconSearch } from './search'
+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'

package/react/information-mark-circle.tsx

@@ -0,0 +1,22 @@
+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 IconInformationMarkCircle: 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} />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M12 6.5V7m0 4v6'
+    />
+  )
+)

package/react/lock-closed.tsx

@@ -0,0 +1,32 @@
+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 IconLockClosed: 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={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} />
+  )
+)

package/react/lock-open.tsx

@@ -0,0 +1,32 @@
+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 IconLockOpen: 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={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} />
+  )
+)

package/react/minus.tsx

@@ -0,0 +1,21 @@
+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 IconMinus: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M5 12h14'
+    />
+  )
+)

package/react/plus.tsx

@@ -0,0 +1,21 @@
+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 IconPlus: 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' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M5 12h14m-7-7v14'
+    />
+  )
+)

package/react/question-mark.tsx

@@ -0,0 +1,22 @@
+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 IconQuestionMark: 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} />,
+    <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'
+    />
+  )
+)

package/react/search.tsx

@@ -0,0 +1,22 @@
+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 IconSearch: 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={10} cy={10} r={6} stroke='currentColor' strokeWidth={2} />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m20 20-5.5-5.5'
+    />
+  )
+)

package/react/social-facebook.tsx

@@ -0,0 +1,19 @@
+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 IconSocialFacebook: 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' />,
+    <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

@@ -0,0 +1,25 @@
+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 IconSocialInstagram: 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' />,
+    <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'
+    />,
+    <path
+      fill='currentColor'
+      fillRule='evenodd'
+      d='M12 2c-2.716 0-3.056.012-4.123.06-1.064.049-1.791.218-2.427.465a4.902 4.902 0 0 0-1.772 1.153A4.902 4.902 0 0 0 2.525 5.45c-.247.636-.416 1.363-.465 2.427C2.011 8.944 2 9.284 2 12s.011 3.056.06 4.123c.049 1.064.218 1.791.465 2.427a4.902 4.902 0 0 0 1.153 1.772 4.901 4.901 0 0 0 1.772 1.153c.636.247 1.363.416 2.427.465 1.067.048 1.407.06 4.123.06s3.056-.012 4.123-.06c1.064-.049 1.791-.218 2.427-.465a4.902 4.902 0 0 0 1.772-1.153 4.902 4.902 0 0 0 1.153-1.772c.247-.636.416-1.363.465-2.427.048-1.067.06-1.407.06-4.123s-.012-3.056-.06-4.123c-.049-1.064-.218-1.791-.465-2.427a4.901 4.901 0 0 0-1.153-1.772 4.902 4.902 0 0 0-1.772-1.153c-.636-.247-1.363-.416-2.427-.465C15.056 2.012 14.716 2 12 2Zm6.538 4.662a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0ZM6.865 12a5.135 5.135 0 1 1 10.27 0 5.135 5.135 0 0 1-10.27 0Z'
+      clipRule='evenodd'
+    />
+  )
+)

package/react/social-linkedin.tsx

@@ -0,0 +1,19 @@
+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 IconSocialLinkedin: 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' />,
+    <path
+      fill='currentColor'
+      d='M20.52 2c.816 0 1.48.646 1.48 1.442v17.115c0 .796-.664 1.443-1.48 1.443H3.475C2.661 22 2 21.353 2 20.557V3.442C2 2.646 2.661 2 3.475 2h17.046Zm-1.477 17.042v-5.234c0-2.57-.555-4.547-3.558-4.547-1.444 0-2.412.791-2.807 1.542h-.04V9.498H9.793v9.544h2.963v-4.72c0-1.246.235-2.452 1.779-2.452 1.522 0 1.541 1.424 1.541 2.53v4.642h2.966ZM7.933 9.498h-2.97v9.544h2.97V9.498ZM6.449 4.753a1.72 1.72 0 1 0-.003 3.44 1.72 1.72 0 0 0 .003-3.44Z'
+    />
+  )
+)

package/react/social-twitter.tsx

@@ -0,0 +1,19 @@
+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 IconSocialTwitter: 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' />,
+    <path
+      fill='currentColor'
+      d='M7.919 21C16.22 21 20.76 14.074 20.76 8.068c0-.196 0-.392-.013-.587A9.22 9.22 0 0 0 23 5.128a8.963 8.963 0 0 1-2.593.715 4.556 4.556 0 0 0 1.985-2.514 9.01 9.01 0 0 1-2.866 1.104A4.505 4.505 0 0 0 16.235 3c-2.479 0-4.518 2.054-4.518 4.55 0 .345.039.69.117 1.028A12.791 12.791 0 0 1 2.53 3.829c-1.19 2.065-.574 4.741 1.4 6.067a4.456 4.456 0 0 1-2.049-.569v.058c0 2.155 1.523 4.029 3.621 4.455a4.477 4.477 0 0 1-2.038.078 4.532 4.532 0 0 0 4.217 3.157A9.019 9.019 0 0 1 1 18.958a12.716 12.716 0 0 0 6.919 2.039'
+    />
+  )
+)

package/react/social-youtube.tsx

@@ -0,0 +1,19 @@
+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 IconSocialYoutube: 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' />,
+    <path
+      fill='currentColor'
+      d='M23.02 6.155c-.265-1.045-1.044-1.868-2.034-2.147C19.192 3.5 12 3.5 12 3.5s-7.192 0-8.986.508C2.024 4.287 1.245 5.11.98 6.155.5 8.049.5 12 .5 12s0 3.952.48 5.845c.265 1.045 1.044 1.868 2.034 2.148C4.808 20.5 12 20.5 12 20.5s7.192 0 8.986-.507c.99-.28 1.77-1.103 2.034-2.148.48-1.893.48-5.845.48-5.845s0-3.951-.48-5.845ZM9.7 15.643V8.357L15.675 12 9.7 15.643Z'
+    />
+  )
+)

package/svg/24/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="none" d="M0 0h23.59v24H0z"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M20.59 12h-17M10 5l-7 7 7 7"/></svg>

package/svg/24/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M20 12H3M13.59 5l7 7-7 7"/></svg>

package/svg/24/arrow-top-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M10 5h9v9M19 5 5 19"/></svg>