diff --git a/package-lock.json b/package-lock.json
index 4aaae85..0d4cec1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
+        "@mdi/js": "^6.7.96",
         "@polymer/paper-button": "^3.0.1",
         "chrome-types": "^0.1.113",
         "clean-terminal-webpack-plugin": "^3.0.0",
@@ -83,6 +84,11 @@
       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.2.tgz",
       "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA=="
     },
+    "node_modules/@mdi/js": {
+      "version": "6.7.96",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.7.96.tgz",
+      "integrity": "sha512-vZvhFrNN9LQx+Awu3nU6ESfXXDpRA/CA4mwikzU5g8uf9NpAocK43ecQvVNntwiXlLKpyplas8d4lsfpqjtXLA=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3159,6 +3165,11 @@
       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.2.tgz",
       "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA=="
     },
+    "@mdi/js": {
+      "version": "6.7.96",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.7.96.tgz",
+      "integrity": "sha512-vZvhFrNN9LQx+Awu3nU6ESfXXDpRA/CA4mwikzU5g8uf9NpAocK43ecQvVNntwiXlLKpyplas8d4lsfpqjtXLA=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/package.json b/package.json
index 74a3012..3e4d53f 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@mdi/js": "^6.7.96",
     "@polymer/paper-button": "^3.0.1",
     "chrome-types": "^0.1.113",
     "clean-terminal-webpack-plugin": "^3.0.0",
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>
       `;