diff --git a/.changeset/modern-needles-dance.md b/.changeset/modern-needles-dance.md
new file mode 100644
index 000000000..3cec5d03c
--- /dev/null
+++ b/.changeset/modern-needles-dance.md
@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Use icons from new `@apollo/icons` package.
diff --git a/package-lock.json b/package-lock.json
index 7163d9730..45a526c09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,10 @@
       "version": "4.4.0",
       "license": "MIT",
       "dependencies": {
-        "@apollo/brand": "^0.3.0",
+        "@apollo/brand": "^0.4.0",
         "@apollo/client": "^3.8.8",
-        "@apollo/tailwind-preset": "^0.1.2",
+        "@apollo/icons": "^0.0.3",
+        "@apollo/tailwind-preset": "^0.1.3",
         "@headlessui/react": "^1.7.17",
         "@radix-ui/react-tabs": "^1.0.2",
         "clsx": "^2.1.0",
@@ -135,9 +136,9 @@
       }
     },
     "node_modules/@apollo/brand": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@apollo/brand/-/brand-0.3.0.tgz",
-      "integrity": "sha512-ZgQfudpHm9Lt000Ij34RzSAn+2TsY+/nGuV1TkeF3/f4Cka2pRol+NaZd1FoffABJppt+/r4+r1sdKnBnMWJBw=="
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@apollo/brand/-/brand-0.4.0.tgz",
+      "integrity": "sha512-Rq3rLJ9o6OUj9M+lUlK3z/M0kBt6O+SDoaxs2Zp/ceW3cReAvWLB83k1WNssRmyZ4FQ7pgpfMy2bEteoJdaOuA=="
     },
     "node_modules/@apollo/client": {
       "version": "3.8.8",
@@ -184,12 +185,17 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
+    "node_modules/@apollo/icons": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@apollo/icons/-/icons-0.0.3.tgz",
+      "integrity": "sha512-ZMmxXnvoE8Fs6V86ZS62Xql6kvUStxYJN4Jn3g/FCfU+GhfOkJmNQvAYLxvXtyJyWHOU71HTCqP1+jdKHc9Q7Q=="
+    },
     "node_modules/@apollo/tailwind-preset": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@apollo/tailwind-preset/-/tailwind-preset-0.1.2.tgz",
