From 26cf42a419f085e6ef4f999412898d282bd9be00 Mon Sep 17 00:00:00 2001
From: Grace Kind <gracekind400@gmail.com>
Date: Wed, 22 Jul 2026 22:51:10 -0500
Subject: [PATCH] Tweak styles

---
 package.json                                  |  2 +-
 src/css/style.css                             | 81 +++----------------
 src/js/templates/icons/alertIcon.template.js  |  8 +-
 src/js/templates/icons/arrowLeft.template.js  |  8 +-
 .../icons/automatedAccountIcon.template.js    |  2 +
 .../templates/icons/bookmarkIcon.template.js  |  9 ++-
 src/js/templates/icons/boxIcon.template.js    |  4 +
 src/js/templates/icons/cameraIcon.template.js |  8 +-
 src/js/templates/icons/chatIcon.template.js   |  4 +
 src/js/templates/icons/checkIcon.template.js  |  8 +-
 .../templates/icons/chevronLeft.template.js   |  8 +-
 .../templates/icons/chevronRight.template.js  |  8 +-
 src/js/templates/icons/chevronUp.template.js  |  8 +-
 .../icons/circleCheckIcon.template.js         |  8 +-
 src/js/templates/icons/closeIcon.template.js  |  8 +-
 src/js/templates/icons/codeIcon.template.js   |  8 +-
 .../templates/icons/contactsIcon.template.js  |  8 +-
 .../icons/cornerDownRightIcon.template.js     |  8 +-
 .../icons/cropIndicatorIcon.template.js       |  8 +-
 src/js/templates/icons/editIcon.template.js   |  8 +-
 src/js/templates/icons/emojiIcon.template.js  |  2 +
 src/js/templates/icons/eyeIcon.template.js    |  8 +-
 .../templates/icons/eyeSlashIcon.template.js  |  8 +-
 src/js/templates/icons/globeIcon.template.js  |  8 +-
 .../templates/icons/hashtagIcon.template.js   |  4 +
 src/js/templates/icons/heartIcon.template.js  | 14 +++-
 src/js/templates/icons/homeIcon.template.js   |  4 +
 src/js/templates/icons/imageIcon.template.js  |  8 +-
 src/js/templates/icons/inboxIcon.template.js  |  8 +-
 src/js/templates/icons/infoIcon.template.js   |  8 +-
 src/js/templates/icons/likeIcon.template.js   |  2 +
 src/js/templates/icons/linkIcon.template.js   |  8 +-
 src/js/templates/icons/listIcon.template.js   |  4 +
 src/js/templates/icons/lockIcon.template.js   |  8 +-
 src/js/templates/icons/menuIcon.template.js   |  2 +
 .../icons/messagePlusIcon.template.js         |  8 +-
 .../templates/icons/moreMenuIcon.template.js  |  8 +-
 .../templates/icons/mutedWordIcon.template.js |  8 +-
 .../icons/notificationsIcon.template.js       |  4 +
 src/js/templates/icons/pinIcon.template.js    |  4 +
 src/js/templates/icons/playIcon.template.js   |  8 +-
 src/js/templates/icons/plusIcon.template.js   |  8 +-
 src/js/templates/icons/reloadIcon.template.js |  8 +-
 src/js/templates/icons/replyIcon.template.js  |  2 +
 src/js/templates/icons/repostIcon.template.js |  2 +
 .../icons/restrictedIcon.template.js          |  8 +-
 src/js/templates/icons/searchIcon.template.js |  4 +
 src/js/templates/icons/sendIcon.template.js   |  8 +-
 .../templates/icons/settingsIcon.template.js  |  4 +
 src/js/templates/icons/smileIcon.template.js  |  8 +-
 .../templates/icons/trashCanIcon.template.js  |  8 +-
 src/js/templates/icons/userIcon.template.js   |  4 +
 .../templates/icons/userPlusIcon.template.js  |  4 +
 src/js/templates/icons/usersIcon.template.js  |  8 +-
 .../icons/verifiedCheckIcon.template.js       |  2 +
 .../icons/verifierCheckIcon.template.js       |  2 +
 56 files changed, 324 insertions(+), 106 deletions(-)

