sync icons (#465)

* u yarn.lock * u sync.ts * sync * a changeset
status-im · Aug 28, 2023 · 02ffce3 · 02ffce3 · vercel · Aug 28, 2023
1 parent 09200d4
commit 02ffce3
Show file tree

Hide file tree

Showing 74 changed files with 1,145 additions and 174 deletions.
diff --git a/.changeset/shiny-poems-rescue.md b/.changeset/shiny-poems-rescue.md
@@ -0,0 +1,5 @@
+---
+'@status-im/icons': minor
+---
+
+sync icons
diff --git a/packages/icons/scripts/sync.ts b/packages/icons/scripts/sync.ts
@@ -81,6 +81,28 @@ for (const [nodeId, name] of Object.entries(NODE_IDS)) {
 
     const svgRaw = await fetch(image!).then(res => res.text())
 
+    // note: probably a wrapper layer for https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Iconset?type=design&node-id=4408-955&mode=dev, thus skipping
+    // icon:: {
+    //   key: 'c73f7bad669c2696c2158cef34967a20cc0f0f0f',
+    //   name: 'Use=Default, Typo=False, Style=Gradient',
+    //   description: '',
+    //   remote: true,
+    //   componentSetId: '4819:992',
+    //   documentationLinks: []
+    // }
+    // raw::
+    // transform::
+    // icon:: {
+    //   key: '53e1bc9f7ee455bc6cc38b90a9b7614ef64afe4e',
+    //   name: '20/status-logo',
+    //   description: '',
+    //   remote: false,
+    //   documentationLinks: []
+    // }
+    if (!svgRaw) {
+      continue
+    }
+
     const svg = await transform(svgRaw, {
       plugins: ['@svgr/plugin-svgo'],
       replaceAttrValues: {

diff --git a/packages/icons/src/activity-icon.tsx b/packages/icons/src/activity-icon.tsx
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgActivityIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M3.565 12.192a2.1 2.1 0 1 1 2.97-2.97l1.672 1.672 2.707-2.667-1.692-1.692a2.1 2.1 0 1 1 2.97-2.97l.285.285a2.6 2.6 0 0 1 3.674 3.674l.284.284a2.1 2.1 0 0 1-2.97 2.97l-1.703-1.703-2.706 2.668 1.722 1.722a2.1 2.1 0 0 1-2.97 2.97l-.284-.284a2.6 2.6 0 0 1-3.674-3.674l-.285-.285Zm8.062-7.495.424.424 2.828 2.829.425.424.282.282a.9.9 0 1 1-1.273 1.273l-4.242-4.242a.9.9 0 1 1 1.273-1.273l.283.283ZM15.3 6.675A1.4 1.4 0 0 0 13.326 4.7l1.975 1.975ZM4.414 10.07a.9.9 0 0 0 0 1.273l4.242 4.242a.9.9 0 1 0 1.273-1.273L5.687 10.07a.9.9 0 0 0-1.273 0Zm.285 3.255A1.4 1.4 0 0 0 6.674 15.3L4.7 13.326Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgActivityIcon
diff --git a/packages/icons/src/add-token-icon.tsx b/packages/icons/src/add-token-icon.tsx
@@ -13,7 +13,7 @@ const SvgAddTokenIcon = createIcon(props => {
       aria-hidden={true}
     >
       <path
-        fill="#647084"
+        fill={props.color}
         fillRule="evenodd"
         d="M3 10a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"
         clipRule="evenodd"

diff --git a/packages/icons/src/backspace-icon.tsx b/packages/icons/src/backspace-icon.tsx
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgBackspaceIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="m10.28 3.638-.945.022c-1.775.038-2.454.067-3.061.355-.611.29-.993.72-1.981 1.88-.657.77-1.324 1.616-1.824 2.39-.25.387-.449.742-.583 1.05-.14.32-.186.537-.186.665 0 .127.047.345.186.664.134.309.333.664.583 1.051.5.774 1.167 1.62 1.824 2.39.988 1.16 1.37 1.59 1.981 1.88.607.288 1.286.317 3.06.355l.946.022c1.53.035 2.728.063 3.688.013 1.16-.061 1.826-.233 2.246-.53.385-.273.671-.73.852-1.667.183-.953.234-2.285.234-4.178 0-1.893-.052-3.225-.235-4.178-.18-.938-.466-1.394-.85-1.666-.42-.297-1.086-.47-2.247-.53-.96-.051-2.158-.023-3.688.012Zm8.16 1.92c.212 1.102.26 2.56.26 4.442 0 1.883-.048 3.34-.26 4.442-.214 1.117-.618 1.98-1.417 2.545-.764.54-1.775.723-2.982.786-1.018.053-2.282.024-3.81-.012l-.927-.021-.153-.003c-1.567-.034-2.567-.055-3.478-.488-.91-.432-1.482-1.104-2.37-2.146l-.076-.09c-.674-.791-1.386-1.69-1.934-2.538a8.974 8.974 0 0 1-.691-1.252C.432 10.832.3 10.407.3 10c0-.407.131-.831.302-1.223.175-.403.417-.828.69-1.252.549-.848 1.261-1.747 1.935-2.538l.077-.09c.887-1.042 1.46-1.714 2.37-2.146.91-.433 1.91-.454 3.477-.488l.153-.003.927-.02v-.001c1.528-.036 2.792-.065 3.81-.012 1.207.063 2.218.246 2.982.786.8.565 1.203 1.428 1.417 2.545ZM10.008 10 7.675 7.667l.99-.99 2.333 2.333 2.333-2.333.99.99L11.988 10l2.334 2.334-.99.99-2.334-2.334-2.333 2.333-.99-.99L10.008 10Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgBackspaceIcon
diff --git a/packages/icons/src/bridge-icon.tsx b/packages/icons/src/bridge-icon.tsx
@@ -15,7 +15,7 @@ const SvgBridgeIcon = createIcon(props => {
       <path
         fill={props.color}
         fillRule="evenodd"
-        d="m7.07 4.312-.001-.002v-.001l-.57-1.706-.568 1.705v.002l-.006.017a4.16 4.16 0 0 1-.164.373 4.794 4.794 0 0 1-.597.916c-.457.548-1.12 1.075-2.064 1.235V4H1.9v12h1.2v-3.764c.22.035.495.073.834.11 1.074.12 2.796.237 5.466.252V16h1.2v-3.402c2.67-.015 4.392-.132 5.466-.252.338-.037.613-.075.834-.11V16h1.2V4h-1.2v2.85c-.944-.16-1.607-.686-2.064-1.234a4.796 4.796 0 0 1-.76-1.289l-.007-.016v-.002l-.57-1.706-.568 1.706v.003l-.007.018a5.022 5.022 0 0 1-.162.383c-.12.255-.304.593-.555.927C11.7 6.317 10.981 6.9 10 6.9c-.981 0-1.7-.583-2.208-1.26a5.435 5.435 0 0 1-.716-1.31l-.006-.018Zm9.83 3.752c-1.4-.174-2.368-.939-2.986-1.68a5.813 5.813 0 0 1-.399-.54c-.1.166-.216.34-.348.516-.532.71-1.372 1.49-2.567 1.69v3.348c2.636-.015 4.312-.13 5.334-.244.433-.049.747-.096.966-.135V8.064ZM9.4 8.05c-1.195-.201-2.036-.98-2.568-1.69a6.28 6.28 0 0 1-.347-.516 5.82 5.82 0 0 1-.4.54C5.469 7.125 4.5 7.89 3.1 8.064v2.955c.219.039.533.086.966.135 1.022.113 2.698.229 5.334.244V8.051Z"
+        d="M6.75 2.4h-.485l-.101.472v.002l-.005.018a3.776 3.776 0 0 1-.145.43c-.117.29-.31.674-.61 1.057C4.813 5.13 3.793 5.9 2 5.9v1.2c2.207 0 3.56-.978 4.347-1.98l.053-.068V10.4H2v1.2h4.4v4.9h1.2v-4.9h4.8v4.9h1.2v-4.9H18v-1.2h-4.4V5.052l.053.069C14.44 6.12 15.793 7.1 18 7.1V5.9c-1.793 0-2.815-.772-3.403-1.52a4.396 4.396 0 0 1-.732-1.4l-.024-.088-.004-.018v-.002l-.102-.472h-1.454l-.113.454v.003l-.006.02a5.694 5.694 0 0 1-.125.389 5.77 5.77 0 0 1-.43.932C11.197 4.9 10.665 5.4 10 5.4s-1.196-.499-1.607-1.202a5.78 5.78 0 0 1-.555-1.322l-.005-.019v-.003h-.001L7.718 2.4H6.75Zm5.65 2.782C11.906 5.885 11.129 6.6 10 6.6s-1.906-.715-2.4-1.418V10.4h4.8V5.182Z"
         clipRule="evenodd"
       />
     </svg>

diff --git a/packages/icons/src/checktoken-icon.tsx b/packages/icons/src/checktoken-icon.tsx
@@ -13,7 +13,7 @@ const SvgChecktokenIcon = createIcon(props => {
       aria-hidden={true}
     >
       <path
-        fill="#647084"
+        fill={props.color}
         fillRule="evenodd"
         d="M3 10a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"
         clipRule="evenodd"

diff --git a/packages/icons/src/clear-big-icon.tsx b/packages/icons/src/clear-big-icon.tsx
@@ -0,0 +1,31 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgClearBigIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M2.5 10a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="m9.151 10-2.075 2.076.848.848L10 10.85l2.076 2.075.848-.848L10.85 10l2.075-2.076-.848-.848L10 9.15 7.924 7.076l-.848.848L9.15 10Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgClearBigIcon
diff --git a/packages/icons/src/clear-icon.tsx b/packages/icons/src/clear-icon.tsx
@@ -15,7 +15,7 @@ const SvgClearIcon = createIcon(props => {
       <path
         fill={props.color}
         fillRule="evenodd"
-        d="M2.5 10a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0Z"
+        d="M3 10a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"
         clipRule="evenodd"
       />
       <path

diff --git a/packages/icons/src/confetti-icon.tsx b/packages/icons/src/confetti-icon.tsx
@@ -29,12 +29,36 @@ const SvgConfettiIcon = createIcon(props => {
           d="M10.546 14.197 6.303 9.954l-.848.849 4.242 4.242.849-.848Zm-2.475 1.06L5.242 12.43l-.848.849 2.828 2.828.849-.848Z"
           clipRule="evenodd"
         />
-        <circle cx={14.362} cy={10.312} r={1} fill="#647084" opacity={0.8} />
-        <circle cx={8.787} cy={3.165} r={1.5} fill="#647084" opacity={0.4} />
-        <circle cx={16.545} cy={4.165} r={1} fill="#647084" opacity={0.6} />
-        <circle cx={11.751} cy={7.031} r={1.5} fill="#647084" opacity={0.8} />
-        <circle cx={12.47} cy={3.446} r={1} fill="#647084" opacity={0.4} />
-        <circle cx={16.715} cy={7.897} r={1.5} fill="#647084" opacity={0.6} />
+        <circle
+          cx={14.362}
+          cy={10.312}
+          r={1}
+          fill={props.color}
+          opacity={0.8}
+        />
+        <circle
+          cx={8.787}
+          cy={3.165}
+          r={1.5}
+          fill={props.color}
+          opacity={0.4}
+        />
+        <circle cx={16.545} cy={4.165} r={1} fill={props.color} opacity={0.6} />
+        <circle
+          cx={11.751}
+          cy={7.031}
+          r={1.5}
+          fill={props.color}
+          opacity={0.8}
+        />
+        <circle cx={12.47} cy={3.446} r={1} fill={props.color} opacity={0.4} />
+        <circle
+          cx={16.715}
+          cy={7.897}
+          r={1.5}
+          fill={props.color}
+          opacity={0.6}
+        />
       </g>
       <defs>
         <clipPath id="confetti-icon_svg__a">

diff --git a/packages/icons/src/delete-icon.tsx b/packages/icons/src/delete-icon.tsx
@@ -15,7 +15,7 @@ const SvgDeleteIcon = createIcon(props => {
       <path
         fill={props.color}
         fillRule="evenodd"
-        d="m10.28 3.638-.945.022c-1.775.038-2.454.067-3.061.355-.611.29-.993.72-1.981 1.88-.657.77-1.324 1.616-1.824 2.39-.25.387-.449.742-.583 1.05-.14.32-.186.537-.186.665 0 .127.047.345.186.664.134.309.333.664.583 1.051.5.774 1.167 1.62 1.824 2.39.988 1.16 1.37 1.59 1.981 1.88.607.288 1.286.317 3.06.355l.946.022c1.53.035 2.728.063 3.688.013 1.16-.061 1.826-.233 2.246-.53.385-.273.671-.73.852-1.667.183-.953.234-2.285.234-4.178 0-1.893-.052-3.225-.235-4.178-.18-.938-.466-1.394-.85-1.666-.42-.297-1.086-.47-2.247-.53-.96-.051-2.158-.023-3.688.012Zm8.16 1.92c.212 1.102.26 2.56.26 4.442 0 1.883-.048 3.34-.26 4.442-.214 1.117-.618 1.98-1.417 2.545-.764.54-1.775.723-2.982.786-1.018.053-2.282.024-3.81-.012l-.927-.021-.153-.003c-1.567-.034-2.567-.055-3.478-.488-.91-.432-1.482-1.104-2.37-2.146l-.076-.09c-.674-.791-1.386-1.69-1.934-2.538a8.974 8.974 0 0 1-.691-1.252C.432 10.832.3 10.407.3 10c0-.407.131-.831.302-1.223.175-.403.417-.828.69-1.252.549-.848 1.261-1.747 1.935-2.538l.077-.09c.887-1.042 1.46-1.714 2.37-2.146.91-.433 1.91-.454 3.477-.488l.153-.003.927-.02v-.001c1.528-.036 2.792-.065 3.81-.012 1.207.063 2.218.246 2.982.786.8.565 1.203 1.428 1.417 2.545ZM10.008 10 7.675 7.667l.99-.99 2.333 2.333 2.333-2.333.99.99L11.988 10l2.334 2.334-.99.99-2.334-2.334-2.333 2.333-.99-.99L10.008 10Z"
+        d="M10 1.9c-.635 0-1.192.03-1.661.141-.481.113-.904.318-1.228.689-.317.362-.488.824-.584 1.35a8.84 8.84 0 0 0-.12 1.32H2.5v1.2h1.402c.009 2.345.074 4.21.229 5.689.166 1.594.441 2.793.9 3.675.475.915 1.14 1.472 2.011 1.781.832.295 1.83.355 2.959.355s2.126-.06 2.958-.355c.871-.309 1.536-.866 2.012-1.78.458-.883.733-2.082.9-3.676.154-1.479.22-3.344.229-5.689h1.4V5.4h-3.908a8.841 8.841 0 0 0-.12-1.32c-.096-.526-.266-.988-.583-1.35-.324-.37-.747-.576-1.228-.689-.469-.11-1.026-.141-1.661-.141ZM7.627 5.4h-.019c.014-.45.045-.811.1-1.104.075-.412.185-.638.306-.776.113-.13.284-.237.6-.31.328-.078.77-.11 1.386-.11.615 0 1.057.032 1.386.11.316.073.487.18.6.31.12.138.23.364.306.776.054.293.086.655.1 1.104H7.625Zm-2.304 6.764C5.175 10.746 5.11 8.93 5.101 6.6h9.798c-.01 2.33-.074 4.146-.223 5.564-.161 1.547-.417 2.566-.771 3.247-.337.648-.766.997-1.348 1.203-.621.22-1.436.286-2.557.286s-1.936-.065-2.557-.286c-.582-.206-1.011-.555-1.348-1.203-.354-.68-.61-1.7-.772-3.247ZM7.9 13.5V9h1.2v4.5H7.9Zm3 0V9h1.2v4.5h-1.2Z"
         clipRule="evenodd"
       />
     </svg>

diff --git a/packages/icons/src/derivated-path-big-icon.tsx b/packages/icons/src/derivated-path-big-icon.tsx
@@ -0,0 +1,32 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgDerivatedPathBigIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <g clipPath="url(#derivated-path-big-icon_svg__a)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="M2.2 5.5a3.3 3.3 0 1 1 6.6 0 3.3 3.3 0 0 1-6.6 0ZM5.5.8a4.7 4.7 0 1 0 2.792 8.482l4.144 4.144a3.7 3.7 0 1 0 .99-.99L9.282 8.292a4.676 4.676 0 0 0 .866-2.092h1.718a3.701 3.701 0 1 0 0-1.4h-1.718A4.701 4.701 0 0 0 5.5.8Zm10 2.4a2.3 2.3 0 1 0 0 4.6 2.3 2.3 0 0 0 0-4.6Zm0 10a2.3 2.3 0 1 0 0 4.6 2.3 2.3 0 0 0 0-4.6Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <clipPath id="derivated-path-big-icon_svg__a">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgDerivatedPathBigIcon
diff --git a/packages/icons/src/derivated-path-icon.tsx b/packages/icons/src/derivated-path-icon.tsx
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgDerivatedPathIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M2.6 7a3.4 3.4 0 1 1 6.8 0 3.4 3.4 0 0 1-6.8 0ZM6 2.4a4.6 4.6 0 1 0 2.9 8.171l3.31 2.575a3.1 3.1 0 1 0 .724-.957L9.728 9.695c.438-.604.733-1.32.834-2.095h1.396a3.101 3.101 0 1 0 0-1.2h-1.396A4.6 4.6 0 0 0 6 2.4Zm9 2.7a1.9 1.9 0 1 0 0 3.8 1.9 1.9 0 0 0 0-3.8Zm0 7.5a1.9 1.9 0 1 0 0 3.8 1.9 1.9 0 0 0 0-3.8Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgDerivatedPathIcon
diff --git a/packages/icons/src/faceid-big-icon.tsx b/packages/icons/src/faceid-big-icon.tsx
@@ -0,0 +1,32 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgFaceidBigIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <g clipPath="url(#faceid-big-icon_svg__a)">
+        <path
+          fill={props.color}
+          fillRule="evenodd"
+          d="M8 .833c-.998.038-1.867.114-2.619.252-1.222.224-2.206.625-2.939 1.358-.733.732-1.133 1.716-1.357 2.938C.947 6.133.87 7.002.832 8h1.401c.037-.93.108-1.71.229-2.366.197-1.074.515-1.747.97-2.202.455-.454 1.128-.773 2.202-.97.657-.12 1.436-.191 2.366-.228V.833Zm4 1.4v-1.4c.998.038 1.867.114 2.618.252 1.223.224 2.207.625 2.94 1.358.732.732 1.132 1.716 1.357 2.938.138.752.214 1.621.252 2.619h-1.4c-.038-.93-.109-1.71-.23-2.366-.197-1.074-.515-1.747-.97-2.202-.454-.454-1.127-.773-2.201-.97-.657-.12-1.436-.191-2.366-.228Zm0 15.533c.93-.037 1.709-.107 2.366-.228 1.074-.197 1.747-.516 2.201-.97.455-.455.773-1.128.97-2.202.121-.657.192-1.436.23-2.366h1.4c-.038.998-.114 1.867-.252 2.619-.225 1.222-.625 2.206-1.358 2.939-.732.732-1.716 1.133-2.939 1.357-.751.138-1.62.214-2.618.252v-1.4ZM2.233 12c.037.93.108 1.71.229 2.366.197 1.074.515 1.747.97 2.201.455.455 1.128.774 2.202.971.657.12 1.436.191 2.366.228v1.401c-.998-.038-1.867-.114-2.619-.252-1.222-.224-2.206-.625-2.939-1.357-.733-.733-1.133-1.717-1.357-2.94C.947 13.869.87 12.999.832 12h1.401ZM7 7.25C7 8.217 6.552 9 6 9c-.553 0-1-.783-1-1.75 0-.966.447-1.75 1-1.75.552 0 1 .784 1 1.75ZM9.3 6v4.79l.205.205 1 1 .99-.99-.795-.795V6H9.3ZM15 7.25C15 8.217 14.552 9 14 9c-.553 0-1-.783-1-1.75 0-.966.447-1.75 1-1.75.552 0 1 .784 1 1.75Zm-6.15 6.742a2.3 2.3 0 0 1-.842-.842l-1.212.7a3.7 3.7 0 0 0 6.408 0l-1.212-.7a2.3 2.3 0 0 1-3.142.842Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <clipPath id="faceid-big-icon_svg__a">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgFaceidBigIcon
diff --git a/packages/icons/src/faces-icon.tsx b/packages/icons/src/faces-icon.tsx
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgFacesIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M9.242 3.157c1.264-.192 2.555.101 3.675.847l.666-.999c-1.359-.904-2.95-1.273-4.522-1.034-1.57.239-3.013 1.066-4.11 2.333-1.097 1.265-1.792 2.9-1.992 4.649a9.077 9.077 0 0 0 .875 5.065c.77 1.538 1.966 2.758 3.42 3.452a6.295 6.295 0 0 0 4.606.348c1.525-.472 2.856-1.506 3.796-2.92.94-1.413 1.444-3.135 1.444-4.898h-1.2c0 .293-.016.585-.048.873-.01.02-.021.044-.036.07-.057.102-.15.242-.29.383-.27.27-.746.574-1.576.574-.83 0-1.306-.304-1.576-.574a1.746 1.746 0 0 1-.347-.498.463.463 0 0 1-.01-.023v-.001.002l.001.002v.001c.001.001.001.001-.568.191l-.57.19.001.001v.002l.002.003.003.009.009.024a2.477 2.477 0 0 0 .14.297c.1.18.256.414.49.648.48.48 1.255.926 2.425.926.564 0 1.036-.104 1.428-.265a7.212 7.212 0 0 1-.72 1.398c-.803 1.206-1.915 2.055-3.153 2.438a5.094 5.094 0 0 1-3.734-.283c-1.19-.57-2.202-1.585-2.864-2.907a7.877 7.877 0 0 1-.755-4.392c.174-1.525.778-2.93 1.705-4 .926-1.068 2.118-1.74 3.385-1.932ZM10.5 8.5c.552 0 1-.672 1-1.5s-.448-1.5-1-1.5-1 .672-1 1.5.448 1.5 1 1.5ZM17 7c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5.448-1.5 1-1.5 1 .672 1 1.5Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgFacesIcon
diff --git a/packages/icons/src/flags-icon.tsx b/packages/icons/src/flags-icon.tsx
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgFlagsIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M4.6 3.9V2.5H3.4v15h1.2v-5.9h3.8v1.5h8.2V5.4h-5V3.9h-7Zm0 1.2v5.3h5v1.5h5.8V6.6h-5V5.1H4.6Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgFlagsIcon
diff --git a/packages/icons/src/food-icon.tsx b/packages/icons/src/food-icon.tsx
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgFoodIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M6.1 7a3.9 3.9 0 0 1 3.8-3.899 3.6 3.6 0 0 0 4 3.477V8c0 .707 0 1.207-.027 1.6-.027.388-.077.628-.156.818a2.4 2.4 0 0 1-1.299 1.3c-.19.078-.43.128-.817.155-.394.027-.894.027-1.601.027H7.5a1.4 1.4 0 0 1-1.4-1.4V7ZM10 1.9A5.1 5.1 0 0 0 4.9 7v3.5a2.6 2.6 0 0 0 2.6 2.6h.4V16a2.1 2.1 0 1 0 4.2 0v-2.972c.278-.039.534-.101.777-.202a3.6 3.6 0 0 0 1.949-1.948c.15-.361.213-.747.244-1.196.03-.439.03-.98.03-1.66V6a.726.726 0 0 0-.93-.695A2.4 2.4 0 0 1 11.1 3c0-.529-.405-1.1-1.061-1.1H10Zm.9 11.197c-.264.003-.556.003-.878.003H9.1V16a.9.9 0 1 0 1.8 0v-2.903Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgFoodIcon