diff --git a/.changeset/keycap-hint-vertical-center.md b/.changeset/keycap-hint-vertical-center.md
new file mode 100644
index 00000000000..6568bf411a1
--- /dev/null
+++ b/.changeset/keycap-hint-vertical-center.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Vertically center the glyph inside `KeycapHint` keys.
diff --git a/packages/graphiql-react/src/components/keycap-hint/index.css b/packages/graphiql-react/src/components/keycap-hint/index.css
index a756c40dfff..36911e3ba68 100644
--- a/packages/graphiql-react/src/components/keycap-hint/index.css
+++ b/packages/graphiql-react/src/components/keycap-hint/index.css
@@ -20,3 +20,9 @@
   font-weight: 600;
   line-height: 1;
 }
+
+.graphiql-keycap-glyph {
+  /* The glyphs' ink sits slightly above the vertical center of their em
+     box, so centering the line box alone isn't quite enough. */
+  transform: translateY(0.05em);
+}
diff --git a/packages/graphiql-react/src/components/keycap-hint/index.tsx b/packages/graphiql-react/src/components/keycap-hint/index.tsx
index 341130321f6..2217a3bb9dd 100644
--- a/packages/graphiql-react/src/components/keycap-hint/index.tsx
+++ b/packages/graphiql-react/src/components/keycap-hint/index.tsx
@@ -45,7 +45,7 @@ export const KeycapHint: FC<KeycapHintProps> = ({ keys, ariaLabel }) => {
     <span className="graphiql-keycap-hint" aria-label={ariaLabel}>
       {keys.map((k, i) => (
         <kbd key={`${k}-${i}`} className="graphiql-keycap">
-          {display[k] ?? k}
+          <span className="graphiql-keycap-glyph">{display[k] ?? k}</span>
         </kbd>
       ))}
     </span>