@toptal/picasso-icons 1.1.2-alpha-feature-tailwind-w20-45308c736.12 → 1.1.2-alpha-feature-tailwind-w21-c853d19b7.47

package/src/Icon/Critical16.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: 'PicassoSvgCritical16',
+})
+const SvgCritical16 = forwardRef(function SvgCritical16(
+  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='M14.503 8.001 8 1.5 1.5 8.001l6.501 6.502L14.503 8ZM8.709.793a1 1 0 0 0-1.415 0L.793 7.294a1 1 0 0 0 0 1.415l6.501 6.501a1 1 0 0 0 1.415 0l6.501-6.501a1 1 0 0 0 0-1.415L8.709.793ZM7.5 4h1v6h-1V4Zm1 7h-1v1h1v-1Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgCritical16.displayName = 'SvgCritical16'
+export default SvgCritical16

package/src/Icon/Critical24.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: 'PicassoSvgCritical24',
+})
+const SvgCritical24 = forwardRef(function SvgCritical24(
+  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='m22.108 11.649-9.752-9.753a.5.5 0 0 0-.707 0L1.897 11.65a.5.5 0 0 0 0 .707l9.752 9.752a.5.5 0 0 0 .707 0l9.752-9.752a.5.5 0 0 0 0-.707Zm-9.045-10.46a1.5 1.5 0 0 0-2.122 0L1.19 10.941a1.5 1.5 0 0 0 0 2.122l9.752 9.752a1.5 1.5 0 0 0 2.122 0l9.752-9.752a1.5 1.5 0 0 0 0-2.122L13.063 1.19ZM11.5 6.775h1v8.662h-1V6.774Zm1 10.105h-1v1h1v-1Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgCritical24.displayName = 'SvgCritical24'
+export default SvgCritical24

package/src/Icon/CriticalResponsive.tsx

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

package/src/Icon/CriticalSolid16.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: 'PicassoSvgCriticalSolid16',
+})
+const SvgCriticalSolid16 = forwardRef(function SvgCriticalSolid16(
+  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='M8.709.793a1 1 0 0 0-1.415 0L.793 7.294a1 1 0 0 0 0 1.415l6.501 6.501a1 1 0 0 0 1.415 0l6.501-6.501a1 1 0 0 0 0-1.415L8.709.793ZM7.25 4.759a.75.75 0 0 1 1.5 0V9.08a.75.75 0 0 1-1.5 0V4.759Zm1.5 7.33a.751.751 0 0 1-.75.752.751.751 0 0 1-.75-.753c0-.415.336-.752.75-.752s.75.336.75.752Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgCriticalSolid16.displayName = 'SvgCriticalSolid16'
+export default SvgCriticalSolid16

package/src/Icon/CriticalSolid24.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: 'PicassoSvgCriticalSolid24',
+})
+const SvgCriticalSolid24 = forwardRef(function SvgCriticalSolid24(
+  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='M13.063 1.19a1.5 1.5 0 0 0-2.122 0L1.19 10.941a1.5 1.5 0 0 0 0 2.12l9.752 9.753a1.5 1.5 0 0 0 2.122 0l9.752-9.752a1.5 1.5 0 0 0 0-2.122L13.063 1.19ZM11 7.013a1 1 0 1 1 2 0v7a1 1 0 1 1-2 0v-7Zm2 10.99a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgCriticalSolid24.displayName = 'SvgCriticalSolid24'
+export default SvgCriticalSolid24

package/src/Icon/CriticalSolidResponsive.tsx

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

package/src/Icon/Warning16.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: 'PicassoSvgWarning16',
+})
+const SvgWarning16 = forwardRef(function SvgWarning16(
+  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='M6.78 1.707c.54-.943 1.91-.943 2.45 0l6.423 11.2c.536.934-.144 2.093-1.225 2.093H1.582C.5 15-.178 13.84.357 12.907l6.422-11.2Zm1.633.462a.472.472 0 0 0-.817 0l-6.422 11.2a.467.467 0 0 0 .408.698h12.846c.36 0 .587-.387.408-.698l-6.423-11.2ZM7.5 4.4h1v6h-1v-6Zm1 7h-1v1h1v-1Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgWarning16.displayName = 'SvgWarning16'
+export default SvgWarning16

package/src/Icon/Warning24.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: 'PicassoSvgWarning24',
+})
+const SvgWarning24 = forwardRef(function SvgWarning24(
+  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='M10.333 2.465c.736-1.287 2.598-1.287 3.334 0l9.829 17.181c.728 1.273-.196 2.854-1.667 2.854H2.17C.7 22.5-.224 20.919.504 19.646l9.829-17.181Zm2.5.472a.961.961 0 0 0-1.667 0L1.338 20.118a.955.955 0 0 0 .833 1.427H21.83a.955.955 0 0 0 .833-1.427L12.834 2.937ZM11.5 7h1v8.662h-1V7Zm1 10.1h-1v1h1v-1Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgWarning24.displayName = 'SvgWarning24'
+export default SvgWarning24

package/src/Icon/WarningResponsive.tsx

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

package/src/Icon/WarningSolid16.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: 'PicassoSvgWarningSolid16',
+})
+const SvgWarningSolid16 = forwardRef(function SvgWarningSolid16(
+  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='M8.869 1.505a1 1 0 0 0-1.738 0L.299 13.503a1 1 0 0 0 .87 1.495H14.83a1 1 0 0 0 .87-1.495L8.868 1.505ZM7.25 4.76a.75.75 0 1 1 1.5 0V9.08a.75.75 0 1 1-1.5 0V4.759Zm1.5 7.33a.751.751 0 0 1-.75.752.751.751 0 0 1-.75-.753c0-.415.336-.752.75-.752s.75.336.75.752Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgWarningSolid16.displayName = 'SvgWarningSolid16'
+export default SvgWarningSolid16

package/src/Icon/WarningSolid24.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: 'PicassoSvgWarningSolid24',
+})
+const SvgWarningSolid24 = forwardRef(function SvgWarningSolid24(
+  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='M13.303 2.258a1.5 1.5 0 0 0-2.607 0L.45 20.255a1.5 1.5 0 0 0 1.304 2.242h20.494a1.5 1.5 0 0 0 1.303-2.242L13.303 2.258ZM11 7.014a1 1 0 1 1 2 0v7a1 1 0 1 1-2 0v-7Zm2 10.99a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+})
+
+SvgWarningSolid24.displayName = 'SvgWarningSolid24'
+export default SvgWarningSolid24

package/src/Icon/WarningSolidResponsive.tsx

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

package/src/Icon/index.ts

@@ -106,11 +106,17 @@ export { default as Component16 } from './Component16'
 export { default as Component24 } from './Component24'
 export { default as Confluence16 } from './Confluence16'
 export { default as Confluence24 } from './Confluence24'
+export { default as Control16 } from './Control16'
+export { default as Control24 } from './Control24'
 export { default as Copy16 } from './Copy16'
 export { default as Copy24 } from './Copy24'
 export { default as CreditCard16 } from './CreditCard16'
 export { default as CreditCard24 } from './CreditCard24'
 export { default as CreditCard32 } from './CreditCard32'
+export { default as Critical16 } from './Critical16'
+export { default as Critical24 } from './Critical24'
+export { default as CriticalSolid16 } from './CriticalSolid16'
+export { default as CriticalSolid24 } from './CriticalSolid24'
 export { default as Dialpad16 } from './Dialpad16'
 export { default as Dialpad24 } from './Dialpad24'
 export { default as Dispute16 } from './Dispute16'
@@ -410,6 +416,10 @@ export { default as VideoOn16 } from './VideoOn16'
 export { default as VideoOn24 } from './VideoOn24'
 export { default as View16 } from './View16'
 export { default as View24 } from './View24'
+export { default as Warning16 } from './Warning16'
+export { default as Warning24 } from './Warning24'
+export { default as WarningSolid16 } from './WarningSolid16'
+export { default as WarningSolid24 } from './WarningSolid24'
 export { default as Whatsapp16 } from './Whatsapp16'
 export { default as Whatsapp24 } from './Whatsapp24'
 export { default as WhitePaper16 } from './WhitePaper16'
@@ -472,8 +482,11 @@ export { default as CommissionResponsive } from './CommissionResponsive'
 export { default as CompanyResponsive } from './CompanyResponsive'
 export { default as ComponentResponsive } from './ComponentResponsive'
 export { default as ConfluenceResponsive } from './ConfluenceResponsive'
+export { default as ControlResponsive } from './ControlResponsive'
 export { default as CopyResponsive } from './CopyResponsive'
 export { default as CreditCardResponsive } from './CreditCardResponsive'
+export { default as CriticalResponsive } from './CriticalResponsive'
+export { default as CriticalSolidResponsive } from './CriticalSolidResponsive'
 export { default as DialpadResponsive } from './DialpadResponsive'
 export { default as DisputeResponsive } from './DisputeResponsive'
 export { default as DoneResponsive } from './DoneResponsive'
@@ -621,6 +634,8 @@ export { default as VerificationBadgeResponsive } from './VerificationBadgeRespo
 export { default as VideoOffResponsive } from './VideoOffResponsive'
 export { default as VideoOnResponsive } from './VideoOnResponsive'
 export { default as ViewResponsive } from './ViewResponsive'
+export { default as WarningResponsive } from './WarningResponsive'
+export { default as WarningSolidResponsive } from './WarningSolidResponsive'
 export { default as WhatsappResponsive } from './WhatsappResponsive'
 export { default as WhitePaperResponsive } from './WhitePaperResponsive'
 export { default as WorkExperienceResponsive } from './WorkExperienceResponsive'

package/src/Icon/story/index.jsx

@@ -43,7 +43,7 @@ page
   ])
   .addTextSection(
     `
-  Didn't find a required Icon? Feel free to add it yourself - [how to add icon](https://github.com/toptal/picasso#add-an-icon)
+  Didn't find a required Icon? Feel free to add it yourself - [how to add icon](https://github.com/toptal/picasso#adding-icons-and-pictograms)
   `
   )
   .addExample(

package/src/Icon/svg/control16.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="#455065" d="M10 5H0V4h10v1Zm6 0h-3V4h3v1ZM3 13H0v-1h3v1Zm13 0H6v-1h10v1Z M11.5 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM9 4.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0ZM4.5 11a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM2 12.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z" />
+</svg>

package/src/Icon/svg/control24.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#455065" d="M17.5 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM14 6.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0ZM6.5 16a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM3 18.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Z M15 7H0V6h15v1Zm9 0h-4V6h4v1ZM4 19H0v-1h4v1Zm20 0H9v-1h15v1Z"/>
+</svg>