diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index 24b951df2..50b9ca705 100644
Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ
diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index 51715f2a4..ae85a0ea6 100644
Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ
diff --git a/netbox/project-static/src/select/config.ts b/netbox/project-static/src/select/config.ts
new file mode 100644
index 000000000..b947589a2
--- /dev/null
+++ b/netbox/project-static/src/select/config.ts
@@ -0,0 +1,10 @@
+export const config = {
+
+      // Provides the "clear" button on the widget
+      plugins: {
+        'clear_button': {
+          'html': (data: Dict) => `<i class="mdi mdi-close-circle ${data.className}" title="${data.title}"></i>`
+        }
+      },
+
+}
diff --git a/netbox/project-static/src/select/dynamic.ts b/netbox/project-static/src/select/dynamic.ts
index 3b210d411..6a333fcae 100644
--- a/netbox/project-static/src/select/dynamic.ts
+++ b/netbox/project-static/src/select/dynamic.ts
@@ -1,6 +1,7 @@
 import { TomOption } from 'tom-select/src/types';
 import { escape_html } from 'tom-select/src/utils';
 import { DynamicTomSelect } from './classes/dynamicTomSelect';
+import { config } from './config'
 import { getElements } from '../util';
 
 const VALUE_FIELD = 'id';
@@ -21,13 +22,11 @@ function renderOption(data: TomOption, escape: typeof escape_html) {
 export function initDynamicSelects(): void {
   for (const select of getElements<HTMLSelectElement>('select.api-select')) {
     new DynamicTomSelect(select, {
+      ...config,
       valueField: VALUE_FIELD,
       labelField: LABEL_FIELD,
       maxOptions: MAX_OPTIONS,
 
-      // Provides the "clear" button on the widget
-      plugins: ['clear_button'],
-
       // Disable local search (search is performed on the backend)
       searchField: [],
 
diff --git a/netbox/project-static/src/select/static.ts b/netbox/project-static/src/select/static.ts
index d94affef3..e8bb150bb 100644
--- a/netbox/project-static/src/select/static.ts
+++ b/netbox/project-static/src/select/static.ts
@@ -1,6 +1,7 @@
 import { TomOption } from 'tom-select/src/types';
 import TomSelect from 'tom-select';
 import { escape_html } from 'tom-select/src/utils';
+import { config } from './config'
 import { getElements } from '../util';
 
 // Initialize <select> elements with statically-defined options
@@ -9,7 +10,7 @@ export function initStaticSelects(): void {
     'select:not(.api-select):not(.color-select)',
   )) {
     new TomSelect(select, {
-      plugins: ['clear_button'],
+      ...config,
     });
   }
 }
@@ -18,6 +19,7 @@ export function initStaticSelects(): void {
 export function initColorSelects(): void {
   for (const select of getElements<HTMLSelectElement>('select.color-select')) {
     new TomSelect(select, {
+      ...config,
       render: {
         option: function (item: TomOption, escape: typeof escape_html) {
           return `<div style="background-color: #${escape(item.value)}">${escape(item.text)}</div>`;