diff --git a/package-lock.json b/package-lock.json
index d17274c7c2..35af93ab3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,12 +60,14 @@
 				"focus-trap": "^7.6.4",
 				"fuse.js": "^7.0.0",
 				"heic2any": "^0.0.4",
+				"heroicons": "^2.2.0",
 				"highlight.js": "^11.9.0",
 				"html-entities": "^2.5.3",
 				"html2canvas-pro": "^1.5.11",
 				"i18next": "^23.10.0",
 				"i18next-browser-languagedetector": "^7.2.0",
 				"i18next-resources-to-backend": "^1.2.0",
+				"iconoir": "^7.12.1",
 				"js-sha256": "^0.10.1",
 				"jspdf": "^4.0.0",
 				"jszip": "^3.10.1",
@@ -9278,6 +9280,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/heroicons": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/heroicons/-/heroicons-2.2.0.tgz",
+			"integrity": "sha512-yOwvztmNiBWqR946t+JdgZmyzEmnRMC2nxvHFC90bF1SUttwB6yJKYeme1JeEcBfobdOs827nCyiWBS2z/brog==",
+			"license": "MIT"
+		},
 		"node_modules/highlight.js": {
 			"version": "11.11.1",
 			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
@@ -9505,6 +9513,16 @@
 				"@babel/runtime": "^7.23.2"
 			}
 		},
+		"node_modules/iconoir": {
+			"version": "7.12.1",
+			"resolved": "https://registry.npmjs.org/iconoir/-/iconoir-7.12.1.tgz",
+			"integrity": "sha512-7ei4jd1bss0Ukyz/bbM9Zc96aLfZuwTEkSW8u5fx5h3X9912MsnmWwPw9LyTUtcf0ShfTzQeQ9oG7IslW3hrLg==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/iconoir"
+			}
+		},
 		"node_modules/iconv-lite": {
 			"version": "0.6.3",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
diff --git a/package.json b/package.json
index 16f139835f..eb9babb7f3 100644
--- a/package.json
+++ b/package.json
@@ -104,12 +104,14 @@
 		"focus-trap": "^7.6.4",
 		"fuse.js": "^7.0.0",
 		"heic2any": "^0.0.4",
+		"heroicons": "^2.2.0",
 		"highlight.js": "^11.9.0",
 		"html-entities": "^2.5.3",
 		"html2canvas-pro": "^1.5.11",
 		"i18next": "^23.10.0",
 		"i18next-browser-languagedetector": "^7.2.0",
 		"i18next-resources-to-backend": "^1.2.0",
+		"iconoir": "^7.12.1",
 		"js-sha256": "^0.10.1",
 		"jspdf": "^4.0.0",
 		"jszip": "^3.10.1",
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index edb82e97f4..ae342f7d8f 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -110,6 +110,7 @@
 
 	import CommandSuggestionList from './MessageInput/CommandSuggestionList.svelte';
 	import Knobs from '../icons/Knobs.svelte';
+	import CodeBrackets from '../icons/CodeBrackets.svelte';
 	import ValvesModal from '../workspace/common/ValvesModal.svelte';
 	import Note from '../icons/Note.svelte';
 	import AskUserCard from './AskUserCard.svelte';
@@ -2358,6 +2359,22 @@
 											</button>
 										</IntegrationsMenu>
 									{/if}
+
+									{#if hasChatVariables}
+										<Tooltip content={$i18n.t('Chat Variables')} placement="top">
+											<button
+												type="button"
+												id="chat-variables-button"
+												class="bg-transparent hover:bg-gray-100 text-gray-700 dark:text-white dark:hover:bg-gray-800 rounded-full size-[1.875rem] flex justify-center items-center outline-hidden focus:outline-hidden shrink-0"
+												aria-label={$i18n.t('Chat Variables')}
+												on:click={() => {
+													dispatch('chatVariables');
+												}}
+											>
+												<CodeBrackets className="size-4.5" strokeWidth="1.5" />
+											</button>
+										</Tooltip>
+									{/if}
 								</div>
 
 								<div class="flex flex-1 items-center min-w-0 overflow-x-auto scrollbar-none">
@@ -2600,22 +2617,6 @@
 										/>
 									</div>
 
-									{#if hasChatVariables}
-										<Tooltip content={$i18n.t('Chat Variables')} placement="top">
-											<button
-												type="button"
-												id="chat-variables-button"
-												class="flex size-[1.875rem] shrink-0 items-center justify-center rounded-full bg-transparent text-gray-500 transition-colors hover:text-gray-800 focus:outline-hidden dark:text-gray-400 dark:hover:text-gray-100"
-												aria-label={$i18n.t('Chat Variables')}
-												on:click={() => {
-													dispatch('chatVariables');
-												}}
-											>
-												<Knobs className="size-4" strokeWidth="1.5" />
-											</button>
-										</Tooltip>
-									{/if}
-
 									{#if isActive && prompt === '' && files.length === 0}
 										<div class=" flex items-center">
 											<Tooltip content={$i18n.t('Stop')}>
diff --git a/src/lib/components/icons/CodeBrackets.svelte b/src/lib/components/icons/CodeBrackets.svelte
new file mode 100644
index 0000000000..68046d50e2
--- /dev/null
+++ b/src/lib/components/icons/CodeBrackets.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width={strokeWidth}
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
+>
+	<path
+		d="M9 4.5C3 4.5 10 9.5 5.5 12C10 14.5 3 19.5 9 19.5"
+	/>
+	<path
+		d="M15 4.5C21 4.5 14 9.5 18.5 12C14 14.5 21 19.5 15 19.5"
+	/>
+</svg>