@toptal/picasso-pictograms 5.4.0 → 5.5.0

package/src/Pictogram/FlagFlagsWhite64.tsx

@@ -0,0 +1,61 @@
+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 SvgFlagFlagsWhite64 = forwardRef(function SvgFlagFlagsWhite64(
+  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='M35 50h-9.17v-8.52H35V14h17.47L35 50ZM24 41H3V5h4l17 36Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M35 13.5h27.2L53.1 32l9.1 18.5H25.5V42M34.5 41.5l-9 9'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M3 41.5h31.5v-37H3M2.5 0v64'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgFlagFlagsWhite64.displayName = 'SvgFlagFlagsWhite64'
+export default SvgFlagFlagsWhite64

package/src/Pictogram/HandSelectedBlue64.tsx

@@ -0,0 +1,66 @@
+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 SvgHandSelectedBlue64 = forwardRef(function SvgHandSelectedBlue64(
+  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}
+    >
+      <path
+        fill='#183A9C'
+        d='m63 41-2-2-25.33 19H0v5h37.32L63 41Z'
+        opacity={0.15}
+      />
+      <path
+        fill='#183A9C'
+        d='M36.44 32.45a8.835 8.835 0 0 1-7.9 7.84l-4.49.45a3.93 3.93 0 0 0-3.54 3.92c0 1.69 1.08 3.2 2.69 3.73l11.71 3.9 14.6-10.19v-4.11l-.61-2.37a6.22 6.22 0 0 1-6.22 6.22c-3.43 0-6.22-2.79-6.22-6.22v-3.18l-.02.01Z'
+        opacity={0.15}
+      />
+      <path
+        fill='#204ECC'
+        fillRule='evenodd'
+        d='M32 1c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10S37.523 1 32 1ZM21 11c0-6.075 4.925-11 11-11s11 4.925 11 11-4.925 11-11 11-11-4.925-11-11Z'
+        clipRule='evenodd'
+      />
+      <path
+        fill='#204ECC'
+        fillRule='evenodd'
+        d='M32 22a16.96 16.96 0 0 0-13.144 6.217l-.773-.634A17.96 17.96 0 0 1 32 21c9.936 0 18 8.064 18 18v3.11h-1V39c0-9.384-7.616-17-17-17Z'
+        clipRule='evenodd'
+      />
+      <path
+        stroke='#204ECC'
+        strokeMiterlimit={10}
+        d='M0 63.5h37.3l25.87-22.22c-1.91-3.34-6.28-4.32-9.43-2.12L34.91 52.3 23.2 48.4a3.934 3.934 0 0 1-2.69-3.73c0-2.02 1.53-3.72 3.54-3.92l4.49-.45a8.835 8.835 0 0 0 7.96-8.8H13C6.1 31.5.5 37.1.5 44'
+      />
+    </svg>
+  )
+})
+
+SvgHandSelectedBlue64.displayName = 'SvgHandSelectedBlue64'
+export default SvgHandSelectedBlue64

package/src/Pictogram/HandSelectedWhite64.tsx

@@ -0,0 +1,66 @@
+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 SvgHandSelectedWhite64 = forwardRef(function SvgHandSelectedWhite64(
+  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}
+    >
+      <path
+        fill='#000'
+        d='m63 41-2-2-25.33 19H0v5h37.32L63 41Z'
+        opacity={0.3}
+      />
+      <path
+        fill='#000'
+        d='M36.44 32.45a8.835 8.835 0 0 1-7.9 7.84l-4.49.45a3.93 3.93 0 0 0-3.54 3.92c0 1.69 1.08 3.2 2.69 3.73l11.71 3.9 14.6-10.19v-4.11l-.61-2.37a6.22 6.22 0 0 1-6.22 6.22c-3.43 0-6.22-2.79-6.22-6.22v-3.18l-.02.01Z'
+        opacity={0.3}
+      />
+      <path
+        fill='#fff'
+        fillRule='evenodd'
+        d='M32 1c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10S37.523 1 32 1ZM21 11c0-6.075 4.925-11 11-11s11 4.925 11 11-4.925 11-11 11-11-4.925-11-11Z'
+        clipRule='evenodd'
+      />
+      <path
+        fill='#fff'
+        fillRule='evenodd'
+        d='M32 22a16.96 16.96 0 0 0-13.144 6.217l-.773-.634A17.96 17.96 0 0 1 32 21c9.936 0 18 8.064 18 18v3.11h-1V39c0-9.384-7.616-17-17-17Z'
+        clipRule='evenodd'
+      />
+      <path
+        stroke='#fff'
+        strokeMiterlimit={10}
+        d='M0 63.5h37.3l25.87-22.22c-1.91-3.34-6.28-4.32-9.43-2.12L34.91 52.3 23.2 48.4a3.934 3.934 0 0 1-2.69-3.73c0-2.02 1.53-3.72 3.54-3.92l4.49-.45a8.835 8.835 0 0 0 7.96-8.8H13C6.1 31.5.5 37.1.5 44'
+      />
+    </svg>
+  )
+})
+
+SvgHandSelectedWhite64.displayName = 'SvgHandSelectedWhite64'
+export default SvgHandSelectedWhite64