diff --git a/package.json b/package.json
index bd843339..6a4ebd02 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.18.58",
+  "version": "0.18.59",
   "type": "module",
   "scripts": {
     "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",
diff --git a/src/css/style.css b/src/css/style.css
index 321357df..f9b914c8 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -501,11 +501,6 @@ plugin-rich-text {
   color: var(--highlight-color);
 }
 
-.text-pill-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .icon-button {
   display: inline-flex;
   align-items: center;
@@ -520,11 +515,6 @@ plugin-rich-text {
   transition: background-color 0.2s;
 }
 
-.icon-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .icon-button .icon {
   width: 24px;
   height: 24px;
@@ -1627,7 +1617,7 @@ container-link {
 }
 
 .post {
-  padding-top: 10px;
+  padding-top: 12px;
   padding-left: 16px;
   padding-right: 16px;
   padding-bottom: 10px;
@@ -2121,6 +2111,12 @@ container-link {
   position: relative;
 }
 
+.icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 .close-icon {
   width: 24px;
   height: 24px;
@@ -2234,7 +2230,6 @@ container-link {
 }
 
 .post-action-button[disabled] {
-  opacity: 0.5;
   cursor: auto;
 }
 
@@ -4586,11 +4581,6 @@ chat-input .rich-text-input-placeholder {
   }
 }
 
-.message-input-emoji-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .message-input-emoji-button .emoji-icon {
   width: 22px;
   height: 22px;
@@ -4628,11 +4618,6 @@ chat-input .rich-text-input-placeholder {
   opacity: 0.8;
 }
 
-.message-input-send-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .message-input-send-button .send-icon {
   color: var(--overlay-text-color);
   width: 20px;
@@ -4773,7 +4758,6 @@ chat-input .rich-text-input-placeholder {
 }
 
 .reaction-palette-button[disabled] {
-  opacity: 0.4;
   cursor: not-allowed;
 }
 
@@ -4921,6 +4905,10 @@ chat-input .rich-text-input-placeholder {
   font: inherit;
 }
 
+.reaction-row:disabled {
+  opacity: 1;
+}
+
 .reaction-row-own {
   cursor: pointer;
 }
@@ -5310,7 +5298,7 @@ emoji-picker-dialog emoji-picker,
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 16px;
+  padding: 12px 16px;
   border-bottom: var(--hair) solid var(--post-border-color);
   cursor: pointer;
 }
@@ -5701,11 +5689,6 @@ emoji-picker-dialog emoji-picker,
   cursor: pointer;
 }
 
-.feeds-list-item-unpin-button:disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-
 .feeds-list-item-unpin-button svg {
   width: 20px;
   height: 20px;
@@ -5758,11 +5741,6 @@ emoji-picker-dialog emoji-picker,
   height: 24px;
 }
 
-.new-chat-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .header svg {
   display: block;
 }
@@ -6682,11 +6660,6 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   border: none;
 }
 
-.context-menu-item button[disabled] {
-  opacity: 0.5;
-  cursor: default;
-}
-
 @media (min-width: 800px) {
   .context-menu {
     position: absolute;
@@ -7238,11 +7211,6 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   }
 }
 
-.lightbox-nav:disabled {
-  opacity: 0.3;
-  cursor: default;
-}
-
 .lightbox-nav-prev {
   left: 20px;
 }
@@ -7519,11 +7487,6 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   line-height: 1.4;
 }
 
-.muted-word-renew-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .muted-word-delete-button {
   flex-shrink: 0;
   width: 28px;
@@ -7917,11 +7880,6 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   }
 }
 
-.account-switcher-close[disabled] {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .account-switcher-list {
   display: flex;
   flex-direction: column;
@@ -7954,11 +7912,6 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   }
 }
 
-.account-switcher-item[disabled] {
-  opacity: 0.6;
-  cursor: default;
-}
-
 .account-switcher-item.is-pending {
   opacity: 1;
 }
@@ -8531,7 +8484,6 @@ moderation-warning .toggle-content {
 }
 
 .label-pref-button:disabled {
-  opacity: 0.5;
   cursor: not-allowed;
 }
 
@@ -8811,7 +8763,6 @@ moderation-warning .toggle-content {
 }
 
 .report-submit-button:disabled {
-  opacity: 0.6;
   cursor: not-allowed;
 }
 
@@ -8969,7 +8920,6 @@ toggle-switch {
 }
 
 .post-notifications-dialog-save:disabled {
-  opacity: 0.5;
   cursor: not-allowed;
 }
 
@@ -9062,7 +9012,6 @@ toggle-switch {
 }
 
 .add-to-lists-toggle:disabled {
-  opacity: 0.5;
   cursor: not-allowed;
 }
 
@@ -9294,7 +9243,6 @@ toggle-switch {
 }
 
 .new-chat-result.is-not-messageable {
-  opacity: 0.5;
   cursor: not-allowed;
 }
 
@@ -9415,11 +9363,6 @@ tab-bar[full-width] .tab-bar-button {
   padding: 4px 0;
 }
 
-.form-dialog-header-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .form-dialog-save-button:enabled,
 .form-dialog-save-button.saving {
   color: var(--primary-button-color);
diff --git a/src/js/templates/icons/alertIcon.template.js b/src/js/templates/icons/alertIcon.template.js
index b6215dc6..0b7dea80 100644
--- a/src/js/templates/icons/alertIcon.template.js
+++ b/src/js/templates/icons/alertIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function alertIconTemplate() {
   return html`<div class="icon alert-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <circle
         cx="12"
         cy="12"
diff --git a/src/js/templates/icons/arrowLeft.template.js b/src/js/templates/icons/arrowLeft.template.js
index 99f0573f..6441771f 100644
--- a/src/js/templates/icons/arrowLeft.template.js
+++ b/src/js/templates/icons/arrowLeft.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function arrowLeftIconTemplate() {
   return html`<div class="icon arrow-left-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/automatedAccountIcon.template.js b/src/js/templates/icons/automatedAccountIcon.template.js
index 99ea1225..91d5f61e 100644
--- a/src/js/templates/icons/automatedAccountIcon.template.js
+++ b/src/js/templates/icons/automatedAccountIcon.template.js
@@ -4,6 +4,8 @@ export function automatedAccountIconTemplate() {
   return html`<svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
+    width="24"
+    height="24"
     fill="none"
   >
     <path
diff --git a/src/js/templates/icons/bookmarkIcon.template.js b/src/js/templates/icons/bookmarkIcon.template.js
index a0b48d81..54aa1e15 100644
--- a/src/js/templates/icons/bookmarkIcon.template.js
+++ b/src/js/templates/icons/bookmarkIcon.template.js
@@ -4,7 +4,12 @@ import { classnames } from "/js/utils.js";
 export function bookmarkIconTemplate({ filled = false } = {}) {
   return html`<div class=${classnames("icon bookmark-icon", { filled })}>
     ${filled
-      ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      ? html`<svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+        >
           <path
             fill="currentColor"
             fill-rule="evenodd"
@@ -15,6 +20,8 @@ export function bookmarkIconTemplate({ filled = false } = {}) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/boxIcon.template.js b/src/js/templates/icons/boxIcon.template.js
index e90d5e11..1c02bde5 100644
--- a/src/js/templates/icons/boxIcon.template.js
+++ b/src/js/templates/icons/boxIcon.template.js
@@ -12,6 +12,8 @@ export function boxIconTemplate({ filled = false } = {}) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
@@ -24,6 +26,8 @@ export function boxIconTemplate({ filled = false } = {}) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/cameraIcon.template.js b/src/js/templates/icons/cameraIcon.template.js
index 8bb77969..d71641de 100644
--- a/src/js/templates/icons/cameraIcon.template.js
+++ b/src/js/templates/icons/cameraIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function cameraIconTemplate() {
   return html`<div class="icon camera-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         fill="currentColor"
         fill-rule="evenodd"
diff --git a/src/js/templates/icons/chatIcon.template.js b/src/js/templates/icons/chatIcon.template.js
index 2c431ef8..d9121606 100644
--- a/src/js/templates/icons/chatIcon.template.js
+++ b/src/js/templates/icons/chatIcon.template.js
@@ -13,6 +13,8 @@ export function chatIconTemplate({ filled = false } = {}) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
@@ -29,6 +31,8 @@ export function chatIconTemplate({ filled = false } = {}) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/checkIcon.template.js b/src/js/templates/icons/checkIcon.template.js
index c9ced5f2..aa711031 100644
--- a/src/js/templates/icons/checkIcon.template.js
+++ b/src/js/templates/icons/checkIcon.template.js
@@ -2,7 +2,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function checkIconTemplate() {
   return html`<div class="icon check-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/chevronLeft.template.js b/src/js/templates/icons/chevronLeft.template.js
index c23a6e22..2b5e340c 100644
--- a/src/js/templates/icons/chevronLeft.template.js
+++ b/src/js/templates/icons/chevronLeft.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function chevronLeftIconTemplate() {
   return html`<div class="icon chevron-left-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/chevronRight.template.js b/src/js/templates/icons/chevronRight.template.js
index a8d1cb4b..39d80f07 100644
--- a/src/js/templates/icons/chevronRight.template.js
+++ b/src/js/templates/icons/chevronRight.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function chevronRightIconTemplate() {
   return html`<div class="icon chevron-right-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/chevronUp.template.js b/src/js/templates/icons/chevronUp.template.js
index c10f0888..b2ea2996 100644
--- a/src/js/templates/icons/chevronUp.template.js
+++ b/src/js/templates/icons/chevronUp.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function chevronUpIconTemplate() {
   return html`<div class="icon chevron-up-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/circleCheckIcon.template.js b/src/js/templates/icons/circleCheckIcon.template.js
index 0ee3381f..a289baf4 100644
--- a/src/js/templates/icons/circleCheckIcon.template.js
+++ b/src/js/templates/icons/circleCheckIcon.template.js
@@ -2,7 +2,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function circleCheckIconTemplate() {
   return html`<div class="icon circle-check-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <circle
         cx="12"
         cy="12"
diff --git a/src/js/templates/icons/closeIcon.template.js b/src/js/templates/icons/closeIcon.template.js
index b777227c..57efdb23 100644
--- a/src/js/templates/icons/closeIcon.template.js
+++ b/src/js/templates/icons/closeIcon.template.js
@@ -2,7 +2,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function closeIconTemplate() {
   return html`<div class="icon close-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/codeIcon.template.js b/src/js/templates/icons/codeIcon.template.js
index 0a49c039..cab272d0 100644
--- a/src/js/templates/icons/codeIcon.template.js
+++ b/src/js/templates/icons/codeIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function codeIconTemplate() {
   return html`<div class="icon code-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/contactsIcon.template.js b/src/js/templates/icons/contactsIcon.template.js
index 50cc3f58..c1fa7759 100644
--- a/src/js/templates/icons/contactsIcon.template.js
+++ b/src/js/templates/icons/contactsIcon.template.js
@@ -3,7 +3,13 @@ import { html } from "/js/lib/lit-html.js";
 // Source: https://github.com/halfmage/majesticons/blob/main/solid/user-box.svg
 export function contactsIconTemplate() {
   return html`<div class="icon contacts-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <circle
         cx="12"
         cy="10"
diff --git a/src/js/templates/icons/cornerDownRightIcon.template.js b/src/js/templates/icons/cornerDownRightIcon.template.js
index 8dfe9166..47e3f952 100644
--- a/src/js/templates/icons/cornerDownRightIcon.template.js
+++ b/src/js/templates/icons/cornerDownRightIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function cornerDownRightIconTemplate() {
   return html`<div class="icon corner-down-right-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/cropIndicatorIcon.template.js b/src/js/templates/icons/cropIndicatorIcon.template.js
index 228f795d..f56234a6 100644
--- a/src/js/templates/icons/cropIndicatorIcon.template.js
+++ b/src/js/templates/icons/cropIndicatorIcon.template.js
@@ -2,7 +2,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function cropIndicatorIconTemplate() {
   return html`<div class="icon crop-indicator-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/editIcon.template.js b/src/js/templates/icons/editIcon.template.js
index e55b5c4f..d2ef73cc 100644
--- a/src/js/templates/icons/editIcon.template.js
+++ b/src/js/templates/icons/editIcon.template.js
@@ -3,7 +3,13 @@ import { html } from "/js/lib/lit-html.js";
 // Source: https://github.com/halfmage/majesticons/blob/main/solid/edit-pen-2.svg
 export function editIconTemplate({} = {}) {
   return html`<div class="icon edit-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         fill="currentColor"
         fill-rule="evenodd"
diff --git a/src/js/templates/icons/emojiIcon.template.js b/src/js/templates/icons/emojiIcon.template.js
index 2bf73876..f95307ac 100644
--- a/src/js/templates/icons/emojiIcon.template.js
+++ b/src/js/templates/icons/emojiIcon.template.js
@@ -4,6 +4,8 @@ export function emojiIconTemplate() {
   return html`<svg
     class="icon emoji-icon"
     viewBox="0 0 24 24"
+    width="24"
+    height="24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
diff --git a/src/js/templates/icons/eyeIcon.template.js b/src/js/templates/icons/eyeIcon.template.js
index 000d139e..98fada85 100644
--- a/src/js/templates/icons/eyeIcon.template.js
+++ b/src/js/templates/icons/eyeIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function eyeIconTemplate() {
   return html`<div class="icon eye-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/eyeSlashIcon.template.js b/src/js/templates/icons/eyeSlashIcon.template.js
index d949065a..ffba24fe 100644
--- a/src/js/templates/icons/eyeSlashIcon.template.js
+++ b/src/js/templates/icons/eyeSlashIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function eyeSlashIconTemplate() {
   return html`<div class="icon eye-slash-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/globeIcon.template.js b/src/js/templates/icons/globeIcon.template.js
index dff046c3..9219a91c 100644
--- a/src/js/templates/icons/globeIcon.template.js
+++ b/src/js/templates/icons/globeIcon.template.js
@@ -3,7 +3,13 @@ import { html } from "/js/lib/lit-html.js";
 // https://github.com/halfmage/majesticons/blob/main/line/globe-grid-line.svg
 export function globeIconTemplate() {
   return html`<div class="icon globe-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/hashtagIcon.template.js b/src/js/templates/icons/hashtagIcon.template.js
index b1fb3392..6399a853 100644
--- a/src/js/templates/icons/hashtagIcon.template.js
+++ b/src/js/templates/icons/hashtagIcon.template.js
@@ -8,6 +8,8 @@ export function hashtagIconTemplate({ filled = false } = {}) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
@@ -21,6 +23,8 @@ export function hashtagIconTemplate({ filled = false } = {}) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/heartIcon.template.js b/src/js/templates/icons/heartIcon.template.js
index 83eeba29..ad9fda6b 100644
--- a/src/js/templates/icons/heartIcon.template.js
+++ b/src/js/templates/icons/heartIcon.template.js
@@ -7,7 +7,12 @@ const heartPath =
 export function heartIconTemplate({ filled = false } = {}) {
   return html`<div class=${classnames("icon heart-icon", { filled })}>
     ${filled
-      ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      ? html`<svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+        >
           <path
             fill="currentColor"
             stroke="currentColor"
@@ -17,7 +22,12 @@ export function heartIconTemplate({ filled = false } = {}) {
             d=${heartPath}
           />
         </svg>`
-      : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      : html`<svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+        >
           <path
             fill="none"
             stroke="currentColor"
diff --git a/src/js/templates/icons/homeIcon.template.js b/src/js/templates/icons/homeIcon.template.js
index c8bbc077..742c8e63 100644
--- a/src/js/templates/icons/homeIcon.template.js
+++ b/src/js/templates/icons/homeIcon.template.js
@@ -12,6 +12,8 @@ export function homeIconTemplate({ filled = false } = {}) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
@@ -26,6 +28,8 @@ export function homeIconTemplate({ filled = false } = {}) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/imageIcon.template.js b/src/js/templates/icons/imageIcon.template.js
index dd62fbce..dbb7b0b0 100644
--- a/src/js/templates/icons/imageIcon.template.js
+++ b/src/js/templates/icons/imageIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function imageIconTemplate() {
   return html`<div class="icon image-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/inboxIcon.template.js b/src/js/templates/icons/inboxIcon.template.js
index a3b22265..b9adaef8 100644
--- a/src/js/templates/icons/inboxIcon.template.js
+++ b/src/js/templates/icons/inboxIcon.template.js
@@ -3,7 +3,13 @@ import { html } from "/js/lib/lit-html.js";
 // Source: src/img/icons/custom/inbox.svg
 export function inboxIconTemplate() {
   return html`<div class="icon inbox-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         fill="currentColor"
         fill-rule="evenodd"
diff --git a/src/js/templates/icons/infoIcon.template.js b/src/js/templates/icons/infoIcon.template.js
index 5902b778..7e5302bf 100644
--- a/src/js/templates/icons/infoIcon.template.js
+++ b/src/js/templates/icons/infoIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function infoIconTemplate() {
   return html`<div class="icon info-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <circle
         cx="12"
         cy="12"
diff --git a/src/js/templates/icons/likeIcon.template.js b/src/js/templates/icons/likeIcon.template.js
index 5b22c559..c9589c42 100644
--- a/src/js/templates/icons/likeIcon.template.js
+++ b/src/js/templates/icons/likeIcon.template.js
@@ -4,6 +4,8 @@ export function likeIconTemplate() {
   return html` <svg
     class="icon like-icon"
     viewBox="0 0 24 24"
+    width="24"
+    height="24"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
diff --git a/src/js/templates/icons/linkIcon.template.js b/src/js/templates/icons/linkIcon.template.js
index 79f47d9b..41ad0a6d 100644
--- a/src/js/templates/icons/linkIcon.template.js
+++ b/src/js/templates/icons/linkIcon.template.js
@@ -2,7 +2,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function linkIconTemplate() {
   return html`<div class="icon link-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/listIcon.template.js b/src/js/templates/icons/listIcon.template.js
index 1cc5d5f1..92a4c797 100644
--- a/src/js/templates/icons/listIcon.template.js
+++ b/src/js/templates/icons/listIcon.template.js
@@ -7,6 +7,8 @@ export function listIconTemplate({ filled = false } = {}) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
@@ -56,6 +58,8 @@ export function listIconTemplate({ filled = false } = {}) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/lockIcon.template.js b/src/js/templates/icons/lockIcon.template.js
index 64c518ac..c6564fa4 100644
--- a/src/js/templates/icons/lockIcon.template.js
+++ b/src/js/templates/icons/lockIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function lockIconTemplate() {
   return html`<div class="icon lock-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/menuIcon.template.js b/src/js/templates/icons/menuIcon.template.js
index beb1232c..a6fea50e 100644
--- a/src/js/templates/icons/menuIcon.template.js
+++ b/src/js/templates/icons/menuIcon.template.js
@@ -6,6 +6,8 @@ export function menuIconTemplate() {
       width="24"
       height="24"
       viewBox="0 0 24 24"
+      width="24"
+      height="24"
       fill="none"
       stroke="currentColor"
       stroke-width="2"
diff --git a/src/js/templates/icons/messagePlusIcon.template.js b/src/js/templates/icons/messagePlusIcon.template.js
index 8f939df3..9d8c9eea 100644
--- a/src/js/templates/icons/messagePlusIcon.template.js
+++ b/src/js/templates/icons/messagePlusIcon.template.js
@@ -3,7 +3,13 @@ import { html } from "/js/lib/lit-html.js";
 // Source: src/img/icons/custom/message-plus-line.svg
 export function messagePlusIconTemplate() {
   return html`<div class="icon message-plus-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         fill="currentColor"
         fill-rule="evenodd"
diff --git a/src/js/templates/icons/moreMenuIcon.template.js b/src/js/templates/icons/moreMenuIcon.template.js
index ab4f2bdc..4287fbc0 100644
--- a/src/js/templates/icons/moreMenuIcon.template.js
+++ b/src/js/templates/icons/moreMenuIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function moreMenuIconTemplate() {
   return html`<div class="icon more-menu-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/mutedWordIcon.template.js b/src/js/templates/icons/mutedWordIcon.template.js
index 8140b346..1b6f7d5f 100644
--- a/src/js/templates/icons/mutedWordIcon.template.js
+++ b/src/js/templates/icons/mutedWordIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function mutedWordIconTemplate() {
   return html`<div class="icon muted-word-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/notificationsIcon.template.js b/src/js/templates/icons/notificationsIcon.template.js
index baeb9461..cc211d9e 100644
--- a/src/js/templates/icons/notificationsIcon.template.js
+++ b/src/js/templates/icons/notificationsIcon.template.js
@@ -12,6 +12,8 @@ export function notificationsIconTemplate({ filled = false } = {}) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
@@ -29,6 +31,8 @@ export function notificationsIconTemplate({ filled = false } = {}) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/pinIcon.template.js b/src/js/templates/icons/pinIcon.template.js
index bea4102b..368c84eb 100644
--- a/src/js/templates/icons/pinIcon.template.js
+++ b/src/js/templates/icons/pinIcon.template.js
@@ -8,6 +8,8 @@ export function pinIconTemplate({ filled = false } = {}) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
@@ -25,6 +27,8 @@ export function pinIconTemplate({ filled = false } = {}) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/playIcon.template.js b/src/js/templates/icons/playIcon.template.js
index cd72dc3a..d12ed21d 100644
--- a/src/js/templates/icons/playIcon.template.js
+++ b/src/js/templates/icons/playIcon.template.js
@@ -2,7 +2,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function playIconTemplate() {
   return html`<div class="icon play-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         fill="currentColor"
         d="M9.528 7.118a1 1 0 0 1 1.027.05l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16V8a1 1 0 0 1 .528-.882z"
diff --git a/src/js/templates/icons/plusIcon.template.js b/src/js/templates/icons/plusIcon.template.js
index af0d3855..ed8f0392 100644
--- a/src/js/templates/icons/plusIcon.template.js
+++ b/src/js/templates/icons/plusIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function plusIconTemplate() {
   return html`<div class="icon plus-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/reloadIcon.template.js b/src/js/templates/icons/reloadIcon.template.js
index 85dfc80c..68e0b36e 100644
--- a/src/js/templates/icons/reloadIcon.template.js
+++ b/src/js/templates/icons/reloadIcon.template.js
@@ -3,7 +3,13 @@ import { html } from "/js/lib/lit-html.js";
 // Source: https://github.com/halfmage/majesticons/blob/main/line/reload-line.svg
 export function reloadIconTemplate() {
   return html`<div class="icon reload-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/replyIcon.template.js b/src/js/templates/icons/replyIcon.template.js
index ea51ee9c..5ab7cba5 100644
--- a/src/js/templates/icons/replyIcon.template.js
+++ b/src/js/templates/icons/replyIcon.template.js
@@ -4,6 +4,8 @@ export function replyIconTemplate() {
   return html`<svg
     class="icon reply-icon"
     viewBox="0 0 24 24"
+    width="24"
+    height="24"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
diff --git a/src/js/templates/icons/repostIcon.template.js b/src/js/templates/icons/repostIcon.template.js
index ee3ccf0a..bd5fe3a2 100644
--- a/src/js/templates/icons/repostIcon.template.js
+++ b/src/js/templates/icons/repostIcon.template.js
@@ -4,6 +4,8 @@ export function repostIconTemplate() {
   return html`<svg
     class="icon repost-icon"
     viewBox="0 0 24 24"
+    width="24"
+    height="24"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
diff --git a/src/js/templates/icons/restrictedIcon.template.js b/src/js/templates/icons/restrictedIcon.template.js
index b9630cf8..298074ad 100644
--- a/src/js/templates/icons/restrictedIcon.template.js
+++ b/src/js/templates/icons/restrictedIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function restrictedIconTemplate() {
   return html`<div class="icon restricted-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/searchIcon.template.js b/src/js/templates/icons/searchIcon.template.js
index 202d4c5a..6f221a52 100644
--- a/src/js/templates/icons/searchIcon.template.js
+++ b/src/js/templates/icons/searchIcon.template.js
@@ -12,6 +12,8 @@ export function searchIconTemplate({ filled = false } = ({} = {})) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
@@ -24,6 +26,8 @@ export function searchIconTemplate({ filled = false } = ({} = {})) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/sendIcon.template.js b/src/js/templates/icons/sendIcon.template.js
index 724b59c4..0851b964 100644
--- a/src/js/templates/icons/sendIcon.template.js
+++ b/src/js/templates/icons/sendIcon.template.js
@@ -4,7 +4,13 @@ import { html } from "/js/lib/lit-html.js";
 
 export function sendIconTemplate() {
   return html`<div class="icon send-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/settingsIcon.template.js b/src/js/templates/icons/settingsIcon.template.js
index 81e7048b..e47036ea 100644
--- a/src/js/templates/icons/settingsIcon.template.js
+++ b/src/js/templates/icons/settingsIcon.template.js
@@ -12,6 +12,8 @@ export function settingsIconTemplate({ filled = false } = {}) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
@@ -24,6 +26,8 @@ export function settingsIconTemplate({ filled = false } = {}) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <path
diff --git a/src/js/templates/icons/smileIcon.template.js b/src/js/templates/icons/smileIcon.template.js
index cbb60219..856c674d 100644
--- a/src/js/templates/icons/smileIcon.template.js
+++ b/src/js/templates/icons/smileIcon.template.js
@@ -3,7 +3,13 @@ import { html } from "/js/lib/lit-html.js";
 // Smiley face icon for emoji button
 export function smileIconTemplate() {
   return html`<div class="icon smile-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <circle
         cx="12"
         cy="12"
diff --git a/src/js/templates/icons/trashCanIcon.template.js b/src/js/templates/icons/trashCanIcon.template.js
index ae38f0b3..6e25351e 100644
--- a/src/js/templates/icons/trashCanIcon.template.js
+++ b/src/js/templates/icons/trashCanIcon.template.js
@@ -3,7 +3,13 @@ import { html } from "/js/lib/lit-html.js";
 // Source: https://github.com/halfmage/majesticons/blob/main/line/delete-bin-line.svg
 export function trashCanIconTemplate() {
   return html`<div class="icon trash-can-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <path
         stroke="currentColor"
         stroke-linecap="round"
diff --git a/src/js/templates/icons/userIcon.template.js b/src/js/templates/icons/userIcon.template.js
index 6dfdd70f..873ae939 100644
--- a/src/js/templates/icons/userIcon.template.js
+++ b/src/js/templates/icons/userIcon.template.js
@@ -12,6 +12,8 @@ export function userIconTemplate({ filled = false } = ({} = {})) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <circle
@@ -43,6 +45,8 @@ export function userIconTemplate({ filled = false } = ({} = {})) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <circle
diff --git a/src/js/templates/icons/userPlusIcon.template.js b/src/js/templates/icons/userPlusIcon.template.js
index c41fa653..f698e575 100644
--- a/src/js/templates/icons/userPlusIcon.template.js
+++ b/src/js/templates/icons/userPlusIcon.template.js
@@ -12,6 +12,8 @@ export function userPlusIconTemplate({ filled = false } = ({} = {})) {
       ? html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <mask id="user-plus-cutout">
@@ -49,6 +51,8 @@ export function userPlusIconTemplate({ filled = false } = ({} = {})) {
       : html`<svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
+          width="24"
+          height="24"
           fill="none"
         >
           <mask id="user-plus-cutout-outline">
diff --git a/src/js/templates/icons/usersIcon.template.js b/src/js/templates/icons/usersIcon.template.js
index 55890c93..694d3182 100644
--- a/src/js/templates/icons/usersIcon.template.js
+++ b/src/js/templates/icons/usersIcon.template.js
@@ -3,7 +3,13 @@ import { html } from "/js/lib/lit-html.js";
 // https://github.com/halfmage/majesticons/blob/main/line/users-line.svg
 export function usersIconTemplate() {
   return html`<div class="icon users-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+    >
       <circle
         cx="9"
         cy="9"
diff --git a/src/js/templates/icons/verifiedCheckIcon.template.js b/src/js/templates/icons/verifiedCheckIcon.template.js
index f09801c3..12f44661 100644
--- a/src/js/templates/icons/verifiedCheckIcon.template.js
+++ b/src/js/templates/icons/verifiedCheckIcon.template.js
@@ -4,6 +4,8 @@ export function verifiedCheckIconTemplate() {
   return html`<svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
+    width="24"
+    height="24"
     fill="none"
   >
     <circle cx="12" cy="12" r="11.5" fill="currentColor" />
diff --git a/src/js/templates/icons/verifierCheckIcon.template.js b/src/js/templates/icons/verifierCheckIcon.template.js
index 855376ad..28889f0f 100644
--- a/src/js/templates/icons/verifierCheckIcon.template.js
+++ b/src/js/templates/icons/verifierCheckIcon.template.js
@@ -4,6 +4,8 @@ export function verifierCheckIconTemplate() {
   return html`<svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
+    width="24"
+    height="24"
     fill="none"
   >
     <path
-- 
2.54.0