diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
index 77e66babe7..83208d236e 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -11,6 +11,7 @@ import {
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { slugify } from "../../../../common/string/slugify";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-icon-input";
 import { LovelaceViewConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import "../../components/hui-theme-select-editor";
@@ -93,16 +94,17 @@ export class HuiViewEditor extends LitElement {
           @value-changed=${this._valueChanged}
           @blur=${this._handleTitleBlur}
         ></paper-input>
-        <paper-input
+        <ha-icon-input
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.icon"
-          )}  (${this.hass.localize(
+          )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.optional"
           )})"
           .value=${this._icon}
+          .placeholder=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}
-        ></paper-input>
+        ></ha-icon-input>
         <paper-input
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.url"