@toptal/picasso-icons 1.9.0 → 1.10.1-alpha-PF-235-add-sidebar-icons-2c38b1d32.1

package/src/Icon/Playbook24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgPlaybook24',
+})
+const SvgPlaybook24 = forwardRef(function SvgPlaybook24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M23.44 18.64 15 11.41V17h-.36c-1.04 0-1.97.42-2.64 1.1V5.5C12 4.12 13.18 3 14.64 3h7.34v12h1V2h-8.34c-1.33 0-2.5.7-3.14 1.73A3.673 3.673 0 0 0 8.36 2H.02v16h8.34C9.81 18 11 19.12 11 20.5h1c0-1.38 1.18-2.5 2.64-2.5H15v4.26l3.72-1.59 1.22 2.74.91-.41-1.21-2.73 3.8-1.63ZM11 18.1c-.66-.67-1.6-1.1-2.64-1.1H1.02V3h7.34C9.81 3 11 4.12 11 5.5v12.6Zm5 2.64v-7.15l5.56 4.77L16 20.74Z' />
+    </svg>
+  )
+})
+
+SvgPlaybook24.displayName = 'SvgPlaybook24'
+export default SvgPlaybook24

package/src/Icon/PlaybookResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Playbook16 from './Playbook16'
+import Playbook24 from './Playbook24'
+import type { Props } from './Playbook16'
+
+const PlaybookResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Playbook16 {...props} />,
+    },
+    <Playbook24 {...props} />
+  ) as JSX.Element
+}
+
+export default PlaybookResponsive

package/src/Icon/ProfileCard16.tsx

@@ -0,0 +1,66 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgProfileCard16',
+})
+const SvgProfileCard16 = forwardRef(function SvgProfileCard16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path
+        fillRule='evenodd'
+        d='M16 0H3v16h13V0ZM4 15V1h11v14H4ZM0 2h2v1H1v10h1v1H0V2Zm6 8.5a3.5 3.5 0 0 1 1.875-3.1 2.5 2.5 0 1 1 3.25 0A3.5 3.5 0 0 1 13 10.5h-1a2.5 2.5 0 0 0-5 0H6Zm2-5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Zm5 7.5v-1H6v1h7Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgProfileCard16.displayName = 'SvgProfileCard16'
+export default SvgProfileCard16

package/src/Icon/ProfileCard24.tsx

@@ -0,0 +1,66 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgProfileCard24',
+})
+const SvgProfileCard24 = forwardRef(function SvgProfileCard24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path
+        fillRule='evenodd'
+        d='M23 1H5v22h18V1ZM6 22V2h16v20H6ZM1 3h3v1H2v16h2v1H1V3Zm16 5c0 .991-.48 1.87-1.221 2.416A4 4 0 0 1 18 14h-1a3 3 0 1 0-6 0h-1a4 4 0 0 1 2.221-3.584A3 3 0 1 1 17 8Zm-5 0a2 2 0 1 0 4 0 2 2 0 0 0-4 0Zm-2 9v-1h8v1h-8Zm4 1v1h-4v-1h4Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgProfileCard24.displayName = 'SvgProfileCard24'
+export default SvgProfileCard24

package/src/Icon/ProfileCardResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import ProfileCard16 from './ProfileCard16'
+import ProfileCard24 from './ProfileCard24'
+import type { Props } from './ProfileCard16'
+
+const ProfileCardResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <ProfileCard16 {...props} />,
+    },
+    <ProfileCard24 {...props} />
+  ) as JSX.Element
+}
+
+export default ProfileCardResponsive

package/src/Icon/ReferralPartners16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgReferralPartners16',
+})
+const SvgReferralPartners16 = forwardRef(function SvgReferralPartners16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M5.75 5.42C6.5 4.87 7 3.99 7 3c0-1.65-1.35-3-3-3S1 1.35 1 3c0 1 .49 1.88 1.25 2.42C.93 6.07 0 7.42 0 9h1c0-1.65 1.35-3 3-3s3 1.35 3 3h1c0-1.57-.92-2.92-2.25-3.58ZM4 5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Zm9.75 7.42C14.5 11.87 15 10.99 15 10c0-1.65-1.35-3-3-3s-3 1.35-3 3c0 1 .49 1.88 1.25 2.42C8.93 13.07 8 14.42 8 16h1c0-1.65 1.35-3 3-3s3 1.35 3 3h1c0-1.57-.92-2.92-2.25-3.58ZM12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Zm-9-1H2v3h5v-1H3v-2zm10-6h1V2H9v1h4v2z' />
+    </svg>
+  )
+})
+
+SvgReferralPartners16.displayName = 'SvgReferralPartners16'
+export default SvgReferralPartners16

package/src/Icon/ReferralPartners24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgReferralPartners24',
+})
+const SvgReferralPartners24 = forwardRef(function SvgReferralPartners24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M20.1 18.39c1.13-.71 1.9-1.96 1.9-3.39 0-2.21-1.79-4-4-4s-4 1.79-4 4c0 1.43.76 2.68 1.9 3.39-2.27.85-3.9 3.04-3.9 5.61h1c0-2.76 2.24-5 5-5s5 2.24 5 5h1c0-2.57-1.62-4.76-3.9-5.61ZM15 15c0-1.65 1.35-3 3-3s3 1.35 3 3-1.35 3-3 3-3-1.35-3-3ZM8.1 7.39C9.23 6.68 10 5.43 10 4c0-2.21-1.79-4-4-4S2 1.79 2 4c0 1.43.76 2.68 1.9 3.39C1.63 8.24 0 10.43 0 13h1c0-2.76 2.24-5 5-5s5 2.24 5 5h1c0-2.57-1.62-4.76-3.9-5.61ZM3 4c0-1.65 1.35-3 3-3s3 1.35 3 3-1.35 3-3 3-3-1.35-3-3Zm1 13H3v4h7v-1H4v-3zM20 7h1V3h-8v1h7v3z' />
+    </svg>
+  )
+})
+
+SvgReferralPartners24.displayName = 'SvgReferralPartners24'
+export default SvgReferralPartners24

