diff --git a/src/DocSearchButton.tsx b/src/DocSearchButton.tsx
index 2344f745..af993abc 100644
--- a/src/DocSearchButton.tsx
+++ b/src/DocSearchButton.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 import { SearchIcon } from './icons/SearchIcon';
+import { ControlKeyIcon } from './icons/ControlKeyIcon';
 
 const ACTION_KEY_DEFAULT = 'Ctrl';
 const ACTION_KEY_APPLE = '⌘';
@@ -9,7 +10,6 @@ function isAppleDevice() {
   if (typeof navigator === 'undefined') {
     return ACTION_KEY_DEFAULT;
   }
-
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
 }
 
@@ -33,7 +33,11 @@ export function DocSearchButton(
     <button type="button" className="DocSearch-SearchButton" {...props}>
       <SearchIcon />
       <span className="DocSearch-SearchButton-Placeholder">Search</span>
-      <span className="DocSearch-SearchButton-Key">{key}</span>
+
+      <span className="DocSearch-SearchButton-Key">
+        {key === 'Ctrl' && <ControlKeyIcon />}
+        {key !== 'Ctrl' && key}
+      </span>
       <span className="DocSearch-SearchButton-Key">K</span>
     </button>
   );
diff --git a/src/icons/ControlKeyIcon.tsx b/src/icons/ControlKeyIcon.tsx
new file mode 100644
index 00000000..de1f4e34
--- /dev/null
+++ b/src/icons/ControlKeyIcon.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export function ControlKeyIcon() {
+  return (
+    <svg width="15" height="15" className="DocSearch-Control-Key-Icon">
+      <path
+        d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953"
+        strokeWidth="1.2"
+        stroke="currentColor"
+        fill="none"
+        strokeLinecap="square"
+      />
+    </svg>
+  );
+}