diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts b/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts
index 7281ae03d5f..344d2a62e81 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts
@@ -433,6 +433,21 @@ describe("calcite-autocomplete", () => {
       await page.setContent(simpleHTML);
     });
 
+    it("should be able to remove icon", async () => {
+      const page = await newE2EPage();
+      await page.setContent(simpleHTML);
+
+      const autocomplete = await page.find("calcite-autocomplete");
+      const input = await page.find("calcite-autocomplete >>> calcite-input");
+
+      expect(await input.getProperty("icon")).toBe(undefined);
+
+      autocomplete.setProperty("icon", false);
+      await page.waitForChanges();
+
+      expect(await input.getProperty("icon")).toBe(false);
+    });
+
     it("should open on focus", async () => {
       const page = await newE2EPage();
       await page.setContent(simpleHTML);
diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
index ffb05ad5dad..513c2f041dc 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
@@ -134,6 +134,21 @@ export const simple = (args: AutocompleteStoryArgs): string => html`
   </div>
 `;
 
+export const customIcon = (): string => html`
+  <div style="width:350px">
+    <calcite-autocomplete icon="banana"></calcite-autocomplete>
+  </div>
+`;
+
+export const noIcon = (): string => html`
+  <div style="width:350px">
+    <calcite-autocomplete id="autocomplete"></calcite-autocomplete>
+  </div>
+  <script>
+    document.getElementById("autocomplete").icon = false;
+  </script>
+`;
+
 export const matchResults = (): string =>
   html`<div style="width:350px; height: 600px;">
     <calcite-autocomplete label="Item list" id="myAutocomplete" input-value="item" open>
diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
index 51849faa3d0..a78ba4155f4 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
@@ -60,7 +60,7 @@ import { Validation } from "../functional/Validation";
 import { createObserver } from "../../utils/observers";
 import { styles } from "./autocomplete.scss";
 import T9nStrings from "./assets/t9n/messages.en.json";
-import { CSS, ICONS, IDS, SLOTS } from "./resources";
+import { CSS, IDS, SLOTS } from "./resources";
 
 const groupItemSelector = "calcite-autocomplete-item-group";
 const itemSelector = "calcite-autocomplete-item";
@@ -654,12 +654,6 @@ export class Autocomplete
     this.updateGroups();
   }
 
-  private getIcon(): IconNameOrString {
-    const { icon } = this;
-
-    return icon === true ? ICONS.search : icon || ICONS.search;
-  }
-
   private setReferenceEl(el: Input["el"]): void {
     this.referenceEl = el;
 
@@ -794,7 +788,7 @@ export class Autocomplete
             disabled={disabled}
             enterKeyHint={enterKeyHint}
             form={this.form}
-            icon={this.getIcon()}
+            icon={this.icon}
             iconFlipRtl={this.iconFlipRtl}
             id={inputId}
             inputMode={inputMode}
diff --git a/packages/calcite-components/src/components/autocomplete/resources.ts b/packages/calcite-components/src/components/autocomplete/resources.ts
index 9500200e205..7fb20c5b668 100644
--- a/packages/calcite-components/src/components/autocomplete/resources.ts
+++ b/packages/calcite-components/src/components/autocomplete/resources.ts
@@ -3,10 +3,6 @@ export const SLOTS = {
   contentTop: "content-top",
 } as const;
 
-export const ICONS = {
-  search: "search",
-} as const;
-
 export const CSS = {
   inputContainer: "input-container",
   input: "input",
diff --git a/packages/calcite-components/src/utils/dom.spec.ts b/packages/calcite-components/src/utils/dom.spec.ts
index 79ade958c28..9ed8bd625a6 100644
--- a/packages/calcite-components/src/utils/dom.spec.ts
+++ b/packages/calcite-components/src/utils/dom.spec.ts
@@ -63,10 +63,28 @@ describe("dom", () => {
         "myCustomValue",
       ));
 
-    it("returns the pre-defined icon name if custom value is not passed", () =>
+    it("returns the pre-defined icon name if custom value is empty string", () =>
       expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "", "exampleValue")).toBe(
         "exampleReturnedValue",
       ));
+
+    it("returns the pre-defined icon name if custom value is undefined", () =>
+      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, undefined, "exampleValue")).toBe(
+        "exampleReturnedValue",
+      ));
+
+    it("returns the pre-defined icon name if custom value is null", () =>
+      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, null, "exampleValue")).toBe(
+        "exampleReturnedValue",
+      ));
+
+    it("returns the pre-defined icon name if custom value is true", () =>
+      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, true, "exampleValue")).toBe(
+        "exampleReturnedValue",
+      ));
+
+    it("returns no icon if custom value is false", () =>
+      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, false, "exampleValue")).toBe(undefined));
   });
 
   describe("uniqueId", () => {
diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts
index 48a0e4ec543..9d12aecf6c5 100644
--- a/packages/calcite-components/src/utils/dom.ts
+++ b/packages/calcite-components/src/utils/dom.ts
@@ -327,14 +327,18 @@ export function filterElementsBySelector<T extends Element>(elements: Element[],
  */
 export function setRequestedIcon(
   iconObject: Record<string, IconNameOrString>,
-  iconValue: IconNameOrString | boolean | "",
+  iconValue: IconNameOrString | boolean,
   matchedValue: string,
 ): IconNameOrString | undefined {
-  if (typeof iconValue === "string" && iconValue !== "") {
-    return iconValue;
-  } else if (iconValue === "" || iconValue === true) {
+  console.log(iconValue, matchedValue);
+
+  if (iconValue === false) {
+    return undefined;
+  } else if (iconValue === true || !iconValue) {
     return iconObject[matchedValue];
   }
+
+  return iconValue;
 }
 
 /**