@toptal/picasso-icons 1.9.0 → 1.10.0

package/src/Icon/Location24.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: 'PicassoSvgLocation24',
+})
+const SvgLocation24 = forwardRef(function SvgLocation24(
+  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='M19.97 12A8.491 8.491 0 0 0 12 4.03V1h-1v3.03A8.491 8.491 0 0 0 3.03 12H0v1h3.03A8.491 8.491 0 0 0 11 20.97V24h1v-3.03A8.491 8.491 0 0 0 19.97 13H23v-1h-3.03Zm-1 1c-.25 3.74-3.24 6.73-6.97 6.97V17h-1v2.97c-3.74-.25-6.73-3.24-6.97-6.97H7v-1H4.03C4.28 8.26 7.27 5.27 11 5.03V8h1V5.03c3.74.25 6.73 3.24 6.97 6.97H16v1h2.97Z' />
+    </svg>
+  )
+})
+
+SvgLocation24.displayName = 'SvgLocation24'
+export default SvgLocation24

package/src/Icon/LocationResponsive.tsx

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

package/src/Icon/Objective16.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: 'PicassoSvgObjective16',
+})
+const SvgObjective16 = forwardRef(function SvgObjective16(
+  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='m15.42 3.29-2.02-.68-.68-2.02-2.71 2.71v2L6.66 8.65c-.2.2-.2.51 0 .71a.485.485 0 0 0 .7 0l2.09-2.09c.36.5.56 1.1.56 1.73 0 1.65-1.35 3-3 3s-3-1.35-3-3a3.009 3.009 0 0 1 3.82-2.89l.27-.96A3.999 3.999 0 0 0 3.01 9c0 2.21 1.79 4 4 4s4-1.79 4-4c0-.9-.31-1.74-.85-2.44l.56-.56h1.47c.53.91.82 1.94.82 3 0 3.31-2.69 6-6 6S1 12.31 1 9a6.005 6.005 0 0 1 7.62-5.78l.27-.96C8.28 2.09 7.65 2 7.01 2 3.14 2 0 5.14 0 9s3.14 7 7 7 7-3.14 7-7c0-1.2-.32-2.36-.9-3.4l2.32-2.32ZM12.29 5H11V3.71l1.28-1.28.33.97.97.33-1.28 1.28Z' />
+    </svg>
+  )
+})
+
+SvgObjective16.displayName = 'SvgObjective16'
+export default SvgObjective16

package/src/Icon/Objective24.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: 'PicassoSvgObjective24',
+})
+const SvgObjective24 = forwardRef(function SvgObjective24(
+  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.01 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='m23.03 4.69-3.09-.62-.62-3.09-4.31 4.31v3l-4.85 4.85c-.2.2-.2.51 0 .71a.485.485 0 0 0 .7 0L14 10.71c.63.79.99 1.76.99 2.78 0 2.48-2.01 4.5-4.48 4.5s-4.48-2.02-4.48-4.5 2.01-4.5 4.48-4.5c.41 0 .82.06 1.22.17L12 8.2c-.48-.14-.98-.21-1.49-.21-3.02 0-5.48 2.47-5.48 5.5s2.46 5.5 5.48 5.5 5.48-2.47 5.48-5.5c0-1.3-.46-2.51-1.28-3.49l1.01-1.01h3l.09-.09a9.42 9.42 0 0 1 1.21 4.59c0 5.24-4.27 9.5-9.51 9.5S1 18.74 1 13.5 5.27 4 10.51 4c.87 0 1.73.12 2.56.35l.27-.96c-.92-.26-1.87-.39-2.83-.39C4.72 3 0 7.71 0 13.5S4.72 24 10.51 24s10.51-4.71 10.51-10.5c0-1.89-.52-3.71-1.48-5.33l3.48-3.48ZM18.31 8h-2.29V5.71l2.69-2.69.38 1.91 1.91.38L18.31 8Z' />
+    </svg>
+  )
+})
+
+SvgObjective24.displayName = 'SvgObjective24'
+export default SvgObjective24