package/src/Icon/ReferralPartnersResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import ReferralPartners16 from './ReferralPartners16'
+import ReferralPartners24 from './ReferralPartners24'
+import type { Props } from './ReferralPartners16'
+
+const ReferralPartnersResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <ReferralPartners16 {...props} />,
+    },
+    <ReferralPartners24 {...props} />
+  ) as JSX.Element
+}
+
+export default ReferralPartnersResponsive

package/src/Icon/Table16.tsx

@@ -0,0 +1,66 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgTable16',
+})
+const SvgTable16 = forwardRef(function SvgTable16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path
+        fillRule='evenodd'
+        d='M5 1.5H0v13h16v-13H5Zm10 1h-4v3h4v-3Zm0 4h-4v3h4v-3Zm0 4h-4v3h4v-3Zm-5 0v3H6v-3h4Zm0-4v3H6v-3h4Zm0-4v3H6v-3h4Zm-5 0H1v3h4v-3Zm0 4H1v3h4v-3Zm0 4H1v3h4v-3Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgTable16.displayName = 'SvgTable16'
+export default SvgTable16

package/src/Icon/Table24.tsx

@@ -0,0 +1,66 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgTable24',
+})
+const SvgTable24 = forwardRef(function SvgTable24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path
+        fillRule='evenodd'
+        d='M2 3H1v19h22V3H2Zm6 1H2v5h6V4Zm1 0v5h6V4H9Zm7 0v5h6V4h-6ZM2 15v-5h6v5H2Zm7 0v-5h6v5H9Zm7 0v-5h6v5h-6ZM2 16v5h6v-5H2Zm7 0v5h6v-5H9Zm7 0v5h6v-5h-6Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgTable24.displayName = 'SvgTable24'
+export default SvgTable24

package/src/Icon/TableResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Table16 from './Table16'
+import Table24 from './Table24'
+import type { Props } from './Table16'
+
+const TableResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Table16 {...props} />,
+    },
+    <Table24 {...props} />
+  ) as JSX.Element
+}
+
+export default TableResponsive

package/src/Icon/VideoCall16.tsx

@@ -0,0 +1,62 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgVideoCall16',
+})
+const SvgVideoCall16 = forwardRef(function SvgVideoCall16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      data-name='Layer 2'
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='m4.3 12.49.93.38C5.69 11.74 6.78 11 8.01 11s2.31.73 2.78 1.87l.93-.38a4.026 4.026 0 0 0-1.94-2.08A3 3 0 0 0 11.01 8c0-1.65-1.35-3-3-3s-3 1.35-3 3c0 .99.49 1.87 1.23 2.41a3.99 3.99 0 0 0-1.94 2.08ZM6 8c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2Zm8.83-7H1.17C.53 1 0 1.52 0 2.17v11.66C0 14.47.52 15 1.17 15h13.66c.64 0 1.17-.52 1.17-1.17V2.17C16 1.53 15.48 1 14.83 1ZM15 13.83c0 .09-.08.17-.17.17H1.17c-.09 0-.17-.08-.17-.17V4h14v9.83ZM15 3H1v-.83c0-.09.08-.17.17-.17h13.66c.09 0 .17.08.17.17V3Z' />
+    </svg>
+  )
+})
+
+SvgVideoCall16.displayName = 'SvgVideoCall16'
+export default SvgVideoCall16

package/src/Icon/VideoCall24.tsx

@@ -0,0 +1,62 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgVideoCall24',
+})
+const SvgVideoCall24 = forwardRef(function SvgVideoCall24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      data-name='Layer 2'
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M12 16c2.08 0 3.9 1.25 4.66 3.18l.93-.36a5.96 5.96 0 0 0-3.49-3.43A3.99 3.99 0 0 0 16 12c0-2.21-1.79-4-4-4s-4 1.79-4 4c0 1.43.76 2.68 1.9 3.39a5.932 5.932 0 0 0-3.49 3.43l.93.36A4.966 4.966 0 0 1 12 16Zm-3-4c0-1.65 1.35-3 3-3s3 1.35 3 3-1.35 3-3 3-3-1.35-3-3ZM22.5 2h-21C.67 2 0 2.67 0 3.5v17c0 .83.67 1.5 1.5 1.5h21c.83 0 1.5-.67 1.5-1.5v-17c0-.83-.67-1.5-1.5-1.5Zm.5 18.5c0 .28-.22.5-.5.5h-21c-.28 0-.5-.22-.5-.5V6h22v14.5ZM23 5H1V3.5c0-.28.22-.5.5-.5h21c.28 0 .5.22.5.5V5Z' />
+    </svg>
+  )
+})
+
+SvgVideoCall24.displayName = 'SvgVideoCall24'
+export default SvgVideoCall24

package/src/Icon/VideoCallResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import VideoCall16 from './VideoCall16'
+import VideoCall24 from './VideoCall24'
+import type { Props } from './VideoCall16'
+
+const VideoCallResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <VideoCall16 {...props} />,
+    },
+    <VideoCall24 {...props} />
+  ) as JSX.Element
+}
+
+export default VideoCallResponsive