diff --git a/.changeset/tom-select-input-icon.md b/.changeset/tom-select-input-icon.md
new file mode 100644
index 000000000..f003aaab5
--- /dev/null
+++ b/.changeset/tom-select-input-icon.md
@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/docs": patch
+---
+
+Added `.input-icon` support for Tom Select: a leading icon no longer overlaps the selected value.
diff --git a/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap b/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap
index cc24d90a3..72718e27f 100644
--- a/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap
+++ b/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap
@@ -81,6 +81,7 @@ exports[`css custom-property prefixing > leaves vendor-owned names alone and pre
   "--tblr-green",
   "--tblr-icon-size",
   "--tblr-info",
+  "--tblr-input-icon-padding-start",
   "--tblr-light",
   "--tblr-orange",
   "--tblr-primary",
diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss
index b88357da0..6612be68e 100644
--- a/core/scss/vendor/_tom-select.scss
+++ b/core/scss/vendor/_tom-select.scss
@@ -94,6 +94,13 @@
   }
 }
 
+// In an `.input-icon`, the wrapper carries the `.form-select` class that gets the room for
+// the icon, but the preset draws the text in `.ts-control` with its own padding: leave the
+// room for a leading icon there.
+.input-icon > .input-icon-addon ~ .ts-wrapper .ts-control {
+  padding-inline-start: var(--input-icon-padding-start);
+}
+
 // Every declaration below is `!important`: the bootstrap5 preset CSS targets
 // these same selectors at equal specificity, and whichever stylesheet is
 // included last otherwise wins outright (not just for z-index — the preset's
diff --git a/docs/content/ui/plugins/advanced-select.mdx b/docs/content/ui/plugins/advanced-select.mdx
index 2615de98e..402afedef 100644
--- a/docs/content/ui/plugins/advanced-select.mdx
+++ b/docs/content/ui/plugins/advanced-select.mdx
@@ -9,6 +9,7 @@ related: [/ui/forms/select-group, /ui/forms/elements]
 ---
 
 import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';
 import TabsPackage from '@components/TabsPackage.astro';
 import { Code } from 'astro:components';
 import { site } from '@shared/lib/site.ts';
@@ -146,6 +147,24 @@ Add `.is-valid` or `.is-invalid` to the `<select>` to show a validation state. T
 </div>
 </Example>
 
+### With an icon
+
+Put the `<select>` in an [`.input-icon`](/ui/forms/elements#input-with-icon) after an `.input-icon-addon`, as for an input. The icon shows inside the Tom Select field.
+
+<Example>
+<div class="input-icon">
+  <span class="input-icon-addon">
+    <Icon name="user" />
+  </span>
+  <select class="form-select" id="select-icon" data-placeholder="Assign to…">
+    <option value="">Assign to…</option>
+    <option value="1">Jane Doe</option>
+    <option value="2">Mark Smith</option>
+    <option value="3">Amy Kim</option>
+  </select>
+</div>
+</Example>
+
 ### Rich options
 
 An option can carry extra markup - an avatar, a flag, a badge - through a `data-custom-properties` attribute. Read it in a custom `render.option` / `render.item` function and show it next to the option text.
@@ -218,7 +237,7 @@ window.addEventListener('load', function () {
 		return '<div>' + escape(data.text) + '</div>';
 	}
 
-	['select-overview', 'select-basic', 'select-placeholder', 'select-multiple', 'select-optgroup', 'select-valid', 'select-invalid'].forEach(function (id) {
+	['select-overview', 'select-basic', 'select-placeholder', 'select-multiple', 'select-optgroup', 'select-valid', 'select-invalid', 'select-icon'].forEach(function (id) {
 		var el = document.getElementById(id);
 		if (el) new TomSelect(el, { copyClassesToDropdown: false, dropdownParent: 'body' });
 	});