diff --git a/extensions/embed/less/forum.less b/extensions/embed/less/forum.less
index b352032ece..d195646aa3 100644
--- a/extensions/embed/less/forum.less
+++ b/extensions/embed/less/forum.less
@@ -50,7 +50,7 @@
       padding: 15px 15px;
 
       .scrolled & {
-        .box-shadow(0 2px 6px @shadow-color);
+        .box-shadow(0 2px 6px var(--shadow-color));
       }
     }
 
@@ -69,7 +69,7 @@
         margin: 0;
 
         &, a {
-          color: @muted-color;
+          color: var(--muted-color);
         }
       }
     }
diff --git a/extensions/emoji/less/forum.less b/extensions/emoji/less/forum.less
index 8dba0dc475..2b52ba4773 100644
--- a/extensions/emoji/less/forum.less
+++ b/extensions/emoji/less/forum.less
@@ -12,7 +12,7 @@ img.emoji {
   margin: 5px 0 !important;
 
   > li > button {
-    color: @text-color;
+    color: var(--text-color);
     font-weight: bold;
     padding-top: 6px;
     padding-bottom: 6px;
@@ -25,7 +25,7 @@ img.emoji {
   }
 
   .Dropdown-header {
-    color: @muted-more-color;
+    color: var(--muted-more-color);
     text-transform: none;
     font-weight: normal;
     padding-bottom: 5px;
diff --git a/extensions/flags/js/src/forum/components/FlagList.tsx b/extensions/flags/js/src/forum/components/FlagList.tsx
index d911a71e81..74c9c611b7 100644
--- a/extensions/flags/js/src/forum/components/FlagList.tsx
+++ b/extensions/flags/js/src/forum/components/FlagList.tsx
@@ -1,7 +1,7 @@
 import app from 'flarum/forum/app';
 import Component from 'flarum/common/Component';
 import type { ComponentAttrs } from 'flarum/common/Component';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import username from 'flarum/common/helpers/username';
 import HeaderList from 'flarum/forum/components/HeaderList';
 import HeaderListItem from 'flarum/forum/components/HeaderListItem';
@@ -39,7 +39,7 @@ export default class FlagList<CustomAttrs extends IFlagListAttrs = IFlagListAttr
                 <li>
                   <HeaderListItem
                     className="Flag"
-                    avatar={avatar(post.user() || null)}
+                    avatar={<Avatar user={post.user() || null} />}
                     icon="fas fa-flag"
                     content={app.translator.trans('flarum-flags.forum.flagged_posts.item_text', {
                       username: username(post.user()),
diff --git a/extensions/flags/less/forum.less b/extensions/flags/less/forum.less
index 272babbfaf..9b89587c0c 100644
--- a/extensions/flags/less/forum.less
+++ b/extensions/flags/less/forum.less
@@ -3,7 +3,7 @@
   padding-top: 0 !important;
   padding-left: var(--post-padding);
   margin-left: calc(~"0px - var(--post-padding)");
-  border: var(--border-width) solid @primary-color;
+  border: var(--border-width) solid var(--primary-color);
 }
 
 .Post-header .item-flagged {
@@ -11,25 +11,22 @@
   margin: 0;
 }
 .Post-flagged {
-  background: @primary-color;
-  margin-top: calc(~"0px - var(--border-width)");
-  margin-bottom: var(--post-padding);
-  margin-left: calc(~"0px - var(--border-width) - var(--post-padding)");
-  margin-right: calc(~"0px - var(--border-width) - var(--post-padding)");
+  background: var(--primary-color);
+  margin: calc(~"0px - var(--border-width)") calc(~"0px - var(--border-width) - var(--post-padding)") var(--post-padding);
   padding: 10px;
-  border-radius: @border-radius @border-radius 0 0;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
   overflow: hidden;
   .light-contents(@color: @body-bg; @control-color: @body-bg);
 
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
   &, a {
-    color: @body-bg !important;
+    color: var(--body-bg) !important;
   }
 }
 .Post-flagged-flags {
-  @media @tablet-up {
-    float: left;
-  }
-
   font-size: 14px;
   margin: 7px 10px;
   text-align: left;
@@ -41,12 +38,10 @@
   font-weight: normal;
 }
 .Post-flagged-actions {
-  @media @tablet-up {
-    float: right;
-  }
-}
-.Post-flagged-actions .Button {
-  margin-left: 5px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
 .FlagPostModal {
@@ -58,7 +53,7 @@
 
     strong {
       display: block;
-      color: @text-color;
+      color: var(--text-color);
     }
   }
 }
diff --git a/extensions/likes/js/src/forum/addLikesList.js b/extensions/likes/js/src/forum/addLikesList.js
index 8b647200a2..7770b9328c 100644
--- a/extensions/likes/js/src/forum/addLikesList.js
+++ b/extensions/likes/js/src/forum/addLikesList.js
@@ -4,7 +4,7 @@ import CommentPost from 'flarum/forum/components/CommentPost';
 import Link from 'flarum/common/components/Link';
 import punctuateSeries from 'flarum/common/helpers/punctuateSeries';
 import username from 'flarum/common/helpers/username';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import Button from 'flarum/common/components/Button';
 
 import PostLikesModal from './components/PostLikesModal';
@@ -58,7 +58,7 @@ export default function () {
       items.add(
         'liked',
         <div className="Post-likedBy">
-          {icon('far fa-thumbs-up')}
+          <Icon name={'far fa-thumbs-up'} />
           {app.translator.trans(`flarum-likes.forum.post.liked_by${likes[0] === app.session.user ? '_self' : ''}_text`, {
             count: names.length,
             users: punctuateSeries(names),
diff --git a/extensions/likes/js/src/forum/components/PostLikesModal.tsx b/extensions/likes/js/src/forum/components/PostLikesModal.tsx
index de4934a4c7..8a092ebb9e 100644
--- a/extensions/likes/js/src/forum/components/PostLikesModal.tsx
+++ b/extensions/likes/js/src/forum/components/PostLikesModal.tsx
@@ -1,7 +1,7 @@
 import app from 'flarum/forum/app';
 import Modal from 'flarum/common/components/Modal';
 import Link from 'flarum/common/components/Link';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import username from 'flarum/common/helpers/username';
 import type { IInternalModalAttrs } from 'flarum/common/components/Modal';
 import type Post from 'flarum/common/models/Post';
@@ -48,7 +48,7 @@ export default class PostLikesModal<CustomAttrs extends IPostLikesModalAttrs = I
                 page.items.map((user) => (
                   <li>
                     <Link href={app.route.user(user)}>
-                      {avatar(user)} {username(user)}
+                      <Avatar user={user} /> {username(user)}
                     </Link>
                   </li>
                 ))
diff --git a/extensions/likes/less/forum.less b/extensions/likes/less/forum.less
index 58a8ae3bfa..79c706511c 100644
--- a/extensions/likes/less/forum.less
+++ b/extensions/likes/less/forum.less
@@ -4,7 +4,7 @@
   margin: 0;
 
   a {
-    color: @text-color;
+    color: var(--text-color);
     font-size: 15px;
     font-weight: bold;
     display: block;
diff --git a/extensions/markdown/js/src/common/components/MarkdownButton.js b/extensions/markdown/js/src/common/components/MarkdownButton.js
index dce1378fac..44072c7402 100644
--- a/extensions/markdown/js/src/common/components/MarkdownButton.js
+++ b/extensions/markdown/js/src/common/components/MarkdownButton.js
@@ -1,5 +1,5 @@
 import Component from 'flarum/common/Component';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import Tooltip from 'flarum/common/components/Tooltip';
 
 export default class MarkdownButton extends Component {
@@ -16,7 +16,7 @@ export default class MarkdownButton extends Component {
         onkeydown={this.keydown.bind(this)}
         onclick={this.attrs.onclick}
       >
-        {icon(this.attrs.icon)}
+        <Icon name={this.attrs.icon} />
       </button>
     );
 
diff --git a/extensions/mentions/js/src/forum/addMentionedByList.js b/extensions/mentions/js/src/forum/addMentionedByList.js
index 48fe082f67..ff61ed061a 100644
--- a/extensions/mentions/js/src/forum/addMentionedByList.js
+++ b/extensions/mentions/js/src/forum/addMentionedByList.js
@@ -5,7 +5,7 @@ import Link from 'flarum/common/components/Link';
 import PostPreview from 'flarum/forum/components/PostPreview';
 import punctuateSeries from 'flarum/common/helpers/punctuateSeries';
 import username from 'flarum/common/helpers/username';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import Button from 'flarum/common/components/Button';
 import MentionedByModal from './components/MentionedByModal';
 
@@ -54,7 +54,9 @@ export default function addMentionedByList() {
                   }}
                 >
                   <span className="PostPreview-content">
-                    <span className="PostPreview-badge Avatar">{icon('fas fa-reply-all')}</span>
+                    <span className="PostPreview-badge Avatar">
+                      <Icon name={'fas fa-reply-all'} />
+                    </span>
                     <span>
                       {app.translator.trans('flarum-mentions.forum.post.mentioned_by_more_text', { count: post.mentionedByCount() - replies.length })}
                     </span>
@@ -145,7 +147,7 @@ export default function addMentionedByList() {
         'replies',
         <div className="Post-mentionedBy">
           <span className="Post-mentionedBy-summary">
-            {icon('fas fa-reply')}
+            <Icon name={'fas fa-reply'} />
             {app.translator.trans(`flarum-mentions.forum.post.mentioned_by${repliers[0].user() === app.session.user ? '_self' : ''}_text`, {
               count: names.length,
               users: punctuateSeries(names),
diff --git a/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js b/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js
index 79aca7f9f3..378b15ddb4 100644
--- a/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js
+++ b/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js
@@ -1,6 +1,6 @@
 import app from 'flarum/forum/app';
 import Fragment from 'flarum/common/Fragment';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 
 import reply from '../utils/reply';
 
@@ -19,7 +19,7 @@ export default class PostQuoteButton extends Fragment {
           reply(this.post, this.content);
         }}
       >
-        {icon('fas fa-quote-left', { className: 'Button-icon' })}
+        <Icon name="fas fa-quote-left" className="Button-icon" />
         {app.translator.trans('flarum-mentions.forum.post.quote_button')}
       </button>
     );
diff --git a/extensions/mentions/js/src/forum/mentionables/PostMention.tsx b/extensions/mentions/js/src/forum/mentionables/PostMention.tsx
index e32c07789a..d645417808 100644
--- a/extensions/mentions/js/src/forum/mentionables/PostMention.tsx
+++ b/extensions/mentions/js/src/forum/mentionables/PostMention.tsx
@@ -3,7 +3,7 @@ import MentionableModel from './MentionableModel';
 import type Post from 'flarum/common/models/Post';
 import type Mithril from 'mithril';
 import usernameHelper from 'flarum/common/helpers/username';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import highlight from 'flarum/common/helpers/highlight';
 import { truncate } from 'flarum/common/utils/string';
 import getCleanDisplayName from '../utils/getCleanDisplayName';
@@ -63,7 +63,7 @@ export default class PostMention extends MentionableModel<Post, AtMentionFormat>
 
     return (
       <>
-        {avatar(user)}
+        <Avatar user={user} />
         {username}
         {[
           app.translator.trans('flarum-mentions.forum.composer.reply_to_post_text', { number: model.number() }),
diff --git a/extensions/mentions/js/src/forum/mentionables/UserMention.tsx b/extensions/mentions/js/src/forum/mentionables/UserMention.tsx
index 78fb688242..c3b80a9e34 100644
--- a/extensions/mentions/js/src/forum/mentionables/UserMention.tsx
+++ b/extensions/mentions/js/src/forum/mentionables/UserMention.tsx
@@ -2,7 +2,7 @@ import app from 'flarum/forum/app';
 import type Mithril from 'mithril';
 import type User from 'flarum/common/models/User';
 import usernameHelper from 'flarum/common/helpers/username';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import highlight from 'flarum/common/helpers/highlight';
 import MentionableModel from './MentionableModel';
 import getCleanDisplayName, { shouldUseOldFormat } from '../utils/getCleanDisplayName';
@@ -46,7 +46,7 @@ export default class UserMention extends MentionableModel<User, AtMentionFormat>
 
     return (
       <>
-        {avatar(model)}
+        <Avatar user={model} />
         {username}
       </>
     );
diff --git a/extensions/mentions/less/forum.less b/extensions/mentions/less/forum.less
index d5d9e819fc..244e81e6be 100644
--- a/extensions/mentions/less/forum.less
+++ b/extensions/mentions/less/forum.less
@@ -1,7 +1,7 @@
 .PostMention, .UserMention, .GroupMention {
   background: var(--control-bg);
   color: var(--control-color);
-  border-radius: @border-radius;
+  border-radius: var(--border-radius);
   font-weight: 600;
 
   blockquote & {
@@ -81,7 +81,7 @@
 .MentionsDropdown, .PostMention-preview, .Post-mentionedBy-preview {
   // @TODO: Rename to .MentionsDropdownItem, along with child classes. 2.0
   .PostPreview {
-    color: @muted-color;
+    color: var(--muted-color);
 
     .Avatar {
       .Avatar--size(24px);
@@ -93,7 +93,7 @@
       }
     }
     .username {
-      color: @text-color;
+      color: var(--text-color);
       font-weight: bold;
     }
   }
diff --git a/extensions/package-manager/js/src/admin/components/ExtensionItem.tsx b/extensions/package-manager/js/src/admin/components/ExtensionItem.tsx
index aa313800ac..7510805366 100644
--- a/extensions/package-manager/js/src/admin/components/ExtensionItem.tsx
+++ b/extensions/package-manager/js/src/admin/components/ExtensionItem.tsx
@@ -2,7 +2,7 @@ import type Mithril from 'mithril';
 import app from 'flarum/admin/app';
 import Component, { ComponentAttrs } from 'flarum/common/Component';
 import classList from 'flarum/common/utils/classList';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import Tooltip from 'flarum/common/components/Tooltip';
 import Button from 'flarum/common/components/Button';
 import { Extension } from 'flarum/admin/AdminApplication';
@@ -35,7 +35,7 @@ export default class ExtensionItem<Attrs extends ExtensionItemAttrs = ExtensionI
         })}
       >
         <div className="PackageManager-extension-icon ExtensionIcon" style={extension.icon}>
-          {extension.icon ? icon(extension.icon.name) : ''}
+          {extension.icon ? <Icon name={extension.icon.name} /> : ''}
         </div>
         <div className="PackageManager-extension-info">
           <div className="PackageManager-extension-name">{extension.extra['flarum-extension'].title}</div>
diff --git a/extensions/package-manager/js/src/admin/components/QueueSection.tsx b/extensions/package-manager/js/src/admin/components/QueueSection.tsx
index f013e79872..99b83a93f5 100644
--- a/extensions/package-manager/js/src/admin/components/QueueSection.tsx
+++ b/extensions/package-manager/js/src/admin/components/QueueSection.tsx
@@ -5,7 +5,7 @@ import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import Button from 'flarum/common/components/Button';
 import Tooltip from 'flarum/common/components/Tooltip';
 import { Extension } from 'flarum/admin/AdminApplication';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import ItemList from 'flarum/common/utils/ItemList';
 import extractText from 'flarum/common/utils/extractText';
 
@@ -75,7 +75,7 @@ export default class QueueSection extends Component<{}> {
           return extension ? (
             <div className="PackageManager-queueTable-package">
               <div className="PackageManager-queueTable-package-icon ExtensionIcon" style={extension.icon}>
-                {!!extension.icon && icon(extension.icon.name)}
+                {!!extension.icon && <Icon name={extension.icon.name} />}
               </div>
               <div className="PackageManager-queueTable-package-details">
                 <span className="PackageManager-queueTable-package-title">{extension.extra['flarum-extension'].title}</span>
@@ -199,17 +199,17 @@ export default class QueueSection extends Component<{}> {
   }
 
   operationIcon(operation: TaskOperations): Mithril.Children {
-    return icon(
-      {
-        update_check: 'fas fa-sync-alt',
-        update_major: 'fas fa-play',
-        update_minor: 'fas fa-play',
-        update_global: 'fas fa-play',
-        extension_install: 'fas fa-download',
-        extension_remove: 'fas fa-times',
-        extension_update: 'fas fa-arrow-alt-circle-up',
-        why_not: 'fas fa-exclamation-circle',
-      }[operation]
-    );
+    const iconName = {
+      update_check: 'fas fa-sync-alt',
+      update_major: 'fas fa-play',
+      update_minor: 'fas fa-play',
+      update_global: 'fas fa-play',
+      extension_install: 'fas fa-download',
+      extension_remove: 'fas fa-times',
+      extension_update: 'fas fa-arrow-alt-circle-up',
+      why_not: 'fas fa-exclamation-circle',
+    }[operation];
+
+    return <Icon name={iconName} />;
   }
 }
diff --git a/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx b/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx
index 49b82e53ba..48c7584963 100644
--- a/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx
+++ b/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx
@@ -6,7 +6,7 @@ import abbreviateNumber from 'flarum/common/utils/abbreviateNumber';
 import extractText from 'flarum/common/utils/extractText';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import Placeholder from 'flarum/common/components/Placeholder';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import classList from 'flarum/common/utils/classList';
 
 import DashboardWidget, { IDashboardWidgetAttrs } from 'flarum/admin/components/DashboardWidget';
@@ -291,7 +291,7 @@ export default class StatisticsWidget extends DashboardWidget {
                     <>
                       {' '}
                       <span className={'StatisticsWidget-change StatisticsWidget-change--' + (periodChange > 0 ? 'up' : 'down')}>
-                        {icon('fas fa-arrow-' + (periodChange > 0 ? 'up' : 'down'))}
+                        <Icon name={'fas fa-arrow-' + (periodChange > 0 ? 'up' : 'down')} />
                         {Math.abs(periodChange).toFixed(1)}%
                       </span>
                     </>
diff --git a/extensions/statistics/less/admin.less b/extensions/statistics/less/admin.less
index 8d9797896d..d7e1f0dbd7 100644
--- a/extensions/statistics/less/admin.less
+++ b/extensions/statistics/less/admin.less
@@ -11,7 +11,7 @@
 
   &-title {
     margin: 0 20px;
-    color: @muted-color;
+    color: var(--muted-color);
   }
 
   &-entities {
@@ -29,7 +29,7 @@
     min-width: 130px;
     font-size: 12px;
     font-weight: bold;
-    color: @muted-color;
+    color: var(--muted-color);
   }
 
   &-label {
@@ -39,7 +39,7 @@
   &-entity {
     min-width: 130px;
     padding: 15px 20px;
-    color: @text-color;
+    color: var(--text-color);
     font-size: 20px;
 
     .StatisticsWidget:not(.StatisticsWidget--mini) & {
@@ -47,12 +47,12 @@
 
       &:hover,
       &:focus-visible {
-        background: mix(@control-bg, @body-bg, 50%);
+        background: var(--control-body-bg-mix);
         text-decoration: none;
       }
 
       &.active {
-        border-top: 4px solid @primary-color;
+        border-top: 4px solid var(--primary-color);
         padding-top: 11px;
       }
     }
@@ -75,10 +75,10 @@
     font-weight: bold;
     text-transform: uppercase;
     font-size: 12px;
-    color: @muted-color;
+    color: var(--muted-color);
 
     .active & {
-      color: @primary-color;
+      color: var(--primary-color);
     }
   }
 
diff --git a/extensions/suspend/js/src/forum/components/SuspendUserModal.js b/extensions/suspend/js/src/forum/components/SuspendUserModal.js
index 7a5286d692..c581c803ef 100644
--- a/extensions/suspend/js/src/forum/components/SuspendUserModal.js
+++ b/extensions/suspend/js/src/forum/components/SuspendUserModal.js
@@ -7,6 +7,7 @@ import ItemList from 'flarum/common/utils/ItemList';
 
 import { getPermanentSuspensionDate } from '../helpers/suspensionHelper';
 import Form from '@flarum/core/src/common/components/Form';
+import FieldSet from '@flarum/core/src/common/components/FieldSet';
 
 export default class SuspendUserModal extends Modal {
   oninit(vnode) {
@@ -42,10 +43,7 @@ export default class SuspendUserModal extends Modal {
     return (
       <div className="Modal-body">
         <Form>
-          <div className="Form-group">
-            <label>{app.translator.trans('flarum-suspend.forum.suspend_user.status_heading')}</label>
-            <div>{this.formItems().toArray()}</div>
-          </div>
+          {this.formItems().toArray()}
 
           <div className="Form-group Form-controls">
             <Button className="Button Button--primary" loading={this.loading} type="submit">
@@ -110,20 +108,22 @@ export default class SuspendUserModal extends Modal {
   formItems() {
     const items = new ItemList();
 
-    items.add('radioItems', <div className="Form-group">{this.radioItems().toArray()}</div>, 100);
+    items.add(
+      'radioItems',
+      <FieldSet label={app.translator.trans('flarum-suspend.forum.suspend_user.status_heading')}>{this.radioItems().toArray()}</FieldSet>,
+      100
+    );
 
     items.add(
       'reason',
       <div className="Form-group">
-        <label>
-          {app.translator.trans('flarum-suspend.forum.suspend_user.reason')}
-          <textarea
-            className="FormControl"
-            bidi={this.reason}
-            placeholder={app.translator.trans('flarum-suspend.forum.suspend_user.placeholder_optional')}
-            rows="2"
-          />
-        </label>
+        <label>{app.translator.trans('flarum-suspend.forum.suspend_user.reason')}</label>
+        <textarea
+          className="FormControl"
+          bidi={this.reason}
+          placeholder={app.translator.trans('flarum-suspend.forum.suspend_user.placeholder_optional')}
+          rows="4"
+        />
       </div>,
       90
     );
@@ -131,15 +131,13 @@ export default class SuspendUserModal extends Modal {
     items.add(
       'message',
       <div className="Form-group">
-        <label>
-          {app.translator.trans('flarum-suspend.forum.suspend_user.display_message')}
-          <textarea
-            className="FormControl"
-            bidi={this.message}
-            placeholder={app.translator.trans('flarum-suspend.forum.suspend_user.placeholder_optional')}
-            rows="2"
-          />
-        </label>
+        <label>{app.translator.trans('flarum-suspend.forum.suspend_user.display_message')}</label>
+        <textarea
+          className="FormControl"
+          bidi={this.message}
+          placeholder={app.translator.trans('flarum-suspend.forum.suspend_user.placeholder_optional')}
+          rows="4"
+        />
       </div>,
       80
     );
diff --git a/extensions/tags/js/src/common/helpers/tagIcon.js b/extensions/tags/js/src/common/helpers/tagIcon.js
index 37bfb2a632..990b5a7587 100644
--- a/extensions/tags/js/src/common/helpers/tagIcon.js
+++ b/extensions/tags/js/src/common/helpers/tagIcon.js
@@ -4,15 +4,11 @@ export default function tagIcon(tag, attrs = {}, settings = {}) {
   const hasIcon = tag && tag.icon();
   const { useColor = true } = settings;
 
-  attrs.className = classList([attrs.className, 'icon', hasIcon ? tag.icon() : 'TagIcon']);
+  attrs.className = classList([attrs.className, 'icon text-colored', hasIcon ? tag.icon() : 'TagIcon']);
 
   if (tag && useColor) {
     attrs.style = attrs.style || {};
     attrs.style['--color'] = tag.color();
-
-    if (hasIcon) {
-      attrs.style.color = tag.color();
-    }
   } else if (!tag) {
     attrs.className += ' untagged';
   }
diff --git a/extensions/tags/less/admin/TagsPage.less b/extensions/tags/less/admin/TagsPage.less
index 285abbd53f..20c9ca9322 100644
--- a/extensions/tags/less/admin/TagsPage.less
+++ b/extensions/tags/less/admin/TagsPage.less
@@ -3,7 +3,7 @@
 }
 
 .TagsContent-footer {
-  color: @control-color;
+  color: var(--control-color);
   padding: 20px 0;
 
   p {
@@ -20,7 +20,7 @@
 .TagList ol {
   list-style: none;
   padding: 0;
-  color: @muted-color;
+  color: var(--muted-color);
   font-size: 13px;
 
   >li {
@@ -37,11 +37,11 @@
 }
 
 .TagListItem-info {
-  border-radius: @border-radius;
+  border-radius: var(--border-radius);
   padding: 5px;
 
   &:hover {
-    background: @control-bg;
+    background: var(--control-bg);
   }
 
   .Button {
@@ -75,8 +75,8 @@ li:not(.sortable-dragging)>.TagListItem-info:hover>.Button {
 }
 
 .sortable-placeholder {
-  border: 2px dashed @control-bg;
-  border-radius: @border-radius;
+  border: 2px dashed var(--control-bg);
+  border-radius: var(--border-radius);
   height: 34px;
 }
 
@@ -120,8 +120,8 @@ li:not(.sortable-dragging)>.TagListItem-info:hover>.Button {
     min-height: 20vh;
     max-width: 400px;
     grid-template-rows: min-content;
-    border: 1px solid @control-bg;
-    border-radius: @border-radius;
+    border: 1px solid var(--control-bg);
+    border-radius: var(--border-radius);
     flex: 1 1 160px;
 
     @media (max-width: 1209px) {
@@ -142,7 +142,7 @@ li:not(.sortable-dragging)>.TagListItem-info:hover>.Button {
 
     .TagList-button {
       background: none;
-      border: 1px dashed @control-bg;
+      border: 1px dashed var(--control-bg);
       height: 40px;
       margin: auto auto 0 0;
     }
@@ -150,7 +150,7 @@ li:not(.sortable-dragging)>.TagListItem-info:hover>.Button {
     >label {
       float: left;
       font-weight: bold;
-      color: @muted-color;
+      color: var(--muted-color);
     }
   }
 }
diff --git a/extensions/tags/less/common/TagIcon.less b/extensions/tags/less/common/TagIcon.less
index 4ebfac50bb..2b8354a70f 100644
--- a/extensions/tags/less/common/TagIcon.less
+++ b/extensions/tags/less/common/TagIcon.less
@@ -1,14 +1,14 @@
 .TagIcon {
-  border-radius: @border-radius;
+  border-radius: var(--border-radius);
   width: 16px;
   height: 16px;
   display: inline-block;
   vertical-align: -3px;
   margin-left: 1px;
-  background: var(--color, @control-bg);
+  background: var(--color, var(--control-bg));
 
   &.untagged {
-    border: 1px dotted @muted-color;
+    border: 1px dotted var(--muted-color);
     background: transparent;
   }
 }
diff --git a/extensions/tags/less/common/TagLabel.less b/extensions/tags/less/common/TagLabel.less
index 373b18910c..a9e4d7305e 100644
--- a/extensions/tags/less/common/TagLabel.less
+++ b/extensions/tags/less/common/TagLabel.less
@@ -34,7 +34,7 @@
 
   .DiscussionHero .TagsLabel & {
     background: transparent;
-    border-radius: @border-radius !important;
+    border-radius: var(--border-radius) !important;
     font-size: 14px;
 
     &.colored, &--colored {
@@ -58,13 +58,13 @@
     border-radius: 0;
 
     &:first-child {
-      border-radius: @border-radius 0 0 @border-radius;
+      border-radius: var(--border-radius) 0 0 var(--border-radius);
     }
     &:last-child {
-      border-radius: 0 @border-radius @border-radius 0;
+      border-radius: 0 var(--border-radius) var(--border-radius) 0;
     }
     &:first-child:last-child {
-      border-radius: @border-radius;
+      border-radius: var(--border-radius);
     }
   }
 }
diff --git a/extensions/tags/less/common/TagSelectionModal.less b/extensions/tags/less/common/TagSelectionModal.less
index 788b3fbe88..184f52bc9e 100644
--- a/extensions/tags/less/common/TagSelectionModal.less
+++ b/extensions/tags/less/common/TagSelectionModal.less
@@ -1,12 +1,12 @@
 .TagSelectionModal {
   @media @tablet-up {
     .Modal-header {
-      background: @control-bg;
+      background: var(--control-bg);
       padding: 20px 20px 0;
 
       & h3 {
         text-align: left;
-        color: @control-color;
+        color: var(--control-color);
         font-size: 16px;
       }
     }
@@ -103,7 +103,7 @@
       }
     }
     &.pinned + li:not(.pinned) {
-      border-top: 2px solid @control-bg;
+      border-top: 2px solid var(--control-bg);
     }
     &.child {
       padding-left: 45px;
@@ -113,7 +113,7 @@
       }
     }
     &.active {
-      background: @control-bg;
+      background: var(--control-bg);
     }
 
     .icon::before {
@@ -127,7 +127,7 @@
       .icon::before {
         .fas();
         content: @fa-var-check !important;
-        color: @muted-color;
+        color: var(--muted-color);
         font-size: 14px;
         text-align: center;
         vertical-align: 1px;
@@ -159,7 +159,7 @@
   }
 }
 .SelectTagListItem-description {
-  color: @muted-color;
+  color: var(--muted-color);
   font-size: 12px;
   width: 370px;
   display: inline-block;
diff --git a/extensions/tags/less/common/root.less b/extensions/tags/less/common/root.less
index 97005c0933..662178e438 100644
--- a/extensions/tags/less/common/root.less
+++ b/extensions/tags/less/common/root.less
@@ -1,4 +1,4 @@
 :root {
-  --tag-bg: @control-bg;
-  --tag-color: @control-color;
+  --tag-bg: var(--control-bg);
+  --tag-color: var(--control-color);
 }
diff --git a/framework/core/js/src/admin/components/AdminHeader.js b/framework/core/js/src/admin/components/AdminHeader.js
index 5472a8064e..f05a5602bc 100644
--- a/framework/core/js/src/admin/components/AdminHeader.js
+++ b/framework/core/js/src/admin/components/AdminHeader.js
@@ -1,6 +1,7 @@
 import Component from '../../common/Component';
 import classList from '../../common/utils/classList';
-import icon from '../../common/helpers/icon';
+
+import Icon from '../../common/components/Icon';
 
 export default class AdminHeader extends Component {
   view(vnode) {
@@ -8,7 +9,7 @@ export default class AdminHeader extends Component {
       <div className={classList(['AdminHeader', this.attrs.className])}>
         <div className="container">
           <h2>
-            {icon(this.attrs.icon)}
+            <Icon name={this.attrs.icon} />
             {vnode.children}
           </h2>
           <div className="AdminHeader-description">{this.attrs.description}</div>
diff --git a/framework/core/js/src/admin/components/ExtensionLinkButton.js b/framework/core/js/src/admin/components/ExtensionLinkButton.js
index 3c9b774f63..d97d883899 100644
--- a/framework/core/js/src/admin/components/ExtensionLinkButton.js
+++ b/framework/core/js/src/admin/components/ExtensionLinkButton.js
@@ -1,8 +1,8 @@
 import app from '../../admin/app';
 import isExtensionEnabled from '../utils/isExtensionEnabled';
 import LinkButton from '../../common/components/LinkButton';
-import icon from '../../common/helpers/icon';
 import ItemList from '../../common/utils/ItemList';
+import Icon from '../../common/components/Icon';
 
 export default class ExtensionLinkButton extends LinkButton {
   getButtonContent(children) {
@@ -12,7 +12,7 @@ export default class ExtensionLinkButton extends LinkButton {
 
     content.unshift(
       <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
-        {!!extension.icon && icon(extension.icon.name)}
+        {!!extension.icon && <Icon name={extension.icon.name} />}
       </span>
     );
     content.push(statuses);
diff --git a/framework/core/js/src/admin/components/ExtensionPage.tsx b/framework/core/js/src/admin/components/ExtensionPage.tsx
index 2809fe9a4b..6eb820697b 100644
--- a/framework/core/js/src/admin/components/ExtensionPage.tsx
+++ b/framework/core/js/src/admin/components/ExtensionPage.tsx
@@ -3,7 +3,6 @@ import Button from '../../common/components/Button';
 import Link from '../../common/components/Link';
 import LinkButton from '../../common/components/LinkButton';
 import Switch from '../../common/components/Switch';
-import icon from '../../common/helpers/icon';
 import punctuateSeries from '../../common/helpers/punctuateSeries';
 import listItems from '../../common/helpers/listItems';
 import ItemList from '../../common/utils/ItemList';
@@ -18,6 +17,7 @@ import { IPageAttrs } from '../../common/components/Page';
 import type Mithril from 'mithril';
 import extractText from '../../common/utils/extractText';
 import Form from '../../common/components/Form';
+import Icon from '../../common/components/Icon';
 
 export interface ExtensionPageAttrs extends IPageAttrs {
   id: string;
@@ -80,7 +80,7 @@ export default class ExtensionPage<Attrs extends ExtensionPageAttrs = ExtensionP
         <div className="container">
           <div className="ExtensionTitle">
             <span className="ExtensionIcon" style={this.extension.icon}>
-              {!!this.extension.icon && icon(this.extension.icon.name)}
+              {!!this.extension.icon && <Icon name={this.extension.icon.name} />}
             </span>
             <div className="ExtensionName">
               <h2>{this.extension.extra['flarum-extension'].title}</h2>
@@ -195,7 +195,7 @@ export default class ExtensionPage<Attrs extends ExtensionPageAttrs = ExtensionP
         </Link>
       ));
 
-      items.add('authors', [icon('fas fa-user'), <span>{punctuateSeries(authors)}</span>]);
+      items.add('authors', [<Icon name={'fas fa-user'} />, <span>{punctuateSeries(authors)}</span>]);
     }
 
     (Object.keys(this.infoFields) as (keyof ExtensionPage['infoFields'])[]).map((field) => {
diff --git a/framework/core/js/src/admin/components/ExtensionsWidget.js b/framework/core/js/src/admin/components/ExtensionsWidget.js
index 32ee0e5405..5ad0d41dc7 100644
--- a/framework/core/js/src/admin/components/ExtensionsWidget.js
+++ b/framework/core/js/src/admin/components/ExtensionsWidget.js
@@ -3,8 +3,8 @@ import DashboardWidget from './DashboardWidget';
 import isExtensionEnabled from '../utils/isExtensionEnabled';
 import getCategorizedExtensions from '../utils/getCategorizedExtensions';
 import Link from '../../common/components/Link';
-import icon from '../../common/helpers/icon';
 import classList from '../../common/utils/classList';
+import Icon from '../../common/components/Icon';
 
 export default class ExtensionsWidget extends DashboardWidget {
   oninit(vnode) {
@@ -42,7 +42,7 @@ export default class ExtensionsWidget extends DashboardWidget {
         <Link href={app.route('extension', { id: extension.id })}>
           <div className="ExtensionListItem-content">
             <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
-              {!!extension.icon && icon(extension.icon.name)}
+              {!!extension.icon && <Icon name={extension.icon.name} />}
             </span>
             <span className="ExtensionListItem-title">{extension.extra['flarum-extension'].title}</span>
           </div>
diff --git a/framework/core/js/src/admin/components/PermissionGrid.tsx b/framework/core/js/src/admin/components/PermissionGrid.tsx
index 76ae8d1cb7..57262d08d5 100644
--- a/framework/core/js/src/admin/components/PermissionGrid.tsx
+++ b/framework/core/js/src/admin/components/PermissionGrid.tsx
@@ -4,8 +4,8 @@ import PermissionDropdown from './PermissionDropdown';
 import SettingDropdown from './SettingDropdown';
 import Button from '../../common/components/Button';
 import ItemList from '../../common/utils/ItemList';
-import icon from '../../common/helpers/icon';
 import type Mithril from 'mithril';
+import Icon from '../../common/components/Icon';
 
 export interface PermissionConfig {
   permission: string;
@@ -76,7 +76,7 @@ export default class PermissionGrid<CustomAttrs extends IPermissionGridAttrs = I
               {section.children.map((child) => (
                 <tr className="PermissionGrid-child">
                   <th>
-                    {icon(child.icon)}
+                    <Icon name={child.icon} />
                     {child.label}
                   </th>
                   {permissionCells(child)}
diff --git a/framework/core/js/src/admin/components/PermissionsPage.tsx b/framework/core/js/src/admin/components/PermissionsPage.tsx
index 53b7833d2b..04f965510b 100644
--- a/framework/core/js/src/admin/components/PermissionsPage.tsx
+++ b/framework/core/js/src/admin/components/PermissionsPage.tsx
@@ -2,9 +2,9 @@ import app from '../../admin/app';
 import GroupBadge from '../../common/components/GroupBadge';
 import EditGroupModal from './EditGroupModal';
 import Group from '../../common/models/Group';
-import icon from '../../common/helpers/icon';
 import PermissionGrid from './PermissionGrid';
 import AdminPage from './AdminPage';
+import Icon from '../../common/components/Icon';
 
 export default class PermissionsPage extends AdminPage {
   headerInfo() {
@@ -30,7 +30,7 @@ export default class PermissionsPage extends AdminPage {
               </button>
             ))}
           <button className="Button Group Group--add" onclick={() => app.modal.show(EditGroupModal)}>
-            {icon('fas fa-plus', { className: 'Group-icon' })}
+            <Icon name="fas fa-plus" className="Group-icon" />
             <span className="Group-name">{app.translator.trans('core.admin.permissions.new_group_button')}</span>
           </button>
         </div>
diff --git a/framework/core/js/src/admin/components/SessionDropdown.tsx b/framework/core/js/src/admin/components/SessionDropdown.tsx
index 999e3a456c..c809997983 100644
--- a/framework/core/js/src/admin/components/SessionDropdown.tsx
+++ b/framework/core/js/src/admin/components/SessionDropdown.tsx
@@ -1,10 +1,10 @@
 import app from '../../admin/app';
-import avatar from '../../common/helpers/avatar';
 import username from '../../common/helpers/username';
 import Dropdown, { IDropdownAttrs } from '../../common/components/Dropdown';
 import Button from '../../common/components/Button';
 import ItemList from '../../common/utils/ItemList';
 import type Mithril from 'mithril';
+import Avatar from '../../common/components/Avatar';
 
 export interface ISessionDropdownAttrs extends IDropdownAttrs {}
 
@@ -28,7 +28,7 @@ export default class SessionDropdown<CustomAttrs extends ISessionDropdownAttrs =
   getButtonContent() {
     const user = app.session.user;
 
-    return [avatar(user), ' ', <span className="Button-label">{username(user)}</span>];
+    return [<Avatar user={user} />, ' ', <span className="Button-label">{username(user)}</span>];
   }
 
   /**
diff --git a/framework/core/js/src/admin/components/UserListPage.tsx b/framework/core/js/src/admin/components/UserListPage.tsx
index 3519165e11..8cd8ff4da7 100644
--- a/framework/core/js/src/admin/components/UserListPage.tsx
+++ b/framework/core/js/src/admin/components/UserListPage.tsx
@@ -5,7 +5,6 @@ import app from '../../admin/app';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import Button from '../../common/components/Button';
 
-import icon from '../../common/helpers/icon';
 import listItems from '../../common/helpers/listItems';
 
 import type User from '../../common/models/User';
@@ -17,6 +16,7 @@ import extractText from '../../common/utils/extractText';
 import AdminPage from './AdminPage';
 import { debounce } from '../../common/utils/throttleDebounce';
 import CreateUserModal from './CreateUserModal';
+import Icon from '../../common/components/Icon';
 
 type ColumnData = {
   /**
@@ -414,7 +414,7 @@ export default class UserListPage extends AdminPage {
                 className="Button Button--text UserList-emailIconBtn"
                 title={app.translator.trans('core.admin.users.grid.columns.email.visibility_show')}
               >
-                {icon('far fa-eye-slash fa-fw', { className: 'icon' })}
+                <Icon name="far fa-eye-slash fa-fw" className="icon" />
               </button>
             </div>
           );
diff --git a/framework/core/js/src/common/common.ts b/framework/core/js/src/common/common.ts
index e6c818a39b..4e1d8c4e2f 100644
--- a/framework/core/js/src/common/common.ts
+++ b/framework/core/js/src/common/common.ts
@@ -45,6 +45,7 @@ import './components/AlertManager';
 import './components/Page';
 import './components/Switch';
 import './components/Badge';
+import './components/Icon';
 import './components/LoadingIndicator';
 import './components/Placeholder';
 import './components/Separator';
@@ -65,12 +66,12 @@ import './components/ModalManager';
 import './components/Button';
 import './components/Modal';
 import './components/GroupBadge';
+import './components/TextEditor';
 import './components/TextEditorButton';
 import './components/Tooltip';
 
 import './helpers/fullTime';
-import './helpers/avatar';
-import './helpers/icon';
+import './components/Avatar';
 import './helpers/humanTime';
 import './helpers/punctuateSeries';
 import './helpers/highlight';
diff --git a/framework/core/js/src/common/components/Alert.tsx b/framework/core/js/src/common/components/Alert.tsx
index 5676db124b..d04c9e8294 100644
--- a/framework/core/js/src/common/components/Alert.tsx
+++ b/framework/core/js/src/common/components/Alert.tsx
@@ -5,7 +5,7 @@ import extract from '../utils/extract';
 import type Mithril from 'mithril';
 import classList from '../utils/classList';
 import app from '../app';
-import iconHelper from '../helpers/icon';
+import Icon from './Icon';
 
 export interface AlertAttrs extends ComponentAttrs {
   /** The type of alert this is. Will be used to give the alert a class name of `Alert--{type}`. */
@@ -63,7 +63,11 @@ export default class Alert<T extends AlertAttrs = AlertAttrs> extends Component<
         <div className={classList('Alert-container', attrs.containerClassName)}>
           {!!title && (
             <div className="Alert-title">
-              {!!icon && <span className="Alert-title-icon">{iconHelper(icon)}</span>}
+              {!!icon && (
+                <span className="Alert-title-icon">
+                  <Icon name={icon} />
+                </span>
+              )}
               <span className="Alert-title-text">{title}</span>
             </div>
           )}
diff --git a/framework/core/js/src/common/components/Avatar.tsx b/framework/core/js/src/common/components/Avatar.tsx
new file mode 100644
index 0000000000..f47c428ed6
--- /dev/null
+++ b/framework/core/js/src/common/components/Avatar.tsx
@@ -0,0 +1,44 @@
+import type User from '../models/User';
+import type { ComponentAttrs } from '../Component';
+import type Mithril from 'mithril';
+import classList from '../utils/classList';
+import Component from '../Component';
+
+export interface IAvatarAttrs extends ComponentAttrs {
+  user: User | null;
+}
+
+export default class Avatar<CustomAttrs extends IAvatarAttrs = IAvatarAttrs> extends Component<CustomAttrs> {
+  view(vnode: Mithril.Vnode<CustomAttrs, this>): Mithril.Children {
+    const { user, ...attrs } = vnode.attrs as IAvatarAttrs;
+
+    attrs.className = classList('Avatar', attrs.className);
+    attrs.loading ??= 'lazy';
+    let content: string = '';
+
+    // If the `title` attribute is set to null or false, we don't want to give the
+    // avatar a title. On the other hand, if it hasn't been given at all, we can
+    // safely default it to the user's username.
+    const hasTitle: boolean | string = attrs.title === 'undefined' || attrs.title;
+    if (!hasTitle) delete attrs.title;
+
+    // If a user has been passed, then we will set up an avatar using their
+    // uploaded image, or the first letter of their username if they haven't
+    // uploaded one.
+    if (user) {
+      const username = user.displayName() || '?';
+      const avatarUrl = user.avatarUrl();
+
+      if (hasTitle) attrs.title = attrs.title || username;
+
+      if (avatarUrl) {
+        return <img {...attrs} src={avatarUrl} alt="" />;
+      }
+
+      content = username.charAt(0).toUpperCase();
+      attrs.style = { '--avatar-bg': user.color() };
+    }
+
+    return <span {...attrs}>{content}</span>;
+  }
+}
diff --git a/framework/core/js/src/common/components/Badge.tsx b/framework/core/js/src/common/components/Badge.tsx
index 6529490d03..fa8844bb3b 100644
--- a/framework/core/js/src/common/components/Badge.tsx
+++ b/framework/core/js/src/common/components/Badge.tsx
@@ -1,8 +1,8 @@
 import Tooltip from './Tooltip';
 import Component, { ComponentAttrs } from '../Component';
-import icon from '../helpers/icon';
 import classList from '../utils/classList';
 import textContrastClass from '../helpers/textContrastClass';
+import Icon from './Icon';
 
 export interface IBadgeAttrs extends ComponentAttrs {
   icon: string;
@@ -30,7 +30,7 @@ export default class Badge<CustomAttrs extends IBadgeAttrs = IBadgeAttrs> extend
 
     const className = classList('Badge', [type && `Badge--${type}`], attrs.className, textContrastClass(color));
 
-    const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');
+    const iconChild = iconName ? <Icon name={iconName} className="Badge-icon" /> : m.trust('&nbsp;');
 
     const newStyle = { ...style, '--badge-bg': color };
 
diff --git a/framework/core/js/src/common/components/Button.tsx b/framework/core/js/src/common/components/Button.tsx
index 86e9ce0017..009e67ef5d 100644
--- a/framework/core/js/src/common/components/Button.tsx
+++ b/framework/core/js/src/common/components/Button.tsx
@@ -1,10 +1,10 @@
 import type Mithril from 'mithril';
 import Component, { ComponentAttrs } from '../Component';
 import fireDebugWarning from '../helpers/fireDebugWarning';
-import icon from '../helpers/icon';
 import classList from '../utils/classList';
 import extractText from '../utils/extractText';
 import LoadingIndicator from './LoadingIndicator';
+import Icon from './Icon';
 
 export interface IButtonAttrs extends ComponentAttrs {
   /**
@@ -122,7 +122,7 @@ export default class Button<CustomAttrs extends IButtonAttrs = IButtonAttrs> ext
     const iconName = this.attrs.icon;
 
     return [
-      iconName && icon(iconName, { className: 'Button-icon' }),
+      iconName && <Icon name={iconName} className="Button-icon" />,
       children && <span className="Button-label">{children}</span>,
       this.attrs.loading && <LoadingIndicator size="small" display="inline" />,
     ];
diff --git a/framework/core/js/src/common/components/Checkbox.tsx b/framework/core/js/src/common/components/Checkbox.tsx
index 975dc17c31..e67780df7b 100644
--- a/framework/core/js/src/common/components/Checkbox.tsx
+++ b/framework/core/js/src/common/components/Checkbox.tsx
@@ -1,9 +1,9 @@
 import Component, { ComponentAttrs } from '../Component';
 import LoadingIndicator from './LoadingIndicator';
-import icon from '../helpers/icon';
 import classList from '../utils/classList';
 import withAttr from '../utils/withAttr';
 import type Mithril from 'mithril';
+import Icon from './Icon';
 
 export interface ICheckboxAttrs extends ComponentAttrs {
   state?: boolean;
@@ -49,7 +49,11 @@ export default class Checkbox<CustomAttrs extends ICheckboxAttrs = ICheckboxAttr
    * Get the template for the checkbox's display (tick/cross icon).
    */
   protected getDisplay(): Mithril.Children {
-    return this.attrs.loading ? <LoadingIndicator display="unset" size="small" /> : icon(this.attrs.state ? 'fas fa-check' : 'fas fa-times');
+    return this.attrs.loading ? (
+      <LoadingIndicator display="unset" size="small" />
+    ) : (
+      <Icon name={this.attrs.state ? 'fas fa-check' : 'fas fa-times'} />
+    );
   }
 
   /**
diff --git a/framework/core/js/src/common/components/ColorPreviewInput.tsx b/framework/core/js/src/common/components/ColorPreviewInput.tsx
index bd6f8598f2..3b643419e9 100644
--- a/framework/core/js/src/common/components/ColorPreviewInput.tsx
+++ b/framework/core/js/src/common/components/ColorPreviewInput.tsx
@@ -2,7 +2,8 @@ import type Mithril from 'mithril';
 
 import Component, { ComponentAttrs } from '../Component';
 import classList from '../utils/classList';
-import icon from '../helpers/icon';
+
+import Icon from './Icon';
 
 export default class ColorPreviewInput extends Component {
   view(vnode: Mithril.Vnode<ComponentAttrs, this>) {
@@ -20,7 +21,7 @@ export default class ColorPreviewInput extends Component {
         <input className={classList('FormControl', className)} id={id} {...attrs} />
 
         <span className="ColorInput-icon" role="presentation">
-          {icon('fas fa-exclamation-circle')}
+          <Icon name={'fas fa-exclamation-circle'} />
         </span>
 
         <input className="ColorInput-preview" {...attrs} type="color" />
diff --git a/framework/core/js/src/common/components/DetailedDropdownItem.tsx b/framework/core/js/src/common/components/DetailedDropdownItem.tsx
index 0db1978aa4..5663fa877b 100644
--- a/framework/core/js/src/common/components/DetailedDropdownItem.tsx
+++ b/framework/core/js/src/common/components/DetailedDropdownItem.tsx
@@ -1,6 +1,7 @@
 import Component from '../Component';
 import type { ComponentAttrs } from '../Component';
-import icon from '../helpers/icon';
+
+import Icon from './Icon';
 
 export interface IDetailedDropdownItemAttrs extends ComponentAttrs {
   /** The name of an icon to show in the dropdown item. */
@@ -21,9 +22,9 @@ export default class DetailedDropdownItem<
   view() {
     return (
       <button className="DetailedDropdownItem hasIcon" onclick={this.attrs.onclick}>
-        {icon(this.attrs.active ? 'fas fa-check' : 'fas', { className: 'Button-icon' })}
+        <Icon name={this.attrs.active ? 'fas fa-check' : 'fas'} className="Button-icon" />
         <span className="DetailedDropdownItem-content">
-          {icon(this.attrs.icon, { className: 'Button-icon' })}
+          <Icon name={this.attrs.icon} className="Button-icon" />
           <span className="DetailedDropdownItem-label">
             <strong>{this.attrs.label}</strong>
             <span className="DetailedDropdownItem-description">{this.attrs.description}</span>
diff --git a/framework/core/js/src/common/components/Dropdown.tsx b/framework/core/js/src/common/components/Dropdown.tsx
index c8a3f40382..31d0a74ab3 100644
--- a/framework/core/js/src/common/components/Dropdown.tsx
+++ b/framework/core/js/src/common/components/Dropdown.tsx
@@ -1,10 +1,10 @@
 import app from '../../common/app';
 import Component, { ComponentAttrs } from '../Component';
-import icon from '../helpers/icon';
 import listItems, { ModdedChildrenWithItemName } from '../helpers/listItems';
 import extractText from '../utils/extractText';
 import type Mithril from 'mithril';
 import Tooltip from './Tooltip';
+import Icon from './Icon';
 
 export interface IDropdownAttrs extends ComponentAttrs {
   /** A class name to apply to the dropdown toggle button. */
@@ -153,9 +153,9 @@ export default class Dropdown<CustomAttrs extends IDropdownAttrs = IDropdownAttr
    */
   getButtonContent(children: Mithril.ChildArray): Mithril.ChildArray {
     return [
-      this.attrs.icon ? icon(this.attrs.icon, { className: 'Button-icon' }) : '',
+      this.attrs.icon ? <Icon name={this.attrs.icon} className="Button-icon" /> : '',
       <span className="Button-label">{this.attrs.label}</span>,
-      this.attrs.caretIcon ? icon(this.attrs.caretIcon, { className: 'Button-caret' }) : '',
+      this.attrs.caretIcon ? <Icon name={this.attrs.caretIcon} className="Button-caret" /> : '',
     ];
   }
 
diff --git a/framework/core/js/src/common/components/Icon.tsx b/framework/core/js/src/common/components/Icon.tsx
new file mode 100644
index 0000000000..8e19253a41
--- /dev/null
+++ b/framework/core/js/src/common/components/Icon.tsx
@@ -0,0 +1,20 @@
+import Mithril from 'mithril';
+import classList from '../utils/classList';
+import type { ComponentAttrs } from '../Component';
+import Component from '../Component';
+
+export interface IIconAttrs extends ComponentAttrs {
+  /** The full icon class, prefix and the icon’s name. */
+  name: string;
+}
+
+export default class Icon<CustomAttrs extends IIconAttrs = IIconAttrs> extends Component<CustomAttrs> {
+  view(vnode: Mithril.Vnode<CustomAttrs, this>): Mithril.Children {
+    const { name, ...attrs } = vnode.attrs;
+
+    // @ts-ignore
+    attrs.className = classList('icon', name, attrs.className);
+
+    return <i aria-hidden="true" {...attrs} />;
+  }
+}
diff --git a/framework/core/js/src/common/components/Select.js b/framework/core/js/src/common/components/Select.js
index 07866012a6..b8a6cc7420 100644
--- a/framework/core/js/src/common/components/Select.js
+++ b/framework/core/js/src/common/components/Select.js
@@ -1,7 +1,7 @@
 import Component from '../Component';
-import icon from '../helpers/icon';
 import withAttr from '../utils/withAttr';
 import classList from '../utils/classList';
+import Icon from './Icon';
 
 /**
  * The `Select` component displays a <select> input, surrounded with some extra
@@ -45,7 +45,7 @@ export default class Select extends Component {
             <option value={key}>{options[key]}</option>
           ))}
         </select>
-        {icon('fas fa-sort', { className: 'Select-caret' })}
+        <Icon name="fas fa-sort" className="Select-caret" />
       </span>
     );
   }
diff --git a/framework/core/js/src/common/components/SelectDropdown.tsx b/framework/core/js/src/common/components/SelectDropdown.tsx
index d38e26d710..b9e9df1d40 100644
--- a/framework/core/js/src/common/components/SelectDropdown.tsx
+++ b/framework/core/js/src/common/components/SelectDropdown.tsx
@@ -1,8 +1,8 @@
 import Dropdown, { IDropdownAttrs } from './Dropdown';
-import icon from '../helpers/icon';
 import classList from '../utils/classList';
 import type Component from '../Component';
 import type Mithril from 'mithril';
+import Icon from './Icon';
 
 /**
  * Determines via a vnode is currently "active".
@@ -49,6 +49,9 @@ export default class SelectDropdown<CustomAttrs extends ISelectDropdownAttrs = I
     const activeChild = children.find(isActive);
     let label = (activeChild && typeof activeChild === 'object' && 'children' in activeChild && activeChild.children) || this.attrs.defaultLabel;
 
-    return [<span className="Button-label">{label}</span>, this.attrs.caretIcon ? icon(this.attrs.caretIcon, { className: 'Button-caret' }) : null];
+    return [
+      <span className="Button-label">{label}</span>,
+      this.attrs.caretIcon ? <Icon name={this.attrs.caretIcon} className="Button-caret" /> : null,
+    ];
   }
 }
diff --git a/framework/core/js/src/common/components/SplitDropdown.tsx b/framework/core/js/src/common/components/SplitDropdown.tsx
index 8aedc341e5..2275c8604e 100644
--- a/framework/core/js/src/common/components/SplitDropdown.tsx
+++ b/framework/core/js/src/common/components/SplitDropdown.tsx
@@ -1,9 +1,9 @@
 import Dropdown, { IDropdownAttrs } from './Dropdown';
 import Button from './Button';
-import icon from '../helpers/icon';
 import Mithril from 'mithril';
 import classList from '../utils/classList';
 import Tooltip from './Tooltip';
+import Icon from './Icon';
 
 export interface ISplitDropdownAttrs extends IDropdownAttrs {
   /** An optional main control button, which will be displayed instead of the first child. */
@@ -50,8 +50,8 @@ export default class SplitDropdown<CustomAttrs extends ISplitDropdownAttrs = ISp
           aria-label={this.attrs.accessibleToggleLabel}
           data-toggle="dropdown"
         >
-          {this.attrs.icon ? icon(this.attrs.icon, { className: 'Button-icon' }) : null}
-          {icon('fas fa-caret-down', { className: 'Button-caret' })}
+          {this.attrs.icon ? <Icon name={this.attrs.icon} className="Button-icon" /> : null}
+          <Icon name="fas fa-caret-down" className="Button-caret" />
         </button>
       </>
     );
diff --git a/framework/core/js/src/common/helpers/avatar.tsx b/framework/core/js/src/common/helpers/avatar.tsx
deleted file mode 100644
index aab82696d2..0000000000
--- a/framework/core/js/src/common/helpers/avatar.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import type Mithril from 'mithril';
-import type { ComponentAttrs } from '../Component';
-import User from '../models/User';
-import classList from '../utils/classList';
-
-export interface AvatarAttrs extends ComponentAttrs {}
-
-/**
- * The `avatar` helper displays a user's avatar.
- *
- * @param user
- * @param attrs Attributes to apply to the avatar element
- */
-export default function avatar(user: User | null, attrs: ComponentAttrs = {}): Mithril.Vnode {
-  attrs.className = classList('Avatar', attrs.className);
-  attrs.loading ??= 'lazy';
-  let content: string = '';
-
-  // If the `title` attribute is set to null or false, we don't want to give the
-  // avatar a title. On the other hand, if it hasn't been given at all, we can
-  // safely default it to the user's username.
-  const hasTitle: boolean | string = attrs.title === 'undefined' || attrs.title;
-  if (!hasTitle) delete attrs.title;
-
-  // If a user has been passed, then we will set up an avatar using their
-  // uploaded image, or the first letter of their username if they haven't
-  // uploaded one.
-  if (user) {
-    const username = user.displayName() || '?';
-    const avatarUrl = user.avatarUrl();
-
-    if (hasTitle) attrs.title = attrs.title || username;
-
-    if (avatarUrl) {
-      return <img {...attrs} src={avatarUrl} alt="" />;
-    }
-
-    content = username.charAt(0).toUpperCase();
-    attrs.style = { '--avatar-bg': user.color() };
-  }
-
-  return <span {...attrs}>{content}</span>;
-}
diff --git a/framework/core/js/src/common/helpers/icon.tsx b/framework/core/js/src/common/helpers/icon.tsx
deleted file mode 100644
index eb7177ac6a..0000000000
--- a/framework/core/js/src/common/helpers/icon.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type Mithril from 'mithril';
-import classList from '../utils/classList';
-
-/**
- * The `icon` helper displays an icon.
- *
- * @param fontClass The full icon class, prefix and the icon’s name.
- * @param attrs Any other attributes to apply.
- */
-export default function icon(fontClass: string, attrs: Mithril.Attributes = {}): Mithril.Vnode {
-  attrs.className = classList('icon', fontClass, attrs.className);
-
-  return <i aria-hidden="true" {...attrs} />;
-}
diff --git a/framework/core/js/src/common/helpers/userOnline.tsx b/framework/core/js/src/common/helpers/userOnline.tsx
index 202f7ef4fa..e742b99c16 100644
--- a/framework/core/js/src/common/helpers/userOnline.tsx
+++ b/framework/core/js/src/common/helpers/userOnline.tsx
@@ -1,13 +1,17 @@
 import type Mithril from 'mithril';
 import User from '../models/User';
-import icon from './icon';
+import Icon from '../components/Icon';
 
 /**
  * The `useronline` helper displays a green circle if the user is online.
  */
 export default function userOnline(user: User): Mithril.Vnode<{}, {}> | null {
   if (user.lastSeenAt() && user.isOnline()) {
-    return <span className="UserOnline">{icon('fas fa-circle')}</span>;
+    return (
+      <span className="UserOnline">
+        <Icon name={'fas fa-circle'} />
+      </span>
+    );
   }
 
   return null;
diff --git a/framework/core/js/src/forum/components/AccessTokensList.tsx b/framework/core/js/src/forum/components/AccessTokensList.tsx
index 09499458a4..5d58250817 100644
--- a/framework/core/js/src/forum/components/AccessTokensList.tsx
+++ b/framework/core/js/src/forum/components/AccessTokensList.tsx
@@ -1,6 +1,5 @@
 import app from '../app';
 import Component, { ComponentAttrs } from '../../common/Component';
-import icon from '../../common/helpers/icon';
 import Button from '../../common/components/Button';
 import humanTime from '../../common/helpers/humanTime';
 import ItemList from '../../common/utils/ItemList';
@@ -11,6 +10,7 @@ import Tooltip from '../../common/components/Tooltip';
 import type Mithril from 'mithril';
 import type AccessToken from '../../common/models/AccessToken';
 import { NestedStringArray } from '@askvortsov/rich-icu-message-formatter';
+import Icon from '../../common/components/Icon';
 
 export interface IAccessTokensListAttrs extends ComponentAttrs {
   tokens: AccessToken[];
@@ -52,7 +52,13 @@ export default class AccessTokensList<CustomAttrs extends IAccessTokensListAttrs
   tokenViewItems(token: AccessToken): ItemList<Mithril.Children> {
     const items = new ItemList<Mithril.Children>();
 
-    items.add('icon', <div className="AccessTokensList-item-icon">{icon(this.attrs.icon || 'fas fa-key')}</div>, 50);
+    items.add(
+      'icon',
+      <div className="AccessTokensList-item-icon">
+        <Icon name={this.attrs.icon || 'fas fa-key'} />
+      </div>,
+      50
+    );
 
     items.add('info', <div className="AccessTokensList-item-info">{this.tokenInfoItems(token).toArray()}</div>, 40);
 
diff --git a/framework/core/js/src/forum/components/AvatarEditor.js b/framework/core/js/src/forum/components/AvatarEditor.js
index 7f92bdfff1..fd1da14226 100644
--- a/framework/core/js/src/forum/components/AvatarEditor.js
+++ b/framework/core/js/src/forum/components/AvatarEditor.js
@@ -1,12 +1,12 @@
 import app from '../../forum/app';
 import Component from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
-import icon from '../../common/helpers/icon';
 import listItems from '../../common/helpers/listItems';
 import ItemList from '../../common/utils/ItemList';
 import classList from '../../common/utils/classList';
 import Button from '../../common/components/Button';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
+import Icon from '../../common/components/Icon';
+import Avatar from '../../common/components/Avatar';
 
 /**
  * The `AvatarEditor` component displays a user's avatar along with a dropdown
@@ -41,7 +41,7 @@ export default class AvatarEditor extends Component {
 
     return (
       <div className={classList(['AvatarEditor', 'Dropdown', this.attrs.className, this.loading && 'loading', this.isDraggedOver && 'dragover'])}>
-        {avatar(user, { loading: 'eager' })}
+        <Avatar user={user} loading="eager" />
         <a
           className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'}
           title={app.translator.trans('core.forum.user.avatar_upload_tooltip')}
@@ -56,9 +56,9 @@ export default class AvatarEditor extends Component {
           {this.loading ? (
             <LoadingIndicator display="unset" size="large" />
           ) : user.avatarUrl() ? (
-            icon('fas fa-pencil-alt')
+            <Icon name={'fas fa-pencil-alt'} />
           ) : (
-            icon('fas fa-plus-circle')
+            <Icon name={'fas fa-plus-circle'} />
           )}
         </a>
         <ul className="Dropdown-menu Menu">{listItems(this.controlItems().toArray())}</ul>
diff --git a/framework/core/js/src/forum/components/CommentPost.js b/framework/core/js/src/forum/components/CommentPost.js
index ad1acc36cc..74da778d4e 100644
--- a/framework/core/js/src/forum/components/CommentPost.js
+++ b/framework/core/js/src/forum/components/CommentPost.js
@@ -8,9 +8,9 @@ import ItemList from '../../common/utils/ItemList';
 import listItems from '../../common/helpers/listItems';
 import Button from '../../common/components/Button';
 import ComposerPostPreview from './ComposerPostPreview';
-import avatar from '../../common/helpers/avatar';
 import Link from '../../common/components/Link';
 import UserCard from './UserCard.js';
+import Avatar from '../../common/components/Avatar';
 
 /**
  * The `CommentPost` component displays a standard `comment`-typed post. This
@@ -50,7 +50,7 @@ export default class CommentPost extends Post {
 
   avatar() {
     const user = this.attrs.post.user();
-    const view = avatar(user, { className: 'Post-avatar' });
+    const view = <Avatar user={user} className="Post-avatar" />;
 
     if (user) {
       return <Link href={app.route.user(user)}>{view}</Link>;
diff --git a/framework/core/js/src/forum/components/ComposerBody.js b/framework/core/js/src/forum/components/ComposerBody.js
index 096cf416bb..337217f1aa 100644
--- a/framework/core/js/src/forum/components/ComposerBody.js
+++ b/framework/core/js/src/forum/components/ComposerBody.js
@@ -2,10 +2,10 @@ import Component from '../../common/Component';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import ConfirmDocumentUnload from '../../common/components/ConfirmDocumentUnload';
 import TextEditor from '../../common/components/TextEditor';
-import avatar from '../../common/helpers/avatar';
 import listItems from '../../common/helpers/listItems';
 import ItemList from '../../common/utils/ItemList';
 import classList from '../../common/utils/classList';
+import Avatar from '../../common/components/Avatar';
 
 /**
  * The `ComposerBody` component handles the body, or the content, of the
@@ -51,7 +51,7 @@ export default class ComposerBody extends Component {
     return (
       <ConfirmDocumentUnload when={this.hasChanges.bind(this)}>
         <div className={classList('ComposerBody', this.attrs.className)}>
-          {avatar(this.attrs.user, { className: 'ComposerBody-avatar' })}
+          <Avatar user={this.attrs.user} className="ComposerBody-avatar" />
           <div className="ComposerBody-content">
             <ul className="ComposerBody-header">{listItems(this.headerItems().toArray())}</ul>
             <div className="ComposerBody-editor">
diff --git a/framework/core/js/src/forum/components/DiscussionListItem.tsx b/framework/core/js/src/forum/components/DiscussionListItem.tsx
index 259143329a..fd5decba8e 100644
--- a/framework/core/js/src/forum/components/DiscussionListItem.tsx
+++ b/framework/core/js/src/forum/components/DiscussionListItem.tsx
@@ -1,10 +1,8 @@
 import app from '../../forum/app';
 import Component, { ComponentAttrs } from '../../common/Component';
 import Link from '../../common/components/Link';
-import avatar from '../../common/helpers/avatar';
 import listItems from '../../common/helpers/listItems';
 import highlight from '../../common/helpers/highlight';
-import icon from '../../common/helpers/icon';
 import humanTime from '../../common/utils/humanTime';
 import ItemList from '../../common/utils/ItemList';
 import abbreviateNumber from '../../common/utils/abbreviateNumber';
@@ -20,6 +18,8 @@ import Tooltip from '../../common/components/Tooltip';
 import type Discussion from '../../common/models/Discussion';
 import type Mithril from 'mithril';
 import type { DiscussionListParams } from '../states/DiscussionListState';
+import Icon from '../../common/components/Icon';
+import Avatar from '../../common/components/Avatar';
 
 export interface IDiscussionListItemAttrs extends ComponentAttrs {
   discussion: Discussion;
@@ -105,7 +105,7 @@ export default class DiscussionListItem<CustomAttrs extends IDiscussionListItemA
         className={classList('Slidable-underneath Slidable-underneath--left Slidable-underneath--elastic', { disabled: !isUnread })}
         onclick={this.markAsRead.bind(this)}
       >
-        {icon('fas fa-check')}
+        <Icon name={'fas fa-check'} />
       </span>
     );
   }
@@ -149,7 +149,7 @@ export default class DiscussionListItem<CustomAttrs extends IDiscussionListItemA
         position="right"
       >
         <Link className="DiscussionListItem-author-avatar" href={user ? app.route.user(user) : '#'}>
-          {avatar(user || null, { title: '' })}
+          <Avatar user={user || null} title="" />
         </Link>
       </Tooltip>,
       100
@@ -295,7 +295,7 @@ export default class DiscussionListItem<CustomAttrs extends IDiscussionListItemA
     return (
       <DiscussionListItemStatsItem
         className="DiscussionListItem-count"
-        icon={showUnread ? [icon('fas fa-check _checkmark'), icon('fas fa-comment _comment')] : icon('far fa-comment')}
+        icon={showUnread ? [<Icon name={'fas fa-check _checkmark'} />, <Icon name={'fas fa-comment _comment'} />] : <Icon name={'far fa-comment'} />}
         label={showUnread ? abbreviateNumber(discussion.unreadCount()) : abbreviateNumber(discussion.replyCount())}
         a11yLabel={app.translator.trans(a11yKey, { count: discussion.replyCount() })}
         onclick={showUnread ? this.markAsRead.bind(this) : undefined}
diff --git a/framework/core/js/src/forum/components/EditPostComposer.js b/framework/core/js/src/forum/components/EditPostComposer.js
index 878a366282..25f3bf9f1d 100644
--- a/framework/core/js/src/forum/components/EditPostComposer.js
+++ b/framework/core/js/src/forum/components/EditPostComposer.js
@@ -2,7 +2,8 @@ import app from '../../forum/app';
 import ComposerBody from './ComposerBody';
 import Button from '../../common/components/Button';
 import Link from '../../common/components/Link';
-import icon from '../../common/helpers/icon';
+
+import Icon from '../../common/components/Icon';
 
 function minimizeComposerIfFullScreen(e) {
   if (app.composer.isFullScreen()) {
@@ -40,7 +41,7 @@ export default class EditPostComposer extends ComposerBody {
     items.add(
       'title',
       <h3>
-        {icon('fas fa-pencil-alt')}{' '}
+        <Icon name={'fas fa-pencil-alt'} />{' '}
         <Link href={app.route.discussion(post.discussion(), post.number())} onclick={minimizeComposerIfFullScreen}>
           {app.translator.trans('core.forum.composer_edit.post_link', { number: post.number(), discussion: post.discussion().title() })}
         </Link>
diff --git a/framework/core/js/src/forum/components/EventPost.js b/framework/core/js/src/forum/components/EventPost.js
index b45625931e..95aea07e28 100644
--- a/framework/core/js/src/forum/components/EventPost.js
+++ b/framework/core/js/src/forum/components/EventPost.js
@@ -2,10 +2,10 @@ import app from '../../forum/app';
 import Post from './Post';
 import { ucfirst } from '../../common/utils/string';
 import usernameHelper from '../../common/helpers/username';
-import icon from '../../common/helpers/icon';
 import Link from '../../common/components/Link';
 import humanTime from '../../common/helpers/humanTime';
 import classList from '../../common/utils/classList';
+import Icon from '../../common/components/Icon';
 
 /**
  * The `EventPost` component displays a post which indicating a discussion
@@ -28,7 +28,7 @@ export default class EventPost extends Post {
   }
 
   avatar() {
-    return icon(this.icon(), { className: 'EventPost-icon' });
+    return <Icon name={this.icon()} className="EventPost-icon" />;
   }
 
   content() {
diff --git a/framework/core/js/src/forum/components/HeaderDropdown.tsx b/framework/core/js/src/forum/components/HeaderDropdown.tsx
index c3fd9166f8..2a4f773360 100644
--- a/framework/core/js/src/forum/components/HeaderDropdown.tsx
+++ b/framework/core/js/src/forum/components/HeaderDropdown.tsx
@@ -4,7 +4,8 @@ import type { IDropdownAttrs } from '../../common/components/Dropdown';
 import extractText from '../../common/utils/extractText';
 import type Mithril from 'mithril';
 import classList from '../../common/utils/classList';
-import icon from '../../common/helpers/icon';
+
+import Icon from '../../common/components/Icon';
 
 export interface IHeaderDropdownAttrs extends IDropdownAttrs {
   state: any;
@@ -41,7 +42,7 @@ export default abstract class HeaderDropdown<CustomAttrs extends IHeaderDropdown
     const unread = this.getUnreadCount();
 
     return [
-      this.attrs.icon ? icon(this.attrs.icon, { className: 'Button-icon' }) : null,
+      this.attrs.icon ? <Icon name={this.attrs.icon} className="Button-icon" /> : null,
       unread !== 0 && <span className="HeaderDropdown-unread">{unread}</span>,
       <span className="Button-label">{this.attrs.label}</span>,
     ];
diff --git a/framework/core/js/src/forum/components/HeaderListItem.tsx b/framework/core/js/src/forum/components/HeaderListItem.tsx
index b338914490..d2ec789b19 100644
--- a/framework/core/js/src/forum/components/HeaderListItem.tsx
+++ b/framework/core/js/src/forum/components/HeaderListItem.tsx
@@ -4,7 +4,8 @@ import Component from '../../common/Component';
 import classList from '../../common/utils/classList';
 import Link from '../../common/components/Link';
 import humanTime from '../../common/helpers/humanTime';
-import icon from '../../common/helpers/icon';
+
+import Icon from '../../common/components/Icon';
 
 export interface IHeaderListItemAttrs extends ComponentAttrs {
   avatar: Mithril.Children;
@@ -24,7 +25,7 @@ export default class HeaderListItem<CustomAttrs extends IHeaderListItemAttrs = I
     return (
       <Link className={classList('HeaderListItem', className)} href={href} external={href.includes('://')} onclick={onclick}>
         {avatar}
-        {icon(iconName, { className: 'HeaderListItem-icon' })}
+        <Icon name={iconName} className="HeaderListItem-icon" />
         <span className="HeaderListItem-title">
           <span className="HeaderListItem-content">{content}</span>
           <span className="HeaderListItem-title-spring" />
diff --git a/framework/core/js/src/forum/components/LoadingPost.js b/framework/core/js/src/forum/components/LoadingPost.js
index c902ec883e..9e127e4155 100644
--- a/framework/core/js/src/forum/components/LoadingPost.js
+++ b/framework/core/js/src/forum/components/LoadingPost.js
@@ -1,5 +1,6 @@
 import Component from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
+
+import Avatar from '../../common/components/Avatar';
 
 /**
  * The `LoadingPost` component shows a placeholder that looks like a post,
@@ -10,7 +11,7 @@ export default class LoadingPost extends Component {
     return (
       <div className="Post CommentPost LoadingPost">
         <header className="Post-header">
-          {avatar(null, { className: 'PostUser-avatar' })}
+          <Avatar user={null} className="PostUser-avatar" />
           <div className="fakeText" />
         </header>
 
diff --git a/framework/core/js/src/forum/components/Notices.tsx b/framework/core/js/src/forum/components/Notices.tsx
index ae6596c30b..80c7efe8fe 100644
--- a/framework/core/js/src/forum/components/Notices.tsx
+++ b/framework/core/js/src/forum/components/Notices.tsx
@@ -3,8 +3,8 @@ import Component from '../../common/Component';
 import type Mithril from 'mithril';
 import ItemList from '../../common/utils/ItemList';
 import Alert from '../../common/components/Alert';
-import icon from '../../common/helpers/icon';
 import Button from '../../common/components/Button';
+import Icon from '../../common/components/Icon';
 
 export default class Notices extends Component {
   private loading: boolean = false;
@@ -27,7 +27,7 @@ export default class Notices extends Component {
           controls={[
             <Button className="Button Button--link" onclick={this.onclickEmailConfirmation.bind(this)} loading={this.loading} disabled={this.sent}>
               {this.sent
-                ? [icon('fas fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')]
+                ? [<Icon name={'fas fa-check'} />, ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')]
                 : app.translator.trans('core.forum.user_email_confirmation.resend_button')}
             </Button>,
           ]}
diff --git a/framework/core/js/src/forum/components/Notification.tsx b/framework/core/js/src/forum/components/Notification.tsx
index db14c76600..a2a3ac8615 100644
--- a/framework/core/js/src/forum/components/Notification.tsx
+++ b/framework/core/js/src/forum/components/Notification.tsx
@@ -1,12 +1,12 @@
 import app from '../../forum/app';
 import type NotificationModel from '../../common/models/Notification';
 import Component, { ComponentAttrs } from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
 import Button from '../../common/components/Button';
 import classList from '../../common/utils/classList';
 import type Mithril from 'mithril';
 import HeaderListItem from './HeaderListItem';
 import ItemList from '../../common/utils/ItemList';
+import Avatar from '../../common/components/Avatar';
 
 export interface INotificationAttrs extends ComponentAttrs {
   notification: NotificationModel;
@@ -25,7 +25,7 @@ export default abstract class Notification<CustomAttrs extends INotificationAttr
     return (
       <HeaderListItem
         className={classList('Notification', `Notification--${notification.contentType()}`, [!notification.isRead() && 'unread'])}
-        avatar={avatar(fromUser || null)}
+        avatar={<Avatar user={fromUser || null} />}
         icon={this.icon()}
         content={this.content()}
         excerpt={this.excerpt()}
diff --git a/framework/core/js/src/forum/components/NotificationGrid.js b/framework/core/js/src/forum/components/NotificationGrid.js
index 95ea13eaa2..81a22ebfbe 100644
--- a/framework/core/js/src/forum/components/NotificationGrid.js
+++ b/framework/core/js/src/forum/components/NotificationGrid.js
@@ -1,8 +1,8 @@
 import app from '../../forum/app';
 import Component from '../../common/Component';
 import Checkbox from '../../common/components/Checkbox';
-import icon from '../../common/helpers/icon';
 import ItemList from '../../common/utils/ItemList';
+import Icon from '../../common/components/Icon';
 
 /**
  * The `NotificationGrid` component displays a table of notification types and
@@ -48,7 +48,7 @@ export default class NotificationGrid extends Component {
             <td />
             {this.methods.map((method) => (
               <th className="NotificationGrid-groupToggle" onclick={this.toggleMethod.bind(this, method.name)}>
-                {icon(method.icon)} {method.label}
+                <Icon name={method.icon} /> {method.label}
               </th>
             ))}
           </tr>
@@ -58,7 +58,7 @@ export default class NotificationGrid extends Component {
           {this.types.map((type) => (
             <tr>
               <td className="NotificationGrid-groupToggle" onclick={this.toggleType.bind(this, type.name)}>
-                {icon(type.icon)} {type.label}
+                <Icon name={type.icon} /> {type.label}
               </td>
               {this.methods.map((method) => {
                 const key = this.preferenceKey(type.name, method.name);
diff --git a/framework/core/js/src/forum/components/PostPreview.js b/framework/core/js/src/forum/components/PostPreview.js
index 5293bd3c17..f840113330 100644
--- a/framework/core/js/src/forum/components/PostPreview.js
+++ b/framework/core/js/src/forum/components/PostPreview.js
@@ -1,9 +1,9 @@
 import app from '../../forum/app';
 import Component from '../../common/Component';
 import Link from '../../common/components/Link';
-import avatar from '../../common/helpers/avatar';
 import username from '../../common/helpers/username';
 import highlight from '../../common/helpers/highlight';
+import Avatar from '../../common/components/Avatar';
 
 /**
  * The `PostPreview` component shows a link to a post containing the avatar and
@@ -23,7 +23,7 @@ export default class PostPreview extends Component {
     return (
       <Link className="PostPreview" href={app.route.post(post)} onclick={this.attrs.onclick}>
         <span className="PostPreview-content">
-          {avatar(user)}
+          <Avatar user={user} />
           {username(user)} <span className="PostPreview-excerpt">{excerpt}</span>
         </span>
       </Link>
diff --git a/framework/core/js/src/forum/components/PostStreamScrubber.js b/framework/core/js/src/forum/components/PostStreamScrubber.js
index 4fe6b3ace7..6880bc9abc 100644
--- a/framework/core/js/src/forum/components/PostStreamScrubber.js
+++ b/framework/core/js/src/forum/components/PostStreamScrubber.js
@@ -1,8 +1,8 @@
 import app from '../../forum/app';
 import Component from '../../common/Component';
-import icon from '../../common/helpers/icon';
 import formatNumber from '../../common/utils/formatNumber';
 import ScrollListener from '../../common/utils/ScrollListener';
+import Icon from '../../common/components/Icon';
 
 /**
  * The `PostStreamScrubber` component displays a scrubber which can be used to
@@ -58,13 +58,13 @@ export default class PostStreamScrubber extends Component {
     return (
       <div className={classNames.join(' ')}>
         <button className="Button Dropdown-toggle" data-toggle="dropdown">
-          {viewing} {icon('fas fa-sort')}
+          {viewing} <Icon name={'fas fa-sort'} />
         </button>
 
         <div className="Dropdown-menu dropdown-menu">
           <div className="Scrubber">
             <a className="Scrubber-first" onclick={this.goToFirst.bind(this)}>
-              {icon('fas fa-angle-double-up')} {app.translator.trans('core.forum.post_scrubber.original_post_link')}
+              <Icon name={'fas fa-angle-double-up'} /> {app.translator.trans('core.forum.post_scrubber.original_post_link')}
             </a>
 
             <div className="Scrubber-scrollbar">
@@ -84,7 +84,7 @@ export default class PostStreamScrubber extends Component {
             </div>
 
             <a className="Scrubber-last" onclick={this.goToLast.bind(this)}>
-              {icon('fas fa-angle-double-down')} {app.translator.trans('core.forum.post_scrubber.now_link')}
+              <Icon name={'fas fa-angle-double-down'} /> {app.translator.trans('core.forum.post_scrubber.now_link')}
             </a>
           </div>
         </div>
diff --git a/framework/core/js/src/forum/components/PostUser.js b/framework/core/js/src/forum/components/PostUser.js
index 35cd94aff8..3e335fcaa1 100644
--- a/framework/core/js/src/forum/components/PostUser.js
+++ b/framework/core/js/src/forum/components/PostUser.js
@@ -2,10 +2,10 @@ import app from '../../forum/app';
 import Component from '../../common/Component';
 import Link from '../../common/components/Link';
 import UserCard from './UserCard';
-import avatar from '../../common/helpers/avatar';
 import username from '../../common/helpers/username';
 import userOnline from '../../common/helpers/userOnline';
 import listItems from '../../common/helpers/listItems';
+import Avatar from '../../common/components/Avatar';
 
 /**
  * The `PostUser` component shows the avatar and username of a post's author.
@@ -23,7 +23,7 @@ export default class PostUser extends Component {
       return (
         <div className="PostUser">
           <h3 className="PostUser-name">
-            {avatar(user, { className: 'Post-avatar' })} {username(user)}
+            <Avatar user={user} className="Post-avatar" /> {username(user)}
           </h3>
         </div>
       );
@@ -33,7 +33,7 @@ export default class PostUser extends Component {
       <div className="PostUser">
         <h3 className="PostUser-name">
           <Link href={app.route.user(user)}>
-            {avatar(user, { className: 'Post-avatar' })}
+            <Avatar user={user} className="Post-avatar" />
             {userOnline(user)}
             {username(user)}
           </Link>
diff --git a/framework/core/js/src/forum/components/ReplyComposer.js b/framework/core/js/src/forum/components/ReplyComposer.js
index 1f5300d8b1..e2111cc8e0 100644
--- a/framework/core/js/src/forum/components/ReplyComposer.js
+++ b/framework/core/js/src/forum/components/ReplyComposer.js
@@ -2,8 +2,8 @@ import app from '../../forum/app';
 import ComposerBody from './ComposerBody';
 import Button from '../../common/components/Button';
 import Link from '../../common/components/Link';
-import icon from '../../common/helpers/icon';
 import extractText from '../../common/utils/extractText';
+import Icon from '../../common/components/Icon';
 
 function minimizeComposerIfFullScreen(e) {
   if (app.composer.isFullScreen()) {
@@ -37,7 +37,7 @@ export default class ReplyComposer extends ComposerBody {
     items.add(
       'title',
       <h3>
-        {icon('fas fa-reply')}{' '}
+        <Icon name={'fas fa-reply'} />{' '}
         <Link href={app.route.discussion(discussion)} onclick={minimizeComposerIfFullScreen}>
           {discussion.title()}
         </Link>
diff --git a/framework/core/js/src/forum/components/ReplyPlaceholder.js b/framework/core/js/src/forum/components/ReplyPlaceholder.js
index 2eb0961253..dd018ce3e9 100644
--- a/framework/core/js/src/forum/components/ReplyPlaceholder.js
+++ b/framework/core/js/src/forum/components/ReplyPlaceholder.js
@@ -1,10 +1,10 @@
 import app from '../../forum/app';
 import Component from '../../common/Component';
-import avatar from '../../common/helpers/avatar';
 import username from '../../common/helpers/username';
 import DiscussionControls from '../utils/DiscussionControls';
 import ComposerPostPreview from './ComposerPostPreview';
 import listItems from '../../common/helpers/listItems';
+import Avatar from '../../common/components/Avatar';
 
 /**
  * The `ReplyPlaceholder` component displays a placeholder for a reply, which,
@@ -20,7 +20,9 @@ export default class ReplyPlaceholder extends Component {
       return (
         <article className="Post CommentPost editing" aria-busy="true">
           <div className="Post-container">
-            <div className="Post-side">{avatar(app.session.user, { className: 'Post-avatar' })}</div>
+            <div className="Post-side">
+              <Avatar user={app.session.user} className="Post-avatar" />
+            </div>
             <div className="Post-main">
               <header className="Post-header">
                 <div className="PostUser">
@@ -44,7 +46,9 @@ export default class ReplyPlaceholder extends Component {
     return (
       <button className="Post ReplyPlaceholder" onclick={reply}>
         <div className="Post-container">
-          <div className="Post-side">{avatar(app.session.user, { className: 'Post-avatar' })}</div>
+          <div className="Post-side">
+            <Avatar user={app.session.user} className="Post-avatar" />
+          </div>
           <div className="Post-main">
             <span className="Post-header">{app.translator.trans('core.forum.post_stream.reply_placeholder')}</span>
           </div>
diff --git a/framework/core/js/src/forum/components/Search.tsx b/framework/core/js/src/forum/components/Search.tsx
index 07fca3f455..75e8152f25 100644
--- a/framework/core/js/src/forum/components/Search.tsx
+++ b/framework/core/js/src/forum/components/Search.tsx
@@ -5,12 +5,12 @@ import ItemList from '../../common/utils/ItemList';
 import classList from '../../common/utils/classList';
 import extractText from '../../common/utils/extractText';
 import KeyboardNavigatable from '../../common/utils/KeyboardNavigatable';
-import icon from '../../common/helpers/icon';
 import SearchState from '../states/SearchState';
 import DiscussionsSearchSource from './DiscussionsSearchSource';
 import UsersSearchSource from './UsersSearchSource';
 import { fireDeprecationWarning } from '../../common/helpers/fireDebugWarning';
 import type Mithril from 'mithril';
+import Icon from '../../common/components/Icon';
 
 /**
  * The `SearchSource` interface defines a section of search results in the
@@ -163,7 +163,7 @@ export default class Search<T extends SearchAttrs = SearchAttrs> extends Compone
               aria-label={app.translator.trans('core.forum.header.search_clear_button_accessible_label')}
               type="button"
             >
-              {icon('fas fa-times-circle')}
+              <Icon name={'fas fa-times-circle'} />
             </button>
           )}
         </div>
diff --git a/framework/core/js/src/forum/components/SessionDropdown.tsx b/framework/core/js/src/forum/components/SessionDropdown.tsx
index e77fe3ed9b..0da69c2d8f 100644
--- a/framework/core/js/src/forum/components/SessionDropdown.tsx
+++ b/framework/core/js/src/forum/components/SessionDropdown.tsx
@@ -1,5 +1,4 @@
 import app from '../../forum/app';
-import avatar from '../../common/helpers/avatar';
 import username from '../../common/helpers/username';
 import Dropdown, { IDropdownAttrs } from '../../common/components/Dropdown';
 import LinkButton from '../../common/components/LinkButton';
@@ -8,6 +7,7 @@ import ItemList from '../../common/utils/ItemList';
 import Separator from '../../common/components/Separator';
 import extractText from '../../common/utils/extractText';
 import type Mithril from 'mithril';
+import Avatar from '../../common/components/Avatar';
 
 export interface ISessionDropdownAttrs extends IDropdownAttrs {}
 
@@ -33,7 +33,7 @@ export default class SessionDropdown<CustomAttrs extends ISessionDropdownAttrs =
   getButtonContent() {
     const user = app.session.user;
 
-    return [avatar(user), ' ', <span className="Button-label">{username(user)}</span>];
+    return [<Avatar user={user} />, ' ', <span className="Button-label">{username(user)}</span>];
   }
 
   /**
diff --git a/framework/core/js/src/forum/components/TerminalPost.js b/framework/core/js/src/forum/components/TerminalPost.js
index 86e9f079c3..06f7c5181c 100644
--- a/framework/core/js/src/forum/components/TerminalPost.js
+++ b/framework/core/js/src/forum/components/TerminalPost.js
@@ -1,7 +1,8 @@
 import app from '../../forum/app';
 import Component from '../../common/Component';
 import humanTime from '../../common/helpers/humanTime';
-import icon from '../../common/helpers/icon';
+
+import Icon from '../../common/components/Icon';
 
 /**
  * Displays information about a the first or last post in a discussion.
@@ -21,7 +22,7 @@ export default class TerminalPost extends Component {
 
     return (
       <span>
-        {!!lastPost && icon('fas fa-reply')}{' '}
+        {!!lastPost && <Icon name={'fas fa-reply'} />}{' '}
         {app.translator.trans('core.forum.discussion_list.' + (lastPost ? 'replied' : 'started') + '_text', {
           user,
           ago: humanTime(time),
diff --git a/framework/core/js/src/forum/components/UserCard.js b/framework/core/js/src/forum/components/UserCard.js
index 71ab58a3c8..4e15c3fbc3 100644
--- a/framework/core/js/src/forum/components/UserCard.js
+++ b/framework/core/js/src/forum/components/UserCard.js
@@ -3,14 +3,14 @@ import Component from '../../common/Component';
 import humanTime from '../../common/utils/humanTime';
 import ItemList from '../../common/utils/ItemList';
 import UserControls from '../utils/UserControls';
-import avatar from '../../common/helpers/avatar';
 import username from '../../common/helpers/username';
-import icon from '../../common/helpers/icon';
 import Dropdown from '../../common/components/Dropdown';
 import Link from '../../common/components/Link';
 import AvatarEditor from './AvatarEditor';
 import listItems from '../../common/helpers/listItems';
 import classList from '../../common/utils/classList';
+import Icon from '../../common/components/Icon';
+import Avatar from '../../common/components/Avatar';
 
 /**
  * The `UserCard` component displays a user's profile card. This is used both on
@@ -57,7 +57,9 @@ export default class UserCard extends Component {
       <AvatarEditor user={user} className="UserCard-avatar" />
     ) : (
       <Link href={app.route.user(user)}>
-        <div className="UserCard-avatar">{avatar(user, { loading: 'eager' })}</div>
+        <div className="UserCard-avatar">
+          <Avatar user={user} loading="eager" />
+        </div>
       </Link>
     );
   }
@@ -100,8 +102,8 @@ export default class UserCard extends Component {
         'lastSeen',
         <span className={classList('UserCard-lastSeen', { online })}>
           {online
-            ? [icon('fas fa-circle'), ' ', app.translator.trans('core.forum.user.online_text')]
-            : [icon('far fa-clock'), ' ', humanTime(lastSeenAt)]}
+            ? [<Icon name={'fas fa-circle'} />, ' ', app.translator.trans('core.forum.user.online_text')]
+            : [<Icon name={'far fa-clock'} />, ' ', humanTime(lastSeenAt)]}
         </span>,
         100
       );
diff --git a/framework/core/js/src/forum/components/UsersSearchSource.tsx b/framework/core/js/src/forum/components/UsersSearchSource.tsx
index 646c1d7406..1ae165bc62 100644
--- a/framework/core/js/src/forum/components/UsersSearchSource.tsx
+++ b/framework/core/js/src/forum/components/UsersSearchSource.tsx
@@ -2,11 +2,11 @@ import type Mithril from 'mithril';
 
 import app from '../../forum/app';
 import highlight from '../../common/helpers/highlight';
-import avatar from '../../common/helpers/avatar';
 import username from '../../common/helpers/username';
 import Link from '../../common/components/Link';
 import { SearchSource } from './Search';
 import User from '../../common/models/User';
+import Avatar from '../../common/components/Avatar';
 
 /**
  * The `UsersSearchSource` finds and displays user search results in the search
@@ -49,7 +49,7 @@ export default class UsersSearchResults implements SearchSource {
         return (
           <li className="UserSearchResult" data-index={'users' + user.id()}>
             <Link href={app.route.user(user)}>
-              {avatar(user)}
+              <Avatar user={user} />
               {name}
             </Link>
           </li>
diff --git a/framework/core/less/common/Badge.less b/framework/core/less/common/Badge.less
index 9cc57318cc..29e62d0c8c 100644
--- a/framework/core/less/common/Badge.less
+++ b/framework/core/less/common/Badge.less
@@ -8,7 +8,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  vertical-align: middle;
   box-shadow: 0 2px 4px var(--shadow-color);
 
   .Badge-label {
diff --git a/framework/core/less/common/ColorInput.less b/framework/core/less/common/ColorInput.less
index baf9591b8a..fd6e523175 100644
--- a/framework/core/less/common/ColorInput.less
+++ b/framework/core/less/common/ColorInput.less
@@ -31,6 +31,6 @@
 
   &-icon {
     text-align: center;
-    color: @validation-error-color;
+    color: var(--validation-error-color);
   }
 }
diff --git a/framework/core/less/common/Form.less b/framework/core/less/common/Form.less
index e6e33d8836..a6789fca73 100644
--- a/framework/core/less/common/Form.less
+++ b/framework/core/less/common/Form.less
@@ -62,6 +62,7 @@
 .FieldSet, .FieldSet-items, .Form, .Form-body {
   > * {
     min-width: 100%;
+    margin-bottom: 0;
   }
 }
 
diff --git a/framework/core/less/common/root.less b/framework/core/less/common/root.less
index dd78a009ad..3f20666248 100644
--- a/framework/core/less/common/root.less
+++ b/framework/core/less/common/root.less
@@ -27,6 +27,7 @@
   --control-color:                 @control-color;
   --control-danger-bg:             @control-danger-bg;
   --control-danger-color:          @control-danger-color;
+  --control-body-bg-mix:           mix(@control-bg, @body-bg, 50%);
 
   --error-color:                   @error-color;
 
@@ -86,7 +87,7 @@
   --online-user-circle-color:      @online-user-circle-color;
 
   --discussion-title-color:        mix(@heading-color, @body-bg, 55%);
-  --discussion-list-item-bg-hover: mix(@control-bg, @body-bg, 50%);
+  --discussion-list-item-bg-hover: var(--control-body-bg-mix);
 
   .Button--color-vars(@control-color, @control-bg, 'button');
   .Button--color-vars(@body-bg, @primary-color, 'button-primary');
@@ -120,12 +121,12 @@
   // available to the JS code.
   --flarum-screen:                 none;
 
-  --screen-phone-max:   @screen-phone-max;
-  --screen-tablet:      @screen-tablet;
-  --screen-tablet-max:  @screen-tablet-max;
-  --screen-desktop:     @screen-desktop;
-  --screen-desktop-max: @screen-desktop-max;
-  --screen-desktop-hd:  @screen-desktop-hd;
+  --screen-phone-max:              @screen-phone-max;
+  --screen-tablet:                 @screen-tablet;
+  --screen-tablet-max:             @screen-tablet-max;
+  --screen-desktop:                @screen-desktop;
+  --screen-desktop-max:            @screen-desktop-max;
+  --screen-desktop-hd:             @screen-desktop-hd;
 
   @media @phone { --flarum-screen: phone; }
   @media @tablet { --flarum-screen: tablet; }
diff --git a/framework/core/less/common/scaffolding.less b/framework/core/less/common/scaffolding.less
index 63c7580031..732e291869 100644
--- a/framework/core/less/common/scaffolding.less
+++ b/framework/core/less/common/scaffolding.less
@@ -172,3 +172,7 @@ blockquote ol:last-child {
     --contrast-color: var(--unchanged-color);
   }
 }
+
+.text-colored {
+  color: var(--color);
+}
diff --git a/js-packages/webpack-config/src/RegisterAsyncChunksPlugin.cjs b/js-packages/webpack-config/src/RegisterAsyncChunksPlugin.cjs
index f7337ac0b8..7f2bc144ff 100644
--- a/js-packages/webpack-config/src/RegisterAsyncChunksPlugin.cjs
+++ b/js-packages/webpack-config/src/RegisterAsyncChunksPlugin.cjs
@@ -20,86 +20,91 @@ class RegisterAsyncChunksPlugin {
           alreadyOptimized = true;
 
           const chunks = Array.from(compilation.chunks);
-          const chunkModuleMemory = [];
-
-          const modulesToCheck = [];
+          const chunkModuleMemory = {};
+          const modulesToCheck = {};
 
           for (const chunk of chunks) {
             for (const module of compilation.chunkGraph.getChunkModulesIterable(chunk)) {
+              modulesToCheck[chunk.id] = modulesToCheck[chunk.id] || [];
+
               // A normal module.
               if (module?.resource && module.resource.split(path.sep).includes('src') && module._source?._value.includes("webpackChunkName: ")) {
-                modulesToCheck.push(module);
+                modulesToCheck[chunk.id].push(module);
               }
 
               // A ConcatenatedModule.
               if (module?.modules) {
                 module.modules.forEach((module) => {
                   if (module.resource && module.resource.split(path.sep).includes('src') && module._source?._value.includes("webpackChunkName: ")) {
-                    modulesToCheck.push(module);
+                    modulesToCheck[chunk.id].push(module);
                   }
                 });
               }
             }
           }
 
-          for (const module of modulesToCheck) {
-            // If the module source has an async webpack chunk, add the chunk id to flarum.reg
-            // at the end of the module source.
-
-            const reg = [];
-
-            // Each line that has a webpackChunkName comment.
-            [...module._source._value.matchAll(/.*\/\* webpackChunkName: .* \*\/.*/gm)].forEach(([match]) => {
-              [...match.matchAll(/(.*?) webpackChunkName: '([^']*)'.*? \*\/ '([^']+)'.*?/gm)]
-                .forEach(([match, _, urlPath, importPath]) => {
-                  // Import path is relative to module.resource, so we need to resolve it
-                  const importPathResolved = path.resolve(path.dirname(module.resource), importPath);
-                  const thisComposerJson = require(path.resolve(process.cwd(), '../composer.json'));
-                  const namespace = extensionId(thisComposerJson.name);
-
-                  const chunkModules = (c) => Array.from(compilation.chunkGraph.getChunkModulesIterable(c));
-
-                  const relevantChunk = chunks.find(
-                    (chunk) => chunkModules(chunk)?.find(
-                      (module) => module.resource?.split('.')[0] === importPathResolved || module.rootModule?.resource?.split('.')[0] === importPathResolved
-                    )
-                  );
-
-                  if (! relevantChunk) {
-                    console.error(`Could not find chunk for ${importPathResolved}`);
-                    return match;
-                  }
-
-                  let concatenatedModule = chunkModules(relevantChunk)[0];
-                  const moduleId = compilation.chunkGraph.getModuleId(concatenatedModule);
-                  const registrableModulesUrlPaths = new Map();
-                  registrableModulesUrlPaths.set(urlPath, [relevantChunk.id, moduleId, namespace, urlPath]);
-
-                  if (concatenatedModule?.rootModule) {
-                    // This is a chunk with many modules, we need to register all of them.
-                    concatenatedModule.modules?.forEach((module) => {
-                      // The path right after the src/ directory, without the extension.
-                      const regPathSep = `\\${path.sep}`;
-                      const urlPath = module.resource.replace(`/.*${regPathSep}src(.*)${regPathSep}\..*/`, '$1');
-
-                      if (! registrableModulesUrlPaths.has(urlPath)) {
-                        registrableModulesUrlPaths.set(urlPath, [relevantChunk.id, moduleId, namespace, urlPath]);
-                      }
-                    });
-                  }
-
-                  registrableModulesUrlPaths.forEach(([chunkId, moduleId, namespace, urlPath]) => {
-                    if (! chunkModuleMemory.includes(urlPath)) {
-                      reg.push(`flarum.reg.addChunkModule('${chunkId}', '${moduleId}', '${namespace}', '${urlPath}');`);
-                      chunkModuleMemory.push(urlPath);
-                    }
+          for (const sourceChunkId in modulesToCheck) {
+              for (const module of modulesToCheck[sourceChunkId]) {
+                  // If the module source has an async webpack chunk, add the chunk id to flarum.reg
+                  // at the end of the module source.
+
+                  const reg = [];
+
+                  // Each line that has a webpackChunkName comment.
+                  [...module._source._value.matchAll(/.*\/\* webpackChunkName: .* \*\/.*/gm)].forEach(([match]) => {
+                      [...match.matchAll(/(.*?) webpackChunkName: '([^']*)'.*? \*\/ '([^']+)'.*?/gm)]
+                          .forEach(([match, _, urlPath, importPath]) => {
+                              // Import path is relative to module.resource, so we need to resolve it
+                              const importPathResolved = path.resolve(path.dirname(module.resource), importPath);
+                              const thisComposerJson = require(path.resolve(process.cwd(), '../composer.json'));
+                              const namespace = extensionId(thisComposerJson.name);
+
+                              const chunkModules = (c) => Array.from(compilation.chunkGraph.getChunkModulesIterable(c));
+
+                              const relevantChunk = chunks.find(
+                                  (chunk) => chunkModules(chunk)?.find(
+                                      (module) => module.resource?.split('.')[0] === importPathResolved || module.rootModule?.resource?.split('.')[0] === importPathResolved
+                                  )
+                              );
+
+                              if (! relevantChunk) {
+                                  console.error(`Could not find chunk for ${importPathResolved}`);
+                                  return match;
+                              }
+
+                              let concatenatedModule = chunkModules(relevantChunk)[0];
+                              const moduleId = compilation.chunkGraph.getModuleId(concatenatedModule);
+                              const registrableModulesUrlPaths = new Map();
+                              registrableModulesUrlPaths.set(urlPath, [relevantChunk.id, moduleId, namespace, urlPath]);
+
+                              if (concatenatedModule?.rootModule) {
+                                  // This is a chunk with many modules, we need to register all of them.
+                                  concatenatedModule.modules?.forEach((module) => {
+                                      // The path right after the src/ directory, without the extension.
+                                      const regPathSep = `\\${path.sep}`;
+                                      const urlPath = module.resource.replace(`/.*${regPathSep}src(.*)${regPathSep}\..*/`, '$1');
+
+                                      if (! registrableModulesUrlPaths.has(urlPath)) {
+                                          registrableModulesUrlPaths.set(urlPath, [relevantChunk.id, moduleId, namespace, urlPath]);
+                                      }
+                                  });
+                              }
+
+                              registrableModulesUrlPaths.forEach(([chunkId, moduleId, namespace, urlPath]) => {
+                                  chunkModuleMemory[sourceChunkId] = chunkModuleMemory[sourceChunkId] || [];
+
+                                  if (! chunkModuleMemory[sourceChunkId].includes(urlPath)) {
+                                      reg.push(`flarum.reg.addChunkModule('${chunkId}', '${moduleId}', '${namespace}', '${urlPath}');`);
+                                      chunkModuleMemory[sourceChunkId].push(urlPath);
+                                  }
+                              });
+
+                              return match;
+                          });
                   });
 
-                  return match;
-                });
-            });
-
-            module._source._value += reg.join('\n');
+                  module._source._value += reg.join('\n');
+              }
           }
         }
       );