diff --git a/composer.json b/composer.json
index 9737688b2..fd4f82bb2 100644
--- a/composer.json
+++ b/composer.json
@@ -23,7 +23,7 @@
         "php": ">=7.0",
         "dflydev/fig-cookies": "^1.0.2",
         "doctrine/dbal": "^2.5",
-        "components/font-awesome": "^4.6",
+        "components/font-awesome": "^5.0.6",
         "franzl/whoops-middleware": "^0.4.0",
         "illuminate/bus": "5.5.*",
         "illuminate/cache": "5.5.*",
diff --git a/js/admin/src/components/AdminNav.js b/js/admin/src/components/AdminNav.js
index 5384e2bc7..697a2f440 100644
--- a/js/admin/src/components/AdminNav.js
+++ b/js/admin/src/components/AdminNav.js
@@ -34,42 +34,42 @@ export default class AdminNav extends Component {
 
     items.add('dashboard', AdminLinkButton.component({
       href: app.route('dashboard'),
-      icon: 'bar-chart',
+      icon: 'far fa-chart-bar',
       children: app.translator.trans('core.admin.nav.dashboard_button'),
       description: app.translator.trans('core.admin.nav.dashboard_text')
     }));
 
     items.add('basics', AdminLinkButton.component({
       href: app.route('basics'),
-      icon: 'pencil',
+      icon: 'fa fa-pencil-alt',
       children: app.translator.trans('core.admin.nav.basics_button'),
       description: app.translator.trans('core.admin.nav.basics_text')
     }));
 
     items.add('mail', AdminLinkButton.component({
       href: app.route('mail'),
-      icon: 'envelope',
+      icon: 'fa fa-envelope',
       children: app.translator.trans('core.admin.nav.email_button'),
       description: app.translator.trans('core.admin.nav.email_text')
     }));
 
     items.add('permissions', AdminLinkButton.component({
       href: app.route('permissions'),
-      icon: 'key',
+      icon: 'fa fa-key',
       children: app.translator.trans('core.admin.nav.permissions_button'),
       description: app.translator.trans('core.admin.nav.permissions_text')
     }));
 
     items.add('appearance', AdminLinkButton.component({
       href: app.route('appearance'),
-      icon: 'paint-brush',
+      icon: 'fa fa-paint-brush',
       children: app.translator.trans('core.admin.nav.appearance_button'),
       description: app.translator.trans('core.admin.nav.appearance_text')
     }));
 
     items.add('extensions', AdminLinkButton.component({
       href: app.route('extensions'),
-      icon: 'puzzle-piece',
+      icon: 'fa fa-puzzle-piece',
       children: app.translator.trans('core.admin.nav.extensions_button'),
       description: app.translator.trans('core.admin.nav.extensions_text')
     }));
diff --git a/js/admin/src/components/ExtensionsPage.js b/js/admin/src/components/ExtensionsPage.js
index b0a9e51d8..dce9fec38 100644
--- a/js/admin/src/components/ExtensionsPage.js
+++ b/js/admin/src/components/ExtensionsPage.js
@@ -17,7 +17,7 @@ export default class ExtensionsPage extends Page {
           <div className="container">
             {Button.component({
               children: app.translator.trans('core.admin.extensions.add_button'),
-              icon: 'plus',
+              icon: 'fa fa-plus',
               className: 'Button Button--primary',
               onclick: () => app.modal.show(new AddExtensionModal())
             })}
@@ -42,7 +42,7 @@ export default class ExtensionsPage extends Page {
                           className="ExtensionListItem-controls"
                           buttonClassName="Button Button--icon Button--flat"
                           menuClassName="Dropdown-menu--right"
-                          icon="ellipsis-h">
+                          icon="fa fa-ellipsis-h">
                           {controls}
                         </Dropdown>
                       ) : ''}
@@ -67,7 +67,7 @@ export default class ExtensionsPage extends Page {
 
     if (app.extensionSettings[name]) {
       items.add('settings', Button.component({
-        icon: 'cog',
+        icon: 'fa fa-cog',
         children: app.translator.trans('core.admin.extensions.settings_button'),
         onclick: app.extensionSettings[name]
       }));
@@ -75,7 +75,7 @@ export default class ExtensionsPage extends Page {
 
     if (!enabled) {
       items.add('uninstall', Button.component({
-        icon: 'trash-o',
+        icon: 'far fa-trash-alt',
         children: app.translator.trans('core.admin.extensions.uninstall_button'),
         onclick: () => {
           app.request({
diff --git a/js/admin/src/components/PermissionDropdown.js b/js/admin/src/components/PermissionDropdown.js
index 425440ddf..8e1402e7c 100644
--- a/js/admin/src/components/PermissionDropdown.js
+++ b/js/admin/src/components/PermissionDropdown.js
@@ -52,9 +52,9 @@ export default class PermissionDropdown extends Dropdown {
     const adminGroup = app.store.getById('groups', Group.ADMINISTRATOR_ID);
 
     if (everyone) {
-      this.props.label = Badge.component({icon: 'globe'});
+      this.props.label = Badge.component({icon: 'fa fa-globe'});
     } else if (members) {
-      this.props.label = Badge.component({icon: 'user'});
+      this.props.label = Badge.component({icon: 'fa fa-user'});
     } else {
       this.props.label = [
         badgeForId(Group.ADMINISTRATOR_ID),
@@ -66,8 +66,8 @@ export default class PermissionDropdown extends Dropdown {
       if (this.props.allowGuest) {
         this.props.children.push(
           Button.component({
-            children: [Badge.component({icon: 'globe'}), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')],
-            icon: everyone ? 'check' : true,
+            children: [Badge.component({icon: 'fa fa-globe'}), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')],
+            icon: everyone ? 'fa fa-check' : true,
             onclick: () => this.save([Group.GUEST_ID]),
             disabled: this.isGroupDisabled(Group.GUEST_ID)
           })
@@ -76,8 +76,8 @@ export default class PermissionDropdown extends Dropdown {
 
       this.props.children.push(
         Button.component({
-          children: [Badge.component({icon: 'user'}), ' ', app.translator.trans('core.admin.permissions_controls.members_button')],
-          icon: members ? 'check' : true,
+          children: [Badge.component({icon: 'fa fa-user'}), ' ', app.translator.trans('core.admin.permissions_controls.members_button')],
+          icon: members ? 'fa fa-check' : true,
           onclick: () => this.save([Group.MEMBER_ID]),
           disabled: this.isGroupDisabled(Group.MEMBER_ID)
         }),
@@ -86,7 +86,7 @@ export default class PermissionDropdown extends Dropdown {
 
         Button.component({
           children: [badgeForId(adminGroup.id()), ' ', adminGroup.namePlural()],
-          icon: !everyone && !members ? 'check' : true,
+          icon: !everyone && !members ? 'fa fa-check' : true,
           disabled: !everyone && !members,
           onclick: e => {
             if (e.shiftKey) e.stopPropagation();
@@ -101,7 +101,7 @@ export default class PermissionDropdown extends Dropdown {
           .filter(group => [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
           .map(group => Button.component({
             children: [badgeForId(group.id()), ' ', group.namePlural()],
-            icon: groupIds.indexOf(group.id()) !== -1 ? 'check' : true,
+            icon: groupIds.indexOf(group.id()) !== -1 ? 'fa fa-check' : true,
             onclick: (e) => {
               if (e.shiftKey) e.stopPropagation();
               this.toggle(group.id());
diff --git a/js/admin/src/components/PermissionGrid.js b/js/admin/src/components/PermissionGrid.js
index 416839c45..466bbf501 100644
--- a/js/admin/src/components/PermissionGrid.js
+++ b/js/admin/src/components/PermissionGrid.js
@@ -29,7 +29,7 @@ export default class PermissionGrid extends Component {
             {scopes.map(scope => (
               <th>
                 {scope.label}{' '}
-                {scope.onremove ? Button.component({icon: 'times', className: 'Button Button--text PermissionGrid-removeScope', onclick: scope.onremove}) : ''}
+                {scope.onremove ? Button.component({icon: 'fa fa-times', className: 'Button Button--text PermissionGrid-removeScope', onclick: scope.onremove}) : ''}
               </th>
             ))}
             <th>{this.scopeControlItems().toArray()}</th>
@@ -85,21 +85,21 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('viewDiscussions', {
-      icon: 'eye',
+      icon: 'fa fa-eye',
       label: app.translator.trans('core.admin.permissions.view_discussions_label'),
       permission: 'viewDiscussions',
       allowGuest: true
     }, 100);
 
     items.add('viewUserList', {
-      icon: 'users',
+      icon: 'fa fa-users',
       label: app.translator.trans('core.admin.permissions.view_user_list_label'),
       permission: 'viewUserList',
       allowGuest: true
     }, 100);
 
     items.add('signUp', {
-      icon: 'user-plus',
+      icon: 'fa fa-user-plus',
       label: app.translator.trans('core.admin.permissions.sign_up_label'),
       setting: () => SettingDropdown.component({
         key: 'allow_sign_up',
@@ -117,13 +117,13 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('start', {
-      icon: 'edit',
+      icon: 'fa fa-edit',
       label: app.translator.trans('core.admin.permissions.start_discussions_label'),
       permission: 'startDiscussion'
     }, 100);
 
     items.add('allowRenaming', {
-      icon: 'i-cursor',
+      icon: 'fa fa-i-cursor',
       label: app.translator.trans('core.admin.permissions.allow_renaming_label'),
       setting: () => {
         const minutes = parseInt(app.data.settings.allow_renaming, 10);
@@ -149,13 +149,13 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('reply', {
-      icon: 'reply',
+      icon: 'fa fa-reply',
       label: app.translator.trans('core.admin.permissions.reply_to_discussions_label'),
       permission: 'discussion.reply'
     }, 100);
 
     items.add('allowPostEditing', {
-      icon: 'pencil',
+      icon: 'fa fa-pencil-alt',
       label: app.translator.trans('core.admin.permissions.allow_post_editing_label'),
       setting: () => {
         const minutes = parseInt(app.data.settings.allow_post_editing, 10);
@@ -181,37 +181,37 @@ export default class PermissionGrid extends Component {
     const items = new ItemList();
 
     items.add('viewIpsPosts', {
-      icon: 'bullseye',
+      icon: 'fa fa-bullseye',
       label: app.translator.trans('core.admin.permissions.view_post_ips_label'),
       permission: 'discussion.viewIpsPosts'
     }, 110);
 
     items.add('renameDiscussions', {
-      icon: 'i-cursor',
+      icon: 'fa fa-i-cursor',
       label: app.translator.trans('core.admin.permissions.rename_discussions_label'),
       permission: 'discussion.rename'
     }, 100);
 
     items.add('hideDiscussions', {
-      icon: 'trash-o',
+      icon: 'far fa-trash-alt',
       label: app.translator.trans('core.admin.permissions.delete_discussions_label'),
       permission: 'discussion.hide'
     }, 90);
 
     items.add('deleteDiscussions', {
-      icon: 'times',
+      icon: 'fa fa-times',
       label: app.translator.trans('core.admin.permissions.delete_discussions_forever_label'),
       permission: 'discussion.delete'
     }, 80);
 
     items.add('editPosts', {
-      icon: 'pencil',
+      icon: 'fa fa-pencil-alt',
       label: app.translator.trans('core.admin.permissions.edit_and_delete_posts_label'),
       permission: 'discussion.editPosts'
     }, 70);
 
     items.add('deletePosts', {
-      icon: 'times',
+      icon: 'fa fa-times',
       label: app.translator.trans('core.admin.permissions.delete_posts_forever_label'),
       permission: 'discussion.deletePosts'
     }, 60);
diff --git a/js/admin/src/components/PermissionsPage.js b/js/admin/src/components/PermissionsPage.js
index 6855558c3..9896566f9 100644
--- a/js/admin/src/components/PermissionsPage.js
+++ b/js/admin/src/components/PermissionsPage.js
@@ -24,7 +24,7 @@ export default class PermissionsPage extends Page {
                 </button>
               ))}
             <button className="Button Group Group--add" onclick={() => app.modal.show(new EditGroupModal())}>
-              {icon('plus', {className: 'Group-icon'})}
+              {icon('fa fa-plus', {className: 'Group-icon'})}
               <span className="Group-name">{app.translator.trans('core.admin.permissions.new_group_button')}</span>
             </button>
           </div>
diff --git a/js/admin/src/components/SessionDropdown.js b/js/admin/src/components/SessionDropdown.js
index d6ce0e56a..5d34f683b 100644
--- a/js/admin/src/components/SessionDropdown.js
+++ b/js/admin/src/components/SessionDropdown.js
@@ -42,7 +42,7 @@ export default class SessionDropdown extends Dropdown {
 
     items.add('logOut',
       Button.component({
-        icon: 'sign-out',
+        icon: 'fa fa-sign-out-alt',
         children: app.translator.trans('core.admin.header.log_out_button'),
         onclick: app.session.logout.bind(app.session)
       }),
diff --git a/js/admin/src/components/SettingDropdown.js b/js/admin/src/components/SettingDropdown.js
index 5f00b1754..f85159372 100644
--- a/js/admin/src/components/SettingDropdown.js
+++ b/js/admin/src/components/SettingDropdown.js
@@ -8,7 +8,7 @@ export default class SettingDropdown extends SelectDropdown {
 
     props.className = 'SettingDropdown';
     props.buttonClassName = 'Button Button--text';
-    props.caretIcon = 'caret-down';
+    props.caretIcon = 'fa fa-caret-down';
     props.defaultLabel = 'Custom';
 
     props.children = props.options.map(({value, label}) => {
@@ -16,7 +16,7 @@ export default class SettingDropdown extends SelectDropdown {
 
       return Button.component({
         children: label,
-        icon: active ? 'check' : true,
+        icon: active ? 'fa fa-check' : true,
         onclick: saveSettings.bind(this, {[props.key]: value}),
         active
       });
diff --git a/js/admin/src/components/StatusWidget.js b/js/admin/src/components/StatusWidget.js
index 429b7a504..ac177af67 100644
--- a/js/admin/src/components/StatusWidget.js
+++ b/js/admin/src/components/StatusWidget.js
@@ -28,7 +28,7 @@ export default class StatusWidget extends DashboardWidget {
 
     items.add('help', (
       <a href="http://flarum.org/docs/troubleshooting" target="_blank">
-        {icon('question-circle')} {app.translator.trans('core.admin.dashboard.help_link')}
+        {icon('fa fa-question-circle')} {app.translator.trans('core.admin.dashboard.help_link')}
       </a>
     ));
 
diff --git a/js/forum/src/components/AvatarEditor.js b/js/forum/src/components/AvatarEditor.js
index 869904b33..adafcfbae 100644
--- a/js/forum/src/components/AvatarEditor.js
+++ b/js/forum/src/components/AvatarEditor.js
@@ -53,7 +53,7 @@ export default class AvatarEditor extends Component {
           ondragleave={this.disableDragover.bind(this)}
           ondragend={this.disableDragover.bind(this)}
           ondrop={this.dropUpload.bind(this)}>
-          {this.loading ? LoadingIndicator.component() : (user.avatarUrl() ? icon('pencil') : icon('plus-circle'))}
+          {this.loading ? LoadingIndicator.component() : (user.avatarUrl() ? icon('fa fa-pencil-alt') : icon('fa fa-plus-circle'))}
         </a>
         <ul className="Dropdown-menu Menu">
           {listItems(this.controlItems().toArray())}
@@ -72,7 +72,7 @@ export default class AvatarEditor extends Component {
 
     items.add('upload',
       Button.component({
-        icon: 'upload',
+        icon: 'fa fa-upload',
         children: app.translator.trans('core.forum.user.avatar_upload_button'),
         onclick: this.openPicker.bind(this)
       })
@@ -80,7 +80,7 @@ export default class AvatarEditor extends Component {
 
     items.add('remove',
       Button.component({
-        icon: 'times',
+        icon: 'fa fa-times',
         children: app.translator.trans('core.forum.user.avatar_remove_button'),
         onclick: this.remove.bind(this)
       })
diff --git a/js/forum/src/components/CommentPost.js b/js/forum/src/components/CommentPost.js
index e31be5ed1..9751936f2 100644
--- a/js/forum/src/components/CommentPost.js
+++ b/js/forum/src/components/CommentPost.js
@@ -142,7 +142,7 @@ export default class CommentPost extends Post {
       items.add('toggle', (
         Button.component({
           className: 'Button Button--default Button--more',
-          icon: 'ellipsis-h',
+          icon: 'fa fa-ellipsis-h',
           onclick: this.toggleContent.bind(this)
         })
       ));
diff --git a/js/forum/src/components/Composer.js b/js/forum/src/components/Composer.js
index 71738d3fc..a9ddad421 100644
--- a/js/forum/src/components/Composer.js
+++ b/js/forum/src/components/Composer.js
@@ -422,28 +422,28 @@ class Composer extends Component {
 
     if (this.position === Composer.PositionEnum.FULLSCREEN) {
       items.add('exitFullScreen', ComposerButton.component({
-        icon: 'compress',
+        icon: 'fa fa-compress',
         title: app.translator.trans('core.forum.composer.exit_full_screen_tooltip'),
         onclick: this.exitFullScreen.bind(this)
       }));
     } else {
       if (this.position !== Composer.PositionEnum.MINIMIZED) {
         items.add('minimize', ComposerButton.component({
-          icon: 'minus minimize',
+          icon: 'fa fa-minus minimize',
           title: app.translator.trans('core.forum.composer.minimize_tooltip'),
           onclick: this.minimize.bind(this),
           itemClassName: 'App-backControl'
         }));
 
         items.add('fullScreen', ComposerButton.component({
-          icon: 'expand',
+          icon: 'fa fa-expand',
           title: app.translator.trans('core.forum.composer.full_screen_tooltip'),
           onclick: this.fullScreen.bind(this)
         }));
       }
 
       items.add('close', ComposerButton.component({
-        icon: 'times',
+        icon: 'fa fa-times',
         title: app.translator.trans('core.forum.composer.close_tooltip'),
         onclick: this.close.bind(this)
       }));
diff --git a/js/forum/src/components/DiscussionListItem.js b/js/forum/src/components/DiscussionListItem.js
index ee10ece30..2b8418c2a 100644
--- a/js/forum/src/components/DiscussionListItem.js
+++ b/js/forum/src/components/DiscussionListItem.js
@@ -81,7 +81,7 @@ export default class DiscussionListItem extends Component {
     return (
       <div {...attrs}>
         {controls.length ? Dropdown.component({
-          icon: 'ellipsis-v',
+          icon: 'fa fa-ellipsis-v',
           children: controls,
           className: 'DiscussionListItem-controls',
           buttonClassName: 'Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right'
@@ -89,7 +89,7 @@ export default class DiscussionListItem extends Component {
 
         <a className={'Slidable-underneath Slidable-underneath--left Slidable-underneath--elastic' + (isUnread ? '' : ' disabled')}
           onclick={this.markAsRead.bind(this)}>
-          {icon('check')}
+          {icon('fa fa-check')}
         </a>
 
         <div className={'DiscussionListItem-content Slidable-content' + (isUnread ? ' unread' : '') + (isRead ? ' read' : '')}>
diff --git a/js/forum/src/components/DiscussionPage.js b/js/forum/src/components/DiscussionPage.js
index ab7a014c0..fdb71dbce 100644
--- a/js/forum/src/components/DiscussionPage.js
+++ b/js/forum/src/components/DiscussionPage.js
@@ -240,7 +240,7 @@ export default class DiscussionPage extends Page {
     items.add('controls',
       SplitDropdown.component({
         children: DiscussionControls.controls(this.discussion, this).toArray(),
-        icon: 'ellipsis-v',
+        icon: 'fa fa-ellipsis-v',
         className: 'App-primaryControl',
         buttonClassName: 'Button--primary'
       })
diff --git a/js/forum/src/components/DiscussionRenamedNotification.js b/js/forum/src/components/DiscussionRenamedNotification.js
index a2850cf10..409e55d53 100644
--- a/js/forum/src/components/DiscussionRenamedNotification.js
+++ b/js/forum/src/components/DiscussionRenamedNotification.js
@@ -10,7 +10,7 @@ import Notification from 'flarum/components/Notification';
  */
 export default class DiscussionRenamedNotification extends Notification {
   icon() {
-    return 'pencil';
+    return 'fa fa-pencil-alt';
   }
 
   href() {
diff --git a/js/forum/src/components/DiscussionRenamedPost.js b/js/forum/src/components/DiscussionRenamedPost.js
index e0cea7593..0d0b609f8 100644
--- a/js/forum/src/components/DiscussionRenamedPost.js
+++ b/js/forum/src/components/DiscussionRenamedPost.js
@@ -11,7 +11,7 @@ import extractText from 'flarum/utils/extractText';
  */
 export default class DiscussionRenamedPost extends EventPost {
   icon() {
-    return 'pencil';
+    return 'fa fa-pencil-alt';
   }
 
   description(data) {
diff --git a/js/forum/src/components/DiscussionsSearchSource.js b/js/forum/src/components/DiscussionsSearchSource.js
index a4b435e84..632c47af0 100644
--- a/js/forum/src/components/DiscussionsSearchSource.js
+++ b/js/forum/src/components/DiscussionsSearchSource.js
@@ -35,7 +35,7 @@ export default class DiscussionsSearchSource {
       <li className="Dropdown-header">{app.translator.trans('core.forum.search.discussions_heading')}</li>,
       <li>
         {LinkButton.component({
-          icon: 'search',
+          icon: 'fa fa-search',
           children: app.translator.trans('core.forum.search.all_discussions_button', {query}),
           href: app.route('index', {q: query})
         })}
diff --git a/js/forum/src/components/EditPostComposer.js b/js/forum/src/components/EditPostComposer.js
index 67905a7a1..9a060b078 100644
--- a/js/forum/src/components/EditPostComposer.js
+++ b/js/forum/src/components/EditPostComposer.js
@@ -52,7 +52,7 @@ export default class EditPostComposer extends ComposerBody {
 
     items.add('title', (
       <h3>
-        {icon('pencil')} {' '}
+        {icon('fa fa-pencil-alt')} {' '}
         <a href={app.route.discussion(post.discussion(), post.number())} config={routeAndMinimize}>
           {app.translator.trans('core.forum.composer_edit.post_link', {number: post.number(), discussion: post.discussion().title()})}
         </a>
diff --git a/js/forum/src/components/HeaderSecondary.js b/js/forum/src/components/HeaderSecondary.js
index a59ec265a..140179a86 100644
--- a/js/forum/src/components/HeaderSecondary.js
+++ b/js/forum/src/components/HeaderSecondary.js
@@ -46,7 +46,7 @@ export default class HeaderSecondary extends Component {
         locales.push(Button.component({
           active: app.data.locale === locale,
           children: app.data.locales[locale],
-          icon: app.data.locale === locale ? 'check' : true,
+          icon: app.data.locale === locale ? 'fa fa-check' : true,
           onclick: () => {
             if (app.session.user) {
               app.session.user.savePreferences({locale}).then(() => window.location.reload());
diff --git a/js/forum/src/components/IndexPage.js b/js/forum/src/components/IndexPage.js
index 10bde6c3f..51dd89dd0 100644
--- a/js/forum/src/components/IndexPage.js
+++ b/js/forum/src/components/IndexPage.js
@@ -154,7 +154,7 @@ export default class IndexPage extends Page {
     items.add('newDiscussion',
       Button.component({
         children: app.translator.trans(canStartDiscussion ? 'core.forum.index.start_discussion_button' : 'core.forum.index.cannot_start_discussion_button'),
-        icon: 'edit',
+        icon: 'fa fa-edit',
         className: 'Button Button--primary IndexPage-newDiscussion',
         itemClassName: 'App-primaryControl',
         onclick: this.newDiscussion.bind(this),
@@ -187,7 +187,7 @@ export default class IndexPage extends Page {
       LinkButton.component({
         href: app.route('index', params),
         children: app.translator.trans('core.forum.index.all_discussions_link'),
-        icon: 'comments-o'
+        icon: 'far fa-comments'
       }),
       100
     );
@@ -221,7 +221,7 @@ export default class IndexPage extends Page {
 
           return Button.component({
             children: label,
-            icon: active ? 'check' : true,
+            icon: active ? 'fa fa-check' : true,
             onclick: this.changeSort.bind(this, value),
             active: active,
           })
@@ -244,7 +244,7 @@ export default class IndexPage extends Page {
     items.add('refresh',
       Button.component({
         title: app.translator.trans('core.forum.index.refresh_tooltip'),
-        icon: 'refresh',
+        icon: 'fa fa-sync',
         className: 'Button Button--icon',
         onclick: () => {
           app.cache.discussionList.refresh();
@@ -260,7 +260,7 @@ export default class IndexPage extends Page {
       items.add('markAllAsRead',
         Button.component({
           title: app.translator.trans('core.forum.index.mark_all_as_read_tooltip'),
-          icon: 'check',
+          icon: 'fa fa-check',
           className: 'Button Button--icon',
           onclick: this.markAllAsRead.bind(this)
         })
diff --git a/js/forum/src/components/NotificationGrid.js b/js/forum/src/components/NotificationGrid.js
index df14de28e..5d1b2ad48 100644
--- a/js/forum/src/components/NotificationGrid.js
+++ b/js/forum/src/components/NotificationGrid.js
@@ -177,13 +177,13 @@ export default class NotificationGrid extends Component {
 
     items.add('alert', {
       name: 'alert',
-      icon: 'bell',
+      icon: 'fa fa-bell',
       label: app.translator.trans('core.forum.settings.notify_by_web_heading'),
     });
 
     items.add('email', {
       name: 'email',
-      icon: 'envelope-o',
+      icon: 'far fa-envelope',
       label: app.translator.trans('core.forum.settings.notify_by_email_heading'),
     });
 
@@ -206,7 +206,7 @@ export default class NotificationGrid extends Component {
 
     items.add('discussionRenamed', {
       name: 'discussionRenamed',
-      icon: 'pencil',
+      icon: 'fa fa-pencil-alt',
       label: app.translator.trans('core.forum.settings.notify_discussion_renamed_label')
     });
 
diff --git a/js/forum/src/components/NotificationList.js b/js/forum/src/components/NotificationList.js
index 7032b339b..c90e38898 100644
--- a/js/forum/src/components/NotificationList.js
+++ b/js/forum/src/components/NotificationList.js
@@ -34,7 +34,7 @@ export default class NotificationList extends Component {
           <div className="App-primaryControl">
             {Button.component({
               className: 'Button Button--icon Button--link',
-              icon: 'check',
+              icon: 'fa fa-check',
               title: app.translator.trans('core.forum.notifications.mark_all_as_read_tooltip'),
               onclick: this.markAllAsRead.bind(this)
             })}
diff --git a/js/forum/src/components/NotificationsDropdown.js b/js/forum/src/components/NotificationsDropdown.js
index 826a3190d..04579a78e 100644
--- a/js/forum/src/components/NotificationsDropdown.js
+++ b/js/forum/src/components/NotificationsDropdown.js
@@ -8,7 +8,7 @@ export default class NotificationsDropdown extends Dropdown {
     props.buttonClassName = props.buttonClassName || 'Button Button--flat';
     props.menuClassName = props.menuClassName || 'Dropdown-menu--right';
     props.label = props.label || app.translator.trans('core.forum.notifications.tooltip');
-    props.icon = props.icon || 'bell';
+    props.icon = props.icon || 'fa fa-bell';
 
     super.initProps(props);
   }
diff --git a/js/forum/src/components/Post.js b/js/forum/src/components/Post.js
index 5c514ac1b..b1841afa3 100644
--- a/js/forum/src/components/Post.js
+++ b/js/forum/src/components/Post.js
@@ -57,7 +57,7 @@ export default class Post extends Component {
                       className="Post-controls"
                       buttonClassName="Button Button--icon Button--flat"
                       menuClassName="Dropdown-menu--right"
-                      icon="ellipsis-h"
+                      icon="fa fa-ellipsis-h"
                       onshow={() => this.$('.Post-actions').addClass('open')}
                       onhide={() => this.$('.Post-actions').removeClass('open')}>
                       {controls}
diff --git a/js/forum/src/components/PostStreamScrubber.js b/js/forum/src/components/PostStreamScrubber.js
index 52636dc75..c47316e49 100644
--- a/js/forum/src/components/PostStreamScrubber.js
+++ b/js/forum/src/components/PostStreamScrubber.js
@@ -84,13 +84,13 @@ export default class PostStreamScrubber extends Component {
     return (
       <div className={'PostStreamScrubber Dropdown ' + (this.disabled() ? 'disabled ' : '') + (this.props.className || '')}>
         <button className="Button Dropdown-toggle" data-toggle="dropdown">
-          {viewing} {icon('sort')}
+          {viewing} {icon('fa fa-sort')}
         </button>
 
         <div className="Dropdown-menu dropdown-menu">
           <div className="Scrubber">
             <a className="Scrubber-first" onclick={this.goToFirst.bind(this)}>
-              {icon('angle-double-up')} {app.translator.trans('core.forum.post_scrubber.original_post_link')}
+              {icon('fa fa-angle-double-up')} {app.translator.trans('core.forum.post_scrubber.original_post_link')}
             </a>
 
             <div className="Scrubber-scrollbar">
@@ -110,7 +110,7 @@ export default class PostStreamScrubber extends Component {
             </div>
 
             <a className="Scrubber-last" onclick={this.goToLast.bind(this)}>
-              {icon('angle-double-down')} {app.translator.trans('core.forum.post_scrubber.now_link')}
+              {icon('fa fa-angle-double-down')} {app.translator.trans('core.forum.post_scrubber.now_link')}
             </a>
           </div>
         </div>
diff --git a/js/forum/src/components/ReplyComposer.js b/js/forum/src/components/ReplyComposer.js
index e1601315b..d03dccc84 100644
--- a/js/forum/src/components/ReplyComposer.js
+++ b/js/forum/src/components/ReplyComposer.js
@@ -51,7 +51,7 @@ export default class ReplyComposer extends ComposerBody {
 
     items.add('title', (
       <h3>
-        {icon('reply')} {' '}
+        {icon('fa fa-reply')} {' '}
         <a href={app.route.discussion(discussion)} config={routeAndMinimize}>{discussion.title()}</a>
       </h3>
     ));
diff --git a/js/forum/src/components/Search.js b/js/forum/src/components/Search.js
index 9481f053c..43ab20597 100644
--- a/js/forum/src/components/Search.js
+++ b/js/forum/src/components/Search.js
@@ -92,7 +92,7 @@ export default class Search extends Component {
           {this.loadingSources
             ? LoadingIndicator.component({size: 'tiny', className: 'Button Button--icon Button--link'})
             : currentSearch
-              ? <button className="Search-clear Button Button--icon Button--link" onclick={this.clear.bind(this)}>{icon('times-circle')}</button>
+              ? <button className="Search-clear Button Button--icon Button--link" onclick={this.clear.bind(this)}>{icon('fa fa-times-circle')}</button>
               : ''}
         </div>
         <ul className="Dropdown-menu Search-results">
diff --git a/js/forum/src/components/SessionDropdown.js b/js/forum/src/components/SessionDropdown.js
index ae5792c35..6a2ed6597 100644
--- a/js/forum/src/components/SessionDropdown.js
+++ b/js/forum/src/components/SessionDropdown.js
@@ -46,7 +46,7 @@ export default class SessionDropdown extends Dropdown {
 
     items.add('profile',
       LinkButton.component({
-        icon: 'user',
+        icon: 'fa fa-user',
         children: app.translator.trans('core.forum.header.profile_button'),
         href: app.route.user(user)
       }),
@@ -55,7 +55,7 @@ export default class SessionDropdown extends Dropdown {
 
     items.add('settings',
       LinkButton.component({
-        icon: 'cog',
+        icon: 'fa fa-cog',
         children: app.translator.trans('core.forum.header.settings_button'),
         href: app.route('settings')
       }),
@@ -65,7 +65,7 @@ export default class SessionDropdown extends Dropdown {
     if (app.forum.attribute('adminUrl')) {
       items.add('administration',
         LinkButton.component({
-          icon: 'wrench',
+          icon: 'fa fa-wrench',
           children: app.translator.trans('core.forum.header.admin_button'),
           href: app.forum.attribute('adminUrl'),
           target: '_blank',
@@ -79,7 +79,7 @@ export default class SessionDropdown extends Dropdown {
 
     items.add('logOut',
       Button.component({
-        icon: 'sign-out',
+        icon: 'fa fa-sign-out-alt',
         children: app.translator.trans('core.forum.header.log_out_button'),
         onclick: app.session.logout.bind(app.session)
       }),
diff --git a/js/forum/src/components/TerminalPost.js b/js/forum/src/components/TerminalPost.js
index 36267238c..3ad343a67 100644
--- a/js/forum/src/components/TerminalPost.js
+++ b/js/forum/src/components/TerminalPost.js
@@ -20,7 +20,7 @@ export default class TerminalPost extends Component {
 
     return (
       <span>
-        {lastPost ? icon('reply') : ''}{' '}
+        {lastPost ? icon('fa fa-reply') : ''}{' '}
         {app.translator.trans('core.forum.discussion_list.' + (lastPost ? 'replied' : 'started') + '_text', {
           user,
           ago: humanTime(time)
diff --git a/js/forum/src/components/TextEditor.js b/js/forum/src/components/TextEditor.js
index 1b8d2cd4d..942e20d98 100644
--- a/js/forum/src/components/TextEditor.js
+++ b/js/forum/src/components/TextEditor.js
@@ -70,7 +70,7 @@ export default class TextEditor extends Component {
     items.add('submit',
       Button.component({
         children: this.props.submitLabel,
-        icon: 'check',
+        icon: 'fa fa-check',
         className: 'Button Button--primary',
         itemClassName: 'App-primaryControl',
         onclick: this.onsubmit.bind(this)
@@ -80,7 +80,7 @@ export default class TextEditor extends Component {
     if (this.props.preview) {
       items.add('preview',
         Button.component({
-          icon: 'eye',
+          icon: 'fa fa-eye',
           className: 'Button Button--icon',
           onclick: this.props.preview,
           title: app.translator.trans('core.forum.composer.preview_tooltip')
diff --git a/js/forum/src/components/UserCard.js b/js/forum/src/components/UserCard.js
index 94c116a44..58d07ffd6 100644
--- a/js/forum/src/components/UserCard.js
+++ b/js/forum/src/components/UserCard.js
@@ -40,7 +40,7 @@ export default class UserCard extends Component {
               menuClassName: 'Dropdown-menu--right',
               buttonClassName: this.props.controlsButtonClassName,
               label: app.translator.trans('core.forum.user_controls.button'),
-              icon: 'ellipsis-v'
+              icon: 'fa fa-ellipsis-v'
             }) : ''}
 
             <div className="UserCard-profile">
@@ -87,8 +87,8 @@ export default class UserCard extends Component {
       items.add('lastSeen', (
         <span className={'UserCard-lastSeen' + (online ? ' online' : '')}>
           {online
-            ? [icon('circle'), ' ', app.translator.trans('core.forum.user.online_text')]
-            : [icon('clock-o'), ' ', humanTime(lastSeenTime)]}
+            ? [icon('fa fa-circle'), ' ', app.translator.trans('core.forum.user.online_text')]
+            : [icon('far fa-clock'), ' ', humanTime(lastSeenTime)]}
         </span>
       ));
     }
diff --git a/js/forum/src/components/UserPage.js b/js/forum/src/components/UserPage.js
index e8679ea58..298c241c4 100644
--- a/js/forum/src/components/UserPage.js
+++ b/js/forum/src/components/UserPage.js
@@ -130,7 +130,7 @@ export default class UserPage extends Page {
       LinkButton.component({
         href: app.route('user.posts', {username: user.username()}),
         children: [app.translator.trans('core.forum.user.posts_link'), <span className="Button-badge">{user.commentsCount()}</span>],
-        icon: 'comment-o'
+        icon: 'far fa-comment'
       }),
       100
     );
@@ -139,7 +139,7 @@ export default class UserPage extends Page {
       LinkButton.component({
         href: app.route('user.discussions', {username: user.username()}),
         children: [app.translator.trans('core.forum.user.discussions_link'), <span className="Button-badge">{user.discussionsCount()}</span>],
-        icon: 'reorder'
+        icon: 'fa fa-bars'
       }),
       90
     );
@@ -150,7 +150,7 @@ export default class UserPage extends Page {
         LinkButton.component({
           href: app.route('settings'),
           children: app.translator.trans('core.forum.user.settings_link'),
-          icon: 'cog'
+          icon: 'fa fa-cog'
         }),
         -100
       );
diff --git a/js/forum/src/components/WelcomeHero.js b/js/forum/src/components/WelcomeHero.js
index 856cd048a..4fab5c7ed 100644
--- a/js/forum/src/components/WelcomeHero.js
+++ b/js/forum/src/components/WelcomeHero.js
@@ -21,7 +21,7 @@ export default class WelcomeHero extends Component {
       <header className="Hero WelcomeHero">
         <div class="container">
           {Button.component({
-            icon: 'times',
+            icon: 'fa fa-times',
             onclick: slideUp,
             className: 'Hero-close Button Button--icon Button--link'
           })}
diff --git a/js/forum/src/initializers/alertEmailConfirmation.js b/js/forum/src/initializers/alertEmailConfirmation.js
index 1aa216d92..16cf67a86 100644
--- a/js/forum/src/initializers/alertEmailConfirmation.js
+++ b/js/forum/src/initializers/alertEmailConfirmation.js
@@ -24,7 +24,7 @@ export default function alertEmailConfirmation(app) {
         url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/send-confirmation',
       }).then(() => {
         resendButton.props.loading = false;
-        resendButton.props.children = [icon('check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
+        resendButton.props.children = [icon('fa fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
         resendButton.props.disabled = true;
         m.redraw();
       }).catch(() => {
diff --git a/js/forum/src/utils/DiscussionControls.js b/js/forum/src/utils/DiscussionControls.js
index 8d897eee6..1c24d7629 100644
--- a/js/forum/src/utils/DiscussionControls.js
+++ b/js/forum/src/utils/DiscussionControls.js
@@ -55,12 +55,12 @@ export default {
       items.add('reply',
         !app.session.user || discussion.canReply()
           ? Button.component({
-            icon: 'reply',
+            icon: 'fa fa-reply',
             children: app.translator.trans(app.session.user ? 'core.forum.discussion_controls.reply_button' : 'core.forum.discussion_controls.log_in_to_reply_button'),
             onclick: this.replyAction.bind(discussion, true, false)
           })
           : Button.component({
-            icon: 'reply',
+            icon: 'fa fa-reply',
             children: app.translator.trans('core.forum.discussion_controls.cannot_reply_button'),
             className: 'disabled',
             title: app.translator.trans('core.forum.discussion_controls.cannot_reply_text')
@@ -85,7 +85,7 @@ export default {
 
     if (discussion.canRename()) {
       items.add('rename', Button.component({
-        icon: 'pencil',
+        icon: 'fa fa-pencil-alt',
         children: app.translator.trans('core.forum.discussion_controls.rename_button'),
         onclick: this.renameAction.bind(discussion)
       }));
@@ -109,7 +109,7 @@ export default {
     if (!discussion.isHidden()) {
       if (discussion.canHide()) {
         items.add('hide', Button.component({
-          icon: 'trash-o',
+          icon: 'far fa-trash-alt',
           children: app.translator.trans('core.forum.discussion_controls.delete_button'),
           onclick: this.hideAction.bind(discussion)
         }));
@@ -117,7 +117,7 @@ export default {
     } else {
       if (discussion.canHide()) {
         items.add('restore', Button.component({
-          icon: 'reply',
+          icon: 'fa fa-reply',
           children: app.translator.trans('core.forum.discussion_controls.restore_button'),
           onclick: this.restoreAction.bind(discussion)
         }));
@@ -125,7 +125,7 @@ export default {
 
       if (discussion.canDelete()) {
         items.add('delete', Button.component({
-          icon: 'times',
+          icon: 'fa fa-times',
           children: app.translator.trans('core.forum.discussion_controls.delete_forever_button'),
           onclick: this.deleteAction.bind(discussion)
         }));
diff --git a/js/forum/src/utils/PostControls.js b/js/forum/src/utils/PostControls.js
index 56f9e6955..767086b31 100644
--- a/js/forum/src/utils/PostControls.js
+++ b/js/forum/src/utils/PostControls.js
@@ -59,7 +59,7 @@ export default {
     if (post.contentType() === 'comment' && post.canEdit()) {
       if (!post.isHidden()) {
         items.add('edit', Button.component({
-          icon: 'pencil',
+          icon: 'fa fa-pencil-alt',
           children: app.translator.trans('core.forum.post_controls.edit_button'),
           onclick: this.editAction.bind(post)
         }));
@@ -84,7 +84,7 @@ export default {
     if (post.contentType() === 'comment' && !post.isHidden()) {
       if (post.canEdit()) {
         items.add('hide', Button.component({
-          icon: 'trash-o',
+          icon: 'far fa-trash-alt',
           children: app.translator.trans('core.forum.post_controls.delete_button'),
           onclick: this.hideAction.bind(post)
         }));
@@ -92,14 +92,14 @@ export default {
     } else {
       if (post.contentType() === 'comment' && post.canEdit()) {
         items.add('restore', Button.component({
-          icon: 'reply',
+          icon: 'fa fa-reply',
           children: app.translator.trans('core.forum.post_controls.restore_button'),
           onclick: this.restoreAction.bind(post)
         }));
       }
       if (post.canDelete()) {
         items.add('delete', Button.component({
-          icon: 'times',
+          icon: 'fa fa-times',
           children: app.translator.trans('core.forum.post_controls.delete_forever_button'),
           onclick: this.deleteAction.bind(post, context)
         }));
diff --git a/js/forum/src/utils/UserControls.js b/js/forum/src/utils/UserControls.js
index 5d001216e..667c7b184 100644
--- a/js/forum/src/utils/UserControls.js
+++ b/js/forum/src/utils/UserControls.js
@@ -59,7 +59,7 @@ export default {
 
     if (user.canEdit()) {
       items.add('edit', Button.component({
-        icon: 'pencil',
+        icon: 'fa fa-pencil-alt',
         children: app.translator.trans('core.forum.user_controls.edit_button'),
         onclick: this.editAction.bind(user)
       }));
@@ -82,7 +82,7 @@ export default {
 
     if (user.id() !== '1' && user.canDelete()) {
       items.add('delete', Button.component({
-        icon: 'times',
+        icon: 'fa fa-times',
         children: app.translator.trans('core.forum.user_controls.delete_button'),
         onclick: this.deleteAction.bind(user)
       }));
diff --git a/js/lib/components/Alert.js b/js/lib/components/Alert.js
index 82e48268e..6aef6e257 100644
--- a/js/lib/components/Alert.js
+++ b/js/lib/components/Alert.js
@@ -37,7 +37,7 @@ export default class Alert extends Component {
     if (dismissible || dismissible === undefined) {
       dismissControl.push(
         <Button
-          icon="times"
+          icon="fa fa-times"
           className="Button Button--link Button--icon Alert-dismiss"
           onclick={ondismiss}/>
       );
diff --git a/js/lib/components/Checkbox.js b/js/lib/components/Checkbox.js
index 6e02a42d3..de63f6815 100644
--- a/js/lib/components/Checkbox.js
+++ b/js/lib/components/Checkbox.js
@@ -52,7 +52,7 @@ export default class Checkbox extends Component {
   getDisplay() {
     return this.loading
       ? LoadingIndicator.component({size: 'tiny'})
-      : icon(this.props.state ? 'check' : 'times');
+      : icon(this.props.state ? 'fa fa-check' : 'fa fa-times');
   }
 
   /**
diff --git a/js/lib/components/Dropdown.js b/js/lib/components/Dropdown.js
index d3fa8ae3f..cdc5a3f64 100644
--- a/js/lib/components/Dropdown.js
+++ b/js/lib/components/Dropdown.js
@@ -26,7 +26,7 @@ export default class Dropdown extends Component {
     props.buttonClassName = props.buttonClassName || '';
     props.menuClassName = props.menuClassName || '';
     props.label = props.label || '';
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'caret-down';
+    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fa fa-caret-down';
   }
 
   init() {
diff --git a/js/lib/components/Modal.js b/js/lib/components/Modal.js
index 593085ad3..a0b2eb961 100644
--- a/js/lib/components/Modal.js
+++ b/js/lib/components/Modal.js
@@ -29,7 +29,7 @@ export default class Modal extends Component {
           {this.isDismissible() ? (
             <div className="Modal-close App-backControl">
               {Button.component({
-                icon: 'times',
+                icon: 'fa fa-times',
                 onclick: this.hide.bind(this),
                 className: 'Button Button--icon Button--link'
               })}
diff --git a/js/lib/components/Navigation.js b/js/lib/components/Navigation.js
index 189e43339..58de24579 100644
--- a/js/lib/components/Navigation.js
+++ b/js/lib/components/Navigation.js
@@ -52,7 +52,7 @@ export default class Navigation extends Component {
     return LinkButton.component({
       className: 'Button Navigation-back Button--icon',
       href: history.backUrl(),
-      icon: 'chevron-left',
+      icon: 'fa fa-chevron-left',
       title: previous.title,
       config: () => {},
       onclick: e => {
@@ -77,7 +77,7 @@ export default class Navigation extends Component {
     return Button.component({
       className: 'Button Button--icon Navigation-pin' + (pane.pinned ? ' active' : ''),
       onclick: pane.togglePinned.bind(pane),
-      icon: 'thumb-tack'
+      icon: 'fa fa-thumbtack'
     });
   }
 
@@ -100,7 +100,7 @@ export default class Navigation extends Component {
         e.stopPropagation();
         drawer.show();
       },
-      icon: 'reorder'
+      icon: 'fa fa-bars'
     });
   }
 }
diff --git a/js/lib/components/Select.js b/js/lib/components/Select.js
index ab6ef9fea..3af323435 100644
--- a/js/lib/components/Select.js
+++ b/js/lib/components/Select.js
@@ -18,7 +18,7 @@ export default class Select extends Component {
         <select className="Select-input FormControl" onchange={onchange ? m.withAttr('value', onchange.bind(this)) : undefined} value={value}>
           {Object.keys(options).map(key => <option value={key}>{options[key]}</option>)}
         </select>
-        {icon('sort', {className: 'Select-caret'})}
+        {icon('fa fa-sort', {className: 'Select-caret'})}
       </span>
     );
   }
diff --git a/js/lib/components/SelectDropdown.js b/js/lib/components/SelectDropdown.js
index aea7dfa41..f85078eee 100644
--- a/js/lib/components/SelectDropdown.js
+++ b/js/lib/components/SelectDropdown.js
@@ -13,7 +13,7 @@ import icon from 'flarum/helpers/icon';
  */
 export default class SelectDropdown extends Dropdown {
   static initProps(props) {
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'sort';
+    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fa fa-sort';
 
     super.initProps(props);
 
diff --git a/js/lib/components/SplitDropdown.js b/js/lib/components/SplitDropdown.js
index 5294562e4..72196b66a 100644
--- a/js/lib/components/SplitDropdown.js
+++ b/js/lib/components/SplitDropdown.js
@@ -28,7 +28,7 @@ export default class SplitDropdown extends Dropdown {
         className={'Dropdown-toggle Button Button--icon ' + this.props.buttonClassName}
         data-toggle="dropdown">
         {icon(this.props.icon, {className: 'Button-icon'})}
-        {icon('caret-down', {className: 'Button-caret'})}
+        {icon('fa fa-caret-down', {className: 'Button-caret'})}
       </button>
     ];
   }
diff --git a/js/lib/helpers/icon.js b/js/lib/helpers/icon.js
index 56a75ef81..35e8b25cb 100644
--- a/js/lib/helpers/icon.js
+++ b/js/lib/helpers/icon.js
@@ -1,12 +1,12 @@
 /**
- * The `icon` helper displays a FontAwesome icon. The fa-fw class is applied.
+ * The `icon` helper displays an icon.
  *
- * @param {String} name The name of the icon class, without the `fa-` prefix.
+ * @param {String} fontClass The full icon class, prefix and the icon’s name.
  * @param {Object} attrs Any other attributes to apply.
  * @return {Object}
  */
-export default function icon(name, attrs = {}) {
-  attrs.className = 'icon fa fa-' + name + ' ' + (attrs.className || '');
+export default function icon(fontClass, attrs = {}) {
+  attrs.className = 'icon ' + fontClass + ' ' + (attrs.className || '');
 
   return <i {...attrs}/>;
 }
diff --git a/js/lib/helpers/userOnline.js b/js/lib/helpers/userOnline.js
index edf21b498..bb8debb1a 100644
--- a/js/lib/helpers/userOnline.js
+++ b/js/lib/helpers/userOnline.js
@@ -8,6 +8,6 @@ import icon from 'flarum/helpers/icon';
  */
 export default function userOnline(user) {
     if (user.lastSeenTime() && user.isOnline()) {
-        return <span className="UserOnline">{icon('circle')}</span>;
+        return <span className="UserOnline">{icon('fa fa-circle')}</span>;
     }
 }
diff --git a/js/lib/models/Discussion.js b/js/lib/models/Discussion.js
index 4c4072ba9..cbc428cca 100644
--- a/js/lib/models/Discussion.js
+++ b/js/lib/models/Discussion.js
@@ -84,7 +84,7 @@ Object.assign(Discussion.prototype, {
     const items = new ItemList();
 
     if (this.isHidden()) {
-      items.add('hidden', <Badge type="hidden" icon="trash" label={app.translator.trans('core.lib.badge.hidden_tooltip')}/>);
+      items.add('hidden', <Badge type="hidden" icon="fa fa-trash" label={app.translator.trans('core.lib.badge.hidden_tooltip')}/>);
     }
 
     return items;
diff --git a/less/forum/DiscussionListItem.less b/less/forum/DiscussionListItem.less
index dea265c55..c531dbd9b 100644
--- a/less/forum/DiscussionListItem.less
+++ b/less/forum/DiscussionListItem.less
@@ -244,8 +244,8 @@
     padding-left: 21px;
 
     &:before {
-      .fa();
-      content: @fa-var-comment-o;
+      .far();
+      content: @fa-var-comment;
       float: left;
       margin-left: -21px;
       margin-top: 3px;
@@ -255,9 +255,11 @@
       font-weight: bold;
 
       &:before {
+        .fa();
         content: @fa-var-comment;
       }
       &:hover:before {
+        .fa();
         content: @fa-var-check;
       }
     }
diff --git a/less/lib/lib.less b/less/lib/lib.less
index 4d052f662..c999c6602 100644
--- a/less/lib/lib.less
+++ b/less/lib/lib.less
@@ -1,4 +1,7 @@
-@import "font-awesome.less";
+@import "fontawesome.less";
+@import "fa-brands.less";
+@import "fa-regular.less";
+@import "fa-solid.less";
 @fa-font-path: "./fonts";
 
 @import "normalize.less";
diff --git a/src/Install/Console/InstallCommand.php b/src/Install/Console/InstallCommand.php
index 636f880a3..1ce1a2c0a 100644
--- a/src/Install/Console/InstallCommand.php
+++ b/src/Install/Console/InstallCommand.php
@@ -287,10 +287,10 @@ class InstallCommand extends AbstractCommand
         Group::unguard();
 
         $groups = [
-            [Group::ADMINISTRATOR_ID, 'Admin', 'Admins', '#B72A2A', 'wrench'],
+            [Group::ADMINISTRATOR_ID, 'Admin', 'Admins', '#B72A2A', 'fa fa-wrench'],
             [Group::GUEST_ID, 'Guest', 'Guests', null, null],
             [Group::MEMBER_ID, 'Member', 'Members', null, null],
-            [Group::MODERATOR_ID, 'Mod', 'Mods', '#80349E', 'bolt']
+            [Group::MODERATOR_ID, 'Mod', 'Mods', '#80349E', 'fa fa-bolt']
         ];
 
         foreach ($groups as $group) {
@@ -386,7 +386,7 @@ class InstallCommand extends AbstractCommand
     protected function publishAssets()
     {
         $this->filesystem->copyDirectory(
-            $this->application->basePath().'/vendor/components/font-awesome/fonts',
+            $this->application->basePath().'/vendor/components/font-awesome/webfonts',
             $this->application->publicPath().'/assets/fonts'
         );
     }