package/src/Icon/ObjectiveResponsive.tsx

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

package/src/Icon/PendingQueue16.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: 'PicassoSvgPendingQueue16',
+})
+const SvgPendingQueue16 = forwardRef(function SvgPendingQueue16(
+  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='M10 13h2.18c-1.22 1.26-2.9 2-4.68 2C3.92 15 1 12.08 1 8.5c0-.31.02-.62.07-.93l-.99-.14C.03 7.78 0 8.14 0 8.5 0 12.64 3.36 16 7.5 16c2.1 0 4.09-.89 5.5-2.41V16h1v-4h-4v1ZM5 8.5C5 7.67 4.33 7 3.5 7S2 7.67 2 8.5 2.67 10 3.5 10 5 9.33 5 8.5Zm-2 0c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5Zm6 0C9 7.67 8.33 7 7.5 7S6 7.67 6 8.5 6.67 10 7.5 10 9 9.33 9 8.5Zm-2 0c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5Zm6 0c0-.83-.67-1.5-1.5-1.5S10 7.67 10 8.5s.67 1.5 1.5 1.5S13 9.33 13 8.5Zm-2 0c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5ZM7.5 1C5.4 1 3.41 1.89 2 3.41V1H1v4h4V4H2.82c1.22-1.26 2.9-2 4.68-2C11.08 2 14 4.92 14 8.5c0 .31-.02.62-.07.93l.99.14c.05-.35.08-.71.08-1.07C15 4.36 11.64 1 7.5 1Z' />
+    </svg>
+  )
+})
+
+SvgPendingQueue16.displayName = 'SvgPendingQueue16'
+export default SvgPendingQueue16

package/src/Icon/PendingQueue24.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: 'PicassoSvgPendingQueue24',
+})
+const SvgPendingQueue24 = forwardRef(function SvgPendingQueue24(
+  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='M15 19h3.98c-1.88 2.51-4.8 4-7.98 4-5.51 0-10-4.49-10-10 0-.8.1-1.61.29-2.38l-.97-.24C.11 11.23.01 12.11.01 13c0 6.07 4.93 11 11 11 3.63 0 6.94-1.76 9-4.71V24h1v-6h-6v1Zm-8-6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2Zm-3 0c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1Zm9 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2Zm-3 0c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1Zm9 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2Zm-3 0c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1ZM11 2C7.94 2 5.08 3.26 3 5.47V1H2v6h6V6H3.86C5.73 4.08 8.28 3 11 3c5.51 0 10 4.49 10 10 0 .8-.1 1.61-.29 2.38l.97.24c.21-.85.31-1.73.31-2.62 0-6.07-4.93-11-11-11Z' />
+    </svg>
+  )
+})
+
+SvgPendingQueue24.displayName = 'SvgPendingQueue24'
+export default SvgPendingQueue24

package/src/Icon/PendingQueueResponsive.tsx

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

package/src/Icon/Playbook16.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: 'PicassoSvgPlaybook16',
+})
+const SvgPlaybook16 = forwardRef(function SvgPlaybook16(
+  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='M15.8 12.61 10 7.38V11h-.84c-.42 0-.82.12-1.16.32V4c0-1.33.67-2 1.5-2H14v8h1V1H9.5c-.82 0-1.54.39-2 1-.46-.61-1.18-1-2-1H0v11h5.5c.83 0 1.5.67 1.5 2h1c0-1.33.67-2 1.5-2h.5v3.28l2.46-1.14.68 1.52.91-.41-.68-1.54 2.43-1.12ZM7 11.73c-.43-.45-1.02-.73-1.68-.73H1V2h4.5C6.33 2 7 2.67 7 4v7.73Zm4 1.99V9.63l3 2.71-3 1.39Z' />
+    </svg>
+  )
+})
+
+SvgPlaybook16.displayName = 'SvgPlaybook16'
+export default SvgPlaybook16

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/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