@mirohq/design-system-icons 0.3.1 → 0.5.0

package/react/crop.tsx

@@ -0,0 +1,31 @@
+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 IconCrop: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        fill='currentColor'
+        d='M7 2a1 1 0 0 0-2 0h2Zm15 17a1 1 0 1 0 0-2v2ZM10 5a1 1 0 0 0 0 2V5Zm7 9a1 1 0 1 0 2 0h-2ZM2 5a1 1 0 0 0 0 2V5Zm4 2h1V5H6v2Zm11 15a1 1 0 1 0 2 0h-2ZM5 2v15h2V2H5Zm5 5h7V5h-7v2Zm7 0v7h2V7h-2ZM2 7h4V5H2v2Zm5 12h11v-2H7v2Zm11 0h4v-2h-4v2Zm1 3v-4h-2v4h2ZM17 7h2a2 2 0 0 0-2-2v2ZM5 17a2 2 0 0 0 2 2v-2H5Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/cursor-filled.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 IconCursorFilled: 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='m14.5 20-1.917-4.97M8.406 4.068l9.434 9.245c.315.309.136.874-.289.909l-5.022.416a.468.468 0 0 0-.285.13l-3.437 3.294c-.312.3-.807.06-.807-.391V4.262c0-.227.25-.346.406-.193Z'
+    />,
+    <path
+      fill='currentColor'
+      d='M17.84 13.315 8.406 4.069C8.25 3.916 8 4.035 8 4.262v13.41c0 .451.495.69.807.39l3.437-3.292a.468.468 0 0 1 .285-.13l5.022-.417c.425-.035.604-.6.29-.909Z'
+    />
+  )
+)

package/react/cursor.tsx

@@ -0,0 +1,33 @@
+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 IconCursor: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='m14.5 20-1.917-4.97M8.406 4.068l9.434 9.245c.315.309.136.874-.289.909l-5.022.416a.468.468 0 0 0-.285.13l-3.437 3.294c-.312.3-.807.06-.807-.391V4.262c0-.227.25-.346.406-.193Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/factory-house.tsx

@@ -0,0 +1,33 @@
+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 IconFactoryHouse: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M10 20v-5.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V20M7 4v3.25m0 0-2.621.655A.5.5 0 0 0 4 8.39V19.5a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5V4.64a.5.5 0 0 0-.621-.485L7 7.25Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/factory.tsx

@@ -0,0 +1,33 @@
+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 IconFactory: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M21 13.588v7.162a.25.25 0 0 1-.25.25H16m5-7.412a.25.25 0 0 0-.055-.156l-1.826-2.283a.25.25 0 0 0-.294-.074l-3.412 1.463L12 14l-2.377-2.853a.25.25 0 0 0-.297-.067l-6.18 2.853A.25.25 0 0 0 3 14.16v6.59c0 .138.112.25.25.25H8m13-7.412L20.575 9l-.538-5.795A.25.25 0 0 0 19.791 3H17a.25.25 0 0 0-.245.201L16 8.5M8 21v-4m0 4h8m0 0v-4'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/gauge.tsx

@@ -0,0 +1,27 @@
+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 IconGauge: 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={2} fill='currentColor' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M12.036 12.036 15 15m2.657 2.657a8 8 0 1 0-11.314 0'
+    />
+  )
+)

package/react/graduation-cap.tsx

@@ -0,0 +1,35 @@
+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 IconGraduationCap: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeMiterlimit={1.414}
+        strokeWidth={2}
+        d='M2 8.23 12.5 3 23 8.23 19.684 9.8M2 8.23V20M2 8.23 5.316 9.8m0 0 7.184 3.4 7.184-3.4m-14.368 0v3.016A7.184 7.184 0 0 0 12.5 20v0a7.184 7.184 0 0 0 7.184-7.184V9.8'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/hand-filled.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 IconHandFilled: 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'
+      fillRule='evenodd'
+      d='M19 17c0 6.27-8.5 8-12.5 3l-4.542-6.358a.991.991 0 0 1 .062-1.235c.11-.123.195-.217.205-.222a.916.916 0 0 1 1.042-.098c.03.008 3.233 1.845 3.233 1.845V5c0-.622.378-1 1-1 .623 0 1 .378 1 1v5.25a.75.75 0 0 0 1.5 0V3c0-.623.377-1 1-1s1 .377 1 1v7.25a.75.75 0 0 0 1.5 0V4c0-.623.377-1 1-1s1 .377 1 1v6.25a.75.75 0 0 0 1.5 0V6c0-.622.378-1 1-1s1 .378 1 1v11Z'
+      clipRule='evenodd'
+    />
+  )
+)

