diff --git a/src/options/credits.json5 b/src/options/credits.json5
index ac911a6..286b50d 100644
--- a/src/options/credits.json5
+++ b/src/options/credits.json5
@@ -17,6 +17,12 @@
     "license": "MIT License"
   },
   {
+    "name": "@mdi/js",
+    "url": "https://materialdesignicons.com/",
+    "author": "Pictogrammers icon Group, Google LLC",
+    "license": "MIT and Apache-2.0 License"
+  },
+  {
     "name": "@polymer/paper-button",
     "url": "https://github.com/PolymerElements/paper-button",
     "author": "The Polymer Project Authors",
@@ -100,4 +106,9 @@
     "author": "Pavel Kuzmin",
     "license": "MIT License"
   },
+  {
+    "name": "Home Assistant Frontend",
+    "url": "https://github.com/home-assistant/frontend",
+    "license": "Apache-2.0 License"
+  }
 ]
diff --git a/src/options/elements/framework/ha-svg-icon.ts b/src/options/elements/framework/ha-svg-icon.ts
new file mode 100644
index 0000000..99b18f2
--- /dev/null
+++ b/src/options/elements/framework/ha-svg-icon.ts
@@ -0,0 +1,60 @@
+/*
+ * Written by the Home Assistant frontend authors, and copied here under the
+ * Apache 2.0 license
+ * (https://github.com/home-assistant/frontend/blob/dev/LICENSE.md).
+ *
+ * Slightly adapted.
+ *
+ * Original file:
+ * https://github.com/home-assistant/frontend/blob/4922e575f822c65d81fcde1225cfee5e338ac997/src/components/ha-svg-icon.ts
+ **/
+import {css, CSSResultGroup, LitElement, svg, SVGTemplateResult} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('ha-svg-icon')
+export class HaSvgIcon extends LitElement {
+  @property() public path?: string;
+
+  @property() public viewBox?: string;
+
+  protected render(): SVGTemplateResult {
+    return svg`
+    <svg
+      viewBox=${this.viewBox || '0 0 24 24'}
+      preserveAspectRatio="xMidYMid meet"
+      focusable="false"
+      role="img" 
+      aria-hidden="true"
+    >
+      <g>
+      ${this.path ? svg`<path d=${this.path}></path>` : ''}
+      </g>
+    </svg>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: var(--ha-icon-display, inline-flex);
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        vertical-align: middle;
+        fill: currentcolor;
+        width: var(--mdc-icon-size, 24px);
+        height: var(--mdc-icon-size, 24px);
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        display: block;
+      }
+    `;
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ha-svg-icon': HaSvgIcon;
+  }
+}
diff --git a/src/options/elements/options-editor/languages-editor.ts b/src/options/elements/options-editor/languages-editor.ts
index c48a3b6..d6f3e52 100644
--- a/src/options/elements/options-editor/languages-editor.ts
+++ b/src/options/elements/options-editor/languages-editor.ts
@@ -1,6 +1,8 @@
 import '@polymer/paper-button/paper-button.js';
 import './add-language-dialog';
+import '../framework/ha-svg-icon';
 
+import {mdiArrowDown, mdiArrowUp, mdiClose} from '@mdi/js';
 import {css, html, LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {map} from 'lit/directives/map.js';
@@ -60,7 +62,6 @@
         }
 
         #languages li :is(.delete, .movebtn) {
-          font-family: inherit!important;
           min-width: 28px;
           width: 28px;
           min-height: 28px;
@@ -69,6 +70,10 @@
           margin: 0;
         }
 
+        #languages li ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
+
         #languages li paper-button:is(:hover, :focus) {
           background: rgba(0, 0, 0, 0.06);
         }
@@ -98,13 +103,13 @@
           <paper-button
               class="movebtn"
               @click=${() => this.swapLanguages(i, i - 1)}>
-            ↑
+            <ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
           </paper-button>
         `);
       } else {
         moveBtns.push(html`
           <paper-button class="movebtn" disabled>
-            ↑
+            <ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
           </paper-button>
         `);
       }
@@ -113,13 +118,13 @@
           <paper-button
               class="movebtn"
               @click=${() => this.swapLanguages(i, i + 1)}>
-            ↓
+            <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
           </paper-button>
         `);
       } else {
         moveBtns.push(html`
           <paper-button class="movebtn" disabled>
-            ↓
+            <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
           </paper-button>
         `);
       }
@@ -133,7 +138,7 @@
           <paper-button
               class="delete"
               @click=${() => this.deleteLanguage(lang)}>
-            ×
+            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
           </paper-button>
         </li>
       `;