From a43eb11d6565d19e82cf2b06e262ab509214b3d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Fri, 12 Dec 2025 17:27:02 +0100
Subject: [PATCH] chore: sync Figma resources (#14297)

* chore: sync icons

* chore: changesets

* fix: linear component
---
 .changeset/grumpy-areas-reply.md              |  5 ++
 .../__tests__/arrow-turn-up.spec.tsx          | 17 ++++
 .../{circle-minus.spec.tsx => astro.spec.tsx} |  6 +-
 .../components/__tests__/bloom-badge.spec.tsx | 17 ++++
 .../src/components/__tests__/bloom.spec.tsx   | 17 ++++
 .../__tests__/chart-activity.spec.tsx         | 17 ++++
 .../__tests__/circle-check-solid.spec.tsx     | 17 ++++
 .../__tests__/circle-info-solid.spec.tsx      | 17 ++++
 .../__tests__/circle-minus-solid.spec.tsx     | 17 ++++
 .../__tests__/circle-warning-solid.spec.tsx   | 17 ++++
 .../__tests__/circle-xmark-solid.spec.tsx     | 17 ++++
 .../components/__tests__/code-branch.spec.tsx | 17 ++++
 .../__tests__/code-compare.spec.tsx           | 17 ++++
 .../components/__tests__/code-editor.spec.tsx | 17 ++++
 .../src/components/__tests__/code.spec.tsx    | 17 ++++
 .../components/__tests__/collapse.spec.tsx    | 17 ++++
 .../components/__tests__/contentful.spec.tsx  | 17 ++++
 .../__tests__/credit-card-refresh.spec.tsx    | 17 ++++
 .../__tests__/cursor-default-solid.spec.tsx   | 17 ++++
 .../__tests__/cursor-default.spec.tsx         | 17 ++++
 .../__tests__/envelope-content.spec.tsx       | 17 ++++
 .../src/components/__tests__/equals.spec.tsx  | 17 ++++
 .../__tests__/face-disappointed.spec.tsx      | 17 ++++
 .../components/__tests__/file-plus.spec.tsx   | 17 ++++
 .../src/components/__tests__/file.spec.tsx    | 17 ++++
 .../components/__tests__/floppy-disk.spec.tsx | 17 ++++
 .../src/components/__tests__/focus.spec.tsx   | 17 ++++
 .../src/components/__tests__/gap.spec.tsx     | 17 ++++
 .../src/components/__tests__/globe.spec.tsx   | 17 ++++
 .../components/__tests__/grid-layout.spec.tsx | 17 ++++
 .../__tests__/image-sparkle.spec.tsx          | 17 ++++
 .../src/components/__tests__/image.spec.tsx   | 17 ++++
 .../src/components/__tests__/images.spec.tsx  | 17 ++++
 .../components/__tests__/language.spec.tsx    | 17 ++++
 .../__tests__/laptop-mobile.spec.tsx          | 17 ++++
 .../components/__tests__/layers-3.spec.tsx    | 17 ++++
 .../__tests__/layout-bottom.spec.tsx          | 17 ++++
 .../__tests__/layout-left-right.spec.tsx      | 17 ++++
 .../components/__tests__/layout-left.spec.tsx | 17 ++++
 .../__tests__/layout-right.spec.tsx           | 17 ++++
 .../__tests__/layout-top-bottom.spec.tsx      | 17 ++++
 .../components/__tests__/layout-top.spec.tsx  | 17 ++++
 .../src/components/__tests__/mailbox.spec.tsx | 17 ++++
 .../__tests__/margin-bottom.spec.tsx          | 17 ++++
 .../__tests__/margin-left-right.spec.tsx      | 17 ++++
 .../components/__tests__/margin-left.spec.tsx | 17 ++++
 .../__tests__/margin-right.spec.tsx           | 17 ++++
 .../__tests__/margin-top-bottom.spec.tsx      | 17 ++++
 .../components/__tests__/margin-top.spec.tsx  | 17 ++++
 .../__tests__/media-stop-solid.spec.tsx       | 17 ++++
 .../__tests__/message-plus.spec.tsx           | 17 ++++
 .../components/__tests__/microchip.spec.tsx   | 17 ++++
 .../__tests__/minus-circle.spec.tsx           | 17 ++++
 .../src/components/__tests__/palette.spec.tsx | 17 ++++
 .../components/__tests__/paper-plane.spec.tsx | 17 ++++
 .../__tests__/pin-tack-solid.spec.tsx         | 17 ++++
 .../components/__tests__/pin-tack.spec.tsx    | 17 ++++
 .../src/components/__tests__/plug.spec.tsx    | 17 ++++
 .../__tests__/pointer-circle-solid.spec.tsx   | 17 ++++
 .../src/components/__tests__/pointer.spec.tsx | 17 ++++
 .../components/__tests__/queue-solid.spec.tsx | 17 ++++
 .../src/components/__tests__/rename.spec.tsx  | 17 ++++
 .../src/components/__tests__/robot.spec.tsx   | 17 ++++
 .../src/components/__tests__/sap.spec.tsx     | 17 ++++
 .../components/__tests__/scan-text.spec.tsx   | 17 ++++
 .../src/components/__tests__/scan.spec.tsx    | 17 ++++
 .../__tests__/square-dashed-cursor.spec.tsx   | 17 ++++
 .../__tests__/stop-circle-solid.spec.tsx      | 17 ++++
 .../src/components/__tests__/svelte.spec.tsx  | 17 ++++
 .../components/__tests__/table-pen.spec.tsx   | 17 ++++
 .../src/components/__tests__/tablet.spec.tsx  | 17 ++++
 .../components/__tests__/tanstack.spec.tsx    | 17 ++++
 .../__tests__/telescope-solid.spec.tsx        | 17 ++++
 .../components/__tests__/telescope.spec.tsx   | 17 ++++
 .../components/__tests__/typography.spec.tsx  | 17 ++++
 .../src/components/__tests__/unfold.spec.tsx  | 17 ++++
 .../components/__tests__/variable.spec.tsx    | 17 ++++
 .../src/components/__tests__/vite.spec.tsx    | 17 ++++
 .../src/components/__tests__/wrench.spec.tsx  | 17 ++++
 .../src/components/arrow-down-circle.tsx      | 19 ++++-
 .../icons/src/components/arrow-turn-up.tsx    | 33 ++++++++
 .../icons/src/components/astro.tsx            | 55 +++++++++++++
 .../icons/src/components/bloom-badge.tsx      | 48 +++++++++++
 .../icons/src/components/bloom.tsx            | 25 ++++++
 .../icons/src/components/book-open.tsx        |  4 +-
 .../icons/src/components/chart-activity.tsx   | 26 ++++++
 .../src/components/chevron-left-mini.tsx      |  2 +-
 .../icons/src/components/chevron-left.tsx     | 26 ++----
 .../src/components/chevron-right-mini.tsx     |  2 +-
 .../icons/src/components/chevron-right.tsx    |  2 +-
 .../src/components/circle-check-solid.tsx     | 23 ++++++
 .../src/components/circle-info-solid.tsx      | 23 ++++++
 ...ircle-minus.tsx => circle-minus-solid.tsx} |  6 +-
 .../src/components/circle-warning-solid.tsx   | 23 ++++++
 .../src/components/circle-xmark-solid.tsx     | 23 ++++++
 .../icons/src/components/clock-solid.tsx      | 12 +--
 .../icons/src/components/code-branch.tsx      | 33 ++++++++
 .../icons/src/components/code-compare.tsx     | 40 ++++++++++
 .../icons/src/components/code-editor.tsx      | 26 ++++++
 .../icons/src/components/code.tsx             | 33 ++++++++
 .../icons/src/components/collapse.tsx         | 26 ++++++
 .../icons/src/components/contentful.tsx       | 54 +++++++++++++
 .../src/components/credit-card-refresh.tsx    | 33 ++++++++
 .../src/components/cursor-default-solid.tsx   | 23 ++++++
 .../icons/src/components/cursor-default.tsx   | 26 ++++++
 .../icons/src/components/document-text.tsx    |  2 +-
 .../icons/src/components/envelope-content.tsx | 26 ++++++
 .../icons/src/components/equals.tsx           | 26 ++++++
 .../icons/src/components/eye-slash.tsx        | 13 ++-
 .../src/components/face-disappointed.tsx      | 33 ++++++++
 .../icons/src/components/file-plus.tsx        | 33 ++++++++
 .../icons/src/components/file.tsx             | 33 ++++++++
 .../icons/src/components/floppy-disk.tsx      | 33 ++++++++
 .../icons/src/components/focus.tsx            | 26 ++++++
 .../icons/src/components/folder-open.tsx      |  4 +-
 .../icons/src/components/folder.tsx           | 25 +++---
 .../icons/src/components/gap.tsx              | 26 ++++++
 .../icons/src/components/globe.tsx            | 33 ++++++++
 .../icons/src/components/grid-layout.tsx      | 26 ++++++
 .../icons/src/components/image-sparkle.tsx    | 37 +++++++++
 .../icons/src/components/image.tsx            | 37 +++++++++
 .../icons/src/components/images.tsx           | 33 ++++++++
 .../icons/src/components/index.ts             | 79 ++++++++++++++++++-
 .../components/information-circle-solid.tsx   |  4 +-
 .../icons/src/components/language.tsx         | 33 ++++++++
 .../icons/src/components/laptop-mobile.tsx    | 26 ++++++
 .../icons/src/components/layers-3.tsx         | 40 ++++++++++
 .../icons/src/components/layout-bottom.tsx    | 33 ++++++++
 .../src/components/layout-left-right.tsx      | 26 ++++++
 .../icons/src/components/layout-left.tsx      | 26 ++++++
 .../icons/src/components/layout-right.tsx     | 26 ++++++
 .../src/components/layout-top-bottom.tsx      | 33 ++++++++
 .../icons/src/components/layout-top.tsx       | 33 ++++++++
 .../icons/src/components/light-bulb-solid.tsx |  2 +-
 .../icons/src/components/light-bulb.tsx       |  9 +--
 .../src/components/lock-closed-solid.tsx      |  4 +-
 .../icons/src/components/mailbox.tsx          | 48 +++++++++++
 .../icons/src/components/margin-bottom.tsx    | 26 ++++++
 .../src/components/margin-left-right.tsx      | 26 ++++++
 .../icons/src/components/margin-left.tsx      | 26 ++++++
 .../icons/src/components/margin-right.tsx     | 26 ++++++
 .../src/components/margin-top-bottom.tsx      | 26 ++++++
 .../icons/src/components/margin-top.tsx       | 26 ++++++
 .../icons/src/components/media-stop-solid.tsx | 23 ++++++
 .../icons/src/components/medusa.tsx           | 27 ++-----
 .../icons/src/components/message-plus.tsx     | 26 ++++++
 .../icons/src/components/microchip.tsx        | 33 ++++++++
 .../icons/src/components/minus-circle.tsx     | 26 ++++++
 .../icons/src/components/palette.tsx          | 30 +++++++
 .../icons/src/components/paper-plane.tsx      | 26 ++++++
 .../icons/src/components/photo.tsx            | 37 +++++----
 .../icons/src/components/pin-tack-solid.tsx   | 23 ++++++
 .../icons/src/components/pin-tack.tsx         | 26 ++++++
 .../icons/src/components/plug.tsx             | 26 ++++++
 .../src/components/pointer-circle-solid.tsx   | 23 ++++++
 .../icons/src/components/pointer.tsx          | 26 ++++++
 .../icons/src/components/queue-solid.tsx      | 23 ++++++
 .../icons/src/components/receipt-percent.tsx  | 11 ++-
 .../icons/src/components/rename.tsx           | 40 ++++++++++
 .../icons/src/components/resend.tsx           |  4 +-
 .../icons/src/components/robot.tsx            | 30 +++++++
 .../icons/src/components/sap.tsx              | 37 +++++++++
 .../icons/src/components/scan-text.tsx        | 26 ++++++
 .../icons/src/components/scan.tsx             | 26 ++++++
 .../icons/src/components/slack.tsx            | 31 ++++++--
 .../src/components/square-dashed-cursor.tsx   | 26 ++++++
 .../src/components/square-two-stack-mini.tsx  |  4 +-
 .../icons/src/components/square-two-stack.tsx |  4 +-
 .../src/components/stop-circle-solid.tsx      | 25 ++++++
 .../icons/src/components/svelte.tsx           | 27 +++++++
 .../icons/src/components/table-pen.tsx        | 26 ++++++
 .../icons/src/components/tablet.tsx           | 26 ++++++
 .../icons/src/components/tanstack.tsx         | 30 +++++++
 .../icons/src/components/telescope-solid.tsx  | 27 +++++++
 .../icons/src/components/telescope.tsx        | 26 ++++++
 .../icons/src/components/typography.tsx       | 26 ++++++
 .../icons/src/components/unfold.tsx           | 26 ++++++
 .../icons/src/components/variable.tsx         | 39 +++++++++
 .../icons/src/components/vite.tsx             | 57 +++++++++++++
 .../icons/src/components/window.tsx           | 16 ++--
 .../icons/src/components/wrench.tsx           | 26 ++++++
 181 files changed, 3838 insertions(+), 143 deletions(-)
 create mode 100644 .changeset/grumpy-areas-reply.md
 create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-turn-up.spec.tsx
 rename packages/design-system/icons/src/components/__tests__/{circle-minus.spec.tsx => astro.spec.tsx} (69%)
 create mode 100644 packages/design-system/icons/src/components/__tests__/bloom-badge.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/bloom.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/chart-activity.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/circle-check-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/circle-info-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/circle-minus-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/circle-warning-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/circle-xmark-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/code-branch.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/code-compare.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/code-editor.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/code.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/collapse.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/contentful.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/credit-card-refresh.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/cursor-default-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/cursor-default.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/envelope-content.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/equals.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/face-disappointed.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/file-plus.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/file.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/floppy-disk.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/focus.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/gap.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/globe.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/grid-layout.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/image-sparkle.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/image.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/images.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/language.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/laptop-mobile.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/layers-3.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/layout-bottom.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/layout-left-right.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/layout-left.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/layout-right.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/layout-top-bottom.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/layout-top.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/mailbox.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/margin-bottom.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/margin-left-right.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/margin-left.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/margin-right.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/margin-top-bottom.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/margin-top.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/media-stop-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/message-plus.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/microchip.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/minus-circle.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/palette.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/paper-plane.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/pin-tack-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/pin-tack.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/plug.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/pointer-circle-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/pointer.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/queue-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/rename.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/robot.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/sap.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/scan-text.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/scan.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/square-dashed-cursor.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/stop-circle-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/svelte.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/table-pen.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/tablet.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/tanstack.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/telescope-solid.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/telescope.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/typography.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/unfold.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/variable.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/vite.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/wrench.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/arrow-turn-up.tsx
 create mode 100644 packages/design-system/icons/src/components/astro.tsx
 create mode 100644 packages/design-system/icons/src/components/bloom-badge.tsx
 create mode 100644 packages/design-system/icons/src/components/bloom.tsx
 create mode 100644 packages/design-system/icons/src/components/chart-activity.tsx
 create mode 100644 packages/design-system/icons/src/components/circle-check-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/circle-info-solid.tsx
 rename packages/design-system/icons/src/components/{circle-minus.tsx => circle-minus-solid.tsx} (78%)
 create mode 100644 packages/design-system/icons/src/components/circle-warning-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/circle-xmark-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/code-branch.tsx
 create mode 100644 packages/design-system/icons/src/components/code-compare.tsx
 create mode 100644 packages/design-system/icons/src/components/code-editor.tsx
 create mode 100644 packages/design-system/icons/src/components/code.tsx
 create mode 100644 packages/design-system/icons/src/components/collapse.tsx
 create mode 100644 packages/design-system/icons/src/components/contentful.tsx
 create mode 100644 packages/design-system/icons/src/components/credit-card-refresh.tsx
 create mode 100644 packages/design-system/icons/src/components/cursor-default-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/cursor-default.tsx
 create mode 100644 packages/design-system/icons/src/components/envelope-content.tsx
 create mode 100644 packages/design-system/icons/src/components/equals.tsx
 create mode 100644 packages/design-system/icons/src/components/face-disappointed.tsx
 create mode 100644 packages/design-system/icons/src/components/file-plus.tsx
 create mode 100644 packages/design-system/icons/src/components/file.tsx
 create mode 100644 packages/design-system/icons/src/components/floppy-disk.tsx
 create mode 100644 packages/design-system/icons/src/components/focus.tsx
 create mode 100644 packages/design-system/icons/src/components/gap.tsx
 create mode 100644 packages/design-system/icons/src/components/globe.tsx
 create mode 100644 packages/design-system/icons/src/components/grid-layout.tsx
 create mode 100644 packages/design-system/icons/src/components/image-sparkle.tsx
 create mode 100644 packages/design-system/icons/src/components/image.tsx
 create mode 100644 packages/design-system/icons/src/components/images.tsx
 create mode 100644 packages/design-system/icons/src/components/language.tsx
 create mode 100644 packages/design-system/icons/src/components/laptop-mobile.tsx
 create mode 100644 packages/design-system/icons/src/components/layers-3.tsx
 create mode 100644 packages/design-system/icons/src/components/layout-bottom.tsx
 create mode 100644 packages/design-system/icons/src/components/layout-left-right.tsx
 create mode 100644 packages/design-system/icons/src/components/layout-left.tsx
 create mode 100644 packages/design-system/icons/src/components/layout-right.tsx
 create mode 100644 packages/design-system/icons/src/components/layout-top-bottom.tsx
 create mode 100644 packages/design-system/icons/src/components/layout-top.tsx
 create mode 100644 packages/design-system/icons/src/components/mailbox.tsx
 create mode 100644 packages/design-system/icons/src/components/margin-bottom.tsx
 create mode 100644 packages/design-system/icons/src/components/margin-left-right.tsx
 create mode 100644 packages/design-system/icons/src/components/margin-left.tsx
 create mode 100644 packages/design-system/icons/src/components/margin-right.tsx
 create mode 100644 packages/design-system/icons/src/components/margin-top-bottom.tsx
 create mode 100644 packages/design-system/icons/src/components/margin-top.tsx
 create mode 100644 packages/design-system/icons/src/components/media-stop-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/message-plus.tsx
 create mode 100644 packages/design-system/icons/src/components/microchip.tsx
 create mode 100644 packages/design-system/icons/src/components/minus-circle.tsx
 create mode 100644 packages/design-system/icons/src/components/palette.tsx
 create mode 100644 packages/design-system/icons/src/components/paper-plane.tsx
 create mode 100644 packages/design-system/icons/src/components/pin-tack-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/pin-tack.tsx
 create mode 100644 packages/design-system/icons/src/components/plug.tsx
 create mode 100644 packages/design-system/icons/src/components/pointer-circle-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/pointer.tsx
 create mode 100644 packages/design-system/icons/src/components/queue-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/rename.tsx
 create mode 100644 packages/design-system/icons/src/components/robot.tsx
 create mode 100644 packages/design-system/icons/src/components/sap.tsx
 create mode 100644 packages/design-system/icons/src/components/scan-text.tsx
 create mode 100644 packages/design-system/icons/src/components/scan.tsx
 create mode 100644 packages/design-system/icons/src/components/square-dashed-cursor.tsx
 create mode 100644 packages/design-system/icons/src/components/stop-circle-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/svelte.tsx
 create mode 100644 packages/design-system/icons/src/components/table-pen.tsx
 create mode 100644 packages/design-system/icons/src/components/tablet.tsx
 create mode 100644 packages/design-system/icons/src/components/tanstack.tsx
 create mode 100644 packages/design-system/icons/src/components/telescope-solid.tsx
 create mode 100644 packages/design-system/icons/src/components/telescope.tsx
 create mode 100644 packages/design-system/icons/src/components/typography.tsx
 create mode 100644 packages/design-system/icons/src/components/unfold.tsx
 create mode 100644 packages/design-system/icons/src/components/variable.tsx
 create mode 100644 packages/design-system/icons/src/components/vite.tsx
 create mode 100644 packages/design-system/icons/src/components/wrench.tsx

