diff --git a/src/UI/Components/Glyph.js b/src/UI/Components/Glyph.js
new file mode 100644
index 000000000..2d58dadfc
--- /dev/null
+++ b/src/UI/Components/Glyph.js
@@ -0,0 +1,28 @@
+import { Component } from "../../util/Component.js";
+
+export default def(class Glyph extends Component {
+    static ID = 'ui.component.Glyph';
+
+    static PROPERTIES = {
+        size: {
+            value: 24,
+        },
+        codepoint: {
+            value: '✅',
+        },
+    }
+
+    static CSS = `
+        div {
+            text-align: center;
+        }
+    `;
+
+    create_template ({ template }) {
+        template.innerHTML = /*html*/`
+            <div style="font-size: ${this.get('size')}px;">
+                ${this.get('codepoint')}
+            </div>
+        `;
+    }
+});
diff --git a/src/init_async.js b/src/init_async.js
index 212310431..b738b9aa9 100644
--- a/src/init_async.js
+++ b/src/init_async.js
@@ -3,6 +3,7 @@ logger.info('start -> async initialization');
 
 import './util/TeePromise.js';
 import './util/Component.js';
+import './UI/Components/Glyph.js';
 
 logger.info('end -> async initialization');
 globalThis.init_promise.resolve();