-      "integrity": "sha512-t7rTQrIyXMO6UqBGKm2xDNmENbrxqtkK8N9YnSZ7rIQOhhk5MMGxEDie7TjaJJcoOAL5Jg+oqrktSrxBLfdd6A==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@apollo/tailwind-preset/-/tailwind-preset-0.1.3.tgz",
+      "integrity": "sha512-26h23cIX9KOXy0WWxmY8xtigSTTQVGndM77RfJudPPeBhXnh3MX76RJA6QUItLYpjGlfEuZxxJUPMtM7RAldMQ==",
       "dependencies": {
-        "@apollo/brand": "0.3.0"
+        "@apollo/brand": "0.4.0"
       },
       "peerDependencies": {
         "tailwindcss": "^3.4.0"
diff --git a/package.json b/package.json
index ffee6efef..3e269164a 100755
--- a/package.json
+++ b/package.json
@@ -34,9 +34,10 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@apollo/brand": "^0.3.0",
+    "@apollo/brand": "^0.4.0",
     "@apollo/client": "^3.8.8",
-    "@apollo/tailwind-preset": "^0.1.2",
+    "@apollo/icons": "^0.0.3",
+    "@apollo/tailwind-preset": "^0.1.3",
     "@headlessui/react": "^1.7.17",
     "@radix-ui/react-tabs": "^1.0.2",
     "clsx": "^2.1.0",
diff --git a/src/application/App.tsx b/src/application/App.tsx
index fc271830b..cdd27bdfa 100644
--- a/src/application/App.tsx
+++ b/src/application/App.tsx
@@ -15,9 +15,9 @@ import { Cache } from "./components/Cache/Cache";
 import { GetOperationCounts, GetOperationCountsVariables } from "./types/gql";
 import { Tabs } from "./components/Tabs";
 import { Button } from "./components/Button";
-import { SettingsIcon } from "./components/icons/Settings";
+import IconSettings from "@apollo/icons/default/IconSettings.svg";
 import { SettingsModal } from "./components/Layouts/SettingsModal";
-import Logo from "@apollo/brand/logos/symbol.svg";
+import Logo from "@apollo/icons/logos/LogoSymbol.svg";
 
 export const reloadStatus = makeVar<boolean>(false);
 
@@ -92,7 +92,7 @@ export const App = () => {
             variant="hidden"
             onClick={() => setSettingsOpen(true)}
           >
-            <SettingsIcon aria-hidden="true" />
+            <IconSettings aria-hidden="true" className="w-4" />
             <span className="sr-only">Settings</span>
           </Button>
           <SettingsModal open={settingsOpen} onOpen={setSettingsOpen} />
diff --git a/src/application/components/CodeBlock.tsx b/src/application/components/CodeBlock.tsx
index 4ca9123e4..73daf3c17 100644
--- a/src/application/components/CodeBlock.tsx
+++ b/src/application/components/CodeBlock.tsx
@@ -4,7 +4,7 @@ import { colors } from "@apollo/brand";
 import { clsx } from "clsx";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { ColorTheme, colorTheme } from "../theme";
-import { CopyIcon } from "./icons/Copy";
+import IconCopy from "@apollo/icons/default/IconCopy.svg";
 import { Button } from "./Button";
 import { useMemo } from "react";
 
@@ -175,7 +175,7 @@ export const CodeBlock = ({
           data-testid="copy-query-strin"
           className="sticky top-0"
         >
-          <CopyIcon />
+          <IconCopy className="w-4" />
           Copy
         </Button>
       </CopyToClipboard>
diff --git a/src/application/components/CopyButton.tsx b/src/application/components/CopyButton.tsx
index ceac6f819..8015546a7 100644
--- a/src/application/components/CopyButton.tsx
+++ b/src/application/components/CopyButton.tsx
@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef } from "react";
 import clsx from "clsx";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Button } from "./Button";
-import { CopyIcon } from "./icons/Copy";
+import IconCopy from "@apollo/icons/default/IconCopy.svg";
 
 type ButtonProps = ComponentPropsWithoutRef<typeof Button>;
 
@@ -21,7 +21,7 @@ export function CopyButton({
   return (
     <CopyToClipboard text={text}>
       <Button {...rest} className={className} size={size} variant="hidden">
-        <CopyIcon
+        <IconCopy
           className={clsx({
             "h-4": size === "sm" || size === "md",
             "h-2": size === "xs",
diff --git a/src/application/components/Icon.tsx b/src/application/components/Icon.tsx
deleted file mode 100644
index 37302e5ab..000000000
--- a/src/application/components/Icon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { clsx } from "clsx";
-
-export interface IconProps extends ComponentPropsWithoutRef<"svg"> {
-  className?: string;
-  children: ReactNode;
-  size?: "large" | "default" | "small";
-  viewBox: string;
-}
-
-const SIZES = {
-  large: 24,
-  default: 16,
-  small: 12,
-} as const satisfies Record<NonNullable<IconProps["size"]>, number>;
-
-export function Icon({
-  className,
-  children,
-  size = "default",
-  viewBox,
-  ...props
-}: IconProps) {
-  return (
-    <svg
-      {...props}
-      className={clsx(className, "stroke-current fill-none")}
-      viewBox={viewBox}
-      xmlns="http://www.w3.org/2000/svg"
-      width={SIZES[size]}
-      height={SIZES[size]}
-    >
-      {children}
-    </svg>
-  );
-}
diff --git a/src/application/components/Queries/RunInExplorerButton.tsx b/src/application/components/Queries/RunInExplorerButton.tsx
index b61a88419..3928c0d82 100644
--- a/src/application/components/Queries/RunInExplorerButton.tsx
+++ b/src/application/components/Queries/RunInExplorerButton.tsx
@@ -4,7 +4,7 @@ import {
   SET_OPERATION,
 } from "../Explorer/postMessageHelpers";
 import { currentScreen, Screens } from "../Layouts/Navigation";
-import { RunIcon } from "../icons/Run";
+import IconRun from "@apollo/icons/default/IconRun.svg";
 import { Button } from "../Button";
 
 interface RunInExplorerButtonProps {
@@ -39,7 +39,7 @@ export const RunInExplorerButton = ({
         }
       }}
     >
-      <RunIcon aria-hidden />
+      <IconRun aria-hidden className="w-4" />
       Run in Explorer
     </Button>
   );
diff --git a/src/application/components/SearchField.tsx b/src/application/components/SearchField.tsx
index 843f58305..df9798c91 100644
--- a/src/application/components/SearchField.tsx
+++ b/src/application/components/SearchField.tsx
@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { SearchIcon } from "./icons/Search";
+import IconSearch from "@apollo/icons/default/IconSearch.svg";
 
 interface SearchFieldProps {
   autoFocus?: boolean;
@@ -18,7 +18,7 @@ export function SearchField({
 }: SearchFieldProps) {
   return (
     <div className={clsx(className, "flex items-center relative")}>
-      <SearchIcon className="absolute left-4 z-10 text-icon-secondary dark:text-icon-secondary-dark" />
+      <IconSearch className="absolute left-4 z-10 text-icon-secondary dark:text-icon-secondary-dark w-4" />
       <input
         autoFocus={autoFocus}
         onChange={(e) => onChange(e.target.value)}
diff --git a/src/application/components/icons/Copy.tsx b/src/application/components/icons/Copy.tsx
deleted file mode 100644
index 1d846ca34..000000000
--- a/src/application/components/icons/Copy.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Icon, IconProps } from "../Icon";
-
-type CopyIconProps = Omit<IconProps, "children" | "viewBox">;
-
-export function CopyIcon({ className, size, ...props }: CopyIconProps) {
-  return (
-    <Icon {...props} viewBox="0 0 24 24" size={size} className={className}>
-      <g clipPath="url(#clip0_95_2786)">
-        <path
-          d="M16.4531 4.96875V2.39062C16.4531 2.14198 16.3544 1.90353 16.1785 1.72771C16.0027 1.5519 15.7643 1.45312 15.5156 1.45312H2.39062C2.14198 1.45312 1.90353 1.5519 1.72771 1.72771C1.5519 1.90353 1.45313 2.14198 1.45312 2.39062V15.5156C1.45312 15.7643 1.5519 16.0027 1.72771 16.1785C1.90353 16.3544 2.14198 16.4531 2.39062 16.4531H4.96875M7.54688 8.48438C7.54688 8.23573 7.64565 7.99728 7.82146 7.82146C7.99728 7.64565 8.23573 7.54688 8.48438 7.54688H21.6094C21.858 7.54688 22.0965 7.64565 22.2723 7.82146C22.4481 7.99728 22.5469 8.23573 22.5469 8.48438V21.6094C22.5469 21.858 22.4481 22.0965 22.2723 22.2723C22.0965 22.4481 21.858 22.5469 21.6094 22.5469H8.48438C8.23573 22.5469 7.99728 22.4481 7.82146 22.2723C7.64565 22.0965 7.54688 21.858 7.54688 21.6094V8.48438Z"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_95_2786">
-          <rect width="24" height="24" fill="white" />
-        </clipPath>
-      </defs>
-    </Icon>
-  );
-}
diff --git a/src/application/components/icons/Run.tsx b/src/application/components/icons/Run.tsx
deleted file mode 100644
index bd959a153..000000000
--- a/src/application/components/icons/Run.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Icon, IconProps } from "../Icon";
-
-type RunIconProps = Omit<IconProps, "children" | "viewBox">;
-
-export function RunIcon({ className, size, ...props }: RunIconProps) {
-  return (
-    <Icon {...props} size={size} viewBox="0 0 15 18" className={className}>
-      <path
-        d="M1.906 1.53702C1.81491 1.48301 1.71114 1.45407 1.60524 1.45315C1.49934 1.45222 1.39508 1.47934 1.30306 1.53175C1.21104 1.58417 1.13452 1.66 1.0813 1.75155C1.02807 1.84311 1.00002 1.94712 1 2.05302V15.947C1.00002 16.0529 1.02807 16.1569 1.0813 16.2485C1.13452 16.34 1.21104 16.4159 1.30306 16.4683C1.39508 16.5207 1.49934 16.5478 1.60524 16.5469C1.71114 16.546 1.81491 16.517 1.906 16.463L13.629 9.51602C13.7185 9.46289 13.7927 9.38739 13.8442 9.29692C13.8957 9.20645 13.9228 9.10413 13.9228 9.00002C13.9228 8.89591 13.8957 8.79359 13.8442 8.70312C13.7927 8.61265 13.7185 8.53715 13.629 8.48402L1.906 1.53702Z"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </Icon>
-  );
-}
diff --git a/src/application/components/icons/Search.tsx b/src/application/components/icons/Search.tsx
deleted file mode 100644
index 58ecc8732..000000000
--- a/src/application/components/icons/Search.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Icon, IconProps } from "../Icon";
-
-type SearchIconProps = Omit<IconProps, "children" | "viewBox">;
-
-export function SearchIcon({ className, size, ...props }: SearchIconProps) {
-  return (
-    <Icon {...props} viewBox="0 0 24 24" className={className} size={size}>
-      <g clipPath="url(#clip0_95_4026)">
-        <path
-          d="M15.9573 15.9563L22.5469 22.5469M2.13007 13.2722C2.56651 14.2991 3.20094 15.23 3.99713 16.0117C4.79333 16.7934 5.73569 17.4106 6.77043 17.8282C7.80516 18.2457 8.912 18.4553 10.0277 18.4451C11.1435 18.4348 12.2463 18.2049 13.2732 17.7685C14.3001 17.332 15.231 16.6976 16.0127 15.9014C16.7944 15.1052 17.4116 14.1628 17.8291 13.1281C18.2467 12.0934 18.4563 10.9865 18.446 9.87079C18.4358 8.75504 18.2059 7.65224 17.7694 6.62534C16.888 4.55143 15.2188 2.91261 13.1291 2.0694C11.0393 1.22619 8.70023 1.24766 6.62632 2.12909C4.55241 3.01052 2.91359 4.67971 2.07038 6.76945C1.22717 8.85919 1.24864 11.1983 2.13007 13.2722Z"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_95_4026">
-          <rect width="24" height="24" fill="white" />
-        </clipPath>
-      </defs>
-    </Icon>
-  );
-}
diff --git a/src/application/components/icons/Settings.tsx b/src/application/components/icons/Settings.tsx
deleted file mode 100644
index 91db50b35..000000000
--- a/src/application/components/icons/Settings.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Icon, IconProps } from "../Icon";
-
-type SettingsIconProps = Omit<IconProps, "children" | "viewBox">;
-
-export function SettingsIcon({ className, size, ...props }: SettingsIconProps) {
-  return (
-    <Icon {...props} viewBox="0 0 24 24" size={size} className={className}>
-      <g clipPath="url(#clip0_74_2982)">
-        <path
-          d="M10.6369 3.03557C10.809 3.22653 11.0192 3.37922 11.254 3.48374C11.4888 3.58825 11.743 3.64226 12 3.64226C12.2571 3.64226 12.5112 3.58825 12.7461 3.48374C12.9809 3.37922 13.1911 3.22653 13.3632 3.03557L14.25 2.06244C14.5042 1.78114 14.8392 1.58539 15.2091 1.50206C15.5789 1.41873 15.9655 1.45191 16.3158 1.59705C16.666 1.74218 16.9628 1.99215 17.1653 2.31266C17.3678 2.63316 17.4662 3.00849 17.4469 3.38713L17.3804 4.69963C17.3675 4.95567 17.4084 5.21156 17.5004 5.45083C17.5925 5.6901 17.7336 5.90744 17.9147 6.08885C18.0959 6.27025 18.313 6.41171 18.5521 6.50409C18.7913 6.59648 19.0471 6.63775 19.3032 6.62525L20.6157 6.55869C20.9941 6.54004 21.369 6.63886 21.689 6.84162C22.009 7.04438 22.2585 7.34115 22.4033 7.69125C22.5481 8.04136 22.581 8.42767 22.4976 8.79724C22.4143 9.1668 22.2186 9.50154 21.9375 9.75557L20.9607 10.6368C20.7699 10.8091 20.6175 11.0195 20.5131 11.2544C20.4088 11.4892 20.3548 11.7434 20.3548 12.0004C20.3548 12.2574 20.4088 12.5116 20.5131 12.7465C20.6175 12.9813 20.7699 13.1917 20.9607 13.364L21.9375 14.2453C22.2189 14.4994 22.4146 14.8344 22.4979 15.2043C22.5813 15.5742 22.5481 15.9607 22.4029 16.311C22.2578 16.6612 22.0078 16.958 21.6873 17.1605C21.3668 17.363 20.9915 17.4614 20.6129 17.4421L19.3004 17.3756C19.0438 17.3624 18.7872 17.4032 18.5474 17.4954C18.3076 17.5876 18.0898 17.7291 17.9081 17.9108C17.7264 18.0925 17.5849 18.3103 17.4927 18.5501C17.4005 18.7899 17.3597 19.0465 17.3729 19.3031L17.4394 20.6156C17.4562 20.9923 17.3566 21.3651 17.1542 21.6832C16.9517 22.0014 16.6562 22.2495 16.3079 22.3939C15.9595 22.5383 15.5751 22.572 15.2069 22.4903C14.8388 22.4086 14.5047 22.2156 14.25 21.9374L13.3679 20.9615C13.1957 20.7708 12.9854 20.6183 12.7506 20.514C12.5158 20.4097 12.2617 20.3557 12.0047 20.3557C11.7478 20.3557 11.4937 20.4097 11.2589 20.514C11.0241 20.6183 10.8138 20.7708 10.6416 20.9615L9.75567 21.9374C9.50143 22.2169 9.16719 22.4111 8.79853 22.4937C8.42986 22.5763 8.0447 22.5431 7.69556 22.3988C7.34641 22.2545 7.05028 22.006 6.84752 21.6872C6.64476 21.3684 6.54525 20.9948 6.56255 20.6174L6.63005 19.3049C6.64325 19.0483 6.60243 18.7918 6.51023 18.552C6.41803 18.3122 6.27651 18.0943 6.09483 17.9127C5.91314 17.731 5.69533 17.5895 5.4555 17.4973C5.21567 17.4051 4.95915 17.3642 4.70255 17.3774L3.39005 17.444C3.01156 17.4638 2.63624 17.3659 2.31561 17.1638C1.99498 16.9617 1.74477 16.6653 1.59931 16.3154C1.45386 15.9654 1.4203 15.579 1.50324 15.2092C1.58618 14.8393 1.78156 14.5043 2.06255 14.2499L3.03848 13.3687C3.22921 13.1964 3.38168 12.986 3.48604 12.7512C3.59039 12.5163 3.64431 12.2621 3.64431 12.0051C3.64431 11.7481 3.59039 11.4939 3.48604 11.259C3.38168 11.0242 3.22921 10.8138 3.03848 10.6415L2.06255 9.75557C1.78247 9.5015 1.58769 9.16715 1.50483 8.79819C1.42197 8.42924 1.45508 8.0437 1.59963 7.69428C1.74418 7.34486 1.99312 7.0486 2.31241 6.84601C2.6317 6.64342 3.00577 6.54439 3.38348 6.56244L4.69598 6.629C4.95307 6.64252 5.21013 6.60181 5.45046 6.50951C5.69079 6.41721 5.90902 6.27539 6.09097 6.09326C6.27292 5.91113 6.41453 5.69277 6.5066 5.45235C6.59866 5.21193 6.63912 4.95483 6.62536 4.69775L6.56255 3.38432C6.54483 3.00675 6.64405 2.63292 6.84665 2.31382C7.04925 1.99473 7.34538 1.74592 7.69461 1.60134C8.04385 1.45677 8.42919 1.42347 8.79805 1.50599C9.16691 1.58851 9.50133 1.78283 9.75567 2.06244L10.6369 3.03557Z"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M7.7813 12.0009C7.7813 13.1198 8.22577 14.1928 9.01694 14.984C9.80811 15.7752 10.8812 16.2196 12 16.2196C13.1189 16.2196 14.192 15.7752 14.9832 14.984C15.7743 14.1928 16.2188 13.1198 16.2188 12.0009C16.2188 10.882 15.7743 9.80894 14.9832 9.01777C14.192 8.2266 13.1189 7.78213 12 7.78213C10.8812 7.78213 9.80811 8.2266 9.01694 9.01777C8.22577 9.80894 7.7813 10.882 7.7813 12.0009Z"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_74_2982">
-          <rect width="24" height="24" fill="white" />
-        </clipPath>
-      </defs>
-    </Icon>
-  );
-}