package/react/hand.tsx

@@ -0,0 +1,31 @@
+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 IconHand: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        fill='currentColor'
+        d='m2.748 14.261-.847.531a.994.994 0 0 0 .042.063l.805-.594Zm18.29-7.511h1v-.019l-.001-.018-1 .037Zm-14 7.5-.718.697a1 1 0 0 0 1.717-.697h-1Zm2.44-2.5a1 1 0 1 0 2 0h-2Zm3.5-.5a1 1 0 1 0 2 0h-2Zm3.5 1a1 1 0 1 0 2 0h-2Zm-11.13.263-.716.697.717-.697Zm-1.432-.634-.067-.997.067.997Zm2.86 7.715-.657.755.657-.755Zm-.49-.54.805-.593-.804.594ZM20.038 6.75v9.375h2V6.75h-2ZM4.632 13.21l1.688 1.737 1.434-1.394-1.688-1.737-1.434 1.393Zm3.405 1.04v-8.5h-2v8.5h2Zm-4.354-1.292c.016-.015.081-.066.3-.08l-.134-1.996c-.439.029-1.072.155-1.578.66l1.412 1.416Zm-.088.772a.623.623 0 0 1 .088-.772l-1.412-1.416a2.623 2.623 0 0 0-.37 3.25l1.694-1.062Zm4.442-7.98c0-.443.327-.75.713-.75V3C7.203 3 6.037 4.26 6.037 5.75h2ZM8.75 5a.73.73 0 0 1 .727.75h2C11.477 4.249 10.286 3 8.75 3v2Zm2.727.75v-2h-2v2h2Zm-1-1h.06v-2h-.06v2Zm1-1A.77.77 0 0 1 12.25 3V1c-1.502 0-2.773 1.214-2.773 2.75h2ZM12.25 3a.73.73 0 0 1 .727.75h2c0-1.501-1.191-2.75-2.727-2.75v2Zm.727.75v1h2v-1h-2Zm5.5 3c0-.37.352-.75.81-.75V4c-1.474 0-2.81 1.188-2.81 2.75h2Zm.81-.75c.393 0 .732.288.751.787l1.999-.074C21.98 5.212 20.827 4 19.287 4v2Zm-4.31-1.25c0-.247.084-.425.194-.537.105-.106.292-.213.616-.213V2c-.806 0-1.525.285-2.042.812-.513.521-.768 1.219-.768 1.938h2Zm.81-.75c.37 0 .69.29.69.75h2c0-1.472-1.126-2.75-2.69-2.75v2Zm.69.75v2h2v-2h-2Zm-7 1v6h2v-6h-2Zm3.5-1v6.5h2v-6.5h-2Zm3.5 1.5v6h2v-6h-2Zm3.56 9.875c0 1.885-1.676 3.689-4.341 4.465-2.6.756-5.8.393-8.264-1.75l-1.313 1.509c3.054 2.656 6.985 3.078 10.136 2.16 3.086-.898 5.782-3.228 5.782-6.384h-2ZM7.091 18.461l-3.539-4.794-1.609 1.188 3.54 4.794L7.09 18.46Zm-1.025-6.645c-.501-.516-1.287-.997-2.217-.934l.134 1.995c.148-.01.397.073.649.332l1.434-1.393Zm1.366 7.024a2.348 2.348 0 0 1-.34-.38l-1.61 1.189c.176.238.386.481.637.7l1.313-1.51Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/image.tsx

@@ -0,0 +1,27 @@
+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 IconImage: 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 18v1.5a.5.5 0 0 0 .5.5h17a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-17a.5.5 0 0 0-.5.5V18Zm0 0 6.646-6.646a.5.5 0 0 1 .708 0L14 15m-2 2 3.646-3.646a.5.5 0 0 1 .708 0L20 17'
+    />,
+    <circle cx={16} cy={8} r={2} fill='currentColor' />
+  )
+)

package/react/index.ts

@@ -1,4 +1,12 @@
+export { IconAlignBottom } from './align-bottom'
+export { IconAlignLeft } from './align-left'
+export { IconAlignRight } from './align-right'
+export { IconAlignTop } from './align-top'
 export { IconArrowBoxOut } from './arrow-box-out'
