diff --git a/libs/@hashintel/ds-components/package.json b/libs/@hashintel/ds-components/package.json
index 95f1bdf61fd..48115bd1df2 100644
--- a/libs/@hashintel/ds-components/package.json
+++ b/libs/@hashintel/ds-components/package.json
@@ -90,7 +90,6 @@
     "@mantine/hooks": "8.3.5",
     "@playwright/test": "1.58.2",
     "@radix-ui/colors": "3.0.0",
-    "@svgr/rollup": "8.1.0",
     "@tanstack/react-virtual": "3.13.24",
     "@tsconfig/strictest": "^2.0.8",
     "@types/node": "22.18.13",
@@ -101,6 +100,7 @@
     "bumpp": "^10.3.2",
     "case-anything": "3.1.0",
     "colorjs.io": "0.6.1",
+    "esbuild-plugin-svgr": "3.1.1",
     "eslint": "9.39.4",
     "lorem-ipsum": "2.0.8",
     "lucide-react": "0.544.0",
diff --git a/libs/@hashintel/ds-components/src/components/Button/button.tsx b/libs/@hashintel/ds-components/src/components/Button/button.tsx
index 9973184cbfb..577c23eb2bf 100644
--- a/libs/@hashintel/ds-components/src/components/Button/button.tsx
+++ b/libs/@hashintel/ds-components/src/components/Button/button.tsx
@@ -65,10 +65,8 @@ type ButtonElementOnlyProps = {
   target?: never;
   download?: never;
   ref?: React.Ref<HTMLButtonElement>;
-} & RequireAtLeastOne<{
-  onClick: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
-  type: "submit" | "reset";
-}>;
+  onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
+};
 
 export type AnchorElementOnlyProps = {
   href: string;
diff --git a/libs/@hashintel/ds-components/src/components/Icon/icon.tsx b/libs/@hashintel/ds-components/src/components/Icon/icon.tsx
index 865fe57cf3b..e1aec2e3109 100644
--- a/libs/@hashintel/ds-components/src/components/Icon/icon.tsx
+++ b/libs/@hashintel/ds-components/src/components/Icon/icon.tsx
@@ -2,22 +2,24 @@
 import { cx } from "@hashintel/ds-helpers/css";
 import type { DataAttributes } from "../../util/dom";
 import ArrowDown from "./svgs/regular/arrow-down.svg";
-import ArrowDownLeftAndArrowUpRightToCenter from "./svgs/solid/arrow-down-left-and-arrow-up-right-to-center.svg";
+import ArrowDownLeftAndArrowUpRightToCenter from "./svgs/regular/arrow-down-left-and-arrow-up-right-to-center.svg";
+import ArrowDownWideShort from "./svgs/regular/arrow-down-wide-short.svg";
 import ArrowLeft from "./svgs/regular/arrow-left.svg";
 import ArrowPointer from "./svgs/regular/arrow-pointer.svg";
 import ArrowRight from "./svgs/regular/arrow-right.svg";
+import ArrowRightToLine from "./svgs/regular/arrow-right-to-line.svg";
 import ArrowRotateLeft from "./svgs/regular/arrow-rotate-left.svg";
 import ArrowUp from "./svgs/regular/arrow-up.svg";
 import ArrowUpRight from "./svgs/regular/arrow-up-right.svg";
-import ArrowUpRightAndArrowDownLeftFromCenter from "./svgs/solid/arrow-up-right-and-arrow-down-left-from-center.svg";
+import ArrowUpRightAndArrowDownLeftFromCenter from "./svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg";
 import ArrowUpRightFromSquare from "./svgs/regular/arrow-up-right-from-square.svg";
-import ArrowUpWideShort from "./svgs/light/arrow-up-wide-short.svg";
+import ArrowUpWideShort from "./svgs/regular/arrow-up-wide-short.svg";
 import ArrowsRotate from "./svgs/regular/arrows-rotate.svg";
 import Asterisk from "./svgs/regular/asterisk.svg";
 import At from "./svgs/regular/at.svg";
 import Barcode from "./svgs/regular/barcode.svg";
 import Bars from "./svgs/regular/bars.svg";
-import Bell from "./svgs/light/bell.svg";
+import Bell from "./svgs/regular/bell.svg";
 import Bolt from "./svgs/regular/bolt.svg";
 import BracketsCurly from "./svgs/regular/brackets-curly.svg";
 import BracketsSquare from "./svgs/regular/brackets-square.svg";
@@ -26,6 +28,7 @@ import Bullseye from "./svgs/light/bullseye.svg";
 import Calendar from "./svgs/regular/calendar.svg";
 import CalendarClock from "./svgs/regular/calendar-clock.svg";
 import CaretDown from "./svgs/solid/caret-down.svg";
+import ChartSimple from "./svgs/regular/chart-simple.svg";
 import ChartColumn from "./svgs/regular/chart-column.svg";
 import ChartLine from "./svgs/regular/chart-line.svg";
 import Check from "./svgs/regular/check.svg";
@@ -33,12 +36,13 @@ import ChevronDown from "./svgs/regular/chevron-down.svg";
 import ChevronLeft from "./svgs/regular/chevron-left.svg";
 import ChevronRight from "./svgs/regular/chevron-right.svg";
 import ChevronUp from "./svgs/regular/chevron-up.svg";
-import Circle from "./svgs/solid/circle.svg";
+import Circle from "./svgs/regular/circle.svg";
+import CircleSolid from "./svgs/solid/circle.svg";
 import CircleCheck from "./svgs/regular/circle-check.svg";
 import CircleEllipsis from "./svgs/regular/circle-ellipsis.svg";
-import CircleExclamation from "./svgs/solid/circle-exclamation.svg";
-import CircleInfo from "./svgs/solid/circle-info.svg";
-import CircleNodes from "./svgs/light/circle-nodes.svg";
+import CircleExclamation from "./svgs/regular/circle-exclamation.svg";
+import CircleInfo from "./svgs/regular/circle-info.svg";
+import CircleNodes from "./svgs/regular/circle-nodes.svg";
 import CircleOne from "./svgs/regular/circle-1.svg";
 import CirclePlus from "./svgs/regular/circle-plus.svg";
 import Clock from "./svgs/regular/clock.svg";
@@ -47,7 +51,7 @@ import Code from "./svgs/regular/code.svg";
 import Copy from "./svgs/regular/copy.svg";
 import Cube from "./svgs/regular/cube.svg";
 import Cubes from "./svgs/regular/cubes.svg";
-import DiagramNested from "./svgs/light/diagram-nested.svg";
+import DiagramNested from "./svgs/regular/diagram-nested.svg";
 import DiagramProject from "./svgs/regular/diagram-project.svg";
 import DiagramSubtask from "./svgs/regular/diagram-subtask.svg";
 import Download from "./svgs/regular/download.svg";
@@ -60,52 +64,57 @@ import Feather from "./svgs/regular/feather.svg";
 import File from "./svgs/regular/file.svg";
 import FileSpreadsheet from "./svgs/regular/file-spreadsheet.svg";
 import Flask from "./svgs/regular/flask.svg";
-import ForwardStep from "./svgs/solid/forward-step.svg";
+import ForwardStep from "./svgs/regular/forward-step.svg";
+import ForwardStepSolid from "./svgs/solid/forward-step.svg";
 import FunctionSymbol from "./svgs/regular/function.svg";
 import Gear from "./svgs/regular/gear.svg";
 import Hand from "./svgs/regular/hand.svg";
 import Image from "./svgs/regular/image.svg";
-import InfinityLoop from "./svgs/light/infinity.svg";
+import InfinityLoop from "./svgs/regular/infinity.svg";
 import InputPipe from "./svgs/regular/input-pipe.svg";
 import Lambda from "./svgs/regular/lambda.svg";
-import LayerGroup from "./svgs/regular/layer-group.svg";
+import Layer from "./svgs/regular/layer.svg";
 import LightbulbOn from "./svgs/regular/lightbulb-on.svg";
 import List from "./svgs/regular/list.svg";
 import ListTree from "./svgs/regular/list-tree.svg";
+import LockKeyhole from "./svgs/regular/lock-keyhole.svg";
 import MagnifyingGlass from "./svgs/regular/magnifying-glass.svg";
-import MagnifyingGlassMinus from "./svgs/light/magnifying-glass-minus.svg";
-import MagnifyingGlassPlus from "./svgs/light/magnifying-glass-plus.svg";
+import MagnifyingGlassMinus from "./svgs/regular/magnifying-glass-minus.svg";
+import MagnifyingGlassPlus from "./svgs/regular/magnifying-glass-plus.svg";
 import MemoCircleCheck from "./svgs/regular/memo-circle-check.svg";
 import Microscope from "./svgs/regular/microscope.svg";
 import Minus from "./svgs/solid/minus.svg";
 import OneHundred from "./svgs/regular/100.svg";
 import Pause from "./svgs/regular/pause.svg";
+import PauseSolid from "./svgs/solid/pause.svg";
 import Pen from "./svgs/regular/pen.svg";
-import PenToSquare from "./svgs/solid/pen-to-square.svg";
+import PenToSquare from "./svgs/regular/pen-to-square.svg";
 import PersonRunning from "./svgs/regular/person-running.svg";
-import Play from "./svgs/solid/play.svg";
+import Play from "./svgs/regular/play.svg";
+import PlaySolid from "./svgs/solid/play.svg";
 import Plug from "./svgs/regular/plug.svg";
 import Plus from "./svgs/regular/plus.svg";
-import RightToLine from "./svgs/regular/right-to-line.svg";
 import Rotate from "./svgs/regular/rotate.svg";
 import Ruler from "./svgs/regular/ruler.svg";
 import Scribble from "./svgs/regular/scribble.svg";
 import Shapes from "./svgs/regular/shapes.svg";
 import Sidebar from "./svgs/regular/sidebar.svg";
 import Sliders from "./svgs/regular/sliders.svg";
-import Sparkles from "./svgs/light/sparkles.svg";
+import Sparkles from "./svgs/regular/sparkles.svg";
 import Square from "./svgs/regular/square.svg";
 import SquareCheck from "./svgs/regular/square-check.svg";
 import SquarePlus from "./svgs/regular/square-plus.svg";
 import Star from "./svgs/regular/star.svg";
+import StarSolid from "./svgs/solid/star.svg";
 import Stop from "./svgs/solid/stop.svg";
 import Table from "./svgs/light/table.svg";
-import Terminal from "./svgs/light/terminal.svg";
+import Terminal from "./svgs/regular/terminal.svg";
 import Text from "./svgs/regular/text.svg";
-import ThoughtBubble from "./svgs/light/thought-bubble.svg";
-import ThreeCircles from "./svgs/solid/circles-overlap-3.svg";
+import ThoughtBubble from "./svgs/regular/thought-bubble.svg";
+import ThreeCircles from "./svgs/regular/circles-overlap-3.svg";
 import TrashCan from "./svgs/regular/trash-can.svg";
-import TriangleExclamation from "./svgs/solid/triangle-exclamation.svg";
+import TriangleExclamation from "./svgs/regular/triangle-exclamation.svg";
+import UnlockKeyhole from "./svgs/regular/unlock-keyhole.svg";
 import UserPlus from "./svgs/regular/user-plus.svg";
 import WandMagicSparkles from "./svgs/regular/wand-magic-sparkles.svg";
 import Xmark from "./svgs/regular/xmark.svg";
@@ -131,7 +140,8 @@ const IconMap = {
   calendar: Calendar,
   calendarClock: CalendarClock,
   caretDown: CaretDown,
-  chartColumn: ChartColumn,
+  chartBar: ChartColumn,
+  chartBarSimple: ChartSimple,
   chartLine: ChartLine,
   check: Check,
   chevronDown: ChevronDown,
@@ -139,9 +149,9 @@ const IconMap = {
   chevronRight: ChevronRight,
   chevronUp: ChevronUp,
   circle: Circle,
+  circleFilled: CircleSolid,
   circleCheck: CircleCheck,
   circleEllipsis: CircleEllipsis,
-  circleNodes: CircleNodes,
   circleOne: CircleOne,
   circlePlus: CirclePlus,
   clock: Clock,
@@ -157,6 +167,7 @@ const IconMap = {
   diagramNested: DiagramNested,
   diagramProject: DiagramProject,
   diagramSubtask: DiagramSubtask,
+  diagramNodes: CircleNodes,
   download: Download,
   edit: PenToSquare,
   ellipsis: Ellipsis,
@@ -179,23 +190,27 @@ const IconMap = {
   info: CircleInfo,
   inputPipe: InputPipe,
   lambda: Lambda,
-  layerGroup: LayerGroup,
+  layer: Layer,
   lightbulbOn: LightbulbOn,
   lightning: Bolt,
   list: List,
   listTree: ListTree,
+  lockOpen: UnlockKeyhole,
+  lockClosed: LockKeyhole,
   magic: WandMagicSparkles,
   memoCircleCheck: MemoCircleCheck,
   microscope: Microscope,
   oneHundred: OneHundred,
   pause: Pause,
+  pauseFilled: PauseSolid,
   pencil: Pen,
   personRunning: PersonRunning,
   play: Play,
+  playFilled: PlaySolid,
   plug: Plug,
   plus: Plus,
   refresh: ArrowsRotate,
-  rightToLine: RightToLine,
+  rightToLine: ArrowRightToLine,
   rotate: Rotate,
   rotateLeft: ArrowRotateLeft,
   ruler: Ruler,
@@ -204,14 +219,19 @@ const IconMap = {
   shapes: Shapes,
   sidebar: Sidebar,
   skipForward: ForwardStep,
+  skipForwardFilled: ForwardStepSolid,
   sliders: Sliders,
+  sortDown: ArrowDownWideShort,
   sortUp: ArrowUpWideShort,
   sparkles: Sparkles,
   square: Square,
+  squareFilled: Stop,
   squareCheck: SquareCheck,
   squarePlus: SquarePlus,
   star: Star,
-  stop: Stop,
+  starFilled: StarSolid,
+  stop: Square,
+  stopFilled: Stop,
   table: Table,
   terminal: Terminal,
   text: Text,
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/arrow-up-wide-short.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/arrow-up-wide-short.svg
deleted file mode 100644
index e48599d6820..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/arrow-up-wide-short.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M171.3 100.7C165.1 94.5 154.9 94.5 148.7 100.7L52.7 196.7C46.5 202.9 46.5 213.1 52.7 219.3C58.9 225.5 69.1 225.5 75.3 219.3L144 150.6L144 528C144 536.8 151.2 544 160 544C168.8 544 176 536.8 176 528L176 150.6L244.7 219.3C250.9 225.5 261.1 225.5 267.3 219.3C273.5 213.1 273.5 202.9 267.3 196.7L171.3 100.7zM336 544L400 544C408.8 544 416 536.8 416 528C416 519.2 408.8 512 400 512L336 512C327.2 512 320 519.2 320 528C320 536.8 327.2 544 336 544zM336 408L464 408C472.8 408 480 400.8 480 392C480 383.2 472.8 376 464 376L336 376C327.2 376 320 383.2 320 392C320 400.8 327.2 408 336 408zM336 264L528 264C536.8 264 544 256.8 544 248C544 239.2 536.8 232 528 232L336 232C327.2 232 320 239.2 320 248C320 256.8 327.2 264 336 264zM336 128L592 128C600.8 128 608 120.8 608 112C608 103.2 600.8 96 592 96L336 96C327.2 96 320 103.2 320 112C320 120.8 327.2 128 336 128z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/bell.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/bell.svg
deleted file mode 100644
index a1ba389a291..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/bell.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 64C311.2 64 304 71.2 304 80L304 96.8C223.1 104.8 160 173 160 256L160 266.3C160 311.4 144.6 355.2 116.5 390.4L106.4 403C99.7 411.4 96 421.9 96 432.6C96 458.8 117.2 480 143.4 480L496.6 480C522.8 480 544 458.8 544 432.6C544 421.8 540.3 411.4 533.6 403L523.5 390.4C495.3 355.2 480 311.4 480 266.3L480 256C480 173 416.9 104.8 336 96.8L336 80C336 71.2 328.8 64 320 64zM320 128C390.7 128 448 185.3 448 256L448 266.3C448 318.7 465.8 369.5 498.6 410.4L508.6 423C510.8 425.7 512 429.1 512 432.6C512 441.1 505.1 448 496.6 448L143.4 448C134.9 448 128 441.1 128 432.6C128 429.1 129.2 425.7 131.4 423L141.5 410.4C174.2 369.5 192 318.7 192 266.3L192 256C192 185.3 249.3 128 320 128zM252.1 528C262 556 288.7 576 320 576C351.3 576 378 556 387.9 528L352 528C344.7 537.7 333.1 544 320 544C306.9 544 295.3 537.7 288 528L252.1 528z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/circle-nodes.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/circle-nodes.svg
deleted file mode 100644
index 4b75ca2eb4b..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/circle-nodes.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M440.2 185.7L440.2 185.7C447.2 189.7 455.4 192 464 192C466.6 192 469.2 191.8 471.6 191.4L471.6 191.4C494.5 187.7 512 167.9 512 144C512 117.5 490.5 96 464 96C437.5 96 416 117.5 416 144C416 144.7 416 145.3 416 146L416 146C416.5 157.4 420.9 167.7 427.9 175.7L427.9 175.7C431.4 179.7 435.5 183.1 440.1 185.7zM434.3 218.3C419.1 212.2 406.1 201.5 397.2 188L222.7 257.7C223.5 262.3 224 267.1 224 272C224 286.4 220.2 299.9 213.5 311.6L351.5 432.4C364.5 422.5 380.7 416.4 398.2 416.1L434.2 218.4zM429.8 421.7C459.2 433.5 480 462.3 480 496C480 540.2 444.2 576 400 576C355.8 576 320 540.2 320 496C320 481.6 323.8 468.1 330.5 456.4L192.5 335.6C179 345.9 162.2 352 144 352C99.8 352 64 316.2 64 272C64 227.8 99.8 192 144 192C171.9 192 196.5 206.3 210.8 228L385.3 158.3C384.5 153.7 384 148.9 384 144C384 99.8 419.8 64 464 64C508.2 64 544 99.8 544 144C544 187.6 509.1 223.1 465.7 224L429.7 421.7zM183.8 298.8C184.5 297.8 185.1 296.8 185.7 295.7C189.7 288.7 192 280.6 192 271.9C192 245.4 170.5 223.9 144 223.9C117.5 223.9 96 245.4 96 271.9C96 298.4 117.5 319.9 144 319.9C152.5 319.9 160.6 317.7 167.5 313.7L167.5 313.7C174 310 179.6 304.9 183.8 298.7zM355.4 478.2C353.2 483.7 352 489.7 352 496C352 522.5 373.5 544 400 544C426.5 544 448 522.5 448 496C448 469.5 426.5 448 400 448C386 448 373.4 454 364.7 463.5C362 466.4 359.7 469.6 357.8 473.1C356.9 474.7 356.1 476.5 355.4 478.2L355.4 478.2z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/diagram-nested.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/diagram-nested.svg
deleted file mode 100644
index 34fdda93cc6..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/diagram-nested.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M240 128C248.8 128 256 135.2 256 144L256 240C256 248.8 248.8 256 240 256L144 256C135.2 256 128 248.8 128 240L128 144C128 135.2 135.2 128 144 128L240 128zM208 288L240 288C266.5 288 288 266.5 288 240L288 144C288 117.5 266.5 96 240 96L144 96C117.5 96 96 117.5 96 144L96 240C96 266.5 117.5 288 144 288L176 288L176 384C176 428.2 211.8 464 256 464L352 464L352 496C352 522.5 373.5 544 400 544L496 544C522.5 544 544 522.5 544 496L544 400C544 373.5 522.5 352 496 352L400 352C373.5 352 352 373.5 352 400L352 432L256 432C229.5 432 208 410.5 208 384L208 288zM384 432L384 400C384 391.2 391.2 384 400 384L496 384C504.8 384 512 391.2 512 400L512 496C512 504.8 504.8 512 496 512L400 512C391.2 512 384 504.8 384 496L384 432z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/infinity.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/infinity.svg
deleted file mode 100644
index 276c809690a..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/infinity.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M0 297.5C0 221.5 61.5 160 137.5 160C176.7 160 214.1 176.8 240.2 206.1L320 295.9L399.8 206.1C425.9 176.8 463.3 160 502.5 160C578.5 160 640 221.5 640 297.5L640 342.6C640 418.5 578.5 480.1 502.5 480.1C463.2 480.1 425.8 463.3 399.8 434L320 344.2L240.2 434C214.1 463.2 176.7 480 137.5 480C61.5 480 0 418.5 0 342.5L0 297.4zM298.6 320L216.3 227.4C196.3 204.9 167.6 192 137.5 192C79.2 192 32 239.2 32 297.5L32 342.6C32 400.8 79.2 448.1 137.5 448.1C167.6 448.1 196.3 435.2 216.3 412.7L298.6 320zM341.4 320L423.7 412.6C443.7 435.1 472.4 448 502.5 448C560.7 448 608 400.8 608 342.5L608 297.4C608 239.2 560.8 191.9 502.5 191.9C472.4 191.9 443.7 204.8 423.7 227.3L341.4 320z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-minus.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-minus.svg
deleted file mode 100644
index 74b9f9c6770..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-minus.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M272 96C369.2 96 448 174.8 448 272C448 369.2 369.2 448 272 448C174.8 448 96 369.2 96 272C96 174.8 174.8 96 272 96zM272 480C323.7 480 371 461.2 407.3 430L548.7 571.3C554.9 577.5 565.1 577.5 571.3 571.3C577.5 565.1 577.5 554.9 571.3 548.7L430 407.3C461.2 371 480 323.7 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM192 256C183.2 256 176 263.2 176 272C176 280.8 183.2 288 192 288L352 288C360.8 288 368 280.8 368 272C368 263.2 360.8 256 352 256L192 256z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-plus.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-plus.svg
deleted file mode 100644
index c0653aa469c..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/magnifying-glass-plus.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M272 96C369.2 96 448 174.8 448 272C448 369.2 369.2 448 272 448C174.8 448 96 369.2 96 272C96 174.8 174.8 96 272 96zM272 480C323.7 480 371 461.2 407.3 430L548.7 571.3C554.9 577.5 565.1 577.5 571.3 571.3C577.5 565.1 577.5 554.9 571.3 548.7L430 407.3C461.2 371 480 323.7 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM256 344C256 352.8 263.2 360 272 360C280.8 360 288 352.8 288 344L288 288L344 288C352.8 288 360 280.8 360 272C360 263.2 352.8 256 344 256L288 256L288 200C288 191.2 280.8 184 272 184C263.2 184 256 191.2 256 200L256 256L200 256C191.2 256 184 263.2 184 272C184 280.8 191.2 288 200 288L256 288L256 344z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/sparkles.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/sparkles.svg
deleted file mode 100644
index 0d139780f22..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/sparkles.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M512 48C520.8 48 528 55.2 528 64L528 112L576 112C584.8 112 592 119.2 592 128C592 136.8 584.8 144 576 144L528 144L528 192C528 200.8 520.8 208 512 208C503.2 208 496 200.8 496 192L496 144L448 144C439.2 144 432 136.8 432 128C432 119.2 439.2 112 448 112L496 112L496 64C496 55.2 503.2 48 512 48zM224 128C230.2 128 235.9 131.6 238.5 137.3L291.6 252.3L406.6 305.4C412.3 308 415.9 313.7 415.9 319.9C415.9 326.1 412.3 331.8 406.6 334.4L291.6 387.5L238.5 502.5C235.9 508.2 230.2 511.8 224 511.8C217.8 511.8 212.1 508.2 209.5 502.5L156.4 387.5L41.4 334.4C35.6 331.9 32 326.2 32 320C32 313.8 35.6 308.1 41.3 305.5L156.3 252.4L209.4 137.4C212 131.7 217.7 128.1 223.9 128.1zM224 182.2L182.9 271.1C181.3 274.6 178.5 277.3 175.1 278.9L86.2 320L175.1 361.1C178.6 362.7 181.3 365.5 182.9 368.9L224 457.8L265.1 368.9C266.7 365.5 269.5 362.7 272.9 361.1L361.8 320L272.9 278.9C269.4 277.3 266.7 274.5 265.1 271.1L224 182.2zM496 448L496 496L544 496C552.8 496 560 503.2 560 512C560 520.8 552.8 528 544 528L496 528L496 576C496 584.8 488.8 592 480 592C471.2 592 464 584.8 464 576L464 528L416 528C407.2 528 400 520.8 400 512C400 503.2 407.2 496 416 496L464 496L464 448C464 439.2 471.2 432 480 432C488.8 432 496 439.2 496 448z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/terminal.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/terminal.svg
deleted file mode 100644
index a7f1b7656f3..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/terminal.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M68.7 155.3C62.5 149.1 62.5 138.9 68.7 132.7C74.9 126.5 85.1 126.5 91.3 132.7L267.3 308.7C273.5 314.9 273.5 325.1 267.3 331.3L91.3 507.3C85.1 513.5 74.9 513.5 68.7 507.3C62.5 501.1 62.5 490.9 68.7 484.7L233.4 320L68.7 155.3zM560 480C568.8 480 576 487.2 576 496C576 504.8 568.8 512 560 512L272 512C263.2 512 256 504.8 256 496C256 487.2 263.2 480 272 480L560 480z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/thought-bubble.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/light/thought-bubble.svg
deleted file mode 100644
index 629c9e8e20c..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/light/thought-bubble.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 64C269.3 64 225.6 93.4 204.8 136.1C203.2 136 201.6 136 200 136C124.9 136 64 196.9 64 272C64 347.1 124.9 408 200 408C210.8 408 221.2 406.7 231.3 404.4C251.8 430.9 283.9 448 320 448C356.1 448 388.2 430.9 408.7 404.4C418.8 406.8 429.2 408 440 408C515.1 408 576 347.1 576 272C576 196.9 515.1 136 440 136C438.4 136 436.8 136 435.2 136.1C414.5 93.4 370.7 64 320 64zM230 158.5C243.6 122 278.8 96 320 96C361.2 96 396.4 122 410 158.5C412.6 165.5 419.6 169.7 427 168.8C431.3 168.3 435.6 168 440 168C497.4 168 544 214.6 544 272C544 329.4 497.4 376 440 376C428.5 376 417.4 374.1 407.1 370.7C400 368.3 392.3 371.2 388.4 377.6C374.3 400.7 349 416.1 320 416.1C291 416.1 265.7 400.7 251.6 377.6C247.7 371.2 240 368.4 232.9 370.7C222.6 374.1 211.5 376 200 376C142.6 376 96 329.4 96 272C96 214.6 142.6 168 200 168C204.4 168 208.8 168.3 213 168.8C220.4 169.7 227.4 165.5 230 158.5zM208 480C216.8 480 224 487.2 224 496C224 504.8 216.8 512 208 512C199.2 512 192 504.8 192 496C192 487.2 199.2 480 208 480zM208 544C234.5 544 256 522.5 256 496C256 469.5 234.5 448 208 448C181.5 448 160 469.5 160 496C160 522.5 181.5 544 208 544zM120 544C120 530.7 109.3 520 96 520C82.7 520 72 530.7 72 544C72 557.3 82.7 568 96 568C109.3 568 120 557.3 120 544z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-left-and-arrow-up-right-to-center.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-left-and-arrow-up-right-to-center.svg
new file mode 100644
index 00000000000..131d9a61909
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-left-and-arrow-up-right-to-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M553.5 121C562.9 111.6 562.9 96.4 553.5 87.1C544.1 77.8 528.9 77.7 519.6 87.1L384.6 222.1L384.6 136C384.6 122.7 373.9 112 360.6 112C347.3 112 336.6 122.7 336.6 136L336.6 280C336.6 293.3 347.3 304 360.6 304L504.6 304C517.9 304 528.6 293.3 528.6 280C528.6 266.7 517.9 256 504.6 256L418.5 256L553.5 121zM87.5 519C78.1 528.4 78.1 543.6 87.5 552.9C96.9 562.2 112.1 562.3 121.4 552.9L256.4 417.9L256.4 504C256.4 517.3 267.1 528 280.4 528C293.7 528 304.4 517.3 304.4 504L304.4 360C304.4 346.7 293.7 336 280.4 336L136.4 336C123.1 336 112.4 346.7 112.4 360C112.4 373.3 123.1 384 136.4 384L222.5 384L87.5 519z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-wide-short.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-wide-short.svg
new file mode 100644
index 00000000000..e01b92d46cb
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-down-wide-short.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M281 433L177 537C167.6 546.4 152.4 546.4 143.1 537L39 433C29.6 423.6 29.6 408.4 39 399.1C48.4 389.8 63.6 389.7 72.9 399.1L135.9 462.1L135.9 120C135.9 106.7 146.6 96 159.9 96C173.2 96 183.9 106.7 183.9 120L183.9 462.1L246.9 399.1C256.3 389.7 271.5 389.7 280.8 399.1C290.1 408.5 290.2 423.7 280.8 433zM344 544C330.7 544 320 533.3 320 520C320 506.7 330.7 496 344 496L392 496C405.3 496 416 506.7 416 520C416 533.3 405.3 544 392 544L344 544zM344 416C330.7 416 320 405.3 320 392C320 378.7 330.7 368 344 368L456 368C469.3 368 480 378.7 480 392C480 405.3 469.3 416 456 416L344 416zM344 288C330.7 288 320 277.3 320 264C320 250.7 330.7 240 344 240L520 240C533.3 240 544 250.7 544 264C544 277.3 533.3 288 520 288L344 288zM344 160C330.7 160 320 149.3 320 136C320 122.7 330.7 112 344 112L584 112C597.3 112 608 122.7 608 136C608 149.3 597.3 160 584 160L344 160z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-right-to-line.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-right-to-line.svg
new file mode 100644
index 00000000000..676fcbc2623
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-right-to-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M576 152C576 138.7 565.3 128 552 128C538.7 128 528 138.7 528 152L528 488C528 501.3 538.7 512 552 512C565.3 512 576 501.3 576 488L576 152zM441 337C450.4 327.6 450.4 312.4 441 303.1L305 167C295.6 157.6 280.4 157.6 271.1 167C261.8 176.4 261.7 191.6 271.1 200.9L366.1 295.9L88 295.9C74.7 295.9 64 306.6 64 319.9C64 333.2 74.7 343.9 88 343.9L366.1 343.9L271.1 438.9C261.7 448.3 261.7 463.5 271.1 472.8C280.5 482.1 295.7 482.2 305 472.8L441 337z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg
new file mode 100644
index 00000000000..2a7d9117f0b
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M359 247C349.6 256.4 349.6 271.6 359 280.9C368.4 290.2 383.6 290.3 392.9 280.9L527.9 145.9L527.9 232C527.9 245.3 538.6 256 551.9 256C565.2 256 575.9 245.3 575.9 232L575.9 88C575.9 74.7 565.2 64 551.9 64L408 64C394.7 64 384 74.7 384 88C384 101.3 394.7 112 408 112L494.1 112L359.1 247zM281 393C290.4 383.6 290.4 368.4 281 359.1C271.6 349.8 256.4 349.7 247.1 359.1L112 494.1L112 408C112 394.7 101.3 384 88 384C74.7 384 64 394.7 64 408L64 552C64 565.3 74.7 576 88 576L232 576C245.3 576 256 565.3 256 552C256 538.7 245.3 528 232 528L145.9 528L280.9 393z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-wide-short.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-wide-short.svg
new file mode 100644
index 00000000000..5d83e26a784
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/arrow-up-wide-short.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M177 103C167.6 93.6 152.4 93.6 143.1 103L39 207C29.6 216.4 29.6 231.6 39 240.9C48.4 250.2 63.6 250.3 72.9 240.9L135.9 177.9L135.9 520C135.9 533.3 146.6 544 159.9 544C173.2 544 183.9 533.3 183.9 520L183.9 177.9L246.9 240.9C256.3 250.3 271.5 250.3 280.8 240.9C290.1 231.5 290.2 216.3 280.8 207L177 103zM344 544L392 544C405.3 544 416 533.3 416 520C416 506.7 405.3 496 392 496L344 496C330.7 496 320 506.7 320 520C320 533.3 330.7 544 344 544zM344 416L456 416C469.3 416 480 405.3 480 392C480 378.7 469.3 368 456 368L344 368C330.7 368 320 378.7 320 392C320 405.3 330.7 416 344 416zM344 288L520 288C533.3 288 544 277.3 544 264C544 250.7 533.3 240 520 240L344 240C330.7 240 320 250.7 320 264C320 277.3 330.7 288 344 288zM344 160L584 160C597.3 160 608 149.3 608 136C608 122.7 597.3 112 584 112L344 112C330.7 112 320 122.7 320 136C320 149.3 330.7 160 344 160z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/bell.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/bell.svg
new file mode 100644
index 00000000000..e80851271c3
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 64C306.7 64 296 74.7 296 88L296 97.7C214.6 109.3 152 179.4 152 264L152 278.5C152 316.2 142 353.2 123 385.8L101.1 423.2C97.8 429 96 435.5 96 442.2C96 463.1 112.9 480 133.8 480L506.2 480C527.1 480 544 463.1 544 442.2C544 435.5 542.2 428.9 538.9 423.2L517 385.7C498 353.1 488 316.1 488 278.4L488 263.9C488 179.3 425.4 109.2 344 97.6L344 87.9C344 74.6 333.3 63.9 320 63.9zM488.4 432L151.5 432L164.4 409.9C187.7 370 200 324.6 200 278.5L200 264C200 197.7 253.7 144 320 144C386.3 144 440 197.7 440 264L440 278.5C440 324.7 452.3 370 475.5 409.9L488.4 432zM252.1 528C262 556 288.7 576 320 576C351.3 576 378 556 387.9 528L252.1 528z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/chart-simple.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/chart-simple.svg
new file mode 100644
index 00000000000..c0dd95c01ea
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/chart-simple.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M336 144L336 496L288 496L288 144L336 144zM288 96C261.5 96 240 117.5 240 144L240 496C240 522.5 261.5 544 288 544L336 544C362.5 544 384 522.5 384 496L384 144C384 117.5 362.5 96 336 96L288 96zM144 336L144 496L96 496L96 336L144 336zM96 288C69.5 288 48 309.5 48 336L48 496C48 522.5 69.5 544 96 544L144 544C170.5 544 192 522.5 192 496L192 336C192 309.5 170.5 288 144 288L96 288zM480 208L528 208L528 496L480 496L480 208zM432 208L432 496C432 522.5 453.5 544 480 544L528 544C554.5 544 576 522.5 576 496L576 208C576 181.5 554.5 160 528 160L480 160C453.5 160 432 181.5 432 208z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-exclamation.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-exclamation.svg
new file mode 100644
index 00000000000..1113b2ddee4
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-exclamation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM320 448C302.3 448 288 433.7 288 416C288 398.3 302.3 384 320 384C337.7 384 352 398.3 352 416C352 433.7 337.7 448 320 448zM320 192C338.2 192 352.7 207.5 351.4 225.7L344 329.7C343.1 342.3 332.6 352 320.1 352C307.5 352 297.1 342.3 296.2 329.7L288.8 225.7C287.3 207.5 301.8 192 320 192z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-info.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-info.svg
new file mode 100644
index 00000000000..1ebf5cc2986
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 112C434.9 112 528 205.1 528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM280 400C266.7 400 256 410.7 256 424C256 437.3 266.7 448 280 448L360 448C373.3 448 384 437.3 384 424C384 410.7 373.3 400 360 400L352 400L352 312C352 298.7 341.3 288 328 288L280 288C266.7 288 256 298.7 256 312C256 325.3 266.7 336 280 336L304 336L304 400L280 400zM320 256C337.7 256 352 241.7 352 224C352 206.3 337.7 192 320 192C302.3 192 288 206.3 288 224C288 241.7 302.3 256 320 256z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-nodes.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-nodes.svg
new file mode 100644
index 00000000000..e768a7564af
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle-nodes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M432 144C432 126.3 446.3 112 464 112C481.7 112 496 126.3 496 144C496 161.7 481.7 176 464 176C446.3 176 432 161.7 432 144zM402.1 194.6C408.9 202.9 417.3 209.8 426.8 214.8L390 416.6C378.5 418 367.8 421.9 358.3 427.7L217.3 304.2C221.6 294.3 224 283.5 224 272C224 270 223.9 267.9 223.8 265.9L402.1 194.6zM474 223.4C513.5 218.5 544 184.8 544 144C544 99.8 508.2 64 464 64C419.8 64 384 99.8 384 144C384 146 384.1 148.1 384.2 150.1L205.9 221.4C191.3 203.4 169 192 144 192C99.8 192 64 227.8 64 272C64 316.2 99.8 352 144 352C159.3 352 173.5 347.7 185.6 340.3L326.7 463.8C322.4 473.7 320 484.5 320 496C320 540.2 355.8 576 400 576C444.2 576 480 540.2 480 496C480 465.3 462.7 438.6 437.3 425.2L474 223.4zM368 496C368 478.3 382.3 464 400 464C417.7 464 432 478.3 432 496C432 513.7 417.7 528 400 528C382.3 528 368 513.7 368 496zM144 240C161.7 240 176 254.3 176 272C176 289.7 161.7 304 144 304C126.3 304 112 289.7 112 272C112 254.3 126.3 240 144 240z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle.svg
new file mode 100644
index 00000000000..bf1b2758410
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M528 320C528 205.1 434.9 112 320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circles-overlap-3.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circles-overlap-3.svg
new file mode 100644
index 00000000000..8def05a8fce
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/circles-overlap-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M192 224C192 229.6 192.4 235.2 193.1 240.6C198 240.2 203 240 208 240C250.5 240 289.6 255.1 320 280.2C350.4 255.1 389.5 240 432 240C437 240 442 240.2 446.9 240.6C447.6 235.2 448 229.6 448 224C448 153.3 390.7 96 320 96C249.3 96 192 153.3 192 224zM146.1 251.2C144.7 242.3 144 233.3 144 224C144 126.8 222.8 48 320 48C417.2 48 496 126.8 496 224C496 233.2 495.3 242.3 493.9 251.2C560.6 276.3 608 340.6 608 416C608 513.2 529.2 592 432 592C389.5 592 350.4 576.9 320 551.8C289.6 576.9 250.5 592 208 592C110.8 592 32 513.2 32 416C32 340.6 79.4 276.3 146.1 251.2zM430.9 288C401.3 288.3 374.2 298.5 352.6 315.6C358.5 324.1 363.7 333.2 368.1 342.7C394.6 331.9 416.7 312.6 430.9 288zM381.9 388.8C383.3 397.7 384 406.7 384 416C384 453.3 372.4 487.9 352.6 516.4C374.4 533.7 402 544 432 544C502.7 544 560 486.7 560 416C560 362.3 526.9 316.3 480 297.3C460.7 339.3 425.4 372.4 381.9 388.8zM305.1 399.4C304.4 404.8 304 410.4 304 416C304 438.5 309.8 459.6 320 478C330.2 459.6 336 438.5 336 416C336 410.4 335.6 404.8 334.9 399.4C325.1 400.2 314.8 400.2 305 399.4zM258.1 388.8C214.6 372.4 179.2 339.3 160 297.3C113.1 316.3 80 362.3 80 416C80 486.7 137.3 544 208 544C238 544 265.6 533.7 287.4 516.4C267.6 487.9 256 453.3 256 416C256 406.7 256.7 397.7 258.1 388.8zM272 342.7C276.4 333.2 281.5 324.1 287.5 315.6C266 298.5 238.8 288.2 209.2 288C223.4 312.5 245.5 331.9 272 342.7z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/diagram-nested.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/diagram-nested.svg
new file mode 100644
index 00000000000..1fcd92c1b14
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/diagram-nested.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M240 144L240 240L144 240L144 144L240 144zM144 96C117.5 96 96 117.5 96 144L96 240C96 266.5 117.5 288 144 288L168 288L168 384C168 432.6 207.4 472 256 472L352 472L352 496C352 522.5 373.5 544 400 544L496 544C522.5 544 544 522.5 544 496L544 400C544 373.5 522.5 352 496 352L400 352C373.5 352 352 373.5 352 400L352 424L256 424C233.9 424 216 406.1 216 384L216 288L240 288C266.5 288 288 266.5 288 240L288 144C288 117.5 266.5 96 240 96L144 96zM496 400L496 496L400 496L400 400L496 400z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/forward-step.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/forward-step.svg
new file mode 100644
index 00000000000..e206e6ac64d
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/forward-step.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M488 96C474.7 96 464 106.7 464 120L464 282.7L190 102.6C177.7 94.5 162 93.8 149 100.8C136 107.8 128 121.3 128 136L128 504C128 518.7 136.1 532.2 149 539.2C161.9 546.2 177.7 545.5 190 537.4L464 357.4L464 520C464 533.3 474.7 544 488 544C501.3 544 512 533.3 512 520L512 120C512 106.7 501.3 96 488 96zM433.4 320L176 489.2L176 150.8L433.4 320z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/infinity.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/infinity.svg
new file mode 100644
index 00000000000..c882de5ecd8
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/infinity.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M0 301.3C0 223.3 63.3 160 141.3 160C180.3 160 217.5 176.1 244.2 204.5L320 285L395.8 204.5C422.5 176.1 459.7 160 498.7 160C576.7 160 640 223.3 640 301.3L640 338.7C640 416.7 576.7 480 498.7 480C459.7 480 422.5 463.9 395.8 435.5L320 355L244.2 435.5C217.5 463.9 180.3 480 141.3 480C63.3 480 0 416.7 0 338.7L0 301.3zM287 320L209.2 237.4C191.6 218.7 167 208 141.2 208C89.7 208 47.9 249.8 47.9 301.3L47.9 338.7C47.9 390.2 89.7 432 141.2 432C166.9 432 191.5 421.4 209.2 402.6L287 320zM352.9 320L430.7 402.6C448.3 421.3 472.9 432 498.7 432C550.2 432 592 390.2 592 338.7L592 301.3C592 249.8 550.2 208 498.7 208C473 208 448.4 218.6 430.7 237.4L353 320z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer-group.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer-group.svg
deleted file mode 100644
index fc9baba1f09..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer-group.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M323.4 112.7L494.8 192L323.4 271.2C321.3 272.2 318.8 272.2 316.7 271.2L145.2 192L316.6 112.7C318.7 111.7 321.2 111.7 323.3 112.7zM343.5 69.2C328.6 62.3 311.4 62.3 296.5 69.2L77.9 170.2C69.4 174.1 64 182.6 64 192C64 201.4 69.4 209.9 77.9 213.8L296.5 314.8C311.4 321.7 328.6 321.7 343.5 314.8L562.1 213.8C570.6 209.9 576 201.4 576 192C576 182.6 570.6 174.1 562.1 170.2L343.5 69.2zM112.1 282.4L77.9 298.2C69.4 302.1 64 310.6 64 320C64 329.4 69.4 337.9 77.9 341.8L296.5 442.8C311.4 449.7 328.6 449.7 343.5 442.8L562.1 341.8C570.6 337.9 576 329.4 576 320C576 310.6 570.6 302.1 562.1 298.2L528 282.4L470.8 308.8L494.9 319.9L323.5 399.1C321.4 400.1 318.9 400.1 316.8 399.1L145.2 320L169.3 308.9L112.1 282.4zM77.9 426.2C69.4 430.1 64 438.6 64 448C64 457.4 69.4 465.9 77.9 469.8L296.5 570.8C311.4 577.7 328.6 577.7 343.5 570.8L562.1 469.8C570.6 465.9 576 457.4 576 448C576 438.6 570.6 430.1 562.1 426.2L528 410.4L470.8 436.8L494.9 447.9L323.5 527.1C321.4 528.1 318.9 528.1 316.8 527.1L145.4 447.9L169.5 436.8L112.3 410.4L78.2 426.2z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer.svg
new file mode 100644
index 00000000000..7bf0d2651af
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/layer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M562.1 378.2C570.6 382.1 576 390.6 576 400C576 409.4 570.6 417.9 562.1 421.8L343.5 522.8L337.8 525C324.3 529.5 309.5 528.8 296.5 522.8L77.9 421.7C69.4 417.8 64 409.3 64 400C64 390.7 69.4 382.1 77.9 378.2L146.6 346.4L203.8 372.8L145.1 399.9L316.6 479.2C318.7 480.2 321.2 480.2 323.3 479.2L494.7 399.9L436 372.8L493.2 346.3L562 378.1zM296.5 117.2C311.4 110.3 328.6 110.3 343.5 117.2L562.1 218.2C570.6 222.1 576 230.6 576 240C576 249.4 570.6 257.9 562.1 261.8L343.5 362.8L337.8 365C324.3 369.5 309.5 368.8 296.5 362.8L77.9 261.7C69.4 257.8 64 249.3 64 240C64 230.7 69.4 222.1 77.9 218.2L296.5 117.2zM323.3 160.8C321.2 159.8 318.7 159.8 316.6 160.8L145.2 240L316.7 319.2C318.8 320.2 321.3 320.2 323.4 319.2L494.8 240L323.3 160.7z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/lock-keyhole.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/lock-keyhole.svg
new file mode 100644
index 00000000000..66893576156
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/lock-keyhole.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 80C364.2 80 400 115.8 400 160L400 224L240 224L240 160C240 115.8 275.8 80 320 80zM192 160L192 224C156.7 224 128 252.7 128 288L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 288C512 252.7 483.3 224 448 224L448 160C448 89.3 390.7 32 320 32C249.3 32 192 89.3 192 160zM400 272L448 272L448 272C456.8 272 464 279.2 464 288L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 288C176 279.2 183.2 272 192 272L192 272L240 272L240 272L400 272L400 272zM344 360C344 346.7 333.3 336 320 336C306.7 336 296 346.7 296 360L296 440C296 453.3 306.7 464 320 464C333.3 464 344 453.3 344 440L344 360z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-minus.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-minus.svg
new file mode 100644
index 00000000000..6f37b5582be
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M272 112C360.4 112 432 183.6 432 272C432 360.4 360.4 432 272 432C183.6 432 112 360.4 112 272C112 183.6 183.6 112 272 112zM272 480C320.8 480 365.7 463.2 401.1 435.1L535 569C544.4 578.4 559.6 578.4 568.9 569C578.2 559.6 578.3 544.4 568.9 535.1L435.1 401.1C463.2 365.7 480 320.8 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM200 248C186.7 248 176 258.7 176 272C176 285.3 186.7 296 200 296L344 296C357.3 296 368 285.3 368 272C368 258.7 357.3 248 344 248L200 248z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-plus.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-plus.svg
new file mode 100644
index 00000000000..f1643b95af4
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/magnifying-glass-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M272 112C360.4 112 432 183.6 432 272C432 360.4 360.4 432 272 432C183.6 432 112 360.4 112 272C112 183.6 183.6 112 272 112zM272 480C320.8 480 365.7 463.2 401.1 435.1L535 569C544.4 578.4 559.6 578.4 568.9 569C578.2 559.6 578.3 544.4 568.9 535.1L435.1 401.1C463.2 365.7 480 320.8 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM272 176C258.7 176 248 186.7 248 200L248 248L200 248C186.7 248 176 258.7 176 272C176 285.3 186.7 296 200 296L248 296L248 344C248 357.3 258.7 368 272 368C285.3 368 296 357.3 296 344L296 296L344 296C357.3 296 368 285.3 368 272C368 258.7 357.3 248 344 248L296 248L296 200C296 186.7 285.3 176 272 176z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/pen-to-square.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/pen-to-square.svg
new file mode 100644
index 00000000000..f3349f49c55
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/pen-to-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M505 122.9L517.1 135C526.5 144.4 526.5 159.6 517.1 168.9L488 198.1L441.9 152L471 122.9C480.4 113.5 495.6 113.5 504.9 122.9zM273.8 320.2L408 185.9L454.1 232L319.8 366.2C316.9 369.1 313.3 371.2 309.4 372.3L250.9 389L267.6 330.5C268.7 326.6 270.8 323 273.7 320.1zM437.1 89L239.8 286.2C231.1 294.9 224.8 305.6 221.5 317.3L192.9 417.3C190.5 425.7 192.8 434.7 199 440.9C205.2 447.1 214.2 449.4 222.6 447L322.6 418.4C334.4 415 345.1 408.7 353.7 400.1L551 202.9C579.1 174.8 579.1 129.2 551 101.1L538.9 89C510.8 60.9 465.2 60.9 437.1 89zM152 128C103.4 128 64 167.4 64 216L64 488C64 536.6 103.4 576 152 576L424 576C472.6 576 512 536.6 512 488L512 376C512 362.7 501.3 352 488 352C474.7 352 464 362.7 464 376L464 488C464 510.1 446.1 528 424 528L152 528C129.9 528 112 510.1 112 488L112 216C112 193.9 129.9 176 152 176L264 176C277.3 176 288 165.3 288 152C288 138.7 277.3 128 264 128L152 128z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/play.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/play.svg
new file mode 100644
index 00000000000..f78b73191a8
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M147.6 101.6C135.5 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6zM176 490.5L176 149.5L487.3 320L176 490.5z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/right-to-line.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/right-to-line.svg
deleted file mode 100644
index 28d1cd8c1b2..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/right-to-line.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M552 128C538.7 128 528 138.7 528 152L528 488C528 501.3 538.7 512 552 512C565.3 512 576 501.3 576 488L576 152C576 138.7 565.3 128 552 128zM441 337C445.5 332.5 448 326.4 448 320C448 313.6 445.5 307.5 441 303L297 159C290.1 152.1 279.8 150.1 270.8 153.8C261.8 157.5 256 166.3 256 176L256 240L192 240L192 240L112 240C85.5 240 64 261.5 64 288L64 352C64 378.5 85.5 400 112 400L256 400L256 464C256 473.7 261.8 482.5 270.8 486.2C279.8 489.9 290.1 487.9 297 481L441 337zM192 352L112 352L112 288L192 288L192 288L280 288C286.4 288 292.5 285.5 297 281C301.5 276.5 304 270.4 304 264L304 233.9L390.1 320L304 406.1L304 376C304 362.7 293.3 352 280 352L192 352z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/sparkles.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/sparkles.svg
new file mode 100644
index 00000000000..2f8e5a928c6
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/sparkles.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M423.5 117.2C419 118.9 416 123.2 416 128C416 132.8 419 137.1 423.5 138.8L480 160L501.2 216.5C502.9 221 507.2 224 512 224C516.8 224 521.1 221 522.8 216.5L544 160L600.5 138.8C605 137.1 608 132.8 608 128C608 123.2 605 118.9 600.5 117.2L544 96L522.8 39.5C521.1 35 516.8 32 512 32C507.2 32 502.9 35 501.2 39.5L480 96L423.5 117.2zM199.9 272.5L224 220.4L248.1 272.5C252.9 282.9 261.2 291.2 271.6 296L323.7 320.1L271.6 344.2C261.2 349 252.9 357.3 248.1 367.7L224 419.8L199.9 367.7C195.1 357.3 186.8 349 176.4 344.2L124.3 320L176.5 295.9C186.9 291.1 195.2 282.8 200 272.4zM197.6 163.1L156.4 252.4L67.1 293.6L66.5 293.9C62.6 295.7 54.2 299.6 41.3 305.5C35.6 308.1 32 313.8 32 320C32 326.2 35.6 331.9 41.3 334.5C54.2 340.4 62.5 344.3 66.5 346.1L67.1 346.4L156.4 387.6L197.6 476.9L197.9 477.5C199.7 481.4 203.6 489.8 209.5 502.7C212.1 508.4 217.8 512 224 512C230.2 512 235.9 508.4 238.5 502.7C252.9 471.6 253.6 470 291.6 387.7L380.9 346.5L381.5 346.2C385.4 344.4 393.8 340.5 406.7 334.6C412.4 332 416 326.3 416 320.1C416 313.9 412.4 308.2 406.7 305.6C375.6 291.2 374 290.5 291.7 252.5L250.5 163.2L250.2 162.6C248.4 158.7 244.5 150.3 238.6 137.4C236 131.7 230.3 128.1 224.1 128.1C217.9 128.1 212.2 131.7 209.6 137.4C195.8 167.2 198.1 162.4 197.7 163.2zM448 480L391.5 501.2C387 502.9 384 507.2 384 512C384 516.8 387 521.1 391.5 522.8L448 544L469.2 600.5C470.9 605 475.2 608 480 608C484.8 608 489.1 605 490.8 600.5L512 544L568.5 522.8C573 521.1 576 516.8 576 512C576 507.2 573 502.9 568.5 501.2L512 480L490.8 423.5C489.1 419 484.8 416 480 416C475.2 416 470.9 419 469.2 423.5L448 480z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/terminal.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/terminal.svg
new file mode 100644
index 00000000000..d29ffa365a0
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/terminal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M71 169C61.7 159.6 61.7 144.4 71 135C80.3 125.6 95.6 125.7 105 135L273 303C282.4 312.4 282.4 327.6 273 336.9L105 505C95.6 514.4 80.4 514.4 71.1 505C61.8 495.6 61.7 480.4 71 471L222.1 320L71 169zM552 464C565.3 464 576 474.7 576 488C576 501.3 565.3 512 552 512L280 512C266.7 512 256 501.3 256 488C256 474.7 266.7 464 280 464L552 464z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/thought-bubble.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/thought-bubble.svg
new file mode 100644
index 00000000000..1d358c04c52
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/thought-bubble.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 64C271.3 64 228.6 89.6 204.6 128C126.7 129.8 64 193.6 64 272C64 351.5 128.5 416 208 416C217.4 416 226.7 415.1 235.6 413.3C257.3 434.7 287.1 448 320 448C352.9 448 382.7 434.7 404.4 413.3C413.4 415 422.6 416 432 416C511.5 416 576 351.5 576 272C576 193.6 513.4 129.9 435.4 128C411.4 89.6 368.7 64 320 64zM240.3 162.7C254.4 132.7 284.8 112 320 112C355.2 112 385.6 132.7 399.7 162.7C404 171.8 413.5 177.3 423.5 176.4C426.3 176.2 429.1 176 432 176C485 176 528 219 528 272C528 325 485 368 432 368C422 368 412.3 366.5 403.3 363.6C393.7 360.6 383.3 363.9 377.1 371.9C363.9 389 343.2 400 320 400C296.8 400 276.1 389 262.9 371.9C256.8 363.9 246.3 360.6 236.7 363.6C227.7 366.4 218 368 208 368C155 368 112 325 112 272C112 219 155 176 208 176C210.9 176 213.7 176.1 216.5 176.4C226.5 177.3 236 171.8 240.3 162.7zM256 496C256 469.5 234.5 448 208 448C181.5 448 160 469.5 160 496C160 522.5 181.5 544 208 544C234.5 544 256 522.5 256 496zM128 544C128 526.3 113.7 512 96 512C78.3 512 64 526.3 64 544C64 561.7 78.3 576 96 576C113.7 576 128 561.7 128 544z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/triangle-exclamation.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/triangle-exclamation.svg
new file mode 100644
index 00000000000..4f149ef6e27
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/triangle-exclamation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320.5 64C335.2 64 348.7 72.1 355.7 85L571.7 485C578.4 497.4 578.1 512.4 570.9 524.5C563.7 536.6 550.6 544 536.5 544L104.5 544C90.4 544 77.4 536.6 70.2 524.5C63 512.4 62.7 497.4 69.4 485L285.4 85C292.4 72.1 305.9 64 320.6 64zM117.9 496L523.1 496L320.5 120.8L117.9 496zM320.5 456C302.8 456 288.5 441.7 288.5 424C288.5 406.3 302.8 392 320.5 392C338.2 392 352.5 406.3 352.5 424C352.5 441.7 338.2 456 320.5 456zM320.5 248C339.1 248 353.5 264.1 351.5 282.6L344.4 346.7C343 358.8 332.7 368 320.5 368C308.3 368 298 358.8 296.7 346.7L289.6 282.6C287.6 264.1 302 248 320.6 248z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/unlock-keyhole.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/unlock-keyhole.svg
new file mode 100644
index 00000000000..23913477105
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/regular/unlock-keyhole.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 80C275.8 80 240 115.8 240 160L240 224L448 224C483.3 224 512 252.7 512 288L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 288C128 252.7 156.7 224 192 224L192 160C192 89.3 249.3 32 320 32C387.4 32 442.5 84 447.6 150.1C448.6 163.3 438.7 174.9 425.5 175.9C412.3 176.9 400.7 167 399.7 153.8C396.6 112.5 362.1 80 320 80zM176 288L176 512C176 520.8 183.2 528 192 528L448 528C456.8 528 464 520.8 464 512L464 288C464 279.2 456.8 272 448 272L240 272L240 272L192 272L192 272C183.2 272 176 279.2 176 288zM360 424L280 424C266.7 424 256 413.3 256 400C256 386.7 266.7 376 280 376L360 376C373.3 376 384 386.7 384 400C384 413.3 373.3 424 360 424z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-down-left-and-arrow-up-right-to-center.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-down-left-and-arrow-up-right-to-center.svg
deleted file mode 100644
index 4358171ba41..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-down-left-and-arrow-up-right-to-center.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M566.6 118.6C579.1 106.1 579.1 85.8 566.6 73.3C554.1 60.8 533.8 60.8 521.3 73.3L400 194.7L400 144C400 126.3 385.7 112 368 112C350.3 112 336 126.3 336 144L336 272C336 289.7 350.3 304 368 304L496 304C513.7 304 528 289.7 528 272C528 254.3 513.7 240 496 240L445.3 240L566.7 118.6zM144 336C126.3 336 112 350.3 112 368C112 385.7 126.3 400 144 400L194.7 400L73.3 521.4C60.8 533.9 60.8 554.2 73.3 566.7C85.8 579.2 106.1 579.2 118.6 566.7L240 445.3L240 496C240 513.7 254.3 528 272 528C289.7 528 304 513.7 304 496L304 368C304 350.3 289.7 336 272 336L144 336z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-up-right-and-arrow-down-left-from-center.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-up-right-and-arrow-down-left-from-center.svg
deleted file mode 100644
index f0ff1a1ea4d..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/arrow-up-right-and-arrow-down-left-from-center.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M416 64C398.3 64 384 78.3 384 96C384 113.7 398.3 128 416 128L466.7 128L361.3 233.4C348.8 245.9 348.8 266.2 361.3 278.7C373.8 291.2 394.1 291.2 406.6 278.7L512 173.3L512 224C512 241.7 526.3 256 544 256C561.7 256 576 241.7 576 224L576 96C576 78.3 561.7 64 544 64L416 64zM278.6 361.4C266.1 348.9 245.8 348.9 233.3 361.4L128 466.7L128 416C128 398.3 113.7 384 96 384C78.3 384 64 398.3 64 416L64 544C64 561.7 78.3 576 96 576L224 576C241.7 576 256 561.7 256 544C256 526.3 241.7 512 224 512L173.3 512L278.7 406.6C291.2 394.1 291.2 373.8 278.7 361.3z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-exclamation.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-exclamation.svg
deleted file mode 100644
index 7b0a735f782..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-exclamation.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 384C302.3 384 288 398.3 288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384zM320 192C301.8 192 287.3 207.5 288.6 225.7L296 329.7C296.9 342.3 307.4 352 319.9 352C332.5 352 342.9 342.3 343.8 329.7L351.2 225.7C352.5 207.5 338.1 192 319.8 192z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-info.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-info.svg
deleted file mode 100644
index 39bb6f4acb8..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circle-info.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circles-overlap-3.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circles-overlap-3.svg
deleted file mode 100644
index fbedc90245d..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/circles-overlap-3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M208 224C208 229.4 208.4 234.8 209.1 240C251.2 240.3 289.8 255.3 320 280.2C350.2 255.3 388.8 240.2 430.9 240C431.6 234.8 432 229.4 432 224C432 162.1 381.9 112 320 112C258.1 112 208 162.1 208 224zM146.1 251.2C144.7 242.3 144 233.3 144 224C144 126.8 222.8 48 320 48C417.2 48 496 126.8 496 224C496 233.2 495.3 242.3 493.9 251.2C560.6 276.3 608 340.6 608 416C608 513.2 529.2 592 432 592C389.5 592 350.4 576.9 320 551.8C289.6 576.9 250.5 592 208 592C110.8 592 32 513.2 32 416C32 340.6 79.4 276.3 146.1 251.2zM381.9 388.8C383.3 397.7 384 406.7 384 416C384 447.5 375.7 477.2 361.2 502.8C380.5 518.6 405.2 528 432 528C493.9 528 544 477.9 544 416C544 368.5 514.4 327.9 472.7 311.6C452.5 346.8 420.4 374.3 381.9 388.8zM258.1 388.8C219.6 374.3 187.6 346.8 167.3 311.6C125.6 327.9 96 368.5 96 416C96 477.9 146.1 528 208 528C234.9 528 259.5 518.5 278.8 502.8C264.3 477.2 256 447.6 256 416C256 406.7 256.7 397.7 258.1 388.8z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pause.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pause.svg
new file mode 100644
index 00000000000..526c2c7e099
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pause.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pen-to-square.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pen-to-square.svg
deleted file mode 100644
index 105ceb1dce3..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/pen-to-square.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M535.6 85.7C513.7 63.8 478.3 63.8 456.4 85.7L432 110.1L529.9 208L554.3 183.6C576.2 161.7 576.2 126.3 554.3 104.4L535.6 85.7zM236.4 305.7C230.3 311.8 225.6 319.3 222.9 327.6L193.3 416.4C190.4 425 192.7 434.5 199.1 441C205.5 447.5 215 449.7 223.7 446.8L312.5 417.2C320.7 414.5 328.2 409.8 334.4 403.7L496 241.9L398.1 144L236.4 305.7zM160 128C107 128 64 171 64 224L64 480C64 533 107 576 160 576L416 576C469 576 512 533 512 480L512 384C512 366.3 497.7 352 480 352C462.3 352 448 366.3 448 384L448 480C448 497.7 433.7 512 416 512L160 512C142.3 512 128 497.7 128 480L128 224C128 206.3 142.3 192 160 192L256 192C273.7 192 288 177.7 288 160C288 142.3 273.7 128 256 128L160 128z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/star.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/star.svg
new file mode 100644
index 00000000000..1715e2672af
--- /dev/null
+++ b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/triangle-exclamation.svg b/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/triangle-exclamation.svg
deleted file mode 100644
index 4f67c4e4767..00000000000
--- a/libs/@hashintel/ds-components/src/components/Icon/svgs/solid/triangle-exclamation.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M320 64C334.7 64 348.2 72.1 355.2 85L571.2 485C577.9 497.4 577.6 512.4 570.4 524.5C563.2 536.6 550.1 544 536 544L104 544C89.9 544 76.8 536.6 69.6 524.5C62.4 512.4 62.1 497.4 68.8 485L284.8 85C291.8 72.1 305.3 64 320 64zM320 416C302.3 416 288 430.3 288 448C288 465.7 302.3 480 320 480C337.7 480 352 465.7 352 448C352 430.3 337.7 416 320 416zM320 224C301.8 224 287.3 239.5 288.6 257.7L296 361.7C296.9 374.2 307.4 384 319.9 384C332.5 384 342.9 374.3 343.8 361.7L351.2 257.7C352.5 239.5 338.1 224 319.8 224z"/></svg>
\ No newline at end of file
diff --git a/libs/@hashintel/ds-components/tsup.config.ts b/libs/@hashintel/ds-components/tsup.config.ts
index 99290d06bc1..067773bd18a 100644
--- a/libs/@hashintel/ds-components/tsup.config.ts
+++ b/libs/@hashintel/ds-components/tsup.config.ts
@@ -1,6 +1,8 @@
 import { globSync } from "node:fs";
 import path from "node:path";
 
+import svgr from "esbuild-plugin-svgr";
+
 const componentEntries = Object.fromEntries(
   globSync("./src/components/*/*.tsx", { exclude: ["**/*.stories.tsx"] }).map(
     (file) => [`components/${path.basename(file, ".tsx")}`, file],
@@ -16,6 +18,7 @@ export default {
     tokens: "./src/tokens.ts",
     ...componentEntries,
   },
+  esbuildPlugins: [svgr()],
   format: ["esm"],
   outDir: "dist",
   platform: "neutral",
diff --git a/libs/@hashintel/petrinaut/package.json b/libs/@hashintel/petrinaut/package.json
index 58b12f408c0..d35a074ffb6 100644
--- a/libs/@hashintel/petrinaut/package.json
+++ b/libs/@hashintel/petrinaut/package.json
@@ -71,7 +71,6 @@
     "immer": "10.1.3",
     "lodash-es": "4.18.1",
     "monaco-editor": "0.55.1",
-    "react-icons": "5.5.0",
     "react-resizable-panels": "4.6.5",
     "typescript": "5.9.3",
     "uplot": "1.6.32",
diff --git a/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx b/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx
index a91e21728bc..6d769b31c19 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/arc-item.tsx
@@ -1,9 +1,9 @@
+import { Icon } from "@hashintel/ds-components";
 import { css, cx } from "@hashintel/ds-helpers/css";
 import type { ReactNode } from "react";
 import { useMemo } from "react";
-import { FaChevronDown } from "react-icons/fa6";
-import { TbTrash } from "react-icons/tb";
 
+import { Button } from "./button";
 import { NumberInput } from "./number-input";
 import { Select, type SelectOption } from "./select";
 
@@ -99,10 +99,7 @@ const nameTextStyle = css({
 });
 
 const chevronStyle = css({
-  flexShrink: 0,
   color: "[rgba(0, 0, 0, 0.3)]",
-  display: "flex",
-  alignItems: "center",
 });
 
 const separatorContainerStyle = css({
@@ -196,18 +193,6 @@ const deleteContainerStyle = css({
   justifyContent: "center",
 });
 
-const deleteButtonStyle = css({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  background: "[none]",
-  border: "none",
-  padding: "[0]",
-  color: "[#ef4444]",
-  height: "[100%]",
-});
-
 // -- Select trigger style overrides for ArcItem -------------------------------
 
 const selectRootOverrideStyle = css({
@@ -284,7 +269,7 @@ export const ArcItem = ({
         style={{ backgroundColor: color ?? "#d4d4d4" }}
       />
       <span className={nameTextStyle}>{placeName}</span>
-      <FaChevronDown size={10} className={chevronStyle} />
+      <Icon name="chevronDown" size="xs" className={chevronStyle} />
     </div>
   );
 
@@ -354,14 +339,16 @@ export const ArcItem = ({
       />
       {onDelete && !disabled && (
         <div data-arc-delete="" className={deleteContainerStyle}>
-          <button
-            type="button"
-            className={deleteButtonStyle}
+          <Button
+            variant="ghost"
+            tone="error"
+            size="xs"
             onClick={onDelete}
             aria-label="Delete arc"
-          >
-            <TbTrash size={14} />
-          </button>
+            tooltip="Delete arc"
+            tooltipDisplay="inline"
+            iconName="trash"
+          />
         </div>
       )}
     </div>
diff --git a/libs/@hashintel/petrinaut/src/ui/components/button.tsx b/libs/@hashintel/petrinaut/src/ui/components/button.tsx
index 8b6d48159d9..caf41e6f71d 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/button.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/button.tsx
@@ -2,9 +2,26 @@ import {
   Button as DsButton,
   type ButtonProps as DsButtonProps,
 } from "@hashintel/ds-components";
+import type { ComponentType } from "react";
 
 import { withTooltip } from "./hoc/with-tooltip";
 
-export type ButtonProps = DsButtonProps;
+/**
+ * Wrap the ds-components Button to:
+ *  - Allow arbitrary `data-*` attributes (e.g. CSS hooks like `[data-row-action]`).
+ *  - Relax the requirement that a `<button>` provides either `onClick` or
+ *    `type: "submit"|"reset"`. Ark UI `asChild` patterns inject `onClick` at
+ *    runtime, so call sites legitimately render `<Button>` without it.
+ *
+ * The underlying Button already spreads unknown props onto the DOM element, so
+ * widening the type here only affects compile-time checks.
+ */
+export type ButtonProps = Omit<DsButtonProps, "onClick" | "type"> & {
+  onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
+  type?: "button" | "submit" | "reset";
+} & Record<`data-${string}`, unknown>;
 
-export const Button = withTooltip(DsButton, "block");
+export const Button = withTooltip(
+  DsButton as ComponentType<ButtonProps>,
+  "block",
+);
diff --git a/libs/@hashintel/petrinaut/src/ui/components/dialog.stories.tsx b/libs/@hashintel/petrinaut/src/ui/components/dialog.stories.tsx
index 3042c529c98..7eac78d5892 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/dialog.stories.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/dialog.stories.tsx
@@ -2,6 +2,7 @@ import { css } from "@hashintel/ds-helpers/css";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 
+import { Button } from "./button";
 import { Dialog } from "./dialog";
 
 const meta = {
@@ -17,63 +18,6 @@ type Story = StoryObj<typeof meta>;
 
 // -- Shared styles -----------------------------------------------------------
 
-const triggerButtonStyle = css({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  height: "[32px]",
-  paddingX: "[12px]",
-  fontSize: "[14px]",
-  fontWeight: "medium",
-  color: "neutral.s120",
-  backgroundColor: "[white]",
-  border: "[1px solid]",
-  borderColor: "neutral.s30",
-  borderRadius: "[8px]",
-  cursor: "pointer",
-  _hover: {
-    backgroundColor: "neutral.s10",
-  },
-});
-
-const cancelButtonStyle = css({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  paddingX: "[12px]",
-  paddingY: "[8px]",
-  fontSize: "[14px]",
-  fontWeight: "medium",
-  lineHeight: "[14px]",
-  color: "[#484848]",
-  backgroundColor: "[white]",
-  border: "[1px solid rgba(0, 0, 0, 0.09)]",
-  borderRadius: "[10px]",
-  cursor: "pointer",
-  _hover: {
-    backgroundColor: "[rgba(0, 0, 0, 0.03)]",
-  },
-});
-
-const confirmButtonStyle = css({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  paddingX: "[12px]",
-  paddingY: "[8px]",
-  fontSize: "[14px]",
-  fontWeight: "medium",
-  lineHeight: "[14px]",
-  color: "[white]",
-  backgroundColor: "[#484848]",
-  border: "none",
-  borderRadius: "[10px]",
-  cursor: "pointer",
-  _hover: {
-    backgroundColor: "[#3a3a3a]",
-  },
-});
-
 const bodyTextStyle = css({
   fontSize: "[14px]",
   fontWeight: "medium",
@@ -89,9 +33,7 @@ export const Default: Story = {
   render: () => (
     <Dialog.Root>
       <Dialog.Trigger asChild>
-        <button type="button" className={triggerButtonStyle}>
-          Open Dialog
-        </button>
+        <Button variant="subtle">Open Dialog</Button>
       </Dialog.Trigger>
       <Dialog.Content>
         <Dialog.Card>
@@ -104,13 +46,9 @@ export const Default: Story = {
         </Dialog.Card>
         <Dialog.Footer>
           <Dialog.CloseTrigger asChild>
-            <button type="button" className={cancelButtonStyle}>
-              Cancel
-            </button>
+            <Button variant="subtle">Cancel</Button>
           </Dialog.CloseTrigger>
-          <button type="button" className={confirmButtonStyle}>
-            Confirm
-          </button>
+          <Button variant="solid">Confirm</Button>
         </Dialog.Footer>
       </Dialog.Content>
     </Dialog.Root>
@@ -122,9 +60,7 @@ export const WithDescription: Story = {
   render: () => (
     <Dialog.Root>
       <Dialog.Trigger asChild>
-        <button type="button" className={triggerButtonStyle}>
-          Open Dialog
-        </button>
+        <Button variant="subtle">Open Dialog</Button>
       </Dialog.Trigger>
       <Dialog.Content>
         <Dialog.Card>
@@ -140,13 +76,11 @@ export const WithDescription: Story = {
         </Dialog.Card>
         <Dialog.Footer>
           <Dialog.CloseTrigger asChild>
-            <button type="button" className={cancelButtonStyle}>
-              Cancel
-            </button>
+            <Button variant="subtle">Cancel</Button>
           </Dialog.CloseTrigger>
-          <button type="button" className={confirmButtonStyle}>
+          <Button variant="solid" tone="error">
             Delete
-          </button>
+          </Button>
         </Dialog.Footer>
       </Dialog.Content>
     </Dialog.Root>
@@ -158,9 +92,7 @@ export const WithoutFooter: Story = {
   render: () => (
     <Dialog.Root>
       <Dialog.Trigger asChild>
-        <button type="button" className={triggerButtonStyle}>
-          Open Dialog
-        </button>
+        <Button variant="subtle">Open Dialog</Button>
       </Dialog.Trigger>
       <Dialog.Content>
         <Dialog.Card>
@@ -184,13 +116,9 @@ const ControlledDialogExample = () => {
 
   return (
     <>
-      <button
-        type="button"
-        className={triggerButtonStyle}
-        onClick={() => setOpen(true)}
-      >
+      <Button variant="subtle" onClick={() => setOpen(true)}>
         Open Controlled Dialog
-      </button>
+      </Button>
       <Dialog.Root
         open={open}
         onOpenChange={(details) => setOpen(details.open)}
@@ -207,17 +135,11 @@ const ControlledDialogExample = () => {
           </Dialog.Card>
           <Dialog.Footer>
             <Dialog.CloseTrigger asChild>
-              <button type="button" className={cancelButtonStyle}>
-                Cancel
-              </button>
+              <Button variant="subtle">Cancel</Button>
             </Dialog.CloseTrigger>
-            <button
-              type="button"
-              className={confirmButtonStyle}
-              onClick={() => setOpen(false)}
-            >
+            <Button variant="solid" onClick={() => setOpen(false)}>
               Done
-            </button>
+            </Button>
           </Dialog.Footer>
         </Dialog.Content>
       </Dialog.Root>
@@ -235,9 +157,7 @@ export const OpenByDefault: Story = {
   render: () => (
     <Dialog.Root defaultOpen>
       <Dialog.Trigger asChild>
-        <button type="button" className={triggerButtonStyle}>
-          Re-open Dialog
-        </button>
+        <Button variant="subtle">Re-open Dialog</Button>
       </Dialog.Trigger>
       <Dialog.Content>
         <Dialog.Card>
@@ -252,13 +172,9 @@ export const OpenByDefault: Story = {
         </Dialog.Card>
         <Dialog.Footer>
           <Dialog.CloseTrigger asChild>
-            <button type="button" className={cancelButtonStyle}>
-              Cancel
-            </button>
+            <Button variant="subtle">Cancel</Button>
           </Dialog.CloseTrigger>
-          <button type="button" className={confirmButtonStyle}>
-            Confirm
-          </button>
+          <Button variant="solid">Confirm</Button>
         </Dialog.Footer>
       </Dialog.Content>
     </Dialog.Root>
diff --git a/libs/@hashintel/petrinaut/src/ui/components/dialog.tsx b/libs/@hashintel/petrinaut/src/ui/components/dialog.tsx
index 56ffe875d33..47cc85c2016 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/dialog.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/dialog.tsx
@@ -2,9 +2,9 @@ import { Dialog as ArkDialog } from "@ark-ui/react/dialog";
 import { Portal } from "@ark-ui/react/portal";
 import { css, cx } from "@hashintel/ds-helpers/css";
 import type { ComponentProps, ReactNode } from "react";
-import { TbX } from "react-icons/tb";
 
 import { usePortalContainerRef } from "../../react/state/portal-container-context";
+import { Button } from "./button";
 import {
   Body,
   Card as PanelCard,
@@ -85,8 +85,16 @@ const Content = ({
 const Card = ({ children }: { children: ReactNode }) => (
   <PanelCard
     closeButton={
-      <ArkDialog.CloseTrigger className={closeButtonStyle} aria-label="Close">
-        <TbX />
+      <ArkDialog.CloseTrigger asChild>
+        <Button
+          className={closeButtonStyle}
+          variant="ghost"
+          size="sm"
+          aria-label="Close"
+          tooltip="Close"
+          tooltipDisplay="inline"
+          iconName="close"
+        />
       </ArkDialog.CloseTrigger>
     }
   >
diff --git a/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx b/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx
index 7dde0721c6f..abbcee004af 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/drawer.tsx
@@ -1,9 +1,9 @@
 import { css, cx } from "@hashintel/ds-helpers/css";
 import { type ReactNode, use, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { TbX } from "react-icons/tb";
 
 import { PortalContainerContext } from "../../react/state/portal-container-context";
+import { Button } from "./button";
 import {
   Body,
   Card as PanelCard,
@@ -146,14 +146,16 @@ const Card = ({
 }) => (
   <PanelCard
     closeButton={
-      <button
-        type="button"
+      <Button
         className={closeButtonStyle}
+        variant="ghost"
+        size="sm"
         aria-label="Close"
+        tooltip="Close"
+        tooltipDisplay="inline"
+        iconName="close"
         onClick={onClose}
-      >
-        <TbX />
-      </button>
+      />
     }
   >
     {children}
diff --git a/libs/@hashintel/petrinaut/src/ui/components/icon-button.tsx b/libs/@hashintel/petrinaut/src/ui/components/icon-button.tsx
deleted file mode 100644
index e6743888c0c..00000000000
--- a/libs/@hashintel/petrinaut/src/ui/components/icon-button.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import { cva } from "@hashintel/ds-helpers/css";
-
-import { withTooltip } from "./hoc/with-tooltip";
-
-// -- Styles (Figma: IconButton component) -------------------------------------
-
-const iconButtonStyle = cva({
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "0",
-    border: "none",
-    background: "[transparent]",
-    cursor: "pointer",
-    transition: "[all 0.15s ease]",
-    overflow: "clip",
-  },
-  variants: {
-    size: {
-      xxs: {
-        width: "[20px]",
-        height: "[20px]",
-        borderRadius: "md",
-        fontSize: "xs",
-      },
-      xs: {
-        width: "[24px]",
-        height: "[24px]",
-        borderRadius: "lg",
-        fontSize: "sm",
-      },
-      sm: {
-        width: "[28px]",
-        height: "[28px]",
-        borderRadius: "lg",
-        fontSize: "base",
-      },
-      md: {
-        width: "[32px]",
-        height: "[32px]",
-        borderRadius: "xl",
-        fontSize: "lg",
-      },
-      lg: {
-        width: "[40px]",
-        height: "[40px]",
-        borderRadius: "xl",
-        fontSize: "xl",
-      },
-    },
-    variant: {
-      ghost: {
-        color: "neutral.s105",
-        _hover: {
-          backgroundColor: "neutral.bg.subtle.hover",
-          borderWidth: "[1px]",
-          borderStyle: "solid",
-          borderColor: "neutral.bd.subtle",
-          boxShadow:
-            "[0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 0px rgba(0, 0, 0, 0.06)]",
-        },
-        _active: {
-          backgroundColor: "neutral.bg.subtle",
-          boxShadow: "[inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05)]",
-        },
-        _focusVisible: {
-          boxShadow: "[0px 0px 0px 2px {colors.neutral.a30}]",
-          outline: "none",
-        },
-      },
-      outline: {
-        backgroundColor: "neutral.bg.subtle",
-        borderWidth: "[1px]",
-        borderStyle: "solid",
-        borderColor: "neutral.bd.subtle",
-        color: "neutral.s105",
-        _hover: {
-          backgroundColor: "neutral.bg.subtle.hover",
-          boxShadow:
-            "[0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.06)]",
-        },
-        _active: {
-          boxShadow: "[inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05)]",
-        },
-        _focusVisible: {
-          boxShadow: "[0px 0px 0px 2px {colors.neutral.a30}]",
-          outline: "none",
-        },
-      },
-      subtle: {
-        backgroundColor: "neutral.bg.subtle.hover",
-        color: "neutral.s105",
-        _hover: {
-          borderWidth: "[1px]",
-          borderStyle: "solid",
-          borderColor: "neutral.bd.subtle",
-          boxShadow:
-            "[0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 0px rgba(0, 0, 0, 0.06)]",
-        },
-        _active: {
-          boxShadow: "[inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05)]",
-        },
-        _focusVisible: {
-          boxShadow: "[0px 0px 0px 2px {colors.neutral.a30}]",
-          outline: "none",
-        },
-      },
-      solid: {
-        backgroundColor: "neutral.s120",
-        color: "neutral.s00",
-        borderWidth: "[1px]",
-        borderStyle: "solid",
-        borderColor: "neutral.s125",
-        _hover: {
-          backgroundColor: "neutral.s115",
-        },
-        _active: {
-          boxShadow: "[inset 0px 2px 1px 0px rgba(0, 0, 0, 0.2)]",
-        },
-        _focusVisible: {
-          boxShadow: "[0px 0px 0px 2px {colors.neutral.a30}]",
-          outline: "none",
-        },
-      },
-    },
-    colorScheme: {
-      gray: {},
-      brand: {},
-      red: {},
-    },
-    isDisabled: {
-      true: {
-        opacity: "[0.4]",
-        cursor: "not-allowed",
-        pointerEvents: "none",
-      },
-      false: {},
-    },
-  },
-  compoundVariants: [
-    // brand + solid
-    {
-      variant: "solid",
-      colorScheme: "brand",
-      css: {
-        backgroundColor: "blue.s90",
-        borderColor: "blue.s110",
-        color: "neutral.s00",
-        boxShadow:
-          "[inset 0px -3px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 2px 0.4px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 2px 3px 0px rgba(0, 0, 0, 0.08)]",
-        _hover: {
-          backgroundColor: "blue.s100",
-        },
-      },
-    },
-    // red + outline
-    {
-      variant: "outline",
-      colorScheme: "red",
-      css: {
-        borderColor: "neutral.a30",
-        color: "red.s90",
-        boxShadow:
-          "[0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)]",
-        _hover: {
-          backgroundColor: "red.bg.subtle.hover",
-          borderColor: "red.bd.subtle",
-        },
-      },
-    },
-    // red + ghost
-    {
-      variant: "ghost",
-      colorScheme: "red",
-      css: {
-        color: "neutral.s105",
-        _hover: {
-          color: "red.s90",
-          backgroundColor: "red.bg.subtle.hover",
-          borderColor: "red.bd.subtle",
-        },
-      },
-    },
-  ],
-  defaultVariants: {
-    size: "sm",
-    variant: "ghost",
-    colorScheme: "gray",
-    isDisabled: false,
-  },
-});
-
-type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  /** Size variant: xxs=20px, xs=24px, sm=28px (default), md=32px, lg=40px */
-  size?: "xxs" | "xs" | "sm" | "md" | "lg";
-  /** Style variant */
-  variant?: "ghost" | "outline" | "subtle" | "solid";
-  /** Color scheme */
-  colorScheme?: "gray" | "brand" | "red";
-  /** Icon content */
-  children: React.ReactNode;
-  /** Accessibility label (required for icon-only buttons) */
-  "aria-label": string;
-  /** Ref to the button element */
-  ref?: React.Ref<HTMLButtonElement>;
-};
-
-const IconButtonBase: React.FC<IconButtonProps> = ({
-  size = "sm",
-  variant = "ghost",
-  colorScheme = "gray",
-  disabled,
-  className,
-  children,
-  ref,
-  ...props
-}) => (
-  <button
-    ref={ref}
-    type="button"
-    disabled={disabled}
-    className={`${iconButtonStyle({ size, variant, colorScheme, isDisabled: disabled })}${className ? ` ${className}` : ""}`}
-    {...props}
-  >
-    {children}
-  </button>
-);
-
-export const IconButton = withTooltip(IconButtonBase, "inline");
diff --git a/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx b/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx
index 9e09329a868..e2509ae07fa 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/panel-primitives.tsx
@@ -1,6 +1,7 @@
 import { css, cx } from "@hashintel/ds-helpers/css";
 import type { ReactNode } from "react";
-import { TbX } from "react-icons/tb";
+
+import { Button } from "./button";
 
 /**
  * Shared visual primitives used by Dialog and Drawer.
@@ -46,21 +47,7 @@ export const closeButtonStyle = css({
   position: "absolute",
   top: "2",
   right: "2",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "[30px]",
-  height: "[30px]",
-  fontSize: "base",
-  color: "neutral.s100",
-  backgroundColor: "[transparent]",
-  border: "[none]",
-  borderRadius: "lg",
-  cursor: "pointer",
   zIndex: "[3]",
-  _hover: {
-    backgroundColor: "neutral.bg.min.hover",
-  },
 });
 
 export const Card = ({
@@ -73,9 +60,15 @@ export const Card = ({
   <div className={cardStyle}>
     {children}
     {closeButton ?? (
-      <button type="button" className={closeButtonStyle} aria-label="Close">
-        <TbX />
-      </button>
+      <Button
+        className={closeButtonStyle}
+        variant="ghost"
+        size="sm"
+        aria-label="Close"
+        tooltip="Close"
+        tooltipDisplay="inline"
+        iconName="close"
+      />
     )}
   </div>
 );
diff --git a/libs/@hashintel/petrinaut/src/ui/components/popover.stories.tsx b/libs/@hashintel/petrinaut/src/ui/components/popover.stories.tsx
index a46447c6b3a..9df6c2fa091 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/popover.stories.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/popover.stories.tsx
@@ -1,6 +1,7 @@
 import { css } from "@hashintel/ds-helpers/css";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
+import { Button } from "./button";
 import { Popover } from "./popover";
 
 const meta = {
@@ -14,47 +15,14 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const triggerButtonStyle = css({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  height: "[32px]",
-  paddingX: "[12px]",
-  fontSize: "[14px]",
-  fontWeight: "medium",
-  color: "neutral.s120",
-  backgroundColor: "[white]",
-  border: "[1px solid]",
-  borderColor: "neutral.s30",
-  borderRadius: "[8px]",
-  cursor: "pointer",
-  _hover: {
-    backgroundColor: "neutral.s10",
-  },
-});
-
 const contentWidthStyle = css({
   width: "[240px]",
 });
 
 const itemStyle = css({
-  display: "flex",
-  alignItems: "center",
-  gap: "[8px]",
   width: "[100%]",
-  height: "[28px]",
-  paddingX: "[8px]",
-  borderRadius: "[8px]",
-  fontSize: "[14px]",
-  fontWeight: "medium",
-  color: "neutral.s120",
-  backgroundColor: "[transparent]",
-  border: "none",
-  cursor: "pointer",
+  justifyContent: "flex-start",
   textAlign: "left",
-  _hover: {
-    backgroundColor: "neutral.s10",
-  },
 });
 
 export const Default: Story = {
@@ -62,24 +30,22 @@ export const Default: Story = {
   render: () => (
     <Popover.Root positioning={{ placement: "bottom", gutter: 8 }}>
       <Popover.Trigger asChild>
-        <button type="button" className={triggerButtonStyle}>
-          Open Popover
-        </button>
+        <Button variant="subtle">Open Popover</Button>
       </Popover.Trigger>
       <Popover.Content className={contentWidthStyle}>
         <Popover.Header>Settings</Popover.Header>
         <Popover.Section>
           <Popover.SectionCard>
             <Popover.SectionLabel>Options</Popover.SectionLabel>
-            <button type="button" className={itemStyle}>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               Option A
-            </button>
-            <button type="button" className={itemStyle}>
+            </Button>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               Option B
-            </button>
-            <button type="button" className={itemStyle}>
+            </Button>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               Option C
-            </button>
+            </Button>
           </Popover.SectionCard>
         </Popover.Section>
       </Popover.Content>
@@ -92,32 +58,30 @@ export const MultipleSections: Story = {
   render: () => (
     <Popover.Root positioning={{ placement: "bottom", gutter: 8 }}>
       <Popover.Trigger asChild>
-        <button type="button" className={triggerButtonStyle}>
-          Preferences
-        </button>
+        <Button variant="subtle">Preferences</Button>
       </Popover.Trigger>
       <Popover.Content className={contentWidthStyle}>
         <Popover.Header>Preferences</Popover.Header>
         <Popover.Section>
           <Popover.SectionCard>
             <Popover.SectionLabel>Display</Popover.SectionLabel>
-            <button type="button" className={itemStyle}>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               Light mode
-            </button>
-            <button type="button" className={itemStyle}>
+            </Button>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               Dark mode
-            </button>
+            </Button>
           </Popover.SectionCard>
         </Popover.Section>
         <Popover.Section>
           <Popover.SectionCard>
             <Popover.SectionLabel>Language</Popover.SectionLabel>
-            <button type="button" className={itemStyle}>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               English
-            </button>
-            <button type="button" className={itemStyle}>
+            </Button>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               French
-            </button>
+            </Button>
           </Popover.SectionCard>
         </Popover.Section>
       </Popover.Content>
@@ -130,21 +94,19 @@ export const TopPlacement: Story = {
   render: () => (
     <Popover.Root positioning={{ placement: "top", gutter: 8 }}>
       <Popover.Trigger asChild>
-        <button type="button" className={triggerButtonStyle}>
-          Open above
-        </button>
+        <Button variant="subtle">Open above</Button>
       </Popover.Trigger>
       <Popover.Content className={contentWidthStyle}>
         <Popover.Header>Info</Popover.Header>
         <Popover.Section>
           <Popover.SectionCard>
             <Popover.SectionLabel>Details</Popover.SectionLabel>
-            <button type="button" className={itemStyle}>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               Item one
-            </button>
-            <button type="button" className={itemStyle}>
+            </Button>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               Item two
-            </button>
+            </Button>
           </Popover.SectionCard>
         </Popover.Section>
       </Popover.Content>
@@ -157,18 +119,16 @@ export const OpenByDefault: Story = {
   render: () => (
     <Popover.Root defaultOpen positioning={{ placement: "bottom", gutter: 8 }}>
       <Popover.Trigger asChild>
-        <button type="button" className={triggerButtonStyle}>
-          Already open
-        </button>
+        <Button variant="subtle">Already open</Button>
       </Popover.Trigger>
       <Popover.Content className={contentWidthStyle}>
         <Popover.Header>Popover</Popover.Header>
         <Popover.Section>
           <Popover.SectionCard>
             <Popover.SectionLabel>Content</Popover.SectionLabel>
-            <button type="button" className={itemStyle}>
+            <Button variant="ghost" size="sm" className={itemStyle}>
               This popover starts open
-            </button>
+            </Button>
           </Popover.SectionCard>
         </Popover.Section>
       </Popover.Content>
diff --git a/libs/@hashintel/petrinaut/src/ui/components/popover.tsx b/libs/@hashintel/petrinaut/src/ui/components/popover.tsx
index 44b25004491..46bc26556d3 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/popover.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/popover.tsx
@@ -2,10 +2,9 @@ import { Popover as ArkPopover } from "@ark-ui/react/popover";
 import { Portal } from "@ark-ui/react/portal";
 import { css, cx } from "@hashintel/ds-helpers/css";
 import type { ComponentProps, ReactNode } from "react";
-import { TbX } from "react-icons/tb";
 
 import { usePortalContainerRef } from "../../react/state/portal-container-context";
-import { IconButton } from "./icon-button";
+import { Button } from "./button";
 
 // -- Styles ------------------------------------------------------------------
 
@@ -40,23 +39,6 @@ const titleStyle = css({
   letterSpacing: "[0.48px]",
 });
 
-const closeButtonStyle = css({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "[24px]",
-  height: "[24px]",
-  fontSize: "sm",
-  color: "neutral.s100",
-  backgroundColor: "[transparent]",
-  border: "none",
-  borderRadius: "md",
-  cursor: "pointer",
-  _hover: {
-    backgroundColor: "neutral.bg.min.hover",
-  },
-});
-
 const sectionStyle = css({
   paddingX: "1",
   paddingBottom: "1",
@@ -113,14 +95,14 @@ const Header = ({ children }: { children: ReactNode }) => (
   <div className={headerStyle}>
     <ArkPopover.Title className={titleStyle}>{children}</ArkPopover.Title>
     <ArkPopover.CloseTrigger asChild>
-      <IconButton
+      <Button
         aria-label="Close"
         size="xs"
         variant="ghost"
-        className={closeButtonStyle}
-      >
-        <TbX />
-      </IconButton>
+        iconName="close"
+        tooltip="Close"
+        tooltipDisplay="inline"
+      />
     </ArkPopover.CloseTrigger>
   </div>
 );
diff --git a/libs/@hashintel/petrinaut/src/ui/components/section.stories.tsx b/libs/@hashintel/petrinaut/src/ui/components/section.stories.tsx
index c72802a938b..3aaa5acf815 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/section.stories.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/section.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
+import { Button } from "./button";
 import { Section, SectionList } from "./section";
 
 const meta = {
@@ -82,19 +83,9 @@ export const WithHeaderAction: Story = {
       <Section
         title="Tokens"
         renderHeaderAction={() => (
-          <button
-            type="button"
-            style={{
-              fontSize: 11,
-              padding: "2px 8px",
-              borderRadius: 4,
-              border: "1px solid #ddd",
-              background: "white",
-              cursor: "pointer",
-            }}
-          >
+          <Button variant="subtle" size="xxs">
             Clear
-          </button>
+          </Button>
         )}
       >
         <Placeholder label="Content with action button in header" />
diff --git a/libs/@hashintel/petrinaut/src/ui/components/section.tsx b/libs/@hashintel/petrinaut/src/ui/components/section.tsx
index 3e80e76ee84..e851cd382a3 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/section.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/section.tsx
@@ -1,10 +1,9 @@
 import { Collapsible } from "@ark-ui/react/collapsible";
 import { css, cx } from "@hashintel/ds-helpers/css";
 import { type ReactNode, use } from "react";
-import { FaChevronUp } from "react-icons/fa6";
 
 import { UserSettingsContext } from "../../react/state/user-settings-context";
-import { IconButton } from "./icon-button";
+import { Button } from "./button";
 import { InfoIconTooltip } from "./tooltip";
 
 // -- SectionList (wrapper) --------------------------------------------------
@@ -188,9 +187,14 @@ export const Section = ({
           {headerLeft}
           {renderHeaderAction && <div>{renderHeaderAction()}</div>}
           <Collapsible.Trigger className={triggerButtonStyle} asChild>
-            <IconButton size="xs" variant="ghost" aria-label="Toggle section">
-              <FaChevronUp size={10} />
-            </IconButton>
+            <Button
+              size="xs"
+              variant="ghost"
+              aria-label="Toggle section"
+              iconName="chevronUp"
+              tooltip="Toggle section"
+              tooltipDisplay="inline"
+            />
           </Collapsible.Trigger>
         </div>
         <Collapsible.Content
diff --git a/libs/@hashintel/petrinaut/src/ui/components/segment-group.stories.tsx b/libs/@hashintel/petrinaut/src/ui/components/segment-group.stories.tsx
index 221600241bf..c98ce6de572 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/segment-group.stories.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/segment-group.stories.tsx
@@ -1,9 +1,7 @@
+import { Icon } from "@hashintel/ds-components";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { ComponentProps } from "react";
 import { useState } from "react";
-import { LuLayers2 } from "react-icons/lu";
-import { PiFlaskBold } from "react-icons/pi";
-import { TbCategory, TbCircleFilled, TbPlayerPlay } from "react-icons/tb";
 
 import type { SegmentOption } from "./segment-group";
 import { SegmentGroup } from "./segment-group";
@@ -46,9 +44,17 @@ export const Small: Story = {
 };
 
 const iconOptions: SegmentOption[] = [
-  { value: "edit", label: "Edit", icon: <TbCategory /> },
-  { value: "simulate", label: "Simulate", icon: <TbPlayerPlay /> },
-  { value: "actual", label: "Actual", icon: <TbCircleFilled /> },
+  { value: "edit", label: "Edit", icon: <Icon name="shapes" size="sm" /> },
+  {
+    value: "simulate",
+    label: "Simulate",
+    icon: <Icon name="play" size="sm" />,
+  },
+  {
+    value: "actual",
+    label: "Actual",
+    icon: <Icon name="circleFilled" size="sm" />,
+  },
 ];
 
 export const WithIcons: Story = {
@@ -56,17 +62,22 @@ export const WithIcons: Story = {
 };
 
 const iconOnlyOptions: SegmentOption[] = [
-  { value: "edit", label: "Edit", icon: <TbCategory />, hideLabel: true },
+  {
+    value: "edit",
+    label: "Edit",
+    icon: <Icon name="shapes" />,
+    hideLabel: true,
+  },
   {
     value: "simulate",
     label: "Simulate",
-    icon: <TbPlayerPlay />,
+    icon: <Icon name="play" />,
     hideLabel: true,
   },
   {
     value: "actual",
     label: "Actual",
-    icon: <TbCircleFilled />,
+    icon: <Icon name="circleFilled" size="sm" />,
     hideLabel: true,
   },
 ];
@@ -82,18 +93,18 @@ export const WithDisabledItems: Story = {
     <SegmentGroupStory
       initialValue="edit"
       options={[
-        { value: "edit", label: "Edit", icon: <TbCategory /> },
+        { value: "edit", label: "Edit", icon: <Icon name="shapes" /> },
         {
           value: "simulate",
           label: "Simulate",
-          icon: <TbPlayerPlay />,
+          icon: <Icon name="play" />,
           disabled: true,
           tooltip: "Simulate mode is not yet available.",
         },
         {
           value: "actual",
           label: "Actual",
-          icon: <TbCircleFilled />,
+          icon: <Icon name="circleFilled" size="sm" />,
           disabled: true,
           tooltip: "Actual mode is not yet available.",
         },
@@ -124,14 +135,14 @@ const verticalIconOptions: SegmentOption[] = [
   {
     value: "experiments",
     label: "Experiments",
-    icon: <LuLayers2 size={16} />,
+    icon: <Icon name="layer" size="sm" />,
     hideLabel: true,
     tooltip: "Experiments",
   },
   {
     value: "results",
     label: "Results",
-    icon: <PiFlaskBold size={16} />,
+    icon: <Icon name="flask" size="sm" />,
     hideLabel: true,
     tooltip: "Results",
   },
diff --git a/libs/@hashintel/petrinaut/src/ui/components/select.tsx b/libs/@hashintel/petrinaut/src/ui/components/select.tsx
index b301a757ac1..82a6f5133ac 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/select.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/select.tsx
@@ -3,10 +3,10 @@ import {
   createListCollection,
   Select as ArkSelect,
 } from "@ark-ui/react/select";
+import { Icon } from "@hashintel/ds-components";
 import { css, cva, cx } from "@hashintel/ds-helpers/css";
 import type { ReactNode } from "react";
 import { useMemo } from "react";
-import { FaChevronDown } from "react-icons/fa6";
 
 import { usePortalContainerRef } from "../../react/state/portal-container-context";
 import { withTooltip } from "./hoc/with-tooltip";
@@ -24,11 +24,11 @@ const ConditionalPortal: React.FC<{
 
 type SelectSize = "xs" | "sm" | "md" | "lg";
 
-const ICON_SIZE: Record<SelectSize, number> = {
-  xs: 10,
-  sm: 12,
-  md: 14,
-  lg: 16,
+const ICON_SIZE: Record<SelectSize, "xxs" | "xs" | "sm"> = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "sm",
 };
 
 // -- Styles -------------------------------------------------------------------
@@ -121,10 +121,7 @@ const customTriggerWrapperStyle = css({
 });
 
 const chevronStyle = css({
-  flexShrink: 0,
   color: "[rgba(0, 0, 0, 0.3)]",
-  display: "flex",
-  alignItems: "center",
 });
 
 const positionerStyle = css({
@@ -289,7 +286,7 @@ const SelectBase: React.FC<SelectBaseProps> = ({
             >
               {selectedOption?.label ?? placeholder}
             </span>
-            <FaChevronDown size={iconSize} className={chevronStyle} />
+            <Icon name="chevronDown" size={iconSize} className={chevronStyle} />
           </>
         )}
       </ArkSelect.Trigger>
diff --git a/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx b/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx
index 69128c2e2a3..5e6c33004a0 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/sub-view/vertical/vertical-sub-views-container.tsx
@@ -1,6 +1,6 @@
+import { Icon } from "@hashintel/ds-components";
 import { css, cva, cx } from "@hashintel/ds-helpers/css";
 import React, { Fragment, use, useEffect, useRef, useState } from "react";
-import { FaChevronRight } from "react-icons/fa6";
 import { Group, Panel, Separator } from "react-resizable-panels";
 
 import { UserSettingsContext } from "../../../../react/state/user-settings-context";
@@ -358,7 +358,7 @@ const SubViewHeader: React.FC<SubViewHeaderProps> = ({
   id,
   title,
   tooltip,
-  icon: Icon,
+  icon: HeaderIcon,
   main = false,
   renderTitle,
   isExpanded,
@@ -373,9 +373,9 @@ const SubViewHeader: React.FC<SubViewHeaderProps> = ({
   >
     {main ? (
       <div className={mainHeaderContentStyle}>
-        {Icon && (
+        {HeaderIcon && (
           <span className={headerIconStyle}>
-            <Icon size={HEADER_ICON_SIZE} />
+            <HeaderIcon size={HEADER_ICON_SIZE} />
           </span>
         )}
         {renderTitle ? (
@@ -406,7 +406,7 @@ const SubViewHeader: React.FC<SubViewHeaderProps> = ({
             isExpanded && sectionToggleIconExpandedStyle,
           )}
         >
-          <FaChevronRight size={9} />
+          <Icon name="chevronRight" size="xxs" />
         </div>
         <span className={sectionToggleLabelStyle}>
           {title}
diff --git a/libs/@hashintel/petrinaut/src/ui/components/tooltip.tsx b/libs/@hashintel/petrinaut/src/ui/components/tooltip.tsx
index 424f9959311..a15d04f8210 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/tooltip.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/tooltip.tsx
@@ -1,10 +1,9 @@
 import { ark } from "@ark-ui/react/factory";
 import { Portal } from "@ark-ui/react/portal";
 import { Tooltip as ArkTooltip } from "@ark-ui/react/tooltip";
+import { Icon } from "@hashintel/ds-components";
 import { css, cva, cx } from "@hashintel/ds-helpers/css";
 import type { ReactNode } from "react";
-import { FaInfoCircle } from "react-icons/fa";
-import { LuInfo } from "react-icons/lu";
 
 import { usePortalContainerRef } from "../../react/state/portal-container-context";
 
@@ -121,16 +120,13 @@ const circleInfoIconStyle = css({
 
 export const InfoIconTooltip = ({
   tooltip,
-  outlined,
 }: {
   tooltip: string;
   outlined?: boolean;
 }) => {
-  const Icon = outlined ? LuInfo : FaInfoCircle;
-
   return (
     <Tooltip content={tooltip} display="inline">
-      <Icon size={10} className={circleInfoIconStyle} />
+      <Icon name="info" size="xs" className={circleInfoIconStyle} />
     </Tooltip>
   );
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/constants/entity-icons.tsx b/libs/@hashintel/petrinaut/src/ui/constants/entity-icons.tsx
index 504fbfa22ed..c3d0fa7a96a 100644
--- a/libs/@hashintel/petrinaut/src/ui/constants/entity-icons.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/constants/entity-icons.tsx
@@ -4,17 +4,39 @@
  * Each entity has an outline icon (used in PropertiesPanel headers)
  * and optionally a filled icon (used in list item rows).
  */
-import { FaCircle, FaSquare } from "react-icons/fa6";
-import { LuCircle, LuSettings2, LuSquare } from "react-icons/lu";
-import { RiColorFilterFill, RiFormula } from "react-icons/ri";
+import { Icon, type IconName } from "@hashintel/ds-components";
+
+type IconSize = "xxs" | "xs" | "sm" | "md" | "lg";
+
+const sizeToIconSize = (size: number): IconSize => {
+  if (size <= 9) {
+    return "xxs";
+  }
+  if (size <= 13) {
+    return "xs";
+  }
+  if (size <= 19) {
+    return "sm";
+  }
+  if (size <= 27) {
+    return "md";
+  }
+  return "lg";
+};
+
+const makeIcon =
+  (name: IconName) =>
+  ({ size }: { size: number }) => (
+    <Icon name={name} size={sizeToIconSize(size)} />
+  );
 
 /** Outline icons — used in PropertiesPanel headers */
-export const PlaceIcon = LuCircle;
-export const TransitionIcon = LuSquare;
-export const ParameterIcon = LuSettings2;
-export const TokenTypeIcon = RiColorFilterFill;
-export const DifferentialEquationIcon = RiFormula;
+export const PlaceIcon = makeIcon("circleFilled");
+export const TransitionIcon = makeIcon("squareFilled");
+export const ParameterIcon = makeIcon("sliders");
+export const TokenTypeIcon = makeIcon("threeCircles");
+export const DifferentialEquationIcon = makeIcon("function");
 
 /** Filled icons — used in list item rows */
-export const PlaceFilledIcon = FaCircle;
-export const TransitionFilledIcon = FaSquare;
+export const PlaceFilledIcon = makeIcon("circleFilled");
+export const TransitionFilledIcon = makeIcon("squareFilled");
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx
index eeda9b6536c..5ff21d6e49e 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/bottom-bar.tsx
@@ -1,7 +1,7 @@
+import { Icon } from "@hashintel/ds-components";
 import { css, cva } from "@hashintel/ds-helpers/css";
 import { refractive } from "@hashintel/refractive";
 import { use, useCallback, useEffect } from "react";
-import { FaChevronDown, FaChevronUp } from "react-icons/fa6";
 
 import { LanguageClientContext } from "../../../../../react/lsp/context";
 import {
@@ -154,9 +154,9 @@ export const BottomBar: React.FC<BottomBarProps> = ({
             ariaExpanded={isBottomPanelOpen}
           >
             {isBottomPanelOpen ? (
-              <FaChevronDown size={14} />
+              <Icon name="chevronDown" size="sm" />
             ) : (
-              <FaChevronUp size={14} />
+              <Icon name="chevronUp" size="sm" />
             )}
           </ToolbarButton>
           <DiagnosticsIndicator
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/diagnostics-indicator.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/diagnostics-indicator.tsx
index 32049854344..4de92717acd 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/diagnostics-indicator.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/diagnostics-indicator.tsx
@@ -1,6 +1,6 @@
+import { Icon } from "@hashintel/ds-components";
 import { css, cva } from "@hashintel/ds-helpers/css";
 import { use } from "react";
-import { FaCheck, FaXmark } from "react-icons/fa6";
 
 import { LanguageClientContext } from "../../../../../react/lsp/context";
 import { ToolbarButton } from "./toolbar-button";
@@ -69,11 +69,11 @@ export const DiagnosticsIndicator: React.FC<DiagnosticsIndicatorProps> = ({
       >
         {hasErrors ? (
           <>
-            <FaXmark size={15} />
+            <Icon name="close" size="sm" />
             <span className={countStyle}>{totalDiagnosticsCount}</span>
           </>
         ) : (
-          <FaCheck size={15} />
+          <Icon name="check" size="sm" />
         )}
       </div>
     </ToolbarButton>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/playback-settings-menu.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/playback-settings-menu.tsx
index f9444f6a66f..b3e96077d72 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/playback-settings-menu.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/playback-settings-menu.tsx
@@ -1,14 +1,8 @@
-import { css, cva } from "@hashintel/ds-helpers/css";
+import { Icon } from "@hashintel/ds-components";
+import { css, cva, cx } from "@hashintel/ds-helpers/css";
 import { use } from "react";
-import { MdCheck, MdOutlinePlayArrow } from "react-icons/md";
-import {
-  TbArrowBarToRight,
-  TbChartLine,
-  TbClock,
-  TbInfinity,
-  TbSettings,
-} from "react-icons/tb";
 
+import { Button } from "../../../../components/button";
 import { NumberInput } from "../../../../components/number-input";
 import { Popover } from "../../../../components/popover";
 import {
@@ -26,7 +20,7 @@ const contentWidthStyle = css({
 
 const menuItemStyle = cva({
   base: {
-    display: "flex",
+    display: "flex !important",
     alignItems: "center",
     gap: "2",
     width: "[100%]",
@@ -80,9 +74,7 @@ const menuItemTextStyle = css({
 });
 
 const checkIconStyle = css({
-  fontSize: "sm",
   color: "blue.s50",
-  flexShrink: 0,
 });
 
 const speedGridStyle = css({
@@ -98,6 +90,7 @@ const speedButtonStyle = cva({
     alignItems: "center",
     justifyContent: "center",
     padding: "2",
+    minWidth: "0",
     fontSize: "sm",
     fontWeight: "medium",
     color: "neutral.s120",
@@ -185,7 +178,7 @@ export const PlaybackSettingsMenu = () => {
             tooltip="Playback settings"
             ariaLabel="Playback settings"
           >
-            <TbSettings />
+            <Icon name="gear" />
           </ToolbarButton>
         </span>
       </Popover.Trigger>
@@ -197,68 +190,75 @@ export const PlaybackSettingsMenu = () => {
         <Popover.Section>
           <Popover.SectionCard>
             <Popover.SectionLabel>When pressing play</Popover.SectionLabel>
-            <button
-              type="button"
+            <Button
+              variant="ghost"
+              size="sm"
               className={menuItemStyle({
                 selected: playMode === "viewOnly",
                 disabled: !isViewOnlyAvailable,
               })}
               onClick={() => isViewOnlyAvailable && setPlayMode("viewOnly")}
               aria-disabled={!isViewOnlyAvailable}
-              title={
+              tooltip={
                 !isViewOnlyAvailable
                   ? "Available when there are computed frames"
                   : undefined
               }
             >
-              <MdOutlinePlayArrow className={menuItemIconStyle} />
+              <Icon name="play" className={menuItemIconStyle} size="sm" />
               <span className={menuItemTextStyle}>
                 Play computed steps only
               </span>
               {playMode === "viewOnly" && (
-                <MdCheck className={checkIconStyle} />
+                <Icon name="check" className={checkIconStyle} size="sm" />
               )}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
               className={menuItemStyle({
                 selected: playMode === "computeBuffer",
                 disabled: !isComputeAvailable,
               })}
               onClick={() => isComputeAvailable && setPlayMode("computeBuffer")}
               aria-disabled={!isComputeAvailable}
-              title={
+              tooltip={
                 !isComputeAvailable
                   ? "Not available when simulation is complete"
                   : undefined
               }
             >
-              <TbChartLine className={menuItemIconStyle} />
+              <Icon name="chartLine" className={menuItemIconStyle} size="sm" />
               <span className={menuItemTextStyle}>Play + compute buffer</span>
               {playMode === "computeBuffer" && (
-                <MdCheck className={checkIconStyle} />
+                <Icon name="check" className={checkIconStyle} size="sm" />
               )}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
               className={menuItemStyle({
                 selected: playMode === "computeMax",
                 disabled: !isComputeAvailable,
               })}
               onClick={() => isComputeAvailable && setPlayMode("computeMax")}
               aria-disabled={!isComputeAvailable}
-              title={
+              tooltip={
                 !isComputeAvailable
                   ? "Not available when simulation is complete"
                   : undefined
               }
             >
-              <TbArrowBarToRight className={menuItemIconStyle} />
+              <Icon
+                name="rightToLine"
+                className={menuItemIconStyle}
+                size="sm"
+              />
               <span className={menuItemTextStyle}>Play + compute max</span>
               {playMode === "computeMax" && (
-                <MdCheck className={checkIconStyle} />
+                <Icon name="check" className={checkIconStyle} size="sm" />
               )}
-            </button>
+            </Button>
             <div className={popoverDividerStyle} />
           </Popover.SectionCard>
         </Popover.Section>
@@ -270,16 +270,17 @@ export const PlaybackSettingsMenu = () => {
             {speedRows.map((row) => (
               <div key={row[0]} className={speedGridStyle}>
                 {row.map((speed) => (
-                  <button
+                  <Button
                     key={speed}
-                    type="button"
+                    variant="ghost"
+                    size="sm"
                     className={speedButtonStyle({
                       selected: speed === playbackSpeed,
                     })}
                     onClick={() => setPlaybackSpeed(speed)}
                   >
                     {formatPlaybackSpeed(speed)}
-                  </button>
+                  </Button>
                 ))}
               </div>
             ))}
@@ -291,8 +292,9 @@ export const PlaybackSettingsMenu = () => {
         <Popover.Section>
           <Popover.SectionCard>
             <Popover.SectionLabel>Stopping conditions</Popover.SectionLabel>
-            <button
-              type="button"
+            <Button
+              variant="ghost"
+              size="sm"
               className={menuItemStyle({
                 selected: stoppingCondition === "indefinitely",
                 disabled: hasSimulation,
@@ -301,20 +303,21 @@ export const PlaybackSettingsMenu = () => {
                 !hasSimulation && handleStoppingConditionChange("indefinitely")
               }
               aria-disabled={hasSimulation}
-              title={
+              tooltip={
                 hasSimulation
                   ? "Reset simulation to change stopping conditions"
                   : undefined
               }
             >
-              <TbInfinity className={menuItemIconStyle} />
+              <Icon name="infinity" className={menuItemIconStyle} size="sm" />
               <span className={menuItemTextStyle}>Run indefinitely</span>
               {stoppingCondition === "indefinitely" && (
-                <MdCheck className={checkIconStyle} />
+                <Icon name="check" className={checkIconStyle} size="sm" />
               )}
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
               className={menuItemStyle({
                 selected: stoppingCondition === "fixed",
                 disabled: hasSimulation,
@@ -323,18 +326,18 @@ export const PlaybackSettingsMenu = () => {
                 !hasSimulation && handleStoppingConditionChange("fixed")
               }
               aria-disabled={hasSimulation}
-              title={
+              tooltip={
                 hasSimulation
                   ? "Reset simulation to change stopping conditions"
                   : undefined
               }
             >
-              <TbClock className={menuItemIconStyle} />
+              <Icon name="clock" className={menuItemIconStyle} size="sm" />
               <span className={menuItemTextStyle}>End at fixed time</span>
               {stoppingCondition === "fixed" && (
                 <>
                   <NumberInput
-                    size="xs"
+                    size="sm"
                     min={0.1}
                     step={0.1}
                     value={maxTime ?? 10}
@@ -362,12 +365,13 @@ export const PlaybackSettingsMenu = () => {
                 </>
               )}
               {stoppingCondition !== "fixed" && (
-                <MdCheck
-                  className={checkIconStyle}
-                  style={{ visibility: "hidden" }}
+                <Icon
+                  name="check"
+                  className={cx(checkIconStyle, css({ visibility: "hidden" }))}
+                  size="sm"
                 />
               )}
-            </button>
+            </Button>
             <div className={popoverDividerStyle} />
           </Popover.SectionCard>
         </Popover.Section>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/simulation-controls.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/simulation-controls.tsx
index 3e8d462bfba..33282bb915e 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/simulation-controls.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/simulation-controls.tsx
@@ -1,7 +1,6 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use } from "react";
-import { IoMdPause, IoMdPlay } from "react-icons/io";
-import { MdRotateLeft } from "react-icons/md";
 
 import { PlaybackContext } from "../../../../../react/playback/context";
 import { SimulationContext } from "../../../../../react/simulation/context";
@@ -171,7 +170,7 @@ export const SimulationControls: React.FC<SimulationControlsProps> = ({
             disabled={isDisabled}
             ariaLabel="Reset simulation"
           >
-            <MdRotateLeft />
+            <Icon name="rotateLeft" />
           </ToolbarButton>
           <ToolbarDivider />
         </>
@@ -184,7 +183,11 @@ export const SimulationControls: React.FC<SimulationControlsProps> = ({
         disabled={isPlayDisabled}
         ariaLabel={getPlayPauseAriaLabel()}
       >
-        {isPlaybackPlaying ? <IoMdPause /> : <IoMdPlay />}
+        {isPlaybackPlaying ? (
+          <Icon name="pauseFilled" />
+        ) : (
+          <Icon name="playFilled" />
+        )}
       </ToolbarButton>
 
       {/* Frame controls - only visible when simulation exists */}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx
index e7c8acaacde..6c1a8b4653a 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/BottomBar/toolbar-modes.tsx
@@ -1,7 +1,5 @@
+import { Icon } from "@hashintel/ds-components";
 import { css, cva } from "@hashintel/ds-helpers/css";
-import { FaChevronDown, FaRegHand } from "react-icons/fa6";
-import { LuMousePointerClick } from "react-icons/lu";
-import { TbCirclePlus2, TbSquarePlus2 } from "react-icons/tb";
 
 import { Menu, type MenuItem } from "../../../../components/menu";
 import type {
@@ -74,7 +72,7 @@ const CursorModeDropdown: React.FC<{
   const items: MenuItem[] = [
     {
       id: "select",
-      icon: <LuMousePointerClick size={14} />,
+      icon: <Icon name="cursor" size="sm" />,
       label: "Select",
       suffix: "V",
       selected: cursorMode === "select",
@@ -82,7 +80,7 @@ const CursorModeDropdown: React.FC<{
     },
     {
       id: "pan",
-      icon: <FaRegHand size={14} />,
+      icon: <Icon name="hand" size="sm" />,
       label: "Pan",
       suffix: "H",
       selected: cursorMode === "pan",
@@ -99,11 +97,11 @@ const CursorModeDropdown: React.FC<{
           aria-label="Cursor mode"
         >
           {cursorMode === "pan" ? (
-            <FaRegHand size={16} />
+            <Icon name="hand" size="sm" />
           ) : (
-            <LuMousePointerClick size={16} />
+            <Icon name="cursor" size="sm" />
           )}
-          <FaChevronDown size={7} className={dropdownArrowStyle} />
+          <Icon name="chevronDown" size="xs" className={dropdownArrowStyle} />
         </button>
       }
       items={items}
@@ -151,7 +149,7 @@ export const ToolbarModes: React.FC<ToolbarModesProps> = ({
               event.dataTransfer.setData("application/reactflow", "place");
             }}
           >
-            <TbCirclePlus2 />
+            <Icon name="circlePlus" />
           </ToolbarButton>
           <ToolbarButton
             tooltip="Add Transition (T)"
@@ -165,7 +163,7 @@ export const ToolbarModes: React.FC<ToolbarModesProps> = ({
               event.dataTransfer.setData("application/reactflow", "transition");
             }}
           >
-            <TbSquarePlus2 />
+            <Icon name="squarePlus" />
           </ToolbarButton>
         </>
       )}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx
index df37bce271e..f12a7841687 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/mode-selector.tsx
@@ -1,4 +1,4 @@
-import { TbCategory, TbCircleFilled, TbPlayerPlay } from "react-icons/tb";
+import { Icon } from "@hashintel/ds-components";
 
 import type { SegmentOption } from "../../../../components/segment-group";
 import { SegmentGroup } from "../../../../components/segment-group";
@@ -12,17 +12,17 @@ const options: SegmentOption[] = [
   {
     label: "Edit",
     value: "edit",
-    icon: <TbCategory />,
+    icon: <Icon name="shapes" size="sm" />,
   },
   {
     label: "Simulate",
     value: "simulate",
-    icon: <TbPlayerPlay />,
+    icon: <Icon name="play" size="sm" />,
   },
   {
     label: "Actual",
     value: "actual",
-    icon: <TbCircleFilled />,
+    icon: <Icon name="circleFilled" size="sm" />,
     disabled: true,
     tooltip: "Actual mode is not yet available.",
   },
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx
index d69befbce96..e9cce919bf2 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/top-bar.tsx
@@ -1,12 +1,7 @@
 import { css } from "@hashintel/ds-helpers/css";
 import { use } from "react";
-import { FaBars } from "react-icons/fa6";
-import {
-  TbLayoutSidebarLeftCollapse,
-  TbLayoutSidebarRightCollapse,
-} from "react-icons/tb";
 
-import { IconButton } from "../../../../components/icon-button";
+import { Button } from "../../../../components/button";
 import { Menu, type MenuItem } from "../../../../components/menu";
 import {
   EditorContext,
@@ -73,8 +68,8 @@ export const TopBar: React.FC<TopBarProps> = ({
   return (
     <div className={topBarStyle}>
       <div className={leftSectionStyle}>
-        <IconButton
-          size="xs"
+        <Button
+          size="sm"
           variant="ghost"
           onClick={() => {
             setLeftSidebarOpen(!isLeftSidebarOpen);
@@ -83,19 +78,21 @@ export const TopBar: React.FC<TopBarProps> = ({
             }
           }}
           aria-label={isLeftSidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
-        >
-          {isLeftSidebarOpen ? (
-            <TbLayoutSidebarLeftCollapse size={16} />
-          ) : (
-            <TbLayoutSidebarRightCollapse size={16} />
-          )}
-        </IconButton>
+          tooltip={isLeftSidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
+          tooltipDisplay="inline"
+          iconName="sidebar"
+        />
 
         <Menu
           trigger={
-            <IconButton aria-label="Menu" size="sm" variant="ghost">
-              <FaBars />
-            </IconButton>
+            <Button
+              aria-label="Menu"
+              size="sm"
+              variant="ghost"
+              tooltip="Menu"
+              tooltipDisplay="inline"
+              iconName="bars"
+            />
           }
           items={menuItems}
           animated
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/version-history-button.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/version-history-button.tsx
index 639c721c999..d0f14972f48 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/version-history-button.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/components/TopBar/version-history-button.tsx
@@ -1,7 +1,7 @@
+import { Icon } from "@hashintel/ds-components";
 import { use, useMemo } from "react";
-import { LuCheck, LuHistory } from "react-icons/lu";
 
-import { IconButton } from "../../../../components/icon-button";
+import { Button } from "../../../../components/button";
 import { Menu, type MenuItem } from "../../../../components/menu";
 import { UndoRedoContext } from "../../../../../react/state/undo-redo-context";
 
@@ -29,7 +29,7 @@ export const VersionHistoryButton = () => {
       return {
         id: `version-${String(realIndex)}`,
         label: formatTime(entry.timestamp),
-        suffix: isCurrent && <LuCheck size={14} />,
+        suffix: isCurrent && <Icon name="check" size="sm" />,
         selected: isCurrent,
         onClick: () => goToIndex(realIndex),
       };
@@ -43,9 +43,14 @@ export const VersionHistoryButton = () => {
   return (
     <Menu
       trigger={
-        <IconButton size="md" variant="ghost" aria-label="Version history">
-          <LuHistory size={16} />
-        </IconButton>
+        <Button
+          size="md"
+          variant="ghost"
+          aria-label="Version history"
+          tooltip="Version history"
+          tooltipDisplay="inline"
+          iconName="clockRotateLeft"
+        />
       }
       items={menuItems}
       animated
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx
index 719a46b8764..d89772fdc7d 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/panel.tsx
@@ -1,9 +1,8 @@
 import { css, cva, cx } from "@hashintel/ds-helpers/css";
 import { use, useEffect, useRef } from "react";
-import { FaXmark } from "react-icons/fa6";
 
+import { Button } from "../../../../components/button";
 import { GlassPanel } from "../../../../components/glass-panel";
-import { IconButton } from "../../../../components/icon-button";
 import {
   HorizontalTabsContent,
   HorizontalTabsHeader,
@@ -179,14 +178,15 @@ export const BottomPanel: React.FC = () => {
             subViews={subViews}
             activeTabId={activeTab}
           />
-          <IconButton
+          <Button
             size="xxs"
             variant="ghost"
             onClick={toggleBottomPanel}
             aria-label="Close panel"
-          >
-            <FaXmark size={14} />
-          </IconButton>
+            tooltip="Close panel"
+            tooltipDisplay="inline"
+            iconName="close"
+          />
         </div>
       </div>
 
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx
index a455cf667d7..d861194f6ab 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx
@@ -1,7 +1,6 @@
+import { Icon, Button } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use, useCallback, useMemo, useState } from "react";
-import { FaChevronDown, FaChevronRight } from "react-icons/fa6";
-import { TbArrowRight } from "react-icons/tb";
 import type { Diagnostic } from "vscode-languageserver-types";
 
 import type { SubView } from "../../../../../components/sub-view/types";
@@ -118,25 +117,10 @@ const simulationErrorTextStyle = css({
 });
 
 const editButtonStyle = css({
-  fontSize: "[11px]",
-  paddingY: "1",
-  paddingX: "2",
-  border: "[1px solid rgba(211, 47, 47, 0.3)]",
-  borderRadius: "sm",
-  backgroundColor: "neutral.s00",
-  cursor: "pointer",
-  color: "red.s60",
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "1",
   marginTop: "1",
   alignSelf: "flex-start",
 });
 
-const editButtonIconStyle = css({
-  fontSize: "xs",
-});
-
 type EntityType = "transition" | "differential-equation";
 
 interface GroupedDiagnostics {
@@ -261,8 +245,7 @@ const DiagnosticsContent: React.FC = () => {
         <div className={simulationErrorStyle}>
           <pre className={simulationErrorTextStyle}>{simulationError}</pre>
           {errorItemId && (
-            <button
-              type="button"
+            <Button
               onClick={() => {
                 setGlobalMode("edit");
                 const itemType = getItemType(errorItemId);
@@ -271,10 +254,14 @@ const DiagnosticsContent: React.FC = () => {
                 }
               }}
               className={editButtonStyle}
+              iconName="arrowRight"
+              tone="error"
+              variant="subtle"
+              size="sm"
+              iconPosition="right"
             >
               Edit Item
-              <TbArrowRight className={editButtonIconStyle} />
-            </button>
+            </Button>
           )}
         </div>
       )}
@@ -296,9 +283,9 @@ const DiagnosticsContent: React.FC = () => {
               className={entityButtonStyle}
             >
               {isExpanded ? (
-                <FaChevronDown size={10} />
+                <Icon name="chevronDown" size="xs" />
               ) : (
-                <FaChevronRight size={10} />
+                <Icon name="chevronRight" size="xs" />
               )}
               <span>{entityLabel}</span>
               <span className={errorCountStyle}>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
index 2836c0b0033..963addb5bc8 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
@@ -1,8 +1,8 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use, useState } from "react";
-import { TbList, TbMinus, TbPencil, TbPlus } from "react-icons/tb";
 
-import { IconButton } from "../../../../../components/icon-button";
+import { Button } from "../../../../../components/button";
 import { NumberInput } from "../../../../../components/number-input";
 import { Select } from "../../../../../components/select";
 import { Slider } from "../../../../../components/slider";
@@ -238,7 +238,11 @@ const SimulationSettingsContent: React.FC = () => {
           renderItem={(option) => (
             <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
               {option.value === NO_SCENARIO && (
-                <TbMinus size={12} style={{ opacity: 0.4 }} />
+                <Icon
+                  name="dash"
+                  size="xs"
+                  className={css({ opacity: "[0.4]" })}
+                />
               )}
               {option.label}
             </span>
@@ -246,34 +250,34 @@ const SimulationSettingsContent: React.FC = () => {
         />
         <div style={{ display: "flex" }}>
           {selectedScenario && (
-            <IconButton
-              size="xs"
+            <Button
+              size="sm"
               variant="ghost"
               aria-label="Edit scenario"
               tooltip="Edit Scenario"
+              tooltipDisplay="inline"
+              iconName="pencil"
               onClick={() => setIsViewScenarioOpen(true)}
-            >
-              <TbPencil size={14} />
-            </IconButton>
+            />
           )}
-          <IconButton
-            size="xs"
+          <Button
+            size="sm"
             variant="ghost"
             aria-label="Create scenario"
             tooltip="Create Scenario"
+            tooltipDisplay="inline"
+            iconName="plus"
             onClick={() => setIsCreateScenarioOpen(true)}
-          >
-            <TbPlus size={14} />
-          </IconButton>
-          <IconButton
-            size="xs"
+          />
+          <Button
+            size="sm"
             variant="ghost"
             aria-label="Manage scenarios"
             tooltip="Manage Scenarios"
+            tooltipDisplay="inline"
+            iconName="list"
             onClick={() => setGlobalMode("simulate")}
-          >
-            <TbList size={14} />
-          </IconButton>
+          />
         </div>
       </div>
       <CreateScenarioDrawer
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx
index 54da3d730c2..1bcad5720dc 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-timeline.tsx
@@ -1,10 +1,9 @@
 import { css } from "@hashintel/ds-helpers/css";
 import { use, useEffect, useMemo, useRef, useState } from "react";
-import { TbList, TbPencil, TbPlus } from "react-icons/tb";
 import uPlot from "uplot";
 import "uplot/dist/uPlot.min.css";
 
-import { IconButton } from "../../../../../components/icon-button";
+import { Button } from "../../../../../components/button";
 import { SegmentGroup } from "../../../../../components/segment-group";
 import { Select } from "../../../../../components/select";
 import type { SubView } from "../../../../../components/sub-view/types";
@@ -235,37 +234,37 @@ const TimelineViewPicker: React.FC = () => {
       </div>
       <div style={{ display: "flex" }}>
         {selectedMetric && (
-          <IconButton
-            size="xs"
+          <Button
+            size="sm"
             variant="ghost"
             aria-label="Edit metric"
             tooltip="Edit Metric"
+            tooltipDisplay="inline"
+            iconName="pencil"
             onClick={() => setIsViewOpen(true)}
-          >
-            <TbPencil size={14} />
-          </IconButton>
+          />
         )}
-        <IconButton
-          size="xs"
+        <Button
+          size="sm"
           variant="ghost"
           aria-label="Create metric"
           tooltip="Create Metric"
+          tooltipDisplay="inline"
+          iconName="plus"
           onClick={() => setIsCreateOpen(true)}
-        >
-          <TbPlus size={14} />
-        </IconButton>
-        <IconButton
-          size="xs"
+        />
+        <Button
+          size="sm"
           variant="ghost"
           aria-label="Manage metrics"
           tooltip="Manage Metrics"
+          tooltipDisplay="inline"
+          iconName="list"
           onClick={() => {
             setSimulateViewMode("metrics");
             setGlobalMode("simulate");
           }}
-        >
-          <TbList size={14} />
-        </IconButton>
+        />
       </div>
       <CreateMetricDrawer
         open={isCreateOpen}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx
index 12f50e755a5..c93ce936a84 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx
@@ -1,8 +1,8 @@
+import { Icon } from "@hashintel/ds-components";
 import { use } from "react";
-import { TbPlus, TbTrash } from "react-icons/tb";
 import { v4 as uuidv4 } from "uuid";
 
-import { IconButton } from "../../../../../components/icon-button";
+import { Button } from "../../../../../components/button";
 import type { SubView } from "../../../../../components/sub-view/types";
 import { DifferentialEquationIcon } from "../../../../../constants/entity-icons";
 import { UI_MESSAGES } from "../../../../../constants/ui-messages";
@@ -29,11 +29,16 @@ export const DifferentialEquationsSectionHeaderAction: React.FC = () => {
   const isReadOnly = useIsReadOnly();
 
   return (
-    <IconButton
+    <Button
       aria-label="Add differential equation"
       size="xs"
+      variant="ghost"
       disabled={isReadOnly}
-      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : undefined}
+      tooltip={
+        isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Add differential equation"
+      }
+      tooltipDisplay="inline"
+      iconName="plus"
       onClick={() => {
         const name = `Equation ${differentialEquations.length + 1}`;
         const id = uuidv4();
@@ -45,9 +50,7 @@ export const DifferentialEquationsSectionHeaderAction: React.FC = () => {
         });
         selectItem({ type: "differentialEquation", id });
       }}
-    >
-      <TbPlus />
-    </IconButton>
+    />
   );
 };
 
@@ -61,7 +64,7 @@ const DiffEqRowMenu: React.FC<{ item: { id: string } }> = ({ item }) => {
         {
           id: "delete",
           label: "Delete",
-          icon: <TbTrash />,
+          icon: <Icon name="trash" />,
           destructive: true,
           disabled: isReadOnly,
           onClick: () => removeDifferentialEquation(item.id),
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx
index f439d73e342..35eafdd3fec 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx
@@ -1,7 +1,7 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import type { ComponentType } from "react";
 import { use } from "react";
-import { TbTrash } from "react-icons/tb";
 
 import type { SubView } from "../../../../../components/sub-view/types";
 import {
@@ -82,7 +82,7 @@ const EntityRowMenu: React.FC<{ item: EntityTreeItem }> = ({ item }) => {
         {
           id: "delete",
           label: "Delete",
-          icon: <TbTrash />,
+          icon: <Icon name="trash" />,
           destructive: true,
           disabled: isReadOnly,
           onClick: deleteAction,
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx
index ccde5e0dd9d..86a1757227c 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx
@@ -1,10 +1,9 @@
+import { Icon } from "@hashintel/ds-components";
 import { css, cva } from "@hashintel/ds-helpers/css";
 import type { ComponentType, ReactNode } from "react";
 import { Fragment, use, useEffect, useRef, useState } from "react";
-import { LuChevronRight, LuSearch } from "react-icons/lu";
-import { TbDots } from "react-icons/tb";
 
-import { IconButton } from "../../../../../components/icon-button";
+import { Button } from "../../../../../components/button";
 import type { MenuItem } from "../../../../../components/menu";
 import { Menu } from "../../../../../components/menu";
 import type {
@@ -158,7 +157,6 @@ const chevronStyle = cva({
   },
 });
 
-const CHEVRON_SIZE = 10;
 const NESTING_INDENT = 16;
 
 const emptyMessageStyle = css({
@@ -203,13 +201,15 @@ const FilterHeaderAction: React.FC<{
 
   return (
     <>
-      <IconButton
+      <Button
         aria-label="Search list"
+        tooltip="Search list"
+        tooltipDisplay="inline"
         size="xs"
+        variant="ghost"
+        iconName="search"
         onClick={() => setSearchOpen(true)}
-      >
-        <LuSearch />
-      </IconButton>
+      />
       {renderExtraAction?.()}
     </>
   );
@@ -228,14 +228,16 @@ export const RowMenu: React.FC<{ items: MenuItem[] }> = ({ items }) => {
     <Menu
       animated
       trigger={
-        <IconButton
+        <Button
           aria-label="More options"
+          tooltip="More options"
+          tooltipDisplay="inline"
           size="xxs"
+          variant="ghost"
+          iconName="ellipsis"
           data-row-action
           onClick={(event) => event.stopPropagation()}
-        >
-          <TbDots />
-        </IconButton>
+        />
       }
       items={items}
       placement="bottom-end"
@@ -567,7 +569,7 @@ const FilterableListContent = <T extends FilterableListItem>({
               <div className={listItemContentStyle}>
                 {isItemGroup && (
                   <span className={chevronStyle({ expanded: !isCollapsed })}>
-                    <LuChevronRight size={CHEVRON_SIZE} />
+                    <Icon name="chevronRight" size="xxs" />
                   </span>
                 )}
                 {item.icon && (
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx
index fa5284404c1..40ed10a95f8 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx
@@ -1,9 +1,9 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use } from "react";
-import { TbPlus, TbTrash } from "react-icons/tb";
 import { v4 as uuidv4 } from "uuid";
 
-import { IconButton } from "../../../../../components/icon-button";
+import { Button } from "../../../../../components/button";
 import type { SubView } from "../../../../../components/sub-view/types";
 import { ParameterIcon } from "../../../../../constants/entity-icons";
 import { UI_MESSAGES } from "../../../../../constants/ui-messages";
@@ -50,15 +50,16 @@ export const ParametersHeaderAction: React.FC = () => {
   };
 
   return (
-    <IconButton
+    <Button
       aria-label="Add parameter"
       size="xs"
+      variant="ghost"
       disabled={isReadOnly}
-      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : undefined}
+      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Add parameter"}
+      tooltipDisplay="inline"
+      iconName="plus"
       onClick={handleAddParameter}
-    >
-      <TbPlus />
-    </IconButton>
+    />
   );
 };
 
@@ -77,7 +78,7 @@ const ParameterRowMenu: React.FC<{ item: { id: string } }> = ({ item }) => {
         {
           id: "delete",
           label: "Delete",
-          icon: <TbTrash />,
+          icon: <Icon name="trash" />,
           destructive: true,
           disabled: isReadOnly,
           onClick: () => removeParameter(item.id),
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx
index 211690d5001..55a81e7f5a2 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx
@@ -1,10 +1,12 @@
+import { Icon } from "@hashintel/ds-components";
 import { css, cva } from "@hashintel/ds-helpers/css";
 import fuzzysort from "fuzzysort";
 import type { ComponentType, ReactNode } from "react";
 import { use, useEffect, useRef, useState } from "react";
-import { LuSearch } from "react-icons/lu";
 
-import { IconButton } from "../../../../../components/icon-button";
+const SearchIcon = () => <Icon name="search" />;
+
+import { Button } from "../../../../../components/button";
 import type { SubView } from "../../../../../components/sub-view/types";
 import {
   DifferentialEquationIcon,
@@ -421,20 +423,22 @@ const SearchHeaderAction: React.FC = () => {
   const { setSearchOpen } = use(EditorContext);
 
   return (
-    <IconButton
+    <Button
       aria-label="Close search"
+      tooltip="Close search"
+      tooltipDisplay="inline"
+      variant="ghost"
       size="xxs"
+      iconName="close"
       onClick={() => setSearchOpen(false)}
-    >
-      ✕
-    </IconButton>
+    />
   );
 };
 
 export const searchSubView: SubView = {
   id: "search",
   title: "Search",
-  icon: LuSearch,
+  icon: SearchIcon,
   component: SearchContent,
   renderTitle: () => <SearchTitle />,
   renderHeaderAction: () => <SearchHeaderAction />,
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx
index 1c81f6b7442..513553d8908 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/types-list.tsx
@@ -1,7 +1,7 @@
+import { Icon } from "@hashintel/ds-components";
 import { use } from "react";
-import { TbPlus, TbTrash } from "react-icons/tb";
 
-import { IconButton } from "../../../../../components/icon-button";
+import { Button } from "../../../../../components/button";
 import type { SubView } from "../../../../../components/sub-view/types";
 import { TokenTypeIcon } from "../../../../../constants/entity-icons";
 import { UI_MESSAGES } from "../../../../../constants/ui-messages";
@@ -71,11 +71,14 @@ export const TypesSectionHeaderAction: React.FC = () => {
   const isReadOnly = useIsReadOnly();
 
   return (
-    <IconButton
+    <Button
       aria-label="Add token type"
       size="xs"
+      variant="ghost"
       disabled={isReadOnly}
-      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : undefined}
+      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Add token type"}
+      tooltipDisplay="inline"
+      iconName="plus"
       onClick={() => {
         const existingColors = types.map((type) => type.displayColor);
         const existingNames = types.map((type) => type.name);
@@ -99,9 +102,7 @@ export const TypesSectionHeaderAction: React.FC = () => {
         addType(newType);
         selectItem({ type: "type", id });
       }}
-    >
-      <TbPlus />
-    </IconButton>
+    />
   );
 };
 
@@ -115,7 +116,7 @@ const TypeRowMenu: React.FC<{ item: { id: string } }> = ({ item }) => {
         {
           id: "delete",
           label: "Delete",
-          icon: <TbTrash />,
+          icon: <Icon name="trash" />,
           destructive: true,
           disabled: isReadOnly,
           onClick: () => removeType(item.id),
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx
index c7579973681..e1331afc190 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx
@@ -1,9 +1,10 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { createContext, use } from "react";
-import { PiScribbleLoopBold } from "react-icons/pi";
-import { TbTrash } from "react-icons/tb";
 
-import { IconButton } from "../../../../../components/icon-button";
+import { Button } from "../../../../../components/button";
+
+const ArcIcon = () => <Icon name="scribble" />;
 import { NumberInput } from "../../../../../components/number-input";
 import { Section, SectionList } from "../../../../../components/section";
 import { Select } from "../../../../../components/select";
@@ -138,26 +139,27 @@ const DeleteArcAction: React.FC = () => {
   const isReadOnly = useIsReadOnly();
 
   return (
-    <IconButton
+    <Button
       aria-label="Delete"
       size="xs"
-      colorScheme="red"
+      variant="ghost"
+      tone="error"
+      iconName="trash"
       onClick={() => {
         removeArc(transitionId, arcDirection, placeId);
         clearSelection();
       }}
       disabled={isReadOnly}
       tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"}
-    >
-      <TbTrash />
-    </IconButton>
+      tooltipDisplay="inline"
+    />
   );
 };
 
 const arcMainContentSubView: SubView = {
   id: "arc-main-content",
   title: "Arc",
-  icon: PiScribbleLoopBold,
+  icon: ArcIcon,
   main: true,
   component: ArcMainContent,
   renderHeaderAction: () => <DeleteArcAction />,
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx
index 13695d5d558..09ff752c6cd 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx
@@ -1,9 +1,8 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { useState } from "react";
-import { TbDotsVertical, TbSparkles } from "react-icons/tb";
 
 import { Button } from "../../../../../../components/button";
-import { IconButton } from "../../../../../../components/icon-button";
 import { Input } from "../../../../../../components/input";
 import { Menu } from "../../../../../../components/menu";
 import { Section, SectionList } from "../../../../../../components/section";
@@ -86,10 +85,6 @@ const aiMenuItemStyle = css({
   gap: "[6px]",
 });
 
-const aiIconStyle = css({
-  fontSize: "base",
-});
-
 const DiffEqMainContent: React.FC = () => {
   const { differentialEquation, types, places, updateDifferentialEquation } =
     useDiffEqPropertiesContext();
@@ -295,9 +290,14 @@ const DiffEqCodeAction: React.FC = () => {
     <Menu
       animated
       trigger={
-        <IconButton aria-label="More options" size="xs">
-          <TbDotsVertical />
-        </IconButton>
+        <Button
+          aria-label="More options"
+          tooltip="More options"
+          tooltipDisplay="inline"
+          variant="ghost"
+          size="xs"
+          iconName="ellipsisVertical"
+        />
       }
       items={[
         {
@@ -326,7 +326,7 @@ const DiffEqCodeAction: React.FC = () => {
               display="inline"
             >
               <div className={aiMenuItemStyle}>
-                <TbSparkles className={aiIconStyle} />
+                <Icon name="sparkles" size="sm" />
                 Generate with AI
               </div>
             </Tooltip>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx
index e013b3c3883..8f545412475 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx
@@ -1,9 +1,10 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { createContext, use } from "react";
-import { GrMultiple } from "react-icons/gr";
-import { TbTrash } from "react-icons/tb";
 
-import { IconButton } from "../../../../components/icon-button";
+const MultipleIcon = () => <Icon name="layer" />;
+
+import { Button } from "../../../../components/button";
 import type { SubView } from "../../../../components/sub-view/types";
 import { VerticalSubViewsContainer } from "../../../../components/sub-view/vertical/vertical-sub-views-container";
 import { UI_MESSAGES } from "../../../../constants/ui-messages";
@@ -78,26 +79,27 @@ const DeleteSelectionAction: React.FC = () => {
   const isReadOnly = useIsReadOnly();
 
   return (
-    <IconButton
+    <Button
       aria-label="Delete selected"
       size="xs"
-      colorScheme="red"
+      variant="ghost"
+      tone="error"
+      iconName="trash"
       disabled={isReadOnly}
       onClick={() => {
         deleteItemsByIds(new Map(items.map((item) => [item.id, item])));
         clearSelection();
       }}
       tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete selected"}
-    >
-      <TbTrash />
-    </IconButton>
+      tooltipDisplay="inline"
+    />
   );
 };
 
 const multiSelectionMainSubView: SubView = {
   id: "multi-selection-main",
   title: "Multiple Selection",
-  icon: GrMultiple,
+  icon: MultipleIcon,
   main: true,
   component: MultiSelectionContent,
   renderHeaderAction: () => <DeleteSelectionAction />,
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx
index c2170705aed..84acef02615 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx
@@ -1,10 +1,8 @@
-import { Checkbox } from "@hashintel/ds-components";
+import { Checkbox, Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use, useEffect, useRef, useState } from "react";
-import { TbArrowRight, TbTrash } from "react-icons/tb";
 
 import { Button } from "../../../../../../components/button";
-import { IconButton } from "../../../../../../components/icon-button";
 import { Input } from "../../../../../../components/input";
 import { Section, SectionList } from "../../../../../../components/section";
 import { Select, type SelectOption } from "../../../../../../components/select";
@@ -214,7 +212,7 @@ const PlaceMainContent: React.FC = () => {
                     }
                   }
                 }}
-                suffix={<TbArrowRight />}
+                suffix={<Icon name="arrowRight" />}
               >
                 Jump to Type
               </Button>
@@ -303,7 +301,7 @@ const PlaceMainContent: React.FC = () => {
                           });
                         }
                       }}
-                      suffix={<TbArrowRight />}
+                      suffix={<Icon name="arrowRight" />}
                     >
                       Jump to Differential Equation
                     </Button>
@@ -344,16 +342,17 @@ const DeletePlaceAction: React.FC = () => {
   const { removePlace } = use(MutationContext);
 
   return (
-    <IconButton
+    <Button
       aria-label="Delete"
       size="xs"
-      colorScheme="red"
+      variant="ghost"
+      tone="error"
+      iconName="trash"
       onClick={() => removePlace(place.id)}
       disabled={isReadOnly}
       tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"}
-    >
-      <TbTrash />
-    </IconButton>
+      tooltipDisplay="inline"
+    />
   );
 };
 
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx
index d5308e48110..b7eae102a18 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-initial-state/subview.tsx
@@ -1,8 +1,8 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use } from "react";
-import { LuLayers2 } from "react-icons/lu";
-import { TbTrash } from "react-icons/tb";
 
+import { Button } from "../../../../../../../components/button";
 import { NumberInput } from "../../../../../../../components/number-input";
 import type { SubView } from "../../../../../../../components/sub-view/types";
 import { UI_MESSAGES } from "../../../../../../../constants/ui-messages";
@@ -23,22 +23,6 @@ const simpleStateContainerStyle = css({
   gap: "[8px]",
 });
 
-const clearButtonStyle = css({
-  fontSize: "[10px]",
-  padding: "[1px 4px]",
-  border: "[1px solid rgba(0, 0, 0, 0.2)]",
-  borderRadius: "[3px]",
-  backgroundColor: "neutral.s00",
-  cursor: "pointer",
-  color: "[#666]",
-  display: "flex",
-  alignItems: "center",
-  gap: "[4px]",
-  _hover: {
-    backgroundColor: "[rgba(0, 0, 0, 0.03)]",
-  },
-});
-
 const scenarioInfoStyle = css({
   display: "flex",
   alignItems: "center",
@@ -67,7 +51,7 @@ const ClearStateHeaderAction: React.FC = () => {
   if (selectedScenarioId) {
     return (
       <div className={scenarioInfoStyle}>
-        <LuLayers2 size={12} />
+        <Icon name="layer" size="xs" />
         Defined by scenario
       </div>
     );
@@ -86,10 +70,15 @@ const ClearStateHeaderAction: React.FC = () => {
   };
 
   return (
-    <button type="button" onClick={handleClear} className={clearButtonStyle}>
-      <TbTrash size={12} color="#a72b2bff" />
+    <Button
+      onClick={handleClear}
+      variant="subtle"
+      tone="error"
+      size="xxs"
+      iconName="trash"
+    >
       Clear state
-    </button>
+    </Button>
   );
 };
 
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx
index aa90453ecd8..eb7cc0b2825 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx
@@ -1,8 +1,8 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use, useEffect, useMemo, useState } from "react";
-import { TbDotsVertical, TbSparkles } from "react-icons/tb";
 
-import { IconButton } from "../../../../../../../components/icon-button";
+import { Button } from "../../../../../../../components/button";
 import { Menu } from "../../../../../../../components/menu";
 import { SegmentGroup } from "../../../../../../../components/segment-group";
 import type { SubView } from "../../../../../../../components/sub-view/types";
@@ -71,10 +71,6 @@ const aiMenuItemStyle = css({
   gap: "[6px]",
 });
 
-const aiIconStyle = css({
-  fontSize: "base",
-});
-
 /**
  * Renders the visualizer preview for the current place,
  * using simulation frame data or initial marking.
@@ -267,9 +263,14 @@ const VisualizerHeaderAction: React.FC = () => {
         <Menu
           animated
           trigger={
-            <IconButton aria-label="More options" size="xs">
-              <TbDotsVertical />
-            </IconButton>
+            <Button
+              aria-label="More options"
+              tooltip="More options"
+              tooltipDisplay="inline"
+              variant="ghost"
+              size="xs"
+              iconName="ellipsisVertical"
+            />
           }
           items={[
             {
@@ -295,7 +296,7 @@ const VisualizerHeaderAction: React.FC = () => {
                   display="inline"
                 >
                   <div className={aiMenuItemStyle}>
-                    <TbSparkles className={aiIconStyle} />
+                    <Icon name="sparkles" size="sm" />
                     Generate with AI
                   </div>
                 </Tooltip>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx
index 8cabaad15b4..6c065c0a678 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/main.tsx
@@ -1,13 +1,12 @@
 import { css } from "@hashintel/ds-helpers/css";
 import { use, useEffect, useState } from "react";
-import { TbTrash } from "react-icons/tb";
 
 import {
   ArcItem,
   ArcList,
   type PlaceOption,
 } from "../../../../../../components/arc-item";
-import { IconButton } from "../../../../../../components/icon-button";
+import { Button } from "../../../../../../components/button";
 import { Input } from "../../../../../../components/input";
 import { Section, SectionList } from "../../../../../../components/section";
 import type { SubView } from "../../../../../../components/sub-view/types";
@@ -248,16 +247,17 @@ const DeleteTransitionAction: React.FC = () => {
   const { removeTransition } = use(MutationContext);
 
   return (
-    <IconButton
+    <Button
       aria-label="Delete"
       size="xs"
-      colorScheme="red"
+      variant="ghost"
+      tone="error"
+      iconName="trash"
       onClick={() => removeTransition(transition.id)}
       disabled={isReadOnly}
       tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"}
-    >
-      <TbTrash />
-    </IconButton>
+      tooltipDisplay="inline"
+    />
   );
 };
 
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-firing-time/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-firing-time/subview.tsx
index 537e40559f0..5c3f41b7d65 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-firing-time/subview.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-firing-time/subview.tsx
@@ -1,8 +1,8 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use } from "react";
-import { TbDotsVertical, TbSparkles } from "react-icons/tb";
 
-import { IconButton } from "../../../../../../../components/icon-button";
+import { Button } from "../../../../../../../components/button";
 import { Menu } from "../../../../../../../components/menu";
 import { SegmentGroup } from "../../../../../../../components/segment-group";
 import type { SubView } from "../../../../../../../components/sub-view/types";
@@ -41,10 +41,6 @@ const aiMenuItemStyle = css({
   gap: "[6px]",
 });
 
-const aiIconStyle = css({
-  fontSize: "base",
-});
-
 const FiringTimeHeaderAction: React.FC = () => {
   const { transition, updateTransition } = useTransitionPropertiesContext();
   const { globalMode } = use(EditorContext);
@@ -57,9 +53,14 @@ const FiringTimeHeaderAction: React.FC = () => {
     <Menu
       animated
       trigger={
-        <IconButton aria-label="More options" size="xs">
-          <TbDotsVertical />
-        </IconButton>
+        <Button
+          aria-label="More options"
+          tooltip="More options"
+          tooltipDisplay="inline"
+          variant="ghost"
+          size="xs"
+          iconName="ellipsisVertical"
+        />
       }
       items={[
         {
@@ -81,7 +82,7 @@ const FiringTimeHeaderAction: React.FC = () => {
               display="inline"
             >
               <div className={aiMenuItemStyle}>
-                <TbSparkles className={aiIconStyle} />
+                <Icon name="sparkles" size="sm" />
                 Generate with AI
               </div>
             </Tooltip>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-results/subview.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-results/subview.tsx
index 7cdf5cd5534..49d62feac68 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-results/subview.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-results/subview.tsx
@@ -1,8 +1,8 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use } from "react";
-import { TbDotsVertical, TbSparkles } from "react-icons/tb";
 
-import { IconButton } from "../../../../../../../components/icon-button";
+import { Button } from "../../../../../../../components/button";
 import { Menu } from "../../../../../../../components/menu";
 import type { SubView } from "../../../../../../../components/sub-view/types";
 import { Tooltip } from "../../../../../../../components/tooltip";
@@ -19,10 +19,6 @@ const aiMenuItemStyle = css({
   gap: "[6px]",
 });
 
-const aiIconStyle = css({
-  fontSize: "base",
-});
-
 const contentStyle = css({
   display: "flex",
   flexDirection: "column",
@@ -59,9 +55,14 @@ const ResultsHeaderAction: React.FC = () => {
     <Menu
       animated
       trigger={
-        <IconButton aria-label="More options" size="xs">
-          <TbDotsVertical />
-        </IconButton>
+        <Button
+          aria-label="More options"
+          tooltip="More options"
+          tooltipDisplay="inline"
+          variant="ghost"
+          size="xs"
+          iconName="ellipsisVertical"
+        />
       }
       items={[
         {
@@ -118,7 +119,7 @@ const ResultsHeaderAction: React.FC = () => {
               display="inline"
             >
               <div className={aiMenuItemStyle}>
-                <TbSparkles className={aiIconStyle} />
+                <Icon name="sparkles" size="sm" />
                 Generate with AI
               </div>
             </Tooltip>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/type-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/type-properties/subviews/main.tsx
index 87076ad94bf..330e6c46a1f 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/type-properties/subviews/main.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/type-properties/subviews/main.tsx
@@ -1,9 +1,8 @@
 import { css, cva } from "@hashintel/ds-helpers/css";
 import { useState } from "react";
-import { TbPlus, TbX } from "react-icons/tb";
 import { v4 as uuidv4 } from "uuid";
 
-import { IconButton } from "../../../../../../components/icon-button";
+import { Button } from "../../../../../../components/button";
 import { Input } from "../../../../../../components/input";
 import { Section, SectionList } from "../../../../../../components/section";
 import type { SubView } from "../../../../../../components/sub-view/types";
@@ -272,17 +271,17 @@ const TypeMainContent: React.FC = () => {
         title="Dimensions"
         tooltip="A type is an ordered tuple of real-valued dimensions. The index of each dimension determines its position in the token vector."
         renderHeaderAction={() => (
-          <IconButton
+          <Button
             onClick={handleAddElement}
             disabled={isDisabled}
             size="xs"
             variant="ghost"
-            colorScheme="brand"
+            tone="brand"
             aria-label="Add dimension"
-            tooltip={isDisabled ? UI_MESSAGES.READ_ONLY_MODE : undefined}
-          >
-            <TbPlus />
-          </IconButton>
+            tooltip={isDisabled ? UI_MESSAGES.READ_ONLY_MODE : "Add dimension"}
+            tooltipDisplay="inline"
+            iconName="plus"
+          />
         )}
       >
         {type.elements.length === 0 ? (
@@ -342,19 +341,23 @@ const TypeMainContent: React.FC = () => {
                 />
 
                 {/* Delete button */}
-                <IconButton
+                <Button
                   onClick={() => {
                     handleDeleteElement(element.elementId);
                   }}
                   disabled={isDisabled || type.elements.length === 1}
                   size="xxs"
                   variant="ghost"
-                  colorScheme="red"
+                  tone="error"
                   aria-label={`Delete dimension ${element.name}`}
-                  tooltip={isDisabled ? UI_MESSAGES.READ_ONLY_MODE : undefined}
-                >
-                  <TbX />
-                </IconButton>
+                  tooltip={
+                    isDisabled
+                      ? UI_MESSAGES.READ_ONLY_MODE
+                      : `Delete dimension ${element.name}`
+                  }
+                  tooltipDisplay="inline"
+                  iconName="close"
+                />
               </div>
             ))}
           </div>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/create-experiment-drawer.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/create-experiment-drawer.tsx
index 43225d9973f..3d469114abe 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/create-experiment-drawer.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/create-experiment-drawer.tsx
@@ -1,6 +1,6 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use, useState } from "react";
-import { TbPlayerPlay } from "react-icons/tb";
 
 import { Button } from "../../../../components/button";
 import { Drawer } from "../../../../components/drawer";
@@ -205,7 +205,7 @@ export const CreateExperimentDrawer = ({
           variant="solid"
           tone="neutral"
           size="sm"
-          prefix={<TbPlayerPlay size={14} />}
+          prefix={<Icon name="play" size="sm" />}
           onClick={() => {}}
         >
           Play
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenario-form.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenario-form.tsx
index 63588390658..1ac2ebed82f 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenario-form.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenario-form.tsx
@@ -1,9 +1,8 @@
 import { css } from "@hashintel/ds-helpers/css";
 import { useForm, useStore } from "@tanstack/react-form";
 import { use, useEffect, useRef, useState } from "react";
-import { TbPlus, TbTrash } from "react-icons/tb";
 
-import { IconButton } from "../../../../components/icon-button";
+import { Button } from "../../../../components/button";
 import { Input } from "../../../../components/input";
 import { Section, SectionList } from "../../../../components/section";
 import { Select } from "../../../../components/select";
@@ -633,14 +632,15 @@ const ScenarioFormSections = ({
         collapsible
         defaultOpen
         renderHeaderAction={() => (
-          <IconButton
+          <Button
             size="xs"
             variant="ghost"
             aria-label="Add scenario parameter"
+            tooltip="Add scenario parameter"
+            tooltipDisplay="inline"
+            iconName="plus"
             onClick={addScenarioParam}
-          >
-            <TbPlus size={12} />
-          </IconButton>
+          />
         )}
       >
         <span className={hintStyle}>
@@ -720,15 +720,16 @@ const ScenarioFormSections = ({
                   />
                 )}
               </div>
-              <IconButton
+              <Button
                 size="xs"
                 variant="ghost"
-                colorScheme="red"
+                tone="error"
                 aria-label="Remove parameter"
+                tooltip="Remove parameter"
+                tooltipDisplay="inline"
+                iconName="trash"
                 onClick={() => removeScenarioParam(param._key)}
-              >
-                <TbTrash size={12} />
-              </IconButton>
+              />
             </div>
           ))
         )}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.tsx
index 6d8848e0a07..e2a35e62661 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.tsx
@@ -1,8 +1,6 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import { use, useState } from "react";
-import { LuLayers2 } from "react-icons/lu";
-import { PiFlaskBold } from "react-icons/pi";
-import { TbChartBar, TbPlus } from "react-icons/tb";
 
 import { Button } from "../../../../components/button";
 import type { SegmentOption } from "../../../../components/segment-group";
@@ -170,21 +168,21 @@ const modeOptions: SegmentOption[] = [
   {
     value: "scenarios",
     label: "Scenarios",
-    icon: <LuLayers2 size={16} />,
+    icon: <Icon name="layer" size="sm" />,
     hideLabel: true,
     tooltip: "Scenarios",
   },
   {
     value: "metrics",
     label: "Metrics",
-    icon: <TbChartBar size={16} />,
+    icon: <Icon name="chartBarSimple" size="sm" />,
     hideLabel: true,
     tooltip: "Metrics",
   },
   {
     value: "experiments",
     label: "Experiments",
-    icon: <PiFlaskBold size={16} />,
+    icon: <Icon name="flask" size="sm" />,
     hideLabel: true,
     tooltip: "Experiments not yet available",
     disabled: true,
@@ -343,7 +341,7 @@ export const SimulateView = () => {
               variant="ghost"
               tone="neutral"
               size="xs"
-              prefix={<TbPlus size={14} />}
+              prefix={<Icon name="plus" size="sm" />}
               onClick={() => setDrawer({ type: "create-scenario" })}
             >
               Create scenario
@@ -354,7 +352,7 @@ export const SimulateView = () => {
               variant="ghost"
               tone="neutral"
               size="xs"
-              prefix={<TbPlus size={14} />}
+              prefix={<Icon name="plus" size="sm" />}
               onClick={() => setDrawer({ type: "create-metric" })}
             >
               Create metric
@@ -365,7 +363,7 @@ export const SimulateView = () => {
               variant="ghost"
               tone="neutral"
               size="xs"
-              prefix={<TbPlus size={14} />}
+              prefix={<Icon name="plus" size="sm" />}
               onClick={() => setDrawer({ type: "create-experiment" })}
             >
               Create experiment
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx
index 40b7e7c4cfb..be6fa73ff5e 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-place-node.tsx
@@ -1,7 +1,7 @@
+import { Icon } from "@hashintel/ds-components";
 import { css, cva } from "@hashintel/ds-helpers/css";
 import { Handle, type NodeProps, Position } from "@xyflow/react";
 import { use } from "react";
-import { TbMathFunction } from "react-icons/tb";
 
 import { hexToHsl } from "../../../lib/hsl-color";
 import { splitPascalCase } from "../../../lib/split-pascal-case";
@@ -176,7 +176,7 @@ export const ClassicPlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
       >
         {data.dynamicsEnabled && (
           <div className={dynamicsIconStyle}>
-            <TbMathFunction />
+            <Icon name="function" size="sm" />
           </div>
         )}
         <div className={labelContainerStyle}>{label}</div>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx
index 5cb924cb9b4..54e7387f77d 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/classic-transition-node.tsx
@@ -1,7 +1,7 @@
+import { Icon } from "@hashintel/ds-components";
 import { css, cva } from "@hashintel/ds-helpers/css";
 import { Handle, type NodeProps, Position } from "@xyflow/react";
 import { use, useEffect, useRef } from "react";
-import { TbBolt, TbLambda } from "react-icons/tb";
 
 import { EditorContext } from "../../../../react/state/editor-context";
 import { useFiringDelta } from "../hooks/use-firing-delta";
@@ -214,12 +214,12 @@ export const ClassicTransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
       >
         {data.lambdaType === "stochastic" && (
           <div className={stochasticIconStyle}>
-            <TbLambda />
+            <Icon name="lambda" size="sm" />
           </div>
         )}
         <div className={labelStyle}>{label}</div>
         <div ref={boltRef} className={firingIndicatorStyle}>
-          <TbBolt />
+          <Icon name="lightning" size="sm" />
         </div>
       </div>
       <Handle
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/place-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/place-node.tsx
index 527ebd071f9..c5d4c155abe 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/place-node.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/place-node.tsx
@@ -1,7 +1,7 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import type { NodeProps } from "@xyflow/react";
 import { use } from "react";
-import { TbCircleFilled, TbMathFunction } from "react-icons/tb";
 
 import { hexToHsl } from "../../../lib/hsl-color";
 import { PlaybackContext } from "../../../../react/playback/context";
@@ -106,10 +106,10 @@ export const PlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
           className={`${iconContainerBaseStyle} ${placeIconContainerStyle}`}
           style={{ color: typeColorBorder }}
         >
-          <TbCircleFilled />
+          <Icon name="circleFilled" />
           {data.dynamicsEnabled && (
             <div className={`${iconBadgeStyle} ${dynamicsBadgeStyle}`}>
-              <TbMathFunction />
+              <Icon name="function" size="xs" />
             </div>
           )}
         </div>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx
index 3febc40fe10..f14948375b7 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/transition-node.tsx
@@ -1,7 +1,7 @@
+import { Icon } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 import type { NodeProps } from "@xyflow/react";
 import { use, useEffect, useRef } from "react";
-import { TbBolt, TbLambda, TbSquareFilled } from "react-icons/tb";
 
 import { EditorContext } from "../../../../react/state/editor-context";
 import { useFiringDelta } from "../hooks/use-firing-delta";
@@ -146,10 +146,10 @@ export const TransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
         <div
           className={`${iconContainerBaseStyle} ${transitionIconContainerStyle}`}
         >
-          <TbSquareFilled />
+          <Icon name="squareFilled" />
           {data.lambdaType === "stochastic" && (
             <div className={`${iconBadgeStyle} ${stochasticBadgeStyle}`}>
-              <TbLambda />
+              <Icon name="lambda" size="xs" />
             </div>
           )}
         </div>
@@ -158,7 +158,7 @@ export const TransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
       subtitle={subtitle}
       badge={
         <div ref={boltRef} className={firingIndicatorStyle}>
-          <TbBolt />
+          <Icon name="lightning" />
         </div>
       }
       isConnectable={isConnectable}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-controls.tsx b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-controls.tsx
index 28ef11c2cd9..e0b969f8d21 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-controls.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-controls.tsx
@@ -1,15 +1,8 @@
 import { css, cva } from "@hashintel/ds-helpers/css";
 import { useReactFlow } from "@xyflow/react";
 import { use, useState } from "react";
-import {
-  TbLockOpen,
-  TbMaximize,
-  TbMinus,
-  TbPlus,
-  TbSettings,
-} from "react-icons/tb";
 
-import { IconButton } from "../../../components/icon-button";
+import { Button } from "../../../components/button";
 import { PANEL_MARGIN } from "../../../constants/ui";
 import { EditorContext } from "../../../../react/state/editor-context";
 import type { ViewportAction } from "../../../types/viewport-action";
@@ -62,73 +55,73 @@ export const ViewportControls: React.FC<{
       className={`${containerStyle} ${animatingStyle({ animating: isPanelAnimating })}`}
       style={{ right: rightOffset, bottom: bottomOffset }}
     >
-      <IconButton
-        size="xs"
-        variant="outline"
+      <Button
+        size="sm"
+        variant="subtle"
         aria-label="Zoom in"
         tooltip="Zoom in"
+        tooltipDisplay="inline"
+        iconName="plus"
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         onClick={() => zoomIn()}
-      >
-        <TbPlus size={14} />
-      </IconButton>
-      <IconButton
-        size="xs"
-        variant="outline"
+      />
+      <Button
+        size="sm"
+        variant="subtle"
         aria-label="Zoom out"
         tooltip="Zoom out"
+        tooltipDisplay="inline"
+        iconName="dash"
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         onClick={() => zoomOut()}
-      >
-        <TbMinus size={14} />
-      </IconButton>
-      <IconButton
-        size="xs"
-        variant="outline"
+      />
+      <Button
+        size="sm"
+        variant="subtle"
         aria-label="Fullscreen"
         tooltip="Fullscreen"
+        tooltipDisplay="inline"
+        iconName="expand"
         onClick={collapseAllPanels}
-      >
-        <TbMaximize size={14} />
-      </IconButton>
-      <IconButton
-        size="xs"
-        variant="outline"
+      />
+      <Button
+        size="sm"
+        variant="subtle"
         aria-label="Lock view"
         tooltip="Lock view"
+        tooltipDisplay="inline"
+        iconName="lockOpen"
         onClick={() => {
           // Placeholder for future lock view functionality
         }}
-      >
-        <TbLockOpen size={14} />
-      </IconButton>
-      <IconButton
-        size="xs"
-        variant="outline"
+      />
+      <Button
+        size="sm"
+        variant="subtle"
         aria-label="Settings"
         tooltip="Settings"
+        tooltipDisplay="inline"
+        iconName="gear"
         onClick={() => setIsSettingsOpen(true)}
-      >
-        <TbSettings size={14} />
-      </IconButton>
+      />
       <ViewportSettingsDialog
         open={isSettingsOpen}
         onOpenChange={(details) => setIsSettingsOpen(details.open)}
       />
       {viewportActions?.map((action) => (
-        <IconButton
-          key={action.key}
-          ref={action.ref}
-          size="xs"
-          variant="outline"
-          aria-label={action.label}
-          tooltip={action.tooltip}
-          onClick={action.onClick}
-          style={action.style}
-          className={action.className}
-        >
-          {action.icon}
-        </IconButton>
+        <span key={action.key} style={action.style}>
+          <Button
+            ref={action.ref}
+            size="sm"
+            variant="subtle"
+            aria-label={action.label}
+            tooltip={action.tooltip}
+            tooltipDisplay="inline"
+            onClick={action.onClick}
+            className={action.className}
+            prefix={action.icon}
+          />
+        </span>
       ))}
     </div>
   );
diff --git a/yarn.lock b/yarn.lock
index dc15db99a54..de9dcfb8f27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7603,7 +7603,6 @@ __metadata:
     "@pandacss/preset-panda": "npm:1.4.3"
     "@playwright/test": "npm:1.58.2"
     "@radix-ui/colors": "npm:3.0.0"
-    "@svgr/rollup": "npm:8.1.0"
     "@tanstack/react-virtual": "npm:3.13.24"
     "@tsconfig/strictest": "npm:^2.0.8"
     "@types/node": "npm:22.18.13"
@@ -7615,6 +7614,7 @@ __metadata:
     canvas: "npm:3.2.0"
     case-anything: "npm:3.1.0"
     colorjs.io: "npm:0.6.1"
+    esbuild-plugin-svgr: "npm:3.1.1"
     eslint: "npm:9.39.4"
     lorem-ipsum: "npm:2.0.8"
     lucide-react: "npm:0.544.0"
@@ -7683,7 +7683,6 @@ __metadata:
     oxlint-tsgolint: "npm:0.22.1"
     react: "npm:19.2.3"
     react-dom: "npm:19.2.3"
-    react-icons: "npm:5.5.0"
     react-resizable-panels: "npm:4.6.5"
     rolldown: "npm:1.0.0"
     rolldown-plugin-dts: "npm:0.25.0"
@@ -17526,23 +17525,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@svgr/rollup@npm:8.1.0":
-  version: 8.1.0
-  resolution: "@svgr/rollup@npm:8.1.0"
-  dependencies:
-    "@babel/core": "npm:^7.21.3"
-    "@babel/plugin-transform-react-constant-elements": "npm:^7.21.3"
-    "@babel/preset-env": "npm:^7.20.2"
-    "@babel/preset-react": "npm:^7.18.6"
-    "@babel/preset-typescript": "npm:^7.21.0"
-    "@rollup/pluginutils": "npm:^5.0.2"
-    "@svgr/core": "npm:8.1.0"
-    "@svgr/plugin-jsx": "npm:8.1.0"
-    "@svgr/plugin-svgo": "npm:8.1.0"
-  checksum: 10c0/c3204b70f8f263c5b0170c9f6b72a237ba1f3891638b88fa3e06560398f5bdd993b77fa070e01e42cecfd02475c4d5414e28a73b789c50c4c8ba9881f476dc8b
-  languageName: node
-  linkType: hard
-
 "@svgr/webpack@npm:8.1.0":
   version: 8.1.0
   resolution: "@svgr/webpack@npm:8.1.0"
@@ -27150,6 +27132,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-plugin-svgr@npm:3.1.1":
+  version: 3.1.1
+  resolution: "esbuild-plugin-svgr@npm:3.1.1"
+  dependencies:
+    "@svgr/core": "npm:^8.1.0"
+    "@svgr/plugin-jsx": "npm:^8.1.0"
+  peerDependencies:
+    esbuild: ^0.25.2
+  checksum: 10c0/469127f41efb63ba47f1bc8713a9eaefdff0531742f4235e8c15bebd3b16b17cfbfe8c9a9832420a3a5393434b4e4c7cefbfb8d40c7ee40645dc4f7775fd1ebb
+  languageName: node
+  linkType: hard
+
 "esbuild-register@npm:^3.5.0":
   version: 3.6.0
   resolution: "esbuild-register@npm:3.6.0"