diff --git a/templates/devtest/icon-gallery.tmpl b/templates/devtest/icon-gallery.tmpl
index fd24bf7b34..77607f9370 100644
--- a/templates/devtest/icon-gallery.tmpl
+++ b/templates/devtest/icon-gallery.tmpl
@@ -3,39 +3,19 @@
 	<h1>Icon Gallery</h1>
 	<p>All <strong>{{.IconCount}}</strong> SVG icons available in templates.</p>
 	<p>
-		<input id="icon-search" type="text" placeholder="Filter icons..." class="ui input" style="width: 300px">
+		<input id="icon-search" type="text" placeholder="Filter icons..." class="ui input icon-gallery-search">
 		<label class="gt-checkbox tw-ml-4"><input id="icon-size-toggle" type="checkbox"> Large (24px)</label>
 	</p>
 
-	<script>
-		document.addEventListener('DOMContentLoaded', () => {
-			const search = document.getElementById('icon-search');
-			const sizeToggle = document.getElementById('icon-size-toggle');
-			search.addEventListener('input', () => {
-				const q = search.value.toLowerCase();
-				for (const card of document.querySelectorAll('.icon-card')) {
-					card.style.display = card.getAttribute('data-name').includes(q) ? '' : 'none';
-				}
-			});
-			sizeToggle.addEventListener('change', () => {
-				const size = sizeToggle.checked ? '24' : '16';
-				for (const icon of document.querySelectorAll('.icon-card svg')) {
-					icon.setAttribute('width', size);
-					icon.setAttribute('height', size);
-				}
-			});
-		});
-	</script>
-
 	{{range $prefix := .IconGroupOrder}}
 	{{$icons := index $.IconGroups $prefix}}
 	{{if $icons}}
 	<h2 id="group-{{$prefix}}">{{$prefix}} <span class="ui grey label">{{len $icons}}</span></h2>
 	<div class="tw-flex tw-flex-wrap tw-gap-2 tw-mb-4">
 		{{range $name := $icons}}
-		<div class="icon-card tw-flex tw-flex-col tw-items-center tw-gap-1 tw-p-2 tw-border tw-border-secondary tw-rounded" style="width: 120px" data-name="{{$name}}" title="{{$name}}">
-			<div class="tw-flex tw-items-center tw-justify-center" style="height: 32px">{{svg $name 16}}</div>
-			<code class="gt-ellipsis" style="max-width: 108px; font-size: 10px">{{$name}}</code>
+		<div class="icon-card icon-gallery-card tw-flex tw-flex-col tw-items-center tw-gap-1 tw-p-2 tw-border tw-border-secondary tw-rounded" data-name="{{$name}}" title="{{$name}}">
+			<div class="icon-gallery-preview tw-flex tw-items-center tw-justify-center">{{svg $name 16}}</div>
+			<code class="gt-ellipsis icon-gallery-name">{{$name}}</code>
 		</div>
 		{{end}}
 	</div>
diff --git a/web_src/css/devtest.css b/web_src/css/devtest.css
index c344d99058..18424681f9 100644
--- a/web_src/css/devtest.css
+++ b/web_src/css/devtest.css
@@ -18,3 +18,20 @@ h1, h2 {
 .fetch-action-demo-forms .form-fetch-action {
   border: 1px red dashed; /* show the border for demo purpose */
 }
+
+.icon-gallery-search {
+  width: 300px;
+}
+
+.icon-gallery-card {
+  width: 120px;
+}
+
+.icon-gallery-preview {
+  height: 32px;
+}
+
+.icon-gallery-name {
+  max-width: 108px;
+  font-size: 10px;
+}
diff --git a/web_src/js/modules/devtest.ts b/web_src/js/modules/devtest.ts
index 7886ff9748..8aa7a9364f 100644
--- a/web_src/js/modules/devtest.ts
+++ b/web_src/js/modules/devtest.ts
@@ -8,6 +8,25 @@ import {html} from '../utils/html.ts';
 type LevelMap = Record<string, (message: string) => Toast | null>;
 
 function initDevtestPage() {
+  const iconSearch = document.querySelector<HTMLInputElement>('#icon-search');
+  const iconSizeToggle = document.querySelector<HTMLInputElement>('#icon-size-toggle');
+  if (iconSearch && iconSizeToggle) {
+    iconSearch.addEventListener('input', () => {
+      const query = iconSearch.value.toLowerCase();
+      for (const card of document.querySelectorAll<HTMLElement>('.icon-card')) {
+        card.style.display = card.getAttribute('data-name')!.includes(query) ? '' : 'none';
+      }
+    });
+
+    iconSizeToggle.addEventListener('change', () => {
+      const size = iconSizeToggle.checked ? '24' : '16';
+      for (const icon of document.querySelectorAll<SVGElement>('.icon-card svg')) {
+        icon.setAttribute('width', size);
+        icon.setAttribute('height', size);
+      }
+    });
+  }
+
   const toastButtons = document.querySelectorAll('.toast-test-button');
   if (toastButtons.length) {
     const levelMap: LevelMap = {info: showInfoToast, warning: showWarningToast, error: showErrorToast};