+export { IconArrowClockwiseDownRight } from './arrow-clockwise-down-right'
+export { IconArrowClockwiseUpLeft } from './arrow-clockwise-up-left'
+export { IconArrowCounterClockwiseDownLeft } from './arrow-counter-clockwise-down-left'
+export { IconArrowCounterClockwiseUpRight } from './arrow-counter-clockwise-up-right'
 export { IconArrowDownLeft } from './arrow-down-left'
 export { IconArrowDownRight } from './arrow-down-right'
 export { IconArrowDown } from './arrow-down'
@@ -8,7 +16,22 @@ export { IconArrowRight } from './arrow-right'
 export { IconArrowUpLeft } from './arrow-up-left'
 export { IconArrowUpRight } from './arrow-up-right'
 export { IconArrowUp } from './arrow-up'
+export { IconArrowsClockwiseX } from './arrows-clockwise-x'
+export { IconArrowsClockwiseY } from './arrows-clockwise-y'
+export { IconArticle } from './article'
 export { IconBarThree } from './bar-three'
+export { IconBellSlash } from './bell-slash'
+export { IconBellTilt } from './bell-tilt'
+export { IconBell } from './bell'
+export { IconBracketsAngleSlash } from './brackets-angle-slash'
+export { IconBracketsCurlyCirclesThree } from './brackets-curly-circles-three'
+export { IconCalendarBlank } from './calendar-blank'
+export { IconCamera } from './camera'
+export { IconCardNumberThree } from './card-number-three'
+export { IconCard } from './card'
+export { IconCardsPoker } from './cards-poker'
+export { IconChartBarYSimple } from './chart-bar-y-simple'
+export { IconChartBarY } from './chart-bar-y'
 export { IconChat } from './chat'
 export { IconCheckMark } from './check-mark'
 export { IconChevronDown } from './chevron-down'
@@ -16,34 +39,69 @@ export { IconChevronLeft } from './chevron-left'
 export { IconChevronRight } from './chevron-right'
 export { IconChevronUp } from './chevron-up'
 export { IconCircleMotionX } from './circle-motion-x'
+export { IconCircleNotch } from './circle-notch'
 export { IconCircle } from './circle'
+export { IconCirclesConnected } from './circles-connected'
+export { IconClockCounterClockwiseSimple } from './clock-counter-clockwise-simple'
+export { IconClockCounterClockwise } from './clock-counter-clockwise'
+export { IconClockOvertime } from './clock-overtime'
+export { IconClock } from './clock'
+export { IconCluster } from './cluster'
+export { IconClustered } from './clustered'
 export { IconCog } from './cog'
+export { IconCreditCard } from './credit-card'
+export { IconCrop } from './crop'
 export { IconCrossCircle } from './cross-circle'
 export { IconCross } from './cross'
+export { IconCursorFilled } from './cursor-filled'
+export { IconCursor } from './cursor'
 export { IconEnvelope } from './envelope'
 export { IconExclamationPointCircle } from './exclamation-point-circle'
+export { IconFactoryHouse } from './factory-house'
+export { IconFactory } from './factory'
 export { IconFunnel } from './funnel'
+export { IconGauge } from './gauge'
 export { IconGlobe } from './globe'
+export { IconGraduationCap } from './graduation-cap'
+export { IconHandFilled } from './hand-filled'
+export { IconHand } from './hand'
 export { IconHouse } from './house'
+export { IconImage } from './image'
 export { IconInformationMarkCircle } from './information-mark-circle'
+export { IconKanban } from './kanban'
+export { IconKey } from './key'
+export { IconKeycap } from './keycap'
+export { IconLaptop } from './laptop'
+export { IconLifesaver } from './lifesaver'
+export { IconLightning } from './lightning'
 export { IconLineDiagonal } from './line-diagonal'
 export { IconLink } from './link'
 export { IconLockClosed } from './lock-closed'
 export { IconLockOpen } from './lock-open'
+export { IconMagnet } from './magnet'
 export { IconMagnifyingGlass } from './magnifying-glass'
+export { IconMap } from './map'
 export { IconMicrophoneSlash } from './microphone-slash'
 export { IconMicrophone } from './microphone'
 export { IconMinus } from './minus'
+export { IconMouse } from './mouse'
 export { IconParallelogram } from './parallelogram'
 export { IconPauseCircle } from './pause-circle'
+export { IconPdf } from './pdf'
 export { IconPlaceholder } from './placeholder'
 export { IconPlayCircle } from './play-circle'
 export { IconPlaybackSpeedCircle } from './playback-speed-circle'
 export { IconPlug } from './plug'
 export { IconPlus } from './plus'
