diff --git a/components/DefaultIcon.vue b/components/DefaultIcon.vue
index 17e6c79..6fc6891 100644
--- a/components/DefaultIcon.vue
+++ b/components/DefaultIcon.vue
@@ -1,9 +1,11 @@
 <template>
   <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
 	class="default-icon">
-		<span class="default-icon-text">
-			{{ previewName }}
-		</span>
+		<div class="default-icon-text-container">
+			<span class="default-icon-text">
+				{{ previewName }}
+			</span>
+		</div>
   </div>
 </template>
 
@@ -31,12 +33,17 @@ if (props.name.length > 3) {
 </script>
 
 <style scoped>
-.default-icon {
+.default-icon, .default-icon-text-container {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
+.default-icon-text-container {
+	height: 100%;
+	width: 100%;
+}
+
 .default-icon-text {
 	/* helps centre the icon, yes, this is NOT perfect */
 	margin-top: -0.15em;