diff --git a/.changeset/grumpy-areas-reply.md b/.changeset/grumpy-areas-reply.md
new file mode 100644
index 0000000000..72a4f98a1c
--- /dev/null
+++ b/.changeset/grumpy-areas-reply.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/icons": patch
+---
+
+chore(icons): sync new icons
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-turn-up.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-turn-up.spec.tsx
new file mode 100644
index 0000000000..dd26aa249a
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/arrow-turn-up.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ArrowTurnUp from "../arrow-turn-up"
+
+  describe("ArrowTurnUp", () => {
+    it("should render the icon without errors", async () => {
+      render(<ArrowTurnUp data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/circle-minus.spec.tsx b/packages/design-system/icons/src/components/__tests__/astro.spec.tsx
similarity index 69%
rename from packages/design-system/icons/src/components/__tests__/circle-minus.spec.tsx
rename to packages/design-system/icons/src/components/__tests__/astro.spec.tsx
index 3585698065..99e59bf3ec 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-minus.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/astro.spec.tsx
@@ -1,11 +1,11 @@
   import * as React from "react"
   import { cleanup, render, screen } from "@testing-library/react"
 
-  import CircleMinus from "../circle-minus"
+  import Astro from "../astro"
 
-  describe("CircleMinus", () => {
+  describe("Astro", () => {
     it("should render the icon without errors", async () => {
-      render(<CircleMinus data-testid="icon" />)
+      render(<Astro data-testid="icon" />)
 
 
       const svgElement = screen.getByTestId("icon")
diff --git a/packages/design-system/icons/src/components/__tests__/bloom-badge.spec.tsx b/packages/design-system/icons/src/components/__tests__/bloom-badge.spec.tsx
new file mode 100644
index 0000000000..5ea90617d5
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/bloom-badge.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import BloomBadge from "../bloom-badge"
+
+  describe("BloomBadge", () => {
+    it("should render the icon without errors", async () => {
+      render(<BloomBadge data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/bloom.spec.tsx b/packages/design-system/icons/src/components/__tests__/bloom.spec.tsx
new file mode 100644
index 0000000000..89cb6dc7ab
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/bloom.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Bloom from "../bloom"
+
+  describe("Bloom", () => {
+    it("should render the icon without errors", async () => {
+      render(<Bloom data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/chart-activity.spec.tsx b/packages/design-system/icons/src/components/__tests__/chart-activity.spec.tsx
new file mode 100644
index 0000000000..2f49b23058
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/chart-activity.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ChartActivity from "../chart-activity"
+
+  describe("ChartActivity", () => {
+    it("should render the icon without errors", async () => {
+      render(<ChartActivity data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/circle-check-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-check-solid.spec.tsx
new file mode 100644
index 0000000000..4f85618552
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/circle-check-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CircleCheckSolid from "../circle-check-solid"
+
+  describe("CircleCheckSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<CircleCheckSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/circle-info-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-info-solid.spec.tsx
new file mode 100644
index 0000000000..448c362ec3
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/circle-info-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CircleInfoSolid from "../circle-info-solid"
+
+  describe("CircleInfoSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<CircleInfoSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/circle-minus-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-minus-solid.spec.tsx
new file mode 100644
index 0000000000..3164b45972
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/circle-minus-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CircleMinusSolid from "../circle-minus-solid"
+
+  describe("CircleMinusSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<CircleMinusSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/circle-warning-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-warning-solid.spec.tsx
new file mode 100644
index 0000000000..f9f68334ad
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/circle-warning-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CircleWarningSolid from "../circle-warning-solid"
+
+  describe("CircleWarningSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<CircleWarningSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/circle-xmark-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-xmark-solid.spec.tsx
new file mode 100644
index 0000000000..3d10824199
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/circle-xmark-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CircleXmarkSolid from "../circle-xmark-solid"
+
+  describe("CircleXmarkSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<CircleXmarkSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/code-branch.spec.tsx b/packages/design-system/icons/src/components/__tests__/code-branch.spec.tsx
new file mode 100644
index 0000000000..c9864e9bb0
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/code-branch.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CodeBranch from "../code-branch"
+
+  describe("CodeBranch", () => {
+    it("should render the icon without errors", async () => {
+      render(<CodeBranch data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/code-compare.spec.tsx b/packages/design-system/icons/src/components/__tests__/code-compare.spec.tsx
new file mode 100644
index 0000000000..09b0dd4b37
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/code-compare.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CodeCompare from "../code-compare"
+
+  describe("CodeCompare", () => {
+    it("should render the icon without errors", async () => {
+      render(<CodeCompare data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/code-editor.spec.tsx b/packages/design-system/icons/src/components/__tests__/code-editor.spec.tsx
new file mode 100644
index 0000000000..0a073755e3
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/code-editor.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CodeEditor from "../code-editor"
+
+  describe("CodeEditor", () => {
+    it("should render the icon without errors", async () => {
+      render(<CodeEditor data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/code.spec.tsx b/packages/design-system/icons/src/components/__tests__/code.spec.tsx
new file mode 100644
index 0000000000..7e948c899c
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/code.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Code from "../code"
+
+  describe("Code", () => {
+    it("should render the icon without errors", async () => {
+      render(<Code data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/collapse.spec.tsx b/packages/design-system/icons/src/components/__tests__/collapse.spec.tsx
new file mode 100644
index 0000000000..f3f86979fc
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/collapse.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Collapse from "../collapse"
+
+  describe("Collapse", () => {
+    it("should render the icon without errors", async () => {
+      render(<Collapse data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/contentful.spec.tsx b/packages/design-system/icons/src/components/__tests__/contentful.spec.tsx
new file mode 100644
index 0000000000..3ea536c3a5
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/contentful.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Contentful from "../contentful"
+
+  describe("Contentful", () => {
+    it("should render the icon without errors", async () => {
+      render(<Contentful data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/credit-card-refresh.spec.tsx b/packages/design-system/icons/src/components/__tests__/credit-card-refresh.spec.tsx
new file mode 100644
index 0000000000..fd0890b0bf
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/credit-card-refresh.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CreditCardRefresh from "../credit-card-refresh"
+
+  describe("CreditCardRefresh", () => {
+    it("should render the icon without errors", async () => {
+      render(<CreditCardRefresh data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/cursor-default-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/cursor-default-solid.spec.tsx
new file mode 100644
index 0000000000..c3702235ae
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/cursor-default-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CursorDefaultSolid from "../cursor-default-solid"
+
+  describe("CursorDefaultSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<CursorDefaultSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/cursor-default.spec.tsx b/packages/design-system/icons/src/components/__tests__/cursor-default.spec.tsx
new file mode 100644
index 0000000000..54b643a029
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/cursor-default.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CursorDefault from "../cursor-default"
+
+  describe("CursorDefault", () => {
+    it("should render the icon without errors", async () => {
+      render(<CursorDefault data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/envelope-content.spec.tsx b/packages/design-system/icons/src/components/__tests__/envelope-content.spec.tsx
new file mode 100644
index 0000000000..fe9969f43f
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/envelope-content.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import EnvelopeContent from "../envelope-content"
+
+  describe("EnvelopeContent", () => {
+    it("should render the icon without errors", async () => {
+      render(<EnvelopeContent data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/equals.spec.tsx b/packages/design-system/icons/src/components/__tests__/equals.spec.tsx
new file mode 100644
index 0000000000..60ed323666
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/equals.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Equals from "../equals"
+
+  describe("Equals", () => {
+    it("should render the icon without errors", async () => {
+      render(<Equals data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/face-disappointed.spec.tsx b/packages/design-system/icons/src/components/__tests__/face-disappointed.spec.tsx
new file mode 100644
index 0000000000..d9dc3a1801
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/face-disappointed.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import FaceDisappointed from "../face-disappointed"
+
+  describe("FaceDisappointed", () => {
+    it("should render the icon without errors", async () => {
+      render(<FaceDisappointed data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/file-plus.spec.tsx b/packages/design-system/icons/src/components/__tests__/file-plus.spec.tsx
new file mode 100644
index 0000000000..e72ec932c5
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/file-plus.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import FilePlus from "../file-plus"
+
+  describe("FilePlus", () => {
+    it("should render the icon without errors", async () => {
+      render(<FilePlus data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/file.spec.tsx b/packages/design-system/icons/src/components/__tests__/file.spec.tsx
new file mode 100644
index 0000000000..39e02ecd7b
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/file.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import File from "../file"
+
+  describe("File", () => {
+    it("should render the icon without errors", async () => {
+      render(<File data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/floppy-disk.spec.tsx b/packages/design-system/icons/src/components/__tests__/floppy-disk.spec.tsx
new file mode 100644
index 0000000000..5fbe36e736
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/floppy-disk.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import FloppyDisk from "../floppy-disk"
+
+  describe("FloppyDisk", () => {
+    it("should render the icon without errors", async () => {
+      render(<FloppyDisk data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/focus.spec.tsx b/packages/design-system/icons/src/components/__tests__/focus.spec.tsx
new file mode 100644
index 0000000000..878aa09a40
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/focus.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Focus from "../focus"
+
+  describe("Focus", () => {
+    it("should render the icon without errors", async () => {
+      render(<Focus data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/gap.spec.tsx b/packages/design-system/icons/src/components/__tests__/gap.spec.tsx
new file mode 100644
index 0000000000..ca682c331c
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/gap.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Gap from "../gap"
+
+  describe("Gap", () => {
+    it("should render the icon without errors", async () => {
+      render(<Gap data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/globe.spec.tsx b/packages/design-system/icons/src/components/__tests__/globe.spec.tsx
new file mode 100644
index 0000000000..858fccb378
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/globe.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Globe from "../globe"
+
+  describe("Globe", () => {
+    it("should render the icon without errors", async () => {
+      render(<Globe data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/grid-layout.spec.tsx b/packages/design-system/icons/src/components/__tests__/grid-layout.spec.tsx
new file mode 100644
index 0000000000..91e7d1e0ee
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/grid-layout.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import GridLayout from "../grid-layout"
+
+  describe("GridLayout", () => {
+    it("should render the icon without errors", async () => {
+      render(<GridLayout data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/image-sparkle.spec.tsx b/packages/design-system/icons/src/components/__tests__/image-sparkle.spec.tsx
new file mode 100644
index 0000000000..0036e3cce3
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/image-sparkle.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ImageSparkle from "../image-sparkle"
+
+  describe("ImageSparkle", () => {
+    it("should render the icon without errors", async () => {
+      render(<ImageSparkle data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/image.spec.tsx b/packages/design-system/icons/src/components/__tests__/image.spec.tsx
new file mode 100644
index 0000000000..85644af8df
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/image.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Image from "../image"
+
+  describe("Image", () => {
+    it("should render the icon without errors", async () => {
+      render(<Image data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/images.spec.tsx b/packages/design-system/icons/src/components/__tests__/images.spec.tsx
new file mode 100644
index 0000000000..59f311478e
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/images.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Images from "../images"
+
+  describe("Images", () => {
+    it("should render the icon without errors", async () => {
+      render(<Images data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/language.spec.tsx b/packages/design-system/icons/src/components/__tests__/language.spec.tsx
new file mode 100644
index 0000000000..d34f1d1cf4
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/language.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Language from "../language"
+
+  describe("Language", () => {
+    it("should render the icon without errors", async () => {
+      render(<Language data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/laptop-mobile.spec.tsx b/packages/design-system/icons/src/components/__tests__/laptop-mobile.spec.tsx
new file mode 100644
index 0000000000..9069bc22b5
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/laptop-mobile.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import LaptopMobile from "../laptop-mobile"
+
+  describe("LaptopMobile", () => {
+    it("should render the icon without errors", async () => {
+      render(<LaptopMobile data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/layers-3.spec.tsx b/packages/design-system/icons/src/components/__tests__/layers-3.spec.tsx
new file mode 100644
index 0000000000..5ab22394c2
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/layers-3.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Layers3 from "../layers-3"
+
+  describe("Layers3", () => {
+    it("should render the icon without errors", async () => {
+      render(<Layers3 data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/layout-bottom.spec.tsx b/packages/design-system/icons/src/components/__tests__/layout-bottom.spec.tsx
new file mode 100644
index 0000000000..ee972410e3
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/layout-bottom.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import LayoutBottom from "../layout-bottom"
+
+  describe("LayoutBottom", () => {
+    it("should render the icon without errors", async () => {
+      render(<LayoutBottom data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/layout-left-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/layout-left-right.spec.tsx
new file mode 100644
index 0000000000..6ac705b64c
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/layout-left-right.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import LayoutLeftRight from "../layout-left-right"
+
+  describe("LayoutLeftRight", () => {
+    it("should render the icon without errors", async () => {
+      render(<LayoutLeftRight data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/layout-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/layout-left.spec.tsx
new file mode 100644
index 0000000000..172a2b5c4d
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/layout-left.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import LayoutLeft from "../layout-left"
+
+  describe("LayoutLeft", () => {
+    it("should render the icon without errors", async () => {
+      render(<LayoutLeft data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/layout-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/layout-right.spec.tsx
new file mode 100644
index 0000000000..03060bebd5
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/layout-right.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import LayoutRight from "../layout-right"
+
+  describe("LayoutRight", () => {
+    it("should render the icon without errors", async () => {
+      render(<LayoutRight data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/layout-top-bottom.spec.tsx b/packages/design-system/icons/src/components/__tests__/layout-top-bottom.spec.tsx
new file mode 100644
index 0000000000..e863a41245
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/layout-top-bottom.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import LayoutTopBottom from "../layout-top-bottom"
+
+  describe("LayoutTopBottom", () => {
+    it("should render the icon without errors", async () => {
+      render(<LayoutTopBottom data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/layout-top.spec.tsx b/packages/design-system/icons/src/components/__tests__/layout-top.spec.tsx
new file mode 100644
index 0000000000..ed52068098
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/layout-top.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import LayoutTop from "../layout-top"
+
+  describe("LayoutTop", () => {
+    it("should render the icon without errors", async () => {
+      render(<LayoutTop data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/mailbox.spec.tsx b/packages/design-system/icons/src/components/__tests__/mailbox.spec.tsx
new file mode 100644
index 0000000000..dfbbc14ddc
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/mailbox.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Mailbox from "../mailbox"
+
+  describe("Mailbox", () => {
+    it("should render the icon without errors", async () => {
+      render(<Mailbox data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/margin-bottom.spec.tsx b/packages/design-system/icons/src/components/__tests__/margin-bottom.spec.tsx
new file mode 100644
index 0000000000..da0ffbf2c4
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/margin-bottom.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MarginBottom from "../margin-bottom"
+
+  describe("MarginBottom", () => {
+    it("should render the icon without errors", async () => {
+      render(<MarginBottom data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/margin-left-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/margin-left-right.spec.tsx
new file mode 100644
index 0000000000..a88319bea4
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/margin-left-right.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MarginLeftRight from "../margin-left-right"
+
+  describe("MarginLeftRight", () => {
+    it("should render the icon without errors", async () => {
+      render(<MarginLeftRight data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/margin-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/margin-left.spec.tsx
new file mode 100644
index 0000000000..e99520fe98
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/margin-left.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MarginLeft from "../margin-left"
+
+  describe("MarginLeft", () => {
+    it("should render the icon without errors", async () => {
+      render(<MarginLeft data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/margin-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/margin-right.spec.tsx
new file mode 100644
index 0000000000..f8c70718a2
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/margin-right.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MarginRight from "../margin-right"
+
+  describe("MarginRight", () => {
+    it("should render the icon without errors", async () => {
+      render(<MarginRight data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/margin-top-bottom.spec.tsx b/packages/design-system/icons/src/components/__tests__/margin-top-bottom.spec.tsx
new file mode 100644
index 0000000000..9bc79b7d18
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/margin-top-bottom.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MarginTopBottom from "../margin-top-bottom"
+
+  describe("MarginTopBottom", () => {
+    it("should render the icon without errors", async () => {
+      render(<MarginTopBottom data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/margin-top.spec.tsx b/packages/design-system/icons/src/components/__tests__/margin-top.spec.tsx
new file mode 100644
index 0000000000..b494a2ee1e
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/margin-top.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MarginTop from "../margin-top"
+
+  describe("MarginTop", () => {
+    it("should render the icon without errors", async () => {
+      render(<MarginTop data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/media-stop-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/media-stop-solid.spec.tsx
new file mode 100644
index 0000000000..074c684342
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/media-stop-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MediaStopSolid from "../media-stop-solid"
+
+  describe("MediaStopSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<MediaStopSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/message-plus.spec.tsx b/packages/design-system/icons/src/components/__tests__/message-plus.spec.tsx
new file mode 100644
index 0000000000..6031401d92
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/message-plus.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MessagePlus from "../message-plus"
+
+  describe("MessagePlus", () => {
+    it("should render the icon without errors", async () => {
+      render(<MessagePlus data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/microchip.spec.tsx b/packages/design-system/icons/src/components/__tests__/microchip.spec.tsx
new file mode 100644
index 0000000000..c80ce76b89
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/microchip.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Microchip from "../microchip"
+
+  describe("Microchip", () => {
+    it("should render the icon without errors", async () => {
+      render(<Microchip data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/minus-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/minus-circle.spec.tsx
new file mode 100644
index 0000000000..44e960ad4e
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/minus-circle.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MinusCircle from "../minus-circle"
+
+  describe("MinusCircle", () => {
+    it("should render the icon without errors", async () => {
+      render(<MinusCircle data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/palette.spec.tsx b/packages/design-system/icons/src/components/__tests__/palette.spec.tsx
new file mode 100644
index 0000000000..b8304a9944
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/palette.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Palette from "../palette"
+
+  describe("Palette", () => {
+    it("should render the icon without errors", async () => {
+      render(<Palette data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/paper-plane.spec.tsx b/packages/design-system/icons/src/components/__tests__/paper-plane.spec.tsx
new file mode 100644
index 0000000000..8e45ce2b0f
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/paper-plane.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import PaperPlane from "../paper-plane"
+
+  describe("PaperPlane", () => {
+    it("should render the icon without errors", async () => {
+      render(<PaperPlane data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/pin-tack-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/pin-tack-solid.spec.tsx
new file mode 100644
index 0000000000..1a2c96dc77
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/pin-tack-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import PinTackSolid from "../pin-tack-solid"
+
+  describe("PinTackSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<PinTackSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/pin-tack.spec.tsx b/packages/design-system/icons/src/components/__tests__/pin-tack.spec.tsx
new file mode 100644
index 0000000000..caaba5cfc7
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/pin-tack.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import PinTack from "../pin-tack"
+
+  describe("PinTack", () => {
+    it("should render the icon without errors", async () => {
+      render(<PinTack data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/plug.spec.tsx b/packages/design-system/icons/src/components/__tests__/plug.spec.tsx
new file mode 100644
index 0000000000..3a14d106f6
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/plug.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Plug from "../plug"
+
+  describe("Plug", () => {
+    it("should render the icon without errors", async () => {
+      render(<Plug data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/pointer-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/pointer-circle-solid.spec.tsx
new file mode 100644
index 0000000000..e29e4b33e8
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/pointer-circle-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import PointerCircleSolid from "../pointer-circle-solid"
+
+  describe("PointerCircleSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<PointerCircleSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/pointer.spec.tsx b/packages/design-system/icons/src/components/__tests__/pointer.spec.tsx
new file mode 100644
index 0000000000..71f54e2f1d
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/pointer.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Pointer from "../pointer"
+
+  describe("Pointer", () => {
+    it("should render the icon without errors", async () => {
+      render(<Pointer data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/queue-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/queue-solid.spec.tsx
new file mode 100644
index 0000000000..a944bf5577
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/queue-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import QueueSolid from "../queue-solid"
+
+  describe("QueueSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<QueueSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/rename.spec.tsx b/packages/design-system/icons/src/components/__tests__/rename.spec.tsx
new file mode 100644
index 0000000000..1652861fd3
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/rename.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Rename from "../rename"
+
+  describe("Rename", () => {
+    it("should render the icon without errors", async () => {
+      render(<Rename data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/robot.spec.tsx b/packages/design-system/icons/src/components/__tests__/robot.spec.tsx
new file mode 100644
index 0000000000..50df10cab1
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/robot.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Robot from "../robot"
+
+  describe("Robot", () => {
+    it("should render the icon without errors", async () => {
+      render(<Robot data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/sap.spec.tsx b/packages/design-system/icons/src/components/__tests__/sap.spec.tsx
new file mode 100644
index 0000000000..2abad68a14
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/sap.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Sap from "../sap"
+
+  describe("Sap", () => {
+    it("should render the icon without errors", async () => {
+      render(<Sap data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/scan-text.spec.tsx b/packages/design-system/icons/src/components/__tests__/scan-text.spec.tsx
new file mode 100644
index 0000000000..62fe4e419e
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/scan-text.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ScanText from "../scan-text"
+
+  describe("ScanText", () => {
+    it("should render the icon without errors", async () => {
+      render(<ScanText data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/scan.spec.tsx b/packages/design-system/icons/src/components/__tests__/scan.spec.tsx
new file mode 100644
index 0000000000..1a3406ed3a
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/scan.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Scan from "../scan"
+
+  describe("Scan", () => {
+    it("should render the icon without errors", async () => {
+      render(<Scan data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/square-dashed-cursor.spec.tsx b/packages/design-system/icons/src/components/__tests__/square-dashed-cursor.spec.tsx
new file mode 100644
index 0000000000..fab38b2fd1
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/square-dashed-cursor.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import SquareDashedCursor from "../square-dashed-cursor"
+
+  describe("SquareDashedCursor", () => {
+    it("should render the icon without errors", async () => {
+      render(<SquareDashedCursor data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/stop-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/stop-circle-solid.spec.tsx
new file mode 100644
index 0000000000..accf5be903
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/stop-circle-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import StopCircleSolid from "../stop-circle-solid"
+
+  describe("StopCircleSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<StopCircleSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/svelte.spec.tsx b/packages/design-system/icons/src/components/__tests__/svelte.spec.tsx
new file mode 100644
index 0000000000..f1fba0f532
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/svelte.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Svelte from "../svelte"
+
+  describe("Svelte", () => {
+    it("should render the icon without errors", async () => {
+      render(<Svelte data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/table-pen.spec.tsx b/packages/design-system/icons/src/components/__tests__/table-pen.spec.tsx
new file mode 100644
index 0000000000..25989fa000
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/table-pen.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TablePen from "../table-pen"
+
+  describe("TablePen", () => {
+    it("should render the icon without errors", async () => {
+      render(<TablePen data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/tablet.spec.tsx b/packages/design-system/icons/src/components/__tests__/tablet.spec.tsx
new file mode 100644
index 0000000000..fe4d4afd3c
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/tablet.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Tablet from "../tablet"
+
+  describe("Tablet", () => {
+    it("should render the icon without errors", async () => {
+      render(<Tablet data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/tanstack.spec.tsx b/packages/design-system/icons/src/components/__tests__/tanstack.spec.tsx
new file mode 100644
index 0000000000..d98c39bb28
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/tanstack.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Tanstack from "../tanstack"
+
+  describe("Tanstack", () => {
+    it("should render the icon without errors", async () => {
+      render(<Tanstack data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/telescope-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/telescope-solid.spec.tsx
new file mode 100644
index 0000000000..714578e1e6
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/telescope-solid.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TelescopeSolid from "../telescope-solid"
+
+  describe("TelescopeSolid", () => {
+    it("should render the icon without errors", async () => {
+      render(<TelescopeSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/telescope.spec.tsx b/packages/design-system/icons/src/components/__tests__/telescope.spec.tsx
new file mode 100644
index 0000000000..e67ad92663
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/telescope.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Telescope from "../telescope"
+
+  describe("Telescope", () => {
+    it("should render the icon without errors", async () => {
+      render(<Telescope data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/typography.spec.tsx b/packages/design-system/icons/src/components/__tests__/typography.spec.tsx
new file mode 100644
index 0000000000..7aea184c7d
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/typography.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Typography from "../typography"
+
+  describe("Typography", () => {
+    it("should render the icon without errors", async () => {
+      render(<Typography data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/unfold.spec.tsx b/packages/design-system/icons/src/components/__tests__/unfold.spec.tsx
new file mode 100644
index 0000000000..9b4115730b
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/unfold.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Unfold from "../unfold"
+
+  describe("Unfold", () => {
+    it("should render the icon without errors", async () => {
+      render(<Unfold data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/variable.spec.tsx b/packages/design-system/icons/src/components/__tests__/variable.spec.tsx
new file mode 100644
index 0000000000..a0bc1062b4
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/variable.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Variable from "../variable"
+
+  describe("Variable", () => {
+    it("should render the icon without errors", async () => {
+      render(<Variable data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/vite.spec.tsx b/packages/design-system/icons/src/components/__tests__/vite.spec.tsx
new file mode 100644
index 0000000000..35e0bb835d
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/vite.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Vite from "../vite"
+
+  describe("Vite", () => {
+    it("should render the icon without errors", async () => {
+      render(<Vite data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/wrench.spec.tsx b/packages/design-system/icons/src/components/__tests__/wrench.spec.tsx
new file mode 100644
index 0000000000..2ac8ebe522
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/wrench.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Wrench from "../wrench"
+
+  describe("Wrench", () => {
+    it("should render the icon without errors", async () => {
+      render(<Wrench data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/arrow-down-circle.tsx b/packages/design-system/icons/src/components/arrow-down-circle.tsx
index a940a9e0d2..037c065540 100644
--- a/packages/design-system/icons/src/components/arrow-down-circle.tsx
+++ b/packages/design-system/icons/src/components/arrow-down-circle.tsx
@@ -11,10 +11,21 @@ const ArrowDownCircle = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <path
-          fill={color}
-          d="M7.5.389C3.58.389.389 3.579.389 7.5s3.19 7.111 7.111 7.111 7.111-3.19 7.111-7.111S11.421.389 7.5.389m2.693 8.249L7.971 10.86a.665.665 0 0 1-.942 0L4.807 8.638a.667.667 0 1 1 .943-.943l1.084 1.084V4.611a.667.667 0 0 1 1.334 0V8.78l1.084-1.084a.667.667 0 1 1 .943.943z"
-        />
+        <g
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          clipPath="url(#a)"
+        >
+          <path d="M9.722 8.167 7.5 10.389 5.278 8.167M7.5 10.389V4.61" />
+          <path d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/arrow-turn-up.tsx b/packages/design-system/icons/src/components/arrow-turn-up.tsx
new file mode 100644
index 0000000000..fae559eb52
--- /dev/null
+++ b/packages/design-system/icons/src/components/arrow-turn-up.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const ArrowTurnUp = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M8.167 1.944v9.334c0 .982-.796 1.777-1.778 1.777H2.833"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m4.389 5.722 3.778-3.778 3.778 3.778"
+        />
+      </svg>
+    )
+  }
+)
+ArrowTurnUp.displayName = "ArrowTurnUp"
+export default ArrowTurnUp
diff --git a/packages/design-system/icons/src/components/astro.tsx b/packages/design-system/icons/src/components/astro.tsx
new file mode 100644
index 0000000000..3cf2b540cb
--- /dev/null
+++ b/packages/design-system/icons/src/components/astro.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Astro = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="url(#a)"
+          d="M9.497 1.088c.11.137.167.322.28.691l2.456 8.07a10.2 10.2 0 0 0-2.937-.994l-1.6-5.405a.208.208 0 0 0-.399 0l-1.58 5.403c-1.029.179-2.024.515-2.95.995l2.468-8.07c.113-.37.17-.554.28-.69a.9.9 0 0 1 .368-.273C6.045.75 6.238.75 6.624.75h1.763c.386 0 .58 0 .743.066.144.058.27.151.367.272"
+        />
+        <path
+          fill="#FF5D01"
+          d="M9.791 10.234c-.405.346-1.213.582-2.144.582-1.143 0-2.1-.355-2.355-.834-.09.274-.111.588-.111.789 0 0-.06.984.625 1.669a.644.644 0 0 1 .643-.644c.61 0 .61.532.609.963v.038c0 .655.4 1.217.97 1.453a1.3 1.3 0 0 1-.134-.578c0-.625.367-.857.793-1.128.339-.215.716-.453.975-.932a1.76 1.76 0 0 0 .13-1.378"
+        />
+        <path
+          fill="url(#b)"
+          d="M9.791 10.234c-.405.346-1.213.582-2.144.582-1.143 0-2.1-.355-2.355-.834-.09.274-.111.588-.111.789 0 0-.06.984.625 1.669a.644.644 0 0 1 .643-.644c.61 0 .61.532.609.963v.038c0 .655.4 1.217.97 1.453a1.3 1.3 0 0 1-.134-.578c0-.625.367-.857.793-1.128.339-.215.716-.453.975-.932a1.76 1.76 0 0 0 .13-1.378"
+        />
+        <defs>
+          <linearGradient
+            id="a"
+            x1={10.268}
+            x2={7.5}
+            y1={0.322}
+            y2={9.85}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#000014" />
+            <stop offset={1} stopColor="#150426" />
+          </linearGradient>
+          <linearGradient
+            id="b"
+            x1={11.615}
+            x2={9.217}
+            y1={7.417}
+            y2={12.437}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#FF1639" />
+            <stop offset={1} stopColor="#FF1639" stopOpacity={0} />
+          </linearGradient>
+        </defs>
+      </svg>
+    )
+  }
+)
+Astro.displayName = "Astro"
+export default Astro
diff --git a/packages/design-system/icons/src/components/bloom-badge.tsx b/packages/design-system/icons/src/components/bloom-badge.tsx
new file mode 100644
index 0000000000..52536948f5
--- /dev/null
+++ b/packages/design-system/icons/src/components/bloom-badge.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const BloomBadge = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <circle cx={7.5} cy={7.5} r={7.5} fill="#8B5CF6" />
+        <circle cx={7.5} cy={7.5} r={7.5} fill="url(#a)" fillOpacity={0.2} />
+        <circle
+          cx={7.5}
+          cy={7.5}
+          r={7.25}
+          stroke={color}
+          strokeOpacity={0.24}
+          strokeWidth={0.5}
+        />
+        <path
+          fill="#fff"
+          fillRule="evenodd"
+          d="M7.5 2.5c.63 0 1.156.564 1.444 1.513.877-.468 1.646-.494 2.092-.048.446.445.418 1.216-.049 2.09.949.289 1.513.814 1.513 1.445 0 .63-.564 1.156-1.513 1.444.467.875.493 1.647.048 2.092s-1.216.419-2.09-.049C8.655 11.936 8.13 12.5 7.5 12.5c-.63 0-1.156-.564-1.444-1.513-.877.467-1.647.493-2.092.048-.446-.446-.418-1.216.049-2.09C3.064 8.655 2.5 8.13 2.5 7.5c0-.63.564-1.156 1.513-1.444-.467-.875-.493-1.647-.048-2.092s1.216-.419 2.09.049C6.345 3.064 6.87 2.5 7.5 2.5m1.563 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.875M6.25 5.625a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.875"
+          clipRule="evenodd"
+        />
+        <defs>
+          <linearGradient
+            id="a"
+            x1={7.5}
+            x2={7.5}
+            y1={0}
+            y2={15}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#fff" />
+            <stop offset={1} stopColor="#fff" stopOpacity={0} />
+          </linearGradient>
+        </defs>
+      </svg>
+    )
+  }
+)
+BloomBadge.displayName = "BloomBadge"
+export default BloomBadge
diff --git a/packages/design-system/icons/src/components/bloom.tsx b/packages/design-system/icons/src/components/bloom.tsx
new file mode 100644
index 0000000000..bedde67b14
--- /dev/null
+++ b/packages/design-system/icons/src/components/bloom.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Bloom = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#ED6AFF"
+          fillRule="evenodd"
+          d="M7.5.75c.852 0 1.562.762 1.95 2.043 1.184-.631 2.223-.668 2.825-.066.601.601.563 1.642-.068 2.823 1.281.389 2.043 1.099 2.043 1.95s-.762 1.561-2.043 1.95c.63 1.181.668 2.224.067 2.824-.6.601-1.642.564-2.823-.067-.39 1.28-1.1 2.043-1.95 2.043-.852 0-1.562-.762-1.95-2.043-1.184.63-2.224.667-2.825.066s-.563-1.642.067-2.823C1.513 9.061.75 8.351.75 7.5s.763-1.561 2.043-1.95c-.63-1.181-.667-2.224-.066-2.824.6-.601 1.642-.564 2.823.067C5.94 1.513 6.65.75 7.5.75m2.11 5.063a1.266 1.266 0 1 0 0 2.53 1.266 1.266 0 0 0 0-2.53m-3.797-.844a1.266 1.266 0 1 0 0 2.531 1.266 1.266 0 0 0 0-2.531"
+          clipRule="evenodd"
+        />
+      </svg>
+    )
+  }
+)
+Bloom.displayName = "Bloom"
+export default Bloom
diff --git a/packages/design-system/icons/src/components/book-open.tsx b/packages/design-system/icons/src/components/book-open.tsx
index 744b0de102..089fb1149d 100644
--- a/packages/design-system/icons/src/components/book-open.tsx
+++ b/packages/design-system/icons/src/components/book-open.tsx
@@ -18,8 +18,8 @@ const BookOpen = React.forwardRef<SVGSVGElement, IconProps>(
           strokeWidth={1.5}
           clipPath="url(#a)"
         >
-          <path d="M7.5 12.96a.9.9 0 0 0 .44-.118 5.6 5.6 0 0 1 2.791-.751 5.5 5.5 0 0 1 2.018.386c.576.227 1.194-.213 1.194-.833V3.571a.88.88 0 0 0-.431-.765 5.5 5.5 0 0 0-2.792-.767c-1.68 0-2.842.775-3.22 1.05" />
-          <path d="M7.5 12.96a.9.9 0 0 1-.44-.118 5.6 5.6 0 0 0-2.791-.751 5.5 5.5 0 0 0-2.018.386c-.576.227-1.195-.21-1.195-.829v-8.08c0-.315.161-.6.432-.76A5.5 5.5 0 0 1 4.28 2.04c1.68 0 2.842.775 3.22 1.05z" />
+          <path d="M7.5 12.879a.9.9 0 0 0 .44-.12 5.6 5.6 0 0 1 2.791-.75c.8 0 1.482.175 2.018.386.576.227 1.194-.213 1.194-.833V3.488a.88.88 0 0 0-.431-.764 5.5 5.5 0 0 0-2.792-.767c-1.68 0-2.842.775-3.22 1.05" />
+          <path d="M11.941 5.651a5.4 5.4 0 0 0-2.441 0M11.941 8.763a5.4 5.4 0 0 0-2.441 0M7.5 12.879a.9.9 0 0 1-.44-.12 5.6 5.6 0 0 0-2.791-.75 5.5 5.5 0 0 0-2.018.386c-.576.227-1.195-.21-1.195-.83v-8.08c0-.314.161-.6.432-.76a5.5 5.5 0 0 1 2.792-.767c1.68 0 2.842.775 3.22 1.05z" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/chart-activity.tsx b/packages/design-system/icons/src/components/chart-activity.tsx
new file mode 100644
index 0000000000..ab61002ee1
--- /dev/null
+++ b/packages/design-system/icons/src/components/chart-activity.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const ChartActivity = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.944 7.278h-2.041a.89.89 0 0 0-.837.587l-1.464 4.067a.332.332 0 0 1-.627-.007l-2.95-8.85a.332.332 0 0 0-.627-.007L3.934 7.135a.89.89 0 0 1-.837.587H1.056"
+        />
+      </svg>
+    )
+  }
+)
+ChartActivity.displayName = "ChartActivity"
+export default ChartActivity
diff --git a/packages/design-system/icons/src/components/chevron-left-mini.tsx b/packages/design-system/icons/src/components/chevron-left-mini.tsx
index 97528f2019..1f99ecc283 100644
--- a/packages/design-system/icons/src/components/chevron-left-mini.tsx
+++ b/packages/design-system/icons/src/components/chevron-left-mini.tsx
@@ -16,7 +16,7 @@ const ChevronLeftMini = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M9.722 13.055 4.167 7.5l5.555-5.556"
+          d="M9.25 3.25 5 7.5l4.25 4.25"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/chevron-left.tsx b/packages/design-system/icons/src/components/chevron-left.tsx
index 4cdc7b4c00..e944f32e5e 100644
--- a/packages/design-system/icons/src/components/chevron-left.tsx
+++ b/packages/design-system/icons/src/components/chevron-left.tsx
@@ -11,25 +11,13 @@ const ChevronLeft = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g clipPath="url(#a)">
-          <g clipPath="url(#b)">
-            <path
-              stroke={color}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1.5}
-              d="M9.722 13.055 4.167 7.5l5.555-5.556"
-            />
-          </g>
-        </g>
-        <defs>
-          <clipPath id="a">
-            <path fill="#fff" d="M0 0h15v15H0z" />
-          </clipPath>
-          <clipPath id="b">
-            <path fill="#fff" d="M-.5-.5h16v16h-16z" />
-          </clipPath>
-        </defs>
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M9.25 3.25 5 7.5l4.25 4.25"
+        />
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/chevron-right-mini.tsx b/packages/design-system/icons/src/components/chevron-right-mini.tsx
index 2010d55a4a..3ba457050e 100644
--- a/packages/design-system/icons/src/components/chevron-right-mini.tsx
+++ b/packages/design-system/icons/src/components/chevron-right-mini.tsx
@@ -16,7 +16,7 @@ const ChevronRightMini = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M5.278 1.944 10.833 7.5l-5.555 5.555"
+          d="M5.75 11.75 10 7.5 5.75 3.25"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/chevron-right.tsx b/packages/design-system/icons/src/components/chevron-right.tsx
index 93e72bc22f..f3f8c4b1d9 100644
--- a/packages/design-system/icons/src/components/chevron-right.tsx
+++ b/packages/design-system/icons/src/components/chevron-right.tsx
@@ -16,7 +16,7 @@ const ChevronRight = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M5.278 1.944 10.833 7.5l-5.555 5.555"
+          d="M5.75 11.75 10 7.5 5.75 3.25"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/circle-check-solid.tsx b/packages/design-system/icons/src/components/circle-check-solid.tsx
new file mode 100644
index 0000000000..4ee1736f8a
--- /dev/null
+++ b/packages/design-system/icons/src/components/circle-check-solid.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CircleCheckSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M7.5 1.5c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6m2.853 4.45-3.003 4a.75.75 0 0 1-.546.298l-.054.002a.75.75 0 0 1-.53-.219l-1.503-1.5A.75.75 0 1 1 5.779 7.47l.892.89 2.484-3.31a.75.75 0 1 1 1.199.901z"
+        />
+      </svg>
+    )
+  }
+)
+CircleCheckSolid.displayName = "CircleCheckSolid"
+export default CircleCheckSolid
diff --git a/packages/design-system/icons/src/components/circle-info-solid.tsx b/packages/design-system/icons/src/components/circle-info-solid.tsx
new file mode 100644
index 0000000000..92967230e8
--- /dev/null
+++ b/packages/design-system/icons/src/components/circle-info-solid.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CircleInfoSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M7.5 1.5c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6m.75 8.5a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 1.5 0zM7.5 5.5a.877.877 0 0 1-.875-.875c0-.482.393-.875.875-.875s.875.393.875.875A.877.877 0 0 1 7.5 5.5"
+        />
+      </svg>
+    )
+  }
+)
+CircleInfoSolid.displayName = "CircleInfoSolid"
+export default CircleInfoSolid
diff --git a/packages/design-system/icons/src/components/circle-minus.tsx b/packages/design-system/icons/src/components/circle-minus-solid.tsx
similarity index 78%
rename from packages/design-system/icons/src/components/circle-minus.tsx
rename to packages/design-system/icons/src/components/circle-minus-solid.tsx
index 87fde58b2a..e2adf311c4 100644
--- a/packages/design-system/icons/src/components/circle-minus.tsx
+++ b/packages/design-system/icons/src/components/circle-minus-solid.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import type { IconProps } from "../types"
-const CircleMinus = React.forwardRef<SVGSVGElement, IconProps>(
+const CircleMinusSolid = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", ...props }, ref) => {
     return (
       <svg
@@ -19,5 +19,5 @@ const CircleMinus = React.forwardRef<SVGSVGElement, IconProps>(
     )
   }
 )
-CircleMinus.displayName = "CircleMinus"
-export default CircleMinus
+CircleMinusSolid.displayName = "CircleMinusSolid"
+export default CircleMinusSolid
diff --git a/packages/design-system/icons/src/components/circle-warning-solid.tsx b/packages/design-system/icons/src/components/circle-warning-solid.tsx
new file mode 100644
index 0000000000..afa6a837f3
--- /dev/null
+++ b/packages/design-system/icons/src/components/circle-warning-solid.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CircleWarningSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M7.5 1.5c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6M6.75 5a.75.75 0 0 1 1.5 0v3a.75.75 0 0 1-1.5 0zm.75 6.25a.877.877 0 0 1-.875-.875c0-.482.393-.875.875-.875s.875.393.875.875a.877.877 0 0 1-.875.875"
+        />
+      </svg>
+    )
+  }
+)
+CircleWarningSolid.displayName = "CircleWarningSolid"
+export default CircleWarningSolid
diff --git a/packages/design-system/icons/src/components/circle-xmark-solid.tsx b/packages/design-system/icons/src/components/circle-xmark-solid.tsx
new file mode 100644
index 0000000000..8d0512d237
--- /dev/null
+++ b/packages/design-system/icons/src/components/circle-xmark-solid.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CircleXmarkSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M7.5 1.5c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6m2.53 7.47a.75.75 0 0 1-1.06 1.061L7.5 8.561l-1.47 1.47a.75.75 0 0 1-1.06 0 .75.75 0 0 1 0-1.061L6.44 7.5 4.97 6.03a.75.75 0 1 1 1.061-1.061l1.47 1.47 1.47-1.47a.75.75 0 1 1 1.061 1.061L8.562 7.5l1.47 1.47z"
+        />
+      </svg>
+    )
+  }
+)
+CircleXmarkSolid.displayName = "CircleXmarkSolid"
+export default CircleXmarkSolid
diff --git a/packages/design-system/icons/src/components/clock-solid.tsx b/packages/design-system/icons/src/components/clock-solid.tsx
index 78970ba852..830f7f42e1 100644
--- a/packages/design-system/icons/src/components/clock-solid.tsx
+++ b/packages/design-system/icons/src/components/clock-solid.tsx
@@ -11,14 +11,10 @@ const ClockSolid = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g fill={color} clipPath="url(#a)">
-          <path d="M14.167 3.278a.66.66 0 0 1-.472-.196l-1.777-1.778a.667.667 0 0 1 .943-.943l1.778 1.778a.667.667 0 0 1-.472 1.139M.833 3.278a.667.667 0 0 1-.471-1.139L2.14.362a.667.667 0 1 1 .943.943L1.305 3.083c-.13.13-.3.196-.47.196zM12.342 11.399a6.2 6.2 0 0 0 1.38-3.899A6.23 6.23 0 0 0 7.5 1.278 6.23 6.23 0 0 0 1.278 7.5a6.2 6.2 0 0 0 1.38 3.899l-1.185 1.185a.667.667 0 0 0 .943.943L3.6 12.342a6.2 6.2 0 0 0 3.899 1.38 6.2 6.2 0 0 0 3.9-1.38l1.185 1.185a.665.665 0 0 0 .942 0 .667.667 0 0 0 0-.943zm-1.835-1.986a.665.665 0 0 1-.92.204L7.143 8.062a.67.67 0 0 1-.309-.563V4.61a.667.667 0 0 1 1.334 0v2.523l2.136 1.36c.31.197.4.609.203.92" />
-        </g>
-        <defs>
-          <clipPath id="a">
-            <path fill="#fff" d="M0 0h15v15H0z" />
-          </clipPath>
-        </defs>
+        <path
+          fill={color}
+          d="M7.5 1.5c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6m2.564 8.244a.75.75 0 0 1-1.058.07l-2-1.75A.75.75 0 0 1 6.75 7.5V4.75a.75.75 0 0 1 1.5 0v2.41l1.744 1.526a.75.75 0 0 1 .07 1.058"
+        />
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/code-branch.tsx b/packages/design-system/icons/src/components/code-branch.tsx
new file mode 100644
index 0000000000..311533cef9
--- /dev/null
+++ b/packages/design-system/icons/src/components/code-branch.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CodeBranch = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M3.722 4.61v5.779M11.278 4.61v.89c0 .982-.796 1.778-1.778 1.778h-4c-.982 0-1.778.795-1.778 1.777M3.722 4.611a1.778 1.778 0 1 0 0-3.555 1.778 1.778 0 0 0 0 3.555"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.278 4.611a1.778 1.778 0 1 0 0-3.555 1.778 1.778 0 0 0 0 3.555M3.722 13.944a1.778 1.778 0 1 0 0-3.555 1.778 1.778 0 0 0 0 3.555"
+        />
+      </svg>
+    )
+  }
+)
+CodeBranch.displayName = "CodeBranch"
+export default CodeBranch
diff --git a/packages/design-system/icons/src/components/code-compare.tsx b/packages/design-system/icons/src/components/code-compare.tsx
new file mode 100644
index 0000000000..bd08fd159e
--- /dev/null
+++ b/packages/design-system/icons/src/components/code-compare.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CodeCompare = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M12.167 10.389V4.61c0-.982-.796-1.778-1.778-1.778H7.278"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m9.278 4.833-2-2 2-2M2.833 4.61v5.779c0 .982.796 1.777 1.778 1.777h3.111"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m5.722 10.167 2 2-2 2M12.167 13.944a1.778 1.778 0 1 0 0-3.555 1.778 1.778 0 0 0 0 3.555M2.833 4.61a1.778 1.778 0 1 0 0-3.555 1.778 1.778 0 0 0 0 3.556"
+        />
+      </svg>
+    )
+  }
+)
+CodeCompare.displayName = "CodeCompare"
+export default CodeCompare
diff --git a/packages/design-system/icons/src/components/code-editor.tsx b/packages/design-system/icons/src/components/code-editor.tsx
new file mode 100644
index 0000000000..2bd7540e58
--- /dev/null
+++ b/packages/design-system/icons/src/components/code-editor.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CodeEditor = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M2.833 13.056h9.334c.982 0 1.777-.796 1.777-1.778V3.722c0-.982-.796-1.777-1.777-1.777H2.833c-.981 0-1.777.795-1.777 1.777v7.556c0 .982.796 1.778 1.777 1.778M4.167 1.944v11.111M9.056 8.611h2.666M7.722 6.39h2.445M7.722 10.834H9.5M6.389 4.167h1.333"
+        />
+      </svg>
+    )
+  }
+)
+CodeEditor.displayName = "CodeEditor"
+export default CodeEditor
diff --git a/packages/design-system/icons/src/components/code.tsx b/packages/design-system/icons/src/components/code.tsx
new file mode 100644
index 0000000000..550d1c84db
--- /dev/null
+++ b/packages/design-system/icons/src/components/code.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Code = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          clipPath="url(#a)"
+        >
+          <path d="m4.167 10.611-3.111-3.11 3.11-3.112M10.833 10.611l3.111-3.11-3.11-3.112M6.167 13.055l2.666-11.11" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+Code.displayName = "Code"
+export default Code
diff --git a/packages/design-system/icons/src/components/collapse.tsx b/packages/design-system/icons/src/components/collapse.tsx
new file mode 100644
index 0000000000..0792be1092
--- /dev/null
+++ b/packages/design-system/icons/src/components/collapse.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Collapse = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m10 12 2-2 2 2M14 3l-2 2-2-2M1 12h6M1 3h6M1 7.5h6"
+        />
+      </svg>
+    )
+  }
+)
+Collapse.displayName = "Collapse"
+export default Collapse
diff --git a/packages/design-system/icons/src/components/contentful.tsx b/packages/design-system/icons/src/components/contentful.tsx
new file mode 100644
index 0000000000..cbc1f6ced4
--- /dev/null
+++ b/packages/design-system/icons/src/components/contentful.tsx
@@ -0,0 +1,54 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Contentful = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path fill="#F4F4F5" d="M0 0h20v20H0z" />
+        <path fill="url(#a)" fillOpacity={0.2} d="M0 0h20v20H0z" />
+        <path
+          fill="#1773EB"
+          d="M8.106 5.5a1.65 1.65 0 0 1 .422 1.614 3.33 3.33 0 0 1 1.722-.476h.013a3.35 3.35 0 0 1 2.371.994 1.32 1.32 0 1 0 1.874-1.858A5.98 5.98 0 0 0 10.27 4h-.022a5.97 5.97 0 0 0-3.346 1.018h.037c.438 0 .858.173 1.167.483"
+        />
+        <path
+          fill="#E44F20"
+          d="M13.547 12a1.32 1.32 0 0 0-.93.382 3.35 3.35 0 0 1-2.365.976h-.013a3.3 3.3 0 0 1-1.723-.484q.06.217.059.441a1.65 1.65 0 0 1-1.65 1.65h-.043A5.96 5.96 0 0 0 10.23 16h.023a5.97 5.97 0 0 0 4.224-1.742A1.32 1.32 0 0 0 13.548 12z"
+        />
+        <path
+          fill="#FFDA00"
+          d="M5.757 12.147c.308-.31.729-.485 1.166-.483q.229 0 .447.06a3.35 3.35 0 0 1 .007-3.463A1.65 1.65 0 0 1 5.29 6.667v-.044a6 6 0 0 0-.016 6.726v-.035a1.64 1.64 0 0 1 .484-1.167"
+        />
+        <path
+          fill="#1773EB"
+          d="M6.94 5.31c-.376 0-.639.156-.957.475-.304.302-.4.567-.4.882a1.356 1.356 0 1 0 1.356-1.356"
+        />
+        <path
+          fill="#E44F20"
+          d="M5.564 13.316c0 .374.155.638.473.955.303.304.568.4.883.4a1.351 1.351 0 1 0-1.356-1.35z"
+        />
+        <defs>
+          <linearGradient
+            id="a"
+            x1={10}
+            x2={10}
+            y1={0}
+            y2={20}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#fff" />
+            <stop offset={1} stopColor="#fff" stopOpacity={0} />
+          </linearGradient>
+        </defs>
+      </svg>
+    )
+  }
+)
+Contentful.displayName = "Contentful"
+export default Contentful
diff --git a/packages/design-system/icons/src/components/credit-card-refresh.tsx b/packages/design-system/icons/src/components/credit-card-refresh.tsx
new file mode 100644
index 0000000000..620d7e8aa7
--- /dev/null
+++ b/packages/design-system/icons/src/components/credit-card-refresh.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CreditCardRefresh = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.056 5.944h12.888M3.278 9.5h2.666M11.849 10.898h2.222V8.676M13.944 5.945V4.61c0-.981-.795-1.777-1.777-1.777H2.833c-.982 0-1.777.796-1.777 1.777v5.778c0 .981.795 1.778 1.777 1.778h3.613"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.404 13.242a2.444 2.444 0 1 1 .5-2.566"
+        />
+      </svg>
+    )
+  }
+)
+CreditCardRefresh.displayName = "CreditCardRefresh"
+export default CreditCardRefresh
diff --git a/packages/design-system/icons/src/components/cursor-default-solid.tsx b/packages/design-system/icons/src/components/cursor-default-solid.tsx
new file mode 100644
index 0000000000..5e58218a31
--- /dev/null
+++ b/packages/design-system/icons/src/components/cursor-default-solid.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CursorDefaultSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="m2.661 1.218.184.052 10.154 3.71.1.041c.997.458.93 1.936-.147 2.283l-4.28 1.369-1.37 4.28c-.344 1.079-1.824 1.142-2.281.147L4.98 13 1.27 2.845c-.336-.92.48-1.814 1.391-1.627"
+        />
+      </svg>
+    )
+  }
+)
+CursorDefaultSolid.displayName = "CursorDefaultSolid"
+export default CursorDefaultSolid
diff --git a/packages/design-system/icons/src/components/cursor-default.tsx b/packages/design-system/icons/src/components/cursor-default.tsx
new file mode 100644
index 0000000000..a6e33b1560
--- /dev/null
+++ b/packages/design-system/icons/src/components/cursor-default.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CursorDefault = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m2.588 1.974 10.154 3.71a.478.478 0 0 1-.019.906L8.076 8.076l-1.487 4.647a.478.478 0 0 1-.905.018L1.974 2.588a.478.478 0 0 1 .614-.614"
+        />
+      </svg>
+    )
+  }
+)
+CursorDefault.displayName = "CursorDefault"
+export default CursorDefault
diff --git a/packages/design-system/icons/src/components/document-text.tsx b/packages/design-system/icons/src/components/document-text.tsx
index a9c6aa35c3..4e9bfad6b8 100644
--- a/packages/design-system/icons/src/components/document-text.tsx
+++ b/packages/design-system/icons/src/components/document-text.tsx
@@ -16,7 +16,7 @@ const DocumentText = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M4.611 5.5H6.39M4.611 8.167h5.778M4.611 10.833h5.778M1.944 12.167V2.833c0-.982.796-1.777 1.778-1.777h4.966c.235 0 .462.093.628.26l3.48 3.48c.166.166.26.392.26.628v6.743c0 .982-.796 1.778-1.778 1.778H3.722a1.777 1.777 0 0 1-1.778-1.778"
+          d="M5 7.767h2M5 10.813h5M1.944 12.167V2.833c0-.982.796-1.777 1.778-1.777h4.966c.235 0 .462.093.628.26l3.48 3.48c.166.166.26.392.26.628v6.743c0 .982-.796 1.778-1.778 1.778H3.722a1.777 1.777 0 0 1-1.778-1.778"
         />
         <path
           stroke={color}
diff --git a/packages/design-system/icons/src/components/envelope-content.tsx b/packages/design-system/icons/src/components/envelope-content.tsx
new file mode 100644
index 0000000000..252d405a02
--- /dev/null
+++ b/packages/design-system/icons/src/components/envelope-content.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const EnvelopeContent = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.944 6.976v4.885c0 .982-.795 1.778-1.777 1.778H2.833a1.777 1.777 0 0 1-1.777-1.778V6.972l6.057 2.925a.89.89 0 0 0 .773 0l6.058-2.925zM2.833 4.87V1.638a.89.89 0 0 1 .89-.889h7.555a.89.89 0 0 1 .889.889v3.23M5.056 3.417h4.888M5.056 6.084h4.888"
+        />
+      </svg>
+    )
+  }
+)
+EnvelopeContent.displayName = "EnvelopeContent"
+export default EnvelopeContent
diff --git a/packages/design-system/icons/src/components/equals.tsx b/packages/design-system/icons/src/components/equals.tsx
new file mode 100644
index 0000000000..19538cfb9a
--- /dev/null
+++ b/packages/design-system/icons/src/components/equals.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Equals = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 5.5h11.112M1.944 9.5h11.112"
+        />
+      </svg>
+    )
+  }
+)
+Equals.displayName = "Equals"
+export default Equals
diff --git a/packages/design-system/icons/src/components/eye-slash.tsx b/packages/design-system/icons/src/components/eye-slash.tsx
index 95ae1d2724..2ecd91f360 100644
--- a/packages/design-system/icons/src/components/eye-slash.tsx
+++ b/packages/design-system/icons/src/components/eye-slash.tsx
@@ -11,10 +11,15 @@ const EyeSlash = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g fill={color} clipPath="url(#a)">
-          <path d="M7.5 10.389a2.889 2.889 0 1 0 0-5.778 2.889 2.889 0 0 0 0 5.778" />
-          <path d="M7.5 12.833a7.3 7.3 0 0 1-1.52-.159.667.667 0 0 1 .28-1.304c.4.087.817.13 1.24.13 2.934 0 4.76-2.106 5.587-3.36a1.18 1.18 0 0 0 0-1.28 9 9 0 0 0-.808-1.052.667.667 0 1 1 .997-.887c.333.375.644.78.924 1.206.55.833.55 1.912 0 2.746-.975 1.48-3.142 3.96-6.7 3.96M3.904 11.761a.66.66 0 0 1-.36-.106C2.234 10.809 1.328 9.675.8 8.873a2.49 2.49 0 0 1 0-2.746c.975-1.48 3.142-3.96 6.7-3.96 1.415 0 2.747.396 3.957 1.178a.666.666 0 1 1-.723 1.12A5.87 5.87 0 0 0 7.5 3.501c-2.934 0-4.76 2.106-5.588 3.36a1.18 1.18 0 0 0 0 1.28c.459.694 1.24 1.674 2.354 2.395a.667.667 0 0 1-.362 1.226" />
-          <path d="M1.278 14.389a.667.667 0 0 1-.471-1.139L13.25.807a.667.667 0 1 1 .943.943L1.75 14.193c-.13.13-.3.196-.471.196" />
+        <g
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          clipPath="url(#a)"
+        >
+          <path d="M12.778 5.364c.357.4.645.792.866 1.129.4.607.4 1.406 0 2.013-.905 1.372-2.9 3.66-6.144 3.66q-.732-.002-1.38-.143M3.905 11.095C2.7 10.316 1.86 9.27 1.356 8.506c-.4-.607-.4-1.406 0-2.013.905-1.372 2.9-3.66 6.144-3.66 1.44 0 2.634.45 3.595 1.071" />
+          <path d="M9.792 8.35A2.45 2.45 0 0 1 8.35 9.792M5.771 9.229A2.444 2.444 0 1 1 9.23 5.77M1.278 13.722 13.722 1.278" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/face-disappointed.tsx b/packages/design-system/icons/src/components/face-disappointed.tsx
new file mode 100644
index 0000000000..355b9786c0
--- /dev/null
+++ b/packages/design-system/icons/src/components/face-disappointed.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const FaceDisappointed = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M10.167 10.16A3.76 3.76 0 0 0 7.5 9.057c-1.04 0-1.983.422-2.667 1.105M6.153 6.61c-.112.107-.492.442-1.091.498a1.86 1.86 0 0 1-1.118-.254M8.847 6.61c.112.107.492.442 1.091.498.566.053.982-.174 1.118-.254"
+        />
+      </svg>
+    )
+  }
+)
+FaceDisappointed.displayName = "FaceDisappointed"
+export default FaceDisappointed
diff --git a/packages/design-system/icons/src/components/file-plus.tsx b/packages/design-system/icons/src/components/file-plus.tsx
new file mode 100644
index 0000000000..623ffab876
--- /dev/null
+++ b/packages/design-system/icons/src/components/file-plus.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const FilePlus = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M4.611 5.5H6.39M4.611 8.166h3.664M12.976 5.055H9.944a.89.89 0 0 1-.888-.889v-3.02M11.827 9.074v4.445M14.049 11.296H9.604"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.056 6.43V5.424a.89.89 0 0 0-.26-.629l-3.48-3.479a.9.9 0 0 0-.628-.26H3.722c-.982 0-1.778.796-1.778 1.777v9.334c0 .981.796 1.778 1.778 1.778h4.36"
+        />
+      </svg>
+    )
+  }
+)
+FilePlus.displayName = "FilePlus"
+export default FilePlus
diff --git a/packages/design-system/icons/src/components/file.tsx b/packages/design-system/icons/src/components/file.tsx
new file mode 100644
index 0000000000..7941b8dedf
--- /dev/null
+++ b/packages/design-system/icons/src/components/file.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const File = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M12.976 5.055H9.944a.89.89 0 0 1-.888-.889v-3.02"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 12.167V2.833c0-.982.796-1.777 1.778-1.777h4.966c.235 0 .462.093.628.26l3.48 3.48c.166.166.26.392.26.628v6.743c0 .982-.796 1.778-1.778 1.778H3.722a1.777 1.777 0 0 1-1.778-1.778"
+        />
+      </svg>
+    )
+  }
+)
+File.displayName = "File"
+export default File
diff --git a/packages/design-system/icons/src/components/floppy-disk.tsx b/packages/design-system/icons/src/components/floppy-disk.tsx
new file mode 100644
index 0000000000..5afcde5556
--- /dev/null
+++ b/packages/design-system/icons/src/components/floppy-disk.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const FloppyDisk = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M9.056 1.5v2.667a.89.89 0 0 1-.89.889h-3.11a.89.89 0 0 1-.89-.89V1.5M4.167 13.5V9.055a.89.89 0 0 1 .889-.889h4.888a.89.89 0 0 1 .89.89V13.5"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.58 13.5H3.42a1.92 1.92 0 0 1-1.92-1.92V3.42c0-1.06.86-1.92 1.92-1.92h6.6c.236 0 .463.093.63.26l2.59 2.59c.167.168.26.394.26.63v6.6c0 1.06-.86 1.92-1.92 1.92"
+        />
+      </svg>
+    )
+  }
+)
+FloppyDisk.displayName = "FloppyDisk"
+export default FloppyDisk
diff --git a/packages/design-system/icons/src/components/focus.tsx b/packages/design-system/icons/src/components/focus.tsx
new file mode 100644
index 0000000000..3b1ebdbdf1
--- /dev/null
+++ b/packages/design-system/icons/src/components/focus.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Focus = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4M1.944 5.5V3.722c0-.982.796-1.778 1.778-1.778H5.5M9.5 1.944h1.778c.982 0 1.778.796 1.778 1.778V5.5M13.056 9.5v1.778c0 .982-.796 1.778-1.778 1.778H9.5M5.5 13.056H3.722a1.777 1.777 0 0 1-1.778-1.778V9.5"
+        />
+      </svg>
+    )
+  }
+)
+Focus.displayName = "Focus"
+export default Focus
diff --git a/packages/design-system/icons/src/components/folder-open.tsx b/packages/design-system/icons/src/components/folder-open.tsx
index b4ea31b361..3d42b9963e 100644
--- a/packages/design-system/icons/src/components/folder-open.tsx
+++ b/packages/design-system/icons/src/components/folder-open.tsx
@@ -18,8 +18,8 @@ const FolderOpen = React.forwardRef<SVGSVGElement, IconProps>(
           strokeWidth={1.5}
           clipPath="url(#a)"
         >
-          <path d="M1.875 6.458v-2.5c0-.92.746-1.666 1.667-1.666h1.626c.505 0 .983.229 1.3.623l.502.627h4.488c.921 0 1.667.746 1.667 1.666v1.25" />
-          <path d="M2.252 6.458h10.496c.822 0 1.42.779 1.208 1.572l-.918 3.44a1.666 1.666 0 0 1-1.61 1.238H3.572a1.666 1.666 0 0 1-1.61-1.237L1.045 8.03a1.25 1.25 0 0 1 1.207-1.572z" />
+          <path d="M4.167 12.292h-.625c-.921 0-1.667-.746-1.667-1.667V3.958c0-.92.746-1.666 1.667-1.666h1.52c.49 0 .954.215 1.27.587l1.27 1.496h3.855c.921 0 1.667.746 1.667 1.667v.833" />
+          <path d="m13.457 11.058.702-2.608a1.25 1.25 0 0 0-1.207-1.575H5.126c-.565 0-1.06.38-1.207.925l-.785 2.917a1.25 1.25 0 0 0 1.207 1.575h7.508c.753 0 1.413-.506 1.609-1.234" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/folder.tsx b/packages/design-system/icons/src/components/folder.tsx
index bfe2fe203e..82af764f40 100644
--- a/packages/design-system/icons/src/components/folder.tsx
+++ b/packages/design-system/icons/src/components/folder.tsx
@@ -11,20 +11,17 @@ const Folder = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M1.875 7.292V3.958c0-.92.746-1.666 1.667-1.666h1.626c.505 0 .983.229 1.3.623l.502.627h4.488c.921 0 1.667.746 1.667 1.666v2.37"
-        />
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M3.542 5.625h7.916c.921 0 1.667.746 1.667 1.667v3.75c0 .92-.746 1.666-1.667 1.666H3.542c-.921 0-1.667-.745-1.667-1.666v-3.75c0-.921.746-1.667 1.667-1.667"
-        />
+        <g clipPath="url(#a)">
+          <path
+            fill={color}
+            d="M.75 10.833V3.722a2.527 2.527 0 0 1 2.527-2.528H4.9c.696 0 1.358.287 1.833.789l.093.102 1.131 1.332h3.766a2.527 2.527 0 0 1 2.527 2.527v4.89a2.53 2.53 0 0 1-2.527 2.528H3.277A2.53 2.53 0 0 1 .75 10.833"
+          />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/gap.tsx b/packages/design-system/icons/src/components/gap.tsx
new file mode 100644
index 0000000000..2e401998a4
--- /dev/null
+++ b/packages/design-system/icons/src/components/gap.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Gap = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 5.5v4M9.5 7.5h-4M1.5 4.611h1.778c.982 0 1.778-.795 1.778-1.778V1.5M13.5 4.611h-1.778a1.777 1.777 0 0 1-1.778-1.778V1.5M1.5 10.389h1.778c.982 0 1.778.795 1.778 1.777V13.5M13.5 10.389h-1.778c-.982 0-1.778.795-1.778 1.777V13.5"
+        />
+      </svg>
+    )
+  }
+)
+Gap.displayName = "Gap"
+export default Gap
diff --git a/packages/design-system/icons/src/components/globe.tsx b/packages/design-system/icons/src/components/globe.tsx
new file mode 100644
index 0000000000..8596f065c9
--- /dev/null
+++ b/packages/design-system/icons/src/components/globe.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Globe = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 13.945c1.473 0 2.667-2.886 2.667-6.445S8.973 1.056 7.5 1.056 4.833 3.94 4.833 7.5s1.194 6.445 2.667 6.445M1.056 7.5h12.888"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89"
+        />
+      </svg>
+    )
+  }
+)
+Globe.displayName = "Globe"
+export default Globe
diff --git a/packages/design-system/icons/src/components/grid-layout.tsx b/packages/design-system/icons/src/components/grid-layout.tsx
new file mode 100644
index 0000000000..f4e89b0ddc
--- /dev/null
+++ b/packages/design-system/icons/src/components/grid-layout.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const GridLayout = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M12.167 1.944H2.833a.89.89 0 0 0-.889.89v1.333c0 .49.398.888.89.888h9.333c.49 0 .889-.398.889-.888V2.833a.89.89 0 0 0-.89-.889M5.5 7.722H2.833a.89.89 0 0 0-.889.89v3.555c0 .49.398.889.89.889H5.5c.49 0 .889-.398.889-.89V8.612a.89.89 0 0 0-.889-.889M9.056 7.722h4M9.056 10.39h4M9.056 13.056h4"
+        />
+      </svg>
+    )
+  }
+)
+GridLayout.displayName = "GridLayout"
+export default GridLayout
diff --git a/packages/design-system/icons/src/components/image-sparkle.tsx b/packages/design-system/icons/src/components/image-sparkle.tsx
new file mode 100644
index 0000000000..e6ee463415
--- /dev/null
+++ b/packages/design-system/icons/src/components/image-sparkle.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const ImageSparkle = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.056 4.62v6.658c0 .982-.796 1.777-1.778 1.777H3.722a1.777 1.777 0 0 1-1.778-1.777V3.722c0-.982.796-1.778 1.778-1.778h1.402"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m2.844 12.824 5.4-5.4a1.777 1.777 0 0 1 2.513 0l2.299 2.298"
+        />
+        <path
+          fill={color}
+          d="m6.383 5.27-.841-.28-.281-.841c-.09-.272-.541-.272-.632 0l-.281.842-.84.28a.334.334 0 0 0 0 .632l.84.28.28.842a.333.333 0 0 0 .632 0l.28-.842.842-.28a.334.334 0 0 0 0-.632M11.64 1.769l-1.122-.374-.375-1.123c-.121-.363-.721-.363-.843 0l-.374 1.123-1.123.374a.444.444 0 0 0 0 .843l1.123.374.374 1.122a.446.446 0 0 0 .844 0l.375-1.122 1.122-.374a.445.445 0 0 0 0-.843M9.944 11.056a.667.667 0 1 0 0-1.334.667.667 0 0 0 0 1.334"
+        />
+      </svg>
+    )
+  }
+)
+ImageSparkle.displayName = "ImageSparkle"
+export default ImageSparkle
diff --git a/packages/design-system/icons/src/components/image.tsx b/packages/design-system/icons/src/components/image.tsx
new file mode 100644
index 0000000000..7983acc0eb
--- /dev/null
+++ b/packages/design-system/icons/src/components/image.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Image = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke="#212121"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m2.844 12.824 5.4-5.4a1.777 1.777 0 0 1 2.513 0l2.299 2.298"
+        />
+        <path
+          stroke="#212121"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.278 1.944H3.722c-.982 0-1.778.796-1.778 1.778v7.556c0 .981.796 1.777 1.778 1.777h7.556c.982 0 1.778-.796 1.778-1.777V3.722c0-.982-.796-1.778-1.778-1.778"
+        />
+        <path
+          fill="#212121"
+          d="M5.26 7.247a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5"
+        />
+      </svg>
+    )
+  }
+)
+Image.displayName = "Image"
+export default Image
diff --git a/packages/design-system/icons/src/components/images.tsx b/packages/design-system/icons/src/components/images.tsx
new file mode 100644
index 0000000000..aea239178f
--- /dev/null
+++ b/packages/design-system/icons/src/components/images.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Images = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g fill={color} clipPath="url(#a)">
+          <path d="M5.722 4.833c0 .49.399.89.889.89s.889-.4.889-.89a.89.89 0 0 0-.89-.889.89.89 0 0 0-.888.89" />
+          <path
+            fillRule="evenodd"
+            d="M5.5 1.194a2.53 2.53 0 0 0-2.528 2.528v4.89A2.53 2.53 0 0 0 5.5 11.138h6.666a2.53 2.53 0 0 0 2.528-2.528V3.722a2.53 2.53 0 0 0-2.528-2.528zM4.472 3.722c0-.567.46-1.028 1.028-1.028h6.666c.568 0 1.028.46 1.028 1.028v2.933L11.77 5.23a1.64 1.64 0 0 0-2.318 0L5.113 9.563a1.03 1.03 0 0 1-.641-.953zm6.237 2.569 2.474 2.474a1.03 1.03 0 0 1-1.017.874H7.161l3.352-3.348a.14.14 0 0 1 .196 0"
+            clipRule="evenodd"
+          />
+          <path d="M1.805 5.5a.75.75 0 0 0-1.5 0v5.778a2.527 2.527 0 0 0 2.528 2.528h7.556a.75.75 0 0 0 0-1.5H2.833c-.568 0-1.028-.46-1.028-1.028z" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+Images.displayName = "Images"
+export default Images
diff --git a/packages/design-system/icons/src/components/index.ts b/packages/design-system/icons/src/components/index.ts
index 874269e604..cfc2b783b3 100644
--- a/packages/design-system/icons/src/components/index.ts
+++ b/packages/design-system/icons/src/components/index.ts
@@ -28,6 +28,7 @@ export { default as ArrowRightDown } from "./arrow-right-down"
 export { default as ArrowRightMini } from "./arrow-right-mini"
 export { default as ArrowRightOnRectangle } from "./arrow-right-on-rectangle"
 export { default as ArrowRight } from "./arrow-right"
+export { default as ArrowTurnUp } from "./arrow-turn-up"
 export { default as ArrowUpCircleSolid } from "./arrow-up-circle-solid"
 export { default as ArrowUpDown } from "./arrow-up-down"
 export { default as ArrowUpMini } from "./arrow-up-mini"
@@ -39,6 +40,7 @@ export { default as ArrowUturnLeft } from "./arrow-uturn-left"
 export { default as ArrowsPointingOutMini } from "./arrows-pointing-out-mini"
 export { default as ArrowsPointingOut } from "./arrows-pointing-out"
 export { default as ArrowsReduceDiagonal } from "./arrows-reduce-diagonal"
+export { default as Astro } from "./astro"
 export { default as AtSymbol } from "./at-symbol"
 export { default as BackwardSolid } from "./backward-solid"
 export { default as BadgeCheck } from "./badge-check"
@@ -48,6 +50,8 @@ export { default as Beaker } from "./beaker"
 export { default as BellAlertDone } from "./bell-alert-done"
 export { default as BellAlertSolid } from "./bell-alert-solid"
 export { default as BellAlert } from "./bell-alert"
+export { default as BloomBadge } from "./bloom-badge"
+export { default as Bloom } from "./bloom"
 export { default as BoltSolid } from "./bolt-solid"
 export { default as Bolt } from "./bolt"
 export { default as BookOpen } from "./book-open"
@@ -76,6 +80,7 @@ export { default as CashSolid } from "./cash-solid"
 export { default as Cash } from "./cash"
 export { default as ChannelsSolid } from "./channels-solid"
 export { default as Channels } from "./channels"
+export { default as ChartActivity } from "./chart-activity"
 export { default as ChartBar } from "./chart-bar"
 export { default as ChartPie } from "./chart-pie"
 export { default as ChatBubbleLeftRightSolid } from "./chat-bubble-left-right-solid"
@@ -100,13 +105,15 @@ export { default as ChevronRight } from "./chevron-right"
 export { default as ChevronUpDown } from "./chevron-up-down"
 export { default as ChevronUpMini } from "./chevron-up-mini"
 export { default as CircleArrowUp } from "./circle-arrow-up"
+export { default as CircleCheckSolid } from "./circle-check-solid"
 export { default as CircleDottedLine } from "./circle-dotted-line"
 export { default as CircleFilledSolid } from "./circle-filled-solid"
 export { default as CircleHalfDottedClock } from "./circle-half-dotted-clock"
 export { default as CircleHalfSolid } from "./circle-half-solid"
+export { default as CircleInfoSolid } from "./circle-info-solid"
 export { default as CircleMiniFilledSolid } from "./circle-mini-filled-solid"
 export { default as CircleMiniSolid } from "./circle-mini-solid"
-export { default as CircleMinus } from "./circle-minus"
+export { default as CircleMinusSolid } from "./circle-minus-solid"
 export { default as CirclePlus } from "./circle-plus"
 export { default as CircleQuarterSolid } from "./circle-quarter-solid"
 export { default as CircleSliders } from "./circle-sliders"
@@ -114,6 +121,8 @@ export { default as CircleSolid } from "./circle-solid"
 export { default as CircleStackSolid } from "./circle-stack-solid"
 export { default as CircleStack } from "./circle-stack"
 export { default as CircleThreeQuartersSolid } from "./circle-three-quarters-solid"
+export { default as CircleWarningSolid } from "./circle-warning-solid"
+export { default as CircleXmarkSolid } from "./circle-xmark-solid"
 export { default as ClockChangedSolidMini } from "./clock-changed-solid-mini"
 export { default as ClockSolidMini } from "./clock-solid-mini"
 export { default as ClockSolid } from "./clock-solid"
@@ -122,23 +131,32 @@ export { default as CloneDashed } from "./clone-dashed"
 export { default as CloudArrowDown } from "./cloud-arrow-down"
 export { default as CloudArrowUp } from "./cloud-arrow-up"
 export { default as CloudSolid } from "./cloud-solid"
+export { default as CodeBranch } from "./code-branch"
 export { default as CodeCommit } from "./code-commit"
+export { default as CodeCompare } from "./code-compare"
+export { default as CodeEditor } from "./code-editor"
 export { default as CodeMerge } from "./code-merge"
 export { default as CodePullRequest } from "./code-pull-request"
+export { default as Code } from "./code"
 export { default as CogSixToothSolid } from "./cog-six-tooth-solid"
 export { default as CogSixTooth } from "./cog-six-tooth"
+export { default as Collapse } from "./collapse"
 export { default as CommandLineSolid } from "./command-line-solid"
 export { default as CommandLine } from "./command-line"
 export { default as ComponentSolid } from "./component-solid"
 export { default as Component } from "./component"
 export { default as ComputerDesktopSolid } from "./computer-desktop-solid"
 export { default as ComputerDesktop } from "./computer-desktop"
+export { default as Contentful } from "./contentful"
+export { default as CreditCardRefresh } from "./credit-card-refresh"
 export { default as CreditCardSolid } from "./credit-card-solid"
 export { default as CreditCard } from "./credit-card"
 export { default as CubeSolid } from "./cube-solid"
 export { default as CurrencyDollarSolid } from "./currency-dollar-solid"
 export { default as CurrencyDollar } from "./currency-dollar"
 export { default as CursorArrowRays } from "./cursor-arrow-rays"
+export { default as CursorDefaultSolid } from "./cursor-default-solid"
+export { default as CursorDefault } from "./cursor-default"
 export { default as DecisionProcess } from "./decision-process"
 export { default as DescendingSorting } from "./descending-sorting"
 export { default as Directions } from "./directions"
@@ -159,8 +177,10 @@ export { default as EllipseRedSolid } from "./ellipse-red-solid"
 export { default as EllipseSolid } from "./ellipse-solid"
 export { default as EllipsisHorizontal } from "./ellipsis-horizontal"
 export { default as EllipsisVertical } from "./ellipsis-vertical"
+export { default as EnvelopeContent } from "./envelope-content"
 export { default as EnvelopeSolid } from "./envelope-solid"
 export { default as Envelope } from "./envelope"
+export { default as Equals } from "./equals"
 export { default as ExclamationCircleSolid } from "./exclamation-circle-solid"
 export { default as ExclamationCircle } from "./exclamation-circle"
 export { default as Expand } from "./expand"
@@ -169,14 +189,19 @@ export { default as EyeSlashMini } from "./eye-slash-mini"
 export { default as EyeSlash } from "./eye-slash"
 export { default as Eye } from "./eye"
 export { default as FaceCrossedOutEyes } from "./face-crossed-out-eyes"
+export { default as FaceDisappointed } from "./face-disappointed"
 export { default as FaceSmile } from "./face-smile"
 export { default as Facebook } from "./facebook"
 export { default as FeaturedBadge } from "./featured-badge"
 export { default as Figma } from "./figma"
+export { default as FilePlus } from "./file-plus"
+export { default as File } from "./file"
 export { default as FireSolid } from "./fire-solid"
 export { default as Fire } from "./fire"
 export { default as FlagMini } from "./flag-mini"
+export { default as FloppyDisk } from "./floppy-disk"
 export { default as FlyingBox } from "./flying-box"
+export { default as Focus } from "./focus"
 export { default as FolderIllustration } from "./folder-illustration"
 export { default as FolderOpenIllustration } from "./folder-open-illustration"
 export { default as FolderOpen } from "./folder-open"
@@ -184,6 +209,7 @@ export { default as Folder } from "./folder"
 export { default as ForwardSolid } from "./forward-solid"
 export { default as FunnelPlus } from "./funnel-plus"
 export { default as Funnel } from "./funnel"
+export { default as Gap } from "./gap"
 export { default as GatsbyEx } from "./gatsby-ex"
 export { default as Gatsby } from "./gatsby"
 export { default as GaugeSparkle } from "./gauge-sparkle"
@@ -195,7 +221,9 @@ export { default as Github } from "./github"
 export { default as Glasses } from "./glasses"
 export { default as GlobeEuropeSolid } from "./globe-europe-solid"
 export { default as GlobeEurope } from "./globe-europe"
+export { default as Globe } from "./globe"
 export { default as Google } from "./google"
+export { default as GridLayout } from "./grid-layout"
 export { default as GridList } from "./grid-list"
 export { default as HandTruck } from "./hand-truck"
 export { default as Hashtag } from "./hashtag"
@@ -205,6 +233,9 @@ export { default as History } from "./history"
 export { default as HouseStar } from "./house-star"
 export { default as House } from "./house"
 export { default as IdBadge } from "./id-badge"
+export { default as ImageSparkle } from "./image-sparkle"
+export { default as Image } from "./image"
+export { default as Images } from "./images"
 export { default as InboxSolid } from "./inbox-solid"
 export { default as InformationCircleSolid } from "./information-circle-solid"
 export { default as InformationCircle } from "./information-circle"
@@ -216,6 +247,15 @@ export { default as Keyboard } from "./keyboard"
 export { default as KlarnaEx } from "./klarna-ex"
 export { default as Klarna } from "./klarna"
 export { default as Klaviyo } from "./klaviyo"
+export { default as Language } from "./language"
+export { default as LaptopMobile } from "./laptop-mobile"
+export { default as Layers3 } from "./layers-3"
+export { default as LayoutBottom } from "./layout-bottom"
+export { default as LayoutLeftRight } from "./layout-left-right"
+export { default as LayoutLeft } from "./layout-left"
+export { default as LayoutRight } from "./layout-right"
+export { default as LayoutTopBottom } from "./layout-top-bottom"
+export { default as LayoutTop } from "./layout-top"
 export { default as Levels } from "./levels"
 export { default as Lifebuoy } from "./lifebuoy"
 export { default as LightBulbSolid } from "./light-bulb-solid"
@@ -233,18 +273,29 @@ export { default as LockOpenSolid } from "./lock-open-solid"
 export { default as MagnifierAlert } from "./magnifier-alert"
 export { default as MagnifyingGlassMini } from "./magnifying-glass-mini"
 export { default as MagnifyingGlass } from "./magnifying-glass"
+export { default as Mailbox } from "./mailbox"
 export { default as MapPin } from "./map-pin"
 export { default as Map } from "./map"
+export { default as MarginBottom } from "./margin-bottom"
+export { default as MarginLeftRight } from "./margin-left-right"
+export { default as MarginLeft } from "./margin-left"
+export { default as MarginRight } from "./margin-right"
+export { default as MarginTopBottom } from "./margin-top-bottom"
+export { default as MarginTop } from "./margin-top"
 export { default as MarkdownSolid } from "./markdown-solid"
 export { default as Mastercard } from "./mastercard"
 export { default as MediaPlay } from "./media-play"
+export { default as MediaStopSolid } from "./media-stop-solid"
 export { default as Medusa } from "./medusa"
 export { default as Meilisearch } from "./meilisearch"
 export { default as MemberBronzeBadge } from "./member-bronze-badge"
 export { default as MemberGoldBadge } from "./member-gold-badge"
 export { default as MemberSilverBadge } from "./member-silver-badge"
+export { default as MessagePlus } from "./message-plus"
 export { default as Meta } from "./meta"
+export { default as Microchip } from "./microchip"
 export { default as MinusBadge } from "./minus-badge"
+export { default as MinusCircle } from "./minus-circle"
 export { default as MinusMini } from "./minus-mini"
 export { default as Minus } from "./minus"
 export { default as MoonSolid } from "./moon-solid"
@@ -252,7 +303,9 @@ export { default as Moon } from "./moon"
 export { default as Newspaper } from "./newspaper"
 export { default as NextJs } from "./next-js"
 export { default as OpenRectArrowOut } from "./open-rect-arrow-out"
+export { default as Palette } from "./palette"
 export { default as PaperClip } from "./paper-clip"
+export { default as PaperPlane } from "./paper-plane"
 export { default as Party } from "./party"
 export { default as PauseSolid } from "./pause-solid"
 export { default as Pause } from "./pause"
@@ -265,10 +318,15 @@ export { default as Pencil } from "./pencil"
 export { default as Phone } from "./phone"
 export { default as PhotoSolid } from "./photo-solid"
 export { default as Photo } from "./photo"
+export { default as PinTackSolid } from "./pin-tack-solid"
+export { default as PinTack } from "./pin-tack"
 export { default as PlayMiniSolid } from "./play-mini-solid"
 export { default as PlaySolid } from "./play-solid"
+export { default as Plug } from "./plug"
 export { default as PlusMini } from "./plus-mini"
 export { default as Plus } from "./plus"
+export { default as PointerCircleSolid } from "./pointer-circle-solid"
+export { default as Pointer } from "./pointer"
 export { default as Progress0 } from "./progress-0"
 export { default as Progress100 } from "./progress-100"
 export { default as Progress15 } from "./progress-15"
@@ -282,18 +340,24 @@ export { default as Puzzle } from "./puzzle"
 export { default as QuestionMarkCircle } from "./question-mark-circle"
 export { default as QuestionMark } from "./question-mark"
 export { default as QueueList } from "./queue-list"
+export { default as QueueSolid } from "./queue-solid"
 export { default as ReactJsEx } from "./react-js-ex"
 export { default as ReactJs } from "./react-js"
 export { default as ReceiptPercent } from "./receipt-percent"
 export { default as Receipt } from "./receipt"
 export { default as Reduce } from "./reduce"
+export { default as Rename } from "./rename"
 export { default as ReplaySolid } from "./replay-solid"
 export { default as Resend } from "./resend"
 export { default as Resize } from "./resize"
+export { default as Robot } from "./robot"
 export { default as RocketLaunchSolid } from "./rocket-launch-solid"
 export { default as RocketLaunch } from "./rocket-launch"
 export { default as Rss } from "./rss"
 export { default as Sanity } from "./sanity"
+export { default as Sap } from "./sap"
+export { default as ScanText } from "./scan-text"
+export { default as Scan } from "./scan"
 export { default as ScrollText } from "./scroll-text"
 export { default as Sendgrid } from "./sendgrid"
 export { default as ServerSolid } from "./server-solid"
@@ -321,6 +385,7 @@ export { default as SparklesSolid } from "./sparkles-solid"
 export { default as Sparkles } from "./sparkles"
 export { default as Spinner } from "./spinner"
 export { default as SquareBlueSolid } from "./square-blue-solid"
+export { default as SquareDashedCursor } from "./square-dashed-cursor"
 export { default as SquareGreenSolid } from "./square-green-solid"
 export { default as SquareGreySolid } from "./square-grey-solid"
 export { default as SquareOrangeSolid } from "./square-orange-solid"
@@ -334,21 +399,28 @@ export { default as SquaresPlus } from "./squares-plus"
 export { default as StackPerspective } from "./stack-perspective"
 export { default as StarSolid } from "./star-solid"
 export { default as Star } from "./star"
+export { default as StopCircleSolid } from "./stop-circle-solid"
 export { default as Stopwatch } from "./stopwatch"
 export { default as StoreCredits } from "./store credits"
 export { default as Stripe } from "./stripe"
 export { default as SunSolid } from "./sun-solid"
 export { default as Sun } from "./sun"
+export { default as Svelte } from "./svelte"
 export { default as SwatchSolid } from "./swatch-solid"
 export { default as Swatch } from "./swatch"
+export { default as TablePen } from "./table-pen"
+export { default as Tablet } from "./tablet"
 export { default as TagIllustration } from "./tag-illustration"
 export { default as TagSolid } from "./tag-solid"
 export { default as Tag } from "./tag"
 export { default as Tailwind } from "./tailwind"
+export { default as Tanstack } from "./tanstack"
 export { default as Target } from "./target"
 export { default as TaxExclusive } from "./tax-exclusive"
 export { default as TaxInclusive } from "./tax-inclusive"
 export { default as Telegram } from "./telegram"
+export { default as TelescopeSolid } from "./telescope-solid"
+export { default as Telescope } from "./telescope"
 export { default as TextHighlight } from "./text-highlight"
 export { default as Text } from "./text"
 export { default as ThumbDown } from "./thumb-down"
@@ -369,18 +441,23 @@ export { default as Trophy } from "./trophy"
 export { default as TruckFast } from "./truck-fast"
 export { default as TypescriptEx } from "./typescript-ex"
 export { default as Typescript } from "./typescript"
+export { default as Typography } from "./typography"
+export { default as Unfold } from "./unfold"
 export { default as UserGroup } from "./user-group"
 export { default as UserMini } from "./user-mini"
 export { default as User } from "./user"
 export { default as UsersSolid } from "./users-solid"
 export { default as Users } from "./users"
+export { default as Variable } from "./variable"
 export { default as Vercel } from "./vercel"
 export { default as VerifiedBadge } from "./verified-badge"
 export { default as Visa } from "./visa"
+export { default as Vite } from "./vite"
 export { default as WandSparkle } from "./wand-sparkle"
 export { default as Webshipper } from "./webshipper"
 export { default as Window } from "./window"
 export { default as WishLists } from "./wish lists"
+export { default as Wrench } from "./wrench"
 export { default as XCircleSolid } from "./x-circle-solid"
 export { default as XCircle } from "./x-circle"
 export { default as XMarkMini } from "./x-mark-mini"
diff --git a/packages/design-system/icons/src/components/information-circle-solid.tsx b/packages/design-system/icons/src/components/information-circle-solid.tsx
index 868de42e68..5ef020b08a 100644
--- a/packages/design-system/icons/src/components/information-circle-solid.tsx
+++ b/packages/design-system/icons/src/components/information-circle-solid.tsx
@@ -14,9 +14,7 @@ const InformationCircleSolid = React.forwardRef<SVGSVGElement, IconProps>(
         <g clipPath="url(#a)">
           <path
             fill={color}
-            fillRule="evenodd"
-            d="M14.61 7.5a7.11 7.11 0 1 1-14.22 0 7.11 7.11 0 0 1 14.22 0M8.389 3.945a.889.889 0 1 1-1.778 0 .889.889 0 0 1 1.778 0M6.61 6.611a.667.667 0 1 0 0 1.333h.225a.222.222 0 0 1 .217.27l-.408 1.837a1.555 1.555 0 0 0 1.519 1.893h.225a.667.667 0 0 0 0-1.333h-.225a.222.222 0 0 1-.217-.27l.408-1.837a1.555 1.555 0 0 0-1.519-1.893z"
-            clipRule="evenodd"
+            d="M7.5.389A7.12 7.12 0 0 0 .389 7.5 7.12 7.12 0 0 0 7.5 14.611 7.12 7.12 0 0 0 14.611 7.5c0-3.921-3.19-7.111-7.111-7.111m.667 10.444a.667.667 0 0 1-1.334 0V7.944H6.39a.667.667 0 0 1 0-1.333h.667c.612 0 1.11.498 1.11 1.111zM7.5 5.5a.89.89 0 0 1 0-1.778.89.89 0 0 1 0 1.778"
           />
         </g>
         <defs>
diff --git a/packages/design-system/icons/src/components/language.tsx b/packages/design-system/icons/src/components/language.tsx
new file mode 100644
index 0000000000..d71b5357d9
--- /dev/null
+++ b/packages/design-system/icons/src/components/language.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Language = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.5 3.278h7.111M5.056 1.5v1.778M3.278 3.278a5.43 5.43 0 0 0 3.577 4.919"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M6.833 3.278C6.478 8.278 1.5 8.61 1.5 8.61M7.722 13.5l2.667-7.111h.444l2.667 7.11M8.556 11.278h4.111"
+        />
+      </svg>
+    )
+  }
+)
+Language.displayName = "Language"
+export default Language
diff --git a/packages/design-system/icons/src/components/laptop-mobile.tsx b/packages/design-system/icons/src/components/laptop-mobile.tsx
new file mode 100644
index 0000000000..bb19bc2358
--- /dev/null
+++ b/packages/design-system/icons/src/components/laptop-mobile.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const LaptopMobile = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.944 12.611V7.722c0-.736-.597-1.333-1.333-1.333H10.39c-.736 0-1.333.597-1.333 1.333v4.89c0 .735.597 1.333 1.333 1.333h2.222c.736 0 1.333-.598 1.333-1.334M1.056 11.278h5.333M13.056 3.722c0-.982-.796-1.778-1.778-1.778H3.722c-.982 0-1.778.796-1.778 1.778v5.889c0 .92.746 1.667 1.667 1.667"
+        />
+      </svg>
+    )
+  }
+)
+LaptopMobile.displayName = "LaptopMobile"
+export default LaptopMobile
diff --git a/packages/design-system/icons/src/components/layers-3.tsx b/packages/design-system/icons/src/components/layers-3.tsx
new file mode 100644
index 0000000000..d04e018592
--- /dev/null
+++ b/packages/design-system/icons/src/components/layers-3.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Layers3 = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m1.869 4.021 5.217-2.747a.89.89 0 0 1 .828 0l5.218 2.747c.475.25.475.93 0 1.18L7.914 7.948a.89.89 0 0 1-.828 0L1.869 5.202a.667.667 0 0 1 0-1.18"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.488 7.5c0 .232-.12.465-.357.59l-5.218 2.748a.89.89 0 0 1-.828 0L1.867 8.09a.66.66 0 0 1-.356-.59"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.488 10.39c0 .231-.12.464-.357.59l-5.218 2.747a.89.89 0 0 1-.828 0l-5.218-2.748a.66.66 0 0 1-.356-.59"
+        />
+      </svg>
+    )
+  }
+)
+Layers3.displayName = "Layers3"
+export default Layers3
diff --git a/packages/design-system/icons/src/components/layout-bottom.tsx b/packages/design-system/icons/src/components/layout-bottom.tsx
new file mode 100644
index 0000000000..acfb81bb03
--- /dev/null
+++ b/packages/design-system/icons/src/components/layout-bottom.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const LayoutBottom = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          clipPath="url(#a)"
+        >
+          <path d="M2.833 13.25h9.334c.982 0 1.777-.824 1.777-1.84V3.59c0-1.016-.796-1.84-1.777-1.84H2.833c-.981 0-1.777.824-1.777 1.84v7.82c0 1.016.796 1.84 1.777 1.84M3.722 10.39h7.556" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+LayoutBottom.displayName = "LayoutBottom"
+export default LayoutBottom
diff --git a/packages/design-system/icons/src/components/layout-left-right.tsx b/packages/design-system/icons/src/components/layout-left-right.tsx
new file mode 100644
index 0000000000..490553ea0b
--- /dev/null
+++ b/packages/design-system/icons/src/components/layout-left-right.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const LayoutLeftRight = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M12.167 1.944H2.833c-.982 0-1.777.796-1.777 1.778v7.556c0 .981.795 1.777 1.777 1.777h9.334c.982 0 1.777-.796 1.777-1.777V3.722c0-.982-.796-1.778-1.777-1.778M3.722 4.611v5.778M11.28 4.611v5.778"
+        />
+      </svg>
+    )
+  }
+)
+LayoutLeftRight.displayName = "LayoutLeftRight"
+export default LayoutLeftRight
diff --git a/packages/design-system/icons/src/components/layout-left.tsx b/packages/design-system/icons/src/components/layout-left.tsx
new file mode 100644
index 0000000000..11c592c72d
--- /dev/null
+++ b/packages/design-system/icons/src/components/layout-left.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const LayoutLeft = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M12.167 1.944H2.833c-.982 0-1.777.796-1.777 1.778v7.556c0 .981.795 1.777 1.777 1.777h9.334c.982 0 1.777-.796 1.777-1.777V3.722c0-.982-.796-1.778-1.777-1.778M3.722 4.611v5.778"
+        />
+      </svg>
+    )
+  }
+)
+LayoutLeft.displayName = "LayoutLeft"
+export default LayoutLeft
diff --git a/packages/design-system/icons/src/components/layout-right.tsx b/packages/design-system/icons/src/components/layout-right.tsx
new file mode 100644
index 0000000000..a3f48d5b69
--- /dev/null
+++ b/packages/design-system/icons/src/components/layout-right.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const LayoutRight = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M2.833 13.056h9.334c.982 0 1.777-.796 1.777-1.778V3.722c0-.982-.796-1.777-1.777-1.777H2.833c-.981 0-1.777.795-1.777 1.777v7.556c0 .982.796 1.778 1.777 1.778M11.278 4.611v5.778"
+        />
+      </svg>
+    )
+  }
+)
+LayoutRight.displayName = "LayoutRight"
+export default LayoutRight
diff --git a/packages/design-system/icons/src/components/layout-top-bottom.tsx b/packages/design-system/icons/src/components/layout-top-bottom.tsx
new file mode 100644
index 0000000000..27d8217920
--- /dev/null
+++ b/packages/design-system/icons/src/components/layout-top-bottom.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const LayoutTopBottom = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          clipPath="url(#a)"
+        >
+          <path d="M2.833 13.25h9.334c.982 0 1.777-.824 1.777-1.84V3.59c0-1.016-.796-1.84-1.777-1.84H2.833c-.982 0-1.777.824-1.777 1.84v7.82c0 1.016.795 1.84 1.777 1.84M3.722 4.611h7.556M3.722 10.39h7.556" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+LayoutTopBottom.displayName = "LayoutTopBottom"
+export default LayoutTopBottom
diff --git a/packages/design-system/icons/src/components/layout-top.tsx b/packages/design-system/icons/src/components/layout-top.tsx
new file mode 100644
index 0000000000..edbee4ab96
--- /dev/null
+++ b/packages/design-system/icons/src/components/layout-top.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const LayoutTop = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          clipPath="url(#a)"
+        >
+          <path d="M2.833 13.25h9.334c.982 0 1.777-.824 1.777-1.84V3.59c0-1.016-.796-1.84-1.777-1.84H2.833c-.981 0-1.777.824-1.777 1.84v7.82c0 1.016.796 1.84 1.777 1.84M3.722 4.611h7.556" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+LayoutTop.displayName = "LayoutTop"
+export default LayoutTop
diff --git a/packages/design-system/icons/src/components/light-bulb-solid.tsx b/packages/design-system/icons/src/components/light-bulb-solid.tsx
index 789cc1efc4..3fe342809a 100644
--- a/packages/design-system/icons/src/components/light-bulb-solid.tsx
+++ b/packages/design-system/icons/src/components/light-bulb-solid.tsx
@@ -13,7 +13,7 @@ const LightBulbSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <path
           fill={color}
-          d="M10.722 1.532A5.15 5.15 0 0 0 6.406.502C4.426.917 2.848 2.536 2.48 4.53c-.395 2.133.544 4.222 2.354 5.326v2.31a2.447 2.447 0 0 0 2.445 2.445h.444a2.447 2.447 0 0 0 2.445-2.444v-2.31A5.08 5.08 0 0 0 12.612 5.5a5.1 5.1 0 0 0-1.889-3.968m-3 11.746h-.444c-.534 0-.96-.386-1.066-.89h2.577c-.106.504-.533.89-1.066.89m1.111-2.222H6.167v-.89h2.666zm.916-5.53L8.167 7.11v1.057a.667.667 0 0 1-1.334 0V7.109L5.251 5.527a.667.667 0 1 1 .943-.943L7.501 5.89l1.307-1.306a.667.667 0 1 1 .943.943z"
+          d="M10.722 1.532A5.15 5.15 0 0 0 6.406.502C4.426.917 2.848 2.536 2.48 4.53c-.395 2.133.544 4.222 2.354 5.326v2.31a2.447 2.447 0 0 0 2.445 2.445h.444a2.447 2.447 0 0 0 2.445-2.444v-2.31A5.08 5.08 0 0 0 12.612 5.5a5.1 5.1 0 0 0-1.889-3.968m-3 11.746h-.444a1.113 1.113 0 0 1-1.111-1.111v-1.111h2.666v1.11c0 .613-.498 1.112-1.11 1.112"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/light-bulb.tsx b/packages/design-system/icons/src/components/light-bulb.tsx
index a7fa5358e7..77b46b7020 100644
--- a/packages/design-system/icons/src/components/light-bulb.tsx
+++ b/packages/design-system/icons/src/components/light-bulb.tsx
@@ -16,14 +16,7 @@ const LightBulb = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M7.5 9.5V6.833L5.722 5.056M7.5 6.833l1.778-1.777M5.5 11.722h4"
-        />
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M11.944 5.5a4.45 4.45 0 0 0-5.402-4.344c-1.718.358-3.09 1.772-3.408 3.496A4.445 4.445 0 0 0 5.5 9.465v2.702c0 .982.796 1.777 1.778 1.777h.444c.982 0 1.778-.795 1.778-1.777V9.465A4.44 4.44 0 0 0 11.944 5.5M5.5 9.5h4"
+          d="M5.5 11.278h4M11.944 5.5a4.45 4.45 0 0 0-5.402-4.344c-1.718.358-3.09 1.771-3.408 3.496A4.445 4.445 0 0 0 5.5 9.465v2.701c0 .983.796 1.778 1.778 1.778h.444c.982 0 1.778-.795 1.778-1.778v-2.7A4.44 4.44 0 0 0 11.944 5.5"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/lock-closed-solid.tsx b/packages/design-system/icons/src/components/lock-closed-solid.tsx
index fb4ecc6139..e42665f345 100644
--- a/packages/design-system/icons/src/components/lock-closed-solid.tsx
+++ b/packages/design-system/icons/src/components/lock-closed-solid.tsx
@@ -13,11 +13,11 @@ const LockClosedSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <path
           fill={color}
-          d="M10.389 7.5a.667.667 0 0 1-.667-.667V3.944A2.225 2.225 0 0 0 7.5 1.722a2.225 2.225 0 0 0-2.222 2.222v2.89a.667.667 0 0 1-1.334 0v-2.89A3.56 3.56 0 0 1 7.5.39a3.56 3.56 0 0 1 3.556 3.555v2.89a.667.667 0 0 1-.667.666"
+          d="M9.75 7.5A.75.75 0 0 1 9 6.75V4.5C9 3.673 8.327 3 7.5 3S6 3.673 6 4.5v2.25a.75.75 0 0 1-1.5 0V4.5c0-1.654 1.346-3 3-3s3 1.346 3 3v2.25a.75.75 0 0 1-.75.75"
         />
         <path
           fill={color}
-          d="M10.833 6.167H4.167A2.446 2.446 0 0 0 1.722 8.61v3.556a2.446 2.446 0 0 0 2.445 2.444h6.666a2.446 2.446 0 0 0 2.445-2.444V8.61a2.446 2.446 0 0 0-2.445-2.444m-2.666 4.666a.667.667 0 0 1-1.334 0v-.889a.667.667 0 0 1 1.334 0z"
+          d="M10.75 6h-6.5A2.25 2.25 0 0 0 2 8.25v3a2.25 2.25 0 0 0 2.25 2.25h6.5A2.25 2.25 0 0 0 13 11.25v-3A2.25 2.25 0 0 0 10.75 6m-2.5 4.25a.75.75 0 0 1-1.5 0v-1a.75.75 0 0 1 1.5 0z"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/mailbox.tsx b/packages/design-system/icons/src/components/mailbox.tsx
new file mode 100644
index 0000000000..1e4f75e363
--- /dev/null
+++ b/packages/design-system/icons/src/components/mailbox.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Mailbox = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.829 4.398a2.82 2.82 0 0 1 1.511 2.498v4.028c0 .444-.36.805-.805.805H6.493M4.48 4.077h4.832"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M4.48 4.077a2.82 2.82 0 0 1 2.819 2.82v4.027c0 .444-.361.805-.806.805H2.465a.806.806 0 0 1-.805-.805V6.896a2.82 2.82 0 0 1 2.82-2.82M7.299 11.528v1.812M4.48 6.896v1.208"
+        />
+        <path
+          fill={color}
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.73.854H9.311v1.209h2.417z"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M9.313 5.285V1.86"
+        />
+      </svg>
+    )
+  }
+)
+Mailbox.displayName = "Mailbox"
+export default Mailbox
diff --git a/packages/design-system/icons/src/components/margin-bottom.tsx b/packages/design-system/icons/src/components/margin-bottom.tsx
new file mode 100644
index 0000000000..0d9f0881c7
--- /dev/null
+++ b/packages/design-system/icons/src/components/margin-bottom.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MarginBottom = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 13.056h11.112M10.389 9.5v-4a.89.89 0 0 0-.889-.889h-4a.89.89 0 0 0-.889.89v4c0 .49.398.888.889.888h4c.49 0 .889-.398.889-.889"
+        />
+      </svg>
+    )
+  }
+)
+MarginBottom.displayName = "MarginBottom"
+export default MarginBottom
diff --git a/packages/design-system/icons/src/components/margin-left-right.tsx b/packages/design-system/icons/src/components/margin-left-right.tsx
new file mode 100644
index 0000000000..4010bd9ea5
--- /dev/null
+++ b/packages/design-system/icons/src/components/margin-left-right.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MarginLeftRight = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 13.055V1.945M9.5 4.611h-4a.89.89 0 0 0-.889.89v4c0 .49.398.888.889.888h4c.49 0 .889-.398.889-.889v-4a.89.89 0 0 0-.889-.889M13.556 13.055V1.945"
+        />
+      </svg>
+    )
+  }
+)
+MarginLeftRight.displayName = "MarginLeftRight"
+export default MarginLeftRight
diff --git a/packages/design-system/icons/src/components/margin-left.tsx b/packages/design-system/icons/src/components/margin-left.tsx
new file mode 100644
index 0000000000..64c6484dad
--- /dev/null
+++ b/packages/design-system/icons/src/components/margin-left.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MarginLeft = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 13.055V1.945M9.5 4.611h-4a.89.89 0 0 0-.889.89v4c0 .49.398.888.889.888h4c.49 0 .889-.398.889-.889v-4a.89.89 0 0 0-.889-.889"
+        />
+      </svg>
+    )
+  }
+)
+MarginLeft.displayName = "MarginLeft"
+export default MarginLeft
diff --git a/packages/design-system/icons/src/components/margin-right.tsx b/packages/design-system/icons/src/components/margin-right.tsx
new file mode 100644
index 0000000000..99b8808429
--- /dev/null
+++ b/packages/design-system/icons/src/components/margin-right.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MarginRight = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.056 13.055V1.945M9.5 4.611h-4a.89.89 0 0 0-.889.89v4c0 .49.398.888.889.888h4c.49 0 .889-.398.889-.889v-4a.89.89 0 0 0-.889-.889"
+        />
+      </svg>
+    )
+  }
+)
+MarginRight.displayName = "MarginRight"
+export default MarginRight
diff --git a/packages/design-system/icons/src/components/margin-top-bottom.tsx b/packages/design-system/icons/src/components/margin-top-bottom.tsx
new file mode 100644
index 0000000000..6e037e1076
--- /dev/null
+++ b/packages/design-system/icons/src/components/margin-top-bottom.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MarginTopBottom = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 13.056h11.112M10.389 9.5v-4a.89.89 0 0 0-.889-.889h-4a.89.89 0 0 0-.889.89v4c0 .49.398.888.889.888h4c.49 0 .889-.398.889-.889M1.944 1.944h11.112"
+        />
+      </svg>
+    )
+  }
+)
+MarginTopBottom.displayName = "MarginTopBottom"
+export default MarginTopBottom
diff --git a/packages/design-system/icons/src/components/margin-top.tsx b/packages/design-system/icons/src/components/margin-top.tsx
new file mode 100644
index 0000000000..c915afcb3a
--- /dev/null
+++ b/packages/design-system/icons/src/components/margin-top.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MarginTop = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 1.944h11.112M10.389 9.5v-4a.89.89 0 0 0-.889-.889h-4a.89.89 0 0 0-.889.89v4c0 .49.398.888.889.888h4c.49 0 .889-.398.889-.889"
+        />
+      </svg>
+    )
+  }
+)
+MarginTop.displayName = "MarginTop"
+export default MarginTop
diff --git a/packages/design-system/icons/src/components/media-stop-solid.tsx b/packages/design-system/icons/src/components/media-stop-solid.tsx
new file mode 100644
index 0000000000..9b33835141
--- /dev/null
+++ b/packages/design-system/icons/src/components/media-stop-solid.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MediaStopSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M11.278 1.278H3.722a2.444 2.444 0 0 0-2.444 2.444v7.556a2.444 2.444 0 0 0 2.444 2.444h7.556a2.444 2.444 0 0 0 2.444-2.444V3.722a2.444 2.444 0 0 0-2.444-2.444"
+        />
+      </svg>
+    )
+  }
+)
+MediaStopSolid.displayName = "MediaStopSolid"
+export default MediaStopSolid
diff --git a/packages/design-system/icons/src/components/medusa.tsx b/packages/design-system/icons/src/components/medusa.tsx
index c3600f80a4..64d4957892 100644
--- a/packages/design-system/icons/src/components/medusa.tsx
+++ b/packages/design-system/icons/src/components/medusa.tsx
@@ -1,35 +1,20 @@
 import * as React from "react"
 import type { IconProps } from "../types"
-const Medusa = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ color = "currentColor", ...props }, ref) => {
+const Medusa = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
     return (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={20}
-        height={20}
+        width={15}
+        height={15}
         fill="none"
         ref={ref}
         {...props}
       >
-        <path fill={color} d="M0 0h20v20H0z" />
-        <path fill="url(#a)" fillOpacity={0.2} d="M0 0h20v20H0z" />
         <path
-          fill="#fff"
-          d="m14.163 5.948-2.717-1.563a2.87 2.87 0 0 0-2.868 0l-2.73 1.563a2.89 2.89 0 0 0-1.427 2.476v3.14c0 1.025.551 1.963 1.428 2.476l2.717 1.575c.889.513 1.978.513 2.867 0l2.718-1.575a2.85 2.85 0 0 0 1.427-2.477V8.424c.025-1.013-.526-1.963-1.415-2.476m-4.157 6.841A2.793 2.793 0 0 1 7.214 10a2.793 2.793 0 0 1 2.792-2.789c1.54 0 2.805 1.25 2.805 2.789a2.796 2.796 0 0 1-2.805 2.789"
+          fill="#18181B"
+          d="M12.184 2.941 9.127 1.183a3.22 3.22 0 0 0-3.226 0L2.83 2.94a3.25 3.25 0 0 0-1.606 2.786V9.26c0 1.153.62 2.209 1.606 2.786l3.057 1.772c1 .577 2.226.577 3.226 0l3.057-1.772a3.2 3.2 0 0 0 1.606-2.786V5.727c.028-1.14-.592-2.209-1.592-2.786m-4.677 7.697A3.14 3.14 0 0 1 4.365 7.5a3.14 3.14 0 0 1 3.142-3.138c1.733 0 3.155 1.407 3.155 3.138a3.145 3.145 0 0 1-3.155 3.138"
         />
-        <defs>
-          <linearGradient
-            id="a"
-            x1={10}
-            x2={10}
-            y1={0}
-            y2={20}
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#fff" />
-            <stop offset={1} stopColor="#fff" stopOpacity={0} />
-          </linearGradient>
-        </defs>
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/message-plus.tsx b/packages/design-system/icons/src/components/message-plus.tsx
new file mode 100644
index 0000000000..399415ce0c
--- /dev/null
+++ b/packages/design-system/icons/src/components/message-plus.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MessagePlus = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.722 9.5v4.444M13.944 11.722H9.5M13.944 8.057v-4.78c0-.98-.795-1.777-1.777-1.777H2.833c-.982 0-1.777.796-1.777 1.778V9.5c0 .981.795 1.778 1.777 1.778h1.778v2.666l2.26-1.808"
+        />
+      </svg>
+    )
+  }
+)
+MessagePlus.displayName = "MessagePlus"
+export default MessagePlus
diff --git a/packages/design-system/icons/src/components/microchip.tsx b/packages/design-system/icons/src/components/microchip.tsx
new file mode 100644
index 0000000000..a34591ca3c
--- /dev/null
+++ b/packages/design-system/icons/src/components/microchip.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Microchip = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M10.389 2.833H4.61c-.982 0-1.778.796-1.778 1.778v5.778c0 .981.796 1.777 1.778 1.777h5.778c.982 0 1.778-.796 1.778-1.777V4.61c0-.982-.796-1.778-1.778-1.778"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M5.5 5.5v4h4v-4zM7.5 1.056v1.777M4.611 1.056v1.777M10.389 1.056v1.777M13.944 7.5h-1.777M13.944 4.61h-1.777M13.944 10.389h-1.777M7.5 13.944v-1.778M10.389 13.944v-1.778M4.611 13.944v-1.778M1.056 7.5h1.777M1.056 10.389h1.777M1.056 4.61h1.777"
+        />
+      </svg>
+    )
+  }
+)
+Microchip.displayName = "Microchip"
+export default Microchip
diff --git a/packages/design-system/icons/src/components/minus-circle.tsx b/packages/design-system/icons/src/components/minus-circle.tsx
new file mode 100644
index 0000000000..3d42ca614d
--- /dev/null
+++ b/packages/design-system/icons/src/components/minus-circle.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MinusCircle = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89M4.611 7.5h5.778"
+        />
+      </svg>
+    )
+  }
+)
+MinusCircle.displayName = "MinusCircle"
+export default MinusCircle
diff --git a/packages/design-system/icons/src/components/palette.tsx b/packages/design-system/icons/src/components/palette.tsx
new file mode 100644
index 0000000000..eedcf5f705
--- /dev/null
+++ b/packages/design-system/icons/src/components/palette.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Palette = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={16}
+        height={16}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.38 14.415a6.445 6.445 0 0 1-5.819-6.69c.14-3.348 2.978-6.112 6.328-6.168A6.444 6.444 0 0 1 14.444 8 2.444 2.444 0 0 1 12 10.444H9.366c-.919 0-1.505.981-1.069 1.79l.211.392c.231.43.183.954-.12 1.335-.244.304-.62.491-1.007.454"
+        />
+        <path
+          fill={color}
+          d="M8 5.333a.889.889 0 1 0 0-1.777.889.889 0 0 0 0 1.777M5.486 6.374a.889.889 0 1 0 0-1.777.889.889 0 0 0 0 1.777M10.514 6.374a.889.889 0 1 0 0-1.777.889.889 0 0 0 0 1.777M4.444 8.89a.889.889 0 1 0 0-1.779.889.889 0 0 0 0 1.778"
+        />
+      </svg>
+    )
+  }
+)
+Palette.displayName = "Palette"
+export default Palette
diff --git a/packages/design-system/icons/src/components/paper-plane.tsx b/packages/design-system/icons/src/components/paper-plane.tsx
new file mode 100644
index 0000000000..0939ff7b5f
--- /dev/null
+++ b/packages/design-system/icons/src/components/paper-plane.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const PaperPlane = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m13.556 1.444-7.25 7.25M13.675 1.927 9.983 13.414a.478.478 0 0 1-.869.094L6.306 8.694 1.492 5.886a.478.478 0 0 1 .094-.869l11.487-3.692c.371-.12.721.231.602.602"
+        />
+      </svg>
+    )
+  }
+)
+PaperPlane.displayName = "PaperPlane"
+export default PaperPlane
diff --git a/packages/design-system/icons/src/components/photo.tsx b/packages/design-system/icons/src/components/photo.tsx
index 658429e71e..3b942576f9 100644
--- a/packages/design-system/icons/src/components/photo.tsx
+++ b/packages/design-system/icons/src/components/photo.tsx
@@ -11,25 +11,24 @@ const Photo = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g clipPath="url(#a)">
-          <g fill={color} clipPath="url(#b)">
-            <path d="M5.722 4.833c0 .49.399.89.889.89s.889-.4.889-.89a.89.89 0 0 0-.89-.889.89.89 0 0 0-.888.89" />
-            <path
-              fillRule="evenodd"
-              d="M5.5 1.194a2.53 2.53 0 0 0-2.528 2.528v4.89A2.53 2.53 0 0 0 5.5 11.138h6.666a2.53 2.53 0 0 0 2.528-2.528V3.722a2.53 2.53 0 0 0-2.528-2.528zM4.472 3.722c0-.567.46-1.028 1.028-1.028h6.666c.568 0 1.028.46 1.028 1.028v2.933L11.77 5.23a1.64 1.64 0 0 0-2.318 0L5.113 9.563a1.03 1.03 0 0 1-.641-.953zm6.237 2.569 2.474 2.474a1.03 1.03 0 0 1-1.017.874H7.161l3.352-3.348a.14.14 0 0 1 .196 0"
-              clipRule="evenodd"
-            />
-            <path d="M1.805 5.5a.75.75 0 0 0-1.5 0v5.778a2.527 2.527 0 0 0 2.528 2.528h7.556a.75.75 0 0 0 0-1.5H2.833c-.568 0-1.028-.46-1.028-1.028z" />
-          </g>
-        </g>
-        <defs>
-          <clipPath id="a">
-            <path fill="#fff" d="M0 0h15v15H0z" />
-          </clipPath>
-          <clipPath id="b">
-            <path fill="#fff" d="M-.5-.5h16v16h-16z" />
-          </clipPath>
-        </defs>
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m3.056 12.611 5.187-5.188a1.777 1.777 0 0 1 2.514 0l3.187 3.188"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M2.833 12.611h9.334c.982 0 1.777-.796 1.777-1.777V4.167c0-.982-.796-1.778-1.777-1.778H2.833c-.982 0-1.777.796-1.777 1.778v6.667c0 .981.795 1.777 1.777 1.777"
+        />
+        <path
+          fill={color}
+          d="M4.611 7.056a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222"
+        />
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/pin-tack-solid.tsx b/packages/design-system/icons/src/components/pin-tack-solid.tsx
new file mode 100644
index 0000000000..ba5ed6f6ee
--- /dev/null
+++ b/packages/design-system/icons/src/components/pin-tack-solid.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const PinTackSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M7.743 1.666a2.53 2.53 0 0 1 3.576 0l2.015 2.015a2.53 2.53 0 0 1 0 3.575l-2.467 2.467a7.4 7.4 0 0 1-.225 1.377 7.5 7.5 0 0 1-1.295 2.635.75.75 0 0 1-1.157.121l-2.993-2.992-2.428 2.428a.75.75 0 0 1-1.06-1.06l2.427-2.429-2.991-2.99a.75.75 0 0 1 .07-1.124A7.5 7.5 0 0 1 3.9 4.358l.236-.058a7.4 7.4 0 0 1 1.139-.167z"
+        />
+      </svg>
+    )
+  }
+)
+PinTackSolid.displayName = "PinTackSolid"
+export default PinTackSolid
diff --git a/packages/design-system/icons/src/components/pin-tack.tsx b/packages/design-system/icons/src/components/pin-tack.tsx
new file mode 100644
index 0000000000..2cf6603cf3
--- /dev/null
+++ b/packages/design-system/icons/src/components/pin-tack.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const PinTack = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m2.239 12.761 2.958-2.958M8.719 13.325a6.654 6.654 0 0 0 1.414-3.928l2.671-2.671a1.777 1.777 0 0 0 0-2.514l-2.016-2.016a1.777 1.777 0 0 0-2.514 0l-2.67 2.671a6.7 6.7 0 0 0-1.513.216 6.75 6.75 0 0 0-2.416 1.198z"
+        />
+      </svg>
+    )
+  }
+)
+PinTack.displayName = "PinTack"
+export default PinTack
diff --git a/packages/design-system/icons/src/components/plug.tsx b/packages/design-system/icons/src/components/plug.tsx
new file mode 100644
index 0000000000..7876dc41a5
--- /dev/null
+++ b/packages/design-system/icons/src/components/plug.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Plug = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m4.037 7.246 3.717 3.717a.89.89 0 0 1 0 1.257l-.249.25a3.518 3.518 0 0 1-4.974-4.975l.249-.249a.89.89 0 0 1 1.257 0M1.056 13.944 2.53 12.47M4.784 7.993l1.383-1.382M7.007 10.215l1.382-1.382M7.246 4.037l3.717 3.717a.89.89 0 0 0 1.257 0l.249-.249a3.518 3.518 0 0 0-4.974-4.974l-.25.249a.89.89 0 0 0 0 1.257M13.945 1.056 12.47 2.53"
+        />
+      </svg>
+    )
+  }
+)
+Plug.displayName = "Plug"
+export default Plug
diff --git a/packages/design-system/icons/src/components/pointer-circle-solid.tsx b/packages/design-system/icons/src/components/pointer-circle-solid.tsx
new file mode 100644
index 0000000000..3811549a7c
--- /dev/null
+++ b/packages/design-system/icons/src/components/pointer-circle-solid.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const PointerCircleSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M7.5.389C3.58.389.389 3.579.389 7.5s3.19 7.111 7.111 7.111 7.111-3.19 7.111-7.111S11.421.389 7.5.389m3.574 7.68-2.277.728-.729 2.275c-.12.38-.47.641-.87.65H7.18a.93.93 0 0 1-.877-.613L4.224 5.423a.92.92 0 0 1 .216-.982.92.92 0 0 1 .982-.217l5.685 2.078a.934.934 0 0 1-.035 1.767z"
+        />
+      </svg>
+    )
+  }
+)
+PointerCircleSolid.displayName = "PointerCircleSolid"
+export default PointerCircleSolid
diff --git a/packages/design-system/icons/src/components/pointer.tsx b/packages/design-system/icons/src/components/pointer.tsx
new file mode 100644
index 0000000000..f034f880b5
--- /dev/null
+++ b/packages/design-system/icons/src/components/pointer.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Pointer = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m2.588 1.974 10.154 3.71a.478.478 0 0 1-.019.906L8.076 8.076 6.59 12.724a.478.478 0 0 1-.905.018L1.974 2.588a.478.478 0 0 1 .614-.614"
+        />
+      </svg>
+    )
+  }
+)
+Pointer.displayName = "Pointer"
+export default Pointer
diff --git a/packages/design-system/icons/src/components/queue-solid.tsx b/packages/design-system/icons/src/components/queue-solid.tsx
new file mode 100644
index 0000000000..4be7a5711d
--- /dev/null
+++ b/packages/design-system/icons/src/components/queue-solid.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const QueueSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M12.167 1.278H2.833c-.859 0-1.555.696-1.555 1.555v3.111c0 .86.696 1.556 1.555 1.556h9.334c.859 0 1.555-.696 1.555-1.556v-3.11c0-.86-.696-1.556-1.555-1.556M13.056 9.278H1.945a.667.667 0 0 0 0 1.333h11.11a.667.667 0 0 0 0-1.333M13.056 12.389H1.945a.667.667 0 0 0 0 1.333h11.11a.667.667 0 0 0 0-1.333"
+        />
+      </svg>
+    )
+  }
+)
+QueueSolid.displayName = "QueueSolid"
+export default QueueSolid
diff --git a/packages/design-system/icons/src/components/receipt-percent.tsx b/packages/design-system/icons/src/components/receipt-percent.tsx
index 0a64b54bd0..7a7b3def23 100644
--- a/packages/design-system/icons/src/components/receipt-percent.tsx
+++ b/packages/design-system/icons/src/components/receipt-percent.tsx
@@ -14,9 +14,14 @@ const ReceiptPercent = React.forwardRef<SVGSVGElement, IconProps>(
         <g clipPath="url(#a)">
           <path
             fill={color}
-            fillRule="evenodd"
-            d="M2.833 1.593C1.368 1.593.306 2.88.306 4.307v1.474c0 .414.335.75.75.75.375 0 .805.361.805.97 0 .607-.43.968-.805.968a.75.75 0 0 0-.75.75v1.474c0 1.426 1.062 2.715 2.527 2.715h9.334c1.465 0 2.527-1.289 2.527-2.715V9.219a.75.75 0 0 0-.75-.75c-.376 0-.805-.361-.805-.969s.43-.97.805-.97a.75.75 0 0 0 .75-.75V4.308c0-1.426-1.062-2.714-2.527-2.714zM1.806 4.307c0-.743.528-1.214 1.027-1.214h9.334c.499 0 1.027.471 1.027 1.214v.855c-.936.341-1.555 1.303-1.555 2.338s.62 1.997 1.555 2.338v.855c0 .743-.528 1.215-1.027 1.215H2.833c-.499 0-1.027-.472-1.027-1.215v-.855C2.742 9.498 3.36 8.536 3.36 7.5c0-1.035-.62-1.997-1.555-2.338zm8.224.663a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 1 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0m-3.419.752a.889.889 0 1 1-1.778 0 .889.889 0 0 1 1.778 0m3.556 3.556a.889.889 0 1 1-1.778 0 .889.889 0 0 1 1.778 0"
-            clipRule="evenodd"
+            d="M5.722 6.611a.889.889 0 1 0 0-1.778.889.889 0 0 0 0 1.778M9.278 10.167a.889.889 0 1 0 0-1.778.889.889 0 0 0 0 1.778"
+          />
+          <path
+            stroke={color}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="m5.5 9.5 4-4M12.389 7.5c0-.921.697-1.667 1.555-1.667V4.405c0-1.052-.795-1.905-1.777-1.905H2.833c-.982 0-1.777.853-1.777 1.905v1.428c.858 0 1.555.746 1.555 1.667 0 .92-.697 1.667-1.555 1.667v1.428c0 1.052.795 1.905 1.777 1.905h9.334c.982 0 1.777-.853 1.777-1.905V9.167c-.858 0-1.555-.746-1.555-1.667"
           />
         </g>
         <defs>
diff --git a/packages/design-system/icons/src/components/rename.tsx b/packages/design-system/icons/src/components/rename.tsx
new file mode 100644
index 0000000000..59d71fb246
--- /dev/null
+++ b/packages/design-system/icons/src/components/rename.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Rename = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M8.611 11.278 5.336 2.832h-.543l-3.275 8.445M2.38 9.056h5.369M11.722 2.833v9.333M9.944 1.056c.983 0 1.778.795 1.778 1.777"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.5 1.056c-.982 0-1.778.795-1.778 1.777M9.944 13.944c.983 0 1.778-.795 1.778-1.778"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.5 13.944a1.777 1.777 0 0 1-1.778-1.778M10.389 8.166h2.667"
+        />
+      </svg>
+    )
+  }
+)
+Rename.displayName = "Rename"
+export default Rename
diff --git a/packages/design-system/icons/src/components/resend.tsx b/packages/design-system/icons/src/components/resend.tsx
index 43f483f5c2..18bab373c4 100644
--- a/packages/design-system/icons/src/components/resend.tsx
+++ b/packages/design-system/icons/src/components/resend.tsx
@@ -14,8 +14,8 @@ const Resend = React.forwardRef<SVGSVGElement, IconProps>(
         <path fill="#0F0F0F" d="M0 0h20v20H0z" />
         <path fill="url(#a)" fillOpacity={0.2} d="M0 0h20v20H0z" />
         <path
-          fill="#fff"
-          d="m15.172 15.8-2.687-4.657c.12-.06.18-.06.299-.12.597-.357 1.074-.775 1.432-1.372a3.76 3.76 0 0 0 .538-1.97q0-1.076-.538-1.97c-.358-.598-.835-1.016-1.432-1.374S11.53 3.8 10.754 3.8H5.5v11.94h2.448v-4.298h1.91l2.388 4.298zM7.948 6.068h2.388c.358 0 .716.06 1.015.24.298.119.477.357.656.596.06.24.18.538.18.836q0 .448-.18.896c-.119.238-.298.477-.537.597-.239.119-.478.179-.776.179H7.948z"
+          fill="#FDFDFD"
+          d="M11.34 4c2.324 0 3.706 1.382 3.706 3.217s-1.382 3.217-3.706 3.217h-1.175L16 16h-4.122l-4.44-4.22c-.319-.294-.466-.636-.466-.93 0-.416.294-.783.857-.942l2.287-.611c.869-.233 1.468-.906 1.468-1.786 0-1.077-.88-1.7-1.97-1.7H4V4z"
         />
         <defs>
           <linearGradient
diff --git a/packages/design-system/icons/src/components/robot.tsx b/packages/design-system/icons/src/components/robot.tsx
new file mode 100644
index 0000000000..f02c6756aa
--- /dev/null
+++ b/packages/design-system/icons/src/components/robot.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Robot = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 1.813v2.416M12.938 11.479a1.61 1.61 0 0 1-1.612 1.611H3.674a1.61 1.61 0 0 1-1.611-1.611V5.84c0-.89.72-1.611 1.61-1.611h7.653c.89 0 1.611.721 1.611 1.611zM2.062 8.66H1.056M12.938 8.66h1.006"
+        />
+        <path
+          fill={color}
+          d="M7.5 2.618A1.31 1.31 0 1 0 7.5 0a1.31 1.31 0 0 0 0 2.62M5.5 8.66a1 1 0 1 0 0-2.001 1 1 0 0 0 0 2M9.5 8.66a1 1 0 1 0 0-2.001 1 1 0 0 0 0 2"
+        />
+      </svg>
+    )
+  }
+)
+Robot.displayName = "Robot"
+export default Robot
diff --git a/packages/design-system/icons/src/components/sap.tsx b/packages/design-system/icons/src/components/sap.tsx
new file mode 100644
index 0000000000..6a4b7062d9
--- /dev/null
+++ b/packages/design-system/icons/src/components/sap.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Sap = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path fill="url(#a)" d="M0 0h20v20H0z" />
+        <path
+          fill="#fff"
+          d="M3.5 6.536v6.928h7.075L17.5 6.536zm1.905 1.29h.002a3.7 3.7 0 0 1 1.561.37l-.478.833c-.488-.236-.732-.257-1.01-.273-.412-.023-.62.126-.624.285-.002.194.392.37.763.49.56.178 1.276.417 1.386 1.108l1.028-2.716h1.193l1.204 3.251-.005-3.251h1.383c1.317 0 1.937.446 1.937 1.47 0 .917-.636 1.467-1.714 1.467h-.444l-.007 1.221-2.091-.002-.146-.53c-.217.072-.46.111-.718.111a2.3 2.3 0 0 1-.738-.116l-.208.535-1.167.002.053-.269-.053.044c-.31.25-.704.367-1.187.376H5.2a2.95 2.95 0 0 1-1.504-.392l.426-.845c.46.273.75.332 1.14.326.202-.005.348-.042.443-.14a.32.32 0 0 0 .092-.216c.004-.22-.31-.321-.69-.44-.31-.096-.664-.228-.938-.43-.325-.237-.483-.538-.473-.962.002-.3.12-.588.33-.802.303-.314.79-.504 1.379-.504zm6.18.973V9.91h.305c.403 0 .727-.134.727-.563 0-.414-.324-.55-.727-.55zm-2.968.449-.435 1.376a1.292 1.292 0 0 0 .872.004l-.428-1.383z"
+        />
+        <defs>
+          <linearGradient
+            id="a"
+            x1={10}
+            x2={10}
+            y1={0}
+            y2={20}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#0AE" />
+            <stop offset={1} stopColor="#05A" />
+          </linearGradient>
+        </defs>
+      </svg>
+    )
+  }
+)
+Sap.displayName = "Sap"
+export default Sap
diff --git a/packages/design-system/icons/src/components/scan-text.tsx b/packages/design-system/icons/src/components/scan-text.tsx
new file mode 100644
index 0000000000..dfa40411f6
--- /dev/null
+++ b/packages/design-system/icons/src/components/scan-text.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const ScanText = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 5.055V3.722c0-.982.796-1.778 1.778-1.778H5.5M9.5 1.944h1.778c.982 0 1.778.796 1.778 1.778v1.333M13.056 9.944v1.334c0 .982-.796 1.777-1.778 1.777H9.5M5.5 13.055H3.722a1.777 1.777 0 0 1-1.778-1.777V9.944M10.389 7.5H4.61M10.389 5.056H4.61M8.611 9.944h-4"
+        />
+      </svg>
+    )
+  }
+)
+ScanText.displayName = "ScanText"
+export default ScanText
diff --git a/packages/design-system/icons/src/components/scan.tsx b/packages/design-system/icons/src/components/scan.tsx
new file mode 100644
index 0000000000..65172ce025
--- /dev/null
+++ b/packages/design-system/icons/src/components/scan.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Scan = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 5.055V3.722c0-.982.796-1.778 1.778-1.778H5.5M9.5 1.944h1.778c.982 0 1.778.796 1.778 1.778v1.333M13.056 9.944v1.334c0 .982-.796 1.777-1.778 1.777H9.5M5.5 13.055H3.722a1.777 1.777 0 0 1-1.778-1.777V9.944M13.944 7.5H1.056"
+        />
+      </svg>
+    )
+  }
+)
+Scan.displayName = "Scan"
+export default Scan
diff --git a/packages/design-system/icons/src/components/slack.tsx b/packages/design-system/icons/src/components/slack.tsx
index dd9d8c1a43..9afb2eedf9 100644
--- a/packages/design-system/icons/src/components/slack.tsx
+++ b/packages/design-system/icons/src/components/slack.tsx
@@ -1,32 +1,47 @@
 import * as React from "react"
 import type { IconProps } from "../types"
-const Slack = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
-  (props, ref) => {
+const Slack = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
     return (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={15}
-        height={15}
+        width={20}
+        height={20}
         fill="none"
         ref={ref}
         {...props}
       >
+        <path fill="#F4F4F5" d="M0 0h20v20H0z" />
+        <path fill="url(#a)" fillOpacity={0.2} d="M0 0h20v20H0z" />
         <path
           fill="#E01E5A"
-          d="M3.573 9.309a1.41 1.41 0 0 1-1.412 1.412A1.41 1.41 0 0 1 .749 9.309c0-.78.631-1.412 1.412-1.412h1.412zm.706 0c0-.78.631-1.412 1.412-1.412s1.412.631 1.412 1.412v3.53a1.41 1.41 0 0 1-1.412 1.412 1.41 1.41 0 0 1-1.412-1.412z"
+          d="M6.51 11.608a1.254 1.254 0 1 1-2.51 0c0-.694.561-1.255 1.255-1.255H6.51zm.628 0a1.254 1.254 0 1 1 2.51 0v3.137a1.254 1.254 0 1 1-2.51 0z"
         />
         <path
           fill="#36C5F0"
-          d="M5.693 3.568c-.78 0-1.41-.63-1.41-1.41S4.914.75 5.694.75s1.41.63 1.41 1.41v1.41zm0 .716c.78 0 1.41.63 1.41 1.41s-.63 1.409-1.41 1.409H2.16c-.78 0-1.41-.63-1.41-1.41s.63-1.41 1.41-1.41z"
+          d="M8.394 6.506a1.252 1.252 0 1 1 0-2.506c.693 0 1.253.56 1.253 1.253v1.253zm0 .635a1.252 1.252 0 1 1 0 2.506H5.253a1.252 1.252 0 1 1 0-2.506z"
         />
         <path
           fill="#2EB67D"
-          d="M11.427 5.693c0-.78.631-1.41 1.412-1.41a1.41 1.41 0 1 1 0 2.82h-1.412zm-.706 0c0 .78-.631 1.41-1.412 1.41a1.41 1.41 0 0 1-1.412-1.41V2.16c0-.78.631-1.41 1.412-1.41s1.412.63 1.412 1.41z"
+          d="M13.49 8.395c0-.693.562-1.253 1.256-1.253a1.253 1.253 0 1 1 0 2.505H13.49zm-.627 0c0 .693-.56 1.252-1.255 1.252s-1.255-.56-1.255-1.252V5.253c0-.693.561-1.253 1.255-1.253s1.255.56 1.255 1.253z"
         />
         <path
           fill="#ECB22E"
-          d="M9.307 11.427c.78 0 1.41.631 1.41 1.412a1.41 1.41 0 1 1-2.82 0v-1.412zm0-.706a1.41 1.41 0 0 1-1.41-1.412c0-.78.63-1.412 1.41-1.412h3.534c.78 0 1.41.631 1.41 1.412s-.63 1.412-1.41 1.412z"
+          d="M11.606 13.49c.693 0 1.253.561 1.253 1.255a1.253 1.253 0 1 1-2.505 0V13.49zm0-.627c-.692 0-1.252-.561-1.252-1.255s.56-1.255 1.252-1.255h3.142c.693 0 1.252.56 1.252 1.255s-.56 1.255-1.252 1.255z"
         />
+        <defs>
+          <linearGradient
+            id="a"
+            x1={10}
+            x2={10}
+            y1={0}
+            y2={20}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#fff" />
+            <stop offset={1} stopColor="#fff" stopOpacity={0} />
+          </linearGradient>
+        </defs>
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/square-dashed-cursor.tsx b/packages/design-system/icons/src/components/square-dashed-cursor.tsx
new file mode 100644
index 0000000000..883297aeed
--- /dev/null
+++ b/packages/design-system/icons/src/components/square-dashed-cursor.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const SquareDashedCursor = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.944 5.055V3.722c0-.982.796-1.778 1.778-1.778H5.5M9.5 1.944h1.778c.982 0 1.778.796 1.778 1.778v1.333M5.5 13.055H3.722a1.777 1.777 0 0 1-1.777-1.777V9.944M7.664 7.296l6.092 2.226a.287.287 0 0 1-.01.543l-2.789.892-.892 2.789a.287.287 0 0 1-.543.01L7.296 7.664a.287.287 0 0 1 .368-.368"
+        />
+      </svg>
+    )
+  }
+)
+SquareDashedCursor.displayName = "SquareDashedCursor"
+export default SquareDashedCursor
diff --git a/packages/design-system/icons/src/components/square-two-stack-mini.tsx b/packages/design-system/icons/src/components/square-two-stack-mini.tsx
index aabada71fd..afc1c3618a 100644
--- a/packages/design-system/icons/src/components/square-two-stack-mini.tsx
+++ b/packages/design-system/icons/src/components/square-two-stack-mini.tsx
@@ -18,8 +18,8 @@ const SquareTwoStackMini = React.forwardRef<SVGSVGElement, IconProps>(
           strokeWidth={1.5}
           clipPath="url(#a)"
         >
-          <path d="M12.167 4.166H5.944c-.981 0-1.777.796-1.777 1.778v6.222c0 .982.796 1.778 1.777 1.778h6.223c.982 0 1.777-.796 1.777-1.778V5.944c0-.982-.796-1.778-1.777-1.778" />
-          <path d="M1.99 10.165 1.075 4.01a1.78 1.78 0 0 1 1.497-2.02l6.155-.914a1.78 1.78 0 0 1 1.909 1.091" />
+          <path d="M12.386 4.5H7.614c-.753 0-1.364.773-1.364 1.727v6.046c0 .954.61 1.727 1.364 1.727h4.772c.754 0 1.364-.773 1.364-1.727V6.227c0-.954-.61-1.727-1.364-1.727" />
+          <path d="M8.633 2.025C8.42 1.421 7.943 1 7.386 1H2.614C1.86 1 1.25 1.773 1.25 2.727v6.046c0 .954.61 1.727 1.364 1.727h1.039" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/square-two-stack.tsx b/packages/design-system/icons/src/components/square-two-stack.tsx
index 05b469ea7e..10f9534a37 100644
--- a/packages/design-system/icons/src/components/square-two-stack.tsx
+++ b/packages/design-system/icons/src/components/square-two-stack.tsx
@@ -18,8 +18,8 @@ const SquareTwoStack = React.forwardRef<SVGSVGElement, IconProps>(
           strokeWidth={1.5}
           clipPath="url(#a)"
         >
-          <path d="M12.167 4.167H5.944c-.981 0-1.777.796-1.777 1.777v6.223c0 .982.796 1.777 1.777 1.777h6.223c.982 0 1.777-.796 1.777-1.777V5.944c0-.981-.796-1.777-1.777-1.777" />
-          <path d="M1.99 10.165 1.075 4.01a1.78 1.78 0 0 1 1.497-2.02l6.155-.914a1.78 1.78 0 0 1 1.909 1.092" />
+          <path d="M12.386 4.5H7.614c-.753 0-1.364.773-1.364 1.727v6.046c0 .954.61 1.727 1.364 1.727h4.772c.754 0 1.364-.773 1.364-1.727V6.227c0-.954-.61-1.727-1.364-1.727" />
+          <path d="M8.633 2.025C8.42 1.421 7.943 1 7.386 1H2.614C1.86 1 1.25 1.773 1.25 2.727v6.046c0 .954.61 1.727 1.364 1.727h1.039" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/stop-circle-solid.tsx b/packages/design-system/icons/src/components/stop-circle-solid.tsx
new file mode 100644
index 0000000000..0b2d3589f6
--- /dev/null
+++ b/packages/design-system/icons/src/components/stop-circle-solid.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const StopCircleSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          fillRule="evenodd"
+          d="M7.5.389c3.92 0 7.111 3.19 7.111 7.111s-3.19 7.111-7.111 7.111S.388 11.421.388 7.5 3.578.389 7.5.389M5.678 4.5c-.65 0-1.178.528-1.178 1.179V9.32c0 .651.528 1.179 1.178 1.179h3.643c.65 0 1.179-.528 1.179-1.179V5.68c0-.651-.528-1.179-1.179-1.179z"
+          clipRule="evenodd"
+        />
+      </svg>
+    )
+  }
+)
+StopCircleSolid.displayName = "StopCircleSolid"
+export default StopCircleSolid
diff --git a/packages/design-system/icons/src/components/svelte.tsx b/packages/design-system/icons/src/components/svelte.tsx
new file mode 100644
index 0000000000..a74db41f55
--- /dev/null
+++ b/packages/design-system/icons/src/components/svelte.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Svelte = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#FF3E00"
+          d="M12.39 2.534C11.145.738 8.662.212 6.877 1.344L3.73 3.359a3.58 3.58 0 0 0-1.624 2.414 3.75 3.75 0 0 0 .377 2.437c-.275.412-.458.87-.538 1.35a3.85 3.85 0 0 0 .652 2.906c1.259 1.796 3.73 2.322 5.515 1.19l3.146-2.002a3.58 3.58 0 0 0 1.625-2.414 3.75 3.75 0 0 0-.378-2.437c.275-.412.458-.87.538-1.35a3.77 3.77 0 0 0-.652-2.918"
+        />
+        <path
+          fill="#fff"
+          d="M6.567 12.637a2.49 2.49 0 0 1-2.677-.995 2.32 2.32 0 0 1-.4-1.75c.023-.104.046-.195.068-.298l.058-.183.16.114q.567.412 1.235.618l.115.034-.012.114a.77.77 0 0 0 .126.47.757.757 0 0 0 1.007.228l3.135-2.002a.65.65 0 0 0 .297-.434.7.7 0 0 0-.114-.527.75.75 0 0 0-.813-.297c-.068.023-.137.046-.194.08l-1.201.766a2.1 2.1 0 0 1-.641.275 2.49 2.49 0 0 1-2.677-.995 2.3 2.3 0 0 1-.39-1.75c.104-.596.47-1.133.985-1.454L7.78 2.65a2.5 2.5 0 0 1 .64-.286 2.49 2.49 0 0 1 2.678.995c.366.504.503 1.133.4 1.75a3 3 0 0 1-.08.298l-.057.183-.16-.114a4.2 4.2 0 0 0-1.236-.618l-.114-.034.011-.115a.77.77 0 0 0-.126-.469.75.75 0 0 0-.812-.297c-.069.023-.137.046-.194.08L5.595 6.024a.65.65 0 0 0-.298.435.7.7 0 0 0 .115.526.75.75 0 0 0 .812.298 1 1 0 0 0 .195-.08l1.2-.767a2.5 2.5 0 0 1 .642-.286 2.49 2.49 0 0 1 2.677.995c.366.504.503 1.133.4 1.75a2.17 2.17 0 0 1-.984 1.454L7.208 12.35a2.5 2.5 0 0 1-.64.286"
+        />
+      </svg>
+    )
+  }
+)
+Svelte.displayName = "Svelte"
+export default Svelte
diff --git a/packages/design-system/icons/src/components/table-pen.tsx b/packages/design-system/icons/src/components/table-pen.tsx
new file mode 100644
index 0000000000..f914262006
--- /dev/null
+++ b/packages/design-system/icons/src/components/table-pen.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TablePen = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M5.5 1.944v11.111M13.056 5.5H1.944M13.056 6.238V3.722a1.78 1.78 0 0 0-1.778-1.778H3.722c-.982 0-1.778.8-1.778 1.778v7.556a1.78 1.78 0 0 0 1.778 1.777h2.525M11.085 13.448l2.81-2.81a.89.89 0 0 0 0-1.257l-.52-.52a.89.89 0 0 0-1.258 0l-2.81 2.81-.707 2.485z"
+        />
+      </svg>
+    )
+  }
+)
+TablePen.displayName = "TablePen"
+export default TablePen
diff --git a/packages/design-system/icons/src/components/tablet.tsx b/packages/design-system/icons/src/components/tablet.tsx
new file mode 100644
index 0000000000..4d066245b9
--- /dev/null
+++ b/packages/design-system/icons/src/components/tablet.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Tablet = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.278 1.056H3.722c-.982 0-1.778.796-1.778 1.777v9.334c0 .982.796 1.778 1.778 1.778h7.556c.982 0 1.778-.796 1.778-1.778V2.833c0-.981-.796-1.777-1.778-1.777M6.389 3.278H8.61"
+        />
+      </svg>
+    )
+  }
+)
+Tablet.displayName = "Tablet"
+export default Tablet
diff --git a/packages/design-system/icons/src/components/tanstack.tsx b/packages/design-system/icons/src/components/tanstack.tsx
new file mode 100644
index 0000000000..2e7811de99
--- /dev/null
+++ b/packages/design-system/icons/src/components/tanstack.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Tanstack = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g clipPath="url(#a)">
+          <path
+            fill="#000"
+            d="M6.981.773c.178-.023.366-.007.546-.007.664 0 1.317.103 1.953.299.812.25 1.568.649 2.235 1.174a6.7 6.7 0 0 1 1.93 2.435c.814 1.772.808 3.92-.026 5.685-.539 1.141-1.403 2.097-2.45 2.793a6.64 6.64 0 0 1-2.868 1.04c-1.293.156-2.691-.073-3.854-.669C2.265 12.404.781 10.152.751 7.683c-.005-.475.002-.954.096-1.425a6.9 6.9 0 0 1 .823-2.183 6.7 6.7 0 0 1 1.668-1.89A6.9 6.9 0 0 1 6.013.919c.235-.053.47-.083.706-.112l.075-.009q.093-.011.187-.024M4.723 11.994c-.3.033-.617.087-.875.256.058.014.124 0 .185 0 .146 0 .292-.006.438 0 .364.017.743.075 1.094.171.45.124.846.366 1.28.53.457.173.912.226 1.397.226.245 0 .487 0 .724-.067-.124-.066-.3-.053-.438-.08a6 6 0 0 1-.875-.235 7 7 0 0 1-.615-.263l-.13-.06a8 8 0 0 0-.568-.248 3.56 3.56 0 0 0-1.617-.23m.455-1.278c-.596 0-1.198.104-1.734.375q-.195.099-.37.23c-.036.026-.1.06-.113.106s.035.085.062.115c.134-.072.261-.147.404-.201.923-.351 2.042-.278 2.963.044.46.16.883.4 1.33.588.5.21 1.012.347 1.55.417.633.082 1.356.015 1.935-.27.204-.101.487-.254.573-.477-.107.01-.202.055-.303.086q-.24.076-.489.126a4.6 4.6 0 0 1-1.717.033c-.53-.096-1.024-.288-1.515-.49l-.062-.027-.126-.052-.062-.026c-.251-.103-.503-.206-.76-.296a4.8 4.8 0 0 0-1.566-.281m1.044-9.15c-.714.158-1.354.465-1.97.853-.358.224-.7.455-1.01.744-.461.43-.814.953-1.121 1.5a5.6 5.6 0 0 0-.618 1.854A5.9 5.9 0 0 0 1.5 8.422c.138.781.4 1.514.815 2.192.139-.065.238-.213.353-.313.233-.201.478-.388.741-.55.097-.06.197-.106.303-.148.04-.016.105-.031.124-.075.03-.07-.025-.19-.035-.263a4 4 0 0 1-.038-.623c.015-.606.128-1.22.344-1.788.162-.427.41-.815.704-1.163.1-.118.206-.228.315-.338.065-.064.145-.12.186-.202-.212 0-.423.061-.623.123a3.8 3.8 0 0 0-1.213.61c-.163.126-.283.293-.438.427-.047.041-.132.096-.198.065-.099-.047-.083-.242-.095-.331-.043-.345.087-.78.253-1.08.266-.479.759-.888 1.337-.874.25.006.468.093.707.15-.06-.086-.141-.15-.219-.22a3 3 0 0 0-.623-.45c-.091-.048-.19-.077-.286-.112-.048-.018-.11-.042-.128-.096-.033-.1.146-.192.212-.234.256-.163.569-.297.876-.305.48-.011.95.255 1.147.708.07.16.09.328.104.498l.002.032.004.048v.016l.003.032.003.032c.15-.123.256-.304.404-.436.344-.307.815-.444 1.262-.306.405.126.756.405.962.776.054.097.205.334.096.43-.085.076-.193.017-.283-.014a2 2 0 0 0-.21-.053l-.038-.007-.038-.008a2.2 2.2 0 0 0-.775 0c-.158.027-.313.084-.471.107v.034c.432.003.85.25 1.063.624.088.154.132.332.166.505.042.215.012.449-.046.658-.02.07-.056.19-.14.205-.059.012-.11-.047-.143-.087a2.6 2.6 0 0 0-.277-.294 11 11 0 0 0-.825-.64c-.15-.108-.315-.248-.489-.314.05.118.097.227.113.354.05.376-.108.73-.344 1.012-.072.086-.15.173-.24.24-.038.028-.085.064-.135.056-.156-.024-.174-.26-.198-.38a2.6 2.6 0 0 1 .064-1.214c-.1.05-.173.162-.236.253-.138.2-.258.412-.344.64-.343.91-.34 1.975.105 2.85.05.098.124.084.222.084h.089c.088-.001.177-.002.265.01.045.006.108 0 .144.034.043.04.02.11.01.159a2 2 0 0 0-.036.404c.184-.028.235-.324.3-.472.074-.167.15-.335.218-.506.034-.083.079-.177.067-.27-.013-.104-.089-.214-.141-.303-.1-.168-.212-.341-.285-.523-.059-.145-.004-.326.16-.378.091-.028.188.028.247.093.124.138.205.343.295.505l.702 1.264.18.32c.024.042.048.106.097.124.044.016.103-.007.146-.015q.168-.036.337-.067c.135-.025.34-.02.438-.126a1.3 1.3 0 0 0-.455-.032c-.089.006-.187.038-.269-.014-.122-.077-.202-.256-.277-.375-.183-.295-.356-.594-.532-.894l-.028-.048-.056-.095-.083-.144c-.021-.037-.053-.086-.023-.127.032-.043.1-.046.163-.046h.012q.038 0 .066-.002c.25-.033.505-.06.758-.06-.02-.069-.076-.146-.058-.22.04-.164.276-.215.386-.097.073.079.116.187.164.283.063.126.135.247.203.37.119.217.248.427.37.641l.031.053.016.027c.052.087.105.176.134.275-.424-.02-.742-.511-.926-.844-.015.054.009.101.028.152q.059.159.147.304c.086.137.184.279.313.379.23.177.532.178.808.159.177-.012.398-.093.572-.038.174.054.244.246.141.393-.077.11-.18.152-.309.169.09.195.21.376.296.573.036.083.073.21.16.252.057.03.139.002.2.001-.061-.164-.178-.304-.235-.472.174.008.343.099.505.157.32.114.635.239.95.365l.144.058q.195.076.388.16c.046.02.111.069.163.039.042-.024.069-.082.095-.121a5.9 5.9 0 0 0 .784-1.805 6.05 6.05 0 0 0-.954-4.94 6.2 6.2 0 0 0-1.418-1.392c-1.351-.967-3.123-1.354-4.748-.995m2.761 8.385a9 9 0 0 1-1.094.225c.048.165.166.324.252.472.034.057.07.134.136.159.074.027.164-.018.235-.04-.033-.09-.088-.17-.133-.254-.018-.034-.047-.075-.032-.116.03-.077.149-.073.215-.086.175-.036.347-.08.522-.115.064-.013.154-.048.219-.026.048.016.077.056.105.098l.012.018a.4.4 0 0 0 .055.069c.07.064.176.073.266.09-.055-.122-.146-.23-.204-.353-.034-.072-.062-.178-.136-.219-.102-.057-.314.05-.418.078m-2.256-.82a1.36 1.36 0 0 1-.185.573c.117.015.238.02.353.049.087.021.167.062.253.086-.046-.126-.131-.238-.198-.354-.066-.118-.126-.26-.223-.354"
+          />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+Tanstack.displayName = "Tanstack"
+export default Tanstack
diff --git a/packages/design-system/icons/src/components/telescope-solid.tsx b/packages/design-system/icons/src/components/telescope-solid.tsx
new file mode 100644
index 0000000000..2b784be684
--- /dev/null
+++ b/packages/design-system/icons/src/components/telescope-solid.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TelescopeSolid = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="m14.48 6.027-1.99-4.623a1.55 1.55 0 0 0-.853-.831 1.54 1.54 0 0 0-1.19.016l-1.166.5a1.556 1.556 0 0 0-.841 1.958l-7.035 3.54-.001-.005a.667.667 0 0 0-1.226.527l1.698 3.95a.668.668 0 0 0 1.226-.526l-.007-.017 2.39-.865a1.76 1.76 0 0 1-.207-.817 1.778 1.778 0 0 1 3.513-.38l1.713-.62c.27.537.81.863 1.383.863.205 0 .412-.04.612-.126l1.164-.5a1.56 1.56 0 0 0 .816-2.044m-1.343.819-1.164.5a.223.223 0 0 1-.293-.116L9.694 2.607a.223.223 0 0 1 .115-.293l1.166-.5a.22.22 0 0 1 .29.116l1.99 4.623a.223.223 0 0 1-.117.293"
+        />
+        <path
+          fill={color}
+          d="m10.525 13.616-1.85-3.272c.371-.397.603-.926.603-1.51A2.225 2.225 0 0 0 7.056 6.61a2.225 2.225 0 0 0-2.223 2.222c0 .585.232 1.114.603 1.511l-1.85 3.272a.667.667 0 0 0 1.161.657l1.847-3.267a2.2 2.2 0 0 0 .923 0l1.847 3.267a.668.668 0 0 0 1.161-.657M6.167 8.833a.89.89 0 1 1 1.78.002.89.89 0 0 1-1.78-.002"
+        />
+      </svg>
+    )
+  }
+)
+TelescopeSolid.displayName = "TelescopeSolid"
+export default TelescopeSolid
diff --git a/packages/design-system/icons/src/components/telescope.tsx b/packages/design-system/icons/src/components/telescope.tsx
new file mode 100644
index 0000000000..86ff339860
--- /dev/null
+++ b/packages/design-system/icons/src/components/telescope.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Telescope = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M2.49 10.796.79 6.846M10.71 1.201l-1.165.501A.89.89 0 0 0 9.08 2.87l1.988 4.623a.89.89 0 0 0 1.168.466l1.164-.501a.89.89 0 0 0 .466-1.168l-1.988-4.623A.89.89 0 0 0 10.71 1.2M5.503 8.936l-3.3 1.194M10.855 6.999l-2.542.92M1.073 7.5l8.22-4.136M6.29 10.188l-2.123 3.757M7.82 10.188l2.125 3.757M7.056 10.389a1.556 1.556 0 1 0 0-3.111 1.556 1.556 0 0 0 0 3.11"
+        />
+      </svg>
+    )
+  }
+)
+Telescope.displayName = "Telescope"
+export default Telescope
diff --git a/packages/design-system/icons/src/components/typography.tsx b/packages/design-system/icons/src/components/typography.tsx
new file mode 100644
index 0000000000..deb59e417b
--- /dev/null
+++ b/packages/design-system/icons/src/components/typography.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Typography = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M5.5 13.056h4M7.5 1.944v11.111M12.611 3.278l-.667-1.334H3.057l-.667 1.334"
+        />
+      </svg>
+    )
+  }
+)
+Typography.displayName = "Typography"
+export default Typography
diff --git a/packages/design-system/icons/src/components/unfold.tsx b/packages/design-system/icons/src/components/unfold.tsx
new file mode 100644
index 0000000000..74648d0066
--- /dev/null
+++ b/packages/design-system/icons/src/components/unfold.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Unfold = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m10 10.5 2 2 2-2M10 4.5l2-2 2 2M1 12h6M1 3h6M1 7.5h6"
+        />
+      </svg>
+    )
+  }
+)
+Unfold.displayName = "Unfold"
+export default Unfold
diff --git a/packages/design-system/icons/src/components/variable.tsx b/packages/design-system/icons/src/components/variable.tsx
new file mode 100644
index 0000000000..d340f5b6be
--- /dev/null
+++ b/packages/design-system/icons/src/components/variable.tsx
@@ -0,0 +1,39 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Variable = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M5.3 4.75c2.75 0 2.2 5.5 4.95 5.5"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M10.8 4.75c-2.75 0-3.3 5.5-6.6 5.5"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeWidth={1.5}
+          d="M2.5 13S1 11.007 1 7.504 2.5 2 2.5 2M12.5 2S14 3.993 14 7.496 12.5 13 12.5 13"
+        />
+      </svg>
+    )
+  }
+)
+Variable.displayName = "Variable"
+export default Variable
diff --git a/packages/design-system/icons/src/components/vite.tsx b/packages/design-system/icons/src/components/vite.tsx
new file mode 100644
index 0000000000..564235fa1d
--- /dev/null
+++ b/packages/design-system/icons/src/components/vite.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Vite = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g clipPath="url(#a)">
+          <path
+            fill="url(#b)"
+            d="M14.2 2.586 7.868 13.91a.344.344 0 0 1-.6.003L.809 2.587a.344.344 0 0 1 .36-.51l6.34 1.134q.06.01.123 0l6.207-1.132a.344.344 0 0 1 .363.507"
+          />
+          <path
+            fill="url(#c)"
+            d="m10.528.591-4.687.918a.17.17 0 0 0-.139.16l-.288 4.869a.172.172 0 0 0 .21.178l1.305-.302a.172.172 0 0 1 .208.203l-.388 1.898a.172.172 0 0 0 .219.2l.806-.246a.172.172 0 0 1 .218.2l-.616 2.982c-.038.187.21.288.313.128l.07-.107 3.819-7.622a.172.172 0 0 0-.187-.246l-1.343.26a.172.172 0 0 1-.198-.217l.877-3.04a.172.172 0 0 0-.199-.216"
+          />
+        </g>
+        <defs>
+          <linearGradient
+            id="b"
+            x1={0.651}
+            x2={8.533}
+            y1={1.673}
+            y2={12.378}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#41D1FF" />
+            <stop offset={1} stopColor="#BD34FE" />
+          </linearGradient>
+          <linearGradient
+            id="c"
+            x1={7.144}
+            x2={8.57}
+            y1={0.84}
+            y2={10.622}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#FFEA83" />
+            <stop offset={0.083} stopColor="#FFDD35" />
+            <stop offset={1} stopColor="#FFA800" />
+          </linearGradient>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+Vite.displayName = "Vite"
+export default Vite
diff --git a/packages/design-system/icons/src/components/window.tsx b/packages/design-system/icons/src/components/window.tsx
index 90b1e9d69c..7a458864a0 100644
--- a/packages/design-system/icons/src/components/window.tsx
+++ b/packages/design-system/icons/src/components/window.tsx
@@ -11,17 +11,17 @@ const Window = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g fill={color} clipPath="url(#a)">
-          <path d="M3.125 4.166a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25M5.209 4.166a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25" />
+        <g clipPath="url(#a)">
           <path
-            fillRule="evenodd"
-            d="M2.709.708A2.417 2.417 0 0 0 .292 3.125v7.083a2.417 2.417 0 0 0 2.417 2.417h4.885a.75.75 0 0 0 0-1.5H2.709a.917.917 0 0 1-.917-.917V6.375h10.583V7.48a.75.75 0 0 0 1.5 0V3.125A2.417 2.417 0 0 0 11.46.708zm9.666 4.167H1.792v-1.75c0-.506.41-.917.917-.917h8.75c.506 0 .916.41.916.917z"
-            clipRule="evenodd"
+            stroke={color}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M2.833 13.056h9.334c.982 0 1.777-.796 1.777-1.778V3.722c0-.982-.796-1.777-1.777-1.777H2.833c-.981 0-1.777.795-1.777 1.777v7.556c0 .982.796 1.778 1.777 1.778"
           />
           <path
-            fillRule="evenodd"
-            d="M9.11 7.434c-.78-.282-1.548.473-1.258 1.263l1.808 4.949c.32.88 1.575.854 1.86-.039l.607-1.897 1.898-.607c.891-.285.916-1.539.037-1.86l-4.95-1.808zm1.44 4.28-.908-2.488 2.488.908-.828.265a.75.75 0 0 0-.486.486z"
-            clipRule="evenodd"
+            fill={color}
+            d="M3.56 5.19a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M6.062 5.19a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5"
           />
         </g>
         <defs>
diff --git a/packages/design-system/icons/src/components/wrench.tsx b/packages/design-system/icons/src/components/wrench.tsx
new file mode 100644
index 0000000000..6edfab7731
--- /dev/null
+++ b/packages/design-system/icons/src/components/wrench.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Wrench = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M9.944 13.944v-2.35a5.55 5.55 0 0 0 3.112-4.983A5.55 5.55 0 0 0 9.5 1.432v4.512a.89.89 0 0 1-.889.889H6.39a.89.89 0 0 1-.889-.889V1.432a5.55 5.55 0 0 0-3.556 5.179 5.55 5.55 0 0 0 3.112 4.983v2.35"
+        />
+      </svg>
+    )
+  }
+)
+Wrench.displayName = "Wrench"
+export default Wrench