package/src/Pictogram/HospitalBuildingBlue64.tsx

@@ -0,0 +1,61 @@
+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 SvgHospitalBuildingBlue64 = forwardRef(function SvgHospitalBuildingBlue64(
+  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='M43 51H21v6h22v-6ZM43 42H21v6h22v-6ZM43 33H21v6h22v-6ZM3 57h14v-6H3v6ZM3 48h14v-6H3v6ZM48 51h13v-3H48v3ZM48 42h13v-3H48v3Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M2.5 63.5V23L17 15.75M21.5 39V1.5l22 11v10l18 9v32'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M38.5 18.5h-4v-4h-4v4h-4v4h4v4h4v-4h4v-4ZM48 51.5h13M48 42.5h13M48 63.5h16M0 63.5h43.5V27'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgHospitalBuildingBlue64.displayName = 'SvgHospitalBuildingBlue64'
+export default SvgHospitalBuildingBlue64

package/src/Pictogram/HospitalBuildingWhite64.tsx

@@ -0,0 +1,60 @@
+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 SvgHospitalBuildingWhite64 = forwardRef(
+  function SvgHospitalBuildingWhite64(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='M43 51H21v6h22v-6ZM43 42H21v6h22v-6ZM43 33H21v6h22v-6ZM3 57h14v-6H3v6ZM3 48h14v-6H3v6ZM48 51h13v-3H48v3ZM48 42h13v-3H48v3Z'
+            opacity={0.3}
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M2.5 63.5V23L17 15.75M21.5 39V1.5l22 11v10l18 9v32'
+          />
+          <path
+            stroke='#fff'
+            strokeMiterlimit={10}
+            d='M38.5 18.5h-4v-4h-4v4h-4v4h4v4h4v-4h4v-4ZM48 51.5h13M48 42.5h13M48 63.5h16M0 63.5h43.5V27'
+          />
+        </g>
+        <defs>
+          <clipPath id='a'>
+            <path fill='#fff' d='M0 0h64v64H0z' />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+
+SvgHospitalBuildingWhite64.displayName = 'SvgHospitalBuildingWhite64'
+export default SvgHospitalBuildingWhite64

package/src/Pictogram/InfinityElasticBlue64.tsx

@@ -0,0 +1,66 @@
+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 SvgInfinityElasticBlue64 = forwardRef(function SvgInfinityElasticBlue64(
+  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='M58.03 43.11c-5.86 5.85-15.36 5.85-21.22 0l-5.39-5.57-5.39 5.57c-5.86 5.85-15.36 5.85-21.22 0-2.29-2.3-3.68-5.16-4.17-8.14-.77 4.62.61 9.52 4.17 13.08 5.86 5.85 15.36 5.85 21.22 0l5.39-5.57 5.39 5.57c5.86 5.85 15.36 5.85 21.22 0 3.56-3.56 4.94-8.47 4.17-13.08-.49 2.98-1.88 5.84-4.17 8.14ZM21.08 26.84a8.015 8.015 0 0 0-11.32 0c-2.2 2.2-2.84 5.36-1.94 8.13a8.106 8.106 0 0 1 1.94-3.19 8.015 8.015 0 0 1 11.32 0l3.08 3.19 2.39-2.47-5.47-5.66ZM53.08 26.84a8.015 8.015 0 0 0-11.32 0l-5.47 5.66 2.39 2.47 3.08-3.19a8.015 8.015 0 0 1 11.32 0c.92.93 1.57 2.02 1.94 3.19.9-2.77.25-5.93-1.94-8.13Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M26.11 43.11c-5.86 5.86-15.36 5.86-21.21 0-5.86-5.86-5.86-15.36 0-21.21 5.86-5.86 15.36-5.86 21.21 0'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M21.16 38.16c-3.12 3.12-8.19 3.12-11.31 0-3.12-3.12-3.12-8.19 0-11.31 3.12-3.12 8.19-3.12 11.31 0M36.89 21.89c5.86-5.86 15.36-5.86 21.21 0 5.85 5.86 5.86 15.36 0 21.21-5.86 5.85-15.36 5.86-21.21 0'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M41.84 26.84c3.12-3.12 8.19-3.12 11.31 0 3.12 3.12 3.12 8.19 0 11.31-3.12 3.12-8.19 3.12-11.31 0M21.16 26.84l15.73 16.27M26.11 21.89l15.73 16.27M12.5 52v4.5c0 1.1.9 2 2 2h34c1.1 0 2-.9 2-2V52M50.5 13V8.5c0-1.1-.9-2-2-2h-34c-1.1 0-2 .9-2 2V13M36.37 32.5l5.47-5.66M26.11 43.11l5.39-5.57M31.5 27.47l5.39-5.58M21.16 38.16l5.47-5.66'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgInfinityElasticBlue64.displayName = 'SvgInfinityElasticBlue64'
+export default SvgInfinityElasticBlue64

package/src/Pictogram/InfinityElasticWhite64.tsx

@@ -0,0 +1,66 @@
+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 SvgInfinityElasticWhite64 = forwardRef(function SvgInfinityElasticWhite64(
+  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='M58.03 43.11c-5.86 5.85-15.36 5.85-21.22 0l-5.39-5.57-5.39 5.57c-5.86 5.85-15.36 5.85-21.22 0-2.29-2.3-3.68-5.16-4.17-8.14-.77 4.62.61 9.52 4.17 13.08 5.86 5.85 15.36 5.85 21.22 0l5.39-5.57 5.39 5.57c5.86 5.85 15.36 5.85 21.22 0 3.56-3.56 4.94-8.47 4.17-13.08-.49 2.98-1.88 5.84-4.17 8.14ZM21.08 26.84a8.015 8.015 0 0 0-11.32 0c-2.2 2.2-2.84 5.36-1.94 8.13a8.106 8.106 0 0 1 1.94-3.19 8.015 8.015 0 0 1 11.32 0l3.08 3.19 2.39-2.47-5.47-5.66ZM53.08 26.84a8.015 8.015 0 0 0-11.32 0l-5.47 5.66 2.39 2.47 3.08-3.19a8.015 8.015 0 0 1 11.32 0c.92.93 1.57 2.02 1.94 3.19.9-2.77.25-5.93-1.94-8.13Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M26.11 43.11c-5.86 5.86-15.36 5.86-21.21 0-5.86-5.86-5.86-15.36 0-21.21 5.86-5.86 15.36-5.86 21.21 0'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M21.16 38.16c-3.12 3.12-8.19 3.12-11.31 0-3.12-3.12-3.12-8.19 0-11.31 3.12-3.12 8.19-3.12 11.31 0M36.89 21.89c5.86-5.86 15.36-5.86 21.21 0 5.85 5.86 5.86 15.36 0 21.21-5.86 5.85-15.36 5.86-21.21 0'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M41.84 26.84c3.12-3.12 8.19-3.12 11.31 0 3.12 3.12 3.12 8.19 0 11.31-3.12 3.12-8.19 3.12-11.31 0M21.16 26.84l15.73 16.27M26.11 21.89l15.73 16.27M12.5 52v4.5c0 1.1.9 2 2 2h34c1.1 0 2-.9 2-2V52M50.5 13V8.5c0-1.1-.9-2-2-2h-34c-1.1 0-2 .9-2 2V13M36.37 32.5l5.47-5.66M26.11 43.11l5.39-5.57M31.5 27.47l5.39-5.58M21.16 38.16l5.47-5.66'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgInfinityElasticWhite64.displayName = 'SvgInfinityElasticWhite64'
+export default SvgInfinityElasticWhite64

package/src/Pictogram/LinkHyperlinkBlue64.tsx

@@ -0,0 +1,76 @@
+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 SvgLinkHyperlinkBlue64 = forwardRef(function SvgLinkHyperlinkBlue64(
+  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='M45 23.5H33c-.34 0-.67.03-1 .06-.33-.04-.66-.06-1-.06H19c-4.69 0-8.5 3.81-8.5 8.5 0 4.69 3.81 8.5 8.5 8.5h12c.34 0 .67-.03 1-.06.33.04.66.06 1 .06h12c4.69 0 8.5-3.81 8.5-8.5 0-4.69-3.81-8.5-8.5-8.5ZM32 36.38c-2-.46-3.5-2.24-3.5-4.38 0-2.14 1.5-3.92 3.5-4.38 2 .46 3.5 2.24 3.5 4.38 0 2.14-1.5 3.92-3.5 4.38ZM14.5 32c0-2.49 2.01-4.5 4.5-4.5h6.8a8.454 8.454 0 0 0-1.3 4.5c0 1.65.48 3.19 1.3 4.5H19c-2.49 0-4.5-2.01-4.5-4.5ZM45 36.5h-6.8c.82-1.31 1.3-2.85 1.3-4.5s-.48-3.19-1.3-4.5H45c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5ZM59.5 17V4.5H47L59.5 17Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M37 4.5H16.5c-6.63 0-12 5.37-12 12v31c0 6.63 5.37 12 12 12h31c6.63 0 12-5.37 12-12V27M59.5 17V4.5H47L59.5 17ZM53 11l-6.5 6.5'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M33 40.5H19c-4.69 0-8.5-3.81-8.5-8.5 0-4.69 3.81-8.5 8.5-8.5h12c4.69 0 8.5 3.81 8.5 8.5 0 .65-.07 1.28-.21 1.89'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M25.8 36.5H19c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h12c2.49 0 4.5 2.01 4.5 4.5 0 .69-.16 1.34-.43 1.93'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M39 23.5h6c4.69 0 8.5 3.81 8.5 8.5 0 4.69-3.81 8.5-8.5 8.5H33c-4.69 0-8.5-3.81-8.5-8.5 0-1.65.47-3.2 1.29-4.5'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M42 27.5h3c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5H33c-2.49 0-4.5-2.01-4.5-4.5 0-2.14 1.5-3.93 3.5-4.39'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgLinkHyperlinkBlue64.displayName = 'SvgLinkHyperlinkBlue64'
+export default SvgLinkHyperlinkBlue64

package/src/Pictogram/LinkHyperlinkWhite64.tsx

@@ -0,0 +1,76 @@
+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 SvgLinkHyperlinkWhite64 = forwardRef(function SvgLinkHyperlinkWhite64(
+  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='M45 23.5H33c-.34 0-.67.03-1 .06-.33-.04-.66-.06-1-.06H19c-4.69 0-8.5 3.81-8.5 8.5 0 4.69 3.81 8.5 8.5 8.5h12c.34 0 .67-.03 1-.06.33.04.66.06 1 .06h12c4.69 0 8.5-3.81 8.5-8.5 0-4.69-3.81-8.5-8.5-8.5ZM32 36.38c-2-.46-3.5-2.24-3.5-4.38 0-2.14 1.5-3.92 3.5-4.38 2 .46 3.5 2.24 3.5 4.38 0 2.14-1.5 3.92-3.5 4.38ZM14.5 32c0-2.49 2.01-4.5 4.5-4.5h6.8a8.454 8.454 0 0 0-1.3 4.5c0 1.65.48 3.19 1.3 4.5H19c-2.49 0-4.5-2.01-4.5-4.5ZM45 36.5h-6.8c.82-1.31 1.3-2.85 1.3-4.5s-.48-3.19-1.3-4.5H45c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5ZM59.5 17V4.5H47L59.5 17Z'
+          opacity={0.3}
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M37 4.5H16.5c-6.63 0-12 5.37-12 12v31c0 6.63 5.37 12 12 12h31c6.63 0 12-5.37 12-12V27M59.5 17V4.5H47L59.5 17ZM53 11l-6.5 6.5'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M33 40.5H19c-4.69 0-8.5-3.81-8.5-8.5 0-4.69 3.81-8.5 8.5-8.5h12c4.69 0 8.5 3.81 8.5 8.5 0 .65-.07 1.28-.21 1.89'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M25.8 36.5H19c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5h12c2.49 0 4.5 2.01 4.5 4.5 0 .69-.16 1.34-.43 1.93'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M39 23.5h6c4.69 0 8.5 3.81 8.5 8.5 0 4.69-3.81 8.5-8.5 8.5H33c-4.69 0-8.5-3.81-8.5-8.5 0-1.65.47-3.2 1.29-4.5'
+        />
+        <path
+          stroke='#fff'
+          strokeMiterlimit={10}
+          d='M42 27.5h3c2.49 0 4.5 2.01 4.5 4.5s-2.01 4.5-4.5 4.5H33c-2.49 0-4.5-2.01-4.5-4.5 0-2.14 1.5-3.93 3.5-4.39'
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgLinkHyperlinkWhite64.displayName = 'SvgLinkHyperlinkWhite64'
+export default SvgLinkHyperlinkWhite64

package/src/Pictogram/LocationFriendsBlue64.tsx

@@ -0,0 +1,81 @@
+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 SvgLocationFriendsBlue64 = forwardRef(function SvgLocationFriendsBlue64(
+  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='M5.5 45v-.5c0-3.31 2.69-6 6-6s6 2.69 6 6v.5M11.5 38.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M22.5 38.5c0 .39-.02.78-.06 1.16-.58 5.53-5.26 9.84-10.94 9.84-6.08 0-11-4.92-11-11s4.92-11 11-11c1.52 0 2.97.31 4.28.86 3.95 1.67 6.72 5.58 6.72 10.14ZM31.5 25.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M11.5 38.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM5.5 45v-.5c0-3.31 2.69-6 6-6s6 2.69 6 6v.5M50.38 27.56A10.994 10.994 0 0 1 62.5 38.5c0 6.08-4.92 11-11 11-5.7 0-10.38-4.33-10.94-9.88'
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M51.5 38.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM45.5 45v-.5c0-3.31 2.69-6 6-6s6 2.69 6 6v.5'
+        />
+        <path
+          fill='#183A9C'
+          d='M51.5 27c-1.45 0-2.83.28-4.1.77-1.81 4.42-4.55 8.77-7.25 12.47.84 5.53 5.6 9.76 11.36 9.76 6.35 0 11.5-5.15 11.5-11.5S57.86 27 51.51 27h-.01Zm6 18h-12v-.5c0-3.31 2.69-6 6-6-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3c3.31 0 6 2.69 6 6v.5Z'
+          opacity={0.15}
+        />
+        <path
+          stroke='#204ECD'
+          strokeMiterlimit={10}
+          d='M14.96 26.09c-.91-2.57-1.46-5.14-1.46-7.59 0-9.94 8.06-18 18-18s18 8.06 18 18c0 14-18 32-18 32s-4.54-4.54-9.06-10.84'
+        />
+        <path
+          fill='#183A9C'
+          d='M35.45 46.16c-2.3 2.69-3.95 4.34-3.95 4.34s-1.61-1.61-3.86-4.24C20.37 47.11 15 50.03 15 53.5c0 4.14 7.61 7.5 17 7.5s17-3.36 17-7.5c0-3.62-5.81-6.64-13.55-7.34Z'
+          opacity={0.15}
+        />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill='#fff' d='M0 0h64v64H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+SvgLocationFriendsBlue64.displayName = 'SvgLocationFriendsBlue64'
+export default SvgLocationFriendsBlue64