@toptal/picasso-pictograms 5.4.0 → 5.5.0

package/src/Pictogram/CalendarRefreshBlue64.tsx

@@ -0,0 +1,67 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgCalendarRefreshBlue64 = forwardRef(function SvgCalendarRefreshBlue64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g clipPath='url(#a)'>
+        <path
+          fill='#183A9C'
+          d='M60.5 9H54v5h-5V9H15v5h-5V9H3.5A2.5 2.5 0 0 0 1 11.5V19h62v-7.5A2.5 2.5 0 0 0 60.5 9ZM32 50c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M54 8.5h6.53a2.97 2.97 0 0 1 2.97 2.97v45.06a2.97 2.97 0 0 1-2.97 2.97H3.47A2.97 2.97 0 0 1 .5 56.53V11.47A2.97 2.97 0 0 1 3.47 8.5H10M15 8.5h34'
+        />
+        <path
+          fill='#204ECD'
+          d='M14 4v9h-3V4h3Zm1-1h-5v11h5V3ZM53 4v9h-3V4h3Zm1-1h-5v11h5V3Z'
+        />
+        <path stroke='#204ECD' strokeMiterlimit={10} d='M43.5 25v4.5H39' />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M44.87 32.31c1.04 2 1.63 4.28 1.63 6.69 0 8.01-6.49 14.5-14.5 14.5S17.5 47.01 17.5 39 23.99 24.5 32 24.5c4.32 0 8.2 1.89 10.86 4.89'
+        />
+        <path stroke='#204ECD' strokeMiterlimit={10} d='m26 40 4 4 8.5-8.5' />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgCalendarRefreshBlue64.displayName = 'SvgCalendarRefreshBlue64'
+export default SvgCalendarRefreshBlue64

package/src/Pictogram/CalendarRefreshWhite64.tsx

@@ -0,0 +1,67 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgCalendarRefreshWhite64 = forwardRef(function SvgCalendarRefreshWhite64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g clipPath='url(#a)'>
+        <path
+          fill='#000'
+          d='M60.5 9H54v5h-5V9H15v5h-5V9H3.5A2.5 2.5 0 0 0 1 11.5V19h62v-7.5A2.5 2.5 0 0 0 60.5 9ZM32 50c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M54 8.5h6.53a2.97 2.97 0 0 1 2.97 2.97v45.06a2.97 2.97 0 0 1-2.97 2.97H3.47A2.97 2.97 0 0 1 .5 56.53V11.47A2.97 2.97 0 0 1 3.47 8.5H10M15 8.5h34'
+        />
+        <path
+          fill='#fff'
+          d='M14 4v9h-3V4h3Zm1-1h-5v11h5V3ZM53 4v9h-3V4h3Zm1-1h-5v11h5V3Z'
+        />
+        <path stroke='#fff' strokeMiterlimit={10} d='M43.5 25v4.5H39' />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M44.87 32.31c1.04 2 1.63 4.28 1.63 6.69 0 8.01-6.49 14.5-14.5 14.5S17.5 47.01 17.5 39 23.99 24.5 32 24.5c4.32 0 8.2 1.89 10.86 4.89'
+        />
+        <path stroke='#fff' strokeMiterlimit={10} d='m26 40 4 4 8.5-8.5' />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgCalendarRefreshWhite64.displayName = 'SvgCalendarRefreshWhite64'
+export default SvgCalendarRefreshWhite64

package/src/Pictogram/CertificateCredentialsBlue64.tsx

@@ -0,0 +1,63 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgCertificateCredentialsBlue64 = forwardRef(
+  function SvgCertificateCredentialsBlue64(
+    props: Props,
+    ref: Ref<SVGSVGElement>
+  ) {
+    const { className, style = {}, scale, base, 'data-testid': testId } = props
+    const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+    const svgStyle = {
+      minWidth: `${scaledSize}px`,
+      minHeight: `${scaledSize}px`,
+      ...style,
+    }
+
+    return (
+      <svg
+        fill='none'
+        viewBox='0 0 64 64'
+        className={className}
+        style={svgStyle}
+        ref={ref}
+        data-testid={testId}
+      >
+        <g clipPath='url(#a)'>
+          <path
+            fill='#183A9C'
+            d='M10.05 40.54 3.5 36l1.44-1H1v9h8.42l.63-3.46ZM37.06 35l1.44 1-6.55 4.54.63 3.46H63v-9H37.06ZM25.8 47h-.3L21 53.5 16.5 47h-.3l-3.7.67V62.5l8.5-4.46 8.5 4.46V47.67L25.8 47Z'
+            opacity={0.15}
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='M29.5 48v14.5L21 58.04l-8.5 4.46V48M9 44.5H.5v-41h63v41H33'
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='m21 18.5 4.54 6.55 7.83-1.42-1.42 7.83L38.5 36l-6.55 4.54 1.42 7.83-7.83-1.42L21 53.5l-4.54-6.55-7.83 1.42 1.42-7.83L3.5 36l6.55-4.54-1.42-7.83 7.83 1.42L21 18.5ZM41 14.5h14M41 20.5h14M41 26.5h6'
+          />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+
+SvgCertificateCredentialsBlue64.displayName = 'SvgCertificateCredentialsBlue64'
+export default SvgCertificateCredentialsBlue64

package/src/Pictogram/CertificateCredentialsWhite64.tsx

@@ -0,0 +1,64 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgCertificateCredentialsWhite64 = forwardRef(
+  function SvgCertificateCredentialsWhite64(
+    props: Props,
+    ref: Ref<SVGSVGElement>
+  ) {
+    const { className, style = {}, scale, base, 'data-testid': testId } = props
+    const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+    const svgStyle = {
+      minWidth: `${scaledSize}px`,
+      minHeight: `${scaledSize}px`,
+      ...style,
+    }
+
+    return (
+      <svg
+        fill='none'
+        viewBox='0 0 64 64'
+        className={className}
+        style={svgStyle}
+        ref={ref}
+        data-testid={testId}
+      >
+        <g clipPath='url(#a)'>
+          <path
+            fill='#000'
+            d='M10.05 40.54 3.5 36l1.44-1H1v9h8.42l.63-3.46ZM37.06 35l1.44 1-6.55 4.54.63 3.46H63v-9H37.06ZM25.8 47h-.3L21 53.5 16.5 47h-.3l-3.7.67V62.5l8.5-4.46 8.5 4.46V47.67L25.8 47Z'
+            opacity={0.3}
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M29.5 48v14.5L21 58.04l-8.5 4.46V48M9 44.5H.5v-41h63v41H33'
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='m21 18.5 4.54 6.55 7.83-1.42-1.42 7.83L38.5 36l-6.55 4.54 1.42 7.83-7.83-1.42L21 53.5l-4.54-6.55-7.83 1.42 1.42-7.83L3.5 36l6.55-4.54-1.42-7.83 7.83 1.42L21 18.5ZM41 14.5h14M41 20.5h14M41 26.5h6'
+          />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+
+SvgCertificateCredentialsWhite64.displayName =
+  'SvgCertificateCredentialsWhite64'
+export default SvgCertificateCredentialsWhite64

package/src/Pictogram/ChartPerformanceBlue64.tsx

@@ -0,0 +1,57 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgChartPerformanceBlue64 = forwardRef(function SvgChartPerformanceBlue64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g clipPath='url(#a)'>
+        <path
+          fill='#183A9C'
+          d='M18 .53V17h16.47C34.21 8.01 26.99.79 18 .53ZM18 53H4v10h14V53ZM39 42H25v21h14V42ZM60 1H46v62h14V1Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M0 63.5h64M17.5 61v-8.5h-13V61M38.5 61V41.5h-13V61M59.5 61V.5h-13V61M17.5 34.5c9.389 0 17-7.611 17-17s-7.611-17-17-17-17 7.611-17 17 7.611 17 17 17Z'
+        />
+        <path stroke='#204ECD' strokeMiterlimit={10} d='M17.5.5v17h17' />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgChartPerformanceBlue64.displayName = 'SvgChartPerformanceBlue64'
+export default SvgChartPerformanceBlue64

package/src/Pictogram/ChartPerformanceWhite64.tsx

@@ -0,0 +1,56 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgChartPerformanceWhite64 = forwardRef(
+  function SvgChartPerformanceWhite64(props: Props, ref: Ref<SVGSVGElement>) {
+    const { className, style = {}, scale, base, 'data-testid': testId } = props
+    const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+    const svgStyle = {
+      minWidth: `${scaledSize}px`,
+      minHeight: `${scaledSize}px`,
+      ...style,
+    }
+
+    return (
+      <svg
+        fill='none'
+        viewBox='0 0 64 64'
+        className={className}
+        style={svgStyle}
+        ref={ref}
+        data-testid={testId}
+      >
+        <g clipPath='url(#a)'>
+          <path
+            fill='#000'
+            d='M18 .53V17h16.47C34.21 8.01 26.99.79 18 .53ZM18 53H4v10h14V53ZM39 42H25v21h14V42ZM60 1H46v62h14V1Z'
+            opacity={0.3}
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M0 63.5h64M17.5 61v-8.5h-13V61M38.5 61V41.5h-13V61M59.5 61V.5h-13V61M17.5 34.5c9.389 0 17-7.611 17-17s-7.611-17-17-17-17 7.611-17 17 7.611 17 17 17Z'
+          />
+          <path stroke='#fff' strokeMiterlimit={10} d='M17.5.5v17h17' />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+
+SvgChartPerformanceWhite64.displayName = 'SvgChartPerformanceWhite64'
+export default SvgChartPerformanceWhite64

package/src/Pictogram/ChatBubbleCommunicationBlue64.tsx

@@ -0,0 +1,86 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgChatBubbleCommunicationBlue64 = forwardRef(
+  function SvgChatBubbleCommunicationBlue64(
+    props: Props,
+    ref: Ref<SVGSVGElement>
+  ) {
+    const { className, style = {}, scale, base, 'data-testid': testId } = props
+    const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+    const svgStyle = {
+      minWidth: `${scaledSize}px`,
+      minHeight: `${scaledSize}px`,
+      ...style,
+    }
+
+    return (
+      <svg
+        fill='none'
+        viewBox='0 0 64 64'
+        className={className}
+        style={svgStyle}
+        ref={ref}
+        data-testid={testId}
+      >
+        <g clipPath='url(#a)'>
+          <path
+            fill='#183A9C'
+            d='M14.482 35.456c-7.72 0-13.983 6.262-13.983 13.982s6.263 13.983 13.983 13.983c7.72 0 13.982-6.263 13.982-13.983 0-7.72-6.262-13.982-13.982-13.982ZM7.49 56.429a6.986 6.986 0 0 1 6.99-6.99 3.994 3.994 0 0 1-3.994-3.996 3.994 3.994 0 0 1 3.995-3.995 3.994 3.994 0 0 1 3.995 3.995 3.994 3.994 0 0 1-3.995 3.995 6.986 6.986 0 0 1 6.991 6.991l-.5.5H7.99l-.5-.5ZM42.447 56.43a6.986 6.986 0 0 1 6.991-6.992 3.994 3.994 0 0 1-3.995-3.995 3.994 3.994 0 0 1 3.995-3.995 3.994 3.994 0 0 1 3.995 3.995 3.994 3.994 0 0 1-3.995 3.995 6.986 6.986 0 0 1 6.991 6.991l-.499.5H42.946l-.5-.5ZM23.97 14.981a1.997 1.997 0 1 0 0-3.995 1.997 1.997 0 0 0 0 3.995ZM39.95 14.981a1.997 1.997 0 1 0 0-3.995 1.997 1.997 0 0 0 0 3.995ZM31.96 14.981a1.997 1.997 0 1 0 0-3.995 1.997 1.997 0 0 0 0 3.995Z'
+            opacity={0.15}
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='M49.438 63.42c7.722 0 13.983-6.26 13.983-13.982 0-7.722-6.26-13.982-13.983-13.982-7.722 0-13.982 6.26-13.982 13.982 0 7.722 6.26 13.983 13.982 13.983Z'
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='M14.482 49.438a3.995 3.995 0 1 0 0-7.99 3.995 3.995 0 0 0 0 7.99Z'
+          />
+          <path
+            stroke='#204ECD'
+            strokeLinecap='square'
+            strokeMiterlimit={10}
+            d='M7.49 56.43a6.986 6.986 0 0 1 6.992-6.992 6.986 6.986 0 0 1 6.991 6.991'
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='M49.438 49.438a3.995 3.995 0 1 0 0-7.99 3.995 3.995 0 0 0 0 7.99Z'
+          />
+          <path
+            stroke='#204ECD'
+            strokeLinecap='square'
+            strokeMiterlimit={10}
+            d='M42.447 56.43a6.986 6.986 0 0 1 6.991-6.992 6.986 6.986 0 0 1 6.991 6.991'
+          />
+          <path
+            stroke='#204ECD'
+            strokeMiterlimit={10}
+            d='M14.482 63.42c7.722 0 13.982-6.26 13.982-13.982 0-7.722-6.26-13.982-13.982-13.982-7.722 0-13.983 6.26-13.983 13.982 0 7.722 6.26 13.983 13.983 13.983ZM48.44.5H15.48v24.968h9.988l6.492 6.492 6.492-6.492h9.988V.5Z'
+          />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+
+SvgChatBubbleCommunicationBlue64.displayName =
+  'SvgChatBubbleCommunicationBlue64'
+export default SvgChatBubbleCommunicationBlue64

package/src/Pictogram/ChatBubbleCommunicationWhite64.tsx

@@ -0,0 +1,86 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgChatBubbleCommunicationWhite64 = forwardRef(
+  function SvgChatBubbleCommunicationWhite64(
+    props: Props,
+    ref: Ref<SVGSVGElement>
+  ) {
+    const { className, style = {}, scale, base, 'data-testid': testId } = props
+    const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+    const svgStyle = {
+      minWidth: `${scaledSize}px`,
+      minHeight: `${scaledSize}px`,
+      ...style,
+    }
+
+    return (
+      <svg
+        fill='none'
+        viewBox='0 0 64 64'
+        className={className}
+        style={svgStyle}
+        ref={ref}
+        data-testid={testId}
+      >
+        <g clipPath='url(#a)'>
+          <path
+            fill='#000'
+            d='M14.482 35.456c-7.72 0-13.983 6.262-13.983 13.982s6.263 13.983 13.983 13.983c7.72 0 13.982-6.263 13.982-13.983 0-7.72-6.262-13.982-13.982-13.982ZM7.49 56.429a6.986 6.986 0 0 1 6.99-6.99 3.994 3.994 0 0 1-3.994-3.996 3.994 3.994 0 0 1 3.995-3.995 3.994 3.994 0 0 1 3.995 3.995 3.994 3.994 0 0 1-3.995 3.995 6.986 6.986 0 0 1 6.991 6.991l-.5.5H7.99l-.5-.5ZM42.447 56.43a6.986 6.986 0 0 1 6.991-6.992 3.994 3.994 0 0 1-3.995-3.995 3.994 3.994 0 0 1 3.995-3.995 3.994 3.994 0 0 1 3.995 3.995 3.994 3.994 0 0 1-3.995 3.995 6.986 6.986 0 0 1 6.991 6.991l-.499.5H42.946l-.5-.5ZM23.97 14.981a1.997 1.997 0 1 0 0-3.995 1.997 1.997 0 0 0 0 3.995ZM39.95 14.981a1.997 1.997 0 1 0 0-3.995 1.997 1.997 0 0 0 0 3.995ZM31.96 14.981a1.997 1.997 0 1 0 0-3.995 1.997 1.997 0 0 0 0 3.995Z'
+            opacity={0.3}
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M49.438 63.42c7.722 0 13.983-6.26 13.983-13.982 0-7.722-6.26-13.982-13.983-13.982-7.722 0-13.982 6.26-13.982 13.982 0 7.722 6.26 13.983 13.982 13.983Z'
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M14.482 49.438a3.995 3.995 0 1 0 0-7.99 3.995 3.995 0 0 0 0 7.99Z'
+          />
+          <path
+            stroke='#fff'
+            strokeLinecap='square'
+            strokeMiterlimit={10}
+            d='M7.49 56.43a6.986 6.986 0 0 1 6.992-6.992 6.986 6.986 0 0 1 6.991 6.991'
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M49.438 49.438a3.995 3.995 0 1 0 0-7.99 3.995 3.995 0 0 0 0 7.99Z'
+          />
+          <path
+            stroke='#fff'
+            strokeLinecap='square'
+            strokeMiterlimit={10}
+            d='M42.447 56.43a6.986 6.986 0 0 1 6.991-6.992 6.986 6.986 0 0 1 6.991 6.991'
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M14.482 63.42c7.722 0 13.982-6.26 13.982-13.982 0-7.722-6.26-13.982-13.982-13.982-7.722 0-13.983 6.26-13.983 13.982 0 7.722 6.26 13.983 13.983 13.983ZM48.44.5H15.48v24.968h9.988l6.492 6.492 6.492-6.492h9.988V.5Z'
+          />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+
+SvgChatBubbleCommunicationWhite64.displayName =
+  'SvgChatBubbleCommunicationWhite64'
+export default SvgChatBubbleCommunicationWhite64

package/src/Pictogram/ChatConversationBlue64.tsx

@@ -0,0 +1,56 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgChatConversationBlue64 = forwardRef(function SvgChatConversationBlue64(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const { className, style = {}, scale, base, 'data-testid': testId } = props
+  const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 64 64'
+      className={className}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <g clipPath='url(#a)'>
+        <path
+          fill='#183A9C'
+          d='M53.5 34.5h-49c-2.21 0-4 1.79-4 4v12c0 2.21 1.79 4 4 4h3v8l8-8h38c2.21 0 4-1.79 4-4v-12c0-2.21-1.79-4-4-4Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M53.5 34.5h-49c-2.21 0-4 1.79-4 4v12c0 2.21 1.79 4 4 4h3v8l8-8h38c2.21 0 4-1.79 4-4v-12c0-2.21-1.79-4-4-4ZM59.5 9.5h-3v-8l-8 8h-38c-2.21 0-4 1.79-4 4v12c0 2.21 1.79 4 4 4h49c2.21 0 4-1.79 4-4v-12c0-2.21-1.79-4-4-4Z'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgChatConversationBlue64.displayName = 'SvgChatConversationBlue64'
+export default SvgChatConversationBlue64

package/src/Pictogram/ChatConversationWhite64.tsx

@@ -0,0 +1,55 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import type { StandardProps } from '@toptal/picasso-shared'
+
+const SIZE = 64
+
+type ScaleType = 1 | 2
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  base?: number
+}
+const SvgChatConversationWhite64 = forwardRef(
+  function SvgChatConversationWhite64(props: Props, ref: Ref<SVGSVGElement>) {
+    const { className, style = {}, scale, base, 'data-testid': testId } = props
+    const scaledSize = base || SIZE * Math.ceil(scale || 1)
+
+    const svgStyle = {
+      minWidth: `${scaledSize}px`,
+      minHeight: `${scaledSize}px`,
+      ...style,
+    }
+
+    return (
+      <svg
+        fill='none'
+        viewBox='0 0 64 64'
+        className={className}
+        style={svgStyle}
+        ref={ref}
+        data-testid={testId}
+      >
+        <g clipPath='url(#a)'>
+          <path
+            fill='#000'
+            d='M53.5 34.5h-49c-2.21 0-4 1.79-4 4v12c0 2.21 1.79 4 4 4h3v8l8-8h38c2.21 0 4-1.79 4-4v-12c0-2.21-1.79-4-4-4Z'
+            opacity={0.3}
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M53.5 34.5h-49c-2.21 0-4 1.79-4 4v12c0 2.21 1.79 4 4 4h3v8l8-8h38c2.21 0 4-1.79 4-4v-12c0-2.21-1.79-4-4-4ZM59.5 9.5h-3v-8l-8 8h-38c-2.21 0-4 1.79-4 4v12c0 2.21 1.79 4 4 4h49c2.21 0 4-1.79 4-4v-12c0-2.21-1.79-4-4-4Z'
+          />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+
+SvgChatConversationWhite64.displayName = 'SvgChatConversationWhite64'
+export default SvgChatConversationWhite64