+export { IconPushPin } from './push-pin'
 export { IconQuestionMarkCircle } from './question-mark-circle'
 export { IconRhombus } from './rhombus'
+export { IconScrollbarXy } from './scrollbar-xy'
 export { IconShapes } from './shapes'
+export { IconShieldCheck } from './shield-check'
+export { IconShieldLock } from './shield-lock'
+export { IconSidebarClosed } from './sidebar-closed'
+export { IconSidebarOpen } from './sidebar-open'
 export { IconSlidersX } from './sliders-x'
 export { IconSlidersY } from './sliders-y'
 export { IconSocialFacebook } from './social-facebook'
@@ -53,10 +111,25 @@ export { IconSocialTwitter } from './social-twitter'
 export { IconSocialYoutube } from './social-youtube'
 export { IconSpeakerCross } from './speaker-cross'
 export { IconSpeakerHigh } from './speaker-high'
+export { IconSquareBracketsAngleSlash } from './square-brackets-angle-slash'
+export { IconSquareCirclesTwo } from './square-circles-two'
 export { IconSquareRounded } from './square-rounded'
+export { IconSquareTriangleCirclePlus } from './square-triangle-circle-plus'
 export { IconSquare } from './square'
+export { IconSquaresFour } from './squares-four'
+export { IconSquaresThree } from './squares-three'
+export { IconStickyNote } from './sticky-note'
 export { IconStopCircle } from './stop-circle'
+export { IconTag } from './tag'
+export { IconTextT } from './text-t'
+export { IconThumbsUp } from './thumbs-up'
+export { IconTicket } from './ticket'
+export { IconTimer } from './timer'
+export { IconTrackpad } from './trackpad'
+export { IconTrashSimple } from './trash-simple'
+export { IconTrash } from './trash'
 export { IconTriangle } from './triangle'
+export { IconTrident } from './trident'
 export { IconUserAdd } from './user-add'
 export { IconUser } from './user'
 export { IconUsers } from './users'

package/react/kanban.tsx

@@ -0,0 +1,33 @@
+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 IconKanban: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M12 4H4.5a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V15m0-11v11m0-11h7.5a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H12'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/key.tsx

@@ -0,0 +1,31 @@
+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 IconKey: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        fill='currentColor'
+        d='M11 11h-1v2h1v-2Zm10 2a1 1 0 1 0 0-2v2Zm-3 2a1 1 0 1 0 2 0h-2Zm-8-4v2h2v-2h-2Zm-6 2v-2H2v2h2Zm3 3a3 3 0 0 1-3-3H2a5 5 0 0 0 5 5v-2Zm3-3a3 3 0 0 1-3 3v2a5 5 0 0 0 5-5h-2ZM7 8a3 3 0 0 1 3 3h2a5 5 0 0 0-5-5v2Zm0-2a5 5 0 0 0-5 5h2a3 3 0 0 1 3-3V6Zm4 7h8v-2h-8v2Zm8 0h2v-2h-2v2Zm-1-1v3h2v-3h-2Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/keycap.tsx

@@ -0,0 +1,27 @@
+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 IconKeycap: 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 8h6m-3 0v6M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'
+    />,
+    <path fill='currentColor' d='M0 0h.001v.001H0z' />
+  )
+)

package/react/laptop.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 IconLaptop: 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='M2.5 20h19M5 4h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z'
+    />
+  )
+)

package/react/lifesaver.tsx

@@ -0,0 +1,34 @@
+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 IconLifesaver: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeMiterlimit={1.414}
+        strokeWidth={2}
+        d='M14.828 14.828a4 4 0 0 1-5.656 0m5.656 0a4 4 0 0 0 0-5.656m0 5.656 3.182 3.182m-8.838-3.182a4 4 0 0 1 0-5.656m0 5.656L5.99 18.01m3.182-8.838a4 4 0 0 1 5.656 0m-5.656 0L5.99 5.99m8.838 3.182L18.01 5.99m.354 12.374A9 9 0 1 1 5.636 5.636a9 9 0 0 1 12.728 12.728Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/lightning.tsx

@@ -0,0 +1,35 @@
+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 IconLightning: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='square'
+        strokeLinejoin='round'
+        strokeMiterlimit={1.414}
+        strokeWidth={2}
+        d='M11.973 1.867 4.231 14.62a.25.25 0 0 0 .213.38H11.5l-.44 7.04c-.016.258.32.368.46.152l8.232-12.807a.25.25 0 0 0-.21-.385H12l.437-6.987c.016-.261-.328-.37-.463-.146Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)